/* ─────────────────────────────────────────────────────────────
   Alpine — Product Grid
   Prefix: .am-product-grid / .am-ptile
   Compact accent tiles (Variation C). Colour tokens are scoped to
   the block so it is self-contained.
   ───────────────────────────────────────────────────────────── */
.am-product-grid {
  --am-navy: #003469;
  --am-sky: #00addc;
  --am-muted: #f4f7fa;
  --am-border: #dce4ef;
  --am-text-mid: #4a5568;
  --am-cols: 3;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  color: #1a2332;
  position: relative;
}
.am-product-grid [hidden] { display: none !important; }
.js-grid-item.am-hide-page { display: none !important; }

/* Heading row */
.am-product-grid__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
.am-product-grid__title { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; color: var(--am-navy); line-height: 1.2; margin: 0; }
.am-product-grid__meta { font-size: 13px; color: #6b7a8d; }
.am-product-grid__empty { color: var(--am-text-mid); font-size: 15px; }

/* ── Tile grid ── */
.am-product-grid__items {
  display: grid;
  grid-template-columns: repeat(var(--am-cols), 1fr);
  gap: 20px;
}

.am-ptile {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--am-border); border-left: 4px solid var(--am-sky);
  border-radius: 8px; padding: 22px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.am-ptile:hover { box-shadow: 0 10px 28px rgba(0, 52, 105, .12); transform: translateY(-3px); }
.am-ptile:focus-visible { outline: 3px solid var(--am-sky); outline-offset: 3px; }

.am-ptile__icon {
  width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0;
  background: rgba(0, 52, 105, .06); color: var(--am-navy);
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.am-ptile__icon.has-image { background-color: transparent; }
.am-ptile__icon .am-marque { display: block; }

.am-ptile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-ptile__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--am-sky); margin-bottom: 5px;
}
.am-ptile__name { font-size: 16.5px; font-weight: 600; color: var(--am-navy); line-height: 1.3; margin-bottom: 6px; }
.am-ptile__desc { font-size: 13px; line-height: 1.6; color: var(--am-text-mid); margin: 0; }
.am-ptile__link {
  margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--am-navy);
  display: inline-flex; align-items: center; gap: 7px;
}
.am-ptile:hover .am-ptile__link { color: var(--am-sky); }
.am-ptile__link svg { transition: transform .2s ease; }
.am-ptile:hover .am-ptile__link svg { transform: translateX(4px); }

/* ── Pagination (only rendered when "Paginate after" > 0) ── */
.am-product-grid__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.am-pager__btn {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--am-border); background: #fff; color: var(--am-navy);
  font-family: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, color .18s;
}
.am-pager__btn:hover:not(:disabled) { border-color: var(--am-sky); }
.am-pager__btn.is-active { background: var(--am-navy); border-color: var(--am-navy); color: #fff; }
.am-pager__btn:disabled { opacity: .4; cursor: default; }
.am-pager__nav { font-size: 20px; line-height: 1; }
.am-pager__more {
  cursor: pointer; border: 1.5px solid var(--am-navy); background: var(--am-navy); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 12px 26px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 8px; transition: background .18s, transform .15s;
}
.am-pager__more:hover { background: #0a4a86; transform: translateY(-2px); }
.am-pager__more span { font-weight: 500; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .am-ptile, .am-ptile__link svg, .am-pager__btn, .am-pager__more { transition: none; }
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .am-product-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .am-product-grid__items { grid-template-columns: 1fr; }
}