.wcsu-upsells {
--wcsu-ink: var(--wp--preset--color--contrast, #17211b);
--wcsu-muted: var(--wp--preset--color--secondary, #68756d);
--wcsu-line: color-mix(in srgb, var(--wcsu-ink) 14%, transparent);
--wcsu-surface: var(--wp--preset--color--base, #fffdf8);
--wcsu-accent: var(--wp--preset--color--primary, var(--wc-primary, #2f6f4e));
--wcsu-accent-dark: var(--wp--preset--color--primary, var(--wc-primary, #1f5139));
--wcsu-badge: #e35d36;
margin: 18px 0;
padding: clamp(12px, 2vw, 18px);
border-radius: 18px;
border: 1px solid var(--wcsu-line);
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--wcsu-accent) 10%, transparent), transparent 34%),
var(--wcsu-surface);
box-shadow: 0 10px 28px rgba(23, 33, 27, 0.06);
color: var(--wcsu-ink);
clear: both;
}
.wcsu-upsells *,
.wcsu-upsells *::before,
.wcsu-upsells *::after {
box-sizing: border-box;
}
.wcsu-head {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: baseline;
margin-bottom: 12px;
}
.wcsu-kicker {
display: inline-flex;
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--wcsu-accent) 12%, transparent);
color: var(--wcsu-accent-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wcsu-head h2 {
flex: 1 1 220px;
margin: 0;
font-size: clamp(18px, 2.1vw, 24px);
line-height: 1.15;
color: var(--wcsu-ink);
}
.wcsu-head p {
flex: 1 1 100%;
max-width: 620px;
margin: 0;
color: var(--wcsu-muted);
font-size: 13px;
line-height: 1.35;
}
.wcsu-list--cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
gap: 10px;
}
.wcsu-product {
display: flex;
min-width: 0;
overflow: hidden;
border: 1px solid var(--wcsu-line);
border-radius: 14px;
background: color-mix(in srgb, var(--wcsu-surface) 88%, #ffffff);
box-shadow: 0 8px 18px rgba(23, 33, 27, 0.05);
}
.wcsu-product__image {
display: block;
flex: 0 0 clamp(74px, 32%, 106px);
min-height: 100%;
background: color-mix(in srgb, var(--wcsu-surface) 82%, #000 6%);
overflow: hidden;
}
.wcsu-product__image img {
width: 100%;
height: 100%;
min-height: 104px;
object-fit: cover;
transition: transform 0.22s ease;
}
.wcsu-product:hover .wcsu-product__image img {
transform: scale(1.035);
}
.wcsu-product__body {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
justify-content: center;
padding: 10px;
}
.wcsu-product h3 {
margin: 5px 0 4px;
font-size: 14px;
line-height: 1.22;
}
.wcsu-product h3 a,
.wcsu-checkbox-item a {
color: inherit;
text-decoration: none;
}
.wcsu-price {
margin-bottom: 8px;
color: var(--wcsu-muted);
font-size: 13px;
line-height: 1.25;
}
.wcsu-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 3px 7px;
border-radius: 999px;
background: rgba(227, 93, 54, 0.11);
color: var(--wcsu-badge);
font-size: 11px;
font-weight: 800;
line-height: 1.15;
}
.wcsu-add-single,
.wcsu-add-selected,
.wcsu-modal-open,
.wcsu-product-link {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 34px;
width: 100%;
border: 0;
border-radius: 999px;
padding: 8px 12px;
background: var(--wcsu-accent);
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.wcsu-product-link {
background: color-mix(in srgb, var(--wcsu-ink) 9%, var(--wcsu-surface));
color: var(--wcsu-ink);
}
.wcsu-add-single:hover,
.wcsu-add-selected:hover,
.wcsu-modal-open:hover {
background: var(--wcsu-accent-dark);
color: #fff;
transform: translateY(-1px);
}
.wcsu-add-single:disabled,
.wcsu-add-selected:disabled {
opacity: 0.7;
cursor: wait;
}
.wcsu-list--checkbox {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.wcsu-checkbox-item {
display: grid;
grid-template-columns: auto 46px minmax(130px, 1fr) auto;
flex: 1 1 260px;
gap: 9px;
align-items: center;
padding: 8px;
border: 1px solid var(--wcsu-line);
border-radius: 13px;
background: color-mix(in srgb, var(--wcsu-surface) 90%, #ffffff);
cursor: pointer;
}
.wcsu-checkbox-item.is-disabled {
opacity: 0.7;
cursor: default;
}
.wcsu-checkbox-item input {
width: 18px;
height: 18px;
accent-color: var(--wcsu-accent);
}
.wcsu-checkbox-item__image img {
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 10px;
}
.wcsu-checkbox-item__content {
display: grid;
gap: 2px;
min-width: 0;
font-size: 13px;
}
.wcsu-checkbox-item__content strong {
color: var(--wcsu-ink);
line-height: 1.2;
}
.wcsu-checkbox-item__content > span:not(.wcsu-badge) {
color: var(--wcsu-muted);
}
.wcsu-add-selected,
.wcsu-modal-open {
width: auto;
max-width: 280px;
}
.wcsu-modal[aria-hidden="true"] {
display: none;
}
.wcsu-modal[aria-hidden="false"] {
position: fixed;
z-index: 999999;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
}
.wcsu-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 22, 18, 0.62);
backdrop-filter: blur(4px);
}
.wcsu-modal__panel {
position: relative;
z-index: 1;
width: min(760px, 100%);
max-height: min(680px, 88vh);
overflow: auto;
padding: clamp(14px, 2.5vw, 22px);
border-radius: 20px;
background: var(--wcsu-surface);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}
.wcsu-modal__close {
margin: 0 0 12px auto;
display: flex;
border: 0;
border-radius: 999px;
padding: 7px 11px;
background: color-mix(in srgb, var(--wcsu-ink) 9%, var(--wcsu-surface));
color: var(--wcsu-ink);
cursor: pointer;
}
body.wcsu-modal-active {
overflow: hidden;
}
.wcsu-message {
margin-top: 10px;
padding: 8px 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--wcsu-accent) 10%, transparent);
color: var(--wcsu-accent-dark);
font-size: 13px;
font-weight: 700;
}
.wcsu-message:empty,
.wcsu-message[hidden] {
display: none;
}
.wcsu-message.is-error {
background: rgba(227, 93, 54, 0.1);
color: #9a341f;
}
@supports not (color: color-mix(in srgb, #000 10%, transparent)) {
.wcsu-upsells {
--wcsu-line: rgba(23, 33, 27, 0.12);
background: var(--wcsu-surface);
}
.wcsu-kicker,
.wcsu-message {
background: rgba(47, 111, 78, 0.1);
}
.wcsu-product,
.wcsu-checkbox-item {
background: #fff;
}
}
@media (max-width: 640px) {
.wcsu-upsells {
border-radius: 16px;
}
.wcsu-list--cards {
grid-template-columns: 1fr;
}
.wcsu-product__image {
flex-basis: 78px;
}
.wcsu-product__image img {
min-height: 96px;
}
.wcsu-checkbox-item {
grid-template-columns: auto 44px minmax(0, 1fr);
flex-basis: 100%;
}
.wcsu-checkbox-item > a {
grid-column: 1 / -1;
}
.wcsu-checkbox-item__image img {
width: 44px;
height: 44px;
}
}