/* ========================================================= Custom Checkout Design — color theme #800F2F ========================================================= */ :root{ --ccd-primary: #800F2F; --ccd-primary-dark: #1a1a2e; --ccd-border: #e5e7eb; --ccd-bg: #f5f6f8; --ccd-radius: 10px; } /* page background — restored to light gray, framed with a 5px radius and a soft shadow around the checkout content itself. */ body.woocommerce-checkout{ background: var(--ccd-bg); } /* IMPORTANT: WooCommerce puts the class "woocommerce-checkout" on BOTH (site-wide, above the header too) AND on the checkout

itself. A bare ".woocommerce-checkout{ padding: 24px 0; }" rule matches both, so it was pushing the whole — header included — down by 24px. Scoping to "form.woocommerce-checkout" targets only the actual checkout form. */ form.woocommerce-checkout{ padding: 24px 0; background: transparent; } /* hide the default WooCommerce order notes / login toggle we don't need */ .woocommerce-checkout .woocommerce-form-login-toggle, .woocommerce-checkout .woocommerce-form-login, .woocommerce-checkout a.showlogin, .woocommerce-checkout .woocommerce-info{ display: none !important; } /* hide fields we keep only for data, not for display */ .woocommerce-checkout .ccd-hidden-field{ display: none !important; } /* ---------- layout: two columns on desktop ---------- IMPORTANT: every rule here uses !important. WoodMart ships its own checkout CSS (often float or grid based) that can be more specific or load after ours, which is what was causing the oversized gap. Forcing these properties guarantees our layout wins regardless of theme CSS. The flex container itself also carries the gray background + 5px radius + soft shadow, framing the two white cards inside it. */ .woocommerce-checkout form.checkout, .woocommerce-checkout form.woocommerce-checkout, form.woocommerce-checkout{ display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 16px !important; max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; background: var(--ccd-bg); border-radius: 5px; box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 20px; } .woocommerce-checkout #customer_details{ display: block !important; flex: 1 1 600px !important; width: auto !important; max-width: 100% !important; float: none !important; margin: 0 !important; background: #fff; border-radius: var(--ccd-radius); padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,.06); box-sizing: border-box; } .woocommerce-checkout #order_review_heading{ display:none !important; } .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order{ flex: 0 1 420px !important; max-width: 420px !important; width: auto !important; float: none !important; margin: 0 !important; margin-top: 0 !important; align-self: flex-start !important; background: #fff; border-radius: var(--ccd-radius); padding: 32px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); box-sizing: border-box; overflow-x: hidden; } .woocommerce-checkout:after{ content:""; display:block; clear:both; } /* ---------- section titles ---------- */ .ccd-section-title{ font-size: 17px; font-weight: 700; color: #1f2937; margin: 22px 0 14px; display:flex; align-items:center; gap:8px; } .woocommerce-checkout #customer_details .ccd-section-title:first-child{ margin-top:0; } .ccd-icon{ color: var(--ccd-primary); font-style:normal; } /* ---------- inputs ---------- */ .woocommerce-checkout .form-row label{ font-weight:600; font-size:13px; color:#374151; margin-bottom:4px; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select{ width:100%; border:1px solid var(--ccd-border); border-radius: 8px; padding: 12px 14px; font-size: 14px; background:#fff; } .woocommerce-checkout .form-row textarea{ min-height: 70px; resize: vertical; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus{ outline:none; border-color: var(--ccd-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ccd-primary) 12%, transparent); } .woocommerce-checkout .required{ color: var(--ccd-primary); } /* ---------- shipping method as cards ---------- */ .ccd-shipping-section{ margin-top: 8px; } .ccd-coupon-section{ margin-top: 8px; } .ccd-coupon-section .ccd-coupon-row{ display:flex; gap:8px; flex-wrap:wrap; } .ccd-coupon-section input#ccd_coupon_code{ flex:1 1 200px; height:44px; border:1px solid var(--ccd-border); border-radius:8px; padding:0 14px; font-size:14px; box-sizing:border-box; } .ccd-coupon-section input#ccd_coupon_code:focus{ outline:none; border-color: var(--ccd-primary); } .ccd-coupon-section button#ccd_apply_coupon{ flex:0 0 auto; height:44px; padding:0 20px; border:none; border-radius:999px; background: var(--ccd-primary) !important; color:#fff !important; font-weight:600; cursor:pointer; transition: opacity .15s; } .ccd-coupon-section button#ccd_apply_coupon:hover{ opacity:.9; color:#fff !important; } .ccd-coupon-section #ccd_coupon_message{ margin-top:8px; font-size:13px; } .ccd-coupon-section #ccd_coupon_message .woocommerce-error, .ccd-coupon-section #ccd_coupon_message .woocommerce-message{ list-style:none; margin:0; padding:10px 14px; border-radius:8px; background:#f9fafb; border:1px solid var(--ccd-border); } #ccd-shipping-target ul#shipping_method{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; /* force both cards to share the row's tallest height */ align-items: stretch; gap:12px; } #ccd-shipping-target ul#shipping_method li{ border:1px solid var(--ccd-border); border-radius: 10px; padding: 14px 16px; cursor:pointer; position:relative; background:#fff; box-sizing:border-box; width:100%; height:100%; min-height:52px; display:flex; align-items:center; flex-wrap:wrap; transition: border-color .15s, background .15s; } #ccd-shipping-target ul#shipping_method li.ccd-selected{ border-color: var(--ccd-primary); background: color-mix(in srgb, var(--ccd-primary) 4%, white); } #ccd-shipping-target ul#shipping_method li input[type="radio"]{ appearance: none; -webkit-appearance: none; -moz-appearance: none; accent-color: var(--ccd-primary); width: 18px; height: 18px; min-width: 18px; border: 2px solid var(--ccd-border); border-radius: 50%; position: relative; margin: 0 8px 0 0; cursor: pointer; flex-shrink: 0; background: #fff; transition: border-color .15s; } #ccd-shipping-target ul#shipping_method li input[type="radio"]:checked{ border-color: var(--ccd-primary) !important; } #ccd-shipping-target ul#shipping_method li input[type="radio"]:checked::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: var(--ccd-primary) !important; border-radius: 50%; transform: translate(-50%, -50%); } #ccd-shipping-target ul#shipping_method li label{ font-weight:600; font-size:14px; color:#1f2937; cursor:pointer; flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; } #ccd-shipping-target ul#shipping_method .woocommerce-Price-amount{ color: var(--ccd-primary); font-weight:700; } .ccd-note{ font-size:12px; color:#6b7280; margin-top:10px; display:flex; align-items:center; gap:6px; } /* ---------- place order button ---------- */ #ccd-placeorder-target{ margin-top: 22px; } #ccd-placeorder-target .woocommerce-checkout-payment{ background: transparent !important; border:none !important; padding:0 !important; } /* Only hide the radio + label when there is just ONE payment gateway (e.g. only Cash on Delivery enabled) — the gateway's own description text (e.g. "Pay with cash upon delivery.") stays visible either way. If more than one gateway is enabled, all radios/labels stay visible so the customer can choose. */ #ccd-placeorder-target ul.wc_payment_methods > li:only-of-type > input[type="radio"], #ccd-placeorder-target ul.wc_payment_methods > li:only-of-type > label{ display:none; } #ccd-placeorder-target ul.wc_payment_methods{ list-style:none; margin:0 0 14px; padding:0; } #ccd-placeorder-target ul.wc_payment_methods li{ border:none; padding:0; } #ccd-placeorder-target ul.wc_payment_methods:not(:has(li:only-of-type)) li{ border:1px solid var(--ccd-border); border-radius:8px; padding:10px 14px; margin-bottom:8px; } #ccd-placeorder-target .payment_box{ background:#fafafa; border:1px solid var(--ccd-border); border-radius:8px; padding:12px 14px; font-size:13px; color:#4b5563; margin-bottom:14px; } #ccd-placeorder-target #place_order{ width:100%; background: var(--ccd-primary); color:#fff; border:none; border-radius: 999px; padding: 16px; font-size: 15px; font-weight:700; cursor:pointer; transition: opacity .15s; } #ccd-placeorder-target #place_order:hover{ opacity:.92; } #ccd-placeorder-target .woocommerce-terms-and-conditions-wrapper, #ccd-placeorder-target .woocommerce-privacy-policy-text{ text-align:center; font-size:12px; color:#9ca3af; margin-top:8px; } /* ---------- order review table (Order Summary) ---------- */ .woocommerce-checkout-review-order-table{ width:100%; max-width:100%; border-collapse:collapse; table-layout:auto; } .woocommerce-checkout-review-order-table thead{ display:none; } .woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th{ border:none; padding:16px 0; font-size:14px; vertical-align:top; box-sizing:border-box; } .woocommerce-checkout-review-order-table .cart_item td{ border-bottom:1px solid var(--ccd-border); padding-top:22px; padding-bottom:22px; } .woocommerce-checkout-review-order-table .product-name{ color:#1f2937; line-height:1.5; word-break:break-word; width:100%; } .woocommerce-checkout-review-order-table .product-total{ display:none; } /* Safety net: some themes render their own product thumbnail in this row in addition to ours. Only our own (.ccd-cart-item-img) should show. */ .woocommerce-checkout-review-order-table .cart_item img:not(.ccd-cart-item-img){ display:none !important; } /* per-item vertical mini-card: image -> title -> price -> (qty stepper follows) */ .ccd-item-image-wrap{ position:relative; width:60px; margin-bottom:10px; } .ccd-item-image-wrap img.ccd-cart-item-img{ display:block; width:60px; height:60px; border-radius:8px; object-fit:cover; border:1px solid var(--ccd-border); } .ccd-item-image-wrap .ccd-remove-item{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; line-height:18px; text-align:center; border-radius:50%; background:#fff; border:1px solid var(--ccd-border); color:#9ca3af; font-size:13px; text-decoration:none !important; box-shadow:0 1px 3px rgba(0,0,0,.1); transition: all .15s; } .ccd-item-image-wrap .ccd-remove-item:hover{ color:#fff; background: var(--ccd-primary); border-color: var(--ccd-primary); } .ccd-item-name-text{ font-weight:600; font-size:14px; color:#1f2937; line-height:1.4; margin-bottom:4px; } .ccd-item-price{ font-weight:700; font-size:14px; color: var(--ccd-primary); margin-bottom:2px; } /* quantity stepper (−/+) — compact, resets inherited table/theme styles */ .ccd-qty-stepper{ display:inline-flex !important; align-items:center !important; gap:0 !important; border:1px solid var(--ccd-border) !important; border-radius:6px !important; margin-top:8px !important; overflow:hidden !important; width:auto !important; max-width:none !important; transition: opacity .15s; box-sizing:border-box !important; line-height:1 !important; height:26px !important; background:#fff !important; } .ccd-qty-stepper.ccd-qty-loading{ opacity:.5; pointer-events:none; } .ccd-qty-btn{ all: unset; box-sizing:border-box !important; background:#f9fafb !important; color:#374151 !important; cursor:pointer; width:26px !important; height:26px !important; font-size:14px !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 26px !important; } /* Border lives on the buttons, not the input squeezed between them — a border/shadow on the middle flex child can render as a hairline gap or double edge depending on sub-pixel rounding; putting single borders on the two outer buttons avoids that entirely. */ .ccd-qty-minus{ border-right:1px solid var(--ccd-border) !important; } .ccd-qty-plus{ border-left:1px solid var(--ccd-border) !important; } .ccd-qty-btn:hover{ background: var(--ccd-primary) !important; color:#fff !important; } .ccd-qty-input{ box-sizing:border-box !important; width:32px !important; height:26px !important; text-align:center !important; border:none !important; box-shadow:none !important; outline:none !important; font-size:12px !important; padding:0 !important; line-height:26px !important; -moz-appearance:textfield; background:#fff !important; color:#1f2937 !important; display:inline-block !important; overflow:visible !important; opacity:1 !important; margin:0 !important; vertical-align:middle !important; font-family:inherit !important; flex:0 0 32px !important; } .ccd-qty-input::-webkit-outer-spin-button, .ccd-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .woocommerce-checkout-review-order-table tr.cart-subtotal, .woocommerce-checkout-review-order-table tr.shipping, .woocommerce-checkout-review-order-table tr.order-total{ border-top:1px solid var(--ccd-border); } .woocommerce-checkout-review-order-table tr.order-total th, .woocommerce-checkout-review-order-table tr.order-total td{ font-size:17px; font-weight:800; color:#111827; } .woocommerce-checkout-review-order-table .woocommerce-Price-amount{ color: var(--ccd-primary); font-weight:600; } /* since we relocate the real #shipping_method list into the shipping card, hide the (now empty) shipping row left inside the order-review table */ .woocommerce-checkout-review-order-table tr.shipping{ display:none; } /* ========================================================= Thank You / Order Successful page ========================================================= */ /* Hide WooCommerce's own default thank-you blocks (order overview list, default address boxes, etc). We target ".woocommerce-order" directly — that's the real wrapper WooCommerce always renders around thankyou.php content, regardless of what wrapper class the theme adds around it. */ .woocommerce-order > *:not(.ccd-thankyou-wrapper){ display:none !important; } .ccd-thankyou-wrapper{ max-width: 900px; margin: 20px auto; padding: 0 16px; } .ccd-thankyou-header{ text-align:center; background:#fff; border-radius:var(--ccd-radius); padding: 32px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom:20px; } .ccd-check-icon{ width:56px; height:56px; line-height:56px; border-radius:50%; background: #e9f9ee; color:#16a34a; font-size:26px; font-weight:800; margin:0 auto 14px; } .ccd-thankyou-header h2{ margin:0 0 6px; font-size:22px; color:#111827; } .ccd-thankyou-header p{ color:#6b7280; margin:0 0 14px; font-size:14px; } .ccd-order-number{ display:inline-block; border:1px dashed #16a34a; color:#15803d; background:#f0fdf4; border-radius:8px; padding:8px 16px; font-weight:700; } .ccd-thankyou-grid{ display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; } .ccd-info-card, .ccd-card{ background:#fff; border-radius:var(--ccd-radius); padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); flex:1 1 280px; } .ccd-card{ width:100%; margin-bottom:16px; } .ccd-info-card h4, .ccd-card h4{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ccd-primary); margin:0 0 14px; } .ccd-info-card p{ font-size:13px; color:#374151; margin:6px 0; } .ccd-info-card p.ccd-total{ color:#111827; font-size:15px; font-weight:800; } .ccd-item-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--ccd-border); } .ccd-item-row:last-child{ border-bottom:none; } .ccd-item-thumb img{ width:48px; height:48px; border-radius:8px; object-fit:cover; } .ccd-item-name{ font-weight:600; font-size:14px; color:#111827; } .ccd-item-meta{ font-size:12px; color:#6b7280; } .ccd-item-total{ margin-left:auto; font-weight:700; color:var(--ccd-primary); } .ccd-steps{ display:flex; gap:16px; text-align:center; flex-wrap:wrap; } .ccd-step{ flex:1 1 150px; } .ccd-step-icon{ width:44px; height:44px; line-height:44px; border-radius:50%; background:#fbe7ec; color:var(--ccd-primary); font-size:18px; margin:0 auto 8px; } .ccd-step-title{ font-weight:700; font-size:13px; color:#111827; margin-bottom:4px; } .ccd-step-desc{ font-size:12px; color:#6b7280; } .ccd-thankyou-actions{ display:flex; gap:12px; justify-content:center; margin: 10px 0 30px; } .ccd-btn{ display:inline-flex; align-items:center; gap:6px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; } .ccd-btn-primary{ background: var(--ccd-primary); color:#fff !important; } .ccd-btn-primary:hover, .ccd-btn-primary:focus, .ccd-btn-primary:visited, .ccd-btn-primary:active{ color:#fff !important; opacity:.92; } .ccd-btn-secondary{ background:#f3f4f6; color:#374151; } .ccd-btn-secondary:hover, .ccd-btn-secondary:focus, .ccd-btn-secondary:visited{ color:#374151; opacity:.92; } /* ========================================================= Mobile responsive — matches stacked mobile layout ========================================================= */ @media (max-width: 768px){ .woocommerce-checkout form.checkout, .woocommerce-checkout form.woocommerce-checkout{ display: block !important; max-width:100% !important; gap:0 !important; padding: 12px !important; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order{ width:100% !important; max-width:100% !important; float:none !important; margin-bottom:16px !important; padding: 20px !important; } .ccd-thankyou-grid{ flex-direction:column; } .ccd-steps{ flex-direction:column; } #ccd-shipping-target ul#shipping_method{ grid-template-columns: 1fr; } .ccd-thankyou-actions{ flex-direction:column; } .ccd-btn{ justify-content:center; } }