/* ===== Modern Grey Digital Specs ===== */
.crux-spec-card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  margin: 16px 0;
  padding: 14px;
}

.crux-spec-head{
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  padding: 10px 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 14px;
}

.crux-spec-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* بطاقة رمادية */
.crux-spec-cell{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.crux-spec-label{
  font-size: 12px;
  opacity: .65;
  font-weight: 800;
}

.crux-spec-value{
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

/* ===== آخر 3 قياسات: نفس البطاقة + أيقونة ===== */
.crux-spec-cell.is-measure{
  position: relative;
  padding-left: 52px; /* مساحة للأيقونة يسار */
}

.crux-spec-icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;   /* 👈 كبرناها تكة فقط */
  height: 72px;
  object-fit: contain;
  border-radius: 10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:4px;
}

/* خلايا تعبئة فاضية عشان آخر 3 قياسات تكون صف كامل */
.crux-spec-cell.is-spacer{
  background: transparent;
  border: 1px dashed rgba(0,0,0,.08);
  opacity: .35;
}

/* Responsive */
@media (max-width: 900px){
  .crux-spec-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .crux-spec-grid{
    grid-template-columns: 1fr;
  }

  .crux-spec-cell.is-measure{
    position: relative;
    padding-left: 88px;   /* مساحة تناسب أيقونة 72px */
  }

  .crux-spec-icon{
    position: absolute;   /* 👈 المهم */
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    margin: 0;
  }
}
/* ===== CRUX Attachments (Shared) ===== */
.crux-att-box{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 14px;
}

.crux-att-title{
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 12px;
  text-align: right;
}

.crux-att-sub{
  opacity:.65;
  font-weight:700;
  font-size:12px;
  margin: -6px 0 12px;
}

/* === Mode A: Cards === */
.crux-att-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.crux-att-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  padding: 12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.crux-att-ico{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  flex: 0 0 38px;
}

.crux-att-name{
  font-weight: 950;
  font-size: 13px;
  line-height:1.2;
}

.crux-att-desc{
  opacity:.65;
  font-weight:700;
  font-size:12px;
  margin-top:4px;
  line-height:1.2;
}

/* === Mode B: Badges === */
.crux-att-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.crux-att-badge{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* === Mode C: Accordion (no JS needed) === */
.crux-att-acc details{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  padding: 10px 12px;
}
.crux-att-acc summary{
  cursor:pointer;
  font-weight: 950;
  list-style:none;
}
.crux-att-acc summary::-webkit-details-marker{ display:none; }
.crux-att-acc-list{
  margin: 10px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap:10px;
}
.crux-att-acc-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.08);
}
.crux-att-acc-item:first-child{
  border-top:none;
  padding-top:0;
}

/* Responsive */
@media (max-width:900px){
  .crux-att-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:520px){
  .crux-att-cards{ grid-template-columns: 1fr; }
}

--------+----
.crux-kid {
  background-color: #e40061 !important;
  color: #fff !important;
}