/* Small extras beyond the Tailwind CDN */

/* Arabic gets its native face */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", Karla, sans-serif; }
html[lang="ar"] .font-display { letter-spacing: 0; } /* serif tracking looks off in AR */

html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #B01A6B; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Categories dropdown (>4 categories) ---- */
/* Hover reveal: showing the panel on hover of the wrapper. JS adds
   click-toggle, Escape, and outside-click for touch/keyboard users.
   The chevron flips when open (hover or JS-set aria-expanded). */
#cat-dropdown:hover #cat-dropdown-panel,
#cat-dropdown:focus-within #cat-dropdown-panel {
  visibility: visible;
  opacity: 1;
}
#cat-dropdown:hover #cat-dropdown-btn svg,
#cat-dropdown-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- Mobile menu drawer ---- */
/* The panel's slide is handled entirely by Tailwind utilities
   (translate-x-full + transition-transform duration-300) on the element
   itself, so no custom transform rules are needed here. Because the panel
   is anchored to the physical right edge, the same transform is correct in
   both RTL and LTR — no mirroring required. */

/* Body scroll lock while the drawer is open */
html.overflow-hidden, html.overflow-hidden body { overflow: hidden; }

/* ---- Collapsible filter panel (shop.php, mobile) ---- */
/* Native <details>/<summary> needs its default disclosure triangle
   removed cross-browser (Chrome uses a proprietary pseudo-element,
   Firefox uses list-item + ::marker) so only our custom chevron shows. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary .chevron { transform: rotate(180deg); }