html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; background:#FBF8F3; color:#20142F; }
h1,h2,h3,h4,.font-display { font-family:'Sora',sans-serif; }

/* Kill horizontal scroll/pan on all devices without breaking sticky header */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

::selection { background:#F2A93B; color:#33095A; }
:focus-visible { outline: 3px solid #DB9020; outline-offset: 2px; border-radius: 4px; }

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.tap{ -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Hero entrance ---- */
.hero-enter { animation: heroFade 0.7s ease-out both; }
.hero-enter-1{ animation-delay:0.05s; }
.hero-enter-2{ animation-delay:0.15s; }
.hero-enter-3{ animation-delay:0.25s; }
.hero-enter-4{ animation-delay:0.35s; }
@keyframes heroFade { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Mobile menu ---- */
#mobile-menu-panel{ transition: transform .28s ease, visibility .28s ease; will-change: transform; }
.menu-closed{ transform: translateX(105%); visibility: hidden; }
.menu-open{ transform: translateX(0); visibility: visible; }

/* ---- Cart badge pop ---- */
@keyframes badgePop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.45);} 100%{ transform:scale(1);} }
.iphonify-badge-pop{ animation: badgePop .35s ease; }

/* ---- Product detail / cart page ---- */
.qty-btn{ transition:color .15s ease, background .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.spinner{ border: 3px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; width:2.25rem; height:2.25rem; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }



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

/* ---- Notched phones: keep chrome out of the notch / home indicator ---- */
@supports (padding: env(safe-area-inset-top)) {
  .announce-bar{ padding-top: env(safe-area-inset-top); }
  header{ padding-top: env(safe-area-inset-top); }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  #whatsapp-fab{ bottom: calc(env(safe-area-inset-bottom) + 1rem); }
}