body { font-family: 'Poppins', sans-serif; background:#FFFBFD; }
h1,h2,h3,h4,.font-display { font-family: 'Fredoka', sans-serif; letter-spacing: 0.01em; }

/* Hero responsive background */
.hero-section {
  background-image: url('images/hero-bg-mb.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .hero-section {
    background-image: url('images/hero-bg-pc.png');
    background-position: right center;
  }
}

/* floating decorative shapes */
.float-slow { animation: floatY 6s ease-in-out infinite; }
.float-slower { animation: floatY 9s ease-in-out infinite; }
.float-rev { animation: floatY 7s ease-in-out infinite reverse; }
@keyframes floatY { 0%,100%{ transform: translateY(0px) rotate(0deg);} 50%{ transform: translateY(-14px) rotate(4deg);} }

.spin-slow { animation: spinSlow 14s linear infinite; }
@keyframes spinSlow { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.card-hover { transition: transform .35s ease, box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -12px rgba(219,75,120,0.28); }

.scallop-bottom {
  -webkit-mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  mask-position: bottom;
}

.whatsapp-btn { background:#25D366; }
.whatsapp-btn:hover { background:#1EBE59; }

input:focus, button:focus, a:focus { outline: 3px solid #F6B93B; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .float-slow, .float-slower, .float-rev, .spin-slow { animation: none; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #FFB0C4; border-radius: 10px; }

.mobile-menu { transition: max-height .35s ease; }

.tab-btn.active { background:#C2185B; color:#fff; }
.tab-btn { transition: background .25s ease, color .25s ease; }

.qty-btn { transition: background .2s ease; }

.bi { display:inline-block; vertical-align: middle; }

.thumb.active { border-color:#C2185B; }