body {
  margin: 0;
  padding: 0;
  color: #333;
}

@font-face {
  font-family: Merriweather;
  src: url("font/Merriweather-Regular.eot");
}

@font-face {
  font-family: Merriweather2;
  src: url("font/Merriweather-Italic.woff");
}

@font-face {
  font-family: Work Sans;
  src: url("work-sans-cufonfonts-webfont/WorkSans-Regular.woff");
}

@font-face {
  font-family: Work SansLight;
  src: url("work-sans-cufonfonts-webfont/WorkSans-Light.woff");
}

@font-face {
  font-family: Merriweather700;
  src: url("font/Merriweather-Regular.woff2");
}

.header {
  text-align: center;
  padding: 20px;
}

.logo {
  /* font-weight: bold;
  letter-spacing: 2px; */
  width: 109px;
  height: 53px;
}

.product-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-container {
  display: flex;
  gap: 200px;
  margin: 30px auto;
  max-width: 1200px;
  height: auto;
}

.image-slider {
  flex: 1;
}

#main-image {
  width: 100%;
  height: 75%;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}

.thumbnail-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.thumbnail {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.thumbnail:hover {
  border-color: black;
}

.product-details {
  flex: 1;
}

.product-details h3 {
  color: #615c49;
  font-family: Merriweather;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.16px;
  text-transform: uppercase;
}

.product-details h2 {
  align-self: stretch;
  color: #000;
  font-family: Merriweather;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 0 !important;
  margin-bottom: 0px !important;
}

.price {
  color: #000;
  font-family: Merriweather;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0px !important;
}

.buy-now {
  margin-top: 48px !important;
  margin-bottom: 60px !important;
  background: black;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  /* margin-bottom: 20px; */
}

.buy-now:hover {
  opacity: 0.9;
}

.description {
  margin-bottom: 32px;
}

.product-details .description p {
  font-family: Work Sans;
}

#inviteButton {
  display: flex;
  width: auto;
  height: 46px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #000;
  background: #1f1f1f !important;
  color: #ffffff;
  /* White text color */
  font-size: 16px;
  font-weight: bold;
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 60px;
}

#inviteButton:disabled {
  background: #8e8e8e !important;
  /* Add !important to override other styles */
  color: #ffffff;
  /* Optional: Adjust text color */
  cursor: not-allowed;
  border: none;
  /* Optional: Adjust border style */
}

input[type="date"]::-webkit-input-placeholder {
  color: #aaa;
  font-style: italic;
}

/* Standard placeholder styling for other browsers */
input[type="date"]::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Reset styles for consistency */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

label {
  color: #858585;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
  margin-bottom: 0px !important;
}

input {
  color: #858585;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
  margin-bottom: 0px !important;
}

#emailError {
  display: none;
  color: #bd2c0f;

  font-family: "Work Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 12px */
  letter-spacing: -0.2px;
}

/* Additional styling for focus state */
input[type="date"]:focus {
  outline: none;
  border-color: #007bff;
}

details summary {
  color: #000;

  font-family: "Work Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  cursor: pointer;
  margin-top: 10px;
}

details p {
  font-family: Work Sans;
  margin-left: 20px;
  color: #666;
}

details summary {
  list-style: none;
  /* Removes default bullet/arrow */
}

details summary::-webkit-details-marker {
  display: none;
  /* Specifically hides the default marker on WebKit browsers (like Safari on iOS) */
}

/* accordion setup */
/* General Styles for Accordions */
.accordion {
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 20px 0;
  /* margin-top: 60px; */
}

.accordion:last-of-type {
  border-bottom: 1px solid #ccc;
}

.accordion summary {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.accordion summary::marker {
  content: "";
  /* Removes default marker */
}

.accordion summary::after {
  overflow: auto;
  content: "+";
  /* Default state (collapsed) */
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}

.accordion[open] summary::after {
  content: "-";
  /* Expanded state */
}

.accordion p {
  margin-top: 10px;
  margin-left: 0;
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  display: none;
  /* Hidden by default */
}

.accordion[open] p {
  display: block;
  /* Show content when accordion is open */
}

/* .whats-inside {
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
}

.whats-inside h2,
.whats-inside h3 {
  margin-bottom: 20px;
}

.items {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.item {
  text-align: center;
  max-width: 200px;
}

.item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
} */

.whats-inside {
  display: flex;
  /* Use flexbox for layout */
  align-items: flex-start;
  /* Align items to the top */
  justify-content: center;
  /* Center content horizontally */
  gap: 99px;
  /* Space between text and items */
  /* padding: 40px 20px; */
  background-color: #ffffff;
  margin-bottom: 168px;
}

.text-container {
  flex: 0 0 auto;
  /* Ensure the text container doesn't stretch */
  text-align: left;
  /* Align text to the left */
  max-width: 300px;
}

.section-subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 12px;
  align-self: stretch;
  color: #1d1d1d;
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.section-title {
  font-size: 28px;
  font-weight: bold;
}

.special-text {
  color: #717171;
  font-family: "Merriweather2", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 28px;
  text-transform: capitalize;
}

.special-text2 {
  color: #0f0f0f;

  font-family: "Work Sans";
  font-size: 16px;
  font-style: bold;
  font-weight: 700;
  line-height: 28px;
  /* 175% */
  text-transform: capitalize;
}

.items {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping if there’s insufficient space */
  gap: 60px;
  /* Space between items */
}

.item {
  text-align: center;
  max-width: 300px;
}

.item-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  /* Ensures the image fits within the specified dimensions */
  border-radius: 0px;
  /* Optional: adds rounded corners */
}

.item-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 16px !important;
  margin-bottom: 12px;
  text-align: left;

  color: #0f0f0f;

  font-family: Merriweather;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 30px;
  /* 125% */
  text-transform: capitalize;
}

.item-description {
  text-align: left;
  color: #717171;

  font-family: "Work SansLight";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 175% */
  text-transform: capitalize;
  color: #717171;
}

/* General Footer Styles */
.footer {
  background-color: #000000;
  color: #ffffff;
  padding: 40px 20px;
  display: flex;
  flex-direction: row;
  /* Stack rows vertically */
  gap: 30px;
  /* Space between rows */
  text-align: center;
  /* Center text by default */
}

/* Footer Center Row */
.footer-center {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  /* Align content to the left */
  color: #fff;

  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}

.footer-center p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  /* Align links to the left */
}

.social-links a {
  color: #ffffff;
  text-decoration: none;
}

/* Footer Left Row */
.footer-left {
  text-align: left;
  font-size: 20px;
  margin: 0 auto;
}

.footer-logo {
  font-size: 24px;
  font-weight: bold;
}

.footer-life {
  font-size: 20px;
  font-weight: normal;
}

/* Footer Bottom Row */
.footer-bottom {
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  /* Center align footer-bottom */
}

.footer-left {
  text-align: center;
  /* Centers the logo in the footer */
}

.footer-logo-image {
  max-width: 150px;
  /* Adjust size of the logo */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Ensures it aligns properly */
  margin: 0 auto;
  /* Centers the image horizontally */
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 24px;
  border-radius: 0px;
  width: 90%;
  max-width: 500px;
  position: relative;
  text-align: center;
  /* Centers all text content */
  margin: 0 auto;
}

.modal-content h2 {
  padding-left: 20px;
  padding-bottom: 20px;
  text-align: left;
  /* Center the text */
  /* margin-bottom: 20px; /* Add spacing below the heading 
  font-family: "Arial", sans-serif; Set a clean font */
  text-transform: capitalize;

  color: #0f0f0f;

  font-family: Merriweather;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 125% */
}

.modal-content p {
  text-align: left;
  padding-left: 20px;
  color: #717171;

  font-family: "Work Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
}

.modal2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal2 .modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.modal2 .success-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 20px;
  display: block;
}

.modal2 .modal-content h2,
.modal2 .modal-content p {
  margin: 10px 0;
  text-align: center;
}

.modal2 .modal-content h2 {
  padding-left: 0px !important;
  padding-bottom: 5px !important;
  margin: 10px 0;
  text-align: center;
  color: #0f0f0f;

  font-family: Merriweather;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.modal2 .modal-content p {
  margin: 5px auto;
  width: auto;
  text-align: center;
  color: #717171;

  text-align: center;
  font-family: "Work Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

/* Close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}

/* Form styles */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Adds spacing between fields */
  text-align: left;
}

form label {
  font-size: 14px;
  /* Adjust label font size if needed */
  margin-bottom: 5px;
  /* Adds spacing below the label */
  padding-left: 20px;
  /* Aligns labels with input field margins */
}

form input[type="text"],
form input[type="date"],
form input[type="tel"],
form input[type="email"],
form input[type="url"],
form button[type="submit"] {
  width: calc(100% - 40px);
  /* Ensures equal margins */
  margin: 0 20px;
  /* 20px margin on left and right */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: left;
  /* Aligns text inside the input field to the left */
  box-sizing: border-box;
  /* Includes padding in width calculation */
}

/* Submit button */
form button[type="submit"] {
  background: black;
  color: white;
  border: none;
  cursor: pointer;
  text-align: center;
  color: #f4f1df;

  font-family: "Work Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

/* General Styles for Mobile */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  header {
    text-align: center;
    /* padding: 10px 0; */
  }

  header .logo {
    width: auto;
    height: 24px;
  }

  /* .product-page {
  } */

  .product-container {
    display: block !important;
    /* Stacks items vertically for mobile */
    margin: 0;
    padding: 0 16px;
  }

  /* Image Slider */
  .image-slider {
    margin-bottom: 20px;
  }

  .image-slider #main-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }

  .thumbnail-container {
    /* display: flex; */
    justify-content: center;
    gap: 10px;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  /* Product Details */
  .product-details {
    text-align: left;
    margin-bottom: 30px;
  }

  .limited-edition {
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
  }

  .product-title {
    text-align: left;
    font-size: 20px;
    margin-bottom: 5px;
    color: #000;
    font-family: Merriweather;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .product-details h2 {
    align-self: stretch;
    color: #000;
    font-family: Merriweather;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .product-details p {
    color: #000;

    font-family: Merriweather;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .price {
    font-size: 18px;
    color: #333;
    margin-bottom: 24px !important;
    color: #000;
    font-family: Merriweather;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  /* .buy-now {
    display: block;
    width: 100%;
    padding: 8px 24px;
    text-align: center;
    background-color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #f4f1df;
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% 
  } */

  #inviteButton {
    display: flex;
    width: 100%;
    height: 36px;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #000;
    background: #1f1f1f !important;
    color: #ffffff;
    /* White text color */
    font-size: 16px;
    font-weight: bold;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 60px;
  }

  #inviteButton:disabled {
    background: #8e8e8e !important;
    /* Add !important to override other styles */
    color: #ffffff;
    /* Optional: Adjust text color */
    cursor: not-allowed;
    border: none;
    /* Optional: Adjust border style */
  }

  .modal .modal-content {
    /* Fixed width */
    /* Fixed height */
    margin: 0 24px;
    /* Centers horizontally */
    border-radius: 0px;
    /* Optional rounded corners */
    box-sizing: border-box;
    /* Includes padding in width/height */
  }

  .modal2 .modal-content {
    /* Fixed width */
    /* Fixed height */
    margin: 0 24px;
    /* Centers horizontally */
    border-radius: 10px;
    /* Optional rounded corners */
    box-sizing: border-box;
    /* Includes padding in width/height */
  }

  .description {
    text-align: left !important;
    margin-bottom: 60px;
  }

  /* Details (Dropdowns) */
  details {
    margin-bottom: 15px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
  }

  summary {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }

  details p {
    font-size: 14px;
    margin-top: 5px;
  }

  /* Base */
  .accordion {
    border-top: 1px solid #ccc;
    padding: 20px 0;
    overflow: hidden;
    /* prevents ghost text on collapse */
  }

  .accordion:last-of-type {
    border-bottom: 1px solid #ccc;
  }

  .accordion summary {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .accordion summary::-webkit-details-marker {
    display: none;
  }

  .accordion summary::after {
    content: "+";
    font-size: 18px;
    font-weight: 700;
    margin-left: 10px;
    /* (remove overflow:auto here) */
  }

  .accordion[open] summary::after {
    content: "-";
  }

  /* Content wrapper – avoid margin collapse & subpixel bleed */
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    /* clips any leftover pixels */
    transition: max-height 250ms ease;
  }

  /* When open, reveal content */
  .accordion[open] .accordion-content {
    max-height: 1000px;
    /* large enough for your longest block */
  }

  /* Text */
  .accordion-content p {
    margin: 10px 0 0 0;
    /* no negative/top-collapsing margins */
    font-size: 16px;
    color: #555;
    line-height: 1.6;
  }

  .accordion[open] p {
    display: block;
    /* Show content when accordion is open */
  }

  /* What's Inside Section */
  .whats-inside {
    display: none;
    /* Hides the entire section on mobile */
  }

  .footer {
    flex-direction: column;
    margin-top: 68px;
  }

  /* All text-like fields look identical */
  /* Common styles for all form inputs */
  form input[type="text"],
  form input[type="tel"],
  form input[type="email"],
  form input[type="url"],
  form input[type="date"] {
    width: calc(100% - 40px);
    margin: 0 20px;
    height: 56px;
    /* match "Full Name" height */
    padding: 14px 16px;
    font-size: 16px;
    /* prevents iOS zoom */
    border: 1px solid #ddd;
    border-radius: 10px;
    /* consistent rounded corners */
    background: #fff;
    /* force white (no iOS grey) */
    color: #111;
    box-sizing: border-box;
    font-family: "Work Sans", sans-serif;
  }

  /* iOS/WebKit resets for date input */
  form input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
  }

  /* remove weird padding inside the date text */
  form input[type="date"]::-webkit-datetime-edit {
    padding: 0;
  }

  /* ensure the calendar icon is aligned and tappable */
  form input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 16px;
    opacity: 0.7;
    cursor: pointer;
  }

  /* Fake placeholder for empty date fields */
  form input[type="date"]:not(:focus):invalid::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-style: normal;
    white-space: nowrap;

    /* matches left padding */
  }

  form input[type="date"]::-webkit-datetime-edit,
  form input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111 !important;
    caret-color: #111;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    border: 1px solid #ddd !important;
    /* keep your normal border */
    border-radius: 10px;
    /* match your inputs */
  }
}