/* * cart-checkout.css — Session 15 * Cart drawer · Checkout two-column · Order confirmation. * All colours via --silure-* custom properties. border-radius: 0 throughout. */ /* ═══════════════════════════════════════════════════════════════════════════ CART OVERLAY ═══════════════════════════════════════════════════════════════════════════ */ #silure-cart-overlay { position: fixed; inset: 0; background: rgba(5, 5, 5, 0.52); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.32s ease; } #silure-cart-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ═══════════════════════════════════════════════════════════════════════════ CART DRAWER PANEL ═══════════════════════════════════════════════════════════════════════════ */ #silure-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--silure-bg, #FBF9F6); z-index: 2001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 40px rgba(5, 5, 5, 0.14); } #silure-cart-drawer.is-open { transform: translateX(0); } #silure-cart-drawer.is-loading { opacity: 0.55; pointer-events: none; } /* ── Drawer header ────────────────────────────────────────────────────── */ .silure-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; border-bottom: 1px solid var(--silure-border, #E8E4DF); flex-shrink: 0; } .silure-cart-title { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--silure-text, #444444); margin: 0; } .silure-cart-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--silure-text, #444444); font-size: 22px; line-height: 1; opacity: 0.55; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; } .silure-cart-close:hover { opacity: 1; } /* ── Drawer body (scrollable items) ──────────────────────────────────── */ .silure-cart-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── Empty state ─────────────────────────────────────────────────────── */ .silure-bag-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 32px; gap: 24px; min-height: 300px; text-align: center; } .silure-bag-empty-text { font-family: 'Mulish', sans-serif; font-size: 15px; font-weight: 300; color: var(--silure-muted, #7A7672); margin: 0; letter-spacing: 0.5px; } .silure-bag-browse { display: inline-block; font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--silure-on-dark, #FBF9F6); background: var(--silure-primary, #050505); padding: 13px 28px; transition: background 0.2s; } .silure-bag-browse:hover { background: var(--silure-accent, #000); color: var(--silure-on-dark, #FBF9F6); } /* ── Cart items list ─────────────────────────────────────────────────── */ .silure-bag-items { list-style: none; margin: 0; padding: 0; } .silure-bag-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--silure-border, #E8E4DF); } .silure-bag-img-wrap { flex-shrink: 0; display: block; width: 60px; height: 60px; overflow: hidden; background: var(--silure-surface, #F3F0EB); } .silure-bag-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; } .silure-bag-item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } .silure-bag-item-name { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 400; color: var(--silure-text, #444444); text-decoration: none; letter-spacing: 0.3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .silure-bag-item-name:hover { color: var(--silure-primary, #050505); } .silure-bag-item-purity { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silure-muted, #7A7672); } .silure-bag-item-price { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; color: var(--silure-text, #444444); margin-top: 2px; } .silure-bag-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 2px; } /* Qty control */ .silure-bag-qty { display: flex; align-items: stretch; border: 1px solid var(--silure-border-mid, #C8C4BF); } .silure-qty-btn { background: none; border: none; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--silure-text, #444444); transition: background 0.15s; flex-shrink: 0; padding: 0; } .silure-qty-btn:hover { background: var(--silure-surface, #F3F0EB); } .silure-qty-num { display: flex; align-items: center; justify-content: center; min-width: 28px; padding: 0 4px; font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; color: var(--silure-text, #444444); border-left: 1px solid var(--silure-border-mid, #C8C4BF); border-right: 1px solid var(--silure-border-mid, #C8C4BF); } .silure-bag-remove { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--silure-muted, #7A7672); line-height: 1; padding: 2px 4px; transition: color 0.2s; } .silure-bag-remove:hover { color: var(--silure-primary, #050505); } /* ── Drawer footer ───────────────────────────────────────────────────── */ .silure-bag-footer { padding: 20px 24px 28px; border-top: 1px solid var(--silure-border, #E8E4DF); flex-shrink: 0; background: var(--silure-bg, #FBF9F6); } .silure-bag-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .silure-bag-subtotal-label { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--silure-muted, #7A7672); } .silure-bag-subtotal-value { font-family: 'Mulish', sans-serif; font-size: 16px; font-weight: 400; color: var(--silure-text, #444444); } .silure-bag-tax-note { font-family: 'Mulish', sans-serif; font-size: 11px; font-weight: 300; color: var(--silure-muted, #7A7672); margin: 0 0 18px; letter-spacing: 0.3px; } .silure-bag-checkout { display: block; width: 100%; text-align: center; font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--silure-on-dark, #FBF9F6); background: var(--silure-primary, #050505); padding: 16px 24px; transition: background 0.2s; box-sizing: border-box; } .silure-bag-checkout:hover { background: var(--silure-accent, #000); color: var(--silure-on-dark, #FBF9F6); } /* ═══════════════════════════════════════════════════════════════════════════ CHECKOUT — TWO-COLUMN LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ .woocommerce-checkout.checkout .silure-checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1200px; margin: 0 auto; align-items: start; } .silure-checkout-col { padding: 56px 52px 80px; } .silure-checkout-col--form { border-right: 1px solid var(--silure-border, #E8E4DF); } .silure-checkout-col--summary { background: var(--silure-surface, #F3F0EB); position: sticky; top: 0; } /* ── Section headings ─────────────────────────────────────────────────── */ .silure-checkout-section { margin-bottom: 40px; } .silure-checkout-section:last-child { margin-bottom: 0; } .silure-checkout-section-heading, .silure-checkout-summary-heading, .woocommerce-checkout h3#order_review_heading { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--silure-muted, #7A7672); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--silure-border, #E8E4DF); } /* ── Form fields ──────────────────────────────────────────────────────── */ .woocommerce-checkout .form-row { margin-bottom: 16px; position: relative; } .woocommerce-checkout .form-row label { display: block !important; font-family: 'DM Mono', monospace !important; font-size: 10px !important; font-weight: 300 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: #7A7672 !important; margin-bottom: 7px; } .woocommerce-checkout .form-row .required { color: inherit; } /* Sitewide form redesign (Session 30): underline replacing the box — checkout's own field sequence/pairing (first/last paired via WC's native form-row-first/form-row-last classes, everything else full-width) is left exactly as-is, matching the same pattern already established on the address form — not introducing new pairings (e.g. Country next to Street Address) with no visual precedent anywhere else on the site. !important required throughout: confirmed live neither this rule nor silure-woocommerce.css's own (non-important) ".woocommerce-checkout .form-row input" duplicate were winning against Hello Elementor's reset.css — same recurring load-order tie fixed elsewhere on the site today, reset.css was rendering a 5px border-radius and full white-box border regardless of which of the two non-important rules had higher specificity, since neither could beat reset.css without !important. */ .woocommerce-checkout .form-row input[type="text"], .woocommerce-checkout .form-row input[type="email"], .woocommerce-checkout .form-row input[type="tel"], .woocommerce-checkout .form-row input[type="number"], .woocommerce-checkout .form-row input[type="password"], .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100% !important; padding: 13px 0 !important; font-family: 'DM Mono', monospace !important; font-size: 13px !important; font-weight: 300 !important; color: #050505 !important; background: transparent !important; border: none !important; border-bottom: 1px solid #050505 !important; border-radius: 0 !important; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; box-sizing: border-box; } .woocommerce-checkout .form-row input:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { border-color: var(--silure-primary, #050505); } .woocommerce-checkout .form-row.woocommerce-invalid input, .woocommerce-checkout .form-row.woocommerce-invalid select { border-color: #c0392b; } /* Side-by-side field pairs */ .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; box-sizing: border-box; } .woocommerce-checkout .form-row-first { margin-right: 16px; } /* Checkbox row (Session 30) -- was relying on accent-color alone, which only tints the browser's native checkbox rendering and does not override its size; mobile-ux.css's sitewide WCAG 2.5.5 tap-target rule (input[type="checkbox"] { min-width/min-height: 44px }) was clamping these to 44x44 regardless, confirmed live. Switched to the same fully custom appearance:none pattern already used on the account drawer (.silure-check), with explicit min-width/min-height added since min-* always overrides width/height on the same box regardless of specificity. #ship-to-different-address-checkbox isn't wrapped in .form-row at all (its own WooCommerce markup uses .woocommerce-shipping-fields instead), so it needed a second, separate selector -- confirmed live it had zero custom styling before this. */ .woocommerce-checkout .form-row input[type="checkbox"], .woocommerce-checkout #ship-to-different-address-checkbox { width: 16px; height: 16px; min-width: 16px; min-height: 16px; flex-shrink: 0; margin-right: 8px; /* silure-woocommerce.css's ".woocommerce-checkout .form-row input" rule has no [type] qualifier, so its padding:13px 0 (meant for text fields) was also landing on checkboxes -- with box-sizing:border-box that inflated this element to 16x28 despite the explicit width/height above (padding still adds to the box independent of a smaller declared width/height, same class of issue as the min-width/min-height clamp). Reset to 0 here to match the other two locked-checkbox contexts. */ padding: 0; border: 1px solid var(--silure-border-mid, #C8C4BF); border-radius: 0; appearance: none; -webkit-appearance: none; background: #FFFFFF; cursor: pointer; position: relative; box-sizing: border-box; } .woocommerce-checkout .form-row input[type="checkbox"]:checked, .woocommerce-checkout #ship-to-different-address-checkbox:checked { background: var(--silure-primary, #050505); border-color: var(--silure-primary, #050505); } /* ── PIN-code auto-fill, locked fields (Session 30) ─────────────────── Extends the exact same locked/autofilled field standard already documented for the My Account address form (myaccount.css) to Checkout's billing/shipping City (readonly), State and Country (disabled) -- transparent background (already the base state for every field on this form, nothing to override there), grey text so a locked field still reads as visually distinct from an editable one, and no left-padding discrepancy against the plain inputs beside it. */ .woocommerce-checkout .form-row input[readonly] { color: var(--silure-muted, #7A7672) !important; cursor: not-allowed; } .woocommerce-checkout .form-row.silure-pincode-derived select:disabled:not(.select2-hidden-accessible) { color: var(--silure-muted, #7A7672) !important; cursor: not-allowed; opacity: 1; } .woocommerce-checkout .form-row.silure-pincode-derived .select2-container--disabled .select2-selection--single { cursor: not-allowed; } .woocommerce-checkout .form-row.silure-pincode-derived .select2-container--disabled .select2-selection--single .select2-selection__rendered { color: var(--silure-muted, #7A7672) !important; } .woocommerce-checkout .form-row.silure-pincode-derived .select2-container--disabled .select2-selection__arrow { display: none; } /* ── Order summary table (right column) ──────────────────────────────── */ /* Retargeted to .silure-order-items-table / .silure-order-totals-table (checkout redesign, duplicate-Total-row fix) -- neither split table carries .woocommerce-checkout-review-order-table any more (see review-order.php own header comment: that class is WooCommerce own hardcoded AJAX fragment-replacement selector, and having it on a split structure caused real duplicate rendering). */ .silure-order-items-table, .silure-order-totals-table { width: 100%; border-collapse: collapse; margin-bottom: 0; } .silure-order-items-table th, .silure-order-items-table td, .silure-order-totals-table th, .silure-order-totals-table td { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; color: var(--silure-text, #444444); padding: 14px 0; border-bottom: 1px solid var(--silure-border, #E8E4DF); vertical-align: middle; } .silure-order-items-table thead th { font-size: 10px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silure-muted, #7A7672); padding-bottom: 12px; } /* Product row with inline image */ .silure-order-items-table .product-name { display: flex; align-items: center; gap: 14px; } .silure-checkout-product-img { flex-shrink: 0; width: 52px; height: 52px; object-fit: cover; background: var(--silure-bg, #FBF9F6); display: block; } .silure-checkout-product-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .silure-checkout-product-title { font-size: 13px; font-weight: 400; color: var(--silure-text, #444444); letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .silure-checkout-product-qty { font-size: 11px; color: var(--silure-muted, #7A7672); letter-spacing: 0.5px; } /* Totals tfoot -- table.silure-order-totals-table, not .woocommerce-checkout-review-order-table (that class now lives on the items table only, see review-order.php own header comment for why: WooCommerce core hardcodes it as the update_checkout fragment- replacement selector, and having it on both split tables caused a real duplicate-rendering bug). */ table.silure-order-totals-table tfoot tr th, table.silure-order-totals-table tfoot tr td { font-size: 12px; color: var(--silure-muted, #7A7672); padding: 10px 0; border-bottom: none; } table.silure-order-totals-table tfoot tr th { font-size: 11px; letter-spacing: 0.5px; } table.silure-order-totals-table tfoot .order-total th, table.silure-order-totals-table tfoot .order-total td { font-size: 15px; font-weight: 600; color: var(--silure-text, #444444); border-top: 1px solid var(--silure-border-mid, #C8C4BF); padding-top: 16px; border-bottom: none; } .silure-checkout-rate-note { font-family: 'Mulish', sans-serif; font-size: 11px; font-weight: 300; color: var(--silure-muted, #7A7672); margin: 18px 0 0; letter-spacing: 0.3px; font-style: italic; } /* ── Checkout "You may also like" (Session 30) ────────────────────────── Vertical list, replaces the horizontal Recently Viewed carousel that used to sit here -- that carousel's non-wrapping horizontal track forced .silure-checkout-grid's 1fr/1fr columns to blow out to an unbalanced width (min-content of an unconstrained flex row), a bug this layout cannot reproduce: the list stacks vertically and every row's flexible text column below carries its own min-width: 0, so normal text wrapping -- not track overflow -- is what happens at narrow widths. */ .silure-checkout-upsell { margin-top: 32px; } .silure-checkout-upsell-list { display: flex; flex-direction: column; gap: 16px; } .silure-checkout-upsell-item { display: flex; align-items: center; gap: 12px; } .silure-checkout-upsell-item-img { flex: 0 0 56px; display: block; } .silure-checkout-upsell-item-img img { width: 56px; height: 56px; object-fit: cover; display: block; background: var(--silure-border, #E8E4DF); } .silure-checkout-upsell-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .silure-checkout-upsell-item-name { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.3px; color: #050505; text-decoration: none; } .silure-checkout-upsell-item-price { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; color: #050505; } /* Strikethrough sale price -- same manual ::after-line technique used by .silure-also-like__price / .silure-rv-item__price (product.css): native text-decoration: line-through is not reliably centered across browsers, so the line is drawn explicitly instead. */ .silure-checkout-upsell-item-price del { display: inline-block; position: relative; text-decoration: none; color: var(--silure-muted, #7A7672); } .silure-checkout-upsell-item-price del .woocommerce-Price-amount { display: inline; margin-bottom: 0; } .silure-checkout-upsell-item-price del::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; transform: translateY(-50%); } .silure-checkout-upsell-item-price ins { text-decoration: none; color: #050505; } .silure-checkout-upsell-add { flex: 0 0 36px; cursor: pointer; /* width/height/min-width/min-height/padding/box-sizing/display/ align-items/justify-content come from silure-core.php (!important) -- an Elementor-generated global button style (padding: 8px 16px, display: block, not a theme file we control) out-prioritises any plain rule here regardless of specificity, so the whole box-model + centering has to live in the one block already proven to win against it. background/color/border/radius likewise come from the sitewide button hover standard block (silure_kill_pink_late()) -- see silure-core.php, same canonical source every other CTA button on the site uses. */ } .silure-checkout-upsell-add svg { width: 14px; height: 14px; display: block; } /* ── Payment section (left column) ───────────────────────────────────── */ #silure-checkout-payment .woocommerce-checkout-payment, #payment { margin-top: 0; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 0; padding: 0; border-top: 1px solid var(--silure-border, #E8E4DF); } .woocommerce-checkout #payment ul.payment_methods li { border-bottom: 1px solid var(--silure-border, #E8E4DF); padding: 14px 0; } .woocommerce-checkout #payment ul.payment_methods label { font-family: 'Mulish', sans-serif; font-size: 14px; font-weight: 300; color: var(--silure-text, #444444); cursor: pointer; display: flex; align-items: center; gap: 10px; } .woocommerce-checkout #payment ul.payment_methods li img { max-height: 24px; vertical-align: middle; } .woocommerce-checkout #payment div.payment_box { padding: 12px 0 4px; font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; color: var(--silure-muted, #7A7672); line-height: 1.6; } .woocommerce-checkout #payment #place_order, .woocommerce-checkout #payment .button[name="woocommerce_checkout_place_order"] { display: block; width: 100%; padding: 17px 24px; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s; margin-top: 24px; box-sizing: border-box; } /* color/background/border/radius (base + hover/focus) now come from the single sitewide button hover standard in silure_kill_pink_late(). */ /* Processing spinner overlay */ .woocommerce-checkout-payment.processing { opacity: 0.55; pointer-events: none; } /* WooCommerce notices on checkout */ .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; padding: 14px 16px; margin-bottom: 24px; border-left: 3px solid var(--silure-primary, #050505); background: var(--silure-surface, #F3F0EB); list-style: none; } /* ═══════════════════════════════════════════════════════════════════════════ ORDER CONFIRMATION — THANK YOU PAGE ═══════════════════════════════════════════════════════════════════════════ */ /* max-width widened 680px -> 880px (2x2 grid round) -- 680px was sized for the old single-column stacked layout; the new Order details/ Total/Billing/Shipping grid needs real room for two columns of address text side by side. Hero content above stays visually identical -- it's centered text using clamp()/vw sizing, which reads off the viewport, not this container, so widening it doesn't change how the hero looks. */ .silure-thankyou-wrap { max-width: 880px; margin: 72px auto 100px; padding: 0 32px; text-align: center; } .silure-thankyou-overline { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--silure-muted, #7A7672); margin: 0 0 16px; } /* !important on every property (checkout redesign follow-up) -- this heading is a real

, and Elementor own generated post-5.css forces letter-spacing:-0.03em (and, confirmed live, font-family down to a generic serif fallback) !important on every h1/h2 sitewide. Same collision already found and fixed once today, scoped to the login/ register modal title -- this heading was never covered by that fix and was still hitting it. Only a matching !important override wins; specificity does not matter once Elementor own rule is !important. */ .silure-thankyou-heading { font-family: 'Mulish', sans-serif !important; font-size: clamp(52px, 8vw, 88px) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 0.88 !important; text-transform: uppercase !important; color: var(--silure-primary, #050505) !important; margin: 0 0 28px; } .silure-thankyou-order-number { font-family: 'Mulish', sans-serif; font-size: 14px; font-weight: 300; color: var(--silure-text, #444444); margin: 0 0 8px; letter-spacing: 0.5px; } .silure-thankyou-order-number strong { font-weight: 600; color: var(--silure-primary, #050505); } .silure-thankyou-confirm-email { font-family: 'Mulish', sans-serif; font-size: 13px; font-weight: 300; color: var(--silure-muted, #7A7672); margin: 0 0 44px; letter-spacing: 0.3px; } /* ── Order details / Total / Billing / Shipping — 2x2 grid ─────────── (checkout redesign follow-up, mockup-approved) This used to be one custom .silure-thankyou-summary card (product rows + Subtotal/GST/ Shipping/Total) stacked above WooCommerce's own native order-details table/customer-details blocks further down the page -- two independently-computed sources showing the exact same figures. Same real-duplication problem, same fix, as Checkout's own order-review duplicate-Total-row bug: pick ONE real source. The native table is now it; see the theme's woocommerce/order/order-details.php override, which physically splits that one source's markup into these four cells instead of calling WooCommerce's two native templates as-is (Order details = item rows, Total = the get_order_item_totals() breakdown + note/actions, Billing/Shipping = the address blocks order-details-customer.php used to render separately). Deliberately minimal on borders per the approved mockup -- whitespace (row-gap/ column-gap below) does the section-separation work; the one rule this page keeps is directly above the Total figure itself. */ .silure-thankyou-details-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 48px; text-align: left; margin-top: 8px; } /* Order details cell only -- warm cream card tint, distinguishing it from the other three cells (cell background round). --silure-surface (#F3F0EB) is this site's own existing "cards, admin panels" token (see CLAUDE.md design system) -- reused deliberately rather than a new one-off colour, one step warmer/more saturated than the page's own --silure-bg (#FBF9F6) so the card reads as distinct without introducing a colour outside the established palette. Real padding (not a negative-margin breakout) matches how every other real card on this site (e.g. .silure-checkout-col) already carries its own background -- content sits inside the tint, not overlapping it. border-radius explicit even though it's already 0 sitewide -- this is the one cell on the page that newly looks like a "card", worth guarding against an inherited default the way every other new component this session has had to. */ .silure-thankyou-details-cell--order { background: var(--silure-surface, #F3F0EB); padding: 28px; border-radius: 0; } .silure-thankyou-items-table, .silure-thankyou-totals-table { width: 100%; border-collapse: collapse; } /* Column headers (Product/Total) are redundant next to the "Order details" cell heading right above -- hidden, not removed, so the underlying WooCommerce markup/hooks stay untouched. */ .silure-thankyou-items-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* background:transparent !important on every cell rule below (2x2 grid round) -- hello-elementor's own reset.css zebra-stripes every odd row sitewide (table tbody>tr:nth-child(odd)>td, >th { background-color: hsla(0,0%,50%,.071) }), a plain rule but with 4 real type selectors, out-specificing a 1-class-1-type rule here regardless of source order. Same "author rule silently loses to a sitewide default" pattern as everywhere else on this page, just from the theme's reset this time instead of Elementor's generated CSS. border:none !important added (button-fix follow-up round) -- that same reset.css rule also ships `table td, table th { border: 1px solid hsla(0,0%,50%,.502) }` sitewide, never stripped here before -- confirmed live via getComputedStyle on both tables, not just the one the user happened to name (Total); Order details had the identical grid lines from the same root cause and would have been the exact same complaint next round if left alone. */ .silure-thankyou-items-table td { padding: 10px 0; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; letter-spacing: 0.3px; color: var(--silure-text, #444444); vertical-align: top; background: transparent !important; border: none !important; } /* Image + text laid out inline within the product-name cell, once the thumbnail filter (silure_order_received_product_with_thumbnail(), silure-core.php) is active. display:flex directly on the , so the markup this rule targeted no longer renders here at all; styling dead CSS for content that can't exist is worse than no rule. */ .silure-thankyou-order-note, .silure-thankyou-order-actions { margin: 16px 0 0; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; color: var(--silure-text, #444444); } @media (max-width: 780px) { .silure-thankyou-details-grid { grid-template-columns: 1fr; row-gap: 40px; column-gap: 0; } } /* ── CTA buttons ─────────────────────────────────────────────────────── */ .silure-thankyou-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; } /* font-family/size/weight corrected (checkout redesign follow-up) -- was Mulish 10px/400, the established sitewide button standard is DM Mono 13px/300. !important added on every property (full-page audit, follow-up round) -- the plain (non-!important) declarations above were STILL losing live despite being textually correct in this file: confirmed via a real fetch of the deployed CSS (byte-identical to source, ruling out a deploy/sync issue) that computed font-family and color both resolved to something else entirely (Mulish, #444444 instead of DM Mono, #FBF9F6) -- the same "Elementor own generated CSS beats any plain author rule regardless of specificity" pattern already found and fixed this session for headings and for the You-may-also-like add button, just hitting an anchor-styled-as-button this time instead. letter-spacing corrected 2px -> 0.5px (button standard fix round) -- this button was the only one on the page still using an old value; every other real button sitewide (including the Invoice button below) uses 0.5px. */ .silure-thankyou-continue { display: inline-block !important; font-family: 'DM Mono', monospace !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--silure-on-dark, #FBF9F6) !important; background: var(--silure-primary, #050505) !important; padding: 15px 40px !important; border-radius: 0 !important; transition: background 0.2s, color 0.2s; } /* Hover corrected to a genuine invert (button-fix follow-up round) -- was background var(--silure-accent, #000) with the SAME text color (#FBF9F6), i.e. near-black on near-black: #050505 -> #000 is barely distinguishable and the text stayed white either way, so there was no real visible hover state at all. Every other real button sitewide (silure_kill_pink_late()'s shared hover standard) inverts to background #FBF9F6 / color #050505 on hover -- matched here exactly instead of re-deriving a slightly-off value locally. */ .silure-thankyou-continue:hover { background: var(--silure-bg, #FBF9F6) !important; color: var(--silure-primary, #050505) !important; } .silure-thankyou-whatsapp { display: inline-flex; align-items: center; gap: 8px; font-family: 'Mulish', sans-serif; font-size: 12px; font-weight: 300; color: var(--silure-muted, #7A7672); text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; } .silure-thankyou-whatsapp:hover { color: var(--silure-primary, #050505); } /* Gap between the actions block and a payment-gateway-specific note directly below it (button-fix follow-up round) -- e.g. COD's own "Pay with cash upon delivery."

, echoed by do_action('woocommerce_thankyou_' . payment_method, ...) in thankyou.php, completely unstyled/unspaced native WooCommerce output with no class of its own to hook a normal rule to. Confirmed live at 0.0px gap before this fix. 24px matches the established button- adjacent spacing already used in this same file for Checkout's own payment section (#payment #place_order's margin-top). Adjacent- sibling selector, not a class -- this note has none, and adding one would mean overriding a WooCommerce gateway's own render method instead of a template file. */ .silure-thankyou-actions + p { margin-top: 24px; } /* ── Native WooCommerce order-details/customer blocks (full-page audit, checkout redesign follow-up) ────────────────────────────────────── do_action('woocommerce_thankyou', ...) at the end of thankyou.php pulls in WooCommerce own unmodified templates (order/order-details.php, order/order-details-customer.php) for the "Order details" table and the Billing/Shipping address blocks -- none of it carries any .silure-* class, so none of it had ever received ANY theme styling at all, not even the general h1/h2 letter-spacing sweep done earlier today (which only ever touched .silure-* selectors). Confirmed live: both headings rendered as Elementor own generated default -- Mulish with a generic serif fallback, letter-spacing exactly -0.03em, a 500 font-weight that is not even part of this site own type scale (300/400/700 only) -- and the Invoice action link and the customer address/phone/email text were fully unstyled native defaults (16px, inheriting whatever the page base font happens to be) rather than the page own 13px DM Mono body-text convention. All fixed here, !important throughout since a plain rule was already proven (on the very same page, same collision) not to be enough on its own. These are WooCommerce own generic classes, not Checkout/Order-Received- specific ones, so this also brings My Account's View Order page (same underlying templates) into line as a natural side effect -- not independently re-verified this round, only Order Received was. */ .woocommerce-order-details__title, .woocommerce-column__title { font-family: 'Mulish', sans-serif !important; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.1 !important; text-transform: uppercase !important; color: var(--silure-primary, #050505) !important; margin: 0 0 20px !important; } /* Selector updated (2x2 grid round) -- .woocommerce-customer-details no longer wraps this markup; order/order-details.php now renders the billing/shipping address blocks directly inside the grid cells below, without that wrapper section (never called, deliberately -- see that file's own header comment). Same address/phone/email markup, same styling, new parent selector. */ .silure-thankyou-details-cell--billing address, .silure-thankyou-details-cell--billing p, .silure-thankyou-details-cell--shipping address, .silure-thankyou-details-cell--shipping p { font-family: 'DM Mono', monospace !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.3px !important; font-style: normal !important; color: var(--silure-text, #444444) !important; line-height: 1.6 !important; } /* Invoice link -- rebuilt as a proper button (button standard fix round). This is a native WooCommerce order-action link and already carries class="button" in its markup, so it was always matched by the sitewide button hover standard (.woocommerce a.button in silure_kill_pink_late(), wp_head priority 999, printed after this stylesheet -- wins any specificity tie) for its solid black fill / white text / hover-invert, same as Continue Shopping and every other real button on the site. The only actual bug was THIS rule fighting that: text-decoration:underline layered a link underline on top of a solid black button fill, and display/padding/letter-spacing were never set to match, leaving what the user saw live -- a black-filled but plain inline anchor with an underline through it. Decision: make it a real button, not a text link -- it sits directly among the Total cell's other content and right above Continue Shopping. display/font/padding/letter-spacing below are Continue Shopping's own values, reused exactly as instructed rather than re-derived; color/ background deliberately NOT duplicated here -- already correct via the shared standard above, and re-declaring at the same specificity would only be redundant, not more correct. Selector carries the redundant .button class too (2-class -> 3-class chain) -- live-verified this was actually necessary, not defensive: silure-woocommerce.css's own pre-existing sitewide ".woocommerce a.button" rule (14px/28px padding, its own !important) ties this rule's specificity at 2 classes + 1 type exactly, and loads later in the enqueue order, so it was winning the padding property specifically even with !important on both sides -- font/ letter-spacing/uppercase happened to already match so that part of the collision was invisible. Adding .button breaks the tie outright rather than depending on file order. */ .silure-thankyou-wrap a.invoice.button { display: inline-block !important; font-family: 'DM Mono', monospace !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; text-decoration: none !important; padding: 15px 40px !important; border-radius: 0 !important; transition: background 0.2s; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .woocommerce-checkout.checkout .silure-checkout-grid { grid-template-columns: 1fr; } .silure-checkout-col { padding: 40px 28px; } .silure-checkout-col--form { border-right: none; border-bottom: 1px solid var(--silure-border, #E8E4DF); order: 2; } /* Summary first on mobile */ .silure-checkout-col--summary { order: 1; position: static; } #silure-cart-drawer { width: 100vw; } } @media (max-width: 560px) { .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100%; display: block; margin-right: 0; } .silure-thankyou-wrap { margin: 40px auto 60px; padding: 0 20px; } .silure-bag-item { padding: 16px; } } /* ── Pay for Order — /checkout/order-pay/{id}/ (Session 30 close-out, 2026-08-10) ───────────────────────────────────────────────────────── Overrides checkout/order-receipt.php (the guest / order-key branch of WC_Shortcode_Checkout::order_pay() — confirmed live via a real test checkout to be the branch that actually renders in practice, since it covers any visitor not already logged in as the order's own account). Reuses the same overline/heading/card-summary design language already established on Order Received (thankyou.php) so the two pages a customer sees around payment read as one consistent flow, not two different products. Deliberately narrower (560px vs 880px) — this page has one short summary and two buttons, not a 2x2 detail grid. */ .silure-payorder-wrap { max-width: 560px; margin: 72px auto 100px; padding: 0 32px; text-align: center; } .silure-payorder-overline { font-family: 'Mulish', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--silure-muted, #7A7672); margin: 0 0 16px; } /* !important throughout, same reason as .silure-thankyou-heading right above in this file: Elementor's own generated post-5.css forces letter-spacing:-0.03em (and a serif font-family fallback) on every h1/h2 sitewide -- confirmed by the definitive sitewide fix elsewhere in silure_kill_pink_late() (section 12), but that fix ties at equal specificity, later source position wins, so any *new* heading still needs its own !important to guarantee it, not rely on load order. */ .silure-payorder-heading { font-family: 'Mulish', sans-serif !important; font-size: clamp(40px, 6vw, 64px) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 0.98 !important; text-transform: uppercase !important; color: var(--silure-primary, #050505) !important; margin: 0 0 40px; } /* --silure-surface card tint -- same token/reasoning as .silure-thankyou-details-cell--order above: this site's existing "cards, admin panels" colour (CLAUDE.md design system), reused rather than a new one-off. */ .silure-payorder-summary { background: var(--silure-surface, #F3F0EB); padding: 28px; text-align: left; margin: 0 0 32px; } /* No border-bottom (Session 30 close-out, 2026-08-10) -- confirmed live all 6 rows were carrying a hairline divider each, inconsistent with the clean/minimal-lines standard already established on Order Received's own summary grid (whitespace/padding does the row separation there, not per-row borders). Padding alone (12px top/ bottom = 24px between rows) now does the same job. */ .silure-payorder-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; letter-spacing: 0.3px; } .silure-payorder-label { color: var(--silure-muted, #7A7672); } .silure-payorder-value { color: var(--silure-text, #444444); text-align: right; } .silure-payorder-row--total .silure-payorder-value { color: var(--silure-primary, #050505); font-weight: 700; font-size: 15px; } .silure-payorder-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } /* The woo-razorpay plugin wraps its own Pay Now/Cancel buttons in a plain

(generate_razorpay_form(), hardcoded HTML -- not a WooCommerce template, so it can't be overridden the way order-receipt.php itself was). display:contents un-wraps it so the two buttons become direct flex children of .silure-payorder-actions instead of being trapped in a row together via the

's own default block-level width. The plugin also prints its own plain instructional sentence ("Thank you for your order, please click the button below to pay with Razorpay.") as a sibling

with no button inside -- :has() distinguishes the two so that one gets real typography instead of being unwrapped into raw inline text. */ .silure-payorder-actions p { display: contents; } .silure-payorder-actions p:not(:has(button)) { display: block; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; letter-spacing: 0.3px; color: var(--silure-muted, #7A7672); margin: 0 0 8px; } /* #btn-razorpay / #btn-razorpay-cancel are the plugin's own real, stable element IDs (confirmed live, unstyled: bare inline text buttons, no classes at all). !important throughout -- these are bare

was tried first and genuinely broke the table -- confirmed live via a full authenticated page load, not just reading the rule: it strips the cell's own table-cell box, and since the sibling .product-total in the same row keeps its default table-cell display, the row stops behaving like a row at all (price rendered above the name instead of beside it). vertical-align + inline-block on the image/ meta keeps the itself untouched -- a real table cell, correctly paired with its sibling. Superseded this round (qty/price format round) -- re-verified live, side by side with Checkout's real rendered page, that Checkout's own .silure-order-items-table .product-name uses plain display:flex on its too and renders correctly there. Rebuilding Order Received's product-name cell with Checkout's identical flex rule (below) instead of the inline-block workaround, per this round's explicit "reuse the same class/markup" instruction -- confirmed working via a fresh authenticated live render before treating this as final, not assumed safe from the earlier reasoning alone. */ .silure-thankyou-items-table .product-name { display: flex; align-items: center; gap: 14px; padding-right: 16px; } /* Real root cause (qty/price format round): with zero border-spacing and no padding facing the name column, this grid cell (~380px total, under half Checkout's ~700px summary column, confirmed live via getBoundingClientRect on both) leaves the price and name columns pixel-adjacent -- price text starts flush at the exact x-coordinate the name column ends, regardless of alignment direction. text-align/padding-left/min-width plain declarations were tried first and, uniquely on this one rule, would not win even with !important added and a from-scratch browser tab (ruling out any caching explanation) -- min-width alone applied fine from the exact same rule block, so this was a real, narrow specificity loss on just these two properties against a rule never located despite an extensive search across every enqueued stylesheet. Selector below stacks every real class already present on the table and cell (nothing invented) for maximum specificity, plus !important as a backstop -- bulletproof regardless of whatever the competing rule turns out to be. */ .woocommerce-table--order-details.shop_table.order_details.silure-thankyou-items-table td.woocommerce-table__product-total.product-total { text-align: right !important; white-space: nowrap !important; min-width: 100px !important; padding-left: 16px !important; } .silure-thankyou-items-table .product-quantity { color: var(--silure-muted, #7A7672); font-weight: 300; } .silure-thankyou-totals-row th, .silure-thankyou-totals-row td { padding: 9px 0; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 300; text-align: left; background: transparent !important; border: none !important; } .silure-thankyou-totals-row th { color: var(--silure-muted, #7A7672); font-weight: 300; } .silure-thankyou-totals-row td { text-align: right; color: var(--silure-text, #444444); } /* The one deliberately-kept rule on this page -- directly above the Total figure, per the approved mockup. !important added (button-fix follow-up round) -- the general row rule just above now sets border: none !important to strip hello-elementor's reset.css default; without !important here too, that general !important rule would win on specificity/order ties regardless of this being the more specific selector, silently deleting the one line the mockup asked to keep. */ .silure-thankyou-totals-row--total th, .silure-thankyou-totals-row--total td { border: none !important; border-top: 1px solid var(--silure-border-mid, #C8C4BF) !important; padding-top: 16px; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--silure-primary, #050505); } /* .silure-thankyou-totals-row--total td .includes_tax rule removed (GST display round) -- that parenthetical is now stripped at the PHP level (silure_strip_order_includes_tax_note(), silure-core.php) in favour of a genuine GST