/* Stinger page bundle */

.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-vfa{background:#FFFBE9;border-left:3px solid #F1C329;padding:11px 14px;
  margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;}
.sas-vfa-l{margin:0;font-size:15px;line-height:1.4;color:#26262B;}
.sas-vfa-l b{font-weight:700;}
.sas-vfa-a{font-size:14px;font-weight:700;color:#C01C23;text-decoration:underline;
  text-underline-offset:2px;white-space:normal;}
.sas-vfa-a:hover,.sas-vfa-a:focus{color:#111;}
.sas-vfa-more{margin:22px 0 0;padding:14px 0 0;border-top:3px solid #F1C329;clear:both;}
.sas-vfa-more-h{font-size:20px;line-height:1.2;margin:0 0 4px;color:#111;}
.sas-vfa-more-p{margin:0 0 12px;font-size:14px;line-height:1.4;color:#4A4A52;}
.sas-vfa-more-p a{color:#C01C23;font-weight:700;}
.sas-vfa-more-all{margin:6px 0 16px;text-align:center;}
.sas-vfa-uni{margin:-6px 0 12px;font-size:13px;line-height:1.35;color:#4A4A52;}
.sas-vfa-uni a{font-size:13px;}
.sas-vfa-uni--end{margin:18px 0 12px;}
@media (max-width:600px){
  .sas-vfa{padding:10px 12px;}
  .sas-vfa-l{font-size:14px;}
  .sas-vfa-a{font-size:13px;}
}


#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;}
}


.sas-dg-more{display:block;margin:.15rem 0 .35rem;font-size:.72rem;line-height:1.3;
  font-weight:600;letter-spacing:.02em;color:#8a6d00;text-transform:none}
/* The price range on a group card. At 375px in a two-column grid the two
   amounts do not fit on one line, so the range is allowed to wrap - but
   neither amount may ever break in half, which is the only part that would
   actually misread. A shade smaller than a single price so a wrapped range
   does not tower over the title. */
.sas-dg-range{font-size:.88em;line-height:1.3}
.sas-dg-range .woocommerce-Price-amount{white-space:nowrap}
/* The strip. aspect-ratio holds the box before any picture arrives, so nothing
   on the page moves as they load. */
.sas-dg-gal{position:relative;margin:0 0 .4rem}
.sas-dg-track{display:flex;overflow-x:auto;overflow-y:hidden;gap:0;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border-radius:4px;outline:none}
.sas-dg-track::-webkit-scrollbar{display:none}
/* The theme opens its own card link BEFORE this hook runs, so the parser force
   closes it at the first slide anchor and leaves an empty one behind as the
   first flex child of the strip. Measured in the browser, not guessed. It has
   no content, but an empty flex item is still a flex item, so it is taken out
   rather than left to grow later. The card title keeps its own link - checked
   live, the theme re-emits that separately. */
.sas-dg-track > a:not(.sas-dg-slide){display:none}
.sas-dg-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;
  display:block;line-height:0;text-decoration:none}
.sas-dg-slide img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;background:#fff}
.sas-dg-cap{position:absolute;left:.3rem;bottom:.3rem;max-width:calc(100% - .6rem);
  padding:.12rem .34rem;border-radius:3px;background:rgba(17,17,17,.78);
  color:#fff;font-size:.62rem;line-height:1.25;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sas-dg-dots{display:flex;justify-content:center;gap:.26rem;margin:.3rem 0 0;
  min-height:.5rem}
.sas-dg-dots i{width:.36rem;height:.36rem;border-radius:50%;background:#cfcfcf;
  transition:background .15s}
.sas-dg-dots i.on{background:#c8102e}
/* Arrows are for a mouse. They never replace the swipe, and they are hidden on
   touch-only screens rather than being the only way through. */
.sas-dg-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:1.7rem;height:1.7rem;padding:0;border:1px solid #dcdcdc;border-radius:50%;
  background:rgba(255,255,255,.94);color:#222;font-size:1.05rem;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .15s}
.sas-dg-prev{left:.25rem}
.sas-dg-next{right:.25rem}
.sas-dg-gal:hover .sas-dg-nav,.sas-dg-nav:focus{opacity:1}
@media (hover:none){.sas-dg-nav{display:none}}
/* Under 600px the product summary is a flex column with an explicit order on
   every known child and order 20 on everything else. 5 is the stock line and 6
   the cart form, so 5 puts this directly above the button - the variant has to
   be chosen before the button, not after it. The class is doubled to
   out-specify that block without an important flag. */
.single-product div.product .summary > .sas-dg.sas-dg{order:5}
.sas-dg{margin:0 0 1rem;padding:.85rem .9rem;border:1px solid #e2e2e2;
  border-left:4px solid #c8102e;border-radius:6px;background:#fafafa}
.sas-dg.is-part{border-left-color:#8a6d00;background:#fffdf3}
.sas-dg-h{margin:0 0 .3rem;font-size:.95rem;font-weight:700;line-height:1.25}
.sas-dg-warn{margin:0 0 .7rem;font-size:.82rem;line-height:1.45;color:#333}
.sas-dg-warn strong{white-space:nowrap}
.sas-dg.sas-dg-nofit{padding:.6rem .8rem;border-left-color:#8a6d00;background:#fffdf3}
.sas-dg-nofit .sas-dg-warn{margin:0}
.sas-dg-nofit a{color:#c8102e;font-weight:700;white-space:nowrap}
/* A ninety-three item group at full height pushed the add to cart button off
   the phone entirely. The heading and the warning stay outside this box so
   they are never what scrolls away; only the list scrolls. */
.sas-dg-list{display:flex;flex-wrap:wrap;gap:.35rem;max-height:15rem;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid #e6e6e6;border-radius:4px;padding:.5rem}
.sas-dg-opt{display:inline-block;padding:.28rem .5rem;border:1px solid #ccc;
  border-radius:4px;background:#fff;font-size:.78rem;line-height:1.2;
  text-decoration:none;color:#1a1a1a;white-space:nowrap}
a.sas-dg-opt:hover,a.sas-dg-opt:focus{border-color:#c8102e;color:#c8102e}
.sas-dg-opt.is-here{background:#c8102e;border-color:#c8102e;color:#fff;font-weight:700}
@media (min-width:600px){.sas-dg-opt{font-size:.82rem}}
/* ONE PRICE ON A TIRES CARD. The amount is full size - a single figure fits on
   one line at 375px where a range did not - and the two words round it are
   captions, not part of the number. Previously this existed only in the live
   snippet, appended by tires_archive_strip.py, so a redeploy from this file
   would have printed FROM and EACH at full price size. */
.sas-dg-range.sas-dg-one{font-size:1em}
.sas-dg-pre,.sas-dg-ea{font-size:.55em;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#6B6B73;white-space:nowrap}
.sas-dg-pre{margin-right:.3em}
.sas-dg-ea{margin-left:.3em;font-weight:500}
/* THE TIRES MODEL CARD, layout C: the size line and the chip row, printed
   inside .price directly above the amount. .price carries the theme price
   type (20px, bold), so the block resets its own type and every child sets
   its own. Chips are 26px tall with a 5px gap: over the WCAG 2.5.8 24px
   minimum, and deliberately under the 44px floor snippet 161 holds the
   product-page size list to - four 44px chips stacked in a 142px column
   would cost a whole card row on the first screen. The chip on the product
   page, where the size is actually chosen, keeps its 44px. */
/* contain:inline-size is load-bearing. Without it the chip row fed its
   max-content width into the two-column grid and the columns came out
   173px and 158px instead of 161.5px each - measured in Chromium at 375px
   by toggling this block. The summary is a stretched flex column, so the
   block still fills the card (141.5px measured). */
.sas-mc{display:block;margin:0 0 8px;font-size:0;line-height:0;font-weight:400;
  letter-spacing:0;text-transform:none;contain:inline-size}
.sas-mc-l{display:block;margin:0 0 5px;font-family:Barlow,-apple-system,sans-serif;
  font-size:12px;line-height:1.3;font-weight:600;color:#6B6B73;
  font-variant-numeric:tabular-nums}
.sas-mc-c{display:flex;flex-wrap:wrap;gap:5px}
.sas-sz{display:inline-flex;align-items:center;box-sizing:border-box;
  min-height:26px;max-width:100%;padding:0 6px;border:1px solid #cfcfd6;
  border-radius:3px;background:#fff;color:#26262B;
  font-family:Barlow,-apple-system,sans-serif;font-variant-numeric:tabular-nums;
  font-size:12px;line-height:1.2;font-weight:600;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.sas-sz:hover,a.sas-sz:focus{border-color:#C01C23;color:#C01C23}
.sas-sz.is-x{display:none}
.sas-sz-more{color:#C01C23;border-color:#e6c9cb;font-weight:700}
.sas-sz.is-mine{background:#F1C329;border-color:#F1C329;color:#111;font-weight:700}
/* ADD ONE SIZE TO CART - the card button after the vehicle script has found
   exactly one lit chip. The words are longer than ADD TO CART, so they get
   two tighter lines inside the SAME 44px box instead of a taller button: a
   taller button would push every card in the row down after the page had
   painted. The script measures, and puts CHOOSE SIZE back if it grew.
   The archive look (apply_archive_look.py) pins every card a.button padding,
   size and line-height with important at specificity 0,5,4, so this carries
   six classes and important too - measured: without them it rendered 53px. */
/* The hidden Astra cart icon on a model card added the survivor on hover. */
ul.products li.product.sas-dg-g .ast-on-card-button{display:none!important}
ul.products li.product .astra-shop-summary-wrap a.button.sas-mc-btn.sas-mc-buy{
  display:flex!important;align-items:center;justify-content:center;
  text-align:center;padding-top:6px!important;padding-bottom:6px!important;
  font-size:11px!important;line-height:13px!important;letter-spacing:0!important}
/* THE TEXAS WAREHOUSE BADGE lives here, in the deployer that owns this
   snippet, and
   not appended to the live copy afterwards. Two lanes appended it by hand -
   tires_archive_strip.py put it in, wheels_one_bar.py widened its gate - and
   then a correct redeploy from THIS file silently deleted both, because this
   file had never heard of it. Measured after that redeploy: the string
   sas-txwh appeared in zero of 157 live snippet bodies, and the tires
   archive went from 36 badges to 0.

   The corner costs no layout. As a block line it cost 29px on every card row
   and took the tires archive from 8,809px to 9,331px - a change that removed
   120px of chrome and gave 522px back. li.product is already
   position:relative (read off getComputedStyle, not assumed) and
   .sas-dg-cap already holds the bottom-left of the picture, so top-right is
   free.
   The yellow is one the store already uses. */
.sas-txwh{position:absolute;top:7px;right:7px;z-index:2;padding:2px 6px;
  border-radius:3px;background:#FFF3CC;color:#6B4E00;font-size:.58rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.45;box-shadow:0 1px 2px rgba(17,17,17,.18)}

.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;}