/* Adjust body settings */
body {
  
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;

}

/* Christmas sales announcement */
.christmas-container {

  display: flex;

  margin-top: 30px;
  height: 600px;

  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  justify-content: center;
  text-align: center;

}

.christmas-words {

  width: 500px;

}

.christmas-text {

  position: relative; /* Keep it relative */

  height: 100px;

  color: white;
  font-family: 'Digitalt', sans-serif;
  font-size: 70px;
  border-radius: 2px;
  
  transform: translateY(-50%);

}

/* Christmas music, play pause by clicking music note image */
div#lH {

  position: absolute;
  z-index: 1;

  /* Limit the widht and height of the audio player(Leave only the play button) */
  width: 60px; 
  height: 40px;
  margin: -110px 0 0 20px;
  padding: 23px 20px 23px 13px;
  overflow: hidden;

  text-align:center;
  align-items: center;
  background-color: #F9F6EE;
  border-radius: 50%;
  border: 2px dotted rgb(117, 117, 117);

  transition: transform 0.3s;

}

audio#aH {

  position: absolute;
  z-index: 2;

  /* Opacity of the audio player was set incredibly low, user can't even see the play button, however, as the music note image was placed exactly in front of the hidden play button, user will be trick to click it */
  opacity: 0.01;

}

/* Hover animation */
div#lH:hover {

  transform: scale(1.1);

}

/* Text with 3D effect, overlay of text shadow cause the effect */
.textproduct {

  text-align: center;
  font-size: 50px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: rgb(211,46,42);
  text-transform: uppercase;
  text-shadow: 1px 1px 0px white,
               1px 2px 0px rgba(165, 56, 61),
               1px 3px 0px rgba(165, 56, 61),
               1px 4px 0px rgba(165, 56, 61),
               1px 5px 0px rgba(165, 56, 61),
               1px 6px 0px white,
               1px 5px 5px rgba(16, 16, 16, 0.5),
               1px 5px 10px rgba(16, 16, 16, 0.4),
               1px 10px 15px rgba(16, 16, 16, 0.3),
               1px 15px 30px rgba(16, 16, 16, 0.2);

}

/* Product grid container */
.grid-container {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  
  gap: 20px;

  padding: 20px;

}

/* Container for one product */
.containergrid{

  display: grid;

  
}

/* Containing information of the product */
.product-card {

  box-sizing: border-box;
  overflow: hidden;

  height: 340px;
  padding: 20px;

  text-align: center;
  background-color: #fff;
  border: 6px solid #ddd;
  /* Border image with red and white stripes images is added to increase the Cristmas vibe, ensure customer to enjoy the event */
  border-image: url('../images/christmasbackground.jpg') 50 round;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}

.product-image {

  z-index: 300;

  max-width: 150px;
  height: 100px;

  transition: transform 0.3s;

}

/* Product image hover effect */
.product-image:hover {

  transform: scale(1.3);

}

.product-title {

  padding-top: 15px;

  font-size: 22px;
  font-weight: 600;
  color: rgb(0, 126, 0);
  
}

.quantity-controls {

  margin-top: 10px;

}

/* Allows user to increase or decrease quantity */
.quantity-btn {

  padding: 5px 10px;

  background-color: #C9DD94;
  color: #000;
  border: none;

  cursor: pointer;
  transition: background-color 0.3s;

}

.quantity-btn:hover {

  background-color: #acbb85;

}

.quantity {

  margin: 0 5px;

}

/* Add to cart */
.add-to-cart-btn {
  padding: 10px;
  margin: 10px 0 0 0;

  background-color: #C9DD94;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;

}

/* Add to cart button hover effect */
.add-to-cart-btn:hover {
  
  color: #C9DD94;
  border: 1px solid #C9DD94;

  background-color: #fff;
  /* The cursor image will change into a candy canes when hover as a easter egg for the christmas event */
  cursor: url('../images/candycanes.png'), auto;

}

/* Separators */
.separators{

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  padding: 20px;

}

.separators2{

  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 50px;

  padding: 20px;

}

.separators-item2{

  text-align: center;

}

.separators-item2 img{
  
  max-width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}

.separator-main-text{

  color: black;
  font-weight: 700;
  font-size: 1.8em;
  font-family: Garamond, serif;

}

.separator-sub-text{

  color: grey;
  font-family: 'Times New Roman', serif;
  font-size: 1.2em;
  
}
.separators-item {

  text-align: center;
  
}

.separators-item img {

  max-width: 100%;
  height:50px;

  filter: grayscale(100%);
  
}

.separators-item p {

  margin: 10px 0;

}

.separators-item:not(:first-child) {

  border-left: 2px solid #234812; /* Green color for the divider lines */
  padding-left: 20px; /* Adjust padding as needed based on your design */

}

/* Discount percentafe, display: at top left of the product card */
.discount-percentagefirst {

  position: absolute;
  z-index: 500;

  margin: 7px 246px 0 0;
  padding: 2px 6px 2px 10px;

  font-size: 20px;
  font-family: "Encode Sans Condensed", sans-serif;
  color: white;
  border-radius: 6px 0 0 6px;

  background-color: rgb(211,46,42);

}

/* Usign psedo-element to create flag shap discount */
.discount-percentagefirst::before,
.discount-percentagefirst::after {

    content: "";
    display: block;
    position: absolute;
    left: 100%;

    width: 0;
    height: 0;
    border-style: solid;

}

/* Flag shape discount for top right side, adjust border-width to gain triangle */
.discount-percentagefirst::before {

    top: 0;
    border-width: 22px 10px 0 0;
    border-color: rgb(211,46,42) transparent transparent transparent;

}

/* Flag shape discount for bottom right side, adjust border-width to gain triangle */
.discount-percentagefirst::after {
    bottom: 0;
    border-width: 0 10px 22px 0;
    border-color: transparent transparent rgb(211,46,42) transparent;
}

/* Price before discount */
.price-before {

  color: gray;
  margin: 10px 5px 0 0;
  text-decoration: line-through;

}

/* Price per Weight */
.perweight {

  color: gray;
 
}

/* Price after discount */
.price-after {

  font-size: 24px;
  font-weight: 600;
  color: rgb(0, 126, 0);

}