← All changes | assets/css/checkout-template.css +130 -5 3.0.1 → 3.3.0 View file →

		@@ -497,9 +497,9 @@
497	497	color: var( --wcf-field-text-color );
498	498	line-height: 21px;
499	499	min-height: 20px;
500	500	overflow: visible;
501		- padding: 0;
	501	+ padding: 0 !important;
502	502	-js-display: flex;
503	503	display: flex;
504	504	align-items: center;
505	505	}
		@@ -657,9 +657,9 @@
657	657	width: 100%;
658	658	}
659	659
660	660	.wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon,
661		-.wcf-embed-checkout-form .woocommerce #order_review button:not( .js-woopayments-copy-test-number ),
	661	+.wcf-embed-checkout-form .woocommerce #order_review button:not( .js-woopayments-copy-test-number ):not( .wcf-shipping-toggle ),
662	662	.wcf-embed-checkout-form .woocommerce #payment button:not( .js-woopayments-copy-test-number ),
663	663	.wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button {
664	664	border: 1px solid;
665	665	border-color: var( --wcf-btn-bg-color );
		@@ -888,12 +888,28 @@
888	888
889	889	.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name {
890	890	-js-display: flex;
891	891	display: flex;
	892	+ flex-wrap: wrap;
892	893	width: 100%;
893	894	align-items: center;
894	895	}
895	896
	897	+/* Name block shares the first line with the quantity instead of pushing it to wrap. */
	898	+.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name > *:first-child {
	899	+ flex: 1 1 0;
	900	+ min-width: 0;
	901	+}
	902	+
	903	+/* Item meta (variation attributes, FBT "Bought together") renders below the name, not squeezed beside it. */
	904	+/* contain stops nowrap meta from widening the table cell on mobile (auto table layout). */
	905	+.wcf-embed-checkout-form table.shop_table tbody tr.cart_item td.product-name dl.variation {
	906	+ flex: 0 0 100%;
	907	+ min-width: 0;
	908	+ margin: 6px 0 0;
	909	+ contain: inline-size;
	910	+}
	911	+
896	912	.wcf-embed-checkout-form .woocommerce form.woocommerce-form-login .form-row label,
897	913	.wcf-embed-checkout-form .woocommerce-checkout .form-row label {
898	914	color: var( --wcf-field-label-color );
899	915	font-size: 13px;
		@@ -1626,8 +1642,14 @@
1626	1642	.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout #wc-stripe-express-checkout-button-separator {
1627	1643	flex: 1 0 100%;
1628	1644	}
1629	1645
	1646	+/* Official Stripe plugin Express Checkout — full width on Instant Checkout (left column is a grid container). */
	1647	+.wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout #wc-stripe-express-checkout-element,
	1648	+.wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout .woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	1649	+ width: 100%;
	1650	+}
	1651	+
1630	1652	.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper {
1631	1653	width: 60%;
1632	1654	padding: 0 45px 0 0;
1633	1655	}
		@@ -2834,13 +2856,84 @@
2834	2856	width: 100%;
2835	2857	}
2836	2858	/* Official - Stripe for WooCommerce Smart Button box CSS */
2837	2859
2838		-.shop_table tr.woocommerce-shipping-totals.shipping {
2839		- display: none;
2840		- visibility: hidden;
	2860	+/* Collapsible shipping row in the order review table. */
	2861	+.wcf-embed-checkout-form table.shop_table button.wcf-shipping-toggle {
	2862	+ -js-display: inline-flex;
	2863	+ display: inline-flex;
	2864	+ align-items: center;
	2865	+ gap: 6px;
	2866	+ margin: 0;
	2867	+ padding: 0;
	2868	+ border: 0;
	2869	+ border-radius: 0;
	2870	+ background: none;
	2871	+ box-shadow: none;
	2872	+ color: inherit;
	2873	+ font: inherit;
	2874	+ letter-spacing: inherit;
	2875	+ text-align: inherit;
	2876	+ text-transform: inherit;
	2877	+ cursor: pointer;
2841	2878	}
2842	2879
	2880	+.wcf-embed-checkout-form table.shop_table button.wcf-shipping-toggle:hover,
	2881	+.wcf-embed-checkout-form table.shop_table button.wcf-shipping-toggle:focus,
	2882	+.wcf-embed-checkout-form table.shop_table button.wcf-shipping-toggle:active {
	2883	+ background: none;
	2884	+ box-shadow: none;
	2885	+ color: inherit;
	2886	+}
	2887	+
	2888	+.wcf-embed-checkout-form table.shop_table .wcf-shipping-toggle-icon {
	2889	+ font-size: 0.75em;
	2890	+ line-height: 1;
	2891	+ transition: transform 0.2s ease-in-out;
	2892	+}
	2893	+
	2894	+.wcf-embed-checkout-form table.shop_table .wcf-shipping-toggle[aria-expanded="true"] .wcf-shipping-toggle-icon {
	2895	+ transform: rotate( 180deg );
	2896	+}
	2897	+
	2898	+.wcf-embed-checkout-form table.shop_table tr.wcf-shipping-totals-details > td {
	2899	+ padding-top: 0;
	2900	+}
	2901	+
	2902	+.wcf-embed-checkout-form table.shop_table .wcf-shipping-package + .wcf-shipping-package {
	2903	+ margin-top: 10px;
	2904	+}
	2905	+
	2906	+.wcf-embed-checkout-form table.shop_table .wcf-shipping-package-name {
	2907	+ display: block;
	2908	+ font-size: 0.9em;
	2909	+ opacity: 0.7;
	2910	+}
	2911	+
	2912	+.wcf-embed-checkout-form table.shop_table ul.wcf-shipping-package-methods {
	2913	+ margin: 0;
	2914	+ padding: 0;
	2915	+ list-style: none;
	2916	+}
	2917	+
	2918	+.wcf-embed-checkout-form table.shop_table ul.wcf-shipping-package-methods li {
	2919	+ margin: 0;
	2920	+ padding: 0;
	2921	+ font-size: 0.9em;
	2922	+ opacity: 0.7;
	2923	+}
	2924	+
	2925	+.wcf-embed-checkout-form table.shop_table ul.wcf-shipping-package-methods li.wcf-shipping-method-chosen {
	2926	+ font-weight: 500;
	2927	+ opacity: 1;
	2928	+}
	2929	+
	2930	+.wcf-embed-checkout-form table.shop_table .wcf-shipping-totals-details .woocommerce-shipping-destination {
	2931	+ margin: 4px 0 0 0;
	2932	+ font-size: 0.9em;
	2933	+ opacity: 0.7;
	2934	+}
	2935	+
2843	2936	.wcf-embed-checkout-form table.shop_table .wc_shipping_dpd_terminals {
2844	2937	display: none;
2845	2938	visibility: hidden;
2846	2939	}
		@@ -4179,5 +4272,37 @@
4179	4272	color: var( --wcf-field-error-color, #e2401c );
4180	4273	font-size: 13px;
4181	4274	display: block;
4182	4275	margin-top: 5px;
	4276	+}
	4277	+
	4278	+/* FBT provenance meta — stacked annotation: muted label line over a single ellipsized name line. */
	4279	+.wcf-embed-checkout-form table.shop_table td dl dt.variation-Boughttogether,
	4280	+.wcf-embed-checkout-form table.shop_table td dl dd.variation-Boughttogether {
	4281	+ float: none;
	4282	+ display: block;
	4283	+ margin: 0;
	4284	+ padding: 0 0 0 8px;
	4285	+ border-left: 2px solid var( --wcf-field-border-color );
	4286	+ font-size: 14px;
	4287	+ font-weight: 400;
	4288	+ line-height: 1.4;
	4289	+}
	4290	+
	4291	+.wcf-embed-checkout-form table.shop_table td dl dt.variation-Boughttogether {
	4292	+ color: var( --wcf-field-label-color );
	4293	+}
	4294	+
	4295	+.wcf-embed-checkout-form table.shop_table td dl dd.variation-Boughttogether {
	4296	+ color: var( --wcf-field-text-color );
	4297	+}
	4298	+
	4299	+.wcf-embed-checkout-form table.shop_table td dl dd.variation-Boughttogether p {
	4300	+ margin: 0;
	4301	+}
	4302	+
	4303	+.wcf-embed-checkout-form .wcf-fbt-parent-name {
	4304	+ display: block;
	4305	+ overflow: hidden;
	4306	+ white-space: nowrap;
	4307	+ text-overflow: ellipsis;
4183	4308	}