/* ============================================================
   BRAKE TRACE — "REDLINE" DESIGN SYSTEM
   redline.css  ·  drop into a child theme and enqueue (see redline-enqueue.php)
   ------------------------------------------------------------
   A small, portable system: 4 fonts, 1 accent, a handful of
   recurring motifs (skew chips, start/finish stripes, mono labels,
   Anton stat numbers). Class names are namespaced .bt-*.
   WooCommerce override hooks are noted in comments at the bottom.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --bt-ink:        #0c0c0d;   /* near-black — headers, footers, dark bands */
  --bt-ink-soft:   #0e0e0f;
  --bt-paper:      #f5f4f1;   /* warm off-white page background */
  --bt-card:       #ffffff;
  --bt-red:        #ff2d20;   /* the single accent */
  --bt-red-tint:   #fff5f4;   /* winner / highlight wash */
  --bt-hair:       #e3e1dc;   /* hairline borders */
  --bt-hair-soft:  #ececec;
  --bt-mute:       #8a8884;   /* muted label text */
  --bt-mute-2:     #5a5856;   /* secondary body text */
  --bt-line-dark:  #2a2b2f;   /* hairline on dark surfaces */
  --bt-go:         #17a44c;   /* semantic "compatible" green (state only) */

  --bt-font-display: 'Anton', 'Arial Narrow', sans-serif;       /* big headlines, stat numbers */
  --bt-font-cond:    'Barlow Condensed', 'Arial Narrow', sans-serif; /* subheads, UI, buttons */
  --bt-font-body:    'Public Sans', system-ui, sans-serif;      /* body copy */
  --bt-font-mono:    'Space Mono', ui-monospace, monospace;     /* labels, meta, eyebrows */

  --bt-shell: 1350px;   /* max content width */
  --bt-skew: -8deg;     /* chip / button shear */
  --bt-shell-post: 1350px;   /* max content width */
  --bt-shell-category: 1350px;   /* max content width */
  --bt-shell-product: 1350px;   /* max content width */
  --bt-shell-product-content: 1350px;   /* max content width */
  --bt-shell-shop: 1350px;   /* max content width */
}

/* ---------- 2. BASE ---------- */
.bt-scope { background: var(--bt-paper); color: var(--bt-ink-soft); font-family: var(--bt-font-body); }
.bt-scope * { box-sizing: border-box; }
.bt-scope a { text-decoration: none; color: inherit; }
.bt-scope ::selection { background: var(--bt-red); color: #fff; }
.bt-shell { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.bt-shell-post { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell-post {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.bt-shell-category { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell-category {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.bt-shell-product { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell-product {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.bt-shell-product-content { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell-product-content {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.bt-shell-shop { max-width: var(--bt-shell); margin: 0 auto; }
.bt-shell-shop {
    padding-left: 15px!important;
    padding-right: 15px!important;
}

/* ---------- 3. TYPOGRAPHY ---------- */
.bt-display { font-family: var(--bt-font-display); text-transform: uppercase; line-height: .9; letter-spacing: .005em; margin: 0; }
.bt-display--xl { font-size: clamp(48px, 6vw, 96px); }
.bt-display--lg { font-size: clamp(40px, 4.5vw, 72px); }
.bt-display--md { font-size: clamp(30px, 3vw, 46px); }
.bt-subhead { font-family: var(--bt-font-cond); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; margin: 0; }
.bt-label  { font-family: var(--bt-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bt-mute); }
.bt-label--red { color: var(--bt-red); }
.bt-body   { font-size: 18px; line-height: 1.72; color: #1d1c1b; }
.bt-red    { color: var(--bt-red); }

/* ---------- 4. HEADER / NAV ---------- */
.bt-header { position: sticky; top: 0; z-index: 50; background: var(--bt-ink); color: #fff; }
.bt-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; }
.bt-logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--bt-font-display); font-size: 25px; }
.bt-logo b { color: var(--bt-red); font-weight: 400; }
.bt-nav { display: flex; align-items: center; gap: 28px; }
.bt-nav a { font-family: var(--bt-font-cond); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bt-nav a:hover, .bt-nav a.is-active { color: var(--bt-red); }

/* ---------- 5. CHIPS (skewed tag) ---------- */
.bt-chip { display: inline-block; transform: skewX(var(--bt-skew)); background: var(--bt-red); color: #fff;
  padding: 7px 15px; font-family: var(--bt-font-cond); font-weight: 800; font-size: 24px;
  letter-spacing: .05em; text-transform: uppercase; }
.bt-chip > span { display: inline-block; transform: skewX(calc(-1 * var(--bt-skew))); } /* un-shear the label */
.bt-chip--dark    { background: var(--bt-ink); }
.bt-chip--outline { background: var(--bt-card); color: var(--bt-ink-soft); border: 1px solid #ddd9d2; font-weight: 700; }
.bt-chip--outline:hover { border-color: var(--bt-red); color: var(--bt-red); }
.bt-chip--mono { font-family: var(--bt-font-mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; padding: 6px 14px; }

/* ---------- 6. START / FINISH STRIPE ---------- */
.bt-stripe       { height: 6px; background: repeating-linear-gradient(90deg, #fff 0 22px, var(--bt-ink) 22px 44px); }
.bt-stripe--red  { height: 6px; background: repeating-linear-gradient(90deg, var(--bt-red) 0 22px, var(--bt-ink) 22px 44px); }
.bt-stripe--dash { height: 5px; background: repeating-linear-gradient(90deg, var(--bt-ink) 0 18px, transparent 18px 36px); }

/* ---------- 7. BUTTONS ---------- */
.bt-btn { display: inline-block; text-align: center; font-family: var(--bt-font-cond); font-weight: 800;
  font-size: 17px; letter-spacing: .06em; text-transform: uppercase; background: var(--bt-red); color: #fff;
  padding: 13px 24px; border: none; cursor: pointer; }
.bt-btn2 { display: inline-block; text-align: center; font-family: var(--bt-font-cond); font-weight: 800;
  font-size: 17px; letter-spacing: .06em; text-transform: uppercase; background: #000; color: #fff;
  padding: 13px 24px; border: none; cursor: pointer; }
.bt-btn:hover { background: var(--bt-ink); }
.bt-btn--skew { transform: skewX(var(--bt-skew)); }
.bt-btn--skew > span { display: inline-block; transform: skewX(calc(-1 * var(--bt-skew))); }
.bt-btn--ghost { background: var(--bt-card); border: 2px solid var(--bt-ink); color: var(--bt-ink); }
.bt-btn--ghost:hover { border-color: var(--bt-red); color: var(--bt-red); background: var(--bt-card); }
.bt-btn--block { display: block; width: 100%; }

/* ---------- 8. SECTION HEADER (chip + rule + link) ---------- */
.bt-sec { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.bt-sec__rule { flex: 1; height: 3px; background: var(--bt-ink-soft); }
.bt-sec__more { font-family: var(--bt-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bt-mute); }
.bt-sec__more:hover { color: var(--bt-red); }

/* ---------- 9. CARDS ---------- */
.bt-card-link { display: flex; flex-direction: column; }
.bt-card-link:hover { border-color: var(--bt-red); }
.bt-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #ecebe6 0 10px, #f4f2ed 10px 20px); }
.bt-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 10px; }
.bt-card__title { font-family: var(--bt-font-cond); font-weight: 800; font-size: 25px; line-height: 1.04; text-transform: uppercase; margin: 0 0 14px;  font-family: "Barlow Condensed", sans-serif;}

/* media overlay tag (category, sits top-left, skewed) */
.bt-mtag { position: absolute; top: 0; left: 0; transform: skewX(-9deg) translateX(-3px); background: var(--bt-ink); text-transform: uppercase;
  padding: 4px 12px 4px 15px; }
.bt-mtag > span { display: inline-block; transform: skewX(9deg); font-family: var(--bt-font-mono); font-size: 14px;
  font-weight: 700; letter-spacing: .12em; color: #fff; }

/* ---------- 10. PRICE / SALE ---------- */
.bt-price { font-family: var(--bt-font-display); font-size: 25px; }
.bt-price--sale { color: var(--bt-red); }
.bt-strike { font-family: var(--bt-font-mono); font-size: 13px; color: #a9a7a2; text-decoration: line-through; }
.bt-sale-flag { position: absolute; top: 10px; right: 10px; font-family: var(--bt-font-display); font-size: 15px;
  letter-spacing: .04em; background: var(--bt-red); color: #fff; padding: 3px 9px; }

/* ---------- 11. STAT NUMBERS ---------- */
.bt-stat { font-family: var(--bt-font-display); line-height: .9; font-size: 58px; }
.bt-stat small { font-size: .45em; }
.bt-stat__label { font-family: var(--bt-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bt-mute); margin-top: 8px; }

/* ---------- 12. FORMS (smart select) ---------- */
.bt-select { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  font-family: var(--bt-font-cond); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase;
  background-color: var(--bt-card); border: 1px solid #ddd9d2; color: var(--bt-ink-soft); padding: 11px 34px 11px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff2d20' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }

/* ---------- 13. COMPATIBILITY VERDICT ---------- */
.bt-verdict { color: #fff; position: relative; overflow: hidden; padding: 30px 36px; display: flex; align-items: center; gap: 22px; }
.bt-verdict--ok { background: var(--bt-go); }
.bt-verdict--no { background: var(--bt-red); }
.bt-verdict__icon { font-family: var(--bt-font-display); font-size: 72px; line-height: .8; }
.bt-verdict__head { font-family: var(--bt-font-display); font-size: 42px; line-height: .92; text-transform: uppercase; }

/* ---------- 14. IMAGE PLACEHOLDER (remove once real assets are in) ---------- */
.bt-ph { background: repeating-linear-gradient(135deg, #ecebe6 0 10px, #f4f2ed 10px 20px); border: 1px solid var(--bt-hair);
  display: flex; align-items: center; justify-content: center; }
.bt-ph span { font-family: var(--bt-font-mono); font-size: 10px; letter-spacing: .14em; color: #b3b1ac; text-transform: uppercase; }
.bt-ph--dark { background: repeating-linear-gradient(135deg, #17181b 0 14px, #1d1e22 14px 28px); border-color: var(--bt-line-dark); }

/* ---------- 15. FOOTER ---------- */
.bt-footer { background: var(--bt-ink); color: #fff; }
.bt-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 42px; padding-bottom: 42px; }
.bt-footer a { font-family: var(--bt-font-mono); font-size: 11px; letter-spacing: .14em; color: #9b9994; }
.bt-footer a:hover { color: #fff; }

/* ============================================================
   WOOCOMMERCE OVERRIDE MAP  (copy these templates into
   your-child-theme/woocommerce/ and apply the classes above)
   ------------------------------------------------------------
   archive-product.php          → shop grid wrapper (.bt-shell + grid)
   content-product.php          → product card  → .bt-card-link / .bt-card__*
   loop/sale-flash.php          → sale badge     → .bt-sale-flag
   loop/price.php / price.php    → price          → .bt-price (+ .bt-strike for <del>)
   single-product.php           → product layout (gallery + .bt-* info panel)
   single-product/...add-to-cart→ swap the cart button for your "BUY HERE"
                                   affiliate link styled as .bt-btn.bt-btn--skew
   global/quantity-input.php     → not needed (affiliate model, no cart)
   Sidebar widgets / filter      → restyle inputs as .bt-select, .bt-chip--outline
   header.php / footer.php       → .bt-header / .bt-footer in the (child) theme
   single.php / content.php      → article body (.bt-body, .bt-subhead, blockquote)
   front-page.php                → home sections (hero, .bt-sec headers, cards)
   ============================================================ */


.bt-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-family: "Barlow Condensed", sans-serif;}
.bt-nav__list li { margin: 0; }
.bt-nav__search { display: flex; align-items: center; }

.bt-posts.bt-posts--list {
    display: grid!important;
    gap: 14px;
    grid-template-columns: auto auto auto;
}

.bt-card__media {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
}

.bt-card__media_shop {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
}

.bt-posts.bt-posts--list .bt-card__media {
    height: 110px;
}

.bt-posts.bt-posts--grid a.bt-card-link {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(227, 225, 220);
}

li#menu-item-1169 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgb(255, 45, 32);
    color: rgb(255, 255, 255);
    padding: 8px 16px;
    transform: skewX(-8deg);
}

/* ============================================================
   ARTICLE BODY — add to bottom of redline.css
   Styles the_content() output inside .bt-article-body
   without requiring editors to add any classes manually.
   ============================================================ */

/* Counter for numbered h2 subheads (matches the 01/02 mockup) */
.bt-article-body { counter-reset: bt-h2; }

.bt-article-body .bt-body h2 {
  counter-increment: bt-h2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 40px 0 16px;
}

.bt-article-body .bt-body h2::before {
  content: counter(bt-h2, decimal-leading-zero);
  font-family: var(--bt-font-display);
  font-size: 26px;
  color: var(--bt-red);
  flex-shrink: 0;
}

/* h3 — smaller, no counter */
.bt-article-body .bt-body h3 {
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 32px 0 12px;
  padding-left: 16px;
  border-left: 5px solid var(--bt-red);
}

/* Body paragraphs */
.bt-article-body .bt-body p { margin: 0 0 22px;font-size: 21px;line-height: 1.72;color: rgb(29, 28, 27);font-family: "Public Sans", sans-serif;}

/* First paragraph lead-in (larger) */
.bt-article-body .bt-body > p:first-child {
  font-size: 23px;
    line-height: 1.5;
    color: rgb(14, 14, 15);
    font-weight: 500;
    margin: 0px 0px 28px;
}

/* Blockquote — white card, red left border */
.bt-article-body .bt-body blockquote {
  margin: 30px 0;
  background: var(--bt-card);
  border-left: 6px solid var(--bt-red);
  padding: 26px 28px;
}

.bt-article-body .bt-body blockquote p {
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--bt-ink-soft);
}

.bt-article-body .bt-body blockquote cite {
  font-family: var(--bt-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--bt-mute);
  font-style: normal;
}

/* Images inside body */
.bt-article-body .bt-body img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--bt-hair);
}

.wp-caption { margin: 28px 0; max-width: 100%; }
.wp-caption-text {
  font-family: var(--bt-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--bt-mute);
  margin-top: 6px;
}

/* Inline lists */
.bt-article-body .bt-body ul,
.bt-article-body .bt-body ol {
  padding-left: 22px;
  margin: 0 0 22px;
}

.bt-article-body .bt-body li { margin-bottom: 8px; }

/* Links in body */
.bt-article-body .bt-body a { color: var(--bt-red); text-decoration: underline; }
.bt-article-body .bt-body a:hover { color: var(--bt-ink); }

/* Horizontal rule */
.bt-article-body .bt-body hr {
  border: none;
  border-top: 3px solid var(--bt-ink);
  margin: 40px 0;
}

/* ============================================================
   ARCHIVE / CATEGORY PAGE — append to bottom of redline.css
   ============================================================ */

/* Archive header band */
.bt-archive-header {
  background: var(--bt-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.bt-archive-header__inner {
  padding: 48px 28px 44px;
  position: relative;
}

/* Card grid */
.bt-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* Cards — move border/bg into CSS so hover works */
.bt-archive-grid .bt-card-link {
  background: var(--bt-card);
  border: 1px solid var(--bt-hair);
  display: flex;
  flex-direction: column;
}

.bt-archive-grid .bt-card-link:hover {
  border-color: var(--bt-red);
}

/* Thumbnail fill — image absolutely fills the aspect-ratio box */
.bt-card__media {
  position: relative;
  overflow: hidden;
}

.bt-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card excerpt text */
.bt-card__excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bt-mute-2);
  margin: 0 0 14px;
  flex: 1;
}

/* Card meta row */
.bt-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

/* Pagination */
.bt-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--bt-hair);
}

.bt-pagination a {
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bt-ink);
  color: #fff;
  padding: 10px 22px;
  display: inline-block;
}

.bt-pagination a:hover { background: var(--bt-red); }

.bt-pagination__info {
  flex: 1;
  text-align: center;
}

/* Category sidebar list */
.bt-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bt-cat-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--bt-hair);
  background: var(--bt-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s;
}

.bt-cat-list__item:hover {
  border-color: var(--bt-red);
  color: var(--bt-red);
}

.bt-cat-list__item.is-active {
  background: var(--bt-red);
  border-color: var(--bt-red);
  color: #fff;
}

.bt-cat-list__item.is-active .bt-label {
  color: rgba(255,255,255,.7);
}

/* Empty state */
.bt-archive-empty {
  padding: 80px 0;
  text-align: center;
}

/* ============================================================
   SHOP PAGE — append to bottom of redline.css
   Covers: product grid, product cards, filter sidebar,
   WooCommerce toolbar overrides, filter plugin overrides.
   ============================================================ */

/* ---------- PRODUCT GRID ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Each list item is just a passthrough — card styling lives on the <a> */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- PRODUCT CARD ---------- */
.bt-product-card {
  background: var(--bt-card);
  border: 1px solid var(--bt-hair);
  display: flex;
  flex-direction: column;
}

.bt-product-card:hover { border-color: var(--bt-red); }

.bt-product-price {
  margin-top: auto;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.bt-product-card__cta {
  display: block;
  text-align: center;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bt-red);
  color: #fff;
  padding: 10px;
  margin-top: auto;
}

.bt-product-card:hover .bt-product-card__cta { background: var(--bt-ink); }

/* ---------- TOOLBAR ---------- */
/* WC result count */
.woocommerce-result-count {
  font-family: var(--bt-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bt-mute-2);
  margin: 0;
}

/* WC ordering select — re-use bt-select styling */
.woocommerce-ordering select,
.woocommerce form.woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background-color: var(--bt-card);
  border: 1px solid #ddd9d2;
  color: var(--bt-ink-soft);
  padding: 9px 36px 9px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff2d20' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

/* ---------- FILTER SIDEBAR ---------- */
.bt-shop-filters .my-basic-product-filter {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Filter section headers */
.bt-shop-filters .filter-toggle,
.bt-shop-filters .filter-group > button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 2px solid var(--bt-ink);
  padding: 12px 0 10px;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bt-ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bt-shop-filters .filter-toggle:hover { color: var(--bt-red); }

.bt-shop-filters .filter-toggle::after {
  content: '+';
  font-family: var(--bt-font-display);
  font-size: 18px;
  color: var(--bt-red);
}

.bt-shop-filters .filter-toggle[aria-expanded="true"]::after { content: '−'; }

/* Filter content areas */
.bt-shop-filters .filter-content { padding: 10px 0 16px; }
.bt-shop-filters .filter-content[hidden] { display: none; }

/* Checkbox rows */
.bt-shop-filters .category-checkbox-list li,
.bt-shop-filters .attribute-checkbox-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--bt-hair);
  list-style: none;
  margin: 0;
}

.bt-shop-filters .category-checkbox-list li:last-child,
.bt-shop-filters .attribute-checkbox-list li:last-child { border-bottom: none; }

.bt-shop-filters input[type="checkbox"] {
  width: 13px;
  height: 13px;
  border: 1.5px solid #b9b6b0;
  accent-color: var(--bt-red);
  cursor: pointer;
  flex-shrink: 0;
}

.bt-shop-filters label { cursor: pointer; flex: 1; }
.bt-shop-filters label:hover { color: var(--bt-red); }

/* Price slider section */
.bt-shop-filters .filter-price { padding: 14px 0; border-bottom: none; }
.bt-shop-filters .filter-price label {
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bt-ink);
  margin-bottom: 14px;
}

/* jQuery UI slider override */
.bt-shop-filters .ui-slider {
  background: #ddd9d2;
  border: none;
  border-radius: 0;
  height: 5px;
  margin: 24px 4px 16px;
}

.bt-shop-filters .ui-slider-range { background: var(--bt-red); border-radius: 0; }

.bt-shop-filters .ui-slider-handle {
  width: 16px;
  height: 16px;
  background: var(--bt-ink);
  border: 3px solid var(--bt-red);
  border-radius: 50%;
  top: -6px;
  cursor: pointer;
  outline: none;
}

/* Price inputs display */
.bt-shop-filters .price-slider-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.bt-shop-filters .min-price-label,
.bt-shop-filters .max-price-label {
  font-family: var(--bt-font-mono);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #ddd9d2;
  background: var(--bt-card);
  padding: 7px 11px;
}

/* Apply/submit button */
.bt-shop-filters .filter-submit-button {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bt-red);
  color: #fff;
  padding: 13px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
}

.bt-shop-filters .filter-submit-button:hover { background: var(--bt-ink); }

/* Hidden attribute groups (shown after AJAX) */
.bt-shop-filters .attribute-group[hidden] { display: none; }
.bt-shop-filters .attribute-group { display: block; }

/* ---------- WC PAGINATION ---------- */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li { margin: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--bt-font-display);
  font-size: 17px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bt-hair);
  background: var(--bt-card);
  color: var(--bt-ink-soft);
}

.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--bt-red); color: var(--bt-red); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--bt-red); color: #fff; border-color: var(--bt-red); }

/* Remove WooCommerce's float clearfix — not needed on a grid layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

/* Pagination injected inside the grid via AJAX — force it to span all columns */
.woocommerce ul.products nav.woocommerce-pagination,
.woocommerce ul.products > nav {
  grid-column: 1 / -1;
  margin-top: 28px;
}

/* ============================================================
   SHOP GRID — columns-N OVERRIDE
   WooCommerce sets float + width on li.product via .columns-N
   classes. Neutralise all of them so our grid takes full control.
   ============================================================ */

/* Kill float/width on every columns-N variant WC might output */
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products.columns-1 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-5 li.product,
.woocommerce-page ul.products.columns-6 li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
}

/* Lock the grid to 3 columns regardless of WC's columns-N class */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

/* Clearfix pseudo-elements are useless on grid — remove them */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   SINGLE PRODUCT PAGE — append to bottom of redline.css
   ============================================================ */

/* Ensure WooCommerce doesn't inject its own layout wrappers */
.woocommerce div.product { margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-notices-wrapper { display: none; }

/* Gallery main image fills 1:1 box */
.woocommerce div.product div.images { float: none; width: auto; }
.woocommerce div.product div.images img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Kill WC's default summary float so our grid takes over */
.woocommerce div.product div.summary { float: none; width: auto; }

/* Price — strip WC default margins */
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: inherit; color: inherit; }

/* Description body text */
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0; }

/* Stat band numbers */
.bt-stat { font-family: var(--bt-font-display); line-height: .9; }

/* Product card image in related — 1:1 aspect ratio */
.bt-product-card .bt-card__media[style*="aspect-ratio:1/1"] { aspect-ratio: 1/1 !important; }

/* Additional info table last row — no bottom border */
section .bt-shell div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Additional info table last row — no bottom border */
section .bt-shell-post div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Additional info table last row — no bottom border */
section .bt-shell-category div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Additional info table last row — no bottom border */
section .bt-shell-product div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Additional info table last row — no bottom border */
section .bt-shell-product-content div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Additional info table last row — no bottom border */
section .bt-shell-shop div[style*="border:1px solid var(--bt-hair)"] > div:last-child { border-bottom: none; }

/* Key specs last row */
aside div[style*="border:1px solid var(--bt-hair); border-top:none"] > div:last-child { border-bottom: none; }

/* Ghost of WC add-to-cart form — hide since we use affiliate links */
.woocommerce div.product form.cart { display: none; }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: none; }

/* WC tabs (Description / Additional Info / Reviews) — hide since
   we build our own sections above. Remove this rule if you want
   WC's tabs to show alongside the custom layout. */
.woocommerce div.product .woocommerce-tabs { display: none; }

/* Related products WC section — hide since we have our own above */
.woocommerce .related.products { display: none; }
.woocommerce .up-sells.upsells.products { display: none; }


/* ============================================================
   TOOLS PAGE — THE GARAGE
   Overrides for sim-racing-comparison-tool and
   sim-racing-compatibility plugin outputs.
   Append to bottom of redline.css.
   ============================================================ */

/* ---------- SHARED TAB BUTTONS ---------- */
.bt-garage-tab {
  font-size: 17px;
  border: none;
  cursor: pointer;
  line-height: 1;
}

/* ---------- COMPARISON TOOL OVERRIDES ---------- */

/* Kill the old dark/green background on slots */
.sim-slot {
  background: var(--bt-card) !important;
  background-image: none !important;
  border: 1px solid var(--bt-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
}

/* Slot grid */
.sim-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  justify-content: stretch !important;
  max-width: none !important;
}

.sim-slot {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Selects inside comparison slots */
.sim-product-selectors {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px;
}

.sim-product-selectors select,
.sim-category-select,
.sim-brand-select,
.sim-product-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  background-color: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  color: var(--bt-ink-soft) !important;
  padding: 9px 32px 9px 12px !important;
  width: 100% !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff2d20' stroke-width='2'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
}

/* Product card inside slot */
.sim-product-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  background: transparent !important;
  height: auto !important;
}

.product-content-left {
  grid-area: unset !important;
  border-right: none !important;
  border-bottom: 1px solid var(--bt-hair) !important;
  padding: 0 0 12px !important;
  margin-bottom: 12px;
}

.product-content-right {
  grid-area: unset !important;
  padding: 0 !important;
}

.sim-product-actions {
  grid-area: unset !important;
  padding: 0 !important;
  margin-top: 14px !important;
}

/* Product image */
.sim-product-image img {
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3 !important;
  object-fit: contain !important;
  background: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Product title */
.sim-product-card h4 {
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--bt-ink-soft) !important;
  text-align: left !important;
  text-shadow: none !important;
  margin: 10px 0 6px !important;
}

/* Price */
.sim-product-card .price,
.sim-product-card .woocommerce-Price-amount {
  font-family: var(--bt-font-display) !important;
  font-size: 26px !important;
  color: var(--bt-ink-soft) !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

/* Attributes */
.product-content-right .attributes,
.product-content-right .attribute {
  font-size: 13px !important;
  color: var(--bt-mute-2) !important;
  min-height: unset !important;
}

.product-content-right .attribute {
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--bt-hair-soft) !important;
  margin: 0 !important;
}

.product-content-right .attribute:last-child { border-bottom: none !important; }

/* Buy/affiliate button */
.affiliate-button,
.sim-product-actions .affiliate-button,
.sim-product-actions a,
.sim-product-actions button.single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--bt-red) !important;
  color: #fff !important;
  padding: 11px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.affiliate-button:hover,
.sim-product-actions a:hover,
.sim-product-actions button.single_add_to_cart_button:hover {
  background: var(--bt-ink) !important;
  color: #fff !important;
}

/* Add/Reset button */
.sim-add-reset-button,
.sim-actions button {
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--bt-ink) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

.sim-add-reset-button:hover { background: var(--bt-red) !important; }

/* WMAD buy box select */
.wmad-buy-box select {
  font-family: var(--bt-font-cond) !important;
  font-size: 14px !important;
  border: 1px solid var(--bt-hair) !important;
  padding: 8px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
}

/* ============================================================
   TOOLS PAGE — THE GARAGE
   Append to bottom of redline.css.
   Covers: tab buttons, comparison tool, compatibility tool.
   ============================================================ */

/* ---------- TAB BUTTONS ---------- */
.bt-tab-btn {
  transition: background .15s, color .15s, border-color .15s;
}

/* ---------- COMPARISON TOOL ---------- */

/* Kill the dark/green slot backgrounds from style.css */
.sim-slot {
  background: var(--bt-card) !important;
  background-image: none !important;
  border: 1px solid var(--bt-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
  flex-basis: calc(33.33% - 12px) !important;
  min-width: 260px !important;
}

.sim-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  justify-content: center !important;
  max-width: none !important;
}

/* --- Selects --- */
.sim-product-selectors {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.sim-category-select,
.sim-brand-select,
.sim-product-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  background-color: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  color: var(--bt-ink-soft) !important;
  padding: 9px 30px 9px 10px !important;
  width: 100% !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff2d20' stroke-width='2'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

/* --- Product card inside slot --- */
.sim-product-card {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  height: auto !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}

.product-content-left {
  grid-area: unset !important;
  border-right: none !important;
  border-bottom: 1px solid var(--bt-hair) !important;
  padding: 0 0 12px !important;
  margin-bottom: 12px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.product-content-right {
  grid-area: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.sim-product-actions {
  grid-area: unset !important;
  padding: 0 !important;
  margin-top: 14px !important;
}

/* Product image — 4:3, contained */
.sim-product-image img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  background: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Product title */
.sim-product-card h4 {
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  line-height: 1.04 !important;
  text-transform: uppercase !important;
  color: var(--bt-ink-soft) !important;
  text-shadow: none !important;
  text-align: left !important;
  display: block !important;
  min-height: unset !important;
  margin: 10px 0 5px !important;
  justify-content: unset !important;
}

/* Brand label above title */
.sim-product-card .brand-label {
  font-family: var(--bt-font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  color: var(--bt-mute) !important;
  text-transform: uppercase !important;
}

/* Price */
.sim-product-card .price,
.sim-product-card .woocommerce-Price-amount {
  font-family: var(--bt-font-display) !important;
  font-size: 22px !important;
  color: var(--bt-ink-soft) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Attributes */
.product-content-right .attributes {
  min-height: unset !important;
  color: var(--bt-mute-2) !important;
}

.product-content-right .attribute {
  font-size: 13px !important;
  color: var(--bt-mute-2) !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--bt-hair-soft) !important;
  margin: 0 !important;
}

.product-content-right .attribute:last-child { border-bottom: none !important; }

/* Affiliate / buy button */
.sim-product-actions .affiliate-button,
.sim-product-actions a,
.sim-product-actions button.single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--bt-red) !important;
  color: #fff !important;
  padding: 11px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.sim-product-actions .affiliate-button:hover,
.sim-product-actions a:hover,
.sim-product-actions button.single_add_to_cart_button:hover {
  background: var(--bt-ink) !important;
  color: #fff !important;
}

/* WMAD select inside card */
.wmad-buy-box select {
  font-family: var(--bt-font-cond) !important;
  font-size: 14px !important;
  border: 1px solid var(--bt-hair) !important;
  padding: 8px !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
}

/* Add/Reset button */
.sim-add-reset-button {
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--bt-ink) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transform: skewX(var(--bt-skew)) !important;
}

.sim-add-reset-button:hover { background: var(--bt-red) !important; }

/* ---------- COMPATIBILITY TOOL ---------- */

#sim-compatibility-wrapper {
  padding: 0 !important;
  align-items: stretch !important;
}

/* Compat slot grid */
.compat-grid {
  display: grid !important;
  grid-template-columns: 33.3% 33.3% 33.3%;
  max-width: none !important;
  justify-content: stretch !important;
  margin-top: 0 !important;
}

/* Individual compat slot */
.compat-slot {
  width: auto !important;
  background: var(--bt-card) !important;
  background-image: none !important;
  border: 1px solid var(--bt-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.compat-slot select {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  background-color: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  color: var(--bt-ink-soft) !important;
  padding: 9px 12px !important;
  width: 100% !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Compat product card */
.compat-product-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.compat-product-card img {
  border-radius: 0 !important;
  background-color: var(--bt-paper) !important;
  border: 1px solid var(--bt-hair) !important;
  aspect-ratio: 4/3 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin-bottom: 10px !important;
}

.compat-product-card h4 {
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  color: var(--bt-ink-soft) !important;
  text-shadow: none !important;
  text-align: left !important;
  min-height: unset !important;
  display: block !important;
  justify-content: unset !important;
  margin: 8px 0 6px !important;
}

.compat-product-card .price {
  font-family: var(--bt-font-display) !important;
  font-size: 22px !important;
  color: var(--bt-ink-soft) !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

.compat-product-card .attribute {
  color: var(--bt-mute-2) !important;
  font-size: 13px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--bt-hair-soft) !important;
  margin: 0 !important;
}

.compat-product-card .attribute:last-child { border-bottom: none !important; }

.compat-product-card .affiliate-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-family: var(--bt-font-cond) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--bt-red) !important;
  color: #fff !important;
  padding: 10px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  margin-top: 10px !important;
}

.compat-product-card .affiliate-button:hover { background: var(--bt-ink) !important; }

/* Compatibility result banner */
#compatibility-result {
  font-family: var(--bt-font-display) !important;
  font-size: 32px !important;
  text-transform: uppercase !important;
  margin-top: 24px !important;
  padding: 0px 0px 20px 0px!important;
  color: #fff !important;
  text-align: left !important;
  font-weight: 400 !important;
}

#compatibility-result.compatible   { background: var(--bt-go) !important; }
#compatibility-result.incompatible { background: var(--bt-red) !important; }

/* ---------------------------------------------------------------
   FUTURE-PROOF: when you rebuild the comparison plugin to output
   a proper table grid (label col + 3 product cols), these classes
   will be ready. The mockup grid uses:
     .bt-compare-grid    — outer 200px + 3fr grid
     .bt-compare-label   — dark label cell
     .bt-compare-cell    — product spec cell
     .bt-compare-winner  — "BEST" badge
   --------------------------------------------------------------- */
.bt-compare-grid {
  border: 1px solid var(--bt-hair);
  background: var(--bt-hair);
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 1px;
}

.bt-compare-grid__vs {
  background: var(--bt-ink);
  color: var(--bt-red);
  font-family: var(--bt-font-display);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-compare-grid__header {
  background: var(--bt-card);
  padding: 14px;
}

.bt-compare-label {
  background: var(--bt-ink);
  color: #fff;
  padding: 14px 16px;
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.bt-compare-cell {
  background: var(--bt-card);
  padding: 14px 16px;
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-compare-cell--win { background: var(--bt-red-tint); }

.bt-compare-winner {
  font-family: var(--bt-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--bt-red);
  color: #fff;
  padding: 2px 6px;
}

div#compatibility-product-details .compat-product-card img {
    object-fit: cover !important;
}

.the_latest_home .bt-card__media {
    aspect-ratio: 16 / 9 !important;
    flex: 1 0 0px !important;
}

li#menu-item-1169:hover {
    background-color: #fff!important;
    color: #000;
}


/* ============================================================
   DEALS PAGE — append to bottom of redline.css
   Covers: promo code cards, deal cards, alert band,
   and the plugin hook points (.bt-deals-* classes).
   ============================================================ */

/* ---------- PROMO CODE GRID ---------- */
.bt-deals-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Dark promo code card */
.bt-promo-card {
  position: relative;
  background: var(--bt-ink);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Giant % or saving watermark behind the card content */
.bt-promo-card__watermark {
  position: absolute;
  right: -14px;
  top: -20px;
  font-family: var(--bt-font-display);
  font-size: 96px;
  line-height: .7;
  color: rgba(255, 45, 32, .16);
  pointer-events: none;
  user-select: none;
}

.bt-promo-card__body {
  position: relative;
  padding: 20px 22px 0;
  flex: 1;
}

/* Dashed perforated strip at bottom */
.bt-promo-card__strip {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: stretch;
  border-top: 2px dashed #3a3b3f;
}

.bt-promo-card__code {
  flex: 1;
  padding: 15px 20px;
  font-family: var(--bt-font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .14em;
  color: #fff;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

.bt-promo-card__copy {
  border: none;
  cursor: pointer;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--bt-red);
  color: #fff;
  padding: 0 22px;
  flex-shrink: 0;
  transition: background .15s;
}

.bt-promo-card__copy:hover { background: #fff; color: var(--bt-ink); }

/* ---------- DEALS GRID ---------- */
.bt-deals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Individual deal card */
.bt-deal-card {
  display: flex;
  flex-direction: column;
  background: var(--bt-card);
  border: 1px solid var(--bt-hair);
  text-decoration: none;
  color: inherit;
}

.bt-deal-card:hover { border-color: var(--bt-red); }

.bt-deal-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, #ecebe6 0 10px, #f4f2ed 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bt-deal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bt-deal-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}

.bt-deal-card__title {
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.04;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.bt-deal-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  margin-bottom: 14px;
}

.bt-deal-card__cta {
  display: block;
  text-align: center;
  font-family: var(--bt-font-cond);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bt-red);
  color: #fff;
  padding: 9px;
}

.bt-deal-card:hover .bt-deal-card__cta { background: var(--bt-ink); }

/* ---------- ALERT / NEWSLETTER BAND ---------- */
.bt-deals-alert-band {
  position: relative;
  background: var(--bt-red);
  color: #fff;
  overflow: hidden;
}

.bt-deals-alert-band__watermark {
  position: absolute;
  right: -30px;
  top: -40px;
  font-family: var(--bt-font-display);
  font-size: 240px;
  line-height: .7;
  color: rgba(255, 255, 255, .12);
  pointer-events: none;
  user-select: none;
}

/* Email input inside the alert band */
.bt-deals-alert-band input[type="email"] {
  font-family: var(--bt-font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  background: #fff;
  border: none;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
}

/* ---------- BRAND PILL ACTIVE STATE ---------- */
/* Active pill is already .bt-chip (red).
   Outline pill uses .bt-chip--outline.
   Override border-color when inside #bt-brand-filters */
#bt-brand-filters .bt-chip--outline {
  border: 1px solid var(--bt-hair);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .bt-deals-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .bt-deals-promo-grid { grid-template-columns: 1fr; }
  .bt-deals-grid       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .bt-deals-grid { grid-template-columns: 1fr; }
}


.wp-caption {
    max-width: 100% !important;
    width: 100% !important;
}

.srct-buy-cell a.srct-buy-btn {
    color: #fff;
}

picture.avatar img {
    width: 114px;
}

.the_latest_home a.bt-card-link.bt-card-link--list {
    background: transparent;
    border: none;
}


/* ---------- ALL ADDITIONAL RESPONSIVE CSS ---------- */

/* ---------- Hamberger ---------- */
/* ============================================================
   RESPONSIVE NAV — append to bottom of redline.css
   Hamburger fires whenever nav items would overlap the logo.
   Uses a JS-measured breakpoint rather than a fixed px value
   so it works regardless of how many menu items you have.
   ============================================================ */

/* ---------- HAMBURGER BUTTON ---------- */
#bt-menu-toggle {
  display: none;           /* hidden until JS adds .bt-nav-mobile to <header> */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

/* Three-bar icon */
.bt-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}

.bt-hamburger span {
  display: block;
  height: 2px;
  background: #fff;
  transform-origin: center;
  transition: transform .22s ease, opacity .22s ease, width .22s ease;
}

/* Animated X when open */
#bt-menu-toggle[aria-expanded="true"] .bt-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#bt-menu-toggle[aria-expanded="true"] .bt-hamburger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
#bt-menu-toggle[aria-expanded="true"] .bt-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MOBILE LAYOUT (class added by JS when needed) ---------- */
.bt-nav-mobile .bt-header__inner {
  flex-wrap: wrap;
  position: relative;
}

/* Show the button */
.bt-nav-mobile #bt-menu-toggle {
  display: flex;
}

/* Hide nav by default in mobile mode */
.bt-nav-mobile .bt-nav {
  display: none;
  width: 100%;
  order: 3;                /* pushes below logo + button row */
  border-top: 1px solid #2a2b2f;
  padding: 12px 0 16px;
}

/* Show nav when open */
.bt-nav-mobile .bt-nav.is-open {
  display: block;
}

/* Stack nav items vertically */
.bt-nav-mobile .bt-nav__list {
  flex-direction: column !important;
  gap: 0 !important;
  width: 100%;
}

.bt-nav-mobile .bt-nav__list li {
  margin: 0;
  border-bottom: 1px solid #2a2b2f;
}

.bt-nav-mobile .bt-nav__list li:last-child {
  border-bottom: none;
}

.bt-nav-mobile .bt-nav__list a {
  display: block;
  padding: 13px 0;
  font-size: 18px !important;
}

/* Shop Gear button in mobile — full width */
.bt-nav-mobile #menu-item-1169,
.bt-nav-mobile .bt-nav__list li.menu-item:last-child {
  transform: none !important;
  background: none !important;
  padding: 0 !important;
}

.bt-nav-mobile .bt-nav__list li.menu-item:last-child a {
  background: var(--bt-red);
  color: #fff;
  text-align: center;
  margin-top: 8px;
  padding: 13px 0;
}



/* ============================================================
   HOMEPAGE RESPONSIVE — append to bottom of redline.css
   Covers: hero section, latest strip list grid, page content
   sections on the homepage (video, deals, compat band).
   ============================================================ */

/* ── HERO (replaces all the inline styles in front-page.php) ── */
.bt-hero {
  position: relative;
  background: var(--bt-ink);
  color: #fff;
  overflow: hidden;
}

/* Right-side image panel */
.bt-hero__image {
  position: absolute;
  top: 0; right: 0;
  width: 62%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.bt-hero__image--placeholder {
  background: repeating-linear-gradient(135deg, #17181b 0 14px, #1d1e22 14px 28px);
  border: none;
  opacity: .7;
}

/* Left-to-right gradient that fades the image into the dark content area */
.bt-hero__overlay {
  position: absolute;
  top: 0; right: 0;
  width: 62%; height: 100%;
  background: linear-gradient(
    90deg,
    var(--bt-ink) 0%,
    var(--bt-ink) 22%,
    rgba(12,12,13,.55) 70%,
    rgba(12,12,13,.15) 100%
  );
}

.bt-hero__stripe {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
}

.bt-hero__inner {
  position: relative;
  padding: 70px 0 66px;
}

.bt-hero__content {
  max-width: 680px;
}

.bt-hero__excerpt {
  color: #cdccc8;
  margin: 22px 0 0;
  max-width: 560px;
  font-size: 19px;
}

.bt-hero__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ── LATEST STRIP LIST GRID ─────────────────────────────── */

/* Override the hardcoded 3-auto-column grid from the plugin */
.bt-posts.bt-posts--list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

/* List-layout cards: horizontal by default */
.bt-posts--list .bt-card-link--list {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: var(--bt-card);
  border: 1px solid var(--bt-hair);
}

.bt-posts--list .bt-card-link--list:hover {
  border-color: var(--bt-red);
}

/* ── HOMEPAGE PAGE-CONTENT SECTIONS ────────────────────── */

/* Brand wall grid — 8 columns → 4 → 2 on small screens */
.bt-shell .bt-subhead[style*="display:flex"][style*="justify-content:center"],
.bt-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 12px !important;
  flex: 1;
}

/* Latest video: 2fr+1fr side-by-side */
.bt-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr;
  gap: 28px;
  align-items: stretch;
}

/* Compatibility band grid */
.bt-compat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
}

/* ── BREAKPOINTS ────────────────────────────────────────── */

/* --- Tablet: ≤ 900px --- */
@media (max-width: 900px) {

  /* Hero: image stays but shrinks */
  .bt-hero__image,
  .bt-hero__overlay {
    width: 100%;
  }

  /* Overlay becomes darker so text stays readable */
  .bt-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(12,12,13,.92) 0%,
      rgba(12,12,13,.80) 60%,
      rgba(12,12,13,.55) 100%
    );
  }

  .bt-hero__inner { padding: 52px 0 48px; }
  .bt-hero__content { max-width: 100%; }
  .bt-hero__excerpt { font-size: 17px; }

  /* Latest strip: 2 columns on tablet */
  .bt-posts.bt-posts--list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Brand wall: 4 columns */
  .bt-brand-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Video panel: stack vertically */
  .bt-video-grid {
    grid-template-columns: 1fr;
  }

  /* Compat band: stack vertically */
  .bt-compat-grid {
    grid-template-columns: 1fr;
  }

  .bt-compat-grid > div:last-child {
    min-width: unset;
    width: 100%;
  }
}

/* --- Mobile: ≤ 600px --- */
@media (max-width: 600px) {

  /* Hero: reduced padding, display--xl scales via clamp anyway */
  .bt-hero__inner { padding: 38px 0 36px; }

  .bt-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Latest strip: single column */
  .bt-posts.bt-posts--list {
    grid-template-columns: 1fr !important;
  }

  /* List cards: keep horizontal layout but shrink image */
  .bt-posts--list .bt-card-link--list {
    flex-direction: row !important;
  }

  .bt-posts--list .bt-card__media {
    width: 96px !important;
    flex: 0 0 96px !important;
  }

  /* Brand wall: 2 columns */
  .bt-brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Shop promo banner: stack */
  .bt-shop-promo {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }
}

/* --- Small mobile: ≤ 400px --- */
@media (max-width: 400px) {

  /* List cards: go full vertical on very small screens */
  .bt-posts--list .bt-card-link--list {
    flex-direction: column !important;
  }

  .bt-posts--list .bt-card__media {
    width: 100% !important;
    flex: unset !important;
    aspect-ratio: 16/9 !important;
  }
}

/* ============================================================
   BRAND WALL — append to bottom of redline.css
   ============================================================ */

.bt-brand-wall {
  background: var(--bt-ink);
  color: #fff;
  margin-top: 40px;
}

.bt-brand-wall__inner {
  padding: 26px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bt-brand-wall__label {
  font-family: var(--bt-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff7066;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Grid of brand pills */
.bt-brand-wall__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  min-width: 0; /* prevent overflow */
}

/* Individual brand pill */
.bt-brand-pill {
  border: 1px solid var(--bt-line-dark);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bt-font-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8d8c88;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  padding: 0 6px;
  box-sizing: border-box;
  transition: border-color .15s, color .15s;
}

.bt-brand-pill:hover {
  border-color: var(--bt-red);
  color: #fff;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* Tablet: label stacks above, grid goes 4 columns */
@media (max-width: 900px) {
  .bt-brand-wall__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 0;
  }

  .bt-brand-wall__grid {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile: 4 columns still fits well for short brand names */
@media (max-width: 600px) {
  .bt-brand-wall__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .bt-brand-pill {
    font-size: 12px;
    height: 42px;
  }
}

/* Small mobile: 2 columns */
@media (max-width: 380px) {
  .bt-brand-wall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================================
   LATEST VIDEO SECTION — append to bottom of redline.css
   ============================================================ */

.bt-video-section {
  background: var(--bt-ink);
  color: #fff;
  margin-top: 24px;
}

.bt-video-section__inner {
  padding: 46px 0;
}

.bt-video-section__yt-link {
  color: #8d8c88;
  white-space: nowrap;
}

.bt-video-section__yt-link:hover { color: var(--bt-red); }

/* Two-column grid: video 2fr, copy 1fr */
.bt-video-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr;
  gap: 28px;
  align-items: stretch;
}

/* 16:9 iframe wrapper */
.bt-video-section__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--bt-line-dark);
}

.bt-video-section__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Copy column */
.bt-video-section__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.bt-video-section__handle {
  color: #ff7066;
  margin-bottom: 12px;
}

.bt-video-section__heading {
  margin-bottom: 14px;
}

.bt-video-section__desc {
  font-size: 14.5px;
  color: #bdbbb6;
  margin: 0 0 20px;
}

.bt-video-section__cta {
  align-self: flex-start;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* Tablet: stack video above copy */
@media (max-width: 860px) {
  .bt-video-section__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Copy centred under video on tablet */
  .bt-video-section__copy {
    text-align: center;
    align-items: center;
  }

  .bt-video-section__cta {
    align-self: center;
  }
}

/* Mobile: tighter padding */
@media (max-width: 600px) {
  .bt-video-section__inner {
    padding: 32px 0;
  }

  /* Left-align copy on small screens — easier to read */
  .bt-video-section__copy {
    text-align: left;
    align-items: flex-start;
  }

  .bt-video-section__cta {
    align-self: flex-start;
  }
}
@media (max-width: 725px) {
  .bt-posts.bt-posts--grid {
      grid-template-columns: auto !important;
  }
  .THE.BRAKE.TRACE.SHOP a {
      display: block !important;
  }
  span.BTshop_banner {
    display: block;
    margin-top: 20px;
  }
}
@media (max-width: 900px) {
  .bt-shell-post {
      grid-template-columns: auto !important;
        max-width: 100%
  }

}
@media (max-width: 700px) {
  .bt-shell-category {
    grid-template-columns: auto!important;
  }
}
@media (max-width: 1125px) {
  .bt-shell-product {
    grid-template-columns: auto!important;
  }
  .sticky-prduct-image {
    position: relative!important;
    top: 0px !important;
  }
  picture.attachment-woocommerce_single.size-woocommerce_single {
    width: auto!important;
  }
  .bt-shell-product-content {
    grid-template-columns: auto!important;
  }
  .bt-shell-product-content .bt-body {
    max-width: 100%!important;
  }
}
@media (max-width: 725px) {
  .related_gear {
    grid-template-columns: auto auto!important;
  }
}
@media (max-width: 600px) {
  .compatibility-check {
    grid-template-columns: auto!important;
  }
}
@media (min-width: 721px) and (max-width: 1000px) {
  ul.products.columns-4 {
    grid-template-columns: auto auto!important;
  }
}
@media (max-width: 720px) {
  ul.products.columns-4 {
    grid-template-columns: auto!important;
  }
}
@media (max-width: 660px) {
  ul.products.columns-4 {
    grid-template-columns: auto!important;
  }
  .bt-shell-shop {
    grid-template-columns: auto !important;
  }
  aside.bt-shop-filters {
      position: relative !important;
      top: 0 !important;
  }
}
@media (max-width: 920px) {
  .home_compat {
    grid-template-columns: auto!important;
  }
}


/* Shop product grid — smooth fade in on load and filter changes */
.bt-product-loop-wrap {
  transition: opacity 1s ease;
}