<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* The "body" selector targets the entire webpage body. going to modify its default styles. */
body {
    /* 
      margin: 0; 
      Removes the default margin around the body element. 
      This is important for ensuring the body starts from the edge of the viewport.
    */
    margin: 0;

    /* 
      padding: 0; 
      Removes the default padding (space inside the body element).
      This ensures thereâ€™s no unwanted space inside the body.
    */
    padding: 0;

    /* 
      background-color: rgb(231, 233, 238); 
      Sets a light greyish color as the background of the webpage.
      The color is specified in RGB (Red, Green, Blue) values.
    */
    background-color: rgb(231, 233, 238);
}

/* Ensure the parent container is relative */
.item{
    
    position: relative;

    /* 250px â‰ˆ 6.61cm */
    width: 6.5cm; 

    /* 400px â‰ˆ 10.58cm */
    height: 8.78cm;

    /* 1px â‰ˆ 0.026cm */
    /* border: 0.026cm solid #ddd;  */

   /* Adjust this value to reduce the left padding */
    padding-left: 0; 

    /* 20px â‰ˆ 0.53cm */
    margin: 0px;
    border: 1px solid black;
    
    /* Allows multiple items to be side by side */
    display: inline-block; 
}

/* Image should be inside and take full width */
.item img{

    /* Make image fill the container */
    width: 100%; 
    height: auto;
    float: left;
    margin: 0.1cm;
    margin-left: 0cm;
    margin-right: 0cm;
}

/* Position the discount label at the top left */
.discount-label, .label {
    position: absolute;

    /* 5px â‰ˆ 0.13cm */
    top: 0.28cm;

    /* 5px â‰ˆ 0.13cm */
    left: 0.27cm;

    color: rgb(14, 1, 11);
    background-color: rgb(224, 224, 217);

    /* 14px â‰ˆ 0.37cm */
    font-size: 0.37cm;

    /* 5px â‰ˆ 0.13cm */
    padding: 0.13cm;

    /* 5px â‰ˆ 0.13cm */
    border-radius: 0.13cm;
}

/* Center the title */
.title {
    position: absolute;

    /* 10px â‰ˆ 0.26cm */
    top: 0.26cm;
    left: 50%;
/*
    left: 50%;

    /* Shift the element back by 50% of its own width to perfectly center it */
    transform: translateX(-50%);

    /* 16px â‰ˆ 0.42cm */
    font-size: 0.42cm;

    font-weight: bold;
    color: white;
    text-shadow: 0.1cm 0.1cm 0.2cm rgba(0, 0, 0, 0.5);
}

/* Position product type below the title */
.product_type {
    position: absolute;

    /* 50px â‰ˆ 1.32cm */
    top: 1.32cm;

    left: 50%;

    /* Shift the element back by 50% of its own width to perfectly center it */
    transform: translateX(-50%);

    /* 12px â‰ˆ 0.32cm */
    font-size: 0.32cm;

    font-weight: bold;
    color: white;
    background-color: rgb(164, 180, 250);

    /* 5px â‰ˆ 0.13cm */
    padding: 0.13cm;
}

/* Features below the product type */
.features {
    position: absolute;

    /* 80px â‰ˆ 2.12cm */
    top: 6.12cm;

    left: 55%;
    transform: translateX(-50%);

    /* 12px â‰ˆ 0.32cm */
    font-size: 0.5cm;

    font-weight: bold;
    color: white;
    background-color: rgb(164, 180, 250);

    /* 5px â‰ˆ 0.13cm */
    padding: 0.16cm;
    rotate: 90deg;
}

/* Price positions */
.offer_price {
    position: absolute;

    /* 40px â‰ˆ 1.06cm */
    top: 8.4cm;

    /* 10px â‰ˆ 0.26cm */
    left: 0.26cm;

    text-decoration: line-through;

    /* 14px â‰ˆ 0.37cm */
    font-size: 0.37cm;

    color: red;
}
.new_price {
    position: absolute;

    /* 40px â‰ˆ 1.06cm */
    top: 8.4cm;

    /* 70px â‰ˆ 1.85cm */
    left: 1.85cm;

    /* 14px â‰ˆ 0.37cm */
    font-size: 0.37cm;

    font-weight: bold;
    color: black;
}

/* Items left at the bottom right */
.items_left {
    position: absolute;

    /* 10px â‰ˆ 0.26cm */
    top: 8cm;

    /* 10px â‰ˆ 0.26cm */
    right: 0.26cm;

    /* 12px â‰ˆ 0.32cm */
    font-size: 0.32cm;

    color: black;
    background-color: rgb(231, 233, 238);

    /* 5px â‰ˆ 0.13cm */
    padding: 0.13cm;
}

</pre></body></html>