/*
 * WSF EPOS — My Account stylesheet (loaded only on account pages).
 * Selectors are anchored on BOTH body.woocommerce-account and an explicit
 * .wsf-acc wrapper the templates output, so styling applies regardless of how
 * WooCommerce renders the page (shortcode-on-page or woocommerce.php).
 */

/* =====================================================================
   RESET WOOCOMMERCE DEFAULTS
   WooCommerce's woocommerce.css / wc-blocks.css float the account nav and
   content (30% / 68%) and add clearfix pseudo-elements. Those can win over our
   grid on cascade ties, so we explicitly neutralise them first. Uses the
   body.woocommerce-account anchor for specificity and !important on the few
   structural properties WooCommerce sets, so our layout always applies.
   ===================================================================== */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
    content: none !important;
    display: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding-left: 0 !important;
}

/* =====================================================================
   MY ACCOUNT — modern layout, all tabs
   Scoped to body.woocommerce-account so it applies however WooCommerce
   renders the page (shortcode on a page, or via woocommerce.php).
   ===================================================================== */

body.woocommerce-account .wsf-page,
.wsf-acc .wsf-page,
body.woocommerce-account .wsf-page--woo { padding: 32px 20px 56px; }
body.woocommerce-account .wsf-page__inner { max-width: 1080px; }

/* Page title */
body.woocommerce-account .wsf-page__title,
.wsf-acc .wsf-page__title,
body.woocommerce-account .entry-title,
.wsf-acc .entry-title,
body.woocommerce-account h1.wsf-account-title,
.wsf-acc h1.wsf-account-title {
    font-size: 30px; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--ink);
}

/* --- the two-column shell --- */
body.woocommerce-account .woocommerce,
.wsf-acc .woocommerce {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    font-size: 15px;
}
@media (max-width: 820px) {
    body.woocommerce-account .woocommerce, .wsf-acc .woocommerce { grid-template-columns: 1fr; gap: 16px; }
}

/* --- navigation sidebar --- */
body.woocommerce-account .woocommerce-MyAccount-navigation,
.wsf-acc .woocommerce-MyAccount-navigation {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px;
    box-shadow: var(--shadow-sm);
    position: sticky; top: calc(var(--header-h) + 20px);
}
@media (max-width: 820px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation, .wsf-acc .woocommerce-MyAccount-navigation { position: static; }
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
.wsf-acc .woocommerce-MyAccount-navigation ul {
    list-style: none; margin: 0; padding: 0;
    display: flex !important; flex-direction: column !important; gap: 2px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li { width: 100%; margin: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a,
.wsf-acc .woocommerce-MyAccount-navigation li a {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 14px;
    border-radius: var(--r-sm);
    background: transparent; border: none; border-bottom: none !important;
    color: var(--ink-2) !important; font-weight: 500; font-size: 14px;
    transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before,
.wsf-acc .woocommerce-MyAccount-navigation li a::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--line-2); flex-shrink: 0; transition: background 0.14s var(--ease);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.wsf-acc .woocommerce-MyAccount-navigation li a:hover {
    background: var(--paper-2); color: var(--ink) !important; text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.wsf-acc .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--wsf-primary); color: #fff !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { background: rgba(255,255,255,0.7); }
body.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a,
.wsf-acc .woocommerce-MyAccount-navigation li--customer-logout a,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--terra) !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { background: var(--terra); opacity: 0.5; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout.is-active a { background: var(--terra); color: #fff !important; }
/* Remove WooCommerce's default divider borders between nav items. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li,
.wsf-acc .woocommerce-MyAccount-navigation ul li { border: none !important; }

/* --- content column --- */
body.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Section heading used across tabs */
.wsf-acc-h {
    font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 4px; color: var(--ink);
}
.wsf-acc-sub { font-size: 14px; color: var(--ink-3); margin: 0 0 20px; }
.wsf-acc-block {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

/* =====================================================================
   DASHBOARD
   ===================================================================== */
.wsf-dash__hero {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: linear-gradient(135deg, var(--wsf-primary), var(--wsf-secondary));
    color: #fff; border-radius: var(--r-lg); padding: 26px 28px; margin-bottom: 22px;
    flex-wrap: wrap; position: relative; overflow: hidden;
}
.wsf-dash__hero::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.wsf-dash__greeting { position: relative; z-index: 1; }
.wsf-dash__eyebrow { font-family: var(--font-num); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.wsf-dash__name { font-size: 26px; margin: 6px 0 0; letter-spacing: -0.01em; color: #fff; line-height: 1.1; }
.wsf-dash__shop { margin: 8px 0 0; font-size: 14px; opacity: 0.92; }
.wsf-dash__shop-id { font-family: var(--font-num); opacity: 0.8; }
.wsf-dash__stat { position: relative; z-index: 1; text-align: center; background: rgba(255,255,255,0.14); border-radius: var(--r-md); padding: 16px 24px; min-width: 110px; }
.wsf-dash__stat-num { display: block; font-family: var(--font-num); font-size: 32px; font-weight: 700; line-height: 1; }
.wsf-dash__stat-label { display: block; font-size: 12px; opacity: 0.85; margin-top: 6px; }

.wsf-dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wsf-dash__card {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px;
    transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wsf-dash__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); text-decoration: none; }
.wsf-dash__card-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper-2); color: var(--wsf-primary); border-radius: var(--r-md);
}
.wsf-dash__card-body { flex: 1; min-width: 0; }
.wsf-dash__card-label { display: block; font-weight: 600; color: var(--ink); }
.wsf-dash__card-desc { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.wsf-dash__card-caret { color: var(--ink-3); flex-shrink: 0; }
.wsf-dash__back {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px; font-weight: 600; font-size: 14px; color: var(--wsf-primary);
}

/* locked note */
.wsf-account-locked-note {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--amber-bg); border: 1px solid var(--amber-line);
    border-left: 3px solid var(--amber);
    color: #7a5312; border-radius: var(--r-sm);
    padding: 12px 14px; margin-bottom: 18px; font-size: 14px;
}

/* =====================================================================
   ORDERS TABLE
   ===================================================================== */
body.woocommerce-account .woocommerce-orders-table,
.wsf-acc .woocommerce-orders-table,
body.woocommerce-account table.shop_table,
.wsf-acc table.shop_table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
body.woocommerce-account table.shop_table thead th,
.wsf-acc table.shop_table thead th {
    background: var(--paper-2); color: var(--ink-3);
    font-family: var(--font-num); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 14px 16px; text-align: left; border: none;
}
body.woocommerce-account table.shop_table tbody td,
.wsf-acc table.shop_table tbody td {
    padding: 16px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle;
}
body.woocommerce-account table.shop_table tbody tr:hover { background: var(--paper); }
body.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-family: var(--font-num); font-weight: 700; color: var(--wsf-primary); }
body.woocommerce-account .woocommerce-orders-table__cell-order-total { font-family: var(--font-num); font-weight: 700; }

/* order status pill */
body.woocommerce-account .order-status,
.wsf-acc .order-status,
body.woocommerce-account mark.order-status,
.wsf-acc mark.order-status {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--paper-2); color: var(--ink-2);
    font-size: 12px; font-weight: 600; font-family: var(--font-num);
    text-transform: capitalize;
}
body.woocommerce-account .status-processing mark, body.woocommerce-account .order-status.status-processing { background: color-mix(in srgb, var(--wsf-accent) 16%, transparent); color: var(--wsf-primary); }
body.woocommerce-account .status-completed mark, body.woocommerce-account .order-status.status-completed { background: color-mix(in srgb, var(--wsf-primary) 16%, transparent); color: var(--wsf-primary); }
body.woocommerce-account .status-on-hold mark, body.woocommerce-account .order-status.status-on-hold { background: var(--amber-bg); color: var(--amber); }
body.woocommerce-account .status-cancelled mark, body.woocommerce-account .status-failed mark { background: var(--terra-bg); color: var(--terra); }

/* empty orders */
body.woocommerce-account .woocommerce-message,
.wsf-acc .woocommerce-message,
body.woocommerce-account .woocommerce-info,
.wsf-acc .woocommerce-info,
body.woocommerce-account .woocommerce-notice,
.wsf-acc .woocommerce-notice {
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--wsf-primary);
    border-radius: var(--r-md); padding: 16px 18px; color: var(--ink-2);
    box-shadow: none;
}
body.woocommerce-account .woocommerce-info a.button,
.wsf-acc .woocommerce-info a.button,
body.woocommerce-account .woocommerce-message a.button { float: none; }

/* =====================================================================
   ADDRESSES
   WooCommerce wraps these in .col2-set with floated .col-1 / .col-2 at ~48%.
   We cancel those floats and use a clean 2-column grid instead.
   ===================================================================== */
body.woocommerce-account .woocommerce-Addresses,
.wsf-acc .woocommerce-Addresses,
body.woocommerce-account .woocommerce-Addresses.col2-set,
.wsf-acc .woocommerce-Addresses.col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px; margin: 0; width: 100%;
}
/* Cancel WooCommerce's column floats/widths on the address cards. */
body.woocommerce-account .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-Addresses .col-2,
.wsf-acc .woocommerce-Addresses .col-1,
.wsf-acc .woocommerce-Addresses .col-2,
body.woocommerce-account .woocommerce-Address,
.wsf-acc .woocommerce-Address {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
/* Cancel the col2-set clearfix pseudo-elements. */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after,
.wsf-acc .woocommerce-Addresses::before,
.wsf-acc .woocommerce-Addresses::after { content: none !important; display: none !important; }

@media (max-width: 640px) {
    body.woocommerce-account .woocommerce-Addresses,
    .wsf-acc .woocommerce-Addresses,
    body.woocommerce-account .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; }
}

body.woocommerce-account .woocommerce-Address,
.wsf-acc .woocommerce-Address {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}
body.woocommerce-account .woocommerce-Address-title,
.wsf-acc .woocommerce-Address-title {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
body.woocommerce-account .woocommerce-Address-title h2,
.wsf-acc .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3,
.wsf-acc .woocommerce-Address-title h3 {
    font-size: 16px; margin: 0; font-weight: 700; color: var(--ink);
}
body.woocommerce-account .woocommerce-Address-title .edit,
.wsf-acc .woocommerce-Address-title .edit {
    flex-shrink: 0; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--wsf-primary) !important;
    padding: 7px 14px; border: 1px solid var(--line-2) !important; border-radius: 999px;
    background: var(--card); transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
body.woocommerce-account .woocommerce-Address-title .edit:hover,
.wsf-acc .woocommerce-Address-title .edit:hover {
    background: var(--paper-2); border-color: var(--wsf-primary) !important; text-decoration: none;
}
body.woocommerce-account .woocommerce-Address address,
.wsf-acc .woocommerce-Address address,
body.woocommerce-account address {
    font-style: normal; line-height: 1.7; color: var(--ink-2); font-size: 14px; margin: 0;
}
/* The "You have not set up this type of address yet." empty state. */
body.woocommerce-account .woocommerce-Address p,
.wsf-acc .woocommerce-Address p { color: var(--ink-3); font-size: 14px; margin: 0; }

/* Intro line above the address cards. */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
.wsf-acc .woocommerce-MyAccount-content > p:first-of-type {
    color: var(--ink-2); margin: 0 0 20px; font-size: 15px;
}

/* =====================================================================
   FORMS (edit address / account details)
   ===================================================================== */
body.woocommerce-account form.woocommerce-EditAccountForm,
.wsf-acc form.woocommerce-EditAccountForm,
body.woocommerce-account form.edit-account,
.wsf-acc form.edit-account,
body.woocommerce-account .woocommerce-address-fields,
.wsf-acc .woocommerce-address-fields {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm);
    max-width: 640px;
}
body.woocommerce-account .woocommerce form .form-row { margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; }
body.woocommerce-account .woocommerce form .form-row label,
.wsf-acc .woocommerce form .form-row label {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px;
}
body.woocommerce-account .woocommerce form .form-row .required { color: var(--terra); border: none; }
body.woocommerce-account .woocommerce form .form-row input.input-text,
.wsf-acc .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row input[type="email"],
.wsf-acc .woocommerce form .form-row input[type="email"],
body.woocommerce-account .woocommerce form .form-row input[type="password"],
.wsf-acc .woocommerce form .form-row input[type="password"],
body.woocommerce-account .woocommerce form .form-row input[type="tel"],
.wsf-acc .woocommerce form .form-row input[type="tel"],
body.woocommerce-account .woocommerce form .form-row select,
.wsf-acc .woocommerce form .form-row select,
body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single,
.wsf-acc .woocommerce .select2-container--default .select2-selection--single {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    font-family: var(--font-ui); font-size: 14px; background: var(--paper); color: var(--ink);
    box-sizing: border-box; height: auto; line-height: 1.4;
}
body.woocommerce-account .woocommerce .select2-container--default .select2-selection--single { padding: 6px 13px; min-height: 44px; display: flex; align-items: center; }
body.woocommerce-account .woocommerce .select2-container .select2-selection__rendered { line-height: 1.4; padding: 0; }
body.woocommerce-account .woocommerce .select2-container .select2-selection__arrow { height: 100%; }
body.woocommerce-account .woocommerce form .form-row input:focus,
.wsf-acc .woocommerce form .form-row input:focus,
body.woocommerce-account .woocommerce form .form-row select:focus,
.wsf-acc .woocommerce form .form-row select:focus {
    outline: none; border-color: var(--wsf-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsf-primary) 16%, transparent);
}
body.woocommerce-account .woocommerce form .form-row input[readonly] { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; }
body.woocommerce-account fieldset,
.wsf-acc fieldset {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 18px; margin: 20px 0 0;
}
body.woocommerce-account fieldset legend { font-weight: 700; padding: 0 8px; font-size: 14px; }
body.woocommerce-account .woocommerce-form-row--first { }

/* buttons */
body.woocommerce-account .woocommerce .button,
.wsf-acc .woocommerce .button,
body.woocommerce-account .woocommerce a.button,
.wsf-acc .woocommerce a.button,
body.woocommerce-account .woocommerce button.button,
.wsf-acc .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
.wsf-acc .woocommerce input.button {
    background: var(--wsf-btn) !important; color: var(--wsf-btn-text) !important;
    border: none; border-radius: var(--r-md);
    font-weight: 600; font-size: 14px; padding: 12px 22px;
    transition: background 0.2s var(--ease), transform 0.12s var(--ease);
    cursor: pointer;
}
body.woocommerce-account .woocommerce .button:hover,
.wsf-acc .woocommerce .button:hover,
body.woocommerce-account .woocommerce button.button:hover,
.wsf-acc .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover { background: var(--wsf-secondary) !important; transform: translateY(-1px); }
body.woocommerce-account .woocommerce .button.wsf-btn--ghost,
.wsf-acc .woocommerce .button.wsf-btn--ghost,
body.woocommerce-account .woocommerce a.wsf-btn--ghost,
.wsf-acc .woocommerce a.wsf-btn--ghost {
    background: transparent; color: var(--ink-2); border: 1px solid var(--line-2);
}

/* =====================================================================
   SAVED CARDS
   ===================================================================== */
.wsf-cards__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.wsf-cards__title { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.wsf-cards__sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; max-width: 460px; }
.wsf-cards__empty {
    text-align: center; padding: 48px 24px;
    background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
    color: var(--ink-3);
}
.wsf-cards__empty-mark { color: var(--line-2); }
.wsf-cards__empty-title { font-weight: 600; color: var(--ink-2); margin: 12px 0 4px; }
.wsf-cards__empty-hint { font-size: 13px; margin: 0; }
.wsf-cards__list { display: flex; flex-direction: column; gap: 10px; }
.wsf-card-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--line-2);
    border-radius: var(--r-md); padding: 16px 18px;
    transition: border-color 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.wsf-card-row.is-default { border-color: var(--wsf-primary); box-shadow: 0 0 0 1px var(--wsf-primary) inset; }
.wsf-card-row__chip {
    width: 30px; height: 22px; border-radius: 4px; flex-shrink: 0;
    background: linear-gradient(135deg, #d9c48a, #b89a53);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.wsf-card-row__brand { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--ink-2); min-width: 52px; }
.wsf-card-row__num { font-family: var(--font-num); font-size: 15px; letter-spacing: 0.08em; color: var(--ink); }
.wsf-card-row__exp { font-family: var(--font-num); font-size: 13px; color: var(--ink-3); }
.wsf-card-row__default {
    margin-left: auto; font-family: var(--font-num); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--wsf-primary); background: color-mix(in srgb, var(--wsf-primary) 12%, transparent);
    padding: 4px 10px; border-radius: 999px;
}
.wsf-card-row__make-default {
    margin-left: auto; background: none; border: none;
    color: var(--wsf-primary); font-weight: 600; font-size: 13px; padding: 4px 8px; border-radius: var(--r-sm);
}
.wsf-card-row__make-default:hover { background: var(--paper-2); }
.wsf-card-row__delete {
    background: none; border: none; color: var(--ink-3); padding: 6px; border-radius: var(--r-sm);
    display: inline-flex;
}
.wsf-card-row__delete:hover { color: var(--terra); background: var(--terra-bg); }

/* view order page */
body.woocommerce-account .woocommerce-order-details,
.wsf-acc .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details { margin-top: 20px; }
body.woocommerce-account .woocommerce-column__title,
.wsf-acc .woocommerce-column__title,
body.woocommerce-account .woocommerce-order-details__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }

/* =====================================================================
   LOGGED-OUT: WooCommerce login form on the My Account page — centred card
   ===================================================================== */
body.woocommerce-account:not(.logged-in) .wsf-page__inner { max-width: 460px; }
body.woocommerce-account:not(.logged-in) .wsf-page__title { text-align: center; font-size: 26px; margin-bottom: 6px; }
body.woocommerce-account:not(.logged-in) .woocommerce h2 { text-align: center; font-size: 15px; font-weight: 500; color: var(--ink-3); margin: 0 0 22px; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) form.login,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
    width: 100%; max-width: 460px; margin: 0 auto; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); padding: 28px 28px 22px;
}
body.woocommerce-account:not(.logged-in) .u-columns { display: block; }
body.woocommerce-account:not(.logged-in) .u-column1,
body.woocommerce-account:not(.logged-in) .u-column2 { float: none; width: 100%; max-width: none; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row { display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 6px; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login input.input-text,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .password-input { width: 100%; box-sizing: border-box; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login input.input-text { min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); font-size: 15px; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__rememberme { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; color: var(--ink-2); }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login button.woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button {
    width: 100%; min-height: 48px; border: 0; border-radius: var(--r-sm);
    background: var(--wsf-btn); color: var(--wsf-btn-text); font-weight: 700; font-size: 15px; margin-top: 4px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword { text-align: center; margin: 14px 0 0; font-size: 13px; }
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-error { max-width: 460px; margin: 0 auto 16px; box-sizing: border-box; border-radius: var(--r-md); }

/* =====================================================================
   PAY FOR ORDER (checkout/order-pay) — the page a card gateway sends the
   terminal to. Styled as a centred card; the "Pay for order" button is
   always visible.
   ===================================================================== */
body.woocommerce-order-pay .wsf-page__inner { max-width: 640px; }
body.woocommerce-order-pay .wsf-page__title { display: none; }
body.woocommerce-order-pay ul.order_details,
body.woocommerce-order-pay .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; list-style: none; margin: 0 0 24px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
body.woocommerce-order-pay ul.order_details li { border: 0; margin: 0; padding: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
body.woocommerce-order-pay ul.order_details li strong { display: block; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); font-family: var(--font-num); }
body.woocommerce-order-pay form#order_review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 24px; }
body.woocommerce-order-pay form#order_review table.shop_table { width: 100%; border: 0; margin: 0 0 20px; border-collapse: collapse; }
body.woocommerce-order-pay form#order_review table.shop_table th,
body.woocommerce-order-pay form#order_review table.shop_table td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; text-align: left; font-size: 14px; }
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child th,
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child td { border: 0; font-size: 17px; font-weight: 700; padding-top: 14px; }
body.woocommerce-order-pay form#order_review table.shop_table td:last-child,
body.woocommerce-order-pay form#order_review table.shop_table th:last-child { text-align: right; }
body.woocommerce-order-pay #payment { background: transparent; border-radius: 0; }
body.woocommerce-order-pay #payment ul.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; border: 0; }
body.woocommerce-order-pay #payment li.wc_payment_method { margin: 0 0 12px; }
body.woocommerce-order-pay #payment li.wc_payment_method > label { font-weight: 600; font-size: 15px; }
body.woocommerce-order-pay #payment div.payment_box { background: var(--paper-2); border-radius: var(--r-md); padding: 16px; margin: 10px 0 0; }
body.woocommerce-order-pay #payment div.payment_box::before { display: none; }
body.woocommerce-order-pay #payment .form-row { padding: 0; margin: 0 0 14px; }
body.woocommerce-order-pay #payment .form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
body.woocommerce-order-pay #payment .form-row input.input-text,
body.woocommerce-order-pay #payment .form-row input[type="text"],
body.woocommerce-order-pay #payment .form-row input[type="tel"],
body.woocommerce-order-pay #payment .form-row select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); font-size: 15px; }
body.woocommerce-order-pay #payment .place-order,
body.woocommerce-order-pay #payment .form-row.place-order { margin: 18px 0 0; }
body.woocommerce-order-pay form#order_review button#place_order,
body.woocommerce-order-pay form#order_review button.button.alt,
body.woocommerce-order-pay form#order_review input[type="submit"] {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 100%; min-height: 50px; margin-top: 18px; border: 0; border-radius: var(--r-sm);
    background: var(--wsf-btn); color: var(--wsf-btn-text); font-weight: 700; font-size: 16px; cursor: pointer;
}
body.woocommerce-order-pay form#order_review button#place_order:hover { background: var(--wsf-secondary); }
body.woocommerce-order-pay form#order_review button#place_order:disabled { opacity: .6; cursor: wait; }
/* logged-out: no sidebar grid — single centred column */
body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account:not(.logged-in) .wsf-acc .woocommerce { display: block !important; width: 100%; }
body.woocommerce-account:not(.logged-in) .woocommerce > h2 { text-align: center !important; }
/* Paymentsense Remote Payments on the pay page */
body.woocommerce-order-pay .wsf-page__content > .woocommerce,
body.woocommerce-order-pay .wsf-page__content { max-width: 640px; margin: 0 auto; }
body.woocommerce-order-pay #paymentsense-rp-payment-div { margin: 16px 0; }
body.woocommerce-order-pay #paymentsense-rp-payment-div iframe { max-width: 100%; }
body.woocommerce-order-pay #paymentsense-rp-button-div { margin: 18px 0 0; }
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn {
    display: block; width: 100%; min-height: 50px; border: 0; border-radius: var(--r-sm);
    background: var(--wsf-btn); color: var(--wsf-btn-text); font-weight: 700; font-size: 16px; cursor: pointer;
}
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn:disabled { opacity: .6; cursor: wait; }
body.woocommerce-order-pay #paymentsense-rp-errors-div .woocommerce-error { margin: 12px 0; }

/* Pay-for-order page as a centred card (Paymentsense Remote Payments + any gateway).
   account.js wraps everything after the order summary in .wsf-pay-card. */
body.woocommerce-order-pay .wsf-page { padding: 32px 20px 64px; }
body.woocommerce-order-pay .wsf-page__content > .woocommerce { display: block !important; }
body.woocommerce-order-pay .wsf-page__content > .woocommerce > ul.order_details { margin: 0 0 20px; }
body.woocommerce-order-pay .wsf-pay-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px 28px 28px; }
body.woocommerce-order-pay .wsf-pay-card::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--wsf-primary); margin-bottom: 14px; }
body.woocommerce-order-pay .wsf-pay-card > p { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; }
body.woocommerce-order-pay .wsf-pay-card > p:empty { display: none; }
body.woocommerce-order-pay #paymentsense-rp-payment-div { padding: 0 !important; margin: 0 !important; }
body.woocommerce-order-pay #paymentsense-rp-payment-div iframe { width: 100% !important; max-width: 100%; display: block; }
body.woocommerce-order-pay #paymentsense-rp-button-div { margin: 8px 0 0 !important; text-align: left !important; }
body.woocommerce-order-pay #paymentsense-rp-button-div::after { content: 'Payments are processed securely by Paymentsense. Your card details never touch this website.'; display: block; margin-top: 12px; font-size: 12px; color: var(--ink-3); text-align: center; }
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn,
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn.button.alt {
    display: block !important; width: 100% !important; min-height: 52px; margin: 0 !important; float: none !important;
    border: 0 !important; border-radius: var(--r-sm) !important; background: var(--wsf-btn) !important; color: var(--wsf-btn-text) !important;
    font: 700 16px/1 var(--font-ui) !important; letter-spacing: 0.01em; cursor: pointer; box-shadow: var(--shadow-sm);
}
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn:hover { background: var(--wsf-secondary) !important; }
body.woocommerce-order-pay #paymentsense-rp-submit-payment-btn:disabled { opacity: .6; cursor: wait; }
body.woocommerce-order-pay #paymentsense-rp-errors-div .woocommerce-error { margin: 0 0 14px; border-radius: var(--r-md); }
body.woocommerce-order-pay ul.order_details li strong .woocommerce-Price-amount { font-family: var(--font-num); }
@media (max-width: 600px) { body.woocommerce-order-pay .wsf-pay-card { padding: 20px 18px 22px; } }