Loading
Skip to content
My cart is currently empty.
/*
* Only Bundles Widget - Design Settings
* Bundle Type: product_page
* Auto-generated from Settings -> Design
*
* Global Colors System:
* - Global colors automatically cascade to all relevant components
* - Component-specific colors override global colors when set
* - This ensures brand consistency while allowing fine-grained control
*/
:root {
/* GLOBAL COLORS */
--bundle-global-primary-button: #000000;
--bundle-global-button-text: #FFFFFF;
--bundle-global-primary-text: #000000;
--bundle-global-secondary-text: #6B7280;
--bundle-global-footer-bg: #FFFFFF;
--bundle-global-footer-text: #000000;
/* PRODUCT CARD */
--bundle-product-card-bg: #F8F8F8;
--bundle-product-card-font-color: #000000;
--bundle-product-card-font-size: 20px;
--bundle-product-card-font-weight: 600;
--bundle-product-card-image-fit: cover;
--bundle-product-cards-per-row: 4;
--bundle-product-title-display: block;
--bundle-product-price-bg-color: #F0F8F0;
--bundle-product-strike-price-color: #6B7280;
--bundle-product-strike-font-size: 14px;
--bundle-product-strike-font-weight: 400;
--bundle-product-final-price-color: #000000;
--bundle-product-final-price-font-size: 18px;
--bundle-product-final-price-font-weight: 700;
/* BUTTON */
--bundle-button-bg: #111111;
--bundle-button-text-color: #FFFFFF;
--bundle-button-font-size: 16px;
--bundle-button-font-weight: 600;
--bundle-button-border-radius: 50px;
--bundle-button-hover-bg: #000000;
--bundle-button-added-bg: #10B981;
--bundle-button-added-text: #FFFFFF;
/* VARIANT SELECTOR */
--bundle-variant-selector-bg: #FFFFFF;
--bundle-variant-selector-text-color: #000000;
--bundle-variant-selector-border-radius: 8px;
/* QUANTITY SELECTOR */
--bundle-quantity-selector-bg: #5f5d5d;
--bundle-quantity-selector-text-color: #FFFFFF;
--bundle-quantity-selector-font-size: 16px;
--bundle-quantity-selector-border-radius: 8px;
/* PRODUCT CARD LAYOUT & DIMENSIONS (Phase 6) */
--bundle-product-card-width: 280px;
--bundle-product-card-height: 420px;
--bundle-product-card-spacing: 12px;
--bundle-product-card-border-radius: 16px;
--bundle-product-card-padding: 12px;
--bundle-product-card-border-width: 1px;
--bundle-product-card-border-color: #ECECEC;
--bundle-product-card-shadow: 0 2px 8px rgba(0,0,0,0.04);
--bundle-product-card-hover-shadow: 0 8px 24px rgba(0,0,0,0.12);
/* PRODUCT IMAGE (Phase 6) */
--bundle-product-image-height: 280px;
--bundle-product-image-border-radius: 6px;
--bundle-product-image-bg-color: #F8F8F8;
/* PRODUCT MODAL STYLING (Phase 6) */
--bundle-modal-bg-color: #FFFFFF;
--bundle-modal-border-radius: 12px;
--bundle-modal-title-font-size: 28px;
--bundle-modal-title-font-weight: 700;
--bundle-modal-price-font-size: 22px;
--bundle-modal-variant-border-radius: 8px;
--bundle-modal-button-bg-color: #000000;
--bundle-modal-button-text-color: #FFFFFF;
--bundle-modal-button-border-radius: 8px;
/* PROMO BANNER (Full-Page Bundles) */
--bundle-promo-banner-enabled: 1;
--bundle-promo-banner-bg: #F3F4F6;
--bundle-promo-banner-title-color: #111827;
--bundle-promo-banner-title-font-size: 28px;
--bundle-promo-banner-title-font-weight: 700;
--bundle-promo-banner-subtitle-color: #6B7280;
--bundle-promo-banner-subtitle-font-size: 16px;
--bundle-promo-banner-note-color: #9CA3AF;
--bundle-promo-banner-note-font-size: 14px;
--bundle-promo-banner-radius: 16px;
--bundle-promo-banner-padding: 32px;
/* FOOTER */
--bundle-footer-bg: #FFFFFF;
--bundle-footer-total-bg: #F6F6F6;
--bundle-footer-border-radius: 8px;
--bundle-footer-padding: 16px;
--bundle-footer-final-price-color: #000000;
--bundle-footer-final-price-font-size: 18px;
--bundle-footer-final-price-font-weight: 700;
--bundle-footer-strike-price-color: #6B7280;
--bundle-footer-strike-font-size: 14px;
--bundle-footer-strike-font-weight: 400;
--bundle-footer-price-display: flex;
--bundle-footer-back-button-bg: #FFFFFF;
--bundle-footer-back-button-text: #000000;
--bundle-footer-back-button-border: #E3E3E3;
--bundle-footer-back-button-radius: 8px;
--bundle-footer-next-button-bg: #000000;
--bundle-footer-next-button-text: #FFFFFF;
--bundle-footer-next-button-border: #000000;
--bundle-footer-next-button-radius: 8px;
--bundle-footer-discount-display: block;
--bundle-sidebar-card-bg: #FFFFFF;
--bundle-sidebar-card-text: #000000;
--bundle-sidebar-card-border-color: #E5E7EB;
--bundle-sidebar-card-border-width: 1px;
--bundle-sidebar-card-radius: 10px;
--bundle-sidebar-card-padding: 20px;
--bundle-sidebar-card-width: 360px;
--bundle-sidebar-sticky-offset: 85px;
--bundle-sidebar-products-max-height: 320px;
--bundle-sidebar-skeleton-row-4-display: none;
--bundle-sidebar-skeleton-row-5-display: none;
--bundle-sidebar-discount-bg: #F3F7F3;
--bundle-sidebar-discount-text: #2E7D32;
--bundle-sidebar-button-bg: #000000;
--bundle-sidebar-button-text: #FFFFFF;
--bundle-sidebar-button-radius: 8px;
--bundle-success-message-font-size: 16px;
--bundle-success-message-font-weight: 600;
--bundle-success-message-text-color: #065F46;
--bundle-success-message-bg-color: #D1FAE5;
/* BUNDLE HEADER */
--bundle-header-tab-active-bg: #000000;
--bundle-header-tab-active-text: #FFFFFF;
--bundle-header-tab-inactive-bg: #FFFFFF;
--bundle-header-tab-inactive-text: #000000;
--bundle-header-tab-radius: 67px;
--modal-step-title-color: #000000;
/* TABS */
--bundle-tabs-active-bg-color: #000000;
--bundle-tabs-active-text-color: #FFFFFF;
--bundle-tabs-inactive-bg-color: #FFFFFF;
--bundle-tabs-inactive-text-color: #000000;
--bundle-tabs-border-color: #000000;
--bundle-tabs-border-radius: 8px;
/* GENERAL */
/* Empty State */
--bundle-empty-state-card-bg: #FFFFFF;
--bundle-empty-state-card-border: #F6F6F6;
--bundle-empty-state-text: #6B7280;
--bundle-empty-state-border-style: dashed;
--bundle-empty-slot-border-style: dashed;
--bundle-slot-icon-url: none;
--bundle-slot-icon-mode: badge;
--bundle-slot-icon-badge-image: none;
--bundle-slot-icon-card-image: none;
--bundle-slot-icon-card-size: contain;
--bundle-slot-icon-plus-display: flex;
--bundle-slot-icon-plus-color: currentColor;
--bundle-slot-icon-badge-display: flex;
--bundle-slot-icon-native-visibility: visible;
--bundle-slot-icon-badge-overlay-display: none;
/* Drawer */
--bundle-drawer-bg: #FFFFFF;
/* Add to Cart Button */
--bundle-add-to-cart-button-bg: #000000;
--bundle-add-to-cart-button-text: #FFFFFF;
--bundle-add-to-cart-button-radius: 8px;
/* Discount Pill (on Add to Cart button) */
--bundle-discount-pill-bg: #22C55E;
--bundle-discount-pill-text: #FFFFFF;
--bundle-discount-pill-font-size: 12px;
--bundle-discount-pill-font-weight: 600;
--bundle-discount-pill-border-radius: 20px;
--bundle-discount-feedback-tier-bg: #D1FAE5;
--bundle-discount-feedback-tier-text: #065F46;
--bundle-discount-feedback-complete-bg: #047857;
--bundle-discount-feedback-complete-text: #FFFFFF;
/* Toasts */
--bundle-toast-bg: #000000;
--bundle-toast-text: #FFFFFF;
--bundle-toast-border-radius: 8px;
--bundle-toast-border-color: #FFFFFF;
--bundle-toast-border-width: 0px;
--bundle-toast-font-size: 13px;
--bundle-toast-font-weight: 500;
--bundle-toast-animation-duration: 300ms;
--bundle-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--bundle-toast-enter-from-bottom: 0;
/* Bottom-Sheet */
--bundle-bottom-sheet-overlay-opacity: 0.5;
--bundle-bottom-sheet-animation-duration: 400ms;
/* Bundle Design */
--bundle-bg-color: transparent;
--bundle-footer-scrollbar-color: #000000;
/* Product Page Title */
--bundle-product-page-title-font-color: #000000;
--bundle-product-page-title-font-size: 24px;
/* Bundle Upsell */
--bundle-upsell-button-bg-color: #000000;
--bundle-upsell-border-color: #000000;
--bundle-upsell-text-color: #FFFFFF;
--bundle-upsell-font-color: #000000;
/* Filters */
--bundle-filter-icon-color: #000000;
--bundle-filter-bg-color: #FFFFFF;
--bundle-filter-text-color: #000000;
/* Bundle Header - Header Text */
--bundle-conditions-text-color: #000000;
--bundle-conditions-text-font-size: 16px;
--bundle-discount-text-color: #000000;
--bundle-discount-text-font-size: 14px;
/* Free Gift Badge — merchant-uploadable badge image + Settings-controlled position */
--bundle-free-gift-badge-url: none;
--bundle-free-gift-badge-top: 6px;
--bundle-free-gift-badge-bottom: auto;
--bundle-free-gift-badge-left: 6px;
--bundle-free-gift-badge-right: auto;
/* Included (Default) Badge — merchant-uploadable badge image + Settings-controlled position */
--bundle-included-badge-url: none;
--bundle-included-badge-top: 6px;
--bundle-included-badge-bottom: auto;
--bundle-included-badge-left: 6px;
--bundle-included-badge-right: auto;
/* SEARCH INPUT — names match what bundle-widget-full-page.css references */
--bundle-search-bg: #F8F8F8;
--bundle-search-border: #E0E0E0;
--bundle-search-focus-border: #000000;
--bundle-search-text-color: #333333;
--bundle-search-placeholder-color: #999999;
--bundle-search-icon-color: #666666;
--bundle-search-clear-bg: rgba(0,0,0,0.08);
--bundle-search-clear-color: #666666;
--bundle-search-clear-hover-bg: rgba(0,0,0,0.15);
--bundle-search-clear-hover-color: #333333;
/* SKELETON LOADING */
--bundle-skeleton-base-bg: #F0F0F0;
--bundle-skeleton-shimmer: #E8E8E8;
--bundle-skeleton-highlight: #FFFFFF;
/* CARD HOVER & TRANSITIONS */
--bundle-card-transition-duration: 200ms;
--bundle-card-hover-translate-y: translateY(-2px);
/* TILE QUANTITY BADGE */
--bundle-tile-badge-bg: #000000;
--bundle-tile-badge-text: #FFFFFF;
/* MODAL CLOSE BUTTON */
--bundle-modal-close-color: #777777;
--bundle-modal-close-bg: rgba(255,255,255,0.9);
--bundle-modal-close-hover: #333333;
/* TYPOGRAPHY */
--bundle-button-text-transform: none;
--bundle-button-letter-spacing: 0em;
/* FOCUS / ACCESSIBILITY */
--bundle-focus-outline-color: #000000;
--bundle-focus-outline-width: 2px;
/* PRICING TIER PILLS (Full-Page Bundles) */
--bundle-tier-pill-active-bg: #000000;
--bundle-tier-pill-active-text: #FFFFFF;
--bundle-tier-pill-inactive-bg: rgb(242, 250, 238);
--bundle-tier-pill-inactive-text: #333333;
--bundle-tier-pill-hover-bg: rgb(220, 245, 210);
--bundle-tier-pill-border: 1px solid #000000;
--bundle-tier-pill-border-radius: 8px;
--bundle-tier-pill-height: 52px;
--bundle-tier-pill-font-size: 14px;
--bundle-tier-pill-font-weight: 600;
--bundle-tier-pill-gap: 12px;
/* EB SETTINGS DESIGN ALIASES */
--product-card-bg-color: #FFFFFF;
--product-card-border-radius: 10px;
--product-card-image-border-radius: 8px;
--product-card-image-fit: cover;
--product-card-title-color: #000000;
--product-card-title-font: 16px;
--product-card-title-weight: 700;
--product-card-price-color: #000000;
--product-card-price-font: 16px;
--product-card-price-weight: 700;
--product-card-compared-at-price-color: #000000;
--product-card-compared-at-price-font: 14px;
--product-card-compared-at-price-weight: 400;
--product-card-button-bg-color: #000000;
--product-card-button-text-color: #FFFFFF;
--product-card-button-border-radius: 5px;
--product-card-variant-selector-text-color: #000000;
--product-card-variant-selector-font-size: 14px;
--product-card-variant-selector-font-weight: 400;
--tabs-active-bg-color: #000000;
--tabs-active-text-color: #FFFFFF;
--tabs-inactive-bg-color: #F4F9F9;
--tabs-inactive-text-color: #000000;
--tabs-border-radius: 5px;
--footer-bg-color: #FFFFFF;
--footer-text-color: #000000;
--footer-next-btn-bg-color: #000000;
--footer-next-btn-text-color: #FFFFFF;
--footer-back-btn-bg-color: #6d7175;
--footer-back-btn-text-color: #000000;
--footer-final-price-color: #000000;
--footer-border-radius: 10px;
--footer-buttons-border-radius: 5px;
--empty-state-card-bg-color: #FFFFFF;
--empty-state-card-border-color: #000000;
--empty-state-card-text-color: #000000;
--header-condition-text-font: 16px;
--header-discount-text-font: 14px;
--header-discount-text-color: #000000;
--footer-discount-progress-bar-empty-color: #C1E7C5;
--footer-discount-progress-bar-filled-color: #000000;
}
/* PRODUCT CARD STYLING */
#bundle-builder-app .product-card,
.bundle-builder-modal .modal-body .product-card {
background-color: var(--bundle-product-card-bg);
}
#bundle-builder-app .product-card .product-title,
.bundle-builder-modal .modal-body .product-card .product-title {
color: var(--bundle-product-card-font-color);
font-size: var(--bundle-product-card-font-size);
font-weight: var(--bundle-product-card-font-weight);
}
#bundle-builder-app .product-card .product-image img,
.bundle-builder-modal .modal-body .product-card .product-image img {
object-fit: var(--bundle-product-card-image-fit);
}
#bundle-builder-app .product-card .product-price,
.bundle-builder-modal .modal-body .product-card .product-price {
display: var(--bundle-product-price-display);
color: var(--bundle-product-final-price-color);
font-size: var(--bundle-product-final-price-font-size);
font-weight: var(--bundle-product-final-price-font-weight);
}
#bundle-builder-app .product-grid,
.bundle-builder-modal .modal-body .product-grid {
display: grid;
grid-template-columns: repeat(var(--bundle-product-cards-per-row), 1fr);
gap: 16px;
}
/* PRODUCT CARD SUB-ELEMENTS IN MODAL */
.bundle-builder-modal .modal-body .product-card .product-quantity-selector {
background-color: var(--bundle-quantity-selector-bg);
color: var(--bundle-quantity-selector-text-color);
border-radius: var(--bundle-quantity-selector-border-radius);
}
.bundle-builder-modal .modal-body .product-card .variant-selector {
background-color: var(--bundle-variant-selector-bg);
color: var(--bundle-variant-selector-text-color);
border-radius: var(--bundle-variant-selector-border-radius);
}
.bundle-builder-modal .modal-body .product-card .product-add-btn {
background-color: var(--bundle-button-bg);
color: var(--bundle-button-text-color);
font-size: var(--bundle-button-font-size);
font-weight: var(--bundle-button-font-weight);
border-radius: var(--bundle-button-border-radius);
}
/* BUTTON STYLING */
#bundle-builder-app .add-bundle-to-cart,
.bundle-builder-modal .quantity-control-button {
background-color: var(--bundle-button-bg);
color: var(--bundle-button-text-color);
font-size: var(--bundle-button-font-size);
font-weight: var(--bundle-button-font-weight);
border-radius: var(--bundle-button-border-radius);
border: none;
}
#bundle-builder-app .add-bundle-to-cart:hover {
background-color: var(--bundle-button-hover-bg);
}
#bundle-builder-app .add-bundle-to-cart.disabled {
opacity: 0.6;
cursor: not-allowed;
}
#bundle-builder-app .button-price-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#bundle-builder-app .button-price-strike {
text-decoration: line-through;
font-size: 0.8em;
opacity: 0.7;
}
#bundle-builder-app .button-price-final {
font-size: 1em;
}
/* FOOTER STYLING */
.bundle-builder-modal .bundle-footer-messaging,
.bundle-builder-modal .modal-footer-discount-messaging {
background-color: var(--bundle-footer-bg);
border-radius: var(--bundle-footer-border-radius);
padding: var(--bundle-footer-padding);
}
.bundle-builder-modal .modal-footer {
background-color: var(--bundle-footer-bg);
border-radius: var(--bundle-footer-border-radius);
padding: var(--bundle-footer-padding);
display: flex;
align-items: center;
justify-content: center;
}
.bundle-builder-modal .modal-footer-grouped-content {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.bundle-builder-modal .modal-footer-total-pill {
background-color: var(--bundle-footer-total-bg);
display: var(--bundle-footer-price-display);
padding: 6px 16px;
border-radius: 6px;
align-items: center;
gap: 8px;
}
.bundle-builder-modal .modal-footer-buttons-row {
display: flex;
gap: 15px;
align-items: center;
}
.bundle-builder-modal .modal-footer .total-price-strike {
color: var(--bundle-footer-strike-price-color);
font-size: var(--bundle-footer-strike-font-size);
font-weight: var(--bundle-footer-strike-font-weight);
text-decoration: line-through;
}
.bundle-builder-modal .modal-footer .total-price-final {
color: var(--bundle-footer-final-price-color);
font-size: var(--bundle-footer-final-price-font-size);
font-weight: var(--bundle-footer-final-price-font-weight);
}
.bundle-builder-modal .modal-footer .cart-badge-wrapper {
display: inline-flex;
align-items: center;
gap: 4px;
}
.bundle-builder-modal .modal-footer .cart-icon {
display: inline-block;
vertical-align: middle;
}
.bundle-builder-modal .modal-footer .modal-nav-button.prev-button {
background-color: var(--bundle-footer-back-button-bg);
color: var(--bundle-footer-back-button-text);
border: 1px solid var(--bundle-footer-back-button-border);
border-radius: var(--bundle-footer-back-button-radius);
padding: 12px 56px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bundle-builder-modal .modal-footer .modal-nav-button.next-button {
background-color: var(--bundle-footer-next-button-bg);
color: var(--bundle-footer-next-button-text);
border: 1px solid var(--bundle-footer-next-button-border);
border-radius: var(--bundle-footer-next-button-radius);
padding: 12px 56px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* EMPTY STATE CARDS IN MODAL */
.bundle-builder-modal .modal-body .empty-state-card {
background-color: var(--bundle-empty-state-card-bg);
border: 2.6px var(--bundle-empty-state-border-style) var(--bundle-empty-state-card-border);
}
.bundle-builder-modal .modal-body .empty-state-card-icon,
.bundle-builder-modal .modal-body .empty-state-card-text {
color: var(--bundle-empty-state-text);
}
/* MODAL HEADER STYLING */
.bundle-builder-modal .modal-step-title {
color: var(--modal-step-title-color);
}
/* BUNDLE HEADER TABS STYLING */
.bundle-builder-modal .modal-tabs .bundle-header-tab {
border-radius: var(--bundle-header-tab-radius);
}
.bundle-builder-modal .modal-tabs .bundle-header-tab:not(.active):not(.locked) {
background-color: var(--bundle-header-tab-inactive-bg);
color: var(--bundle-header-tab-inactive-text);
}
.bundle-builder-modal .modal-tabs .bundle-header-tab.active {
background-color: var(--bundle-header-tab-active-bg);
color: var(--bundle-header-tab-active-text);
border: 1px solid var(--bundle-header-tab-active-bg);
}
/* GENERAL STYLING */
#bundle-builder-app,
.bundle-builder-modal .modal-content {
background-color: var(--bundle-bg-color);
}
/* RESPONSIVE */
@media (max-width: 768px) {
#bundle-builder-app .product-grid,
.bundle-builder-modal .modal-body .product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
#bundle-builder-app .product-grid,
.bundle-builder-modal .modal-body .product-grid {
grid-template-columns: 1fr;
}
}
body[wpb-mix-consolidated-design="true"] {
--wpbMix-primary-color: var(--product-card-button-bg-color, #000000);
--wpbMix-primary-button-text-color: var(--product-card-button-text-color, #FFFFFF);
--wpbMix-primary-text-color: var(--product-card-title-color, #000000);
--wpbMix-secondary-color: var(--tabs-inactive-bg-color, #F4F9F9);
--wpbMix-cart-bg-color: var(--footer-bg-color, #FFFFFF);
--wpbMix-cart-text-color: var(--footer-text-color, #000000);
--wpbMix-button-border-radius: var(--product-card-button-border-radius, 5px);
--wpbMix-card-border-radius: var(--product-card-border-radius, 10px);
--wpbMix-primary-font-size: var(--product-card-title-font, 16px);
--wpbMix-primary-font-weight: var(--product-card-title-weight, 700);
--wpbMix-secondary-font-size: var(--header-discount-text-font, 14px);
--wpbMix-body-font-size: var(--product-card-variant-selector-font-size, 14px);
--wpbMix-image-fit: var(--product-card-image-fit, cover);
}
body[wpb-mix-consolidated-design="true"][wpbmix-template-type="PDP_INPAGE"] {
--wpbMix-primary-font-size: calc(var(--product-card-title-font, 16px) - 2px);
--wpbMix-secondary-font-size: calc(var(--header-discount-text-font, 14px) - 2px);
--wpbMix-body-font-size: calc(var(--product-card-variant-selector-font-size, 14px) - 2px);
}
/* ============================================
MERCHANT CUSTOM CSS
Add your own CSS rules below to further
customize the bundle widget appearance.
============================================ */
/* No custom CSS defined */
