/* ========================================================================== Door Stud — Cart + Checkout restyle Both pages are Divi builder pages hosting the CLASSIC WooCommerce shortcodes ([woocommerce_cart] / [woocommerce_checkout]) inside a Divi Text module — see provisioning/setup-woo-divi-pages.php for why. So the selectors here target the classic markup (.woocommerce-checkout, #customer_details, #order_review, .cart-collaterals …). Enqueued on is_checkout() AND is_cart() from includes/styling.php. 1. Classic checkout (form.checkout, #customer_details, #order_review) 4. Cart page (.woocommerce-cart-form, .cart_totals) ========================================================================== */ :root { --ds-black: #0f0f0f; --ds-white: #ffffff; --ds-yellow: #F5C300; --ds-yellow-dark: #c49a00; --ds-gray-100: #f5f4f1; --ds-gray-200: #e8e6e0; --ds-gray-400: #9a9690; --ds-gray-600: #5a5752; --ds-gray-800: #2c2b28; --ds-font-display: 'Barlow Condensed', sans-serif; --ds-font-body: 'Barlow', sans-serif; } /* ── BREAK OUT OF DIVI'S OUTER CONTENT-WIDTH CONTAINER ──────────────── Divi typically wraps page content in a width-capped ".container" (its global "Website Content Width" setting). That wrapper is a PARENT of the checkout content, so no amount of CSS on the checkout form itself can stretch past it — the parent has to be widened first. Scoped to the checkout page only via the body class WooCommerce adds, so the rest of the site's layout width is untouched. IMPORTANT: ".container" here uses a DIRECT CHILD selector (>), not a descendant selector. Divi's own content wrapper is a direct child of #main-content; a plain descendant selector would also hit anything else named "container" nested deeper inside the checkout markup. The direct child selector only ever reaches Divi's own wrapper. */ body.woocommerce-checkout #main-content > .container, body.woocommerce-checkout #main-content, body.woocommerce-checkout .et_pb_section, body.woocommerce-checkout #content-area, body.woocommerce-checkout .et_builder_inner_content { max-width: 100% !important; width: 100% !important; } /* ── STRIP THE THEME'S DEFAULT BLOG SIDEBAR ON CHECKOUT ─────────────── WooCommerce adds "woocommerce-checkout" to on the checkout page regardless of classic vs block checkout, so this is a reliable hook regardless of which system is rendering the form itself. This is a safety net — the real fix is setting the Checkout page's Divi "Page Layout" to "No Sidebar" in Page Settings, which removes the extra column at the source and lets the block checkout's own responsive two-column layout activate properly. */ body.woocommerce-checkout #sidebar, body.woocommerce-checkout .et_pb_widget_area, body.woocommerce-checkout #secondary, body.woocommerce-checkout .widget-area { display: none !important; } body.woocommerce-checkout #left-area, body.woocommerce-checkout #primary, body.woocommerce-checkout #main-content .container, body.woocommerce-checkout #content-area { width: 100% !important; float: none !important; } /* Divi paints the sidebar's 1px divider rule as .container::before, not as a border on #sidebar. Hiding #sidebar above therefore leaves the divider behind as a stray vertical line running the full height of the page. */ body.woocommerce-checkout #main-content > .container::before { display: none !important; } /* #left-area carries a large right padding that Divi reserves for the sidebar column. With the sidebar gone that padding is a dead gutter which pushes the checkout visibly off-center, so reclaim it and center the content column instead. This wrapper — not the checkout form — is what has to be constrained, because it's the ancestor that the page title and trust bar share with the checkout form; centering it keeps all three on the same left edge. */ body.woocommerce-checkout #left-area { max-width: 1280px !important; margin: 0 auto !important; padding: 0 2rem 2rem !important; } @media (max-width: 782px) { body.woocommerce-checkout #left-area { padding: 0 1.25rem 1.5rem !important; } } /* Page title — Divi's default is a thin serif-ish heading that reads as a different brand from everything below it. */ body.woocommerce-checkout .entry-title { font-family: var(--ds-font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ds-black); margin: 0 0 1.5rem; padding: 0; } /* ── TRUST BAR (injected via the_content, works on both systems) ─────── */ .doorstud-checkout-trust-bar { background: var(--ds-yellow); padding: 0.9rem 2rem; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; align-items: center; margin: 0 0 2.5rem; } .doorstud-checkout-trust-item { font-family: var(--ds-font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-black); } @media (max-width: 600px) { .doorstud-checkout-trust-bar { gap: 1rem; padding: 0.75rem 1rem; } .doorstud-checkout-trust-item { font-size: 0.7rem; } } /* ── QUANTITY STEPPER (injected into order summary items) ────────────── */ .doorstud-qty-stepper { display: inline-flex; align-items: center; gap: 0; /* Sits under the product name in the order-summary row, so it needs to break onto its own line rather than trailing the title inline. */ margin-top: 0.55rem; border: 1px solid var(--ds-gray-200); background: var(--ds-white); width: fit-content; vertical-align: middle; } .doorstud-qty-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--ds-white); border: none; color: var(--ds-black); font-family: var(--ds-font-display); font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; transition: background 0.15s; } .doorstud-qty-btn:hover:not(:disabled) { background: var(--ds-yellow); } .doorstud-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; } .doorstud-qty-value { min-width: 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--ds-font-display); font-size: 1rem; font-weight: 700; color: var(--ds-black); border-left: 1px solid var(--ds-gray-200); border-right: 1px solid var(--ds-gray-200); padding: 0 2px; } .doorstud-qty-stepper.is-busy { opacity: 0.5; pointer-events: none; } /* The order-summary line reads "Door Stud - Pro" with the stepper beneath it; force the break so the buttons never crowd the product name. display:flex also makes the stepper establish its own formatting context, so it sits BESIDE the floated thumbnail below instead of sliding under it. */ .woocommerce-checkout-review-order .product-name .doorstud-qty-stepper { display: flex; } /* ── ORDER SUMMARY LINE ITEM: thumbnail + name + stepper ────────────── The classic review-order table has no image column, so the thumbnail is floated inside the product-name cell and the name/stepper flow beside it. flow-root on the cell contains that float so it can't bleed into the totals rows underneath. The column widths are explicit because the default auto table layout gave the product cell so little room that a 56px thumbnail left ~40px for the title, and "DOOR STUD - PRO" wrapped one or two characters per line. The price column only ever holds a short amount, so the split is lopsided on purpose. */ .woocommerce-checkout-review-order table.shop_table th.product-name, .woocommerce-checkout-review-order table.shop_table td.product-name { width: 66%; } .woocommerce-checkout-review-order table.shop_table th.product-total, .woocommerce-checkout-review-order table.shop_table td.product-total { width: 34%; vertical-align: top; } .woocommerce-checkout-review-order td.product-name { display: flow-root; } .doorstud-co-thumb { float: left; width: 56px; height: 56px; object-fit: contain; margin: 0 0.75rem 0.35rem 0; border: 1px solid var(--ds-gray-200); background: var(--ds-white); } .doorstud-co-name { display: block; font-family: var(--ds-font-display); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; line-height: 1.25; color: var(--ds-black); /* Wrap between words only — never mid-word, however tight the column gets. */ word-break: normal; overflow-wrap: normal; hyphens: none; } /* WooCommerce prints variation attributes under the name (e.g. "Unit Type: Pro"). */ .woocommerce-checkout-review-order td.product-name .variation { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ds-gray-600); } /* ── SHARED PAGE WRAPPER ─────────────────────────────────────────────── No horizontal padding here on purpose: "woocommerce-checkout" is also a class, so padding on this selector pads the whole document and stacks with the centered #left-area container above. Side spacing belongs to that container. */ .woocommerce-checkout { font-family: var(--ds-font-body); color: var(--ds-black); max-width: none; width: 100%; margin: 0 auto 4rem; box-sizing: border-box; } .woocommerce-checkout h3 { font-family: var(--ds-font-display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -0.01em; } /* ============================================================= 1. CLASSIC (SHORTCODE) CHECKOUT ============================================================= */ /* Two-column layout: form on the left, order summary sticky on the right, without needing to touch the template — the three top-level siblings inside form.checkout get placed on a grid. */ form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr 400px; column-gap: 4rem; row-gap: 0; align-items: start; } #customer_details { grid-column: 1; grid-row: 1 / span 2; } #order_review_heading { grid-column: 2; grid-row: 1; } #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 90px; } @media (max-width: 900px) { form.checkout.woocommerce-checkout { grid-template-columns: 1fr; } #customer_details, #order_review_heading, #order_review { grid-column: 1; } #order_review { position: static; } } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: auto; } /* Stack billing above shipping in the left column (matches the old block checkout's single field column) rather than sitting them side by side, which left a sparse middle column whenever "ship to a different address" was unchecked. */ .woocommerce-checkout .col2-set { display: block; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; margin: 0; } .woocommerce-checkout .col2-set .col-2 { margin-top: 1.5rem; } .woocommerce-checkout #order_review_heading { font-size: 1.4rem; margin: 0 0 1rem; } /* Section headings inside billing/shipping forms */ .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 1.3rem; margin: 0 0 1.25rem; } /* Form fields */ .woocommerce-checkout .form-row { margin: 0 0 1.1rem; } .woocommerce-checkout label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-gray-600); margin-bottom: 0.4rem; } .woocommerce-checkout .required { color: var(--ds-yellow-dark); text-decoration: none; } .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-checkout .select2-selection { width: 100%; /* !important: Divi's own field styling fills these gray otherwise. */ border: 1px solid var(--ds-gray-200) !important; border-radius: 0 !important; padding: 0.8rem 0.95rem !important; min-height: 48px; font-family: var(--ds-font-body); font-size: 0.95rem; color: var(--ds-black) !important; background: var(--ds-white) !important; height: auto; box-shadow: none !important; transition: border-color 0.15s; } .woocommerce-checkout .select2-selection--single { height: 48px !important; display: flex !important; align-items: center; } .woocommerce-checkout .select2-selection--single .select2-selection__arrow { height: 46px !important; } .woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { outline: none; border-color: var(--ds-yellow-dark); } /* Order review table */ #order_review table.shop_table { width: 100%; border-collapse: collapse; background: var(--ds-gray-100); padding: 1.5rem; margin: 0 0 0; } #order_review table.shop_table thead th { font-family: var(--ds-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-gray-400); text-align: left; padding: 1.25rem 1.25rem 0.75rem; } #order_review table.shop_table td, #order_review table.shop_table th { padding: 0.75rem 1.25rem; border: none; } #order_review table.shop_table tr:not(:last-child) td { border-bottom: 1px solid var(--ds-gray-200); } #order_review .product-name { font-size: 0.92rem; } #order_review .product-total, #order_review .cart-subtotal .amount, #order_review .order-total .amount { font-family: var(--ds-font-display); font-weight: 700; } #order_review .order-total th, #order_review .order-total td { font-family: var(--ds-font-display); font-size: 1.15rem; font-weight: 800; border-top: 2px solid var(--ds-black); padding-top: 1.25rem; } /* Payment box */ #payment { background: var(--ds-gray-100); padding: 0 0 1px; margin-top: 1.5rem; } #payment ul.payment_methods { list-style: none; margin: 0; padding: 1.25rem; border-bottom: none; } #payment ul.payment_methods li { margin: 0 0 0.75rem; } #payment ul.payment_methods li label { display: inline; font-size: 0.95rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--ds-black); } #payment .payment_box { background: var(--ds-white); border: 1px solid var(--ds-gray-200); padding: 1rem; margin: 0.5rem 0 0.75rem; font-size: 0.88rem; color: var(--ds-gray-600); } #payment .payment_box::before { display: none; } /* remove default arrow triangle */ /* Place Order button */ #payment #place_order, .woocommerce-checkout #place_order { width: 100%; background: var(--ds-yellow) !important; color: var(--ds-black) !important; font-family: var(--ds-font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 1.1rem 1.5rem; border: none; border-radius: 0; cursor: pointer; transition: background 0.2s, transform 0.1s; margin: 1.25rem 0 0; } #payment #place_order:hover { background: var(--ds-yellow-dark) !important; transform: translateY(-1px); } /* Terms checkbox, notices */ .woocommerce-terms-and-conditions-wrapper { padding: 1.25rem; font-size: 0.85rem; color: var(--ds-gray-600); } .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { border-top-color: var(--ds-yellow-dark); font-size: 0.92rem; } .woocommerce-checkout .woocommerce-info::before { color: var(--ds-yellow-dark); } /* Coupon toggle */ .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--ds-gray-100); } .checkout_coupon.woocommerce-form-coupon { background: var(--ds-gray-100); padding: 1.25rem; margin-bottom: 2rem; } .checkout_coupon.woocommerce-form-coupon .form-row-first, .checkout_coupon.woocommerce-form-coupon .form-row-last { width: auto; } .checkout_coupon.woocommerce-form-coupon button { background: var(--ds-black); color: var(--ds-white); font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: none; padding: 0.75rem 1.5rem; } /* ============================================================= 4. CART PAGE (classic [woocommerce_cart] in a Divi module) ------------------------------------------------------------- Also loaded on is_cart(). WooCommerce floats the cart totals to the right; inside a Divi text module that float escaped the content box and crushed the Theme Builder footer into a narrow vertical strip. display:flow-root on the .woocommerce wrapper makes it contain its own floats, which fixes the footer; the rest brands the table / totals / buttons. ============================================================= */ /* Contain the cart's internal floats so they can't leak into the footer. */ body.woocommerce-cart .et_pb_text_inner .woocommerce { display: flow-root; } body.woocommerce-cart #left-area { max-width: 1200px; margin: 0 auto; } /* Cart page heading */ body.woocommerce-cart .et_pb_text_inner h1, body.woocommerce-cart .entry-title { font-family: var(--ds-font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ds-black); margin: 0 0 1.5rem; } /* Cart line-items table */ body.woocommerce-cart table.shop_table { border: 1px solid var(--ds-gray-200); border-collapse: collapse; margin-bottom: 2rem; } body.woocommerce-cart table.cart thead th { font-family: var(--ds-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-gray-400); border: none; padding: 1rem 1.25rem; } body.woocommerce-cart table.cart td { padding: 1.15rem 1.25rem; border-top: 1px solid var(--ds-gray-200); vertical-align: middle; } body.woocommerce-cart table.cart td.product-name a { font-family: var(--ds-font-display); font-weight: 700; text-transform: uppercase; color: var(--ds-black); text-decoration: none; } body.woocommerce-cart table.cart td.product-name a:hover { color: var(--ds-yellow-dark); } body.woocommerce-cart table.cart img { width: 56px; border: 1px solid var(--ds-gray-200); } body.woocommerce-cart td.product-remove a.remove { color: var(--ds-gray-400) !important; font-size: 1.3rem; } body.woocommerce-cart td.product-remove a.remove:hover { color: var(--ds-black) !important; background: transparent !important; } body.woocommerce-cart .quantity .qty { border: 1px solid var(--ds-gray-200) !important; border-radius: 0 !important; background: var(--ds-white) !important; padding: 0.5rem; font-family: var(--ds-font-display); font-weight: 700; } /* Coupon + Update cart row */ body.woocommerce-cart .cart .actions .coupon input[type="text"] { border: 1px solid var(--ds-gray-200) !important; border-radius: 0 !important; background: var(--ds-white) !important; padding: 0.75rem 0.9rem !important; min-height: 46px; } body.woocommerce-cart .cart .actions .coupon button, body.woocommerce-cart .cart .actions button[name="update_cart"] { background: var(--ds-black) !important; color: var(--ds-white) !important; font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: none !important; border-radius: 0 !important; padding: 0.8rem 1.5rem !important; } body.woocommerce-cart .cart .actions button[name="update_cart"]:disabled { opacity: 0.4; } /* Cart totals — right-aligned card */ body.woocommerce-cart .cart-collaterals { width: 100%; float: none; } body.woocommerce-cart .cart-collaterals .cart_totals { width: 420px; max-width: 100%; float: right; background: var(--ds-gray-100); border: 1px solid var(--ds-gray-200); padding: 1.5rem; } body.woocommerce-cart .cart_totals h2 { font-family: var(--ds-font-display); font-size: 1.4rem; font-weight: 800; text-transform: uppercase; margin: 0 0 1rem; } body.woocommerce-cart .cart_totals table { border: none; margin: 0; } body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td { border-top: 1px solid var(--ds-gray-200); padding: 0.75rem 0; background: transparent; } body.woocommerce-cart .cart_totals .order-total th, body.woocommerce-cart .cart_totals .order-total td { font-family: var(--ds-font-display); font-size: 1.2rem; font-weight: 800; color: var(--ds-black); border-top: 2px solid var(--ds-black); padding-top: 0.9rem; } /* Proceed to checkout + express buttons */ body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; background: var(--ds-yellow) !important; color: var(--ds-black) !important; font-family: var(--ds-font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 1.1rem 1.5rem !important; border: none !important; border-radius: 0 !important; margin-top: 0.5rem; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--ds-yellow-dark) !important; }