/* ==================== the brand frame ====================
   Sam (29 Oct 2026): the homepage is black and the pages behind it were all
   white, so going into the site went "from fully black to fully white". The
   brand's black and Ignition Orange (#ed6e2a, BrandyHQ "veyora-r") now frame
   every page: a black bar with the white ® wordmark and an orange line on
   top, a black footer with an orange line at the bottom, the working content
   between them left light so catalogue, cart and order screens stay easy to
   read. Loaded after store.css, home.css and app.css, so equal selectors here
   win; nothing in it changes layout, only colour.

   Covers: the compact dark guest header (`.hm-nav--dark`, from homeHeader()),
   the signed-in top bar (`.topbar`, app.js shell()), its nav row's active
   tab, and the site footer (`.site-foot`). The homepage's own big centred
   header is `.hm-nav--hero` in home.css. */
:root{--brand-black:#000;--brand-orange:#ed6e2a}

/* ---------- guest header: black bar, white ® wordmark, orange line ---------- */
.hm-nav.hm-nav--dark,
.guest-head .hm-nav.hm-nav--dark,
.legal-page .guest-head .hm-nav.hm-nav--dark{background:var(--brand-black);border-bottom:3px solid var(--brand-orange)}
body.hm-dark .hm-nav.hm-nav--hero{border-bottom:0}
.hm-nav--dark .hm-nav-links a{color:#fff}
.hm-nav--dark .hm-nav-links a:hover{color:var(--brand-orange)}
.hm-nav--dark .hm-nav-links .hm-nav-acct{border-color:rgba(255,255,255,.35)}
.hm-nav--dark .hm-nav-links .hm-nav-acct:hover{border-color:#fff;color:#fff}
.hm-nav--dark .lang-current{color:#fff;border-color:rgba(255,255,255,.35)}
.hm-nav--dark .lang-current:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- signed-in top bar ----------
   The orange line is an inset shadow, not a border: the nav row below is
   pinned at top:58px, and a thicker border would push the bar past it. */
.topbar{background:var(--brand-black);color:#fff;border-bottom-color:var(--brand-black);box-shadow:inset 0 -3px 0 var(--brand-orange)}
.topbar .icon-btn,.topbar .burger,.burger{color:#fff}
.topbar .icon-btn:hover,.topbar .burger:hover{background:rgba(255,255,255,.12)}
.topbar .badge{background:var(--brand-orange)}
.topbar .present-toggle.on{background:var(--brand-orange);color:#fff}
.topbar .present-toggle.on:hover{background:#f2864c}
.topbar .icon-btn.notif-bell.has-unread{color:var(--brand-orange)}
.topbar .backbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.topbar .backbtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.topbar .backbtn:focus-visible{outline-color:#fff}
.topbar .desk-cmdk-trigger{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.topbar .desk-cmdk-trigger:hover{background:rgba(255,255,255,.08);border-color:#fff}
.topbar .desk-cmdk-trigger-kbd{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.topbar .lang-current{color:#fff;border-color:rgba(255,255,255,.35)}
.topbar .lang-current:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* The nav row stays light; the tab you are on is underlined in orange. */
.nav a.active{color:var(--brand-black);border-bottom-color:var(--brand-orange)}
.nav-more-btn[aria-expanded="true"]{border-bottom-color:var(--brand-orange)}
.nav-more-menu a.active{box-shadow:inset 3px 0 0 var(--brand-orange)}

/* ---------- footer: black, orange line on top ---------- */
.site-foot{background:var(--brand-black);color:rgba(255,255,255,.62);border-top:3px solid var(--brand-orange)}
.site-foot-legal{background:var(--brand-black);color:rgba(255,255,255,.62)}
.site-foot-links a,.site-foot-links .sales-pick > summary,.site-foot-report{color:rgba(255,255,255,.8)}
.site-foot-links a:hover,.site-foot-links .sales-pick > summary:hover,.site-foot-report:hover{color:#fff}
.site-foot-report:hover{background:rgba(255,255,255,.08)}
.site-foot-report:focus-visible{outline-color:#fff}
.site-foot-links .sales-pick-menu a{color:var(--ink)}
.catena-credit,.catena-credit-slogan{color:rgba(255,255,255,.6)}
.catena-credit-name{color:#e08a4a}
.catena-credit-slogan{border-inline-start-color:rgba(255,255,255,.2)}