/* =========================================================================
   Untd. Performance — WooCommerce
   -------------------------------------------------------------------------
   Cart, checkout and account keep WooCommerce's own templates so gateways and
   updates keep working; this sheet only restyles them onto the dark palette.
   The catalogue loop is the exception — it is rebuilt as the design's product
   card in template-parts/woocommerce/content-product.php.
   ========================================================================= */

/* -- Catalogue layout -------------------------------------------- */
.untd-shop{align-items:start}
.untd-shop__main{display:flex;flex-direction:column;gap:var(--space-7);min-width:0}
.woocommerce .woocommerce-products-header{margin-bottom:var(--space-6)}
.woocommerce-products-header__title,
.untd-shop .page-title{
  font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:var(--display-3);letter-spacing:var(--display-ls);line-height:.9;color:var(--text-heading);
}
.woocommerce-products-header .term-description{margin-top:var(--space-4);color:var(--chrome-300);max-width:64ch}

.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(var(--untd-shop-cols,3),minmax(0,1fr));
  gap:var(--gutter);margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{width:auto;margin:0;float:none;clear:none}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none}

@media (max-width:980px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:minmax(0,1fr)}}

/* Woo injects its own price/rating markup on some plugins; keep it on-token. */
.woocommerce ul.products li.product .price{color:var(--white);font-family:var(--font-mono);font-size:1.125rem;font-weight:700}
.woocommerce ul.products li.product .price del{color:var(--text-faint);font-size:var(--mono);opacity:1}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--white)}
.untd-product__foot .add_to_cart_button,
.untd-product__foot .button{margin-top:var(--space-2)}

/* -- Result count / ordering ------------------------------------- */
.woocommerce .woocommerce-result-count{margin:0;font-family:var(--font-mono);font-size:12px;color:var(--chrome-400)}
.woocommerce .woocommerce-ordering{margin:0}
.woocommerce .woocommerce-ordering select{
  height:36px;padding:0 var(--space-7) 0 var(--space-4);
  background-color:var(--surface-sunken);
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-300) 50%),linear-gradient(135deg,var(--chrome-300) 50%,transparent 50%);
  background-position:calc(100% - 18px) 16px,calc(100% - 12px) 16px;background-size:6px 6px;background-repeat:no-repeat;
  border:1px solid var(--border-default);border-radius:var(--radius-2);box-shadow:var(--inset-well);
  color:var(--white);font-family:var(--font-ui);font-size:13px;appearance:none;-webkit-appearance:none;
}

/* -- Buttons ------------------------------------------------------ */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:var(--control-h);padding:0 var(--space-6);
  background:var(--surface-accent);color:var(--text-on-accent);
  border:1px solid var(--surface-accent);border-radius:var(--radius-control);
  clip-path:var(--clip-shear-sm);cursor:pointer;
  font-family:var(--font-ui);font-size:var(--label);font-weight:var(--weight-bold);
  letter-spacing:.1em;text-transform:uppercase;line-height:1;
  box-shadow:var(--shadow-1);transition:var(--transition-control);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background:var(--surface-accent-hover);color:var(--text-on-accent);
  transform:translateY(var(--hover-lift));box-shadow:var(--shadow-accent);
}
.woocommerce a.button.untd-btn--secondary,
.woocommerce .untd-product__foot a.button{
  background:var(--surface-card);color:var(--text-body);border-color:var(--border-default);
  height:var(--control-h-sm);padding:0 14px;font-size:var(--label-sm);box-shadow:var(--edge-top);
}
.woocommerce a.button.untd-btn--secondary:hover,
.woocommerce .untd-product__foot a.button:hover{background:var(--surface-card-hover);color:var(--white);border-color:var(--border-strong);box-shadow:none}
.woocommerce a.button.added::after{display:none}

/* -- Single product ----------------------------------------------- */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-9);align-items:start}
.woocommerce div.product .woocommerce-product-gallery{float:none;width:auto;margin:0}
.woocommerce div.product .woocommerce-product-gallery__wrapper{border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-sunken)}
.woocommerce div.product .flex-control-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-top:var(--space-4);padding:0;list-style:none}
.woocommerce div.product .flex-control-thumbs li{width:auto;float:none;margin:0}
.woocommerce div.product .flex-control-thumbs img{border:1px solid var(--border-hairline);border-radius:var(--radius-2);opacity:.6;transition:var(--transition-control)}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--border-accent)}

.woocommerce div.product .summary{float:none;width:auto;margin:0;display:flex;flex-direction:column;gap:var(--space-5)}
.woocommerce div.product .product_title{
  font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:var(--display-3);letter-spacing:var(--display-ls);line-height:.92;color:var(--text-heading);margin:0;
}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--white);font-family:var(--font-mono);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:0;
}
.woocommerce div.product p.price del{color:var(--text-faint);font-size:1.125rem;opacity:1;margin-right:var(--space-3)}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--chrome-200);font-size:15px;line-height:1.7}
.woocommerce div.product form.cart{margin:0;display:flex;gap:var(--space-4);align-items:stretch;flex-wrap:wrap}
.woocommerce div.product form.cart .variations{width:100%}
.woocommerce div.product form.cart .variations td{padding:var(--space-3) 0}
.woocommerce .quantity .qty{
  width:88px;height:var(--control-h);text-align:center;
  background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-2);
  box-shadow:var(--inset-well);color:var(--white);font-family:var(--font-mono);
}
.woocommerce div.product .product_meta{font-family:var(--font-mono);font-size:12px;color:var(--chrome-400);display:flex;flex-direction:column;gap:6px;padding-top:var(--space-5);border-top:1px solid var(--border-hairline)}
.woocommerce div.product .product_meta a{color:var(--chrome-200)}
.untd-single__fitment{margin:0}

/* Stock lines */
.woocommerce div.product .stock{font-family:var(--font-mono);font-size:12px;color:var(--status-success)}
.woocommerce div.product .out-of-stock{color:var(--status-danger)}

/* -- Tabs: the YMM "Vehicle Fitment" tab lands here ---------------- */
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:var(--space-9)}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  margin:0 0 var(--space-7);padding:0 0 0 0;list-style:none;
  display:flex;gap:var(--space-6);flex-wrap:wrap;border-bottom:1px solid var(--border-hairline);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;display:none;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:0 0 var(--space-4);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chrome-300);border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--gold-400);border-bottom-color:var(--gold-400)}
.woocommerce div.product .woocommerce-Tabs-panel{color:var(--chrome-200);font-size:15px;line-height:1.7}
.woocommerce div.product .woocommerce-Tabs-panel h2{
  font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:1.5rem;margin-bottom:var(--space-5);
}
.woocommerce table.shop_attributes th{color:var(--chrome-300);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.woocommerce table.shop_attributes td{color:var(--chrome-100);font-family:var(--font-mono);font-size:12px;font-style:normal}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border-bottom:1px solid var(--border-hairline);padding:var(--space-4) var(--space-5)}

.woocommerce .related,.woocommerce .upsells{grid-column:1 / -1;margin-top:var(--space-10)}
.woocommerce .related > h2,.woocommerce .upsells > h2{
  font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:1.75rem;margin-bottom:var(--space-6);
}

@media (max-width:980px){
  .woocommerce div.product{grid-template-columns:minmax(0,1fr)}
}

/* -- Cart, checkout, account -------------------------------------- */
.woocommerce table.shop_table{
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  border-collapse:separate;border-spacing:0;background:var(--surface-card);width:100%;
}
.woocommerce table.shop_table th{
  background:var(--surface-sunken);color:var(--chrome-300);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:var(--space-5);border-bottom:1px solid var(--border-hairline);text-align:left;
}
.woocommerce table.shop_table td{padding:var(--space-5);border-bottom:1px solid var(--border-hairline);color:var(--chrome-100)}
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:0}
.woocommerce table.shop_table .product-name a{color:var(--white);font-weight:600}
.woocommerce table.shop_table .product-name a:hover{color:var(--gold-400)}
.woocommerce table.shop_table img{width:64px;height:auto;border-radius:var(--radius-2)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-account h2{
  font-family:var(--font-display);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:1.5rem;margin-bottom:var(--space-5);color:var(--white);
}
.woocommerce .cart-collaterals .cart_totals{
  padding:var(--space-7);border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  background:var(--surface-card);box-shadow:var(--edge-top);width:100%;float:none;
}
.woocommerce .cart-collaterals{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--space-8);width:100%}
.woocommerce .cart-collaterals::before,.woocommerce .cart-collaterals::after{content:none}
.woocommerce-cart .cart-collaterals .cross-sells{width:auto;float:none}
@media (max-width:980px){.woocommerce .cart-collaterals{grid-template-columns:minmax(0,1fr)}}

.woocommerce form .form-row{padding:0;margin:0 0 var(--space-5)}
.woocommerce form .form-row label{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrome-300);margin-bottom:6px;display:block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  width:100%;height:var(--control-h);padding:0 var(--space-4);
  background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-2);
  box-shadow:var(--inset-well);color:var(--white);font-family:var(--font-ui);font-size:14px;
}
.woocommerce form .form-row textarea{height:auto;min-height:120px;padding:var(--space-4)}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--white);line-height:var(--control-h)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:var(--control-h)}
.select2-dropdown{background:var(--ink-900);border-color:var(--border-default);color:var(--chrome-100)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--gold-400);color:var(--ink-950)}

.woocommerce-checkout #payment{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--border-hairline);padding:var(--space-6)}
.woocommerce-checkout #payment div.form-row{padding:var(--space-6)}
.woocommerce-checkout #payment div.payment_box{background:var(--surface-sunken);color:var(--chrome-200);border-radius:var(--radius-2)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surface-sunken)}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,p.no-comments{
  background:var(--surface-card);border-top:0;border:1px solid var(--border-default);
  border-left:3px solid var(--gold-400);border-radius:var(--radius-2);
  color:var(--chrome-100);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6);
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{position:static;margin-right:var(--space-3);color:var(--gold-400)}
.woocommerce-error{border-left-color:var(--status-danger)}
.woocommerce-error::before{color:var(--status-danger)}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

/* Account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation{width:24%;float:left}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:var(--space-4) var(--space-5);border:1px solid var(--border-hairline);
  border-radius:var(--radius-2);background:var(--surface-card);color:var(--chrome-200);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{border-color:var(--border-accent);color:var(--gold-400)}
.woocommerce-account .woocommerce-MyAccount-content{width:72%;float:right}
@media (max-width:760px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
}

/* Sale flash — the design puts the badge on the card, so hide Woo's. */
.woocommerce span.onsale{display:none}
.woocommerce div.product span.onsale{
  display:inline-flex;position:static;margin:0 0 var(--space-4);
  min-height:0;min-width:0;padding:0 var(--space-3);height:22px;line-height:22px;
  background:var(--status-danger);color:var(--white);border-radius:var(--radius-1);
  font-family:var(--font-ui);font-size:var(--label-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}

/* Star ratings */
.woocommerce .star-rating span::before,.woocommerce p.stars a::before{color:var(--gold-400)}
.woocommerce .star-rating::before{color:var(--ink-600)}

/* -- Product grid outside a WooCommerce-classed body --------------
   A product search lands on the theme's search.php, which WordPress does not
   always give the `woocommerce` body class, so the grid is declared on the
   list itself too. */
ul.products{
  display:grid;grid-template-columns:repeat(var(--untd-shop-cols,3),minmax(0,1fr));
  gap:var(--gutter);margin:0;padding:0;list-style:none;
}
ul.products>li.product{width:auto;margin:0;float:none}
@media (max-width:980px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){ul.products{grid-template-columns:minmax(0,1fr)}}

/* =========================================================================
   Grid item sizing
   -------------------------------------------------------------------------
   WooCommerce sizes loop items with percentage widths and floats, and varies
   them per columns-N class: .columns-3 li.product is width:30.75%. Inside a
   real grid cell that reads as a card occupying a third of its own column —
   which is exactly the 141px-in-a-460px-cell the shop was rendering.

   The cell already carries the width, so the item must simply fill it. This
   is one of the few places !important is the honest tool: the rule exists to
   defeat a third-party sheet whose specificity we do not control and whose
   columns-N variants we do not want to enumerate.
   ========================================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  clear:none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{content:none !important;display:none !important}

/* WooCommerce's small-screen sheet forces two 48% columns below 768px; the
   theme's own breakpoints already handle that, and better. */
@media (max-width:768px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{width:auto !important}
}

/* =========================================================================
   Filter bar
   ========================================================================= */
.untd-filters{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  background:var(--surface-card);box-shadow:var(--edge-top);
}
.untd-filters__form{display:flex;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.untd-filters__label{
  align-self:center;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-400);flex:0 0 auto;
  padding-right:var(--space-5);border-right:1px solid var(--border-hairline);
}
.untd-filters__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.untd-filters__field select{min-width:200px}
.untd-filters__legend{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrome-300);margin:0;
}
.untd-filters__price{display:flex;align-items:center;gap:var(--space-3)}
.untd-filters__price input{width:104px}
.untd-filters__dash{color:var(--chrome-400);font-family:var(--font-mono)}
.untd-filters__apply{flex:0 0 auto}
.untd-filters__reset{
  align-self:center;font-family:var(--font-mono);font-size:11px;
  color:var(--chrome-400);text-decoration:underline;
}
.untd-filters__reset:hover{color:var(--white)}
.untd-input--sm{height:36px;font-size:13px}
.untd-filters .untd-applied{padding-top:var(--space-4);border-top:1px solid var(--border-hairline)}
.untd-filters .untd-tag{text-decoration:none}
.untd-filters .untd-tag:hover{border-color:var(--border-strong);color:var(--white)}

@media (max-width:980px){
  .untd-filters__label{border-right:0;padding-right:0;flex:1 0 100%}
  .untd-filters__field{flex:1 1 200px}
  .untd-filters__field select{min-width:0;width:100%}
}
@media (max-width:640px){
  .untd-filters{padding:var(--space-5)}
  .untd-filters__form{gap:var(--space-4)}
  .untd-filters__field{flex:1 0 100%}
  .untd-filters__price input{flex:1;width:auto}
  .untd-filters__apply{flex:1 0 100%}
}