/* ── Suggested Products ──────────────────────────────────────────────────── */
.product-suggested__container {
	flex: 100%;
	margin-bottom: 20px;
}

.product-suggested__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
	color: #2D3F59!important;
}

.product-suggested__title .suggested-sale {
    color: #4DC2E0!important;
    text-decoration: none;
}

.product-suggested__title .suggested-badge {
    background-color: #4DC2E0!important;
    color: #FFF!important;
	border-radius: 6px;
	padding: 4px 12px;
	margin-right: 12px;
}


/* List */
.product-suggested__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Item row */
.product-suggested__item {
    cursor: pointer;
    display: flex;
    background: #fff;
    padding: 10px;
    position: relative;
  	box-shadow: 0 0 0 1px #E2E2E2;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


.product-suggested__item:last-child {
    margin-bottom: 0;
}

.product-suggested__item:hover {
    box-shadow: 0 0 0 2.5px #4EC3E1;
}

.product-suggested__item:has(input[type="checkbox"]:checked) {
    box-shadow: 0 0 0 2.5px #4EC3E1;
    background: #F6FDFF;
}

/* Inner layout */
.product-suggested__item-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* Round checkbox */
.product-suggested__checkbox-round {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.product-suggested__checkbox-round label {
    pointer-events: none;
    background-color: #fff;
    border: 1.5px solid #D7D7D8;
    border-radius: 50%;
    height: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    display: block !important;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.product-suggested__checkbox-round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 5px;
    left: 6px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 10px;
    transition: opacity 0.15s ease;
}

.product-suggested__checkbox-round input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.product-suggested__checkbox-round input[type="checkbox"]:checked + label {
    background-color: var(--kw-sp-checkbox, #34aeeb);
    border-color: var(--kw-sp-checkbox, #34aeeb);
}

.product-suggested__checkbox-round input[type="checkbox"]:checked + label:after {
    opacity: 1;
}

/* Image */
.product-suggested__item-image {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 7px;
    overflow: hidden;
    background: #F7F7F7;
}

.product-suggested__item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.product-suggested__item-content {
    flex-grow: 1;
    min-width: 0;
}

.product-suggested__item-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #39383D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price */
.product-suggested__item-price {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #27282A;
}

.product-suggested__item-price del {
    color: #2D3F5957;
    font-weight: 400;
    font-size: 13px;
}

.product-suggested__sale-price {
    color: #2D3F59;
}

.product-suggested__discount-badge {
    background-color: #FEEAC0;
    color: #A77A1D;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.product-suggested__saving {
    font-size: 12px;
    color: var(--kw-sp-saving-text, var(--fs-color-secondary));
    font-weight: 600;
    margin-top: 2px;
}

/* Add button */
.product-suggested__add-btn {
	display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--kw-sp-btn-bg, var(--fs-color-primary, #27282A));
    color: var(--kw-sp-btn-text, #fff);
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    z-index: 1;
    margin: 0;
}

.product-suggested__add-btn.active {
    background: var(--kw-sp-btn-active-bg, var(--fs-color-secondary));
    color: var(--kw-sp-btn-active-text, #fff);
}

.product-suggested__add-btn:hover {
    opacity: 0.85;
}

/* Variation select */
.product-suggested__item-options {
    margin-top: 6px;
}

.product-suggested__item-options select {
    font-size: 12px;
    margin-bottom: 0;
    padding: 4px 8px;
    border: 1px solid #E3E3E3;
    border-radius: 7px;
    background: #fff;
}

/* Total */
.product-suggested__total {
    margin-top: 8px;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 849px) { 

    .product-suggested__item-image {
        width: 56px;
        height: 56px;
    }

    .product-suggested__item-name {
        font-size: 13px;
    }

    .product-suggested__item-price {
        font-size: 14px;
    }

    .product-suggested__checkbox-round {
        display: none;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 549px) {

    .product-suggested__item {
        padding: 8px;
    }

    .product-suggested__item-inner {
        gap: 8px;
    }

    .product-suggested__item-image {
        width: 48px;
        height: 48px;
    }

    .product-suggested__item-name {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}