/** * Performance optimizations CSS * Includes critical CSS and optimizations */ /* Font Display Optimization */ @font-face { font-family: 'FontAwesome'; font-display: swap; } /* Reduce Motion for Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Explicitly target heavy sections */ .home-slider, .hero, .banner, .owl-carousel *, .product-default, .header { animation: none !important; transition: none !important; transform: none !important; } } /* Image Optimization */ img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* Will-change for animations */ .product-default, .cart-toast { will-change: transform; } /* Contain layout for performance */ .product-default { contain: layout style paint; } /* GPU acceleration for transforms */ .product-default:hover, .btn-add-cart:active { transform: translateZ(0); backface-visibility: hidden; } /* Optimize scrolling */ .dropdown-menu, .custom-scrollbar { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } /* ── Megamenu scroll + visible scrollbar (every browser/OS) ──────────────── The category megamenu is taller than a short laptop viewport, and every OS draws scrollbars differently: Windows shows them, macOS overlays them and hides them until you scroll, some Linux/Chromium setups don't draw one at all. That is why the panel scrolled on one PC and looked "stuck" (or ran off the bottom of the screen) on another. So instead of relying on `auto` + the platform default we (a) cap the panel to the viewport using dvh where supported, (b) reserve the track with scrollbar-gutter and always paint one with `overflow-y: scroll`, and (c) style the thumb/track ourselves so it is visible on every device. */ .menu .megamenu { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; /* Firefox: thin track */ scrollbar-color: #c8102e #f1f1f1; /* Firefox: thumb / track */ } .menu .megamenu::-webkit-scrollbar { width: 10px; height: 10px; } .menu .megamenu::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; } .menu .megamenu::-webkit-scrollbar-thumb { background: #c8102e; border: 2px solid #f1f1f1; border-radius: 8px; } .menu .megamenu::-webkit-scrollbar-thumb:hover { background: #a00d24; } /* Short viewports (laptops at 125–150% zoom, small windows, landscape phones): leave more room so the panel never runs off the bottom of the screen. */ @media (max-height: 820px) { .menu .megamenu { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); } } /* ── Prevent double scrollbar ── Only the element should have the primary vertical scrollbar. Setting overflow-y:visible on body prevents a nested second scrollbar that can be triggered by 100vh widgets, Elfsight iframes, or CSS that inadvertently creates a BFC with its own overflow. */ html { overflow-y: auto; overflow-x: hidden; } body { overflow-y: visible; min-height: 100vh; } /* Constrain Elfsight chatbot/app widgets to prevent iframe overflow causing nested scrollbars. Uses a generic attribute selector so the fix survives app-ID changes. */ [class*="elfsight-app"] { overflow: hidden !important; max-height: 100vh; } /* Print styles */ @media print { .header, .footer, .cart-dropdown, .mobile-menu-container, .newsletter-popup { display: none !important; } } /* ────────────────────────────────────────────────────────────────── * Sticky-header spacing fixes (Phase 6 — index page scrolled view) * ────────────────────────────────────────────────────────────────── * When .sticky-header.header-middle.fixed activates (after the user * scrolls past the top on desktop, height collapses to 60px and the * inner spacing collapses with it). Restore breathable padding and * add gap between the right-side icons so login / wishlist / cart * no longer appear glued together. */ .sticky-header.header-middle.fixed { height: 64px !important; padding-top: 8px !important; padding-bottom: 8px !important; display: flex; align-items: center; } .sticky-header.header-middle.fixed > .container { align-items: center; } .sticky-header.header-middle.fixed .header-right { display: flex; align-items: center; gap: 14px; } .sticky-header.header-middle.fixed .header-right .header-icon { margin-left: 0; margin-right: 0; } .sticky-header.header-middle.fixed .header-search-inline .header-search-wrapper { margin-bottom: 0; padding: 4px 0; } .sticky-header.header-middle.fixed .sticky-logo { max-width: 100px; height: auto; } /* ────────────────────────────────────────────────────────────────── * Footer contact-row responsive overflow fixes * ────────────────────────────────────────────────────────────────── * The footer wraps .contact-widget blocks in col-md-4 (33% each) at * md+. Width gets tight on the 992-991px boundary and the long * Cloudflare-obfuscated email / "+233 (0) 53 100 5871" phone can blow * out the column. These overrides let widgets shrink safely and * switch the contact row to a 2-up layout from 768-991px to give * the email/follow widgets breathing room. */ .contact-widget { min-width: 0; /* allow flex children to actually shrink in Bootstrap row */ } .contact-widget.email a { overflow-wrap: anywhere; display: inline-block; max-width: 100%; } .contact-widget .social-icons { flex-wrap: wrap; gap: 4px; } .contact-widget .social-icons a { margin-right: 4px; } /* ──── Footer contact responsive overrides At 992–1199px the outer col-lg-6 is still 50% of the viewport, which leaves only ~16% of viewport per col-md-4 — not enough for the phone number / cf-email to fit on one line. Switch to a 2-up layout there as well so widgets have room to wrap cleanly. */ @media (min-width: 768px) and (max-width: 1199px) { .footer-middle .col-lg-6 > .row.no-gutters > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-right: 12px; padding-left: 12px; } /* Push the 3rd (Follow us) widget to a full row below the 1st two. */ .footer-middle .col-lg-6 > .row.no-gutters > [class*="col-"]:nth-child(3) { flex: 0 0 100%; max-width: 100%; margin-top: 0.5rem; } } @media (max-width: 767px) { /* Below md: stack contacts vertically and give each its own line */ .footer-middle .col-lg-6 > .row.no-gutters > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: 1rem; } }