/* ================================================================
   TCMOCKUP LOOK — the new direction (operator, 2026-10-20): white, Inter, department colours as the accent system.
   Cosmetic layer only, loaded last. Mobile-first (design for 375, add min-width upward) per layout.css.
   Markup: template-parts/site/{header,footer}.php, template-parts/home/*.php. Tokens below; colours per department come from
   the department itself (--dc set inline), see tcn_mockup_dept_style().
   ================================================================ */
:root {
  --tm-ink: #0b0b0d; --tm-ink2: #3a3a42; --tm-mute: #6f7078; --tm-line: #e7e7ea; --tm-soft: #f6f6f8;
  --tm-accent: #313de0; --tm-accent-soft: #7b93e2; --tm-orange: var(--tm-accent);  /* legacy name: every former orange is now the system indigo */ --tm-purple: #6b2fa0; --tm-green: #5d9b2a; --tm-r: 16px;
  --dp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dp-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-family: var(--dp-sans); }
.tm-wrap { width: min(100% - 2 * var(--gutter, 16px), 1240px); margin-inline: auto; }
.tm-ic { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.tm-ic--sm { width: 14px; height: 14px; stroke-width: 2.2; }
.tm-ic--lg { width: 30px; height: 30px; stroke-width: 1.5; }
.tm-ic--xl { width: 40px; height: 40px; stroke-width: 1.5; }

/* ---------- buttons ---------- */
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 11px; border: 1.5px solid var(--tm-line); background: #fff; color: var(--tm-ink);
  font: 700 14px/1 var(--dp-sans); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tm-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); color: var(--tm-ink); }
.tm-btn--dark { background: var(--tm-ink); border-color: var(--tm-ink); color: #fff; }
.tm-btn--dark:hover { color: #fff; }
.tm-btn--sm { min-height: 40px; padding: 0 16px; font-size: 13px; border-radius: 9px; }
.tm-btn--block { display: flex; width: 100%; min-height: 40px; font-size: 13px; font-weight: 600; border-radius: 9px; }
.tm-btn--light { background: #fff; border-color: #fff; min-height: 56px; padding: 0 30px; font-size: 15px; }

/* ---------- header ---------- */
.tm-header { padding: 8px 0 !important; }
.tm-logo { flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; text-decoration: none; }
.tm-logo-mark { display: inline-flex; font-size: clamp(15px, 4.7vw, 22px); letter-spacing: -.03em; color: var(--tm-ink); white-space: nowrap; line-height: 1; }
.tm-the { font-weight: 400; }
.tm-com { font-weight: 900; }
.tm-tag { display: none; font: 500 11px/1 var(--dp-sans); letter-spacing: .06em; color: var(--tm-ink2); }
.site-header .main-nav .nav-link { font-family: var(--dp-sans); }
.tm-header .tm-ic--sm { margin-left: 4px; }
@media (min-width: 640px) { .tm-logo-mark { font-size: 24px; } }
@media (min-width: 1100px) { .tm-logo-mark { font-size: 28px; } .tm-tag { display: block; } }
/* the ONE header button (Gain Access for a visitor, My account for a member): a black rounded button at every width */
/* tcn-app.css forces uppercase / 800 / teal hover on .main-access-btn with !important, so this must too */
body .tm-header .main-access-btn.tm-access { background: var(--tm-ink) !important; color: #fff !important; border: 1px solid var(--tm-ink) !important; border-radius: 9px !important; min-height: 44px; padding: 0 clamp(12px, 3.6vw, 18px); font: 700 13px/1 var(--dp-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
body .tm-header .main-access-btn.tm-access:hover { background: #26262b !important; border-color: #26262b !important; color: #fff !important; }
@media (min-width: 769px) {
  body .tm-header .main-nav { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 0; gap: 18px; }
  body .tm-header .main-nav .nav-link { min-height: 40px; padding: 0; background: none; border-radius: 0; color: var(--tm-ink); font: 600 14px/1 var(--dp-sans); letter-spacing: 0; position: relative; }
  body .tm-header .main-nav .nav-link:hover, body .tm-header .main-nav .nav-link.active { background: none; color: var(--tm-ink); }
  body .tm-header .main-nav .nav-link.active::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--tm-ink); border-radius: 2px; }
  body .tm-header .main-nav .nav-link--access { display: none; }
  body .tm-header .tcn-search-toggle, body .tm-header .tcn-cart-toggle { border-color: transparent; }
  body .tm-header .tcn-search-toggle:hover, body .tm-header .tcn-cart-toggle:hover { background: var(--tm-soft); color: var(--tm-ink); border-color: transparent; }
}

/* ---------- hero ---------- */
.tm-hero { padding: calc(var(--header-h, 64px) + 20px) 0 28px; background: #fff; }
.tm-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.tm-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--tm-orange); font: 800 12px/1 var(--dp-sans); letter-spacing: .05em; }
.tm-kicker i { width: 20px; height: 2px; background: var(--tm-orange); }
.tm-h1 { margin: 0 0 18px; font: 800 clamp(38px, 9vw, 64px)/1.02 var(--dp-sans); letter-spacing: -.035em; text-transform: none; color: var(--tm-ink); }
.tm-h1 b { color: var(--tm-orange); }
.tm-lead { max-width: 520px; margin: 0 0 24px; color: var(--tm-ink2); font: 400 clamp(15px, 2.4vw, 17px)/1.55 var(--dp-sans); }
.tm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.tm-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.tm-trust li { display: flex; align-items: center; gap: 10px; font: 600 11.5px/1.25 var(--dp-sans); color: var(--tm-ink); }
.tm-welcome { margin: 18px 0 0; color: var(--tm-ink2); font-size: 13px; }
.tm-welcome a { color: var(--tm-ink); font-weight: 700; }

/* bento: a phone gets a tidy 2-column grid; from 640 the tiles take the mockup's exact positions */
.tm-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-tile { position: relative; display: block; overflow: hidden; border-radius: var(--tm-r); color: #fff; font: 800 clamp(16px, 4.4vw, 22px)/1.05 var(--dp-sans); letter-spacing: -.02em; text-decoration: none; min-height: 118px; }
.tm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-tile span { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; }
.tm-tile--concert { grid-column: 1 / -1; aspect-ratio: 16 / 10; background: #111; }
.tm-tile--music { background: linear-gradient(135deg, #7b93e2, #313de0); }
.tm-tile--music img { position: absolute; left: 0; top: 0; width: 56%; height: 100%; object-position: center top; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.tm-tile--music span { left: 46%; bottom: 12%; }
.tm-tile--codes { background: linear-gradient(135deg, #7a2fb0, #5a2490); }
.tm-tile--codes span { left: 8%; top: 50%; transform: translateY(-50%); }
.tm-tile--codes::after { content: ""; position: absolute; right: -8%; top: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); }
.tm-tile--products { background: linear-gradient(135deg, #79b333, #4f8a22); }
.tm-tile--products img { position: absolute; right: 0; top: 0; width: 48%; height: 100%; }
.tm-tile--products span { left: 8%; top: 12%; }
.tm-tile--articles { background: linear-gradient(135deg, #e0443a, #c22d24); }
.tm-tile--articles img { position: absolute; right: 0; bottom: 0; width: 52%; height: 92%; opacity: .55; }
.tm-tile--articles span { left: 8%; top: 12%; }
@media (min-width: 640px) {
  .tm-bento { display: block; position: relative; aspect-ratio: 512 / 390; }
  .tm-tile { position: absolute; min-height: 0; font-size: clamp(14px, 2.1vw, 26px); }
  .tm-tile--concert { left: 0; top: 0; width: 46.9%; height: 100%; aspect-ratio: auto; }
  .tm-tile--music { left: 48.4%; top: 0; width: 51.6%; height: 38.5%; }
  .tm-tile--codes { left: 48.4%; top: 40.5%; width: 51.6%; height: 28.7%; }
  .tm-tile--products { left: 32.8%; top: 71.3%; width: 32%; height: 28.7%; outline: 6px solid #fff; z-index: 3; font-size: clamp(12px, 1.7vw, 22px); }
  .tm-tile--articles { left: 66.4%; top: 71.3%; width: 33.6%; height: 28.7%; font-size: clamp(12px, 1.7vw, 22px); }
  .tm-trust { grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (min-width: 1100px) { body .tm-header .main-nav { gap: 26px; } }
@media (min-width: 900px) { .tm-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: 44px; } .tm-hero { padding-bottom: 44px; } }

/* ---------- sections ---------- */
.tm-section { padding: 26px 0; background: #fff; }
.tm-depts-band { background: linear-gradient(#fbfbfc, #fff); }
.tm-sechead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tm-eyebrow { margin: 0 0 6px; font: 800 11.5px/1 var(--dp-sans); letter-spacing: .06em; }
.tm-eyebrow--purple { color: #4b2ba6; } .tm-eyebrow--green { color: #3b7a1f; }
.tm-h2 { margin: 0; font: 800 clamp(24px, 4vw, 30px)/1.1 var(--dp-sans); letter-spacing: -.025em; text-transform: none; color: var(--tm-ink); }
@media (min-width: 640px) { .tm-sechead { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* departments: the department's own colour (--dc) is the card */
.tm-depts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-dept { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 220px; padding: 20px 16px 16px; border-radius: var(--tm-r); overflow: hidden; color: #fff; text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--dc) 100%, #fff 0%), color-mix(in srgb, var(--dc) 78%, #000)); transition: transform .2s, box-shadow .2s; }
.tm-dept:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.18); color: #fff; }
.tm-dept-mark { position: absolute; right: -18px; top: 6px; width: 96px; height: 96px; stroke: rgba(255,255,255,.16); stroke-width: 1.1; }
.tm-badge { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 50%; background: #fff; color: var(--tm-ink); }
.tm-dept h3 { margin: 0; font: 700 17px/1.15 var(--dp-sans); letter-spacing: -.01em; text-transform: none; color: #fff; }
.tm-dept p { margin: 0 0 auto; font: 400 12px/1.45 var(--dp-sans); color: rgba(255,255,255,.92); }
.tm-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; font: 700 12px/1 var(--dp-sans); font-style: normal; }
@media (min-width: 640px) { .tm-depts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tm-depts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* channels */
.tm-chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-chan { overflow: hidden; border: 1px solid var(--tm-line); border-radius: var(--tm-r); background: #fff; transition: transform .2s, box-shadow .2s; }
.tm-chan:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.tm-chan-art { display: grid; place-items: center; aspect-ratio: 174 / 114; background: #111 center / cover no-repeat; color: #fff; text-decoration: none; }
.tm-chan-art b { font: 800 40px/1 var(--dp-sans); }
.tm-chan-body { padding: 14px; }
.tm-chan h3 { display: flex; align-items: center; gap: 5px; margin: 0 0 3px; font: 700 14px/1.2 var(--dp-sans); text-transform: none; letter-spacing: 0; color: var(--tm-ink); }
.tm-ic--ok { width: 14px; height: 14px; color: #2f9e44; }
.tm-role, .tm-mem { margin: 0; color: var(--tm-mute); font: 400 11.5px/1.35 var(--dp-sans); }
.tm-mem { min-height: 16px; margin: 4px 0 12px; }
@media (min-width: 640px) { .tm-chans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tm-chans { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* stats */
.tm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 14px; margin-bottom: 26px; padding: 22px 18px; background: var(--tm-soft); border-radius: var(--tm-r); }
.tm-stat { display: flex; align-items: center; gap: 12px; }
.tm-stat b { display: block; font: 800 24px/1.1 var(--dp-sans); letter-spacing: -.02em; color: var(--tm-ink); }
.tm-stat span span, .tm-stat div span { font: 400 11.5px/1.3 var(--dp-sans); color: var(--tm-ink2); }
.tm-stat-ic { display: grid; place-items: center; }
@media (min-width: 900px) { .tm-stats { grid-template-columns: repeat(5, 1fr); padding: 24px 26px; gap: 0; } .tm-stat { padding: 0 18px; border-left: 1px solid var(--tm-line); } .tm-stat:first-child { border-left: 0; padding-left: 0; } }

/* access band */
.tm-band { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 34px; padding: 26px 22px; background: var(--tm-ink); color: #fff; border-radius: 20px; }
.tm-band-ic { display: grid; place-items: center; width: 76px; height: 76px; border: 1.5px solid #c78a1c; border-radius: 50%; color: #f2b030; flex: none; }
.tm-band-copy { flex: 1; }
.tm-band-copy h2 { margin: 0 0 8px; font: 800 clamp(22px, 4vw, 26px)/1.15 var(--dp-sans); letter-spacing: -.02em; text-transform: none; color: #fff; }
.tm-band-copy p { margin: 0; max-width: 430px; color: #d6d6da; font: 400 14px/1.55 var(--dp-sans); }
.tm-band-act { text-align: center; }
.tm-band-act p { margin: 14px 0 0; font-size: 13px; color: #e6e6e9; }
.tm-band-act p a { color: var(--tm-orange); font-weight: 700; }
@media (min-width: 768px) { .tm-band { flex-direction: row; align-items: center; gap: 30px; padding: 34px 40px; } }

/* ---------- footer (the old light-blue band becomes the mockup's white footer) ---------- */
.tm-footer { background: #fff !important; border-top: 1px solid var(--tm-line); color: var(--tm-ink2); --ink: var(--tm-ink); --muted: var(--tm-ink2); --faint: var(--tm-mute); --line: var(--tm-line); }
.tm-footer .footer-title { font-family: var(--dp-sans); }
.tm-footer .tm-logo-mark { font-size: 28px; }
.tm-footer .tm-tag { display: block; }
.tm-copy { margin: 22px 0 0 !important; font: 400 11.5px/1.4 var(--dp-sans); color: var(--tm-mute) !important; }
.tm-footer .footer-links-col h4 { font: 700 13px/1 var(--dp-sans); letter-spacing: 0; text-transform: none; color: var(--tm-ink); }
.tm-footer .footer-links-col a { min-height: 32px; font: 400 12px/1.3 var(--dp-sans); color: var(--tm-ink2); }
.tm-footer .footer-links-col a:hover { color: var(--tm-ink); }
.tm-social { display: flex; gap: 10px; }
.tm-footer .footer-links-col .tm-social a { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; border: 1px solid var(--tm-line); border-radius: 50%; color: var(--tm-ink); }
@media (min-width: 768px) { .tm-footer .footer-inner { grid-template-columns: 1.3fr 2fr; } .tm-footer .footer-links { grid-template-columns: repeat(4, auto); } }

/* the header is 60px at every width (measured): sticky bars and page tops must use that, not the old 64/76 guess */
:root, body { --header-h: 61px; }
@media (min-width: 769px) { :root, body { --header-h: 61px; } }
/* a solid header: the old 92% white let the page show through it (and through the gap above a sticky tab bar) */
body header.site-header.tm-header.tm-header, body header.site-header.tm-header.site-header--scrolled { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--tm-line); box-shadow: none; }
/* phone header: logo + cart + one button + menu must share 337px without touching (measured: they overlapped at 375) */
@media (max-width: 479px) {
  body .tm-header .header-container { gap: 6px; }
  body .tm-header .header-actions { gap: 4px; }
  .tm-header .tcn-cart-toggle, .tm-header .nav-hamburger { width: 44px; height: 44px; }
}

/* PHONES (<769px): menu button left, wordmark truly centred, box + account icon right. The account button is an icon here (label stays for
   screen readers and the menu panel carries the text link), so it no longer dwarfs the menu button. */
@media (max-width: 768px) {
  body .tm-header .header-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
  body .tm-header .nav-hamburger { justify-self: start; }
  body .tm-header .network-logo-link { justify-self: center; align-items: center; text-align: center; }
  body .tm-header .header-actions { justify-self: end; }
  /* the bottom bar is the phone's site navigation, so no menu button here: search on the left, wordmark centred, box + account right */
  body .tm-header .nav-hamburger, body .tm-header .main-nav { display: none !important; }
  body .tm-header .header-actions { display: contents; }
  body .tm-header .tcn-header-search { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  body .tm-header .network-logo-link { grid-column: 2; grid-row: 1; }
  body .tm-header .tcn-cart-toggle { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 48px; }
  body .tm-header .main-access-btn.tm-access { grid-column: 3; grid-row: 1; justify-self: end; }
  body .tm-header .main-access-btn.tm-access { width: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; }
  body .tm-header .main-access-btn .acc-long { display: none !important; }
  body .tm-header .main-access-btn .acc-ic { display: block; }
  body .tm-header .main-nav .nav-link--account { display: flex; }
}
@media (min-width: 769px) { .tm-header .acc-ic, .tm-header .main-nav .nav-link--account { display: none; } }

/* ---------- system indigo (2026-10-21): the thecomissionsystem.com accent replaces the old orange and teal on every surface ---------- */
:root { --accent: #313de0; --accent-2: #2530c4; --on-accent: #ffffff; --clr-primary: #313de0; --clr-primary-tint: #c9d0fa; --dept-rgb: 49, 61, 224; }
body .bnav-center-icon svg { stroke: #fff; }