/* =====================================================
   Cakeschahiye – Component Styles (LOCKED V1)
   Visual polish & UI interactions
   ===================================================== */

/* -------------------- SHADOWS -------------------- */
.shadow-sm {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.shadow-md {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* -------------------- HEADER INTERACTION -------------------- */
.site-header {
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* -------------------- CATEGORY CARDS -------------------- */
.category-card {
  cursor: pointer;
  transition: all 0.25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  background-color: #fbe9e0;
}

/* -------------------- PRODUCT CARDS -------------------- */
.product-card {
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.product-card img {
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* -------------------- BUTTON INTERACTIONS -------------------- */
.btn-primary,
.btn-secondary {
  cursor: pointer;
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.97);
}

/* -------------------- HERO IMAGE -------------------- */
.hero-image img {
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

/* -------------------- BIRTHDAY CLUB -------------------- */
.birthday-box {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* -------------------- SMOOTH FADE-IN -------------------- */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------- IMAGE CONSISTENCY -------------------- */
.product-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* -------------------- LINKS -------------------- */
.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: var(--color-pink);
  left: 0;
  bottom: -4px;
  transition: width 0.25s ease;
}

.main-nav a:hover::after {
  width: 100%;
}