From 391df3bb41d21b25a69c542f702a46e7272b0fa8 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Fri, 17 Apr 2026 18:00:36 +0800
Subject: [PATCH] feat: enhance team store page layout and styling for improved
 user experience

---
 .../teamstore-sublayouts/index.blade.php      | 229 ++++++++---
 .../product-details.blade.php                 | 382 ++++++++++++++----
 .../teamstore-sublayouts/stores.blade.php     | 295 ++++++++++----
 3 files changed, 694 insertions(+), 212 deletions(-)

diff --git a/resources/views/teamstore-sublayouts/index.blade.php b/resources/views/teamstore-sublayouts/index.blade.php
index 5fc4196..6e8b910 100644
--- a/resources/views/teamstore-sublayouts/index.blade.php
+++ b/resources/views/teamstore-sublayouts/index.blade.php
@@ -7,14 +7,17 @@
 @endif
 
 <style>
+    body {
+        background: #f4f6f8;
+    }
+
     h2 {
         width: 100%;
         margin: 0;
         padding: 0;
         text-align: center;
-        margin-top: 40px;
-        margin-bottom: 40px;
-        
+        margin-top: 34px;
+        margin-bottom: 24px;
     }
     /* h2:after {
         display: inline-block;
@@ -41,6 +44,15 @@
         font-size: 12px;
         margin-top: 5px;
     }
+
+    .featured-title {
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: 0.6px;
+        color: #111827;
+        text-transform: uppercase;
+    }
+
     .price{
         font-size: 25px;
         margin: 0 auto;
@@ -51,19 +63,107 @@
         border-bottom: 2px solid #4B8E4B;
     }
     .thumbnail{
-        /* opacity:0.70; */
-        -webkit-transition: all 0.5s; 
+        -webkit-transition: all 0.5s;
         transition: all 0.5s;
     }
-    .thumbnail:hover{
-        opacity:1.00;
-        box-shadow: 0px 0px 10px #4bc6ff;
-    }
     .line{
         margin-bottom: 5px;
     }
-    .thumbnail>img{
-        height:201.84px;
+    .products-grid {
+        margin-top: 6px;
+    }
+
+    .product-col {
+        margin-bottom: 22px;
+    }
+
+    .product-card {
+        height: 100%;
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    }
+
+    .product-card:hover {
+        transform: translateY(-2px);
+        border-color: #d1d5db;
+        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
+    }
+
+    .product-image-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+        min-height: 240px;
+        background: #f8fafc;
+        border-bottom: 1px solid #e5e7eb;
+    }
+
+    .product-image {
+        width: auto;
+        max-width: 100%;
+        height: auto;
+        max-height: 202px;
+        object-fit: contain;
+    }
+
+    .product-card-body {
+        padding: 12px 14px 14px;
+    }
+
+    .product-name-holder {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 1.35;
+        color: #111827;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .product-card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        margin-top: 12px;
+        padding-top: 10px;
+        border-top: 1px solid #eef2f7;
+    }
+
+    .price {
+        margin: 0;
+        font-size: 22px;
+        line-height: 1;
+        font-weight: 700;
+        color: #111827;
+    }
+
+    .price small,
+    .price-currency {
+        font-size: 13px;
+        color: #6b7280;
+        font-weight: 600;
+    }
+
+    .btn-view-details {
+        border-radius: 8px;
+        min-height: 36px;
+        font-weight: 600;
+        font-size: 12px;
+        padding: 8px 12px;
+        letter-spacing: 0.2px;
+    }
+
+    .empty-state {
+        margin: 50px 0;
+        color: #6b7280;
+        font-size: 15px;
     }
     @media screen and (max-width: 770px) {
         .right{
@@ -130,10 +230,13 @@
 
     /* ── Category nav ──────────────────────────────────────────────────────── */
     .cat-nav {
-        background: #f8f8f8;
-        border-bottom: 2px solid #e0e0e0;
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
         padding: 0;
         margin-bottom: 24px;
+        overflow: visible;
     }
     .cat-nav ul {
         list-style: none;
@@ -209,10 +312,13 @@
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
-        padding: 10px 0 14px;
+        padding: 10px 12px 14px;
         margin-bottom: 18px;
-        border-bottom: 1px solid #e8e8e8;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        background: #fff;
         align-items: center;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     }
     .league-filter .lf-label {
         font-size: 11px;
@@ -246,6 +352,38 @@
         color: #fff;
         border-color: #4B8E4B;
     }
+
+    @media screen and (max-width: 991px) {
+        .product-image-link {
+            min-height: 220px;
+        }
+
+        .btn-view-details {
+            padding: 7px 10px;
+        }
+    }
+
+    @media screen and (max-width: 767px) {
+        h2 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+        }
+
+        .featured-title {
+            font-size: 20px;
+        }
+
+        .product-card-footer {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 8px;
+        }
+
+        .btn-view-details {
+            width: 100%;
+        }
+    }
+
     [v-cloak] { display: none; }
 </style>
 
@@ -267,7 +405,7 @@
     </div>
     <div class="row">
         <div class="col-md-12">
-            <h2>FEATURED PRODUCTS</h2>
+            <h2 class="featured-title">Featured Products</h2>
         </div>
     </div>
 
@@ -376,26 +514,23 @@
         @endif
 
         {{-- ── Product grid ── --}}
-        <div class="row">
+        <div class="row products-grid">
             <div class="col-md-12 text-center" v-if="filtered.length === 0">
-                <p style="margin:40px 0;color:#888;">No products found in this category.</p>
+                <p class="empty-state">No products found in this category.</p>
             </div>
-            <div class="col-md-3 col-sm-6" v-for="p in filtered" :key="p.id">
-                <span class="thumbnail">
-                    <a :href="productUrl(p)">
-                        <img style="height:201.84px;" :src="imgUrl(p)" :alt="p.name">
+            <div class="col-md-3 col-sm-6 product-col" v-for="p in filtered" :key="p.id">
+                <div class="product-card">
+                    <a :href="productUrl(p)" class="product-image-link">
+                        <img class="product-image" :src="imgUrl(p)" :alt="p.name">
                     </a>
-                    <h4 class="text-center product-name-holder">@{{ p.name }}</h4>
-                    <hr class="line">
-                    <div class="row">
-                        <div class="col-md-7 col-sm-7">
-                            <p class="price">@{{ p.price }} <small style="font-size:15px;">@{{ store.currency }}</small></p>
-                        </div>
-                        <div class="col-md-5 col-sm-5">
-                            <a :href="productUrl(p)" class="btn btn-success right">View Details</a>
+                    <div class="product-card-body">
+                        <h4 class="text-center product-name-holder">@{{ p.name }}</h4>
+                        <div class="product-card-footer">
+                            <p class="price">@{{ p.price }} <small class="price-currency">@{{ store.currency }}</small></p>
+                            <a :href="productUrl(p)" class="btn btn-success btn-view-details">View Details</a>
                         </div>
                     </div>
-                </span>
+                </div>
             </div>
         </div>
 
@@ -419,22 +554,22 @@
         // ── league / conference keyword map ──────────────────────────────────
         // Order matters: more specific phrases first
         const LEAGUES = [
-            { key: 'NBA',     terms: ['nba'] },
-            { key: 'NFL',     terms: ['nfl'] },
-            { key: 'MLB',     terms: ['mlb'] },
-            { key: 'NHL',     terms: ['nhl'] },
-            { key: 'MLS',     terms: ['mls'] },
-            { key: 'WNBA',    terms: ['wnba'] },
-            { key: 'Big Ten', terms: ['big ten','big10','big 10'] },
-            { key: 'ACC',     terms: ['acc'] },
-            { key: 'SEC',     terms: ['sec'] },
-            { key: 'Big 12',  terms: ['big 12','big12'] },
-            { key: 'Pac-12',  terms: ['pac-12','pac12','pac 12'] },
-            { key: 'AAC',     terms: ['aac'] },
-            { key: 'CUSA',    terms: ['cusa','c-usa'] },
-            { key: 'MAC',     terms: ['\bmac\b'] },
-            { key: 'Sun Belt',terms: ['sun belt'] },
-            { key: 'Mountain West', terms: ['mountain west','mwc'] },
+            { key: 'WNBA',    terms: ['\\bwnba\\b'] },
+            { key: 'NBA',     terms: ['\\bnba\\b'] },
+            { key: 'NFL',     terms: ['\\bnfl\\b'] },
+            { key: 'MLB',     terms: ['\\bmlb\\b'] },
+            { key: 'NHL',     terms: ['\\bnhl\\b'] },
+            { key: 'MLS',     terms: ['\\bmls\\b'] },
+            { key: 'Big Ten', terms: ['\\bbig\\s*ten\\b','\\bbig\\s*10\\b','\\bbig10\\b'] },
+            { key: 'ACC',     terms: ['\\bacc\\b'] },
+            { key: 'SEC',     terms: ['\\bsec\\b'] },
+            { key: 'Big 12',  terms: ['\\bbig\\s*12\\b','\\bbig12\\b'] },
+            { key: 'Pac-12',  terms: ['\\bpac[-\\s]*12\\b','\\bpac12\\b'] },
+            { key: 'AAC',     terms: ['\\baac\\b'] },
+            { key: 'CUSA',    terms: ['\\bcusa\\b','\\bc-usa\\b'] },
+            { key: 'MAC',     terms: ['\\bmac\\b'] },
+            { key: 'Sun Belt',terms: ['\\bsun\\s+belt\\b'] },
+            { key: 'Mountain West', terms: ['\\bmountain\\s+west\\b','\\bmwc\\b'] },
         ];
 
         function classify(name) {
diff --git a/resources/views/teamstore-sublayouts/product-details.blade.php b/resources/views/teamstore-sublayouts/product-details.blade.php
index d4f3bdb..5fe8b60 100644
--- a/resources/views/teamstore-sublayouts/product-details.blade.php
+++ b/resources/views/teamstore-sublayouts/product-details.blade.php
@@ -7,6 +7,45 @@
 @endif
 <style>
 
+    body {
+        background: #f4f6f8;
+    }
+
+    .product-page {
+        padding-top: 14px;
+        padding-bottom: 28px;
+    }
+
+    .product-breadcrumb {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 10px;
+        margin-bottom: 18px;
+        padding: 10px 14px;
+    }
+
+    .product-breadcrumb .breadcrumb {
+        margin: 0;
+        background: transparent;
+        padding: 0;
+    }
+
+    .product-breadcrumb .breadcrumb > li,
+    .product-breadcrumb .breadcrumb > li.active,
+    .product-breadcrumb .breadcrumb > li + li:before {
+        color: #6b7280;
+        font-size: 12px;
+    }
+
+    .product-breadcrumb .breadcrumb > li > a {
+        color: #374151;
+        text-decoration: none;
+    }
+
+    .product-breadcrumb .breadcrumb > li > a:hover {
+        color: #111827;
+    }
+
     p{
         font-size: 12px;
         margin-top: 5px;
@@ -30,7 +69,8 @@
         box-shadow: 0px 0px 10px #4bc6ff;
     } */
     .line{
-        margin-bottom: 5px;
+        margin: 14px 0;
+        border-color: #e5e7eb;
     }
     @media screen and (max-width: 770px) {
         .right{
@@ -117,18 +157,45 @@
         border: none;
     }
 
-    .carousel-control.left {
-        margin-left: -35px;
-        margin-top: 7px;
-    }
-
-    .carousel-control.right {
-        margin-right: -35px;
-        margin-top: 7px;
+    #myCarousel {
+        position: relative;
+        width: 100%;
     }
 
     .carousel-control {
-        width: 0%;
+        width: 34px;
+        height: 34px;
+        top: 50%;
+        margin-top: -17px;
+        opacity: 1;
+        text-shadow: none;
+    }
+
+    .carousel-control.left {
+        left: -18px;
+        margin-left: 0;
+    }
+
+    .carousel-control.right {
+        right: -18px;
+        margin-right: 0;
+    }
+
+    .carousel-control .glyphicon {
+        width: 34px;
+        height: 34px;
+        line-height: 34px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.95);
+        border: 1px solid #d1d5db;
+        color: #374151;
+        font-size: 14px;
+    }
+
+    .carousel-control:hover .glyphicon {
+        background: #ffffff;
+        border-color: #9ca3af;
+        color: #111827;
     }
 
     .custom-chevron-left,
@@ -139,11 +206,127 @@
 
     .hide-bullets {
         list-style:none;
-        margin-left: -40px;
-        margin-top:20px;
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-left: 0;
     }
+    .hide-bullets > li {
+        margin-bottom: 12px;
+    }
+
+    .main-gallery-card,
+    .product-info-card,
+    .description-card {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    }
+
+    .main-gallery-card {
+        padding: 16px;
+    }
+
+    .main-image-stage {
+        border: 1px solid #eef0f3;
+        border-radius: 10px;
+        background: #fcfcfd;
+        min-height: 430px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .main-product-image {
+        max-height: 400px;
+        width: auto;
+        max-width: 100%;
+    }
+
+    .thumbnail {
+        border-radius: 10px;
+        border: 1px solid #d1d5db;
+        background: #fff;
+        margin-bottom: 0;
+        transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .thumbnail:hover {
+        border-color: #9ca3af;
+        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .a_thumbnail.active {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+
+    .image-thumbnails {
+        border-radius: 8px;
+        object-fit: contain;
+    }
+
+    .product-info-card {
+        padding: 22px;
+    }
+
+    .product-title {
+        margin: 0;
+        font-size: 28px;
+        line-height: 1.2;
+        font-weight: 700;
+        color: #111827;
+    }
+
+    .price {
+        font-size: 30px;
+        margin: 8px 0 18px;
+        color: #0f172a;
+        font-weight: 700;
+    }
+
+    .price small {
+        font-size: 14px;
+        color: #6b7280;
+        font-weight: 500;
+    }
+
+    #frm-order-list {
+        padding-top: 2px;
+    }
+
+    #btn-add-to-cart {
+        min-height: 44px;
+        padding: 10px 18px;
+        border-radius: 9px;
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 0.2px;
+        margin-top: 10px;
+    }
+
+    .description-card {
+        margin-top: 18px;
+        padding: 18px 22px;
+    }
+
+    .description-title {
+        margin: 0 0 10px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #111827;
+    }
+
+    .description-text {
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.65;
+        color: #4b5563;
+    }
+
     .spacer-top{
-        margin-top: 40px;
+        margin-top: 24px;
     }
     .roster-input{
         border-radius: 0px;
@@ -208,12 +391,49 @@
         overflow: auto;
     }
 
+    @media screen and (max-width: 991px) {
+        .product-info-card {
+            margin-top: 16px;
+        }
+
+        .main-image-stage {
+            min-height: 350px;
+        }
+
+        #btn-add-to-cart {
+            width: 100%;
+            float: none !important;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        .main-image-stage {
+            min-height: 300px;
+        }
+
+        .carousel-control.left {
+            left: -10px;
+        }
+
+        .carousel-control.right {
+            right: -10px;
+        }
+
+        .product-title {
+            font-size: 23px;
+        }
+
+        .price {
+            font-size: 26px;
+        }
+    }
+
 </style>
 
-<div class="container">
+<div class="container product-page">
     <div class="row">
         <div class="col-md-12">
-            <nav aria-label="breadcrumb">
+            <nav aria-label="breadcrumb" class="product-breadcrumb">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
                     <li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
@@ -224,68 +444,62 @@
     <div class="row">
 
         <div class="col-md-5 col-sm-5">
-            <div class="row">
-                <div class="col-sm-12" id="carousel-bounding-box">
-                    <div class="carousel slide" id="myCarousel" data-interval="false">
-                        <!-- Carousel items -->
-                        <div class="carousel-inner">
-                            @define $i = 0
-                            @foreach($thumbnails_array as $thumbnail)
-                                @if($thumbnail->ImageClass == 'active')
-                                    <div class="active item text-center" data-slide-number="{{ $i }}">
-                                        <span class="zoom img-zoom">
-                                            <img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
-                                        </span>
-                                    </div>
-                                @else
-                                    <div class="item text-center" data-slide-number="{{ $i }}">
-                                        <span class="zoom img-zoom">
-                                            <img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
-                                        </span>
-                                    </div>
-                                @endif
-                                @define $i++
-                            @endforeach
+            <div class="main-gallery-card">
+                <div id="carousel-bounding-box">
+                    <div class="main-image-stage">
+                        <div class="carousel slide" id="myCarousel" data-interval="false">
+                            <div class="carousel-inner">
+                                @define $i = 0
+                                @foreach($thumbnails_array as $thumbnail)
+                                    @if($thumbnail->ImageClass == 'active')
+                                        <div class="active item text-center" data-slide-number="{{ $i }}">
+                                            <span class="zoom img-zoom">
+                                                <img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
+                                            </span>
+                                        </div>
+                                    @else
+                                        <div class="item text-center" data-slide-number="{{ $i }}">
+                                            <span class="zoom img-zoom">
+                                                <img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
+                                            </span>
+                                        </div>
+                                    @endif
+                                    @define $i++
+                                @endforeach
+                            </div>
+
+                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+                                <span class="glyphicon glyphicon-chevron-left"></span>
+                            </a>
+                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+                                <span class="glyphicon glyphicon-chevron-right"></span>
+                            </a>
                         </div>
-                    
-                        <!-- Carousel nav -->
-                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
-                            <span class="glyphicon glyphicon-chevron-left"></span>
-                        </a>
-                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
-                            <span class="glyphicon glyphicon-chevron-right"></span>
-                        </a>
                     </div>
                 </div>
-                <!-- </div> -->
-            </div>
 
-            <hr class="line">
-            
-            <div class="row">
-                <div class="col-md-12">
-                    <ul class="hide-bullets">
-                        @define $j = 0
-                        @foreach($thumbnails_array as $thumbnail)
-                            <li class="col-sm-3 col-xs-3">
-                                <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" id="carousel-selector-{{ $j }}">
-                                    <img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ minio_url('images/' . $thumbnail->Image) }}"/>
-                                </a>
-                            </li>
-                            @define $j++
-                        @endforeach
-                    </ul>     
-                </div>
+                <hr class="line">
+
+                <ul class="hide-bullets row">
+                    @define $j = 0
+                    @foreach($thumbnails_array as $thumbnail)
+                        <li class="col-sm-3 col-xs-3">
+                            <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" id="carousel-selector-{{ $j }}">
+                                <img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ minio_url('images/' . $thumbnail->Image) }}"/>
+                            </a>
+                        </li>
+                        @define $j++
+                    @endforeach
+                </ul>
             </div>
 
         </div>
 
         <div class="col-md-7 col-sm-7">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h1>{{ $product_array[0]->ProductName }}</h1> <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
-                </div>
-                <div class="panel-body">
+            <div class="product-info-card">
+                <h1 class="product-title">{{ $product_array[0]->ProductName }}</h1>
+                <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
+
                     <div class="row">
                         <div class="col-md-12">
                             <form id="frm-order-list">
@@ -300,24 +514,28 @@
                            
                         </div>
                     </div>
-                    <div class="spacer-top"></div>
-                    <div class="row">
-                        <div class="col-md-12">
-                            <ul class="nav nav-tabs" role="tablist">
-                                <li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">Description</a></li>
-                            </ul>
-                            <!-- Tab panes -->
-                            <div class="tab-content">
-                                <div role="tabpanel" class="tab-pane active" id="productDescription">
-                                    <div class="row">
-                                        <div class="col-md-12">
-                                            <p>{{ $product_array[0]->ProductDescription }}</p>
-                                        </div>
+
+                <div class="description-card">
+                    <h3 class="description-title">Description</h3>
+                    <p class="description-text">{{ $product_array[0]->ProductDescription }}</p>
+                </div>
+
+                <div class="spacer-top"></div>
+                <div class="row">
+                    <div class="col-md-12">
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">More Details</a></li>
+                        </ul>
+                        <div class="tab-content">
+                            <div role="tabpanel" class="tab-pane active" id="productDescription">
+                                <div class="row">
+                                    <div class="col-md-12">
+                                        <p>{{ $product_array[0]->ProductDescription }}</p>
                                     </div>
                                 </div>
                             </div>
                         </div>    
-                    </div>
+                    </div>    
                 </div>
             </div>
         </div>
diff --git a/resources/views/teamstore-sublayouts/stores.blade.php b/resources/views/teamstore-sublayouts/stores.blade.php
index dcb1420..a499d59 100644
--- a/resources/views/teamstore-sublayouts/stores.blade.php
+++ b/resources/views/teamstore-sublayouts/stores.blade.php
@@ -2,108 +2,237 @@
 @section('content')
 
 <style>
-    a.thumbnail>img {
-        /* height: 250px; */
+    body {
+        background: #f4f6f8;
     }
-    
-    .hide-bullets {
-        list-style:none;
-        margin-left: -40px;
-        margin-top:20px;
-        position: relative;
+
+    .store-page {
+        padding-top: 14px;
+        padding-bottom: 26px;
     }
-    .thumbnail{
-        border: none;
-        display: unset;
-        background-color: transparent;
+
+    .store-header {
+        margin-bottom: 14px;
     }
-    .li-custom{
-        padding:10px;
+
+    .store-title {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 700;
+        color: #111827;
     }
-    .store-logo{
-        /* height: 250px;
-        width: 250px;
+
+    .store-subtitle {
+        margin: 6px 0 0;
+        font-size: 13px;
+        color: #6b7280;
+    }
+
+    .store-toolbar {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+        padding: 14px;
+        margin-bottom: 18px;
+    }
+
+    .store-toolbar label {
+        font-size: 12px;
+        color: #4b5563;
+        font-weight: 600;
+        margin-bottom: 6px;
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+    }
+
+    .store-toolbar .form-control,
+    .store-toolbar .btn {
+        height: 40px;
+        border-radius: 8px;
+    }
+
+    .store-toolbar .form-control {
+        border-color: #d1d5db;
+        box-shadow: none;
+    }
+
+    .store-toolbar .form-control:focus {
+        border-color: #9ca3af;
+        box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
+    }
+
+    .store-grid {
+        list-style: none;
+        padding-left: 0;
+        margin: 0 -10px;
+    }
+
+    .store-grid > li {
+        padding: 10px;
+    }
+
+    .store-card {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
         overflow: hidden;
-        object-fit: contain; */
-        /* cursor: pointer; */
+        height: 100%;
+        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
     }
-    a.thumbnail>img{
-        height: 150px
+
+    .store-card:hover {
+        transform: translateY(-2px);
+        border-color: #d1d5db;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+    }
+
+    .store-link {
+        display: block;
+        text-decoration: none;
+    }
+
+    .store-link:hover,
+    .store-link:focus {
+        text-decoration: none;
+    }
+
+    .store-logo-wrap {
+        height: 170px;
+        background: #f8fafc;
+        border-bottom: 1px solid #e5e7eb;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 14px;
+    }
+
+    .store-logo {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .store-meta {
+        padding: 12px;
+        min-height: 72px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .store-name {
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.35;
+        font-weight: 700;
+        color: #111827;
+        text-align: center;
+        text-transform: uppercase;
+        word-break: break-word;
+    }
+
+    .store-lock {
+        color: #6b7280;
+        margin-left: 4px;
+    }
+
+    .store-pagination {
+        margin-top: 18px;
+    }
+
+    .store-pagination .pagination {
+        margin: 0;
+    }
+
+    @media (max-width: 767px) {
+        .store-title {
+            font-size: 21px;
+        }
+
+        .store-toolbar {
+            padding: 12px;
+        }
+
+        .store-logo-wrap {
+            height: 155px;
+        }
     }
 </style>
-<div class="container">
-	<div class="row">
+<div class="container store-page">
+    <div class="row store-header">
         <div class="col-lg-12">
-            <h2 style="font-size: 20px; font-weight: bold; ">TEAM STORES</h2>
-            <hr>
+            <h2 class="store-title">Team Stores</h2>
+            <p class="store-subtitle">Browse and open your team store.</p>
         </div>
-	</div><!-- /row -->
-    <div class="row">
-        <!-- <div class="col-sm-12"> -->
-            <!-- <div class="well"> -->
-                <form class="form-horizontal" role="search" id="frm_search_store">
-                    <div class="col-lg-7">
-                        <div class="form-group">
-                            <div class="col-sm-12">
-                                <label>Seach Store</label>
-                                <div class="input-group">
-                                    <input type="text" class="form-control" placeholder="Search Store" value="{{ $keyword }}"  name="q">
-                                    <div class="input-group-btn">
-                                        <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-5">
-                        <div class="form-group">
-                            <label  class="col-sm-7 control-label hidden-xs">&nbsp;</label>
-                            <div class="col-sm-5">
-                                <label>Sort by:</label>
-                                <select class="form-control" name="s" id="select_sort_stores">
-                                    <option  @if($filter == "al-asc") selected @endif  value="al-asc">Store Name A &rarr; Z</option>
-                                    <option  @if($filter == "al-desc") selected @endif  value="al-desc">Store Name Z &rarr; A</option>
-                                    <option  @if($filter == "latest") selected @endif  value="latest">Newest &rarr; Oldest</option>
-                                    <option  @if($filter == "oldest") selected @endif  value="oldest">Oldest &rarr; Newest</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                </form>
-                <div class="clearfix"></div>
-            <!-- </div> -->
-        <!-- </div> -->
     </div>
-    <div class="row" id="slider-thumbs">
-            <!-- Bottom switcher of slider -->
-        <ul class="hide-bullets">
-            @foreach ($stores_array as $store)
-            <li class="li-custom col-lg-3 col-md-3 col-sm-4 col-xs-12">
-                <div style="border: 1px solid #dddddd; padding: 5px;">
-                    @if($store->Password != null )
-                        <a class="thumbnail password-protected" href="#" data-store-id="{{  $store->Id }}" data-store-url="{{  $store->StoreUrl }}">
-                            <img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
-                        </a>
-                        <h4  style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{  $store->StoreName }}  <i class="fa fa-lock" title="This store is password protected."></i></h4>
-                    @else
-                        <a class="thumbnail" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
-                            <img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
-                        </a>
-                        <h4 style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{  $store->StoreName }}</h4>
-                    @endif
+
+    <div class="store-toolbar">
+        <form role="search" id="frm_search_store">
+            <div class="row">
+                <div class="col-md-8 col-sm-7">
+                    <label>Search Store</label>
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="Search store" value="{{ $keyword }}" name="q">
+                        <div class="input-group-btn">
+                            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
+                        </div>
+                    </div>
                 </div>
-            </li>
-            @endforeach 
-        </ul>                 
+                <div class="col-md-4 col-sm-5">
+                    <label>Sort by</label>
+                    <select class="form-control" name="s" id="select_sort_stores">
+                        <option @if($filter == "al-asc") selected @endif value="al-asc">Store Name A &rarr; Z</option>
+                        <option @if($filter == "al-desc") selected @endif value="al-desc">Store Name Z &rarr; A</option>
+                        <option @if($filter == "latest") selected @endif value="latest">Newest &rarr; Oldest</option>
+                        <option @if($filter == "oldest") selected @endif value="oldest">Oldest &rarr; Newest</option>
+                    </select>
+                </div>
+            </div>
+        </form>
     </div>
-    <div class="row">
+
+    <div id="slider-thumbs">
+        <ul class="store-grid row">
+            @foreach ($stores_array as $store)
+                <li class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+                    <div class="store-card">
+                        @if($store->Password != null)
+                            <a class="store-link password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
+                                <div class="store-logo-wrap">
+                                    <img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
+                                </div>
+                            </a>
+                            <div class="store-meta">
+                                <h4 class="store-name">{{ $store->StoreName }} <i class="fa fa-lock store-lock" title="This store is password protected."></i></h4>
+                            </div>
+                        @else
+                            <a class="store-link" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
+                                <div class="store-logo-wrap">
+                                    <img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
+                                </div>
+                                <div class="store-meta">
+                                    <h4 class="store-name">{{ $store->StoreName }}</h4>
+                                </div>
+                            </a>
+                        @endif
+                    </div>
+                </li>
+            @endforeach
+        </ul>
+    </div>
+
+    <div class="row store-pagination">
         <div class="col-sm-12">
             <div class="text-center">
                 {!! $stores_array->render() !!}
             </div>
         </div>
     </div>
-</div><!-- /container -->
+</div>
 
 
 <div id="team-store-login" class="modal fade" role="dialog">