/* --- New homepage style (homepage1) --- */
#new-homepage-content {
  background-color: #FCF9F4; /* Figma: Desktop Homepage frame background */
  display: block; /* Default to block, JS will handle actual showing/hiding */
}

.new-hero-section {
  position: relative;
  width: 100%;
  height: 710px; /* Figma: Height of Rectangle 129 */
  overflow: hidden;
}

.new-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.new-hero-date {
  position: absolute;
  top: 103px; /* Figma: Vertical distance from top of Rectangle 129 */
  left: 100px; /* Figma: Horizontal distance from left of Rectangle 129 */
  color: #FFFFFF;
  text-align: left;
  z-index: 2;
}

.new-hero-date .date-day-name {
  font-family: 'Playfair Display SC', serif;
  font-weight: normal; /* Figma: Regular */
  font-size: 96px; /* Figma: Font size */
  line-height: 1; /* Adjusted for visual spacing */
  display: block;
  text-transform: uppercase; /* LUNEDÌ */
}

.new-hero-date .date-month {
  font-family: 'Playfair Display SC', serif; /* Figma uses Playfair for "aprile" as well */
  font-weight: normal; /* Figma: Regular */
  font-size: 96px; /* Figma: Font size */
  line-height: 1; /* Adjusted for visual spacing */
  display: block;
  margin-top: -10px; /* Adjust spacing based on visual */
  text-transform: capitalize; /* Aprile */
}

.new-hero-date .date-day-number {
  font-family: 'Playfair Display SC', serif; /* Figma says Poppins, but visually it's Playfair */
  font-weight: normal; /* Figma: Regular for Poppins, assuming similar for Playfair visually */
  font-size: 400px; /* Figma: Font size */
  line-height: 0.8; /* Adjusted for visual spacing of large numbers */
  display: block;
  margin-top: -30px; /* Adjust spacing based on visual */
}

.new-main-content {
  padding: 60px 100px; /* Figma: Padding around product grid (approx) */
  background-color: #FCF9F4;
}

.new-section-title {
  font-family: 'Playfair Display SC', serif;
  font-weight: normal; /* Figma: Regular */
  font-size: 48px; /* Figma: Font size for "Top products" */
  color: #51393A; /* Figma: Text color - Using brand dark brown */
  text-align: center;
  margin-bottom: 60px; /* Figma: Space below title */
}

.new-product-grid {
  display: grid; /* Using Grid for two columns */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 60px; /* Figma: Gap between cards */
}

.new-product-card {
  background-color: #FFFFFF; /* Figma: Card background, e.g., Rectangle 130 */
  border-radius: 20px; /* Based on user images，Add rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Slight shadows to increase layering，Reference user image */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.new-product-card.left-card .new-product-info {
  text-align: left;
  padding: 40px; /* Figma: Padding within text content area */
  flex-grow: 1;
}
.new-product-card.right-card .new-product-info {
  text-align: left; /* Figma: Right card text is also left-aligned within its block */
  padding: 40px; /* Figma: Padding within text content area */
}

.new-product-image-container {
  width: 100%;
  height: 430px; /* Figma: Height of Ellipse 1 image container (Rectangle 130) */
  position: relative;
  background-color: #F0F0F0; /* Fallback color for image area */
}

.new-product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-product-info {
  /* Padding is set in .left-card and .right-card specific rules */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.new-product-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; /* Figma: SemiBold */
  font-size: 32px; /* Figma: Font size */
  color: #51393A; /* Figma: Text color - Using brand dark brown */
  margin-bottom: 15px; /* Figma: Space between title and description */
  line-height: 1.2;
}

.new-product-description {
  font-family: 'Abhaya Libre Medium', serif; /* Figma specified */
  font-weight: 500; /* Figma: Medium */
  font-size: 20px; /* Figma: Font size */
  color: #51393A; /* Figma: Text color - Using brand dark brown */
  line-height: 1.4; /* Figma: Line height 28px for 20px font */
  margin-bottom: 30px; /* Figma: Space between description and button */
  flex-grow: 1;
}

.new-buy-now-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Figma: Bold */
  font-size: 20px; /* Figma: Font size */
  color: #FFFFFF; /* Figma: Text color */
  background-color: #51393A; /* Figma: Button background color - Using brand dark brown */
  border: none;
  padding: 18px 30px; /* Adjust the inner margin to fit the visual effect of the rounded button，There can be more left and right */
  border-radius: 30px; /* Based on user images，Add larger rounded corners to make the button appear round at both ends */
  cursor: pointer;
  text-transform: uppercase; /* Figma: "buy now" */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* width: 100%; */ /* removewidth 100% Make the button based on its content andpaddingAdaptive width */
  text-align: center;
  align-self: flex-start; /* Align the buttons to the left within the information area，If the product information area isflexcontainer */
}

.new-buy-now-btn:hover {
  background-color: #694b4c; /* Lighter shade of brand dark brown for hover */
  color: #FFFFFF;
}

.new-footer {
  background-color: #51393A; /* Figma: Footer background - Using brand dark brown */
  color: #EAE4DD; /* Figma: Text color - Using light off-white for contrast */
  padding: 60px 100px; /* Figma: Padding (approx) */
  text-align: center;
}

.new-social-media {
  margin-bottom: 40px; /* Figma: Space between social links and acknowledgement */
  display: flex;
  justify-content: center;
  gap: 40px; /* Figma: Space between "Twitter", "Facebook", "Instagram" */
}

.new-social-media span {
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* Figma: Regular */
  font-size: 16px; /* Figma: Font size */
  color: #EAE4DD; /* Using light off-white */
  cursor: pointer;
  transition: color 0.3s ease;
}

.new-social-media span:hover {
  color: #FFFFFF; /* Brighter white for hover */
}

.new-acknowledgement {
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* Figma: Regular */
  font-size: 14px; /* Figma: Font size */
  color: #EAE4DD; /* Figma: Text color - Using light off-white */
  line-height: 1.6; /* Figma: Line height 22.4px for 14px font */
  max-width: 800px;
  margin: 0 auto;
  text-transform: uppercase; /* Figma shows uppercase text */
}

/* Responsive Design：For small screens（For example, mobile phones） */
@media (max-width: 768px) {
  /* Navigation bar adjustment */
  .navbar {
    flex-direction: column; /* Vertical arrangement of navigation items */
    align-items: flex-start; /* Left alignedlogoAnd menu buttons */
  }

  .nav-menu {
    display: none; /* Hide menu items by default on the small screen，Preparing for the Burger Menu */
    /* In actual projects, it will be used hereJSUse the hamburger button to switch displays */
    flex-direction: column; /* Vertical arrangement of menu items */
    width: 100%; /* Full width when unfolded */
    background-color: #fff; /* background color，Avoid transparency */
    padding: 10px 0;
  }

  .nav-menu li {
    text-align: center;
    padding: 10px 0;
    width: 100%;
  }

  .nav-icons {
    /* Icons on the small screen may need to be adjusted in position or size，Keep it as it is for now，But it can be modified as needed */
    margin-top: 10px; /* If the navigation bar isflex-direction: column, There may be a gap between icons and menu buttons */
    align-self: center; /* Center the icon area in the folded navigation bar */
  }
  
  /* Can add a style for a hamburger menu button，And useJScontrol .nav-menu Display of/hide */
  /* .hamburger-menu { display: block; } */


  /* New homepage hero area adjustment */
  .new-hero-section {
    height: auto; /* Highly adaptive */
    padding-bottom: 20px; /* Leave some space at the bottom */
  }

  .new-hero-image {
    max-height: 60vh; /* Limit the maximum height of images，Avoid being too long */
  }

  .new-hero-date {
    font-size: 0.8em; /* Reduce date font size */
    padding: 8px;
    bottom: 10px; /* Adjust position */
    left: 10px;
    right: auto; /* Ensure on the left side */
    transform: none; /* Remove the centering conversion on the desktop */
    background-color: rgba(0,0,0,0.4); /* Add some background to ensure readability */
  }

  .new-hero-date .date-day-name,
  .new-hero-date .date-month,
  .new-hero-date .date-day-number {
    font-size: 1.8rem; /* Adjust the font size within the date */
  }
   .new-hero-date .date-month {
    font-size: 1rem;
   }


  /* "Top products"AREA TITLE */
  .new-section-title {
    font-size: 2rem; /* Reduce the font size of the title */
    margin-bottom: 20px;
  }

  /* Product Grid Container */
  .new-product-grid {
    flex-direction: column; /* Vertical stacking of product cards */
    gap: 20px; /* Gap between cards */
  }

  /* Product card */
  .new-product-card {
    width: 100%; /* The card width occupies the entire parent container */
    /* flex-direction: row; */ /* If you want the image to be on the left，Text on the right */
    /* align-items: center; */ /* If yesrowlayout，Vertically centered */
  }
  
  /* If you want the mobile image to be on the left，Text on the right（similarFigmaList items of search results）You can adjust it like this */
  /*
  .new-product-card.left-card, .new-product-card.right-card {
    flex-direction: row;
  }
  .new-product-image-container {
    width: 120px; // Fixed image width
    height: 120px; // Fixed image height
    padding-top: 0; // Remove the previous percentagepadding
    flex-shrink: 0; // Prevent image containers from being compressed
  }
  .new-product-info {
    text-align: left; // Left aligned text
    padding: 15px;
  }
  .new-product-title {
    font-size: 1.2rem;
  }
  .new-product-description {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }
  .new-buy-now-btn {
    padding: 8px 15px;
    font-size: 0.8rem;
    align-self: flex-start; // Left aligned button
  }
  */


  .new-product-image-container {
     padding-top: 65%; /* Adjust the aspect ratio of the image container to fit the vertical card */
  }

  .new-product-title {
    font-size: 1.3rem; /* Adjust the font size of the product title */
  }

  .new-product-description {
    font-size: 0.85rem; /* Adjust the font size of the description */
  }

  .new-buy-now-btn {
    padding: 10px 20px; /* Adjust button size */
    font-size: 0.85rem;
  }

  /* New Footer Adjustment */
  .new-footer {
    padding: 30px 15px; /* Reduce the inner margin of the footer */
  }

  .new-social-media span {
    margin: 0 10px; /* Reduce the spacing between social media icons */
    font-size: 0.85rem;
  }

  .new-acknowledgement {
    font-size: 0.7rem; /* Reduce the size of the declaration text */
  }
}

/* For very small screens，Can be further fine tuned */
@media (max-width: 480px) {
  .new-hero-date .date-day-name,
  .new-hero-date .date-month,
  .new-hero-date .date-day-number {
    font-size: 1.5rem; /* Further reduce the date font on a very small screen */
  }
  .new-hero-date .date-month {
    font-size: 0.9rem;
   }

  .new-section-title {
    font-size: 1.8rem; /* Further reduce the title */
  }

  .new-product-title {
    font-size: 1.2rem; /* Further reduce the product title */
  }

  .new-product-description {
    font-size: 0.8rem;
  }

  .new-buy-now-btn {
    padding: 8px 18px;
  }
}

/* ensure #new-homepage-content Displayed by default，And other pages are hidden */
/* This logic is mainly composed ofJScontrol，onlyCSSCan set initial state */
#new-homepage-content {
  display: block; /* or flex, grid, Depending on its internal structural requirements */
}

/* Initial hiding of other pages */
#about-page-content,
#cakes-page-content,
#wishlist-page-content,
#payment-page-content,
#thank-you-page-content,
#product-detail-page {
  display: none;
}