/* Container for the monthly product showcase */
.monthly-product-showcase-container {
  width: 80vw;
  height: auto;
  margin: auto;
}

/* Styles for the monthly product showcase */
.monthly-product-showcase {
  border-radius: 0;
  background-color: #333333;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(29, 0, 102, 0.1);
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center horizontally */
  justify-content: flex-start; /* Align text at the top */
  /* height: 40vh; */
}

/* Style adjustments for vertically aligned columns */
.wp-block-column.is-vertically-aligned-center {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center text horizontally */
  justify-content: flex-start; /* Align text at the top */
}

/* Adjustments to push images to the bottom */
.wp-block-query {
  margin-top: auto;
}

/* Center align and set font size for paragraphs */
p.has-text-align-center {
  font-family: "Allura", cursive;
  text-align: center;
  font-size: 3vw;
  margin: 0 0 1em 0;
}

/* Grid layout for the post template */
ul.wp-block-post-template.is-layout-grid {
  align-items: center;
  margin-top: -10%;
}

ul.wp-block-post-template.is-layout-grid > li {
  flex: 0 0 auto;
  margin: 0;
}

/* .wp-container-core-post-template-is-layout-1 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: 400px;
} */

/* Specific styling for the first item in the list */
ul.wp-block-post-template.is-layout-grid > li:nth-child(1) {
  margin-left: -20%;
  margin-top: 70%;
  transform: rotate(-25deg);
  max-width: 70%;
}

/* Specific styling for the second item in the list */
ul.wp-block-post-template.is-layout-grid > li:nth-child(2) {
  margin-left: -30%;
  margin-top: -50%;
  max-width: 100%;
  transform: rotate(5deg);
}

/* Specific styling for the third item in the list */
ul.wp-block-post-template.is-layout-grid > li:nth-child(3) {
  margin-left: -20%;
  margin-top: 100%;
  max-width: 110%;
  transform: rotate(-5deg);
}

/* Specific styling for the fourth item in the list */
ul.wp-block-post-template.is-layout-grid > li:nth-child(4) {
  margin-left: 20%;
  margin-top: -40%;
  max-width: 110%;
  min-width: 100%;
}

/* Specific styling for the fifth item in the list */
ul.wp-block-post-template.is-layout-grid > li:nth-child(5) {
  margin-left: 0%;
  margin-top: 150%;
  max-width: 100%;
  transform: rotate(-20deg);
}

/* Masquer les badges promo */
.editor-styles-wrapper
  .wc-block-grid__products
  .wc-block-grid__product
  .wc-block-components-product-image
  .wc-block-components-product-sale-badge--align-right,
.wc-block-components-product-image
  .wc-block-components-product-sale-badge--align-right {
  display: none;
}

/* .wp-block-group
  .has-global-padding
  .is-content-justification-center
  .is-layout-constrained
  .wp-block-group-is-layout-constrained {
  width: 50%;
  height: 10vh;
  background-color: blue;
}

.woocommerce img,
.woocommerce-page img {
  height: auto;
  max-width: 30%;
  background-color: blueviolet;
} */

/* Media query for screens with a maximum width of 781px */
@media (max-width: 781px) {
  .wp-block-column.is-vertically-aligned-bottom,
  .wp-block-column.is-vertically-aligned-center,
  .wp-block-column.is-vertically-aligned-top {
    width: auto;
  }
}

/* Media query for screens with a maximum width of 600px */
@media (max-width: 600px) {
  p.has-text-align-center {
    font-size: 4vw;
  }

  ul.wp-block-post-template.is-layout-grid > li {
    margin-top: 0;
  }

  ul.wp-block-post-template.is-layout-grid > li:nth-child(1) {
    margin-top: 20%;
    margin-left: 20%;
  }

  ul.wp-block-post-template.is-layout-grid > li:nth-child(2) {
    width: 50%;
    margin-top: 20%;
    margin-left: -20%;
  }

  ul.wp-block-post-template.is-layout-grid > li:nth-child(3) {
    margin-top: 20%;
    margin-left: 20%;
    width: 80%;
  }

  ul.wp-block-post-template.is-layout-grid > li:nth-child(4) {
    margin-top: 20%;
    margin-left: -20%;
    width: 30%;
    transform: rotate(10deg);
  }

  ul.wp-block-post-template.is-layout-grid > li:nth-child(5) {
    margin-top: 20%;
    margin-left: 10%;
    width: 70%;
  }
}