/* ================================================================= File: 15-checkout.css Purpose: Cart + checkout page styling. Light theming of Woo defaults. ================================================================= */ /* ---- Page background — shared Apple-style gradient. Cart + checkout get the same calm multi-hue canvas as the account page: painted on via :has() (the page canvas, always the backmost layer), the optional .liquid-bg overlay hidden, and the opaque page colour cleared so the gradient shows through. Gradient value = --page-flow-gradient token (01-variables.css). */ html:has(.woocommerce-cart), html:has(.woocommerce-checkout) { background: var(--page-flow-gradient); background-attachment: fixed; } .woocommerce-cart .liquid-bg, .woocommerce-checkout .liquid-bg { display: none; } .woocommerce-cart, .woocommerce-checkout { background: transparent; } .woocommerce table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass-bg-strong); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; } .woocommerce table.shop_table th { text-align: start; padding: 12px 14px; background: var(--c-surface-2); font-weight: var(--fw-semi); border-bottom: 1px solid var(--c-line); } .woocommerce table.shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); vertical-align: middle; } .woocommerce table.shop_table tr:last-child td { border-bottom: 0; } .woocommerce-cart .product-thumbnail img { width: 60px; height: 60px; object-fit: contain; background: var(--c-surface-1); border-radius: var(--radius-sm); padding: 4px; } .woocommerce .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals { background: var(--glass-bg-strong); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-5); } .woocommerce-checkout #payment { background: var(--glass-bg-strong); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-5); } .woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); } .woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px 14px; background: #fff; } /* Force checkout buttons to use our btn class */ .woocommerce .button, .woocommerce-page .button { background: var(--c-accent); color: #fff; padding: 10px 22px; border-radius: var(--radius-pill); font-weight: var(--fw-semi); transition: background var(--dur-fast) var(--ease); } .woocommerce .button:hover { background: var(--c-accent-2); } .woocommerce-message, .woocommerce-info, .woocommerce-error { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px 16px; background: var(--glass-bg-strong); } .woocommerce-message { border-color: var(--c-success); } .woocommerce-error { border-color: var(--c-danger); } /* ================================================================= WooCommerce Cart + Checkout — BLOCK layout (.wc-block-*) Modern Woo renders cart/checkout as blocks, so the classic selectors above never reach them. These rules theme the blocks to the liquid-glass look. Selectors are prefixed with .woocommerce-page (present on the of both pages) only to out-specify Woo's own block stylesheet — no !important needed. ================================================================= */ /* Main column + order-summary sidebar → glass cards over the gradient. */ .woocommerce-page .wc-block-checkout__main, .woocommerce-page .wc-block-cart__main, .woocommerce-page .wc-block-components-sidebar { background: var(--glass-bg-strong); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-5); } @media (max-width: 768px) { .woocommerce-page .wc-block-checkout__main, .woocommerce-page .wc-block-cart__main, .woocommerce-page .wc-block-components-sidebar { padding: var(--space-4); } } /* Inputs / textareas / country combobox — theme border, radius, focus. */ .woocommerce-page .wc-block-components-text-input input, .woocommerce-page .wc-block-components-textarea, .woocommerce-page .wc-block-components-combobox-control input { border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; } .woocommerce-page .wc-block-components-text-input input:focus, .woocommerce-page .wc-block-components-textarea:focus, .woocommerce-page .wc-block-components-combobox-control input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 18%, transparent); outline: none; } /* Buttons (Place order, Proceed to checkout) → themed accent pill. */ .woocommerce-page .wc-block-components-button:not(.is-link) { background: var(--c-accent); color: #fff; border-radius: var(--radius-pill); font-weight: var(--fw-semi); transition: background var(--dur-fast) var(--ease); } .woocommerce-page .wc-block-components-button:not(.is-link):hover { background: var(--c-accent-2); } /* ---- Premium page title on the cart/checkout flow. Playfair Display (a refined serif) is enqueued on these two pages only — see inc/enqueue.php. The RTL rule keeps Arabic titles in the Arabic face, since Playfair carries no Arabic glyphs. */ .woocommerce-cart .liqui-page-article__header h1, .woocommerce-checkout .liqui-page-article__header h1 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.01em; } [dir="rtl"] .woocommerce-cart .liqui-page-article__header h1, [dir="rtl"] .woocommerce-checkout .liqui-page-article__header h1 { font-family: var(--ff-arabic); } /* ---- Cart "You may be interested in…" — compact the suggestion cards. Confirmed by live DOM inspection: this is a WooCommerce Product Collection block (.wp-block-woocommerce-product-collection), NOT the classic cross-sells — there is no "cross-sells" class anywhere, which is why earlier selectors missed. Cap the product image and shrink the title. The title's !important is required because WordPress's own has-medium-font-size preset class sets the title size with !important. */ .woocommerce-cart .wp-block-woocommerce-product-collection img { max-width: 130px; height: auto; display: block; margin-inline: auto; } .woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-post-title { font-size: var(--fs-sm) !important; font-weight: var(--fw-medium); line-height: var(--lh-snug); } /* Cart/checkout page rhythm — less air above the title, and a small, controlled gap below it. The block content's own top margin is zeroed so the header's margin-bottom is the only gap that shows. */ .woocommerce-cart .liqui-section, .woocommerce-checkout .liqui-section { padding-block-start: var(--space-5); } .woocommerce-cart .liqui-page-article__header, .woocommerce-checkout .liqui-page-article__header { margin-bottom: var(--space-4); } .woocommerce-cart .liqui-page-article__body > *:first-child, .woocommerce-checkout .liqui-page-article__body > *:first-child { margin-top: 0; }