/* Woo Bundles — mix-and-match selector (compact list layout) */ body.wb-mix-and-match form.cart:not(.wb-bundle-form) .qty, body.wb-mix-and-match form.cart:not(.wb-bundle-form) .single_add_to_cart_button, body.wb-mix-and-match form.cart.variations_form .qty, body.wb-mix-and-match .product .summary > form.cart:not(.wb-bundle-form) { display: none !important; } .wb-bundle-selector { margin: 0 0 1.5em; padding: 1em; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 6px; max-width: 100%; box-sizing: border-box; } .wb-bundle-selector *, .wb-bundle-selector *::before, .wb-bundle-selector *::after { box-sizing: border-box; } .wb-bundle-selector h2.wb-bundle-selector__title, .wb-bundle-selector__title { margin: 0 0 0.75em; font-size: 1.1em; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: inherit; } .wb-bundle-selector__notes { margin: 0 0 1em; padding: 0.6em 0.75em; background: #fff; border-left: 3px solid #b88746; font-size: 0.85em; line-height: 1.4; } .wb-bundle-selector__notes p { margin: 0; } .wb-bundle-grid { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-direction: column; gap: 4px; } .wb-bundle-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; padding: 0.5em 0.75em; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; min-height: 48px; } .wb-bundle-card--oos { background: #f3f3f3; color: #888; opacity: 0.7; } .wb-bundle-card__name { flex: 1 1 auto; min-width: 0; font-size: 0.95em; font-weight: 500; line-height: 1.2; word-wrap: break-word; } .wb-bundle-card__oos-label { display: inline; margin-left: 0.25em; font-size: 0.85em; color: #c00; font-weight: 400; } .wb-bundle-card__controls { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35em; } .wb-bundle-card__btn { flex: 0 0 auto; width: 32px; height: 32px; min-width: 32px; padding: 0; font-size: 1.1em; font-weight: 700; line-height: 1; background: #b88746; color: #fff; border: 0; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .wb-bundle-card__btn:disabled { background: #ccc; cursor: not-allowed; } .wb-bundle-card__btn[aria-invalid="true"] { background: #c00; } .wb-bundle-card__qty { flex: 0 0 auto; min-width: 1.75em; font-weight: 700; font-size: 1em; text-align: center; } .wb-bundle-selector__status { display: flex; flex-direction: column; gap: 0.25em; margin: 0 0 0.75em; padding: 0.5em 0.75em; background: #fff; border: 1px solid #ddd; border-radius: 4px; } .wb-bundle-selector__total { font-size: 1em; font-weight: 700; } .wb-bundle-selector__validation { font-size: 0.85em; color: #444; } .wb-bundle-selector__validation--error { color: #c00; font-weight: 600; } .wb-bundle-selector__validation--ready { color: #2c8a2c; font-weight: 600; } .wb-bundle-submit { width: 100%; min-height: 44px; font-size: 1em; font-weight: 600; } .wb-bundle-submit:disabled { opacity: 0.5; cursor: not-allowed; } /* * Gate the WC Stripe Gateway Express Checkout buttons (Apple Pay, Google * Pay, Link) on bundle pages: hide them until exactly the required number * of items is selected. The `wb-bundle-incomplete` class on is * toggled by bundle-selector.js whenever the selection state changes. * * Why this is necessary: * - WC Stripe Gateway renders #wc-stripe-express-checkout-element twice * on bundle pages — once inside .wb-bundle-selector (via the * woocommerce_after_add_to_cart_form hook we fire from * templates/single-product/bundle-selector.php), and once inside the * Woodmart sticky add-to-cart bar (wd-sticky-btn) which uses the * standard simple add-to-cart template. * - Without the body-level class we'd only gate the first instance and * the sticky-bar buttons would remain clickable from 0/14 — which * would fail server-side bundle validation and surface as "Invalid * shipping address" in Google Pay because the empty cart cannot be * priced for shipping. * - Using !important is required because the WC Stripe Gateway plugin * sets `style="display: …"` inline on the container after it confirms * a usable payment method; only !important wins over the inline rule. */ body.wb-bundle-incomplete #wc-stripe-express-checkout-element, body.wb-bundle-incomplete #wc-stripe-express-checkout__order-attribution-inputs { display: none !important; } /* Touch-target padding on small screens — buttons stay visually 32px but have a larger hit area via padding. */ @media ( max-width: 480px ) { .wb-bundle-card { padding: 0.4em 0.6em; } .wb-bundle-card__name { font-size: 0.9em; } }