/* =========================
   GLOBAL
========================= */
body{
  
  background-color:#ffffff !important;
}

/* =========================
   PRO VARIANT SELECTOR (Product Page)
   - صندوق مستقل
   - 4 خيارات واضحة (2×2)
   - الاسم سطرين (بدون ما يختفي)
========================= */
.products-details-page .pro-variant-selector{
  display:block;
  width:100%;
  clear:both;
  position:relative;
  z-index:2;

  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;

  padding:12px;
  margin: 14px 0 12px;
}

/* ادفع اللي بعده لتحت لمنع تداخل أي شيء */
.products-details-page .pro-variant-selector + *{
  margin-top: 16px !important;
}

/* عنوان خيارات التكاية */
.products-details-page .pro-variant-title{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
  display:flex;
  align-items:center;
  gap:6px;
}

.products-details-page .pro-variant-title .req{
  color:#c00;
  font-weight:900;
}

/* إزالة أي أيقونة صح بجانب العنوان (لو المنصة تضيفها) */
.products-details-page .pro-variant-title svg,
.products-details-page .pro-variant-title i,
.products-details-page .pro-variant-title .check{
  display:none !important;
}

/* الشبكة: 2×2 = أربع خيارات واضحة دائمًا */
.products-details-page .pro-variant-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

/* على الشاشات الكبيرة نخليها 4 أعمدة (اختياري) */
@media (min-width: 768px){
  .products-details-page .pro-variant-grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* الكرت */
.products-details-page .pro-variant-card{
  position:relative;

  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  gap:8px;

  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;

  min-height: 124px; /* يخلي الأربع كروت متساوية */

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.products-details-page .pro-variant-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}

.products-details-page .pro-variant-card.is-selected{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* صورة الخيار (صفحة المنتج فقط) */
.products-details-page .pro-variant-card > img{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
}

@media (min-width: 768px){
  .products-details-page .pro-variant-card > img{
    width:56px;
    height:56px;
  }
}

/* النص */
.products-details-page .pro-variant-card .txt{
  width:100%;
}

.products-details-page .pro-variant-card .name{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;

  /* سطرين فقط بشكل أنيق */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  word-break: break-word;
}

.products-details-page .pro-variant-card .price{
  font-size: 12px;
  color: rgba(0,0,0,.6);
}

/* علامة التحديد داخل الكرت */
.products-details-page .pro-variant-card .check{
  position:absolute;
  top:8px;
  inset-inline-start:8px;

  width:22px;
  height:22px;
  border-radius:999px;

  display:grid;
  place-items:center;

  border:1px solid rgba(0,0,0,.2);
  background:#fff;
  color:#111;

  opacity:0;
  transform: scale(.95);
  transition: .12s ease;
}

.products-details-page .pro-variant-card.is-selected .check{
  opacity:1;
  transform: scale(1);
  background:#111;
  border-color:#111;
  color:#fff;
}

/* =========================
   HOME VARIANT OPTIONS (Home / Listing)
   - دوائر صغيرة تحت الاسم
========================= */
.home-variant-options{
  display:flex;
  align-items:center;
  gap:6px;

  padding: 8px 0 0;

  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.home-variant-options::-webkit-scrollbar{ width:0; height:0; }

.home-variant-opt{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding:0;
  overflow:hidden;

  border: 1px solid rgba(0,0,0,.15);
  background:#fff;

  cursor:pointer;
  flex: 0 0 auto;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.home-variant-opt img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

.home-variant-opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.25);
}

.home-variant-opt.active{
  border-color: rgba(0,0,0,.65);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}