/* ==========================================================================
   AriaNova Impex: WooCommerce catalogue styling
   Loaded only on WooCommerce screens.
   ========================================================================== */

.woocommerce-page .site-main,
.woocommerce .site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.woocommerce-products-header__title,
.woocommerce-page h1.entry-title,
.woocommerce .product_title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--an-ink);
}

.woocommerce-products-header__title {
  font-size: 40px;
  margin-bottom: 12px;
}

.woocommerce-products-header {
  margin-bottom: 40px;
}

.term-description {
  color: var(--an-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
}

/* --- Product grid ------------------------------------------------------- */

/* WooCommerce ships .woocommerce ul.products.columns-3 li.product { width: 30.75% }
   and a small-screen rule at [class*=columns-] { width: 48%; float: left }. Both
   outrank a plain .woocommerce ul.products li.product selector, which leaves the
   cards sized to the old float layout inside the grid track. These selectors match
   that specificity so the grid actually governs the column widths. */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  background: var(--an-white);
  border: 1px solid rgba(10, 10, 15, 0.07);
  border-radius: var(--an-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* The nth-child float rule in woocommerce-smallscreen.css is more specific still. */
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
  float: none;
  width: 100%;
}

/* The loop link wraps the image and the title, so it has to fill the card. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--an-shadow-lift);
  border-color: rgba(124, 58, 237, 0.25);
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  display: block;
  box-shadow: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--an-ink);
  padding: 20px 20px 0;
  margin: 0;
  line-height: 1.3;
}

.an-loop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 0;
}

.an-loop-chips span {
  background: var(--an-purple-glow);
  color: var(--an-purple);
  border-radius: var(--an-r-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* --- Quote button ------------------------------------------------------- */

.an-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 40px 20px 20px;
  padding: 11px 22px;
  background: var(--an-gradient);
  color: #fff;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.an-quote-btn:hover,
.an-quote-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35);
  color: #fff;
}

.an-quote-btn-lg {
  margin: 0;
  padding: 15px 34px;
  font-size: 15px;
}

.an-quote-wrap {
  margin: 28px 0 8px;
}

.an-quote-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--an-subtle);
  line-height: 1.6;
}

/* --- Single product ---------------------------------------------------- */

.woocommerce div.product .product_title {
  font-size: 36px;
  margin-bottom: 14px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 17px;
  line-height: 1.7;
  color: var(--an-muted);
}

.woocommerce div.product div.images img {
  border-radius: var(--an-r-lg);
  box-shadow: 0 20px 56px rgba(124, 58, 237, 0.12);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--an-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 20px 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--an-muted);
  padding: 12px 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--an-purple);
  box-shadow: inset 0 -2px 0 var(--an-purple);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  color: var(--an-ink);
}

.woocommerce div.product .woocommerce-tabs .panel h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  color: var(--an-ink);
  margin: 24px 0 10px;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
  padding-left: 20px;
  color: var(--an-muted);
  line-height: 1.8;
  font-size: 15px;
}

.woocommerce table.shop_attributes {
  border: 1px solid var(--an-hairline);
  border-radius: var(--an-r-md);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border-bottom: 1px solid var(--an-hairline);
  padding: 12px 16px;
  font-size: 14px;
  font-style: normal;
}

.woocommerce table.shop_attributes th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--an-ink);
  background: var(--an-surface);
  width: 200px;
}

.woocommerce table.shop_attributes td {
  color: var(--an-muted);
}

/* --- Related products and sorting -------------------------------------- */

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--an-ink);
  margin: 72px 0 28px;
}

.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--an-hairline);
  border-radius: 10px;
  padding: 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--an-muted);
  background: var(--an-white);
}

.woocommerce nav.woocommerce-pagination ul {
  border: none;
  gap: 8px;
  display: flex;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--an-hairline);
  border-radius: var(--an-r-sm);
  padding: 8px 14px;
  color: var(--an-muted);
  font-size: 14px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--an-purple);
  border-color: var(--an-purple);
  color: #fff;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
  .woocommerce div.product .product_title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .woocommerce-products-header__title {
    font-size: 30px;
  }
  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img {
    height: 240px;
  }
  .woocommerce table.shop_attributes th {
    width: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product a img,
  .an-quote-btn {
    transition: none;
  }
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product:hover a img,
  .an-quote-btn:hover {
    transform: none;
  }
}