/* Store Products, consisting of 2 columns : (1)Side Menu, (2)Banners/Product Images (Image-Grid) */

.store-products {
    display: flex;
}

/* 1. Side Menu */
.product-menu {
    font-size:14px;
    width: 200px;
    color: #fff;
    height: 100vh;
    padding-top: 8px;
}

.product-menu 
.submenu a,
.submenu a:visited,
.submenu a:active {
  text-decoration: none !important;
}

/* Main menu style */
.product-menu.menu {
    padding: 12px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}
.product-menu.menu:hover {
    background: #34495e;
}

/* Submenu container */
.product-menu.submenu {
    display: none;
    padding-left: 20px;
    background: #34495e;
}

/* Submenu items */
.product-menu.submenu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #bdc3c7;
    transition: background 0.3s, color 0.3s;
}

/* Highlight active submenu */
.product-menu.submenu a.active {
    background: #1abc9c;
    color: #fff;
    border-radius: 4px;
}

.product-menu.submenu a:hover {
    background: #16a085;
    color: #fff;
}

.product-menu.menu-selected {
    background-color: #00f !important;
    color: #fff !important;
    font-weight: bold;
}

/* End of Side Menu */


/* 2. Store Contents */
.store-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-top: 10px;
}
/* End of Store Contents */


/* 2a. Store Banners */
.store-banner img {
    width: 100%;
    height: auto;
}

/* 2b. Store Products */
.image-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.image-grid .pagination-container {
    grid-column: 1 / -1; /* Spans from first to last column */
    text-align: right;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0px;
    }
}

.image-grid img {
    display:flex;
}

/* End of Store Products */


/* Image Grid class for getStores function */

.store-card {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.slider img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .store-card {
        width: 200px;
        height: 140px;
    }
}

/* Image slider captions */

figure {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

figure figcaption {
    display: block;
    color: black;
    font-size: 14px;
    text-align: center;
}

/* End of Image slider captions */

/* End of Image Grid class for getStores function */