Modes test

.github/workflows/sync.yml

@@ -0,0 +1,67 @@
+name: Universal Branch Sync
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - '**'
+  schedule:
+    - cron: "0 0 * * *"
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to sync (leave empty for current)'
+        required: false
+        default: ''
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    steps:
+      - name: ✅ Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GH_PAT }}
+
+      - name: 🔧 Configure Git
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: 🔗 Add Upstream Repository
+        run: |
+          git remote add upstream https://github.com/zidsa/custom-theme-sample.git || true
+          git fetch --prune upstream
+
+      - name: 🔄 Sync Main Branch Safely
+        run: |
+          git checkout main || git checkout -b main
+          git pull upstream main --no-rebase --no-commit || true
+          git push origin main
+
+      - name: 🔍 Determine Current Branch
+        id: branch
+        run: echo "branch=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_ENV
+
+      - name: 🔄 Sync Feature Branches with Main
+        run: |
+          for branch in $(git branch -r | grep -v 'origin/main' | grep -v 'HEAD' | sed 's/origin\///'); do
+            echo "➡️ Checking branch: $branch"
+            git checkout "$branch" || continue
+            git merge origin/main --no-commit --no-ff || true
+
+            if git diff-index --quiet HEAD; then
+              echo "✅ Branch '$branch' is already up-to-date."
+            else
+              echo "🚀 Updating branch '$branch'..."
+              git commit -m "Sync with upstream main"
+              git push origin "$branch"
+            fi
+          done
+
+      - name: 🧹 Post Checkout Repository
+        if: always()
+        run: echo "Post-job steps finished."

assets/custom.css

@@ -266,15 +266,14 @@
     margin-left: -15px;
 }
 
-.products-list .prod-col, .bundle-offer-products .prod-col{
-    width: 20%;
-    padding: 15px;
+.products-list{
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(4,1fr);
 }
-
-.products-list .prod-col-attr{
-    width: 25%;
+.products-list .product-item{
+    width: 100%;
 }
-
 .sort-block-width {
     margin-left: 30px;
 }
@@ -538,10 +537,10 @@
         padding-right: 0px;
     }
 
-    .main-slider, .main-slider .slider-item {
-
+    .products-list{
+        grid-template-columns: repeat(2,1fr);
+        margin-inline: 10px;
     }
-
     .main-slider .slick-dots li button:before {
         font-size: 10px;
     }
@@ -562,7 +561,7 @@
     }
 
     .products-list .prod-col, .products-list .prod-col-attr{
-        width: 50%;
+        width: 100%;
     }
 
     .product-item {
@@ -585,9 +584,14 @@
         width: 32px;
     }
 
-}
 
+}
 
+@media ( min-width: 769px ) and ( max-width: 992px){
+    .products-list{
+        grid-template-columns: repeat(3,1fr);
+    }
+}
 .btn:focus,.btn:active, .page-link:focus, .page-link:active {
     outline: none !important;
     box-shadow: none;
@@ -636,7 +640,7 @@
   height: 35px;
   cursor: pointer;
   border-radius: 5px;
-  background-color: white;
+  background-color: transparent;
 }
 
 .rtl .add-to-wishlist {
@@ -659,3 +663,100 @@
   mask-image: url('./heart-filled.svg');
   background-color: var(--primary_color, #D86F6F);
 }
+
+/* product0-slider */
+.custom-slider-section {
+    margin-bottom: 4rem;
+}
+.custom-product-title{
+    font-size: 32px;
+    font-weight: 600;
+}
+.custom-main-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px; 
+}
+
+.slider-navigation {
+    display: flex;
+    gap: 10px; 
+}
+.slider-navigation .swiper-button-prev,
+.slider-navigation .swiper-button-next {
+    color: white;
+    background: var(--primary-color);
+    opacity: 0.8;
+    border-radius: 50%;
+    width: 53px;
+    height: 53px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    position: static;
+}
+.slider-navigation .swiper-button-next:after,
+.slider-navigation .swiper-button-prev:after {
+    font-size: 15px;
+}
+.slider-navigation .swiper-button-next.swiper-button-disabled,
+.slider-navigation .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+}
+.custom-slider-section .swiper-container {
+    overflow: hidden;
+}
+{# style grid #}
+.show-all-btn {
+    width: 325px;
+    height: 63px;
+    padding: 15px 120px 10px 120px;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 38.4px;
+    text-align: center;
+    background: var(--primary-color);
+    color: white;
+}
+.custom-slider-section .product-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+}
+@media (max-width: 768px) {
+    .custom-slider-section .product-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+@media (max-width: 500px) {
+    .custom-slider-section {
+        margin-bottom: 2rem;
+    }
+    .custom-product-title{
+        text-align: center;
+         margin:auto;
+        font-size: 24px;
+    }
+    .custom-slider-section .product-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 5px;
+    }
+    .slider-navigation .swiper-button-prev,
+    .slider-navigation .swiper-button-next {
+        display: none;
+    }
+    .show-all-btn {
+        width: 163px;
+        height: 31px;
+        padding: 7px 60px 5px 60px;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 19.2px;
+    }
+}

assets/main.css

@@ -229,10 +229,10 @@ button.more-button , a.more-button {
 
 .account-lang-currency .account-btn {
     background-color: transparent;
-    border: 1px solid var(--menu-header-text-color-primary-bg, var(--text-color-primary-bg));
+    border: 1px solid var(--header-text-color-primary-bg, var(--text-color-primary-bg));
     box-sizing: border-box;
     border-radius: 5px;
-    color: var(--menu-header-text-color-primary-bg, var(--text-color-primary-bg));
+    color: var(--header-text-color-primary-bg, var(--text-color-primary-bg));
     min-width: 124px;
     padding: 3px 5px;
 }
@@ -805,61 +805,6 @@ button.more-button , a.more-button {
     font-size: 18px;
 }
 
-/* 
-.cat-col, .prod-col {
-    flex: 0 0 20%;
-    max-width: 20%;
-
-    position: relative;
-    width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
-}
-
-.prod-col-tb {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-
-.slider-arrow {
-    height: 50px;
-    position: absolute;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-    cursor: pointer;
-}
-
-.slider-arrow span {
-    color: #ffffff;
-    font-size: 40px;
-}
-
-.slider-arrow.right {
-    right: -40px;
-}
-
-.slider-arrow.left {
-    left: -40px;
-}
-
-@media only screen and (max-width: 768px) { 
-
-    .home-categories-section .categories {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    }
-
-}
-
-@media only screen and (max-width: 414px) { 
-
-    .home-categories-section .categories {
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    }
-
-} */
 /* products-section */
 
 .products-section {
@@ -968,7 +913,6 @@ button.more-button , a.more-button {
 
 .product-item {
     width: 100%;
-    max-width: 200px;
 }
 
 .product-item .product-title {
@@ -1012,7 +956,7 @@ button.more-button , a.more-button {
 .product-item img {
     max-width: 100%;
     max-height: 100%;
-    object-fit: contain;
+    object-fit: cover;
 }
 
 .products-title-section {
@@ -1747,6 +1691,14 @@ hr {
 
 }
 
+.btns-card .btn-primary {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+}
 .btn-primary {
     color: var(--text-color-primary-bg);
     background-color: var(--primary-color);
@@ -1764,6 +1716,7 @@ hr {
     border-color: #cccccc;
 }
 
+
 .form-control:focus {
     box-shadow: none !important;
     border-color: #cccccc;