*:not(.header) {
    overflow-x: hidden;
}

* {
    color: black;
    text-decoration: none;
}

.products {
    width: 100vw;
    height: calc(94vh - 3px);
    margin-top: calc(6vh + 3px);
    overflow-y: auto; /* Added to enable vertical scrolling within products container */
}

.product_container {
    width: 80vw;
    margin: 10vh 0;
    padding: 0 10vw;
}

.product-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product_container:nth-child(odd) .product-content {
    flex-direction: row;
}

.product_container:nth-child(even) .product-content {
    flex-direction: row-reverse;
}

.product-display {
    background: radial-gradient(circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(0, 0, 0, 0.5) 30%,
    rgb(255, 255, 255, 1) 70%);

    clip-path: circle(50% at 50% 50%);
    width: 530px;
    height: 530px;
    display: flex; /* Added to enable centering */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover/active effect */
}

.product_container:nth-child(odd) .product-display {
    margin: 0 5vw 0 0;
}

.product_container:nth-child(even) .product-display {
    margin: 0 0 0 5vw;
}

.product {
    position: relative;
    width: 350px;
    height: 400px;
    margin: 0;
    background: rgb(255, 255, 255, 0.15);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center; /* Added: Centers children horizontally (e.g., canvas, text) regardless of width */
    padding: 0 0 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease; /* Smooth hover/active effect */
}

.product * {
    overflow: hidden;
}

.product-name {
    position: relative;
    bottom: -55px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
    color: #333;
    font-family: 'Orbitron', sans-serif;
}

.product-amount {
    position: relative;
    bottom: -55px;
    font-size: 0.5em;
    color: #666;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}

.product-price {
    position: relative;
    bottom: -55px;
    font-size: 1.3em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin: 5px 0;
    font-family: 'Orbitron', sans-serif;
}

.product-image {
    width: 250px;
    height: auto;
    padding: 140px 0 0 0;
    overflow: hidden;
}

.soldOut:hover,
.soldOut:active {
    background-color: rgba(255, 0, 0, 0.3);
}

.soldOutText {
    position: absolute;
    text-align: center;
    top: 65px;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    display: none;
    font-weight: bold;
}

.soldOut:hover .soldOutText,
.soldOut:active .soldOutText {
    display: block;
}

.product-text {
    height: auto;
    overflow: hidden;
    width: 35vw;
}

.product-headline {
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
}

.product-description {
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
}

.products::-webkit-scrollbar-thumb {
    background: linear-gradient(rgba(150, 150, 150, 0.9) 0%,
    rgba(10, 10, 10, 1) 30%,
    rgba(10, 10, 10, 1) 70%,
    rgb(150, 150, 150, 0.9) 100%);
}

.products::-webkit-scrollbar-button {
    height: 0;
}

.products::-webkit-scrollbar {
    width: 6px;
}

.products::-webkit-scrollbar-track {
    background: #ffffff;
}


@media (max-width: 850px) {
    .product_container {
        width: auto;
        padding: 0 5vw;
    }
    .product_container:nth-child(odd) .product-display {
        margin: 0 5vw 0 0;
    }

    .product_container:nth-child(even) .product-display {
        margin: 0 0 0 5vw;
    }

    .product-display{
        width: 400px;
        height: 400px;
    }
    .product{
        width: 300px;
        height: 350px;
        padding: 0;
    }
    .product-image{
        padding: 100px 0 0 0;
    }
    .product-name{
        bottom: -8px;
        font-size: 20px;
    }
    .product-amount{
        bottom: -6px;
        font-size: 12px;
    }
    .product-price{
        bottom: -4px;
        font-size: 21px;
    }


    .product-text{
        width: 37vw;
    }
    .product-headline{
        font-size: 20px;
    }
    .product-description{
        font-size: 15px;
    }

    .soldOut {
        background-color: rgba(255, 0, 0, 0.3);
    }
}


@media (max-width: 650px) {
    .product_container {
        width: auto;
        padding: 0 2vw;
    }
    .product_container:nth-child(odd) .product-display {
        margin: 0 2vw 0 0;
    }

    .product_container:nth-child(even) .product-display {
        margin: 0 0 0 2vw;
    }

    .product-display{
        width: 300px;
        height: 300px;
    }
    .product{
        width: 210px;
        height: 250px;
        padding: 0;
    }
    .product-image{
        padding: 50px 0 0 0;
    }
    .product-name{
        bottom: 10px;
        font-size: 15px;
    }
    .product-amount{
        bottom: 12px;
        font-size: 9px;
    }
    .product-price{
        bottom: 14px;
        font-size: 16px;
    }


    .product-text{
        width: 37vw;
    }
    .product-headline{
        font-size: 15px;
    }
    .product-description{
        font-size: 12px;
    }

    .soldOut {
        background-color: rgba(255, 0, 0, 0.3);
    }
}

@media (max-width: 500px) and (orientation: portrait) {
    .product_container {
        width: auto;
        padding: 0 2vw 0 4vw;
    }
    .product_container:nth-child(odd) .product-display {
    margin: 0 2vw 0 0;
    }

    .product_container:nth-child(even) .product-display {
        margin: 0 0 0 2vw;
    }

    .product-display{
        width: 250px;
        height: 250px;
    }
    .product{
        width: 180px;
        height: 210px;
        padding: 0;
    }
    .product-image{
        padding: 50px 0 0 0;
        width: 180px;
    }
    .product-name{
        bottom: 5px;
        font-size: 13px;
    }
    .product-amount{
        bottom: 5px;
        font-size: 7px;
    }
    .product-price{
        bottom: 10px;
        font-size: 13px;
    }


    .product-text{
        width: 37vw;
    }
    .product-headline{
        font-size: 13px;
    }
    .product-description{
        font-size: 10px;
    }

    .soldOut {
        background-color: rgba(255, 0, 0, 0.3);
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    .product-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .product-text {
        width: 50vw;
        text-align: left;
    }

    .soldOut {
        background-color: rgba(255, 0, 0, 0.3);
    }
}