/* Stinger page bundle */

.hm{--k:#111;--r:#C01C23;--y:#F1C329;--g:#F5F6F8;--ln:#E4E4E7;--tx:#26262B;--mu:#5d5d68;
  font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--tx);background:var(--g);}
.hm *{box-sizing:border-box;}
.hm h2,.hm h3,.hm p,.hm ul,.hm ol{margin-top:0!important;}
.hm ul,.hm ol{margin-left:0!important;}
.hm a,.hm a:hover,.hm a *{text-decoration:none!important;}
.hm .hm-set-items li a:hover .hm-set-l{text-decoration:underline!important;}
.hm .hm-who a{text-decoration:underline!important;}
/* Astra gives #primary a 60px top and bottom margin on desktop, and its empty
   below-footer row (the copyright is hidden by snippet 125) is 101px of black. */
body.home #primary{margin-top:0!important;margin-bottom:0!important;}
body.home #colophon .site-below-footer-wrap{display:none!important;}
.hm-cond,.hm-h1,.hm-h2,.hm-job-name,.hm-dept-name,.hm-set-name,.hm-set-kind,.hm-tag,.hm-card-t,.hm-pick-tab,.hm-ship h2{
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:800;}

#sas-vf-bar{display:none!important;}
#sas-cv-bar.hm-cv{position:sticky;top:56px;z-index:999;display:flex;align-items:center;gap:8px;
  min-height:46px;margin:0;padding:4px 8px 4px 12px;background:#F1C329;color:#111;
  font-size:15px;line-height:1.25;box-shadow:0 2px 6px rgba(0,0,0,.18);border:0;cursor:pointer;
  font-family:Inter,system-ui,sans-serif;}
#sas-cv-bar.hm-cv[hidden]{display:none!important;}
#sas-cv-bar.hm-cv .sas-cv-l{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#sas-cv-bar.hm-cv .sas-cv-l b{color:#111;font-weight:800;}
#sas-cv-bar.hm-cv .sas-cv-change{flex:0 0 auto;min-height:36px;margin:0;padding:6px 14px!important;border:0!important;
  border-radius:5px!important;background:#111!important;color:#F1C329!important;font-size:14px!important;
  font-weight:800!important;line-height:1.2!important;text-transform:none!important;box-shadow:none!important;}
#sas-cv-bar.hm-cv .sas-cv-x{flex:0 0 auto;width:34px;min-height:34px;margin:0;padding:0!important;border:0!important;
  background:transparent!important;color:#111!important;font-size:22px!important;line-height:1!important;box-shadow:none!important;}

/* HERO: photo, headline and picker are ONE black section. Nothing overlaps
   with a negative margin, so no page ground can show between them. */
.hm-hero{background:#111;color:#fff;position:relative;}
.hm-hero-ph{display:block;position:relative;line-height:0;background:#2a2622;}
.hm-hero-ph img{display:block;width:100%;height:auto;aspect-ratio:750/600;object-fit:cover;}
.hm-hero-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(17,17,17,0) 0%,#111 100%);}
.hm-hero-tx{position:relative;z-index:2;margin-top:-44px;padding:0 16px 14px;}
.hm-eyebrow{margin:0 0 6px;color:#F1C329;font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:11.5px;}
.hm-h1{margin:0;color:#fff;font-size:46px;line-height:.88;letter-spacing:.005em;text-transform:uppercase;}
.hm-h1 span{color:#C01C23;}
.hm-pick{background:#111;padding:6px 12px 14px;scroll-margin-top:110px;}
.hm-pick-card{background:#1b1b1f;border-radius:8px;overflow:hidden;border:1px solid #2c2c32;}
.hm-pick-tab{display:inline-block;margin:0;background:#C01C23;color:#fff;font-size:21px;letter-spacing:.03em;
  text-transform:uppercase;padding:8px 38px 7px 14px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);}
.hm-pick-body{padding:12px 12px 12px;}
.hm .sas-pick-lead{display:none;}
.hm-intro{background:#111;color:#d7d7de;padding:4px 16px 20px;border-bottom:4px solid #C01C23;}
.hm-lede{margin:0 0 10px;font-size:15px;line-height:1.45;}
.hm-links{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;}
.hm-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border:2px solid #F1C329;border-radius:5px;
  color:#fff;font-weight:700;font-size:15px;}
.hm-links a:hover{background:#F1C329;color:#111;}
.hm-who{margin:0;font-size:13px;line-height:1.5;color:#a6a6b0;}
.hm-who b{color:#e9e9ee;font-weight:700;}
.hm-who a{color:#F1C329;font-weight:700;white-space:nowrap;}

.hm-sec{padding:26px 0 24px;}
.hm-in{max-width:1180px;margin:0 auto;padding:0 14px;}
.hm-h2{margin:0 0 4px;font-size:32px;line-height:.95;color:#111;text-transform:uppercase;letter-spacing:.005em;}
.hm-h2 span{color:#C01C23;}
.hm-sub{margin:0 0 14px;font-size:14px;line-height:1.4;color:var(--mu);}
.hm-dark{background:#111;}
.hm-dark .hm-h2{color:#fff;}
.hm-dark .hm-sub{color:#a6a6b0;}

/* JOBS: a 2-up grid of photo cards, label under the photo, never on it. */
.hm-job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.hm-job{display:flex;flex-direction:column;background:#1b1b1f;border-radius:6px;overflow:hidden;color:#fff;
  border:1px solid #2c2c32;}
.hm-job-ph{display:block;line-height:0;background:#2a2a30;}
.hm-job-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.hm-job-tx{display:block;padding:9px 10px 11px;border-top:3px solid #C01C23;flex:1 1 auto;}
.hm-job-name{display:block;font-size:21px;line-height:.95;text-transform:uppercase;color:#fff;}
.hm-job-sub{display:block;margin-top:5px;font-size:12px;line-height:1.3;color:#b9b9c4;}
.hm-job:hover .hm-job-name{color:#F1C329;}
.hm-job:hover .hm-job-tx{border-top-color:#F1C329;}

/* DEPARTMENTS: the eight approved aisles, two to a row on a phone, all of
   them on screen by scrolling down. Until 2026-09-19 this was a sideways
   swipe of fourteen 118px cards, which put half the store off the right-hand
   edge behind a gesture nobody is told about; the preview Omar approved lays
   them out as a plain two-column grid, so that is what this is now. */
.hm-dept-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 0 4px;}
.hm-dept{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);
  border-radius:6px;overflow:hidden;color:#111;}
.hm-dept-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;padding:8px;line-height:0;}
/* Fill the box. The img carries WordPress width/height attributes from the
   woocommerce_thumbnail size (117px on this store), so with width:auto it
   laid out at 117px inside a 167px card and left a white halo round every
   department photo. The file behind it really is 300x300, so filling the
   box downscales - it never upscales. */
.hm-dept-ph img{width:100%;height:100%;object-fit:contain;}
.hm-dept-name{display:block;padding:6px 8px 0;font-size:16px;line-height:.98;text-transform:uppercase;color:#111;
  border-top:3px solid #C01C23;min-height:40px;}
.hm-dept-n{display:block;padding:2px 8px 8px;font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums;}
.hm-dept:hover{border-color:#F1C329;}
/* The departments that are not one of the eight aisles: named in plain text,
   never hidden. */
.hm-more{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:10px 0 0;font-size:14px;color:var(--mu);}
.hm-more span{color:var(--mu);}
.hm-more a{color:#111;text-decoration:underline;text-underline-offset:3px;padding:8px 0;}
.hm-more a:hover{color:#C01C23;}

/* PRICE TAG, the same dark tag the shop cards carry. */
.hm-tag{position:absolute;top:0;left:0;z-index:3;display:inline-flex;align-items:baseline;gap:5px;margin:0;
  padding:6px 9px 5px;background:#26262B;color:#fff;border-radius:6px 0 6px 0;font-size:22px;line-height:1;white-space:nowrap;}
.hm-tag .woocommerce-Price-amount,.hm-tag .woocommerce-Price-currencySymbol{color:#fff!important;font:inherit!important;}
.hm-tag small{font-family:Inter,system-ui,sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:#e4e4e7;}

/* SETS: cards that swipe on a phone, three across on a desktop. */
.hm-set-row{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;padding:2px 14px 12px;
  margin:0 -14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:14px;}
.hm-set{scroll-snap-align:start;background:#fff;border:1px solid var(--ln);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;}
.hm-set-ph{position:relative;display:flex;gap:0;background:#fff;border-bottom:1px solid #eeeef1;padding:34px 8px 8px;}
.hm-set-ph a{flex:1 1 0;display:flex;align-items:center;justify-content:center;line-height:0;padding:4px;}
.hm-set-ph img{width:100%;height:auto;max-height:150px;object-fit:contain;}
.hm-set-ph--3 img{max-height:96px;}
.hm-set-bd{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1 1 auto;}
.hm-set-kind{margin:0 0 3px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#C01C23;}
.hm-set-name{margin:0 0 8px;font-size:23px;line-height:.95;text-transform:uppercase;color:#111;}
.hm-set-items{list-style:none;margin:0 0 8px;padding:0;}
.hm-set-items li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;
  border-top:1px solid #f0f0f3;font-size:13px;line-height:1.3;}
.hm-set-items li a{color:#26262B;font-weight:600;}
.hm-set-items li a:hover{text-decoration:underline;}
.hm-set-q{color:#111;font-weight:800;}
.hm-spec{display:inline-block;margin-top:2px;background:#EFEFF2;color:#111;border-radius:3px;padding:1px 6px;
  font-size:11.5px;font-weight:700;white-space:nowrap;}
.hm-set-items b{flex:0 0 auto;font-weight:800;color:#111;white-space:nowrap;}
.hm-set-items b small{font-weight:600;color:var(--mu);}
.hm-set-fine{margin:auto 0 0;font-size:12.5px;line-height:1.45;color:var(--mu);}
.hm-set-for{margin:0 0 6px;padding:7px 9px;background:#FFF6D6;border-left:4px solid #F1C329;border-radius:3px;
  font-size:12.5px;line-height:1.4;color:#26262B;}
.hm .hm-addset{display:block;width:100%;min-height:48px;margin:4px 0 10px;padding:10px 14px!important;border:0!important;
  border-radius:5px!important;background:#C01C23!important;color:#fff!important;cursor:pointer;
  font:800 21px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.03em;}
.hm .hm-addset:hover{background:#111!important;}
.hm .hm-addset:disabled{background:#3A3A40!important;cursor:default;}
.hm-set-wait{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:#26262B;}
.hm-addset-msg,.hm-set-oos{margin:0 0 10px;font-size:13px;line-height:1.4;color:#8a1016;font-weight:600;}
.hm-addset-msg a{color:#8a1016;text-decoration:underline!important;}

/* TIRE SHELF */
.hm-shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:158px;gap:10px;overflow-x:auto;padding:2px 14px 12px;
  margin:0 -14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-padding-left:14px;}
.hm-card{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);
  border-radius:6px;overflow:hidden;color:#111;}
.hm-card-ph{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;
  padding:30px 8px 8px;line-height:0;}
.hm-card-ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.hm-card-t{display:block;padding:8px 9px 10px;font-size:17px;line-height:1;color:#111;border-top:1px solid #f0f0f3;}
.hm-card:hover{border-color:#F1C329;}

/* HOW IT SHIPS */
.hm-ship{background:#111;color:#e2e2e8;padding:26px 0 28px;}
.hm-ship h2{margin:0 0 12px;font-size:32px;line-height:.95;color:#fff;text-transform:uppercase;}
.hm-ship h2 span{color:#C01C23;}
.hm-steps{list-style:none;margin:0 0 14px;padding:0;counter-reset:hm;}
.hm-steps li{position:relative;counter-increment:hm;padding:0 0 12px 44px;font-size:15px;line-height:1.45;color:#d7d7de;}
.hm-steps li::before{content:counter(hm);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:#C01C23;color:#fff;font:800 17px/30px "Barlow Condensed","Arial Narrow",Arial,sans-serif;text-align:center;}
.hm-steps b{color:#fff;}
.hm-fine{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:#b9b9c4;}
.hm-call{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:6px 0 14px;padding:0 22px;
  background:#C01C23;color:#fff!important;border-radius:5px;font-weight:800;font-size:16px;}
.hm-call:hover{background:#F1C329;color:#111!important;}

@media (min-width:700px){
  .hm-hero{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:520px;}
  .hm-hero-ph{grid-column:2;grid-row:1;}
  .hm-hero-ph img{aspect-ratio:auto;height:520px;object-position:62% 55%;}
  .hm-hero-ph::after{top:0;height:auto;background:linear-gradient(90deg,#111 0%,rgba(17,17,17,0) 22%),
    linear-gradient(180deg,rgba(17,17,17,0) 78%,#111 100%);}
  .hm-hero-tx{grid-column:1;grid-row:1;margin:0;display:flex;flex-direction:column;justify-content:center;
    padding:0 28px 60px max(24px,calc((100vw - 1180px)/2 + 14px));}
  .hm-h1{font-size:72px;}
  .hm-eyebrow{font-size:13px;}
  .hm-pick{padding:0 24px 18px;margin-top:-64px;position:relative;z-index:3;background:#111;}
  .hm-pick-card{max-width:820px;margin:0 auto;box-shadow:0 14px 34px rgba(0,0,0,.35);}
  .hm-intro{text-align:center;padding:10px 24px 24px;}
  .hm-lede{font-size:17px;max-width:680px;margin:0 auto 12px;}
  .hm-links{justify-content:center;}
  .hm-in{padding:0 24px;}
  .hm-h2,.hm-ship h2{font-size:42px;}
  .hm-job-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .hm-job-name{font-size:26px;}
  .hm-job-sub{font-size:13px;}
  /* Eight aisles, four to a row: the preview's desktop grid exactly. */
  .hm-dept-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:2px 0 0;}
  .hm-set-row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;
    margin:0;padding:2px 0 0;}
  .hm-shelf-row{grid-auto-columns:200px;margin:0;padding:2px 0 12px;}
  .hm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .hm-steps li{padding:40px 0 0;}
}
@media (min-width:900px){ #sas-cv-bar.hm-cv{top:66px;justify-content:center;} #sas-cv-bar.hm-cv .sas-cv-l{flex:0 1 auto;} }


.sas-cf{display:block;margin:.15rem 0 .35rem;font-size:.74rem;line-height:1.3;
  font-weight:600;letter-spacing:.01em}
.sas-cf--yes{color:#1c6b34}
.sas-cf--part{color:#7a5200}
.sas-cf--cond{color:#7a5200}
.sas-cf--uni{color:#41506b}
.sas-cf--bulb{color:#41506b}
.sas-cf--bulbapps{margin:-.5rem 0 .8rem;font-size:.8rem;font-weight:500;color:#41506b}
.sas-cf--no{color:#6b6b6b;font-weight:500}
.sas-cf--pdp{margin:.4rem 0 .8rem;font-size:.9rem}
.sas-cf-more{margin:-.5rem 0 .8rem;font-size:.8rem}
.sas-cf-more summary{cursor:pointer;color:#7a5200;font-weight:600}
.sas-cf-more .sas-cf{font-weight:500}
.sas-cf--union{margin:-.5rem 0 .8rem;font-size:.78rem;line-height:1.4;
  font-weight:500;color:#7a5200;max-width:44ch}
@media (max-width:600px){.sas-cf{font-size:.72rem}
  .sas-cf--union{font-size:.76rem;max-width:none}}


:root{
  --sas-red:#C01C23; --sas-yellow:#F1C329; --sas-ink:#111;
  --sas-body:#26262B; --sas-muted:#495057; --sas-line:#E4E4E7;
  --sas-bg:#F5F6F8; --sas-green:#1a7f37;
}

/* ---- type: 16px floor, and a real contrast floor for small text ---- */
body,.woocommerce{color:var(--sas-body);}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title{color:var(--sas-ink);}
.woocommerce .price,.woocommerce-Price-amount{color:var(--sas-ink);}

/* ---- the buy action owns the accent, and nothing else does ---- */
.woocommerce a.button,.woocommerce button.button,
.woocommerce #respond input#submit,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button{
  background:var(--sas-red)!important;color:#fff!important;
  border:0!important;border-radius:4px!important;
  font-weight:700!important;font-size:16px!important;
  min-height:48px!important;padding:13px 22px!important;
  line-height:1.2!important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,.wc-block-components-button:hover{
  background:var(--sas-yellow)!important;color:var(--sas-ink)!important;
}

/* ---- product card: photo, title+size, price, set of 4, stock, buy ---- */
.woocommerce ul.products li.product{
  background:#fff;border:1px solid var(--sas-line);border-radius:6px;
  padding:12px;text-align:left;
}
.woocommerce ul.products li.product img{
  border-radius:4px;margin-bottom:10px;aspect-ratio:1/1;object-fit:contain;
  background:#fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px!important;line-height:1.35!important;font-weight:700!important;
  padding:0!important;margin:0 0 6px!important;
}
.woocommerce ul.products li.product .price{
  display:block;font-size:22px!important;font-weight:800!important;
  color:var(--sas-ink)!important;margin:0!important;
}
.woocommerce ul.products li.product .price del{display:none;}
.sas-set4{
  display:block;font-size:14px;color:var(--sas-muted);
  margin:2px 0 10px;font-weight:600;
}
.sas-set4-single{font-size:16px;margin:-6px 0 14px;}

/* ---- noise removal: wishlist needs accounts nobody has ---- */
.tinv-wraper,.tinvwl-loop-button-wrapper,.tinvwl-after-add-to-cart,
.ast-woo-product-category,
.woocommerce ul.products li.product .star-rating,
.woocommerce div.product .woocommerce-product-rating{display:none!important;}

/* ---- stock line: one state, one string, colour is not the only signal ---- */
.woocommerce div.product p.stock.in-stock{
  color:var(--sas-green);font-weight:700;font-size:16px;
}
.woocommerce div.product p.stock.out-of-stock{
  color:var(--sas-red);font-weight:700;font-size:16px;
}
/* The BACKORDER line. snippet_backorder_total_wait.py emits
   <p class="stock stinger-backorder">, and its own comment says this reuses
   "the existing .stock.stinger-backorder red, so nothing new is themed" -
   but no rule anywhere matched that class, so it fell through to
   WooCommerce's default #77a464: 2.89:1 on white, the worst contrast measured
   anywhere on this store. Not a rare state either - it is the availability
   line on every dropshipped wheel and accessory.

   available-on-backorder is WooCommerce's own class for the same state and is
   included so a product that bypasses the snippet is not left behind.

   Same green as in-stock (#1a7f37, 5.08:1). This is a CONTRAST fix, not a
   decision about whether a backorder should read green - that is Omar's. */
.woocommerce div.product p.stock.stinger-backorder,
.woocommerce div.product p.stock.available-on-backorder{
  color:var(--sas-green);font-weight:700;font-size:16px;
}

/* ---- product page: price high, add-to-cart reachable ---- */
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-size:30px!important;font-weight:800!important;color:var(--sas-ink)!important;
  margin-bottom:6px!important;
}
.woocommerce div.product .quantity .qty{
  min-height:48px;font-size:17px;text-align:center;
}

/* ---------------------------------------------------------------------
   DARK SURFACES vs. THE ONE GLOBAL LINK RULE.  Added 2026-09-08 after a
   contrast sweep of the rendered site (apps/site-admin/src/contrast_sweep.py).

   The Customizer's Additional CSS - which is emitted AFTER every snippet -
   carries two unqualified lines written for links on white paper:

       a:hover { color: #111111; }
       .site-title a, .site-header .ast-site-identity a { color:#111111!important; }

   This store is not white paper. The header bar, the homepage department
   tiles and the footer are all #111. `a:hover` is (0,1,1), which TIES the
   `.class a` rules every dark panel here uses, and the later sheet wins a
   tie - so ink lands on ink. Measured on the live page, not inferred:

       .site-title a          at rest   #111 on #111        1.00 : 1
       .sas-pick-note a       on hover  #111 on #111        1.00 : 1

   Fixed as colour only, and per surface, because a link that vanishes under
   the cursor is not a style preference. Yellow is the brand's own light
   accent and is already the hover colour the footer and nav use.
   --------------------------------------------------------------------- */
.sas-pick-note a:hover,.sas-pick-note a:focus{color:var(--sas-yellow)!important;}
.stinger-pickup-note a:hover,.stinger-pickup-note a:focus{
  color:var(--sas-yellow)!important;
}

/* ---------------------------------------------------------------------
   THE SITE TITLE, which was the loudest thing the sweep found.

   "Stinger Auto Sales" is a 26px link in the header of EVERY page, painted
   #111 on the #111 bar: 1.00:1. Present in the DOM, announced by screen
   readers, clickable, occupying 200x31 of layout beside the logo - and
   invisible. The only way to see it was to drag-select it, which is the
   same gesture that started this whole sweep.

   Painted white first, and that was wrong: at 375px it stacked to THREE
   lines beside the logo and made the phone header a third taller, on the
   surface most customers arrive on. Seen in a screenshot, then undone.

   The wordmark in the logo already says the name, so the title was never
   meant to be seen - it was meant to be absent. It is hidden the way text
   is supposed to be hidden: out of the flow, off-screen, still in the
   accessibility tree. Same appearance the header has always had, minus the
   phantom click target and the invisible ink.

   To bring it back visibly, delete this block - do not set it to #111.
   --------------------------------------------------------------------- */
.site-header .ast-site-identity .site-title{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* ---- breadcrumbs: #888 on white is 3.54:1, and this file's own stated
   floor for small text is 7:1. --sas-muted is 7.6:1 and is already what the
   result count and stat lines use. ---- */
.woocommerce-breadcrumb,.woocommerce-breadcrumb a{color:var(--sas-muted)!important;}

/* The quantity stepper was the only keyboard stop on the whole product page
   with no visible focus state - Astra clears the outline on WooCommerce
   inputs and replaces it with a thin dotted border the field already has, so
   tabbing into it changed nothing on screen. */
.woocommerce .quantity input[type="number"]:focus,
.woocommerce-js .quantity input[type="number"]:focus{
  outline:2px solid var(--sas-red)!important;outline-offset:1px;
}

/* ---- shop header ---- */
.woocommerce-products-header__title{
  font-size:26px!important;margin-bottom:6px!important;color:var(--sas-ink);
}
.woocommerce .woocommerce-result-count{color:var(--sas-muted);font-size:15px;}

/* ---- phone ---- */
@media(max-width:600px){
  .woocommerce ul.products li.product .price{font-size:20px!important;}
  .woocommerce div.product p.price,.woocommerce div.product span.price{
    font-size:26px!important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:15px!important;
  }
  .woocommerce a.button,.woocommerce button.button{width:100%;text-align:center;}
}

/* =====================================================================
   TAP TARGETS.  Added 2026-09-08 after contrast_sweep.py measured the
   rendered store at 375px and found nine distinct controls under the
   44x44 minimum (WCAG 2.5.5 / Apple HIG). The docstring at the top of
   this file has claimed "48px minimum touch targets" since the day it
   was written; nothing ever measured it, and the real numbers were:

       hamburger  .main-header-menu-toggle      40 x 40
       top bar    a.st-tb-phone  (tel: link)   104 x 21
       top bar    a.st-tb-item   (map link)    140 x 19
       pagination a.page-numbers                36 x 36
       filters    a.st-fo                       ~75 x 33
       filters    a.sas-toggle                 108 x 31
       size form  .st-sf label                 301 x 20
       size form  .st-sf button                301 x 35
       card title .ast-loop-product__link      144 x 39

   The hamburger is the ONLY route to the menu on a phone, and the tel:
   link is how somebody calls to order. Both are grown by hit area, not
   by visual size, because the last attempt to fix a header defect here
   made the phone header a third taller and had to be reverted.

   THE HEADER MUST STILL MEASURE 141px AT 375px. It does - proved by
   rendering it, not by reading this. See the commit for the numbers.
   --------------------------------------------------------------------- */

/* --- the hamburger. A transparent ::after centred on the button gives it
   a 44x44 hit area while the button keeps painting at 40x40. Absolutely
   positioned, so it takes part in no layout and the header height cannot
   move. Astra's toggle uses an inline SVG for the icon and sets no
   ::after content, so this pseudo-element is free to take. --- */
.main-header-menu-toggle{position:relative;}
.main-header-menu-toggle::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;
}

/* --- the top bar. Four items in a 56px strip: two anchors (phone, map)
   and two spans (hours, "Hablamos Espanol"). Only the ANCHORS are tap
   targets. At 375px the strip wrapped to two rows of ~20px each; the fix
   is one row 44px tall instead of two rows of 20, which costs exactly
   nothing: 6 + 44 + 6 = 56, the height it already was.

   `white-space:normal` is the load-bearing line. The original rule sets
   `white-space:nowrap` on every item, which is why the strip wrapped at
   all - the map link could not narrow below its 140px single line. Let
   it wrap to two lines inside its own 44px box and all three visible
   items fit one row in 375px with no horizontal scroll.

   The phone keeps `nowrap`: a phone number broken across two lines is
   harder to read, and at 104px it fits without help.

   .st-tb-hours is re-hidden explicitly. It is display:none under 600px
   from the original rule, and a blanket `display:flex` on .st-tb-item
   brought it back and pushed the document to 504px wide. --- */
@media(max-width:480px){
  .stinger-topbar{
    padding:6px 8px!important;gap:0 8px!important;
    flex-wrap:nowrap!important;align-items:stretch!important;
  }
  .stinger-topbar .st-tb-item{
    white-space:normal!important;line-height:1.15!important;
    text-align:center;min-width:0;
  }
  .stinger-topbar a.st-tb-item{
    display:flex!important;align-items:center!important;
    justify-content:center!important;min-height:44px!important;
  }
  .stinger-topbar a.st-tb-phone{white-space:nowrap!important;flex:0 0 auto!important;}
  .stinger-topbar span.st-tb-es{display:flex!important;align-items:center!important;}
  .stinger-topbar .st-tb-hours{display:none!important;}
}

/* --- pagination. 36x36 squares; a customer paging through 536 pages of
   tires on a phone is the single most repeated tap on the site. --- */
.woocommerce-pagination .page-numbers li a.page-numbers,
.woocommerce-pagination .page-numbers li span.page-numbers{
  min-width:44px!important;min-height:44px!important;
  display:inline-flex!important;align-items:center!important;
  justify-content:center!important;
}

/* --- the rest, all in the page body where growing them costs no chrome:
   the size-search form, the archive filter chips, the in-stock toggle and
   the product-card title link. --- */
.st-sf label{display:flex;align-items:center;min-height:44px;}
.st-sf .st-sf-row button{min-height:44px!important;}
.st-filters .st-fo{
  min-height:44px!important;display:inline-flex!important;align-items:center!important;
}
a.sas-toggle{
  min-height:44px!important;display:inline-flex!important;align-items:center!important;
}
.ast-loop-product__link{display:block;min-height:44px;}

/* --- and the three WooCommerce templates ship under-size, found on the
   second pass once the nine above stopped crowding the report:
     .woocommerce-tabs li a                  335 x 39   product page tabs
     .wp-block-button__link.add_to_cart      106 x 38   cart-page cross-sells
     .woocommerce-product-gallery__trigger    36 x 36   the fullscreen icon
   The gallery trigger is the worst of them: a 36px circle sitting on top of
   the photo, which is the first thing a thumb lands on. --- */
.woocommerce-tabs ul.tabs li a{
  display:flex!important;align-items:center!important;min-height:44px!important;
}
.wc-block-grid__product-add-to-cart a.wp-block-button__link,
.woocommerce a.button.add_to_cart_button{min-height:44px!important;}
.woocommerce-product-gallery__trigger{
  min-width:44px!important;min-height:44px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}


.sas-picker{max-width:760px;margin:0 auto;text-align:left;}
.sas-pick-lead{color:#F1C329;font-weight:700;font-size:17px;margin:0 0 14px;
  text-align:center;}
.sas-pick-crumbs{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 14px;color:#fff;font-weight:700;font-size:15px;flex-wrap:wrap;}
.sas-pick-reset{background:none;border:0;color:#F1C329;text-decoration:underline;
  cursor:pointer;font-size:14px;padding:6px;}
.sas-picker .sas-pick-reset{background:none!important;color:#F1C329!important;
  border:0!important;min-height:32px;}
.sas-picker .sas-pick-reset:hover,.sas-picker .sas-pick-reset:focus{
  background:none!important;color:#fff!important;}
.sas-pick-q{color:#fff;font-weight:700;font-size:16px;margin:0 0 10px;
  text-align:center;}
.sas-pick-opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.sas-pick-btn{background:#fff;color:#111;border:0;border-radius:5px;
  font-weight:700;font-size:16px;padding:14px 16px;min-height:48px;
  cursor:pointer;flex:0 1 auto;}
.sas-pick-btn:hover{background:#F1C329;}
/* The Additional CSS box forces every button element to red with white text
   and the important flag on it, which turned the year list into nineteen red
   calls to action. A class selector outranks a bare element selector, so
   these hold. Red is reserved for things that actually buy something. */
.sas-picker .sas-pick-btn{background:#fff!important;color:#111!important;
  border:0!important;}
.sas-picker .sas-pick-btn:hover,.sas-picker .sas-pick-btn:focus{
  background:#F1C329!important;color:#111!important;}
.sas-picker .sas-pick-btn:focus-visible{outline:3px solid #F1C329;
  outline-offset:2px;}
.sas-pick-years{gap:8px;}
.sas-pick-note{color:#c9c9d1;font-size:14px;margin:14px 0 0;text-align:center;
  line-height:1.5;}
.sas-pick-note a{color:#F1C329;font-weight:700;}
.sas-pick-loading{color:#c9c9d1;font-size:15px;}
.sas-pick-sizes{display:flex;flex-direction:column;gap:8px;}
.sas-size-card{display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:#fff;color:#111;text-decoration:none;border-radius:5px;
  padding:15px 18px;min-height:48px;}
/* The theme underlines links, and a text-decoration set on an ancestor is
   DRAWN THROUGH its descendants - a child cannot cancel it. So the run-flat
   notice came out as four underlined lines nobody would read, and setting
   text-decoration:none on the child did nothing. It has to be killed on the
   anchor itself, and the theme's rule loads after this one, so !important is
   the only thing that holds. The card is a link; its text is not link text. */
.sas-size-card,.sas-size-card:hover,.sas-size-card:focus,
.sas-size-card *{text-decoration:none!important;}
.sas-size-card:hover{background:#F1C329;}
.sas-size-card--order{background:#2a2a30;color:#f2f2f2;}
.sas-size-card--order:hover{background:#2a2a30;}
.sas-size-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
.sas-size-name{font-weight:800;font-size:18px;letter-spacing:.3px;}
/* The run-flat substitution notice. Dark text on the white card, sized to be
   read rather than skimmed past - this is the sentence that stops the
   substitution being a silent one. */
.sas-size-swap{font-size:13px;font-weight:600;line-height:1.5;color:#4a3c00;
  max-width:56ch;}
.sas-size-card:hover .sas-size-swap{color:#3a2f00;}
.sas-size-go{font-size:14px;font-weight:700;color:#C01C23;white-space:nowrap;}
.sas-size-card--order .sas-size-go{color:#F1C329;}
@media(max-width:640px){
  .sas-pick-btn{flex:1 1 44%;text-align:center;font-size:15px;padding:14px 8px;}
  /* Nineteen years at 2-across and 48px is 530px of buttons, and it was the
     bulk of a 1,277px hero. Four across at the 44px AA floor is a fifth of
     that and still comfortably tappable. */
  .sas-pick-years .sas-pick-btn{flex:0 0 auto;width:calc(25% - 6px);
    padding:11px 2px;font-size:15px;min-height:44px;letter-spacing:-.2px;}
  .sas-pick-lead{font-size:16px;margin:0 0 10px;}
  .sas-pick-q{font-size:15px;margin:0 0 8px;}
  .sas-pick-note{font-size:13px;margin:12px 0 0;}
  .sas-size-card{flex-direction:column;align-items:flex-start;gap:6px;}
  .sas-size-swap{max-width:none;}
}


#sas-vf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:#111;color:#fff;font-size:13px;padding:8px 12px;
  border-bottom:2px solid #F1C329;}
#sas-vf-bar b{color:#F1C329;}
.sas-vf-bar-a{color:#F1C329;text-decoration:underline;}
.sas-vf-bar-x{background:none;border:0;color:#bbb;text-decoration:underline;
  font-size:13px;padding:0;cursor:pointer;}
.sas-vf{margin:18px 0 0;text-align:left;}
.sas-vf-h{color:#fff;font-weight:700;font-size:16px;margin:0 0 10px;
  text-align:center;}
.sas-vf-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;color:#111;border-radius:5px;padding:12px 14px;
  margin:0 0 8px;text-decoration:none;}
/* The theme underlines anything inside a link. Left alone, every word of
   the card copy renders underlined and the block reads as a wall of link
   text - seen on the live page at 375px before this line existed. */
.sas-vf-card,.sas-vf-card *{text-decoration:none;}
/* Green is reserved for a proven fit. The make shelf gets a neutral grey
   rule so the eye does not read it as an answer to the question. */
.sas-vf-card--yes{border-left:5px solid #1a7f37;}
.sas-vf-card--browse{border-left:5px solid #9a9a9a;background:#f4f4f4;}
.sas-vf-card--browse .sas-vf-go{color:#555;}
.sas-vf-n{font-weight:700;font-size:20px;min-width:2ch;}
.sas-vf-t{flex:1 1 140px;font-size:13px;line-height:1.35;}
.sas-vf-go{color:#a11;font-weight:700;font-size:13px;white-space:nowrap;}
.sas-vf-note,.sas-vf-none,.sas-vf-wait,.sas-vf-browse{color:#ddd;font-size:13px;
  line-height:1.45;margin:10px 0 0;text-align:center;}
.sas-vf-none{color:#F1C329;}
.sas-vf-note a,.sas-vf-browse a{color:#F1C329;text-decoration:underline;}
@media (max-width:480px){
  .sas-vf-go{width:100%;}
}


/* ---- primary nav: five items, one call button, one grouped entry.
       Seven flat items wrapped onto two lines at 1718px - measured on the
       live header. flex-wrap stays as the safety net, not as the plan. ---- */
.sas-nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;
  margin:0;padding:0;position:relative;}
.sas-nav > li > a{display:block;padding:12px 14px;font-weight:700;font-size:16px;
  text-decoration:none;line-height:1.2;min-height:48px;box-sizing:border-box;}
/* Astra's own dropdowns stay dead. .sas-subnav is ours and is not one. */
.sas-nav .sub-menu,.sas-nav .children{display:none!important;}

/* ---- the grouped entry. Native <details>, no JavaScript, no hover. ---- */
.sas-nav-group{position:relative;}
/* #fff, and measured: a <summary> is not an <a>, so Astra's white header-link
   colour never reached it and it computed to #26262B on a #111 bar - contrast
   about 1.1:1, invisible on the desktop bar AND in the mobile drawer, both of
   which are #111. It is set to the same white Astra computes for its sibling
   links, so if the header ever goes light the whole nav moves together. */
.sas-nav-details > summary{display:flex;align-items:center;gap:7px;cursor:pointer;
  color:#fff;padding:12px 14px;font-weight:700;font-size:16px;line-height:1.2;
  min-height:48px;box-sizing:border-box;list-style:none;user-select:none;}
.sas-nav-details[open] > summary,.sas-nav-details > summary:hover{color:#F1C329;}
.sas-nav-details > summary::-webkit-details-marker{display:none;}
.sas-nav-details > summary:focus-visible{outline:2px solid #F1C329;outline-offset:-2px;}
.sas-nav-caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;opacity:.75;transition:transform .12s;}
.sas-nav-details[open] .sas-nav-caret{transform:rotate(180deg);}
.sas-subnav{list-style:none;margin:0;padding:6px 0;}
.sas-subnav li{margin:0;}
.sas-subnav a{display:block;padding:11px 16px;font-size:15px;font-weight:700;
  text-decoration:none;line-height:1.25;min-height:44px;box-sizing:border-box;}

/* Desktop (Astra shows this bar at >=922px): a panel under the summary.
   Below that width the same markup is inside the hamburger, where a panel
   that floats over the page would be wrong - so there it just pushes down. */
@media(min-width:922px){
  /* 300px, not 264: at 264 the longest label - "Headache Racks & Cab
     Protectors" - wrapped onto two lines in the panel. Measured, not eyeballed. */
  .sas-subnav{position:absolute;top:100%;left:0;z-index:120;min-width:320px;max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #E4E4E7;border-radius:0 0 6px 6px;box-shadow:0 10px 26px rgba(0,0,0,.16);}
  /* !important, and it is not decoration. Astra colours every link in the
     header bar #ffffff, and it beat the plain `.sas-subnav a` rule on
     specificity: the panel rendered as an EMPTY WHITE BOX with five
     white-on-white links in it. Seen on screen, not inferred. */
  .sas-nav .sas-subnav a,.sas-nav .sas-subnav a:visited{
    color:#111!important;background:#fff!important;}
  /* The BACKGROUND is !important for the same reason the colour is, and it
     was not, and that is the bug Omar found by pointing his mouse at this
     menu on 2026-09-08. wp-custom-css carries

        .main-header-menu li a:hover{background:#C01C23!important;
                                     color:#ffffff!important}

     and this UL *is* `.main-header-menu`. In the important cascade the two
     rules are compared on specificity, so the pair SPLIT: our
     `.sas-nav .sas-subnav a:hover` (0,3,1) took the colour, and their
     `.main-header-menu li a:hover` (0,2,2) took the background, because ours
     was the only half not marked important. Measured on the live page:

        color rgb(192,28,35) on background rgb(192,28,35)  =  1.00 : 1

     Brand red on brand red - the row went solid red and the text vanished.
     Marking the background important keeps the pair together, whichever way
     the specificity falls. #C01C23 on #F7F7F8 measures 5.7:1. */
  .sas-nav .sas-subnav a:hover,.sas-nav .sas-subnav a:focus,
  .sas-nav .sas-subnav a:active{
    background:#F7F7F8!important;color:#C01C23!important;}
  /* Keyboard focus needs a mark of its own: :hover and :focus paint the same
     background here, so a tab stop with only that change is invisible to
     anyone driving the panel from the keyboard. */
  .sas-nav .sas-subnav a:focus-visible{
    outline:2px solid #C01C23;outline-offset:-2px;}
}
@media(max-width:921px){
  .sas-nav-group{width:100%;}
  .sas-subnav{padding-left:14px;border-left:2px solid rgba(241,195,41,.55);margin:0 0 6px 14px;}
}
.sas-callbtn{display:inline-block;background:#C01C23;color:#fff!important;border-radius:4px;
  padding:12px 16px;font-weight:800;text-decoration:none;min-height:48px;box-sizing:border-box;}
.sas-callbtn:hover{background:#F1C329;color:#111!important;}

/* ---- archives: no sidebar at this catalogue size ---- */
.woocommerce-page #secondary,.archive #secondary,.search #secondary{display:none!important;}
.woocommerce-page #primary,.archive #primary,.search #primary{width:100%!important;max-width:100%!important;}

/* ---- above the grid: H1, one stat line, chips. Nothing else. ---- */
.woocommerce-products-header{margin:0 0 6px!important;padding-bottom:0!important;}
.woocommerce-products-header__title{margin:0 0 4px!important;font-size:24px!important;line-height:1.2!important;}
.term-description,.woocommerce-products-header .taxonomy-description{display:none;}
.sas-archive-head{margin:0 0 10px;}
.sas-stat{margin:0 0 8px;color:#495057;font-size:15px;line-height:1.3;}
.sas-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.sas-chip{display:inline-block;background:#fff;border:1px solid #E4E4E7;border-radius:999px;
  padding:7px 12px;font-size:14px;font-weight:700;color:#111;text-decoration:none;line-height:1.2;}
.sas-chip span{color:#6a6a72;font-weight:400;margin-left:6px;}
.sas-chip:hover{border-color:#C01C23;color:#C01C23;}
.sas-toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:#26262B;text-decoration:none;padding:4px 0;}
.sas-toggle-box{width:16px;height:16px;border:2px solid #8a8a92;border-radius:3px;display:inline-block;}
.sas-toggle.is-on .sas-toggle-box{background:#1a7f37;border-color:#1a7f37;}
.sas-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin:0 0 10px;}
.woocommerce .sas-controls .woocommerce-ordering{margin:0!important;float:none!important;}
.woocommerce .sas-controls .woocommerce-ordering select{min-height:44px;font-size:15px;
  max-width:62vw;}

/* ---- the search box inside the empty state ---- */
.sas-empty-search{margin:0 0 18px;max-width:520px;}
.sas-empty .sas-search{display:flex;align-items:stretch;}
.sas-empty .sas-search input[type=search]{flex:1 1 auto;min-width:0;
min-height:48px;font-size:16px;padding:0 14px;color:#111;background:#fff;
border:2px solid #F1C329;border-right:0;border-radius:4px 0 0 4px;
-webkit-appearance:none;appearance:none;}
.sas-empty .sas-search button{flex:0 0 auto;min-height:48px;min-width:56px;
padding:0 18px;border:2px solid #F1C329;border-radius:0 4px 4px 0;
background:#C01C23;color:#fff;font-weight:700;font-size:15px;}

/* ---- the announcement, and the dead ends ---- */
.sas-note{background:#FFFBE9;border-left:3px solid #F1C329;padding:11px 14px;margin:0 0 14px;
  font-size:15px;color:#3b3b42;border-radius:0 6px 6px 0;line-height:1.5;}
.sas-empty{background:#fff;border:1px solid #E4E4E7;border-radius:6px;padding:22px 20px;margin:0 0 24px;}
.sas-empty h2{font-size:21px;margin:0 0 10px;color:#111;line-height:1.3;}
.sas-empty p{margin:0 0 12px;font-size:16px;line-height:1.55;}
.sas-routes{border-top:1px solid #E4E4E7;margin-top:18px;padding-top:16px;}
.sas-routes h3{font-size:15px;margin:0 0 10px;color:#495057;text-transform:uppercase;letter-spacing:.4px;}
.sas-routes-links{font-size:15px;}
.sas-call{font-weight:800;color:#C01C23;text-decoration:none;white-space:nowrap;}

/* ---- out of stock ---- */
.sas-oos{background:#FFF6F6;border:1px solid #F0C9CB;border-radius:6px;padding:18px 16px;margin:14px 0;}
.sas-oos h2{font-size:19px;margin:0 0 8px;color:#111;}
.sas-oos h3{font-size:15px;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.4px;color:#495057;}
.sas-alts{list-style:none;margin:0;padding:0;}
.sas-alts li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #F0C9CB;}
.sas-alts a{font-weight:700;color:#111;text-decoration:none;}
.sas-card-oos{display:block;font-size:14px;color:#8a5a00;font-weight:700;margin:4px 0;}

/* ---- vehicle with nothing that fits ---- */
.sas-nofit{background:#2a2a30;color:#f2f2f2;border-radius:6px;padding:16px 18px;margin:0 0 12px;}
.sas-nofit h3{color:#F1C329;font-size:17px;margin:0 0 8px;}
.sas-nofit p{margin:0 0 10px;font-size:15px;line-height:1.55;}
/* !important because of the tie described at .sas-footer-end a below: this
   panel is #2a2a30 and the global `a:hover{color:#111}` would otherwise put
   ink on it at about 1.4:1. Not rendered in this sweep - reaching this state
   needs a vehicle with no fitting product - so it is reasoned from the
   cascade, not measured on screen, unlike the footer one. */
.sas-nofit a{color:#F1C329!important;font-weight:700;}

/* ---- footer: three columns, ten links, ONE ending ---- */
.ast-footer-copyright{display:none!important;}
.sas-footer{background:#111;color:#d5d5da;padding:34px 18px 26px;}
.sas-footer-cols{max-width:1000px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:repeat(3,minmax(0,1fr));}
.sas-footer-col h2{font-size:13px;letter-spacing:.9px;text-transform:uppercase;
  color:#8a8a92;margin:0 0 10px;}
.sas-footer-col ul{list-style:none;margin:0;padding:0;}
.sas-footer-col li{margin:0 0 9px;}
.sas-footer-col a{color:#f2f2f2;text-decoration:none;font-size:15px;}
.sas-footer-col a:hover{color:#F1C329;text-decoration:underline;}
.sas-footer-end{max-width:1000px;margin:26px auto 0;padding-top:18px;
  border-top:1px solid #2c2c33;font-size:14px;color:#9a9aa2;}
/* !important, and it is the same class of bug as the Accessories panel above.
   The Customizer's Additional CSS ends with an unqualified

       a:hover { color: #111111; }

   written for links on white. `.sas-footer-end a` is (0,1,1) and `a:hover` is
   also (0,1,1) - a dead tie - and wp-custom-css is emitted AFTER this
   stylesheet, so the tie goes to ink. Measured live: the footer phone number
   went from #F1C329 on #111 (11.31:1) to #111 on #111 (1.00:1) the moment the
   mouse touched it. It is the number a customer calls to place an order. */
.sas-footer-end a{color:#F1C329!important;font-weight:700;text-decoration:none;}
.sas-footer-end a:hover,.sas-footer-end a:focus{text-decoration:underline;}

@media(max-width:600px){
  .woocommerce-products-header__title{font-size:21px!important;}
  .sas-stat{font-size:14px;}
  .sas-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .sas-nav > li > a{padding:12px 10px;font-size:15px;}
}

.sas-searchbar{background:#0b0b0c;border-bottom:1px solid rgba(241,195,41,.28);}.sas-searchbar-in{max-width:1200px;margin:0 auto;padding:10px 14px;}.sas-search{display:flex;align-items:stretch;gap:0;width:100%;}.sas-search-lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}.sas-search input[type=search]{flex:1 1 auto;min-width:0;min-height:48px;height:48px;font-size:16px;line-height:normal;padding:0 14px;color:#111;background:#fff;border:2px solid #F1C329;border-right:0;border-radius:4px 0 0 4px;-webkit-appearance:none;appearance:none;}.sas-search input[type=search]::placeholder{color:#6b6b73;opacity:1;}.sas-search input[type=search]:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(192,28,35,.55);}.sas-search button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;height:48px;min-width:56px;padding:0 18px;cursor:pointer;border:2px solid #F1C329;border-radius:0 4px 4px 0;background:#C01C23!important;color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;}.sas-search button:hover{background:#a5161c!important;}.sas-search button:focus-visible{outline:2px solid #F1C329;outline-offset:-4px;}@media (max-width:479px){.sas-search-btxt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}.sas-search button{padding:0 16px;}}body.woocommerce-checkout .sas-searchbar{display:none;}

.sas-hcart{display:inline-flex;align-items:center;justify-content:center;gap:7px;
box-sizing:border-box;min-width:44px;min-height:44px;padding:0 12px;border-radius:8px;
background:#F1C329;color:#111!important;border:0;position:relative;line-height:1;
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
text-decoration:none!important;-webkit-tap-highlight-color:transparent;}
.sas-hcart:hover,.sas-hcart:focus{background:#fff;color:#111!important;}
.sas-hcart:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.sas-hcart .sas-hcart-ico{flex:0 0 auto;}
.sas-hcart .sas-hcart-lbl{white-space:nowrap;}
.sas-hcart-n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;
border-radius:999px;background:#C01C23;color:#fff;font-size:11.5px;font-weight:800;
line-height:20px;text-align:center;padding:0 5px;letter-spacing:0;
box-shadow:0 0 0 2px #0b0b0c;}

/* DESKTOP: right end of the dark top strip. The widget area becomes a row so
   the strip keeps its own centring and the cart takes the end of the line. */
#ast-mobile-header .sas-hcart-strip{display:none;}
#ast-desktop-header .ast-above-header-wrap .header-widget-area{display:flex;
align-items:center;gap:16px;}
#ast-desktop-header .ast-above-header-wrap .header-widget-area>section{flex:1 1 auto;
min-width:0;}
#ast-desktop-header .sas-hcart-strip{flex:0 0 auto;margin-left:auto;}

/* MOBILE: level with the hamburger, in the logo row.
   Measured 375px - bar y58 h80, button.menu-toggle x311 y75 44x44 - so
   right:74px bottom:19px puts the cart at y75..119 with a 10px gap. The slot
   is zero-height and sits on the bar bottom edge, so nothing moves. */
#ast-desktop-header .sas-hcart-slot{display:none;}
.sas-hcart-slot{position:relative;height:0;}
#ast-mobile-header .sas-hcart-slot .sas-hcart{position:absolute;right:74px;
bottom:19px;z-index:9;}
@media(max-width:359px){
#ast-mobile-header .sas-hcart-slot .sas-hcart{right:64px;padding:0;width:44px;}
#ast-mobile-header .sas-hcart-slot .sas-hcart .sas-hcart-lbl{display:none;}
}

.product_cat-dually-wheels .sas-set4{display:none!important}

/* 1 */
.sas-r3-src{margin:6px 0 18px;font-size:13px;color:#52525B}
/* 3 */
.sas-r3-in{display:flex;align-items:center;gap:6px;margin:4px 0 2px;font-size:13px;font-weight:700;line-height:1.2;color:#15803D}
.sas-r3-in i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16A34A;flex:0 0 8px}
.sas-r3-in.is-order{color:#92400E}
.sas-r3-in.is-order i{background:#D97706}
/* 8 */
.sas-r3-ask{display:flex;gap:10px;align-items:flex-start;margin:12px 0 16px;padding:12px 14px;border:1px solid #E4E4E7;border-left:4px solid #16A34A;border-radius:6px;background:#F7FBF8;max-width:460px}
.sas-r3-ask svg{width:22px;height:22px;flex:0 0 22px;fill:#15803D;margin-top:2px}
.sas-r3-ask p{margin:0;font-size:15px;line-height:1.45;color:#18181B}
.sas-r3-ask a{color:#15803D;font-weight:700;text-decoration:underline}
.sas-r3-ask .sas-r3-num{white-space:nowrap}
.sas-r3-ask span{display:block;font-size:13px;color:#52525B}
/* 9 */
@media (max-width:782px){
 body.woocommerce-cart .wc-block-cart{padding-bottom:84px}
 body.woocommerce-cart .wc-block-cart__submit-container--sticky{transition:transform .2s ease}
 body.sas-r3-xs-on .wc-block-cart__submit-container--sticky{transform:translateY(110%)}
}
/* 5 */
.sas-r3-hs{display:none}
@media (min-width:900px){
 #nl-hd.sas-r3-hashs .sas-r3-hs{display:flex;flex:1 1 420px;min-width:260px;max-width:720px;margin:0 20px;height:42px;align-items:stretch;border-radius:6px;overflow:hidden;background:#fff;border:2px solid #fff}
 .sas-r3-hs input[type=search]{flex:1 1 auto;min-width:0;border:0;margin:0;padding:0 14px;font-size:15px;color:#18181B;background:#fff;border-radius:0;height:auto}
 .sas-r3-hs input[type=search]:focus{outline:none;box-shadow:inset 0 0 0 2px #F5C518}
 .sas-r3-hs button{flex:0 0 52px;border:0;margin:0;padding:0;border-radius:0;background:#D32F2F;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
 .sas-r3-hs button:hover{background:#B71C1C}
 #nl-hd.sas-r3-hashs [data-nl-focus=nl-q]{display:none}
}
/* 6 */
.sas-r3-ft{display:grid;grid-template-columns:1fr;gap:26px;max-width:1200px;margin:0 auto;padding:26px 16px 8px;border-top:1px solid rgba(255,255,255,.14);color:#E4E4E7}
.sas-r3-ft[hidden]{display:none}
.sas-r3-ft h2{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#A1A1AA}
.sas-r3-ft p{margin:0 0 10px;font-size:15px;line-height:1.5;color:#E4E4E7}
.sas-r3-ft a{color:#F5C518;text-decoration:none}
.sas-r3-ft a:hover{text-decoration:underline}
.sas-r3-soc{display:flex;gap:10px;list-style:none;margin:8px 0 0;padding:0}
.sas-r3-soc a{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1)}
.sas-r3-soc svg{width:22px;height:22px;fill:#fff}
.sas-r3-pay ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 10px;padding:0}
.sas-r3-pay li{display:flex;align-items:center;justify-content:center;width:58px;height:38px;background:#fff;border-radius:5px;padding:4px}
.sas-r3-pay img{max-width:100%;max-height:100%;width:auto;height:auto}
.sas-r3-pay p{font-size:13px;color:#A1A1AA}
.sas-r3-su form{display:flex;gap:8px;max-width:420px}
.sas-r3-su input[type=email]{flex:1 1 auto;min-width:0;height:46px;margin:0;padding:0 12px;border:0;border-radius:5px;font-size:16px;color:#18181B;background:#fff}
.sas-r3-su button{flex:0 0 auto;height:46px;margin:0;padding:0 18px;border:0;border-radius:5px;background:#D32F2F;color:#fff;font-weight:700;cursor:pointer}
.sas-r3-su .sas-r3-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sas-r3-su-fine{margin-top:8px!important;font-size:13px!important;color:#A1A1AA!important}
.sas-r3-su-msg{font-weight:700;color:#F5C518!important}
@media (min-width:800px){.sas-r3-ft{grid-template-columns:1.1fr 1.2fr 1.2fr;padding:30px 24px 10px}}
/* 7a */
body.sas-r3-oneveh #sas-cv-bar.sas-cv-bar--add{display:none}
/* 7b */
body.sas-r3-dept.sas-r3-dept.sas-r3-dept .woocommerce-products-header{position:relative;display:flex!important;align-items:flex-end;min-height:92px!important;margin:0 0 10px!important;padding:14px 16px!important;border-radius:6px;background-color:#111!important;background-size:cover!important;background-position:center right!important;background-repeat:no-repeat!important;color:#fff}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept .woocommerce-products-header .page-title,body.sas-r3-dept.sas-r3-dept.sas-r3-dept .woocommerce-products-header h1{margin:0!important;color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.6)}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept .woocommerce-products-header .page-title *{color:#fff!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept .woocommerce-products-header{min-height:160px!important;padding:22px 28px!important;border-radius:8px;background-position:center 55%!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-wheels .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-home-wheels-s.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-wheels .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-home-wheels-l.webp)!important}}
html body.sas-r3-dept.sas-r3-dept.sas-r3-dept-wheels .woocommerce-products-header{background-position:center 88%!important}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-tires .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-home-beach-s.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-tires .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-home-beach-l.webp)!important}}
html body.sas-r3-dept.sas-r3-dept.sas-r3-dept-tires .woocommerce-products-header{background-position:center 75%!important}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-suspension-air-springs .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-banner-suspension-air-springs-phone.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-suspension-air-springs .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-banner-suspension-air-springs-desk.webp)!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-exhaust .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-home-louder-s.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-exhaust .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-home-louder-l.webp)!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-truck-bed .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-banner-truck-bed-phone.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-truck-bed .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-banner-truck-bed-desk.webp)!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-towing-hitches .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-home-worn-s.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-towing-hitches .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-home-worn-l.webp)!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-commercial-fleet .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-banner-commercial-fleet-phone.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-commercial-fleet .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-banner-commercial-fleet-desk.webp)!important}}
body.sas-r3-dept.sas-r3-dept.sas-r3-dept-bumpers-steps-armor .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.88) 0,rgba(10,10,12,.55) 60%,rgba(10,10,12,.2) 100%),url(/wp-content/uploads/2026/09/stinger-banner-exterior-protection-phone.webp)!important}
@media (min-width:700px){body.sas-r3-dept.sas-r3-dept.sas-r3-dept-bumpers-steps-armor .woocommerce-products-header{background-image:linear-gradient(90deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.6) 40%,rgba(10,10,12,.05) 100%),url(/wp-content/uploads/2026/09/stinger-banner-exterior-protection-desk.webp)!important}}
/* 11 */
.sas-r3-fd{margin:0 0 14px;border:2px solid #18181B;border-radius:8px;background:#fff}
.sas-r3-fd summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 44px 12px 14px;cursor:pointer;list-style:none;position:relative;min-height:44px;box-sizing:border-box}
.sas-r3-fd summary::-webkit-details-marker{display:none}
.sas-r3-fd summary::after{content:"+";position:absolute;right:14px;top:8px;font-size:24px;font-weight:700;color:#D32F2F}
.sas-r3-fd[open] summary::after{content:"\2212"}
.sas-r3-fd summary b{font-size:16px;color:#18181B}
.sas-r3-fd summary span{font-size:14px;color:#52525B}
.sas-r3-fp{padding:0 14px 14px}
.sas-r3-fq{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-weight:700;font-size:15px;color:#18181B}
.sas-r3-fq i{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#D32F2F;color:#fff;font-style:normal;font-size:13px;align-items:center;justify-content:center}
.sas-r3-fos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sas-r3-fo{min-height:48px;margin:0;padding:8px 10px;border:1px solid #D4D4D8;border-radius:6px;background:#F4F4F5;color:#18181B;font-size:14px;font-weight:700;line-height:1.25;text-align:left;cursor:pointer}
.sas-r3-fo.is-on{border-color:#D32F2F;background:#FDECEC;box-shadow:inset 0 0 0 1px #D32F2F}
.sas-r3-fv{display:grid;grid-template-columns:1fr;gap:8px}
.sas-r3-fv select{height:46px;margin:0;font-size:16px}
.sas-r3-fr{margin:10px 0 0;font-size:15px;line-height:1.45}
.sas-r3-fr a.sas-r3-go{display:inline-block;margin-top:6px;padding:11px 16px;border-radius:6px;background:#D32F2F;color:#fff;font-weight:700;text-decoration:none}
.sas-r3-fnote{margin:12px 0 0;font-size:13px;color:#52525B}
@media (min-width:700px){.sas-r3-fos{grid-template-columns:repeat(5,1fr)}.sas-r3-fv{grid-template-columns:repeat(3,1fr)}}


html.sas-tl-wait .sas-r6-tires,html.sas-tl-wait a.sas-wc-t{visibility:hidden;}
.sas-tl-call{display:block;margin:6px 0;font-size:14px;line-height:1.35;color:#26262B;}
.sas-tl-call a{color:#C01C23;font-weight:700;}