/* =========================================================================
   AltTune — Woo CATALOG: shop archive, product cards, single product.
   Owned by the catalog agent. Scope EVERYTHING under .at-woo.
   Shared base (inputs, notices, price type, breadcrumb, onsale badge) lives
   in woo-shared.css. Colors/type/spacing come from tokens.css. Orange is an
   ACCENT only — small highlights, hover wipes, save badges.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Shop hero — the .av-hero clip-path photo hero, matching /obd-ii/ and the
   vehicles archive. Self-contained subset copied under the `.at-shop-hero`
   scope (does NOT depend on the obd or vehicles plugin classes). The clip path
   is built at runtime by the theme's assets/js/hero-clip.js (userSpaceOnUse);
   a CSS rounded-rect fallback keeps the box clean before JS runs / on mobile.
   ---------------------------------------------------------------------- */
.at-shop-hero.av-hero {
  padding: 15px 32px 0;
  background: #fff;
  margin-bottom: 24px;
  position: relative;
}
.at-shop-hero .av-hero-shape {
  position: relative;
  max-width: 1860px;
  margin: 0 auto;
  aspect-ratio: 1860 / 460;
  /* entrance reveal — fade + scale once hero-clip.js sets .is-revealed */
  opacity: 0;
  transform: scale(0.985);
  transform-origin: center;
  transition:
    opacity 620ms cubic-bezier(.32, .72, 0, 1),
    transform 760ms cubic-bezier(.32, .72, 0, 1);
}
.at-shop-hero .av-hero-shape.is-revealed { opacity: 1; transform: scale(1); }

/* Checkout-only: a shorter hero. hero-clip.js rebuilds the clip from the shape's
   live size, so the narrower aspect-ratio simply yields a shorter clipped band. */
.at-shop-hero--compact .av-hero-shape { aspect-ratio: 1860 / 300; }

.at-shop-hero .av-hero-photo {
  position: absolute;
  inset: 0;
  background-color: var(--rubber-black, #050505);
  background-size: cover;
  background-position: center;
  border-radius: clamp(16px, 1.78vw, 30px); /* fallback before the JS clip-path fills in — matches JS respR */
  clip-path: url(#av-hero-clip);
  -webkit-clip-path: url(#av-hero-clip);
}
.at-shop-hero .av-hero-svg {
  position: absolute;
  inset: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.at-shop-hero .av-hero-badge {
  position: absolute;
  right: 0.11%;
  bottom: 0;
  width: 5.16%;
  aspect-ratio: 1 / 1;
  background: var(--rubber-black, #050505);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translate(8px, 8px) scale(0.7);
  transform-origin: center;
  transition:
    opacity 480ms cubic-bezier(.32, .72, 0, 1),
    transform 540ms cubic-bezier(.32, .72, 0, 1);
}
.at-shop-hero .av-hero-shape.is-revealed .av-hero-badge {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition-delay: 120ms;
}
.at-shop-hero .av-hero-badge svg {
  width: 44%;
  height: auto;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .at-shop-hero .av-hero-shape,
  .at-shop-hero .av-hero-shape.is-revealed,
  .at-shop-hero .av-hero-badge,
  .at-shop-hero .av-hero-shape.is-revealed .av-hero-badge {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.at-shop-hero .av-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 56px 48px;
  max-width: 1140px;
  margin: 0 auto;
}
.at-shop-hero .av-hero-content .crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 18px;
}
.at-shop-hero .av-hero-content .crumbs a { color: inherit; text-decoration: none; }
.at-shop-hero .av-hero-content .crumbs a:hover { color: #fff; }
.at-shop-hero .av-hero-content .crumbs .sep { opacity: .4; }
.at-shop-hero .av-hero-content h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
.at-shop-hero .av-hero-content .sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  max-width: 64ch;
  margin: 0;
}
.at-shop-hero .av-hero-content .sub strong { color: #fff; font-weight: 700; }

/* Shop POWER SEARCH — input SHELL + magnifier only. Premium pill on the dark
   hero (mirrors the obd / vehicles av-search-hero). The dropdown PANEL and its
   suggestion internals belong to the search-UI agent's woo-search.css. */
.at-shop-hero .at-shop-search {
  position: relative;
  width: 100%;
  margin-top: 20px;
  max-width: 680px;
}
.at-shop-hero .at-shop-search__icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: color var(--dur-base) ease;
}
.at-shop-hero .at-shop-search .at-shop-search__input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 112px 0 46px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.at-shop-hero .at-shop-search .at-shop-search__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.at-shop-hero .at-shop-search .at-shop-search__input:hover { border-color: rgba(255, 255, 255, 0.28); }
.at-shop-hero .at-shop-search .at-shop-search__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.at-shop-hero .at-shop-search .at-shop-search__input:focus + .at-shop-search__icon,
.at-shop-hero .at-shop-search:focus-within .at-shop-search__icon { color: rgba(255, 255, 255, 0.9); }
/* Submit button — black pill inside the search field (mirrors av-search-hero__submit). */
.at-shop-hero .at-shop-search__submit {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  background: var(--rubber-black, #050505);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) ease, transform var(--dur-base) ease;
}
.at-shop-hero .at-shop-search__submit:hover { background: #1a1a1a; }
.at-shop-hero .at-shop-search__submit:active { transform: scale(0.97); }
.at-shop-hero .at-shop-search__submit:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
/* Clear the native search "×" so the pill stays clean. */
.at-shop-hero .at-shop-search .at-shop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
@media (max-width: 720px) {
  .at-shop-hero .at-shop-search { max-width: none; margin-top: 16px; }
  .at-shop-hero .at-shop-search .at-shop-search__input { height: 48px; font-size: 14px; padding-right: 96px; }
  .at-shop-hero .at-shop-search__submit { padding: 0 16px; font-size: 13px; }
}

/* Mobile — drop the notch for a simple rounded rect, hide the badge. */
@media (max-width: 720px) {
  .at-shop-hero.av-hero { padding: 12px 16px 0; }
  .at-shop-hero .av-hero-shape { aspect-ratio: 16 / 11; }
  .at-shop-hero .av-hero-photo {
    clip-path: inset(0 round clamp(14px, 3vw, 22px)) !important;
    -webkit-clip-path: inset(0 round clamp(14px, 3vw, 22px)) !important;
  }
  .at-shop-hero .av-hero-badge { display: none; }
  .at-shop-hero .av-hero-content { padding: 28px 18px 24px; }
}

/* Single-product editorial header holds only the breadcrumb (no title) — drop
   the crumbs' bottom margin so the card isn't bottom-heavy. */
.news-hero-editorial--crumbs-only .news-hero-editorial__crumbs { margin-bottom: 0; }

/* 0a. Shop landing + product-category archives only: a shorter, more compact
   hero with a smaller title and tighter bottom padding. Single product keeps
   the taller default. Desktop-scoped so the mobile treatment above is intact. */
@media (min-width: 721px) {
  body.woocommerce-shop .at-shop-hero .av-hero-shape,
  body.tax-product_cat .at-shop-hero .av-hero-shape {
    aspect-ratio: 1860 / 360;
  }
  body.woocommerce-shop .at-shop-hero .av-hero-content h1,
  body.tax-product_cat .at-shop-hero .av-hero-content h1 {
    font-size: clamp(24px, 3.2vw, 40px);
  }
  body.woocommerce-shop .at-shop-hero .av-hero-content,
  body.tax-product_cat .at-shop-hero .av-hero-content {
    padding-bottom: 22px;
  }
}

/* -------------------------------------------------------------------------
   1. Category filter pills + toolbar
   ---------------------------------------------------------------------- */
.at-woo .at-shop-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-6);
}
.at-woo .at-shop-cats__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: #fff;
  transition: border-color var(--dur-base) ease, color var(--dur-base) ease, background var(--dur-base) ease;
}
.at-woo .at-shop-cats__pill:hover { border-color: var(--rubber-black); }
.at-woo .at-shop-cats__pill.is-active {
  background: var(--rubber-black);
  border-color: var(--rubber-black);
  color: #fff;
}
.at-woo .at-shop-cats__count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.at-woo .at-shop-cats__pill.is-active .at-shop-cats__count { color: var(--steel-silver); }

.at-woo .at-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}
.at-woo .at-shop-toolbar .woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.at-woo .at-shop-toolbar .woocommerce-ordering { margin: 0; }
/* Sort dropdown — custom-chromed native select: strip OS styling, add a hairline
   pill (matching the view toggle) and an inline chevron. */
.at-woo .at-shop-toolbar select.orderby {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: auto;
  min-width: 220px;
  margin: 0;
  padding: 10px 40px 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--fg-1);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.at-woo .at-shop-toolbar select.orderby::-ms-expand { display: none; }
.at-woo .at-shop-toolbar select.orderby:hover { border-color: var(--rubber-black); }
.at-woo .at-shop-toolbar select.orderby:focus,
.at-woo .at-shop-toolbar select.orderby:focus-visible {
  outline: none;
  border-color: var(--rubber-black);
  box-shadow: 0 0 0 3px rgba(5, 5, 5, 0.08);
}
.at-woo .at-shop-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* List/grid view toggle — two icon buttons, hairline pill group. */
.at-woo .at-shop-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: #fff;
}
.at-woo .at-shop-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.at-woo .at-shop-view__btn:hover { color: var(--rubber-black); background: var(--steel-silver-50); }
.at-woo .at-shop-view__btn.is-active,
.at-woo .at-shop-view__btn[aria-pressed="true"] {
  background: var(--rubber-black);
  color: #fff;
}
.at-woo .at-shop-view__btn:focus-visible {
  outline: 2px solid var(--performance-orange);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   2. Product grid + cards (idiom from theme cards: dark/clean media, Jost
   uppercase title, mono micro-label, display-font price)
   ---------------------------------------------------------------------- */
.at-woo ul.products,
.at-woo .products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
  /* WC's woocommerce-layout.css clearfixes ul.products with ::before/::after
     (display:table) — those phantom grid items create empty tracks and shove
     the real cards to the right. Kill them. */
}
.at-woo ul.products::before,
.at-woo ul.products::after { content: none !important; display: none !important; }

@media (max-width: 1100px) { .at-woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .at-woo ul.products { grid-template-columns: 1fr; } }

.at-woo li.at-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
  /* Neutralise WC's float/percent-width/margin layout (woocommerce-layout.css
     sets float:left; width:22.05%; margin:0 3.8% ... on li.product) so every
     card simply fills its grid track from the left edge. */
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}
.at-woo li.at-product-card:hover {
  border-color: var(--rubber-black);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.at-woo .at-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}
.at-woo .at-product-card__media img,
.at-woo .at-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 540ms cubic-bezier(.32,.72,0,1);
}
.at-woo li.at-product-card:hover .at-product-card__img { transform: scale(1.04); }

.at-woo .at-product-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
/* `.onsale` chip already styled in woo-shared.css; bundle chip = orange accent */
.at-woo .at-product-card__badges .onsale { position: static; margin: 0; }
.at-woo .at-badge-bundle {
  display: inline-block;
  background: var(--performance-orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.at-woo .at-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-5);
  flex: 1;
}
.at-woo .at-product-card__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
/* Title + price share one row; price pinned to the right. */
.at-woo .at-product-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.at-woo .at-product-card__head .price {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.005em;
  color: var(--rubber-black);
  white-space: nowrap;
}
.at-woo .at-product-card__head .price del { font-size: 14px; opacity: .6; }
.at-woo .at-product-card__head .price ins { text-decoration: none; }
.at-woo .at-product-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Compatibility block — micro-label above the vehicle/brand/ECU coverage. */
.at-woo .at-product-card__compat-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.at-woo .at-product-card__compat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Vehicle / brand / ECU coverage line — quiet mono micro-type, sits under
   the title in both views. */
.at-woo .at-product-card__compat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--fg-2);
}
.at-woo .at-product-card__compat-sep { color: var(--steel-silver); }
.at-woo .at-product-card__compat-stat { white-space: nowrap; }

/* Cable-TYPE channel chips (OBD / BENCH / BOOT) — same connection icons +
   palette as the Kit Builder + vehicle-compat channel tags. Small, quiet,
   sits under the title in BOTH grid and list views. Only cable/adapter SKUs
   carry channels; everything else renders nothing. */
.at-woo .at-product-card__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.at-woo .at-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.at-woo .at-channel-chip__icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
}
.at-woo .at-channel-chip__icon svg { width: 100%; height: 100%; display: block; }
.at-woo .at-channel-chip__label { white-space: nowrap; }
/* Channel palette (light) — OBD green, BENCH blue, BOOT violet. */
.at-woo .at-channel-chip--obd   { background: #ecfdf5; color: #065f46; border-color: #d1fae5; }
.at-woo .at-channel-chip--bench { background: #eff6ff; color: #1e40af; border-color: #dbeafe; }
.at-woo .at-channel-chip--boot  { background: #f5f3ff; color: #5b21b6; border-color: #ede9fe; }
.at-woo .at-product-card__title a {
  color: var(--rubber-black);
  text-decoration: none;
}
.at-woo .at-product-card__title a:hover { color: var(--performance-orange); }

.at-woo .at-product-card__save {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--success);
  margin: 0;
}
.at-woo .at-product-card__save .woocommerce-Price-amount { font-family: inherit; font-weight: 600; color: inherit; }

/* Hairline separator between the text content and the channels + action row.
   Carries the margin-top:auto so the rule + foot sit together at the card
   bottom (equal-height cards in the grid). */
.at-woo .at-product-card__rule {
  margin: var(--space-3) 0 0;
  margin-top: auto;
  border: 0;
  border-top: 1px solid var(--border-1);
  height: 0;
}
.at-woo .at-product-card__foot {
  padding-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Channels on the left, add-to-cart pinned right (margin-left:auto keeps the
   CTA right even when a product has no channel chips). */
.at-woo .at-product-card__cta { flex: none; margin-left: auto; }

/* GRID view (and the related-products carousel, which uses the same compact
   card): the foot wraps so the channel chips + the "Compatible vehicles" block
   share the top row, and the add-to-cart drops to its own full-width row
   beneath them. List view keeps the single inline row above. */
.at-woo ul.products.is-grid .at-product-card__foot,
.at-woo .at-related-track .at-product-card__foot {
  flex-wrap: wrap;
  row-gap: 12px;
}
.at-woo ul.products.is-grid .at-product-card__cta,
.at-woo .at-related-track .at-product-card__cta {
  flex-basis: 100%;
  margin-left: 0;
}
.at-woo ul.products.is-grid .at-product-card__cta .at-btn,
.at-woo .at-related-track .at-product-card__cta .at-btn {
  width: 100%;
}

/* Short excerpt — LIST view only; the grid keeps the compact card. */
.at-woo .at-product-card__excerpt {
  display: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

/* -------------------------------------------------------------------------
   2b. LIST view (default on product archives — `is-list` is stamped on
   ul.products server-side from the alttune_shop_view cookie, so the first
   paint is already correct; `is-grid` keeps the 3-up grid above).
   One card per row: media left, body (title / excerpt / price / CTA) right.
   ---------------------------------------------------------------------- */
.at-woo ul.products.is-list { grid-template-columns: 1fr; gap: var(--space-4); }

.at-woo ul.products.is-list li.at-product-card { flex-direction: row; }

.at-woo ul.products.is-list .at-product-card__media {
  flex: 0 0 260px;
  width: 260px;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 190px;
  border-right: 1px solid var(--border-1);
}
.at-woo ul.products.is-list .at-product-card__body {
  padding: 22px 26px;
  gap: 8px;
  justify-content: center;
}
.at-woo ul.products.is-list .at-product-card__title { font-size: 16px; }
.at-woo ul.products.is-list .at-product-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 72ch;
}
/* List cards are vertically centered, not bottom-aligned — cancel the grid's
   margin-top:auto on the rule so the separator sits in natural flow. */
.at-woo ul.products.is-list .at-product-card__rule { margin-top: var(--space-3); }
.at-woo ul.products.is-list .at-product-card__foot {
  justify-content: flex-start;
  gap: 20px;
}

/* List view — tablet/mobile: compact ~96px thumbnail on the left. */
@media (max-width: 720px) {
  .at-woo ul.products.is-list .at-product-card__media {
    flex-basis: 96px;
    width: 96px;
    min-height: 96px;
    border-right: 1px solid var(--border-1);
  }
  .at-woo ul.products.is-list .at-product-card__media img,
  .at-woo ul.products.is-list .at-product-card__img { padding: 8px; }
  .at-woo ul.products.is-list .at-product-card__body { padding: 14px 16px; gap: 6px; }
  .at-woo ul.products.is-list .at-product-card__title { font-size: 13.5px; }
  .at-woo ul.products.is-list .at-product-card__excerpt { font-size: 12.5px; -webkit-line-clamp: 2; }
  .at-woo ul.products.is-list .at-product-card__foot {
    flex-wrap: wrap;
    gap: 10px;
  }
  .at-woo ul.products.is-list .at-product-card__badges { top: 8px; left: 8px; }
  .at-woo ul.products.is-list .at-product-card__badges .onsale,
  .at-woo ul.products.is-list .at-badge-bundle { font-size: 9px; padding: 4px 6px; }
}

/* -------------------------------------------------------------------------
   3. Pagination
   ---------------------------------------------------------------------- */
.at-woo .woocommerce-pagination {
  margin-top: var(--space-7);
  text-align: center;
}
.at-woo .woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.at-woo .woocommerce-pagination ul li { border: 0; margin: 0; }
.at-woo .woocommerce-pagination a.page-numbers,
.at-woo .woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.at-woo .woocommerce-pagination a.page-numbers:hover { border-color: var(--rubber-black); }
.at-woo .woocommerce-pagination span.current {
  background: var(--rubber-black);
  border-color: var(--rubber-black);
  color: #fff;
}

/* When JS infinite-scroll is active, the pagination becomes a quiet fallback
   that we visually hide (woo-shop.js adds .at-infinite-on to .at-shop-main). */
.at-woo .at-shop-main.at-infinite-on .woocommerce-pagination { display: none; }

/* -------------------------------------------------------------------------
   3b. Infinite scroll — sentinel + loader. Unhidden by JS; the sentinel is a
   zero-height tripwire below the grid, the loader shows only while fetching.
   ---------------------------------------------------------------------- */
.at-shop-infinite {
  position: relative;
  margin-top: var(--space-6);
}
.at-shop-infinite__sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}
.at-shop-infinite__loader {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.at-shop-infinite.is-loading .at-shop-infinite__loader { display: flex; }
.at-shop-infinite__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--steel-silver-200);
  border-top-color: var(--rubber-black);
  border-radius: 50%;
  animation: at-shop-spin 720ms linear infinite;
}
@keyframes at-shop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .at-shop-infinite__spinner { animation: none; border-top-color: var(--steel-silver-200); }
}

/* =========================================================================
   SINGLE PRODUCT
   ========================================================================= */

/* 4. Two-column shell — gallery left, summary right. Lives inside the standard
   site .at-container so it shares the exact content width as every inner page.
   WC's woocommerce.css floats div.product .images/.summary at 48% — we use grid,
   so reset those WC layout rules on our columns to stop the cramped/overflow. */
/* Single product gets a wider content container (1440px) than the 1280px the
   rest of the shop uses (styles.css .at-container wins at 1280 otherwise). */
body.single-product .at-woo .at-container { max-width: 1440px; }

/* Shop landing + category archives + product search share the same 1440px
   content width as the single product and the rest of the site templates. */
body.post-type-archive-product .at-woo .at-container,
body.tax-product_cat .at-woo .at-container,
body.woocommerce-shop .at-woo .at-container { max-width: 1440px; }

.at-woo div.product.at-sp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: var(--space-7);
  row-gap: var(--space-6);
  align-items: start;
  width: 100%;
  /* alientech-sync's bundles frontend.css also defines a generic
     `.at-sp-layout { max-width:640px }` (for its [alientech_single_product_layout]
     shortcode) — a class-name collision that squished our grid. Our selector
     (0,3,2) outranks it; reset the leaked cap. */
  max-width: none;
  margin: 0;
}
.at-woo .at-sp-layout::before,
.at-woo .at-sp-layout::after { content: none !important; display: none !important; }
.at-woo .at-sp-layout > .at-sp-layout__media,
.at-woo .at-sp-layout > .at-sp-layout__summary,
.at-woo .at-sp-layout > .at-sp-layout__extra {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  min-width: 0;
}
@media (max-width: 900px) {
  .at-woo div.product.at-sp-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}
.at-woo .at-sp-layout__extra { grid-column: 1 / -1; }

/* 4a. Gallery / media column */
.at-woo .at-sp-layout__media { position: relative; }
/* WC's woocommerce.css forces `.woocommerce div.product div.images { float:left;
   width:48% }` (0,3,2) on the gallery itself (it carries `.images`) — that lives
   INSIDE our media column, so it squished + cropped the photo. Override it. */
.at-woo .at-sp-layout__media .woocommerce-product-gallery,
.at-woo div.product .woocommerce-product-gallery.images {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--pure-white, #fff);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* PB-Tech layout: vertical thumbnail strip (left) + large main image (right).
     Flexslider renders .woocommerce-product-gallery__wrapper (main) and
     .flex-control-thumbs (thumbs) as siblings; we flex-row them and reorder so
     the thumbs sit first/left. Single-image products omit .flex-control-thumbs,
     so the main image just fills the full width. */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.at-woo .at-sp-layout__media .woocommerce-product-gallery__wrapper { margin: 0; min-width: 0; }
/* Flexslider wraps __wrapper in .flex-viewport at runtime, so the MAIN-image
   flex child of the gallery is .flex-viewport (thumbs = .flex-control-thumbs).
   Before JS init (no-JS / pre-init paint) __wrapper itself is the direct child —
   cover both so the main image always takes the right-hand column. */
.at-woo .at-sp-layout__media .flex-viewport,
.at-woo .at-sp-layout__media > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
/* Main photo: fill the width, keep its own aspect, NEVER crop. */
.at-woo .at-sp-layout__media .woocommerce-product-gallery__image,
.at-woo .at-sp-layout__media .woocommerce-product-gallery__image a { display: block; }
.at-woo .at-sp-layout__media .woocommerce-product-gallery img,
.at-woo .at-sp-layout__media .woocommerce-product-gallery__image img,
.at-woo .at-sp-layout__media .woocommerce-product-gallery .wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 4 / 3;
  padding: 28px;
  box-sizing: border-box;
}
/* Sale flash inside gallery — already styled (.onsale in woo-shared); position it */
.at-woo .at-sp-layout__media .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
}
/* Lightbox trigger (PhotoSwipe magnifier) — themed pill on the photo. */
.at-woo .at-sp-layout__media .woocommerce-product-gallery { position: relative; }
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-indent: 0;
  font-size: 0;
  text-decoration: none;
  transition: background var(--dur-base) ease, transform var(--dur-base) ease;
}
/* Hide WordPress's emoji-replaced 🔍 <img> (font-size:0 can't collapse an
   image) so it stops overlapping the themed ::before glyph below. */
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger img,
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger .emoji,
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger > span {
  display: none !important;
}
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger:hover {
  background: var(--performance-orange);
  transform: scale(1.05);
}
/* Official AltTune search glyph (matches the nav + global-search icon). */
.at-woo .at-sp-layout__media .woocommerce-product-gallery__trigger::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6.25'/%3E%3Cpath d='M14 14l3.5 3.5'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6.25'/%3E%3Cpath d='M14 14l3.5 3.5'/%3E%3C/svg%3E");
}
/* Thumbnails strip (flexslider control nav) — VERTICAL column on the left of
   the main image (PB-Tech style). ~72px fixed-width track that scrolls if the
   product has many images; thumbs stack top-to-bottom. */
.at-woo .at-sp-layout__media .flex-control-thumbs {
  order: 1;
  flex: 0 0 72px;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  margin: 0;
  list-style: none;
  align-self: stretch;
  max-height: 560px;
  overflow-y: auto;
  border-right: 1px solid var(--border-1);
  background: #fff;
}
/* WooCommerce's single-product.css sizes thumbs as `.woocommerce div.product
   div.images .flex-control-thumbs li { width:25%; float:left }` — at our 72px
   column that is an 18px sliver (you only saw the white edge of each photo).
   Match WC's `div.product div.images` specificity + !important so OUR square
   tile wins, and zero its float so the flex column stacks cleanly. */
.at-woo div.product div.images .flex-control-thumbs li {
  width: 48px !important;
  height: 48px !important;
  float: none !important;
  margin: 0 !important;
}
/* Pin a square box + object-fit so each thumb fills its 48px tile regardless of
   the image's natural size (flexslider sets inline width/height via onload). */
.at-woo div.product div.images .flex-control-thumbs img {
  display: block;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  /* The main-image rule (.woocommerce-product-gallery img) adds padding:28px +
     aspect-ratio:4/3 — on a 48px tile that pads the photo into a white square.
     Reset both here so the thumbnail actually shows. */
  padding: 0 !important;
  aspect-ratio: auto !important;
  box-sizing: border-box;
  object-fit: contain;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.7;
  background: #fff;
  transition: opacity var(--dur-base) ease, border-color var(--dur-base) ease;
}
.at-woo div.product div.images .flex-control-thumbs img:hover,
.at-woo div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--rubber-black);
}
/* Single-image products: flexslider ships an EMPTY .flex-control-thumbs (or
   omits it). Hide the empty track so no orphan left column shows. */
.at-woo .at-sp-layout__media .flex-control-thumbs:empty { display: none; }

/* Mobile (≤720): fall back to thumbnails BELOW the main image, horizontal. */
@media (max-width: 720px) {
  .at-woo .at-sp-layout__media .woocommerce-product-gallery,
  .at-woo div.product .woocommerce-product-gallery.images {
    flex-direction: column;
  }
  .at-woo .at-sp-layout__media .woocommerce-product-gallery__wrapper { order: 1; }
  .at-woo .at-sp-layout__media .flex-control-thumbs {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: visible;
    border-right: 0;
    border-top: 1px solid var(--border-1);
  }
  .at-woo .at-sp-layout__media .flex-control-thumbs li { width: 56px; height: 56px; }
  .at-woo .at-sp-layout__media .flex-control-thumbs img { width: 56px !important; height: 56px !important; }
}

/* 4b. Summary column */
.at-woo .at-sp-layout__summary { display: flex; flex-direction: column; gap: 16px; }

/* Custom header — title + price on one row, SKU / categories under the title. */
.at-woo .at-sp-head { margin: 0; }
.at-woo .at-sp-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.at-woo .at-sp-head__title,
.at-woo .at-sp-layout__summary .at-sp-head__title {
  font-family: var(--font-display);
  font-weight: 600;                       /* lighter (was 800) */
  font-size: clamp(19px, 1.9vw, 26px);    /* smaller (was up to 34px) */
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--rubber-black);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.at-woo .at-sp-head__price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: var(--rubber-black);
  text-align: right;
  white-space: nowrap;
}
.at-woo .at-sp-head__price del { font-size: 16px; font-weight: 400; color: var(--fg-3); margin-right: 6px; }
.at-woo .at-sp-head__price ins { text-decoration: none; }
.at-woo .at-sp-head__price .woocommerce-Price-amount { font-family: inherit; }

/* Live "with add-ons" line — reflects the protocol chooser running total,
   right-aligned under the price (left on mobile to match). */
.at-woo .at-sp-head__addon-price {
  margin-top: 6px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-sans);
  line-height: 1.3;
}
.at-woo .at-sp-head__addon-add {
  font-size: 13px;
  font-weight: 600;
  color: var(--performance-orange);
}
.at-woo .at-sp-head__addon-total {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-2);
}
.at-woo .at-sp-head__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
}
.at-woo .at-sp-head__meta-k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.at-woo .at-sp-head__meta a { color: var(--fg-2); text-decoration: none; }
.at-woo .at-sp-head__meta a:hover { color: var(--performance-orange); }
@media (max-width: 480px) {
  .at-woo .at-sp-head__top { flex-direction: column; gap: 8px; }
  .at-woo .at-sp-head__price { text-align: left; }
  .at-woo .at-sp-head__addon-price { text-align: left; align-items: flex-start; }
}

/* Trust / shipping row */
.at-woo .at-sp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--steel-silver-100);
}
.at-woo .at-sp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}
.at-woo .at-sp-trust__item svg { flex: none; color: var(--fg-3); }
.at-woo .at-sp-trust__link:hover,
.at-woo .at-sp-trust__link:hover svg { color: var(--performance-orange); }
.at-woo .at-sp-trust__stock.is-in,
.at-woo .at-sp-trust__stock.is-in svg { color: var(--success); }
.at-woo .at-sp-trust__stock.is-in { font-weight: 600; }
.at-woo .at-sp-trust__stock.is-out { color: var(--danger); }
.at-woo .at-sp-layout__summary .woocommerce-product-details__short-description {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
}
.at-woo .at-sp-layout__summary .woocommerce-product-details__short-description p { margin: 0 0 10px; }
.at-woo .at-sp-layout__summary .stock {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.at-woo .at-sp-layout__summary .stock.in-stock { color: var(--success); }
.at-woo .at-sp-layout__summary .stock.out-of-stock { color: var(--danger); }

/* Product meta (SKU / cats) — quiet mono micro-label */
.at-woo .at-sp-layout__summary .product_meta {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.at-woo .at-sp-layout__summary .product_meta > span { display: block; margin-bottom: 4px; }
.at-woo .at-sp-layout__summary .product_meta a { color: var(--fg-2); text-decoration: none; }
.at-woo .at-sp-layout__summary .product_meta a:hover { color: var(--rubber-black); }

/* -------------------------------------------------------------------------
   5. Add-to-cart form — restyle WC's stock form.cart to the canonical button.
   We CANNOT add the inner <span>, so the orange wipe + text shift run on the
   <button> itself. Override the protocol plugin's #ffee00 !important rules.
   ---------------------------------------------------------------------- */
.at-woo .at-sp-layout__form form.cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}
/* Quantity hidden on protocol products (plugin also does this) — for tool
   single it stays visible and styled by woo-shared.css */
.at-woo .at-sp-layout__form.has-protocol-chooser .quantity { display: none !important; }

.at-woo .at-sp-layout__form .single_add_to_cart_button,
.at-woo .at-sp-layout__form button.single_add_to_cart_button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px !important;
  border-radius: 8px !important;
  border: 1px solid var(--rubber-black) !important;
  background-color: var(--rubber-black) !important;
  background-image: none !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color 220ms ease, border-color 280ms cubic-bezier(.32,.72,0,1) !important;
}
.at-woo .at-sp-layout__form .single_add_to_cart_button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--performance-orange);
  transform: translate3d(-101%, 0, 0) skewX(-8deg);
  transform-origin: left center;
  transition: transform 540ms cubic-bezier(.32,.72,0,1);
  z-index: -1;
}
.at-woo .at-sp-layout__form .single_add_to_cart_button:hover:not(.disabled):not(:disabled),
.at-woo .at-sp-layout__form .single_add_to_cart_button:focus:not(.disabled):not(:disabled) {
  background-color: var(--rubber-black) !important;
  border-color: var(--performance-orange) !important;
  color: #fff !important;
}
.at-woo .at-sp-layout__form .single_add_to_cart_button:hover:not(.disabled):not(:disabled)::before {
  transform: translate3d(0, 0, 0) skewX(0deg);
}
.at-woo .at-sp-layout__form .single_add_to_cart_button.disabled,
.at-woo .at-sp-layout__form .single_add_to_cart_button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background-color: var(--steel-silver) !important;
  border-color: var(--steel-silver) !important;
  color: var(--fg-3) !important;
}
.at-woo .at-sp-layout__form .single_add_to_cart_button.loading::after {
  border-top-color: #fff;
}

/* Serial field (alttune-shop bridge renders into woocommerce_before_add_to_cart_button) */
.at-woo .at-sp-layout__form .ats-serial-field,
.at-woo .at-sp-layout__form .wapf {
  flex-basis: 100%;
  order: -1;
}
.at-woo .at-sp-layout__form .ats-serial-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   6. PROTOCOL CHOOSER — override the plugin's AlienTech-yellow palette
   (#ffee00 / slate) to AltTune tokens. The plugin enqueues
   at-protocol-shortcode.css with no dep, so we win on equal specificity by
   scoping under .at-woo and reuse !important only where the plugin uses it.
   Class names: .at-proto-chooser__* (from plugin markup — do not rename).
   ---------------------------------------------------------------------- */
.at-woo .at-sp-chooser-wrap {
  margin: 4px 0 0;
  padding: 18px;
  background: var(--steel-silver-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.at-woo .at-proto-chooser { color: var(--fg-1); margin: 0; font-family: var(--font-sans); }

/* Device selector */
.at-woo .at-proto-device-selector__label {
  font-family: var(--font-mono);
  color: var(--fg-3);
  letter-spacing: 0.08em;
}
.at-woo .at-proto-device-selector__select {
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  color: var(--fg-1);
}
.at-woo .at-proto-device-selector__select:focus {
  outline: none;
  border-color: var(--rubber-black);
}

/* Group header */
.at-woo .at-proto-chooser__group-header:hover { background: var(--steel-silver-100); }
.at-woo .at-proto-chooser__group-title { font-family: var(--font-mono); color: var(--fg-2); letter-spacing: 0.08em; }
.at-woo .at-proto-chooser__group-count { color: var(--fg-3); background: #fff; border-color: var(--border-1); }
.at-woo .at-proto-chooser__group-chevron { color: var(--fg-2); }
.at-woo .at-proto-chooser__group-hint { color: var(--fg-3); }

/* Item rows */
.at-woo .at-proto-chooser__sub-row {
  background: #fff;
  border-color: var(--border-1);
  border-radius: var(--radius-md);
}
.at-woo .at-proto-chooser__sub-row:hover {
  border-color: var(--rubber-black-50);
  background: var(--steel-silver-50);
}
/* Checked → orange accent border + faint tint (accent, not large fill) */
.at-woo .at-proto-chooser__sub-row:has(.at-proto-chooser__checkbox:checked) {
  border-color: var(--performance-orange);
  background: var(--performance-orange-100);
}
.at-woo .at-proto-chooser__check-visual { border-color: var(--steel-silver); border-radius: var(--radius-sm); }
.at-woo .at-proto-chooser__sub-row:has(.at-proto-chooser__checkbox:checked) .at-proto-chooser__check-visual {
  background: var(--performance-orange) !important;
  border-color: var(--performance-orange-700) !important;
}
.at-woo .at-proto-chooser__sub-row:has(.at-proto-chooser__checkbox:checked) .at-proto-chooser__check-visual::after {
  border-color: #fff;
}
/* Included (covered by a full/bundle pick) → keep green = success token */
.at-woo .at-proto-chooser__sub-row--included {
  background: #eef6f0 !important;
  border-color: var(--success) !important;
}
.at-woo .at-proto-chooser__sub-row--included .at-proto-chooser__check-visual {
  background: #eef6f0 !important;
  border-color: var(--success) !important;
}
.at-woo .at-proto-chooser__sub-row--included .at-proto-chooser__check-visual::after { border-color: var(--success); }
.at-woo .at-proto-chooser__sub-row--included .at-proto-chooser__sub-price { color: var(--success); }
.at-woo .at-proto-chooser__saving { color: var(--success); }

.at-woo .at-proto-chooser__sub-prefix { color: var(--fg-3); }
.at-woo .at-proto-chooser__sub-name { font-family: var(--font-sans); font-weight: 500; color: var(--fg-1); }
.at-woo .at-proto-chooser__sub-price { color: var(--fg-1); font-weight: 700; }
.at-woo .at-proto-chooser__price-was { color: var(--fg-3); }

/* Bundle pill → orange accent chip (was AlienTech yellow) */
.at-woo .at-proto-chooser__bundle-pill {
  background: var(--performance-orange);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

/* Footer total */
.at-woo .at-proto-chooser__footer {
  background: #fff;
  border-color: var(--border-1);
  border-radius: var(--radius-md);
}
.at-woo .at-proto-chooser__total-label { color: var(--fg-2); }
.at-woo .at-proto-chooser__total-value { font-family: var(--font-display); font-weight: 800; color: var(--rubber-black); }

/* Hint + messages */
.at-woo .at-proto-chooser__btn-hint { color: var(--fg-3); font-family: var(--font-sans); }
.at-woo .at-proto-chooser__msg--error { color: var(--danger); background: #fbeae6; border-color: #f3c6bd; }
.at-woo .at-proto-chooser__msg--success { color: var(--success); background: #eef6f0; border-color: #c7e3d0; }

/* -------------------------------------------------------------------------
   7. BUNDLE components (theme override markup — wcab-* + at-bundle__*)
   ---------------------------------------------------------------------- */
.at-woo .wcab-bundle-section.at-bundle {
  margin: 8px 0 2px;
  padding: 18px;
  background: var(--steel-silver-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.at-woo .at-bundle__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 14px;
}
.at-woo .at-bundle__list { display: flex; flex-direction: column; gap: 8px; }
.at-woo .at-bundle__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.at-woo .at-bundle__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--steel-silver-50);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.at-woo .at-bundle__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.at-woo .at-bundle__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.at-woo .at-bundle__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--fg-1); line-height: 1.2; }
.at-woo .at-bundle__meta { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-3); }
.at-woo .at-bundle__price { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.at-woo .at-bundle__price del { color: var(--fg-3); font-family: var(--font-display); font-size: 13px; }
.at-woo .at-bundle__included { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--success); }

.at-woo .at-bundle__totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
}
.at-woo .at-bundle__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.at-woo .at-bundle__total-label { font-size: 13px; color: var(--fg-2); }
.at-woo .at-bundle__total-was { font-family: var(--font-display); color: var(--fg-3); text-decoration: line-through; }
.at-woo .at-bundle__total-now { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--rubber-black); }
.at-woo .at-bundle__saved {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--success);
}
.at-woo .at-bundle__saved .woocommerce-Price-amount { font-family: inherit; color: inherit; }

/* Vehicle-compatibility panel styling lives in the alttune-shop plugin
   (assets/vehicle-compat.css, scope .at-vc) — it renders as a product tab now,
   not an inline dark section, so the old .at-vehicle-compat rules were removed. */

/* -------------------------------------------------------------------------
   9. TABS — kill the default WC tab chrome, use clean theme typography.
   ---------------------------------------------------------------------- */
.at-woo .woocommerce-tabs { margin-top: var(--space-8); }
.at-woo .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0 0 0 0;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border-1);
}
.at-woo .woocommerce-tabs ul.tabs::before,
.at-woo .woocommerce-tabs ul.tabs li::before,
.at-woo .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; }
.at-woo .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.at-woo .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 0 !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.at-woo .woocommerce-tabs ul.tabs li a:hover { color: var(--fg-1); }
.at-woo .woocommerce-tabs ul.tabs li.active a {
  color: var(--rubber-black);
  border-bottom-color: var(--performance-orange);
}
.at-woo .woocommerce-Tabs-panel {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.at-woo .woocommerce-Tabs-panel h2 {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--rubber-black);
  margin: 0 0 14px;
}
/* Description-content subheadings (e.g. "Key Features:") would otherwise inherit
   the global display-heading styles (fs-h3 + 700 + tight line-height). Scope
   them down to readable in-copy subheadings — this selector (0,2,1) beats the
   token rules `h3,.h3` / `h1,h2,h3,h4,h5` (0,0,1). */
.at-woo .woocommerce-Tabs-panel h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rubber-black);
  margin: 22px 0 10px;
}
.at-woo .woocommerce-Tabs-panel h4,
.at-woo .woocommerce-Tabs-panel h5 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-1);
  margin: 18px 0 8px;
}
.at-woo .woocommerce-Tabs-panel p { margin: 0 0 14px; }

/* -------------------------------------------------------------------------
   10. RELATED / UPSELLS — reuse the card grid look.
   ---------------------------------------------------------------------- */
.at-woo .related,
.at-woo .upsells {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-1);
}
.at-woo .related > h2,
.at-woo .upsells > h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--rubber-black);
  margin: 0 0 var(--space-6);
}

/* =========================================================================
   Reveal-safe: keep cards visible even if scroll-reveal JS doesn't tag them.
   ========================================================================= */
.at-woo ul.products li.product { opacity: 1; }

/* =========================================================================
   SHOP LANDING — department directory + "Most Popular" carousel.
   ========================================================================= */

/* ---- Department directory ---- */
.at-shop-depts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 8px 0 var(--space-8, 64px);
}
@media (max-width: 980px) { .at-shop-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .at-shop-depts { grid-template-columns: 1fr; } }

.at-dept-card {
  border: 1px solid var(--steel-silver);
  border-radius: var(--radius-lg, 16px);
  padding: 28px 26px;
  background: #fff;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
.at-dept-card:hover {
  border-color: var(--rubber-black);
  box-shadow: 0 18px 48px rgba(5, 5, 5, 0.07);
  transform: translateY(-2px);
}
.at-dept-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--steel-silver-50);
}
.at-dept-card__media img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.at-dept-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}
.at-dept-card__title a { color: var(--fg-1); text-decoration: none; transition: color var(--dur-base) ease; }
.at-dept-card__title a:hover { color: var(--performance-orange); }
.at-dept-card__subs { list-style: none; margin: 0; padding: 0; }
.at-dept-card__subs li { border-top: 1px solid var(--steel-silver-100); }
.at-dept-card__subs li:first-child { border-top: 0; }
.at-dept-card__subs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}
.at-dept-card__subs a:hover { color: var(--performance-orange); padding-left: 4px; }
.at-dept-card__count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

/* ---- "Most Popular" carousel ---- */
.at-pop { margin: var(--space-7, 48px) 0 0; }
.at-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.at-pop-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.at-pop-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.at-pop-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--steel-silver);
  border-radius: 50%;
  background: #fff;
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.at-pop-arrow:hover { background: var(--rubber-black); color: #fff; border-color: var(--rubber-black); }
.at-pop-arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

.at-pop-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.at-pop-track::-webkit-scrollbar { display: none; }
.at-pop-card {
  flex: 0 0 calc((100% - 60px) / 4); /* 4 visible (3 gaps of 20px) */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--steel-silver);
  border-radius: var(--radius-lg, 16px);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.at-pop-card:hover { border-color: var(--rubber-black); box-shadow: 0 14px 36px rgba(5, 5, 5, 0.07); }
.at-pop-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: white;
}
.at-pop-card__img,
.at-pop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  box-sizing: border-box;
}
.at-pop-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--performance-orange);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
}
.at-pop-card__body { padding: 16px 16px 8px; flex: 1 1 auto; }
.at-pop-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.at-pop-card__title a { color: var(--fg-1); text-decoration: none; transition: color var(--dur-base) ease; }
.at-pop-card__title a:hover { color: var(--performance-orange); }
.at-pop-card__price { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-1); }
.at-pop-card__price del { color: var(--fg-3); font-weight: 400; font-size: 13px; margin-right: 6px; }
.at-pop-card__price ins { text-decoration: none; }
.at-pop-card__cta { margin: 12px 16px 16px; justify-content: center; }

@media (max-width: 720px) {
  .at-pop-card { flex-basis: calc((100% - 20px) / 2); } /* 2 visible (1 gap) */
}

/* ---- "Frequently bought together" — combo builder (single product) ---- */
.at-woo .at-combo {
  grid-column: 1 / -1;
  margin-top: var(--space-6, 32px);
  background: #fff;
  border: 1px solid var(--steel-silver);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(14px, 1.6vw, 20px);
}
.at-woo .at-combo__head { margin-bottom: 14px; }
.at-woo .at-combo__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.at-woo .at-combo__sub {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-3);
}

.at-woo .at-combo__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .at-woo .at-combo__body { grid-template-columns: 1fr; gap: 16px; } }

/* Tile row + "+" connectors. */
.at-woo .at-combo__items {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2px;
}
.at-woo .at-combo__plus {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -24px; /* visually center on the image row, above the text */
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--steel-silver);
  padding: 0 2px;
}

.at-woo .at-combo__tile {
  flex: 1 1 0;
  min-width: 108px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
}
.at-woo .at-combo__tile.is-config { opacity: 0.92; }

.at-woo .at-combo__tile-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--steel-silver);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, opacity var(--dur-base) ease;
}
.at-woo .at-combo__tile.is-selected .at-combo__tile-media { border-color: var(--rubber-black); }
.at-woo .at-combo__tile:not(.is-selected):not(.is-main) .at-combo__tile-media { opacity: 0.5; }
.at-woo .at-combo__tile-link { display: block; width: 100%; height: 100%; }
.at-woo .at-combo__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }

/* Anchor "This item" tag. */
.at-woo .at-combo__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--steel-silver-50);
  border: 1px solid var(--steel-silver);
  padding: 3px 7px;
  border-radius: var(--radius-pill, 999px);
}

/* Include/exclude toggle — a "+" that rotates to "×" when the add-on is in. */
.at-woo .at-combo__toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--steel-silver);
  border-radius: 50%;
  background: #fff;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.at-woo .at-combo__toggle svg { transition: transform var(--dur-base) cubic-bezier(0.32, 0.72, 0, 1); }
.at-woo .at-combo__toggle:hover { border-color: var(--rubber-black); color: var(--rubber-black); }
.at-woo .at-combo__tile.is-selected .at-combo__toggle {
  background: var(--rubber-black);
  border-color: var(--rubber-black);
  color: #fff;
}
.at-woo .at-combo__tile.is-selected .at-combo__toggle svg { transform: rotate(45deg); } /* + → × */
.at-woo .at-combo__toggle:focus-visible { outline: 2px solid var(--performance-orange); outline-offset: 2px; }

.at-woo .at-combo__tile-body { padding: 8px 2px 0; text-align: center; }
.at-woo .at-combo__tile-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-1);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-base) ease;
}
.at-woo .at-combo__tile-title:hover { color: var(--performance-orange); }
.at-woo .at-combo__tile-price {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-1);
}
.at-woo .at-combo__tile-price del { color: var(--fg-3); font-weight: 400; font-size: 12px; margin-right: 4px; }
.at-woo .at-combo__tile-price ins { text-decoration: none; }
.at-woo .at-combo__configure {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--performance-orange);
  text-decoration: none;
}
.at-woo .at-combo__configure:hover { text-decoration: underline; }

/* Chosen protocols, listed under a configured tool tile. */
.at-woo .at-combo__selected {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--border-2);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.at-woo .at-combo__selected-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.3;
}
.at-woo .at-combo__selected-name { color: var(--fg-2); min-width: 0; }
.at-woo .at-combo__selected-price { flex: 0 0 auto; font-weight: 600; color: var(--performance-orange-700, var(--performance-orange)); }

/* A configured tool reads as "in the combo". */
.at-woo .at-combo__tile.is-configured .at-combo__tile-media { border-color: var(--rubber-black); opacity: 1; }

/* ---- Configure modal --------------------------------------------------- */
.at-woo .at-combo-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.at-woo .at-combo-modal[hidden] { display: none; }
.at-woo .at-combo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.at-woo .at-combo-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 70px rgba(5, 5, 5, 0.3);
  overflow: hidden;
  animation: at-combo-modal-in var(--dur-base) cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes at-combo-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.at-woo .at-combo-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-2);
}
.at-woo .at-combo-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--rubber-black);
}
.at-woo .at-combo-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-1);
  border-radius: 50%;
  background: #fff;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.at-woo .at-combo-modal__close:hover { border-color: var(--rubber-black); }
.at-woo .at-combo-modal__body {
  padding: 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.at-woo .at-combo-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-2);
  background: var(--steel-silver-50);
}
.at-woo .at-combo-modal__hint { font-family: var(--font-sans); font-size: 12.5px; color: var(--performance-orange); }
.at-woo .at-combo-modal__apply { margin-left: auto; }

/* Standalone configurator footer (AltTune Lead): live total + add-to-cart. */
.at-woo .at-combo-modal__foot--cart { justify-content: space-between; }
.at-woo .at-combo-modal__totalRow { display: inline-flex; align-items: baseline; gap: 8px; }
.at-woo .at-combo-modal__totalLabel { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); }
.at-woo .at-combo-modal__total { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.at-woo .at-combo-modal__add { margin-left: auto; }
body.at-combo-modal-open { overflow: hidden; }

/* Summary panel — total + add-all button. */
.at-woo .at-combo__summary {
  background: var(--steel-silver-50);
  border: 1px solid var(--steel-silver);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) { .at-woo .at-combo__summary { position: static; } }
.at-woo .at-combo__total-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.at-woo .at-combo__total {
  display: block;
  margin: 6px 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--rubber-black);
}
.at-woo .at-combo__add { width: 100%; justify-content: center; gap: 9px; }
.at-woo .at-combo__add[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.at-woo .at-combo__add-icon { flex: 0 0 auto; }
.at-woo .at-combo__add.is-done { background: var(--rubber-black); border-color: var(--rubber-black); }
.at-woo .at-combo__note {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-3);
}

/* ---- "Related products" (single product, bottom) ----
   Reuses the shop-grid card (li.at-product-card) inside a horizontal carousel.
   The .at-pop head/title/nav/arrow chrome + the [data-at-carousel] scroller are
   shared with "Most Popular"; only the track + per-item sizing differ here. */
.at-woo .at-related { grid-column: 1 / -1; margin-top: var(--space-6, 32px); }

/* Tone down the "Related products" heading — the shared .at-pop-title scale
   (up to 28px/800) reads too large here. */
.at-woo .at-related .at-related__title {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
}

/* Carousel track — a flex row of full shop cards, horizontal scroll + snap,
   overriding the .products grid display. */
.at-woo ul.at-related-track {
  display: flex !important;
  grid-template-columns: none !important; /* cancel ul.products grid */
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* overflow-x:auto forces overflow-y to clip (it can't stay `visible`), so the
     hover lift (translateY(-2px)) + the card drop-shadow would be cropped at the
     top/sides. Pad the scroll box to make room, then cancel the extra top space
     with a negative margin so the gap under the heading is unchanged. */
  margin: -22px 0 0;
  padding: 26px 16px 34px;
}
.at-woo .at-related-track::-webkit-scrollbar { display: none; }

/* Each card keeps the exact shop-grid look; we only fix its carousel width so
   ~3 show on desktop with a peek of the next. */
.at-woo .at-related-track > li.at-product-card {
  flex: 0 0 clamp(260px, 31%, 360px);
  scroll-snap-align: start;
  margin: 0;
}
@media (max-width: 900px) {
  .at-woo .at-related-track > li.at-product-card { flex: 0 0 clamp(240px, 46%, 320px); }
}
@media (max-width: 600px) {
  .at-woo .at-related-track > li.at-product-card { flex: 0 0 84%; }
}

/* =========================================================================
   SHOP BODY — filter sidebar (left) + results (right)
   ========================================================================= */
.at-woo .at-shop-body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .at-woo .at-shop-body { grid-template-columns: 1fr; gap: 24px; } }
.at-woo .at-shop-main { min-width: 0; }

.at-woo .at-filters { position: sticky; top: 100px; }
@media (max-width: 900px) { .at-woo .at-filters { position: static; } }
.at-filters__group {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--steel-silver-100);
}
.at-filters__group:last-of-type { border-bottom: 0; margin-bottom: 16px; }
.at-filters__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 16px;
}

/* Vehicle-type checkboxes */
.at-filters__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.at-filters__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
}
.at-filters__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.at-filters__check-box {
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--steel-silver);
  border-radius: 4px;
  position: relative;
  transition: border-color .2s ease, background .2s ease;
}
.at-filters__check input:checked + .at-filters__check-box {
  background: var(--rubber-black);
  border-color: var(--rubber-black);
}
.at-filters__check input:checked + .at-filters__check-box::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.at-filters__check input:focus-visible + .at-filters__check-box { outline: 2px solid var(--performance-orange); outline-offset: 2px; }
.at-filters__check-label { flex: 1 1 auto; }
.at-filters__check:hover .at-filters__check-label { color: var(--fg-1); }
.at-filters__count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
/* Channel filter rows: the coloured chip stands in for the plain label and
   fills the row so the count stays right-aligned (reuses the .at-channel-chip
   palette from the product cards). */
.at-filters__check--channel .at-channel-chip { flex: 1 1 auto; justify-content: flex-start; }

/* Dependent brand combobox — revealed under the Vehicle type checkboxes when a
   type is ticked (toggled via the [hidden] attribute by woo-shop.js). */
.at-brandbox { margin-top: 12px; }
.at-brandbox[hidden] { display: none; }
.at-brandbox__field { position: relative; margin-bottom: 8px; }
.at-brandbox__search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  color: var(--fg-1);
  background: var(--surface-1, #fff);
  border: 1.5px solid var(--steel-silver-100);
  border-radius: 8px;
  transition: border-color .15s ease;
}
.at-brandbox__search::placeholder { color: var(--fg-3); }
.at-brandbox__search:focus-visible {
  outline: none;
  border-color: var(--rubber-black);
}
.at-brandbox__list {
  list-style: none;
  margin: 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--steel-silver-100);
  border-radius: 8px;
}
.at-brandbox__item[hidden] { display: none; }
.at-brandbox__check { padding: 5px 8px; border-radius: 6px; }
.at-brandbox__check:hover { background: var(--steel-silver-50, rgba(0, 0, 0, .03)); }
/* Selected brands float to the top of the (scrollable) list and get a subtle
   highlight, so an applied brand is always visible without scrolling — it can
   never look like it "disappeared" after the filter is applied. */
.at-brandbox__item:has(input:checked) { order: -1; }
.at-brandbox__item:has(input:checked) .at-brandbox__check {
  background: var(--steel-silver-50, rgba(0, 0, 0, .04));
}
.at-brandbox__item:has(input:checked) .at-filters__check-label {
  color: var(--fg-1);
  font-weight: 600;
}
.at-brandbox__empty {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--fg-3);
}

/* Price dual-range slider */
.at-price-slider { position: relative; height: 22px; margin: 10px 0 16px; }
.at-price-slider__track {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--steel-silver-200); border-radius: 999px;
}
.at-price-slider__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--rubber-black); border-radius: 999px; }
.at-price-slider__input {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 22px; margin: 0;
  background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.at-price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rubber-black); cursor: pointer;
  box-shadow: 0 1px 3px rgba(5, 5, 5, .2);
}
.at-price-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rubber-black); cursor: pointer;
}
.at-price-slider__input::-webkit-slider-runnable-track { background: none; }
.at-price-slider__input::-moz-range-track { background: none; }
.at-price-slider__readout {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1);
}
.at-price-slider__dash { color: var(--fg-3); }

/* Actions */
.at-filters__actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.at-filters__actions .at-btn { flex: 1 1 auto; justify-content: center; }
.at-filters__reset {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3);
  text-decoration: none; white-space: nowrap;
}
.at-filters__reset:hover { color: var(--performance-orange); }

/* =========================================================================
   MOBILE FILTER MODAL (≤900px) — a "Filters" button opens the sidebar as a
   slide-in sheet from the left (scrim + close + ESC + scroll-lock). On desktop
   the trigger + modal chrome are hidden and `.at-filters-modal` is a plain
   passthrough so the static sidebar renders exactly as before.
   ========================================================================= */

/* DESKTOP (default): trigger + modal head/scrim hidden; the wrapper and sheet
   collapse to display:contents so the existing .at-filters sidebar grid cell is
   unchanged. */
.at-woo .at-filters-trigger { display: none; }
.at-woo .at-filters-modal { display: contents; }
.at-woo .at-filters-modal__scrim,
.at-woo .at-filters-modal__head { display: none; }

@media (max-width: 900px) {
  /* Trigger button — full-width, sits at the top of .at-shop-body. */
  .at-woo .at-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: start;
    padding: 12px 18px;
    border: 1px solid var(--rubber-black);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--rubber-black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-base) ease, color var(--dur-base) ease;
  }
  .at-woo .at-filters-trigger:hover {
    background: var(--rubber-black);
    color: #fff;
  }
  .at-woo .at-filters-trigger:focus-visible {
    outline: 2px solid var(--performance-orange);
    outline-offset: 2px;
  }
  .at-woo .at-filters-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--performance-orange);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* Modal overlay — fixed full-screen, scrim + left sheet. height:100dvh
     pins it to the VISIBLE viewport so the sheet's bottom (Connection type +
     Apply) never hides behind the mobile browser toolbar. */
  .at-woo .at-filters-modal {
    display: block;
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
  }
  body.at-filters-open .at-woo .at-filters-modal,
  body.at-filters-open .at-filters-modal {
    visibility: visible;
    pointer-events: auto;
  }
  .at-woo .at-filters-modal__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.5);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard);
  }
  body.at-filters-open .at-filters-modal__scrim { opacity: 1; }

  /* Sheet — slides in from the left. Resets the sticky desktop positioning. */
  .at-woo .at-filters-modal__sheet.at-filters {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    margin: 0;
    background: #fff;
    box-shadow: var(--shadow-2);
    padding: 20px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 420ms cubic-bezier(.32, .72, 0, 1);
  }
  body.at-filters-open .at-filters-modal__sheet.at-filters { transform: translateX(0); }

  /* Sheet header (mobile only). */
  .at-woo .at-filters-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--steel-silver-100);
  }
  .at-woo .at-filters-modal__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rubber-black);
    margin: 0;
  }
  .at-woo .at-filters-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--fg-1);
    cursor: pointer;
    transition: border-color var(--dur-base) ease, color var(--dur-base) ease;
  }
  .at-woo .at-filters-modal__close:hover { border-color: var(--rubber-black); color: var(--performance-orange); }
  .at-woo .at-filters-modal__close:focus-visible { outline: 2px solid var(--performance-orange); outline-offset: 2px; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .at-woo .at-filters-modal__scrim,
  .at-woo .at-filters-modal__sheet.at-filters { transition: none; }
}

/* =========================================================================
   CATEGORY NAV — hierarchical category list at the top of the shop sidebar.
   All top-level categories show; children collapse and reveal only when their
   section is active (current category or an ancestor of it). Restrained accent.
   ========================================================================= */

.at-cat-nav {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-2);
}

.at-cat-nav__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.at-cat-nav__item { margin: 0; }

.at-cat-nav__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-1);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.at-cat-nav__parent:hover { background: var(--steel-silver-50); }

.at-cat-nav__parent.is-current {
  color: var(--performance-orange-700);
  background: var(--performance-orange-50);
}

.at-cat-nav__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron rotates to point down when the section is open. */
.at-cat-nav__chev {
  flex: 0 0 auto;
  color: var(--fg-3);
  transition: transform var(--dur-base) var(--ease-standard);
}

.at-cat-nav__item.is-active > .at-cat-nav__parent .at-cat-nav__chev {
  transform: rotate(90deg);
}

.at-cat-nav__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--fg-3);
  background: var(--steel-silver-100);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
}

/* ---- children ---------------------------------------------------------- */

.at-cat-nav__children {
  list-style: none;
  margin: 2px 0 var(--space-2);
  padding: 0 0 0 var(--space-3);
  margin-left: var(--space-4);
  border-left: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.at-cat-nav__children li { margin: 0; }

.at-cat-nav__child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.at-cat-nav__child:hover { background: var(--steel-silver-50); color: var(--fg-1); }

.at-cat-nav__child.is-current {
  color: var(--performance-orange-700);
  font-weight: 500;
}

.at-cat-nav__child > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Single product page: white background on the plain page hero section. */
body.single-product .at-page-hero.is-plain {
  background: #fff;
}

/* WooCommerce's default `.woocommerce div.product div.images
   .woocommerce-product-gallery__trigger { z-index:99 }` (specificity 0,4,2)
   outranks the themed trigger rule (0,3,0), so the gallery zoom button floats
   above full-screen overlays such as the global-search scrim. Re-assert the
   intended low z-index with a higher-specificity selector (0,5,2). */
.at-woo div.product .at-sp-layout__media div.images .woocommerce-product-gallery__trigger {
  z-index: 3;
}