/* ═══════════════════════════════════════════════════════════════════════════
   POLISH PASS (2026-09-12) — one palette, one button, one gutter, site-wide.
   Loaded LAST (after the skin, functions.php priority 1000). Every value below
   comes from the token block; if a color is not in the block it is not allowed.
   Measured drift it fixes (live site, desktop + phone, six pages):
     · breadcrumbs were the only underlined links (skin's .site-content a:not([class]))
     · part/product pages used Storefront grays (#333/#666/#888/#222) next to our ink
     · buttons: one blue, three radii (0/6/8), two weights, phone CALL/TEXT in Saira
     · inner pages sat 42px inside the header (Storefront .col-full 2.618em + our 22)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --p-ink:#0c0f14; --p-ink2:#14181d; --p-muted:#6b7682; --p-muted2:#6b7682; --p-line:#e3e7ec;
  --p-blue:#1d5fd8; --p-blue-dk:#12409b; --p-blue-lt:#5f95f0;
  --p-r:6px; --p-gut:22px;
  --p-head:"Oswald",sans-serif; --p-body:"Saira",sans-serif;
}
@media (max-width:900px){ :root{ --p-gut:16px } }

/* ---- buttons: one spec (blue, Oswald 600, uppercase, 6px) ---- */
.lmcs-go,button.lmcs-dk-go,.lmcs-btn-call,.lmcs-btn-txt,.lm-hfoot .btn,.lfn-add,button.lfn-add,
.lfb-view-btn,.lfb-pg a,.lfb-pg button,.lfb-refine-done,.lfb-call,.lm-chat-trigger,.lmvp-go,.lmvp-back,body.lm-mono-content .lfb-filterbtn,.lfb-filterbtn{
  border-radius:var(--p-r) !important;
  font-family:var(--p-head) !important; font-weight:600 !important;
  text-transform:uppercase !important; letter-spacing:.04em;
}
.lmcs-btn-call,.lmcs-btn-txt{ font-size:11.5px !important }

/* ---- breadcrumbs: muted, no underline, current page in ink ---- */
.lfb-crumbs a,.site-content .lfb-crumbs a,.lfn-wrap .lfb-crumbs a{ color:var(--p-muted) !important; text-decoration:none !important; font-weight:500 }
.lfb-crumbs a:hover{ color:var(--p-blue) !important }
.lfb-crumbs span{ color:#c0c8d0 }
.lfb-crumbs b{ color:var(--p-ink2) !important; font-weight:600 }

/* ---- part + product pages: Storefront grays → tokens ---- */
.lfn-wrap,.lfn-wrap p,.lfn-desc,.lf-prod-block{ color:var(--p-ink2) }
.lfn-wrap h1,.lfn-wrap h2,.lfn-wrap h3,.lfn-wrap h4,.lfn-title,.site-content .lfn-wrap h1{ color:var(--p-ink) !important }
.lfn-wrap h4{ font-weight:600 !important }
.lfn-ids,.lfn-wrap .lfn-ids{ color:var(--p-muted) !important }
.lfn-wrap table th,.lfn-wrap table td{ color:var(--p-ink2) }

/* ---- listing: same title on desktop and phone, no stray blacks ---- */
.lfb-card h3,.lfb-row h3{ color:var(--p-ink2) !important; font-weight:600 !important }
.lfb-brand{ color:var(--p-muted) !important }
.lfb-fg-h,.lfb-fg-h b,.lfb-refine-h{ color:var(--p-ink2) !important }
.lfb-tools select,.lfb-vsel select{ color:var(--p-ink2) !important; border-radius:var(--p-r) !important; border-color:var(--p-line) !important }
.lfb-count b{ color:var(--p-blue) !important }

/* ---- gutters: Storefront's .col-full padding (2.618em ≈ 42px) stacked on our 22 → one gutter ---- */
.col-full,.site-content .col-full,.lm-enhanced .col-full{ padding-left:0 !important; padding-right:0 !important }
.lfb,#lfb,.lfn-wrap,div.lfn-wrap[style]{ padding-left:var(--p-gut) !important; padding-right:var(--p-gut) !important }
@media (max-width:900px){
  .col-full,.site-content .col-full{ margin-left:0 !important; margin-right:0 !important }  /* Storefront 1.41575em side margin */
  /* the icon row (MENU · logo · account · cart) is tuned to mhdr's 10px and wraps at 375px with more;
     only the search box moves out to the 16px gutter (Curtis 09-12: cart bumped to the next line) */
  header.lmcs .lmcs-searchzone{ margin-left:6px !important; margin-right:6px !important }
  /* the 36px logo image sat top-aligned in its 44px box, 4px above the account/cart icons (Curtis 09-12) */
  header.lmcs .lmcs-logo{ display:flex !important; align-items:center !important }
  /* typed search text was #05070c on the dark phone header (Curtis 09-12: "text is black, you can not see it") */
  header.lmcs #lmcs-in,header.lmcs .lmcs-searchzone input{ color:#e8ecef !important; -webkit-text-fill-color:#e8ecef !important; caret-color:#5f95f0 !important }
  header.lmcs #lmcs-in::placeholder{ color:#8a939e !important; -webkit-text-fill-color:#8a939e !important }
}
@media (max-width:374px){
  /* small Androids: the 195px logo + MENU + two icons overflow a 360px row → one notch smaller logo */
  header.lmcs .lmcs-logo img{ height:31px !important; width:auto !important }
  .lm-hfoot .wrap,footer .wrap{ padding-left:var(--p-gut) !important; padding-right:var(--p-gut) !important }
}

/* ═══ ACCESSIBILITY PASS (2026-09-12) — see notes; nothing here changes the look except the fit line ═══ */
/* (3) skip link: exists only for keyboard users; appears on the first Tab, hides again */
.lm-skip{ position:absolute; left:12px; top:-80px; z-index:100000; background:var(--p-blue); color:#fff; font:600 13px/1 var(--p-head); text-transform:uppercase; letter-spacing:.04em; padding:12px 16px; border-radius:var(--p-r); text-decoration:none; transition:top .15s }
.lm-skip:focus{ top:12px; outline:3px solid #fff; outline-offset:2px }
/* (2b) one visible focus ring for keyboard users, everywhere — beats the old outline:none rules; mouse clicks don't show it */
/* longhands + literal colors on purpose: Chrome resolves an `outline` shorthand that carries var() lazily, and a later
   outline-color override then collapsed the width to 0 (seen on prod 09-12) */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline-style:solid !important; outline-width:3px !important; outline-color:#5f95f0 !important; outline-offset:2px !important }
.lmcs :is(a,button,input,select):focus-visible,.lm-hfoot :is(a,button):focus-visible,.hero :is(a,button):focus-visible,.mhero :is(a,button):focus-visible{ outline-color:#fff !important }
/* buttons animate `all`; the ring must not fade in — appear at once, keep hover transitions otherwise */
:is(a,button):focus-visible{ transition:none !important }
/* (3) the listing count is now an h1: keep its 17px look */
h1.lfb-count{ font-size:17px; margin:0; line-height:1.3; text-transform:none; letter-spacing:0; font-weight:400 }
/* (2) the closed phone drawer is off-screen but was still focusable */
.lmh-drawer{ visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s }
.lmh-drawer-open .lmh-drawer{ visibility:visible; transition:transform .25s ease, visibility 0s }
/* (4) the fitment grid's '(1)' count was #8b93a1 on white, 3.1:1 */
.lfn-wrap h3 > span,.lf-prod-block h3 > span{ color:var(--p-muted) !important }
/* (5) fit state in words on the part page (filled by the inline script in lf-catalog native.php) */
.lfn-fitline{ display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--p-head); text-transform:uppercase; letter-spacing:.04em; padding:7px 11px; border-radius:999px; margin:4px 0 12px }
.lfn-fitline.is-fit{ background:#e6f4ea; color:#166534 }
.lfn-fitline.no-fit{ background:#fdecea; color:#9a1c0c }
.lfn-fitline b{ width:15px; height:15px; border-radius:50%; color:#fff; font-size:10px; display:inline-flex; align-items:center; justify-content:center }
.lfn-fitline.is-fit b{ background:#16a34a }
.lfn-fitline.no-fit b{ background:#cc2300 }

/* Checkout (2026-11-13): the Credit Card choice shows the card logos. The payment plugin's checkout block prints
   only the words, so the logos are drawn here from the plugin's own image files. */
label[for="radio-control-wc-payment-method-options-anet"] .wc-block-components-radio-control__label{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
label[for="radio-control-wc-payment-method-options-anet"] .wc-block-components-radio-control__label::after{
	content:""; flex:0 0 auto; width:176px; height:26px;
	background:
		url(../../../plugins/authorize-net-payments-for-woocommerce/assets/img/card-visa.svg) 0 50%/40px 26px no-repeat,
		url(../../../plugins/authorize-net-payments-for-woocommerce/assets/img/card-mastercard.svg) 45px 50%/40px 26px no-repeat,
		url(../../../plugins/authorize-net-payments-for-woocommerce/assets/img/card-discover.svg) 90px 50%/40px 26px no-repeat,
		url(../../../plugins/authorize-net-payments-for-woocommerce/assets/img/card-amex.svg) 135px 50%/40px 26px no-repeat;
}
/* The plugin also prints its own row of card logos inside the Credit Card box, with a web address that is relative to the
   page (/checkout/wp-content/...), so all four came up as broken images. The working logos above replace that row. */
.wc-block-components-payment-method-icon[src*="authorize-net-payments-for-woocommerce"]{ display:none !important }
.wc-block-components-payment-method-icons:has(> .wc-block-components-payment-method-icon[src*="authorize-net-payments-for-woocommerce"]){ display:none !important }