/* Small layer of CSS that Tailwind utilities don't cover well */

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* Never let anything (e.g. off-canvas panels) widen the page on phones */
html, body { overflow-x: clip; }
/* `hidden` must win over Tailwind's display utilities (flex, grid…) on closed panels */
[hidden] { display: none !important; }
body { font-feature-settings: "tnum" 0; }
.tabular { font-variant-numeric: tabular-nums; }

/* Skip link */
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; }
.skip-link:focus { top: 1rem; }

/* Visible focus ring everywhere */
:focus-visible { outline: 2px solid #86652F; outline-offset: 3px; border-radius: 6px; }

/* Announcement ticker — moves rightward so Hebrew sentences enter from their start */
.ticker-track { animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker[data-paused="true"] .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* Hide scrollbar on pill row but keep it scrollable */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Pills fade-out edge hint */
.pill-fade { mask-image: linear-gradient(to left, #000 88%, transparent); }

/* Intro reveal (home hero) */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* Product card image swap */
.card-img-2 { opacity: 0; transition: opacity .45s ease; }
@media (hover: hover) {
  .product-card:hover .card-img-2 { opacity: 1; }
  .product-card:hover .card-img-1 { transform: scale(1.03); }
}
.card-img-1 { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

/* Drawers */
.drawer { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.drawer[data-open="false"] { transform: translateX(100%); }   /* off-screen to the right (RTL start) */
.drawer[data-open="true"]  { transform: translateX(0); }
.overlay { transition: opacity .25s ease; }
.overlay[data-open="false"] { opacity: 0; pointer-events: none; }
.overlay[data-open="true"]  { opacity: 1; }

/* Dropdown panels */
/* uses the individual `translate` property so Tailwind's transform-based centering still applies */
.dropdown { transition: opacity .18s ease, translate .18s ease, visibility .18s; }
.dropdown[data-open="false"] { opacity: 0; translate: 0 -6px; pointer-events: none; visibility: hidden; }
.dropdown[data-open="true"]  { opacity: 1; translate: 0 0; visibility: visible; }

/* Toast */
.toast { transition: opacity .25s ease, transform .25s ease; }
.toast[data-show="false"] { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}