/* =============================================
   WOWLOVED® — Custom Styles (Rebranding 2026)
   Cherry Red:     #C80D1E  (primary 60%)
   Deep Wine:      #980816
   Bubblegum Pink: #E97AB7  (secondary 20%)
   Butter Yellow:  #F5DF6B  (accent 10%)
   Lilac:          #C7A7F6  (accent 10%)
   Soft Cream:     #FFF5EA  (background)
   ============================================= */

[x-cloak] { display: none !important; }

/* ── Recoleta font (Fontshare) ───────────────── */
.font-recoleta { font-family: 'Recoleta', serif; }

/* ── Hero gradient — Cherry Red brand ───────── */
.hero-gradient {
  background: linear-gradient(
    135deg,
    #C80D1E 0%,
    #E0224A 30%,
    #C80D1E 60%,
    #980816 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Stripe pattern (brand decorative) ───────── */
.stripe-pattern {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,0.18) 18px,
    rgba(255,255,255,0.18) 22px
  );
}

/* ── Checker pattern ──────────────────────────── */
.checker-pattern {
  background-image:
    linear-gradient(45deg, rgba(199,167,246,0.25) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(199,167,246,0.25) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(199,167,246,0.25) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(199,167,246,0.25) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

/* ── Marquee ─────────────────────────────────── */
.animate-marquee {
  display: flex;
  animation: marquee 24s linear infinite;
  width: max-content;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Nav links ───────────────────────────────── */
.nav-link {
  position: relative;
  color: #374151;
  transition: color 0.2s;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #E97AB7;
  transition: width 0.3s ease;
}
.nav-link:hover          { color: #C80D1E; }
.nav-link:hover::after   { width: 100%; }

/* ── Primary button ──────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #E97AB7, #C04070);
  color: #fff;
  font-weight: 800;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(233, 122, 183, 0.35);
  cursor: pointer;
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(233, 122, 183, 0.50);
  background: linear-gradient(135deg, #C04070, #E97AB7);
}

/* ── Feature cards ───────────────────────────── */
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
}
.feature-icon {
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

/* ── Product card ────────────────────────────── */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #FFF5EA; }
::-webkit-scrollbar-thumb  { background: #E97AB7; border-radius: 3px; }

/* ── Smooth scroll + section offset ─────────── */
html                       { scroll-behavior: smooth; }
section[id]                { scroll-margin-top: 80px; }

/* ── Line-clamp ──────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Recoleta headings ───────────────────────── */
.font-fredoka { font-family: 'Recoleta', serif; }

/* ── Discount badge ──────────────────────────── */
.badge-sale {
  background: #F5DF6B;
  color: #980816;
  font-weight: 800;
}