/* ========================================================================== NKS Wine — Mobile Fixes -------------------------------------------------------------------------- Forces 2-column product grid on mobile, compacts the header so the burger never overflows, centers the footer columns. Loaded AFTER components-fix.css so its rules win without !important wars. Critical hamburger / body.menu-open rules live INLINE in base.html.twig so the CDN cache cannot strand them. ========================================================================== */ /* =========================================================== PHASE 2 — Product grid: 2 columns on mobile, anti-overflow =========================================================== */ @media (max-width: 767px) { /* Body / html guards */ html, body { max-width: 100%; overflow-x: hidden; } .container { padding-inline: 0.75rem; max-width: 100%; } /* Force 2-column grid on every product list */ .product-grid, .recently-viewed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.625rem !important; } /* Catalog page has nested wrappers — kill min-content overflow on every ancestor */ .catalog-layout, .catalog-main, .catalog-sidebar, .product-grid, .recently-viewed__grid { min-width: 0; max-width: 100%; } /* Each card and ALL descendants stop pushing wider than their cell */ .product-card, .product-card * { min-width: 0; max-width: 100%; word-break: break-word; overflow-wrap: break-word; } .product-card { width: 100%; } /* Tighter padding inside cards on small screens */ .product-card__info { padding: 0.625rem 0.75rem 0.5rem; } .product-card__title { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; /* Cap title to 2 lines so the cards keep equal heights */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__category { font-size: 0.7rem; margin-bottom: 0.2rem; } .product-card__current-price { font-size: 1rem; } .product-card__compare-price { font-size: 0.75rem; } .product-card__actions { padding: 0 0.625rem 0.625rem; } .product-card__actions .btn { padding: 0.5rem 0.5rem; font-size: 0.75rem; } /* Hide the hover-only quickview on touch screens — confusing UI */ .product-card__quickview, .product-card__compare { display: none !important; } } @media (max-width: 380px) { .product-grid, .recently-viewed__grid { gap: 0.5rem !important; } .container { padding-inline: 0.625rem; } } /* =========================================================== PHASE 3 — Header mobile: keep the burger flush right =========================================================== */ @media (max-width: 767px) { /* Logo — smaller than the existing 44/150 fix */ .site-header__logo img { height: 44px !important; max-width: 130px !important; width: auto !important; } /* Inner row: tighter gap so 5 items + burger fit on 360px */ .site-header__inner { gap: 0.5rem !important; height: auto !important; min-height: 56px; padding-block: 0.5rem; } /* Hide the search-toggle button on mobile — search is reachable via the bottom nav bar and the burger menu */ .site-header__actions > button[aria-label="Rechercher"] { display: none !important; } /* Compact every icon button */ .site-header__actions .btn-icon { width: 40px; height: 40px; padding: 0 !important; flex-shrink: 0; } /* "Connexion" button stays hidden on mobile (already done by components-fix.css); reaffirm here for anyone bypassing that file */ .site-header__actions .btn--sm { display: none !important; } /* Burger ALWAYS visible, glued to the right edge */ .site-header__burger { flex-shrink: 0 !important; margin-left: auto !important; width: 40px !important; height: 40px !important; } /* Container padding on header is the same as the global container, but make sure the header itself doesn't overflow horizontally */ .site-header, .site-header__inner { max-width: 100%; } } /* =========================================================== PHASE 5 — Footer mobile: center every column =========================================================== */ @media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr !important; text-align: center; justify-items: center; gap: 1.75rem; } .site-footer__grid > div { width: 100%; max-width: 360px; } .site-footer__heading { text-align: center; position: relative; } .site-footer__heading::after { left: 50% !important; transform: translateX(-50%); } .site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .site-footer address, .site-footer__tagline { text-align: center; } .site-footer .social-links, .site-footer .social-links__icons { justify-content: center !important; display: flex; flex-wrap: wrap; } /* Newsletter bar: stack on mobile */ .newsletter-bar__inner { flex-direction: column !important; text-align: center; gap: 1rem; } .newsletter-bar__form { flex-direction: column; width: 100%; max-width: 360px; } .newsletter-bar__input { width: 100%; } } /* =========================================================== PHASE 7 (light) — universal polish =========================================================== */ /* Respect reduced-motion globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Hover micro-animations only on real hover devices (skip touch) */ @media (hover: none) { .product-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .product-card__media:hover img { transform: none !important; } } /* Card image aspect ratio guard — already 1/1 in SCSS, but lock it again in case Encore bundle is stale on the CDN */ .product-card__media { aspect-ratio: 1 / 1; overflow: hidden; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; }