.cpt-logo-marquee {
    --marquee-duration: 70s;
    --marquee-gap: var(--space-16, 4rem);
    --marquee-row-gap: var(--space-8, 2rem);
    --marquee-logo-height: 45px;
    --marquee-logo-max-width: 240px;
    --marquee-fade-size: 8%;
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: var(--marquee-row-gap);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.cpt-logo-marquee *,
.cpt-logo-marquee *::before,
.cpt-logo-marquee *::after {
    box-sizing: border-box;
}

.cpt-logo-marquee__row {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.cpt-logo-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    max-width: none;
    animation: cpt-logo-marquee-scroll var(--marquee-duration) linear infinite;
    will-change: transform;
}

.cpt-logo-marquee__row--right .cpt-logo-marquee__track {
    animation-direction: reverse;
}

.cpt-logo-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    gap: var(--marquee-gap);
    padding-inline: calc(var(--marquee-gap) / 2);
}

.cpt-logo-marquee__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 0.25rem);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    line-height: 1;
}

.cpt-logo-marquee__item:focus-visible {
    outline: 2px solid var(--light-blue, #009ceb);
    outline-offset: var(--space-1, 0.25rem);
}

.cpt-logo-marquee__image {
    display: block !important;
    flex: 0 0 auto;
    width: auto !important;
    height: var(--marquee-logo-height) !important;
    min-width: 0 !important;
    max-width: var(--marquee-logo-max-width) !important;
    max-height: var(--marquee-logo-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    transition: filter .2s ease, opacity .2s ease;
}

.cpt-logo-marquee--fade {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade-size), #000 calc(100% - var(--marquee-fade-size)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade-size), #000 calc(100% - var(--marquee-fade-size)), transparent 100%);
}

.cpt-logo-marquee--pause:hover .cpt-logo-marquee__track,
.cpt-logo-marquee--pause:focus-within .cpt-logo-marquee__track {
    animation-play-state: paused;
}

.cpt-logo-marquee--grayscale .cpt-logo-marquee__image { filter: grayscale(1); }
.cpt-logo-marquee--grayscale .cpt-logo-marquee__item:hover .cpt-logo-marquee__image,
.cpt-logo-marquee--grayscale .cpt-logo-marquee__item:focus-visible .cpt-logo-marquee__image { filter: grayscale(0); }

.cpt-logo-marquee--muted .cpt-logo-marquee__image { opacity: .55 !important; }
.cpt-logo-marquee--muted .cpt-logo-marquee__item:hover .cpt-logo-marquee__image,
.cpt-logo-marquee--muted .cpt-logo-marquee__item:focus-visible .cpt-logo-marquee__image { opacity: 1 !important; }

.cpt-logo-marquee__debug {
    padding: var(--space-3, 0.75rem);
    border: 1px solid #cc1818;
    background: var(--white, #fff);
    color: #1d2327;
    font: 14px/1.5 sans-serif;
    border-radius: var(--radius-md, .25rem);
}

@keyframes cpt-logo-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
    .cpt-logo-marquee { gap: var(--marquee-mobile-row-gap, var(--marquee-row-gap)); }
    .cpt-logo-marquee__group {
        gap: var(--marquee-mobile-gap, var(--marquee-gap));
        padding-inline: calc(var(--marquee-mobile-gap, var(--marquee-gap)) / 2);
    }
    .cpt-logo-marquee__image {
        height: var(--marquee-mobile-logo-height, var(--marquee-logo-height)) !important;
        max-height: var(--marquee-mobile-logo-height, var(--marquee-logo-height)) !important;
        max-width: var(--marquee-mobile-logo-max-width, var(--marquee-logo-max-width)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpt-logo-marquee__track { animation: none; transform: none; }
    .cpt-logo-marquee__group[aria-hidden="true"] { display: none; }
}

/* Keep theme code/pre wrappers transparent when they contain a marquee shortcode. */
code:has(.cpt-logo-marquee),
pre:has(.cpt-logo-marquee),
.wp-block-code:has(.cpt-logo-marquee),
.code-block:has(.cpt-logo-marquee) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

.cpt-logo-marquee,
.cpt-logo-marquee__rows,
.cpt-logo-marquee__row,
.cpt-logo-marquee__track,
.cpt-logo-marquee__group,
.cpt-logo-marquee__item {
    background: transparent !important;
    background-color: transparent !important;
}

/* Per-logo spacing: use item margins instead of flex gap so theme CSS cannot collapse it. */
.cpt-logo-marquee__group {
    gap: 0 !important;
    padding-inline: 0 !important;
}

.cpt-logo-marquee__item {
    margin-inline: calc(var(--marquee-gap) / 2) !important;
}

@media (max-width: 767px) {
    .cpt-logo-marquee__group {
        gap: 0 !important;
        padding-inline: 0 !important;
    }
    .cpt-logo-marquee__item {
        margin-inline: calc(var(--marquee-mobile-gap, var(--marquee-gap)) / 2) !important;
    }
}


/* Theme/builder code wrapper reset — frontend JavaScript-free.
 * Covers the normal case (marquee inside code/pre) and Sawy-style output where
 * an empty code/pre node is left immediately before the rendered marquee.
 */
html body code:has(.cpt-logo-marquee),
html body pre:has(.cpt-logo-marquee),
html body .wp-block-code:has(.cpt-logo-marquee),
html body .code-block:has(.cpt-logo-marquee),
html body code:has(+ .cpt-logo-marquee),
html body pre:has(+ .cpt-logo-marquee),
html body .wp-block-code:has(+ .cpt-logo-marquee),
html body .code-block:has(+ .cpt-logo-marquee),
html body code:has(~ .cpt-logo-marquee),
html body pre:has(~ .cpt-logo-marquee) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* If a builder leaves an empty code/pre sibling before the marquee, make sure
 * it has no visible box at all. */
html body code:empty:has(+ .cpt-logo-marquee),
html body pre:empty:has(+ .cpt-logo-marquee) {
    display: contents !important;
}