/* ==========================================================================
   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; }
}

/* ---------- 5. 3D showroom entry points ---------- */
.nav-link.nav-3d, .mob-link.nav-3d { color: var(--vanilla) !important; }
.nav-link.nav-3d::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vanilla); margin-inline-end: 7px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(213,193,170,.18); }

.sr-banner { max-width: 1200px; margin: 0 auto 1rem; padding: 0 2rem; }
.sr-banner-link { position: relative; display: block; height: 420px; overflow: hidden; border-radius: 4px; background: #1d1c1b; text-decoration: none; }
.sr-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; transition: transform 1.2s ease; }
.sr-banner-link:hover .sr-banner-bg { transform: scale(1.04); }
.sr-banner-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(20,18,16,.88) 0%, rgba(20,18,16,.55) 45%, rgba(20,18,16,.05) 100%); }
html[dir="ltr"] .sr-banner-link::after { background: linear-gradient(to right, rgba(20,18,16,.88) 0%, rgba(20,18,16,.55) 45%, rgba(20,18,16,.05) 100%); }
.sr-banner-in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 3.5rem; max-width: 560px; color: #fff; }
.sr-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vanilla); margin-bottom: 14px; }
.sr-eyebrow .ic { font-size: 18px; }
.sr-title { font-size: 36px; font-weight: 500; line-height: 1.4; margin: 0 0 14px; color: #fff; }
.sr-text { font-size: 15px; line-height: 2; color: rgba(255,255,255,.78); margin: 0 0 24px; }
.sr-btn { align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 0 26px; background: var(--vanilla); color: var(--onyx); font-size: 14px; font-weight: 600; border-radius: 2px; transition: background .2s; }
.sr-banner-link:hover .sr-btn { background: #e6d6c2; }

.btn-3d { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: var(--vanilla); color: var(--onyx); font-size: 13px; font-weight: 600; text-decoration: none; flex: 1 1 100%; }
.btn-3d .ic { font-size: 18px; }
.btn-3d:hover { background: #e6d6c2; }
.cta-row { flex-wrap: wrap; }

@media (max-width: 700px) {
  .sr-banner { padding: 0 1rem; }
  .sr-banner-link { height: 440px; }
  .sr-banner-link::after, html[dir="ltr"] .sr-banner-link::after { background: linear-gradient(to top, rgba(20,18,16,.92) 0%, rgba(20,18,16,.6) 55%, rgba(20,18,16,.1) 100%); }
  .sr-banner-in { justify-content: flex-end; padding: 0 1.4rem 1.8rem; }
  .sr-title { font-size: 24px; }
  .sr-text { font-size: 14px; }
}

/* v9: kitchen designer banner (same look as the showroom banner, never hidden with it) */
.dz-banner { max-width: 1200px; margin: 0 auto 1rem; padding: 0 2rem; }