/**
 * WooCommerce Base Styles
 *
 * General WooCommerce styles, messages, empty state, and section headers
 *
 * @package BadassNetwork
 */

/* ==========================================================================
   GENERAL WOOCOMMERCE
   ========================================================================== */

.woocommerce-page .page-title {
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: var(--space-4xl);
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    box-shadow: var(--shadow);
}

.woocommerce-message {
    border-left: 6px solid var(--color-mint);
}

.woocommerce-info {
    border-left: 6px solid var(--color-electric);
}

.woocommerce-error {
    border-left: 6px solid var(--color-hot);
    list-style: none;
    margin: 0 0 var(--space-2xl);
    padding: var(--space-xl);
}

.woocommerce-error li {
    margin: 0;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow);
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.empty-text {
    color: var(--color-text-soft);
    margin-bottom: 24px;
}

/* ==========================================================================
   ACCOUNT SECTION HEADER
   ========================================================================== */

.account-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
}

.account-section-title {
    font-size: var(--text-xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0;
}