/* ==========================================================================
   امبليوم — القلايات الهوائية (8 لتر، 12 لتر، 13 لتر طابقين)
   ملف تنسيق قائم بذاته لهذا الموقع وحده (أساسه صفحة عائلة امبليوم سابقة، ومعدَّل
   لثلاث موديلات). الألوان من هوية امبليوم نفسها (أزرق الكلمة #154A79، أخضر
   القابس) مثل باقي مواقع العلامة.
   ما فيه أي style= بالـHTML، فسياسة CSP ما تحتاج 'unsafe-inline'.
   ========================================================================== */
:root{
  --brand:#154A79; --brand-700:#10395E; --brand-900:#092C48; --brand-50:#EAF1F8;
  --accent:#5C8E26; --accent-600:#4B7A1E; --accent-300:#9AD05C; --accent-50:#F1F7E8;
  --bg:#F7F8FA; --white:#fff; --line:#E3E7EC; --ink:#14202B; --ink-2:#3C4652; --muted:#667280;
  --alert:#C6432F; --alert-50:#FDF1EE; --warn:#B7791F;
  --r-sm:12px; --r:18px; --r-lg:24px;
  --sh-sm:0 4px 14px rgba(9,44,72,.07); --sh:0 14px 38px rgba(9,44,72,.10);
  --max:1160px; --pad:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink-2);font-size:16px;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.35}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
.ns-pixel{display:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:3px solid var(--accent-300);outline-offset:2px}

/* ── أزرار ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-weight:800;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;box-shadow:0 10px 24px rgba(92,142,38,.28);transition:background .2s,transform .15s}
.btn:hover{background:var(--accent-600)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn--sm{padding:9px 18px;font-size:15px}
.btn--lg{padding:17px 28px;font-size:18px}
.btn--block{display:flex;width:100%}
.btn--wa{background:#1FA855;box-shadow:0 10px 24px rgba(31,168,85,.28)}

/* ── الشريط العلوي والهيدر ── */
/* شريط الإعلان: مسار فيه مجموعتان متطابقتان، كل وحدة أعرض من أي شاشة.
   الحركة تزيح المسار 50% = عرض مجموعة وحدة بالضبط، فآخر إطار مطابق
   بصرياً لأول إطار — حلقة بلا فراغ ولا قفزة. باتجاه اليمين لأن القراءة
   عربية (النص يدخل من اليسار). CSS فقط، بلا مؤقّتات. */
.ticker{background:var(--brand-900);color:#fff;font-size:13px;font-weight:700;overflow:hidden;direction:rtl;line-height:1.6}
.ticker__track{display:flex;width:max-content;animation:ticker-rtl 70s linear infinite;will-change:transform}
.ticker__group{display:flex;flex:none;align-items:center}
.ticker__item{display:inline-flex;align-items:center;gap:6px;padding:7px 0;white-space:nowrap;flex:none}
.ticker__ico{font-size:15px;line-height:1;display:inline-block}
.ticker__txt{line-height:1.6}
.ticker__dot{color:var(--accent-300);font-size:9px;padding:0 16px;flex:none}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.freeship{color:var(--accent-600);font-weight:800;font-size:14px;margin-top:6px}
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:62px}
.hdr__logo img{height:38px;width:auto}

/* ── اختيار الموديل ── */
.picker{padding:22px 0 8px}
.picker__title{font-size:clamp(22px,4.6vw,32px);font-weight:900;color:var(--brand)}
.picker__sub{color:var(--muted);margin-top:2px;font-size:15px}
/* ارتفاعات الأسطر مثبّتة على قيم البطاقة السابقة (12px×1.35 و14px×1.35)
   حتى ما يتغير ارتفاع البطاقة بإضافة الشارة والسعر السابق. */

/* ── صفحة المنتج ── */
.pdp{padding:18px 0 34px}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;align-items:start}
.pdp__grid > *,.order__grid > *{min-width:0}   /* شريط الصور القابل للتمرير ما يوسّع العمود */
.gallery__stage{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery__main{width:100%;height:100%;object-fit:contain}
.gallery__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumb{flex:none;width:74px;height:74px;border:2px solid var(--line);border-radius:12px;background:#fff;padding:3px;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb.is-on{border-color:var(--brand)}
.info__model{font-size:15px;color:var(--muted);font-weight:700}
.info__model > span{direction:ltr;unicode-bidi:isolate;color:var(--brand);font-weight:900}
.info__sku{font-size:12px;font-weight:500;color:var(--muted);margin-top:4px}
.info__sku span{direction:ltr;unicode-bidi:isolate}
.info__name{font-size:clamp(26px,4.4vw,36px);font-weight:900;margin-top:2px}
.info__tag{color:var(--ink-2);font-weight:700;margin-top:4px}
.info__desc{margin:14px 0 18px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px}
/* السعران متجاوران وبحجم متقارب: السابق رمادي مشطوب، والجديد أخضر عريض.
   الشارة بجانبهما، وتنزل لسطر خاص بالشاشات الضيقة جداً بدل ما تضغطهما. */
.price__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
.price__col{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.price__lbl{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px}
.price__was,.price__is{font-size:clamp(21px,6vw,32px);white-space:nowrap}
.price__was{color:#8A94A0;font-weight:700;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#8A94A0}
.price__is{color:var(--accent-600);font-weight:900}
.price__col--new .price__lbl{color:var(--accent-600)}
.price__badge{align-self:center;background:var(--alert);color:#fff;font-weight:900;border-radius:999px;padding:6px 14px;font-size:clamp(14px,3.6vw,16px);white-space:nowrap;box-shadow:0 6px 16px rgba(198,67,47,.25)}
.price__note{font-size:14px;color:var(--muted);margin-top:8px}
.price__note b{color:var(--accent-600)}
.stock{display:flex;align-items:center;gap:8px;font-weight:700;margin-top:12px;color:var(--accent-600)}
.stock__dot{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--accent-50)}
.stock.is-low{color:var(--warn)}
.stock.is-out{color:var(--alert)}
.assure{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:14px;font-weight:700;color:var(--ink-2)}

/* ── أقسام ── */
.sec{padding:40px 0}
.sec--white{background:#fff}
.sec--dark{background:var(--brand-900);color:#DCE6F0}
.sec--dark .sec__title{color:#fff}
.sec__title{font-size:clamp(22px,4vw,30px);font-weight:900;margin-bottom:18px}
.sec__sub{font-size:19px;font-weight:800;margin:26px 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card__t{font-size:18px;font-weight:800;color:var(--brand)}
.card__d{margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--brand-50);color:var(--brand-700);font-weight:700;border-radius:999px;padding:6px 14px}
.acc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.acc__i{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;text-align:center}
.acc__i img{width:100%;aspect-ratio:1/1;object-fit:contain}
.acc__n{font-weight:700;margin-top:6px;color:var(--ink);line-height:1.5}
.acc-sheet{margin:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;max-width:640px}
.specs{width:100%;border-collapse:collapse;max-width:760px}
.specs th,.specs td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.12);text-align:right;vertical-align:top}
.specs th{color:#fff;font-weight:700;width:46%}
.specs td{direction:rtl;unicode-bidi:plaintext}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.cmp{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
.cmp tr > :first-child{text-align:right;color:var(--ink);font-weight:700;background:var(--bg)}
.cmp .is-on{background:var(--brand-50)}
.cmp__pick{background:none;border:0;font-weight:800;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* ── الطلب ── */
.order{background:linear-gradient(180deg,var(--brand-50),var(--bg))}
.order__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}
.order__head p{margin-top:-8px}
.order__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh)}
.osel{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.osel__img{width:84px;height:84px;object-fit:contain;border:1px solid var(--line);border-radius:12px;flex:none}
.osel__txt{display:flex;flex-direction:column;line-height:1.5}
.osel__txt b{color:var(--ink);font-size:17px}
.osel__model,.osel__color{font-size:14px;color:var(--muted)}
.osel__model > span{unicode-bidi:isolate}
.fld{display:block;margin-bottom:12px}
.fld__l{display:block;font-weight:700;color:var(--ink);margin-bottom:4px}
.fld input,.fld select{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:#fff;color:var(--ink);min-height:48px}
.fld input:focus,.fld select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-50)}
.fld input.is-err,.fld select.is-err{border-color:var(--alert)}
.fld__err{display:none;color:var(--alert);font-size:14px;margin-top:4px}
.fld__err.is-on{display:block}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:46px;height:44px;border:0;background:#fff;font-size:22px;cursor:pointer;color:var(--brand)}
.qty button:disabled{color:#B9C2CC;cursor:not-allowed}
.qty output{min-width:44px;text-align:center;font-weight:800;color:var(--ink)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sum{margin:14px 0;background:var(--bg);border-radius:var(--r-sm);padding:10px 14px}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.sum dt{color:var(--muted)}
.sum dd{margin:0;font-weight:700;color:var(--ink);text-align:left}
.sum__total{border-top:1px dashed var(--line);margin-top:4px;padding-top:8px!important}
.sum__total dd{font-size:20px;color:var(--brand);font-weight:900}
.sum__save dd{color:var(--accent-600);font-size:14px}
.sum__ship dd{color:var(--accent-600)}
.sum__free dd{color:var(--accent-600);font-size:13px;font-weight:700}
.alert{background:var(--alert-50);color:var(--alert);border-radius:var(--r-sm);padding:10px 14px;font-weight:700;margin-bottom:10px}
.order__fine{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.done{text-align:center;padding:16px 4px}
.done__icon{width:62px;height:62px;border-radius:50%;background:var(--accent);color:#fff;font-size:32px;display:grid;place-items:center;margin:0 auto 10px}
.done h3{font-size:22px}
.done #doneId{font-weight:800;color:var(--brand);margin:6px 0}
.done .btn{margin-top:14px}

/* ── أسئلة ── */
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:8px;background:var(--bg)}
.faq summary{font-weight:800;color:var(--ink);cursor:pointer}
.faq details p{margin-top:6px}

/* ── فوتر ── */
.ftr{background:var(--brand-900);color:#C8D5E2;padding:28px 0 96px;font-size:14px}
.ftr__in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ftr__logo{height:34px;width:auto;border-radius:6px}
.ftr__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.ftr__nav a:hover{color:#fff}

/* ── شريط ثابت + واتساب ── */
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(9,44,72,.10);transform:translateY(110%);transition:transform .25s}
.sticky.is-on{transform:none}
.sticky__in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
.sticky__txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.sticky__txt b{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-model="nkg2"] .sticky__txt b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
.sticky__txt span{color:var(--brand);font-weight:800}
.wafloat{position:fixed;left:16px;bottom:84px;z-index:41;width:54px;height:54px;border-radius:50%;background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(31,168,85,.35)}
.wafloat svg{width:30px;height:30px}
.wafloat{transition:opacity .2s}
.wafloat.is-away{opacity:0;pointer-events:none}   /* ما يغطي حقول الاستمارة */

/* ── صفحات قانونية ── */
.legal{padding:30px 0 50px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(24px,4.4vw,32px);color:var(--brand);font-weight:900}
.legal .upd{color:var(--muted);font-size:14px;margin-bottom:18px}
.legal h2{font-size:20px;margin:22px 0 6px}
.legal p,.legal li{margin-bottom:6px}
.legal ul{list-style:disc;padding-inline-start:22px}
.legal .box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}

/* ── استجابة ── */
@media (max-width:900px){
  .pdp__grid,.order__grid{grid-template-columns:minmax(0,1fr)}
  .order__head{text-align:center}
}
@media (max-width:640px){
  .sec{padding:32px 0}
    .order__card{padding:14px}
  .thumb{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  /* بلا حركة: الرسالة المكررة تظهر ثابتة (المجموعة الأولى تملأ الشريط) */
  .ticker__track{animation:none;transform:none}
}

/* ==========================================================================
   صفحة العائلة — بطاقات الاختيار والمخزون
   ========================================================================== */

/* ── بطاقات اختيار الموديل (radiogroup) ──
   ≥ 1100px: أربع بطاقات عمودية جنب بعض، 900–1099px: 2×2. أصغر: بطاقات أفقية فوق بعض
   (صورة + نص) حتى تبقى مقروءة بدون ما تعرّض الصفحة. */
.mcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
@media (min-width:900px) and (max-width:1099px){.mcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:right;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;color:var(--ink-2);transition:border-color .2s,box-shadow .2s;min-width:0;font:inherit}
.mcard:hover{border-color:#C5D3E1}
.mcard.is-on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50),var(--sh-sm);background:linear-gradient(180deg,#fff,var(--brand-50))}
.mcard:disabled{cursor:not-allowed;opacity:.75}
.mcard__img{width:100%;height:170px;object-fit:contain;flex:none;border-radius:12px;background:#fff}
.mcard__tx{display:flex;flex-direction:column;min-width:0;line-height:1.4;flex:1}
.mcard__n{color:var(--ink);font-size:18px;font-weight:900}
.mcard__model{font-size:13px;font-weight:800;color:var(--brand)}
.mcard__model bdi{unicode-bidi:isolate}
.mcard__line{font-size:13px;font-weight:700;color:var(--ink-2)}
.mcard__pr{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 14px;margin-top:8px}
.mcard__col{display:flex;flex-direction:column;line-height:1.2}
.mcard__lbl{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:2px}
.mcard__o,.mcard__p{font-size:19px;white-space:nowrap}
.mcard__o{color:#8A94A0;font-weight:700;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#8A94A0}
.mcard__p{color:var(--accent-600);font-weight:900}
.mcard__col--new .mcard__lbl{color:var(--accent-600)}
.mcard__save{align-self:flex-start;margin-top:6px;font-size:13px;font-weight:900;color:#fff;background:var(--alert);border-radius:999px;padding:1px 10px;white-space:nowrap}
.mcard__ship{font-size:12.5px;font-weight:800;color:var(--accent-600);margin-top:4px}
.mcard__tick{position:absolute;top:8px;left:8px;z-index:1;font-size:12px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:2px 10px;opacity:0;transition:opacity .2s}
.mcard.is-on .mcard__tick{opacity:1}
.picker__free{color:var(--accent-600);font-weight:800}

/* ── المعرض ── */
.gallery__stage{position:relative;aspect-ratio:1/1;padding:14px}

/* ── المخزون ── */
.stock.is-wait{color:var(--muted)}
.stock.is-wait .stock__dot{box-shadow:none}
.stock.is-low .stock__dot{box-shadow:0 0 0 4px #FBF1E0}
.stock.is-out .stock__dot{box-shadow:0 0 0 4px var(--alert-50)}
.stock--sm{font-size:13px;margin-top:2px;gap:6px}
.stock--sm .stock__dot{width:8px;height:8px;box-shadow:none}
.btn[aria-disabled="true"]{opacity:.6}

/* ── أرقام ونبذة ── */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}
.stat{background:var(--brand-50);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;min-width:0}
.stat__v{font-size:clamp(20px,4vw,26px);font-weight:900;color:var(--brand)}
.stat__d{font-size:14px;line-height:1.6}
.desc{max-width:820px}
.desc p + p{margin-top:12px}
.acc-sheet img{width:100%;height:auto}
.acc-sheet__cap{font-size:14px;color:var(--muted);margin-top:8px}
.cmp__note{font-size:13px;color:var(--muted);margin-top:8px}

/* ── الثقة ── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.trust li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column}
.trust b{color:var(--ink)}
.trust span{font-size:14px}

/* ── فوتر وقانوني ── */
.ftr__logo{height:44px}
.ftr__tag{max-width:520px}
.legal h3{font-size:17px;margin:14px 0 4px}
.hdr__logo img{height:40px}

@media (max-width:899px){
  .mcards{grid-template-columns:minmax(0,1fr);gap:10px}
  .mcard{flex-direction:row;align-items:center;padding:10px;gap:10px}
  .mcard__img{width:88px;height:88px}
  .mcard__n{font-size:17px;padding-left:58px}   /* مكان شارة «مختار» */
  .mcard__line{font-size:12.5px}
  .mcard__pr{gap:2px 10px;margin-top:6px}
  .mcard__o,.mcard__p{font-size:17px}
  .mcard__save,.mcard__ship{display:inline-block}
}
@media (max-width:760px){
  .stats{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:374px){
  .mcard{gap:8px;padding:9px}
  .mcard__img{width:76px;height:76px}
  .mcard__n{font-size:16px}
  .mcard__o,.mcard__p{font-size:16px}
  .mcard__pr{gap:2px 10px}
}
.btn--sm{white-space:nowrap;flex:none}
@media (max-width:360px){ .sticky__txt b{font-size:14px} .sticky__txt span{font-size:13px} }

/* ==========================================================================
   القلايات الهوائية — إضافات هذا الموقع
   ========================================================================== */
.acc__title{font-weight:800;color:var(--ink);margin-bottom:10px}
/* صور ملحقات 12 لتر أصلية وصغيرة (~120px): تنعرض بحجمها بدون تكبير */
.acc--small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.acc--small .acc__i img{width:auto;max-width:100%;height:96px;aspect-ratio:auto;margin:0 auto;object-fit:scale-down}
.acc-list{display:flex;flex-wrap:wrap;gap:8px}
.acc-list li{background:var(--brand-50);color:var(--brand-700);font-weight:800;border-radius:999px;padding:8px 16px}
.acc-list li::before{content:"✓ "}
.cmp{min-width:640px}
.cmp td,.cmp th{font-size:14px}
.cmp__was{color:#8A94A0;text-decoration:line-through;text-decoration-thickness:2px}
.cmp__is{color:var(--accent-600);font-weight:900}
.cmp-wrap:focus-visible{outline:3px solid var(--accent-300)}
.osel__model bdi,.specs td bdi,.info__desc bdi,.desc bdi{unicode-bidi:isolate}
.qty button{min-width:48px;min-height:48px}