@charset "UTF-8";

@font-face {
  font-family: "Tajawal";
  src: url("assets/fonts/tajawal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("assets/fonts/tajawal-500.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("assets/fonts/tajawal-700.woff2") format("woff2");
  font-weight: 650 750;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("assets/fonts/tajawal-800.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

html[lang="ar"] {
  --font: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}
.language-button[lang="ar"] {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] body {
  line-height: 1.85;
}
html[lang="ar"] :is(.hero h1, .section-heading h2, .contact-copy h2, .eyebrow, .product-subtitle, .preview-strip) {
  letter-spacing: normal;
}
html[lang="ar"] .hero h1 {
  font-size: clamp(2.375rem, 4.1vw, 3.625rem);
  font-weight: 700;
  line-height: 1.4;
}
html[lang="ar"] :is(.hero-description, .section-heading > p, .contact-copy > p:not(.eyebrow)) {
  font-size: 1.0625rem;
  line-height: 1.95;
}
html[lang="ar"] nav {
  font-size: 1rem;
  font-weight: 500;
}
html[lang="ar"] :is(.button, .details-link) {
  font-size: 1rem;
}
html[lang="ar"] :is(.fit-note, .volume-badge, .results-count, .product-subtitle, .footer-inner, .visual-kicker) {
  font-size: .875rem;
}
html[lang="ar"] :is(.section-heading h2, .contact-copy h2) {
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 600px) {
  html[lang="ar"] .hero h1 { font-size: 2.5rem; }
  html[lang="ar"] .hero-description { font-size: 1rem; }
  html[lang="ar"] :is(.section-heading h2, .contact-copy h2) { font-size: 1.875rem; }
}
@media (max-width: 360px) {
  html[lang="ar"] .hero h1 { font-size: 2.25rem; }
}