@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap');

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea { font-family:"Noto Kufi Arabic",Arial,sans-serif; }
html[lang="ar"] body { direction:rtl; text-align:right; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .eyebrow,html[lang="ar"] .button,html[lang="ar"] .add-button,
html[lang="ar"] .faq-question,html[lang="ar"] .filters button { font-family:"Noto Kufi Arabic",Arial,sans-serif; letter-spacing:0; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3 { text-transform:none; }
html[lang="ar"] .header .nav { grid-column:3; justify-content:flex-end; }
html[lang="ar"] .header .brand { grid-column:2; }
html[lang="ar"] .header .actions,
html[lang="ar"] .product-actions { grid-column:1; justify-self:start; display:flex; align-items:center; gap:9px; }
html[lang="ar"] .language-switch { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border:1px solid rgba(255,255,255,.7); border-radius:999px; color:#fff; font:600 12px Arial,sans-serif; white-space:nowrap; direction:ltr; }
html[lang="ar"] .language-switch:hover { background:#fff; color:#8d1f1c; }
html[lang="ar"] .product-actions .bag-button { grid-column:auto; position:relative; justify-self:auto; margin:0; }
html[lang="ar"] .breadcrumb { flex-direction:row; }
html[lang="ar"] .product-copy,html[lang="ar"] .location-card,html[lang="ar"] .faq-heading,
html[lang="ar"] .blog-copy,html[lang="ar"] .article-body { text-align:right; }
html[lang="ar"] .product h1 { letter-spacing:0; line-height:1.2; }
html[lang="ar"] .main-image>span { right:auto; left:16px; }
html[lang="ar"] .price,html[lang="ar"] .buy-row { direction:rtl; }
html[lang="ar"] .detail-grid article { border-left:0; border-right:1px solid rgba(255,255,255,.28); }
html[lang="ar"] .detail-grid article:first-child { border-right:0; padding-left:30px; padding-right:0; }
html[lang="ar"] .faq-question { text-align:right; padding-left:54px; padding-right:0; }
html[lang="ar"] .faq-question:after { right:auto; left:0; }
html[lang="ar"] .cart { right:auto; left:-440px; text-align:right; }
html[lang="ar"] .cart.open { right:auto; left:0; }
html[lang="ar"] .badge { left:auto; right:12px; }
html[lang="ar"] .product-info { text-align:right; }
html[lang="ar"] .product-info h3 { line-height:1.55; }
html[lang="ar"] .site-footer,html[lang="ar"] footer { direction:rtl; }
html[lang="ar"] .blog-post h1,html[lang="ar"] .blog-intro h1 { letter-spacing:0; line-height:1.25; }
html[lang="ar"] .blog-card-copy h2 { letter-spacing:0; line-height:1.35; text-transform:none; }

/* Arabic glyphs are optically taller and need more line height than the
   condensed English display face. Keep translated article titles balanced. */
html[lang="ar"] .seo-article .article-heading h1 {
  max-width:100%;
  font-size:clamp(34px,3.25vw,48px);
  line-height:1.28;
  overflow-wrap:normal;
  word-break:normal;
}
html[lang="ar"] .seo-article .article-body h2 { font-size:clamp(34px,4vw,50px); line-height:1.25; }
html[lang="ar"] .blog-card-copy h2 { font-size:clamp(30px,3.2vw,44px); }

@media(max-width:950px){
  html[lang="ar"] .header .menu-toggle,html[lang="ar"] .header .menu-button { grid-column:3; justify-self:end; }
  html[lang="ar"] .header .nav { left:auto!important; right:14px!important; }
  html[lang="ar"] .header .actions,html[lang="ar"] .product-actions { grid-column:1; justify-self:start; }
}
@media(max-width:850px){
  html[lang="ar"] .detail-grid article,html[lang="ar"] .detail-grid article:first-child { border-right:0; padding:20px 0; }
}
@media(max-width:560px){
  html[lang="ar"] .language-switch { min-height:32px; padding:0 9px; font-size:11px; }
  html[lang="ar"] .product-actions { gap:2px; }
  html[lang="ar"] .product h1 { font-size:34px; }
  html[lang="ar"] .seo-article .article-heading h1 { font-size:32px; line-height:1.3; }
}