/* ==========================================================================
   GBZ420 - secondary surfaces + shared header utility band - v1
   2026-09-24 - local copy C:\Codex\GBZ420\site (gbz420.test).
   --------------------------------------------------------------------------
   Two corrections, both proven in preview before this file existed:
   docs\sitewide-maquettes-20260921\qa-secondary-current-20260924\PREVIEW.md
   and preview\PREVIEW.md (variants A and B, runtime injection only).

   A - page links of the theme pagination on the three secondary product
       listings. The charter names 44 x 44 for a CTA and an accordion row and
       40 px as the desktop pill floor; the theme pagination sat at 26 x 25
       (390) and 30 x 29 (1440) with an effective hit box of 27 x 26 / 31 x 29.
       The box of the link grows and its display becomes inline-flex so the
       label stays centred in it; no colour, no face, no token is touched.
       Scope: body#best-sales, body#new-products, body#prices-drop. The realised
       families cannot match - they render the Creative Elements grid and its
       elementor pagination.

   B - the shared header utility band below the theme's md breakpoint. The band
       is wider than the row that holds it (419 px of links in a 372 px row at
       390), so the last link was clipped with no way to reach it: 4 of the 5
       links were reachable. The rail itself becomes the scrolling box, which
       makes all 5 reachable and leaves the language selector in place.
       Scope: nav.header-nav under 991.98px, on every family, because the
       clipping comes from the shared shell and not from the secondary pages.

   What B changes at rest, said plainly: the rail is narrower than the band, so
   at scrollLeft 0 the window is 268 px instead of 419 and one more link is cut
   than before (three whole links and a fourth cut, where the shared shell
   showed four whole and cut the fifth). The resting appearance is therefore
   NOT pixel identical; the header band, the breadcrumb, the page title, the
   first card and the language selector keep identical coordinates, and the
   geometry outside the rail is unchanged. Desktop is untouched: the rule lives
   inside the media query and at 1440 the rail keeps its 502 px, unscrollable.

   Rules for this file:
     1. No custom property is declared or redeclared here: no var(--gbz-*) is
        used and no token value is set by this file.
     2. Presentational only, and display is not untouched: rule A switches the
        pagination anchor from block to inline-flex so its label stays centred
        in the enlarged box, and rule B switches the rail from inline-block to
        block so it becomes the scroll container. Visibility, content, module
        behaviour, markup and every other element are left alone; there is no
        wildcard reset and no new layout band.
     3. No !important.
   Owner: secondary surfaces + shared shell, 2026-09-24.
   ========================================================================== */

/* A - pagination hit box, secondary product listings only */
body:is(#best-sales, #new-products, #prices-drop) nav.pagination ul.page-list > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  line-height: 1;
}

/* B - shared header utility band: the rail scrolls instead of clipping */
@media (max-width: 991.98px) {
  nav.header-nav > .container > .row > .left-nav {
    min-width: 0;
  }

  nav.header-nav > .container > .row > .left-nav > .block-links-inline {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  nav.header-nav > .container > .row > .left-nav > .block-links-inline::-webkit-scrollbar {
    display: none;
  }

  nav.header-nav > .container > .row > .left-nav > .block-links-inline > ul {
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-bottom: 0;
  }

  nav.header-nav > .container > .row > .right-nav {
    flex: 0 0 auto;
  }
}