/* Only the homepage ribbon, or Product Categories instances using these controls. */
.elementor-widget-etheme_categories.bambu-category-ribbon {
    --bambu-parent-space: calc(var(--min-height, var(--bambu-widget-max-height, 100%)) - var(--padding-block-start, 0px) - var(--padding-block-end, 0px));
    width: var(--bambu-widget-width, 100%);
    max-width: 100%;
    height: min(var(--bambu-parent-space), var(--bambu-widget-max-height, var(--bambu-parent-space)));
    min-height: 0;
    max-height: var(--bambu-widget-max-height, none);
    align-self: center;
}
.bambu-category-ribbon > .elementor-widget-container,
.bambu-category-ribbon .swiper-entry,
.bambu-category-ribbon .categoriesCarousel,
.bambu-category-ribbon .swiper-wrapper {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}
.bambu-category-ribbon > .elementor-widget-container {
    margin: 0;
}
.bambu-category-ribbon .categoriesCarousel {
    width: 100%;
    margin: 0;
}
.bambu-category-ribbon .swiper-slide {
    display: flex;
    justify-content: var(--bambu-card-horizontal, center);
    align-items: var(--bambu-card-vertical, center);
    height: 100%;
    min-height: 0;
    padding: var(--bambu-card-space-y, 0px) var(--bambu-card-space-x, 0px);
    box-sizing: border-box;
}
.bambu-category-ribbon .category-grid.content-under {
    display: flex;
    flex-flow: column nowrap;
    align-items: var(--bambu-card-horizontal, center);
    justify-content: var(--bambu-card-vertical, center);
    width: var(--bambu-card-width, 100%);
    max-width: 100%;
    height: var(--bambu-card-height, 100%);
    max-height: 100%;
    min-height: 0;
    margin: 0;
    box-sizing: border-box;
}
.bambu-category-ribbon .category-grid.content-under > a {
    display: flex;
    flex: 0 1 auto;
    justify-content: var(--bambu-card-horizontal, center);
    width: var(--bambu-image-width, 100%);
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}
.bambu-category-ribbon .category-grid.content-under > a img {
    display: block;
    width: 100%;
    height: var(--bambu-image-height, auto);
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: var(--bambu-image-fit, contain);
    margin: 0;
}
.bambu-category-ribbon .category-grid.content-under > .categories-mask {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    text-align: var(--bambu-title-align, center);
    margin-top: var(--bambu-image-spacing, 0px);
}
.bambu-category-ribbon .categories-mask h4 {
    margin-block: 0;
}
.bambu-category-ribbon .swiper-entry > .swiper-nav {
    top: 50%;
}

/* Native Swiper owns horizontal gestures; the browser retains vertical scrolling
   and pinch zoom. Do not let native image/link dragging steal the gesture. */
.bambu-home-category-ribbon .categoriesCarousel { touch-action: pan-y pinch-zoom; }
.bambu-home-category-ribbon .categoriesCarousel :is(a, img) { -webkit-user-drag: none; }
.elementor-widget-etheme_categories.bambu-home-category-ribbon.bambu-ribbon-auto-width { width: 100%; }

/* Only the homepage ribbon changes below the mobile breakpoint. */
@media (max-width: 767px) {
    /* The saved desktop width can be zero; mobile always uses the available carousel width. */
    .elementor-widget-etheme_categories.bambu-home-category-ribbon { width: 100%; height: auto; max-width: 100%; max-height: none; min-width: 0; margin-block: 0; }
    .elementor .e-con:has(> .bambu-home-category-ribbon),
    .elementor .e-con:has(> .e-con-inner > .bambu-home-category-ribbon) { --min-height: 0px; --gap: 0px; }
    .elementor .e-con > .e-con-inner:has(> .bambu-home-category-ribbon) { min-height: 0; }
    .bambu-home-category-ribbon :is(.swiper-entry, .categoriesCarousel, .swiper-wrapper, .swiper-slide) { height: auto; min-width: 0; }
    .bambu-home-category-ribbon .categoriesCarousel { overflow: hidden; }
    .bambu-home-category-ribbon .category-grid.content-under { height: auto; padding: 4px; }
    .bambu-home-category-ribbon .category-grid.content-under > a { width: 100%; height: 72px; flex: 0 0 72px; }
    .bambu-home-category-ribbon .category-grid.content-under > a img { width: 100%; height: 72px; object-fit: contain; }
    .bambu-home-category-ribbon .category-grid.content-under > .categories-mask { margin-top: 6px; text-align: center; }
    .bambu-home-category-ribbon .categories-mask h4 { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
    .elementor-widget.bambu-home-category-ribbon .category-grid .categories-mask { padding: 0 !important; }
    .elementor-widget.bambu-home-category-ribbon .category-grid .categories-mask h4 { width: 100%; font-size: 12px; }
    .elementor-widget.bambu-home-category-ribbon .category-grid .categories-mask h4 a { display: block; font-size: 12px !important; line-height: 1.3; text-transform: none; padding: 0; }
}