/* ═══ CUSTOM SCROLLBAR — Follow Nutrition brand ═══ */
/* Desktop only — mobile keeps native */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {

  /* Firefox */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--terracota) rgba(46,44,42,.06);
  }

  /* WebKit / Blink */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background:
      linear-gradient(
        to bottom,
        rgba(241,233,220,.35) 0%,
        rgba(251,247,241,.6) 50%,
        rgba(241,233,220,.35) 100%
      );
    border-left: 1px solid rgba(46,44,42,.06);
  }

  ::-webkit-scrollbar-thumb {
    background:
      linear-gradient(
        180deg,
        #E89A7F 0%,
        var(--terracota) 45%,
        var(--terracota-dark) 100%
      );
    border-radius: 100px;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -1px 0 rgba(0,0,0,.08),
      0 0 0 1px rgba(196,117,89,.18);
    transition: background .25s;
  }

  ::-webkit-scrollbar-thumb:hover {
    background:
      linear-gradient(
        180deg,
        var(--terracota) 0%,
        var(--terracota-dark) 100%
      );
    background-clip: padding-box;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      0 0 0 1px rgba(196,117,89,.35),
      0 0 12px rgba(220,139,114,.45);
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--terracota-dark);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Scoped override: dark sections get a lighter thumb so it reads on grafite */
  .r10::-webkit-scrollbar-thumb,
  .vs::-webkit-scrollbar-thumb,
  .founder::-webkit-scrollbar-thumb {
    background:
      linear-gradient(180deg, #F1B79A 0%, var(--terracota) 100%);
    background-clip: padding-box;
  }
}