/* 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. */
}


/* THE ROW. Two pills, 44px each - the tap-target floor snippet 161 set.
   An opened sheet drops to its own full-width row underneath, so the pills
   never squeeze to half a screen and the panel never reads as a column. */
.sas-tb-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
.sas-tb-bar > details{flex:1 1 calc(50% - 4px);min-width:0;order:0;}
.sas-tb-bar > details[open]{flex:1 1 100%;order:2;}
.sas-tb-s{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:8px;box-sizing:border-box;min-height:44px;
  padding:10px 14px;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;
  -webkit-tap-highlight-color:transparent;}
.sas-tb-s::-webkit-details-marker{display:none;}
.sas-tb-s::after{content:"\002B";font-size:20px;line-height:1;color:#C01C23;
  font-family:Arial,sans-serif;}
.sas-tb-d[open] > .sas-tb-s::after{content:"\2212";}
.sas-tb-d[open] > .sas-tb-s{border-bottom-left-radius:0;
  border-bottom-right-radius:0;border-bottom-color:transparent;}
.sas-tb-s:focus-visible{outline:2px solid #C01C23;outline-offset:1px;}
/* The panel. One frame round whatever is inside it. */
.sas-tb-p{border:1px solid #dcdce1;border-top:0;border-radius:0 0 12px 12px;
  background:#fafafb;padding:2px 12px 12px;}
.sas-tb-p > .st-filters{border:0;border-radius:0;margin:0;padding:4px 0 0;
  background:transparent;}
/* THE OPEN FILTER PANEL SCROLLS INSTEAD OF PUSHING THE GRID OFF THE PHONE.

   Measured 2026-09-12 at 375px, iPhone UA, measure_fold.py - the bar is the
   `filter + sort bar` block and firstCardTopPx is where the first product
   starts:

     /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
     /product-category/tires/?filter_load-index=126      bar 1609px   first card 1840px   0 on screen
     /product-category/wheels/?filter_bolt-pattern=...   bar  167px   first card  398px   2 on screen

   The panel opening itself when a filter is in the URL is right and stays: a
   customer who filtered has to see the state he is in. What was wrong is that
   tires carries EIGHT filter groups - load index alone is 51 chips - so
   opening the panel opened all eight and spent 1,609px saying so. Zero
   products on the first screen, for the one customer who has already said
   what he wants.

   Wheels measures 167px on the same test, so nothing about this was ever
   going to show up by looking at wheels.

   This was first tried as details.st-filter-collapse[open] .st-filters in
   snippet 115, deployed, and re-measured: still 1,299px. On tires and wheels
   THIS snippet has taken .st-filters into .sas-tb-p, so the selector in 115
   matches nothing here. That is why the rule lives in this file.

   45vh leaves over half the viewport for product and the panel keeps its own
   scroll, so no chip becomes unreachable. overscroll-behavior:contain stops
   the page behind it scrolling once the list bottoms out. */
.sas-tb-d[open] > .sas-tb-p{max-height:45vh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.sas-tb-p > form{margin:0;border:0;background:transparent;padding:0;}
/* In stock only and the sort dropdown, now inside the sheet: they get their
   own row above the chips rather than sitting on the heading. */
.sas-tb-p > .sas-controls{margin:6px 0 4px;padding:0 0 8px;
  border-bottom:1px solid #e8e8ec;}
/* The notice snippet 154 prints, once it has been tucked in here. Same
   colours, no frame of its own - the panel is the frame. */
.sas-tb-p--s > .sas-vfa{margin:6px 0 10px;border-radius:0 6px 6px 0;}
/* The bolt-pattern strip, once it is inside this panel. Its own bottom
   margin and the picked-pattern line both existed to separate it from the
   filter wall underneath, and the panel now does that. Scoped under
   .sas-tb-p--s so neither rule can reach the strip anywhere else: the
   element belongs to snippet 163 and not to this file. */
.sas-tb-p--s > .sas-wb{margin:0;}
.sas-tb-p--s > .sas-wbs{margin:4px 0 8px;}
/* THE COUNT, ON THE HEADING. Tabular figures so 7,976 and 668 line up, and
   a weight and a colour that read as a caption and not as a second title. */
.sas-tb-n{display:inline-block;font-family:Barlow,-apple-system,sans-serif;
  font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;
  color:#5a5a63;font-variant-numeric:tabular-nums;vertical-align:middle;
  margin-left:6px;white-space:nowrap;}
.sas-tb-n i{font-style:normal;color:#b4b4bc;}
@media (max-width:400px){.sas-tb-n{font-size:13px;}}


/* WHEELS ONLY - the finish + diameter row. One line that scrolls sideways on
   a phone, so it costs one 44px row and never pushes the grid further.
   Wraps on a desktop, where there is room. The -4px/4px margins are measured,
   not taste: at 0/10 the first wheel sat at 330px and the second row of
   cards started 6px below an 812px screen, so 4 on screen became 2. At
   -4/4 it is 320px and the second row is back on screen one.
   Swatches are painted, not
   photographs: a 22px dot has to read as the colour at a glance. */
.sas-wf{position:relative;display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;
  margin:-4px 0 4px;padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;}
.sas-wf::-webkit-scrollbar{display:none;}
.sas-wf-l{flex:0 0 auto;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#5a5a63;}
.sas-wf-c{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  box-sizing:border-box;min-height:44px;padding:0 10px 0 6px;border:1px solid #dcdce1;
  border-radius:22px;background:#fff;color:#111;text-decoration:none;
  font-family:Barlow,-apple-system,sans-serif;font-weight:600;font-size:14px;
  line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.sas-wf-c:hover{border-color:#111;color:#111;}
.sas-wf-c:focus-visible{outline:2px solid #C01C23;outline-offset:1px;}
.sas-wf-c b{font-weight:500;font-size:12px;color:#6b6b73;font-variant-numeric:tabular-nums;}
.sas-wf-c--d{padding:0 12px;}
.sas-wf-c--on,.sas-wf-c--on:hover{border-color:#111;background:#111;color:#fff;}
.sas-wf-c--on b{color:#d6d6db;}
.sas-wf-c--on::after{content:"\00D7";font-size:16px;color:#F1C329;margin-left:2px;}
.sas-wf-sep{flex:0 0 1px;align-self:stretch;margin:8px 4px;background:#dcdce1;}
.sas-wf-sw{flex:0 0 20px;display:inline-block;width:20px;height:20px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);background:#9a9aa2;}
.sas-wf-sw--bronze{background:radial-gradient(circle at 35% 30%,#d2a872,#8f6639 58%,#5c3f1f);}
.sas-wf-sw--black{background:radial-gradient(circle at 35% 30%,#4a4a4f,#111 60%);}
.sas-wf-sw--gunmetal{background:radial-gradient(circle at 35% 30%,#8a8e94,#4a4e54 58%,#2c2f33);}
.sas-wf-sw--polished{background:linear-gradient(135deg,#fdfdfd,#b9bdc3 45%,#f4f5f7 55%,#9ea3aa);}
.sas-wf-sw--machined{background:repeating-linear-gradient(90deg,#d9dce0 0 2px,#b3b7bd 2px 4px);}
.sas-wf-sw--chrome{background:linear-gradient(160deg,#ffffff,#8c939b 40%,#f2f4f6 52%,#5f666e);}
.sas-wf-sw--silver{background:radial-gradient(circle at 35% 30%,#f2f3f5,#c3c7cc 60%,#a2a7ad);}
.sas-wf-sw--titanium{background:radial-gradient(circle at 35% 30%,#b7bbc0,#868a90 60%,#6a6e74);}
.sas-wf-sw--gold{background:radial-gradient(circle at 35% 30%,#f3d58a,#c49a3c 60%,#8d6a22);}
.sas-wf-sw--red{background:#C01C23;}
.sas-wf-sw--green{background:radial-gradient(circle at 35% 30%,#7d8a55,#556b2f 60%,#3a4a1f);}
.sas-wf-sw--blue{background:#1F4E9A;}
.sas-wf-sw--white{background:#fff;}
@media (min-width:782px){.sas-wf{flex-wrap:wrap;overflow:visible;}}


.sas-ff{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.sas-ffd{min-width:0;}
/* 44px is the tap floor snippet 161 holds the rest of the phone to, and
   snippet 46 already sizes its own fold summary to it. Measured on the
   preview render before this rule: the pills came out 36px and the chips
   34px - every new control on the page under the floor. */
.sas-ff-s{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;box-sizing:border-box;
  padding:10px 14px;border:1px solid #dcdce1;border-radius:999px;background:#fff;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;font-size:14px;line-height:1;color:#111;white-space:nowrap;}
.sas-ff-s::-webkit-details-marker{display:none;}
.sas-ff-s::marker{content:"";}
.sas-ff-s::after{content:"\25BE";font-size:10px;color:#C01C23;}
.sas-ffd[open] > .sas-ff-s{border-color:#C01C23;color:#C01C23;}
.sas-ffd[open] > .sas-ff-s::after{content:"\25B4";}
.sas-ff-s > b{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;
  background:#C01C23;color:#fff;font-size:11px;line-height:18px;text-align:center;}
/* THE PANEL IS AN OVERLAY. Opening a facet must not move the grid: the whole
   reason six facets were shut behind one accordion is that expanded they are
   2,695px at 375px and put the first wheel 1,340px down. Absolute positioning
   buys every facet one tap away for zero layout pixels. */
.sas-ffp{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:6px;
  border:1px solid #dcdce1;border-radius:12px;background:#fff;
  box-shadow:0 12px 28px rgba(17,17,17,0.16);}
/* Each facet gets its OWN cap, not a shared one. Color is 842px and Brand is
   903px at 375px; 44vh is 357px on an 812px phone, so either one scrolls
   inside its own panel and neither can push the other off the screen.
   overscroll-behavior stops the page scrolling on behind it at the end. */
.sas-ffs{max-height:44vh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:12px 14px 8px;}
.sas-ffs .st-fg-opts{display:flex;flex-wrap:wrap;gap:8px;}
.sas-ffs .sas-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:0;padding:0;border:0;}
.sas-fff{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 14px;border-top:1px solid #ececf0;background:#fff;
  border-radius:0 0 12px 12px;}
.sas-ffp > .sas-ffs:last-child{border-radius:0 0 12px 12px;}
.sas-ff-go{flex:1 1 auto;text-align:center;background:#C01C23;color:#fff;
  min-height:48px;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;
  border-radius:999px;padding:12px 16px;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;font-size:15px;line-height:1;}
.sas-ff-clr{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:0 8px;color:#6a6a72;text-decoration:underline;font-size:13px;}
/* The active filters, directly above the first product. On
   ?filter_rim-size=20&filter_wheel-color=bronze the page went from 9,752
   wheels to 163 and said so nowhere a phone could see. */
.sas-fa{display:flex;gap:8px;align-items:center;margin:0 0 12px;}
.sas-fa-s{flex:1 1 auto;min-width:0;display:flex;gap:7px;overflow-x:auto;padding:2px 0;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sas-fa-s::-webkit-scrollbar{display:none;}
.sas-fa-c{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;
  min-height:44px;box-sizing:border-box;gap:8px;padding:9px 13px;
  border-radius:999px;background:#111;color:#fff;font-size:14px;font-weight:600;
  line-height:1;text-decoration:none;}
.sas-fa-c > i{font-style:normal;font-weight:700;color:#F5B301;font-size:16px;}
.sas-fa-c > em{font-style:normal;font-weight:700;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:#b9b9c2;margin-right:-3px;}
.sas-fa-x{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;
  min-height:44px;box-sizing:border-box;padding:9px 13px;border-radius:999px;
  border:1px solid #dcdce1;background:#fff;color:#C01C23;line-height:1;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;font-size:13px;text-decoration:none;}
/* The exact-pattern chips from 46, folded into the stud picker in 163, so
   the department asks its fitment question once. 176 already caps that panel
   at 45vh and 46 caps a folded group at 260px: no third scroller is added.
   NO APOSTROPHES IN THIS BLOCK - snippet 46 lost the storefront to one on
   2026-09-08 and the shared guard refuses them in any style block. */
.sas-ff-bp{margin-top:12px;padding-top:10px;border-top:1px solid #ececf0;}
/* Snippet 176 sizes the pills in .sas-tb-bar at half width each so two sit
   side by side. With the filter disclosure gone the bolt-pattern pill is on
   its own and should take the row. Scoped to exactly that arrangement. */
.sas-tb-bar:has(> details:only-of-type) > details{flex:1 1 100%;}
/* THE PHONE DRAWER, copied from kmcwheels.com and xdwheels.com at 375px
   (2026-09-23), used below 1024px. From 1024px the same drawer is the left
   rail (block below). NO APOSTROPHES IN THIS BLOCK. */
.sas-ff-open,.sas-ff-dh,.sas-ff-df,.sas-ff-da{display:none;}
.sas-ff-dr,.sas-ff-db,.sas-ffl,.sas-ffm{display:contents;}
@media (max-width:1023px){
  .sas-ff{flex-wrap:nowrap;gap:12px;align-items:stretch;}
  .sas-ff-open{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
    gap:8px;min-height:48px;box-sizing:border-box;padding:0 12px;border:1px solid #111;
    border-radius:0;background:#fff;color:#111;cursor:pointer;
    font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:1.1px;
    text-transform:uppercase;font-size:15px;line-height:1;}
  .sas-ff-open > b{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;
    background:#C01C23;color:#fff;font-size:12px;line-height:20px;text-align:center;}
  .sas-ff > .sas-ffd{flex:1 1 0;min-width:0;}
  .sas-ff > .sas-ffd > .sas-ff-s{width:100%;min-height:48px;justify-content:center;
    border-radius:0;border-color:#111;}
  .sas-ff-dr{display:none;}
  .sas-ff.is-open .sas-ff-dr{display:flex;flex-direction:column;position:fixed;
    top:0;right:0;bottom:0;left:0;z-index:100000;background:#fff;}
  .sas-ff-dh{display:flex;align-items:center;justify-content:space-between;
    padding:8px 8px 8px 16px;border-bottom:1px solid #e4e4e7;color:#111;
    font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;}
  .sas-ff-dx{min-width:44px;min-height:44px;border:0;background:none;color:#111;
    font-size:28px;line-height:1;cursor:pointer;}
  .sas-ff-db{display:block;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;}
  .sas-ff-db > .sas-ffd{display:block;border-bottom:1px solid #e4e4e7;}
  .sas-ff-db .sas-ff-s{display:flex;width:100%;justify-content:space-between;min-height:52px;
    padding:14px 16px;border:0;border-radius:0;background:#fff;}
  .sas-ff-db .sas-ffd[open] > .sas-ff-s{color:#111;}
  .sas-ff-db .sas-ffp{position:static;margin:0;border:0;border-radius:0;box-shadow:none;}
  .sas-ff-db .sas-ffs{max-height:none;overflow:visible;padding:0 16px 12px;}
  .sas-ff-db .sas-fff{display:none;}
  .sas-ff-db .st-fg-opts{display:block;}
  /* 46 makes .st-fg a shrink-to-fit column under 600px, so each row was as
     wide as its label and the count sat beside it, not at the right edge
     (measured 2026-09-24: 94-127px rows in a 375px drawer). */
  .sas-ff-db .st-fg{display:block;padding:0;border:0;}
  .sas-ff-db .st-fo,.sas-ff-db .st-fo.is-on{display:flex;align-items:center;gap:12px;
    min-height:44px;margin:0;padding:6px 0;border:0;border-radius:0;background:none;
    color:#111;font-size:15px;font-weight:400;text-decoration:none;}
  .sas-ff-db .st-fo::before{content:"";flex:0 0 auto;width:20px;height:20px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #111;
    background:#fff;color:#fff;font-size:14px;line-height:1;}
  .sas-ff-db .st-fo.is-on::before{content:"\2713";background:#111;}
  .sas-ff-db .st-fo > span,.sas-ff-db .st-fo.is-on > span{margin-left:auto;color:#6a6a72;font-size:13px;}
  .sas-ff-db .st-fo > .st-fx{display:none;}
  .sas-ff-da{display:block;}
  .sas-ff-dc{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:44px;padding:0 16px;color:#111;text-decoration:none;font-size:15px;}
  .sas-ff-dc > i{font-style:normal;font-size:20px;color:#C01C23;}
  .sas-ff-df{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #e4e4e7;background:#fff;}
  .sas-ff-df .sas-ff-go{flex:1 1 0;}
  .sas-ff-dclr{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;background:#111;color:#fff;text-decoration:none;
    font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:1.1px;
    text-transform:uppercase;font-size:15px;}
  .sas-fa{display:none;}
  html.sas-ff-lock,html.sas-ff-lock body{overflow:hidden;}
}
/* THE COMPUTER LAYOUT, copied from kmcwheels.com and xdwheels.com at 1440px
   (2026-09-24, docs/research/2026-09-24-wheel-filter-desktop-rail.md): one
   filter column 275px wide down the left, 45px gutter, the wheels to its
   right; one accordion row per facet with a rule under each, one open at a
   time; Active Filters as the first row when something is on; Sort top
   right above the grid; the rail scrolls with the page (not sticky). The
   finish, size and jump-to rows are not shown here - their facets are in
   the rail. NO APOSTROPHES IN THIS BLOCK. */
@media (min-width:1024px){
  .sas-ffl{display:grid;grid-template-columns:275px minmax(0,1fr);column-gap:45px;
    align-items:start;position:relative;padding-top:60px;}
  .sas-ffm{display:block;min-width:0;}
  .sas-ffl .sas-wf,.sas-ffl .st-subdept{display:none;}
  .sas-ff{position:static;display:block;margin:0;}
  .sas-ff-dr{display:block;}
  .sas-ff-db{display:block;border-top:1px solid #d9d9de;}
  .sas-ff-da{display:block;}
  .sas-ff-db > .sas-ffd{display:block;border-bottom:1px solid #d9d9de;}
  .sas-ff-db .sas-ff-s{display:flex;width:100%;justify-content:space-between;min-height:55px;
    padding:14px 0;border:0;border-radius:0;background:none;font-size:16px;}
  .sas-ff-db .sas-ffd[open] > .sas-ff-s{color:#111;}
  .sas-ff-db .sas-ff-s > b{margin-right:auto;}
  .sas-ff-db .sas-ffp{position:static;margin:0;border:0;border-radius:0;box-shadow:none;background:none;}
  .sas-ff-db .sas-ffs{max-height:420px;overflow-y:auto;overscroll-behavior:contain;
    padding:0 6px 14px 0;}
  .sas-ff-db .sas-fff{display:none;}
  .sas-ff-db .st-fg-opts{display:block;}
  .sas-ff-db .st-fo,.sas-ff-db .st-fo.is-on{display:flex;align-items:center;gap:12px;
    min-height:38px;margin:0;padding:4px 0;border:0;border-radius:0;background:none;
    color:#111;font-size:15px;font-weight:400;text-decoration:none;}
  .sas-ff-db .st-fo:hover{color:#C01C23;}
  .sas-ff-db .st-fo::before{content:"";flex:0 0 auto;width:20px;height:20px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #111;
    background:#fff;color:#fff;font-size:14px;line-height:1;}
  .sas-ff-db .st-fo.is-on::before{content:"\2713";background:#111;}
  .sas-ff-db .st-fo > span,.sas-ff-db .st-fo.is-on > span{margin-left:auto;color:#6a6a72;font-size:13px;}
  .sas-ff-db .st-fo > .st-fx{display:none;}
  .sas-ff-dc{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:38px;padding:0;color:#111;text-decoration:none;font-size:15px;}
  .sas-ff-dc > i{font-style:normal;font-size:20px;color:#C01C23;}
  .sas-ff-sort{position:absolute;top:0;right:0;}
  .sas-ff-sort > .sas-ffp{left:auto;right:0;min-width:340px;max-width:min(560px,92vw);}
  .sas-fa{margin:0 0 16px;}
  /* the grid beside the rail: four across from 1280px, four beside
     the rail at 1440px; three below that, or a fourth card is
     cut off at 1024px. */
  .woocommerce .sas-ffl ul.products.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (min-width:1280px){
  .woocommerce .sas-ffl ul.products.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}


@media(max-width:900px){
  button.menu-toggle,.ast-mobile-menu-buttons button,
  .main-header-menu-toggle{min-width:44px!important;min-height:44px!important;}
}