in the intro heading whichever way
the heading is classed. */
.sa-checkout-intro h1 em,
.sa-checkout-intro h2 em,
.woocommerce-checkout .sa-checkout-title em,
.sa-eyebrow-line + h1 em,
.sa-eyebrow-line + h2 em,
.sa-eyebrow-line + .wp-block-heading em {
color: var(--co-teal) !important;
font-style: italic !important;
}
/* the group block that holds the eyebrow + heading — center it full-width.
WordPress gives this group "is-layout-constrained", which left-aligns its
children in a content column. We override that so the heading centers. */
.woocommerce-checkout .wp-block-group:has(.sa-eyebrow-line) {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
padding: 40px 20px 6px !important;
}
.woocommerce-checkout .wp-block-group:has(.sa-eyebrow-line) > * {
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.woocommerce-checkout .wp-block-group:has(.sa-eyebrow-line) > .wp-block-heading,
.woocommerce-checkout .wp-block-group:has(.sa-eyebrow-line) > h1 {
text-align: center !important;
width: 100% !important;
}
@media (max-width: 768px) {
.sa-checkout-intro { padding: 28px 20px 4px; }
.woocommerce-checkout .wp-block-group:has(.sa-eyebrow-line) {
padding: 28px 20px 4px !important;
}
.woocommerce-checkout .sa-eyebrow-line { margin-top: 28px !important; }
}
/* Astra wraps the page content in .ast-container with a max-width cap.
On the checkout page, widen it so the two-column checkout has room. */
.woocommerce-checkout .ast-container,
.woocommerce-checkout .site-content .ast-container,
.woocommerce-checkout .content-area,
.woocommerce-checkout .entry-content {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout {
font-family: 'Nunito Sans', sans-serif;
color: var(--co-text);
max-width: 1200px;
margin: 0 auto;
padding: 32px 40px 80px;
}
@media (max-width: 768px) {
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout {
padding: 20px 16px 60px;
}
}
/* ---- TWO-COLUMN LAYOUT ----
The block checkout decides one- vs two-column by adding is-small / is-medium
/ is-large to wc-block-components-sidebar-layout, based on container width
measured by its JS at load. On some themes it mis-measures and stays
one-column (is-small), stacking the summary on top. The rules below FORCE
the two-column row layout on screens wide enough for it, regardless of which
is-* class WooCommerce picked. Below 940px we let it stack (correct mobile). */
.woocommerce-checkout .wc-block-components-sidebar-layout {
gap: 28px;
}
@media (min-width: 941px) {
.woocommerce-checkout .wc-block-components-sidebar-layout,
.woocommerce-checkout .wc-block-checkout {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
}
.woocommerce-checkout .wc-block-components-main,
.woocommerce-checkout .wc-block-checkout__main {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
flex: 0 0 380px !important;
width: 380px !important;
max-width: 380px !important;
order: 2 !important;
}
}
@media (min-width: 941px) and (max-width: 1080px) {
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
flex-basis: 340px !important;
width: 340px !important;
}
}
/* below 941px: stacked, summary on top — block checkout's mobile mode is fine */
@media (max-width: 940px) {
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
order: -1;
}
}
/* ---- FORM SECTION CARDS ----
Each checkout-step becomes a white rounded card. */
.woocommerce-checkout .wc-block-components-checkout-step {
background: #fff;
border: 1px solid var(--co-border) !important;
border-radius: var(--co-r);
box-shadow: var(--co-shadow);
padding: 26px 28px !important;
margin-bottom: 22px !important;
}
@media (max-width: 768px) {
.woocommerce-checkout .wc-block-components-checkout-step {
padding: 20px 18px !important;
}
}
/* step heading */
.woocommerce-checkout .wc-block-components-checkout-step__title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 24px !important;
font-weight: 600 !important;
color: var(--co-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__heading {
margin-bottom: 18px !important;
}
/* STEP NUMBER BADGES (best-effort)
The checkout-step__heading-content holds the title; we add a numbered
badge before each step's heading. WooCommerce renders the steps in a
fixed order, so :nth-of-type targets them. If a WC update changes the
step order/markup, adjust the numbers here. */
.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
position: relative;
}
.woocommerce-checkout .wc-block-components-checkout-step__heading::before {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--co-teal-light);
color: var(--co-teal-dark);
border: 1.5px solid var(--co-teal-mid);
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
font-weight: 800;
margin-right: 12px;
flex-shrink: 0;
}
.woocommerce-checkout .wc-block-components-checkout-step__heading {
display: flex !important;
align-items: center !important;
}
.woocommerce-checkout .wc-block-checkout__contact-fields
.wc-block-components-checkout-step__heading::before { content: "1"; }
.woocommerce-checkout .wc-block-checkout__shipping-fields
.wc-block-components-checkout-step__heading::before { content: "2"; }
.woocommerce-checkout .wc-block-checkout__shipping-option
.wc-block-components-checkout-step__heading::before { content: "3"; }
.woocommerce-checkout .wc-block-checkout__payment-method
.wc-block-components-checkout-step__heading::before { content: "4"; }
/* ---- FORM FIELDS ----
The block checkout uses FLOATING labels: the label sits inside the field
and animates upward when the field has focus/content. The input therefore
needs extra top padding so the floated label and the typed value don't
overlap. Do NOT reposition the label itself — let WooCommerce's JS handle
the float; we only set colours/fonts on it. */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input select,
.woocommerce-checkout .wc-block-components-country-input input,
.woocommerce-checkout .wc-block-components-country-input select,
.woocommerce-checkout .wc-block-components-state-input input,
.woocommerce-checkout .wc-block-components-state-input select {
font-family: 'Nunito Sans', sans-serif !important;
font-size: 14px !important;
color: var(--co-text) !important;
border: 1.5px solid var(--co-border) !important;
border-radius: 10px !important;
background: var(--co-cream) !important;
/* extra top padding leaves room for the floating label */
padding: 22px 14px 8px !important;
height: auto !important;
line-height: 1.4 !important;
}
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input select:focus {
border-color: var(--co-teal) !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(58,156,142,0.1) !important;
}
/* floating field label — colours/font only, position left to WooCommerce JS */
.woocommerce-checkout .wc-block-components-text-input label {
font-family: 'Nunito Sans', sans-serif !important;
color: var(--co-muted) !important;
}
/* the label when floated up (field has content) — keep it clear of the value */
.woocommerce-checkout .wc-block-components-text-input.is-active label {
font-size: 11px !important;
}
/* ---- SHIPPING & PAYMENT OPTIONS (radio rows) ----
The block checkout positions the radio input absolutely and uses
__option-layout to lay out the label. Our job: recolour the border,
give the label room so it doesn't overlap the radio, and NOT add a
second border on top of the block's own selected-state border. */
.woocommerce-checkout .wc-block-components-radio-control__option {
border: 1.5px solid var(--co-border) !important;
border-radius: 10px !important;
padding: 14px 16px 14px 44px !important; /* left padding clears the radio */
margin-bottom: 10px !important;
}
/* the radio input — sits in the left padding gap */
.woocommerce-checkout .wc-block-components-radio-control__input {
accent-color: var(--co-teal);
left: 16px !important;
}
/* selected option — single teal border + tint, no doubling */
.woocommerce-checkout .wc-block-components-radio-control__option-checked,
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
border-color: var(--co-teal) !important;
background: var(--co-teal-light) !important;
box-shadow: none !important;
}
/* the block's --highlight-checked wrapper draws its own outline — remove it
so only the option's own border shows (kills the doubled-border look) */
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::before,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after {
display: none !important;
}
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked {
border: 0 !important;
box-shadow: none !important;
}
/* PAYMENT ACCORDION — when the payment method renders as an accordion it
gets its OWN dark outline on these wrapper elements. Neutralise them so
only our own teal/cream option border shows (kills the black box). */
.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
.woocommerce-checkout .wc-block-components-radio-control-accordion-content,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked--first-selected,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked--last-selected {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* the checked accordion option — clean teal border, WHITE inside
(not the teal tint — keeps the card fields area neutral) */
.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border: 1.5px solid var(--co-teal) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none !important;
outline: 0 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__label {
font-weight: 700 !important;
color: var(--co-text) !important;
}
.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
font-weight: 800 !important;
color: var(--co-teal-dark) !important;
}
/* ---- PAYMENT METHOD ---- */
.woocommerce-checkout .wc-block-components-payment-method-label {
font-weight: 700;
color: var(--co-text);
}
/* ---- EXPRESS CHECKOUT ----
The Express Checkout block (Google Pay pill) sits above the form.
We wrap it in ONE clean white card: the "Express Checkout" title at the
top, then the Google Pay pill below it with clear spacing. The black pill
itself is Google's widget and is intentionally left as-is — we only style
the card and title AROUND it. */
.woocommerce-checkout .wc-block-components-express-payment {
background: #fff !important;
border: 1px solid var(--co-border) !important;
border-radius: var(--co-r) !important;
box-shadow: var(--co-shadow) !important;
outline: 0 !important;
padding: 22px 24px !important;
margin-bottom: 22px !important;
}
/* inner layers — transparent, no borders, but KEEP vertical spacing so the
title and the pill don't collapse on top of each other */
.woocommerce-checkout .wc-block-components-express-payment__content,
.woocommerce-checkout .wc-block-components-express-payment__event-buttons,
.woocommerce-checkout .wc-block-components-express-payment__title-container,
.woocommerce-checkout .wc-block-components-express-payment--checkout {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
/* title container — give it space below so the pill sits clear of it.
The block draws lines beside the title; force them to the SAME thin
1px border colour as the "Or continue below" rule so they match. */
.woocommerce-checkout .wc-block-components-express-payment__title-container {
margin-bottom: 14px !important;
padding: 0 !important;
text-align: center;
}
.woocommerce-checkout .wc-block-components-express-payment__title-container::before,
.woocommerce-checkout .wc-block-components-express-payment__title-container::after,
.woocommerce-checkout .wc-block-components-express-payment__title::before,
.woocommerce-checkout .wc-block-components-express-payment__title::after {
background-color: var(--co-border) !important;
background-image: none !important;
border: 0 !important;
border-top: 1px solid var(--co-border) !important;
height: 1px !important;
box-shadow: none !important;
}
.woocommerce-checkout .wc-block-components-express-payment__content {
padding: 0 !important;
}
.woocommerce-checkout .wc-block-components-express-payment__event-buttons {
margin: 0 !important;
padding: 0 !important;
}
/* the "Express Checkout" title — matches the "Or continue below" style:
small, uppercase, muted, Nunito Sans (NOT Cormorant) */
.woocommerce-checkout .wc-block-components-express-payment__title {
font-family: 'Nunito Sans', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--co-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
background: transparent !important;
position: static !important;
}
/* the "Or continue below" divider rule */
.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--co-muted) !important;
}
.woocommerce-checkout .wc-block-components-express-payment-continue-rule::before,
.woocommerce-checkout .wc-block-components-express-payment-continue-rule::after {
border-color: var(--co-border) !important;
}
/* "save payment information" box — see build notes; styled subtly */
.woocommerce-checkout .wc-block-components-payment-methods__save-card-info {
background: var(--co-cream);
border: 1px dashed var(--co-border);
border-radius: 10px;
padding: 12px 14px;
margin-top: 10px;
font-size: 12.5px;
color: var(--co-muted);
}
/* ---- TERMS CHECKBOX (native bottom of left column) ---- */
.woocommerce-checkout .wc-block-checkout__terms {
background: #fff;
border: 1px solid var(--co-border);
border-radius: var(--co-r);
box-shadow: var(--co-shadow);
padding: 18px 20px !important;
margin-bottom: 22px !important;
font-size: 12.5px;
color: var(--co-text);
}
.woocommerce-checkout .wc-block-checkout__terms--with-separator {
border-top: 1px solid var(--co-border);
}
.woocommerce-checkout .wc-block-checkout__terms a {
color: var(--co-teal-dark);
font-weight: 700;
}
.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__input {
accent-color: var(--co-teal);
}
/* ---- PLACE ORDER BUTTON (native bottom of left column) ---- */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
width: 100% !important;
background: var(--co-teal) !important;
color: #fff !important;
border: 0 !important;
font-family: 'Nunito Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 17px !important;
border-radius: var(--co-pill) !important;
box-shadow: 0 8px 24px rgba(58,156,142,0.28) !important;
transition: opacity 0.15s, transform 0.12s;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
opacity: 0.92;
transform: translateY(-2px);
}
/* ---- RETURN TO CART LINK ---- */
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
font-size: 13px;
font-weight: 600;
color: var(--co-muted) !important;
fill: var(--co-muted);
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
color: var(--co-teal) !important;
fill: var(--co-teal);
}
/* ---- ORDER SUMMARY (right column, single card) ----
Real structure: wc-block-checkout__sidebar wraps everything;
the visible content is wc-block-components-order-summary +
wc-block-components-totals-wrapper blocks. The coupon is a
collapsible wc-block-components-panel (the "Add coupons" toggle). */
/* the whole sidebar becomes one white card */
.woocommerce-checkout .wc-block-checkout__sidebar {
background: #fff !important;
border: 1px solid var(--co-border) !important;
border-radius: var(--co-r) !important;
box-shadow: var(--co-shadow) !important;
padding: 0 !important;
overflow: hidden;
}
/* remove inner borders/backgrounds the block adds so it reads as ONE card */
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel,
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.woocommerce-checkout .wc-block-components-order-summary {
background: transparent !important;
border-radius: 0 !important;
}
/* inner padding for the summary body sections */
.woocommerce-checkout .wc-block-components-order-summary__content,
.woocommerce-checkout .wc-block-components-totals-wrapper {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* summary title — gradient header band */
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
background: linear-gradient(135deg, var(--co-teal-light), var(--co-pink-light));
padding: 18px 24px !important;
margin: 0 !important;
border-bottom: 1px solid var(--co-border);
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
font-family: 'Cormorant Garamond', serif !important;
font-size: 23px !important;
font-weight: 600 !important;
color: var(--co-text) !important;
text-transform: none !important;
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
font-weight: 800 !important;
color: var(--co-text) !important;
}
/* line items */
.woocommerce-checkout .wc-block-components-order-summary-item {
padding: 14px 0 !important;
border-bottom: 1px solid var(--co-border);
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
border-radius: 12px;
border: 1px solid rgba(224,90,154,0.12);
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
background: var(--co-teal) !important;
color: #fff !important;
border: 2px solid #fff !important;
}
.woocommerce-checkout .wc-block-components-product-name {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--co-text) !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
font-weight: 800 !important;
color: var(--co-text) !important;
}
/* COUPON — collapsed "Add coupons" panel toggle */
.woocommerce-checkout .wc-block-components-panel__button {
background: var(--co-cream) !important;
border: 1.5px solid var(--co-border) !important;
border-radius: var(--co-pill) !important;
padding: 11px 18px !important;
font-family: 'Nunito Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--co-text) !important;
}
.woocommerce-checkout .wc-block-components-panel__button-icon {
fill: var(--co-teal) !important;
}
/* coupon — expanded input + apply button */
.woocommerce-checkout .wc-block-components-totals-coupon__input input {
border: 1.5px solid var(--co-border) !important;
border-radius: var(--co-pill) !important;
background: var(--co-cream) !important;
font-family: 'Nunito Sans', sans-serif !important;
}
.woocommerce-checkout .wc-block-components-totals-coupon__button {
background: var(--co-teal) !important;
border: 1.5px solid var(--co-teal) !important;
color: #fff !important;
border-radius: var(--co-pill) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
}
.woocommerce-checkout .wc-block-components-totals-coupon-link {
color: var(--co-teal-dark) !important;
font-weight: 700;
}
/* totals rows */
.woocommerce-checkout .wc-block-components-totals-item {
padding: 5px 0 !important;
}
.woocommerce-checkout .wc-block-components-totals-item__label {
color: var(--co-muted) !important;
font-size: 13.5px !important;
}
.woocommerce-checkout .wc-block-components-totals-item__value {
color: var(--co-text) !important;
font-weight: 700 !important;
}
/* grand total — emphasised, divider above */
.woocommerce-checkout .wc-block-components-totals-footer-item {
border-top: 1.5px solid var(--co-border) !important;
margin-top: 6px !important;
padding-top: 14px !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-family: 'Cormorant Garamond', serif !important;
font-size: 21px !important;
font-weight: 600 !important;
color: var(--co-text) !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 21px !important;
font-weight: 800 !important;
color: var(--co-text) !important;
}
/* ---- NOTICES ---- */
.woocommerce-checkout .wc-block-components-notice-banner.is-error {
background: var(--co-pink-light);
border-radius: 10px;
}
.woocommerce-checkout .wc-block-components-notice-banner.is-success,
.woocommerce-checkout .wc-block-components-notice-banner.is-info {
background: var(--co-teal-light);
border-radius: 10px;
}
/* ---- TRUST BADGES ----
Plain text paragraphs added in the page editor after the checkout.
Each paragraph carries two classes:
badge 1 (SSL): sa-trust-badge sa-trust-ssl
badge 2 (Questions): sa-trust-badge sa-trust-help
The monotonal teal icon is drawn by CSS as a ::before background image,
so the editor content stays plain text (no emoji, no SVG to paste).
Styled to match the mockup: soft teal, blended-in, small. */
.sa-trust-badges,
.woocommerce-checkout .wp-block-group:has(.sa-trust-badge) {
max-width: 1200px;
margin: 0 auto !important;
padding: 18px 40px 50px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px 28px !important;
background: transparent !important;
}
/* the badge itself — soft teal text, blended, small (matches mockup).
These are loose tags (not in a group), so each badge is a
block on its OWN line, centered. */
.sa-trust-badge,
.woocommerce-checkout .sa-trust-badge {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
width: 100% !important;
margin: 6px auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--co-teal) !important;
text-align: center !important;
}
/* first badge gets a little space above to separate from Place Order */
.sa-trust-ssl {
margin-top: 20px !important;
}
/* the monotonal icon — drawn before the text, teal (#3a9c8e baked in) */
.sa-trust-badge::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* badge 1 — shield (SSL encrypted & secure) */
.sa-trust-ssl::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a9c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/* badge 2 — chat bubble (Questions? We're here to help) */
.sa-trust-help::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a9c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7A8.38 8.38 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.5 8.5 0 0 1 21 11.5z'/%3E%3C/svg%3E");
}
/* lock variant — for the "Your payment is secure" line in the payment card.
Add class "sa-trust-badge sa-trust-lock" to that paragraph. */
.sa-trust-lock::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a9c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
/* the secure-payment line sits inside the payment card, so it gets a
little top spacing rather than the trust-row spacing */
.sa-trust-lock {
margin: 12px auto 0 !important;
}
/* if the emoji image is still present in the paragraph, hide it
(the CSS icon replaces it) */
.sa-trust-badge img.emoji {
display: none !important;
}
@media (max-width: 768px) {
.sa-trust-badges,
.woocommerce-checkout .wp-block-group:has(.sa-trust-badge) {
flex-direction: column !important;
gap: 8px !important;
padding: 14px 20px 44px !important;
}
}
/* ============================================================================
5. THANK-YOU / ORDER RECEIVED PAGE
============================================================================ */
.woocommerce-order {
font-family: 'Nunito Sans', sans-serif;
max-width: 720px;
margin: 0 auto;
padding: 40px 24px 80px;
}
.woocommerce-thankyou-order-received {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 600;
color: var(--co-text);
text-align: center;
margin-bottom: 24px;
}
.woocommerce-order .woocommerce-order-overview {
display: flex;
flex-wrap: wrap;
gap: 14px;
list-style: none;
margin: 0 0 28px;
padding: 20px 24px;
background: #fff;
border: 1px solid var(--co-border);
border-radius: var(--co-r);
box-shadow: var(--co-shadow);
}
.woocommerce-order .woocommerce-order-overview li {
flex: 1 1 auto;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--co-muted);
border: 0;
}
.woocommerce-order .woocommerce-order-overview li strong {
display: block;
margin-top: 4px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--co-text);
}
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
background: #fff;
border: 1px solid var(--co-border);
border-radius: var(--co-r);
box-shadow: var(--co-shadow);
padding: 24px 26px;
margin-bottom: 22px;
}
.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-column__title {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 600;
color: var(--co-text);
}
/* END OF SIMPLY ARI SITE STYLESHEET */