/** * Quick Search v1.6.3 CSS * Fixed CSS scope - all rules now scoped to Quick Search only * Mobile-optimized with collapsible header and subcategory bar */ .quick-search-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:99999; } #quick-search-input::-webkit-search-cancel-button, #quick-search-input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; } body.quick-search-open { overflow:hidden; } .quick-search-container { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:90%; max-width:1600px; background:#fff; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); } /* Header wrapper - collapsible on scroll */ .quick-search-header-wrapper { flex-shrink:0; transition:all 0.3s ease; overflow:hidden; } .quick-search-header-wrapper.collapsed .quick-search-header > *:not(.search-input-wrapper):not(.quick-search-close) { display:none; } .quick-search-header-wrapper.collapsed .quick-search-header { padding:10px 15px; } .quick-search-header-wrapper.collapsed #quick-search-input { padding:10px 40px 10px 40px; font-size:16px; } .quick-search-header-wrapper.collapsed .quick-search-filters, .quick-search-header-wrapper.collapsed .subcategory-bar, .quick-search-header-wrapper.collapsed .recent-searches, .quick-search-header-wrapper.collapsed .mobile-filters-expanded { display:none !important; } .quick-search-header { display:flex; align-items:center; gap:15px; padding:20px; border-bottom:1px solid #eee; background:#f8f9fa; border-radius:12px 12px 0 0; flex-wrap:wrap; } .search-input-wrapper { flex:1; position:relative; min-width:200px; } #quick-search-input { width:100%; padding:14px 45px 14px 50px; font-size:18px; border:2px solid #ddd; border-radius:8px; outline:none; transition:all 0.2s; } #quick-search-input:focus { border-color:#3c8dbc; box-shadow:0 0 0 3px rgba(60,141,188,0.15); } .search-input-wrapper .search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#888; font-size:18px; } .search-clear-btn { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:#999; font-size:18px; cursor:pointer; padding:5px; display:none; } .search-clear-btn:hover { color:#333; } /* Subcategory bar - Desktop: wrapping chips, Mobile: dropdown */ .subcategory-bar { padding:12px 20px; background:#f0f7fc; border-bottom:1px solid #ddd; } .subcategory-label { font-size:13px; font-weight:600; color:#3c8dbc; margin-right:10px; } .subcategory-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .subcategory-chip { padding:6px 14px; background:#fff; border:1px solid #ddd; border-radius:20px; font-size:12px; cursor:pointer; white-space:nowrap; transition:all 0.2s; } .subcategory-chip:hover { border-color:#3c8dbc; background:#e8f4fc; } .subcategory-chip.active { background:#3c8dbc; color:#fff; border-color:#3c8dbc; } /* Mobile subcategory dropdown - hidden on desktop */ .subcategory-dropdown { display:none; } .subcategory-select { padding:8px 12px; font-size:14px; border:1px solid #ddd; border-radius:6px; background:#fff; flex:1; min-width:150px; } .category-filter, .brand-filter { padding:14px 20px; font-size:16px; border:2px solid #ddd; border-radius:8px; background:#fff; min-width:180px; transition:all 0.2s; } .category-filter:focus, .brand-filter:focus { border-color:#3c8dbc; box-shadow:0 0 0 3px rgba(60,141,188,0.15); outline:none; } .quick-search-close { width:48px; height:48px; min-width:48px; background:#fff; border:2px solid #ddd; border-radius:8px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#666; transition:all 0.2s; } .quick-search-close:hover { background:#ff4444; border-color:#ff4444; color:#fff; } /* PF OC4 2026-08-03: visibility is class-driven so the mobile rules below can govern it. Previously JS called .show(), writing an inline display:block that beat the media query. */ .recent-searches { display:none; align-items:center; gap:10px; padding:10px 20px; background:#f8f9fa; border-bottom:1px solid #eee; flex-wrap:wrap; } .recent-searches.is-shown { display:flex; } #qs-recent-terms, .qs-rr-list { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .qs-rec-toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:0; margin:0; padding:0; font:inherit; color:inherit; cursor:default; flex:0 0 auto; } .qs-rec-caret { display:none; } .recent-label { font-size:13px; color:#888; } .recent-term { padding:4px 12px; background:#e9ecef; border-radius:15px; font-size:13px; color:#555; cursor:pointer; transition:all 0.2s; } .recent-term:hover { background:#3c8dbc; color:#fff; } .quick-search-filters { display:flex; align-items:center; gap:15px; padding:12px 20px; background:#fff; border-bottom:1px solid #eee; flex-wrap:wrap; } .stock-filter { display:flex; align-items:center; gap:6px; font-size:14px; color:#555; cursor:pointer; } .stock-filter input { width:18px; height:18px; accent-color:#3c8dbc; } .sort-filter { padding:8px 15px; font-size:14px; border:1px solid #ddd; border-radius:6px; background:#fff; transition:all 0.2s; } .sort-filter:focus { border-color:#3c8dbc; outline:none; } .display-mode { margin-left:auto; font-size:14px; font-weight:600; color:#3c8dbc; } .quick-search-results { flex:1; overflow-y:auto; padding:20px; } /* PF #304 flex-fill: POS grid always fills width; last-row cards grow */ /* PF #304 v2 (Dave): uniform scaling cards, even rows, last row NOT stretched */ .products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; align-content:start; } .products-grid > .quick-search-product { min-width:0; } .quick-search-product { background:#fff; border:1px solid #eee; border-radius:8px; padding:15px; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,0.1); } .quick-search-product:hover { border-color:#3c8dbc; box-shadow:0 4px 12px rgba(60,141,188,0.2); transform:translateY(-2px); } .quick-search-product.out-of-stock { opacity:0.7; } .quick-search-product .product-image { position:relative; width:100%; padding-bottom:100%; margin-bottom:8px; background:#f8f9fa; border-radius:6px; overflow:hidden; } .quick-search-product .product-image img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:90%; max-height:90%; object-fit:contain; } .quick-search-product .options-badge { position:absolute; top:5px; right:5px; background:#f39c12; color:#fff; width:22px; height:22px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:10px; } .quick-search-product .product-info { text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; } .quick-search-product .product-name { font-size:12px; font-weight:600; color:#333; margin-bottom:4px; line-height:1.3; max-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .quick-search-product .product-model { font-size:10px; color:#888; margin-bottom:4px; } .quick-search-product .product-price { font-size:14px; font-weight:bold; color:#1e4c8c; margin-bottom:4px; } .quick-search-product .product-price .price-old { text-decoration:line-through; color:#999; font-weight:normal; font-size:11px; margin-right:5px; } .quick-search-product .product-price .price-new { color:#1e4c8c; } .quick-search-product .product-stock { font-size:10px; padding:2px 6px; border-radius:3px; margin-top:auto; } .quick-search-product.in-stock .product-stock { color:#00a65a; background:#e8f5e9; } .quick-search-product.out-of-stock .product-stock { color:#dd4b39; background:#ffebee; } .search-loading, .search-empty { text-align:center; padding:60px 20px; color:#888; } .search-loading i, .search-empty i { font-size:48px; margin-bottom:15px; display:block; } .search-empty p { margin-bottom:15px; } .deep-search-btn { padding:10px 20px; background:#28a745; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; margin-bottom:10px; display:block; margin:0 auto 10px auto; } .deep-search-btn:hover { background:#1e7e34; } .deep-search-btn i { margin-right:8px; } .clear-filters-btn { padding:10px 20px; background:#3c8dbc; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; } .clear-filters-btn:hover { background:#2d6a8a; } .quick-search-footer { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-top:1px solid #eee; background:#f8f9fa; border-radius:0 0 12px 12px; } .results-count { color:#666; font-size:14px; } .load-more-btn { padding:10px 24px; background:#007bff; color:#fff; border:none; border-radius:6px; font-size:14px; cursor:pointer; } .load-more-btn:hover { background:#0056b3; } /* Active filter states */ .filter-active { border-color:#3c8dbc !important; background:#f0f7fc !important; } .filter-active.stock-filter { background:#e8f5e9 !important; border-color:#00a65a !important; } .clear-all-filters { padding:10px 16px; background:#fff; border:2px solid #ddd; border-radius:6px; font-size:13px; cursor:pointer; color:#666; transition:all 0.2s; margin-left:auto; } .clear-all-filters:hover { background:#ff4444; border-color:#ff4444; color:#fff; } .clear-all-filters i { margin-right:5px; } /* Mobile filter toggle button - hidden on desktop */ .mobile-filter-toggle { display:none; padding:8px 16px; background:#e9ecef; border:1px solid #ddd; border-radius:6px; font-size:13px; color:#555; cursor:pointer; } .mobile-filter-toggle i { margin-right:5px; } .mobile-filter-toggle.active { background:#007bff; color:#fff; border-color:#007bff; } /* Mobile filters container - hidden on desktop */ .mobile-filters-expanded { display:none !important; } /* ==================== */ /* MOBILE OPTIMIZATIONS */ /* ==================== */ @media (max-width:768px) { .quick-search-overlay { height:100dvh; } .quick-search-container { width:100%; height:100%; border-radius:0; top:0; left:0; transform:none; } /* Compact header - single row with search and close */ .quick-search-header { padding:10px; border-radius:0; gap:8px; flex-wrap:nowrap; background:#fff; } .search-input-wrapper { flex:1; min-width:0; } #quick-search-input { padding:10px 10px 10px 38px; font-size:16px; border-width:1px; border-radius:6px; } .search-input-wrapper .search-icon { left:12px; font-size:16px; } .quick-search-close { width:40px; height:40px; min-width:40px; font-size:18px; border-width:1px; } /* Hide dropdowns in header on mobile - move to filters */ .quick-search-header .category-filter, .quick-search-header .brand-filter { display:none; } /* Compact filters row */ .quick-search-filters { padding:8px 10px; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .quick-search-filters::-webkit-scrollbar { display:none; } /* PF OC4 2026-08-03: the filter strip is deliberately a horizontal scroller on mobile, but with no affordance the last control ("Most Viewed") just read as sliced off. CSS-only scroll shadows: the right shadow shows only while there is more to scroll to, and disappears once the strip is scrolled to the end. background-color:#fff comes from the base rule; the two `local` white gradients mask the shadows at the true content edges. */ .quick-search-filters { padding-right:10px; background-image: linear-gradient(to right,#fff,#fff), linear-gradient(to right,#fff,#fff), linear-gradient(to right,rgba(0,0,0,.13),rgba(0,0,0,0)), linear-gradient(to left,rgba(0,0,0,.13),rgba(0,0,0,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:22px 100%,22px 100%,13px 100%,13px 100%; background-attachment:local,local,scroll,scroll; } /* PF OC4 2026-08-03: .display-mode is a status label ("Most Viewed" / "Search Results"), not a control. Pinning it sticky to the right edge of the scroller was tried and rejected: at scroll position 0 it sits directly on top of the "Sort" select's caret, so the two read as one broken merged control. The layout that cannot be clipped at any label width is further down - the label gets its own line under the controls. */ /* Show mobile filter toggle */ .mobile-filter-toggle { display:inline-flex; align-items:center; flex-shrink:0; } /* Mobile category/brand in filters area */ .mobile-filters-expanded { display:none !important; padding:8px 10px; background:#f8f9fa; border-bottom:1px solid #eee; gap:8px; } .mobile-filters-expanded.show { display:flex !important; flex-wrap:wrap; } .mobile-filters-expanded select { flex:1; min-width:45%; padding:8px 10px; font-size:14px; border:1px solid #ddd; border-radius:6px; } /* PF OC4 2026-08-03: measured on the reported device (1440x3168 @ dpr 3.75 = 384 CSS px): Filters 93.5px + In Stock Only 112px + Sort 136px + two 8px gaps = 358.5px against 360px of inner width, so the Sort select dropped onto a second line by about two pixels, and the status label took a third. Trim the three controls so they clear one line with ~40px to spare at 384px - they must stay on a single row, the strip is nowrap. */ .mobile-filter-toggle { padding:6px 10px; font-size:12px; } .mobile-filter-toggle i { margin-right:4px; } .stock-filter { font-size:12px; gap:5px; flex-shrink:0; } .stock-filter input { width:15px; height:15px; } .sort-filter { padding:5px 8px; font-size:12px; flex-shrink:0; min-width:auto; } /* PF OC4 2026-08-03: the mobile filter strip is now ONE dedicated line carrying only the "Filters" pill (plus Clear Filters when something is active). syncFilterHome() moves the status label, In Stock Only and Sort into #qs-mobile-filters, which the pill opens; the Category and Brand selects already lived there. The strip-side .display-mode rule below is a safety net for the case where the JS move never runs - the controls themselves are deliberately NOT hidden strip-side, so a JS failure degrades to the previous one-line layout rather than making them unreachable. Delete this whole block to revert. */ .quick-search-filters .display-mode { display:none; } /* PF OC4 2026-08-03: the pill is now the ONLY control on the phone layout, so it has to read as a tappable button at a glance. The inherited #e9ecef fill on a #ddd border sat almost invisibly on the #f8f9fa recent row. Solid brand blue + white label + a soft drop shadow makes it the one thing on that row that looks pressable. Three states, in source order (last matching rule wins): resting #3c8dbc, filters active #2c6f94, panel open #1f5b7a. */ .mobile-filter-toggle { padding:8px 15px; font-size:13px; font-weight:600; letter-spacing:.2px; border-radius:999px; background:#3c8dbc; border:1px solid #3c8dbc; color:#fff; box-shadow:0 2px 6px rgba(60,141,188,.40); } .mobile-filter-toggle i { color:#fff; } .mobile-filter-toggle.has-filters { background:#2c6f94; border-color:#2c6f94; color:#fff; box-shadow:0 2px 8px rgba(44,111,148,.50); } /* PF OC4 2026-08-03: .active (panel open) has to beat .has-filters. Both selectors are one class deep, so source order decides and .active must come second. Without this the pill stayed in the pale has-filters colour while the panel was open, and the grey caret sat on the blue fill with almost no contrast. */ .mobile-filter-toggle.active { background:#1f5b7a; border-color:#1f5b7a; color:#fff; box-shadow:inset 0 1px 3px rgba(0,0,0,.28); } .mobile-filter-toggle.active .qs-filter-caret { color:#fff; } .mobile-filter-toggle.active .qs-filter-count { background:#fff; color:#1f5b7a; } /* PF OC4 2026-08-03: Clear Filters kept its desktop 10px/16px padding and 2px border, so it stood 8px taller than the pill and stretched the whole dedicated line from 53px to 61px whenever a filter was active. Match the pill exactly. */ .clear-all-filters { padding:7px 14px; font-size:13px; border-width:1px; border-radius:999px; flex-shrink:0; } /* inverted: white chip on the blue pill. Was blue-on-blue once the pill went solid. */ .qs-filter-count { display:none; margin-left:6px; padding:0 5px; min-width:16px; background:#fff; color:#2c6f94; border-radius:999px; font-size:11px; font-weight:700; line-height:16px; text-align:center; } .qs-filter-count.on { display:inline-block; } .qs-filter-caret { display:inline-block; margin-left:6px; font-size:10px; color:rgba(255,255,255,.9); transition:transform .2s ease; } .mobile-filter-toggle.active .qs-filter-caret { transform:rotate(90deg); } .mobile-filters-expanded { border-top:1px solid #e6e6e6; } .mobile-filters-expanded .display-mode { display:block; flex:1 0 100%; margin:0 0 2px; font-size:12px; font-weight:600; color:#3c8dbc; } .mobile-filters-expanded .display-mode:empty { display:none; } .mobile-filters-expanded .display-mode::before { content:"Showing: "; color:#8a929c; font-weight:400; } .mobile-filters-expanded .stock-filter { flex:1 0 100%; margin:2px 0; font-size:13px; } .mobile-filters-expanded .stock-filter input { width:17px; height:17px; } .mobile-filters-expanded .sort-filter { flex:1 0 100%; min-width:0; padding:8px 10px; font-size:13px; } .mobile-filters-expanded .clear-all-filters { flex:1 0 100%; margin:4px 0 0; } /* PF OC4 2026-08-03: the Filters pill now rides on the recent-searches row instead of having a strip of its own, so the entire control area is ONE row on a phone (about 48px, down from 39+53=92px). .qs-hosted / .qs-has-pill are added by syncFilterHome() only after the pill has actually been moved, so if the JS ever fails to run the strip stays visible and the button stays reachable rather than vanishing. */ .quick-search-filters.qs-hosted { display:none; } .recent-searches.qs-has-pill { display:flex; flex-wrap:nowrap; gap:7px; padding:7px 10px; } /* Collapsed the row is a single line, so centre the chips against the taller pill. The :not() is load-bearing, not decoration: .recent-searches.is-shown further down this media query sets align-items:flex-start at the same (0,2,0) specificity and would win on source order, leaving the pill hanging 12px below the chips. :not(.is-open) makes this (0,3,0). Expanded, the chips wrap to several lines and top-align is correct again - the label and pill stay level with the first line instead of floating to the middle of the block. */ .recent-searches.qs-has-pill:not(.is-open) { align-items:center; } .recent-searches.qs-has-pill.is-open { align-items:flex-start; } .recent-searches.qs-has-pill .qs-rec-toggle { padding:0; } /* no recent searches yet: the row carries the pill alone, so drop the empty "Recent:" label */ .recent-searches.qs-has-pill:not(.is-shown) .qs-rec-toggle, .recent-searches.qs-has-pill:not(.is-shown) #qs-recent-terms, .recent-searches.qs-has-pill:not(.is-shown) .qs-rr-list { display:none; } .recent-searches .mobile-filter-toggle { flex:0 0 auto; padding:8px 14px; font-size:13px; } /* PF OC4 2026-08-03: give the recent row the same mobile treatment as the site breadcrumbs (PFHERO2026): collapse to a single line behind a caret that expands it, rather than hiding it outright. The old display:none here never actually took effect, because loadRecent() called jQuery .show(), which writes an inline display:block. */ .recent-searches.is-shown { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:7px; padding:7px 10px; } .recent-label { font-size:12px; } .qs-rec-toggle { cursor:pointer; align-items:flex-start; gap:5px; padding:2px 0 0; } .qs-rec-caret { display:inline-block; font-size:10px; line-height:1.4; color:#8a929c; transition:transform .2s ease; } .recent-searches.is-open .qs-rec-caret { transform:rotate(90deg); } #qs-recent-terms, .qs-rr-list { flex:1 1 auto; min-width:0; gap:6px; max-height:24px; overflow:hidden; transition:max-height .25s ease; } .recent-searches.is-open #qs-recent-terms, .recent-searches.is-open .qs-rr-list { max-height:240px; } .recent-term { font-size:12px; line-height:1.35; padding:3px 10px; } /* Mobile subcategory bar - show dropdown instead of chips */ .subcategory-bar { padding:8px 10px; } .subcategory-chips { display:none !important; } .subcategory-dropdown { display:flex !important; align-items:center; gap:8px; flex:1; } .subcategory-label { margin-right:0; font-size:12px; flex-shrink:0; } /* Results area - more padding for scroll */ .quick-search-results { padding:10px; } /* 2 column grid on mobile */ .products-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .products-grid > .quick-search-product { min-width:0; } /* Compact product cards */ .quick-search-product { padding:8px; border-radius:6px; } .quick-search-product .product-image { padding-bottom:80%; margin-bottom:8px; border-radius:4px; } .quick-search-product .product-name { font-size:12px; margin-bottom:4px; -webkit-line-clamp:2; } .quick-search-product .product-model { font-size:10px; margin-bottom:4px; } .quick-search-product .product-price { font-size:14px; margin-bottom:4px; } .quick-search-product .product-price .price-old { font-size:11px; } .quick-search-product .product-stock { font-size:10px; } .quick-search-product .options-badge { width:20px; height:20px; font-size:10px; top:4px; right:4px; } /* Compact footer */ .quick-search-footer { padding:10px; border-radius:0; gap:10px; } .results-count { font-size:12px; } .load-more-btn { padding:10px 20px; font-size:13px; flex:1; } } /* Extra small screens - list view */ @media (max-width:400px) { .products-grid { grid-template-columns:1fr; gap:8px; } .products-grid > .quick-search-product { min-width:0; } .quick-search-product { flex-direction:row; padding:10px; align-items:center; } .quick-search-product .product-image { width:70px; min-width:70px; padding-bottom:0; height:70px; margin-bottom:0; margin-right:12px; } .quick-search-product .product-info { flex:1; min-width:0; } .quick-search-product .product-name { font-size:13px; -webkit-line-clamp:1; } .quick-search-product .product-price { font-size:15px; } } /* PROTECTIVEFILM 2026-07-03: stock-alert button on OOS quick-search cards */ .qs-stock-alert { margin-top:6px; padding:7px 8px; border:0; border-radius:4px; background:#3c8dbc; color:#fff; font-size:11px; font-weight:600; cursor:pointer; width:100%; line-height:1.2; } .qs-stock-alert:hover { background:#367fa9; } /* the ISA magnific popup must sit ABOVE the quick-search overlay (z-index 99999) */ .mfp-bg { z-index:100010 !important; } .mfp-wrap { z-index:100011 !important; } /* PROTECTIVEFILM 2026-07-03: site-wide price colour red -> brand navy (matches QR-scanner button #1e4c8c). Journal3's compiled CSS is INLINED AFTER this sheet, so these need !important to win the cascade. */ .product-info .product-details .price-group .product-price-new { color:#1e4c8c !important; } .main-products.product-grid .product-thumb .price-new, .main-products.product-list .product-thumb .price-new { color:#1e4c8c !important; } /* ============================================================================ PF OC4 2026-07-17 (Dave): Journal 3.1 -> 3.2 icon parity for the Secondary Menu (.top-menu-14: On Sale / Reviews / Phone / Contact / Account / Blog). The skin custom-code sets these icons with icomoon CODEPOINTS from the live 3.1 font build; the bench 3.2 icomoon build maps those codes to different or missing glyphs (Phone/Blog blank, Contact wrong). icomoon-legacy is the live 3.1 font served alongside the 3.2 one; ONLY these menu rules use it. Also restores the live typography: uppercase bold 12px labels, 13px icons. ========================================================================== */ @font-face { font-family: 'icomoon-legacy'; src: url('/catalog/view/theme/journal3/icons/fonts/icomoon-legacy.woff2') format('woff2'), url('/catalog/view/theme/journal3/icons/fonts/icomoon-legacy.woff') format('woff'), url('/catalog/view/theme/journal3/icons/fonts/icomoon-legacy.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } div.top-menu-14 ul.j-menu li.menu-item.top-menu-item > a:before, div.top-menu-14 ul.j-menu ul.j-menu li.menu-item.top-menu-item > a:before { font-family: 'icomoon-legacy' !important; } /* All per-item icons configured in the Journal editor carry 3.1-era icomoon codepoints (module data migrated 1:1 from live), so every *-menu-item-N icon uses the legacy font. Journal's own UI glyphs (dropdown arrows etc.) keep the 3.2 font - different selectors. */ div.main-menu .j-menu li.menu-item.menu-item[class*="main-menu-item-"] > a:before, div.top-menu .j-menu li.menu-item.menu-item[class*="top-menu-item-"] > a:before, div.flyout-menu .j-menu li.menu-item.menu-item[class*="flyout-menu-item-"] > a:before, div.links-menu .j-menu li.menu-item.menu-item[class*="links-menu-item-"] > a:before, div.accordion-menu .j-menu li.menu-item.menu-item[class*="accordion-menu-item-"] > a:before, div.icons-menu .j-menu li.menu-item.menu-item[class*="icons-menu-item-"] > a:before { font-family: 'icomoon-legacy' !important; } /* PF OC4 2026-07-17 (Dave): home-page text blocks - on phones the Journal 3.2 "block-head-text" layout keeps the heading in a half-width side column, squeezing the text. Stack heading above the text, both full width, at phone widths. 2026-07-26 REWRITTEN (Dave: "mobile issue with this section on the home page"). The original three rules were unscoped - they hit EVERY .block-body.expand-block. Journal 3.2 lays some blocks out as flex-direction:column (home-page blocks-275: the theme gives it flex-wrap:nowrap and height:100%, 253px at 412px wide). In a COLUMN container flex-basis is the HEIGHT, and flex-shrink:0 forbids shrinking, so "flex: 0 0 100%" made .block-wrapper 253px tall and unshrinkable; the forced flex-wrap:wrap then pushed it into a SECOND flex column at x=382 - right off the edge of a 412px screen. The body text disappeared and only the blockquote's 45px red icomoon glyph poked past the right-hand edge. Fix: scope to the head-text layout only (the layout that actually HAS a .block-header), and clamp with min-width instead of flex-basis. min-width is direction-agnostic - in a row container it forces the wrapper onto its own line, in a column container it is a no-op. The flex-wrap override is gone: the theme's own per-module CSS already sets flex-wrap:wrap on the row-mode blocks (e.g. blocks-342), and blocks-275 gets its intended nowrap back. */ @media (max-width: 767px) { .module-blocks .block-body > .block-header.block-head-text { min-width: 100% !important; } .module-blocks .block-body > .block-header.block-head-text + .block-wrapper { min-width: 100% !important; margin-left: 0 !important; } /* Dave 2026-07-17: show the "Stock alert" label on phones (markup hides it with BS3 hidden-xs) */ .product-layout.out-of-stock .btn-cart span.hidden-xs { display: inline !important; } /* Dave 2026-07-17: product grid = 2 per row on phones (was 1 full-width card per row) */ .main-products.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } /* Dave 2026-07-17: footer sections had huge empty gaps on phones - tighten row padding */ footer .grid-row { padding-top: 22px !important; padding-bottom: 22px !important; } footer .module { margin-bottom: 8px !important; } /* Dave 2026-07-18: slider captions covered most of the slide image on phones - hide the text overlay at phone widths (desktop keeps captions; H1 lives in page content, not here). */ .module-master_slider .ms-caption, .master-slider .ms-caption { display: none !important; } } /* Dave 2026-07-18: trade-discount header notice - compact, in site colours (dark bar, red chip) instead of the tall pale-blue block. All widths. */ .notice-module .hn-body { background: #39474b !important; padding: 6px 12px !important; } .notice-module .hn-content { color: #fff !important; font-size: 13px !important; line-height: 1.4 !important; } .notice-module .hn-content code { background: #c8102e !important; border: none !important; border-radius: 4px !important; padding: 2px 9px !important; margin-left: 6px; } .notice-module .hn-content code a, .notice-module .hn-content code a span { color: #fff !important; text-decoration: none !important; font-weight: 700; } .notice-module .header-notice-close-button a { color: #fff !important; font-size: 12px !important; text-decoration: underline; } @media (max-width: 767px) { .notice-module .hn-content { font-size: 12px !important; } .notice-module .hn-body { padding: 5px 10px !important; } } /* Dave 2026-07-18: qty stepper everywhere = [-] input [+] side-by-side (Journal stacks the two arrows in a column on the right). Markup is already minus/input/plus, so flex + static positioning lays it out; arrow glyphs swapped for minus/plus. All widths, all steppers (category cards, product page, cart). */ .stepper { display: flex !important; flex-direction: row !important; align-items: stretch; width: auto !important; max-width: none !important; } .stepper button { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; width: 28px; min-width: 28px; height: auto !important; flex: 0 0 auto; border: 1px solid #6d767d; background: #6d767d; color: #fff; cursor: pointer; } .stepper button.fa-angle-down { order: 1; border-radius: 4px 0 0 4px; border-right: none; } .stepper input[name="quantity"] { order: 2; text-align: center; flex: 1 1 auto; min-width: 36px; width: 36px; border-radius: 0 !important; } .stepper button.fa-angle-up { order: 3; border-radius: 0 4px 4px 0; border-left: none; } .stepper button.fa.fa-angle-down:before, .product-info .button-group-page .stepper button.fa.fa-angle-down:before, .main-products-style.product-grid .product-thumb .stepper button.fa.fa-angle-down:before, .main-products-style.product-list .product-thumb .stepper button.fa.fa-angle-down:before { content: "-" !important; font-family: inherit !important; font-weight: 700; font-size: 17px !important; } .stepper button.fa.fa-angle-up:before, .product-info .button-group-page .stepper button.fa.fa-angle-up:before, .main-products-style.product-grid .product-thumb .stepper button.fa.fa-angle-up:before, .main-products-style.product-list .product-thumb .stepper button.fa.fa-angle-up:before { content: "+" !important; font-family: inherit !important; font-weight: 700; font-size: 17px !important; } .stepper button:hover { background: #59626a; } /* Dave 2026-07-18: equal square buttons + white qty cell, fixed width (product page had stretched unequal slabs on the yellow row). */ .stepper input[name="quantity"] { background: #fff !important; } .product-info .button-group-page .stepper { flex: 0 0 auto !important; width: 134px !important; max-width: 134px !important; } .product-info .button-group-page .stepper button { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 48px !important; background: #6d767d !important; border: 1px solid #6d767d !important; color: #fff !important; } .product-info .button-group-page .stepper button.fa-angle-down { border-radius: 6px 0 0 6px !important; } .product-info .button-group-page .stepper button.fa-angle-up { border-radius: 0 6px 6px 0 !important; } .product-info .button-group-page .stepper input[name="quantity"] { flex: 0 0 50px !important; width: 50px !important; min-width: 50px !important; height: 48px !important; background: #fff !important; border-top: 1px solid #d4d8dc !important; border-bottom: 1px solid #d4d8dc !important; border-left: none !important; border-right: none !important; } /* Dave 2026-07-18: trade notice = ONE compact dark bar on mobile (the sign-up half still showed the old pale-blue block). */ .notice-module { background: #39474b !important; } .notice-module .module-body { display: flex !important; align-items: center; } .notice-module .hn-body { flex: 1 1 auto; background: transparent !important; padding: 5px 10px !important; } .notice-module .header-notice-close-button { background: transparent !important; flex: 0 0 auto; padding: 0 10px 0 0 !important; margin: 0 !important; } .notice-module .header-notice-close-button a { color: #fff !important; font-size: 12px !important; background: transparent !important; padding: 0 !important; } @media (max-width: 767px) { .notice-module .hn-content { font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice-module .hn-content code { padding: 1px 7px !important; margin-left: 4px; } .notice-module .header-notice-close-button a { font-size: 11px !important; white-space: nowrap; } } /* PROTECTIVEFILM OC4 2026-07-25 - queue item #144. Dave: the "Or Sign Up Here" link in the trade-discount bar is dark-on-dark and unreadable. The 2026-07-18 rules above already ask for a white close link, but they never win. Journal3 emits a per-module stylesheet inline in the page,