.product-title {
  margin: 20px 0;
  font-size: 32px;
  line-height: 32px;
}

.product-short-description {
  font-size: 2em;
  color: #262626;
  margin: 3rem 0;
  margin-bottom: 2rem;
}

/* Define variables for easier maintenance */
:root {
  --cta-bg-color: #405562;
  --cta-text-color: #ffffff;
  --cta-border-color: #ffffff;
  --cta-hover-bg-color: #ffffff;
  --cta-hover-text-color: #405562;
  --cta-max-width: 1200px;
  --cta-item-base-width: 17rem; /* Original width reference */
  --cta-item-max-width-mobile: 320px; /* Max width for item on mobile */
}

.cta-container {
  background-color: var(--cta-bg-color);
  /* Reduced padding for mobile, horizontal padding moved to wrapper */
  padding: 2rem 0;
}

.cta-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Center items horizontally on mobile when they stack */
  justify-content: center;
  gap: 2rem 1rem; /* More vertical gap when stacked, standard horizontal gap */
  max-width: var(--cta-max-width);
  margin: 0 auto;
  /* Add horizontal padding here to prevent content touching edges on mobile */
  padding: 0 1rem;
}

.cta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to the top */
  /* Mobile: take up most width, but have a max-width */
  width: 90%;
  max-width: var(--cta-item-max-width-mobile);
  /* Add margin bottom for spacing when items stack vertically */
  margin-bottom: 1rem; /* Can be removed if gap is sufficient */
  box-sizing: border-box; /* Include padding/border in width calculation */
}

.cta-item img {
  width: 100px;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove potential extra space below image */
  margin-bottom: 1rem; /* Consistent spacing */
}

.cta-item p {
  color: var(--cta-text-color);
  margin-top: 0; /* Adjusted margin */
  margin-bottom: 1rem; /* Consistent spacing */
  font-size: 1.125rem; /* Slightly smaller, use rem */
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  min-height: 3em; /* Give text some space to prevent height jumps if text wraps differently */
  line-height: 1.4; /* Improve readability */
}

.cta-item a {
  color: var(--cta-text-color);
  border: 2px solid var(--cta-border-color);
  padding: 0.75rem 1rem; /* Use rem for padding */
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1rem; /* Use rem */
  font-weight: 700;
  width: 100%;
  display: inline-block; /* Better element control */
  box-sizing: border-box; /* Include padding/border in width calculation */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smoother transition */
}

/* Combined hover and focus styles for accessibility */
.cta-item a:hover,
.cta-item a:focus {
  background-color: var(--cta-hover-bg-color);
  color: var(--cta-hover-text-color);
  text-decoration: none;
  outline: 2px solid transparent; /* Hide default outline if needed, ensure visual alternative */
  outline-offset: 2px;
}

/* --- Media Query for Larger Screens (e.g., Tablets and Desktops) --- */
@media (min-width: 768px) {
  .cta-container {
    /* Restore original vertical padding */
    padding: 4rem 0;
  }

  .cta-wrapper {
    /* Restore space-between for horizontal layout */
    justify-content: space-between;
    /* Adjust horizontal padding if needed, or keep from mobile */
    padding: 0 1.5rem;
    gap: 1rem; /* Restore original gap */
  }

  .cta-item {
    /* Revert width settings for multi-column layout */
    /* Use flex-basis for better flexibility */
    flex: 0 1 var(--cta-item-base-width); /* Don't grow, shrink if needed, base width */
    width: var(--cta-item-base-width); /* Fallback or explicit width */
    max-width: none; /* Remove mobile max-width */
    margin-bottom: 0; /* Remove bottom margin, rely on gap */
  }

  .cta-item p {
    font-size: 1.25rem; /* Restore original font-size (20px) */
    min-height: 0; /* Remove min-height if not needed on desktop */
  }

  .cta-item a {
    font-size: 1.2rem; /* Slightly larger font-size for desktop button (optional) */
  }
}

.product-short-description ul li {
  line-height: 1.75;
}

.product-short-description p:last-of-type {
  margin-top: 3rem;
}

.buyers-guide {
  width: 100%;
  background-color: #3a6f66;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 40px 20px;
  flex-wrap: wrap;
}

.buyers-guide p {
  color: white;
  font-size: 1.5rem;
  margin-right: 20px;
  text-align: center;
}

.buyers-guide-button {
  color: white;
  text-decoration: none;
  border: 2px solid white;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1.2em;
}

.buyers-guide-button:hover {
  background-color: white;
  color: #3a6f66;
  text-decoration: none;
}

.product-meta {
  margin-top: 20px; /* Space above the meta info */
  display: flex;
  gap: 1rem;
  font-size: 0.9em;
  color: #555;
  clear: both; /* Ensure it clears floats from add-to-cart */
}

.product-meta .sku-wrapper .sku {
  color: #262626;
}

.product-meta .posted-in a {
  text-decoration: none;
}

.product-meta .posted-in a:hover {
  text-decoration: underline;
}

/* Hide completely on mobile */
.desktop-in-person-options {
  display: none;
}

/* On desktop, show as flex */
@media screen and (min-width: 1024px) {
  .desktop-in-person-options {
    display: flex;
    flex-direction: row;
    align-items: center !important;
    justify-content: center !important;
    margin: 2rem 0;
    gap: 1rem !important;
  }
}

.in-person-options-container {
  justify-content: center;
  margin: 2rem 0;
  align-items: baseline;
  gap: 1rem;
}

.in-person-options-container p {
  text-align: left;
}

.in-person-options-container__button {
  color: #397167;
  text-decoration: none;
  border: 2px solid #397167;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.in-person-options-container__button:hover {
  background-color: #397167;
  color: white;
  text-decoration: none;
}

/* Mobile version: show by default */
.mobile-in-person-options {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 2rem 0;
  align-items: baseline;
  gap: 1rem;
  align-items: center;
}

/* Hide on desktop */
@media screen and (min-width: 1024px) {
  .mobile-in-person-options {
    display: none;
  }

  /* Show desktop version on desktop only */
  .desktop-in-person-options {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    align-items: baseline;
    gap: 1rem;
  }
}

.pdp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 20px;
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust ratio if needed */
  gap: 30px;
  align-items: start;
  margin-bottom: 6rem;
}

/* --- Left Column Styles --- */
.pdp-left {
  position: relative; /* Establishes positioning context if needed */
  /* Width is determined by grid */
}

.pdp-left {
  /* Prevent content width from forcing the grid track wider */
  min-width: 0;

  /* Ensure direct children don't overflow if needed, although
     min-width: 0 is usually the primary fix for the grid calculation */
  /* overflow: hidden; /* Optional: Add if content visually overflows */

  /* Other styles for pdp-left */
  position: relative;
}

/* Also ensure the direct Swiper containers handle overflow */
.product-gallery-slider .main-swiper,
.product-gallery-slider .thumbs-swiper {
  overflow: hidden; /* This should already be there or applied by Swiper, but double-check */
  position: relative; /* Good practice */
}

/* --- Original Gallery Container Styles --- */
.product-gallery-slider {
  width: 100%; /* Ensure it fills pdp-left */
  position: relative; /* Good practice for containing sliders */
}

/* --- Swiper Styles (Now targeting swipers inside .product-gallery-slider) --- */
.product-gallery-slider .swiper {
  /* Updated selector */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.product-gallery-slider .main-swiper {
  /* Updated selector */
  height: auto; /* Let content determine height */
  margin-bottom: 15px;
  border: 1px solid #eee; /* Optional */
  position: relative;
  overflow: hidden;
}

.product-gallery-slider .main-swiper .swiper-slide {
  /* Updated selector */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff; /* Or #f8f8f8 if you prefer */
  /* The slide height will be determined by the img's aspect-ratio */
  overflow: hidden; /* Ensure nothing spills out */
}

.product-gallery-slider .main-swiper .swiper-slide img {
  /* Updated selector */
  display: block;
  width: 100%; /* Let the width fill the container */
  height: auto; /* Let aspect-ratio determine height based on width */
  aspect-ratio: 2 / 3; /* <<< Force a 2:3 width-to-height ratio */
  object-fit: cover; /* <<< Crucial: Fit the *entire* image within the 2:3 box */
  max-height: 550px; /* Optional: Still useful as an absolute upper limit */
  /* Optional: Add a background color to the image container (slide)
     if images have transparency or you want to clearly see the 2:3 box */
  /* background-color: #f8f8f8; /* Example: Light grey background for the slide */
}

/* Thumbs Swiper Styles */
.product-gallery-slider .thumbs-swiper {
  /* Updated selector */
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}

.product-gallery-slider .thumbs-swiper .swiper-slide {
  /* Updated selector */
  width: 25%;
  height: 100%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border: 1px solid transparent;
}
.product-gallery-slider .thumbs-swiper .swiper-slide:hover {
  opacity: 0.8;
} /* Updated selector */
.product-gallery-slider .thumbs-swiper .swiper-slide-thumb-active {
  /* Updated selector */
  opacity: 1;
  border: 1px solid #333;
}
.product-gallery-slider .thumbs-swiper .swiper-slide img {
  /* Updated selector */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Controls Styles - Positioned relative to .main-swiper */
.product-gallery-slider .main-swiper .swiper-button-next, /* Updated selector */
.product-gallery-slider .main-swiper .swiper-button-prev {
  /* Updated selector */
  color: var(--swiper-navigation-color, #333);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
}
.product-gallery-slider .main-swiper .swiper-button-next:after, /* Updated selector */
.product-gallery-slider .main-swiper .swiper-button-prev:after {
  /* Updated selector */
  font-size: 14px;
  font-weight: bold;
}

/* No Image Fallback */
.product-gallery-slider .no-image {
  /* Updated selector */
  border: 1px dashed #ddd;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  width: 100%;
  box-sizing: border-box;
}
.product-gallery-slider .no-image img {
  /* Updated selector */
  max-width: 100%;
  height: auto;
  opacity: 0.5;
}

.container-fluid {
  padding: 0px !important;
  overflow: hidden !important; /* Prevents horizontal scrollbars */
}

/* Responsive styles */
@media (max-width: 768px) {
  .pdp-grid {
    grid-template-columns: 1fr; /* Stack columns */
  }
  .pdp-left {
    width: 100%;
  }
  /* Adjustments for image/thumb sizes within the nested structure */
  .product-gallery-slider .main-swiper .swiper-slide img {
    max-height: 400px;
  } /* Updated selector */
  .product-gallery-slider .thumbs-swiper {
    height: 80px;
  } /* Updated selector */
  div[thumbsslider] {
    display: none !important;
  }
  #main {
    padding: 0 20px;
  }
  .buyers-guide p {
    margin-right: 0px;
  }
}

.pdp-container .lifestyle-gallery-section {
  padding: 0 20px;
}