/* =============================================================================
   TracSpare — WooCommerce presentation.
   Styles the plugin's own markup (tracspare-core: Pricing, ProductPage,
   Facets, Quote\Form) plus WooCommerce's native templates. No business logic
   lives here — only how what those classes already output is drawn.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Quantity input — shared by the product page and the quote list
   -------------------------------------------------------------------------- */

.woocommerce .quantity input.qty {
	width: 5.5em; min-width: 0; height: 44px; padding: 0.5em 0.6em; text-align: center; line-height: 1.3;
	border: 1px solid var(--ts-field-border); border-radius: var(--ts-radius); font-family: inherit;
}

/* - and + either side of the box (theme inc/woocommerce.php prints them only
   for a plain number box). Drawn like the product cards' stepper, so the
   control looks the same wherever a quantity is set. */
.woocommerce .quantity { display: inline-flex; align-items: stretch; vertical-align: middle; }
.tracspare-qty-step {
	flex: 0 0 40px; width: 40px; min-height: 44px; margin: 0; padding: 0; border: 0; cursor: pointer;
	background: var(--ts-cta); color: var(--ts-cta-text);
	font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1;
}
.tracspare-qty-step[data-dir="-1"] { border-radius: var(--ts-radius) 0 0 var(--ts-radius); }
.tracspare-qty-step[data-dir="1"] { border-radius: 0 var(--ts-radius) var(--ts-radius) 0; }
.tracspare-qty-step:hover:not(:disabled), .tracspare-qty-step:focus-visible { background: var(--ts-cta-hover); }
.tracspare-qty-step:disabled { opacity: 0.45; cursor: default; background: var(--ts-cta); }
.woocommerce .quantity .tracspare-qty-step ~ input.qty {
	width: 4em; border-radius: 0; border-color: var(--ts-cta-edge); border-left: 0; border-right: 0;
	font-weight: 600; -moz-appearance: textfield; appearance: textfield;
}
.woocommerce .quantity .tracspare-qty-step ~ input.qty::-webkit-outer-spin-button,
.woocommerce .quantity .tracspare-qty-step ~ input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* "Send this list on WhatsApp", under "Request a quote" (tracspare-core
   Quote\QuoteListWhatsApp). */
.tracspare-quote-whatsapp {
	display: flex !important; align-items: center; justify-content: center; gap: 0.5em;
	width: 100%; min-height: 48px; margin-top: 10px; font-weight: 700; text-decoration: none;
	border-radius: var(--ts-radius);
}

/* ---------------------------------------------------------------------------
   Part numbers
   -------------------------------------------------------------------------- */

.tracspare-part-number {
	font-family: var(--ts-font-mono);
	font-variant-numeric: tabular-nums slashed-zero;
	letter-spacing: 0.02em;
	color: var(--ts-ink);
}
.tracspare-part-number-block { margin: 0 0 0.75em; display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
.tracspare-part-number-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ts-ink-soft); }
.tracspare-part-number-block .tracspare-part-number { font-size: 1.3rem; font-weight: 500; color: var(--ts-green-700); }
.tracspare-part-number--loop {
	display: flex; align-items: center; gap: 6px;
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 600; color: var(--ts-green-700); margin: 6px 0 2px;
}

.tracspare-copy-button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2em; height: 2em;
	border: 1px solid var(--ts-rule);
	border-radius: 4px;
	background: var(--ts-white);
	color: var(--ts-ink-soft);
	padding: 0; cursor: pointer;
}
.tracspare-copy-button:hover, .tracspare-copy-button:focus-visible { color: var(--ts-ink); border-color: var(--ts-ink-soft); }
.tracspare-copy-button--copied { color: var(--ts-green-700); border-color: var(--ts-green-700); }
.tracspare-copy-button__icon { width: 1.1em; height: 1.1em; }
.tracspare-copy-button--copied .tracspare-copy-button__icon--copy { display: none; }
.tracspare-copy-button:not(.tracspare-copy-button--copied) .tracspare-copy-button__icon--copied { display: none; }
.products li .tracspare-copy-button {width: 1.5em; height: 1.5em;}
/* ---------------------------------------------------------------------------
   Placeholder image (Catalog\Placeholder — parts with no photograph)
   -------------------------------------------------------------------------- */

.tracspare-placeholder { background: var(--ts-bg); }

/* ---------------------------------------------------------------------------
   Prices
   -------------------------------------------------------------------------- */

.tracspare-price-usd { font-family: var(--ts-font-display); font-weight: 700; color: var(--ts-ink); font-size: 1.05em; }
.tracspare-price-inr { color: var(--ts-body); font-weight: 700; }
.tracspare-price-sep { color: var(--ts-rule-strong); }
.tracspare-price.is-compact .tracspare-price-usd { font-size: 1em; }
.tracspare-poa { color: var(--ts-orange-800); font-weight: 600; white-space: nowrap; }
.tracspare-list-row__price .tracspare-price-usd, .tracspare-list-row__price .tracspare-price-inr, .tracspare-list-row__price .tracspare-poa { font-size: 0.8em; }

.tracspare-moq { margin: 0.5em 0 1em; font-size: 0.9rem; color: var(--ts-ink-soft); display: flex; align-items: center; gap: 0.55em; }
.tracspare-moq::before {
	content: ""; display: inline-block; width: 0.5em; height: 0.5em;
	border-radius: 50%; background: var(--ts-orange-700); flex: none;
}

/* ---------------------------------------------------------------------------
   Specifications
   -------------------------------------------------------------------------- */

.tracspare-specs { margin: 2em 0 0; background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg); padding: 22px; }
.tracspare-specs__title { font-family: var(--ts-font-display); font-size: 17px; font-weight: 800; color: var(--ts-ink); margin: 0 0 16px; text-transform: none; letter-spacing: -0.02em; }
/* A real <table>, restyled as the design's grid of cards - table/tbody/tr
   dropped out of table layout entirely (display: grid/contents/block is
   valid on table elements in every evergreen browser) rather than kept as
   rows, which is what a <th>/<td> pair actually is here: one spec, label
   over value, not two independent grid cells. auto-fill + minmax collapses
   to a single column on narrow screens on its own, so unlike the row
   layout this replaces, it needs no separate mobile breakpoint. */
.tracspare-specs__table {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px;
	background: var(--ts-rule); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius); overflow: hidden;
	font-size: 14px;
}
.tracspare-specs__table tbody { display: contents; }
.tracspare-specs__table tr { display: flex; flex-direction: column; gap: 4px; background: var(--ts-white); padding: 13px 15px; }
.tracspare-specs__table th, .tracspare-specs__table td { display: block; text-align: left; padding: 0; border: 0; }
.tracspare-specs__table th { font-size: 12px; font-weight: 400; color: var(--ts-ink-soft); white-space: normal; }
.tracspare-specs__table td { font-size: 14px; font-weight: 700; color: var(--ts-ink); }

/* ---------------------------------------------------------------------------
   "Ask about this part"
   -------------------------------------------------------------------------- */

.tracspare-ask-about-part { margin: 10px 0 22px; }
.tracspare-ask-about-part .button { width: 100%; }

/* ---------------------------------------------------------------------------
   Product loop / cards — WooCommerce's own ul.products, real grid layout
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
	gap: 20px 16px;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
	display: flex; flex-direction: column;
	background: var(--ts-white);
	border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
	transition: border-color .15s ease;
	position: relative;
	padding-bottom: 0; /* the Add to quote bar is the card's bottom edge (2 Oct) */
}
/* Orange on hover, matching the Add to quote bar (2 Oct); the deeper orange so the line still shows against white. */
.woocommerce ul.products li.product:hover,
ul.products li.product:hover { border-color: var(--ts-cta-edge); }

.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
.woocommerce .products ul::before, .woocommerce .products ul::after,
ul.products::before, ul.products::after,
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after,
ul.products li.product::before, ul.products li.product::after { content: none; display: none; }

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 0 0 auto;
	color: inherit !important; text-decoration: none !important;
}
.woocommerce ul.products li.product img,
ul.products li.product img {
	aspect-ratio: 1 / 1; object-fit: contain; background: var(--ts-white);
	border-bottom: 1px solid var(--ts-rule);
	width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ts-font-body); font-size: 15px; font-weight: 700; color: var(--ts-ink);
	line-height: 1.3; padding: 0 14px; margin: 6px 0 0;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link > span:not(.tracspare-part-number--loop),
ul.products li.product > a.woocommerce-LoopProduct-link > span:not(.tracspare-part-number--loop) { padding: 10px 14px 0 14px; }
.woocommerce ul.products li.product .tracspare-part-number--loop,
ul.products li.product .tracspare-part-number--loop { padding: 0 14px; }
.woocommerce ul.products li.product .price,
ul.products li.product .price {
	display: block; padding: 4px 14px 0; font-size: 13px;
}
.tracspare-card-meta {
	padding: 4px 14px 0; margin-bottom: 0.5rem;
}
.tracspare-card-meta__moq { font-size: 12px; color: var(--ts-ink-soft); }

/* The condition badge ("New", "Used", ...) as a corner ribbon rather than a
   line in the card's text flow - li.product is already position: relative,
   so this positions against the whole card, not just the thumbnail. Scoped
   to cards specifically: .tracspare-badge is shared with the product page,
   where it must stay inline. */
.woocommerce ul.products li.product .tracspare-badge,
ul.products li.product .tracspare-badge {
	position: absolute; top: 10px; right: 10px; z-index: 1;
}

/* The name wraps to a different number of lines on almost every card - a
   two-word part and "Aftermarket Air Filter Assembly for MF 375" cannot
   both sit in a fixed-height title block without either truncating one of
   them (ruled out) or leaving the other's button floating above empty
   space. CSS Grid already stretches every <li> in a row to match the
   tallest one (grid's default align-items: stretch); margin-top: auto on
   the button then consumes exactly that leftover space itself, so the
   button lands on the same baseline in every card in the row regardless of
   how many lines the title took. */
.woocommerce ul.products li.product > .button,
ul.products li.product > a.button {
	margin: auto 0 0; align-self: stretch;
	width: auto; text-align: center;
}

/* Same clipboard-list icon as the single product page's Add to quote button
   (client request, 2026-09-24) - CSS-only fa-solid pseudo-element for the
   same reason: this button's text is WooCommerce's own loop template,
   printed through esc_html(), so a real <i> tag added via the
   woocommerce_product_add_to_cart_text filter would render as literal text.
   This button is centred with text-align, not flex (WooCommerce's own more
   specific display: inline-block wins over the theme's plain .button rule
   here, same as the product-page button), so the icon gets its own
   margin-right rather than relying on a flex gap that would not apply. */
.woocommerce ul.products li.product > .button::before,
ul.products li.product > a.button::before {
	content: ""; display: inline-block; width: 0.75em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-clipboard-list) no-repeat center / contain; mask: var(--ts-icon-clipboard-list) no-repeat center / contain;
	margin-right: 8px;
}

/* WooCommerce appends a "View quote list" link after every AJAX add. Client
   request: remove it everywhere. The header quote badge is the way to the list. */
a.added_to_cart { display: none !important; }

.woocommerce ul.products li.product a img {
	margin: 0 0 0.3em;
}

@media (max-width: 480px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px 10px; }
}

/* ---------------------------------------------------------------------------
   Related-parts carousel (single product page) — the same card as the shop
   grid, sized and scoped for a carousel slide instead of ul.products' CSS
   grid. Every declaration here is the ul.products li.product one above,
   copied rather than widening that selector: this must never change how a
   card looks in the shop or category grid, only inside this one carousel.
   -------------------------------------------------------------------------- */

/* Four cards per view on desktop (2026-09-22), stepping down the same
   way the shop grid's own breakpoints do rather than shrinking the card -
   below a point a product card just needs more width than four-per-row
   leaves it, not a smaller version of itself. Formula matches the
   testimonials carousel's own 2-up rule: (100% - (n-1) * track gap) / n,
   track gap is 18px (.tracspare-carousel__track). */
.tracspare-related-carousel .tracspare-carousel__slide { flex: 0 0 calc(25% - 13.5px); }
@media (max-width: 900px) {
	.tracspare-related-carousel .tracspare-carousel__slide { flex: 0 0 calc(50% - 9px); }
}
@media (max-width: 480px) {
	.tracspare-related-carousel .tracspare-carousel__slide { flex-basis: 100%; }
}

/* Overrides the generic .tracspare-carousel__slide img rule (height:220px,
   object-fit:cover, a forced border-radius) written for testimonial photos,
   not a product thumbnail - this needs the shop grid's own square,
   contained, unrounded image instead. */
.tracspare-related-carousel .tracspare-carousel__slide img {
	height: auto !important; aspect-ratio: 1 / 1; object-fit: contain;
	background: var(--ts-white); border-bottom: 1px solid var(--ts-rule);
	border-radius: 0 !important; width: 100%; margin: 0 0 0.3em;
}

.tracspare-related-carousel li.product {
	list-style: none;
	display: flex; flex-direction: column; height: 100%;
	background: var(--ts-white);
	border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
	transition: border-color .15s ease;
	position: relative;
	padding-bottom: 0; /* the Add to quote bar is the card's bottom edge (2 Oct) */
}
.tracspare-related-carousel li.product:hover { border-color: var(--ts-cta-edge); }
.tracspare-related-carousel li.product::before, .tracspare-related-carousel li.product::after { content: none; display: none; }
.tracspare-related-carousel li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 0 0 auto;
	color: inherit !important; text-decoration: none !important;
}
.tracspare-related-carousel li.product .woocommerce-loop-product__title {
	font-family: var(--ts-font-body); font-size: 15px; font-weight: 700; color: var(--ts-ink);
	line-height: 1.3; padding: 0 14px; margin: 6px 0 0;
}
.tracspare-related-carousel li.product > a.woocommerce-LoopProduct-link > span:not(.tracspare-part-number--loop) { padding: 10px 14px 0 14px; }
.tracspare-related-carousel li.product .tracspare-part-number--loop { padding: 0 14px; }
.tracspare-related-carousel li.product .price { display: block; padding: 4px 14px 0; font-size: 13px; }
.tracspare-related-carousel .tracspare-card-meta { padding: 4px 14px 0; margin-bottom: 0.5rem; }
.tracspare-related-carousel li.product .tracspare-badge { position: absolute; top: 10px; right: 10px; z-index: 1; }
.tracspare-related-carousel li.product > a.button {
	margin: auto 0 0; align-self: stretch; width: auto; text-align: center;
}
/* Same icon as the shop-grid card's Add to quote button above - copied
   rather than widening that selector, same reasoning as every other rule
   in this block. */
.tracspare-related-carousel li.product > a.button::before {
	content: ""; display: inline-block; width: 0.75em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-clipboard-list) no-repeat center / contain; mask: var(--ts-icon-clipboard-list) no-repeat center / contain;
	margin-right: 8px;
}

/* ---------------------------------------------------------------------------
   WooCommerce notices (MOQ adjustments, add-to-cart errors) — wherever
   wc_print_notices() is called from a template, not just the default cart/
   checkout flow.
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty { display: none; }
.tracspare-shop-notices { padding-top: clamp(20px,3vw,32px); }
.tracspare-product-notices { padding-top: clamp(20px,3vw,32px); margin-bottom: 20px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
	font-size: 13.5px;
	margin: 0 0 14px;
}
.woocommerce-info:last-child, .woocommerce-message:last-child, .woocommerce-error:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Shop layout: filter sidebar + toolbar
   -------------------------------------------------------------------------- */

.tracspare-shop-layout {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: clamp(20px,3vw,32px) var(--ts-gutter);
	display: flex; flex-wrap: wrap; gap: clamp(18px,2.4vw,28px);
	align-items: flex-start;
}
.tracspare-shop-sidebar { flex: 1 1 236px; min-width: 0; }
/* Sticky only once the layout is genuinely side-by-side (see the flex-wrap
   on .tracspare-shop-layout - the sidebar and product grid's combined min
   width wraps to a single stacked column below this). A stacked sidebar
   sticking to the top of the viewport has nothing to its side to "follow"
   as the page scrolls - it just parks itself over the product grid below
   it instead. */
@media (min-width: 901px) {
	/*.tracspare-shop-sidebar { position: sticky; top: 20px; }*/
}
.tracspare-shop-main { flex: 4 1 500px; min-width: 0; }

.tracspare-toolbar {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 12px;
	margin-bottom: 18px;
}
/* The count sits alone on the left; everything else (view toggle + sort)
   groups on the right, so it stays one flex item that space-between can
   push apart from the count — without this wrapper the toggle and the
   dropdown would be two separate items free to end up centered between
   the count and the row's edge instead of pinned to it. */
.tracspare-toolbar__controls { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tracspare-toolbar__controls .woocommerce-ordering, .woocommerce .woocommerce-result-count { margin: 0; }
.tracspare-toolbar__count { font-size: 13.5px; font-weight: 700; color: var(--ts-body); }
.tracspare-toolbar__view { display: flex; border: 1px solid var(--ts-rule); border-radius: 8px; overflow: hidden; flex: none; }
/* inline-flex + a fixed box, not padding alone: padding only centers the
   icon's own (sometimes visually asymmetric) glyph box, not the glyph
   itself, which is what actually looked off-centre. */
.tracspare-toolbar__view a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 38px;
	font-size: 13px; font-weight: 600; color: var(--ts-body) !important;
}
.tracspare-toolbar__view a.is-active { background: var(--ts-green-700); color: var(--ts-white) !important; }
.tracspare-toolbar select.orderby {
	height: 38px; box-sizing: border-box;
	border: 1px solid var(--ts-field-border); border-radius: 8px; padding: 0 12px;
	font-size: 13.5px; color: var(--ts-body); background: var(--ts-white); cursor: pointer;
}

.tracspare-empty-result {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 56px 24px; text-align: center;
}
.tracspare-empty-result h2 { font-size: 19px; margin-bottom: 8px; }
.tracspare-empty-result p { font-size: 14px; color: var(--ts-ink-soft); margin: 0 0 18px; }

/* Pagination - WooCommerce's own markup (nav.woocommerce-pagination > ul.page-numbers),
   restyled to match the rest of the shop's card/pill language instead of the
   unstyled browser-default numbers it rendered with. */
.woocommerce-pagination { margin-top: 32px; }
.woocommerce-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px; list-style: none; margin: 0; padding: 0; border: unset !important;
}
.woocommerce-pagination .page-numbers li { display: flex; border-right: unset !important; margin-right: 0.5rem !important; }
.woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 6px;
	border: 1px solid var(--ts-rule); border-radius: var(--ts-radius);
	background: var(--ts-white); color: var(--ts-body) !important;
	font-size: 14px; font-weight: 700; text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
	border-color: var(--ts-green-700); background: var(--ts-green-50); color: var(--ts-green-700) !important;
}
.woocommerce-pagination .page-numbers li span.page-numbers.current {
	background: var(--ts-green-700); border-color: var(--ts-green-700); color: var(--ts-white) !important;
}
.woocommerce-pagination .page-numbers li .page-numbers.dots {
	border-color: transparent; background: transparent; color: var(--ts-ink-soft) !important; font-weight: 400;
}
.woocommerce-pagination .page-numbers li .page-numbers.next,
.woocommerce-pagination .page-numbers li .page-numbers.prev { font-size: 15px; }

/* Product list view */
.tracspare-list-row {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 1rem; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
	margin-bottom: 1rem !important;
}
.tracspare-list-row:last-child { margin-bottom: 0; }
.tracspare-list-row:hover { border-color: var(--ts-cta-edge); }
.tracspare-list-row__image { flex: none; width: 92px; height: 92px; border-radius: 9px; overflow: hidden; border: 1px solid var(--ts-rule); background: var(--ts-white); }
.tracspare-list-row__image img { width: 100%; height: 100%; object-fit: contain; }
.tracspare-list-row__body { flex: 2 1 200px; min-width: 0; }
.tracspare-list-row__body .woocommerce-loop-product__title { padding: 0; margin: 3px 0; }
.tracspare-list-row__price { flex: 1 1 130px; min-width: 0; text-align: right; }
.tracspare-list-row__badges { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.tracspare-list-row__meta { font-size: 12.5px; color: var(--ts-ink-soft); margin-top: 4px; }
.tracspare-list-row .button { flex: 0 0 auto; }
/* Same icon as the grid card's Add to quote button - list view
   (template-parts/product-row.php) is its own template, not content-product.php
   with a class swap, so the grid selector above never reaches this button. */
.tracspare-list-row .button::before {
	content: ""; display: inline-block; width: 0.75em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-clipboard-list) no-repeat center / contain; mask: var(--ts-icon-clipboard-list) no-repeat center / contain;
	margin-right: 8px;
}

/* ---------------------------------------------------------------------------
   Facets — both the plugin's no-JS fallback and real FacetWP
   -------------------------------------------------------------------------- */

.tracspare-facets { margin: 0 0 .5em; }
.tracspare-facets__head {
	padding: 22px 19px;
	border: 1px solid var(--ts-rule);
	border-radius: 12px;
	background: var(--ts-white);
	margin-bottom: 1rem;
}
.tracspare-facets__summary {
	font-family: var(--ts-font-display); font-weight: 800; font-size: 16px; color: var(--ts-ink);
	display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
}
.tracspare-facets__count { font-weight: 400; font-size: 12px; color: var(--ts-orange-800); }
.tracspare-facets__body { display: flex; flex-direction: column; gap: 12px; }

/* One collapsible card per filter (29 Sep 2026). */
.tracspare-facet, .facetwp-facet { min-width: 0; }
details.tracspare-facet {
	border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg); background: var(--ts-white);
	margin: 0; padding: 0;
}
.tracspare-facet__legend, .tracspare-facet > .tracspare-facet__legend {
	cursor: pointer; list-style: none; padding: 14px 18px;
	display: flex; align-items: center; gap: 0.6em;
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ts-ink); font-weight: 700;
}
.tracspare-facet__legend::-webkit-details-marker { display: none; }
.tracspare-facet__legend::after {
	content: ""; margin-left: auto; width: 0.5em; height: 0.5em;
	border-right: 2px solid var(--ts-ink-soft); border-bottom: 2px solid var(--ts-ink-soft);
	transform: rotate(45deg); transition: transform 0.15s ease;
}
details.tracspare-facet[open] > .tracspare-facet__legend::after { transform: rotate(-135deg); }
details.tracspare-facet[open] > .tracspare-facet__legend { border-bottom: 1px solid var(--ts-rule); }
.tracspare-facet__picked {
	min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--ts-green-700);
	color: var(--ts-white); font-size: 12px; line-height: 18px; text-align: center; letter-spacing: 0;
}
details.tracspare-facet > :not(summary) { margin-left: 18px; margin-right: 18px; }
details.tracspare-facet > :last-child { margin-bottom: 14px; }
details.tracspare-facet > summary + * { margin-top: 10px; }
.tracspare-facet__list { list-style: none; margin: 0; padding: 0; max-height: 12em; overflow-y: auto; }
.tracspare-facet__item { margin: 0; line-height: 1.5; }
.tracspare-facet__item a { display: flex; align-items: center; gap: 0.55em; padding: 4px 0; font-size: 13.5px; color: var(--ts-ink) !important; }
.tracspare-facet__box {
	flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--ts-field-border); border-radius: 4px;
	background: var(--ts-white); font-size: 13px; line-height: 16px; text-align: center; color: var(--ts-white);
}
.tracspare-facet__item.is-active a { font-weight: 700; color: var(--ts-green-700) !important; }
.tracspare-facet__item.is-active .tracspare-facet__box { background: var(--ts-green-700); border-color: var(--ts-green-700); }
.tracspare-facet__count { margin-left: auto; padding-left: 0.5em; padding-right: 0.5em; font-size: 12px; font-weight: 400; color: var(--ts-ink-soft) !important; }
.tracspare-facets__clear { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.tracspare-facets__clear { display: flex; justify-content: center; align-items: center; }
.tracspare-facets__clear a { border-radius: 10px !important; }

/* Real FacetWP checkbox facets, once configured — mirrors the fallback exactly. */
.facetwp-facet .facetwp-checkbox { font-size: 13.5px; color: var(--ts-ink); padding: 4px 0; }
.facetwp-facet .facetwp-checkbox:before { border-radius: 3px; border-color: var(--ts-field-border); width: 15px; height: 15px; }
.facetwp-facet .facetwp-checkbox.checked:before { background: var(--ts-green-700); border-color: var(--ts-green-700); }
.facetwp-facet .facetwp-counter { color: var(--ts-ink-soft); }
.facetwp-selections .facetwp-selection-value { background: var(--ts-green-100); color: var(--ts-green-900); border-radius: 20px; }

@media screen and (max-width: 767px) {
	.tracspare-facets__head { padding: 13px 19px; }
}
/* ---------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

/* .single-product, not the generic .woocommerce scope: wc_product_class()
   puts the plain "product" class on every product-related element,
   including the list-view row template (.tracspare-list-row), and
   `.woocommerce div.product` (0,2,1) is specific enough to beat that row's
   own padding/margin - collapsing every list-view row's card styling down
   to a flat divider. The single-product body class WooCommerce adds is the
   one thing that's actually unique to the real single-product container. */
/* Its own class, not .tracspare-container: see the PHP comment where this
   is printed (inc/woocommerce.php) - that class also carries up to 60px of
   bottom padding meant for a page's whole content column. */
.tracspare-product-crumb { padding-top: clamp(10px,1.5vw,16px) !important; padding-bottom: 16px !important; }

.single-product div.product {
	max-width: var(--ts-container); margin: 0 auto; padding: 0 var(--ts-gutter) clamp(32px,5vw,64px);
	display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,44px); align-items: flex-start;
}

.single-product div.product .woocommerce-product-gallery {
	flex: 1 1 320px; min-width: 0;
	border-radius: var(--ts-radius-xl); overflow: hidden; border: 1px solid var(--ts-rule);
	background: var(--ts-white);
}
.single-product div.product .woocommerce-product-gallery img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: contain; }
.single-product div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 10px; padding: 0; list-style: none; }
.single-product div.product .flex-control-thumbs li { width: 100% !important; padding: 5px !important; }
/* width/height: 100% overrides WooCommerce's own flexslider default
   (width: 25% on the thumbnail <img>, sized against the 4-column grid cell
   rather than the whole gallery) - without it every thumbnail rendered at
   a quarter of its cell's width, ~35px square instead of filling it. */
.single-product div.product .flex-control-thumbs img {
	display: block; width: 100%; height: 100%;
	aspect-ratio: 1/1; object-fit: contain; background: var(--ts-white);
	border-radius: 8px; border: 1px solid var(--ts-rule); cursor: pointer;
}
.single-product div.product .flex-control-thumbs .flex-active img { border-color: var(--ts-green-700); }

.tracspare-product__summary { flex: 1 1 340px; min-width: 0; }

.tracspare-product__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.tracspare-product__summary .tracspare-part-number-block { margin-bottom: 8px; }
.tracspare-product__summary .tracspare-part-number-block .tracspare-part-number { font-size: 13.5px; font-weight: 500; }
.tracspare-product__summary .tracspare-part-number-label { display: none; }

.tracspare-product__summary .product_title {
	font-size: clamp(25px,3.2vw,38px); line-height: 1.14; margin: 0 0 10px;
}
.tracspare-product__fits { font-size: 14.5px; color: var(--ts-ink-soft); margin: 0 0 20px; }

.tracspare-price-box {
	background: var(--ts-green-50); border: 1px solid var(--ts-green-100); border-radius: var(--ts-radius-lg);
	padding: 18px; margin: 0 0 20px;
}
.tracspare-price-box__label {
	font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ts-green-700); margin-bottom: 10px;
}
.tracspare-price-box__amount { font-size: clamp(24px,3vw,32px); }
.tracspare-price-box__amount .tracspare-price-usd { font-family: var(--ts-font-display); font-weight: 800; color: var(--ts-green-900); font-size: 1em; }
.tracspare-price-box__amount .tracspare-price-inr { font-family: var(--ts-font-display); font-weight: 800; font-size: 0.82em; }
.tracspare-price-box__amount .tracspare-poa { font-size: 0.7em; }
.tracspare-price-box__moq {
	font-size: 12.5px; color: var(--ts-body); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ts-green-100);
}

/* Quantity, Add to quote and Ask about this part all sit in one row -
   client request, 2026-09-24. The last of the three is not separate markup
   below the form: ProductPage::render_ask_about_this_part() is hooked to
   woocommerce_after_add_to_cart_button, so .tracspare-ask-about-part prints
   INSIDE this same <form class="cart">, as a third flex item alongside
   .quantity and .single_add_to_cart_button - one flex row, not two stacked
   ones. flex-wrap keeps it responsive: each item has its own min width via
   flex-basis, so narrower viewports wrap rather than compress or overflow. */
.tracspare-product__summary form.cart {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em; margin-bottom: 22px;
}
.tracspare-product__summary form.cart .quantity { float: none; margin: 0; display: flex; }
/* display set explicitly for the same reason as .tracspare-ask-about-part
   .button below: WooCommerce's own `.woocommerce button.button { display:
   inline-block }` (more specific than the theme's plain `.button { display:
   inline-flex }`) blockifies into `display: block` once this button is a
   flex item of form.cart, which drops the gap between the clipboard-list
   icon below and the button's own text along with the centring. */
.tracspare-product__summary form.cart .single_add_to_cart_button {
	display: flex; align-items: center; justify-content: center;
	margin: 0; white-space: nowrap; flex: 1 1 160px; min-height: 48px;
}
.tracspare-product__summary form.cart::before, .tracspare-product__summary form.cart::after { content: none !important; display: none !important; }
/* "In your quote list: 2 - View quote list", under the row once the part is in the list. */
.tracspare-product__summary form.cart .tracspare-in-quote {
	flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ts-green-800);
}
.tracspare-product__summary form.cart .tracspare-in-quote a { font-weight: 600; text-decoration: underline; }

/* Clipboard-list icon on "Add to quote" - CSS-only fa-solid pseudo-element,
   not the theme's tracspare_icon() <i> markup: this button's text comes
   from WooCommerce's own add-to-cart template, which prints it through
   esc_html(), so an <i> tag added via the woocommerce_product_single_add_to_cart_text
   filter would render as literal, escaped text instead of an icon. Codepoint
   and weight read from assets/fontawesome/css/all.min.css's own
   .fa-clipboard-list / .fa-solid rules. */
.tracspare-product__summary form.cart .single_add_to_cart_button::before {
	content: ""; display: inline-block; width: 0.75em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-clipboard-list) no-repeat center / contain; mask: var(--ts-icon-clipboard-list) no-repeat center / contain;
}


.tracspare-product__summary form.cart .tracspare-ask-about-part { margin: 0; display: flex; flex: 1 1 160px; }
/* display set explicitly (not just inherited from the base .button rule):
   .tracspare-ask-about-part is itself a flex container, which blockifies
   WooCommerce's own `.woocommerce a.button { display: inline-block }`
   (more specific than the theme's plain `.button { display: inline-flex }`)
   into `display: block` on this flex item - a block box ignores its own
   align-items/justify-content, which is why the label sat off-centre.
   Re-declaring flex here, at higher specificity than both, restores it. */
.tracspare-product__summary form.cart .tracspare-ask-about-part .button {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; white-space: nowrap;
}

.tracspare-product__description { border-top: 1px solid var(--ts-rule); padding-top: 20px; }
.tracspare-product__description h3 { font-size: 16px; margin: 0 0 10px; }
.tracspare-product__description p { font-size: 14.5px; line-height: 1.68; color: var(--ts-body); margin: 0; }

/* flex: 1 1 100% on both: .tracspare-product__lower and .tracspare-related
   are themselves flex ITEMS of .single-product div.product (the gallery +
   summary row), not children of some separate full-width block - without a
   forced 100% basis each just took its own shrink-to-fit content width
   instead of the full row, same as any other unconstrained flex item. */
.tracspare-product__lower {
	flex: 1 1 100%; width: 100%;
	display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,32px);
	/*margin-top: clamp(30px,4vw,52px);*/
}
.tracspare-product__specs-panel { flex: 2 1 380px; min-width: 0; }
.tracspare-product__specs-panel .tracspare-specs { margin: 0; height: 100%; }
.tracspare-ordering-notes {
	flex: 1 1 250px; min-width: 0;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg); padding: 22px;
}
.tracspare-ordering-notes h3 { font-size: 17px; margin: 0 0 14px; }
.tracspare-ordering-notes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tracspare-ordering-notes li {
	position: relative; padding-left: 17px; font-size: 13.5px; color: var(--ts-body); line-height: 1.55;
}
.tracspare-ordering-notes li::before {
	content: ""; position: absolute; left: 0; top: 6px;
	width: 7px; height: 7px; background: var(--ts-orange-700); border-radius: 2px;
}

.tracspare-related { flex: 1 1 100%; width: 100%; margin-top: clamp(30px,4vw,52px); margin-bottom: 2rem; }
.tracspare-related__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.tracspare-related__head h3 { margin: 0; }
.tracspare-related h3 { font-size: clamp(19px,2.2vw,24px); letter-spacing: -0.02em; }
/* A fixed 4 columns, not auto-fill: tracspare_render_related_products()
   always queries at most 4 items, and auto-fill reserves as many
   minmax(220px,1fr) tracks as the row can physically fit regardless of how
   many are actually occupied - on this page's ~1320px row that's 5-6
   tracks, so 4 real cards rendered narrower than they should, with dead
   space trailing them instead of filling the row. */
.tracspare-related ul.products { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }

@media (max-width: 700px) {
	.tracspare-related ul.products { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}

/* Same reasoning, same fix: the Catalogue page queries exactly 8 products
   per category group and wants a consistent 4 real columns, not however
   many auto-fill decides fit the row - it has no sidebar narrowing it like
   the shop grid does, so it was fitting 5+ tracks and rendering an
   inconsistent, narrower card next to every other product-card size on
   the site. Fixed counts at all three tiers, not auto-fill anywhere here -
   the same mobile/tablet/desktop split already used for the header nav and
   search (see tracspare.css:456-474), so this grid changes shape at the
   same widths everything else on the page already does. */
.tracspare-catalogue-groups ul.products { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) and (min-width: 601px) {
	.tracspare-catalogue-groups ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.tracspare-catalogue-groups ul.products { grid-template-columns: repeat(1, 1fr); }
}

/* Same fix, same three tiers, for the shop grid itself - loop_shop_per_page
   was already moved to 21 (a multiple of 3, inc/woocommerce.php) so every
   page but the true last one ends on a full row, but auto-fill still meant
   the actual column count drifted with whatever width the sidebar left
   .tracspare-shop-main, not a fixed 3. Fixed counts here are immune to that:
   the sidebar wrapping to its own line at narrower widths
   (.tracspare-shop-layout, min-width: 901px above) changes how much space
   each column gets, never how many columns there are. */
.tracspare-shop-main ul.products { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) and (min-width: 601px) {
	.tracspare-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.tracspare-shop-main ul.products { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 480px) {
	.single-product div.product { padding: 0 16px; }
}

/* ---------------------------------------------------------------------------
   Cart — the "quote list" (woocommerce/cart/cart.php)
   -------------------------------------------------------------------------- */

.tracspare-quote-list { max-width: var(--ts-container); margin: 0 auto; padding: clamp(24px,3.5vw,44px) var(--ts-gutter); }
.tracspare-quote-list h1 { font-size: clamp(27px,3.4vw,40px); margin: 0 0 8px; }
.tracspare-quote-list__lede { font-size: 15px; color: var(--ts-ink-soft); margin: 0 0 26px; }
.tracspare-quote-list__layout { display: flex; flex-wrap: wrap; gap: clamp(18px,2.5vw,28px); align-items: flex-start; }
.tracspare-quote-list__lines { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.tracspare-quote-line {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 15px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.tracspare-quote-line__image { flex: none; width: 80px; height: 80px; border-radius: 9px; overflow: hidden; border: 1px solid var(--ts-rule); background: var(--ts-white); }
.tracspare-quote-line__image img { width: 100%; height: 100%; object-fit: contain; }
.tracspare-quote-line__body { flex: 2 1 180px; min-width: 0; }
.tracspare-quote-line__body .tracspare-part-number { font-size: 12.5px; }
.tracspare-quote-line__name { font-size: 15.5px; font-weight: 700; color: var(--ts-ink); margin: 3px 0; }
.tracspare-quote-line__meta { font-size: 12.5px; color: var(--ts-ink-soft); }
.tracspare-quote-line__qty { flex: none; }
.tracspare-quote-line .quantity { margin: 0 !important; float: none !important; }
.tracspare-quote-line__total { flex: 1 1 120px; min-width: 0; text-align: right; }

/* Remove-part control on the quote list: a trash icon button, no text. */
.tracspare-quote-line__remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: 0 0 auto;
	border: 1px solid currentColor; border-radius: 6px;
	color: var(--ts-red); text-decoration: none; background: transparent;
}
.tracspare-quote-line__remove::before {
	content: ""; display: inline-block; width: 0.875em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-trash) no-repeat center / contain; mask: var(--ts-icon-trash) no-repeat center / contain;
}
.tracspare-quote-line__remove:hover { background: var(--ts-red); color: #fff; }

.tracspare-quote-list__continue { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.tracspare-quote-summary-panel {
	flex: 1 1 280px; min-width: 0;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 22px; position: sticky; top: 20px;
}
.tracspare-quote-summary-panel h2 { font-size: 17px; margin: 0 0 16px; }
.tracspare-quote-summary-panel .shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tracspare-quote-summary-panel .shop_table th,
.tracspare-quote-summary-panel .shop_table td { padding: 8px 0; text-align: left; border: 0; }
.tracspare-quote-summary-panel .shop_table td { text-align: right; font-weight: 700; color: var(--ts-ink); }
.tracspare-quote-summary-panel .shop_table th { font-weight: 400; color: var(--ts-body); }
.tracspare-quote-summary-panel .order-total th,
.tracspare-quote-summary-panel .order-total td { border-top: 1px solid var(--ts-rule); padding-top: 14px; font-size: 16px; }
.tracspare-quote-summary-panel .wc-proceed-to-checkout { margin-top: 6px; }
.tracspare-quote-summary-panel .wc-proceed-to-checkout .button { width: 100%; }
.tracspare-quote-summary-panel .cross-sells { display: none; }

.tracspare-quote-empty {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: clamp(40px,6vw,72px) 24px; text-align: center;
}
.tracspare-quote-empty__icon {
	width: 52px; height: 52px; border-radius: 14px; background: var(--ts-green-100);
	margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
	color: var(--ts-green-700); font-size: 20px;
}
.tracspare-quote-empty h2 { font-size: 21px; margin-bottom: 8px; }
.tracspare-quote-empty p { font-size: 14.5px; color: var(--ts-ink-soft); margin: 0 auto 22px; max-width: 44ch; }

/* ---------------------------------------------------------------------------
   Quantity on product cards (28 Sep 2026). Once a part is in the quote list, tracspare.js puts this
   - qty + control where the "Add to quote" button was and hides the button.
   Takes over the button's margin-top: auto so the row still lines up at the
   bottom of every card, whatever the title length.
   -------------------------------------------------------------------------- */

.tracspare-is-hidden { display: none !important; }

.tracspare-card-stepper {
	display: flex; align-items: stretch; min-height: 40px;
	border: 1px solid var(--ts-cta-edge); border-radius: var(--ts-radius); overflow: hidden;
	background: var(--ts-white);
}
ul.products li.product > .tracspare-card-stepper,
.tracspare-related-carousel li.product > .tracspare-card-stepper { margin: auto 0 0; align-self: stretch; }
.tracspare-list-row .tracspare-card-stepper { flex: 0 0 150px; }

.tracspare-card-stepper__step {
	flex: 0 0 40px; border: 0; margin: 0; padding: 0; cursor: pointer;
	background: var(--ts-cta); color: var(--ts-cta-text);
	font-size: 20px; font-weight: 600; line-height: 1;
}
.tracspare-card-stepper__step:hover, .tracspare-card-stepper__step:focus-visible { background: var(--ts-cta-hover); }

.tracspare-card-stepper__input {
	flex: 1 1 auto; width: 100%; min-width: 0; border: 0; margin: 0; padding: 0 4px;
	text-align: center; font: inherit; font-weight: 600; color: var(--ts-ink);
	-moz-appearance: textfield; appearance: textfield;
}
.tracspare-card-stepper__input::-webkit-outer-spin-button,
.tracspare-card-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tracspare-card-stepper.is-busy { opacity: 0.6; pointer-events: none; }

/* ===========================================================================
   Shop: brand row, model picker and "no parts yet" (29 Sep 2026 redesign,
   after the client's reference site's "Filter by Brand" bar - theme
   inc/facets.php). Same hairline-and-pill language as the home page.
   ========================================================================== */
.tracspare-brand-row { background: var(--ts-white); border-bottom: 1px solid var(--ts-rule); }
.tracspare-brand-row__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 16px; padding-bottom: 16px; }
.tracspare-brand-row__label {
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ts-ink-soft);
}
.tracspare-brand-row__pills { position: relative; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; min-width: 0; }
.tracspare-pill {
	display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
	border: 1px solid var(--ts-rule-strong); border-radius: 999px; background: var(--ts-white);
	font-size: 14px; font-weight: 500; color: var(--ts-body) !important; text-decoration: none !important; white-space: nowrap;
}
.tracspare-pill:hover { border-color: var(--ts-green-700); color: var(--ts-green-700) !important; }
.tracspare-pill.is-active { background: var(--ts-green-700); border-color: var(--ts-green-700); color: var(--ts-white) !important; font-weight: 700; }
.tracspare-pill.is-empty:not(.is-active) { color: var(--ts-ink-soft) !important; }
.tracspare-brand-row__model { display: flex; align-items: center; gap: 10px; margin: 0; }
.tracspare-brand-row__model select {
	height: 42px; min-width: 220px; margin: 0; padding: 0 38px 0 14px;
	border: 1px solid var(--ts-field-border); border-radius: 10px; background-color: var(--ts-white);
	font-family: inherit; font-size: 14.5px; color: var(--ts-ink);
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.25 7 9.25l4-4' fill='none' stroke='%236B7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.tracspare-brand-row__go {
	height: 42px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--ts-green-700); color: var(--ts-white); font-family: inherit; font-weight: 700;
}
.js .tracspare-brand-row__go, .tracspare-brand-row__model.is-enhanced .tracspare-brand-row__go { display: none; }

/* Sidebar: Brand and Model list everything; empty ones greyed, not hidden. */
.tracspare-facet__item.is-empty a { color: var(--ts-ink-soft) !important; }
.tracspare-facet__item.is-empty .tracspare-facet__box { border-color: var(--ts-field-border); }
.tracspare-facet--filter_model .tracspare-facet__list,
.tracspare-facet--filter_brand .tracspare-facet__list { max-height: 12em; overflow-y: auto; overscroll-behavior: contain; }

/* "No parts listed for <tractor> yet" */
.tracspare-no-parts {
	display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
	padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
}
.tracspare-no-parts__icon {
	width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--ts-green-50); color: var(--ts-green-700); font-size: 24px;
}
.tracspare-no-parts h2 { margin: 6px 0 0; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; }
.tracspare-no-parts p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--ts-body); }
.tracspare-no-parts__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.tracspare-no-parts__actions .button { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 700px) {
	.tracspare-brand-row__pills { flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; padding-bottom: 4px; scrollbar-width: none; }
	.tracspare-brand-row__pills::-webkit-scrollbar { display: none; }
	.tracspare-brand-row__model { flex: 1 1 100%; }
	.tracspare-brand-row__model select { flex: 1 1 auto; min-width: 0; }
}

/* ===========================================================================
   Product cards, 29 Sep 2026 redesign. Same card everywhere - shop, home, catalogue, related parts.
   Scan order is kept: part number, name, which tractor it fits, price,
   MOQ, then the quote button (or - qty + once in the list). The picture
   gets breathing room; hairlines and one quiet hover do the rest.
   ========================================================================== */
ul.products li.product,
.tracspare-related-carousel li.product {
	border-radius: 14px; padding-bottom: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
ul.products li.product:hover,
.tracspare-related-carousel li.product:hover {
	border-color: var(--ts-cta-edge);
	box-shadow: 0 16px 30px -20px rgba(17, 24, 39, 0.35);
	transform: translateY(-2px);
}
ul.products li.product img,
.tracspare-related-carousel li.product img,
.woocommerce ul.products li.product a img {
	box-sizing: border-box; padding: 16px; margin: 0 !important; background: var(--ts-white);
}
ul.products li.product .tracspare-badge,
.tracspare-related-carousel li.product .tracspare-badge {
	top: 12px; right: 12px; padding: 3px 9px; border-radius: 6px;
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
ul.products li.product .tracspare-part-number--loop,
.tracspare-related-carousel li.product .tracspare-part-number--loop {
	padding: 14px 14px 0 !important; font-size: 12.5px; color: var(--ts-green-700);
}
ul.products li.product .woocommerce-loop-product__title,
.tracspare-related-carousel li.product .woocommerce-loop-product__title {
	margin: 4px 0 0; font-size: 15px; line-height: 1.3; letter-spacing: -0.005em;
}
ul.products li.product .tracspare-card-fit,
.tracspare-related-carousel li.product .tracspare-card-fit {
	display: block; padding: 4px 14px 0 !important;
	font-size: 12.5px; font-weight: 600; color: var(--ts-ink-soft);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul.products li.product .price,
.tracspare-related-carousel li.product .price {
	padding: 10px 14px 0 !important; font-size: 14px; font-weight: 700;
}
ul.products li.product .tracspare-card-meta,
.tracspare-related-carousel li.product .tracspare-card-meta { padding: 3px 14px 0; margin-bottom: 14px; }
ul.products li.product .tracspare-card-meta__moq,
.tracspare-related-carousel li.product .tracspare-card-meta__moq {
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-ink-soft);
}
ul.products li.product > .button,
ul.products li.product > a.button,
.tracspare-related-carousel li.product > .button,
.tracspare-related-carousel li.product > a.button {
	min-height: 50px; border-radius: 0; font-size: 14.5px;
	display: flex !important; align-items: center; justify-content: center;
}
ul.products li.product > .tracspare-card-stepper,
.tracspare-related-carousel li.product > .tracspare-card-stepper { min-height: 50px; border-radius: 0; border-width: 1px 0 0; }
/* The rule above out-ranks .tracspare-is-hidden, so once a part is in the
   quote list "Add to quote" stayed beside its - qty + (QA on staging, 29 Sep). */
ul.products li.product > .button.tracspare-is-hidden,
ul.products li.product > a.button.tracspare-is-hidden,
.tracspare-related-carousel li.product > .button.tracspare-is-hidden,
.tracspare-related-carousel li.product > a.button.tracspare-is-hidden { display: none !important; }
/* Add to quote on cards fills the bottom edge, square, rounded only by the card's own corners, and the - qty +
   that replaces it after a click does the same (2 Oct). Colours are the usual
   orange buttons'; green was tried the same day and switched back. */

@media (max-width: 480px) {
	ul.products li.product img, .woocommerce ul.products li.product a img { padding: 10px; }
	ul.products li.product .tracspare-part-number--loop { padding: 10px 10px 0 !important; font-size: 12.5px; }
	ul.products li.product .woocommerce-loop-product__title { padding: 0 10px !important; font-size: 14px; }
	ul.products li.product .tracspare-card-fit,
	ul.products li.product .price { padding-left: 10px !important; padding-right: 10px !important; }
	ul.products li.product .tracspare-card-meta { padding: 3px 10px 0; }
	ul.products li.product > .button, ul.products li.product > a.button, ul.products li.product > .tracspare-card-stepper { font-size: 13.5px; }
}

/* ===========================================================================
   Product page, 29 Sep 2026 redesign. Same language as the home page and cards: mono labels, hairlines,
   green chips for "Fits", the client's own credentials beside the buttons.
   ========================================================================== */

/* WooCommerce hides the gallery (opacity 0) until its gallery script has
   run. With no photos there is no gallery to set up, and the wait only
   delayed the page's main picture - its Largest Contentful Paint. */
.woocommerce-product-gallery--without-images { opacity: 1 !important; }
.single-product div.product .woocommerce-product-gallery__image--placeholder img { box-sizing: border-box; padding: clamp(18px, 3vw, 40px); }

.tracspare-product__badges .tracspare-badge {
	padding: 4px 9px; border-radius: 6px;
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.tracspare-product__summary .tracspare-part-number-block .tracspare-part-number { font-size: 15px; color: var(--ts-green-700); }
.tracspare-product__summary .product_title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 14px; }

.tracspare-product__fits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.tracspare-product__fits-label { font-family: var(--ts-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ts-ink-soft); margin-right: 2px; }
.tracspare-fit-chip {
	display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
	background: var(--ts-green-50); border: 1px solid var(--ts-green-100); border-radius: 999px;
	font-size: 13.5px; font-weight: 700; color: var(--ts-green-700) !important; text-decoration: none !important;
}
.tracspare-fit-chip:hover, .tracspare-fit-chip:focus-visible { border-color: var(--ts-green-700); }

.tracspare-price-box { border-radius: 14px; padding: 18px 20px; }
.tracspare-price-box__label { font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }

.tracspare-product__summary form.cart .single_add_to_cart_button,
.tracspare-product__summary form.cart .tracspare-ask-about-part .button { min-height: 48px; border-radius: 10px; }
.tracspare-product__summary form.cart .quantity .tracspare-qty-step,
.tracspare-product__summary form.cart .quantity input.qty { min-height: 48px; height: 48px; }

.tracspare-product__assurance {
	list-style: none; margin: 2px 0 22px; padding: 16px 0 0; border-top: 1px solid var(--ts-rule);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.tracspare-product__assurance li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ts-ink-soft); }
.tracspare-product__assurance strong { display: block; font-size: 13.5px; color: var(--ts-ink); }
.tracspare-product__assurance-icon {
	flex: none; width: 32px; height: 32px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ts-green-50); color: var(--ts-green-700); font-size: 13px;
}

/* Specifications: label and value on one line, hairline between rows -
   no empty grey cells when the count is odd. */
.tracspare-specs__table {
	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
	background: none; border: 0; border-radius: 0; overflow: visible;
}
.tracspare-specs__table tr {
	flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 12px 0; background: none; border-bottom: 1px solid var(--ts-rule);
}
.tracspare-specs__table th { flex: none; font-size: 13px; }
.tracspare-specs__table td { text-align: right; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }

.tracspare-ordering-notes ul { counter-reset: tracspare-note; }
.tracspare-ordering-notes li { counter-increment: tracspare-note; padding-left: 34px; }
.tracspare-ordering-notes li::before {
	content: counter(tracspare-note, decimal-leading-zero);
	top: 1px; width: auto; height: auto; background: none; border-radius: 0;
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; color: var(--ts-orange-800);
}

.tracspare-related__head h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
/* WooCommerce's own "div.product span.price" (1.25em) otherwise wins inside
   the product page, making the related cards' prices shout. */
.tracspare-related-carousel li.product .price { font-size: 14px !important; }

/* Tablets: two label/value columns in a panel that shares its row with the
   ordering notes split part numbers mid-number ("006508121 / B1"). One
   column below 1100px, and the two panels stack below 900px. */
@media (max-width: 1100px) {
	.tracspare-specs__table { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.tracspare-product__specs-panel, .tracspare-ordering-notes { flex-basis: 100%; }
}
@media (max-width: 700px) {
	.tracspare-product__assurance { grid-template-columns: 1fr; }
}

/* Tags on the product page: full width under the specification table, small pills that link to the tag's parts. */
.tracspare-specs__tags { margin-top: 16px; }
.tracspare-specs__tags-label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--ts-ink-soft); }
.tracspare-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tracspare-tag {
	display: inline-block; padding: 3px 10px; border: 1px solid var(--ts-rule); border-radius: 999px;
	font-size: 0.8125rem; line-height: 1.5; color: var(--ts-ink-soft) !important; text-decoration: none !important; background: var(--ts-white);
}
.tracspare-tag:hover, .tracspare-tag:focus-visible { background: var(--ts-green-50); color: var(--ts-green-700) !important; }