/* B3-P2/P3 #1+#4 — Buyer post-login CHROME, ported VERBATIM from
   cd-b3-p2-export/chrome.css (DICE Design System_6 — the finalized active-pillar
   C: 64px header, accent-wash + 3px foot bar; supersedes the _5 'A pill' drop).
   Client role only (role branch in header/footer.php). CD :root tokens scoped to
   .dch-shell/.dch/.dcf so they can't leak into the app's global tokens.
   color-mix() active wash is modern-browser (2023+); older browsers degrade to the
   solid ::after foot bar (still a clear active indicator) — no flat-variant needed. */

/* ============================================================================
   DICE B3 · P2 — BUYER POST-LOGIN CHROME / SHELL  (header + footer)
   FLAT REFERENCE. Matches the shipped OFF-7 / D1-D2 navy chrome so post-login
   is consistent with the public pillar chrome AND the P1 catalogue/detail body.
   SCOPE = BUYER ONLY (client role). Sellers keep their chrome until the
   DICE-for-Sellers thread adopts THIS as the convergence reference.
   Self-contained: tokens resolved in-file; responsive 1080/860/600.
   Drop the P1 body (.cat / .lst) inside <main> between this header + footer.
   ========================================================================== */

.dch-shell, .dch, .dcf {
  --navy: #071E32;
  --ink: #0B1B2B;
  --text: #3D4754;
  --muted: #595959;
  --accent: #0B599C;
  --accent-strong: #094B82;
  --bg: #FFFFFF;
  --bg-subtle: #F8F8F8;
  --bg-muted: #EEF1F4;
  --border: #E2E6EA;
  --border-strong: #CBD2D9;
  --surface-page: #FFFFFF;
  --text-on-dark-muted: #B7C2CE;
  --focus-ring: rgba(31, 128, 190, 0.5);
  --pillar-sports-base: #0C7C6F;
  --font: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(7,30,50,0.06);
  --shadow-sm: 0 1px 3px rgba(7,30,50,0.08), 0 1px 2px rgba(7,30,50,0.04);
  --shadow-md: 0 6px 18px rgba(7,30,50,0.10);
  --shadow-menu: 0 12px 32px rgba(7,30,50,0.18);
  --container: 1320px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
}

*, *::before, *::after { box-sizing: border-box; }
.dch, .dcf { font-family: var(--font); -webkit-font-smoothing: antialiased; }
.dch a, .dcf a { text-decoration: none; color: inherit; }
.dch img, .dcf img { display: block; }
.dch button { font-family: var(--font); cursor: pointer; }

/* button atoms (shipped OFF-7) — NB primary text is WHITE on the blue in ALL contexts */
.dch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; white-space: nowrap; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.dch-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.dch-btn--primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.dch-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.dch-btn--white { background: #fff; color: var(--navy); border: 1px solid #fff; }
.dch-btn--white:hover { background: #EAF1F8; }

/* ============================================================================
   HEADER
   ========================================================================== */
.dch-header { position: sticky; top: 0; z-index: 50; background: rgba(7,30,50,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.dch-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 24px; }

.dch-logo { flex: none; display: inline-flex; align-items: center; }
.dch-logo img { height: 40px; } /* Sid-LOCKED chrome logo prominence — ONE size across post-login + anon (matches .pl-logo) */

/* primary nav */
.dch-nav { display: flex; align-items: stretch; gap: 2px; flex: none; align-self: stretch; }
/* per-active-pillar accent — the build sets these on .dch-nav for the current pillar */
.dch-nav { --nav-accent: var(--pillar-sports-base); }
.dch-nav--ent { --nav-accent: #7B2FBE; }
.dch-nav--channels { --nav-accent: #C08A12; }
.dch-nav .dch-nav__link { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 16px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.9); transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); white-space: nowrap; }
.dch-nav .dch-nav__link:hover { color: #fff; background: rgba(255,255,255,0.05); }
/* ACTIVE-PILLAR · default treatment = full-height tab (DH 07-06(e), picked C): accent wash top-to-bottom + 3px foot bar */
.dch-nav .dch-nav__link--active { font-weight: 700; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--nav-accent) 24%, transparent), transparent 74%); }
.dch-nav__link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--nav-accent); }
/* ACTIVE-PILLAR · alt treatment = bold + glow bar. Add .dch--nav-bar on the shell root to switch. */
.dch--nav-bar .dch-nav__link--active { background: none; font-weight: 800; }
.dch--nav-bar .dch-nav__link--active::after { left: 16px; right: 16px; bottom: 11px; height: 3px; border-radius: 3px; box-shadow: 0 0 10px var(--nav-accent); }

/* search — grows to fill the middle */
.dch-search { flex: 1; min-width: 0; max-width: 460px; margin: 0 auto; position: relative; }
.dch-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,0.55); }
.dch-search input { width: 100%; height: 42px; font-family: var(--font); font-size: 14px; color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 0 14px 0 38px; outline: none; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.dch-search input::placeholder { color: rgba(255,255,255,0.5); }
.dch-search input:focus { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }

/* right cluster: icon nav + account */
.dch-end { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.dch-ico { position: relative; width: 42px; height: 42px; border-radius: var(--radius); background: none; border: none; color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast); }
.dch-ico:hover { background: rgba(255,255,255,0.10); color: #fff; }
.dch-ico__label { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 0; }
.dch-ico__badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: #E5484D; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--navy); }

/* account menu */
.dch-acct { position: relative; margin-left: 8px; }
.dch-acct__btn { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; padding: 4px 6px 4px 8px; border-radius: var(--radius-pill); transition: background var(--dur-fast); }
.dch-acct__btn:hover { background: rgba(255,255,255,0.10); }
.dch-acct__name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }
.dch-acct__avatar { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--pillar-sports-base); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.dch-acct__chev { color: rgba(255,255,255,0.6); transition: transform var(--dur-base) var(--ease-standard); }
.dch-acct--open .dch-acct__chev { transform: rotate(180deg); }
.dch-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 232px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-menu); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast); }
.dch-acct--open .dch-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dch-menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dch-menu__co { font-size: 14px; font-weight: 700; color: var(--ink); }
.dch-menu__role { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.dch-menu__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); }
.dch-menu__item svg { color: var(--muted); flex: none; }
.dch-menu__item:hover { background: var(--bg-subtle); color: var(--ink); }
.dch-menu__sep { height: 1px; background: var(--border); margin: 6px 0; }
.dch-menu__item--signout { color: var(--accent); font-weight: 600; }

/* mobile hamburger — hidden on desktop */
.dch-burger { display: none; width: 42px; height: 42px; border-radius: var(--radius); background: none; border: none; color: #fff; align-items: center; justify-content: center; }

/* ============================================================================
   FOOTER (buyer, reskinned & brand-locked)
   ========================================================================== */
.dcf { background: var(--navy); color: var(--text-on-dark-muted); }
.dcf__inner { max-width: var(--container); margin: 0 auto; padding: 52px 32px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.dcf__brand img { height: 24px; margin-bottom: 16px; } /* footer logo unified with the anon footer (.pl-footer) */
.dcf__tagline { font-size: 14px; line-height: 1.6; color: var(--text-on-dark-muted); margin: 0 0 20px; max-width: 300px; }
.dcf__seller { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius); padding: 9px 14px; transition: background var(--dur-fast), border-color var(--dur-fast); }
.dcf__seller:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.dcf__col h3 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.dcf__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dcf__col a { font-size: 14px; color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
.dcf__col a:hover { color: #fff; }
.dcf__bar { max-width: var(--container); margin: 0 auto; padding: 20px 32px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.dcf__copy { font-size: 13px; color: rgba(255,255,255,0.55); }
.dcf__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.dcf__legal a { font-size: 13px; color: rgba(255,255,255,0.55); }
.dcf__legal a:hover { color: #fff; }

/* mobile drawer scrim */
.dch-scrim { display: none; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .dch-header__inner { padding-left: 24px; padding-right: 24px; gap: 18px; }
  .dcf__inner, .dcf__bar { padding-left: 24px; padding-right: 24px; }
  .dch-search { max-width: 320px; }
}

@media (max-width: 860px) {
  /* nav collapses into a drawer; search drops below into the drawer or hides */
  .dch-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 60; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 76px 0 0; transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out); overflow-y: auto; }
  .dch--menuopen .dch-nav { transform: translateX(0); }
  .dch-nav__link { height: auto; border-radius: 0; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  /* in the drawer the full-height tab flattens to a full-width row with a left accent bar (no wash/foot bar) */
  .dch-nav__link--active, .dch--nav-bar .dch-nav__link--active { background: rgba(255,255,255,0.06); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--nav-accent); padding-left: 21px; }
  .dch-nav__link--active::after, .dch--nav-bar .dch-nav__link--active::after { content: none; }
  .dch--menuopen .dch-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(7,30,50,0.5); }
  .dch-burger { display: inline-flex; }
  .dch-search { display: none; }
  .dch-acct__name { display: none; }
  .dcf__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dcf__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .dch-header__inner { padding: 10px 16px; gap: 10px; }
  .dch-logo img { height: 34px; } /* mobile — matches .pl-logo mobile (Sid-locked logo consistency) */
  .dch-ico { width: 40px; height: 40px; }
  .dcf__inner { grid-template-columns: 1fr; gap: 30px; padding: 40px 16px 32px; }
  .dcf__bar { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dch *, .dch *::before, .dch *::after, .dcf * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================================
   CHROME CONTRAST cascade-guard (DH P2-gate must-fix, retained through the C
   re-port). The store body colour + this file's own `.dch a{color:inherit}`
   (0,1,1) out-specify a plain `.dch-nav__link` (0,1,0) → these force the
   remaining header text light. Only sets `color` (never background), so C's
   accent-wash + foot bar on the active tab are untouched.
   B3.1 (CD _8 nav-contrast fix): the nav links now carry their colour via the
   properly-specific `.dch-nav .dch-nav__link` (0,2,0) rules above, which beat
   `.dch a` outright — so their !important overrides are retired here. Nothing
   else in the stylesheet set targets .dch-nav__link, so the cascade is clean.
   ============================================================================ */
.dch .dch-search input              { color: #fff !important; }
.dch .dch-search input::placeholder { color: rgba(255,255,255,0.5) !important; }
.dch .dch-acct__name                { color: rgba(255,255,255,0.85) !important; }
.dch .dch-acct__btn,
.dch .dch-ico                       { color: rgba(255,255,255,0.72) !important; }
.dch .dch-ico:hover                 { color: #fff !important; }
.dch .dch-acct__chev                { color: rgba(255,255,255,0.6) !important; }
.dch .dch-logo, .dch .dch-burger    { color: #fff !important; }

/* ============================================================================
   B3-P3 finding A — sticky-header PIN fix (DH chrome re-gate).
   In this build the header renders in store/layout/header.php OUTSIDE the body
   container, so `.dch-shell` wraps ONLY the header (a ~64px-tall box). A sticky
   element only holds within its containing block, so `.dch-header` scrolled away
   once you passed that short box (measured headerTop=-1600 @ scrollY 1600).
   `display:contents` removes the .dch-shell box from layout → .dch-header becomes
   a layout child of <body> (the page scroll root) → it pins across the whole page.
   The mobile drawer/scrim are unaffected (descendant selectors + position:fixed).
   ============================================================================ */
.dch-shell { display: contents; }

/* QA #2: the search magnifier is now a real submit button (was a decorative svg). */
.dch-search__btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255,255,255,0.6); z-index: 1; }
.dch-search__btn:hover { color: #fff; }
.dch-search__btn svg { position: static; transform: none; }