/* Shared scrollbar treatment for every La Boda surface.
   Keep the track visually absent and let the theme accent softly identify
   the draggable thumb. Component-level `display:none` rules still hide
   scrollbars for intentional swipe carousels. */
:root{
  --scrollbar-thumb:color-mix(in srgb,var(--accent,#472d20) 26%,transparent);
  --scrollbar-thumb-hover:color-mix(in srgb,var(--accent,#472d20) 42%,transparent);
  --scrollbar-thumb-active:color-mix(in srgb,var(--accent,#472d20) 56%,transparent);
}

:where(*){
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) transparent !important;
}

:where(*)::-webkit-scrollbar{
  width:8px !important;
  height:8px !important;
}

:where(*)::-webkit-scrollbar-track,
:where(*)::-webkit-scrollbar-track-piece,
:where(*)::-webkit-scrollbar-corner{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

:where(*)::-webkit-scrollbar-thumb{
  min-width:28px;
  min-height:28px;
  border:2px solid transparent !important;
  border-radius:var(--radius-pill,999px) !important;
  background:var(--scrollbar-thumb) !important;
  background-clip:padding-box !important;
  box-shadow:none !important;
}

:where(*)::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover) !important;
  background-clip:padding-box !important;
}

:where(*)::-webkit-scrollbar-thumb:active{
  background:var(--scrollbar-thumb-active) !important;
  background-clip:padding-box !important;
}