/* =====================================================
   🚫 FORCE REMOVE LEFT / RIGHT PADDING — CATEGORIES
   ===================================================== */

/* 1️⃣ امنع padding على كل المسارات الممكنة */
body.view-categories,
body.view-categories #appMain,
body.view-categories #appMain.withLayout,
body.view-categories #viewCategories,
body.view-categories .categoriesPage,
body.view-categories .catContent{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2️⃣ إذا في container أو row (Bootstrap-style) */
body.view-categories .container,
body.view-categories .container-fluid,
body.view-categories .row{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* 3️⃣ خلي المحتوى الحقيقي وحده يلي بياخد نفس */
body.view-categories .catContent{
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   CATEGORIES VIEW — PRO / RESPONSIVE (FINAL)
   - Left slimmer
   - Right like reference
   - SubCats: smaller text, neat spacing
   - Tabs: small + same row (Top Selling / New)
   - Products: smaller image + show name & price
   ========================================================= */

:root{
  --brand:#b3262d;
  --bg:#fff;
  --leftBg:#f3f3f3;
  --line:rgba(0,0,0,.06);

  /* layout heights (same as your layout.css) */
  --headerH:104px;
  --bottomH:82px;

  /* sidebar */
  --leftW:112px;     /* ✅ slimmer default */
  --leftPadX:12px;

  /* right padding */
  --rightPadX:16px;

  /* titles */
  --titleSm:16px;
  --titleBig:26px;

  /* sub cats */
  --subImg:78px;
  --subGapY:26px;
  --subGapX:18px;
  --subName:14px;

  /* tabs */
  --tabFont:15px;
  --tabPillPadY:9px;
  --tabPillPadX:14px;
  --tabRadius:10px;

  /* products */
  --prodImgH:128px;     /* ✅ smaller so name+price show */
  --prodName:13px;
  --prodPrice:14px;
}

/* ✅ appMain padding only */
body.view-categories #appMain.withLayout{
  padding-top: var(--headerH) !important;
  padding-bottom: var(--bottomH) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#viewCategories{
  height: calc(100dvh - var(--headerH) - var(--bottomH)) !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--bg);
}

#viewCategories .categoriesPage{
  height: 100% !important;
  width: 100% !important;
  display:flex;
  overflow:hidden;
  background: var(--bg);
}

/* =========================
   LEFT SIDEBAR (slim)
   ========================= */
#viewCategories .catSidebar{
  width: var(--leftW) !important;
  min-width: var(--leftW) !important;
  max-width: var(--leftW) !important;
  height:100%;

  background: var(--leftBg);
  border-right: 1px solid var(--line);

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
}
#viewCategories .catSidebar::-webkit-scrollbar{ width:0; height:0; }

#viewCategories .catSideItem{
  position:relative;
  padding: 14px var(--leftPadX);
  font-size: 15px;          /* ✅ أصغر */
  font-weight: 500;
  color:#222;
  background: transparent;
  border:0;
  cursor:pointer;
  user-select:none;
  line-height: 1.25;
}
#viewCategories .catSideItem:hover{ background:#ececec; }

#viewCategories .catSideItem.active{
  background:#fff;
  font-weight: 800;
}
#viewCategories .catSideItem.active::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background: var(--brand);
}

/* =========================
   RIGHT CONTENT
   ========================= */
#viewCategories .catContent{
  flex:1;
  min-width:0;
  height:100%;
  background:#fff;

  display:flex;
  flex-direction:column;
  overflow:hidden;

  padding: 12px var(--rightPadX) 12px;
  box-sizing:border-box;
}

/* top row */
#viewCategories .catTopRow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 2px 0 10px;
}

#viewCategories .catTitle{
  font-size: var(--titleSm);
  font-weight: 700;
  color:#333;
}

#viewCategories .catViewAll{
  font-size: var(--titleSm);
  font-weight: 900;
  color: var(--brand);
  background: transparent;
  border:0;
  padding: 6px 8px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:8px;
}
#viewCategories .catViewAll i{ font-size: 14px; color: var(--brand); }

/* scroll right */
#viewCategories .catGridScroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 14px;
}
#viewCategories .catGridScroll::-webkit-scrollbar{ width:0; height:0; }

/* big title inside right (Accessories) */
#viewCategories .catBigTitle,
#viewCategories .catContent h2{
  font-size: var(--titleBig);
  font-weight: 1000;
  color:#111;
  margin: 0 0 12px;
  letter-spacing:.2px;
}

/* =========================
   SUB CATEGORIES GRID
   ========================= */
#viewCategories .catCircleGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--subGapY) var(--subGapX);
  padding: 10px 0 18px;
}

#viewCategories .catCircleItem{
  text-align:center;
  cursor:pointer;
  user-select:none;
  padding:0;
}

#viewCategories .catCircle{
  width: var(--subImg);
  height: var(--subImg);
  margin: 0 auto 8px;

  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
}

#viewCategories .catCircle img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

#viewCategories .catCircleName{
  font-size: var(--subName);      /* ✅ أصغر */
  font-weight: 900;
  color:#111;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  opacity: .95;
}

/* =========================
   TABS (Top Selling / New) ✅ smaller + same row
   ========================= */
#viewCategories .catTabs{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 0 8px;
  background:#fff;

  position: sticky;
  top: 0;
  z-index: 5;
}

/* Base */
#viewCategories .catTab{
  font-size: var(--tabFont);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  background: transparent;
  border:0;
  color:#111;
  padding: 8px 8px;
  white-space: nowrap;  /* ✅ ما ينزل سطر */
}

/* Active pill (Top Selling) */
#viewCategories .catTab.active{
  border: 2px solid #111;
  border-radius: var(--tabRadius);
  padding: var(--tabPillPadY) var(--tabPillPadX);
  min-width: 150px;     /* ✅ أصغر */
  text-align:center;
}

/* Inactive (New) */
#viewCategories .catTab:not(.active){
  opacity: .95;
}

/* =========================
   PRODUCTS GRID ✅ show name & price
   ========================= */
#viewCategories #catProductsRootInline{ margin-top: 8px; }

#viewCategories .catProductsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding: 10px 0 0;
}

#viewCategories .catProdCard{
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  overflow:hidden;
}

#viewCategories .catProdCard img{
  width:100%;
  height: var(--prodImgH);
  object-fit: cover;
  display:block;
  background:#f2f2f2;
}

#viewCategories .catProdInfo{
  display:block;                /* ✅ رجّع info */
  padding: 10px 10px 12px;
}

#viewCategories .catProdName{
  font-size: var(--prodName);
  font-weight: 900;
  color:#111;
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.2em * 2);
  margin-bottom: 6px;
}

#viewCategories .catProdPrice{
  font-size: var(--prodPrice);
  font-weight: 1000;
  color: var(--brand);
}

/* =========================================================
   ✅ RESPONSIVE
   ========================================================= */

/* very small phones */
@media (max-width: 360px){
  :root{
    --leftW:98px;
    --rightPadX:12px;

    --titleBig:22px;

    --subImg:70px;
    --subGapY:22px;
    --subGapX:14px;
    --subName:13px;

    --tabFont:14px;
    --tabPillPadY:8px;
    --tabPillPadX:12px;

    --prodImgH:118px;
    --prodName:12px;
    --prodPrice:13px;
  }

  #viewCategories .catSideItem{
    font-size: 14px;
    padding: 12px var(--leftPadX);
  }

  #viewCategories .catTab.active{ min-width: 132px; }
}

/* normal phones */
@media (min-width: 361px) and (max-width: 480px){
  :root{
    --leftW:108px;
    --titleBig:24px;

    --subImg:74px;
    --subName:13px;

    --tabFont:14px;

    --prodImgH:124px;
  }

  #viewCategories .catTab.active{ min-width: 140px; }
}

/* big phones / tablets */
@media (min-width: 481px) and (max-width: 899px){
  :root{
    --leftW:130px;
    --rightPadX:18px;

    --titleBig:30px;

    --subImg:86px;
    --subName:15px;

    --tabFont:16px;

    --prodImgH:150px;
    --prodName:13px;
    --prodPrice:14px;
  }

  #viewCategories .catCircleGrid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  #viewCategories .catProductsGrid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* desktop */
@media (min-width: 900px){
  :root{
    --leftW:160px;
    --rightPadX:22px;

    --titleBig:34px;

    --subImg:94px;
    --subName:16px;

    --tabFont:16px;

    --prodImgH:170px;
  }

  #viewCategories .catCircleGrid{
    grid-template-columns: repeat(5, minmax(0,1fr));
  }

  #viewCategories .catProductsGrid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}






/* =========================================================
   OVERRIDES (PUT THIS AT VERY END OF categories.css)
   ========================================================= */

/* ✅ امنع أي padding يمين/يسار بقوة على categories */
body.view-categories #appMain.withLayout{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.view-categories #viewCategories,
body.view-categories #viewCategories *{
  /* لا تحط padding على كل العناصر، بس بنمنع على wrappers الأساسية */
}
body.view-categories #viewCategories .categoriesPage{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.view-categories #viewCategories .catContent{
  padding-left: 16px !important;   /* هيدا الوحيد اللي بدنا يضل */
  padding-right: 16px !important;  /* هيدا الوحيد اللي بدنا يضل */
  box-sizing: border-box !important;
}

/* ✅ كبّر ارتفاع صورة المنتج شوي */
#viewCategories .catProdCard img{
  height: 158px !important;  /* كان 128 */
}

/* ✅ اسم المنتج سطر واحد فقط */
#viewCategories .catProdName{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  min-height: 0 !important;
  -webkit-line-clamp: unset !important;
}

/* ✅ Tabs: منع "New" تزحلق لأن Top Selling صار أعرض */
#viewCategories .catTabs{
  justify-content: flex-start !important;
}
#viewCategories .catTab{
  flex: 0 0 auto !important;
}
#viewCategories .catTab.active{
  width: 165px !important;   /* تثبيت عرض الـ pill */
  min-width: 165px !important;
  text-align: center !important;
}
#viewCategories .catTab:not(.active){
  margin-left: 14px !important; /* مسافة ثابتة بينهن */
}

/* ✅ Responsive: كبّر الصورة كمان على شاشات أكبر */
@media (min-width: 481px){
  #viewCategories .catProdCard img{
    height: 178px !important;
  }
}
@media (min-width: 900px){
  #viewCategories .catProdCard img{
    height: 195px !important;
  }
}