/**
 * Account CSS — Mi Cuenta styles (shadcn/ui aligned)
 *
 * Covers: navigation, dashboard, addresses, orders, notices, buttons.
 * All components use the global design-token system.
 *
 * @package ClimaZona
 * @version 4.0.0
 */

/* ========================================
   ACCOUNT NAVIGATION (shadcn Tabs inline)
   ======================================== */

.cz-account-nav {
    position: relative;
}

/* Desktop: inline tabs. The mobile trigger button is hidden. */
.cz-account-nav__trigger {
    display: none;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    padding: 0;
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.woocommerce-MyAccount-navigation ul li {
    display: inline-flex;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.woocommerce-MyAccount-navigation ul li a {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--muted-foreground, #71717a);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-base, 0.2s ease),
                border-color var(--transition-base, 0.2s ease);
}

.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--foreground, #09090b);
}

.woocommerce-MyAccount-navigation ul li a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset, 2px) var(--background, #fff),
                0 0 0 calc(var(--ring-offset, 2px) + 2px) var(--ring, #2563eb);
    border-radius: var(--border-radius-sm, 0.375rem);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    color: var(--foreground, #09090b);
    font-weight: var(--font-weight-semibold, 600);
    border-bottom-color: var(--foreground, #09090b);
}

/* Logout link — muted, right-aligned feel */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--muted-foreground, #71717a);
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--color-error, #ef4444);
}

/* ========================================
   SHARED COMPONENTS — NOTICES
   ======================================== */

.climazona-notice {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md, 0.5rem);
    border: 1px solid transparent;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
    margin-bottom: 1.5rem;
}

.climazona-notice p {
    margin: 0;
}

.climazona-notice--info {
    background-color: var(--color-info-light, #dbeafe);
    border-color: var(--color-info, #3b82f6);
    color: var(--foreground, #09090b);
}

.climazona-notice--subtle {
    background-color: var(--muted, #f4f4f5);
    border-color: var(--border-color, #e4e4e7);
    color: var(--muted-foreground, #71717a);
}

.climazona-notice--warning {
    background-color: var(--color-warning-light, #fef3c7);
    border-color: var(--color-warning, #f59e0b);
    color: var(--foreground, #09090b);
}

.climazona-notice--error {
    background-color: var(--color-error-light, #fee2e2);
    border-color: var(--color-error, #ef4444);
    color: var(--foreground, #09090b);
}

/* ========================================
   SHARED COMPONENTS — BUTTONS (shadcn Button)
   ======================================== */

.climazona-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-normal, 1.5);
    border-radius: var(--border-radius-sm, 0.375rem);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-base, 0.2s ease),
                border-color var(--transition-base, 0.2s ease),
                color var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}

.climazona-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset, 2px) var(--background, #fff),
                0 0 0 calc(var(--ring-offset, 2px) + 2px) var(--ring, #2563eb);
}

.climazona-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.climazona-btn--primary {
    background-color: var(--theme-primary, #2563eb);
    color: #fff;
    border-color: var(--theme-primary, #2563eb);
}

.climazona-btn--primary:hover:not(:disabled) {
    background-color: var(--theme-primary-dark, #1d4ed8);
    border-color: var(--theme-primary-dark, #1d4ed8);
}

.climazona-btn--outline {
    background-color: transparent;
    color: var(--foreground, #09090b);
    border-color: var(--border-color, #e4e4e7);
}

.climazona-btn--outline:hover:not(:disabled) {
    background-color: var(--accent, #f4f4f5);
}

.climazona-btn--ghost {
    background-color: transparent;
    color: var(--muted-foreground, #71717a);
    border-color: transparent;
}

.climazona-btn--ghost:hover:not(:disabled) {
    background-color: var(--accent, #f4f4f5);
    color: var(--foreground, #09090b);
}

.climazona-btn--danger {
    background-color: transparent;
    color: var(--color-error, #ef4444);
    border-color: transparent;
}

.climazona-btn--danger:hover:not(:disabled) {
    background-color: var(--color-error-light, #fee2e2);
    color: var(--color-error-foreground, #991b1b);
}

.climazona-btn--sm {
    height: 1.75rem;
    padding: 0.125rem 0.625rem;
    font-size: var(--font-size-xs, 0.75rem);
}

/* ========================================
   SHARED COMPONENTS — BADGE
   ======================================== */

.climazona-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.climazona-badge--primary {
    color: var(--theme-primary, #2563eb);
    background-color: var(--theme-primary-light, #dbeafe);
    border-color: var(--theme-primary-light, #dbeafe);
}

.climazona-badge--success {
    color: var(--color-success-foreground, #166534);
    background-color: var(--color-success-light, #dcfce7);
    border-color: var(--color-success-light, #dcfce7);
}

.climazona-badge--warning {
    color: var(--color-warning-foreground, #854d0e);
    background-color: var(--color-warning-light, #fef3c7);
    border-color: var(--color-warning-light, #fef3c7);
}

.climazona-badge--muted {
    color: var(--muted-foreground, #71717a);
    background-color: var(--muted, #f4f4f5);
    border-color: var(--border-color, #e4e4e7);
}

/* ========================================
   DASHBOARD
   ======================================== */

.climazona-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.climazona-dashboard__greeting {
    font-size: var(--font-size-lg, 1.25rem);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0;
}

.climazona-dashboard__unverified-badge {
    vertical-align: middle;
    margin-left: 0.5rem;
}

.climazona-dashboard__explore-btn {
    margin-left: 0.5rem;
}

.climazona-dashboard__verify {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.climazona-dashboard__verify-content {
    flex: 1;
    min-width: 0;
}

.climazona-dashboard__verify-hint {
    margin-top: 0.25rem;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--muted-foreground, #71717a);
}

/* ── Dashboard Card (shadcn Card) ── */

.climazona-dashboard__card {
    padding: 1.25rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--card, #fff);
}

.climazona-dashboard__card-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0 0 0.75rem;
    padding: 0;
    border: none;
}

/* ── Last Order ── */

.climazona-dashboard__order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.climazona-dashboard__order-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.climazona-dashboard__order-number {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
    font-size: var(--font-size-sm, 0.875rem);
}

.climazona-dashboard__order-meta {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
}

.climazona-dashboard__order-status {
    /* Reuses .climazona-badge--primary visually */
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-info, #3b82f6);
    background-color: var(--color-info-light, #dbeafe);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    width: fit-content;
}

.climazona-dashboard__order-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.climazona-dashboard__empty {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
    margin: 0;
}

/* ── Account Info ── */

.climazona-dashboard__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.climazona-dashboard__card-header .climazona-dashboard__card-title {
    margin-bottom: 0;
}

.climazona-dashboard__profile-hint {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--muted-foreground, #71717a);
}

.climazona-dashboard__account-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.climazona-dashboard__info-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
}

.climazona-dashboard__info-label {
    flex-shrink: 0;
    width: 5rem;
    color: var(--muted-foreground, #71717a);
    font-weight: var(--font-weight-medium, 500);
}

.climazona-dashboard__info-value {
    color: var(--foreground, #09090b);
}

/* ── Preferences Toggles ── */

.climazona-preferences {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.climazona-preference-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-sm, 0.375rem);
    transition: border-color var(--transition-base, 0.2s ease);
}

.climazona-preference-toggle:hover {
    border-color: var(--foreground, #09090b);
}

.climazona-preference-toggle input[type="checkbox"] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    accent-color: var(--theme-primary, #2563eb);
    cursor: pointer;
}

.climazona-preference-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.climazona-preference-toggle__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--foreground, #09090b);
}

.climazona-preference-toggle__desc {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--muted-foreground, #71717a);
}

.climazona-preferences__status {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.375rem 0.625rem;
    border-radius: var(--border-radius-sm, 0.375rem);
}

.climazona-preferences__status--ok {
    color: var(--color-success-foreground, #166534);
    background-color: var(--color-success-light, #dcfce7);
}

.climazona-preferences__status--error {
    color: var(--color-error-foreground, #991b1b);
    background-color: var(--color-error-light, #fee2e2);
}

/* Checkout/Thank-you verification banner with button layout */
.climazona-checkout-verify,
.climazona-thankyou-verify {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* ========================================
   ORDERS TABLE (WooCommerce default override)
   ======================================== */

.woocommerce-MyAccount-content .woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    overflow: hidden;
    font-size: var(--font-size-sm, 0.875rem);
}

.woocommerce-orders-table thead th {
    background-color: var(--muted, #f4f4f5);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: var(--font-weight-medium, 500);
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.woocommerce-orders-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
    color: var(--foreground, #09090b);
    vertical-align: middle;
}

.woocommerce-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-orders-table tbody tr {
    transition: background-color var(--transition-base, 0.2s ease);
}

.woocommerce-orders-table tbody tr:hover {
    background-color: var(--muted, #f4f4f5);
}

/* Order number link */
.woocommerce-orders-table__cell-order-number a {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
    text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
    color: var(--theme-primary, #2563eb);
}

/* Order date */
.woocommerce-orders-table__cell-order-date {
    color: var(--muted-foreground, #71717a);
}

/* Order status */
.woocommerce-orders-table__cell-order-status {
    font-weight: var(--font-weight-medium, 500);
}

/* Order total */
.woocommerce-orders-table__cell-order-total {
    font-weight: var(--font-weight-semibold, 600);
}

/* Order actions */
.woocommerce-orders-table__cell-order-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0.125rem 0.625rem;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--foreground, #09090b);
    background: transparent;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-sm, 0.375rem);
    text-decoration: none;
    transition: background-color var(--transition-base, 0.2s ease);
    margin-right: 0.25rem;
}

.woocommerce-orders-table__cell-order-actions a:hover {
    background-color: var(--accent, #f4f4f5);
}

.woocommerce-orders-table__cell-order-actions a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset, 2px) var(--background, #fff),
                0 0 0 calc(var(--ring-offset, 2px) + 2px) var(--ring, #2563eb);
}

/* Override WooCommerce default .button styles in orders table */
.woocommerce-orders-table__cell-order-actions a.button {
    background-color: transparent;
    color: var(--foreground, #09090b);
    border: 1px solid var(--border-color, #e4e4e7);
}

.woocommerce-orders-table__cell-order-actions a.button:hover {
    background-color: var(--accent, #f4f4f5);
    color: var(--foreground, #09090b);
}

/* No orders message */
.woocommerce-MyAccount-content .woocommerce-message--info,
.woocommerce-MyAccount-content .woocommerce-info {
    background-color: var(--muted, #f4f4f5);
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    color: var(--muted-foreground, #71717a);
    padding: 1.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    text-align: center;
}

.woocommerce-MyAccount-content .woocommerce-message--info::before,
.woocommerce-MyAccount-content .woocommerce-info::before {
    display: none;
}

.woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-info .button {
    margin-top: 0.75rem;
}

/* Pagination */
.woocommerce-MyAccount-content .woocommerce-pagination {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.woocommerce-MyAccount-content .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--muted-foreground, #71717a);
    text-decoration: none;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-sm, 0.375rem);
    transition: background-color var(--transition-base, 0.2s ease),
                color var(--transition-base, 0.2s ease);
}

.woocommerce-MyAccount-content .woocommerce-pagination .page-numbers:hover {
    background-color: var(--accent, #f4f4f5);
    color: var(--foreground, #09090b);
}

.woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.current {
    background-color: var(--foreground, #09090b);
    border-color: var(--foreground, #09090b);
    color: var(--background, #fff);
    pointer-events: none;
}

/* ========================================
   VIEW ORDER (order detail page)
   ======================================== */

.woocommerce-MyAccount-content h2 {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0 0 1rem;
    padding: 0;
    border: none;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    overflow: hidden;
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: 1.5rem;
}

.woocommerce-table--order-details thead th {
    background-color: var(--muted, #f4f4f5);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: var(--font-weight-medium, 500);
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
    color: var(--foreground, #09090b);
    vertical-align: middle;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th {
    font-weight: var(--font-weight-medium, 500);
    color: var(--muted-foreground, #71717a);
    text-align: left;
}

/* Product name link */
.woocommerce-table--order-details .product-name a {
    color: var(--foreground, #09090b);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
}

.woocommerce-table--order-details .product-name a:hover {
    color: var(--theme-primary, #2563eb);
}

/* Quantity */
.woocommerce-table--order-details .product-quantity {
    color: var(--muted-foreground, #71717a);
}

/* Order details heading row (date, status info) */
.woocommerce-order-details {
    margin-bottom: 2rem;
}

/* Customer details (billing/shipping) on order view */
.woocommerce-customer-details {
    margin-bottom: 2rem;
}

.woocommerce-customer-details address {
    font-style: normal;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    color: var(--foreground, #09090b);
    padding: 1rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--card, #fff);
}

.woocommerce-customer-details .woocommerce-column__title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0 0 0.5rem;
    padding: 0;
    border: none;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
    margin: 0.25rem 0 0;
    color: var(--muted-foreground, #71717a);
}

.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ========================================
   ADDRESS SECTIONS
   ======================================== */

.climazona-address-section {
    margin-bottom: 0;
}

.climazona-address-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.climazona-address-section__header h3 {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0;
    border: none;
    padding: 0;
}

.climazona-address-section__count {
    font-weight: var(--font-weight-normal, 400);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
}

/* ========================================
   ADDRESS IDENTITY (billing readonly info)
   ======================================== */

.climazona-address-identity {
    padding: 0.75rem 1rem;
    background-color: var(--muted, #f4f4f5);
    border-radius: var(--border-radius-md, 0.5rem);
    margin-bottom: 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
}

.climazona-address-identity__name {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
}

.climazona-address-identity__company {
    color: var(--foreground, #09090b);
}

.climazona-address-identity__email,
.climazona-address-identity__phone {
    color: var(--muted-foreground, #71717a);
}

.climazona-address-identity__hint {
    display: block;
    margin-top: 0.375rem;
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-xs, 0.75rem);
}

.climazona-address-identity__hint a {
    color: var(--foreground, #09090b);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-color, #e4e4e7);
    transition: text-decoration-color var(--transition-base, 0.2s ease);
}

.climazona-address-identity__hint a:hover {
    text-decoration-color: var(--foreground, #09090b);
}

/* ========================================
   ACCOUNT IDENTITY (Detalles de la cuenta)
   ======================================== */

.climazona-account-identity {
    padding: 0.75rem 1rem;
    background-color: var(--muted, #f4f4f5);
    border-radius: var(--border-radius-md, 0.5rem);
    margin-bottom: 1.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
}

.climazona-account-identity__name {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
}

.climazona-account-identity__email,
.climazona-account-identity__phone {
    color: var(--muted-foreground, #71717a);
}

.climazona-account-identity__hint {
    display: block;
    margin-top: 0.375rem;
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-xs, 0.75rem);
}

.climazona-account-identity__hint a {
    color: var(--foreground, #09090b);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-color, #e4e4e7);
    transition: text-decoration-color var(--transition-base, 0.2s ease);
}

.climazona-account-identity__hint a:hover {
    text-decoration-color: var(--foreground, #09090b);
}

/* ========================================
   ADDRESS CARD (billing/shipping view)
   ======================================== */

.climazona-address-card-display {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--card, #fff);
    margin-bottom: 1rem;
}

.climazona-address-card-display__content {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    color: var(--foreground, #09090b);
}

.climazona-address-card-display__empty {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
    margin: 0;
}

/* ========================================
   SHIPPING CARD LIST
   ======================================== */

.climazona-shipping-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.climazona-shipping-list__empty {
    text-align: center;
    padding: 2rem;
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-sm, 0.875rem);
}

.climazona-shipping-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--card, #fff);
    transition: border-color var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}

.climazona-shipping-card:hover {
    border-color: var(--foreground, #09090b);
}

.climazona-shipping-card__content {
    flex: 1;
    min-width: 0;
}

.climazona-shipping-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.climazona-shipping-card__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
}

.climazona-shipping-card__badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--theme-primary, #2563eb);
    background-color: var(--theme-primary-light, #dbeafe);
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
}

.climazona-shipping-card__recipient,
.climazona-shipping-card__address,
.climazona-shipping-card__country,
.climazona-shipping-card__phone {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
    line-height: 1.4;
}

.climazona-shipping-card__recipient {
    color: var(--foreground, #09090b);
    margin-bottom: 0.125rem;
}

.climazona-shipping-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.climazona-shipping-card--default {
    border-color: var(--foreground, #09090b);
}

.climazona-shipping-card__notes {
    font-size: var(--font-size-xs, 0.75rem);
    font-style: italic;
    color: var(--muted-foreground, #71717a);
    margin-top: 0.25rem;
}

/* ========================================
   ADDRESS FORM
   ======================================== */

.climazona-address-form {
    padding: 1.25rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--muted, #f4f4f5);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.climazona-address-form__title {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
    margin: 0 0 1rem;
    border: none;
    padding: 0;
}

.climazona-address-form__fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.climazona-form-row label {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--foreground, #09090b);
    margin-bottom: 0.375rem;
}

.climazona-form-row label .required {
    color: var(--color-error, #ef4444);
    font-weight: var(--font-weight-normal, 400);
}

.climazona-form-row input,
.climazona-form-row select,
.climazona-form-row textarea {
    display: block;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
    border: 1px solid var(--input, #e4e4e7);
    border-radius: var(--border-radius-sm, 0.375rem);
    background: var(--background, #fff);
    color: var(--foreground, #09090b);
    transition: border-color var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}

.climazona-form-row textarea {
    height: auto;
    min-height: 5rem;
}

.climazona-form-row input:focus,
.climazona-form-row select:focus,
.climazona-form-row textarea:focus {
    outline: none;
    border-color: var(--input-focus, var(--ring, #2563eb));
    box-shadow: 0 0 0 var(--ring-offset, 2px) var(--background, #fff),
                0 0 0 calc(var(--ring-offset, 2px) + 2px) var(--ring, #2563eb);
}

.climazona-form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.climazona-address-form__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.climazona-address-form__error {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--color-error-light, #fee2e2);
    border: 1px solid var(--color-error, #ef4444);
    border-radius: var(--border-radius-sm, 0.375rem);
    color: var(--color-error-foreground, #991b1b);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ========================================
   ADDRESSES (my-address.php OIDC)
   ======================================== */

.climazona-addresses {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.climazona-address-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.climazona-address-section__header h3 {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--foreground, #09090b);
}

.climazona-address-section__count {
    font-weight: var(--font-weight-normal, 400);
    color: var(--muted-foreground, #71717a);
    font-size: var(--font-size-sm, 0.875rem);
}

.climazona-addresses__empty {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--muted-foreground, #71717a);
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    border: 1px dashed var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
}

/* Address card (shared billing + shipping) */
.climazona-address-card {
    padding: 1rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: var(--border-radius-md, 0.5rem);
    background: var(--card, #fff);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    transition: border-color var(--transition-base, 0.2s ease),
                box-shadow var(--transition-base, 0.2s ease);
}

.climazona-address-card--default {
    border-color: var(--foreground, #09090b);
    box-shadow: 0 0 0 1px var(--foreground, #09090b);
}

.climazona-address-card__label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.climazona-address-card__label {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
}

.climazona-address-card__badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--foreground, #09090b);
    background-color: var(--muted, #f4f4f5);
    border: 1px solid var(--border-color, #e4e4e7);
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
}

.climazona-address-card__name {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--foreground, #09090b);
}

.climazona-address-card__detail {
    color: var(--muted-foreground, #71717a);
}

/* Shipping cards grid */
.climazona-shipping-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

/* ========================================
   CHECKOUT — VERIFICATION BANNER
   ======================================== */

.climazona-checkout-verify {
    margin-bottom: 1rem;
}

.climazona-checkout-verify__hint {
    margin-top: 0.25rem;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--muted-foreground, #71717a);
}

/* ========================================
   CHECKOUT — INVOICE FIELD
   ======================================== */

.climazona-invoice-field {
    margin-bottom: 1rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* ── Mobile: dropdown panel triggered by button ── */
@media (max-width: 768px) {
    /* Trigger button (1 row) */
    .cz-account-nav__trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        width: 100%;
        padding: 0.625rem 1rem;
        margin-bottom: 1.5rem;
        background: var(--card);
        color: var(--foreground);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        font-family: inherit;
        line-height: var(--line-height-snug);
        cursor: pointer;
        transition: border-color var(--transition-fast);
    }

    .cz-account-nav__trigger:hover {
        border-color: var(--input);
    }

    .cz-account-nav__trigger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 var(--ring-offset) var(--background),
                    0 0 0 calc(var(--ring-offset) + 2px) var(--ring);
    }

    .cz-account-nav__trigger-label {
        flex: 1;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cz-account-nav__trigger-icon {
        display: inline-flex;
        align-items: center;
        color: var(--muted-foreground);
        flex-shrink: 0;
        transition: transform var(--transition-fast);
    }

    .cz-account-nav__trigger[aria-expanded="true"] .cz-account-nav__trigger-icon {
        transform: rotate(180deg);
    }

    /* List → absolute dropdown panel anchored to .cz-account-nav (relative) */
    .woocommerce-MyAccount-navigation ul {
        position: absolute;
        top: calc(100% + 0.25rem);
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.25rem;
        max-height: min(70vh, 70dvh);
        overflow-y: auto;
        box-sizing: border-box;
        background: var(--card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity var(--transition-fast),
                    transform var(--transition-fast),
                    visibility 0s linear var(--transition-fast);
    }

    .cz-account-nav__trigger[aria-expanded="true"] ~ ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-fast),
                    transform var(--transition-fast),
                    visibility 0s linear 0s;
    }

    /* Items as full-width rows */
    .woocommerce-MyAccount-navigation ul li {
        display: block;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

    .woocommerce-MyAccount-navigation ul li a {
        display: block;
        padding: 0.75rem 0.75rem;
        background: transparent;
        color: var(--foreground);
        border: none;
        border-radius: var(--border-radius-sm);
        margin: 0;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-normal);
        white-space: normal;
        line-height: var(--line-height-snug);
    }

    .woocommerce-MyAccount-navigation ul li a:hover {
        background: var(--muted);
        color: var(--foreground);
    }

    .woocommerce-MyAccount-navigation ul li.is-active a {
        background: var(--muted);
        color: var(--foreground);
        font-weight: var(--font-weight-semibold);
        border: none;
    }

    /* Logout: divider above + danger hover */
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border-color-light);
    }

    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        color: var(--muted-foreground);
    }

    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
        background: var(--color-error-light);
        color: var(--color-error);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .woocommerce-MyAccount-navigation ul,
    .cz-account-nav__trigger-icon {
        transition: none;
    }
}

@media (max-width: 640px) {
    .climazona-dashboard__order {
        flex-direction: column;
        align-items: flex-start;
    }

    .climazona-dashboard__order-actions {
        width: 100%;
    }

    .climazona-dashboard__info-row {
        flex-direction: column;
        gap: 0;
    }

    .climazona-dashboard__info-label {
        width: auto;
    }

    .climazona-shipping-cards {
        grid-template-columns: 1fr;
    }

    .climazona-shipping-card {
        flex-direction: column;
    }

    .climazona-shipping-card__actions {
        flex-direction: row;
        width: 100%;
    }

    .climazona-form-row--half {
        grid-template-columns: 1fr;
    }

    .climazona-address-section__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }

    /* Orders table → card layout on mobile */
    .woocommerce-orders-table,
    .woocommerce-orders-table thead,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tfoot,
    .woocommerce-orders-table tr,
    .woocommerce-orders-table th,
    .woocommerce-orders-table td {
        display: block;
    }

    .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-orders-table tbody tr {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color, #e4e4e7);
    }

    .woocommerce-orders-table tbody tr:last-child {
        border-bottom: none;
    }

    .woocommerce-orders-table tbody td {
        padding: 0.125rem 0;
        border-bottom: none;
    }

    .woocommerce-orders-table tbody td::before {
        content: attr(data-title) ": ";
        font-weight: var(--font-weight-medium, 500);
        color: var(--muted-foreground, #71717a);
        display: inline;
    }

    .woocommerce-orders-table__cell-order-actions {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color, #e4e4e7);
    }

    .woocommerce-orders-table__cell-order-actions::before {
        display: none !important;
    }

    /* Order details table mobile */
    .woocommerce-table--order-details,
    .woocommerce-table--order-details thead,
    .woocommerce-table--order-details tbody,
    .woocommerce-table--order-details tfoot,
    .woocommerce-table--order-details tr,
    .woocommerce-table--order-details th,
    .woocommerce-table--order-details td {
        display: block;
    }

    .woocommerce-table--order-details thead {
        display: none;
    }

    .woocommerce-table--order-details tbody td {
        padding: 0.25rem 1rem;
        border-bottom: none;
    }

    .woocommerce-table--order-details tbody tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-color, #e4e4e7);
    }

    .woocommerce-table--order-details tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 0.375rem 1rem;
    }

    .woocommerce-table--order-details tfoot th,
    .woocommerce-table--order-details tfoot td {
        padding: 0;
        border-bottom: none;
    }
}

/* ============================================================
   ACCOUNT — v5.1 (live-fetch shell + hero + cards)
   ============================================================ */

.cz-account {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ── Hero ────────────────────────────────────────────────── */

.cz-account-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.cz-account-hero__greeting {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
    letter-spacing: var(--tracking-tight);
    line-height: var(--line-height-snug);
}

.cz-account-hero__hello {
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.cz-account-hero__name {
    font-weight: var(--font-weight-semibold);
}

/* ── Card grid ───────────────────────────────────────────── */

/* 1 col móvil → 2 cols tablet → 3 cols desktop (cap a 3) */
.cz-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .cz-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cz-account-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The last-order card spans the full row — primary content */
.cz-card--last-order {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .cz-account-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .cz-account-hero__greeting {
        font-size: var(--font-size-xl);
    }
}

.cz-address-summary__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.cz-address-summary__label[hidden] {
    display: none;
}

/* ── cz-card primitive ───────────────────────────────────── */

.cz-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast);
}

.cz-card:hover {
    border-color: var(--input);
}

.cz-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.cz-card__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
    letter-spacing: var(--tracking-tight);
}

.cz-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cz-card__body[hidden] {
    display: none;
}

.cz-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}

.cz-card__hint {
    margin: 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color-light);
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
}

.cz-card__empty {
    align-items: flex-start;
}

.cz-card__empty-text {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--font-size-sm);
}

/* ── Utility modifiers for specific cards ────────────────── */

.cz-card--profile {
    order: 3;
}

/* ── Info list (key/value pairs) ─────────────────────────── */

.cz-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
}

.cz-info-list__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--spacing-md);
    align-items: baseline;
    font-size: var(--font-size-sm);
}

.cz-info-list__row[hidden] {
    display: none;
}

.cz-info-list__label {
    margin: 0;
    color: var(--muted-foreground);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cz-info-list__value {
    margin: 0;
    color: var(--foreground);
    word-break: break-word;
}

.cz-info-list__lock {
    display: inline-flex;
    align-items: center;
    color: var(--muted-foreground);
    cursor: help;
}

@media (max-width: 480px) {
    .cz-info-list__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Order summary in last-order card ───────────────────── */

.cz-order-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.cz-order-summary__main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cz-order-summary__number {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
}

.cz-order-summary__meta {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
}

.cz-order-summary__sep {
    margin: 0 0.25rem;
    opacity: 0.6;
}

/* ── Address summary in billing-summary card ─────────────── */

.cz-address-summary {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: var(--font-size-sm);
    color: var(--foreground);
    font-style: normal;
    line-height: var(--line-height-snug);
}

.cz-address-summary__name {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.125rem;
}

/* ── Status badge (order status) ─────────────────────────── */

.cz-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: var(--muted);
    color: var(--muted-foreground);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
}

.cz-status-badge--processing,
.cz-status-badge--on-hold {
    background: var(--color-info-light);
    color: var(--foreground);
    border-color: var(--color-info);
}

.cz-status-badge--completed {
    background: var(--color-success-light);
    color: var(--color-success-foreground);
    border-color: var(--color-success);
}

.cz-status-badge--pending {
    background: var(--color-warning-light);
    color: var(--color-warning-foreground);
    border-color: var(--color-warning);
}

.cz-status-badge--cancelled,
.cz-status-badge--failed,
.cz-status-badge--refunded {
    background: var(--color-error-light);
    color: var(--color-error-foreground);
    border-color: var(--color-error);
}

/* ── Subtle diff animation when JS hydrates a new value ── */

.cz-bind--changed {
    animation: cz-bind-flash 0.4s ease;
}

@keyframes cz-bind-flash {
    0%   { background: var(--color-info-light); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .cz-bind--changed {
        animation: none;
    }
}

/* ============================================================
   ADDRESSES — v5.1 (live-fetch + drawer + optimistic)
   ============================================================ */

.cz-address-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.cz-address-section + .cz-address-section {
    margin-top: var(--spacing-xl);
}

.cz-address-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.cz-address-section__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
    letter-spacing: var(--tracking-tight);
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.cz-address-section__count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--muted-foreground);
}

.cz-address-section__count[hidden] {
    display: none;
}

/* ── Billing card ────────────────────────────────────────── */

.cz-billing-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast);
}

.cz-billing-card:hover {
    border-color: var(--input);
}

.cz-billing-card[hidden] {
    display: none;
}

.cz-billing-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    color: var(--foreground);
}

.cz-billing-card__name {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
}

.cz-billing-card__detail {
    color: var(--foreground);
}

.cz-billing-card__detail[hidden] {
    display: none;
}

.cz-billing-card__actions {
    flex-shrink: 0;
}

/* ── Shipping cards grid ─────────────────────────────────── */

.cz-shipping-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* When the only child is the empty-state, span the full row */
.cz-shipping-cards > .cz-empty-state {
    grid-column: 1 / -1;
}

.cz-shipping-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast),
                opacity var(--transition-fast);
}

.cz-shipping-card:hover {
    border-color: var(--input);
}

.cz-shipping-card--default {
    border-color: var(--theme-primary, var(--ring));
    border-width: 1px;
    box-shadow: 0 0 0 1px var(--theme-primary, var(--ring));
}

.cz-shipping-card--pending {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.cz-shipping-card--pending::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--background);
    opacity: 0.3;
    pointer-events: none;
}

.cz-shipping-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    min-height: 1.5rem;
}

.cz-shipping-card__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
}

.cz-shipping-card__label[hidden] {
    display: none;
}

.cz-shipping-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--theme-primary-light, var(--color-info-light));
    color: var(--theme-primary-dark, var(--color-info-foreground, var(--foreground)));
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.cz-shipping-card__badge[hidden] {
    display: none;
}

.cz-shipping-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: var(--font-size-sm);
    color: var(--foreground);
    line-height: var(--line-height-snug);
}

.cz-shipping-card__body > div[hidden] {
    display: none;
}

.cz-shipping-card__recipient {
    font-weight: var(--font-weight-medium);
}

.cz-shipping-card__phone,
.cz-shipping-card__notes {
    margin-top: var(--spacing-xs);
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
}

.cz-shipping-card__notes {
    font-style: italic;
}

.cz-shipping-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color-light);
}

/* ── Empty state ─────────────────────────────────────────── */

.cz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-2xl) var(--spacing-md);
    background: var(--muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    text-align: center;
}

.cz-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--card);
    color: var(--muted-foreground);
    border-radius: var(--border-radius-full);
    margin-bottom: var(--spacing-xs);
}

.cz-empty-state__text {
    margin: 0;
    color: var(--foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.cz-empty-state__sub {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
}

/* ============================================================
   ADDRESS FORM (inside drawer)
   ============================================================ */

.cz-address-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.cz-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cz-form-row[hidden],
.cz-form-row__field[hidden] {
    display: none;
}

.cz-form-row label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
}

.cz-form-row input[type="text"],
.cz-form-row input[type="tel"],
.cz-form-row input[type="email"],
.cz-form-row select,
.cz-form-row textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: var(--line-height-snug);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.cz-form-row textarea {
    resize: vertical;
    min-height: 4rem;
}

.cz-form-row input:focus-visible,
.cz-form-row select:focus-visible,
.cz-form-row textarea:focus-visible {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.2);
}

.cz-form-row input.is-invalid,
.cz-form-row select.is-invalid,
.cz-form-row textarea.is-invalid {
    border-color: var(--color-error);
}

.cz-form-row input.is-invalid:focus-visible,
.cz-form-row select.is-invalid:focus-visible,
.cz-form-row textarea.is-invalid:focus-visible {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.cz-form-row__hint {
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
}

.cz-form-row--half {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.cz-form-row--half .cz-form-row__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

@media (max-width: 480px) {
    .cz-form-row--half {
        grid-template-columns: 1fr;
    }
}

.cz-required {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    margin-left: 0.125rem;
}

.cz-form-error {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-light);
    color: var(--color-error-foreground);
    border: 1px solid var(--color-error);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
}

.cz-form-error[hidden] {
    display: none;
}

/* ============================================================
   ORDERS — v5.1 (cards + filter tabs + pagination)
   ============================================================ */

.cz-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.25rem;
    background: var(--muted);
    border-radius: var(--border-radius-md);
}

.cz-tab {
    padding: 0.375rem 0.875rem;
    background: transparent;
    color: var(--muted-foreground);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast),
                color var(--transition-fast);
}

.cz-tab:hover {
    color: var(--foreground);
}

.cz-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset) var(--background),
                0 0 0 calc(var(--ring-offset) + 2px) var(--ring);
}

.cz-tab.is-active {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
}

.cz-orders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.cz-order-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast);
}

.cz-order-card[hidden] {
    display: none;
}

.cz-order-card:hover {
    border-color: var(--input);
}

.cz-order-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.cz-order-card__heading {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cz-order-card__number {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
}

.cz-order-card__date {
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
}

.cz-order-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color-light);
    font-size: var(--font-size-sm);
}

.cz-order-card__items {
    color: var(--muted-foreground);
}

.cz-order-card__total {
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
}

.cz-order-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cz-orders-empty-filter {
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    text-align: center;
    color: var(--muted-foreground);
}

.cz-orders-empty-filter[hidden] {
    display: none;
}

/* ── Pagination ──────────────────────────────────────────── */

.cz-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.cz-pagination__link {
    color: var(--foreground);
    text-decoration: none;
    padding: 0.375rem 0.625rem;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}

.cz-pagination__link:hover {
    background: var(--muted);
}

.cz-pagination__link.is-disabled {
    color: var(--muted-foreground);
    pointer-events: none;
    opacity: 0.5;
}

.cz-pagination__link--next {
    margin-left: auto;
}

.cz-pagination__page {
    color: var(--muted-foreground);
    font-size: var(--font-size-xs);
}

@media (max-width: 480px) {
    .cz-pagination__page {
        display: none;
    }
}