/* ****** banner ********************************** */ 

.productdetailbanner {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    margin: -32px auto 16px; /* Center the container horizontally */
    height: auto;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow */
}

.productdetailbanner img {
    margin-top: 64px;
    max-width: 100%; /* Ensure the image scales down to fit the container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Prevent cropping */
}

.pagesection {
    font-size: var(--main-font-size);
    font-family: var(--main-font-family);
    color: var(--light-text-color);
    background: var(--info-background);
    height: auto;
    margin: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
    line-height: 32px;
    margin-bottom: 32px;
}

/* ****** Product detail ********************************** */

.productdetail {
    margin-top: -32px;
}

.productdetail .pagesection p {
    margin-top: -8px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    line-height: 30px;
}

.productdetail .aboutsection{
    padding-left: 16px;
    padding-right: 16px;
    line-height: 30px;
}

.productdetail .pagesection li p {
    margin-top: 0;
    margin-bottom: 0;
}

.productdetail .pagesection .imagesone img {
    width: 90%;
}

.productdetail .pagesection .imagestwo img {
    width: 50%;
}
.productdetail .pagesection .imagesthree img {
    width: 33%;
}
.productdetail .pagesection .imagesfour img {
    width: 25%;
}

.productdetail .feature {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 32px;
    cursor: pointer;
}

.productdetail .shadow {
    border-radius: 16px;
    box-shadow: black 0px 0px 16px 0px;
}

/* ****** Gallery ********************************** */

.glider-contain {
    margin: 0 auto;
    max-width: 800px;
}
.glider {
    display: flex;
}
.glider img {
    max-width: 100%;
    cursor: pointer;
}

.glider-prev.glider-button {
    background: var(--main-background);
    color: var(--main-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    left: -54px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: black 0px 0px 16px 0px;
}
.glider-next.glider-button {
    background: var(--main-background);
    color: var(--main-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    right: -54px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: black 0px 0px 16px 0px;
}