/**
 * Mini cart suggestions. Colours and type follow the home page design system:
 * #158347 primary, #E7FFCF primary tint, #2D3839 text, Onest.
 */
.cm-upsell {
    --cm-primary: #158347;
    --cm-tint: #E7FFCF;
    --cm-text: #2D3839;
    --cm-muted: #6B7678;
    --cm-line: #E6E9E9;
    list-style: none;
    font-family: "Onest", sans-serif;
}

/* The theme lays every mini cart row out as a flex row with 15px padding and draws
   the divider under each item; this row stacks its parts and keeps that padding. */
ul.woocommerce-mini-cart > li.cm-upsell {
    display: block;
    margin: 0;
    padding: 18px 15px 15px;
    border: 0;
}

/* the theme styles every mini cart <li> as a cart row */
.cart-widget-side .cm-upsell::before,
.cart-widget-side .cm-upsell::after {
    content: none;
}

.cm-upsell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cm-upsell-title {
    color: var(--cm-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
    /* a longer heading (English) wraps instead of pushing the arrows out */
    flex: 1 1 auto;
    min-width: 0;
}

.cm-upsell-nav {
    display: inline-flex;
    gap: 6px;
}

.cm-upsell .cm-upsell-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--cm-line);
    border-radius: 50%;
    background: #FFF;
    color: var(--cm-text);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.cm-upsell .cm-upsell-nav button:hover {
    border-color: var(--cm-primary);
    background: var(--cm-tint);
}

.cm-upsell .cm-upsell-nav button[disabled] {
    opacity: .35;
    cursor: default;
}

.cm-upsell .cm-upsell-nav button:hover[disabled] {
    border-color: var(--cm-line);
    background: #FFF;
}

/* no arrows when everything fits */
.cm-upsell.is-static .cm-upsell-nav {
    display: none;
}

.cm-upsell svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the row of cards: swipe on touch, arrows with a mouse */
.cm-upsell-track {
    display: flex;
    gap: 10px;
    margin: 0 -2px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cm-upsell-track::-webkit-scrollbar {
    display: none;
}

.cm-upsell-item {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 10px) / 2.3);
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--cm-line);
    border-radius: 14px;
    background: #FFF;
    scroll-snap-align: start;
}

.cm-upsell-image {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #F7F7F7;
    aspect-ratio: 1 / 1;
}

/* the product photos sit on white with wide margins: blend the white into the grey
   tile and enlarge them a little, so the product fills the tile */
.cm-upsell-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform: scale(1.18);
    transition: transform .3s ease;
}

.cm-upsell-item:hover .cm-upsell-image img {
    transform: scale(1.24);
}

/* "+" sits on the image corner, as a small pill button */
.cm-upsell .cm-upsell-add {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--cm-primary);
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 2px 6px rgba(45, 56, 57, .12);
    color: var(--cm-primary);
    transition: background .2s ease, color .2s ease;
}

.cm-upsell .cm-upsell-add:hover,
.cm-upsell .cm-upsell-add:focus-visible {
    background: var(--cm-primary);
    color: #FFF;
}

.cm-upsell .cm-upsell-add.is-busy {
    pointer-events: none;
}

.cm-upsell .cm-upsell-add.is-busy svg {
    animation: cm-upsell-spin .8s linear infinite;
}

@keyframes cm-upsell-spin {
    to { transform: rotate(360deg); }
}

.cm-upsell .cm-upsell-name {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.6em;
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cm-upsell .cm-upsell-name:hover {
    color: var(--cm-primary);
}

/* the theme prints "EUR / RSD"; let the two amounts sit on their own lines */
.cm-upsell-price,
.cm-upsell-price .amount {
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.cm-upsell-price .price-separator {
    display: none;
}

.cm-upsell-price .woocommerce-Price-amount {
    display: block;
}

.cm-upsell-price del,
.cm-upsell-price del .amount {
    color: var(--cm-muted);
    font-weight: 400;
}

.cm-upsell-price ins {
    background: none;
    text-decoration: none;
}

.cm-upsell-price .vat-label {
    display: none;
}

/* "-10%" add-on discount mark: on the suggestion cards and the cart / checkout carousel */
.cm-upsell-image {
    position: relative;
}

.cm-addon-off {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 3px 7px;
    border-radius: 999px;
    background: #FACA17;
    color: #2D3839;
    font-family: "Onest", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}

.cm-more-products .product-element-top {
    position: relative;
}

.cm-more-products .cm-addon-off {
    top: 12px;
    right: 12px;
    left: auto;
    font-size: 13px;
    padding: 4px 10px;
}