/*
 * Tarjeta compartida del inventario Seminuevos.
 * La misma estructura y esta misma capa visual se usan en /autos y en el home.
 */

.cv-home .premium-inventory {
    --pi-ink: #111318;
    --pi-muted: #656b74;
    --pi-white: #fff;
    --pi-blue: #4258cb;
    --pi-blue-dark: #2997bd;
    --pi-line: rgba(17, 19, 24, .1);
    --pi-title-font: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}

.cv-home .cv-car-track.premium-inventory {
    min-height: 0;
    grid-auto-columns: minmax(280px, calc((100% - 6px) / 4));
    gap: 2px;
    color: var(--pi-ink);
    background: transparent;
    font-family: "Helvetica Neue", Arial, sans-serif;
    scrollbar-color: rgba(66, 88, 203, .35) transparent;
}

.cv-home .cv-car-track.premium-inventory > .grid-item {
    width: auto;
    min-width: 0;
    padding: 9px;
    scroll-snap-align: start;
}

.cv-home .cv-car-track.premium-inventory .car-item {
    margin-top: 0;
}

.premium-inventory .car-item-gallery {
    position: relative;
    z-index: 1;
}

.premium-inventory .car-heading-with-brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.premium-inventory .car-heading-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.premium-inventory .car-heading-copy > span {
    display: block;
}

.premium-inventory .inventory-card-favorite,
.premium-inventory .inventory-card-video {
    display: inline-grid;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 14;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    color: var(--pi-ink) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .48));
    box-shadow:
        0 12px 28px rgba(17, 19, 24, .18),
        inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    transition: color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.premium-inventory .inventory-card-video {
    top: 14px;
    right: 66px;
}

.premium-inventory .inventory-card-favorite:hover,
.premium-inventory .inventory-card-favorite:focus,
.premium-inventory .inventory-card-favorite.is-active,
.premium-inventory .inventory-card-video:hover,
.premium-inventory .inventory-card-video:focus {
    color: var(--pi-blue) !important;
    box-shadow:
        0 14px 30px rgba(17, 19, 24, .2),
        0 0 0 3px rgba(49, 87, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .98);
    transform: scale(1.06);
}

.premium-inventory .inventory-card-favorite:active,
.premium-inventory .inventory-card-video:active {
    transform: scale(.92);
}

.premium-inventory .inventory-card-favorite i,
.premium-inventory .inventory-card-video i {
    margin: 0;
    font-size: 17px;
    line-height: 1;
}

.premium-inventory .gallery-slide-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: translateX(var(--gallery-offset, 18px)) scale(1.025);
    transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
}

.premium-inventory .gallery-slide-image.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.premium-inventory .gallery-slide-current {
    opacity: 1;
    transform: none;
}

.premium-inventory .gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease, transform .2s ease;
}

.premium-inventory .gallery-nav i {
    font-size: 32px;
    font-weight: 300;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .65);
}

.premium-inventory .gallery-nav-prev {
    left: 10px;
}

.premium-inventory .gallery-nav-next {
    right: 10px;
}

.premium-inventory .car-item-gallery:hover .gallery-nav,
.premium-inventory .gallery-nav:focus {
    opacity: 1;
}

.premium-inventory .gallery-nav:hover {
    transform: translateY(-50%) scale(1.12);
}

.premium-inventory .loading-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 38, 38, .16);
    opacity: 0;
    transition: opacity .2s ease;
}

.premium-inventory .loading-bar::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, #ff2020, #ffb000, #fff1a6);
    box-shadow: 0 0 5px #ff2020, 0 0 10px rgba(255, 176, 0, .9);
    transform: scaleX(0);
    transform-origin: left;
}

.premium-inventory .car-item-gallery.gallery-active .loading-bar {
    opacity: 1;
}

.premium-inventory .car-item-gallery.gallery-active .loading-bar::after {
    animation: seminuevosGalleryProgress 1.8s linear infinite;
}

@keyframes seminuevosGalleryProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.premium-inventory .ribbon-new-arrival {
    margin-bottom: 4px !important;
    border: 1px solid rgba(255, 255, 255, .88);
    color: #667085 !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow:
        0 3px 10px rgba(16, 24, 40, .12),
        inset 0 1px 0 rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}

.premium-inventory.product-listing .car-item {
    overflow: hidden;
    border: 1px solid rgba(17, 19, 24, .09);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 14px 34px rgba(17, 19, 24, .07),
        inset 0 1px 0 rgba(255, 255, 255, .94);
    transform: translateY(0);
    transition:
        border-color .32s ease,
        box-shadow .32s ease,
        transform .38s cubic-bezier(.22, 1, .36, 1);
}

.premium-inventory.product-listing .car-item:hover {
    border-color: rgba(49, 87, 255, .34);
    box-shadow:
        0 26px 58px rgba(17, 19, 24, .15),
        0 0 0 1px rgba(49, 87, 255, .08),
        inset 0 1px 0 rgba(255, 255, 255, .98);
    transform: translateY(-7px);
}

.premium-inventory .car-item .car-image {
    width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 21px 21px 0 0;
    background-color: #ececeb;
    background-position: center !important;
    background-size: cover !important;
    transition: filter .3s ease;
}

.premium-inventory.product-listing .car-item:hover .car-image {
    filter: saturate(1.04) contrast(1.02);
}

.premium-inventory .car-item .car-content {
    padding: 15px 15px 17px;
    background: linear-gradient(180deg, #fff 0%, rgba(250, 250, 248, .98) 100%);
}

.premium-inventory .inventory-card-title {
    width: 100%;
    height: 17px;
    margin-bottom: 8px;
    overflow: hidden;
    color: var(--pi-ink);
    font-family: var(--pi-title-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: .45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-inventory .inventory-card-title > span {
    display: inline-block;
    position: relative;
    width: max-content !important;
    min-width: max-content;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    color: inherit !important;
    font: inherit !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    transform: translateX(0);
    will-change: transform;
}

.premium-inventory .car-item:hover .inventory-card-title.is-overflowing > span,
.premium-inventory .car-item:focus-within .inventory-card-title.is-overflowing > span {
    animation: seminuevosCardTitleMarquee var(--marquee-duration, 5s) linear .3s infinite alternate;
}

@keyframes seminuevosCardTitleMarquee {
    to { transform: translateX(var(--marquee-distance, 0)); }
}

.premium-inventory .car-brand-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-top: 2px;
    padding: 3px;
    object-fit: contain;
}

.premium-inventory .car-item .car-list {
    margin-top: 0;
}

.premium-inventory .car-item .car-list ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 0;
}

.premium-inventory .car-item .car-list ul li {
    margin: 0;
    color: var(--pi-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
}

.premium-inventory .car-item .price {
    margin: 13px -15px 0;
    padding: 13px 15px 0;
    border-top: 1px solid rgba(17, 19, 24, .08);
}

.premium-inventory .car-item .price .text-black {
    color: var(--pi-muted) !important;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.premium-inventory .car-item .price .new-price {
    display: inline;
    height: auto;
    margin: 0;
    color: var(--pi-ink) !important;
    font-family: var(--pi-title-font);
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
}

.premium-inventory .car-item .price .old-price {
    display: inline;
    height: auto;
    margin: 0;
    color: #8a9098 !important;
    font-size: 10px;
}

.premium-inventory .car-item .premium-card-location {
    padding: 0 15px 17px;
    background: linear-gradient(180deg, rgba(250, 250, 248, .98), rgba(250, 250, 248, .98));
}

.premium-inventory .car-item .premium-card-location hr {
    margin: 0 0 10px;
    border-color: rgba(17, 19, 24, .08);
    opacity: 1;
}

.premium-inventory .car-item .premium-card-location__link {
    display: flex;
    height: auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pi-muted);
    text-decoration: none;
}

.premium-inventory .car-item .premium-card-location__link img {
    width: 13px;
    height: 13px;
}

.premium-inventory .car-item .premium-card-location__link .text-muted {
    display: block;
    height: auto;
    margin: 0;
    color: var(--pi-muted) !important;
    font-size: 10px;
    line-height: 1.3;
}

.premium-inventory .car-item .premium-card-location__link i {
    margin-left: auto;
    font-size: 10px;
    transition: transform .2s ease, color .2s ease;
}

.premium-inventory .car-item .premium-card-location__link:hover,
.premium-inventory .car-item .premium-card-location__link:focus-visible,
.premium-inventory .car-item .premium-card-location__link:hover i,
.premium-inventory .car-item .premium-card-location__link:focus-visible i {
    color: var(--pi-blue);
}

.premium-inventory .car-item .premium-card-location__link:hover i,
.premium-inventory .car-item .premium-card-location__link:focus-visible i {
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .premium-inventory .car-item:hover .inventory-card-title.is-overflowing > span,
    .premium-inventory .car-item:focus-within .inventory-card-title.is-overflowing > span {
        animation: none;
    }
}

@media (hover: none) {
    .premium-inventory .gallery-nav {
        opacity: .9;
    }
}

@media (max-width: 1199px) {
    .cv-home .cv-car-track.premium-inventory {
        grid-auto-columns: minmax(280px, calc((100% - 4px) / 3));
    }
}

@media (max-width: 767px) {
    .cv-home .cv-car-track.premium-inventory {
        grid-auto-columns: minmax(270px, 86vw);
    }

    .premium-inventory.product-listing .car-item:hover {
        transform: none;
    }

    .premium-inventory .car-item .car-content {
        padding: 16px 16px 18px;
    }

    .premium-inventory .car-item .price {
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 16px;
        padding-left: 16px;
    }
}