/** * 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); } } /* ── One scrollbar per page ─────────────────────────────────────────────── html and body must NOT be scroll containers — the viewport already is. overflow-x: clip clips horizontal overflow WITHOUT creating a scroll box, so the classic double-scrollbar bug (window bar + a body bar painted just inside it, seen on cart.html and back-to-school.html) cannot happen. Note: overflow-y: visible only computes to the default value when the other axis is also visible-or-clip, which overflow-x: clip satisfies. This block is superseded on every page by assets/css/scroll-guard.css, which is injected as the LAST stylesheet in — kept here only for pages served without the guard link. */ html { overflow-x: clip; overflow-y: visible; } body { overflow-x: clip; overflow-y: visible; min-height: 100vh; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; overflow-y: visible; } } /* 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 *//* ── SHOP taxonomy nav (config/shop-taxonomy.js) ───────────────────────────┐ The megamenu is rendered from the taxonomy, so the third level of the SEO hierarchy (Printers → HP Printers / Epson Printers) and the "extra" nodes kept after the brief's list are marked with classes instead of hand-tuned padding. mc-sub = a child of the subcategory above it. */ .menu .megamenu .submenu li.mc-sub a, .mobile-menu li.mc-sub > a, .mobile-menu li.mc-sub2 > a { padding-left: 16px; position: relative; } .menu .megamenu .submenu li.mc-sub a::before, .mobile-menu li.mc-sub > a::before, .mobile-menu li.mc-sub2 > a::before { content: "–"; position: absolute; left: 4px; opacity: 0.45; } .mobile-menu li.mc-sub2 > a { padding-left: 30px; font-size: 1.25rem; } .mobile-menu li.mc-sub2 > a::before { left: 18px; } /* Nodes the brief did not list (Televisions, Blenders, …) stay available but read as secondary: full colour, lower weight. */ .menu .megamenu .submenu li.mc-extra a { color: rgba(0, 0, 0, 0.62); } /* Print section */ @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; } }