input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@keyframes fade-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to   { background-color: rgba(0, 0, 0, 0.8); }
}

@keyframes fade-out {
  from { background-color: rgba(0, 0, 0, 0.8); }
  to   { background-color: rgba(0, 0, 0, 0); }
}

@keyframes slide-in {
  from { transform: translateX(500px); }
  to   { transform: translateX(0px); }
}

@keyframes slide-out {
  from { transform: translateX(0px); }
  to   { transform: translateX(500px); }
}

@keyframes dialog-in {
  from { opacity: 0; scale: 50%; }
  to   { opacity: 1; scale: 100%; }
}

@keyframes dialog-out {
  from { opacity: 1; scale: 100%; }
  to   { opacity: 0; scale: 50%; }
}

body.cart-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

#cart-drawer[data-state="open"]       { animation: fade-in 0.4s forwards; }
#cart-drawer[data-state="closed"]     { animation: fade-out 0.4s forwards; }
#cart-drawer[data-state="open"] > div { animation: slide-in 0.4s forwards; }
#cart-drawer[data-state="closed"] > div { animation: slide-out 0.4s forwards; }

.dialog[data-state="open"]       { animation: fade-in 0.4s forwards; }
.dialog[data-state="closed"]     { animation: fade-out 0.4s forwards; }
.dialog[data-state="open"] > div { animation: dialog-in 0.2s forwards; }
.dialog[data-state="closed"] > div { animation: dialog-out 0.2s forwards; }

.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}

.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.grid-background {
  background-image: linear-gradient(to right,hsla(0,0%,100%,.03) 1px,transparent 1px),linear-gradient(to bottom,hsla(0,0%,100%,.03) 1px,transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 85% at 40% 30%, #000 0%, #fff0 110%);
}

.custom-bg-mask {
  mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}

/* Global site scrollbar — themed with the store colors */
html {
  scrollbar-width: auto;
  scrollbar-color: hsl(var(--primary)) hsl(var(--secondary) / 0.12);
}
::-webkit-scrollbar       { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: hsl(var(--secondary) / 0.12); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--secondary)));
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* Slim scrollbar for compact dropdowns (search, sidebar, dialogs) */
.custom-scrollbar::-webkit-scrollbar       { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--primary)); border-radius: 9999px; }

.cat-dropdown {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.cat-dropdown:not(.hidden) {
  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

#mobile-categories-dropdown:not(.hidden) {
  animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInMobile {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-subcategories:not(.hidden) {
  animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInSub {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Generic stagger animations - used across pages */
@keyframes stagger-rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.stagger-rise{opacity:0;animation:stagger-rise .6s cubic-bezier(.16,.84,.44,1) forwards}

@keyframes fp-rise { from{opacity:0;transform:translateY(22px);filter:blur(4px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
.fp-rise{opacity:0;animation:fp-rise .7s cubic-bezier(.16,.84,.44,1) forwards}

.delay-1{animation-delay:.05s}
.delay-2{animation-delay:.13s}
.delay-3{animation-delay:.21s}
.delay-4{animation-delay:.29s}
.delay-5{animation-delay:.37s}
.delay-6{animation-delay:.45s}

.fp-d1{animation-delay:.07s}.fp-d2{animation-delay:.16s}.fp-d3{animation-delay:.25s}.fp-d4{animation-delay:.34s}

/* Featured products + reviews (homepage components) */
@keyframes fp-live-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fp-shine{0%{transform:translateX(-140%)}60%,100%{transform:translateX(280%)}}

#fp-grid{min-height:20rem;transition:opacity .2s ease}
#fp-grid.fp-loading{opacity:.4;pointer-events:none}

.fc-skel{border-radius:1.25rem;overflow:hidden;background:hsl(var(--card));border:1px solid hsl(var(--border))}
.fc-skel-img{aspect-ratio:4/3;background:linear-gradient(90deg,hsl(var(--muted)),hsl(var(--muted-solid)/.5),hsl(var(--muted)));background-size:200%;animation:fc-skel-anim 1.4s ease-in-out infinite}
.fc-skel-body{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.35rem}
.fc-skel-line{height:.55rem;border-radius:9999px;background:hsl(var(--muted))}
@keyframes fc-skel-anim{0%{background-position:200%}100%{background-position:-200%}}

.fc-card{
  display:flex;flex-direction:column;
  border-radius:1.25rem;overflow:hidden;
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  box-shadow:0 2px 16px -6px hsl(var(--primary)/.1);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease;
  text-decoration:none;color:inherit;position:relative;
}
.fc-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -12px hsl(var(--primary)/.28);border-color:hsl(var(--primary)/.5)}

.fc-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:hsl(var(--muted));flex-shrink:0}
.fc-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.fc-card:hover .fc-img{transform:scale(1.07)}

.fc-badge-off{
  position:absolute;top:.65rem;left:.65rem;z-index:10;
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.28rem .65rem;border-radius:9999px;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--secondary)));
  color:white;font-size:.72rem;font-weight:800;letter-spacing:.03em;
  box-shadow:0 4px 14px -4px hsl(var(--primary)/.6);
}
.fc-badge-scarce{
  position:absolute;top:.65rem;right:.65rem;z-index:10;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .55rem;border-radius:9999px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1px solid rgba(239,68,68,.4);
  color:rgb(252,165,165);font-size:.62rem;font-weight:700;
}
.fc-scarce-dot{width:.38rem;height:.38rem;border-radius:9999px;background:rgb(239,68,68);animation:fp-live-pulse 1s ease-in-out infinite;flex-shrink:0}

.fc-soldout-overlay{
  position:absolute;inset:0;z-index:15;
  display:flex;align-items:center;justify-content:center;
  background:hsl(var(--foreground)/.5);backdrop-filter:blur(3px);
}
.fc-soldout-overlay span{
  background:hsl(var(--foreground));color:hsl(var(--background));
  padding:.3rem 1rem;border-radius:9999px;
  font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}

.fc-body{display:flex;flex-direction:column;flex:1;padding:.7rem .8rem;gap:.35rem}
.fc-name{font-size:1.05rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:hsl(var(--foreground))}

.fc-pricing{display:flex;flex-direction:column;gap:.1rem}
.fc-price-before{font-size:.72rem;text-decoration:line-through;color:hsl(var(--muted-foreground))}
.fc-price-now{font-size:1.3rem;font-weight:800;line-height:1;color:hsl(var(--primary))}
.fc-price-plus{font-size:.9rem;font-weight:700}

.fc-cta{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  height:2.35rem;border-radius:9999px;
  font-weight:700;font-size:.82rem;color:white;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--secondary)));
  box-shadow:0 6px 18px -6px hsl(var(--primary)/.45);
  margin-top:auto;position:relative;overflow:hidden;
  transition:filter .25s ease,box-shadow .25s ease;
}
.fc-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-140%);animation:fp-shine 3.6s ease-in-out infinite;
}
.fc-card:hover .fc-cta{filter:brightness(1.09);box-shadow:0 12px 28px -8px hsl(var(--primary)/.55)}
.fc-cta-disabled{background:hsl(var(--muted)) !important;color:hsl(var(--muted-foreground)) !important;box-shadow:none !important;pointer-events:none}
.fc-cta-disabled::after{display:none}

@media(prefers-reduced-motion:reduce){
  .fp-rise,.stagger-rise,.fc-cta::after,.fc-skel-img,.fc-scarce-dot{animation:none!important}
  .fp-rise,.stagger-rise{opacity:1}
}