@charset "UTF-8";
/* ==========================================================================
   المقارنة: شبكة محاذاة + رأس ثابت + جوال بعمودين متجاورين
   ========================================================================== */

.cmp { --lab: 150px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.cmp-head, .cmp-row { display: grid; grid-template-columns: var(--lab) repeat(var(--n), minmax(0, 1fr)); }

.cmp-head {
  position: sticky; inset-block-start: var(--header-h, 72px); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .05);
}
.cmp-card { position: relative; padding: var(--sp-3); text-align: center; min-width: 0; }
.cmp-card__link { display: block; }
.cmp-card img {
  width: 100%; max-width: 120px; height: 140px; object-fit: contain; margin: 0 auto var(--sp-2);
  background: linear-gradient(165deg, var(--sand) 0%, var(--surface-2) 100%); border-radius: var(--r-md); padding: 8%;
}
.cmp-card small { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.cmp-card strong { display: block; font-size: .92rem; line-height: 1.3; margin-block: 3px; overflow-wrap: anywhere; }
.cmp-card__price { display: block; color: var(--brand); font-weight: 700; }

.cmp-row { border-bottom: 1px solid var(--line-2); }
.cmp-row:nth-child(odd) { background: var(--surface-2); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row__label { padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--text-3); font-size: .8rem; align-self: center; }
.cmp-cell { padding: var(--sp-3); font-size: .86rem; text-align: center; min-width: 0; overflow-wrap: anywhere; align-self: center; }
.cmp-cell .chip-list { justify-content: center; }
.cmp-row--cta { background: var(--surface); }

.compare-head__x {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-3);
  transition: all .2s var(--ease); z-index: 2;
}
.compare-head__x:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.compare-head__x svg { width: 12px; height: 12px; }

@media (max-width: 760px) {
  .cmp { --lab: 0px; }
  .cmp-head { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .cmp-head__spacer { display: none; }
  .cmp-row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .cmp-row__label {
    grid-column: 1 / -1; padding: 6px var(--sp-3); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--sand); color: var(--brand);
  }
  .cmp-row--cta .cmp-row__label { display: none; }
  .cmp-card { padding: var(--sp-2); }
  .cmp-card img { height: 78px; max-width: 78px; }
  .cmp-card strong { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cmp-card small { font-size: .58rem; letter-spacing: .06em; }
  .cmp-card__price { font-size: .8rem; }
  .cmp-cell { font-size: .78rem; padding: var(--sp-2); }
  .cmp-cell + .cmp-cell, .cmp-card + .cmp-card { border-inline-start: 1px solid var(--line-2); }
}

.page-compare .compare-bar { display: none !important; }