/* ===== Reflow product list — modern cards =====
   Scope to the product-list so we don't affect other components.
   Place AFTER the Reflow CSS. */

[data-reflow-type="product-list"] {
  --brand: #779349;
  --brand-700: #67823f;
  --text: #1f2937;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --ring: rgba(119,147,73,.30);
}

/* Grid: make items responsive */

[data-reflow-type="product-list"] .ref-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(.8rem, 2.5vw, 1.25rem);
}

/* Card */

[data-reflow-type="product-list"] .ref-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Subtle brand bar that fades in on hover/focus */

[data-reflow-type="product-list"] .ref-product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-700));
  opacity: 0;
  transition: opacity .2s ease;
}

[data-reflow-type="product-list"] .ref-product:hover, [data-reflow-type="product-list"] .ref-product:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-color: rgba(119,147,73,.35);
}

[data-reflow-type="product-list"] .ref-product:hover::before, [data-reflow-type="product-list"] .ref-product:focus-within::before {
  opacity: 1;
}

/* Media area with fixed aspect and image zoom on hover */

[data-reflow-type="product-list"] .ref-media {
  position: relative;
  background: #f3f4f6;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

[data-reflow-type="product-list"] .ref-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

[data-reflow-type="product-list"] .ref-product:hover .ref-image, [data-reflow-type="product-list"] .ref-product:focus-within .ref-image {
  transform: scale(1.06);
  filter: saturate(112%);
}

/* Text block */

[data-reflow-type="product-list"] .ref-product-data {
  padding: .9rem 1rem 1.1rem;
}

[data-reflow-type="product-list"] .ref-name {
  margin: 0 0 .2rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: .1px;
}

[data-reflow-type="product-list"] .ref-excerpt {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Accessible focus style when tabbing */

[data-reflow-type="product-list"] .ref-product:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Pagination (if Reflow renders it) */

[data-reflow-type="product-list"] .ref-pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}

[data-reflow-type="product-list"] .ref-pagination a, [data-reflow-type="product-list"] .ref-pagination span {
  border: 1px solid var(--border);
  padding: .45rem .7rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}

[data-reflow-type="product-list"] .ref-pagination a:hover {
  border-color: var(--brand);
  background: rgba(119,147,73,.08);
}

/* Dark mode polish (optional) */

@media (prefers-color-scheme: dark) {
  [data-reflow-type="product-list"] {
    --card: #161a18;
    --text: #e5e7eb;
    --muted: #a1a1aa;
    --border: #26302a;
  }
}

@media (prefers-color-scheme: dark) {
  [data-reflow-type="product-list"] .ref-product {
    box-shadow: none;
  }
}

@media (prefers-color-scheme: dark) {
  [data-reflow-type="product-list"] .ref-media {
    background: #0f1311;
  }
}