.common-swiper-wrapper {
    width: 100%;
}

.common-swiper .swiper-slide {
    box-sizing: border-box;
    padding: 8px;
}

.common-slide-inner {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
}

.common-slide-image img {
    display: block;
    width: 100%;
    height: auto;
}

.common-slide-title {
    padding: 10px;
    margin: 0;
    font-size: 16px;
}

/* Default: keep swiper clipped to keep layout stable */
.common-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. */
.common-swiper-wrapper.common-overflow-visible {
    overflow: visible;
}

.common-swiper-wrapper.common-overflow-visible .common-swiper {
    overflow: visible !important;
}

/* Ensure slides don't shrink and maintain expected sizing */
.common-swiper .swiper-slide {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

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

.common-swiper-wrapper.common-fade-enabled::before,
.common-swiper-wrapper.common-fade-enabled::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--common-fade-width, 80px);
    pointer-events: none;
    z-index: 50;
}

.common-swiper-wrapper.common-fade-enabled::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.common-swiper-wrapper.common-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 */
.common-swiper {
    box-sizing: border-box;
}

/* Growcket Swiper width responsive using CSS variables for each device */
.swiper.common-swiper {
    max-width: 100% !important;
}

/* Hover overlay animation styles */
.common-slide-inner {
    position: relative;
}

.common-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}

.common-slide-inner:hover .common-slide-overlay {
    opacity: 1;
}

/* Always Visible Content logic */
.common-overlay-visible-yes .common-slide-overlay {
    opacity: 1;
}

.common-overlay-visible-yes .common-slide-subtitle,
.common-overlay-visible-yes .common-slide-title,
.common-overlay-visible-yes .common-slide-description {
    transform: translateY(0) !important;
}

.common-slide-overlay .common-slide-subtitle {
    color: #ffffff;
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 12px;
    font-weight: 200;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out 0.05s;
}

.common-slide-inner:hover .common-slide-overlay .common-slide-subtitle {
    transform: translateY(0);
}

.common-slide-overlay .common-slide-title {
    color: #ffffff;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out 0.1s;
}

.common-slide-inner:hover .common-slide-overlay .common-slide-title {
    transform: translateY(0);
}

.common-slide-overlay .common-slide-description {
    color: #ffffff;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out 0.2s;
}

.common-slide-inner:hover .common-slide-overlay .common-slide-description {
    transform: translateY(0);
}

/* ============================================
   Growcket Image Grid Styles
   ============================================ */

.growcket-image-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

.growcket-grid-item {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.growcket-grid-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.growcket-grid-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

.growcket-grid-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.growcket-grid-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover overlay animation styles for grid */
.growcket-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}

.growcket-grid-inner:hover .growcket-grid-overlay {
    opacity: 1;
}

.growcket-grid-overlay .growcket-grid-title {
    color: #ffffff;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out 0.1s;
}

.growcket-grid-inner:hover .growcket-grid-overlay .growcket-grid-title {
    transform: translateY(0);
}

.growcket-grid-overlay .growcket-grid-description {
    color: #ffffff;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out 0.2s;
}

.growcket-grid-inner:hover .growcket-grid-overlay .growcket-grid-description {
    transform: translateY(0);
}

/* ============================================
   New Skins & Controls Styles
   ============================================ */

/* Navigation & Pagination z-index fix */
.common-swiper .swiper-button-next,
.common-swiper .swiper-button-prev,
.common-swiper .swiper-pagination {
    z-index: 50;
}

/* --- CARD SKIN --- */
.common-skin-card .common-slide-overlay {
    position: relative;
    opacity: 1;
    background-color: #fff;
    /* Default, overridden by control */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px;
    height: auto;
    bottom: auto;
    top: auto;
    left: auto;
    right: auto;
    display: block;
}

.common-skin-card .common-slide-title,
.common-skin-card .common-slide-subtitle,
.common-skin-card .common-slide-description {
    transform: none !important;
    text-align: left;
    color: #333;
    /* Default text color */
}

.common-skin-card .common-slide-title {
    margin-bottom: 5px;
}

.common-skin-card .common-slide-subtitle {
    margin-bottom: 5px;
    color: #666;
    /* Slightly lighter for subtitle */
}

.common-skin-card .common-slide-inner:hover .common-slide-overlay {
    opacity: 1;
}


.common-skin-card .common-slide-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.common-skin-card .common-slide-image {
    flex-grow: 1;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.common-skin-card .common-slide-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* --- HERO SKIN --- */
.common-skin-hero .common-slide-inner {
    position: relative;
    height: 100%;
    min-height: 400px;
    /* Default hero height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.common-skin-hero .common-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.common-skin-hero .common-slide-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.common-skin-hero .common-slide-overlay {
    position: relative;
    z-index: 10;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.4);
    /* Default dark overlay */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- CARD SKIN: OVERLAY LAYOUT --- */
.common-skin-card.common-card-layout-overlay .common-slide-inner {
    position: relative;
    display: block;
    /* Reset from flex column
    height: 100%;
     */
}

.common-skin-card.common-card-layout-overlay .common-slide-image {
    width: 100%;
    z-index: 0;
}

.common-skin-card.common-card-layout-overlay .common-slide-overlay {
    position: absolute;
    /* Overlay on top */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Allow content to dictate height */
    z-index: 10;
    /* Default semi-transparent white */
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /*
    background: rgba(0, 0, 0, 0.5);
    &:hover {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background: rgba(0, 0, 0, 0.9);
    }*/
}

.common-skin-hero .common-slide-title,
.common-skin-hero .common-slide-subtitle,
.common-skin-hero .common-slide-description {
    transform: none !important;
}

/* Ensure images in overlay skin work as expected */
.common-skin-overlay .common-slide-image {
    height: 100%;
}

.common-skin-overlay .common-slide-image img {
    height: 100%;
    object-fit: cover;
}

/* --- BUTTON STYLES --- */
.common-slide-button-wrapper {
    margin-top: 20px;
}

.common-slide-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--e-global-color-accent, #61ce70);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.common-slide-button:hover {
    background-color: var(--e-global-color-text, #333);
    color: #fff;
    transform: translateY(-2px);
}