is rendered inside
. */
#woo-cart-panel .mc-sticky-footer > p:empty {
display: none !important;
}
#woo-cart-panel .woocommerce-mini-cart li.mc-frequently-bought {
display: block !important;
grid-template-columns: none !important;
list-style: none;
padding: 0 !important;
margin: 16px 0 0 0;
border-bottom: none !important;
width: 100%;
}
.mc-fbt-wrapper {
background: rgba(89, 64, 46, 0.05);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mc-fbt-label {
font-family: 'Playfair Display', var(--theme-heading-font-family), serif;
font-weight: 400;
font-size: 14px;
line-height: 26px;
color: #4a4a4a;
}
.mc-fbt-card {
background: #ffffff;
border-radius: 8px;
padding: 8px;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
gap: 12px;
}
.mc-fbt-image {
flex-shrink: 0;
}
.mc-fbt-image img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 0;
}
.mc-fbt-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mc-fbt-name {
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 18px;
color: #4a4a4a;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mc-fbt-name:hover {
text-decoration: underline;
}
.mc-fbt-price {
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 26px;
color: #4a4a4a;
}
.mc-fbt-add-btn {
flex-shrink: 0;
background: #2b9947;
border: none;
border-radius: 6px;
height: 30px;
padding: 0 8px;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 26px;
color: #ffffff;
transition: background-color 0.2s ease;
}
.mc-fbt-add-btn:hover {
background: #237a39;
}
.mc-fbt-add-btn.loading {
opacity: 0.6;
pointer-events: none;
}
/* ==========================================================================
Sticky Checkout Footer — totals + button + badge
Targets base Metta classes: .mini-cart-totals-breakdown, .total-line,
.proceed-checkout-btn, .mini-cart-ssl-badge
========================================================================== */
/* Hide the Tax row — Figma shows only Subtotal / Shipping / Total */
#woo-cart-panel .mini-cart-totals-breakdown .tax-line {
display: none !important;
}
/* Subtotal + Shipping rows */
#woo-cart-panel .woocommerce-mini-cart__total .subtotal-line .total-label,
#woo-cart-panel .woocommerce-mini-cart__total .shipping-line .total-label {
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #4a4a4a;
text-transform: none;
}
#woo-cart-panel .woocommerce-mini-cart__total .subtotal-line .total-amount,
#woo-cart-panel .woocommerce-mini-cart__total .shipping-line .total-amount {
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #4a4a4a;
}
/* Divider above the grand total row */
#woo-cart-panel .mini-cart-totals-breakdown .grand-total-line {
border-top: 1px solid #e4e5e7 !important;
padding-top: 8px;
margin-top: 8px;
}
#woo-cart-panel .woocommerce-mini-cart__total .grand-total-line .total-label {
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #4a4a4a;
text-transform: none;
}
#woo-cart-panel .woocommerce-mini-cart__total .grand-total-line .total-amount {
font-family: 'Barlow', var(--theme-font-family), sans-serif !important;
font-weight: 700 !important;
font-size: 20px !important;
line-height: 28px !important;
color: #4a4a4a !important;
}
/* Proceed / Secure Checkout button — green per Figma */
#woo-cart-panel .proceed-checkout-btn {
background: #2b9947 !important;
color: #ffffff !important;
height: 48px;
border-radius: 6px !important;
font-family: 'Barlow', var(--theme-font-family), sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 28px !important;
text-transform: uppercase !important;
}
#woo-cart-panel .proceed-checkout-btn:hover {
background: #237a39 !important;
}
/* SSL trust line — match Figma typography */
#woo-cart-panel .mini-cart-ssl-badge {
opacity: 1;
gap: 14px;
margin-top: 0 !important;
font-family: 'Barlow', var(--theme-font-family), sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 26px;
color: #939598;
}
#woo-cart-panel .mini-cart-ssl-badge svg {
width: 12px;
height: 12px;
stroke: #939598;
}
/* Sticky footer — one white block containing totals + button + SSL line,
pinned to the bottom of the panel with the Figma drop-shadow.
.ct-panel-content-inner has padding:25px all sides — negate L/R/B so the
footer spans full panel width and sits flush with the panel bottom edge. */
#woo-cart-panel .mc-sticky-footer {
position: sticky;
bottom: -25px;
background: #ffffff;
padding: 16px 20px;
margin: 16px -25px -25px;
box-shadow: 0 -8px 40px 0 rgba(0, 0, 0, 0.12);
z-index: 5;
display: flex;
flex-direction: column;
gap: 12px;
}
#woo-cart-panel .mc-sticky-footer .woocommerce-mini-cart__total {
margin: 0 !important;
padding: 0 !important;
background: transparent;
}
#woo-cart-panel .mc-sticky-footer .woocommerce-mini-cart__buttons {
margin: 0 !important;
padding: 0 !important;
background: transparent;
box-shadow: none;
/* Base theme (assets/css/mini-cart.css §G) forces border-top-style: solid
on .woocommerce-mini-cart__buttons, producing a divider above the
SECURE CHECKOUT button. Figma shows no divider — kill it. */
border-top: none !important;
border: none !important;
}
/* ==========================================================================
Stripe Express Checkout / Payment Request button — hidden in minicart
per ClickUp 86ewytwa7 (Vita comment 2026-04-15: "remove the stripe
floating button"). Figma minicart spec has no express-checkout element.
========================================================================== */
#woo-cart-panel .wc-stripe-product-checkout-container,
#woo-cart-panel #wc-stripe-express-checkout-element,
#woo-cart-panel .wcstripe-express-checkout-wrapper,
#woo-cart-panel .wc-stripe-express-checkout-wrapper,
#woo-cart-panel #wc-stripe-payment-request-button,
#woo-cart-panel .wc-stripe-payment-request-button,
#woo-cart-panel [id^="wc-stripe-express"],
#woo-cart-panel [class*="stripe-express"],
#woo-cart-panel [class*="stripe-payment-request"] {
display: none !important;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 540px) {
.mc-fbt-card {
flex-wrap: wrap;
}
/* Cart-item thumbnail — 80×80 on mobile (ClickUp 86ewytwa7). */
#woo-cart-panel .mini_cart_item .product-image-wrapper {
flex: 0 0 80px !important;
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
}
#woo-cart-panel .mini_cart_item .product-image-wrapper img {
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
}
}