/* Seamesy — shared styles. Brand: Dusty Rose, Forest Green, Spun Gold. Type: Playfair Display + Outfit. */

@font-face{font-family:"Playfair Display";src:url(fonts/playfair.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url(fonts/outfit.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --serif:"Playfair Display","Iowan Old Style",Georgia,serif;
  --sans:"Outfit",Aptos,"Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
  --bg:#fff;--bg2:#FBF9F6;--surface:#fff;--surface2:#F6F2EC;
  --ink:#2A3F36;--text:#3B4642;--muted:#6B7570;--line:#EAE5DE;--line2:#D8D1C7;
  --pri:#2A3F36;--pri-h:#1E2F27;--pri-t:#fff;
  --rose:#E6A89B;--rose-h:#CB7261;--rose-s:#FBEEEA;--rose-t:#A3483B;
  --gold:#D3AA6C;--gold-s:#F8F0DF;--gold-t:#7E5C1C;
  --sage:#9BAA92;--sage-s:#EEF2EB;--sage-t:#46583F;
  --green-s:#E8EEEA;
  --ok:#2F7A55;--ok-s:#E4F1EA;--err:#B3372C;--err-s:#F8E3E0;--on-ok:#fff;
  --band:#2A3F36;--band-t:#F4EFE8;
  --sh:0 1px 2px rgba(42,63,54,.05),0 10px 30px rgba(42,63,54,.08);
  --r:18px;
  --ring:rgba(0,0,0,.1);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111A16;--bg2:#151F1A;--surface:#1A2721;--surface2:#213029;
  --ink:#F4EFE8;--text:#D9DFDB;--muted:#9FADA6;--line:#2A3A33;--line2:#3B4D45;
  --pri:#E6A89B;--pri-h:#F0B9AD;--pri-t:#1E2F27;
  --rose-h:#E6A89B;--rose-s:rgba(230,168,155,.13);--rose-t:#F0B9AD;
  --gold-s:rgba(211,170,108,.15);--gold-t:#E3C58C;
  --sage-s:rgba(155,170,146,.15);--sage-t:#C4D0BC;
  --green-s:rgba(155,170,146,.14);
  --ok:#7BC59B;--ok-s:rgba(123,197,155,.14);--err:#F09A8F;--err-s:rgba(240,154,143,.16);--on-ok:#10221A;
  --band:#1E3229;--band-t:#F4EFE8;
  --sh:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28);
  --ring:rgba(255,255,255,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
/* A guest-only or buyer-only element (the footer's "For designers" column,
   "Open your store", "Measurements"/"Saved designers", etc.) has no inline
   style in the HTML itself, since the page doesn't know who's signed in
   until JS resolves the Supabase session — which takes a beat on every
   single page load, because this is a hard-navigation site with no shared
   SPA state between pages. Left alone, that means guest/buyer content
   visibly flashes on screen for an already-signed-in user before JS hides
   it a moment later. A tiny inline script in <head> (before the
   stylesheet link, so it always wins the race) makes a same-tick guess
   from localStorage and adds one of these classes to <html>; the real
   check in applyRoleHeader() still runs after and has the final say via
   inline styles, which always beat a class selector's specificity. */
html.maybe-signed-in [data-guest-only]{display:none}
html.maybe-designer [data-buyer-only]{display:none}
/* The footer's signed-in-only links have no inline display:none (unlike
   the header's), so they show on the very first paint from the same guess
   instead of waiting on JS. applyRoleHeader() keeps both classes in sync
   with the real session once it's known, so the guess can't stick. */
html:not(.maybe-designer) :is(.hdr,.foot) [data-designer-only],
html:not(.maybe-signed-in) :is(.hdr,.foot) [data-buyer-signed-only],
html.maybe-designer :is(.hdr,.foot) [data-buyer-signed-only]{display:none}
/* Same first-paint guess for the header nav and phone drawer (kiki,
   21 Oct 2026: "For Designers" flashed for a split second before "My
   Orders" swapped in). The header's role links no longer carry inline
   display:none, so a signed-in buyer's first paint already shows
   "My Orders" with no "For Designers", and a designer's shows My Store /
   Orders Received with no "Start a request" (that CTA is rewritten to
   "Your store", which no longer matches the href rule, once JS runs).
   .role-buyer/.role-designer copy (About, How it works) follows the same
   guess. applyRoleHeader() re-syncs both classes once the role is real. */
html.maybe-signed-in .hdr a[href="/join"],
html.maybe-designer .hdr [data-buyer-only],
html.maybe-designer a[href^="/request"],
html.maybe-designer .role-buyer{display:none}
html.maybe-designer .role-designer[hidden]{display:block}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
/* clip, not hidden: hidden turns body into its own scroll box, which
   silently stopped every position:sticky (the header, the chat's action
   banner) from sticking. Older browsers keep the hidden fallback. */
main{flex:1;outline:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:700;line-height:1.06}
h2{font-size:clamp(1.7rem,3.1vw,2.45rem)}
h3{font-size:1.2rem}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--pri);color:var(--pri-t);padding:10px 16px;border-radius:999px;z-index:100;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.narrow{width:min(860px,calc(100% - 48px));margin-inline:auto}
.sec{padding:88px 0}
.sec.tint{background:var(--bg2)}
.sec.sage{background:var(--sage-s)}
/* A small stitched-thread divider, echoing the homepage hero's needle
   motif, used above a section that needs to visually separate itself
   from the plain sections on either side of it rather than floating in
   blank space. One quiet draw-in on load, not scroll-triggered — this
   page's one scroll motion moment is the step-flow further down. */
.stitch-div{display:block;margin:0 auto 20px;width:120px;height:28px}
.stitch-div path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:220;stroke-dashoffset:220;animation:draw 1.4s .2s cubic-bezier(.5,0,.2,1) forwards}
.stitch-div .needle{fill:var(--gold)}
@media(prefers-reduced-motion:reduce){.stitch-div path{stroke-dashoffset:0;animation:none}}
.sub{color:var(--muted);font-size:.95rem}
.fine{color:var(--muted);font-size:.85rem}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:68ch;line-height:1.55;text-wrap:pretty}
.link{color:var(--rose-t);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.light-only{display:block}.dark-only{display:none}
[data-theme="dark"] .light-only{display:none}[data-theme="dark"] .dark-only{display:block}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}.ic.fill{fill:currentColor;stroke:none}
.accent{font-style:italic;color:var(--rose-h);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:11px 22px;font-weight:600;font-size:1rem;line-height:1.2;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn.pri{background:var(--pri);color:var(--pri-t)}
.btn.pri:hover{background:var(--pri-h)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.gold{background:var(--gold);color:#1E2F27}
.btn.gold:hover{filter:brightness(1.05)}
.btn.sm{padding:9px 18px;font-size:.92rem}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label,.lbl{font-weight:600;font-size:.92rem;color:var(--ink)}
/* 16px (not 1rem) on purpose: iOS Safari auto-zooms the viewport on focus
   whenever a form control's computed font-size is under 16px, and a fixed
   px value here means that stays true even if a root font-size change is
   ever introduced upstream. */
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:10px 14px;font-size:16px;color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
textarea{min-height:90px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B7570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
input[type=checkbox]{width:20px;height:20px;padding:0;accent-color:var(--pri);flex:none}
input[type=range]{padding:0;height:6px;accent-color:var(--pri);border:0;background:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.err{color:var(--err);font-weight:500;min-height:1.4em;margin-bottom:10px}
.mod-warn{margin:8px 14px 0;padding:10px 12px;border:1px solid var(--gold);border-radius:10px;background:var(--gold-s);font-size:.86rem;line-height:1.45}
.mod-warn p{margin:0 0 8px}
.req-mark{color:var(--err);margin-left:2px}
.switch{display:flex;align-items:center;gap:12px;font-weight:500;cursor:pointer}
/* The accepting-requests row on /store: previously a flat bordered box
   with no feedback until you'd already toggled it. Now it's pressable
   (a lifted card with a hover state) and the color shift reads as a
   deliberate state, not just a muted-out "off" look. */
.accepting-row{background:var(--sage-s);border:1px solid transparent;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:box-shadow .2s ease,background .2s ease}
.accepting-row:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.accepting-row.off{background:var(--bg2);border-color:var(--line)}
.tog{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--ink);cursor:pointer}
.tog input{flex:none;margin-top:3px}

.cal-wrap{position:relative}
.cal-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:12px 15px;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.cal-trigger:hover{border-color:var(--line2)}
.cal-trigger[aria-expanded="true"]{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.cal-trigger .ic{width:18px;height:18px;color:var(--muted);flex:none}
.cal-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:300px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.cal-pop[hidden]{display:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1rem}
.cal-nav{width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);display:grid;place-items:center;font-size:1.15rem;line-height:1;cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--ink)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--text);font-size:.92rem;cursor:pointer;padding:0}
.cal-day.cal-pad{cursor:default}
.cal-day:not(:disabled):not(.cal-pad):hover{background:var(--surface2)}
.cal-day.today{font-weight:700;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.cal-day.sel{background:var(--pri);color:var(--pri-t);font-weight:600;box-shadow:none}
.cal-day:disabled{color:var(--line2);cursor:not-allowed}
.cal-day.today:disabled{color:var(--line2);font-weight:400}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:44px;width:auto}
.brand-word{font-weight:300;font-size:1.3rem;letter-spacing:.34em;color:var(--ink);padding-left:.1em}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{padding:9px 16px;border-radius:999px;font-weight:500;font-size:.98rem;color:var(--text);white-space:nowrap;transition:background .15s ease}
.nav a:hover{background:var(--surface2)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--rose-s);font-weight:600}
/* Unread-message dot on "My Orders"/"Orders received" — hidden by default
   (JS un-hides every [data-badge="unread-orders"] element once a check
   finds at least one unread message on one of this person's orders).
   The [hidden] rule below is the actual fix for the dot that wouldn't
   go away no matter what: .nav-badge{display:inline-block} and the
   browser's own [hidden]{display:none} are equal specificity, so
   whichever an author stylesheet declares simply wins — meaning this
   rule was silently overriding `hidden` and showing the dot at all
   times, regardless of what the JS set el.hidden to. */
.nav-badge{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--err);margin-left:6px;vertical-align:middle}
.nav-badge[hidden]{display:none}
.dl .nav-badge{margin-left:8px}
/* The bare dot above is enough on compact nav links, but next to an
   order row (where there's room, and it's not obvious at a glance which
   order the dot is even about) it gets a short label too. */
.unread-flag{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:.78rem;font-weight:700;color:var(--err);vertical-align:middle}
.unread-flag .nav-badge{margin-left:0}
.hdr-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.hdr-tools select{width:auto;padding:8px 32px 8px 14px;border-radius:999px;font-size:.9rem;font-weight:600;border-color:var(--line)}
/* #cur (desktop header) and #cur2 (mobile drawer) are the same currency
   control shown twice — a signed-in designer's is locked to their own
   payout currency in both places (see applyRoleHeader in assets/app.js),
   so both need to actually look locked. .hdr-tools select:disabled alone
   only ever matched the desktop one; #cur2 lives in .drawer .d-row and was
   functionally disabled but visually indistinguishable from an active
   dropdown, which read as "still active" even though it couldn't be
   changed. */
.hdr-tools select:disabled,.drawer select:disabled{background-color:var(--surface2);color:var(--muted);opacity:.7;cursor:not-allowed}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--ink)}
.icon-btn.sm{width:30px;height:30px;font-size:.85rem;border:1px solid var(--line)}
.icon-btn:hover{background:var(--surface2)}
.icon-btn[aria-current="page"]{background:var(--rose-s)}
.icon-btn .ic{width:21px;height:21px}
/* Hover/focus dropdown off the header's account icon, showing a quick
   account summary + sign out so a page like My account doesn't need its
   own standalone Sign out button awkwardly spread across the page header. */
.acct-menu{position:relative}
/* top:100% (flush against the account icon, no gap) is deliberate: with a
   gap there, moving the mouse from the icon down into the menu crosses a
   strip that belongs to neither element, :hover drops, and the menu
   vanishes before you reach it ("I have to chase it"). Flush against the
   icon removes that dead zone entirely. */
.acct-drop{display:none;position:absolute;top:100%;right:0;z-index:60;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:8px;text-align:left;margin-top:8px}
.acct-drop::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.acct-menu:hover .acct-drop,.acct-menu:focus-within .acct-drop{display:block}
.acct-drop:empty{display:none!important}
.acct-drop .acct-summary{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-drop .acct-summary b{display:block;font-size:.95rem;color:var(--ink)}
.acct-drop .acct-summary span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;word-break:break-word}
.acct-drop a,.acct-drop button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:10px;font-size:.92rem;color:var(--text);background:transparent;border:0;font:inherit;cursor:pointer}
.acct-drop a:hover,.acct-drop button:hover{background:var(--surface2);color:var(--ink)}
.acct-drop .acct-signout{color:var(--err)}
.hdr-cta{margin-left:6px}
.menu-btn{display:none}
.icon-sun{display:none}[data-theme="dark"] .icon-sun{display:block}[data-theme="dark"] .icon-moon{display:none}
.drawer{border-top:1px solid var(--line);background:var(--bg);padding:10px 0 22px}
.drawer[hidden]{display:none}
.drawer a.dl{display:block;padding:14px 4px;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.drawer .d-row{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
@media(min-width:981px){.drawer{display:none!important}}

/* ---------- footer ---------- */
/* Footer: deep green with blush silk at both edges (the same drapes as the
   About hero), logo, three link columns and the community signup. The
   link columns change by role via data-guest-only/-buyer-only/-designer-only
   (see applyRoleHeader in app.js). */
:root{--ft-bg:#1B3A2B;--ft-t:#F4EFE8;--ft-m:rgba(244,239,232,.74);--ft-line:rgba(211,170,108,.38)}
[data-theme="dark"]{--ft-bg:#0E1F17}
.foot{position:relative;overflow:hidden;margin-top:0;background:var(--ft-bg);color:var(--ft-t);border-top:1px solid var(--ft-line);isolation:isolate}
.foot::before,.foot::after{content:"";position:absolute;top:-20px;bottom:-20px;width:clamp(40px,calc((100% - 1200px) / 2 + 40px),270px);background-repeat:no-repeat;background-size:cover;z-index:-1;pointer-events:none;opacity:.95}
.foot::before{left:-10px;background-image:url(img/about/silk-left.webp);background-position:right center}
.foot::after{right:-10px;background-image:url(img/about/silk-right.webp);background-position:left center}
[data-theme="dark"] .foot::before,[data-theme="dark"] .foot::after{opacity:.22}
.foot-in{display:grid;grid-template-columns:minmax(150px,1.05fr) repeat(3,minmax(0,1fr)) minmax(240px,1.45fr);padding:46px 0 30px}
.foot-in>*{padding:4px 28px;border-left:1px solid var(--ft-line)}
.foot-in>:first-child{border-left:0;padding-left:0}
.foot-in>:last-child{padding-right:0}
.foot-brand{display:flex;align-items:center;justify-content:center}
.foot-brand img{width:150px;height:auto}
.foot h2{font-family:var(--sans);font-size:.98rem;font-weight:600;letter-spacing:.01em;color:var(--ft-t);margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot li a,.foot-join p{color:var(--ft-m);font-size:.93rem}
.foot li a:hover{color:var(--ft-t);text-decoration:underline;text-underline-offset:3px}
.foot li a.foot-mail{overflow-wrap:break-word}
.foot-join p{line-height:1.5;margin-bottom:14px}
.foot-form{display:flex;align-items:center;background:#fff;border-radius:999px;padding:4px 4px 4px 18px;max-width:300px}
.foot-form input{flex:1;min-width:0;border:0;background:transparent;padding:8px 6px 8px 0;font-size:.9rem;color:#2A3F36;outline:0;box-shadow:none}
.foot-form input::placeholder{color:#7B847F}
.foot-form:focus-within{box-shadow:0 0 0 3px rgba(230,168,155,.55)}
.foot-form button{flex:none;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--ft-bg);color:var(--ft-t);cursor:pointer}
.foot-form button:hover{background:#2A3F36}
.foot-form button .ic{width:18px;height:18px}
.foot-form button[disabled]{opacity:.6;cursor:wait}
.foot-msg{min-height:1.2em;margin:8px 0 0!important;font-size:.85rem!important;color:var(--rose)!important}
.foot-msg:empty{min-height:0;margin:0!important}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ft-t);border:1px solid var(--ft-line);transition:background .2s,color .2s}
.foot-social a:hover{background:var(--ft-t);color:var(--ft-bg)}
.foot-social .ic{width:18px;height:18px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 22px;border-top:1px solid var(--ft-line);color:var(--ft-m);font-size:.84rem}
.foot-base a{color:var(--ft-m);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-base a:hover{color:var(--ft-t)}

#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;font-weight:500;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:90;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- art, cards ---------- */
.art-wrap{position:relative;overflow:hidden;background:var(--surface2)}
.art-svg{display:block;width:100%;height:100%}
.sw{flex:none;border-radius:12px;object-fit:cover;display:block}
.mguide-details{margin-top:14px}
.mguide-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.mguide-imgs img{width:100%;height:auto;border-radius:14px;cursor:zoom-in}
@media(max-width:640px){.mguide-imgs{grid-template-columns:1fr}}
.g{flex:none;display:block}
.stars{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink);font-size:.95rem;white-space:nowrap}
.stars .ic{color:var(--gold);width:1em;height:1em}
.stars i{font-style:normal;color:var(--muted);font-weight:400}
.stars5{display:inline-flex;gap:2px}
.stars5 .ic{width:17px;height:17px;color:var(--line2)}
.stars5 .on .ic{color:var(--gold)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
.card-art{position:relative}
.card .art-wrap{display:block;aspect-ratio:200/300;border-radius:20px}
.card .art-wrap .art-svg{transition:transform .5s}
.card:hover .art-svg{transform:scale(1.03)}
/* A designer card lifts on hover instead of sitting static — small enough
   not to shove neighboring cards around, but enough to read as "alive". */
.card{transition:transform .22s ease,box-shadow .22s ease;border-radius:20px}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.badge{position:absolute;left:50%;top:20px;transform:translateX(-50%);background:var(--surface);color:var(--ink);font-size:.78rem;font-weight:600;padding:5px 13px;border-radius:999px;box-shadow:var(--sh);white-space:nowrap}
/* "Opening soon" always floats over a designer photo, never the page
   background, so it can't use the translucent --gold-s wash (fine as a
   flat-background chip elsewhere, but near-invisible over a light/warm
   photo in dark mode, which is what made it unreadable). Force an opaque
   surface plus the same theme-aware edge --ring already used on .vbadge
   so it stays legible against any photo in either theme. */
.badge-soon{background:var(--surface);color:var(--gold-t);box-shadow:var(--sh),0 0 0 1px var(--ring)}
.meta{display:block;padding:16px 6px 0}
.meta h3{font-size:1.12rem}
.meta .sub{margin-top:2px;font-size:.9rem}
.meta .price{margin-top:8px;color:var(--ink);font-size:.95rem}
.heart{position:absolute;bottom:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh)}
.heart .ic{width:20px;height:20px}
.heart.on{color:var(--rose-h)}.heart.on .ic{fill:currentColor}

/* Loading placeholders — reserve the same footprint as the real content
   so a section that loads in async (e.g. "Real designers") doesn't pop in
   and shove everything below it down after the page has already settled. */
.skel .card-art{background:var(--surface2);animation:sk-pulse 1.4s ease-in-out infinite}
.sk-line{height:12px;border-radius:6px;background:var(--surface2);margin-top:10px;animation:sk-pulse 1.4s ease-in-out infinite}
@keyframes sk-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.skel .card-art,.sk-line{animation:none}}

.rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:34px}
.rail::-webkit-scrollbar{display:none}
.rail-b{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;border-bottom:2px solid transparent;padding:14px 18px 12px;color:var(--muted);font-weight:500;font-size:.92rem;min-width:88px}
.rail-b:hover{color:var(--ink)}
.rail-b.on{color:var(--ink);border-bottom-color:var(--rose-h);font-weight:600}
.rail-b .ic{width:30px;height:30px}
.rail-b .g{color:inherit}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 76px}
.hero-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-thread path.t{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.2s .3s cubic-bezier(.5,0,.2,1) forwards}
.hero-thread text{font-family:var(--sans);font-size:14px;fill:var(--gold-t);letter-spacing:.06em}
.hero-thread .needle{fill:var(--gold)}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,4.7vw,4.15rem)}
.hero h1 em{display:block;font-style:italic;font-weight:600;color:var(--rose-h)}
.hero .hero-sub{margin-top:20px;max-width:34ch;font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.35;color:var(--ink);text-wrap:balance}
.hero .hero-sub+.lede{margin-top:12px;font-size:clamp(1rem,1.4vw,1.1rem)}
.hero .lede{margin-top:22px}
.soon-next{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px}
.soon-next b{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.05rem}
.soon-next .sub{margin:0 0 8px}
.soon-next .btn .ic{width:16px;height:16px}
.pill{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line2);border-radius:999px;box-shadow:var(--sh);max-width:640px;margin-top:34px;padding:6px}
.pill:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.seg{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:8px 16px 8px 20px;position:relative}
.seg:nth-child(2){flex:1.3}
.seg+.seg::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
.seg span{font-size:.74rem;font-weight:600;color:var(--ink)}
.seg select{border:0;background-color:transparent;padding:0 18px 0 0;border-radius:0;color:var(--muted);font-size:16px;background-position:right 0 center;text-overflow:ellipsis}
.seg select:focus{outline:none}
.go{border:0;border-radius:999px;background:var(--pri);color:var(--pri-t);padding:0 24px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.go:hover{background:var(--pri-h)}
.assure{margin-top:26px;display:grid;gap:9px;max-width:560px}
.assure li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:.97rem}
.assure .ic{color:var(--gold-t);margin-top:.2em}
.arches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.arch:nth-child(1){margin-top:64px}.arch:nth-child(3){margin-top:112px}
.arch .art-wrap{aspect-ratio:200/300;border-radius:999px 999px 18px 18px}
.arch figcaption{margin-top:10px;font-size:.84rem;color:var(--muted);line-height:1.35}
.arch figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.9rem}

/* ---------- sections ---------- */
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sec-h p{margin-top:8px;color:var(--muted);max-width:52ch}
.page-h{padding:34px 0 22px}
.page-h h1{font-size:clamp(2rem,3.6vw,2.9rem)}
.page-h p{margin-top:12px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500;font-size:.95rem;margin:26px 0 6px}
.back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:2px}
.back:hover{color:var(--ink)}
.ord-back-details{display:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:500;font-size:.95rem}

/* steps with a hidden thread running through them */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;position:relative;counter-reset:s}
.how::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:0;border-top:1.5px dashed var(--gold)}
.how li{position:relative;padding-top:0}
.how li i{counter-increment:s;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);color:var(--gold-t);font-style:normal;font-weight:600;position:relative}
.sec.tint .how li i{background:var(--bg2)}
.how li i::before{content:counter(s)}
.how h3{margin:20px 0 8px;font-size:1.15rem}
.how p{font-size:.95rem;color:var(--muted)}

.band{background:var(--band);color:var(--band-t);border-radius:32px;padding:64px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.band h2{color:var(--band-t)}
.band h2 em{font-style:italic;color:var(--rose);font-weight:600}
.band p{color:rgba(244,239,232,.82);margin-top:16px;max-width:52ch}
.band .btn.pri{background:var(--rose);color:#1E2F27}.band .btn.pri:hover{filter:brightness(1.06)}
.band .btn.ghost{color:var(--band-t);border-color:rgba(244,239,232,.4)}
.mock{background:var(--surface);color:var(--text);border-radius:22px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.mock .row b{color:var(--ink)}
/* .mock sits inside .band (the dark green section), and ".band p" sets
   every <p> there to pale cream for contrast against that dark
   background — including this card's own "Kofi & Kin, Accra" line, which
   made it nearly invisible against .mock's light card background.
   Restore the normal muted color here specifically. */
.mock .sub{color:var(--muted)}
.st{display:inline-block;font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.st.act{background:var(--rose-s);color:var(--rose-t)}
.st.ok{background:var(--ok-s);color:var(--ok)}
/* Order-status colors: at a glance, red means it didn't happen, gold means
   it's waiting on something, sage means it's actively being worked, green
   means money or the piece is safely through. */
.st.err{background:var(--err-s);color:var(--err)}
.st.warn{background:var(--gold-s);color:var(--gold-t)}
.st.due{background:var(--rose-s);color:var(--rose-t)}
.st.prog{background:var(--sage-s);color:var(--sage-t);display:inline-block;margin:0;flex-wrap:nowrap}
/* (.st.prog shares the .prog stepper class name, whose 20px/26px margins
   were pushing the status row apart on Accepted/In progress orders.) */
.esc{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.esc .lock{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--gold-s);color:var(--gold-t);flex:none}
.esc .lock .ic{width:22px;height:22px}
.esc.rel .lock{background:var(--ok-s);color:var(--ok)}
.esc b{display:block;font-size:1.25rem;color:var(--ink);font-family:var(--serif);font-weight:600}
.esc small{color:var(--muted);font-size:.9rem}

.tl{display:grid;gap:0;position:relative}
.tl li{display:flex;gap:14px;position:relative;padding-bottom:18px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:13px;top:28px;bottom:-2px;width:1.5px;background:var(--line2)}
.tl li:last-child::before{display:none}
.tl li.done::before{background:var(--ok)}
.tl i{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);display:grid;place-items:center;color:#fff}
.tl li.done i{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.tl li.now i{border-color:var(--rose-h);box-shadow:0 0 0 4px var(--rose-s)}
.tl i .ic{width:14px;height:14px}
.tl b{display:block;color:var(--ink);font-weight:600;font-size:.97rem;line-height:1.3}
.tl small{color:var(--muted);font-size:.85rem;display:block}
.tl li:not(.done):not(.now) b{color:var(--muted);font-weight:500}

.two-cta{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cta{border-radius:28px;padding:44px;background:var(--rose-s)}
.cta.sage{background:var(--sage-s)}
.cta h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.cta p{margin:14px 0 24px;max-width:44ch}

/* ---------- browse ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.filters .search{flex:1;min-width:240px;max-width:420px}
.filters select{width:auto;min-width:170px}
.empty{text-align:center;padding:64px 20px;border:1px dashed var(--line2);border-radius:24px}
.empty h3{margin-bottom:8px}

/* ---------- profile ---------- */
.prof-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:18px 0 34px}
.ava{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.9rem;color:#fff;border:3px solid var(--gold);flex:none}
.prof-head h1{font-size:clamp(2rem,4vw,3rem);display:flex;align-items:center;gap:10px}
.vf{color:var(--ok);display:inline-grid}.vf .ic{width:.62em;height:.62em}
.prof-head .sub{display:flex;align-items:center;gap:6px;margin-top:6px}
.prof-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
/* Same red-fill confirmation as the heart on a designer card (.heart.on
   below) — the Save button here is a plain .btn.ghost rather than a
   floating circular icon, so this just tints its text/border and fills
   the heart icon instead of swapping to a circular treatment. */
.prof-actions .btn.ghost.fav-on{color:var(--rose-h);border-color:var(--rose-h)}
.prof-actions .btn.ghost.fav-on .ic{fill:currentColor}
.prof-grid{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:start;padding-bottom:88px}
.prof-main h2{margin:44px 0 16px;font-size:1.7rem}
.prof-main>h2:first-of-type{margin-top:34px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:20px}
.stat{padding:18px 20px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-weight:600}
.stat small{color:var(--muted);font-size:.85rem}
/* A designer with no reviews yet showed a bare "New" in the rating tile —
   a little sparkle and a warmer gold tone instead of plain text, so it
   reads as a friendly milestone rather than an empty stat. */
.new-stat{display:inline-flex;align-items:center;gap:5px;color:var(--gold-t)}
.new-stat .ic{width:18px;height:18px;color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:var(--sage-s);color:var(--sage-t);padding:5px 14px;border-radius:999px;font-size:.88rem;font-weight:500}
.chip{border:1px solid var(--line2);background:transparent;border-radius:999px;padding:9px 18px;font-weight:500;font-size:.95rem;color:var(--text)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--pri);color:var(--pri-t);border-color:var(--pri)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* A grid item's automatic minimum width defaults to its content's
   min-content size, which can be wider than the track's own minmax()
   floor — e.g. this card's un-wrapped Edit/Remove buttons needing more
   room than a narrow mobile column has. That silently grows the grid
   wider than its container (clipped and unreachable, since the site
   disables horizontal page scroll). min-width:0 lets the item actually
   shrink to the track size, and letting its action row wrap is the
   fallback for when two buttons still won't fit side by side. */
.pieces-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pieces-grid>*{min-width:0}
.piece{display:flex;flex-direction:column}
.piece .row{flex-wrap:wrap}
/* A plain number input's browser-drawn spinner arrows made the small
   "In stock" field look bulky and cramped next to its label on a narrow
   piece card — drop the spinner chrome and keep the box itself small. */
.qty-input{width:52px;padding:6px 4px;text-align:center;-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.piece .art-wrap{aspect-ratio:200/260;border-radius:18px}
/* Badges sit on top of a product/designer photo, not the page background,
   so matching the page's theme tokens isn't enough for contrast — a dark
   badge in dark mode can blend straight into a dark-toned photo behind it
   (and the shadow that gave it an edge in light mode is a black shadow,
   which disappears against a dark photo too). The extra 1px "ring" shadow
   layer below gives every badge a visible edge against any photo, in
   either theme, regardless of its own background color. */
.vbadge{position:absolute;left:10px;bottom:10px;background:var(--surface);color:var(--ink);font-size:.74rem;font-weight:600;padding:4px 10px 4px 7px;border-radius:999px;display:flex;align-items:center;gap:4px;box-shadow:var(--sh),0 0 0 1px var(--ring)}
.vbadge .ic{color:var(--ok);width:14px;height:14px}
.piece-m{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 10px;padding:12px 2px 12px;color:var(--ink)}
.piece-m small{display:block;color:var(--muted);font-weight:400;font-size:.85rem}
.piece .btn{margin-top:auto}
.rsum{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding:24px;border:1px solid var(--line);border-radius:20px;margin-bottom:8px}
.rsum big{display:block;font-family:var(--serif);font-size:3.2rem;font-weight:700;color:var(--ink);line-height:1}
.bars{flex:1;min-width:220px;display:grid;gap:6px}
.bars div{display:grid;grid-template-columns:14px 1fr 40px;gap:10px;align-items:center;font-size:.85rem;color:var(--muted)}
.bars b{color:var(--ink)}
.bars span{height:7px;border-radius:9px;background:var(--surface2);overflow:hidden}
.bars i{display:block;height:100%;background:var(--gold);border-radius:9px}
.rev{padding:20px 0;border-bottom:1px solid var(--line)}
.rev small{color:var(--muted);display:block;margin:2px 0 8px}
.book{position:sticky;top:100px;border:1px solid var(--line);border-radius:26px;padding:28px;background:var(--surface);box-shadow:var(--sh)}
.book-p{font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--ink)}
.book-p span{font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;margin:18px 0}
.kv div{padding:12px 16px}.kv div+div{border-left:1px solid var(--line)}
.kv small{display:block;color:var(--muted);font-size:.8rem}.kv b{color:var(--ink);font-weight:600;font-size:.95rem}
.trust{margin-top:20px;display:grid;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.trust li{display:flex;gap:12px;font-size:.92rem;color:var(--text)}
.trust .ic{color:var(--gold-t);margin-top:.15em}

/* ---------- wizard ---------- */
.wiz{width:min(780px,calc(100% - 48px));margin-inline:auto;padding-bottom:88px}
.prog{display:flex;gap:6px;margin:20px 0 26px;flex-wrap:wrap}
.prog li{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--muted);padding:6px 14px 6px 6px;border-radius:999px}
.prog li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-size:.8rem;font-weight:600}
.prog li.now{color:var(--ink);font-weight:600;background:var(--rose-s)}
.prog li.now span{border-color:var(--rose-h);color:var(--rose-t)}
.prog li.done{color:var(--ink);cursor:pointer}
.prog li.done span{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.prog .ic{width:14px;height:14px}
.wiz-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:40px;box-shadow:var(--sh)}
.wiz-h{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:600;margin-bottom:8px}
.wiz-p{color:var(--muted);margin-bottom:26px}
.picked{display:flex;gap:10px;align-items:center;background:var(--sage-s);color:var(--sage-t);padding:10px 16px;border-radius:14px;margin-bottom:24px;font-size:.95rem}
.picked .ic{color:var(--ok)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.opt{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:transparent;border:1.5px solid var(--line);border-radius:20px;padding:20px 12px;color:var(--ink)}
.opt:hover{border-color:var(--line2)}
.opt.sel{border-color:var(--pri);background:var(--green-s)}
.opt b{font-weight:600;font-size:.98rem}
.opt small{color:var(--muted);font-size:.8rem;line-height:1.3}
.opt .g{color:var(--ink)}
.opt.fab{flex-direction:row;text-align:left;gap:14px;padding:12px 16px}
.opt.big{align-items:flex-start;text-align:left;padding:18px 20px}
.opt:disabled{opacity:.5;cursor:not-allowed;background:var(--surface2)}
.opt:disabled:hover{border-color:var(--line)}
.fsrc-opts{grid-template-columns:1fr 1fr}
.farr-opts{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.fsrc-opts,.farr-opts{grid-template-columns:1fr}.farr-opts .opt.big{padding:14px 16px}}
.qty{display:flex;align-items:center;gap:14px}
.qty button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent;font-size:1.2rem;color:var(--ink)}
.qty output{min-width:24px;text-align:center;font-weight:600;font-size:1.1rem}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:12px}
.sumbox{margin-top:26px;border:1px solid var(--line);border-radius:18px;padding:6px 18px;background:var(--bg2)}
.sumbox>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.sumbox>div:last-child{border:0}
.sumbox b{color:var(--ink);font-weight:600;text-align:right}
.mgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.mv-wrap{flex:none;display:grid;place-items:center;width:34px;height:60px;background:var(--surface2);border-radius:10px}
.mv-ic{display:block}
.mv-band{animation:mv-pulse 1.8s ease-in-out infinite}
.mv-tick{animation:mv-slide 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mv-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes mv-slide{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--mv-dist,30px))}}
@media (prefers-reduced-motion:reduce){.mv-band,.mv-tick{animation:none}}
.big-n{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--ink);line-height:1.1}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wiz-top .back{margin-bottom:6px}
.wiz-discard{margin-top:20px;color:var(--muted)}
.wiz-discard:hover{color:var(--ink)}

/* matches */
.mgrid{display:grid;gap:20px}
.mcard{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:20px;border:1px solid var(--line);border-radius:26px;background:var(--surface)}
.mcard.pinned{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-s)}
.mcard.nosrc{background:var(--surface2)}
.mcard.nosrc .art-wrap,.mcard.nosrc h3,.mcard.nosrc .sub,.mcard.nosrc .est{opacity:.55}
.mc-nosrc{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0}
.mc-nosrc .ic{flex:none;width:1.1em;height:1.1em;margin-top:.1em}
.mcard .art-wrap{aspect-ratio:200/270;border-radius:20px;align-self:start}
.pct{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 12px);text-align:center;justify-content:center;background:var(--surface);color:var(--ink);font-size:.74rem;font-weight:600;line-height:1.2;padding:5px 10px;border-radius:999px;white-space:normal;box-shadow:var(--sh)}
.pct svg{width:12px;height:12px;flex:none}
.mc-b{display:flex;flex-direction:column;min-width:0}
.mc-b h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.why{margin:14px 0;display:grid;gap:6px}
.why li{display:flex;gap:8px;font-size:.93rem}
.why .ic{color:var(--ok);margin-top:.2em;width:1em;height:1em}
.est{color:var(--muted);font-size:.93rem}.est b{color:var(--ink)}
.mc-a{display:flex;gap:10px;margin-top:auto;padding-top:16px;flex-wrap:wrap}

/* ---------- orders ---------- */
.ord-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ocard{display:grid;grid-template-columns:84px 1fr auto;gap:20px;align-items:flex-start;padding:16px 20px 16px 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.ocard:hover{border-color:var(--line2);box-shadow:var(--sh)}
.ocard .art-wrap{aspect-ratio:1;border-radius:999px 999px 12px 12px}
/* Archive/Unarchive on completed orders: a sibling of the card button
   (buttons can't nest), laid over the card's bottom-right corner, under Open */
.ord-row{display:grid}
.ord-row>*{grid-area:1/1}
.ocard.has-arch{min-height:122px}
.ord-row .ord-arch{justify-self:end;align-self:end;margin:0 21px 17px 0;z-index:2}

/* ----- orders list: dashboard header, stat tiles, toolbar, chips, cards ----- */
.oc-head{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:10px 0 4px}
.oc-head .eyebrow{display:block;color:var(--gold-t);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:22px 0 6px}
.stat-tile{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.stat-tile .si{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.stat-tile .si .ic{width:20px;height:20px}
.stat-tile .si.rose{background:var(--rose-s);color:var(--rose-t)}
.stat-tile .si.gold{background:var(--gold-s);color:var(--gold-t)}
.stat-tile .si.sage{background:var(--sage-s);color:var(--sage-t)}
.stat-tile .si.ok{background:var(--ok-s);color:var(--ok)}
.stat-tile b{display:block;font-size:1.3rem;line-height:1.15;color:var(--ink);font-family:var(--serif);font-weight:600}
.stat-tile .sub{display:block;font-size:.88rem;font-weight:600;color:var(--text)}
.stat-tile .fine{display:block}
.oc-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 14px}
.oc-toolbar .search{flex:1;min-width:200px}
.oc-toolbar select{width:auto;min-width:150px}
.oc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.oc-chips .chip{padding:7px 15px;font-size:.88rem}
.oc-chips .chip-more{background:none;border-style:dashed;color:var(--muted)}
/* Single-column stacked card (kiki's mockup, 2026-10-17): title+desc,
   who-by line, tags, status/price/date row, two full-width actions, then
   the mini stepper — same structure for buyer and designer rows, and for
   every screen width (the list itself is already one column, .ord-list). */
.oc-card{min-width:0;padding:20px 20px 18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.oc-card:hover{border-color:var(--line2);box-shadow:var(--sh)}
.oc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.oc-card-head h2{margin:0;font-size:1.5rem}
.oc-archive{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 11px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.oc-archive .ic{width:14px;height:14px;flex:none}
.oc-archive:hover{border-color:var(--ink);color:var(--ink)}
.oc-who{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:500}
.oc-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;font-size:.8rem;display:grid;place-items:center;flex:none}
/* Initials avatars also carry .ava (the 96px/76px profile circle) for its
   serif/colour styling; keep them the same 32px as photo avatars at every
   width so no order card looks bigger than the rest. */
.oc-who .oc-ava{width:32px;height:32px;font-size:.8rem;border:0}
.oc-desc{margin:0;line-height:1.45}
.oc-tags{display:flex;gap:6px;flex-wrap:wrap}
.oc-tags span{font-size:.76rem;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--bg2);color:var(--muted)}
.oc-pics-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--bg2);color:var(--muted);font-size:.84rem;font-weight:600;width:fit-content;max-width:100%}
.oc-pics-chip .ic{width:14px;height:14px;flex:none}
.oc-pics-thumbs{display:flex;gap:4px;flex:none}
.oc-pics-thumbs img{width:26px;height:26px;border-radius:8px;object-fit:cover}
.oc-statusrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
/* Sized up (kiki: "don't be afraid to make big certain statuses") rather
   than kept at the same small size as every other row detail. */
.oc-statusrow .st{display:inline-flex;align-items:center;gap:6px;white-space:normal;font-size:.9rem;font-weight:700;padding:8px 14px}
.oc-statusrow .st .ic{width:14px;height:14px}
.oc-price-inline,.oc-started{font-size:.86rem;color:var(--muted)}
.oc-price-inline b{color:var(--text);font-size:.98rem}
.oc-actions2{display:flex;gap:10px}
.oc-actions2 .btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.oc-step{overflow-x:auto}
.oc-step .stepper-h{gap:0;min-width:0;width:100%}
.oc-step .stepper-h li{width:auto;flex:1;min-width:0;padding:0 2px}
.oc-step .stepper-h i{width:18px;height:18px}
.oc-step .stepper-h i .ic{width:9px;height:9px}
.oc-step .stepper-h span{font-size:.66rem}
.oc-step .stepper-h li:first-child,.oc-step .stepper-h li:last-child{flex:.6;width:auto}
.oc-step .stepper-h li::before,.oc-step .stepper-h li::after{top:8.5px}
.oc-step .stepper-h li:first-child::after{left:9px}
.oc-step .stepper-h li:last-child::before{right:9px}
@media(max-width:360px){
  .oc-actions2{flex-direction:column}
}
.ord-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:10px 0 26px;flex-wrap:wrap}
.ord-head h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.ord-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding-bottom:88px}
/* The order thread's 3-column desktop layout, matching Gift's reference
   mockup: a narrow profile/status column on the left, the chat front and
   center in the widest column, and a narrower "Order summary" + action
   column on the right. The chat stays first in the HTML so it is still
   first when the page stacks to one column on tablet/phone; `order` only
   repositions the three on desktop, and the max-width:1100px rule below
   resets it. */
.ord-grid-3{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,340px);gap:22px}
.ord-grid-3>.ord-center{order:1}
.ord-grid-3>.ord-main{order:2}
.ord-grid-3>.ord-side{order:3}
.ord-center{display:grid;gap:18px;align-self:start}
/* Payout timeline / request / invoice: same gap as the rest of the column. */
.ord-pay-info{display:grid;gap:18px}
/* Report / Block: two equal buttons, both with an icon. */
.blocked-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.blocked-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:16px}
.blocked-list .msg-ava{width:36px;height:36px;display:grid;place-items:center;background:var(--rose-s);color:var(--rose-t);font-weight:600}
.blocked-t{flex:1;min-width:0}.blocked-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.blocked-t small{color:var(--muted);font-size:.82rem}
.safety-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.safety-acts .btn{width:100%;justify-content:center;gap:6px}
.safety-acts .btn .ic{width:16px;height:16px;flex:none}
.ord-pay-info>.panel{margin:0!important}
/* A page header above the 3-column grid: order id + start date on the
   left, the big horizontal status stepper on the right — the one clear
   "where is this order" glance before scrolling into any column. */
.ord-head2{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:14px 0 6px}
/* The order stepper gets its own full-width row under the order number
   on every screen size, with each step an equal share of the row and every
   label centred under its dot (kiki, 21 Oct 2026: squeezed in beside the
   title, with the end labels pushed flush left/right, it looked off-centre
   and disjointed). */
.ord-head2{flex-direction:column;align-items:stretch;gap:18px}
.ord-head2>.stepper-box{width:100%}
.ord-head2>.stepper-box .stepper-h{min-width:0;width:max(100%, calc(96px * var(--n)))}
.ord-head2>.stepper-box .stepper-h li,.ord-head2>.stepper-box .stepper-h li:first-child,.ord-head2>.stepper-box .stepper-h li:last-child{flex:1 0 96px;width:auto;min-width:0;padding:0 4px;align-items:center}
.ord-head2>.stepper-box .stepper-h li:first-child span,.ord-head2>.stepper-box .stepper-h li:last-child span{text-align:center}
.ord-head2>.stepper-box .stepper-h li:first-child::after{left:50%}
.ord-head2>.stepper-box .stepper-h li:last-child::before{right:50%}
.stepper-wrap{overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stepper-wrap::-webkit-scrollbar{display:none}
/* Cut-off edges fade out, so it reads as "there's more this way". */
.stepper-wrap.hs-more-r{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.stepper-wrap.hs-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}
.stepper-wrap.hs-more-l.hs-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.stepper-box{min-width:0;max-width:100%}
.hs-hint{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:4px}
.hs-hint[hidden]{display:none}
/* Phones/tablets: the order header stacks, so the big stepper gets its own
   full-width row. On phones it also runs edge to edge (past the page
   gutter) so more steps are visible at once. */
@media(max-width:1100px){
  .ord-head2>.stepper-box .stepper-h{width:max(100%, calc(84px * (var(--n) - 2) + 128px))}
  .ord-head2>.stepper-box .stepper-h li{flex:1 0 84px}
  .ord-head2>.stepper-box .stepper-h li:first-child,.ord-head2>.stepper-box .stepper-h li:last-child{flex:.5 0 64px;min-width:64px}
  /* When the row scrolls, the end steps sit flush with the edges again
     (no half-empty cell before "Awaiting quote" or after "Completed"). */
  .ord-head2>.stepper-box .stepper-h li:first-child{padding-left:0;align-items:flex-start}
  .ord-head2>.stepper-box .stepper-h li:last-child{padding-right:0;align-items:flex-end}
  .ord-head2>.stepper-box .stepper-h li:first-child span{text-align:left}
  .ord-head2>.stepper-box .stepper-h li:last-child span{text-align:right}
  .ord-head2>.stepper-box .stepper-h li:first-child::after{left:13px}
  .ord-head2>.stepper-box .stepper-h li:last-child::before{right:13px}
  /* Swipe only: the arrow buttons took space and read as part of the bar. */
  .ord-head2>.stepper-box .hs-hint button{display:none}
}
@media(max-width:700px){
  /* Bleed past the page gutter with a plain negative margin (the gutter is
     18px at this width, see .wrap under 720px), not 100vw maths: on iPhone
     a 100vw box drifted right and opened a big blank gap before "Awaiting
     quote" (kiki, 20 Oct 2026). */
  .ord-head2>.stepper-box{width:calc(100% + 36px);max-width:none;margin-inline:-18px}
  /* Fixed step widths on phones (no flex-grow, no padding on the scroll
     box): iPhone Safari sized the grow-to-fill row wider than its steps and
     left a big blank gap after "Completed" when swiped to the end. The
     12px end margins live on the list itself, so they scroll with it. */
  .ord-head2>.stepper-box .stepper-wrap{padding-inline:0;scroll-padding-inline:12px}
  .ord-head2>.stepper-box .stepper-h{min-width:0;width:calc(84px * (var(--n) - 2) + 152px);padding-inline:12px}
  .ord-head2>.stepper-box .stepper-h li{flex:none;width:84px;min-width:0}
  .ord-head2>.stepper-box .stepper-h li:first-child,.ord-head2>.stepper-box .stepper-h li:last-child{flex:none;width:64px;min-width:0}
  .ord-head2>.stepper-box .hs-hint{padding-inline:18px}
  .ord-head2>.stepper-box .stepper-wrap.hs-more-r{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .ord-head2>.stepper-box .stepper-wrap.hs-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%);mask-image:linear-gradient(90deg,transparent,#000 8%)}
  .ord-head2>.stepper-box .stepper-wrap.hs-more-l.hs-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
}
.hs-hint button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-size:1.15rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.hs-hint button:disabled{opacity:.35;cursor:default}
.side-nav-h{margin:0 0 8px;padding:0 12px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:var(--sans)}
.stepper-h{display:flex;align-items:flex-start;gap:0;list-style:none;padding:0;margin:0;min-width:max-content}
/* The big order stepper gets an exact width from its step count (--n, set
   in orderStepperHorizontal) instead of max-content: iPhone Safari measured
   max-content from the unwrapped labels ("Payment held by Seamesy" etc.),
   which left ~140px of dead space after "Completed" (kiki, 21 Oct 2026). */
.stepper-h[style*="--n"]{min-width:0;width:calc(96px * (var(--n) - 2) + 124px)}
.stepper-h li{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;width:96px;flex:none;padding:0 4px;box-sizing:border-box}
/* Each step draws half the connector on either side of its dot (::before
   in from the left, ::after out to the right), so the first and last steps
   can sit flush with the edges: their dot and label hug the start/end of
   the row instead of floating in the middle of a half-empty cell, which
   left a big blank gap before "Awaiting quote" and after "Completed" when
   swiping (kiki, 20 Oct 2026). Their width is about half a middle step
   plus half a dot, so every dot stays evenly spaced. */
.stepper-h li::before,.stepper-h li::after{content:"";position:absolute;top:13px;height:1.5px;background:var(--line2);z-index:0}
.stepper-h li::before{left:0;right:50%}
.stepper-h li::after{left:50%;right:0}
.stepper-h li:first-child::before,.stepper-h li:last-child::after{display:none}
.stepper-h li:first-child{width:62px;padding-left:0;align-items:flex-start}
.stepper-h li:last-child{width:62px;padding-right:0;align-items:flex-end}
.stepper-h li:first-child::after{left:13px}
.stepper-h li:last-child::before{right:13px}
.stepper-h li:first-child span{text-align:left}
.stepper-h li:last-child span{text-align:right}
.stepper-h li.done::before,.stepper-h li.done::after,.stepper-h li.done+li::before{background:var(--ok)}
.stepper-h i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);display:grid;place-items:center;color:#fff;position:relative;z-index:1;flex:none}
.stepper-h li.done i{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.stepper-h li.now i{border-color:var(--rose-h);box-shadow:0 0 0 4px var(--rose-s)}
.stepper-h i .ic{width:13px;height:13px}
.stepper-h span{font-size:.78rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.25}
.stepper-h li.now span,.stepper-h li.done span{color:var(--ink)}
/* A dispute sits on top of "Delivered" as its own red step, so Delivered
   stays ticked off while Seamesy reviews the report. */
.stepper-h li.warn i{border-color:var(--err);background:var(--err-s);color:var(--err);box-shadow:0 0 0 4px var(--err-s)}
.stepper-h li.warn span{color:var(--err)}
.stepper-h li.done.warn i{background:var(--ok);border-color:var(--ok);color:var(--on-ok);box-shadow:none}
.stepper-h li.done.warn span{color:var(--ink)}
/* Settled-dispute outcome, pinned atop the order overview. */
.dispute-outcome{border-color:var(--ok);box-shadow:inset 4px 0 0 var(--ok)}
.dispute-outcome .do-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dispute-outcome .do-head .st{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.dispute-outcome .do-head .st .ic{width:13px;height:13px}
.dispute-outcome h3{margin:0 0 6px;font-size:1.1rem}
.dispute-outcome>p{margin:0 0 10px;line-height:1.55}
.dispute-outcome .do-report summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--muted)}
/* Profile card (left column): avatar, name, a small role tag, and — for
   a buyer only, since a designer has no equivalent public profile — a
   link to the designer's public store page. */
.prof-card h1{line-height:1.25}
/* Message, then View profile, full width under the name, so
   messaging is the most obvious thing on the card. */
.prof-card-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.prof-card-actions .btn{width:100%;min-width:0;white-space:normal;text-align:center;padding:11px 16px}
.prof-card-actions .btn .ic{width:17px;height:17px;flex:none}
/* Buyer on mobile: a copy of the profile card at the very top of the
   overview screen (the original sits last, in .ord-center). */
.ord-mobile-prof{display:none}
/* Details panel: left-column copy on desktop, right-column copy on
   phone/tablet (see openOrderThread). */
.ord-details-r{display:none}
.ord-req-r{display:none}
/* Original budget -> designer's quote, so a price change is obvious. */
/* Designer quote form: buyer's budget row, locked (grayed) price boxes
   until "Edit price", and the above-budget confirm box. */
.quote-budget{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);margin:0 0 8px}
.quote-budget small{display:block;color:var(--muted);font-size:.76rem;margin-bottom:2px}
.quote-budget b{font-size:1.05rem}
input.quote-locked{background:var(--surface2);color:var(--muted);cursor:not-allowed}
.quote-over{margin-top:10px;padding:10px 12px;border:1px solid var(--err);border-radius:10px;background:var(--err-s);font-size:.88rem}
.quote-reasons{gap:6px}
.quote-reasons .chip{padding:6px 12px;font-size:.84rem;background:var(--surface)}
.quote-reasons .chip.on{background:var(--pri)}
.quote-over textarea{width:100%}
.price-cmp{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 12px;background:var(--surface)}
.price-cmp-row{display:flex;align-items:center;gap:10px}
.price-cmp-row>div{flex:1;min-width:0}
.price-cmp small{display:block;color:var(--muted);font-size:.76rem;margin-bottom:2px}
.price-cmp b{font-size:1.08rem}
.price-cmp-new b{color:var(--ink)}
.price-cmp-arrow{color:var(--muted);flex:none}
.price-cmp-note{margin:8px 0 0;font-size:.84rem;color:var(--muted)}
.price-cmp-note.up b{color:var(--err)}
.price-cmp-note.down b{color:var(--ok)}
/* Order summary card (right column): a cover photo (the request's first
   reference photo, if any) next to the piece's title, then the existing
   price/status content, restyled as one clear top-of-column card instead
   of being the first thing in a shared center column. */
.summary-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.summary-top img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none;cursor:zoom-in}
.summary-ph{width:56px;height:56px;border-radius:14px;background:var(--rose-s);color:var(--rose-t);display:grid;place-items:center;flex:none}
.summary-ph .ic{width:22px;height:22px}
/* The buyer's own request, shown like a quoted callout rather than a
   plain paragraph — reuses formatReqDescription's existing labeled-line
   output, just framed with a quote mark and a left accent bar. */
.quotebox{position:relative;padding:4px 4px 4px 16px;border-left:3px solid var(--gold);font-style:italic}
.quotebox p{font-style:italic}
.quotebox b{font-style:normal}
.dlist{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.dlist li{display:flex;align-items:flex-start;gap:10px}
.dlist .ic{width:17px;height:17px;flex:none;margin-top:2px;color:var(--muted)}
.dlist small{display:block;color:var(--muted);font-size:.78rem}
.dlist b{font-weight:600}
.chat-head{padding:16px 18px 12px;border-bottom:1px solid var(--line);position:relative}
/* Mobile-only order-page navigation (see openOrderThread/S.ordMobileScreen):
   a back arrow into the chat header. Hidden on desktop, where all three
   columns show at once and there's nothing to navigate back from. (The
   "Message X" entry point now lives in the profile card, .prof-card-actions.) */
.ord-mobile-back{display:none;position:absolute;top:14px;left:14px;font-size:1.1rem;line-height:1}
/* "Report" in the chat header: always reachable without leaving the chat. */
.chat-report-btn{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface,#fff);color:var(--muted);border-radius:999px;padding:5px 11px;font:inherit;font-size:.8rem;cursor:pointer}
.chat-report-btn:hover,.chat-report-btn:focus-visible{color:var(--err);border-color:var(--err)}
.chat-head h2,.chat-head>p{padding-right:96px}
.safety-panel h3 .ic{vertical-align:-.2em;margin-right:4px}
.safety-panel .btn .ic{margin-right:4px}
.report-reasons .tog input{width:auto;height:auto;padding:0;accent-color:var(--pri)}
/* The chat is the page's main focus (per Gift's request), so it keeps a
   visibly heavier, gold-toned border instead of the thin neutral line
   every other panel uses — same accent color as focus rings and the
   stitch divider, so it reads as "the highlight" rather than an error or
   a random accent. */
.chat{border:2px solid var(--gold);border-radius:26px;background:var(--surface);overflow:hidden;overflow:clip;box-shadow:0 0 0 4px var(--gold-s)}
/* Pending-action banner (pendingBannerHTML in app.js). In the chat it's
   sticky (just under the 66px site header), so it never scrolls out of
   view. overflow:clip above (not hidden) is what lets sticky work inside
   .chat. Opaque background so messages never show through it. */
.act-banner{position:sticky;top:66px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;background:linear-gradient(var(--gold-s),var(--gold-s)),var(--surface);border-bottom:2px solid var(--gold)}
.act-banner-txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.act-banner-txt>b{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:.98rem}
.act-banner-txt>b svg{width:17px;height:17px;flex:none;color:var(--gold-t)}
.act-banner-txt>span{font-size:.88rem;color:var(--text)}
.act-banner-btns{display:flex;flex-wrap:wrap;gap:8px}
.ord-act-top{display:none}
/* Orders dashboard: orders waiting on you, pinned above everything. */
.act-strip{margin:0 0 22px;padding:16px 18px;border:2px solid var(--gold);border-radius:22px;background:linear-gradient(var(--gold-s),var(--gold-s)),var(--surface);box-shadow:0 0 0 4px var(--gold-s)}
.act-strip-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:1.05rem;color:var(--ink)}
.act-strip-h svg{width:19px;height:19px;color:var(--gold-t)}
.act-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pri);color:var(--pri-t);font-size:.82rem;font-weight:700;display:inline-grid;place-items:center}
.act-list{display:flex;flex-direction:column;gap:8px}
.act-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.act-item .oc-ava{flex:none;width:36px;height:36px;font-size:.8rem;border:0}
.act-item-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.act-item-txt .fine{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-item .btn{flex:none}
.oc-card.has-act{border:2px solid var(--gold);box-shadow:0 0 0 3px var(--gold-s)}
.oc-act{display:flex;align-items:center;gap:6px;margin:-4px 0 0;font-weight:600;font-size:.92rem;color:var(--gold-t)}
.oc-act svg{width:16px;height:16px;flex:none}
.oc-act.oc-wait{color:var(--sage-t)}
.act-banner.act-wait{background:linear-gradient(var(--sage-s),var(--sage-s)),var(--surface);border-bottom-color:var(--sage)}
.act-banner.act-wait .act-banner-txt>b svg{color:var(--sage-t)}
/* Designer's quote and Seamesy's Buyer Protection Fee as separate lines. */
.fee-split{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin:0 0 12px}
.fs-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0}
/* Phone: the label and its amount sit close, joined by a dotted leader,
   instead of a wide empty gap across the card (kiki, 24 Oct 2026). */
.fs-dots{display:none}
@media(max-width:700px){
  .fs-row{justify-content:flex-start;gap:6px}
  .fs-row>span{flex:0 1 auto;max-width:68%}
  .fs-dots{display:block;flex:1 1 16px;min-width:16px;align-self:flex-start;height:1em;border-bottom:2px dotted var(--line2);margin:0 2px}
}
.fs-row+.fs-row{border-top:1px solid var(--line)}
.fs-row>span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.92rem;color:var(--ink);font-weight:600}
.fs-row>span small{font-weight:400;font-size:.8rem;color:var(--muted);line-height:1.35}
.fs-row>b{flex:none;font-size:.98rem;white-space:nowrap}
.fs-fee>span,.fs-fee>b{color:var(--muted)}
.fs-fee>span{font-weight:500}
.fs-total>span,.fs-total>b{font-size:1.02rem}
.fs-extra>b{color:var(--ok)}
@media(max-width:560px){
  .act-item{flex-wrap:wrap}
  .act-item .btn{width:100%}
  .act-banner-btns .btn{flex:1 1 auto}
}
/* The left column's "jump to a section" list, mirroring the mockup's
   sidebar nav — plain anchor links to real sections further down this
   same page (see the #chat-panel/#order-summary/etc ids), never a link
   to a page that doesn't exist. */
.side-nav ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.side-nav a{display:block;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:500;font-size:.94rem}
.side-nav a:hover{background:var(--bg2)}
.side-nav a.on{background:var(--rose-s);color:var(--rose-t);font-weight:600}
.msgs{height:600px;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--bg2)}
.msg{max-width:78%;padding:12px 16px;border-radius:20px;line-height:1.45;font-size:.98rem}
.msg small{display:block;font-size:.75rem;margin-top:5px;opacity:.75}
.msg.c{align-self:flex-end;background:var(--pri);color:var(--pri-t);border-bottom-right-radius:6px}
.msg.d{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:6px}
.msg.s{align-self:center;max-width:90%;background:transparent;color:var(--muted);font-size:.86rem;text-align:center;padding:4px 10px}
.chat-day{align-self:center;margin:4px 0}
.chat-day span{background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:600;padding:5px 14px;border-radius:999px}
/* Order timeline events in the chat (quote sent, shipped, final review...) */
.msg-event{align-self:center;display:flex;gap:10px;align-items:flex-start;width:min(440px,94%);margin:2px 0;padding:10px 14px;border:1px dashed var(--gold,#c9a45c);border-radius:14px;background:var(--surface);color:var(--text);font-size:.88rem;line-height:1.45}
.msg-event .ev-ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--rose-s);color:var(--rose-t)}
.msg-event .ev-ic .ic{width:15px;height:15px}
.msg-event .ev-txt{min-width:0;overflow-wrap:anywhere}
.msg-event b{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--rose-t)}
.msg-event .ev-txt>span{display:block;margin-top:2px}
.msg-event small{display:block;margin-top:4px;font-size:.72rem;color:var(--muted)}
.msg .photo{margin:-2px -6px 10px}
.msg .photo .art-wrap{border-radius:14px;aspect-ratio:200/260;max-width:220px}
.typing{display:flex;gap:5px;padding:16px 18px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:blink 1.1s infinite}
.typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-in{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--surface);align-items:flex-end}
.chat-in input{border-radius:999px}
.chat-in textarea{flex:1;border-radius:18px;resize:vertical;min-height:175px;max-height:400px;font:inherit;font-size:1rem;line-height:1.5;padding:14px 16px}
.chat-in .btn{padding:9px 16px;align-self:flex-end}
.msg .tick{margin-left:6px;letter-spacing:-2px;font-size:.9em}
.msg-row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.msg-row.c{align-self:flex-end;flex-direction:row-reverse}
.msg-row.d{align-self:flex-start}
.msg-ava{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.chat-order-id{font-weight:600;opacity:.8}
.msg-quote{display:block;padding-left:10px;margin:2px 0;border-left:2px solid currentColor;opacity:.8}
.chat-theme-pop{position:absolute;top:38px;left:0;z-index:5;display:flex;gap:8px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.chat-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.chat-swatch.on{border-color:var(--ink)}
/* The support links sit right under the message box rather than off in
   the side column — easy to find without competing with the order's
   price/status/payment panels. Both links use the same plain muted
   color so neither reads like a flagged/broken link — "Report designer"
   used to be --err red, but that made the whole row look like a warning
   rather than a normal action. */
.chat-support{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.chat-support-link{color:var(--muted);font-size:.85rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.chat-support-link:hover{color:var(--ink)}
.ord-side{display:grid;gap:18px}
/* Order page: fabric approval + progress sit at the top of the action
   column once an order is being made (kiki, 2026-10-17). "hot" = it's
   waiting on whoever is looking at it. */
.fab-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.fab-head h3,.prog-panel h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.prog-panel h3{margin-bottom:12px}
.prog-panel h3+.sub{margin-top:-6px}
.fab-head h3 .ic,.prog-panel h3 .ic{width:18px;height:18px;flex:none}
.fab-panel.hot{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.fab-panel input[type=file]{max-width:100%}
.prog-steps{display:grid;gap:8px}
.prog-step{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line2);border-radius:14px;background:var(--surface);font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.prog-step:hover:not(:disabled){border-color:var(--pri)}
.prog-step:disabled{opacity:.6;cursor:wait}
.prog-step i{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:.82rem;color:var(--muted);flex:none}
.prog-step i .ic{width:14px;height:14px}
.prog-step.done i{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.prog-step.now{border-color:var(--pri);background:var(--rose-s)}
.prog-step.now i{background:var(--pri);border-color:var(--pri);color:var(--pri-t)}
.prog-step small{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--muted)}
/* The strict five-step order flow (Order steps / Progress panel). Only the
   current step is open and carries its action; later steps stay greyed. */
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.flow-step{border:1.5px solid var(--line2);border-radius:14px;background:var(--surface);padding:10px 14px}
.flow-row{display:flex;align-items:center;gap:12px;min-height:30px;font-weight:600;font-size:.95rem;color:var(--ink)}
.flow-row i{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:.82rem;color:var(--muted);flex:none}
.flow-row i .ic{width:14px;height:14px}
.flow-row small{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--pri)}
.flow-view{margin-left:auto;background:none;border:0;padding:4px 2px;font:inherit;font-size:.8rem;font-weight:700;color:var(--pri);text-decoration:underline;cursor:pointer}
.flow-step.done .flow-row i{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.flow-step.now{border-color:var(--pri);background:var(--rose-s)}
.flow-step.now .flow-row i{background:var(--pri);border-color:var(--pri);color:var(--pri-t)}
.flow-step.locked{opacity:.55}
.flow-step.now.wait{border-color:var(--gold);background:var(--gold-s)}
.flow-step.now.wait .flow-row i{background:var(--gold);border-color:var(--gold);color:#fff}
.flow-step.now.wait .flow-row small{color:var(--gold-t);white-space:nowrap}
.flow-body{padding:8px 0 2px 40px}
.flow-body .sub{margin:0 0 10px}
.flow-body .sub:last-child{margin-bottom:0}
.flow-acts{gap:8px;flex-wrap:wrap;justify-content:flex-start;margin:0}
/* Long button labels ("Request more measurements in chat") wrap instead of
   pushing the step card past the panel's edge (kiki, 25 Oct 2026). */
.flow-steps{grid-template-columns:minmax(0,1fr)}
.flow-step{min-width:0}
.flow-acts .btn{white-space:normal;text-align:center;max-width:100%}
@media(max-width:480px){.flow-body{padding-left:0}}
/* Buyer's request as a dropdown, so it can fold away. */
.req-fold-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.req-fold-head b{display:block;font-size:1rem}
.req-fold-head small{display:block;color:var(--muted);font-size:.84rem;margin-top:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.req-fold-chev{width:20px;height:20px;flex:none;color:var(--muted);transition:transform .15s}
.req-fold.open .req-fold-chev{transform:rotate(180deg)}

.panel{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--surface)}
.panel h2{font-size:1.25rem;margin-bottom:12px}
.kvl{display:grid;gap:0}
.kvl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--muted)}
.kvl div:last-child{border:0}
.kvl b{color:var(--ink);font-weight:600;text-align:right}
.demo{border:1px dashed var(--line2);border-radius:18px;padding:16px;font-size:.85rem;color:var(--muted);display:grid;gap:10px}
.starin{display:flex;gap:4px;margin:8px 0 16px}
.starin button{border:0;background:none;padding:2px;color:var(--line2)}
.starin button.on{color:var(--gold)}
.starin .ic{width:32px;height:32px}
.revform{margin-top:18px}

/* ---------- account / join ---------- */
.acc{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start;padding-bottom:60px}
.acc>div{display:grid;gap:16px}
/* Every level here is a grid container, and a grid item's default
   automatic minimum width is its content's min-content size — so a wide
   enough thing nested deep inside (like the Pieces grid's own auto-fill
   columns) can silently inflate every ancestor's track past the page's
   actual width instead of wrapping, with nothing to show for it since the
   site also disables horizontal scroll. min-width:0 at each level lets
   the chain actually shrink to fit instead of overflowing. */
.acc,.acc>div,.panel{min-width:0}
/* Designer account page: read-only application info, status and
   quick actions in a sidebar. On phones the sidebar's identity + status
   cards move above the main column, quick actions/help go to the end. */
.da{padding-bottom:60px}
.da-h{margin-bottom:22px}.da-h .lede{margin:0}
.da h2{font-size:1.25rem;margin:0}
.da .panel{border-radius:20px;box-shadow:0 1px 2px rgba(42,63,54,.04)}
.da-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.da-main,.da-side{display:grid;gap:18px;min-width:0}
.da-ic{flex:none;width:48px;height:48px;border-radius:50%;background:var(--rose-s);color:var(--ink);display:grid;place-items:center}
.da-ic .ic{width:22px;height:22px}
.da-ic.sm{width:40px;height:40px}.da-ic.sm .ic{width:19px;height:19px}
.da-ph{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.da-ph .sub{margin:4px 0 0;font-size:.9rem;max-width:62ch}
.da-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.da-f{min-width:0}
.da-k{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.da-v{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.da-v-ic{display:grid;color:var(--muted);flex:none}.da-v-ic .ic{width:18px;height:18px}
.da-none{font-style:italic}
.da-line{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.da-line-ic{display:grid;color:var(--ink);flex:none}.da-line-ic .ic{width:21px;height:21px}
.da-line-t{display:flex;flex-direction:column;gap:2px;flex:1 1 170px;min-width:0}
.da-line-t b{color:var(--ink);font-weight:600}
.da-line-t .sub{font-size:.85rem;margin:0;overflow-wrap:anywhere}
.da-line .btn{flex:none;background:var(--rose-s);border-color:transparent}
.da-tog{cursor:pointer}
input.da-sw{border:0;padding:0;appearance:none;-webkit-appearance:none;flex:none;width:46px;height:26px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;transition:background .2s;margin:0}
input.da-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
input.da-sw:checked{background:var(--pri)}
input.da-sw:checked::after{transform:translateX(20px)}
input.da-sw:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.da-store{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.da-store-t{flex:1;min-width:220px}.da-store-t .sub{margin:3px 0 0;font-size:.9rem}
.da-store .btn .ic,.da-help .btn .ic{width:16px;height:16px;margin-left:4px}
.da-id{display:flex;align-items:center;gap:16px}
.da-ava{flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:#fff}
img.da-ava{cursor:zoom-in}
.da-id-t{display:flex;flex-direction:column;gap:3px;min-width:0;color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.da-id-t b{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.da-loc{display:flex;align-items:center;gap:5px}.da-loc .ic{width:15px;height:15px}
.da-status h2,.da-qas h2{margin-bottom:14px}
.da-badge{display:flex;gap:14px;align-items:flex-start;border-radius:14px;padding:16px}
.da-badge.ok{background:var(--ok-s)}.da-badge.wait{background:var(--gold-s)}
.da-badge-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-t)}
.da-badge.wait .da-badge-ic{background:var(--gold-t);color:#fff}
.da-badge-ic .ic{width:19px;height:19px}
.da-badge b{font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.da-badge p{margin:4px 0 0;font-size:.88rem;color:var(--muted)}
.da-notif .saved:empty{display:none}
.da-badge .link{display:inline-block;margin-top:6px;font-size:.88rem}
.da-qas ul{list-style:none;margin:0;padding:0}
.da-qas li+li{border-top:1px solid var(--line)}
.da-qa{display:flex;align-items:center;gap:14px;width:100%;padding:10px 0;background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none}
.da-qa-l{flex:1;font-weight:500}
.da-qa>.ic{width:18px;height:18px;color:var(--muted);transition:transform .15s}
.da-qa:hover>.ic{transform:translateX(3px)}
.da-qa[disabled]{opacity:.6;cursor:default}
.da-help{display:flex;gap:14px;align-items:flex-start;background:var(--rose-s);border-color:transparent}
.da-help .da-ic{background:var(--surface)}
.da-help .sub{margin:4px 0 14px;font-size:.9rem}
/* Buyer account page (.ba): reuses the designer dashboard (.da) cards,
   plus editable sections, measurement tiles and a profile card. */
.ba-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ba-ph .da-ph{margin-bottom:0;flex:1 1 280px;min-width:0}
.ba-ph>.btn{flex:none}
.ba .da-line .btn{margin-left:auto}
.ba .saved:empty{display:none}
.ba-empty{margin:0;padding:14px 16px;border:1px dashed var(--line2);border-radius:14px;color:var(--muted);font-size:.92rem}
.ba-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.ba-tile{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ba-tile span{font-size:.8rem;color:var(--muted)}
.ba-tile b{font-family:var(--serif);font-size:1.12rem;color:var(--ink);font-weight:600}
.ba-opts{display:grid;gap:10px}
.ba-fav-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ba-fav{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:8px 10px;min-width:0}
.ba-fav a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem}
.ba-fav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-fav-ava{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700}
.ba-fav-h{flex:none;border:0;background:none;padding:4px;color:var(--rose-t);cursor:pointer;display:grid}
.ba-fav-h .ic{width:18px;height:18px;fill:currentColor}
.ba-ord-list{display:grid}
.ba-ord{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ba-ord:first-child{border-top:0;padding-top:0}
.ba-ord>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.ba-ord b{color:var(--ink)}
.ba-ord .st{margin:0}
.ba-card{display:flex;flex-direction:column;gap:12px;background:linear-gradient(160deg,var(--rose-s),var(--surface) 60%)}
.ba-ava-wrap{position:relative;width:fit-content}
.ba-ava-ed{position:absolute;right:0;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ba-ava-ed .ic{width:15px;height:15px}
.ba-ava-ed:focus-within,.ba-ava-ed:hover{border-color:var(--ink)}
.ba-card .da-id-t b{font-size:1.4rem}
.ba-tags{margin:0;font-size:.9rem;color:var(--muted)}
.ba-tags i{font-style:normal;margin:0 6px}
.ba-sw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ba-sw>button:not(.link){width:24px;height:24px;border-radius:50%;padding:0;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 2px var(--surface)}
.ba-sw>button.on{border-color:var(--ink)}
.ba-rm{font-size:.85rem;background:none;border:0;padding:0;cursor:pointer;margin-left:4px}
.ba-card .err:empty{display:none}
.da-qa-l small{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:1px}
@media(max-width:900px){
  .da-grid{grid-template-columns:1fr;gap:16px}
  .da-main,.da-side{display:contents}
  .ba-card{order:1}.ba-status{order:2}.ba-profile{order:3}.ba-meas{order:4}.ba-orders{order:5}.ba-favs{order:6}.ba-ship{order:7}.ba-pay{order:8}.ba-qas{order:9}.ba .da-help{order:10}
  .da-id{order:1}.da-status{order:2}.da-prof{order:3}.da-store{order:4}.da-sec{order:5}.da-notif{order:6}.da-qas{order:7}.da-help{order:8}
}
@media(max-width:560px){
  .da-fields{grid-template-columns:1fr}
  .da .panel{padding:18px}
  .da-ph .da-ic{width:40px;height:40px}.da-ph .da-ic .ic{width:19px;height:19px}
  .da-line{flex-wrap:wrap}
  .da-line .btn{margin-left:35px}
  .ba-ph>.btn{width:100%;justify-content:center}
  .da-store .btn{width:100%;justify-content:center}
  .da-ava{width:68px;height:68px;font-size:1.4rem}
}
.unit{display:flex;border:1px solid var(--line2);border-radius:999px;padding:3px}
.unit button{border:0;background:none;padding:6px 16px;border-radius:999px;font-weight:600;color:var(--muted)}
.unit button.on{background:var(--pri);color:var(--pri-t)}
.saved{color:var(--ok);font-size:.9rem;min-height:1.3em}
.tips{margin-top:16px;display:grid;gap:8px;color:var(--muted);font-size:.92rem;list-style:disc;padding-left:20px}
.join{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:56px 0 88px;align-items:start}
.join h1{font-size:clamp(2.2rem,4.4vw,3.5rem);margin-bottom:18px}
.perks{margin-top:34px;display:grid;gap:22px}
.perks li{display:flex;gap:16px}
.perks li>.ic{width:26px;height:26px;color:var(--gold-t);margin-top:2px}
.perks b{display:block;color:var(--ink);font-weight:600;font-size:1.05rem}
.perks p{color:var(--muted);font-size:.95rem;margin-top:3px}

/* ---------- static pages: about + how it works ---------- */
.a-hero{padding:72px 0 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.a-hero h1{max-width:12ch}
.a-hero h1 em{font-style:italic;color:var(--rose-h);font-weight:600}
.a-hero .lede{margin-top:22px}
.cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.a-logo{display:grid;place-items:center;position:relative}
.a-logo img{width:min(430px,100%);height:auto;position:relative;z-index:1}
.pebble{position:absolute;border-radius:60% 40% 55% 45%/50% 55% 45% 50%;z-index:0}
.thread3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:34px;margin-top:38px}
.thread3::before{content:"";position:absolute;left:9px;right:0;top:9px;border-top:1.5px solid var(--gold)}
.thread3 li{position:relative}
.thread3 li::before{content:"";position:absolute;left:0;top:-34px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);box-shadow:inset 0 0 0 4px var(--gold)}
.sec.tint .thread3 li::before{background:var(--bg2)}
.thread3 h3{font-size:1.5rem;margin-bottom:8px}
.thread3 h3 span{display:block;font-family:var(--sans);font-weight:400;font-size:1rem;color:var(--rose-t);margin-top:4px}
/* "Seamless. Seamstress. Seam easy." wordplay campaign — see about.html,
   right above the "Let it seem easy..." quote it leads into. "Seam" gets
   struck through on the first two lines to reveal the real word hiding
   inside Seamless/Seamstress; the third line drops the strike and lands on
   the exact words that open the quote below ("Let it SEEM EASY...") —
   that's the deliberate hand-off from wordplay to brand line. */
.wordplay{text-align:center;padding:60px 0 8px}
.wp-line{font-family:var(--serif);font-size:clamp(2.1rem,5.6vw,3.5rem);font-weight:600;line-height:1.3;margin:0;color:var(--ink)}
.wp-cross{position:relative;display:inline-block;margin-right:.2em;color:var(--line2)}
.wp-cross::after{content:"";position:absolute;left:-6%;right:-6%;top:54%;height:2px;background:var(--line2);transform:rotate(-3deg)}
.wp-hi{color:var(--rose-h)}
.wp-payoff{margin-top:10px;color:var(--muted);font-weight:500}
.wp-payoff em{font-style:italic;color:var(--rose-h);font-weight:600}
.quote{background:var(--band);color:var(--band-t);text-align:center;padding:72px 0 80px}
.quote p{font-family:var(--serif);font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.15;color:var(--band-t)}
.quote p em{display:block;font-style:italic;color:var(--rose);font-weight:600}
.quote .qm{width:36px;height:36px;margin:0 auto 14px;color:var(--gold);opacity:.8}
.quote .qm-close{margin:18px auto 0;transform:rotate(180deg)}
.mv{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:38px}
.mv li{flex:1 1 240px;max-width:280px;padding:26px 22px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.mv .dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.mv li:nth-child(1) .dot{background:var(--rose-s);color:var(--rose-t)}
.mv li:nth-child(2) .dot{background:var(--gold-s);color:var(--gold-t)}
.mv li:nth-child(3) .dot{background:var(--sage-s);color:var(--sage-t)}
.mv li:nth-child(4) .dot{background:var(--surface2);color:var(--ink)}
.mv li:nth-child(5) .dot{background:var(--rose-s);color:var(--rose-t)}
.mv .dot{font-family:var(--serif);font-weight:700;font-size:1.3rem}
.mv .dot .ic{width:24px;height:24px}
.mv h3{font-size:1.15rem;margin-bottom:6px}
.mv p{font-size:.95rem;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.checks{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:34px;text-align:left;width:100%;max-width:560px;justify-self:center;margin:0 auto}
.checks li{display:flex;gap:14px;align-items:flex-start}
.checks .ic{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--ok-s);color:var(--ok);margin-top:2px}
.checks b{display:block;color:var(--ink);font-weight:600}
.checks span{color:var(--muted);font-size:.95rem}
.borders{padding:96px 0;text-align:center}
.borders p.big{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.8rem);color:var(--ink);line-height:1.25;max-width:26ch;margin:0 auto;text-wrap:balance}
.borders p.big em{color:var(--rose-h);font-weight:600}
.borders .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

.faq-wrap{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start}
/* How It Works' step carousel — one "Uno card" shown at a time (front:
   number + title, back: the full description), flipped by tap, hover or
   keyboard, and moved between with the prev/next arrows below. Replaces
   the old vertical numbered list + sticky side card, which left an
   awkward blank patch beside the shorter late steps. */
/* Centered and a good deal wider than the first pass — left-pinned at a
   narrow 480px, this looked like an isolated mobile mockup floating in a
   sea of blank page on any normal desktop width. */
/* NOTE: .step-cards/.step-card-* below is no longer used by any page (the
   one-card-at-a-time carousel is exactly what caused "a lot of white
   space... like a tablet kind of format" — widening its max-width above
   never fixed that, because a single centered card can never fill a wide
   row). Replaced everywhere by .steps5, which shows all steps at once in a
   filled grid instead. Left defined, unused, rather than ripped out, in
   case a future narrower layout wants the flip-card interaction again. */
.step-cards{max-width:640px;margin-inline:auto}
.step-card-list{list-style:none;margin:0;padding:0;perspective:1800px}
.step-card{display:none}
.step-card.active{display:block}
.step-card-inner{position:relative;display:block;width:100%;min-height:270px;border:0;background:none;padding:0;font:inherit;text-align:left;cursor:pointer;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.2,.2,1)}
.step-card-inner:hover,.step-card-inner:focus-visible,.step-card-inner.flipped{transform:rotateY(180deg)}
.step-card-inner:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.step-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;padding:32px;display:flex;flex-direction:column;box-sizing:border-box}
.step-card-front{background:var(--bg2);border:1px solid var(--line);justify-content:center}
.step-card-front i{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--gold-t);margin-bottom:18px}
.step-card-front h3{font-size:1.4rem;margin:0 0 8px}
.step-card-hint{margin-top:auto;padding-top:14px;color:var(--muted);font-size:.85rem}
.step-card-back{background:var(--ink);color:var(--bg);transform:rotateY(180deg);justify-content:center}
.step-card-back p{margin:0;font-size:1.05rem;line-height:1.55}
.step-card-nav{display:flex;align-items:center;gap:16px;margin-top:22px}
.step-card-arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line2);background:transparent;color:var(--ink);display:grid;place-items:center;font-size:1.3rem;line-height:1;cursor:pointer}
.step-card-arrow:hover:not(:disabled){background:var(--surface2)}
.step-card-arrow:disabled{opacity:.35;cursor:default}
.step-dots{display:flex;gap:7px}
.step-dots span{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.step-dots span.on{background:var(--gold-t)}
.d-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.d-steps li{padding:26px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.d-steps h3{font-size:1.15rem;margin-bottom:8px}
.d-steps p{font-size:.95rem;color:var(--muted)}
/* Five-step "how it works" grid (buyer and designer versions of both
   About and How It Works). All five show at once, same row — unlike
   .d-steps' 4 columns, 5 doesn't divide evenly into the 2-column tablet
   layout below, so the last card is given the full width of its own row
   (grid-column:1/-1) there instead of sitting alone beside a blank cell. */
.steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:36px}
.steps5 li{padding:22px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.steps5 .dot{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--gold-t);margin-bottom:14px}
.steps5 h3{font-size:1.05rem;margin-bottom:6px;line-height:1.3}
.steps5 p{font-size:.88rem;color:var(--muted);line-height:1.5}
/* Step-flow: a 5-step walkthrough as alternating image/text rows instead
   of a grid of cards — each step gets room to breathe, and the panel of
   generated garment art (the same piece-art the Discover cards already
   use, not a stock photo) alternates sides so the sequence reads as a
   path down the page rather than a static list. Rows fade and rise into
   place one at a time as they're scrolled to (see initStepFlow in
   app.js) — the one deliberate motion moment on this page, tied to the
   steps actually being a sequence, not decoration. */
.step-flow{display:grid;gap:64px;margin-top:40px}
.step-row{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:center;opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.step-row.in-view{opacity:1;transform:none}
.step-row:nth-child(even){grid-template-columns:7fr 5fr}
.step-row:nth-child(even) .step-visual{order:2}
.step-visual{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:var(--surface2)}
.step-visual svg.fabric-art{width:100%;height:100%;display:block}
.step-visual img.step-photo{width:100%;height:100%;object-fit:cover;display:block}
.step-visual img.step-photo--contain{object-fit:contain;padding:6%;box-sizing:border-box}
/* A small floating caption identifying the garment, sitting over the
   close-up fabric texture — see the comment on fabricArt() in app.js for
   why the visual itself is just the weave, with no drawn body shape. */
.step-tag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:7px;background:var(--bg);background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-family:var(--serif);font-size:.86rem;font-weight:600;padding:8px 14px 8px 10px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.16)}
.step-tag svg{width:16px;height:16px;flex:none;color:var(--gold-t)}
.step-num{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--gold-t);letter-spacing:.02em;margin-bottom:10px}
.step-text h3{font-size:1.5rem;margin-bottom:10px}
.step-text p{color:var(--muted);font-size:1rem;max-width:46ch}
@media(prefers-reduced-motion:reduce){.step-row{opacity:1;transform:none;transition:none}}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--gold-t);border-bottom:2px solid var(--gold-t);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:64ch}
.faq-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--line2);border-radius:999px;padding:3px;margin-bottom:18px}
.faq-tabs button{border:0;background:none;padding:9px 18px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.faq-tabs button.on{background:var(--pri);color:var(--pri-t)}
.faq-panel{display:none}
.faq-panel.on{display:grid}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .nav{gap:0}
  .nav a{padding:9px 11px;font-size:.92rem}
}
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .prof-grid,.ord-grid{grid-template-columns:1fr;gap:28px}
  /* On phone/tablet, Gift wants the profile + order-status box first
     (so you see who/what before the thread), then the chat, then the
     action panels (quote, budget, shipping, pay) last. */
  .ord-grid-3>.ord-center{order:1}
  .ord-grid-3>.ord-main{order:2}
  .ord-grid-3>.ord-side{order:3}
  /* Buyer AND designer (designer since 2026-10-18): Order Summary/Request Details — the "what is
     this and where does it stand" context — at the very top instead,
     then the chat, with the designer's profile/nav/shared-files last.
     Same three blocks, buyer-only order override (equal specificity to
     the rule above, so this one — coming later — wins only where
     .ord-buyer is also present). */
  .ord-grid-3.ord-side-first>.ord-side{order:1}
  .ord-grid-3.ord-side-first>.ord-main{order:2}
  .ord-grid-3.ord-side-first>.ord-center{order:3}
  /* Two app-like screens instead of one long scroll: Overview (profile,
     summary, request, actions) and Messages (chat), switched by
     S.ordMobileScreen via the 'ord-screen-messages'/'ord-screen-overview'
     ACT handlers — see openOrderThread. Desktop never sets data-screen
     display rules, so both always show there regardless of this. */
  .ord-grid[data-screen="overview"]>.ord-main{display:none}
  /* Phone chat screen: the top link goes back to this order's details,
     not out to the whole orders list. */
  .ord-page[data-screen="messages"]>.ord-back-list{display:none}
  .ord-page[data-screen="messages"]>.ord-back-details{display:inline-flex}
  .ord-grid[data-screen="messages"]>.ord-center,
  .ord-grid[data-screen="messages"]>.ord-side{display:none}
  .ord-act-top{display:flex;position:static;border:2px solid var(--gold);border-radius:18px;margin-bottom:16px}
  .ord-mobile-back{display:inline-flex}
  .chat-head{padding-left:50px}
  .ord-grid-3.ord-side-first .ord-mobile-prof{display:block}
  .ord-grid-3.ord-side-first>.ord-center>.prof-card{display:none}
  .ord-details-l{display:none}
  .ord-details-r{display:block}
  .ord-req-l{display:none}
  .ord-req-r{display:block}
  .chat-in textarea{min-height:110px}
  .ord-head2{flex-direction:column;align-items:flex-start;gap:14px}
  .stepper-h li{min-width:70px}
  .stepper-h li:first-child,.stepper-h li:last-child{min-width:64px}
  .oc-step .stepper-h li{min-width:0}
  .book{position:static;order:-1}
  .d-steps{grid-template-columns:1fr 1fr}
  .steps5{grid-template-columns:1fr 1fr}
  .steps5 li:last-child{grid-column:1/-1}
}
@media(max-width:980px){
  .nav,.hdr-tools select,.hdr-tools>.icon-btn:not(#theme):not(.menu-btn),.hdr-cta{display:none}
  .menu-btn{display:grid}
  .hdr-in{gap:12px}
  .hero-in,.a-hero,.split,.band,.join,.two-cta{grid-template-columns:1fr}
  .hero-in{gap:44px}
  .hero-thread{display:none}
  .faq-wrap{grid-template-columns:1fr;gap:36px}
  .hero h1,.a-hero h1{max-width:none}
  .arches{max-width:520px}
  .how{grid-template-columns:1fr 1fr;gap:34px 22px}.how::before{display:none}
  .band{padding:44px 30px;gap:36px;border-radius:26px}
  .mv li{flex-basis:calc(50% - 11px);max-width:none}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px;padding:30px 0 20px}
  .foot-brand img{width:110px}
  .foot li{margin-bottom:7px}
  .foot-brand{grid-column:1/-1;justify-content:flex-start}
  .foot-in>*{padding:0 22px}
  .foot-in>:nth-child(2){border-left:0;padding-left:0}
  .foot-join{grid-column:1/-1;border-left:0!important;padding:18px 0 0!important;border-top:1px solid var(--ft-line)}
  .foot::before,.foot::after{width:90px;opacity:.55}
  .acc{grid-template-columns:1fr}
  .a-hero{padding-top:44px;text-align:center}
  .a-hero .lede{margin-left:auto;margin-right:auto}
  .a-logo{order:-1}.a-logo img{width:min(300px,80%)}
  .split{text-align:center}
  .cta-row{justify-content:center;margin-top:20px}
  .join{gap:36px;padding-top:36px}
  .step-row,.step-row:nth-child(even){grid-template-columns:1fr;gap:24px}
  .step-row:nth-child(even) .step-visual{order:0}
  .step-flow{gap:44px}
  .step-visual{aspect-ratio:16/10}
}
@media(max-width:720px){
  .wrap,.narrow,.wiz{width:calc(100% - 36px)}
  .sec{padding:60px 0}
  .grid{grid-template-columns:1fr 1fr;gap:26px 14px}
  .card .art-wrap{border-radius:16px}
  .meta{padding:12px 2px 0}.meta h3{font-size:1rem}
  .hero{padding:36px 0 48px}
  .pill{flex-direction:column;border-radius:26px;padding:8px}
  .seg{padding:10px 18px}.seg+.seg::before{display:none}.seg+.seg{border-top:1px solid var(--line)}
  .go{padding:15px;justify-content:center;margin-top:6px}
  .arch:nth-child(1){margin-top:34px}.arch:nth-child(3){margin-top:60px}
  .arch figcaption{font-size:.76rem}.arch figcaption b{font-size:.82rem}
  .how,.thread3,.d-steps,.pgrid,.steps5{grid-template-columns:1fr}
  .steps5 li:last-child{grid-column:auto}
  .mv li{flex-basis:100%;max-width:none}
  .thread3{gap:44px;padding-top:0}
  .thread3::before{left:9px;right:auto;top:10px;bottom:0;border-top:0;border-left:1.5px solid var(--gold)}
  .thread3 li{padding-left:34px}.thread3 li::before{left:0;top:4px}
  .pgrid{grid-template-columns:1fr 1fr;gap:16px}
  .cta{padding:32px 26px}
  .stats{grid-template-columns:1fr 1fr}.stat:nth-child(2n+1){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}
  .prof-head{gap:16px}.ava{width:76px;height:76px;font-size:1.5rem}.prof-actions{margin-left:0;width:100%}
  .wiz-card{padding:26px 20px;border-radius:24px}
  .two,.mgrid2{grid-template-columns:1fr}
  .mcard{grid-template-columns:110px 1fr;gap:16px;padding:14px}
  .mc-a .btn{flex:1}
  .ocard{grid-template-columns:64px 1fr}.ocard .btn{grid-column:1/-1}
  .ocard.has-arch{padding-bottom:70px}.ord-row .ord-arch{justify-self:stretch;margin:0 21px 17px 15px}
  .msgs{height:500px}.msg{max-width:90%}
  /* Phone: compact footer. Small logo, the three link columns side by
     side in small type, the signup with social icons on one row. */
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;padding:22px 0 16px}
  .foot-in>*{padding:0 0 0 12px}
  .foot-brand img{width:78px}
  .foot h2{font-size:.86rem;margin-bottom:8px}
  .foot li{margin-bottom:5px;line-height:1.3}
  .foot li a{font-size:.8rem}
  .foot-join{padding:16px 0 0!important}
  .foot-join h2{grid-column:1/-1;margin-bottom:2px}
  .foot-join p{font-size:.8rem;margin-bottom:10px}
  .foot-join{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
  .foot-join>p:first-of-type,.foot-msg{grid-column:1/-1}
  .foot-msg{order:5}
  .foot-form{max-width:none;padding:3px 3px 3px 14px}
  .foot-form input{padding:6px 6px 6px 0}
  .foot-form button{width:32px;height:32px}
  .foot-social{margin-top:0;gap:6px}
  .foot-social a{width:34px;height:34px}
  .foot::before,.foot::after{display:none}
  .foot-base{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 12px;padding:10px 0 14px;font-size:.74rem;text-align:center}
  .quote{padding:52px 0 60px}
  .step-card-inner{min-height:300px}
  .step-card-face{padding:26px}
}
@media(max-width:420px){.brand-word{font-size:1.1rem;letter-spacing:.28em}.brand img{height:38px}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-thread path.t{stroke-dashoffset:0}
}

/* Click-to-zoom photo lightbox */
img.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:28px;animation:lb-in .15s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:min(92vw,900px);max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain}
.lightbox .lb-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;cursor:pointer}
.lightbox .lb-close:hover{background:rgba(255,255,255,.22)}
.lightbox .lb-close svg{width:20px;height:20px}

/* In-page invoice sheet — full screen on phones, a centred panel on
   desktop. The invoice itself renders in an iframe (its own styles). */
body.invoice-open{overflow:hidden}
.invoice-sheet{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px;animation:lb-in .15s ease}
.invoice-sheet .inv-box{background:#fff;width:100%;max-width:720px;height:100%;max-height:900px;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.invoice-sheet .inv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid #eee;color:#1a1a1a}
.invoice-sheet .inv-close{color:#1a1a1a;border-color:#ccc}
.invoice-sheet iframe{flex:1;width:100%;border:0;background:#fff}
@media (max-width:640px){
  .invoice-sheet{padding:0}
  .invoice-sheet .inv-box{max-width:none;max-height:none;border-radius:0}
  .invoice-sheet .inv-bar{padding-top:max(10px,env(safe-area-inset-top))}
}

/* Terms of Service shown in the same sheet at checkout (openTermsSheet).
   Text, not an iframe, so it follows the site's light/dark theme. */
.invoice-sheet .doc-box{background:var(--surface);color:var(--text);max-width:760px}
.invoice-sheet .doc-box .inv-bar{color:var(--text);border-bottom-color:var(--line)}
.invoice-sheet .doc-box .inv-close{color:var(--text);border-color:var(--line2)}
.invoice-sheet .doc-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 22px 40px}
.invoice-sheet .doc-body h2{font-size:1.1rem;margin:22px 0 8px}

/* Passwords always start masked. Some browsers (Safari's suggested
   "Strong Password", Chrome's generated password) show the typed text in
   a password box; this keeps it as dots until the person taps Show. */
input[type=password]{-webkit-text-security:disc!important}

/* Edit-a-piece modal — clicking "Edit" on a portfolio piece used to expand
   editPieceForm() right there in the grid, stretching the whole layout
   underneath it. This is that same form, unchanged, just shown as a
   centered popup over a blurred backdrop instead, so the grid itself never
   moves. z-index sits below the lightbox (200): a piece's own photo is
   zoomable from inside this modal, and that zoom should still land on top
   of it. */
.piece-modal-backdrop{position:fixed;inset:0;z-index:150;background:rgba(20,18,16,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:lb-in .15s ease}
.piece-modal-backdrop.no-anim{animation:none}
.piece-modal{background:var(--bg);border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.piece-modal .piece{border:0!important;padding:20px!important}
/* Big, obvious close (X) in a modal's top-right corner. */
.modal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);font-size:1.6rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;z-index:2}
.modal-x:hover{border-color:var(--ink)}
.modal-x:disabled{opacity:.4;cursor:default}
.modal-x-sm{top:10px;right:10px;width:34px;height:34px;font-size:1.35rem}

/* Crop-to-shape upload option */
.crop-opt{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);margin-top:4px}
.crop-opt input{width:auto}
/* Gift's feedback: "I keep a fixed number of this piece in stock" is a
   real decision a designer makes about how their listing behaves, not a
   minor aside like the photo-crop checkbox next to it — it reads too small
   at the shared .crop-opt size. Bumped just this one label, not every
   .crop-opt, so the genuinely minor options nearby stay as they were. */
.crop-opt.stock-opt{font-size:1rem;color:var(--text)}

/* Signed-in designers can't send requests (buyers only): request buttons
   stay visible but greyed out, like a disabled button. app.js adds the
   hover note and blocks the click. */
body.is-designer :is([data-act="real-req"],[data-act="req-with"],[data-act="real-match-send"],[data-act="hero-go"]){opacity:.4;filter:grayscale(1);cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ===== My store (designer dashboard at /store) =====
   Two columns on desktop (main: stats, profile, portfolio; side: buyer
   preview, completion, tips, payout). Below 980px the columns flatten
   (display:contents) and each card gets an order, so phones read:
   stats, completion, profile, portfolio, payout, then the rest. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ms{padding:26px 0 64px}
.ms .panel{border-radius:20px;box-shadow:0 1px 2px rgba(42,63,54,.04)}
.ms h2{font-size:1.3rem;margin:0}
.ms-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.ms-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ms-title h1{font-size:clamp(2.3rem,4.4vw,3.4rem)}
.ms-live{display:inline-flex;align-items:center;gap:7px;background:var(--ok-s);color:var(--ok);font-size:.82rem;font-weight:600;padding:5px 12px;border-radius:999px}
.ms-live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ms-live.off{background:var(--gold-s);color:var(--gold-t)}
.ms-name{font-family:var(--serif);font-size:1.45rem;color:var(--ink);margin:4px 0 0}
.ms-tag{color:var(--muted);margin:4px 0 0;max-width:60ch}
.ms-hero-act{display:flex;gap:10px;flex-wrap:wrap}
.ms-hero-act .ic,.ms-card-h .btn .ic,.ms-pf-add .ic,.ms-po-manage .ic{width:18px;height:18px}
.ms-edit-m{display:none}
.ms-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ms-main,.ms-side{display:grid;gap:18px;min-width:0}
.ms-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.ms-card-h .sub{margin:3px 0 0}
/* stat tiles */
.ms-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ms-stat{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0}
.ms-stat-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--green-s);color:var(--ink);display:grid;place-items:center}
.ms-stat-ic .ic{width:21px;height:21px}
.tone-gold .ms-stat-ic{background:var(--gold-s);color:var(--gold-t)}
.tone-sage .ms-stat-ic{background:var(--sage-s);color:var(--sage-t)}
.tone-green .ms-stat-ic{background:var(--ok-s);color:var(--ok)}
.ms-stat-tx{display:flex;flex-direction:column;min-width:0}
.ms-stat-l{display:flex;align-items:center;gap:5px;font-size:.84rem;color:var(--muted)}
.ms-stat-l .smw{display:none}
.ms-stat-l{position:relative}
.ms-i{flex:none;display:inline-grid;place-items:center;cursor:help;background:none;border:0;padding:2px;margin:-2px;color:inherit;border-radius:50%}.ms-i .ic{width:14px;height:14px}
.ms-i:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.group-tip-row{position:relative;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.group-tip{color:var(--muted)}.group-tip .ic{width:18px;height:18px}
.group-tip-row .ms-bubble{width:300px;max-width:min(300px,86vw)}
.ms-bubble{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:240px;max-width:min(240px,80vw);background:var(--ink);color:var(--bg);font-size:.78rem;line-height:1.4;font-weight:400;text-align:left;padding:8px 10px;border-radius:10px;box-shadow:var(--sh);white-space:normal;cursor:default}
.ms-i:hover .ms-bubble,.ms-i:focus-visible .ms-bubble,.ms-i.open .ms-bubble{display:block}
.ms-stat-v{font-family:var(--serif);font-size:1.6rem;color:var(--ink);line-height:1.15;margin:3px 0 2px;font-weight:700}
.ms-stat-d{font-size:.8rem;color:var(--muted)}
.ms-stat-d.up{color:var(--ok)}.ms-stat-d.down{color:var(--gold-t)}
.ms-hero-ava{display:none}
/* avatar with camera badge */
.ms-ava{position:relative;width:120px;height:120px;flex:none}
.ms-ava img,.ms-ava .ms-ava-i{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:2rem;font-weight:600;color:#fff;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--gold)}
.ms-ava img.zoomable{cursor:zoom-in}
.ms-cam{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;background:var(--pri);color:var(--pri-t);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 3px var(--surface)}
.ms-cam .ic{width:18px;height:18px}
.ms-photo-pv{border:1px solid var(--line);border-radius:16px;background:var(--bg2);padding:14px 16px;margin-bottom:8px}
/* profile read view */
.ms-prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}
.ms-prof-id{display:flex;flex-direction:column;gap:18px;align-items:stretch;padding-right:24px;border-right:1px solid var(--line)}
.ms-prof-id>.ms-ava{margin-left:4px}
.ms-rows{display:grid;gap:14px;min-width:0;align-content:start}
.ms-row{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;min-width:0}
.ms-row-ic{grid-row:span 2;color:var(--muted);padding-top:1px}
.ms-row-ic{color:var(--sage-t)}.ms-row-ic .ic{width:18px;height:18px}
.ms-k{font-size:.8rem;color:var(--muted);font-weight:500}
.ms-v{position:relative;color:var(--ink);font-size:.95rem;min-width:0;overflow-wrap:break-word;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:4px}
.ms-none .link{background:none;border:0;padding:0;font:inherit;color:var(--ink)}
.ms-biz{font-family:var(--serif);font-size:1.15rem;overflow-wrap:normal}
.ms-bio{margin:0;color:var(--text);line-height:1.5}
.ms-ell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-none{color:var(--muted);font-size:.9rem}
.ms-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ms-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.ms-chip{border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:.84rem;color:var(--text);background:var(--surface)}
.ms-chip.rose{background:var(--gold-s);border-color:transparent;color:var(--gold-t)}
.ms-chip.sage{background:var(--sage-s);border-color:transparent;color:var(--sage-t)}
.ms-row-wide .ms-chips{margin-top:0}
/* locked fields: grey box + lock, so they read as not editable */
.ms-locked .ms-v{background:var(--surface2);border-color:transparent;color:var(--muted);padding-right:36px}
.ms-locked .ms-biz{color:var(--text)}
.ms-lock{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid;opacity:.8}
.ms-lock .ic{width:15px;height:15px}
.ms-soc{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;text-decoration:none;max-width:100%;min-width:0}
.ms-soc:hover{text-decoration:underline;text-underline-offset:3px}
.ms-soc .ic{width:14px;height:14px;flex:none}
.ms-soc .ms-ell{min-width:0}
.ms #store-photo-err:empty{display:none}
.ms-edit{border-top:1px solid var(--line);padding-top:16px}
.lg-inline{display:inline}
/* portfolio */
.ms-pf-h{flex-wrap:wrap}
.ms-count{font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--muted)}
.ms-pf-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ms-search{position:relative;display:block}
.ms-search>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid}
.ms-search .ic{width:17px;height:17px}
.ms-search input{padding:9px 12px 9px 36px;width:210px;font-size:.92rem}
.ms-pf-tools select{width:auto;padding:9px 36px 9px 14px;font-size:.92rem}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.ms-pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0}
.ms-pc-img{position:relative;aspect-ratio:3/4;border-radius:15px 15px 0 0;overflow:hidden;background:var(--surface2)}
.ms-pc-img img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.ms-pc.off .ms-pc-img img{opacity:.55}
.ms-pc-b{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;flex:1}
.ms-pc-t{color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-pc-meta{display:flex;justify-content:space-between;gap:6px;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.ms-pc-p{color:var(--text);font-weight:500}
.ms-pc-act{display:flex;gap:6px;margin-top:auto;padding-top:4px}
.ms-pc-act>.btn{flex:1;padding:7px 10px}
.ms-more{position:relative}
.ms-more summary{list-style:none;padding:7px 10px;cursor:pointer}
.ms-more summary::-webkit-details-marker{display:none}
.ms-more summary .ic{width:18px;height:18px}
.ms-more-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:6px;min-width:150px;display:grid}
.ms-more-menu button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--ink)}
.ms-more-menu button:hover{background:var(--surface2)}
.ms-more-menu .danger{color:var(--err)}
.ms-add-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:1.5px dashed var(--sage);border-radius:16px;background:var(--green-s);color:var(--ink);min-height:260px;padding:20px;cursor:pointer}
.ms-add-tile:hover{border-color:var(--pri)}
.ms-drop-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-t);margin-bottom:4px}
.ms-drop-ic .ic{width:22px;height:22px}
.ms-empty{grid-column:1/-1;align-self:center}
/* pill toggle */
input.ms-sw{appearance:none;-webkit-appearance:none;width:40px;height:23px;border-radius:999px;background:var(--line2);border:0;position:relative;cursor:pointer;flex:none;transition:background .15s;padding:0}
input.ms-sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
input.ms-sw:checked{background:var(--ok)}
input.ms-sw:checked::after{transform:translateX(17px)}
input.ms-sw:disabled{opacity:.5}
input.ms-sw:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ms-swl{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);font-size:.95rem;margin:4px 0 14px}
.ms-swl.sm{font-size:.82rem;margin:2px 0;gap:8px}
.ms-swl.sm input.ms-sw{width:34px;height:20px}.ms-swl.sm input.ms-sw::after{width:14px;height:14px}.ms-swl.sm input.ms-sw:checked::after{transform:translateX(14px)}
/* buyer preview */
.ms-preview .sub{margin:3px 0 14px}
.ms-pv{position:relative;border-radius:16px;overflow:hidden;background:var(--band) var(--pv,none) center/cover no-repeat;min-height:160px;display:flex;align-items:flex-end}
.ms-pv::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,24,22,.82) 0%,rgba(20,24,22,.55) 55%,rgba(20,24,22,.2) 100%)}
.ms-pv-in{position:relative;display:flex;gap:14px;align-items:center;padding:18px;color:#fff;min-width:0}
.ms-pv-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.85);display:grid;place-items:center;font-weight:600;color:#fff}
.ms-pv-in b{font-family:var(--serif);font-size:1.3rem;display:block;color:#fff}
.ms-pv-in p{margin:3px 0 10px;font-size:.85rem;color:rgba(255,255,255,.88);line-height:1.35}
.ms-pv-btn{background:#fff;color:#1E2F27;padding:7px 14px;font-size:.85rem}
.ms-pv-btn .ic{width:15px;height:15px}
.ms-pv-note{display:inline-block;margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.8)}
.ms-accept{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--sage-s);cursor:pointer}
.ms-accept.off{background:var(--bg2);border:1px solid var(--line)}
.ms-accept b{display:block;color:var(--ink);font-size:.95rem}
.ms-accept small{color:var(--muted);font-size:.8rem}
/* completion */
.ms-comp-h{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:default;color:inherit}
.ms-comp-row{display:flex;justify-content:space-between;align-items:baseline}
.ms-comp-pct{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.ms-bar{display:block;height:9px;border-radius:999px;background:var(--surface2);margin:12px 0 10px;overflow:hidden}
.ms-bar span{display:block;height:100%;border-radius:inherit;background:var(--pri)}
.ms-comp-sub{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;color:var(--muted)}
.ms-comp-chev{display:none}
.ms-checks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.ms-checks li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--text)}
.ms-checks li.ok{color:var(--muted)}
.ms-ck{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none}
.ms-checks li.ok .ms-ck{background:var(--pri);border-color:var(--pri);color:var(--pri-t)}
.ms-ck .ic{width:13px;height:13px;stroke-width:2.6}
.ms-checks .link{background:none;border:0;padding:0;font-size:.92rem;text-align:left}
/* tips */
.ms-tips h2{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ms-bulb{color:var(--gold);display:grid}.ms-bulb .ic{width:22px;height:22px}
.ms-tip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;color:var(--ink)}
.ms-tip>span:nth-child(2){flex:1;min-width:0}
.ms-tip b{display:block;font-size:.9rem;font-weight:600}
.ms-tip small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35;margin-top:2px}
.ms-tip-ic{width:36px;height:36px;border-radius:10px;background:var(--green-s);color:var(--ink);display:grid;place-items:center;flex:none}
.ms-tip-ic .ic{width:18px;height:18px}
.ms-tip>.ic{width:18px;height:18px;color:var(--muted)}
/* payout */
.ms-payout .ms-card-h{margin-bottom:6px;align-items:center}
.ms-pill{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.ms-pill .ic{width:13px;height:13px;stroke-width:2.6}
.ms-pill.ok{background:var(--ok-s);color:var(--ok)}.ms-pill.warn{background:var(--gold-s);color:var(--gold-t)}.ms-pill.err{background:var(--err-s);color:var(--err)}
.ms-kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:14px}
.ms-kv small{display:block;color:var(--muted);font-size:.78rem}
.ms-kv b{color:var(--ink);font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.ms-kv.ms-ro{gap:10px}
.ms-kv.ms-ro>div{background:var(--surface2);border-radius:12px;padding:9px 12px}
.ms-kv.ms-ro>div.wide{grid-column:1/-1}
.ms-kv.ms-ro b{color:var(--muted)}
.ms-po-manage:disabled{opacity:1;background:var(--surface2);border-color:transparent;color:var(--muted);cursor:not-allowed}
/* gentle lift on hover for the smaller cards and tiles */
.ms-side .ms-card,.ms-stat,.ms-pc,.ms-add-tile{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media(hover:hover){
  .ms-side .ms-card:hover,.ms-stat:hover,.ms-pc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
  .ms-add-tile:hover{transform:translateY(-3px);box-shadow:var(--sh)}
}
@media(prefers-reduced-motion:reduce){.ms-side .ms-card,.ms-stat,.ms-pc,.ms-add-tile{transition:none}.ms-side .ms-card:hover,.ms-stat:hover,.ms-pc:hover,.ms-tip:hover,.ms-add-tile:hover{transform:none}}
/* add-piece modal (lives outside #app) */
html.ms-lock{overflow:hidden}
/* Password reset lock: signed in by a reset-email link but no new password
   yet. Only the logo and theme toggle stay; app.js sends every other page
   back to /account's "Set a new password" screen. */
html.pw-lock .hdr .nav,html.pw-lock .hdr-tools>:not(#theme),html.pw-lock .drawer,html.pw-lock .foot{display:none!important}
html.pw-lock .hdr .brand{pointer-events:none}
.ms-add-modal{max-width:540px}
.ms-add-in{padding:22px 24px 24px}
.ms-add-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.ms-add-top h2{font-size:1.6rem;margin:0}
.ms-add-top .sub{margin:4px 0 0}
.ms-add-top .icon-btn{border-color:var(--line);flex:none}
.ms-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:1.5px dashed var(--sage);border-radius:16px;background:var(--green-s);min-height:180px;padding:20px;cursor:pointer;overflow:hidden}
.ms-drop b{color:var(--ink)}
.ms-drop-pv{position:absolute;inset:0;background:center/contain no-repeat var(--surface2)}
.ms-drop.has .ms-drop-ic,.ms-drop.has b,.ms-drop.has .fine{position:relative;z-index:1}
.ms-drop.has .ms-drop-ic{display:none}
.ms-drop.has b,.ms-drop.has .fine{background:var(--surface);padding:2px 10px;border-radius:999px;margin-top:auto;font-size:.8rem}
.ms-drop.has .fine{display:none}
.ms-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ms-add-modal .crop-opt{margin:10px 0 14px}

@media(max-width:1180px){.ms-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
  .ms-layout{display:flex;flex-direction:column;gap:16px}
  .ms-main,.ms-side{display:contents}
  .ms-stats{order:1}.ms-comp{order:2}#ms-profile{order:3}#ms-portfolio{order:4}.ms-payout{order:5}.ms-preview{order:6}.ms-tips{order:7}
  .ms-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ms-comp-h{cursor:pointer}
  .ms-comp-chev{display:grid;color:var(--muted);transition:transform .15s}.ms-comp-chev .ic{width:18px;height:18px}
  .ms-comp:not(.open) .ms-checks{display:none}
  .ms-comp.open .ms-comp-chev{transform:rotate(90deg)}
}
@media(max-width:760px){
  .ms-prof{grid-template-columns:1fr;gap:14px}
  .ms-prof-id{border-right:0;padding-right:0}
  .ms-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .ms{padding-top:16px}
  .ms-hero{margin-bottom:14px;gap:14px}
  .ms-title{gap:10px}
  .ms-title h1{font-size:2.4rem}
  .ms-name{font-size:1.3rem}
  /* flatten hero + columns so the action buttons sit under the stats */
  .ms{display:flex;flex-direction:column;gap:14px}
  .ms-hero,.ms-layout{display:contents}
  .ms-hero-t{order:0}.ms-stats{order:1}.ms-hero-act{order:2}.ms-comp{order:3}#ms-profile{order:4}#ms-portfolio{order:5}.ms-payout{order:6}.ms-preview{order:7}.ms-tips{order:8}
  .ms-hero-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ms-hero-act .btn{padding:11px 12px}
  .ms-hero-act .ms-share{display:none}
  .ms-edit-m{display:inline-flex}
  .lg-inline{display:none}
  /* avatar + three compact stat tiles, like the phone mockup */
  .ms-stats{grid-template-columns:96px repeat(3,minmax(0,1fr));gap:8px;align-items:center}
  .ms-hero-ava{display:block;width:92px;height:92px}
  .ms-hero-ava .ms-cam{width:32px;height:32px;right:-2px;bottom:-2px}
  .ms-stat-conv{display:none}
  .ms-stat{flex-direction:column;align-items:center;text-align:center;padding:10px 4px;gap:6px;border-radius:14px}
  .ms-stat-ic{width:34px;height:34px;border-radius:50%}.ms-stat-ic .ic{width:17px;height:17px}
  .ms-stat-tx{align-items:center}
  .ms-stat-v{font-size:1.15rem;margin:0;order:-1}
  .ms-stat-l{font-size:.75rem}
  .ms-stat-l .lg{display:none}.ms-stat-l .smw{display:inline}
  /* phone tiles are narrow, so the bubble spans the whole stats row */
  .ms-stats{position:relative}.ms-stat-l{position:static;flex-wrap:wrap;justify-content:center;gap:3px}
  .ms-bubble{left:0;right:0;width:auto;max-width:none;top:calc(100% + 6px)}
  .ms-stat-d{font-size:.7rem;line-height:1.25}
  /* the hero already shows the avatar on phones */
  .ms-prof-ava{display:none}
  .ms-prof-id{display:block}
  .ms-pair{grid-template-columns:1fr;gap:14px}
  .ms-biz{font-size:1rem;font-family:var(--sans);font-weight:600}
  .ms-card-h .sub{display:none}
  .ms-pf-h .sub{display:block}
  .ms-pf-tools{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .ms-pf-tools select{width:100%}
  .ms-search input{width:100%}
  .ms-pf-add{grid-column:1/-1}
  .ms-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ms-pf-h~.ms-grid .ms-add-tile{min-height:200px}
  .ms .panel{padding:16px}
  /* add-piece sheet fills the phone screen */
  .ms-add-bd{padding:0;align-items:stretch}
  .ms-add-modal{max-width:none;max-height:none;height:100%;border-radius:0}
  .ms-add-in{padding:18px 16px 28px}
  .ms-add-modal .two{grid-template-columns:1fr 1fr;gap:10px}
}

/* Designer notification bell (replaces the saved-designers heart for designers) */
.notif-menu{position:relative}
.notif-menu .icon-btn{position:relative}
.notif-dot{position:absolute;top:7px;right:7px;margin:0;box-shadow:0 0 0 2px var(--bg)}
.notif-drop{position:absolute;top:100%;right:0;z-index:60;width:340px;max-width:calc(100vw - 32px);margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:8px;text-align:left}
.notif-drop[hidden]{display:none}
.notif-h{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.notif-h b{font-size:.95rem;color:var(--ink)}
.notif-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notif-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.notif-acts button{background:none;border:0;padding:4px 6px;border-radius:8px;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
.notif-acts button:hover,.notif-acts button:focus-visible{color:var(--ink);background:var(--surface2)}
.notif-row{position:relative}
.notif-row .notif-it{padding-right:38px}
.notif-x{position:absolute;top:8px;right:6px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;opacity:.55}
.notif-x .ic{width:14px;height:14px}
.notif-row:hover .notif-x,.notif-x:focus-visible{opacity:1}
.notif-x:hover{background:var(--bg);color:var(--ink)}
.notif-list{max-height:min(380px,60vh);overflow-y:auto}
.notif-it{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;color:var(--text);font-size:.9rem;line-height:1.35}
.notif-it:hover{background:var(--surface2)}
.notif-it b{color:var(--ink);font-weight:600}
.notif-it.is-new{background:var(--surface2)}
.notif-it.is-new .notif-tx>span::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--err);margin-left:6px;vertical-align:middle}
.notif-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.notif-ic .ic{width:15px;height:15px}
.notif-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.notif-tx small{color:var(--muted);font-size:.78rem}
.notif-empty{padding:14px 10px;margin:0;color:var(--muted);font-size:.9rem}
.notif-all{display:block;padding:10px;margin-top:4px;border-top:1px solid var(--line);font-size:.88rem;font-weight:600;color:var(--ink);text-align:center}
@media(max-width:980px){.notif-drop{position:fixed;top:64px;right:16px;left:16px;width:auto;max-width:none}}
/* Contact support sheet (works even with no email app set up) */
.cs-addr{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px 10px 14px;margin-bottom:16px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.cs-acts{display:grid;gap:10px}
.cs-note{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg2);color:var(--text);font-size:.88rem;line-height:1.45}
.cs-note[hidden]{display:none}
button.da-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* ---------- About: shared top half + closing banner (about.html) ----------
   Same for every visitor. Satin drapes (recoloured from fabric/satin.webp)
   frame the hero's edges; the deep green banner under it is echoed by
   .ab-close at the very bottom so the page opens and closes on green. */
:root{--ab-blush:#FCF5F1;--ab-green:#183427;--ab-green-t:#F4EFE8;--ab-silk-o:1}
[data-theme="dark"]{--ab-blush:#141E19;--ab-green:#0F2219;--ab-silk-o:.18}
.ab-top{position:relative;overflow:hidden;background:var(--ab-blush)}
.ab-silk{position:absolute;pointer-events:none;user-select:none;opacity:var(--ab-silk-o);height:auto;max-width:none}
.ab-silk-l{left:-70px;top:-60px;width:min(470px,33vw)}
.ab-silk-r{right:-80px;top:-50px;width:min(500px,35vw)}
.ab-hero{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:76px 0 84px}
.ab-copy h1{font-weight:500;font-size:clamp(2.6rem,4.6vw,3.9rem);letter-spacing:-.015em}
.ab-sub{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.25;color:var(--ink);max-width:20ch}
.ab-sub em{display:block;color:var(--rose-h)}
.ab-rule{display:flex;align-items:center;gap:0;width:150px;margin:20px 0 22px 60px;height:10px}
.ab-rule::before,.ab-rule::after{content:"";flex:1;border-top:1px solid var(--gold)}
.ab-rule i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);margin:0 6px}
.ab-body{max-width:44ch;color:var(--text);font-size:1.06rem}
.ab-brand{display:flex;align-items:center;justify-content:center;gap:36px}
.ab-mark{width:min(300px,100%);height:auto;flex:0 1 300px}
.ab-vr{align-self:stretch;width:1px;background:linear-gradient(transparent,var(--gold) 15%,var(--gold) 85%,transparent);min-height:170px}
.ab-word{margin:0;text-align:center;display:grid;gap:8px;flex:none}
.ab-word b{font-family:var(--sans);font-weight:300;font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:.32em;margin-right:-.32em;color:var(--ink);line-height:1}
.ab-word span{font-size:.86rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink);margin-top:14px;margin-right:-.42em}
.ab-word em{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--rose-h);line-height:1.1}

.ab-band,.ab-close{position:relative;overflow:hidden;background:var(--ab-green);color:var(--ab-green-t)}
.ab-band{padding:40px 0 48px}
.ab-swirl{position:absolute;width:200px;height:160px;pointer-events:none}
.ab-swirl path{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.75;stroke-linecap:round}
.ab-swirl-l{left:-20px;top:50%;transform:translateY(-30%)}
.ab-swirl-r{right:-20px;top:50%;transform:translateY(-55%)}
.ab-band-h{text-align:center;margin-bottom:26px}
.ab-band-h h2{color:var(--ab-green-t);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.2rem)}
.ab-band-h p{font-family:var(--serif);font-style:italic;color:var(--rose);font-size:1.1rem;margin-top:4px}
.ab-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-cards li{display:flex;gap:20px;align-items:flex-start;background:var(--surface);color:var(--text);border-radius:16px;padding:28px 24px 26px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ab-ic{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--rose-s);color:var(--rose-t)}
.ab-ic .ic{width:30px;height:30px}
.ab-cards h3{font-weight:500;font-size:1.25rem;margin-bottom:8px}
.ab-cards p{font-size:.93rem;line-height:1.6;color:var(--muted)}
.ab-link{display:inline-block;margin-top:12px;font-weight:600;font-size:.92rem;color:var(--ink)}
.ab-link:hover{color:var(--rose-t)}
.ab-link span{display:inline-block;transition:transform .2s}
.ab-link:hover span{transform:translateX(3px)}

.ab-how{position:relative;overflow:hidden;background:var(--ab-blush)}
.ab-silk-g{left:-90px;bottom:-110px;width:min(340px,30vw)}
.ab-how-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(240px,320px);gap:48px;align-items:center;padding:64px 0 0}
.ab-how-main{padding-bottom:64px}
.ab-how-h{text-align:center;margin-bottom:38px}
.ab-how-h h2{font-weight:500;font-size:clamp(1.7rem,2.8vw,2.2rem)}
.ab-how-h p{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.15rem;margin-top:6px}
.ab-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
.ab-steps li{position:relative;text-align:center}
.ab-steps li:not(:last-child)::after{content:"";position:absolute;top:33px;left:calc(50% + 46px);right:calc(-50% + 36px);border-top:1px solid var(--gold);opacity:.7}
.ab-steps .ab-ic{margin:0 auto 18px;background:var(--rose-s);color:var(--ink)}
.ab-steps h3{font-weight:500;font-size:1.15rem;margin-bottom:6px}
.ab-steps p{font-size:.93rem;color:var(--muted);max-width:24ch;margin:0 auto}
.ab-photo{align-self:end;position:relative}
.ab-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:200px 200px 0 0;box-shadow:0 -6px 30px rgba(120,80,60,.12)}

.ab-close{text-align:center;padding:72px 0 80px}
.ab-close .wrap{position:relative;z-index:1}
.ab-close-mark{width:110px;height:auto;margin:0 auto 18px;display:block;opacity:.95}
.ab-close p{font-family:var(--serif);font-size:clamp(2.1rem,5.2vw,3.8rem);line-height:1.15;color:var(--ab-green-t)}
.ab-close p em{display:block;font-style:italic;color:var(--rose);font-weight:600}
/* The page now ends on .ab-close, so the borders CTA + wordplay sit just
   above it with a little less air than a normal section. */
#about-buyer .borders,#about-designer .borders{padding-bottom:40px}
#about-buyer .wordplay,#about-designer .wordplay{padding:20px 0 72px}

/* Founder story (shared) + designer mission / protection blocks. */
.ab-eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-h);display:flex;align-items:center;gap:14px}
.ab-eyebrow::after{content:"";width:52px;border-top:1px solid var(--gold)}
.ab-story{position:relative;background:var(--bg);padding:88px 0 92px;border-top:1px solid var(--line)}
.ab-story-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.ab-story-side{position:sticky;top:110px}
.ab-story-side h2{font-weight:500;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.015em;max-width:12ch}
.ab-story-side .ab-rule{margin:22px 0 24px}
.ab-pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.4;color:var(--rose-t);max-width:22ch;margin:0}
.ab-letter{position:relative;background:var(--ab-blush);border:1px solid var(--line);border-radius:28px;padding:56px 56px 44px;box-shadow:0 18px 50px rgba(120,80,60,.08)}
.ab-letter::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold);opacity:.35;border-radius:20px;pointer-events:none}
.ab-qmark{position:absolute;top:-20px;left:48px;width:58px;height:44px;fill:var(--gold);background:var(--bg);padding:0 10px;box-sizing:content-box}
.ab-qmark-close{top:auto;left:auto;bottom:-20px;right:48px;transform:rotate(180deg)}
.ab-letter p{color:var(--text);font-size:1.05rem;line-height:1.8;margin:0 0 20px;text-wrap:pretty}
.ab-letter .ab-lead::first-letter{float:left;font-family:var(--serif);font-size:4.1rem;line-height:.82;padding:6px 6px 0 0;color:var(--ink);font-weight:500}
.ab-letter em{font-family:var(--serif);font-style:italic;color:var(--rose-h);font-weight:600;font-size:1.12em}
.ab-letter .ab-sign{margin:30px 0 0;font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ab-sign small{flex-basis:100%;padding-left:26px;font-family:var(--sans);font-style:normal;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.ab-mission{background:var(--bg2);padding:72px 0 56px;overflow:hidden}
.ab-mission-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 56px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:48px 52px 40px;box-shadow:0 18px 50px rgba(120,80,60,.06)}
.ab-mission-copy h2{font-weight:600;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.015em;margin-bottom:18px;max-width:19ch}
.ab-mission-copy p:not(.ab-eyebrow){color:var(--muted);font-size:1.04rem;line-height:1.7;margin:0 0 14px;max-width:56ch}
.ab-mission-photo{position:relative;margin:0;padding:18px 26px 26px 0}
.ab-mission-photo::before{content:"";position:absolute;inset:4% -4% -2% -10%;background:var(--rose-s);border-radius:46% 54% 42% 58%/58% 44% 56% 42%;z-index:0}
.ab-mission-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:852/522;object-fit:cover;border-radius:22px;box-shadow:0 14px 34px rgba(80,50,30,.16)}
.ab-mission-arc{position:absolute;right:-30px;top:-20px;width:70%;height:auto;z-index:2;pointer-events:none}
.ab-mission-arc path{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;opacity:.8}
.ab-pillars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;padding-top:28px;border-top:1px solid var(--line)}
.ab-pillars li{display:flex;gap:16px;align-items:flex-start;padding:0 24px}
.ab-pillars li:first-child{padding-left:0}
.ab-pillars li+li{border-left:1px solid var(--line)}
.ab-pillars h3,.ab-pcard h3{font-weight:600;font-size:1.12rem;margin:2px 0 6px}
.ab-pillars p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
.ab-pill-ic{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.ab-pill-ic .ic{width:24px;height:24px}
.ab-pill-ic.rose{background:var(--rose-s);color:var(--rose-t)}
.ab-pill-ic.sage{background:var(--sage-s);color:var(--sage-t)}

.ab-protect{position:relative;background:var(--bg);padding:64px 0 80px}
.ab-protect-h{max-width:780px;margin:0 auto 36px;text-align:center}
.ab-protect-h h2{display:flex;align-items:center;justify-content:center;gap:24px;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem)}
.ab-protect-h h2::before,.ab-protect-h h2::after{content:"";width:56px;border-top:1px solid var(--gold);flex:none}
.ab-protect-h p{margin:14px auto 0;color:var(--muted);font-size:1.06rem;line-height:1.7}
.ab-protect-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ab-pcard{position:relative;overflow:hidden;display:flex;gap:20px;align-items:flex-start;border-radius:24px;padding:32px 34px 34px;min-height:220px;border:1px solid var(--line)}
.ab-pcard.buyer{background:linear-gradient(110deg,var(--rose-s) 55%,transparent),var(--ab-blush)}
.ab-pcard.designer{background:var(--sage-s)}
.ab-pcard.buyer .ab-pill-ic{background:var(--surface)}
.ab-pcard.designer .ab-pill-ic{background:var(--surface)}
.ab-pcard-copy{position:relative;z-index:1;max-width:60%}
.ab-pcard-copy p:not(.ab-eyebrow){margin:0;color:var(--text);font-size:.95rem;line-height:1.65}
.ab-pcard.designer .ab-eyebrow{color:var(--sage-t)}
.ab-pcard h3{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:500;margin-bottom:10px}
.ab-pcard-img{position:absolute;pointer-events:none;height:auto}
.ab-pcard.buyer .ab-pcard-img{right:0;top:0;height:100%;width:auto;max-width:36%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.ab-pcard.designer .ab-pcard-img{right:-70px;bottom:-110px;width:40%;max-width:260px;transform:rotate(-8deg)}
[data-theme="dark"] .ab-pcard-img{opacity:.55}
[data-theme="dark"] .ab-qmark{background:var(--bg)}

@media(max-width:980px){
  .ab-story{padding:64px 0 68px}
  .ab-story-in{grid-template-columns:1fr;gap:40px}
  .ab-story-side{position:static;text-align:center}
  .ab-story-side .ab-eyebrow{justify-content:center}
  .ab-story-side h2,.ab-pull{margin-inline:auto}
  .ab-story-side .ab-rule{margin:20px auto 22px}
  .ab-mission-card{grid-template-columns:1fr;padding:36px 30px 30px}
  .ab-mission-photo{max-width:560px;width:100%;margin:8px auto 0}
  .ab-pillars{grid-template-columns:1fr;gap:18px}
  .ab-pillars li,.ab-pillars li:first-child{padding:0}
  .ab-pillars li+li{border-left:0;border-top:1px solid var(--line);padding-top:18px}
  .ab-protect-cards{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ab-letter{padding:44px 22px 30px;border-radius:22px}
  .ab-letter::before{inset:7px;border-radius:16px}
  .ab-qmark{left:26px;width:46px;height:34px;top:-16px}
  .ab-qmark-close{top:auto;left:auto;bottom:-16px;right:26px}
  .ab-letter p{font-size:1rem;line-height:1.75}
  .ab-letter .ab-lead::first-letter{font-size:3.4rem}
  .ab-mission{padding:44px 0 36px}
  .ab-mission-card{padding:28px 20px 24px;border-radius:22px}
  .ab-mission-arc{display:none}
  .ab-mission-photo{padding:10px 10px 14px 0}
  .ab-protect{padding:44px 0 56px}
  .ab-protect-h h2::before,.ab-protect-h h2::after{display:none}
  .ab-pcard{flex-direction:column;gap:14px;padding:26px 22px 28px}
  .ab-pcard-copy{max-width:none}
  .ab-pcard.buyer{padding-bottom:150px}
  .ab-pcard.buyer .ab-pcard-img{top:auto;bottom:0;height:150px;max-width:none;width:auto}
  .ab-pcard.designer{padding-bottom:130px}
  .ab-pcard.designer .ab-pcard-img{width:200px;right:-40px;bottom:-60px}
}

@media(max-width:980px){
  .ab-hero{grid-template-columns:1fr;gap:36px;padding:48px 0 56px;text-align:center}
  .ab-sub{margin-inline:auto}
  .ab-rule{margin:20px auto 22px}
  .ab-body{margin-inline:auto}
  .ab-brand{gap:22px}
  .ab-mark{flex-basis:200px;width:200px}
  .ab-vr{min-height:120px}
  .ab-cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .ab-how-in{grid-template-columns:1fr;gap:0}
  .ab-how-main{padding-bottom:40px}
  .ab-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .ab-steps li::after{display:none}
  .ab-photo{width:min(320px,80%);margin:0 auto}
  .ab-silk-l{width:180px;left:-70px}.ab-silk-r{width:200px;right:-80px}
  .ab-swirl{opacity:.5}
}
@media(max-width:560px){
  .ab-brand{flex-direction:column;gap:14px}
  .ab-vr{min-height:0;height:1px;width:140px;align-self:center;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent)}
  .ab-mark{width:180px;flex-basis:auto}
  .ab-word b{font-size:2rem}
  .ab-word span{font-size:.74rem;letter-spacing:.32em;margin-right:-.32em}
  .ab-cards li{padding:22px 18px;gap:16px}
  .ab-cards .ab-ic{width:52px;height:52px}.ab-cards .ab-ic .ic{width:24px;height:24px}
  .ab-steps{gap:14px;row-gap:28px}.ab-steps p{font-size:.88rem}
  .ab-silk-l{width:130px;left:-60px;opacity:calc(var(--ab-silk-o)*.8)}.ab-silk-r{width:140px;right:-70px;opacity:calc(var(--ab-silk-o)*.8)}
  .ab-swirl{display:none}
}

/* ---------- Designer profile (/designer?id=…) ----------
   Top band: designer's newest piece fades in from the right behind the
   booking card; intro (photo, name, tags) and the stats strip sit on the
   left. Below: About, Portfolio (4 across), Reviews (score / bars / latest)
   and "More designers you might like". */
.dp-top{position:relative;background:linear-gradient(180deg,var(--ab-blush),var(--bg) 720px)}
.dp-hero{position:absolute;top:0;right:0;height:min(100%,620px);width:min(60%,900px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.dp-hero img{width:100%;height:100%;object-fit:cover;object-position:center 20%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 72%,rgba(0,0,0,.55) 100%);mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 72%,rgba(0,0,0,.55) 100%);opacity:.95}
[data-theme="dark"] .dp-hero img{opacity:.5}
.dp-top-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"intro book" "stats book" "about book" "port book";grid-template-rows:auto auto auto 1fr;column-gap:48px;align-items:start;padding-bottom:40px}
.dp-intro{grid-area:intro;min-width:0}
.dp-book{grid-area:book;position:relative;top:auto;margin-top:64px;border-radius:24px;padding:26px;background:var(--surface)}
.dp-stats{grid-area:stats;align-self:start}
.dp-about{grid-area:about;margin-top:28px!important}
/* Portfolio sits in the left column right under About, so a short bio
   doesn't leave a gap the height of the booking card above it. */
.dp-port{grid-area:port;min-width:0;margin-top:32px!important}
.dp-port .dp-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dp-head{display:flex;align-items:center;gap:26px;padding:14px 0 22px}
.dp-ava{width:120px;height:120px;font-size:2.3rem;box-shadow:0 8px 24px rgba(42,63,54,.12)}
.dp-id{min-width:0}
.dp-id h1{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1}
.dp-id h1 .vf .ic{width:.7em;height:.7em}
.dp-socs{display:inline-flex;gap:8px}
.dp-soc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--surface);border:1px solid var(--line)}
.dp-soc:hover{border-color:var(--ink)}
.dp-soc .ic{width:18px;height:18px}
.dp-loc{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--text);font-size:.98rem}
.dp-loc .ic{width:17px;height:17px;color:var(--muted)}
.dp-rate{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:8px;color:var(--muted);font-size:.95rem}
.dp-sep{width:1px;height:16px;background:var(--line2)}
.dp-tags{display:flex;flex-wrap:wrap;gap:8px}
.dp-tags span{padding:6px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:.88rem;font-weight:500}
.dp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh)}
.dp-stats>div{display:flex;align-items:center;gap:12px;padding:18px 18px;border-left:1px solid var(--line);min-width:0}
.dp-stats>div:first-child{border-left:0}
.dp-si{flex:none;color:var(--gold)}
.dp-si .ic{width:28px;height:28px;stroke-width:1.5}
.dp-stats b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.2}
.dp-stats small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.dp-book .book-p{font-size:1.85rem}
.dp-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 18px}
.dp-kv>div{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px}
.dp-kv .ic{flex:none;width:22px;height:22px;color:var(--ink)}
.dp-kv small{display:block;color:var(--muted);font-size:.78rem}
.dp-kv b{display:block;color:var(--ink);font-weight:600;font-size:.9rem;line-height:1.25}
.dp-book .btn.pri .ic{width:18px;height:18px}
.dp-save{margin-top:10px}
.dp-save.fav-on{color:var(--rose-h);border-color:var(--rose-h)}
.dp-save.fav-on .ic{fill:currentColor}
.dp-body{padding-bottom:80px}
.dp-sec{margin-top:52px}
.dp-sec:first-child{margin-top:40px}
.dp-sec h2{font-size:clamp(1.6rem,2.6vw,2rem);margin-bottom:10px}
.dp-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.dp-sec-h h2{margin-bottom:6px}
.dp-sec-h .btn .ic{width:16px;height:16px}
.dp-bio{max-width:68ch;color:var(--text);font-size:1.02rem;line-height:1.65}
.dp-h3{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);margin:22px 0 10px}
.dp-facts span{background:var(--sage-s);border-color:transparent;color:var(--sage-t)}
.dp-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dp-pc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.dp-pc-art{position:relative;margin:8px 8px 0}
.dp-pc-art img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;cursor:zoom-in}
.dp-pc .dp-badge{top:10px;bottom:auto;left:10px}
.dp-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);margin:0 2px 0 3px}
.dp-pc-b{display:flex;flex-direction:column;padding:14px 16px 16px;flex:1}
.dp-pc-txt{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.dp-pc-b h3{font-size:1.08rem;font-weight:500;line-height:1.3}
.dp-pc-p{font-size:1.12rem;color:var(--ink);font-weight:700;margin-top:4px}
.dp-pc-por{font-size:.95rem;font-weight:600;color:var(--muted)}
.dp-pc-b small{color:var(--muted);font-size:.86rem}
.dp-pc-b .btn{margin-top:auto}
.dp-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.dp-rv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 56px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line)}
.dp-rv-score big{display:block;font-family:var(--sans);font-size:4.4rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-bottom:8px}
.dp-rv-score .stars5 .ic{width:20px;height:20px}
.dp-rv-score .fine{margin-top:10px;max-width:180px}
.dp-rv .bars{min-width:0;gap:12px}
.dp-rv .bars div{grid-template-columns:16px 1fr 44px;gap:14px;font-size:.95rem}
.dp-rv .bars b{font-weight:600}
.dp-rv .bars span{height:6px}
.dp-rv-list{display:grid}
.dp-body .rev{padding:22px 0;border-bottom:1px solid var(--line)}
.dp-body .rev:last-child{border-bottom:0}
.rev-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.rev-who{min-width:0}
.rev-who b{display:block;color:var(--ink);font-size:1.05rem;font-weight:700}
.dp-body .rev small{color:var(--muted);display:block;margin:4px 0 0;font-size:.9rem}
.rev-top .stars5{flex:none;margin-top:2px}
.dp-body .rev p{margin:12px 0 0;color:var(--text);font-size:1.02rem;line-height:1.55}
.rv-ontime{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px}
.rv-ontime-btns{display:flex;gap:8px;align-items:center}
.rv-ontime-btns .btn{min-width:64px;justify-content:center}
.dp-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* "Designers taking requests now" on Opening-soon profiles: the profile grid
   above already leaves 88px, so no extra top gap; give it room above the footer. */
.soon-live{margin-top:0;padding-bottom:96px}
@media(max-width:640px){.soon-live{padding-bottom:64px}}
.dp-mc{display:flex;align-items:center;gap:14px;padding:12px;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.dp-mc:hover{border-color:var(--line2);box-shadow:var(--sh)}
.dp-mc img,.dp-mc-ini{flex:none;width:74px;height:74px;border-radius:12px;object-fit:cover}
.dp-mc-ini{display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:700;font-size:1.4rem}
.dp-mc-t{flex:1;min-width:0;display:grid;gap:3px}
.dp-mc-t b{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-mc-t small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.82rem}
.dp-mc-t small .ic{width:14px;height:14px}
.dp-mc-t .stars{font-size:.85rem}
.dp-mc>.ic{flex:none;width:18px;height:18px;color:var(--muted)}
@media(max-width:1180px){
  .dp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-stats>div:nth-child(3){border-left:0}
  .dp-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .dp-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dp-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .dp-top-in{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"intro" "book" "stats" "about" "port";padding-bottom:28px}
  .dp-hero{position:relative;width:auto;height:240px;margin-bottom:-120px}
  .dp-hero img{-webkit-mask-image:none;mask-image:none}
  .dp-hero{-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
  .dp-book{margin-top:6px}
}
@media(max-width:640px){
  .dp-head{gap:16px;align-items:flex-start}
  .dp-ava{width:84px;height:84px;font-size:1.6rem}
  .dp-id h1{font-size:1.9rem}
  .dp-stats>div{padding:14px;gap:10px}
  .dp-si .ic{width:22px;height:22px}
  .dp-pgrid,.dp-port .dp-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dp-pc-b{padding:12px}
  .dp-pc-b h3{font-size:.98rem}
  .dp-pc-b .btn{white-space:normal;padding:9px 10px;font-size:.85rem}
  .dp-rv{gap:20px 24px}
  .dp-rv-score big{font-size:3.4rem}
  .dp-rv-score .fine{max-width:120px;font-size:.8rem}
  .dp-rv .bars{gap:8px}
  .dp-rv .bars div{grid-template-columns:12px 1fr 34px;gap:8px;font-size:.82rem}
  .dp-more{grid-template-columns:1fr}
  .dp-book{padding:20px}
}
/* Jump targets land below the sticky header instead of under it. */
.panel,#pay-panel,#chat-panel,#measurements,#buyer-measurements{scroll-margin-top:84px}
/* My store: "Your store link" strip with the Copy my store link button */
.ms-link{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin:-8px 0 22px}
.ms-link-l{font-size:.82rem;font-weight:600;color:var(--muted)}
.ms-link-u{font-weight:600;color:var(--ink);word-break:break-all;flex:1;min-width:0}
@media(max-width:640px){.ms-link{order:2;margin:0}.ms-link .btn{width:100%}}
/* The order card you just came back from (see focusOrderCard in app.js). */
.oc-card.oc-flash{animation:oc-flash 2.2s ease-out}
@keyframes oc-flash{0%,35%{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-s)}100%{}}
@media (prefers-reduced-motion:reduce){.oc-card.oc-flash{animation:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-s)}}
/* Completed order: locked, read-only record card (orderRecordPanel) */
.ord-record{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok);margin-bottom:16px}
.ord-record h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1rem;color:var(--ok)}
.ord-record h3 svg{width:18px;height:18px}
.ord-record .sub{margin:0 0 12px}
.ord-record-acts{gap:8px;flex-wrap:wrap;justify-content:flex-start}
.ord-record-acts .btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.ord-locked-tag{font-family:var(--sans);font-weight:600;display:inline-flex;align-items:center;gap:5px;vertical-align:middle;font-size:.78rem;margin-left:8px}
.ord-locked-tag svg{width:13px;height:13px}

/* Seamesy support chat (private Seamesy <-> buyer/designer chat per order) */
.sup-modal{max-width:520px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.sup-head{position:relative;display:flex;align-items:center;gap:12px;padding:18px 64px 14px 18px;border-bottom:1px solid var(--line)}
.sup-head h2{margin:0;font-size:1.15rem}
.sup-head .fine{margin:2px 0 0}
.sup-head .modal-x{top:50%;transform:translateY(-50%)}
.msg-ava.sup-ava{background:#1F3D33;color:#F3E3C3;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.sup-head .sup-ava{width:38px;height:38px;font-size:1rem}
.msgs.sup-msgs{height:auto;min-height:220px;max-height:48vh;flex:1 1 auto;padding:18px}
.msg.d.sup-msg{background:#FFF6E3;color:#2A2A2A;border:1px solid #E7C98A}
.sup-who{display:block;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#1F3D33;margin-bottom:4px}
.sup-empty{margin:auto;text-align:center;max-width:320px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.92rem;line-height:1.5}
.sup-empty b{color:var(--ink);font-size:1rem}
.chat-in.sup-in textarea{min-height:76px;max-height:200px;resize:none}
.sup-banner{display:flex;align-items:center;gap:12px;width:calc(100% - 28px);margin:12px 14px 0;padding:12px 14px;border:1px solid #E7C98A;background:#FFF6E3;border-radius:14px;color:#2A2A2A;text-align:left;font:inherit;cursor:pointer}
.sup-banner .sup-ava{width:32px;height:32px;font-size:.85rem}
.sup-banner>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-banner small{color:#6b5a3a;font-size:.8rem}
.sup-banner-go{font-weight:700;font-size:.85rem;color:#1F3D33;text-decoration:underline;text-underline-offset:3px}
.sup-banner-side{width:100%;margin:0 0 14px}
@media(min-width:1101px){.sup-banner-side{display:none}}
.sup-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C2410C;margin-left:4px;vertical-align:middle}
@media(max-width:700px){
  .piece-modal-backdrop:has(.sup-modal){padding:0;align-items:flex-end}
  .sup-modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh}
  .msgs.sup-msgs{max-height:none;min-height:40vh}
}
/* Pidgin tips: optional second line under designer tips (see PIDGIN in app.js) */
.pidgin-toggle{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:4px 10px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.pidgin-toggle::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.pidgin-toggle.on{color:var(--gold-t);border-color:var(--gold);background:var(--gold-s)}
.pidgin-toggle.on::before{background:currentColor}
.pidgin-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pidgin-line{display:block;margin-top:6px;padding-left:8px;border-left:2px solid var(--gold);color:var(--ink);font-style:normal}
.pidgin-tag{display:inline-block;margin-right:4px;padding:0 6px;border-radius:999px;background:var(--gold-s);color:var(--gold-t);font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:1px}
.pidgin-pref{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:12px}
.pidgin-pref .pidgin-toggle{margin:0}
.pidgin-banner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:14px 0 0;padding:10px 14px;border:1px dashed var(--line2);border-radius:14px;background:var(--surface)}
.pidgin-banner.on{border-style:solid;border-color:var(--gold);background:var(--gold-s)}
.pidgin-banner .pidgin-toggle{margin:0}
.pidgin-banner .pidgin-jump{margin-left:auto}
.pidgin-banner .pidgin-jump .ic{width:14px;height:14px}
.ms-bubble .pidgin-line{color:inherit;border-left-color:var(--gold)}
.ms-tip .pidgin-line{font-size:.8rem;margin-top:4px}
@media (max-width:600px){.pidgin-banner .pidgin-jump{margin-left:0}}
/* Overdue orders (kiki, 21 Oct 2026): the completion date turns red with a
   "Due today" / "Overdue" badge once it arrives and the order hasn't shipped. */
.eta-red,.eta-red b{color:var(--err)}
.st.eta-badge{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.st.eta-badge svg{width:13px;height:13px;flex:none}
.ord-head2 .st.eta-badge{font-size:.72rem;padding:2px 9px;margin-left:2px}
.overdue-panel{border:1px solid var(--gold);background:linear-gradient(var(--gold-s),var(--gold-s)),var(--surface)}
.overdue-panel.late{border-color:var(--err);background:linear-gradient(var(--err-s),var(--err-s)),var(--surface)}
.overdue-panel h3{color:var(--text)}
.sup-event{align-self:center;margin:6px 0;font-size:.78rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 14px;text-align:center}
.sup-event.closed{color:#22603F;background:#E3F1E8;border-color:#BFE0CC}
.sup-closed-note{margin:8px 16px 0;padding:9px 12px;border-radius:10px;background:#E3F1E8;color:#22603F;font-size:.85rem;line-height:1.45}

/* Quote expiry, customs delay, anti-wardrobing notice, group orders (22 Oct 2026) */
.quote-clock{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--gold-s);color:var(--gold-t);font-size:.88rem;line-height:1.45}
.quote-clock .ic{flex:none;width:18px;height:18px;margin-top:1px}
.quote-expired{border-color:var(--err)}
.quote-expired h3{display:flex;align-items:center;gap:8px;color:var(--err)}
.wardrobe-banner{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border:2px solid var(--err);border-radius:12px;background:var(--err-s);color:var(--text)}
.wardrobe-banner .ic{flex:none;width:20px;height:20px;margin-top:1px;color:var(--err)}
.wardrobe-banner p{margin:0;font-size:.9rem;line-height:1.5}
.wardrobe-banner b{color:var(--err)}
.flow-body .wardrobe-banner{margin:4px 0 10px}
.ship-delay-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--gold-s);color:var(--text)}
.ship-delay-note .ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gold-t)}
.ship-delay-note p{margin:0;font-size:.88rem;line-height:1.5}
.ship-delay-form{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.ship-delay-form textarea{width:100%;box-sizing:border-box}
.group-panel h3{display:flex;align-items:center;gap:8px}
.group-link{display:block;width:100%;box-sizing:border-box;margin-top:10px;font-size:.85rem}
.group-h{margin:18px 0 8px;font-size:.92rem}
.group-list{list-style:none;margin:0;padding:0}
.group-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.group-list li:last-child{border-bottom:0}
.group-list li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-tick{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface2);color:var(--muted)}
.group-tick.on{background:var(--ok-s);color:var(--ok)}
.group-tick .ic{width:14px;height:14px}
.group-join .group-design{margin:16px 0 8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.group-join .group-design .thumbs{margin-bottom:12px}
.group-join .group-design .quotebox{margin:0}
.wiz-sub{font-size:1.1rem;font-weight:600;margin:26px 0 10px}

/* Measurements quick view (24 Oct 2026). The buyer's button sits in their
   "Your measurements" card under the chat; on phones that card is on the
   Messages screen, so the order summary carries a copy there. */
@media(min-width:1101px){.ord-mv-phone{display:none!important}}
.mv-list{margin:0;padding-left:18px;columns:2;column-gap:24px}
.mv-list li{margin:2px 0;break-inside:avoid}
@media(max-width:480px){.mv-list{columns:1}}
.hub-note b .ic{width:16px;height:16px;vertical-align:-3px}
.oc-side{margin:18px 0 0}

/* buyer's "Need to cancel?" link on the order page: deliberately quiet */
.cancel-help{margin:18px 2px 4px;color:var(--muted)}
.cancel-help>summary{cursor:pointer;font-size:.85rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;list-style:none}
.cancel-help>summary::-webkit-details-marker{display:none}

/* request matches: add-on filter the buyer can untick */
.addon-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px}
.chip[data-act=addon],.chip[data-act=match-drop-addon]{display:inline-flex;align-items:center;gap:6px}
/* Measurement sanity-check banner (designer-only, never blocks anything) */
.m-warn{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--gold-s);color:var(--ink);font-size:.9rem;line-height:1.45}
.m-warn>svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gold-t)}
.m-warn b{color:var(--gold-t)}
.m-warn ul{margin:6px 0 6px;padding-left:18px;list-style:disc}
.m-warn li{margin:2px 0}
.m-warn .fine{display:block}
.m-warn .link{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--gold-t);text-decoration:underline;cursor:pointer}