/*
 * Structural guard, ne vzhled.
 *
 * Komponenty přepínají větve přes atribut `hidden` (UA styl, nepotřebuje CSS
 * eshopu). Jakákoli `display` utilita konzumenta ho ale přebije — Tailwind
 * `flex`, `grid`, `inline-flex` mají vyšší specificitu než UA styl.
 *
 * Bez tohoto pravidla by byly vidět dvě větve zároveň a invariant „právě jedna
 * viditelná" by závisel na disciplíně každého z 5 eshopů.
 *
 * Kopíruje ho `api-js:sync` v konzumentovi se všemi komponentami.
 */
[hidden] {
  display: none !important;
}

/*
 * `<product-gallery>` (#275, Rozhodnutí 9) — mechanika posunu je PODMÍNKA
 * chování, ne vzhled: kdyby ji psal hostitel, má pět eshopů pět kopií a každá
 * chyba v nich rozbije kruh tiše. Poměr stran, rámeček a barvy zůstávají
 * hostiteli; `overflow-x` ani `display` na [data-track] přebíjet nesmí
 * (runtime self-check to ohlásí).
 */
product-gallery [data-track] {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
product-gallery [data-track]::-webkit-scrollbar {
  display: none;
}
product-gallery [data-track] > [data-slide] {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Animace a tažení vedou posun samy; snap by každý mezikrok „přitáhl" zpět. */
product-gallery[data-moving] [data-track] {
  scroll-snap-type: none;
}
product-gallery[data-moving='drag'] {
  user-select: none;
}
product-gallery img {
  -webkit-user-drag: none;
}