.growcket-swiper-wrapper{
    width:100%;
}
.growcket-swiper .swiper-slide{
    box-sizing: border-box;
    padding: 8px;
}
.growcket-slide-inner{
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
}
.growcket-slide-image img{
    display:block;
    width:100%;
    height:auto;
}
.growcket-slide-title{
    padding: 10px;
    margin: 0;
    font-size: 16px;
}

/* Default: keep swiper clipped to keep layout stable */
.growcket-swiper {
    overflow: hidden;
    position: relative;
}

/* When overflow visible is requested, set class on wrapper so we can safely make swiper overflow visible
   without using inline styles. This allows slides to extend outside the widget bounds while keeping
   internal swiper layout behavior predictable. */
.growcket-swiper-wrapper.growcket-overflow-visible {
    overflow: visible;
}
.growcket-swiper-wrapper.growcket-overflow-visible .growcket-swiper {
    overflow: visible !important;
}

/* Ensure slides don't shrink and maintain expected sizing */
.growcket-swiper .swiper-slide {
    flex-shrink: 0;
}

/* Edge fade (left/right) visual overlay and padding compensation */
.growcket-swiper-wrapper.growcket-fade-enabled {
    position: relative;
    /* padding compensation so slides have room to enter/leave */
    padding-left: var(--growcket-fade-padding, 40px);
    padding-right: var(--growcket-fade-padding, 40px);
}

.growcket-swiper-wrapper.growcket-fade-enabled::before,
.growcket-swiper-wrapper.growcket-fade-enabled::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--growcket-fade-width, 80px);
    pointer-events: none;
    z-index: 50;
}
.growcket-swiper-wrapper.growcket-fade-enabled::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0));
}
.growcket-swiper-wrapper.growcket-fade-enabled::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

/* Ensure swiper uses border-box so padding doesn't break sizing logic unexpectedly */
.growcket-swiper {
    box-sizing: border-box;
}