/* API order and identity are unchanged. Cards wrap in document flow and the
   final row is centered, matching the design's four-plus-three arrangement. */
[data-related-index], [data-related-product], [data-content-index],
[data-service-index], [data-related-products-container],
[data-related-artwork-replaced], [data-related-section-empty] { display: none !important; }
.landing-related-products { min-width: 0; margin: 0; padding: 0; color: #fff; }
.artboard-pc .related-mount { margin-inline: 9.0625%; }
.landing-related-list {
  --product-gap: calc(57.333333 * var(--pc-unit));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: max(calc(16px), calc(42 * var(--pc-unit))) var(--product-gap);
}
.landing-related-card {
  --pill-dark: #170e04; --pill-left: #392209; --pill-right: #734324;
  --pill-image: url('./assets/jj32/flow/pc-content-youwu.webp');
  --card-unit: var(--pc-unit);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) max(calc(20px), calc(50 * var(--card-unit)));
  grid-template-rows: auto auto; align-content: center;
  flex: 0 0 calc((100% - 3 * var(--product-gap)) / 4);
  min-width: 0; min-height: max(calc(64px), calc(134 * var(--card-unit)));
  padding-block: max(calc(10px), calc(22 * var(--card-unit)));
  padding-inline: max(calc(12px), calc(38 * var(--card-unit))) max(calc(8px), calc(26 * var(--card-unit)));
  column-gap: max(calc(4px), calc(10 * var(--card-unit)));
  border: 0; border-radius: 999px;
  background: linear-gradient(105deg, var(--pill-left), var(--pill-dark) 39%, var(--pill-dark) 64%, var(--pill-right));
  line-height: 1.25;
}
/* The exported WebP combines artwork and baked copy. Feather only its clean
   perimeter into the sampled base colors, preserving the native thin rim and
   inner glow. The center stays transparent so baked copy never appears.
   Absolute positioning is limited to this decorative background and sprites. */
.landing-related-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: var(--pill-image) center / 100% 100% no-repeat;
  mask-image: linear-gradient(to bottom, #000 2%, transparent 10%, transparent 80%, #000 97%), linear-gradient(to right, #000, transparent 9%, transparent 94%, #000);
  mask-composite: add;
}
/* The design's thin divider is a decorative pseudo-element, not a layout track. */
.landing-related-card::after { content: ''; grid-area: 1 / 2 / 3; align-self: end; justify-self: start; width: 1px; height: 75%; margin-left: calc(-.5 * max(4px, 10 * var(--card-unit))); background: linear-gradient(transparent, #ffffff70 20%, #ffffff70 80%, transparent); pointer-events: none; }
.pill-tone-1 { --pill-dark: #190411; --pill-left: #38061f; --pill-right: #671442; --pill-image: url('./assets/jj32/flow/pc-content-dongse.webp'); }
.pill-tone-2 { --pill-dark: #1a0634; --pill-left: #361053; --pill-right: #392654; --pill-image: url('./assets/jj32/flow/pc-content-mom.webp'); }
.pill-tone-3 { --pill-dark: #1d0709; --pill-left: #54131b; --pill-right: #691a1e; --pill-image: url('./assets/jj32/flow/pc-content-honey.webp'); }
.pill-tone-4 { --pill-dark: #070b1e; --pill-left: #152455; --pill-right: #263d88; --pill-image: url('./assets/jj32/flow/pc-content-bdsm.webp'); }
.pill-tone-5 { --pill-dark: #210913; --pill-left: #6b253d; --pill-right: #a03a5c; --pill-image: url('./assets/jj32/flow/pc-content-peach.webp'); }
.pill-tone-6 { --pill-dark: #1a0f03; --pill-left: #4f310c; --pill-right: #7d4f1c; --pill-image: url('./assets/jj32/flow/pc-content-nroom.webp'); }
.landing-related-name { grid-area: 1 / 1; z-index: 1; min-width: 0; font-size: max(calc(14px), calc(32 * var(--card-unit))); font-weight: 700; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.landing-related-caption { grid-area: 2 / 1; z-index: 1; min-width: 0; margin-top: max(calc(4px), calc(6 * var(--card-unit))); font-size: max(calc(12px), calc(22 * var(--card-unit))); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.landing-related-image { grid-area: 1 / 2; z-index: 1; align-self: center; width: 100%; max-height: 48px; object-fit: contain; }
.landing-related-card:hover { filter: brightness(1.12); }
.landing-related-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pill-art { position: absolute; overflow: clip; pointer-events: none; }
.pill-art > img { position: absolute; max-width: none; }
/* Ornaments retain their native position between the copy and round arrow.
   A feathered crop removes background seams without dimming the whole icon. */
.pill-art-symbol { --symbol-source-width: 350; --symbol-x: 190; --symbol-y: 8; --symbol-width: 73; --symbol-height: 76; right: 24%; top: 6%; width: calc(var(--symbol-width) / 350 * 100%); aspect-ratio: var(--symbol-width) / var(--symbol-height); mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 85%, transparent); mask-composite: intersect; }
.pill-art-symbol > img { width: calc(var(--symbol-source-width) / var(--symbol-width) * 100%); height: auto; left: calc(-1 * var(--symbol-x) / var(--symbol-width) * 100%); top: calc(-1 * var(--symbol-y) / var(--symbol-height) * 100%); }
.pill-tone-1 .pill-art-symbol { --symbol-x: 174; --symbol-width: 89; --symbol-height: 90; }
.pill-tone-2 .pill-art-symbol { --symbol-x: 186; --symbol-y: 10; --symbol-width: 80; --symbol-height: 75; }
.pill-tone-3 .pill-art-symbol { --symbol-x: 188; --symbol-width: 76; }
.pill-tone-4 .pill-art-symbol { --symbol-x: 174; --symbol-y: 12; --symbol-width: 83; --symbol-height: 73; }
.pill-tone-5 .pill-art-symbol { --symbol-x: 184; --symbol-width: 80; --symbol-height: 77; }
.pill-tone-6 .pill-art-symbol { --symbol-x: 198; --symbol-width: 66; --symbol-height: 77; }
/* Arrow is in its own grid column, centered as in Figma; an API image gets
   the first row of that column and keeps a separate arrow below it. */
.pill-art-end { position: relative; grid-area: 1 / 2 / 3; z-index: 1; align-self: center; justify-self: end; width: 100%; aspect-ratio: 1; clip-path: circle(44% at 48% 50%); }
.pill-art-end > img { width: 700%; height: 268%; left: -560%; top: -94%; }
.has-product-image .pill-art-symbol { visibility: hidden; }
.has-product-image .pill-art-end { grid-row: 2; margin-top: 4px; }
/* The H5 artwork has four cards in its first row at every viewport width.
   Keep that composition proportional to the 750px frame; native text still
   increases a row's height when API content requires more than two lines. */
.artboard-mobile .related-mount { margin-inline: 4.266667% 4.133333%; }
.artboard-mobile .landing-related-list { --product-gap: calc(9 * var(--mobile-unit)); gap: calc(21 * var(--mobile-unit)) var(--product-gap); }
.artboard-mobile .landing-related-card {
  --card-unit: calc(var(--mobile-unit) * .485074627);
  --pill-image: url('./assets/jj32/flow/mobile-content-youwu.webp');
  grid-template-columns: minmax(0, 1fr) calc(50 * var(--card-unit));
  flex-basis: calc((100% - 3 * var(--product-gap)) * 169 / 660);
  min-height: calc(134 * var(--card-unit));
  padding-block: calc(22 * var(--card-unit));
  padding-inline: calc(38 * var(--card-unit)) calc(26 * var(--card-unit));
  column-gap: calc(10 * var(--card-unit));
}
.artboard-mobile .landing-related-card:nth-child(4n + 3):has(+ .landing-related-card) {
  --card-unit: calc(var(--mobile-unit) * .440298507);
  flex-basis: calc((100% - 3 * var(--product-gap)) * 153 / 660);
  align-self: center;
}
/* The seven-item reference staggers its second row by 65 design pixels.
   Margins stay in flex flow; other API item counts keep natural centering. */
.artboard-mobile .landing-related-list:has(> .landing-related-card:nth-child(7):last-child) { justify-content: flex-start; }
.artboard-mobile .landing-related-list:has(> .landing-related-card:nth-child(7):last-child) > .landing-related-card:nth-child(5) { margin-left: calc(65 * var(--mobile-unit)); }
.artboard-mobile .landing-related-list:has(> .landing-related-card:nth-child(7):last-child) > .landing-related-card:nth-child(n + 6) { margin-left: calc(3 * var(--mobile-unit)); }
.artboard-mobile .landing-related-name { font-size: calc(32 * var(--card-unit)); }
.artboard-mobile .landing-related-caption { margin-top: calc(6 * var(--card-unit)); font-size: calc(22 * var(--card-unit)); }
.artboard-mobile .landing-related-card::after { width: calc(1 * var(--mobile-unit)); margin-left: calc(-5 * var(--card-unit)); }
.artboard-mobile .landing-related-image { max-height: calc(48 * var(--card-unit)); }
.artboard-mobile .has-product-image .pill-art-end { margin-top: calc(4 * var(--mobile-unit)); }
.artboard-mobile .pill-tone-1 { --pill-image: url('./assets/jj32/flow/mobile-content-dongse.webp'); }
.artboard-mobile .pill-tone-2 { --pill-image: url('./assets/jj32/flow/mobile-content-mom.webp'); }
.artboard-mobile .pill-tone-3 { --pill-image: url('./assets/jj32/flow/mobile-content-honey.webp'); }
.artboard-mobile .pill-tone-4 { --pill-image: url('./assets/jj32/flow/mobile-content-bdsm.webp'); }
.artboard-mobile .pill-tone-5 { --pill-image: url('./assets/jj32/flow/mobile-content-peach.webp'); }
.artboard-mobile .pill-tone-6 { --pill-image: url('./assets/jj32/flow/mobile-content-nroom.webp'); }
.artboard-mobile .pill-art-symbol { --symbol-source-width: 165; --symbol-x: 89; --symbol-y: 3; --symbol-width: 35; --symbol-height: 37; width: calc(var(--symbol-width) / var(--symbol-source-width) * 100%); }
.artboard-mobile .pill-tone-1 .pill-art-symbol { --symbol-x: 83; --symbol-width: 41; --symbol-height: 44; }
.artboard-mobile .pill-tone-2 .pill-art-symbol { --symbol-source-width: 166; --symbol-x: 88; --symbol-y: 4; --symbol-width: 40; --symbol-height: 36; }
.artboard-mobile .pill-tone-3 .pill-art-symbol { --symbol-x: 88; --symbol-width: 37; }
.artboard-mobile .pill-tone-4 .pill-art-symbol { --symbol-source-width: 162; --symbol-x: 80; --symbol-y: 5; --symbol-width: 38; --symbol-height: 35; }
.artboard-mobile .pill-tone-5 .pill-art-symbol { --symbol-source-width: 162; --symbol-x: 85; --symbol-width: 39; }
.artboard-mobile .pill-tone-6 .pill-art-symbol { --symbol-source-width: 162; --symbol-x: 91; --symbol-width: 32; --symbol-height: 36; }
/* Ultra-narrow windows use readable flow rows; the 320px+ design is unchanged. */
@media (max-width: 319px) {
  .artboard-mobile .landing-related-list { gap: 10px 8px; justify-content: center; }
  .artboard-mobile .landing-related-list .landing-related-card:nth-child(n) {
    --card-unit: .5px;
    flex: 1 1 calc((100% - 8px) / 2);
    min-width: min(calc(112px), calc(100%));
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) 24px;
    padding: 10px 12px;
    column-gap: 6px;
    align-self: stretch;
  }
  .artboard-mobile .landing-related-list:has(> .landing-related-card:nth-child(7):last-child) { justify-content: center; }
  .artboard-mobile .landing-related-list:has(> .landing-related-card:nth-child(7):last-child) > .landing-related-card:nth-child(n + 5) { margin-left: 0; }
  .artboard-mobile .landing-related-name { font-size: 14px; }
  .artboard-mobile .landing-related-caption { font-size: 12px; margin-top: 4px; }
}