/* ============================================================
   FAB TECH — Vendoline theme
   Industrial fiber-laser / metal-fabrication storefront.
   Ported from the approved FAB TECH brand site.
   Palette: navy #0A3D72 / #062c56 / #041f3f · teal #00C8B6
   -----------------------------------------------------------
   Two scoping strategies:
     · GLOBAL skin (header, footer, banners, default fallback
       markup) is prefixed with `body.theme-fab-tech` so it only
       applies when Fab Tech is the ACTIVE theme.
     · SECTION parts use unique `.ft-*` classes with NO body
       prefix, so they also work when Fab Tech is applied to a
       single section as a "Template style" on another theme
       (the per-section scoper wraps them in .tpl-scope-fab-tech).
   ES5 / PHP7.4 friendly — no build tooling required.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&family=Saira+Condensed:wght@500;600;700;800&family=Cairo:wght@400;600;700;800;900&display=swap');

/* ---- design tokens (usable by both active-theme + scoped) ---- */
.theme-fab-tech,
.tpl-scope-fab-tech{
  --ft-navy:#0A3D72; --ft-navy-2:#062c56; --ft-navy-3:#041f3f;
  --ft-blue:#1B5489; --ft-blue-2:#2f6fae;
  --ft-teal:#00C8B6; --ft-teal-2:#19e0cd;
  --ft-ink:#0b1622; --ft-panel:#0e2a4d; --ft-panel-2:#102f55;
  --ft-line:rgba(255,255,255,.10); --ft-line-2:rgba(255,255,255,.18);
  --ft-muted:#9db4cf; --ft-muted-2:#c6d6ea; --ft-white:#fff;
  --ft-disp:'Saira Condensed',sans-serif; --ft-body:'Saira',sans-serif; --ft-ar:'Cairo',sans-serif;
  --ft-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1 · GLOBAL PAGE SKIN (active theme only)
   ============================================================ */
body.theme-fab-tech{
  background:var(--ft-ink);
  color:var(--ft-muted-2);
  font-family:var(--ft-body);
  -webkit-font-smoothing:antialiased;
  /* The Fab Tech header is position:sticky (its topbar scrolls away, the nav
     sticks) — so it takes its own space in normal flow and does NOT need the
     store.css fixed-header offset. Without this the reserved --header-h band
     shows as an empty dark strip above the topbar. */
  padding-top:0 !important;
}
body.theme-fab-tech[dir="rtl"]{ font-family:var(--ft-ar); }
body.theme-fab-tech main,
body.theme-fab-tech .page-content,
body.theme-fab-tech .store-main{ background:var(--ft-ink); }

body.theme-fab-tech h1,body.theme-fab-tech h2,body.theme-fab-tech h3{
  font-family:var(--ft-disp); color:#fff; letter-spacing:.01em; text-transform:uppercase; line-height:1.08;
}
body.theme-fab-tech[dir="rtl"] h1,
body.theme-fab-tech[dir="rtl"] h2,
body.theme-fab-tech[dir="rtl"] h3{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; font-weight:900; }

/* --- Header: navy bar, Saira nav, teal hover (palette does the colours) --- */
body.theme-fab-tech .store-header{ border-bottom:1px solid var(--ft-line); }
body.theme-fab-tech .header-nav .nav-item,
body.theme-fab-tech .nav-items a{
  font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
body.theme-fab-tech[dir="rtl"] .header-nav .nav-item,
body.theme-fab-tech[dir="rtl"] .nav-items a{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; font-weight:700; }
body.theme-fab-tech .nav-items a:hover,
body.theme-fab-tech .header-nav .nav-item:hover{ color:var(--ft-teal); }
body.theme-fab-tech .header-action-btn:hover,
body.theme-fab-tech .header-lang:hover{ color:var(--ft-teal); }
body.theme-fab-tech .header-logo .logo-text{ font-family:var(--ft-disp); letter-spacing:.06em; }

/* --- Announcement bar --- */
body.theme-fab-tech .announcement-bar{ letter-spacing:.06em; }

/* --- Page banner (shop / product / static pages) --- */
body.theme-fab-tech .page-banner,
body.theme-fab-tech .page-banner-bg{ border-bottom:2px solid var(--ft-teal); }
body.theme-fab-tech .page-banner h1,
body.theme-fab-tech .page-banner-text h1{ font-family:var(--ft-disp); }

/* --- Buttons everywhere: sharp, teal, uppercase Saira --- */
body.theme-fab-tech .btn,
body.theme-fab-tech .btn-primary,
body.theme-fab-tech button[class*="-btn"],
body.theme-fab-tech a[class*="-btn"]{
  font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.1em; font-weight:700; border-radius:2px;
}
body.theme-fab-tech[dir="rtl"] .btn,
body.theme-fab-tech[dir="rtl"] .btn-primary,
body.theme-fab-tech[dir="rtl"] button[class*="-btn"],
body.theme-fab-tech[dir="rtl"] a[class*="-btn"]{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; }

/* --- Footer: deep navy, teal top rule --- */
body.theme-fab-tech .site-footer,
body.theme-fab-tech footer.site-footer{
  background:var(--ft-navy-3); color:var(--ft-muted); border-top:2px solid var(--ft-teal);
}
body.theme-fab-tech .footer-col h4,
body.theme-fab-tech .footer-col h3{ font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.12em; color:#fff; }
body.theme-fab-tech[dir="rtl"] .footer-col h4,
body.theme-fab-tech[dir="rtl"] .footer-col h3{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; }
body.theme-fab-tech .footer-col a{ color:var(--ft-muted); }
body.theme-fab-tech .footer-col a:hover{ color:var(--ft-teal); }
body.theme-fab-tech .footer-social a:hover{ background:var(--ft-teal); border-color:var(--ft-teal); }
body.theme-fab-tech .footer-bottom{ border-top:1px solid var(--ft-line); color:var(--ft-muted); }

/* ============================================================
   2 · DEFAULT-MARKUP FALLBACK SKIN (active theme only)
   Any homepage section that Fab Tech does NOT override still uses
   the stock .home-section markup — make it look native on dark.
   ============================================================ */
body.theme-fab-tech .home-section{ background:var(--ft-ink); color:var(--ft-muted-2); padding:88px 0; }
body.theme-fab-tech .home-section:nth-child(even){ background:var(--ft-navy-3); }
body.theme-fab-tech .section-inner{ max-width:1280px; margin:0 auto; padding:0 28px; }
body.theme-fab-tech .section-header{ margin-bottom:40px; }
body.theme-fab-tech .section-header h2{ font-size:clamp(28px,4vw,46px); color:#fff; }
body.theme-fab-tech .section-header .section-link,
body.theme-fab-tech .section-link{ color:var(--ft-teal); font-family:var(--ft-disp); letter-spacing:.08em; text-transform:uppercase; }
body.theme-fab-tech .features-bar{ background:var(--ft-navy-2); border-block:1px solid var(--ft-line); }
body.theme-fab-tech .feature-item strong{ color:#fff; }
body.theme-fab-tech .feature-item span{ color:var(--ft-muted); }
/* stock product cards on dark (flash-sale, promo scroll fallbacks) */
body.theme-fab-tech .product-card{ background:var(--ft-panel); border:1px solid var(--ft-line); }
body.theme-fab-tech .product-card .card-title{ color:#fff; }
body.theme-fab-tech .product-card .card-category{ color:var(--ft-muted); }
body.theme-fab-tech .newsletter-section,
body.theme-fab-tech .contact-section{ background:var(--ft-navy-2); }

/* ============================================================
   3 · SHARED SECTION PRIMITIVES (.ft-*)
   ============================================================ */
.ft-wrap{ max-width:1280px; margin:0 auto; padding:0 28px; }
.ft-eyebrow{ font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.34em; font-size:13px; color:var(--ft-teal); font-weight:700; margin-bottom:14px; }
[dir="rtl"] .ft-eyebrow{ font-family:var(--ft-ar); letter-spacing:.05em; }
.ft-sec-head{ margin-bottom:50px; max-width:760px; }
.ft-sec-head.center{ margin-inline:auto; text-align:center; }
.ft-sec-head h2{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(28px,4.2vw,50px); color:#fff; line-height:1.06; }
[dir="rtl"] .ft-sec-head h2{ font-family:var(--ft-ar); text-transform:none; }
.ft-sec-head p{ margin-top:16px; color:var(--ft-muted); font-size:17px; }
.ft-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ft-disp); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:14px; padding:14px 26px; border-radius:2px; cursor:pointer; border:0; transition:.25s var(--ft-ease); white-space:nowrap; }
[dir="rtl"] .ft-btn{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; }
.ft-btn-teal{ background:var(--ft-teal); color:#04202b; }
.ft-btn-teal:hover{ background:var(--ft-teal-2); transform:translateY(-2px); color:#04202b; }
.ft-btn-ghost{ background:transparent; color:#fff; border:1px solid var(--ft-line-2); }
.ft-btn-ghost:hover{ border-color:var(--ft-teal); color:var(--ft-teal); }

/* reveal-on-scroll (driven by theme.js) */
.ft-reveal{ opacity:0; transform:translateY(38px); transition:.8s var(--ft-ease); }
.ft-reveal.in{ opacity:1; transform:none; }
.ft-d1{ transition-delay:.08s; } .ft-d2{ transition-delay:.16s; } .ft-d3{ transition-delay:.24s; } .ft-d4{ transition-delay:.32s; }

/* ============================================================
   4 · HERO SLIDER
   ============================================================ */
.ft-hero{ position:relative; height:86vh; min-height:560px; max-height:840px; overflow:hidden; background:var(--ft-navy-3); }
.ft-hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ft-ease); pointer-events:none; }
.ft-hero-slide.active{ opacity:1; pointer-events:auto; }
.ft-hero-slide .ft-hero-bg{ position:absolute; inset:0; }
.ft-hero-slide .ft-hero-bg img,
.ft-hero-slide .ft-hero-bg video{ width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 6.5s linear; }
.ft-hero-slide.active .ft-hero-bg img,
.ft-hero-slide.active .ft-hero-bg video{ transform:scale(1); }
.ft-hero-slide .ft-hero-bg:after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(4,21,40,.96) 0%,rgba(6,29,55,.82) 38%,rgba(6,29,55,.25) 75%,rgba(6,29,55,.55) 100%); }
[dir="rtl"] .ft-hero-slide .ft-hero-bg:after{ background:linear-gradient(260deg,rgba(4,21,40,.96) 0%,rgba(6,29,55,.82) 38%,rgba(6,29,55,.25) 75%,rgba(6,29,55,.55) 100%); }
.ft-hero-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:1280px; margin:0 auto; padding:0 28px; }
.ft-hero-content{ max-width:640px; }
.ft-hero-tag{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.3em; font-size:13px; color:var(--ft-teal); font-weight:700; margin-bottom:22px; }
[dir="rtl"] .ft-hero-tag{ font-family:var(--ft-ar); letter-spacing:.05em; }
.ft-hero-tag:before{ content:""; width:34px; height:2px; background:var(--ft-teal); }
.ft-hero-content h2{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(34px,5.4vw,68px); color:#fff; margin-bottom:20px; line-height:1.04; }
[dir="rtl"] .ft-hero-content h2{ font-family:var(--ft-ar); text-transform:none; }
.ft-hero-content p{ font-size:18px; color:var(--ft-muted-2); max-width:520px; margin-bottom:32px; }
.ft-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.ft-hero-dots{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:5; }
.ft-hero-dots button{ width:42px; height:4px; background:rgba(255,255,255,.25); border:0; cursor:pointer; transition:.3s; padding:0; }
.ft-hero-dots button.on{ background:var(--ft-teal); width:64px; }
.ft-hero-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:52px; height:52px; border:1px solid var(--ft-line-2); background:rgba(4,21,40,.4); color:#fff; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; }
.ft-hero-nav:hover{ background:var(--ft-teal); color:#04202b; border-color:var(--ft-teal); }
.ft-hero-nav.prev{ inset-inline-start:22px; } .ft-hero-nav.next{ inset-inline-end:22px; }

/* ============================================================
   5 · CATEGORY CARDS
   ============================================================ */
.ft-cats{ background:linear-gradient(180deg,var(--ft-ink),var(--ft-navy-3)); padding:92px 0; }
.ft-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ft-cat{ position:relative; height:300px; overflow:hidden; border:1px solid var(--ft-line); background:var(--ft-panel); display:flex; flex-direction:column; justify-content:flex-end; padding:30px; transition:.4s var(--ft-ease); }
.ft-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; transition:.6s var(--ft-ease); }
.ft-cat:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,29,55,.1),rgba(4,21,40,.92)); }
.ft-cat:hover{ border-color:var(--ft-teal); transform:translateY(-6px); }
.ft-cat:hover img{ opacity:.6; transform:scale(1.08); }
.ft-cat .ft-k{ position:relative; font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--ft-teal); margin-bottom:8px; }
[dir="rtl"] .ft-cat .ft-k{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-cat h3{ position:relative; font-family:var(--ft-disp); text-transform:uppercase; font-size:25px; color:#fff; margin-bottom:6px; }
[dir="rtl"] .ft-cat h3{ font-family:var(--ft-ar); text-transform:none; }
.ft-cat p{ position:relative; color:var(--ft-muted); font-size:14px; margin-bottom:16px; }
.ft-cat .ft-go{ position:relative; display:inline-flex; align-items:center; gap:8px; color:#fff; font-family:var(--ft-disp); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
[dir="rtl"] .ft-cat .ft-go{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-cat:hover .ft-go{ color:var(--ft-teal); }
.ft-cat .ft-arrow{ transition:.3s; }
[dir="rtl"] .ft-cat .ft-arrow{ display:inline-block; transform:scaleX(-1); }
.ft-cat:hover .ft-arrow{ transform:translateX(6px); }
[dir="rtl"] .ft-cat:hover .ft-arrow{ transform:scaleX(-1) translateX(6px); }

/* ============================================================
   6 · PRODUCTS GRID + INDUSTRIAL SPEC CARD
   ============================================================ */
.ft-prods{ background:linear-gradient(180deg,var(--ft-navy-3),var(--ft-ink)); padding:92px 0; }
.ft-prods-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:44px; flex-wrap:wrap; }
.ft-prods-head .ft-sec-head{ margin-bottom:0; }
.ft-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ft-more{ text-align:center; margin-top:46px; }

.ft-card{ background:var(--ft-panel); border:1px solid var(--ft-line); display:flex; flex-direction:column; transition:.35s var(--ft-ease); overflow:hidden; }
.ft-card:hover{ border-color:var(--ft-teal); transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.ft-card .ft-ph{ position:relative; height:200px; background:#fff; overflow:hidden; }
.ft-card .ft-ph img{ width:100%; height:100%; object-fit:contain; padding:14px; transition:.5s var(--ft-ease); }
.ft-card:hover .ft-ph img{ transform:scale(1.07); }
.ft-badge{ position:absolute; top:12px; inset-inline-start:12px; font-family:var(--ft-disp); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; font-weight:700; z-index:2; }
[dir="rtl"] .ft-badge{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-badge.buy{ background:var(--ft-teal); color:#04202b; }
.ft-badge.quote{ background:var(--ft-navy); color:#fff; border:1px solid var(--ft-teal); }
.ft-badge.sale{ background:var(--ft-teal); color:#04202b; inset-inline-start:auto; inset-inline-end:12px; }
.ft-card .ft-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.ft-card h3{ font-family:var(--ft-disp); text-transform:uppercase; font-size:17px; color:#fff; line-height:1.2; margin-bottom:8px; min-height:42px; }
[dir="rtl"] .ft-card h3{ font-family:var(--ft-ar); text-transform:none; }
.ft-card h3 a:hover{ color:var(--ft-teal); }
.ft-card .ft-cat-tag{ font-size:11.5px; color:var(--ft-teal); font-family:var(--ft-disp); letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
[dir="rtl"] .ft-card .ft-cat-tag{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-spec{ width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:16px; }
.ft-spec tr{ border-bottom:1px solid var(--ft-line); }
.ft-spec td{ padding:7px 0; vertical-align:top; }
.ft-spec td:first-child{ color:var(--ft-muted); white-space:nowrap; padding-inline-end:12px; }
.ft-spec td:last-child{ color:#fff; text-align:end; font-weight:500; }
.ft-card .ft-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ft-card .ft-price{ font-family:var(--ft-disp); color:var(--ft-teal); font-size:21px; font-weight:800; }
.ft-card .ft-price .ft-old{ color:var(--ft-muted); font-size:13px; text-decoration:line-through; margin-inline-start:6px; }
.ft-card .ft-pq{ font-family:var(--ft-disp); color:var(--ft-muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
[dir="rtl"] .ft-card .ft-pq{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-mini{ font-family:var(--ft-disp); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; padding:11px 16px; cursor:pointer; border:0; transition:.25s; white-space:nowrap; }
[dir="rtl"] .ft-mini{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; }
.ft-mini.add{ background:var(--ft-teal); color:#04202b; } .ft-mini.add:hover{ background:var(--ft-teal-2); }
.ft-mini.req{ background:transparent; color:#fff; border:1px solid var(--ft-line-2); } .ft-mini.req:hover{ border-color:var(--ft-teal); color:var(--ft-teal); }
.ft-card .ft-wl{ position:absolute; top:12px; inset-inline-end:12px; z-index:3; width:34px; height:34px; border:1px solid var(--ft-line-2); background:rgba(4,21,40,.55); color:#fff; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:.2s; }
.ft-card .ft-wl:hover,.ft-card .ft-wl.wishlisted{ color:var(--ft-teal); border-color:var(--ft-teal); }

/* ============================================================
   7 · FEATURES → "LEADING TECHNOLOGY" ICON GRID
   ============================================================ */
.ft-lead{ background:linear-gradient(180deg,var(--ft-ink),var(--ft-navy-3)); padding:92px 0; }
.ft-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ft-fc{ background:var(--ft-panel); border:1px solid var(--ft-line); padding:32px 28px; display:flex; gap:20px; align-items:flex-start; transition:.3s var(--ft-ease); }
.ft-fc:hover{ border-color:var(--ft-teal); background:var(--ft-panel-2); transform:translateY(-4px); }
.ft-fc .ft-ic{ flex:none; width:54px; height:54px; background:rgba(0,200,182,.1); border:1px solid var(--ft-teal); display:flex; align-items:center; justify-content:center; font-size:24px; }
.ft-fc .ft-ic svg{ width:26px; height:26px; stroke:var(--ft-teal); fill:none; stroke-width:1.6; }
.ft-fc h3{ font-family:var(--ft-disp); text-transform:uppercase; font-size:17px; color:#fff; margin-bottom:6px; }
[dir="rtl"] .ft-fc h3{ font-family:var(--ft-ar); text-transform:none; }
.ft-fc p{ font-size:14px; color:var(--ft-muted); }

/* ============================================================
   8 · WHY-CHOOSE → "CORPORATE CULTURE" GRID
   ============================================================ */
.ft-culture{ background:var(--ft-navy-3); padding:92px 0; }
.ft-cult-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ft-cult{ position:relative; overflow:hidden; border:1px solid var(--ft-line); background:var(--ft-panel); padding:34px 30px; min-height:220px; transition:.3s var(--ft-ease); display:flex; flex-direction:column; }
.ft-cult:hover{ border-color:var(--ft-teal); transform:translateY(-5px); background:var(--ft-panel-2); }
.ft-cult img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; }
.ft-cult .ft-cult-ic{ position:relative; width:54px; height:54px; border:1px solid var(--ft-teal); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; background:rgba(0,200,182,.08); color:var(--ft-teal); }
.ft-cult h3{ position:relative; font-family:var(--ft-disp); text-transform:uppercase; font-size:20px; color:#fff; margin-bottom:8px; }
[dir="rtl"] .ft-cult h3{ font-family:var(--ft-ar); text-transform:none; }
.ft-cult p{ position:relative; color:var(--ft-muted-2); font-size:15px; }
.ft-culture-head{ display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:44px; }

/* ============================================================
   9 · STORY → "ABOUT" (media + stats + text)
   ============================================================ */
.ft-about{ background:var(--ft-ink); padding:96px 0; position:relative; overflow:hidden; }
.ft-about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.ft-about-media{ position:relative; }
.ft-about-media img{ width:100%; height:460px; object-fit:cover; border:1px solid var(--ft-line); }
.ft-about-badge{ position:absolute; inset-inline-end:-18px; bottom:-18px; background:var(--ft-teal); color:#04202b; padding:22px 28px; font-family:var(--ft-disp); }
.ft-about-badge b{ display:block; font-size:44px; line-height:1; }
.ft-about-badge span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
[dir="rtl"] .ft-about-badge span{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-about-text h2{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(28px,3.8vw,46px); color:#fff; margin-bottom:20px; }
[dir="rtl"] .ft-about-text h2{ font-family:var(--ft-ar); text-transform:none; }
.ft-about-text p{ color:var(--ft-muted); font-size:16.5px; margin-bottom:28px; white-space:pre-line; }
.ft-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
.ft-stat b{ font-family:var(--ft-disp); font-size:38px; color:var(--ft-teal); display:block; line-height:1; }
.ft-stat span{ font-size:12.5px; color:var(--ft-muted); letter-spacing:.03em; }

/* ============================================================
   10 · CONTACT → "REQUEST A QUOTE" CTA + FORM
   ============================================================ */
.ft-quote{ background:linear-gradient(120deg,var(--ft-navy),var(--ft-navy-2)); position:relative; overflow:hidden; padding:96px 0; }
.ft-quote:before{ content:""; position:absolute; top:-60px; inset-inline-end:-60px; width:340px; height:340px; border:60px solid rgba(0,200,182,.08); transform:rotate(45deg); }
.ft-q-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; }
.ft-q-info h2{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(28px,3.8vw,46px); color:#fff; margin-bottom:18px; }
[dir="rtl"] .ft-q-info h2{ font-family:var(--ft-ar); text-transform:none; }
.ft-q-info p{ color:var(--ft-muted-2); font-size:16.5px; margin-bottom:28px; }
.ft-q-line{ display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:16px; color:#fff; }
.ft-q-line svg{ width:22px; height:22px; fill:var(--ft-teal); flex:none; }
.ft-q-form{ background:rgba(4,21,40,.6); border:1px solid var(--ft-line-2); padding:36px; }
.ft-q-form h3{ font-family:var(--ft-disp); text-transform:uppercase; font-size:21px; margin-bottom:22px; color:#fff; }
[dir="rtl"] .ft-q-form h3{ font-family:var(--ft-ar); text-transform:none; }
.ft-field{ margin-bottom:16px; }
.ft-field input,.ft-field select,.ft-field textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--ft-line-2); color:#fff; padding:14px 16px; font-family:inherit; font-size:15px; border-radius:2px; transition:.2s; }
.ft-field input:focus,.ft-field select:focus,.ft-field textarea:focus{ outline:0; border-color:var(--ft-teal); background:rgba(0,200,182,.06); }
.ft-field input::placeholder,.ft-field textarea::placeholder{ color:var(--ft-muted); }
.ft-field select{ appearance:none; cursor:pointer; }
.ft-q-form .ft-btn-teal{ width:100%; justify-content:center; margin-top:6px; }
.ft-q-note{ font-size:12.5px; color:var(--ft-muted); margin-top:14px; text-align:center; }

/* ============================================================
   11 · NEWSLETTER (dark band)
   ============================================================ */
.ft-news{ background:var(--ft-navy-2); border-block:1px solid var(--ft-line); padding:70px 0; text-align:center; }
.ft-news h2{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(24px,3.4vw,38px); color:#fff; margin-bottom:12px; }
[dir="rtl"] .ft-news h2{ font-family:var(--ft-ar); text-transform:none; }
.ft-news p{ color:var(--ft-muted); font-size:16px; margin-bottom:26px; }
.ft-news-form{ display:flex; gap:10px; max-width:520px; margin:0 auto; flex-wrap:wrap; }
.ft-news-form input{ flex:1; min-width:220px; background:rgba(255,255,255,.05); border:1px solid var(--ft-line-2); color:#fff; padding:14px 16px; font-family:inherit; font-size:15px; border-radius:2px; }
.ft-news-form input:focus{ outline:0; border-color:var(--ft-teal); }
.ft-news-form input::placeholder{ color:var(--ft-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .ft-prod-grid{ grid-template-columns:repeat(2,1fr); }
  .ft-cat-grid,.ft-feat-grid,.ft-cult-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:860px){
  .ft-hero{ height:auto; min-height:0; max-height:none; }
  .ft-hero-slide{ position:relative; display:none; }
  .ft-hero-slide.active{ display:block; }
  .ft-hero-slide .ft-hero-bg{ position:absolute; }
  .ft-hero-inner{ padding:120px 24px 92px; }
  .ft-hero-content{ max-width:100%; }
  .ft-hero-content h2{ font-size:clamp(30px,8vw,44px); }
  .ft-hero-nav{ display:none; }
  .ft-about-grid,.ft-q-grid{ grid-template-columns:1fr; gap:40px; }
  .ft-stats{ grid-template-columns:1fr 1fr; }
  body.theme-fab-tech .home-section{ padding:60px 0; }
}
@media(max-width:620px){
  .ft-cats,.ft-prods,.ft-lead,.ft-culture,.ft-about,.ft-quote{ padding:60px 0; }
  .ft-prod-grid,.ft-cat-grid,.ft-feat-grid,.ft-cult-grid,.ft-stats{ grid-template-columns:1fr; }
  .ft-about-media img{ height:340px; }
  .ft-sec-head h2{ font-size:28px; }
}

/* ============================================================
   12 · HEADER OVERRIDE — TOPBAR + NAV + MEGA MENU
   ============================================================ */
/* Topbar (contact strip, scrolls away above the sticky header) */
.ft-topbar{ background:var(--ft-navy-3); border-bottom:1px solid var(--ft-line); font-size:13px; color:var(--ft-muted); }
.ft-topbar-inner{ max-width:1280px; margin:0 auto; padding:0 28px; height:40px; display:flex; align-items:center; justify-content:space-between; }
.ft-topbar-l{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ft-ti{ display:inline-flex; align-items:center; gap:7px; color:var(--ft-muted); }
.ft-ti:hover{ color:var(--ft-teal); }
.ft-ti svg{ width:14px; height:14px; fill:var(--ft-teal); flex:none; }

/* Sticky header bar */
header.ft-hdr{ position:sticky; top:0; z-index:90; background:rgba(6,29,55,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--ft-line); }
.ft-nav-wrap{ max-width:1280px; margin:0 auto; padding:0 28px; height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ft-logo{ display:flex; align-items:center; gap:12px; height:100%; flex:none; }
.ft-logo img{ height:48px; width:auto; }
.ft-logo-txt{ font-family:var(--ft-disp); font-weight:800; font-size:22px; color:#fff; letter-spacing:.04em; }
.ft-logo-sub{ font-family:var(--ft-disp); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--ft-muted); text-transform:uppercase; line-height:1.15; border-inline-start:1px solid var(--ft-line-2); padding-inline-start:12px; max-width:120px; }
[dir="rtl"] .ft-logo-sub{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-menu{ display:flex; align-items:center; gap:2px; height:100%; list-style:none; margin:0; padding:0; }
.ft-menu>li{ height:100%; display:flex; align-items:center; }
.ft-menu>li>a{ font-family:var(--ft-disp); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:14px; color:var(--ft-muted-2); padding:0 15px; height:100%; display:flex; align-items:center; gap:6px; transition:.2s; }
[dir="rtl"] .ft-menu>li>a{ font-family:var(--ft-ar); text-transform:none; letter-spacing:0; font-weight:700; font-size:16px; }
.ft-menu>li>a:hover,.ft-menu>li>a.active{ color:var(--ft-teal); }
.ft-caret{ font-size:9px; opacity:.7; transition:.25s; }
.ft-has-mega.ft-open>a .ft-caret{ transform:rotate(180deg); }
.ft-actions{ display:flex; align-items:center; gap:14px; flex:none; }
.ft-lang{ display:flex; align-items:center; gap:6px; font-family:var(--ft-disp); font-weight:700; font-size:13px; letter-spacing:.08em; color:var(--ft-muted-2); border:1px solid var(--ft-line-2); padding:8px 13px; border-radius:2px; transition:.2s; text-transform:uppercase; }
.ft-lang:hover{ border-color:var(--ft-teal); color:var(--ft-teal); }
[dir="rtl"] .ft-lang{ font-family:var(--ft-ar); }
.ft-cart{ position:relative; background:none; border:0; cursor:pointer; color:var(--ft-muted-2); display:flex; align-items:center; padding:0; transition:.2s; }
.ft-cart:hover{ color:var(--ft-teal); }
.ft-cart svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; }
.ft-cart-cnt{ position:absolute; top:-8px; inset-inline-end:-9px; background:var(--ft-teal); color:#04202b; font-family:var(--ft-body); font-weight:800; font-size:11px; min-width:18px; height:18px; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 4px; }
.ft-cart-cnt.show{ display:flex; }
.ft-cta{ padding:11px 20px !important; font-size:13px !important; }
.ft-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:0; }
.ft-burger span{ width:26px; height:2px; background:#fff; }

/* Mega menu */
.ft-mega{ position:fixed; left:0; right:0; top:118px; background:rgba(7,32,60,.985); backdrop-filter:blur(14px); border-top:1px solid var(--ft-teal); border-bottom:1px solid var(--ft-line); box-shadow:0 30px 70px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translateY(-12px); transition:.26s var(--ft-ease); z-index:80; }
.ft-mega.open{ opacity:1; visibility:visible; transform:translateY(0); }
.ft-mega-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:300px 1fr; min-height:380px; }
.ft-mega-cats{ border-inline-end:1px solid var(--ft-line); padding:18px 0; }
.ft-mc{ display:flex; align-items:center; gap:14px; width:100%; background:transparent; border:0; color:var(--ft-muted-2); font-family:var(--ft-body); font-size:15px; padding:13px 26px; cursor:pointer; transition:.2s; text-align:start; border-inline-start:3px solid transparent; }
[dir="rtl"] .ft-mc{ font-family:var(--ft-ar); }
.ft-mc:hover,.ft-mc.active{ color:#fff; background:rgba(0,200,182,.07); border-inline-start-color:var(--ft-teal); }
.ft-mc-ic{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--ft-line-2); display:flex; align-items:center; justify-content:center; color:var(--ft-teal); font-size:17px; transition:.25s; }
.ft-mc:hover .ft-mc-ic,.ft-mc.active .ft-mc-ic{ background:var(--ft-teal); border-color:var(--ft-teal); color:#04202b; }
.ft-mega-stage{ position:relative; }
.ft-mega-panel{ display:none; grid-template-columns:1fr 1.5fr; height:100%; }
.ft-mega-panel.active{ display:grid; }
.ft-mega-feature{ position:relative; overflow:hidden; display:block; border-inline-end:1px solid var(--ft-line); background:var(--ft-navy-2); min-height:380px; }
.ft-mega-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:.5s var(--ft-ease); }
.ft-mega-feature:hover img{ opacity:.64; transform:scale(1.05); }
.ft-mega-feature:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,29,55,.2),rgba(4,21,40,.9)); }
.ft-mega-feat-card{ position:absolute; inset-inline-start:26px; bottom:26px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; }
.ft-mega-feat-k{ font-family:var(--ft-disp); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--ft-teal); margin-bottom:8px; }
[dir="rtl"] .ft-mega-feat-k{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-mega-feat-t{ font-family:var(--ft-disp); text-transform:uppercase; font-size:23px; color:#fff; margin-bottom:14px; max-width:240px; }
[dir="rtl"] .ft-mega-feat-t{ font-family:var(--ft-ar); text-transform:none; }
.ft-mega-prods{ padding:26px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-content:start; }
.ft-mp{ background:var(--ft-panel); border:1px solid var(--ft-line); transition:.25s var(--ft-ease); display:flex; flex-direction:column; }
.ft-mp:hover{ border-color:var(--ft-teal); transform:translateY(-4px); }
.ft-mp-img{ height:118px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ft-mp-img img{ height:100%; width:100%; object-fit:contain; padding:10px; }
.ft-mp-b{ padding:12px; }
.ft-mp-t{ display:block; font-family:var(--ft-body); font-size:13px; color:#fff; font-weight:600; line-height:1.3; margin-bottom:6px; }
[dir="rtl"] .ft-mp-t{ font-family:var(--ft-ar); }
.ft-mp-m{ display:block; font-size:12px; color:var(--ft-teal); font-weight:600; }
.ft-mp-empty{ grid-column:1/-1; color:var(--ft-muted); padding:24px; }

/* ============================================================
   13 · CORE COMPONENTS — HORIZONTAL ACCORDION
   ============================================================ */
.ft-pillars{ background:var(--ft-navy-3); position:relative; overflow:hidden; padding:92px 0; }
.ft-acc{ display:flex; gap:10px; height:560px; }
.ft-acc-panel{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; border:1px solid var(--ft-line); transition:flex-grow .55s var(--ft-ease),border-color .3s; background:var(--ft-navy-2); }
.ft-acc-panel.active{ flex-grow:4.2; border-color:var(--ft-teal); }
.ft-acc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; transition:.6s var(--ft-ease); transform:scale(1.05); }
.ft-acc-panel.active .ft-acc-bg{ opacity:.6; transform:scale(1); }
.ft-acc-panel:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,29,55,.35),rgba(4,21,40,.92)); }
.ft-acc-num{ position:absolute; top:26px; inset-inline-end:28px; z-index:3; font-family:var(--ft-disp); font-size:13px; letter-spacing:.3em; color:var(--ft-teal); opacity:.8; }
.ft-acc-title{ position:absolute; top:26px; inset-inline-start:28px; z-index:3; font-family:var(--ft-disp); font-size:30px; color:#fff; text-transform:uppercase; white-space:nowrap; }
[dir="rtl"] .ft-acc-title{ font-family:var(--ft-ar); text-transform:none; }
.ft-acc-sub{ display:block; font-size:11px; letter-spacing:.2em; color:var(--ft-teal); margin-top:4px; }
[dir="rtl"] .ft-acc-sub{ font-family:var(--ft-ar); letter-spacing:0; }
.ft-acc-content{ position:absolute; inset-inline-start:28px; inset-inline-end:28px; bottom:34px; z-index:3; opacity:0; transform:translateY(22px); transition:.45s var(--ft-ease); max-width:560px; }
.ft-acc-panel.active .ft-acc-content{ opacity:1; transform:none; transition-delay:.18s; }
.ft-acc-ic{ width:54px; height:54px; border:1px solid var(--ft-teal); display:flex; align-items:center; justify-content:center; margin-bottom:20px; background:rgba(0,200,182,.08); color:var(--ft-teal); font-size:24px; }
.ft-acc-content ul{ list-style:none; margin:0; padding:0; }
.ft-acc-content li{ padding:9px 0; border-bottom:1px solid var(--ft-line); font-size:14.5px; color:var(--ft-muted-2); display:flex; gap:12px; }
.ft-acc-content li:before{ content:""; flex:none; width:7px; height:7px; background:var(--ft-teal); transform:rotate(45deg); margin-top:8px; }

/* ============================================================
   14 · SUB-PAGE HERO (About etc.)
   ============================================================ */
.ft-page-hero{ position:relative; overflow:hidden; background:var(--ft-navy-2); padding:72px 0; border-bottom:2px solid var(--ft-teal); }
.ft-page-hero h1{ font-family:var(--ft-disp); text-transform:uppercase; font-size:clamp(32px,5vw,56px); color:#fff; }
[dir="rtl"] .ft-page-hero h1{ font-family:var(--ft-ar); text-transform:none; }
.ft-page-hero p{ color:var(--ft-muted-2); font-size:17px; margin-top:14px; max-width:640px; }

/* ============================================================
   15 · SHARED MOBILE MENU — dark skin (reused via openMobileMenu)
   ============================================================ */
body.theme-fab-tech .mobile-slide-menu{ background:var(--ft-navy-3) !important; }
body.theme-fab-tech .mobile-slide-menu a,
body.theme-fab-tech .mobile-slide-menu .mm-cat-name,
body.theme-fab-tech .mobile-slide-menu .mm-menu-link{ color:var(--ft-muted-2) !important; }
body.theme-fab-tech .mobile-slide-menu .mm-cat-icon{ color:var(--ft-teal) !important; }

/* ============================================================
   RESPONSIVE — header
   ============================================================ */
@media(max-width:1080px){
  .ft-mega-prods .ft-mp:nth-child(3){ display:none; }
  .ft-mega-prods{ grid-template-columns:1fr 1fr; }
}
@media(max-width:900px){
  .ft-topbar{ display:none; }
  .ft-menu{ display:none; }
  .ft-cta{ display:none; }
  .ft-logo-sub{ display:none; }
  .ft-lang span{ display:none; }
  .ft-lang{ padding:9px 10px; }
  .ft-burger{ display:flex; }
  .ft-mega{ display:none; }
  .ft-nav-wrap{ height:62px; }
  header.ft-hdr{ top:0; }
  .ft-acc{ flex-direction:column; height:auto; gap:10px; }
  .ft-acc-panel{ flex:none; height:88px; transition:height .5s var(--ft-ease); }
  .ft-acc-panel.active{ height:440px; }
  .ft-acc-title{ font-size:24px; }
}