/* ==========================================================================
   The Car Heater Shop — shop archive restyle
   Built against Neve + WooCommerce markup (.nv-*, .woocommerce-*).
   ========================================================================== */

/* ==========================================================================
   The Car Heater Shop — shop archive restyle
   Paste into Appearance → Customize → Additional CSS, or a child theme.
   Built against Neve + WooCommerce markup (.nv-*, .woocommerce-*).
   ========================================================================== */

:root {
  --chs-ink:        #1b2128;  /* body text, near-black with a blue cast */
  --chs-ink-soft:   #5c6873;  /* secondary text, VAT line, meta */
  --chs-line:       #dfe3e7;  /* hairlines and card borders */
  --chs-surface:    #ffffff;
  --chs-tint:       #f3f5f7;  /* image wells, toolbar */
  --chs-copper:     #a8552b;  /* accent — the colour of the product itself */
  --chs-copper-lo:  #f6ede8;

  --chs-r:          4px;      /* one radius, kept tight: this is a parts shop */
  --chs-gap:        24px;
  --chs-shadow:     0 1px 2px rgba(27, 33, 40, .06);
}

/* --------------------------------------------------------------------------
   1. Page header + category index
   The header currently renders a duplicate link list, stray <br>s and nested
   anchors. This tidies what's there; see the notes for the markup fix.
   -------------------------------------------------------------------------- */

.page-description br { display: none; }

.page-description h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}

.page-description > p:first-of-type {
  max-width: 62ch;
  color: var(--chs-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The repeated "Classic > / Modern Classic > / Modern >" row directly under
   the intro duplicates the headings below. Hide it (or delete it in the
   page editor, which is better for SEO). */
.page-description > p:nth-of-type(2) { display: none; }

/* Category index: each heading sits on a rule, description underneath. */
.page-description h2 {
  font-size: 1.125rem;
  margin: 0;
  padding: 18px 0 4px;
  border-top: 1px solid var(--chs-line);
  color: var(--chs-ink);
  transition: color .15s ease;
}
.page-description a:hover h2 { color: var(--chs-copper); }

.page-description h2 + p,
.page-description a + p {
  margin: 0 0 4px;
  color: var(--chs-ink-soft);
  font-size: .9375rem;
}
.page-description a { text-decoration: none; }

/* --------------------------------------------------------------------------
   2. Toolbar — breadcrumb, result count, sorting
   -------------------------------------------------------------------------- */

.nv-bc-count-wrap,
.nv-woo-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.woocommerce-breadcrumb {
  font-size: .8125rem;
  color: var(--chs-ink-soft);
}
.woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--chs-copper); }
.nv-breadcrumb-delimiter { opacity: .45; margin: 0 .4em; }

.woocommerce-result-count {
  font-size: .8125rem;
  color: var(--chs-ink-soft);
  margin: 0;
}

.nv-woo-filters {
  padding: 12px 16px;
  margin: 16px 0 28px;
  background: var(--chs-tint);
  border-radius: var(--chs-r);
}

.woocommerce-ordering select {
  appearance: none;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r);
  background: var(--chs-surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6873' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-size: .875rem;
  color: var(--chs-ink);
  cursor: pointer;
}

.nv-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chs-ink);
}
.nv-sidebar-toggle svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   3. Product grid — fluid, replaces the fixed 3-column layout
   -------------------------------------------------------------------------- */

ul.products,
ul.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--chs-gap);
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  padding: 0;
}

ul.products li.product .nv-card-content-wrapper {
  height: 100%;
  background: var(--chs-surface);
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r);
  box-shadow: var(--chs-shadow);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

ul.products li.product .nv-card-content-wrapper:hover,
ul.products li.product .nv-card-content-wrapper:focus-within {
  border-color: var(--chs-copper);
  box-shadow: 0 4px 14px rgba(27, 33, 40, .1);
  transform: translateY(-2px);
}

ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--chs-ink);
}

/* Images vary between 4:3 and 300x194, so normalise the well. */
.sp-product-image,
.sp-product-image .img-wrap {
  display: block;
  background: var(--chs-tint);
}
.sp-product-image .img-wrap {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--chs-line);
}
.sp-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* hides slightly-off white backgrounds */
}

.woocommerce-loop-product__title {
  font-size: .9375rem !important;
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
  padding: 14px 16px 0;
  /* keeps card heights even despite long product names */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
}

ul.products li.product .price {
  display: block;
  margin: 0;
  padding: 10px 16px 16px;
  margin-top: auto;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--chs-ink);
}
ul.products li.product .price .woocommerce-price-suffix {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 400;
  color: var(--chs-ink-soft);
}

/* Out of stock / sale flashes, if you enable them */
ul.products li.product .onsale,
ul.products li.product .out-of-stock {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--chs-copper-lo);
  color: var(--chs-copper);
  font-size: .6875rem;
  font-weight: 600;
}
ul.products li.product { position: relative; }

/* Add-to-cart button, if you turn it on in the theme */
ul.products li.product .button {
  margin: 0 16px 16px;
  padding: 10px 14px;
  border-radius: var(--chs-r);
  background: var(--chs-ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
}
ul.products li.product .button:hover { background: var(--chs-copper); }

/* --------------------------------------------------------------------------
   4. Pagination
   -------------------------------------------------------------------------- */

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0 0 48px;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }

.woocommerce-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--chs-line);
  border-radius: var(--chs-r);
  background: var(--chs-surface);
  color: var(--chs-ink);
  font-size: .875rem;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.woocommerce-pagination a.page-numbers:hover {
  border-color: var(--chs-copper);
  color: var(--chs-copper);
}
.woocommerce-pagination .page-numbers.current {
  background: var(--chs-ink);
  border-color: var(--chs-ink);
  color: #fff;
  font-weight: 600;
}
.woocommerce-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--chs-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Accessibility + motion
   -------------------------------------------------------------------------- */

a:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--chs-copper);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --chs-gap: 14px; }

  ul.products,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .woocommerce-loop-product__title {
    font-size: .8125rem !important;
    padding: 10px 12px 0;
    -webkit-line-clamp: 3;
  }
  ul.products li.product .price {
    padding: 8px 12px 12px;
    font-size: 1rem;
  }
  .nv-woo-filters { padding: 10px 12px; }
  .woocommerce-ordering,
  .woocommerce-ordering select { width: 100%; }
}

.woocommerce-notices-wrapper{
  width: 100%;
    height: 2px;
    background: #e1e1e1;
    margin-bottom: 15px;
}

.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before{
  display: none; 
}