/* 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%;}
}