:root {
  --ff-cj-green: #0d4b36;
  --ff-cj-green-bright: #169b50;
  --ff-cj-ink: #101b17;
  --ff-cj-muted: #61756c;
  --ff-cj-border: rgba(13, 75, 54, .12);
  --ff-cj-glass: rgba(255, 255, 255, .84);
  --ff-cj-shadow: 0 18px 55px rgba(25, 52, 42, .09);
}

/* Complete the customer journey with the same clear glass language used by the catalogue. */
#account-account,
#account-address,
#account-edit,
#account-password,
#account-newsletter,
#account-transaction,
#account-download,
#account-reward,
#account-order,
#account-wishlist {
  padding-bottom: 120px;
}

#account-address #content,
#account-edit #content,
#account-password #content,
#account-newsletter #content,
#account-transaction #content,
#account-download #content,
#account-reward #content {
  min-width: 0;
}

#account-address #content > h1,
#account-edit #content > h1,
#account-password #content > h1,
#account-newsletter #content > h1,
#account-transaction #content > h1,
#account-download #content > h1,
#account-reward #content > h1 {
  margin: 0 0 18px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,247,241,.86));
  box-shadow: var(--ff-cj-shadow);
  color: var(--ff-cj-ink);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.045em;
}

#account-address #address,
#account-edit form,
#account-password form,
#account-newsletter form,
#account-transaction table,
#account-download .table-responsive,
#account-reward .table-responsive {
  margin-bottom: 18px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--ff-cj-border);
  border-radius: 24px;
  background: var(--ff-cj-glass);
  box-shadow: var(--ff-cj-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

#account-address #address .table-responsive,
#account-download .table-responsive,
#account-reward .table-responsive {
  overflow: hidden;
  padding: 0;
}

#account-address table,
#account-transaction table,
#account-download table,
#account-reward table {
  margin: 0;
}

#account-address table td,
#account-transaction table td,
#account-download table td,
#account-reward table td,
#account-address table th,
#account-transaction table th,
#account-download table th,
#account-reward table th {
  padding: 15px 16px;
  border-color: rgba(13,75,54,.08);
  vertical-align: middle;
}

#account-address table thead,
#account-transaction table thead,
#account-download table thead,
#account-reward table thead {
  background: rgba(224, 244, 234, .72);
}

#account-edit fieldset,
#account-password fieldset,
#account-newsletter fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#account-edit legend,
#account-password legend {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ff-cj-border);
  color: var(--ff-cj-ink);
  font-size: 1.1rem;
  font-weight: 850;
}

#account-edit .form-control,
#account-edit .form-select,
#account-password .form-control,
#account-newsletter .form-control,
#account-newsletter .form-select {
  min-height: 50px;
  border: 1px solid var(--ff-cj-border);
  border-radius: 14px;
  background: rgba(250,253,251,.92);
}

#account-edit .form-control:focus,
#account-edit .form-select:focus,
#account-password .form-control:focus,
#account-newsletter .form-control:focus,
#account-newsletter .form-select:focus {
  border-color: rgba(22,155,80,.55);
  box-shadow: 0 0 0 4px rgba(22,155,80,.11);
}

#account-address .btn-primary,
#account-edit .btn-primary,
#account-password .btn-primary,
#account-newsletter .btn-primary,
#account-transaction .btn-primary,
#account-download .btn-primary,
#account-reward .btn-primary {
  min-height: 46px;
  padding-inline: 19px;
  border: 0;
  border-radius: 14px;
  background: var(--ff-cj-green);
  color: #fff;
  font-weight: 800;
}

#account-address .btn-light,
#account-edit .btn-light,
#account-password .btn-light,
#account-newsletter .btn-light {
  min-height: 46px;
  border: 1px solid var(--ff-cj-border);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  color: var(--ff-cj-green);
  font-weight: 750;
}

.ff-account-page .ff-account-hero,
.ff-account-page .ff-register-header,
.ff-account-page .ff-list-page-header {
  border: 1px solid rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,247,240,.84));
}

.ff-account-page .ff-account-avatar,
.ff-account-page .ff-account-section-title > i,
.ff-account-page .ff-list-page-header > i {
  background: rgba(22,155,80,.12);
  color: var(--ff-cj-green);
}

.ff-account-page .ff-account-stats > a,
.ff-account-page .ff-account-grid > section,
.ff-account-page .ff-account-extra {
  border-color: var(--ff-cj-border);
  background: var(--ff-cj-glass);
  box-shadow: var(--ff-cj-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.ff-account-page .ff-account-links > a:hover,
.ff-account-page .ff-account-links > a:focus-visible {
  background: rgba(224,244,234,.72);
  color: var(--ff-cj-green);
}

.ff-account-support > i {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #e5f8ec;
  color: #128c4a;
}

.ff-account-support > a {
  padding: 11px 15px;
  border-radius: 13px;
  background: var(--ff-cj-green);
  color: #fff;
}

/* Checkout polish: shipping remains a required customer preference and M-Pesa/cash stays the sole payment choice. */
#checkout-checkout .ff-checkout-panel,
#checkout-checkout .card,
#checkout-checkout fieldset,
#checkout-cart .card,
#checkout-cart .table-responsive {
  border-color: var(--ff-cj-border);
  background: var(--ff-cj-glass);
  box-shadow: var(--ff-cj-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

#checkout-checkout .btn-primary:not([id*="cart"]),
#checkout-checkout button[type="submit"]:not(.ff-add-to-cart),
#checkout-cart .btn-primary:not(.ff-add-to-cart) {
  border-color: var(--ff-cj-green);
  background: var(--ff-cj-green);
  color: #fff;
}

@media (max-width: 767.98px) {
  #account-account,
  #account-address,
  #account-edit,
  #account-password,
  #account-newsletter,
  #account-transaction,
  #account-download,
  #account-reward,
  #account-order,
  #account-wishlist {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
    padding-left: 12px !important;
  }

  #account-address #content > h1,
  #account-edit #content > h1,
  #account-password #content > h1,
  #account-newsletter #content > h1,
  #account-transaction #content > h1,
  #account-download #content > h1,
  #account-reward #content > h1 {
    padding: 22px 18px;
    border-radius: 22px;
    font-size: 2rem;
  }

  #account-address #address,
  #account-edit form,
  #account-password form,
  #account-newsletter form,
  #account-transaction table,
  #account-download .table-responsive,
  #account-reward .table-responsive {
    padding: 16px;
    border-radius: 20px;
  }

  #account-edit .row.mb-3,
  #account-password .row.mb-3,
  #account-newsletter .row.mb-3 {
    display: block;
  }

  #account-edit .row.mb-3 > *,
  #account-password .row.mb-3 > *,
  #account-newsletter .row.mb-3 > * {
    width: 100%;
  }

  #account-address table,
  #account-transaction table,
  #account-download table,
  #account-reward table {
    min-width: 620px;
  }

  .ff-account-page .ff-account-extra {
    align-items: stretch;
    flex-direction: column;
  }

  .ff-account-page .ff-account-extra > a {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ff-account-page *,
  #checkout-checkout * {
    scroll-behavior: auto !important;
  }
}