/* v0.1.7 - Mobile bestseller native horizontal scrolling */

@media (max-width: 760px) {
  .product-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: grab !important;
    padding-inline: 18px !important;
  }

  .product-viewport::-webkit-scrollbar {
    display: none !important;
  }

  /* Disable the v0.1.6 transform marquee: movement now uses real scrollLeft. */
  .product-track.is-mobile-marquee,
  .product-track {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .product-track .product-card {
    flex: 0 0 min(78vw, 300px) !important;
    scroll-snap-align: none !important;
  }
}

/* v0.1.9 - Pinuts premium food / wellness visual system
   Production palette: cream + cocoa + antique gold + burnt orange,
   with olive reserved for health / trust accents. */
:root {
  --bg: #F7F0E3;
  --panel: #FFF9F0;
  --panel-2: #F1E5D3;
  --text: #3B2A1E;
  --muted: #756354;
  --line: rgba(59, 42, 30, .14);
  --gold: #B8873B;
  --gold-2: #8E652E;
  --gold-text-gradient: linear-gradient(135deg, #8E652E 0%, #B8873B 34%, #D9B875 55%, #B8873B 72%, #8E652E 100%);
  --pinuts-cream: #F7F0E3;
  --pinuts-ivory: #FFF9F0;
  --pinuts-cocoa: #3B2A1E;
  --pinuts-cocoa-soft: #5A4637;
  --pinuts-gold: #B8873B;
  --pinuts-orange: #9F4E22;
  --pinuts-orange-hover: #7E3D1B;
  --pinuts-olive: #5D6B45;
}

html,
body,
.latest-videos,
.tiktok-shop {
  background: var(--pinuts-cream) !important;
  color: var(--pinuts-cocoa) !important;
}

::selection {
  background: rgba(184, 135, 59, .28) !important;
  color: var(--pinuts-cocoa) !important;
}

:focus-visible {
  outline: 3px solid var(--pinuts-gold) !important;
  outline-offset: 3px;
}

.site-header {
  background: linear-gradient(180deg, rgba(247, 240, 227, .97), rgba(247, 240, 227, .78)) !important;
  border-bottom-color: rgba(59, 42, 30, .08) !important;
}

.site-header.is-scrolled {
  background: rgba(247, 240, 227, .94) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 28px rgba(59, 42, 30, .06);
}

.brand {
  color: var(--pinuts-cocoa) !important;
}

.brand span,
.eyebrow,
.section-index,
.review .stars,
.reviews-title .stars,
.hero-caption span {
  color: var(--pinuts-gold) !important;
}

.nav {
  color: var(--pinuts-cocoa-soft) !important;
}

.nav a:hover,
.footer-links a:hover {
  color: var(--pinuts-orange) !important;
}

.header-cta,
.button-primary {
  border-color: var(--pinuts-orange) !important;
  background: var(--pinuts-orange) !important;
  color: var(--pinuts-ivory) !important;
  box-shadow: 0 8px 24px rgba(159, 78, 34, .14);
}

.header-cta:hover,
.button-primary:hover {
  border-color: var(--pinuts-orange-hover) !important;
  background: var(--pinuts-orange-hover) !important;
  color: var(--pinuts-ivory) !important;
}

.button-outline {
  border-color: rgba(159, 78, 34, .42) !important;
  color: var(--pinuts-cocoa) !important;
}

.button-outline:hover {
  border-color: var(--pinuts-orange) !important;
  background: rgba(159, 78, 34, .07) !important;
}

.text-link {
  color: var(--pinuts-cocoa-soft) !important;
  border-bottom-color: rgba(159, 78, 34, .36) !important;
}

.hero h1,
.section h2,
.story-kicker p,
.product-card h3,
.price strong,
.final-inner h2,
.tiktok-panel h2 {
  color: var(--pinuts-cocoa) !important;
}

.hero h1 em,
.section h2 em {
  color: var(--pinuts-gold) !important;
}

.hero-lead,
.story-copy > p,
.section-heading > p,
.products-footer p,
.tiktok-panel > div > p:not(.handle),
.video-stage-copy p,
.review figcaption,
.site-footer p,
.footer-links,
.handle {
  color: var(--pinuts-cocoa-soft) !important;
}

.hero-trust,
.product-meta,
.review figcaption small,
.site-footer small {
  color: #806F61 !important;
}

.hero-trust span::before {
  background: var(--pinuts-olive) !important;
}

.hero-ring {
  border-color: rgba(184, 135, 59, .34) !important;
  box-shadow: inset 0 0 100px rgba(184, 135, 59, .08), 0 0 110px rgba(184, 135, 59, .05) !important;
}

.hero-ring::before {
  border-color: rgba(184, 135, 59, .18) !important;
}

.hero-wordmark {
  color: rgba(59, 42, 30, .035) !important;
}

.founder-photo {
  filter: saturate(.96) contrast(1.02) brightness(1.03) sepia(.035) drop-shadow(0 28px 48px rgba(59, 42, 30, .18)) !important;
}

.hero-visual::after {
  background: radial-gradient(ellipse at center, rgba(184, 135, 59, .16), transparent 66%) !important;
}

.hero-caption {
  background: rgba(255, 249, 240, .82) !important;
  border-color: rgba(184, 135, 59, .28) !important;
  box-shadow: 0 12px 32px rgba(59, 42, 30, .08);
}

.hero-caption p {
  color: var(--pinuts-cocoa-soft) !important;
}

.story,
.products,
.reviews,
.latest-videos,
.tiktok-shop,
.site-footer,
.hero::after,
.story-kicker,
.products-footer,
.review-list,
.review,
.story-marquee {
  border-color: var(--line) !important;
}

.story-marquee {
  color: #8A796B !important;
  background: rgba(255, 249, 240, .42);
}

.story-marquee i {
  color: var(--pinuts-gold) !important;
}

.product-card {
  background: var(--pinuts-ivory) !important;
  border-color: rgba(59, 42, 30, .12) !important;
  box-shadow: 0 10px 30px rgba(59, 42, 30, .05);
}

.product-card:hover {
  border-color: rgba(184, 135, 59, .48) !important;
  box-shadow: 0 18px 42px rgba(59, 42, 30, .10);
}

.product-card figure {
  background: #F1E7D8 !important;
}

.product-card figure::after {
  background: linear-gradient(180deg, transparent 62%, rgba(59, 42, 30, .12)) !important;
}

.product-card img {
  filter: saturate(.94) contrast(1.02) brightness(1.02) !important;
}

.product-card:hover img {
  filter: saturate(1.02) contrast(1.03) brightness(1.04) !important;
}

.product-meta b,
.price strong {
  color: var(--pinuts-orange) !important;
}

.price del {
  color: #8C7A6C !important;
}

.carousel-button {
  border-color: rgba(159, 78, 34, .34) !important;
  background: rgba(255, 249, 240, .92) !important;
  color: var(--pinuts-orange) !important;
  box-shadow: 0 8px 24px rgba(59, 42, 30, .08);
}

.carousel-button:hover {
  background: var(--pinuts-orange) !important;
  border-color: var(--pinuts-orange) !important;
  color: var(--pinuts-ivory) !important;
}

.review blockquote {
  color: var(--pinuts-cocoa) !important;
}

.video-stage,
.tiktok-panel {
  background: var(--pinuts-ivory) !important;
  border-color: rgba(184, 135, 59, .22) !important;
  box-shadow: 0 14px 38px rgba(59, 42, 30, .06);
}

.tiktok-wrap {
  background: #EFE4D4 !important;
  color-scheme: light !important;
}

.tiktok-symbol {
  -webkit-text-stroke-color: rgba(184, 135, 59, .42) !important;
  filter: drop-shadow(0 0 45px rgba(184, 135, 59, .10)) !important;
}

.final-cta {
  position: relative;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  z-index: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,249,240,.88), rgba(241,229,211,.58));
  border: 1px solid rgba(184, 135, 59, .18);
}

.final-inner {
  position: relative;
  z-index: 1;
}

.final-inner > p {
  color: var(--pinuts-olive) !important;
}

.site-footer {
  color: var(--pinuts-cocoa) !important;
}

.site-footer small strong {
  color: var(--pinuts-gold) !important;
}

@media (max-width: 760px) {
  .site-header {
    background: rgba(247, 240, 227, .96) !important;
  }

  .hero-caption {
    background: rgba(255, 249, 240, .90) !important;
  }

  .final-cta::before {
    inset: 7% 0;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}