/* =========================================================
   WOOTZ — HOME (v4) · TOTALLY NEW LAYOUT, ORIGINAL COLORS
   Reuses tokens from site.css (teal brand). New sections only.
   ========================================================= */

/* ---------- shared bits ---------- */
/* Gold accent — section eyebrows and the dash-cam type badges. Two values:
   the bright gold that reads on the dark ground washes out on white. */
:root{
  --gold:#E3C16F;
  --gold-line:color-mix(in srgb,#E3C16F 40%,transparent);
  --gold-soft:color-mix(in srgb,#E3C16F 13%,transparent);
}
:root[data-theme="light"]{
  --gold:#A8781E;
  --gold-line:color-mix(in srgb,#A8781E 36%,transparent);
  --gold-soft:color-mix(in srgb,#A8781E 11%,transparent);
}

.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-ar);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-block-end:18px}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent)}
.h-sec{font-size:clamp(1.8rem,3.8vw,2.7rem);font-weight:700;line-height:1.15;letter-spacing:-.4px}
.muted{color:var(--text-2)}

/* =========================================================
   1) SPLIT HERO — asymmetric, device panel (no full-bleed video)
   ========================================================= */
.x-hero{position:relative;overflow:hidden;padding-block:150px 90px}
.x-hero .hero-bg{position:absolute;inset:0;z-index:0}
.x-hero .glow{position:absolute;inset-block-start:-20%;inset-inline-end:-10%;width:65vw;height:65vw;
  max-width:820px;max-height:820px;background:radial-gradient(circle,var(--accent-soft),transparent 62%);filter:blur(8px)}
.x-hero .grid{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 20%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 70% at 30% 30%,#000 20%,transparent 72%)}
.x-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.x-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:700;line-height:1.08;letter-spacing:-.6px;max-width:14ch}
.x-hero h1 .truth{color:var(--accent);position:relative}
.x-hero h1 .truth::after{content:"";position:absolute;inset-inline:0;inset-block-end:.06em;height:.12em;background:var(--accent);opacity:.3;border-radius:3px}
.x-hero .lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--text-2);max-width:44ch;margin-block:24px 32px}
.x-hero .lead strong{color:var(--text);font-weight:600}
.x-hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.x-hero .ministats{display:flex;gap:30px;flex-wrap:wrap;margin-block-start:44px;padding-block-start:26px;border-block-start:1px solid var(--line)}
.x-hero .ministats .s{display:flex;flex-direction:column}
.x-hero .ministats .n{font-family:var(--ff-mono);font-size:1.7rem;font-weight:600;color:var(--text);line-height:1}
.x-hero .ministats .n.ar{font-family:var(--ff-ar);font-weight:700}
.x-hero .ministats .l{font-size:12.5px;color:var(--text-3);margin-block-start:6px}

/* device / evidence panel */
.device{position:relative}
.device .screen{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);
  background:var(--surface-2);box-shadow:var(--shadow);aspect-ratio:4/3}
.device .screen img{width:100%;height:100%;object-fit:cover;display:block}
.device .scr-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,rgba(0,0,0,.45))}
.device .hud-row{position:absolute;inset-inline:14px;inset-block-start:14px;z-index:3;display:flex;justify-content:space-between;
  font-family:var(--ff-mono);font-size:11px;color:#fff}
.device .rec2{display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:8px;letter-spacing:1px}
.device .rec2 i{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px var(--rec);animation:blink 1.4s steps(1) infinite}
.device .ts2{background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:5px 10px;border-radius:8px}
.device .crop{position:absolute;inset:16px;z-index:2;pointer-events:none}
.device .crop span{position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.75)}
.device .crop .a{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0}
.device .crop .b{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0}
.device .crop .c{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0}
.device .crop .d{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0}
/* floating verdict card */
.device .verdict{position:absolute;inset-block-end:-22px;inset-inline-start:-22px;z-index:4;
  display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);max-width:74%}
.device .verdict .ok{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.device .verdict .ok svg{width:22px;height:22px}
.device .verdict b{display:block;font-size:.95rem}
.device .verdict span{font-size:.8rem;color:var(--text-3)}
/* floating warranty seal */
.device .seal{position:absolute;inset-block-start:-20px;inset-inline-end:-14px;z-index:4;
  background:var(--brand);color:#fff;border-radius:12px;padding:10px 14px;text-align:center;box-shadow:var(--shadow)}
.device .seal b{font-family:var(--ff-mono);font-size:1.2rem;display:block;line-height:1}
.device .seal span{font-size:10.5px;opacity:.85}

@media (max-width:900px){
  .x-hero-grid{grid-template-columns:1fr;gap:60px}
  .device{margin-block-start:10px}
  .device .verdict{inset-inline-start:0}
}


/* =========================================================
   3) STORY STEPPER — قبل · أثناء · بعد
   ========================================================= */
.story{position:relative}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-block-start:50px;position:relative}
.story-grid::before{content:"";position:absolute;inset-block-start:33px;inset-inline:12%;height:2px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);z-index:0}
.step{position:relative;z-index:1;padding:0 26px;text-align:center}
.step .dot{width:66px;height:66px;margin:0 auto 22px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);position:relative}
.step .dot svg{width:28px;height:28px}
.step .dot::after{content:attr(data-n);position:absolute;inset-block-start:-6px;inset-inline-end:-6px;
  width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--ff-mono);
  font-size:12px;display:grid;place-items:center;border:2px solid var(--bg)}
.step h3{font-size:1.25rem;margin-block-end:8px}
.step .ph{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--accent);display:block;margin-block-end:10px}
.step p{color:var(--text-2);font-size:.96rem;max-width:30ch;margin-inline:auto}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-grid::before{inset-block:0 auto;inset-inline-start:50%;inset-block-start:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,var(--line-strong),transparent)}
}

/* =========================================================
   4) BENTO — features + specs mixed sizes
   ========================================================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:18px;margin-block-start:50px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:26px;
  position:relative;overflow:hidden;transition:.35s var(--ease);display:flex;flex-direction:column}
.tile:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.tile .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-block-end:16px}
.tile .ic svg{width:24px;height:24px}
.tile h3{font-size:1.15rem;margin-block-end:8px}
.tile p{color:var(--text-2);font-size:.94rem}
.tile.lg{grid-column:span 2;grid-row:span 2;justify-content:flex-end;
  background:linear-gradient(150deg,var(--surface),var(--surface-2))}
.tile.lg .big{font-family:var(--ff-mono);font-size:clamp(2.4rem,6vw,4rem);font-weight:600;color:var(--accent);line-height:1;margin-block-end:6px}
.tile.lg h3{font-size:1.5rem}
.tile.wide{grid-column:span 2}
.tile .stat{font-family:var(--ff-mono);font-size:2rem;font-weight:600;color:var(--text);line-height:1}
.tile .stat small{display:block;font-family:var(--ff-ar);font-size:.85rem;color:var(--text-3);margin-block-start:6px;font-weight:400}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.tile.lg{grid-column:span 2}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.tile.lg,.tile.wide{grid-column:span 1}}

/* =========================================================
   5) COMPARE — competitors vs WOOTZ
   ========================================================= */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-block-start:46px}
.col{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--surface)}
.col.them{background:var(--bg-2);border-style:dashed}
.col h3{display:flex;align-items:center;gap:12px;font-size:1.2rem;margin-block-end:20px}
.col h3 .b{font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;padding:4px 10px;border-radius:7px}
.col.them .b{background:var(--surface);color:var(--text-3);border:1px solid var(--line)}
.col.us{border:1px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.col.us h3 .b{background:var(--brand);color:#fff}
.cmp-list{display:flex;flex-direction:column;gap:14px}
.cmp-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);font-size:.96rem}
.cmp-list li svg{flex:0 0 auto;width:20px;height:20px;margin-block-start:2px}
.col.them .cmp-list svg{color:var(--rec)}
.col.us .cmp-list svg{color:var(--accent)}
.col.us .cmp-list li{color:var(--text)}
@media (max-width:820px){.compare{grid-template-columns:1fr}}

/* =========================================================
   6) CATEGORY RAIL — horizontal scroll-snap carousel
   ========================================================= */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-block-end:30px}
/* بلا شريط تمرير مرئي: الإخفاء بصري فقط — السحب والعجلة واللمس ولوحة المفاتيح
   تبقى كلّها تعمل. padding-block-end باقٍ ليتنفّس ظلّ البطاقة عند المرور. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-block-end:14px;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{width:0;height:0;display:none}
.rail-card{scroll-snap-align:start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  padding:26px 22px;min-height:230px;display:flex;flex-direction:column;transition:.35s var(--ease);position:relative;overflow:hidden}
.rail-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:var(--shadow)}
.rail-card .en{font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;color:var(--accent);margin-block-end:auto}
.rail-card .pic{width:54px;height:54px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text);margin-block:14px}
.rail-card:hover .pic{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.rail-card .pic svg{width:27px;height:27px}
.rail-card h3{font-size:1.12rem}
.rail-card p{color:var(--text-3);font-size:.88rem;margin-block-start:5px}
/* السهم كان position:absolute في زاوية inset-inline-start، فوقع في خطأين:
   (أ) يركب فوق نصّ الوصف — البطاقة flex عمودية و.en يدفع بقيّة المحتوى إلى
   الأسفل، فآخر سطر ينتهي عند نفس ارتفاع السهم؛
   (ب) يقف في جهة البداية بينما الأيقونة تشير إلى الأمام.
   صار عنصرًا في السياق العادي محاذًى إلى نهاية المحور المتقاطع: يحجز مكانه
   فلا يتراكب مهما طال النص، ويتبع اتجاه الصفحة من تلقائه — يسار في RTL ويمين
   في LTR — بلا قاعدة اتجاه للموضع. الإزاحة وحدها فيزيائية فتُقلب يدويًا. */
.rail-card .arr{--arr-from:8px;
  align-self:flex-end;display:inline-flex;margin-block-start:16px;line-height:0;
  color:var(--accent);opacity:0;transform:translateX(var(--arr-from));
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* الأيقونة مرسومة نحو اليسار = الأمام في RTL؛ في LTR تُقلب هي وجهة دخولها. */
[dir="ltr"] .rail-card .arr{--arr-from:-8px}
[dir="ltr"] .rail-card .arr svg{transform:scaleX(-1)}
.rail-card:hover .arr{opacity:1;transform:none}

/* =========================================================
   7) OFFERS — one featured + list
   ========================================================= */
.off-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-block-start:46px}
.off-feat{position:relative;overflow:hidden;border-radius:var(--r);padding:40px;color:#fff;
  background:linear-gradient(150deg,var(--brand),#063A3F);display:flex;flex-direction:column;justify-content:flex-end;min-height:340px}
.off-feat::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-10%;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%)}
.off-feat .rib{position:absolute;inset-block-start:26px;inset-inline-start:26px;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:1px;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:5px 12px}
.off-feat h3{position:relative;font-size:1.9rem;font-weight:700;line-height:1.2;margin-block-end:10px}
.off-feat p{position:relative;color:rgba(255,255,255,.82);max-width:34ch;margin-block-end:22px}
.off-feat .btn{position:relative;align-self:flex-start;background:#fff;color:var(--brand-ink,#01484E)}
.off-list{display:flex;flex-direction:column;gap:14px}
.off-row{display:flex;align-items:center;gap:16px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);padding:18px 20px;transition:.3s var(--ease)}
.off-row:hover{border-color:var(--accent);transform:translateX(-6px)}
.off-row .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.off-row .ic svg{width:22px;height:22px}
.off-row b{font-size:1rem;display:block}
.off-row span{font-size:.86rem;color:var(--text-3)}
.off-row .tag2{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:7px;padding:3px 8px;white-space:nowrap}
@media (max-width:820px){.off-grid{grid-template-columns:1fr}.off-feat{min-height:260px;padding:30px}}

/* =========================================================
   8) FULL-BLEED QUOTE panel
   ========================================================= */
.x-quote{background:linear-gradient(160deg,var(--brand),#04282C);color:#fff;text-align:center;
  padding-block:100px;position:relative;overflow:hidden}
.x-quote::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px}
.x-quote .k{position:relative;font-family:var(--ff-mono);font-size:12px;letter-spacing:2px;opacity:.7;margin-block-end:22px}
.x-quote blockquote{position:relative;font-size:clamp(1.7rem,4vw,2.8rem);font-weight:700;line-height:1.3;max-width:20ch;margin-inline:auto;letter-spacing:-.4px}
.x-quote blockquote .hl{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:8px}
.x-quote .by{position:relative;margin-block-start:26px;font-weight:600;opacity:.85}

/* =========================================================
   9) CTA split with channels
   ========================================================= */
.x-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(150deg,var(--surface),var(--surface-2));
  padding:54px 48px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.x-cta::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-8%;width:440px;height:440px;background:radial-gradient(circle,var(--accent-soft),transparent 60%)}
.x-cta .left{position:relative;z-index:2}
.x-cta h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;line-height:1.15;max-width:18ch}
.x-cta p{color:var(--text-2);margin-block:16px 28px;max-width:46ch}
.x-cta .actions{display:flex;gap:14px;flex-wrap:wrap}
.x-cta .right{position:relative;z-index:2;border-inline-start:1px solid var(--line);padding-inline-start:40px}
.x-cta .right h4{font-family:var(--ff-mono);font-size:12px;letter-spacing:1.5px;color:var(--text-3);margin-block-end:16px}
.x-cta .chs{display:flex;flex-direction:column;gap:12px}
.x-cta .chs a,.x-cta .chs span{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:.95rem;transition:color .2s}
.x-cta .chs a:hover{color:var(--accent)}
.x-cta .chs b{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
@media (max-width:820px){
  .x-cta{grid-template-columns:1fr;padding:36px 26px;gap:28px}
  .x-cta .right{border-inline-start:0;padding-inline-start:0;border-block-start:1px solid var(--line);padding-block-start:28px}
}

/* section spacing helpers reused from site.css .section */

/* =========================================================
   INNER PAGES (v4) — new page hero + blog mag + article + grids
   ========================================================= */

/* ---- page hero v4: asymmetric, English watermark ---- */
.x-phero{position:relative;overflow:hidden;padding-block:150px 64px;border-block-end:1px solid var(--line)}
.x-phero .hero-bg{position:absolute;inset:0;z-index:0}
.x-phero .glow{position:absolute;inset-block-start:-30%;inset-inline-start:-10%;width:60vw;height:60vw;max-width:720px;max-height:720px;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);filter:blur(8px)}
.x-phero .grid{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 20%,#000 15%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 80% at 80% 20%,#000 15%,transparent 72%)}
.x-phero .wrap{position:relative;z-index:2}
.x-phero .watermark{position:absolute;inset-block-start:40%;inset-inline-end:-2%;z-index:1;
  font-family:var(--ff-mono);font-weight:600;font-size:clamp(4rem,14vw,12rem);line-height:1;
  color:var(--text);opacity:.04;letter-spacing:-.04em;pointer-events:none;user-select:none}
.x-phero h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:700;line-height:1.08;letter-spacing:-.6px;max-width:18ch;margin-block-start:6px}
.x-phero .lead{color:var(--text-2);margin-block-start:18px;font-size:clamp(1.02rem,2vw,1.2rem);max-width:56ch}

/* ---- blog magazine ---- */
.blog-feat{display:grid;grid-template-columns:1.25fr .75fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--surface);margin-block-end:30px;transition:.35s var(--ease)}
.blog-feat:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.blog-feat .pic{position:relative;min-height:340px;overflow:hidden;border-inline-end:1px solid var(--line)}
.blog-feat .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-feat:hover .pic img{transform:scale(1.04)}
.blog-feat .pic .badge{position:absolute;inset-block-start:18px;inset-inline-start:18px;font-family:var(--ff-mono);
  font-size:11px;letter-spacing:1px;background:var(--brand);color:#fff;padding:6px 12px;border-radius:8px}
.blog-feat .body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.blog-feat .cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:1px;color:var(--accent);margin-block-end:14px}
.blog-feat h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;line-height:1.25;letter-spacing:-.3px;margin-block-end:14px}
.blog-feat p{color:var(--text-2);margin-block-end:22px}
.blog-feat .more{font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
@media (max-width:820px){.blog-feat{grid-template-columns:1fr}.blog-feat .pic{border-inline-end:0;border-block-end:1px solid var(--line);min-height:240px}.blog-feat .body{padding:28px}}

/* ---- article cover + reading column ---- */
.post-cover{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--shadow);aspect-ratio:21/9;margin-block-end:40px}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-cover .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%)}
.article-head{max-width:760px;margin-inline:auto;text-align:center;margin-block-end:6px}
.article-head .cat2{font-family:var(--ff-mono);font-size:12px;letter-spacing:1.5px;color:var(--accent)}
.article-head h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;line-height:1.18;letter-spacing:-.4px;margin-block:14px}
.article-head .meta{justify-content:center}
.article .lead-p{font-size:1.18rem;color:var(--text);font-weight:500;line-height:1.7}

/* ---- offer/why reuse index components (.off-grid/.bento/.compare/.step already defined) ---- */
.bundle{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:center;
  border:1px solid var(--line-strong);border-radius:var(--r);background:linear-gradient(150deg,var(--surface),var(--surface-2));padding:38px;overflow:hidden}
.bundle .side{position:relative}
.bundle .side .big2{font-family:var(--ff-mono);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:600;color:var(--accent);line-height:1}
.bundle .side h3{font-size:1.6rem;margin-block:8px 10px}
.bundle .side p{color:var(--text-2)}
@media (max-width:820px){.bundle{grid-template-columns:1fr;padding:28px}}

/* =========================================================
   PRODUCT CARDS v4 — new compact design · 6 per row
   Overrides site.css .prod-cards / .pcard (loads later, wins)
   ========================================================= */
/* No !important here: this rule already wins over site.css by load order, and
   !important also beat every breakpoint below it — the grid stayed 5-across on
   phones. Plain declaration, so the media queries can do their job. */
.prod-cards{grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1300px){.prod-cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1150px){.prod-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.prod-cards{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:460px){.prod-cards{grid-template-columns:1fr}}

/* shop page has a filter sidebar → one column fewer */
#shopGrid.prod-cards{grid-template-columns:repeat(3,1fr)}
@media (max-width:1150px){#shopGrid.prod-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){#shopGrid.prod-cards{grid-template-columns:1fr}}


/* =========================================================
   5.5) DASH CAM CONSOLE — "The Instrument" (mode-dial + plate + cards)
   Theme-aware. Per-series accent (--acc) set by js/dashcam-series.js.
   ========================================================= */
.dcm-section{--acc:var(--accent);--acc-ink:#04181C;
  --ff-disp:"Tajawal",var(--ff-ar,inherit)}

/* --- mode dial --- */
.dcm-dial{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:7px;margin-block-end:22px;overflow:hidden}
.dcm-ind{position:absolute;z-index:0;inset-block:7px;border-radius:12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 26%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--acc) 60%,transparent);
  transition:left .55s var(--ease),width .55s var(--ease),height .5s var(--ease),
    transform .55s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.dcm-seg{position:relative;z-index:1;display:flex;align-items:center;gap:13px;background:none;border:none;cursor:pointer;
  font-family:inherit;color:var(--text-2);padding:17px clamp(13px,2vw,22px);text-align:start;border-radius:12px;transition:color .4s var(--ease)}
.dcm-seg:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.dcm-seg-idx{font-family:var(--ff-mono);font-size:12px;color:var(--text-3);transition:.4s var(--ease)}
.dcm-seg-lbl{display:flex;flex-direction:column;line-height:1.2;min-width:0;text-align:start}
.dcm-seg-lbl b{font-family:var(--ff-disp);font-weight:800;font-size:clamp(1rem,1.7vw,1.22rem);color:var(--text);transition:.4s var(--ease)}
.dcm-seg-lbl small{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:1.5px;color:var(--text-3);text-transform:uppercase;margin-block-start:3px}
.dcm-seg-n{margin-inline-start:auto;font-family:var(--ff-mono);font-size:11px;min-width:26px;height:26px;display:grid;place-items:center;
  border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);transition:.4s var(--ease)}
.dcm-seg[aria-selected="true"]{color:var(--text)}
.dcm-seg[aria-selected="true"] .dcm-seg-idx{color:var(--acc)}
.dcm-seg[aria-selected="true"] .dcm-seg-n{background:color-mix(in srgb,var(--acc) 18%,transparent);
  border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc)}
.dcm-seg:hover:not([aria-selected="true"]){color:var(--text)}
@media(max-width:760px){.dcm-dial{grid-template-columns:1fr;padding:6px;gap:6px}.dcm-ind{inset-inline:6px;inset-block:auto}}

/* --- deck: plate + rack --- */
.dcm-deck{display:grid;grid-template-columns:minmax(300px,.82fr) 1.55fr;gap:20px;align-items:start}
@media(max-width:980px){.dcm-deck{grid-template-columns:1fr}}

/* --- spec plate --- */
.dcm-plate{position:relative;overflow:hidden;border-radius:20px;padding:clamp(24px,3vw,34px);
  background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:18px}
.dcm-plate::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-25%;width:320px;height:320px;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 62%);pointer-events:none;transition:.6s var(--ease)}
.dcm-brk span{position:absolute;width:15px;height:15px;border:2px solid color-mix(in srgb,var(--acc) 55%,transparent);opacity:.6}
.dcm-brk .tl{inset-block-start:14px;inset-inline-start:14px;border-inline-end:none;border-block-end:none}
.dcm-brk .tr{inset-block-start:14px;inset-inline-end:14px;border-inline-start:none;border-block-end:none}
.dcm-brk .bl{inset-block-end:14px;inset-inline-start:14px;border-inline-end:none;border-block-start:none}
.dcm-brk .br{inset-block-end:14px;inset-inline-end:14px;border-inline-start:none;border-block-start:none}
.dcm-plate-en{font-family:var(--ff-mono);font-size:11px;letter-spacing:2.5px;color:var(--acc);position:relative}
.dcm-plate-title{font-family:var(--ff-disp);font-weight:900;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;position:relative}
.dcm-plate-title .em{color:var(--acc)}
.dcm-plate-desc{color:var(--text-2);font-size:.96rem;line-height:1.8;position:relative}
.dcm-plate-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.dcm-pstat{background:var(--surface);padding:15px 12px;display:flex;flex-direction:column;gap:4px}
.dcm-pstat b{font-family:var(--ff-mono);font-size:1.55rem;font-weight:600;color:var(--acc);line-height:1}
.dcm-pstat small{font-size:.72rem;color:var(--text-3)}
.dcm-feat{display:flex;flex-direction:column;gap:11px;position:relative;list-style:none}
.dcm-feat li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--text)}
.dcm-feat li svg{flex:0 0 auto;width:18px;height:18px;margin-block-start:3px;color:var(--acc)}
.dcm-plate-foot{margin-block-start:auto;display:flex;flex-direction:column;gap:14px;position:relative}
.dcm-bestfor{font-size:.9rem;color:var(--text-2)}
.dcm-bestfor b{color:var(--text);font-family:var(--ff-disp);font-weight:700}

/* --- accent CTA --- */
.dcm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--ff-disp);font-weight:700;font-size:.93rem;padding:13px 18px;border-radius:12px;
  background:var(--acc);color:var(--acc-ink);border:1px solid var(--acc);width:100%;
  transition:transform .25s var(--ease),filter .25s var(--ease),background .5s var(--ease);
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--acc) 80%,transparent)}
.dcm-cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.dcm-cta svg{width:16px;height:16px;flex:0 0 auto}

/* --- model rack --- */
.dcm-rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;align-content:start}
.dcm-card{position:relative;overflow:hidden;border-radius:16px;padding:22px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.dcm-card.in{animation:dcmRise .55s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes dcmRise{to{opacity:1;transform:none}}
.dcm-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;background:linear-gradient(90deg,var(--acc),transparent);opacity:.85}
.dcm-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.4s var(--ease);
  background:linear-gradient(color-mix(in srgb,var(--acc) 5%,transparent),transparent 40%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px)}
.dcm-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 55%,var(--line));
  box-shadow:0 30px 60px -34px color-mix(in srgb,var(--acc) 70%,#000)}
.dcm-card:hover::after{opacity:.45}
.dcm-fb{position:absolute;width:12px;height:12px;border:1.5px solid var(--acc);opacity:0;transition:.35s var(--ease);z-index:2}
.dcm-fb.tl{inset-block-start:12px;inset-inline-start:12px;border-inline-end:none;border-block-end:none}
.dcm-fb.br{inset-block-end:12px;inset-inline-end:12px;border-inline-start:none;border-block-start:none}
.dcm-card:hover .dcm-fb{opacity:.75}
.dcm-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative;z-index:1}
.dcm-code{font-family:var(--ff-mono);font-weight:600;font-size:1.5rem;letter-spacing:.5px;color:var(--acc);line-height:1}
.dcm-flag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;border-radius:100px;
  color:var(--acc);white-space:nowrap;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.dcm-card-title{font-family:var(--ff-disp);font-weight:700;font-size:1rem;color:var(--text);position:relative;z-index:1}
.dcm-blurb{font-size:12.5px;color:var(--text-3);line-height:1.6;position:relative;z-index:1;margin-block-start:-4px}
.dcm-res-strip{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1}
.dcm-res{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);min-width:54px}
.dcm-res b{font-family:var(--ff-mono);font-size:13px;font-weight:600;color:var(--text);line-height:1}
.dcm-res small{font-size:10px;color:var(--text-2)}
.dcm-caps{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1}
.dcm-cap{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);padding:5px 9px 5px 7px;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--line)}
.dcm-cap-ic{display:grid;place-items:center;color:var(--acc)}
.dcm-cap-ic svg{width:13px;height:13px}
.dcm-card .dcm-cta{margin-block-start:auto}

@media(max-width:560px){.dcm-rack{grid-template-columns:1fr 1fr}.dcm-seg-lbl small{display:none}}
@media(max-width:400px){.dcm-rack{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dcm-card{opacity:1;transform:none;animation:none}}


/* =========================================================
   5.6) DASH CAM TYPES — "أي واحدة تحتاج؟" (question-led, 2 cards)
   Ported from nv1: brand teal accent, flat cards, common-features box.
   Used on index.html + dashcam-types.html + dashcam-wifi/online.
   ========================================================= */
.dct {
  --acc: var(--accent);
  --acc-ink: #fff;
  --ff-disp: "Tajawal", var(--ff-ar, inherit);
}
[data-theme="light"] .dct {
  --acc-ink: #fff;
}

/* رأس قسم الأنواع يمتد بعرض القسم ليتّسع شريط الميزات، والنص يبقى بعرض القراءة */
.dct .section-head{max-width:none}
.dct .section-head>.kicker,
.dct .section-head>.muted{max-width:640px}
.dct .section-head>.dct-all{margin-block:20px 22px}

/* --- "في كل كاميرات ووتز" — الميزات المشتركة --- */
.dct-all {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 24px 30px;
}
.dct-all-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--acc);
  display: block;
  margin-block-end: 18px;
}
.dct-common {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dct-common .it {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dct-common .it svg {
  width: 22px;
  height: 22px;
  color: var(--acc);
  flex-shrink: 0;
}
.dct-common .it span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dct-common .it b {
  font-size: 14px;
  color: var(--text);
}
.dct-common .it small {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* --- البطاقتان --- */
.dct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-block-end: 30px;
}
.dct-card {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all .3s var(--ease);
}
.dct-card:hover {
  transform: translateY(-4px);
  border-color: var(--acc);
  box-shadow: var(--shadow);
}

/* البطاقة كلّها قابلة للنقر — الـ onclick على <article> في القالب هو ما ينفّذ
   الانتقال، ويقرأ نفس مسار زر "اضغط هنا". هنا شكل التفاعل فقط. */
/* السهم يتحرّك عند المرور على أي جزء من البطاقة، لا على الرابط وحده. */
.dct-card:hover .dct-btn,
.dct-card:hover .dct-btn svg {
  transform: translateX(-4px);
}
/* حلقة التركيز تلتفّ حول البطاقة كلها لأنّها هي مساحة النقر. */
.dct-card:has(> .dct-btn:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}
.dct-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  /* fixed badge gold, independent of the light/dark --gold token */
  color: #CFAC66;
  background: color-mix(in srgb,#CFAC66 13%,transparent);
  border: 1px solid color-mix(in srgb,#CFAC66 40%,transparent);
  padding: 9px 20px;
  border-radius: 100px;
  /* centred in the card: .dct-card is a flex column, so this is the
     cross-axis (horizontal) placement of the badge alone. */
  align-self: center;
}
.dct-badge svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.dct-q {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.45;
}
.dct-q .hl {
  color: var(--acc);
}
.dct-card[data-d="1"] .dct-q .hl,
.dct-card[data-d="2"] .dct-q .hl {
  color: #CFAC66;
}
.dct-a {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.7;
  margin-block-end: 14px;
}
.dct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--acc);
  margin-block-start: auto;
  transition: transform .25s var(--ease);
}
.dct-card[data-d="1"] .dct-btn,
.dct-card[data-d="2"] .dct-btn {
  color: #CFAC66;
}
.dct-btn:hover {
  transform: translateX(-4px);
}
.dct-btn svg {
  width: 18px;
  height: 18px;
  transition: transform .25s var(--ease);
}
.dct-btn:hover svg {
  transform: translateX(-4px);
}

/* --- مؤشّر إرشادي يتنقّل بين رابطَي "اضغط هنا" مع أثر نبضة --- */

/* المرساة التي تُحسب إحداثيات المؤشّر بالنسبة إليها. */
.dct-grid { position: relative; }

/* إحداثيات فيزيائية (left/top) لا منطقية: السكربت يقرأ getBoundingClientRect
   وهي فيزيائية، فلو استخدمنا inset-inline لانقلب الحساب في الاتجاه RTL. */
.dct-pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  /* 36px for a 36-unit viewBox: one user unit = one pixel, so --tip-x/--tip-y
     below are the fingertip in BOTH the SVG's coordinates and the page's. */
  width: 36px;
  height: 36px;
  /* الإصبع: النقطة التي تلامس الرابط، وحولها تنطلق النبضة. */
  --tip-x: 9px;
  --tip-y: 2px;
  --flip: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 1.05s cubic-bezier(.55, .06, .24, .99), opacity .5s var(--ease);
  will-change: transform;
}
.dct-pointer.on { opacity: 1; }

/* في RTL تُقلب اليد أفقيًا حول الإصبع نفسه، فيبقى موضع اللمس ثابتًا
   وتمتد الكفّ في الاتجاه الآخر. overflow مرئي لأنّ القلب يُخرج الكفّ
   خارج مربّع الـ viewBox. */
.dct-pointer.rtl { --flip: -1; }

.dct-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--gold);
  filter: drop-shadow(0 5px 11px rgba(0, 0, 0, .5));
  transition: transform .18s var(--ease);
  transform-origin: var(--tip-x) var(--tip-y);
  transform: scaleX(var(--flip));
}
.dct-pointer.tap svg { transform: scaleX(var(--flip)) scale(.82); }

/* النبضة: تنطلق من طرف الإصبع. */
.dct-pointer::before {
  content: "";
  position: absolute;
  left: var(--tip-x);
  top: var(--tip-y);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--gold-soft);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
}
.dct-pointer.tap::before { animation: dctRipple .78s var(--ease) forwards; }
@keyframes dctRipple {
  0%   { opacity: .6;  transform: translate(-50%, -50%) scale(.15); }
  65%  { opacity: .22; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1); }
}

/* الرابط المستهدَف يتفاعل مع النقرة الوهمية كما لو أنّ المؤشّر فوقه. */
.dct-btn.is-hinted { transform: translateX(-4px); }
.dct-btn.is-hinted svg { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .dct-pointer { display: none; }
  .dct-btn.is-hinted, .dct-btn.is-hinted svg { transform: none; }
}

/* --- المساعدة في الاختيار --- */
.dct-help {
  text-align: center;
  margin-block-start: 50px;
  font-size: 15px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.dct-help b {
  color: var(--text);
  font-weight: 700;
}
.dct-help a {
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 26px -12px var(--brand);
  transition: .25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.dct-help a:hover {
  background: #0A6066;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px var(--brand);
  opacity: 1;
}

@media (max-width: 900px) {
  .dct-common { grid-template-columns: 1fr 1fr; gap: 24px; }
  .dct-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 576px) {
  .dct-common { grid-template-columns: 1fr; }
  .dct-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-block-end: 20px; }
  .dct-card { padding: 16px; gap: 10px; border-radius: 14px; }
  .dct-badge { font-size: 12.5px; padding: 6px 14px; gap: 6px; }
  .dct-badge svg { width: 17px; height: 17px; }
  .dct-q { font-size: 1rem; line-height: 1.35; }
  .dct-a { font-size: 12.5px; line-height: 1.55; margin-block-end: 8px; }
  .dct-btn { font-size: 12.5px; gap: 5px; }
  .dct-btn svg { width: 15px; height: 15px; }
}

/* --- رابط الرجوع في الصفحات الداخلية --- */
.dct-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-block-end: 24px;
  transition: color .2s;
}
.dct-back:hover {
  color: var(--text);
}
.dct-back svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}
.dct-back:hover svg {
  transform: translateX(4px);
}

/* --- الصفحات الداخلية: نفس البطاقة + إضافات --- */
.dct-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.dct-grid.three{grid-template-columns:1fr}}

.dct-card.sm{padding:clamp(26px,2.8vw,36px);gap:18px}

/* رأس البطاقة: عدد الكاميرات أو كود الموديل */
.dct-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dct-code{font-family:var(--ff-mono);font-weight:600;font-size:2.2rem;line-height:1;color:var(--acc)}
.dct-count{display:flex;align-items:baseline;gap:10px}
.dct-count b{font-family:var(--ff-mono);font-weight:600;font-size:3rem;line-height:1;color:var(--acc)}
.dct-count span{font-family:var(--ff-disp);font-weight:800;font-size:1.3rem;color:var(--text)}
.dct-flag{font-family:var(--ff-disp);font-weight:700;font-size:.82rem;padding:7px 12px;border-radius:100px;
  color:var(--acc);white-space:nowrap;background:color-mix(in srgb,var(--acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent)}

.dct-h{font-family:var(--ff-disp);font-weight:800;font-size:1.18rem;line-height:1.6;color:var(--text)}
.dct-desc{font-size:.98rem;line-height:1.85;color:var(--text-2)}

/* نقاط التغطية */
.dct-spots{display:flex;flex-wrap:wrap;gap:8px}
.dct-spots span{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;color:var(--text);
  padding:8px 12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line)}
.dct-spots span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent)}

/* مزايا خاصة بالموديل */
.dct-pts{list-style:none;display:flex;flex-direction:column;gap:11px}
.dct-pts li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;line-height:1.7;color:var(--text)}
.dct-pts svg{flex:0 0 auto;width:19px;height:19px;margin-block-start:4px;color:var(--acc)}

/* الموديلات */
.dct-models{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-block-start:16px;border-block-start:1px solid var(--line)}
.dct-models .lbl{width:100%;font-size:.85rem;color:var(--text-3);margin-block-end:2px}
.dct-models b{font-family:var(--ff-mono);font-weight:600;font-size:.9rem;color:var(--text);
  padding:8px 12px;border-radius:10px;background:var(--surface-2);
  border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line))}

/* =========================================================
   5.7) DASH CAM MODEL TABS — تبويبات الفئات + بطاقات الموديلات (صورة + سعر)
   تُستخدم في dashcam-wifi.html و dashcam-online.html. تعمل بـ js/dashcam-tabs.js
   ========================================================= */
.dct-tabs{position:relative;display:grid;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:7px;margin-block-end:24px;overflow:hidden}
.dct-tabs[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.dct-tabs[data-n="3"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.dct-tabs[data-n]{grid-template-columns:1fr;gap:6px;padding:6px}}
.dct-ind{position:absolute;z-index:0;inset-block:7px;border-radius:12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 26%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--acc) 60%,transparent);
  transition:left .5s var(--ease),width .5s var(--ease),height .45s var(--ease),transform .5s var(--ease)}
.dct-tab{position:relative;z-index:1;display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;
  font-family:inherit;color:var(--text-2);padding:15px clamp(12px,1.8vw,20px);text-align:start;border-radius:12px;
  transition:color .35s var(--ease)}
.dct-tab:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.dct-tab-n{font-family:var(--ff-mono);font-size:1.5rem;font-weight:600;color:var(--text-3);transition:color .35s var(--ease);line-height:1}
.dct-tab-l{display:flex;flex-direction:column;line-height:1.25;min-width:0;text-align:start}
.dct-tab-l b{font-family:var(--ff-disp);font-weight:800;font-size:1.02rem;color:var(--text)}
.dct-tab-l small{font-size:.78rem;color:var(--text-3);margin-block-start:2px}
.dct-tab[aria-selected="true"]{color:var(--text)}
.dct-tab[aria-selected="true"] .dct-tab-n{color:var(--acc)}

/* لوحة التبويب */
.dct-panel[hidden]{display:none}
.dct-panel-note{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.75;color:var(--text-2);
  padding:16px 18px;border-radius:14px;margin-block-end:18px;
  background:color-mix(in srgb,var(--acc) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--acc) 26%,var(--line))}
.dct-panel-note svg{flex:0 0 auto;width:19px;height:19px;color:var(--acc);margin-block-start:3px}
.dct-panel-note b{color:var(--text);font-family:var(--ff-disp);font-weight:700}

/* شبكة بطاقات الموديلات */
.dct-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
@media(max-width:640px){.dct-mgrid{grid-template-columns:1fr}}

.dct-model{position:relative;overflow:hidden;border-radius:20px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;opacity:0;transform:translateY(16px);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.dct-model.in{animation:dctRise .5s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes dctRise{to{opacity:1;transform:none}}
.dct-model:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 55%,var(--line));
  box-shadow:0 38px 70px -40px color-mix(in srgb,var(--acc) 70%,#000)}
@media(prefers-reduced-motion:reduce){.dct-model{opacity:1;transform:none;animation:none}}

/* صورة الموديل */
.dct-shot{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--acc) 12%,var(--surface-2)),var(--surface-2) 70%);
  border-block-end:1px solid var(--line)}
.dct-shot img{width:100%;height:100%;object-fit:contain;padding:16px;
  transition:transform .5s var(--ease)}
.dct-model:hover .dct-shot img{transform:scale(1.05)}
.dct-shot .tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;z-index:2;
  font-family:var(--ff-disp);font-weight:700;font-size:.76rem;padding:6px 11px;border-radius:100px;
  background:var(--acc);color:var(--acc-ink)}

.dct-mbody{display:flex;flex-direction:column;gap:12px;padding:22px;flex:1}
.dct-mcode{font-family:var(--ff-mono);font-weight:600;font-size:1.35rem;color:var(--acc);line-height:1}
.dct-mname{font-family:var(--ff-disp);font-weight:700;font-size:1.02rem;color:var(--text)}
.dct-mdesc{font-size:.93rem;line-height:1.75;color:var(--text-2)}

/* السعر */
.dct-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-block-start:auto;
  padding-block-start:14px;border-block-start:1px solid var(--line)}
.dct-price .now{font-family:var(--ff-mono);font-weight:600;font-size:1.5rem;color:var(--text);line-height:1}
.dct-price .cur{font-size:.85rem;color:var(--text-2)}
.dct-price .was{font-family:var(--ff-mono);font-size:.95rem;color:var(--text-3);text-decoration:line-through}
.dct-price .ask{font-family:var(--ff-disp);font-weight:700;font-size:1.02rem;color:var(--text)}
/* بطاقات الموديلات تبقى بزر ممتلئ (البطاقات في الصفحة الرئيسية رابط نصّي) */
.dct-model .dct-btn{margin-block-start:14px;justify-content:center;font-size:.98rem;padding:14px 18px;
  border-radius:11px;background:var(--brand);color:#fff;border:1px solid transparent;
  box-shadow:0 10px 26px -12px var(--brand)}
.dct-model .dct-btn:hover{transform:translateY(-2px);background:#0A6066;
  box-shadow:0 16px 30px -12px var(--brand)}

/* =========================================================
   9) CATEGORY SHOWCASE — كاروسيل لكل تصنيف + بطاقة عريضة للتصنيف ذي المنتج الواحد
   ========================================================= */
[hidden]{display:none !important}

.cshow-block{margin-block-end:86px}
.cshow-block:last-child{margin-block-end:0}

/* ---------- الكاروسيل ---------- */
.cshow-railwrap{position:relative}
/* The rail still scrolls — by autoplay, by the arrows, by a swipe — it just
   does not draw a bar to say so: the arrow buttons and the cards running off
   the edge already say it, and the bar sat under every carousel on the page. */
.cshow-rail{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding-block:6px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.cshow-rail::-webkit-scrollbar{width:0;height:0;display:none}
.cshow-rail:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r)}
/* تلغي شبكة .prod-cards حتى تعمل كشريط أفقي */
.cshow-rail.prod-cards{display:flex;grid-template-columns:none}
.cshow-rail > .pcard{flex:0 0 264px;max-width:264px;scroll-snap-align:start}
@media (max-width:520px){.cshow-rail > .pcard{flex-basis:78%;max-width:78%}}

.cshow-nav{position:absolute;inset-block-start:38%;z-index:5;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(8px);color:var(--text);box-shadow:var(--shadow);
  transition:color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease),transform .25s var(--ease)}
.cshow-nav svg{width:20px;height:20px}
/* في RTL: inline-start = يمين (السابق) و inline-end = يسار (التالي) */
.cshow-nav.prev{inset-inline-start:-14px}
.cshow-nav.next{inset-inline-end:-14px}
.cshow-nav.prev svg{transform:rotate(180deg)}
.cshow-nav:hover:not(:disabled){color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.cshow-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cshow-nav:disabled{opacity:.3;cursor:default;box-shadow:none}
@media (max-width:900px){.cshow-nav{display:none}}

/* ---------- بطاقة التصنيف ذي المنتج الواحد ---------- */
.cshow-solo{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cshow-solo:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.cshow-solo.flip .cshow-solo-media{order:2}

.cshow-solo-media{position:relative;display:block;min-height:320px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%),
    linear-gradient(150deg,var(--surface-2),var(--bg-2))}

/* ---------- معرض صور: طبقات متلاشية + تقريب بطيء (Ken Burns) ---------- */
.cgal-stage{position:absolute;inset:0}
.cgal-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility 0s linear .9s}
.cgal-slide.on{opacity:1;visibility:visible;transition:opacity .9s var(--ease),visibility 0s}
.cshow-solo-media .cgal-slide img,
.cshow-solo-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:45px;
  transition:transform .5s var(--ease)}
/* الشريحة النشطة تتقرّب ببطء طوال مدة عرضها */
.cgal.multi .cgal-slide.on img{animation:cgalZoom 6.2s var(--ease) forwards}
@keyframes cgalZoom{from{transform:scale(1.01)}to{transform:scale(1.11)}}
.cshow-solo:hover .cshow-solo-media .cgal-slide img{transform:scale(1.04)}
/* عند التوقّف بالمؤشر: تثبيت الإطار مع تقريب عدسي أوضح */
.cgal.multi:hover .cgal-slide.on img{animation-play-state:paused;transform:scale(1.14);transition:transform .6s var(--ease)}

/* عدّاد الصور */
/* cgal-count disabled
.cgal-count{position:absolute;inset-block-start:20px;inset-inline-end:20px;z-index:4;
  font-size:11.5px;letter-spacing:1.5px;color:var(--text-2);
  background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:5px 10px;border-radius:100px}
.cgal-count b{color:var(--accent);font-weight:600}
*/

/* مؤشرات الصور — صور مصغّرة عمودية على جانب اللوحة */
.cgal-dots{position:absolute;inset-block:0;inset-inline-start:14px;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.cgal-dot{width:52px;height:52px;padding:0;border:1px solid var(--line);cursor:pointer;
  border-radius:10px;overflow:hidden;display:block;opacity:.55;
  background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.cgal-dot img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.cgal-dot:hover{opacity:.85;border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.cgal-dot.on{opacity:1;border-color:var(--accent);transform:scale(1.06);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.cgal-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:720px){
  .cgal-dots{inset-block:auto;inset-block-end:12px;inset-inline:0;
    flex-direction:row;gap:6px}
  .cgal-dot{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .cgal.multi .cgal-slide.on img,
  .cgal.multi:hover .cgal-slide.on img{animation:none;transform:none}
  .cgal-slide{transition:opacity .2s linear}
}
.cshow-solo-media .vf{opacity:.4}
.cshow-solo:hover .vf{opacity:1;border-color:var(--accent)}
/* مُزاحة عن علامات الزوايا (.vf) حتى لا تتداخل معها */
.cshow-off{position:absolute;inset-block-start:12px;inset-inline-start:44px;z-index:4;
  font-family:var(--ff-mono);font-size:12px;font-weight:600;color:#fff;background:var(--rec);
  padding:5px 10px;border-radius:7px}

.cshow-solo-body{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,42px);
  border-inline-start:1px solid var(--line)}
.cshow-solo.flip .cshow-solo-body{border-inline-start:0;border-inline-end:1px solid var(--line)}
.cshow-solo-body .kicker{margin-block-end:0}
.cshow-solo-name{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;line-height:1.35}
.cshow-solo-desc{color:var(--text-2);font-size:.98rem;line-height:1.8;max-width:52ch}

/* cshow-feats disabled
.cshow-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-block-start:2px}
.cshow-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;color:var(--text)}
.cshow-feats svg{flex:0 0 auto;width:17px;height:17px;color:var(--accent);margin-block-start:3px}
@media (max-width:520px){.cshow-feats{grid-template-columns:1fr}}
*/

.cshow-specs{display:flex;flex-wrap:wrap;gap:8px}
.cshow-specs div{display:flex;align-items:baseline;gap:7px;padding:7px 12px;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--line)}
.cshow-specs dt{font-size:.78rem;color:var(--text-3)}
.cshow-specs dd{font-size:.85rem;font-weight:600;color:var(--text)}

.cshow-solo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-block-start:auto;padding-block-start:20px;border-block-start:1px solid var(--line)}
.cshow-price{display:flex;align-items:baseline;gap:10px}
.cshow-price .now{font-size:1.6rem;font-weight:600;color:var(--text);line-height:1}
.cshow-price .was{font-size:1rem;color:var(--text-3);text-decoration:line-through}
.cshow-actions{display:flex;flex-wrap:wrap;gap:10px}
.cshow-actions .btn svg{width:17px;height:17px}
.cshow-actions .btn[disabled]{opacity:.45;cursor:not-allowed}

@media (max-width:820px){
  .cshow-block{margin-block-end:64px}
  .cshow-solo{grid-template-columns:1fr}
  .cshow-solo.flip .cshow-solo-media{order:0}
  .cshow-solo-media{min-height:240px;aspect-ratio:4/3}
  .cshow-solo-body{border-inline-start:0;border-block-start:1px solid var(--line)}
  .cshow-solo.flip .cshow-solo-body{border-inline-end:0}
}
@media (prefers-reduced-motion:reduce){
  .cshow-rail{scroll-behavior:auto}
  .cshow-solo-media img,.cshow-nav{transition:none}
}

/* ---------- شبكة التصنيفات ذات 2–4 منتجات: بطاقة .ctile (تصميم مختلف عن .pcard) ---------- */
.cshow-grid{display:grid;gap:20px}
.cshow-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cshow-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cshow-grid[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cshow-grid[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cshow-grid[data-n]{grid-template-columns:1fr}}

.ctile{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ctile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--ease)}
.ctile:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.ctile:hover::before{transform:scaleX(1)}
.ctile:focus-within{border-color:var(--accent)}

/* الرأس: مصغّرة المنتج + ترقيم + شارة */
.ctile-top{position:relative;display:flex;align-items:center;gap:16px;padding:20px 20px 0}
.ctile-thumb{flex:0 0 auto;width:96px;height:96px;border-radius:12px;overflow:hidden;display:block;
  border:1px solid var(--line);
  background:radial-gradient(110% 90% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),var(--surface-2) 65%)}
.ctile-thumb img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .45s var(--ease)}
.ctile:hover .ctile-thumb img{transform:scale(1.07)}
.ctile-idx{font-size:2.4rem;font-weight:600;line-height:1;color:var(--line-strong);
  transition:color .3s var(--ease)}
.ctile:hover .ctile-idx{color:color-mix(in srgb,var(--accent) 55%,var(--line-strong))}
.ctile-flag{position:absolute;inset-block-start:20px;inset-inline-end:20px;
  font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--accent);
  padding:4px 9px;border-radius:100px}
.ctile-flag.sale{background:var(--rec);font-family:var(--ff-mono)}

.ctile-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1}
.ctile-name{font-size:1.05rem;font-weight:700;line-height:1.5}
.ctile-name a{transition:color .25s var(--ease)}
.ctile-name a:hover{color:var(--accent)}
.ctile-name a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.ctile-desc{font-size:.9rem;line-height:1.75;color:var(--text-2)}

.ctile-feats{display:flex;flex-direction:column;gap:8px;padding-block:4px}
.ctile-feats li{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;color:var(--text)}
.ctile-feats svg{flex:0 0 auto;width:15px;height:15px;color:var(--accent);margin-block-start:3px}

.ctile-foot{margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ctile-price{display:flex;align-items:baseline;gap:8px}
.ctile-price .now{font-size:1.25rem;font-weight:600;color:var(--text);line-height:1}
.ctile-price .was{font-size:.85rem;color:var(--text-3);text-decoration:line-through}

.ctile-cart{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13.5px;color:var(--text);
  min-height:44px;padding:0 16px;border-radius:11px;
  border:1px solid var(--line-strong);background:transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.ctile-cart svg{width:17px;height:17px}
.ctile-cart:hover:not(:disabled){color:#fff;background:var(--brand);border-color:var(--brand)}
.ctile-cart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctile-cart:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:560px){
  .ctile-thumb{width:78px;height:78px}
  .ctile-idx{font-size:2rem}
  .ctile-foot{gap:14px}
  .ctile-cart{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ctile,.ctile::before,.ctile-thumb img{transition:none}
}

/* =========================================================
   .ctile.wide — تصنيف بمنتجين فقط: بطاقة أفقية تقودها الصورة
   صورة كبيرة + مسافات مضغوطة + شرائح مزايا مدمجة
   ========================================================= */
.cshow-grid[data-n="2"]{gap:22px}

.ctile.wide{display:grid;grid-template-columns:minmax(190px,43%) 1fr;align-items:stretch;
  border-radius:calc(var(--r) + 4px)}
.ctile.wide::before{height:2px;background:linear-gradient(90deg,var(--accent),transparent 70%)}
.ctile.wide > .ctile-top,
.ctile.wide > .ctile-body{position:relative;z-index:1}

/* شبكة تقنية خافتة تظهر عند المرور */
.ctile-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 90% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(ellipse 60% 60% at 90% 0%,#000 10%,transparent 72%);
  transition:opacity .45s var(--ease)}
.ctile:not(.wide) .ctile-mesh{display:none}
.ctile.wide:hover .ctile-mesh{opacity:1}

/* ---------- لوحة الصورة: هي البطل ---------- */
.ctile.wide .ctile-top{display:block;padding:0;border-inline-end:1px solid var(--line)}
.ctile.wide .ctile-thumb{width:100%;height:100%;min-height:230px;border:0;border-radius:0;
  background:
    radial-gradient(120% 85% at 50% 5%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%),
    linear-gradient(155deg,var(--surface-2),var(--bg-2))}
.ctile.wide .ctile-thumb img{width:100%;height:100%;object-fit:contain;padding:16px}
.ctile.wide:hover .ctile-thumb img{transform:scale(1.06)}
.ctile.wide .ctile-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* علامات زوايا داخل لوحة الصورة */
.ctile.wide .ctile-thumb .tick{position:absolute;width:16px;height:16px;z-index:2;
  border:2px solid color-mix(in srgb,var(--accent) 60%,transparent);opacity:.45;
  transition:opacity .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.ctile.wide:hover .ctile-thumb .tick{opacity:1;width:20px;height:20px}
.ctile.wide .tick.tl{inset-block-start:12px;inset-inline-start:12px;border-inline-end:0;border-block-end:0}
.ctile.wide .tick.tr{inset-block-start:12px;inset-inline-end:12px;border-inline-start:0;border-block-end:0}
.ctile.wide .tick.bl{inset-block-end:12px;inset-inline-start:12px;border-inline-end:0;border-block-start:0}
.ctile.wide .tick.br{inset-block-end:12px;inset-inline-end:12px;border-inline-start:0;border-block-start:0}
.ctile:not(.wide) .tick{display:none}

/* الترقيم والشارات: تُزاح عن علامات الزوايا (tick تصل إلى 32px من الحافة عند المرور) */
/* الترقيم كعلامة مائية كبيرة أعلى يسار النص (خلف المحتوى) */
.ctile.wide .ctile-body{position:relative;overflow:hidden}
.ctile.wide .ctile-body > *:not(.ctile-idx){position:relative;z-index:1}
.ctile.wide .ctile-idx{position:absolute;inset-block-start:2px;inset-block-end:auto;
  left:14px;right:auto;z-index:0;
  font-size:clamp(2rem,6vw,2.6rem);font-weight:600;line-height:1;letter-spacing:-2px;
  color:color-mix(in srgb,var(--text) 8%,transparent);
  border:0;padding:0;min-width:0;pointer-events:none;user-select:none;
  transition:color .35s var(--ease)}
.ctile.wide:hover .ctile-idx{color:color-mix(in srgb,var(--accent) 18%,transparent)}
.ctile.wide .ctile-flag{inset-block-start:25px;inset-inline-end:25px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;
  background:var(--accent);color:#fff;border:0}
.ctile.wide .ctile-flag.sale{background:var(--rec)}

/* ---------- النص: مضغوط ---------- */
.ctile.wide .ctile-body{gap:9px;padding:18px 20px}
.ctile.wide .ctile-name{font-size:1.1rem;line-height:1.45;max-width:none}
.ctile.wide .ctile-desc{font-size:.88rem;line-height:1.65;max-width:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* المزايا كشرائح مدمجة — أقل ارتفاعًا من القائمة */
.ctile.wide .ctile-feats{flex-direction:row;flex-wrap:wrap;gap:6px;padding-block:0;border:0}
.ctile.wide .ctile-feats li{padding:5px 10px;border:1px solid var(--line);border-radius:100px;
  background:var(--surface-2);font-size:11.5px;line-height:1.4;color:var(--text-2);gap:0}
.ctile.wide .ctile-feats svg{display:none}

.ctile.wide .ctile-foot{padding-block-start:14px;gap:10px}
.ctile.wide .ctile-price .now{font-size:1.35rem}
.ctile.wide .ctile-cart{min-height:44px;padding:0 16px;font-size:13px}

@media (max-width:1000px){
  .ctile.wide{grid-template-columns:1fr}
  .ctile.wide .ctile-top{border-inline-end:0;border-block-end:1px solid var(--line)}
  .ctile.wide .ctile-thumb{min-height:0;aspect-ratio:16/10}
}
@media (max-width:560px){
  .ctile.wide .ctile-cart{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ctile-mesh,.ctile.wide .tick,.ctile.wide .ctile-thumb img{transition:none}
}

/* ============ PREMIUM gold — stronger spread ============ */
/* Section eyebrows (kickers) gold on every section + page. */
.kicker{color:#CFAC66;font-size:15px;font-weight:700;letter-spacing:1.5px}
.kicker::before{background:#CFAC66}

/* كيكرات الرئيسية وصفحات الداش كام: أكبر، ذهبي، وبدون الشرطة.
   .badge-premium مستثناة لأنها حبّة (pill) بحدود وليست عنوانًا فرعيًا. */
.page-home .kicker:not(.badge-premium),
.page-dashcam .kicker:not(.badge-premium){font-size:18px;color:#CFAC66}
.page-home .kicker:not(.badge-premium)::before,
.page-dashcam .kicker:not(.badge-premium)::before{display:none}

/* Offer ribbons + row tags gold. */
.off-feat .rib,.off-row .tag2{color:var(--premium-bright);border-color:var(--premium-line)}
[data-theme="light"] .off-feat .rib,[data-theme="light"] .off-row .tag2{color:var(--premium)}

/* =========================================================
   FEATURED STRIP (#featured) — 5-up row
   HomeController hands this section exactly five best sellers, so
   the 4-up `.prod-cards` default strands the fifth card alone on a
   second row. This ladder skips 4 columns entirely — every step
   divides five into rows that read as intentional
   (5 · 3+2 · 2+2+1 · stacked).

   The breakpoints track `.wrap`'s own steps (site.css:96) rather
   than round numbers: the container jumps 1320→1140→960→720→540, so
   a break placed mid-step (say 1180px) leaves the widest layout
   inside an already-narrowed container — five 174px cards at
   1180–1199px. Resulting card widths: 246 · 210 · 301 · 221 · 251.
   ========================================================= */
#featGrid.prod-cards{grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1199.98px){#featGrid.prod-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767.98px){#featGrid.prod-cards{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:439.98px){#featGrid.prod-cards{grid-template-columns:1fr}}