/* Shared customer and owner interface palette. Artwork colors are never altered. */
:root {
  color-scheme: light;
  --bg:#faf8f2; --bg-2:#ffffff; --bg-3:#eef4ef;
  --ink:#203c39; --muted:#526762; --dim:#61726b;
  --line:#d5dfd8; --gold:#176e64; --gold-2:#986c34;
  --danger:#ad3439; --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --ui:"Segoe UI",system-ui,-apple-system,sans-serif;
}
body.fomo-friendly { background:var(--bg); color:var(--ink); line-height:1.6; font-family:var(--ui); }
.fomo-enter .card { padding:clamp(1.2rem,4vw,2.5rem); border:1px solid var(--line); }
.fomo-friendly :is(h1,h2,h3) { font-family:var(--ui); letter-spacing:-.035em; font-weight:650; }
.fomo-friendly :is(h1,h2) { line-height:1.12; }
.fomo-friendly a { color:var(--gold); text-underline-offset:3px; }
.fomo-friendly :is(button,.btn,.go,.btnish,.chip,.who a,.nav a,.tab) { font-family:var(--ui); text-transform:none; letter-spacing:0; }
.fomo-friendly :is(.btn,.go,.btnish) { border-radius:12px; font-size:.88rem; padding:.65rem 1rem; min-height:42px; }
.fomo-friendly :is(.btn,.chip,.tab,.go,a) { transition:background-color .15s ease,border-color .15s ease; }
.fomo-friendly :is(.btn.solid,.go,.actions .go,.q-card .approve,.chip.on,.who-up) { background:#176e64; color:#fff; border-color:#176e64; }
.fomo-friendly :is(.btn.solid,.go,.actions .go,.who-up):hover { background:#10594f; color:white; }
.fomo-friendly .who-up { padding:.5rem .85rem; border-radius:10px; text-decoration:none; }
.fomo-friendly :is(.who-in,.who-more,.who-cart) { color:var(--ink); font-size:.82rem; }
.fomo-friendly :is(.who-cart,.view-side-label,.view-side-nav) { background:#edf4ef; border-color:var(--line); color:var(--gold); }
.fomo-friendly .mark { font-family:var(--ui); letter-spacing:.12em; font-weight:750; font-size:.85rem; color:var(--ink); white-space:nowrap; }
.fomo-friendly :is(.site-bar,.site-bar.scrolled,.top) { background:rgba(250,248,242,.97); border-color:var(--line); }
.fomo-friendly .site-bar { position:sticky; top:0; padding:1rem 0; box-shadow:0 1px 0 var(--line); }
.fomo-friendly .bar-inner { gap:1rem; flex-wrap:wrap; }
.fomo-friendly .who { gap:.7rem; flex-wrap:wrap; }
.fomo-friendly :is(.card,.rack-card,.tile,.stat,.q-card,.style-card,.gate-card,.cart-sheet,.image-controls) { background:#fff; border-color:var(--line); box-shadow:0 5px 22px rgba(32,60,57,.035); }
.fomo-friendly :is(.rack-card,.card,.style-card) { border-radius:18px; }
.fomo-friendly :is(.hint,.lede,.meta,.empty,.rack-empty) { color:var(--muted); }
.fomo-friendly :is(.empty,.rack-empty) { padding:1.4rem; background:#edf4ef; border-radius:14px; }
.fomo-friendly :is(.kicker,.meta,.badge) { letter-spacing:.06em; }
.fomo-friendly input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.fomo-friendly :is(select,textarea) { background:#fff !important; color:var(--ink) !important; border:1px solid #a8bbb1 !important; border-radius:9px; font:inherit; }
.fomo-friendly input::placeholder,.fomo-friendly textarea::placeholder { color:#687c73; opacity:1; }
.fomo-friendly input[type=checkbox] { accent-color:#176e64; }
.fomo-friendly :focus-visible { outline:3px solid #197b70 !important; outline-offset:3px; }
.fomo-friendly :is(.bad,.hot,.danger,.err) { color:#ad3439; }
.fomo-friendly :is(.ok,.good) { color:#176e64; }
.fomo-friendly :is(.warn,.flag) { color:#805517; }
.fomo-friendly .foot { color:var(--muted); border-color:var(--line); padding-top:2rem; padding-bottom:2rem; }
.fomo-friendly :is(.foot a,.list span) { color:var(--muted); }
.fomo-friendly :is(.cart-sheet,.gate-card) { color:var(--ink); }
.fomo-friendly .cart-sheet :is(button,input,select) { font:inherit; }
.fomo-friendly .cart-drawer { background:rgba(20,40,37,.4); }
.fomo-friendly .shop-hero { padding-top:3rem; }
.fomo-friendly .shop-hero h1 { font-size:clamp(2.2rem,5vw,3.8rem); }
.fomo-friendly .shop-card .add { background:#176e64; color:white; border-color:#176e64; letter-spacing:0; text-transform:none; min-height:38px; }
.fomo-friendly .shop-card .row select { min-width:0; }
.fomo-friendly .shop-filters .chip { font-size:.85rem; }
.fomo-friendly .rack-card .body { padding:1rem; }
.fomo-friendly .rack-card .body strong { font-family:var(--ui); font-weight:600; }
.fomo-friendly .rack-card .body span { color:var(--muted); }
.fomo-friendly :is(.actions .go,.go) { color:white !important; }
.fomo-friendly .top { gap:1rem; flex-wrap:wrap; }
/* Studio chrome stays light; garment photos, artwork and color swatches stay original. */
.fomo-studio .bar { background:#faf8f2; border-bottom:1px solid var(--line); }
.fomo-studio :is(.rail,.browse,.browse-head) { background:#faf8f2; }
.fomo-studio .stage-wrap { background:#e7ede7; }
.fomo-studio :is(.garment.active,.swatch-row.active,.cat.on,.tool-tabs .tab.on,.view-toggle button.on) { background:#e4f1e9; color:#135d52; border-color:#176e64; }
.fomo-studio .view-toggle { background:#fff; border-color:#b9cbc1; box-shadow:0 4px 14px #203c3915; }
.fomo-studio .view-toggle button { font-size:.8rem; letter-spacing:0; text-transform:none; }
.fomo-studio .btn { padding:.45rem .65rem; font-size:.8rem; min-height:34px; }
.fomo-studio .bar-actions { flex-wrap:wrap; }
.fomo-studio :is(.tab,.family button,.chip) { font-size:.78rem; }
.fomo-studio .image-controls { background:#fff; padding:.9rem; }
.fomo-studio .image-actions .btn { font-size:.74rem; }
.fomo-studio .layer.active { background:#edf7f0; }
.fomo-studio .layer button { color:var(--ink); }
.fomo-studio .layer .x { color:var(--danger); }
.fomo-studio .gate { background:rgba(20,40,37,.55); }
.fomo-studio .toast { background:#203c39; color:#fff; }
.fomo-studio .busy { background:rgba(250,248,242,.9); color:var(--ink); }
/* Homepage: an open invitation, with original FOMO garment photography. */
.welcome-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding:4rem 0; }
.welcome-copy h1 { font-size:clamp(2.6rem,5.3vw,4.6rem); margin:1rem 0 1.5rem; max-width:12ch; }
.welcome-copy h1 span { color:#176e64; }
.welcome-copy .lede { font-size:1.12rem; max-width:40ch; line-height:1.7; }
.welcome-copy .actions { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.7rem 0 1rem; }
.welcome-note { color:var(--muted); font-size:.88rem; }
.welcome-photo { margin:0; position:relative; background:#e5ece4; border-radius:32px; padding:1rem; transform:rotate(2deg); }
.welcome-photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:23px; }
.welcome-photo figcaption { position:absolute; bottom:2.3rem; left:-1.4rem; background:white; color:var(--ink); padding:.85rem 1.15rem; border-radius:14px; box-shadow:0 8px 30px #203c391c; font-weight:600; transform:rotate(-2deg); }
.welcome-pill { display:inline-block; border:1px solid #c4d9ca; border-radius:99px; background:#edf5eb; color:#175e52; padding:.3rem .75rem; font-size:.85rem; }
.welcome-home .section-h { max-width:720px; margin-bottom:2rem; }
.welcome-home .section-h h2 { font-size:clamp(1.8rem,3vw,2.7rem); margin:.5rem 0 .8rem; }
.welcome-home section.wrap:not(.welcome-hero) { padding-top:2.5rem; padding-bottom:2.5rem; }
.welcome-home .grid-3 { gap:1.2rem; }
.welcome-home .card { padding:1.7rem; }
.welcome-home .card .n { color:#176e64; background:#edf5eb; border-radius:50%; width:40px; height:40px; display:grid; place-items:center; font-size:.85rem; }
.welcome-home .card p { color:var(--muted); }
.welcome-home .welcome-banner { padding:2.5rem; background:#e8f2e8; border:1px solid #cedfce; border-radius:24px; display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.welcome-banner h2 { margin:.3rem 0 .7rem; font-size:2rem; }
.welcome-banner p { margin:0; max-width:52ch; color:var(--muted); }
.welcome-banner .btn { white-space:nowrap; }
@media(max-width:980px) {
 .fomo-studio .app { grid-template-rows:auto auto 1fr; }
 .fomo-studio .bar { height:auto; min-height:64px; flex-wrap:wrap; padding:.7rem; gap:.7rem; }
 .fomo-studio .bar-actions { gap:.4rem; }
 .fomo-studio .bar-mid { order:3; width:100%; }
}
@media(max-width:640px) {
 .welcome-hero { grid-template-columns:1fr; padding:2.2rem 0; gap:2rem; }
 .welcome-copy h1 { max-width:14ch; }
 .welcome-photo { transform:none; margin:.3rem .5rem 0; }
 .welcome-photo img { aspect-ratio:1.2; }
 .welcome-photo figcaption { left:.5rem; bottom:1.5rem; transform:none; }
 .welcome-home .welcome-banner { padding:1.5rem; flex-direction:column; align-items:flex-start; gap:1rem; }
 .fomo-friendly .who { gap:.45rem; }
 .fomo-friendly .who a { font-size:.78rem; }
 .fomo-friendly .site-bar { padding:.8rem 0; }
 .fomo-friendly .shop-hero { padding-top:2rem; }
 .fomo-friendly .shop-filters { flex-wrap:wrap; }
 .fomo-friendly .top .nav { display:flex; flex-wrap:wrap; gap:.5rem; }
 .fomo-friendly .top .nav a { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .fomo-friendly * { transition:none !important; } }

/* Fixed thumbnail viewport prevents intrinsic SVG dimensions covering card labels. */
.fomo-studio .style-card .thumb { width:100%; height:190px; min-height:190px; flex:0 0 190px; overflow:hidden; position:relative; background:#eef3ec; padding:12px; box-sizing:border-box; }
.fomo-studio .style-card .thumb img { display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; }
.fomo-studio .style-card .body { position:relative; background:#fff; flex:1; width:100%; box-sizing:border-box; padding:1rem; }
.fomo-studio .style-card b { line-height:1.4; }
.fomo-studio .style-card .body > span { line-height:1.55; }