#productRoot .pInfo,
#productRoot .pReviewsBlock,
#productRoot .pDescBox,
#productRoot .pOptions,
#productRoot .pOptBlock{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* ===== Product page: Add to cart LOADING ===== */

.pMainInfo .addBtn{
  position: relative;
  overflow: hidden;
  transition: background .2s ease, color .2s ease;
}

/* حالة loading */
.pMainInfo .addBtn.isLoading{
  pointer-events: none;
  color: transparent !important; /* نخفي النص */
  background: #8b0000 !important; /* أحمر غامق */
}

/* spinner */
.pMainInfo .addBtn.isLoading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: pSpin .8s linear infinite;
}

/* بعد الإضافة */
.pMainInfo .addBtn.isAdded{
  background:#6b0000 !important;
  color:#fff !important;
}

/* ✓ صغيرة */
.pMainInfo .addBtn.isAdded::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
}

/* spin animation */
@keyframes pSpin{
  to{ transform: rotate(360deg); }
}





/* Description title line */
#productRoot .pDescBox .pBlockTitle{
  font-size:20px;
  font-weight:900;
  color:#4c6edb;
  text-align:center;
  margin:10px 0 10px;
}

#productRoot .pDescBox .pBlockTitle::after{
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:#4c6edb;
  margin-top:8px;
}
/* =========================================================
   PRODUCT PAGE – LIST STYLE (LIKE SCREENSHOT)
   - Full width
   - Main image natural (no stretch)
   - Price: NEW top line, OLD + DISCOUNT under it
   - Wishlist icon on the right
   - Scoped to #productRoot to NOT affect the whole store
   - ✅ Main info scoped to .pMainInfo (NOT .pInfo)
   ========================================================= */

:root{
  --bg:#fff;
  --line:#e6e6e6;
  --text:#111;
  --muted:#666;
  --red:#d32f2f;
  --green:#2e7d32;
  --blue:#1e5bd7;
  --gold:#f59e0b;
}

/* ===== Root page ===== */
#productRoot .pPage{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
}

/* =========================
   GALLERY
   ========================= */
#productRoot .pGallery{
  width:100%;
  margin:0;
  padding:0;
}

#productRoot .pMainImgWrap{
  width:100%;
  background:#fff;
  border-bottom:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  aspect-ratio:auto !important; /* لا نكبس الصور */
  height:auto !important;
  display:block;
  margin:0;
  padding:0;
  position:relative;
}

#productRoot .pMainImg{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain;
  display:block;
  background:#fff;
}

/* Discount image فوق الصورة (بدون ما نغير شكلها) */
#productRoot .pDiscountImg{
  position:absolute;
  top:10px;
  left:10px;
  bottom:auto !important;
  right:auto !important;
  max-width:140px;
  height:auto;
  z-index:3;
  filter:none !important;
}

/* thumbs */
#productRoot .pThumbs{
  display:flex;
  gap:10px;
  padding:10px 12px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  background:#fff;
}

#productRoot .pThumbBtn{
  width:70px;
  height:80px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  padding:0;
  flex:0 0 auto;
  align-items:center;
}

#productRoot .pThumbBtn.active{
  border:2px solid var(--blue);
}

#productRoot .pThumbImg{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   ✅ MAIN INFO WRAPPER (Grid like screenshot)
   (was: #productRoot .pInfo)
   ========================= */
#productRoot .pMainInfo{
  width:100%;
  margin:0;
  padding:14px 12px 0;
  background:#fff;

  display:grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name name"
    "price wish"
    "old  wish"
    "buy  buy"
    "meta meta"
    "timers timers"
    "info info"
    "opt  opt"
    "desc desc";
  gap:6px 12px;
  align-items:start;
}

/* name */
#productRoot #pName{
  grid-area:name;
  font-size:22px;
  font-weight:800;
  line-height:1.3;
  margin:0 0 10px;
  color:#111;
}

/* =========================
   PRICE BLOCK EXACT
   ========================= */

/* row 1: new price */
#productRoot .pMainInfo .pPriceRow{
  grid-area:price;
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0;
}

#productRoot #pSpecial{
  font-size:23px;
  font-weight:900;
  line-height:1.1;
  color:#111;
}

/* row 2: old + discount (JS will show/hide) */
#productRoot #pDiscountRow{
  grid-area:old;
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0;
  padding:0;
}

#productRoot #pDiscountRow #pPrice{
  display:inline !important;
  font-size:18px;
  font-weight:700;
  color:#9e9e9e;
  text-decoration:line-through;
}

#productRoot #pDiscountBadge{
  display:inline !important;
  font-size:18px;
  font-weight:700;
  color:var(--red);
  white-space:nowrap;
}

/* wishlist right */
#productRoot .pMainInfo .pWishRow{
  grid-area:wish;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin:0;
}

#productRoot .pMainInfo .pWishBtn{
  border:0;
  background:transparent;
  padding:0;
  width:auto;
  height:auto;
  font-size:40px!important;
  color:#111;
  cursor:pointer;
}

#productRoot .pMainInfo .pWishBtn.is-on{
  color:var(--red);
}

/* =========================
   META LIST
   ========================= */
#productRoot .pMainInfo .pMeta{
  grid-area:meta;
  width:100%;
  margin:10px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}

#productRoot #rowSku,
#productRoot #rowAvail,
#productRoot #rowBrand{
  display:flex;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  font-weight:700;
  color:#111;
}

#productRoot #rowSku span,
#productRoot #rowAvail span,
#productRoot #rowBrand span{
  font-weight:800;
}

#productRoot #rowAvail span{
  color:var(--green);
}

/* =========================
   TIMERS (optional)
   ========================= */
#productRoot .pMainInfo .pTimers{
  grid-area:timers;
  width:100%;
  padding:12px 0 6px;
  border-top:0;
}
.pInfoLearn{
  margin-left:4px;
  color:#1f6fff;          /* أزرق */
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;   /* نزّل الخط شوي لتحت */
  text-decoration-thickness: 1px;
}

.pInfoLearn:hover{
  text-decoration:underline;
}
#productRoot #rowSale{ display:none !important; } /* hide sale end */

/* =========================
   INFO LIST (icons red, images untouched)
   ========================= */
#productRoot .pMainInfo .pInfoList{
  grid-area:info;
  width:100%;
  display:block !important;
  margin:0;
  padding:0px 0;
  border-top:1px solid var(--line);
  background:#fff;
}

#productRoot .pMainInfo .pInfoRow{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

#productRoot .pMainInfo .pInfoRow:last-child{
  border-bottom:0;
}

#productRoot .pMainInfo .pInfoIcon{
  width:35px;
  height:35px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

/* فقط أيقونات font تكون حمراء */
#productRoot .pMainInfo .pInfoIcon i,
#productRoot .pMainInfo .pInfoIcon svg{
  color:var(--red) !important;
  font-size:20px;
}

/* صور API لا نلمسها */
#productRoot .pMainInfo .pInfoIcon img{
  filter:none !important;
}

#productRoot .pMainInfo .pInfoMain{
  font-size:13px;
  font-weight:400;
  color:#111;
}

#productRoot .pMainInfo .pInfoSub{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

#productRoot #infoReturn .pInfoArrow{
  margin-left:auto;
  color:#999;
  font-size:26px;
  font-weight:700;
}

/* =========================
   BUY ROW
   ========================= */
#productRoot .pMainInfo .pBuyRow{
  grid-area:buy;
  width:100%;
  display:flex;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

#productRoot .pMainInfo .pQtyBox{
  display:flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

#productRoot .pMainInfo .pQtyBtn{
  width:44px;
  height:42px;
  border:0;
  background:#fff;
  font-size:16px;
  font-weight:900;
  color:#111;
  cursor:pointer;
}

#productRoot .pMainInfo .pQtyInput{
  width:52px;
  height:42px;
  border:0;
  text-align:center;
  font-size:14px;
  font-weight:900;
}

#productRoot .pMainInfo .pAddBtn{
  flex:1;
  height:42px;
  border:0;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}

/* =========================
   DESCRIPTION
   ========================= */
#productRoot .pMainInfo .pDescBox{
  grid-area:desc;
  width:100%;
  margin:0;
  padding:14px 0 18px;
  background:#fff;
}

#productRoot .pMainInfo .pDesc{
  font-size:14.5px;
  color:#111;
  line-height:1.65;
}

#productRoot .pMainInfo .pDescToggleBtn{
  display:block;
  margin:16px auto 0;
  padding:9px 22px;
  border:2px solid #bcd0ff;
  border-radius:10px;
  background:#fff;
  color:var(--blue);
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}

/*===== DESCRIPTION – 5 LINES ONLY ===== */
/* الحالة الافتراضية: مطوي (5 أسطر فقط) */

#productRoot .pMainInfo .pDesc.is-collapsed{
  display:-webkit-box;
  -webkit-line-clamp:5;     
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* لما يتفتح */
#productRoot .pMainInfo .pDesc:not(.is-collapsed){
  display:block;
  overflow:visible;
}

/* =========================================================
   OPTIONS (SAFE FOR GRID / RESPONSIVE)
   ========================================================= */

/* ✅ مهم: خلي منطقة opt ما تكبّر عرض الـ grid */
#productRoot .pMainInfo .pOptions,
#productRoot .pMainInfo #pOptionsBox{
  grid-area:opt;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

/* block wrapper */
#productRoot .pMainInfo .pOptBlock{
  padding:12px;
  border-top:1px solid var(--line);
  background:#fff;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

/* title */
#productRoot .pMainInfo .pOptTitle{
  font-size:16px;
  font-weight:900;
  margin:0 0 12px;
  color:#111;
}

/* ===== list container ===== */
#productRoot .pMainInfo .pOptList{
  display:flex;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:0 0 6px;
  box-sizing:border-box;
}

/* ===== NO SCROLL (≤ 2 items) ===== */
#productRoot .pMainInfo .pOptList:not(.is-scroll){
  overflow:hidden;
}

/* 2 items → يعبّو الشاشة */
#productRoot .pMainInfo .pOptList:not(.is-scroll) .pOptItem,
#productRoot .pMainInfo .pOptList:not(.is-scroll) .pOptBtn{
  flex:1 1 0;
  min-width:0;
}

/* ===== SCROLL MODE (≥ 3 items) ===== */
#productRoot .pMainInfo .pOptList.is-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-right:14px;
  box-sizing:border-box;
}

/* 3+ items → 2.5 ظاهر */
#productRoot .pMainInfo .pOptList.is-scroll .pOptItem,
#productRoot .pMainInfo .pOptList.is-scroll .pOptBtn{
  flex:0 0 40%;
  min-width:0;
  scroll-snap-align:start;
}

/* ===== card base ===== */
#productRoot .pMainInfo .pOptItem,
#productRoot .pMainInfo .pOptBtn{
  display:flex;
  flex-direction:column;
  border:2px solid #e6e6e6;
  border-radius:18px;
  background:#fff;
  color:#111;
  text-decoration:none;
  overflow:hidden;
  box-sizing:border-box;
}

/* active */
#productRoot .pMainInfo .pOptList .is-active{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(30,91,215,.15);
}

/* image */
#productRoot .pMainInfo .pOptImg{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  background:#f7f7f7;
  display:block;
}

/* text area */
#productRoot .pMainInfo .pOptTxt{
  flex:1;
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}

/* name (max 2 lines) */
#productRoot .pMainInfo .pOptName{
  font-size:16px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* price row */
#productRoot .pMainInfo .pOptPriceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:8px;
  gap:10px;
}

#productRoot .pMainInfo .pOptSpecial,
#productRoot .pMainInfo .pOptPrice{
  color:var(--red);
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}

/* button-type option fallback */
#productRoot .pMainInfo .pOptBtn{
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  padding:18px 10px;
  text-align:center;
}

/* =========================
   TIMER – SMALL SIZE (LIKE IMAGE)
   ========================= */
#productRoot .pMainInfo .pTimers{
  grid-area:timers;
  width:100%;
  padding:8px 0;
  border-top:1px solid var(--line);
  background:#fff;
}

#productRoot .pMainInfo .pTimerDeal,
#productRoot .pMainInfo .pTimerSale{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:#111;
}

#productRoot #pDealEnd,
#productRoot #pSaleEnd{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
}

/* red boxes (SMALL like screenshot) */
#productRoot #pDealEnd span,
#productRoot #pSaleEnd span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:30px;
  padding:0 6px;
  background:#b71c1c;
  color:#fff;
  border-radius:8px;
  font-size:16px;
  font-weight:900;
  line-height:1;
}

#productRoot .pTimerSep{
  font-size:16px;
  font-weight:900;
  color:#111;
  line-height:1;
}

@media (max-width:360px){
  #productRoot #pDealEnd span,
  #productRoot #pSaleEnd span{
    min-width:30px;
    height:26px;
    font-size:14px;
    border-radius:7px;
  }

  #productRoot .pMainInfo .pTimerDeal,
  #productRoot .pMainInfo .pTimerSale{
    font-size:14px;
  }
}

/* ===============================
   POPULAR CATEGORIES (3.5 SCROLL)
   Scoped & Responsive
   =============================== */

#productRoot .pLayBlock{
  margin:18px 0;
}

#productRoot .pBlockTitle{
  font-size:18px;
  font-weight:900;
  margin:0 0 10px;
  padding:0 12px;
  color:#111;
}

#productRoot .pLayGrid{
  display:flex;
  gap:12px;
  padding:0 12px 6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}

#productRoot .pLayGrid::-webkit-scrollbar{
  height:6px;
}
#productRoot .pLayGrid::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:6px;
}

#productRoot .pCatCard{
  flex:0 0 calc((100% - (12px * 2)) / 3.5);
  scroll-snap-align:start;

  display:flex;
  flex-direction:column;
  align-items:center;

  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-align:center;
}

#productRoot .pCatImg{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:16px;
  overflow:hidden;
  background:#f3f3f3;
}

#productRoot .pCatImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#productRoot .pCatName{
  margin-top:6px;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  color:#111;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (min-width:768px){
  #productRoot .pCatCard{
    flex-basis:calc((100% - (12px * 3)) / 4.5);
  }
}

@media (min-width:1024px){
  #productRoot .pLayGrid{
    overflow-x:hidden;
  }

  #productRoot .pCatCard{
    flex:1 1 calc((100% - (12px * 4)) / 5);
  }
}

/* ===== Skeleton base ===== */
.sk{
  background:#eee;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}

.sk::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-60%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:skSh 1.1s infinite;
}
@keyframes skSh{
  0%{ transform:translateX(-60%); }
  100%{ transform:translateX(60%); }
}

.pSkPage{ min-height:100vh; background:#fff; }
.pSkTopBar{ height:56px; display:flex; align-items:center; gap:10px; padding:10px 14px; }
.pSkIcon{ width:32px;height:32px;border-radius:10px;background:#f2f2f2; }
.pSkIcon.sk::after{ opacity:.65; }

.pSkHero{
  height:58vh;
  background:#e5e5e5;
  position:relative;
}

.pSkDot{
  position:absolute;
  left:50%;
  bottom:10px;
  width:12px;height:12px;
  margin-left:-6px;
  border-radius:50%;
  background:#1f6fff;
  animation:dotPulse 1s infinite ease-in-out;
}
@keyframes dotPulse{
  0%,100%{ transform:scale(1); opacity:.65; }
  50%{ transform:scale(1.35); opacity:1; }
}

.pSkBody{ padding:14px 14px 110px; }
.pSkLine{ height:14px; border-radius:8px; margin:10px 0; }
.pSkLine.sm{ width:38%; }
.pSkLine.md{ width:60%; }
.pSkLine.lg{ width:92%; }
.pSkBlock{ height:70px; border-radius:14px; margin-top:14px; }

.pSkBottom{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid #eee;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:9999;
}

.pSkQty{
  width:86px;
  height:52px;
  border:1px solid #e7e7e7;
  border-radius:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:system-ui, -apple-system, Arial;
}
.pSkQty .t{ font-size:12px; opacity:.65; line-height:1; }
.pSkQty .n{ font-size:16px; font-weight:700; margin-top:3px; }

.pSkBtn{
  flex:1;
  height:52px;
  border-radius:10px;
  background:#1f6fff;
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  letter-spacing:.3px;
  font-family:system-ui, -apple-system, Arial;
}
.pSkCart{
  width:18px;height:18px;border-radius:4px;
  background:rgba(255,255,255,.25);
}





/* =====================================================
   RELATED PRODUCTS — Horizontal Scroll (2.5 cards)
   SAFE — no card structure change
   ===================================================== */

/* wrapper */
#productRoot #pRelatedWrap{
  width:100%;
  overflow:hidden;
}

/* القائمة نفسها */
#productRoot #pRelatedWrap .productsList{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 12px 10px;   /* 👈 فراغ يمين ويسار نظيف */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}

/* scrollbar (اختياري) */
#productRoot #pRelatedWrap .productsList::-webkit-scrollbar{
  height:6px;
}
#productRoot #pRelatedWrap .productsList::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:10px;
}

/* =====================================================
   الكارد — بدون تغيير الشكل
   ===================================================== */
#productRoot #pRelatedWrap .pCard,
#productRoot #pRelatedWrap .productCard,
#productRoot #pRelatedWrap .pRelMini,
#productRoot #pRelatedWrap [data-product]{
  flex:0 0 calc((100% - (12px * 2)) / 2.1);  /* 👈 2.5 كارد */
  max-width:calc((100% - (12px * 2)) / 2.1);
  scroll-snap-align:start;
  box-sizing:border-box;
}

/* =====================================================
   الصورة (كما هي — لا تغيير)
   ===================================================== */
#productRoot #pRelatedWrap img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

/* =====================================================
   PADDING داخلي لمحتوى الكارد فقط
   (اسم – سعر – خصم – سلة)
   ===================================================== */

/* غلاف المعلومات */
#productRoot #pRelatedWrap .pInfo{
  padding:10px 10px 12px !important;
  box-sizing:border-box;
}

/* اسم المنتج */
#productRoot #pRelatedWrap .pName{
  margin:0 0 6px;
  line-height:1.3;
}

/* سطر السعر القديم */
#productRoot #pRelatedWrap .pOldRow{
  margin:0 0 6px;
}

/* سطر السعر + السلة */
#productRoot #pRelatedWrap .pBottom{
  gap:8px;
  align-items:center;
}

/* نسبة الخصم */
#productRoot #pRelatedWrap .pPercent{
  margin-right:4px;
}

/* زر السلة */
#productRoot #pRelatedWrap .pCartBtn{
  margin-left:auto;
}











/* =====================================================
   PRODUCT BY CATEGORY — FULL WIDTH GRID
   No padding | Same card style
   ===================================================== */

/* الغي أي padding من البلوك */
#productRoot #pLayoutBlock,
#productRoot #pLayoutBlock .pLayWrap{
  padding:0 !important;
  margin:0 !important;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* products list = grid */
#productRoot #pLayoutBlock .productsList{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr); /* 📱 موبايل */
  gap:14px;
  padding:0 !important;
  margin:0 !important;
}

/* الكارد نفسه (ما منغير شكله) */
#productRoot #pLayoutBlock .pCard,
#productRoot #pLayoutBlock .productCard,
#productRoot #pLayoutBlock [data-product]{
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
}

/* الصورة */
#productRoot #pLayoutBlock img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* =========================
   TABLET → 3 منتجات
   ========================= */
@media (min-width:768px){
  #productRoot #pLayoutBlock .productsList{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* =========================
   DESKTOP → 4 منتجات
   ========================= */
@media (min-width:1024px){
  #productRoot #pLayoutBlock .productsList{
    grid-template-columns:repeat(4, 1fr);
  }
}
/* =========================================
   CARD INNER PADDING ONLY
   (name, price, discount, cart)
   ========================================= */

/* محتوى الكارد */
#productRoot .pCard .pInfo{
  padding:10px 10px 12px !important;
  box-sizing:border-box;
}

/* اسم المنتج */
#productRoot .pCard .pName{
  padding:0;
  margin-bottom:6px;
}

/* الأسعار */
#productRoot .pCard .pBottom{
  padding-top:6px;
}

/* السعر الجديد */
#productRoot .pCard .pNewPrice{
  margin-right:6px;
}

/* السعر القديم */
#productRoot .pCard .pOldPrice{
  margin-bottom:4px;
}

/* نسبة الخصم */
#productRoot .pCard .pPercent{
  margin-bottom:4px;
}

/* زر السلة */
#productRoot .pCard .pCartBtn{
  margin-left:auto;
}

/* delivery badge (إن وجد) */
#productRoot .pCard .pDelivery{
  margin-top:6px;
}












/* =====================================================
   REVIEWS — LIKE SCREENSHOT (smaller + smart buttons)
   ===================================================== */

#productRoot .pReviewsBlock{
  width:100%;
  background:#fff;
  border-top:1px solid #e6e6e6;
  padding:16px 12px 18px;
  box-sizing:border-box;
}

/* Title */
#productRoot .pReviewsBlock .pBlockTitle{
  font-size:20px;
  font-weight:900;
  margin:0 0 12px;
  padding:0;
  color:#111;
}

/* Score header row */
#productRoot .pReviewsBlock .pReviewScore{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:0 0 12px;
  border-bottom:1px solid #e6e6e6;
}

#productRoot .pReviewsBlock .pReviewScore .score{
  font-size:44px;     /* أصغر */
  font-weight:900;
  line-height:1;
  color:#111;
}

#productRoot .pReviewsBlock .pReviewScore .stars{
  display:inline-flex;
  gap:3px;
  transform:translateY(1px);
}
#productRoot .pReviewsBlock .pReviewScore .stars span{
  font-size:22px;     /* أصغر */
  color:#d9d9d9;
}
#productRoot .pReviewsBlock .pReviewScore .stars span.on{
  color:#f5b301;
}

#productRoot .pReviewsBlock .pReviewScore .count{
  font-size:15px;     /* أصغر */
  color:#888;
  font-weight:600;
}

/* Small line text */
#productRoot .pReviewsBlock .pReviewEmpty{
  font-size:13px;
  color:#888;
  padding:12px 0 0;
}

/* Reviews list */
#productRoot .pReviewsBlock .pRvList{
  padding:0;
  margin:0;
}

/* each item */
#productRoot .pReviewsBlock .pRvItem{
  padding:14px 0;
  border-bottom:1px solid #e6e6e6;
}
#productRoot .pReviewsBlock .pRvItem:last-child{
  border-bottom:0;
}

/* top row: name left / date right */
#productRoot .pReviewsBlock .pRvTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#productRoot .pReviewsBlock .pRvName{
  font-size:14px;     /* أصغر */
  font-weight:600;
  color:#111;
  display:flex;
  align-items:center;
  gap:8px;
}

#productRoot .pReviewsBlock .pRvDate{
  font-size:13px;
  color:#b0b0b0;
  font-weight:400;
  white-space:nowrap;
}



/* ===== Verified badge (TEXT check) ===== */
#productRoot .pReviewsBlock .pRvVerified{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:6px;

  background:#1d6fff;
  color:#fff !important;   /* ✓ أبيض */

  font-size:10px;
  font-weight:900;
  line-height:1;

  border-radius:50%;
  box-shadow:
    0 1px 3px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.35);
}





/* stars under name */
#productRoot .pReviewsBlock .pRvStars{
  margin-top:6px;
  display:inline-flex;
  gap:3px;
}
#productRoot .pReviewsBlock .pRvStars span{
  font-size:16px;     /* أصغر */
  color:#d9d9d9;
}
#productRoot .pReviewsBlock .pRvStars span.on{
  color:#f5b301;
}

/* text */
#productRoot .pReviewsBlock .pRvText{
  margin-top:10px;
  font-size:15px;     /* أصغر */
  color:#111;
  line-height:1.45;
}

/* ===== buttons row ===== */
#productRoot .pReviewsBlock .pRvActions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
}

/* ✅ Small buttons */
#productRoot .pReviewsBlock #pRvToggle,
#productRoot .pReviewsBlock #pReviewAddBtn{
  height:40px;            /* أصغر */
  border-radius:999px;
  font-size:14px;         /* أصغر */
  font-weight:900;
  cursor:pointer;
}

/* View More */
#productRoot .pReviewsBlock #pRvToggle{
  flex:1;
  border:2px solid #cfcfcf;
  background:#fff;
  color:#666;
}

/* Add Review */
#productRoot .pReviewsBlock #pReviewAddBtn{
  flex:1;
  border:0;
  background:#2f6dff;
  color:#fff;
  box-shadow:0 5px 12px rgba(47,109,255,.22);
}

/* ✅ إذا ما في زر View More → خلّي Add Review بالنص */
#productRoot .pReviewsBlock .pRvActions.is-center{
  justify-content:center;
}
#productRoot .pReviewsBlock .pRvActions.is-center #pReviewAddBtn{
  flex:0 0 auto;
  min-width:180px;      /* زر متوسط بالنص */
}
#productRoot .pReviewsBlock .pRvActions.is-center #pRvToggle{
  display:none !important;
}





/* =========================
   Return Policy Modal (based on your current HTML)
   ========================= */

/* wrapper */
#pReturnModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483647;
}

/* overlay */
#pReturnModalOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
}

/* ===== modal box (the 2nd direct child div inside #pReturnModal) ===== */
#pReturnModal > div:nth-of-type(2){
  /* keep your inline position/transform but enhance */
  width:min(560px, calc(100% - 24px));
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  max-height:80vh;

  /* animation */
  animation: retPop .18s ease-out;
}

/* header row (the first child inside box) */
#pReturnModal > div:nth-of-type(2) > div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* title text (first div inside header) */
#pReturnModal > div:nth-of-type(2) > div:first-child > div:first-child{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
}

/* close button */
#pReturnModalClose{
  width:36px;
  height:36px;
  border-radius:10px;
  border:0;
  background:#f2f2f2;
  cursor:pointer;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
#pReturnModalClose:hover{
  transform:scale(1.05);
  background:#e9e9e9;
}

/* body padding container (2nd child inside box) */
#pReturnModal > div:nth-of-type(2) > div:nth-child(2){
  padding:14px;
}

/* text area */
#pReturnText{
  font-size:18px!important;
  line-height:1.65;
  color:#222;
  max-height:65vh;
  overflow:auto;
  white-space:pre-line;
  padding-right:4px; /* better scrollbar spacing */
}

/* smooth scroll + iOS */
#pReturnText{
  -webkit-overflow-scrolling: touch;
}

/* animation */
@keyframes retPop{
  from{
    opacity:0;
    transform:translate(-50%,-48%) scale(.96);
  }
  to{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

/* mobile tweaks */
@media (max-width:480px){
  #pReturnModal > div:nth-of-type(2){
    width:calc(100% - 18px);
    border-radius:14px;
  }
  #pReturnText{ font-size:13.5px; }
}






/* =========================
   ✅ LUXURY REVIEW MODAL
   ========================= */

.pReviewModal{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:none;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.pReviewModal.is-open{ display:block; }

/* overlay with blur */
.pReviewModalOverlay{
  position:absolute;
  inset:0;
  background:rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* center card */
.pReviewModalBox{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(420px, calc(100% - 28px));
  border-radius:22px;
  overflow:hidden;

  /* glass */
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 28px 90px rgba(0,0,0,.35),
    0 8px 22px rgba(0,0,0,.12);
}

/* nice appear animation */
.pReviewModal.is-open .pReviewModalBox{
  animation: pRvIn .16s ease-out forwards;
}
@keyframes pRvIn{
  from{ transform:translate(-50%,-46%) scale(.98); opacity:.0; }
  to  { transform:translate(-50%,-50%) scale(1); opacity:1; }
}

/* header */
.pReviewModalHead{
  padding:16px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  border-bottom:1px solid rgba(0,0,0,.06);
}

.pReviewModalTitle{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
  color:#111;
}

/* close button */
.pReviewModalClose{
  width:38px;
  height:38px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:rgba(0,0,0,.06);
  color:#111;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.pReviewModalClose:hover{
  transform:scale(1.03);
  background:rgba(0,0,0,.10);
}

/* body */
.pReviewModalBody{
  padding:16px;
}

/* labels */
.pReviewModalLabel{
  font-size:13px;
  font-weight:800;
  letter-spacing:.7px;
  color:rgba(17,17,17,.75);
  text-transform:uppercase;
  margin:0 0 8px;
}

/* textarea luxury */
#pReviewComment{
  width:100%;
  min-height:110px;
  resize:none;
  border-radius:16px;
  padding:14px 14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-size:15px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease, transform .15s ease;
}
#pReviewComment:focus{
  border-color: rgba(0,0,0,.20);
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  transform: translateY(-1px);
}

/* stars row */
.pReviewStars{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  user-select:none;
  margin-top:6px;
}

/* stars look premium */
.pStarBtn{
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:rgba(0,0,0,.18);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.10));
  transform: translateY(0);
  transition: transform .12s ease, color .12s ease, filter .12s ease;
}
.pStarBtn:hover{
  transform: translateY(-2px) scale(1.02);
  color: rgba(245,177,1,.65);
}

/* selected stars gold */
.pStarBtn.is-on{
  color:#f5b301;
  filter: drop-shadow(0 10px 18px rgba(245,177,1,.25));
}

/* actions */
.pReviewModalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

/* cancel */
.pReviewCancel{
  border:0;
  background:transparent;
  color:rgba(17,17,17,.60);
  font-weight:900;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.pReviewCancel:hover{
  background:rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* submit premium button */
.pReviewSubmit{
  border:0;
  cursor:pointer;
  padding:10px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow:
    0 16px 26px rgba(29,78,216,.22),
    0 6px 14px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pReviewSubmit:hover{
  transform: translateY(-1px);
  box-shadow:
    0 20px 34px rgba(29,78,216,.26),
    0 10px 18px rgba(0,0,0,.12);
}
.pReviewSubmit:active{
  transform: translateY(0px);
  filter: brightness(.98);
}
.pReviewSubmit:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* message */
.pReviewModalMsg{
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  color:rgba(17,17,17,.65);
}













/* =====================================================
   RELATED PRODUCTS — Small screens
   Goal: show 2 cards + a SMALL peek of the 3rd (≈ 2.1)
   + smaller price + smaller discount percent
   ===================================================== */
@media (max-width: 390px){

  #productRoot #pRelatedWrap,
  #productRoot #pRelatedWrap *{
    box-sizing:border-box !important;
    min-width:0 !important;
  }

  /* list */
  #productRoot #pRelatedWrap .productsList{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    padding:0 12px 12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory;
  }

  /* ✅ 2 + شوية من الثالث */
  #productRoot #pRelatedWrap .pCard,
  #productRoot #pRelatedWrap .productCard,
  #productRoot #pRelatedWrap .pRelMini,
  #productRoot #pRelatedWrap [data-product]{
    flex:0 0 calc((100% - 10px) / 2.12) !important;  /* 👈 2.12 = 2 + peek صغير */
    max-width:calc((100% - 10px) / 2.12) !important;
    scroll-snap-align:start;
    overflow:hidden !important;
    border-radius:16px !important;
  }

  /* image (خفيفة + ما تكبّر) */
  #productRoot #pRelatedWrap img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
    background:#fff !important;
  }

  /* inner info */
  #productRoot #pRelatedWrap .pInfo{
    padding:8px 9px 10px !important;
  }

  /* name: سطر واحد */
  #productRoot #pRelatedWrap .pName{
    margin:0 0 6px !important;
    font-size:12.5px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* OLD row أصغر */
  #productRoot #pRelatedWrap .pOldRow{
    margin:0 0 6px !important;
  }
  #productRoot #pRelatedWrap .pOldPrice{
    font-size:11px !important;
    opacity:.75 !important;
    white-space:nowrap !important;
  }

  /* bottom row */
  #productRoot #pRelatedWrap .pBottom{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  /* ✅ السعر أصغر */
  #productRoot #pRelatedWrap .pNewPrice,
  #productRoot #pRelatedWrap .pPrice{
    font-size:12px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }

  /* ✅ نسبة الحسم أصغر */
  #productRoot #pRelatedWrap .pPercent{
    font-size:11px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  /* cart button أصغر */
  #productRoot #pRelatedWrap .pCartBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
}