Where to Add Custom CSS

Option 1: MOD Bundles Customization (Recommended)

CSS added here persists across theme changes.

Theme CSS is lost when you switch themes.

Use browser inspector (right-click → Inspect) to find exact class names for any element.

.bundle-add-to-cart-btn {  background-color: #4A90D9;  color: white;}

.mix-match-card.selected,.pack-builder-card.selected {  border: 2px solid #4A90D9;  box-shadow: 0 0 10px rgba(74, 144, 217, 0.3);}

.bundle-product-image {  transition: transform 0.3s ease;}.bundle-product-card:hover .bundle-product-image {  transform: scale(1.05);}

@media (max-width: 768px) {  .bundle-add-btn {    min-height: 48px;    padding: 12px 20px;  }  .bundle-product-title {    font-size: 14px;  }}

.bundle-product-price { display: none; }.bundle-compare-price { display: none; }

.bundle-add-btn {  background-color: var(--color-button);  color: var(--color-button-text);  font-family: var(--font-heading);}

Sometimes needed to override existing styles:

.bundle-add-btn {  background-color: #4A90D9 !important;}

Use sparingly — it makes future changes harder.

CSS not applying — Check syntax (missing semicolons/brackets), verify selector, clear cache, try !important
Theme conflicts — Use more specific selectors or !important; inspect element to find conflicting rules
Mobile looks wrong — Add @media queries; test on actual device