/* account.css — My Account page — Botanical Atelier v1.0.0
 * Loaded only on is_account_page() pages
 * Fonts: Cormorant Garamond + Crimson Pro (loaded via sl_account_page_assets)
 */

/* ─── Design tokens ─── */
.woocommerce-account {
  --cream:      #F6EFE3;
  --parchment:  #E8D5B0;
  --lav-deep:   #231442;
  --lav:        #4A2C7A;
  --lav-mid:    #7153A6;
  --lav-light:  #A882C8;
  --lav-pale:   #EAE0F5;
  --charcoal:   #1A120E;
  --white:      #ffffff;
}

/* ─── Page background & top spacing ─── */
.woocommerce-account main {
  margin-top: 0.75rem !important;
}
.woocommerce-account main > .wp-block-group {
  padding-top: 1.5rem !important;
  padding-bottom: 5rem !important;
  background: var(--cream) !important;
}

/* ─── Two-column flex layout: sidebar | content ─── */
/* Flexbox is more reliable than grid here because:
   1. WooCommerce's own CSS has width:30% on the nav (would size within grid cell)
   2. The block theme's constrained layout can clip grid columns unexpectedly
   Strategy: flex-wrap so notices span full width, then nav+content sit in the same row. */

.woocommerce-account .woocommerce {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: 1.5rem 0 !important;
  box-sizing: border-box !important;
}

/* Notices and any other injected elements (not nav/content) span full width */
.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Nav — fixed width sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
}

/* Content — fills remaining width, min-width:0 prevents flex blowout */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ════════════════════════════════
   SIDEBAR NAVIGATION
════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--lav-deep) !important;
  padding: 2.2rem 1.6rem 1.8rem !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  position: sticky !important;
  top: 2rem !important;
}

/* Eyebrow label above links */
.woocommerce-account .woocommerce-MyAccount-navigation::before {
  content: 'My Account';
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234,224,245,0.75);
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(168,130,200,0.15);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Separator hairline before Logout */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 1.2rem !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(168,130,200,0.12) !important;
}

/* Nav links — Cormorant italic, cream */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  padding: 0.58rem 0.5rem 0.58rem 1rem !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.08rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #F6EFE3 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  border-left: 2px solid transparent !important;
  transition: color 0.2s,
              padding-left 0.22s cubic-bezier(0.22,0.84,0.44,1),
              background 0.2s !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--lav-pale) !important;
  padding-left: 1.3rem !important;
  text-decoration: none !important;
  background: rgba(168,130,200,0.06) !important;
  border-bottom: none !important;
}

/* Active state — left accent border */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--lav-pale) !important;
  background: rgba(168,130,200,0.10) !important;
  border-left-color: var(--lav-light) !important;
}

/* Logout — smaller, muted, Crimson Pro */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.88rem !important;
  font-style: normal !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(234,224,245,0.88) !important;
  border-left: none !important;
  padding-left: 1rem !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--lav-light) !important;
  padding-left: 1rem !important;
  background: transparent !important;
}

/* ════════════════════════════════
   CONTENT AREA
════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--white) !important;
  padding: 3rem 3.5rem !important;
  box-sizing: border-box !important;
  min-height: 500px !important;
}

/* Section headings */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--lav-deep) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.4rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem) !important;
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: clamp(1.3rem, 2vw, 1.9rem) !important;
}

/* Body text */
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: var(--charcoal) !important;
}

/* Dashboard welcome paragraph — large italic Cormorant */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--lav-mid) !important;
  line-height: 1.65 !important;
  margin-bottom: 2rem !important;
  padding-bottom: 1.8rem !important;
  border-bottom: 1px solid rgba(74,44,122,0.10) !important;
}

/* Content links */
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--lav) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(74,44,122,0.22) !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--lav-deep) !important;
  border-bottom-color: rgba(35,20,66,0.45) !important;
}

/* ════════════════════════════════
   ORDERS TABLE
════════════════════════════════ */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  font-family: 'Crimson Pro', Georgia, serif !important;
}

.woocommerce-account .woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--lav-mid) !important;
  padding: 0 0 0.9rem 0 !important;
  border-bottom: 1px solid rgba(74,44,122,0.18) !important;
  border-top: none !important;
  text-align: left !important;
  background: transparent !important;
}

.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account table.shop_table tbody td {
  font-family: 'Crimson Pro', serif !important;
  font-size: 1rem !important;
  color: var(--charcoal) !important;
  padding: 0.85rem 1.2rem 0.85rem 0 !important;
  border-bottom: 1px solid rgba(74,44,122,0.07) !important;
  border-top: none !important;
  vertical-align: middle !important;
  background: transparent !important;
}

/* Alternating row tint */
.woocommerce-account .woocommerce-orders-table tbody tr:nth-child(even) td {
  background: rgba(234,224,245,0.12) !important;
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover td {
  background: rgba(234,224,245,0.24) !important;
}

/* Order number — italic Cormorant */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  border-bottom: none !important;
}

/* ── Order status badges ── */
.woocommerce-account mark.order-status {
  border-radius: 0 !important;
  padding: 0.2rem 0.65rem !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.woocommerce-account mark.order-status.status-processing {
  background: rgba(113,83,166,0.12) !important;
  color: var(--lav) !important;
}
.woocommerce-account mark.order-status.status-completed {
  background: rgba(76,130,88,0.10) !important;
  color: #3a6b44 !important;
}
.woocommerce-account mark.order-status.status-on-hold {
  background: rgba(184,140,48,0.12) !important;
  color: #7a5c10 !important;
}
.woocommerce-account mark.order-status.status-cancelled {
  background: rgba(100,80,80,0.08) !important;
  color: #7a5050 !important;
}
.woocommerce-account mark.order-status.status-pending {
  background: rgba(168,130,200,0.12) !important;
  color: var(--lav-mid) !important;
}
.woocommerce-account mark.order-status.status-refunded {
  background: rgba(100,100,100,0.08) !important;
  color: #555 !important;
}

/* View order button — outline ghost */
.woocommerce-account td.woocommerce-orders-table__cell-order-actions a,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.38rem 1rem !important;
  border: 1px solid rgba(74,44,122,0.35) !important;
  border-bottom: 1px solid rgba(74,44,122,0.35) !important;
  color: var(--lav) !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  display: inline-block !important;
}
.woocommerce-account td.woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover {
  background: var(--lav) !important;
  color: var(--white) !important;
  border-color: var(--lav) !important;
}

/* ════════════════════════════════
   ADDRESSES SECTION
════════════════════════════════ */
/* Use floats (same mechanism WC uses) — more reliable than grid in this context.
   Both cards float left; second card gets left margin via adjacent-sibling. */
.woocommerce-account .woocommerce-Addresses {
  overflow: hidden !important; /* clearfix — contains floated children */
}

.woocommerce-account .woocommerce-Address {
  float: left !important;
  clear: none !important;
  width: calc(50% - 1rem) !important;
  max-width: calc(50% - 1rem) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(74,44,122,0.14) !important;
  padding: 1.8rem 2rem !important;
}

.woocommerce-account .woocommerce-Address + .woocommerce-Address {
  margin-left: 2rem !important;
}

.woocommerce-account .woocommerce-Address-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(74,44,122,0.10) !important;
}

.woocommerce-account .woocommerce-Address-title h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--lav-deep) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.woocommerce-account .woocommerce-Address-title .edit {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--lav-mid) !important;
  border-bottom: none !important;
  opacity: 0.65 !important;
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
  opacity: 1 !important;
  color: var(--lav) !important;
  border-bottom: none !important;
}

.woocommerce-account address {
  font-family: 'Crimson Pro', serif !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: var(--charcoal) !important;
  font-style: normal !important;
}

/* "Add address" button */
.woocommerce-account .woocommerce-MyAccount-content a.add {
  display: inline-block !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1.4rem !important;
  border: 1px solid rgba(74,44,122,0.35) !important;
  border-bottom: 1px solid rgba(74,44,122,0.35) !important;
  color: var(--lav) !important;
  background: transparent !important;
  transition: background 0.2s, color 0.2s !important;
  margin-top: 0.5rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.add:hover {
  background: var(--lav) !important;
  color: var(--white) !important;
  border-color: var(--lav) !important;
}

/* ════════════════════════════════
   FORMS (account details, edit address, login/register)
════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-form-login,
.woocommerce-account .woocommerce-MyAccount-content form.register {
  max-width: 520px !important;
}

/* Field wrappers */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row,
.woocommerce-account .woocommerce-MyAccount-content p.form-row {
  margin-bottom: 1.8rem !important;
}

/* Labels */
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row label {
  display: block !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--lav-mid) !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
}

/* Bottom-border-only inputs — matches contact.css pattern */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(74,44,122,0.22) !important;
  border-radius: 0 !important;
  padding: 0.55rem 0 !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 1.2rem !important;
  color: var(--charcoal) !important;
  outline: none !important;
  transition: border-color 0.22s !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
  border-bottom-color: var(--lav) !important;
}

/* Password strength meter */
.woocommerce-account .woocommerce-password-strength {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.85rem !important;
  margin-top: 0.3rem !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.5rem !important;
}

/* Submit button */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 1rem 2.5rem !important;
  background: var(--lav) !important;
  border: 1px solid var(--lav) !important;
  border-radius: 0 !important;
  color: var(--white) !important;
  cursor: pointer !important;
  transition: background 0.25s, border-color 0.25s !important;
  display: inline-block !important;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--lav-deep) !important;
  border-color: var(--lav-deep) !important;
  color: var(--white) !important;
}

/* ════════════════════════════════
   NOTICES
════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 3px solid var(--lav-light) !important;
  padding: 0.8rem 1.2rem !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 1rem !important;
  color: var(--lav-deep) !important;
  margin-bottom: 1.5rem !important;
  list-style: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 3px solid #a84040 !important;
  padding: 0.8rem 1.2rem !important;
  font-family: 'Crimson Pro', serif !important;
  font-size: 1rem !important;
  color: #a84040 !important;
  margin-bottom: 1.5rem !important;
  list-style: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
  font-family: 'Crimson Pro', serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.38rem 1rem !important;
  border: 1px solid rgba(74,44,122,0.35) !important;
  border-bottom: 1px solid rgba(74,44,122,0.35) !important;
  color: var(--lav) !important;
  background: transparent !important;
  border-radius: 0 !important;
  float: right !important;
}

/* ════════════════════════════════
   RESPONSIVE ≤ 768px
════════════════════════════════ */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    padding: 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: static !important;
    padding: 1rem 1rem 0.4rem !important;
  }

  /* Nav eyebrow hidden on mobile */
  .woocommerce-account .woocommerce-MyAccount-navigation::before {
    display: none !important;
  }

  /* Horizontal scrollable tab strip */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.2rem !important;
    padding-bottom: 0.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex-shrink: 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-left: 0.5rem !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    font-size: 0.88rem !important;
    padding: 0.42rem 0.8rem !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    padding-left: 0.8rem !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    border-left: none !important;
    border-bottom-color: var(--lav-light) !important;
    background: rgba(168,130,200,0.10) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    font-size: 0.72rem !important;
    padding: 0.42rem 0.8rem !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    padding-left: 0.8rem !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 2rem 1.5rem !important;
  }

  .woocommerce-account .woocommerce-Address {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 1.2rem !important;
  }
  .woocommerce-account .woocommerce-Address + .woocommerce-Address {
    margin-left: 0 !important;
  }
}

/* ════════════════════════════════
   RESPONSIVE ≤ 480px
════════════════════════════════ */
@media (max-width: 480px) {
  .woocommerce-account main > .wp-block-group {
    padding-bottom: 3rem !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 1.5rem 1rem !important;
  }
  /* Orders table: hide date column on smallest screens */
  .woocommerce-account .woocommerce-orders-table thead th:nth-child(2),
  .woocommerce-account .woocommerce-orders-table tbody td:nth-child(2) {
    display: none !important;
  }
}