.cst-einstein-recommendations {
    border-top: 1px solid #d9d9d9;
    padding-top: 24px;
    margin-top: 32px;
}

.cst-einstein-recommendations__header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.cst-einstein-recommendations__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.cst-einstein-recommendations__pagination {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

/* Force flex — SFRA global stylesheets override display without !important */
.cst-einstein-recommendations__viewport {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* NO overflow, NO position — arrows are normal flex children */
}

/* Track fills all space between the two arrows */
.cst-einstein-recommendations__track {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    padding-bottom: 10px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
}

.cst-einstein-recommendations__track::-webkit-scrollbar {
    display: none !important;
}

/* Cards: 7 per row */
.cst-einstein-recommendations__card {
    flex: 0 0 calc((100% - 6 * 16px) / 7) !important;
    min-width: calc((100% - 6 * 16px) / 7) !important;
    max-width: calc((100% - 6 * 16px) / 7) !important;
    width: calc((100% - 6 * 16px) / 7) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    float: none !important;
}

/* Kill Bootstrap grid inside cards */
.cst-einstein-recommendations__card .row,
.cst-einstein-recommendations__card [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    flex: none !important;
}

.cst-einstein-recommendations__card .product-tile,
.cst-einstein-recommendations__card .tile {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.cst-einstein-recommendations__card .product-tile .image-container {
    height: 160px !important;
    max-height: 160px !important;
    min-height: unset !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

.cst-einstein-recommendations__card .product-tile .image-container a {
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    position: static !important;
}

.cst-einstein-recommendations
    .cst-einstein-recommendations__card
    .product-tile
    .image-container
    a
    .tile-image {
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    vertical-align: middle !important;
    position: static !important;
    top: unset !important;
    left: unset !important;
    transform: none !important;
}

.cst-einstein-recommendations__card .tile-body,
.cst-einstein-recommendations__card .pdp-link,
.cst-einstein-recommendations__card .product-name {
    font-size: 14px !important;
}

.cst-einstein-recommendations__card .price {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/*
  Arrows: normal flex children, hidden by default.
  margin-top centers them on the 160px image: (160 - 36) / 2 = 62px
  negative margins let them visually overlap the track edges.
  !important on everything so SFRA button resets can't undo the layout.
*/
.cst-einstein-recommendations__arrow {
    display: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: flex-start !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin-top: 135px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 1px solid #8c8c8c !important;
    border-radius: 8px !important;
    box-shadow: none !important;

    color: #555555 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;

    cursor: pointer !important;
    position: relative !important;
    z-index: 3 !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}

.cst-einstein-recommendations__arrow--left {
    margin-right: -18px !important;
    padding-left: 1px !important;
}

.cst-einstein-recommendations__arrow--right {
    margin-left: -18px !important;
    padding-left: 2px !important;
}

.cst-einstein-recommendations__arrow:hover {
    background: #f7f7f7 !important;
    border-color: #6f6f6f !important;
    color: #222222 !important;
}

.cst-einstein-recommendations__arrow:active {
    background: #f1f1f1 !important;
    border-color: #6a6a6a !important;
    color: #111111 !important;
}

.cst-einstein-recommendations__arrow:focus,
.cst-einstein-recommendations__arrow:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile */
@media (max-width: 768px) {
    .cst-einstein-recommendations__card {
        flex: 0 0 calc((100% - 16px) / 2.5) !important;
        min-width: calc((100% - 16px) / 2.5) !important;
        max-width: calc((100% - 16px) / 2.5) !important;
        width: calc((100% - 16px) / 2.5) !important;
    }

    .cst-einstein-recommendations__card .product-tile .image-container,
    .cst-einstein-recommendations__card .product-tile .image-container a {
        height: 120px !important;
        max-height: 120px !important;
        padding-bottom: 0 !important;
    }

    .cst-einstein-recommendations
        .cst-einstein-recommendations__card
        .product-tile
        .image-container
        a
        .tile-image {
        height: 120px !important;
        max-height: 120px !important;
    }

    .cst-einstein-recommendations__arrow {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 22px !important;
        margin-top: 125px !important;
        border-radius: 7px !important;
    }

    .cst-einstein-recommendations__arrow--left {
        margin-right: -16px !important;
        padding-left: 1px !important;
    }

    .cst-einstein-recommendations__arrow--right {
        margin-left: -16px !important;
        padding-left: 2px !important;
    }
}