.logo-wrapper { position: relative; width: 100%; box-sizing: border-box; }

/* Grid */
.logo-layout-grid { display: grid; gap: 20px; align-items: center; }
.grid-masonry-yes .logo-layout-grid { display: block; column-gap: 20px; column-count: var(--grid-cols, 4); }
.grid-masonry-yes .logo-item { break-inside: avoid; margin-bottom: 20px; }

/* Justified */
.logo-layout-justified { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.logo-layout-justified .logo-item { flex-grow: 1; display: flex; justify-content: center; }
.logo-layout-justified .logo-item img { object-fit: contain; width: 100%; height: auto; max-height: 100%; }

/* Carousel */
.logo-layout-carousel { overflow: hidden; width: 100%; padding-bottom: 40px; }
.logo-item { text-align: center; width: 100%; position: relative; box-sizing: border-box; }
.logo-item img { height: auto; max-width: 100%; display: inline-block; transition: filter 0.4s ease, transform 0.4s ease; object-fit: contain; }

/* Marquee Settings — Fully Seamless & Jitter-Free */
.logo-layout-marquee {
    --marquee-speed: 30s;
    --marquee-gap-col: 20px;
    --marquee-gap-row: 20px;
    --marquee-fade-width: 50px;
    --marquee-fade-opacity: 0;
    display: flex;
    flex-direction: column;
    gap: var(--marquee-gap-row);
    overflow: hidden;
    position: relative;
    width: 100%;
}
.logo-layout-marquee.is-vertical {
    flex-direction: row;
    height: 100%;
}

.marquee-row {
    display: flex;
    overflow: hidden;
    width: 100%;
}
.is-vertical .marquee-row {
    flex-direction: column;
    height: 100%;
    width: auto;
}

/* Animate track as a single solid unit instead of separate groups */
.marquee-track {
    display: flex;
    gap: var(--marquee-gap-col);
    width: max-content;
    will-change: transform;
    animation: scroll-left calc(var(--marquee-speed) * var(--row-speed-mod, 1)) linear infinite;
}
.is-vertical .marquee-track {
    flex-direction: column;
    gap: var(--marquee-gap-row);
    height: max-content;
    animation: scroll-up calc(var(--marquee-speed) * var(--row-speed-mod, 1)) linear infinite;
}

.marquee-group {
    display: flex;
    gap: var(--marquee-gap-col);
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
}
.is-vertical .marquee-group {
    flex-direction: column;
    gap: var(--marquee-gap-row);
}

.marquee-dir-right .marquee-track { animation-name: scroll-right; }
.marquee-dir-down .marquee-track { animation-name: scroll-down; }

.logo-layout-marquee[data-auto-loop="no"] .marquee-track { animation: none !important; }

/* Fade Edges */
.logo-layout-marquee.has-fade::before, .logo-layout-marquee.has-fade::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--marquee-fade-width);
    z-index: 2;
    pointer-events: none;
}
.logo-layout-marquee.has-fade::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255, calc(1 - var(--marquee-fade-opacity))), transparent);
}
.logo-layout-marquee.has-fade::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255, calc(1 - var(--marquee-fade-opacity))), transparent);
}

/* Animations: Mathematically calculated to perfectly translation exactly half the full track with gap */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - (var(--marquee-gap-col) / 2))); }
}
@keyframes scroll-right {
    0% { transform: translateX(calc(-50% - (var(--marquee-gap-col) / 2))); }
    100% { transform: translateX(0); }
}
@keyframes scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-50% - (var(--marquee-gap-row) / 2))); }
}
@keyframes scroll-down {
    0% { transform: translateY(calc(-50% - (var(--marquee-gap-row) / 2))); }
    100% { transform: translateY(0); }
}

/* Hover Animation States */
.angie-logo-state-bw_to_color .logo-item img { filter: grayscale(100%); }
.angie-logo-state-bw_to_color .logo-item:hover img { filter: grayscale(0%); }
.angie-logo-state-color_to_bw .logo-item img { filter: grayscale(0%); }
.angie-logo-state-color_to_bw .logo-item:hover img { filter: grayscale(100%); }
.angie-logo-state-always_bw .logo-item img { filter: grayscale(100%); }
.angie-logo-state-always_color .logo-item img { filter: grayscale(0%); }

/* Slider Navigation & Pagination */
.swiper-button-next, .swiper-button-prev {
    color: #333;
    background: rgba(255,255,255,0.8);
    width: 40px; height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 18px;
}
.slider-arrows-outside .swiper-button-prev { left: -50px; }
.slider-arrows-outside .swiper-button-next { right: -50px; }

.slider-dots-shape-square .swiper-pagination-bullet { border-radius: 0; }
.slider-dots-shape-rounded .swiper-pagination-bullet { border-radius: 4px; }
.slider-dots-outside .swiper-pagination { bottom: 0; }