/* Bazarban role slider enhancements */
.bb-role-slider-shell {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--bb-slider-radius, 0px) !important;
}

/*
 * The legacy storefront contains radius rules for carousel/image elements.
 * Keep the admin-selected slider radius authoritative on every structural
 * layer so a value of 0 really renders square corners.
 */
.bb-role-slider-shell > .carousel,
.bb-role-slider-shell #carouselExampleSlidesOnly,
.bb-role-slider-shell .slider,
.bb-role-slider-shell .carousel,
.bb-role-slider-shell .carousel-inner,
.bb-role-slider-shell .carousel-item,
.bb-role-slider-shell .bb-role-slide,
.bb-role-slider-shell .bb-role-slide__image-link,
.bb-role-slider-shell .bb-role-slide__image-wrap,
.bb-role-slider-shell .carousel_item {
    border-radius: var(--bb-slider-radius, 0px) !important;
}

.bb-role-slider-shell *,
.bb-role-slider-shell *::before,
.bb-role-slider-shell *::after {
    box-sizing: border-box;
}

.bb-role-slider-shell .slider,
.bb-role-slider-shell .carousel,
.bb-role-slider-shell .carousel-inner,
.bb-role-slider-shell .carousel-item {
    width: 100%;
    height: var(--bb-slider-height, 520px);
}

.bb-role-slider-shell .slider {
    overflow: hidden;
}

.bb-role-slider-shell .carousel-inner {
    overflow: hidden;
}

.bb-role-slider-shell .bb-role-slide {
    position: relative;
    overflow: hidden;
    background: #f4f4f4;
}

.bb-role-slider-shell .bb-role-slide__image-link,
.bb-role-slider-shell .bb-role-slide__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.bb-role-slider-shell .carousel_item {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--bb-slider-object-fit, cover);
    object-position: center center;
}

.bb-role-slider-shell .bb-role-slide__overlay-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.bb-role-slider-shell .bb-role-slide__overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: 90%;
    line-height: 1.55;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: auto;
}

.bb-role-slider-shell .bb-role-slide__overlay--text {
    text-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}

.bb-role-slider-shell .bb-role-slide__overlay--link {
    text-decoration: none;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}

.bb-role-slider-shell .bb-role-slide__overlay--link:hover,
.bb-role-slider-shell .bb-role-slide__overlay--link:focus {
    text-decoration: underline;
}

.bb-role-slider-shell .bb-role-slide__overlay--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 22px;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
    transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.bb-role-slider-shell .bb-role-slide__overlay--button:hover,
.bb-role-slider-shell .bb-role-slide__overlay--button:focus {
    text-decoration: none;
    opacity: .94;
    transform: translate(-50%, -50%) translateY(-1px);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .2);
}

.bb-role-slider-shell .carousel-indicators {
    z-index: 7;
}

.bb-role-slider-shell .carousel-control-prev,
.bb-role-slider-shell .carousel-control-next {
    z-index: 6;
}

.bb-role-slider-shell--fullscreen {
    min-height: 100vh;
}

@media (max-width: 767.98px) {
    .bb-role-slider-shell .bb-role-slide__overlay {
        max-width: 92%;
    }

    .bb-role-slider-shell .bb-role-slide__overlay--button {
        padding: 8px 15px;
        min-height: 34px;
    }
}

/* Bazarban role slider enhancements v4 */
.bb-role-slider-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    clip-path: inset(0 round var(--bb-slider-radius, 0px));
}

.bb-role-slider-shell > #carouselExampleSlidesOnly,
.bb-role-slider-shell > .carousel,
.bb-role-slider-shell .slider,
.bb-role-slider-shell .carousel,
.bb-role-slider-shell .carousel-inner,
.bb-role-slider-shell .carousel-item,
.bb-role-slider-shell .bb-role-slide,
.bb-role-slider-shell .bb-role-slide__image-link,
.bb-role-slider-shell .bb-role-slide__image-wrap,
.bb-role-slider-shell img.carousel_item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    border-radius: var(--bb-slider-radius, 0px) !important;
}

.bb-role-slider-shell .carousel-inner,
.bb-role-slider-shell .carousel-item,
.bb-role-slider-shell .bb-role-slide__image-link,
.bb-role-slider-shell .bb-role-slide__image-wrap {
    clip-path: inset(0 round var(--bb-slider-radius, 0px));
}

.bb-role-slider-shell--fullscreen {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bb-role-slider-shell--fullscreen > #carouselExampleSlidesOnly,
.bb-role-slider-shell--fullscreen .slider,
.bb-role-slider-shell--fullscreen .carousel,
.bb-role-slider-shell--fullscreen .carousel-inner,
.bb-role-slider-shell--fullscreen .carousel-item,
.bb-role-slider-shell--fullscreen .bb-role-slide,
.bb-role-slider-shell--fullscreen .bb-role-slide__image-link,
.bb-role-slider-shell--fullscreen .bb-role-slide__image-wrap,
.bb-role-slider-shell--fullscreen img.carousel_item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
}

@supports (width: 100dvw) {
    .bb-role-slider-shell--fullscreen {
        width: 100dvw !important;
        min-width: 100dvw !important;
        max-width: 100dvw !important;
        margin-left: calc(50% - 50dvw) !important;
        margin-right: calc(50% - 50dvw) !important;
    }
}

.bb-role-slider-shell .bb-role-slide__overlay {
    transform-origin: center center;
    animation-duration: var(--bb-overlay-duration, .7s);
    animation-delay: var(--bb-overlay-delay, 0s);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--fade {
    animation-name: bbRoleOverlayFade;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--fade-up {
    animation-name: bbRoleOverlayFadeUp;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--fade-down {
    animation-name: bbRoleOverlayFadeDown;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--slide-left {
    animation-name: bbRoleOverlaySlideLeft;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--slide-right {
    animation-name: bbRoleOverlaySlideRight;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--zoom-in {
    animation-name: bbRoleOverlayZoomIn;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--zoom-out {
    animation-name: bbRoleOverlayZoomOut;
}
.bb-role-slider-shell .carousel-item.active .bb-role-slide__overlay.bb-overlay-effect--bounce {
    animation-name: bbRoleOverlayBounce;
}

@keyframes bbRoleOverlayFade {
    from { opacity: 0; }
    to { opacity: var(--bb-overlay-opacity, 1); }
}
@keyframes bbRoleOverlayFadeUp {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 42px)); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%); }
}
@keyframes bbRoleOverlayFadeDown {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 42px)); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%); }
}
@keyframes bbRoleOverlaySlideLeft {
    from { opacity: 0; transform: translate(calc(-50% + 65px), -50%); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%); }
}
@keyframes bbRoleOverlaySlideRight {
    from { opacity: 0; transform: translate(calc(-50% - 65px), -50%); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%); }
}
@keyframes bbRoleOverlayZoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.68); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%) scale(1); }
}
@keyframes bbRoleOverlayZoomOut {
    from { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
    to { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%) scale(1); }
}
@keyframes bbRoleOverlayBounce {
    0% { opacity: 0; transform: translate(-50%, calc(-50% - 55px)) scale(.92); }
    55% { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, calc(-50% + 10px)) scale(1.03); }
    75% { transform: translate(-50%, calc(-50% - 5px)) scale(.99); }
    100% { opacity: var(--bb-overlay-opacity, 1); transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bb-role-slider-shell .bb-role-slide__overlay {
        animation: none !important;
    }
}

/* ================= Bazarban role slider enhancements v5 ================= */
.bb-role-slider-shell[data-bb-slider-radius="0"] {
    border-radius: 0 !important;
    clip-path: none !important;
}

.bb-role-slider-shell[data-bb-slider-radius="0"] > #carouselExampleSlidesOnly,
.bb-role-slider-shell[data-bb-slider-radius="0"] > .carousel,
.bb-role-slider-shell[data-bb-slider-radius="0"] .slider,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-inner,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-item,
.bb-role-slider-shell[data-bb-slider-radius="0"] .bb-role-slide,
.bb-role-slider-shell[data-bb-slider-radius="0"] .bb-role-slide__image-link,
.bb-role-slider-shell[data-bb-slider-radius="0"] .bb-role-slide__image-wrap,
.bb-role-slider-shell[data-bb-slider-radius="0"] img.carousel_item {
    border-radius: 0 !important;
    clip-path: none !important;
}

.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-inner::before,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-inner::after,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-item::before,
.bb-role-slider-shell[data-bb-slider-radius="0"] .carousel-item::after,
.bb-role-slider-shell[data-bb-slider-radius="0"] .bb-role-slide::before,
.bb-role-slider-shell[data-bb-slider-radius="0"] .bb-role-slide::after {
    border-radius: 0 !important;
    clip-path: none !important;
}

/* ================= Bazarban role slider enhancements v7 =================
 * Overlay size is independent from its position. The browser must not use
 * the remaining space near an edge as a shrink-to-fit width.
 */
.bb-role-slider-shell .bb-role-slide__overlay,
.bb-role-slider-shell .bb-role-slide__overlay--button {
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* ================= Bazaro role slider presentation =================
 * Two selectable RoleCode=5 presentations live in this single stylesheet:
 *   fashion     -> Bazaro index.html (vertical bullets)
 *   electronics -> Bazaro index-electronics.html (center slide + side previews)
 * bazaro.js owns behavior; this file owns presentation only.
 */
.bb-role-slider-shell {
    position: relative;
}

.bb-role-slider-shell [id^="carousel-role-"] {
    position: relative !important;
}

.bb-role-slider-shell > #carouselExampleSlidesOnly {
    position: relative !important;
    z-index: 1 !important;
}

/* --------------------------------------------------------------------------
 * Style 1: Bazaro index.html / vertical bullet navigation
 * ----------------------------------------------------------------------- */
.bb-role-slider-shell--style-fashion #carouselExampleSlidesOnly [id^="carousel-role-"] > .carousel-indicators {
    z-index: 100 !important;
}

.bb-role-slider-shell--style-fashion > .bb-bazaro-slider-indicators {
    z-index: 100 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bb-role-slider-shell--style-fashion .carousel-control-prev,
.bb-role-slider-shell--style-fashion .carousel-control-next,
.bb-role-slider-shell--style-fashion .carousel-control-prev-icon,
.bb-role-slider-shell--style-fashion .carousel-control-next-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bb-role-slider-shell--style-fashion ol.carousel-indicators,
.bb-role-slider-shell--style-fashion .carousel-indicators {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 48px !important;
    right: auto !important;
    z-index: 100 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;

    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;

    list-style: none !important;
    text-align: center !important;
    pointer-events: auto !important;
}

.bb-role-slider-shell--style-fashion .carousel-indicators > li {
    position: relative !important;
    inset: auto !important;

    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 50% !important;

    background: #111 !important;
    background-color: #111 !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    opacity: 1 !important;

    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: none !important;
}

.bb-role-slider-shell--style-fashion .carousel-indicators > li::before,
.bb-role-slider-shell--style-fashion .carousel-indicators > li::after {
    content: none !important;
    display: none !important;
}

.bb-role-slider-shell--style-fashion .carousel-indicators > li.active {
    flex-basis: 11px !important;
    width: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;

    border: 1.5px solid #111 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.bb-role-slider-shell--style-fashion .carousel-indicators > li:focus {
    outline: none !important;
}

.bb-role-slider-shell--style-fashion .carousel-indicators > li:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .14) !important;
}

.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner {
    position: relative !important;
}

.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: opacity .65s ease, visibility 0s linear .65s !important;
}

.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    transition: opacity .65s ease, visibility 0s linear 0s !important;
}

.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item.carousel-item-next,
.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item.carousel-item-prev,
.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item.carousel-item-left,
.bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item.carousel-item-right {
    transform: none !important;
}

/* --------------------------------------------------------------------------
 * Style 2: Bazaro index-electronics.html / centered slide with side previews
 * ----------------------------------------------------------------------- */
.bb-role-slider-shell--style-electronics {
    --bb-electronics-slide-width: 78%;
    --bb-electronics-slide-gap: 26px;
    --bb-electronics-arrow-size: 46px;
    overflow: hidden !important;
}

.bb-role-slider-shell--style-electronics .slider,
.bb-role-slider-shell--style-electronics [id^="carousel-role-"] {
    overflow: visible !important;
}

/* Native-feeling drag interaction for the electronics presentation.
 * Horizontal dragging changes slides while vertical page scrolling remains available. */
.bb-role-slider-shell--style-electronics [id^="carousel-role-"] {
    touch-action: pan-y !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.bb-role-slider-shell--style-electronics.bb-electronics-dragging [id^="carousel-role-"],
.bb-role-slider-shell--style-electronics.bb-electronics-dragging .carousel-inner {
    cursor: grabbing !important;
}

.bb-role-slider-shell--style-electronics .carousel-inner,
.bb-role-slider-shell--style-electronics .carousel-item,
.bb-role-slider-shell--style-electronics img.carousel_item {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.bb-role-slider-shell--style-electronics img.carousel_item {
    -webkit-user-drag: none;
}

.bb-role-slider-shell--style-electronics .carousel-inner.z-depth-1 {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Keep the first paint close to the final electronics layout before JS creates
 * the loop clones. This avoids a full-width Bootstrap slide flash. */
.bb-role-slider-shell--style-electronics:not(.bb-bazaro-slider-ready) .carousel-inner > .carousel-item {
    display: none !important;
}

.bb-role-slider-shell--style-electronics:not(.bb-bazaro-slider-ready) .carousel-inner > .carousel-item.active {
    display: block !important;
    float: none !important;
    width: var(--bb-electronics-slide-width) !important;
    height: 100% !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    transform: none !important;
}

.bb-role-slider-shell--style-electronics .carousel-indicators,
.bb-role-slider-shell--style-electronics > .bb-bazaro-slider-indicators {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--bb-electronics-slide-gap) !important;
    overflow: visible !important;
    direction: ltr !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform .62s cubic-bezier(.22, .61, .36, 1) !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner.bb-electronics-no-transition {
    transition: none !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner > .carousel-item {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    flex: 0 0 var(--bb-electronics-slide-width) !important;
    width: var(--bb-electronics-slide-width) !important;
    min-width: var(--bb-electronics-slide-width) !important;
    max-width: var(--bb-electronics-slide-width) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    direction: rtl !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner > .carousel-item.active {
    z-index: 2 !important;
    pointer-events: auto !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner > .carousel-item.bb-role-slider-clone {
    pointer-events: none !important;
}

.bb-role-slider-shell--style-electronics .carousel-item,
.bb-role-slider-shell--style-electronics .bb-role-slide,
.bb-role-slider-shell--style-electronics .bb-role-slide__image-link,
.bb-role-slider-shell--style-electronics .bb-role-slide__image-wrap,
.bb-role-slider-shell--style-electronics img.carousel_item {
    border-radius: var(--bb-slider-radius, 0px) !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-prev,
.bb-role-slider-shell--style-electronics .carousel-control-next {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 32px !important;
    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--bb-electronics-arrow-size) !important;
    width: var(--bb-electronics-arrow-size) !important;
    height: var(--bb-electronics-arrow-size) !important;
    min-width: var(--bb-electronics-arrow-size) !important;
    min-height: var(--bb-electronics-arrow-size) !important;
    max-width: var(--bb-electronics-arrow-size) !important;
    max-height: var(--bb-electronics-arrow-size) !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d8d6d4 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #5b5a59 !important;
    box-shadow: none !important;
    outline: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    overflow: hidden !important;
    line-height: 1 !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease !important;
}

/* The reference electronics slider keeps both 46px controls almost touching:
 * 46px button + 4px visual gap. Their group begins 36px inside the active card. */
.bb-role-slider-shell--style-electronics .carousel-control-prev {
    left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 36px) !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-next {
    left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 86px) !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-prev:hover,
.bb-role-slider-shell--style-electronics .carousel-control-next:hover,
.bb-role-slider-shell--style-electronics .carousel-control-prev:focus-visible,
.bb-role-slider-shell--style-electronics .carousel-control-next:focus-visible {
    border-color: #141414 !important;
    background: #141414 !important;
    background-color: #141414 !important;
    color: #fff !important;
    outline: none !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-prev:active,
.bb-role-slider-shell--style-electronics .carousel-control-next:active {
    transform: none !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-prev-icon,
.bb-role-slider-shell--style-electronics .carousel-control-next-icon {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 12px !important;
    min-width: 7px !important;
    min-height: 12px !important;
    max-width: 7px !important;
    max-height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 7px 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Use the same 7 x 12 chevron proportions as Bazaro index-electronics.html.
 * A mask lets the icon follow currentColor, including the dark hover state. */
.bb-role-slider-shell--style-electronics .carousel-control-prev-icon {
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M5.75 10.75L0.75 5.75L5.75 0.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 12px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M5.75 10.75L0.75 5.75L5.75 0.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 12px no-repeat !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-next-icon {
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 12px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 7px 12px no-repeat !important;
}

.bb-role-slider-shell--style-electronics .carousel-control-prev-icon::before,
.bb-role-slider-shell--style-electronics .carousel-control-prev-icon::after,
.bb-role-slider-shell--style-electronics .carousel-control-next-icon::before,
.bb-role-slider-shell--style-electronics .carousel-control-next-icon::after {
    content: none !important;
    display: none !important;
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-single {
    --bb-electronics-slide-width: calc(100% - 32px);
}

.bb-role-slider-shell--style-electronics.bb-bazaro-slider-single .carousel-control-prev,
.bb-role-slider-shell--style-electronics.bb-bazaro-slider-single .carousel-control-next {
    display: none !important;
}

@media (max-width: 991.98px) {
    .bb-role-slider-shell--style-electronics {
        --bb-electronics-slide-width: 84%;
        --bb-electronics-slide-gap: 20px;
        --bb-electronics-arrow-size: 42px;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-prev,
    .bb-role-slider-shell--style-electronics .carousel-control-next {
        bottom: 22px !important;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-prev {
        left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 22px) !important;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-next {
        left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 68px) !important;
    }
}

@media (max-width: 767.98px) {
    .bb-role-slider-shell--style-fashion ol.carousel-indicators,
    .bb-role-slider-shell--style-fashion .carousel-indicators {
        left: 19px !important;
        gap: 13px !important;
        width: 10px !important;
        min-width: 10px !important;
        max-width: 10px !important;
    }

    .bb-role-slider-shell--style-fashion .carousel-indicators > li {
        flex-basis: 7px !important;
        width: 7px !important;
        min-width: 7px !important;
        max-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        max-height: 7px !important;
    }

    .bb-role-slider-shell--style-fashion .carousel-indicators > li.active {
        flex-basis: 10px !important;
        width: 10px !important;
        min-width: 10px !important;
        max-width: 10px !important;
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
    }

    .bb-role-slider-shell--style-electronics {
        --bb-electronics-slide-width: 91%;
        --bb-electronics-slide-gap: 14px;
        --bb-electronics-arrow-size: 38px;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-prev,
    .bb-role-slider-shell--style-electronics .carousel-control-next {
        bottom: 15px !important;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-prev {
        left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 12px) !important;
    }

    .bb-role-slider-shell--style-electronics .carousel-control-next {
        left: calc((100% - var(--bb-electronics-slide-width)) / 2 + 54px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-role-slider-shell--style-fashion.bb-bazaro-slider-ready .carousel-inner > .carousel-item,
    .bb-role-slider-shell--style-electronics.bb-bazaro-slider-ready .carousel-inner {
        transition: none !important;
    }
}


/* ================= Bazarban role slider v10 / safe corner radius =================
 * Radius is now owned by the outer shell. Nested clip-paths were causing the
 * translated/dragged carousel track (especially electronics mode) to be clipped
 * or composited incorrectly as soon as radius was greater than zero.
 */
.bb-role-slider-shell[data-bb-slider-radius]{
    overflow:hidden!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    isolation:isolate;
}
.bb-role-slider-shell[data-bb-slider-radius]:not([data-bb-slider-radius="0"]){
    border-radius:var(--bb-slider-radius,0px)!important;
    background-clip:padding-box;
}
.bb-role-slider-shell[data-bb-slider-radius] > #carouselExampleSlidesOnly,
.bb-role-slider-shell[data-bb-slider-radius] .slider,
.bb-role-slider-shell[data-bb-slider-radius] [id^="carousel-role-"],
.bb-role-slider-shell[data-bb-slider-radius] .carousel-inner,
.bb-role-slider-shell[data-bb-slider-radius] .carousel-item,
.bb-role-slider-shell[data-bb-slider-radius] .bb-role-slide,
.bb-role-slider-shell[data-bb-slider-radius] .bb-role-slide__image-link,
.bb-role-slider-shell[data-bb-slider-radius] .bb-role-slide__image-wrap,
.bb-role-slider-shell[data-bb-slider-radius] img.carousel_item{
    clip-path:none!important;
    -webkit-clip-path:none!important;
}
/* The animated track must stay geometrically untouched. The shell provides the
 * final clipping, while individual cards/images keep the selected corner shape. */
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .slider,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] [id^="carousel-role-"],
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .carousel-inner{
    border-radius:0!important;
}
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .slider,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] [id^="carousel-role-"]{
    overflow:visible!important;
}
.bb-role-slider-shell--style-electronics[data-bb-slider-radius].bb-bazaro-slider-ready .carousel-inner{
    overflow:visible!important;
}
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .carousel-item,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .bb-role-slide,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .bb-role-slide__image-link,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] .bb-role-slide__image-wrap,
.bb-role-slider-shell--style-electronics[data-bb-slider-radius] img.carousel_item{
    border-radius:var(--bb-slider-radius,0px)!important;
}
/* Fashion mode is clipped once at shell level; its fade items should not create
 * their own clipping layers because that can interrupt Bootstrap/Bazaro fades. */
.bb-role-slider-shell--style-fashion[data-bb-slider-radius] .carousel-inner{
    border-radius:0!important;
}