.container{
  max-width:1520px;
}
.product-layout-grid-sidebar {
    display:none;
}
@media screen and (min-width: 1024px) {
  .product-layout-grid {
    display: flex;
  }
  .accordion-header.active .accordion-icon,.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
  }
  .accordion-header.active ~ .accordion-content {
    max-height: 100%;
    padding-bottom: var(--space-md);
  }

  .product-layout-grid-content {
    flex:1;
    width:65%;
    padding-right:2rem;
  }
  .product-layout-grid-sidebar {
    flex-shrink:0;
    display:block;
    width:35%;
    border-left: 1px solid var(--color-border-light, #E0E0E0);
    position: sticky;
    top: 150px;
    align-self: start;
  }
  .product-layout-grid-sidebar .info-column{
    overflow-y: auto;
    /* Hide native scrollbar while keeping scroll functionality. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: calc(100vh - 150px);
  }
  .product-layout-grid-sidebar .info-column::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}
body{
  background-color: var(--clr-bg-page, #ffffff);
}

/* Product layout grid wrapper itself carries a bg-neutral-light utility
   from the template markup; flip it to white so the page is white-primary
   with cream surfaces used only as deliberate accents. */
.product-layout-grid.bg-neutral-light {
  background-color: var(--clr-bg-page, #ffffff) !important;
}


/* FAQ accordion revamp: this instance's saved background_color setting
   isn't honored by the renderer (the section stays bg-card-primary cream).
   Force it to white at the section AND inner wrapper so it blends with
   the white page. */
.product-layout-grid [data-fluid-section-type="faq-accordion-revamp"] .faq-accordion,
.product-layout-grid [data-fluid-section-type="faq-accordion-revamp"] .faq-accordion.bg-card-primary,
.product-layout-grid [data-fluid-section-type="faq-accordion-revamp"] .faq-inner {
  background-color: var(--clr-bg-page, #ffffff) !important;
}

/* Product image thumbnails: the section's "stretch" mode forces a
   grid of N evenly-distributed cells that fill the main image's width,
   so 1-2 thumbs become absurdly large. Override to a fixed-width row
   of landscape thumbs (matching the main image's 944:650 aspect) with
   horizontal scroll on overflow. Scoped to this template only. */
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnails-wrapper {
  width: 100%;
}
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnails-container {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnails-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnails-track {
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: var(--space-xs, 4px);
  width: max-content;
  max-width: none;
  padding-bottom: 0;
}
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnail {
  flex: 0 0 auto;
  width: 140px;
  height: auto;
  aspect-ratio: 944 / 650;
  min-width: 0;
}
.product-layout-grid .thumbnail-size-stretch .carousel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}