/* ============================================================ Waterclick — Shopping-flow redesign Cart → Checkout → Order received (thank-you) → My account. Scoped stylesheet, conditionally enqueued on is_cart() || is_checkout() || is_account_page() (child functions.php). is_checkout() also covers the order-received endpoint, so this one gate spans the whole funnel. Deploy-safe: files only, no DB state. Restyles WooCommerce's classic (shortcode) cart/checkout markup by CLASS only — the DOM is never moved by JS, so WooCommerce's AJAX (qty update, remove, coupon, update_order_review) keeps working. The cart is turned into card rows purely with CSS grid. Brand: red #d72127 sole accent + cool greys. Single font: Prompt. Same token system as pdp.css / catalog.css. Sibling stylesheet. No build step — hand-authored flat CSS, kept byte-identical to assets/scss/shop-flow.scss. ============================================================ */ /* ---------- TOKENS (only the funnel bodies carry them) ---------- */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account{ --ink:#0A2430; /* deep — text */ --ink-2:#3A5563; /* muted grey */ --paper:#F4F8FA; /* cool near-white ground */ --surface:#FFFFFF; /* card */ --mist:#DCE8ED; /* cool grey line/fill */ --mist-2:#EAF1F4; --red:#D72127; /* brand red — sole accent */ --red-deep:#B01015; --red-wash:#FBEBEC; /* faint red tint for focus rings/selected */ --ok:#1B7F5C; /* success green — used only on the thank-you badge */ --shadow:0 1px 2px rgba(10,36,48,.05), 0 8px 30px -12px rgba(10,36,48,.18); --shadow-lift:0 2px 4px rgba(10,36,48,.06), 0 24px 48px -18px rgba(10,36,48,.30); --r:14px; --r-lg:22px; --font-sans:"Prompt","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } /* Cool paper ground so the white cards lift. Painted on (full-bleed) rather than the centered 1140px main, so it fills edge-to-edge with no white side gutters. The white header and red footer paint over their own regions. */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account{background:var(--paper);} body.woocommerce-cart main.site-main, body.woocommerce-checkout main.site-main, body.woocommerce-account main.site-main{ background:transparent; padding-bottom:64px; font-family:var(--font-sans); } body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce, body.woocommerce-account .woocommerce{ color:var(--ink); font-family:var(--font-sans); padding-top:8px; } /* ============================================================ STEPPER — the signature. Rendered by waterclick_flow_steps() on woocommerce_before_cart / before_checkout_form / thankyou. Cart genuinely IS a sequence, so the numbering carries meaning. ============================================================ */ .wc-flow-steps{ display:flex; justify-content:center; max-width:560px; margin:6px auto 40px; padding:0; list-style:none; counter-reset:none; } .wc-flow-step{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; text-align:center; } /* connector coming IN from the previous step; red once reached */ .wc-flow-step::before{ content:""; position:absolute; top:17px; right:50%; width:100%; height:2px; background:var(--mist); z-index:0; } .wc-flow-step:first-child::before{display:none;} .wc-flow-step.is-done::before, .wc-flow-step.is-current::before{background:var(--red);} .wc-flow-step__dot{ position:relative; z-index:1; width:36px;height:36px; border-radius:50%; display:grid;place-items:center; background:var(--surface); border:2px solid var(--mist); color:var(--ink-2); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; transition:box-shadow .2s ease; } .wc-flow-step.is-done .wc-flow-step__dot{ background:var(--red);border-color:var(--red);color:#fff; } .wc-flow-step.is-current .wc-flow-step__dot{ border-color:var(--red);color:var(--red); box-shadow:0 0 0 5px var(--red-wash); } .wc-flow-step__label{ font-size:13px; color:var(--ink-2); line-height:1.35; padding:0 6px; } .wc-flow-step.is-current .wc-flow-step__label{color:var(--ink);font-weight:600;} .wc-flow-step.is-done .wc-flow-step__label{color:var(--ink);} /* ============================================================ TRUST STRIP — quiet reassurance near the CTAs. Rendered by waterclick_trust_strip() on the proceed / place-order hooks (PHP, so it re-renders with the AJAX order review — never injected as a persistent JS node). ============================================================ */ .wc-trust-strip{ display:flex;flex-wrap:wrap; gap:10px 18px; justify-content:center; margin-top:16px; font-size:12.5px; color:var(--ink-2); } .wc-trust-strip span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;} .wc-trust-strip svg{width:15px;height:15px;color:var(--red);flex:none;} /* ============================================================ CART ============================================================ */ /* Two-column shell only when the cart has items (plant3 adds -has-item). Scoped to the main content .woocommerce (the header mini-cart widget is also a .woocommerce, inside .site-action — must not become a grid). The parent theme reserves padding-right:390px + fixed child widths for its old float layout; reset them so the grid tracks can fill. Full-width items (stepper, notices) span both tracks. */ body.woocommerce-cart.-has-item .page-content > .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:26px 34px; align-items:start; padding-right:0; } body.woocommerce-cart.-has-item .page-content > .woocommerce > .wc-flow-steps, body.woocommerce-cart.-has-item .page-content > .woocommerce > .woocommerce-notices-wrapper, body.woocommerce-cart.-has-item .page-content > .woocommerce > .woocommerce-message, body.woocommerce-cart.-has-item .page-content > .woocommerce > .woocommerce-error, body.woocommerce-cart.-has-item .page-content > .woocommerce > .woocommerce-info{grid-column:1 / -1;} body.woocommerce-cart.-has-item .woocommerce-cart-form{grid-column:1;min-width:0;width:auto;float:none;} body.woocommerce-cart.-has-item .cart-collaterals{grid-column:2;width:auto;float:none;padding:0;} /* Kill the table chrome; hide the header row (each line is self-describing). */ body.woocommerce-cart .woocommerce-cart-form table.cart{ display:block; width:100%; margin:0;border:0;background:transparent; border-collapse:separate;border-spacing:0; } body.woocommerce-cart .woocommerce-cart-form table.cart thead{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } body.woocommerce-cart .woocommerce-cart-form table.cart tbody{display:block;} /* A cart line = a card, laid out with grid areas over the existing cells. */ body.woocommerce-cart tr.cart_item{ display:grid; grid-template-columns:78px minmax(0,1fr) auto auto 34px; grid-template-areas: "thumb name qty subtotal remove" "thumb price qty subtotal remove"; align-items:center; column-gap:20px;row-gap:2px; background:var(--surface); border:1px solid var(--mist); border-radius:var(--r); padding:16px 20px; margin-bottom:14px; box-shadow:var(--shadow); transition:box-shadow .18s ease, border-color .18s ease; } body.woocommerce-cart tr.cart_item:hover{box-shadow:var(--shadow-lift);border-color:#CBDBE3;} body.woocommerce-cart tr.cart_item td{border:0;padding:0;background:transparent;} body.woocommerce-cart td.product-thumbnail{grid-area:thumb;align-self:center;} body.woocommerce-cart td.product-thumbnail img{ width:78px;height:78px; object-fit:contain; border-radius:10px; background:var(--mist-2); padding:6px; } body.woocommerce-cart td.product-name{ grid-area:name;align-self:end; font-weight:600;font-size:15.5px;line-height:1.4;color:var(--ink); } body.woocommerce-cart td.product-name a{color:inherit;text-decoration:none;transition:color .16s ease;} body.woocommerce-cart td.product-name a:hover{color:var(--red);} body.woocommerce-cart td.product-name .variation, body.woocommerce-cart td.product-name dl{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);} body.woocommerce-cart td.product-price{ grid-area:price;align-self:start; font-size:13.5px;color:var(--ink-2); font-variant-numeric:tabular-nums; } body.woocommerce-cart td.product-price::after{content:" / ชิ้น";color:var(--ink-2);opacity:.7;font-size:12px;} body.woocommerce-cart td.product-quantity{grid-area:qty;align-self:center;} body.woocommerce-cart td.product-subtotal{ grid-area:subtotal;align-self:center;text-align:right; font-weight:700;font-size:16px;color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap; } body.woocommerce-cart td.product-remove{grid-area:remove;align-self:center;text-align:right;} /* Remove (×) — subtle icon button that reddens on hover */ body.woocommerce-cart td.product-remove a.remove{ display:inline-grid;place-items:center; width:28px;height:28px; border-radius:50%; font-size:19px;line-height:1;font-weight:400; color:var(--ink-2)!important; background:transparent;text-decoration:none; transition:background .16s ease, color .16s ease; } body.woocommerce-cart td.product-remove a.remove:hover{background:var(--red);color:#fff!important;} /* Quantity stepper (span.btn-minus / input.qty / span.btn-plus) */ body.woocommerce-cart .product-quantity .quantity{ display:inline-flex;align-items:center; border:1px solid var(--mist); border-radius:999px; background:var(--surface); overflow:hidden; } body.woocommerce-cart .product-quantity .btn-minus, body.woocommerce-cart .product-quantity .btn-plus{ width:36px;height:40px; display:grid;place-items:center; cursor:pointer;color:var(--ink-2); transition:background .14s ease, color .14s ease; } body.woocommerce-cart .product-quantity .btn-minus:hover, body.woocommerce-cart .product-quantity .btn-plus:hover{background:var(--mist-2);color:var(--red);} body.woocommerce-cart .product-quantity .btn-minus svg, body.woocommerce-cart .product-quantity .btn-plus svg{width:11px;height:11px;fill:currentColor;} body.woocommerce-cart .product-quantity input.qty{ width:42px;height:40px; border:0;background:transparent;text-align:center; font:inherit;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums; -moz-appearance:textfield;appearance:textfield; } body.woocommerce-cart .product-quantity input.qty::-webkit-outer-spin-button, body.woocommerce-cart .product-quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} /* Actions row (coupon + update) — a card-less toolbar, kept in the form */ body.woocommerce-cart .woocommerce-cart-form tr:not(.cart_item), body.woocommerce-cart .woocommerce-cart-form tr:not(.cart_item) td{display:block;} body.woocommerce-cart td.actions{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding:8px 2px 0!important;border:0; } body.woocommerce-cart td.actions .coupon{ display:flex;gap:8px;flex:1 1 260px;max-width:440px;margin:0; } body.woocommerce-cart td.actions .coupon input[name="coupon_code"]{ flex:1;min-width:0;height:46px; border:1px solid var(--mist);border-radius:999px; padding:0 18px;background:var(--surface); font:inherit;font-size:14.5px;color:var(--ink); } body.woocommerce-cart td.actions .coupon input[name="coupon_code"]:focus{ outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash); } body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]{ height:46px;padding:0 22px;border-radius:999px; background:var(--surface);border:1px solid var(--ink); color:var(--ink);font:inherit;font-weight:600;cursor:pointer; transition:background .16s ease, color .16s ease; } body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover{background:var(--ink);color:#fff;} body.woocommerce-cart td.actions button[name="update_cart"]{ height:46px;padding:0 22px;border-radius:999px;margin-left:auto; background:var(--mist-2);border:1px solid var(--mist); color:var(--ink);font:inherit;font-weight:600;cursor:pointer; transition:background .16s ease; } body.woocommerce-cart td.actions button[name="update_cart"]:hover:not([disabled]){background:var(--mist);} body.woocommerce-cart td.actions button[name="update_cart"][disabled]{opacity:.45;cursor:default;} /* Totals card (the summary) */ body.woocommerce-cart .cart-collaterals .cart_totals{ float:none;width:100%; background:var(--surface); border:1px solid var(--mist); border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--shadow-lift); position:sticky;top:104px; } body.woocommerce-cart .cart_totals h2{ margin:0 0 16px;padding-bottom:15px; border-bottom:1px solid var(--mist); font-size:18px;font-weight:700;color:var(--ink); } body.woocommerce-cart .cart_totals table{width:100%;margin:0;border:0;} body.woocommerce-cart .cart_totals table tr{ display:flex;justify-content:space-between;align-items:flex-start;gap:18px; padding:11px 0;border:0; } body.woocommerce-cart .cart_totals table th{ padding:0;border:0;text-align:left; font-weight:500;color:var(--ink-2);font-size:14.5px;white-space:nowrap; } body.woocommerce-cart .cart_totals table td{ padding:0;border:0;text-align:right; color:var(--ink);font-variant-numeric:tabular-nums; } body.woocommerce-cart .cart_totals .shipping-calculator-button, body.woocommerce-cart .cart_totals .woocommerce-shipping-destination{font-size:13px;color:var(--ink-2);} body.woocommerce-cart .cart_totals tr.order-total{ margin-top:6px;padding-top:16px;border-top:1px solid var(--mist);align-items:center; } body.woocommerce-cart .cart_totals tr.order-total th{font-size:16px;font-weight:700;color:var(--ink);} body.woocommerce-cart .cart_totals tr.order-total td, body.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount{ font-size:21px;font-weight:800;color:var(--red); } /* Proceed-to-checkout — brand-red pill CTA */ body.woocommerce-cart .wc-proceed-to-checkout{margin-top:18px;padding:0;} body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%;height:54px;margin:0; background:var(--red);color:#fff!important; border:0;border-radius:999px; font-size:17px;font-weight:700;text-decoration:none; box-shadow:0 12px 24px -10px rgba(215,33,39,.6); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after{content:"→";font-size:19px;font-weight:600;line-height:1;} body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--red-deep);transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(215,33,39,.6); } /* Empty cart — a centered, calm terminal state */ body.woocommerce-cart .cart-empty.woocommerce-info, body.woocommerce-cart .wc-empty-cart-message{ max-width:520px;margin:20px auto 4px; background:transparent;border:0;padding:0; text-align:center;font-size:19px;font-weight:600;color:var(--ink); } body.woocommerce-cart .cart-empty::before{ content:"";display:block;width:64px;height:64px;margin:0 auto 18px; border-radius:50%;background:var(--mist-2); } body.woocommerce-cart .return-to-shop{text-align:center;margin:22px auto 0;} body.woocommerce-cart .return-to-shop .button{ display:inline-flex;align-items:center;justify-content:center; height:50px;padding:0 30px; background:var(--red);color:#fff!important; border:0;border-radius:999px; font-weight:700;font-size:16px;text-decoration:none; box-shadow:0 12px 24px -10px rgba(215,33,39,.6); } body.woocommerce-cart .return-to-shop .button:hover{background:var(--red-deep);} /* Cross-sells (you-may-also-like) — keep it quiet */ body.woocommerce-cart .cross-sells{grid-column:1 / -1;margin-top:12px;} body.woocommerce-cart .cross-sells > h2{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 16px;} /* ============================================================ CHECKOUT ============================================================ */ /* Notices above the form (login prompt / coupon toggle) */ body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, body.woocommerce-checkout > .woocommerce .woocommerce-info{ background:var(--surface); border:1px solid var(--mist); border-left:3px solid var(--red); border-radius:12px; padding:14px 18px;margin:0 0 14px; color:var(--ink);font-size:14.5px; list-style:none; } body.woocommerce-checkout .woocommerce-info::before{display:none;} body.woocommerce-checkout .woocommerce-info a{color:var(--red);font-weight:600;text-decoration:none;} body.woocommerce-checkout .woocommerce-info a:hover{text-decoration:underline;} /* Two-column shell: details left, sticky review right */ body.woocommerce-checkout form.checkout.woocommerce-checkout{ display:grid; grid-template-columns:minmax(0,1fr) 388px; grid-template-areas: "details review-head" "details review"; gap:6px 34px; align-items:start; } /* Reset the theme's float layout (it pins #customer_details to width:148px / float:left and #order_review to float:right/width:360px, which would shrink the grid items inside their tracks). */ body.woocommerce-checkout form.checkout #customer_details{grid-area:details;min-width:0;width:auto;float:none;padding:0;} body.woocommerce-checkout form.checkout #order_review_heading{grid-area:review-head;} body.woocommerce-checkout form.checkout #order_review{grid-area:review;width:auto;float:none;} /* Field-group cards */ body.woocommerce-checkout #customer_details .col-1, body.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0;} body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields, body.woocommerce-checkout .woocommerce-account-fields{ background:var(--surface); border:1px solid var(--mist); border-radius:var(--r-lg); padding:24px 24px 8px; box-shadow:var(--shadow); margin:0 0 20px; } body.woocommerce-checkout .woocommerce-additional-fields{padding-bottom:24px;} body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout .woocommerce-shipping-fields > h3, body.woocommerce-checkout .woocommerce-additional-fields h3, body.woocommerce-checkout #order_review_heading{ margin:0 0 18px;font-size:18px;font-weight:700;color:var(--ink); display:flex;align-items:center;gap:9px; } body.woocommerce-checkout #order_review_heading{margin-bottom:14px;border:0;border-radius:0;background:transparent;padding:0;} /* Field rows: first/last name pair up, the rest go full-width */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{ display:grid;grid-template-columns:1fr 1fr;gap:0 16px; } /* The parent theme sizes first/last name with width:47% + float — inside the grid that leaves each input at ~half its cell, floated to one side (the short, staggered look). Reset to fill the cell; the grid handles the two columns. */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row{grid-column:1 / -1;margin:0 0 15px;width:auto;float:none;} body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first{grid-column:1;} body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:2;} body.woocommerce-checkout .form-row{margin:0 0 15px;} body.woocommerce-checkout .form-row label{ display:block;margin-bottom:6px; font-size:13px;font-weight:600;color:var(--ink); } body.woocommerce-checkout .form-row .required{color:var(--red);border:0;text-decoration:none;} body.woocommerce-checkout .form-row .optional{color:var(--ink-2);font-weight:400;} /* Inputs */ body.woocommerce-checkout .input-text, body.woocommerce-checkout input[type="text"], body.woocommerce-checkout input[type="email"], body.woocommerce-checkout input[type="tel"], body.woocommerce-checkout input[type="password"], body.woocommerce-checkout select, body.woocommerce-checkout textarea.input-text{ width:100%;min-height:48px; border:1px solid var(--mist);border-radius:12px; padding:0 14px;background:var(--surface); font:inherit;font-size:15px;color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease; box-sizing:border-box; } body.woocommerce-checkout textarea.input-text{padding:12px 14px;min-height:92px;line-height:1.5;} body.woocommerce-checkout .input-text:focus, body.woocommerce-checkout select:focus, body.woocommerce-checkout textarea.input-text:focus{ outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash); } body.woocommerce-checkout .input-text::placeholder{color:#9BB0BB;} /* select2 (country / state) matched to the native inputs */ body.woocommerce-checkout .select2-container .select2-selection--single{ height:48px!important; border:1px solid var(--mist)!important;border-radius:12px!important; background:var(--surface); } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:46px!important;padding-left:14px;color:var(--ink); } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px!important;} body.woocommerce-checkout .select2-container--focus .select2-selection--single, body.woocommerce-checkout .select2-container--open .select2-selection--single{ border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-wash); } /* "Create account" / ship-to-different toggles */ body.woocommerce-checkout .woocommerce-account-fields .create-account, body.woocommerce-checkout .woocommerce-shipping-fields h3 label{font-weight:600;color:var(--ink);} body.woocommerce-checkout .form-row.woocommerce-validated .input-text{border-color:#BFD8CB;} body.woocommerce-checkout .form-row.woocommerce-invalid .input-text{border-color:var(--red);} /* Order review card (sticky) */ body.woocommerce-checkout #order_review{ position:sticky;top:104px; background:var(--surface); border:1px solid var(--mist); border-radius:var(--r-lg); padding:22px 22px 24px; box-shadow:var(--shadow-lift); } body.woocommerce-checkout #order_review table.shop_table{width:100%;margin:0;border:0;} body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td{border:0;padding:10px 0;vertical-align:top;} body.woocommerce-checkout #order_review thead th{ padding-bottom:12px;border-bottom:1px solid var(--mist); font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2); } body.woocommerce-checkout #order_review thead th.product-total{text-align:right;} body.woocommerce-checkout #order_review tbody tr.cart_item td{border-bottom:1px solid var(--mist-2);} body.woocommerce-checkout #order_review tbody .product-name{font-weight:500;font-size:14.5px;color:var(--ink);line-height:1.45;} body.woocommerce-checkout #order_review tbody .product-name .product-quantity{color:var(--ink-2);font-weight:600;} body.woocommerce-checkout #order_review tbody .product-total{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;} body.woocommerce-checkout #order_review tfoot th{font-weight:500;color:var(--ink-2);text-align:left;} body.woocommerce-checkout #order_review tfoot td{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;} body.woocommerce-checkout #order_review tfoot tr.order-total th{font-size:16px;font-weight:700;color:var(--ink);padding-top:14px;} body.woocommerce-checkout #order_review tfoot tr.order-total td{padding-top:14px;} body.woocommerce-checkout #order_review tfoot tr.order-total .woocommerce-Price-amount{font-size:20px;font-weight:800;color:var(--red);} /* PromptPay QR block (Seed plugin, sits inside the review) */ body.woocommerce-checkout .seed-promptpay-qr.sc-banks-display{ display:flex;align-items:center;gap:16px; background:var(--mist-2); border:1px solid var(--mist);border-radius:var(--r); padding:16px;margin:18px 0 4px; } body.woocommerce-checkout .seed-promptpay-qr-qrcode img, body.woocommerce-checkout .seed-promptpay-qr-qrcode canvas{ width:104px;height:104px;display:block; background:#fff;border-radius:10px;padding:6px; } body.woocommerce-checkout .seed-promptpay-qr-detail{font-size:14px;color:var(--ink);line-height:1.6;} /* Payment methods */ body.woocommerce-checkout .woocommerce-checkout-payment{background:transparent;border-radius:0;margin-top:6px;} body.woocommerce-checkout ul.payment_methods{ list-style:none;margin:16px 0 0;padding:0;border:0; display:flex;flex-direction:column;gap:10px; } /* Each method is a flex row: radio · label(+card icons) · description drops to its own full-width line. (WooCommerce renders …icon…; the label was inline-flex before, so the radio sat on the baseline and overlapped the wrapping text.) */ body.woocommerce-checkout ul.payment_methods li{ display:flex;flex-wrap:wrap;align-items:center;column-gap:11px; background:var(--surface); border:1px solid var(--mist);border-radius:12px; padding:14px 16px; transition:border-color .16s ease, box-shadow .16s ease; } body.woocommerce-checkout ul.payment_methods li:hover{border-color:#CBDBE3;} body.woocommerce-checkout ul.payment_methods li:has(input:checked){ border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash); } /* The theme absolutely-positions the radio (position:absolute;top:6px;left:0), which drops it out of the flex row so align-items can't centre it and it overlaps the border. Pull it back into flow. Scoped under #payment to beat the theme's ID-specificity rule. */ body.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"]{ position:static;top:auto;left:auto; flex:none;margin:0;width:18px;height:18px;accent-color:var(--red);cursor:pointer; } body.woocommerce-checkout ul.payment_methods li > label{ flex:1 1 auto;min-width:0;margin:0; display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px; font-weight:600;color:var(--ink);cursor:pointer; } body.woocommerce-checkout ul.payment_methods li > .payment_box{flex:1 0 100%;} /* Card-brand badges (swapped in for the xendit logo via woocommerce_gateway_icon) */ body.woocommerce-checkout ul.payment_methods li .wc-pay-cards{display:inline-flex;align-items:center;gap:6px;} body.woocommerce-checkout ul.payment_methods li .wc-pay-cards img, body.woocommerce-checkout ul.payment_methods li label img{height:22px;width:auto;display:block;margin:0;} body.woocommerce-checkout .payment_box{ background:var(--mist-2);border:0;border-radius:10px; padding:12px 14px;margin:12px 0 2px; font-size:13.5px;color:var(--ink-2);line-height:1.6; } body.woocommerce-checkout .payment_box::before{display:none;} /* Terms + place order */ body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:14px 0 4px;font-size:13.5px;color:var(--ink-2);} body.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:13px;color:var(--ink-2);margin:14px 0 0;} body.woocommerce-checkout #payment .form-row.place-order{padding-top:16px;margin:0;} body.woocommerce-checkout #place_order{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%;height:56px; background:var(--red);color:#fff; border:0;border-radius:999px; font:inherit;font-size:18px;font-weight:700;cursor:pointer; box-shadow:0 12px 24px -10px rgba(215,33,39,.6); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } body.woocommerce-checkout #place_order:hover{ background:var(--red-deep);transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(215,33,39,.6); } /* ============================================================ ORDER RECEIVED (thank-you) — a clean terminal success state ============================================================ */ body.woocommerce-order-received .woocommerce-order{max-width:720px;margin:0 auto;} body.woocommerce-order-received .wc-flow-steps{margin-top:0;} /* Success hero built from the default success notice */ body.woocommerce-order-received .woocommerce-thankyou-order-received{ position:relative; margin:0 auto 26px;padding:30px 24px 26px; background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg); box-shadow:var(--shadow); text-align:center; font-size:22px;font-weight:700;color:var(--ink); } body.woocommerce-order-received .woocommerce-thankyou-order-received::before{ content:"✓"; display:grid;place-items:center; width:60px;height:60px;margin:0 auto 16px; border-radius:50%; background:var(--ok);color:#fff; font-size:30px;font-weight:700;line-height:1; box-shadow:0 12px 26px -10px rgba(27,127,92,.7); } /* Order overview → row of quiet stat tiles */ body.woocommerce-order-received ul.order_details.woocommerce-order-overview{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0; list-style:none;margin:0 0 26px;padding:0; background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow); } body.woocommerce-order-received ul.order_details li{ margin:0;padding:18px 20px; border-right:1px solid var(--mist);border-top:0; font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2); } body.woocommerce-order-received ul.order_details li:last-child{border-right:0;} body.woocommerce-order-received ul.order_details li strong{ display:block;margin-top:7px; font-size:16px;font-weight:700;color:var(--ink); text-transform:none;letter-spacing:0; } /* Order + customer detail cards */ body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details{ background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg); padding:24px 24px;box-shadow:var(--shadow);margin:0 0 22px; } body.woocommerce-order-received .woocommerce-order-details__title, body.woocommerce-order-received .woocommerce-customer-details h2, body.woocommerce-order-received .woocommerce-column__title{ font-size:18px;font-weight:700;color:var(--ink);margin:0 0 16px; } body.woocommerce-order-received .woocommerce-table--order-details{width:100%;border:0;} body.woocommerce-order-received .woocommerce-table--order-details th, body.woocommerce-order-received .woocommerce-table--order-details td{ padding:11px 0;border:0;border-bottom:1px solid var(--mist-2);text-align:left; } body.woocommerce-order-received .woocommerce-table--order-details td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);} body.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total th{font-weight:700;color:var(--ink);} body.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td .woocommerce-Price-amount{font-weight:800;color:var(--red);font-size:18px;} body.woocommerce-order-received .woocommerce-customer-details address{ border:0;padding:0;font-style:normal;color:var(--ink-2);line-height:1.7;font-size:14.5px; } /* ============================================================ MY ACCOUNT ============================================================ */ /* Login / register (logged out) — two carded columns */ body.woocommerce-account .woocommerce > .u-columns, body.woocommerce-account .woocommerce > .customer-login-form{margin:0;} body.woocommerce-account #customer_login.u-columns{ display:grid;grid-template-columns:1fr 1fr;gap:26px; } body.woocommerce-account #customer_login .u-column1, body.woocommerce-account #customer_login .u-column2{width:100%;float:none;margin:0;} body.woocommerce-account .woocommerce-form{ background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg); padding:26px 26px 28px;box-shadow:var(--shadow);height:100%; } body.woocommerce-account #customer_login h2, body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3{ font-size:19px;font-weight:700;color:var(--ink);margin:0 0 18px; } body.woocommerce-account .woocommerce-form-row label, body.woocommerce-account .form-row label{ display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink); } body.woocommerce-account .woocommerce-Input, body.woocommerce-account .input-text, body.woocommerce-account input[type="text"], body.woocommerce-account input[type="email"], body.woocommerce-account input[type="password"], body.woocommerce-account input[type="tel"], body.woocommerce-account select{ width:100%;min-height:48px;box-sizing:border-box; border:1px solid var(--mist);border-radius:12px; padding:0 14px;background:var(--surface); font:inherit;font-size:15px;color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease; } body.woocommerce-account .input-text:focus, body.woocommerce-account select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash);} /* Account buttons — primary red, ghost secondary */ body.woocommerce-account .woocommerce-form button.button, body.woocommerce-account .woocommerce-Button.button, body.woocommerce-account .woocommerce-MyAccount-content button.button{ display:inline-flex;align-items:center;justify-content:center; min-height:50px;padding:0 28px; background:var(--red);color:#fff!important; border:0;border-radius:999px; font:inherit;font-weight:700;font-size:15.5px;cursor:pointer; box-shadow:0 12px 24px -10px rgba(215,33,39,.55); transition:background .16s ease, transform .16s ease; } body.woocommerce-account .woocommerce-form button.button:hover, body.woocommerce-account .woocommerce-Button.button:hover, body.woocommerce-account .woocommerce-MyAccount-content button.button:hover{background:var(--red-deep);transform:translateY(-1px);} body.woocommerce-account .woocommerce-form-login__rememberme{font-size:14px;color:var(--ink-2);} /* Logged-in dashboard: sidebar nav + content, kept light. Scoped to the main content .woocommerce (the header mini-cart widget in .site-action is also a .woocommerce and must not become a grid). */ body.woocommerce-account.logged-in .page-content > .woocommerce{ display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;align-items:start; } body.woocommerce-account .woocommerce-MyAccount-navigation{ width:auto;float:none;margin:0; background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg); padding:10px;box-shadow:var(--shadow); } body.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;} body.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border:0;} body.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block;padding:11px 15px;border-radius:11px; color:var(--ink-2);font-weight:600;font-size:14.5px;text-decoration:none; transition:background .14s ease, color .14s ease; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--mist-2);color:var(--ink);} body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--red);color:#fff;} body.woocommerce-account .woocommerce-MyAccount-content{ width:auto;float:none;margin:0; background:var(--surface); border:1px solid var(--mist);border-radius:var(--r-lg); padding:26px 28px;box-shadow:var(--shadow); color:var(--ink); } body.woocommerce-account .woocommerce-MyAccount-content a{color:var(--red);} body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table{margin-top:10px;} body.woocommerce-account .woocommerce-orders-table, body.woocommerce-account .shop_table{border-collapse:collapse;width:100%;} body.woocommerce-account .woocommerce-orders-table th, body.woocommerce-account .woocommerce-orders-table td{padding:12px 10px;border-bottom:1px solid var(--mist-2);} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1023px){ body.woocommerce-cart.-has-item .woocommerce{grid-template-columns:1fr;} body.woocommerce-cart.-has-item .woocommerce-cart-form, body.woocommerce-cart.-has-item .cart-collaterals{grid-column:1;} body.woocommerce-cart .cart-collaterals .cart_totals{position:static;} body.woocommerce-checkout form.checkout.woocommerce-checkout{ grid-template-columns:1fr; grid-template-areas:"details" "review-head" "review"; } body.woocommerce-checkout #order_review{position:static;margin-bottom:22px;} body.woocommerce-account.logged-in .page-content > .woocommerce{grid-template-columns:1fr;} } @media (max-width:600px){ body.woocommerce-cart tr.cart_item{ grid-template-columns:62px minmax(0,1fr) auto; grid-template-areas: "thumb name remove" "thumb price remove" "thumb qty subtotal"; column-gap:14px;row-gap:8px;padding:14px; } body.woocommerce-cart td.product-thumbnail img{width:62px;height:62px;} body.woocommerce-cart td.product-name{align-self:center;font-size:14.5px;} body.woocommerce-cart td.product-price{align-self:center;} body.woocommerce-cart td.product-subtotal{align-self:center;} body.woocommerce-cart td.actions{flex-direction:column;align-items:stretch;} body.woocommerce-cart td.actions .coupon{max-width:none;} body.woocommerce-cart td.actions button[name="update_cart"]{margin-left:0;} body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr;} body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first, body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:1;} body.woocommerce-account #customer_login.u-columns{grid-template-columns:1fr;} .wc-flow-step__label{font-size:11.5px;} }