/* =========================================================
   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 auto;gap:28px;align-items:center}
/* ^ Five tracks so the wholesale page fits in one row:
     col 1 (auto)  logo
     col 2 (1fr)   nav  — eats leftover space, also holds .tg-nav__more chip
     col 3 (auto)  search-wrap
     col 4 (auto)  currency picker  (only rendered on wholesale)
     col 5 (auto)  cta              (avatar + cart / sign-in buttons)
   The hamburger (.tg-burger) is display:none on desktop so it never
   competes for a track. Was 4 tracks — the currency picker (added when
   USD/CAD toggle landed) was the extra child that pushed cta into row 2,
   even on wide screens. Pages without a currency picker just see col 4
   collapse to 0 width — auto tracks with no content take no space, so
   the cta still pins to the right edge as before. */
/* min-width keeps the wordmark + tagline from getting squished when the
   search bar and CTAs compete for horizontal space — without it the
   "Tshirtgang" text gets crushed and the "Wholesale Hub" tagline wraps
   under it awkwardly. 184px covers the 38px mark + 10px gap + the
   widest tagline copy ("Your Fulfillment Partner") without overflowing.
   The header wrap is flex on desktop, so a min-width here forces the
   search-wrap (flex:1 1 auto, min-width:0) to shrink first; once the
   search-wrap is at its minimum the row wraps to two lines. The
   mobile override at ~1200px still resets this to min-width:0 so the
   drawer-hamburger layout can collapse normally. */
.tg-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:#0f172a;min-width:184px;flex-shrink:0}
.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;align-items:center;min-width:0}
/* white-space:nowrap keeps each tab on a single line — without this,
   "Buy one" and "Marketplace" started wrapping into two lines on
   ≤1024px tablets where the nav was getting squeezed against the
   search box, and a wrapped tab breaks the row alignment.
   flex-shrink:0 stops items from squishing below their natural
   width as the viewport narrows — the priority-nav refit() script
   needs to detect overflow via nav.scrollWidth > nav.clientWidth,
   which only works when items keep their intrinsic widths. Without
   this rule items shrank silently and the More chip never engaged.
   Paired with min-width:0 on .tg-nav (above) so the grid's 1fr
   track can collapse below its content; the items then overflow
   horizontally instead of growing the track and pushing search/cta
   off-screen. JS pushes the overflow into More within microseconds
   so the visual spill is imperceptible. */
.tg-nav a{padding:10px 14px;border-radius:6px;font-weight:600;font-size:14px;color:#334155;white-space:nowrap;flex-shrink:0}

/* Priority-nav "More" overflow chip — sibling of the regular nav
   anchors. JS in header_v6.php pushes trailing items into the
   .tg-nav__more-list dropdown when the header row would wrap, and
   reveals the chip by removing its [hidden] attribute. The chip
   itself reuses the same padding / rounded-pill rhythm as a normal
   nav anchor so it reads as a peer, not a special control.
   Visual reference: the "Polo Shirts ▾ → Embroidered Polos /
   Performance Polos / …" pattern the user shared as a screenshot. */
.tg-nav__more{ position:relative; display:inline-block; flex-shrink:0 }
.tg-nav__more[hidden]{ display:none }
.tg-nav__more-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border:0; background:transparent;
  border-radius:6px; font:inherit; font-weight:600; font-size:14px;
  color:#334155; cursor:pointer; white-space:nowrap;
}
.tg-nav__more-btn:hover{ background:#f1f5f9; color:#0f172a }
.tg-nav__more-btn[aria-expanded="true"]{
  /* Open-state pill — light cyan tinted background to match the
     "Polo Shirts" reference screenshot. Reads as an active chip so
     the user can locate the still-open dropdown at a glance. */
  background:#e0f2fe; color:#0369a1;
}
.tg-nav__more-btn .fa-chevron-down{
  font-size:11px; transition:transform .15s ease;
}
.tg-nav__more-btn[aria-expanded="true"] .fa-chevron-down{
  transform:rotate(180deg);
}
.tg-nav__more-list{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  margin:0; padding:8px; list-style:none;
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.12);
  z-index:60;
  /* ^ Uniform 8px padding (was 8px 0) so the hover-highlight pills
     inside don't kiss the panel edges. Anchors below set their own
     border-radius so the hover bg reads as a soft inset pill rather
     than a full-bleed row — visual rhythm matches the AmericasMart-
     style dropdowns (the "Polo Shirts" reference the user shared).
     Designed to scale up: when this menu grows into a multi-column
     mega-menu, columns can each sit inside this 8px gutter. */
}
/* Hover bridge — fills the 8px gap between the chip and the menu so
   the cursor stays "inside" the .tg-nav__more host during transit
   and mouseleave doesn't fire prematurely. Without this the menu
   collapsed as soon as the pointer crossed the gap, before it could
   reach the first item. */
.tg-nav__more-list::before{
  content:''; position:absolute; top:-8px; left:0; right:0; height:8px;
  background:transparent;
}
.tg-nav__more-list[hidden]{ display:none }
.tg-nav__more-list li{ margin:0; padding:0 }
.tg-nav__more-list a{
  /* Inset hover pills — the link itself doesn't span edge-to-edge.
     The 8px gutter on .tg-nav__more-list combined with the 6px
     border-radius here means the hover background sits as a soft
     pill inside the panel, with breathing room on left + right. */
  display:block;
  padding:9px 14px;
  border-radius:6px;
  font-weight:500; font-size:14px; color:#334155;
  text-decoration:none; white-space:nowrap;
  background:transparent;
}
.tg-nav__more-list a:hover{ background:#f1f5f9; color:#0f172a }
.tg-nav__more-list a.is-active{
  /* Active link in the dropdown — drop the heavy mode-tinted
     backgrounds (orange wholesale pill, etc.) and just bold +
     brand-tint the text so it doesn't look out of place in the
     uniform-row dropdown surface. */
  background:transparent;
  color:var(--brand,#2563eb);
  font-weight:700;
}
[data-theme="dark"] .tg-nav__more-list{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
}
[data-theme="dark"] .tg-nav__more-list a{ color:#e2e8f0 }
[data-theme="dark"] .tg-nav__more-list a:hover{ background:#1e293b; color:#fff }
.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}

/* The remaining tabs (Catalog / Integrations / Pricing / API) don't
   have section palettes — they're general utility pages. Treat them
   uniformly with --blue (the platform's general-purpose blue token,
   defined alongside --green/--orange/--red at the top of this file)
   so users get the same "filled pill" feedback they get on the
   Marketplace and Wholesale tabs. Avoids --brand because that token
   is theme-swapped on a per-page basis (green on the homepage, teal
   on marketplace, etc) — these utility tabs need a stable colour
   that reads the same regardless of which page is hosting the header.
   The base `.tg-nav a.is-active` rule above only changed the text
   colour, which was easy to miss; this fills the chip. */
.tg-nav a[href="/"].is-active,
.tg-nav a[href="/#designer"].is-active,
.tg-nav a[href="/catalog"].is-active,
.tg-nav a[href="/apps"].is-active,
.tg-nav a[href="/pricing"].is-active,
.tg-nav a[href="/developers"].is-active{
  background:var(--blue);
  color:#fff;
}
.tg-nav a[href="/"].is-active:hover,
.tg-nav a[href="/#designer"].is-active:hover,
.tg-nav a[href="/catalog"].is-active:hover,
.tg-nav a[href="/apps"].is-active:hover,
.tg-nav a[href="/pricing"].is-active:hover,
.tg-nav a[href="/developers"].is-active:hover{
  background:var(--blue-dark);
  color:#fff;
}

/* Marketplace + wholesale storefronts: API / Integrations / Pricing
   anchors carry data-tg-pin-more="1" (set in header_v6.php) on
   marketplace, marketplace-product, wholesale, and wholesale-product,
   which the priority-nav refit() script reads and pushes into the
   "More" dropdown on every refit pass. They're never hidden outright —
   they just live behind the More chip so the primary nav reads
   cleanly (Order for Myself / Marketplace / Wholesale / Catalog)
   while the seller-facing destinations stay one hover away.
   The earlier `body.page-marketplace/wholesale .tg-nav__pricing {
   display:none }` rule was removed once pin-to-More landed — Pricing
   now appears in the More dropdown alongside Integrations + API on
   buyer storefronts, matching the wholesale behaviour. */

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

/* ─────────────────────────────────────────────────────────────────────
 * Storefront sub-search row
 * ---------------------------------------------------------------------
 * Search lives on its own line beneath the header so the primary nav
 * doesn't have to share its row with anything (every nav link stays
 * visible without overflowing into the "More" menu). Rendered by
 * header_v6.php after </header> when $__showSearch is true — i.e. on
 * marketplace + wholesale + templates (both hub and product pages).
 * ───────────────────────────────────────────────────────────────────── */
.tg-subsearch{
  background:#fff;
  border-bottom:1px solid var(--line, #e5e7eb);
}
.tg-subsearch__inner{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
}
.tg-subsearch .tg-search{
  flex:1 1 auto;
  min-width:0;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:9px 16px;
}
.tg-subsearch .tg-search input{font-size:14.5px}
/* Filter button next to the search picks up a labelled pill treatment
   in this row — there's room for the word now, which reads clearer
   than the bare icon that lived in the cramped header version. */
.tg-subsearch .tg-filter-btn{
  display:inline-flex;        /* override the header-scoped display:none default */
  align-items:center;gap:8px;
  padding:9px 14px;
  border:1px solid var(--line, #e5e7eb);
  border-radius:22px;
  background:#fff;
  color:#0f172a;
  font-size:14px;font-weight:600;
  cursor:pointer;
  margin-left:0;              /* override the header rule's margin-left:auto */
}
.tg-subsearch .tg-filter-btn:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:#0f172a;
}
.tg-subsearch .tg-filter-btn i{font-size:14px;color:#475569}
.tg-filter-btn__label{font-weight:600;letter-spacing:.01em}

@media (max-width:560px){
  .tg-subsearch__inner{padding:8px 0;gap:8px}
  .tg-subsearch .tg-filter-btn{padding:9px 12px}
  /* Hide the "Filters" word on narrow screens to give the search input
     more room — the funnel icon remains, and the aria-label keeps it
     readable for screen readers. */
  .tg-filter-btn__label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}

/* Wholesale currency picker — custom dropdown.
   --------------------------------------------------------------
   Native <select> retired (2026-05): the OS-rendered popup couldn't
   accept the rounded-card / padded-row / brand-tinted treatment we
   wanted. Markup is now a <button> trigger + <ul> popover, opened
   by the same shared hover-menu helper that drives the More chip.
   Same open-after-100ms / close-after-200ms hover affordances apply. */
.tg-cur-picker{
  position:relative;
  display:inline-flex; align-items:center;
  margin-right:6px;
}
.tg-cur-picker__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:999px;
  font:inherit; font-size:13px; font-weight:700;
  color:#0f172a;
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.tg-cur-picker__btn:hover{
  border-color:#cbd5e1;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.tg-cur-picker__btn:focus-visible{
  outline:none;
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.25);
}
.tg-cur-picker__btn[aria-expanded="true"]{
  border-color:#cbd5e1;
  background:#f8fafc;
}
.tg-cur-picker__icon{ color:#64748b; font-size:12px }
.tg-cur-picker__current{ letter-spacing:.02em }
.tg-cur-picker__caret{
  font-size:10px; color:#64748b; transition:transform .15s ease;
}
.tg-cur-picker__btn[aria-expanded="true"] .tg-cur-picker__caret{
  transform:rotate(180deg);
}

.tg-cur-picker__menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:240px; margin:0; padding:6px;
  list-style:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.12);
  /* Sits above the sticky wholesale toolbars (.mkt-toolbar* are z-index:300)
     so the open dropdown overlays the sort + brand-pill bars below it.
     Kept under the modal/overlay layer (900+) so dialogs still win. */
  z-index:600;
  /* ^ min-width 240 (was 200) — "Canadian Dollar" + the check
     icon couldn't fit on one line at 200px and was wrapping. The
     opt-label also gets white-space:nowrap below as a belt-and-
     braces guard so an even longer currency name (CHF "Swiss
     Franc", anyone?) wouldn't reintroduce the wrap. */
}
.tg-cur-picker__menu[hidden]{ display:none }
.tg-cur-picker__menu li{ margin:0; padding:0 }
/* Invisible bridge that fills the 8px gap between the trigger and
   the popover so the cursor stays "inside" the .tg-cur-picker host
   while transiting from button to menu. Without this the mouseleave
   event fires the moment the cursor crosses the gap and the menu
   closes before the user can pick an option. */
.tg-cur-picker__menu::before{
  content:''; position:absolute; top:-8px; left:0; right:0; height:8px;
  background:transparent;
}
.tg-cur-picker__opt{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:transparent;
  border:0;
  border-radius:8px;
  font:inherit; font-size:13px; font-weight:600;
  color:#0f172a;
  text-align:left; cursor:pointer;
}
.tg-cur-picker__opt:hover{ background:#f1f5f9 }
.tg-cur-picker__opt.is-active{
  background:#eff6ff;
  color:#1d4ed8;
}
.tg-cur-picker__opt-code{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; padding:2px 8px;
  background:#f1f5f9; color:#0f172a;
  border-radius:6px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
}
.tg-cur-picker__opt.is-active .tg-cur-picker__opt-code{
  background:#dbeafe; color:#1d4ed8;
}
.tg-cur-picker__opt-label{
  flex:1; font-weight:500; color:#475569;
  white-space:nowrap;
}
.tg-cur-picker__opt.is-active .tg-cur-picker__opt-label{ color:#1d4ed8 }
.tg-cur-picker__opt-check{
  font-size:11px; color:#1d4ed8;
}

[data-theme="dark"] .tg-cur-picker__btn{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
  color:var(--font-color,#e2e8f0);
}
[data-theme="dark"] .tg-cur-picker__btn[aria-expanded="true"]{ background:#1e293b }
[data-theme="dark"] .tg-cur-picker__menu{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
}
[data-theme="dark"] .tg-cur-picker__opt{ color:#e2e8f0 }
[data-theme="dark"] .tg-cur-picker__opt:hover{ background:#1e293b }
[data-theme="dark"] .tg-cur-picker__opt-label{ color:#94a3b8 }
[data-theme="dark"] .tg-cur-picker__opt-code{ background:#1e293b; color:#e2e8f0 }

@media (max-width:768px){
  /* Tighter on mobile — phone headers already juggle logo + burger +
     avatar + cart, so the currency pill drops to a slim icon-less
     pill that still reads as "USD" / "CAD". */
  .tg-cur-picker{ margin-right:4px }
  .tg-cur-picker__btn{ height:32px; padding:0 10px; font-size:12px }
  .tg-cur-picker__icon{ display:none }
}

/* Register CTA label swap — desktop default. Markup emits BOTH a long
   and short label (.tg-cta__register-long / .tg-cta__register-short);
   above 768px we show the long copy ("Create free account") and hide
   the short. The mobile rule inside @media (max-width:768px) further
   down flips this so narrow viewports read the shorter "Register"
   text without losing the CTA. */
.tg-cta__register-long{display:inline}
.tg-cta__register-short{display: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. */
/* Hero background per mode. Sell mode (the seller-focused landing) is
   now white so the new globe + product photography reads cleanly; the
   light-green tint moved over to Buy mode (Order for myself) so the
   buyer-focused page keeps a friendly, distinct accent colour. */
body.mode-sell      {--hero-bg:#ffffff}
body.mode-buy       {--hero-bg:#eaf5dd}

/* Sell-mode hero preview — the globe + product montage doesn't need
   the card-style frame the buy/market/wholesale stubs rely on (those
   show a single shirt or grid that benefit from a contained box).
   Drop the border/background, widen the aspect, and switch to
   `object-fit:contain` so the floating products + globe show in full.
   The yellow $11.95 price badge and the bottom "Start selling — from
   $11.95" overlay are hidden on this mode in favour of the three
   hero-bubble pills below. */
body.page-v6.mode-sell .preview {
	background: transparent;
	border: 0;
	border-radius: 0;
	aspect-ratio: 1/1;
	/* Bumped from 640px → 880px so the new hero-world.png renders at a
	   proper feature-shot size instead of looking like a thumbnail.
	   Caps at viewport-relative 90vw on narrow screens via the existing
	   .preview width:100% so the image still scales down. */
	max-width: 880px;
	overflow: visible;
}
body.page-v6.mode-sell .preview-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Anchor to top instead of vertically centring inside the square
	   aspect frame. The hero-world.png composition has the shirts in
	   the middle-upper third with the world-map dot pattern beneath,
	   so contain+center used to leave a fat band of empty pixels above
	   the image; pinning to the top brings the shirts up and lets the
	   feature card sit over the lower half without overlapping artwork. */
	object-position: top center;
	margin-top: 113px;
}
body.page-v6.mode-sell .preview-overlay,
body.page-v6.mode-sell .preview-price,
body.page-v6.mode-buy  .preview-price {
	display: none;
}

/* Buy mode now uses /images/hero-order.png as a full-bleed photo
   (same treatment as the sell-mode globe image) — drop the orange
   gradient backdrop AND the surrounding card frame so the new image
   sits transparently over the page's green hero background. The
   aspect-ratio is squared (1/1) and max-width widened to 640px so
   the image fills the available area instead of being letterboxed
   top + bottom inside the legacy 3/4 portrait frame — that was the
   "lots of empty space above + below" the design team flagged. The
   ".preview-overlay" pill is anchored to the bottom of the image
   so the "Order for yourself — from $11.95" caption now sits AT
   the bottom edge of the photo rather than below empty space. */
body.page-v6.mode-buy .preview {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	aspect-ratio: 1/1;
	max-width: 640px;
}
body.page-v6.mode-buy .preview__stub--buy { background: transparent; }
body.page-v6.mode-buy .preview__stub--buy .preview-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Anchor the overlay over the lower portion of the photo. The
   .preview-overlay default is bottom:20px which previously landed
   in the empty letterbox area; with the squared frame above the
   overlay now sits directly over the image's bottom edge. Slight
   negative margins pull it inwards so the white pill reads as
   floating "over" the photo rather than tagged onto its corner. */
body.page-v6.mode-buy .preview-overlay {
	bottom: 8%;
	left: 6%;
	right: 6%;
}

/* Move the small "Ships tomorrow" pill (.stub__tag) from its legacy
   bottom-right corner — where it overlapped with the new
   .preview-overlay caption — up to the top-right of the photo. The
   base rule sets `right:30px;bottom:30px;` so we explicitly null
   `bottom` and re-anchor with `top` to win the cascade. */
body.page-v6.mode-buy .preview__stub--buy .stub__tag {
	top: 18px;
	right: 18px;
	bottom: auto;
}

/* Sell-mode feature strip — replaces the legacy 4-up numeric trust
   block (4.8/5 · 12k+ · 11 · 24h) with three icon-pill items that
   match the simpler "Printed in 24h / Global shipping / No inventory"
   row in the redesign. The strip is hidden by default and only shown
   on mode-sell; the other modes keep the existing .hero__trust block. */
body.page-v6 .hero__features { display: none; }
body.page-v6.mode-sell .hero__trust { display: none; }
body.page-v6.mode-sell .hero__features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 18px;
}
body.page-v6.mode-sell .hero__feature {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 14px/1.2 Inter, system-ui, sans-serif;
	color: var(--text);
}
body.page-v6.mode-sell .hero__feature-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0f172a;
	font-size: 15px;
	flex-shrink: 0;
}
@media (max-width: 560px) {
	body.page-v6.mode-sell .hero__features { gap: 14px; margin-top: 14px; }
	body.page-v6.mode-sell .hero__feature { font-size: 12px; gap: 8px; }
	body.page-v6.mode-sell .hero__feature-icon { width: 32px; height: 32px; font-size: 13px; }
}

/* Floating hero bubbles (sell mode only). White pill cards with a
   small mono icon + two-line label, absolutely positioned over the
   product montage. Coordinates are percentage-based off the preview
   container so the bubbles track the image as it scales. */
body.page-v6 .hero-bubble { display: none; }
body.page-v6.mode-sell .hero-bubble {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 10px 14px;
	box-shadow: 0 8px 20px rgba(15,23,42,0.08);
	font: 600 13px/1.2 Inter, system-ui, sans-serif;
	color: #0f172a;
	white-space: nowrap;
	z-index: 2;
}
body.page-v6.mode-sell .hero-bubble i {
	font-size: 16px;
	color: #0f172a;
	width: 22px;
	text-align: center;
}
/* Worldwide Fulfillment is intentionally OFFSET vs the clock pill —
   slightly lower and pulled inward from the edge so the two pills don't
   read as a symmetric pair. The clock stays anchored top-right; the
   globe lives mid-upper-left for a more dynamic composition. */
body.page-v6.mode-sell .hero-bubble--clock { top: 4%; right: 0; }
body.page-v6.mode-sell .hero-bubble--globe { top: 14%; left: 6%; }

@media (max-width: 980px) {
	body.page-v6.mode-sell .hero-bubble { padding: 8px 12px; font-size: 12px; }
	body.page-v6.mode-sell .hero-bubble i { font-size: 14px; }
	body.page-v6.mode-sell .hero-bubble--clock { top: 3%; right: 2%; }
	body.page-v6.mode-sell .hero-bubble--globe { top: 12%; left: 6%; }
}

/* ============================================================
   Hero feature card — "Comfort Colors 1717 · $13.50 each".
   Replaces the small "No Inventory / No Hassle" hero-bubble in
   sell mode. Anchored bottom-centre over the hero photo with a
   pin-style placement, drop shadow, and a green BEST PRICE
   ribbon clipped to the top-right corner. Card sits on top of
   the hero image and below the path-toggle in z-stack.
   ============================================================ */
body.page-v6 .hero-feature-card { display: none; }
body.page-v6.mode-sell .hero-feature-card {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 20%;
	transform: translateX(-50%);
	width: min(74%, 520px);
	background: #ffffff;
	border-radius: 18px;
	/* Tighter bottom padding — old layout had a 2-line price+note block
	   below the divider that left a fat empty band underneath. Now the
	   price + "Includes DTF or DTG print" share one line and the card
	   ends right after, so the bottom padding can match the top. */
	padding: 22px 26px 22px;
	box-shadow: 0 18px 48px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.06);
	z-index: 3;
	overflow: hidden;
	font-family: Inter, system-ui, sans-serif;
	color: #0f172a;
}
/* Best Price tag — replaces the previous rotated corner ribbon. Sits
   in-flow at the top-right of the card as a flat green pill so it reads
   like a price-tag chip rather than a banner. */
body.page-v6.mode-sell .hero-feature-card__ribbon {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #047857;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 3px 8px rgba(4,120,87,.22);
}
body.page-v6.mode-sell .hero-feature-card__ribbon i {
	font-size: 11px;
}
body.page-v6.mode-sell .hero-feature-card__kicker {
	font-size: 13px;
	font-weight: 700;
	color: #047857;
	margin-bottom: 4px;
}
body.page-v6.mode-sell .hero-feature-card__title {
	/* Bigger, tighter — the title is the headline, give it the weight. */
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.015em;
	color: #0f172a;
	line-height: 1.15;
	/* Reserve room on the right for the absolutely-positioned ribbon so
	   long titles don't slide under the chip. */
	padding-right: 100px;
}
body.page-v6.mode-sell .hero-feature-card__title sup {
	font-size: 13px;
	font-weight: 600;
	vertical-align: super;
	color: #64748b;
}
body.page-v6.mode-sell .hero-feature-card__sub {
	font-size: 15px;
	color: #475569;
	margin-top: 4px;
}
body.page-v6.mode-sell .hero-feature-card__divider {
	height: 1px;
	background: #e2e8f0;
	margin: 14px 0 12px;
}
/* Price row — single line: "$13.50 each · Includes DTF or DTG print". */
body.page-v6.mode-sell .hero-feature-card__price {
	font-size: 16px;
	color: #475569;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
body.page-v6.mode-sell .hero-feature-card__price strong {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -.01em;
}
body.page-v6.mode-sell .hero-feature-card__price em {
	font-style: normal;
	font-size: 15px;
	color: #475569;
	font-weight: 500;
}
body.page-v6.mode-sell .hero-feature-card__sep {
	color: #cbd5e1;
	font-size: 16px;
	margin: 0 2px;
}
body.page-v6.mode-sell .hero-feature-card__incl {
	font-size: 14px;
	color: #64748b;
}
@media (max-width: 980px) {
	body.page-v6.mode-sell .hero-feature-card {
		width: min(82%, 420px);
		padding: 18px 20px;
		border-radius: 14px;
	}
	body.page-v6.mode-sell .hero-feature-card__title { font-size: 22px; padding-right: 90px; }
	body.page-v6.mode-sell .hero-feature-card__price strong { font-size: 26px; }
	body.page-v6.mode-sell .hero-feature-card__ribbon {
		font-size: 10px;
		padding: 5px 10px;
		top: 12px;
		right: 12px;
	}
}
@media (max-width: 560px) {
	body.page-v6.mode-sell .hero-feature-card {
		width: min(94%, 360px);
		padding: 14px 16px;
		/* Drop the card lower on mobile so it stops covering the shirt
		   mockups behind it. The desktop bottom:20% leaves the card
		   sitting roughly mid-image once the preview shrinks to a phone
		   aspect ratio — pulling it down to ~6% keeps a sliver of overlap
		   (so it still reads as "in front of" the shirts) but lets the
		   YOUR-DESIGN graphic on the centre tee stay visible. */
		bottom: 6%;
	}
	body.page-v6.mode-sell .hero-feature-card__title { font-size: 18px; padding-right: 80px; }
	body.page-v6.mode-sell .hero-feature-card__sub { font-size: 13px; }
	body.page-v6.mode-sell .hero-feature-card__price strong { font-size: 22px; }
	body.page-v6.mode-sell .hero-feature-card__incl { font-size: 12px; }
	/* On phones, let the price row wrap so "Includes DTF or DTG print"
	   slides to its own line cleanly rather than overflowing. */
	body.page-v6.mode-sell .hero-feature-card__sep { display: none; }
}
@media (max-width: 560px) {
	body.page-v6.mode-sell .hero-bubble { padding: 7px 10px; font-size: 11px; gap: 7px; }
	body.page-v6.mode-sell .hero-bubble i { font-size: 12px; width: 16px; }
}
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{
  /* Width matches the site header (.tg-header .wrap = 1440px) so the
     designer reads as part of the same column rather than a narrower
     panel. Was 1340px. */
  max-width:1440px;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}

/* Mobile-only helper row that mirrors the Design guide link + Show All
   toggle above the Upload Image toolbar. Hidden on desktop — the
   originals inside .designer__tools handle desktop. The mobile media
   query below flips display:flex on and hides the in-rail duplicates. */
.designer-mobile-toolbar{display:none}

/* =========================================================
   STANDALONE /designer PAGE
   Body class set by includes/main_v6.php when $DESIGNER_STANDALONE
   is true. The page renders only header + designer + footer, so
   the designer should claim the full viewport between them.
   ========================================================= */
body.page-designer-standalone .designer-section{
  padding:0;background:#fff;
  /* Fill the viewport between the fixed header and the start of
     the footer. min-height-only (not a hard height) so the right
     panel can still grow on shorter screens without clipping. */
  min-height:calc(100vh - var(--tg-header-h));
  display:flex;flex-direction:column;
}
body.page-designer-standalone .designer-section__head{
  /* Compact, full-width header strip — the title still sits above
     the canvas but doesn't eat half the screen like the marketing
     copy does on the homepage. */
  max-width:none;margin:0;padding:14px 24px;
  border-bottom:1px solid #e5e7eb;background:#f8fafc;
}
body.page-designer-standalone .designer-section__title{font-size:18px}
body.page-designer-standalone .designer-section__sub{font-size:13px;margin-top:2px}
/* Standalone /designer page wants full bleed on the .designer wrapper.
   Three selector forms so we don't fight legacy inline markup or
   future width changes:
     - `div.designer-wrapper`        — the new dedicated class (preferred)
     - `[style*="max-width:1340px"]` — legacy inline cap (pre-2026-05)
     - `[style*="max-width:1440px"]` — current inline cap (header-aligned)
   The matched node grows to fill the column; the canvas + tool rails
   then take every available pixel. */
body.page-designer-standalone .designer-section > div.designer-wrapper,
body.page-designer-standalone .designer-section > div[style*="max-width:1340px"],
body.page-designer-standalone .designer-section > div[style*="max-width:1440px"]{
  max-width:none !important;margin:0 !important;padding:0 !important;
  flex:1;display:flex;
}
body.page-designer-standalone .designer{
  max-width:none;margin:0;border-radius:0;border-left:0;border-right:0;
  flex:1;display:flex;flex-direction:column;
}
body.page-designer-standalone .designer__body{
  flex:1;min-height:calc(100vh - var(--tg-header-h) - 110px);
}
@media (max-width:768px){
  body.page-designer-standalone .designer{margin:0;border-radius:0;border-left:0;border-right:0}
  body.page-designer-standalone .designer-section__head{padding:10px 16px}
  body.page-designer-standalone .designer__body{min-height:0}
}

.designer{
  /* Match the header's 1440px width — was 1340px. The extra 100px
     goes to the canvas column (1fr) so the shirt mockup gets more
     breathing room, and to the left tool rail (widened below) so
     button labels stop wrapping at narrow breakpoints. */
  max-width:1440px;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 — the left rail was 150px, which was
   forcing labels like "Upload Image", "Center Layer", "Magic Eraser"
   to wrap to two lines and "AI background remover" to three. Bumping
   to 180px gives enough room for every label except "AI background
   remover" to sit on a single line.
   align-items:start prevents the right-hand panel (when it grows tall
   for the Text tools, etc) from stretching the canvas column to match.
   Each column now takes its own natural height — the canvas stays
   pinned at the top regardless of how much copy ends up in the right
   panel, and the right panel can grow as much as it needs without
   visually pushing the shirt down. */
.designer__body{display:grid;grid-template-columns:180px 1fr 320px;min-height:640px;align-items:start}
/* Left rail stretches to the full grid-row height so the Design Guide
   link (margin-top:auto) anchors against the actual bottom of the
   designer body, not just the bottom of the tool-button stack. The
   canvas + right panel keep `align-self:start` from the grid default. */
.designer__tools{
  border-right:1px solid #e5e7eb;background:#f8fafc;
  padding:14px 10px;display:flex;flex-direction:column;gap:6px;
  align-self:stretch;
}
.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}
/* Insert a visible gap below Delete Layer so the Start over button
   underneath doesn't sit flush against it. Both buttons are
   destructive (Delete Layer wipes the selected layer; Start over
   wipes the entire design with no undo) — without spacing it's easy
   to fat-finger the wrong one. The 14px margin matches the section
   padding around the tools column for a consistent rhythm. */
.designer__tools .designer__tool--separated{ margin-bottom:14px; }

/* Design Guide helper link — pinned to the bottom of the tools rail.
   margin-top:auto eats the remaining flex slack so the link always
   sits below the last tool button regardless of how tall the rail
   grows. Styled as a quiet text link (not a button) so it doesn't
   compete visually with the active tools above. */
.designer__guide-link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;
  font-size:12px;font-weight:600;color:#64748b;text-decoration:none;
  border-top:1px solid #e5e7eb;
  transition:color .15s ease;
}
.designer__guide-link i{width:18px;text-align:center;font-size:13px;color:#94a3b8}
.designer__guide-link:hover{color:var(--accent-a, #025077)}
.designer__guide-link:hover i{color:inherit}
body.mode-buy .designer__guide-link:hover{color:var(--accent-b)}

/* Upload Image is the call-to-action that kicks off the whole designer
   flow. Make it visually match the Publish design button at the bottom
   of the right-hand panel — same .btn-a accent blue + white text — so
   the user's eye lands on it first when the canvas is empty.
   Once an image is uploaded the JS adds .has-image to the button and
   we drop the blue treatment so the upload button sits alongside the
   other tools (it's done its job — no need to keep shouting). */
.designer__tool#v6UploadBtn:not(.has-image){
  background:var(--accent-a);
  border-color:var(--accent-a);
  color:#fff;
}
.designer__tool#v6UploadBtn:not(.has-image):hover{
  background:var(--accent-a-dark);
  border-color:var(--accent-a-dark);
  color:#fff;
}
body.mode-buy .designer__tool#v6UploadBtn:not(.has-image){
  background:var(--accent-b);
  border-color:var(--accent-b);
  color:#fff;
}
body.mode-buy .designer__tool#v6UploadBtn:not(.has-image):hover{
  background:var(--accent-b-dark, #0f766e);
  border-color:var(--accent-b-dark, #0f766e);
  color:#fff;
}

/* Disabled state — clearly greyed-out fill so it reads as "not yet
   available" instead of a regular pickable tool. The buttons flip back
   to white via the base .designer__tool rule above the moment JS
   removes the disabled attribute (after an image lands on the canvas).
   pointer-events:none stops the hover-blue from re-colouring them. */
.designer__tool[disabled],
.designer__tool[disabled]:hover{
  background:#e5e7eb;
  border-color:#d1d5db;
  color:#94a3b8;
  cursor:not-allowed;
  opacity:1; /* override any browser-default disabled fade */
}
.designer__tool[disabled] i{
  color:#94a3b8;
}

/* "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}
/* Highlighted variant — sits at the top of the right column whenever
   Magic Eraser mode is active. Mirrors the .text-tools--highlight and
   .flip-rotate-tools--highlight surfaces: tinted blue background,
   brand-blue left rail, soft shadow, and an accent-coloured panel
   title so the brush-size slider reads as the active tool option. */
.designer__eraser-opts--highlight{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-left:4px solid #2563eb;
  border-radius:8px;
  padding:12px 14px;
  box-shadow:0 4px 14px rgba(37,99,235,.10);
  margin-bottom:14px;
}
.designer__eraser-opts--highlight .panel-title{
  color:#1d4ed8;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12px;
  margin-bottom:6px;
}
.designer__eraser-opts--highlight .designer__eraser-slider{
  font-size:13px;color:#1e3a8a;font-weight:600;
}
.designer__eraser-opts--highlight .designer__eraser-slider input[type="range"]{
  accent-color:#2563eb;
}
.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.
   2026-04-28: removed the transparency-checker backdrop — felt like
   stock-image filler under the shirt. Replaced with a clean solid
   surface so the shirt mockup reads as the focus.
   2026-05-06: pinned shirt to the TOP of the canvas (place-items:start
   center + 30px top pad). Previously place-items:center vertically
   re-centered the shirt every time the right-column panel grew —
   click "Add Text", text-tools panel appears, canvas height grows
   to match the right column, shirt jumps upward. Fixing the shirt
   to the top means it stays put when the right panel changes height. */
.designer__canvas{
  /* Single-column flow: tab rail (designer__sides--top) sits above the
     canvas. The previous two-column layout (sides on the left) cost the
     shirt canvas ~140px of width — moving the tabs back to the top gives
     the design surface more horizontal room. */
  display:grid;place-items:start center;position:relative;
  padding:30px 10px 6px;
  background-color:#f8fafc;
  background-image:none;
}
.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 was the "Front · Portrait" status pill — removed
   per UX simplification (the active side-tab in .designer__sides
   already conveys which surface is selected). Rules pruned. */
.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;
  /* Sit above the dashed print-area marquee + the design canvas so a
     small surface (e.g. 3.5"×3.5" sleeve print area) whose top-right
     corner lands near the badge can't visually clip it.
     z-index 2 (was 4) so the surface-tabs row (z-index 3) wins on
     overlap — without this the ruler covered "Name plate" / "Inner
     neck" on styles with many placements that wrap to two rows. */
  z-index:2;
  /* And don't intercept clicks even when stacked on top of a tab —
     the ruler is informational, never interactive. */
  pointer-events:none;
}

/* Inline contrast advisory — shown by JS when an uploaded design's
   dominant tone is too close to the selected shirt colour (e.g. dark
   logo on a black tee). Toggled via the [hidden] attribute, so we
   pair display:flex with [hidden]{display:none} guard so the rule
   doesn't override the hidden state. Lives at the bottom of the
   colour-picker block in the right-hand panel so the warning sits
   next to the control the user changes to fix it. Soft amber
   palette reads as a suggestion rather than a hard error. */
.v6-contrast-warn{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:10px;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;
  padding:8px 12px;font-size:12px;font-weight:600;color:#9a3412;
  box-shadow:0 2px 6px rgba(154,52,18,.06);
  line-height:1.35;
}
.v6-contrast-warn[hidden]{display:none}
.v6-contrast-warn__icon{color:#c2410c;font-size:14px;flex:0 0 auto;margin-top:2px}
.v6-contrast-warn__msg{flex:1 1 auto;min-width:0}
@media (max-width:560px){
  .v6-contrast-warn{padding:6px 10px;font-size:11px;margin-top:8px}
  .v6-contrast-warn__icon{font-size:12px}
}
.designer__sides{
  display:flex;gap:4px;justify-content:flex-start;margin-top:10px;
  /* Left-align so the row fills from top-left; padding-right reserves
     space for the .canvas-ruler badge ("X×Y print area") sitting
     top:14px right:14px of the same positioned ancestor, so the row
     wraps before crashing into it instead of overlapping its left
     edge on styles with 9 placements. */
  padding-right:200px;
  /* 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-ruler) so the buttons are always clickable. */
  position:relative;z-index:3;
}
/* Top-rail variant — surface tabs in a horizontal row above the canvas.
   This is the live layout; .designer__sides--left was an earlier attempt
   to stack them on the left and was reverted to give the canvas more
   horizontal room. Sits flush against the top of the canvas area —
   the padding-right reservation above keeps row 1 from crashing into
   the print-area badge, and rows that overflow wrap left-justified
   below it. */
.designer__sides--top{margin-top:0;margin-bottom:6px}
.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}
.panel-title__value{margin-left:8px;font-weight:600;text-transform:none;letter-spacing:0;color:#0f172a}
/* padding-top/left gives the .is-selected swatch's 2px outline room to render
   without being clipped by the panel edge or by .is-collapsible overflow:hidden */
.swatches{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 0 4px}
/* 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:130px; /* 3 rows: (34px × 3) + (8px gap × 3) + 4px padding-top */
  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:8px;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)}
/* Anchor variant ("See all" tile links to /apps) — strip default
   link styling so it visually matches the surrounding <div> tiles
   while staying clickable as a whole card. */
a.market-card{display:block;color:inherit;text-decoration:none}
.market-card--see-all i{color:var(--brand)}
.market-card i{font-size:28px;margin-bottom:8px;display:block;color:var(--brand)}

/* Real-logo sprite for marketplace tiles. Reuses the
   /cp/images/marketplace_icons.png sheet that powers the
   .cpv6-retrieve-icon dropdowns in the seller dashboard. The sprite
   is 1200×1000 (6 cols × 5 rows of 200×200 cells); rendered here at
   40px per cell, so the whole sprite scales to 240×200 and each
   position is a multiple of 40px. (Earlier var(--mkt-cell) calc
   math was broken — multiplying two px values yielded invalid px²;
   hardcoding the cell size is cleaner and matches the global.css
   pattern.) Row/col map mirrors .cpv6-retrieve-icon. */
.market-card .market-card-icon{
  display:inline-block;
  width:40px;
  height:40px;
  background:url(/cp/images/marketplace_icons.png) no-repeat;
  background-size: 240px 200px;
  margin:0 auto 8px;
  border-radius:8px;
}
.market-card .market-card-icon.m-amazon      { background-position: 0 0; }
.market-card .market-card-icon.m-etsy        { background-position: -40px 0; }
/* eBay's wordmark is naturally wider than the other 200×200 sprite
   cells — its logo occupies 2 horizontal cells (cols 2 & 3) in the
   source sheet. Render the icon at 2× width so the full "ebay"
   shows; the tile stays centred inside its grid column via the
   surrounding text-align:center on .market-card. */
.market-card .market-card-icon.m-ebay        { width: 80px; background-position: -80px 0; }
.market-card .market-card-icon.m-shopify     { background-position: -200px 0; }
.market-card .market-card-icon.m-walmart     { background-position: -200px -40px; }
.market-card .market-card-icon.m-storenvy    { background-position: -40px -40px; }
.market-card .market-card-icon.m-squarespace { background-position: -160px -40px; }
.market-card .market-card-icon.m-squareup    { background-position: -40px -80px; }
.market-card .market-card-icon.m-wix         { background-position: -200px -80px; }
.market-card .market-card-icon.m-woocommerce { background-position: -40px -120px; }
.market-card .market-card-icon.m-bigcommerce { background-position: -80px -120px; }
.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
   ========================================================= */

/* Intermediate squeeze (≤ 1320px) — hide the lowest-traffic nav
   items (Integrations + API) before the full hamburger fallback
   kicks in at 1200px. The full tab row was wrapping the search
   box onto a second line on ~1280px laptops & larger phones;
   dropping these two tabs frees just enough horizontal room to
   keep everything on one line without resorting to the drawer.
   Both links remain accessible from the hamburger drawer below
   and from the footer, so no functionality is lost.
   IMPORTANT: direct-child selector (.tg-nav > a) — not descendant.
   The priority-nav refit() can move these anchors INTO the More
   dropdown (.tg-nav__more-list, which lives inside .tg-nav), and
   a descendant selector would keep display:none on them there too,
   making "Integrations" / "API" silently vanish from the More menu
   on storefront pages between 1201–1320px. Direct-child scopes the
   rule to only the top-row tabs. */
@media (max-width:1320px) and (min-width:1201px){
  .tg-nav > a[href="/apps"],
  .tg-nav > a[href="/developers"]{display:none}
}

/* 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}
  /* Hide the Dashboard "→" pill on mobile — the avatar circle next to
     it already links to /cp, so we keep the access affordance but free
     up the horizontal space that was squishing the logo on narrow
     viewports. Logged-out users still see the Create free account
     brand pill since that CTA is the whole point of the header on
     guest visits. */
  .tg-cta .tg-dash-pill{display:none}
  /* Always show the Sign in CTA for signed-out visitors — overrides
     the generic .btn-ghost { display:none } rule above which would
     otherwise hide it. The header has both Sign in (ghost) AND
     Create-free-account (brand) for guests; we want both visible on
     mobile so a returning buyer doesn't have to dig into the
     hamburger drawer to log in. .tg-cta__signin is added in
     includes/header_v6.php to the two logged-out Sign in anchors. */
  .tg-cta .tg-cta__signin{display:inline-flex !important}
  /* Shrink the Register CTA below 768px — full text "Create free
     account" eats too much horizontal space on narrow phones, so we
     emit BOTH labels in the markup (.tg-cta__register-long /
     .tg-cta__register-short) and let the breakpoint decide which
     reads. Desktop default keeps "Create free account"; this mobile
     rule swaps in the shorter "Register". */
  .tg-cta__register-long{display:none}
  .tg-cta__register-short{display:inline}

  .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.
     Full-bleed on phones — no side margins, no rounded corners, no
     side borders. Applies to every page that hosts the designer
     (homepage + standalone /designer). */
  .designer{margin:0;max-width:none;border-radius:0;border-left:0;border-right:0}
  .designer-section > div[style*="max-width:1340px"],
  .designer-section > div[style*="max-width:1440px"],
  .designer-section > div.designer-wrapper{padding:0 !important;margin:0 !important;max-width:none !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}
  /* Once expanded, the secondary tools render as content-width pills
     that wrap naturally — a wider label ("Flip & Rotate") simply makes
     a wider pill; nothing stretches to fill the row. The fixed
     min-height + explicit line-height are belt-and-suspenders against
     glyph variance: the ampersand in "Flip & Rotate" and the cap
     height of the fa-rotate FontAwesome icon sit a hair taller than
     the other secondary icons (fa-eraser / fa-trash), and without a
     locked box height that single button pops above the row. */
  .designer__tools.is-expanded .designer__tool.is-secondary:not([hidden]){
    display:inline-flex;
    flex:0 0 auto;
    line-height:1.2;
    min-height:36px;
    box-sizing:border-box;
  }
  /* Pin the FontAwesome icon's line-height so its rendered box height
     is identical across icons. Without this, fa-rotate's slightly
     taller glyph metrics inflate the line box on the Flip & Rotate
     button alone. */
  .designer__tools.is-expanded .designer__tool.is-secondary:not([hidden]) i{
    line-height:1;
  }
  /* ------------------------------------------------------------------
     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}
  /* Padding-top removed so the position-tabs bar (.designer__sides--top
     below) sits flush at the top of the card; it has its own padding.
     Side padding is also zero so the canvas runs edge-to-edge on phones. */
  .designer__canvas{order:1;padding:0 0 24px;min-height:380px}
  .canvas-shirt{max-width:300px}
  .canvas-marquee{width:120px;height:164px;transform:translate(-50%,-38%)}
  /* Ruler moved to bottom-right on mobile — the new position-tabs bar
     occupies the top of the canvas card and would otherwise clip it. */
  .canvas-ruler{font-size:10px;padding:4px 8px;top:auto;bottom: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 mobile sizing lives in the @media block lower in the
     file — it has to be declared AFTER the base .v6-canvas-empty-prompt__*
     rules at lines ~2295/2301 so it actually wins the cascade. Earlier
     copies here were shadowed by those base rules and never applied.) */
  /* On mobile the position tabs (Full front / Full back / sleeves / etc.)
     are lifted OUT of the grey canvas area and rendered as a white bar
     pinned to the top of the .designer__canvas card. justify-self:stretch
     overrides the parent grid's place-items:center so the bar still spans
     the full canvas width now that the canvas itself is edge-to-edge. */
  .designer__sides{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:4px}
  .designer__sides--top{
    justify-self:stretch;
    margin:0 0 14px;
    padding:10px 14px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    justify-content:flex-start;
    border-radius:0;
  }
  .side-tab{padding:8px 14px;font-size:12px;flex:0 0 auto;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
  .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}

  /* Mobile helper row pulled above the Upload Image toolbar. Sits flush
     with the print area info text in .designer-section__head: same 16px
     side padding, and a small negative top margin nips out part of the
     20px bottom margin the head leaves above us so the two read as one
     header block. */
  .designer-mobile-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:0 16px;margin:-8px 0 12px;
  }
  .designer-mobile-toolbar__guide{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 0;font-size:12px;font-weight:600;
    color:#64748b;text-decoration:none;
  }
  .designer-mobile-toolbar__guide i{font-size:13px;color:#94a3b8}
  .designer-mobile-toolbar__guide:hover{color:var(--accent-a, #025077)}
  body.mode-buy .designer-mobile-toolbar__guide:hover{color:var(--accent-b)}
  .designer-mobile-toolbar__more{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 12px;border-radius:8px;cursor:pointer;
    background:#eef2ff;border:1px solid #c7d2fe;color:#4338ca;
    font-size:12px;font-weight:600;line-height:1;
  }
  .designer-mobile-toolbar__more:hover{
    background:#e0e7ff;border-color:#6366f1;color:#3730a3;
  }
  .designer-mobile-toolbar__more i{font-size:13px;color:inherit}
  /* The in-rail Design guide link + Show All pill are duplicated above
     in .designer-mobile-toolbar on phones, so hide the originals to
     avoid two of each on screen. Desktop is unaffected — the originals
     keep their pinned-to-bottom placement on the tool rail there. */
  .designer__tools .designer__guide-link{display:none}
  .designer__tools .designer__tool--more{display:none !important}
}

/* 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;
  /* Clip the catalog-image thumbnail to the rounded box. Without
     this, photographic mockups (model wearing the shirt) overflow
     the 46×46 frame and bleed past the border-radius corners. */
  overflow:hidden;
}
.style-picker__thumb svg{width:78%;height:78%}
/* Real catalog thumbnail — overlays the SVG silhouette. JS toggles
   display: between img and svg based on whether s.thumb resolved.
   object-fit:cover fills the 46×46 box with the centre of the
   mockup (head + chest typically) rather than letterboxing a tall
   model-shot into a tiny square. Combined with overflow:hidden on
   the parent, this gives a clean cropped thumbnail. */
.style-picker__thumb-img{
  width:100%;height:100%;object-fit:cover;
  border-radius:6px;display:block;
}
.style-picker__thumb-fallback{display:grid}
.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}
/* Expanded mode — the "View all" toggle flips the strip into a full
   wrap so every category is visible at once. We drop the right-edge
   fade mask (no off-screen chips to hint at) and let the row grow
   vertically up to a sensible cap. */
.shirt-modal__filters--scroll.is-expanded{
  flex-wrap:wrap;overflow-x:visible;overflow-y:auto;
  max-height:160px;
  -webkit-mask-image:none;mask-image:none;
}
/* The "View all" pill — filled brand-blue so it reads as a primary
   control, not just another category chip, and so the solid fill fully
   obscures anything that scrolls behind it. In scroll mode it
   position:sticky-right so it stays glued to the right edge as the
   user scrolls the strip; in expanded mode it falls back to natural
   flow at the end of the wrap.

   The mask-fade gradient on `.shirt-modal__filters--scroll` ends 28px
   before the right edge — that fade was leaking trailing chips past
   the right side of the View all button (visible as "atsh" from
   "Crewneck Sweatshirts" peeking out). Anchoring the button at right:0
   instead of right:6px and pushing a wider opaque bar to its left
   (and a small opaque shim to its right via box-shadow) wipes out the
   bleed-through without needing to re-tune the parent mask. */
.shirt-modal__filter--viewall{
  flex-shrink:0;
  background:var(--brand,#2563eb);color:#fff;
  border-color:var(--brand,#2563eb);
  font-weight:700;
  position:sticky;right:0;z-index:2;
  /* Wider left fade + a tight right-side opaque shim so chips don't
     leak around either edge of the button. The right shim covers the
     last few pixels of the scroll container that the parent's
     mask-image gradient was fading to transparent. */
  box-shadow:-16px 0 14px -6px #f8fafc, 6px 0 0 6px #f8fafc;
}
.shirt-modal__filter--viewall:hover{background:var(--brand-dark,#1d4ed8);border-color:var(--brand-dark,#1d4ed8);color:#fff}
.shirt-modal__filter--viewall i{font-size:10px;margin-right:2px;transition:transform .15s ease}
/* When the strip is expanded into a full wrap, drop the sticky/shadow so
   the pill sits cleanly inline with the rest of the categories. */
.shirt-modal__filters--scroll.is-expanded .shirt-modal__filter--viewall{
  position:static;box-shadow:none;
  margin-left:auto;
}
.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)}
/* Lock every modal style-card thumb to a 4:5 box (800×1000, the
   supplier mockup native ratio) so cards line up at the same height
   regardless of the source image's intrinsic dimensions. Same
   approach as .cat-card__thumb on /catalog: aspect-ratio for modern
   browsers + padding-bottom fallback, with the inner img absolutely
   positioned and object-fit:cover so the photo zooms/crops to fill
   instead of letterboxing. */
.shirt-card__thumb{
  position:relative;
  aspect-ratio:4/5;
  padding-bottom:125%;height:0;
  background:var(--surface-2);border-radius:8px;
  overflow:hidden;color:var(--text-mute);
}
@supports (aspect-ratio: 1/1){
  .shirt-card__thumb{padding-bottom:0;height:auto}
}
.shirt-card__thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.shirt-card__thumb svg{
  position:absolute;inset:0;margin:auto;
  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;
}
/* Circle clip for products whose visible print area is masked to a
   circle on the physical product (currently just the snowflake
   ornament, style 38). Applied as a class on .v6-print-area by the
   designer's applySurfacePrintSize() when the active style appears in
   CIRCLE_CLIP_STYLES. clip-path masks every descendant in one rule —
   the dashed outline above turns into a faint hint at the circle's
   bounding box, but the actual design canvas + any uploaded artwork
   gets visually trimmed to the circle so customers can see how the
   metal-frame masks their corners. */
.v6-print-area.is-circle{
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  outline: none;
  /* White backstop so where the CDN's snowflakeornament/White.png stops
     (it's slightly smaller than the clip-circle) we still get a clean
     white fill out to the print-area edge instead of revealing the
     White.png's rounded corner inside the customer's design. */
  background: #ffffff;
}
.v6-print-area.is-circle::before{display:none}

/* 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. Canvas runs edge-to-edge
     (no side padding) so the shirt mockup gets every available pixel —
     vertical padding is kept for breathing room above/below. */
  .designer__tools{order:1}
  .designer__canvas{order:2;padding:16px 0;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}

  /* Empty-prompt is subtle on phones — small icon, 1-line text.
     Sits in this lower @media block (not the earlier one) because the
     base rules at lines ~2295/2301 come AFTER the upper mobile block in
     source order and would otherwise win on equal specificity. */
  .v6-canvas-empty-prompt{padding:8px;border-radius:6px}
  .v6-canvas-empty-prompt__inner{gap:5px}
  .v6-canvas-empty-prompt__inner i{font-size:18px}
  .v6-canvas-empty-prompt__text{font-size:11px}
}

@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}
/* Highlighted variant — used at the top of the designer's right column
   so the text-adjustment surface jumps out the moment a text layer is
   active. Tinted blue background + brand-coloured left rail makes it
   read as the live tool surface instead of blending in with the rest
   of the panel. Title gets a matching accent treatment. */
.text-tools--highlight{
  background:#eff6ff;
  border-color:#bfdbfe;
  border-left:4px solid #2563eb;
  box-shadow:0 4px 14px rgba(37,99,235,.10);
  margin-top:0;
  margin-bottom:14px;
}
.text-tools--highlight .panel-title{
  color:#1d4ed8;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12px;
  margin-bottom:4px;
}
.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}
/* Full-width range input — used by the image-size slider in
   #v6ImageTools. The label sits above on its own row (via
   .text-tools__row--stack), and the slider track runs the full
   width of the panel so users have a long throw for scaling. The
   thumb + track styling matches the rest of the v6 chrome.

   The filled portion of the track follows the thumb via a CSS
   custom property `--pct` (0-100), updated from JS on input. The
   gradient hard-stops at --pct so the colour boundary lands
   directly under the thumb, instead of being fixed at the midpoint
   regardless of value. */
.text-tools__range{
  --pct: 50%;
  width:100%;
  margin:4px 0 2px;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:linear-gradient(to right,
    var(--brand,#2563eb) 0%,
    var(--brand,#2563eb) var(--pct),
    #e2e8f0 var(--pct),
    #e2e8f0 100%);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
.text-tools__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--brand,#2563eb);
  box-shadow:0 1px 3px rgba(15,23,42,.18);
  cursor:grab;
  margin-top:0;
}
.text-tools__range::-webkit-slider-thumb:active{ cursor:grabbing }
.text-tools__range::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--brand,#2563eb);
  box-shadow:0 1px 3px rgba(15,23,42,.18);
  cursor:grab;
}
.text-tools__range::-moz-range-track{
  height:6px;
  background:#e2e8f0;
  border-radius:999px;
}

/* AI background remover model picker — three radio chips stacked
   vertically inside the right-column tools panel. Each row shows the
   model name + a short hint. Selected option gets a brand-tinted
   background + ring so the active model reads at a glance. */
.bgrem-models{
  display:flex; flex-direction:column;
  gap:6px;
  margin:2px 0 6px;
}
.bgrem-model{
  display:flex; flex-direction:column;
  padding:9px 12px;
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.bgrem-model:hover{ border-color:#cbd5e1 }
.bgrem-model input{
  /* Hide the actual radio — the wrapping label handles visuals via
     the .is-active class kept in sync by the JS. */
  position:absolute; opacity:0; pointer-events:none; width:0; height:0;
}
.bgrem-model.is-active{
  background:#eef2ff;
  border-color:#6366f1;
  box-shadow:0 0 0 2px rgba(99,102,241,.18);
}
.bgrem-model__name{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--text,#0f172a);
}
.bgrem-model.is-active .bgrem-model__name{ color:#3730a3 }
.bgrem-model__name i{ font-size:12px; color:#64748b }
.bgrem-model.is-active .bgrem-model__name i{ color:#6366f1 }
.bgrem-model__hint{
  margin-top:2px;
  font-size:11.5px; color:#64748b; font-weight:500;
}
[data-theme="dark"] .bgrem-model{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
}
[data-theme="dark"] .bgrem-model.is-active{
  background:rgba(99,102,241,.12);
  border-color:#818cf8;
}
/* Multi-line text input — the textarea variant of #v6TextInput. Inherits
   the base .text-tools__text chrome (border, radius, padding, focus
   ring) and just adds resize behaviour + a comfortable min height so
   wrapping multi-line entries don't immediately spill into a scrollbar. */
.text-tools__text--multiline{
  resize:vertical;min-height:72px;line-height:1.4;
  font-family:inherit;
}
.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)}
/* Text-case toggles — sit below the alignment row. The label runs
   above the buttons so the row wraps gracefully on narrow panels,
   and the button group reuses the .text-tools__align segmented look
   for visual consistency. */
.text-tools__case{flex-direction:column;align-items:stretch;gap:6px}
.text-tools__case-label{font-size:12px;color:var(--text-mute);font-weight:600}
.text-tools__case-btns{
  display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;align-self:flex-start;
}
.text-tools__case-btns button{
  background:#fff;border:none;padding:6px 10px;cursor:pointer;color:var(--text-mute);
  font-size:13px;border-right:1px solid var(--line);min-width:44px;
}
.text-tools__case-btns button:last-child{border-right:none}
.text-tools__case-btns button.is-active{background:var(--brand);color:#fff}
.text-tools__case-btns button:hover:not(.is-active){background:var(--surface-2);color:var(--text)}
/* "Add another text layer" CTA inside the highlighted text-tools panel.
   Matches the brand-blue styling of the panel rail so it reads as the
   obvious next action — users were clicking the left-side Add Text tool
   thinking it would create another layer. */
.text-tools__add-another{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-top:4px;padding:9px 14px;
  border:1px solid #2563eb;border-radius:8px;
  background:#2563eb;color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.text-tools__add-another:hover{background:#1d4ed8;border-color:#1d4ed8}
.text-tools__add-another i{font-size:12px}

/* ---------- 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}
/* Highlighted variant — used at the top of the designer's right column
   so the flip & rotate surface jumps out the moment an image layer is
   active. Mirrors .text-tools--highlight: tinted blue background + brand
   left rail + matching panel-title accent. */
.flip-rotate-tools--highlight{
  background:#eff6ff;
  border-color:#bfdbfe;
  border-left:4px solid #2563eb;
  box-shadow:0 4px 14px rgba(37,99,235,.10);
  margin-top:0;
  margin-bottom:14px;
}
.flip-rotate-tools--highlight .panel-title{
  color:#1d4ed8;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12px;
  margin-bottom:4px;
}
.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-category-stock,
.publish-category-custom{display:flex;flex-direction:column;gap:6px}
.publish-category-stock[hidden],
.publish-category-custom[hidden]{display:none}
.publish-category-toggle{
  align-self:flex-start;font-size:12px;font-weight:600;color:var(--brand);
  text-decoration:none;cursor:pointer;
}
.publish-category-toggle:hover{text-decoration:underline}
.publish-category-toggle i{font-size:10px;margin-right:2px}
.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}
/* Wholesale card bottom row — brand · SKU on the left, "from $X.XX" on
   the right. Flex with min-width:0 on the left side so a long brand or
   SKU truncates with ellipsis instead of pushing the price off-card.
   The price hugs the right edge and doesn't shrink. */
body.page-v6 .product-card__meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:6px;
}
body.page-v6 .product-card__meta .product-card__sku{
  color:#64748b;font-weight:600;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0;
}
body.page-v6 .product-card__meta .product-card__from{
  flex:0 0 auto;
  font-size:13px;font-weight:800;color:var(--brand);
  white-space:nowrap;letter-spacing:.01em;
}
@media (max-width:480px){
  /* On very narrow phones the SKU can crowd the price even with
     ellipsis — drop the SKU's font a hair so both fit comfortably. */
  body.page-v6 .product-card__meta .product-card__sku{font-size:12px}
  body.page-v6 .product-card__meta .product-card__from{font-size:12px}
}
body.page-v6 .pagination{display:flex;justify-content:center;gap:6px;padding:20px 0 60px;align-items:center}
/* Direct-child selectors only — the Prev/Next button is `<a><i></i><span>Prev</span></a>`
   and the previous selector (.pagination span) was matching that INNER span,
   wrapping it in a second border that lived inside the outer button's border.
   Restricting to `> a` and `> span` means only top-level page tiles get the
   chrome; inner icon + label spans inside the button render as plain text. */
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;display:inline-flex;align-items:center;gap:6px;
}
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}
body.page-v6 .pagination > .is-disabled{opacity:.5;cursor:not-allowed}
/* Reset the page-gap span (just an ellipsis) so it doesn't wear button chrome. */
body.page-v6 .pagination > .mkt-v6__page-gap{
  border:0;background:transparent;padding:10px 4px;color:var(--text-mute);
}
@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}
}

/* ============================================================
   PRICING — 4-section numbered layout
   Creators / Wholesale Hub / Marketplace / Shops. Each section
   gets a left-aligned circular badge, an h2 title, a sub line,
   and a CTA button on the far right of the section header.
   Alternating background (--alt) gives the page a clear rhythm
   so the four surfaces feel distinct without needing borders.
   ============================================================ */
body.page-v6.page-pricing .pricing-anchor-nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:36px;
}
/* Bigger, bolder, brand-blue pills that read as primary nav rather
   than subtle chips. Filled background by default with a clear hover
   lift, mirroring the prominence the API doc page anchor row gets. */
body.page-v6.page-pricing .pricing-anchor-nav a{
  display:inline-flex;align-items:center;gap:12px;
  background:#0e6594;color:#fff;
  border:1px solid #0e6594;
  padding:14px 26px 14px 14px;border-radius:999px;
  font-size:16px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;transition:all .15s ease;
  box-shadow:0 4px 14px rgba(14,101,148,.25);
}
body.page-v6.page-pricing .pricing-anchor-nav a:hover{
  background:#0a4f73;border-color:#0a4f73;color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(14,101,148,.35);
}
body.page-v6.page-pricing .pricing-anchor-nav__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#fff;color:#0e6594;
  font-size:14px;font-weight:900;
  box-shadow:inset 0 0 0 2px rgba(14,101,148,.15);
}

body.page-v6.page-pricing .pricing-section{padding:70px 0;border-top:1px solid var(--line)}
body.page-v6.page-pricing .pricing-section--alt{background:var(--surface)}
body.page-v6.page-pricing .pricing-section .wrap{max-width:1080px;margin:0 auto;padding:0 28px}

body.page-v6.page-pricing .pricing-section__head{
  display:flex;align-items:flex-start;gap:18px;margin-bottom:32px;
}
body.page-v6.page-pricing .pricing-section__badge{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 4px 14px rgba(var(--brand-rgb,255 107 0)/.25);
}
body.page-v6.page-pricing .pricing-section__head > div{flex:1;min-width:0}
body.page-v6.page-pricing .pricing-section__title{
  font-size:32px;font-weight:900;color:var(--text);margin:0 0 6px;letter-spacing:-.02em;line-height:1.1;
}
body.page-v6.page-pricing .pricing-section__sub{
  font-size:15px;color:var(--text-mute);margin:0;max-width:680px;line-height:1.5;
}
body.page-v6.page-pricing .pricing-section__sub strong{color:var(--text);font-weight:800}
body.page-v6.page-pricing .pricing-section__cta{flex-shrink:0;margin-top:6px;align-self:center}

body.page-v6.page-pricing .pricing-section__listhead{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}

/* ---- Marketplace section: flat price + bundle list ------------ */
body.page-v6.page-pricing .mkt-price-grid{
  display:grid;grid-template-columns:minmax(260px,1fr) 1.4fr;gap:20px;
}
body.page-v6.page-pricing .mkt-price-flat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
  display:flex;flex-direction:column;justify-content:center;box-shadow:var(--sh);
}
body.page-v6.page-pricing .mkt-price-flat__label{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
}
body.page-v6.page-pricing .mkt-price-flat__value{
  font-size:42px;font-weight:900;color:var(--text);margin:8px 0 12px;letter-spacing:-.02em;
}
body.page-v6.page-pricing .mkt-price-flat__note{
  font-size:13px;color:var(--text-mute);margin:0;line-height:1.5;
}

body.page-v6.page-pricing .mkt-bundle-list{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh);
}
body.page-v6.page-pricing .mkt-bundle-list__head{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  margin-bottom:14px;
}
body.page-v6.page-pricing .mkt-bundle-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
body.page-v6.page-pricing .mkt-bundle-list li{
  display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);
  border-radius:var(--r-md);border:1px solid var(--line);
}
body.page-v6.page-pricing .mkt-bundle-list__qty{
  font-size:14px;font-weight:800;color:var(--text);min-width:80px;
}
body.page-v6.page-pricing .mkt-bundle-list__pct{
  font-size:13px;font-weight:800;color:var(--brand);background:rgba(var(--brand-rgb,255 107 0)/.08);
  padding:4px 10px;border-radius:999px;
}
body.page-v6.page-pricing .mkt-bundle-list__lbl{
  font-size:13px;color:var(--text-mute);margin-left:auto;
}
body.page-v6.page-pricing .mkt-bundle-list__foot{
  font-size:12px;color:var(--text-mute);margin:14px 0 0;line-height:1.5;
}

/* ---- Shops section: 4-up feature tiles ----------------------- */
body.page-v6.page-pricing .shops-feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
body.page-v6.page-pricing .shops-feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;
  display:flex;flex-direction:column;gap:10px;transition:all .15s ease;
}
body.page-v6.page-pricing .shops-feature:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brand)}
body.page-v6.page-pricing .shops-feature__icon{
  width:42px;height:42px;border-radius:var(--r-md);background:var(--surface-2);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;
}
body.page-v6.page-pricing .shops-feature h4{
  font-size:16px;font-weight:900;color:var(--text);margin:4px 0 0;letter-spacing:-.01em;
}
body.page-v6.page-pricing .shops-feature p{
  font-size:13.5px;color:var(--text-mute);margin:0;line-height:1.55;
}

@media(max-width:900px){
  body.page-v6.page-pricing .pricing-section{padding:50px 0}
  body.page-v6.page-pricing .pricing-section__head{flex-wrap:wrap;gap:14px}
  body.page-v6.page-pricing .pricing-section__cta{flex-basis:100%;margin-left:62px}
  body.page-v6.page-pricing .pricing-section__title{font-size:26px}
  body.page-v6.page-pricing .mkt-price-grid{grid-template-columns:1fr}
  body.page-v6.page-pricing .shops-feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  body.page-v6.page-pricing .pricing-anchor-nav a{font-size:12px;padding:6px 12px 6px 6px}
  body.page-v6.page-pricing .shops-feature-grid{grid-template-columns:1fr}
  body.page-v6.page-pricing .pricing-section__cta{margin-left:0;width:100%}
  body.page-v6.page-pricing .mkt-bundle-list li{flex-wrap:wrap;gap:8px}
  body.page-v6.page-pricing .mkt-bundle-list__lbl{margin-left:0;width:100%}
}

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

/* Brand-tinted empty-cart CTAs.
   --mode-market is the marketplace purple (#7c3aed) defined further
   up; --orange is the wholesale storefront orange (#ea580c family,
   :root). Both buttons get the same shape as the standard .btn
   chrome (padding, radius, weight) but their own background +
   border so the routes read as separate destinations rather than
   primary/secondary of the same action. */
body.page-v6.page-cart .cart-empty__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px;
  border-radius:10px;
  font-size:14.5px; font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
body.page-v6.page-cart .cart-empty__btn:hover{ transform:translateY(-1px) }

body.page-v6.page-cart .cart-empty__btn--marketplace{
  background:var(--mode-market, #7c3aed);
  color:#fff;
  border-color:var(--mode-market, #7c3aed);
}
body.page-v6.page-cart .cart-empty__btn--marketplace:hover{
  background:var(--mode-market-dark, #6d28d9);
  border-color:var(--mode-market-dark, #6d28d9);
  color:#fff;
}

body.page-v6.page-cart .cart-empty__btn--wholesale{
  background:var(--orange, #ea580c);
  color:#fff;
  border-color:var(--orange, #ea580c);
}
body.page-v6.page-cart .cart-empty__btn--wholesale:hover{
  background:var(--orange-dark, #c56100);
  border-color:var(--orange-dark, #c56100);
  color:#fff;
}

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

/* Variant editor — "Edit" pill + colour/size dropdowns that reveal in
   place under the meta line. Sits in the cart-item grid as a bottom
   row spanning the full width so the dropdowns can stretch. */
body.page-v6.page-cart .cart-item__variant-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--surface-3, #e2e8f0);
  background:transparent;color:var(--text-dim, #64748b);
  border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;
}
body.page-v6.page-cart .cart-item__variant-toggle:hover{
  background:var(--surface-2, #f1f5f9);color:var(--text, #0f172a);
  border-color:var(--brand, #4f46e5);
}
body.page-v6.page-cart .cart-item__variant-toggle[aria-expanded="true"]{
  background:var(--brand, #4f46e5);color:#fff;border-color:var(--brand, #4f46e5);
}
/* Inline variant trigger lives inside .cart-item__meta beside the size
   badge — small pill so it sits comfortably next to the bold size label
   without dominating the meta line. */
body.page-v6.page-cart .cart-item__variant-toggle--inline{
  margin-left:6px;padding:2px 8px;font-size:11px;
  vertical-align:middle;
}
body.page-v6.page-cart .cart-item__variant-toggle--inline i{font-size:10px}
/* Variant panel is hidden until the inline trigger toggles it open.
   Belt-and-braces: the [hidden] HTML attribute already hides it, but
   making the rule explicit guards against any later override that
   reset display. */
body.page-v6.page-cart .cart-item__variant-panel[hidden]{display:none !important}
body.page-v6.page-cart .cart-item__variant-panel{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  background:var(--surface-2, #f8fafc);border:1px solid var(--surface-3, #e2e8f0);
  border-radius:8px;padding:10px 12px;margin-top:6px;font-size:13px;
}

/* Digital-art-fee nested sub-line. Rendered inside the cart-item grid
   as a full-width row beneath the main line (grid-column:1/-1 spans
   every column the cart-item declares). Visually reads as an inset
   surcharge belonging to the parent product — left rail with an icon
   + title + a small note explaining why; right rail with the amount +
   currency chip mirroring the main line-total formatting. */
body.page-v6.page-cart .cart-item__fee{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:8px 0 0;padding:10px 14px;
  background:#fff7ed;
  border:1px dashed #fed7aa;
  border-radius:8px;
  font-size:13px;color:#7c2d12;
}
body.page-v6.page-cart .cart-item__fee-label{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
body.page-v6.page-cart .cart-item__fee-label i{
  color:#ea580c;font-size:14px;
}
body.page-v6.page-cart .cart-item__fee-title{
  font-weight:700;color:#9a3412;
}
body.page-v6.page-cart .cart-item__fee-note{
  color:#9a3412;opacity:.75;font-weight:500;font-size:12px;
}
body.page-v6.page-cart .cart-item__fee-amount{
  font-weight:700;color:#9a3412;white-space:nowrap;
}
body.page-v6.page-cart .cart-item__fee-amount .ws-currency-label{
  margin-left:4px;font-size:11px;font-weight:600;color:#c2410c;
}
body.page-v6.page-cart .cart-item__variant-row{
  display:inline-flex;align-items:center;gap:8px;
}
body.page-v6.page-cart .cart-item__variant-name{
  color:var(--text-dim, #64748b);font-weight:600;min-width:48px;
}
body.page-v6.page-cart .cart-item__variant-panel select{
  padding:6px 10px;border:1px solid var(--surface-3, #cbd5e1);
  border-radius:6px;background:#fff;color:var(--text, #0f172a);
  font-size:13px;min-width:140px;
}
body.page-v6.page-cart .cart-item__variant-panel select:disabled{
  opacity:.6;cursor:wait;
}
/* Greyed-out unavailable options (size not stocked in chosen colour
   or vice versa). Native browsers respect [disabled] on <option>;
   we add a visual cue so the buyer reads it as "not available"
   rather than just dimmed. */
body.page-v6.page-cart .cart-item__variant-panel select option:disabled{
  color:#9ca3af;background:#f3f4f6;text-decoration:line-through;
}
/* Inline search input that filters the dropdown options. Hidden by
   JS when the option list is short (<= 8 items). Sized to match the
   adjacent <select> so the panel reads as one composite control. */
body.page-v6.page-cart .cart-item__variant-search{
  width:100%;max-width:200px;
  padding:6px 10px;border:1px solid var(--surface-3, #cbd5e1);
  border-radius:6px;background:#fff;color:var(--text, #0f172a);
  font-size:13px;
}
body.page-v6.page-cart .cart-item__variant-search:focus{
  outline:none;border-color:var(--brand, #4f46e5);
  box-shadow:0 0 0 2px rgba(79,70,229,.15);
}
body.page-v6.page-cart .cart-item__variant-status{
  flex:1 1 auto;color:var(--text-dim, #64748b);font-size:12px;
  font-weight:600;text-align:right;min-height:1em;
}
/* 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)}

/* Bundle savings line — green accent so it reads as money saved.
   Same pattern works on /checkout too (shared markup). */
body.page-v6.page-cart .cart-summary__discount dd,
body.page-v6.page-checkout .cart-summary__discount dd{
  color:#16a34a; font-weight:800;
}
body.page-v6.page-cart .cart-summary__discount-label,
body.page-v6.page-checkout .cart-summary__discount-label{
  display:inline-block; margin-left:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:2px 7px; border-radius:999px;
  background:#dcfce7; color:#15803d; text-transform:uppercase;
}
body.page-v6.page-cart .cart-summary__bundle-nudge{
  /* Bottom margin separates the nudge from the Checkout CTA so the
     two don't visually fuse. Top margin gives a touch of breathing
     room from the totals dl above. */
  margin:8px 0 16px; padding:9px 12px;
  background:#fef3c7; border:1px solid #fde68a; border-radius:8px;
  color:#92400e; font-size:12.5px; line-height:1.4;
  display:flex; align-items:center; gap:8px;
}
body.page-v6.page-cart .cart-summary__bundle-nudge i{
  color:#b45309; font-size:14px;
}

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}
/* Same markup is rendered on both /cart and /checkout — extend the
   selector so the shield icon stays inline with the text on the
   checkout summary card. Without this, /checkout fell through to
   default inline rendering and the icon dropped onto its own line. */
body.page-v6.page-cart .cart-summary__note,
body.page-v6.page-checkout .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__note > i,
body.page-v6.page-checkout .cart-summary__note > i{
  flex-shrink:0;
}
body.page-v6.page-cart .cart-summary__pays,
body.page-v6.page-checkout .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}

/* Saved cards on the Moneris card-entry step */
body.page-v6.page-checkout .saved-cards-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
body.page-v6.page-checkout .saved-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;background:#fff;transition:all .15s ease;
}
body.page-v6.page-checkout .saved-card:hover{border-color:var(--brand)}
body.page-v6.page-checkout .saved-card.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.page-checkout .saved-card input[type=radio]{accent-color:var(--brand);width:18px;height:18px;flex:0 0 auto}
body.page-v6.page-checkout .saved-card__brand{font-size:28px;color:var(--text-dim);flex:0 0 auto;width:36px;display:grid;place-items:center}
body.page-v6.page-checkout .saved-card.is-selected .saved-card__brand{color:var(--brand)}
body.page-v6.page-checkout .saved-card__meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
body.page-v6.page-checkout .saved-card__name{font-size:14px;font-weight:700;color:var(--text)}
body.page-v6.page-checkout .saved-card__digits{font-size:12px;color:var(--text-dim);font-weight:500;font-variant-numeric:tabular-nums}
body.page-v6.page-checkout .saved-card-note,
body.page-v6.page-checkout .save-card-note{
  font-size:12px;color:var(--text-dim);margin:8px 0 12px;display:flex;align-items:center;gap:6px;
}
body.page-v6.page-checkout .saved-card-note i,
body.page-v6.page-checkout .save-card-note i{color:var(--brand)}
body.page-v6.page-checkout .saved-card-toggle{margin-top:6px}
body.page-v6.page-checkout .save-card-row{
  margin-top:6px;padding-top:12px;border-top:1px dashed var(--line);
}
body.page-v6.page-checkout .save-card-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
body.page-v6.page-checkout .save-card-check input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto}
body.page-v6.page-checkout .save-card-row .save-card-note{margin:6px 0 0 24px}

/* Checkout action row */
body.page-v6 .checkout-actions{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:6px;
}
body.page-v6 .checkout-actions .btn-lg{padding:14px 22px;font-size:15px}
/* Mobile: stack the Pay CTA on its own full-width line with the Back
   link sitting underneath. column-reverse puts the submit button (which
   is second in source order) at the top — primary action gets the
   prominent slot and Back is a secondary link below. Breakpoint at
   768px catches all phones plus iPad portrait, since 640px misses the
   wider Pro Max devices in landscape and most small tablets. */
@media(max-width:768px){
  body.page-v6 .checkout-actions{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:10px;
  }
  body.page-v6 .checkout-actions > .btn,
  body.page-v6 .checkout-actions > button,
  body.page-v6 .checkout-actions > a{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

/* 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)}
/* Digital-art-fee surcharge row inside the checkout summary. Reads as
   a nested continuation of the previous product line — same flex
   layout but lighter chrome (dashed orange-tinted left border, smaller
   icon-only thumb, italic-ish secondary copy) so the surcharge is
   visually distinct from a "real" product line. */
body.page-v6 .checkout-line--fee{
  margin-top:-4px; padding:8px 0 8px 16px;
  background:#fff7ed;
  border-left:3px dashed #fed7aa;
  border-radius:0 6px 6px 0;
}
body.page-v6 .checkout-line__thumb--fee{
  background:#fff;
  border:1px dashed #fed7aa;
}
body.page-v6 .checkout-line--fee .checkout-line__thumb--fee i{
  color:#ea580c;
}
body.page-v6 .checkout-line--fee .checkout-line__title{
  color:#9a3412; font-size:13px;
}
body.page-v6 .checkout-line--fee .checkout-line__sub{
  color:#9a3412; opacity:.75; font-size:12px;
}
body.page-v6 .checkout-line--fee .checkout-line__price{
  color:#9a3412; font-size:13px;
}

/* 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;
}
/* Sticky removed (2026-05) — the left column used to be just the
   shirt + face buttons (short enough that sticking it during scroll
   was useful). Now it also contains the upload accordion, which
   can grow taller than the viewport on products with many
   placements. position:sticky on a too-tall element scrolls its
   top off-screen and then locks the bottom edge, which made the
   "Upload your design" toggle unreachable mid-scroll. Plain flow
   so the whole column scrolls naturally with the page. */
body.page-v6 .ws-product__stage{position:static;top:auto}
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;
}
/* Uploaded artwork is anchored to the TOP of the print zone (align-items:flex-start)
   so a shorter image (e.g. 2200x400 in a 2200x3000 zone) renders the same way it
   actually prints on the garment — pinned to the top of the print area, not vertically
   centered. Horizontal centering is preserved via justify-content:center. */
body.page-v6 .ws-art{position:absolute;pointer-events:none;display:flex;align-items:flex-start;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;
}
/* Wide-short uploads (e.g. 2200x400 banners) get pinned to the top of the
   print zone instead of vertically centred. setSlotPreview() in
   wholesale_product_v6.php adds .ws-art__img--top on load when the image's
   natural aspect ratio is >= 1.5 (width >> height). The inline contain-style
   on the <img> leaves object-position unset, so this class wins. */
body.page-v6 .ws-art img.ws-art__img--top{object-position:center top}
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}
/* Brand + model heading — wholesale buyers search for the exact spec
   ("Gildan 5000") so we surface it as a real H2 below the H1. Sized
   between the H1 and the meta chips so it reads as a subtitle rather
   than a duplicate title. */
body.page-v6 .ws-product__model-h{
  font-size:18px;font-weight:700;color:var(--text-mute,#475569);
  margin:0 0 8px;letter-spacing:-.005em;
}
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}
/* Wholesale breadcrumb chain — matches the marketplace template's
   visual style so the two product templates feel consistent. The
   chevron separator is rendered as an icon between hyperlinked
   crumbs; the trailing span is the un-linked current page. */
body.page-v6.page-wholesale-product .mkt-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:6px;font-size:13px;color:var(--text-mute,#64748b);
  margin:4px 0 18px;
}
body.page-v6.page-wholesale-product .mkt-breadcrumb a{
  color:var(--text-mute,#64748b);text-decoration:none;font-weight:500;
  padding:4px 6px;border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
body.page-v6.page-wholesale-product .mkt-breadcrumb a:hover{
  background:rgba(15,23,42,0.05);color:var(--brand,#3b82f6);
}
body.page-v6.page-wholesale-product .mkt-breadcrumb__sep{
  color:rgba(15,23,42,0.35);font-size:10px;
}
body.page-v6.page-wholesale-product .mkt-breadcrumb__here{
  color:var(--text,#0f172a);font-weight:600;padding:4px 6px;
}
/* Templated below-the-fold product description. Sits below the
   ws-product__grid in a full-width container; the prose inside is
   intentionally lightly styled so it reads as content not chrome —
   it's the page's primary on-page SEO body copy. */
body.page-v6.page-wholesale-product .ws-product__description{
  max-width:880px;margin:40px auto 0;padding:24px 0 0;
  border-top:1px solid var(--line,#e5e7eb);
  font-size:15px;line-height:1.7;color:var(--text,#0f172a);
}
body.page-v6.page-wholesale-product .ws-product__description h2{
  font-size:22px;font-weight:800;color:var(--text,#0f172a);
  margin:0 0 14px;letter-spacing:-.005em;
}
body.page-v6.page-wholesale-product .ws-product__description p{
  margin:0 0 14px;
}
body.page-v6.page-wholesale-product .ws-product__description strong{
  color:var(--text,#0f172a);font-weight:700;
}
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}
/* "Show more colours" reveal button under the swatch grid.
 *
 * Original treatment was a flat brand-coloured text link with no
 * border or background — disappeared into the cream wholesale
 * page background. Buyers were missing 30+ colours because they
 * never noticed the toggle.
 *
 * Now styled as a centred outlined pill:
 *   - Outlined brand border so it reads as a button, not a link
 *   - Light brand-tinted background that lifts off the page
 *   - Inline ::after chevron that flips 180° in .is-expanded
 *   - Filled brand on hover for clear interaction feedback
 *   - block + auto margins so it centres under the grid (matches
 *     the layout in the screenshot where the toggle sits dead-
 *     centre below the swatches)
 */
body.page-v6 .ws-swatches-toggle{
  display:none;
  align-items:center; justify-content:center; gap:8px;
  margin:12px auto 4px;
  padding:8px 18px;
  background:rgba(2,80,119,.06);
  border:1px solid var(--brand);
  border-radius:999px;
  color:var(--brand);
  cursor:pointer;
  font-size:13px; font-weight:600;
  line-height:1;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
body.page-v6 .ws-swatches-toggle.is-visible{display:inline-flex}
body.page-v6 .ws-swatches-toggle::after{
  /* Pure-CSS chevron — no FontAwesome dependency, no glyph-load
   * jitter on first paint. Rotates 180° when the swatch grid is
   * expanded so the same button reads as both "show more" and
   * "show fewer" without us having to swap textContent for the
   * arrow direction. */
  content:"";
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  margin-top:-3px;
}
body.page-v6 .ws-swatches.is-expanded + .ws-swatches-toggle::after,
body.page-v6 .ws-swatches-toggle[aria-expanded="true"]::after{
  transform:rotate(-135deg);
  margin-top:3px;
}
body.page-v6 .ws-swatches-toggle:hover,
body.page-v6 .ws-swatches-toggle:focus{
  background:var(--brand);
  color:#fff;
  outline:none;
}
body.page-v6 .ws-swatches-toggle:active{transform:translateY(1px)}

/* Centre the pill under the swatch grid. The swatch wrapper is a
 * flex container so an inline-flex child stays inline; the parent
 * `.ws-colors-section` (or whatever wraps swatches + toggle) needs
 * `text-align: center` for inline-flex auto-margins to take effect.
 * Most wholesale layouts already wrap with that — adding the safety
 * here so the pill is reliably centred regardless of parent. */
body.page-v6 .ws-swatches + .ws-swatches-toggle{
  display:none;
}
body.page-v6 .ws-swatches + .ws-swatches-toggle.is-visible{
  display:flex;
  margin-left:auto; margin-right:auto;
}
body.page-v6 .ws-swatch{
  display:inline-block;
  width:30px;height:30px;border-radius:7px;
  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}
/* Low/no stock — the size exists in the S&S catalogue for this colour
   but the warehouse quantity is at/below our LOW_STOCK_THRESHOLD (2).
   Visually distinct from .is-unavailable so sellers understand this is
   a *temporary* stock-out rather than a catalogue gap. Shows a dashed
   outline + warning tint instead of the strike-through. */
body.page-v6 .mkt-size.is-out-of-stock{
  opacity:.45; cursor:not-allowed; pointer-events:none;
  border-style:dashed; border-color:#d97706; color:#92400e;
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(217,119,6,.08) 6px 12px);
}

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__text .ws-drop__desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-v6 .ws-drop__text .ws-drop__desc .ws-currency-label{display:inline-block;margin-left:2px}
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}
/* Same `display:grid` vs `[hidden]` specificity issue as the total
   rows below — without this rule the X button stays visible even
   when JS sets `hidden = true` on the empty state. */
body.page-v6 .ws-drop__clear[hidden]{display:none}

/* Top spacing for the upload accordion when it lives inside the
   left column under the shirt preview. Gives it room to breathe
   below the face buttons row. */
body.page-v6 .ws-product__stage > .ws-uploads{
  margin-top:18px;
}

/* ── Grid layout for upload cards (2026-05 experiment) ──────────
   When `.ws-uploads__body--grid` is set on the parent, the placement
   list switches from a one-per-row vertical stack to an auto-fill
   grid that wraps. Cards get more padding and an optional preview
   thumbnail on the right side showing where the placement lands on
   the garment. Reverting is a one-liner: drop the --grid class on
   the parent in wholesale_product_v6.php and the legacy stacked
   list comes back automatically (all of these rules are scoped to
   the --grid modifier). */
body.page-v6 .ws-uploads__body--grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:10px;
  padding-top:14px;
}
body.page-v6 .ws-uploads__body--grid .ws-uploads__hint{
  grid-column:1 / -1; /* hint spans every column instead of slotting into one */
  margin:0;
}
body.page-v6 .ws-uploads__body--grid .ws-drop{
  margin-bottom:0;
  padding:14px 16px;
  min-height:88px;
}
/* Pull the order:-1 hoist from .is-active down so it doesn't bump
   the active card to the very top of the grid (which made the
   reading order jump when a user clicked a face button). In grid
   mode the active card just ring-highlights in place. */
body.page-v6 .ws-uploads__body--grid .ws-drop.is-active{ order:0; }

/* Preview thumb on the right side of the card. Square 64px box
   with the placement image centered and contained. */
body.page-v6 .ws-drop__preview{
  flex-shrink:0;
  width:64px; height:64px;
  border-radius:8px;
  background:var(--surface);
  border:1px solid var(--line);
  display:grid; place-items:center;
  overflow:hidden;
  margin-left:auto; /* push to the right edge of the flex row */
}
body.page-v6 .ws-drop__preview img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
/* If the placement has no preview image (front/back use the hero
   stage instead), the <span> isn't emitted at all — no fallback
   needed here. */

/* 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)}
/* `display:flex` above outranks the UA default `[hidden]{display:none}`,
   so toggling `pRow.hidden = true` from JS leaves the row visible. Force
   hidden rows back to display:none with matching specificity so recalc()
   actually hides the Prints + decoration-discount rows when the buyer
   removes their artwork. */
body.page-v6 .ws-total__row[hidden]{display:none}
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;
}

/* Subtle "CAD" currency label that sits beside any wholesale-side price.
   Used on the wholesale product page (inline price, totals breakdown,
   mobile sticky bar) and on wholesale rows + wholesale-only summary
   totals in the cart. Inherits parent font-weight reset so it stays
   visually quieter than the price digits regardless of context. */
body.page-v6 .ws-currency-label{
  display:inline-block;margin-left:4px;
  font-size:.72em;font-weight:600;letter-spacing:.04em;
  color:var(--text-dim);text-transform:uppercase;vertical-align:baseline;
}
body.page-v6 .ws-total__row--grand .ws-currency-label{font-size:.65em;font-weight:700}
body.page-v6 .mkt-mobile-cta__price-now + .ws-currency-label{margin-left:3px;font-size:11px}

/* Subtle "USD" currency label that sits beside any marketplace-side
   price. Marketplace prices are USD, while wholesale is CAD — labels
   on each side make the contrast explicit on listings, the product
   detail page, the cart, and checkout. Same visual weight as
   .ws-currency-label so paired pages feel consistent. */
body.page-v6 .mp-currency-label{
  display:inline-block;margin-left:4px;
  font-size:.72em;font-weight:600;letter-spacing:.04em;
  color:var(--text-dim);text-transform:uppercase;vertical-align:baseline;
}
body.page-v6 .mkt-card-v6__price + .mp-currency-label{margin-left:3px;font-size:.65em}
body.page-v6 .mkt-mobile-cta__price-now + .mp-currency-label{margin-left:3px;font-size:11px}

/* Actions */
body.page-v6 .ws-actions{display:flex;flex-direction:column;gap:8px}
body.page-v6 .ws-actions .btn{justify-content:center}

/* Wholesale design-confirm modal — replaces alert/confirm popups when
   the buyer's CTA choice doesn't match what they uploaded. Darkened
   backdrop + centred card + two CTAs (Go back / Continue with no
   design). Body-scoped so it doesn't fight the cart variant editor's
   styling. */
.ws-confirm-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.65);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:20px;
  animation:wsConfirmFadeIn .18s ease-out;
}
@keyframes wsConfirmFadeIn{from{opacity:0}to{opacity:1}}
.ws-confirm{
  background:#fff;border-radius:14px;
  width:min(460px, 100%);
  padding:26px 28px 22px;
  box-shadow:0 18px 50px rgba(15,23,42,.35);
  animation:wsConfirmRise .22s ease-out;
}
@keyframes wsConfirmRise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.ws-confirm__title{
  margin:0 0 10px;font-size:19px;font-weight:700;color:#0f172a;line-height:1.25;
}
.ws-confirm__body{
  margin:0 0 22px;font-size:14px;line-height:1.5;color:#475569;
}
.ws-confirm__actions{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}
.ws-confirm__actions .btn{
  min-width:auto;padding:10px 16px;font-size:14px;
}
@media (max-width:480px){
  .ws-confirm__actions{flex-direction:column-reverse}
  .ws-confirm__actions .btn{width:100%}
}
/* "Order blank only" CTA — wholesale dark-orange/brown (#c56100) so the
   blank-only path reads as the wholesale-branded action and matches the
   sticky mobile bar. Overrides the generic .btn-outline (white/dark) the
   button inherits. */
body.page-v6.page-wholesale-product .ws-actions #wsAddBlank{
  background:#c56100;
  border-color:#c56100;
  color:#fff;
}
body.page-v6.page-wholesale-product .ws-actions #wsAddBlank:hover{
  background:#a05000;
  border-color:#a05000;
  color:#fff;
}
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}

  /* Mobile reorder — title + brand/model/SKU sit ABOVE the image.
     `.ws-product__info` becomes display:contents so its children
     promote to direct grid items of `.ws-product__grid`; we then
     use `order` to lift the h1 and the meta row above the stage,
     and push everything else (category, price, options, uploads,
     totals, CTAs, etc.) below. Items at the same order value
     preserve document order. */
  body.page-v6.page-wholesale-product .ws-product__info{
    display:contents;
  }
  body.page-v6.page-wholesale-product .ws-product__info > h1{
    order:1;
    margin-top:4px;
  }
  body.page-v6.page-wholesale-product .ws-product__info > .ws-product__meta{
    order:2;
  }
  body.page-v6.page-wholesale-product .ws-product__stage{
    order:3;
  }
  body.page-v6.page-wholesale-product .ws-product__info > .ws-product__cat,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-method-badges,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-product__price,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-product__opts,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-method-picker,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-uploads,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-total,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-canada-notice,
  body.page-v6.page-wholesale-product .ws-product__info > .ws-actions{
    order:4;
  }
}

/* ============================================================
   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,
body.page-v6.page-faq .how-cta,
body.page-v6.page-customgpt .how-cta,
body.page-v6.page-contact .how-cta{padding:64px 0;text-align:center;background:var(--surface);border-top:1px solid var(--line)}
body.page-v6.page-how .how-cta h2,
body.page-v6.page-faq .how-cta h2,
body.page-v6.page-customgpt .how-cta h2,
body.page-v6.page-contact .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,
body.page-v6.page-faq .how-cta p,
body.page-v6.page-customgpt .how-cta p,
body.page-v6.page-contact .how-cta p{color:var(--text-mute);font-size:16px;margin:0 0 22px}
body.page-v6.page-how .how-cta__row,
body.page-v6.page-faq .how-cta__row,
body.page-v6.page-customgpt .how-cta__row,
body.page-v6.page-contact .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);
}
/* Real-logo sprite inside the apps-page tile. Same sheet + same row/
   col map as the homepage .market-card-icon and the seller-side
   .cpv6-retrieve-icon — rendered at 36px so it has 7px breathing
   room inside the 50px square tile. The full 1200×1000 sprite
   scales to 216×180 (=> 36px per cell) so positions are multiples
   of 36px. */
body.page-v6.page-integrations .int-card__sprite{
  display:block;width:36px;height:36px;
  background:url(/cp/images/marketplace_icons.png) no-repeat;
  background-size:216px 180px;
  border-radius:6px;
}
body.page-v6.page-integrations .int-card__sprite.m-amazon      { background-position: 0 0; }
body.page-v6.page-integrations .int-card__sprite.m-etsy        { background-position: -36px 0; }
/* eBay spans 2 sprite cells (see .market-card-icon.m-ebay note). At
   the standard 36px scale that's 72px wide, which overflows the
   50×50 .int-card__logo container. Scale the entire ebay icon down
   to 40×20 (its natural 2:1 aspect kept) so the full wordmark fits
   inside the rounded tile alongside the other 36×36 logos. The
   sprite's background-size is overridden inline so the cell stride
   matches the new render size (20px per cell → 1200×1000 × 0.1). */
body.page-v6.page-integrations .int-card__sprite.m-ebay {
  width: 40px;
  height: 20px;
  background-size: 120px 100px;
  background-position: -40px 0;
}
body.page-v6.page-integrations .int-card__sprite.m-opencart    { background-position: -144px 0; }
body.page-v6.page-integrations .int-card__sprite.m-shopify     { background-position: -180px 0; }
body.page-v6.page-integrations .int-card__sprite.m-storenvy    { background-position: -36px -36px; }
body.page-v6.page-integrations .int-card__sprite.m-bigcartel   { background-position: -72px -36px; }
body.page-v6.page-integrations .int-card__sprite.m-magento     { background-position: -108px -36px; }
body.page-v6.page-integrations .int-card__sprite.m-squarespace { background-position: -144px -36px; }
body.page-v6.page-integrations .int-card__sprite.m-walmart     { background-position: -180px -36px; }
body.page-v6.page-integrations .int-card__sprite.m-wish        { background-position: 0 -72px; }
body.page-v6.page-integrations .int-card__sprite.m-squareup    { background-position: -36px -72px; }
body.page-v6.page-integrations .int-card__sprite.m-bonanza     { background-position: -72px -72px; }
body.page-v6.page-integrations .int-card__sprite.m-ecwid       { background-position: -108px -72px; }
body.page-v6.page-integrations .int-card__sprite.m-webflow     { background-position: -144px -72px; }
body.page-v6.page-integrations .int-card__sprite.m-wix         { background-position: -180px -72px; }
body.page-v6.page-integrations .int-card__sprite.m-tsgcommerce { background-position: 0 -108px; }
body.page-v6.page-integrations .int-card__sprite.m-woocommerce { background-position: -36px -108px; }
body.page-v6.page-integrations .int-card__sprite.m-bigcommerce { background-position: -72px -108px; }
body.page-v6.page-integrations .int-card__sprite.m-ordermygear { background-position: -144px -108px; }
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 24px}
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 .field--turnstile{align-items:center;margin-top:4px}
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}
}

/* Short-screen tightening (laptops at ~720–820px viewport height).
   The default chrome — 56/96 padding on .auth, 44px padding on the form,
   30px pitch headline, 24px margin after the password hint — pushes the
   submit button below the fold on shorter screens. Re-collapse the
   vertical spacing so the whole card fits without scrolling. Width-based
   styles above are untouched, so wide-but-short laptops still get the
   two-column pitch layout. */
@media (max-height: 820px){
  body.page-v6 .auth{padding:18px 28px 32px}
  body.page-v6 .auth__pitch,
  body.page-v6 .auth__form,
  body.page-v6 .auth__card{padding:24px 28px}
  body.page-v6 .auth__form{gap:10px}
  body.page-v6 .auth h1{font-size:22px;margin-bottom:4px}
  body.page-v6 .auth .lead{margin-bottom:10px}
  body.page-v6 .auth__pitch h2{font-size:24px;margin-bottom:14px}
  body.page-v6 .auth__pitch ul{gap:8px}
  body.page-v6 .auth__pitch li{font-size:13px;line-height:1.35}
  body.page-v6 .auth .field .help{margin:2px 0 6px}
  body.page-v6 .auth .divider{margin:2px 0}
  /* Collapse the 4 SSO buttons into a single row of icon-only squares
     on short screens — reclaims 3 button-heights of vertical space.
     The text label inside each button (.sso-btn__label) is visually
     hidden but stays in the DOM so screen readers still announce
     "Sign up with Google" etc. The aria-label on the anchor doubles
     that promise. */
  body.page-v6 .sso{flex-direction:row;gap:8px}
  body.page-v6 .sso-btn{
    flex:1 1 0;
    padding:10px 0;
    font-size:16px;
    min-height:42px;
  }
  body.page-v6 .sso-btn i{font-size:18px}
  body.page-v6 .sso-btn__label{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }
  body.page-v6 .auth .field input[type="text"],
  body.page-v6 .auth .field input[type="email"],
  body.page-v6 .auth .field input[type="password"]{padding:9px 12px;font-size:13px}
  body.page-v6 .auth__foot{margin-top:10px}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 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.
   ──────────────────────────────────────────────────────────────────
   Sizing approach mirrors .mkt-pmedia__stack on the product detail
   page (see further down in this file): the stack is `width:100%`
   with no fixed aspect ratio, and the shirt img inside it is
   `width:100%; height:auto`. The shirt's natural aspect drives the
   stack's height, so the absolutely-positioned design overlay's
   percent offsets (top/left/width/height) map to true shirt-pixel
   coordinates.
   The previous version used `aspect-ratio: 575/784` on the stack
   and `height:100%; object-fit:contain` on the blank img, which
   letterboxed any non-575:784 mockup inside the fixed-aspect parent
   — and pulled the design upward off the shirt because top:33%
   referred to the parent instead of the shirt. The square card-img
   container already clips overflow, so a tall shirt is naturally
   cropped at the hip without extra constraints here. */
body.page-marketplace .mkt-v6__card-img .mkt-v6__card-stack{
  position:relative;
  width:100%;
  max-width:calc(100% - 28px);
  /* No max-height — stack height MUST track the shirt img's natural
     rendered height (width:100% × aspect ratio) so the absolutely-
     positioned design's top:X% maps to X% of image-pixel space, the
     same coordinate system the canvas-position editor saves into.
     A previous max-height:100% clamped the stack to the square card
     container's height; with a 575×784 shirt that compressed every
     vertical % by 0.733 — top:45.625% landed at 33.5% on the image.
     The card-img wrapper has overflow:hidden + aspect-ratio:1/1, so
     the visible card stays square; the shirt hem is clipped at the
     same point it was before. */
  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:auto;
  padding:0; /* override the generic img padding rule above */
  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;
  /* Pin the design to the top-centre of its print-rect (same as
     the detail page's .mkt-pmedia__design) so the design's top edge
     lines up with box.y rather than centring vertically inside the
     rect. Critical for designs that are squarer than the rect. */
  object-position:top center;
  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{
    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;
  /* Single block layout. The text sits on the left, constrained by
     mkt-hero-v6__left's max-width. The shirt banner is absolutely
     positioned on the right (see __right rule below) so the PNG can
     be much larger than its column would normally allow without
     pushing the headline. Mirrors the Gildan-promo pattern on the
     home page: image as background visual, text overlays with
     higher z-index. */
  display:block;
  min-height:340px;
}
body.page-marketplace .mkt-hero-v6__left{
  /* Tighter cap so the headline + buttons claim the left ~400px and
     leave a generous lane on the right for the (now much larger)
     shirt banner. Bumped down to give the shirts even more room. */
  max-width:400px;
  position:relative;
  z-index:2;
}

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;
}

/* ── Primary hero CTAs (Shop Best Sellers / Browse All Tees) ──────
   Replaced the trust badge list. Two-button cluster sized to read at
   a glance against the dark hero gradient. */
body.page-marketplace .mkt-hero-v6__cta-row{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:24px;
}
body.page-marketplace .mkt-hero-v6__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  border-radius:10px;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  border:1.5px solid transparent;
  white-space:nowrap;
}
body.page-marketplace .mkt-hero-v6__btn--primary{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(79,70,229,.55);
}
body.page-marketplace .mkt-hero-v6__btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px -10px rgba(79,70,229,.7);
  color:#fff;
}
body.page-marketplace .mkt-hero-v6__btn--ghost{
  background:rgba(255,255,255,0.07);
  color:#fff;
  border-color:rgba(255,255,255,0.4);
}
body.page-marketplace .mkt-hero-v6__btn--ghost:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.7);
  color:#fff;
}

/* Right-side banner image as overlay/backdrop element. Positioned
   absolutely so the PNG can be sized large without competing with
   the headline for grid space — same approach the Gildan 5000 promo
   on the home page uses. Sits on the right portion of the hero;
   text on the left has higher z-index so it's never hidden. */
body.page-marketplace .mkt-hero-v6__right{
  position:absolute;
  top:50%;
  /* Strong rightward spill so the lineup hugs (and bleeds past) the
     rounded right edge of the hero. Pushed further to -120px so the
     PNG fills more of the visual area at the larger size below. */
  right:-69px;
  transform:translateY(-50%);
  /* Image cell now claims ~78% of the hero width — text column is
     capped at 400px on the left so the two never crowd. */
  width:69%;
  max-width:1600px;
  z-index:1;
  pointer-events:none;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:0;
}
body.page-marketplace .mkt-hero-v6__banner-img{
  display:block;
  width:100%;
  /* Major size bump — was 1200px, now 1600px so the shirts dominate
     the right half. The PNG has a transparent background so the
     lineup blends into the off-white hero card without a hard
     rectangle around it. Capped at native asset size to avoid
     upscaling blur. */
  max-width:1600px;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Legacy showcase styles below kept for back-compat; the new layout
   doesn't render them, but other pages may share the class names. */
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{ min-height:0; }
  /* Below the desktop breakpoint the desktop absolute overlay stops
     working — the image would crowd the text. Drop the wrapper into
     normal flow under the copy column. The shirt lineup sizes to
     fill the column width (capped to keep it sensible on tablets)
     and centres under the headline. */
  body.page-marketplace .mkt-hero-v6__right{
    position:static; transform:none; width:100%; max-width:none;
    margin-top:32px; display:flex; justify-content:center; align-items:center;
    min-height:0; overflow:visible;
  }
  body.page-marketplace .mkt-hero-v6__banner-img{
    position:static; transform:none;
    display:block; width:100%; max-width:560px; height:auto;
    margin:0 auto;
  }
  body.page-marketplace .mkt-hero-v6__left{ max-width:none; }
  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__cta-row{ gap:10px; margin-top:20px; }
  body.page-marketplace .mkt-hero-v6__btn{ padding:12px 20px; font-size:14px; }
  /* Phone sizes: let the lineup fill the column edge-to-edge so the
     shirts read clearly. The previous 380px cap left a chunk of empty
     space at narrow viewports. */
  body.page-marketplace .mkt-hero-v6__right{ display:flex; margin-top:24px; }
  body.page-marketplace .mkt-hero-v6__banner-img{ max-width:none; width:100%; }
}

/* ── 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:10px;
  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:9px;
  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; }

/* New hero banner image is the primary visual on v6, not the legacy
   glass showcase — keep the right column visible. The display:none
   here was specifically suppressing the glass card; the PNG works
   on light backgrounds without modification. */
body.page-v6.page-marketplace .mkt-hero-v6__right{ display:flex; }

/* Ghost button needs a darker tone on v6's light hero background —
   white-on-white border was invisible. Primary stays branded purple. */
body.page-v6.page-marketplace .mkt-hero-v6__btn--ghost{
  background:#fff;
  color:#0f172a;
  border-color:#cbd5e1;
}
body.page-v6.page-marketplace .mkt-hero-v6__btn--ghost:hover{
  background:#f1f5f9;
  border-color:#94a3b8;
  color:#0f172a;
}

/* ============================================================
   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,
body.page-templates .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}
}

/* =====================================================================
   Explore Our Platform — 4-card overview rendered after the hero on
   the Start Selling homepage (/), hidden on /order-for-myself so the
   designer surfaces sooner. Markup lives in includes/main_v6.php under
   the `if ($__homepage_mode === 'sell')` gate.
   ---------------------------------------------------------------------
   Each card has its own brand colour (sell=green, market=lime,
   wholesale=violet, shops=teal) so they remain distinguishable when
   stacked vertically on mobile. Cards are anchor-tag links, so the
   whole tile is clickable.
   ===================================================================== */
/* =====================================================================
   Top announcement bar (homepage). Renders only when main_v6.php
   adds the `has-announcement` class to <body> AND outputs a
   .tg-announcement element. The bar sits position:fixed at top:0;
   the existing fixed site header is shifted down by its height, and
   body padding accounts for the combined height of bar + header so
   the page content still starts below them.
   ---------------------------------------------------------------------
   To hide on a per-page basis: omit the class + element. To swap the
   message: edit $__announcement in main_v6.php — supports HTML, so
   inline icons and emphasis work as written.
   ===================================================================== */
:root { --tg-announcement-h: 36px; }
.tg-announcement {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 600;
	height: var(--tg-announcement-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a0a14;
	color: #ffffff;
	font: 500 13px/1 Inter, system-ui, sans-serif;
	letter-spacing: 0.01em;
	padding: 0 16px;
}
.tg-announcement__inner {
	max-width: 1200px;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tg-announcement i {
	margin-right: 8px;
	color: #4ade80; /* soft green so the truck icon pops on the black */
}
.tg-announcement strong {
	font-weight: 700;
	color: #ffffff;
}
/* Push the fixed site header down by the bar's height, and extend the
   body padding so the hero starts below the combined chrome. */
body.has-announcement .tg-header { top: var(--tg-announcement-h); }
body.has-announcement { padding-top: calc(var(--tg-header-h) + var(--tg-announcement-h)); }

/* Mobile — keep the bar but shrink padding/font so the message fits a
   narrow viewport without truncation. */
@media (max-width: 560px) {
	:root { --tg-announcement-h: 32px; }
	.tg-announcement { font-size: 12px; padding: 0 10px; }
	.tg-announcement i { margin-right: 6px; }
}

/* =====================================================================
   Hero pill toggle — the clean 2-segment Start selling / Order for
   myself control that lives at the top of the hero (replaces the older
   4-card path-btn grid). Visual states cascade off body.mode-sell vs
   body.mode-buy so we don't have to manage selected/unselected classes
   on the buttons themselves — the JS click handler already flips the
   body's mode-* class on click of any .path-btn.
   ===================================================================== */
body.page-v6 .hero__toggle-wrap {
	display: flex;
	justify-content: center;
	padding: 28px 16px 0;
	margin: 0 auto;
}
body.page-v6 .hero__toggle-pill {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: 8px;
	box-shadow: 0 4px 14px rgba(15,23,42,0.06);
	max-width: 100%;
}
/* Sliding active indicator. Width = each segment's width
   (calc(50% - 8px) — 50% of the pill minus the 8px padding offset).
   translateX(100%) moves it by its own width, which equals one full
   segment, landing it precisely behind the buy button when the body
   flips to mode-buy. The cubic-bezier gives a smooth, slightly-eased
   slide rather than linear motion. */
body.page-v6 .toggle-pill__slider {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 8px;
	width: calc(50% - 8px);
	background: #0f172a;
	border-radius: 999px;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
	pointer-events: none;
}
body.page-v6.mode-sell .toggle-pill__slider { transform: translateX(0); }
body.page-v6.mode-buy  .toggle-pill__slider { transform: translateX(100%); }

/* Comfortably larger than the original 12/32 + 15px size so the pill
   anchors the hero on a now-white page, but dialed back from the
   first 22/56 + 20px pass which read a touch oversized. position:
   relative + z-index keep the labels above the sliding indicator.
   display:flex + justify-content:center forces the label to sit at
   the visual centre of the segment regardless of segment width — the
   default text-align:center on <button> is unreliable inside a grid
   cell when the cell width changes between modes. */
body.page-v6 .toggle-pill__btn {
	position: relative;
	z-index: 1;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 16px 44px;
	font: 600 17px/1 Inter, system-ui, sans-serif;
	color: #475569;
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: color 0.2s ease 0.05s, transform 0.05s ease;
}
body.page-v6 .toggle-pill__btn:hover { color: #0f172a; }
body.page-v6 .toggle-pill__btn:active { transform: translateY(1px); }
/* Active segment — driven by the body's mode class. Background is
   provided by the sliding indicator, so the button itself only needs
   to flip its text color to white when active (and stay white on
   hover so the underline-on-hover doesn't change colour mid-slide). */
body.page-v6.mode-sell .toggle-pill__btn--sell,
body.page-v6.mode-buy  .toggle-pill__btn--buy {
	color: #ffffff;
}
body.page-v6.mode-sell .toggle-pill__btn--sell:hover,
body.page-v6.mode-buy  .toggle-pill__btn--buy:hover {
	color: #ffffff;
}
/* Mobile — pill stays centred but each segment shrinks padding so
   the two labels fit a 360px viewport without wrapping. Top padding
   trimmed (toggle no longer sits a chunk below the header) and a real
   bottom gap added so the "Now printing in 24 hours" kicker has
   breathing room beneath the pill instead of butting against it. */
@media (max-width: 560px) {
	body.page-v6 .hero__toggle-wrap { padding: 8px 12px 22px; }
	body.page-v6 .toggle-pill__btn { padding: 12px 22px; font-size: 14px; }
}
@media (max-width: 380px) {
	body.page-v6 .hero__toggle-wrap { padding: 6px 10px 20px; }
	body.page-v6 .toggle-pill__btn { padding: 11px 18px; font-size: 13px; }
}

/* Mode-gated visibility — the toggle in the hero swaps the body's
   mode-* class via JS without changing the URL, so we render the
   block always and let CSS show/hide it. The Start Selling mode is
   the only one where this 4-card overview makes sense; in every
   other mode (buy / market / brand / wholesale) we collapse the
   section so the designer or the next promo block follows the hero
   immediately. */
body.page-v6 .explore-platform {
	background: var(--surface, #fff);
	/* Top padding halved (60→30) to tighten the gap between the
	   hero's trust strip ("No inventory needed") and this section's
	   "Explore Our Platform" kicker per the 2026-04-24 review. */
	padding: 30px 0 50px;
	border-bottom: 1px solid var(--line, #e5e7eb);
}
body.page-v6:not(.mode-sell) .explore-platform { display: none; }
body.page-v6 .explore-platform__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
body.page-v6 .explore-platform__head {
	text-align: center;
	margin: 0 auto 40px;
	max-width: 720px;
}
body.page-v6 .explore-platform__kicker {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--text-mute, #475569);
	text-transform: none;
	margin-bottom: 8px;
}
body.page-v6 .explore-platform__title {
	font-size: 34px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--text, #0f172a);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}
body.page-v6 .explore-platform__highlight {
	color: var(--brand, #16a34a);
}
body.page-v6 .explore-platform__lead {
	font-size: 15px;
	color: var(--text-mute, #475569);
	margin: 0;
}

/* 4-up grid — auto-fits down to 2-up at tablet and 1-up at phone via
   the breakpoint blocks below. minmax(0,1fr) prevents long words from
   blowing out the column width. */
body.page-v6 .explore-platform__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* Card — anchor tag so the whole tile is clickable. */
body.page-v6 .ep-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 14px;
	padding: 22px 20px 18px;
	color: var(--text, #0f172a);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-v6 .ep-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
	border-color: transparent;
}

/* Coloured icon tile — each card uses a different brand accent so the
   four tiles read as distinct destinations rather than a quartet of
   matching boxes. */
body.page-v6 .ep-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	margin-bottom: 16px;
}
body.page-v6 .ep-card--sell      .ep-card__icon { background: #16a34a; }
/* Marketplace tile picks up the same purple as /marketplace
   (var(--mode-market) = #7c3aed) so the card mirrors the brand
   colour the visitor lands on after clicking "Shop marketplace". */
body.page-v6 .ep-card--market    .ep-card__icon { background: #7c3aed; }
/* Wholesale Hub tile picks up the same orange as /wholesale
   (var(--orange) = #e67300). */
body.page-v6 .ep-card--wholesale .ep-card__icon { background: #e67300; }
body.page-v6 .ep-card--shops     .ep-card__icon { background: #0891b2; }

/* Custom Tshirtgang logo silhouette inside the marketplace +
   wholesale tiles. Each card uses its dedicated SVG variant — the
   same files referenced earlier in this stylesheet for the header
   logo on /marketplace and /wholesale (search "tshirtgang3-…-inner"
   above). The SVG is applied as a mask so the silhouette inherits
   whatever `background:` the inner span carries (white here, which
   renders the logo on the brand-coloured tile). Centered + sized to
   ~60% of the tile so the icon has comfortable breathing room. */
body.page-v6 .ep-card__icon-inner {
	display: block;
	width: 60%;
	height: 60%;
	background: #ffffff;
}
body.page-v6 .ep-card--market .ep-card__icon-inner {
	-webkit-mask: url('/images/tshirtgang3-marketplace-inner.svg') no-repeat center / contain;
	        mask: url('/images/tshirtgang3-marketplace-inner.svg') no-repeat center / contain;
}
body.page-v6 .ep-card--wholesale .ep-card__icon-inner {
	-webkit-mask: url('/images/tshirtgang3-wholesale-inner.svg') no-repeat center / contain;
	        mask: url('/images/tshirtgang3-wholesale-inner.svg') no-repeat center / contain;
}

/* PNG-backed tile icons (Creators uses /images/creators-icon.png).
   The image lives inside the same rounded coloured square as the
   FA glyph and SVG-mask variants, so cap it to ~60% of the box for
   the same breathing room. */
body.page-v6 .ep-card__icon-img {
	display: block;
	width: 60%;
	height: 60%;
	object-fit: contain;
}

body.page-v6 .ep-card__title {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--text, #0f172a);
	letter-spacing: -0.01em;
}
body.page-v6 .ep-card__copy {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-mute, #475569);
	margin: 0 0 16px;
}

/* Feature list — stays compact so all four cards stay vertically
   aligned at desktop. The check icons inherit per-card accent colour. */
body.page-v6 .ep-card__features {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	color: var(--text, #0f172a);
}
body.page-v6 .ep-card__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
body.page-v6 .ep-card__features li i {
	font-size: 11px;
	color: #16a34a;
}
/* Feature-list check colours track each card's tile colour so the card
   reads as a single brand unit. Marketplace = purple, Wholesale =
   orange (matching /marketplace and /wholesale respectively). */
body.page-v6 .ep-card--market    .ep-card__features li i { color: #7c3aed; }
body.page-v6 .ep-card--wholesale .ep-card__features li i { color: #e67300; }
body.page-v6 .ep-card--shops     .ep-card__features li i { color: #0891b2; }

/* CTA pill — sits at the bottom of every card. margin-top:auto pins it
   to the card's bottom edge regardless of copy length so all four CTAs
   line up across the row. */
body.page-v6 .ep-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease;
}
body.page-v6 .ep-card--sell      .ep-card__cta { background: #0f172a; color: #fff; }
/* Marketplace + Wholesale CTAs use a soft tint of the card's brand
   colour with the dark variant as the foreground — matches the soft-
   tint pattern --mode-market-soft (#efe3f7) and --orange-soft style
   used elsewhere on /marketplace and /wholesale. */
body.page-v6 .ep-card--market    .ep-card__cta { background: #efe3f7; color: #6d28d9; }
body.page-v6 .ep-card--wholesale .ep-card__cta { background: #fde1c4; color: #c56100; }
body.page-v6 .ep-card--shops     .ep-card__cta { background: #cffafe; color: #0e7490; }
body.page-v6 .ep-card:hover .ep-card__cta { filter: brightness(1.04); }

/* Tablet — 2-up grid, smaller heading, less vertical breathing room. */
@media (max-width: 980px) {
	body.page-v6 .explore-platform__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.page-v6 .explore-platform__title { font-size: 28px; }
	/* Top padding halved (48→24) to keep the same tighter rhythm
	   as desktop on tablet viewports. */
	body.page-v6 .explore-platform { padding: 24px 0 40px; }
}

/* Phone — single column. CTA stays full-width inside the card. */
@media (max-width: 560px) {
	body.page-v6 .explore-platform__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	body.page-v6 .explore-platform__title { font-size: 24px; }
	body.page-v6 .explore-platform__head { margin-bottom: 28px; }
	body.page-v6 .ep-card { padding: 20px; }
	body.page-v6 .ep-card__icon { width: 48px; height: 48px; font-size: 20px; }
	body.page-v6 .ep-card__title { font-size: 17px; }
}


/* ═══════════════════════════════════════════════════════════════════
   FAQ page — v6 redesign
   Hero with search + category quick-link chips, then one card per
   FAQ_Category containing native <details> accordions for each Q&A.
   ═══════════════════════════════════════════════════════════════════ */
body.page-v6.page-faq .faq-hero{
  background:var(--surface);padding:60px 0 36px;
  border-bottom:1px solid var(--line);text-align:center;
}
body.page-v6.page-faq .faq-hero h1{
  font-size:46px;font-weight:900;color:var(--text);
  margin:0 0 12px;letter-spacing:-.02em;
}
body.page-v6.page-faq .faq-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-faq .faq-hero__lead{
  font-size:17px;color:var(--text-mute);margin:0 auto;max-width:620px;
}
body.page-v6.page-faq .faq-search{
  display:flex;align-items:center;gap:8px;
  max-width:560px;margin:26px auto 18px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 6px 6px 18px;
  box-shadow:0 2px 6px rgba(15,23,42,.04);
  position:relative;
}
body.page-v6.page-faq .faq-search > i{
  color:#94a3b8;font-size:14px;flex:0 0 auto;
}
body.page-v6.page-faq .faq-search input[type="search"]{
  flex:1 1 auto;border:0;outline:0;background:transparent;
  font-size:15px;color:var(--text);min-width:0;
  padding:8px 4px;
}
body.page-v6.page-faq .faq-search button{
  flex:0 0 auto;border:0;border-radius:999px;
  padding:10px 22px;font-weight:700;font-size:14px;cursor:pointer;
}
body.page-v6.page-faq .faq-cats{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:16px auto 0;max-width:780px;
}
body.page-v6.page-faq .faq-cats__chip{
  display:inline-flex;align-items:center;
  background:#fff;border:1px solid var(--line);
  color:var(--text);text-decoration:none;
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;
  transition:border-color .15s, color .15s, background .15s;
}
body.page-v6.page-faq .faq-cats__chip:hover{
  border-color:var(--brand);color:var(--brand);background:var(--brand-soft,#eef5fa);
}

body.page-v6.page-faq .faq-body{padding:42px 0 60px}
/* Match the header wrap (1440px). Cards still feel comfortable on
   wide screens because each card has its own internal padding and
   the .faq-list inside caps measure-width on long answers. */
body.page-v6.page-faq .faq-body .wrap{max-width:1440px}
body.page-v6.page-faq .faq-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 26px;margin-bottom:22px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
body.page-v6.page-faq .faq-card__head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:8px;
}
body.page-v6.page-faq .faq-card__head h3{
  margin:0;font-size:20px;font-weight:800;color:var(--text);
}
body.page-v6.page-faq .faq-card__clear{
  font-size:13px;color:var(--text-mute);text-decoration:none;
}
body.page-v6.page-faq .faq-card__clear:hover{color:var(--brand)}
body.page-v6.page-faq .faq-empty{
  margin:8px 0 0;color:var(--text-mute);font-size:14px;
}
body.page-v6.page-faq .faq-list{display:flex;flex-direction:column}
body.page-v6.page-faq .faq-item{
  border-bottom:1px solid #f1f5f9;
}
body.page-v6.page-faq .faq-item:last-child{border-bottom:0}
body.page-v6.page-faq .faq-item > summary{
  display:flex;align-items:center;gap:12px;
  cursor:pointer;list-style:none;
  padding:14px 0;font-weight:600;color:var(--text);font-size:15px;
}
body.page-v6.page-faq .faq-item > summary::-webkit-details-marker{display:none}
body.page-v6.page-faq .faq-item__cat{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-mute);background:#f1f5f9;padding:3px 8px;border-radius:6px;
  flex:0 0 auto;
}
body.page-v6.page-faq .faq-item__title{flex:1 1 auto}
body.page-v6.page-faq .faq-item__chev{
  flex:0 0 auto;color:#94a3b8;font-size:12px;
  transition:transform .2s ease;
}
body.page-v6.page-faq .faq-item[open] > summary .faq-item__chev{transform:rotate(180deg)}
body.page-v6.page-faq .faq-item__body{
  padding:0 0 18px 0;color:var(--text);font-size:14.5px;line-height:1.6;
}
body.page-v6.page-faq .faq-item__body a{color:var(--brand);text-decoration:underline}

@media(max-width:640px){
  body.page-v6.page-faq .faq-hero h1{font-size:32px}
  body.page-v6.page-faq .faq-card{padding:18px}
  body.page-v6.page-faq .faq-search button .btn-text{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   Custom GPTs page — v6 redesign
   Hero + responsive card grid, each card linking to its GPT.
   ═══════════════════════════════════════════════════════════════════ */
body.page-v6.page-customgpt .cgpt-hero{
  background:var(--surface);padding:60px 0 40px;
  border-bottom:1px solid var(--line);text-align:center;
}
body.page-v6.page-customgpt .cgpt-hero h1{
  font-size:46px;font-weight:900;color:var(--text);
  margin:0 0 12px;letter-spacing:-.02em;
}
body.page-v6.page-customgpt .cgpt-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-customgpt .cgpt-hero__lead{
  font-size:17px;color:var(--text-mute);margin:0 auto;max-width:640px;
}
body.page-v6.page-customgpt .cgpt-hero__cta{
  display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap;
}

body.page-v6.page-customgpt .cgpt-body{padding:50px 0 64px}
body.page-v6.page-customgpt .cgpt-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
body.page-v6.page-customgpt .cgpt-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px;text-decoration:none;color:inherit;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
body.page-v6.page-customgpt .cgpt-card:hover{
  border-color:var(--brand);
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  transform:translateY(-2px);
}
body.page-v6.page-customgpt .cgpt-card__icon{
  width:54px;height:54px;border-radius:14px;
  background:var(--brand-soft,#eef5fa);
  display:grid;place-items:center;margin-bottom:14px;
}
body.page-v6.page-customgpt .cgpt-card__icon img{
  max-width:36px;max-height:36px;object-fit:contain;
}
body.page-v6.page-customgpt .cgpt-card__icon i{
  font-size:24px;color:var(--brand);
}
body.page-v6.page-customgpt .cgpt-card__title{
  font-size:17px;font-weight:800;color:var(--text);margin:0 0 6px;
}
body.page-v6.page-customgpt .cgpt-card__desc{
  font-size:14px;color:var(--text-mute);margin:0 0 14px;
  line-height:1.5;flex:1 1 auto;
}
body.page-v6.page-customgpt .cgpt-card__cta{
  font-size:13px;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
}
body.page-v6.page-customgpt .cgpt-card__cta i{font-size:11px}

@media(max-width:640px){
  body.page-v6.page-customgpt .cgpt-hero h1{font-size:32px}
}

/* ═══════════════════════════════════════════════════════════════════
   Contact Us page — v6 redesign
   Hero + two-column body (form on left, info cards on right).
   ═══════════════════════════════════════════════════════════════════ */
body.page-v6.page-contact .contact-hero,
body.page-v6.page-returns .contact-hero,
body.page-v6.page-photoshop .contact-hero,
body.page-v6.page-designguide .contact-hero{
  background:var(--surface);padding:60px 0 36px;
  border-bottom:1px solid var(--line);text-align:center;
}
body.page-v6.page-contact .contact-hero h1,
body.page-v6.page-returns .contact-hero h1,
body.page-v6.page-photoshop .contact-hero h1,
body.page-v6.page-designguide .contact-hero h1{
  font-size:46px;font-weight:900;color:var(--text);
  margin:0 0 12px;letter-spacing:-.02em;
}
body.page-v6.page-contact .contact-hero h1 em,
body.page-v6.page-returns .contact-hero h1 em,
body.page-v6.page-photoshop .contact-hero h1 em,
body.page-v6.page-designguide .contact-hero h1 em{font-style:italic;color:var(--brand)}
body.page-v6.page-contact .contact-hero__lead,
body.page-v6.page-returns .contact-hero__lead,
body.page-v6.page-photoshop .contact-hero__lead,
body.page-v6.page-designguide .contact-hero__lead{
  font-size:17px;color:var(--text-mute);margin:0 auto;max-width:620px;
}

body.page-v6.page-contact .contact-body,
body.page-v6.page-returns .contact-body,
body.page-v6.page-photoshop .contact-body,
body.page-v6.page-designguide .contact-body{padding:42px 0 60px}

/* Policy / legal document chrome — reusable across /returns, /terms,
   /privacy, /ipinfringement, etc. Centered single-column reading
   width (760px) with sectioned cards, OK/NO bullet lists, and a
   CTA-card at the foot for "open a ticket if you have an issue". */
body.page-v6 .legal-doc{max-width:760px;margin:0 auto}
body.page-v6 .legal-section{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
body.page-v6 .legal-section h2{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;color:var(--text);
  margin:0 0 12px;letter-spacing:-.01em;
}
body.page-v6 .legal-section__icon{
  font-size:18px;color:var(--brand);
}
body.page-v6 .legal-section p{
  font-size:15px;line-height:1.65;color:#334155;margin:0 0 12px;
}
body.page-v6 .legal-section p:last-child{margin-bottom:0}
body.page-v6 .legal-section a{
  color:var(--brand);text-decoration:underline;font-weight:600;
}
body.page-v6 .legal-list{
  list-style:none;margin:8px 0 0;padding:0;
}
body.page-v6 .legal-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-top:1px solid #f1f5f9;
  font-size:14px;line-height:1.55;color:#334155;
}
body.page-v6 .legal-list li:first-child{border-top:0;padding-top:4px}
body.page-v6 .legal-list i{
  flex:0 0 18px;margin-top:3px;
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;color:#fff;
}
body.page-v6 .legal-list--ok i{background:#10b981}
body.page-v6 .legal-list--no i{background:#ef4444}
body.page-v6 .legal-note{
  display:flex;gap:10px;align-items:flex-start;
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;
  padding:10px 14px;border-radius:10px;
  font-size:14px;line-height:1.55;
}
body.page-v6 .legal-note > i{color:#ea580c;margin-top:3px}
body.page-v6 .legal-note--muted{
  background:#f8fafc;border-color:#e2e8f0;color:#475569;
}
body.page-v6 .legal-note--muted > i{color:#64748b}
body.page-v6 .legal-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:22px 26px;margin-top:8px;
}
body.page-v6 .legal-cta h3{
  margin:0 0 4px;font-size:18px;font-weight:800;color:var(--text);
}
body.page-v6 .legal-cta p{margin:0;color:var(--text-mute);font-size:14px}
@media(max-width:640px){
  body.page-v6 .legal-cta{flex-direction:column;align-items:stretch;text-align:left}
  body.page-v6 .legal-cta .btn{justify-content:center}
}

/* Wider variant of .legal-doc used by tutorial pages where full-width
   inline figures make the 760px reading column feel cramped. */
body.page-v6 .legal-doc--wide{max-width:880px}
/* Full-bleed variant — matches the header's 1440px wrap width.
   Used on /returns so the policy cards line up with the header
   instead of sitting in a narrow column. The inside .legal-section
   text still reads comfortably because cards span the full width
   and break their internal content into multi-column lists at the
   wider breakpoint below. */
body.page-v6 .legal-doc--full{max-width:1440px}
@media(min-width:900px){
  body.page-v6 .legal-doc--full .legal-list{
    column-count:2;column-gap:24px;
  }
  body.page-v6 .legal-doc--full .legal-list li{
    break-inside:avoid;
  }
}

/* Step rail at the top of multi-step tutorial pages (/tutorials/...).
   Pill chips link to anchors inside the article — clicking jumps to
   that section. Sticky-position keeps them in view while scrolling
   through the long-form steps below. */
body.page-v6 .tutorial-steps{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 auto 22px;max-width:880px;
  padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  position:sticky;top:calc(var(--tg-header-h,66px) + 8px);z-index:5;
}
body.page-v6 .tutorial-steps__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 8px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:999px;
  font-weight:600;font-size:13px;text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
body.page-v6 .tutorial-steps__chip:hover{background:#eef2f7;border-color:#cbd5e1}
body.page-v6 .tutorial-steps__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:12px;font-weight:800;
}
/* Full-bleed variant — pairs with .legal-doc--full so the sticky
   step rail matches the header's 1440px wrap width. */
body.page-v6 .tutorial-steps--full{max-width:1440px}

/* Inline figure container for tutorial / how-to images. Centered with
   subtle frame so screenshots read as embedded reference shots rather
   than full-bleed marketing imagery. */
body.page-v6 .tutorial-figure{
  margin:0 0 16px;padding:14px;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;
  text-align:center;
}
body.page-v6 .tutorial-figure img{
  max-width:100%;height:auto;border-radius:6px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}

/* Design guide — card grid of product file specs. Each card is a
   self-contained block with title, dl spec table, and one or more
   download buttons. Two columns above 720px, single column below. */
body.page-v6 .guide-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;margin-bottom:22px;
}
@media(max-width:720px){
  body.page-v6 .guide-grid{grid-template-columns:1fr}
}
body.page-v6 .guide-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
body.page-v6 .guide-card__head{display:flex;align-items:center;gap:12px}
body.page-v6 .guide-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;
  background:#eff6ff;color:var(--brand);font-size:16px;flex:0 0 36px;
}
body.page-v6 .guide-card__head h2{
  margin:0;font-size:16px;font-weight:800;color:var(--text);line-height:1.35;
}
body.page-v6 .guide-card__specs{
  margin:0;display:grid;grid-template-columns:max-content 1fr;
  row-gap:6px;column-gap:14px;font-size:13.5px;
}
body.page-v6 .guide-card__specs dt{
  color:var(--text-mute);font-weight:600;
}
body.page-v6 .guide-card__specs dd{
  margin:0;color:var(--text);font-weight:500;
}
body.page-v6 .guide-card__dl-row{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;
}
body.page-v6 .guide-card__dl{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:var(--brand);color:#fff;
  border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none;
  margin-top:auto;
  /* `.guide-card` is a flex column with default align-items:stretch,
     which stretches a lone <a class="guide-card__dl"> to the full
     card width. align-self:flex-start clamps the lone button to its
     content size — same visual weight as the Template+Design-guide
     row above, no more accidental full-width pills. Inside a
     .guide-card__dl-row the row's own width controls things, so this
     rule doesn't disrupt the pair-button layout. */
  align-self:flex-start;
  transition:background .15s ease;
}
body.page-v6 .guide-card__dl:hover{background:var(--brand-dark, #1e40af)}
body.page-v6 .guide-card__dl--ghost{
  background:#fff;color:var(--text);border:1px solid var(--line);
}
body.page-v6 .guide-card__dl--ghost:hover{background:#f1f5f9;color:var(--text)}
body.page-v6.page-contact .contact-callout{
  display:flex;gap:14px;align-items:flex-start;
  background:#eef5fa;border:1px solid #cfe3ee;color:#0b3d56;
  padding:14px 18px;border-radius:12px;margin-bottom:22px;
  font-size:14px;line-height:1.5;
}
body.page-v6.page-contact .contact-callout > i{font-size:18px;color:var(--brand);margin-top:2px}
body.page-v6.page-contact .contact-callout a{
  color:var(--brand);text-decoration:underline;font-weight:600;
}
body.page-v6.page-contact .contact-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;
}
@media(max-width:820px){
  body.page-v6.page-contact .contact-grid{grid-template-columns:1fr}
}
body.page-v6.page-contact .contact-formcol h2{
  font-size:22px;font-weight:800;color:var(--text);margin:0 0 16px;
}
body.page-v6.page-contact .contact-form{
  display:flex;flex-direction:column;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px;box-shadow:0 1px 0 rgba(15,23,42,.03);
}
body.page-v6.page-contact .contact-field{display:flex;flex-direction:column;gap:6px}
body.page-v6.page-contact .contact-field label{
  font-size:13px;font-weight:600;color:var(--text);
}
body.page-v6.page-contact .contact-form .input,
body.page-v6.page-contact .contact-form input[type="text"],
body.page-v6.page-contact .contact-form input[type="email"],
body.page-v6.page-contact .contact-form select,
body.page-v6.page-contact .contact-form textarea{
  width:100%;box-sizing:border-box;
  padding:10px 12px;font-size:14px;
  border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);
  font-family:inherit;
}
body.page-v6.page-contact .contact-form input:focus,
body.page-v6.page-contact .contact-form select:focus,
body.page-v6.page-contact .contact-form textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(2,80,119,.12);
}
body.page-v6.page-contact .contact-form textarea{min-height:160px;resize:vertical}
body.page-v6.page-contact .contact-actions{margin-top:6px}
body.page-v6.page-contact .contact-actions .btn{padding:12px 22px;font-weight:700}

body.page-v6.page-contact .contact-sidecol{display:flex;flex-direction:column;gap:14px}
body.page-v6.page-contact .contact-info-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
body.page-v6.page-contact .contact-info-card h3{
  display:flex;align-items:center;gap:8px;
  margin:0 0 8px;font-size:15px;font-weight:800;color:var(--text);
}
body.page-v6.page-contact .contact-info-card h3 i{color:var(--brand);font-size:14px}
body.page-v6.page-contact .contact-info-card p{
  margin:0 0 6px;color:var(--text-mute);font-size:14px;line-height:1.5;
}
body.page-v6.page-contact .contact-info-card__link{
  display:inline-block;margin-top:4px;color:var(--brand);
  font-size:13px;font-weight:700;text-decoration:none;
}
body.page-v6.page-contact .contact-info-card__link:hover{text-decoration:underline}

body.page-v6.page-contact .contact-notice{
  border-radius:10px;padding:14px 18px;margin-bottom:20px;
  border:1px solid;
}
body.page-v6.page-contact .contact-notice h4{margin:0 0 4px;font-size:15px;font-weight:700}
body.page-v6.page-contact .contact-notice p{margin:0;font-size:14px;line-height:1.5}
body.page-v6.page-contact .contact-notice--success{
  background:#ecfdf5;border-color:#a7f3d0;color:#065f46;
}
body.page-v6.page-contact .contact-notice--error{
  background:#fef2f2;border-color:#fecaca;color:#991b1b;
}

@media(max-width:640px){
  body.page-v6.page-contact .contact-hero h1{font-size:32px}
  body.page-v6.page-contact .contact-form{padding:18px}
}

/* ═══════════════════════════════════════════════════════════════════
   Password reset — v6 redesign
   Single centred card with hero chip, headline, lead, contextual
   form (email entry OR new-password), inline notice strip, and a
   small footer of secondary links. Same chrome whether the user
   landed on /passwordreset or /passwordreset/{token} — only the
   form swaps.
   ═══════════════════════════════════════════════════════════════════ */
body.page-v6.page-pwreset .pwreset-hero{
  background:var(--surface);padding:60px 0;border-bottom:1px solid var(--line);
  min-height:60vh;display:flex;align-items:center;
}
body.page-v6.page-pwreset .pwreset-wrap{max-width:520px}

body.page-v6.page-pwreset .pw-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:32px 30px;box-shadow:0 4px 20px rgba(15,23,42,.06);
}
body.page-v6.page-pwreset .pw-card__head{text-align:center;margin-bottom:22px}
body.page-v6.page-pwreset .pw-card__head h1{
  font-size:28px;font-weight:900;color:var(--text);
  margin:14px 0 8px;letter-spacing:-.01em;
}
body.page-v6.page-pwreset .pw-card__lead{
  color:var(--text-mute);font-size:14.5px;line-height:1.5;margin:0;
}
body.page-v6.page-pwreset .pw-card__head .pricing-hero__chip{margin-bottom:0}

body.page-v6.page-pwreset .pw-card__notice{
  border-radius:10px;padding:12px 14px;margin:0 0 18px;
  border:1px solid;font-size:14px;line-height:1.5;
}
body.page-v6.page-pwreset .pw-card__notice a{
  color:inherit;text-decoration:underline;font-weight:600;
}
body.page-v6.page-pwreset .pw-card__notice--success{
  background:#ecfdf5;border-color:#a7f3d0;color:#065f46;
}
body.page-v6.page-pwreset .pw-card__notice--error{
  background:#fef2f2;border-color:#fecaca;color:#991b1b;
}

body.page-v6.page-pwreset .pw-form{display:flex;flex-direction:column;gap:14px}
body.page-v6.page-pwreset .pw-field{display:flex;flex-direction:column;gap:6px}
body.page-v6.page-pwreset .pw-field label{
  font-size:13px;font-weight:600;color:var(--text);
}
body.page-v6.page-pwreset .pw-field__hint{
  font-size:12px;color:var(--text-mute);
}
body.page-v6.page-pwreset .pw-form input[type="email"],
body.page-v6.page-pwreset .pw-form input[type="password"]{
  width:100%;box-sizing:border-box;
  padding:11px 13px;font-size:14px;
  border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);font-family:inherit;
}
body.page-v6.page-pwreset .pw-form input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(2,80,119,.12);
}
body.page-v6.page-pwreset .pw-field--turnstile{align-items:center;margin-top:4px}
body.page-v6.page-pwreset .pw-form__submit{
  margin-top:6px;padding:13px 20px;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}

body.page-v6.page-pwreset .pw-card__foot{
  text-align:center;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--text-mute);
}
body.page-v6.page-pwreset .pw-card__link{
  color:var(--brand);font-weight:600;text-decoration:none;
}
body.page-v6.page-pwreset .pw-card__link:hover{text-decoration:underline}
body.page-v6.page-pwreset .pw-card__sep{margin:0 8px;color:#cbd5e1}

@media(max-width:520px){
  body.page-v6.page-pwreset .pw-card{padding:22px 20px}
  body.page-v6.page-pwreset .pw-card__head h1{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════
   Gildan 5000 promo — sell-mode replacement for the designer canvas
   on the front-page Sell tab. Hidden by default via .only-sell, and
   the existing body.mode-sell .only-sell{display:block} rule above
   shows it only when the Sell tab is active.
   ═══════════════════════════════════════════════════════════════════ */
/* Outer section uses the same 1440px wrap pattern as .tg-header so
   the banner aligns edge-for-edge with the navigation above it. */
body.page-v6 .gildan-promo{
  display:none;
  max-width:1440px;
  margin:32px auto;padding:0 36px;
}
body.page-v6.mode-sell .gildan-promo{
  display:block;
}
body.page-v6 .gildan-promo__inner{
  position:relative;
  display:grid;
  /* Visual column wider so the shirt lineup covers more area —
     copy column gets just enough room for the headline + CTA. */
  grid-template-columns:minmax(280px, 0.9fr) minmax(360px, 2fr);
  align-items:center;
  gap:0;
  background:linear-gradient(135deg,#0b1f33 0%,#0f2a44 100%);
  border-radius:18px;
  overflow:hidden;
  height:180px;
  box-shadow:0 14px 40px rgba(11,31,51,.15);
}
body.page-v6 .gildan-promo__copy{
  padding:18px 24px;color:#ffffff;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  height:100%;justify-content:center;
  box-sizing:border-box;
  /* Sit on top of the visual on the right so the headline never
     gets cropped by it. */
  position:relative;z-index:1;
}
/* Two-column inner row: kicker on the left, $3.50 floating to the
   right. Keeps them visually anchored as a single headline unit
   instead of stacking and stealing vertical room from the lead/CTA. */
body.page-v6 .gildan-promo__head{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
}
body.page-v6 .gildan-promo__kicker{
  font-size:14px;font-weight:900;letter-spacing:.04em;line-height:1.1;
  text-transform:uppercase;color:#ffffff;
  white-space:nowrap;
}
body.page-v6 .gildan-promo__price{
  font-size:38px;font-weight:900;line-height:1;
  color:#22c55e;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
body.page-v6 .gildan-promo__lead{
  margin:0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.85);
  max-width:320px;
}
/* CTA recoloured 2026-05-01 from forest green → wholesale orange so the
   button reads as a hand-off into the wholesale section. Uses the same
   --orange/--orange-dark CSS vars the rest of the wholesale UI uses
   (logo accent, hero kicker, path button) so any future palette tweak
   carries through here automatically. Shadow tinted to match. */
body.page-v6 .gildan-promo__cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:8px;
  background:var(--orange);color:#fff;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  transition:background .15s,transform .08s;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 10px rgba(197,97,0,.32);
}
body.page-v6 .gildan-promo__cta:hover{background:var(--orange-dark)}
body.page-v6 .gildan-promo__cta:active{transform:translateY(1px)}
body.page-v6 .gildan-promo__cta i{font-size:12px}

/* Visual cell hosts the new banner_blank_shirts.png. The asset is
   wider/taller than the cell, so we use object-fit:cover and let
   overflow:hidden on the parent crop the spillover — it's okay
   for some of the image to be hidden (per user note). object-position
   biases to the right so the shirt lineup fills toward the badge
   side; the absolutely-positioned promo__inner clips at its rounded
   corners thanks to the overflow:hidden on the inner wrapper. */
body.page-v6 .gildan-promo__visual{
  position:relative;
  height:100%;
  align-self:stretch;
  overflow:hidden;
  display:flex;align-items:center;justify-content:flex-end;
}
body.page-v6 .gildan-promo__visual img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  /* Bias the cover crop toward the upper portion of the photo so the
     collars + necklines sit inside the visible window instead of being
     trimmed by the default center-center crop. 25% means the visible
     band starts a quarter of the way down from the image's top — keeps
     the shirts' tops in frame across the row. */
  object-position:center 25%;
  /* Nudge the rendered image down by 10px so the shirts sit slightly
     below the banner's top edge (was 30px, which cut into the necklines
     that are now made visible by object-position above). */
  transform:translateY(10px);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.25));
}

/* Green pill badge — solid forest green, sits in the upper-right
   instead of dead-center so it doesn't overlap the shirt collars. */
body.page-v6 .gildan-promo__badge{
  position:absolute;top:18px;right:20px;
  width:112px;height:112px;border-radius:50%;
  background:#15803d;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;font-weight:900;line-height:1.1;
  box-shadow:0 8px 22px rgba(20,83,45,.45);
}
body.page-v6 .gildan-promo__badge strong{
  display:block;font-size:15px;letter-spacing:.04em;
}
body.page-v6 .gildan-promo__badge small{
  display:block;margin-top:4px;
  font-size:10px;font-weight:700;letter-spacing:.08em;
  opacity:.92;
}

/* ── Responsive ─────────────────────────────────────────────────────
   Tablet: keep two-column but shrink the badge so it doesn't crash
   into the $3.50 price on narrower viewports.
   Phone: go truly full-width (kill the section margin/padding and
   inner border-radius), stack copy over visual, drop the badge.
   ──────────────────────────────────────────────────────────────── */
@media (max-width:960px){
  body.page-v6 .gildan-promo{padding:0 16px}
  body.page-v6 .gildan-promo__inner{
    grid-template-columns:minmax(220px, 1fr) minmax(260px, 1.4fr);
    height:auto;min-height:180px;
  }
  body.page-v6 .gildan-promo__copy{padding:18px 18px;gap:8px}
  body.page-v6 .gildan-promo__head{flex-wrap:wrap;gap:10px}
  body.page-v6 .gildan-promo__price{font-size:34px}
  body.page-v6 .gildan-promo__lead{font-size:12px;max-width:none}
  body.page-v6 .gildan-promo__badge{
    width:88px;height:88px;right:12px;top:14px;
  }
  body.page-v6 .gildan-promo__badge strong{font-size:12px}
  body.page-v6 .gildan-promo__badge small{font-size:8px;margin-top:2px}
}
/* ── Mobile layout (≤720px) ─────────────────────────────────────────
   Natural stack: copy column on top (kicker + $3.50 inline on the
   first row, lead below, Shop Now CTA beneath), then the shirt strip
   below. No absolute positioning — everything flows normally inside
   .gildan-promo__copy.
   ──────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  body.page-v6 .gildan-promo{
    margin:16px 0;
    padding:0;
    max-width:100%;
  }
  body.page-v6 .gildan-promo__inner{
    grid-template-columns:1fr;
    height:auto;
    border-radius:0;
    box-shadow:0 6px 18px rgba(11,31,51,.12);
  }
  body.page-v6 .gildan-promo__copy{
    padding:22px 20px 22px;
    align-items:flex-start;
    gap:12px;
  }
  body.page-v6 .gildan-promo__head{
    /* Kicker + price share one row, baseline-aligned. */
    display:flex;flex-direction:row;align-items:baseline;
    gap:12px;flex-wrap:nowrap;
  }
  body.page-v6 .gildan-promo__kicker{font-size:13px}
  body.page-v6 .gildan-promo__price{
    /* Trim down so "GILDAN 5000 AS LOW AS  $3.50" fits one line on
       a 360–390px viewport without wrapping. */
    font-size:32px;line-height:1;
    position:static;margin:0;
  }
  body.page-v6 .gildan-promo__lead{font-size:13px;max-width:none}
  body.page-v6 .gildan-promo__cta{
    /* Sits at the bottom of the dark copy column, above the shirts.
       Shadow tint kept in sync with the desktop orange recolour above. */
    position:static;
    padding:11px 22px;font-size:14px;
    align-self:flex-start;
    box-shadow:0 4px 10px rgba(197,97,0,.32),0 1px 0 rgba(255,255,255,.18) inset;
  }
  body.page-v6 .gildan-promo__visual{
    height:170px;
    justify-content:center;
  }
  body.page-v6 .gildan-promo__visual img{
    object-position:center 30%;
    /* Reset the desktop translateY(30px) so the shirts fill the
       mobile visual cell and don't clip below the bottom edge. */
    transform:none;
  }
  body.page-v6 .gildan-promo__badge{display:none}
}
@media (max-width:420px){
  body.page-v6 .gildan-promo__copy{padding:18px 16px 18px;gap:10px}
  body.page-v6 .gildan-promo__head{gap:10px}
  body.page-v6 .gildan-promo__price{font-size:28px}
  body.page-v6 .gildan-promo__cta{padding:10px 18px;font-size:13px}
  body.page-v6 .gildan-promo__visual{height:150px}
}

/* =====================================================================
   Marketplace product detail — width parity with header + new media-
   column layout (image → trust strip → tabs in left column).
   ===================================================================== */
/* Width: header is max-width 1440px; bring the product page to match
   so the catalogue grid pages can stay 1280px without affecting this
   detail view. .wrap--marketplace is shared between both. */
body.page-v6.page-marketplace-product main.wrap--marketplace,
body.page-v6.page-marketplace main.wrap--marketplace{
  max-width:1440px;
}

/* Colour label inline variant — wraps the value in the same span as
   the label so "Colour: Black" sits at the start of the row instead
   of the value being pushed to the far right by space-between. */
body.page-v6.page-marketplace-product .mkt-pinfo__opt-label--inline{
  justify-content:flex-start;
}
body.page-v6.page-marketplace-product .mkt-pinfo__opt-label--inline .mkt-pinfo__opt-val{
  font-weight:600;color:var(--text, #0f172a);
}

/* ── Trust strip — 3-column reassurance pills under the image ─────── */
body.page-v6.page-marketplace-product .mkt-trust-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:14px;padding:14px 18px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
body.page-v6.page-marketplace-product .mkt-trust-strip__item{
  display:flex;align-items:center;gap:12px;
  padding:6px 4px;
  min-width:0;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__item + .mkt-trust-strip__item{
  border-left:1px solid rgba(15,23,42,0.08);
  padding-left:14px;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__icon{
  font-size:24px;color:#0f172a;flex-shrink:0;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__text{
  display:flex;flex-direction:column;line-height:1.25;min-width:0;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__text strong{
  font-size:13px;font-weight:700;color:#0f172a;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__text span{
  font-size:12px;color:#64748b;
}
body.page-v6.page-marketplace-product .mkt-trust-strip__delivery{
  color:#16a34a !important;font-weight:700;
}
@media (max-width:560px){
  body.page-v6.page-marketplace-product .mkt-trust-strip{
    grid-template-columns:1fr;gap:0;padding:8px 14px;
  }
  body.page-v6.page-marketplace-product .mkt-trust-strip__item + .mkt-trust-strip__item{
    border-left:0;padding-left:4px;
    border-top:1px solid rgba(15,23,42,0.08);
    padding-top:10px;margin-top:8px;
  }
}

/* ── .mkt-pbottom inside the media column ─────────────────────────────
   Now that the description/shipping/sizing tabs sit inside .mkt-pmedia,
   give them the same top spacing the trust strip uses so the trio stacks
   cleanly. The original .mkt-pbottom rules earlier in the file still
   provide the card framing — we only nudge the margin and let it
   naturally fill the column width. */
body.page-v6.page-marketplace-product .mkt-pmedia .mkt-pbottom{
  margin-top:14px;
}

/* ── PayPal Smart Buttons SDK container ──────────────────────────────
   The PayPal SDK paints its own official button (an iframe) into this
   div. We need to round all four corners — the SDK's iframe defaults
   to top-only rounding in some renders, which made the wrapper look
   square at the bottom. Solution: round + clip the wrapper, AND push
   the same border-radius down to every descendant the SDK injects
   (its `<div>` shell + the `<iframe>`) so PayPal's internal chrome
   matches our shape on every browser. */
body.page-v6.page-marketplace-product .mkt-pinfo__paypal-sdk{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  /* New stacking context so the rounded clip applies even if the SDK
     uses position:relative/absolute internally. */
  isolation:isolate;
}
body.page-v6.page-marketplace-product .mkt-pinfo__paypal-sdk > div,
body.page-v6.page-marketplace-product .mkt-pinfo__paypal-sdk iframe{
  border-radius:10px !important;
}

/* ============================================================ */
/* BUILD YOUR BUNDLE & SAVE — front-page promo, sits above footer */
/* ============================================================ */
/* Full-bleed band — same pattern the footer uses
   (.tg-footer / .tg-footer .wrap). The lavender background paints
   edge-to-edge across the viewport; the inner wrapper centres the
   content at the same 1440px max-width as the rest of the v6 chrome. */
body.page-v6 .bundle-promo{
  margin:32px 0 0;
  background:#f5f3ff;
  border-top:1px solid #ddd6fe;
  border-bottom:1px solid #ddd6fe;
  width:100%;
}
body.page-v6 .bundle-promo__inner{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:0 36px;
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(360px, 1.1fr);
  align-items:center;
  gap:0;
  min-height:220px;
}
body.page-v6 .bundle-promo__shirts{
  position:relative;
  height:100%;
  align-self:stretch;
  overflow:hidden;
  display:flex; align-items:center; justify-content:flex-start;
  padding:18px 0 18px 16px;
}
body.page-v6 .bundle-promo__shirts img{
  display:block;
  width:auto; max-width:480px; height:auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.18));
}
body.page-v6 .bundle-promo__copy{
  padding:28px 32px;
  display:flex; flex-direction:column; gap:16px;
  position:relative; z-index:1;
}
body.page-v6 .bundle-promo__title{
  margin:0; font-size:30px; font-weight:900; line-height:1.1;
  color:#0f172a; letter-spacing:-0.01em;
}
body.page-v6 .bundle-promo__subtitle{
  margin:0; font-size:15px; line-height:1.4; color:#475569;
}
body.page-v6 .bundle-promo__tiers{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:6px 0 4px;
}
body.page-v6 .bundle-promo__tier{
  flex:1 1 0; min-width:118px;
  padding:14px 12px;
  background:#fff; border:1.5px solid #e2e8f0;
  border-radius:10px;
  text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
body.page-v6 .bundle-promo__tier:nth-child(3){
  /* Highlight the 3-shirt tier — matches the screenshot mockup. */
  border-color:#7c3aed;
  box-shadow:0 6px 18px -8px rgba(124,58,237,.35);
}
body.page-v6 .bundle-promo__tier-qty{
  font-size:14px; font-weight:800; color:#0f172a; margin-bottom:4px;
}
body.page-v6 .bundle-promo__tier-savings{
  font-size:13px; font-weight:800; color:#7c3aed;
}
body.page-v6 .bundle-promo__tier-savings--regular{
  color:#64748b; font-weight:600;
}
body.page-v6 .bundle-promo__cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:6px;
  padding:12px 24px; border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:700;
  box-shadow:0 12px 28px -10px rgba(79,70,229,.55);
  transition:transform .15s, box-shadow .15s;
}
body.page-v6 .bundle-promo__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px -10px rgba(79,70,229,.7);
  color:#fff;
}
body.page-v6 .bundle-promo__note{
  margin:0; font-size:13px; color:#475569;
  display:inline-flex; align-items:center; gap:8px;
}
body.page-v6 .bundle-promo__note i{
  color:#7c3aed; font-size:14px;
}
@media (max-width:880px){
  /* Outer band stays full-bleed; inner wrapper drops to 16px gutter
     so phones don't get a hard edge on the lavender background. */
  body.page-v6 .bundle-promo__inner{
    grid-template-columns:1fr; min-height:0;
    padding:0 16px;
  }
  body.page-v6 .bundle-promo__shirts{
    padding:24px 16px 0; justify-content:center;
  }
  body.page-v6 .bundle-promo__shirts img{max-width:380px}
  body.page-v6 .bundle-promo__copy{padding:20px 22px 28px}
  body.page-v6 .bundle-promo__tier{flex-basis:calc(50% - 6px); min-width:0;}
}

/* ============================================================ */
/* MARKETPLACE PRODUCT PAGE — admin-only quick-edit bar           */
/* ============================================================ */
body.page-v6.page-marketplace-product .mkt-admin-bar{
  background:#0f172a; color:#f1f5f9;
  border-bottom:1px solid #1e293b;
  font-size:13px;
  position:sticky; top:0; z-index:50;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__inner{
  max-width:1440px; margin:0 auto;
  padding:8px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px;
  background:#7c3aed; color:#fff;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__chip i{ font-size:11px; }
body.page-v6.page-marketplace-product .mkt-admin-bar__field{
  color:#cbd5e1;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__field strong{
  color:#f8fafc; font-weight:700;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__sep{
  color:#475569; margin:0 4px;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__pill{
  display:inline-block; padding:2px 8px;
  border-radius:999px;
  font-size:11px; font-weight:700;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__pill.is-active{
  background:#16a34a; color:#fff;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__pill.is-hidden{
  background:#475569; color:#fff;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__pill.is-featured{
  background:#f59e0b; color:#fff; margin-left:4px;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__btn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:#4f46e5; color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-size:13px; font-weight:700;
  transition:background .15s;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__btn:hover{
  background:#4338ca; color:#fff;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__btn--ghost{
  margin-left:0;
  background:transparent; border:1px solid #475569; color:#cbd5e1;
}
body.page-v6.page-marketplace-product .mkt-admin-bar__btn--ghost:hover{
  background:#1e293b; border-color:#64748b; color:#f8fafc;
}
@media (max-width:680px){
  body.page-v6.page-marketplace-product .mkt-admin-bar__inner{
    padding:8px 14px; gap:8px;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__btn{
    margin-left:0;
  }
}

/* Reuse the marketplace product admin bar styling on the wholesale
   product page. Same markup (.mkt-admin-bar*) — just add the page
   class as an alternate parent so the rules apply on /wholesale/<id>. */
body.page-v6.page-wholesale-product .mkt-admin-bar{
  background:#0f172a; color:#f1f5f9;
  border-bottom:1px solid #1e293b;
  font-size:13px;
  position:sticky; top:0; z-index:50;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__inner{
  max-width:1440px; margin:0 auto;
  padding:8px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:#7c3aed; color:#fff;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__field{color:#cbd5e1}
body.page-v6.page-wholesale-product .mkt-admin-bar__field strong{color:#f8fafc;font-weight:700}
body.page-v6.page-wholesale-product .mkt-admin-bar__sep{color:#475569;margin:0 4px}
body.page-v6.page-wholesale-product .mkt-admin-bar__pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__pill.is-active{background:#16a34a;color:#fff}
body.page-v6.page-wholesale-product .mkt-admin-bar__btn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:#4f46e5; color:#fff;
  border-radius:6px; text-decoration:none;
  font-size:13px; font-weight:700;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__btn:hover{background:#4338ca;color:#fff}
body.page-v6.page-wholesale-product .mkt-admin-bar__btn--ghost{
  margin-left:0; background:transparent; border:1px solid #475569; color:#cbd5e1;
}
body.page-v6.page-wholesale-product .mkt-admin-bar__btn--ghost:hover{
  background:#1e293b; border-color:#64748b; color:#f8fafc;
}

/* ============================================================ */
/* CATALOG PAGES — admin-only quick-edit bar                     */
/* ============================================================ */
/* Shared by the catalog index (catalog_v6.php), category pages
   (catalog_category_v6.php — "/catalog/long-sleeves", etc.) and
   per-style product pages (catalog_product_v6.php). Each of those
   three files emits the same .mkt-admin-bar markup but the styling
   used to live inline in only catalog_v6.php's <style> block — so
   category and product pages dropped to bare browser styling
   (unstyled black text on the page background) whenever an admin
   clicked through to a category "shortcut" URL. Hoisting the rules
   here means all three pages render the dark sticky bar consistently. */
body.page-v6.page-catalog .mkt-admin-bar{
  background:#0f172a; color:#f1f5f9;
  border-bottom:1px solid #1e293b;
  font-size:13px;
  margin:0;
  position:sticky; top:0; z-index:50;
}
body.page-v6.page-catalog .mkt-admin-bar__inner{
  max-width:1440px; margin:0 auto;
  padding:8px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-v6.page-catalog .mkt-admin-bar__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:#7c3aed; color:#fff;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
body.page-v6.page-catalog .mkt-admin-bar__field{ color:#cbd5e1 }
body.page-v6.page-catalog .mkt-admin-bar__field strong{ color:#f8fafc; font-weight:700 }
body.page-v6.page-catalog .mkt-admin-bar__btn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:#4f46e5; color:#fff;
  border-radius:6px; text-decoration:none;
  font-size:13px; font-weight:700;
  transition:background .15s;
}
body.page-v6.page-catalog .mkt-admin-bar__btn:hover{ background:#4338ca; color:#fff }
/* Drop the gap that <main class="wrap"> normally contributes above
   the first section so the bar sits flush with the page content
   below it (no double spacing under the bar). */
body.page-v6.page-catalog main.wrap{ padding-top:0; margin-top:0 }
@media (max-width:760px){
  body.page-v6.page-catalog .mkt-admin-bar__inner{ padding:8px 16px; gap:10px }
  body.page-v6.page-catalog .mkt-admin-bar__field--lead{ display:none }
}

/* Icon-only admin bar buttons — used by the Featured pin so just the
   star glyph is shown (no "Featured" / "Feature" label). Tighten the
   horizontal padding so the icon stays optically centered. */
body.page-v6 .mkt-admin-bar__btn--icon{
  padding-left:9px; padding-right:9px;
}
body.page-v6 .mkt-admin-bar__btn--icon .mkt-admin-bar__btn-label{
  display:none;
}

/* ============================================================ */
/* WHOLESALE PRODUCT — "No design uploaded" confirmation modal   */
/* ============================================================ */
/* Used by wholesale_product_v6.php when the buyer clicks the
   branded "Add to Cart with my designs" CTA without having
   uploaded any artwork. Replaces a window.confirm() so the
   surface matches the rest of the v6 chrome. Toggled via
   data-open="true|false" + the .ws-modal-open class on <body>. */
body.page-v6 .ws-modal{
  position:fixed; inset:0; z-index:1000;
  display:none;
}
body.page-v6 .ws-modal[data-open="true"]{
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
/* Lock scroll behind an open modal so the backdrop fade stays
   anchored to the visible viewport. */
body.page-v6.ws-modal-open{ overflow:hidden }

body.page-v6 .ws-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(15, 23, 42, .55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:wsModalFade .15s ease-out;
}
body.page-v6 .ws-modal__card{
  position:relative;
  width:100%; max-width:460px;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line,#e2e8f0);
  box-shadow:0 24px 60px rgba(15, 23, 42, .28);
  padding:32px 28px 24px;
  text-align:center;
  animation:wsModalPop .18s ease-out;
}
[data-theme="dark"] body.page-v6 .ws-modal__card{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
  box-shadow:0 24px 60px rgba(0, 0, 0, .6);
}
body.page-v6 .ws-modal__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none;
  border-radius:8px;
  color:#94a3b8; font-size:16px;
  cursor:pointer;
  transition:background .12s, color .12s;
}
body.page-v6 .ws-modal__close:hover{
  background:#f1f5f9; color:#0f172a;
}
[data-theme="dark"] body.page-v6 .ws-modal__close:hover{
  background:#1e293b; color:#f8fafc;
}

body.page-v6 .ws-modal__icon{
  width:56px; height:56px;
  margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background:#fef3c7; color:#b45309;
  border-radius:50%;
  font-size:24px;
}
[data-theme="dark"] body.page-v6 .ws-modal__icon{
  background:rgba(180, 83, 9, .18); color:#fbbf24;
}
body.page-v6 .ws-modal__title{
  margin:0 0 8px;
  font-size:20px; font-weight:800; line-height:1.2;
  color:var(--text,#0f172a);
}
[data-theme="dark"] body.page-v6 .ws-modal__title{ color:var(--font-color,#e2e8f0) }
body.page-v6 .ws-modal__body{
  margin:0 0 22px;
  font-size:14.5px; line-height:1.55; color:#475569;
}
[data-theme="dark"] body.page-v6 .ws-modal__body{ color:#cbd5e1 }

body.page-v6 .ws-modal__actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
body.page-v6 .ws-modal__actions .btn{
  flex:1 1 auto; min-width:160px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
@media (max-width:520px){
  body.page-v6 .ws-modal__card{ padding:28px 20px 20px }
  body.page-v6 .ws-modal__actions{ flex-direction:column-reverse }
  body.page-v6 .ws-modal__actions .btn{ width:100% }
}

@keyframes wsModalFade{
  from { opacity:0 } to { opacity:1 }
}
@keyframes wsModalPop{
  from { opacity:0; transform:translateY(8px) scale(.97) }
  to   { opacity:1; transform:translateY(0)   scale(1)   }
}

/* Reuse the marketplace product admin bar styling on the catalog
   product landing page (/catalog/{slug}). Same markup (.mkt-admin-bar*)
   — just add page-catalog-product as another parent scope. Mirrors the
   wholesale-product block above, so the three surfaces stay visually
   aligned (same dark navy bar, same purple Admin chip, same indigo
   "Edit catalog attributes" CTA). */
body.page-v6.page-catalog-product .mkt-admin-bar{
  background:#0f172a; color:#f1f5f9;
  border-bottom:1px solid #1e293b;
  font-size:13px;
  position:sticky; top:0; z-index:50;
}
body.page-v6.page-catalog-product .mkt-admin-bar__inner{
  max-width:1440px; margin:0 auto;
  padding:8px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-v6.page-catalog-product .mkt-admin-bar__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:#7c3aed; color:#fff;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
body.page-v6.page-catalog-product .mkt-admin-bar__chip i{ font-size:11px; }
body.page-v6.page-catalog-product .mkt-admin-bar__field{ color:#cbd5e1 }
body.page-v6.page-catalog-product .mkt-admin-bar__field strong{ color:#f8fafc; font-weight:700 }
body.page-v6.page-catalog-product .mkt-admin-bar__field em{
  color:#94a3b8; font-style:normal; font-size:11.5px;
}
body.page-v6.page-catalog-product .mkt-admin-bar__sep{ color:#475569; margin:0 4px }
body.page-v6.page-catalog-product .mkt-admin-bar__btn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:#4f46e5; color:#fff;
  border-radius:6px; text-decoration:none;
  font-size:13px; font-weight:700;
  transition:background .15s;
}
body.page-v6.page-catalog-product .mkt-admin-bar__btn:hover{ background:#4338ca; color:#fff }
@media (max-width:680px){
  body.page-v6.page-catalog-product .mkt-admin-bar__inner{
    padding:8px 14px; gap:8px;
  }
  body.page-v6.page-catalog-product .mkt-admin-bar__btn{ margin-left:0 }
}

/* ── Surfaces quick-toggle dropdown (admin bar) ──────────────────
   The chip itself reuses .mkt-admin-bar__btn--ghost styling. The
   popover sits absolutely below and is anchored to the chip via
   the wrapping .mkt-admin-bar__surfaces span. Visible on both the
   marketplace and wholesale product admin bars (same widget). */
body.page-v6 .mkt-admin-bar__surfaces{ position:relative; display:inline-block; }
body.page-v6 .mkt-admin-bar__printmethods{ position:relative; display:inline-block; }
body.page-v6 .mkt-surfaces__pop{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:240px; max-width:320px;
  background:#0f172a; color:#e2e8f0; border:1px solid #334155;
  border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.45);
  padding:10px; z-index:50; font-size:13px;
}
body.page-v6 .mkt-surfaces__pop[hidden]{ display:none !important; }
body.page-v6 .mkt-surfaces__pop-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px 8px; border-bottom:1px solid #1e293b; margin-bottom:8px;
  font-size:12px; color:#94a3b8;
}
body.page-v6 .mkt-surfaces__pop-head strong{ color:#f8fafc; font-weight:700; }
body.page-v6 .mkt-surfaces__fullpage{
  color:#818cf8; text-decoration:none; font-weight:600; font-size:11px;
}
body.page-v6 .mkt-surfaces__fullpage:hover{ color:#a5b4fc; text-decoration:underline; }
body.page-v6 .mkt-surfaces__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 14px;
}
body.page-v6 .mkt-surfaces__row{ padding:4px 0; }
body.page-v6 .mkt-surfaces__label{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; user-select:none;
}
body.page-v6 .mkt-surfaces__cb{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
body.page-v6 .mkt-surfaces__slider{
  position:relative; flex:0 0 auto;
  width:30px; height:16px; background:#475569; border-radius:8px;
  transition:background .15s ease;
}
body.page-v6 .mkt-surfaces__slider::after{
  content:""; position:absolute; top:2px; left:2px;
  width:12px; height:12px; background:#f8fafc; border-radius:50%;
  transition:left .15s ease;
}
body.page-v6 .mkt-surfaces__cb:checked + .mkt-surfaces__slider{ background:#16a34a; }
body.page-v6 .mkt-surfaces__cb:checked + .mkt-surfaces__slider::after{ left:16px; }
body.page-v6 .mkt-surfaces__name{ color:#e2e8f0; font-size:12px; }
body.page-v6 .mkt-surfaces__cb:disabled + .mkt-surfaces__slider{ opacity:.5; cursor:wait; }

/* When the admin bar collapses on narrow screens, anchor the popover
   to the right edge of the bar so it doesn't get clipped. */
@media (max-width: 768px){
  body.page-v6 .mkt-surfaces__pop{ right:auto; left:0; min-width:220px; }
  body.page-v6 .mkt-surfaces__list{ grid-template-columns:1fr; }
}

/* The status pill icon (checkmark / eye-slash) is mobile-only — the
   word ("Live"/"Active"/"Hidden") carries the meaning on desktop. */
body.page-v6.page-marketplace-product .mkt-admin-bar__pill-icon,
body.page-v6.page-wholesale-product .mkt-admin-bar__pill-icon{
  display:none;
}

/* ── Mobile: collapse admin-bar buttons to icon-only ─────────────────
   On phones the admin bar grew tall enough to push the product
   image down a full screen. Hide the button text labels and keep
   only the FA icons; the icons are still tappable links. The
   `aria-label`/`title` attributes on each button preserve the
   spoken/hover label. Applies to BOTH the marketplace product page
   and the wholesale product page (shared markup). */
@media (max-width:680px){
  body.page-v6.page-marketplace-product .mkt-admin-bar__btn-label,
  body.page-v6.page-wholesale-product .mkt-admin-bar__btn-label{
    display:none;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__btn,
  body.page-v6.page-wholesale-product .mkt-admin-bar__btn{
    padding:8px 10px;
    gap:0;
    min-width:36px;
    justify-content:center;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__btn i,
  body.page-v6.page-wholesale-product .mkt-admin-bar__btn i{
    font-size:14px;
  }
  /* Hide the "Admin" text inside the chip — the shield icon already
     conveys the role and saves horizontal space for the action btns. */
  body.page-v6.page-marketplace-product .mkt-admin-bar__chip-label,
  body.page-v6.page-wholesale-product .mkt-admin-bar__chip-label{
    display:none;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__chip,
  body.page-v6.page-wholesale-product .mkt-admin-bar__chip{
    gap:0;
    padding:4px 7px;
  }
  /* Swap the status pill from word ("Live"/"Active"/"Hidden") to a
     compact icon (check / eye-slash). The label span is hidden and
     the FA icon is revealed. */
  body.page-v6.page-marketplace-product .mkt-admin-bar__pill-label,
  body.page-v6.page-wholesale-product .mkt-admin-bar__pill-label{
    display:none;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__pill-icon,
  body.page-v6.page-wholesale-product .mkt-admin-bar__pill-icon{
    display:inline-block;
    font-size:11px;
    line-height:1;
  }
  body.page-v6.page-marketplace-product .mkt-admin-bar__pill,
  body.page-v6.page-wholesale-product .mkt-admin-bar__pill{
    padding:4px 7px;
    line-height:1;
  }
  /* Full-width admin bar on mobile — drop the side padding so chips
     and buttons get the full viewport for breathing room. */
  body.page-v6.page-marketplace-product .mkt-admin-bar__inner,
  body.page-v6.page-wholesale-product .mkt-admin-bar__inner,
  body.page-v6.page-templates-product .mkt-admin-bar__inner{
    padding:8px 0;
    gap:8px;
  }
}

/* Reuse the marketplace product admin bar styling on the templates
   product page (/templates/{slug}). Same .mkt-admin-bar* markup —
   just add the page class as an alternate parent so the rules apply. */
body.page-v6.page-templates-product .mkt-admin-bar{
  background:#0f172a; color:#f1f5f9;
  border-bottom:1px solid #1e293b;
  font-size:13px;
  position:sticky; top:0; z-index:50;
}
body.page-v6.page-templates-product .mkt-admin-bar__inner{
  max-width:1440px; margin:0 auto;
  padding:8px 24px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-v6.page-templates-product .mkt-admin-bar__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:#7c3aed; color:#fff;
  border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
body.page-v6.page-templates-product .mkt-admin-bar__field{color:#cbd5e1}
body.page-v6.page-templates-product .mkt-admin-bar__field strong{color:#f8fafc;font-weight:700}
body.page-v6.page-templates-product .mkt-admin-bar__sep{color:#475569;margin:0 4px}
body.page-v6.page-templates-product .mkt-admin-bar__pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700;
}
body.page-v6.page-templates-product .mkt-admin-bar__pill.is-featured{
  background:#f59e0b; color:#fff;
}
body.page-v6.page-templates-product .mkt-admin-bar__btn{
  margin-left:0;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background:#4f46e5; color:#fff;
  border-radius:6px; text-decoration:none;
  font-size:13px; font-weight:700;
  transition:background .15s;
}
/* The first action button gets pushed to the right so the chip+fields
   stay left-aligned and the actions cluster on the right edge. */
body.page-v6.page-templates-product .mkt-admin-bar__btn:first-of-type{
  margin-left:auto;
}
body.page-v6.page-templates-product .mkt-admin-bar__btn:hover{background:#4338ca;color:#fff}
body.page-v6.page-templates-product .mkt-admin-bar__btn--ghost{
  background:transparent; border:1px solid #475569; color:#cbd5e1;
}
body.page-v6.page-templates-product .mkt-admin-bar__btn--ghost:hover{
  background:#1e293b; border-color:#64748b; color:#f8fafc;
}
@media (max-width:680px){
  body.page-v6.page-templates-product .mkt-admin-bar__inner{
    padding:8px 14px; gap:8px;
  }
  body.page-v6.page-templates-product .mkt-admin-bar__btn{
    margin-left:0;
  }
  body.page-v6.page-templates-product .mkt-admin-bar__btn:first-of-type{
    margin-left:auto;
  }
  body.page-v6.page-templates-product .mkt-admin-bar__btn-label{display:none;}
  body.page-v6.page-templates-product .mkt-admin-bar__btn{
    padding:8px 10px; gap:0; min-width:36px; justify-content:center;
  }
  body.page-v6.page-templates-product .mkt-admin-bar__btn i{font-size:14px;}
  body.page-v6.page-templates-product .mkt-admin-bar__chip-label{display:none;}
  body.page-v6.page-templates-product .mkt-admin-bar__chip{gap:0; padding:4px 7px;}
}

/* ============================================================ */
/* MARKETPLACE — curated "Shop by vibe" image-overlay cards       */
/* Managed via /cp/admin/marketplacecategories. Renders in place   */
/* of the legacy palette grid when active rows exist.             */
/* ============================================================ */
body.page-marketplace .mkt-curated{
  margin:36px 0 28px;
}
body.page-marketplace .mkt-curated__head{
  margin:0 0 18px;
  text-align:center;
}
body.page-marketplace .mkt-curated__title{
  margin:0; font-size:30px; font-weight:900; color:#0f172a; letter-spacing:-0.01em;
}
body.page-marketplace .mkt-curated__subtitle{
  margin:6px 0 0; font-size:14.5px; color:#64748b;
}
body.page-marketplace .mkt-curated__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
body.page-marketplace .mkt-curated-card{
  /* Tall image card with text overlay at the bottom-left.
     Image comes from the inline --mkt-curated-bg CSS variable
     (set per card in the PHP loop). */
  position:relative;
  display:block;
  height:340px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background-image:var(--mkt-curated-bg);
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 36px -16px rgba(15,23,42,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
body.page-marketplace .mkt-curated-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px -18px rgba(15,23,42,0.45);
  color:#fff;
}
body.page-marketplace .mkt-curated-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(15,23,42,0.78) 0%,
    rgba(15,23,42,0.30) 45%,
    rgba(15,23,42,0)    75%);
  z-index:1;
}
body.page-marketplace .mkt-curated-card__copy{
  position:absolute; left:18px; right:18px; bottom:18px;
  z-index:2;
  display:flex; flex-direction:column; gap:4px;
}
body.page-marketplace .mkt-curated-card__name{
  font-size:22px; font-weight:900; line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
body.page-marketplace .mkt-curated-card__sub{
  font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media (max-width:1100px){
  body.page-marketplace .mkt-curated__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:560px){
  body.page-marketplace .mkt-curated__grid{
    grid-template-columns:1fr;
  }
  body.page-marketplace .mkt-curated-card{height:260px}
}

/* ==================================================================
   /marketplace/categories — full "Shop by category" listing.
   Mirrors the product page chrome (breadcrumb at top, left-aligned
   heading) instead of the centred homepage layout. The earlier
   version inherited body.page-marketplace .mkt-curated__head's
   text-align:center, which on this standalone page made the title
   look orphaned and pushed off-axis next to the left-aligned
   breadcrumb.
   ================================================================== */
body.page-marketplace-categories .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-categories .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-categories .mkt-breadcrumb a:hover{
  background:rgba(15,23,42,0.05);
  color:var(--brand, #4f46e5);
}
body.page-marketplace-categories .mkt-breadcrumb__sep{
  font-size:10px; opacity:.6;
}
body.page-marketplace-categories .mkt-breadcrumb__here{
  color:#0f172a; font-weight:600;
}

/* Override the centred homepage variant — categories page uses a
   left-aligned hero like the product page so it sits flush with
   the breadcrumb. */
body.page-marketplace-categories .mkt-curated--full .mkt-curated__head{
  text-align:left;
  margin:0 0 22px;
}
body.page-marketplace-categories .mkt-curated--full .mkt-curated__title{
  font-size:32px;
}
body.page-marketplace-categories .mkt-curated--full .mkt-curated__subtitle{
  margin-top:8px;
}

/* Image-less category card — lives on a flat colour background,
   so we drop the gradient overlay (which would tint it grey) and
   centre the title for visual balance. */
body.page-marketplace .mkt-curated-card--noimg .mkt-curated-card__overlay{
  display:none;
}
body.page-marketplace .mkt-curated-card--noimg .mkt-curated-card__copy{
  position:absolute; inset:0;
  left:18px; right:18px;
  display:flex; flex-direction:column; gap:6px;
  align-items:flex-start; justify-content:center;
}
body.page-marketplace .mkt-curated-card--noimg .mkt-curated-card__name{
  font-size:24px;
}

/* ============================================================
   TESTMODE BANNER — surfaces only on the pre-release platform.
   Currently used on /register so signups are redirected to the
   live site, but the .testmode-banner block is reusable on any
   v6 page that should warn shoppers/sellers they're on staging.
   ============================================================ */
body.page-v6 .testmode-banner{
  background:linear-gradient(135deg,#f59e0b,#dc2626);
  color:#fff;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,0.15);
  box-shadow:0 4px 14px -8px rgba(0,0,0,0.25);
}
body.page-v6 .testmode-banner__inner{
  max-width:1440px; margin:0 auto;
  padding:0 36px;
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
}
body.page-v6 .testmode-banner__icon{
  font-size:22px; flex-shrink:0;
}
body.page-v6 .testmode-banner__copy{
  flex:1 1 300px;
  font-size:14px; line-height:1.45;
}
body.page-v6 .testmode-banner__copy strong{
  display:block; font-size:15.5px; font-weight:800; margin-bottom:2px;
}
body.page-v6 .testmode-banner__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:8px;
  background:#ffffff; color:#0f172a;
  text-decoration:none; font-weight:700; font-size:14px;
  flex-shrink:0;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
body.page-v6 .testmode-banner__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
  color:#0f172a;
}
@media (max-width:680px){
  body.page-v6 .testmode-banner__inner{ padding:0 16px; gap:12px; }
  body.page-v6 .testmode-banner__cta{ width:100%; justify-content:center; }
}

/* "See all categories" link under the curated grid. Centred under
   the 4-card row, links to /marketplace/categories. */
body.page-marketplace .mkt-curated__seeall{
  margin:18px 0 0; text-align:center;
}
body.page-marketplace .mkt-curated__seeall a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600;
  color:var(--brand, #4f46e5);
  text-decoration:none;
  padding:8px 16px; border-radius:8px;
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
body.page-marketplace .mkt-curated__seeall a:hover{
  background:#f1f5f9;
  border-color:#cbd5e1;
}
body.page-marketplace .mkt-curated__seeall i{
  font-size:12px;
  transition:transform .15s;
}
body.page-marketplace .mkt-curated__seeall a:hover i{
  transform:translateX(2px);
}

/* ──────────────────────────────────────────────────────────────────
   Marketplace product page — gallery view selector
   ------------------------------------------------------------------
   The product page stage now supports three views (design + shirt /
   design only on the selected swatch colour / embedded video) with
   a thumbnail strip below the stage to switch between them. Tiles
   only render when there's something to switch to (the design+shirt
   tile is always present; design-only is conditional on a print file
   existing; video is conditional on Marketplace_Products.video_url).
   ────────────────────────────────────────────────────────────────── */
body.page-marketplace-product .mkt-pview{
  display:none;
}
body.page-marketplace-product .mkt-pview.is-active{
  display:block;
}

/* Gallery + stage live side-by-side on desktop. The flex row puts
   the gallery on the LEFT (via order:-1) so the user sees:
       [thumbs] [main image]
   The stage gets flex:1 1 0 + min-width:0 so it shrinks as needed
   instead of overflowing the column. Gap matches the 10px gallery
   gap so spacing reads consistently. */
body.page-marketplace-product .mkt-pmedia__view{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
body.page-marketplace-product .mkt-pmedia__view > .mkt-pmedia__stage{
  flex:1 1 0;
  min-width:0;
}
body.page-marketplace-product .mkt-pmedia__view > .mkt-pgallery{
  order:-1;
  flex:0 0 auto;
  flex-direction:column;
  margin:0;
  width:88px;
}

body.page-marketplace-product .mkt-pgallery{
  display:flex;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  flex-wrap:wrap;
}
body.page-marketplace-product .mkt-pgallery__tile{
  position:relative;
  width:88px;
  height:88px;
  border:2px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
body.page-marketplace-product .mkt-pgallery__tile:hover{
  border-color:#94a3b8;
  transform:translateY(-1px);
}
body.page-marketplace-product .mkt-pgallery__tile.is-active{
  border-color:#0f172a;
  box-shadow:0 0 0 1px #0f172a inset;
}
body.page-marketplace-product .mkt-pgallery__tile > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Design tile (top-left) — shows the shirt mockup with the design
   overlaid so a white print isn't invisible against the white tile
   background. The shirt fills the tile via .mkt-pgallery__shirt; the
   design <img> rides on top with the same percentage geometry the
   main stage uses (PHP injects top/left/width/height inline). */
body.page-marketplace-product .mkt-pgallery__tile--design{
  background:#f1f5f9; /* matches main-stage stack background */
}
body.page-marketplace-product .mkt-pgallery__shirt{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
body.page-marketplace-product .mkt-pgallery__design{
  /* PHP sets top/left/width/height inline; this just guarantees the
     overlay sits above the shirt and ignores pointer hits. */
  z-index:1;
  pointer-events:none;
}
body.page-marketplace-product .mkt-pgallery__label{
  position:absolute;
  bottom:4px;
  right:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(15,23,42,.85);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  pointer-events:none;
}
/* "Design only on selected colour" tile — full-bleed colour fill
   with the design floating in the middle. The actual colour is
   updated live by JS via inline style on .mkt-pgallery__swatch. */
body.page-marketplace-product .mkt-pgallery__tile--colour{
  background:transparent;
}
body.page-marketplace-product .mkt-pgallery__swatch{
  position:absolute;
  inset:0;
  background:#f1f5f9;
}
body.page-marketplace-product .mkt-pgallery__tile--colour > img{
  position:relative; /* sit above the swatch background */
}
/* Alternate-colour variant tile — same shirt+design composite as the
   default tile, but locked to a contrasting blank. Server-rendered,
   never swapped by pickColour() — so it always reads as "another
   colour you can pick" instead of mirroring the active selection. */
body.page-marketplace-product .mkt-pgallery__tile--variant{
  background:#f1f5f9;
}
body.page-marketplace-product .mkt-pgallery__tile--variant .mkt-pgallery__shirt--variant{
  position:relative;
  z-index:0;
}
body.page-marketplace-product .mkt-pview--colour-variant{
  background:#f1f5f9;
}
body.page-marketplace-product .mkt-pmedia__shirt--variant{
  display:block;
  width:100%;
  height:auto;
}
/* Video tile — solid black with a centred play triangle. The
   --has-thumb modifier kicks in when we managed to resolve a poster
   image (YouTube CDN thumb or the print thumb for TikTok); the
   <img> covers the tile and the play / provider chips sit above it. */
body.page-marketplace-product .mkt-pgallery__tile--video{
  background:#0f172a;
}
body.page-marketplace-product .mkt-pgallery__videothumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:0;
}
/* Subtle dark scrim over the thumb so the white play triangle stays
   visible on bright/light thumbnails. */
body.page-marketplace-product .mkt-pgallery__tile--has-thumb::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(15,23,42,0.32);
  z-index:1;
  pointer-events:none;
}
body.page-marketplace-product .mkt-pgallery__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  pointer-events:none;
  z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
body.page-marketplace-product .mkt-pgallery__tile--video .mkt-pgallery__label{
  background:rgba(255,255,255,.95);
  color:#0f172a;
  z-index:2;
}
@media (max-width:560px){
  body.page-marketplace-product .mkt-pgallery__tile{
    width:72px;
    height:72px;
  }
}

/* "Seen on Social" pill that sits directly below the video tile.
   Width matches the 88px tile (72px on mobile) so it lines up with
   the column. Solid grey background + dark text gives it the same
   pill feel as the existing gallery chrome. */
body.page-marketplace-product .mkt-pgallery__caption{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:88px;
  margin-top:6px;
  padding:5px 8px;
  background:#e2e8f0;
  color:#0f172a;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.01em;
  border-radius:8px;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:560px){
  body.page-marketplace-product .mkt-pgallery__caption{
    width:72px;
    font-size:10px;
  }
}

/* ── Wholesale: empty-state UI for /wholesale/design/<id> when the
   catalogue row doesn't exist ──────────────────────────────────────
   The wholesale page loads /css/v6.css (not global.css), so these
   styles live here. Card layout with two CTAs and a row of popular
   blanks the visitor can jump to without bouncing through the grid. */
.ws-empty {
  display: flex;
  justify-content: center;
  padding: 56px 16px 40px;
}
.ws-empty__card {
  width: 100%;
  max-width: 1100px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  padding: 40px 44px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.04);
  text-align: center;
}
.ws-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  font-size: 28px;
  margin-bottom: 16px;
}
.ws-empty__title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.2;
}
.ws-empty__lead {
  font-size: 15px;
  color: #475569;
  line-height: 1.55;
  margin: 0 auto 24px;
  max-width: 520px;
}
.ws-empty__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
/* Primary CTA uses the wholesale storefront orange (--orange) rather
   than the default navy .btn-brand. Scoped to the empty-state actions
   so it doesn't affect .btn-brand elsewhere. */
.ws-empty__actions .btn-brand {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.ws-empty__actions .btn-brand:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}
.ws-empty__suggest {
  border-top: 1px solid #eef0f4;
  padding-top: 22px;
  margin-top: 4px;
  text-align: left;
}
.ws-empty__suggest-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 12px;
  text-align: center;
}
.ws-empty__suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.ws-empty__suggest-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 12px;
  background: #fafbfc;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.ws-empty__suggest-tile:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
  transform: translateY(-1px);
}
.ws-empty__suggest-tile img {
  width: 100%;
  /* height:auto overrides the width="1001" height="1001" HTML
     attributes — without it the height attribute keeps the box
     1001px tall and the browser ignores aspect-ratio (it only
     applies when one dimension is auto). */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
}
.ws-empty__suggest-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 32px;
  margin-bottom: 10px;
}
.ws-empty__suggest-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-empty__suggest-meta {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}
@media (max-width: 600px) {
  .ws-empty__card { padding: 28px 20px; }
  .ws-empty__title { font-size: 22px; }
  .ws-empty__suggest-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Marketplace product — mobile reorder + sticky CTA bar
   ----
   On screens ≤960px we want this sequence:
     1. category chip
     2. product TITLE
     3. main image (with thumbnails BELOW it)
     4. price
     5. colour / size / quantity
     6. add-to-cart / buy-now / paypal
     7. share row
     8. "Printed On Demand" trust strip (pinned to the very bottom
        of the page content — above the sticky CTA bar)
   Plus a fixed bottom "Add to cart + price" bar.

   The grid wrapper has two real children — `.mkt-pmedia` (left)
   and `.mkt-pinfo` (right). To reorder children of BOTH columns
   together on mobile without changing the markup, set both
   wrappers to `display:contents` so their grandchildren become
   direct grid items, then reorder via `order`.
   ============================================================ */
.mkt-mobile-cta { display:none; }

@media (max-width:960px){
  /* Make .mkt-pmedia / .mkt-pinfo transparent to layout so all
     descendants become direct grid items of .mkt-product__grid
     and can be reordered with `order`. */
  body.page-v6.page-marketplace-product .mkt-product__grid{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-bottom:90px;            /* clear the fixed CTA bar */
  }
  body.page-v6.page-marketplace-product .mkt-pmedia,
  body.page-v6.page-marketplace-product .mkt-pinfo{
    display:contents;
  }

  /* Reorder. Items with the same order value preserve document
     order (so colour → size → qty stay in that sequence). */
  body.page-v6.page-marketplace-product .mkt-pinfo__cat        { order:1; }
  body.page-v6.page-marketplace-product .mkt-pinfo__title      { order:2; margin-top:4px; }
  body.page-v6.page-marketplace-product .mkt-pmedia__view      { order:3; }
  body.page-v6.page-marketplace-product .mkt-pinfo__price      { order:4; }
  body.page-v6.page-marketplace-product .mkt-pinfo__opt        { order:5; }
  body.page-v6.page-marketplace-product .mkt-sizechart         { order:5; }
  body.page-v6.page-marketplace-product .mkt-pinfo__cta        { order:6; }
  body.page-v6.page-marketplace-product .mkt-pinfo__share      { order:7; }
  body.page-v6.page-marketplace-product .mkt-trust-strip       { order:8; margin-top:18px; }

  /* Full-width on mobile — the CTA group, social-share row, and
     trust strip should all stretch edge-to-edge inside the grid
     (which itself sits inside the page wrap's 16px gutter). The
     parent flex column already stretches items to 100% on the
     cross axis, but explicit width + box-sizing + zero margin
     guards against any lingering desktop max-width / margin rule
     leaking through. */
  body.page-v6.page-marketplace-product .mkt-pinfo__cta,
  body.page-v6.page-marketplace-product .mkt-pinfo__share,
  body.page-v6.page-marketplace-product .mkt-trust-strip{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
    align-self:stretch;
  }
  body.page-v6.page-marketplace-product .mkt-pinfo__add,
  body.page-v6.page-marketplace-product .mkt-pinfo__buynow,
  body.page-v6.page-marketplace-product .mkt-pinfo__paypal-sdk{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  /* Share row: fill the line and let the buttons distribute evenly
     instead of clustering on the left. */
  body.page-v6.page-marketplace-product .mkt-pinfo__share{
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:10px;
  }
  /* Trust strip on mobile: the 14–18px inner padding above 560px
     can read as a "side margin" against the rest of the column.
     Tighten the box's own padding and drop any inherited margin
     so the card lines up flush with the buttons above. */
  body.page-v6.page-marketplace-product .mkt-trust-strip{
    padding:12px 14px;
  }

  /* Thumbnails BELOW main image: clear the desktop `order:-1`
     that pushes the gallery to the LEFT of the stage, and stack
     the .mkt-pmedia__view as a column. */
  body.page-v6.page-marketplace-product .mkt-pmedia__view{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  body.page-v6.page-marketplace-product .mkt-pmedia__view > .mkt-pgallery{
    order:0;                        /* defaults — gallery follows stage */
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
  }
  /* Stage: the desktop rule sets `flex:1 1 0` so it grows on the
     row (main axis = horizontal). Once we switch the parent to
     `flex-direction:column`, that flex-basis:0 becomes the
     stage's HEIGHT, collapsing the main image to zero. Use
     `flex:0 0 auto` so the stage sizes to its intrinsic content
     (the flow-sized blank-shirt image inside). */
  body.page-v6.page-marketplace-product .mkt-pmedia__view > .mkt-pmedia__stage{
    flex:0 0 auto;
    width:100%;
    min-width:0;
  }

  /* ── Sticky bottom Add-to-Cart bar ─────────────────────────
     Shared between the marketplace product page and the wholesale
     product page. Both pages emit a `.mkt-mobile-cta` block right
     before </main>; the bar is fixed to the viewport bottom and
     stays out of the way on desktop via the base `display:none`
     declaration outside this media block. */
  body.page-v6.page-marketplace-product .mkt-mobile-cta,
  body.page-v6.page-wholesale-product .mkt-mobile-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9000;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:#ffffff;
    border-top:1px solid rgba(15,23,42,0.10);
    box-shadow:0 -2px 12px rgba(15,23,42,0.10);
  }
  body.page-v6.page-marketplace-product .mkt-mobile-cta__price,
  body.page-v6.page-wholesale-product .mkt-mobile-cta__price{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    flex:0 0 auto;
  }
  body.page-v6.page-marketplace-product .mkt-mobile-cta__price-label,
  body.page-v6.page-wholesale-product .mkt-mobile-cta__price-label{
    font-size:11px;
    font-weight:600;
    color:#64748b;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  body.page-v6.page-marketplace-product .mkt-mobile-cta__price-now,
  body.page-v6.page-wholesale-product .mkt-mobile-cta__price-now{
    font-size:20px;
    font-weight:900;
    color:#0f172a;
  }
  body.page-v6.page-marketplace-product .mkt-mobile-cta__add,
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:12px 18px;
    border:0;
    border-radius:12px;
    background:var(--brand, #4f46e5);
    color:#fff;
    font-size:15px;
    font-weight:800;
    letter-spacing:0.01em;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(79,70,229,0.30);
  }
  body.page-v6.page-marketplace-product .mkt-mobile-cta__add:active,
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add:active{
    transform:translateY(1px);
  }
  /* Wholesale page sticky button uses the dark-orange/brown wholesale
     accent (#c56100, --orange-dark) with white text so it reads as
     the wholesale-branded action — distinct from the navy --brand
     "Add to cart with my designs" button above it. */
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add{
    background:#c56100;
    color:#fff;
    border:0;
    box-shadow:0 2px 6px rgba(197,97,0,0.30);
  }
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add:hover{
    background:#a05000;
    color:#fff;
  }
  /* When the buyer has uploaded artwork to one or more print positions,
     the sticky CTA swaps from the orange "Add Blank to Cart" action to
     the brand-coloured "Add with My Designs" action — matched to the
     inline #wsAddWithArt (.btn-brand) button above so both reads as the
     same primary action. Uses the active palette's --brand /
     --accent-a-dark so it stays in sync if the palette switches. */
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add.mkt-mobile-cta__add--with-designs{
    background:var(--brand);
    color:#fff;
    box-shadow:0 2px 6px rgba(2,80,119,0.30);
  }
  body.page-v6.page-wholesale-product .mkt-mobile-cta__add.mkt-mobile-cta__add--with-designs:hover{
    background:var(--accent-a-dark);
    color:#fff;
  }
  /* Wholesale page needs bottom padding on its main wrap so the last
     content row isn't hidden behind the sticky bar (the marketplace
     page already covered this via .mkt-product__grid padding-bottom). */
  body.page-v6.page-wholesale-product main.wrap{
    padding-bottom:90px;
  }
}

/* ── Catalogue page (/catalogue) ────────────────────────────────────
   Public list of every Tshirtgang style available to design on. Same
   visual language as the marketplace grid — soft shadow cards, hover
   lift, rounded corners — minus the price-overlay and listing chrome
   since this page is purely "browse the blanks", not "buy a design".
   ────────────────────────────────────────────────────────────────── */
body.page-v6.page-catalog main.wrap{
  max-width:1340px;
  margin:0 auto;
  padding:24px 24px 80px;
}

.cat-hero{
  margin:24px 0 28px;
  padding:36px 32px;
  border-radius:18px;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#1d4ed8 100%);
  color:#fff;
  box-shadow:0 14px 40px rgba(11,31,51,.18);
}
.cat-hero__inner{max-width:760px}
.cat-hero__title{
  margin:0 0 10px;
  font-size:34px;line-height:1.1;font-weight:900;
  letter-spacing:-.01em;color:#fff;
}
.cat-hero__lead{
  margin:0 0 14px;
  font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);
}
/* Turnaround pill — sits between the lead copy and the CTA row.
   Translucent white chip on the dark-navy hero so it reads as a
   trust signal without competing with the primary CTA buttons. */
.cat-hero__turnaround{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 20px;
  padding:7px 14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:13.5px;line-height:1.2;color:#fff;
}
.cat-hero__turnaround i{color:#fbbf24;font-size:13px}
.cat-hero__turnaround strong{font-weight:800;color:#fff}
.cat-hero__cta-row{display:flex;flex-wrap:wrap;gap:10px}
.cat-hero__cta-row .btn{padding:11px 20px}
/* Wholesale CTA — uses --orange/--orange-dark so the button reads as a
   hand-off into the wholesale section (matches the hub's branding on
   the destination page). Scoped to .cat-hero__btn-ws so it doesn't leak
   into the global .btn ruleset. */
.cat-hero__btn-ws{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.cat-hero__btn-ws:hover,
.cat-hero__btn-ws:focus,
.cat-hero__btn-ws:visited{
  background:var(--orange-dark);
  border-color:var(--orange-dark);
  color:#fff;
}

/* Filter chips */
.cat-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 20px;
}
.cat-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line, #e2e8f0);
  color:var(--text, #1e293b);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.cat-chip:hover{border-color:var(--brand,#1d4ed8);color:var(--brand,#1d4ed8)}
.cat-chip.is-active{
  background:var(--brand,#1d4ed8);border-color:var(--brand,#1d4ed8);color:#fff;
}
.cat-chip__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;padding:0 6px;height:18px;
  font-size:11px;font-weight:700;border-radius:999px;
  background:rgba(15,23,42,.06);color:inherit;
}
.cat-chip.is-active .cat-chip__count{
  background:rgba(255,255,255,.22);color:#fff;
}
[data-theme="dark"] .cat-chip{
  background:var(--content-bg-color,#0f172a);
  border-color:#374151;color:var(--font-color,#e2e8f0);
}

/* Card grid */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
  /* Breathing room below the last row of cards before the footer kicks
     in. Without this, the bottom-most card sat flush against the
     site footer on long catalogs and felt cramped. */
  margin-bottom:48px;
}
.cat-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.cat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  border-color:#cbd5e1;
}
[data-theme="dark"] .cat-card{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;
}
/* Lock every catalog thumbnail to a 1:1 box so cards line up at the
   same height regardless of which mockup the supplier uploaded
   (portrait / landscape / square). Two complementary mechanisms:
     - `aspect-ratio:1/1` for modern browsers — sets the box height
       from its width without needing the inner img to be loaded.
     - `padding-bottom:100%` + `height:0` is the universal fallback
       that older browsers (and any environment where `aspect-ratio`
       gets disabled by container query / contain rules) all honour.
   The img itself is absolutely positioned with `inset:0` and
   `object-fit:cover`, so the photo is cropped/zoomed to fill the
   box without influencing the parent's size. The parent
   `overflow:hidden` clips any overflow from the cover crop. */
.cat-card__thumb{
  position:relative;
  /* 4:5 (800×1000) — matches the supplier mockup native aspect, so
     portraits (full-body model shots) frame the model nicely without
     either letterboxing or aggressive cropping. Was 1:1; bumped to
     4:5 per design preference for a taller image area. */
  aspect-ratio:4/5;
  /* Fallback for the (rare) case where aspect-ratio isn't honoured.
     125% = height ÷ width = 1000/800. Modern browsers ignore this
     padding because aspect-ratio wins via the @supports cancel
     below. */
  padding-bottom:125%;
  height:0;
  background:#f1f5f9;
  overflow:hidden;
}
/* Re-enable aspect-ratio sizing on browsers that respect it — collapse
   the fallback padding-bottom so we don't double-count the height. */
@supports (aspect-ratio: 1/1){
  .cat-card__thumb{padding-bottom:0;height:auto}
}
[data-theme="dark"] .cat-card__thumb{background:#1e293b}
.cat-card__thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
/* Center the no-image fallback inside the absolutely-sized box.
   (Was previously centred via .cat-card__thumb's flex rules; those
   were dropped above because they conflicted with absolute children.) */
.cat-card__noimg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.cat-card__noimg{
  font-size:42px;color:#94a3b8;
}
.cat-card__badge{
  position:absolute;top:10px;left:10px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(15,23,42,.85);color:#fff;
  backdrop-filter:blur(4px);
}
.cat-card__badge--ws{background:#c56100;color:#fff}
.cat-card__badge--popular{background:#dc2626;color:#fff}
.cat-card__badge--new{background:#059669;color:#fff}
.cat-card__badge--sale{background:#7c3aed;color:#fff}
/* Stack multiple flag chips on the thumb's top-left without overlap. */
.cat-card__badges{
  position:absolute;top:10px;left:10px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  pointer-events:none;
}
.cat-card__badges .cat-card__badge{position:static;pointer-events:auto}
.cat-card__body{
  padding:14px 14px 16px;
  display:flex;flex-direction:column;gap:6px;
  flex:1;
}
.cat-card__brand{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#64748b;
}
.cat-card__name{
  font-size:14.5px;font-weight:700;line-height:1.25;
  color:var(--text,#0f172a);
}
[data-theme="dark"] .cat-card__name{color:var(--font-color,#e2e8f0)}
.cat-card__meta{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:12px;color:#64748b;margin-top:2px;
}
.cat-card__price{
  margin-top:auto;padding-top:10px;
  display:flex;align-items:baseline;gap:5px;
}
.cat-card__price-from{
  font-size:11px;color:#94a3b8;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.cat-card__price strong{
  font-size:14.5px;color:var(--text,#0f172a);font-weight:800;
}
[data-theme="dark"] .cat-card__price strong{color:var(--font-color,#e2e8f0)}

/* Empty state */
.cat-empty{
  text-align:center;padding:80px 20px;color:#64748b;
}
.cat-empty i{font-size:48px;margin-bottom:14px;opacity:.5}
.cat-empty h2{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--text,#0f172a)}
.cat-empty p{margin:0;font-size:14px}

/* =====================================================================
   CATALOG PRODUCT LANDING — /catalog/{slug}
   Per-style SEO landing page rendered by catalog_product_v6.php. Mirrors
   the marketplace product page's two-column hero (image left / info
   right), reusing colour/size pills from .cat-card design language so
   /catalog and /catalog/{slug} feel like the same surface.
   ===================================================================== */

/* Breadcrumb strip above the hero — reset the default <ol> numbering so
   the visible chain reads like the JSON-LD BreadcrumbList that mirrors
   it. */
.cat-product__crumbs{
  margin:0 0 18px;
  font-size:13px;color:#64748b;
}
.cat-product__crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
}
.cat-product__crumbs li{
  display:inline-flex;align-items:center;gap:8px;
}
.cat-product__crumbs li + li::before{
  content:"\203A"; /* › */
  color:#cbd5e1;font-weight:600;
}
.cat-product__crumbs a{
  color:#475569;text-decoration:none;font-weight:500;
}
.cat-product__crumbs a:hover{color:var(--accent,#0ea5e9);text-decoration:underline}
.cat-product__crumbs [aria-current="page"]{color:var(--text,#0f172a);font-weight:600}
[data-theme="dark"] .cat-product__crumbs{color:#94a3b8}
[data-theme="dark"] .cat-product__crumbs a{color:#cbd5e1}
[data-theme="dark"] .cat-product__crumbs [aria-current="page"]{color:var(--font-color,#e2e8f0)}

/* Two-column hero. Image is locked to a 4:5 aspect just like .cat-card
   so the gallery and landing page agree on shape. Right column owns the
   buy info, badges, swatches, sizes, and FAQ. */
.cat-product{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:36px;
  margin:0 0 48px;
}
@media (max-width:880px){
  .cat-product{grid-template-columns:1fr;gap:24px}
}

.cat-product__media{position:relative}
.cat-product__thumb{
  position:relative;
  aspect-ratio:4/5;
  padding-bottom:125%;height:0;
  background:#f1f5f9;
  border:1px solid var(--line,#e2e8f0);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
@supports (aspect-ratio: 1/1){
  .cat-product__thumb{padding-bottom:0;height:auto}
}
[data-theme="dark"] .cat-product__thumb{background:#1e293b;border-color:#334155}
.cat-product__thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.cat-product__noimg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;color:#94a3b8;
}
/* Stacked badge column on the top-left of the hero image. */
.cat-product__badges{
  position:absolute;top:14px;left:14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  z-index:2;pointer-events:none;
}
.cat-product__badges .cat-card__badge{position:static;pointer-events:auto}

/* Right column — info pane. Stack everything with consistent rhythm. */
.cat-product__info{
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
.cat-product__brand{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#64748b;margin:0;
}
.cat-product__title{
  margin:0;
  font-size:30px;line-height:1.15;font-weight:800;
  color:var(--text,#0f172a);
  letter-spacing:-.01em;
}
.cat-product__model{
  margin:0;
  font-size:14px;font-weight:600;color:#475569;
  letter-spacing:.02em;
}
[data-theme="dark"] .cat-product__title{color:var(--font-color,#e2e8f0)}
[data-theme="dark"] .cat-product__model{color:#cbd5e1}

.cat-product__meta-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:2px;
}
.cat-product__chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:#f1f5f9;color:#334155;
  font-size:12.5px;font-weight:600;
  border:1px solid var(--line,#e2e8f0);
}
[data-theme="dark"] .cat-product__chip{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;color:var(--font-color,#cbd5e1);
}

.cat-product__price{
  display:flex;align-items:baseline;gap:8px;
  padding:14px 0 4px;
  border-top:1px solid var(--line,#e2e8f0);
}
.cat-product__price-lead{
  font-size:12px;color:#94a3b8;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}
.cat-product__price strong{
  font-size:26px;font-weight:800;color:var(--text,#0f172a);
}
[data-theme="dark"] .cat-product__price{border-top-color:#334155}
[data-theme="dark"] .cat-product__price strong{color:var(--font-color,#e2e8f0)}

.cat-product__lede{
  margin:0;
  font-size:14.5px;line-height:1.55;color:#475569;
}
[data-theme="dark"] .cat-product__lede{color:#cbd5e1}

.cat-product__cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:6px;
  padding:13px 22px;
  font-size:15px;font-weight:700;
  border-radius:12px;
}
.cat-product__cta i{font-size:14px}
.cat-product__cta-help{
  margin:-2px 0 0;font-size:12.5px;color:#64748b;max-width:480px;
}
[data-theme="dark"] .cat-product__cta-help{color:#94a3b8}

/* Variant sections — colours + sizes. Both use the same vertical
   rhythm as the rest of the column, with a small heading and a
   horizontal wrap of pill chips. */
.cat-product__variants{
  margin-top:12px;padding-top:18px;
  border-top:1px solid var(--line,#e2e8f0);
}
[data-theme="dark"] .cat-product__variants{border-top-color:#334155}
.cat-product__var-title{
  margin:0 0 10px;
  font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#475569;
}
[data-theme="dark"] .cat-product__var-title{color:#cbd5e1}

.cat-product__swatches{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.cat-product__swatch{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px 5px 6px;
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:999px;
  font-size:12.5px;color:#334155;font-weight:600;
  transition:border-color .12s, box-shadow .12s;
}
.cat-product__swatch:hover{
  border-color:#cbd5e1;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.cat-product__swatch-dot{
  width:18px;height:18px;border-radius:50%;
  background:#cccccc;
  border:1px solid rgba(15,23,42,.12);
  flex:0 0 auto;
}
[data-theme="dark"] .cat-product__swatch{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;color:var(--font-color,#cbd5e1);
}

.cat-product__sizes{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.cat-product__size{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:6px 10px;
  background:#fff;
  border:1px solid var(--line,#e2e8f0);
  border-radius:8px;
  font-size:12.5px;font-weight:700;color:#334155;
  text-align:center;
}
[data-theme="dark"] .cat-product__size{
  background:var(--content-bg-color,#0f172a);
  border-color:#334155;color:var(--font-color,#cbd5e1);
}

/* Print & fulfillment FAQ card — definition list of three rows. Kept
   visually quieter than the variants block so the buy CTA stays the
   loudest element above the fold. */
.cat-product__faq{
  margin-top:12px;padding:18px 20px;
  background:#f8fafc;
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
}
[data-theme="dark"] .cat-product__faq{
  background:#0b1220;border-color:#334155;
}
.cat-product__faq .cat-product__var-title{margin-bottom:12px}
.cat-product__faq dl{margin:0;display:grid;gap:10px}
.cat-product__faq dt{
  margin:0;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#64748b;
}
.cat-product__faq dd{
  margin:2px 0 0;font-size:13.5px;line-height:1.5;color:#475569;
}
[data-theme="dark"] .cat-product__faq dt{color:#94a3b8}
[data-theme="dark"] .cat-product__faq dd{color:#cbd5e1}

/* 404 fallback uses .cat-empty.cat-product__notfound — share the empty
   state's centred typography but tighten the iconography. */
.cat-product__notfound{padding:100px 20px}
.cat-product__notfound h1{
  margin:8px 0 6px;font-size:22px;font-weight:800;color:var(--text,#0f172a);
}
[data-theme="dark"] .cat-product__notfound h1{color:var(--font-color,#e2e8f0)}

@media (max-width:720px){
  .cat-product{margin-bottom:32px}
  .cat-product__title{font-size:24px}
  .cat-product__price strong{font-size:22px}
  .cat-product__cta{width:100%;justify-content:center}
  .cat-product__faq{padding:16px}
}

@media (max-width:720px){
  body.page-v6.page-catalog main.wrap{padding:16px 16px 64px}
  .cat-hero{padding:28px 22px;border-radius:14px}
  .cat-hero__title{font-size:26px}
  .cat-hero__lead{font-size:14px}
  .cat-hero__turnaround{font-size:12.5px;padding:6px 12px}
  .cat-grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:12px}
  .cat-card__name{font-size:13.5px}
  .cat-card__price strong{font-size:13.5px}
}

/* =====================================================================
   WHOLESALE — left sidebar filter (brand / colour / size) + dedicated
   "All brands" gallery page. Sidebar pins to the left of the catalogue
   grid on desktop; collapses on phones where the slide-out drawer in
   the header takes over.
   ===================================================================== */

main.wrap--marketplace.ws-with-sidebar{
  display:grid;
  grid-template-columns:240px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

/* ============================================================
   Wholesale active-search summary card
   Replaces the prior single-line `24 blanks matching "zip" · Clear`
   crumb that read as a stray caption pinned to the hero. The card
   layout puts the result count + dismissable query chip on a
   contained surface so the buyer can see what was searched and
   clear it with a real button rather than a small inline link.
   ============================================================ */
.ws-search-summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* Top margin separates the card from the hero strip — without it
     the card visually fused with the hero's bottom border. */
  margin:18px 0 16px;
  padding:12px 16px;
  background:linear-gradient(0deg, rgba(255,255,255,.6), rgba(255,255,255,.6)), #fff;
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
  flex-wrap:wrap;
}
.ws-search-summary__lead{
  display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;
  flex-wrap:wrap;
}
.ws-search-summary__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:rgba(37,99,235,.10);
  color:var(--brand, #2563eb);font-size:14px;
}
.ws-search-summary__text{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--text, #0f172a);min-width:0;
}
.ws-search-summary__count{
  font-size:18px;font-weight:800;color:var(--text, #0f172a);line-height:1;
}
.ws-search-summary__count-lbl{
  color:var(--text-mute, #64748b);font-weight:500;
}
.ws-search-summary__chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#eef2ff;border:1px solid #c7d2fe;
  color:#3730a3;
  padding:4px 10px 4px 8px;border-radius:999px;
  font-weight:700;font-size:13px;
  max-width:60ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ws-search-summary__chip-quote{font-size:9px;opacity:.65}
.ws-search-summary__chip-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.ws-search-summary__clear{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  background:#fff;border:1px solid var(--line, #e5e7eb);
  color:var(--text, #0f172a);font-weight:600;font-size:13px;
  text-decoration:none;cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.ws-search-summary__clear:hover{
  background:#fee2e2;border-color:#fecaca;color:#b91c1c;
}
.ws-search-summary__clear i{font-size:12px}
@media (max-width:560px){
  .ws-search-summary{padding:10px 12px;gap:10px}
  .ws-search-summary__icon{width:30px;height:30px;font-size:13px}
  .ws-search-summary__count{font-size:16px}
  .ws-search-summary__text{font-size:13px}
  .ws-search-summary__clear{padding:7px 12px;font-size:12px}
  /* Hide the verbose label on phones — the icon + the × are enough */
  .ws-search-summary__clear span{display:none}
}
.ws-sidebar{
  position:sticky;top:80px;
  background:#fff;border:1px solid var(--line, #e5e7eb);border-radius:12px;
  padding:16px 14px;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
  font-size:13px;
}
.ws-sidebar__title{
  margin:0 0 8px;font-size:14px;font-weight:700;
  color:var(--text, #0f172a);
  text-transform:uppercase;letter-spacing:.05em;
}
.ws-sidebar__clear{
  display:inline-flex;align-items:center;gap:6px;
  background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;
  border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;
  cursor:pointer;margin-bottom:12px;width:100%;justify-content:center;
}
.ws-sidebar__clear:hover{background:#fecaca}
.ws-sidebar__group{
  border-top:1px solid var(--line, #e5e7eb);padding-top:12px;margin-top:12px;
}
.ws-sidebar__group:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ws-sidebar__group-title{
  margin:0 0 8px;font-size:12px;font-weight:700;color:var(--text, #0f172a);
  text-transform:uppercase;letter-spacing:.04em;
}
.ws-sidebar__search{
  width:100%;padding:6px 8px;font-size:12px;
  border:1px solid var(--line, #cbd5e1);border-radius:6px;
  background:#fff;margin-bottom:8px;
}
.ws-sidebar__search:focus{
  outline:none;border-color:var(--brand, #2563eb);
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
.ws-sidebar__list{
  list-style:none;margin:0;padding:0;
  max-height:240px;overflow-y:auto;
}
.ws-sidebar__list--inline{
  display:flex;flex-wrap:wrap;gap:6px;max-height:none;
}
.ws-sidebar__opt{
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size:13px;color:var(--text, #0f172a);
  cursor:pointer;
}
.ws-sidebar__opt input[type="checkbox"]{accent-color:var(--brand, #2563eb)}
.ws-sidebar__opt span{flex:1;line-height:1.3}
.ws-sidebar__opt:hover{color:var(--brand, #2563eb)}

.ws-sidebar__chip{
  display:inline-flex;align-items:center;
  padding:5px 10px;border:1px solid var(--line, #cbd5e1);border-radius:14px;
  font-size:12px;font-weight:600;background:#fff;cursor:pointer;
  user-select:none;
}
.ws-sidebar__chip input{display:none}
.ws-sidebar__chip:has(input:checked){
  background:var(--brand, #2563eb);color:#fff;border-color:var(--brand, #2563eb);
}
.ws-sidebar__chip:hover{border-color:var(--brand, #2563eb)}

@media (max-width:900px){
  /* Hide the persistent sidebar on phones — the existing drawer in
     header_v6.php (data-ws-open) covers mobile filtering. */
  main.wrap--marketplace.ws-with-sidebar{
    grid-template-columns:1fr;
  }
  .ws-sidebar{display:none}
}

/* "View all brands" affordance at the end of the brand pill row. Brand
   pills look like chips — make this one read as a CTA so it stands
   apart and doesn't get mistaken for one more brand. */
.mkt-cat--view-all{
  background:var(--brand, #2563eb);color:#fff;border-color:var(--brand, #2563eb);
  font-weight:700;
}
.mkt-cat--view-all:hover{background:#1d4ed8;color:#fff}

/* =====================================================================
   WHOLESALE — /wholesale/brands gallery
   ===================================================================== */

.ws-brands{padding-top:24px}
.ws-brands__head{margin-bottom:24px}
.ws-brands__back{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--brand, #2563eb);text-decoration:none;font-weight:600;
  margin-bottom:10px;
}
.ws-brands__back:hover{text-decoration:underline}
.ws-brands h1{margin:0 0 6px;font-size:28px;font-weight:800;color:var(--text, #0f172a)}
.ws-brands__head p{margin:0;color:var(--text-dim, #64748b);font-size:14px}

.ws-brands__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:14px;
}
.ws-brand-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line, #e5e7eb);border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.ws-brand-card:hover{
  border-color:var(--brand, #2563eb);
  box-shadow:0 6px 18px rgba(37,99,235,.10);
  transform:translateY(-2px);
}
.ws-brand-card__media{
  aspect-ratio:1/1;background:#f8fafc;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ws-brand-card__media img{
  width:100%;height:100%;object-fit:cover;
}
.ws-brand-card__monogram{
  font-size:48px;font-weight:800;color:#cbd5e1;
}
.ws-brand-card__body{padding:12px 14px}
.ws-brand-card__name{
  margin:0 0 3px;font-size:15px;font-weight:700;color:var(--text, #0f172a);
  line-height:1.2;
}
.ws-brand-card__count{
  margin:0;font-size:12px;color:var(--text-dim, #64748b);
}

/* Sidebar header row + close button (mobile drawer) ------------------ */
.ws-sidebar__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px;
}

/* ============================================================
   /templates/{slug} — Template product page
   ============================================================
   The body lands with `palette-m2` (the cream palette) inherited
   from the homepage default, which renders --bg as #f6efdf — that
   was the cream/beige background bleeding through the page on
   mobile. Override --bg back to #ffffff for the templates product
   page so the layout reads as a clean storefront product page,
   matching the marketplace product page in feel.
   ============================================================ */
body.page-v6.page-templates-product{
  --bg:#ffffff;
  background:#ffffff;
}

/* Outer grid — stacks cleanly on tablet + mobile. */
body.page-v6.page-templates-product .tpl-product{ padding-bottom:60px; }
body.page-v6.page-templates-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-templates-product .mkt-product__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* Left column — live shirt mockup + design canvas preview.
   Mirrors the homepage designer's shirt+canvas pattern: the blank
   shirt PNG flow-sizes the stage so the stage inherits the shirt's
   natural aspect ratio, and the design canvas overlays the chest
   print rect with absolute positioning + inline percentage geometry
   from mkt_style_geometry(). Both swap when style/colour changes. */
body.page-v6.page-templates-product .tpl-pmedia{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
body.page-v6.page-templates-product .tpl-pmedia__stage{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.06);
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  /* Plain white stage so the shirt PNG sits on a clean canvas. The
     canvas-vs-shirt alignment math (inline top/left/width/height %)
     is computed against the shirt PNG aspect, so we let the shirt
     drive the stage height — no aspect-ratio reservation. The shirt
     fills the stage edge-to-edge with no empty whitespace. */
  background:#ffffff;
  line-height:0;
}
/* Fallback: if no shirt PNG resolved for this (style, colour), reserve
   a 4:5 box so the stage doesn't collapse to zero height. */
body.page-v6.page-templates-product .tpl-pmedia__stage:not(:has(.tpl-pmedia__shirt[src]:not([src=""]))){
  aspect-ratio:4/5;
}
/* The shirt PNG drives stage height: width:100% + height:auto means
   the stage's natural height equals the shirt's natural height, so
   the print-area % math (which is relative to the stage) lands the
   canvas exactly on the chest. No flex centering — that would pull
   the shirt away from the stage edges and break the canvas alignment. */
body.page-v6.page-templates-product .tpl-pmedia__shirt{
  width:100%;
  height:auto;
  display:block;
}

/* ---- Full-size design view ----
   Buyers can toggle to inspect the artwork at print size without the
   shirt around it. The stage paints the currently-selected shirt
   colour as the background (set inline via JS on view switch), so the
   design — which is often white — is still visible against the same
   shirt colour the customer will receive. The canvas keeps its inline
   % position normally, so we override with !important here. */
body.page-v6.page-templates-product .tpl-pmedia__stage[data-view="design"]{
  /* The shirt PNG normally drives stage height. In design view the
     shirt is hidden, so we explicitly reserve a 4:5 box so the stage
     doesn't collapse to zero height (which would clip the canvas). */
  aspect-ratio:4/5;
}
body.page-v6.page-templates-product .tpl-pmedia__stage[data-view="design"] .tpl-pmedia__shirt{
  display:none;
}
body.page-v6.page-templates-product .tpl-pmedia__stage[data-view="design"] .tpl-pmedia__canvas--print{
  top:4% !important;
  left:4% !important;
  width:92% !important;
  height:92% !important;
}

/* ---- Preview view toggle (Mockup vs Full-size design) ---- */
body.page-v6.page-templates-product .tpl-pview{
  display:inline-flex;
  gap:4px;
  padding:4px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
  align-self:center;
  margin-bottom:14px;
  line-height:1;
}
body.page-v6.page-templates-product .tpl-pview__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;
  border:0;border-radius:999px;
  background:transparent;color:#475569;
  font-size:12.5px;font-weight:700;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
body.page-v6.page-templates-product .tpl-pview__btn:hover{ color:#0f172a; }
body.page-v6.page-templates-product .tpl-pview__btn.is-active{
  background:#0f172a;color:#fff;
  box-shadow:0 4px 10px -6px rgba(15,23,42,.6);
}
body.page-v6.page-templates-product .tpl-pview__btn i{ font-size:11px; }
body.page-v6.page-templates-product .tpl-pmedia__shirt{
  display:block;
  width:100%;
  height:auto;
}
/* Design canvas — top/left/width/height set inline (per-style geometry
   from mkt_style_geometry()). pointer-events:none keeps swatch/size
   clicks routable when the canvas overlaps adjacent UI on small screens. */
body.page-v6.page-templates-product .tpl-pmedia__canvas--print{
  position:absolute;
  object-fit:contain;
  object-position:top center;
  pointer-events:none;
  display:block;
}

/* Trust strip beneath the preview */
body.page-v6.page-templates-product .tpl-trust{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
body.page-v6.page-templates-product .tpl-trust__item{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:2px;
  padding:10px 12px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:10px;
  font-size:12px;
  color:#475569;
}
body.page-v6.page-templates-product .tpl-trust__item i{
  color:#4f46e5;
  font-size:16px;
  margin-bottom:4px;
}
body.page-v6.page-templates-product .tpl-trust__item strong{
  font-size:13px; font-weight:800;
  color:#0f172a;
}
@media (max-width:560px){
  body.page-v6.page-templates-product .tpl-trust{
    grid-template-columns:1fr;
  }
}

/* Right column — info + configurator */
body.page-v6.page-templates-product .mkt-pinfo{
  display:flex; flex-direction:column;
  gap:18px;
  min-width:0;
}
body.page-v6.page-templates-product .mkt-pinfo > *{ min-width:0; }
body.page-v6.page-templates-product .mkt-pinfo__cat{
  font-size:11px; font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#4f46e5;
}
body.page-v6.page-templates-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:#0f172a;
}
body.page-v6.page-templates-product .mkt-pinfo__price{
  display:flex; align-items:baseline; gap:12px;
  flex-wrap:wrap;
}
body.page-v6.page-templates-product .mkt-pinfo__price-now{
  font-size:clamp(26px, 3vw, 34px);
  font-weight:900;
  color:#0f172a;
  letter-spacing:-0.02em;
}
body.page-v6.page-templates-product .mp-currency-label{
  font-size:13px;
  color:#64748b;
  font-weight:600;
}
body.page-v6.page-templates-product .mkt-pinfo__opt{ display:block; }
body.page-v6.page-templates-product .mkt-pinfo__opt-label{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  font-size:13px; font-weight:700;
  color:#0f172a;
  margin:0 0 10px;
  text-transform:none;
  letter-spacing:0;
}
body.page-v6.page-templates-product .mkt-pinfo__opt-val{
  font-weight:500; color:#64748b;
}

/* Personalisation fields */
body.page-v6.page-templates-product .tpl-fields #tplFields{
  display:flex; flex-direction:column; gap:10px;
}
body.page-v6.page-templates-product .tpl-field{
  display:flex; flex-direction:column; gap:4px;
  width:100%;
}
body.page-v6.page-templates-product .tpl-field label{
  font-size:12px; font-weight:700;
  color:#334155;
  letter-spacing:.02em;
}
body.page-v6.page-templates-product .tpl-field input{
  width:100%;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:#0f172a;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
body.page-v6.page-templates-product .tpl-field input:focus{
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,0.12);
}

/* Style dropdown */
body.page-v6.page-templates-product .tpl-select{
  width:100%;
  padding:10px 36px 10px 12px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  color:#0f172a;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M2 4l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
  box-sizing:border-box;
}
body.page-v6.page-templates-product .tpl-select:focus{
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,0.12);
}

/* Swatches — match the marketplace product page exactly. */
body.page-v6.page-templates-product .mkt-swatches{
  display:flex; flex-wrap:wrap; gap:10px;
}
body.page-v6.page-templates-product .mkt-swatch{
  width:40px; height:40px;
  border-radius:9px;
  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-templates-product .mkt-swatch:hover{ transform:scale(1.08); }
body.page-v6.page-templates-product .mkt-swatch.is-selected{
  border-color:#4f46e5;
  box-shadow:inset 0 0 0 3px #fff, 0 0 0 1px #4f46e5;
}

/* Size pills */
body.page-v6.page-templates-product .mkt-sizes{
  display:flex; flex-wrap:wrap; gap:8px;
}
body.page-v6.page-templates-product .mkt-size{
  min-width:48px;
  padding:8px 14px;
  border-radius:8px;
  border:1.5px solid #e2e8f0;
  background:#fff;
  font-size:13px; font-weight:700;
  color:#334155;
  cursor:pointer;
  transition:all .12s ease;
}
body.page-v6.page-templates-product .mkt-size:hover{ border-color:#cbd5e1; }
body.page-v6.page-templates-product .mkt-size.is-selected{
  border-color:#4f46e5;
  background:#eef2ff;
  color:#4338ca;
}
body.page-v6.page-templates-product .mkt-size.is-unavailable{
  opacity:.4;
  cursor:not-allowed;
  text-decoration:line-through;
}

/* Quantity stepper */
body.page-v6.page-templates-product .mkt-qty{
  display:inline-flex; align-items:center; gap:0;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
body.page-v6.page-templates-product .mkt-qty__btn{
  width:38px; height:38px;
  background:#f8fafc;
  border:0;
  color:#334155;
  cursor:pointer;
  font-size:13px;
  transition:background .12s ease;
}
body.page-v6.page-templates-product .mkt-qty__btn:hover{ background:#eef2ff; color:#4338ca; }
body.page-v6.page-templates-product .mkt-qty__input{
  width:48px;
  text-align:center;
  border:0;
  font-size:14px; font-weight:700;
  color:#0f172a;
  background:transparent;
  font-family:inherit;
}
body.page-v6.page-templates-product .mkt-qty__input:focus{ outline:none; }

/* Add to Cart CTA */
body.page-v6.page-templates-product .mkt-pinfo__cta{
  display:flex; flex-direction:column; gap:10px;
  margin-top:6px;
}
body.page-v6.page-templates-product .mkt-pinfo__add{
  width:100%;
  padding:16px 20px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff;
  font-size:15px; font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow:0 4px 14px rgba(79,70,229,0.25);
}
body.page-v6.page-templates-product .mkt-pinfo__add:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(79,70,229,0.32);
}
body.page-v6.page-templates-product .mkt-pinfo__add:disabled{
  opacity:.6;
  cursor:wait;
  transform:none;
}

/* "Add to My Products" — Tshirtgang logo-blue variant, sits below the
   primary Add-to-Cart CTA for signed-in sellers. */
body.page-v6.page-templates-product .mkt-pinfo__add--mine{
  background:#025077;
  box-shadow:0 4px 14px rgba(2,80,119,.25);
  margin-top:2px;
}
body.page-v6.page-templates-product .mkt-pinfo__add--mine:hover{
  background:#013e5c;
  box-shadow:0 6px 18px rgba(2,80,119,.32);
}

/* Inline note */
body.page-v6.page-templates-product .tpl-pinfo__note{
  padding:10px 12px;
  border-radius:10px;
  font-size:13px; font-weight:600;
  border:1px solid transparent;
}
body.page-v6.page-templates-product .tpl-pinfo__note.is-error{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}
body.page-v6.page-templates-product .tpl-pinfo__note.is-success{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#15803d;
}

/* Mobile-first: hide sticky cart bar on desktop. */
body.page-v6.page-templates-product .mkt-mobile-cta{ display:none; }

/* ============================================================
   Templates product page — mobile reorder + sticky CTA bar
   On mobile we collapse the two columns by setting both
   .tpl-pmedia + .tpl-pinfo to display:contents, then reorder
   their grandchildren via `order` so the trust strip and any
   other reassurance blocks land BELOW the Add-to-Cart button.
   ============================================================ */
@media (max-width:960px){
  body.page-v6.page-templates-product .mkt-product__grid{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-bottom:90px;            /* clear the fixed CTA bar */
  }
  body.page-v6.page-templates-product .tpl-pmedia,
  body.page-v6.page-templates-product .tpl-pinfo,
  body.page-v6.page-templates-product .mkt-pinfo{
    display:contents;
  }

  /* Reorder grandchildren via `order`. Items at the same `order`
     keep document order, so within an opt block (style → colour
     → size → qty) the natural sequence is preserved. */
  body.page-v6.page-templates-product .mkt-pinfo__cat        { order:1; }
  body.page-v6.page-templates-product .mkt-pinfo__title      { order:2; margin-top:4px; }
  body.page-v6.page-templates-product .tpl-pmedia__stage     { order:3; }
  body.page-v6.page-templates-product .mkt-pinfo__price      { order:4; }
  body.page-v6.page-templates-product .mkt-pinfo__opt        { order:5; }
  body.page-v6.page-templates-product .mkt-pinfo__cta        { order:6; }
  body.page-v6.page-templates-product .tpl-pinfo__note       { order:7; }
  /* Trust strip drops below the cart button on mobile. */
  body.page-v6.page-templates-product .tpl-trust             { order:8; margin-top:14px; }

  /* Make CTA + note + trust span the full column width on mobile. */
  body.page-v6.page-templates-product .mkt-pinfo__cta,
  body.page-v6.page-templates-product .tpl-pinfo__note,
  body.page-v6.page-templates-product .tpl-trust{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
    align-self:stretch;
  }

  /* Form fields go full-width on mobile. */
  body.page-v6.page-templates-product .mkt-pinfo__opt,
  body.page-v6.page-templates-product .tpl-fields,
  body.page-v6.page-templates-product .tpl-fields #tplFields,
  body.page-v6.page-templates-product .tpl-field{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    align-self:stretch;
  }
  body.page-v6.page-templates-product .tpl-field input,
  body.page-v6.page-templates-product .tpl-select{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  /* ── Sticky bottom Add-to-Cart bar ─────────────────────────
     Re-emit the marketplace + wholesale .mkt-mobile-cta rules
     under body.page-templates-product so the bar paints
     identically on this page. */
  body.page-v6.page-templates-product .mkt-mobile-cta{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9000;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:#ffffff;
    border-top:1px solid rgba(15,23,42,0.10);
    box-shadow:0 -2px 12px rgba(15,23,42,0.10);
  }
  body.page-v6.page-templates-product .mkt-mobile-cta__price{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    flex:0 0 auto;
  }
  body.page-v6.page-templates-product .mkt-mobile-cta__price-label{
    font-size:11px;
    font-weight:600;
    color:#64748b;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  body.page-v6.page-templates-product .mkt-mobile-cta__price-now{
    font-size:20px;
    font-weight:900;
    color:#0f172a;
  }
  body.page-v6.page-templates-product .mkt-mobile-cta__add{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:12px 18px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff;
    font-size:15px;
    font-weight:800;
    letter-spacing:0.01em;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(79,70,229,0.30);
  }
  body.page-v6.page-templates-product .mkt-mobile-cta__add:active{
    transform:translateY(1px);
  }
}

/* ============================================================
   Style carousel (.tpl-stylecarousel)
   Replaces the legacy <select id="tplStyle"> dropdown — a
   horizontally-scrollable strip of style cards with a thumbnail
   per style. On desktop, prev/next chevrons page the strip;
   on mobile the strip is swipeable (overflow-x:auto with
   scroll-snap so each card lands flush). Selected card gets a
   brand-coloured ring + glow.
   ============================================================ */
body.page-v6.page-templates-product .tpl-style-opt{
  /* The carousel sits inside the standard .mkt-pinfo__opt slot,
     but it needs a bit more room than the colour swatches above
     since the cards are 100×130. */
  min-width:0;
}
body.page-v6.page-templates-product .tpl-stylecarousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
body.page-v6.page-templates-product .tpl-stylecarousel__track{
  flex:1 1 auto;
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:8px;
  /* Hide scrollbar visually — the cards are the affordance. */
  scrollbar-width:none;
  padding:4px 2px;
}
body.page-v6.page-templates-product .tpl-stylecarousel__track::-webkit-scrollbar{
  display:none;
}

/* Individual style card */
body.page-v6.page-templates-product .tpl-style-card{
  flex:0 0 auto;
  width:100px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:6px;
  border-radius:12px;
  border:1.5px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  scroll-snap-align:start;
  font-family:inherit;
}
body.page-v6.page-templates-product .tpl-style-card:hover{
  border-color:#cbd5e1;
  transform:translateY(-1px);
}
body.page-v6.page-templates-product .tpl-style-card.is-selected{
  border-color:#4f46e5;
  box-shadow:0 0 0 1px #4f46e5, 0 4px 14px rgba(79,70,229,0.18);
  background:#eef2ff;
}
body.page-v6.page-templates-product .tpl-style-card__thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  background:#f8fafc;
}
body.page-v6.page-templates-product .tpl-style-card__thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
body.page-v6.page-templates-product .tpl-style-card__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:28px;
}
body.page-v6.page-templates-product .tpl-style-card__name{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#334155;
  text-align:center;
  line-height:1.25;
  /* Keep names to a single line so card heights stay even — name still
     visible in full via the title attribute on the button. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.page-v6.page-templates-product .tpl-style-card.is-selected .tpl-style-card__name{
  color:#4338ca;
}

/* Prev/next chevrons — desktop only. Hidden on mobile so the swipe
   gesture is the single interaction. */
body.page-v6.page-templates-product .tpl-stylecarousel__nav{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475569;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s ease, color .12s ease, border-color .12s ease, opacity .12s ease;
  box-shadow:0 1px 2px rgba(15,23,42,0.06);
}
body.page-v6.page-templates-product .tpl-stylecarousel__nav:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4338ca;
}
body.page-v6.page-templates-product .tpl-stylecarousel__nav.is-disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
body.page-v6.page-templates-product .tpl-stylecarousel__nav.is-hidden{
  display:none;
}
@media (max-width:640px){
  /* Mobile: hide chevrons, lean entirely on swipe. Track gets a small
     edge fade so users see there's more content beyond the right edge. */
  body.page-v6.page-templates-product .tpl-stylecarousel__nav{ display:none; }
  body.page-v6.page-templates-product .tpl-stylecarousel{
    margin-left:-2px;
    margin-right:-2px;
  }
  body.page-v6.page-templates-product .tpl-style-card{
    width:92px;
  }
}

/* ============================================================
   Templates product page — breadcrumb. Reuses .mkt-breadcrumb
   markup from the marketplace product page; the rules there are
   scoped to body.page-marketplace-product so we re-emit them
   under body.page-v6.page-templates-product to inherit the same
   visual treatment without polluting other pages.
   ============================================================ */
body.page-v6.page-templates-product .mkt-breadcrumb{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:22px 0 20px;
  font-size:13px;
  color:#64748b;
}
body.page-v6.page-templates-product .mkt-breadcrumb a{
  color:#64748b; text-decoration:none;
  padding:4px 6px; border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
body.page-v6.page-templates-product .mkt-breadcrumb a:hover{
  background:rgba(15,23,42,0.05);
  color:#4f46e5;
}
body.page-v6.page-templates-product .mkt-breadcrumb__sep{
  color:rgba(15,23,42,0.35);
  font-size:10px;
}
body.page-v6.page-templates-product .mkt-breadcrumb__here,
body.page-v6.page-templates-product .mkt-breadcrumb__current{
  color:#0f172a;
  font-weight:600;
  padding:4px 6px;
}

/* ============================================================
   Templates product page — long-form description block
   (SEO audit §6). Sits below the grid as crawlable on-page
   text so the page reads as substantive content to Google.
   ============================================================ */
body.page-v6.page-templates-product .tpl-prose{
  max-width:920px;
  margin:32px auto 8px;
  padding:24px 28px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
body.page-v6.page-templates-product .tpl-prose__heading{
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.01em;
}
body.page-v6.page-templates-product .tpl-prose__p{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.65;
  color:#334155;
}
body.page-v6.page-templates-product .tpl-prose__p:last-child{
  margin-bottom:0;
}
body.page-v6.page-templates-product .tpl-prose__p strong{
  color:#0f172a;
  font-weight:700;
}
@media (max-width:960px){
  body.page-v6.page-templates-product .tpl-prose{
    margin:20px 14px 80px;
    padding:18px 18px;
    border-radius:12px;
  }
  body.page-v6.page-templates-product .tpl-prose__heading{
    font-size:17px;
  }
  body.page-v6.page-templates-product .tpl-prose__p{
    font-size:14px;
  }
}

/* ============================================================
   /templates — Template browse / grid page
   ============================================================
   Companion styles to /templates/{slug} above. Filter sidebar is
   ALWAYS a slide-out drawer (mobile + desktop). The header funnel
   (data-tpl-open in header_v6.php) and the in-page Filter & Sort
   pill both toggle body.tpl-filters-open.
   ============================================================ */

/* Page shell */
.tpl-v6{padding:0 0 48px}
.wrap--templates{max-width:1440px;margin:0 auto;padding:0 36px}

/* ── Hero band — colourful "customise it" hero ───────────────────
   v2 rebuild: replaces the old white hero with a vibrant gradient card
   matching the marketplace hero language but customisation-led. Two
   floating colour blobs add motion behind the headline. Scoped to
   .tpl-hero--v2 so any cached legacy markup still renders cleanly. */
.tpl-hero{padding:36px 0 22px;border-bottom:1px solid #e2e8f0;margin-bottom:22px}
.tpl-hero__inner{display:flex;flex-direction:column;gap:16px}
.tpl-hero__title{font-size:34px;font-weight:800;color:#0f172a;margin:0;line-height:1.05;letter-spacing:-.01em}
.tpl-hero__title-accent{color:#2563eb;display:block}
.tpl-hero__subtitle{font-size:15px;color:#475569;margin:0;max-width:680px;line-height:1.55}

.tpl-hero--v2{
  position:relative;
  margin:20px 0 32px;
  padding:56px 48px 52px;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  border:0;
  background:linear-gradient(135deg,#4338ca 0%,#7c3aed 45%,#db2777 100%);
  color:#fff;
  box-shadow:0 30px 60px -30px rgba(67,56,202,.45);
}
.tpl-hero--v2 .tpl-hero__bg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.tpl-hero__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  animation:tplHeroFloat 9s ease-in-out infinite;
}
.tpl-hero__blob--1{
  width:380px;height:380px;
  top:-80px; right:-60px;
  background:radial-gradient(circle at 30% 30%, #f59e0b 0%, transparent 70%);
  animation-delay:0s;
}
.tpl-hero__blob--2{
  width:300px;height:300px;
  bottom:-100px; left:25%;
  background:radial-gradient(circle at 50% 50%, #06b6d4 0%, transparent 70%);
  animation-delay:-3s;
}
.tpl-hero__blob--3{
  width:240px;height:240px;
  top:30%; right:30%;
  background:radial-gradient(circle at 50% 50%, #ec4899 0%, transparent 70%);
  animation-delay:-6s;
  opacity:.4;
}
@keyframes tplHeroFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(20px,-20px) scale(1.08)}
}
.tpl-hero--v2 .tpl-hero__inner{
  position:relative; z-index:1;
  display:block;
  max-width:760px;
}
.tpl-hero__left{display:flex; flex-direction:column; gap:18px}
.tpl-hero__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:.14em;
  color:#fff;
  box-shadow:0 10px 25px -10px rgba(239,68,68,.7);
  align-self:flex-start;
}
.tpl-hero__pill i{font-size:11px}
.tpl-hero--v2 .tpl-hero__title{
  font-size:clamp(36px, 5vw, 60px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
  color:#fff;
}
.tpl-hero--v2 .tpl-hero__title-accent{
  background:linear-gradient(135deg,#fbbf24,#f472b6 50%,#a78bfa);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline;
}
.tpl-hero--v2 .tpl-hero__subtitle{
  font-size:16px; line-height:1.55;
  color:rgba(255,255,255,.85);
  margin:0;
  max-width:560px;
}
.tpl-hero--v2 .tpl-hero__subtitle strong{color:#fff; font-weight:700}
.tpl-hero__cta-row{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:4px;
}
.tpl-hero__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border-radius:10px;
  font-size:15px; font-weight:700;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s;
  border:1.5px solid transparent;
  white-space:nowrap;
}
.tpl-hero__btn i{font-size:14px}
.tpl-hero__btn--primary{
  background:#fff;
  color:#4338ca;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.35);
}
.tpl-hero__btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px -10px rgba(0,0,0,.45);
  color:#4338ca;
}
.tpl-hero__btn--ghost{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.4);
}
.tpl-hero__btn--ghost:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
.tpl-hero__trust{
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-wrap:wrap; gap:14px 26px;
  font-size:13.5px;
  color:rgba(255,255,255,.85);
}
.tpl-hero__trust li{display:inline-flex; align-items:center; gap:8px}
.tpl-hero__trust i{color:#fbbf24; font-size:13px; width:16px; text-align:center}

@media (max-width:980px){
  .tpl-hero--v2{padding:40px 28px 38px; border-radius:22px; margin:16px 0 26px}
}
@media (max-width:560px){
  .tpl-hero--v2{padding:30px 18px 28px; border-radius:18px}
  .tpl-hero__cta-row{gap:10px}
  .tpl-hero__btn{padding:12px 18px; font-size:14px; width:100%; justify-content:center}
  .tpl-hero__trust{gap:10px 18px; font-size:12.5px}
}

/* ── Curated category cards — top 4 by template count ───────────
   Mirrors the marketplace .mkt-curated section but each card renders
   a real shirt-mockup composite (blank tee PNG + template thumbnail)
   at the chest, not a flat background image. Falls back to the
   --tpl-curated-bg colour when the mockup PNG can't be resolved. */
.tpl-curated{margin:0 0 36px}
.tpl-curated__head{margin:0 0 18px; text-align:center}
.tpl-curated__title{margin:0; font-size:30px; font-weight:900; color:#0f172a; letter-spacing:-.01em}
.tpl-curated__subtitle{margin:6px 0 0; font-size:14.5px; color:#64748b}
.tpl-curated__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.tpl-curated-card{
  position:relative;
  display:block;
  height:340px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:var(--tpl-curated-bg, #1f2937);
  box-shadow:0 16px 36px -16px rgba(15,23,42,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
.tpl-curated-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px -18px rgba(15,23,42,.5);
  color:#fff;
}
.tpl-curated-card:hover .tpl-curated-card__design{
  transform:translate(-50%, -50%) scale(1.05);
}
.tpl-curated-card__design{
  position:absolute;
  top:42%; left:50%;
  transform:translate(-50%, -50%);
  width:70%;
  max-height:62%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  z-index:1;
  transition:transform .35s ease;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
.tpl-curated-card__shirt-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:120px; color:rgba(255,255,255,.22);
  z-index:1;
}
.tpl-curated-card__overlay{
  position:absolute; inset:0;
  z-index:2;
  background:linear-gradient(to top,
    rgba(15,23,42,.82) 0%,
    rgba(15,23,42,.30) 50%,
    rgba(15,23,42,0)   80%);
}
.tpl-curated-card__copy{
  position:absolute; left:18px; right:18px; bottom:18px;
  z-index:3;
  display:flex; flex-direction:column; gap:4px;
}
.tpl-curated-card__name{
  font-size:22px; font-weight:900; line-height:1.15; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.tpl-curated-card__sub{
  font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media (max-width:1100px){
  .tpl-curated__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
  .tpl-curated__grid{grid-template-columns:1fr}
  .tpl-curated-card{height:260px}
  .tpl-curated__title{font-size:24px}
}

/* Top-level category tabs (horizontal pill row) */
.tpl-cat-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tpl-cat-tab{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#334155;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.tpl-cat-tab:hover{background:#f1f5f9;color:#0f172a}
.tpl-cat-tab.is-active{background:#0f172a;color:#fff;border-color:#0f172a}

/* Layout: single column at all widths because the sidebar is now
   always a drawer overlay rather than an inline column. The .tpl-layout
   wrapper just provides vertical rhythm. */
.tpl-layout{display:block}

/* ── Sidebar drawer ─────────────────────────────────────────────
   Hidden off-screen by default at every width. body.tpl-filters-open
   slides it in from the LEFT (matching the wholesale drawer behaviour
   so the design language is consistent — was right-side), with a
   backdrop dimming the page and z-index well above the rest of the
   chrome (header is z:50–60). */
.tpl-sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:min(86vw, 360px);
  max-height:100vh;
  background:#fff;
  border:0;
  border-radius:0;
  padding:18px 16px 22px;
  font-size:13px;
  overflow-y:auto;
  box-shadow:12px 0 30px rgba(15,23,42,.18);
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:1001;
}
.tpl-sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tpl-sidebar__title{margin:0;font-size:14px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:6px}
.tpl-sidebar__close{
  display:inline-flex;
  background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;
  width:32px;height:32px;
  align-items:center;justify-content:center;
  cursor:pointer;color:#0f172a;
}
.tpl-sidebar__close:hover{background:#e2e8f0}

.tpl-fgroup{border-top:1px solid #e2e8f0;padding-top:12px;margin-top:12px}
.tpl-fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.tpl-fgroup__title{margin:0 0 8px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}

/* Sidebar category list + sort list (shared visual treatment) */
.tpl-cat-list,.tpl-sort-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.tpl-cat-link,.tpl-sort-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;color:#334155;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .12s}
.tpl-cat-link:hover,.tpl-sort-link:hover{background:#f1f5f9;color:#0f172a}
.tpl-cat-link.is-active,.tpl-sort-link.is-active{background:#dbeafe;color:#1d4ed8;font-weight:700}
.tpl-chev{color:#94a3b8;font-size:10px}
.tpl-radio{width:14px;height:14px;border:2px solid #cbd5e1;border-radius:50%;flex-shrink:0;position:relative}
.tpl-sort-link.is-active .tpl-radio{border-color:#1d4ed8}
.tpl-sort-link.is-active .tpl-radio::after{content:"";position:absolute;inset:2px;background:#1d4ed8;border-radius:50%}

/* Backdrop sits just below the drawer. Hidden by default; the
   open-state class promotes it to display:block + opacity:1. The
   backdrop is itself the click target for "tap outside to close"
   (data-tpl-close on the element in templates_v6.php). */
.tpl-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  z-index:1000;
  opacity:0;
  transition:opacity .2s ease;
}

/* Open state — toggled by the header funnel and the in-page Filter
   pill. Locks page scroll while the drawer is up so the body
   underneath doesn't scroll behind the overlay. */
body.tpl-filters-open .tpl-sidebar{transform:translateX(0)}
body.tpl-filters-open .tpl-backdrop{display:block;opacity:1}
body.tpl-filters-open{overflow:hidden}

/* Active-filter chip rendered in the count row (replaces the old
   in-page "Filter & Sort" pill — the header funnel is now the
   primary filter affordance). Just a quiet brand-tinted counter so
   buyers can see at a glance whether filters are narrowing what
   they're looking at. */
.tpl-active-count{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:#eef2ff; color:#3730a3;
  font-size:12px; font-weight:700;
  border:1px solid #c7d2fe;
}
.tpl-active-count i{font-size:11px}

/* ── Count row (above the grid) ─────────────────────────────────
   Single line on desktop, wraps on small screens. The count text
   sits left, active-filter chip floats right. */
.tpl-count-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:0 0 16px;
}
.tpl-count{font-size:14px; color:#475569}
.tpl-count strong{color:#0f172a; font-weight:700}

/* Clear-filters link in the drawer */
.tpl-clear{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding:8px 12px; border-radius:8px;
  background:#fef2f2; color:#b91c1c; border:1px solid #fecaca;
  font-size:12.5px; font-weight:600; text-decoration:none;
  transition:background .12s, color .12s;
}
.tpl-clear:hover{background:#fee2e2; color:#7f1d1d}
.tpl-clear i{font-size:11px}

/* ── Empty state ────────────────────────────────────────────────
   Shown when no templates match the active filters or the table
   is empty. Mirrors the marketplace empty pattern visually. */
.tpl-empty{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:10px;
  padding:60px 20px;
  background:#f8fafc; border:1px dashed #cbd5e1; border-radius:14px;
}
.tpl-empty i{
  font-size:42px; color:#94a3b8; margin-bottom:6px;
}
.tpl-empty h3{
  margin:0; font-size:18px; font-weight:700; color:#0f172a;
}
.tpl-empty p{
  margin:0; font-size:14px; color:#64748b; max-width:420px; line-height:1.5;
}
.tpl-empty .btn{margin-top:6px}

/* ── Grid + cards ───────────────────────────────────────────────
   4-up on desktop, 3-up tablet, 2-up phone. Each card is an
   anchor that wraps a mockup composition + info block. The
   --tpl-card-bg custom property is set inline from the template's
   Shirt_Colour hex so the mockup area gets the design's mood. */
.tpl-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  margin:0 0 28px;
}
.tpl-card{
  position:relative;
  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;
}
.tpl-card:hover{
  transform:translateY(-4px);
  border-color:#c7d2fe;
  box-shadow:0 18px 36px -20px rgba(15,23,42,.32);
}
.tpl-card--featured{
  border-color:#fcd34d;
  box-shadow:0 0 0 1px #fcd34d inset;
}

/* Featured corner badge */
.tpl-card__badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.tpl-card__badge i{font-size:10px}
.tpl-card__badge--corner{
  position:absolute; top:10px; left:10px; z-index:3;
  box-shadow:0 4px 10px -4px rgba(245,158,11,.5);
}

/* Mockup stage — fixed square aspect ratio so the blank PNG and
   the design overlay (which is absolute-positioned with inline
   percentage offsets from mkt_style_geometry) line up correctly.
   Background is a fixed light grey rather than the per-template
   --tpl-card-bg hex — black/dark shirt colours bleeding into the
   card chrome made dark-shirt templates look like negative-space
   blocks in the grid. The variable still drives the .tpl-card__-
   shirt-blank-fallback rule below (where it's appropriate, since
   it represents the actual shirt colour when the blank PNG 404s).
   Padding on this container shrinks AND offsets both the blank
   PNG and the design overlay together — they're absolute-
   positioned children of this padding box, so the geometry stays
   aligned without touching mkt_style_geometry percentages. */
.tpl-card__shirt{
  position:relative;
  aspect-ratio:1/1;
  background:#f1f5f9;
  display:block;
  overflow:hidden;
  /* Top + sides padded heavily so the shirt has visible breathing
     room (matches the proportions on the product detail page —
     before this, dark/wide shirts looked like they were bursting
     out of the card with the collar touching the FEATURED badge).
     Container padding scales BOTH the blank PNG and the design
     overlay together since both are absolute-positioned children
     of this padding box, so mkt_style_geometry stays untouched. */
  padding:12% 14% 3%;
}
.tpl-card__shirt--mockup{background:#f1f5f9}

.tpl-card__shirt-blank{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  /* Inner padding effectively zero now that the parent handles the
     framing — keeping a tiny 2% so the blank PNG never quite
     touches the padding box edges. */
  padding:2%;
  transition:transform .25s ease;
  pointer-events:none;
}
.tpl-card:hover .tpl-card__shirt-blank{transform:scale(1.04)}

/* Fallback colour panel when the blank tee PNG fails to load — the
   inline JS in templates_v6.php swaps to display:grid on error. */
.tpl-card__shirt-blank-fallback{
  position:absolute; inset:0;
  background:var(--tpl-card-bg, #1f2937);
}

/* Design artwork overlay — inline style="top/left/width/height" is
   set from mkt_style_geometry chest print area; we just provide
   the positioning context + image fit. */
.tpl-card__shirt-design{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  transition:transform .25s ease;
}
.tpl-card:hover .tpl-card__shirt-design{transform:scale(1.04)}

/* Fallback shirt icon when no thumbnail exists */
.tpl-card__fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font-size:60px;
}

/* Hover hint pill — slides up on hover, hidden on touch screens
   via the pointer:coarse media query below. */
.tpl-card__hover-hint{
  position:absolute; left:50%; bottom:10px;
  transform:translate(-50%, 6px);
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:rgba(15,23,42,.85); color:#fff;
  font-size:12px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.tpl-card__hover-hint i{font-size:11px}
.tpl-card:hover .tpl-card__hover-hint{
  opacity:1; transform:translate(-50%, 0);
}

/* Card info block */
.tpl-card__info{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 14px 16px;
  background:#fff;
}
.tpl-card__cat{
  font-size:11px; font-weight:700; color:#6366f1;
  text-transform:uppercase; letter-spacing:.05em;
}
.tpl-card__title{
  margin:0;
  font-size:14.5px; font-weight:700; color:#0f172a;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;
}
.tpl-card__price-row{
  display:flex; align-items:baseline; gap:5px;
  margin-top:2px;
}
.tpl-card__from{font-size:11px; color:#94a3b8; font-weight:600}
.tpl-card__price{font-size:18px; font-weight:800; color:#0f172a}
.tpl-card__cur{font-size:11px; color:#94a3b8; font-weight:600}

.tpl-card__cta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px;
  padding:9px 14px;
  background:#0f172a; color:#fff;
  border-radius:10px;
  font-size:13px; font-weight:700;
  letter-spacing:.01em;
  transition:background .15s ease;
}
.tpl-card__cta i{font-size:12px}
.tpl-card:hover .tpl-card__cta{background:#4338ca}

/* On touch devices the hover-hint never paints (no :hover); the
   permanent CTA pill is enough so we drop the overlay entirely. */
@media (hover:none), (pointer:coarse){
  .tpl-card__hover-hint{display:none}
}

/* ── Pagination ─────────────────────────────────────────────────
   Compact pill row centred under the grid. */
.tpl-pagination{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:6px;
  margin:28px 0 8px;
}
.tpl-page-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:36px; height:36px;
  padding:0 12px;
  border-radius:8px;
  background:#fff; border:1px solid #e2e8f0;
  color:#334155; font-size:13px; font-weight:600;
  text-decoration:none;
  transition:background .12s, border-color .12s, color .12s;
}
.tpl-page-btn:hover{background:#f1f5f9; color:#0f172a; border-color:#cbd5e1}
.tpl-page-btn.is-current{
  background:#0f172a; border-color:#0f172a; color:#fff;
}
.tpl-page-btn.is-disabled{
  background:#f8fafc; color:#cbd5e1; border-color:#e2e8f0;
  cursor:not-allowed;
}
.tpl-page-btn--nav{padding:0 14px}
.tpl-page-btn--nav i{font-size:11px}
.tpl-page-gap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; color:#94a3b8; font-size:13px;
}

/* ── Mobile responsive ─────────────────────────────────────────
   Grid steps down to 3 → 2 columns. Card typography tightens up
   so the price row + Personalize CTA still fit comfortably at
   2-up on a phone. */
@media (max-width:1199px){
  .tpl-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px}
}
@media (max-width:820px){
  .tpl-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
  .tpl-card__info{padding:12px 12px 14px}
  .tpl-card__title{font-size:13.5px; min-height:2.7em}
  .tpl-card__price{font-size:16px}
  .tpl-card__cta{padding:8px 12px; font-size:12.5px}
  .tpl-count-row{margin-bottom:12px}
  .tpl-pagination{gap:4px}
  .tpl-page-btn{min-width:34px; height:34px; padding:0 10px; font-size:12.5px}
}
@media (max-width:420px){
  .tpl-grid{gap:10px}
  .tpl-card{border-radius:12px}
  .tpl-card__info{padding:10px 10px 12px; gap:4px}
  .tpl-card__cat{font-size:10px}
  .tpl-card__title{font-size:12.5px; min-height:2.6em}
  .tpl-card__from,.tpl-card__cur{font-size:10px}
  .tpl-card__price{font-size:14.5px}
  .tpl-card__cta{margin-top:8px; padding:7px 10px; font-size:12px}
}

/* =========================================================
   Wholesale country / currency popup
   Shown on /wholesale (and /wholesale/design/...) for visitors
   we can't auto-detect: non-logged-in users with no cookie, or
   logged-in users whose Registrations.User_Country is empty.
   Two buttons (CA / US) write the ws_currency cookie and reload
   so server-side price rendering switches CAD <-> USD.
   ========================================================= */
.ws-country-modal{
  position:fixed; inset:0; z-index:1100;
  display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55);
  padding:24px;
}
/* Show the modal from the server-set data-render="1" (PHP decided the
   guest needs to choose USD/CAD) OR from data-open="true" (JS path).
   Keying on data-render means the popup appears even if the inline
   toggle script is blocked/delayed — it no longer depends on JS to
   become visible; JS only wires the choice buttons. */
.ws-country-modal[data-open="true"],
.ws-country-modal[data-render="1"]{display:flex}
.ws-country-modal__card{
  background:#fff; border-radius:14px;
  max-width:440px; width:100%;
  padding:28px 26px 24px;
  box-shadow:0 20px 50px rgba(15,23,42,.30);
  text-align:center;
  font-family:var(--sans);
}
.ws-country-modal__icon{
  width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.10); color:#2563eb;
  font-size:22px; margin-bottom:14px;
}
.ws-country-modal__title{
  margin:0 0 6px; font-size:20px; font-weight:800; color:#0f172a;
}
.ws-country-modal__sub{
  margin:0 0 20px; font-size:14px; color:#475569; line-height:1.5;
}
.ws-country-modal__actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.ws-country-modal__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:10px;
  border:2px solid #cbd5e1; background:#fff; color:#0f172a;
  font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none;
  transition:border-color .15s, background .15s, transform .08s;
  min-width:160px; justify-content:center;
}
.ws-country-modal__btn:hover,
.ws-country-modal__btn:visited{color:#0f172a; text-decoration:none}
.ws-country-modal__btn:hover{border-color:#2563eb; background:#eff6ff}
.ws-country-modal__btn:active{transform:scale(0.97)}
.ws-country-modal__btn img{width:24px;height:18px;border-radius:2px;flex:0 0 auto}
.ws-country-modal__btn small{
  display:block;font-size:11px;font-weight:600;color:#64748b;margin-top:2px;
}
.ws-country-modal__btn-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}

/* =========================================================
   Wholesale decoration method picker
   Shown on /wholesale/design/... when more than one print
   method is enabled in admin (DTG / DTF / Embroidery).
   Embroidery selection triggers JS to bump min qty to 12
   and broadens the upload accept= to include .dst files.
   ========================================================= */
.ws-method-picker{
  margin:18px 0 8px;
  padding:14px 16px;
  border:1px solid #e5e7eb; border-radius:10px;
  background:#f8fafc;
}
.ws-method-picker__head{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:#475569;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:10px;
}
.ws-method-picker__opts{
  display:flex; gap:8px; flex-wrap:wrap;
}
.ws-method-picker__opt{
  flex:1 1 120px; min-width:120px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:8px;
  border:2px solid #cbd5e1; background:#fff; color:#0f172a;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.ws-method-picker__opt:hover{border-color:#2563eb}
.ws-method-picker__opt.is-active{
  background:#2563eb; color:#fff; border-color:#2563eb;
}
.ws-method-picker__hint{
  margin:10px 0 0; font-size:12px; color:#64748b; line-height:1.4;
}
.ws-method-picker__hint[hidden]{display:none}
.ws-method-picker[hidden]{display:none}

/* =========================================================
   Available decoration badges. Read-only informational chips
   surfaced near the product title so the buyer knows which
   print methods this style supports before they upload. The
   interactive picker (.ws-method-picker) is hidden until art
   is uploaded — these badges are the always-visible signal.
   ========================================================= */
.ws-method-badges{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:8px 0 14px;
  font-size:12px;
}
.ws-method-badges__label{
  display:inline-flex; align-items:center; gap:6px;
  color:#475569; font-weight:600;
  margin-right:4px;
}
.ws-method-badges__label i{color:#2563eb; font-size:11px}
.ws-method-badges__chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap;
}
.ws-method-badges__chip i{font-size:10px}
/* Per-method tints — small visual cue without screaming for attention.
   Sublimation gets a teal/cyan (matches the droplet icon), embroidery
   gets amber (lines up with the production-queue badge on the admin
   page so the colour vocab stays consistent). DTG/DTF keep the default
   indigo since that's the catch-all print method. */
.ws-method-badges__chip[data-method="sublimation"]{background:#ccfbf1;border-color:#5eead4;color:#0f766e}
.ws-method-badges__chip[data-method="embroidery"]{background:#fef3c7;border-color:#fcd34d;color:#92400e}

/* =========================================================
   FORUM (public-facing /forum/) — page hero + main shell.
   The forum page uses body.page-forum with the v6 shell
   (header_v6.php + footer_v6.php). These rules restore the
   visual chrome lost when v6.css was truncated mid-write —
   without them the page renders as bare HTML (numbered <ol>,
   no card layout, no hero band). Keep the structure simple:
   page-hero band on top → main content area in .wrap. The
   inner row markup (Announcements, Tshirtgang Commerce Store,
   etc.) is produced by forum/includes/viewindex.php and
   leans on the global flextable + cpv6 tokens, so we only
   need to style the forum-specific wrappers here.
   ========================================================= */
body.page-forum{background:#fef6e9}
body.page-forum .page-hero.forum-hero{
  background:linear-gradient(180deg,#fdf6e9 0%,#fbecd1 100%);
  padding:28px 0 22px;
  border-bottom:1px solid #e7d4ab;
}
.forum-breadcrumb{margin:0 0 12px;font-size:13px;color:#64748b}
.forum-breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.forum-breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.forum-breadcrumb li + li::before{
  content:"\203A";color:#94a3b8;margin-right:4px;font-weight:600;
}
.forum-breadcrumb a{color:#475569;text-decoration:none;font-weight:500}
.forum-breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.forum-breadcrumb [aria-current="page"]{color:#0f172a;font-weight:600}
.forum-hero__title{
  margin:0 0 6px;font-size:30px;font-weight:800;color:#0f172a;
  line-height:1.15;letter-spacing:-.01em;
}
.forum-hero__sub{
  margin:0;color:#475569;font-size:15px;max-width:760px;line-height:1.5;
}
/* Forum search bar — uses PageContent::generatePageSearchFunction()
   which emits .search.inline-search > .field > .mobile-search-bar.
   The legacy markup includes a visible "Search" <label> and a <br>;
   we hide the label and lay out the input + button as a single
   rounded pill matching the marketplace/wholesale header search.
   Width matches the .wrap content column (1180px) so the search
   pill spans the full hero band rather than being capped narrow. */
.forum-searchbar{margin:14px 0 0;width:100%;max-width:none}
.forum-searchbar .search.inline-search,
.forum-searchbar .field.search-field{display:block;margin:0;padding:0}
.forum-searchbar .field.search-field > label{
  /* The legacy markup hard-codes a "Search" label above the input.
     Hide it visually but keep it for screen readers. */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.forum-searchbar .field.search-field > br{display:none}
.forum-searchbar .mobile-search-bar{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #e2e8f0;border-radius:24px;
  padding:4px 4px 4px 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.forum-searchbar .search-input,
.forum-searchbar input[type=text],
.forum-searchbar input.input,
body.page-forum .forum-searchbar .search-input,
body.page-forum .forum-searchbar input.input{
  flex:1 1 auto;border:0;outline:0;background:0;
  font-size:14px;color:#0f172a;min-width:0;padding:8px 0;
  /* The legacy body.page-forum .field input.input{max-width:520px}
     rule (specificity 0,3,2) would otherwise pin the hero search at
     520px on the topic page. !important is the cleanest beat — the
     search pill is the only place inside the forum where the input
     should flex to fill its parent. */
  max-width:none !important;width:auto !important;
}
.forum-searchbar .search-input::placeholder{color:#94a3b8}
.forum-searchbar button.submit,
.forum-searchbar button#search_button{
  flex:0 0 auto;background:var(--brand,#025077);color:#fff;
  border:0;border-radius:20px;padding:8px 18px;font-weight:700;font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.forum-searchbar button.submit:hover{filter:brightness(1.08)}
.forum-searchbar .search-mobile-icon{display:none}
.forum-searchbar .search-full-text{display:inline-block}
.forum-searchbar #advancedSearch{
  display:inline-block;margin-left:10px;font-size:12px;color:#64748b;
  text-decoration:underline;cursor:pointer;
}
@media (max-width:520px){
  .forum-searchbar .search-mobile-icon{display:inline-flex}
  .forum-searchbar .search-full-text{display:none}
  .forum-searchbar button.submit{padding:8px 12px}
}

/* Legacy modal popup chrome — the forum still emits inline
   <div class="modal-window hidden"> blocks for Feedback / Report
   Post / guest Register / Login. The legacy stylesheet hid these
   via `.hidden { display:none }` and overlaid them on top of the
   page; v6.css doesn't carry that rule, so the modals were
   rendering inline at the bottom of the forum. Restore the hide
   behaviour and lay out the open state as a centred sheet over
   the #overlay backdrop. JS sets `class="modal-window"` (no hidden)
   on open + populates #overlay; no extra JS needed beyond what
   forum_manager.php already wires up. */
.modal-window.hidden,
.modal-window[hidden]{display:none !important}
#overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);
  z-index:9000;display:none;
}
#overlay.open,
#overlay:not(:empty){display:block}
.modal-window:not(.hidden){
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border-radius:12px;padding:18px 22px;
  box-shadow:0 18px 50px rgba(15,23,42,.28);
  z-index:9100;max-width:520px;width:calc(100% - 32px);max-height:80vh;overflow:auto;
}
.modal-window .modal-close{
  float:right;cursor:pointer;color:#64748b;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;
}
.modal-window .modal-close:hover{color:#0f172a}
.modal-window .modal-caption{margin:0 0 12px;font-size:18px;font-weight:800;color:#0f172a}
.modal-window .modal-content textarea{
  width:100%;min-height:120px;border:1px solid #e2e8f0;border-radius:8px;
  padding:10px 12px;font:inherit;color:#0f172a;
}
.modal-window .modal-content .buttons{margin-top:12px;text-align:right}
.modal-window .modal-content .button.submit{
  background:var(--brand,#025077);color:#fff;border:0;border-radius:20px;
  padding:8px 18px;font-weight:700;cursor:pointer;
}

.forum-main{padding:24px 0 48px}
.forum-main .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.forum-content{
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  padding:18px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.forum-content > h2,
.forum-content > h3{
  margin:6px 0 12px;font-size:18px;font-weight:800;color:#0f172a;
  padding-bottom:8px;border-bottom:1px solid #e2e8f0;
}
.forum-content > h2:not(:first-child),
.forum-content > h3:not(:first-child){margin-top:24px}

/* Forum row layout: each category subheading is a <h3>, each forum
   is a row of (title + description) on the left and (topic count,
   replies, last post) on the right. The legacy markup uses a mix
   of <table> and <div>, so we target both. */
.forum-content table{width:100%;border-collapse:collapse;margin:0 0 18px}
.forum-content table tr{border-bottom:1px solid #f1f5f9}
.forum-content table tr:last-child{border-bottom:0}
.forum-content table td{padding:12px 8px;vertical-align:top;font-size:14px;color:#0f172a}
.forum-content table td:first-child{padding-left:0}
.forum-content table td:last-child{padding-right:0}
.forum-content table a{color:var(--brand,#025077);text-decoration:none;font-weight:600}
.forum-content table a:hover{text-decoration:underline}
.forum-content table td .forum-desc,
.forum-content table td p{margin:4px 0 0;color:#475569;font-size:13px;font-weight:400;line-height:1.5}
.forum-content table td.lastpost,
.forum-content table td .lastpost,
.forum-content table td:nth-child(n+2){font-size:13px;color:#475569}

/* Topic / reply counters — keep numeric columns from competing with
   the forum name. Narrow + right-aligned reads as metadata. */
.forum-content table td.counts,
.forum-content table td.numbers{text-align:right;white-space:nowrap;color:#0f172a;font-weight:600}

/* Page-hero base — v6.css elsewhere already styles .page-hero, but
   on the forum we wrap in .forum-hero which has its own background.
   Ensure the inner .wrap maintains the standard horizontal padding. */
.page-hero.forum-hero .wrap{
  max-width:1180px;margin:0 auto;padding:0 20px;
}

@media (max-width:720px){
  .forum-hero__title{font-size:24px}
  .forum-hero__sub{font-size:14px}
  .forum-main{padding:18px 0 36px}
  .forum-content{padding:14px 14px;border-radius:10px}
  .forum-content table td{padding:10px 6px;font-size:13px}
}

/* =========================================================
   FORUM — legacy form/notice/poll widgets used by newtopic /
   newpost / editpost. The legacy stylesheet (global.css) ships
   `.notice`, `.field`, `.input`, poll builder, button variants,
   etc.; v6.css doesn't load it on the public forum. Scope the
   rules under body.page-forum so they pick up the legacy markup
   without bleeding into the marketplace / wholesale shells that
   already restyle these tokens.
   ========================================================= */

/* Hide any element flagged .hidden on the forum (legacy
   `display:none` mechanic). Notice popups, blank-poll warnings,
   the captcha-pending state, etc. all rely on this. */
body.page-forum .hidden{display:none !important}

/* Notice strips — error/alert/success/notice variants. Match the
   v6 colour scheme (subtle tinted card with a coloured left rail).
   Block layout (not flex on the wrapper) so raw markup like
   `<div class="notice alert"><h4>…</h4>body text<br>more text</div>`
   reads as a clean paragraph instead of splitting into flex columns
   on each text node / <br>. Flex is reserved for the inner
   `.notice-flex-wrapper` when PageContent::createNoticeMsg emits
   the full icon-buffer + notice-msg structure. */
body.page-forum .notice{
  position:relative;display:block;
  margin:10px 0;padding:12px 14px 12px 16px;
  border:1px solid #e2e8f0;border-left:4px solid #94a3b8;
  background:#f8fafc;border-radius:8px;color:#0f172a;font-size:14px;line-height:1.5;
}
body.page-forum .notice h4{margin:0 0 4px;font-size:14px;font-weight:700;color:#0f172a}
body.page-forum .notice a{color:var(--brand,#025077);font-weight:600}
body.page-forum .notice.error  {background:#fef2f2;border-color:#fecaca;border-left-color:#dc2626;color:#7f1d1d}
body.page-forum .notice.alert  {background:#fffbeb;border-color:#fde68a;border-left-color:#f59e0b;color:#78350f}
body.page-forum .notice.success{background:#ecfdf5;border-color:#a7f3d0;border-left-color:#10b981;color:#065f46}
body.page-forum .notice .icon-buffer{flex:0 0 auto;color:inherit;opacity:.8}
body.page-forum .notice .notice-msg{flex:1 1 auto}
body.page-forum .notice .notice-close{
  position:absolute;top:8px;right:10px;
  cursor:pointer;color:#94a3b8;font-size:14px;line-height:1;padding:2px 4px;
}
body.page-forum .notice .notice-close::before{content:"\00d7";font-size:18px;font-weight:700}
body.page-forum .notice .notice-close:hover{color:#0f172a}
/* Only switch to flex when the inner wrapper is present (notices
   emitted by PageContent::createNoticeMsg). Raw `.notice` blocks
   without `.notice-flex-wrapper` stay as simple block paragraphs. */
body.page-forum .notice-flex-wrapper{display:flex;align-items:flex-start;gap:10px;flex:1 1 auto}

/* Form fields — Topic Title, Topic Tags, Comment, Poll Title, etc.
   The legacy markup is `.field [required] > label > input.input` and
   `textarea.textarea-maxsize`. */
body.page-forum .field{margin:0 0 14px}
body.page-forum .field > label{
  display:inline-block;margin:0 0 6px;font-size:13px;font-weight:600;color:#334155;
}
body.page-forum .field .fieldnote{color:#64748b;font-size:12px;font-weight:500}
body.page-forum .field input.input,
body.page-forum .field input[type=text],
body.page-forum .field input[type=email],
body.page-forum .field input[type=password]{
  display:block;width:100%;max-width:520px;
  padding:9px 12px;font-size:14px;color:#0f172a;
  background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:0;
  font:inherit;line-height:1.4;
}
body.page-forum .field input.input:focus,
body.page-forum .field input[type=text]:focus{
  border-color:var(--brand,#025077);box-shadow:0 0 0 3px rgba(2,80,119,.12);
}
body.page-forum textarea,
body.page-forum textarea.textarea-maxsize{
  display:block;width:100%;min-height:160px;
  padding:10px 12px;font:inherit;font-size:14px;color:#0f172a;
  background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:0;
  line-height:1.5;resize:vertical;
}
body.page-forum textarea:focus{border-color:var(--brand,#025077);box-shadow:0 0 0 3px rgba(2,80,119,.12)}
body.page-forum .field.required > label::after{
  content:" *";color:#dc2626;font-weight:700;
}

/* Two-column form layout — Topic Title + Tags on the left, Privacy
   Reminder card on the right. CSS Grid on the <form#newtopic> wrapper
   places the two `.cp-col-left` children side-by-side on row 1 and
   makes every subsequent sibling (textarea, hr, poll builder, action
   bar) span both columns. The inline-block approach used previously
   was sensitive to whitespace + parent width and frequently stacked
   when it shouldn't have. */
body.page-forum form#newtopic{
  display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start;
}
body.page-forum form#newtopic > .cp-col-left{
  display:block;width:auto;margin:0;
}
/* The Privacy Reminder card should fill the full height of the right
   column so it visually aligns with the field stack on the left,
   eating the blank space the user called out. */
body.page-forum form#newtopic > .cp-col-left + .cp-col-left .notice{
  margin:0;height:100%;box-sizing:border-box;
}
/* Everything else inside the form — Comment textarea, <hr>, poll
   builder, action row, hidden input — spans both columns. */
body.page-forum form#newtopic > :not(.cp-col-left){grid-column:1 / -1}
body.page-forum .cp-col-left .notice{margin:0}
@media (max-width:720px){
  body.page-forum form#newtopic{grid-template-columns:1fr;gap:0}
  body.page-forum form#newtopic > .cp-col-left{margin:0 0 12px}
}

/* Buttons — primary, blue-variant, warning, plain submit. The forum's
   "Add a Poll" / "Preview Topic" / "Create New Topic" all use these. */
body.page-forum .button,
body.page-forum a.button,
body.page-forum button.button,
body.page-forum input.button,
body.page-forum input[type=submit].button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;font-size:13px;font-weight:700;line-height:1;
  background:var(--brand,#025077);color:#fff;border:0;border-radius:20px;
  cursor:pointer;text-decoration:none;font-family:inherit;
}
body.page-forum .button:hover{filter:brightness(1.08);color:#fff}
body.page-forum .button.button-blue{background:#1d4ed8}
body.page-forum .button.warning{background:#dc2626}
body.page-forum .button.submit{background:var(--brand,#025077)}
body.page-forum .button-blue:hover,
body.page-forum .button.warning:hover{filter:brightness(1.08)}
body.page-forum .mobile-button i{margin-right:4px}

/* Bottom action row on the topic form. The PHP wraps two buttons in
   .myproducts_addopts → .right-full-only + .marketplace-style-button.
   Lay them out as a right-aligned pair. */
body.page-forum .myproducts_addopts{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:10px;margin:18px 0 8px;
}
body.page-forum .myproducts_addopts .right-full-only,
body.page-forum .myproducts_addopts .marketplace-style-button{display:inline-flex}

/* Poll builder — heading + collapsible block toggled by Add a Poll. */
body.page-forum .poll-title{
  display:inline-block;margin:18px 12px 6px 0;font-size:16px;font-weight:700;color:#0f172a;
}
body.page-forum .poll-section{margin-top:6px}
/* Anchor variant of "Add a Poll" — render as a real button. */
body.page-forum a.poll-section,
body.page-forum a#show-create-poll{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;font-size:13px;font-weight:700;line-height:1;
  background:var(--brand,#025077);color:#fff;border:0;border-radius:20px;
  cursor:pointer;text-decoration:none;
}
body.page-forum a.poll-section:hover,
body.page-forum a#show-create-poll:hover{filter:brightness(1.08);color:#fff}
/* Section starts hidden; JS adds .open to reveal it. */
body.page-forum .create-poll-section{display:none}
body.page-forum .create-poll-section.open{display:block;margin-top:14px}
/* When the section is open, give it a soft card so the inputs read
   as a grouped widget rather than floating form fields. */
body.page-forum .create-poll-section.open{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;
}
body.page-forum .pollform{margin:8px 0 0}
body.page-forum .poll_options{margin:8px 0 0}
body.page-forum .choice-break{margin:0 0 8px}
body.page-forum .choice-break > br{display:none}
body.page-forum .poll_option{display:flex;align-items:center;gap:8px;max-width:520px}
body.page-forum .pollchoice{
  flex:1 1 auto;padding:8px 12px;font-size:14px;color:#0f172a;
  background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:0;font:inherit;
}
body.page-forum .buttonRemoveFromPoll,
body.page-forum .buttonAddToPoll{
  flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;
  background:#0f172a;color:#fff;border:0;font-size:18px;line-height:1;cursor:pointer;
}
body.page-forum .buttonRemoveFromPoll{background:#dc2626}
body.page-forum .buttonAddToPoll:hover{background:#1e293b}
body.page-forum .addrow{margin:6px 0 0}
body.page-forum .addrow > br{display:none}

/* Emoji picker hook — keep the legacy markup tidy. */
body.page-forum .emoji-picker-trigger,
body.page-forum #emoji-picker{margin:8px 0 0}

/* File upload form — Drag-and-drop attachment widget. */
body.page-forum .uploadbox,
body.page-forum .upload-form,
body.page-forum .uploadAttachment,
body.page-forum .upload-attachment{
  margin:14px 0;padding:14px;border:2px dashed #cbd5e1;border-radius:8px;
  background:#f8fafc;color:#475569;font-size:13px;line-height:1.5;
}
body.page-forum .uploadbox h4,
body.page-forum .upload-form h4,
body.page-forum .uploadAttachment h4,
body.page-forum .upload-attachment h4{
  margin:0 0 6px;font-size:14px;font-weight:700;color:#0f172a;
}

/* HR separators inside the forum form — soften them. */
body.page-forum hr{
  border:0;border-top:1px solid #e2e8f0;margin:18px 0;
}

/* Misc helpers used inline in the legacy markup. */
body.page-forum .clear{clear:both;display:block;height:0;font-size:0;line-height:0}
body.page-forum .indent{padding-left:0}
body.page-forum .subbox{
  border:1px solid #e2e8f0;background:#fff;padding:14px;border-radius:8px;margin:10px 0;
}

/* =========================================================
   FORUM SEARCH RESULTS — redesigned card per hit. Each card has
   a clickable title, an avatar + author byline, a relative date,
   a body that clamps if longer than ~600 chars, and a footer
   View Topic link. The hero search bar (with the current query
   pre-filled) handles refinement, so we don't duplicate the
   input here.
   ========================================================= */
.forum-results{display:flex;flex-direction:column;gap:14px;margin:6px 0 0}
.forum-results__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 4px;font-size:13px;color:#64748b;
}
.forum-results__count{font-weight:600;color:#0f172a}
.forum-results__sort{font-style:italic}
.forum-results__empty{
  margin:14px 0;padding:18px;text-align:center;
  background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;color:#475569;
}

.forum-result{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:16px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.forum-result.is-review{border-color:#fbbf24;background:#fffbeb}
.forum-result.is-hidden{display:none}

.forum-result__head{display:flex;flex-direction:column;gap:8px}
.forum-result__title{
  font-size:17px;font-weight:700;color:#0f172a;text-decoration:none;line-height:1.3;
}
.forum-result__title:hover{color:var(--brand,#025077);text-decoration:underline}

.forum-result__meta{
  display:flex;align-items:center;gap:10px;font-size:13px;color:#475569;
}
.forum-result__avatar{
  display:inline-flex;width:32px;height:32px;border-radius:50%;
  background:#e2e8f0;color:#475569;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto;font-weight:700;font-size:13px;text-decoration:none;
}
.forum-result__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.forum-result__byline{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 auto}
.forum-result__author{font-weight:600;color:#0f172a}
.forum-result__author a{color:inherit;text-decoration:none}
.forum-result__author a:hover{text-decoration:underline}
.forum-result__role{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.forum-result__date{font-size:12px;color:#64748b;white-space:nowrap;flex:0 0 auto}

.forum-result__body{
  font-size:14px;line-height:1.55;color:#0f172a;overflow-wrap:break-word;
}
.forum-result__body img{max-width:100%;height:auto;border-radius:6px}

/* Clamp long bodies — up to ~6 lines visible before the fade-out
   teaser. is-expanded removes the cap. The fade overlay sits at
   the bottom and disappears when expanded. */
.forum-result__body.is-clamped{
  position:relative;max-height:160px;overflow:hidden;
}
.forum-result__body.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none;
}
.forum-result.is-expanded .forum-result__body.is-clamped{max-height:none}
.forum-result.is-expanded .forum-result__body.is-clamped::after{display:none}

.forum-result__toggle{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid #cbd5e1;border-radius:18px;
  background:#f8fafc;color:#0f172a;font-size:12px;font-weight:600;cursor:pointer;
}
.forum-result__toggle:hover{background:#eef2f7;border-color:#94a3b8}
.forum-result__toggle-less{display:none}
.forum-result.is-expanded .forum-result__toggle-more{display:none}
.forum-result.is-expanded .forum-result__toggle-less{display:inline-flex;align-items:center;gap:6px}

.forum-result__foot{display:flex;justify-content:flex-end;margin-top:2px}
.forum-result__view{
  font-size:13px;font-weight:600;color:var(--brand,#025077);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.forum-result__view:hover{text-decoration:underline}

@media (max-width:540px){
  .forum-result{padding:14px}
  .forum-result__title{font-size:16px}
  .forum-result__date{display:none} /* author byline already carries context on mobile */
}

/* =========================================================
   FORUM TOPIC PAGE — post cards used by viewtopic.php. Each
   <div class="message subbox"> wraps a single post with the
   legacy markup: .message-header on top (timestamp, avatar,
   author name, role badge), .report row (Hide/Edit/Report/
   Reply actions), then .message-text body and any uploads
   or tag chips. Lay out as a card matching the search-result
   styling so the forum reads coherently across surfaces.
   ========================================================= */
body.page-forum .message.subbox{
  position:relative;display:block;
  padding:18px 20px;margin:14px 0;
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
body.page-forum .message.admin-reply{
  background:linear-gradient(180deg,#fff7e6 0%,#fff 60%);
  border-color:#fde68a;
}
body.page-forum .message.review{background:#fffbeb;border-color:#fbbf24}
body.page-forum .message.hidden{display:none !important}

/* Top header strip — three columns: avatar / author info / right meta.
   The legacy markup is .textright + .message-author-avatar +
   .message-header-info, all siblings inside .message-header. CSS grid
   is the cleanest way to put the right meta at the far right. */
body.page-forum .message .message-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:12px;
  margin:0 0 12px;padding:0 0 10px;
  border-bottom:1px solid #f1f5f9;
}
body.page-forum .message .message-author-avatar{
  grid-column:1;display:inline-flex;align-items:center;
}
body.page-forum .message .message-author-avatar a,
body.page-forum .message .message-author-avatar > a{
  display:inline-flex;width:48px;height:48px;border-radius:50%;
  overflow:hidden;background:#e2e8f0;
}
body.page-forum .message .message-author-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
body.page-forum .message .message-header-info{
  grid-column:2;display:flex;flex-direction:column;line-height:1.25;min-width:0;
}
body.page-forum .message .message-header-author{
  margin:0;font-size:15px;font-weight:700;color:#0f172a;
}
body.page-forum .message .message-header-author a{color:inherit;text-decoration:none}
body.page-forum .message .message-header-author a:hover{text-decoration:underline}
body.page-forum .message .message-header-date{
  font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
body.page-forum .message .textright{
  grid-column:3;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:10px;
  font-size:12px;color:#64748b;text-align:right;line-height:1.35;
}
body.page-forum .message .textright a{
  color:var(--brand,#025077);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
body.page-forum .message .textright a:hover{text-decoration:underline}
body.page-forum .message .textright br{display:none}
body.page-forum .message .textright > *{display:inline-flex;align-items:center}
body.page-forum .message .textright > input[type=checkbox]{margin:0 0 0 -4px}

/* Report / action row — Hide · Edit · Report · Reply. The legacy
   markup uses " - " dash separators between <a> links; keep them
   visible but soften the colour. */
body.page-forum .message .report{
  margin:0 0 10px;font-size:12px;color:#94a3b8;
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
}
body.page-forum .message .report a{
  color:var(--brand,#025077);text-decoration:none;font-weight:600;
  padding:0 6px;cursor:pointer;
}
body.page-forum .message .report a:first-child{padding-left:0}
body.page-forum .message .report a:hover{text-decoration:underline}

/* Post body — main content area. */
body.page-forum .message .message-text{
  font-size:14.5px;line-height:1.6;color:#0f172a;
  overflow-wrap:break-word;word-break:break-word;
}
body.page-forum .message .message-text img{
  max-width:100%;height:auto;border-radius:6px;margin:6px 0;
}
body.page-forum .message .message-text a{color:var(--brand,#025077)}
body.page-forum .message .message-text blockquote,
body.page-forum .message .message-text .quote{
  margin:10px 0;padding:10px 14px;border-left:3px solid #cbd5e1;
  background:#f8fafc;color:#334155;font-size:14px;border-radius:4px;
}

/* Attachments inside the post body. */
body.page-forum .message .message-text-attachment{
  margin:10px 0 0;padding:10px 12px;background:#f8fafc;
  border:1px solid #e2e8f0;border-radius:8px;font-size:13px;color:#475569;
}
body.page-forum .message .message-text-attachment a{color:var(--brand,#025077);font-weight:600}
body.page-forum .message .message-text-attachment i{margin-right:6px;color:#64748b}

/* Tag chips at the bottom of the OP. */
body.page-forum .message .message-keywords{
  margin:14px 0 0;padding:10px 0 0;border-top:1px solid #f1f5f9;
  font-size:13px;color:#64748b;
}
body.page-forum .message .message-keywords i.fa-tags{margin-right:6px;color:#94a3b8}
body.page-forum .message .forum_tag{
  display:inline-block;margin:0 4px 4px 0;padding:3px 10px;
  background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;
  border-radius:999px;font-size:11px;font-weight:600;text-decoration:none;
}
body.page-forum .message .forum_tag:hover{background:#dbeafe;border-color:#93c5fd}

/* Signature block (when admins/level-5+ posters have one). */
body.page-forum .message .signature{
  margin:14px 0 0;padding:10px 0 0;border-top:1px solid #f1f5f9;
  font-size:12px;color:#94a3b8;font-style:italic;
}

@media (max-width:640px){
  body.page-forum .message.subbox{padding:14px 14px}
  body.page-forum .message .message-header{grid-template-columns:auto 1fr;gap:10px}
  body.page-forum .message .textright{
    grid-column:1/-1;flex-direction:row;justify-content:flex-end;gap:10px;
    align-items:center;border-top:1px dashed #e2e8f0;padding-top:8px;margin-top:4px;
  }
}

/* =========================================================
   FORUM topic list — pin / lock / poll indicators rendered
   next to the title cell in viewforum.php. The legacy
   `.iconforum.icon-pin/.icon-lock/.icon-poll` glyph font
   isn't loaded on the v6 forum, so the icons were rendering
   as invisible empty spans. Replaced with FontAwesome solid
   icons (fa-thumbtack / fa-lock / fa-square-poll-vertical)
   and styled with subtle brand colouring + tiny right-margin
   so they sit just before the topic-title anchor.
   ========================================================= */
body.page-forum .forum-topic-icon{
  display:inline-block;margin-right:6px;font-size:13px;color:#94a3b8;
  vertical-align:middle;line-height:1;
}
body.page-forum .forum-topic-icon--pin{color:var(--brand,#025077);transform:rotate(35deg)}
body.page-forum .forum-topic-icon--lock{color:#dc2626}
body.page-forum .forum-topic-icon--poll{color:#7c3aed}

/* =========================================================
   FORUM — moderator tools dropdown (only rendered for level
   9 / forum mods). Lives in viewtopic.php as a tiny inline
   form: <select .filterDropdown> + <button.button.submit>
   inside the legacy .search.inline-search > .field.smallfield
   > .mobile-search-bar wrapper. Lay it out as a pill-style
   inline group matching the hero search affordance.
   ========================================================= */
body.page-forum form[name="mod"]{margin:14px 0}
body.page-forum form[name="mod"] .search.inline-search,
body.page-forum form[name="mod"] .field.smallfield{
  display:block;margin:0;padding:0;width:auto;max-width:none;
}
body.page-forum form[name="mod"] .mobile-search-bar{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
}
body.page-forum select.filterDropdown,
body.page-forum .filterDropdown.select{
  appearance:none;-webkit-appearance:none;
  background:#fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M2 4l4 4 4-4z'/></svg>")
    no-repeat right 12px center;
  background-size:10px 10px;
  border:1px solid #cbd5e1;border-radius:8px;
  padding:9px 32px 9px 14px;font:inherit;font-size:13px;font-weight:600;
  color:#0f172a;cursor:pointer;min-width:180px;line-height:1.2;
  /* Override the legacy `.field input.input{max-width:520px}` rule — same
     scope as the search bar, just for native selects. */
  max-width:none;
}
body.page-forum select.filterDropdown:hover{border-color:#94a3b8}
body.page-forum select.filterDropdown:focus{
  outline:0;border-color:var(--brand,#025077);
  box-shadow:0 0 0 3px rgba(2,80,119,.12);
}
body.page-forum form[name="mod"] button.button{padding:9px 16px}

/* =========================================================
   FORUM FILE-UPLOAD DROPZONE — ticket-style for newtopic /
   newpost / editpost. Ported into v6.css (forum-scoped) so
   the public /forum routes get the same look as the CP
   support-ticket upload (lives in global.css under
   body.cp-v6 .ticket-file-upload). Native input is hidden,
   the dashed card is the click target, drag-over flips the
   accent. Markup from FileUpload::uploadForumAttachmentForm.
   ========================================================= */
body.page-forum input[type="file"].hidden-upload,
body.page-forum .file-upload-hidden input[type="file"]{
  display:none !important;
}
body.page-forum .ticket-file-upload{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:100%;max-width:none;margin:14px 0;
}
/* Outer wrapper from FileUpload::uploadForumAttachmentForm() —
   the <form id="upload-file"> shell sits as the last node of the
   new-topic / new-post page. Without an explicit width it would
   only shrink to its content; force it to span the page column. */
body.page-forum form#upload-file{display:block;width:100%}
body.page-forum .ticket-file-upload > .title{
  align-self:flex-start;font-size:15px;font-weight:600;color:#334155;margin-bottom:4px;
}
body.page-forum .drop-file-wrapper{
  position:relative;background:#f8fafc;color:#475569;
  border:2px dashed #cbd5e1;border-radius:12px;font-size:14px;
  width:100%;box-sizing:border-box;padding:0;
  transition:border-color .15s ease,background-color .15s ease;cursor:pointer;
}
body.page-forum .drop-file-wrapper:hover,
body.page-forum .drop-file-wrapper.is-dragover{
  border-color:var(--brand,#025077);background:#eef2f7;
}
body.page-forum .drop-file-wrapper.is-dragover{background:#d9e8f0}
body.page-forum .drop-file-wrapper.error{
  background:#fef2f2;border-color:#ef4444;color:#b91c1c;
}
body.page-forum .drop-file-wrapper .drop-inner-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  outline:none;border:0;margin:0;padding:24px 16px;min-height:110px;gap:8px;
  border-radius:12px;cursor:pointer;text-align:center;
}
body.page-forum .drop-file-wrapper .drop-text{
  font-size:14px;font-weight:600;color:#334155;line-height:1.5;text-align:center;
}
body.page-forum .drop-file-wrapper .drop-text em{
  color:var(--brand,#025077);font-style:normal;text-decoration:underline;
}
body.page-forum .drop-text.hidden,
body.page-forum .uploading-text.hidden,
body.page-forum .uploaded-gallery-text.hidden,
body.page-forum .error-msg.hidden{display:none !important}
body.page-forum .drop-file-wrapper .uploading-text{
  font-size:13px;color:var(--brand,#025077);font-weight:500;
}
body.page-forum .drop-file-wrapper .error-msg{
  font-size:13px;color:#b91c1c;font-weight:500;
}
body.page-forum .ticket-file-upload .uploaded-gallery-text{
  font-size:13px;color:#334155;margin-top:12px;font-weight:500;
}
body.page-forum .ticket-file-upload .upload-completed-drawer{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
  width:100%;align-items:flex-start;gap:12px;margin-top:10px;
}
body.page-forum .ticket-file-upload .uploaded-item-wrapper{
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;
}
body.page-forum .ticket-file-upload .item-image > img{max-width:160px;border-radius:6px}
body.page-forum .ticket-file-upload .image-info{
  display:flex;flex-direction:column;align-items:center;max-width:200px;margin-top:4px;
}
body.page-forum .ticket-file-upload .image-info > .title{
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  width:160px;text-align:center;font-size:12px;font-weight:600;color:#334155;
}
body.page-forum .ticket-file-upload .image-info > .size{font-size:11px;color:#94a3b8}

@media (max-width:768px){
  body.page-forum .drop-file-wrapper{border-radius:10px}
  body.page-forum .drop-file-wrapper .drop-inner-box{padding:20px 12px;min-height:90px}
  body.page-forum .drop-file-wrapper .drop-text{font-size:13px}
}