/* ==========================================================
   VITALIS — custom styles layered on top of Tailwind utilities
   ========================================================== */

::selection { background: #C6A15B; color: #08241B; }

/* ---- Product card ---- */
.product-card {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(11,61,46,0.08);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -18px rgba(11,61,46,0.28);
  border-color: rgba(198,161,91,0.4);
}
.product-card .quick-actions {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.product-card:hover .quick-actions {
  opacity: 1;
  transform: translateY(0);
}
.product-card .product-img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-img {
  transform: scale(1.06);
}

/* ---- Capsule badge (signature motif) ---- */
.badge-capsule {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .75rem .3rem .3rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge-capsule .dot {
  width: 1rem; height: 1rem; border-radius: 999px;
  display: inline-block;
}
.badge-new .dot { background: #1F6E4E; } .badge-new { background: #EAF3EF; color: #0B3D2E; }
.badge-sale .dot { background: #C6A15B; } .badge-sale { background: #FBF4E7; color: #8A6A2E; }
.badge-best .dot { background: #16241D; } .badge-best { background: #F1F1EF; color: #16241D; }

/* ---- Skeleton loader ---- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #EAF3EF;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Page fade-in ---- */
body { animation: page-fade .4s ease both; }
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Buttons ---- */
.btn-animated {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-animated:active { transform: scale(0.97); }

/* ---- Cart drawer open state ---- */
#cart-drawer.open { transform: translateX(0); }

/* ---- Toast ---- */
.toast {
  min-width: 260px;
  max-width: 340px;
  padding: .9rem 1.1rem;
  border-radius: .9rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
  display: flex; align-items: center; gap: .6rem;
  animation: toast-in .3s cubic-bezier(.22,1,.36,1) both;
}
.toast.success { background: #123A29; }
.toast.error   { background: #B54747; }
@keyframes toast-in { from { opacity:0; transform: translateY(12px) scale(.95); } to { opacity:1; transform: translateY(0) scale(1); } }

/* ---- Scrollbar (thin, brand-colored) for cart drawer / mega menu ---- */
#cart-items-container::-webkit-scrollbar { width: 6px; }
#cart-items-container::-webkit-scrollbar-thumb { background: #CFE4DA; border-radius: 999px; }

/* ---- Floating element ---- */
.float-slow { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- Hero gradient mesh ---- */
.hero-mesh {
  background:
    radial-gradient(circle at 15% 20%, rgba(198,161,91,0.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(31,110,78,0.25), transparent 45%),
    linear-gradient(135deg, #0B3D2E 0%, #123A29 55%, #08241B 100%);
}