/* كرافت — تحسينات الواجهة v1 (شكل فقط، بدون أي تغيير في النصوص أو الأسعار) */

/* 1) وضوح التركيز للوحة المفاتيح وقارئات الشاشة */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #3f2b4e;
  outline-offset: 2px;
}

/* 2) احترام إعداد "تقليل الحركة" في جهاز العميل */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3) بطاقة المنتج: اسم مقروء بسطرين كحد أقصى */
.product-card__title a {
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4) أزرار الإضافة للسلة: مساحة لمس لا تقل عن 44px في الجوال */
@media (max-width: 767px) {
  .product-card__normal-cart__btn .s-button-element,
  .product-card__addToCart__btn .s-button-element {
    min-height: 44px;
  }
}

/* 5) خيارات المنتج (الأحجام 10/100/500 مل وغيرها): أزرار أكبر وحالة اختيار أوضح */
.s-product-options-grid-mode {
  gap: 8px;
  flex-wrap: wrap;
}
.s-product-options-grid-mode-span {
  min-height: 44px;
  min-width: 76px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span {
  border: 2px solid #3f2b4e;
  background-color: #f6f2f9;
  color: #3f2b4e;
}

/* 6) وصف المنتج: تباعد أسطر أريح للقراءة */
#details_table {
  line-height: 1.85;
}

/* 7) بطاقات المنتجات: ارتفاع موحد ومحدود حتى لا يطوّل منتج واحد القسم كاملًا */
custom-salla-product-card .product-card__title {
  line-height: 1.55;
  min-height: 3.1em;
}
custom-salla-product-card .product-card__content [class*="subtitle"] {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 8) روابط الأقسام (التصنيفات) */
/* الكمبيوتر: الأقسام التسعة في صف واحد بدل 6 + 3 */
@media (min-width: 1024px) {
  .square-links__grid {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .square-links__item-title {
    font-size: 14px;
    line-height: 1.5;
  }
}
/* الجوال والتابلت: شريط أفقي مضغوط يُسحب بالإصبع بدل 3 صفوف كبيرة */
@media (max-width: 1023px) {
  .square-links__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 14px 10px !important;
    overflow: visible !important;
  }
  .square-links__item {
    flex: 0 0 calc((100% - 40px) / 5);
    max-width: calc((100% - 40px) / 5);
  }
  .square-links__item img {
    aspect-ratio: 1 / 1;
  }
  .square-links__item-title {
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .square-links__item {
    flex: 0 0 calc((100% - 80px) / 9);
    max-width: calc((100% - 80px) / 9);
  }
  .square-links__item-title {
    font-size: 12.5px;
  }
}

/* 9) بطاقات المنتجات في السلايدرات: ارتفاع مضغوط ومتساوٍ، والأزرار على خط واحد */
custom-salla-product-card .product-card__subtitle {
  margin-bottom: 4px !important;
  line-height: 20px !important;
}
custom-salla-product-card .s-product-card-rating {
  margin-top: 0 !important;
  margin-bottom: 4px;
}
custom-salla-product-card .s-rating-stars-wrapper {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 1px;
  height: 18px !important;
}
custom-salla-product-card .s-rating-stars-btn-star,
custom-salla-product-card .s-rating-stars-btn-star svg {
  width: 13px !important;
  height: 13px !important;
}
custom-salla-product-card .s-rating-stars-reviews {
  width: auto !important;
  font-size: 11px !important;
  line-height: 16px !important;
  white-space: nowrap;
  margin-inline-start: 4px;
}
salla-products-slider custom-salla-product-card .product-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
salla-products-slider custom-salla-product-card .product-card__content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
salla-products-slider custom-salla-product-card .product-card__buttons {
  margin-top: auto !important;
  padding-top: 10px;
}