/* ========================================================================== wc-flow.css: cart, checkout, order received, my account and WooCommerce notices in the site's look. Loaded only there (pilpelet_is_wc_flow()). Covers both implementations a cloned site may have: the block cart and checkout (wc-block-*, wp-block-woocommerce-*) and the classic shortcodes (.woocommerce-cart-form, .cart_totals, form.checkout, #payment). Gateways are left alone: nothing here targets #ppc-button*, .ppcp-* or a gateway iframe; the payment area only gets a neutral container (.pil-pay) and room to grow. ========================================================================== */ /* WooCommerce's own colour variables (woocommerce-general), mapped to the palette */ :root { --wc-primary: var(--buy); --wc-primary-text: var(--buy-text); --wc-secondary: var(--paper-light); --wc-secondary-text: var(--text); --wc-highlight: var(--olive); --wc-content-bg: var(--paper-light); --wc-subtext: var(--text-muted); --wc-form-border-color: #77715F; --wc-red: var(--red); --wc-green: var(--ok); --wc-blue: var(--link); } /* the flow pages get a wider measure than reading pages */ :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .entry-content { max-width: 1100px; font-size: var(--t-body); line-height: var(--lh-body); } :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .entry-content > * + * { margin-block-start: 0; } :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .entry-content .alignwide { max-width: 100%; } .woocommerce, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--font-body); color: var(--text); } :is(.woocommerce, .wc-block-components-sidebar-layout, .wp-block-woocommerce-empty-cart-block) :is(h2, h3) { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-head); color: var(--text); } .woocommerce :is(h2, h3) { font-size: var(--t-h3); margin-block: var(--s-6) var(--s-4); } :is(.woocommerce, .wc-block-components-sidebar-layout) :is(.amount, .wc-block-formatted-money-amount, .wc-block-components-totals-item__value) { font-variant-numeric: tabular-nums; unicode-bidi: isolate; } /* ---------- buttons: the site's «הוספה לעגלה» style (the sky with dark text, --buy) ---------- */ .woocommerce :is(a.button, button.button, input.button, #respond input#submit):not([class*="ppcp"]):not([id^="ppc"]), .wc-block-components-button:not(.is-link):not([class*="ppcp"]), .wp-block-woocommerce-empty-cart-block .wp-block-button__link, .pil-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--r-control); background: var(--buy); color: var(--buy-text); font: 700 var(--t-body)/1.2 var(--font-body); text-decoration: none; text-shadow: none; cursor: pointer; transition: background-color var(--dur-feedback) var(--ease-standard); } .woocommerce :is(a.button, button.button, input.button):not([class*="ppcp"]):not([id^="ppc"]):hover, .wc-block-components-button:not(.is-link):not([class*="ppcp"]):hover, .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover, .pil-btn:hover { background: var(--buy-hover); color: var(--buy-text); } .woocommerce :is(a.button, button.button, input.button):disabled, .woocommerce :is(a.button, button.button, input.button).disabled { background: var(--buy); color: var(--buy-text); opacity: .55; padding: 0 26px; } /* secondary actions (apply coupon, update cart) are outlined, so the one sky action leads */ .woocommerce :is(button[name="apply_coupon"], button[name="update_cart"]), .wc-block-components-totals-coupon__button { background: transparent !important; color: var(--focus) !important; box-shadow: inset 0 0 0 2px var(--focus); } .woocommerce :is(button[name="apply_coupon"], button[name="update_cart"]):hover, .wc-block-components-totals-coupon__button:hover { background: var(--paper) !important; } .woocommerce #place_order, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button, .woocommerce .checkout-button { width: 100%; min-height: 56px; font-size: var(--t-lead); } /* ---------- fields ---------- */ .woocommerce :is(input.input-text, textarea, select, .select2-selection), .woocommerce .quantity input.qty, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-components-quantity-selector { border: 1.5px solid #77715F; border-radius: var(--r-control); background-color: var(--paper-light); color: var(--text); } .woocommerce :is(input.input-text, select), .woocommerce .quantity input.qty { min-height: 48px; padding: 8px 12px; } .woocommerce .select2-container .select2-selection--single { height: 48px; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; } .woocommerce .quantity input.qty { width: 4.5em; text-align: center; font: 700 1rem var(--font-body); color: var(--ink); } .woocommerce-shipping-methods input[type="radio"], .wc-block-components-radio-control__input { accent-color: var(--ink); } .woocommerce form .form-row label, .wc-block-components-text-input label { color: var(--text-muted); } .woocommerce form .form-row .required { color: var(--red); text-decoration: none; } .wc-block-components-quantity-selector { min-height: 44px; width: 136px; } .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { min-height: 42px; font: 700 1.125rem/1 var(--font-body); color: var(--ink); border-inline: 1px solid var(--rule); } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width: 44px; min-height: 42px; color: var(--ink); opacity: 1; font: 700 22px/1 var(--font-body); } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--pale-blue); } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { opacity: .6; } /* WooCommerce's own :focus { outline: none } is more specific than the shared ring below: the stepper gets its ring here, inside the joined group */ .wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__button, .wc-block-components-quantity-selector__input):focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; box-shadow: none; } .woocommerce :is(input, select, textarea, button, a):focus-visible, :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(input, select, textarea, button, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; } .woocommerce form .form-row :is(input.input-text, textarea, select), .wc-block-components-form .wc-block-components-text-input :is(input, textarea), .wc-block-components-text-input :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) { background-color: var(--paper-light); } /* WooCommerce's block fields keep a stock grey edge at (0,3,1): the form's own edge, the same as the themed country select beside them */ .wp-block-woocommerce-checkout .wc-block-components-form :is(.wc-block-components-text-input, .wc-block-components-textarea) :is(input, textarea) { color: var(--text); border: 1px solid var(--wc-form-border-color); border-radius: var(--r-control); } /* validation */ .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, .select2-selection) { border-color: var(--red); } .woocommerce form .form-row.woocommerce-validated :is(input.input-text, select, .select2-selection) { border-color: var(--olive); } .wc-block-components-validation-error, .woocommerce-error li, .checkout-inline-error-message { color: var(--red); } .wc-block-components-text-input.has-error input { border-color: var(--red) !important; } /* ---------- classic cart ---------- */ .woocommerce table.shop_table { border: 1px solid var(--rule); border-radius: var(--r-panel); border-collapse: separate; background: var(--paper-light); margin-block-end: var(--s-6); } .woocommerce table.shop_table :is(th, td) { border-block-start-color: var(--rule); padding: 14px 16px; } .woocommerce table.shop_table th { font-weight: 700; color: var(--text); } .woocommerce table.cart .product-name a { color: var(--ink); font: 700 var(--t-lead)/1.3 var(--font-display); text-decoration: none; } .woocommerce table.cart .product-name a:hover { text-decoration: underline; } .woocommerce table.cart img { width: 72px; border-radius: var(--r-panel); } .woocommerce a.remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6em; color: var(--red) !important; } .woocommerce a.remove:hover { background: var(--red); color: #fff !important; } .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; } .woocommerce table.cart td.actions .coupon .input-text { width: 12em; margin: 0; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: min(100%, 460px); } .woocommerce .cart_totals h2 { margin-block-start: 0; } .woocommerce ul#shipping_method li { margin-block-end: 6px; } .woocommerce .cart-empty.woocommerce-info { font: 700 var(--t-lead)/1.4 var(--font-display); } .woocommerce .return-to-shop { margin-block-start: var(--s-5); } /* ---------- classic checkout ---------- */ .woocommerce-checkout .woocommerce .col2-set { margin-block-end: var(--s-6); } .woocommerce-checkout #order_review_heading { margin-block-start: var(--s-6); } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-block-end: var(--s-4); } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--paper-light); padding: var(--s-5); } .pil-pay { overflow: visible; } .woocommerce-checkout #payment { background: var(--paper-light); border: 1px solid var(--rule); border-radius: var(--r-panel); } .woocommerce-checkout #payment ul.payment_methods { border-block-end-color: var(--rule); padding: var(--s-4) var(--s-5); } .woocommerce-checkout #payment ul.payment_methods li { line-height: 1.6; padding-block: 6px; } .woocommerce-checkout #payment ul.payment_methods li > label { font-weight: 700; } .woocommerce-checkout #payment div.payment_box { background: var(--paper); color: var(--text); } .woocommerce-checkout #payment div.payment_box::before { border-block-end-color: var(--paper); } .woocommerce-checkout #payment div.form-row { padding: var(--s-5); } .woocommerce-checkout #payment input[type="radio"] { width: 20px; height: 20px; accent-color: var(--focus); vertical-align: -4px; } .woocommerce-terms-and-conditions-wrapper { font-size: var(--t-small); } /* ---------- block cart and checkout ---------- */ /* the blocks size their text with the core presets (13px «small» in a classic theme): the site's scale instead */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-empty-cart-block { --wp--preset--font-size--x-small: 14px; --wp--preset--font-size--small: 16px; --wp--preset--font-size--medium: 20px; --wp--preset--font-size--large: 24px; } .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-block-start: 0; } .wc-block-cart .wc-block-components-sidebar, .wp-block-woocommerce-checkout-order-summary-block { background: var(--paper-light); border: 1px solid var(--rule); border-radius: var(--r-panel); } .wc-block-cart .wc-block-components-sidebar { padding: var(--s-4) var(--s-5) var(--s-5); } /* on phones the summary block carries a second, rounded frame of its own inside ours: one frame only */ .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill { border: 0; border-radius: 0; } /* phones: the summary block keeps 36px of its own under the frame, and the place-order button then touched it: no blank band, 16px between frame and button */ .wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-block { padding-block-end: 0; } .wc-block-checkout.is-mobile .wc-block-checkout__actions_row { margin-block-start: var(--s-4); } /* the heading sits inside the frame on the same 16px as the rows below it (desktop title row, phone step heading) */ .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { border: 0; margin: 0; padding: var(--s-4) var(--s-4) var(--s-2); } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { margin: 0; } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading { padding: var(--s-4) var(--s-4) 0; } .wp-block-woocommerce-checkout-order-summary-totals-block { border-color: var(--rule); } .wc-block-components-totals-wrapper, .wc-block-cart-items, .wc-block-cart-items td, .wc-block-cart-items th, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { border-color: var(--rule) !important; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-name { color: var(--ink); font: 700 var(--t-lead)/1.3 var(--font-display); text-decoration: none; } .wc-block-components-order-summary .wc-block-components-product-name { color: var(--ink); font: 700 var(--t-body)/1.3 var(--font-display); text-decoration: none; } /* the short description is cut mid-word and repeats the book page: a cart line is cover, title, price, quantity */ .wc-block-components-product-metadata__description { display: none; } .wc-block-cart-items .wc-block-cart-item__image img { border-radius: var(--r-panel); } /* phones (WooCommerce marks the cart is-mobile up to a 400px column and is-small up to 520px): a cart row is two columns, the cover and the rest, and the line total with its «save ₪16.00» badge stands on its own line under the quantity. WooCommerce gives the total a third column as wide as that badge, so a book on sale made the row 400px wide in a 358px column: the cart scrolled sideways on every phone (Change 15 fix 2; a plain cart did the same at 320px). */ .wc-block-cart:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr); row-gap: 8px; } .wc-block-cart:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2; } .wc-block-cart:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 2; grid-row: 2; justify-content: flex-start; } .wc-block-cart:is(.is-mobile, .is-small) .wc-block-cart-item__total-price-and-sale-badge-wrapper { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; } /* a line's badges («רכישה מוקדמת», «שמור את ₪16.00») may break onto a second line: WooCommerce sets them nowrap, and the pair made a summary line 290px wide in the checkout's 234px column beside the form at 768px (the badge stood out of its frame, cut at the screen's edge, and the page scrolled sideways), and 3px too wide at 320px */ .wc-block-components-product-badge { white-space: normal; } .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-badge { text-align: end; } .wc-block-cart-item__remove-link { min-height: 44px; display: inline-flex !important; align-items: center; color: var(--red) !important; font-size: var(--t-small) !important; text-decoration: underline !important; } .wc-block-components-totals-item__label { color: var(--text); } .wc-block-components-totals-footer-item { font-size: var(--t-lead); } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--text); font-weight: 700; } .wc-block-components-panel__button, .wc-block-components-totals-coupon-link { min-height: 44px; color: var(--link) !important; } .wc-block-components-checkout-step__title { font: 700 var(--t-h3)/var(--lh-head) var(--font-heading); color: var(--text); } .wc-block-components-checkout-step__description { color: var(--text-muted); } /* payment and shipping choices */ /* the accordion option paints the ground; its label stays clear so the option's 2px selected ring runs unbroken around label and description */ .wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option:not(.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option) { background: var(--paper-light); } .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--focus); } .wc-block-components-radio-control__input:checked { border-color: var(--focus); } .wc-block-components-radio-control__input:checked::before { background: var(--focus); } .wc-block-components-radio-control__label { font-weight: 700; } .wc-block-components-radio-control-accordion-content { color: var(--text); } .wc-block-checkout__payment-method, .wc-block-components-express-payment, .wc-block-components-express-payment-continue-rule { overflow: visible; } /* the headings WooCommerce's blocks draw in the browser, in the heading font like every other (Change 21): the cart's «סה"כ בסל הקניות», the checkout's order-summary title */ .wc-block-cart .wc-block-cart__totals-title.wp-block-woocommerce-cart-order-summary-heading-block, .wc-block-components-checkout-order-summary__title-text { font-family: var(--font-heading); } /* the first one is as specific as WooCommerce's own «font-family: inherit» on it, and one class more */ /* empty block cart: heading and the way back to the shop */ .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font: 700 var(--t-h2)/var(--lh-head) var(--font-heading); color: var(--text); } .pil-empty-back { text-align: center; margin-block: var(--s-5) var(--s-7); } .wp-block-woocommerce-empty-cart-block .wp-block-separator { border-color: var(--rule); } /* ---------- order received ---------- */ .woocommerce-order { max-width: 900px; margin-inline: auto; } .woocommerce-order .woocommerce-thankyou-order-received { margin-block-end: var(--s-6); padding: var(--s-5); text-align: center; background: var(--paper-light); border: 1px solid var(--rule); border-radius: var(--r-panel); font: 700 var(--t-lead)/1.5 var(--font-display); color: var(--ok); } .woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: var(--s-4) 0; margin: 0 0 var(--s-6); padding: 0; } .woocommerce ul.order_details li { float: none; margin: 0; padding-inline: var(--s-5); border-inline-end: 1px dashed var(--rule); font-size: var(--t-small); text-transform: none; color: var(--text-muted); line-height: 1.6; } .woocommerce ul.order_details li:last-child { border-inline-end: 0; } .woocommerce ul.order_details li strong { font-size: var(--t-body); color: var(--text); font-variant-numeric: tabular-nums; } .woocommerce .woocommerce-customer-details address { border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--paper-light); padding: var(--s-4) var(--s-5); font-style: normal; line-height: 1.7; } /* ---------- my account ---------- */ .woocommerce-account .woocommerce { display: flow-root; } .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-6); } .woocommerce-account .u-columns.col2-set > :is(.u-column1, .u-column2) { float: none; width: auto; } .woocommerce-account .u-columns.col2-set::before, .woocommerce-account .u-columns.col2-set::after { display: none; } .woocommerce form .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } .woocommerce .lost_password a { display: inline-flex; align-items: center; min-height: 44px; } /* the eye that shows the password: WooCommerce's own button is its 22px icon; the padding makes it a 44px target and the offset keeps the icon where it was */ .woocommerce-account .woocommerce form .show-password-input { padding: 11px; left: calc(.7em - 11px); } .woocommerce-MyAccount-navigation ul { border-block-start: 1px solid var(--rule); } .woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--rule); } .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--s-3); color: var(--text); font-weight: 600; text-decoration: none; } .woocommerce-MyAccount-navigation a:hover { background: var(--paper-light); } .woocommerce-MyAccount-navigation .is-active a { background: var(--paper-light); color: var(--ink); font-weight: 800; } .woocommerce-MyAccount-content { line-height: var(--lh-body); } .woocommerce-Address-title .edit { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- notices: classic and block ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .pil-notices { margin-block-start: var(--s-5); } .pil-notices > .woocommerce-notices-wrapper > :last-child, .pil-notices > :last-child { margin-block-end: 0; } :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { background: var(--paper-light) !important; color: var(--text) !important; border: 1px solid var(--rule) !important; border-radius: var(--r-panel); font-size: var(--t-body); line-height: 1.6; } /* the error list is a