/* ─── נגישות — רכיב עזר (02.08.2026) ───
   נטען אוטומטית מ-styles/pages/. */

/* ── דילוג לתוכן ── */
.sa-skip{
  position:absolute;
  inset-inline-start:-9999px;
  inset-block-start:0;
  z-index:100000;
  padding:.85rem 1.4rem;
  font-family:var(--font-body,'Fredoka',system-ui,sans-serif);
  font-size:1rem; font-weight:600;
  color:var(--cream,#FBF6EE);
  background:var(--espresso,#2C1A10);
  border-end-end-radius:12px;
  text-decoration:none;
}
.sa-skip:focus{inset-inline-start:0}

/* ── טבעת מיקוד גלובלית — חובה, ולא להסיר ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold,#C49A4A);
  outline-offset:2px;
  border-radius:4px;
}

/* ── הכפתור הצף ──
   ⛔ 02.08.2026 — היה inset-inline-start, ובאתר RTL זה הפינה הימנית,
      כלומר בדיוק מתחת לכפתור "חזרה למעלה". שני כפתורים באותו מקום.
      עכשיו left פיזי, בדיוק כמו .whatsapp-float ב-assets/components.css
      שנשאר פיזי מאותה סיבה, ומעליו — לא לצידו.
      הוואטסאפ: bottom 1.5rem, גובה 48. כאן: 1.5rem + 48 + 12 מרווח. */
.sa-a11y{
  position:fixed;
  bottom:calc(1.5rem + 60px);
  left:1.5rem;
  z-index:998;                            /* מתחת לוואטסאפ (999), כמו כפתור העלייה */
}
/* בעמודי מוצר הוואטסאפ מוגבה — הכפתור הזה חייב לעלות איתו */
body.has-sticky-buy .sa-a11y{bottom:calc(1.2rem + 44px + env(safe-area-inset-bottom) + var(--sp-4,1rem) + 60px)}
@media (min-width:900px){body.has-sticky-buy .sa-a11y{bottom:calc(24px + 60px)}}

.sa-a11y__toggle{
  display:grid; place-items:center;
  inline-size:48px; block-size:48px;      /* זהה לכפתור הוואטסאפ */
  padding:0;
  color:var(--cream,#FBF6EE);
  background:var(--espresso,#2C1A10);
  border:2px solid var(--gold,#C49A4A);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(44,26,16,.5);
  transition:transform .18s ease-out, background-color .18s ease-out;
}
.sa-a11y__toggle svg{inline-size:24px;block-size:24px}
.sa-a11y__toggle:hover{background:var(--cocoa,#4A2E1C);transform:scale(1.05)}
.sa-a11y__toggle:active{transform:scale(.97)}

/* ── החלונית ── */
.sa-a11y__panel{
  position:absolute;
  bottom:60px; left:0;                    /* פיזי, נפתחת מעל הכפתור וימינה ממנו */
  inline-size:250px;
  padding:var(--sp-4,1rem);
  background:var(--cream,#FBF6EE);
  border:1px solid var(--border,#E9DCC9);
  border-radius:var(--radius-lg,22px);
  box-shadow:0 18px 46px -18px rgba(44,26,16,.42);
  font-family:var(--font-body,'Fredoka',system-ui,sans-serif);
}
.sa-a11y__panel[hidden]{display:none}

.sa-a11y__title{
  margin:0 0 var(--sp-3,.75rem);
  font-size:1.05rem; font-weight:600;
  color:var(--espresso,#2C1A10);
}

.sa-a11y__row{margin-block-end:var(--sp-3,.75rem)}
.sa-a11y__label{
  display:block; margin-block-end:.4rem;
  font-size:.85rem; color:var(--text-muted,#8B7A68);
}
.sa-a11y__btns{display:flex;gap:.35rem}
.sa-a11y__btns button{
  flex:1;
  min-block-size:40px;
  font-family:inherit; font-size:.9rem; font-weight:600;
  color:var(--espresso,#2C1A10);
  background:#fff;
  border:1px solid var(--border,#E9DCC9);
  border-radius:10px;
  cursor:pointer;
}
.sa-a11y__btns button:hover{background:var(--cream-2,#F4EADB)}

.sa-a11y__opt{
  display:block; inline-size:100%;
  min-block-size:44px;
  margin-block-end:.4rem;
  padding:.5rem .75rem;
  font-family:inherit; font-size:.925rem;
  text-align:start;
  color:var(--espresso,#2C1A10);
  background:#fff;
  border:1px solid var(--border,#E9DCC9);
  border-radius:10px;
  cursor:pointer;
}
.sa-a11y__opt:hover{background:var(--cream-2,#F4EADB)}
.sa-a11y__opt[aria-pressed="true"]{
  color:var(--cream,#FBF6EE);
  background:var(--cocoa,#4A2E1C);
  border-color:var(--cocoa,#4A2E1C);
}

.sa-a11y__reset{
  display:block; inline-size:100%;
  min-block-size:44px;
  margin-block-start:var(--sp-3,.75rem);
  font-family:inherit; font-size:.9rem; font-weight:600;
  color:var(--cream,#FBF6EE);
  background:var(--berry,#B23A5B);
  border:0; border-radius:var(--radius-pill,50px);
  cursor:pointer;
}
.sa-a11y__reset:hover{background:var(--berry-hover,#8E2B47)}

.sa-a11y__link{
  display:block;
  margin-block-start:var(--sp-3,.75rem);
  font-size:.85rem;
  color:var(--cocoa,#4A2E1C);
  text-align:center;
}

/* ── מצבי המשתמש ── */
html.sa-a11y-scaled body{font-size:calc(1rem * var(--sa-a11y-scale,1))}

html.sa-a11y-links a:not(.sa-a11y__toggle):not(.sa-skip){
  text-decoration:underline !important;
  text-underline-offset:3px;
  font-weight:600;
}

html.sa-a11y-readable body,
html.sa-a11y-readable body *:not(.sa-a11y__toggle svg){
  font-family:Arial, Helvetica, system-ui, sans-serif !important;
  letter-spacing:.01em;
}

html.sa-a11y-motion *,
html.sa-a11y-motion *::before,
html.sa-a11y-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

html.sa-a11y-contrast body{background:#fff;color:#000}
html.sa-a11y-contrast p,
html.sa-a11y-contrast li,
html.sa-a11y-contrast span,
html.sa-a11y-contrast h1,
html.sa-a11y-contrast h2,
html.sa-a11y-contrast h3,
html.sa-a11y-contrast h4{color:#000 !important}
html.sa-a11y-contrast a:not(.sa-a11y__toggle){color:#00309e !important}
html.sa-a11y-contrast .sa-a11y__panel{background:#fff;border-color:#000}

/* כיבוד העדפת המערכת, בלי קשר לרכיב */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media (max-width:600px){
  .sa-a11y{bottom:calc(1.5rem + 56px);left:1.5rem}
  .sa-a11y__toggle{inline-size:44px;block-size:44px}
  .sa-a11y__toggle svg{inline-size:22px;block-size:22px}
  .sa-a11y__panel{inline-size:min(250px, calc(100vw - 40px))}
}

@media print{.sa-a11y,.sa-skip{display:none}}