body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa;
}

.hero {
  padding: 3rem 0;
}

.product-card img {
  max-width: 100%;
  height: auto;
}

.card-price {
  font-weight: 700;
}

.content img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-weight: bolder;
  font-size: x-large;
}

h2 {
  font-weight: bold;
  font-size: larger;
}

h3 {
  font-weight: bold;
  font-size: large;
}

p > a {
  color: darkgoldenrod;
}

/* Image slider product page */
.slider {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar {
  display: none;
}
.slide {
  scroll-snap-align: center;
}
.max-h-min-70v {
  max-height: min(70vh, 70vw);
  @media (width < 48rem) {
    max-height: min(90vh, 90vw);
  }
}
.max-w-min-70v {
  max-width: min(70vh, 70vw);
  @media (width < 48rem) {
    max-width: min(90vh, 90vw);
  }
}


/* landing page image gallery */
/* top/bottom fade overlays use gradient to transparent */
.fade-top,
.fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 10vh;              /* fade size - adjust */
  pointer-events: none;
  z-index: 20;
}
.fade-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  /* If dark background, switch to rgba(0,0,0,1) */
}
.fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
/* Optionally vary more for 3-step staggering */
.staggered-cols > a:nth-child(2n+1) {
  --stagger-offset: 0%; /* default; overridden by nth-child rules below */
  animation-name: floatY2;
  animation-duration: 240s;      /* total loop time */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.staggered-cols > a:nth-child(2n) {
  --stagger-offset: -200%; /* default; overridden by nth-child rules below */
  animation-name: floatY1;
  animation-duration: 240s;      /* total loop time */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* animation timing — adjust duration, easing, and distance */

@keyframes floatY1 {
  0%   { transform: translate3d(   0vh, var(--stagger-offset, 0), 0); }
  50%  { transform: translate3d( -50vh, calc(var(--stagger-offset, 0) + 100%), 0); }
  100% { transform: translate3d(-100vh, calc(var(--stagger-offset, 0) + 200%), 0); }
}
@keyframes floatY2 {
  0%   { transform: translate3d(   0vh, var(--stagger-offset, 0), 0); }
  50%  { transform: translate3d( -50vh, calc(var(--stagger-offset, 0) - 100%), 0); }
  100% { transform: translate3d(-100vh, calc(var(--stagger-offset, 0) - 200%), 0); }
}