/* ====================================================================== THE SEARCH SUGGESTIONS PANEL: ITS PLACE IN THE STACK, AND ITS WIDTH ---------------------------------------------------------------------- Loaded after ux.css (enqueued with af-ux as a dependency) so the rules below win on load order rather than on !important wherever that is enough. Measured with real keystrokes through the devtools protocol and screenshots at 360, 390, 414, 768, 834, 1024, 1280, 1440 and 1920, on the home page, a product category and a product. ====================================================================== */ /* ---------------------------------------------------------------------- 1. WHY z-index INSIDE THE HEADER COULD NEVER WIN XStore wraps the whole document in .page-wrapper { position: relative; z-index: 1 } and the header - and therefore the suggestions panel - lives inside it. That declaration makes .page-wrapper a stacking context, so every z-index below it is sealed in at level 1. The panel's own z-index:1000 and the header's z-index:50 order things *within* the page and mean nothing at all against anything painted outside .page-wrapper. Everything that covered the panel is outside it. Enumerated on a category page at 390 (computed styles, every positioned element in the document): .et-mini-content.af-cart-drawer z 100001 fixed OUTSIDE .af-skip-link z 100000 absolute OUTSIDE .et-notify z 10010 fixed OUTSIDE .af-lang__menu z 1200 absolute OUTSIDE .back-top z 999 fixed OUTSIDE .et-mobile-panel-wrapper (tab bar) z 10 fixed OUTSIDE .et-toggle-mob-sidebars (filters) z 1 fixed OUTSIDE ----------------------------------------------------------------- .page-wrapper z 1 relative header.site-header z 50 -> capped at 1 .af-sug z 1000 -> capped at 1 The filter toggle ties with .page-wrapper at 1 and comes later in the document, so it wins the tie and paints over the panel; the bottom tab bar at 10 and the back-to-top button at 999 beat it outright. Screenshot, category page at 390: the white funnel pill printed across the second result's thumbnail. On the home page there is no filter toggle, which is why the same panel looked clean there and the fault read as "only some pages". Raising the panel, the header or .mobile-header-wrapper cannot fix this - all three are inside the sealed context - and raising .page-wrapper itself would push the whole page above the bottom tab bar, hiding the site's own navigation behind product cards. So the seal is lifted, and only while a panel is actually open: :has() keeps the document's ordinary paint order untouched at every other moment. Where :has() is unsupported the page behaves exactly as it does today. !important because XStore declares .page-wrapper's z-index in its own stylesheet and the specificity race there is not worth relying on. ---------------------------------------------------------------------- */ .page-wrapper:has(.af-sug:not([hidden])){ z-index:auto!important; } /* Only .af-sug. XStore's own results wrapper is switched off for good in ux.css ("SEARCH SUGGESTIONS: ONE PANEL"), so its ajax-results-shown class no longer means anything is on screen and must not lift the seal. */ /* With the seal lifted the header competes at document level, so it needs a number that clears the page furniture and stays under the drawers: above .back-top 999, .et-mobile-panel-wrapper 10, filters 1 below .et-mini-content.af-cart-drawer 100001, .et-notify 10010, .af-lang__menu 1200 1000 is the only band that satisfies both. This is the one z-index the header gets for the panel's sake; ux.css only makes it positionable (position:relative below 1025, sticky above). */ header.site-header, header.site-header.sticky{ z-index:1000; } /* Both selectors on purpose. At >=1025 ux.css sticks the whole header with ".site-header,.site-header.sticky{position:sticky;z-index:999}" - two classes, which outranks a class-plus-type selector, so a bare "header.site-header" was measured still computing 999 at 1280. 999 ties with .back-top and the later element in the document wins the tie. */ /* ---------------------------------------------------------------------- 2. THE BOTTOM OF THE PANEL AND THE BOTTOM TAB BAR ux.css caps the panel at calc(100dvh - 190px - 84px), where 190px stands for "the header above it". Measured, the panel's top is 218px at 390 and 414 and 240px at 360 - the free-delivery line in the announcement bar wraps to two lines at 360 and pushes everything down. So the real header is 28px to 50px taller than the constant assumed and the panel ran past the tab bar: at 360 its last 34px, including the whole "Vezi toate cele N rezultate" footer, sat behind the tab bar. The tab bar measures 390x68 at y=776 on an 844px viewport - flush to the bottom, 68px tall, not 84. Sized off the worst case actually measured (240px of header) plus that 68px plus an 8px gap, so the panel now stops above the bar at every phone width rather than at one of them. max() keeps it usable on a short viewport (landscape, or a browser with its own toolbars showing). ---------------------------------------------------------------------- */ @media (max-width:600px){ .af-sug{ max-height:max(240px, calc(100vh - 316px)); max-height:max(240px, calc(100dvh - 316px)); } } /* ---------------------------------------------------------------------- 3. THE PANEL INSIDE THE MOBILE MENU DRAWER There are three .ajax-search-form instances. The one in .header-bottom is the wide field on a phone (358px of panel at 390); the one in .header-main is the desktop field; the third lives in the off-canvas menu, inside .et-content.mobile-menu-content, which is 240px wide and carries overflow:hidden - so its panel is 240px wide and clips anything that will not fit. Screenshot at 390 with the drawer open: the price and the stock line are laid out side by side with white-space:nowrap, they need about 185px, the row's text column is 148px, and "În stoc" was cut to "În s". The grid item could not shrink because a grid item's automatic minimum size is its content. min-width:0 lets it shrink and flex-wrap lets the stock drop under the price when the two will not share a line. Nothing is hidden: at 358px they still sit side by side exactly as before, and only the 240px drawer takes the second line. Section 4 below states the same two declarations again as part of the container query, which is what carries them to a narrow panel on a wide screen. This @media copy is what a browser without container queries still gets on a phone. ---------------------------------------------------------------------- */ @media (max-width:600px){ .af-sug__rt{ min-width:0; flex-wrap:wrap; column-gap:10px; row-gap:2px; } .af-sug__pr, .af-sug__sk{ min-width:0; } } /* ---------------------------------------------------------------------- 4. A PANEL AS NARROW AS THE FIELD IT HANGS FROM The panel takes the search pill's width, and the pill is not the same width at every breakpoint. Measured panel widths, home page: 360 328 390 358 414 382 768 719 834 781 1024 438 1280 373 1440 518 1920 989 (mobile menu drawer, any width: 240) 1280 is the worst of them and it is a desktop: the "Toate categoriile" select takes 210px of the pill and leaves the field 103px, so the panel comes out 373px - narrower than the same panel on a 390px phone. At that width every result was cut to "Adapatoare d…", "Adapatoare c…", "Adapatoare c…": six rows that a customer cannot tell apart, all of them showing back the one word just typed. Screenshot-confirmed at 1280 and 1024. ux.css already has the answer for this - name over two lines, no description, price and stock underneath - but asks the viewport for it (@media max-width:600px), and the viewport is exactly what does not predict the panel's width here. The same rules are asked of the panel itself instead, so the compact layout follows the panel wherever it is narrow: the 240px drawer, the 373px desktop pill and the 358px phone all get it, and 518px and wider keep the roomy layout that reads well. 480px is the measured line between them: 438 (1024) needs it, 518 (1440) does not. These declarations deliberately repeat the @media block in ux.css around line 12341. If one is ever changed, change both. ---------------------------------------------------------------------- */ .af-sug{ container-type:inline-size; container-name:af-sug; } @container af-sug (max-width:480px){ .af-sug__row{ display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:12px;row-gap:4px; align-items:start; padding:12px 14px; } .af-sug__th{grid-row:1 / span 2;width:52px;height:52px} .af-sug__th img{max-width:52px;max-height:52px} .af-sug__nm{ white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; font-size:16px;line-height:1.3; } .af-sug__ds{display:none} .af-sug__rt{ grid-column:2; flex-direction:row;align-items:baseline;justify-content:space-between; text-align:left; min-width:0; flex-wrap:wrap; column-gap:10px;row-gap:2px; } .af-sug__pr{font-size:16px;min-width:0} .af-sug__sk{font-size:13px;min-width:0} }