/**
 * Product grid and product card styling across all loops.
 *
 * Part of the WooCommerce stylesheet set - enqueued in order by
 * sync_rc_woocommerce_styles() in inc/shop/shop-setup.php. Order matters.
 */

/* ============================================
   PRODUCT LOOP (Shop Archive & Front Page)
   ============================================ */

/* Base grid - applies to ALL product loops */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row dense !important;
  gap: var(--space-6) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}

/* Ajuste del grid cuando hay sidebar (en shop page) */
.shop-main-content .woocommerce ul.products,
.shop-main-content ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Reset font size for products */
.woocommerce ul.products li.product,
ul.products li.product {
  font-size: 1rem !important;
}

/* Hide empty list items and whitespace nodes */
.woocommerce ul.products li:empty,
ul.products li:empty,
.woocommerce ul.products li:not(.product),
ul.products li:not(.product) {
  display: none !important;
}

/* Remove any pseudo elements or results element */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}

/* Hide WooCommerce result count if it's inside products list */
.woocommerce ul.products .woocommerce-result-count,
ul.products .woocommerce-result-count {
  display: none !important;
}

/* Featured Products - 4 columns on front page */
.products-featured .woocommerce ul.products,
.products-featured ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Tablet - 2 columns for all */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  ul.products,
  .products-featured .woocommerce ul.products,
  .products-featured ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile - 1 column for all */
@media (max-width: 640px) {
  .woocommerce ul.products,
  ul.products,
  .products-featured .woocommerce ul.products,
  .products-featured ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Product link wrapper */
.woocommerce ul.products li.product a,
ul.products li.product a {
  text-decoration: none !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden !important;
  transition: all var(--transition-base) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl) !important;
  border-color: var(--color-primary) !important;
}

.woocommerce ul.products li.product img,
ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  transition: transform var(--transition-base) !important;
  display: block !important;
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product h2 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--color-secondary) !important;
  padding: var(--space-4) !important;
  margin: 0 !important;
  line-height: var(--leading-tight) !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  padding: 0 var(--space-4) var(--space-3);
  display: block;
}

.woocommerce ul.products li.product .price del {
  color: var(--color-gray-500);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  margin-right: var(--space-2);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-primary);
}

.woocommerce ul.products li.product .button {
  width: calc(100% - var(--space-8));
  margin: 0 var(--space-4) var(--space-4);
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  text-align: center;
  transition: all var(--transition-base);
  cursor: pointer;
}

.woocommerce ul.products li.product .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

/* Hide "View cart" link injected into product cards after AJAX add-to-cart */
.woocommerce ul.products li.product .added_to_cart {
  display: none;
}

/* Product Badges - Hidden on shop archive */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  display: none !important;
}

/* Manifested Badge (old class) - Hidden on shop archive */
.woocommerce ul.products li.product .sync-manifested-badge,
ul.products li.product .sync-manifested-badge {
  display: none !important;
}

/* Manifested Tag - Subtle indicator on product cards */
.woocommerce ul.products li.product .sync-manifested-tag,
ul.products li.product .sync-manifested-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-success);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1, 4px);
  opacity: 0.85;
}

.sync-manifested-tag i {
  font-size: 12px;
}

.sync-manifested-tag__count {
  color: var(--color-gray-500);
  font-weight: var(--font-normal);
  margin-left: 2px;
}

.woocommerce ul.products li.product .sync-container-tag,
ul.products li.product .sync-container-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1, 4px);
}

.sync-container-tag i {
  font-size: 12px;
}

/* When the load was listed. The date is grey like the other tags; only the
   age, shown once the load is no longer fresh, carries colour and weight —
   the same signal as .sp-details__age on the product page.

   Smaller than its neighbours and held to one line: it is the least urgent
   thing on the card, and wrapping it pushed the price down a row. */
.woocommerce ul.products li.product .sync-listed-tag,
ul.products li.product .sync-listed-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--font-normal);
  color: var(--color-gray-500);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1, 4px);
}

.sync-listed-tag i {
  font-size: 11px;
}

.sync-listed-tag__age--warn {
  color: #b45309;
  font-weight: var(--font-semibold);
}

.sync-listed-tag__age--stale {
  color: #b91c1c;
  font-weight: var(--font-semibold);
}

.woocommerce ul.products li.product .sync-packaging-tag,
ul.products li.product .sync-packaging-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1, 4px);
}

.sync-packaging-tag i {
  font-size: 12px;
}

/* Load type: what condition the goods are in. Reads as a sibling of the
   packaging tag it sits next to, but carries the brand colour — it is the line
   a buyer scanning a row of cards is actually looking for. */
.woocommerce ul.products li.product .sync-load-type-tag,
ul.products li.product .sync-load-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1, 4px);
}

.sync-load-type-tag i {
  font-size: 12px;
}