/*
 * WooCommerce My Account theming — keeps WC's default markup (navigation +
 * content via [woocommerce_my_account]) and themes it to match the V2
 * mockup-account aesthetic without going down the template-override path
 * (template overrides drift on WC updates; CSS doesn't).
 *
 * Reskins:
 *   .woocommerce-MyAccount-navigation        → .acc-side (sticky on desktop)
 *   .woocommerce-MyAccount-content           → .acc-content
 *   tables (orders, downloads, addresses)    → .order-list style
 *   forms (login, register, account-details) → card layout
 */

.woocommerce-account .rm-page-banner h1 { font-size: 1.6rem; }

.woocommerce-account .woocommerce {
    max-width: var(--rm-container-max);
    margin: 0 auto;
    padding: var(--rm-sp-5) var(--rm-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--rm-sp-4);
}

/* ---- Sidebar nav ---------------------------------------------------- */
.woocommerce-MyAccount-navigation {
    background: var(--rm-white);
    border: 1px solid var(--rm-border);
    border-radius: var(--radius-sm);
    padding: var(--rm-sp-3);
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.woocommerce-MyAccount-navigation-link {
    flex: 1 1 auto;
}
.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 10px 14px;
    font-family: var(--rm-font-h);
    font-weight: 600;
    font-size: var(--rm-fs-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rm-charcoal);
    border-radius: var(--radius-sm);
    text-align: center;
    min-height: var(--tap);
    line-height: 1.6;
}
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link--is-active a {
    background: var(--rm-red);
    color: var(--rm-white);
}
.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--rm-light-gray);
}

/* ---- Content card --------------------------------------------------- */
.woocommerce-MyAccount-content {
    background: var(--rm-white);
    border: 1px solid var(--rm-border);
    border-radius: var(--radius-sm);
    padding: var(--rm-sp-5) var(--rm-sp-4);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--rm-font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: var(--rm-sp-2);
    border-bottom: 2px solid var(--rm-red);
    margin: 0 0 var(--rm-sp-4);
    font-size: 1.1rem;
}

/* ---- Order table reskin (rows instead of dense table at mobile) ---- */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--rm-sp-4);
}
.woocommerce-orders-table thead { display: none; } /* mobile-first; row labels via td */
.woocommerce-orders-table tbody tr {
    display: block;
    border: 1px solid var(--rm-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--rm-sp-3);
    padding: var(--rm-sp-3);
}
.woocommerce-orders-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--rm-border);
    font-size: var(--rm-fs-sm);
}
.woocommerce-orders-table tbody td:last-child { border-bottom: none; }
.woocommerce-orders-table tbody td::before {
    content: attr(data-title);
    font-family: var(--rm-font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--rm-fs-xs);
    color: var(--rm-mid-gray);
    flex-shrink: 0;
    margin-right: var(--rm-sp-3);
}
.woocommerce-orders-table .order-actions a,
.woocommerce-orders-table .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rm-red);
    color: var(--rm-white);
    padding: 8px 14px;
    font-family: var(--rm-font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--rm-fs-xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    min-height: 38px;
    border: none;
}

/* ---- Forms (login, register, account-details, address-edit) -------- */
.woocommerce-form-row,
.form-row,
.woocommerce form .form-row {
    margin-bottom: var(--rm-sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.woocommerce label,
.woocommerce form .form-row label {
    font-family: var(--rm-font-h);
    font-weight: 600;
    font-size: var(--rm-fs-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rm-charcoal);
}
.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=password],
.woocommerce input[type=tel],
.woocommerce input[type=number],
.woocommerce select,
.woocommerce textarea {
    width: 100%;
    border: 1px solid var(--rm-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--rm-fs-md);
    background: var(--rm-white);
    color: var(--rm-charcoal);
    min-height: var(--tap);
    font-family: var(--rm-font-b);
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
    outline: 2px solid var(--rm-red);
    outline-offset: -2px;
}
.woocommerce .button,
.woocommerce button.button {
    background: var(--rm-red);
    color: var(--rm-white);
    border: none;
    padding: 12px 22px;
    font-family: var(--rm-font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: var(--radius-sm);
    font-size: var(--rm-fs-md);
    min-height: var(--tap);
    cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce button.button:hover { background: var(--rm-red-dark); }
.woocommerce .button.alt,
.woocommerce button.alt { background: var(--rm-charcoal); }

/* ---- Login + lost-password forms ----------------------------------- */
.woocommerce-form-login {
    max-width: 480px;
    margin: 0 auto;
}
.woocommerce-form-login__rememberme {
    font-family: var(--rm-font-b);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.woocommerce-LostPassword {
    margin-top: var(--rm-sp-3);
    font-size: var(--rm-fs-sm);
    color: var(--rm-mid-gray);
}
.woocommerce-LostPassword a { color: var(--rm-red); }

/* ---- Notices ------------------------------------------------------- */
.woocommerce-notices-wrapper > * + * { margin-top: var(--rm-sp-2); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    list-style: none;
    margin: 0 0 var(--rm-sp-3);
    font-size: var(--rm-fs-sm);
    border-left: 4px solid var(--rm-red);
}
.woocommerce-message { background: #ecfdf5; border-left-color: #15803d; color: #065f46; }
.woocommerce-info    { background: var(--rm-light-gray); border-left-color: var(--rm-accent); color: var(--rm-charcoal); }
.woocommerce-error   { background: #fee2e2; border-left-color: #b91c1c; color: #7f1d1d; }

/* ---- Addresses block --------------------------------------------- */
.woocommerce-Addresses,
.u-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rm-sp-4);
}
.woocommerce-Address {
    background: var(--rm-white);
    border: 1px solid var(--rm-border);
    border-radius: var(--radius-sm);
    padding: var(--rm-sp-4);
}
.woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--rm-sp-3);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1rem;
}
.woocommerce-Address-title .edit {
    color: var(--rm-red);
    font-family: var(--rm-font-h);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--rm-fs-xs);
}

/* ---- Tablet (>=720px) ---------------------------------------------- */
@media (min-width: 720px) {
    .woocommerce-orders-table thead { display: table-header-group; }
    .woocommerce-orders-table tbody tr {
        display: table-row;
        padding: 0;
        margin: 0;
        border: none;
        border-bottom: 1px solid var(--rm-border);
    }
    .woocommerce-orders-table tbody td {
        display: table-cell;
        padding: 12px 8px;
        border: none;
    }
    .woocommerce-orders-table tbody td::before { display: none; }
    .woocommerce-orders-table th {
        font-family: var(--rm-font-h);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: var(--rm-fs-xs);
        text-align: left;
        padding: 12px 8px;
        border-bottom: 2px solid var(--rm-red);
    }
    .woocommerce-Addresses,
    .u-columns { grid-template-columns: 1fr 1fr; }
}

/* ---- Desktop (>=900px) — two-column with sticky nav ----------------
 * Selector escalates to body.woocommerce-account + !important to win
 * over WC core's own woocommerce.css which ships float-based layout on
 * the same .woocommerce wrapper (loads after our theme CSS).
 *
 * Critical: WC core also applies float:left/right on the nav/content
 * pair. Those floats take items out of normal flow and collapse them
 * to content-width inside a grid container — must explicitly clear. */
@media (min-width: 900px) {
    body.woocommerce-account .woocommerce {
        display: grid !important;
        grid-template-columns: 240px 1fr !important;
        gap: var(--rm-sp-5) !important;
        padding: var(--rm-sp-6) var(--rm-sp-5) !important;
        align-items: start;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
    /* Explicit grid placement — pin nav to col-1, content to col-2.
     * Without these, DOM-order auto-flow somehow renders them reversed,
     * even with floats cleared. Belt-and-braces forces the right layout. */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        grid-column: 1 / 2 !important;
        position: sticky;
        top: 90px;
        align-self: start;
    }
    body.woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 2 / 3 !important;
    }
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
        gap: 2px;
    }
    .woocommerce-MyAccount-navigation-link a { text-align: left; }
    .woocommerce-MyAccount-content {
        padding: var(--rm-sp-5);
        min-width: 0; /* prevents long-table content from blowing out the grid track */
    }
}