/* Custom CSS — used only where Tailwind utilities can't express the design
   (hero stripe texture, cross-fade slides, scrollbars, form chrome). */

:root {
  --ink: #0C1524;
  --navy: #14427A;
  --bright: #2266C4;
  --amber: #E39A28;
  --cream: #F6F4EE;
  --hairline: #DFDBD0;
  --muted: #6B7268;
  --muted-2: #8A9187;
}

/* No overflow-x is set on html/body: setting it while overflow-y stays
   "visible" makes the browser silently compute overflow-y as "auto" too
   (CSS overflow interaction rule), turning body into its own scroll
   container instead of the viewport — which breaks position:sticky for
   the header. There is no real horizontal overflow in this layout
   (verified via scrollWidth === innerWidth), so this guard isn't needed. */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  text-wrap: pretty;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

::placeholder {
  color: #9AA096;
}

input[type="range"] {
  accent-color: var(--navy);
}

/* Diagonal stripe texture used behind the hero slides */
.hero-stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 26px);
  pointer-events: none;
}

/* Section fade-up entrance, mirrors the reference's umpUp keyframe */
@keyframes ump-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.animate-ump-up {
  animation: ump-up .5s ease both;
}

/* Slim, unobtrusive horizontal scrollbars for tab rows / order tracker */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 99px;
}

/* Below desktop, hint that horizontally-scrollable rows (PDP tabs, order
   tracker) continue past the edge. Scoped to <1024px only so desktop,
   where these rows already fit without scrolling, is never touched. */
@media (max-width: 1023px) {
  .scroll-fade-x {
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
}

/* Native accordion chevron removed so we can draw our own +/- indicator */
details.faq-item > summary {
  list-style: none;
}

details.faq-item > summary::-webkit-details-marker {
  display: none;
}

details.faq-item > summary .faq-sign::before {
  content: "+";
}

details.faq-item[open] > summary .faq-sign::before {
  content: "\2212";
}

/* Product image placeholder texture (stands in for real photography) */
.photo-placeholder {
  background: linear-gradient(140deg, #EDEAE2, #DDE3EC);
}

[x-cloak] {
  display: none !important;
}