/* ============================================================ MPS TISSUES — MOBILE FIXES & PATCH Add this AFTER your main style.css link in the : Fixes: 1. Logo visible on all screen sizes 2. Cart icon visible on mobile 3. WhatsApp float button not covered by sticky WA bar (desktop & mobile) 4. General mobile polish ============================================================ */ /* ============================================================ FIX 1 — LOGO: always visible, never clipped ============================================================ */ .logo { display: flex !important; align-items: center; flex-shrink: 0; min-width: 0; z-index: 10; } .logo-mark, .logo-word { white-space: nowrap; overflow: visible; } /* Logo image variant (when you switch to image logo) */ .logo img { height: 38px; width: auto; max-width: 140px; object-fit: contain; display: block; } /* ============================================================ FIX 2 — CART ICON: always visible on mobile ============================================================ */ .cart-icon { display: flex !important; align-items: center; justify-content: center; position: relative; flex-shrink: 0; min-width: 36px; } .cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; display: flex !important; align-items: center; justify-content: center; pointer-events: none; } /* ============================================================ FIX 3 — NAVBAR: proper layout so logo + cart never disappear ============================================================ */ .navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; flex-wrap: nowrap; /* prevent wrapping that hides elements */ } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; } /* Hide WA nav button text on small screens, keep icon */ @media (max-width: 860px) { .wa-nav-btn { padding: 0.5rem 0.7rem; font-size: 0; /* hides text */ gap: 0; } .wa-nav-btn i { font-size: 1.2rem; margin: 0; } } /* On very small screens hide the WA nav button entirely — the sticky bar and float button cover this */ @media (max-width: 480px) { .wa-nav-btn { display: none !important; } } /* ============================================================ FIX 4 — WHATSAPP FLOAT BUTTON: never covered by sticky bar Desktop: stays bottom-right, well above any overlapping element Mobile: lifts above the sticky WA bar (60px bar + gap) ============================================================ */ /* Desktop — lift slightly so it doesn't overlap the sticky bar text */ .whatsapp-float { bottom: 28px; right: 28px; z-index: 95; /* above sticky bar (z:90) but below cart modal (z:1000) */ } /* Mobile — sticky WA bar is ~56px tall, lift float button above it */ @media (max-width: 768px) { .whatsapp-float { bottom: 76px !important; /* 56px bar + 20px gap */ right: 16px !important; width: 52px; height: 52px; font-size: 1.7rem; z-index: 95; } /* Tooltip doesn't make sense on mobile — hide it */ .wa-tooltip { display: none !important; } } /* ============================================================ FIX 5 — STICKY WA BAR: sits at very bottom, correct z-index ============================================================ */ .sticky-wa-bar { z-index: 90; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem; } .sticky-wa-link { font-size: 0.88rem; gap: 0.5rem; } /* ============================================================ FIX 6 — BODY PADDING: account for sticky bar on mobile ============================================================ */ @media (max-width: 768px) { body { padding-bottom: 60px !important; /* matches sticky bar height */ } } /* ============================================================ FIX 7 — GENERAL MOBILE POLISH ============================================================ */ /* Prevent horizontal scroll on all viewports */ html, body { overflow-x: hidden; max-width: 100vw; } /* Hero section — better mobile spacing */ @media (max-width: 768px) { .hero { padding: 3rem 0 2rem; } .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.2; } .hero-sub { font-size: 0.95rem; } .hero-trust-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; } .trust-pill { font-size: 0.72rem; padding: 0.3rem 0.7rem; } } /* Product cards — full width on small mobile */ @media (max-width: 480px) { .products-container { grid-template-columns: 1fr; gap: 1.2rem; padding: 0 0.25rem; } .product-card { border-radius: 16px; } } /* Savings table — scrollable on mobile */ @media (max-width: 600px) { .savings-table-wrap { padding: 1.5rem 1rem; overflow-x: auto; } .savings-table { min-width: 500px; /* forces scroll rather than crushing columns */ } } /* Bulk section text padding on mobile */ @media (max-width: 768px) { .bulk-text { padding: 2rem 1.25rem; } .bulk-cta-group { flex-direction: column; gap: 0.7rem; } .bulk-cta-group .btn-wa, .bulk-cta-group .btn-call { width: 100%; justify-content: center; text-align: center; } } /* Footer — single column on small screens */ @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* Cart modal — full screen on mobile */ @media (max-width: 540px) { .cart-modal { padding: 0; align-items: flex-end; } .cart-content { border-radius: 20px 20px 0 0; max-height: 88vh; width: 100%; padding: 1.5rem 1.25rem; } } /* Why/supply/testimonial grids — single column on small mobile */ @media (max-width: 480px) { .why-grid, .supply-grid, .testimonials-grid, .trust-grid { grid-template-columns: 1fr; } } /* FAQ — better touch targets */ @media (max-width: 768px) { .faq-q { padding: 1rem 1.1rem; font-size: 0.9rem; } } /* Proof bar — wrap cleanly on mobile */ @media (max-width: 480px) { .proof-bar-inner { flex-direction: column; gap: 0.5rem; text-align: center; } .proof-divider { display: none; } } /* Top banner — compact on mobile */ @media (max-width: 480px) { .top-banner { font-size: 0.7rem; padding: 0.5rem 2.5rem; line-height: 1.5; } } /* Buttons — full width stacked on mobile */ @media (max-width: 480px) { .btn-group { flex-direction: column; width: 100%; } .btn-group .btn-primary, .btn-group .btn-wa { width: 100%; justify-content: center; } } /* ============================================================ FIX 8 — LOGO IMAGE PLACEHOLDER SLOT When you add your logo image, it will display correctly at all sizes. Update logoConfig.showLogo = true in script.js ============================================================ */ .logo-img-placeholder { display: flex; align-items: center; justify-content: center; height: 38px; width: 120px; background: rgba(212, 175, 55, 0.1); border: 2px dashed var(--gold); border-radius: 8px; font-size: 0.65rem; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } @media (max-width: 768px) { .logo-img-placeholder { width: 90px; height: 32px; font-size: 0.55rem; } }