/* ==========================================================================
   30-header: responsive pass for header.php across 320 to 1920.
   Builds on 10-header.css and 20-header.css. Scoped to header classes only.
   ========================================================================== */

/* ---------- topbar ---------- */
.topbar { overflow: hidden; }
.tb-moq-x { white-space: nowrap; }
/* Desktop: drop facts before they clip mid-word. The style count never fits
   beside the other four inside the max wrap (it clipped "Ships by" at 1920),
   and the Catalog label already carries it, so it only shows in the phone
   rotation. Shipping drops next, the price basis stays. */
.tb-facts:not(.tb-rot) .tb-range { display: none; }
@media (max-width: 1439px) { .tb-xwide { display: none; } }
@media (max-width: 1180px) { .tb-wide { display: none; } }
@media (min-width: 761px) {
  .tb-facts:not(.tb-rot) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px; }
}
/* Tablet widths: keep the MOQ fact short so the line never clips mid-word. */
@media (max-width: 900px) { .tb-moq-x { display: none; } }
/* 1001 to 1180 has room for the style count badge again. */
@media (min-width: 1001px) and (max-width: 1180px) { .nav-count { display: inline-block; } }
@media (min-width: 761px) and (max-width: 900px) {
  .topbar-links a:first-child { display: none; }
  .topbar-links a:nth-child(2) { border-left: 0; }
}
@media (max-width: 760px) {
  .topbar-inner { min-height: 32px; }
  .tb-facts { max-width: 100%; }
  /* Rotating line: let the MOQ fact read in full on phones. */
  .tb-facts.tb-rot .tb-moq { display: inline-block; }
  .tb-facts.tb-rot .tb-moq-x { display: inline; }
}
/* Phones: the line never shrinks below 12.8px. Long facts get shorter
   (country and the reorder clause drop) instead of smaller, and the tag uses
   the same sentence-case pill at every phone width so it does not change
   style at 400px. */
@media (max-width: 560px) {
  .topbar .tb-facts, .topbar .tb-fact { font-size: .8rem; }
  .topbar .tb-tag { margin-right: 8px; padding: 3px 6px; font: 600 .8rem/1.1 var(--f-body); letter-spacing: 0; text-transform: none; }
}
@media (max-width: 400px) {
  .tb-facts.tb-rot .tb-moq-x { display: none; }
}

/* ---------- brandbar: logo sized to the space between the side icons ---------- */
@media (max-width: 760px) {
  .brandbar-inner { grid-template-columns: minmax(66px, 1fr) auto minmax(66px, 1fr); gap: 8px; padding-block: 8px; }
  .brandbar .mark-logo { height: auto; width: clamp(128px, calc(100vw - 200px), 204px); aspect-ratio: 326 / 64; }
  .brand-contact { gap: 6px; }
  .brand-line, .brand-social .social a { width: 30px; height: 30px; position: relative; }
  /* 44px hit area around the 30px circles, on every phone. */
  .brand-line::after, .brand-social .social a::after { content: ""; position: absolute; inset: -7px; }
  .brand-contact .brand-line:first-child::after { right: -3px; }
  .brand-contact .brand-line + .brand-line::after { left: -3px; }
}

/* ---------- pinned bar ---------- */
.site-head-inner { min-width: 0; }
.head-actions { flex: none; }
.head-actions .btn { white-space: nowrap; }
@media (max-width: 960px) {
  .site-head-inner { gap: 12px; }
  .head-actions .btn-sm { min-height: 44px; }
}
@media (max-width: 360px) {
  .head-actions { gap: 6px; }
  .head-actions .btn-primary { padding-inline: 10px; font-size: .86rem; }
}

/* Small desktops (961 to 1100): tighter labels so the bar never wraps. */
@media (min-width: 961px) and (max-width: 1100px) {
  .site-head-inner { gap: 12px; }
  .nav > a, .nav-item > a { padding: 0 7px; font-size: .86rem; }
  .nav a.is-current::after { left: 7px; right: 7px; }
}
/* Large screens: let the labels breathe a little. */
@media (min-width: 1440px) {
  .nav > a, .nav-item > a { padding: 0 13px; }
  .nav a.is-current::after { left: 13px; right: 13px; }
}

/* ---------- mega menus on desktop: never past the viewport edge ---------- */
@media (min-width: 961px) {
  .mega { max-width: calc(100vw - 32px); }
  .mega-catalog .mega-grid { max-height: calc(100vh - 260px); overflow: auto; overscroll-behavior: contain; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .mega-catalog { width: min(720px, calc(100vw - 48px)); }
  .mega-catalog .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Short landscape screens (tablet landscape, small laptops): keep the menu on screen. */
@media (min-width: 961px) and (max-height: 820px) {
  .mega-sport { padding-block: 5px; }
  .mega-steps li { padding-block: 8px; }
}

/* ---------- mobile drawer ---------- */
@media (max-width: 960px) {
  .nav { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .nav-count { margin-left: 6px; }
  .mega-sport { min-height: 48px; }
  .mega-link { min-height: 44px; align-content: center; }
  .mega-head .mega-note { font-size: .86rem; }
  .mega-sport b { font-size: .94rem; }
  .mega-sport small { font-size: .74rem; }
  .ef-hdr-js .nav-item.has-mega { grid-template-columns: minmax(0, 1fr) 52px; }
}
/* Tablet portrait: the drawer reads better as a two-column sheet. */
@media (min-width: 640px) and (max-width: 960px) {
  .mega-catalog .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-links { grid-template-columns: 1fr 1fr; }
  .nav .nav-terms.nav-mobile-only { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 360px) {
  .nav-terms dd { font-size: .82rem; }
  .mega-sport { gap: 7px; padding-inline: 4px; }
  .mega-sport img { width: 32px; height: 32px; }
}