/* * Fivany cart / checkout / order confirmation. * * WooCommerce 11 renders all three as blocks, hydrated client-side. * Opnar's cart is a two-column layout: cream item cards holding white * image slots on the left, a sticky white summary card on the right. */ /* ── Shared page frame ─────────────────────────────────────────── */ .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-order-received .site-main { font-family: var(--fv-font); font-size: 13px; } .woocommerce-cart .entry-header, .woocommerce-checkout .entry-header { padding: 4px 0 0; margin-bottom: 12px; text-align: left; } .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-order-received .entry-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; text-align: left; margin: 0; } /* ── Two-column layout ─────────────────────────────────────────── */ .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: flex-start; } @media (max-width: 1023px) { .wc-block-components-sidebar-layout { grid-template-columns: 1fr; } } .wc-block-components-main, .wc-block-cart__main, .wc-block-checkout__main { padding: 0; width: auto; float: none; } .wc-block-components-sidebar, .wc-block-cart__sidebar, .wc-block-checkout__sidebar { padding: 0; width: auto; float: none; position: sticky; top: 92px; } /* ── Cart item cards ───────────────────────────────────────────── */ .wc-block-cart-items, table.wc-block-cart-items { border: 0; border-collapse: separate; border-spacing: 0 10px; width: 100%; margin: 0; } .wc-block-cart-items thead { display: none; } .wc-block-cart-items__row, tr.wc-block-cart-items__row { background: var(--fv-cream); border-radius: var(--fv-radius-lg); box-shadow: var(--fv-shadow-sm); } .wc-block-cart-items__row td { border: 0; padding: 14px 12px; background: transparent; vertical-align: top; } .wc-block-cart-items__row td:first-child { border-radius: var(--fv-radius-lg) 0 0 var(--fv-radius-lg); padding-left: 14px; } .wc-block-cart-items__row td:last-child { border-radius: 0 var(--fv-radius-lg) var(--fv-radius-lg) 0; padding-right: 14px; } .wc-block-cart-item__image img { background: var(--fv-surface); border-radius: var(--fv-radius-md); width: 88px; height: 88px; object-fit: cover; } .wc-block-components-product-name { font-size: 13px; font-weight: 600; color: var(--fv-ink); line-height: 1.35; text-decoration: none; } .wc-block-components-product-name:hover { color: var(--fv-accent); } .wc-block-components-product-metadata { font-size: 11px; color: var(--fv-ink-3); font-family: var(--fv-mono); letter-spacing: 0.02em; margin-top: 3px; } .wc-block-cart-item__remove-link { font-size: 11px; color: var(--fv-ink-3); text-decoration: underline; font-family: var(--fv-mono); text-transform: uppercase; letter-spacing: 0.04em; } .wc-block-cart-item__remove-link:hover { color: var(--fv-hot); } /* ── Quantity stepper ──────────────────────────────────────────── */ .wc-block-components-quantity-selector { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-md); max-width: 106px; overflow: hidden; } .wc-block-components-quantity-selector::after { border: 0; } .wc-block-components-quantity-selector__input { font-family: var(--fv-mono); font-size: 13px; font-weight: 600; color: var(--fv-ink); background: transparent; border: 0; box-shadow: none; padding: 6px 0; } .wc-block-components-quantity-selector__button { color: var(--fv-ink-2); font-weight: 700; background: transparent; border: 0; transition: background 0.15s ease, color 0.15s ease; } .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--fv-accent-soft); color: var(--fv-accent); } /* ── Prices ────────────────────────────────────────────────────── */ .wc-block-components-product-price, .wc-block-components-formatted-money-amount, .wc-block-formatted-money-amount, .wc-block-components-totals-item__value { font-family: var(--fv-mono); font-variant-numeric: tabular-nums; color: var(--fv-ink); } .wc-block-components-product-price__value.is-discounted, .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--fv-hot); font-weight: 800; } .wc-block-components-product-price__regular { color: var(--fv-ink-3); text-decoration: line-through; font-size: 11px; } /* ── Sidebar summary card ──────────────────────────────────────── */ .wc-block-components-sidebar .wc-block-components-totals-wrapper, .wc-block-cart__sidebar > *, .wc-block-checkout__sidebar > * { background: var(--fv-surface); } .wc-block-components-sidebar .wc-block-components-panel, .wc-block-cart__totals-title { font-family: var(--fv-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fv-ink-2); } .wc-block-components-totals-item { font-size: 12.5px; padding: 7px 0; } .wc-block-components-totals-item__label { color: var(--fv-ink-2); } .wc-block-components-totals-wrapper { border-top: 1px solid var(--fv-line); padding: 10px 14px; } .wc-block-components-totals-footer-item { border-top: 1px solid var(--fv-line-2); padding-top: 12px; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700; color: var(--fv-ink); font-size: 13px; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--fv-hot); font-weight: 800; font-size: 18px; } /* ── Buttons ───────────────────────────────────────────────────── */ .wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--fv-accent); color: #fff; border: 0; border-radius: var(--fv-radius-md); font-family: var(--fv-font); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 12.5px; min-height: 44px; transition: background 0.15s ease; } .wc-block-components-button:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: var(--fv-accent-hover); color: #fff; } .wc-block-components-button:not(.is-link):disabled { background: var(--fv-ink-soft); color: #fff; } /* Text-style buttons (e.g. "Apply coupon") shouldn't become orange slabs. */ .wc-block-components-button.is-link, .wc-block-components-totals-coupon .wc-block-components-button.is-link { background: transparent; color: var(--fv-accent); min-height: 0; text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: underline; } /* ── Form fields ───────────────────────────────────────────────── */ .wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-select__container, .wc-block-components-combobox-control input { border-radius: var(--fv-radius-md); border-color: var(--fv-line); font-family: var(--fv-font); font-size: 13px; background: var(--fv-surface); } .wc-block-components-text-input.is-active label, .wc-block-components-text-input label { font-size: 12.5px; color: var(--fv-ink-3); } /* ── Payment method / shipping option rows ─────────────────────── */ .wc-block-components-radio-control__option { border-radius: var(--fv-radius-md); font-size: 12.5px; } .wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--fv-accent); box-shadow: 0 0 0 1px var(--fv-accent); background: var(--fv-accent-soft); } .wc-block-components-radio-control__label { font-weight: 600; color: var(--fv-ink); } .wc-block-components-radio-control__secondary-label, .wc-block-components-radio-control__description { font-family: var(--fv-mono); font-size: 11px; color: var(--fv-ink-3); } /* ── Checkout step headings ────────────────────────────────────── */ .wc-block-components-checkout-step__title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--fv-ink); } .wc-block-components-checkout-step__heading-content, .wc-block-components-checkout-step__description { font-size: 12px; color: var(--fv-ink-3); } .wc-block-components-checkout-step__container::after { border-color: var(--fv-line); } /* ── Notices ───────────────────────────────────────────────────── */ .wc-block-components-notice-banner { border-radius: var(--fv-radius-lg); font-size: 12.5px; font-family: var(--fv-font); } .wc-block-components-notice-banner.is-success { border-color: var(--fv-good); background: #f2fbf6; } .wc-block-components-notice-banner.is-error { border-color: var(--fv-hot); background: #fff5f5; } /* ══════════════════════════════════════════════════════════════ ORDER CONFIRMATION / THANK YOU ══════════════════════════════════════════════════════════════ */ .woocommerce-order-received .woocommerce-thankyou-order-received, .wc-block-order-confirmation-status { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; color: var(--fv-ink); background: var(--fv-cream); border-left: 3px solid var(--fv-good); border-radius: var(--fv-radius-lg); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--fv-shadow-sm); } .woocommerce-order-overview, ul.woocommerce-order-overview.woocommerce-thankyou-order-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; border: 0; } .woocommerce-order-overview li { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-lg); padding: 12px 14px; float: none; margin: 0; border-right: 1px solid var(--fv-line); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--fv-mono); color: var(--fv-ink-3); box-shadow: var(--fv-shadow-sm); } .woocommerce-order-overview li strong { display: block; margin-top: 5px; font-family: var(--fv-mono); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--fv-ink); } .woocommerce-order-overview li.woocommerce-order-overview__total strong { color: var(--fv-hot); } .woocommerce-order-details__title, .woocommerce-column__title, .wc-block-order-confirmation-summary + h2, .woocommerce-order-received h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--fv-mono); color: var(--fv-ink); padding-bottom: 9px; border-bottom: 1px solid var(--fv-line); margin: 22px 0 14px; } /* ── Order details: give the name the width ───────────────────── * * The totals column was claiming 37% of the table at desktop and 45% on a * phone to hold about 75px of numerals, which squeezed the item name and * wrapped it over three lines on mobile. * * `width: 1%` in an auto-layout table is the idiom for "shrink to content": * the browser gives the column its minimum and hands every remaining pixel * to the other one. `nowrap` keeps an amount from breaking mid-figure while * still letting the shipping method's description below it wrap, so that * line cannot force the column wide again. * * thead, tbody and tfoot share column widths, so the Subtotal / Shipping / * Total amounts stay aligned with the line amounts without a second rule. */ .woocommerce-order-received .woocommerce-order-details table.shop_table .product-total { width: 1%; white-space: nowrap; } /* * The shipping row carries the method name after the amount. Shrinking the * column left it wrapping mid-phrase across three lines, so it drops to its * own line and reads as a caption under the amount — which is what it is. * `normal` undoes the `nowrap` inherited from the cell above, or the caption * would push the column wide again and undo the width this rule just freed. */ .woocommerce-order-received .woocommerce-order-details table.shop_table .shipped_via { display: block; white-space: normal; margin-top: 2px; font-size: 10.5px; line-height: 1.4; color: var(--fv-ink-3); } /* * A floor for the column where there is room for one. Pure shrink-to-fit * sized it to the widest amount and nothing else, so the footer's longer * values — the shipping method, "Cash on delivery" — broke across three * lines. 165px is what the longest of them needs on one line, and the name * still keeps about 88% of the table. Desktop only: on a phone the same * floor would claim back nearly half the row, and a caption wrapping there * costs less than the name being squeezed again. */ @media (min-width: 768px) { .woocommerce-order-received .woocommerce-order-details table.shop_table .product-total { min-width: 165px; } } .woocommerce-order-received .woocommerce-order table.shop_table, .wc-block-order-confirmation-totals table { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-lg); overflow: hidden; font-size: 12.5px; width: 100%; } .woocommerce-order-received table.shop_table tfoot th, .woocommerce-order-received table.shop_table tfoot td { font-family: var(--fv-mono); } /* The order-details tfoot rows carry no classes, and with COD the last * row is "Payment method", not the total — so nothing here may key off * position. The total already reads in red on the overview cards above. */ .woocommerce-order-received table.shop_table tfoot th { font-family: var(--fv-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fv-ink-3); font-weight: 700; } .woocommerce-order-received table.shop_table tfoot td .woocommerce-Price-amount { font-weight: 700; color: var(--fv-ink); } .wc-block-order-confirmation-summary { background: var(--fv-cream); border-radius: var(--fv-radius-lg); box-shadow: var(--fv-shadow-sm); padding: 16px 18px; } .wc-block-order-confirmation-summary-list-item__key { font-family: var(--fv-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fv-ink-3); } .wc-block-order-confirmation-summary-list-item__value { font-family: var(--fv-mono); font-weight: 700; color: var(--fv-ink); } /* ══════════════════════════════════════════════════════════════ Layout corrections ══════════════════════════════════════════════════════════════ */ /* WooCommerce sizes the sidebar layout as percentage columns * (`.wc-block-components-sidebar-layout .wc-block-components-main * { width: 65% }`) at two-class specificity. We drive the columns with * grid instead, so the percentage has to go — match its specificity. */ .wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar-layout .wc-block-components-sidebar { width: auto; max-width: none; flex: none; padding: 0; } .wc-block-components-sidebar-layout table.wc-block-cart-items { width: 100%; table-layout: auto; } /* Block buttons inherit an underline from the anchor reset. */ .wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button__text { text-decoration: none; } /* Tighten the run-in above the cart/checkout body. */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-top: 0; } .woocommerce-cart .woocommerce-notices-wrapper:empty, .woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; } .wc-block-components-sidebar-layout { margin-top: 4px; } /* Storefront's page header runs into the order/cart body. */ .woocommerce-order-received .entry-header, .woocommerce-cart .entry-header, .woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header { padding: 6px 0 0; margin: 0 0 14px; text-align: left; } /* Block checkout step headings render at the block library's own large * scale; bring them down to the storefront's heading rhythm. */ .wc-block-checkout h2.wc-block-components-title, .wc-block-checkout__main h2.wc-block-components-title, h2.wc-block-components-checkout-step__title, .wc-block-components-checkout-step__title { font-family: var(--fv-font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--fv-ink); line-height: 1.3; margin-bottom: 10px; } .wc-block-components-sidebar h2.wc-block-components-title, .wp-block-woocommerce-checkout-order-summary-block h2.wc-block-components-title { font-family: var(--fv-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fv-ink-2); } /* ══════════════════════════════════════════════════════════════ CHECKOUT — Opnar layout Focused page: no footer, no header on mobile, three sidebar cards. ══════════════════════════════════════════════════════════════ */ .fv-checkout-focus .site-footer { display: none; } .fv-checkout-focus .site-main { margin-bottom: 32px; } /* * Mobile drops the header entirely — checkout is a single task, and its own * "Shipping & Payment Information / ← Back to cart" row already carries the * way out. * * Breakpoint is 1023px, not 767px, so it matches the two places that matter: * where the ported header switches to its mobile bar, and where this form * collapses to one column. * * The selector is `.fv-hdr` — the design port replaced the old markup, and * this rule still named the retired `.fv-announce` / `.fv-header` classes, so * it had quietly stopped hiding anything. */ @media (max-width: 1023px) { .fv-checkout-focus .fv-hdr, .fv-checkout-focus .storefront-breadcrumb, .fv-checkout-focus .woocommerce-breadcrumb { display: none; } .fv-checkout-focus .site-content { padding-top: 0; } } /* The page's own

is replaced by the eyebrow row. */ .fv-checkout-focus .entry-header { display: none; } .fv-checkout-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 14px; flex-wrap: nowrap; } .fv-checkout-eyebrow > span { font-family: var(--fv-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fv-ink-2); white-space: nowrap; } .fv-checkout-eyebrow > a { font-size: 12.5px; font-weight: 500; color: var(--fv-ink-3); white-space: nowrap; } .fv-checkout-eyebrow > a:hover { color: var(--fv-accent); } /* ── Two-column frame ──────────────────────────────────────────── */ .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; gap: 18px; align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; width: auto; float: none; } .woocommerce-checkout #order_review_heading { display: none; } .woocommerce-checkout #order_review { grid-column: 2; grid-row: 1 / span 2; width: auto; float: none; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; background: transparent; border: 0; padding: 0; box-shadow: none; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: auto; float: none; } @media (max-width: 1023px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; } } /* ── Card shell, shared by address + sidebar cards ─────────────── */ .woocommerce-checkout .woocommerce-billing-fields, .fv-co-card { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-lg); overflow: hidden; box-shadow: var(--fv-shadow-sm); } /* form-billing.php's own heading — replaced by the header band. */ .woocommerce-checkout .woocommerce-billing-fields > h3 { display: none; } .fv-co-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--fv-line); background: var(--fv-surface); } .fv-co-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fv-ink); } .fv-co-card-head span { font-size: 12px; color: var(--fv-ink-3); } .fv-co-card-title { margin: 0; padding: 13px 16px 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fv-ink); } /* ── Address form body ─────────────────────────────────────────── */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; background: var(--fv-cream); padding: 20px 16px 22px; } @media (max-width: 560px) { .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } } .woocommerce-checkout .form-row { margin: 0; padding: 0; float: none; width: auto; position: relative; } .woocommerce-checkout .form-row-wide { grid-column: 1 / -1; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single { width: 100%; border: 1px solid var(--fv-line-2); border-radius: var(--fv-radius-lg); background: var(--fv-surface); font-size: 14px; font-family: var(--fv-font); color: var(--fv-ink); box-shadow: none; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single { height: 52px; padding: 0 14px; } .woocommerce-checkout .form-row textarea { padding: 14px; min-height: 104px; resize: none; line-height: 1.5; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus { border-color: var(--fv-accent); outline: 0; } .woocommerce-checkout .form-row select:disabled { background: var(--fv-muted); color: var(--fv-ink-3); cursor: not-allowed; } .woocommerce-checkout #billing_phone { font-family: var(--fv-mono); } .woocommerce-checkout .fv-hidden-field { display: none !important; } /* ── Notched (floating) labels ─────────────────────────────────── */ .woocommerce-checkout .fv-float > label { position: absolute; top: -8px; left: 12px; z-index: 2; margin: 0; padding: 0 6px; background: var(--fv-cream); font-family: var(--fv-font); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fv-ink); line-height: 1.2; } .woocommerce-checkout .fv-float .required { color: var(--fv-hot); text-decoration: none; border: 0; margin-left: 1px; } /* District + thana carry no label in Opnar — the value is the label. */ .woocommerce-checkout .fv-nolabel > label { display: none; } .woocommerce-checkout .form-row label .optional { display: none; } /* ── Hidden sections ───────────────────────────────────────────── */ .woocommerce-checkout #ship-to-different-address, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; } /* ── Sidebar card 1: Checkout Summary ──────────────────────────── */ .woocommerce-checkout .fv-co-summary table.shop_table { border: 0; border-radius: 0; width: 100%; font-size: 13.5px; margin: 0; background: transparent; } .woocommerce-checkout .fv-co-summary table.shop_table thead { display: none; } .woocommerce-checkout .fv-co-summary table.shop_table th, .woocommerce-checkout .fv-co-summary table.shop_table td { border: 0; padding: 9px 16px; background: transparent; vertical-align: middle; } .woocommerce-checkout .fv-co-summary table.shop_table tbody tr:last-child td, .woocommerce-checkout .fv-co-summary table.shop_table tbody tr:last-child th { padding-bottom: 14px; border-bottom: 1px solid var(--fv-line); } .woocommerce-checkout .fv-co-summary .product-name { color: var(--fv-ink-2); font-weight: 500; font-size: 13px; } .woocommerce-checkout .fv-co-summary .product-quantity { font-family: var(--fv-mono); color: var(--fv-ink-3); font-weight: 500; } .woocommerce-checkout .fv-co-summary tfoot th { font-family: var(--fv-font); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fv-ink-2); text-align: left; } .woocommerce-checkout .fv-co-summary tfoot td { text-align: right; font-family: var(--fv-mono); font-weight: 600; color: var(--fv-ink); } .woocommerce-checkout .fv-co-summary tfoot tr { border-top: 1px solid var(--fv-line); } .woocommerce-checkout .fv-co-summary tfoot tr:first-child { border-top: 0; } .fv-free { color: var(--fv-good); font-family: var(--fv-mono); font-weight: 700; letter-spacing: 0.04em; } /* WooCommerce's own total row, relabelled "Payable Total". */ .woocommerce-checkout .fv-co-summary tfoot tr.order-total th { font-size: 15px; font-weight: 700; color: var(--fv-ink); padding-top: 14px; padding-bottom: 16px; } .woocommerce-checkout .fv-co-summary tfoot tr.order-total td { font-size: 17px; font-weight: 800; color: var(--fv-ink); padding-top: 14px; padding-bottom: 16px; } .woocommerce-checkout .fv-co-summary tfoot tr.order-total { border-top: 1px solid var(--fv-line-2); } /* ── Sidebar card 2: promo ─────────────────────────────────────── */ .woocommerce-checkout .fv-coupon { display: flex; gap: 10px; align-items: stretch; padding: 0 16px 4px; } .woocommerce-checkout .fv-coupon input.input-text { flex: 1 1 auto; min-width: 0; height: 46px; border: 1px solid var(--fv-line-2); border-radius: var(--fv-radius-lg); background: var(--fv-surface); padding: 0 14px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fv-ink); font-family: var(--fv-font); } .woocommerce-checkout .fv-coupon input.input-text::placeholder { text-transform: uppercase; letter-spacing: 0.04em; color: var(--fv-ink-3); } .woocommerce-checkout .fv-coupon input.input-text:focus { border-color: var(--fv-accent); outline: 0; } /* * The button was a fixed washed-out orange that only reached full accent on * hover, so it read as permanently disabled — and on a touch screen, where * there is no hover, it never looked any other way. It is now a normal * button, and the muted state is reserved for when it genuinely cannot do * anything: an empty field. */ .woocommerce-checkout .fv-coupon button.button { flex: 0 0 auto; height: 46px; padding: 0 24px; background: var(--fv-accent); border: 0; border-radius: var(--fv-radius-lg); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; white-space: nowrap; } .woocommerce-checkout .fv-coupon button.button:hover:not(:disabled) { background: var(--fv-accent-hover); } .woocommerce-checkout .fv-coupon button.button:disabled { background: var(--fv-muted); color: var(--fv-ink-3); cursor: not-allowed; } .woocommerce-checkout .fv-co-promo.is-busy { opacity: 0.6; pointer-events: none; } .woocommerce-checkout .fv-coupon-msg { padding: 0 16px; font-size: 11.5px; line-height: 1.5; } .woocommerce-checkout .fv-coupon-msg:not(:empty) { padding-bottom: 14px; } .woocommerce-checkout .fv-coupon-msg.is-error { color: var(--fv-hot); } .woocommerce-checkout .fv-coupon-msg.is-success { color: var(--fv-good); } /* ── Sidebar card 3: payment ───────────────────────────────────── */ .woocommerce-checkout .fv-co-payment #payment { background: transparent; border-radius: 0; margin: 0; padding: 14px 16px 16px; } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 14px; list-style: none; } .woocommerce-checkout #payment ul.payment_methods li { /* * Radio | icon | text — a two-row grid so the description aligns under * the method name instead of starting to the left of it, which is what * the default float-y markup produced. */ display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px; border: 1px solid var(--fv-line); background: var(--fv-surface); border-radius: var(--fv-radius-lg); padding: 13px 14px; margin: 0; list-style: none; transition: border-color 0.15s ease, background 0.15s ease; } .woocommerce-checkout #payment ul.payment_methods li + li { margin-top: 10px; } .woocommerce-checkout #payment ul.payment_methods li:has( input:checked ) { border-color: var(--fv-accent); background: var(--fv-accent-soft); } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { grid-column: 1; grid-row: 1; width: 17px; height: 17px; margin: 0; accent-color: var(--fv-accent); } .woocommerce-checkout #payment ul.payment_methods li label { grid-column: 2 / span 2; grid-row: 1; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--fv-ink); text-transform: none; cursor: pointer; } .woocommerce-checkout #payment ul.payment_methods li label img { max-height: 22px; width: auto; margin: 0; } .woocommerce-checkout #payment div.payment_box { grid-column: 2 / span 2; grid-row: 2; background: transparent; color: var(--fv-ink-3); font-size: 12px; line-height: 1.5; padding: 0; margin: 0; width: auto; } .woocommerce-checkout #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::after { display: none; } .woocommerce-checkout #payment div.payment_box p { margin: 0; } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0; list-style: none; } /* Empty once the privacy blurb is removed — stops it adding dead space. */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:empty { display: none; } .woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 11px; color: var(--fv-ink-3); line-height: 1.5; margin: 0 0 12px; } .woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; } .woocommerce-checkout #payment .place-order { padding: 0; margin: 0; } .woocommerce-checkout #place_order { width: 100%; min-height: 50px; background: var(--fv-accent); color: #fff; border-radius: var(--fv-radius-lg); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; border: 0; } .woocommerce-checkout #place_order:hover { background: var(--fv-accent-hover); } /* ── Mobile: sticky place-order bar ────────────────────────────── */ @media (max-width: 1023px) { /* * Only the button is pinned. `.place-order` also wraps the terms and * privacy copy, so fixing the whole row dragged that text into the bar * and made it three lines tall — Opnar's bar is the button alone. */ .fv-checkout-focus .woocommerce-checkout #place_order { position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: auto; margin: 0; box-shadow: 0 6px 22px rgba(255, 107, 0, 0.35); } /* Room so the bar never covers the last field. */ .fv-checkout-focus .site-main { padding-bottom: 92px; } } /* ── Corrections ───────────────────────────────────────────────── */ /* WooCommerce's floated half-width rows fight the grid cells. */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last, .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-checkout .fv-co-promo .form-row-first, .woocommerce-checkout .fv-co-promo .form-row-last { width: 100%; float: none; margin: 0; } /* Checkout is a focused task — no breadcrumb trail. */ .fv-checkout-focus .storefront-breadcrumb, .fv-checkout-focus .woocommerce-breadcrumb { display: none; } /* Only the amount column is mono / nowrap. Applying `white-space: nowrap` * to every also hit `.product-name`, which forced the table wider * than the card and let `overflow: hidden` clip the whole amount column. */ .woocommerce-checkout .fv-co-summary td.product-total, .woocommerce-checkout .fv-co-summary tfoot td { text-align: right; font-family: var(--fv-mono); white-space: nowrap; vertical-align: top; width: 1%; } .woocommerce-checkout .fv-co-summary td.product-name { text-align: left; white-space: normal; word-break: break-word; } .woocommerce-checkout .fv-co-summary .product-quantity { white-space: nowrap; } /* With the privacy blurb removed, the button sat flush against the * gateway box — restore the gap. */ .woocommerce-checkout #payment .place-order { margin-top: 14px; } @media (max-width: 1023px) { .fv-checkout-focus .woocommerce-checkout #payment .place-order { margin-top: 0; } } /* ── Payment row: bottom edge + radio ────────────────────────────── * WooCommerce strips the last row's bottom padding and border with * #payment .payment_methods li:last-child:not(.woocommerce-notice) * { padding-bottom: 0; border-bottom: 0 } * which assumes rows are separator-divided list items. Our rows are * self-contained cards, and with a single gateway that row is ALSO the * last child — so the card rendered with an open bottom edge and its * description flush against it. Matched specificity to restore both. */ .woocommerce-checkout #payment .payment_methods li:last-child:not(.woocommerce-notice) { padding-bottom: 13px; border-bottom: 1px solid var(--fv-line); } .woocommerce-checkout #payment .payment_methods li:last-child:not(.woocommerce-notice):has( input:checked ) { border-bottom-color: var(--fv-accent); } /* WooCommerce hides the radio when a single gateway is available * (checkout.js: `if ( 1 === $payment_methods.length ) $payment_methods.eq(0).hide()`). * That is deliberate UX and sets an inline style, so CSS cannot and should * not fight it. These rules size the radio for the multi-gateway case, when * it IS shown. */ .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { width: 17px; height: 17px; margin: 0; accent-color: var(--fv-accent); } .woocommerce-checkout #payment .payment_methods li img { float: none; max-height: 22px; } /* The method-name marker renders as `label::before` INSIDE the label, so the * name's text starts further in than the label's own box. The description * has to clear the same distance to line up beneath it: * * 13.44px marker width * + 7.30px marker margin-right * + 9.00px label flex gap * = 29.74px * * Measured, not guessed — an earlier 22px estimate left it visibly short. * The selector stays specific enough to beat WooCommerce's * `#payment .payment_methods li .payment_box { padding: 1.41575em }`. */ .woocommerce-checkout #payment .payment_methods li { --fv-pay-indent: 29.75px; } .woocommerce-checkout #payment .payment_methods li .payment_box { padding: 0 0 0 var(--fv-pay-indent); } /* The promo heading is a long string in a narrow card — step it down from * the summary card's 15px so it doesn't dominate the panel. */ .woocommerce-checkout .fv-co-promo .fv-co-card-title { font-size: 13.5px; padding-bottom: 12px; } /* The review table carries a ~35px bottom margin from WooCommerce's table * defaults, which left dead space under Payable Total. Scoped through the * #order_review id so it outranks whatever sets it. */ .woocommerce-checkout #order_review .fv-co-summary table.shop_table { margin: 0; padding-bottom: 0; } .woocommerce-checkout .fv-co-summary tfoot tr:last-child th, .woocommerce-checkout .fv-co-summary tfoot tr:last-child td { padding-bottom: 16px; } /* ── Summary line thumbnails ───────────────────────────────────── */ .woocommerce-checkout .fv-co-summary td.product-name, .woocommerce-order-received td.woocommerce-table__product-name { /* The quantity and variation data are appended by the template * after the name, so the image floats and the rest of the line wraps * beside it rather than forcing a grid over siblings we don't control. */ overflow: hidden; } /* One rule for both surfaces: the thank-you page's order details table gets * the same line thumbnail as the checkout summary, so a placed order reads * like the cart the shopper reviewed a moment earlier. */ .woocommerce-checkout .fv-co-summary .fv-sum-thumb, .woocommerce-order-received td.woocommerce-table__product-name .fv-sum-thumb { float: left; width: 46px; height: 46px; margin: 2px 10px 2px 0; object-fit: cover; background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-radius-md); display: block; } .woocommerce-checkout .fv-co-summary .fv-sum-name, .woocommerce-order-received td.woocommerce-table__product-name .fv-sum-name { font-weight: 600; color: var(--fv-ink); } .woocommerce-checkout .fv-co-summary .variation { margin: 2px 0 0; font-family: var(--fv-mono); font-size: 10.5px; color: var(--fv-ink-3); } .woocommerce-checkout .fv-co-summary .variation dt, .woocommerce-checkout .fv-co-summary .variation dd { display: inline; margin: 0; font-weight: 500; } .woocommerce-checkout .fv-co-summary tbody td { padding-top: 12px; padding-bottom: 12px; } /* ── District field (Select2) ────────────────────────────────────── * WooCommerce enhances the state select with Select2, whose default box * does not match a native