/* =========================================================
   BASE TOKENS (overridden per mockup via body class)
   Brand colours stay constant; surface colours change.
   NO gradients anywhere — solid fills only.
   ========================================================= */

/* Smooth-scroll for in-page anchors (e.g. Order-for-yourself hero CTA
   that targets #designer). v6.css is only loaded on front-facing
   pages so this doesn't touch the CP. */
html{scroll-behavior:smooth}

: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. Must match the header's actual rendered height:
     14px pad-top + 40px inner (logo/nav/cta row) + 14px pad-bottom = 68px.
     The JS ResizeObserver syncs this to the pixel, but the initial CSS value
     prevents a visible cream gap on first paint before JS runs. */
  --tg-header-h:68px;
}

*{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}
/* Global content-width baseline for every v6 page. `.wrap` is the recurring
   container element (e.g. <div class="wrap">, <main class="wrap">) used by
   every section of every page. Giving it a single source of truth keeps the
   apps/how-it-works/about/terms/etc. pages at the exact same max-width as
   the header instead of drifting narrow (no max-width set, content collapses
   to its intrinsic size) or wide (missing constraint so content hits the
   viewport edge). Page-level overrides for narrower heroes
   (e.g. .int-hero .wrap{max-width:760px}) still win via higher specificity. */
body.page-v6 .wrap{max-width:1440px;margin:0 auto;padding:0 36px;width:100%}
@media(max-width:640px){ body.page-v6 .wrap{padding:0 16px} }
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 (homepage default)
   2026-04-21: Buy accent changed from terracotta (#c06f52) → teal (#0d9488)
   so the Buy path toggle, Buy CTA, and hero H1 underline no longer collide
   visually with the new orange Wholesale mode sitting next to them. Teal
   reads as the distinct 4th colour against navy Sell / purple Market /
   orange Wholesale. Any downstream usage of --accent-b (btn-b, layer-row
   accent, side-tab, swatch, size-btn, shirt-modal, etc.) picks up the new
   colour automatically. */
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:#0d9488;          /* Buy — teal */
  --accent-b-dark:#0f766e;
  --accent-b-soft:#ccfbf1;
  --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;overflow:hidden}
.tg-logo__mark i{font-size:18px}
.tg-logo__mark img{width:78%;height:78%;object-fit:contain;display:block}
.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}

/* Section-specific logo "gang" + mark colour
   Homepage (mode-sell/mode-buy) keeps --brand (navy blue).
   Marketplace → purple,  Wholesale → orange,
   Cart/checkout → green (commerce).                        */
body.page-marketplace .tg-logo b{color:var(--mode-market)}
body.page-marketplace .tg-logo__mark{background:var(--mode-market)}
body.page-wholesale .tg-logo b{color:var(--orange)}
body.page-wholesale .tg-logo__mark{background:var(--orange)}
body.page-cart .tg-logo b{color:var(--green)}
body.page-cart .tg-logo__mark{background:var(--green)}
/* Mode-specific inner logo image. The default <img src> in markup stays
   /images/tshirtgang_logo_3_inner.svg; CSS `content:url()` overrides what
   the browser actually renders inside the mark on marketplace/wholesale
   pages. Covers the header AND footer marks in one rule since both share
   the .tg-logo__mark class. */
body.page-marketplace .tg-logo__mark img{content:url('/images/tshirtgang3-marketplace-inner.svg')}
body.page-wholesale   .tg-logo__mark img{content:url('/images/tshirtgang3-wholesale-inner.svg')}

.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)}

/* Section-accent nav buttons: only colour the Marketplace / Wholesale tab
   when it's the currently active page (is-active) — otherwise they sit
   neutral like the rest of the nav so they don't shout from every page.
   Matches --mode-market (purple) / --orange palettes used elsewhere. */
.tg-nav a[href="/marketplace"].is-active{background:var(--mode-market);color:#fff}
.tg-nav a[href="/marketplace"].is-active:hover{background:var(--mode-market-dark);color:#fff}
.tg-nav a[href="/wholesale"].is-active{background:var(--orange);color:#fff}
.tg-nav a[href="/wholesale"].is-active:hover{background:var(--orange-dark);color:#fff}

/* Round 52: hide the Pricing nav link on marketplace + wholesale
   storefronts. Buyers browsing products don't need the seller-facing
   pricing page cluttering the nav, and hiding it keeps the header
   tight so Marketplace / Wholesale / Apps / API breathe. The anchor
   stays in the DOM (for SEO / internal linking); CSS just un-renders
   it on those specific pages. Covers both the desktop .tg-nav and
   the mobile .tg-drawer__nav via the shared .tg-nav__pricing class. */
body.page-marketplace .tg-nav__pricing,
body.page-marketplace-product .tg-nav__pricing,
body.page-wholesale .tg-nav__pricing{display:none !important}

.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;flex:1 1 auto;min-width:0}
.tg-search input::placeholder{color:#94a3b8}
.tg-search .tg-search__lead{color:#94a3b8;flex:0 0 auto}

/* Wrapper that lets us sit a filter icon to the right of .tg-search
   on storefront pages. On desktop the wrap is just a transparent
   shell — the filter button is hidden because the sidebar is
   permanent. On mobile the button is revealed as a plain, minimal
   icon (no background, no pill) sitting just outside the search
   pill's right edge, matching the tone of the other header icons. */
.tg-search-wrap{display:flex;flex-direction:row;align-items:center;gap:6px;min-width:240px;position:relative}
.tg-search-wrap .tg-search{flex:1 1 auto;min-width:0;order:1;position:static}
/* No extra right-padding tweak needed now that the button is plain —
   the `--withfilter` modifier is still emitted for future hooks but
   does nothing visual. */
.tg-search-wrap--withfilter .tg-search{padding-right:14px}

.tg-filter-btn{
  flex:0 0 auto;
  display:none;                 /* desktop: sidebar is permanent */
  align-items:center;justify-content:center;
  width:auto;height:auto;
  padding:4px 6px;
  margin:0;
  border:0;
  background:transparent;       /* plain icon — no pill, no box */
  color:#475569;                /* slate-600, matches header icon tone */
  font-size:18px;
  line-height:1;
  cursor:pointer;
  border-radius:0;
  box-shadow:none;
  transition:color .15s ease;
  /* Force inline-right placement — defensive against any legacy rule
     that might try to absolutely position this icon on the left.
     `order:2` sits after the search form (order:1), and `position:static`
     cancels any inherited position:absolute from older stylesheets. */
  order:2;
  position:static !important;
  left:auto !important; right:auto !important;
  top:auto !important; bottom:auto !important;
  margin-left:auto;             /* push to the far right of the wrap */
}
.tg-filter-btn:hover{
  background:transparent;
  color:#0f172a;                /* darken icon on hover, no bg change */
  transform:none;
  box-shadow:none;
}
.tg-filter-btn:focus-visible{
  outline:none;
  color:#0f172a;
  box-shadow:0 0 0 2px rgba(15,23,42,0.18);
  border-radius:4px;
}
.tg-filter-btn i{
  /* Plain funnel glyph — no optical nudge needed without the circular bg. */
  transform:none;
}

/* Homepage CTA toggle — .tg-cta--default shows in sell/brand/market modes,
   .tg-cta--cart shows only in buy mode. Both sets live in the DOM; CSS
   flips visibility so the swap is instant on mode-toggle click. */
.tg-cta--default{display:contents}
.tg-cta--cart{display:none}
body.mode-buy .tg-cta--default{display:none}
body.mode-buy .tg-cta--cart{display:contents}
.tg-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
.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.
   Wholesale bg uses the orange-soft tone (#fde1c4) from palette-m5's
   --accent-a-soft; it pairs visually with the /wholesale landing page
   and with the orange fill used on the .path-btn--wholesale pill. */
body.mode-sell      {--hero-bg:#eaf5dd}
body.mode-buy       {--hero-bg:#d6f3ef}
body.mode-market    {--hero-bg:#efe3f7}
body.mode-brand     {--hero-bg:#dbeafe}
body.mode-wholesale {--hero-bg:#fde1c4}
/* 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}

/* Mode-specific CTA row — replaces .hero__trust for the Browse Marketplace,
   Order For Yourself, and Launch a Branded Store paths. Hidden by default;
   the matching body.mode-market / body.mode-buy / body.mode-brand rules
   below flip visibility, and .hero__trust is hidden in those same modes so
   the rhythm of the hero stays balanced (one block, not two). The
   .only-market / .only-buy / .only-brand scoping on each button comes from
   the global rules at line 661+. */
.hero__cta-row{display:none;padding-top:22px;border-top:1px solid var(--line)}
body.mode-market    .hero__trust,
body.mode-buy       .hero__trust,
body.mode-brand     .hero__trust,
body.mode-wholesale .hero__trust{display:none}
body.mode-market    .hero__cta-row,
body.mode-buy       .hero__cta-row,
body.mode-brand     .hero__cta-row,
body.mode-wholesale .hero__cta-row{display:block}

.hero__cta-btn{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:var(--accent-a);color:#fff !important;
  border-radius:14px;border:0;
  text-decoration:none;font-family:inherit;
  box-shadow:0 8px 22px rgba(99,102,241,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;max-width:480px;
}
.hero__cta-btn:hover,
.hero__cta-btn:focus,
.hero__cta-btn:visited{color:#fff !important}
.hero__cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(99,102,241,.36);
  background:var(--accent-a-hover, var(--accent-a));
}
.hero__cta-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(99,102,241,.28)}
.hero__cta-btn > i:first-child{
  flex:0 0 auto;width:44px;height:44px;border-radius:11px;
  background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:18px;color:#fff !important;
}
.hero__cta-btn > span{flex:1 1 auto;min-width:0;text-align:left;line-height:1.2}
/* white-space:nowrap keeps the title on one line so the 44px icon badge
   stays visually aligned with the title row (never sandwiched between
   two wrapped lines). Overflow ellipsis is a safety net for tiny screens. */
.hero__cta-btn b{display:block;font-size:17px;font-weight:800;color:#fff !important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero__cta-btn small{display:block;font-size:12px;color:rgba(255,255,255,.86) !important;margin-top:4px;line-height:1.3}
.hero__cta-btn__arrow{
  flex:0 0 auto;color:rgba(255,255,255,.9) !important;font-size:14px;
  transition:transform .2s ease;
}
.hero__cta-btn:hover .hero__cta-btn__arrow{transform:translateX(3px)}
.hero__cta-btn .fa-arrow-down{transition:transform .2s ease}
.hero__cta-btn:hover .fa-arrow-down{transform:translateY(3px)}
/* Per-mode CTA background variants — each button matches its role card
   from the "What would you like to do?" toggle strip so the visual
   through-line from pick-mode → hero-cta stays obvious. Each variant
   overrides both the default indigo fill and its matching drop-shadow. */
body.mode-buy    .hero__cta-btn.only-buy{
  background:var(--accent-b);
  box-shadow:0 8px 22px rgba(13,148,136,.28);
}
body.mode-buy    .hero__cta-btn.only-buy:hover{
  background:var(--accent-b-dark);
  box-shadow:0 12px 26px rgba(13,148,136,.36);
}
body.mode-market .hero__cta-btn.only-market{
  background:var(--mode-market);
  box-shadow:0 8px 22px rgba(124,58,237,.28);
}
body.mode-market .hero__cta-btn.only-market:hover{
  background:var(--mode-market-dark);
  box-shadow:0 12px 26px rgba(124,58,237,.36);
}
body.mode-brand  .hero__cta-btn.only-brand{
  background:var(--mode-brand);
  box-shadow:0 8px 22px rgba(37,99,235,.28);
}
body.mode-brand  .hero__cta-btn.only-brand:hover{
  background:var(--mode-brand-dark);
  box-shadow:0 12px 26px rgba(37,99,235,.36);
}
/* Wholesale CTA — orange fill matches the Buy Wholesale path-btn and the
   /wholesale landing page. --orange/--orange-dark are defined in the
   palette root (see top of file) and used elsewhere on .page-wholesale. */
body.mode-wholesale .hero__cta-btn.only-wholesale{
  background:var(--orange);
  box-shadow:0 8px 22px rgba(230,115,0,.28);
}
body.mode-wholesale .hero__cta-btn.only-wholesale:hover{
  background:var(--orange-dark);
  box-shadow:0 12px 26px rgba(230,115,0,.36);
}

/* 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}
/* Brand mode is quote-based — no per-shirt price fits on the card, so we
   suppress the yellow price bubble entirely and replace it with the
   .preview-contact CTA (see below). */
body.mode-brand .preview-price{display:none}

/* Brand-mode "Talk to us" chip removed 2026-04-21 — the mailto CTA now
   lives inline in .hero__cta-row beside the other mode CTAs. Keeping an
   empty .preview-contact display:none rule as a safety net in case any
   cached template still emits the element. */
.preview-contact{display:none !important}

/* 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)}
body.mode-wholesale .path-btn--wholesale{background:var(--orange);      color:#fff}
body.mode-wholesale .path-btn--wholesale 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}
/* Hide the "Untitled design" / "Auto-saved" strip for now. Markup is
   intentionally left in place in includes/main_v6.php so we can bring
   it back by deleting this one rule if the user changes their mind. */
.designer__topbar{display:none !important}
.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__loading-overlay{
  position:absolute;inset:0;z-index:50;
  background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
}
.designer__loading-spinner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#fff;font-size:14px;font-weight:600;
}
.designer__loading-spinner i{font-size:32px;animation:spin 1s linear infinite}
/* Layers panel */
.layers-list{display:flex;flex-direction:column;gap:4px}
.layer-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:8px;cursor:pointer;
  border:1.5px solid transparent;background:var(--surface-2);
  font-size:12px;font-weight:500;color:var(--text);
  transition:border-color .15s,background .15s;
}
.layer-row:hover{background:var(--surface-3)}
.layer-row.is-selected{border-color:var(--accent-a);background:rgba(99,102,241,.08)}
body.mode-buy .layer-row.is-selected{border-color:var(--accent-b);background:rgba(13,148,136,.08)}
.layer-row__icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-dim)}
.layer-row__thumb{width:28px;height:28px;flex-shrink:0;border-radius:4px;object-fit:contain;background:#e2e8f0}
.layer-row__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-row__del{
  width:22px;height:22px;flex-shrink:0;border:0;background:0;
  border-radius:6px;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  transition:color .15s,background .15s;
}
.layer-row__del:hover{background:#fee2e2;color:#dc2626}
.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}

/* "View All" pill — hidden on desktop (desktop shows every tool). The
   mobile media query below re-shows it and collapses .is-secondary
   tools behind it. */
.designer__tool--more{display:none}
.designer__eraser-opts{padding:8px 12px}
.designer__eraser-slider{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;padding:0 4px}
.designer__eraser-slider input[type="range"]{flex:1;accent-color:var(--accent-a)}
.designer__eraser-slider span:last-child{min-width:28px;text-align:right}
.swatch--two-tone{box-shadow:0 0 0 1px #cbd5e1}
.mkt-swatch--two-tone{box-shadow:0 0 0 1px var(--line)}

/* Canvas — taller (11×15 portrait print area). Padding kept tight so the
   shirt takes up as much of the designer column as possible — the checker
   backdrop is a subtle cue, not a decorative frame. */
.designer__canvas{
  display:grid;place-items:center;position:relative;padding:6px 10px;
  /* Checkerboard transparency pattern fills the entire canvas area */
  background-color:#f1f5f9;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
}
.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{
  /* Anchor top-left to pair visually with the .canvas-ruler top-right
     badge and keep clear of the .designer__sides (Front/Back/Sleeve)
     button row that sits below the canvas. Previously bottom-left, which
     overlapped the Front tab. Kept very small (9px) — it's just a status
     label, should not compete visually with the canvas content. */
  position:absolute;top:10px;left:10px;background:#fff;
  border:1px solid #e5e7eb;border-radius:4px;padding:2px 6px;
  font-size:9px;font-weight:600;color:#475569;line-height:1.25;
  z-index:1;pointer-events:none;letter-spacing:.02em;
}
.canvas-label i{color:var(--accent-a);margin-right:4px;font-size:8px}
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__sides{
  display:flex;gap:4px;justify-content:center;margin-top:10px;
  /* With 9 placements the row can overflow narrow viewports; allow
     horizontal scroll as a safety net on tablets/phones without
     breaking the wider desktop layout where they all fit in one line. */
  flex-wrap:wrap;row-gap:6px;
  /* Keep the side-tab row above any absolutely-positioned siblings
     (canvas-label, canvas-ruler) so the buttons are always clickable. */
  position:relative;z-index:3;
}
.side-tab{
  padding:6px 12px;border-radius:8px;border:1px solid #e5e7eb;
  background:#fff;font-size:12px;font-weight:600;color:#64748b;
  cursor:pointer;transition:all .15s ease;
  /* Hidden tabs (syncSurfaceTabs sets display:none per style) collapse
     cleanly without leaving gaps in the row. */
}
.side-tab:hover{background:#f8fafc;color:#334155}
.side-tab.is-active{background:var(--accent-a,#15803d);color:#fff;border-color:var(--accent-a,#15803d)}
body.mode-buy .side-tab.is-active{background:var(--accent-b,#0d9488);border-color:var(--accent-b,#0d9488)}
.side-tab i{margin-right:4px}

.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}
/* Collapsible swatches — JS measures row count and toggles .is-collapsible
   when there are more than 3 rows. Default (is-collapsible without is-expanded)
   clips to the first 3 rows via max-height. Each row = ~34px swatch + 8px gap. */
.swatches.is-collapsible{
  max-height:126px; /* 3 rows: (34px × 3) + (8px gap × 3) */
  overflow:hidden;
  transition:max-height .2s ease;
}
.swatches.is-collapsible.is-expanded{
  max-height:2000px; /* large enough to show all rows */
}
.swatches-more-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:6px 10px;
  background:transparent;border:1px solid var(--line);border-radius:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-mute);cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.swatches-more-btn[hidden]{display:none !important}
.swatches-more-btn:hover{color:var(--brand);border-color:var(--brand);background:var(--surface-2)}
.swatches-more-btn__chev{transition:transform .2s ease;font-size:10px}
.swatches-more-btn.is-expanded .swatches-more-btn__chev{transform:rotate(180deg)}
.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)}

/* Mockup model picker (Original / Arms / Real / Flat) — shown in the v6
   designer side panel for styles that have alternate model mockups on
   the CDN. Pills sit in a horizontal row and wrap on narrow screens. */
.v6-model-picker{display:flex;flex-wrap:wrap;gap:8px}
.v6-model-opt{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em;color:#475569;
  cursor:pointer;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
}
.v6-model-opt[hidden]{display:none !important}
.v6-model-opt:hover{color:var(--brand);border-color:var(--brand);background:var(--surface-2)}
.v6-model-opt.is-selected{
  background:var(--accent-b);border-color:var(--accent-b);color:#fff;
  box-shadow:0 0 0 2px rgba(15,23,42,.06);
}
.v6-model-opt.is-selected:hover{background:var(--accent-b);color:#fff}
.v6-model-opt__icon{font-size:13px;line-height:1;display:inline-flex;align-items:center}
.v6-model-opt__label{line-height:1}

.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)}

/* Mode-gated content. The selectors below are deliberately compound
   (tag+class) so they outrank container rules like
   `.preview-overlay span{display:block}` or
   `.hero__kicker span{display:inline}` which were previously leaving all
   four mode variants visible in the hero overlay at once. */
.only-sell,.only-buy,.only-market,.only-brand,.only-wholesale,
span.only-sell,span.only-buy,span.only-market,span.only-brand,span.only-wholesale,
small.only-sell,small.only-buy,small.only-market,small.only-brand,small.only-wholesale,
a.only-sell,a.only-buy,a.only-market,a.only-brand,a.only-wholesale{display:none}
body.mode-sell      .only-sell,
body.mode-sell      span.only-sell,
body.mode-sell      small.only-sell{display:block}
body.mode-buy       .only-buy,
body.mode-buy       span.only-buy,
body.mode-buy       small.only-buy{display:block}
body.mode-market    .only-market,
body.mode-market    span.only-market,
body.mode-market    small.only-market{display:block}
body.mode-brand     .only-brand,
body.mode-brand     span.only-brand,
body.mode-brand     small.only-brand{display:block}
body.mode-wholesale .only-wholesale,
body.mode-wholesale span.only-wholesale,
body.mode-wholesale small.only-wholesale{display:block}
/* .hero__cta-btn is display:flex, not block — overrides for anchor/flex */
body.mode-wholesale a.only-wholesale.hero__cta-btn,
body.mode-buy       a.only-buy.hero__cta-btn,
body.mode-market    a.only-market.hero__cta-btn,
body.mode-brand     a.only-brand.hero__cta-btn{display:flex}
/* 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}
.tg-footer .tg-logo b{color:#60a5fa}
.tg-footer .tg-logo__mark{background:#60a5fa}
body.page-marketplace .tg-footer .tg-logo b{color:#a78bfa}
body.page-marketplace .tg-footer .tg-logo__mark{background:#a78bfa}
body.page-wholesale .tg-footer .tg-logo b{color:#fb923c}
body.page-wholesale .tg-footer .tg-logo__mark{background:#fb923c}
body.page-cart .tg-footer .tg-logo b{color:#86efac}
body.page-cart .tg-footer .tg-logo__mark{background:#4ade80}
/* Social icons sit under the footer brand tagline on the left column.
   Circle background (#1f2937) + subtle hover lift — matches dark footer tone
   without fighting the muted `.tg-footer a{color:#94a3b8}` rule above. */
.tg-footer__social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.tg-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#1f2937;color:#cbd5e1;font-size:15px;transition:background .15s ease,color .15s ease,transform .15s ease}
.tg-footer__social a:hover{background:#22c55e;color:#fff;transform:translateY(-2px)}
.tg-footer__social a:focus-visible{outline:2px solid #22c55e;outline-offset:2px}

/* Brand block on the left-most footer column. Replaces the inline
   styles that used to live on .tg-logo and the tagline paragraph so
   the shared footer include stays markup-only. */
.tg-footer__logo{margin-bottom:14px}
.tg-footer__tagline{font-size:14px;max-width:320px;margin:0}

/* DMCA / "Report Copyright Infringement" footer link — surfaced only on
   marketplace pages (listing + product detail) where buyers may want to
   report an infringing listing. Hidden everywhere else so the footer
   stays uncluttered on non-shopping pages. The marketplace-product page
   also carries the `page-marketplace` body class, but we target both
   explicitly for safety. */
.tg-footer__dmca{display:none}
body.page-marketplace .tg-footer__dmca,
body.page-marketplace-product .tg-footer__dmca{display:list-item}
.tg-footer__dmca a{font-weight:600}

/* Responsive collapse for the 5-column footer grid. Desktop stays 5-up;
   tablet drops the brand column to full-width and collapses the link
   columns to 2×2; phone stacks everything. */
@media (max-width: 960px){
  .tg-footer__grid{grid-template-columns:repeat(2, 1fr);gap:28px}
  .tg-footer__brand{grid-column:1 / -1}
  .tg-footer__tagline{max-width:none}
  .tg-footer__bottom{flex-direction:column;gap:6px;text-align:center}
}
@media (max-width: 520px){
  .tg-footer__grid{grid-template-columns:1fr;gap:22px}
}

/* =========================================================
   DOC / LEGAL PAGES — terms, privacy, about
   Shared wrapper for long-form copy pages. Hero gives the page a
   title strip that matches marketplace / wholesale / apps; .tg-doc
   below the hero is a narrower prose column for readability. The
   hero uses .wrap (inherits the 1440px page width) but the prose
   column caps itself at 820px for line-length comfort.
   ========================================================= */
.tg-doc-hero{background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%);padding:56px 0 32px;border-bottom:1px solid #e5e7eb}
.tg-doc-hero .wrap{text-align:left}
.tg-doc-hero__kicker{display:inline-flex;align-items:center;gap:6px;background:#dcfce7;color:#166534;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-bottom:14px}
.tg-doc-hero h1{font-size:44px;line-height:1.15;margin:0 0 12px;color:#0f172a;font-weight:800;letter-spacing:-.02em}
.tg-doc-hero__lead{font-size:18px;color:#475569;max-width:720px;margin:0}
.tg-doc-hero__meta{margin-top:14px;font-size:13px;color:#64748b}
.tg-doc{padding:48px 0 72px;background:#fff}
.tg-doc .wrap{max-width:820px}
.tg-doc h2{font-size:26px;margin:36px 0 14px;color:#0f172a;font-weight:700;letter-spacing:-.01em}
.tg-doc h3{font-size:19px;margin:28px 0 10px;color:#0f172a;font-weight:700}
.tg-doc h4{font-size:16px;margin:22px 0 8px;color:#0f172a;font-weight:700}
.tg-doc p{font-size:15.5px;line-height:1.7;color:#334155;margin:0 0 14px}
.tg-doc ul,.tg-doc ol{margin:0 0 16px 22px;padding:0}
.tg-doc li{font-size:15.5px;line-height:1.7;color:#334155;margin-bottom:6px}
.tg-doc a{color:#15803d;text-decoration:underline;text-decoration-color:#86efac;text-underline-offset:3px}
.tg-doc a:hover{color:#14532d;text-decoration-color:#22c55e}
.tg-doc strong{color:#0f172a}
.tg-doc__toc{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px 24px;margin:0 0 32px}
.tg-doc__toc h4{margin:0 0 10px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:#64748b;font-weight:700}
.tg-doc__toc ol{margin:0;padding-left:22px;columns:2;column-gap:36px}
.tg-doc__toc li{margin-bottom:6px;font-size:14px;break-inside:avoid}
.tg-doc__notice{background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:14px 18px;margin:0 0 28px;font-size:14px;color:#78350f}
.tg-doc__callout{background:#f0f9ff;border-left:4px solid #0284c7;border-radius:6px;padding:14px 18px;margin:22px 0;color:#075985;font-size:14.5px}
@media(max-width:768px){
  .tg-doc-hero{padding:40px 0 24px}
  .tg-doc-hero h1{font-size:32px}
  .tg-doc-hero__lead{font-size:16px}
  .tg-doc{padding:32px 0 56px}
  .tg-doc__toc ol{columns:1}
}

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

/* Tablet landscape (≤ 1200px) — nav hides, hamburger takes over */
@media (max-width:1200px){
  .tg-header .wrap{display:flex;align-items:center;gap:16px}
  .tg-nav{display: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-search{order:1;flex:1 1 auto;min-width:0}
  .tg-search-wrap{order:1;flex:1 1 auto;min-width:0}
  .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}
  /* Keep the tagline visible on mobile — shoppers land on /marketplace or
     /wholesale from search/social and the tagline is the quickest signal of
     which storefront they're on. Just shrink it a notch so the header stays
     compact at ≤768px. */
  .tg-logo__tag{display:block;font-size:9px;margin-top:0;letter-spacing:.03em}
  .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}

  .hero__cta-row{padding-top:18px}
  .hero__cta-btn{padding:14px 16px;gap:12px;max-width:100%}
  .hero__cta-btn > i:first-child{width:40px;height:40px;font-size:16px}
  .hero__cta-btn b{font-size:15px}
  .hero__cta-btn 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{top:12px;bottom:auto;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;
    /* Swapped horizontal scroll for wrap: only 4 popular tools show by
       default (plus the "View All" pill at the end), so there's no need
       for a scrollbar. When expanded the secondary tools wrap below. */
    flex-direction:row;flex-wrap:wrap;padding:10px;gap:6px;
    overflow-x:visible;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;
  }
  /* Collapse secondary tools on mobile until "View All" is pressed. */
  .designer__tools .designer__tool.is-secondary{display:none}
  .designer__tools.is-expanded .designer__tool.is-secondary:not([hidden]){
    display:inline-flex;
  }
  /* ------------------------------------------------------------------
     Mobile: icon-only tools EXCEPT Upload Image + the Show All pill.
     Tool labels live as bare text nodes on the buttons (no wrapper span
     on most), so font-size:0 is the only reliable way to hide them.
     Icon font-size is restored via `> i`. When the user taps Show All,
     .is-expanded is added to the tools list and our :not(.is-expanded)
     match breaks, so every label reappears.
     NOTE: this block previously lived in css/style.css, which is NOT
     loaded on /design (main_v6.php only loads v6.css) — so the rule
     never applied. Ported here with !important so future shared tool
     rules above can't re-inflate the labels.
     ------------------------------------------------------------------ */
  .designer__tools:not(.is-expanded) .designer__tool:not(#v6UploadBtn):not(.designer__tool--more){
    font-size:0 !important;
    padding:10px 12px !important;
    min-width:42px;
    gap:0;
    justify-content:center;
  }
  .designer__tools:not(.is-expanded) .designer__tool:not(#v6UploadBtn):not(.designer__tool--more) > i{
    font-size:15px !important;
    margin-right:0 !important;
  }
  /* Belt-and-suspenders: also zero any inner spans (js-expand-label etc.)
     in case a future button uses a wrapping element instead of bare text. */
  .designer__tools:not(.is-expanded) .designer__tool:not(#v6UploadBtn):not(.designer__tool--more) > span{
    display:none !important;
  }
  /* Upload Image keeps its label on mobile — it's the primary CTA. */
  .designer__tools:not(.is-expanded) #v6UploadBtn{
    font-size:12px !important;
    padding:10px 12px !important;
  }
  .designer__tools:not(.is-expanded) #v6UploadBtn > i{
    font-size:14px !important;
    margin-right:6px !important;
  }
  /* Show All pill keeps its label so users can discover the toggle. */
  .designer__tools:not(.is-expanded) .designer__tool--more{
    font-size:12px !important;
    padding:10px 12px !important;
  }
  .designer__tools:not(.is-expanded) .designer__tool--more > i{
    font-size:14px !important;
    margin-right:6px !important;
  }
  /* Show the "View All" pill on mobile — always last in the row. */
  .designer__tool--more{
    order:999; display:inline-flex !important;
    background:#eef2ff;border-color:#c7d2fe;color:#4338ca;
  }
  .designer__tool--more:hover{
    border-color:#6366f1;color:#3730a3;background:#e0e7ff;
  }
  .designer__tool--more i{color:inherit}
  .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{font-size:10px;padding:4px 8px;top:10px;right:10px}
  /* Canvas label stays tiny + subtle on mobile — it's a status indicator,
     NOT a call-out. We've chased this bug 3×; the repeat cause was the old
     shared "canvas-ruler,.canvas-label{font-size:10px;padding:4px 8px}"
     override bumping the base 9px up to 10px and adding 4px/8px padding,
     plus "bottom:10px;left:10px" moving it over the Front/Back tabs.
     Every property here is !important so no future edit re-inflates it. */
  /* Canvas-label must visually pair with .canvas-ruler on mobile — same
     padding, border-radius, background, and border so they read as a set. */
  .canvas-label{
    font-size:10px !important;
    padding:4px 8px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    color:#475569 !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:6px !important;
    top:10px !important;
    left:10px !important;
    bottom:auto !important;
    right:auto !important;
    max-width:60% !important;
  }
  .canvas-label i{
    font-size:9px !important;
    margin-right:4px !important;
  }
  /* Empty-prompt is subtle on phones — small icon, 1-line text. */
  .v6-canvas-empty-prompt{padding:10px;border-radius:6px}
  .v6-canvas-empty-prompt__inner{gap:6px}
  .v6-canvas-empty-prompt__inner i{font-size:22px}
  .v6-canvas-empty-prompt__text{font-size:13px}
  .designer__sides{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:3px;padding-bottom:2px}
  .side-tab{padding:5px 10px;font-size:11px;flex:0 0 auto;white-space:nowrap}
  .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%}

  .hero__cta-btn{padding:13px 14px}
  .hero__cta-btn b{font-size:14px}
  .hero__cta-btn small{font-size:10.5px;line-height:1.3}

  .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}
  /* Homepage marketplace grid — compact 3-up row on phones. The previous
     1fr (full-width stack) made the 12 cards dominate the page. We now
     shrink each card (icon, text, padding) so three fit comfortably on
     a 360-400px viewport and the block reads as a row of channel badges
     rather than a huge stacked list. */
  .markets__grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .market-card{padding:10px 6px;border-radius:10px}
  .market-card i{font-size:18px;margin-bottom:5px}
  .market-card b{font-size:10px;line-height:1.15}
  .market-card span{font-size:9px;line-height:1.2}

  .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    ,
body.mode-wholesale .preview__stub--wholesale{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;
}

/* Wholesale: stacked case-pack icons — suggests bulk/cartons rather than a
   single garment. Orange gradient matches the /wholesale landing page tone. */
.preview__stub--wholesale{
  background:linear-gradient(160deg,#fde6cb 0%,#f7b26a 100%);
}
.preview__stub--wholesale .stub__wholesale{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.preview__stub--wholesale .stub__case{
  width:120px;height:70px;background:#fff;border-radius:12px;
  display:grid;place-items:center;font-size:30px;color:var(--orange);
  box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.preview__stub--wholesale .stub__case:nth-child(1){transform:translateX(-20px)}
.preview__stub--wholesale .stub__case:nth-child(2){z-index:2;font-size:36px}
.preview__stub--wholesale .stub__case:nth-child(3){transform:translateX(20px)}

/* 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-wholesale .preview-overlay i{background:#fde1c4;               color:var(--orange)}
body.mode-market    .preview-price{background:var(--mode-market);color:#fff}
body.mode-brand     .preview-price{background:var(--mode-brand); color:#fff}
body.mode-wholesale .preview-price{background:var(--orange);     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-wholesale .hero__kicker{background:#fde1c4;                color:var(--orange-dark)}
body.mode-market    .hero h1 em{color:var(--mode-market)}
body.mode-brand     .hero h1 em{color:var(--mode-brand)}
body.mode-wholesale .hero h1 em{color:var(--orange)}
body.mode-wholesale .hero h1 u {color:var(--orange-dark)}

/* 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;
  flex-shrink:0;
}
.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;
  flex-shrink:0;
}
/* Horizontal-scroll brand/category row. The native scrollbar was painting
   over the pill buttons on Windows/Chrome (default scrollbars eat ~15px of
   vertical space but the row is only ~40px tall), so we hide the scrollbar
   entirely — the row still scrolls via wheel/trackpad/touch, and the
   fade-out mask on the right edge signals that there's more to see. */
.shirt-modal__filters--scroll{
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:10px 22px;
  scrollbar-width:none;-ms-overflow-style:none;
  position:relative;flex-shrink:0;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.shirt-modal__filters--scroll::-webkit-scrollbar{display:none;height:0;width:0}
.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;overflow-y:auto;-webkit-overflow-scrolling:touch;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;
  flex-shrink:0;
}
.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;align-items:stretch;justify-content:stretch}
  /* iOS Safari treats 100vh as viewport *excluding* the URL bar, so the
     card was taller than the actual visible area — the close button at
     the top got pushed above the viewport. Use 100dvh (dynamic viewport
     height) and fall back to 100vh for browsers without dvh support. */
  .shirt-modal__card{
    max-height:100vh; max-height:100dvh;
    height:100vh;    height:100dvh;
    max-width:100%;border-radius:0;
  }
  .shirt-modal__head{flex-wrap:wrap;gap:10px;padding:14px 16px;padding-right:56px}
  .shirt-modal__title{font-size:16px}
  .shirt-modal__filters{padding:8px 16px}
  .shirt-modal__filters--scroll{padding:6px 16px}
  .shirt-modal__body{padding:14px 16px}
  .shirt-modal__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .shirt-modal__foot{padding:10px 16px;flex-wrap:wrap;gap:8px}
  .shirt-modal__foot-info{flex:1 1 100%;font-size:12px}
  /* Pin the close to the viewport corner so it never scrolls out of
     reach on long filter lists or when the fill-panel takes over. */
  body.page-v6 .shirt-modal__close{
    position:fixed;top:10px;right:10px;z-index:20;
    width:40px;height:40px;border-radius:999px;
    background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.18);
    border:1px solid var(--line);
  }
  /* Templates "fill this in" preview: on phones the canvas + fields side-
     by-side wrap to a column; preview shrinks so the fields stay reachable. */
  .templates-fill__body{flex-direction:column}
  .templates-fill__preview{max-height:38vh;aspect-ratio:11/15}
}

/* =========================================================
   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:44px;height:44px;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}
@media(max-width:1200px){
  .tg-burger{display:inline-flex}
}

/* 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{
  --canvas-max-h:85vh;
  position:relative;
  width:min(680px, 100% - 16px, calc(var(--canvas-max-h) * 3 / 4));
  aspect-ratio:3/4;
  margin:0 auto;
  overflow:hidden;
  max-height:var(--canvas-max-h);
}
.v6-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.v6-canvas--shirt{z-index:1}

/* Printable-area overlay. Positioned absolutely inside .v6-canvas-wrap with
   top/left/width/height set inline by the designer JS (computed from the
   ImageHandler geometry values for the selected style). The design canvas
   lives inside this box so what you see is exactly what will print. */
.v6-print-area{
  position:absolute;
  z-index:2;
  outline:2px dashed rgba(255,255,255,.75);
  outline-offset:-2px;
  /* Physical print area is always 11"×15" — locking the aspect-ratio here
     prevents uploaded designs from stretching when a style's geometry box
     doesn't perfectly match 11:15. The designer JS sets left/top/width as
     inline %s based on the style's geometry and leaves height to derive
     from aspect-ratio so the overlay stays true to the real print canvas. */
  aspect-ratio:11/15;
  /* Defaults — overwritten inline per-style by the designer JS. */
  top:25%;left:25%;width:50%;
}
body.mode-buy .v6-print-area{outline-color:rgba(234,88,12,.85)}
.v6-print-area::before{
  content:"";position:absolute;top:-6px;left:-6px;width:10px;height:10px;
  background:var(--accent-a);border-radius:2px;pointer-events:none;
}
body.mode-buy .v6-print-area::before{background:var(--accent-b)}
.v6-canvas--design{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:3;
}

/* Empty-state prompt — overlays the entire .v6-print-area when no design
   layers exist yet. Acts as a giant click target that opens the file
   picker. Must sit ABOVE the design canvas (z-index:4) so pointer events
   land on the button, not the (empty) canvas below. Fully centered both
   vertically and horizontally within the print area.
   Hidden by default; revealed only while the sibling .v6-canvas--design
   carries the .is-empty class (toggled by updateEmptyClass()). This
   prevents the prompt from briefly flashing over an already-populated
   canvas during redraws. */
.v6-canvas-empty-prompt{
  position:absolute;
  inset:0;
  z-index:4;
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
  padding:16px;
  background:rgba(255,255,255,.45);
  border:2px dashed rgba(15,23,42,.25);
  border-radius:8px;
  color:#334155;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.v6-canvas--design.is-empty ~ .v6-canvas-empty-prompt{display:flex}
.v6-canvas-empty-prompt:hover,
.v6-canvas-empty-prompt:focus-visible{
  background:rgba(255,255,255,.7);
  border-color:rgba(15,23,42,.55);
  color:#0f172a;
  outline:none;
}
.v6-canvas-empty-prompt__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  pointer-events:none; /* clicks fall through to the button itself */
}
.v6-canvas-empty-prompt__inner i{
  font-size:26px;
  line-height:1;
  color:inherit;
  opacity:.85;
}
.v6-canvas-empty-prompt__text{
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.01em;
}
/* (Hide selector inverted above — prompt is display:none by default and
    only shown when the sibling design canvas has .is-empty.) */

/* Dimension readout — orange pill that appears next to the selected
   layer during resize, showing the layer's current W × H in inches.
   Positioned inline by the designer JS (top/left set each mousemove).
   Hidden by default; unhidden + repositioned whenever a layer is
   selected so the badge also acts as "info for this layer". */
.v6-dim-badge{
  position:absolute;z-index:5;pointer-events:none;
  background:#0f172a;color:#fff;
  padding:3px 8px;border-radius:4px;
  font-size:10px;font-weight:700;font-family:"Inter",sans-serif;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transform:translate(-50%, calc(-100% - 6px));
}
.v6-dim-badge::after{
  content:"";position:absolute;top:100%;left:50%;
  border:4px solid transparent;border-top-color:#0f172a;
  transform:translateX(-50%);
}

/* Expanded workable area — the "Expand area" tool hides the shirt
   mockup and swaps the print-area overlay to span the full canvas
   (handled by the designer JS). A faint checker backdrop helps
   identify transparent areas while the shirt is hidden. */
.v6-canvas-wrap.is-expanded{
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%),
    #ffffff;
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
}
.v6-canvas-wrap.is-expanded .v6-canvas--shirt{display:none}
.v6-canvas-wrap.is-expanded .v6-print-area{
  outline-color:rgba(15,23,42,.45);
  box-shadow:none;
}

/* Toggle active state for the Expand button — mirrors the is-active
   look used by upload/text/templates. */
.designer__tool#v6ExpandBtn.is-active{
  background:var(--accent-a, #15803d);
  color:#fff;
  border-color:var(--accent-a, #15803d);
}

/* Mobile (≤768px): tighten header spacing, re-order designer */
@media (max-width:768px){
  /* Tighten the flex header gaps + padding for phone screens */
  .tg-header .wrap{gap:10px;padding:0 16px}
  .tg-search{display:none}
  .tg-search-wrap{display:none}

  /* Storefront pages (marketplace/wholesale/cart) need the search on mobile
     too — finding a product is the primary task. Drop it onto its own row
     below the top bar by allowing the flex header to wrap, and flex-basis
     100% on the wrap. Scoped so only storefront pages get it; sell/home/
     pricing/etc. keep the tight 56px header. The filter icon inside the
     wrap is revealed here (it's hidden on desktop). */
  body.page-marketplace .tg-header .wrap,
  body.page-marketplace-product .tg-header .wrap,
  body.page-wholesale .tg-header .wrap{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  body.page-marketplace .tg-header .tg-search,
  body.page-marketplace-product .tg-header .tg-search,
  body.page-wholesale .tg-header .tg-search{display:flex;flex:1 1 auto;min-width:0;margin:0}
  body.page-marketplace .tg-header .tg-search-wrap,
  body.page-marketplace-product .tg-header .tg-search-wrap,
  body.page-wholesale .tg-header .tg-search-wrap{display:flex;order:3;flex:1 1 100%;min-width:0;margin:0;flex-wrap:nowrap;align-items:center;gap:6px}
  body.page-marketplace .tg-header .tg-filter-btn,
  body.page-marketplace-product .tg-header .tg-filter-btn,
  body.page-wholesale .tg-header .tg-filter-btn{display:inline-flex;flex:0 0 auto;align-self:center;margin-left:4px}
  /* Defensive: never let the form inside the wrap grab 100% width — the
     filter button must sit to its right on the SAME row. Some legacy
     rules set `.tg-search` to width:100% which nuked the filter slot. */
  body.page-marketplace .tg-header .tg-search-wrap .tg-search,
  body.page-marketplace-product .tg-header .tg-search-wrap .tg-search,
  body.page-wholesale .tg-header .tg-search-wrap .tg-search{flex:1 1 auto;min-width:0;width:auto}
  /* Header height variable grows to fit the wrapped search row so sticky
     offsets / pt padding on hero sections still clear the header. */
  body.page-marketplace,
  body.page-marketplace-product,
  body.page-wholesale{--tg-header-h:108px}

  /* 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{--canvas-max-h:68vh}
}

@media (max-width:480px){
  .v6-canvas-wrap{--canvas-max-h:60vh}
  .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;
}
/* The plain <div hidden> attribute resolves to `display:none` at UA level,
   but `.text-tools { display:flex }` has equal specificity and wins because
   it comes later — which caused the text input to leak in before a text
   layer was selected. Force `hidden` to hide with a matching-specificity
   selector. */
.text-tools[hidden]{display:none !important}
.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)}

/* ---------- Flip & Rotate tools panel (designer right column) ----------
   Mirrors the visual style of .text-tools. Each action has its own button
   instead of the old click/shift/alt modifier combo, so the transforms
   are discoverable to users. */
.flip-rotate-tools{
  display:flex;flex-direction:column;gap:10px;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;
  margin-top:10px;
}
.flip-rotate-tools[hidden]{display:none !important}
.flip-rotate-tools__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.flip-rotate-tools__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 6px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--text);font-size:11px;font-weight:700;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.flip-rotate-tools__btn i{font-size:16px;color:var(--text-mute)}
.flip-rotate-tools__btn:hover{border-color:var(--brand);color:var(--brand)}
.flip-rotate-tools__btn:hover i{color:var(--brand)}
.flip-rotate-tools__btn[aria-pressed="true"]{
  background:var(--brand,#025077);border-color:var(--brand,#025077);color:#fff;
}
.flip-rotate-tools__btn[aria-pressed="true"] i{color:#fff}
.flip-rotate-tools__btn.is-disabled{
  opacity:.45;pointer-events:none;
}
.flip-rotate-tools__hint{
  font-size:11px;color:var(--text-mute);text-align:center;line-height:1.4;
}
/* Active state for the main toggle in the designer tool row */
body.page-v6 .designer__tool.is-active,
.designer__tool.is-active{
  background:var(--brand,#025077);border-color:var(--brand,#025077);color:#fff;
}
body.page-v6 .designer__tool.is-active i,
.designer__tool.is-active i{color:#fff}

/* ---------- 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:280px 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;
  aspect-ratio:11/15;width:100%;align-self:start;
}
.templates-fill__preview canvas{width:100%;height:100%;display:block;object-fit:contain}
.templates-fill__fields{
  display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;
}
/* Smooth collapse for gallery sections when fill panel is open.
   IMPORTANT: overflow:hidden must ONLY apply to the collapsed state,
   NOT the base rule — otherwise it kills .shirt-modal__body scrolling
   (which needs overflow:auto for mobile scroll). */
.shirt-modal__filters,
.shirt-modal__head .shirt-modal__search{
  transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  overflow:hidden;
}
.shirt-modal__body{
  transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  /* overflow is set to auto in the base rule (line ~914) — do NOT
     override it here; that broke mobile scroll. The collapsed state
     below applies overflow:hidden only when the panel is actually
     collapsed. */
}
.shirt-modal__body.is-collapsed,
.shirt-modal__filters.is-collapsed,
.shirt-modal__head .shirt-modal__search.is-collapsed{
  max-height:0 !important;opacity:0;padding-top:0;padding-bottom:0;
  border-bottom-color:transparent;pointer-events:none;overflow:hidden;
}

/* ---------- 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-fill__preview{max-height:38vh;aspect-ratio:11/15}
  .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;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}
/* Category tag (pill) on marketplace product cards. Renders inline so
   multiple tags can sit side-by-side in the future. Kept small & quiet
   so it supports rather than competes with the title + price. */
body.page-v6 .product-card__category{
  display:inline-block;
  margin-top:6px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--brand);
  background:rgba(67,97,238,.08);
  border:1px solid rgba(67,97,238,.18);
  border-radius:999px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body.page-v6 .product-card:hover .product-card__category{
  background:rgba(67,97,238,.14);
  border-color:rgba(67,97,238,.32);
}
/* Muted helper line (e.g. "Inventory pending" on wholesale cards). */
body.page-v6 .product-card__hint{
  font-size:12px;
  color:var(--text-dim);
  margin-top:4px;
  font-style:italic;
}
body.page-v6 .product-card__badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
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:1080px;margin:0 auto;padding:60px 0}
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}
/* Force full-width on both states — a closed <details> was rendering at
   shrink-to-fit in some browsers, making the question cards visibly
   narrower than their expanded counterparts. display:block + width:100% +
   box-sizing keeps every card at header (.wrap) width regardless of state. */
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;display:block;width:100%;box-sizing:border-box}
body.page-v6.page-pricing .faq details[open]{width:100%}
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;width:100%}
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 64px;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{padding:60px 0;width:100%;max-width:1080px}
/* Print-pricing and Common-questions sections match the page container
   (1440px + 36px horizontal padding — same as .tg-header .wrap / .tg-footer
   .wrap) so their cards/tables line up with the header and the rest of the
   page instead of sitting in a narrower centered column. */
body.page-v6.page-pricing .print-pricing .wrap,
body.page-v6.page-pricing .faq .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
@media(max-width:640px){
  body.page-v6.page-pricing .print-pricing .wrap,
  body.page-v6.page-pricing .faq .wrap{padding:0 16px}
}

/* Seller product-pricing table — denser than .price-table (many rows, six
   columns) and uses section-heading rows to group Best Sellers / Adult /
   Kids / Accessories. Mirrors cp/functions.php::printPricingTableRow. */
body.page-v6.page-pricing .seller-pricing{padding:60px 0;background:var(--surface)}
body.page-v6.page-pricing .seller-pricing .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
body.page-v6.page-pricing .seller-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 .seller-pricing p.sub{text-align:center;color:var(--text-mute);margin:0 0 30px}
body.page-v6.page-pricing .seller-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 .seller-price-table table{width:100%;border-collapse:collapse}
body.page-v6.page-pricing .seller-price-table th{background:var(--surface);padding:13px 16px;text-align:left;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid var(--line)}
body.page-v6.page-pricing .seller-price-table th.num{text-align:right}
body.page-v6.page-pricing .seller-price-table td{padding:12px 16px;font-size:14px;color:var(--text);border-bottom:1px solid var(--line)}
body.page-v6.page-pricing .seller-price-table td.num{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
body.page-v6.page-pricing .seller-price-table td.num.na{color:var(--text-dim);font-weight:500}
body.page-v6.page-pricing .seller-price-table td.ship{color:var(--text-mute);font-size:12px}
body.page-v6.page-pricing .seller-price-table tr.section td{background:#f8fafc;font-size:12px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.06em;padding:10px 16px;border-top:1px solid var(--line)}
body.page-v6.page-pricing .seller-price-table tr:last-child td{border-bottom:none}
body.page-v6.page-pricing .seller-price-note{text-align:center;color:var(--text-mute);font-size:13px;margin:18px 0 0}
@media(max-width:720px){
  body.page-v6.page-pricing .seller-price-table{overflow-x:auto}
  body.page-v6.page-pricing .seller-price-table table{min-width:640px}
}
@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}

/* Wholesale pagination — rendered below the .product-grid when the style
   list exceeds 100 rows. Combines Prev/Next buttons with a numbered list
   that collapses long ranges via "…" gaps (see wholesale_v6.php for the
   windowing logic). Designed to match the neutral surface palette used
   elsewhere so it sits quietly under the grid. */
body.page-v6 .ws-pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  padding:36px 0 48px;
}
body.page-v6 .ws-pager__btn,
body.page-v6 .ws-pager__num{
  display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:0 14px;
  font-size:14px;font-weight:700;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  text-decoration:none;line-height:1;cursor:pointer;transition:border-color .15s,background .15s;
}
body.page-v6 .ws-pager__num{padding:0 12px;min-width:38px;justify-content:center}
body.page-v6 .ws-pager__btn:hover,
body.page-v6 .ws-pager__num:hover{border-color:var(--accent-a);background:var(--surface)}
body.page-v6 .ws-pager__btn.is-disabled{
  color:var(--text-dim);background:var(--surface);cursor:default;pointer-events:none;
}
body.page-v6 .ws-pager__num.is-current{
  background:var(--accent-a);border-color:var(--accent-a);color:#fff;cursor:default;
}
body.page-v6 .ws-pager__num.is-current:hover{background:var(--accent-a)}
body.page-v6 .ws-pager__list{
  display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;
}
body.page-v6 .ws-pager__gap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:38px;color:var(--text-mute);font-weight:700;user-select:none;
}
body.page-v6 .ws-pager__meta{
  flex-basis:100%;text-align:center;margin-top:6px;
  font-size:12px;color:var(--text-mute);font-weight:600;
}
@media(max-width:560px){
  body.page-v6 .ws-pager__btn{padding:0 10px;font-size:13px}
  body.page-v6 .ws-pager__num{padding:0 10px;min-width:34px;font-size:13px}
}

/* ============================================================
   V6 MARKETPLACE PRODUCT DETAIL — /marketplace/product/{slug}
   ----
   NOTE: The original `.mkt-product__info` / `.mkt-product__media`
   rule block that lived here was deleted 2026-04-19. It targeted
   an earlier iteration of the product HTML and conflicted via
   specificity with the redesigned `.mkt-pmedia` / `.mkt-pinfo`
   rules lower down in this file (see "Product grid layout"
   section). The mobile `.mkt-product__grid` breakpoint is now
   declared alongside those new rules.
   ============================================================ */
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__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}

/* 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}

/* Hero's inner .wrap needs the same width constraints as .tg-header > .wrap
   (1440px max, 36px side padding) so the heading aligns with the logo and
   nav instead of bleeding to the viewport edge. Base .wrap has no width
   rules by default — it's only scoped inside .tg-header / .tg-footer. */
body.page-v6 .mkt-hero > .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
@media(max-width:640px){ body.page-v6 .mkt-hero > .wrap{padding:0 16px} }

/* Marketplace hero uses the default surface/brand palette — the purple
   treatment was reverted 2026-04-15 (user preferred the subtler look).
   Purple is retained only on the Marketplace nav button; see
   `.tg-nav a[href="/marketplace"]` below. */

/* 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;
  z-index:300;
  overflow:visible;
}
body.page-v6 .mkt-toolbar--brands{
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  padding:6px 0;
}
/* 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-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)}
/* Avatar variant — swaps the fa-user glyph for the seller's uploaded
   photo (or the platform default). Inner <img> fills the button and
   is fully rounded; hover still highlights the outer border. */
body.page-v6 .tg-icon-btn--avatar{padding:0;overflow:hidden;border-radius:50%}
body.page-v6 .tg-icon-btn--avatar img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
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 36px 60px;max-width:1440px;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;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);margin-bottom:6px;
}
body.page-v6.page-cart .cart-item__meta span,
body.page-v6.page-cart .cart-item__meta b{display:inline-flex;align-items:center}
/* Placement list (print positions — front, back, lsleeve, rsleeve, etc.)
   can be long enough to overflow the card on legacy styles with every
   surface enabled. Override the atomic inline-flex above so the text
   wraps to the next line instead of getting clipped. flex-basis:100%
   pushes it onto its own row below the size/colour/style chips. */
body.page-v6.page-cart .cart-item__meta .cart-item__placement{
  display:block;flex-basis:100%;white-space:normal;word-break:break-word;line-height:1.45;
}
body.page-v6.page-cart .cart-item__meta b{color:var(--text);font-weight:700;font-size:13px}
body.page-v6.page-cart .cart-item__meta b + b::before{content:"·";color:var(--text-dim);font-weight:400;margin-right:6px}
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;
}
/* Match the top-nav treatment: marketplace = purple, wholesale = orange.
   Same tokens as .tg-nav a[href=...].is-active so the cart chip and the
   nav button stay visually linked. */
body.page-v6.page-cart .cart-item__type--marketplace{
  background:var(--mode-market);color:#fff;
}
body.page-v6.page-cart .cart-item__type--wholesale{
  background:var(--orange);color:#fff;
}
body.page-v6.page-cart .cart-item__type--custom{
  background:#d9e8f0;color:#1e3a4f;
}
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}
/* Inline per-line error slot — populated by the AJAX client when a qty/
   remove call fails (stock limit, session expiry, invalid qty, network).
   Spans the full cart-item grid so the message sits below the row. */
body.page-v6.page-cart .cart-item__error{
  grid-column:1/-1;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;
  margin-top:4px;
}
body.page-v6.page-cart .cart-item__error[hidden]{display:none !important}
@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}
body.page-v6 .checkout-currency-note{font-size:13px;color:var(--text-dim);margin:8px 0 0;padding:0 4px}

/* 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:visible;
  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;border-radius:inherit}
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;z-index:10;
  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}
/* Small reassurance line under the specific vendor error message in the
   failed-payment banner. Softer than the main message so the eye lands
   on the real reason first. */
body.page-v6 .checkout-banner__hint{margin-top:4px !important;font-size:12px !important;opacity:.85}

/* ============================================================
   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:flex;align-items:center;justify-content:center;overflow:hidden}
/* When JS sets the `hidden` attr to switch faces, defeat the display:flex
   above so only the active face's artwork is visible. Without this the
   front + back overlays stack on top of one another. */
body.page-v6 .ws-art[hidden]{display:none}
/* Uploaded artwork sizing rules:
   - max-width/max-height:100% — if the image is LARGER than the print
     zone, shrink to fit (never overflow / crop).
   - width/height:auto — if the image is SMALLER than the zone, leave it
     at natural size (never stretch up).
   - object-fit:contain — belt-and-braces so any explicitly-sized parent
     can't distort the aspect ratio.
   Together: always contained, never cropped, never stretched. */
body.page-v6 .ws-art img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  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%}
/* Fallback positioning for the 6 extended print zones. The JS positioner
   overrides these with the exact Canvas_Positions box once the admin has
   configured one; until then these defaults keep uploaded artwork
   constrained to a sensible area (instead of stretching the container and
   swallowing the whole shirt preview). .ws-art img already has
   max-width/max-height:100% + object-fit:contain, so any uploaded image
   fits within whichever box ends up applied. */
body.page-v6 .ws-art--left_chest  {top:30%;left:28%;width:40%;height:35%}
body.page-v6 .ws-art--right_chest {top:30%;right:28%;width:40%;height:35%}
body.page-v6 .ws-art--yoke        {top:16%;left:37%;width:26%;height:6%}
body.page-v6 .ws-art--inner_neck  {top:28%;left:30%;width:45%;height:19%}
body.page-v6 .ws-art--outer_neck  {top:18%;left:43%;width:14%;height:5%}
body.page-v6 .ws-art--name_plate  {top:52%;left:33%;width:34%;height:6%}
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__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
body.page-v6 .ws-product__meta span{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--surface-alt,#f1f5f9);color:var(--text-mute,#64748b)}
body.page-v6 .ws-product__brand{background:var(--brand-bg,#eff6ff) !important;color:var(--brand,#3b82f6) !important}
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-product__price-save{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-size:12px;font-weight:700;letter-spacing:.02em}
body.page-v6 .ws-muted{color:var(--text-dim);font-weight:500;font-size:12px}
/* Live-selected colour name that sits next to "Colour · 23 options" — same
   muted tone as ws-muted but with a leading separator and weight bump so
   the buyer can tell it's the *current* choice, not just a count. */
body.page-v6 .ws-colour-selected{
  display:inline-block;margin-left:6px;
  font-size:12px;font-weight:700;color:var(--text);
}
body.page-v6 .ws-colour-selected:not(:empty)::before{
  content:"· ";color:var(--text-dim);font-weight:500;margin-right:2px;
}
body.page-v6 .ws-size-selected{
  display:inline-block;margin-left:6px;
  font-size:12px;font-weight:700;color:var(--text);
}
body.page-v6 .ws-size-selected:not(:empty)::before{
  content:"· ";color:var(--text-dim);font-weight:500;margin-right:2px;
}

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;padding:4px 2px;overflow:hidden;max-height:120px;transition:max-height .3s ease}
body.page-v6 .ws-swatches.is-expanded{max-height:none}
body.page-v6 .ws-swatches-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--brand);font-size:13px;font-weight:600;padding:4px 0;margin-top:4px}
body.page-v6 .ws-swatches-toggle.is-visible{display:inline-block}
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 .mkt-size.is-unavailable{opacity:.35;cursor:not-allowed;text-decoration:line-through;pointer-events:none}

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 — collapsible accordion. Default state is collapsed so the
   stage isn't visually dominated by a long list of upload boxes. Clicking
   the header toggles the body. Clicking a face button on the preview
   auto-expands + highlights the matching zone (see v6-wholesale JS). */
body.page-v6 .ws-uploads{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
body.page-v6 .ws-uploads__toggle{
  display:flex;align-items:center;gap:12px;width:100%;
  background:linear-gradient(135deg,#eef2ff 0%,#fafaff 100%);
  border:1.5px solid #c7d2fe;border-radius:var(--r-md);
  padding:14px 16px;cursor:pointer;text-align:left;
  font:inherit;color:var(--text);transition:all .15s ease;
}
body.page-v6 .ws-uploads__toggle:hover{border-color:#4f46e5;background:linear-gradient(135deg,#e0e7ff 0%,#f5f3ff 100%)}
body.page-v6 .ws-uploads__toggle-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#4f46e5;color:#fff;flex-shrink:0;font-size:16px;
}
body.page-v6 .ws-uploads__toggle-txt{flex:1;min-width:0}
body.page-v6 .ws-uploads__toggle-title{display:block;font-size:14px;font-weight:800;color:var(--text);line-height:1.3}
body.page-v6 .ws-uploads__toggle-sub{display:block;font-size:12px;color:var(--text-mute);margin-top:2px}
body.page-v6 .ws-uploads__caret{
  margin-left:auto;color:#4f46e5;font-size:14px;
  transition:transform .2s ease;flex-shrink:0;
}
body.page-v6 .ws-uploads:not(.is-collapsed) .ws-uploads__caret{transform:rotate(180deg)}
body.page-v6 .ws-uploads__body{
  display:flex;flex-direction:column;gap:8px;padding-top:14px;
}
body.page-v6 .ws-uploads.is-collapsed .ws-uploads__body{display:none}
body.page-v6 .ws-uploads__hint{font-size:13px;color:var(--text-mute);margin:0 0 4px}
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}
/* Active = user clicked this position on the preview. Pulled to the top
   of the flex list via order:-1, and ringed in brand colour so the drop
   target stands out. Peer zones get .is-dim so attention stays on the
   one they just engaged with. */
body.page-v6 .ws-drop.is-active{
  order:-1;border-color:#4f46e5;border-style:solid;
  box-shadow:0 0 0 3px rgba(79,70,229,.15);
  background:#f5f3ff;
}
body.page-v6 .ws-drop.is-active.is-filled{
  /* Keep the green "uploaded" signal even when it's the active zone —
     layer the indigo ring on top but keep the green border + bg. */
  border-color:#16a34a;background:#f0fdf4;
}
body.page-v6 .ws-drop.is-dim{opacity:.8}
body.page-v6 .ws-drop.is-dim:hover{opacity:1}
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);display:block}
body.page-v6 .ws-drop__rec{margin-top:2px;color:#4f46e5 !important;font-weight:600}
body.page-v6 .ws-drop__rec i{margin-right:4px;font-size:11px}
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}
}

/* ============================================================
   HOW IT WORKS — /how
   Scoped under body.page-v6.page-how. Shares the colour palette
   and typography with the rest of v6 so the voice stays consistent.
   ============================================================ */
body.page-v6.page-how .how-hero{background:var(--surface);padding:72px 0 48px;border-bottom:1px solid var(--line);text-align:center}
body.page-v6.page-how .how-hero .wrap{max-width:780px;margin:0 auto}
body.page-v6.page-how .how-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand);background:var(--accent-a-soft);
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
body.page-v6.page-how .how-hero h1{font-size:56px;font-weight:900;color:var(--text);margin:0 0 18px;letter-spacing:-.02em;line-height:1.05}
body.page-v6.page-how .how-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-how .how-hero__lead{font-size:18px;color:var(--text-mute);line-height:1.55;margin:0 0 28px}
body.page-v6.page-how .how-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

body.page-v6.page-how .how-steps{padding:64px 0 24px}
body.page-v6.page-how .how-steps__grid{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px;
}
body.page-v6.page-how .how-step{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:28px;position:relative;overflow:hidden;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
body.page-v6.page-how .how-step:hover{
  transform:translateY(-2px);border-color:var(--brand);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
body.page-v6.page-how .how-step__num{
  position:absolute;top:18px;right:22px;
  font-size:48px;font-weight:900;color:var(--line);letter-spacing:-.04em;
  line-height:1;pointer-events:none;
}
body.page-v6.page-how .how-step__icon{
  width:54px;height:54px;border-radius:14px;
  background:var(--accent-a-soft);color:var(--brand);
  display:grid;place-items:center;font-size:22px;margin-bottom:16px;
}
body.page-v6.page-how .how-step h3{font-size:22px;font-weight:800;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}
body.page-v6.page-how .how-step p{color:var(--text-mute);font-size:14.5px;line-height:1.6;margin:0 0 14px}
body.page-v6.page-how .how-step__bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
body.page-v6.page-how .how-step__bullets li{font-size:13px;color:var(--text-dim);display:flex;align-items:center;gap:8px}
body.page-v6.page-how .how-step__bullets i{color:var(--brand);font-size:11px}

body.page-v6.page-how .how-flow{padding:48px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.page-v6.page-how .how-flow h2{font-size:30px;font-weight:900;color:var(--text);margin:0 0 6px;letter-spacing:-.01em;text-align:center}
body.page-v6.page-how .how-flow__sub{color:var(--text-mute);font-size:14px;text-align:center;margin:0 0 28px}
body.page-v6.page-how .how-flow__chain{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
}
body.page-v6.page-how .how-flow__node{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);
  min-width:180px;
}
body.page-v6.page-how .how-flow__node i{font-size:20px}
body.page-v6.page-how .how-flow__node--you i{color:var(--brand)}
body.page-v6.page-how .how-flow__node--us i{color:var(--orange)}
body.page-v6.page-how .how-flow__node span{font-size:14px}
body.page-v6.page-how .how-flow__arrow{color:var(--text-mute);font-size:18px}

body.page-v6.page-how .how-stats{padding:48px 0}
body.page-v6.page-how .how-stats__grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;
  text-align:center;
}
body.page-v6.page-how .how-stats__cell{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 14px;
}
body.page-v6.page-how .how-stats__cell b{display:block;font-size:38px;font-weight:900;color:var(--text);letter-spacing:-.02em;line-height:1}
body.page-v6.page-how .how-stats__cell span{display:block;margin-top:6px;font-size:12px;color:var(--text-mute);font-weight:600}

body.page-v6.page-how .how-faq{padding:48px 0;background:var(--surface);border-top:1px solid var(--line)}
body.page-v6.page-how .how-faq h2{font-size:30px;font-weight:900;color:var(--text);margin:0 0 24px;letter-spacing:-.01em;text-align:center}
body.page-v6.page-how .how-faq__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px}
body.page-v6.page-how .how-faq__item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:border-color .15s}
body.page-v6.page-how .how-faq__item[open]{border-color:var(--brand)}
body.page-v6.page-how .how-faq__item summary{cursor:pointer;font-weight:700;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
body.page-v6.page-how .how-faq__item summary::-webkit-details-marker{display:none}
body.page-v6.page-how .how-faq__item summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--text-mute);transition:transform .15s;font-size:12px;
}
body.page-v6.page-how .how-faq__item[open] summary::after{transform:rotate(180deg);color:var(--brand)}
body.page-v6.page-how .how-faq__item p{color:var(--text-mute);font-size:14px;line-height:1.6;margin:12px 0 0}
body.page-v6.page-how .how-faq__item a{color:var(--brand);font-weight:600}

body.page-v6.page-how .how-cta{padding:64px 0;text-align:center}
body.page-v6.page-how .how-cta h2{font-size:36px;font-weight:900;color:var(--text);margin:0 0 10px;letter-spacing:-.02em}
body.page-v6.page-how .how-cta p{color:var(--text-mute);font-size:16px;margin:0 0 22px}
body.page-v6.page-how .how-cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  body.page-v6.page-how .how-hero h1{font-size:40px}
  body.page-v6.page-how .how-steps__grid{grid-template-columns:1fr}
  body.page-v6.page-how .how-stats__grid{grid-template-columns:repeat(2, 1fr)}
  body.page-v6.page-how .how-faq__grid{grid-template-columns:1fr}
  body.page-v6.page-how .how-flow__chain{flex-direction:column;align-items:center}
  body.page-v6.page-how .how-flow__node{min-width:0;justify-content:center;width:100%}
  body.page-v6.page-how .how-flow__arrow{transform:rotate(90deg);align-self:center}
}

/* ============================================================
   INTEGRATIONS — /integrations
   Showcases every marketplace we connect to. Uses the same visual
   vocabulary as the marketplace/wholesale grids.
   ============================================================ */
body.page-v6.page-integrations .int-hero{background:var(--surface);padding:64px 0 40px;border-bottom:1px solid var(--line);text-align:center}
body.page-v6.page-integrations .int-hero .wrap{max-width:760px;margin:0 auto}
body.page-v6.page-integrations .int-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand);background:var(--accent-a-soft);
  padding:7px 14px;border-radius:999px;margin-bottom:20px;
}
body.page-v6.page-integrations .int-hero h1{font-size:48px;font-weight:900;color:var(--text);margin:0 0 14px;letter-spacing:-.02em}
body.page-v6.page-integrations .int-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-integrations .int-hero p{font-size:17px;color:var(--text-mute);line-height:1.55;margin:0 0 22px}
body.page-v6.page-integrations .int-hero__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

body.page-v6.page-integrations .int-cats{
  padding:18px 0;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:var(--tg-header-h, 80px);z-index:10;
}
body.page-v6.page-integrations .int-cats__row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
body.page-v6.page-integrations .int-cat{
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
body.page-v6.page-integrations .int-cat:hover{color:var(--text);border-color:var(--brand)}
body.page-v6.page-integrations .int-cat.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

body.page-v6.page-integrations main.wrap{max-width:1440px;margin:0 auto;padding:0 36px}
body.page-v6.page-integrations .int-cats .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
body.page-v6.page-integrations .int-bottom .wrap{max-width:1440px;margin:0 auto;padding:0 36px}
body.page-v6.page-integrations .int-grid{
  padding:36px 0 64px;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:18px;
}
/* 2-col layout on mobile — 3-col was clipping the third column off the
   right edge of the viewport at narrow widths. Two columns gives each
   card enough width to fit within the page gutter. */
@media(max-width:768px){
  body.page-v6.page-integrations main.wrap,
  body.page-v6.page-integrations .int-cats .wrap,
  body.page-v6.page-integrations .int-bottom .wrap{padding:0 16px}
  body.page-v6.page-integrations .int-hero h1{font-size:34px}
  body.page-v6.page-integrations .int-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;padding:24px 0 48px;
    width:100%; max-width:100%;
    box-sizing:border-box;
  }
  body.page-v6.page-integrations .int-card{padding:12px;gap:8px;min-width:0}
  body.page-v6.page-integrations .int-card__logo{width:38px;height:38px;border-radius:8px;font-size:18px}
  body.page-v6.page-integrations .int-card__name{font-size:13px}
  body.page-v6.page-integrations .int-card__desc{font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body.page-v6.page-integrations .int-card__badges{display:none}
  body.page-v6.page-integrations .int-card__arrow{top:8px;right:8px;font-size:10px}
}
body.page-v6.page-integrations .int-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative;
}
body.page-v6.page-integrations .int-card:hover{
  transform:translateY(-2px);border-color:var(--brand);
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
body.page-v6.page-integrations .int-card__logo{
  width:50px;height:50px;border-radius:12px;background:var(--accent-a-soft);
  display:grid;place-items:center;font-size:24px;color:var(--brand);
}
body.page-v6.page-integrations .int-card__name{font-size:16px;font-weight:800;color:var(--text);margin:0;letter-spacing:-.01em}
body.page-v6.page-integrations .int-card__desc{font-size:13px;color:var(--text-mute);line-height:1.5;margin:0;flex:1}
body.page-v6.page-integrations .int-card__badges{display:flex;gap:6px;flex-wrap:wrap}
body.page-v6.page-integrations .int-card__badge{
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;
  background:var(--surface-2);color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;
}
body.page-v6.page-integrations .int-card__badge--popular{background:#fdecd9;color:#a3573c}
body.page-v6.page-integrations .int-card__badge--new{background:#dcfce7;color:#166534}
body.page-v6.page-integrations .int-card__arrow{
  position:absolute;top:18px;right:18px;color:var(--text-mute);font-size:12px;
  transition:transform .15s, color .15s;
}
body.page-v6.page-integrations .int-card:hover .int-card__arrow{transform:translateX(3px);color:var(--brand)}

body.page-v6.page-integrations .int-bottom{padding:48px 0;background:var(--surface);border-top:1px solid var(--line);text-align:center}
body.page-v6.page-integrations .int-bottom h2{font-size:28px;font-weight:900;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}
body.page-v6.page-integrations .int-bottom p{color:var(--text-mute);font-size:15px;margin:0 0 20px}

/* ============================================================
   PARTNERS — /partners
   Print-partner swap program landing page.
   ============================================================ */
body.page-v6.page-partners .pg-hero{background:var(--surface);padding:72px 0 50px;border-bottom:1px solid var(--line);text-align:center}
body.page-v6.page-partners .pg-hero .wrap{max-width:780px;margin:0 auto}
body.page-v6.page-partners .pg-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--orange);background:#fff3e5;
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
body.page-v6.page-partners .pg-hero h1{font-size:54px;font-weight:900;color:var(--text);margin:0 0 18px;letter-spacing:-.02em;line-height:1.05}
body.page-v6.page-partners .pg-hero h1 em{font-style:italic;color:var(--orange)}
body.page-v6.page-partners .pg-hero__lead{font-size:17px;color:var(--text-mute);line-height:1.6;margin:0 0 26px}
body.page-v6.page-partners .pg-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

body.page-v6.page-partners .pg-values{padding:56px 0}
body.page-v6.page-partners .pg-values__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px}
body.page-v6.page-partners .pg-value{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
body.page-v6.page-partners .pg-value:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 10px 28px rgba(15,23,42,.06)}
body.page-v6.page-partners .pg-value__icon{
  width:48px;height:48px;border-radius:12px;background:#fff3e5;color:var(--orange);
  display:grid;place-items:center;font-size:20px;margin-bottom:14px;
}
body.page-v6.page-partners .pg-value h3{font-size:18px;font-weight:800;color:var(--text);margin:0 0 8px;letter-spacing:-.01em}
body.page-v6.page-partners .pg-value p{color:var(--text-mute);font-size:14px;line-height:1.55;margin:0}

body.page-v6.page-partners .pg-flow{padding:56px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.page-v6.page-partners .pg-flow h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 6px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-partners .pg-flow__sub{color:var(--text-mute);font-size:14px;text-align:center;margin:0 0 28px}
body.page-v6.page-partners .pg-flow__cols{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px}
body.page-v6.page-partners .pg-flow__col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
body.page-v6.page-partners .pg-flow__tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;margin-bottom:16px;
}
body.page-v6.page-partners .pg-flow__tag--a{background:var(--accent-a-soft);color:var(--brand)}
body.page-v6.page-partners .pg-flow__tag--b{background:#fff3e5;color:var(--orange)}
body.page-v6.page-partners .pg-flow__steps{list-style:none;padding:0;margin:0;counter-reset:pg-step}
body.page-v6.page-partners .pg-flow__steps li{
  position:relative;padding:10px 0 10px 38px;font-size:14px;color:var(--text-dim);line-height:1.5;
  border-top:1px solid var(--line);
}
body.page-v6.page-partners .pg-flow__steps li:first-child{border-top:none}
body.page-v6.page-partners .pg-flow__steps li b{color:var(--text)}
body.page-v6.page-partners .pg-flow__steps li::before{
  counter-increment:pg-step;content:counter(pg-step);
  position:absolute;left:0;top:10px;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);color:var(--text-dim);
  display:grid;place-items:center;font-size:12px;font-weight:800;
}

body.page-v6.page-partners .pg-caps{padding:56px 0}
body.page-v6.page-partners .pg-caps h2{font-size:30px;font-weight:900;color:var(--text);margin:0 0 24px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-partners .pg-caps__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}
body.page-v6.page-partners .pg-cap{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
body.page-v6.page-partners .pg-cap i{font-size:22px;color:var(--orange);margin-bottom:6px}
body.page-v6.page-partners .pg-cap b{font-size:15px;font-weight:800;color:var(--text)}
body.page-v6.page-partners .pg-cap span{font-size:13px;color:var(--text-mute);line-height:1.5}

body.page-v6.page-partners .pg-fit{padding:56px 0;background:var(--surface);border-top:1px solid var(--line)}
body.page-v6.page-partners .pg-fit h2{font-size:30px;font-weight:900;color:var(--text);margin:0 0 24px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-partners .pg-fit__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px}
body.page-v6.page-partners .pg-fit__yes,
body.page-v6.page-partners .pg-fit__no{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
body.page-v6.page-partners .pg-fit__yes{border-left:4px solid #22c55e}
body.page-v6.page-partners .pg-fit__no{border-left:4px solid #ef4444}
body.page-v6.page-partners .pg-fit__yes h3,
body.page-v6.page-partners .pg-fit__no h3{font-size:16px;font-weight:800;color:var(--text);margin:0 0 12px;display:flex;align-items:center;gap:8px}
body.page-v6.page-partners .pg-fit__yes h3 i{color:#22c55e}
body.page-v6.page-partners .pg-fit__no h3 i{color:#ef4444}
body.page-v6.page-partners .pg-fit ul{list-style:disc;padding-left:18px;margin:0;display:flex;flex-direction:column;gap:8px}
body.page-v6.page-partners .pg-fit li{font-size:14px;color:var(--text-mute);line-height:1.5}

body.page-v6.page-partners .pg-cta{padding:64px 0;text-align:center}
body.page-v6.page-partners .pg-cta h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}
body.page-v6.page-partners .pg-cta p{color:var(--text-mute);font-size:15px;margin:0 auto 22px;max-width:560px}

@media(max-width:900px){
  body.page-v6.page-partners .pg-hero h1{font-size:38px}
  body.page-v6.page-partners .pg-values__grid,
  body.page-v6.page-partners .pg-flow__cols,
  body.page-v6.page-partners .pg-fit__grid{grid-template-columns:1fr}
  body.page-v6.page-partners .pg-caps__grid{grid-template-columns:repeat(2, 1fr)}
}

/* ============================================================
   CREATORS — /creators
   Influencer / streamer merch storefront pitch page.
   ============================================================ */
body.page-v6.page-creators .cr-hero{
  background:linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  padding:72px 0 48px;border-bottom:1px solid var(--line);text-align:center;
}
body.page-v6.page-creators .cr-hero .wrap{max-width:800px;margin:0 auto}
body.page-v6.page-creators .cr-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand);background:var(--accent-a-soft);
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
body.page-v6.page-creators .cr-hero h1{font-size:56px;font-weight:900;color:var(--text);margin:0 0 18px;letter-spacing:-.02em;line-height:1.05}
body.page-v6.page-creators .cr-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-creators .cr-hero__lead{font-size:17px;color:var(--text-mute);line-height:1.6;margin:0 0 26px}
body.page-v6.page-creators .cr-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
body.page-v6.page-creators .cr-hero__trust{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--text-mute)}
body.page-v6.page-creators .cr-hero__trust b{font-size:22px;color:var(--text);font-weight:900;display:block;line-height:1}

body.page-v6.page-creators .cr-showcase{padding:40px 0}
body.page-v6.page-creators .cr-showcase__card{
  max-width:880px;margin:0 auto;background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.12);border:1px solid var(--line);overflow:hidden;
}
body.page-v6.page-creators .cr-showcase__bar{
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
body.page-v6.page-creators .cr-showcase__dot{width:10px;height:10px;border-radius:50%}
body.page-v6.page-creators .cr-showcase__url{
  margin-left:auto;background:#fff;padding:4px 12px;border-radius:999px;
  font-size:12px;color:var(--text-mute);border:1px solid var(--line);
}
body.page-v6.page-creators .cr-showcase__body{padding:28px}
body.page-v6.page-creators .cr-showcase__hero{display:flex;gap:16px;align-items:center;margin-bottom:22px}
body.page-v6.page-creators .cr-showcase__logo{
  width:56px;height:56px;border-radius:14px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:900;
}
body.page-v6.page-creators .cr-showcase__hero h3{font-size:20px;font-weight:800;color:var(--text);margin:0}
body.page-v6.page-creators .cr-showcase__hero p{font-size:13px;color:var(--text-mute);margin:4px 0 0}
body.page-v6.page-creators .cr-showcase__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
body.page-v6.page-creators .cr-showcase__item{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
body.page-v6.page-creators .cr-showcase__item i{font-size:32px;color:var(--brand);margin-bottom:6px}
body.page-v6.page-creators .cr-showcase__item b{font-size:14px;font-weight:800;color:var(--text)}
body.page-v6.page-creators .cr-showcase__item span{font-size:12px;color:var(--text-mute)}

body.page-v6.page-creators .cr-what{padding:56px 0}
body.page-v6.page-creators .cr-what h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 28px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-creators .cr-what__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px}
body.page-v6.page-creators .cr-what__item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .15s, border-color .15s}
body.page-v6.page-creators .cr-what__item:hover{transform:translateY(-2px);border-color:var(--brand)}
body.page-v6.page-creators .cr-what__icon{
  width:48px;height:48px;border-radius:12px;background:var(--accent-a-soft);color:var(--brand);
  display:grid;place-items:center;font-size:20px;margin-bottom:14px;
}
body.page-v6.page-creators .cr-what__item h3{font-size:17px;font-weight:800;color:var(--text);margin:0 0 8px;letter-spacing:-.01em}
body.page-v6.page-creators .cr-what__item p{color:var(--text-mute);font-size:14px;line-height:1.55;margin:0}

body.page-v6.page-creators .cr-calc{padding:56px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.page-v6.page-creators .cr-calc h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 6px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-creators .cr-calc__sub{color:var(--text-mute);font-size:14px;text-align:center;margin:0 0 28px}
body.page-v6.page-creators .cr-calc__card{
  max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px;
}
body.page-v6.page-creators .cr-calc__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;margin-top:18px}
body.page-v6.page-creators .cr-calc__row:first-child{margin-top:0}
body.page-v6.page-creators .cr-calc__row label{font-size:13px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
body.page-v6.page-creators .cr-calc__valuebox{font-size:20px;font-weight:900;color:var(--brand)}
body.page-v6.page-creators .cr-calc__slider{width:100%;margin-bottom:8px;accent-color:var(--brand)}
body.page-v6.page-creators .cr-calc__result{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
body.page-v6.page-creators .cr-calc__result > div{text-align:center;padding:14px;background:var(--accent-a-soft);border-radius:12px}
body.page-v6.page-creators .cr-calc__result span{display:block;font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
body.page-v6.page-creators .cr-calc__result b{display:block;font-size:28px;font-weight:900;color:var(--brand);letter-spacing:-.01em;line-height:1}
body.page-v6.page-creators .cr-calc__fine{font-size:12px;color:var(--text-mute);text-align:center;margin:16px 0 0;font-style:italic}

body.page-v6.page-creators .cr-how{padding:56px 0}
body.page-v6.page-creators .cr-how h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 28px;text-align:center;letter-spacing:-.01em}
body.page-v6.page-creators .cr-how__steps{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:18px}
body.page-v6.page-creators .cr-how__step{text-align:center;padding:20px}
body.page-v6.page-creators .cr-how__num{
  width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:900;margin:0 auto 14px;
}
body.page-v6.page-creators .cr-how__step h3{font-size:16px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.01em}
body.page-v6.page-creators .cr-how__step p{color:var(--text-mute);font-size:13px;line-height:1.55;margin:0}

body.page-v6.page-creators .cr-cta{padding:64px 0;background:var(--surface);border-top:1px solid var(--line);text-align:center}
body.page-v6.page-creators .cr-cta h2{font-size:32px;font-weight:900;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}
body.page-v6.page-creators .cr-cta p{color:var(--text-mute);font-size:15px;margin:0 auto 22px;max-width:620px}

@media(max-width:900px){
  body.page-v6.page-creators .cr-hero h1{font-size:40px}
  body.page-v6.page-creators .cr-what__grid{grid-template-columns:1fr}
  body.page-v6.page-creators .cr-how__steps{grid-template-columns:repeat(2, 1fr)}
  body.page-v6.page-creators .cr-showcase__grid{grid-template-columns:1fr}
  body.page-v6.page-creators .cr-hero__trust{gap:20px}
}

/* ============================================================
   PATH COLOR THEMING (verification item 5)
   The v6 homepage has four path-choice buttons (Sell / Buy / Market / Brand),
   each with its own accent. Landing pages tint their hero strip with the
   matching accent so the user feels continuity from the path button they
   clicked. We only tint the hero band — the rest of the page keeps the
   neutral surface so product tiles and content remain readable.

   Path → URL → accent-hex:
     Sell    → /           → #025077 (navy, via --accent-a in palette-m2)
     Buy     → /#designer  → #c06f52 (terracotta, via --accent-b in palette-m2)
     Market  → /marketplace → #7c3aed (purple, --mode-market)
     Brand   → (apply flow) → #2563eb (blue, --mode-brand)
   Wholesale is not one of the four path buttons but shares the storefront
   pattern — we tint it with the existing orange nav accent (#e67300).
   ============================================================ */
:root{
  --path-sell:#025077;      --path-sell-soft:#d9e8f0;
  --path-buy:#c06f52;       --path-buy-soft:#f1dacf;
  --path-market:#7c3aed;    --path-market-soft:#efe3f7;
  --path-brand:#2563eb;     --path-brand-soft:#dbeafe;
  --path-wholesale:#e67300; --path-wholesale-soft:#fdecd9;
}
/* Tint the storefront hero band with the matching path colour. We keep the
   tint on the hero only (not the whole body) so tiles/cards stay readable. */
body.page-v6.page-marketplace .mkt-hero{
  background:var(--path-market-soft);
  border-bottom-color:color-mix(in srgb, var(--path-market) 22%, var(--line));
}
body.page-v6.page-marketplace .mkt-hero h1 em,
body.page-v6.page-marketplace .mkt-hero strong{color:var(--path-market)}
body.page-v6.page-marketplace-product .mkt-product__cat{color:var(--path-market)}
body.page-v6.page-marketplace-product .mkt-size.is-selected{background:var(--path-market);border-color:var(--path-market)}

body.page-v6.page-wholesale .mkt-hero{
  background:var(--path-wholesale-soft);
  border-bottom-color:color-mix(in srgb, var(--path-wholesale) 22%, var(--line));
}
body.page-v6.page-wholesale .mkt-hero h1 em,
body.page-v6.page-wholesale .mkt-hero strong{color:var(--path-wholesale)}

body.page-v6.page-cart .cart-title em{color:var(--path-market)}

/* ============================================================
   MOBILE SIDE PADDING — storefront content wrappers
   Product titles, prices, colour swatches, size buttons, and the "$5.50
   shipping" line were running flush to the viewport edge on phones. Pad
   the content wrappers (not the body — full-bleed header/footer need to
   stay edge-to-edge) with a consistent 16px gutter at phone widths.
   ============================================================ */
@media(max-width:768px){
  /* Marketplace grid + product detail page */
  body.page-v6.page-marketplace main.wrap--marketplace,
  body.page-v6.page-marketplace-product main.wrap--marketplace,
  body.page-v6.page-wholesale main.wrap--marketplace{
    padding-inline:16px;
  }
  /* Cart page — wrap--cart already has 30px 20px, tighten for phones */
  body.page-v6.page-cart .wrap--cart{padding-inline:16px}
  /* The grid itself sits inside the padded main; cap gap so tiles don't
     overflow the tightened gutter. */
  body.page-v6 .product-grid{padding-left:0;padding-right:0}
}
/* Slightly larger gutter at tablet (16–22px) for visual breathing room */
@media(min-width:641px) and (max-width:1024px){
  body.page-v6.page-marketplace main.wrap--marketplace,
  body.page-v6.page-marketplace-product main.wrap--marketplace,
  body.page-v6.page-wholesale main.wrap--marketplace{
    padding-inline:22px;
  }
}
/* Sticky Add-to-cart bar (if it's rendered full-bleed): keep the inner
   button and shipping line padded so they align with the rest of the page
   content instead of butting against the viewport edge. */
@media(max-width:768px){
  body.page-v6.page-marketplace-product .mkt-product__buy,
  body.page-v6.page-marketplace-product .mkt-product__ship{padding-inline:2px}
}

/* ============================================================
   MOBILE — compress the cream/hero bar
   The mkt-hero--compact band above the grid was taking too much vertical
   space on phones (headline + description paragraph pushing tiles below
   the fold). Shrink padding, typography, and clip the description so
   buyers hit the grid faster. CTA stays intact (there's none on this band,
   but if one is added later it will remain visible).
   ============================================================ */
@media(max-width:640px){
  body.page-v6 .mkt-hero,
  body.page-v6 .mkt-hero--compact{padding:12px 0 10px}
  body.page-v6 .mkt-hero h1,
  body.page-v6 .mkt-hero--compact h1{font-size:20px;line-height:1.15;margin:0 0 2px}
  body.page-v6 .mkt-hero p,
  body.page-v6 .mkt-hero--compact p{
    font-size:12.5px;line-height:1.35;margin:0;
    /* Clamp description to 2 lines on phones — prevents a three-line
       cream band that eats half the viewport. */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* ============================================================
   FULL-BLEED FOOTER + HORIZONTAL OVERFLOW GUARD
   Bug: on /checkout mobile the navy footer was only painting out to the
   inner content width, leaving a beige strip to the right of it. Two
   contributing causes:
     1) Something in the checkout form (payment-method row, card inputs,
        or the summary grid) overflows horizontally at narrow widths,
        forcing the body content box wider than the viewport. Because
        body is `display:flex; flex-direction:column`, its cross-axis
        stretch follows that widened content box — but when the page is
        scrolled to 0,0 the footer renders against the viewport-wide body
        background only up to the content width, with the beige body
        `--bg` (palette-m2 = #f6efdf) showing past it on the right.
     2) The footer's own <div class="wrap"> caps to 1440px and the dark
        paint comes from the OUTER .tg-footer — so as long as we force
        .tg-footer to span the full viewport we paint edge-to-edge
        regardless of what any sibling/child does to page width.

   Fix strategy:
     - Clip horizontal overflow at html/body so the viewport is the
       authoritative width on every page.
     - Reset min-width:0 on common flex/grid children that are likely to
       push min-content wider than the viewport (inputs, selects, grid
       tracks). This stops the underlying overflow at source.
     - Make .tg-footer span 100vw with a left-margin trick so it paints
       edge-to-edge even if an ancestor is briefly narrower.
   ============================================================ */
html, body{max-width:100%;overflow-x:hidden}
body.page-v6{width:100%}

/* Sane min-width floor for things inside constrained flex/grid tracks
   so a long card number, email, or address field doesn't blow out the
   page width. These are all already width:100% of their parent — the
   min-width:0 just lets the parent actually shrink below their content
   min-content (which is what fires horizontal overflow). */
body.page-v6.page-checkout .checkout-form,
body.page-v6.page-checkout .checkout-section,
body.page-v6.page-checkout .ff-row,
body.page-v6.page-checkout .ff-row--cols,
body.page-v6.page-checkout .checkout-pay,
body.page-v6.page-checkout .checkout-card-form,
body.page-v6.page-cart .cart-layout,
body.page-v6.page-cart .cart-items,
body.page-v6.page-cart .cart-item,
body.page-v6.page-cart .cart-summary{min-width:0}

body.page-v6.page-checkout .ff-row input,
body.page-v6.page-checkout .ff-row select,
body.page-v6.page-checkout .checkout-card-form input,
body.page-v6.page-checkout .checkout-card-form select{min-width:0;max-width:100%}

/* Footer paints edge-to-edge at all widths. We DON'T use width:100vw +
   negative margin here (that would re-introduce horizontal scrollbars
   on platforms where 100vw includes the scrollbar width). Instead we
   just ensure the footer element stretches to the flex parent's full
   cross axis — which, now that body has overflow-x:hidden, equals the
   viewport. This fixes /checkout and is harmless on /marketplace,
   /wholesale, /cart, /. */
body.page-v6 > .tg-footer,
body.page-v6 footer.tg-footer{
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
}

/* Mobile-only: bring checkout content gutters in line with the
   marketplace/cart mobile-padding treatment so everything has the same
   16px edge gap on phones. */
@media(max-width:768px){
  body.page-v6.page-checkout .wrap--cart{padding-inline:16px}
  body.page-v6.page-checkout .checkout-section{padding:16px 14px}
  body.page-v6.page-checkout .ff-row--cols{gap:10px}
}

/* ============================================================
   ORDER CONFIRMATION PAGE  ( /order/<token> → includes/order_v6.php )
   ------------------------------------------------------------
   Reuses .cart-layout + .checkout-form + .cart-summary from the
   checkout page so the two look like one flow. Everything below
   is scoped to body.page-order to avoid leaking into /cart.
   ============================================================ */
body.page-v6.page-order .order-banner{ margin-bottom: 18px; }

/* STATUS STRIP — always visible, carries the "your package is at X" line
   and the Track CTA once shipped. Tone classes set the tint. */
body.page-v6.page-order .order-status{
  background:var(--surface, #fff);
  border:1px solid var(--line);
  border-left:4px solid var(--text-mute);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
body.page-v6.page-order .order-status--info { border-left-color:#2563eb; }
body.page-v6.page-order .order-status--ok   { border-left-color:#047857; }
body.page-v6.page-order .order-status--warn { border-left-color:#b45309; background:#fffbeb; }

body.page-v6.page-order .order-status__head{
  display:flex; align-items:center; gap:14px;
}
body.page-v6.page-order .order-status__head > i{
  font-size:22px;
  color:var(--text-mute);
  flex:0 0 auto;
}
body.page-v6.page-order .order-status--info .order-status__head > i{ color:#2563eb; }
body.page-v6.page-order .order-status--ok   .order-status__head > i{ color:#047857; }
body.page-v6.page-order .order-status--warn .order-status__head > i{ color:#b45309; }

body.page-v6.page-order .order-status__label{
  font-weight:800; font-size:16px; color:var(--text); line-height:1.2;
}
body.page-v6.page-order .order-status__eta{
  font-size:13.5px; color:var(--text-mute); margin-top:2px;
}
body.page-v6.page-order .order-status__eta strong{
  color:var(--text); font-weight:700;
}
body.page-v6.page-order .order-status__cta{ margin-left:auto; }

body.page-v6.page-order .order-status__meta{
  display:flex; flex-wrap:wrap; gap:18px;
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:13.5px; color:var(--text-mute);
}
body.page-v6.page-order .order-status__meta strong{
  color:var(--text); font-weight:700;
}
body.page-v6.page-order .order-status__hint{
  margin-top:10px; font-size:13.5px; color:var(--text-mute);
}

/* LINE ITEMS — list rows with a thumb, title + meta, total on the right. */
body.page-v6.page-order .order-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
body.page-v6.page-order .order-item:last-child{ border-bottom:0; }

body.page-v6.page-order .order-item__thumb{
  width:64px; height:64px;
  border-radius:10px;
  background:#f3f4f6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:var(--text-mute); font-size:22px;
}
body.page-v6.page-order .order-item__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Font Awesome 7 sets `display:var(--fa-display,inline-block)` on .fa-solid,
   which has the same specificity as `[hidden]`'s UA rule and wins on source
   order — so `<i class="fa-solid fa-shirt" hidden>` still rendered the shirt
   icon on top of / beside the thumbnail even though the real image loaded.
   Force `display:none` on any hidden FA icon inside the thumb box. */
body.page-v6.page-order .order-item__thumb .order-item__thumb-fallback[hidden]{
  display:none !important;
}
body.page-v6.page-order .order-item__body h3{
  margin:0 0 4px; font-size:15px; font-weight:700; color:var(--text);
  line-height:1.25;
}
body.page-v6.page-order .order-item__variant{
  margin:0 0 4px; font-size:13px; color:var(--text-mute); font-weight:500;
}
body.page-v6.page-order .order-item__meta{
  margin:0; font-size:13px; color:var(--text-mute);
  display:flex; flex-wrap:wrap; gap:10px;
}
body.page-v6.page-order .order-item__meta span + span::before{
  content:'·'; margin-right:10px; opacity:.5;
}
body.page-v6.page-order .order-item__meta span:first-child::before{ content:''; margin:0; }

/* Artwork links — compact row of per-slot links surfaced on order-items
   that carry uploaded decoration (custom orders + wholesale-with-artwork).
   Links open the raw art file in a new tab so the buyer can verify what
   they uploaded post-purchase. */
body.page-v6.page-order .order-item__artwork{
  margin:8px 0 0; display:flex; flex-wrap:wrap;
  align-items:center; gap:6px 10px;
}
body.page-v6.page-order .order-item__artwork-label{
  font-size:12px; font-weight:600; color:var(--text-mute);
  text-transform:uppercase; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:6px;
}
body.page-v6.page-order .order-item__artwork-label i{ font-size:11px; }
body.page-v6.page-order .order-item__artwork-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
body.page-v6.page-order .order-item__artwork-list li{ margin:0; }
body.page-v6.page-order .order-item__artwork-list a{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; font-weight:500; color:var(--text);
  text-decoration:none; background:#fff;
  transition:background .15s, border-color .15s;
}
body.page-v6.page-order .order-item__artwork-list a:hover{
  background:var(--bg-subtle, #f3f4f6); border-color:var(--text-mute);
}
body.page-v6.page-order .order-item__artwork-list a i{
  font-size:10px; opacity:.65;
}
body.page-v6.page-order .order-item__total{
  font-weight:700; color:var(--text); font-size:15px;
}

/* ITEMS ROW — full-width block with background. */
body.page-v6.page-order .order-items-row{
  background:var(--surface, #f8fafc);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:20px;
}
body.page-v6.page-order .order-items-row h2{
  font-size:17px; font-weight:800; color:var(--text);
  margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
body.page-v6.page-order .order-items-row h2 i{
  font-size:15px; color:var(--text-mute);
}

/* BOTTOM GRID — ship-to + summary side by side, equal columns. */
body.page-v6.page-order .order-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}

/* Ship-to column — matches cart-summary styling. */
body.page-v6.page-order .order-ship-col{
  background:var(--surface, #f8fafc);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
}
body.page-v6.page-order .order-ship-col h2{
  font-size:17px; font-weight:800; color:var(--text);
  margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
body.page-v6.page-order .order-ship-col h2 i{
  font-size:15px; color:var(--text-mute);
}

/* Ship-to block. */
body.page-v6.page-order .order-address{
  font-style:normal; font-size:14px; line-height:1.55; color:var(--text);
}

/* Phone/tablet tweaks — mirror the other v6 pages. */
@media(max-width:768px){
  body.page-v6.page-order .wrap--cart{ padding-inline:16px; }
  body.page-v6.page-order .order-status__head{ flex-wrap:wrap; }
  body.page-v6.page-order .order-status__cta{
    margin-left:0; margin-top:4px; width:100%; text-align:center;
  }
  body.page-v6.page-order .order-items-row{ padding:14px 16px; }
  body.page-v6.page-order .order-bottom-grid{ grid-template-columns:1fr; }
  body.page-v6.page-order .order-item{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "thumb body"
      "total total";
    row-gap:6px;
  }
  body.page-v6.page-order .order-item__thumb{ grid-area:thumb; width:56px; height:56px; }
  body.page-v6.page-order .order-item__body { grid-area:body; }
  body.page-v6.page-order .order-item__total{ grid-area:total; text-align:right; }
}

/* ============================================================================
   AUTH PAGES (login + register)
   Shared styles for the two-column /register pitch and the single-column
   /login card. Both pages sit on `body.page-v6` and get cream/palette-m1
   treatment from the standard palette variables.
   ============================================================================ */
body.page-v6 .auth{
  max-width:1080px;margin:0 auto;padding:56px 28px 96px;
}
body.page-v6 .auth--split{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh);
}
body.page-v6 .auth--single{max-width:520px}
body.page-v6 .auth__card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 36px;box-shadow:var(--sh);
}
body.page-v6 .auth__pitch{
  background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);color:#fff;
  padding:44px 36px;display:flex;flex-direction:column;justify-content:center;
}
body.page-v6 .auth__pitch h2{
  font-size:30px;font-weight:900;margin:0 0 22px;line-height:1.15;color:#fff;
}
body.page-v6 .auth__pitch h2 em{color:var(--yellow,#f5b754);font-style:normal}
body.page-v6 .auth__pitch ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
body.page-v6 .auth__pitch li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#cbd5e1}
body.page-v6 .auth__pitch li i{color:#34d399;margin-top:2px;flex-shrink:0}
body.page-v6 .auth__pitch-testimonial{
  margin-top:30px;padding-top:26px;border-top:1px solid #1f2937;
  display:flex;gap:14px;align-items:center;
}
body.page-v6 .auth__pitch-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--yellow,#f5b754);
  color:#2a1f12;display:grid;place-items:center;font-weight:800;flex-shrink:0;
}
body.page-v6 .auth__pitch-name{font-size:13px;font-weight:700;color:#fff}
body.page-v6 .auth__pitch-sub{font-size:12px;color:#94a3b8}
body.page-v6 .auth__form{padding:44px 36px;display:flex;flex-direction:column;gap:14px}
body.page-v6 .auth h1{font-size:28px;font-weight:900;margin:0 0 8px;color:var(--text)}
body.page-v6 .auth .lead{font-size:14px;color:var(--text-mute);margin:0 0 18px}
body.page-v6 .auth .field{display:flex;flex-direction:column;gap:6px}
body.page-v6 .auth .field label{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.04em}
body.page-v6 .auth .field input[type="text"],
body.page-v6 .auth .field input[type="email"],
body.page-v6 .auth .field input[type="password"]{
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font-size:14px;color:var(--text);background:#fff;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
body.page-v6 .auth .field input:focus{
  border-color:var(--accent-a,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
body.page-v6 .auth .field .help{font-size:12px;color:var(--text-mute);margin:2px 0 0}
body.page-v6 .auth .field--row{
  flex-direction:row;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--text-mute);
}
body.page-v6 .auth .field--row label{
  display:flex;gap:8px;align-items:center;font-size:13px;
  font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-mute);
}
body.page-v6 .auth .field--row a{color:var(--accent-a,#2563eb);font-weight:600;font-size:13px}
body.page-v6 .auth__submit{margin-top:10px}
body.page-v6 .auth__foot{margin-top:18px;text-align:center;font-size:13px;color:var(--text-mute)}
body.page-v6 .auth__foot a{color:var(--accent-a,#2563eb);font-weight:600}

/* Divider ("or with email") */
body.page-v6 .auth .divider{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.05em;
  margin:6px 0 4px;
}
body.page-v6 .auth .divider::before,
body.page-v6 .auth .divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}

/* SSO buttons (Google, Facebook, X, Apple) */
body.page-v6 .sso{display:flex;flex-direction:column;gap:8px}
body.page-v6 .sso-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  background:#fff;color:var(--text);font-size:14px;font-weight:600;
  text-decoration:none;transition:background .12s, border-color .12s, transform .12s;
}
body.page-v6 .sso-btn:hover{background:var(--surface-2);transform:translateY(-1px)}
body.page-v6 .sso-btn i{font-size:16px}
body.page-v6 .sso-btn--google i{color:#ea4335}
body.page-v6 .sso-btn--facebook i{color:#1877f2}
body.page-v6 .sso-btn--x i{color:#000}
body.page-v6 .sso-btn--apple i{color:#000}

@media (max-width: 820px){
  body.page-v6 .auth{padding:28px 16px 64px}
  body.page-v6 .auth--split{grid-template-columns:1fr;gap:0}
  body.page-v6 .auth__pitch{padding:28px 24px}
  body.page-v6 .auth__form{padding:28px 24px}
  body.page-v6 .auth__card{padding:28px 24px}
  body.page-v6 .auth h1{font-size:22px}
  body.page-v6 .auth__pitch h2{font-size:24px}
}

/* ─────────────────────────────────────────────────────────────────────────
 * StoreLogin popup — tighter auth card used in the store-authorization
 * popup window. Loaded by StoreLogin.php (body.page-storelogin). Centers
 * the card in the popup viewport and tightens spacing for the cramped
 * window size. Uses the same .auth / .sso primitives as /login so the
 * look is consistent across entry points.
 * ───────────────────────────────────────────────────────────────────────── */
body.page-v6.page-storelogin{background:var(--cream,#f8f5ef);min-height:100vh;margin:0}
body.page-v6.page-storelogin .auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
body.page-v6 .auth--compact{max-width:440px;width:100%}
body.page-v6 .auth--compact .auth__card{padding:32px 28px}
body.page-v6 .auth__brand{display:flex;justify-content:center;margin:0 0 18px}
body.page-v6 .auth__brand .tg-logo{font-size:18px;font-weight:700;display:inline-flex;align-items:center;gap:8px;color:var(--text)}
body.page-v6 .auth__brand .tg-logo__mark{width:32px;height:32px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px}
body.page-v6 .auth__brand .tg-logo__word b{font-weight:900;color:var(--brand)}
body.page-v6 .auth .field{position:relative}
body.page-v6 .auth .field__link{
  position:absolute;top:0;right:0;font-size:11px;font-weight:600;
  color:var(--accent-a,#2563eb);text-decoration:none;letter-spacing:0;
  text-transform:none;cursor:pointer;
}
body.page-v6 .auth .field__link:hover{text-decoration:underline}
body.page-v6 .auth__error{
  display:flex;align-items:flex-start;gap:10px;
  background:#fde8e8;color:#c0392b;border:1px solid #f5c6c6;
  border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.4;
  margin:0 0 12px;
}
body.page-v6 .auth__error i{flex-shrink:0;margin-top:2px}
body.page-v6 .auth__submit{margin-top:14px}
body.page-v6 .auth--compact .sso{margin:4px 0 0}
body.page-v6 .auth--compact .sso-btn{padding:10px 14px;font-size:13px}

/* Status card — shown on "You're signed in" and error states */
body.page-v6 .auth__card--status{text-align:center;padding:40px 32px}
body.page-v6 .auth__status-icon{font-size:52px;color:var(--green,#10b981);margin:0 0 14px;line-height:1}
body.page-v6 .auth__status-icon--error{color:#c0392b}
body.page-v6 .auth__card--status h1{margin-bottom:6px}
body.page-v6 .auth__card--status .lead{margin:0 0 18px}
body.page-v6 .auth__spinner{
  width:28px;height:28px;margin:4px auto 0;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent-a,#2563eb);
  animation:authSpin .8s linear infinite;
}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* Auth-style modals (2FA + Google) — reuse existing .modal plumbing in
   core.js (launchModalWindow / #overlay) but dress them with auth styling. */
body.page-v6 .auth-modal{
  display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:10000;width:calc(100% - 32px);max-width:440px;
}
body.page-v6 .auth-modal .modal-dialog{width:100%}
body.page-v6 .auth-modal .modal-content.auth__card{
  position:relative;padding:36px 30px 30px;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
body.page-v6 .auth-modal__close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  border:none;background:transparent;color:var(--text-mute);
  font-size:16px;cursor:pointer;border-radius:8px;
  display:grid;place-items:center;padding:0;
}
body.page-v6 .auth-modal__close:hover{background:var(--surface-2);color:var(--text)}
body.page-v6 .auth__code-input{
  font-size:22px;letter-spacing:6px;text-align:center;
  font-variant-numeric:tabular-nums;
}

@media (max-width: 480px){
  body.page-v6.page-storelogin .auth{padding:16px 12px}
  body.page-v6 .auth--compact .auth__card{padding:24px 20px}
  body.page-v6 .auth__card--status{padding:32px 20px}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Cart — split checkout for mixed wholesale (CAD) + marketplace (USD) carts.
 * The two buttons render side-by-side on desktop and stack on mobile. Each
 * button shows its flow label and subtotal in its native currency so the
 * shopper understands why two transactions are required.
 * ───────────────────────────────────────────────────────────────────────── */
body.page-v6 .cart-checkout-split{
  /* Stack the two checkout CTAs vertically so each button is full-width
     and easy to tap on mobile. Previously side-by-side on desktop, but the
     vertical layout reads cleaner and avoids accidental taps when the
     two buttons sit next to each other. */
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:0 0 12px;
}
body.page-v6 .cart-checkout-split .cart-checkout-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:14px 12px;
  text-align:center;
  line-height:1.15;
  min-height:64px;
}
body.page-v6 .cart-checkout-cta__label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
body.page-v6 .cart-checkout-cta__amt{
  font-size:18px;
  font-weight:800;
}
body.page-v6 .cart-checkout-cta--wholesale .cart-checkout-cta__amt::after{
  /* Tiny Canadian-flag hint — CAD is the less-familiar path so it gets the
     country cue. */
  content:" \1F1E8\1F1E6"; /* 🇨🇦 */
  margin-left:4px;
  font-size:14px;
}
body.page-v6 .cart-summary__split-note{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:8px;
  background:#e8f4fb;
  color:#155a7e;
  font-size:12.5px;
  line-height:1.4;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
body.page-v6 .cart-summary__split-note i{
  margin-top:2px;
  font-size:13px;
  color:#1a7aa8;
}
@media (max-width: 640px){
  body.page-v6 .cart-checkout-split{
    grid-template-columns:1fr;
    gap:8px;
  }
  body.page-v6 .cart-checkout-split .cart-checkout-cta{
    min-height:56px;
    padding:12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Wholesale product page — "Ships to Canada only" info notice near the
 * Add to Cart button. Subtle but visible; blue/teal info palette, not
 * red/warning. Uses a circular info icon + text.
 * ───────────────────────────────────────────────────────────────────────── */
body.page-v6 .ws-canada-notice{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  padding:10px 14px;
  border:1px solid #bfe3f3;
  background:#eaf6fc;
  color:#0f547a;
  border-radius:8px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
}
body.page-v6 .ws-canada-notice i{
  color:#1685b4;
  font-size:15px;
  flex-shrink:0;
}
body.page-v6 .ws-canada-notice__flag{
  display:inline-block;
  font-size:15px;
  line-height:1;
}

/* =============================================================
 * Marketplace — v6 front-page redesign (hero / styles / callout)
 * These styles only fire on .page-marketplace so they don't leak
 * into other pages that also use css/v6.css.
 * ============================================================= */

/* ── Hero ──────────────────────────────────────────────────── */
body.page-marketplace .mkt-v6-hero{
  position:relative;
  overflow:hidden;
  margin:16px 0 18px;
  padding:48px 36px 44px;
  border-radius:22px;
  color:#fff;
  background:
    linear-gradient(135deg,#312e81 0%,#4f46e5 45%,#7c3aed 100%);
  box-shadow:0 20px 50px -24px rgba(79,70,229,0.55);
  isolation:isolate;
}
body.page-marketplace .mkt-v6-hero__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.7;
}
body.page-marketplace .mkt-v6-hero__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
}
body.page-marketplace .mkt-v6-hero__blob--1{
  width:340px; height:340px; top:-120px; left:-80px;
  background:rgba(236,72,153,0.55);
}
body.page-marketplace .mkt-v6-hero__blob--2{
  width:280px; height:280px; bottom:-100px; right:6%;
  background:rgba(14,165,233,0.55);
}
body.page-marketplace .mkt-v6-hero__blob--3{
  width:220px; height:220px; top:20%; right:-80px;
  background:rgba(16,185,129,0.40);
}
body.page-marketplace .mkt-v6-hero__inner{
  position:relative; z-index:1; max-width:760px;
}
body.page-marketplace .mkt-v6-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(4px);
  border-radius:999px;
  font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff;
}
body.page-marketplace .mkt-v6-hero__eyebrow i{ font-size:11px; opacity:.9; }
body.page-marketplace .mkt-v6-hero__title{
  margin:16px 0 8px;
  font-size:clamp(30px,4.6vw,48px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#fff;
}
body.page-marketplace .mkt-v6-hero__title-accent{
  background:linear-gradient(90deg,#fcd34d 0%,#f472b6 50%,#93c5fd 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
body.page-marketplace .mkt-v6-hero__subtitle{
  max-width:560px;
  margin:0 0 22px;
  font-size:15px; line-height:1.5;
  color:rgba(255,255,255,0.88);
}
body.page-marketplace .mkt-v6-hero__subtitle strong{ color:#fcd34d; font-weight:700; }

/* Search bar (sits inside the hero now) — pill with frosted backing */
body.page-marketplace .mkt-v6-hero__search{
  position:relative; z-index:1;
  max-width:620px;
  background:rgba(255,255,255,0.97);
  border-radius:14px;
  padding:6px;
  box-shadow:0 14px 36px -18px rgba(0,0,0,0.4);
}
body.page-marketplace .mkt-v6-hero__search .mkt-v6__search-input{
  background:transparent;
  border:0;
}
body.page-marketplace .mkt-v6-hero__search .mkt-v6__search-btn{
  border-radius:10px;
}

/* ── Callout strip ─────────────────────────────────────────── */
body.page-marketplace .mkt-v6-callout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px 16px;
  margin:0 0 22px;
  padding:14px 18px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
}
body.page-marketplace .mkt-v6-callout__item{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:#334155;
  line-height:1.35;
}
body.page-marketplace .mkt-v6-callout__item i{
  flex-shrink:0;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#eef2ff; color:#4f46e5;
  font-size:13px;
}
body.page-marketplace .mkt-v6-callout__item strong{ color:#0f172a; font-weight:700; }

/* ── Style showcase (shop by style) ────────────────────────── */
body.page-marketplace .mkt-v6-styles{ margin:0 0 28px; }
body.page-marketplace .mkt-v6-styles__head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 12px;
}
body.page-marketplace .mkt-v6-styles__title{
  margin:0; font-size:20px; font-weight:700; color:#0f172a;
  letter-spacing:-0.01em;
}
body.page-marketplace .mkt-v6-styles__subtitle{
  margin:0; font-size:13px; color:#64748b;
}

/* Desktop: responsive grid. Mobile: horizontal scroll with snap. */
body.page-marketplace .mkt-v6-styles__scroller{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
body.page-marketplace .mkt-v6-style-card{
  --mkt-accent: linear-gradient(135deg,#4f46e5,#7c3aed);
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
  scroll-snap-align:start;
}
body.page-marketplace .mkt-v6-style-card:hover,
body.page-marketplace .mkt-v6-style-card:focus-visible{
  transform:translateY(-3px);
  border-color:#c7d2fe;
  box-shadow:0 16px 32px -20px rgba(79,70,229,0.45);
  outline:none;
}
body.page-marketplace .mkt-v6-style-card.is-active{
  border-color:transparent;
  box-shadow:0 0 0 2px #4f46e5, 0 16px 32px -20px rgba(79,70,229,0.55);
}
body.page-marketplace .mkt-v6-style-card__imgwrap{
  position:relative;
  aspect-ratio:1/1;
  background:var(--mkt-accent);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
body.page-marketplace .mkt-v6-style-card__imgwrap img{
  width:82%; height:82%;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  transition:transform .25s ease;
}
body.page-marketplace .mkt-v6-style-card:hover .mkt-v6-style-card__imgwrap img{
  transform:scale(1.06);
}
body.page-marketplace .mkt-v6-style-card__fallback{
  display:none;              /* shown via inline onerror fallback */
  align-items:center; justify-content:center;
  width:100%; height:100%;
  color:rgba(255,255,255,0.9);
  font-size:54px;
  background:var(--mkt-accent);
}
body.page-marketplace .mkt-v6-style-card__body{
  padding:10px 12px 12px;
  text-align:center;
}
body.page-marketplace .mkt-v6-style-card__name{
  font-size:13.5px; font-weight:600; color:#0f172a;
  line-height:1.25;
}
body.page-marketplace .mkt-v6-style-card__from{
  margin-top:3px;
  font-size:12px; color:#64748b;
}
body.page-marketplace .mkt-v6-style-card__from strong{ color:#0f172a; font-weight:700; }

/* Mobile: turn grid into a horizontal snap scroller. */
@media (max-width:720px){
  body.page-marketplace .mkt-v6-styles__scroller{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 10px;
    margin:0 -14px;              /* bleed to the screen edge */
    padding-left:14px; padding-right:14px;
  }
  body.page-marketplace .mkt-v6-style-card{
    flex:0 0 138px;
  }
  body.page-marketplace .mkt-v6-styles__scroller::-webkit-scrollbar{ height:6px; }
  body.page-marketplace .mkt-v6-styles__scroller::-webkit-scrollbar-thumb{
    background:#cbd5e1; border-radius:3px;
  }
}

/* ── Product grid (Round 51: full-width, bigger cards) ──
   Now that filters are in a slide-out drawer, the grid uses the
   whole page width. Cards get larger images and typography so the
   product is the hero of the view. */
body.page-marketplace .mkt-v6__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
@media (max-width:1199px){
  body.page-marketplace .mkt-v6__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
@media (max-width:720px){
  body.page-marketplace .mkt-v6__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
body.page-marketplace .mkt-v6__card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-marketplace .mkt-v6__card:hover{
  transform:translateY(-4px);
  border-color:#c7d2fe;
  box-shadow:0 18px 36px -20px rgba(15,23,42,0.32);
}
body.page-marketplace .mkt-v6__card-img{
  position:relative;
  aspect-ratio:1/1;
  background:#f1f5f9;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
body.page-marketplace .mkt-v6__card-img img{
  width:100%; height:100%;
  object-fit:contain;
  padding:14px;
  transition:transform .25s ease;
}
body.page-marketplace .mkt-v6__card:hover .mkt-v6__card-img img{
  transform:scale(1.05);
}
/* Layered arms-model composite for the marketplace grid card.
   The stack div takes on the tall mockup aspect (575×784) and is sized
   to fit inside the square .mkt-v6__card-img container — height-constrained
   so the shirt mockup never overflows. Design overlay sits absolutely
   positioned at %-offsets computed from the print-area geometry. */
body.page-marketplace .mkt-v6__card-img .mkt-v6__card-stack{
  position:relative;
  aspect-ratio:575 / 784;
  height:calc(100% - 28px);
  max-width:calc(100% - 28px);
  margin:14px auto;
  transition:transform .25s ease;
  overflow:visible;
}
body.page-marketplace .mkt-v6__card-img .mkt-v6__card-stack img.mkt-v6__card-blank{
  display:block;
  width:100%; height:100%;
  padding:0; /* override the generic img padding rule above */
  object-fit:contain;
  transition:none; /* hover-zoom is on the stack wrapper, not the blank */
}
body.page-marketplace .mkt-v6__card-img .mkt-v6__card-stack img.mkt-v6__card-design{
  padding:0; /* override the generic img padding rule above */
  object-fit:contain;
  transition:none;
}
body.page-marketplace .mkt-v6__card:hover .mkt-v6__card-img .mkt-v6__card-stack{
  transform:scale(1.05);
}
@media (max-width:720px){
  body.page-marketplace .mkt-v6__card-img .mkt-v6__card-stack{
    height:calc(100% - 20px);
    max-width:calc(100% - 20px);
    margin:10px auto;
  }
}
body.page-marketplace .mkt-v6__card-fallback{
  width:100%; height:100%;
  display:grid; place-items:center;
  color:#94a3b8; font-size:48px;
}
body.page-marketplace .mkt-v6__card-info{
  padding:14px 16px 18px;
  display:flex; flex-direction:column; gap:8px;
  min-height:84px;
}
body.page-marketplace .mkt-v6__card-title{
  margin:0;
  font-size:15.5px; line-height:1.35; font-weight:600;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
body.page-marketplace .mkt-v6__card-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
body.page-marketplace .mkt-v6__card-cat{
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:#64748b; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.page-marketplace .mkt-v6__card-price{
  font-size:18px; font-weight:800; color:#4f46e5;
  flex-shrink:0;
  letter-spacing:-.01em;
}
@media (max-width:720px){
  body.page-marketplace .mkt-v6__card-info{ padding:12px 14px 16px; gap:6px; min-height:72px; }
  body.page-marketplace .mkt-v6__card-title{ font-size:14px; }
  body.page-marketplace .mkt-v6__card-price{ font-size:16px; }
  body.page-marketplace .mkt-v6__card-img img{ padding:10px; }
}
body.page-marketplace .product-card__badge{
  position:absolute; top:8px; left:8px; z-index:1;
  padding:3px 9px;
  background:#f59e0b; color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 3px 8px rgba(245,158,11,0.35);
}
body.page-marketplace .mkt-v6__card-hover-hint{
  position:absolute; inset:auto 0 0 0;
  padding:8px 12px;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,0.72));
  color:#fff;
  font-size:12px; font-weight:600;
  display:flex; align-items:center; gap:6px; justify-content:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
body.page-marketplace .mkt-v6__card:hover .mkt-v6__card-hover-hint{
  opacity:1; transform:translateY(0);
}
@media (max-width:720px){
  body.page-marketplace .mkt-v6__card-hover-hint{ display:none; }
}

/* ── Hero mobile ───────────────────────────────────────────── */
@media (max-width:720px){
  body.page-marketplace .mkt-v6-hero{
    padding:32px 22px 30px;
    border-radius:18px;
  }
  body.page-marketplace .mkt-v6-hero__subtitle{ font-size:13.5px; margin-bottom:18px; }
  body.page-marketplace .mkt-v6-callout{
    grid-template-columns:1fr 1fr;
    padding:12px;
  }
  body.page-marketplace .mkt-v6-callout__item{ font-size:12px; }
  body.page-marketplace .mkt-v6-callout__item i{ width:28px; height:28px; font-size:12px; }
  body.page-marketplace .mkt-v6-styles__title{ font-size:18px; }
}

/* ============================================================ */
/* MARKETPLACE v6 REDESIGN — hero / vibes / cards / social proof */
/* ============================================================ */

/* ── New hero ──────────────────────────────────────────────── */
body.page-marketplace .mkt-hero-v6{
  /* Flat / clean hero background per latest request — the prior version
     used a dark purple→navy gradient plus three animated colour blobs
     and a subtle grid pattern. All three have been retired in favour of
     a neutral off-white card with the existing off-site content
     (typography, review card, CTA) supplying the visual interest. */
  position:relative;
  margin:20px 0 28px;
  padding:56px 48px 52px;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 30px -18px rgba(15,23,42,0.08);
}
/* Blob / grid layers are hidden — keeping the markup in place so the
   PHP doesn't need to change, but they no longer render. */
body.page-marketplace .mkt-hero-v6__bg{ display:none; }
body.page-marketplace .mkt-hero-v6__blob{ display:none; }
body.page-marketplace .mkt-hero-v6__grid{ display:none; }
@keyframes mktHeroFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(20px,-30px) scale(1.06); }
}

body.page-marketplace .mkt-hero-v6__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:56px;
  align-items:center;
}
body.page-marketplace .mkt-hero-v6__left{ max-width:640px; }

body.page-marketplace .mkt-hero-v6__drop-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.12em;
  color:#fff;
  box-shadow:0 10px 25px -10px rgba(239,68,68,0.7);
  margin-bottom:22px;
}
body.page-marketplace .mkt-hero-v6__drop-pill i{ font-size:11px; }
body.page-marketplace .mkt-hero-v6__drop-dot{
  width:6px; height:6px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,0.8);
  animation:mktPulseDot 1.4s ease-out infinite;
}
@keyframes mktPulseDot{
  0%  { box-shadow:0 0 0 0 rgba(255,255,255,0.85); }
  70% { box-shadow:0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

body.page-marketplace .mkt-hero-v6__title{
  font-size:clamp(38px, 5.5vw, 68px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-0.02em;
  margin:0 0 18px;
  color:#fff;
}
body.page-marketplace .mkt-hero-v6__title-accent{
  background:linear-gradient(135deg,#fbbf24,#f472b6 50%,#a78bfa);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.page-marketplace .mkt-hero-v6__subtitle{
  font-size:17px; line-height:1.55;
  color:rgba(255,255,255,0.78);
  margin:0 0 22px;
  max-width:560px;
}
body.page-marketplace .mkt-hero-v6__subtitle strong{ color:#fff; font-weight:700; }

body.page-marketplace .mkt-hero-v6__live{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.35);
  border-radius:999px;
  font-size:13px; color:rgba(255,255,255,0.9);
  margin-bottom:20px;
}
body.page-marketplace .mkt-hero-v6__live-dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,0.6);
  animation:mktPulseDot 1.6s ease-out infinite;
}
body.page-marketplace .mkt-hero-v6__live-text strong{
  color:#10b981; font-weight:800;
}

body.page-marketplace .mkt-hero-v6__search{
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:18px;
  box-shadow:0 20px 50px -20px rgba(15,23,42,0.55);
  margin-bottom:22px;
}

body.page-marketplace .mkt-hero-v6__trust{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:20px 26px;
  font-size:13.5px;
  color:rgba(255,255,255,0.82);
}
body.page-marketplace .mkt-hero-v6__trust li{
  display:inline-flex; align-items:center; gap:8px;
}
body.page-marketplace .mkt-hero-v6__trust i{
  color:#fbbf24;
  font-size:13px;
  width:18px; text-align:center;
}

/* Right-side floating showcase */
body.page-marketplace .mkt-hero-v6__right{
  position:relative;
  min-height:380px;
  display:flex; align-items:center; justify-content:center;
}
body.page-marketplace .mkt-hero-v6__showcase{
  position:relative;
  width:340px; height:420px;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.6);
  transform:rotate(-3deg);
  animation:mktShowcaseFloat 6s ease-in-out infinite;
}
@keyframes mktShowcaseFloat{
  0%,100%{ transform:rotate(-3deg) translateY(0); }
  50%    { transform:rotate(-3deg) translateY(-12px); }
}
body.page-marketplace .mkt-hero-v6__showcase-img{
  position:absolute; inset:24px;
  display:grid; place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,#1e1b4b,#4c1d95);
  font-size:180px;
  color:rgba(255,255,255,0.25);
}
body.page-marketplace .mkt-hero-v6__showcase-badge{
  position:absolute; top:-14px; left:-14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  color:#fff;
  border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.05em;
  box-shadow:0 10px 25px -10px rgba(239,68,68,0.75);
  transform:rotate(6deg);
}
body.page-marketplace .mkt-hero-v6__review{
  position:absolute;
  right:-24px; bottom:-28px;
  width:260px;
  padding:14px 14px 14px 16px;
  background:#fff;
  color:#0f172a;
  border-radius:16px;
  box-shadow:0 25px 60px -25px rgba(15,23,42,0.55);
  display:flex; gap:10px;
  transform:rotate(2deg);
}
body.page-marketplace .mkt-hero-v6__review-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#f472b6,#a78bfa);
  color:#fff;
  display:grid; place-items:center;
  font-size:16px;
  flex-shrink:0;
}
body.page-marketplace .mkt-hero-v6__review-stars{
  display:flex; gap:2px;
  color:#fbbf24;
  font-size:12px;
  margin-bottom:4px;
}
body.page-marketplace .mkt-hero-v6__review-text{
  font-size:12.5px; line-height:1.4;
  margin:0 0 4px;
  color:#334155;
}
body.page-marketplace .mkt-hero-v6__review-name{
  font-size:11px; font-weight:700;
  color:#0f172a;
}

@media (max-width:980px){
  body.page-marketplace .mkt-hero-v6{ padding:40px 28px 38px; border-radius:22px; }
  body.page-marketplace .mkt-hero-v6__inner{ grid-template-columns:1fr; gap:40px; }
  body.page-marketplace .mkt-hero-v6__right{ min-height:0; }
  body.page-marketplace .mkt-hero-v6__showcase{ width:280px; height:340px; }
  body.page-marketplace .mkt-hero-v6__review{ right:auto; left:50%; bottom:-34px; transform:translateX(-50%) rotate(2deg); }
}
@media (max-width:540px){
  body.page-marketplace .mkt-hero-v6{ padding:30px 18px 28px; border-radius:18px; }
  body.page-marketplace .mkt-hero-v6__title{ font-size:36px; }
  body.page-marketplace .mkt-hero-v6__subtitle{ font-size:14.5px; }
  body.page-marketplace .mkt-hero-v6__trust{ gap:12px 18px; font-size:12.5px; }
  body.page-marketplace .mkt-hero-v6__right{ display:none; }
}

/* ── Shop by vibe ──────────────────────────────────────────── */
body.page-marketplace .mkt-vibes{
  margin:40px 0 36px;
}
body.page-marketplace .mkt-vibes__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:20px;
  gap:16px; flex-wrap:wrap;
}
body.page-marketplace .mkt-vibes__title{
  font-size:26px; font-weight:800; letter-spacing:-0.01em;
  margin:0 0 4px;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-vibes__subtitle{
  font-size:14px;
  margin:0;
  color:var(--text-dim, #64748b);
}
body.page-marketplace .mkt-vibes__all{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700;
  color:var(--brand, #4f46e5);
  text-decoration:none;
  transition:transform .15s ease;
}
body.page-marketplace .mkt-vibes__all:hover{ transform:translateX(2px); }

body.page-marketplace .mkt-vibes__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
body.page-marketplace .mkt-vibe-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  background:#fff;
  box-shadow:0 8px 24px -12px rgba(15,23,42,0.2);
  transition:transform .25s ease, box-shadow .25s ease;
  border:2px solid transparent;
}
body.page-marketplace .mkt-vibe-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -15px rgba(15,23,42,0.28);
}
body.page-marketplace .mkt-vibe-card.is-active{
  border-color:var(--brand, #4f46e5);
  box-shadow:0 20px 40px -15px rgba(79,70,229,0.35);
}
body.page-marketplace .mkt-vibe-card__photo{
  position:relative;
  aspect-ratio:4 / 3;
  background:var(--mkt-vibe-grad, linear-gradient(135deg,#6366f1,#ec4899));
  display:grid; place-items:center;
  color:rgba(255,255,255,0.92);
  font-size:54px;
  overflow:hidden;
}
body.page-marketplace .mkt-vibe-card__photo i{ position:relative; z-index:1; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.3)); }
body.page-marketplace .mkt-vibe-card__pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.22) 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15) 2px, transparent 3px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.18) 1.5px, transparent 2.5px);
  background-size:60px 60px, 80px 80px, 70px 70px;
  opacity:.8;
}
body.page-marketplace .mkt-vibe-card__body{
  padding:14px 16px 16px;
}
body.page-marketplace .mkt-vibe-card__name{
  font-size:15px; font-weight:800;
  color:var(--text, #0f172a);
  margin-bottom:2px;
}
body.page-marketplace .mkt-vibe-card__cta{
  font-size:12.5px; font-weight:600;
  color:var(--text-dim, #64748b);
  display:inline-flex; align-items:center; gap:6px;
  transition:color .15s ease, transform .15s ease;
}
body.page-marketplace .mkt-vibe-card:hover .mkt-vibe-card__cta{
  color:var(--brand, #4f46e5);
  transform:translateX(2px);
}
@media (max-width:720px){
  body.page-marketplace .mkt-vibes__grid{
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:10px;
  }
  body.page-marketplace .mkt-vibe-card__photo{ font-size:38px; }
  body.page-marketplace .mkt-vibe-card__body{ padding:10px 12px 12px; }
  body.page-marketplace .mkt-vibe-card__name{ font-size:14px; }
}

/* ── Section head (Trending right now) ─────────────────────── */
body.page-marketplace .mkt-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin:8px 0 20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(15,23,42,0.08);
}
body.page-marketplace .mkt-section-head__title{
  font-size:22px; font-weight:800;
  letter-spacing:-0.01em;
  margin:0 0 4px;
  color:var(--text, #0f172a);
  display:inline-flex; align-items:center; gap:10px;
}
body.page-marketplace .mkt-section-head__title i{
  color:#ef4444;
  font-size:18px;
}
body.page-marketplace .mkt-section-head__subtitle{
  font-size:13.5px;
  margin:0;
  color:var(--text-dim, #64748b);
}

/* ── Rich product cards ────────────────────────────────────── */
body.page-marketplace .mkt-card-v6{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
body.page-marketplace .mkt-card-v6:hover{
  transform:translateY(-4px);
}

/* Badge (TRENDING / BESTSELLER / NEW / STAFF PICK / LOW STOCK) */
body.page-marketplace .mkt-card-v6__badge{
  position:absolute;
  top:10px; left:10px;
  z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px; font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.3);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body.page-marketplace .mkt-card-v6__badge i{ font-size:10px; }
body.page-marketplace .mkt-card-v6__badge--trending{ background:linear-gradient(135deg,#ef4444,#f97316); }
body.page-marketplace .mkt-card-v6__badge--bestseller{ background:linear-gradient(135deg,#f59e0b,#f97316); }
body.page-marketplace .mkt-card-v6__badge--new{ background:linear-gradient(135deg,#10b981,#059669); }
body.page-marketplace .mkt-card-v6__badge--staff-pick{ background:linear-gradient(135deg,#6366f1,#8b5cf6); }
body.page-marketplace .mkt-card-v6__badge--low-stock{ background:linear-gradient(135deg,#dc2626,#991b1b); }

/* Favorite / wishlist heart */
body.page-marketplace .mkt-card-v6__fav{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,0.95);
  color:#64748b;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.2);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
body.page-marketplace .mkt-card-v6__fav:hover{
  transform:scale(1.08);
  color:#ef4444;
}
body.page-marketplace .mkt-card-v6__fav.is-saved{
  background:#fef2f2;
  color:#ef4444;
}
body.page-marketplace .mkt-card-v6__fav.is-saved i{
  font-weight:900;
}
body.page-marketplace .mkt-card-v6__fav.is-saved i::before{
  content:"\f004"; /* solid heart */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

/* Category pill above title */
body.page-marketplace .mkt-card-v6__cat{
  display:inline-block;
  font-size:10.5px; font-weight:700;
  color:var(--brand, #4f46e5);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}

/* Star rating row */
body.page-marketplace .mkt-card-v6__rating{
  display:flex; align-items:center; gap:6px;
  margin:6px 0 8px;
  font-size:12px;
}
body.page-marketplace .mkt-card-v6__stars{
  display:inline-flex; gap:1px;
  color:#fbbf24;
  font-size:11.5px;
}
body.page-marketplace .mkt-card-v6__rating-num{
  font-weight:700;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-card-v6__rating-count{
  color:var(--text-dim, #94a3b8);
}

/* Price row */
body.page-marketplace .mkt-card-v6__price-row{
  display:flex; align-items:baseline; gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
body.page-marketplace .mkt-card-v6__price{
  font-size:18px; font-weight:800;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-card-v6__price-orig{
  font-size:13px;
  color:var(--text-dim, #94a3b8);
  text-decoration:line-through;
}
body.page-marketplace .mkt-card-v6__save{
  padding:2px 7px;
  background:#dcfce7;
  color:#15803d;
  border-radius:4px;
  font-size:10px; font-weight:800;
  letter-spacing:.04em;
}

/* Stock + shipping footer */
body.page-marketplace .mkt-card-v6__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; flex-wrap:wrap;
  padding-top:8px;
  border-top:1px solid rgba(15,23,42,0.06);
  font-size:11.5px;
}
body.page-marketplace .mkt-card-v6__stock{
  display:inline-flex; align-items:center; gap:4px;
  color:#16a34a;
  font-weight:600;
}
body.page-marketplace .mkt-card-v6__stock--low{
  color:#dc2626;
}
body.page-marketplace .mkt-card-v6__stock--hot{
  color:#f97316;
}
body.page-marketplace .mkt-card-v6__ship{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-dim, #64748b);
}

@media (max-width:520px){
  body.page-marketplace .mkt-card-v6__foot{ font-size:10.5px; }
  body.page-marketplace .mkt-card-v6__price{ font-size:16px; }
}

/* ── Social proof / testimonials / rating breakdown ────────── */
body.page-marketplace .mkt-social{
  margin:48px 0 40px;
  padding:40px 32px;
  background:
    linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.04));
  border:1px solid rgba(15,23,42,0.06);
  border-radius:28px;
}
body.page-marketplace .mkt-social__head{
  text-align:center;
  margin-bottom:32px;
}
body.page-marketplace .mkt-social__tag{
  display:inline-block;
  padding:4px 12px;
  background:linear-gradient(135deg,#f472b6,#a78bfa);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:12px; font-weight:800; letter-spacing:.2em;
  margin-bottom:8px;
}
body.page-marketplace .mkt-social__title{
  font-size:30px; font-weight:900;
  margin:0 0 8px;
  letter-spacing:-0.01em;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-social__subtitle{
  font-size:14.5px;
  color:var(--text-dim, #64748b);
  margin:0;
}

/* Rating breakdown hero */
body.page-marketplace .mkt-rating-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
  padding:24px 28px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 24px -14px rgba(15,23,42,0.15);
  margin-bottom:32px;
}
body.page-marketplace .mkt-rating-hero__score{
  text-align:center;
  padding-right:28px;
  border-right:1px solid rgba(15,23,42,0.08);
}
body.page-marketplace .mkt-rating-hero__num{
  font-size:56px; font-weight:900;
  line-height:1;
  color:var(--text, #0f172a);
  margin-bottom:6px;
  letter-spacing:-0.03em;
}
body.page-marketplace .mkt-rating-hero__stars{
  color:#fbbf24;
  font-size:16px;
  margin-bottom:6px;
  letter-spacing:2px;
}
body.page-marketplace .mkt-rating-hero__count{
  font-size:12.5px;
  color:var(--text-dim, #64748b);
}
body.page-marketplace .mkt-rating-hero__bars{
  display:flex; flex-direction:column; gap:8px;
}
body.page-marketplace .mkt-rating-hero__bar{
  display:grid;
  grid-template-columns:40px 1fr 44px;
  gap:12px;
  align-items:center;
  font-size:12.5px;
}
body.page-marketplace .mkt-rating-hero__bar-label{
  display:inline-flex; align-items:center; gap:3px;
  color:var(--text-dim, #64748b);
}
body.page-marketplace .mkt-rating-hero__bar-label i{ color:#fbbf24; font-size:10px; }
body.page-marketplace .mkt-rating-hero__bar-track{
  height:8px;
  background:rgba(15,23,42,0.06);
  border-radius:999px;
  overflow:hidden;
}
body.page-marketplace .mkt-rating-hero__bar-fill{
  height:100%;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
  border-radius:999px;
}
body.page-marketplace .mkt-rating-hero__bar-pct{
  text-align:right;
  font-weight:700;
  color:var(--text, #0f172a);
}

@media (max-width:640px){
  body.page-marketplace .mkt-rating-hero{
    grid-template-columns:1fr;
    gap:22px;
    padding:20px;
  }
  body.page-marketplace .mkt-rating-hero__score{
    padding-right:0; padding-bottom:22px;
    border-right:0;
    border-bottom:1px solid rgba(15,23,42,0.08);
  }
  body.page-marketplace .mkt-rating-hero__num{ font-size:46px; }
}

/* Testimonials grid */
body.page-marketplace .mkt-testimonials{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-bottom:32px;
}
body.page-marketplace .mkt-testimonial{
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:18px;
  padding:20px;
  box-shadow:0 4px 16px -8px rgba(15,23,42,0.1);
}
body.page-marketplace .mkt-testimonial__stars{
  color:#fbbf24;
  font-size:12px;
  margin-bottom:10px;
  display:flex; gap:2px;
}
body.page-marketplace .mkt-testimonial__text{
  font-size:14px; line-height:1.55;
  color:var(--text, #0f172a);
  margin:0 0 14px;
}
body.page-marketplace .mkt-testimonial__author{
  display:flex; align-items:center; gap:10px;
}
body.page-marketplace .mkt-testimonial__avatar{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  font-size:13px; font-weight:700;
}
body.page-marketplace .mkt-testimonial__name{
  font-size:13px; font-weight:700;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-testimonial__verified{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px;
  color:#10b981;
  font-weight:600;
}

/* #TSHIRTGANG Instagram grid */
body.page-marketplace .mkt-ig{
  text-align:center;
}
body.page-marketplace .mkt-ig__head{
  font-size:18px; font-weight:800;
  margin:0 0 4px;
  color:var(--text, #0f172a);
}
body.page-marketplace .mkt-ig__head i{
  color:#E4405F;
  margin-right:6px;
}
body.page-marketplace .mkt-ig__sub{
  font-size:13px;
  color:var(--text-dim, #64748b);
  margin:0 0 18px;
}
body.page-marketplace .mkt-ig__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}
body.page-marketplace .mkt-ig__tile{
  aspect-ratio:1 / 1;
  border-radius:14px;
  background:var(--mkt-ig-grad, linear-gradient(135deg,#6366f1,#ec4899));
  position:relative;
  overflow:hidden;
  display:grid; place-items:center;
  color:rgba(255,255,255,0.85);
  font-size:38px;
  transition:transform .2s ease;
  cursor:pointer;
}
body.page-marketplace .mkt-ig__tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35));
  pointer-events:none;
}
body.page-marketplace .mkt-ig__tile:hover{
  transform:scale(1.03);
}
body.page-marketplace .mkt-ig__tile i.fa-instagram{
  position:absolute; bottom:8px; right:10px;
  font-size:14px; color:rgba(255,255,255,0.85);
  z-index:1;
}

@media (max-width:640px){
  body.page-marketplace .mkt-social{ padding:30px 18px; border-radius:22px; }
  body.page-marketplace .mkt-social__title{ font-size:22px; }
}

/* ============================================================ */
/* MARKETPLACE PRODUCT DETAIL v6 REDESIGN                       */
/* ============================================================ */

/* Breadcrumb */
body.page-marketplace-product .mkt-breadcrumb{
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
  margin:22px 0 20px;
  font-size:13px;
  color:var(--text-dim, #64748b);
}
body.page-marketplace-product .mkt-breadcrumb a{
  color:var(--text-dim, #64748b);
  text-decoration:none;
  padding:4px 6px;
  border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
body.page-marketplace-product .mkt-breadcrumb a:hover{
  background:rgba(15,23,42,0.05);
  color:var(--brand, #4f46e5);
}
body.page-marketplace-product .mkt-breadcrumb__sep{
  color:rgba(15,23,42,0.35);
  font-size:10px;
}
body.page-marketplace-product .mkt-breadcrumb__current{
  color:var(--text, #0f172a);
  font-weight:600;
  padding:4px 6px;
}

/* Product grid layout */
body.page-marketplace-product .mkt-product{
  padding-bottom:60px;
}
body.page-marketplace-product .mkt-product__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:flex-start;
}
@media (max-width:900px){
  body.page-marketplace-product .mkt-product__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* Media column: big image. Thumbnail rail was removed per user request —
   swatches drive the colour swap directly, so the left 72px column is gone
   and the stage now spans the full media column width. */
body.page-marketplace-product .mkt-pmedia{
  position:relative;
  display:block;
  min-width:0;
}
body.page-marketplace-product .mkt-pmedia__thumbs{
  display:flex; flex-direction:column;
  gap:10px;
}
body.page-marketplace-product .mkt-pmedia__thumb{
  width:72px; height:72px;
  border-radius:12px;
  border:2px solid rgba(15,23,42,0.08);
  background:#f8fafc;
  display:grid; place-items:center;
  cursor:pointer;
  overflow:hidden;
  font-size:22px;
  color:rgba(15,23,42,0.4);
  padding:0;
  transition:border-color .15s ease, transform .15s ease;
}
body.page-marketplace-product .mkt-pmedia__thumb:hover{ transform:translateY(-2px); }
body.page-marketplace-product .mkt-pmedia__thumb.is-active{
  border-color:var(--brand, #4f46e5);
}
body.page-marketplace-product .mkt-pmedia__thumb img{ width:100%; height:100%; object-fit:contain; }

body.page-marketplace-product .mkt-pmedia__stage{
  position:relative;
  background:
    radial-gradient(ellipse at center, rgba(99,102,241,0.05), transparent 70%),
    #f8fafc;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.06);
}
/* Preview stack — the blank shirt is flow-sized (width:100%; height:auto)
   so it gives the stack a real computed height via its natural aspect
   ratio. The design <img> is absolutely positioned against that height
   using PHP-computed %s for top/left/width/height. This mirrors the
   grid card approach in marketplace_v6.php.

   Why not padding-top aspect-ratio + absolute shirt? Percentage heights
   on absolutely-positioned children don't reliably resolve against a
   padding-top-sized parent in all browsers — the design collapses to
   its intrinsic pixel size and shows as a tiny thumbnail. The
   flow-sized shirt approach is robust across browsers. */
body.page-marketplace-product .mkt-pmedia__stack{
  position:relative;
  width:100%;
  line-height:0; /* kill the inline-img gap under the shirt */
}
body.page-marketplace-product .mkt-pmedia__shirt{
  display:block;
  width:100%;
  height:auto;
}
body.page-marketplace-product .mkt-pmedia__design{
  /* top/left/width/height are set inline from PHP-computed %s so the
     design scales with the stack. object-fit:contain keeps aspect ratio
     inside the print-area rect. Pixel dimensions of the underlying image
     don't matter — an 800px thumbnail fills the same rect as a 2200px
     print file, because CSS sizes the <img> element, not the pixel data. */
  object-fit:contain;
  object-position:top center;
  pointer-events:none;
  display:block;
}
/* Safety net for any stray img inside the stage (fallback cases). */
body.page-marketplace-product .mkt-pmedia__stage img:not(.mkt-pmedia__shirt):not(.mkt-pmedia__design){
  max-width:100%;
  height:auto;
  display:block;
}

/* Badges on image */
body.page-marketplace-product .mkt-pmedia__badges{
  position:absolute;
  top:16px; left:16px;
  display:flex; flex-direction:column;
  gap:8px;
  z-index:2;
}
body.page-marketplace-product .mkt-pmedia__badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px; font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.3);
}
body.page-marketplace-product .mkt-pmedia__badge--trending{ background:linear-gradient(135deg,#ef4444,#f97316); }
body.page-marketplace-product .mkt-pmedia__badge--save{ background:linear-gradient(135deg,#10b981,#059669); }

/* Wishlist heart */
body.page-marketplace-product .mkt-pmedia__fav{
  position:absolute;
  top:16px; right:16px;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:0;
  background:#fff;
  color:#64748b;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:16px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.2);
  transition:transform .15s ease, color .15s ease, background .15s ease;
}
body.page-marketplace-product .mkt-pmedia__fav:hover{
  transform:scale(1.08);
  color:#ef4444;
}
body.page-marketplace-product .mkt-pmedia__fav.is-saved{
  background:#fef2f2;
  color:#ef4444;
}

@media (max-width:640px){
  body.page-marketplace-product .mkt-pmedia{
    grid-template-columns:1fr;
  }
  body.page-marketplace-product .mkt-pmedia__thumbs{
    flex-direction:row;
    order:2;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  body.page-marketplace-product .mkt-pmedia__thumb{
    scroll-snap-align:start;
    flex:0 0 64px;
    width:64px; height:64px;
  }
}

/* Info column */
body.page-marketplace-product .mkt-pinfo{
  display:flex; flex-direction:column;
  gap:18px;
}
body.page-marketplace-product .mkt-pinfo__cat{
  font-size:11px; font-weight:800;
  letter-spacing:.12em;
  color:var(--brand, #4f46e5);
  text-transform:uppercase;
}
body.page-marketplace-product .mkt-pinfo__title{
  font-size:32px; font-weight:900;
  letter-spacing:-0.01em;
  line-height:1.15;
  color:var(--text, #0f172a);
  margin:0;
}

/* Rating row */
body.page-marketplace-product .mkt-pinfo__rating{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  font-size:13px;
}
body.page-marketplace-product .mkt-pinfo__rating-stars{
  display:inline-flex; gap:2px;
  color:#fbbf24;
  font-size:14px;
}
body.page-marketplace-product .mkt-pinfo__rating-num{
  font-weight:800;
  color:var(--text, #0f172a);
}
body.page-marketplace-product .mkt-pinfo__rating-count{
  color:var(--text-dim, #64748b);
  text-decoration:underline;
  text-decoration-color:rgba(100,116,139,0.3);
  text-underline-offset:2px;
  cursor:pointer;
}
body.page-marketplace-product .mkt-pinfo__rating-sep{
  color:rgba(15,23,42,0.2);
}

/* Price row */
body.page-marketplace-product .mkt-pinfo__price-row{
  display:flex; align-items:baseline; gap:12px;
  flex-wrap:wrap;
}
body.page-marketplace-product .mkt-pinfo__price{
  font-size:34px; font-weight:900;
  color:var(--text, #0f172a);
  letter-spacing:-0.02em;
}
body.page-marketplace-product .mkt-pinfo__price-orig{
  font-size:18px;
  color:var(--text-dim, #94a3b8);
  text-decoration:line-through;
}
body.page-marketplace-product .mkt-pinfo__save{
  padding:4px 10px;
  background:#dcfce7;
  color:#15803d;
  border-radius:6px;
  font-size:12px; font-weight:800;
  letter-spacing:.04em;
}
body.page-marketplace-product .mkt-pinfo__tax{
  font-size:12.5px;
  color:var(--text-dim, #64748b);
}

/* Social proof (viewing / sold in last 24h) */
body.page-marketplace-product .mkt-pinfo__social{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(135deg, rgba(239,68,68,0.08), rgba(249,115,22,0.08));
  border:1px solid rgba(239,68,68,0.15);
  border-radius:12px;
  font-size:13px;
  color:var(--text, #0f172a);
}
body.page-marketplace-product .mkt-pinfo__social-dot{
  width:8px; height:8px; border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,0.6);
  animation:mktPulseDot 1.6s ease-out infinite;
  flex-shrink:0;
}
body.page-marketplace-product .mkt-pinfo__social strong{
  color:#ef4444;
  font-weight:800;
}
body.page-marketplace-product .mkt-pinfo__social-sep{
  color:rgba(15,23,42,0.2);
}

/* Urgency countdown */
body.page-marketplace-product .mkt-pinfo__urgency{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  border-radius:12px;
  font-size:13px;
}
body.page-marketplace-product .mkt-pinfo__urgency i{
  color:#fbbf24;
  font-size:14px;
}
body.page-marketplace-product .mkt-pinfo__urgency-time{
  margin-left:auto;
  display:inline-flex; gap:4px;
}
body.page-marketplace-product .mkt-pinfo__urgency-cell{
  min-width:32px;
  padding:4px 6px;
  background:rgba(255,255,255,0.12);
  border-radius:6px;
  font-weight:800;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* Option labels */
body.page-marketplace-product .mkt-pinfo__opt-label{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700;
  color:var(--text, #0f172a);
  margin:0 0 10px;
}
body.page-marketplace-product .mkt-pinfo__opt-label-value{
  font-weight:500;
  color:var(--text-dim, #64748b);
}

/* Colour swatches (larger, with border) */
body.page-marketplace-product .mkt-swatches{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:22px;
}
body.page-marketplace-product .mkt-swatch{
  width:44px; height:44px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(15,23,42,0.1);
  box-shadow:inset 0 0 0 3px #fff;
  transition:transform .15s ease, border-color .15s ease;
  position:relative;
}
body.page-marketplace-product .mkt-swatch:hover{ transform:scale(1.08); }
body.page-marketplace-product .mkt-swatch.is-selected{
  border-color:var(--brand, #4f46e5);
  box-shadow:inset 0 0 0 3px #fff, 0 0 0 1px var(--brand, #4f46e5);
}

/* Size pills */
body.page-marketplace-product .mkt-sizes{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
body.page-marketplace-product .mkt-size{
  min-width:58px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  border:1.5px solid rgba(15,23,42,0.12);
  font-size:13.5px; font-weight:700;
  color:var(--text, #0f172a);
  cursor:pointer;
  transition:all .15s ease;
  position:relative;
}
body.page-marketplace-product .mkt-size:hover:not(:disabled){
  border-color:var(--brand, #4f46e5);
}
body.page-marketplace-product .mkt-size.is-selected{
  background:var(--text, #0f172a);
  border-color:var(--text, #0f172a);
  color:#fff;
}
body.page-marketplace-product .mkt-size.is-unavailable,
body.page-marketplace-product .mkt-size:disabled{
  opacity:.4;
  cursor:not-allowed;
  text-decoration:line-through;
}
body.page-marketplace-product .mkt-pinfo__size-alert{
  font-size:12.5px;
  color:#dc2626;
  font-weight:600;
  margin:4px 0 0;
  display:inline-flex; align-items:center; gap:5px;
}

/* Quantity stepper */
body.page-marketplace-product .mkt-qty{
  display:inline-flex; align-items:center;
  border:1.5px solid rgba(15,23,42,0.12);
  border-radius:10px;
  overflow:hidden;
}
body.page-marketplace-product .mkt-qty__btn{
  width:40px; height:44px;
  background:#fff;
  border:0;
  font-size:16px;
  color:var(--text, #0f172a);
  cursor:pointer;
  transition:background .15s ease;
}
body.page-marketplace-product .mkt-qty__btn:hover{ background:rgba(15,23,42,0.04); }
body.page-marketplace-product .mkt-qty__btn:disabled{ opacity:.3; cursor:not-allowed; }
body.page-marketplace-product .mkt-qty__val{
  min-width:44px; padding:0 8px;
  text-align:center;
  font-size:15px; font-weight:700;
  color:var(--text, #0f172a);
  font-variant-numeric:tabular-nums;
}

/* Buy buttons */
body.page-marketplace-product .mkt-pinfo__buy{
  display:flex; flex-direction:column;
  gap:10px;
  margin-top:4px;
}
body.page-marketplace-product .mkt-pinfo__atc{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 20px;
  border-radius:12px;
  border:0;
  background:var(--text, #0f172a);
  color:#fff;
  font-size:15px; font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 12px 28px -10px rgba(15,23,42,0.55);
}
body.page-marketplace-product .mkt-pinfo__atc:hover{
  transform:translateY(-1px);
  background:#1e293b;
}
body.page-marketplace-product .mkt-pinfo__atc-price{
  opacity:.75;
  font-weight:700;
}
body.page-marketplace-product .mkt-pinfo__shoppay{
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  width:100%;
  padding:16px 20px;
  border-radius:12px;
  border:0;
  background:#5a31f4;
  color:#fff;
  font-size:15px; font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
body.page-marketplace-product .mkt-pinfo__shoppay:hover{
  transform:translateY(-1px);
  background:#4b29cc;
}
body.page-marketplace-product .mkt-pinfo__shoppay-brand{
  font-weight:900;
  letter-spacing:-.02em;
}

/* Delivery row */
body.page-marketplace-product .mkt-pinfo__delivery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:14px 16px;
  background:#f8fafc;
  border-radius:12px;
  font-size:12.5px;
}
body.page-marketplace-product .mkt-pinfo__delivery-item{
  display:flex; align-items:flex-start; gap:10px;
}
body.page-marketplace-product .mkt-pinfo__delivery-item i{
  width:28px; height:28px;
  border-radius:8px;
  background:#fff;
  color:var(--brand, #4f46e5);
  display:grid; place-items:center;
  font-size:12px;
  flex-shrink:0;
  box-shadow:0 2px 6px -2px rgba(15,23,42,0.1);
}
body.page-marketplace-product .mkt-pinfo__delivery-label{
  font-weight:700;
  color:var(--text, #0f172a);
  display:block;
  margin-bottom:1px;
}
body.page-marketplace-product .mkt-pinfo__delivery-sub{
  color:var(--text-dim, #64748b);
  font-size:11.5px;
}
@media (max-width:540px){
  body.page-marketplace-product .mkt-pinfo__delivery{
    grid-template-columns:1fr;
  }
}

/* Trust row */
body.page-marketplace-product .mkt-pinfo__trust{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:14px 24px;
  padding:14px 0;
  border-top:1px solid rgba(15,23,42,0.08);
  border-bottom:1px solid rgba(15,23,42,0.08);
  font-size:12.5px;
  color:var(--text-dim, #64748b);
}
body.page-marketplace-product .mkt-pinfo__trust li{
  display:inline-flex; align-items:center; gap:6px;
}
body.page-marketplace-product .mkt-pinfo__trust i{
  color:#16a34a;
  font-size:13px;
}

/* Secure checkout logos */
body.page-marketplace-product .mkt-pinfo__secure{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  padding-top:4px;
  font-size:11.5px;
  color:var(--text-dim, #64748b);
}
body.page-marketplace-product .mkt-pinfo__secure-label{
  display:inline-flex; align-items:center; gap:5px;
}
body.page-marketplace-product .mkt-pinfo__secure-label i{ color:#16a34a; font-size:12px; }
body.page-marketplace-product .mkt-pinfo__secure-logos{
  display:inline-flex; gap:8px;
  flex-wrap:wrap;
}
body.page-marketplace-product .mkt-pinfo__secure-logo{
  padding:3px 8px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:5px;
  font-size:10.5px; font-weight:800;
  color:var(--text, #0f172a);
  letter-spacing:.04em;
}
body.page-marketplace-product .mkt-pinfo__secure-logo i{ margin-right:3px; }

/* Tabs */
body.page-marketplace-product .mkt-tabs{
  margin-top:48px;
  border-top:1px solid rgba(15,23,42,0.08);
}
body.page-marketplace-product .mkt-tabs__nav{
  display:flex; gap:4px;
  overflow-x:auto;
  border-bottom:1px solid rgba(15,23,42,0.08);
}
body.page-marketplace-product .mkt-tabs__tab{
  padding:18px 22px;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  font-size:14px; font-weight:700;
  color:var(--text-dim, #64748b);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
body.page-marketplace-product .mkt-tabs__tab:hover{ color:var(--text, #0f172a); }
body.page-marketplace-product .mkt-tabs__tab.is-active{
  color:var(--text, #0f172a);
  border-bottom-color:var(--text, #0f172a);
}
body.page-marketplace-product .mkt-tabs__panel{
  display:none;
  padding:28px 4px 20px;
  font-size:14.5px; line-height:1.65;
  color:var(--text, #0f172a);
  max-width:780px;
}
body.page-marketplace-product .mkt-tabs__panel.is-active{ display:block; }
body.page-marketplace-product .mkt-tabs__panel p{ margin:0 0 14px; }
body.page-marketplace-product .mkt-tabs__panel ul{
  list-style:none;
  padding:0; margin:0 0 14px;
}
body.page-marketplace-product .mkt-tabs__panel li{
  padding-left:26px;
  position:relative;
  margin-bottom:8px;
}
body.page-marketplace-product .mkt-tabs__panel li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute; left:0; top:3px;
  color:#16a34a;
  font-size:12px;
}
body.page-marketplace-product .mkt-tabs__panel table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  font-size:13.5px;
}
body.page-marketplace-product .mkt-tabs__panel th,
body.page-marketplace-product .mkt-tabs__panel td{
  padding:10px 14px;
  text-align:center;
  border:1px solid rgba(15,23,42,0.08);
}
body.page-marketplace-product .mkt-tabs__panel th{
  background:#f8fafc;
  font-weight:700;
}

/* ============================================================
   Marketplace product — 2026-04-19 mobile/visual rescue pass
   ----
   This block is the single source of truth for the new product
   detail layout. It is deliberately scoped with higher specificity
   (`body.page-v6.page-marketplace-product`) so it wins over any
   older `.mkt-pmedia*` / `.mkt-pinfo*` rules earlier in the file.
   ============================================================ */

/* Outer grid — stacks cleanly on tablet + mobile. Bumping the
   stack breakpoint to 960px means the info column never gets
   squeezed below ~360px on narrow tablets. */
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,1.05fr) minmax(0,1fr);
  gap:48px;
  align-items:flex-start;
  margin-top:18px;
}
@media (max-width:960px){
  body.page-v6.page-marketplace-product .mkt-product__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* Media column — the old 72px thumbnail rail was removed in PHP (swatches
   now handle colour selection alone), so the stage spans the full width.
   Keeping the rule as a block so `min-width:0` still lets the canvas shrink
   inside the outer grid cell. */
body.page-v6.page-marketplace-product .mkt-pmedia{
  position:relative;
  display:block;
  min-width:0;
}
body.page-v6.page-marketplace-product .mkt-pmedia__thumbs{
  display:flex; flex-direction:column;
  gap:10px;
  min-width:0;
}
body.page-v6.page-marketplace-product .mkt-pmedia__thumb{
  width:72px; height:72px;
  border-radius:12px;
  border:2px solid rgba(15,23,42,0.08);
  background:#f8fafc center/cover no-repeat;
  cursor:pointer;
  padding:0;
  transition:border-color .15s ease, transform .15s ease;
  flex:0 0 auto;
}
body.page-v6.page-marketplace-product .mkt-pmedia__thumb:hover{ transform:translateY(-2px); }
body.page-v6.page-marketplace-product .mkt-pmedia__thumb.is-selected,
body.page-v6.page-marketplace-product .mkt-pmedia__thumb.is-active{
  border-color:var(--brand, #4f46e5);
}

/* Stage wraps the preview stack. Height is driven by the inner
   .mkt-pmedia__stack — which is in turn driven by the flow-sized
   blank-shirt img (width:100%; height:auto). No aspect-ratio is
   needed here because the shirt's natural aspect ratio determines
   the stage height organically. */
body.page-v6.page-marketplace-product .mkt-pmedia__stage{
  position:relative;
  background:
    radial-gradient(ellipse at center, rgba(99,102,241,0.05), transparent 70%),
    #f8fafc;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:20px;
  overflow:hidden;
  width:100%;
  min-width:0;
}

/* Mobile: stack thumbs horizontally under the stage so the stage
   gets the full viewport width (no cramped 72px rail). */
@media (max-width:640px){
  body.page-v6.page-marketplace-product .mkt-pmedia{
    grid-template-columns:1fr;
    gap:10px;
  }
  body.page-v6.page-marketplace-product .mkt-pmedia__stage{
    order:1;
    border-radius:16px;
  }
  body.page-v6.page-marketplace-product .mkt-pmedia__thumbs{
    order:2;
    flex-direction:row;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
  }
  body.page-v6.page-marketplace-product .mkt-pmedia__thumb{
    flex:0 0 64px;
    width:64px; height:64px;
    scroll-snap-align:start;
  }
}

/* Info column */
body.page-v6.page-marketplace-product .mkt-pinfo{
  display:flex; flex-direction:column;
  gap:18px;
  min-width:0;
}
body.page-v6.page-marketplace-product .mkt-pinfo > *{ min-width:0; }
body.page-v6.page-marketplace-product .mkt-pinfo__cat{
  font-size:11px; font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand, #4f46e5);
}
body.page-v6.page-marketplace-product .mkt-pinfo__title{
  font-size:clamp(24px, 3.5vw, 32px);
  font-weight:900;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0;
  color:var(--text, #0f172a);
}

/* Rating row */
body.page-v6.page-marketplace-product .mkt-pinfo__rating{
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
  font-size:13px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__stars{
  display:inline-flex; gap:2px;
  color:#fbbf24;
  font-size:14px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__rating-num{
  font-weight:800;
  color:var(--text, #0f172a);
}
body.page-v6.page-marketplace-product .mkt-pinfo__rating-link{
  color:var(--text-dim, #64748b);
  text-decoration:underline;
  text-underline-offset:2px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__rating-link:hover{ color:var(--text, #0f172a); }

/* Price row */
body.page-v6.page-marketplace-product .mkt-pinfo__price{
  display:flex; align-items:baseline; gap:12px;
  flex-wrap:wrap;
}
body.page-v6.page-marketplace-product .mkt-pinfo__price-now{
  font-size:clamp(26px, 3vw, 34px);
  font-weight:900;
  color:var(--text, #0f172a);
  letter-spacing:-0.02em;
}
body.page-v6.page-marketplace-product .mkt-pinfo__price-was{
  font-size:16px;
  color:var(--text-dim, #94a3b8);
  text-decoration:line-through;
}
body.page-v6.page-marketplace-product .mkt-pinfo__price-save{
  padding:4px 10px;
  background:#dcfce7;
  color:#15803d;
  border-radius:6px;
  font-size:12px; font-weight:800;
  letter-spacing:.04em;
}

/* Light-weight low-stock notice (the dark urgency banner with a
   countdown was removed 2026-04-19 — this is just the "Only N left"
   stripe left behind, styled softer). */
body.page-v6.page-marketplace-product .mkt-pinfo__urgency--light{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  border-radius:10px;
  font-size:13px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__urgency--light i{ color:#ea580c; }
body.page-v6.page-marketplace-product .mkt-pinfo__urgency-row{
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}

/* Option label row */
body.page-v6.page-marketplace-product .mkt-pinfo__opt{
  display:block;
}
body.page-v6.page-marketplace-product .mkt-pinfo__opt-label{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  font-size:13px; font-weight:700;
  color:var(--text, #0f172a);
  margin:0 0 10px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__opt-val{
  font-weight:500;
  color:var(--text-dim, #64748b);
}

/* Colour swatches */
body.page-v6.page-marketplace-product .mkt-swatches{
  display:flex; flex-wrap:wrap; gap:10px;
}
body.page-v6.page-marketplace-product .mkt-swatch{
  width:40px; height:40px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(15,23,42,0.1);
  box-shadow:inset 0 0 0 3px #fff;
  transition:transform .15s ease, border-color .15s ease;
  display:inline-block;
}
body.page-v6.page-marketplace-product .mkt-swatch:hover{ transform:scale(1.08); }
body.page-v6.page-marketplace-product .mkt-swatch.is-selected{
  border-color:var(--brand, #4f46e5);
  box-shadow:inset 0 0 0 3px #fff, 0 0 0 1px var(--brand, #4f46e5);
}

/* Size pills */
body.page-v6.page-marketplace-product .mkt-sizes{
  display:flex; flex-wrap:wrap; gap:8px;
}
body.page-v6.page-marketplace-product .mkt-size{
  min-width:52px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  border:1.5px solid rgba(15,23,42,0.14);
  font-size:13.5px; font-weight:700;
  color:var(--text, #0f172a);
  cursor:pointer;
  transition:all .15s ease;
}
body.page-v6.page-marketplace-product .mkt-size:hover:not(:disabled){
  border-color:var(--brand, #4f46e5);
}
body.page-v6.page-marketplace-product .mkt-size.is-selected{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}
body.page-v6.page-marketplace-product .mkt-size:disabled,
body.page-v6.page-marketplace-product .mkt-size.is-unavailable{
  opacity:.4;
  cursor:not-allowed;
  text-decoration:line-through;
}

/* Size-chart trigger (looks like a subtle link, not a button) */
body.page-v6.page-marketplace-product .mkt-pinfo__size-guide{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  margin:-4px -8px; /* align to label baseline */
  background:transparent;
  border:0;
  font-size:12.5px; font-weight:600;
  color:var(--text-dim, #64748b);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
body.page-v6.page-marketplace-product .mkt-pinfo__size-guide:hover{
  color:var(--brand, #4f46e5);
}

/* Inline measurements (Chest/Length/Sleeve) under the size pills */
body.page-v6.page-marketplace-product .mkt-pinfo__measure{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
  margin-top:0;
}
body.page-v6.page-marketplace-product .mkt-pinfo__measure.is-visible{
  max-height:200px;
  opacity:1;
  margin-top:12px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__measure-table{
  width:100%;
  border-collapse:collapse;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:10px;
  overflow:hidden;
  font-size:12.5px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__measure-table th{
  padding:8px 10px;
  background:#f1f5f9;
  color:var(--text-dim, #64748b);
  font-size:10.5px; font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,0.08);
}
body.page-v6.page-marketplace-product .mkt-pinfo__measure-table td{
  padding:10px 10px;
  text-align:center;
  font-weight:700;
  color:var(--text, #0f172a);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   Size chart modal — v6 dialog look.
   Rounded 20px panel, soft brand-tinted header, indigo accent on
   the ruler icon, pill close button with brand hover, sticky
   header on tall charts, striped rows for quick row scanning.
   The outer .mkt-sizechart is a centered fixed overlay — the
   [hidden] attribute hides it entirely until .is-open is toggled
   (the JS toggles both simultaneously).
   ============================================================ */
body.page-v6.page-marketplace-product .mkt-sizechart{
  position:fixed; inset:0;
  z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
body.page-v6.page-marketplace-product .mkt-sizechart[hidden]{ display:none !important; }
body.page-v6.page-marketplace-product .mkt-sizechart__backdrop{
  position:absolute; inset:0;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .22s ease;
}
body.page-v6.page-marketplace-product .mkt-sizechart.is-open .mkt-sizechart__backdrop{ opacity:1; }
body.page-v6.page-marketplace-product .mkt-sizechart__panel{
  position:relative;
  width:min(560px, 100%);
  max-height:calc(100vh - 48px);
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(15,23,42,0.06);
  box-shadow:
    0 24px 60px -12px rgba(15,23,42,0.32),
    0 8px 24px -8px rgba(79,70,229,0.14);
  display:flex; flex-direction:column;
  transform:translateY(16px) scale(.97);
  opacity:0;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  overflow:hidden;
}
body.page-v6.page-marketplace-product .mkt-sizechart.is-open .mkt-sizechart__panel{
  transform:translateY(0) scale(1);
  opacity:1;
}
body.page-v6.page-marketplace-product .mkt-sizechart__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:18px 22px;
  background:linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  border-bottom:1px solid rgba(15,23,42,0.08);
  position:sticky; top:0;
  z-index:1;
}
body.page-v6.page-marketplace-product .mkt-sizechart__title{
  margin:0;
  font-size:16.5px; font-weight:800;
  letter-spacing:-0.005em;
  color:var(--text, #0f172a);
  display:inline-flex; align-items:center; gap:10px;
}
body.page-v6.page-marketplace-product .mkt-sizechart__title i{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:rgba(79,70,229,0.10);
  color:var(--brand, #4f46e5);
  font-size:13px;
}
body.page-v6.page-marketplace-product .mkt-sizechart__close{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  color:var(--text-dim, #64748b);
  cursor:pointer;
  display:grid; place-items:center;
  font-size:14px;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
body.page-v6.page-marketplace-product .mkt-sizechart__close:hover{
  background:var(--brand, #4f46e5);
  color:#fff;
  border-color:var(--brand, #4f46e5);
  transform:rotate(90deg);
}
body.page-v6.page-marketplace-product .mkt-sizechart__close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(79,70,229,0.25);
}
body.page-v6.page-marketplace-product .mkt-sizechart__body{
  padding:18px 22px 22px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
body.page-v6.page-marketplace-product .mkt-sizechart__hint{
  margin:0 0 14px;
  padding:10px 12px;
  font-size:12.5px;
  color:#334155;
  background:rgba(79,70,229,0.06);
  border-left:3px solid var(--brand, #4f46e5);
  border-radius:6px;
}
body.page-v6.page-marketplace-product .mkt-sizechart__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
body.page-v6.page-marketplace-product .mkt-sizechart__table th,
body.page-v6.page-marketplace-product .mkt-sizechart__table td{
  padding:11px 12px;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,0.06);
}
body.page-v6.page-marketplace-product .mkt-sizechart__table tr:last-child td,
body.page-v6.page-marketplace-product .mkt-sizechart__table tr:last-child th{
  border-bottom:0;
}
body.page-v6.page-marketplace-product .mkt-sizechart__table thead th{
  background:#f8fafc;
  font-size:11px; font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim, #64748b);
}
body.page-v6.page-marketplace-product .mkt-sizechart__table tbody tr:nth-child(even) td{
  background:#fafbff;
}
body.page-v6.page-marketplace-product .mkt-sizechart__table tbody tr:hover td{
  background:rgba(79,70,229,0.04);
}
body.page-v6.page-marketplace-product .mkt-sizechart__sz{
  font-weight:800;
  color:var(--brand, #4f46e5);
}
@media (max-width:640px){
  body.page-v6.page-marketplace-product .mkt-sizechart{ padding:12px; }
  body.page-v6.page-marketplace-product .mkt-sizechart__panel{
    border-radius:16px;
  }
  body.page-v6.page-marketplace-product .mkt-sizechart__head{ padding:14px 16px; }
  body.page-v6.page-marketplace-product .mkt-sizechart__title{ font-size:15px; }
  body.page-v6.page-marketplace-product .mkt-sizechart__body{ padding:14px 16px 18px; }
}

/* Quantity stepper */
body.page-v6.page-marketplace-product .mkt-qty{
  display:inline-flex; align-items:center;
  border:1.5px solid rgba(15,23,42,0.14);
  border-radius:10px;
  overflow:hidden;
}
body.page-v6.page-marketplace-product .mkt-qty__btn{
  width:40px; height:44px;
  background:#fff;
  border:0;
  font-size:14px;
  color:var(--text, #0f172a);
  cursor:pointer;
  transition:background .15s ease;
}
body.page-v6.page-marketplace-product .mkt-qty__btn:hover{ background:rgba(15,23,42,0.04); }
body.page-v6.page-marketplace-product .mkt-qty__input{
  width:44px; height:44px;
  border:0; border-left:1.5px solid rgba(15,23,42,0.08); border-right:1.5px solid rgba(15,23,42,0.08);
  background:#fff;
  text-align:center;
  font-size:15px; font-weight:700;
  color:var(--text, #0f172a);
  font-variant-numeric:tabular-nums;
  outline:none;
}

/* CTAs */
body.page-v6.page-marketplace-product .mkt-pinfo__cta{
  display:flex; flex-direction:column; gap:10px;
  margin-top:4px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__add,
body.page-v6.page-marketplace-product .mkt-pinfo__buynow{
  width:100%;
  padding:14px 20px;
  border-radius:12px;
  border:0;
  font-size:15px; font-weight:800;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
body.page-v6.page-marketplace-product .mkt-pinfo__add{
  background:var(--brand, #4f46e5); color:#fff;
  /* Purple glow removed — box-shadow was casting a hard indigo halo that
     read as "selected/active" and looked broken against the white card.
     Hover retains a subtle lift only. */
}
body.page-v6.page-marketplace-product .mkt-pinfo__add:hover{ transform:translateY(-1px); background:#4338ca; }
body.page-v6.page-marketplace-product .mkt-pinfo__buynow{
  background:#0f172a; color:#fff;
}
body.page-v6.page-marketplace-product .mkt-pinfo__buynow:hover{ transform:translateY(-1px); background:#1e293b; }

/* Social share row */
body.page-v6.page-marketplace-product .mkt-pinfo__share{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  position:relative;
}
body.page-v6.page-marketplace-product .mkt-pinfo__share-label{
  font-size:12.5px; font-weight:700;
  color:var(--text-dim, #64748b);
  letter-spacing:.03em;
  margin-right:2px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  color:var(--text-dim, #64748b);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:14px;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn:hover{
  transform:translateY(-2px);
  color:#fff;
}
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--fb:hover{ background:#1877f2; border-color:#1877f2; }
/* X (formerly Twitter) — black in line with the 2024 rebrand. The old
   `--tw` modifier is kept as an alias for backwards compat in case any
   other markup still references it. */
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--x:hover,
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--tw:hover{ background:#000; border-color:#000; }
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--pn:hover{ background:#e60023; border-color:#e60023; }
/* Reddit orange-red + WhatsApp green. */
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--rd:hover{ background:#ff4500; border-color:#ff4500; }
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--wa:hover{ background:#25d366; border-color:#25d366; }
body.page-v6.page-marketplace-product .mkt-pinfo__share-btn--cp:hover{ background:var(--brand, #4f46e5); border-color:var(--brand, #4f46e5); }
body.page-v6.page-marketplace-product .mkt-pinfo__share-toast{
  position:absolute;
  left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  padding:6px 12px;
  background:#0f172a;
  color:#fff;
  font-size:11.5px; font-weight:700;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
body.page-v6.page-marketplace-product .mkt-pinfo__share-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Mobile: tuck the share row directly under the product image.
   .mkt-pinfo is a flex column and the grid collapses to a single
   column ≤640px, so order:-1 on .mkt-pinfo__share lifts it to the
   top of the info block — which sits immediately below the stage. */
@media (max-width:640px){
  body.page-v6.page-marketplace-product .mkt-pinfo__share{
    order:-1;
    margin:2px 0 6px;
    padding-top:2px;
    border-top:0;
  }
}

/* Delivery / shipping info */
body.page-v6.page-marketplace-product .mkt-pinfo__deliv{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px;
  background:#f8fafc;
  border-radius:12px;
  font-size:13px;
  color:var(--text, #0f172a);
}
body.page-v6.page-marketplace-product .mkt-pinfo__deliv-row{
  display:flex; align-items:flex-start; gap:10px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__deliv-row > i{
  width:24px; text-align:center;
  color:var(--brand, #4f46e5);
  margin-top:2px;
  flex-shrink:0;
}

/* Secure checkout row */
body.page-v6.page-marketplace-product .mkt-pinfo__secure{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  padding-top:4px;
  font-size:12px;
  color:var(--text-dim, #64748b);
}
body.page-v6.page-marketplace-product .mkt-pinfo__secure-label{
  display:inline-flex; align-items:center; gap:6px;
}
body.page-v6.page-marketplace-product .mkt-pinfo__secure-label i{ color:#16a34a; }
body.page-v6.page-marketplace-product .mkt-pinfo__secure-logos{
  display:inline-flex; gap:8px;
  flex-wrap:wrap;
  font-size:22px;
  color:var(--text, #0f172a);
}
body.page-v6.page-marketplace-product .mkt-pinfo__secure-logos i{ opacity:.85; }

/* ============================================================
   Product-page tabs — v6 pill-tab look.
   The original underline-only treatment felt like a generic
   default. Switched to a rounded pill bar that matches the rest
   of v6 (indigo brand accent, 14px border-radius, soft shadow on
   the active pill, muted slate text everywhere else).
   Scoped to body.page-v6.page-marketplace-product so it beats
   the older body.page-marketplace-product ruleset at ~line 4979.
   ============================================================ */
body.page-v6.page-marketplace-product .mkt-tabs{
  margin-top:44px;
}
body.page-v6.page-marketplace-product .mkt-tabs__bar{
  display:inline-flex; flex-wrap:wrap; gap:4px;
  padding:5px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:14px;
  margin-bottom:22px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
body.page-v6.page-marketplace-product .mkt-tabs__bar::-webkit-scrollbar{ height:4px; }
body.page-v6.page-marketplace-product .mkt-tabs__btn{
  padding:10px 18px;
  background:transparent;
  border:0;
  border-radius:10px;
  font-size:13.5px; font-weight:700;
  color:var(--text-dim, #64748b);
  cursor:pointer;
  white-space:nowrap;
  letter-spacing:.01em;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.page-v6.page-marketplace-product .mkt-tabs__btn:hover{
  color:var(--text, #0f172a);
  background:rgba(255,255,255,0.55);
}
body.page-v6.page-marketplace-product .mkt-tabs__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(79,70,229,0.25);
}
body.page-v6.page-marketplace-product .mkt-tabs__btn.is-active{
  background:#fff;
  color:var(--brand, #4f46e5);
  box-shadow:0 2px 6px -2px rgba(15,23,42,0.18), 0 1px 2px rgba(15,23,42,0.06);
}
body.page-v6.page-marketplace-product .mkt-tabs__pane{
  display:none;
  padding:6px 2px 12px;
  font-size:14.5px; line-height:1.65;
  color:var(--text, #0f172a);
  max-width:820px;
  animation:mktTabFade .22s ease both;
}
body.page-v6.page-marketplace-product .mkt-tabs__pane.is-active{ display:block; }
@keyframes mktTabFade{
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
body.page-v6.page-marketplace-product .mkt-tabs__pane p{
  margin:0 0 14px;
  color:#334155;
}
body.page-v6.page-marketplace-product .mkt-tabs__specs{
  list-style:none;
  padding:0; margin:0 0 14px;
  display:flex; flex-direction:column; gap:10px;
}
body.page-v6.page-marketplace-product .mkt-tabs__specs li{
  padding:10px 14px 10px 40px;
  position:relative;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:10px;
  font-size:13.5px;
  color:#0f172a;
}
body.page-v6.page-marketplace-product .mkt-tabs__specs li > i{
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(22,163,74,0.12);
  color:#16a34a;
  font-size:10px;
  display:inline-flex; align-items:center; justify-content:center;
}
body.page-v6.page-marketplace-product .mkt-tabs__sizetable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:12px 0 4px;
  font-size:13.5px;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
body.page-v6.page-marketplace-product .mkt-tabs__sizetable th,
body.page-v6.page-marketplace-product .mkt-tabs__sizetable td{
  padding:11px 14px;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,0.06);
}
body.page-v6.page-marketplace-product .mkt-tabs__sizetable tr:last-child th,
body.page-v6.page-marketplace-product .mkt-tabs__sizetable tr:last-child td{
  border-bottom:0;
}
body.page-v6.page-marketplace-product .mkt-tabs__sizetable th{
  background:#f8fafc;
  font-size:11px; font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim, #64748b);
}
body.page-v6.page-marketplace-product .mkt-tabs__sizetable tbody tr:hover td{
  background:#fafbff;
}
@media (max-width:640px){
  body.page-v6.page-marketplace-product .mkt-tabs{ margin-top:28px; }
  body.page-v6.page-marketplace-product .mkt-tabs__bar{
    display:flex; flex-wrap:nowrap;
    width:100%;
  }
  body.page-v6.page-marketplace-product .mkt-tabs__btn{
    padding:9px 14px;
    font-size:13px;
    flex:1 1 auto;
  }
}

/* ============================================================
   Unified bottom section (.mkt-pbottom)
   Wraps secure-checkout badges + tabs into ONE card so the
   lower half of the product page reads as a single unit
   instead of three disjointed blocks. Backgrounds on the old
   sub-sections are neutralised here so the wrapper's single
   white surface carries through.
   ============================================================ */
body.page-v6.page-marketplace-product .mkt-pbottom{
  margin-top:44px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04),
             0 8px 24px -12px rgba(15,23,42,0.08);
  padding:22px 28px 28px;
  /* Let the card grow to fit its content so no internal scrollbar
     appears when a tab's content is taller than the default bar
     height would suggest. */
  overflow:visible;
  min-height:0;
}
body.page-v6.page-marketplace-product .mkt-pbottom__secure{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 16px;
  padding:4px 2px 14px;
  font-size:12px;
  color:var(--text-dim, #64748b);
  background:transparent;
  border:0;
}
body.page-v6.page-marketplace-product .mkt-pbottom__divider{
  height:1px;
  background:rgba(15,23,42,0.08);
  margin:0 -28px 20px;
}
/* Inside .mkt-pbottom the tabs wrapper is now a plain div —
   flatten its previous top margin (the parent card supplies
   the spacing) and drop the pill-bar's grey background so the
   whole interior reads as one canvas. The active-tab pill is
   re-worked to use a subtle tinted highlight instead of an
   inset "white pill on grey" look. */
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs{
  margin-top:0;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__bar{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(15,23,42,0.08);
  border-radius:0;
  padding:0;
  margin:0 -4px 18px;
  gap:2px;
  /* Unwind the overflow-x:auto set on the generic .mkt-tabs__bar —
     per CSS spec, overflow-x:auto also promotes overflow-y:visible to
     auto, which was reserving a skinny vertical scrollbar track next
     to the "Sizing" tab. Inside .mkt-pbottom the bar has flex-wrap
     on, so horizontal scrolling isn't needed either. */
  overflow:visible;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__btn{
  border-radius:8px 8px 0 0;
  padding:10px 16px 12px;
  position:relative;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__btn:hover{
  background:rgba(79,70,229,0.06);
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__btn.is-active{
  background:transparent;
  color:var(--brand, #4f46e5);
  box-shadow:none;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__btn.is-active::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:-1px;
  height:2px;
  background:var(--brand, #4f46e5);
  border-radius:2px 2px 0 0;
}
/* Soften the individual spec bullets inside the panes — they
   were styled as mini-cards (#f8fafc bg + 1px border), which
   read as yet another nested layer. Inside the unified card
   they become simple rows with just the icon bullet. */
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__specs li{
  background:transparent;
  border:0;
  padding:6px 4px 6px 32px;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__specs li > i{
  left:4px;
}
body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__pane{
  padding:0 2px;
}
@media (max-width:640px){
  body.page-v6.page-marketplace-product .mkt-pbottom{
    margin-top:28px;
    padding:16px 16px 20px;
    border-radius:14px;
  }
  body.page-v6.page-marketplace-product .mkt-pbottom__divider{
    margin:0 -16px 16px;
  }
  body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__bar{
    margin:0 -2px 14px;
  }
  body.page-v6.page-marketplace-product .mkt-pbottom .mkt-tabs__btn{
    padding:9px 10px 11px;
  }
}

/* ============================================================
   Hero text colour rescue — the hero background was flattened
   from a dark gradient to #f8fafc on 2026-04-19. The inner
   headings/trust list inherited white text from the gradient
   era, making them invisible on the new light background. The
   following overrides use the higher-specificity body.page-v6
   prefix so they win over the original rules at line ~3828+.
   ============================================================ */
body.page-v6.page-marketplace .mkt-hero-v6__title{ color:#0f172a; }
body.page-v6.page-marketplace .mkt-hero-v6__subtitle{ color:#475569; }
body.page-v6.page-marketplace .mkt-hero-v6__subtitle strong{ color:#0f172a; }
body.page-v6.page-marketplace .mkt-hero-v6__trust{ color:#475569; }
body.page-v6.page-marketplace .mkt-hero-v6__live{
  background:rgba(16,185,129,0.10);
  border-color:rgba(16,185,129,0.30);
  color:#0f172a;
}
body.page-v6.page-marketplace .mkt-hero-v6__live-text strong{ color:#059669; }
body.page-v6.page-marketplace .mkt-hero-v6__right{ display:none; }

/* ============================================================
   Cart item image (wholesale/custom) — fill the existing thumb
   slot instead of stretching to its natural dimensions. The
   placeholder shirt icon stays for rows where no candidate URL
   resolves (fa-shirt sibling is toggled via onerror).
   ============================================================ */
body.page-v6 .cart-item__thumb .cart-item__img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ============================================================
   Marketplace filter sidebar + grid layout (v6)
   ------------------------------------------------------------
   The sidebar+grid was rendered in PHP but had no CSS, so the
   filters appeared as plain text links. This block handles:
     • desktop two-column layout (sidebar + grid)
     • sidebar as collapsible drawer on mobile
     • styled category links, sort radios, clear button
     • toolbar w/ count + mobile Filters trigger
   ============================================================ */
/* Round 51: sidebar is now a full-width-reclaiming slide-out drawer
   at ALL widths. The old desktop two-column grid is gone — products
   use the full page width, filters open on demand via the header
   filter icon or the on-page "Filter" button near the count. */
body.page-marketplace .mkt-v6__layout{
  display:block;
  max-width:1440px;
  margin:0 auto;
  padding:24px 24px 48px;
}
body.page-marketplace .mkt-v6__sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:min(86vw, 360px);
  background:#fff;
  border:0; border-right:1px solid #e5e7eb;
  border-radius:0;
  padding:20px;
  max-height:none;
  overflow-y:auto;
  z-index:800;
  transform:translateX(-100%);
  transition:transform .25s ease;
  box-shadow:6px 0 24px rgba(15,23,42,.18);
}
body.page-marketplace.mkt-filters-open .mkt-v6__sidebar{transform:translateX(0)}
body.page-marketplace.mkt-filters-open .mkt-v6__backdrop{display:block;opacity:1}
body.page-marketplace.mkt-filters-open{overflow:hidden}
body.page-marketplace .mkt-v6__sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid #f1f5f9;
}
body.page-marketplace .mkt-v6__sidebar-title{
  font-size:15px; font-weight:700; color:#0f172a;
  display:inline-flex; align-items:center; gap:8px; margin:0;
}
body.page-marketplace .mkt-v6__sidebar-title i{color:var(--mode-market,#8b5cf6);font-size:14px}
body.page-marketplace .mkt-v6__close{
  display:inline-flex; /* drawer on all widths: close button always visible */
  width:32px; height:32px; border-radius:8px;
  background:#f1f5f9; border:0; color:#334155;
  cursor:pointer; font-size:14px;
  align-items:center; justify-content:center;
}
body.page-marketplace .mkt-v6__close:hover{background:#e2e8f0;color:#0f172a}

/* Round 51: reveal the header's small funnel icon on marketplace at
   ALL widths (previously mobile-only). Now that the sidebar is a
   slide-out drawer at every breakpoint, this icon is the primary
   entry point for opening filters. */
body.page-marketplace .tg-header .tg-filter-btn,
body.page-marketplace-product .tg-header .tg-filter-btn{
  display:inline-flex !important;
}

/* Round 51: on-page "Filter" pill sits beside the results count so
   desktop shoppers don't have to hunt for the tiny header funnel.
   Palette picks up the marketplace mode colour so it reads as a
   primary action, not a muted secondary. */
body.page-marketplace .mkt-v6__count-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin:0 0 18px 0; flex-wrap:wrap;
}
body.page-marketplace .mkt-v6__count-row > .mkt-v6__count{
  margin:0 0 0 4px;
}
body.page-marketplace .mkt-v6__filterpill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#0f172a;
  font-size:13.5px; font-weight:700;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.page-marketplace .mkt-v6__filterpill i{
  font-size:13px;
  color:var(--mode-market, #8b5cf6);
}
body.page-marketplace .mkt-v6__filterpill:hover{
  background:#0f172a; color:#fff;
  border-color:#0f172a;
  transform:translateY(-1px);
  box-shadow:0 8px 20px -10px rgba(15,23,42,0.45);
}
body.page-marketplace .mkt-v6__filterpill:hover i{ color:#fff; }
body.page-marketplace .mkt-v6__filterpill:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(139,92,246,0.28);
}
body.page-marketplace .mkt-v6__filterpill-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px;
  background:var(--mode-market, #8b5cf6);
  color:#fff;
  font-size:11px; font-weight:800;
  margin-left:2px;
}
@media (max-width:640px){
  body.page-marketplace .mkt-v6__filterpill{
    padding:9px 14px; font-size:13px;
  }
  body.page-marketplace .mkt-v6__count-row{
    gap:10px; margin-bottom:14px;
  }
}

/* Filter groups */
body.page-marketplace .mkt-v6__fgroup{margin-bottom:20px}
body.page-marketplace .mkt-v6__fgroup:last-child{margin-bottom:4px}
body.page-marketplace .mkt-v6__fgroup-title{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#64748b; margin:0 0 10px;
}

/* Category list */
body.page-marketplace .mkt-v6__cat-list,
body.page-marketplace .mkt-v6__sort-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:2px;
}
body.page-marketplace .mkt-v6__cat-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:#334155;
  text-decoration:none; transition:background .12s, color .12s;
}
body.page-marketplace .mkt-v6__cat-link:hover{background:#f8fafc;color:#0f172a}
body.page-marketplace .mkt-v6__cat-link.is-active{
  background:#f5f3ff; color:#6d28d9; font-weight:600;
}
body.page-marketplace .mkt-v6__chev{font-size:11px;color:#94a3b8;opacity:0;transition:opacity .12s}
body.page-marketplace .mkt-v6__cat-link:hover .mkt-v6__chev,
body.page-marketplace .mkt-v6__cat-link.is-active .mkt-v6__chev{opacity:1;color:inherit}

/* Sort radios */
body.page-marketplace .mkt-v6__sort-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px;
  font-size:14px; color:#334155; text-decoration:none;
  transition:background .12s, color .12s;
}
body.page-marketplace .mkt-v6__sort-link:hover{background:#f8fafc;color:#0f172a}
body.page-marketplace .mkt-v6__radio{
  width:16px; height:16px; border-radius:50%;
  border:2px solid #cbd5e1; flex:0 0 16px;
  position:relative; transition:border-color .12s;
}
body.page-marketplace .mkt-v6__sort-link.is-active{color:#6d28d9;font-weight:600}
body.page-marketplace .mkt-v6__sort-link.is-active .mkt-v6__radio{border-color:#8b5cf6}
body.page-marketplace .mkt-v6__sort-link.is-active .mkt-v6__radio::after{
  content:""; position:absolute; inset:2px;
  border-radius:50%; background:#8b5cf6;
}

/* Clear-all button */
body.page-marketplace .mkt-v6__clear{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:9px 12px;
  border-radius:8px; font-size:13px; font-weight:600;
  color:#dc2626; text-decoration:none;
  background:#fef2f2; transition:background .12s;
}
body.page-marketplace .mkt-v6__clear:hover{background:#fee2e2}

/* Mobile drawer backdrop */
body.page-marketplace .mkt-v6__backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  z-index:799; opacity:0; transition:opacity .22s ease;
}

/* Content + toolbar */
body.page-marketplace .mkt-v6__content{min-width:0}

/* Toolbar: search field (flex:1) + icon-only filter button.
   Becomes position:sticky on mobile so it hangs at the top of the
   viewport as the shopper scrolls through the grid. */
body.page-marketplace .mkt-v6__toolbar{
  display:flex; align-items:center;
  gap:10px; margin-bottom:14px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}

/* Search form shell */
body.page-marketplace .mkt-v6__search{
  position:relative;
  display:flex; align-items:center;
  flex:1 1 auto;
  min-width:0;
  background:#f1f5f9;
  border:1px solid transparent;
  border-radius:10px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.page-marketplace .mkt-v6__search:focus-within{
  background:#fff;
  border-color:rgba(79,70,229,0.35);
  box-shadow:0 0 0 3px rgba(79,70,229,0.15);
}
body.page-marketplace .mkt-v6__search-icon{
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  color:#64748b;
  font-size:14px;
  pointer-events:none;
}
body.page-marketplace .mkt-v6__search-input{
  flex:1 1 auto;
  min-width:0;
  padding:10px 12px 10px 38px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:14px;
  color:#0f172a;
  outline:none;
}
body.page-marketplace .mkt-v6__search-input::placeholder{ color:#94a3b8; }
body.page-marketplace .mkt-v6__search-input::-webkit-search-cancel-button{ display:none; }
body.page-marketplace .mkt-v6__search-clear{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  margin-right:4px;
  border-radius:50%;
  background:transparent;
  color:#64748b;
  text-decoration:none;
  font-size:11px;
  transition:background .15s ease, color .15s ease;
}
body.page-marketplace .mkt-v6__search-clear:hover{
  background:#e2e8f0;
  color:#0f172a;
}
body.page-marketplace .mkt-v6__search-submit{
  flex:0 0 auto;
  width:36px; height:36px;
  margin:2px 4px 2px 0;
  border-radius:8px;
  border:0;
  background:var(--brand, #4f46e5);
  color:#fff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:background .15s ease, transform .15s ease;
}
body.page-marketplace .mkt-v6__search-submit:hover{
  background:#4338ca;
  transform:translateY(-1px);
}

/* Results count moved BELOW the toolbar so the sticky row stays
   compact. Falls back to a plain label on a single line. */
body.page-marketplace .mkt-v6__content > .mkt-v6__count{
  font-size:13.5px;
  color:#475569;
  margin:0 0 14px 4px;
}
body.page-marketplace .mkt-v6__content > .mkt-v6__count strong{
  color:#0f172a; font-weight:700;
}

/* Filter icon — square-ish rounded button. Hidden on desktop
   (the sidebar is always visible there, so the icon would just
   open a redundant drawer). Revealed at ≤900px via the drawer
   breakpoint rule below. */
body.page-marketplace .mkt-v6__filter-btn{
  display:none;
  flex:0 0 auto;
  position:relative;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  padding:0;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  border:0;
  font-size:15px;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.page-marketplace .mkt-v6__filter-btn:hover{
  background:var(--brand, #4f46e5);
  transform:translateY(-1px);
  box-shadow:0 6px 14px -6px rgba(79,70,229,0.55);
}
body.page-marketplace .mkt-v6__filter-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(79,70,229,0.30);
}
body.page-marketplace .mkt-v6__filter-count{
  position:absolute; top:-4px; right:-4px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:10px;
  background:#f59e0b;
  color:#1f2937;
  font-size:10.5px; font-weight:800;
  border:2px solid #fff;
}

/* ≤ 900px: tighten padding + sticky toolbar. Drawer behaviour is
   now the default at all widths (see the block above), so we no
   longer duplicate position:fixed / transform rules here. */
@media (max-width:900px){
  body.page-marketplace .mkt-v6__layout{
    padding:16px 16px 32px;
  }
  body.page-marketplace .mkt-v6__filter-btn{display:inline-flex}

  /* Sticky search toolbar on mobile. */
  body.page-marketplace .mkt-v6__toolbar{
    position:sticky;
    top:60px;                 /* below the fixed v6 header */
    z-index:90;
    margin-bottom:12px;
    background:rgba(255,255,255,0.96);
    backdrop-filter:saturate(180%) blur(10px);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    box-shadow:0 6px 18px -12px rgba(15,23,42,0.25);
  }
}

@media (max-width:640px){
  body.page-marketplace .mkt-v6__toolbar{
    top:54px;
    padding:8px 10px;
    border-radius:12px;
    gap:8px;
  }
  body.page-marketplace .mkt-v6__search-input{
    padding:9px 10px 9px 36px;
    font-size:13.5px;
  }
  body.page-marketplace .mkt-v6__search-icon{ left:12px; font-size:13px; }
  body.page-marketplace .mkt-v6__search-submit{
    width:32px; height:32px;
  }
  body.page-marketplace .mkt-v6__filter-btn{
    width:40px; height:40px;
    border-radius:10px;
  }
  body.page-marketplace .mkt-v6__content > .mkt-v6__count{
    font-size:13px;
    margin:0 0 12px 4px;
  }
}

/* ============================================================
   Wholesale drawer (mobile filter slide-out)
   ------------------------------------------------------------
   On desktop (≥901px) the existing `.mkt-toolbar--top` +
   `.mkt-toolbar--brands` inline pill bars handle filters — the
   drawer is hidden entirely.  On mobile (≤900px) those inline
   bars collapse and this drawer takes over, mirroring the same
   data-filter / data-brand options and sharing state via JS.
   The header's `.tg-filter-btn` (data-ws-open) toggles
   `body.ws-filters-open` which slides the drawer in.
   ============================================================ */
body.page-wholesale .ws-v6__sidebar{
  display:none;                   /* hidden on desktop — inline pills are the UI */
  position:fixed; top:0; left:0; bottom:0;
  width:86vw; max-width:340px;
  background:#fff;
  border-right:1px solid #e5e7eb;
  padding:18px;
  z-index:800;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .25s ease;
  box-shadow:6px 0 24px rgba(15,23,42,.18);
}
body.page-wholesale .ws-v6__sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid #f1f5f9;
}
body.page-wholesale .ws-v6__sidebar-title{
  font-size:15px; font-weight:700; color:#0f172a;
  display:inline-flex; align-items:center; gap:8px; margin:0;
}
body.page-wholesale .ws-v6__sidebar-title i{color:var(--brand, #4f46e5);font-size:14px}
body.page-wholesale .ws-v6__close{
  width:32px; height:32px; border-radius:8px;
  background:#f1f5f9; border:0; color:#334155;
  cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
body.page-wholesale .ws-v6__close:hover{ background:var(--brand, #4f46e5); color:#fff; }

body.page-wholesale .ws-v6__fgroup{margin-bottom:20px}
body.page-wholesale .ws-v6__fgroup:last-child{margin-bottom:4px}
body.page-wholesale .ws-v6__fgroup-title{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#64748b; margin:0 0 10px;
}

/* Pill list — vertical stack of pill buttons inside the drawer. */
body.page-wholesale .ws-v6__pill-list{
  display:flex; flex-wrap:wrap; gap:6px;
}
body.page-wholesale .ws-v6__pill{
  display:inline-flex; align-items:center;
  padding:8px 14px; border-radius:999px;
  background:#f1f5f9;
  border:1px solid transparent;
  font-size:13px; font-weight:600; color:#334155;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
body.page-wholesale .ws-v6__pill:hover{ background:#e2e8f0; color:#0f172a; }
body.page-wholesale .ws-v6__pill.is-active{
  background:var(--brand, #4f46e5);
  color:#fff;
  border-color:var(--brand, #4f46e5);
  box-shadow:0 2px 6px -2px rgba(79,70,229,0.35);
}

/* Sort select inside the drawer — match the pill aesthetic but use a
   native <select> so we inherit the platform's picker UI. */
body.page-wholesale .ws-v6__select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:14px; font-weight:500; color:#0f172a;
  cursor:pointer;
}
body.page-wholesale .ws-v6__select:focus{
  outline:0;
  border-color:var(--brand, #4f46e5);
  box-shadow:0 0 0 3px rgba(79,70,229,0.14);
}

/* Backdrop only appears when the drawer is open. */
body.page-wholesale .ws-v6__backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  z-index:799; opacity:0; transition:opacity .22s ease;
}

/* ≤900px: show the drawer, hide the inline toolbars — the drawer is
   now the primary filter UI. Clicking the header filter icon slides
   it in from the left. Also reveal the HEADER filter funnel button
   at this breakpoint (it's otherwise hidden above 768px) so the
   769–900px band has a way to trigger the drawer.
   When the header wrap isn't yet wrapping (>768px), keep the filter
   button inline to the right of the search within the compact
   header — don't force the search onto its own row until mobile. */
@media (max-width:900px){
  body.page-wholesale .mkt-toolbar--top,
  body.page-wholesale .mkt-toolbar--brands{display:none}
  body.page-wholesale .ws-v6__sidebar{display:block}
  body.page-wholesale.ws-filters-open .ws-v6__sidebar{transform:translateX(0)}
  body.page-wholesale.ws-filters-open .ws-v6__backdrop{display:block;opacity:1}
  body.page-wholesale.ws-filters-open{overflow:hidden}
  /* Reveal the header filter funnel at 769–900px too so the drawer
     can be opened in this viewport band (tablet-portrait). Above
     mobile the search stays on its inline row — filter sits to the
     right of it, not below. */
  body.page-wholesale .tg-header .tg-filter-btn{display:inline-flex;flex:0 0 auto}
  body.page-wholesale .tg-header .tg-search-wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}
}

/* ============================================================
   Designer panel — mobile reorder (2026-04-19)
   Request: on mobile, the Text and Flip/Rotate adjustment
   blocks need to sit at the TOP of the side panel (just below
   the canvas + position tabs) so users can see the canvas
   while tweaking a layer. On desktop the panel keeps its
   natural top-down order (Shirt Style → Shirt Color → … →
   Flip/Rotate → Text).
   The panel children are plain <div>s; turning .designer__panel
   into a flex column lets us promote the two tool blocks via
   `order`. Hidden (display:none) blocks don't occupy rows, so
   when Text/Flip aren't active (no layer selected) the visible
   order is unchanged.
   ============================================================ */
@media (max-width:768px){
  .designer__panel{
    display:flex;
    flex-direction:column;
  }
  /* Promote the Text controls and the Flip & Rotate controls to
     the top of the panel on mobile. Order values are negative so
     they outrank every other panel child (default order = 0). */
  .designer__panel #v6TextTools{order:-20}
  .designer__panel #v6FlipRotateTools{order:-10}
}

/* =========================================================================
   Stripe inline Payment Element (page-checkout-stripe)
   -------------------------------------------------------------------------
   Styling for the inline Stripe card-entry step in marketplace_checkout_v6.
   The Payment Element itself is an iframe that Stripe styles via the
   appearance object in core.js — these rules only style the surrounding
   loading / error chrome and the container that the iframe mounts into.
   ========================================================================= */
body.page-v6.page-checkout-stripe .stripe-element-container{
  min-height:200px;
  padding:2px 0;
}
body.page-v6.page-checkout-stripe .stripe-loading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px;
  color:#6b7280;
  font-size:14px;
  background:#f9fafb;
  border:1px dashed #e5e7eb;
  border-radius:8px;
  margin-bottom:10px;
}
body.page-v6.page-checkout-stripe .stripe-loading i{color:var(--brand,#0069d9)}
body.page-v6.page-checkout-stripe .stripe-error{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:12px;
  line-height:1.45;
}
/* The submit button should visibly look disabled while the element is
   still loading (disabled state + slight desaturation). */
body.page-v6.page-checkout-stripe #stripe-submit[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
/* Mobile: keep the iframe readable and don't let the aside crush the
   payment form on narrow screens — the existing .cart-layout grid handles
   the one-column stack, we just need the element to fill it. */
@media (max-width:768px){
  body.page-v6.page-checkout-stripe .stripe-element-container{min-height:240px}
}