/* Style the tab */
.tab {
  overflow: hidden;
  background: rgba(18, 215, 113, 0.597);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(47, 184, 81, 0.296);
  background-size: auto;
}

.tab button {
appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  border-radius: 16px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background: rgba(18, 215, 44, 0.584);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #07881eb1;

}

/* Style the tab content */
.tabcontent {
  display: none;
  background: rgba(18, 215, 113, 0.597);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(47, 184, 81, 0.296);
  padding: 6px 12px;
  border: 1px solid #0be45f8f;
  border-top: none;
  box-sizing:border-box;
  height: 100%;
  overflow-y:auto;
}

.Information-Shop {
    margin:left;
    width:100%;
    height: auto;
}

.Shop_Sidebar p {
    background: linear-gradient(to bottom,
    rgba(206,237,252,0.7) 0%,
    rgba(181,209,214,0.5) 55%,
    rgba(169,194,197,0.5) 55%,
    rgba(174,193,193,0.7) 100%);
}

.Shop_Sidebar {
    background: linear-gradient(to top, rgba(146, 249, 249, 0.4), transparent);
    flex:1;
    margin-left:20px;
    text-align: center;
    border-radius: 16px;

    width: 320px;

    height: 100%;

    overflow: hidden;
}

.tabcontent::-webkit-scrollbar{
    width:12px;
}

.tabcontent::-webkit-scrollbar-track{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}

.tabcontent::-webkit-scrollbar-thumb{
    background:linear-gradient(
        to bottom,
        #dff6ff,
        #6ec7ff,
        #4a98ff
    );

    border-radius:10px;
    border:2px solid rgba(255,255,255,.3);
}

.tabcontent::-webkit-scrollbar-thumb:hover{
    background:#6aaeff;
}

.Shop_Layout{
    display:flex;
    height:calc(100vh - 275px)

}

.Shop_Main{

    flex:3;
    height: 100%;
    min-height:0;

}
.Product-list{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(230px,1fr));

    gap:20px;

    margin-top:25px;

}

.ProductCard{

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.55),
        rgba(210,245,255,.45)
    );

    border-radius:16px;

    padding:15px;

    text-align:center;

    backdrop-filter:blur(8px);

    transition:.25s;

}

.ProductCard:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.ProductCard img{

    width:100%;

    border-radius:10px;

}

.ProductCard button{

    width:100%;

    margin-top:10px;

    padding:10px;

    border:none;

    border-radius:20px;

    background: linear-gradient(to bottom,
    #ffe4c5 0%,
    #bf7f1f 55%,
    #9a4000 55%,
    #7a4e28 100%
);

    color:white;

    cursor:pointer;

}

.FeaturedBanner{

    padding:20px;

    margin:20px 0;

    border-radius:18px;

    background:
        linear-gradient(
            to right,
            rgba(173,235,255,.0) 25%,
            rgba(173,235,255,.45) 45%,
            rgba(138,255,232,.85) 70%,
            rgba(138,255,232,1) 100%
        ),
        url("Images/Shop Wallpaper AD.png") left center / 1000px no-repeat,
        linear-gradient(
            to right,
            rgba(173,235,255,.55),
            rgba(138,255,232,.45)
        );


    backdrop-filter:blur(8px);

}

.FeaturedBanner img{

    width:340px;

    border-radius:12px;

}

.FeaturedText{

    display:flex;

    flex-direction:column;

    justify-content:center;

    margin-left: 460px;   /* Starts after the product box */
    max-width: 650px;

}

.FeaturedText button{

    width:200px;

    height: auto;

    margin-top:15px;

    color: white;

    border-radius: 16px;

    background: linear-gradient(to bottom,
    #c5d5ff 0%,
    #1f52bf 55%,
    #00369a 55%,
    #28387a 100%
);

}

.FeaturedText button:active {
      background: linear-gradient(to bottom,
    #c5ffff 0%,
    #1fbfac 55%,
    #007e9a 55%,
    #286b7a 100%
);
}