/* * mobile-fixes.css — two mobile-only fixes from the mobile audit. * All rules live inside a max-width media query, so DESKTOP IS UNTOUCHED. * * Bug 1: on /collections/* the facet drawer () ships with a * baked-in `open` attribute and the theme's toggle JS is dead in the * clone, so it covers the whole screen and hides the products. We hide * the drawer by default (higher specificity + !important beats * `.drawer[open]`) and reveal it only when mobile-fixes.js adds * `.mph-facets-open` on tap. * * Bug 2: floating third-party widgets overlap purchase elements on mobile — * the Axeptio button (#axeptio_main_button, bottom-left) over the * register consent checkbox, and the chat/messaging launcher * (iframe#launcher, bottom-right) over the "AJOUTER AU PANIER" bar. * Hidden on mobile only; still present on desktop. * * Bug 3 (P0): whole homepage/footer sections render as blank coloured blocks * on DESKTOP AND MOBILE. The static clone ships * and ~90 sections carry * data-cc-animate; animate-on-scroll.css hides them with `opacity:0` * until animate-on-scroll.js adds `.cc-animate-in` on scroll. In this * static clone the reveal never resolves to opacity:1 (elements end up * with `.cc-animate-in` yet still opacity:0), so reviews, "+2000 * professionnels", team, Instagram, newsletter and footer stay blank on * every viewport. This is a JS-INDEPENDENT backstop applied GLOBALLY * (outside any media query): content is always visible even if * mobile-fixes.js / animate-on-scroll.js fail to load. (mobile-fixes.js * also disables AOS the theme's sanctioned way by removing * `cc-animate-enabled` on all viewports.) Trade-off accepted per * directive: graceful visibility over the fade-in animation. */ @media (max-width: 989px) { /* ---- Bug 1: collection filter drawer closed by default ---- */ #facet-filters.facets.drawer { visibility: hidden !important; transform: translate3d(0, 100%, 0) !important; transition: transform .35s cubic-bezier(.19, 1, .22, 1), visibility .35s; } #facet-filters.facets.drawer.mph-facets-open { visibility: visible !important; transform: translateZ(0) !important; } /* ---- Bug 2: keep floating widgets from covering purchase elements ---- */ #axeptio_main_button { display: none !important; } /* Axeptio button (bottom-left) */ iframe#launcher { display: none !important; } /* chat/messaging launcher (bottom-right) */ } /* ---- Bug 3: never let scroll-reveal hide content (GLOBAL — desktop + mobile) ---- */ /* Deliberately OUTSIDE any media query so it applies on every viewport. */ .cc-animate-enabled [data-cc-animate], [data-cc-animate], [data-cc-animate].cc-animate-init, [data-cc-animate].cc-animate-in, .cc-animate-enabled .fade-in { opacity: 1 !important; visibility: visible !important; animation: none !important; transform: none !important; } /* ---- Bug 4: hide non-working collection filter + sort UI (GLOBAL) ---- */ /* The cloned theme's facet/sort JavaScript is absent, so on the static * /collections/* pages these controls filter/re-order nothing (verified: * ?sort_by= leaves product order unchanged; no facet apply occurs). Per the * decision to remove broken UI rather than rebuild it, hide the filter * sidebar/drawer (: checkboxes, price slider, in-drawer sort), * its toggle button, and the desktop sort dropdown — on every viewport. The * product grid and product cards are NOT touched. These selectors exist only on * collection pages, so other pages are unaffected. (Supersedes the Bug 1 * mobile facet-drawer toggle above, which is now moot.) */ #facet-filters, .facets.drawer, #products-toolbar, .products-toolbar { display: none !important; }