/** * Horizon Theme — Responsive / Mobile Layer (MT-8) * All breakpoint overrides in one auditable file. * Complements the desktop-first rules in hp-base / hp-components / hp-shop / * hp-vault. Load order: after hp-age-gate, before hp-child (functions.php). */ /* ========================================================================== ≤ 768px — GP mobile nav breakpoint Hamburger fires here (GP inline CSS shows .menu-toggle at this width). ========================================================================== */ @media (max-width: 768px) { /* ── Hamburger toggle: WCAG 2.5.5 44×44 px minimum tap target ── The icon itself is visually sufficient on both skins; no border. min-width/min-height expand the invisible hit area only. */ .hp .menu-toggle { min-width: 44px !important; min-height: 44px !important; } /* ── The header tools ride in the header bar, not inside the hamburger ── `HORIZON-20260828-001` (search), `-002` (account + cart). Alex, 2026-08-28. The nav items from `-20260827-037`/`-050` are behind the toggle at this width, so all three cost two taps. `hp_render_mobile_header_tools()` renders .hp-header-tools as a direct child of .inside-header, which is `display:flex; justify-content:space-between`. ⭐ ORDER IS SET EXPLICITLY RATHER THAN RELYING ON DOM ORDER: this element arrives on `generate_after_header_content`, and whether that lands before or after GP's own mobile-toggle wrapper is GP's business, not ours. `order` makes the result the same either way. `margin-left:auto` pushes the group to the right so the logo keeps the left edge - space-between alone would strand it mid-bar. ⭐ ONE flex container rather than three loose children, so the whole group moves as a unit and only ONE auto margin competes with GP's (see below). */ .hp .inside-header .hp-header-tools { display: flex; align-items: center; gap: var(--hp-sp-1); order: 8; margin-left: auto; margin-right: var(--hp-sp-1); z-index: 3; } .hp .inside-header .hp-header-tool { position: relative; /* anchor for the cart count badge */ display: flex; align-items: center; justify-content: center; min-width: 44px; /* WCAG 2.5.5, same as the hamburger above */ min-height: 44px; color: var(--hp-text); text-decoration: none; } /* Cart count — PLACEMENT ONLY. The appearance is shared with the nav badge and lives in hp-components.css (`HORIZON-20260828-003`); this block held a full copy of it until the nav one was built and the duplication became real. Anchored to the 44px square, which centres a 22px icon, so 2px/2px puts the badge on the icon's top-right corner. */ .hp .inside-header .hp-header-tool__count { top: 2px; right: 2px; } /* ⛔ GP's own main.min.css sets `.mobile-menu-control-wrapper { margin-left: auto }`. TWO auto margins in one flex row SPLIT the free space instead of one absorbing it, so the first build left search stranded mid-bar at x=168 with 94px of gap either side - evenly spaced, which reads as deliberate and is why it needed measuring rather than looking. Zeroing GP's lets ours absorb the lot and parks search against the hamburger. (0,1,2,0) beats GP's (0,0,1,0), so no !important. */ .hp .inside-header #mobile-menu-control-wrapper { order: 9; margin-left: 0; } /* ⛔ AND THE NAV ITEMS GO AWAY HERE, OR OPENING THE HAMBURGER SHOWS A SECOND COPY OF ALL THREE. ⛔⛔ DESCENDANT, NOT CHILD. `.main-nav` is the `
`; the items are in a `