/* ============================================================ WooCommerce styling — single product, cart, checkout, account Reuses the Everyday Gadgets design tokens from style.css. Loaded only on shop-type pages to keep other pages light. ============================================================ */ .woo-main { padding: calc(var(--nav-h) + 28px) 0 70px; } .woo-main .container { max-width: var(--maxw); } /* breadcrumb */ .woocommerce-breadcrumb { color: var(--ink-soft); font-size: .9rem; margin-bottom: 18px; } .woocommerce-breadcrumb a { color: var(--purple); text-decoration: none; } /* Stock badge: theme colour when available, red when not. Meta row (SKU/Category/Brand) removed via hook — hidden here too as a backstop. */ .single-product .product_meta { display: none !important; } .single-product p.stock { font-weight: 700; font-size: .95rem; } .single-product p.stock.in-stock { color: var(--purple); } .single-product p.stock.out-of-stock { color: #C0392B; } /* ---------- Single product ---------- */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 44px; row-gap: 30px; align-items: start; } /* Explicit placement so parts never land in the wrong cell: gallery top-left, summary top-right, tabs + related full width below. */ .single-product div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; } .single-product div.product .summary.entry-summary { grid-column: 2; grid-row: 1; } .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .upsells { grid-column: 1 / -1; } .single-product div.product .woocommerce-product-gallery { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); min-width: 0; } .single-product div.product .woocommerce-product-gallery__wrapper img { width: 100%; height: auto; } .single-product div.product .product_title { font-family: var(--font-head); font-size: 2rem; line-height: 1.15; margin: 4px 0 10px; } .single-product .price, .single-product div.product p.price { color: var(--purple); font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; margin: 6px 0 14px; } .single-product .woocommerce-product-details__short-description { color: var(--ink-soft); margin-bottom: 18px; } .single-product .cart .quantity input.qty { width: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--font-body); } .single-product .single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: var(--green) !important; color: var(--ink) !important; font-family: var(--font-head); font-weight: 700; border: none; border-radius: 50px; padding: 14px 26px; cursor: pointer; transition: transform .15s var(--ease), background .2s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .single-product .single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover { background: var(--green-dark) !important; transform: translateY(-2px); } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--purple) !important; color: #fff !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #6a52e0 !important; } /* tabs / description */ .woocommerce-tabs ul.tabs { padding: 0; margin: 36px 0 0; border: none; } .woocommerce-tabs ul.tabs li { background: transparent; border: none; border-radius: 0; margin: 0 22px 0 0; } .woocommerce-tabs ul.tabs li a { font-family: var(--font-head); font-weight: 700; color: var(--ink-soft); padding: 10px 0; } .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 3px solid var(--green); } .woocommerce-tabs .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-top: 16px; } .woocommerce-tabs .panel h2 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 10px; } /* Frequently Bought Together (renamed related products) */ .related.products, .up-sells.products, .cross-sells { margin-top: 50px; } .related.products > h2, .up-sells.products > h2 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 18px; } .woocommerce ul.products, .related.products ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; } /* the EG product-card already styles content-product output */ .woocommerce ul.products .product-card { width: 100%; } /* ---------- Cart & checkout ---------- */ .woocommerce table.shop_table { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .woocommerce table.shop_table th { font-family: var(--font-head); } .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce form.checkout_coupon, .woocommerce-info, .woocommerce-message { border-radius: var(--radius); border: 1px solid var(--line); } .woocommerce-info { border-top-color: var(--purple); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection { border: 1px solid var(--line); border-radius: 12px; padding: 12px; } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: var(--bg-soft); border-radius: var(--radius); } /* ---------- Reviews (single product) ---------- */ /* Add-to-cart + WhatsApp pills: identical height, side by side, aligned. */ .eg-wa-order { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 0; height: 50px; padding: 0 26px; border-radius: 50px; background: #25D366; color: #fff !important; font-weight: 700; font-size: .95rem; line-height: 1; } .eg-wa-order:hover { background: #1EBE59; } .single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .single-product form.cart .single_add_to_cart_button { height: 50px; padding: 0 26px; border-radius: 50px; font-size: .95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .single-product form.cart .quantity input.qty { height: 50px; } .single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .single-product .woocommerce-review-link { font-size: .88rem; color: var(--purple); } #reviews.woocommerce-Reviews { margin-top: 10px; } #reviews .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } #reviews .commentlist li .comment_container { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; } #reviews .commentlist img.avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; } #reviews .comment-text { flex: 1; min-width: 0; } #reviews .comment-text .meta { margin: 4px 0 6px; font-size: .82rem; color: var(--sub, #6B6878); } #reviews .comment-text .meta strong { color: var(--ink); } #reviews .comment-reply-title { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; display: block; margin-bottom: 8px; } #reviews .comment-form { display: flex; flex-direction: column; gap: 10px; } #reviews .comment-form label { font-size: .85rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 4px; } #reviews .comment-form input[type="text"], #reviews .comment-form input[type="email"], #reviews .comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .92rem; background: #fff; } /* Star PICKER: five real stars — hover previews, click selects. (WooCommerce's JS builds p.stars from the rating dropdown and adds .selected/.active classes; we just draw the stars.) */ #reviews p.stars { display: inline-flex; gap: 2px; margin: 0 0 6px; line-height: 1; } #reviews p.stars a { position: relative; display: inline-block; width: 1.15em; height: 1.1em; font-size: 1.7rem; text-indent: -9999px; overflow: hidden; text-decoration: none; } #reviews p.stars a::before { content: "★"; position: absolute; top: 0; left: 0; text-indent: 0; color: #DAD5EA; transition: color .12s ease; } /* hover: light up every star up to the one under the pointer */ #reviews p.stars:hover a::before { color: #F0A500; } #reviews p.stars a:hover ~ a::before { color: #DAD5EA; } /* click: keep the chosen rating lit */ #reviews p.stars.selected a::before { color: #F0A500; } #reviews p.stars.selected a.active ~ a::before { color: #DAD5EA; } #reviews select#rating { display: none; } #reviews .form-submit input[type="submit"] { border: 0; cursor: pointer; background: var(--purple); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: 50px; } /* pagination — force a clean HORIZONTAL row of page numbers */ .woo-pagination { margin-top: 30px; text-align: center; } .woocommerce nav.woocommerce-pagination ul, nav.woocommerce-pagination ul, .woocommerce-pagination ul.page-numbers { border: none; display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .woocommerce nav.woocommerce-pagination ul li, .woocommerce-pagination ul.page-numbers li { border: none; float: none; display: inline-flex; overflow: visible; margin: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce-pagination .page-numbers li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-radius: 10px; font-family: var(--font-head); color: var(--ink); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--purple); color: #fff; } /* account */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 6px; color: var(--ink); text-decoration: none; font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--purple); } @media (max-width: 860px) { .single-product div.product { grid-template-columns: 1fr; gap: 24px; } /* Collapse the explicit 2-column placement so everything stacks in one column */ .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary.entry-summary { grid-column: 1 / -1; grid-row: auto; } .woocommerce ul.products, .related.products ul.products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .woocommerce ul.products, .related.products ul.products { grid-template-columns: 1fr 1fr; gap: 12px; } } /* ---------------------------------------------------------------- * Product gallery internals (WooCommerce core CSS is disabled, so * FlexSlider's thumbnail nav is unstyled and renders full-size). * Style the thumbnails small, and hide the lone thumbnail on * single-image products (it looked like a duplicate "extra image"). * ---------------------------------------------------------------- */ .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery .flex-viewport { border-radius: var(--radius); overflow: hidden; } .woocommerce-product-gallery ol.flex-control-thumbs, .woocommerce-product-gallery ul.flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .woocommerce-product-gallery .flex-control-thumbs li { width: calc(25% - 8px); margin: 0; } .woocommerce-product-gallery .flex-control-thumbs li img { width: 100%; height: auto; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); opacity: .55; transition: opacity .2s; } .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 1; } /* Single-image product: no thumbnail strip needed */ .woocommerce-product-gallery .flex-control-thumbs li:only-child { display: none; } /* ---------------------------------------------------------------- * Cart: quantity steppers (+/-) and Back-to-Shop button * ---------------------------------------------------------------- */ .woocommerce-cart-form .quantity { display: inline-flex; align-items: center; } .woocommerce-cart-form .quantity .qty-btn { width: 34px; height: 40px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; } .woocommerce-cart-form .quantity .qty-minus { border-radius: 10px 0 0 10px; } .woocommerce-cart-form .quantity .qty-plus { border-radius: 0 10px 10px 0; } .woocommerce-cart-form .quantity .qty-btn:hover { background: var(--bg-soft); border-color: var(--purple); color: var(--purple); } .woocommerce-cart-form .quantity input.qty { width: 50px; height: 40px; text-align: center; border: 1px solid var(--line); border-left: 0; border-right: 0; border-radius: 0; padding: 0; font-family: var(--font-body); } .eg-back-to-shop { display: inline-block; margin-top: 10px; text-align: center; width: 100%; background: var(--bg-soft) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } .eg-back-to-shop:hover { border-color: var(--purple) !important; color: var(--purple) !important; } /* ---------------------------------------------------------------- * Neat card-style cart (cart.php override) * ---------------------------------------------------------------- */ .eg-cart { max-width: 640px; margin-inline: auto; } .eg-cart__title { font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 6px; } .eg-cart__items { display: flex; flex-direction: column; } .eg-cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .eg-cart-item__media { flex: 0 0 92px; } .eg-cart-item__media img { width: 92px; height: 92px; object-fit: contain; background: var(--bg-soft); border-radius: 14px; padding: 8px; } .eg-cart-item__info { flex: 1 1 auto; min-width: 0; } .eg-cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .eg-cart-item__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eg-cart-item__name:hover { color: var(--purple); } .eg-cart-item__meta { color: var(--ink-soft); font-size: .85rem; margin-top: 3px; } .eg-cart-item__meta p { margin: 0; } .eg-cart-item__price { margin: 8px 0 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--ink); } .eg-cart-item__price del { color: var(--ink-soft); font-weight: 500; font-size: .9rem; margin-left: 8px; } .eg-cart-item__price ins { text-decoration: none; } .eg-cart-item__controls { display: flex; align-items: center; gap: 12px; } .eg-cart-item__remove { flex: 0 0 auto; color: var(--ink-soft); display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; transition: background .2s, color .2s; } .eg-cart-item__remove:hover { color: #d23; background: var(--bg-soft); } .eg-qty-fixed { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; } .eg-cart__foot { margin-top: 22px; } .eg-cart__subtotal { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); } .eg-cart__subtotal span { color: var(--ink-soft); font-family: var(--font-head); font-weight: 700; } .eg-cart__subtotal strong { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--ink); } .eg-cart__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .eg-cart__actions .button { width: 100%; text-align: center; justify-content: center; border-radius: 50px !important; padding: 16px !important; font-family: var(--font-head); font-weight: 700; margin: 0; } .eg-cart__actions .eg-back-to-shop { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; } .eg-cart__actions .eg-back-to-shop:hover { border-color: var(--purple) !important; color: var(--purple) !important; } .eg-cart__actions .eg-checkout { background: var(--ink) !important; color: #fff !important; } .eg-cart__actions .eg-checkout:hover { background: #000 !important; transform: translateY(-2px); } /* hidden auto-update button (qty steppers submit it via JS) */ .eg-cart .eg-update-cart { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- * Checkout order summary (card format, matches the cart) + payment * ---------------------------------------------------------------- */ .eg-review__items { display: flex; flex-direction: column; margin-bottom: 6px; } .eg-review-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .eg-review-item__media { position: relative; flex: 0 0 52px; } .eg-review-item__media img { width: 52px; height: 52px; object-fit: contain; background: var(--bg-soft); border-radius: 10px; padding: 4px; } .eg-review-item__qty { position: absolute; top: -7px; right: -7px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; } .eg-review-item__name { flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.3; } .eg-review-item__total { font-family: var(--font-head); font-weight: 700; white-space: nowrap; color: var(--ink); } .eg-review__totals { padding-top: 10px; } .eg-review__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--ink-soft); } .eg-review__row span:last-child { color: var(--ink); font-weight: 600; } .eg-review__row--discount span:last-child { color: #128C4B; } .eg-review__row--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-family: var(--font-head); } .eg-review__row--total span { color: var(--ink) !important; font-weight: 800; font-size: 1.35rem; } /* Payment options — clean, tickable rows */ #payment { background: transparent !important; } #payment ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; border: 0; } #payment ul.wc_payment_methods li { border: 1.5px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; margin: 0 0 10px; transition: border-color .2s, box-shadow .2s; } #payment ul.wc_payment_methods li:hover { border-color: var(--purple); } #payment ul.wc_payment_methods li label { font-family: var(--font-head); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin: 0; } #payment ul.wc_payment_methods li input[type="radio"] { -webkit-appearance: radio; appearance: auto; width: 20px; height: 20px; margin: 0; accent-color: var(--purple); cursor: pointer; opacity: 1; position: static; } #payment ul.wc_payment_methods li img { max-height: 24px; margin-left: 6px; } #payment .payment_box { background: var(--bg-soft); border-radius: 12px; padding: 14px 16px; margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); } #payment .payment_box p { margin: 0 0 6px; } #payment .payment_box:before { display: none; } #payment .place-order { padding-top: 6px; } /* ---------------------------------------------------------------- * Classic checkout layout (theme disables WooCommerce core CSS) * Details on the left, order summary + payment card on the right. * ---------------------------------------------------------------- */ .woocommerce-checkout .woocommerce { max-width: var(--maxw); } .woocommerce-checkout h3 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 14px; } .woocommerce-checkout .form-row { margin: 0 0 14px; } .woocommerce-checkout .form-row label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--ink); } .woocommerce-checkout .form-row .required { color: var(--purple); } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row .select2-container, .woocommerce-checkout .form-row select { width: 100%; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after { content: ""; display: block; clear: both; } .woocommerce-checkout .form-row-first { float: left; width: 48%; } .woocommerce-checkout .form-row-last { float: right; width: 48%; } .woocommerce-checkout .form-row-wide { clear: both; width: 100%; } #order_review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } #order_review_heading { margin-top: 0; } #place_order { width: 100%; margin-top: 12px; background: var(--ink) !important; color: #fff !important; border-radius: 50px !important; padding: 16px !important; font-family: var(--font-head); font-weight: 700; font-size: 1rem; } #place_order:hover { background: #000 !important; transform: translateY(-2px); } /* Two columns on desktop: customer details | order + payment */ @media (min-width: 900px) { form.woocommerce-checkout.checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 40px; align-items: start; } form.woocommerce-checkout.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; } form.woocommerce-checkout.checkout > #order_review_heading { grid-column: 2; grid-row: 1; } form.woocommerce-checkout.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--nav-h) + 16px); } /* stack billing + shipping within the left column */ #customer_details .col2-set { display: block; } #customer_details .col2-set .col-1, #customer_details .col2-set .col-2 { width: auto; float: none; margin-bottom: 8px; } } /* ============================================================ DEFAULT WOOCOMMERCE PRODUCT LISTS (blocks/shortcodes like the cart page's cross-sell section) — style them as a clean grid so they never render as a raw stacked list. ============================================================ */ ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; padding: 0; margin: 24px 0; } @media (min-width: 700px) { ul.products { grid-template-columns: repeat(4, 1fr); } } ul.products li.product { background: var(--surface, #fff); border: 1px solid var(--line, #E0DCEF); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: center; width: auto !important; float: none !important; margin: 0 !important; } ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; border-radius: 10px; background: #fff; } ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-head, serif); font-size: .95rem; font-weight: 600; line-height: 1.3; } ul.products li.product .price { font-weight: 700; color: var(--ink, #14121A); font-size: .95rem; display: block; } ul.products li.product .price del { color: #A8A2B8; font-weight: 500; font-size: .85em; } ul.products li.product .price ins { text-decoration: none; } ul.products li.product .button { background: var(--green, #CFF24A); color: var(--ink, #14121A); border: 0; border-radius: 99px; padding: 10px 20px; font-weight: 700; font-size: .85rem; cursor: pointer; margin: 4px auto 0; display: inline-block; } ul.products li.product .onsale { position: static; display: inline-block; background: var(--purple, #7B61FF); color: #fff; border-radius: 99px; padding: 3px 12px; font-size: .7rem; font-weight: 700; margin: 0 auto; } /* ============================================================ NOTICES — branded add-to-cart / info / error banners ============================================================ */ .woocommerce-message, .woocommerce-info, .woocommerce-error li, .woocommerce-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line, #E0DCEF); border-radius: 16px; padding: 14px 18px; margin: 0 0 22px; font-size: .95rem; color: var(--ink, #14121A); box-shadow: var(--shadow-sm, 0 2px 10px rgba(33,28,48,.06)); list-style: none; } .woocommerce-message { border-left: 4px solid var(--green, #CFF24A); } .woocommerce-info { border-left: 4px solid var(--purple, #7B61FF); } .woocommerce-error, .woocommerce-error li { border-left: 4px solid #E24B4A; } .woocommerce-error { display: block; background: none; border: 0; box-shadow: none; padding: 0; } .eg-added-tick { width: 26px; height: 26px; border-radius: 50%; background: var(--green, #CFF24A); flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } .eg-added-text { font-weight: 600; } .woocommerce-message .button, .woocommerce-info .button { margin-left: auto; order: 3; background: var(--green, #CFF24A); color: var(--ink, #14121A); border: 0; border-radius: 99px; padding: 10px 22px; font-weight: 700; font-size: .85rem; line-height: 1; } .woocommerce-message .button:hover { background: var(--green-dark, #BCE235); } @media (max-width: 520px) { .woocommerce-message .button { margin-left: 0; width: 100%; text-align: center; } }