/* ==========================================================================
   Northline Uniforms & More — demo site
   Layout modelled on acuniformsandmore.com
   Palette lifted from novaptic.com (--bg #07090d, mint #3fc79a)
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Accent ramp. Only --accent is chosen; theme.js derives the rest from it
     and overwrites these at runtime. The literals below are the Novaptic
     green default, so the page is correct before any script runs. */
  --accent: #3fc79a;            /* brand colour — fills, borders, gradients  */
  --accent-rgb: 63, 199, 154;   /* same colour for rgba() glows              */
  --accent-text: #3fc79a;       /* lifted until it clears AA on --bg         */
  --accent-2: #7ee0bd;          /* light tint                                */
  --accent-deep: #0f9268;       /* deep tint — gradients, announcement bar   */
  --on-accent: #0a0a0a;         /* text sitting ON an accent fill            */

  /* Neutrals. Not pure greys: each carries a trace of the accent hue, so the
     panels never read as a different brand underneath the accent. */
  --bg: #07090d;
  --bg-rgb: 7, 9, 13;
  --bg-soft: #091310;
  --panel: #0b1512;
  --panel-2: #0f1e19;
  --line: #203b32;
  --text: #eef2f8;
  --muted: #9aa7ba;
  --amber: #fbbf24;             /* review stars stay gold in every theme     */

  /* Scenery for the inline SVG bands and the stylised map. */
  --scene-1: #0b1d17;
  --scene-2: #0e2c23;
  --scene-3: #08170f;
  --scene-road: #2a4f44;
  --scene-grid: #1d3830;
  --scene-block: #13291f;
  --scene-base: #0a1310;

  --radius: 16px;
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --gutter: 16px;
  --band: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-2); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- announcement bar */
.announce {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  color: var(--on-accent);
  text-align: center;
  font-weight: 650;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px var(--gutter);
}
.announce a { color: var(--on-accent); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--on-accent); opacity: .75; }

/* ------------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--bg-rgb), .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  display: grid; place-items: center;
}
.brand-text { line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--text);
}
.brand-sub {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.header-actions { display: flex; align-items: center; gap: 10px; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn-lg { font-size: 15px; padding: 14px 28px; }

/* hamburger */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent-text); }
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
  transition: background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- nav drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(var(--bg-rgb), .97);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
body.nav-open .nav-drawer { opacity: 1; visibility: visible; }
.nav-drawer nav { text-align: center; padding: 24px; }
.nav-drawer a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  padding: 10px 0;
}
.nav-drawer a:hover { color: var(--accent-text); }
.nav-drawer .nav-meta {
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.nav-close:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: clamp(460px, 78vh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-art { position: absolute; inset: 0; }
.hero-art svg { width: 100%; height: 100%; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 50% 42%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .35) 45%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 90px var(--gutter); }

.logo-plate {
  display: inline-grid;
  place-items: center;
  gap: 2px;
  padding: 26px 46px;
  border-radius: 20px;
  background: rgba(var(--bg-rgb), .78);
  border: 1px solid rgba(var(--accent-rgb), .35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  margin-bottom: 30px;
}
.logo-plate .lp-main {
  font-family: var(--font-display);
  font-size: clamp(42px, 9vw, 74px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 25%, var(--accent-2) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-plate .lp-sub {
  font-size: clamp(11px, 2.4vw, 14px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 auto 14px;
  max-width: 17ch;
}
.hero p.lede {
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 54ch;
  margin: 0 auto 30px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.scroll-hint {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------- bands */
.band { padding: var(--band) 0; }
.band-soft { background: var(--bg-soft); }
.band-panel { background: var(--panel); }
.band-tight { padding: clamp(40px, 6vw, 72px) 0; }

.eyebrow {
  text-align: center;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
}
.section-title {
  font-family: var(--font-display);
  text-align: center;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.section-lede {
  text-align: center;
  color: var(--muted);
  max-width: 76ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.8vw, 17px);
}
.section-lede + .section-lede { margin-top: 14px; }

.band-rule {
  width: 58px; height: 3px;
  margin: 0 auto 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
}

/* ------------------------------------------------- full-bleed image bands */
.photo-band {
  position: relative;
  height: clamp(260px, 42vw, 440px);
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.photo-band svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A real clip in place of the drawn band. object-fit: cover, so a 16:9 file
   fills a band whose height is a clamp() and never letterboxes. The band is
   already aria-hidden, so the video is decorative: no controls, no audio
   track, and it is skipped by the keyboard.

   It does NOT autoplay on its own -- app.js starts it when the band scrolls
   into view and pauses it when it leaves, and leaves it paused entirely for a
   viewer who asked for reduced motion. The poster is what they see instead,
   which is why one is required alongside the file. */
.photo-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--panel-2);
}
.photo-band .pb-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px var(--gutter);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), .88));
  font-family: var(--font-display);
  font-size: clamp(14px, 2.4vw, 20px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text);
}

/* ------------------------------------------------------------- categories */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.cat-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.cat-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(260px 160px at 50% 0%, rgba(var(--accent-rgb), .13), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.cat-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .5); }
.cat-card:hover::after { opacity: 1; }
.cat-icon {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .25);
}
.cat-icon svg { width: 42px; height: 42px; }
.cat-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.cat-card p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.cat-link {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------------- services */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.svc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 24px 22px;
}
.svc h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.svc p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------------ brands */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 34px;
}
.brand-chip {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.brand-chip:hover { color: var(--accent-text); border-color: rgba(var(--accent-rgb), .5); }

/* ------------------------------------------------------------- collections
   Shop-by-collection tiles. Photographed lines get the photo; the rest fall
   back to a typographic card on the accent wash rather than a broken frame,
   because roughly a third of the lines this shop carries have no product
   photography at all. */
.coll-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.coll-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  background: var(--panel-2);
  border: 1px solid var(--line);
  text-decoration: none;
  transform: translateZ(0);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.coll-card:hover {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  transform: translateY(-2px);
}
.coll-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.coll-card:hover .coll-img { transform: scale(1.045); }
.coll-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px 16px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .12) 58%, transparent);
}
/* No photo: the accent wash carries it, and the name gets the room instead. */
.coll-card-plain {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .22), var(--panel-2) 72%);
}
.coll-card-plain .coll-body {
  justify-content: center;
  background: none;
  text-align: center;
}
.coll-brand {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.coll-card-plain .coll-brand { color: var(--muted); }
.coll-name {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.15;
  color: #fff;
}
.coll-card-plain .coll-name { color: var(--text); }
.coll-count {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
}
.coll-card-plain .coll-count { color: var(--muted); }
@media (max-width: 560px) {
  .coll-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .coll-name { font-size: 17px; }
}

/* ----------------------------------------------------------------- reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.review {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.stars { color: var(--amber); letter-spacing: 3px; font-size: 14px; margin-bottom: 12px; }
.review blockquote {
  margin: 0 0 16px;
  font-size: 15px;
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
}
.review cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.review-cta { text-align: center; margin-top: 40px; }
.review-cta h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 10px;
}
.review-cta p { color: var(--muted); margin: 0 0 18px; }

/* ---------------------------------------------------------------- location */
.loc-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  margin-top: 42px;
  align-items: stretch;
}
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
  min-height: 340px;
  position: relative;
}
.map-frame svg { width: 100%; height: 100%; min-height: 340px; }

/* Real Google map. The embed paints its own white chrome, so the frame keeps
   the rounded corners and the panel border does the theming around it. */
.map-frame iframe.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}
.map-frame .map-directions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.map-frame .map-directions:hover { filter: brightness(1.08); }

.hours {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.hours h3 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 18px;
}
.hours table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.hours td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.hours tr:last-child td { border-bottom: 0; }
.hours tr.today td { color: var(--accent-text); font-weight: 600; }
.hours .addr {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.hours .addr strong { color: var(--text); display: block; font-size: 15px; }

/* ------------------------------------------------- more than one store
   A shop with two branches gets one card per branch instead of the single
   map-beside-hours grid. Each card stacks its own map over its own hours
   table, because the two stores do not keep the same hours -- Lifecare's
   Hammond shop opens 8:30 and its Slidell shop opens 9:00, so one shared
   table would state the wrong opening time for one of them.

   auto-fit rather than a fixed two-column rule: a third branch wraps
   instead of squeezing, and the cards drop to one column on a phone with
   no media query of their own. */
.loc-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 42px;
  align-items: start;
}
.loc-card { display: flex; flex-direction: column; gap: 18px; }
.loc-card .map-frame,
.loc-card .map-frame iframe.map-embed,
.loc-card .map-frame svg { min-height: 260px; }
.loc-card .hours { flex: 1 1 auto; }
.loc-card > .loc-name {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  letter-spacing: .01em;
  color: var(--text);
  margin: 0;
}
.loc-card > .loc-name span { display: block; font-family: var(--font-body);
  font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0;
  margin-top: 4px; }

/* -------------------------------------------------------------- contact CTA */
.contact-band {
  position: relative;
  text-align: center;
  padding: clamp(60px, 9vw, 110px) var(--gutter);
  border-block: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(var(--accent-rgb), .14), transparent 70%),
    var(--bg-soft);
}
.contact-band h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.contact-band p { position: relative; color: var(--muted); max-width: 56ch; margin: 0 auto 26px; }
.contact-actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.foot-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 36px;
  padding-block: clamp(42px, 6vw, 70px) 36px;
  padding-inline: var(--gutter);
}
.foot-col h4 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
}
.foot-col p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: 9px; }
.foot-links a { color: var(--muted); font-size: 14px; }
.foot-links a:hover { color: var(--accent-text); }

.signup { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 180px;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
}
.signup input::placeholder { color: #6b7686; }
.signup input:focus { outline: none; border-color: var(--accent-text); }
.signup-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.signup-note.ok { color: var(--accent-text); }

.socials { display: flex; gap: 10px; margin-top: 4px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.socials a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.socials svg { width: 18px; height: 18px; }

.hashtag {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(16px, 3vw, 24px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.foot-bottom {
  border-top: 1px solid var(--line);
  padding-block: 20px 30px;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-bottom nav a { color: var(--muted); }
.foot-bottom nav a:hover { color: var(--accent-text); }

/* -------------------------------------------------------------- back to top */
.to-top {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 50;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ------------------------------------------------------------------ reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ demo ribbon */
.demo-ribbon {
  background: var(--panel);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px var(--gutter);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .loc-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .header-actions .btn-ghost { display: none; }
  /* keep "UNIFORMS & MORE" on one line so the header stays one row tall */
  .brand-sub { font-size: 9px; letter-spacing: .14em; white-space: nowrap; }
  .brand-name { font-size: 16px; }
  .logo-plate { padding: 20px 28px; }
  .hero-inner { padding: 64px var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Theme picker — a demo control, not part of the storefront design.
   Deliberately reads as tooling: neutral chrome, sits over the page.
   ========================================================================== */
.theme-dock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--bg-rgb), .9);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, color .2s ease;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .tb-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3);
}

.theme-panel {
  width: min(330px, calc(100vw - 36px));
  background: rgba(var(--bg-rgb), .97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  max-height: min(70vh, 620px);
  overflow-y: auto;
}

.tp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tp-head h2 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
  color: var(--text);
}
.tp-close {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.tp-close:hover { color: var(--text); }

.tp-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}

.tp-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.tp-swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tp-swatch:hover { transform: translateY(-2px); }
.tp-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor;
}
.tp-swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.tp-graph { margin-bottom: 12px; color: var(--accent-text); }

.tp-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.tp-field label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.tp-field input[type="color"] {
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  flex: none;
}
.tp-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.tp-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.tp-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 8px 10px;
  text-transform: lowercase;
}
.tp-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.tp-field input[type="text"][aria-invalid="true"] { border-color: #f87171; }

.tp-ramp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.tp-ramp div {
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

.tp-audit {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tp-audit strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Semantic colour, deliberately NOT the accent: in a red theme an accent-
   coloured "Passes AA" reads as an error. */
.tp-audit .tp-pass { color: #4ade80; font-weight: 600; }
.tp-audit .tp-lift { color: var(--amber); font-weight: 600; }

@media (max-width: 640px) {
  .theme-dock { left: 12px; bottom: 12px; }
  .theme-btn span.tb-label { display: none; }
  .theme-btn { padding: 11px 13px; }
}

/* ==========================================================================
   Product pages — listing grid and product detail.
   The garment art carries the FABRIC colour; the accent stays on chrome.
   ========================================================================== */

/* ------------------------------------------------------------- page header */
.page-head {
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 300px at 18% -30%, rgba(var(--accent-rgb), .13), transparent 70%),
    var(--bg-soft);
}
.crumbs {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span { margin: 0 7px; opacity: .5; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(27px, 4.4vw, 42px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.page-head p { color: var(--muted); margin: 0; max-width: 62ch; }

/* ------------------------------------------------------------ shop layout */
.shop-wrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 30px;
  padding: clamp(26px, 4vw, 44px) 0 var(--band);
  align-items: start;
}

.filters {
  position: sticky;
  top: 92px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  /* A sticky rail taller than the viewport pins its own bottom off-screen and
     cannot be reached until the whole page has scrolled past it. Give it its
     own scroll instead. */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filters::-webkit-scrollbar { width: 10px; }
.filters::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px; border: 3px solid var(--panel);
}
.filters h2 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
}
.fgroup { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.fgroup:first-of-type { border-top: 0; padding-top: 0; }
.fgroup h3 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--text);
}
.fgroup label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  padding: 4px 0;
  cursor: pointer;
}
.fgroup label:hover { color: var(--text); }
.fgroup input { accent-color: var(--accent); flex: none; }
.fgroup .count { margin-left: auto; font-size: 11.5px; opacity: .65; font-variant-numeric: tabular-nums; }
.fswatches { display: flex; flex-wrap: wrap; gap: 7px; }
.fswatch {
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  padding: 0;
  transition: transform .14s ease, box-shadow .14s ease;
}
.fswatch:hover { transform: translateY(-2px); }
.fswatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.filters .clearall {
  margin-top: 14px;
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 8px;
  cursor: pointer;
}
.filters .clearall:hover { border-color: var(--accent); color: var(--accent-text); }

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.shop-count { color: var(--muted); font-size: 13.5px; }
.shop-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.shop-sort { display: flex; align-items: center; gap: 8px; }
.shop-sort label {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop-sort select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
}
.shop-sort select:focus { outline: none; border-color: var(--accent); }

/* ------------------------------------------------------------ product grid */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 18px;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.pcard:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .55); }

.pc-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(255, 255, 255, .07), transparent 72%),
    var(--panel-2);
  padding: 14px;
}
.pc-art .garment { width: 100%; height: 100%; }
.garment { display: block; }

.pc-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}
/* Semantic states keep their own colour — a "Sale" flag that turns green
   with the theme stops reading as a sale. */
.pc-badge-sale { background: #fbbf24; color: #1a1205; }
.pc-badge-low-stock { background: #f87171; color: #1a0707; }
.pc-badge-new { background: var(--accent); color: var(--on-accent); }

.pc-body { padding: 15px 15px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pc-brand {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.pc-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.pc-name a { color: var(--text); }
.pc-name a:hover { color: var(--accent-text); }
.pc-rate { display: flex; align-items: center; gap: 7px; margin: 0; }
.pc-stars { color: var(--amber); font-size: 12.5px; letter-spacing: 1px; }
.pc-revs { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-price { margin: 2px 0 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-now { color: var(--text); }
.pc-was { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }
.pc-colors { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 8px; }
.pc-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
}
.pc-more { font-size: 11px; color: var(--muted); margin-left: 2px; }

.pempty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.pempty b { color: var(--text); display: block; margin-bottom: 6px; font-size: 16px; }

/* ---------------------------------------------------------- product detail */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(26px, 4vw, 44px) 0 var(--band);
  align-items: start;
}

.pdp-gallery { position: sticky; top: 92px; display: grid; gap: 12px; }
.pdp-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(66% 58% at 50% 40%, rgba(255, 255, 255, .08), transparent 72%),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7%;
}
.pdp-main .garment { width: 100%; height: 100%; }
.pdp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-thumb {
  width: 68px; height: 68px;
  padding: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.pdp-thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pdp-thumb .garment { width: 100%; height: 100%; }

.pdp-brand {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 8px;
}
.pdp h1 {
  font-family: var(--font-display);
  font-size: clamp(23px, 3.2vw, 33px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.pdp-rate { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; flex-wrap: wrap; }
.pdp-rate .pc-stars { font-size: 15px; }
.pdp-rate .pc-revs { font-size: 13px; }
.pdp-sku { color: var(--muted); font-size: 12.5px; }

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pdp-price s { font-size: 17px; font-weight: 400; color: var(--muted); }
.pdp-price .save {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #fbbf24;
  color: #1a1205;
  padding: 3px 9px;
  border-radius: 999px;
}
.pdp-blurb { color: var(--muted); margin: 0 0 22px; font-size: 15px; }

.opt { margin-bottom: 20px; }
.opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.opt-head h2 {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-weight: 600;
}
.opt-head .chosen { font-size: 13.5px; color: var(--text); font-weight: 600; }

.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  cursor: pointer;
  padding: 0;
  transition: transform .14s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-width: 52px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.size:hover:not(:disabled) { border-color: var(--accent); }
.size[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.size:disabled {
  cursor: not-allowed;
  color: var(--muted);
  opacity: .45;
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, transparent 6px 12px);
}
.size-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.size-note.low { color: var(--amber); }

.addon {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.addon input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.addon label { font-size: 14px; font-weight: 600; cursor: pointer; }
.addon p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

.buyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button {
  width: 40px;
  background: var(--panel-2);
  border: 0;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}
.qty button:hover { color: var(--accent-text); }
.qty input {
  width: 48px;
  text-align: center;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buyrow .btn-primary { flex: 1 1 190px; }

.buy-msg {
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 10px;
  margin: 0 0 18px;
  display: none;
}
.buy-msg.show { display: block; }
.buy-msg.ok { background: rgba(var(--accent-rgb), .13); border: 1px solid rgba(var(--accent-rgb), .4); color: var(--accent-text); }
.buy-msg.warn { background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); color: var(--amber); }

.specs { border-top: 1px solid var(--line); }
.specs details { border-bottom: 1px solid var(--line); }
.specs summary {
  cursor: pointer;
  padding: 15px 0;
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.specs summary::-webkit-details-marker { display: none; }
.specs summary::after { content: '+'; color: var(--accent-text); font-size: 17px; }
.specs details[open] summary::after { content: '\2212'; }
.specs .sbody { padding: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.specs .sbody dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.specs .sbody dt { color: var(--text); font-weight: 600; }
.specs .sbody dd { margin: 0; }

.related { padding: 0 0 var(--band); }
/* Nothing to show -- no brand on the garment, or a brand with one product --
   so the section collapses instead of leaving a band of dead page. */
.related:empty { padding: 0; }
.related h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 20px;
}
/* The line the set stayed inside -- the collection when every card is from it,
   the brand otherwise. Stated on the page because the panel used to show any
   vendor's garment, and "within the line" is only credible if it is named. */
.related h2 .related-scope {
  font-weight: 400;
  color: var(--muted);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; max-width: 460px; }
}
@media (max-width: 860px) {
  .shop-wrap { grid-template-columns: 1fr; }
  .filters { position: static; }
}
@media (max-width: 520px) {
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pc-body { padding: 12px 12px 14px; }
  .pc-name { font-size: 13.5px; }
}

/* Filter rail collapses on a phone so products are not pushed below the fold */
.fpanel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
}
.fpanel > summary::-webkit-details-marker { display: none; }
.fpanel > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 17px;
  letter-spacing: 0;
}
.fpanel[open] > summary::after { content: '\2212'; }
.fpanel > summary .fcount {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 700;
}
@media (min-width: 861px) {
  .fpanel > summary { cursor: default; }
  .fpanel > summary::after { display: none; }
}

/* Real product photography sits on its own light tile. The shots come from the
   vendors on white/grey seamless, so a dark tile would frame them as grey
   rectangles; a light tile reads as deliberate on a dark page. */
.garment.photo { width: 100%; height: 100%; object-fit: contain; }

.pc-art.has-photo,
.pdp-main.has-photo,
.pdp-thumb.has-photo {
  background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%);
}
.pc-art.has-photo { padding: 0; }
.pdp-main.has-photo { padding: 3%; }
.pdp-thumb.has-photo { padding: 3px; }

/* Background-lightness control */
.tp-surface {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.tp-surf {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tp-surf:hover { border-color: var(--accent); color: var(--accent-text); }
.tp-surf[aria-checked="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ---- things a token alone cannot carry across light and dark ------------ */

/* Scrims over the full-bleed artwork flip with the page. */
:root[data-mode="light"] .hero::after {
  background:
    radial-gradient(900px 420px at 50% 42%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .3) 0%, rgba(var(--bg-rgb), .18) 45%, var(--bg) 100%);
}

/* Card lift reads as a shadow on light, a glow on dark. */
:root[data-mode="light"] .pcard,
:root[data-mode="light"] .cat-card { box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
:root[data-mode="light"] .pcard:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, .10); }

/* Swatch and chip hairlines need to darken, not lighten, on a light ground. */
:root[data-mode="light"] .pc-dot,
:root[data-mode="light"] .swatch,
:root[data-mode="light"] .fswatch,
:root[data-mode="light"] .tp-swatch { border-color: rgba(16, 24, 40, .22); }

/* The photo tile is already light; on a light page it just needs separating. */
:root[data-mode="light"] .pc-art.has-photo,
:root[data-mode="light"] .pdp-main.has-photo { background: #ffffff; }
:root[data-mode="light"] .pdp-main { border-color: var(--line); }

:root[data-mode="light"] .to-top { box-shadow: 0 10px 30px rgba(16, 24, 40, .18); }

/* The wordmark gradient starts from white, which disappears on a light plate. */
:root[data-mode="light"] .logo-plate .lp-main {
  background: linear-gradient(135deg, var(--text) 20%, var(--accent-deep) 80%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* The colour a grid is filtered to, shown next to the count. */
.in-colour {
  color: var(--accent-text); font-weight: 600;
}

/* Real client logo, where one is supplied. The artwork is black on white, so
   it needs a light plate to sit on — on a dark page the black would vanish. */
.brand-logo {
  display: block; height: 30px; width: auto;
  background: #fff; border-radius: 8px; padding: 4px 7px;
}
.logo-plate.has-logo { padding: 20px 26px; background: #fff; border-color: #fff; }
.logo-plate.has-logo img { display: block; width: clamp(180px, 34vw, 300px); height: auto; }
@media (max-width: 640px) { .brand-logo { height: 26px; } }

/* Colour chips and brand chips are links, so they need link behaviour. */
a.pc-dot { display: inline-block; cursor: pointer; }
a.pc-dot:hover { transform: scale(1.18); }
a.brand-chip { cursor: pointer; }
a.cat-card { display: flex; flex-direction: column; color: inherit; }
a.cat-card:hover { color: inherit; }
a.cat-card .cat-link { color: var(--accent-text); }

/* The whole product card lifts on hover, which promises the whole card is
   clickable. Stretch the title link over the card so it is, while keeping the
   colour chips above it in z-order so they stay individually clickable
   (nested anchors are invalid, so this is the way to have both). */
.pcard { position: relative; }
.pc-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pc-art, .pc-colors { position: relative; z-index: 2; }

/* ---- cart: floating button + drawer ------------------------------------ */
.cart-fab {
  position: fixed; right: 18px; bottom: 76px; z-index: 55;
  width: 52px; height: 52px; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); display: grid; place-items: center;
}
.cart-fab svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}
.cart-drawer {
  position: fixed; inset: 0; z-index: 95; background: rgba(var(--bg-rgb), .8);
  backdrop-filter: blur(6px); display: flex; justify-content: flex-end;
}
.cart-drawer[hidden] { display: none; }
.cart-panel {
  width: min(400px, 100%); height: 100%; background: var(--panel);
  border-left: 1px solid var(--line); display: flex; flex-direction: column;
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-family: var(--font-display); font-size: 16px; margin: 0; }
.cart-lines { flex: 1; overflow-y: auto; padding: 6px 20px; }
.cart-empty { padding: 20px; color: var(--muted); font-size: 13.5px; margin: 0; }
.cline { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px;
  padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cl-art { width: 52px; height: 52px; background: #fff; border-radius: 8px; overflow: hidden; }
.cl-art img { width: 100%; height: 100%; object-fit: contain; }
.cl-swatch { display: block; width: 100%; height: 100%; }
.cl-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-body strong { font-size: 13.5px; line-height: 1.3; }
.cl-body span { font-size: 11.5px; color: var(--muted); }
.cl-right { text-align: right; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px; }
.cl-del { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
.cl-del:hover { color: #f87171; }
.cart-foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.cart-total strong { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.cart-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 12px; }
.cart-foot .btn { width: 100%; }
.cart-msg { font-size: 12.5px; color: var(--accent-text); margin: 10px 0 0; }
@media (max-width: 640px) { .cart-fab { right: 12px; bottom: 70px; } }

.pdp-missing { grid-column: 1 / -1; text-align: center; padding: clamp(40px,8vw,90px) 0; }
.pdp-missing h1 { font-family: var(--font-display); font-size: clamp(22px,3.4vw,32px); margin: 0 0 12px; }
.pdp-missing p { color: var(--muted); max-width: 46ch; margin: 0 auto 18px; }

/* Colour FAMILY chips: wider than a bare swatch because they carry a label. */
.fswatches { gap: 6px; }
.fswatch-fam {
  width: auto; height: auto; min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 9px; border-radius: 999px; flex: 1 1 auto; min-width: 46%;
}
.fswatch-fam span {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65);
  white-space: nowrap;
}
.fswatch-fam[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }

/* Shades folded into the selected colour family */
.fshades { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fshades-head {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 9px; font-weight: 600;
}
.fshade {
  width: 24px; height: 24px; margin: 0 5px 5px 0; padding: 0;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  transition: transform .14s ease;
}
.fshade:hover { transform: translateY(-2px); }
.fshade[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.fshades-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }

/* ==========================================================================
   Embroidery — the customer-facing module (embroidery.js)
   ========================================================================== */
.emb-trigger{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;background:rgba(var(--accent-rgb),.05);margin:0 0 20px;}
.emb-trigger svg{flex:0 0 22px;margin-top:2px;stroke:var(--accent);}
.emb-trigger .et-body{flex:1 1 auto;min-width:0;}
.emb-trigger strong{display:block;font-size:.95rem;margin:0 0 3px;}
.emb-trigger p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.45;}
.emb-trigger .btn{flex:0 0 auto;align-self:center;}
.emb-chosen{margin:0 0 20px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:14px;
  padding:12px 14px;background:rgba(var(--accent-rgb),.08);display:flex;gap:10px;align-items:flex-start;}
.emb-chosen .ec-body{flex:1 1 auto;min-width:0;}
.emb-chosen strong{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 4px;}
.emb-chosen p{margin:0;font-size:.88rem;line-height:1.45;word-break:break-word;}
.emb-chosen .ec-acts{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;}
.emb-chosen button{background:none;border:0;color:var(--accent-text);font:inherit;font-size:.8rem;
  text-decoration:underline;cursor:pointer;padding:2px 0;}

/* Above the cart drawer (95), and with its OWN scroll lock: reusing
   body.nav-open here literally opened the mobile nav drawer, which is also
   z-index 70, so the site menu rendered straight through the sheet. */
body.emb-open{overflow:hidden;}
.emb-ov{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);
  display:flex;align-items:flex-end;justify-content:center;padding:0;}
.emb-ov[hidden]{display:none;}
/* A literal first, the token second. An undefined var() falls back to NOTHING,
   and this sheet rendered fully transparent -- the product photo and the
   colour swatches read straight through the form -- because it was written
   against --surface/--fg, which are not tokens in this theme. A modal must
   never be able to go see-through from one bad variable name. */
.emb-sheet{background:#0b1512;background:var(--panel);color:#eef2f8;color:var(--text);
  width:100%;max-width:880px;
  max-height:94vh;display:flex;flex-direction:column;border-radius:18px 18px 0 0;
  border:1px solid var(--line);box-shadow:0 -20px 60px rgba(0,0,0,.45);}
.emb-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px;border-bottom:1px solid var(--line);}
.emb-head h2{margin:0;font-size:1.1rem;}
.emb-head .tp-close{margin-left:auto;}
.emb-body{display:grid;grid-template-columns:1fr 240px;gap:22px;padding:18px 20px;overflow:auto;}
.emb-form fieldset{border:0;padding:0;margin:0 0 20px;}
.emb-form legend{padding:0;margin:0 0 9px;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
.emb-form legend em,.emb-field em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7;}
.emb-opt{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin:0 0 7px;cursor:pointer;}
.emb-opt:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.08);}
.emb-opt input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent);}
.emb-opt span{display:block;font-size:.92rem;}
.emb-opt small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;}
.emb-opt-sm{padding:7px 11px;margin:0;}
.emb-places,.emb-fonts{display:flex;flex-wrap:wrap;gap:7px;}
.emb-fonts .fontsample{font-size:1.02rem;}
.emb-field{display:block;margin:0 0 10px;font-size:.85rem;color:var(--muted);}
.emb-field input,.emb-field textarea{display:block;width:100%;margin-top:5px;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:.95rem;}
.emb-field textarea{resize:vertical;}
.emb-hint{font-size:.8rem;color:var(--muted);margin:6px 0 0;line-height:1.45;}
.emb-threads{display:flex;flex-wrap:wrap;gap:6px;}
.emb-thread{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;background:none;color:var(--text);font:inherit;font-size:.82rem;
  padding:4px 11px 4px 5px;cursor:pointer;}
.emb-thread.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);}
.emb-thread s{width:16px;height:16px;border-radius:50%;display:inline-block;
  border:1px solid rgba(255,255,255,.3);}
.emb-thread s.rainbow{background:linear-gradient(90deg,#e2524a,#e0b33c,#4aa86a,#5570c6);}
.emb-side{align-self:start;position:sticky;top:0;}
.emb-preview{border:1px solid var(--line);border-radius:14px;padding:10px;
  background:#07090d;background:var(--bg);}
.emb-sum{margin:8px 0 0;font-size:.78rem;color:var(--muted);text-align:center;line-height:1.4;}
.emb-cap{font-size:.76rem;color:var(--muted);margin:9px 0 0;line-height:1.45;}
.emb-foot{border-top:1px solid var(--line);padding:14px 20px 18px;}
.emb-price{margin:0 0 11px;font-size:.85rem;color:var(--muted);}
.emb-acts{display:flex;gap:9px;justify-content:flex-end;}
.emb-msg{margin:9px 0 0;font-size:.85rem;min-height:1.1em;}
.emb-msg.warn{color:#f2b8bd;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media (max-width:760px){
  .emb-body{grid-template-columns:1fr;}
  .emb-side{order:-1;position:static;max-width:210px;margin:0 auto;}
  .emb-trigger{flex-wrap:wrap;}
  .emb-trigger .btn{width:100%;}
}
/* "from" on a style whose variations are not all one price */
.pdp-price .pdp-from{font-size:.55em;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;vertical-align:middle;}
.pc-price .pc-from{font-size:.72em;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;margin-right:1px;}
/* a sold-out variation reads differently from a low one */
.size-note.out{color:#f2b8bd;}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;}
.sizes .size.oos{opacity:.45;text-decoration:line-through;}
.sizes .size.oos:not(:disabled){text-decoration:none;opacity:.75;}

/* Group code entry (groups.html) */
.gacode{margin:26px 0 0;}
.gacode .fl{display:block;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;}
.gacode input{width:100%;font:inherit;font-size:1.5rem;letter-spacing:.18em;text-align:center;
  padding:16px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);text-transform:uppercase;}
.gacode input:focus{outline:2px solid var(--accent);outline-offset:2px;}
.gacode .btn{width:100%;margin-top:16px;}
.gamsg{margin:12px 0 0;font-size:.9rem;min-height:1.2em;}
.gamsg.ok{color:#4ade80;} .gamsg.warn{color:#f2b8bd;}

/* Shop: search box and the multi-value facets */
.fsearch .fqwrap{position:relative;}
.fsearch input{width:100%;font:inherit;font-size:.95rem;padding:9px 30px 9px 11px;
  border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);}
.fsearch input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.fsearch input::-webkit-search-cancel-button{display:none;}
.fsearch #fQClear{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;
  padding:2px 6px;}
.fsearch .hint{margin:6px 0 0;font-size:.76rem;}
.fck{display:flex;align-items:center;gap:7px;font-size:.88rem;padding:3px 0;cursor:pointer;}
.fck input{accent-color:var(--accent);flex:0 0 auto;}
.fck b{margin-left:auto;font-weight:500;color:var(--muted);font-size:.8rem;}
.fgroup .fnote{margin:-4px 0 7px;font-size:.74rem;color:var(--muted);}
/* cuts, revealed under the chosen department */
.fcuts{margin:4px 0 10px 18px;padding:8px 10px;border-left:2px solid rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.05);border-radius:0 8px 8px 0;}
.fcuts-head{margin:0 0 5px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);}
.fcuts .fck{font-size:.84rem;}