style.css

/* -
        GreenStore Project est.2021 
Created by @luca.ambroo_ 
github: https://github.com/lucAmbr0/
Insta: https://www.instagram.com/luca.ambroo_/ 
*/
/* -------------------- IMPORT FONTS --------------------*/

/* Normal text: font-family: 'Noto Sans', sans-serif; */
/* Headings/Titles: font-family: 'Poppins', sans-serif; */
/* All credits in Disclaimer.html */

/* -------------------- GENERAL RULES --------------------*/

html {
    scroll-behavior: smooth;
}

body {
    background-color: rgba(120, 239, 120, 0.55)
}

::selection {
    background-color: rgba(0, 0, 0, 0.3);
}

.everything {
    display: block;
}

#disclaimerPage {
    padding: 3% 10% 2% 5%;
}

/* -------------------- ANIMATIONS DEFINITIONS  --------------------*/

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px) translateX(0);
    }

    to {
        opacity: 1;
        transform: translateY(0px) translateX(0);
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes zoomOut {
    from {
        opacity: 0;
        scale: 0.6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes softZoomOut {
    from {
        opacity: 0;
        scale: 0.8;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes disappear {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(0px);
    }
}

/* -------------------- HOMEPAGE --------------------*/

.popup {
    display: none;
    animation: opacity 0.6s forwards;
    animation-delay: 0s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    z-index: 3;
}

#popupLogout {
    display: none;
    opacity: 1;
}

#logout {
    width: 50%;
    height: 30%;
    top: 35%;
    left: 25%;
    opacity: 0;
    display: none;
    animation: zoomOut 0.6s forwards;
    animation-delay: 0s;
    margin-bottom: -10%;
}

#logoutButton {
    height: fit-content;
    padding: 1% 0 1% 0;
}

.cookiesNoticeBoxStyle {
    position: fixed;
    z-index: 4;
    top: 27.5%;
    left: 20%;
    width: 60%;
    height: 45%;
    padding: 10px 0 0 0;
    justify-content: center;
    justify-items: center;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.326);
    border: double 4px rgba(0, 0, 0, 0.6);
    box-shadow: 5px 10px 10px rgb(37, 37, 37);
    opacity: 0;
    animation: zoomOut 0.6s forwards;
    animation-delay: 0s;
}

#cookiesNoticeBox {
    display: none;
}

.cookiesText {
    margin: 10px;
    font-size: 35px;
    text-align: center;
    font-family: Poppins;
    font-weight: 800;
    text-decoration: underline;
    animation: none;
    opacity: 1;
}

.cookiesTextParagraph {
    font-size: 20px;
    font-family: Noto Sans;
    font-weight: 400;
    padding: 15px;
    text-align: justify;
    line-height: 1.2;
    animation: none;
    opacity: 1;
}

.cookiesButtonsContainer {
    display: flex;
    background-color: transparent;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 20%;
}

.onlyEssentialCookies {
    display: block;
    width: 25%;
    height: 70%;
    font-family: Noto Sans;
    font-weight: 300;
    background-color: rgba(0, 0, 0, 0.221);
    border: solid 3px black;
    border-radius: 12px;
    margin: 20px;
    cursor: pointer;
    scale: 1;
    opacity: 0.6;
    transition: 0.3s;
}

.onlyEssentialCookies:hover {
    scale: 1.04;
    opacity: 0.8;
}

.allCookies {
    width: 33%;
    height: 85%;
    font-family: Noto Sans;
    font-weight: 800;
    font-size: 24px;
    background-color: rgba(28, 176, 65, 0.718);
    border: solid 3px black;
    border-radius: 12px;
    margin: 10px 8% 10px 10px;
    cursor: pointer;
    scale: 1;
    opacity: 0.9;
    transition: 0.3s;
}

.allCookies:hover {
    scale: 1.1;
    opacity: 1;
    background-color: rgba(28, 176, 65, 0.918);
}

.header {
    animation: fadeUp 0.5s forwards;
    animation-delay: 0s;
    margin: 20px 0.85% 15px 0.85%;
    display: grid;
    grid-template-areas:
        "titleImgContainer"
        "navbarItems";
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 30px 30px 4px 4px;
    flex-wrap: wrap;
}

.smallLogoContainer {
    display: flex;
    justify-content: left;
}

.smallLogo {
    width: 30%;
    margin: 20px 20px 20px 20px;
    display: flex;
    cursor: pointer;
}

/* .headerTitle {
    font-size: 50px;
    font-family: Poppins;
    margin: 5px auto 5px 5%;
    display: flex;
    text-align: center;
    align-items: center;
    letter-spacing: 2px;
    font-weight: bolder;
    color: rgb(37, 37, 37);
    text-shadow: 0px 5px 5px black;
} */

.navbar {
    background-color: rgba(0, 0, 0, 0.25);
    grid-area: navbarItems;
    border-radius: 25px 25px 4px 4px;
    display: grid;
    grid-template-areas: "leftBar rightBar";
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
    animation: zoomOut 0.8s forwards;
    animation-delay: 0s;
}

.navbarMobile {
    display: none;
}

.hideDesktopVersion {
    display: none;
}


.navbarLink {
    margin: 0px 3px 0px 3px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    font-family: Poppins;
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 22px;
    padding: 2px 8px 2px 8px;
    transition: 0.3s;
    color: rgb(220, 220, 220);
    cursor: pointer;
    animation: zoomOut 0.8s forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.selected {
    background-color: rgba(0, 0, 0, 0.55);
    color: white;
}

.selected:hover {
    background-color: rgba(0, 0, 0, 1);
}

.navbarLink:hover {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
}

#leftLink {
    margin: 0px 3px 0px 0px;
    border-radius: 22px 12px 12px 5px;
}

#rightLink {
    margin: 0px 0px 0px 3px;
    border-radius: 12px 22px 5px 12px;
}

.titleImgContainer {
    column-span: all;
    grid-area: titleImgContainer;
    display: flex;
    justify-content: center;
    margin: 30px;
}

.longTitle {
    width: 40%;
}

.leftBar {
    grid-area: leftBar;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.rightBar {
    grid-area: rightBar;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.content {
    animation: fadeUp 0.4s forwards;
    animation-delay: 0.5s;
    background-color: rgba(0, 0, 0, 0.25);
    margin: 10px 0.85% 15px 0.85%;
    border-radius: 4px 4px 4px 4px;
    padding: 2%;
    opacity: 0;
}

h1 {
    font-family: Poppins;
    font-weight: bolder;
    border-left: double 15px rgb(20, 20, 20);
    font-size: 45px;
    margin-left: 25px;
    padding-left: 15px;
    margin-top: -5px;
    transition: 0.4s;
    animation: fadeUp 0.5s forwards;
    animation-delay: 0.5s;
    color: rgb(20, 20, 20);
}

h1:hover {
    margin-left: 40px;
    width: fit-content;
    color: rgb(20, 20, 20);
}

.disclaimerTitle {
    font-size: 38px;
    border-left: double 11px rgb(20, 20, 20);
}

details {
    margin-bottom: 20px;
}

p {
    font-family: Noto Sans;
    font-weight: 400;
    text-align: left;
    font-size: 24px;
    margin: 10px 5% 10px 5%;
    line-height: 1.15;
    animation: fadeUp 0.6s forwards;
    animation-delay: 0.4s;
    opacity: 0;
    color: rgb(35, 35, 35);
}

strong {
    color: rgb(30, 30, 30);
}

.disclaimerParagraph {
    text-align: justify;
    font-size: 20px;
}

#hiddenDiv {
    display: none;
}

.hiddenInput {
    margin: 20px 0 20px 10%;
    width: fit-content;
    border: dashed 2px black;
    opacity: 0.5;
    border-radius: 20px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.35);
    cursor: not-allowed;
}

.hiddenInput:hover {
    opacity: 0.7;
}

.hiddenButton {
    margin-right: 10px;
    background-color: rgb(15, 15, 15);
    color: white;
    width: fit-content;
    padding: 5px;
    font-size: 14px;
    font-family: Noto Sans;
    cursor: not-allowed;
}

.hiddenButton::placeholder {
    color: white;
}

#italic {
    font-style: italic;
}

li::marker {
    color: black;
}

::marker {
    color: transparent;
}

summary {
    cursor: pointer;
}

.shippingSection {
    display: grid;
    grid-template-areas:
        "img p p";
    margin: 50px;
    flex-wrap: wrap;
}

.itMap {
    grid-area: img;
    width: 100%;
    border: solid 4px black;
    border-radius: 15px;
    transform: scale(1.0);
    transition: 0.4s;
}

.itMap:hover {
    border-radius: 30px;
}

.shippingParagraph {
    grid-area: p;
    margin-left: 40px;
    text-align: justify;
}

.itMapAlign {
    justify-content: end;
    float: right;
}

.expandImg {
    margin-top: -35px;
    margin-left: 65px;
    margin-bottom: 20px;
    font-size: 18px;
    border: solid 3px black;
    border-radius: 8px;
    width: fit-content;
    padding: 4px 8px 4px 8px;
    transition: 0.4s;
    opacity: 0.8;
}

.expandImg:hover {
    border-radius: 8px 20px 20px 8px;
    opacity: 1;
    margin-left: 85px;
}

#DesktopMapButton {
    display: block;
}

#altMobileMapButton {
    display: none;
}

.noDeco {
    color: black;
    text-decoration: none;
}

.noAnimation {
    animation: none;
    animation-delay: none;
    opacity: 1;
}

.linkDeco {
    color: darkblue;
    text-decoration: underline darkblue;
}

.reviewBox {
    display: flex;
    border: solid 4px rgb(37, 37, 37);
    background-color: rgba(0, 0, 0, 0.111);
    border-radius: 15px;
    margin: 40px 9% 50px 13%;
    flex-wrap: wrap;
    transition: 0.3s;
}

.reviewBox:hover {
    border: solid 4px black;
    background-color: rgba(55, 169, 59, 0.2);
    border-radius: 25px;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.626);
}

#mainReviewBox {
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.626);
}

#mainReviewBox:hover {
    box-shadow: 7px 0px 15px rgba(0, 0, 0, 0.626);
}

.starsContainer {
    display: flex;
    border: solid 4px transparent;
    transition: 0.4s;
    padding: 10px;
    margin: 10px 10px 10px auto;
}

.score {
    font-family: Poppins;
    display: flex;
    flex-direction: row;
    margin: 0px 0px 0px 5px;
    height: auto;
    align-items: center;
    font-size: 26px;
}

h2 {
    display: flex;
    align-items: center;
    margin: 10px 0 10px 35px;
    font-family: Poppins;
    font-weight: 600;
    font-size: 30px;
    scale: 1;
    transition: 0.3s;
    color: rgb(30, 30, 30);
}

h2:hover {
    scale: 1.08;
}

#mainReview {
    font-size: 35px;
}

.expandReview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "img txt";
    margin: 0 20px 0 20px;
}

.reviewImg {
    display: block;
    grid-area: img;
    justify-content: center;
    margin: 10px auto 20px auto;
    border-radius: 10px;
    width: 100%;
    transition: 0.4s;
    cursor: pointer;
    border: solid 3px black;
    scale: 1;
}

.reviewImg:hover {
    scale: 1.04;
}

#twoReviewImg {
    width: 103%;
    border: none;
}

.reviewText {
    display: block;
    grid-area: txt;
    font-size: 20px;
    text-align: justify;
}

#shortReviewText {
    font-size: 26px;
    font-style: italic;
    text-align: center;
    margin: 30px;
}

.expandReviewsButtonContainer {
    text-align: center;
}

.expandReviewsButton {
    background-color: transparent;
    border: solid 3px black;
    border-radius: 30px;
    padding: 0 10px 0 10px;
    line-height: 0.5;
    letter-spacing: 0px;
    transition: 0.4s;
    cursor: pointer;
}

.expandReviewsButton:hover {
    border-radius: 30px;
    padding: 0px 25px 0px 25px;
    letter-spacing: 1px;
}


/* ------------------- HEADING PRODUCTS -------------------- */

.headingProductsBox {
    background-color: rgba(0, 0, 0, 0.111);
    border: solid 4px rgb(37, 37, 37);
    border-radius: 50px 50px 7px 7px;
    display: block;
    width: auto;
    margin: 50px 10% 0 10%;
    transition: 0.3s;
}

.headingProductsBox:hover {
    border: solid 4px black;
    background-color: rgba(55, 169, 59, 0.2);
}

#middleBox {
    margin: 10px 10% 10px 10%;
    border-radius: 7px 7px 7px 7px;
}

#bottomBox {
    margin: 10px 10% 60px 10%;
    border-radius: 7px 7px 50px 50px;
    height: fit-content;
    padding: 0 0 30px 0;
    cursor: pointer;
}

.headingProductsTxt {
    text-align: center;
    padding: 30px 0 0 0px;
    font-size: 40px;
    border-bottom: solid 4px transparent;
    width: fit-content;
    margin: auto;
    font-family: Poppins;
    font-weight: 600;
    scale: 1;
    cursor: default;
    transition: 0.3s;
}

.headingProductsTxt:hover {
    border-bottom: solid 4px black;
    scale: 1.08;
}

#viewStoreTxt {
    text-align: center;
    padding: 30px 0 10px 0px;
    font-size: 50px;
    border-bottom: solid 4px transparent;
    width: fit-content;
    margin: auto;
    font-family: Poppins;
    font-weight: 900;
    scale: 1;
    cursor: pointer;
    transition: 0.45s;
}

#viewStoreTxt:hover {
    border-bottom: solid 4px black;
    scale: 1.1;
    letter-spacing: 3px;
}

.headingProductsLayout {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.productPreview {
    width: 28%;
    background-color: black;
    border: solid 8px black;
    border-radius: 15px;
    margin: 20px;
    scale: 1;
    transition: 0.4s;
}

.productPreview:hover {
    scale: 1.15;
    border-radius: 22px;
}

#smallerProduct {
    width: 17.5%;
    border: solid 4px black;
    border-radius: 10px;
    margin: 11px;
}

#smallerProduct:hover {
    scale: 1.15;
    border-radius: 18px;
}

#mediumProduct {
    width: 22%;
    border: solid 4px black;
    border-radius: 14px;
    margin: 14px;
}

#mediumProduct:hover {
    border-radius: 20px;
}

#topFlashSale {
    background-color: rgba(255, 255, 33, 0.911);
}

.headingProductsTxtSale {
    text-align: center;
    padding: 30px 0 0 0px;
    font-size: 35px;
    width: fit-content;
    margin: auto;
    font-family: Poppins;
    font-weight: 900;
    scale: 1;
    cursor: default;
    letter-spacing: -2px;
    transition: 0.35s;
}

#timer {
    display: flex;
    font-family: Poppins;
    margin-bottom: 30px;
    font-size: 60px;
}

.red {
    color: red;
}

.yellow {
    color: blue;
}

.big {
    scale: 1.13;
}

.small {
    scale: 0.95;
}

.headingProductsBoxSale {
    background-color: rgba(252, 255, 82, 0.779);
    border: solid 4px rgb(37, 37, 37);
    border-radius: 50px 50px 7px 7px;
    display: block;
    width: auto;
    margin: 50px 10% 0 10%;
    transition: 0.3s;
}

.headingProductsBoxSale:hover {
    border: solid 4px black;
    background-color: rgba(255, 255, 33, 0.911);
}

#SaleProductsLayout {
    margin-bottom: -28px;
}

.footer {
    background-color: rgba(0, 0, 0, 0.25);
    margin: 15px 0.85% 15px 0.85%;
    border-radius: 4px 4px 30px 30px;
    padding: 2%;
}

.textFooter {
    font-size: 14px;
    font-family: Noto Sans;
    font-weight: lighter;
    text-align: center;
    margin-top: 30px;
    color: rgb(37, 37, 37);
}

.socialBox1 {
    justify-content: center;
    display: flex;
    width: 15%;
    height: 80px;
    align-items: center;
    background-color: rgba(21, 139, 0, 0.285);
    border: solid 3px rgb(37, 37, 37);
    border-radius: 20px 5px 5px 20px;
    /* margin: 0 30px 0 30px; */
    padding: 5px 10px 5px 10px;
    transition: 0.3s;
}

.socialBox1:hover {
    border: solid 3px black;
    background-color: rgba(21, 139, 0, 0.485);
}

.socialBox2:hover {
    border: solid 3px black;
    background-color: rgba(21, 139, 0, 0.485);
}

.socialBox3:hover {
    border: solid 3px black;
    background-color: rgba(21, 139, 0, 0.485);
}

.socialBox2 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 36%;
    height: 80px;
    background-color: rgba(21, 139, 0, 0.285);
    border: solid 3px rgb(37, 37, 37);
    border-radius: 5px 5px 5px 5px;
    margin: 0 0px 0 10px;
    padding: 5px 10px 5px 10px;
    transition: 0.4s;
}

.footerLogo {
    display: flex;
    width: 70%;
    scale: 1.1;
    transition: 0.4s;
    margin: 0 auto;
}

.footerLogo:hover {
    scale: 1.12;
}

.socialBox3 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 15%;
    height: 80px;
    background-color: rgba(21, 139, 0, 0.285);
    border: solid 3px rgb(37, 37, 37);
    border-radius: 5px 20px 20px 5px;
    margin: 0 0px 0 10px;
    padding: 5px 10px 5px 10px;
    transition: 0.4s;
}

.footerLinks {
    font-size: 10px;
    line-height: 0.2;
    color: darkblue;
    text-decoration: underline darkblue;
}

.socialIcon {
    width: 50px;
    height: 50px;
    margin: 10px;
    scale: 1;
    transition: 0.3s;
    cursor: pointer;
}

.socialIcon:hover {
    scale: 1.2;
}

.footerContainer {
    display: flex;
    justify-content: center;
}

.versionName {
    font-size: 8px;
    text-align: center;
    text-decoration: underline black;
    color: black;
}

.creditsTitle {
    font-family: Poppins;
    font-weight: 600;
    font-size: 30px;
    text-decoration: underline;
    margin: 0 0 -5px 6%;
}

.creditsLink {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 18px;
    flex-wrap: wrap;

    z-index: 2;
}

.allCreditsContainer {
    display: flex;
    justify-content: space-around;
    align-content: space-between;
    background-color: rgba(120, 239, 120, 0.45);
    opacity: 0.9;
    border: solid 3px rgb(37, 37, 37);
    border-radius: 20px;
    margin: 2% 4% 0 4%;
    padding: 0 20px 0 0;
    flex-wrap: wrap;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    transition: 0.4s;
}

.allCreditsContainer:hover {
    box-shadow: 5px 5px 10px rgb(37, 37, 37);
    background-color: rgba(120, 239, 120, 0.65);
    opacity: 1;
}

.creditsContainer {
    display: flex;
    margin: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    width: fit-content;
}

#headingCredit {
    font-size: 24px;
    font-weight: 700;
    line-height: 2;
}

/* ------------------- NEGOZIO.HTML -------------------- */

Title {
    margin-left: 0px;
    cursor: text;
}

.filterAndSortContainer {
    display: grid;
    grid-template-areas:
        "filterName sorterName"
        "filterSelector sorterSelector";
    /* background-color: rgba(0, 0, 0, 0.1);
    border: solid 3px rgb(37, 37, 37); */
    border-radius: 20px;
    padding: 10px 30px 30px 10px;
    margin-left: 20px;
}

#filterName {
    grid-area: filterName;
}

#sorterName {
    grid-area: sorterName;
}

#filterSelector {
    grid-area: filterSelector;
    margin: 0 auto 0 0;
}

#sorterSelector {
    grid-area: sorterSelector;
}

.filterSorter {
    display: flex;
    background-color: rgba(0, 0, 0, 0.211);
    border-radius: 40px;
    align-items: center;
    padding: 0 3px 0 3px;
    width: fit-content;
    box-shadow: 0px 1px 5px rgb(37, 37, 37);
    /* border: solid 2px rgb(37, 37, 37); */
}

.filterSorterText {
    font-size: 24px;
    display: flex;
    font-weight: 500;
    scale: 1;
    margin: 0 4px 0 10px;
    padding: 3px 4px 3px 4px;
    letter-spacing: -1px;
}

.filterSorterText:hover {
    scale: 1;
}

.filterSelector {
    margin: 5px 2px 5px 2px;
    padding: 5px 8px 5px 9px;
    background-color: rgba(0, 0, 0, 0.221);
    border-radius: 22px;
    font-size: 18px;
    font-family: Poppins;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: -0.5px;
    transition: 0.3s;
}

.filterSelected {
    background-color: rgba(35, 122, 20, 0.685);
    box-shadow: 0px 1px 3px;
    scale: 1.05;
    margin: 7px 6px 7px 6px;
    transition: 0.3s;
}

.invisible {
    display: none;
    opacity: 0.1;
    scale: 0.7;
}

.productsContainer {
    display: flex;
    background-color: transparent;
    justify-content: space-evenly;
    border-radius: 20px;
    flex-wrap: wrap;
    padding: 10px;
}

.product {
    display: flex;
    flex-direction: column;
    border: solid 4px rgb(30, 30, 30);
    background-color: white;
    margin: 12px 10px;
    border-radius: 15px;
    overflow: hidden;
    width: 17%;
    height: fit-content;
    justify-content: center;
    transition: 0.3s;
}

.product:hover {
    scale: 1.08;
    border-radius: 20px;
    box-shadow: 1px 2px 10px;
}

.storeImgContainer {
    margin: 0 auto 0 auto;
    display: flex;
    background-color: white;
}

.storeProduct {
    width: 90%;
    margin: 4px auto 5px auto;
    border-radius: 10px;
}

.storeProductName {
    font-family: Noto Sans;
    text-shadow: 0px 1px 4px black;
    font-size: 22px;
    font-weight: 500;
    overflow: hidden;
    text-align: center;
    color: whitesmoke;
    margin: 2px 0 4px 0;
}

.offerPercentage {
    color: white;
    /* text-decoration: underline; */
    font-weight: 700;
    text-shadow: 0px 2px 6px black;
    font-size: 24px;
    letter-spacing: 1px;
}

.storeProductPrice {
    font-family: Noto Sans;
    font-size: 19px;
    overflow: hidden;
    text-align: center;
    color: whitesmoke;
    margin: 0 auto;
    padding: 2px 3px;
    border-radius: 8px;
    width: fit-content;
    font-weight: 300;
    background-color: rgba(35, 83, 29, 0.8);
    border: solid 3px transparent;
    display: flex;
}

.notValid {
    display: flex;
    text-decoration: line-through;
    opacity: 0.8;
    font-weight: 200;
}

.noBackground {
    background-color: transparent;
}

.priceOffer {
    border-radius: 20px;
    padding: 2px 5px;
    background-color: rgb(212, 51, 23);
    border: solid 3px orange;
    font-weight: 600;
    font-size: 20px;
}

.bottomSectionProduct {
    border-radius: 15px 15px 0 0;
    background-color: rgba(35, 83, 29, 0.8);
}

.storePriceContainer {
    display: block;
    justify-content: center;
    /* background-color: white; */
    border-radius: 40px 40px 0 0;
}

.storeBuyProductContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    margin: 6px 5px 6px 5px;
    padding: 5px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
}

.storeOffer {
    border-radius: 15px 15px 0 0;
    background-color: rgb(213, 95, 10);
}

.storeOfferPriceContainer {
    background-color: rgba(255, 255, 255, 0.4);
}

.quantity {
    width: 60px;
    font-size: 20px;
    border-radius: 6px;
    align-content: center;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    margin: 0 10px 0 0px;
    color: rgb(15, 15, 15);
}

.quantity:focus {
    outline: none;
    color: rgb(15, 15, 15);
}

.quantity::placeholder {
    color: rgb(15, 15, 15);
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 700,
        'GRAD' 200,
        'opsz' 48
}

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 200,
        'opsz' 48
}

.hide-icon {
    display: none;
}

.expand {
    scale: 2;
    margin: 5px;
}

#deleteCart {
    scale: 1.3;
}

.cartHeader {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px 5px 0px;
    width: 99%;
    align-items: center;
}

.cartDetailsMargin {
    margin-bottom: 0;
}

.white {
    color: rgb(37, 37, 37);
    background-color: rgba(255, 255, 255, 0.626);
    padding: 3px;
    border-radius: 8px;
    transition: 0.3s;
    cursor: pointer;
}

.white:hover {
    scale: 1.15;
}

.hg {
    font-family: Noto Sans;
    font-weight: 500;
    color: rgb(15, 15, 15);
    font-size: 18px;
    margin: auto auto 4px auto;
    overflow: hidden;
}

#shoppingCart {
    display: none;
    flex-direction: column;
    position: fixed;
    width: 40%;
    height: fit-content;
    max-height: 30%;
    overflow: auto;
    background-color: rgba(50, 50, 50, 0.2);
    backdrop-filter: blur(10px);
    border: solid 2px rgb(40, 40, 40);
    box-shadow: 0px 0px 10px;
    z-index: 2;
    left: 2%;
    bottom: 3%;
    border-radius: 10px;
    flex-wrap: nowrap;
    padding: 5px 10px 15px 10px;
}

/* Personalizzazione barra di scorrimento verticale */
::-webkit-scrollbar {
    width: 12px;
    /* Larghezza della barra */
}

::-webkit-scrollbar-track {
    background-color: rgb(180, 246, 180);
    /* Colore sfondo barra di scorrimento */
    border-radius: 20px;
    opacity: 0.8;
}

::-webkit-scrollbar-thumb {
    margin: 5px;
    background-color: rgba(95, 161, 95, 0.697);
    /* Colore maniglia barra di scorrimento */
    border-radius: 6px;
    /* Angoli arrotondati */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(76, 161, 76, 0.786);
    /* Colore maniglia barra di scorrimento al passaggio del mouse */
}


#cart {
    display: block;
    padding: 0px 0px 0px 15px;
    margin: 0px 7px 7px 7px;
    font-size: 30px;
    font-family: Noto Sans;
    font-weight: 500;
}

.cartItem {
    margin: 10px 10px 10px;
    display: block;
    width: fit-content;
    height: fit-content;
    flex-direction: column;
    background-color: rgba(240, 240, 240, 0.25);
    box-shadow: 0px 0px 5px black;
    border: solid 1px black;
    border-radius: 15px;
    text-align: center;
    padding: 3px;
    flex-wrap: wrap;
    animation: fadeUp 0.4s forwards;
    transition: 0.3s;
}

.cartItem:hover {
    opacity: 0.2;
    scale: 0.92;
    background-color: rgba(255, 0, 0, 0.395);
    cursor: pointer;
}

.cartProductName {
    font-family: Noto Sans;
    text-align: center;
    font-size: 26px;
    margin: 5px 0 0 0;
    padding: 0 5px;
}

.cartProductQuantityAndPrice {
    display: inline-block;
    flex-direction: row;
    width: fit-content;
    min-width: 110px;
    justify-content: space-around;
    margin: 4px 4px;
    font-family: Noto Sans;
    font-size: 18px;
    font-weight: 400;
}

#itemCartList {
    display: flex;
    flex-direction: row;
    justify-content: start;
    background-color: transparent;
    border-radius: 20px;
    margin: 0 10px 0 10px;
    /* padding: 10px; */
    width: fit-content;
    height: fit-content;
    /* max-height: 10%; */
    flex-wrap: wrap-reverse;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ececec;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    opacity: 0;
    transition: 0.3s;
    font-family: Noto Sans;
    font-size: 14px;
    position: absolute;
    z-index: 1;
    bottom: -10%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.productLink {
    text-decoration: none;
}

.productGrid {
    display: grid;
    grid-template-columns: 30% 50% 20%;
    grid-template-areas:
        "gridAreaImage itemInfo buyItem"
        "LIgrid LIgrid nutriFacts";
}

.gridAreaImage {
    grid-area: gridAreaImage;
    /* display: flex; */
}

.itemInfo {
    grid-area: itemInfo;
    padding-left: 10px;
}

.LIgrid {
    grid-area: LIgrid;
    width: 100%;
    margin-top: 50px;
    display: flex;
}

.productPageImg {
    width: fit-content;
    overflow: hidden;
    min-width: max-content;
    border-radius: 20px;
    border: solid 3px rgb(40, 40, 40);
    box-shadow: 0px 0px 5px black;
    transition: 0.4s;
    /* display: flex; */
}

.productPageImg:hover {
    scale: 1.05;
    box-shadow: 0px 0px 8px black;
}

.productPath {
    margin: 10px 10px 18px 0px;
    font-family: Noto Sans;
    font-weight: 400;
    padding: 3px;
    border-radius: 5px;
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.2);
}

.productPageName {
    border: none;
    text-align: left;
    justify-content: flex-start;
    margin-left: 10px;
    margin-bottom: 0px;
    height: fit-content;
    font-size: 45px;
    animation: none;
}

.productPageName:hover {
    margin-left: 10px;
}

.productPagePrice {
    text-align: left;
    justify-content: flex-start;
    scale: 1;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 26px;
    margin: -5px 0 20px 25px;
    animation: none;
}

.productPagePrice:hover {
    scale: 1;
}

.verticalLine {
    margin: 0 0 0 30px;
    border-left: solid 1px rgb(40, 40, 40);
}

.horizontalLine {
    margin: 0 15px;
    border-bottom: solid 2px rgb(40, 40, 40);
}

.productPageDesc {
    font-family: Noto Sans;
    font-weight: 100;
    font-size: 18px;
    max-width: 80%;
    display: flex;
    text-align: justify;
    margin: 14px 10px 0 25px;
    animation: none;
    opacity: 1;
    color: rgb(20, 20, 20);
}

.productPageBuyContainer {
    background-color: rgba(120, 239, 120, 0.45);
    width: fit-content;
    height: fit-content;
    padding: 10px 0;
    border-radius: 20px;
    border: solid 3px rgb(40, 40, 40);
    grid-area: buyItem;
}

.productPagePriceBox {
    /* margin-top: 15px; */
    text-align: center;
    animation: none;
    opacity: 1;
}

.productPageBoxDetails {
    font-size: 14px;
    animation: none;
    opacity: 1;
}

.buyNowButton {
    border-radius: 10px;
    padding: 5px;
    font-family: Noto Sans;
    font-size: 24px;
    font-weight: 500;
    width: 90%;
    background: linear-gradient(to bottom, #86e57cc8, #55a346a4);
    box-shadow: 0 0 1px black;
    border: solid 2px rgb(40, 40, 40);
    justify-content: center;
    align-items: center;
    margin: 5px auto;
    cursor: pointer;
    display: flex;
    transition: 0.4s;
}

.material-symbols-outlined.products {
    margin-right: 5px;
}

.buyNowButton:hover {
    scale: 1.05;
    box-shadow: 0 0 4px black;
    background-color: green;
}

.productPageQuantityBox {
    display: flex;
    align-items: center;
    animation: none;
    opacity: 1;
}

.productPageBoxQuantity {
    animation: none;
    opacity: 1;
}

.productPageQuantity {
    height: fit-content;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
    border: none;
    font-size: 20px;
}

.quantity:focus {
    outline: none;
    border: none;
    color: rgb(15, 15, 15);
}

.productPageQuantity::placeholder {
    color: black;
    font-size: 20px;
}

ul.productPageULdetails {
    list-style: none;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 5px rgb(40, 40, 40);
    /* border: solid 3px rgb(40,40,40); */
    border-radius: 20px;
    margin-top: 0;
    margin-right: 30px;
    padding: 25px;
    padding-right: 0;
    height: fit-content;
    margin-bottom: 0;
    animation: fadeUp 0.4s forwards;
    animation-delay: 0.5s;
}

.material-symbols-outlined.UL {
    margin-right: 8px;
    scale: 1.2;
    color: rgb(20, 20, 20);
}

.prodPageLI {
    font-size: 20px;
    font-family: Noto Sans;
    font-weight: 300;
    align-items: center;
    display: flex;
    transition: 0.4s;
}

.prodPageLI:hover {
    padding-left: 5px;
}

.prodPageLIdesc {
    font-size: 18px;
    font-family: Noto Sans;
    color: rgb(30, 30, 30);
    font-weight: 200;
    margin-left: 5px;
    animation: none;
    text-align: justify;
    opacity: 1;
}

.nutriFacts {
    /* background-color: rgba(255, 255, 255, 0.1); */
    background-color: rgba(120, 239, 120, 0.45);
    height: fit-content;
    border-radius: 15px 15px 10px 10px;
    border: solid 3px rgb(40, 40, 40);
    /* box-shadow: 0 0 3px black; */
    padding: 2px;
    border-spacing: 0;
    grid-area: nutriFacts;
    animation: fadeUp 0.4s forwards;
    animation-delay: 0.5s;
}

.nutriFacts td {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 18px;
    width: auto;
    padding: 4px;
    border-radius: 10px 0px 0px 10px;
}

.nutriFacts tr {
    transition: 0.2s;
}

.nutriFacts tr:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

td.right {
    text-align: right;
    border-radius: 0px 10px 10px 0px;
    color: rgb(20, 20, 20);
}

.nutriFacts th {
    font-family: Poppins;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.5px;
    border: 2px solid rgb(40, 40, 40);
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    color: rgb(20, 20, 20);
    cursor: pointer;
    transition: 0.4s;
}

.nutriFacts th:hover {
    background-color: rgba(0, 0, 0, 0.45);
    color: rgb(240, 240, 240);
}

.nutriFactsSource {
    font-size: 12px;
    text-align: center;
    color: rgb(40, 40, 40);
    animation: none;
    opacity: 1;
    animation: fadeUp 0.4s forwards;
    animation-delay: 0.5s;
    margin: 10px 0 20px 0;
}

#nutriTableCredits {
    display: none;
    text-align: center;
    text-decoration: underline;
    font-style: italic;
    font-size: 12px;
}

.productPageReviews {
    background-color: rgba(120, 239, 120, 0.45);
    border: solid 3px rgb(40, 40, 40);
    border-radius: 15px;
    height: 100%;
    /* justify-content: space-around; */
    display: flex;
    padding: 2px 2.5px;
    flex-direction: column;
    animation: fadeUp 0.4s forwards;
    animation-delay: 0.5s;
}

.productPageReviewStarContainer {
    display: flex;
    /* background-color: aqua; */
    margin: 5px auto 0 auto;
    width: fit-content;
    align-items: center;
    transition: 0.3s;
    cursor: default;
}

.productPageReviewStarContainer:hover {
    scale: 1.1;
}

.recensioniProdotto {
    text-align: center;
    font-weight: 600;
    font-family: Poppins;
    font-size: 21px;
    color: rgb(30, 30, 30);
    border: solid 2px rgb(40, 40, 40);
    border-radius: 11px 11px 8.5px 8.5px;
    padding: 8px 0;
    margin: 0;
    transition: 0.4s;
}

.recensioniProdotto:hover {
    background-color: rgba(0, 0, 0, 0.45);
    color: rgb(240, 240, 240);
}

.prdctStar {
    color: rgb(30, 30, 30);
}

.reviewWord {
    color: rgb(30, 30, 30);
}

.prdctReviewLonger {
    font-size: 14px;
    color: rgb(40, 40, 40);
    padding: 0px;
    align-items: center;
    text-align: left;
}

/* CSS MOBILE RULES */
@media screen and (max-width: 768px) {
    html {
        justify-content: center;
        width: 100%;
        overflow-x: hidden;
    }

    .header {
        margin-top: 5px;
        margin-bottom: 5px;
        animation: fadeUp 0.5s forwards;
        animation-delay: 0s;
    }

    .longTitle {
        width: 30vh;
    }

    .smallLogo {
        width: 25vh;
        margin: 12px auto;
    }

    .titleImgContainer {
        column-span: all;
        grid-area: titleImgContainer;
        display: flex;
        justify-content: center;
        margin: 15px;
    }

    .navbar {
        display: none;
    }

    .navbarMobile {
        background-color: rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: row;
        border-radius: 20px 20px 4px 4px;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 3px;
        animation: zoomOut 0.4s forwards;
        animation-delay: 0s;
    }

    .mobileLink {
        width: 33.333333%;
        padding: 0;
        margin: 3px 0px;
        border-radius: 10px;
    }

    .navbarLink {
        border-radius: 10px;
        animation: softZoomOut 0.5s forwards;
        animation-delay: 0.1s;
        font-size: 20px;
        text-align: center;
        padding: 0;
    }

    #topLeft {
        border-radius: 16px 10px 10px 10px;
    }

    #topRight {
        border-radius: 10px 16px 10px 10px;
    }

    #bottomLeft {
        border-radius: 10px 10px 10px 5px;
    }

    #bottomRight {
        border-radius: 10px 10px 5px 10px;
    }

    h1 {
        font-size: 30px;
        margin-left: 15px;
        animation: fadeUp 0.5s forwards;
        animation-delay: 0.3s;
    }

    h1:hover {
        margin-left: 15px;
    }

    p {
        font-size: 20px;
        text-align: justify;
        overflow-wrap: break-word;
    }

    .hideMobileVersion {
        display: none !important;
    }

    .hideDesktopVersion {
        display: block;
    }

    .content {
        margin: 5px 0.85% 15px 0.85%;
        padding: 2% 0;
        animation: fadeUp 0.4s forwards;
        animation-delay: 0.3s;
    }

    .shippingSection {
        display: block;
        margin: 8% 3% 4% 3%;
        flex-wrap: wrap;
    }

    .itMapAlign {
        display: none;
    }

    .expandImg {
        margin-top: 0;
        margin-left: 8%;
        margin-bottom: 20px;
        font-size: 16px;
        border: solid 3px black;
        border-radius: 8px;
        width: fit-content;
        padding: 4px 8px 4px 8px;
        transition: 0.4s;
        opacity: 0.8;
    }

    .shippingParagraph {
        margin: -10px 1% 0px 1%;
        text-align: justify;
        word-wrap: break-word;
        font-size: 18px;
    }

    #DesktopMapButton {
        display: none;
    }

    #altMobileMapButton {
        display: block;
    }

    h2 {
        margin: 10px 5% 5% 10px;
        text-align: center;
        font-size: 20px;
    }

    h2:hover {
        scale: 1;
    }

    .reviewBox {
        margin: 40px 6% 35px 6%;
        box-shadow: 2.5px 0px 5px rgba(0, 0, 0, 0.626);
    }

    #mainReview {
        margin: 10px auto;
        font-size: 20px;
        text-align: center;
    }

    .starsContainer {
        margin: -15px auto 0px auto;
        padding: 0;
    }

    .mobileStar {
        width: 40px;
        height: 40px;
    }

    #shortReviewText {
        font-size: 22px;
        margin: 5px 15px 15px 15px;
        text-align: center;
    }

    .expandReview {
        display: block;
        margin: 0 20px 0 20px;
    }

    .reviewImg {
        display: block;
        grid-area: img;
        justify-content: center;
        margin: 10px auto 20px auto;
        border-radius: 10px;
        width: 100%;
        transition: 0.4s;
        cursor: pointer;
        border: solid 3px black;
        scale: 1;
    }

    .reviewImg:hover {
        scale: 1.04;
    }

    .reviewText {
        margin: 10px 0 0 0;
        display: block;
        font-size: 18px;
        text-align: justify;
    }

    .headingProductsBox {
        background-color: rgba(0, 0, 0, 0.111);
        border: solid 3px rgb(37, 37, 37);
        border-radius: 35px 35px 5px 5px;
        display: block;
        width: auto;
        margin: 30px 4% 0 4%;
        transition: 0.3s;
    }

    .headingProductsBox:hover {
        border: solid 3px black;
    }

    .headingProductsTxt {
        text-align: center;
        padding: 10px 0px 0px 0px;
        line-height: 1.2;
        font-size: 25px;
        border-bottom: none;
        margin: 5px auto 0 auto;
        font-family: Poppins;
        font-weight: 600;
        scale: 1;
        transition: 0.3s;
    }

    .headingProductsTxt:hover {
        border-bottom: none;
        scale: 1;
    }

    .headingProductsLayout {
        padding: 5px;
        display: flex;
        justify-content: center;
    }

    .productPreview {
        width: 28%;
        background-color: black;
        border: solid 4px black;
        border-radius: 10px;
        margin: 5px;
        scale: 1;
        transition: 0.4s;
    }

    .productPreview:hover {
        scale: 1.10;
        border-radius: 10px;
    }

    #middleBox {
        margin: 5px 4% 0 4%;
        border-radius: 5px 5px 5px 5px;
    }

    #bottomBox {
        margin: 5px 4% 0 4%;
        border-radius: 5px 5px 25px 25px;
        padding-bottom: 10px;
    }

    #smallerProduct {
        width: 20.5%;
        border: solid 3px black;
        border-radius: 7px;
        margin: 5px;
    }

    #smallerProduct:hover {
        scale: 1.10;
        border-radius: 7px;
    }

    #mediumProduct {
        width: 20.5%;
        border: solid 3px black;
        border-radius: 7px;
        margin: 5px;
    }

    #mediumProduct:hover {
        border-radius: 7px;
    }

    #viewStoreTxt {
        text-align: center;
        padding: 10px 2px 0px 2px;
        font-size: 20px;
        border-bottom: none;
        margin: auto;
        scale: 1;
        cursor: pointer;
        transition: 0.45s;
    }

    #viewStoreTxt:hover {
        border-bottom: none;
        scale: 1;
        letter-spacing: 1px;
    }

    .headingProductsBoxSale {
        padding: 10px;
    }

    .headingProductsBoxSale#bottomBox {
        padding-bottom: 30px;
    }

    .headingProductsTxtSale {
        padding: 10px 0;
    }

    #timer {
        font-family: Noto Sans, monospace;
        font-size: 24px;
        letter-spacing: normal;
        margin: auto;
    }

    .small {
        scale: 0.9;
    }

    .big {
        scale: 1;
    }

    #mediumProductFlashSale {
        width: 27%;
        margin: 6px;
    }

    .textFooter {
        font-size: 11px;
        margin-top: 0px;
    }

    .socialMobile {
        background-color: rgba(0, 0, 0, 0.271);
        border-radius: 10px;
        width: fit-content;
        display: flex;
        justify-content: center;
        margin: 2px auto 20px auto;
    }

    .socialIcon {
        display: block;
        flex-direction: column;
        padding: 3px;
        width: 30px;
        height: 30px;
    }

    .footer {
        margin: -10px 0.85% 15px 0.85%;
    }

    .footerLogo {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .cookiesNoticeBoxStyle {
        top: 20%;
        bottom: 20%;
        height: 60%;
        left: 5%;
        right: 5%;
        width: 90%;
    }

    .cookiesText {
        font-size: 30px;
    }

    .cookiesTextParagraph {
        font-size: 18px;
    }

    .cookiesButtonsContainer {
        justify-content: center;
    }

    .allCookies {
        width: 40%;
        height: fit-content;
        font-size: 20px;
    }

    .onlyEssentialCookies {
        width: 40%;
        height: fit-content;
        font-size: 14px;
    }

    #logout {
        height: 45%;
    }

    /* DISCLAIMER PAGE */

    .disclaimerTitle {
        font-size: 24px;
        margin-left: 15px;
        animation: fadeUp 0.5s forwards;
        animation-delay: 0.3s;
        margin-left: 15px;
        text-align: left;
    }

    .disclaimerParagraph {
        font-size: 18px;
    }

    #disclaimerPage {
        padding: 3% 0 2% 0;
    }

    .creditsContainer {
        flex-direction: row;
    }

    /* NEGOZIO.HTML */

    .fullCatalogTitle {
        margin-left: 10px;
        font-size: 30px;
        cursor: text;
    }

    .fullCatalogDetails {
        margin-bottom: 0;
    }

    .fullCatalogTitle:hover {
        margin-left: 10px;
    }

    .filterAndSortContainer {
        padding: 0 0 -20px 10px;
        margin: -20px 0 -50px 0;
        width: 95%;
        grid-template-areas:
            "filterName"
            "filterSelector"
            "sorterName"
            "sorterSelector";
    }

    .filterSorter {
        width: fit-content;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 20px;
        /* margin: 0 2% 0 2%; */
        overflow: hidden;
        align-items: flex-start;
        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    .filterSelector {
        text-align: left;
        font-size: 18px;
        width: fit-content;
        border-radius: 15px;
        align-content: left;
        text-align: center;
        transition: 0.3s;
    }

    .filterSelected {
        margin: 5px 2px;
        scale: 1;
        transition: 0.3s;
    }

    .sorterMobileMargin {
        margin-top: -25px;
    }

    .productsContainer {
        padding: 0px;
        justify-content: center;
    }

    .product {
        width: 43%;
        margin: 4px 4px;
        border: 3px solid black;
    }

    .product:hover {
        scale: 1;
        border-radius: 15px;
        box-shadow: 1px 2px 10px;
    }

    .offerPercentage {
        display: none;
    }

    .priceOffer {
        padding: 1px 12px;
        font-size: 18px;
    }

    .quantity {
        width: 80px;
    }

    #shoppingCart {
        width: 85%;
    }

    #cart {
        font-size: 24px;
    }

    .productPath {
        margin: 0 0 0 2%;
    }

    .productGrid {
        margin: 10px 10px;
        grid-template-columns: 100%;
        grid-template-areas:
            "gridAreaImage"
            "itemInfo"
            "buyItem"
            "LIgrid"
            "nutriFacts";
    }

    .productPageImg {
        min-width: 88vw;
        max-width: 88vw;
        margin: 5px auto;
    }

    .itemInfo {
        padding: 0;
        margin: 15px 0 0 0;
    }

    .productPageName {
        padding: 0;
        margin-left: 10px;
    }

    .productPagePrice {
        padding: 0;
        margin: -10px 0 5px 10px;
    }

    .productPageDesc {
        margin: 0 10px 0 10px;
        max-width: 100%;
    }

    .productPageBuyContainer {
        background-color: transparent;
        border-radius: 0 0 20px 20px;
        border: none;
        width: 100%;
    }

    .LIgrid {
        margin-top: 0;
    }

    .productPagePriceBox,
    .productPageBoxDetails {
        display: none;
    }

    ul.productPageULdetails {
        margin: 0px 10px 0 10px;
        padding: 0px;
        background-color: transparent;
        box-shadow: none;
    }

    .prodPageLI {
        margin-top: 20px;
        margin-bottom: 6px;
    }

    .prodPageLI:hover {
        margin-left: -5px !important;
    }

    .prodPageLIdesc {
        margin: 2px 0 0 0;
    }
}