/* ==========================================================================
   Cart · checkout · shop · account (redesign).
   These pages are WooCommerce shortcodes, so this file restyles WC's own
   markup rather than replacing it.
   ========================================================================== */

.kxp-shop-main { padding-block: clamp(6.5rem, 12vh, 9rem) clamp(4rem, 9vw, 7rem); }

/* ── Shared form controls ───────────────────────────────────────────────── */
.kxp-shop-main input[type="text"],
.kxp-shop-main input[type="email"],
.kxp-shop-main input[type="tel"],
.kxp-shop-main input[type="password"],
.kxp-shop-main input[type="number"],
.kxp-shop-main textarea,
.kxp-shop-main select,
.kxp-shop-main .select2-container .select2-selection {
    width: 100%;
    padding: 0.85em 1em;
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-300);
    border-radius: 0;
    font-family: var(--kxp-font-body);
    font-size: var(--kxp-step-0);
    color: var(--kxp-black);
    transition: border-color 0.3s var(--kxp-ease);
}
.kxp-shop-main input:focus,
.kxp-shop-main textarea:focus,
.kxp-shop-main select:focus { outline: none; border-color: var(--kxp-black); }
.kxp-shop-main label { font-size: var(--kxp-step--1); font-weight: 600; color: var(--kxp-grey-700); }
.kxp-shop-main .required { color: var(--kxp-accent); border: 0; text-decoration: none; }

/* Select2 (WC's country/state dropdowns) */
.kxp-shop-main .select2-container--default .select2-selection--single { height: auto; }
.kxp-shop-main .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5; padding: 0; color: var(--kxp-black);
}
.kxp-shop-main .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
#kxpMain .button,
#kxpMain button[type="submit"],
#kxpMain input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 1.05em 2.2em;
    background: var(--kxp-black);
    color: var(--kxp-white);
    border: 0;
    border-radius: 0;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
    transition: background 0.4s var(--kxp-ease), color 0.4s var(--kxp-ease);
}
#kxpMain .button:hover,
#kxpMain button[type="submit"]:hover,
#kxpMain input[type="submit"]:hover { background: var(--kxp-accent); color: var(--kxp-white); }
#kxpMain .button:disabled,
#kxpMain .button.disabled {
    background: var(--kxp-grey-100); color: var(--kxp-grey-500); cursor: not-allowed;
}
/* Secondary: "update cart" sits next to the coupon field and shouldn't compete. */
#kxpMain button[name="update_cart"] {
    background: transparent;
    color: var(--kxp-grey-700);
    border: 1px solid var(--kxp-grey-300);
    clip-path: none;
}
#kxpMain button[name="update_cart"]:hover:not(:disabled) {
    background: transparent; color: var(--kxp-black); border-color: var(--kxp-black);
}
#kxpMain button[name="update_cart"]:disabled { background: transparent; border-color: var(--kxp-grey-100); }

/* ── Notices ────────────────────────────────────────────────────────────── */
.woocommerce-notices-wrapper:empty { display: none; }
#kxpMain .woocommerce-message,
#kxpMain .woocommerce-error,
#kxpMain .woocommerce-info {
    list-style: none;
    margin: 0 0 2rem;
    padding: 1rem 1.3rem;
    background: var(--kxp-grey-50);
    border-left: 2px solid var(--kxp-accent);
    font-size: var(--kxp-step--1);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
}
#kxpMain .woocommerce-error { border-left-color: var(--kxp-accent); }
#kxpMain .woocommerce-message .button,
#kxpMain .woocommerce-info .button {
    margin-left: auto; padding: 0.6em 1.2em; font-size: 11px;
}
#kxpMain .woocommerce-error li { list-style: none; }

/* ── Cart table ─────────────────────────────────────────────────────────── */
.woocommerce-cart-form { margin-bottom: 3rem; }
.kxp-shop-main .shop_table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.kxp-shop-main .shop_table th {
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--kxp-grey-300);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-shop-main .shop_table td {
    padding: 1.5rem 0.75rem 1.5rem 0;
    border-bottom: 1px solid var(--kxp-grey-100);
    vertical-align: middle;
}
.kxp-shop-main .shop_table td:last-child,
.kxp-shop-main .shop_table th:last-child { padding-right: 0; text-align: right; }

.kxp-shop-main .cart_item .product-thumbnail { width: 96px; }
.kxp-shop-main .cart_item .product-thumbnail img {
    width: 88px; height: 88px; object-fit: contain;
    background: var(--kxp-grey-50);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}
.kxp-shop-main .cart_item .product-name a {
    font-family: var(--kxp-font-display);
    font-weight: 700;
    font-size: var(--kxp-step-0);
    transition: color 0.3s var(--kxp-ease);
}
.kxp-shop-main .cart_item .product-name a:hover { color: var(--kxp-accent); }
.kxp-shop-main .cart_item .variation {
    margin-top: 0.3rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-500);
}
.kxp-shop-main .cart_item .variation dt,
.kxp-shop-main .cart_item .variation dd { display: inline; margin: 0; }
.kxp-shop-main .cart_item .variation dd + dt::before { content: " · "; }
.kxp-shop-main .cart_item .variation p { display: inline; margin: 0; }
.kxp-shop-main .product-price,
.kxp-shop-main .product-subtotal {
    font-family: var(--kxp-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Remove button: a quiet × that only commits to red on hover. */
.kxp-shop-main .product-remove { width: 40px; }
.kxp-shop-main a.remove {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    font-size: 20px; line-height: 1;
    color: var(--kxp-grey-500) !important;
    border-radius: 0;
    transition: color 0.25s var(--kxp-ease), background 0.25s var(--kxp-ease);
}
.kxp-shop-main a.remove:hover {
    color: var(--kxp-white) !important;
    background: var(--kxp-accent) !important;
}

/* Qty input */
.kxp-shop-main .quantity { display: inline-flex; }
.kxp-shop-main .quantity .qty {
    width: 68px;
    padding: 0.6em 0.4em;
    text-align: center;
    font-family: var(--kxp-font-display);
    font-weight: 700;
    -moz-appearance: textfield;
}
.kxp-shop-main .quantity .qty::-webkit-outer-spin-button,
.kxp-shop-main .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Coupon row */
.kxp-shop-main .actions { padding-top: 1.5rem !important; border-bottom: 0 !important; }
.kxp-shop-main .coupon {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    float: none !important;
}
.kxp-shop-main .coupon label { display: none; }
.kxp-shop-main .coupon .input-text { width: auto !important; min-width: 200px; flex: 0 1 240px; }
.kxp-shop-main .actions > .button { float: none !important; }

@media (max-width: 720px) {
    /* Table → stacked rows. WC's markup keeps th labels in data-title. */
    .kxp-shop-main .shop_table thead { display: none; }
    .kxp-shop-main .shop_table,
    .kxp-shop-main .shop_table tbody,
    .kxp-shop-main .shop_table tr,
    .kxp-shop-main .shop_table td { display: block; width: 100%; }
    .kxp-shop-main .shop_table tr.cart_item {
        position: relative;
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 0.25rem 1rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--kxp-grey-100);
    }
    .kxp-shop-main .shop_table tr.cart_item td { border: 0; padding: 0; }
    .kxp-shop-main .cart_item .product-thumbnail { grid-row: 1 / span 4; }
    .kxp-shop-main .cart_item .product-remove { position: absolute; top: 1.25rem; right: 0; }
    .kxp-shop-main .cart_item .product-price::before,
    .kxp-shop-main .cart_item .product-subtotal::before {
        content: attr(data-title) ": ";
        font-size: var(--kxp-step--1);
        font-weight: 400;
        color: var(--kxp-grey-500);
    }
    .kxp-shop-main .shop_table td:last-child { text-align: left; }
    .kxp-shop-main .coupon .input-text { flex: 1 1 100%; }
}

/* ── Cart totals ────────────────────────────────────────────────────────── */
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart_totals {
    width: 100%;
    max-width: 420px;
    background: var(--kxp-grey-50);
    padding: clamp(1.5rem, 3vw, 2rem);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.cart_totals > h2 {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.cart_totals .shop_table th,
.cart_totals .shop_table td {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--kxp-grey-300);
    font-size: var(--kxp-step-0);
}
.cart_totals .shop_table th { text-transform: none; letter-spacing: 0; color: var(--kxp-grey-700); font-weight: 400; }
.cart_totals .order-total th,
.cart_totals .order-total td {
    border-bottom: 0;
    padding-top: 1.1rem;
    font-family: var(--kxp-font-display);
    font-weight: 700;
    font-size: var(--kxp-step-1);
    color: var(--kxp-black);
}
.cart_totals .wc-proceed-to-checkout { padding-top: 1.5rem; }
.cart_totals .wc-proceed-to-checkout .button { width: 100%; }
.cart_totals .woocommerce-shipping-destination { font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }
.cart_totals .shipping-calculator-button { border-bottom: 1px solid var(--kxp-grey-300); }

@media (max-width: 720px) {
    .cart-collaterals { display: block; }
    .cart_totals { max-width: none; }
}

/* Empty cart */
.cart-empty { font-size: var(--kxp-step-1); font-family: var(--kxp-font-display); font-weight: 700; }
.return-to-shop { margin-top: 1.5rem; }

/* ── Checkout ───────────────────────────────────────────────────────────────
   The theme overrides form-checkout.php with its own two-column structure
   (.kxp-co-cols / .kxp-co-left / .kxp-co-right) rather than WooCommerce's
   default #customer_details + #order_review — target that, not WC's shape. */
.kxp-co-cols {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 980px) {
    .kxp-co-cols { grid-template-columns: 1.15fr 0.85fr; }
    /* Order summary stays in view while the address form is filled in. */
    .kxp-co-right { position: sticky; top: 110px; }
}
.kxp-co-section + .kxp-co-section { margin-top: 2.5rem; }
.kxp-co-section-title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}
.kxp-shop-main h3,
.kxp-shop-main #order_review_heading {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 1.4rem;
}
.kxp-shop-main .form-row { margin-bottom: 1.1rem; }
.kxp-shop-main .form-row label { display: block; margin-bottom: 0.4rem; }
.kxp-shop-main #customer_details .col-1,
.kxp-shop-main #customer_details .col-2 { width: 100%; float: none; }
.kxp-shop-main #customer_details .col-2 { margin-top: 2rem; }

#order_review,
.kxp-co-order-review {
    background: var(--kxp-grey-50);
    padding: clamp(1.5rem, 3vw, 2rem);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
#order_review .shop_table th,
#order_review .shop_table td {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--kxp-grey-300);
    font-size: var(--kxp-step-0);
}
#order_review .shop_table thead th { border-bottom-color: var(--kxp-grey-500); }
#order_review .order-total th,
#order_review .order-total td {
    font-family: var(--kxp-font-display);
    font-weight: 700;
    font-size: var(--kxp-step-1);
    border-bottom: 0;
}
#order_review .product-name { font-size: var(--kxp-step--1); }
#order_review .product-quantity { color: var(--kxp-grey-500); }

/* Payment box — WC ships a lilac tint on #payment and .payment_box; these
   selectors are scoped under #kxpMain to outrank it without !important. */
#kxpMain #payment { background: transparent; border-radius: 0; margin-top: 1.5rem; }
#kxpMain #payment ul.payment_methods {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--kxp-grey-300);
}
#kxpMain #payment ul.payment_methods li { padding: 0.75rem 0; background: transparent; }
#kxpMain #payment ul.payment_methods label { font-weight: 600; cursor: pointer; }
#kxpMain #payment div.payment_box {
    background: var(--kxp-white);
    border-left: 2px solid var(--kxp-accent);
    border-radius: 0;
    margin: 0.75rem 0 0;
    padding: 1rem 1.2rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
}
/* The little arrow pointing at the selected method. */
#kxpMain #payment div.payment_box::before { display: none; }
#payment .place-order { padding: 0; margin-top: 1.5rem; }
#payment #place_order { width: 100%; }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1.2rem; font-size: var(--kxp-step--1); }

/* Login / coupon toggles above the form */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: 1.5rem; }
.woocommerce-form-login {
    border: 1px solid var(--kxp-grey-300);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* ── Coupon bar (theme's own collapsible, from checkout/form-coupon.php) ─── */
.kxp-co-coupon-bar {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--kxp-grey-100);
    background: var(--kxp-grey-50);
}
.kxp-co-collapsible-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%;
    padding: 1rem 1.3rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
    cursor: pointer;
    transition: color 0.3s var(--kxp-ease);
}
.kxp-co-collapsible-trigger:hover { color: var(--kxp-black); }
.kxp-co-collapsible-cta {
    font-weight: 600;
    color: var(--kxp-accent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--kxp-ease);
}
.kxp-co-collapsible-trigger:hover .kxp-co-collapsible-cta { border-bottom-color: var(--kxp-accent); }
.kxp-co-collapsible-chevron { transition: transform 0.35s var(--kxp-ease); flex-shrink: 0; }
.kxp-co-collapsible--open .kxp-co-collapsible-chevron { transform: rotate(180deg); }

.kxp-co-collapsible-panel { padding: 0 1.3rem 1.3rem; }
.kxp-co-coupon-message { font-size: var(--kxp-step--1); color: var(--kxp-grey-500); margin-bottom: 0.9rem; }
.kxp-co-coupon-fields { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kxp-co-coupon-fields .input-text { flex: 1 1 220px; width: auto; }
#kxpMain .kxp-co-coupon-btn { flex: 0 0 auto; padding: 0.85em 1.6em; }

/* ── Shop archive ───────────────────────────────────────────────────────── */
.kxp-shop-main ul.products {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .kxp-shop-main ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .kxp-shop-main ul.products { grid-template-columns: repeat(4, 1fr); } }
.kxp-shop-main ul.products li.product img {
    background: var(--kxp-grey-50);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
    transition: transform 0.5s var(--kxp-ease);
}
.kxp-shop-main ul.products li.product:hover img { transform: translateY(-4px); }
.kxp-shop-main ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0);
    font-weight: 700;
    margin-top: 0.8rem;
}
.kxp-shop-main ul.products li.product .price {
    display: block; margin-top: 0.3rem;
    font-family: var(--kxp-font-display); font-weight: 700;
}
.kxp-shop-main ul.products li.product .price del { color: var(--kxp-grey-300); font-weight: 400; margin-right: 0.35em; }
.kxp-shop-main ul.products li.product .star-rating,
.kxp-shop-main .woocommerce-result-count,
.kxp-shop-main .woocommerce-ordering { display: none; }

/* ── My account ─────────────────────────────────────────────────────────── */
/* The logged-in screens (navigation, dashboard, orders, forms) are styled in
   account.css alongside their templates in woocommerce/myaccount/. */

/* ── Logged out: log in / register ──────────────────────────────────────────
   WooCommerce frames both forms in a thin lilac box with rounded corners and
   floats the columns at 48%. Here they are two cards on a grid: log in on grey,
   register on black with the red call to action, because a new customer is the
   one we are trying not to lose. Scoped under #kxpMain #customer_login to
   outrank woocommerce-general without !important. */
#kxpMain #customer_login {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 3.5rem);
    align-items: start;
}
@media (min-width: 900px) {
    #kxpMain #customer_login { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* .col2-set's clearfix pseudo-elements would become empty grid cells. */
#kxpMain #customer_login::before,
#kxpMain #customer_login::after { content: none; }
#kxpMain #customer_login .u-column1,
#kxpMain #customer_login .u-column2 { float: none; width: auto; max-width: none; margin: 0; padding: 0; }

#kxpMain #customer_login h2 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
    font-size: var(--kxp-step-2);
    text-transform: uppercase;
}
/* A small red octagon — the logo's shape at bullet size. */
#kxpMain #customer_login h2::before {
    content: "";
    flex: none;
    width: 0.7em;
    height: 0.7em;
    background: var(--kxp-accent);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

#kxpMain #customer_login form.login,
#kxpMain #customer_login form.register {
    margin: 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: 0;
    border-top: 3px solid var(--kxp-accent);
    border-radius: 0;
    background: var(--kxp-grey-50);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
#kxpMain #customer_login form.register { background: var(--kxp-black); color: var(--kxp-grey-300); }

/* One field treatment for both forms. The login labels were sentence case and
   the register labels capitals, which read as two different sites. */
#kxpMain #customer_login .form-row { margin: 0 0 1.15rem; padding: 0; }
/* WooCommerce's `.woocommerce form .form-row-first` (47%) was out-specifying
   .kxp-reg-grid and squeezing the name fields to half their cell. */
#kxpMain #customer_login .form-row-first,
#kxpMain #customer_login .form-row-last { float: none; width: auto; margin-right: 0; }

#kxpMain #customer_login label:not(.woocommerce-form__label-for-checkbox) {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--kxp-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kxp-grey-700);
}
#kxpMain #customer_login form.register label:not(.woocommerce-form__label-for-checkbox) { color: var(--kxp-grey-300); }

#kxpMain #customer_login .woocommerce-input-wrapper,
#kxpMain #customer_login .password-input { display: block; position: relative; width: 100%; }
#kxpMain #customer_login .input-text {
    display: block;
    width: 100%;
    min-height: 3.15rem;
    padding: 0.8em 1em;
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-300);
    border-radius: 0;
    box-shadow: none;
    color: var(--kxp-black);
    transition: border-color 0.25s var(--kxp-ease), box-shadow 0.25s var(--kxp-ease);
}
#kxpMain #customer_login form.register .input-text { border-color: transparent; }
#kxpMain #customer_login .input-text:hover { border-color: var(--kxp-grey-500); }
#kxpMain #customer_login .input-text:focus {
    outline: none;
    border-color: var(--kxp-accent);
    box-shadow: inset 0 -3px 0 var(--kxp-accent);
}
#kxpMain #customer_login input[type="date"] { color-scheme: light; }
#kxpMain #customer_login .show-password-input { top: 50%; right: 0.9rem; transform: translateY(-50%); }

/* Log in button and "Remember me" on one line, button first. */
#kxpMain #customer_login form.login .form-row:has(.woocommerce-form-login__submit) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.6rem;
}
#kxpMain #customer_login .woocommerce-form-login__submit { order: -1; float: none; margin: 0; }
#kxpMain #customer_login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
    cursor: pointer;
}
#kxpMain #customer_login input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--kxp-accent);
}
#kxpMain #customer_login .lost_password {
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--kxp-grey-100);
    font-size: var(--kxp-step--1);
}
#kxpMain #customer_login .lost_password a { font-weight: 600; color: var(--kxp-accent); }
#kxpMain #customer_login .lost_password a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Register card — small print in grey, the intro and the button stand out. */
#kxpMain #customer_login form.register > p:not(.form-row),
#kxpMain #customer_login .woocommerce-privacy-policy-text {
    font-size: var(--kxp-step--1);
    line-height: 1.6;
    color: var(--kxp-grey-500);
}
#kxpMain #customer_login form.register > p.kxp-reg-intro {
    max-width: none;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--kxp-step-0);
    color: var(--kxp-white);
}
#kxpMain #customer_login .woocommerce-privacy-policy-text p { margin-top: 1.25rem; }
#kxpMain #customer_login .woocommerce-privacy-policy-text a {
    color: var(--kxp-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#kxpMain #customer_login .woocommerce-form-register__submit { margin-top: 1.5rem; background: var(--kxp-accent); }
#kxpMain #customer_login .woocommerce-form-register__submit:hover { background: var(--kxp-white); color: var(--kxp-black); }

/* ── Registration: the campaign's own fields ────────────────────────────────
   The register form now asks for everything US Rules §5.1 requires, which is
   eight fields rather than one. WooCommerce lays its pairs out with floats
   (.form-row-first / .form-row-last at 47%); a grid is steadier here, so the
   floats are neutralised inside .kxp-reg-grid rather than fought with widths. */
.kxp-reg-intro {
    color: var(--kxp-grey-700);
    max-width: 58ch;
    margin-bottom: 1.6rem;
}
.kxp-reg-fields { margin-top: 1.4rem; }

.kxp-reg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}
@media (min-width: 560px) {
    .kxp-reg-grid { grid-template-columns: 1fr 1fr; }
}
.kxp-reg-grid .form-row-first,
.kxp-reg-grid .form-row-last {
    float: none;
    width: auto;
    margin-right: 0;
}

.kxp-reg-fields .form-row { margin-bottom: 1.1rem; }
.kxp-reg-fields label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--kxp-step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kxp-grey-700);
}
.kxp-reg-fields .required { color: var(--kxp-accent); text-decoration: none; }

.kxp-reg-fields input[type="text"],
.kxp-reg-fields input[type="date"],
.kxp-reg-fields select,
.kxp-reg-fields .select2-container .select2-selection {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--kxp-grey-300);
    background: var(--kxp-white);
    font: inherit;
    color: var(--kxp-black);
    border-radius: 0;
}
.kxp-reg-fields input:focus-visible,
.kxp-reg-fields select:focus-visible {
    outline: 2px solid var(--kxp-accent);
    outline-offset: 1px;
}

/* Woo renders it as <span class="description"> and hides it — on checkout it
   reveals descriptions on focus. Ours carries the 19+/21+ state minimums and
   has to be readable at rest, so this has to out-specify
   `.woocommerce form .form-row .woocommerce-input-wrapper .description`. */
.woocommerce form .kxp-reg-fields .form-row .woocommerce-input-wrapper .description {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--kxp-step--1);
    line-height: 1.5;
    color: var(--kxp-grey-500);
    text-transform: none;
    letter-spacing: 0;
    /* Woo skins this as a blue tooltip bubble with a pointer, which is for
       checkout's focus-reveal. Here it is a permanent hint, so it is stripped
       back to plain text. */
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.woocommerce form .kxp-reg-fields .form-row .woocommerce-input-wrapper .description::before,
.woocommerce form .kxp-reg-fields .form-row .woocommerce-input-wrapper .description::after {
    content: none;
    display: none;
}

/* State swaps between a <select> and a plain <input> as the country changes;
   both must look the same or the form visibly jolts. */
.kxp-reg-fields .woocommerce-input-wrapper { display: block; width: 100%; }