/* ============================================================
   Scheda orologio del catalogo (.cat-card) per le pagine che non caricano home.css (scheda orologio: "Orologi simili").
   COPIA delle regole di base di assets/css/home.css (non toccata: la home resta com'è); il markup è catalogoSchedaHtml()
   in includes/catalogo.php. Se si ritocca l'aspetto delle schede nella home, ripetere qui.
   ============================================================ */
.cat-item { display: flex; }
/* ── Scheda orologio — aspetto "card" stile Apple (ritocco R1, 08/10/2026) ──
   Fondo appena più chiaro della pagina, angoli arrotondati, ombra quasi impercettibile,
   bordo di 1px molto tenue. Font di sistema (SF su Mac/iPhone, Inter altrove). */
.cat-card {
  --card-font: 'Inter', -apple-system, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; width: 100%; color: inherit; overflow: hidden;
  font-family: var(--card-font); -webkit-font-smoothing: antialiased;
  background: #FFFEFC; border: 1px solid rgba(60, 45, 30, 0.07); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(30, 20, 10, 0.04), 0 8px 24px -14px rgba(30, 20, 10, 0.12);
}
/* Foto intera (14/10/2026): le foto del catalogo sono quasi tutte verticali 3:4, quindi la card ha lo
   stesso formato e nulla viene ritagliato; le poche con proporzioni diverse restano intere, centrate
   su fondo neutro (object-fit: contain). */
.cat-card__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #efe9de; }
.cat-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
/* Passaggio del mouse (solo dispositivi con mouse): ombra più ampia; sollevamento e zoom solo senza prefers-reduced-motion */
@media (hover: hover) {
  .cat-card { transition: box-shadow .35s ease, border-color .35s ease; }
  .cat-card:hover { border-color: rgba(60, 45, 30, 0.1); box-shadow: 0 2px 4px rgba(30, 20, 10, 0.05), 0 20px 38px -18px rgba(30, 20, 10, 0.22); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cat-card { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .35s ease; }
  .cat-card:hover { transform: translateY(-3px); }
  .cat-card__media img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .cat-card:hover .cat-card__media img { transform: scale(1.025); }
}
.cat-card__ph { position: absolute; inset: 0; background: linear-gradient(135deg, #ddd3c2, #c9bba3); }
.cat-card__badge {
  position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: #2a2723; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.cat-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; }
.cat-card__text { display: block; min-width: 0; }
.cat-card__name { display: block; font-family: var(--card-font); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.014em; color: #1d1d1f; }
.cat-card__ref { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -0.006em; color: #86868b; }
.cat-card__price { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: #1d1d1f; }
.cat-card__cur { margin-right: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: #836a52; }
.cat-card__arrow { color: #796145; transition: transform .3s; }
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }
/* nome+referenza e prezzo in colonna (griglia): il prezzo resta sempre in basso, allineato tra schede della stessa riga */
.cat-card__body { flex: 1; flex-direction: column; align-items: stretch; gap: 0; }
.cat-card__price { margin-top: auto; padding-top: 12px; }