/* ===================== Template grid & cards ===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 26px;
}
.tpl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .45s ease, border-color .45s ease;
}
.tpl-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px var(--shadow-ink-strong); }

.tpl-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ramp-1), var(--ramp-3));
}
.tpl-card__icon {
  font-size: 4.2rem;
  filter: drop-shadow(0 8px 18px var(--shadow-deep));
}
.tpl-card__thumb-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--veil-dark-soft);
}
.tpl-card__thumb-chrome span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sheen);
}

.tpl-card[data-category="accountants"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-1)); }
.tpl-card[data-category="doctors"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-6), var(--ramp-2)); }
.tpl-card[data-category="engineers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-3), var(--ramp-5)); }
.tpl-card[data-category="graphic_designers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-4)); }
.tpl-card[data-category="gym"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-2), var(--ramp-6)); }
.tpl-card[data-category="interior_design"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-4), var(--ramp-1)); }
.tpl-card[data-category="lawyers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-1), var(--ramp-5)); }
.tpl-card[data-category="photographers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-8), var(--ramp-3)); }
.tpl-card[data-category="teachers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-7)); }
.tpl-card[data-category="wedding_invitations"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-2)); }
.tpl-card__overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--veil-dark);
  opacity: 0;
  transition: opacity .2s ease;
}
.tpl-card:hover .tpl-card__overlay { opacity: 1; }
.tpl-card__price-tag {
  position: absolute;
  top: 40px; inset-inline-end: 12px;
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  box-shadow: 0 4px 12px var(--shadow-ink);
  z-index: 2;
  white-space: nowrap;
}
.tpl-card__price-tag s { font-weight: 500; font-size: .7rem; color: var(--ink-soft); opacity: .8; margin-inline-end: 3px; }
.tpl-card__cat-tag {
  position: absolute;
  top: 40px; inset-inline-start: 12px;
  background: var(--chip-light);
  color: var(--ink);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  z-index: 2;
}

.tpl-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tpl-card__title { font-size: 1.05rem; margin: 0; }
.tpl-card__desc { font-size: .88rem; margin: 0; flex: 1; }
.tpl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.tpl-card__price { font-weight: 800; font-size: 1.15rem; color: var(--primary-dark); }
.tpl-card__price-old { font-weight: 500; font-size: .85rem; color: var(--ink-soft); opacity: .75; margin-inline-end: 2px; }
.tpl-card__actions { display: flex; gap: 8px; }

.tpl-card--coming-soon .tpl-card__thumb { filter: grayscale(.35); }
.tpl-card--coming-soon .tpl-card__icon { opacity: .75; }
.tpl-card__price-tag--soon {
  background: var(--primary);
  color: var(--on-dark);
}
.tpl-card__soon-label {
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink-soft);
}


/* Per-design tones so each wedding invitation card reads differently */
.tpl-card[data-tone="1"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-2)); }
.tpl-card[data-tone="2"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-6), var(--ramp-4)); }
.tpl-card[data-tone="3"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-8), var(--ramp-5)); }
.tpl-card[data-tone="4"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-1)); }
.tpl-card[data-tone="5"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-3), var(--ramp-6)); }
.tpl-card[data-tone="6"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-4), var(--ramp-8)); }
.tpl-card[data-tone="7"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-2), var(--ramp-6)); }

.tpl-card__duration {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ramp-2);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 4px 11px;
}