@charset "UTF-8";

/**
 * Featured Brands – professional image-only logo strip
 * BEM: nx-featured-brands
 * Theme: --primary, --card-bg, --filter-bg, --border-color
 */

.nx-featured-brands {
    --nx-fb-primary: var(--primary, #0d6efd);
    --nx-fb-card: var(--card-bg, #ffffff);
    --nx-fb-text: var(--card-text, var(--text-primary, #1d1d1f));
    --nx-fb-border: var(--border-color, rgba(0, 0, 0, 0.08));
    --nx-fb-surface: var(--filter-bg, #f8f9fa);
    --nx-fb-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Soft professional shadow — low opacity only */
    --nx-fb-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04))
                    drop-shadow(0 4px 10px color-mix(in srgb, var(--nx-fb-surface) 92%, rgba(0, 0, 0, 0.08)));
    --nx-fb-shadow-hover: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05))
                          drop-shadow(0 8px 16px color-mix(in srgb, var(--nx-fb-surface) 88%, rgba(0, 0, 0, 0.1)));

    padding: clamp(1.5rem, 3.5vw, 2.75rem) 0;
    background: var(--nx-fb-card);
}

.nx-featured-brands__viewport {
    position: relative;
}

/* ========== Owl carousel ========== */
.nx-featured-brands__slider.owl-carousel {
    margin: 0;
    padding: 0.35rem 0 0.5rem;
}

.nx-featured-brands__slider .owl-stage-outer {
    overflow: hidden;
    padding: 0.65rem 0 0.85rem;
}

.nx-featured-brands__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ========== Logo only — transparent shell ========== */
.nx-featured-brands__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 8rem;
    height: 4.25rem;
    margin: 0 auto;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    text-decoration: none !important;
    color: inherit;
    transition: transform var(--nx-fb-transition);
    -webkit-tap-highlight-color: transparent;
}

.nx-featured-brands__logo:hover,
.nx-featured-brands__logo:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.nx-featured-brands__logo:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-fb-primary) 22%, transparent);
}

.nx-featured-brands__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.88;
    filter: var(--nx-fb-shadow) grayscale(0.08);
    transition:
        transform var(--nx-fb-transition),
        filter var(--nx-fb-transition),
        opacity var(--nx-fb-transition);
}

.nx-featured-brands__logo:hover .nx-featured-brands__img,
.nx-featured-brands__logo:focus-visible .nx-featured-brands__img {
    opacity: 1;
    transform: scale(1.05);
    filter: var(--nx-fb-shadow-hover) grayscale(0);
}

/* ========== Nav arrows ========== */
.nx-featured-brands__slider .owl-nav {
    margin: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nx-featured-brands__slider .owl-nav button.owl-prev,
.nx-featured-brands__slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-fb-border) !important;
    border-radius: 50% !important;
    background: var(--nx-fb-card) !important;
    color: var(--nx-fb-text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition:
        background var(--nx-fb-transition),
        color var(--nx-fb-transition),
        border-color var(--nx-fb-transition);
}

.nx-featured-brands__slider .owl-nav button.owl-prev {
    left: -0.25rem;
}

.nx-featured-brands__slider .owl-nav button.owl-next {
    right: -0.25rem;
}

.nx-featured-brands__slider .owl-nav button.owl-prev:hover,
.nx-featured-brands__slider .owl-nav button.owl-next:hover,
.nx-featured-brands__slider .owl-nav button.owl-prev:focus-visible,
.nx-featured-brands__slider .owl-nav button.owl-next:focus-visible {
    background: var(--nx-fb-primary) !important;
    border-color: var(--nx-fb-primary) !important;
    color: #fff !important;
    outline: none;
}

.nx-featured-brands__slider .owl-nav button.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.nx-featured-brands__nav-icon {
    display: inline-flex;
    line-height: 0;
}

.nx-featured-brands__slider .owl-dots {
    display: none;
}

/* ========== Responsive ========== */
@media (min-width: 768px) {
    .nx-featured-brands__logo {
        max-width: 9rem;
        height: 4.75rem;
        padding: 0.4rem 0.6rem;
    }

    .nx-featured-brands__slider .owl-nav button.owl-prev {
        left: -0.5rem;
    }

    .nx-featured-brands__slider .owl-nav button.owl-next {
        right: -0.5rem;
    }
}

@media (min-width: 992px) {
    .nx-featured-brands__viewport {
        padding: 0 0.35rem;
    }

    .nx-featured-brands__logo {
        max-width: 9.5rem;
        height: 5rem;
    }

    .nx-featured-brands__slider .owl-nav button.owl-prev {
        left: -0.65rem;
    }

    .nx-featured-brands__slider .owl-nav button.owl-next {
        right: -0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-featured-brands__logo,
    .nx-featured-brands__img,
    .nx-featured-brands__slider .owl-nav button.owl-prev,
    .nx-featured-brands__slider .owl-nav button.owl-next {
        transition: none;
    }

    .nx-featured-brands__logo:hover,
    .nx-featured-brands__logo:focus-visible {
        transform: none;
    }

    .nx-featured-brands__logo:hover .nx-featured-brands__img,
    .nx-featured-brands__logo:focus-visible .nx-featured-brands__img {
        transform: none;
    }
}