/* ==========================================================
   Arabic typography — shared across every AR page.
   The same Aref Ruqaa (Thuluth) + Noto Naskh Arabic + Cairo
   palette we tuned on the home page, applied universally so
   bukhoor / spray / gifts / product / checkout / about /
   contact / confirmation all read as one brand.

   Selectors cover both layouts:
     - index_ar.html   uses .hero-content + .section-header
     - other AR pages  use .page-hero-content
   ========================================================== */

/* Body + UI text in Cairo (modern Arabic sans, screen-friendly). */
body,
.nav a,
.add-to-cart,
.checkout-btn,
.qty-btn,
.remove-item {
    font-family: 'Cairo', sans-serif;
}
.logo h1,
.cart-header h3,
.footer-brand h3 {
    font-family: 'Cairo', sans-serif;
}

/* Slightly larger brand wordmark + nav so they don't feel cramped
   next to the calligraphic display type. */
.logo h1 { font-size: 1.85rem; }
.nav a   { font-size: 1.02rem; }
@media (max-width: 768px) {
    .logo h1 { font-size: 1.45rem; }
    .nav a   { font-size: 0.95rem; }
}

/* letter-spacing must be 0 on Arabic — any non-zero tracking breaks
   the cursive joining, leaving letters as isolated glyphs (the
   "spaces between letters" symptom). calt + liga enable proper
   Arabic contextual shaping so Aref Ruqaa connects correctly. */
.hero-content h2,
.section-header h2,
.page-hero-content h2,
.hero-content h4,
.hero-content h5,
.section-header h5,
.page-hero-content p {
    letter-spacing: 0 !important;
    word-spacing: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
    text-rendering: optimizeLegibility;
}

/* UI text safety reset: zero letter-spacing + force shaping on
   every Arabic surface that renders Cairo, so the Latin tracking
   inherited from polish.css doesn't break Arabic joining. */
.logo h1,
.nav a,
.lang-btn,
.side-menu-nav a,
.side-menu-eyebrow,
.footer-links h4,
.footer-links a,
.footer-contact h4,
.footer-brand h3,
.footer-brand p,
.cart-header h3,
.cart-total,
.checkout-btn,
.add-to-cart,
.tagline {
    letter-spacing: 0 !important;
    word-spacing: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
    text-rendering: optimizeLegibility;
}

/* Big heading scale → Aref Ruqaa (Thuluth). Hero gets the dominant
   scale (only on index_ar.html, which has .hero-content). Section /
   page heroes on category pages get a smaller scale. */
.hero-content h2,
.section-header h2,
.page-hero-content h2 {
    font-family: 'Aref Ruqaa', 'Cairo', serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.35;
}
.hero-content h2 {
    font-size: clamp(3.4rem, 5vw + 1.8rem, 7rem);
}
.section-header h2,
.page-hero-content h2 {
    font-size: clamp(2.4rem, 3.5vw + 1.4rem, 5rem);
}

/* Sub-heading directly under each h2 — same Thuluth font, lighter
   weight. Scoped to .hero-content / .section-header / .page-hero
   so the footer h4s ("روابط سريعة" / "اتصل بنا") keep their
   existing Cairo + uppercase treatment, separate from this rule. */
.hero-content h4,
.hero-content h5,
.section-header h5 {
    font-family: 'Aref Ruqaa', 'Cairo', serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: clamp(1.3rem, 1.2vw + 0.9rem, 2.1rem);
    margin: 0;
    text-transform: none;
}

/* Page-hero <p> on bukhoor/spray/gifts — same Thuluth subtitle
   treatment so e.g. "عود فاخر لأجواء راقية" matches the home page. */
.page-hero-content p {
    font-family: 'Aref Ruqaa', 'Cairo', serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: clamp(1.3rem, 1.2vw + 0.9rem, 2.1rem);
    margin: 0;
    text-transform: none;
}

/* Breathing space above the section subtitle so Aref Ruqaa
   ascenders + Arabic marks (Hamza, Sukun) don't graze the heading
   line-box above. ~0.6em scales with the subtitle's own size. */
.section-header h5,
.page-hero-content p {
    margin-top: 0.6em;
}

/* Hero subtitle (only on index_ar.html via .hero-content h4) gets
   a bigger size than the section subtitles — sits under the
   largest h2 so it needs more presence to balance. */
.hero-content h4 {
    font-size: clamp(1.8rem, 1.8vw + 1.1rem, 3rem);
}

/* Body prose → Noto Naskh Arabic (book-text script). */
p {
    font-family: 'Noto Naskh Arabic', 'Cairo', serif;
    font-weight: 400;
    line-height: 1.95;
}
/* Page-hero <p> overrides: Aref Ruqaa subtitle, declared above —
   higher specificity than the bare `p` selector wins. */