/* assets/css/category-layout.css */

.mod{margin:12px 0}
.modTitle{font-size:16px;margin:8px 0}

/* mounts safety (SPA) */
#catSubCats,#catContentTop,#catContentBottom{display:block;width:100%}
.mod{min-height:1px}

/* sub categories */
.subCats{display:flex;gap:10px;overflow:auto;padding:4px 2px}
.subCat{flex:0 0 auto;width:92px;text-align:center;color:inherit;text-decoration:none}
.subCatImg{width:92px;height:92px;border-radius:18px;overflow:hidden;background:#eee}
.subCatImg img{width:100%;height:100%;object-fit:cover}
.subCatName{font-size:12px;margin-top:6px}

/* story */
.storyRow{display:flex;gap:10px;overflow:auto}
.storyItem{flex:0 0 auto;width:92px;text-align:center;color:inherit;text-decoration:none}
.storyImg{width:92px;height:92px;border-radius:18px;overflow:hidden;background:#eee}
.storyImg img{width:100%;height:100%;object-fit:cover}
.storyName{font-size:12px;margin-top:6px}

/* banners */
.bannerGrid{display:grid;gap:10px}
.bannerItem{display:block;border-radius:14px;overflow:hidden}
.bannerItem img{width:100%;display:block}

/* products row */
.prodRow{display:flex;gap:10px;overflow:auto}
.prodCard{flex:0 0 auto;width:160px;border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit}
.prodImg{height:170px;background:#f3f3f3}
.prodImg img{width:100%;height:100%;object-fit:cover}
.prodName{font-size:12px;padding:8px}
.prodPrice{padding:0 8px 10px;font-size:13px}
.prodPrice .old{text-decoration:line-through;opacity:.6;margin-inline-start:6px}

/* html module */
.htmlBlock{border:1px dashed #ddd;border-radius:14px;padding:10px}



.ssWrap{overflow:hidden;border-radius:16px}
.ssSlide{display:none}
.ssSlide.isOn{display:block}
.ssSlide img{width:100%;display:block}
.ssDots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.ssDot{width:8px;height:8px;border-radius:50%;border:0;background:#ddd}
.ssDot.isOn{background:#111}






/* ===============================
   FORCE DESKTOP GRID (CATEGORY)
   =============================== */

/* المنتجات الأساسية */
@media (min-width: 750px){

  /* grid تبع صفحة القسم */
  .productsGrid{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }



/* شاشات كبيرة */
@media (min-width: 1200px){
  .productsGrid{
    grid-template-columns: repeat(5, 1fr) !important;
  }}}