/* V-Glow Beauty — custom.css */
:root {
  --pink: #FF69B4;
  --pink-light: #FFE4E1;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;
}
body { font-family: var(--font-body); }
h1,h2,h3 { font-family: var(--font-display); }
a { transition: color .2s, opacity .2s; }

/* Toast notification */
.vg-toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  background:#fff; border-left:4px solid var(--pink); border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.12); padding:.85rem 1.2rem;
  display:flex; align-items:center; gap:.75rem; min-width:260px;
  animation: slideIn .3s ease;
}
.vg-toast.error { border-color:#dc3545; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} }
[x-cloak] { display:none !important; }

/* ═══ RESPONSIVE MÓVIL ═══ */
@media (max-width: 768px) {

  /* Navbar */
  .navbar { padding:.5rem 1rem; }
  .navbar-brand img { height:40px !important; }

  /* Hero */
  .vg-hero { height:100svh; }
  .vg-slide-title { font-size:2.4rem !important; }
  .vg-slide-content { padding:0 1.2rem !important; }
  .vg-slide-sub { font-size:.85rem; }
  .vg-btn-primary, .vg-btn-ghost { padding:11px 22px; font-size:.78rem; }
  .vg-arr, .vg-scroll-hint { display:none !important; }

  /* Categorías */
  .vg-cat-img { height:120px !important; }
  .vg-cat-body h5 { font-size:.8rem; }
  .vg-cat-body p { display:none; }

  /* Productos */
  .vg-prod-img { height:150px !important; }
  .vg-prod-info { padding:.75rem; }
  .vg-prod-info h6 { font-size:.8rem; }
  .vg-prod-footer strong { font-size:.9rem; }
  .vg-add-btn { padding:5px 10px; font-size:.7rem; }

  /* Cards generales */
  .card-body { padding:.75rem !important; }

  /* Checkout */
  .container { padding-left:1rem; padding-right:1rem; }

  /* Footer */
  #footer-vglow .col-md-2,
  #footer-vglow .col-md-4 { margin-bottom:1rem; }

  /* Barra superior */
  .text-center.py-2 { font-size:.72rem; padding:.4rem !important; }

  /* Perfil usuario */
  .card.border-0.shadow-sm.p-4 { padding:1.2rem !important; }
}

@media (max-width: 480px) {
  .vg-slide-title { font-size:2rem !important; }
  .vg-section-head h2 { font-size:1.8rem !important; }
  .vg-ver-todos { padding:12px 28px; font-size:.78rem; }
  .vg-ship-content h3 { font-size:1.4rem !important; }
}