/* ==========================================================================
   MY ACCOUNT STYLES
   Tonic Sites Shop Helper
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

.woocommerce-account {
  --tc-bg: #FAF8F5;
  --tc-card-bg: #FFFFFF;
  --tc-primary: #1A1A1A;
  --tc-primary-hover: #2D2D2D;
  --tc-accent: #8B6F4E;
  --tc-accent-hover: #7A6043;
  --tc-text: #1A1A1A;
  --tc-text-muted: #666666;
  --tc-text-light: #999999;
  --tc-border: #E8E8E8;
  --tc-border-light: #F0F0F0;
  --tc-input-bg: #FFFFFF;
  --tc-input-bg-alt: #FAF8F5;
  --tc-success: #22C55E;
  --tc-error: #EF4444;
  --tc-warning: #F59E0B;
  --tc-radius: 8px;
  --tc-radius-lg: 12px;
  --tc-font-serif: "IvyOra Display Light", Georgia, serif;
  --tc-font-text: "IvyOra Text Regular", Georgia, serif;
  --tc-font-sans: "HK Grotesk Regular Legacy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tc-font-label: "HK Grotesk Medium Legacy", -apple-system, BlinkMacSystemFont, sans-serif;
  --tc-transition: 0.2s ease;
}

/* ==========================================================================
   1. ORDER DETAILS TABLE (VIEW-ORDER)
   ========================================================================== */

/* --- Order Details Heading --- */

#tonic-order-details .woocommerce-order-details__title {
  font-family: var(--tc-font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tc-text);
  margin: 0 0 16px;
  padding: 0;
  line-height: 1.4;
}

/* --- Table Base --- */

#tonic-order-details .shop_table {
  border: none;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

#tonic-order-details .shop_table th,
#tonic-order-details .shop_table td {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--tc-border-light);
  vertical-align: middle;
}

/* Table header row */
#tonic-order-details .shop_table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--tc-text-muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--tc-border);
}

/* Product thumbnail column */
#tonic-order-details .shop_table td.product-thumbnail {
  width: 100px;
  padding-right: 16px;
}

#tonic-order-details .shop_table td.product-thumbnail img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--tc-radius);
  display: block;
}

/* Product name column */
#tonic-order-details .shop_table td.product-name {
  color: var(--tc-text);
}

#tonic-order-details .shop_table td.product-name a {
  text-decoration: none;
  color: var(--tc-accent);
}

#tonic-order-details .shop_table td.product-name a:hover {
  color: var(--tc-text);
}

/* Item meta (e.g. "Discount: Free") — pill tag */
#tonic-order-details .shop_table .wc-item-meta {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tonic-order-details .shop_table .wc-item-meta li {
  font-family: var(--tc-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--tc-accent);
  background: #F5F0EB;
  border-radius: 100px;
  padding: 4px 12px;
  display: inline-flex;
  line-height: 1.4;
}

#tonic-order-details .shop_table .wc-item-meta li p {
  margin: 0;
  display: inline;
}

/* Total column */
#tonic-order-details .shop_table td.product-total {
  text-align: left;
  color: var(--tc-text);
}

#tonic-order-details .shop_table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Order Summary Card --- */

#tonic-order-details .tonic-order-summary-card {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 24px;
  margin-top: 30px;
}

#tonic-order-details .tonic-order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--tc-border-light);
}

#tonic-order-details .tonic-order-summary-row__label {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text-muted);
  font-weight: 400;
}

#tonic-order-details .tonic-order-summary-row__value {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text);
  font-weight: 400;
  text-align: right;
}

/* Row before total — remove bottom border to avoid double line */
#tonic-order-details .tonic-order-summary-row--total {
  border-bottom: none;
  border-top: 2px solid var(--tc-border);
  padding-top: 16px;
}

#tonic-order-details .tonic-order-summary-row:has(+ .tonic-order-summary-row--total) {
  border-bottom: none;
}

#tonic-order-details .tonic-order-summary-row--total .tonic-order-summary-row__label,
#tonic-order-details .tonic-order-summary-row--total .tonic-order-summary-row__value {
  font-size: 18px;
  font-weight: 500;
  color: var(--tc-text);
}

/* Customer note row */
#tonic-order-details .tonic-order-summary-row--note .tonic-order-summary-row__value {
  max-width: 60%;
}

/* Actions */
#tonic-order-details .tonic-order-summary-actions {
  margin-top: 20px;
}

#tonic-order-details .tonic-order-action-btn {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  background: transparent;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  transition: var(--tc-transition);
  cursor: pointer;
}

#tonic-order-details .tonic-order-action-btn:hover {
  border-color: var(--tc-text);
  color: var(--tc-text);
}

a.woocommerce-button.button.wpifw-my-account-invoice {
  display: none !important;
}

/* ==========================================================================
   2. DOWNLOADS BANNER (VIEW-ORDER)
   ========================================================================== */

.woocommerce-view-order section.woocommerce-order-downloads {
  display: none;
}

img.tss-orders-downloads-banner {
  margin-top: 24px;
  margin-bottom: 30px;
}

/* ==========================================================================
   3. ORDERS LIST (/my-account/orders/)
   Card-based order list — each order is a clickable card.
   ========================================================================== */

/* --- Container --- */

#tonic-orders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Order Card --- */

#tonic-orders .tonic-order-card {
  display: block;
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 20px 24px;
  text-decoration: none;
  color: var(--tc-text);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
  cursor: pointer;
}

#tonic-orders .tonic-order-card:hover {
  border-color: #D0D0D0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#tonic-orders .tonic-order-card:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* --- Card Header: Order # + Status --- */

#tonic-orders .tonic-order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

#tonic-orders .tonic-order-card__number {
  font-family: var(--tc-font-label);
  font-size: 15px;
  font-weight: 500;
  color: var(--tc-text);
  letter-spacing: -0.01em;
}

/* --- Status Badge --- */

#tonic-orders .tonic-order-card__status {
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Status colors */
#tonic-orders .tonic-order-card__status--completed {
  background: #ECFDF5;
  color: #059669;
}

#tonic-orders .tonic-order-card__status--processing {
  background: #F5F0EB;
  color: var(--tc-accent);
}

#tonic-orders .tonic-order-card__status--on-hold {
  background: #FFFBEB;
  color: #D97706;
}

#tonic-orders .tonic-order-card__status--pending {
  background: #F5F5F5;
  color: var(--tc-text-muted);
}

#tonic-orders .tonic-order-card__status--cancelled,
#tonic-orders .tonic-order-card__status--refunded,
#tonic-orders .tonic-order-card__status--failed {
  background: #FEF2F2;
  color: #DC2626;
}

/* --- Card Body: Meta + Total --- */

#tonic-orders .tonic-order-card__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#tonic-orders .tonic-order-card__meta {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

#tonic-orders .tonic-order-card__meta time {
  color: var(--tc-text-muted);
}

#tonic-orders .tonic-order-card__sep {
  margin: 0 6px;
  color: var(--tc-text-light);
}

#tonic-orders .tonic-order-card__total {
  font-family: var(--tc-font-label);
  font-size: 15px;
  font-weight: 500;
  color: var(--tc-text);
  white-space: nowrap;
}

/* --- Product Thumbnails Row --- */

#tonic-orders .tonic-order-card__products {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-border-light);
}

#tonic-orders .tonic-order-card__thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tc-input-bg-alt);
  border: 1px solid var(--tc-border-light);
}

#tonic-orders .tonic-order-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#tonic-orders .tonic-order-card__thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--tc-text-muted);
  background: var(--tc-input-bg-alt);
}

/* --- Card Actions (non-view actions like Pay, Cancel) --- */

#tonic-orders .tonic-order-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tc-border-light);
}

#tonic-orders .tonic-order-card__action {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  background: transparent;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 6px 14px;
  text-decoration: none;
  display: inline-block;
  transition: var(--tc-transition);
  cursor: pointer;
}

#tonic-orders .tonic-order-card__action:hover {
  border-color: var(--tc-text);
}

#tonic-orders .tonic-order-card__action--pay {
  background: var(--tc-primary);
  color: #FFFFFF;
  border-color: var(--tc-primary);
}

#tonic-orders .tonic-order-card__action--pay:hover {
  background: var(--tc-primary-hover);
  border-color: var(--tc-primary-hover);
}

#tonic-orders .tonic-order-card__action--cancel {
  color: var(--tc-text-light);
  border-color: var(--tc-border-light);
}

#tonic-orders .tonic-order-card__action--cancel:hover {
  color: var(--tc-error);
  border-color: var(--tc-error);
}

/* ==========================================================================
   4. ORDERS PAGINATION
   ========================================================================== */

#tonic-orders ~ .tonic-orders-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
}

#tonic-orders ~ .tonic-orders-pagination .tonic-orders-pagination__link {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  transition: var(--tc-transition);
}

#tonic-orders ~ .tonic-orders-pagination .tonic-orders-pagination__link:hover {
  border-color: var(--tc-accent);
  color: var(--tc-accent-hover);
}

#tonic-orders ~ .tonic-orders-pagination .tonic-orders-pagination__info {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
}

/* ==========================================================================
   5. EMPTY STATE
   ========================================================================== */

.tonic-orders-empty {
  text-align: center;
  padding: 60px 20px;
}

.tonic-orders-empty__icon {
  color: var(--tc-text-light);
  margin-bottom: 16px;
}

.tonic-orders-empty__text {
  font-family: var(--tc-font-sans);
  font-size: 15px;
  color: var(--tc-text-muted);
  margin: 0 0 20px;
}

.tonic-orders-empty__btn {
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--tc-primary);
  border: none;
  border-radius: var(--tc-radius);
  padding: 12px 28px;
  text-decoration: none;
  display: inline-block;
  transition: var(--tc-transition);
}

.tonic-orders-empty__btn:hover {
  background: var(--tc-primary-hover);
  color: #FFFFFF;
}

/* ==========================================================================
   7. PLAN ORDERS (/my-account/asp-plan-orders/)
   Card-based payment plan list — mirrors order cards design.
   ========================================================================== */

/* --- Container --- */

#tonic-plan-orders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Plan Card --- */

#tonic-plan-orders .tonic-plan-card {
  display: block;
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 20px 24px;
  text-decoration: none;
  color: var(--tc-text);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
  cursor: pointer;
}

#tonic-plan-orders .tonic-plan-card:hover {
  border-color: #D0D0D0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#tonic-plan-orders .tonic-plan-card:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* --- Card Header: Plan # + Status --- */

#tonic-plan-orders .tonic-plan-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#tonic-plan-orders .tonic-plan-card__number {
  font-family: var(--tc-font-label);
  font-size: 15px;
  font-weight: 500;
  color: var(--tc-text);
  letter-spacing: -0.01em;
}

/* --- Status Badge --- */

#tonic-plan-orders .tonic-plan-card__status {
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  line-height: 1.4;
  white-space: nowrap;
}

#tonic-plan-orders .tonic-plan-card__status--scheduled,
#tonic-plan-orders .tonic-plan-card__status--active {
  background: #F5F0EB;
  color: var(--tc-accent);
}

#tonic-plan-orders .tonic-plan-card__status--completed,
#tonic-plan-orders .tonic-plan-card__status--paid {
  background: #ECFDF5;
  color: #059669;
}

#tonic-plan-orders .tonic-plan-card__status--on-hold,
#tonic-plan-orders .tonic-plan-card__status--pending {
  background: #FFFBEB;
  color: #D97706;
}

#tonic-plan-orders .tonic-plan-card__status--cancelled,
#tonic-plan-orders .tonic-plan-card__status--failed,
#tonic-plan-orders .tonic-plan-card__status--overdue {
  background: #FEF2F2;
  color: #DC2626;
}

#tonic-plan-orders .tonic-plan-card__status--expired {
  background: #F5F5F5;
  color: var(--tc-text-muted);
}

/* --- Next Payment --- */

#tonic-plan-orders .tonic-plan-card__next {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

#tonic-plan-orders .tonic-plan-card__next-amount {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text);
}

#tonic-plan-orders .tonic-plan-card__next-amount .woocommerce-Price-amount {
  font-family: var(--tc-font-label);
  font-weight: 500;
}

#tonic-plan-orders .tonic-plan-card__payment-method {
  font-family: var(--tc-font-sans);
  font-size: 12px;
  color: var(--tc-text-light);
}

/* --- Totals Row --- */

#tonic-plan-orders .tonic-plan-card__totals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

#tonic-plan-orders .tonic-plan-card__paid {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
}

#tonic-plan-orders .tonic-plan-card__paid .woocommerce-Price-amount {
  font-family: var(--tc-font-label);
  color: var(--tc-text);
  font-weight: 500;
}

#tonic-plan-orders .tonic-plan-card__balance {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
}

#tonic-plan-orders .tonic-plan-card__balance::before {
  content: "·";
  margin-right: 6px;
  color: var(--tc-text-light);
}

#tonic-plan-orders .tonic-plan-card__balance .woocommerce-Price-amount {
  font-family: var(--tc-font-label);
  font-weight: 500;
}

/* --- Product Thumbnails --- */

#tonic-plan-orders .tonic-plan-card__products {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-border-light);
}

#tonic-plan-orders .tonic-plan-card__thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tc-input-bg-alt);
  border: 1px solid var(--tc-border-light);
}

#tonic-plan-orders .tonic-plan-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#tonic-plan-orders .tonic-plan-card__thumb--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--tc-text-muted);
  background: var(--tc-input-bg-alt);
}

/* --- Pagination --- */

#tonic-plan-orders ~ .tonic-plan-orders-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
}

#tonic-plan-orders ~ .tonic-plan-orders-pagination .tonic-plan-orders-pagination__link {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  transition: var(--tc-transition);
}

#tonic-plan-orders ~ .tonic-plan-orders-pagination .tonic-plan-orders-pagination__link:hover {
  border-color: var(--tc-accent);
  color: var(--tc-accent-hover);
}

#tonic-plan-orders ~ .tonic-plan-orders-pagination .tonic-plan-orders-pagination__info {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
}

/* ==========================================================================
   9. VIEW PLAN ORDER (/my-account/asp-view-plan-order/{id}/)
   Detail view for a single payment plan.
   ========================================================================== */

/* --- Header --- */

#tonic-view-plan-order .tonic-plan-header {
  margin-bottom: 24px;
}

#tonic-view-plan-order .tonic-plan-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

#tonic-view-plan-order .tonic-plan-header__title {
  font-family: var(--tc-font-label);
  font-size: 18px;
  font-weight: 500;
  color: var(--tc-text);
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

#tonic-view-plan-order .tonic-plan-header__date {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
  margin: 0;
}

/* Status badge in header — reuse plan-card status classes */
#tonic-view-plan-order .tonic-plan-card__status {
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  line-height: 1.4;
  white-space: nowrap;
}

#tonic-view-plan-order .tonic-plan-card__status--scheduled,
#tonic-view-plan-order .tonic-plan-card__status--active {
  background: #F5F0EB;
  color: var(--tc-accent);
}

#tonic-view-plan-order .tonic-plan-card__status--completed,
#tonic-view-plan-order .tonic-plan-card__status--paid {
  background: #ECFDF5;
  color: #059669;
}

#tonic-view-plan-order .tonic-plan-card__status--on-hold,
#tonic-view-plan-order .tonic-plan-card__status--pending {
  background: #FFFBEB;
  color: #D97706;
}

#tonic-view-plan-order .tonic-plan-card__status--cancelled,
#tonic-view-plan-order .tonic-plan-card__status--failed,
#tonic-view-plan-order .tonic-plan-card__status--overdue {
  background: #FEF2F2;
  color: #DC2626;
}

#tonic-view-plan-order .tonic-plan-card__status--expired {
  background: #F5F5F5;
  color: var(--tc-text-muted);
}

/* --- Details Table (Status, Payment plan, Dates, Method) --- */

#tonic-view-plan-order .asp_upp_plan_order_details {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 4px 0;
  margin-bottom: 28px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
}

#tonic-view-plan-order .asp_upp_plan_order_details td {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-bottom: 1px solid var(--tc-border-light);
  vertical-align: middle;
}

#tonic-view-plan-order .asp_upp_plan_order_details tr:last-child td {
  border-bottom: none;
}

#tonic-view-plan-order .asp_upp_plan_order_details td:first-child {
  color: var(--tc-text-muted);
  font-weight: 400;
  width: 180px;
  white-space: nowrap;
}

#tonic-view-plan-order .asp_upp_plan_order_details td:last-child {
  color: var(--tc-text);
  font-weight: 400;
}

/* Status badge inside details table */
#tonic-view-plan-order .asp-upp-status {
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  line-height: 1.4;
  background: transparent;
}

#tonic-view-plan-order .status-scheduled,
#tonic-view-plan-order .status-active {
  background: #F5F0EB;
  color: var(--tc-accent);
}

#tonic-view-plan-order .status-completed,
#tonic-view-plan-order .status-paid {
  background: #ECFDF5;
  color: #059669;
}

#tonic-view-plan-order .status-on-hold,
#tonic-view-plan-order .status-pending {
  background: #FFFBEB;
  color: #D97706;
}

#tonic-view-plan-order .status-cancelled,
#tonic-view-plan-order .status-failed,
#tonic-view-plan-order .status-overdue {
  background: #FEF2F2;
  color: #DC2626;
}

#tonic-view-plan-order .status-expired {
  background: #F5F5F5;
  color: var(--tc-text-muted);
}

/* Action buttons in details table */
#tonic-view-plan-order .asp_upp_plan_order_details .button {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  background: transparent;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  transition: var(--tc-transition);
  cursor: pointer;
  margin-right: 8px;
}

#tonic-view-plan-order .asp_upp_plan_order_details .button:hover {
  border-color: var(--tc-text);
}

/* --- Totals / Order Details Section --- */

#tonic-view-plan-order .woocommerce-order-details {
  margin-bottom: 28px;
}

#tonic-view-plan-order .woocommerce-order-details__title {
  font-family: var(--tc-font-label);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tc-text);
  margin: 0 0 16px;
  padding: 0;
  line-height: 1.4;
  font-style: normal;
}

/* Totals table — full block layout (thead/tfoot have 2 cells, tbody has 3) */
#tonic-view-plan-order .woocommerce-table--order-details {
  display: block;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  width: 100%;
  overflow: hidden;
}

/* --- Header --- */

#tonic-view-plan-order .woocommerce-table--order-details thead {
  display: flex;
  padding: 12px 24px;
  border-bottom: 1px solid var(--tc-border);
}

#tonic-view-plan-order .woocommerce-table--order-details thead tr {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#tonic-view-plan-order .woocommerce-table--order-details thead th {
  font-family: var(--tc-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--tc-text-muted);
  padding: 0;
  border: none;
  background: none;
}

/* --- Body (product rows) --- */

#tonic-view-plan-order .woocommerce-table--order-details tbody {
  display: block;
}

#tonic-view-plan-order .woocommerce-table--order-details tbody tr {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  padding: 16px 24px;
  gap: 16px;
  border-bottom: 1px solid var(--tc-border-light);
}

#tonic-view-plan-order .woocommerce-table--order-details tbody tr:last-child {
  border-bottom: none;
}

#tonic-view-plan-order .woocommerce-table--order-details tbody td {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 0;
  border: none;
  background: none;
}

/* Product thumbnail */
#tonic-view-plan-order .woocommerce-table--order-details td.product-thumbnail {
  width: auto;
}

#tonic-view-plan-order .woocommerce-table--order-details td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--tc-radius);
  display: block;
}

/* Product total — right align */
#tonic-view-plan-order .woocommerce-table--order-details td.product-total {
  text-align: right;
}

/* --- Footer (totals) --- */

#tonic-view-plan-order .woocommerce-table--order-details tfoot {
  display: block;
  border-top: 1px solid var(--tc-border);
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 24px;
  border-bottom: 1px solid var(--tc-border-light);
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child {
  border-bottom: none;
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot th,
#tonic-view-plan-order .woocommerce-table--order-details tfoot td {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  padding: 0;
  border: none;
  background: none;
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot th {
  color: var(--tc-text-muted);
  font-weight: 400;
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot td {
  text-align: right;
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child th,
#tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child td {
  font-weight: 500;
  font-size: 16px;
  color: var(--tc-text);
}

#tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child {
  border-top: 2px solid var(--tc-border);
  padding-top: 16px;
}

/* Product name links */
#tonic-view-plan-order .woocommerce-table--order-details td.product-name a {
  color: var(--tc-accent);
  text-decoration: none;
}

#tonic-view-plan-order .woocommerce-table--order-details td.product-name a:hover {
  color: var(--tc-text);
}

/* Item meta pills */
#tonic-view-plan-order .wc-item-meta {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tonic-view-plan-order .wc-item-meta li {
  font-family: var(--tc-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--tc-accent);
  background: #F5F0EB;
  border-radius: 100px;
  padding: 4px 12px;
  display: inline-flex;
  line-height: 1.4;
}

#tonic-view-plan-order .wc-item-meta li p {
  margin: 0;
  display: inline;
}

/* --- Scheduled Payments Section --- */

#tonic-view-plan-order .asp-upp-plan-order-scheduled-payments {
  margin-bottom: 28px;
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table {
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table th,
#tonic-view-plan-order .asp-upp-scheduled-payments-table td {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  font-weight: 400;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid var(--tc-border-light);
  vertical-align: middle;
  background: var(--tc-card-bg);
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--tc-text-muted);
  border-bottom: 1px solid var(--tc-border);
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table tbody tr:last-child td {
  border-bottom: none;
}

/* Payment number */
#tonic-view-plan-order .scheduled_payment_cell--payment-number {
  font-family: var(--tc-font-label);
  font-weight: 500;
  color: var(--tc-text);
  white-space: nowrap;
}

/* Status text */
#tonic-view-plan-order .scheduled_payment_cell--payment-order {
  color: var(--tc-text-muted);
}

/* Date */
#tonic-view-plan-order .scheduled_payment_cell--payment-date {
  color: var(--tc-text);
}

/* Total */
#tonic-view-plan-order .scheduled_payment_cell--payment-total {
  font-family: var(--tc-font-label);
  font-weight: 500;
  color: var(--tc-text);
  white-space: nowrap;
}

/* Order link */
#tonic-view-plan-order .asp-upp-scheduled-payments-table a {
  color: var(--tc-accent);
  text-decoration: none;
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table a:hover {
  color: var(--tc-accent-hover);
}

/* Order cell — inline order # + Pay now button */
#tonic-view-plan-order .asp-upp-scheduled-payments-table .scheduled_payment_cell--payment-order {
  white-space: nowrap;
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table .scheduled_payment_cell--payment-order br {
  display: none;
}

/* Pay now button */
#tonic-view-plan-order .asp-upp-scheduled-payments-table .button {
  font-family: var(--tc-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--tc-primary);
  border: 1px solid var(--tc-primary);
  border-radius: var(--tc-radius);
  padding: 5px 12px;
  text-decoration: none;
  display: inline-block;
  transition: var(--tc-transition);
  margin-left: 8px;
  vertical-align: middle;
}

#tonic-view-plan-order .asp-upp-scheduled-payments-table .button:hover {
  background: var(--tc-primary-hover);
  border-color: var(--tc-primary-hover);
}

/* --- Downloads Section (hide on plan view, already visible in My Products) --- */

#tonic-view-plan-order .woocommerce-order-downloads {
  display: none;
}

/* --- Customer Details (Billing Address) --- */

#tonic-view-plan-order .woocommerce-customer-details .woocommerce-column__title,
.woocommerce-view-order .woocommerce-customer-details .woocommerce-column__title {
  font-family: var(--tc-font-label);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tc-text);
  margin: 0 0 16px;
  padding: 0;
  line-height: 1.4;
  font-style: normal;
}

#tonic-view-plan-order .woocommerce-customer-details address,
.woocommerce-view-order .woocommerce-customer-details address {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text-muted);
  font-style: normal;
  line-height: 1.8;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email {
  margin-bottom: 0 !important;
}

/* --- Pay Off Plan Button --- */

.tonic-plan-payoff {
  margin: 16px 0 24px;
}

.tonic-plan-payoff__btn,
.tonic-plan-payoff__btn:link,
.tonic-plan-payoff__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF !important;
  background: var(--tc-primary);
  border: 1px solid var(--tc-primary);
  border-radius: var(--tc-radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: var(--tc-transition);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none !important;
}

.tonic-plan-payoff__btn:hover,
.tonic-plan-payoff__btn:focus {
  background: var(--tc-primary-hover);
  border-color: var(--tc-primary-hover);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

#tonic-view-plan-order .tonic-plan-payoff__desc {
  font-family: var(--tc-font-sans) !important;
  font-size: 13px !important;
  font-style: normal !important;
  color: var(--tc-text-muted) !important;
  margin: 8px 0 0 !important;
}

.woocommerce-view-order p.order-again {
  display: none;
}

/* ==========================================================================
   10. ORDERS + PLAN ORDERS — RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {

  /* --- Order Cards --- */

  #tonic-orders .tonic-order-card {
    padding: 16px 18px;
  }

  #tonic-orders .tonic-order-card__number {
    font-size: 14px;
  }

  #tonic-orders .tonic-order-card__status {
    font-size: 11px;
    padding: 3px 10px;
  }

  #tonic-orders .tonic-order-card__meta {
    font-size: 12px;
  }

  #tonic-orders .tonic-order-card__total {
    font-size: 14px;
  }

  #tonic-orders .tonic-order-card__thumb {
    width: 38px;
    height: 38px;
  }

  #tonic-orders .tonic-order-card__thumb--more {
    font-size: 11px;
  }

  #tonic-orders .tonic-order-card__actions {
    flex-wrap: wrap;
  }

  /* --- Plan Cards --- */

  #tonic-plan-orders .tonic-plan-card {
    padding: 16px 18px;
  }

  #tonic-plan-orders .tonic-plan-card__number {
    font-size: 14px;
  }

  #tonic-plan-orders .tonic-plan-card__status {
    font-size: 11px;
    padding: 3px 10px;
  }

  #tonic-plan-orders .tonic-plan-card__next-amount {
    font-size: 13px;
  }

  #tonic-plan-orders .tonic-plan-card__paid,
  #tonic-plan-orders .tonic-plan-card__balance {
    font-size: 12px;
  }

  #tonic-plan-orders .tonic-plan-card__thumb {
    width: 38px;
    height: 38px;
  }

  #tonic-plan-orders .tonic-plan-card__thumb--more {
    font-size: 11px;
  }

  /* --- View Plan Order --- */

  #tonic-view-plan-order .tonic-plan-header__title {
    font-size: 16px;
  }

  #tonic-view-plan-order .asp_upp_plan_order_details td {
    padding: 10px 12px;
    font-size: 10px;
  }

  #tonic-view-plan-order .asp_upp_plan_order_details td:first-child {
    width: auto;
  }

  /* Scheduled payments — stacked cards on mobile */
  #tonic-view-plan-order .asp-upp-scheduled-payments-table {
    border: none;
    border-radius: 0;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table thead {
    display: none;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table tbody tr {
    display: block;
    background: var(--tc-card-bg);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    padding: 14px 16px;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    border: none;
    background: none;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table tbody tr td::before {
    content: attr(data-title);
    font-family: var(--tc-font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tc-text-muted);
    flex-shrink: 0;
    margin-right: 12px;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table .scheduled_payment_cell--payment-number {
    font-size: 14px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tc-border-light);
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table .scheduled_payment_cell--payment-order {
    white-space: normal;
  }

  #tonic-view-plan-order .asp-upp-scheduled-payments-table .button {
    margin-left: 8px;
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Totals table — stack product rows on mobile */
  #tonic-view-plan-order .woocommerce-table--order-details tbody tr {
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
    padding: 14px 16px;
    gap: 4px 12px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details td.product-thumbnail {
    grid-row: 1 / 3;
    align-self: start;
  }

  #tonic-view-plan-order .woocommerce-table--order-details td.product-thumbnail img {
    width: 50px;
    height: 50px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details td.product-name {
    grid-column: 2;
    font-size: 13px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details td.product-total {
    grid-column: 2;
    text-align: left;
    font-size: 13px;
    color: var(--tc-text-muted);
  }

  #tonic-view-plan-order .woocommerce-table--order-details thead {
    padding: 10px 16px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details thead th {
    font-size: 10px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details tfoot tr {
    padding: 10px 16px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details tfoot th,
  #tonic-view-plan-order .woocommerce-table--order-details tfoot td {
    font-size: 13px;
  }

  #tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child th,
  #tonic-view-plan-order .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 15px;
  }

  /* --- Shared --- */

  .tonic-orders-empty {
    padding: 40px 16px;
  }
}

/* ==========================================================================
   11. DOWNLOADS / SHARE KEYS (/my-account/products/)
   Card-based layout — Share Keys for Showit templates, Downloads for Canva/other.
   ========================================================================== */

/* --- Container --- */

#tonic-downloads {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- Section Nav Pills (jump to Templates / Assets / Downloads) --- */

html:has(#tonic-downloads) {
  scroll-behavior: smooth;
}

#tonic-downloads .tonic-downloads__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

#tonic-downloads .tonic-downloads__pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  line-height: 1;
  transition: var(--tc-transition);
  white-space: nowrap;
}

#tonic-downloads .tonic-downloads__pill:hover,
#tonic-downloads .tonic-downloads__pill:focus {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: #FFFFFF;
  outline: none;
}

#tonic-downloads .tonic-downloads__section {
  /* Space from the viewport top when jumped-to via anchor nav (fixed-header-safe) */
  scroll-margin-top: 120px;
}

/* --- Section Headings --- */

#tonic-downloads .tonic-downloads__heading {
  font-family: var(--tc-font-serif) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tc-text) !important;
  text-align: left !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  margin: 0 0 16px;
  padding: 0;
}

/* --- Section Description --- */

#tonic-downloads .tonic-downloads__desc {
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--tc-text-muted) !important;
  line-height: 1.6 !important;
  font-style: normal !important;
  margin: -8px 0 16px;
  padding: 0;
}

#tonic-downloads .tonic-downloads__desc a {
  color: var(--tc-accent);
  text-decoration: none;
  transition: color var(--tc-transition);
}

#tonic-downloads .tonic-downloads__desc a:hover {
  color: var(--tc-accent-hover);
}

/* --- Videos Subheading --- */

#tonic-downloads .tonic-downloads__videos-heading {
  font-family: var(--tc-font-serif) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tc-text) !important;
  text-align: left !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  margin: 32px 0 12px;
  padding: 0;
}

/* --- Video Row --- */

.tonic-downloads__videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.tonic-downloads__video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  background: #000;
}

.tonic-downloads__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Video Title --- */

#tonic-downloads .tonic-downloads__video-title {
  font-family: var(--tc-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--tc-text-muted) !important;
  line-height: 1.4 !important;
  margin: 8px 0 0;
  padding: 0;
  text-align: center;
}

/* --- Card List --- */

.tonic-downloads__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Download Card --- */

.tonic-download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 16px 20px;
  transition: border-color var(--tc-transition);
}

.tonic-download-card:hover {
  border-color: #D0D0D0;
}

/* --- Thumbnail --- */

.tonic-download-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--tc-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tc-input-bg-alt);
  border: 1px solid var(--tc-border-light);
}

.tonic-download-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Info (name + subtitle/key) --- */

.tonic-download-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tonic-download-card__name {
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
  line-height: 1.4;
}

.tonic-download-card__product {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
  line-height: 1.3;
}

/* --- Share Key Value --- */

.tonic-download-card__key {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--tc-accent);
  line-height: 1.4;
  word-break: break-all;
}

.tonic-download-card__key-label {
  font-family: var(--tc-font-sans);
  color: var(--tc-text-muted);
}

/* --- Copy Button (Share Keys) --- */

.tonic-download-card__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  background: transparent;
  border: 1px solid var(--tc-accent);
  border-radius: var(--tc-radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--tc-transition);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.tonic-download-card__copy:hover {
  background: var(--tc-accent);
  color: #FFFFFF;
}

.tonic-download-card__copy svg {
  flex-shrink: 0;
}

/* --- Download Button (Downloads) --- */

.tonic-download-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  background: transparent;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--tc-transition);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.tonic-download-card__btn:hover {
  border-color: var(--tc-text);
  color: var(--tc-text);
}

.tonic-download-card__btn svg {
  flex-shrink: 0;
}

/* ==========================================================================
   12. DOWNLOADS / SHARE KEYS — RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {

  #tonic-downloads {
    gap: 24px;
  }

  #tonic-downloads .tonic-downloads__pill {
    font-size: 11px;
  }

  .tonic-downloads__videos {
    grid-template-columns: 1fr;
  }

  .tonic-download-card {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }

  .tonic-download-card__thumb {
    width: 48px;
    height: 48px;
  }

  .tonic-download-card__info {
    flex: 1;
    min-width: calc(100% - 76px); /* thumb + gap */
  }

  .tonic-download-card__name {
    font-size: 13px;
  }

  .tonic-download-card__key {
    font-size: 12px;
  }

  .tonic-download-card__key-label {
    display: block;
  }

  .tonic-download-card__copy,
  .tonic-download-card__btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ==========================================================================
   13. ACCOUNT DETAILS (/my-account/details/)
   Combined page: account info, addresses, payment methods.
   ========================================================================== */

/* --- Container --- */

#tonic-details {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* --- Section --- */

.tonic-details__section {
  display: flex;
  flex-direction: column;
}

/* --- Headings (IvyOra Display Light 28px — match downloads) --- */

#tonic-details .tonic-details__heading {
  font-family: var(--tc-font-serif) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tc-text) !important;
  text-align: left !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  margin: 0 0 16px;
  padding: 0;
}

/* --- Section Header (heading + edit button) --- */

.tonic-details__section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* --- Edit Button (text style) --- */

#tonic-details .tonic-details__edit-btn {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--tc-transition);
}

#tonic-details .tonic-details__edit-btn:hover {
  color: var(--tc-accent-hover);
}

/* --- Card (read-only display) --- */

.tonic-details-card {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 20px 24px;
}

/* --- Card Rows (label + value) --- */

.tonic-details-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
}

.tonic-details-card__row + .tonic-details-card__row {
  border-top: 1px solid var(--tc-border-light);
}

.tonic-details-card__label {
  font-family: var(--tc-font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text-muted);
  flex-shrink: 0;
  margin-right: 16px;
}

.tonic-details-card__value {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text);
  text-align: right;
}

/* --- Card Header (title + edit link — for addresses) --- */

.tonic-details-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.tonic-details-card__title {
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
}

.tonic-details__edit-link {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  text-decoration: none;
  transition: color var(--tc-transition);
}

.tonic-details__edit-link:hover {
  color: var(--tc-accent-hover);
}

/* --- Address Display --- */

.tonic-details-card__address {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text-muted);
  line-height: 1.7;
  font-style: normal;
}

/* --- Address Grid --- */

.tonic-details__address-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Empty State --- */

.tonic-details-card__empty {
  font-family: var(--tc-font-sans);
  font-size: 14px;
  color: var(--tc-text-light);
  font-style: normal;
}

/* --- Account Edit Form --- */

.tonic-details__form {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 24px;
}

.tonic-details__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.tonic-details__field {
  margin: 0 0 16px;
}

#tonic-details .tonic-details__field label {
  display: block;
  font-family: var(--tc-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tc-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
  font-style: normal !important;
}

#tonic-details .tonic-details__field label .required {
  color: var(--tc-error);
}

#tonic-details .tonic-details__field .input-text {
  width: 100%;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  color: var(--tc-text) !important;
  background: var(--tc-input-bg-alt) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  padding: 10px 14px !important;
  transition: border-color var(--tc-transition) !important;
  box-sizing: border-box;
}

#tonic-details .tonic-details__field .input-text:focus {
  border-color: var(--tc-accent) !important;
  outline: none !important;
}

/* --- Password Fieldset --- */

#tonic-details .tonic-details__password-fieldset {
  border: none;
  border-top: 1px solid var(--tc-border-light);
  margin: 8px 0 0;
  padding: 16px 0 0;
}

#tonic-details .tonic-details__password-fieldset legend {
  font-family: var(--tc-font-label) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tc-text) !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* --- Form Actions --- */

.tonic-details__form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.tonic-details__save-btn {
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--tc-primary);
  border: 1px solid var(--tc-primary);
  border-radius: var(--tc-radius);
  padding: 10px 24px;
  cursor: pointer;
  transition: var(--tc-transition);
}

.tonic-details__save-btn:hover {
  background: var(--tc-primary-hover);
  border-color: var(--tc-primary-hover);
}

.tonic-details__cancel-btn {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--tc-transition);
}

.tonic-details__cancel-btn:hover {
  color: var(--tc-text);
}

/* --- Payment Method Cards --- */

.tonic-details__methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tonic-details-card--method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.tonic-details-card__method-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tonic-details-card__method-name {
  font-family: var(--tc-font-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
}

.tonic-details-card__method-expires {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  color: var(--tc-text-muted);
}

.tonic-details-card__method-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tonic-details-card__method-default {
  font-family: var(--tc-font-label);
  font-size: 12px;
  font-weight: 500;
  color: #059669;
  background: #ECFDF5;
  padding: 3px 10px;
  border-radius: 100px;
}

.tonic-details-card__method-action {
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text-muted);
  text-decoration: none;
  transition: color var(--tc-transition);
}

.tonic-details-card__method-action:hover {
  color: var(--tc-text);
}

.tonic-details-card__method-action--delete:hover {
  color: var(--tc-error);
}

/* --- Add Payment Method Button --- */

.tonic-details__add-method-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--tc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-accent);
  text-decoration: none;
  margin-top: 12px;
  transition: color var(--tc-transition);
}

.tonic-details__add-method-btn:hover {
  color: var(--tc-accent-hover);
}

/* ==========================================================================
   14. ACCOUNT DETAILS — RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {

  #tonic-details {
    gap: 28px;
  }

  .tonic-details-card {
    padding: 16px 18px;
  }

  .tonic-details-card__row {
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
  }

  .tonic-details-card__value {
    text-align: left;
  }

  .tonic-details__form {
    padding: 18px 16px;
  }

  .tonic-details__form-grid {
    grid-template-columns: 1fr;
  }

  .tonic-details-card--method {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }

  .tonic-details__form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tonic-details__save-btn {
    text-align: center;
  }

  .tonic-details__cancel-btn {
    text-align: center;
    padding: 8px 0;
  }
}

/* ==========================================================================
   15. ADD PAYMENT METHOD (/my-account/add-payment-method/)
   Styles the WooCommerce default form to match the Tonic design system.
   ========================================================================== */

/* --- Form Container --- */

.woocommerce-account #add_payment_method {
  max-width: none;
}

.woocommerce-account #add_payment_method #payment.woocommerce-Payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* --- Payment Methods List --- */

.woocommerce-account #payment ul.payment_methods {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  list-style: none !important;
}

.woocommerce-account #payment ul.payment_methods li {
  margin-bottom: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --- Radio Buttons --- */

.woocommerce-account #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--tc-text) !important;
  margin-right: 8px !important;
}

/* --- Labels --- */

.woocommerce-account #payment label {
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tc-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* --- Payment Box (Stripe fields, etc.) --- */

.woocommerce-account #payment div.payment_box {
  background: var(--tc-input-bg-alt) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  padding: 16px !important;
  margin-top: 8px !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
}

.woocommerce-account #payment div.payment_box::before {
  display: none !important;
}

.woocommerce-account #payment div.payment_box p {
  font-family: var(--tc-font-sans) !important;
  font-size: 13px !important;
  color: var(--tc-text-muted) !important;
  margin: 0 0 12px !important;
  font-style: normal !important;
}

.woocommerce-account #payment div.payment_box .form-row {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account #payment div.payment_box label {
  font-family: var(--tc-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--tc-text-muted) !important;
}

.woocommerce-account #payment div.payment_box input[type="radio"] {
  accent-color: var(--tc-text) !important;
}

/* --- PayPal Button Container --- */

.woocommerce-account #payment .paypal-button-container,
.woocommerce-account #payment .paypal-button-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

/* --- Submit Button --- */

.woocommerce-account #add_payment_method .form-row {
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-account #add_payment_method #place_order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--tc-font-label) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  background: var(--tc-primary) !important;
  border: 1px solid var(--tc-primary) !important;
  border-radius: var(--tc-radius) !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: var(--tc-transition) !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

.woocommerce-account #add_payment_method #place_order:hover {
  background: var(--tc-primary-hover) !important;
  border-color: var(--tc-primary-hover) !important;
}

/* --- WooCommerce Notices on this page --- */

.woocommerce-account .woocommerce-add-payment-method .woocommerce-notice,
.woocommerce-account .woocommerce-add-payment-method .woocommerce-info,
.woocommerce-account .woocommerce-add-payment-method .woocommerce-error,
.woocommerce-account .woocommerce-add-payment-method .woocommerce-message {
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  font-style: normal !important;
}

/* ==========================================================================
   WOOCOMMERCE NOTICES — GLOBAL (My Account)
   Styling for "Account details changed successfully." etc.
   ========================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-notice {
  background: transparent !important;
  border: 1px solid #aaaaaa !important;
  border-left: 3px solid var(--tc-accent) !important;
  border-radius: 10px !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: var(--tc-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 14px !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  outline: none !important;
}

.woocommerce-account .woocommerce-message:focus,
.woocommerce-account .woocommerce-message:focus-visible,
.woocommerce-account .woocommerce-info:focus,
.woocommerce-account .woocommerce-info:focus-visible,
.woocommerce-account .woocommerce-notice:focus,
.woocommerce-account .woocommerce-notice:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide default WC icons, then render our own checkmark on success messages only */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-notice::before {
  content: none !important;
}

.woocommerce-account .woocommerce-message {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
}

.woocommerce-account .woocommerce-message::before {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6F4E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  font: inherit !important;
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-notice a {
  color: var(--tc-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.woocommerce-account ul.woocommerce-error,
.woocommerce-account .woocommerce-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 3px solid var(--tc-error) !important;
  border-radius: 10px !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: #991b1b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 14px !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  outline: none !important;
}

.woocommerce-account ul.woocommerce-error:focus,
.woocommerce-account ul.woocommerce-error:focus-visible,
.woocommerce-account .woocommerce-error:focus,
.woocommerce-account .woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.woocommerce-account .woocommerce-error li {
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  color: #991b1b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce-account .woocommerce-error::before {
  display: none !important;
}

/* ==========================================================================
   16. ADD PAYMENT METHOD — RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {

  .woocommerce-account #add_payment_method {
    max-width: 100%;
  }

  .woocommerce-account #add_payment_method #place_order {
    width: 100% !important;
  }
}

/* ==========================================================================
   17. EDIT ADDRESS (/my-account/edit-address/billing/)
   Styles the WooCommerce address form to match the Tonic design system.
   ========================================================================== */

/* --- Page Title --- */

.woocommerce-edit-address .woocommerce h3,
.woocommerce-edit-address .woocommerce h2 {
  font-family: var(--tc-font-serif) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--tc-text) !important;
  text-align: left !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

/* --- Form Container --- */

.woocommerce-edit-address .woocommerce-address-fields {
  background: var(--tc-card-bg);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  padding: 24px;
}

/* --- Form Rows --- */

.woocommerce-edit-address .form-row {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce-edit-address .form-row-first,
.woocommerce-edit-address .form-row-last {
  width: 48% !important;
  float: left !important;
}

.woocommerce-edit-address .form-row-first {
  margin-right: 4% !important;
}

.woocommerce-edit-address .form-row-wide {
  width: 100% !important;
  clear: both !important;
}

/* --- Labels --- */

.woocommerce-edit-address .form-row label {
  display: block !important;
  font-family: var(--tc-font-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tc-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
  font-style: normal !important;
}

.woocommerce-edit-address .form-row label .required {
  color: var(--tc-error) !important;
}

.woocommerce-edit-address .form-row label .optional {
  font-size: 11px !important;
  color: var(--tc-text-light) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- Text Inputs --- */

.woocommerce-edit-address .form-row .input-text,
.woocommerce-edit-address .form-row input[type="text"],
.woocommerce-edit-address .form-row input[type="email"],
.woocommerce-edit-address .form-row input[type="tel"] {
  width: 100% !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  color: var(--tc-text) !important;
  background: var(--tc-input-bg-alt) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  padding: 10px 14px !important;
  transition: border-color var(--tc-transition) !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
}

.woocommerce-edit-address .form-row .input-text:focus,
.woocommerce-edit-address .form-row input[type="text"]:focus,
.woocommerce-edit-address .form-row input[type="email"]:focus,
.woocommerce-edit-address .form-row input[type="tel"]:focus {
  border-color: var(--tc-accent) !important;
  outline: none !important;
}

/* --- Select / Dropdowns (mirrors checkout Select2 styling) --- */

.woocommerce-edit-address .select2-container {
  height: 42px !important;
}

.woocommerce-edit-address .select2-container .select2-selection,
.woocommerce-edit-address .select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  background: var(--tc-input-bg-alt) !important;
  outline: none !important;
  box-shadow: none !important;
}

.woocommerce-edit-address .select2-container .select2-dropdown {
  border: 1px solid var(--tc-border) !important;
  border-top: none !important;
}

.woocommerce-edit-address .select2-container--default .select2-results > .select2-results__options {
  margin: 0 !important;
}

.woocommerce-edit-address .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-edit-address .select2-container--default .select2-results__option--highlighted[data-selected],
.woocommerce-edit-address .select2-container--default .select2-results__option--highlighted {
  background: var(--tc-accent) !important;
  color: #FFFFFF !important;
}

.woocommerce-edit-address .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--tc-input-bg-alt) !important;
  color: var(--tc-text) !important;
}

.woocommerce-edit-address .select2-container--default .select2-results__option[aria-selected="true"]:hover {
  background: var(--tc-accent) !important;
  color: #FFFFFF !important;
}

.woocommerce-edit-address .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-edit-address .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--tc-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  color: var(--tc-text) !important;
  line-height: 42px !important;
  padding-left: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px !important;
}

/* When open, flatten the bottom corners */
.woocommerce-edit-address .select2-container--open .select2-selection--single {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Select form-rows need position:relative for dropdownParent positioning */
.woocommerce-edit-address .form-row:has(select) {
  position: relative;
}

/* Select2 dropdown container — flow naturally below the select field */
.woocommerce-edit-address .form-row > .select2-container--open {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}

.woocommerce-edit-address .form-row select,
.woocommerce-edit-address select#billing_country,
.woocommerce-edit-address select#billing_state {
  width: 100% !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 14px !important;
  color: var(--tc-text) !important;
  background: var(--tc-input-bg-alt) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: var(--tc-radius) !important;
  padding: 10px 14px !important;
  outline: none !important;
  box-shadow: none !important;
  height: 42px !important;
  box-sizing: border-box !important;
}

/* --- Hide ConvertKit opt-in (checkout only) --- */

.woocommerce-edit-address p#ckwc_opt_in_field,
.woocommerce-edit-address p[id="ckwc/opt-in_field"] {
  display: none !important;
}

/* --- Submit Button --- */

.woocommerce-edit-address .form-row button[type="submit"],
.woocommerce-edit-address .form-row input[type="submit"],
.woocommerce-edit-address .woocommerce-address-fields button[name="save_address"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--tc-font-label) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  background: var(--tc-primary) !important;
  border: 1px solid var(--tc-primary) !important;
  border-radius: var(--tc-radius) !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: var(--tc-transition) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  width: auto !important;
  margin-top: 8px !important;
}

.woocommerce-edit-address .form-row button[type="submit"]:hover,
.woocommerce-edit-address .form-row input[type="submit"]:hover,
.woocommerce-edit-address .woocommerce-address-fields button[name="save_address"]:hover {
  background: var(--tc-primary-hover) !important;
  border-color: var(--tc-primary-hover) !important;
}

/* --- Clear floats --- */

.woocommerce-edit-address .woocommerce-address-fields::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   18. EDIT ADDRESS — RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {

  .woocommerce-edit-address .woocommerce-address-fields {
    padding: 18px 16px;
  }

  .woocommerce-edit-address .form-row-first,
  .woocommerce-edit-address .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  .woocommerce-edit-address .form-row button[type="submit"],
  .woocommerce-edit-address .form-row input[type="submit"],
  .woocommerce-edit-address .woocommerce-address-fields button[name="save_address"] {
    width: 100% !important;
  }
}