/** * 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 fix — prevents dropdown from extending below viewport */ .menu .megamenu { max-height: calc(100vh - 80px); overflow-y: auto; } /* ── 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; } }