/* secured theme — product sliders (js/slider.js): a scroll-snap strip of cards.
   5 cards on a wide desktop, 4 on a laptop, 3 on a small desktop, 2 on a tablet, 1.15 on a phone (the next card
   peeks out); .slider--narrow (a narrow column) — 2 / 3 on wide screens. Desktop: square-ish arrows in the section head; phone: dots under the strip. */
.slider { --slider-gap: 1rem; --slider-per: 1.15; position: relative; }
@media (min-width: 640px) { .slider { --slider-gap: 1.5rem; --slider-per: 2; } }
@media (min-width: 1024px) { .slider { --slider-per: 3; } }
@media (min-width: 1280px) { .slider { --slider-per: 4; } }
@media (min-width: 1536px) { .slider { --slider-per: 5; } }
@media (min-width: 1024px) { .slider--narrow { --slider-per: 2; } }
@media (min-width: 1280px) { .slider--narrow { --slider-per: 3; } }

.slider-track {
  display: flex;
  gap: var(--slider-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* room for the card hover lift (-translate-y-1), which the overflow would clip */
  padding: .5rem 2px 1rem;
  margin: -.5rem -2px -1rem;
  outline: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); border-radius: .75rem; outline: none; }

.slider-slide {
  flex: 0 0 calc((100% - (var(--slider-per) - 1) * var(--slider-gap)) / var(--slider-per));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}
.slider-slide > * { flex: 1 1 auto; min-width: 0; }

/* arrows: desktop and tablet only, in the section head */
.slider-nav { display: none; gap: .5rem; }
@media (min-width: 768px) { .slider-nav { display: flex; } }
.slider-arrow {
  display: inline-flex;
  height: 2.5rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, opacity .15s ease;
}
.slider-arrow svg { width: 1rem; height: 1rem; pointer-events: none; }
.slider-arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.slider-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.slider-arrow:disabled { opacity: .35; cursor: default; }

/* dots: phone only, under the strip; each dot is a 28x36 tap target around an 8px mark */
.slider-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-top: .75rem; }
@media (min-width: 768px) { .slider-dots { display: none; } }
.slider-dot {
  position: relative;
  width: 1.75rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.slider-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background: var(--border);
  transform: translate(-50%, -50%);
  transition: width .25s ease, background-color .25s ease;
}
.slider-dot.is-active::before { width: 1.25rem; background: var(--primary); }
.slider-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: .5rem; }

/* everything fits — no controls */
.slider.is-static .slider-nav,
.slider.is-static .slider-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
  .slider-dot::before { transition: none; }
}


/* home reviews: a slider with dots on a phone, a plain 3-column grid from 768px */
.rev-card {
  display: flex; flex-direction: column; width: 100%;
  padding: 1.5rem; border-radius: .5rem;
  background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 8%, transparent);
}
.rev-card__who { display: flex; align-items: center; gap: .75rem; }
.rev-card__avatar {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground); font-size: .875rem; font-weight: 700;
}
.rev-card__name { margin: 0; font-size: .9375rem; font-weight: 600; }
.rev-card__date { margin: .125rem 0 0; font-size: .8125rem; color: var(--muted-foreground); }
.rev-card__stars { display: flex; gap: .125rem; margin-top: 1rem; color: var(--primary); }
.rev-card__stars svg { width: .95rem; height: .95rem; }
.rev-card__stars .is-on { fill: currentColor; }
.rev-card__stars .is-off { color: var(--border); }
.rev-text {
  margin: 1rem 0 0; font-size: .9375rem; line-height: 1.65; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.rev-card__product { display: block; margin-top: auto; padding-top: 1.25rem; font-size: .8125rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.rev-card__product:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .slider--reviews .slider-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; }
  .slider--reviews .slider-slide { flex: none; }
}