/* Hoisted from the design's inline styles. Declarations are copied
   verbatim; only the :hover rules are new, because the export's
   `style-hover` attribute has no inline equivalent. */

/* --- design base (from the export's <helmet>) --- */


/* STRUCTURE MOVED to `src/styles/foundation/nav.css` (2026-09-03) — the header
   bar, its inner row, the logo, the nav and the actions group are now the shared
   `.site-header*` classes, which SiteHeader.tsx carries alongside these.
   Removed from here: .sf-header-3 (row: 1200px/24px/72px flex), .sf-header-4 and
   -5 (logo), .sf-header-6 (nav), and the position/z-index half of .sf-header-2.
   The foundation reproduces each measurement in rem; the one deliberate change
   is the nav gap, which snaps from 40px onto --space-5 (32px).

   What stays here is BRANDING: the bar's white ground and shadow, link and
   badge colour, the CTA gradient, the type family. */

/* --- element rules --- */
.sf-header-1 { font-family:'Poppins',sans-serif; }
.sf-header-2 { background:#fff;box-shadow:0 5px 20px 0 rgba(0,0,0,.08); }
.sf-header-8 { position:relative;z-index:1;padding:5px 14px;border-radius: var(--r-lg);color:#fff;font-weight:400;font-size:var(--text-sm);font-family:'Poppins';line-height:normal;text-decoration:none;background:linear-gradient(135deg,#5479FF 0%,#51C5FF 100%); }
.sf-header-9 { display:flex;align-items:center;gap:24px;flex-shrink:0; }
.sf-header-10 { position:relative;display:inline-flex;align-items:center;text-decoration:none; }
/* A superscript off the cart's corner, not a disc on it (owner, 2026-09-18):
   smaller, higher, and further out to the right. */
.sf-header-11 { position:absolute;top:-10px;right:-12px;min-width:15px;height:15px;padding:0 3px;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:600;font-size:0.5625rem;font-family:'Poppins';line-height:normal;display:flex;align-items:center;justify-content:center; }
.sf-header-12 { display:inline-flex;align-items:center;text-decoration:none;color: var(--ink-600);text-transform:uppercase; }
.sf-header-13 { font-size: var(--text-xl);font-weight:600;margin-right:4px; }
.sf-header-14 { font-weight:400;font-size:var(--text-sm);font-family:'Poppins';line-height:normal; }
.sf-header-15 { margin-left:4px; }
.sf-header-16 { display:inline-flex;align-items:center;text-decoration:none; }
.sf-header-17 { width:34px;height:23px;object-fit:cover;border-radius: var(--r-xs);display:block; }

/* --- white links keep their colour on hover (see the port pipeline) --- */
.sf-header-8:hover { color: #fff; }
.sf-header-11:hover { color: #fff; }

/* The three control slots. The design draws them as plain anchors; ours are
   real controls (cart badge from cart.js, currency list from currency.js, the
   language switcher's per-locale hrefs), so they need the design's look applied
   to a button and its popup anchor rather than to an <a>. */
.sf-header-2 .sf-header-12 { background: none; border: 0; cursor: pointer; font: inherit; }
.sf-header-switcher { position: relative; display: inline-flex; align-items: center; }
.sf-header-2 .sf-header-10 { background: none; border: 0; cursor: pointer; padding: 0; }
/* The <ul> reset that lived here is the foundation's `.site-header__nav ul`. It
   had to go: it also fixed `display:flex` horizontally, which would have beaten
   the mobile panel's `flex-direction: column`. */
.sf-header-2 .sf-header-6 a { text-decoration: none; font-weight:400;font-size:var(--text-sm);font-family:'Poppins';line-height:normal; color: var(--ink-600); }
.sf-header-2 .sf-header-6 a:hover { color: var(--color-primary); }