/**
 * Suggested Products — horizontal scroller layout only.
 *
 * Card appearance lives in product.css. Colours, fonts and spacing are
 * left to Divi's typography and decoration controls. Breakpoints match
 * Divi's own: tablet at 980px and phone at 767px. Arrow buttons are
 * desktop-only; touch devices swipe the track.
 */

.spruce-suggested-products__header {
    margin: 0 0 1rem 0;
}

.spruce-suggested-products__wrapper {
    position: relative;
    width: 100%;
}

.spruce-suggested-products__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25em;
    padding: 0.25em 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.spruce-suggested-products__track::-webkit-scrollbar {
    display: none;
}

.spruce-suggested-products__track .spruce-product-card {
    flex: 0 0 calc((100% - 3 * 1.25em) / 4);
    min-width: 0;
    scroll-snap-align: start;
}

.spruce-suggested-products__track--desktop-1 .spruce-product-card { flex-basis: 100%; }
.spruce-suggested-products__track--desktop-2 .spruce-product-card { flex-basis: calc((100% - 1 * 1.25em) / 2); }
.spruce-suggested-products__track--desktop-3 .spruce-product-card { flex-basis: calc((100% - 2 * 1.25em) / 3); }
.spruce-suggested-products__track--desktop-4 .spruce-product-card { flex-basis: calc((100% - 3 * 1.25em) / 4); }

@media (max-width: 980px) {
    .spruce-suggested-products__track--tablet-1 .spruce-product-card { flex-basis: 100%; }
    .spruce-suggested-products__track--tablet-2 .spruce-product-card { flex-basis: calc((100% - 1 * 1.25em) / 2); }
    .spruce-suggested-products__track--tablet-3 .spruce-product-card { flex-basis: calc((100% - 2 * 1.25em) / 3); }
    .spruce-suggested-products__track--tablet-4 .spruce-product-card { flex-basis: calc((100% - 3 * 1.25em) / 4); }
}

@media (max-width: 767px) {
    /*
     * One card fills most of the track; a sliver of the next card stays
     * visible so swipe is obvious. This matches maple_shop on phone and
     * overrides the Visible Cards control — two equal cards are too tight.
     */
    .spruce-suggested-products__track .spruce-product-card,
    .spruce-suggested-products__track--phone-1 .spruce-product-card,
    .spruce-suggested-products__track--phone-2 .spruce-product-card,
    .spruce-suggested-products__track--phone-3 .spruce-product-card,
    .spruce-suggested-products__track--phone-4 .spruce-product-card {
        flex-basis: calc(100% - 3.5em);
    }
}

.spruce-suggested-products__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: currentColor;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.spruce-suggested-products__control svg {
    display: block;
}

.spruce-suggested-products__control--left {
    left: 10px;
}

.spruce-suggested-products__control--right {
    right: 10px;
}

.spruce-suggested-products__control.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 980px) {
    .spruce-suggested-products__control {
        display: none !important;
    }
}