/* Card appearance comes verbatim from bambu-category-archive.css. Layout only. */
.bambu-related { --bambu-related-visible: 4; --bambu-related-gap: 22px; width: 100%; max-width: 100%; min-width: 0; margin-block: 40px; box-sizing: border-box; }
body.single-product .bambu-related { --bambu-related-arrow-color: #000000; --bambu-related-arrow-disabled-opacity: 1; --bambu-related-arrow-hover-background: #fff; }
.bambu-related *, .bambu-related *::before, .bambu-related *::after { box-sizing: border-box; }
.bambu-related .bambu-related__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bambu-related .bambu-related__heading { margin: 0; padding: 0; color: #111; font-size: 28px; font-weight: 600; line-height: 1.2; text-align: start; text-transform: none; }
.bambu-related .bambu-related__navigation { display: flex; flex: 0 0 auto; gap: 8px; }
/* Same 30px circular controls as Bambu Hot Products, scoped to this component. */
.bambu-related .bambu-related__arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; margin: 0; color: var(--bambu-related-arrow-color, #111); background: #fff; border: 1px solid var(--bambu-related-arrow-color, #111); border-radius: 50%; box-shadow: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bambu-related .bambu-related__arrow svg { width: 18px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.bambu-related .bambu-related__arrow:hover { background: var(--bambu-related-arrow-hover-background, #f2f2f2); color: var(--bambu-related-arrow-color, #111); border-color: var(--bambu-related-arrow-color, #111); }
.bambu-related .bambu-related__arrow:disabled { opacity: var(--bambu-related-arrow-disabled-opacity, .35); cursor: not-allowed; }
.bambu-related :is(a, button):focus-visible { outline: 2px solid #00ae42; outline-offset: 3px; }
.bambu-related .bambu-related__viewport { overflow: hidden; width: 100%; min-width: 0; touch-action: pan-y; }
.bambu-related .bambu-related__track { display: grid; grid-template-columns: repeat(var(--bambu-related-visible), minmax(0, 1fr)); gap: var(--bambu-related-gap); width: 100%; height: auto; margin: 0; padding: 0; }
.bambu-related.is-initialized .bambu-related__track { display: flex; gap: 0; flex-wrap: nowrap; box-sizing: content-box; transition-property: transform; }
.bambu-related .bambu-related__slide { flex: 0 0 auto; min-width: 0; height: auto; margin: 0; padding: 0; }
.bambu-related .bambu-category-card { width: 100%; float: none; padding: 0; margin: 0; border: 0; }
.bambu-related .swiper-notification { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1024px) { .bambu-related { --bambu-related-visible: 3; } }
@media (max-width: 900px) { .bambu-related { --bambu-related-visible: 2; } }
@media (max-width: 767px) {
    .bambu-related { --bambu-related-gap: 10px; margin-block: 28px; }
    .bambu-related .bambu-related__header { gap: 10px; margin-bottom: 18px; }
    .bambu-related .bambu-related__heading { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .bambu-related .bambu-related__arrow { transition: none; } }