/* =============================================
   4B PLUS - ACCOUNT PAGE STYLES
   My Account dashboard, orders, addresses, wishlist
   ============================================= */

/* =============================================
   GUEST LOGIN WRAPPER
   ============================================= */

/* Center the login/register form for logged-out visitors */
.fourbplus-page-wrapper--account-login .fourbplus-page-layout {
  padding-top: 0;
}

.fourbplus-page-wrapper--account-login .fourbplus-login-wrapper {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 40px;
  box-sizing: border-box;
}

.fourbplus-page-wrapper--account-login .fourbplus-account-form {
  max-width: none;
}

/* Auth card fills the login wrapper width.
   Lost/reset password pages reuse this class — width is controlled by .fourbplus-login-wrapper. */
.fourbplus-auth-card {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Descriptive note above the form */
.fourbplus-auth-note {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
  line-height: 1.6;
  margin: 0 0 8px;
}

/* Auth tab switcher (Sign In / Sign Up) */
.fourbplus-auth-tabs {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
  margin: 0 0 24px;
  padding: 0;
}

.fourbplus-auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 16px 20px;
  font-family: var(--fourbplus-font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  cursor: pointer;
  text-align: center;
  transition: color var(--fourbplus-transition-fast), border-color var(--fourbplus-transition-fast);
}

.fourbplus-auth-tab:hover {
  color: var(--fourbplus-text-dark);
}

.fourbplus-auth-tab--active {
  color: var(--fourbplus-color-primary);
  border-bottom-color: var(--fourbplus-color-primary);
}

.fourbplus-page-wrapper--account-login .fourbplus-auth-card *,
.fourbplus-page-wrapper--account-login .fourbplus-auth-card *::before,
.fourbplus-page-wrapper--account-login .fourbplus-auth-card *::after {
  box-sizing: border-box;
}

/* Auth panels — only active is visible */
.fourbplus-auth-panel {
  display: none;
}

.fourbplus-auth-panel--active {
  display: block;
}

/* Remember me + lost password row */
.fourbplus-login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 16px;
  gap: 12px;
}

.fourbplus-remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-dark);
  cursor: pointer;
}

.fourbplus-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--fourbplus-color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.fourbplus-lost-password {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.fourbplus-lost-password:hover {
  color: var(--fourbplus-color-primary);
}

/* "Password will be emailed" note */
.fourbplus-register-note {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .fourbplus-page-wrapper--account-login .fourbplus-login-wrapper {
    max-width: 100%;
    padding: 12px 0 24px;
  }

  .fourbplus-page-wrapper--account-login .fourbplus-auth-card {
    padding: 16px;
  }

  .fourbplus-page-wrapper--account-login .fourbplus-auth-tabs {
    margin: 0 0 16px;
    padding: 0;
  }

  .fourbplus-page-wrapper--account-login .fourbplus-auth-tab {
    padding: 12px 10px;
    font-size: 18px;
    line-height: 1.1;
  }

  .fourbplus-page-wrapper--account-login .fourbplus-login-footer {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
  }

  .fourbplus-page-wrapper--account-login .fourbplus-lost-password {
    margin-left: auto;
    white-space: normal;
    text-align: right;
  }

  .fourbplus-login-grid--two-col {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   ACCOUNT PAGE HEADER
   ============================================= */

.fourbplus-account-page {
  background: var(--fourbplus-cream);
}

.fourbplus-account-header {
  background: var(--fourbplus-crimson);
  padding: 32px 0 28px;
  margin-bottom: 32px;
}

.fourbplus-account-header-inner {
  max-width: var(--fourbplus-container-width);
  margin: 0 auto;
  padding: 0 var(--fourbplus-gutter);
}

.fourbplus-account-breadcrumb {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.fourbplus-account-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.fourbplus-account-breadcrumb a:hover {
  color: var(--fourbplus-secondary);
}

.fourbplus-account-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.fourbplus-account-avatar {
  width: 52px;
  height: 52px;
  background: var(--fourbplus-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--fourbplus-crimson);
  font-family: var(--fourbplus-font-body);
}

.fourbplus-account-title-info {
  flex: 1;
}

.fourbplus-account-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 42px;
  font-weight: 700;
  color: var(--fourbplus-white);
  margin-bottom: 4px;
}

.fourbplus-account-subtitle {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.fourbplus-member-badge {
  display: inline-block;
  background: rgba(201, 162, 39, 0.2);
  color: var(--fourbplus-secondary);
  padding: 4px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  margin-top: 8px;
}

/* =============================================
   ACCOUNT LAYOUT
   ============================================= */

.fourbplus-account-layout {
  max-width: var(--fourbplus-container-width);
  margin: 0 auto;
  padding: 32px var(--fourbplus-gutter) var(--fourbplus-section-padding);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}

/* =============================================
   ACCOUNT SIDEBAR NAVIGATION (Figma: 52-215)
   ============================================= */

.fourbplus-nav-menu {
  list-style: none;
  padding: 8px;
  margin: 0;
  background: var(--fourbplus-white);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fourbplus-nav-menu li {
  margin: 0;
}

.fourbplus-nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fourbplus-color-on-secondary);
  background: transparent;
  text-decoration: none;
  border-radius: 4px;
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.fourbplus-nav-icon i {
  font-size: 14px;
  width: 14px;
  text-align: center;
  color: inherit;
}

.fourbplus-nav-label {
  flex: 1;
}

.fourbplus-nav-item a:hover {
  background: var(--fourbplus-cream);
  color: var(--fourbplus-primary-light);
}

.fourbplus-nav-item.active a {
  background: var(--fourbplus-primary-light);
  color: var(--fourbplus-white);
  font-weight: 700;
}

.fourbplus-nav-logout {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  padding-top: 4px;
}

.fourbplus-nav-logout a {
  color: var(--fourbplus-crimson-light);
  font-size: 13px;
}

.fourbplus-nav-logout a:hover {
  background: var(--fourbplus-cream);
  color: var(--fourbplus-crimson-light);
}

/* =============================================
   ACCOUNT CONTENT AREA
   ============================================= */

.fourbplus-account-content {
  min-width: 0;
}

.fourbplus-content-card {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 24px;
  box-shadow: var(--fourbplus-shadow-sm);
}

.fourbplus-content-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 24px;
  color: var(--fourbplus-crimson);
  margin-bottom: 24px;
}

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

.fourbplus-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.fourbplus-stat-card {
  background: var(--fourbplus-white);
  border-radius: 6px;
  padding: 20px;
  box-shadow: var(--fourbplus-shadow-sm);
  text-align: center;
}

.fourbplus-stat-icon {
  color: var(--fourbplus-secondary);
  margin-bottom: 8px;
}

.fourbplus-stat-icon svg {
  width: 24px;
  height: 24px;
}

.fourbplus-stat-value {
  font-family: var(--fourbplus-font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--fourbplus-color-on-secondary);
  line-height: 1;
}

.fourbplus-stat-label {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fourbplus-text-dark);
  margin-top: 4px;
}

.fourbplus-stat-sub {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  color: var(--fourbplus-text-muted);
  margin-top: 2px;
}

/* =============================================
   DASHBOARD (Figma: 52-214)
   ============================================= */

.fourbplus-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stat cards: remove bottom margin inside dashboard (gap handles spacing) */
.fourbplus-dashboard .fourbplus-stats-grid {
  margin-bottom: 0;
}

/* White content card */
.fourbplus-dash-card {
  background: var(--fourbplus-white);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card header: title + optional "View all" link */
.fourbplus-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Section title (Cormorant Garamond, 26px, dark crimson) */
.fourbplus-dash-section-title {
  font-family: var(--fourbplus-font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--fourbplus-color-on-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Item count badge in card header */
.fourbplus-dash-count {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
}

/* "View all →" link in gold */
.fourbplus-dash-view-all {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fourbplus-primary-light);
  text-decoration: none;
  white-space: nowrap;
}

.fourbplus-dash-view-all:hover {
  color: var(--fourbplus-color-primary);
}

/* ---- Orders Table ---- */
.fourbplus-dash-table {
  width: 100%;
  border-collapse: collapse;
}

.fourbplus-dash-table thead th {
  text-align: left;
  font-family: var(--fourbplus-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 12px;
  border-bottom: 2px solid #f0f0f0;
}

.fourbplus-dash-table tbody tr {
  border-bottom: 1px solid #f8f8f8;
}

.fourbplus-dash-table tbody td {
  padding: 19px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  vertical-align: middle;
}

/* Order ID — crimson bold link */
.fourbplus-dash-order-id {
  font-weight: 700;
  color: var(--fourbplus-color-on-secondary);
}

.fourbplus-dash-order-id a {
  color: inherit;
  text-decoration: none;
}

.fourbplus-dash-order-id a:hover {
  color: var(--fourbplus-primary-light);
}

/* Bold cell (total) */
.fourbplus-dash-cell--bold {
  font-weight: 700;
}

/* Status text (no badge — just colored text) */
.fourbplus-dash-status {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
}

.fourbplus-dash-status--completed,
.fourbplus-dash-status--delivered {
  color: #036819;
}

.fourbplus-dash-status--processing {
  color: var(--fourbplus-secondary);
}

.fourbplus-dash-status--on-hold {
  color: #777;
}

.fourbplus-dash-status--pending,
.fourbplus-dash-status--pending-payment {
  color: #b45309;
}

.fourbplus-dash-status--cancelled,
.fourbplus-dash-status--refunded,
.fourbplus-dash-status--failed {
  color: #c0392b;
}

/* "View" button */
.fourbplus-dash-btn {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: all var(--fourbplus-transition-fast);
  white-space: nowrap;
}

.fourbplus-dash-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

/* Empty state */
.fourbplus-dash-empty {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
  margin: 0;
}

.fourbplus-dash-empty a {
  color: var(--fourbplus-crimson);
  text-decoration: none;
}

/* Pagination */
.fourbplus-dash-pagination {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.fourbplus-dash-page-btn {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 7px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-dash-page-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

/* =============================================
   ADDRESSES (Figma: 65-705)
   ============================================= */

/* "+ Add Address" button */
.fourbplus-addr-add-btn {
  display: inline-block;
  background: #4c0005;
  color: var(--fourbplus-white);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--fourbplus-transition-fast);
  white-space: nowrap;
}

.fourbplus-addr-add-btn:hover {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
}

/* 2-column address card grid */
.fourbplus-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Address card */
.fourbplus-addr-card {
  position: relative;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Default card — crimson border */
.fourbplus-addr-card--default {
  border-color: #4c0005;
}

/* "Default" badge — top-right */
.fourbplus-addr-default-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #4c0005;
  color: var(--fourbplus-white);
  font-family: var(--fourbplus-font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 15px;
}

/* Address type label (BILLING / SHIPPING) */
.fourbplus-addr-type {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fourbplus-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

/* Customer name */
.fourbplus-addr-name {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
}

/* Address text line */
.fourbplus-addr-text {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  flex: 1;
}

.fourbplus-addr-empty {
  font-style: italic;
}

/* Action buttons row */
.fourbplus-addr-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

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

@media (max-width: 767px) {
  .fourbplus-addr-grid {
    grid-template-columns: 1fr;
  }

  .fourbplus-addr-form-fields {
    grid-template-columns: 1fr;
  }

  .fourbplus-form-field--wide {
    grid-column: span 1;
  }
}

/* ---- Recommended Products Grid ---- */
.fourbplus-dash-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fourbplus-dash-product {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

.fourbplus-dash-product-img {
  height: 100px;
  background: var(--fourbplus-cream);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}

.fourbplus-dash-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fourbplus-dash-product-name {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #0a0a0a;
  margin-bottom: 4px;
  line-height: 1.4;
}

.fourbplus-dash-product-price {
  font-family: var(--fourbplus-font-body);
  font-size: 15px;
  font-weight: 800;
  color: #4c0005;
}

.fourbplus-dash-product-price .woocommerce-Price-amount {
  color: inherit;
  font-weight: inherit;
}

/* ---- Stat card small unit text ---- */
.fourbplus-stat-value small {
  font-size: 18px;
  font-weight: 500;
}

/* ---- Responsive Dashboard ---- */
@media (max-width: 767px) {
  .fourbplus-dash-card {
    padding: 16px;
  }

  .fourbplus-dash-products {
    grid-template-columns: repeat(2, 1fr);
  }

  .fourbplus-dash-table {
    display: block;
    overflow-x: auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fourbplus-dash-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   ORDERS TABLE
   ============================================= */

.fourbplus-orders-section {
  margin-top: 32px;
}

.fourbplus-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.fourbplus-orders-th {
  text-align: left;
  font-family: var(--fourbplus-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.fourbplus-orders-td {
  padding: 14px 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.fourbplus-order-id {
  font-weight: 700;
  color: var(--fourbplus-crimson);
}

.fourbplus-order-id a {
  color: inherit;
  text-decoration: none;
}

.fourbplus-order-id a:hover {
  color: var(--fourbplus-secondary);
}

/* Status Badges */
.fourbplus-status-badge {
  display: inline-block;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.fourbplus-status-delivered {
  color: oklch(45% 0.14 145);
  background: oklch(45% 0.14 145 / 15);
}

.fourbplus-status-processing {
  color: var(--fourbplus-secondary);
  background: rgba(201, 162, 39, 0.15);
}

.fourbplus-status-pending {
  color: oklch(55% 0.22 25);
  background: oklch(55% 0.22 25 / 15);
}

.fourbplus-status-completed {
  color: oklch(45% 0.14 145);
  background: oklch(45% 0.14 145 / 15);
}

.fourbplus-view-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 6px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  cursor: pointer;
  color: var(--fourbplus-text-dark);
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-view-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

/* =============================================
   ADDRESSES SECTION
   ============================================= */

.fourbplus-address-section {
  margin-bottom: 32px;
}

.fourbplus-address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.fourbplus-add-address-btn {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border: none;
  border-radius: var(--fourbplus-btn-radius);
  padding: 10px 20px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--fourbplus-transition-fast);
}

.fourbplus-add-address-btn:hover {
  background: var(--fourbplus-crimson-light);
}

.fourbplus-address-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.fourbplus-address-card {
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 20px;
  position: relative;
}

.fourbplus-address-card.default {
  border-color: var(--fourbplus-crimson);
}

.fourbplus-default-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  font-family: var(--fourbplus-font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}

.fourbplus-address-type {
  font-family: var(--fourbplus-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--fourbplus-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.fourbplus-address-name {
  font-family: var(--fourbplus-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--fourbplus-text-dark);
  margin-bottom: 8px;
}

.fourbplus-address-text {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.fourbplus-address-actions {
  display: flex;
  gap: 8px;
}

.fourbplus-small-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--fourbplus-btn-radius);
  padding: 6px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  cursor: pointer;
  color: var(--fourbplus-text-dark);
  transition: all var(--fourbplus-transition-fast);
}

.fourbplus-small-btn:hover {
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-crimson);
}

.fourbplus-small-btn.primary {
  background: var(--fourbplus-crimson);
  border-color: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
}

.fourbplus-small-btn.primary:hover {
  background: var(--fourbplus-crimson-light);
}

/* =============================================
   SHARED PRODUCT GRID — used by wishlist & dashboard recommended
   ============================================= */

/* 4-column product card grid */
.fourbplus-product-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Card-level overrides inside .fourbplus-product-grid--4 (dashboard + wishlist contexts) */
.fourbplus-product-grid--4 .fourbplus-product-card-img {
  height: 160px; /* compact vs shop's 220px */
}

/* =============================================
   ORDER DETAIL PAGE
   ============================================= */

/* Gap between order detail cards */
.fourbplus-dash-card + .fourbplus-dash-card {
  margin-top: 16px;
}

/* Header: title + meta stacked left, status + back btn right */
.fourbplus-order-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fourbplus-order-meta {
  display: block;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  color: var(--fourbplus-text-muted);
  margin-top: 2px;
}

/* Order notes */
.fourbplus-order-notes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fourbplus-order-notes-title {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fourbplus-text-muted);
  margin: 0 0 10px;
}

.fourbplus-order-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fourbplus-order-note {
  display: flex;
  gap: 12px;
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
}

.fourbplus-order-note-date {
  flex-shrink: 0;
  color: var(--fourbplus-text-muted);
  min-width: 120px;
}

.fourbplus-order-note-text p {
  margin: 0;
}

/* Items table thumbnail column */
.fourbplus-order-items-table .fourbplus-order-col-img {
  width: 60px;
}

.fourbplus-order-item-img {
  width: 60px;
  padding-right: 0 !important;
}

.fourbplus-order-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fourbplus-cream);
  display: block;
}

.fourbplus-order-item-name {
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
}

.fourbplus-order-item-link {
  color: var(--fourbplus-text-dark);
  text-decoration: none;
  font-weight: 600;
}

.fourbplus-order-item-link:hover {
  color: var(--fourbplus-crimson);
}

/* WooCommerce item meta (variation labels) */
.fourbplus-order-item-name .wc-item-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fourbplus-text-muted);
}

.fourbplus-order-purchase-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fourbplus-text-muted);
}

/* Totals footer */
.fourbplus-order-totals .fourbplus-order-total-row th,
.fourbplus-order-totals .fourbplus-order-total-row td {
  padding: 10px 16px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.fourbplus-order-total-label {
  text-align: right;
  color: var(--fourbplus-text-muted);
  font-weight: 500;
}

.fourbplus-order-total-value {
  font-weight: 700;
  color: var(--fourbplus-text-dark);
  white-space: nowrap;
}

/* Grand total row — emphasised */
.fourbplus-order-total-row--order_total .fourbplus-order-total-label,
.fourbplus-order-total-row--order_total .fourbplus-order-total-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--fourbplus-crimson);
}

.fourbplus-order-action-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =============================================
   ACCOUNT DETAILS FORM
   ============================================= */

/* Password change sub-section */
.fourbplus-form-section {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.fourbplus-form-section-title {
  font-family: var(--fourbplus-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--fourbplus-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

/* Submit row */
.fourbplus-form-actions {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.fourbplus-account-form {
  max-width: 500px;
}

.fourbplus-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.fourbplus-form-field {
  margin-bottom: 16px;
}

.fourbplus-form-field.single {
  grid-column: span 2;
}

.fourbplus-field-label {
  font-family: var(--fourbplus-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fourbplus-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

.fourbplus-field-input {
  width: 100%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fourbplus-btn-radius);
  padding: 12px 14px;
  font-family: var(--fourbplus-font-body);
  font-size: 14px;
  color: var(--fourbplus-text-dark);
  background: var(--fourbplus-cream);
  transition: border-color var(--fourbplus-transition-fast);
}

.fourbplus-field-input:focus {
  outline: none;
  border-color: var(--fourbplus-crimson);
  background: var(--fourbplus-white);
}

.fourbplus-form-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 32px 0;
}

.fourbplus-password-section-title {
  font-family: var(--fourbplus-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--fourbplus-crimson);
  margin-bottom: 16px;
}

.fourbplus-save-btn {
  background: var(--fourbplus-crimson);
  color: var(--fourbplus-white);
  border: none;
  border-radius: var(--fourbplus-btn-radius);
  padding: 14px 28px;
  font-family: var(--fourbplus-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--fourbplus-transition-fast);
}

.fourbplus-save-btn:hover {
  background: var(--fourbplus-crimson-light);
}

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

@media (max-width: 767px) {
  .fourbplus-account-header {
    padding: 24px 0 20px;
  }

  .fourbplus-account-title {
    font-size: 28px;
  }

  .fourbplus-account-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .fourbplus-account-layout {
    grid-template-columns: 1fr;
    padding: 0 16px var(--fourbplus-section-padding);
  }

  .fourbplus-account-sidebar {
    order: 1;
  }

  /* Horizontal tabs on mobile */
  .fourbplus-nav-menu {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 8px;
    border-radius: 6px;
  }

  .fourbplus-nav-item a {
    flex-direction: column;
    padding: 8px 12px;
    font-size: 12px;
    text-align: center;
    min-width: 72px;
    border-radius: 4px;
  }

  .fourbplus-nav-icon {
    margin-bottom: 4px;
  }

  .fourbplus-nav-logout {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 4px;
    padding-left: 4px;
  }

  .fourbplus-account-content {
    order: 2;
  }

  .fourbplus-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .fourbplus-stat-value {
    font-size: 24px;
  }

  .fourbplus-orders-table {
    display: block;
    overflow-x: auto;
  }

  .fourbplus-address-grid {
    grid-template-columns: 1fr;
  }

  .fourbplus-product-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

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

  .fourbplus-form-field.single {
    grid-column: span 1;
  }
}

/* ==========================================================================
   Payment Methods Tab
   ========================================================================== */

/* Table column widths */
.fourbplus-payment-methods-table .fourbplus-pm-col--method { width: 45%; }
.fourbplus-payment-methods-table .fourbplus-pm-col--expires { width: 20%; }
.fourbplus-payment-methods-table .fourbplus-pm-col--actions { width: 35%; text-align: right; }

/* Method cell — card brand + last4 */
.fourbplus-pm-method {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fourbplus-pm-brand {
  font-weight: 600;
  color: var(--fourbplus-text-dark);
  text-transform: capitalize;
}

.fourbplus-pm-last4 {
  color: var(--fourbplus-text-muted);
  font-size: 13px;
}

.fourbplus-pm-default-badge {
  display: inline-block;
  background: oklch(97% 0.008 50);
  border: 1px solid oklch(24% 0.13 18 / 0.3);
  color: oklch(24% 0.13 18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}

/* Highlight default row */
.fourbplus-pm-row--default td {
  background: oklch(97% 0.008 50 / 0.5);
}

/* Actions cell */
.fourbplus-pm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.fourbplus-pm-action-btn--delete {
  border-color: #e53e3e;
  color: #e53e3e;
}

.fourbplus-pm-action-btn--delete:hover {
  background: #e53e3e;
  color: #fff;
}

/* Form submit row (add-payment-method page) */
.fourbplus-pm-form-actions {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Empty state */
.fourbplus-pm-empty {
  padding: 48px 24px;
  text-align: center;
}

.fourbplus-pm-empty-icon {
  font-size: 40px;
  color: #ccc;
  margin-bottom: 16px;
}

.fourbplus-pm-empty-text {
  color: var(--fourbplus-text-muted);
  margin: 0 0 20px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fourbplus-account-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--fourbplus-gutter-mobile) var(--fourbplus-section-padding);
  }

  /* Horizontal tabs on tablet */
  .fourbplus-nav-menu {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }

  .fourbplus-nav-item a {
    padding: 10px 12px;
  }

  .fourbplus-nav-logout {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 4px;
    padding-left: 4px;
  }

  .fourbplus-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fourbplus-product-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}