/* ===== PRODUCT CARDS ONLY ===== */

:root{
  --brand-red:#e60023;
  --brand-dark:#111;
  --text:#222;
  --muted:#888;
  --card-radius:14px;
}

/* card */
.ps-product{
  background:#fff !important;
  border-radius:var(--card-radius) !important;
  border:1px solid #eee !important;
  padding:14px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;

  height:100% !important;
  transition:.3s !important;
}

.ps-product:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 15px 35px rgba(0,0,0,.08) !important;
}

/* image */
.ps-product__thumbnail{
  height:170px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.ps-product__thumbnail img{
  max-height:150px !important;
  object-fit:contain !important;
}

/* title */
.ps-product__title{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--text) !important;

  height:42px !important;
  margin:10px 0 !important;
  overflow:hidden !important;
}

/* hide vendor */
.ps-product__vendor{
  display:none !important;
}

/* price */
.ps-product__price{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;

  font-size:16px !important;
  font-weight:800 !important;
  color:var(--brand-red) !important;
}

.ps-product__price del{
  font-size:13px !important;
  color:var(--muted) !important;
}

/* button */
.ps-product .ps-btn{
  margin-top:10px !important;
  width:100% !important;

  background:var(--brand-dark) !important;
  color:#fff !important;
  border-radius:8px !important;
  padding:10px !important;
  font-weight:700 !important;
}

.ps-product .ps-btn:hover{
  background:var(--brand-red) !important;
}

/* badge */
.ps-product__badge{
  background:var(--brand-red) !important;
}

/* ===== SHAHPOR NAVIGATION RE-STYLE (WHITE CATEGORY BTN) ===== */

/* 1. الشريط الأحمر الأساسي (كما هو) */
.navigation {
    background-color: #e60023 !important;
    border: none !important;
}

/* 2. تعديل زر "تسوق حسب القسم" ليكون أبيض 🔥 */
.menu--product-categories .menu__toggle {
    background: #ffffff !important; /* تحويل الخلفية للأبيض */
    color: #000000 !important;    /* تحويل الخط للأسود */
    padding: 0 20px !important;
    border-radius: 0 !important;   /* ليكون متناسق مع الشريط */
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid #ddd !important; /* خط فاصل بسيط */
}

/* أيقونة القائمة (الـ 3 شرط) نخليها حمراء عشان الشياكة */
.menu--product-categories .menu__toggle i {
    color: #e60023 !important;
    margin-left: 10px !important;
}

/* 3. باقي المنيو (الروابط) تظل بيضاء على الخلفية الحمراء */
.navigation .menu > li > a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* تحسين شكل الهوفر (عند الوقوف بالماوس) على زر الأقسام */
.menu--product-categories .menu__toggle:hover {
    background: #f8f8f8 !important;
    color: #e60023 !important;
}
/* ===== PREMIUM FEATURES SECTION ===== */

.ps-site-features {
    background: #f8f9fb !important;
    padding: 30px 0 !important;
}

/* container */
.ps-block--site-features {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
}

/* each item */
.ps-block--site-features .ps-block__item {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;

    border: 1px solid #eee !important;
    transition: 0.3s !important;
}

/* hover */
.ps-block--site-features .ps-block__item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* icon */
.ps-block--site-features i {
    font-size: 22px !important;
    color: #e60023 !important;
    margin-bottom: 8px !important;
}

/* title */
.ps-block--site-features h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-bottom: 5px !important;
}

/* subtitle */
.ps-block--site-features p {
    font-size: 12px !important;
    color: #777 !important;
}

/* remove old borders */
.ps-block--site-features .ps-block__item {
    border-right: none !important;
}

/* mobile */
@media (max-width: 768px) {
    .ps-block--site-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}