/* Stinger page bundle */ .st-sf{border:1px solid #e4e4e7;border-radius:12px;padding:14px 16px; margin:0 0 18px;background:#fafafb;} .st-sf label{display:block;font-family:"Barlow Condensed",sans-serif; font-size:14px;letter-spacing:1.2px;text-transform:uppercase; color:#3f3f46;font-weight:700;margin:0 0 8px;} .st-sf-row{display:flex;gap:8px;flex-wrap:wrap;} /* box-sizing is stated on both controls. The theme does not set it for form elements, and `width:100%` plus `padding:10px 18px` on the button measured 36px WIDER than its own container - invisible while the form sat in the full page width, and 36px off the right edge of the panel the moment the 2026-09-12 tires bar put it in a 327px box. Measured in the browser at 375px, not guessed. */ .st-sf input[type=search]{flex:1 1 220px;min-width:0;padding:10px 12px; box-sizing:border-box; border:1px solid #cfcfd6;border-radius:8px;font-size:16px;background:#fff;} .st-sf input[type=search]:focus{outline:2px solid #C01C23;outline-offset:1px; border-color:#C01C23;} .st-sf button{flex:0 0 auto;padding:10px 18px;border:0;border-radius:8px; box-sizing:border-box;min-width:0;max-width:100%; background:#C01C23;color:#fff;font-weight:800;font-size:15px;cursor:pointer;} .st-sf button:hover{background:#9d151b;} .st-sf-hint{margin:8px 0 0;font-size:13px;color:#5a5a63;line-height:1.5;} .st-sf-miss{background:#FFF8E6;border:1px solid #EFD9A0;border-radius:8px; padding:12px 14px;margin:0 0 14px;font-size:15px;line-height:1.55;} .st-sizeindex-lead{font-size:15px;color:#3f3f46;margin:0 0 18px;} .st-rim{margin:0 0 22px;} .st-rim h2{font-family:"Barlow Condensed",sans-serif;font-size:15px; letter-spacing:1.4px;text-transform:uppercase;color:#6b6b73; margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid #e8e8ec;} .st-rim-opts{display:flex;flex-wrap:wrap;gap:6px;} .st-rim-o{display:inline-flex;align-items:center;gap:6px;background:#fff; border:1px solid #dcdce1;border-radius:999px;padding:6px 12px; font-size:13.5px;font-weight:600;color:#111;text-decoration:none;} .st-rim-o span{font-size:11px;color:#8a8a90;font-weight:700;} .st-rim-o:hover{border-color:#C01C23;color:#C01C23;} @media(max-width:600px){.st-sf button{width:100%;}} /* THE PHONE COLLAPSE. The checkbox is never seen; the label is the row. Desktop gets exactly two declarations, both display:none on elements that only exist on the archive, and NO rule that reaches the form. */ .st-sf-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none;} .st-sf-tog{display:none;} @media(max-width:781px){ .st-sf-tog{display:flex;align-items:center;justify-content:space-between; gap:10px;box-sizing:border-box;min-height:44px;margin:0 0 10px; padding:10px 16px;border:1px solid #dcdce1;border-radius:12px; background:#fafafb;font-family:"Barlow Condensed",sans-serif; font-weight:700;font-size:14px;letter-spacing:1.2px; text-transform:uppercase;color:#111;cursor:pointer; -webkit-tap-highlight-color:transparent;} .st-sf-tog::after{content:"\25BE";font-size:15px;line-height:1; color:#C01C23;} .st-sf-cb:checked ~ .st-sf-tog{margin-bottom:8px;} .st-sf-cb:checked ~ .st-sf-tog::after{content:"\25B4";} /* Sibling-qualified on purpose: a form with no checkbox before it - the shortcode copy on the index page - is not touched by either rule. An unqualified .st-sf{display:none} here is the 2026-09-05 mistake that emptied another snippet wrapper. */ .st-sf-cb ~ form.st-sf{display:none;} .st-sf-cb:checked ~ form.st-sf{display:block;} } .st-filters{border:1px solid #e4e4e7;border-radius:12px;padding:14px 16px; margin:0 0 22px;background:#fafafb;} .st-fg{display:flex;gap:12px;align-items:flex-start;padding:7px 0; border-bottom:1px solid #eeeef1;flex-wrap:wrap;} .st-fg:last-of-type{border-bottom:none;} .st-fg-label{font-family:"Barlow Condensed",sans-serif;font-size:13px; letter-spacing:1.4px;text-transform:uppercase;color:#6b6b73; font-weight:700;min-width:78px;padding-top:5px;} .st-fg-opts{display:flex;flex-wrap:wrap;gap:6px;flex:1;} .st-fo{display:inline-flex;align-items:center;gap:6px;background:#fff; border:1px solid #dcdce1;border-radius:999px;padding:5px 11px; font-size:13px;font-weight:600;color:#111;text-decoration:none;} /* NO APOSTROPHES IN THIS BLOCK. Everything between the style tags is one PHP SINGLE-QUOTED string; one apostrophe closes it early and the whole snippet dies with a parse error. That takes the entire filter bar off the shop and category pages, and it fails silently - the page still renders, just with no filters. Cost me a live outage on 2026-09-08. #8a8a90 measured 3.43:1 on white at 11px/700, under the 4.5:1 WCAG AA needs and far under the 7:1 floor this store claims for small text. It is the COUNT on every filter chip - the number the customer reads to decide whether a filter is worth tapping. #575760 is 7.15:1, same blue-grey. */ .st-fo span{font-size:11px;color:#575760;font-weight:700;} .st-fo:hover{border-color:#C01C23;color:#C01C23;} .st-fo.is-on{background:#111;border-color:#111;color:#fff;} .st-fo.is-on span{color:#F1C329;} /* The times sign on the chip that is ON. It is there because the number beside it means something different from the number on every other chip: the others say what you will get, this one says what you have got, and the sign is what tells a shopper that tapping it undoes rather than narrows. */ .st-fo.is-on .st-fx{font-size:14px;line-height:1;margin-left:1px;} .st-factive{margin-top:10px;font-size:13px;color:#5a5a63;} .st-fclear{display:inline-block;background:#fdecec;color:#C01C23; border-radius:999px;padding:3px 10px;margin-left:6px;font-weight:700; text-decoration:none;font-size:12.5px;} @media(max-width:600px){.st-fg{flex-direction:column;gap:6px;} .st-fg-label{padding-top:0;}} /* The tires branch grew a Type group in this bar on 2026-09-11, with a count on every chip and the rest of the filter set carried across. Snippet 158 JUMP TO row names the same five categories one element above it and loses the filters when tapped. Two rows of the same five words is the defect that made 629 product pages argue with themselves. The class is added only on the tires branch and only when the Type row actually rendered, so no other department is touched and nothing is deleted - switch this snippet off and the row is back. */ body.sas-ttype .st-subdept{display:none;} /* A group past sixteen options folds into a native details. Measured at 390px: with load index flat the expanded bar was 348 x 1327, and snippet 115 expands the bar on any page carrying a filter_ arg - so using a filter bought a screen and a half of filters between the shopper and his own results. The summary is a chip, because that is what everything else in this row is, and a control that looks like the controls beside it needs no explaining. 44px is the tap floor snippet 161 holds the rest of the phone to. */ .st-fg-fold{flex:1;min-width:0;} .st-fg-fold>summary{display:inline-flex;align-items:center; min-height:44px;box-sizing:border-box;padding:5px 13px;cursor:pointer; background:#fff;border:1px solid #dcdce1;border-radius:999px; font-size:13px;font-weight:700;color:#111;list-style:none;} .st-fg-fold>summary::-webkit-details-marker{display:none;} .st-fg-fold>summary::marker{content:"";} .st-fg-fold>summary:hover{border-color:#C01C23;color:#C01C23;} .st-fg-fold[open]>summary{margin-bottom:9px;} .st-fg-fold[open]>.st-fg-opts{max-height:260px;overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding-right:2px;} /* CORRECTION 2026-08-18: the sidebar layered-nav widgets are NOT unconfigured after all. The REST API simply does not expose classic widget instances (every one came back as {}), and the widgets only render once the archive has matching terms - which is why a first look at the Towing & Hitches page showed only Search and Price. They work. So the sidebar now duplicates this bar on tire pages. Resolution: the bar keeps Rim size and Brand because it sits above the grid and survives on a phone, where the sidebar drops below the products. The sidebar keeps Search, TIRE SIZE (60 terms - too many for chips) and Price, and its duplicate Rim Size / Brand blocks are hidden. Nothing is deleted; unhiding is one rule. The dropdown widgets render a hidden input named for the attribute (input[name="filter_brand"]) rather than a select with that name, so target the input - the earlier select[name=...] selector matched nothing and left BRAND / MARCA duplicated in the sidebar. TIRE SIZE stays: 60 terms is a dropdown job, not a chip job. */ .woocommerce .widget_layered_nav:has(a[href*="filter_rim-size"]), .woocommerce .widget_layered_nav:has(input[name="filter_brand"]), .woocommerce .widget_layered_nav:has(input[name="filter_rim-size"]):not(:has(input[name="filter_size"])){ display:none!important;} .st-subdept{display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid #E3E3E8;} .st-subdept-lab{font-family:"Barlow Condensed",sans-serif;font-weight:700; letter-spacing:1.2px;text-transform:uppercase;font-size:13px;color:#6B6B76; margin-right:2px;} .st-subdept-chip{display:inline-block;padding:7px 13px;border-radius:999px; border:1px solid #DCDCE1;background:#fff;color:#111;text-decoration:none; font-size:14px;line-height:1.2;white-space:nowrap;} .st-subdept-chip:hover,.st-subdept-chip:focus{border-color:#C01C23; color:#C01C23;} @media (max-width:600px){ .st-subdept{gap:7px;margin:0 0 14px;padding:0 0 12px; flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;} .st-subdept::-webkit-scrollbar{display:none;} .st-subdept-chip{font-size:13.5px;padding:6px 12px;} } @media (max-width:600px){ details.st-filter-collapse{margin:0 0 16px;border:1px solid #dcdce1; border-radius:12px;background:#fafafb;overflow:hidden;} details.st-filter-collapse > summary{list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between; padding:13px 16px;font-family:"Barlow Condensed",sans-serif; font-weight:700;letter-spacing:1.2px;text-transform:uppercase; font-size:14px;color:#111;} details.st-filter-collapse > summary::-webkit-details-marker{display:none;} details.st-filter-collapse > summary::after{content:"\002B";font-size:22px; line-height:1;color:#C01C23;font-family:Arial,sans-serif;} details.st-filter-collapse[open] > summary::after{content:"\2212";} details.st-filter-collapse .st-filters{border:0!important;border-radius:0!important; margin:0!important;background:transparent!important;padding:4px 14px 14px!important;} /* THE OPEN BAR SCROLLS INSTEAD OF PUSHING THE GRID OFF THE PHONE. Measured 2026-09-12 at 375px, iPhone UA, measure_fold.py: /product-category/tires/ bar 45px first card 276px 4 on screen /product-category/tires/?filter_tread-pattern=... bar 1299px first card 1530px 0 on screen The disclosure opening itself on a filter URL is correct and stays - a customer who filtered must see the state he is in. What was wrong is that tires carries EIGHT filter groups, so opening the bar opened all eight and spent 1,299px saying so. Zero products on the first screen for anyone who uses a filter, which is the customer who already told us what he wants. Wheels measured 167px on the same test with six groups, so this was never going to be caught by looking at wheels. 45vh leaves more than half the viewport for product, and the bar keeps its own scroll so nothing is unreachable. overscroll-behavior stops the page scrolling on behind it once the list bottoms out. */ details.st-filter-collapse[open] .st-filters{max-height:45vh;overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;} /* .term-description / .woocommerce-ordering / .woocommerce-result-count are owned by snippet 114 (mobile category intro clamp). Removed from here 2026-09-05 after a live collision - 115 owns ONLY the .st-filters collapse. */ } @media(max-width:900px){ button.menu-toggle,.ast-mobile-menu-buttons button, .main-header-menu-toggle{min-width:44px!important;min-height:44px!important;} }