/* «חיצים» (theme.categoryArrows, app/category-arrows.js): ‹ › beside the
   category row while it scrolls sideways. #shop.has-cat-arrows is set only
   then, so a row that fits, a side list, a bento or the tiles grid never
   draws them. They sit beside #navScroll, never over a tile or «סינון». */
.cat-arrow{display:none;}
#shop.has-cat-arrows{display:flex; align-items:center; justify-content:center; gap:4px; padding-inline:8px;}
#shop.has-cat-arrows > #navScroll{flex:1 1 0; min-width:0; margin-inline:0; padding-inline:4px; scroll-padding-inline:4px;}
#shop.has-cat-arrows.has-tag-filter > .tag-filter{padding-inline-start:4px;}
/* The deals strip's arrow (theme.css .deals-arrow): the same circle, ground,
   ink, border and shadow, here in the flow instead of over the cards. */
#shop.has-cat-arrows > .cat-arrow{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; padding:0; margin-block-end:8px; cursor:pointer;
  border-radius:99px;
  border:1px solid rgba(31,77,58,.18);
  border:1px solid color-mix(in srgb, var(--primary, #1F4D3A) 18%, transparent);
  background:var(--paper); color:var(--accent-deep);
  box-shadow:0 10px 22px -12px rgba(11,66,48,.7);
}
.cat-arrow svg{width:20px; height:20px;}
/* Its end reached: off and out of sight, its room kept so nothing moves. */
#shop.has-cat-arrows > .cat-arrow.is-end{visibility:hidden;}
.cat-arrow:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
@media (prefers-reduced-motion: no-preference){
  html:not([data-a11y-motion="1"]):not([data-motion="off"]) .cat-arrow:active{transform:scale(0.92);}
}
/* A touch screen: a 44px target. */
@media (pointer:coarse){
  #shop.has-cat-arrows > .cat-arrow{width:44px; height:44px;}
}
@media (max-width:640px){
  #shop.has-cat-arrows{gap:2px; padding-inline:4px;}
  #shop.has-cat-arrows > #navScroll{padding-inline:2px; scroll-padding-inline:2px;}
}
/* The chevrons point the reading way (prev toward the start). */
[dir="ltr"] .cat-arrow svg, html.translated-ltr .cat-arrow svg{transform:scaleX(-1);}
html[data-a11y-contrast="1"] #shop.has-cat-arrows > .cat-arrow{
  background:#ffffff !important; color:#111111 !important;
  border:2px solid #111111 !important; box-shadow:none !important;
}