/* ============================================================
   SUN TOOLS V3 — BASE
   ============================================================
   Resets + font loading + global typography. RTL-first (this is a
   single-language Arabic storefront — no LTR fallback branching).
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-700-arabic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Phone numbers, prices, SKUs, model numbers, counts, dates — always
   isolated to render left-to-right inside this RTL layout. See
   sun_tools_v3_ltr() in inc/components.php. */
.st3-ltr { unicode-bidi: isolate; direction: ltr; }

/* Restrained scroll-reveal — see assets/js/reveal.js. Motion is a
   short opacity+rise, never a slide-in from the side (reads as
   directionless, so it works the same in this RTL-only site without
   a mirrored variant). Reduced-motion users and no-JS both just see
   the element already in place — this is progressive enhancement,
   not a required animation. */
[data-st3-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--st3-ease), transform .6s var(--st3-ease);
}
[data-st3-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-st3-reveal] { opacity: 1; transform: none; transition: none; }
}
body {
  margin: 0;
  font-family: var(--st3-font);
  font-size: var(--st3-text-base);
  line-height: var(--st3-leading-normal);
  color: var(--st3-ink);
  background: var(--st3-base);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--st3-leading-tight);
  color: var(--st3-ink);
  overflow-wrap: break-word; /* long unbroken titles (real Arabic
    product names run 6-10+ words with no natural break opportunity in
    a narrow flex/grid cell) must wrap, not force their container past
    the viewport — see the single-product grid fix in commerce.css for
    the underlying grid/flex min-width:auto issue this also guards. */
}
h1 { font-size: var(--st3-text-2xl); }
h2 { font-size: var(--st3-text-xl); }
h3 { font-size: var(--st3-text-lg); }
p { margin: 0; overflow-wrap: break-word; }

/* Visually-hidden but screen-reader-accessible — used for real
   labeling (search field label, icon-only button labels), never for
   decorative filler. */
.st3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* One real, visible focus treatment used everywhere — links, buttons,
   inputs, menu items. Never suppressed with outline:none. */
:focus-visible {
  outline: 2px solid var(--st3-red);
  outline-offset: 2px;
}

::selection {
  background: var(--st3-red);
  color: var(--st3-white);
}