/* ============================================================================= miniBUD — WooCommerce styling ----------------------------------------------------------------------------- Overrides WooCommerce's default look to match the miniBUD design. We mostly restyle WooCommerce's own class names (.products, .woocommerce-...) so we keep compatibility with future Woo updates and only override a few templates. Loaded after theme.css, so all --tokens defined there are available here. ========================================================================== */ /* Hide WooCommerce's default demo-store banner & breadcrumb on mobile chrome. */ .woocommerce-store-notice { font-family: var(--font-sans); } .woocommerce-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: var(--space-4); } /* WooCommerce notices (cart updated, coupon applied, errors) restyled to brand */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; padding: 12px 14px; font-size: 13px; list-style: none; margin: 0 0 var(--space-4); border-left-width: 4px; } .woocommerce-message { border-left-color: var(--green); background: var(--green-bg); color: #1f6d3e; } .woocommerce-info { border-left-color: var(--navy); } .woocommerce-error { border-left-color: var(--red); color: #8a0a26; } .woocommerce-message .button, .woocommerce-error .button { float: right; } /* WooCommerce prints a font-icon (the green tick / info / error mark) via ::before and reserves a wide left padding gutter for it. Our compact padding above drops that gutter, so the icon overlaps the text. We use the colored left border as the status cue instead, so remove the icon. The `.woocommerce` ancestor raises specificity above WooCommerce's own `.woocommerce-message::before` so this wins no matter which stylesheet loads last. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before { content: none; } /* ─────────────────────────────────────────────────── SHOP ARCHIVE (grid) */ /* The chip filter + search live in our archive template; spacing only here. */ .shop-toolbar { margin-bottom: var(--space-3); } /* The shop/category archives get a wider container than the default 760px so the cards have room to breathe on tablet & desktop. The single product page keeps the narrow, readable column. WooCommerce adds these body classes. */ .post-type-archive-product .wc-main > .container, .tax-product_cat .wc-main > .container, .tax-product_tag .wc-main > .container { max-width: 1120px; } /*----------------------ALL PRODUCST -------------------*/ /* WooCommerce outputs the list as ul.products with li.product. */ ul.products, .wc-block-grid__products { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Phone: two cards per row. calc() accounts for the single gap between them. */ ul.products li.product { width: calc(50% - (var(--space-3) / 2)); } @media (min-width: 560px) { /* Center the row so a partial last row sits centered instead of leaving a ragged gap on the right. Cards keep their fixed width — never resized. */ ul.products { gap: var(--space-4); justify-content: center; } /* Larger screens: fixed-width cards that wrap — never resized by the layout. */ ul.products li.product { width: 300px; } } /* WooCommerce's bundled CSS adds a float clearfix (::before/::after with display:table) to ul.products. In our CSS grid those pseudo-elements become phantom grid items that take up cells and break the layout, so we drop them. The selector matches WooCommerce's own `.woocommerce ul.products::before` specificity so our reset actually wins. */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { content: none; display: none; } /*----------------------PRODUCT CARD -------------------*/ ul.products li.product { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); position: relative; display: flex; flex-direction: column; } /* Product card image — slightly tall (4:3.2) so it reads as a real photo card */ ul.products li.product .mb-card__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; } /* The extra .woocommerce prefix out-specifies WooCommerce's own `... li.product img { height: auto }`. object-fit:cover makes the image fully cover the box edge-to-edge (cropping any overflow), so there is never empty space around it. */ .woocommerce ul.products li.product .mb-card__media img, ul.products li.product .mb-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* The sale badge sits top-left over the image, on the SAME line as the in-cart tick (top-right). Matching top + height (20px) aligns their vertical centers so the two read as a single row across the top of the card. */ ul.products li.product .mb-badge { position: absolute; top: 8px; left: 8px; height: 20px; z-index: 2; } /* "In cart" tick top-right when the product is already in the cart */ ul.products li.product .in-cart-tick { position: absolute; top: 8px; right: 8px; z-index: 2; width: 20px; height: 20px; background: var(--green); color: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(31,138,91,0.4); display: flex; align-items: center; justify-content: center; } ul.products li.product .in-cart-tick .mb-icon { width: 12px; height: 12px; } ul.products li.product.mb-in-cart { box-shadow: 0 0 0 2px var(--green), var(--shadow-card); } ul.products li.product .mb-card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } ul.products li.product .woocommerce-loop-product__title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; margin: 0; overflow: hidden; /*max-height: 2.6em;*/ /* Reserve the 2 lines so every card aligns and the price sits at a fixed spot */ /*min-height: 2.6em;*/ } ul.products li.product .price { display: block; /* own line — never sits beside the title */ color: var(--ink); font-size: 16px; font-weight: 800; margin-top: auto; /* push price + button to the bottom of the card */ line-height: 1.3; } ul.products li.product .price del { color: var(--muted); font-weight: 500; font-size: 12px; margin-right: 4px; } ul.products li.product .price ins { text-decoration: none; } ul.products li.product .price .mb-from { color: var(--muted); font-weight: 500; font-size: 11px; } /* Card add-to-cart: a compact red pill button under the price */ ul.products li.product .button, ul.products li.product .added_to_cart { margin-top: var(--space-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 12px; border-radius: var(--radius-sm); border: none; } ul.products li.product .button:hover { background: var(--red-soft); color: #fff; } ul.products li.product .added_to_cart { background: var(--navy); } ul.products li.product .button.loading { opacity: 0.7; } /* Once the product is in the cart (.mb-in-cart is set server-side on load and by theme.js right after an AJAX add), hide BOTH the add-to-cart button and the "View cart" link WooCommerce injects next to it — the green tick already marks the card as added. Extra class out-specifies the base .button styles above. */ ul.products li.product.mb-in-cart .button, ul.products li.product.mb-in-cart .added_to_cart { display: none; } /* The whole card is clickable via an overlay link injected in the template */ .mb-card__link { position: absolute; inset: 0; z-index: 1; /* leave the add-to-cart button (z-index:2 via positioning) clickable */ } ul.products li.product .button, ul.products li.product .added_to_cart, ul.products li.product .price { position: relative; z-index: 2; } /* NOTE: .in-cart-tick and .mb-badge are intentionally NOT in the group above. Both are already position:absolute (pinned to the media box corners) with z-index:2 in their own rules; re-declaring position:relative here would pull them out of the overlay and drop them inline into the card flow. */ /* ───────────────────────────────────────────────── SINGLE PRODUCT PAGE */ .single-product div.product { display: grid; gap: var(--space-4); } /* Gallery (image) */ .single-product div.product .woocommerce-product-gallery { margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; } .single-product div.product .woocommerce-product-gallery img { border-radius: var(--radius-lg); } .single-product .woocommerce-product-gallery__trigger { /* zoom button */ top: 10px; right: 10px; } /* Summary column */ .single-product div.product .summary { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .single-product .product-cat-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .single-product .product_title { font-size: clamp(22px, 6vw, 28px); font-weight: 700; margin: 0; } /* Star rating row */ .single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); } .single-product .star-rating { color: #f0b400; font-size: 14px; } /* Price (with strike-through compare price) */ .single-product div.product p.price, .single-product div.product span.price { color: var(--ink); font-size: 24px; font-weight: 800; margin: var(--space-1) 0; } .single-product div.product p.price del { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 8px; } .single-product div.product p.price ins { text-decoration: none; } /* ACF meta block (Where / Includes / Duration) */ .product-meta-block { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin: var(--space-2) 0; } .product-meta-block .pm-row { display: flex; gap: var(--space-2); } .product-meta-block .pm-row strong { color: var(--ink); font-weight: 600; min-width: 84px; } /* Add-to-cart form on the single page (qty + button) */ .single-product form.cart { display: flex; align-items: stretch; gap: var(--space-2); margin: var(--space-3) 0 0; } .single-product form.cart .quantity { flex-shrink: 0; } .single-product form.cart .single_add_to_cart_button { flex: 1; background: var(--red); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 20px; cursor: pointer; box-shadow: 0 6px 14px rgba(217,1,52,0.25); } .single-product form.cart .single_add_to_cart_button:hover { background: var(--red-soft); } /* Product tabs / description — kept subtle below the fold */ .woocommerce-tabs { margin-top: var(--space-6); } .woocommerce-tabs ul.tabs { display: flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; border-bottom: 1px solid var(--line); } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 10px 6px; font-weight: 700; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; } .woocommerce-tabs ul.tabs li.active a { color: var(--navy); border-bottom-color: var(--red); } /* Quantity stepper (shared by single product & cart) */ .quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fafafa; } .quantity .mb-qty-btn { width: 38px; height: 100%; min-height: 44px; display: grid; place-items: center; background: transparent; border: none; color: var(--navy); font-size: 18px; cursor: pointer; } .quantity .mb-qty-btn:hover { background: #f0eee9; } .quantity input.qty { width: 42px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--navy); border-radius: 0; padding: 10px 0; -moz-appearance: textfield; } .quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ───────────────────────────────────────────────────────── CART PAGE */ .woocommerce-cart .cart-topbar, .woocommerce-checkout .cart-topbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } /* App-style checkout top bar: ‹ back · title · logo */ .checkout-topbar .cart-topbar__title { flex: 1; font-size: 15px; font-weight: 700; color: var(--navy); } .checkout-topbar .brand-logo img { height: 18px; } /* Sticky "Pay securely" label gets a small inline lock/check glyph */ .sticky-bar--checkout .sticky-bar__label { display: inline-flex; align-items: center; gap: 5px; } .sticky-bar--checkout .sticky-bar__label .mb-icon { width: 12px; height: 12px; opacity: 0.8; } /* Replace WooCommerce's table layout with stacked cards on mobile. We keep the in the DOM (Woo needs its form fields) but display the rows as flex cards. */ .woocommerce-cart table.cart { border: none; width: 100%; display: block; } .woocommerce-cart table.cart thead { display: none; } /* hide column headers */ .woocommerce-cart table.cart tbody { display: flex; flex-direction: column; gap: var(--space-2); } .woocommerce-cart table.cart tr.cart_item { display: grid; /* thumb | flexible middle column | right-aligned column. Each cell gets its OWN area so nothing overlaps: row 1: name ........ remove (X) row 2: quantity ..... line subtotal The thumbnail spans both rows. */ grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb name remove" "thumb qty subtotal"; gap: 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; } .woocommerce-cart table.cart td { border: none; padding: 0; } /* WooCommerce's per-unit price cell is redundant with the line subtotal we show bottom-right, and it has no slot in the 2-row layout — hide it. */ .woocommerce-cart table.cart td.product-price { display: none; } .woocommerce-cart table.cart td.product-remove { grid-area: remove; justify-self: end; align-self: start; } .woocommerce-cart table.cart td.product-remove a { width: 22px; height: 22px; border-radius: var(--radius-sm); background: #f6f7fa; color: var(--muted); display: grid; place-items: center; font-size: 14px; text-decoration: none; } .woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; width: 64px; height: 64px; } .woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; } .woocommerce-cart table.cart td.product-name { grid-area: name; font-size: 13px; font-weight: 700; color: var(--navy); align-self: start; min-width: 0; /* let long names wrap/ellipsize instead of overflowing */ } .woocommerce-cart table.cart td.product-name::before { content: none; /*"Termék" string was rendered */ } .woocommerce-cart table.cart td.product-name a { color: var(--navy); } .woocommerce-cart table.cart td.product-name .variation { font-size: 11px; color: var(--muted); font-weight: 500; } .woocommerce-cart table.cart td.product-quantity { grid-area: qty; align-self: end; } .woocommerce-cart table.cart td.product-subtotal { grid-area: subtotal; justify-self: end; align-self: end; font-size: 14px; font-weight: 800; color: var(--ink); } /* Coupon + update row */ .woocommerce-cart .cart .actions { margin-top: var(--space-3); } .woocommerce-cart .cart .actions .coupon { display: flex; gap: var(--space-2); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; } .woocommerce-cart .cart .actions .coupon input { border: none; background: transparent; font-family: var(--font-mono); font-size: 12px; } .woocommerce-cart .cart .actions .coupon .button { background: var(--navy); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; flex-shrink: 0; } /* The cart updates automatically on quantity change (theme.js posts the form via AJAX), so the manual "Update cart" button is hidden. It stays in the DOM as a no-JS fallback (and theme.js appends its name to the request). Matched element-agnostically (button OR input[type=submit], both used across WooCommerce versions) and forced so WC's own button styles can't reveal it. */ .woocommerce-cart .cart .actions [name="update_cart"] { display: none !important; } /* Busy state during an AJAX cart update — only used when WooCommerce's jQuery BlockUI overlay isn't available (theme.js prefers BlockUI for the native look). */ .woocommerce-cart-form.is-updating { opacity: 0.6; pointer-events: none; } /*----------------------ITEM IN CART-------------------*/ /* Mobile: WooCommerce's responsive stylesheet (woocommerce-smallscreen.css) restyles table.shop_table_responsive at <=768px and collapses/hides the cart thumbnail, so the product images vanish. Re-assert the thumbnail (forced, to beat WooCommerce's higher-specificity small-screen rules) and shrink the row text so each card stays compact. The thumb column is narrowed to match. */ @media (max-width: 768px) { .woocommerce-cart table.cart tr.cart_item { grid-template-columns: 52px 1fr auto; } .woocommerce-cart table.cart td.product-thumbnail { width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .woocommerce-cart table.cart td.product-thumbnail img { width: 52px; height: 52px; } /* WooCommerce's responsive table prints a `td::before` column label (via content: attr(data-title)) on small screens. The thumbnail cell needs no label, so drop it. */ .woocommerce-cart table.cart.shop_table_responsive td.product-thumbnail::before, .woocommerce-page table.cart.shop_table_responsive td.product-thumbnail::before { content: none !important; } .woocommerce-cart table.cart td.product-name { font-size: 12px; } .woocommerce-cart table.cart td.product-name .variation { font-size: 10px; } .woocommerce-cart table.cart td.product-subtotal { font-size: 13px; } .woocommerce-cart table.cart td.product-subtotal::before { content: none; } /* WooCommerce's small-screen stylesheet forces `text-align: right !important` on every responsive-table cell, which fights our grid card layout. Undo it (positioning is handled by grid-area / justify-self, not text-align). */ .woocommerce-cart table.cart.shop_table_responsive tr td, .woocommerce-page table.cart.shop_table_responsive tr td { text-align: left !important; } /* WooCommerce's small-screen stylesheet zebra-stripes even rows with a grey background, which shows through our white cards. Remove it. */ .woocommerce-cart table.cart.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.cart.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; } /* Hide WooCommerce's "Quantity" data-title label injected by the small-screen stylesheet (td::before { content: attr(data-title) }). */ .woocommerce-cart table.cart td.product-quantity::before { display: none !important; } /* Shrink the quantity stepper so it stays compact in the card layout. */ .woocommerce-cart table.cart td.product-quantity .quantity .mb-qty-btn { width: 28px; min-height: 32px; font-size: 14px; } .woocommerce-cart table.cart td.product-quantity .quantity input.qty { width: 32px; padding: 6px 0; font-size: 13px; } } /* Cart totals card */ .cart_totals { margin-top: var(--space-4); } .cart_totals h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); } .cart_totals table { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; overflow: hidden; } .cart_totals th, .cart_totals td { padding: 10px 12px; font-size: 13px; text-align: left; border: none; } .cart_totals th { color: var(--muted); font-weight: 500; } .cart_totals td { text-align: right; color: var(--ink); font-weight: 600; } .cart_totals tr.order-total th { color: var(--ink); font-weight: 700; } .cart_totals tr.order-total td { font-size: 16px; font-weight: 800; color: var(--navy); } .cart_totals tr:not(:last-child) th, .cart_totals tr:not(:last-child) td { border-bottom: 1px solid var(--line); } /* The default proceed-to-checkout button is replaced by the sticky bar, so hide it */ .cart_totals .wc-proceed-to-checkout { display: none; } /* ─────────────────────────────────────────────────────── CHECKOUT PAGE */ /* Step indicator (rendered by inc/woocommerce.php) */ .checkout-steps { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .checkout-steps__step { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .checkout-steps__step .num { width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .checkout-steps__step.active { color: var(--navy); } .checkout-steps__step.active .num { background: var(--navy); color: #fff; } /* Completed steps go navy and swap their number for a ✓ */ .checkout-steps__step.done { color: var(--navy); } .checkout-steps__step.done .num { background: var(--navy); color: #fff; font-size: 0; } .checkout-steps__step.done .num::after { content: "✓"; font-size: 10px; line-height: 1; } .checkout-steps__sep { flex: 1; height: 1px; background: var(--line); } .checkout-steps__sep.done { background: var(--navy); } /* Form fields */ .woocommerce-checkout .col2-set, .woocommerce-checkout .col-1, /* COL2 not needed .woocommerce-checkout .col-2 { width: 100%; float: none; }*/ .woocommerce-checkout h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-5) 0 var(--space-3); } .woocommerce-checkout .form-row { margin-bottom: var(--space-3); } .woocommerce-checkout .form-row label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: block; margin-bottom: 4px; } .woocommerce-checkout .form-row .required { color: var(--red); border: none; text-decoration: none; } .woocommerce-checkout .form-row .optional { color: var(--muted); } /* * Group the billing section into a white card, matching the design's * "form-card". The shipping (.woocommerce-shipping-fields) and additional * (.woocommerce-additional-fields) sections are removed in our * checkout/form-shipping.php override, so only billing needs styling here. */ .woocommerce-checkout .woocommerce-billing-fields { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); } .woocommerce-checkout .woocommerce-billing-fields h3 { margin-top: 0; } /* * Themed form fields. WooCommerce's bundled stylesheet styles `.input-text` with * higher specificity than a bare `input[type=...]`, so we match its selectors * (`.form-row input.input-text`, the select2 dropdown, etc.) to reassert the * miniBUD look — otherwise the billing inputs fall back to WooCommerce defaults. */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container--default .select2-selection--single { font: inherit; width: 100%; background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; color: var(--ink); min-height: 44px; /* comfortable mobile tap target */ box-shadow: none; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 2px rgba(39, 56, 102, 0.12); outline: none; } /* WooCommerce renders the country/state pickers with select2 — align it too. */ .woocommerce-checkout .select2-container--default .select2-selection--single { display: flex; align-items: center; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--ink); } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); } /* Inline validation states from WooCommerce's JS */ .woocommerce-checkout .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--red); } .woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--green); } /* Order review / payment box */ .woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4); } .woocommerce-checkout #order_review table.shop_table { width: 100%; border: none; } .woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td { padding: 8px 0; font-size: 13px; border: none; } .woocommerce-checkout #order_review tr.order-total td { font-size: 18px; font-weight: 800; color: var(--navy); } .woocommerce-checkout .wc_payment_methods { list-style: none; margin: 0 0 var(--space-4); padding: 0; } .woocommerce-checkout .wc_payment_method { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: var(--space-2); background: #fafafa; } .woocommerce-checkout .wc_payment_method label { font-weight: 700; color: var(--navy); } /* The place-order button is in the sticky bar visually; keep the real one but style it as the fallback for no-JS / desktop. */ .woocommerce-checkout #place_order { width: 60%; display: block; margin-inline: auto; /* keep it centered now that it's narrower */ background: var(--red); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 15px; cursor: pointer; box-shadow: 0 6px 14px rgba(217,1,52,0.25); } .woocommerce-checkout #place_order:hover { background: var(--red-soft); } /**/ .woocommerce-checkout #payment ul.payment_methods li img { margin: -2px 0 0; width: 70%; } /* ─────────────────────────────────────────── ORDER CONFIRMATION (thank you) */ .woocommerce-order { text-align: center; padding-block: var(--space-6); } .woocommerce-order .mb-success-tick { width: 76px; height: 76px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(31,138,91,0.12), 0 0 0 16px rgba(31,138,91,0.06); } .woocommerce-order .mb-success-tick .mb-icon { width: 38px; height: 38px; stroke-width: 2; } /* Pay-by-Link "awaiting payment" variant — neutral navy instead of success green, so the screen reads as in-progress (use the email link to pay), not complete. */ .woocommerce-order .mb-success-tick--pending { background: var(--navy); box-shadow: 0 0 0 8px rgba(39,56,102,0.12), 0 0 0 16px rgba(39,56,102,0.06); } .woocommerce-order .woocommerce-thankyou-order-received { font-size: 22px; font-weight: 700; color: var(--navy); } /* The order-received overview. The