/* =========================================================
   AW Product Card Modern — FINAL (Notch like the mock) — FIXED
   Replace aw-product-card.css content with this whole file.
========================================================= */

/* ===== Card Shell (outer) ===== */
custom-salla-product-card.aw-pcard{
  --aw-card-outer: #f4f5f6;   /* الخلفية الخارجية للبطاقة */
  --aw-card-inner: #ffffff;   /* لوحة المحتوى الداخلية */
  --aw-radius: 26px;

  padding: 8px;
  border-radius: var(--aw-radius);
  background: var(--aw-card-outer);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  custom-salla-product-card.aw-pcard:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
  }
}

/* ===== Media Frame ===== */
custom-salla-product-card.aw-pcard .aw-pcard__media{
  margin: 0 !important;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #eef3f4;
  aspect-ratio: 1 / 1;
}

/* link fills media */
custom-salla-product-card.aw-pcard .aw-pcard__imglink{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ===== Image: perfect centering ===== */
custom-salla-product-card.aw-pcard img.s-product-card-image-slider{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: center center;
  transition: transform .35s ease;
}

@media (hover:hover){
  custom-salla-product-card.aw-pcard:hover img.s-product-card-image-slider{
    transform: scale(1.04);
  }
}

/* ===== Badge: pill ===== */
custom-salla-product-card.aw-pcard .s-product-card-promotion-title,
custom-salla-product-card.aw-pcard .s-product-card-quantity,
custom-salla-product-card.aw-pcard .s-product-card-out-badge{
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 6;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

/* ===== Wishlist: floating ===== */
custom-salla-product-card.aw-pcard .aw-pcard__wish{
  position: absolute !important;
  bottom: 12px;
  inset-inline-end: 12px;
  z-index: 7;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* =========================================================
   Inner Panel (content area)
========================================================= */
custom-salla-product-card.aw-pcard .aw-pcard__body{
  position: relative;
  margin-top: 10px;
  padding: 16px 16px 14px;
  background: var(--aw-card-inner);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(0,0,0,.06);
  overflow: hidden;
}

/* title */
custom-salla-product-card.aw-pcard .aw-pcard__title a{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

/* subtitle + description compact */
custom-salla-product-card.aw-pcard .aw-pcard__subtitle{
  margin: 8px 0 0;
  font-size: 13px;
  opacity: .8;
}
custom-salla-product-card.aw-pcard .aw-pcard__desc{
  margin: 8px 0 0;
  font-size: 12.5px;
  opacity: .75;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* =========================================================
   Footer (price + button) + NOTCH around button
   ✅ updated for aw-pcard__footer-inner layout
========================================================= */
custom-salla-product-card.aw-pcard .aw-pcard__footer{
  position: relative;
  margin-top: 12px;
  padding-top: 8px;
}

/* row container (new) */
custom-salla-product-card.aw-pcard .aw-pcard__footer-inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  z-index: 3; /* فوق القصّة */
}

custom-salla-product-card.aw-pcard .aw-pcard__price{
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
html[dir="ltr"] custom-salla-product-card.aw-pcard .aw-pcard__price{
  text-align: left;
}

custom-salla-product-card.aw-pcard .aw-pcard__buy{
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

/* زر السلة */
custom-salla-product-card.aw-pcard .aw-pcard__fab{
  position: relative;
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  background: #fff;
}

custom-salla-product-card.aw-pcard .aw-pcard__fab i{
  font-size: 20px;
}

/* ===== The notch (cut-out) ===== */
custom-salla-product-card.aw-pcard .aw-pcard__footer::before{
  content:"";
  position:absolute;
  inset-inline-start: -22px; /* ✅ خليها يسار مثل طلبك الحالي */
  bottom: -24px;
  width: 160px;
  height: 160px;
  border-radius: 44px;
  background: var(--aw-card-outer);
  z-index: 1;
  pointer-events:none;
}

custom-salla-product-card.aw-pcard .aw-pcard__footer::after{
  content:"";
  position:absolute;
  inset-inline-start: 8px;   /* ✅ نفس جهة القصّة */
  bottom: 8px;
  width: 110px;
  height: 110px;
  border-radius: 36px;
  background: rgba(255,255,255,.86);
  z-index: 2;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}

/* =========================================================
   Slider UI — enabled only when JS adds .aw-slider-on
========================================================= */

/* ===== Dots (capsule + active pill) ===== */
custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__dots{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 8;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  opacity: .85;
  transition: width .18s ease, height .18s ease, opacity .18s ease, background .18s ease;
}

custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__dot.is-active{
  width: 18px;
  height: 6px;
  background: rgba(255,255,255,.98);
  opacity: 1;
}

@media (hover:hover) and (pointer:fine){
  custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__media:hover .aw-pcard__dots,
  custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__media:focus-within .aw-pcard__dots{
    opacity: 1;
    pointer-events: auto;
  }
}
@media (hover:none){
  custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__dots{
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===== Arrows (desktop only) ===== */
custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  z-index: 9;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* ignore icon font */
custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow i{ display:none !important; }

/* draw chevron */
custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow::before{
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid rgba(0,0,0,.55);
  border-top: 0;
  border-right: 0;
  transform: rotate(45deg);
  display: block;
}

html[dir="rtl"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--prev{ right: 10px; }
html[dir="rtl"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--next{ left: 10px; }
html[dir="ltr"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--prev{ left: 10px; }
html[dir="ltr"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--next{ right: 10px; }

html[dir="rtl"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--prev::before{ transform: rotate(-135deg); }
html[dir="rtl"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--next::before{ transform: rotate(45deg); }
html[dir="ltr"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--prev::before{ transform: rotate(45deg); }
html[dir="ltr"] custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow--next::before{ transform: rotate(-135deg); }

@media (hover:hover) and (pointer:fine){
  custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__media:hover .aw-pcard__arrow{
    opacity: 1;
    pointer-events: auto;
  }
}

/* ✅ hide arrows completely on mobile/touch */
@media (hover:none){
  custom-salla-product-card.aw-pcard.aw-slider-on .aw-pcard__arrow{
    display:none !important;
  }
}

/* ✅ Remove the big notch square completely */
custom-salla-product-card.aw-pcard .aw-pcard__footer::before,
custom-salla-product-card.aw-pcard .aw-pcard__footer::after{
  display: none !important;
  content: none !important;
}

/* =========================================================
   AW Listing Controls (Grid columns + Equal height)
   Place in: aw-product-card.css
   ========================================================= */

/* ✅ Mobile columns control
   ملاحظة: سلة تختلف أسماء الـ grid حسب الثيم/الصفحة،
   لذلك حطّينا أكثر من selector شائع. */
@media (max-width: 1024px){

  /* ===== 2 Columns ===== */
  html[data-aw-listing-mobile-cols="2"] .products-grid,
  html[data-aw-listing-mobile-cols="2"] .s-products-grid,
  html[data-aw-listing-mobile-cols="2"] .salla-products-list-grid,
  html[data-aw-listing-mobile-cols="2"] salla-products-list .products-grid,
  html[data-aw-listing-mobile-cols="2"] salla-products-list .s-products-grid,
  html[data-aw-listing-mobile-cols="2"] salla-products-list .salla-products-list-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ===== 3 Columns ===== */
  html[data-aw-listing-mobile-cols="3"] .products-grid,
  html[data-aw-listing-mobile-cols="3"] .s-products-grid,
  html[data-aw-listing-mobile-cols="3"] .salla-products-list-grid,
  html[data-aw-listing-mobile-cols="3"] salla-products-list .products-grid,
  html[data-aw-listing-mobile-cols="3"] salla-products-list .s-products-grid,
  html[data-aw-listing-mobile-cols="3"] salla-products-list .salla-products-list-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ✅ Equal height (best-effort)
   يثبت جسم الكرت ويخلي المحتوى يتمدد بحيث الفوتر (السعر/زر الشراء)
   يكون في الأسفل بشكل متناسق بين كل البطاقات. */

html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard{
  height: 100%;
}

html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .aw-pcard__body{
  height: 100%;
  display: flex;
  flex-direction: column;
}

html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .s-product-card-content-main{
  flex: 1 1 auto;
}

/* الفوتر يبقى تحت */
html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .aw-pcard__footer{
  margin-top: auto;
}

/* تحسين بسيط: يمنع تمدد العنوان/الوصف بشكل مبالغ فيه (اختياري) */
html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .aw-pcard__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .aw-pcard__subtitle{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-aw-listing-equal-height="1"] custom-salla-product-card.aw-pcard .aw-pcard__desc{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}