/* ================ Trending Brands ================= */

.trending-brands-subtitle {
    color: var(--text-dark);
    max-width: 520px;
}

.trending-brands-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Holds the pinned seller tile + carousel side by side. --tile-width is set
   in JS, not as a %-calc (different containing blocks would resolve it
   differently) - this is just the pre-JS fallback. */
.brand-showcase {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    --brand-tile-gap: 12px;
    --brand-tiles-visible: 1.5;
    --brand-tiles-full: 1; /* floor(--brand-tiles-visible), kept in sync per breakpoint below */
    --tile-width: 200px;
}

@media (min-width: 576px) {
    .brand-showcase {
        gap: 16px;
        --brand-tile-gap: 16px;
        --brand-tiles-visible: 2.5;
        --brand-tiles-full: 2;
    }
}

@media (min-width: 992px) {
    .brand-showcase {
        gap: 18px;
        --brand-tile-gap: 18px;
        --brand-tiles-visible: 3.5;
        --brand-tiles-full: 3;
    }
}

@media (min-width: 1200px) {
    .brand-showcase {
        gap: 20px;
        --brand-tile-gap: 20px;
        --brand-tiles-visible: 4.5;
        --brand-tiles-full: 4;
    }
}

/* Takes the remaining width next to the pinned tile - min-width:0 lets
   overflow:hidden actually clip inside a flex item. */
.brand-row {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* Padding + equal negative margin so the hover lift/shadow below isn't clipped. */
    padding-block: 24px;
    margin-block: -24px;
}

/* Auto-rotation + drag/wheel share one engine in trending-brands.js, which
   writes transform directly every frame - no CSS animation here. */
.brand-row-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--brand-tile-gap);
    will-change: transform;
}

.trendingBrandsMarquee {
    cursor: grab;
    touch-action: pan-y; /* vertical page scroll passes through; horizontal drag is ours */
}

.trendingBrandsMarquee.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Width solves for exactly N full tiles + a half tile visible (N.5 = --brand-tiles-visible). */
.brand-tile {
    position: relative;
    flex: 0 0 auto;
    width: var(--tile-width);
}

/* Sits outside .brand-row - not part of the scrolling track, never moves. */
.brand-tile-pinned {
    flex: 0 0 auto;
}

.brand-tile-photo {
    position: relative;
    overflow: hidden; /* clips .brand-tile-actions while it's parked off-edge, pre-hover */
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    border: 1px solid transparent;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Wishlist/compare (.mini-btn reused from style.css), non-functional for
   now - parked off-edge, sliding into view on hover. */
.brand-tile-actions {
    position: absolute;
    top: 15px;
    right: 10px;
    transform: translateX(50px);
    transition: transform 0.5s ease;
}

.brand-tile:hover .brand-tile-actions {
    transform: translateX(-5px);
}

.brand-tile-info {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.brand-tile-count {
    font-size: 12px;
    color: var(--text-para);
}

/* Small seller-logo badge tying each product tile back to the pinned seller. */
.brand-tile-photo .brand-tile-seller-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    max-width: none;
    max-height: none;
    border-radius: 50%;
    border: 2px solid var(--bg-white);
    background-color: var(--bg-white);
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* A sibling of .brand-tile-photo, not a child - keeps it out of that
   element's hover-triggered stacking context. Matches its footprint via
   aspect-ratio rather than height:100% (the tile is taller, caption below). */
.brand-tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    z-index: 10; /* always above every tile's photo, hovered or not */
    pointer-events: none;
}

/* Sits in the gap between the pinned logo and the carousel, centered on the
   gap's own midpoint (not the connector's width). Red matches .primary-button. */
.brand-tile-overlay .brand-tile-connector {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--brand-tile-gap) / 2);
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--cta-red-color);
    color: var(--btn-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.brand-tile-connector i {
    line-height: 1; /* icon fonts carry their own line-height, which throws off flex centering */
}

.brand-tile:hover .brand-tile-photo {
    transform: translateY(-4px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.brand-tile:hover .brand-tile-photo img:not(.brand-tile-seller-badge) {
    transform: scale(1.05);
}

.brand-tile-photo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.5s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.brand-tile-caption {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}