/* * FUMOT_GLOBAL_QUANTITY_UI_V1 * * Visual layer only. * WooCommerce remains the quantity / cart authority. */ /* ========================================================= QUANTITY SHELL ========================================================= */ body.single-product form.cart .quantity, body.single-product .woocommerce-variation-add-to-cart .quantity{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:146px !important; height:48px !important; padding:0 !important; margin:0 !important; overflow:hidden !important; background:#ffffff !important; border:1px solid #d9e0dd !important; border-radius:12px !important; box-shadow: 0 1px 2px rgba(17,45,36,.04) !important; vertical-align:middle !important; } /* ========================================================= ALL FUMOT MINUS / PLUS BUTTONS ========================================================= */ body.single-product form.cart .quantity .fumot-global-qty-step, body.single-product form.cart .quantity .ft20-qty-btn, body.single-product form.cart .quantity .ft25-qty-step, body.single-product form.cart .quantity .fe50-qty-step, body.single-product form.cart .quantity .fe80-qty-step, body.single-product .woocommerce-variation-add-to-cart .quantity .fumot-global-qty-step, body.single-product .woocommerce-variation-add-to-cart .quantity .ft20-qty-btn, body.single-product .woocommerce-variation-add-to-cart .quantity .ft25-qty-step, body.single-product .woocommerce-variation-add-to-cart .quantity .fe50-qty-step, body.single-product .woocommerce-variation-add-to-cart .quantity .fe80-qty-step{ display:flex !important; align-items:center !important; justify-content:center !important; position:static !important; float:none !important; flex:0 0 44px !important; width:44px !important; min-width:44px !important; max-width:44px !important; height:46px !important; min-height:46px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#f6f8f7 !important; color:#173f33 !important; font-family:Arial, sans-serif !important; font-size:24px !important; font-weight:500 !important; line-height:1 !important; text-align:center !important; opacity:1 !important; visibility:visible !important; cursor:pointer !important; box-shadow:none !important; -webkit-appearance:none !important; appearance:none !important; transition: background .18s ease, color .18s ease !important; } body.single-product form.cart .quantity .fumot-global-qty-step:hover, body.single-product form.cart .quantity .ft20-qty-btn:hover, body.single-product form.cart .quantity .ft25-qty-step:hover, body.single-product form.cart .quantity .fe50-qty-step:hover, body.single-product form.cart .quantity .fe80-qty-step:hover{ background:#eaf2ee !important; color:#0e3328 !important; } /* ========================================================= NATIVE WOO QUANTITY INPUT ========================================================= */ body.single-product form.cart .quantity input.qty, body.single-product .woocommerce-variation-add-to-cart .quantity input.qty{ display:block !important; flex:0 0 58px !important; width:58px !important; min-width:58px !important; max-width:58px !important; height:46px !important; min-height:46px !important; margin:0 !important; padding:0 4px !important; border:0 !important; border-left:1px solid #e2e7e4 !important; border-right:1px solid #e2e7e4 !important; border-radius:0 !important; background:#ffffff !important; color:#163a30 !important; font-size:16px !important; font-weight:700 !important; line-height:46px !important; text-align:center !important; opacity:1 !important; visibility:visible !important; box-shadow:none !important; -moz-appearance:textfield !important; appearance:textfield !important; } body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button, body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button{ margin:0 !important; -webkit-appearance:none !important; } /* ========================================================= ACCESSIBILITY / ACTIVE ========================================================= */ body.single-product form.cart .quantity button:focus-visible{ position:relative !important; z-index:2 !important; outline:2px solid #2d7657 !important; outline-offset:-3px !important; } body.single-product form.cart .quantity button:active{ background:#dfece6 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ body.single-product form.cart .quantity, body.single-product .woocommerce-variation-add-to-cart .quantity{ min-width:140px !important; height:46px !important; border-radius:11px !important; } body.single-product form.cart .quantity .fumot-global-qty-step, body.single-product form.cart .quantity .ft20-qty-btn, body.single-product form.cart .quantity .ft25-qty-step, body.single-product form.cart .quantity .fe50-qty-step, body.single-product form.cart .quantity .fe80-qty-step{ flex-basis:44px !important; width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; font-size:23px !important; } body.single-product form.cart .quantity input.qty{ flex-basis:52px !important; width:52px !important; min-width:52px !important; max-width:52px !important; height:44px !important; min-height:44px !important; line-height:44px !important; } } /* ========================================================= FUMOT_QUANTITY_ROW_LAYOUT_V1_1 FIX: Quantity selector and Add to Cart must be separate columns. No overlap. WooCommerce remains the commerce authority. ========================================================= */ /* ========================================================= PURCHASE ROW ========================================================= */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button{ display:grid !important; grid-template-columns: 146px minmax(0, 1fr) !important; column-gap:12px !important; row-gap:0 !important; align-items:stretch !important; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; position:relative !important; box-sizing:border-box !important; overflow:visible !important; } /* ========================================================= QUANTITY = COLUMN 1 ========================================================= */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > .quantity{ grid-column:1 !important; display:flex !important; align-items:center !important; justify-content:stretch !important; width:146px !important; min-width:146px !important; max-width:146px !important; height:48px !important; margin:0 !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; float:none !important; clear:none !important; z-index:1 !important; box-sizing:border-box !important; } /* ========================================================= ADD TO CART = COLUMN 2 ========================================================= */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > button.single_add_to_cart_button, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button{ grid-column:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:none !important; height:48px !important; min-height:48px !important; margin:0 !important; padding: 0 18px !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; float:none !important; clear:none !important; z-index:1 !important; box-sizing:border-box !important; white-space:nowrap !important; overflow:hidden !important; } /* ========================================================= QUANTITY INTERNAL WIDTHS ========================================================= */ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fumot-global-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft20-qty-btn, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft25-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe50-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe80-qty-step{ flex: 0 0 44px !important; width:44px !important; min-width:44px !important; max-width:44px !important; height:46px !important; position:static !important; margin:0 !important; transform:none !important; box-sizing:border-box !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity input.qty{ flex: 0 0 58px !important; width:58px !important; min-width:58px !important; max-width:58px !important; height:46px !important; position:static !important; margin:0 !important; transform:none !important; box-sizing:border-box !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button{ grid-template-columns: 132px minmax(0, 1fr) !important; column-gap:10px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > .quantity{ width:132px !important; min-width:132px !important; max-width:132px !important; height:46px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fumot-global-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft20-qty-btn, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft25-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe50-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe80-qty-step{ flex: 0 0 40px !important; width:40px !important; min-width:40px !important; max-width:40px !important; height:44px !important; font-size:22px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity input.qty{ flex: 0 0 52px !important; width:52px !important; min-width:52px !important; max-width:52px !important; height:44px !important; line-height:44px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > button.single_add_to_cart_button, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button{ height:46px !important; min-height:46px !important; padding: 0 12px !important; font-size:15px !important; line-height:1.15 !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:380px){ body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button{ grid-template-columns: 124px minmax(0, 1fr) !important; column-gap:8px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button > .quantity{ width:124px !important; min-width:124px !important; max-width:124px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fumot-global-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft20-qty-btn, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .ft25-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe50-qty-step, body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity .fe80-qty-step{ flex-basis:38px !important; width:38px !important; min-width:38px !important; max-width:38px !important; } body.single-product form.variations_form.cart .woocommerce-variation-add-to-cart .quantity input.qty{ flex-basis:48px !important; width:48px !important; min-width:48px !important; max-width:48px !important; } } /* FUMOT_QUANTITY_ROW_LAYOUT_V1_1_END */ /* ========================================================= FUMOT_QTY_LAYOUT_V1_2_25K_50K 25K + 50K have a nested structure: variations_button -> buy-top -> price -> qty-wrap -> quantity -> add-to-cart button V1.1 assumed quantity was a direct child. This override restores the correct nested layout. CSS ONLY. WooCommerce behavior remains untouched. ========================================================= */ /* ========================================================= 25K / 50K: REMOVE V1.1 OUTER GRID ========================================================= */ body.single-product #ft25NativeBuy .woocommerce-variation-add-to-cart.variations_button, body.single-product #fe50NativeBuy .woocommerce-variation-add-to-cart.variations_button{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; position:relative !important; overflow:visible !important; box-sizing:border-box !important; } /* ========================================================= PRICE + QUANTITY ROW ========================================================= */ body.single-product #ft25NativeBuy .ft25-buy-top, body.single-product #fe50NativeBuy .fe50-buy-top{ display:grid !important; grid-template-columns: minmax(0, 1fr) 146px !important; column-gap:18px !important; align-items:end !important; width:100% !important; max-width:100% !important; margin:0 0 14px !important; padding:0 !important; position:relative !important; box-sizing:border-box !important; } /* ========================================================= PRICE COLUMN ========================================================= */ body.single-product #ft25NativeBuy .ft25-buy-price, body.single-product #fe50NativeBuy .fe50-buy-price{ grid-column:1 !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:relative !important; box-sizing:border-box !important; } body.single-product #ft25NativeBuy .ft25-buy-price-label, body.single-product #fe50NativeBuy .fe50-buy-price-label{ display:block !important; margin:0 0 5px !important; line-height:1.2 !important; } body.single-product #ft25NativeBuy .ft25-price, body.single-product #fe50NativeBuy .fe50-price{ display:block !important; margin:0 !important; line-height:1.05 !important; white-space:nowrap !important; } /* ========================================================= QUANTITY COLUMN ========================================================= */ body.single-product #ft25NativeBuy .ft25-qty-wrap, body.single-product #fe50NativeBuy .fe50-qty-wrap{ grid-column:2 !important; display:block !important; width:146px !important; min-width:146px !important; max-width:146px !important; margin:0 !important; padding:0 !important; position:relative !important; box-sizing:border-box !important; } body.single-product #ft25NativeBuy .ft25-qty-label, body.single-product #fe50NativeBuy .fe50-qty-label{ display:block !important; width:100% !important; margin:0 0 5px !important; padding:0 !important; line-height:1.2 !important; position:static !important; transform:none !important; } /* ========================================================= NATIVE WOO QUANTITY ========================================================= */ body.single-product #ft25NativeBuy .ft25-qty-wrap .quantity, body.single-product #fe50NativeBuy .fe50-qty-wrap .quantity{ display:flex !important; align-items:center !important; justify-content:stretch !important; width:146px !important; min-width:146px !important; max-width:146px !important; height:48px !important; margin:0 !important; padding:0 !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; float:none !important; transform:none !important; box-sizing:border-box !important; } /* ========================================================= ADD TO CART: FULL WIDTH BELOW PRICE + QUANTITY ========================================================= */ body.single-product #ft25NativeBuy .woocommerce-variation-add-to-cart > .single_add_to_cart_button, body.single-product #fe50NativeBuy .woocommerce-variation-add-to-cart > .single_add_to_cart_button{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:100% !important; max-width:100% !important; height:52px !important; min-height:52px !important; margin:0 !important; padding:0 20px !important; position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; float:none !important; transform:none !important; box-sizing:border-box !important; white-space:nowrap !important; clear:both !important; } /* ========================================================= CART META ========================================================= */ body.single-product #ft25NativeBuy .ft25-cart-meta, body.single-product #fe50NativeBuy .fe50-cart-meta{ width:100% !important; margin-top:14px !important; clear:both !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ body.single-product #ft25NativeBuy .ft25-buy-top, body.single-product #fe50NativeBuy .fe50-buy-top{ grid-template-columns: minmax(0, 1fr) 132px !important; column-gap:14px !important; margin-bottom:12px !important; } body.single-product #ft25NativeBuy .ft25-qty-wrap, body.single-product #fe50NativeBuy .fe50-qty-wrap{ width:132px !important; min-width:132px !important; max-width:132px !important; } body.single-product #ft25NativeBuy .ft25-qty-wrap .quantity, body.single-product #fe50NativeBuy .fe50-qty-wrap .quantity{ width:132px !important; min-width:132px !important; max-width:132px !important; height:46px !important; } body.single-product #ft25NativeBuy .woocommerce-variation-add-to-cart > .single_add_to_cart_button, body.single-product #fe50NativeBuy .woocommerce-variation-add-to-cart > .single_add_to_cart_button{ width:100% !important; min-width:100% !important; height:50px !important; min-height:50px !important; margin:0 !important; font-size:16px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:380px){ body.single-product #ft25NativeBuy .ft25-buy-top, body.single-product #fe50NativeBuy .fe50-buy-top{ grid-template-columns: minmax(0, 1fr) 124px !important; column-gap:10px !important; } body.single-product #ft25NativeBuy .ft25-qty-wrap, body.single-product #fe50NativeBuy .fe50-qty-wrap, body.single-product #ft25NativeBuy .ft25-qty-wrap .quantity, body.single-product #fe50NativeBuy .fe50-qty-wrap .quantity{ width:124px !important; min-width:124px !important; max-width:124px !important; } } /* FUMOT_QTY_LAYOUT_V1_2_25K_50K_END */