/* STP Core — site-wide styling (UI polish, direction A: docs/2026-09-30-ui-polish-design.md §3).
 * Loaded on every front-end page. Holds the design tokens (the ONLY place --stp-*
 * tokens are defined) and the overrides of Blocksy / WooCommerce markup. Styles
 * for our own components live in their module's stylesheet and use these tokens.
 * Blocksy overrides start with `body` for specificity: several Blocksy sheets
 * print after this one. */

:root {
  --stp-ink: #16171a;
  --stp-ink-2: #4b4d52;
  --stp-ink-3: #74767b;          /* only on white (4.6:1) */
  --stp-line: #e7e5e0;
  --stp-line-2: #d6d4cf;
  --stp-wash: #f5f4f1;
  --stp-yellow: #ffcd05;         /* Blocksy palette 1 */
  --stp-yellow-dark: #eec000;
  --stp-black: #0d0e10;          /* Blocksy palette 4 */
  --stp-charcoal: #141518;
  --stp-green: #1f7a3a;          /* open-now on light */
  --stp-green-dark: #4ade80;     /* open-now on dark */
  --stp-gray-dark: #9a9da3;      /* closed status on black */
  --stp-r: 10px;                 /* cards */
  --stp-rc: 6px;                 /* controls */
  --stp-shadow: 0 1px 2px rgba(16,17,20,.06), 0 8px 24px rgba(16,17,20,.08);
  /* Legacy names still used by stp-garage.css */
  --stp-border: var(--stp-line);
  --stp-muted: var(--stp-ink-3);
}

/* ==== Shop grid, toolbar, pagination (spec §4.2) ==== */
body ul.products { --horizontal-alignment: flex-start; --text-horizontal-alignment: left; }
body ul.products li.product { align-items: flex-start; text-align: left; }
body ul.products li.product figure img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
body ul.products li.product figure { margin-bottom: 12px; }   /* Blocksy default 25px */
/* Full titles, never clamped: part titles carry engine sizes and codes. The
 * min-height keeps 1- and 2-line cards aligned. */
body ul.products .woocommerce-loop-product__title {
  text-align: left; font-size: 15.5px; font-weight: 700; line-height: 1.35;
  color: var(--stp-ink); min-height: calc(1.35em * 2); margin: 0 0 6px;
}
body ul.products li.product .price { text-align: left; font-size: 17px; font-weight: 800; color: var(--stp-ink); }
/* No quick-actions bar on cards (add to cart / wishlist / compare / quick view — Matt, 2026-09-30):
 * people add to cart from the product page, where the fitment check runs. */
body ul.products .ct-woo-card-extra { display: none !important; }

body .woocommerce-result-count { color: var(--stp-ink-3); font-size: 14px; text-transform: none; letter-spacing: 0; }
body .woocommerce-ordering select {
  height: 40px; border: 1px solid var(--stp-line-2); border-radius: var(--stp-rc); color: var(--stp-ink);
}

body .ct-pagination .page-numbers {
  border: 1px solid var(--stp-line); border-radius: var(--stp-rc); color: var(--stp-ink); font-weight: 600;
}
body .ct-pagination .page-numbers.current { background: var(--stp-black); border-color: var(--stp-black); color: #fff; }
body .ct-pagination .page-numbers.dots { border-color: transparent; }

/* ==== Sidebar filters (spec §4.2) ==== */
body #sidebar .ct-widget { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--stp-line); }
body #sidebar .widget-title { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--stp-ink); }
/* Matches Blocksy filters.min.css (.ct-filter-widget .ct-filter-item-inner a > .ct-filter-count) + body. */
body .ct-filter-widget .ct-filter-item-inner a > .ct-filter-count {
  background: none; border: 0; padding: 0; border-radius: 0; min-width: 0;
  color: var(--stp-ink-3); font-size: 13px;
}
body .ct-filter-item .ct-checkbox { border-radius: 4px; border-color: var(--stp-line-2); }
body .ct-price-filter { --theme-palette-color-1: var(--stp-black); --theme-palette-color-2: var(--stp-black); }
body .ct-price-filter [class^="ct-price-filter-range-handle"] { border-color: var(--stp-black); }
body .ct-filter-item.stp-more-hidden { display: none; }
body .stp-showall {
  display: block; text-align: left; margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--stp-ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ==== FluentForm on normal pages (UI polish §3) ==== */
body .fluentform .ff-el-form-control { border: 1px solid var(--stp-line-2); border-radius: var(--stp-rc); }
body .fluentform input.ff-el-form-control { height: 44px; }
/* FluentForm prints a per-form rule (form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style))
 * with the form's button color; match it with one more level. */
body .fluentform form[class*="fluent_form_"] .ff-btn-submit:not(.ff_btn_no_style) {
  background: var(--stp-black); color: #fff; border: 0; border-radius: var(--stp-rc); font-weight: 700;
  height: 44px; min-height: 44px;   /* Blocksy [type=submit] min-height is 55px */
}
body .fluentform form[class*="fluent_form_"] .ff-btn-submit:not(.ff_btn_no_style):is(:hover, :focus, :active) { background: #26282c; color: #fff; }

/* ==== Footer (spec §4.6): spacing and type only, no content changes ==== */
body footer h3,
body footer .wp-block-heading { text-transform: none; letter-spacing: 0; font-weight: 700; }
body footer .ct-newsletter-subscribe-form input { border-radius: var(--stp-rc); height: 44px; }
body footer .ct-newsletter-subscribe-form button {
  border-radius: var(--stp-rc); height: 44px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
body .stp-vp-footer-dir,
body .stp-vp-footer-dir h2,
body .stp-vp-footer-dir h3 { text-transform: none; letter-spacing: 0; }
body .ct-trending-block .ct-module-title { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ==== One focus ring style for controls (spec §3) ==== */
/* (.stp-garage-action keeps the garage module's yellow ring: it sits on the dark bar.) */
body .stp-showall:focus-visible,
body .ct-pagination .page-numbers:focus-visible,
body .woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--stp-ink); outline-offset: 2px;
}

/* ==== Business hours (spec §5.1): <html> gets stp-open / stp-closed before first
 * paint (inline stp-hours.js). No class (no JS) → both controls show. ==== */
html.stp-open [data-stp-when="closed"],
html.stp-closed [data-stp-when="open"] { display: none !important; }
/* "closed-only": wording that only makes sense once we KNOW it's closed ("…reply next
 * business day") — hidden without JS, where the open wording + both controls show. */
html:not(.stp-closed) [data-stp-when="closed-only"] { display: none !important; }

/* ==== Shared buttons + icons (core UI: header, contact, help box, drawer) ==== */
.stp-i { width: 16px; height: 16px; flex: none; }
.stp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--stp-rc); border: 1px solid transparent;
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.stp-btn--y { background: var(--stp-yellow); color: var(--stp-ink); }
.stp-btn--y:hover { background: var(--stp-yellow-dark); color: var(--stp-ink); }
.stp-btn--k { background: var(--stp-black); color: #fff; }
.stp-btn--k:hover { background: #26282c; color: #fff; }
.stp-btn--k .stp-i { color: var(--stp-yellow); }
.stp-btn--o { background: #fff; color: var(--stp-ink); border-color: var(--stp-line-2); }
.stp-btn--o:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-btn:focus-visible, .stp-hc a:focus-visible {
  outline: 2px solid var(--stp-yellow); outline-offset: 2px;
}
.stp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--stp-green); }
.stp-status .stp-clk { width: 14px; height: 14px; stroke-width: 2.2; }
[data-stp-hours-host].is-closed .stp-status { color: var(--stp-ink-3); }

/* ==== Header (spec §4.1): one dark bar, 3px yellow line on top ==== */
body #header [data-device] { border-top: 3px solid var(--stp-yellow); }
body #header [data-row="top"] { display: none; }            /* emptied by migrations/ui-polish/header.php */
/* Menu: sentence case, no tiny caps; active item gets a yellow underline. */
body #header [data-id="menu"] > ul > li > a {
  text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: #e9eaec;
}
body #header [data-id="menu"] > ul > li.current-menu-item > a,
body #header [data-id="menu"] > ul > li > a:hover { color: #fff; }
/* (Blocksy's own yellow indicator marks the active item.) Tighter items: four
 * of them plus the location and phone blocks fit beside the logo. */
body #header [data-device="desktop"] [data-id="menu"] { --menu-items-spacing: 26px; --menu-items-gap: 14px; }
/* "More ▾" dropdown: white card, hairline, one shadow. */
body #header [data-id="menu"] .sub-menu {
  background: #fff; border: 1px solid var(--stp-line); border-radius: var(--stp-r);
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px; min-width: 240px;
}
body #header [data-id="menu"] .sub-menu li a {
  color: var(--stp-ink); font-size: 14.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 9px 12px; border-radius: var(--stp-rc);
}
body #header [data-id="menu"] .sub-menu li a:hover { background: var(--stp-wash); color: var(--stp-ink); }

.stp-hc { display: flex; align-items: center; gap: 22px; color: #fff; font-family: inherit; }
.stp-hc a { color: inherit; text-decoration: none; }
.stp-hc-loc, .stp-hc-phone { display: flex; flex-direction: column; line-height: 1.25; }
.stp-hc-loc { padding-right: 22px; border-right: 1px solid #2a2c30; }
.stp-hc-phone { align-items: flex-start; }
/* Fixed width so the open/closed text never moves the menu (Matt, 2026-09-30): sized for the
 * longest everyday status, "Closed – opens Wednesday 8 am" (215px at 12.5px); the header uses
 * the 'short' wording (no holiday name), and anything longer still ends in an ellipsis. */
#header .stp-hc-phone { width: 216px; }
.stp-hc-phone .stp-status { max-width: 100%; }
.stp-hc-phone .stp-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-hc-l1 { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.stp-hc-phone .stp-hc-l1 { font-size: 17px; letter-spacing: .01em; }
.stp-hc-l1 .stp-i { width: 15px; height: 15px; color: var(--stp-yellow); }
.stp-hc-l2 { font-size: 12.5px; color: #aeb1b6; margin-top: 5px; white-space: nowrap; }
.stp-hc-loc .stp-hc-l2 { padding-left: 22px; }
.stp-hc-loc:hover .stp-hc-l2 { color: #fff; text-decoration: underline; }
.stp-hc .stp-status { color: var(--stp-green-dark); font-weight: 500; }
.stp-hc.is-closed .stp-status { color: var(--stp-gray-dark); }
.stp-hc .stp-status span { color: #aeb1b6; }
body #header .ct-header-text:has(.stp-hc) { margin-right: 8px; }
@media (max-width: 1365.98px) { .stp-hc-loc { display: none; } }   /* address from 1366px; phone + status always */   /* phone + status stay; directions are on the contact page */

/* Mobile (option B, Matt 2026-09-30): row 1 logo + cart + menu (Blocksy); row 2 Directions +
 * Call (Email us while closed); row 3 the open status. (Blocksy shortens element ids to 6 chars —
 * "text~stp-mstat" renders as data-id="stp-ms" — so rows are targeted with :has() on our markup.) */
/* A fixed height (not auto): Blocksy's sticky header reserves space from each row's --height.
 * 101px = buttons row (10 + 44 + 10) + status row (1 + 36). */
body #header [data-device="mobile"] [data-row="bottom"]:has(.stp-mstat) {
  --height: 101px; background: var(--stp-charcoal); border-top: 1px solid #232529;
}
body #header [data-device="mobile"] [data-row="bottom"]:has(.stp-mstat) :is(.ct-container, .ct-container-fluid) { width: 100%; max-width: none; padding: 0; }
body #header [data-row="bottom"] .ct-header-text:has(.stp-mstat),
body #header [data-row="bottom"] .ct-header-text:has(.stp-mstat) .entry-content,
body #header [data-row="bottom"] [data-column]:has(.stp-mstat) { width: 100%; max-width: none; margin: 0; }
.stp-mstat { width: 100%; }
.stp-mstat-acts { display: flex; gap: 10px; padding: 10px 14px; }
.stp-mbtn {
  flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; border: 1px solid transparent;
}
.stp-mbtn .stp-i { width: 18px; height: 18px; }
.stp-mbtn--o { color: #fff; border-color: #4a4d53; }
.stp-mbtn--o .stp-i { color: var(--stp-yellow); }
.stp-mbtn--o:hover { color: #fff; border-color: #8a8d93; }
.stp-mbtn--y { flex: 1.25; background: var(--stp-yellow); color: var(--stp-ink); }
.stp-mbtn--y:hover { background: var(--stp-yellow-dark); color: var(--stp-ink); }
.stp-mbtn:focus-visible { outline: 2px solid var(--stp-yellow); outline-offset: 2px; }
/* Phones: the whole header is sticky (Blocksy sticky header, set by header.php); only the search +
 * My Garage bar below it scroll away. Anchors (#fitment…) land below it. */
@media (max-width: 999.98px) {
  html { scroll-padding-top: 200px; }
  /* The yellow line lives inside the pinned block (an inset shadow adds no height, so Blocksy's
   * reserved space still matches), and the logo row stays black in Blocksy's sticky state. */
  body #header [data-device="mobile"] { border-top: 0; }
  body #header [data-device="mobile"] [data-row="middle"] { box-shadow: inset 0 3px 0 var(--stp-yellow); }
  body #header [data-device="mobile"] [data-sticky] [data-row="middle"] { background-color: var(--stp-black); }
}
/* More room between the cart and the menu icon. */
body #header [data-device="mobile"] [data-id="trigger"] { margin-left: 26px; }
.stp-mstat-status { border-top: 1px solid #232529; height: 36px; display: flex; align-items: center; justify-content: center; }
.stp-mstat-status .stp-status { font-size: 14px; font-weight: 400; color: #e4e5e7; gap: 7px; }
.stp-mstat-status .stp-clk { width: 15px; height: 15px; color: var(--stp-green-dark); }
.stp-mstat-status b { color: var(--stp-green-dark); font-weight: 700; }
.stp-mstat.is-closed .stp-clk { color: var(--stp-gray-dark); }
.stp-mstat.is-closed .stp-mstat-status b { color: #fff; }
@media (max-width: 359.98px) { .stp-mbtn { font-size: 14px; gap: 6px; } .stp-mstat-acts { gap: 8px; padding: 10px; } }
.stp-drawer-acts { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }
.stp-drawer-acts .stp-btn { width: 100%; height: 46px; }
/* Blocksy's drawer is dark here: Call is the main action (yellow), directions an outline. */
#offcanvas .stp-drawer-acts .stp-btn--k { background: var(--stp-yellow); color: var(--stp-ink); }
#offcanvas .stp-drawer-acts .stp-btn--k .stp-i { color: var(--stp-ink); }
#offcanvas .stp-drawer-acts .stp-btn--o { background: transparent; color: #fff; border-color: #4a4d53; }
#offcanvas .stp-drawer-acts .stp-btn--o:hover { border-color: #fff; }

/* ==== Contact page (spec §4.4) ==== */
.stp-anton { font-family: Anton, Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .012em; }
.stp-contact-band { background: var(--stp-black); padding: 40px 32px 36px; }
.stp-contact-in { max-width: 1226px; margin: 0 auto; }
.stp-contact-crumb { font-size: 13px; color: var(--stp-gray-dark); }
.stp-contact-crumb a { color: var(--stp-gray-dark); text-decoration: none; }
.stp-contact-crumb a:hover { color: #fff; }
.stp-contact-band h1 { color: #fff; font-size: 46px; line-height: 1.05; margin: 8px 0 6px; }
.stp-contact-band p { color: #c9ccd1; font-size: 16px; margin: 0; }
.stp-contact-grid {
  display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 56px; align-items: start;
  grid-template-areas: "call form" "hours form" "map form" "tips form";
  grid-template-rows: auto auto auto 1fr;
  max-width: 1290px; margin: 0 auto; padding: 44px 32px 60px;
}
.stp-ci-call { grid-area: call; } .stp-ci-hours { grid-area: hours; } .stp-ci-map { grid-area: map; }
.stp-ci-tips { grid-area: tips; } .stp-cform { grid-area: form; }
.stp-ci + .stp-ci { margin-top: 16px; }
/* Call, hours and map are each a card (Matt, 2026-09-30); the tips stay plain text below. */
.stp-card {
  background: #fff; border: 1px solid var(--stp-line); border-radius: var(--stp-r); box-shadow: var(--stp-shadow);
  padding: 20px 22px;
}
.stp-ci-tips { margin-top: 26px !important; padding: 0 2px; }
.stp-ci-map .stp-mapcard { margin-top: 0; }
.stp-mapcard-h { padding: 14px 16px 10px; margin: 0; }
.stp-k { font-size: 13px; font-weight: 600; color: var(--stp-ink-3); margin: 0 0 4px; }
/* Open/closed badge on the contact page: the first thing people look for. */
.stp-status--badge {
  gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; margin-bottom: 14px;
  background: #e6f3ea; color: var(--stp-green); font-size: 15px; font-weight: 700;
}
.stp-status--badge .stp-clk { width: 17px; height: 17px; }
[data-stp-hours-host].is-closed .stp-status--badge { background: var(--stp-wash); color: var(--stp-ink-2); }
.stp-bigphone { font-size: 34px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; line-height: 1.15; }
.stp-bigphone a { color: var(--stp-ink); text-decoration: none; }
.stp-ci-closed { margin: 0; color: var(--stp-ink-2); font-size: 15px; line-height: 1.5; }
.stp-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 20px; font-size: 15px; margin-top: 6px; }
.stp-hours span:nth-child(odd) { color: var(--stp-ink-3); }
.stp-ci-note { margin: 6px 0 0; font-size: 13px; color: var(--stp-ink-3); }
.stp-ci-tips ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.8; color: var(--stp-ink-2); }
.stp-cform {
  background: #fff; border: 1px solid var(--stp-line); border-radius: var(--stp-r); box-shadow: var(--stp-shadow);
  padding: 30px 32px;
}
.stp-cform h2 { font-size: 22px; font-weight: 800; margin: 0; text-transform: none; letter-spacing: 0; }
.stp-cform-sub { color: var(--stp-ink-3); font-size: 14.5px; margin: 4px 0 16px; }
.stp-cform .ff-el-input--label label { font-weight: 600; font-size: 14px; color: var(--stp-ink); }

/* ==== About page (/about/, page 14 — core blocks with these classes; migrations/ui-polish/about-page.php) ====
 * Reuses the contact page's title band (.stp-contact-band / -in / -crumb) and .stp-card. */
body .entry-content > .stp-about-wrap { margin-top: 0; margin-bottom: 0; }
body .entry-content > .stp-contact-band { margin-bottom: 0; }
.stp-contact-band .stp-contact-in > * { margin-top: 0; margin-bottom: 0; }
.stp-contact-band .stp-contact-in > h1 { margin: 8px 0 6px; }
.stp-about { max-width: 1290px; margin: 0 auto; padding: 44px 32px 60px; }
body .stp-about-cols { gap: 56px; margin: 0; align-items: flex-start; }
/* Beats core's .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0 }. */
body .stp-about-cols > .wp-block-column.stp-about-side { flex: 0 0 400px; }
.stp-about p { font-size: 16px; line-height: 1.7; color: var(--stp-ink-2); margin: 0 0 16px; }
.stp-about p.stp-about-lead { font-size: 19px; line-height: 1.55; color: var(--stp-ink); font-weight: 500; }
.stp-about h2 { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--stp-ink); margin: 32px 0 10px; text-transform: none; letter-spacing: 0; }
.stp-about a:not(.stp-btn) { color: var(--stp-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.stp-about figure { margin: 0; }
.stp-about-strip { margin: 24px 0 8px !important; }
.stp-about-strip img, .stp-about-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.stp-about-facts { padding: 14px 14px 18px; }
.stp-about-list { list-style: none; margin: 14px 6px 0; padding: 0; }
.stp-about-list li { padding: 9px 0; border-bottom: 1px solid var(--stp-line); margin: 0; }
.stp-about-list li:last-child { border-bottom: 0; }
.stp-about-list b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--stp-ink); }
.stp-about-list span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--stp-ink-3); }
.stp-about p.stp-about-acts { display: flex; gap: 10px; margin: 14px 6px 0; }
.stp-about-acts .stp-btn { flex: 1; }
.stp-about-areas { margin-top: 40px; }
.stp-about-areas h2 { margin-top: 0; }
.stp-about-areas p { font-size: 15px; margin: 0; }
@media (max-width: 900px) {
  .stp-about { padding: 20px 16px 40px; }
  body .stp-about-cols { flex-wrap: wrap !important; gap: 24px; }
  body .stp-about-cols > .wp-block-column.stp-about-main, body .stp-about-cols > .wp-block-column.stp-about-side { flex: 1 1 100%; }
  body .stp-about-cols > .wp-block-column.stp-about-side { max-width: 480px; }   /* the 400px photo stays sharp on tablets */
  .stp-about p.stp-about-lead { font-size: 17.5px; }
  .stp-about-areas { margin-top: 24px; }
}

/* Part / query row (contact page + request modal, spec §4.5) */
.stp-partrow { display: flex; gap: 12px; align-items: center; background: var(--stp-wash); border-radius: 8px; padding: 10px; margin: 0 0 14px; }
.stp-partrow img { width: 56px; height: 42px; object-fit: cover; border-radius: 5px; flex: none; }
.stp-partrow b { display: block; font-size: 14px; line-height: 1.35; color: var(--stp-ink); }
.stp-partrow span { display: block; font-size: 13px; color: var(--stp-ink-2); margin-top: 2px; }
.stp-partrow--q span { margin: 0 0 2px; }
.stp-partrow > div { flex: 1; min-width: 0; }
.stp-partrow-clear {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px;
  height: 32px; min-height: 0; padding: 0 10px; border: 1px solid var(--stp-line-2); border-radius: var(--stp-rc);
  background: #fff; color: var(--stp-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stp-partrow-clear .stp-i { width: 13px; height: 13px; }
.stp-partrow-clear:hover { border-color: var(--stp-ink); }
.stp-partrow-clear:focus-visible, .stp-cform h2:focus-visible, .stp-rf-wrap h2:focus-visible { outline: 2px solid var(--stp-ink); outline-offset: 2px; }
.stp-cform h2:focus:not(:focus-visible), .stp-rf-wrap h2:focus:not(:focus-visible) { outline: none; }

/* Map card (spec §5.3) */
.stp-mapcard { border: 1px solid var(--stp-line); border-radius: var(--stp-r); overflow: hidden; background: #fff; box-shadow: var(--stp-shadow); margin-top: 8px; }
.stp-mapwrap { position: relative; }
.stp-mapwrap iframe { display: block; width: 100%; height: 240px; border: 0; }
.stp-map-tap { display: none; }
.stp-mapfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--stp-line); }
.stp-mapcard > .stp-mapfoot:first-child { border-top: 0; }
.stp-mapfoot b { display: block; font-size: 14.5px; }
.stp-mapfoot span { font-size: 13px; color: var(--stp-ink-3); }
.stp-mapfoot .stp-btn { height: 38px; font-size: 14px; padding: 0 14px; }

@media (max-width: 900px) {
  .stp-contact-grid { grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas: "call" "map" "hours" "form" "tips"; padding: 20px 16px 40px; }
  .stp-cform { margin-top: 16px; padding: 22px 18px; }
  .stp-card { padding: 18px; }
  .stp-contact-band { padding: 22px 16px; }
  .stp-contact-band h1 { font-size: 32px; }
  .stp-bigphone { font-size: 28px; }
  .stp-ci-call .stp-btn { width: 100%; }
}
@media (max-width: 700px) {
  .stp-mapwrap iframe { height: 200px; pointer-events: none; }
  .stp-map-tap {
    position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28)); text-decoration: none;
  }
  .stp-map-tap span {
    display: flex; gap: 6px; align-items: center; background: #fff; color: var(--stp-ink); border-radius: 999px;
    padding: 8px 14px; font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  }
  .stp-mapwrap + .stp-mapfoot .stp-btn { display: none; }   /* the tap layer is the directions control */
}
/* Menu sits next to the logo (header.php puts both in the row's start slot). */
body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] [data-id="menu"] { margin-left: 64px; }

/* Laptop widths (1000–1439px): logo + four menu items + location + phone + icons need
 * ~1200px; trim the (enlarged) desktop logo so the location block still fits ≥1280px. */
@media (min-width: 1000px) and (max-width: 1439.98px) {
  html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-id="logo"] .site-logo-container { --logo-max-height: 76px; }
}
/* Contact map card: label and footer line up with the Call / Hours cards (no divider under the label). */
.stp-ci-map .stp-mapcard-h { padding: 20px 22px 8px; }
.stp-ci-map .stp-mapfoot { padding: 12px 22px 18px; }
.stp-ci-map .stp-mapcard-h + .stp-mapfoot { border-top: 0; padding-top: 0; }
.stp-ci-map .stp-mapwrap + .stp-mapfoot { padding-top: 14px; }
@media (max-width: 900px) { .stp-ci-map .stp-mapcard-h { padding: 18px 18px 8px; } .stp-ci-map .stp-mapfoot { padding-left: 18px; padding-right: 18px; } }
/* Laptop widths: a little less space between logo, menu items and the address block so all of it
 * fits from 1280px (the full 64px / 40px spacing applies from 1440px — it fits there since the cart
 * moved down into the search row, 2.13.19). */
@media (min-width: 1000px) and (max-width: 1439.98px) {
  body #header [data-device="desktop"] [data-id="menu"] { --menu-items-spacing: 22px; --menu-items-gap: 12px; }
  body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] [data-id="menu"] { margin-left: 40px; }
}
/* 1000–1139px (e.g. iPad landscape): the menu ran into the phone block — smaller logo, tighter menu. */
@media (min-width: 1000px) and (max-width: 1139.98px) {
  html [data-header*="type-1"] .ct-header [data-device="desktop"] [data-id="logo"] .site-logo-container { --logo-max-height: 62px; }
  body #header [data-device="desktop"] [data-id="menu"] { --menu-items-spacing: 18px; --menu-items-gap: 10px; }
  body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] [data-id="menu"] { margin-left: 28px; }
}

/* ==== Phones: no zoom-on-focus ====
 * iOS Safari zooms the page into any text field or dropdown under 16px when it gets focus
 * (e.g. the bar search opened by the magnifying-glass button). Every form control is 16px on
 * phones; !important because several plugin/theme rules set smaller sizes with more specific selectors. */
@media (max-width: 999.98px) {
  input:is([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="password"]),
  select, textarea { font-size: 16px !important; }
}

/* [stp_best_sellers] — sidebar list (plan 19a) */
.stp-bestsellers{list-style:none;margin:0;padding:0}
.stp-bestsellers li{margin:0 0 12px}
.stp-bestsellers a{display:grid;grid-template-columns:64px 1fr;gap:2px 12px;align-items:center;text-decoration:none;color:inherit}
.stp-bestsellers img{grid-row:span 2;width:64px;height:64px;object-fit:cover;border-radius:4px}
.stp-bs-t{font-size:14px;line-height:1.3}
.stp-bs-p{font-size:13px;font-weight:600}