/**
 * PDP: consecutive official「购物图片」sections → 2-col mobile / 3-col desktop grid.
 * Aligns gap & 9:16 card ratio with dh-media-carousel; hotspots unchanged.
 */

body[data-template="product"] #MainContent.content-for-layout,
body[data-dh-page="product"] #MainContent.content-for-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

@media screen and (min-width: 960px) {
  body[data-template="product"] #MainContent.content-for-layout,
  body[data-dh-page="product"] #MainContent.content-for-layout {
    gap: 16px;
  }
}

/* Full-width rows until JS wraps shoppable batches (same cell math → minimal shift) */
body[data-template="product"] #MainContent > [id^="shopline-section-"]:not(:has(> shoppable-image)),
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:not(:has(> shoppable-image)) {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image),
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) {
  flex: 0 0 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
  min-width: 0;
  box-sizing: border-box;
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) shoppable-image.shoppable-image,
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) shoppable-image.shoppable-image,
body[data-template="product"] .dh-pdp-shoppable-grid shoppable-image.shoppable-image,
body[data-dh-page="product"] .dh-pdp-shoppable-grid shoppable-image.shoppable-image {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__wrapper,
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__wrapper,
body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__wrapper,
body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__wrapper {
  display: block;
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper,
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper,
body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper,
body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background-color: rgba(var(--color-text), 0.06);
}

@media (min-width: 960px) {
  body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper--pc_empty,
  body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper--pc_empty,
  body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper--pc_empty,
  body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper--pc_empty {
    min-height: 0;
  }
}

@media (max-width: 959px) {
  body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper--mobile_empty.shoppable-image__image-wrapper--pc_empty,
  body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper--mobile_empty.shoppable-image__image-wrapper--pc_empty,
  body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper--mobile_empty.shoppable-image__image-wrapper--pc_empty,
  body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper--mobile_empty.shoppable-image__image-wrapper--pc_empty {
    min-height: 0;
  }
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper > img,
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__image-wrapper > img,
body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper > img,
body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__image-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 960px) {
  body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image),
  body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) {
    flex: 0 0 calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
  }
}

body[data-template="product"] .dh-pdp-shoppable-grid,
body[data-dh-page="product"] .dh-pdp-shoppable-grid {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  box-sizing: border-box;
}

@media screen and (min-width: 960px) {
  body[data-template="product"] .dh-pdp-shoppable-grid,
  body[data-dh-page="product"] .dh-pdp-shoppable-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

body[data-template="product"] .dh-pdp-shoppable-grid > [id^="shopline-section-"],
body[data-dh-page="product"] .dh-pdp-shoppable-grid > [id^="shopline-section-"] {
  min-width: 0;
  width: 100%;
  max-width: none;
  flex: none;
}

body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image .shoppable-image__info,
body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image .shoppable-image__info,
body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image .shoppable-image__info,
body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image .shoppable-image__info {
  margin: 12px;
  max-width: calc(100% - 24px);
}

@media (max-width: 959px) {
  body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image .shoppable-image__info,
  body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image .shoppable-image__info,
  body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image .shoppable-image__info,
  body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image .shoppable-image__info {
    margin: 8px;
    max-width: calc(100% - 16px);
  }

  body[data-template="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__hotspot,
  body[data-dh-page="product"] #MainContent > [id^="shopline-section-"]:has(> shoppable-image) .shoppable-image__hotspot,
  body[data-template="product"] .dh-pdp-shoppable-grid .shoppable-image__hotspot,
  body[data-dh-page="product"] .dh-pdp-shoppable-grid .shoppable-image__hotspot {
    width: 24px;
    height: 24px;
  }
}