/* Listing sidebar: how to message the seller (Phase 7.6) */
.listing__vendor .sr-message-hint {
  margin: 12px 0 0;
  max-width: 36rem;
  color: var(--savorroots-grey, #707070);
  font-size: var(--savorroots-t3, 14px);
  line-height: 1.45;
}

/* Listing page: reserve image/block sizes to prevent CLS on first load */

.hp-listing__custom-hero {
  height: 494px;
  min-height: 494px;
}

@media (max-width: 1200px) {
  .hp-listing__custom-hero {
    height: 250px;
    min-height: 250px;
  }
}

.hp-listing__custom-info--item {
  min-height: 280px;
}

.hp-listing__custom-info .hp-listing__images {
  min-height: 280px;
  aspect-ratio: 16 / 10;
}

.hp-listing__custom-info .hp-listing__images > img,
.hp-listing__custom-info .hp-listing__images > video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .hp-listing__custom-info .hp-listing__images {
    aspect-ratio: auto;
    min-height: 280px;
    max-height: 280px;
    height: 280px;
  }
}

@media (min-width: 1025px) {
  .hp-listing__custom-info--item {
    min-height: 560px;
  }

  .hp-listing__custom-info .hp-listing__images {
    aspect-ratio: auto;
    min-height: 560px;
    align-self: stretch;
    height: auto;
  }
}

.that-click .swiper,
.that-click-slider {
  min-height: 667px;
}

@media (max-width: 1200px) {
  .that-click .swiper,
  .that-click-slider {
    min-height: 500px;
  }
}

@media (max-width: 730px) {
  .that-click .swiper,
  .that-click-slider {
    min-height: 475px;
  }
}

.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__image img {
  aspect-ratio: 280 / 395;
}

@media (min-width: 731px) and (max-width: 1200px) {
  .hp-listing--view-block .hp-listing__image,
  .hp-listing--view-block .hp-listing__image img {
    aspect-ratio: 350 / 420;
  }
}

@media (min-width: 1201px) {
  .hp-listing--view-block .hp-listing__image,
  .hp-listing--view-block .hp-listing__image img {
    aspect-ratio: 440 / 540;
  }
}

/* Listing description: structured "What you get / Format & delivery" blocks */
.custom-block__description h4,
.hp-listing__description h4 {
  margin: 18px 0 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--savorroots-main-black);
}

.custom-block__description p,
.hp-listing__description p {
  margin: 0 0 12px;
}

.custom-block__description ul,
.custom-block__description ol,
.hp-listing__description ul,
.hp-listing__description ol {
  margin: 0 0 12px !important;
  padding-left: 22px !important;
}

.custom-block__description ul li,
.hp-listing__description ul li {
  list-style: disc outside !important;
  margin: 0 0 6px;
}

.custom-block__description ol li,
.hp-listing__description ol li {
  list-style: decimal outside !important;
  margin: 0 0 6px;
}

/* Addons live under the product image (left column) instead of the long right column */
.sr-listing-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 1 680px;
  max-width: 680px;
  min-width: 0;
}

.sr-listing-media .hp-listing__images {
  max-width: 100% !important;
}

.sr-listing-addons {
  padding: 24px;
  background: var(--savorroots-main-white);
  border-radius: 24px 0 0 24px;
}

.sr-listing-addons:not(:has(.hp-variations__wrapper)) {
  display: none;
}

.sr-listing-addons .hp-variations__wrapper {
  margin: 0 !important;
}

@media (max-width: 1024px) {
  /* Stacked layout: photo → title & description → addons → price & buttons */
  .sr-listing-media,
  .hp-listing__custom-info--item > .custom-block {
    display: contents;
  }

  .sr-listing-media .hp-listing__images { order: 1; }
  .custom-block__wrapper { order: 2; }
  .sr-listing-addons { order: 3; }
  .custom-block__wrapper-info { order: 4; }

  .custom-block__wrapper,
  .sr-listing-addons,
  .custom-block__wrapper-info {
    padding: 16px;
    background: var(--savorroots-main-white);
    border-radius: 0;
  }

  .custom-block__wrapper-info {
    border-radius: 0 0 24px 24px;
  }
}

/* Desktop: both columns end on the same line — whichever is shorter stretches */
@media (min-width: 1025px) {
  .hp-listing__custom-info--item {
    align-items: stretch !important;
  }

  .sr-listing-media,
  .hp-listing__custom-info--item > .custom-block {
    align-self: stretch !important;
  }

  .sr-listing-addons {
    flex: 1 1 auto;
  }

  /* No addons: let the photo column end flush too */
  .sr-listing-media:not(:has(.hp-variations__wrapper)) .hp-listing__images {
    flex: 1 1 auto;
  }
}