/* ── PREVENT HORIZONTAL SCROLL (mobile only) ────────────────────────── Capping containers at 100vw is meant for narrow viewports where horizontal scroll can otherwise appear. On desktop this rule was silently overriding `max-width: var(--max)` on .nav-inner and .footer-inner (both rules share specificity and this one loaded later), making the nav stretch edge-to-edge instead of centring at --max. Scoping to mobile keeps the safety net where it's needed without breaking desktop layout. The overflow-x:hidden on html/body must ALSO be mobile-scoped — on desktop it makes a scroll container, which breaks position:sticky on the PDP image col (sticky travel collapses to the col's natural height instead of the grid row, leaving an empty left band as the longer info col scrolls past). */ @media (max-width: 1024px) { /* `clip` (not `hidden`) prevents horizontal scroll WITHOUT making body a scroll container — `hidden` forces overflow-y to compute to `auto`, which breaks position:sticky (e.g. the .filter-bar) on mobile. */ html, body { overflow-x: clip; max-width: 100vw; } /* Common containers — never wider than viewport on tablet/mobile */ .nav-inner, .top-nav, .breadcrumb-bar, .breadcrumb-inner, .footer, .footer-inner, .hero, .hero-grid, .content-grid, .product-grid, .grid-area, .grid-in, .page-header, .page-header-in, .filter-bar, .filter-bar-in, .pagination, .announce-bar, .section, section, main, header, .container { max-width: 100vw; box-sizing: border-box; } /* Anything with absolute/fixed positioning shouldn't bleed past viewport */ body > *, .top-nav, .breadcrumb-bar { overflow-x: clip; } } /* Images never wider than container */ img, svg { max-width: 100%; height: auto; } /* Long product titles can wrap */ h1, h2, h3, h4, .product-name, .product-title { overflow-wrap: anywhere; word-break: break-word; } /* Product gallery thumbs — wrap on desktop (no scrollbar), scroll on mobile (no visible scrollbar). The per-template .thumb-row rule in single-product.php handles the layout; here we just hide any scrollbar that webkit/firefox might still draw. */ .thumb-row { max-width: 100%; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .thumb-row::-webkit-scrollbar { display: none; height: 0; } /* Pre / code blocks — wrap instead of scroll */ pre, code { white-space: pre-wrap; word-break: break-word; } /* ── ALWAYS-VISIBLE SEARCH BAR ON MOBILE ──────────────────────────────── */ /* FiboSearch on mobile defaults to a search-icon button that opens an overlay. Force it to render as a real inline input on every viewport. */ .dgwt-wcas-search-wrapp { display: flex !important; width: 100% !important; max-width: 320px !important; } .dgwt-wcas-search-form { display: flex !important; width: 100% !important; } .dgwt-wcas-search-input { display: block !important; width: 100% !important; } /* Hide the magnifier toggle (mobile overlay opener) since we always show the bar */ .dgwt-wcas-open-search { display: none !important; } /* Hide native overlay popup if it manages to fire */ .dgwt-wcas-overlay-mobile, .dgwt-wcas-search-form-overlay { display: none !important; } /* ── CONSISTENT ANNOUNCE BAR ACROSS ALL PAGES ─────────────────────────── */ /* Standardize: same height, font, padding everywhere. */ .announce-bar { background: linear-gradient(135deg, #0d4877 0%, #1a6099 100%) !important; color: #ffffff !important; text-align: center !important; font-family: var(--font-body, 'D-DIN Exp', sans-serif) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; padding: 10px 20px !important; letter-spacing: 0.01em !important; width: 100% !important; box-sizing: border-box !important; } .announce-bar strong { color: var(--teal-1, #7bd0ca) !important; font-weight: 700 !important; } /* Govee page keeps its pink/teal gradient — override our default for that page only */ body.smartio-govee-page .announce-bar { background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%) !important; } /* ── MOBILE-SPECIFIC ADJUSTMENTS ──────────────────────────────────────── */ @media (max-width: 768px) { /* Announce bar: smaller on phone but still readable */ .announce-bar { font-size: 11.5px !important; padding: 8px 14px !important; } /* Nav search visible and takes available space */ .nav-search { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; max-width: 100% !important; } .nav-search .dgwt-wcas-search-wrapp { max-width: 100% !important; } /* 16px minimum — any smaller and iOS Safari force-zooms the page onto the input when it gets focus (the "tap search → weird zoom" bug). */ .nav-search .dgwt-wcas-search-input { font-size: 16px !important; padding: 8px 14px !important; height: 40px !important; } /* Mobile wishlist: keep the heart visible — it's a real feature now, not a placeholder. .nav-icon-btn already gives it 44×44 to match the other icons in the row, so no special sizing override needed. */ /* Below 560px there isn't room for the search input alongside the logo + 4 icons in a single row. JS (smartio-header.php) relocates .nav-search OUT of .top-nav to a sibling row right below it and tags it .is-detached. That way the sticky icon row stays pinned on scroll while the search scrolls away — same pattern noon / jumia / amazon use on mobile. */ @media (max-width: 559px) { /* Detached search = normal full-width row below the sticky nav. */ .nav-search.is-detached { position: static !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 8px 12px !important; background: var(--bg-surface, #fff); border-bottom: 1px solid var(--border, #e8edf3); } .nav-search.is-detached .dgwt-wcas-search-wrapp { width: 100% !important; max-width: none !important; } /* 16px minimum here too — this is the state phones actually tap. */ .nav-search.is-detached .dgwt-wcas-search-input { font-size: 16px !important; padding: 10px 16px !important; height: 44px !important; } /* No-JS fallback: if relocation hasn't run, keep the still-inline search compact so it doesn't overflow the icon row. */ .nav-search:not(.is-detached) { min-width: 0; flex: 1 1 auto; } } html.theme-dark .nav-search.is-detached { background: var(--bg-surface); border-bottom-color: var(--border); } /* Below 380px tighten the icon gap + box uniformly across ALL icons (theme toggle, wishlist, account, cart) so they stay visually consistent. */ @media (max-width: 379px) { .nav-right { gap: 2px !important; } .nav-icon-btn { width: 38px !important; height: 38px !important; } } /* Nav inner — roomier mobile bar (+18% vs old 56px). */ .nav-inner { gap: 8px !important; padding: 0 12px !important; height: 66px !important; } /* Logo scaled with the taller bar so the visual rhythm stays tight. */ .nav-logo svg, .nav-logo img { height: 39px !important; } } @media (max-width: 480px) { .announce-bar { font-size: 10.5px !important; padding: 7px 10px !important; } .nav-inner { padding: 0 10px !important; gap: 6px !important; } .nav-logo svg, .nav-logo img { height: 31px !important; } /* (Search input sizing intentionally NOT overridden here — the ≤559px rule above sets a 44×full-width tap target which we want to keep at every phone size.) */ .nav-signin { padding: 6px 10px !important; font-size: 11px !important; } }