/*
Theme Name: CSR Performance
Description: Custom theme for csr-performance.com. Replaces VW Auto Parts Pro
  (stock vendor theme) with hand-written code matching the site's existing
  look. No homepage builder, no Customizer color panel, no Bootstrap --
  the visual design that used to live in ~300 Customizer settings is now
  plain CSS.
Version: 1.0.0
Text Domain: csr-theme
*/

/* ---------- Customizable brand variables ----------
   Every color/font below that's meant to be site-wide-consistent routes
   through these instead of a repeated hardcoded value, so a single change
   here (or an override from the "Customize Look" admin tool) reaches every
   place it's used. Deliberately NOT included: the nav's Merriweather font
   declaration (no matching @font-face exists, so it already silently falls
   back to Georgia -- pre-existing, unrelated to this) and the spec-plate's
   Courier New monospace value (a deliberate "printed label" effect, not
   general text). */
:root {
  --csr-accent: #dd9933;
  --csr-dark: #1a1a1a;
  --csr-price: #cc2222;
  --csr-heading-font: 'Play', Arial, sans-serif;
  --csr-body-font: 'ABeeZee', Arial, sans-serif;
}

/* ---------- Fonts (self-hosted, subset to what's actually used) ---------- */
@font-face {
  font-family: 'Play';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/webfonts/play-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/webfonts/abeezee-regular.woff2') format('woff2');
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; border: none; }
/* overflow-x on body alone isn't reliably propagated to the viewport
   scrollbar by every engine -- set explicitly on html too. */
html { overflow-x: hidden; }
body {
  font-family: var(--csr-body-font);
  font-weight: 300;
  font-size: 15px;
  color: #000;
  background-color: #f1f1f1;
  background-image: url('../../uploads/2022/08/allstar-body.gif');
  background-position: center center;
  background-size: contain;
  background-repeat: repeat;
  background-attachment: fixed;
  /* .row's -15px gutter margin is normally absorbed by .container's own
     15px padding, but .container.shop-page deliberately zeroes its padding
     (edge-to-edge white background) which leaves that bleed uncompensated.
     Invisible on desktop (the boxed layout has margin to spare either
     side), but on mobile .container IS the viewport, so the bleed becomes
     15px of real, visible horizontal scroll. Clipping it here is simpler
     and safer than threading padding through every .shop-page override. */
  overflow-x: hidden;
  /* Boxed layout: the whole body -- header/nav backgrounds included, not
     just the inner content -- is constrained to 1140px, matching the
     live site. The gradient background shows in the margin on either side.
     width:100% (not a hard 1140px) so this actually shrinks on viewports
     narrower than 1140 instead of forcing horizontal scroll on every phone
     -- this was the real root cause of the mobile layout being pushed wide,
     not just the nav's flex-wrap (fixed separately, below). */
  width: 100%;
  max-width: 1140px;
  margin: 0 auto !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--csr-heading-font);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  padding: 10px 0;
  color: #000;
}
h1, .woocommerce .summary h1 { color: #0a0000; }
p { margin: 0 0 15px; }
a { text-decoration: none; }
a.button {
  display: inline-block;
  background-color: var(--csr-accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 2px;
}
a.button:hover { filter: brightness(0.88); }

/* ---------- Layout: boxed 1140px, no grid framework needed ---------- */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class*="col-"] { flex: 1 1 50%; padding: 0 15px; }
.row > .col-lg-9 { flex: 1 1 75%; max-width: 75%; }
.row > .col-lg-3 { flex: 1 1 25%; max-width: 25%; }
.row > .col-lg-12 { flex: 1 1 100%; max-width: 100%; }
@media (max-width: 767px) {
  .row > [class*="col-"] { flex: 1 1 100%; max-width: 100%; }
}
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- Top bar ---------- */
#topbar {
  background-color: #1b1b1b;
  padding: 5px;
}
#topbar .topbar-sell { text-align: right; }
#topbar .login-text a {
  display: inline-block;
  font-size: 15px;
  color: #7d8086;
  font-weight: 700;
  font-family: var(--csr-heading-font);
}

/* ---------- Header banner ---------- */
#header { background: none !important; }
#header-box {
  background-color: var(--csr-dark);
  border-left: 1px double #000;
  border-right: 1px double #000;
}
#header-box .container { padding: 0; }
#custom-header img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Nav + dropdown ---------- */
.menubar, #header-box { background-color: var(--csr-dark); }
.menubar {
  border-top: 1px solid #3b3b3b;
  border-left: 1px double #000;
  border-right: 1px double #000;
}
.hamburger { display: none; padding: 10px 15px; cursor: pointer; }
.hamburger i { color: #fff; font-size: 22px; }

.side-navigation { padding: 0; margin: 0; text-align: left; }
.side-navigation ul.primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.side-navigation li {
  display: inline-block;
  margin: 0;
  padding: 0 25px;
  border-left: 1px solid #3b3b3b;
  position: relative;
}
.side-navigation li:first-child { border-left: none; }
.side-navigation a {
  text-decoration: none;
  padding: 8px 0;
  white-space: nowrap;
  display: block;
  line-height: 25px;
  font-size: 18px;
  letter-spacing: 1px;
  color: #ffffff;
  font-weight: 700;
  /* Was 'Merriweather', Georgia, serif -- no matching @font-face exists for
     Merriweather anywhere in the theme, so this was silently falling back
     to plain Georgia the whole time, a mismatched serif in an otherwise
     all-heading-font site. */
  font-family: var(--csr-heading-font);
  text-align: center;
  transition: color 0.15s ease;
}
.side-navigation ul li a:hover { color: var(--csr-accent); }
.side-navigation .current_page_item > a { color: var(--csr-accent) !important; }
.side-navigation .current_page_item { border-color: var(--csr-accent) !important; }

.side-navigation ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--csr-dark);
  min-width: 220px;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  border-top: 2px solid var(--csr-accent);
}
.side-navigation ul ul li {
  display: block;
  border-left: none;
  padding: 0;
}
.side-navigation ul ul a {
  color: #f2f2f2 !important;
  font-size: 15px;
  padding: 10px 16px;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.side-navigation ul ul a:hover {
  color: var(--csr-accent) !important;
  background-color: rgba(255,255,255,0.06);
}
/* "Back to Shop": appended to the bottom of every intermediate drill-down
   dropdown (csr_dynamic_category_nav() in functions.php) -- set apart from
   the real categories above it with a rule and quieter, italic styling so
   it doesn't read as just another sibling category. */
.side-navigation ul ul li.csr-back-to-shop {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 4px;
}
.side-navigation ul ul li.csr-back-to-shop a {
  font-style: italic;
  color: #b8b8b8 !important;
}
.side-navigation ul ul li.csr-back-to-shop a:hover {
  color: var(--csr-accent) !important;
}
.side-navigation li.menu-item-has-children > a:after {
  content: "\f078";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.side-navigation li.js-dropdown-open > a:after { transform: rotate(180deg); }
.side-navigation li.js-dropdown-open > ul { display: block; }

/* Two separate nav renders share all the rules above (both carry the
   .primary-menu class): primary-menu-desktop is the dynamic, current-
   category-aware one (csr_dynamic_category_nav() in functions.php),
   primary-menu-mobile is the full static tree she edits in "Edit the Menu".
   Only one is ever actually shown, split by the same 1024px breakpoint the
   hamburger toggle already uses. */
@media (min-width: 1025px) {
  .side-navigation ul.primary-menu-mobile { display: none !important; }
}

@media (max-width: 1024px) {
  .hamburger { display: block; }
  /* Base .primary-menu rule sets flex-wrap: wrap for the desktop row layout;
     left un-overridden here, flex-direction: column + flex-wrap: wrap makes
     a tall menu wrap into new side-by-side columns instead of one scrollable
     list, pushing the page well past the viewport width. */
  .side-navigation ul.primary-menu { display: none; flex-direction: column; flex-wrap: nowrap; }
  .side-navigation.mobile-open ul.primary-menu { display: flex; }
  .side-navigation li { border-left: none; width: 100%; }
  .side-navigation ul ul { position: static; box-shadow: none; }
  .side-navigation ul.primary-menu-desktop { display: none !important; }
}

/* ---------- Search box (Gutenberg Search block) ---------- */
/* Was fully unstyled -- browser-default gray border, zero padding, and a
   generic near-black button unrelated to the site's own gold/dark
   palette. Input and button styled to read as one connected control. */
.wp-block-search__input {
  border: 1px solid #ddd !important;
  border-radius: 4px 0 0 4px !important;
  padding: 10px 14px !important;
  font-size: 14px;
  font-family: var(--csr-body-font);
  height: auto !important;
}
.wp-block-search__input:focus {
  border-color: var(--csr-accent) !important;
  outline: none;
}
.wp-block-search__button {
  background-color: var(--csr-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  font-family: var(--csr-heading-font);
  font-weight: 700;
  padding: 10px 22px !important;
  transition: filter 0.15s ease;
}
.wp-block-search__button:hover {
  filter: brightness(0.88);
}

/* ---------- Return to top ---------- */
#return-to-top {
  background-color: var(--csr-accent);
  width: 40px;
  height: 40px;
  display: none;
  border-radius: 50%;
  position: fixed;
  right: 10px;
  bottom: 40px;
  text-align: center;
  z-index: 5;
}
#return-to-top i { color: #fff; font-size: 15px; line-height: 40px; }

/* ---------- Footer widgets (e.g. On Sale products) ---------- */
#footer-widgets {
  background-color: var(--csr-dark);
  padding: 24px 0;
}
#footer-widgets .widget-title {
  color: #fff;
  text-align: center;
  font-family: var(--csr-heading-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 18px;
  padding: 0 20px;
}
#footer-widgets .widget-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: var(--csr-accent);
  margin: 8px auto 0;
}
#footer-widgets ul.product_list_widget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 20px;
}
#footer-widgets ul.product_list_widget li {
  background-color: #fff;
  border-radius: 4px;
  padding: 12px 10px 16px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Flex column so the Add to cart button can sit pinned to the bottom
     (margin-top: auto below) even when a grid row stretches a shorter
     card to match a taller neighbor. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer-widgets ul.product_list_widget li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#footer-widgets ul.product_list_widget li a {
  text-decoration: none;
  color: var(--csr-dark);
  display: block;
}
#footer-widgets ul.product_list_widget li img {
  float: none;
  width: 100%;
  max-width: 100%;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 8px;
}
#footer-widgets ul.product_list_widget li .product-title {
  display: block;
  font-size: 13px;
  font-family: var(--csr-heading-font);
  line-height: 1.3;
  margin-bottom: 6px;
}
#footer-widgets ul.product_list_widget li .amount {
  font-weight: 700;
}
#footer-widgets ul.product_list_widget li del .amount {
  color: #8a8a8a;
  font-weight: 400;
}
#footer-widgets ul.product_list_widget li ins {
  text-decoration: none;
}
#footer-widgets ul.product_list_widget li ins .amount {
  color: var(--csr-price);
}
#footer-widgets ul.product_list_widget li .button {
  margin-top: 10px;
  align-self: center;
  display: inline-block;
  background-color: var(--csr-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 2px;
  text-decoration: none;
}
#footer-widgets ul.product_list_widget li .button:hover {
  filter: brightness(0.88);
}

/* ---------- Footer / copyright ---------- */
#footer {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 25px;
  box-shadow: 0 0 57px 0 rgba(0,0,0,0.11);
  border: 1px double #fff;
}
.copyright { background-color: transparent; }
.copyright-outer { align-items: center; }
.copyright-text p { color: #1c1c1c; margin: 0; font-family: var(--csr-heading-font); }
.paymentimg { text-align: center; }
.paymentimg img { display: inline-block; }

/* ---------- Page content ---------- */
.outer_dpage { padding: 0; }
/* Content containers are flush (0 padding) so their white/card backgrounds
   span the full 1140px box edge-to-edge, seamless with the header/footer
   above and below -- same box, not an inset column. Breathing room for
   text lives on the inner wrapper instead. */
.outer_dpage .container,
.container.shop {
  padding: 0;
}
.container.shop { background-color: #fff; }
.middle-content {
  padding: 20px;
  background-color: #fff;
  color: #000;
}
.middle-content .wp-block-columns { align-items: flex-start; }
.middle-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 20px;
}
.middle-content table caption,
.middle-content table th {
  background: var(--csr-dark);
  color: #fff;
  font-family: var(--csr-heading-font);
  font-weight: 700;
  text-align: left;
}
.middle-content table th,
.middle-content table td {
  border: 1px solid #e1e1e1;
  padding: 8px 12px;
}
.middle-content table tr:nth-child(even) td { background: #f7f7f7; }

/* ---------- WooCommerce: shop/category grid ---------- */
/* Related Products (and anywhere else WooCommerce defaults to a 4-column
   loop) isn't inside .container.shop-page, so it doesn't inherit that
   grid's own left/right padding -- give it the same breathing room here,
   and drop WooCommerce's default 1em bottom margin. */
.woocommerce ul.products.columns-4 {
  margin: 0;
  padding: 0 15px;
}
.woocommerce ul.products li.product { background-color: #fff; }
.woocommerce .woocommerce-Price-amount {
  color: var(--csr-price);
  font-family: var(--csr-body-font);
}
.woocommerce span.onsale, .added_to_cart { background-color: var(--csr-accent); }
.woocommerce button.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--csr-accent) !important;
  color: #fff !important;
  border: none !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { filter: brightness(0.88); }

/* Product cards (actual products, not category tiles): same bordered,
   rounded-corner, shadowed treatment as the category tiles below, with a
   matching dark title bar + gold underline, so a category page reads as one
   consistent grid whether a given tile is a subcategory or an actual
   product. */
.woocommerce ul.products li.product:not(.product-category) {
  background: #fff;
  border: 1px solid var(--csr-dark);
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
  overflow: hidden;
  padding: 0 0 20px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:not(.product-category):hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product:not(.product-category) img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #fff;
  margin-bottom: 0;
}
.woocommerce ul.products li.product:not(.product-category) h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product:not(.product-category) h3.woocommerce-loop-product__title {
  margin: 0 0 14px;
  background: var(--csr-dark);
  color: #fff;
  text-align: center;
  font-family: var(--csr-heading-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  padding: 16px 14px 18px;
  position: relative;
}
.woocommerce ul.products li.product:not(.product-category) h2.woocommerce-loop-product__title::after,
.woocommerce ul.products li.product:not(.product-category) h3.woocommerce-loop-product__title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--csr-accent);
  margin: 10px auto 0;
}
.woocommerce ul.products li.product:not(.product-category) .price {
  text-align: center;
  display: block;
  padding: 0 10px;
}
.woocommerce ul.products li.product:not(.product-category) .star-rating {
  margin: 0 auto 8px;
}
.woocommerce ul.products li.product:not(.product-category) a.button {
  display: table;
  margin: 12px auto 0;
}
.woocommerce ul.products li.product:not(.product-category) a.button:hover,
.woocommerce ul.products li.product:not(.product-category) a.added_to_cart:hover {
  background-color: var(--csr-dark) !important;
}

/* ---------- Related Products: dark band + white cards, same treatment as
   the On Sale footer widget. Selectors prefixed with .woocommerce (not just
   .related.products) so this reliably outweighs the generic card rules
   above regardless of source order -- both blocks land at the same
   specificity otherwise, which is a tie a browser resolves by whichever
   comes later, too fragile to rely on. */
.woocommerce .related.products {
  background: var(--csr-dark);
  padding: 30px 20px;
  margin-top: 30px;
}
.woocommerce .related.products > h2 {
  color: #fff;
  text-align: center;
  font-family: var(--csr-heading-font);
}
.woocommerce .related.products > h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: var(--csr-accent);
  margin: 10px auto 0;
}
.woocommerce .related.products ul.products li.product {
  background-color: #fff;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce .related.products ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.woocommerce .related.products ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-decoration: none;
}
.woocommerce .related.products ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
}
.woocommerce .related.products ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title {
  padding: 0 10px;
}
.woocommerce .related.products ul.products li.product .price {
  margin-top: 4px;
  padding: 0 10px;
}
.woocommerce .related.products ul.products li.product a.button {
  margin-top: 10px;
}
.woocommerce .related.products ul.products li.product a.button:hover,
.woocommerce .related.products ul.products li.product a.added_to_cart:hover {
  background-color: var(--csr-accent) !important;
  filter: brightness(0.88);
}

/* Product Collection block (used for "Best selling products" etc.) -- newer
   WooCommerce block markup, entirely different classes from the classic
   ul.products loop above, so it needs its own matching set of rules to get
   the same bordered/centered card look. */
li.wc-block-product {
  border: 1px solid var(--csr-dark);
  border-radius: 8px;
  /* Clips the title plate's square top corners to match the card's rounded
     ones, since the plate bleeds edge-to-edge via negative margins. */
  overflow: hidden;
  padding: 14px 10px 20px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Flex column so the title plate can be moved above the image with
     order, without touching WooCommerce's own server-rendered block
     markup (image, then title, then price/button, in that DOM order). */
  display: flex;
  flex-direction: column;
}
li.wc-block-product:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
li.wc-block-product .wp-block-post-title {
  order: -1;
  font-family: var(--csr-heading-font);
  font-size: 15px !important;
  background: var(--csr-dark);
  color: #fff;
  /* Bleed to the card's outer edges, canceling the li's own padding, so
     this reads as a full-width plate like the shop-page category tiles.
     The block's inline margin-top/bottom (set directly on the element by
     the block editor) would otherwise leave a gap above it now that it's
     first -- !important is the only way to beat an inline style. */
  margin: -14px -10px 12px !important;
  padding: 12px 10px;
  position: relative;
}
li.wc-block-product .wp-block-post-title a { color: #fff; }
li.wc-block-product .wp-block-post-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--csr-accent);
  margin: 10px auto 0;
}
.wc-block-components-product-button__button {
  background-color: var(--csr-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  display: table !important;
  margin: 0 auto !important;
}
.wc-block-components-product-button__button:hover { background-color: var(--csr-dark) !important; }

/* "Best selling products" heading -- black pill, gold bar underneath,
   scoped to this specific block so it doesn't affect other headings that
   happen to share the generic .wp-block-heading.has-text-align-center
   classes elsewhere on the site. */
.wp-block-woocommerce-product-collection > h2.wp-block-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 16px;
  background: var(--csr-dark);
  color: #fff;
  padding: 10px 30px;
  border-radius: 999px;
}
.wp-block-woocommerce-product-collection > h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: var(--csr-accent);
  margin: 8px auto 0;
}

/* ---------- WooCommerce: single product ---------- */
div.summary.entry-summary {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px 28px;
}
.woocommerce-Tabs-panel.entry-content {
  background-color: #fff;
  font-size: 1.4em;
  text-align: left;
  padding: 24px 28px !important;
  border: 1px solid #e5e5e5;
  border-top: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.woocommerce-Tabs-panel h2 { display: none; }

/* Spec-plate: Part No. / Category / Tags, styled after the metal ID tags
   riveted to the physical parts in the product photos. */
.product-spec-plate {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  background: var(--csr-dark);
  border-radius: 2px;
  position: relative;
}
.product-spec-plate::before, .product-spec-plate::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #444;
}
.product-spec-plate::before { left: 8px; }
.product-spec-plate::after { right: 8px; }
.product-spec-plate .spec-field {
  flex: 1 1 33%;
  padding: 16px 18px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.product-spec-plate .spec-field:last-child { border-right: none; }
.product-spec-plate .spec-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--csr-accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.product-spec-plate .spec-value {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #f2f2f2;
  word-break: break-word;
}
.product-spec-plate .spec-value a { color: #f2f2f2; text-decoration: underline; }
@media screen and (max-width: 600px) {
  .product-spec-plate .spec-field {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .product-spec-plate .spec-field:last-child { border-bottom: none; }
}

.fitment-help { font-size: 13px; color: #666; margin: 10px 0 0; }
/* Not tied to --csr-price: coincidentally the same red today, but this is a
   call-to-action link, not a price display -- keeping it independent means
   changing the Price color later won't also recolor this link. */
.fitment-help a { color: #cc2222; font-weight: 700; text-decoration: none; }
.fitment-help a:hover { text-decoration: underline; }

/* ---------- WooCommerce: cart / checkout ---------- */
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 90px !important;
  height: auto !important;
}
/* Cart table polish -- was otherwise riding entirely on the generic
   .middle-content table rules (dark header, zebra striping) meant for
   plain content-page tables, so things like the quantity input, the
   remove button, and the product name link were still browser defaults. */
.woocommerce-cart table.cart {
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.woocommerce-cart table.cart th {
  padding: 14px 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.woocommerce-cart table.cart td {
  padding: 16px 12px;
  vertical-align: middle;
  border-color: #ededed;
}
.woocommerce-cart table.cart tr:nth-child(even) td {
  background: #fff;
}
.woocommerce-cart table.cart .product-thumbnail img {
  border: 1px solid #ededed;
  border-radius: 4px;
}
.woocommerce-cart table.cart .product-name a {
  color: var(--csr-dark);
  font-family: var(--csr-heading-font);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-cart table.cart .product-name a:hover {
  color: var(--csr-accent);
}
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
  text-align: center;
  color: var(--csr-price);
  font-weight: 700;
}
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart th.product-quantity {
  text-align: center;
}
.woocommerce-cart table.cart .quantity .qty {
  width: 60px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
}
.woocommerce-cart table.cart .product-remove {
  text-align: center;
}
.woocommerce-cart table.cart .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f1f1;
  color: #999 !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-cart table.cart .product-remove a.remove:hover {
  background: var(--csr-price);
  color: #fff !important;
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px 28px;
}
.cart_totals h2, #order_review_heading {
  font-family: var(--csr-heading-font);
  color: var(--csr-accent);
  font-size: 22px;
  margin-bottom: 12px;
}

/* Checkout polish -- was otherwise pure WooCommerce defaults: a purple
   payment-box tint (WooCommerce's own brand color, not ours), unstyled
   inputs, and a "Billing details" heading with no relation to the gold
   accent used everywhere else. */
.woocommerce-checkout #customer_details {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px 28px;
}
.woocommerce-checkout #customer_details h3 {
  font-family: var(--csr-heading-font);
  color: var(--csr-accent);
  font-size: 18px;
  margin-bottom: 12px;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
  border: 1px solid #ddd !important;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  border-color: var(--csr-accent) !important;
  outline: none;
}
.woocommerce-checkout #payment {
  background: #f4f4f4 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom-color: #e1e1e1 !important;
}
.woocommerce-checkout #payment div.payment_box {
  background-color: #fff !important;
  color: #444 !important;
  border: 1px solid #e5e5e5;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-color: transparent transparent #fff !important;
}
.woocommerce-checkout #place_order {
  padding: 14px 30px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

/* ---------- Breadcrumb ---------- */
/* A quiet wayfinding strip, not a headline -- heading font + the brand gold
   instead of the flat gray/all-caps bar this used to be. Scoped as
   ".woocommerce .woocommerce-breadcrumb" (not just the bare class) because
   WooCommerce's own bundled CSS uses that same two-class specificity for
   its default padding/color -- a plain single-class rule here loses the
   cascade to it. */
.woocommerce .woocommerce-breadcrumb {
  display: block;
  padding: 14px 20px;
  margin: 0;
  font-family: var(--csr-heading-font);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--csr-accent);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--csr-accent);
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- Shop page + category sidebar ---------- */
div.container.shop-page { background-color: #fff; padding: 0; }
div.container.shop-page .woocommerce-products-header { padding: 15px 15px 0; }

/* Category description (WooCommerce's "term-description", set per-category
   in wp-admin): was rendering as an unstyled, unaligned paragraph. Most
   categories don't have one set at all -- .woocommerce-products-header is
   empty then, and this rule has nothing to style. */
div.container.shop-page .term-description p {
  margin: 0;
  font-family: var(--csr-body-font);
  font-size: 15px;
  font-style: italic;
  color: #666;
}

/* "Showing all X results" + sort dropdown: was flush against the breadcrumb
   above and the grid below with no styling of its own. Padded into its own
   row with a bottom rule to separate it from the product grid below. Note:
   .woocommerce-products-header (wrapping woocommerce_archive_description)
   is a different, usually-empty element that sits ABOVE this row -- the
   result count/ordering row itself has no shared wrapper in this theme's
   archive-product.php, so the separator has to go on ul.products (the next
   element in flow) rather than on a border-bottom here. */
div.container.shop-page .woocommerce-result-count,
div.container.shop-page .woocommerce-ordering {
  margin: 0;
  padding: 10px 15px 14px;
  font-family: var(--csr-body-font);
  font-size: 14px;
  color: #555;
}
div.container.shop-page ul.products {
  padding: 20px 15px 0;
  border-top: 1px solid #e7e7e7;
}

/* Category tiles on /shop/: each one a card, image cropped to a consistent
   ratio so varying source-image sizes read as one even grid, text centered
   underneath with a short gold rule echoing the accent divider used on
   dropdowns and the sidebar heading elsewhere on the site. */
div.container.shop-page ul.products li.product-category {
  background: #fff;
  border: 1px solid var(--csr-dark);
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
div.container.shop-page ul.products li.product-category:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transform: translateY(-3px);
}
div.container.shop-page ul.products li.product-category a {
  display: block;
  text-decoration: none;
}
div.container.shop-page ul.products li.product-category img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #fff;
  transition: transform 0.3s ease;
}
div.container.shop-page ul.products li.product-category:hover img {
  transform: scale(1.04);
}
div.container.shop-page ul.products li.product-category h2.woocommerce-loop-category__title {
  margin: 0;
  background: var(--csr-dark);
  padding: 16px 14px 18px;
  text-align: center;
  font-family: var(--csr-heading-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: #fff;
  position: relative;
  /* Reserve space for 2 lines always, so a card with a long, wrapped title
     and a card with a short one-line title come out the same height --
     grid rows only equalize within a row, not across the whole grid.
     90px = padding (16+18) + 2 lines at 17px/1.3 (44.2) + the gold rule's
     own box (2px + 10px margin-top). Box-sizing:border-box means padding
     counts toward min-height, so this has to be the full total, not just
     the text portion. */
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div.container.shop-page ul.products li.product-category h2.woocommerce-loop-category__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--csr-accent);
  margin: 10px auto 0;
}
#sidebar .widget {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 0 57px 0 rgba(0,0,0,0.11);
  border: 1px double #fff;
}
/* Collapsible widgets: the title toggles everything else in the widget via
   sidebar-collapse.js, which just adds/removes .collapsed on the <aside>.
   Targeting "everything but the title" (rather than wrapping the widget's
   own markup) works across the different widget types in this sidebar --
   the account/cart lists, the WooCommerce cart totals, the category list --
   without needing to touch each one's template. */
#sidebar h3 {
  font-size: 24px;
  color: var(--csr-accent);
  font-weight: 700;
  padding-bottom: 15px;
  margin-bottom: 11px;
  text-align: center;
  border-bottom: 1px solid #e7e7e7;
  font-family: var(--csr-heading-font);
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
}
#sidebar h3::after {
  content: "\2212";
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--csr-accent);
}
#sidebar .widget.collapsed h3 {
  border-bottom-color: transparent;
  padding-bottom: 0;
  margin-bottom: 0;
}
#sidebar .widget.collapsed h3::after {
  content: "\002B";
}
#sidebar .widget.collapsed > * {
  display: none;
}
#sidebar .widget.collapsed > h3 {
  display: block;
}
#sidebar ul { list-style: none; margin: 0; padding: 0; font-size: 17px; }
#sidebar ul li {
  font-weight: 600;
  color: var(--csr-accent);
  font-family: var(--csr-body-font);
  font-size: 15px;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 0;
}
#sidebar ul li:last-child { border: none; }
#sidebar ul li a {
  font-weight: 600;
  color: #000;
  font-family: var(--csr-body-font);
  font-size: 15px;
}
/* Gold hover overlay on sidebar widget links. My Account / Categories links
   are plain inline text, so pulling the anchor out to a full-bleed block
   (negative margin canceling the li's own padding, restated as padding on
   the anchor) makes the gold wash fill the whole row edge-to-edge instead of
   just hugging the text. The mini cart's product link is excluded from that
   treatment -- WooCommerce already renders it as a block containing a
   thumbnail image, and it shares its <li> with an absolutely-positioned
   remove "x" button that keeps its own (red) hover state; a plain
   background-color hover is enough there without touching layout. */
#sidebar .widget_woocommerce_account ul li a,
#sidebar .widget_product_categories ul li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#sidebar .widget_woocommerce_account ul li a:hover,
#sidebar .widget_product_categories ul li a:hover {
  background-color: var(--csr-accent);
  color: #fff;
}
#sidebar .widget_shopping_cart .mini_cart_item a:not(.remove) {
  transition: background-color 0.15s ease, color 0.15s ease;
}
#sidebar .widget_shopping_cart .mini_cart_item a:not(.remove):hover {
  background-color: var(--csr-accent);
  color: #fff;
}
/* WooCommerce's default mini-cart "x" sits top-left of each item, overlapping
   the product thumbnail. Reposition it to bottom-right, in line with the
   price, since that corner is otherwise empty in this narrow sidebar. */
#sidebar .widget_shopping_cart .mini_cart_item a.remove {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 20px;
}
.woocommerce .product-category .count { display: none; }

/* ---------- WooCommerce: My Account ---------- */
nav.woocommerce-MyAccount-navigation {
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 0 57px 0 rgba(0,0,0,0.11);
  border: 1px double #fff;
  background: #fff;
}
nav.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
nav.woocommerce-MyAccount-navigation li { padding: 8px 0; border-bottom: 1px solid #e1e1e1; }
nav.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
nav.woocommerce-MyAccount-navigation li a { color: #000; font-weight: 600; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--csr-accent); }
.woocommerce-MyAccount-content { background: #fff; padding: 24px 28px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 1px solid #e5e5e5; }
/* Address cards ("Billing address"/"Shipping address") -- were plain black
   headings with WooCommerce's own default link-blue Edit links. */
.woocommerce-MyAccount-content .woocommerce-Address h2 {
  font-family: var(--csr-heading-font);
  color: var(--csr-accent);
  font-size: 18px;
}
.woocommerce-MyAccount-content .woocommerce-Address a {
  color: var(--csr-dark);
  font-weight: 600;
}
.woocommerce-MyAccount-content .woocommerce-Address a:hover {
  color: var(--csr-accent);
}

/* ---------- Pagination (shop/category grids + search results) ---------- */
nav.woocommerce-pagination ul.page-numbers,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 15px 30px;
  padding: 0;
  border: none;
  background: none;
}
nav.woocommerce-pagination ul.page-numbers li { display: inline-block; }
/* Scoped to the <a>/<span> page links specifically -- WooCommerce's wrapping
   <ul class="page-numbers"> confusingly shares this exact class name with
   its own children, so a bare .page-numbers rule styles the wrapper too. */
a.page-numbers, span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e1e1e1;
  color: #000;
  font-family: var(--csr-heading-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.page-numbers:hover { background: var(--csr-accent); border-color: var(--csr-accent); color: #fff; }
span.page-numbers.current { background: var(--csr-dark); border-color: var(--csr-dark); color: #fff; }
span.page-numbers.dots { border: none; background: none; min-width: auto; padding: 0 4px; }
a.next.page-numbers, a.prev.page-numbers { font-size: 18px; }