/* ===========================================================================
   CATEGORY ARCHIVE — product taxonomy pages (categories, tags, aisles, brands)
   ---------------------------------------------------------------------------
   This file is loaded ONLY on product category/tag/aisle/brand pages, after
   all shared CSS. It overrides storefront.css rules scoped to the archive grid.

   Design focus: product-led catalog with plain, calm layout. Card hierarchy:
   brand/vendor > product title > price + stock > action. Minimum tap target
   44px. Mobile: 2 columns; tablet: 3 columns; desktop: 4 columns.
   ========================================================================= */

/* --- Product card tap targets -------------------------------------------- */

/* The "View item" footer needs 44px minimum for touch. Currently it's
   a small text link with flex wrapping. Expand the footer area and give
   the link a full-height touch target. */
.dp-view-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
  border-top: var(--line);
  margin-top: auto;
  min-height: 44px;
  gap: var(--space-2);
}

.dp-view-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  /* Extend the clickable area to fill the 44px footer */
  padding: 8px 0;
  min-height: 44px;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--wrap);
}

.dp-view-item a:hover {
  color: var(--stamp);
}

.dp-view-item a:focus-visible {
  outline: 3px solid var(--stamp);
  outline-offset: -2px;
}

/* --- Stock status visibility ------------------------------------------------
   The IN STOCK / OUT OF STOCK label currently appears at font-size 11px in
   a column-flex .dp-tagfoot. Make it more prominent and give it color coding
   so it reads faster on a category full of mixed items. */

.dp-tagfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}

.dp-instock {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Color code by stock status */
.dp-instock[data-stock="in-stock"],
.product[class*="in-stock"] .dp-instock {
  color: var(--tally);
}

.dp-instock[data-stock="out-of-stock"],
.product[class*="out-of-stock"] .dp-instock,
.product.outofstock .dp-instock {
  color: var(--stamp);
}

/* --- Card spacing refinement ------------------------------------------------
   Ensure consistent internal rhythm across mobile and desktop. The parent
   grid gaps are set in storefront.css; these adjust the card's internal
   padding. */

.dp-tag {
  background: var(--label);
  border: var(--line);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dp-tag:hover {
  border-color: var(--wrap);
  box-shadow: 0 2px 8px rgba(43, 36, 29, 0.08);
}

.dp-tag:focus-within {
  border-color: var(--stamp);
}

/* Product image area: maintain square aspect ratio with consistent padding */
.dp-shot {
  aspect-ratio: 1 / 1;
  background: var(--label);
  padding: var(--space-6);
  border-bottom: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Body padding: balance the image and footer */
.dp-tagbody {
  padding: var(--space-4);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}

/* Brand/vendor label: de-emphasize as eyebrow but keep readable */
.dp-tagbody .dp-eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--space-1);
}

/* Product title: natural wrap, consistent line-height */
.dp-name {
  font: 600 var(--text-body) / 1.4 var(--body);
  display: block;
  overflow: visible;
  min-height: 0;
  margin: 0 0 var(--space-2);
  color: var(--wrap-deep);
}

/* Price: bold, large, tabular for alignment */
.dp-price {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wrap-deep);
  margin: 0 0 var(--space-1);
}

/* --- Mobile optimizations -------------------------------------------------- */
@media (max-width: 600px) {
  .dp-tagbody {
    padding: var(--space-3);
  }

  .dp-shot {
    padding: var(--space-3);
  }

  /* Reduce card title font on small screens */
  .dp-name {
    font-size: var(--text-small);
    margin-bottom: var(--space-1);
  }

  .dp-price {
    font-size: 20px;
  }

  /* Stack the footer: stock on its own row */
  .dp-tagfoot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .dp-instock {
    display: block;
    width: 100%;
  }

  .dp-view-item {
    width: 100%;
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
  }

  .dp-view-item a {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 0;
  }
}

/* --- Tablet refinements (768-900px) --------------------------------------- */
@media (min-width: 768px) and (max-width: 900px) {
  .dp-tagbody {
    padding: var(--space-4);
  }

  .dp-shot {
    padding: var(--space-5);
  }
}

/* --- Desktop enhancements (900px+) ---------------------------------------- */
@media (min-width: 901px) {
  /* Slightly tighter padding on large screens for better card density */
  .dp-tagbody {
    padding: var(--space-5);
  }

  .dp-shot {
    padding: var(--space-6);
  }

  /* Larger tap target area */
  .dp-view-item a {
    padding: 10px 0;
  }
}

/* --- Accessibility: reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dp-tag {
    transition: none;
  }
}

/* --- Empty category state -------------------------------------------------- */
/* If no products, WooCommerce shows an empty message. Keep it consistent. */
.woocommerce-info,
.woocommerce-notice {
  background: var(--label);
  border-left: 3px solid var(--wrap);
  color: var(--wrap-deep);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.woocommerce-info::before,
.woocommerce-notice::before {
  content: none;
}