/* =========================================================
   WOOTZ — أضف هذا الملف بعد home.css في dashcam-wifi.html
   و dashcam-online.html فقط. يستخدم نفس الـ tokens (site.css)
   ولا يكرر أي كلاس موجود.
   ========================================================= */

/* =========================================================
   dashcam-wifi.html — "بانيّ التغطية" (Coverage Builder)
   رسم سيارة من أعلى + نقاط الكاميرات تضيء حسب العدد المختار
   ========================================================= */
.cov-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;margin-block-start:48px}
@media (max-width:980px){.cov-layout{grid-template-columns:1fr;gap:32px}}

/* diagram panel */
.cov-panel{position:sticky;inset-block-start:96px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--surface-2),var(--surface));padding:34px 26px;overflow:hidden}
@media (max-width:980px){.cov-panel{position:static}}
.cov-panel::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-20%;width:300px;height:300px;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);pointer-events:none}
.cov-panel-label{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:9px;margin-block-end:22px;position:relative}
.cov-panel-label::before{content:"";width:22px;height:1px;background:var(--accent)}
.cov-car-wrap{position:relative;aspect-ratio:9/13;max-width:230px;margin-inline:auto}
.cov-car-wrap svg{width:100%;height:100%;overflow:visible}
.cov-cam{transition:.4s var(--ease);transform-origin:center}
.cov-cam .ring{fill:none;stroke:var(--line-strong);stroke-width:2;transition:.4s var(--ease)}
.cov-cam .core{fill:var(--text-3);transition:.4s var(--ease)}
.cov-cam.on .ring{stroke:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.cov-cam.on .core{fill:var(--accent)}
.cov-cam .beam{fill:var(--accent);opacity:0;transition:opacity .4s var(--ease)}
.cov-cam.on .beam{opacity:.14}
.cov-count-badge{position:absolute;inset-block-start:6px;inset-inline-end:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.cov-count-badge b{font-family:var(--ff-mono);font-size:1.4rem;font-weight:600;color:var(--accent);line-height:1}
.cov-count-badge span{font-size:9px;color:var(--text-3)}
.cov-legend{display:flex;flex-direction:column;gap:10px;margin-block-start:26px;position:relative}
.cov-legend .row{display:flex;align-items:center;gap:11px;font-size:.87rem;color:var(--text-3);transition:.3s var(--ease)}
.cov-legend .row.on{color:var(--text)}
.cov-legend .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:0 0 auto;transition:.3s var(--ease)}
.cov-legend .row.on .dot{background:var(--accent);box-shadow:0 0 6px var(--accent)}

/* selector segmented control */
.cov-select{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-block-end:26px}
.cov-opt{cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 12px;text-align:center;transition:.25s var(--ease);font-family:inherit}
.cov-opt b{display:block;font-family:var(--ff-mono);font-size:1.4rem;font-weight:600;color:var(--text)}
.cov-opt span{display:block;font-size:.78rem;color:var(--text-3);margin-block-start:3px}
.cov-opt:hover{border-color:var(--accent)}
.cov-opt.active{background:var(--brand);border-color:var(--brand)}
.cov-opt.active b,.cov-opt.active span{color:#fff}

.cov-note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--line-strong);color:var(--text-2);font-size:.94rem;
  line-height:1.75;margin-block-end:28px}
.cov-note svg{flex:0 0 auto;width:19px;height:19px;color:var(--accent);margin-block-start:2px}
.cov-note b{color:var(--text)}

/* comparison table = models as rows */
.cov-table{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.cov-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;
  padding:20px 22px;border-block-end:1px solid var(--line);transition:.25s var(--ease)}
.cov-row:last-child{border-block-end:0}
.cov-row:hover{background:var(--surface-2)}
.cov-code{font-family:var(--ff-mono);font-weight:600;font-size:1.3rem;color:var(--accent);
  width:64px;text-align:center}
.cov-info b{display:block;font-size:1rem;color:var(--text)}
.cov-info p{color:var(--text-3);font-size:.86rem;margin-block-start:3px}
.cov-tag{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.5px;color:var(--accent);
  border:1px solid var(--accent);border-radius:6px;padding:3px 8px;white-space:nowrap}
.cov-cta{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:14px;color:#fff;
  background:var(--brand);border-radius:11px;padding:11px 20px;white-space:nowrap;transition:.25s var(--ease);
  box-shadow:0 10px 26px -12px var(--brand);border:none;cursor:pointer;}
.cov-cta:hover{background:#0A6066;transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--brand)}
.cov-cta svg{width:15px;height:15px;fill:currentColor}
@media (max-width:640px){
  .cov-row{grid-template-columns:auto 1fr;grid-template-areas:"code info" "tag cta"}
  .cov-code{grid-area:code}.cov-info{grid-area:info}.cov-tag{grid-area:tag;justify-self:start}.cov-cta{grid-area:cta;justify-self:start;margin-block-start:8px}
}

/* =========================================================
   dashcam-online.html — "شاشة الاتصال المباشر" (Live-call layout)
   ========================================================= */
.call-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;margin-block-start:48px}
@media (max-width:980px){.call-layout{grid-template-columns:1fr;gap:36px}}

/* phone/call mockup */
.call-phone{position:sticky;inset-block-start:96px;border-radius:28px;overflow:hidden;border:1px solid var(--line-strong);
  background:linear-gradient(175deg,#04181C,#062124);box-shadow:var(--shadow);max-width:300px;margin-inline:auto;aspect-ratio:9/17.5}
@media (max-width:980px){.call-phone{position:static}}
.call-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;
  font-family:var(--ff-mono);font-size:10.5px;color:rgba(255,255,255,.6)}
.call-avatar-wrap{display:flex;flex-direction:column;align-items:center;padding-block-start:26px}
.call-avatar{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent),#04282C);
  display:grid;place-items:center;position:relative;box-shadow:0 0 0 6px rgba(46,148,153,.14)}
.call-avatar svg{width:38px;height:38px;color:#fff}
.call-avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);
  opacity:0;animation:callPulse 2.1s var(--ease) infinite}
@keyframes callPulse{0%{opacity:.55;transform:scale(.94)}80%{opacity:0;transform:scale(1.28)}100%{opacity:0}}
.call-name{color:#fff;font-weight:700;font-size:1.05rem;margin-block-start:16px}
.call-status{display:flex;align-items:center;gap:7px;color:var(--accent);font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.5px;margin-block-start:6px}
.call-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);
  animation:blink 1.4s steps(1) infinite}
.call-wave{display:flex;align-items:flex-end;gap:3px;height:34px;margin-block-start:22px}
.call-wave span{width:3px;border-radius:2px;background:var(--accent);opacity:.7;animation:waveBar 1.2s ease-in-out infinite}
.call-wave span:nth-child(1){height:40%;animation-delay:0s}
.call-wave span:nth-child(2){height:70%;animation-delay:.1s}
.call-wave span:nth-child(3){height:100%;animation-delay:.2s}
.call-wave span:nth-child(4){height:55%;animation-delay:.3s}
.call-wave span:nth-child(5){height:85%;animation-delay:.4s}
.call-wave span:nth-child(6){height:45%;animation-delay:.5s}
.call-wave span:nth-child(7){height:65%;animation-delay:.6s}
@keyframes waveBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.call-meta{display:flex;gap:22px;margin-block-start:30px;padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.call-meta .m{text-align:center}
.call-meta .m b{display:block;font-family:var(--ff-mono);color:#fff;font-size:1rem}
.call-meta .m span{display:block;font-size:9.5px;color:rgba(255,255,255,.5);margin-block-start:3px}
.call-actions{display:flex;justify-content:center;gap:16px;margin-block-start:auto;padding-block:26px}
.call-actions button{width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;cursor:default}
.call-actions .accept{background:var(--accent);color:#04181C}
.call-actions .mute{background:rgba(255,255,255,.1);color:#fff}
.call-actions svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.call-avatar::after,.call-status i,.call-wave span{animation:none}}

/* model compare column */
.call-models{display:flex;flex-direction:column;gap:20px}
.call-model{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:28px;
  position:relative;overflow:hidden;transition:.3s var(--ease)}
.call-model:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.call-model-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-block-end:14px}
.call-model-code{font-family:var(--ff-mono);font-weight:600;font-size:1.6rem;color:var(--accent);line-height:1}
.call-model-tag{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.5px;color:var(--text-2);
  border:1px solid var(--line-strong);border-radius:100px;padding:5px 12px;white-space:nowrap}
.call-model h3{font-size:1.15rem;margin-block-end:8px}
.call-model p{color:var(--text-2);font-size:.94rem;line-height:1.75;margin-block-end:16px}
.call-model-feats{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:18px}
.call-model-feats span{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-2);
  padding:6px 11px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line)}
.call-model-feats span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.call-model .cov-cta{width:100%;justify-content:center}

/* =========================================================
   Custom Segmented Filter for Wifi Dashcam counts
   ========================================================= */
.line-tabs {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--line);
  max-width: 900px;
  margin: 40px auto;
  padding: 0;
  gap: 20px;
}
@media (max-width: 768px) {
  .line-tabs {
    flex-direction: column;
    border-bottom: none;
    gap: 12px;
  }
}
.line-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 8px 18px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  transition: all 0.3s var(--ease);
  position: relative;
  margin-bottom: -2px;
}
@media (max-width: 768px) {
  .line-tab {
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    padding: 12px 8px;
    margin-bottom: 0;
  }
}
.line-tab:hover {
  color: var(--text);
}
.line-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.line-tab .tab-title {
  font-family: var(--ff-ar);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}
.line-tab.active .tab-title {
  color: var(--accent);
}
.line-tab .tab-num {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-3);
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  line-height: 1;
  transition: all 0.3s;
}
.line-tab.active .tab-num {
  background: var(--accent-soft);
  color: var(--accent);
}
.line-tab .tab-desc {
  font-size: 0.78rem;
  color: var(--text-3);
  transition: color 0.3s;
}
.line-tab.active .tab-desc {
  color: var(--text-2);
}



/* The #wifiGrid / #onlineGrid block that stood here was dead: neither blade has
   ever carried those ids, so the rules matched nothing and the grids were being
   laid out by `.dcp-section .prod-cards` further down this file. Removed rather
   than left in place — it read like the rule controlling these grids. */

/* ============ خط العرض = نفس خط الصفحة الرئيسية (--ff-disp / Tajawal) ============ */
/* .dct في home.css يعرّف --ff-disp؛ هذا احتياط لو استُخدمت المكوّنات خارجه */
.cov-layout,.cov-panel,.call-stage,.call-models,.line-tabs{--ff-disp:"Tajawal",var(--ff-ar,inherit)}

.cov-info b,
.cov-note b,
.cov-opt span,
.call-name,
.call-model h3,
.call-model-feats span,
.line-tab .tab-title{font-family:var(--ff-disp)}

/* =========================================================
   dashcam/wifi + dashcam/online — COMPACT category layout
   ---------------------------------------------------------
   These two pages are a doorway to the models, not an article: the hero was
   taking a full screen and the explainer a second one, so a visitor scrolled
   past ~1200px of mostly-empty page before seeing a camera. Everything above
   the grid is tightened here; the shared components keep their normal sizes
   on every other page.
   ========================================================= */

.dcp-hero{padding-block:104px 30px}
.dcp-hero h1{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.16;max-inline-size:16ch}
.dcp-hero .lead{margin-block-start:10px;font-size:1rem;max-inline-size:56ch}
.dcp-hero .crumbs{margin-block-end:12px}
.dcp-hero .kicker{margin-block-end:8px}
.dcp-hero .watermark{font-size:clamp(5rem,15vw,11rem);opacity:.06}

.dcp-section{padding-block:26px 56px}

/* the explainer: one row, hairline-separated, no card of its own */
.dcp-strip{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.dcp-strip-h{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--accent);
  padding-inline-end:18px;border-inline-end:1px solid var(--line)}
.dcp-items{flex:1 1 420px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0}
.dcp-items li{display:flex;align-items:flex-start;gap:9px;min-inline-size:0}
.dcp-items .n{flex:0 0 auto;inline-size:20px;block-size:20px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--ff-mono);font-size:11px;
  background:var(--accent-soft);color:var(--accent);margin-block-start:1px}
.dcp-items:not(.is-steps) .n{inline-size:7px;block-size:7px;background:var(--accent);margin-block-start:6px}
.dcp-items .t{display:grid;gap:2px;min-inline-size:0}
.dcp-items b{font-size:13.5px;line-height:1.4}
.dcp-items small{font-size:12px;line-height:1.55;color:var(--text-3)}

@media (max-width:860px){
  .dcp-strip{gap:14px}
  .dcp-strip-h{border-inline-end:0;padding-inline-end:0;flex-basis:100%}
  .dcp-items{grid-template-columns:1fr;gap:12px}
}

/* is-steps is a sequence, not a list: 1 → 2 → 3 only reads as a sequence while
   the items sit side by side, so it keeps one row at every width instead of
   stacking with the rest above. grid-auto-flow:column rather than a hardcoded
   repeat(3,1fr) so the row still holds if a page ever passes four steps.
   Wins over the stacking rule above on specificity (0,2,0 vs 0,1,0). */
.dcp-items.is-steps{grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr)}

/* Real content: titles run 4-9 characters, descriptions 27-34. At 375px each
   of the three columns is ~98px, so the layout has to earn every pixel.

   The badge sits ON the title line instead of above it. That buys a whole row
   of height back, and it lets the description keep the full column width and
   stay start-aligned — centring a 30-character Arabic sentence in a 98px
   column produces a ragged two-line block that reads badly, which is what the
   stacked version got wrong.

   display:contents on .t promotes <b> and <small> to grid items of the <li>,
   so they can be placed on separate rows without changing the partial's
   markup. Hairline dividers separate the three steps instead of relying on
   whitespace, which there is none of to spare.

       ① اربط          │ ② شاهد          │ ③ احفظ
       افتح واي فاي     │ استعرض التسجيلات │ نزّل المقطع
       الكاميرا من      │ مباشرة على جوالك │ وشاركه خلال
       التطبيق.        │                 │ دقائق.
   ------------------------------------------------------------------------ */
@media (max-width:860px){
  .dcp-strip{padding:12px 14px}
  .dcp-items.is-steps{gap:12px}
  .dcp-items.is-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:7px;row-gap:3px;align-items:center;text-align:start}
  .dcp-items.is-steps .t{display:contents}
  .dcp-items.is-steps .n{grid-area:1/1;inline-size:18px;block-size:18px;font-size:10px;margin-block-start:0}
  .dcp-items.is-steps b{grid-area:1/2;font-size:12.5px;line-height:1.3}
  /* 3 lines holds all 34 characters at this width, so nothing truncates; the
     clamp is a floor against a longer string from a future page, not the
     normal case. */
  .dcp-items.is-steps small{grid-area:2/1/auto/-1;font-size:11px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .dcp-items.is-steps li:not(:last-child){border-inline-end:1px solid var(--line);padding-inline-end:12px}
}

@media (max-width:400px){
  .dcp-items.is-steps{gap:9px}
  .dcp-items.is-steps li:not(:last-child){padding-inline-end:9px}
  .dcp-items.is-steps b{font-size:12px}
  .dcp-items.is-steps small{font-size:10.5px;line-height:1.45}
}

/* ---- is-steps: the presentation ------------------------------------------
   This strip is the only thing between the hero and the models, so it performs
   instead of just appearing: the steps arrive in order, then a highlight walks
   1 → 2 → 3 so the sequence is unmissable.

   No new script. site.js:113 already runs an IntersectionObserver that adds .in
   to every .reveal element, and the partial already renders .dcp-strip.reveal —
   so this fires when the strip scrolls into view, not on page load, which is
   the point of an attention cue.

   The hidden start state is scoped to .dcp-strip.reveal on purpose: a strip
   rendered without that class stays visible rather than animating to nothing
   and never coming back. */
.dcp-strip.reveal .dcp-items.is-steps li{opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.dcp-strip.reveal.in .dcp-items.is-steps li{opacity:1;transform:none}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(1){transition-delay:.12s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(2){transition-delay:.26s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(3){transition-delay:.40s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(4){transition-delay:.54s}

/* Then the walk: each badge lights in turn, the ring expands out of it, three
   passes, stop. Finite by design — a permanently looping element sitting above
   the product grid stops being emphasis and becomes noise. `backwards` holds
   the resting look during the delay so nothing flashes before its turn. */
.dcp-strip.reveal.in .dcp-items.is-steps .n{animation:dcpStepPulse 2.7s var(--ease) 3 backwards}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(1) .n{animation-delay:.75s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(2) .n{animation-delay:1.05s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(3) .n{animation-delay:1.35s}
.dcp-strip.reveal.in .dcp-items.is-steps li:nth-child(4) .n{animation-delay:1.65s}

@keyframes dcpStepPulse{
  0%,100%{transform:scale(1);background:var(--accent-soft);color:var(--accent);
    box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent)}
  7%{transform:scale(1.22);background:var(--accent);color:#fff;
    box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent)}
  20%{transform:scale(1);background:var(--accent-soft);color:var(--accent);
    box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
}

/* site.css kills animations globally under reduced motion, but its .reveal
   reset does not reach these li — without this they would stay at opacity:0. */
@media (prefers-reduced-motion:reduce){
  .dcp-strip.reveal .dcp-items.is-steps li{opacity:1;transform:none}
}

/* models header sits on one line with the count instead of a stacked block */
.dcp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-block:26px 16px}
.dcp-head .kicker{margin-block-end:4px}
.dcp-head .h-sec{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15}
.dcp-count{font-family:var(--ff-mono);font-size:12px;color:var(--text-3)}

/* The grid keeps a card-sized track and centres what it has: an "online"
   category with two models used to leave three empty columns of page. */
.dcp-section .prod-cards{grid-template-columns:repeat(auto-fill,minmax(226px,264px));
  justify-content:center;gap:14px}
@media (max-width:520px){.dcp-section .prod-cards{grid-template-columns:minmax(0,1fr)}}

/* /dashcam/wifi fills the row. The shared rule above caps every track at 264px
   and centres the result, so on a wide screen the cards stayed narrow and the
   slack was split into margins either side of the grid. Raising the max to 1fr
   gives each track an equal share of the container instead, so the row ends
   flush with the section heading above it:

     1320 wrap → 5 × 248px      960 wrap → 3 × 303px
     1140 wrap → 4 × 268px      720 wrap → 2 × 341px

   auto-fill, not auto-fit: auto-fit collapses the empty tracks, which would
   stretch a two-model category to half a page per card — the very thing the
   264px cap was there to prevent. auto-fill keeps the track count tied to the
   container, so few items stay card-sized. */
.dcp-section .prod-cards.dcp-grid-2{grid-template-columns:repeat(auto-fill,minmax(226px,1fr));
  justify-content:stretch}

/* Below 520px that lands one card per row, so the phone override holds two.
   Only the gap gives, so the pair keeps as much of the narrow viewport as it
   can: ~170px per card at 375px, ~144px at 320px. The card's own container
   queries in site.css trim the frame chrome at those widths. */
@media (max-width:520px){
  .dcp-section .prod-cards.dcp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:360px){
  .dcp-section .prod-cards.dcp-grid-2{gap:8px}
}
.dcp-section .op-empty{margin-block-start:22px}