/* ============================================================
   ElMasdar — Vendoline theme  ·  "Market Source"
   This skin is a 1:1 port of the standalone home.html brand page:
   navy + teal, signature wave dividers, full-bleed hero SLIDER,
   white file-cards with round teal "تخفيض!" badges, the
   "ليه تختار ElMasdar؟" why-block and the "من نحن؟" navy→teal band.
   All bespoke classes are  el-*  and scoped under  body.theme-elmasdar
   so nothing leaks into admin or other themes. The hero slide/dot
   elements keep their .hero-slide / .hero-dot names so the shared
   store.js slider engine (autoplay + swipe + arrows + dots) drives them.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

body.theme-elmasdar,
.tpl-scope-elmasdar{
  --navy:#1C4386; --navy-2:#17356B; --navy-3:#0F2650;
  --teal:#1EC5CD; --teal-2:#17A9B0; --teal-soft:#BFEFF1;
  --lav:#EEF0FE; --page:#F5F6FF;
  --ink:#16233B; --muted:#5A6B86; --line:#E6E9F6; --white:#fff;
  --ar:'Cairo', -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 44px rgba(28,67,134,.14);
  --shadow-sm:0 8px 22px rgba(28,67,134,.09);
  --maxw:1180px;
}

/* ── Base canvas ─────────────────────────────────────────── */
body.theme-elmasdar{ background:var(--page); font-family:var(--ar); color:var(--ink); }
body.theme-elmasdar main,
body.theme-elmasdar .store-main,
body.theme-elmasdar .page-content{ background:transparent; }
body.theme-elmasdar h1,body.theme-elmasdar h2,body.theme-elmasdar h3,body.theme-elmasdar h4{
  font-family:var(--ar); color:var(--navy); letter-spacing:-.01em;
}
/* Brand color ONLY for plain content links (no class). Buttons, shop pills, nav
   links etc. all carry a class, so they keep their own text color — otherwise the
   navy link color lands as navy text on navy/teal buttons and turns them blank. */
body.theme-elmasdar a:not([class]){ color:var(--navy); }
body.theme-elmasdar a:not([class]):hover{ color:var(--teal-2); }
/* Button text colors, pinned above the generic link color with scoped specificity. */
body.theme-elmasdar .el-btn-navy,
body.theme-elmasdar .el-btn-navy:hover{ color:#fff; }
body.theme-elmasdar .el-btn-ghost{ color:#fff; }
body.theme-elmasdar .el-btn-ghost:hover{ color:var(--navy); }
body.theme-elmasdar .el-btn-teal{ color:#06343a; }
body.theme-elmasdar .el-btn-teal:hover{ color:#fff; }
body.theme-elmasdar :focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }
.el-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ── Buttons ─────────────────────────────────────────────── */
.el-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ar);
  font-weight:800; cursor:pointer; border:0; border-radius:10px; text-decoration:none;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease); }
.el-btn-navy{ background:var(--navy); color:#fff; box-shadow:0 10px 22px rgba(28,67,134,.22); padding:12px 26px; }
.el-btn-navy:hover{ background:var(--navy-2); color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px rgba(28,67,134,.30); }
.el-btn-teal{ background:var(--teal); color:#06343a; box-shadow:0 10px 22px rgba(30,197,205,.30); padding:12px 26px; }
.el-btn-teal:hover{ background:var(--teal-2); color:#fff; transform:translateY(-2px); }
.el-btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.9); padding:13px 36px; font-size:16px; }
.el-btn-ghost:hover{ background:#fff; color:var(--navy); transform:translateY(-2px); }

/* ── Logo mark (used in cards/footer) ────────────────────── */
.el-logo{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; gap:3px; }
.el-logo .el-word{ display:inline-flex; align-items:center; font-weight:900; font-size:28px; color:var(--navy); letter-spacing:.5px; }
.el-logo .el-lens{ width:22px; height:22px; margin:0 1px; transform:translateY(2px); }
.el-logo .el-tag{ font-size:9.5px; letter-spacing:4px; color:var(--navy); font-weight:700; opacity:.85; }
.el-logo.lg .el-word{ font-size:40px; } .el-logo.lg .el-lens{ width:31px; height:31px; } .el-logo.lg .el-tag{ font-size:12px; letter-spacing:5px; }

/* ============================================================
   HERO — full-bleed wave slider (store.js engine)
   ============================================================ */
body.theme-elmasdar .el-hero{ position:relative; background:var(--navy-3); overflow:hidden; isolation:isolate; }
body.theme-elmasdar .el-hero-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(30,197,205,.32) 0%, rgba(30,197,205,0) 55%),
    linear-gradient(180deg,#0F2650 0%,#17356B 55%,#0F2650 100%); }
body.theme-elmasdar .el-hero-bg::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(150,180,235,.16) 1.3px, transparent 1.4px); background-size:46px 46px; }
body.theme-elmasdar .el-hero-bg::after{ content:""; position:absolute; inset:0; opacity:.35;
  background:repeating-linear-gradient(115deg, transparent 0 88px, rgba(150,180,235,.10) 88px 89px); }
body.theme-elmasdar .el-hero-track{ position:relative; z-index:2; }
body.theme-elmasdar .el-hero .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease); display:flex; align-items:center; justify-content:center; text-align:center; }
body.theme-elmasdar .el-hero .hero-slide.active{ position:relative; opacity:1; visibility:visible; }
body.theme-elmasdar .el-hero .hero-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
body.theme-elmasdar .el-hero-content{ position:relative; z-index:2; max-width:900px; padding:130px 24px 150px; color:#fff; }
body.theme-elmasdar .el-hero-sub{ font-weight:700; font-size:clamp(15px,2.4vw,20px); color:#DCE6FB; margin-bottom:20px; line-height:1.7; }
body.theme-elmasdar .el-hero-title{ font-weight:900; color:#fff; font-size:clamp(23px,4.4vw,42px); line-height:1.5; margin-bottom:32px; text-shadow:0 2px 22px rgba(0,0,0,.3); }
/* waves */
body.theme-elmasdar .el-wave-top{ position:absolute; top:-1px; left:0; width:100%; z-index:3; line-height:0; pointer-events:none; }
body.theme-elmasdar .el-wave-bottom{ position:absolute; bottom:-1px; left:0; width:100%; z-index:3; line-height:0; pointer-events:none; }
body.theme-elmasdar .el-wave-top svg,body.theme-elmasdar .el-wave-bottom svg{ width:100%; height:auto; display:block; }
/* arrows + dots */
body.theme-elmasdar .el-hero-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:48px; height:48px;
  border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; font-size:26px;
  backdrop-filter:blur(3px); transition:background .2s,color .2s; }
body.theme-elmasdar .el-hero-nav:hover{ background:var(--teal); color:#06343a; }
body.theme-elmasdar .el-hero-nav.prev{ right:20px; } body.theme-elmasdar .el-hero-nav.next{ left:20px; }
body.theme-elmasdar .el-hero-dots{ position:absolute; bottom:52px; left:0; width:100%; z-index:5; display:flex; gap:10px; justify-content:center; }
body.theme-elmasdar .el-hero .hero-dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.25s; }
body.theme-elmasdar .el-hero .hero-dot.active{ background:var(--teal); width:30px; border-radius:8px; }
@media (max-width:900px){
  body.theme-elmasdar .el-hero-content{ padding:96px 18px 116px; }
  body.theme-elmasdar .el-hero-nav{ display:none; }
}

/* ============================================================
   SECTION HEADERS — bordered "title box" with side rules
   ============================================================ */
body.theme-elmasdar .el-products,
body.theme-elmasdar .el-why,
body.theme-elmasdar .el-about-outer{ padding:64px 0; position:relative; }
body.theme-elmasdar .el-titlebox{ text-align:center; position:relative; margin-bottom:40px; }
body.theme-elmasdar .el-titlebox::before{ content:""; position:absolute; top:50%; left:4%; right:4%; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent); z-index:0; }
body.theme-elmasdar .el-titlebox h2{ display:inline-block; position:relative; z-index:1; font-size:clamp(20px,3vw,28px);
  font-weight:800; color:var(--navy); padding:13px 32px; background:var(--page); border:1px solid var(--line); border-radius:12px; }

/* ── Products ────────────────────────────────────────────── */
body.theme-elmasdar .el-products{ background:var(--page); }
body.theme-elmasdar .el-prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:840px; margin:0 auto; }
body.theme-elmasdar .el-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s; display:flex; flex-direction:column; }
body.theme-elmasdar .el-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal-soft); }
body.theme-elmasdar .el-card-media{ position:relative; aspect-ratio:4/3; background:#fff; display:flex; align-items:center; justify-content:center; padding:16px; border-bottom:1px solid var(--line); }
body.theme-elmasdar .el-card-media img{ max-height:100%; width:auto; object-fit:contain; }
body.theme-elmasdar .el-sale-badge{ position:absolute; top:14px; inset-inline-start:14px; z-index:3; width:66px; height:66px; border-radius:50%;
  background:var(--teal); color:#06343a; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(30,197,205,.35); border:3px solid #fff; }
body.theme-elmasdar .el-card-body{ padding:18px 18px 20px; text-align:start; display:flex; flex-direction:column; flex:1; }
body.theme-elmasdar .el-card-eyebrow{ font-size:12px; color:#9AA6BF; font-weight:700; margin-bottom:8px; }
body.theme-elmasdar .el-card-title{ font-weight:800; color:var(--navy); font-size:16px; line-height:1.6; margin-bottom:14px; text-decoration:none; }
body.theme-elmasdar a.el-card-title:hover{ color:var(--teal-2); }
body.theme-elmasdar .el-card-price{ margin-top:auto; display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
body.theme-elmasdar .el-card-price .el-now{ font-weight:900; color:var(--navy); font-size:22px; }
body.theme-elmasdar .el-card-price .el-old{ color:#9AA6BF; text-decoration:line-through; font-weight:700; font-size:15px; }
body.theme-elmasdar .el-card .el-btn-navy{ width:100%; padding:12px; }

/* ── Why choose ──────────────────────────────────────────── */
body.theme-elmasdar .el-why{ background:#fff; }
body.theme-elmasdar .el-why-grid{ display:grid; grid-template-columns:.9fr 1.6fr; gap:44px; align-items:start; }
body.theme-elmasdar .el-why-head{ position:sticky; top:110px; text-align:start; }
body.theme-elmasdar .el-why-head h2{ font-size:clamp(22px,3.2vw,32px); color:var(--navy); font-weight:900; margin-bottom:22px; line-height:1.35; }
body.theme-elmasdar .el-feat{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
body.theme-elmasdar .el-feat:last-child{ border-bottom:0; }
body.theme-elmasdar .el-feat-ico{ flex:0 0 62px; width:62px; height:62px; color:var(--teal-2); }
body.theme-elmasdar .el-feat-ico svg{ width:100%; height:100%; }
body.theme-elmasdar .el-feat-body h3{ color:var(--navy); font-weight:800; font-size:19px; margin-bottom:10px; line-height:1.45; }
body.theme-elmasdar .el-feat-body p{ color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:10px; }
body.theme-elmasdar .el-feat-list{ list-style:none; display:grid; gap:8px; margin:6px 0 10px; padding:0; }
body.theme-elmasdar .el-feat-list li{ position:relative; padding-inline-start:28px; color:var(--ink); font-weight:600; line-height:1.7; }
body.theme-elmasdar .el-feat-list li::before{ content:"✔"; position:absolute; inset-inline-start:0; top:0; color:var(--teal-2); font-weight:900; }
body.theme-elmasdar .el-feat-foot{ color:var(--muted); font-size:14.5px; line-height:1.8; }

/* ── About (navy → teal split) ───────────────────────────── */
body.theme-elmasdar .el-about-outer{ padding:0; }
body.theme-elmasdar .el-about{ background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 58%,var(--teal) 58%,var(--teal) 100%); padding:70px 0 90px; position:relative; }
body.theme-elmasdar .el-about-head{ text-align:center; color:#fff; max-width:780px; margin:0 auto 46px; }
body.theme-elmasdar .el-about-head h2{ font-size:clamp(30px,5vw,46px); font-weight:900; margin-bottom:24px; color:#fff; display:inline-flex; align-items:center; gap:20px; }
body.theme-elmasdar .el-about-head h2::before,body.theme-elmasdar .el-about-head h2::after{ content:""; width:clamp(40px,10vw,150px); height:1px; background:rgba(255,255,255,.4); }
body.theme-elmasdar .el-about-head p{ color:#DCE6FB; font-size:clamp(15px,2.2vw,18px); line-height:1.9; font-weight:600; }
body.theme-elmasdar .el-about-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:900px; margin:0 auto; align-items:stretch; }
body.theme-elmasdar .el-about-card{ background:#fff; border-radius:22px; padding:34px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:center; }
body.theme-elmasdar .el-about-card .el-shield{ width:96px; height:110px; margin:0 auto 10px; }
body.theme-elmasdar .el-about-card h3{ color:var(--navy); font-weight:900; font-size:24px; margin-bottom:16px; }
body.theme-elmasdar .el-about-card p{ color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:12px; }
body.theme-elmasdar .el-about-lead{ color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:14px; }
body.theme-elmasdar .el-about-bullets{ list-style:none; text-align:start; display:grid; gap:14px; margin:6px auto 16px; max-width:340px; padding:0; }
body.theme-elmasdar .el-about-bullets li{ position:relative; padding-inline-end:22px; color:var(--muted); font-size:16px; line-height:1.6; }
body.theme-elmasdar .el-about-bullets li::before{ content:"•"; position:absolute; inset-inline-end:0; top:-2px; color:var(--muted); font-size:20px; }
body.theme-elmasdar .el-about-card .el-btn-teal{ margin-top:auto; align-self:stretch; padding:13px; }

@media (max-width:900px){
  body.theme-elmasdar .el-why-grid{ grid-template-columns:1fr; gap:16px; }
  body.theme-elmasdar .el-why-head{ position:static; }
  body.theme-elmasdar .el-prod-grid{ gap:16px; }
  body.theme-elmasdar .el-about-grid{ grid-template-columns:1fr; }
  body.theme-elmasdar .el-about{ background:linear-gradient(to bottom,var(--navy) 0,var(--navy) 40%,var(--teal) 40%,var(--teal) 100%); }
}
@media (max-width:520px){
  body.theme-elmasdar .el-prod-grid{ grid-template-columns:1fr; max-width:340px; }
  body.theme-elmasdar .el-card-title{ font-size:15px; }
}

/* ============================================================
   VENDOLINE BRIDGES — header / footer / whatsapp float
   (the store's own markup, tuned to the home.html look)
   ============================================================ */
body.theme-elmasdar .store-header{ border-bottom:1px solid var(--line); box-shadow:0 2px 18px rgba(28,67,134,.05); }
body.theme-elmasdar .store-header.scrolled{ box-shadow:0 6px 26px rgba(28,67,134,.12); }
body.theme-elmasdar .header-nav a,body.theme-elmasdar .nav-items a{ font-weight:700; }
body.theme-elmasdar .header-nav a:hover,body.theme-elmasdar .nav-items a:hover,
body.theme-elmasdar .header-action-btn:hover,body.theme-elmasdar .header-lang:hover{ color:var(--teal-2); }
body.theme-elmasdar .header-search-btn,body.theme-elmasdar .search-submit{ background:var(--teal); color:#083236; }
body.theme-elmasdar .header-search-btn:hover,body.theme-elmasdar .search-submit:hover{ background:var(--teal-2); color:#fff; }
body.theme-elmasdar .btn-primary,body.theme-elmasdar .btn-buy-now{ background:var(--navy); color:#fff; border-radius:10px; font-weight:800; }
body.theme-elmasdar .btn-primary:hover,body.theme-elmasdar .btn-buy-now:hover{ background:var(--navy-2); color:#fff; }
/* footer */
body.theme-elmasdar .store-footer{ background:var(--navy-2); color:#C7D3EA; }
body.theme-elmasdar .store-footer a{ color:#C7D3EA; }
body.theme-elmasdar .store-footer a:hover{ color:var(--teal); }
body.theme-elmasdar .store-footer h4,body.theme-elmasdar .store-footer .footer-title{ color:#fff; }
/* whatsapp float → white "instapay / استفسارات" pill */
body.theme-elmasdar .whatsapp-float-label{ background:#fff; color:var(--navy); font-family:var(--ar); font-weight:800;
  border-radius:999px; padding:11px 18px; box-shadow:0 10px 24px rgba(28,67,134,.18); border:1px solid var(--line); white-space:nowrap; }
body.theme-elmasdar .whatsapp-float-ico{ box-shadow:0 12px 28px rgba(37,211,102,.5); }

/* ═══ Custom-section skins — imported/new generic sections wear ElMasdar ═══ */
body.theme-elmasdar .cs-faq-item{ background:#fff; border:1px solid var(--line,#E2E5F4); border-bottom:1px solid var(--line,#E2E5F4); border-radius:14px; box-shadow:0 6px 24px rgba(28,67,134,.06); margin-bottom:10px; }
body.theme-elmasdar .cs-faq-item:first-child{ border-top:1px solid var(--line,#E2E5F4); }
body.theme-elmasdar .cs-faq-q{ padding:20px 18px; color:var(--navy,#1C4386); }
body.theme-elmasdar .cs-faq-a{ padding:0 18px 20px; }
body.theme-elmasdar .cs-faq-item[open] .cs-faq-chev{ background:var(--amber,#F5A623); border-color:var(--amber,#F5A623); color:#1C4386; }
body.theme-elmasdar .cs-stat::before{ background:var(--amber,#F5A623); }
body.theme-elmasdar .cs-stat-num{ color:var(--navy,#1C4386); }
body.theme-elmasdar .cs-marquee-sep{ color:var(--amber,#F5A623); }
/* Emoji icon holder used when why-choose rows carry an emoji icon */
body.theme-elmasdar .el-feat-emoji{ font-size:40px; line-height:62px; display:block; text-align:center; }

/* ═══ SITE COLOR SCHEME support ═══ */
body[data-scheme].theme-elmasdar{
  --page:var(--bg,#F5F6FF); --lav:var(--bg-gray,#EEF0FE);
  --line:var(--border,#E6E9F6); --muted:var(--text-muted,#5A6B86);
  --ink:var(--text,#16233B);
}
body[data-scheme="dark"].theme-elmasdar .cs-faq-item,
body[data-scheme="dark"].theme-elmasdar .el-feat{ background:var(--surface); }
body[data-scheme="dark"].theme-elmasdar .el-feat-body h3,
body[data-scheme="dark"].theme-elmasdar .cs-faq-q{ color:var(--heading); }