/* =========================================================
   BASE TOKENS (overridden per mockup via body class)
   Brand colours stay constant; surface colours change.
   NO gradients anywhere — solid fills only.
   ========================================================= */
:root{
  --green:#4e8c0e;
  --green-dark:#3d6e0a;
  --orange:#e67300;
  --orange-dark:#c56100;
  --red:#dc4040;
  --blue:#3399cc;
  --blue-dark:#2582b3;
  --navy:#025077;
  --yellow:#f4c430;

  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;

  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;

  /* Fixed header offset — body gets padding-top this amount so content starts below the header */
  --tg-header-h:66px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.45}
html{min-height:100%}
body{background:var(--bg);color:var(--text);padding-top:var(--tg-header-h)}
/* Sticky footer — body is a flex column so <main> fills remaining height and <footer> sits at the bottom even on short pages. */
body.page-v6{display:flex;flex-direction:column;min-height:100vh}
body.page-v6 > main,body.page-v6 > .wrap{flex:1 0 auto}
body.page-v6 > footer,body.page-v6 > .tg-footer{flex-shrink:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:0;color:inherit}
ul{list-style:none}

/* =========================================================
   REVIEWER TABS
   ========================================================= */
.reviewer{
  position:sticky;top:0;z-index:500;background:#0f172a;color:#fff;
  padding:10px 18px;display:flex;align-items:center;gap:10px;
}
.reviewer__title{font-weight:700;font-size:13px}
.reviewer__badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;background:#334155}
.reviewer__spacer{flex:1}
.reviewer__tabs{display:flex;gap:4px;overflow:auto}
.reviewer__tab{padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;color:#cbd5e1;white-space:nowrap}
.reviewer__tab:hover{background:rgba(255,255,255,.08);color:#fff}
.reviewer__tab.is-active{background:#4e8c0e;color:#fff}

.mockup{display:none}
.mockup.is-active{display:block}

/* =========================================================
   PER-MOCKUP PALETTES (all use white header)
   ========================================================= */
/* M1 — Brand Classic: white + green primary + orange secondary */
body.palette-m1{
  --bg:#ffffff;
  --surface:#f7f9fa;
  --surface-2:#eef2f6;
  --line:#e5e7eb;
  --text:#0f172a;
  --text-mute:#475569;
  --text-dim:#64748b;
  --accent-a:var(--green);     /* Sell */
  --accent-a-dark:var(--green-dark);
  --accent-a-soft:#eaf5dd;
  --accent-b:var(--orange);    /* Buy */
  --accent-b-dark:var(--orange-dark);
  --accent-b-soft:#fdecd9;
  --brand:var(--green);
  --shirt-color:#0f172a;
}
/* M2 — Cream & Navy */
body.palette-m2{
  --bg:#f6efdf;
  --surface:#ffffff;
  --surface-2:#f0e7d2;
  --line:#e6dcc4;
  --text:#1e2b3a;
  --text-mute:#4f5d6c;
  --text-dim:#6b7482;
  --accent-a:#025077;          /* Sell — navy */
  --accent-a-dark:#013e5c;
  --accent-a-soft:#d9e8f0;
  --accent-b:#c06f52;          /* Buy — terracotta */
  --accent-b-dark:#a3573c;
  --accent-b-soft:#f1dacf;
  --brand:#025077;
  --shirt-color:#1e2b3a;
}
/* M3 — Monochrome + single green pop */
body.palette-m3{
  --bg:#ffffff;
  --surface:#fafafa;
  --surface-2:#f0f0f0;
  --line:#e4e4e7;
  --text:#0f0f12;
  --text-mute:#3f3f46;
  --text-dim:#71717a;
  --accent-a:#0f0f12;          /* Sell — near black */
  --accent-a-dark:#000;
  --accent-a-soft:#e4e4e7;
  --accent-b:#4e8c0e;          /* Buy — brand green */
  --accent-b-dark:#3d6e0a;
  --accent-b-soft:#eaf5dd;
  --brand:#0f0f12;
  --shirt-color:#0f0f12;
}
/* M4 — Mint Studio: very light mint bg, navy ink, brand green + red accents */
body.palette-m4{
  --bg:#ecf6ec;
  --surface:#ffffff;
  --surface-2:#dceedd;
  --line:#cfe1d0;
  --text:#0f2a16;
  --text-mute:#2f5138;
  --text-dim:#4b6654;
  --accent-a:#4e8c0e;          /* Sell */
  --accent-a-dark:#3d6e0a;
  --accent-a-soft:#d8ecc1;
  --accent-b:#dc4040;          /* Buy */
  --accent-b-dark:#b63535;
  --accent-b-soft:#fadcdc;
  --brand:#4e8c0e;
  --shirt-color:#0f2a16;
}
/* M5 — Sunny Sand: warm cream, orange primary, navy secondary */
body.palette-m5{
  --bg:#fdf5e6;
  --surface:#ffffff;
  --surface-2:#f7e9cc;
  --line:#eadfc4;
  --text:#2a1f12;
  --text-mute:#5a4a33;
  --text-dim:#7a6a50;
  --accent-a:#e67300;          /* Sell — orange */
  --accent-a-dark:#c56100;
  --accent-a-soft:#fde1c4;
  --accent-b:#025077;          /* Buy — navy */
  --accent-b-dark:#013e5c;
  --accent-b-soft:#c9dde7;
  --brand:#e67300;
  --shirt-color:#2a1f12;
}

/* =========================================================
   WHITE HEADER (shared)
   ========================================================= */
.tg-context{
  background:#0f172a;color:#cbd5e1;font-size:12px;padding:7px 0;
}
.tg-context .wrap{display:flex;justify-content:space-between;gap:20px;padding:0 36px;max-width:1440px;margin:0 auto}
.tg-context__ship i{color:var(--yellow);margin-right:6px}
.tg-context a{color:#cbd5e1}
.tg-context a:hover{color:#fff}

.tg-header{background:#fff;padding:14px 0;border-bottom:1px solid #e5e7eb;position:fixed;top:0;left:0;right:0;z-index:500;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tg-header .wrap{max-width:1440px;margin:0 auto;padding:0 36px;display:grid;grid-template-columns:auto 1fr auto auto;gap:28px;align-items:center}
.tg-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:#0f172a}
.tg-logo__mark{width:38px;height:38px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff}
.tg-logo__mark i{font-size:18px}
.tg-logo b{color:var(--brand)}
.tg-logo__tag{display:block;font-size:10px;font-weight:500;color:#64748b;letter-spacing:.04em;margin-top:-2px}

.tg-nav{display:flex;gap:4px}
.tg-nav a{padding:10px 14px;border-radius:6px;font-weight:600;font-size:14px;color:#334155}
.tg-nav a:hover{background:#f1f5f9;color:#0f172a}
.tg-nav a.is-active{color:var(--brand)}

.tg-search{display:flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e5e7eb;padding:8px 14px;border-radius:22px;min-width:240px}
.tg-search input{background:0;border:0;outline:0;font-size:14px;width:100%;color:#0f172a}
.tg-search input::placeholder{color:#94a3b8}
.tg-search i{color:#94a3b8}

.tg-cta{display:flex;gap:10px;align-items:center}
.btn{padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s;border:1px solid transparent}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--accent-a-dark)}
.btn-a{background:var(--accent-a);color:#fff}
.btn-a:hover{background:var(--accent-a-dark)}
.btn-b{background:var(--accent-b);color:#fff}
.btn-b:hover{background:var(--accent-b-dark)}
.btn-ghost{color:#334155}
.btn-ghost:hover{background:#f1f5f9}
.btn-outline{background:#fff;border-color:var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-lg{padding:14px 22px;font-size:15px}

/* =========================================================
   HERO — slogan + shirt preview + path toggle at BOTTOM
   ========================================================= */
.hero{background:var(--hero-bg, var(--bg));padding:30px 0 0;transition:background .35s ease}
/* Mode-specific hero backgrounds — wash the whole top section */
body.mode-sell   {--hero-bg:#eaf5dd}
body.mode-buy    {--hero-bg:#fdecd9}
body.mode-market {--hero-bg:#efe3f7}
body.mode-brand  {--hero-bg:#dbeafe}
/* Mode accent colours used by the path toggle + preview stubs */
:root{
  --mode-market:#7c3aed; --mode-market-dark:#6d28d9; --mode-market-soft:#efe3f7;
  --mode-brand: #2563eb; --mode-brand-dark: #1d4ed8; --mode-brand-soft: #dbeafe;
}
.hero__top{max-width:1440px;margin:0 auto;padding:0 36px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.hero__kicker{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--accent-a-soft);color:var(--accent-a-dark);
  border-radius:100px;font-size:13px;font-weight:700;margin-bottom:22px;
}
.hero h1{font-size:64px;line-height:1;font-weight:900;letter-spacing:-.02em;margin-bottom:20px;color:var(--text)}
.hero h1 em{font-style:normal;color:var(--accent-a)}
.hero h1 u{text-decoration:none;color:var(--accent-b)}
.hero__lead{font-size:18px;color:var(--text-mute);margin-bottom:28px;max-width:520px}
.hero__trust{display:flex;gap:26px;padding-top:22px;border-top:1px solid var(--line)}
.hero__trust b{font-size:22px;font-weight:900;color:var(--text);line-height:1}
.hero__trust small{display:block;font-size:12px;color:var(--text-dim);margin-top:3px}

/* Hero preview card — shows a real photo of a model wearing a tee */
.preview{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;
  aspect-ratio:3/4;max-width:520px;justify-self:end;width:100%;
  overflow:hidden;
}
.preview-photo{
  width:100%;height:100%;object-fit:cover;display:block;
}

.preview-overlay{
  position:absolute;bottom:20px;left:20px;right:20px;
  background:#ffffffc4;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.preview-overlay i{
  width:40px;height:40px;border-radius:10px;background:var(--accent-a-soft);
  color:var(--accent-a);display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.preview-overlay b{display:block;font-size:14px;font-weight:800;color:var(--text);line-height:1.2}
.preview-overlay span{display:block;font-size:12px;color:var(--text-mute);margin-top:3px;line-height:1.3}

.preview-price{
  position:absolute;top:22px;right:22px;background:var(--yellow);color:#2a1f12;
  border-radius:12px;padding:10px 14px;font-weight:900;font-size:18px;line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.preview-price small{display:block;font-size:10px;font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.06em}

/* Path toggle — positioned at the TOP of the hero so the mode
   choice is the first decision the user makes on the page */
.hero__toggle-wrap{
  max-width:1440px;margin:0 auto;padding:0 36px 28px;
}
.hero__toggle-label{
  text-align:center;font-size:13px;font-weight:700;color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}
.hero__paths{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:1180px;margin:0 auto;
  padding:6px;background:rgba(255,255,255,.65);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(4px);
}
.path-btn{
  padding:14px 16px;border-radius:10px;text-align:left;
  background:transparent;color:var(--text-mute);font-weight:700;
  display:flex;align-items:center;gap:12px;transition:background .2s,color .2s,box-shadow .2s;
}
.path-btn i{font-size:20px;flex-shrink:0}
.path-btn b{display:block;font-size:14px;color:inherit;margin-bottom:2px}
.path-btn span{display:block;font-size:11px;font-weight:500;color:var(--text-dim);line-height:1.3}
.path-btn:hover{background:#fff;color:var(--text)}
body.mode-sell   .path-btn--sell  {background:var(--accent-a);    color:#fff}
body.mode-sell   .path-btn--sell   span{color:rgba(255,255,255,.85)}
body.mode-buy    .path-btn--buy   {background:var(--accent-b);    color:#fff}
body.mode-buy    .path-btn--buy    span{color:rgba(255,255,255,.85)}
body.mode-market .path-btn--market{background:var(--mode-market); color:#fff}
body.mode-market .path-btn--market span{color:rgba(255,255,255,.85)}
body.mode-brand  .path-btn--brand {background:var(--mode-brand);  color:#fff}
body.mode-brand  .path-btn--brand  span{color:rgba(255,255,255,.85)}

/* Flow bridge — static neutral bg; designer is visually isolated from mode choice */
.flow-bridge{height:30px;background:#f8fafc}

/* =========================================================
   DESIGNER — taller 11×15 print area, labeled tool buttons
   ========================================================= */
/* Designer section: static neutral bg — decoupled from mode choice */
.designer-section{padding:10px 0 70px;background:#f8fafc}
.designer-section__head{
  max-width:1340px;margin:0 auto 20px;padding:10px 36px 0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.designer-section__title{font-size:28px;font-weight:900;letter-spacing:-.01em;color:var(--text)}
.designer-section__title em{font-style:normal;color:var(--accent-a)}
body.mode-buy .designer-section__title em{color:var(--accent-b)}
.designer-section__sub{color:var(--text-mute);font-size:14px;margin-top:4px}

.designer{
  max-width:1340px;margin:0 auto;
  background:#fff;color:#0f172a;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.designer__topbar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #e5e7eb;background:#fff}
.designer__title{font-weight:700;font-size:14px;flex:1}
.designer__chips{display:flex;gap:6px}
.chip{padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;background:#f1f5f9;color:#475569}
.chip i{margin-right:5px}
.chip--live{background:#dcfce7;color:#166534}

/* Wider tool column with LABELS */
.designer__body{display:grid;grid-template-columns:150px 1fr 320px;min-height:640px}
.designer__tools{border-right:1px solid #e5e7eb;background:#f8fafc;padding:14px 10px;display:flex;flex-direction:column;gap:6px}
.designer__tool{
  width:100%;padding:12px 10px;border-radius:8px;
  background:#fff;border:1px solid #e5e7eb;color:#475569;
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;text-align:left;
}
.designer__tool i{width:18px;text-align:center;font-size:14px}
.designer__tool:hover{border-color:var(--accent-a);color:var(--accent-a)}
.designer__tool.is-active{background:var(--accent-a);border-color:var(--accent-a);color:#fff}
body.mode-buy .designer__tool:hover{border-color:var(--accent-b);color:var(--accent-b)}
body.mode-buy .designer__tool.is-active{background:var(--accent-b);border-color:var(--accent-b);color:#fff}

/* Canvas — taller (11×15 portrait print area) */
.designer__canvas{
  background-color:#f8fafc;
  background-image:
    linear-gradient(45deg,#edf2f7 25%,transparent 25%,transparent 75%,#edf2f7 75%),
    linear-gradient(45deg,#edf2f7 25%,#f8fafc 25%,#f8fafc 75%,#edf2f7 75%);
  background-size:28px 28px;background-position:0 0,14px 14px;
  display:grid;place-items:center;position:relative;padding:30px;
}
.canvas-shirt{width:100%;max-width:420px;filter:drop-shadow(0 8px 18px rgba(15,23,42,.08))}
/* 11:15 ratio = 0.733. Portrait print area, chest-centered */
.canvas-marquee{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-38%);
  width:165px;height:225px;
  border:2px dashed var(--accent-a);border-radius:4px;pointer-events:none;
}
body.mode-buy .canvas-marquee{border-color:var(--accent-b)}
.canvas-marquee::before{
  content:"";position:absolute;top:-6px;left:-6px;width:10px;height:10px;
  background:var(--accent-a);border-radius:2px;
}
body.mode-buy .canvas-marquee::before{background:var(--accent-b)}
.canvas-label{
  position:absolute;bottom:14px;left:14px;background:#fff;
  border:1px solid #e5e7eb;border-radius:6px;padding:6px 10px;
  font-size:11px;font-weight:600;color:#475569;
}
.canvas-label i{color:var(--accent-a);margin-right:5px}
body.mode-buy .canvas-label i{color:var(--accent-b)}
.canvas-ruler{
  position:absolute;top:14px;right:14px;background:#fff;
  border:1px solid #e5e7eb;border-radius:6px;padding:6px 10px;
  font-size:11px;font-weight:700;color:#475569;
}

.designer__panel{border-left:1px solid #e5e7eb;background:#fff;padding:18px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.panel-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:10px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e5e7eb;cursor:pointer}
.swatch.is-selected{box-shadow:0 0 0 2px var(--accent-a)}
body.mode-buy .swatch.is-selected{box-shadow:0 0 0 2px var(--accent-b)}

.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.size-btn{padding:10px 0;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;font-weight:700;background:#fff;color:#475569;text-align:center}
.size-btn.is-selected{background:var(--accent-b);border-color:var(--accent-b);color:#fff}
.size-btn:hover{border-color:var(--accent-b)}

.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.template{aspect-ratio:1;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc;display:grid;place-items:center;font-size:20px;color:#94a3b8}
.template:hover{border-color:var(--accent-a);color:var(--accent-a)}

.only-sell,.only-buy,.only-market,.only-brand{display:none}
body.mode-sell   .only-sell  {display:block}
body.mode-buy    .only-buy   {display:block}
body.mode-market .only-market{display:block}
body.mode-brand  .only-brand {display:block}
/* Designer section fallback: market reuses buy-style content,
   brand reuses sell-style content — keeps the tool functional for all modes */
body.mode-market .designer__panel .only-buy,
body.mode-market .designer-section__title .only-buy,
body.mode-market .designer-section__sub .only-buy{display:block}
body.mode-brand  .designer__panel .only-sell,
body.mode-brand  .designer-section__title .only-sell,
body.mode-brand  .designer-section__sub .only-sell{display:block}
/* Designer visuals stay static: no mode-driven bg/color overrides here */

.publish-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.publish-chip{padding:5px 9px;border:1px solid #e5e7eb;border-radius:20px;font-size:11px;font-weight:600;color:#475569;background:#fff}
.publish-chip i{margin-right:4px}

.price-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;display:flex;justify-content:space-between;align-items:center}
.price-card__main{font-size:22px;font-weight:800;color:#0f172a}
.price-card__sub{font-size:12px;color:#64748b}

/* =========================================================
   SUPPORT SECTIONS
   ========================================================= */
.section{max-width:1340px;margin:0 auto;padding:50px 36px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stats__cell{background:var(--surface);padding:24px;text-align:center}
.stats__cell i{font-size:22px;color:var(--brand);margin-bottom:8px;display:block}
.stats__cell b{font-size:28px;font-weight:900;color:var(--text);display:block;line-height:1}
.stats__cell span{font-size:13px;color:var(--text-mute)}

.markets{margin-top:50px}
.markets h2{font-size:28px;font-weight:900;margin-bottom:8px;text-align:center;color:var(--text)}
.markets p{text-align:center;color:var(--text-mute);margin-bottom:28px}
.markets__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.market-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;transition:border-color .2s,transform .2s}
.market-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.market-card i{font-size:28px;margin-bottom:8px;display:block;color:var(--brand)}
.market-card b{font-size:13px;color:var(--text);display:block}
.market-card span{font-size:11px;color:var(--text-dim)}

/* =========================================================
   FOOTER (same look user approved)
   ========================================================= */
.tg-footer{background:#0f172a;color:#94a3b8;padding:50px 0 24px}
.tg-footer .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
.tg-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.tg-footer h4{color:#fff;font-size:14px;margin-bottom:14px;font-weight:700}
.tg-footer ul li{margin-bottom:8px}
.tg-footer a{color:#94a3b8}
.tg-footer a:hover{color:#fff}
.tg-footer__bottom{border-top:1px solid #1f2937;padding-top:20px;display:flex;justify-content:space-between;font-size:13px}
.tg-footer .tg-logo{color:#fff}

/* =========================================================
   RESPONSIVE — tablet, small tablet, mobile
   ========================================================= */

/* Tablet landscape (≤ 1200px) */
@media (max-width:1200px){
  .tg-header .wrap{grid-template-columns:auto 1fr auto;gap:20px}
  .tg-nav{display:none}
  .markets__grid{grid-template-columns:repeat(4,1fr)}
}

/* Tablet (≤ 1024px) */
@media (max-width:1024px){
  .hero__top{grid-template-columns:1fr;gap:36px;padding:0 24px 30px}
  .hero h1{font-size:48px}
  .hero__lead{font-size:16px}
  .preview{justify-self:center;max-width:480px}
  .designer__body{grid-template-columns:140px 1fr}
  .designer__panel{grid-column:1 / -1;border-left:0;border-top:1px solid #e5e7eb}
  .markets__grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tg-search{min-width:180px}
  .section{padding:40px 24px}
  .designer-section__head{padding:10px 24px 0}
  .hero__paths{max-width:560px}
}

/* Small tablet / large phone (≤ 768px) */
@media (max-width:768px){
  .reviewer{padding:8px 12px;flex-wrap:wrap;gap:6px}
  .reviewer__title{font-size:12px}
  .reviewer__badge{font-size:9px}
  .reviewer__tabs{width:100%;padding-bottom:2px}
  .reviewer__tab{padding:6px 10px;font-size:11px}

  .tg-header{padding:10px 0}
  :root{--tg-header-h:56px}
  .tg-header .wrap{padding:0 16px;grid-template-columns:auto 1fr auto;gap:12px}
  .tg-search{display:none}
  .tg-logo{font-size:18px}
  .tg-logo__mark{width:32px;height:32px}
  .tg-logo__mark i{font-size:14px}
  .tg-logo__tag{display:none}
  .tg-cta .btn-ghost{display:none}
  .tg-cta .btn{padding:8px 14px;font-size:13px}

  .hero{padding-top:40px}
  .hero__top{padding:0 16px 20px;gap:28px}
  .hero h1{font-size:38px}
  .hero__kicker{font-size:12px;padding:5px 12px;margin-bottom:16px}
  .hero__lead{font-size:15px;margin-bottom:22px}
  .hero__trust{gap:18px;flex-wrap:wrap}
  .hero__trust b{font-size:18px}
  .hero__trust small{font-size:11px}

  .preview{border-radius:16px;aspect-ratio:4/5}
  .preview-overlay{left:12px;right:12px;bottom:12px;top:auto;padding:10px 12px;gap:10px}
  .preview-overlay i{width:34px;height:34px;font-size:15px}
  .preview-overlay b{font-size:13px}
  .preview-overlay span{font-size:11px}
  .preview-price{bottom:14px;right:14px;padding:8px 11px;font-size:15px}

  .hero__toggle-wrap{padding:0 16px 30px}
  .hero__toggle-label{font-size:12px;margin-bottom:10px}
  .hero__paths{grid-template-columns:1fr;gap:6px;padding:6px;border-radius:12px}
  .path-btn{padding:14px 16px;gap:12px}
  .path-btn i{font-size:18px}
  .path-btn b{font-size:14px}
  .path-btn span{font-size:11px}

  .designer-section__head{
    flex-direction:column;align-items:flex-start;gap:8px;padding:10px 16px 0;margin-bottom:14px;
  }
  .designer-section__head > div:last-child{font-size:11px}
  .designer-section__title{font-size:22px}
  .designer-section__sub{font-size:13px}
  .designer-section{padding:10px 0 40px}

  /* Designer stacks: tools become a scrollable horizontal row */
  .designer{margin:0 16px;max-width:none;border-radius:12px}
  .designer-section > div[style*="max-width:1340px"]{padding:0 !important}
  .designer__topbar{padding:10px 12px;flex-wrap:wrap;gap:8px}
  .designer__title{font-size:13px;flex:1 0 100%}
  .designer__chips{gap:4px}
  .chip{padding:5px 8px;font-size:11px}

  .designer__body{grid-template-columns:1fr;min-height:0}
  .designer__tools{
    order:2;border-right:0;border-top:1px solid #e5e7eb;
    flex-direction:row;overflow-x:auto;padding:10px;gap:6px;
    scrollbar-width:none;
  }
  .designer__tools::-webkit-scrollbar{display:none}
  .designer__tool{
    width:auto;flex:0 0 auto;padding:10px 12px;font-size:12px;white-space:nowrap;
  }
  .designer__canvas{order:1;padding:24px 16px;min-height:380px}
  .canvas-shirt{max-width:300px}
  .canvas-marquee{width:120px;height:164px;transform:translate(-50%,-38%)}
  .canvas-ruler,.canvas-label{font-size:10px;padding:4px 8px}
  .canvas-ruler{top:10px;right:10px}
  .canvas-label{bottom:10px;left:10px}
  .designer__panel{order:3;border-left:0;border-top:1px solid #e5e7eb;padding:16px;gap:16px}
  .sizes{grid-template-columns:repeat(5,1fr)}

  .section{padding:32px 16px}
  .stats{grid-template-columns:repeat(2,1fr);border-radius:12px}
  .stats__cell{padding:18px 12px}
  .stats__cell b{font-size:22px}
  .stats__cell span{font-size:12px}
  .markets{margin-top:32px}
  .markets h2{font-size:22px}
  .markets__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .market-card{padding:14px 10px}
  .market-card i{font-size:22px}
  .market-card b{font-size:12px}
  .market-card span{font-size:10px}

  .tg-footer{padding:36px 0 20px}
  .tg-footer .wrap{padding:0 16px}
  .tg-footer__grid{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
  .tg-footer__grid > div:first-child{grid-column:1 / -1}
  .tg-footer__bottom{flex-direction:column;gap:8px;text-align:center;font-size:12px}
}

/* Phone (≤ 480px) */
@media (max-width:480px){
  .hero h1{font-size:32px}
  .hero__kicker{font-size:11px}
  .hero__lead{font-size:14px}
  .hero__trust{gap:14px}
  .hero__trust > div{flex:1 0 40%}

  .preview{padding:16px}
  .preview-overlay{padding:8px 10px;gap:8px}
  .preview-overlay i{width:30px;height:30px;font-size:13px}
  .preview-overlay b{font-size:12px}
  .preview-overlay span{font-size:10px;line-height:1.25}

  .designer-section__head > div:last-child{display:none}

  .canvas-shirt{max-width:240px}
  .canvas-marquee{width:100px;height:136px}

  .sizes{grid-template-columns:repeat(5,1fr);gap:4px}
  .size-btn{font-size:12px;padding:8px 0}

  .stats{grid-template-columns:1fr}
  .markets__grid{grid-template-columns:1fr}

  .tg-footer__grid{grid-template-columns:1fr}
  .tg-footer__grid > div:first-child{grid-column:auto}
}

/* =========================================================
   PREVIEW STUBS — one per mode (image placeholder)
   User will swap in real imagery later
   ========================================================= */
.preview__stub{
  position:absolute;inset:0;display:none;
  place-items:center;padding:26px;
}
body.mode-sell   .preview__stub--sell  ,
body.mode-buy    .preview__stub--buy   ,
body.mode-market .preview__stub--market,
body.mode-brand  .preview__stub--brand {display:grid}

/* Sell: keep the existing hero-model.png photo */
.preview__stub--sell{padding:0}
.preview__stub--sell .preview-photo{width:100%;height:100%;object-fit:cover;display:block}

/* Buy: single shirt in a gift box */
.preview__stub--buy{background:linear-gradient(160deg,#fef3e6 0%,#fdd9aa 100%)}
.preview__stub--buy .stub__shirt{
  width:58%;max-width:260px;color:#0f172a;
  filter:drop-shadow(0 10px 24px rgba(15,23,42,.18));
}
.preview__stub--buy .stub__tag{
  position:absolute;right:30px;bottom:30px;background:#fff;border-radius:10px;
  padding:10px 14px;font-size:12px;font-weight:700;color:#c56100;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
}

/* Market: grid of 4 shirt thumbs */
.preview__stub--market{background:linear-gradient(160deg,#f5ecfa 0%,#d8c6e8 100%)}
.preview__stub--market .stub__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;width:80%;
}
.preview__stub--market .stub__tile{
  aspect-ratio:1;background:#fff;border-radius:12px;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.preview__stub--market .stub__tile svg{width:68%;height:68%}
.preview__stub--market .stub__tile:nth-child(1) svg{color:#0f172a}
.preview__stub--market .stub__tile:nth-child(2) svg{color:#dc4040}
.preview__stub--market .stub__tile:nth-child(3) svg{color:#025077}
.preview__stub--market .stub__tile:nth-child(4) svg{color:#4e8c0e}

/* Brand: team of 3 shirts with a flag/logo */
.preview__stub--brand{background:linear-gradient(160deg,#eaf1fb 0%,#c7d8ef 100%)}
.preview__stub--brand .stub__team{
  display:flex;gap:-10px;align-items:flex-end;
}
.preview__stub--brand .stub__team svg{
  width:140px;height:150px;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.15));
}
.preview__stub--brand .stub__team svg:nth-child(1){color:#2563eb;transform:translateX(18px) translateY(6px) scale(.9)}
.preview__stub--brand .stub__team svg:nth-child(2){color:#1d4ed8;z-index:2}
.preview__stub--brand .stub__team svg:nth-child(3){color:#2563eb;transform:translateX(-18px) translateY(6px) scale(.9)}
.preview__stub--brand .stub__crest{
  position:absolute;top:28px;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:100px;padding:8px 16px;font-size:12px;font-weight:800;color:#1d4ed8;
  box-shadow:0 6px 16px rgba(0,0,0,.1);letter-spacing:.04em;text-transform:uppercase;
}

/* Mode-specific overlay + price card tints */
body.mode-market .preview-overlay i{background:var(--mode-market-soft);color:var(--mode-market)}
body.mode-brand  .preview-overlay i{background:var(--mode-brand-soft); color:var(--mode-brand)}
body.mode-market .preview-price{background:var(--mode-market);color:#fff}
body.mode-brand  .preview-price{background:var(--mode-brand);color:#fff}

/* Extra accent: hero kicker tints per mode */
body.mode-market .hero__kicker{background:var(--mode-market-soft);color:var(--mode-market-dark)}
body.mode-brand  .hero__kicker{background:var(--mode-brand-soft); color:var(--mode-brand-dark)}
body.mode-market .hero h1 em{color:var(--mode-market)}
body.mode-brand  .hero h1 em{color:var(--mode-brand)}

/* 4-up path toggle responsive breakpoints */
@media (max-width:900px){
  .hero__paths{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .hero__paths{grid-template-columns:1fr}
}

/* =========================================================
   SHIRT STYLE PICKER (added v4) — trigger block + modal
   ========================================================= */
.style-picker{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:10px 12px;display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:border-color .15s;
}
.style-picker:hover{border-color:var(--accent-a)}
body.mode-buy .style-picker:hover{border-color:var(--accent-b)}
.style-picker__thumb{
  width:46px;height:46px;border-radius:8px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--text);flex-shrink:0;
}
.style-picker__thumb svg{width:78%;height:78%}
.style-picker__body{flex:1;min-width:0}
.style-picker__name{font-size:13px;font-weight:800;color:var(--text);line-height:1.2}
.style-picker__meta{font-size:11px;color:var(--text-mute);margin-top:3px}
.style-picker__chev{color:var(--text-mute);font-size:12px}

.shirt-modal{
  position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:900;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.shirt-modal.is-open{display:flex}
.shirt-modal__card{
  background:#fff;width:100%;max-width:940px;max-height:86vh;
  border-radius:14px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.shirt-modal__head{
  padding:18px 22px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:14px 16px;align-items:center;
}
.shirt-modal__title{font-size:18px;font-weight:800;color:var(--text)}
.shirt-modal__count{font-size:12px;color:var(--text-mute);font-weight:600;margin-left:10px}
.shirt-modal__count b{color:var(--text);font-weight:700}
.shirt-modal__close{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--text-mute);cursor:pointer;font-size:14px;
}
.shirt-modal__close:hover{background:var(--surface-2);color:var(--text)}
.shirt-modal__search{
  grid-column:1 / -1;display:flex;align-items:center;gap:8px;
  background:#f1f5f9;border:1px solid var(--line);padding:8px 14px;border-radius:22px;
}
.shirt-modal__search input{background:0;border:0;outline:0;width:100%;font-size:14px;color:var(--text)}
.shirt-modal__search i{color:#94a3b8}
.shirt-modal__filters{
  padding:10px 22px;border-bottom:1px solid var(--line);
  display:flex;gap:6px;flex-wrap:wrap;background:#f8fafc;
}
.shirt-modal__filters--scroll{
  flex-wrap:nowrap;overflow-x:auto;padding:8px 22px;scrollbar-width:thin;
}
.shirt-modal__filters--scroll::-webkit-scrollbar{height:6px}
.shirt-modal__filters--scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.shirt-modal__filter-label{
  font-size:11px;font-weight:700;color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.05em;align-self:center;
  margin-right:4px;flex-shrink:0;
}
.shirt-modal__filter{
  padding:6px 12px;border:1px solid var(--line);border-radius:100px;
  background:#fff;font-size:12px;font-weight:600;color:var(--text-mute);cursor:pointer;
  white-space:nowrap;flex-shrink:0;
}
.shirt-modal__filter.is-active{background:var(--accent-a);border-color:var(--accent-a);color:#fff}
body.mode-buy .shirt-modal__filter.is-active{background:var(--accent-b);border-color:var(--accent-b)}
.shirt-modal__body{overflow:auto;padding:18px 22px;flex:1;position:relative}
.shirt-modal__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;
}
.shirt-card{
  border:1px solid var(--line);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.shirt-card:hover{border-color:var(--accent-a);transform:translateY(-2px)}
body.mode-buy .shirt-card:hover{border-color:var(--accent-b)}
.shirt-card.is-selected{border-color:var(--accent-a);background:var(--accent-a-soft)}
body.mode-buy .shirt-card.is-selected{border-color:var(--accent-b);background:var(--accent-b-soft)}
.shirt-card__thumb{
  aspect-ratio:1;background:var(--surface-2);border-radius:8px;
  display:grid;place-items:center;color:var(--text-mute);
}
.shirt-card__thumb svg{width:70%;height:70%}
.shirt-card__name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.shirt-card__meta{font-size:11px;color:var(--text-mute);display:flex;justify-content:space-between}
.shirt-card__badges{display:flex;gap:6px;flex-wrap:wrap}
.shirt-card__badge{
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:var(--surface-2);color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em;
}
.shirt-card__badge--popular{background:#fdecd9;color:#a3573c}
.shirt-card__badge--colors{background:var(--accent-a-soft);color:var(--accent-a-dark)}
body.mode-buy .shirt-card__badge--colors{background:var(--accent-b-soft);color:var(--accent-b-dark)}
.shirt-modal__empty{padding:40px;text-align:center;color:var(--text-mute);font-size:14px}
.shirt-modal__loader{text-align:center;padding:14px;color:var(--text-mute);font-size:12px;display:none}
.shirt-modal__loader.is-visible{display:block}
.shirt-modal__sentinel{height:1px;margin-top:6px}
.shirt-modal__foot{
  padding:14px 22px;border-top:1px solid var(--line);background:#f8fafc;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.shirt-modal__foot-info{font-size:13px;color:var(--text-mute)}
.shirt-modal__foot-info b{color:var(--text)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:640px){
  .shirt-modal{padding:0}
  .shirt-modal__card{max-height:100vh;border-radius:0}
  .shirt-modal__head{flex-wrap:wrap;gap:10px}
  .shirt-modal__grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* =========================================================
   MOBILE ADDITIONS — hamburger drawer + v6 canvas + designer order
   Added after mockup import. Purely additive; the mockup had no
   mobile menu, so we design one to match its visual language.
   ========================================================= */

/* Hamburger button — hidden by default, shown only on mobile */
.tg-burger{
  display:none;
  width:40px;height:40px;border-radius:8px;
  background:transparent;border:1px solid #e5e7eb;
  padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  flex:0 0 auto;
}
.tg-burger span{
  display:block;width:20px;height:2px;background:#0f172a;border-radius:2px;
}
.tg-burger:hover{background:#f1f5f9}

/* Drawer backdrop — fixed full-screen, hidden by default via [hidden] attr */
.tg-drawer-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  z-index:998;opacity:0;
  transition:opacity .2s ease;
}
.tg-drawer-backdrop.is-open{opacity:1}

/* Drawer panel — slides in from right, off-screen by default */
.tg-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,85vw);
  background:#fff;z-index:999;
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;flex-direction:column;
  box-shadow:-6px 0 24px rgba(15,23,42,.18);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.tg-drawer.is-open{transform:translateX(0)}

.tg-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #e5e7eb;
  position:sticky;top:0;background:#fff;z-index:1;
}
.tg-drawer__head .tg-logo{font-size:18px}
.tg-drawer__head .tg-logo__mark{width:32px;height:32px}
.tg-drawer__head .tg-logo__mark i{font-size:14px}
.tg-drawer__close{
  width:36px;height:36px;border-radius:8px;
  background:#f1f5f9;display:grid;place-items:center;
  font-size:16px;color:#334155;flex:0 0 auto;
}
.tg-drawer__close:hover{background:#e2e8f0;color:#0f172a}

.tg-drawer__nav{
  display:flex;flex-direction:column;padding:10px 0;flex:1;
}
.tg-drawer__nav a{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;font-size:15px;font-weight:600;color:#334155;
  border-left:3px solid transparent;
}
.tg-drawer__nav a:hover{background:#f8fafc;color:#0f172a;border-left-color:var(--brand)}
.tg-drawer__nav a i{width:20px;text-align:center;color:var(--brand);font-size:15px}

.tg-drawer__cta{
  padding:14px 18px;border-top:1px solid #e5e7eb;
  display:flex;flex-direction:column;gap:10px;
}
.tg-drawer__cta .btn{justify-content:center}

/* body scroll-lock while drawer is open (JS also sets inline overflow as backup) */
body.menu-open{overflow:hidden}

/* v6 real-designer canvas stack — shirt + design layers sharing 2200x3000
   internal res, scaled down via CSS. The mockup used an SVG so had no
   rules for these classes. */
.v6-canvas-wrap{
  position:relative;
  width:min(420px, 100% - 32px);
  aspect-ratio:22/30;
  margin:0 auto;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  max-height:65vh;
}
.v6-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.v6-canvas--shirt{z-index:1}
.v6-canvas--design{z-index:2}

/* Mobile (≤768px): swap to flex header with burger, re-order designer */
@media (max-width:768px){
  /* Override mockup's grid header with a flex row so we can place the
     hamburger on the left regardless of DOM order. */
  .tg-header .wrap{
    display:flex;align-items:center;gap:10px;
    padding:0 16px;
    grid-template-columns:none;
  }
  .tg-burger{display:inline-flex;order:-1}
  .tg-logo{order:0;flex:1 1 auto;min-width:0}
  .tg-cta{order:2;flex:0 0 auto;margin-left:auto}
  .tg-nav,.tg-search{display:none}

  /* Designer on mobile reads top→bottom: tools → canvas → publish/CTA.
     Override the mockup's canvas-first ordering. */
  .designer__tools{order:1}
  .designer__canvas{order:2;padding:16px;min-height:0}
  .designer__panel{order:3}

  /* Tighter canvas cap on phones so the shirt doesn't dominate the viewport */
  .v6-canvas-wrap{max-height:55vh}
}

@media (max-width:480px){
  .v6-canvas-wrap{max-height:48vh}
  .tg-drawer__nav a{padding:12px 16px;font-size:14px}
}

/* ---------- Text tools panel (designer right column) ---------- */
.text-tools{
  display:flex;flex-direction:column;gap:10px;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;
  margin-top:10px;
}
.text-tools__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.text-tools__row--stack{flex-direction:column;align-items:stretch}
.text-tools__label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-mute);
}
.text-tools__text,
.text-tools__select,
.text-tools__field{
  width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:8px 10px;font-size:13px;color:var(--text);font-family:inherit;
  transition:border-color .15s;
}
.text-tools__text:focus,
.text-tools__select:focus,
.text-tools__field:focus{outline:none;border-color:var(--brand)}
.text-tools__field[type="color"]{padding:2px;height:34px;cursor:pointer}
.text-tools__field--num{max-width:90px}
.text-tools__align{
  display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.text-tools__align button{
  background:#fff;border:none;padding:8px 12px;cursor:pointer;color:var(--text-mute);
  font-size:13px;border-right:1px solid var(--line);
}
.text-tools__align button:last-child{border-right:none}
.text-tools__align button.is-active{background:var(--brand);color:#fff}
.text-tools__align button:hover:not(.is-active){background:var(--surface-2);color:var(--text)}

/* ---------- Templates modal ---------- */
.shirt-modal__card--narrow{max-width:540px}

.templates-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;padding:16px;overflow-y:auto;
}
.template-card{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;
}
.template-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.template-card__thumb{
  aspect-ratio:22/30;background:var(--surface-2);display:grid;place-items:center;
  overflow:hidden;
}
.template-card__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.template-card__body{padding:10px}
.template-card__title{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.template-card__meta{font-size:11px;color:var(--text-mute);margin-top:3px}

.templates-fill{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:18px;overflow:hidden;flex:1;min-height:0;
}
.templates-fill__head{
  grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.templates-fill__title{font-size:16px;font-weight:800;color:var(--text)}
.templates-fill__body{display:contents}
.templates-fill__preview{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  display:grid;place-items:center;overflow:hidden;min-height:0;
}
.templates-fill__preview canvas{max-width:100%;max-height:100%;display:block}
.templates-fill__fields{
  display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;
}

/* ---------- Publish modal ---------- */
.publish-body{
  padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;
}
.publish-field{display:flex;flex-direction:column;gap:6px}
.publish-field label{font-size:12px;font-weight:700;color:var(--text)}
.publish-req{color:#dc2626;font-weight:800;margin-left:2px}
.publish-field input,
.publish-field select{
  border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:10px 12px;font-size:14px;color:var(--text);font-family:inherit;
  transition:border-color .15s;
}
.publish-field input:focus,
.publish-field select:focus{outline:none;border-color:var(--brand)}
.publish-hint{font-size:11px;color:var(--text-mute)}
.publish-error{
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  padding:10px 12px;border-radius:8px;font-size:13px;display:none;
}
.publish-error.is-visible{display:block}
.publish-success{
  background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;
  padding:16px 18px;border-radius:10px;font-size:13px;display:none;
}
.publish-success[hidden]{display:none}
.publish-success:not([hidden]){display:block}
.publish-success__title{font-size:15px;font-weight:800;color:#047857;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.publish-success__title i{font-size:18px}
.publish-success__body{color:#065f46;margin-bottom:14px;line-height:1.4}
.publish-success__actions{display:flex;flex-wrap:wrap;gap:8px}
.publish-success__actions .btn{font-size:12px;padding:8px 14px}
.publish-success.is-visible{display:block}

/* ---------- Utility button ---------- */
.btn-block{width:100%;justify-content:center}

/* ---------- Responsive tweaks for new modals ---------- */
@media (max-width:640px){
  .templates-fill{grid-template-columns:1fr;gap:12px;padding:12px}
  .templates-grid{grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:10px;padding:12px}
}

/* ============================================================
   V6 MARKETPLACE PAGE — migrated from style.css so marketplace_v6.php
   can load v6.css ONLY (no legacy style.css dependency).
   Scoped to body.page-v6.page-marketplace.
   ============================================================ */
body.page-v6 .mkt-hero{background:var(--surface);padding:40px 0 30px;border-bottom:1px solid var(--line)}
body.page-v6 .mkt-hero h1{font-size:36px;color:var(--text);margin:0 0 6px;letter-spacing:-.01em;font-weight:900}
body.page-v6 .mkt-hero p{color:var(--text-mute);margin:0;font-size:15px}
body.page-v6 .mkt-hero strong{color:var(--brand)}
body.page-v6 .mkt-toolbar{background:#fff;border-bottom:1px solid var(--line);padding:8px 0;position:sticky;top:var(--tg-header-h);z-index:300}
body.page-v6 .mkt-toolbar__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.page-v6 .mkt-cats{display:flex;gap:4px;overflow-x:auto;flex:1;padding-bottom:0}
body.page-v6 .mkt-cats::-webkit-scrollbar{height:0}
body.page-v6 .mkt-cat{padding:5px 11px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;color:var(--text-mute);white-space:nowrap;cursor:pointer;transition:all .15s ease;line-height:1.3}
body.page-v6 .mkt-cat:hover{border-color:var(--brand);color:var(--brand)}
body.page-v6 .mkt-cat.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
body.page-v6 .mkt-sort{display:flex;align-items:center;gap:6px}
body.page-v6 .mkt-sort label{font-size:11px!important}
body.page-v6 .mkt-sort select{padding:5px 26px 5px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%23475569'/%3E%3C/svg%3E") no-repeat right 8px center;font-size:12px;font-weight:600;color:var(--text);appearance:none;line-height:1.3}
body.page-v6 .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:40px 0}
body.page-v6 .product-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:all .2s ease;display:block;color:inherit;text-decoration:none}
body.page-v6 .product-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
body.page-v6 .product-card__image{aspect-ratio:1;background:var(--surface);display:grid;place-items:center;position:relative;overflow:hidden}
body.page-v6 .product-card__image svg{max-width:80%;max-height:80%}
body.page-v6 .product-card__badge{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
body.page-v6 .product-card__info{padding:14px}
body.page-v6 .product-card__info h3{margin:0;font-size:14px;font-weight:800;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-v6 .product-card__info .designer{font-size:12px;color:var(--text-dim);margin-top:4px}
body.page-v6 .product-card__price{display:block;font-size:16px;font-weight:900;color:var(--brand);margin-top:6px}
body.page-v6 .pagination{display:flex;justify-content:center;gap:6px;padding:20px 0 60px}
body.page-v6 .pagination a, body.page-v6 .pagination span{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:13px;font-weight:700;color:var(--text-mute);text-decoration:none}
body.page-v6 .pagination a:hover{border-color:var(--brand);color:var(--brand)}
body.page-v6 .pagination .is-current{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:1024px){ body.page-v6 .product-grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (max-width:640px){
  body.page-v6 .mkt-hero{padding:24px 0 18px}
  body.page-v6 .mkt-hero h1{font-size:24px}
  body.page-v6 .mkt-hero p{font-size:13px}
  body.page-v6 .mkt-toolbar{padding:10px 0}
  body.page-v6 .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:18px 0}
  body.page-v6 .product-card__info{padding:10px}
  body.page-v6 .product-card__info h3{font-size:13px}
  body.page-v6 .product-card__price{font-size:14px}
}

/* ============================================================
   SHIRT STYLE PICKER / TEMPLATES / PUBLISH MODAL — close button
   pinned top-right of the card (was wrapping below search on narrow
   widths). Applies to every .shirt-modal on v6 pages. */
body.page-v6 .shirt-modal__card{position:relative}
body.page-v6 .shirt-modal__head{padding-right:56px}
body.page-v6 .shirt-modal__close{
  position:absolute; top:12px; right:14px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  color:var(--text-dim); cursor:pointer;
  display:grid; place-items:center;
  z-index:5;
}
body.page-v6 .shirt-modal__close:hover{background:var(--surface);color:var(--text)}

/* ============================================================
   V6 PRICING PAGE — migrated from style.css (2026-04).
   Scoped under body.page-v6.page-pricing.
   ============================================================ */
body.page-v6.page-pricing .page-hero{background:var(--surface);padding:60px 0 40px;border-bottom:1px solid var(--line);text-align:center}
body.page-v6.page-pricing .page-hero h1{font-size:46px;font-weight:900;color:var(--text);margin:0 0 12px;letter-spacing:-.02em}
body.page-v6.page-pricing .page-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-pricing .page-hero p{font-size:17px;color:var(--text-mute);margin:0 auto;max-width:620px}
body.page-v6.page-pricing .toggle-row{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:26px}
body.page-v6.page-pricing .toggle-row button{border:none;background:transparent;color:var(--text-mute);padding:8px 18px;font-size:13px;font-weight:700;border-radius:999px;cursor:pointer}
body.page-v6.page-pricing .toggle-row button.is-active{background:var(--brand);color:#fff}
body.page-v6.page-pricing .save-chip{display:inline-block;margin-left:6px;font-size:11px;color:var(--orange);font-weight:700}
body.page-v6.page-pricing .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:50px auto 0;padding:0 28px}
body.page-v6.page-pricing .plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 30px;position:relative;transition:all .15s ease}
body.page-v6.page-pricing .plan:hover{transform:translateY(-4px);box-shadow:var(--sh)}
body.page-v6.page-pricing .plan--featured{background:#0f172a;color:#cbd5e1;border-color:#0f172a}
body.page-v6.page-pricing .plan--featured h3{color:#fff}
body.page-v6.page-pricing .plan--featured .plan__price{color:#fff}
body.page-v6.page-pricing .plan--featured .plan__price em{color:var(--yellow)}
body.page-v6.page-pricing .plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
body.page-v6.page-pricing .plan h3{font-size:24px;font-weight:900;margin:0 0 6px;color:var(--text)}
body.page-v6.page-pricing .plan__tag{font-size:13px;color:var(--text-mute);margin:0 0 22px}
body.page-v6.page-pricing .plan--featured .plan__tag{color:#94a3b8}
body.page-v6.page-pricing .plan__price{font-size:48px;font-weight:900;color:var(--text);margin-bottom:22px;letter-spacing:-.01em}
body.page-v6.page-pricing .plan__price em{font-style:normal;font-size:15px;font-weight:600;color:var(--text-dim)}
body.page-v6.page-pricing .plan ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px}
body.page-v6.page-pricing .plan li{font-size:14px;color:var(--text-mute);display:flex;align-items:flex-start;gap:10px}
body.page-v6.page-pricing .plan li i{color:var(--brand);font-size:13px;margin-top:4px}
body.page-v6.page-pricing .plan--featured li{color:#cbd5e1}
body.page-v6.page-pricing .plan--featured li i{color:var(--yellow)}
body.page-v6.page-pricing .print-pricing{max-width:900px;margin:80px auto 0;padding:0 28px}
body.page-v6.page-pricing .print-pricing h2{font-size:28px;font-weight:900;color:var(--text);text-align:center;margin:0 0 10px;letter-spacing:-.01em}
body.page-v6.page-pricing .print-pricing p.sub{text-align:center;color:var(--text-mute);margin:0 0 30px}
body.page-v6.page-pricing .price-table{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
body.page-v6.page-pricing .price-table table{width:100%;border-collapse:collapse}
body.page-v6.page-pricing .price-table th{background:var(--surface);padding:16px 20px;text-align:left;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid var(--line)}
body.page-v6.page-pricing .price-table td{padding:18px 20px;font-size:14px;color:var(--text);border-bottom:1px solid var(--line)}
body.page-v6.page-pricing .price-table tr:last-child td{border-bottom:none}
body.page-v6.page-pricing .price-table td.num{font-weight:900;color:var(--text)}
body.page-v6.page-pricing .price-table .foot{background:var(--surface);font-size:12px;color:var(--text-mute)}
body.page-v6.page-pricing .faq{max-width:820px;margin:80px auto;padding:0 28px}
body.page-v6.page-pricing .faq h2{font-size:28px;font-weight:900;color:var(--text);text-align:center;margin:0 0 30px;letter-spacing:-.01em}
body.page-v6.page-pricing .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;padding:16px 20px}
body.page-v6.page-pricing .faq summary{font-weight:700;color:var(--text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
body.page-v6.page-pricing .faq summary::-webkit-details-marker{display:none}
body.page-v6.page-pricing .faq summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:400}
body.page-v6.page-pricing .faq details[open] summary::after{content:"−"}
body.page-v6.page-pricing .faq p{color:var(--text-mute);font-size:14px;margin:14px 0 0}
@media(max-width:820px){ body.page-v6.page-pricing .plans{grid-template-columns:1fr;max-width:420px} body.page-v6.page-pricing .page-hero h1{font-size:34px} }

/* New "free to use" pricing layout (3-up card grid + hero chip). */
body.page-v6.page-pricing .pricing-hero__chip{
  display:inline-flex;align-items:center;gap:7px;
  background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.02em;margin-bottom:18px;
}
body.page-v6.page-pricing .pricing-hero__chip i{font-size:11px}
body.page-v6.page-pricing .pricing-hero__cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
body.page-v6.page-pricing .pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1100px;margin:50px auto 0;padding:0 28px;
}
body.page-v6.page-pricing .pricing-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 28px;display:flex;flex-direction:column;transition:all .15s ease;
}
body.page-v6.page-pricing .pricing-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
body.page-v6.page-pricing .pricing-card__icon{
  width:48px;height:48px;border-radius:12px;background:rgba(37,99,235,.1);
  display:grid;place-items:center;color:var(--brand);font-size:20px;margin-bottom:16px;
}
body.page-v6.page-pricing .pricing-card--muted .pricing-card__icon{background:var(--surface-2);color:var(--text-mute)}
body.page-v6.page-pricing .pricing-card h3{font-size:20px;font-weight:900;color:var(--text);margin:0 0 4px}
body.page-v6.page-pricing .pricing-card__price{font-size:32px;font-weight:900;color:var(--text);margin:6px 0 20px;letter-spacing:-.01em}
body.page-v6.page-pricing .pricing-card__price small{font-size:14px;font-weight:600;color:var(--text-mute);margin-left:3px}
body.page-v6.page-pricing .pricing-card ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
body.page-v6.page-pricing .pricing-card li{font-size:13.5px;color:var(--text-mute);display:flex;align-items:flex-start;gap:9px;line-height:1.45}
body.page-v6.page-pricing .pricing-card li i{color:var(--brand);font-size:12px;margin-top:4px;flex-shrink:0}
body.page-v6.page-pricing .pricing-card--muted li i{color:var(--text-dim)}
body.page-v6.page-pricing .print-pricing,
body.page-v6.page-pricing .faq{max-width:none;padding:60px 0}
body.page-v6.page-pricing .print-pricing .wrap,
body.page-v6.page-pricing .faq .wrap{max-width:900px}
@media(max-width:900px){
  body.page-v6.page-pricing .pricing-grid{grid-template-columns:1fr;max-width:480px;gap:16px}
  body.page-v6.page-pricing .pricing-hero__cta{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
}

/* ============================================================
   V6 MARKETPLACE + WHOLESALE — shared max-width for card grid
   pages so they don't go edge-to-edge on very wide screens.
   ============================================================ */
body.page-v6 .wrap--marketplace{max-width:1280px;margin-left:auto;margin-right:auto}

/* Empty-state block — used by the wholesale/marketplace pages when the DB
   returns zero rows. Keeps the page looking intentional, not broken. */
body.page-v6 .mkt-empty{
  text-align:center;padding:60px 20px;color:var(--text-mute);
  background:#fff;border:1px dashed var(--line);border-radius:var(--r-md);
  margin:40px auto;max-width:640px
}
body.page-v6 .mkt-empty i{font-size:42px;color:var(--text-dim);margin-bottom:14px;display:block}
body.page-v6 .mkt-empty h3{font-size:18px;color:var(--text);margin:0 0 8px;font-weight:800}
body.page-v6 .mkt-empty p{font-size:14px;margin:0;line-height:1.55}
body.page-v6 .mkt-empty code{background:var(--surface);padding:2px 6px;border-radius:4px;font-size:12px}

/* ============================================================
   V6 MARKETPLACE PRODUCT DETAIL — /marketplace/product/{slug}
   ============================================================ */
body.page-v6.page-marketplace-product .mkt-breadcrumb{padding:18px 0 4px}
body.page-v6.page-marketplace-product .mkt-breadcrumb a{font-size:13px;color:var(--text-mute);text-decoration:none;font-weight:600}
body.page-v6.page-marketplace-product .mkt-breadcrumb a:hover{color:var(--text)}
body.page-v6.page-marketplace-product .mkt-product{padding-bottom:60px}
body.page-v6.page-marketplace-product .mkt-product__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:42px;align-items:start;margin-top:18px}
body.page-v6.page-marketplace-product .mkt-product__media{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
body.page-v6.page-marketplace-product .mkt-product__media img{width:100%;height:100%;object-fit:contain}
body.page-v6.page-marketplace-product .mkt-product__fallback{font-size:120px;color:#cbd5e1}
body.page-v6.page-marketplace-product .mkt-product__info h1{font-size:32px;font-weight:900;color:var(--text);margin:0 0 6px;letter-spacing:-.01em}
body.page-v6.page-marketplace-product .mkt-product__cat{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
body.page-v6.page-marketplace-product .mkt-product__price{font-size:30px;font-weight:900;color:var(--text);margin:10px 0 18px}
body.page-v6.page-marketplace-product .mkt-product__desc{color:var(--text-mute);font-size:14px;line-height:1.6;margin:0 0 22px}
body.page-v6.page-marketplace-product .mkt-product__opts{margin:18px 0 22px;display:flex;flex-direction:column;gap:14px}
body.page-v6.page-marketplace-product .mkt-product__opts label{font-size:12px;font-weight:800;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;display:block}
body.page-v6.page-marketplace-product .mkt-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
body.page-v6.page-marketplace-product .mkt-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:transform .1s}
body.page-v6.page-marketplace-product .mkt-swatch:hover{transform:scale(1.08)}
body.page-v6.page-marketplace-product .mkt-swatch.is-selected{box-shadow:0 0 0 2px var(--brand)}
body.page-v6.page-marketplace-product .mkt-sizes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
body.page-v6.page-marketplace-product .mkt-size{padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--text-mute);cursor:pointer;min-width:42px;text-align:center}
body.page-v6.page-marketplace-product .mkt-size:hover{border-color:var(--brand);color:var(--brand)}
body.page-v6.page-marketplace-product .mkt-size.is-selected{background:var(--brand);border-color:var(--brand);color:#fff}
body.page-v6.page-marketplace-product .mkt-product__buy{margin-top:14px;display:flex;flex-direction:column;gap:10px}
body.page-v6.page-marketplace-product .mkt-product__ship{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
body.page-v6.page-marketplace-product .mkt-product__missing{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:60px 28px;text-align:center;margin:40px 0}
body.page-v6.page-marketplace-product .mkt-product__missing i{font-size:48px;color:#cbd5e1;margin-bottom:14px}
body.page-v6.page-marketplace-product .mkt-product__missing h1{font-size:26px;margin:0 0 10px;color:var(--text)}
body.page-v6.page-marketplace-product .mkt-product__missing p{color:var(--text-mute);margin:0 0 20px}
@media(max-width:820px){
  body.page-v6.page-marketplace-product .mkt-product__grid{grid-template-columns:1fr;gap:24px}
  body.page-v6.page-marketplace-product .mkt-product__info h1{font-size:24px}
}

/* Compact hero used on marketplace + wholesale when the filter toolbar
   is pinned above the hero (so the hero is informational, not primary). */
body.page-v6 .mkt-hero--compact{padding:16px 0 14px}
body.page-v6 .mkt-hero--compact h1{font-size:22px;margin:0 0 3px}
body.page-v6 .mkt-hero--compact p{font-size:13px;margin:0}

/* Toolbar pinned directly under the site header (no hero above it). The
   inner flex row has its own min-height; the wrapper just owns the stripe.
   Previously padding:5px 0 was clipping the 32px pill buttons. Bumping to
   10px gives clear vertical headroom on both sides of the pills. */
body.page-v6 .mkt-toolbar--top{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  position:sticky;
  top:var(--tg-header-h, 66px);
  z-index:300;
  overflow:visible;
}
/* The toolbar's inner .wrap needs the same width constraints as the header
   so its pills align to the logo, not the viewport edge. The base .wrap is
   only scoped under .tg-header / .tg-footer, so we scope it here too. */
body.page-v6 .mkt-toolbar > .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
@media(max-width:640px){ body.page-v6 .mkt-toolbar > .wrap{padding:0 16px} }
@media(max-width:768px){
  body.page-v6 .mkt-toolbar--top{position:static}
  body.page-v6 .mkt-hero--compact{padding:22px 0 16px}
  body.page-v6 .mkt-hero--compact h1{font-size:22px}
}

/* ============================================================
   Header cart button (marketplace/wholesale/cart pages only)
   ============================================================ */
body.page-v6 .tg-icon-btn{
  display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--text);text-decoration:none;transition:all .15s ease;
}
body.page-v6 .tg-icon-btn:hover{background:var(--surface-2);border-color:var(--brand)}
body.page-v6 .btn-sm{padding:8px 12px;font-size:13px}
body.page-v6 .tg-cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 12px;border-radius:10px;font-weight:700;font-size:14px;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  text-decoration:none;transition:all .15s ease;
}
body.page-v6 .tg-cart-btn:hover{filter:brightness(1.08)}
body.page-v6 .tg-cart-btn.is-active{box-shadow:0 0 0 3px rgba(37,99,235,.15)}
body.page-v6 .tg-cart-btn i{font-size:15px}
body.page-v6 .tg-cart-btn__label{line-height:1}
body.page-v6 .tg-cart-btn__badge{
  display:inline-grid;place-items:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:rgba(255,255,255,.25);font-size:12px;font-weight:800;line-height:1;
}
body.page-v6 .tg-cart-btn__badge.has-items{background:#fff;color:var(--brand)}
@media(max-width:768px){
  body.page-v6 .tg-cart-btn__label{display:none}
  body.page-v6 .tg-cart-btn{padding:8px 10px}
}

/* ============================================================
   Cart page (/cart)
   ============================================================ */
body.page-v6.page-cart .wrap--cart{padding:30px 20px 60px;max-width:1100px;margin:0 auto}
body.page-v6.page-cart .cart-title{
  font-size:28px;font-weight:800;margin:0 0 24px;color:var(--text);
}

/* Empty state */
body.page-v6.page-cart .cart-empty{
  text-align:center;padding:60px 30px;
  border:2px dashed var(--line);border-radius:16px;background:var(--surface);
}
body.page-v6.page-cart .cart-empty i{font-size:48px;color:var(--text-dim);margin-bottom:16px}
body.page-v6.page-cart .cart-empty h3{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--text)}
body.page-v6.page-cart .cart-empty p{color:var(--text-dim);margin:0 0 22px}
body.page-v6.page-cart .cart-empty__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Two-column layout: items + summary */
body.page-v6.page-cart .cart-layout{
  display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;
}
@media(max-width:900px){
  body.page-v6.page-cart .cart-layout{grid-template-columns:1fr}
}

/* Line items */
body.page-v6.page-cart .cart-items{display:flex;flex-direction:column;gap:14px}
body.page-v6.page-cart .cart-item{
  display:grid;
  grid-template-columns:90px 1fr auto auto 32px;
  align-items:center;gap:18px;
  padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
}
body.page-v6.page-cart .cart-item__thumb{
  width:90px;height:90px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;
  border:1px solid var(--line);
}
body.page-v6.page-cart .cart-item__thumb img{width:100%;height:100%;object-fit:cover}
body.page-v6.page-cart .cart-item__thumb i{font-size:34px;color:var(--text-dim)}
body.page-v6.page-cart .cart-item__main{min-width:0}
body.page-v6.page-cart .cart-item__title{
  font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;
}
body.page-v6.page-cart .cart-item__title a{color:inherit;text-decoration:none}
body.page-v6.page-cart .cart-item__title a:hover{color:var(--brand)}
body.page-v6.page-cart .cart-item__meta{
  display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-dim);margin-bottom:6px;
}
body.page-v6.page-cart .cart-item__meta span{display:inline-flex;align-items:center}
body.page-v6.page-cart .cart-item__type{
  padding:2px 8px;border-radius:999px;background:var(--surface-2);
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;
}
body.page-v6.page-cart .cart-item__price{font-size:13px;color:var(--text-dim);font-weight:600}
body.page-v6.page-cart .cart-item__qty{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
body.page-v6.page-cart .cart-item__qty input{
  width:40px;border:0;text-align:center;font-weight:700;color:var(--text);
  background:transparent;font-size:14px;
}
body.page-v6.page-cart .cart-qty-btn{
  width:34px;height:34px;border:0;background:var(--surface-2);color:var(--text);
  cursor:pointer;font-size:12px;display:grid;place-items:center;
}
body.page-v6.page-cart .cart-qty-btn:hover{background:var(--brand);color:#fff}
body.page-v6.page-cart .cart-item__total{font-size:16px;font-weight:800;color:var(--text);min-width:72px;text-align:right}
body.page-v6.page-cart .cart-remove-btn{
  width:32px;height:32px;border-radius:8px;border:0;background:transparent;
  color:var(--text-dim);cursor:pointer;display:grid;place-items:center;
}
body.page-v6.page-cart .cart-remove-btn:hover{background:#fee2e2;color:#dc2626}
@media(max-width:600px){
  body.page-v6.page-cart .cart-item{
    grid-template-columns:70px 1fr 32px;
    grid-template-areas:
      "thumb main remove"
      "thumb qty  total";
    gap:12px;
  }
  body.page-v6.page-cart .cart-item__thumb{grid-area:thumb;width:70px;height:70px}
  body.page-v6.page-cart .cart-item__main{grid-area:main}
  body.page-v6.page-cart .cart-item__qty{grid-area:qty;justify-self:start}
  body.page-v6.page-cart .cart-item__total{grid-area:total;justify-self:end}
  body.page-v6.page-cart .cart-item__remove{grid-area:remove}
}
body.page-v6.page-cart .cart-continue{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;color:var(--brand);font-weight:600;font-size:14px;text-decoration:none;
}
body.page-v6.page-cart .cart-continue:hover{text-decoration:underline}

/* Summary card */
body.page-v6.page-cart .cart-summary{
  position:sticky;top:90px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:22px;
}
body.page-v6.page-cart .cart-summary h2{
  font-size:16px;font-weight:800;margin:0 0 16px;color:var(--text);
}
body.page-v6.page-cart .cart-summary dl{margin:0 0 18px}
body.page-v6.page-cart .cart-summary dl > div{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;color:var(--text);font-size:14px;
}
body.page-v6.page-cart .cart-summary dl dt{margin:0;color:var(--text-dim);font-weight:500}
body.page-v6.page-cart .cart-summary dl dd{margin:0;font-weight:700}
body.page-v6.page-cart .cart-summary__total{
  border-top:1px solid var(--line);padding-top:12px !important;margin-top:6px;
  font-size:17px !important;
}
body.page-v6.page-cart .cart-summary__total dt{color:var(--text) !important;font-weight:700 !important}
body.page-v6.page-cart .cart-summary__total dd{font-size:20px;font-weight:900;color:var(--text)}
body.page-v6.page-cart .cart-summary .btn-lg{padding:14px 18px;font-size:15px}
body.page-v6.page-cart .cart-summary .btn-block{width:100%;justify-content:center}
body.page-v6.page-cart .cart-summary__note{
  display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:12px;color:var(--text-dim);margin:14px 0 10px;text-align:center;
}
body.page-v6.page-cart .cart-summary__pays{
  display:flex;gap:10px;justify-content:center;color:var(--text-dim);font-size:26px;opacity:.7;
}
@media(max-width:900px){
  body.page-v6.page-cart .cart-summary{position:static}
}

/* ============================================================
   Checkout page (/checkout)
   ============================================================ */
body.page-v6.page-checkout .cart-layout.checkout-grid{align-items:start}
body.page-v6.page-checkout .checkout-form{display:flex;flex-direction:column;gap:18px}
body.page-v6.page-checkout .checkout-section{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px;
}
body.page-v6.page-checkout .checkout-section h2{
  font-size:15px;font-weight:800;margin:0 0 14px;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
body.page-v6.page-checkout .checkout-section h2 i{color:var(--brand)}
body.page-v6.page-checkout .checkout-hint{font-size:12px;color:var(--text-dim);margin:-6px 0 14px}

/* Form fields */
body.page-v6 .ff-row{margin-bottom:12px}
body.page-v6 .ff-row:last-child{margin-bottom:0}
body.page-v6 .ff-row label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px}
body.page-v6 .ff-row .ff-optional{font-weight:500;color:var(--text-dim);font-size:11px;text-transform:none}
body.page-v6 .ff-row input,
body.page-v6 .ff-row select,
body.page-v6 .checkout-card-form input,
body.page-v6 .checkout-card-form select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  background:#fff;font-size:14px;color:var(--text);font-family:inherit;transition:border-color .15s ease;
}
body.page-v6 .ff-row input:focus,
body.page-v6 .ff-row select:focus,
body.page-v6 .checkout-card-form input:focus,
body.page-v6 .checkout-card-form select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
body.page-v6 .ff-row--cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
body.page-v6 .ff-row--cols > label{display:block}
@media(max-width:600px){
  body.page-v6 .ff-row--cols{grid-template-columns:1fr 1fr}
}

/* Payment method radios */
body.page-v6 .checkout-pay{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  margin-bottom:10px;cursor:pointer;background:#fff;transition:all .15s ease;
}
body.page-v6 .checkout-pay:hover{border-color:var(--brand)}
body.page-v6 .checkout-pay.is-selected{
  border-color:var(--brand);background:rgba(37,99,235,.03);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
body.page-v6 .checkout-pay input[type=radio]{
  accent-color:var(--brand);width:18px;height:18px;flex:0 0 auto;
}
body.page-v6 .checkout-pay__label{flex:1;display:flex;flex-direction:column;gap:2px}
body.page-v6 .checkout-pay__label > span{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
body.page-v6 .checkout-pay__label > small{font-size:12px;color:var(--text-dim);font-weight:500}
body.page-v6 .checkout-pay__brands{display:flex;gap:6px;color:var(--text-dim);font-size:24px}

/* Checkout action row */
body.page-v6 .checkout-actions{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:6px;
}
body.page-v6 .checkout-actions .btn-lg{padding:14px 22px;font-size:15px}

/* Order summary line items */
body.page-v6 .cart-summary__count{font-size:12px;color:var(--text-dim);font-weight:600;margin-left:4px}
body.page-v6 .checkout-lineitems{
  display:flex;flex-direction:column;gap:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
body.page-v6 .checkout-line{display:flex;align-items:center;gap:12px}
body.page-v6 .checkout-line__thumb{
  position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);flex:0 0 auto;
  display:grid;place-items:center;
}
body.page-v6 .checkout-line__thumb img{width:100%;height:100%;object-fit:cover}
body.page-v6 .checkout-line__thumb i{font-size:22px;color:var(--text-dim)}
body.page-v6 .checkout-line__qty{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;border-radius:10px;background:var(--text);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;
}
body.page-v6 .checkout-line__meta{flex:1;min-width:0}
body.page-v6 .checkout-line__title{
  font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.page-v6 .checkout-line__sub{font-size:11px;color:var(--text-dim);margin-top:2px}
body.page-v6 .checkout-line__price{font-size:14px;font-weight:800;color:var(--text)}

/* Success / error banners at top of page */
body.page-v6 .checkout-banner{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 18px;border-radius:12px;margin-bottom:20px;
  background:#fff;border:1px solid var(--line);
}
body.page-v6 .checkout-banner i{font-size:22px;flex:0 0 auto;margin-top:2px}
body.page-v6 .checkout-banner strong{display:block;font-size:15px;color:var(--text);margin-bottom:2px}
body.page-v6 .checkout-banner p{margin:0;font-size:13px;color:var(--text-dim)}
body.page-v6 .checkout-banner div{flex:1;min-width:0}
body.page-v6 .checkout-banner--success{background:#ecfdf5;border-color:#86efac}
body.page-v6 .checkout-banner--success i{color:#16a34a}
body.page-v6 .checkout-banner--error{background:#fef2f2;border-color:#fecaca}
body.page-v6 .checkout-banner--error i{color:#dc2626}

/* ============================================================
   Wholesale product detail / design page
   /wholesale/design/{id}/{slug}
   ============================================================ */
body.page-v6.page-wholesale-product .mkt-breadcrumb{padding:18px 0 4px}
body.page-v6.page-wholesale-product .mkt-breadcrumb a{font-size:13px;color:var(--text-mute);text-decoration:none;font-weight:600}
body.page-v6.page-wholesale-product .mkt-breadcrumb a:hover{color:var(--text)}
body.page-v6.page-wholesale-product .mkt-product{padding-bottom:60px}

body.page-v6 .ws-product__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:42px;align-items:start;margin-top:18px;
}
body.page-v6 .ws-product__stage{position:sticky;top:calc(var(--tg-header-h) + 20px)}
body.page-v6 .ws-product__shirt{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  aspect-ratio:1;overflow:hidden;display:grid;place-items:center;position:relative;
}
body.page-v6 .ws-product__shirt img#wsShirtImg{
  width:100%;height:100%;object-fit:contain;display:block;
}
body.page-v6 .ws-art{position:absolute;pointer-events:none;display:grid;place-items:center;overflow:hidden}
body.page-v6 .ws-art img{max-width:100%;max-height:100%;object-fit:contain}
body.page-v6 .ws-art--front {top:28%;left:33%;width:34%;height:36%}
body.page-v6 .ws-art--back  {top:22%;left:33%;width:34%;height:44%}
body.page-v6 .ws-art--lsleeve{top:28%;left:9%; width:12%;height:12%}
body.page-v6 .ws-art--rsleeve{top:28%;right:9%;width:12%;height:12%}
body.page-v6 .ws-product__faces{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
body.page-v6 .ws-face{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:12px;font-weight:600;color:var(--text-mute);
  cursor:pointer;transition:all .15s ease;
}
body.page-v6 .ws-face:hover{border-color:var(--brand);color:var(--brand)}
body.page-v6 .ws-face.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
body.page-v6 .ws-face.is-disabled,body.page-v6 .ws-face[disabled]{opacity:.4;cursor:not-allowed;background:#fff;border-color:var(--line);color:var(--text-mute)}
body.page-v6 .ws-face.is-disabled:hover,body.page-v6 .ws-face[disabled]:hover{border-color:var(--line);color:var(--text-mute)}

body.page-v6 .ws-product__info h1{font-size:32px;font-weight:900;color:var(--text);margin:0 0 6px;letter-spacing:-.01em}
body.page-v6 .ws-product__cat{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
body.page-v6 .ws-product__price{font-size:20px;font-weight:600;color:var(--text-mute);margin:8px 0 20px}
body.page-v6 .ws-product__price strong{font-size:26px;font-weight:900;color:var(--text)}
body.page-v6 .ws-product__price-sub{font-size:13px;color:var(--text-dim);margin-left:4px}
body.page-v6 .ws-muted{color:var(--text-dim);font-weight:500;font-size:12px}

body.page-v6 .ws-product__opts{display:flex;flex-direction:column;gap:14px;margin:6px 0 22px}
body.page-v6 .ws-product__opts label{font-size:12px;font-weight:800;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;display:block}

/* Colour swatches — solid hex-filled circles driven by --swatch (set on
   the element from Pricing_Attributes.Hex). Falls back to a shirt image
   only when no hex is stored yet. The legacy image mode is kept behind
   .ws-swatch--img so we don't lose the fallback path. */
body.page-v6 .ws-swatches{display:flex;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:auto;padding:4px 2px}
body.page-v6 .ws-swatch{
  display:inline-block;
  width:30px;height:30px;border-radius:50%;
  border:2px solid #fff;outline:1px solid var(--line);
  cursor:pointer;
  background:var(--swatch,#e5e7eb);
  transition:transform .12s ease, outline-color .12s ease, box-shadow .12s ease;
  position:relative;
}
body.page-v6 .ws-swatch:hover{outline-color:var(--text-mute);transform:scale(1.08)}
body.page-v6 .ws-swatch.is-selected{outline-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.25)}
/* Image fallback (only when Hex isn't set yet on Pricing_Attributes). */
body.page-v6 .ws-swatch--img{overflow:hidden;background:#fff}
body.page-v6 .ws-swatch--img img{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}

body.page-v6 .ws-sizes{display:flex;flex-wrap:wrap;gap:6px}
body.page-v6 .ws-sizes .mkt-size{
  padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:all .15s ease;
}
body.page-v6 .ws-sizes .mkt-size:hover{border-color:var(--brand)}
body.page-v6 .ws-sizes .mkt-size.is-selected{background:var(--brand);border-color:var(--brand);color:#fff}

body.page-v6 .ws-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;width:fit-content}
body.page-v6 .ws-qty__btn{border:none;background:transparent;width:36px;height:36px;font-size:16px;font-weight:700;color:var(--text-mute);cursor:pointer}
body.page-v6 .ws-qty__btn:hover{background:var(--surface);color:var(--text)}
body.page-v6 .ws-qty input{width:50px;border:none;text-align:center;font-size:14px;font-weight:700;color:var(--text);padding:8px 0;outline:none}
body.page-v6 .ws-qty input::-webkit-outer-spin-button,body.page-v6 .ws-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Upload zones */
body.page-v6 .ws-uploads{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
body.page-v6 .ws-uploads__hd h3{font-size:15px;font-weight:800;color:var(--text);margin:0 0 4px}
body.page-v6 .ws-uploads__hd p{font-size:13px;color:var(--text-mute);margin:0 0 14px}
body.page-v6 .ws-drop{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1.5px dashed var(--line);border-radius:var(--r-md);
  padding:10px 14px;margin-bottom:8px;cursor:pointer;position:relative;
  transition:all .15s ease;
}
body.page-v6 .ws-drop:hover{border-color:var(--brand);background:rgba(37,99,235,.02)}
body.page-v6 .ws-drop.is-drag{border-color:var(--brand);background:rgba(37,99,235,.08)}
body.page-v6 .ws-drop.is-filled{border-style:solid;border-color:#16a34a;background:#f0fdf4}
body.page-v6 .ws-drop.is-uploading{opacity:.6;pointer-events:none}
body.page-v6 .ws-drop__thumb{
  width:50px;height:50px;border-radius:8px;background:var(--surface);
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;
}
body.page-v6 .ws-drop__thumb i{font-size:20px;color:var(--text-dim)}
body.page-v6 .ws-drop__thumb img{width:100%;height:100%;object-fit:contain}
body.page-v6 .ws-drop__text{flex:1;min-width:0}
body.page-v6 .ws-drop__text strong{display:block;font-size:13px;font-weight:800;color:var(--text)}
body.page-v6 .ws-drop__text span{font-size:12px;color:var(--text-mute)}
body.page-v6 .ws-drop__clear{
  position:absolute;top:8px;right:10px;
  background:#fff;border:1px solid var(--line);border-radius:50%;
  width:22px;height:22px;display:grid;place-items:center;
  font-size:14px;line-height:1;color:var(--text-mute);cursor:pointer;
}
body.page-v6 .ws-drop__clear:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}

/* Running total */
body.page-v6 .ws-total{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin:18px 0 14px;display:flex;flex-direction:column;gap:6px;
}
body.page-v6 .ws-total__row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-mute)}
body.page-v6 .ws-total__row--sub{color:var(--text-dim);font-size:12px}
body.page-v6 .ws-total__row--grand{
  font-size:16px;font-weight:900;color:var(--text);
  border-top:1px solid var(--line);padding-top:8px;margin-top:4px;
}

/* Actions */
body.page-v6 .ws-actions{display:flex;flex-direction:column;gap:8px}
body.page-v6 .ws-actions .btn{justify-content:center}
body.page-v6 .ws-ship{font-size:12px;color:var(--text-mute);margin:8px 0 0;display:flex;align-items:center;gap:6px}
body.page-v6 .ws-ship i{color:var(--brand)}

@media(max-width:900px){
  body.page-v6 .ws-product__grid{grid-template-columns:1fr;gap:22px}
  body.page-v6 .ws-product__stage{position:static}
}