/* =============================================================================
WC CART + CHECKOUT
Loaded on: is_cart() || is_checkout()
============================================================================= */
/* stylelint-disable selector-id-pattern */
/* ── cart.css ─────────────────────────────────────────────────────────────── */
:root {
/* BORDERS */
--cart-border-color: var(--color-border-muted);
--cart-border-width: 1px;
--cart-border-style: solid;
--cart-section-border-color: var(--color-border-soft);
/* COLORS */
--cart-collaterals-surface: var(--gray-xlight);
/* SPACING */
--cart-cell-gap: var(--space-xlarge);
--cart-collaterals-padding: var(--space-normal);
/* LAYOUT */
--cart-cell-min-width: 15%;
--cart-quantity-input-width: 80px;
--cart-remove-min-width: 40px;
--cart-thumbnail-width: 100px;
/* TYPOGRAPHY */
--cart-label-weight: var(--typeface-weight-medium);
--cart-remove-icon-size: 2em;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
background: var(--color-primary);
& span {
color: var(--color-white);
}
}
/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata__description {
display: none;
}
/* WC Smart Coupons: remove excess padding from coupon message wrapper */
.wc_coupon_message_wrap {
padding: 0 !important;
}
/* ===== PRODUCT NAME ===== */
.product-name a {
color: inherit;
}
.product-name .product-sku {
display: block;
}
/* ===== CART TABLE: FAUX LABELS ===== */
/*
* The responsive cart table generates faux labels from data-title attributes.
* The "Product" column label is intentionally suppressed site-wide.
*/
.woocommerce-cart-form .shop_table_responsive td[data-title]::before {
content: attr(data-title) ":";
}
.shop_table_responsive td.product-name[data-title]::before {
display: none;
}
/* ===== CART FORM ===== */
.woocommerce-cart-form .product-name > a,
.woocommerce-cart-form .product-name .bundled-product-name > a {
float: right;
font-weight: var(--cart-label-weight);
}
.woocommerce-cart-form .bundled_table_item .bundled_table_item_indent {
padding: 0;
}
.woocommerce-cart-form td.product-remove {
text-align: left;
}
/* ===== COUPON FIELD ===== */
/* Visually hide the coupon field label (remains accessible to screen readers) */
.actions .coupon label {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.actions .coupon {
align-items: center;
border-bottom: var(--cart-border-width) var(--cart-border-style) var(--cart-section-border-color);
display: flex;
flex-wrap: wrap;
padding-bottom: var(--space-medium);
}
.actions .coupon input {
margin-right: var(--space-normal);
min-width: 0;
}
.actions .coupon button {
margin-top: var(--space-normal);
min-width: 100%;
white-space: nowrap;
}
button[name="update_cart"] {
margin-top: var(--space-large);
min-width: 100%;
}
/* ===== CART TABLE STRUCTURE ===== */
/* Allow natural margin collapsing on cart rows */
.woocommerce-cart-form .cart,
.woocommerce-cart-form .cart tbody {
display: block;
}
.woocommerce-cart-form .cart tr {
border-bottom: var(--cart-border-width) var(--cart-border-style) var(--cart-border-color);
display: flex;
flex-direction: column;
padding: var(--space-small) 0;
}
.woocommerce-cart-form tbody tr:last-child {
border-bottom: 0;
}
.woocommerce-cart-form .cart tr.bundle_table_item {
padding-bottom: 0;
}
.bundled_table_item + .cart_item:not(.bundled_table_item) {
border-top: var(--cart-border-width) var(--cart-border-style) var(--cart-border-color);
clear: left;
}
/* ===== BUNDLED PRODUCTS ===== */
.bundled_table_item .product-name {
padding-bottom: 0;
}
.bundled_table_item .product-quantity {
padding-top: 0;
}
/* Bundled items show no individual pricing */
.bundled_table_item .product-price,
.bundled_table_item .product-subtotal {
display: none;
}
/* ===== CART COLUMN ORDER ===== */
/*
* Mobile flex order: thumbnail → name → price → quantity → subtotal → remove.
* WooCommerce plugin adds unwanted inline margin-bottom to actions elements.
*/
.woocommerce-cart-form table.cart td.actions .input-text,
.woocommerce-cart-form table.cart td.actions .button,
.woocommerce-cart-form table.cart td.actions .checkout-button {
margin-bottom: 0 !important;
}
.woocommerce-cart-form .shop_table_responsive tbody tr:first-child {
border-top: none;
padding-top: 0;
}
.woocommerce-cart-form .product-thumbnail {
order: 1;
padding-top: var(--space-normal);
}
.woocommerce-cart-form .product-name {
order: 2;
text-align: start;
}
.woocommerce-cart-form .product-price {
order: 3;
}
.woocommerce-cart-form .product-quantity {
order: 4;
}
.woocommerce-cart-form .product-subtotal {
order: 5;
}
.woocommerce-cart-form .product-remove {
order: 6;
}
.woocommerce-cart-form .remove-icon {
display: none;
}
.woocommerce-cart-form a.remove {
text-decoration: none;
}
.woocommerce-cart-form .product-quantity input {
width: var(--cart-quantity-input-width);
}
.woocommerce-cart-form .product-name > a + *,
.woocommerce-cart-form .product-name .bundled-product-name + * {
clear: right;
}
/* ===== SHIPPING METHODS ===== */
.woocommerce-shipping-methods {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-shipping-methods label {
margin-left: 0.25em;
}
/* ===== SHOP TABLE ===== */
.shop_table {
border: var(--cart-border-width) var(--cart-border-style) var(--cart-border-color);
border-collapse: collapse;
border-spacing: 0;
}
.shop_table tr {
border: var(--cart-border-width) var(--cart-border-style) var(--cart-border-color);
}
.shop_table th,
.shop_table td {
padding: var(--space-xsmall) var(--space-small);
text-align: right;
vertical-align: top;
}
.shop_table th:first-child,
.shop_table td:first-child {
text-align: left;
}
/* Bundles: keep rows transparent to avoid double backgrounds */
.shop_table tr.bundle_table_item,
.shop_table tr.bundled_table_item {
background-color: transparent;
}
/* ===== CART COLLATERALS ===== */
.cart-collaterals {
align-self: flex-start;
background-color: var(--cart-collaterals-surface);
border: var(--cart-border-width) var(--cart-border-style) var(--cart-section-border-color);
border-radius: var(--border-radius);
padding: var(--cart-collaterals-padding);
}
.cart-collaterals h2,
.entry-content .cart-collaterals h2 {
font: var(--heading-small);
margin: 0;
}
.cart-collaterals .cart_totals .shop_table tr:not(.order-total) > * {
font: var(--label-large);
}
.cart-collaterals .woocommerce-shipping-methods {
clear: left;
padding-top: var(--space-xxsmall);
}
.cart-collaterals .woocommerce-shipping-methods li {
margin: var(--space-xsmall) 0;
}
/* ===== CART TOTALS ===== */
.cart_totals .shop_table_responsive td[data-title]::before {
font-weight: var(--cart-label-weight);
}
.cart_totals .shop_table.shop_table_responsive tr.order-total {
border: 0;
}
.cart_totals .order-total td[data-title]::before {
font-weight: var(--cart-label-weight);
}
/* ===== CHECKOUT BUTTON ===== */
.wc-proceed-to-checkout {
margin-top: calc(-1 * var(--space-small));
}
.checkout-button.button {
font-weight: var(--cart-label-weight);
min-width: 100%;
padding: var(--space-xsmall) var(--space-normal);
text-align: center;
}
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
text-align: inherit;
}
/* ===== RESPONSIVE SHOP TABLE ===== */
/*
* Below the tablet breakpoint, shop tables collapse to block layout with
* faux labels generated from data-title attributes. Above it they restore
* to standard table display.
*/
.shop_table_responsive,
.shop_table_responsive tbody,
.shop_table_responsive tr,
.shop_table_responsive tfoot,
.cart_totals .shop_table_responsive,
.cart_totals .shop_table_responsive tbody,
.cart_totals .shop_table_responsive tr,
.cart_totals .shop_table_responsive tfoot {
border: none;
display: block;
}
.shop_table_responsive thead,
.cart_totals .shop_table_responsive thead {
display: none;
}
.shop_table.shop_table_responsive tr,
.cart_totals .shop_table.shop_table_responsive tr {
border-bottom: var(--cart-border-width) var(--cart-border-style) var(--cart-section-border-color);
padding: var(--space-xsmall) 0;
}
.shop_table_responsive tbody tr:first-child,
.cart_totals .shop_table_responsive tbody tr:first-child {
border-top: var(--cart-border-width) var(--cart-border-style) var(--cart-section-border-color);
}
.swell-checkout-earning p {
font: var(--label-small);
font-style: italic;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
}
.shop_table_responsive th,
.shop_table_responsive td,
.shop_table_responsive td:first-child,
.cart_totals .shop_table_responsive th,
.cart_totals .shop_table_responsive td,
.cart_totals .shop_table_responsive td:first-child {
display: block;
padding: var(--space-xsmall) 0;
text-align: right;
}
.cart_totals .woocommerce-shipping-totals td {
text-align: left;
}
.shop_table_responsive th,
.cart_totals .shop_table_responsive th {
display: none;
}
.shop_table.shop_table_responsive th:first-child,
.shop_table_responsive td.actions,
.cart_totals .shop_table.shop_table_responsive th:first-child,
.cart_totals .shop_table_responsive td.actions {
text-align: initial;
}
/* Clearfix for faux label rows */
.shop_table_responsive td::after,
.shop_table_responsive td::before,
.cart_totals .shop_table_responsive td::after,
.cart_totals .shop_table_responsive td::before {
content: '';
display: table;
}
.shop_table_responsive td::after,
.cart_totals .shop_table_responsive td::after {
clear: both;
}
/* Faux label from data-title */
.shop_table_responsive td[data-title]::before,
.cart_totals .shop_table_responsive td[data-title]::before {
content: attr(data-title);
display: block;
float: left;
font-weight: var(--cart-label-weight);
text-align: left;
}
/* Suppress faux labels/clearfix for non-data cells */
.shop_table.shop_table_responsive td.product-remove::before,
.shop_table.shop_table_responsive td.product-remove::after,
.shop_table.shop_table_responsive td.actions::before,
.shop_table.shop_table_responsive td.download-actions::before {
display: none;
}
.shop_table.shop_table_responsive td.product-remove:empty {
display: none;
}
.bundled_table_item td.product-remove {
display: none;
}
/* ===== BREAKPOINT: TABLET (45em) ===== */
@media (min-width: 45em) {
.woocommerce-cart-form .cart {
margin: 0;
}
.shop_table_responsive td.actions {
align-items: center;
display: flex;
justify-content: space-between;
min-width: 100%;
}
.shop_table_responsive td.actions::after {
display: none;
}
.actions .coupon {
border-bottom: 0;
padding-bottom: 0;
}
.actions .coupon input {
margin-right: var(--space-normal);
min-width: auto;
width: auto;
}
.actions .coupon button {
margin-top: 0;
min-width: auto;
}
button[name="update_cart"] {
margin-top: 0;
min-width: auto;
}
/* Restore table display for shop tables */
.shop_table_responsive {
display: table;
}
.shop_table_responsive tbody {
display: table-row-group;
}
.shop_table_responsive tr {
display: table-row;
}
.shop_table_responsive tfoot {
display: table-footer-group;
}
.shop_table_responsive th,
.shop_table_responsive td,
.shop_table_responsive td:first-child {
display: table-cell;
}
.shop_table_responsive td:first-child {
text-align: initial;
}
.shop_table_responsive thead {
display: table-header-group;
}
.shop_table_responsive th {
display: table-cell;
}
/* Faux labels no longer needed at this width */
.shop_table_responsive td[data-title]::before {
display: none;
}
/* Cart table thead uses block/flex for custom header alignment */
.woocommerce-cart-form thead {
display: block;
}
.woocommerce-cart-form thead tr {
display: flex;
justify-content: flex-end;
}
.woocommerce-cart-form thead tr th {
display: block;
}
/* Thumbnail th is always empty — hide it */
.woocommerce-cart-form thead tr th.product-thumbnail {
display: none;
}
/* Required so th and td share the same column width */
.woocommerce-cart-form .cart .product-remove {
min-width: var(--cart-remove-min-width);
text-align: right;
}
.shop_table.shop_table_responsive td.product-remove:empty {
display: table-cell;
}
/* Cart items display inline like a table row */
.woocommerce-cart-form .cart tr {
align-items: center;
flex-direction: row;
padding-bottom: var(--space-normal);
padding-top: var(--space-normal);
}
.woocommerce-cart-form .cart tbody tr:first-child {
padding-top: var(--space-normal);
}
.woocommerce-cart-form .product-thumbnail {
align-self: flex-start;
flex-grow: 0;
flex-shrink: 0;
padding-bottom: var(--space-xsmall);
padding-top: var(--space-xsmall);
width: var(--cart-thumbnail-width);
}
/* Left padding aligns non-input fields with the quantity input */
.woocommerce-cart-form .product-name,
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form .product-subtotal {
min-width: var(--cart-cell-min-width);
padding-left: var(--cart-cell-gap);
text-align: inherit;
}
.woocommerce-cart-form .product-name {
flex-grow: 1;
}
.woocommerce-cart-form th.product-name {
padding-left: 0;
}
.woocommerce-cart-form .product-name > a,
.woocommerce-cart-form .product-name .bundled-product-name > a {
float: none;
}
.woocommerce-cart-form .product-name > a + *,
.woocommerce-cart-form .product-name .bundled-product-name + * {
clear: none;
}
/* Remove link becomes an icon at this width */
.woocommerce-cart-form a.remove {
display: inline-block;
line-height: 1;
}
.woocommerce-cart-form .remove-icon {
display: block;
font-size: var(--cart-remove-icon-size);
font-weight: var(--cart-label-weight);
}
.woocommerce-cart-form .remove-text {
display: none;
}
/* Bundled products */
.woocommerce-cart-form .cart tr.bundle_table_item {
padding-bottom: var(--space-normal);
}
.woocommerce-cart-form .cart tr.bundled_table_item {
margin-top: calc(-1 * var(--space-normal));
padding-bottom: var(--space-normal);
}
.woocommerce-cart-form .bundled_table_item .product-quantity {
display: none;
}
}
/* ===== BREAKPOINT: DESKTOP (64em) ===== */
@media (min-width: 64em) {
.woocommerce-cart .woocommerce {
display: flex;
flex-wrap: wrap;
}
.woocommerce-cart-form {
padding-right: var(--cart-cell-gap);
width: 70%;
}
.cart-collaterals {
width: 30%;
}
.woocommerce-cart-form .cart td.actions {
display: flex;
width: 100%;
}
button[name="update_cart"] {
margin-left: auto;
margin-top: 0;
}
.cart-empty + .return-to-shop {
margin-left: var(--space-large);
}
}
/* ===== HEADER CART (embedded on cart page) ===== */
/*
* header-cart component when rendered inside the WooCommerce cart page.
* Removes its own container padding and max-width constraint.
*/
.woocommerce-cart-form .header-cart {
margin-bottom: var(--space-xlarge);
max-width: none;
padding: 0;
}
/* ── woocommerce-checkout.css ─────────────────────────────────────────────── */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
margin-bottom: var(--space-normal);
}
.woocommerce-form-coupon {
display: flex;
flex-wrap: wrap;
}
.woocommerce-form-coupon p:first-child {
min-width: 100%;
}
.woocommerce-form-coupon p {
margin: 0;
}
ul.wc_payment_methods {
list-style: none;
padding: 0;
}
#payment {
background-color: transparent;
}
.wc_payment_methods li {
border-bottom: 1px solid var(--border-color, #ddd);
padding-block: var(--space-xsmall);
}
.wc_payment_methods li:last-child {
border-bottom: none;
}
@media (min-width: 64em) {
.col2-set .form-row-first {
float: left;
padding-right: var(--space-normal);
}
.col2-set .form-row-last {
float: right;
padding-left: var(--space-normal);
}
.col2-set .form-row-first,
.col2-set .form-row-last {
width: 50%;
margin: 0;
}
.col2-set .form-row-last + * {
clear: both;
margin-top: 0;
padding-top: 1em;
}
.ftm-wc-checkout {
display: flex;
}
.ftm-wc-checkout-customer-details {
width: 68.75%;
padding-right: var(--space-xlarge);
}
.ftm-wc-checkout-order-review {
width: 31.25%;
}
}
/* Checkout Page */
.woocommerce-billing-fields h3 {
margin: 0;
}
.ftm-wc-checkout abbr[title] {
text-decoration: none;
}
#wc-stripe-hidden-style-input {
height: 1px !important;
left: 0 !important;
max-width: 1px !important;
min-width: 1px !important;
padding: 0 !important;
right: auto !important;
width: 1px !important;
}
#ship-to-different-address {
font-size: inherit;
line-height: inherit;
}
.al-checkout-order-review {
background-color: var(--gray-xlight);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-top: var(--space-large);
padding: var(--space-normal);
}
.al-order-review-heading {
align-items: center;
display: flex;
justify-content: space-between;
}
.al-order-review-heading h3 {
/* 21/31 */
font-size: 1.1666em;
line-height: 1.47619;
margin: 0;
}
.woocommerce-checkout-review-order .shop_table {
border: none;
margin-bottom: 0;
}
.woocommerce-checkout-review-order .shop_table tr {
border-left: 0;
border-right: 0;
}
.woocommerce-checkout-review-order .shop_table thead tr {
border-bottom: 0;
}
.woocommerce-checkout-review-order .shop_table tr.cart_item {
border-bottom: 0;
border-top: 0;
}
.woocommerce-checkout-review-order .shop_table th,
.woocommerce-checkout-review-order .shop_table td.product-name {
padding-left: 0;
}
.woocommerce-checkout-review-order .shop_table th + th,
.woocommerce-checkout-review-order .shop_table th + td,
.woocommerce-checkout-review-order .shop_table td.product-total {
padding-left: var(--space-small);
padding-right: 0;
}
.woocommerce-checkout-review-order .shop_table tr.order-total {
border-bottom: 0;
}
@media (min-width: 64em) {
.al-checkout-order-review.review {
margin-top: 0;
}
}
.woocommerce .shipping-insurance {
margin-top: 16px;
border-radius: 4px;
border: 2px solid #DE7870;
background-color: rgba(251, 237, 236, 0.50);
background-repeat: no-repeat;
background-position: 20px 16px;
background-image: url('data:image/svg+xml,');
padding:16px 78px;
p {
font-size:14px;
line-height:17px;
&.heading {
font-size: 18px;
font-weight: 700;
line-height: 30px; /* 166.667% */
margin-bottom: 1rem;
margin-top: 0;
}
}
label {
font-size: 18px;
font-weight: 700;
line-height: 30px; /* 166.667% */
}
}
#payment ul.payment_methods li label[for='payment_method_first_data_clover_credit_card'],
.sv-wc-payment-gateway-card-icons {
display: inline-block!important;
}
.wc-first-data-clover-credit-card-new-payment-method-form .woocommerce-validated label {
padding-left: 5px;
}
.sv-wc-payment-gateway-payment-form-manage-payment-methods {
display: block;
width: fit-content;
}
/* ── klaviyo.css ──────────────────────────────────────────────────────────── */
/* Klaviyo WooCommerce checkout consent fields (newsletter / SMS opt-in) */
#kl_newsletter_checkbox_field,
#kl_sms_consent_checkbox_field,
#klaviyo-consent-text {
margin-top: -0.5rem;
}
#klaviyo-consent-text {
font-size: 0.875rem;
}
#sms-consent {
width: 50vw;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--gray-xlight);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-top: var(--space-large);
padding: var(--space-normal);
display: none;
}
#sms-consent .close {
float: right;
font-size: 2em;
line-height: .7;
}
/* opened modal state */
#sms-consent:target {
display: block;
}
/* ── wc-block-checkout: Additional Checkout Fields ──────────────────────── */
/*
* Styles for the al-plugin/insure-shipping and al-plugin/gift-message
* fields registered via woocommerce_register_additional_checkout_field.
* These render in block checkout's "Additional information" section via
* WC's block components; the classic .woocommerce .shipping-insurance
* markup above is only used on WC < 8.9 / classic shortcode checkout.
*/
/* Shipping insurance — decorative box matching legacy .shipping-insurance */
.wc-block-checkout .wc-block-components-checkbox:has(input[id*="insure-shipping"]) {
margin-top: 8px;
border-radius: 4px;
border: 2px solid #de7870;
background-color: rgba(251, 237, 236, 0.5);
background-repeat: no-repeat;
background-position: 16px 50%;
background-image: url('data:image/svg+xml,');
padding: 12px 16px 12px 68px;
}
.wc-block-checkout .wc-block-components-checkbox:has(input[id*="insure-shipping"]) .wc-block-components-checkbox__label {
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
}
/* Gift message — full-width to invite longer text (WC API only supports text, not textarea) */
.wc-block-checkout .wc-block-components-text-input:has(input[id*="gift-message"]) {
width: 100%;
}
.wc-block-checkout .wc-block-components-text-input:has(input[id*="gift-message"]) input {
width: 100%;
}
/*
* Cart block: hide +/− stepper and show qty as a plain number when the quantity
* cannot be changed. Targets two cases:
* 1. Bundled items (is-bundled) — fixed qty set by the bundle config.
* 2. Any cart row where min=max=1 (e.g. "sold individually" / limited to 1).
*/
tr.is-bundled .wc-block-components-quantity-selector__button,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-components-quantity-selector__button {
display: none;
}
tr.is-bundled .wc-block-components-quantity-selector,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-components-quantity-selector {
border: none;
width: auto;
min-width: 0;
justify-content: center;
}
tr.is-bundled .wc-block-cart-item__quantity,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-cart-item__quantity {
display: flex;
justify-content: center;
}
tr.is-bundled .wc-block-components-quantity-selector__input,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-components-quantity-selector__input {
border: 1px solid color-mix(in srgb, currentcolor 30%, transparent);
border-radius: 4px;
text-align: center;
pointer-events: none;
appearance: textfield;
-moz-appearance: textfield;
width: 2.5em;
min-width: 0;
padding: 0.2em 0;
font-size: 0.875rem;
color: var(--color-neutral-400, #888a8c);
}
tr.is-bundled .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
tr.is-bundled .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
tr.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[min="1"][max="1"]) .wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
-webkit-appearance: none;
}