/* Storefront visual polish — shared across all customer-facing pages */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth, subtle motion on anything interactive */
a, button, .pill, input, select, textarea {
  transition: all 0.15s ease;
}
button:active, a:active {
  transform: scale(0.97);
}

/* Cards: give bordered blocks a soft resting shadow, and lift them slightly on hover
   when they're clearly clickable (wrapped in an <a>) */
.border.rounded-2xl, .border.rounded-xl {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
a.border.rounded-2xl:hover, a.border.rounded-xl:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Primary buttons get a touch more depth and a gentle hover lift */
.bg-black, .bg-primary {
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
button.bg-black:hover, button.bg-primary:hover, a.bg-black:hover, a.bg-primary:hover {
  filter: brightness(1.1);
}

/* Inputs: clearer focus ring, softer default border */
input, select, textarea {
  border-color: #e5e7eb;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Product image containers: subtle zoom on hover for a premium feel */
.aspect-square, .aspect-video {
  overflow: hidden;
}
a:hover .aspect-square img, a:hover .aspect-video img {
  transform: scale(1.04);
}
.aspect-square img, .aspect-video img {
  transition: transform 0.3s ease;
}

/* Pills: crisper active state */
.pill {
  font-weight: 500;
}
.pill.active {
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Section headings used throughout the storefront */
.section-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Skeleton shimmer (used by shimmerCards on the homepage) gets a moving sheen
   instead of a flat pulse, which reads as more "loading" than "broken" */
.animate-pulse {
  animation: none;
  position: relative;
  overflow: hidden;
  background: #eef0f2;
}
.animate-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer-sweep 1.4s infinite;
}
@keyframes shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Scrollbars on horizontal rows (trending, new arrivals, etc.) stay invisible
   but keep working — cleaner than the browser default */
.overflow-x-auto::-webkit-scrollbar { height: 0; }
.overflow-x-auto { scrollbar-width: none; }