/* The original site.css is unchanged. Only integration/accessibility additions. */
[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; z-index: 100; top: 8px; inset-inline-start: 12px; padding: 12px 20px; background: #faa620; color: #121212; border-radius: 10px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #faa620; outline-offset: 4px; }
.hero-card a:focus-visible { outline-color: #121212; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Content stays visible if JavaScript is unavailable. */
html:not(.js) .feature-card,
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
html:not(.js) .screen-visual-panels { display: block; min-height: 0; }
html:not(.js) .screen-visual-panel { display: block; min-height: 0; padding: 20px 0; pointer-events: auto; }
html:not(.js) .screen-copy-panel { display: block; margin-bottom: 24px; }
html:not(.js) .device-shot-focus,
html:not(.js) .screens-switcher { display: none; }
html:not(.js) .device-shot-stage { min-height: 0; display: block; }
html:not(.js) .device-shot-wrap { display: block; }
html:not(.js) .device-shot-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; transform: none; }
html:not(.js) .device-shot-slide { width: min(75vw, 520px); opacity: 1; }
html:not(.js) .is-mobile .device-shot-slide { width: min(65vw, 240px); }

/* Country-based display currency. Checkout remains on the main website. */
.sar-checkout-note { margin: 10px 0 0; font-size: .82rem; line-height: 1.6; color: inherit; opacity: .85; }

.sar-checkout-note[hidden] { display: none !important; }

/* Physical alignment is identical on Arabic and English pages. */
.app-header-row { display: flex; direction: ltr; justify-content: space-between; align-items: center; gap: 24px; }
.app-header-social { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-header-social .soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.app-header-row .shoof-logo { flex-shrink: 0; }
@media (max-width: 380px) { .app-header-row .shoof-logo img { width: 90px; } }