/* ============================================================ mobile-category.css — CORE mobile category/listing (<= 767px) ------------------------------------------------------------ 2-column product grid on phones. Root cause (found in PDCA Plan): catalog-viewmode-custom.css @media(max-width:479.98px) forces 1-column with .product-grid.viewmode-4col .item-grid .item-box{flex:0 0 100% !important} (specificity 0,4,0 + !important) — which catches all mainstream phones (360/375/390/393px). The theme actually INTENDS 2-up for viewmode-4col on mobile (col-xs-6) but that block kills it. Fix: restore a clean 2-up flex grid for 360–767px with a higher specificity (0,5,0 via .products-container) + !important, loaded last (AddCssFileParts). Uses align-items:flex-start so cards keep their natural height (the earlier display:grid attempt produced uneven cards); the 3:4 picture box (product-box-aspect-ratio.css) keeps the image portion uniform. Below 360px stays 1-column. ============================================================ */ @media (min-width: 360px) and (max-width: 767.98px) { /* 2-up grid for BOTH listing viewmodes (3col = Grid toggle, 4col = List toggle / store default). CRITICAL: neutralise the Bootstrap `.row` negative margin on .item-grid — otherwise item-box width:50% is computed against the wider (negative- margin-expanded) row, so 2×50% overflows the visible 341px container and wraps to 1 column (the bug). With margin:0 + box-sizing:border-box, two 50% boxes fit. */ /* CSS Grid forces EXACTLY two equal columns — immune to the flexbox "50% + 50% sub-pixel wrap" that was collapsing the cards to one column (two 50% flex items round up to >100% of the 341px row and wrap). align-items:start keeps each card's natural height (no stretching). */ .products-container .product-grid.viewmode-4col .item-grid, .products-container .product-grid.viewmode-3col .item-grid { display: grid !important; /* minmax(0,1fr) — NOT 1fr — so a wide product image can't force its column past its fair half (1fr's implicit `auto` minimum makes columns unequal). */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; margin: 0 !important; } /* Bootstrap `.row` clearfix ::before/::after would otherwise become extra grid items occupying cells and shifting the cards. */ .products-container .product-grid.viewmode-4col .item-grid::before, .products-container .product-grid.viewmode-4col .item-grid::after, .products-container .product-grid.viewmode-3col .item-grid::before, .products-container .product-grid.viewmode-3col .item-grid::after { content: none !important; display: none !important; } .products-container .product-grid.viewmode-4col .item-grid .item-box, .products-container .product-grid.viewmode-3col .item-grid .item-box { width: auto !important; max-width: none !important; flex: none !important; float: none !important; clear: none !important; height: auto !important; padding: 0 6px 12px !important; margin: 0 !important; box-sizing: border-box !important; } /* keep the image filling the narrower card */ .products-container .product-grid .item-grid .item-box .picture, .products-container .product-grid .item-grid .item-box .picture a, .products-container .product-grid .item-grid .item-box .picture img { width: 100%; } .products-container .product-grid .item-grid .item-box .product-title { font-size: 13px; line-height: 1.3; } .products-container .product-grid .item-grid .item-box .prices { font-size: 13px; } } @media (max-width: 767.98px) { /* comfortable add-to-cart / button tap targets on listing cards */ .item-box .buttons .button-2, .item-box .add-to-cart-button, .item-box .product-box-add-to-cart-button { min-height: var(--m-touch-min); } /* ---- compact sort / display / view-mode toolbar ---- labels stacked ABOVE their dropdown (2 lines each) → put them inline (1 line) so the toolbar is tight and products rise up. */ .product-selectors { padding-block: 6px; } .product-selectors .product-sorting, .product-selectors .product-page-size { padding: 0 4px; margin-block: 3px; } .product-selectors .product-sorting .row, .product-selectors .product-page-size .row { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; } .product-selectors .product-sorting .product-span, .product-selectors .product-page-size .product-span { width: auto !important; flex: 0 0 auto; padding: 0; } .product-selectors .product-span label { margin: 0; font-size: 11px; white-space: nowrap; } .product-selectors .remove_left_padding { flex: 1 1 auto; width: auto !important; padding: 0; } .product-selectors .dropdown-filter { width: 100%; min-height: 38px; font-size: 13px; } /* view-mode toggle: comfortable taps, aligned to the end */ .product-selectors .product-viewmode { padding: 0 4px; margin-block: 3px; } .product-selectors .grid-list-icon { display: flex; justify-content: center; gap: 8px; } .product-selectors .viewmode-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .15); /* dark border — the toolbar sits on a light page */ } .product-selectors .viewmode-icon.selected { border-color: var(--m-accent); color: var(--m-accent); } /* products-first: move the catalog sidebar (Categories / Manufacturers / Recently-viewed / filters) BELOW the product grid on mobile so products are above the fold (Baymard). The accordion blocks are kept — only reordered. Scoped to LISTING pages (html-*-page on ) so account and other _ColumnsTwo pages are unaffected. Breadcrumb keeps its default order (top). */ html.html-category-page .master-column-wrapper .row, html.html-manufacturer-page .master-column-wrapper .row, html.html-search-page .master-column-wrapper .row, html.html-product-tag-page .master-column-wrapper .row, html.html-recently-added-products-page .master-column-wrapper .row, html.html-vendor-page .master-column-wrapper .row { display: flex !important; flex-direction: column; } html.html-category-page .master-column-wrapper .row > .center-2, html.html-manufacturer-page .master-column-wrapper .row > .center-2, html.html-search-page .master-column-wrapper .row > .center-2, html.html-product-tag-page .master-column-wrapper .row > .center-2, html.html-recently-added-products-page .master-column-wrapper .row > .center-2, html.html-vendor-page .master-column-wrapper .row > .center-2 { order: 1; } html.html-category-page .master-column-wrapper .row > .sidebar, html.html-manufacturer-page .master-column-wrapper .row > .sidebar, html.html-search-page .master-column-wrapper .row > .sidebar, html.html-product-tag-page .master-column-wrapper .row > .sidebar, html.html-recently-added-products-page .master-column-wrapper .row > .sidebar, html.html-vendor-page .master-column-wrapper .row > .sidebar { order: 2; } /* 'Recently viewed products' is a merchandising widget, NOT a filter. At the bottom of a listing/search results page it sits below the grid + filters where mobile engagement is negligible, and (rendered as a dark accordion) it reads like a filter — clutter. Hide it ONLY on listing/search pages; it stays on PDP / cart where "recall what I was comparing" is genuinely useful. */ html.html-search-page .block-recently-viewed-products, html.html-category-page .block-recently-viewed-products, html.html-manufacturer-page .block-recently-viewed-products, html.html-product-tag-page .block-recently-viewed-products, html.html-vendor-page .block-recently-viewed-products { display: none !important; } } /* empty state (no search results / empty listing): the theme renders a plain, small, left-aligned line that gets lost between the search form and the browse blocks below. Present it as a centred card with a search glyph so it reads as a proper empty state. No injected text (i18n-safe) — the Categories block below is the browse/recovery path. */ @media (max-width: 767.98px) { .no-result { text-align: center; font-size: 16px; line-height: 1.5; padding: 32px 16px; margin: 8px 0 20px; color: #555; background: #f7f7f8; border-radius: 12px; } .no-result::before { content: "\f002"; font: normal normal normal 30px/1 FontAwesome; display: block; margin-bottom: 14px; color: var(--m-accent); opacity: .85; } } /* ============================================================ homepage categories-list -> horizontal swipe tile row (<=767px) ------------------------------------------------------------ The desktop collections grid squeezed all 6 category cards into one 390px row (32px per tile — unreadable). Best-practice mobile pattern (Amazon/Temu category circles): fixed-size image tiles in a snap-scrolling horizontal row, label pinned to the tile bottom. ============================================================ */ @media (max-width: 767.98px) { .categories-list .collections-list { display: flex !important; flex-wrap: nowrap !important; /* desktop .collections-grid-3 sets justify-content:center — on an overflowing scroll row, centring pushes overflow BOTH ways and the left side is unreachable by scrolling (scrollLeft can't go <0), hiding the 1st/2nd tiles. Scroll rows must start at flex-start. */ justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 10px; margin: 0; padding: 4px 2px 10px; scrollbar-width: none; /* Firefox */ } .categories-list .collections-list::-webkit-scrollbar { display: none; } /* desktop gives the content wrapper 30px side padding — at 390px that (plus page 15 + container 16) left only a 268px tile window. Drop it; the .container 16px gutter is enough on mobile. */ .categories-list .categories-list-content { padding-left: 0 !important; padding-right: 0 !important; } .categories-list .collections-grid-item { flex: 0 0 112px; width: 112px !important; max-width: none !important; margin: 0 !important; float: none !important; list-style: none; scroll-snap-align: start; } .categories-list .collections-grid-image { position: relative; width: 100%; overflow: hidden; border-radius: 10px; } .categories-list .collections-grid-image img { width: 100% !important; height: 140px !important; object-fit: cover; display: block; } /* label: bottom strip on the tile (the desktop hover-button overlay). The desktop rule centres this button with top/left 50% + translate(-50%); without resetting those the strip slides half its width off the tile (left-clipped label, user report). Neutralise the desktop positioning. */ .categories-list .collections-grid-image .button { position: absolute !important; inset: auto 0 0 0 !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; opacity: 1 !important; visibility: visible !important; padding: 6px 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; line-height: 1.25; text-align: center; text-transform: uppercase; letter-spacing: .02em; border: 0; white-space: normal; } } /* ============================================================ search page (<=767px): power-user options are desktop noise on a phone - keyword box + the core [Filter] drawer cover refinement (Amazon/Shein pattern). Hide the "Advanced search" toggle row and the whole advanced block (Category select, "Automatically search sub categories", "Search in product descriptions", etc.). (user request 2026-06-04; CORE - applies identically to all shops) ============================================================ */ /* ALL viewports (user follow-up 2026-06-04): desktop hides them too. The options stay CHECKED inside the hidden form, so subcategory + description matching still applies server-side — nothing is lost, the form shrinks to keyword + button. */ .search-page .basic-search .form-group:has([id="advs"]), .search-page #advanced-search-block { display: none !important; } @media (max-width: 767.98px) { /* keyword row: stack label over a full-width input */ .search-page .basic-search .form-group label.control-label { width: 100%; text-align: left; padding-bottom: 4px; } .search-page .basic-search .form-group .col-sm-6 { width: 100%; } }