<style>
body.woocommerce-cart {
--sc-accent: #179252;
--sc-accent-dark: #084D40;
--sc-accent-tint: #eaf5ef;
--sc-text: #1a1a1a;
--sc-text-muted: #616161;
--sc-border: #dedede;
--sc-border-light: #ebebeb;
--sc-bg-card: #f6faf8;
--sc-radius: 8px;
--sc-focus-ring: 0 0 0 1px var(--sc-accent);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--sc-text);
}
body.woocommerce-cart .elementor-element-13213a4b * { box-sizing: border-box; }
/* ============================================================
1. LAYOUT — left items / right sticky summary, like checkout
============================================================ */
body.woocommerce-cart .elementor-element-13213a4b > .e-con-inner {
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start !important;
gap: 48px !important;
margin: 0 auto !important;
width: 100%;
}
/* wd-negative-gap pulls columns with negative margins — neutralize */
body.woocommerce-cart .elementor-element-13213a4b.wd-negative-gap > .e-con-inner > .e-con {
margin: 0 !important;
padding: 0 !important;
}
/* Left column — gift card banner + cart table */
body.woocommerce-cart .elementor-element-6949865a {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 62%;
}
/* Right column — summary card, sticky (same treatment as checkout summary) */
body.woocommerce-cart .elementor-element-235e0d69 {
flex: 0 0 38% !important;
width: 38% !important;
position: sticky !important;
top: 24px !important;
background: var(--sc-bg-card) !important;
border: 1px solid var(--sc-border-light) !important;
border-radius: 12px !important;
padding: 8px 24px 24px !important;
}
/* ============================================================
2. GIFT CARD (Dāvanu karte) — checkout's quiet banner + card
============================================================ */
/* Banner — one clean white card, gift icon, everything on one line */
body.woocommerce-cart .ywgc_have_code .woocommerce-info {
display: flex !important;
align-items: center;
gap: 8px;
background: #fff !important;
border: 1px solid var(--sc-border-light) !important;
border-left: 3px solid var(--sc-accent) !important;
border-radius: var(--sc-radius) !important;
color: var(--sc-text) !important;
font-size: 14px !important;
line-height: 1.4;
padding: 14px 16px !important;
margin: 0 0 12px !important;
box-shadow: none !important;
width: 100%;
}
/* Kill theme's notice icon, replace with a gift */
body.woocommerce-cart .ywgc_have_code .woocommerce-info::before {
content: "🎁" !important;
display: inline-block !important;
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
font-size: 16px;
line-height: 1;
background: none !important;
border: 0 !important;
}
body.woocommerce-cart .ywgc_have_code .woocommerce-info::after { content: none !important; display: none !important; }
body.woocommerce-cart .ywgc_have_code .woocommerce-info a,
body.woocommerce-cart .ywgc-show-giftcard {
color: var(--sc-accent) !important;
text-decoration: underline;
font-weight: 600;
white-space: nowrap;
}
/* Enter-code card — white, bordered; hint on top, input + button in one flex row */
body.woocommerce-cart .ywgc_enter_code {
background: #fff;
border: 1px solid var(--sc-border-light);
border-radius: var(--sc-radius);
padding: 16px 20px !important;
margin: 0 0 12px !important;
max-width: 100% !important;
}
/* Plugin's inline "position:relative" wrapper — no stray offsets inside the card */
body.woocommerce-cart .ywgc_enter_code > div[style] {
margin: 0 !important;
left: auto !important;
right: auto !important;
}
body.woocommerce-cart .ywgc_enter_code > div {
display: flex;
flex-wrap: wrap;
gap: 10px;
position: static !important;
}
body.woocommerce-cart .ywgc_enter_code > div > p:not(.form-row) {
flex: 1 1 100%;
font-size: 13px;
color: var(--sc-text-muted);
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-cart .ywgc_enter_code .form-row {
float: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
body.woocommerce-cart .ywgc_enter_code .form-row-first {
flex: 0 1 50%;
max-width: 50% !important;
min-width: 180px;
}
body.woocommerce-cart .ywgc_enter_code .form-row-last { flex: 0 0 auto; }
body.woocommerce-cart .ywgc_enter_code .clear { display: none; }
body.woocommerce-cart .ywgc_enter_code .input-text {
height: 48px;
width: 100%;
padding: 12px 14px !important;
font-size: 14px !important;
color: var(--sc-text) !important;
background: #fff !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
box-shadow: none !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.woocommerce-cart .ywgc_enter_code .input-text:focus {
border-color: var(--sc-accent) !important;
box-shadow: var(--sc-focus-ring) !important;
outline: none !important;
}
/* Apply button — quiet outline, same as checkout secondary buttons */
body.woocommerce-cart .ywgc_apply_gift_card_button {
width: auto;
padding: 0 24px;
height: 48px;
background: #fff !important;
color: var(--sc-text) !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
transition: border-color .15s ease;
}
body.woocommerce-cart .ywgc_apply_gift_card_button:hover { border-color: var(--sc-text) !important; }
/* ============================================================
3. CART TABLE — clean line items, no table chrome
============================================================ */
body.woocommerce-cart .woocommerce-cart-form .shop_table {
border: 0 !important;
background: transparent !important;
font-size: 14px;
margin-bottom: 0;
}
/* Column headers — tiny, muted, single underline */
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
font-size: 12px !important;
font-weight: 500 !important;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--sc-text-muted) !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--sc-border-light) !important;
padding: 0 8px 10px !important;
text-align: left;
}
/* Cells — airy rows, hairline separators only */
body.woocommerce-cart .woocommerce-cart-form .shop_table td {
border: 0 !important;
border-bottom: 1px solid var(--sc-border-light) !important;
background: transparent !important;
padding: 18px 8px !important;
vertical-align: middle !important;
}
/* Thumbnail — small, square, bordered (matches checkout summary thumbs) */
body.woocommerce-cart .woocommerce-cart-form .product-thumbnail { width: 88px; }
body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
width: 72px !important;
height: 72px !important;
max-width: none !important;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
background: #fff;
display: block;
}
/* Product name + variation */
body.woocommerce-cart .woocommerce-cart-form .product-name a {
font-size: 14px;
font-weight: 500;
color: var(--sc-text) !important;
line-height: 1.35;
text-decoration: none;
}
body.woocommerce-cart .woocommerce-cart-form .product-name a:hover { color: var(--sc-accent) !important; }
body.woocommerce-cart .woocommerce-cart-form ul.variation {
margin: 4px 0 0 !important;
font-size: 12px;
color: var(--sc-text-muted);
}
body.woocommerce-cart .woocommerce-cart-form ul.variation p { display: inline; margin: 0; }
body.woocommerce-cart .woocommerce-cart-form ul.variation .item-variation-name { font-weight: 500; }
/* Money — neutral, not theme green; subtotal slightly stronger */
body.woocommerce-cart .woocommerce-cart-form .product-price .amount,
body.woocommerce-cart .woocommerce-cart-form .product-price .woocommerce-Price-currencySymbol { color: var(--sc-text) !important; }
body.woocommerce-cart .woocommerce-cart-form .product-subtotal .amount,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal .woocommerce-Price-currencySymbol {
color: var(--sc-text) !important;
font-weight: 600;
}
/* Remove × — quiet gray, red on hover (same as checkout).
Theme adds its own icon via ::before/::after on top of the "×" text
node → two ×. Keep the text, kill the pseudo icon. */
body.woocommerce-cart .woocommerce-cart-form .product-remove .remove::before,
body.woocommerce-cart .woocommerce-cart-form .product-remove .remove::after {
content: none !important;
display: none !important;
}
body.woocommerce-cart .woocommerce-cart-form .product-remove .remove {
width: 28px;
height: 28px;
line-height: 26px;
font-size: 16px !important;
color: #b5b5b5 !important;
background: transparent !important;
border: 1px solid transparent;
border-radius: 50%;
transition: color .15s ease, border-color .15s ease;
}
body.woocommerce-cart .woocommerce-cart-form .product-remove .remove:hover {
color: #d72c0d !important;
border-color: #d72c0d;
background: transparent !important;
}
/* Quantity — Shopify pill stepper */
body.woocommerce-cart .woocommerce-cart-form .quantity {
display: inline-flex !important;
align-items: center;
border: 1px solid var(--sc-border);
border-radius: var(--sc-radius);
background: #fff;
overflow: hidden;
height: 40px;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .btn {
width: 34px;
height: 38px;
border: 0 !important;
background: transparent !important;
color: var(--sc-text-muted);
font-size: 15px;
line-height: 1;
padding: 0;
cursor: pointer;
transition: color .15s ease, background .15s ease;
border-radius: 8px !important;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .btn:hover {
color: var(--sc-text);
background: #f6f6f7 !important;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .qty {
width: 36px;
height: 38px !important;
border: 0 !important;
padding: 0 !important;
text-align: center;
font-size: 14px !important;
font-weight: 500;
color: var(--sc-text);
background: transparent !important;
box-shadow: none !important;
-moz-appearance: textfield;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ============================================================
4. ACTIONS ROW — coupon inline, quiet
============================================================ */
body.woocommerce-cart .wd-cart-action-row td.actions {
border-bottom: 0 !important;
padding: 18px 0 0 !important;
}
body.woocommerce-cart .cart-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body.woocommerce-cart .cart-actions .coupon {
display: flex;
gap: 10px;
flex: 1 1 auto;
max-width: 440px;
}
body.woocommerce-cart .cart-actions .coupon .input-text {
flex: 1 1 auto;
height: 48px;
padding: 12px 14px !important;
font-size: 14px !important;
color: var(--sc-text) !important;
background: #fff !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
box-shadow: none !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.woocommerce-cart .cart-actions .coupon .input-text:focus {
border-color: var(--sc-accent) !important;
box-shadow: var(--sc-focus-ring) !important;
outline: none !important;
}
body.woocommerce-cart .cart-actions .coupon .button {
flex: 0 0 auto;
height: 48px;
padding: 0 20px;
background: #fff !important;
color: var(--sc-text) !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: none !important;
box-shadow: none !important;
transition: border-color .15s ease;
}
body.woocommerce-cart .cart-actions .coupon .button:hover { border-color: var(--sc-text) !important; }
/* Update-cart button — theme already hides it (wd-hide); keep it dead */
body.woocommerce-cart .cart-actions button[name="update_cart"] { display: none !important; }
/* ============================================================
5. SUMMARY CARD (Groza kopsavilkums) — checkout summary look
============================================================ */
/* Kill the theme's own white box — the green Elementor column IS the card.
Woodmart's wd-layout-2 paints .cart-totals-inner with bg + padding + shadow. */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-totals-inner,
body.woocommerce-cart .cart-totals-inner.wd-layout-2 {
width: 100% !important;
float: none !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
body.woocommerce-cart .cart_totals h2 {
font-size: 18px !important;
font-weight: 600 !important;
color: var(--sc-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 16px 0 8px !important;
text-align: left !important;
}
body.woocommerce-cart .cart_totals .shop_table {
border: 0 !important;
border-collapse: collapse !important; /* th+td top borders merge into ONE line */
background: transparent !important;
font-size: 14px;
margin: 0 !important;
box-shadow: none !important;
}
body.woocommerce-cart .cart_totals .shop_table tbody,
body.woocommerce-cart .cart_totals .shop_table tr {
border: 0 !important;
background: transparent !important;
}
body.woocommerce-cart .cart_totals .shop_table th,
body.woocommerce-cart .cart_totals .shop_table td {
border: 0 !important;
background: transparent !important;
padding: 10px 0 !important;
}
body.woocommerce-cart .cart_totals .shop_table th {
font-weight: 400 !important;
color: var(--sc-text-muted) !important;
text-align: left;
vertical-align: top;
width: 30%;
}
body.woocommerce-cart .cart_totals .shop_table td { text-align: right; }
/* Money neutral inside the card — green only where it earns it */
body.woocommerce-cart .cart_totals .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals .woocommerce-Price-currencySymbol { color: var(--sc-text) !important; }
/* Shipping methods — clean radio list, accent dots */
body.woocommerce-cart .cart_totals #shipping_method {
list-style: none;
margin: 0 0 8px;
padding: 0;
text-align: left;
}
body.woocommerce-cart .cart_totals #shipping_method li {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
margin: 0;
}
body.woocommerce-cart .cart_totals #shipping_method input.shipping_method {
width: 18px;
height: 18px;
margin: 0;
flex: 0 0 18px;
accent-color: var(--sc-accent);
cursor: pointer;
}
body.woocommerce-cart .cart_totals #shipping_method label {
font-size: 13px;
color: var(--sc-text);
margin: 0;
cursor: pointer;
line-height: 1.4;
}
body.woocommerce-cart .cart_totals #shipping_method label .amount { font-weight: 600; }
/* "PiegādeShipment" fix — same untranslated th as checkout */
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals th { font-size: 0 !important; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals th::before {
content: "Piegāde";
font-size: 14px;
}
body.woocommerce-cart .woocommerce-shipping-destination {
font-size: 12px;
color: var(--sc-text-muted);
text-align: left;
margin: 4px 0 8px !important;
}
body.woocommerce-cart .woocommerce-shipping-destination strong { color: var(--sc-text); font-weight: 500; }
/* Shipping calculator — quiet link, tidy collapsible form */
body.woocommerce-cart .shipping-calculator-button {
font-size: 13px;
color: var(--sc-accent) !important;
text-decoration: underline;
font-weight: 500;
}
body.woocommerce-cart .shipping-calculator-form { text-align: left; margin-top: 10px; }
body.woocommerce-cart .shipping-calculator-form .form-row {
float: none !important;
width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
body.woocommerce-cart .shipping-calculator-form label {
font-size: 13px;
font-weight: 400;
color: var(--sc-text-muted);
margin-bottom: 4px;
display: block;
}
body.woocommerce-cart .shipping-calculator-form .input-text,
body.woocommerce-cart .shipping-calculator-form select {
height: 44px;
width: 100%;
padding: 10px 14px !important;
font-size: 14px !important;
color: var(--sc-text) !important;
background: #fff !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
box-shadow: none !important;
}
body.woocommerce-cart .shipping-calculator-form .input-text:focus,
body.woocommerce-cart .shipping-calculator-form select:focus {
border-color: var(--sc-accent) !important;
box-shadow: var(--sc-focus-ring) !important;
outline: none !important;
}
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
height: 44px;
padding: 0 20px;
background: #fff !important;
color: var(--sc-text) !important;
border: 1px solid var(--sc-border) !important;
border-radius: var(--sc-radius) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: none !important;
box-shadow: none !important;
}
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover { border-color: var(--sc-text) !important; }
/* Grand total — single separator line lives on the ROW (collapse merges it) */
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
border: 0 !important;
border-top: 1px solid var(--sc-border-light) !important;
padding-top: 16px !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--sc-text) !important;
}
body.woocommerce-cart .cart_totals .order-total td .amount,
body.woocommerce-cart .cart_totals .order-total td .woocommerce-Price-currencySymbol { color: var(--sc-accent) !important; }
body.woocommerce-cart .cart_totals .order-total .includes_tax {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--sc-text-muted);
}
body.woocommerce-cart .cart_totals .order-total .includes_tax .amount,
body.woocommerce-cart .cart_totals .order-total .includes_tax .woocommerce-Price-currencySymbol {
color: var(--sc-text-muted) !important;
font-size: 12px;
font-weight: 400;
}
/* ============================================================
6. CHECKOUT CTA — same button as checkout's place-order
============================================================ */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; margin-top: 8px; }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100% !important;
height: 56px;
margin: 0 !important;
background: var(--sc-accent) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border: 0 !important;
border-radius: var(--sc-radius) !important;
box-shadow: none !important;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button::after {
content: "→";
font-weight: 400;
transition: transform .15s ease;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--sc-accent-dark) !important; }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover::after { transform: translateX(3px); }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:active { transform: scale(.995); }
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus-visible {
outline: 2px solid var(--sc-accent);
outline-offset: 2px;
}
/* Reassurance line under the button — same as checkout */
body.woocommerce-cart .wc-proceed-to-checkout::after {
content: "🔒 Droši maksājumi · SSL šifrēts savienojums";
display: block;
text-align: center;
font-size: 12px;
color: var(--sc-text-muted);
margin-top: 12px;
}
/* ============================================================
7. RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
body.woocommerce-cart .elementor-element-13213a4b > .e-con-inner {
flex-direction: column !important;
gap: 24px !important;
}
body.woocommerce-cart .elementor-element-6949865a { max-width: 100% !important; }
body.woocommerce-cart .elementor-element-235e0d69 {
position: static !important;
width: 100% !important;
flex: 1 1 auto !important;
}
}
@media (max-width: 767px) {
/* 16px inputs stop iOS Safari auto-zoom */
body.woocommerce-cart .ywgc_enter_code .input-text,
body.woocommerce-cart .cart-actions .coupon .input-text,
body.woocommerce-cart .shipping-calculator-form .input-text,
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .woocommerce-cart-form .quantity .qty { font-size: 16px !important; }
/* Stacked cart rows (theme's shop_table_responsive) — card per item */
body.woocommerce-cart .woocommerce-cart-form .shop_table thead { display: none !important; }
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item {
display: block;
position: relative;
background: #fff;
border: 1px solid var(--sc-border-light);
border-radius: 12px;
padding: 16px 16px 12px 104px;
margin-bottom: 12px;
min-height: 104px;
}
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 0 !important;
padding: 4px 0 !important;
text-align: right;
}
/* Data labels from data-title attributes */
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td[data-title]::before {
content: attr(data-title);
font-size: 12px;
font-weight: 500;
color: var(--sc-text-muted);
}
/* Thumbnail pinned left */
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item .product-thumbnail {
position: absolute;
top: 16px;
left: 16px;
padding: 0 !important;
}
/* Remove × pinned top-right */
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item .product-remove {
position: absolute;
top: 8px;
right: 8px;
padding: 0 !important;
}
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item .product-name {
justify-content: flex-start;
text-align: left;
padding-right: 24px !important;
}
body.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item .product-name::before { content: none; }
/* Gift card + coupon stack */
body.woocommerce-cart .ywgc_enter_code .form-row-first,
body.woocommerce-cart .ywgc_enter_code .form-row-last {
flex: 1 1 100%;
max-width: 100% !important;
}
body.woocommerce-cart .ywgc_apply_gift_card_button { width: 100%; }
body.woocommerce-cart .cart-actions { flex-direction: column; align-items: stretch; }
body.woocommerce-cart .cart-actions .coupon { max-width: 100%; }
body.woocommerce-cart .elementor-element-235e0d69 { padding: 4px 16px 16px !important; }
}
</style>
You may be interested in…

Your shopping cart is empty.
<style>
body.woocommerce-cart {
--sc-accent: #179252;
--sc-accent-dark: #084D40;
--sc-accent-tint: #eaf5ef;
--sc-text: #1a1a1a;
--sc-text-muted: #616161;
--sc-border: #dedede;
--sc-border-light: #ebebeb;
--sc-bg-card: #f6faf8;
--sc-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--sc-text);
}
/* White canvas — match checkout, kill theme gray */
body.woocommerce-cart,
body.woocommerce-cart .website-wrapper,
body.woocommerce-cart .main-page-wrapper,
body.woocommerce-cart .wd-page-content,
body.woocommerce-cart .wd-content-area { background: #fff !important; }
/* ============================================================
1. CHECKOUT STEPS — quiet breadcrumb, green active step
============================================================ */
body.woocommerce-cart .wd-page-title {
background: none !important;
padding: 28px 0 8px !important;
margin-bottom: 0 !important;
}
body.woocommerce-cart .wd-page-title .wd-page-title-bg { display: none !important; }
body.woocommerce-cart .wd-checkout-steps {
justify-content: center;
gap: 6px;
}
body.woocommerce-cart .wd-checkout-steps li,
body.woocommerce-cart .wd-checkout-steps li a,
body.woocommerce-cart .wd-checkout-steps li span {
font-size: 14px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--sc-text-muted) !important;
transition: color .15s ease;
}
body.woocommerce-cart .wd-checkout-steps li a:hover span { color: var(--sc-text) !important; }
body.woocommerce-cart .wd-checkout-steps .step-active,
body.woocommerce-cart .wd-checkout-steps .step-active a,
body.woocommerce-cart .wd-checkout-steps .step-active span {
color: var(--sc-accent) !important;
font-weight: 600 !important;
}
/* ============================================================
2. EMPTY CART CARD — centered, faint green wash, soft border
============================================================ */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
max-width: 560px;
margin: 32px auto 72px;
padding: 48px 32px 44px;
background: var(--sc-bg-card);
border: 1px solid var(--sc-border-light);
border-radius: 12px;
text-align: center;
animation: sc-card-in .45s ease both;
}
/* Illustration — contained, gentle float */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block figure {
margin: 0 auto 8px;
animation: sc-rise .5s ease .05s both;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block figure img {
width: 240px !important;
height: auto !important;
filter: drop-shadow(0 12px 24px rgba(8, 77, 64, .10));
}
/* Headline — beats the inline rgb(1,0,0) color */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p {
margin: 20px 0 8px !important;
font-size: 22px !important;
line-height: 1.3;
color: var(--sc-text) !important;
animation: sc-rise .5s ease .12s both;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p strong { font-weight: 600; }
/* Reassurance line under headline — CSS-generated, no HTML change */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p::after {
content: "Diski, somas un viss pārējais golfam gaida tevi veikalā.";
display: block;
margin-top: 8px;
font-size: 14px;
font-weight: 400;
color: var(--sc-text-muted);
}
/* ============================================================
3. CTA BUTTON — same as checkout's place-order button
Beats inline orange background + 12px radius.
============================================================ */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-buttons {
margin-top: 24px;
animation: sc-rise .5s ease .2s both;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button {
width: auto !important;
min-width: 260px;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 56px;
padding: 0 32px !important;
background: var(--sc-accent) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
border: 0 !important;
border-radius: var(--sc-radius) !important;
box-shadow: none !important;
cursor: pointer;
transition: background .15s ease, transform .1s ease;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link::after {
content: "→";
font-weight: 400;
transition: transform .15s ease;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
background: var(--sc-accent-dark) !important;
color: #fff !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover::after { transform: translateX(3px); }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:active { transform: scale(.985); }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus-visible {
outline: 2px solid var(--sc-accent);
outline-offset: 2px;
}
/* ============================================================
4. ANIMATIONS — one staggered load, nothing else moves
============================================================ */
@keyframes sc-card-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@keyframes sc-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block figure,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-buttons { animation: none; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link::after { transition: none; }
}
/* ============================================================
5. MOBILE
============================================================ */
@media (max-width: 576px) {
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
margin: 16px 12px 48px;
padding: 36px 20px 32px;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block figure img { width: 190px !important; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p { font-size: 19px !important; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button { min-width: 100%; }
body.woocommerce-cart .wd-checkout-steps li,
body.woocommerce-cart .wd-checkout-steps li a,
body.woocommerce-cart .wd-checkout-steps li span { font-size: 12px !important; }
}
</style>