/* ========================================================= AUZZIE WHOLESALE MOBILE / TABLET ONLY DESKTOP VIEW IS NOT AFFECTED ========================================================= */ @media (max-width: 991.98px) { /* ===================================================== CRITICAL FIX Existing desktop CSS makes .is-home .site-header flex. On mobile the header must stack: ROW 1 = Logo | Search | Menu ROW 2 = Dropdown menu ===================================================== */ .site-header, .is-home .site-header { display: block !important; width: 100% !important; background: #ffffff !important; position: relative !important; border-bottom: 1px solid rgba(1, 20, 37, 0.08); box-shadow: 0 6px 18px rgba(1, 20, 37, 0.06); } /* ===================================================== TOP MOBILE HEADER ROW LOGO | SEARCH | HAMBURGER ===================================================== */ .site-header > .container, .is-home .site-header > .container { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; min-height: 72px; padding-top: 9px !important; padding-bottom: 9px !important; gap: 9px !important; } /* ===================================================== LOGO ===================================================== */ .site-header .brand { position: relative !important; width: 125px !important; height: 54px !important; flex: 0 0 125px !important; margin: 0 !important; } .site-header .site-logo--main { position: absolute !important; left: 0 !important; top: 50% !important; width: auto !important; height: 78px !important; max-width: 125px !important; transform: translateY(-50%) !important; object-fit: contain !important; filter: brightness(1.2) contrast(1.15) saturate(1.15); } /* ===================================================== HIDE DESKTOP NAVIGATION ===================================================== */ .site-header > .container > nav { display: none !important; } /* ===================================================== HEADER ACTIONS KEEP SEARCH HIDE CART ===================================================== */ .site-header .header-actions { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; margin-left: 0 !important; gap: 0 !important; } /* Hide cart on mobile */ .site-header .header-actions .cart-link { display: none !important; } /* ===================================================== MOBILE SEARCH BAR ===================================================== */ .site-header .header-actions .searchbar, .is-home .site-header .header-actions .searchbar { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 44px !important; border-radius: 14px !important; background: #f7f7f5 !important; border: 1px solid rgba(1, 20, 37, 0.11) !important; box-shadow: 0 4px 12px rgba(1, 20, 37, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; overflow: hidden !important; transform: none !important; animation: none !important; } /* Remove desktop hover effects */ .is-home .site-header .header-actions .searchbar:hover, .is-home .site-header .header-actions .searchbar:focus-within { transform: none !important; animation: none !important; background: #f7f7f5 !important; border-color: rgba(1, 20, 37, 0.16) !important; box-shadow: 0 4px 12px rgba(1, 20, 37, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } .site-header .searchbar::before { display: none !important; } /* Search input */ .site-header .header-actions .searchbar input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 100% !important; padding: 0 8px 0 13px !important; border: 0 !important; outline: 0 !important; background: transparent !important; color: #011425 !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; } .site-header .header-actions .searchbar input::placeholder { color: rgba(1, 20, 37, 0.44) !important; } /* Search button */ .site-header .header-actions .searchbar button { width: 42px !important; height: 44px !important; flex: 0 0 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; color: #011425 !important; } .site-header .header-actions .searchbar button i { font-size: 17px !important; } /* ===================================================== HAMBURGER BUTTON ===================================================== */ .site-header .iconbtn, .is-home .site-header .iconbtn { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; padding: 0 !important; margin: 0 !important; border-radius: 14px !important; background: #ffffff !important; border: 1px solid rgba(1, 20, 37, 0.12) !important; color: #011425 !important; box-shadow: 0 5px 14px rgba(1, 20, 37, 0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important; transform: none !important; animation: none !important; } .site-header .iconbtn i { color: #011425 !important; font-size: 23px !important; line-height: 1 !important; } /* ===================================================== MOBILE DROPDOWN IMPORTANT: This is now a NORMAL BLOCK BELOW THE HEADER ROW. ===================================================== */ .site-header .mobile-menu-panel, .is-home .site-header .mobile-menu-panel { position: static !important; float: none !important; clear: both !important; display: none; width: 100% !important; max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border-top: 1px solid rgba(1, 20, 37, 0.08) !important; box-shadow: 0 12px 26px rgba(1, 20, 37, 0.07) !important; overflow: hidden !important; } /* Bootstrap shows menu */ .site-header .mobile-menu-panel.show, .is-home .site-header .mobile-menu-panel.show { display: block !important; } /* While Bootstrap is opening / closing */ .site-header .mobile-menu-panel.collapsing, .is-home .site-header .mobile-menu-panel.collapsing { display: block !important; width: 100% !important; } /* ===================================================== DROPDOWN INNER CONTAINER ===================================================== */ .site-header .mobile-menu-panel > .container { display: block !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; padding: 10px 12px 14px !important; margin: 0 auto !important; } .site-header .mobile-menu-inner { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Duplicate search inside dropdown not needed */ .site-header .mobile-menu-search { display: none !important; } /* ===================================================== MOBILE MENU LINKS ===================================================== */ .site-header .mobile-menu-links { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== FULL WIDTH HORIZONTAL BARS ===================================================== */ .site-header .mobile-menu-links a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: 48px !important; padding: 11px 16px !important; margin: 0 !important; border-radius: 12px !important; background: #f7f7f5 !important; border: 1px solid rgba(1, 20, 37, 0.08) !important; color: #011425 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: 0 3px 10px rgba(1, 20, 37, 0.03) !important; transform: none !important; animation: none !important; } /* Active page */ .site-header .mobile-menu-links a.is-active { background: rgba(245, 130, 32, 0.10) !important; border-color: rgba(245, 130, 32, 0.25) !important; box-shadow: inset 4px 0 0 #f58220, 0 3px 10px rgba(1, 20, 37, 0.03) !important; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 575.98px) { /* Header row */ .site-header > .container, .is-home .site-header > .container { min-height: 66px !important; padding-left: 12px !important; padding-right: 12px !important; gap: 7px !important; } /* Logo */ .site-header .brand { width: 105px !important; height: 50px !important; flex-basis: 105px !important; } .site-header .site-logo--main { height: 70px !important; max-width: 105px !important; } /* Search */ .site-header .header-actions .searchbar, .is-home .site-header .header-actions .searchbar { height: 42px !important; border-radius: 12px !important; } .site-header .header-actions .searchbar input { padding-left: 10px !important; font-size: 13px !important; } .site-header .header-actions .searchbar button { width: 38px !important; height: 42px !important; flex-basis: 38px !important; } /* Hamburger */ .site-header .iconbtn, .is-home .site-header .iconbtn { width: 42px !important; height: 42px !important; min-width: 42px !important; flex-basis: 42px !important; border-radius: 12px !important; } .site-header .iconbtn i { font-size: 22px !important; } /* Dropdown */ .site-header .mobile-menu-panel > .container { padding: 9px 10px 12px !important; } .site-header .mobile-menu-links { gap: 7px !important; } .site-header .mobile-menu-links a { min-height: 46px !important; padding: 10px 12px !important; border-radius: 11px !important; font-size: 14px !important; } } /* ========================================================= HOMEPAGE MOBILE OPTIMISATION HERO + WHOLESALE FEATURES MOBILE ONLY ========================================================= */ @media (max-width: 575.98px) { /* ===================================================== HERO SECTION ===================================================== */ .hero-section, .home-hero { padding-top: 28px !important; padding-bottom: 34px !important; } /* Trusted supplier badge */ .hero-badge, .hero-trust-badge { width: fit-content !important; max-width: 100% !important; padding: 10px 14px !important; margin-bottom: 18px !important; font-size: 13px !important; border-radius: 999px !important; } /* Cities line */ .hero-eyebrow, .hero-locations { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 8px !important; } /* Main hero heading */ .hero-title, .home-hero h1 { font-size: clamp(2.25rem, 10vw, 3.15rem) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; margin-bottom: 18px !important; } /* Hero paragraph */ .hero-text, .hero-copy, .home-hero p { font-size: 16px !important; line-height: 1.65 !important; margin-bottom: 22px !important; } /* Hero buttons */ .hero-actions, .home-hero .home-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; margin-top: 18px !important; } .hero-actions a, .hero-actions button, .home-hero .home-actions a, .home-hero .home-actions button { width: 100% !important; min-height: 48px !important; padding: 12px 12px !important; font-size: 14px !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ===================================================== HERO SLIDER ===================================================== */ .hero-slider { height: 290px !important; margin-top: 26px !important; border-radius: 22px !important; } .hero-slide { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; } .hero-slider-btn { width: 38px !important; height: 38px !important; font-size: 20px !important; } .hero-prev { left: 10px !important; } .hero-next { right: 10px !important; } .hero-dots { bottom: 10px !important; gap: 7px !important; padding: 7px 10px !important; } /* ===================================================== WHOLESALE FEATURES SECTION ===================================================== */ .features-glass { padding-top: 42px !important; padding-bottom: 46px !important; } .features-glass .section-head { margin-bottom: 18px !important; padding-left: 8px !important; padding-right: 8px !important; } .features-glass .home-section-title { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; margin-bottom: 10px !important; } .features-glass .home-section-sub { font-size: 15px !important; line-height: 1.5 !important; margin-top: 8px !important; } /* Big outside glass panel */ .features-glass-panel { padding: 14px !important; border-radius: 22px !important; } /* Feature grid */ .features-glass-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 0 !important; } /* Individual feature cards */ .glass-card { min-height: 0 !important; padding: 16px !important; border-radius: 18px !important; display: grid !important; grid-template-columns: 54px 1fr !important; align-items: center !important; column-gap: 14px !important; row-gap: 4px !important; } /* Orange side accent */ .glass-card::after { top: 16px !important; width: 4px !important; height: 42px !important; } /* Icon */ .glass-icon { width: 50px !important; height: 50px !important; margin: 0 !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; } .glass-icon img { width: 24px !important; height: 24px !important; } /* Feature title */ .glass-title { grid-column: 2 !important; margin: 0 !important; font-size: 17px !important; line-height: 1.25 !important; } /* Feature description if present */ .glass-text { grid-column: 2 !important; margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; } } /* ========================================================= OUR PRODUCTS / CATEGORIES MOBILE VERSION ONLY ========================================================= */ @media (max-width: 575.98px) { /* ===================================================== MAIN PRODUCTS SECTION ===================================================== */ .categories-section { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 42px 12px 48px !important; overflow: hidden !important; } /* ===================================================== LARGE GLASS PANEL ===================================================== */ .categories-glass-panel { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 26px 12px 30px !important; border-radius: 24px !important; } /* ===================================================== SECTION HEADING ===================================================== */ .categories-head { width: 100% !important; max-width: 100% !important; margin: 0 auto 24px !important; padding: 0 6px 14px !important; text-align: center !important; } /* Built for Real Business Needs */ .categories-kicker { margin-bottom: 10px !important; font-size: 12px !important; line-height: 1.4 !important; text-align: center !important; } /* Our Products glass title */ .categories-title-glass { display: inline-block !important; width: auto !important; max-width: 100% !important; padding: 10px 18px !important; margin-bottom: 12px !important; border-radius: 16px !important; } .categories-title { font-size: 32px !important; line-height: 1.05 !important; letter-spacing: -0.5px !important; white-space: nowrap !important; } /* Description */ .categories-sub { max-width: 330px !important; margin: 0 auto !important; font-size: 14px !important; line-height: 1.55 !important; text-align: center !important; } /* Decorative line */ .categories-head::after { width: 84px !important; height: 2px !important; margin-top: 14px !important; } /* ===================================================== CATEGORY GRID TWO CARDS PER ROW ON MOBILE ===================================================== */ .categories-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; margin-top: 20px !important; align-items: stretch !important; } /* ===================================================== CATEGORY CARD ===================================================== */ .category-card { width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; border-radius: 18px !important; overflow: visible !important; transform: none !important; } /* Disable desktop lift effect on phones */ .category-card:hover { transform: none !important; } /* ===================================================== CATEGORY IMAGE ===================================================== */ .category-media { width: 100% !important; position: relative !important; } .category-image { width: 100% !important; height: 145px !important; border-radius: 18px 18px 0 0 !important; overflow: hidden !important; } .category-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: none !important; } .category-card:hover .category-image img { transform: none !important; } /* ===================================================== CATEGORY ICON ===================================================== */ .category-icon { width: 48px !important; height: 48px !important; left: 50% !important; bottom: -24px !important; transform: translateX(-50%) !important; } .category-icon svg { width: 20px !important; height: 20px !important; } /* ===================================================== CATEGORY FOOTER ===================================================== */ .category-footer { flex: 1 1 auto !important; min-height: 145px !important; padding: 34px 10px 14px !important; border-radius: 0 0 18px 18px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; text-align: center !important; } .category-meta { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; flex: 1 !important; } /* ===================================================== CATEGORY NAME ===================================================== */ .category-name { width: 100% !important; min-height: 48px !important; margin-top: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: -0.15px !important; text-align: center !important; overflow-wrap: anywhere !important; } /* ===================================================== EXPLORE RANGE ===================================================== */ .category-cta { margin-top: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } .category-cta .arrow { font-size: 15px !important; } } /* ========================================================= BUSINESS SOLUTIONS + TRUST + FINAL CTA SMALL MOBILE ONLY DESKTOP IS NOT AFFECTED ========================================================= */ @media (max-width: 575.98px) { /* ===================================================== 1. BUSINESS-GRADE PACKAGING ===================================================== */ .home-solutions { padding: 42px 0 46px !important; overflow: hidden !important; } /* Heading area */ .home-solutions .section-head { width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; margin-bottom: 22px !important; text-align: center !important; } .home-solutions .section-eyebrow, .home-solutions .eyebrow { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 9px !important; } .home-solutions .home-section-title, .home-solutions h2 { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -0.5px !important; margin-bottom: 10px !important; } .home-solutions .home-section-sub, .home-solutions .section-head p { max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px !important; line-height: 1.5 !important; } /* ===================================================== BUSINESS SOLUTIONS GLASS PANEL ===================================================== */ .home-solutions .features-glass-panel, .home-solutions .solutions-panel { width: calc(100% - 24px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: 20px 14px 22px !important; border-radius: 22px !important; overflow: hidden !important; } /* ===================================================== BUSINESS CIRCLES 2 PER ROW INSTEAD OF SIDEWAYS SCROLL ===================================================== */ .home-solutions .rings { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-items: center !important; align-items: start !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } .home-solutions .ring { width: 100% !important; max-width: 145px !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 auto !important; padding: 16px 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; transform: none !important; } .home-solutions .ring:hover { transform: none !important; } /* Business icon */ .home-solutions .ring-icon { width: 44px !important; height: 44px !important; border-radius: 13px !important; margin: 0 auto 10px !important; } .home-solutions .ring-icon svg, .home-solutions .ring-icon img { width: 21px !important; height: 21px !important; } /* Restaurants / Takeaway / Catering etc */ .home-solutions .ring-text { width: 100% !important; font-size: 14px !important; line-height: 1.2 !important; text-align: center !important; overflow-wrap: anywhere !important; } /* Text underneath circles */ .home-solutions .solutions-text { max-width: 100% !important; margin: 20px auto 0 !important; padding: 0 4px !important; font-size: 14px !important; line-height: 1.65 !important; text-align: center !important; } .home-solutions .solutions-text p { margin-bottom: 8px !important; } /* ===================================================== 2. WHY BUSINESSES TRUST AUZZIE WHOLESALE ===================================================== */ .trust-section.trust-blue, .trust-blue { padding-top: 44px !important; padding-bottom: 48px !important; } /* Heading */ .trust-blue .section-head { padding-left: 14px !important; padding-right: 14px !important; margin-bottom: 22px !important; text-align: center !important; } .trust-blue .section-eyebrow, .trust-blue .eyebrow { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 10px !important; } .trust-blue .home-section-title, .trust-blue h2 { font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -0.5px !important; margin-bottom: 12px !important; text-align: center !important; } .trust-blue .home-section-sub, .trust-blue .section-head p { max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; font-size: 14px !important; line-height: 1.55 !important; text-align: center !important; } /* Grid */ .trust-blue .why-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px !important; } /* Compact cards */ .trust-blue .why-card { min-height: 0 !important; padding: 16px !important; border-radius: 20px !important; display: grid !important; grid-template-columns: 50px minmax(0, 1fr) !important; column-gap: 13px !important; row-gap: 5px !important; align-items: center !important; transform: none !important; } .trust-blue .why-card:hover { transform: none !important; } /* Icon */ .trust-blue .why-icon { width: 48px !important; height: 48px !important; margin: 0 !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; } .trust-blue .why-icon svg { width: 23px !important; height: 23px !important; } /* Card title */ .trust-blue .why-title, .trust-blue .why-card h3 { grid-column: 2 !important; margin: 0 !important; font-size: 16px !important; line-height: 1.25 !important; } /* Card description */ .trust-blue .why-text, .trust-blue .why-card p { grid-column: 2 !important; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.82) !important; } /* ===================================================== 3. FINAL CTA PARTNER WITH AUZZIE WHOLESALE TODAY ===================================================== */ .home-cta { padding: 34px 12px 42px !important; } .home-cta .container { padding-left: 0 !important; padding-right: 0 !important; } .cta-box { width: 100% !important; min-height: 0 !important; padding: 26px 20px !important; border-radius: 22px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 18px !important; } /* Slightly stronger overlay for readability */ .cta-box::after { background: radial-gradient( 600px 300px at 15% 20%, rgba(255,255,255,0.48), transparent 65% ), linear-gradient( 180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.46) ) !important; } /* CTA heading */ .cta-title { max-width: 100% !important; margin: 0 0 10px !important; font-size: 30px !important; line-height: 1.06 !important; letter-spacing: -0.6px !important; } /* CTA text */ .cta-text { max-width: 100% !important; margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; } /* Buttons */ .cta-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; justify-content: stretch !important; margin-top: 2px !important; } .cta-actions > a, .cta-actions > button { width: 100% !important; min-width: 0 !important; min-height: 48px !important; padding: 11px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* ========================================================= FINAL CTA BACKGROUND FIX MOBILE ONLY HIDE SHUTTERSTOCK TEXT AT BOTTOM ========================================================= */ @media (max-width: 575.98px) { .cta-box::before { background-position: center 42% !important; background-size: cover !important; transform: scale(1.18) !important; } }