/* ========================================================== ABA_BRAND_V7_PRODUCT_DETAIL_CANARY_V1 Shared WooCommerce Product Detail Elementor Single Product template 449 Branding / responsive adaptation only. No changes to: - WooCommerce templates - product data - Add to Cart behavior - quantity behavior - PayPal/PPCP - reCAPTCHA ========================================================== */ /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ body.single-product .elementor-449 .product_title, body.single-product .elementor-449 .aba_description .elementor-heading-title, body.single-product .elementor-449 .elementor-widget-woocommerce-product-content, body.single-product .elementor-449 .elementor-widget-woocommerce-product-content p, body.single-product .elementor-449 .woocommerce-product-details__short-description, body.single-product .elementor-449 .woocommerce-product-details__short-description p, body.single-product .elementor-449 .product_meta, body.single-product .elementor-449 .product_meta a, body.single-product .elementor-449 form.cart input.qty, body.single-product .elementor-449 form.cart button.single_add_to_cart_button { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; } body.single-product .elementor-449 .product_title, body.single-product .elementor-449 .aba_description .elementor-heading-title { color: #2E2E2E !important; font-weight: 300 !important; } body.single-product .elementor-449 .elementor-widget-woocommerce-product-content, body.single-product .elementor-449 .elementor-widget-woocommerce-product-content p, body.single-product .elementor-449 .woocommerce-product-details__short-description, body.single-product .elementor-449 .woocommerce-product-details__short-description p, body.single-product .elementor-449 .product_meta { color: #2E2E2E !important; font-weight: 400 !important; } /* ---------------------------------------------------------- PRICE ---------------------------------------------------------- */ body.single-product .elementor-449 .elementor-widget-woocommerce-product-price .price, body.single-product .elementor-449 .elementor-widget-woocommerce-product-price .price .amount, body.single-product .elementor-449 .elementor-widget-woocommerce-product-price .price bdi { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; color: #2E2E2E !important; font-weight: 700 !important; } /* ---------------------------------------------------------- ADD TO CART Removes legacy #24D1E8 / #45EAFF gradient. ---------------------------------------------------------- */ body.single-product .elementor-449 button.single_add_to_cart_button { background: #00D6FA !important; background-image: none !important; color: #2E2E2E !important; border-color: transparent !important; font-weight: 700 !important; } body.single-product .elementor-449 button.single_add_to_cart_button:hover, body.single-product .elementor-449 button.single_add_to_cart_button:focus { background: #FB756A !important; background-image: none !important; color: #2E2E2E !important; } /* ---------------------------------------------------------- QUANTITY CONTROL ---------------------------------------------------------- */ body.single-product .elementor-449 .op_product_single_content_block form.cart .quantity input.qty { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; color: #2E2E2E !important; background: #FFFFFF !important; border: 1px solid rgba(46, 46, 46, 0.22) !important; border-radius: 8px !important; box-sizing: border-box !important; } body.single-product .elementor-449 .op_product_single_content_block form.cart .quantity input.qty:focus { border-color: #00D6FA !important; outline: none !important; } body.single-product .elementor-449 .op_product_single_content_block form.cart .quantity .quantity-nav { background: #FFFFFF !important; } body.single-product .elementor-449 .op_product_single_content_block form.cart .quantity .quantity-nav .quantity-button { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; color: #2E2E2E !important; } body.single-product .elementor-449 .op_product_single_content_block form.cart .quantity .quantity-nav .quantity-button:hover { color: #00D6FA !important; } /* ---------------------------------------------------------- SALE BADGE ? only if a Product Detail actually renders one ---------------------------------------------------------- */ body.single-product .elementor-449 .onsale { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; background: #FB756A !important; color: #2E2E2E !important; } /* ---------------------------------------------------------- RELATED / RECOMMENDED PRODUCT UI ---------------------------------------------------------- */ body.single-product .elementor-449 :is( .related.products, .upsells.products, .elementor-widget-woocommerce-products ) :is( h2, .woocommerce-loop-product__title, .price, .price .amount ) { font-family: var(--aba-font-family, "Elevance", sans-serif) !important; } body.single-product .elementor-449 :is( .related.products, .upsells.products, .elementor-widget-woocommerce-products ) .woocommerce-loop-product__title { color: #2E2E2E !important; } /* ========================================================== MOBILE PURCHASE ROW ========================================================== */ @media (max-width: 767px) { /* * Laser/service Product Detail only. * * Known Obagi quantity styling is intentionally excluded. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table .e-atc-qty-button-holder { display: grid !important; grid-template-columns: minmax(0, 1fr) 86px !important; gap: 10px !important; align-items: stretch !important; width: calc(100% - 76px) !important; margin-left: 76px !important; margin-right: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* * CTA remains first, as in the current visual order. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table .e-atc-qty-button-holder button.single_add_to_cart_button { order: 1 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } /* * Quantity owns an explicit 86px column. * * Previous CSS placed quantity-nav at left:100%, * causing the stepper to extend beyond the viewport. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity { order: 2 !important; position: relative !important; width: 86px !important; min-width: 86px !important; height: 50px !important; margin: 0 !important; box-sizing: border-box !important; } body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity input.qty { width: 56px !important; height: 50px !important; margin: 0 !important; padding: 0 6px !important; text-align: center !important; } /* * Keep +/- navigation INSIDE the reserved quantity column. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity .quantity-nav { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: 30px !important; height: 50px !important; box-sizing: border-box !important; } body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity .quantity-nav .quantity-button { height: 25px !important; line-height: 25px !important; font-size: 18px !important; box-sizing: border-box !important; } } /* ========================================================== ABA_BRAND_V7_PRODUCT_DETAIL_MOBILE_SAFE_CORRIDOR_V2 Narrow-mobile correction after external visual QA. Fixed viewport controls: LEFT = PPCP Google reCAPTCHA RIGHT = XOO floating basket At <=480px the purchase controls stay inside a central safe corridor with 80px reserved on each side. This does NOT move or alter either third-party control. ========================================================== */ @media (max-width: 480px) { /* * Normal laser/service products only. * * Preserve the existing Obagi-specific quantity system. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table .e-atc-qty-button-holder { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; width: calc(100% - 160px) !important; max-width: calc(100% - 160px) !important; margin-left: 80px !important; margin-right: 80px !important; box-sizing: border-box !important; overflow: visible !important; } /* * CTA occupies the complete center corridor. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table .e-atc-qty-button-holder button.single_add_to_cart_button { order: 1 !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; padding-left: 8px !important; padding-right: 8px !important; white-space: normal !important; line-height: 1.2 !important; box-sizing: border-box !important; } /* * Quantity becomes its own second row. * Centering prevents the right-side XOO basket from * covering the quantity / +/- controls. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity { order: 2 !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; height: 50px !important; margin: 0 auto !important; position: relative !important; box-sizing: border-box !important; } /* * Retain the V1 contained quantity geometry. */ body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity input.qty { width: 56px !important; max-width: 56px !important; height: 50px !important; margin: 0 !important; } body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table form.cart .quantity .quantity-nav { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: 30px !important; height: 50px !important; } } /* ========================================================== ABA_BRAND_V7_PRODUCT_DETAIL_RECAPTCHA_CONTAINMENT_V3 Existing global legacy behavior: normal = 70px collapsed hover = 256px expanded On narrow mobile the 256px hover expansion covers the WooCommerce purchase controls even with an 80px left safe corridor. Keep the existing visible 70px collapsed presentation on Single Product <=480px, including hover. The badge is NOT hidden, moved, recolored or disabled. ========================================================== */ @media (max-width: 480px) { html body.single-product .grecaptcha-badge, html body.single-product .grecaptcha-badge:hover { width: 70px !important; max-width: 70px !important; overflow: hidden !important; transition: none !important; } } /* ========================================================== ABA_BRAND_V7_PRODUCT_DETAIL_PPCP_DESKTOP_CLEARANCE_V4 Normal Product Detail / Elementor Single Product 449. PPCP wrapper follows form.cart directly in DOM. Existing legacy theme already provides 40px PPCP clearance on <=767px. Desktop/tablet had no corresponding separation, allowing the PayPal surface to overlap the lower portion of the Sessions / quantity control. V4 adds vertical clearance only. PayPal/PPCP itself is not modified. ========================================================== */ @media (min-width: 768px) { body.single-product .elementor-449.elementor-location-single.product:not( .product_shipping_class-obagi ) .op_product_buy_table .ppc-button-wrapper { margin-top: 24px !important; } }