/* Light animations. All are disabled automatically for people who prefer reduced motion. */
@keyframes gs-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gs-pop { 0% { opacity: 0; transform: scale(.85); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes gs-check { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes gs-ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 100% { box-shadow: 0 0 0 22px rgba(16,185,129,0); } }
@keyframes gs-bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.5); } }
@keyframes gs-ripple { to { transform: scale(3.2); opacity: 0; } }
@keyframes gs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* page change */
main > section:not(.hidden) { animation: gs-fade-up .38s ease both; }

/* buttons: press + lift */
button, a[class*="rounded"] { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
button:not(:disabled):hover, a[class*="bg-"]:hover { transform: translateY(-1px); }
button:not(:disabled):active, a[class*="bg-"]:active { transform: scale(.96); }

/* cards: soft lift when the mouse is over them */
main .bg-white.rounded-3xl, main .bg-white.rounded-2xl { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) {
  main .bg-white.rounded-3xl:hover, main .bg-white.rounded-2xl:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(67,56,202,.25); border-color: #c7d2fe; }
}

/* order success */
#order-success-modal:not(.hidden) { animation: gs-fade-up .25s ease both; }
#order-success-modal:not(.hidden) > div { animation: gs-pop .45s cubic-bezier(.2,.9,.3,1.2) both; }
#order-success-modal:not(.hidden) > div > div:first-child { animation: gs-check .6s .15s cubic-bezier(.2,.9,.3,1.3) both, gs-ring 1.4s .5s ease-out 2; }

/* cart badge bump (class added by script) */
.gs-bump { animation: gs-bump .4s ease; }

/* WhatsApp button gentle float */
#wa-float { animation: gs-float 3s ease-in-out infinite; }

/* ripple on click (span added by script) */
.gs-rip { position: relative; overflow: hidden; }
.gs-rip > .gs-ripple { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: gs-ripple .55s ease-out forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Small phones: keep the header inside the screen (cart is in the bottom bar) and never scroll sideways */
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 639px) {
  #lang-select { max-width: 4.9rem; padding-left: .35rem; padding-right: .2rem; }
  #currency-select { max-width: 4.6rem; padding-left: .35rem; padding-right: .2rem; }
  #brand-name { font-size: 15px; }
  #wa-float { right: .75rem; }
}