/* ==========================================================================
   products.css
   Styles specific to products.html
   ========================================================================== */

/* Alternating feature rows */
.product-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.product-feature + .product-feature { margin-top: clamp(3rem, 7vw, 5.5rem); }
.product-feature:nth-child(even) .product-feature__media { order: 2; }

.product-feature__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.product-feature__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.product-feature__media:hover img { transform: scale(1.05); }
.product-feature__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: rgba(17, 24, 39, 0.55);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.product-feature:nth-of-type(1) .product-feature__badge { background: rgba(22, 163, 74, 0.9); }
.product-feature:nth-of-type(2) .product-feature__badge { background: rgba(21, 94, 239, 0.9); }
.product-feature:nth-of-type(3) .product-feature__badge { background: rgba(184, 150, 43, 0.92); }

.product-feature__title { font-size: var(--fs-h2); }
.product-feature__lead { font-size: var(--fs-lead); color: var(--color-text-light); margin-bottom: var(--space-lg); }
.product-feature__list { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.product-feature__list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.product-feature__list i { color: var(--color-secondary); margin-top: 0.25rem; flex: none; }
.product-feature__list strong { font-family: var(--font-heading); font-weight: var(--fw-semibold); display: block; }
.product-feature__list span { font-size: var(--fs-sm); color: var(--color-text-light); }

/* Category quick-nav */
.product-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}
.product-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  transition: all var(--dur-fast) var(--ease);
}
.product-nav a:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.product-nav a i { color: var(--color-secondary); }

/* Assurance strip */
.assurance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.assurance-card {
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
}
.assurance__grid .assurance-card:nth-child(4n+1) { background: var(--color-primary-light); border-color: #d9e6ff; }
.assurance__grid .assurance-card:nth-child(4n+2) { background: var(--color-secondary-light); border-color: #d3efdd; }
.assurance__grid .assurance-card:nth-child(4n+3) { background: var(--color-accent-light); border-color: #f0e6c4; }
.assurance__grid .assurance-card:nth-child(4n+4) { background: var(--color-primary-light); border-color: #d9e6ff; }
.assurance-card .icon-badge { margin: 0 auto var(--space-md); }
.assurance-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.assurance-card p { font-size: var(--fs-sm); color: var(--color-text-light); margin: 0; }