/* VOLTARC — PLP (product listing / archive / category pages) */

/* ─────────── Category hero banner ─────────── */
.vx-cat-hero{
  position:relative;
  background:var(--vx-surface);
  overflow:hidden;
  padding:clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3.5rem);
}
.vx-cat-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(200,255,43,.06) 0%,transparent 60%);
  pointer-events:none;
}
.vx-cat-hero__eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vx-volt);
  margin-bottom:.75rem;
}
.vx-cat-hero h1{
  font-size:clamp(2rem,5vw,3.5rem);
  max-width:18ch;
  margin-bottom:1rem;
}
.vx-cat-hero p.vx-cat-desc{
  color:var(--vx-slate);
  font-size:1.0625rem;
  max-width:52ch;
  margin-bottom:1.5rem;
}

/* Off-road not-legal warning (§0.1 of spec — mandatory) */
.vx-legal-warning{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem 1.25rem;
  background:rgba(229,72,77,.08);
  border:1px solid rgba(229,72,77,.35);
  border-radius:var(--vx-radius-lg);
  font-size:.875rem;
  color:var(--vx-cloud);
  line-height:1.5;
  margin-bottom:2rem;
}
.vx-legal-warning__icon{
  font-size:1.25rem;
  flex-shrink:0;
  color:var(--vx-danger);
  margin-top:.1rem;
}
.vx-legal-warning strong{color:var(--vx-danger)}

/* ─────────── Filters + toolbar ─────────── */
.vx-shop-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  align-items:start;
}
@media(max-width:900px){.vx-shop-layout{grid-template-columns:1fr}}

.vx-filters{
  background:var(--vx-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--vx-radius-lg);
  padding:1.5rem;
  position:sticky;
  top:5rem;
}
.vx-filters h3{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vx-slate);
  margin-bottom:1rem;
}

/* WooCommerce widget filters */
.widget_product_categories ul,
.widget_layered_nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.widget_product_categories ul li a,
.widget_layered_nav ul li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.4rem .625rem;
  border-radius:.375rem;
  font-size:.875rem;
  color:var(--vx-cloud);
  transition:background var(--vx-dur) var(--vx-ease),color var(--vx-dur) var(--vx-ease);
}
.widget_product_categories ul li a:hover,
.widget_layered_nav ul li a:hover{background:rgba(200,255,43,.08);color:var(--vx-volt)}
.widget_product_categories ul li.current-cat > a{color:var(--vx-volt);font-weight:700}

/* Price range slider */
.widget_price_filter .price_slider_wrapper{padding:.5rem 0}
.widget_price_filter .ui-slider-range{background:var(--vx-volt)}
.widget_price_filter .ui-slider-handle{
  background:var(--vx-volt);
  border:none;
  width:18px;height:18px;
  border-radius:50%;
  top:-.35rem;
}
.widget_price_filter .price_label{font-size:.875rem;color:var(--vx-slate);margin-top:.5rem}
.widget_price_filter .price_label span{color:var(--vx-volt);font-family:var(--vx-font-mono)}

/* ─────────── Product grid toolbar ─────────── */
.vx-shop-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.875rem 1rem;
  background:var(--vx-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--vx-radius);
  margin-bottom:1.5rem;
}
.woocommerce-result-count{
  font-size:.875rem;
  color:var(--vx-slate);
}
.woocommerce-ordering select{
  background:var(--vx-carbon);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--vx-radius);
  color:var(--vx-cloud);
  padding:.4rem .75rem;
  font-size:.875rem;
}

/* ─────────── Product grid ─────────── */
ul.products,
.wc-block-grid__products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:1.5rem;
  list-style:none;
  padding:0;
  margin:0;
  align-items:start;        /* don't stretch cards to equal height → removes the tall empty gap */
}

/* ─────────── Product card ─────────── */
li.product,
.wc-block-grid__product{
  background:var(--vx-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--vx-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color var(--vx-dur) var(--vx-ease),
             transform var(--vx-dur) var(--vx-ease),
             box-shadow var(--vx-dur) var(--vx-ease);
}
li.product:hover,
.wc-block-grid__product:hover{
  border-color:rgba(200,255,43,.25);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 1px rgba(200,255,43,.12);
}

/* Image wrapper — clean light panel, full product shown (contain), larger */
.product-card__img,
li.product figure,
li.product .ct-media-container{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#fff;
  border-radius:10px;
  margin:0;
}
li.product .ct-media-container img,
li.product figure img,
.wc-block-grid__product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:.5rem;
  background:#fff;
  transition:transform .4s var(--vx-ease);
}
li.product:hover .ct-media-container img,
.wc-block-grid__product:hover img{transform:scale(1.04)}

/* Sale ribbon */
.onsale{
  position:absolute;
  top:.75rem;
  left:.75rem;
  background:var(--vx-danger);
  color:#fff;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.2rem .55rem;
  border-radius:.375rem;
  line-height:1;
  z-index:1;
}

/* Card body — Blocksy renders card children directly inside li.product (no wrapper),
   so pad each element and keep the layout tight (no stretched gap). */
li.product{padding:0;overflow:hidden}
li.product > figure{margin:0}
li.product .product-card__brand{padding:.85rem 1rem 0}
li.product .woocommerce-loop-product__title{padding:.1rem 1rem 0;margin:0}
li.product .price{padding:.45rem 1rem .2rem}
li.product .entry-meta{padding:.1rem 1rem;margin:.15rem 0 0;font-size:.7rem;color:var(--vx-slate);list-style:none;display:block}
li.product .entry-meta a{color:var(--vx-slate)}
li.product .ct-woo-card-actions{padding:.5rem 1rem 1.1rem;margin-top:.25rem;display:flex}
li.product .ct-woo-card-actions .button{width:100%;justify-content:center}

/* legacy wrapper selectors (harmless if present) */
.product-card__body{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column}

/* Brand eyebrow */
.product-card__brand{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vx-volt);
  margin-bottom:.25rem;
}

/* Product title */
.woocommerce-loop-product__title,
h2.woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-size:1rem;
  font-weight:700;
  color:var(--vx-white);
  line-height:1.3;
  margin-bottom:.5rem;
  flex:none;        /* was flex:1 — caused a tall empty gap between title and price */
}

/* Price */
.price,
.woocommerce-Price-amount{
  font-family:var(--vx-font-mono);
  font-size:1.125rem;
  color:var(--vx-volt);
  display:block;
  margin-bottom:.875rem;
}
.price del{color:var(--vx-slate);font-size:.9em;margin-right:.4rem}

/* Spec chips (for key specs under product title) */
.vx-spec-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem;
  margin-bottom:.875rem;
}
.vx-chip{
  font-size:.6875rem;
  font-weight:600;
  padding:.2rem .5rem;
  background:var(--vx-carbon);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.25rem;
  color:var(--vx-slate);
  white-space:nowrap;
}

/* Add to cart button */
li.product .add_to_cart_button,
li.product .product_type_variable a.button{
  width:100%;
  justify-content:center;
  font-size:.875rem;
  padding:.625rem 1rem;
  border-radius:var(--vx-radius);
}

/* ─────────── Pagination ─────────── */
nav.woocommerce-pagination ul{
  display:flex;
  gap:.5rem;
  list-style:none;
  padding:0;
  justify-content:center;
  margin-top:2.5rem;
}
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--vx-radius);
  background:var(--vx-surface);
  border:1px solid rgba(255,255,255,.08);
  font-size:.875rem;
  color:var(--vx-cloud);
  transition:all var(--vx-dur) var(--vx-ease);
}
nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li span.current{
  background:var(--vx-volt);
  color:var(--vx-ink);
  border-color:var(--vx-volt);
}