/* ===========================
   CLS HARDENING: HEADER ONLY
   Safe to paste anywhere after your main bundle.
   Tune the --vars to match your design if needed.
   =========================== */

:root {
  /* Reserve consistent heights for the two header rows */
  --hc-header-top-h: 44px;    /* header-upper-part (login/social) */
  --hc-header-main-h: 92px;   /* container-header (logo/nav/cart) */
  --hc-nav-bar-h: 48px;       /* header-nav-bar (primary menu bar if separate) */

  /* Social icon box; adjust if your icons are larger */
  --hc-social-icon: 24px;
  --hc-gap: 10px;
}

/* 1) Top strip (login + social) — prevent height changes */
header.header .header-upper-part {
  min-height: var(--hc-header-top-h);
  display: flex;
  align-items: center;
}

/* Social links list sometimes shifts when icons load or fonts swap */
header.header .header-upper-part .socialLinks.socialLinks--alt {
  display: flex !important;
  align-items: center;
  gap: var(--hc-gap);
  /* Reserve width so late-loading icons or longer link text won't push */
  min-width: calc((var(--hc-social-icon) + var(--hc-gap)) * 4); /* ~4 icons */
  min-height: var(--hc-social-icon);
}

/* Each social icon gets a fixed box so the list doesn't reflow on decode */
header.header .socialLinks.socialLinks--alt li,
header.header .socialLinks.socialLinks--alt a {
  display: inline-flex;
  width: var(--hc-social-icon);
  height: var(--hc-social-icon);
  align-items: center;
  justify-content: center;
}

/* Images/SVGs inside social icons — never collapse before load */
header.header .socialLinks.socialLinks--alt img,
header.header .socialLinks.socialLinks--alt svg {
  display: block;
  width: 100%;
  height: 100%;
  /* If SVG sprites load late, this still holds dimensions */
  aspect-ratio: 1 / 1;
}

/* 2) Login/Signup section — keep it from expanding mid-load */
header.header .navUser-section.navUser-section--alt {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Reserve width for "Login / Register" or similar text */
  min-width: 200px; /* adjust if your copy is longer */
  /* Reserve height so line-height/font swap doesn't move layout */
  min-height: var(--hc-social-icon);
  white-space: nowrap; /* prevents wrap-induced height jumps on desktop */
}

@media (max-width: 768px) {
  /* On mobile, allow wrapping but keep the row height stable */
  header.header .navUser-section.navUser-section--alt {
    white-space: normal;
    min-height: calc(var(--hc-social-icon) * 1.5);
  }
}

/* 3) Main header container (logo/nav/cart) — set a floor height */
header.header .container-header {
  min-height: var(--hc-header-main-h);
  display: flex;
  align-items: center;
}

/* 4) Primary nav bar — reserve its lane before JS enhances it */
header.header .header-nav-bar {
  min-height: var(--hc-nav-bar-h);
  display: flex;
  align-items: center;
}

/* If your nav list is hidden-then-shown by JS, keep its slot reserved */
header.header .header-nav-bar .navPages {
  min-height: var(--hc-nav-bar-h);
}

/* 5) Cart / add-to-cart area inside header — avoid bubble pushdown */
header.header .header-add-to-cart nav.navUser {
  position: relative;
  /* Reserve width for cart icon + count (prevents text squeeze) */
  min-width: 56px; /* icon + badge */
  min-height: 32px; /* typical icon height */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Badge should overlay, not reflow siblings when it appears */
header.header .header-add-to-cart nav.navUser .countPill,
header.header .header-add-to-cart nav.navUser .cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -25%);
}

/* 6) Font-swap stabilization for header text only (prevents width changes) */
header.header, 
header.header .navUser, 
header.header .navPages {
  font-size-adjust: 0.5;     /* keeps fallback metrics closer to webfont */
  font-synthesis-weight: none;
}

/* 7) Safety: prevent accidental CLS from late borders/margins */
header.header * {
  border-color: currentColor; /* avoids late color computation jumps */
}