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); } }

/* Small tailwind utilities that aren't in the compiled css (used by dynamic UI) */
.bg-gold-100{ background-color:#FDF1DC; }
.bg-gray-300{ background-color:#D1D5DB; }
.cursor-not-allowed{ cursor:not-allowed; }
.bg-red-50\/60{ background-color: rgba(254,242,242,.6); }
.border-red-200{ border-color:#fecaca; }
.border-red-100{ border-color:#fee2e2; }
.text-red-600{ color:#dc2626; }
.text-red-800{ color:#991b1b; }
.hover\:text-red-800:hover{ color:#991b1b; }

/* ---- Sold out ---- */
.gal-thumb{ cursor:pointer; }
.stock-sold{ color:#dc2626; font-weight:600; }
.stock-ok{ color:#15803d; font-weight:600; }
.stock-soon{ color:#0e7490; }
.btn-sold{ background:#d1d5db; color:#fff; }

/* ---- Product gallery ---- */
.gal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:15; width:2.25rem; height:2.25rem; border-radius:9999px; background:rgba(255,255,255,.92); color:#420C74; border:1px solid #E4D3F8; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(32,20,47,.12); cursor:pointer; opacity:0; transition:opacity .2s ease, transform .2s ease; -webkit-tap-highlight-color:transparent; }
.gal-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.gal-nav:active{ transform:translateY(-50%) scale(.96); }
.gal-nav.prev{ left:.625rem; }
.gal-nav.next{ right:.625rem; }
#p-gallery:hover .gal-nav, .gal-nav.force-visible{ opacity:1; }
@media (hover:none){ .gal-nav{ opacity:1; } }
.gal-count{ position:absolute; top:.625rem; right:.625rem; z-index:15; background:rgba(32,20,47,.55); color:#fff; font-size:11px; font-weight:700; padding:.25rem .6rem; border-radius:9999px; }
.gal-main-touch{ touch-action:pan-y; user-select:none; -webkit-user-select:none; }

/* ---- Lightbox ---- */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(15,5,25,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; animation:lbIn .2s ease; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img.lb-img{ max-width:min(92vw,1000px); max-height:min(86vh,760px); object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb-count{ position:absolute; top:1rem; left:50%; transform:translateX(-50%); color:#fff; font-size:12px; font-weight:700; background:rgba(255,255,255,.14); padding:.35rem .8rem; border-radius:9999px; z-index:10; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:3rem; height:3rem; border-radius:9999px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; -webkit-tap-highlight-color:transparent; }
.lb-btn:hover{ background:rgba(255,255,255,.24); }
.lb-btn.prev{ left:1rem; }
.lb-btn.next{ right:1rem; }
.lb-close{ position:absolute; top:.9rem; right:1rem; z-index:10; width:2.5rem; height:2.5rem; border-radius:9999px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; -webkit-tap-highlight-color:transparent; }
.lb-close:hover{ background:rgba(255,255,255,.24); }
@media (max-width:640px){
  .lb-btn{ width:2.5rem; height:2.5rem; }
  .lb-btn.prev{ left:.5rem; }
  .lb-btn.next{ right:.5rem; }
}



/* ---- 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); }
}