/* ================================================================
   CHECKOUT + MY ACCOUNT — visual reskin
   WooCommerce's own classic templates still render these two pages
   (no template override here, unlike single-product/cart) — payment
   gateways, field validation, and order logic all stay exactly as
   WooCommerce ships them. This file only re-paints the stable, long-
   standing WC class names with our design tokens. Also covers the
   most common WooCommerce Blocks class names defensively, in case
   this store's Checkout/Cart pages use the block editor versions
   instead of the classic shortcodes.
   ================================================================ */

/* Not a bare .woocommerce-checkout selector — WooCommerce puts that
   exact class on <body> AND on the checkout <form> itself, so a bare
   class rule silently doubles as a body-level style. Confirmed live:
   it was overwriting the sitewide tab-bar bottom clearance (body's own
   padding-bottom, set in main.css) down to a flat 3rem, ~36px short of
   the tab bar's real height — the checkout form's own "ship to a
   different address" checkbox was rendering partly underneath it.
   `body .woocommerce-checkout` only matches the form, never body
   itself, since a descendant combinator can't select its own ancestor. */
body .woocommerce-checkout,
.woocommerce-account {
    padding-block: var(--sp-6) var(--sp-12);
}

.woocommerce-checkout {
    --header-h: calc(var(--utility-bar-h) + var(--mobile-brand-bar-h));
}

@media (min-width: 768px) {
    .woocommerce-checkout {
        --header-h: calc(var(--utility-bar-h) + var(--nav-h));
    }
}

/* ── Notices ──────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    list-style: none;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-5);
    background: var(--color-blue-subtle);
    color: var(--color-blue-dark);
    border: 1px solid rgba(38, 85, 194, 0.25);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.woocommerce-error {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.25);
}

.woocommerce-error li { list-style: none; }

.woocommerce-message .button,
.woocommerce-error .button {
    margin-left: auto;
}

/* ── Form fields ──────────────────────────────────────────────── */

.woocommerce form .form-row { margin-bottom: var(--sp-4); }

.woocommerce form label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
}

.woocommerce form .required { color: var(--color-blue); text-decoration: none; }

.woocommerce form input.input-text,
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-checkout select,
.select2-container .select2-selection--single {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font);
    font-size: var(--text-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.woocommerce form input.input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-blue-subtle);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.25rem;
    color: var(--color-text);
}

/* ── Buttons ──────────────────────────────────────────────────── */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-6);
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-press);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
    background: var(--color-blue-dark);
    color: var(--color-white);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #place_order:active {
    transform: scale(0.97);
}

.woocommerce a.button.alt,
.woocommerce #place_order {
    background: var(--color-navy);
    width: 100%;
    padding: var(--sp-4);
    text-transform: uppercase;
}

.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
    background: var(--color-navy-light);
}

/* ── Checkout layout ──────────────────────────────────────────── */

.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

/* WooCommerce's own default checkout CSS sets .col-1/.col-2 to
   float:left; width:48% — a plain grid ignores the float, but a grid
   item still respects its OWN explicit width over stretching to fill
   its track, so billing kept rendering at roughly half the column's
   real width with a large dead gap beside it even once the grid
   itself was correctly sized. Overriding both properties here is what
   actually makes it fill the track. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
}

/* WooCommerce always renders .col-2 (shipping), even with "Ship to a
   different address?" unchecked — in that state it holds nothing but
   the checkbox itself. Splitting into two columns unconditionally
   reserved a whole matching-width column for that one checkbox line,
   leaving a big empty gap beside the billing fields (confirmed live:
   .col-2 measured 368px wide with ~171px of actual content in it).
   :has() only switches to the real 2-column layout once the box is
   actually checked and shipping fields have something to show —
   reactive, no JS needed, re-evaluates the moment it's toggled. */
@media (min-width: 900px) {
    .woocommerce-checkout #customer_details:has(#ship-to-different-address-checkbox:checked),
    .woocommerce-checkout .col2-set:has(#ship-to-different-address-checkbox:checked) {
        grid-template-columns: 1fr 1fr;
    }
}

/* Form on the left, order summary + payment pinned on the right —
   the classic WooCommerce template stacks #customer_details and
   #order_review as plain siblings inside form.checkout, so a grid on
   that shared parent can reposition them without any template
   override (payment/validation logic stays untouched). Below this,
   it's the original single-column flow (form, then summary, then
   payment) — already the right order for a phone screen. */
@media (min-width: 1024px) {
    form.checkout.woocommerce-checkout {
        display: grid;
        grid-template-columns: 1fr 400px;
        align-items: start;
        gap: var(--sp-10);
    }

    /* WooCommerce renders this as its own heading before #order_review,
       not inside it, so the grid above leaves it stranded at the
       bottom of the left column with nothing under it. The order
       card's own PRODUCT/SUBTOTAL/TOTAL labels already say "this is
       your order" clearly enough — simplest fix is to not show the
       orphaned heading at all on this layout. Still shown on mobile,
       where it's the right cue between the form and the summary. */
    #order_review_heading {
        display: none;
    }

    /* Sticky, but no max-height/overflow-y of its own — that gave the
       panel a second, separate internal scrollbar whenever its content
       (line items + payment methods) ran taller than the screen, on
       top of the page's own scroll, which read as confusing rather
       than helpful. One scroll area: the panel just scrolls along with
       the page like everything else, sticking only while there's room. */
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .woocommerce-checkout-review-order {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: calc(var(--header-h) + var(--sp-6));
        align-self: start;
    }
}

.woocommerce-checkout h3 {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-4);
}

/* ── Order summary — dark accent panel ───────────────────────────
   The one high-contrast surface on this page (everything else here
   is the light billing form) — makes the summary read as a distinct,
   settled "here's what you're paying" moment instead of just more
   form. Order Total gets its own large figure right at the top
   (checkout-page.js clones the real total once WC renders it further
   down — no template override, no risk to the actual order math) so
   the number that matters isn't buried at the bottom of a table. */
.woocommerce-checkout-review-order {
    background: var(--color-navy-dark);
    color: var(--color-white);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    box-shadow: var(--shadow-lg);
}

.checkout-hero-total {
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.checkout-hero-total__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--sp-2);
}

.checkout-hero-total__value {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
}

.woocommerce-checkout-review-order-table .product-name { color: var(--color-white); }
.woocommerce-checkout-review-order-table .amount { color: var(--color-white); font-weight: var(--fw-semi); }

/* The shipping method's own name (checkout-page.js moves it here from
   the price cell) — a quiet subline under "Shipping" itself, lighter
   than the row label above it, not fighting for attention the way it
   did sitting in front of the price. */
.woocommerce-checkout-review-order-table .checkout-shipping-method {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-normal);
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total .amount {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: var(--fw-black);
    border-bottom: none;
    padding-top: var(--sp-4);
}

#payment {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-5);
}

/* WooCommerce doesn't render a heading above the payment methods by
   default — everything just runs on from the order table, which is
   part of why checkout reads as one long undifferentiated block. A
   pseudo-element label is enough to break it into a clearly separate
   step without touching the template. */
#payment::before {
    content: "Payment method";
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-3);
}

/* Each option reads as its own selectable card (border highlights on
   the checked one) instead of a plain radio + label row — makes it
   obvious at a glance which method is actually selected. */
#payment ul.payment_methods { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }

#payment ul.payment_methods li {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-white);
    transition: border-color var(--t-fast), background var(--t-fast);
}

#payment ul.payment_methods li:has(input:checked) {
    border-color: var(--color-blue-light);
    background: rgba(38, 85, 194, 0.28);
}

/* Explicit color, not just inherited from the li — the sitewide
   `.woocommerce form label` rule (var(--color-text), a dark navy meant
   for labels on the light form fields) targets the <label> itself, and
   an element's own explicit color always wins over an inherited one
   regardless of which rule is more specific. Left unset here, that
   rule was rendering dark navy label text on this same dark navy
   panel — barely legible, which is what read as "not visible". */
#payment ul.payment_methods li label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    color: var(--color-white);
}

#payment .payment_box { margin-top: var(--sp-3); padding: var(--sp-4); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }

/* WooCommerce's own delivery-note + privacy-policy paragraphs render
   at the plain browser default (16px, full-strength white) — loud
   fine print that competed with the actual total/button instead of
   sitting quietly in the background the way disclaimer text should,
   with barely any breathing room before Place Order underneath it. */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--sp-5);
}

.woocommerce-terms-and-conditions-wrapper p {
    font-size: var(--text-xs);
    line-height: var(--lh-normal);
    color: rgba(255, 255, 255, 0.5);
}

/* Place Order stays the one bright, unmissable action against all
   that dark navy — white pill instead of the site's usual solid navy
   button, which would nearly disappear against this panel. A small
   lock icon signals "this is the secure final step" at a glance. */
.woocommerce-checkout-review-order #place_order,
.woocommerce-checkout-review-order .woocommerce a.button.alt {
    background: var(--color-white);
    color: var(--color-navy-dark);
    border: 1.5px solid transparent;
    gap: var(--sp-2);
}

/* mask, not background-image — a plain data-URI icon would need its
   own hardcoded stroke color, so it'd stay navy on hover too. Masking
   with background-color: currentColor instead makes it follow the
   button's own text color automatically, navy by default and white
   on hover, with only one SVG to maintain. */
.woocommerce-checkout-review-order #place_order::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Was a slightly-off-white fill on hover — an equal-specificity
   sitewide rule (.woocommerce #place_order:hover) also sets color:
   white on hover, which it still won for since this override never
   touched `color` itself, so hover was silently landing white text on
   a near-white background. Outline instead of a second fill fixes
   both: transparent + a white stroke, with the text turning white on
   purpose this time since it now sits against the dark panel showing
   through, not against the button's own (removed) background. */
.woocommerce-checkout-review-order #place_order:hover {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

/* ── My Account ───────────────────────────────────────────────── */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}

@media (min-width: 900px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 220px 1fr;
        align-items: start;
    }
}

.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}

.woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg); color: var(--color-text); }

.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--color-blue-subtle);
    color: var(--color-blue-dark);
    font-weight: var(--fw-bold);
}

.woocommerce-MyAccount-content {
    background: var(--color-surface);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.woocommerce-orders-table,
.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.woocommerce-orders-table th,
.shop_table th {
    text-align: left;
    padding: var(--sp-3);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.woocommerce-orders-table td,
.shop_table td {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.woocommerce-orders-table__cell-order-status,
.order-status {
    display: inline-flex;
    padding: 2px var(--sp-2);
    border-radius: var(--r-md);
    background: var(--color-blue-subtle);
    color: var(--color-blue-dark);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
}

/* ── WooCommerce Blocks fallback (Cart/Checkout block editor) ──── */

.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-select select {
    border-radius: var(--r-md) !important;
    border-color: var(--color-border) !important;
    font-family: var(--font) !important;
}

.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: var(--color-blue) !important;
    border-radius: var(--r-full) !important;
    font-family: var(--font) !important;
    font-weight: var(--fw-bold) !important;
}

.wc-block-components-button:hover {
    background: var(--color-blue-dark) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price {
    color: var(--color-text) !important;
    font-weight: var(--fw-semi) !important;
}

/* ── Order received / "Thank you" page ───────────────────────────
   CSS-only reskin, same discipline as the rest of this file — every
   selector below targets WooCommerce's own stable class names from
   checkout/order-received.php, checkout/thankyou.php, and
   order/order-details*.php. No template override: this is a purely
   read-only receipt view (no payment/gateway logic involved), so it's
   safe, but there's no need to duplicate WC's own markup just to
   restyle it — same reasoning as everywhere else in this file. */

.woocommerce-order {
    max-width: 760px;
    margin-inline: auto;
    padding-block: var(--sp-8) var(--sp-16);
}

.woocommerce-thankyou-order-received {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-blue-subtle);
    border: 1px solid rgba(38, 85, 194, 0.2);
    border-radius: var(--r-lg);
    color: var(--color-navy);
    font-weight: var(--fw-semi);
}

.woocommerce-thankyou-order-received::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: var(--color-blue);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5) var(--sp-8);
    list-style: none;
    margin: 0 0 var(--sp-8);
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
}

.woocommerce-order-overview__order,
.woocommerce-order-overview__date,
.woocommerce-order-overview__email,
.woocommerce-order-overview__total,
.woocommerce-order-overview__payment-method {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    margin-bottom: var(--sp-4);
}

.woocommerce-order-details {
    margin-bottom: var(--sp-8);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-top: 2px solid var(--color-navy);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    font-size: var(--text-md);
}

.woocommerce-table--order-details .product-name a {
    color: var(--color-navy);
    font-weight: var(--fw-semi);
    text-decoration: none;
}

/* Addresses — same two-column card treatment as the account/login
   pages (blue billing / navy shipping, icon per card). WC's own
   .col2-set here still carries its legacy float:left/right; width:48%
   (see woo-forms.css's checkout billing/shipping fix above for the
   same root cause) — reset explicitly so the grid tracks actually own
   the sizing instead of a stale float shrinking each card to 48% of
   its own already-halved column. */
.woocommerce-customer-details {
    margin-bottom: var(--sp-6);
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 600px) {
    .woocommerce-columns--addresses {
        grid-template-columns: 1fr 1fr;
    }
}

.woocommerce-columns--addresses .col-1,
.woocommerce-columns--addresses .col-2,
.woocommerce-customer-details > address {
    float: none;
    width: 100%;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
}

.woocommerce-column--billing-address {
    background: #EEF2FB;
    border-color: #D3DEF5 !important;
    border-left: 3px solid var(--color-blue) !important;
}

.woocommerce-column--shipping-address {
    background: #EEF0F3;
    border-color: #D7DCE2 !important;
    border-left: 3px solid var(--color-navy) !important;
}

.woocommerce-column__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.woocommerce-column__title::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.woocommerce-column--billing-address .woocommerce-column__title::before {
    background-image: url("../images/email-icon-billing.svg");
}

.woocommerce-column--shipping-address .woocommerce-column__title::before {
    background-image: url("../images/email-icon-shipping.svg");
}

.woocommerce-customer-details address {
    font-style: normal;
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin: var(--sp-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}