/* hg-version 2026-10-26-1834 */
/* ============================================================
   HYPERGO ARABIC TYPOGRAPHY
   English remains completely untouched
   ============================================================ */

html:lang(ar) body,
html:lang(ar) button,
html:lang(ar) input,
html:lang(ar) textarea,
html:lang(ar) select {
  font-family:
    "IBM Plex Sans Arabic",
    Arial,
    sans-serif !important;

  font-weight: 500;
}

/* Arabic website text */

html:lang(ar) body * {
  font-family:
    "IBM Plex Sans Arabic",
    Arial,
    sans-serif !important;
}

/* Main headings */

html:lang(ar) h1,
html:lang(ar) h2 {
  font-weight: 700 !important;

  letter-spacing: 0 !important;
}

/* Smaller headings */

html:lang(ar) h3,
html:lang(ar) h4,
html:lang(ar) h5,
html:lang(ar) h6 {
  font-weight: 600 !important;

  letter-spacing: 0 !important;
}

/* Buttons / navigation */

html:lang(ar) button,
html:lang(ar) a {
  font-weight: 600;
}

/* ============================================================
   CUSTOM HYPERGO LANDING
   ============================================================ */

.hg-landing:lang(ar),
.hg-landing:lang(ar) * {
  font-family:
    "IBM Plex Sans Arabic",
    Arial,
    sans-serif !important;
}

/* Hero */

.hg-landing:lang(ar) .hg-hero-title,
.hg-landing:lang(ar) .hg-hero-title .hg-ar {
  font-weight: 700 !important;

  letter-spacing: -0.015em !important;

  line-height: 1.12 !important;
}

.hg-landing:lang(ar) .hg-hero-title strong {
  font-weight: 700 !important;
}

/* Section headings */

.hg-landing:lang(ar) .hg-section-title,
.hg-landing:lang(ar) .hg-section-title .hg-ar {
  font-weight: 700 !important;

  letter-spacing: -0.01em !important;

  line-height: 1.2 !important;
}

/* Seller heading */

.hg-landing:lang(ar) .hg-seller-copy h2,
.hg-landing:lang(ar) .hg-seller-copy h2 .hg-ar {
  font-weight: 700 !important;

  letter-spacing: -0.01em !important;

  line-height: 1.18 !important;
}

/* Body copy */

.hg-landing:lang(ar) p,
.hg-landing:lang(ar) .hg-hero-description {
  font-weight: 500 !important;

  letter-spacing: 0 !important;
}

/* Buttons */

.hg-landing:lang(ar) .hg-button,
.hg-landing:lang(ar) .hg-button-text {
  font-weight: 600 !important;

  letter-spacing: 0 !important;
}

/* Category strip */

.hg-landing:lang(ar) .hg-strip-item {
  font-weight: 600 !important;

  letter-spacing: 0 !important;
}

/* Store names */

.hg-landing:lang(ar) .hg-store-info strong {
  font-weight: 600 !important;
}

/* Footer Arabic */

#MainFooter:lang(ar),
#MainFooter:lang(ar) * {
  font-family:
    "IBM Plex Sans Arabic",
    Arial,
    sans-serif !important;
}

/* ============================================================
   PAGE-LOAD VEIL (website only)
   Hyperzod paints its own default design first; our design is applied a moment later by the footer
   files (global-footer.css / global-footer-1.js load at the end of the page, and the home sections wait
   for the store list from the API). This file loads in the <head>, so this veil is on screen from the
   very first paint and hides the default design until web-footer.js marks the page ready
   (html.hg-web-ready -> fade out, html.hg-web-done -> removed).
   Failsafe: if the scripts never arrive, the veil fades out by itself after 10s so the site is never stuck.
   Same look as the existing language-switch veil (white page, purple spinner).
   ============================================================ */
@keyframes hgBootOut { to { opacity: 0; visibility: hidden; } }
@keyframes hgBootSpin { to { transform: rotate(360deg); } }

html:not(.hg-web-done) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: #FFFCF9;
  animation: hgBootOut .25s ease 10s forwards;
}

html:not(.hg-web-done) body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 4px solid #EDE7FF;
  border-top-color: #5A29DE;
  z-index: 2147482001;
  animation: hgBootSpin .8s linear infinite, hgBootOut .25s ease 10s forwards;
}

/* ready: fade the veil out smoothly */
html.hg-web-ready:not(.hg-web-done) body::before,
html.hg-web-ready:not(.hg-web-done) body::after {
  animation: hgBootOut .25s ease forwards;
}