/* SPOKI shared horizontal-rail indicator styles. v1 2026-07-21.
   Single visual owner: kills the native (WebKit/Firefox) scrollbar on adopted rails
   so only the custom .spoki-hscroll-progress track shows. Paired with spoki-hscroll.js
   (adds .spoki-hscroll + .spoki-hscroll--custom). Enqueued after pilot-system so the
   body.spoki-ds override wins. Rollback: delete this file + its enqueue line. */

/* 1. Native scrollbar OFF on adopted custom rails (all engines) */
.spoki-hscroll.spoki-hscroll--custom{
  scrollbar-width:none !important;
  scrollbar-color:transparent transparent !important;
  -ms-overflow-style:none;
}
.spoki-hscroll.spoki-hscroll--custom::-webkit-scrollbar{
  display:none !important; width:0 !important; height:0 !important; background:transparent !important;
}
/* Beat spoki-pilot-system.css teal ::-webkit-scrollbar (body.spoki-ds #main-content .rail).
   Adding the owner class raises specificity above the original chain. */
body.spoki-ds #main-content .spk-brands__row.spoki-hscroll--custom::-webkit-scrollbar,
body.spoki-ds #main-content .spoki-gift-age__grid.spoki-hscroll--custom::-webkit-scrollbar,
body.spoki-ds #main-content .spoki-cat__tabs.spoki-hscroll--custom::-webkit-scrollbar,
body.spoki-ds #main-content .spoki-category-circles__grid.spoki-hscroll--custom::-webkit-scrollbar{
  display:none !important; width:0 !important; height:0 !important; background:transparent !important;
}

/* 2. Homepage age peek: 2 full cards + ~20% of the third, container-relative so it
   holds at every mobile width. Overrides style.css .spoki-gift-age__item{flex:0 0 44vw}
   only on the homepage; spoki-ds/brand variants untouched. */
@media (max-width:767px){
  body.home .spoki-gift-age__item{
    flex:0 0 calc((100% - 30px) / 2.27) !important;
    max-width:calc((100% - 30px) / 2.27) !important;
  }
}

/* Homepage category-circles: stronger peek (2 full + ~40% of third) so it clearly
   invites scroll. Fixed image tiles, so safe to width-constrain (unlike text pills). */
@media (max-width:767px){
  body.home .spoki-category-circles__tile{
    flex:0 0 calc((100% - 28px) / 2.3) !important;
    max-width:calc((100% - 28px) / 2.3) !important;
  }
}

/* spoki-ds pages: pilot-system sets standard scrollbar-width:thin + teal color at
   body.spoki-ds #main-content specificity, beating the plain .--custom rule.
   Match that chain so the STANDARD native bar dies too (webkit already handled). */
body.spoki-ds #main-content .spk-brands__row.spoki-hscroll--custom,
body.spoki-ds #main-content .spoki-gift-age__grid.spoki-hscroll--custom,
body.spoki-ds #main-content .spoki-cat__tabs.spoki-hscroll--custom,
body.spoki-ds #main-content .spoki-category-circles__grid.spoki-hscroll--custom,
body.spoki-ds #main-content .spoki-skills3__rail.spoki-hscroll--custom,
body.spoki-ds #main-content .spoki-prail.spoki-hscroll--custom{
  scrollbar-width:none !important;
  scrollbar-color:transparent transparent !important;
}