/* ==========================================================================
   AL NABEEL — brand refresh layer
   Loaded AFTER each page's inline <style>, so it only overrides.
   Delete the <link> to this file to return to the previous look.
   ========================================================================== */

:root {
  --font: 'Montserrat', 'Noto Kufi Arabic', system-ui, sans-serif;
}

/* ---------- 1. Typography: real Arabic font everywhere ---------- */
body, button, input, textarea, select { font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Letter-spacing breaks the joins between Arabic letters — remove it in Arabic,
   keep it only on the Latin wordmark and English-only labels */
html[dir="rtl"] body *:not(.lang-en):not(.lang-en *):not(.f-logo-text .en) { letter-spacing: normal !important; }

/* ---------- 2. Type scale (desktop) ---------- */
.nav-link   { font-size: 14px; font-weight: 500; }
.lang-btn   { font-size: 12px; }
.mob-link   { font-size: 16px; }

.slide-badge { font-size: 12px; padding: 6px 16px; }
.slide-title { font-size: 52px; line-height: 1.25; margin-bottom: 14px; }
.slide-sub   { font-size: 22px; line-height: 1.6; }
.slide-desc  { font-size: 15px; line-height: 1.9; }

.section    { padding: 4.5rem 2rem; }
.sec-head   { margin-bottom: 2rem; }
.sec-title  { font-size: 30px; font-weight: 500; line-height: 1.4; }
.view-all   { font-size: 13px; }

.cat-card        { height: 170px; }
.cat-card-name   { font-size: 17px; font-weight: 600; }
.cat-card-count  { font-size: 11px; }

.prod-img   { height: 230px; }
.prod-body  { padding: 18px 20px 20px; }
.prod-badge { font-size: 11px; }
.prod-cat   { font-size: 12px; }
.prod-name  { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 4px 0 8px; }
.prod-desc  { font-size: 14px; line-height: 1.8; }
.prod-link  { font-size: 13px; }

.about-eyebrow, .contact-eyebrow { font-size: 12px; }
.about-title, .contact-title     { font-size: 38px; line-height: 1.35; font-weight: 400; }
.about-text, .contact-subtitle   { font-size: 16px; line-height: 2; }
.about-inner, .contact-inner     { padding: 6rem 2rem; }
.contact-info .label { font-size: 12px; }
.contact-info .value { font-size: 15px; }
.wa-btn { font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.map-address .addr-label { font-size: 12px; }
.map-address .addr-text  { font-size: 15px; }

.cat-page-title { font-size: 32px; font-weight: 500; }
.cat-page-count { font-size: 13px; }
.filter-label   { font-size: 12px; }
.filter-btn     { font-size: 14px; }

.breadcrumb  { font-size: 13px; }
.d-badge     { font-size: 12px; }
.d-cat       { font-size: 13px; }
.d-title     { font-size: 36px; font-weight: 500; line-height: 1.35; }
.lbl-title   { font-size: 13px; font-weight: 600; color: var(--dimgray); }
.spec-label  { font-size: 12px; }
.spec-val    { font-size: 16px; }
.desc-text   { font-size: 16px; line-height: 2; }
.btn-main    { font-size: 14px; }
.origin-label { font-size: 12px; }
.origin-value { font-size: 16px; }

.f-desc, .f-link, .f-contact { font-size: 14px; line-height: 2; }
.f-col-title { font-size: 13px; }
.f-copy      { font-size: 12px; }
.f-logo-text .ar { font-size: 12px; }

/* ---------- 3. Icons (SVG instead of emoji / letters) ---------- */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.social-btn, .f-social { font-size: 14px; }
.contact-icon { font-size: 20px; color: var(--vanilla); display: flex; align-items: center; justify-content: center; }
.addr-icon    { font-size: 20px; color: var(--vanilla); display: flex; align-items: center; }
.f-contact    { display: flex; align-items: center; gap: 10px; }
.f-contact .ic { color: var(--vanilla); opacity: .8; }
.origin-icon  { font-size: 22px; color: var(--dimgray); display: flex; }

/* Features: only what the product HAS — quiet, no green/red badges */
.feat-item   { padding: 18px 10px; background: var(--vlight); }
.feat-icon   { font-size: 26px; color: var(--dimgray); display: flex; justify-content: center; margin-bottom: 8px; }
.feat-label, .feat-label-ar, .feat-label-en { font-size: 13px; line-height: 1.5; color: var(--onyx); }
.feat-badge  { display: none; }

.uses-list   { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.use-item    { font-size: 14px; padding: 9px 16px; gap: 8px; }
.use-badge   { background: none !important; color: var(--dimgray) !important; width: auto; height: auto; font-size: 15px; }

/* ---------- 4. Mobile ---------- */
@media (max-width: 700px) {
  .nav-link { font-size: 13px; }
  .slide-title { font-size: 28px; }
  .slide-sub   { font-size: 15px; }
  .section     { padding: 2.5rem 1rem; }
  .sec-title   { font-size: 22px; }
  .cat-card    { height: 130px; }
  .cat-card-name  { font-size: 15px; }
  .cat-card-count { font-size: 10px; }
  .prod-img    { height: 210px; }
  .prod-body   { padding: 14px 16px 16px; }
  .prod-name   { font-size: 16px; }
  .prod-desc   { font-size: 13px; }
  .about-title, .contact-title { font-size: 26px; }
  .about-text, .contact-subtitle { font-size: 15px; }
  .about-inner, .contact-inner { padding: 3rem 1rem; }
  .cat-page-title { font-size: 24px; }
  .d-title     { font-size: 26px; }
  .spec-val    { font-size: 15px; }
  .desc-text   { font-size: 15px; }
  .feat-item   { padding: 14px 6px; }
  .feat-label, .feat-label-ar, .feat-label-en { font-size: 12px; }
}