/* The old export determines layout bounds only, never product identity. */
[data-related-index],
[data-related-product],
[data-content-index],
[data-service-index],
[data-related-products-container],
[data-related-artwork-replaced],
[data-related-section-empty] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.landing-related-products {
  --related-accent: #ff7fc2;
  --related-border: #a52c79;
  --related-surface: #390c2a;
  --related-shade: #190618;
  --related-text: #fff5fc;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  margin: 0;
  padding: var(--related-gap, 6px);
  border: 1px solid var(--related-border);
  border-radius: var(--related-radius, 10px);
  background: linear-gradient(145deg, var(--related-surface), var(--related-shade));
  color: var(--related-text);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--related-accent) var(--related-shade);
  -webkit-overflow-scrolling: touch;
  line-height: 1.35;
  isolation: isolate;
}

.landing-related-products[hidden] { display: none !important; }
.landing-related-products.is-horizontal { overflow-y: hidden; }

.landing-related-list {
  display: grid;
  grid-template-columns: repeat(var(--related-columns, 2), minmax(0, 1fr));
  grid-auto-rows: var(--related-row, 72px);
  gap: var(--related-gap, 6px);
}

.landing-related-products.is-horizontal .landing-related-list {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: var(--related-card-width, 160px);
}

.landing-related-products .landing-related-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: .45em .6em;
  border: 1px solid var(--related-border);
  border-radius: calc(var(--related-radius, 10px) * .75);
  background: linear-gradient(120deg, var(--related-surface), var(--related-shade));
  color: var(--related-text);
  font-family: inherit;
  font-size: var(--related-font, 16px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  overflow-wrap: anywhere;
  scroll-margin: var(--related-gap, 6px);
}

.landing-related-products .landing-related-card:hover {
  border-color: var(--related-accent);
  filter: brightness(1.12);
}

.landing-related-products .landing-related-card:focus-visible {
  outline: 2px solid var(--related-accent);
  outline-offset: -3px;
}

.landing-related-name {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.landing-related-image {
  display: block;
  flex: 0 0 auto;
  width: 1.8em;
  height: 1.8em;
  object-fit: cover;
  border-radius: .4em;
}

.landing-related-arrow {
  flex: 0 0 auto;
  color: var(--related-accent);
  font-size: .9em;
}

/* 91妈妈 keeps its Figma cut-corner buttons and staggered PC / two-column H5
   slots. The wrapper is layout-only: no generic frame or horizontal carousel. */
.landing-related-products--mama {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.landing-related-products--mama::-webkit-scrollbar { display: none; }

.landing-related-products--mama .landing-related-list {
  position: relative;
  display: block;
  width: 100%;
}

.landing-related-products--mama .landing-related-mama-button {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--mama-title-size);
  line-height: 1.2;
  text-align: left;
  isolation: isolate;
}

.landing-related-mama-button::before,
.mama-related-art,
.mama-related-arrow {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}

.landing-related-mama-button::before {
  content: "";
  background:
    radial-gradient(ellipse 70% 12% at 55% 1%, #e044cf90, transparent),
    radial-gradient(ellipse 65% 22% at 55% 100%, #c007a060, transparent),
    linear-gradient(164deg, #8f1976cc 0%, #711261cc 45%, #38062ecc 46%, #280321cc 74%, #700659cc 100%);
  clip-path: polygon(10.2% 0, 90.3% 0, 100% 30.2%, 100% 71.6%, 90.6% 100%, 9.9% 100%, 0 69%, 0 31.9%);
  z-index: -1;
}

/* Cut out the entire middle of the original export, not individual text boxes.
   The even-odd polygon leaves a narrow, text-free rim with the exact original
   neon edges and corner detail; all interior color comes from one CSS fill. */
.mama-related-art {
  background: url("./assets/jw002/h5-service-you-wu-dao-581-5795.webp") 0 0 / 100% 100% no-repeat;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    11% 6%, 2% 33%, 2% 66%, 11% 94%, 90% 94%, 98% 70%, 98% 32%, 89% 6%, 11% 6%, 0 0);
}

/* Isolate only the exported circle/arrow at (293,36,48,48), with no old text. */
.mama-related-arrow {
  inset: 31.034483% auto auto 80.939227%;
  width: 13.259669%;
  height: 41.37931%;
  background-image: url("./assets/jw002/h5-service-you-wu-dao-581-5795.webp");
  background-size: var(--mama-width) var(--mama-height);
  background-position: calc(var(--mama-width) * -293 / 362) calc(var(--mama-height) * -36 / 116);
  background-repeat: no-repeat;
  clip-path: ellipse(49% 49% at 50% 50%);
}

.landing-related-mama-button .landing-related-name {
  position: static;
  z-index: 1;
  left: 10.8%;
  top: 18.1%;
  width: 64%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  -webkit-line-clamp: unset;
}

.landing-related-mama-button .landing-related-caption {
  position: static;
  z-index: 1;
  left: 10.8%;
  top: 62.1%;
  display: block;
  font-size: .5625em;
  font-weight: 600;
  white-space: nowrap;
}

.landing-related-mama-button .landing-related-image {
  position: static;
  left: 63%;
  top: 23%;
  width: 14%;
  height: 45%;
  object-fit: contain;
  border-radius: 0;
}

.landing-related-mama-button.has-product-image .landing-related-name { width: 49%; }
.landing-related-products--mama .landing-related-card:focus-visible { outline-color: #fff; }

/* Explicit mama mounts participate in the page's document flow. Keep the
   legacy exported-slot rules above for pages that do not opt into this path. */
[data-related-layout="flow"] .services-section[hidden] { display: none !important; }

.landing-related-products--flow {
  position: relative;
  z-index: auto;
  width: 100%;
  overflow: visible;
}

.landing-related-products--flow .landing-related-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: .8vw .35vw;
}

.landing-related-products--flow .landing-related-mama-button {
  position: relative;
  display: grid;
  grid-template-columns: 10.8% minmax(0, 1fr) 17% 22%;
  grid-template-rows: auto auto;
  align-content: space-between;
  justify-content: normal;
  gap: 0;
  aspect-ratio: 232 / 75;
  padding: 5.8% 0 6.08%;
  font-size: inherit;
}

.landing-related-products--flow .landing-related-name,
.landing-related-products--flow .landing-related-caption,
.landing-related-products--flow .landing-related-image {
  position: static;
  width: auto;
  min-width: 0;
}

.landing-related-products--flow .landing-related-name {
  grid-column: 2 / 4;
  grid-row: 1;
  font-size: max(11px, 1.06814vw);
  line-height: 1.2;
}

.landing-related-products--flow .landing-related-caption {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: max(8px, 0.600829vw);
  line-height: 1.2;
}

.landing-related-products--flow .landing-related-image {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  width: 1.691667vw;
  height: 1.691667vw;
}

.landing-related-products--flow .landing-related-mama-button.has-product-image .landing-related-name {
  grid-column: 2;
  width: auto;
}

.artboard-pc .landing-related-products--flow .mama-related-art,
.artboard-pc .landing-related-products--flow .mama-related-arrow {
  background-image: url("./assets/jw002/pc-service-you-wu-dao-581-5774.webp");
}

.artboard-pc .landing-related-products--flow .mama-related-arrow {
  inset: 30.666667% auto auto 81.034483%;
  width: 12.931034%;
  height: 40%;
  background-size: 773.333333% 250%;
  background-position: 93.069307% 51.111111%;
}

.artboard-mobile .landing-related-products--flow .landing-related-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(140px, 48%)), 1fr));
  gap: max(8px, 1.866667vw) max(8px, 1.2vw);
}

.artboard-mobile .landing-related-products--flow .landing-related-mama-button { aspect-ratio: 362 / 116; }

.artboard-mobile .landing-related-products--flow .mama-related-arrow {
  background-size: 754.166667% 241.666667%;
  background-position: 93.312102% 52.941176%;
}

/* Cards remain in their grid tracks. Background rim/arrow are sprite layers. */
.landing-related-products--flow .landing-related-mama-button { min-height: 40px; }
.landing-related-products--flow .landing-related-caption { min-height: 10px; }

/* Unequal grid tracks preserve the seven Figma offsets without positioning
   the links. New rows still contribute their full height to document flow. */
.artboard-pc .landing-related-products--flow .landing-related-list {
  grid-template-columns: 210fr 250fr 232fr 224fr 232fr 273fr 232fr;
  column-gap: 0;
}
.artboard-pc .landing-related-products--flow .landing-related-card { width: 12.083333vw; }
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 1),
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 3) { margin-top: 9.322917vw; }
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 4) { margin-top: 4.166667vw; }
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 5) { margin-top: 8.802083vw; }
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 6) { margin-top: .885417vw; }
.artboard-pc .landing-related-products--flow .landing-related-card:nth-child(7n + 7) { margin-top: 8.072917vw; }

/* H5 cards are 362/750 of the viewport; PC cards are 232/1920. */
.artboard-mobile .landing-related-products--flow .landing-related-name { font-size: max(14px, 4.266667vw); }
.artboard-mobile .landing-related-products--flow .landing-related-caption { font-size: max(10px, 2.4vw); }
.artboard-mobile .landing-related-products--flow .landing-related-image { width: 6.757333vw; height: 6.757333vw; }
@media (min-width: 601px) {
  .artboard-mobile .landing-related-products--flow .landing-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 319px) {
  .artboard-mobile .landing-related-products--flow .landing-related-list { grid-template-columns: minmax(0, 1fr); }
}