/* Accessibility toolbar - self-hosted, IS 5568 / WCAG 2.1 AA */ .smm-skip-link { position: absolute; top: -100px; right: 0; background: #000; color: #fff; padding: 12px 24px; z-index: 100000; text-decoration: none; font-weight: 600; } .smm-skip-link:focus { top: 0; outline: 3px solid #ffd700; } #smm-a11y-trigger { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #2563eb; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 28px; cursor: pointer; z-index: 99998; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; } #smm-a11y-trigger:hover, #smm-a11y-trigger:focus { transform: scale(1.08); outline: 3px solid #ffd700; outline-offset: 2px; } #smm-a11y-panel { position: fixed; bottom: 92px; right: 24px; width: 320px; max-width: calc(100vw - 48px); max-height: 70vh; overflow-y: auto; background: #fff; color: #111; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.25); z-index: 99999; font-family: 'Heebo', 'Assistant', sans-serif; direction: rtl; } #smm-a11y-panel[hidden] { display: none; } .smm-a11y-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } .smm-a11y-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: #111; } .smm-a11y-close { background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #6b7280; padding: 4px 8px; } .smm-a11y-close:hover, .smm-a11y-close:focus { color: #111; outline: 2px solid #2563eb; } .smm-a11y-body { padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .smm-a11y-body button { background: #f3f4f6; color: #111; border: 2px solid transparent; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s ease; text-align: center; } .smm-a11y-body button:hover, .smm-a11y-body button:focus { background: #e5e7eb; border-color: #2563eb; outline: none; } .smm-a11y-body button.is-active { background: #2563eb; color: #fff; border-color: #1d4ed8; } .smm-a11y-reset { grid-column: 1 / -1; background: #fee2e2 !important; color: #991b1b !important; } .smm-a11y-footer { padding: 12px 20px; border-top: 1px solid #e5e7eb; text-align: center; font-size: 13px; } .smm-a11y-footer a { color: #2563eb; text-decoration: underline; } /* Active accessibility states applied to */ body.smm-a11y-font-larger { font-size: 110%; } body.smm-a11y-font-larger-2 { font-size: 125%; } body.smm-a11y-font-larger-3 { font-size: 140%; } body.smm-a11y-font-larger-4 { font-size: 160%; } body.smm-a11y-contrast-high { background: #000 !important; color: #fff !important; } body.smm-a11y-contrast-high * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } body.smm-a11y-contrast-high a { color: #ffd700 !important; } body.smm-a11y-contrast-high #smm-a11y-trigger, body.smm-a11y-contrast-high #smm-a11y-panel, body.smm-a11y-contrast-high #smm-a11y-panel * { background: #fff !important; color: #111 !important; } body.smm-a11y-contrast-high #smm-a11y-trigger { background: #2563eb !important; color: #fff !important; } /* Filter applies to body's direct content children, NOT body itself. Why: a `filter` on body would (a) make body the containing block for any position:fixed descendant — pinning the trigger to the *document* bottom instead of the *viewport* bottom (causing it to vanish on long pages), and (b) couldn't be undone on the trigger/panel since CSS filters compose, they don't subtract. So we filter siblings around the floating UI instead. */ body.smm-a11y-contrast-inverted > *:not(#smm-a11y-trigger):not(#smm-a11y-panel):not(.smm-cart-drawer):not(.smm-cart-drawer-backdrop):not(.smm-menu-backdrop):not(.smm-quickadd-modal):not(.smm-toast):not(.smm-sticky-cta):not(script):not(style):not(noscript):not(link):not(meta) { filter: invert(1) hue-rotate(180deg); } body.smm-a11y-grayscale > *:not(#smm-a11y-trigger):not(#smm-a11y-panel):not(.smm-cart-drawer):not(.smm-cart-drawer-backdrop):not(.smm-menu-backdrop):not(.smm-quickadd-modal):not(.smm-toast):not(.smm-sticky-cta):not(script):not(style):not(noscript):not(link):not(meta) { filter: grayscale(1); } body.smm-a11y-links-underline a { text-decoration: underline !important; } body.smm-a11y-readable-font, body.smm-a11y-readable-font * { font-family: 'Open Dyslexic', 'Heebo', Arial, sans-serif !important; letter-spacing: 0.05em !important; line-height: 1.7 !important; } body.smm-a11y-pause-animations *, body.smm-a11y-pause-animations *::before, body.smm-a11y-pause-animations *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; } body.smm-a11y-hide-images img, body.smm-a11y-hide-images video, body.smm-a11y-hide-images iframe, body.smm-a11y-hide-images svg:not(.smm-a11y-keep) { display: none !important; } body.smm-a11y-hide-images [style*="background-image"] { background-image: none !important; }