* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Arial", sans-serif;
    background: #fafafa;
    color: #222;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}


/* Vertical rainbow side */

body::after {
    content: "";
    position: fixed;

    top: 0;
    right: 0;

    width: 40px;
    height: 100vh;

    background: linear-gradient(
        to right,
        #FF0000 0%,      #FF0000 14.285%,   /* Red */
        #FF7F00 14.285%, #FF7F00 28.57%,    /* Orange */
        #FFFF00 28.57%,  #FFFF00 42.855%,   /* Yellow */
        #00C853 42.855%, #00C853 57.14%,    /* Green */
        #0099FF 57.14%,  #0099FF 71.425%,   /* Blue */
        #4B0082 71.425%, #4B0082 85.71%,    /* Indigo */
        #9400D3 85.71%,  #9400D3 100%       /* Violet */
    );

    z-index: 50;
}


/* Header */
.logo {
/*    width: 70px;*/
    height: 350px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 15px;
}
.hero {
    margin-left: 18px;
    padding: 70px 20px;
    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.9),
            rgba(245,245,245,.8)
        );

    border-bottom: 1px solid #ddd;
}


.hero h1 {
    font-size: clamp(36px, 5vw, 55px);
    color: #222;
    margin-bottom: 15px;
    letter-spacing: -1px;
}


.hero h1 i {
    color: #222;
}


.hero p {
    color: #777;
    font-size: 18px;
}



/* Catalogue */

.catalogue-grid {

    margin-left: 18px;

    padding: 45px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px,1fr));

    gap: 35px;
}



/* Polaroid style cards */

.product-card {

    background: white;

    padding: 15px 15px 25px;

    border-radius: 5px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.product-card:hover {

    transform:
        translateY(-10px)
        rotate(1deg);

    box-shadow:
        0 18px 40px rgba(0,0,0,.2);

}



.product-card img {

    width: 100%;

    height: 270px;

    object-fit: cover;

    background: #eee;

}



.product-info {

    padding-top: 18px;

    text-align: center;

}



.product-info h3 {

    font-size: 22px;

    margin-bottom: 8px;

}



.product-info p {

    color: #888;

}



.product-price {

    display: block;

    margin-top: 12px;

    font-weight: bold;

    color: #111;

}



/* Modal */

.modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 100;

}


.modal.active {

    display:block;

}



.modal-background {

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(12px);

}



.modal-content {

    position:relative;

    width:min(600px,90%);

    margin:5vh auto;

    background:white;

    padding:30px;

    border-radius:8px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    text-align:center;

}



.modal-content img {

    width:100%;

    max-height:400px;

    object-fit:contain;

}



.modal-content h2 {

    margin:20px 0 10px;

    font-size:32px;

}



.modal-content p {

    color:#666;

    line-height:1.6;

}



#modalPrice {

    display:block;

    margin:20px;

    font-size:24px;

    font-weight:bold;

}



/* Buttons */

.close-btn {

    position:absolute;

    top:15px;

    right:20px;

    background:none;

    border:none;

    font-size:30px;

    cursor:pointer;

}



.buy-btn {

    background:#111;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:30px;

    cursor:pointer;

}



.buy-btn:hover {

    background:#444;

}



/* Mobile */

@media(max-width:600px){

    body::before {

        width:10px;

    }


    .hero,
    .catalogue-grid {

        margin-left:10px;

    }


    .catalogue-grid {

        padding:20px;

    }

}