/* ============================================================ mobile-header-v3.css — CORE mobile header overrides (<= 767px) (v3 = filename cache-bust, adds hide-on-scroll; static assets ship with a 1-year max-age and bundling is OFF, so the suffix MUST be bumped on every content change) ------------------------------------------------------------ Loaded LAST so it wins source-order ties. Rules are scoped one level deeper (.header .header-lower ...) to beat the existing !important-laden rules in simplex.styles.responsive.css WITHOUT adding more !important. RTL-safe: logical properties. Visually neutral: colors come from --m-* tokens only. ============================================================ */ /* bottom nav is hidden by default; shown only on mobile (below) */ .mobile-bottom-nav { display: none; } /* --m-scrim-h / --m-scrim-arrow (the drawer's scroll-scrim tokens) live with every other --m-* token in mobile-foundation.css, which loads FIRST — a shop overriding them there must win, and a :root block here would silently outrank it. */ @media (max-width: 767.98px) { /* ---------- top utility row: compact, single line ---------- */ .header .header-upper { padding-block: 4px; font-size: 12px; } .header .header-upper .row { display: flex; align-items: center; justify-content: space-between; gap: var(--m-gap); margin: 0; } .header .header-upper [class*="col-"] { width: auto; float: none; padding: 0; } .header .header-upper .header-selectors-wrapper { display: flex; gap: 8px; align-items: center; } /* ---------- sticky compact main header ---------- Row 1: [≡] [logo (center)] [cart] Row 2: [ full-width search ] Sticky is applied to the WHOLE .header (not .header-lower) so its containing block is the tall page wrapper — otherwise sticky un-pins once the short .header scrolls past (~160px). The announcement bar sits OUTSIDE .header and scrolls away as intended. */ .header { position: sticky; inset-block-start: 0; z-index: var(--m-z-header); background: var(--m-header-bg); } .header .header-lower { background: var(--m-header-bg); color: var(--m-header-fg); border-block-end: 1px solid var(--m-border); } .header .header-lower .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-gap); margin: 0; min-height: var(--m-header-h); } .header .header-lower .row > [class*="col-"], .header .header-lower .m-menu-toggle-wrap { width: auto; float: none; padding: 0; } /* flex ordering (cols carry identifying classes from _Header.cshtml) */ .header .header-lower .m-menu-toggle-wrap { order: 1; flex: 0 0 auto; } .header .header-lower .header-logo-col { order: 2; flex: 1 1 auto; text-align: center; } .header .header-lower .header-cart-col { order: 3; flex: 0 0 auto; } .header .header-lower .header-search-col { order: 5; flex: 1 0 100%; } .header .header-lower .header-logo img { max-height: 40px; width: auto; display: inline-block; } /* full-width, prominent mobile search (best practice). simplex pins .search-box and .search-nav to a fixed 260px on mobile — override with !important to fill the row. */ .header .header-lower .search-box, .header .header-lower .search-box .navbar-form, .header .header-lower .search-box .form-group { width: 100% !important; margin: 0 !important; position: relative; float: none !important; display: block !important; } /* simplex.styles.responsive.css sets .header-lower .search-box{overflow:hidden} on mobile, which CLIPS the .ui-autocomplete dropdown (appendTo:'.search-box', absolute below the input) — suggestions fetched fine but never visible. */ .header .header-lower .search-box { overflow: visible; } /* jQuery UI sizes the menu off the theme's 260px desktop pill — span the full mobile search row instead (inline width needs !important). */ .header .header-lower .search-box .ui-autocomplete { width: 100% !important; left: 0 !important; right: 0; } /* the search-box .form-group has max-width:260px in the theme — lift that cap */ .header .header-lower .header-search-col .search-box .form-group { width: 100% !important; max-width: none !important; } .header .header-lower .search-box .search-nav, .header .header-lower .search-box input#small-searchterms, .header .header-lower .search-box input.form-control { width: 100% !important; max-width: none !important; box-sizing: border-box; float: none !important; } /* ----- search as a pill on the app-bar (works on the dark surface) ----- 44px pill/button (was 40px — under the touch floor; flagged on the CHR001 round sweep and shop-patched there; promoted to core 2026-06-05) */ .header .header-lower .search-box .search-nav { background: rgba(255, 255, 255, .12) !important; border: 0 !important; border-radius: 999px; color: var(--m-header-fg) !important; height: 44px; padding-inline-start: 16px; padding-inline-end: 46px; } .header .header-lower .search-box .search-nav::placeholder { color: rgba(255, 255, 255, .65); } /* magnifier: drop the dark sprite (invisible on dark) → white Font Awesome glyph */ .header .header-lower .search-box .search-box-button { position: absolute; inset-inline-end: 0; inset-block-start: 0; width: 44px; height: 44px; background: none !important; border: 0; color: var(--m-header-fg); font-size: 0; cursor: pointer; } .header .header-lower .search-box .search-box-button::before { font: normal normal normal 16px/1 FontAwesome; content: "\f002"; } /* ----- dark app-bar: light text/icons across header, menu, bottom nav ----- */ .header .header-lower, .header .m-menu-toggle, .header .header-cart-col .ico-cart { color: var(--m-header-fg); } .header-menu .navbar-collapse.in a, .header-menu .navbar-collapse.in .nav > li > a, .header-menu .navbar-collapse.in .nav li a, #mobile-menu .mobile-menu-account .header-top-right li a { color: var(--m-header-fg) !important; } /* subcategory submenus (.dropdown-menu / .sub-menusu) default to a WHITE background — on the dark drawer that shows as a white band. Make them transparent so the dark panel shows through, with light text + light expand arrows. */ .header-menu .navbar-collapse.in .dropdown-menu, .header-menu .navbar-collapse.in .sub-menusu, .header-menu .navbar-collapse.in ul ul { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* parent categories EXPAND on tap (no navigation): collapsed by default, shown when mobile-header.js adds .m-open. This is the single source of truth for submenu visibility on mobile, overriding any hover/ajax inline display. */ .header-menu .navbar-collapse.in li.dropdown > .dropdown-menu { display: none !important; } .header-menu .navbar-collapse.in li.dropdown.m-open > .dropdown-menu { display: block !important; } .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down { transition: transform .2s ease; } .header-menu .navbar-collapse.in li.dropdown.m-open > .fa-angle-down { transform: rotate(180deg); } /* "All {category}" link at the top of each submenu (reaches the parent page) */ .header-menu .navbar-collapse.in .m-viewall a { font-style: italic; opacity: .85; } .header-menu .navbar-collapse.in .dropdown-menu a { padding-inline-start: 30px; } .header-menu .navbar-collapse.in .fa-angle-down, .header-menu .navbar-collapse.in .fa-angle-right, .header-menu .navbar-collapse.in [class*="angle"] { color: var(--m-header-fg) !important; background: transparent !important; border: 0 !important; } /* active/open category: subtle light highlight (not a clashing colour band) */ .header-menu .navbar-collapse.in .nav > li.active > a, .header-menu .navbar-collapse.in .nav > li.open > a { background: rgba(255, 255, 255, .06) !important; } .mobile-bottom-nav a, .mobile-bottom-nav .m-sort-trigger { color: var(--m-header-fg); } .mobile-bottom-nav .cart-qty:not(:empty), #mobile-menu .mobile-menu-account .header-top-right .wishlist-qty { color: var(--m-accent); } /* compact the header cart to icon-only (the verbose label/qty would wrap to its own row). Text kept for screen readers (sr-only). Live count lives in the bottom nav. */ /* vertically centre the cart icon. simplex pins .ico-cart/.shopping-cart-link to mismatched heights (20/35px) so the 44px icon overflows and sits low. Normalise the whole chain to a single flex-centred 44px box. */ .header .header-lower .header-cart-col, .header .header-lower .header-cart-col #flyout-cart, .header .header-lower .header-cart-col .shopping-cart-link, .header .header-lower .header-cart-col .ico-cart { display: flex; align-items: center; justify-content: center; height: auto !important; min-height: var(--m-touch-min); margin: 0; padding: 0 !important; float: none; } /* the cart sprite (cart-icon.png) is a 2-frame vertical sprite; a 44px box exposed BOTH frames (the "doubled" cart). Drop the sprite and use a crisp Font Awesome glyph instead — vector, single icon, consistent with the bottom nav cart. Shops may override .ico-cart::before to restore their own branded icon. */ .header .header-lower .header-cart-col .ico-cart { float: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--m-touch-min); min-height: var(--m-touch-min); padding: 0 !important; background: none !important; position: relative; color: inherit; text-decoration: none; } .header .header-lower .header-cart-col .ico-cart::before { font: normal normal normal 22px/1 FontAwesome; content: "\f07a"; } /* live count badge on the header cart icon (populated by mobile-header.js) */ .header .header-lower .header-cart-col .ico-cart .m-cart-badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--m-accent); color: var(--m-header-bg); font: 700 10px/16px sans-serif; text-align: center; } .header .header-lower .header-cart-col .ico-cart .m-cart-badge:empty { display: none; } .header .header-lower .header-cart-col .cart-label, .header .header-lower .header-cart-col .cart-qty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* the hover/ajax flyout-cart DROPDOWN is a desktop feature; on mobile the cart icon links straight to /cart. Hide the dropdown so it can't cover the header or get stuck open after an add-to-cart / notification (the toast gives the feedback). */ .header-cart-col .flyout-cart-wrapper, #flyout-cart .flyout-cart-wrapper { display: none !important; } /* in-header hamburger (proxy button toggling the existing #mobile-menu) */ .header .m-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--m-touch-min); min-height: var(--m-touch-min); background: transparent; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; } /* keep TopMenu widget zones, hide only its own toggle button */ .header-menu { background: transparent; border: 0; padding: 0; min-height: 0; } .header-menu .navbar-header { display: none; } /* neutralise Bootstrap navbar-inverse's DARK background so it can't show as a dark band inside the white docked menu panel */ .header-menu .navbar, .header-menu .navbar-inverse, .header-menu .navbar.category-menu { background: transparent !important; border: 0 !important; margin: 0; min-height: 0; } /* when BS3 collapse is open (.in) — and during its transition (.collapsing, which avoids a flash when UseAjaxMenu populates #mobile-menu async) — dock the panel under the sticky header. --m-header-stack-h is measured by mobile-header.js; falls back to row-1 height. */ .header-menu .navbar-collapse.in, .header-menu .navbar-collapse.collapsing { position: fixed; inset-block-start: var(--m-header-stack-h, var(--m-header-h)); inset-inline: 0; max-height: calc(100vh - var(--m-header-stack-h, var(--m-header-h))); /* 100vh is the LARGE viewport (URL bar collapsed): while iOS Safari shows its URL bar the panel's bottom edge sits BELOW the visible area and the last rows become unreachable. 100dvh tracks the live viewport; engines without dvh keep the line above. Applies in BOTH orientations — landscape has the same URL bar. */ max-height: calc(100dvh - var(--m-header-stack-h, var(--m-header-h))); /* the drawer now runs to the very bottom of the viewport, so the last row would sit under the home indicator (100dvh includes it) and collide with the system swipe area. Pad instead of shrinking max-height: scroll reach is preserved and the sticky scrim's resting edge moves up with it. */ padding-block-end: env(safe-area-inset-bottom, 0px); overflow-y: auto; -webkit-overflow-scrolling: touch; /* the scroll scrim below bleeds -15px each side to cancel BS3's inline padding; clip that bleed so it can never produce a horizontal scrollbar */ overflow-x: hidden; /* WCAG 2.4.11 (Focus Not Obscured): keyboard focus landing on a row inside the scrim band would otherwise stay half-covered — the browser scrolls focus into view against the scrollport edge, which the sticky scrim overlaps. Reserve the scrim's height (+4px breathing room) so focus always ends up clear of it. */ scroll-padding-block-end: calc(var(--m-scrim-h, 40px) + 4px); background: var(--m-header-bg); z-index: var(--m-z-header); border-block-start: 1px solid var(--m-border); } /* v4 (2026-10-03, menu UI/UX): the open drawer FILLS the space under the header. It used to end where its content ended (6 categories + a short account list = ~550px on a phone), so the page showed through below it with nothing to say it was behind a menu. Only on .in - .collapsing keeps BS3's animated height. */ .header-menu .navbar-collapse.in { height: calc(100vh - var(--m-header-stack-h, var(--m-header-h))) !important; height: calc(100dvh - var(--m-header-stack-h, var(--m-header-h))) !important; } /* the hamburger turns into a close (x) while the drawer is open - its aria-expanded already follows the panel (mobile-header-v4.js setExpanded); shops that mask their own icon set swap the glyph on the same hook */ .header .header-lower .m-menu-toggle[aria-expanded="true"] .fa-bars::before { content: "\f00d"; } /* The bottom tab bar (z 1031, portrait-only) sits ABOVE the drawer (z 1029) and covered its last rows. The previous fix stopped the panel exactly where the bar begins — which made the drawer's bottom hairline coincide with the bar's top hairline and read as a FALSE BOTTOM (nothing hinted at more content below). Instead: hide the bar while the drawer is open (same precedent as body.modal-open below, and the pattern Amazon/ASOS use) and let the drawer own the full height. Closing stays available via the sticky header hamburger and Escape. .m-pdp-cta (the sticky product CTA bar, z 1030 — mobile-product-v2.css) must go with it: it also outranks the drawer and, once the tab bar it rests on is gone, would float over the menu above a 56px hole. */ html.m-menu-open .mobile-bottom-nav, html.m-menu-open .m-pdp-cta { display: none; } /* SCROLL AFFORDANCE — a sticky scrim + chevron pinned to the panel's own bottom edge, so a scrollable drawer never looks finished (NN/g "false bottom"). sticky, not fixed: the panel is max-height (not height), so a fixed child would have to re-derive the portrait/safe-area geometry, and .in creates a stacking context at z 1029 that a fixed ::after could never escape anyway. Sticky rides the scrollport, is clipped by its overflow, and — with the negative block margin — contributes 0 to scrollHeight, so it can't influence the scrollable test. Scoped to .in (desktop keeps BS3's .navbar-collapse:after clearfix; inside .in the overflow:auto already establishes a BFC, so losing it here is inert). State classes toggle OPACITY ONLY — never box geometry. */ .header-menu .navbar-collapse.in::after, .header-menu .navbar-collapse.collapsing::after { content: ""; display: block; position: sticky; inset-block-end: 0; /* above the row chevrons (position:absolute; z-index:1, see below) */ z-index: 2; block-size: var(--m-scrim-h, 40px); margin-block-start: calc(-1 * var(--m-scrim-h, 40px)); /* cancel BS3 .navbar-collapse's 15px inline padding so the fade spans full width */ margin-inline: -15px; /* The var() fallbacks here are deliberate duplication, not DRY sloppiness: this file carries a version suffix and mobile-foundation.css does NOT, so a returning visitor can hold a 1-year-cached foundation that predates these tokens. Without the fallbacks the shorthand would be invalid at computed-value time and the gradient would vanish with it — the affordance would silently disappear on exactly the users we shipped it for. A shop overriding the tokens in foundation still wins (it loads first). */ background: var(--m-scrim-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E")) center bottom 6px / 18px 18px no-repeat, linear-gradient(to top, var(--m-header-bg) 30%, transparent); pointer-events: none; opacity: 0; transition: opacity .18s ease; } .header-menu .navbar-collapse.in.m-scrollable::after { opacity: 1; } .header-menu .navbar-collapse.in.m-scroll-end::after { opacity: 0; } .header-menu .navbar-collapse.in .nav > li > a { min-height: var(--m-touch-min); display: flex; align-items: center; } /* ROOT CAUSE of "the categories are hidden and nothing says so": simplex.styles.responsive.css caps the category list itself at max-height:300px (400px under 375px) with overflow-y:scroll — a SECOND scroller nested inside the drawer's own scroller. Its rows were clipped mid-panel with the drawer still looking complete, and an expanded accordion could even land outside its scroll range (unreachable). Collapse it into a single scroll region: the drawer scrolls, the list flows. Selector deliberately carries the same ancestors as theirs (8 classes) so it wins on specificity without adding !important — file policy. .collapsing needs the SAME treatment: BS3's collapse.show() reads scrollHeight while the panel is .collapsing to animate to, so leaving the cap on there would open to the capped height and snap to full the moment .in lands. */ .header-menu .main-menu .navbar.navbar-inverse .navbar-collapse.in .nav.navbar-nav, .header-menu .main-menu .navbar.navbar-inverse .navbar-collapse.collapsing .nav.navbar-nav { max-height: none; overflow: visible; } /* lock background scroll while the menu drawer is open (set by mobile-header.js). Lock the scroll container (and body); overflow:hidden freezes at the current scroll offset so the docked menu stays aligned with the header. */ html.m-menu-open, body.m-menu-open { overflow: hidden; } /* JOLT FIX (IJO001 report 2026-06-06): on desktop browsers with CLASSIC scrollbars (narrow-window testing), the locks above (and the search sheet's) REMOVE the scrollbar — the viewport widens ~17px and the whole page reflows ("출렁"). Reserve the gutter permanently in the mobile range: real phones use overlay scrollbars (no gutter, no effect), desktop windows keep a stable gutter so lock/unlock no longer shifts layout. */ html { scrollbar-gutter: stable; } /* guarantee tap targets in header (header-lower only; header-upper account strip is hidden on mobile and moved into the menu — see below) */ .header .header-lower a { min-height: var(--m-touch-min); } /* absorb the 44px min-height on the logo anchor without adding a visible gap */ .header .header-lower .header-logo a { display: inline-flex; align-items: center; justify-content: center; } /* ---------- density tightening (neutral: spacing/typography only) ---------- */ /* trim header-lower padding + inter-row gap (logo row / search row) */ .header .header-lower { padding-block: 6px; } .header .header-lower .row { gap: 6px; min-height: auto; } .header .header-lower .search-box { margin: 0; } /* header-upper: thin utility strip */ .header .header-upper { padding-block: 2px; font-size: 11px; line-height: 1.2; } /* account links are MOVED into the hamburger menu on mobile (see TopMenu). Hide the cramped header-upper strip — its tiny sprite icons were poor touch targets and exposed a 2nd sprite frame (the "doubled" icons). */ .header .header-upper .header-links { display: none; } /* account section inside the mobile menu: full-width, labeled, 44px tap rows. Drop the sprite background (avoids frame bleed) and show the text labels. */ #mobile-menu .mobile-menu-account .header-top-right, #mobile-menu .mobile-menu-account .header-top-right ul { display: block; width: 100%; margin: 0; padding: 0; } #mobile-menu .mobile-menu-account .header-top-right li { display: block; float: none; width: 100%; margin: 0; border: 0; } #mobile-menu .mobile-menu-account .header-top-right li a { display: flex; align-items: center; gap: 8px; float: none !important; min-height: var(--m-touch-min); padding: 0 16px; background-image: none !important; font-size: 14px; width: auto; border-block-end: 1px solid var(--m-border); } #mobile-menu .mobile-menu-account .header-top-right .wishlist-qty, #mobile-menu .mobile-menu-account .header-top-right .inbox-unread { color: var(--m-accent); } /* uniform left rhythm for ALL drawer account rows (user report, CHR001 round: Messages sat at 16px while the others sat at 30px). Shop skins pin their own desktop glyph offsets (wigstheme .ico-* padding-left:30px at higher specificity) and PLUGIN rows (.ico-inbox, NpcCustomerMessage) don't share those pins -> mixed indents. The !important on the padding here out-ranks every shop pin; 16px matches the section-title indent. */ #mobile-menu .mobile-menu-account .header-top-right li a { padding: 0 16px !important; } /* 'Administration' / 'Manage this page' (AdminHeaderLinks, invoked inside HeaderLinks) already render in the persistent top admin bar (.admin-header-link, _Root.cshtml) — hide the duplicate drawer row. */ #mobile-menu .mobile-menu-account .admin-header-links { display: none !important; } /* (1) section grouping: a labelled divider before the account block */ #mobile-menu .mobile-menu-account { border-block-start: 2px solid var(--m-border); margin-block-start: 4px; } #mobile-menu .m-menu-section-title { padding: 12px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; color: var(--m-header-fg); } /* (3) account-item icons (Font Awesome glyphs; the sprite bg was dropped earlier). position/transform resets: wigstheme-family skins absolute-pin these glyphs for their desktop header (.header-top-right ul li .ico-*::before { position:absolute; left:10px; transform:translateY(-50%) } ) — unreset, the glyph paints OVER the row text once the core 16px row padding applies (GOL001 drawer overlap report). */ #mobile-menu .mobile-menu-account .header-top-right li a::before { font: normal normal normal 15px/1 FontAwesome; width: 20px; margin-inline-end: 4px; display: inline-block; text-align: center; opacity: .9; position: static; transform: none; } #mobile-menu .mobile-menu-account .ico-account::before { content: "\f007"; } /* user */ #mobile-menu .mobile-menu-account .ico-wishlist::before { content: "\f004"; } /* heart */ #mobile-menu .mobile-menu-account .ico-inbox::before { content: "\f0e0"; } /* envelope */ #mobile-menu .mobile-menu-account .ico-logout::before { content: "\f08b"; } /* sign-out */ #mobile-menu .mobile-menu-account .ico-register::before { content: "\f234"; } /* user-plus */ #mobile-menu .mobile-menu-account .ico-login::before { content: "\f090"; } /* sign-in */ #mobile-menu .mobile-menu-account .administration > a::before, #mobile-menu .mobile-menu-account a.ico-admin::before { content: "\f013"; } /* gear */ /* (2) expand affordance: pin the parent chevron to the right edge of the row so it clearly reads as "tap to expand" (it sits before the link in source). */ .header-menu .navbar-collapse.in li.dropdown { position: relative; } .header-menu .navbar-collapse.in li.dropdown > .fa-angle-down { position: absolute; inset-inline-end: 16px; inset-block-start: 15px; font-size: 16px; opacity: .8; pointer-events: none; } .header-menu .navbar-collapse.in li.dropdown > a.dropdown-toggle { padding-inline-end: 40px; } /* (2b) desktop hover affordances must not drive the drawer (IJO001 report 2026-06-06, base-simplex shops): the theme opens .dropdown-menu on :hover and paints the parent row solid brand-red — on touch, hover goes sticky after a tap, and in narrow desktop windows the pointer pre-opens submenus over the accordion. Inside the OPEN drawer the core .m-open accordion is the ONLY opener, and rows keep their resting look. */ .header-menu .navbar-collapse.in li.dropdown:not(.m-open) > .dropdown-menu, /* the theme's hover-openers carry an 8-class compound (.navbar.navbar-inverse .nav.navbar-nav > li.dropdown:hover) that out-ranks the drawer-scoped guard above — repeat their own compound plus :not(.m-open) to win, incl. the nested 3rd-depth variant. */ .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown:not(.m-open):hover > .dropdown-menu, .header-menu li.dropdown .dropdown-menu li.dropdown:not(.m-open):hover > .dropdown-menu { display: none !important; } .header-menu .navbar-collapse.in li > a:hover, .header-menu .navbar-collapse.in li.dropdown > a.dropdown-toggle:hover { background: transparent !important; color: inherit !important; } /* (2c) submenu rows, minimal-readable: the theme styles drawer sublists as its desktop flyout (12px ITALIC + decorative glyphs) — normalise to plain indented 44px rows; the indent alone reads as hierarchy. */ .header-menu .navbar-collapse.in .dropdown-menu li a { font-style: normal !important; font-size: 14px !important; min-height: var(--m-touch-min, 44px); display: flex !important; align-items: center; padding: 0 16px 0 32px !important; background: transparent !important; color: inherit !important; opacity: .85; } .header-menu .navbar-collapse.in .dropdown-menu li a:hover { opacity: 1; } .header-menu .navbar-collapse.in .dropdown-menu li::before, .header-menu .navbar-collapse.in .dropdown-menu li a::before, .header-menu .navbar-collapse.in .dropdown-menu li a i { display: none !important; content: none !important; } /* (2d) parents with children must READ differently from leaf rows (IJO001 report 2026-06-06): the markup ships a chevron span, but the theme HIDES it with an 8-class display:none !important (simplex.styles.responsive:222) and its #mobile-menu rule restyles the leftovers 30px/white/right-flush. Restore + normalise: quiet 16px FA chevron at the shared right inset; rotation on .m-open comes from the core rule above. pointer-events:none — taps land on the row link and mobile-header.js owns the accordion toggle. */ .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > .fa-angle-down.visible-xs, .header-menu .navbar.navbar-inverse .nav.navbar-nav > li.dropdown > span.fa-angle-down, #mobile-menu li.dropdown > .fa-angle-down { display: inline-block !important; font: normal normal normal 16px/1 FontAwesome !important; position: absolute !important; inset-inline-end: 16px !important; inset-block-start: 15px !important; padding: 0 !important; opacity: .8; z-index: 1; pointer-events: none !important; cursor: default !important; } /* promo announcement bar eats ~98px (3 wrapped lines) on mobile — trim density modestly (this is shop-branded promo content; shops may override on their branch). */ .announcement-bar { padding-block: 6px; } .announcement-bar .announcement-bar__text { font-size: 13px; line-height: 1.25; } /* the bar already has a dismiss (×) with localStorage persistence and sits in the document flow (scrolls away) — just guarantee the close control is a 44px target */ .announcement-bar .announcement-bar__close { min-width: var(--m-touch-min); min-height: var(--m-touch-min); display: inline-flex; align-items: center; justify-content: center; } /* ---------- fixed bottom tab bar ---------- */ .mobile-bottom-nav { display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--m-z-bottomnav); background: var(--m-header-bg); border-block-start: 1px solid var(--m-border); padding-block-end: env(safe-area-inset-bottom, 0px); } .mobile-bottom-nav ul { display: flex; margin: 0; padding: 0; list-style: none; } .mobile-bottom-nav li { flex: 1 1 0; text-align: center; } /* the Sort tab is a