/* ============================================================
 * Smile V2 — Global components (Buttons + Cards + Tags)
 * Source: design_handoff/02_styles_full.css §Buttons §Cards verbatim
 * Loaded BEFORE page-specific component CSS.
 * ============================================================ */

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: var(--f-body);
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(43,40,38,0.06); }
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.btn-whatsapp:hover { background: #20BD5A; border-color: #20BD5A; color: #fff; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.product-card {
  cursor: pointer;
  position: relative;
}
.product-card .ph {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line-2);
}
.product-card .ph img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s;
}
.product-card .ph img.alt { opacity: 0; }
.product-card:hover .ph img.main { opacity: 0; }
.product-card:hover .ph img.alt { opacity: 1; }
.product-card:hover .ph img { transform: scale(1.03); }

.product-card .badge-row {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.product-card .wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  z-index: 2;
  transition: transform 0.2s var(--ease);
}
.product-card .wish:hover { transform: scale(1.08); }
.product-card .wish.on { color: var(--burgundy); }

.product-card .pmeta { padding: 14px 2px 0; }
.product-card .pname {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.005em;
}
.product-card .prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card .pprice {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-card .pprice .old {
  color: var(--ink-3);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.swatches {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.swatches .sw {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(43,40,38,0.12);
  cursor: pointer;
  transition: transform 0.2s;
}
.swatches .sw:hover { transform: scale(1.2); }
.swatches .sw.sel { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 3px var(--bg); }
.swatches .more { font-size: 10px; color: var(--ink-2); margin-left: 2px; }

/* ============================================================
   Tags / Badges
   ============================================================ */
.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
}
.tag.gold { background: var(--champagne); color: var(--ink); }
.tag.sale { background: var(--burgundy); color: #fff; }
.tag.soft { background: var(--rose); color: var(--ink); }

/* ============================================================
 * 2026-05-27 — Language switcher OCULTO visualmente
 * Decisión Kleber: i18n EN requiere más planificación (2413/2420
 * productos sin link_rewrite EN, slugs vacíos rompen navegación).
 * Quitar visualmente el switch hasta tener plan completo.
 * Plan detallado en /root/SMILE_I18N_PLAN.md.
 *
 * NOTA: el idioma sigue activo en PS BO. URLs /en/ funcionan.
 * Esto solo oculta el botón EN/ES del header.
 * Para reactivar: borrar este bloque.
 * ============================================================ */
.lang-switch,
.lang-link,
.mobile-drawer .lang-switch {
  display: none !important;
}