/**
 * Love & Beyond — My Account
 *
 * Scoped to the account pages via the `lbn-` prefix so nothing here leaks into
 * Elementor-built pages. Palette matches the plugin's existing brand tokens
 * (see wp-content/plugins/loveandbeyond/assets/style.css).
 */

:root {
  --lbn-rose: #e7c0bc;
  --lbn-rose-deep: #c9948e;
  --lbn-rose-ink: #a97b75;
  --lbn-blush: #f5e6e4;
  --lbn-cream: #fefaf9;
  --lbn-ink: #584e45;
  --lbn-muted: #7a6a58;
  --lbn-line: #ece3df;
  --lbn-line-soft: #f2ebe8;
  --lbn-surface: #ffffff;
  --lbn-success: #2f8f5b;
  --lbn-success-bg: #e8f4ec;
  --lbn-amber: #c07a1e;
  --lbn-amber-bg: #fbf0e0;
  --lbn-warn: #9a7b12;
  --lbn-warn-bg: #fbf6df;
  --lbn-radius: 10px;
  --lbn-radius-sm: 6px;
}

/* ---------------------------------------------------------------- shell -- */

.woocommerce-account .woocommerce {
  color: var(--lbn-ink);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border: 0;
}

/* WooCommerce and the Elementor kit both colour these links; the extra
   specificity (and !important on the two contested properties) is what makes
   the active state readable rather than rose-on-grey. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  background: transparent !important;
  color: var(--lbn-muted) !important;
  text-decoration: none;
  border-radius: var(--lbn-radius-sm);
  font-size: 15px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--lbn-cream) !important;
  color: var(--lbn-ink) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
  background: var(--lbn-blush) !important;
  color: var(--lbn-ink) !important;
  font-weight: 500;
}

/* ---------------------------------------------------------------- cards -- */

.lbn-card {
  background: var(--lbn-surface);
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius);
  padding: 24px;
  margin-bottom: 20px;
}

/* Elementor's My Account widget styles `.woocommerce h2/h3` at specificity
   (0,4,1) and adds a 30px top margin to the first h2 — both outrank any
   practical class selector here, so these cards reset spacing and weight with
   !important. The theme's heading typeface is deliberately left alone. */
.woocommerce-account .lbn-card__title,
.woocommerce-account .lbn-journey__intro h3,
.woocommerce-account .lbn-sub-head h2 {
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.35;
}

.woocommerce-account .lbn-card__title {
  margin-bottom: 18px !important;
  font-size: 17px;
  color: var(--lbn-ink);
}

.woocommerce-account .lbn-journey__intro h3 {
  margin-bottom: 6px !important;
}

.lbn-greeting p {
  margin: 0 0 10px;
  color: var(--lbn-muted);
  line-height: 1.6;
}

.lbn-greeting p:last-child {
  margin-bottom: 0;
}

.lbn-greeting a {
  color: var(--lbn-rose-ink);
  text-decoration: none;
}

.lbn-greeting a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ stat tiles -- */

.lbn-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.lbn-stat {
  background: var(--lbn-surface);
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lbn-stat__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lbn-stat__value {
  font-size: 22px;
  line-height: 1.1;
  color: var(--lbn-ink);
}

.lbn-stat__label {
  font-size: 14px;
  color: var(--lbn-muted);
  margin-top: 2px;
}

.lbn-stat__link {
  font-size: 14px;
  color: var(--lbn-rose-ink);
  text-decoration: none;
}

.lbn-stat__link:hover {
  text-decoration: underline;
}

/* Icon discs — colour communicates category, matching the pill palette. */
.lbn-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lbn-icon svg {
  width: 20px;
  height: 20px;
}

.lbn-icon--rose {
  background: var(--lbn-blush);
  color: var(--lbn-rose-deep);
}

.lbn-icon--success {
  background: var(--lbn-success-bg);
  color: var(--lbn-success);
}

.lbn-icon--amber {
  background: var(--lbn-amber-bg);
  color: var(--lbn-amber);
}

/* -------------------------------------------------------------- activity -- */

.lbn-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lbn-activity li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lbn-line-soft);
}

.lbn-activity li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lbn-activity li:first-child {
  padding-top: 0;
}

.lbn-activity__title {
  color: var(--lbn-ink);
  text-decoration: none;
  font-size: 15px;
}

.lbn-activity__title:hover {
  color: var(--lbn-rose-ink);
}

.lbn-activity__date {
  font-size: 13px;
  color: var(--lbn-rose-ink);
  margin-top: 3px;
}

.lbn-empty {
  color: var(--lbn-muted);
  margin: 0;
}

/* ----------------------------------------------------------- pills/links -- */

.lbn-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

.lbn-pill--success {
  background: var(--lbn-success-bg);
  color: var(--lbn-success);
}

.lbn-pill--amber {
  background: var(--lbn-amber-bg);
  color: var(--lbn-amber);
}

.lbn-pill--rose {
  background: var(--lbn-rose);
  color: #fff;
}

.lbn-pill--warn {
  background: var(--lbn-warn-bg);
  color: var(--lbn-warn);
}

/* Needs action — must not blend in with cancelled/refunded. */
.lbn-pill--attention {
  background: var(--lbn-rose-deep);
  color: #fff;
}

.lbn-pill--muted {
  background: #f1eeec;
  color: var(--lbn-muted);
}

.lbn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lbn-rose-ink);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 18px;
  white-space: nowrap;
}

/* Without an explicit size the inline SVG expands and wraps the label. */
.lbn-back svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.lbn-back:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------- subscription -- */

.lbn-sub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lbn-sub-head h2 {
  font-size: 20px;
  color: var(--lbn-ink);
}

.lbn-sub-head__product {
  margin: 8px 0 0;
  color: var(--lbn-rose-ink);
  font-size: 15px;
}

/* Hero — the emotional anchor of the page, so it gets the blush treatment. */
.lbn-hero {
  background: var(--lbn-blush);
  border: 1px solid var(--lbn-rose);
  border-radius: var(--lbn-radius);
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.lbn-hero__label {
  font-size: 16px;
  color: var(--lbn-rose-ink);
  margin: 0;
}

.lbn-hero__date {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--lbn-ink);
}

.lbn-hero__count {
  background: var(--lbn-surface);
  border-radius: var(--lbn-radius-sm);
  padding: 14px 24px;
  text-align: center;
  margin-left: auto;
}

.lbn-hero__count small {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted);
}

.lbn-hero__count strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: var(--lbn-rose-ink);
  margin: 2px 0;
}

.lbn-hero__couple {
  text-align: right;
  margin-left: auto;
}

.lbn-hero__count + .lbn-hero__couple {
  margin-left: 0;
}

.lbn-hero__couple small {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted);
}

.lbn-hero__couple strong {
  display: block;
  font-weight: 500;
  color: var(--lbn-ink);
  margin-top: 3px;
}

/* Detail grid (start / next payment / end). */
.lbn-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}

.lbn-detail-grid dt {
  font-size: 13px;
  color: var(--lbn-muted);
  margin-bottom: 6px;
}

.lbn-detail-grid dd {
  margin: 0;
  color: var(--lbn-ink);
  font-size: 15px;
}

.lbn-detail-grid dd small {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted);
  margin-top: 3px;
}

/*
 * The card's expiry, after the card that carries it. Inline with a middot
 * rather than on its own line: it is one fact about one card, and the column is
 * a third of the card wide, so a second line here pushes the grid taller for
 * every subscription in the list.
 */
.lbn-sub-card-expiry::before {
  content: '\00B7';
  margin: 0 5px;
}

/*
 * What paid for one order, in the summary page's header card. One fact, so it
 * is not put in the three-column grid the subscription pages use — a lone cell
 * in a third of the width wraps a card label that has room to sit on one line.
 */
.lbn-order-payment {
  grid-template-columns: minmax(0, 1fr);
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--lbn-line-soft);
}

/* In the list view the grid sits under the card header rather than a title. */
.lbn-subscriptions .lbn-detail-grid {
  margin-top: 20px;
}

.lbn-subscriptions .lbn-sub-head h2 a {
  color: inherit;
  text-decoration: none;
}

.lbn-subscriptions .lbn-sub-head h2 a:hover {
  color: var(--lbn-rose-ink);
}

/* -------------------------------------------------------------- buttons -- */

.lbn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--lbn-line-soft);
}

/* The way back from a finished subscription. Its note sits under the button
   rather than beside it, so the column reflow stacks them in reading order.
   Elementor zeroes `p` bottom margins inside .woocommerce-MyAccount-content,
   which is why the spacing here is retaken with !important, the same as in
   the cancel panel. */
.lbn-actions--restart {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lbn-actions__note {
  margin: 0 !important;
  font-size: 0.9rem;
  color: var(--lbn-muted);
  max-width: 46ch;
}

.lbn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--lbn-radius-sm);
  border: 1px solid var(--lbn-line);
  background: var(--lbn-surface);
  color: var(--lbn-ink);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lbn-btn:hover {
  background: var(--lbn-cream);
  border-color: var(--lbn-rose);
  color: var(--lbn-ink);
}

.lbn-btn--primary {
  background: var(--lbn-rose-deep);
  border-color: var(--lbn-rose-deep);
  color: #fff;
}

.lbn-btn--primary:hover {
  background: var(--lbn-rose-ink);
  border-color: var(--lbn-rose-ink);
  color: #fff;
}

.lbn-btn--small {
  padding: 8px 16px;
  font-size: 13px;
}

/* --------------------------------------------------------------- journey -- */

.lbn-journey__intro {
  text-align: center;
  margin-bottom: 24px;
}

.lbn-journey__intro h3 {
  margin-bottom: 6px;
  font-size: 19px;
  color: var(--lbn-ink);
}

.lbn-journey__intro p {
  margin: 0;
  color: var(--lbn-muted);
  font-size: 15px;
}

.lbn-journey__counts {
  display: flex;
  justify-content: center;
  gap: 44px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--lbn-line-soft);
  margin-bottom: 8px;
  text-align: center;
}

.lbn-journey__counts strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--lbn-ink);
}

.lbn-journey__counts span {
  font-size: 13px;
  color: var(--lbn-muted);
}

.lbn-journey__counts .is-current strong,
.lbn-journey__counts .is-current span {
  color: var(--lbn-rose-ink);
}

/* Timeline: markers sit on a continuous rule drawn by the ::before rail. */
.lbn-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lbn-timeline__item {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 18px 0;
}

/* The connecting rail, hidden on the final item. */
.lbn-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 58px;
  bottom: -18px;
  width: 1px;
  background: var(--lbn-line);
}

.lbn-timeline__marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lbn-rose);
  background: var(--lbn-surface);
  color: var(--lbn-rose-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lbn-timeline__marker svg {
  width: 18px;
  height: 18px;
}

.lbn-timeline__item--delivered .lbn-timeline__marker {
  background: var(--lbn-rose-deep);
  border-color: var(--lbn-rose-deep);
  color: #fff;
}

.lbn-timeline__body {
  flex: 1 1 auto;
  min-width: 0;
}

.lbn-timeline__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lbn-timeline__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--lbn-ink);
}

.lbn-timeline__month {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--lbn-muted);
}

.lbn-timeline__date {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--lbn-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.lbn-timeline__date svg {
  width: 14px;
  height: 14px;
  color: var(--lbn-rose-deep);
}

.lbn-timeline__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--lbn-rose-ink);
  text-decoration: none;
}

.lbn-timeline__link:hover {
  text-decoration: underline;
}

/* The next box, and anything actually in flight, get lifted out. */
.lbn-timeline__item--next .lbn-timeline__body,
.lbn-timeline__item--on_its_way .lbn-timeline__body,
.lbn-timeline__item--issue .lbn-timeline__body {
  background: var(--lbn-blush);
  border: 1px solid var(--lbn-rose);
  border-radius: var(--lbn-radius);
  padding: 18px;
}

.lbn-timeline__item--next .lbn-timeline__name,
.lbn-timeline__item--next .lbn-timeline__month {
  color: var(--lbn-rose-ink);
}

/* A box that needs attention should not look celebratory. */
.lbn-timeline__item--issue .lbn-timeline__body {
  background: #fdf3f2;
  border-color: #e6b3ad;
}

.lbn-timeline__item--issue .lbn-timeline__marker {
  border-color: #d99b94;
  color: #c0392b;
}

/* Paused/stopped boxes are still listed, but visibly inactive. */
.lbn-timeline__item--paused,
.lbn-timeline__item--stopped {
  opacity: 0.62;
}

.lbn-timeline__item--paused .lbn-timeline__marker,
.lbn-timeline__item--stopped .lbn-timeline__marker {
  border-color: var(--lbn-line);
  color: var(--lbn-muted);
}

/* ----------------------------------------------------------- alert card -- */

/*
 * Failed renewals are common, so this has to read as help rather than an
 * error: warm surface, no red, one obvious action. Red would say "you did
 * something wrong" when the usual cause is an expired card.
 */
.lbn-alert {
  background: var(--lbn-blush);
  border: 1px solid var(--lbn-rose-deep);
  border-left-width: 4px;
  border-radius: var(--lbn-radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.lbn-alert__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.woocommerce-account .lbn-alert__title {
  margin: 0 0 8px !important;
  font-size: 17px;
  font-weight: 500 !important;
  line-height: 1.35;
  color: var(--lbn-ink);
}

.lbn-alert__body {
  margin: 0;
  color: var(--lbn-ink);
  font-size: 15px;
  line-height: 1.6;
}

.lbn-alert__meta {
  margin: 14px 0 0;
  padding-left: 60px;
  font-size: 14px;
  color: var(--lbn-muted);
}

.lbn-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-left: 60px;
}

.lbn-alert__foot {
  margin: 14px 0 0;
  padding-left: 60px;
  font-size: 14px;
  color: var(--lbn-muted);
}

.lbn-icon--alert {
  background: var(--lbn-surface);
  color: var(--lbn-rose-deep);
}

/* A row in the orders table that still needs paying. */
.woocommerce-account .lbn-table tr.lbn-row--needs-payment td {
  background: var(--lbn-blush);
}

.woocommerce-account .lbn-table tr.lbn-row--needs-payment td:first-child {
  border-left: 3px solid var(--lbn-rose-deep);
  padding-left: 12px;
}

.lbn-journey__halt {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--lbn-radius-sm);
  border-left: 3px solid var(--lbn-rose-deep);
  background: var(--lbn-cream);
  color: var(--lbn-ink);
  font-size: 15px;
  line-height: 1.6;
}

.lbn-hero__count--message {
  font-size: 17px !important;
  line-height: 1.4;
}

.lbn-journey__outro-note {
  display: inline-block;
  margin-top: 6px;
  color: var(--lbn-rose-ink);
}

.lbn-timeline__note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lbn-rose);
  font-size: 14px;
  color: var(--lbn-muted);
}

.lbn-timeline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lbn-journey__outro {
  text-align: center;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--lbn-line-soft);
  color: var(--lbn-muted);
  font-size: 15px;
}

/* ------------------------------------------------- wedding details form -- */

.lbn-details-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lbn-line-soft);
}

.lbn-timeline__item--next + .lbn-details-form,
.lbn-hero .lbn-details-form {
  border-top: 0;
}

.lbn-field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.lbn-field label {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted);
  margin-bottom: 6px;
}

.lbn-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-surface);
  color: var(--lbn-ink);
  /* 16px minimum: iOS Safari zooms the whole page on focus below this. */
  font-size: 16px;
}

.lbn-field input:focus {
  outline: none;
  border-color: var(--lbn-rose-deep);
  box-shadow: 0 0 0 3px var(--lbn-blush);
}

.lbn-form-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--lbn-muted);
}

/* Prompt shown when no wedding date has been captured yet. */
.lbn-hero--prompt {
  display: block;
}

.lbn-hero--prompt .lbn-hero__label {
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------- tables -- */

/* Wide tables scroll inside their own wrapper so the page never scrolls
   sideways. The wrapper must always be a scroll container, not only under a
   media query, or the table's min-width escapes it. */
.lbn-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

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

/* Elementor's My Account widget colours table cells and links itself, so text
   colour is forced here (same reason as the button block below). */
.woocommerce-account .lbn-table th {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--lbn-muted) !important;
  padding: 0 12px 12px 0;
  border-bottom: 1px solid var(--lbn-line);
}

.woocommerce-account .lbn-table td,
.woocommerce-account .lbn-table td time {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--lbn-line-soft);
  color: var(--lbn-ink) !important;
  font-size: 15px;
  vertical-align: middle;
}

.woocommerce-account .lbn-table td time {
  padding: 0;
  border: 0;
}

.lbn-table tr:last-child td {
  border-bottom: 0;
}

.lbn-table td:last-child,
.lbn-table th:last-child {
  padding-right: 0;
  text-align: right;
}

.woocommerce-account .lbn-table a:not(.lbn-btn) {
  color: var(--lbn-rose-ink) !important;
  text-decoration: none;
}

.woocommerce-account .lbn-table a:not(.lbn-btn):hover {
  text-decoration: underline;
}

/* Totals list. */
.lbn-totals {
  margin: 0;
}

.lbn-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lbn-line-soft);
  font-size: 15px;
}

.lbn-totals__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lbn-totals__row--total {
  font-weight: 500;
  border-top: 1px solid var(--lbn-line);
  border-bottom: 0;
}

.lbn-totals__row small {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted);
  margin-top: 3px;
}

.lbn-totals__row .lbn-free {
  color: var(--lbn-success);
}

/* Addresses. */
.lbn-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.lbn-address__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Elementor styles bare <address> with a border, padding and its own colour,
   at a specificity our class alone can't beat — hence the !important resets. */
.woocommerce-account .lbn-address address {
  font-style: normal;
  line-height: 1.7;
  color: var(--lbn-muted) !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.lbn-address .lbn-card__title {
  margin: 0;
}

/* Subscription updates / notes. */
.lbn-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lbn-notes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--lbn-line-soft);
}

.lbn-notes li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lbn-notes .lbn-notes__date {
  font-size: 13px;
  color: var(--lbn-muted);
  margin: 0 0 5px;
}

.lbn-notes .lbn-notes__body {
  margin: 0;
  color: var(--lbn-ink);
}

/* ---------------------------------------------------------------- orders -- */

.lbn-orders-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lbn-orders-head__note {
  margin: 14px 0 0;
  color: var(--lbn-muted);
  font-size: 15px;
  line-height: 1.6;
}

.lbn-orders-head__note a {
  color: var(--lbn-rose-ink);
  text-decoration: none;
}

.lbn-orders-head__note a:hover {
  text-decoration: underline;
}

.lbn-orders-filter select {
  padding: 11px 14px;
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-surface);
  color: var(--lbn-ink);
  /* 16px minimum: iOS Safari zooms the whole page on focus below this. */
  font-size: 16px;
  min-width: 160px;
}

.lbn-orders-filter select:focus {
  outline: none;
  border-color: var(--lbn-rose-deep);
  box-shadow: 0 0 0 3px var(--lbn-blush);
}

.lbn-order-number {
  color: var(--lbn-rose-ink);
  text-decoration: none;
}

.lbn-order-number:hover {
  text-decoration: underline;
}

/* Total sits above a muted item count, as in the design. */
.woocommerce-account .lbn-table--orders td small {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted) !important;
  margin-top: 3px;
}

.lbn-order-total {
  color: var(--lbn-ink);
}

.lbn-pagination {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.lbn-tracking-number {
  align-self: center;
  font-size: 14px;
  color: var(--lbn-muted);
}

/* ----------------------------------------------------------------- forms -- */

.lbn-field-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Core's form rows are <p> carrying `form-row-first`/`--last` at 47% width,
   and Elementor fills the inputs grey. The grid owns layout here, so both are
   overridden — hence the !important on width and the field colours. */
.woocommerce-account .lbn-form .form-row,
.woocommerce-account .lbn-form .woocommerce-form-row {
  float: none !important;
  width: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: block;
}

/* Field appearance applies to every form in the account area, including the
   ones we do not template (edit-address, add-payment-method), so they match
   without owning those core files. Note the scope: `.woocommerce-MyAccount-content`
   exists only when signed **in**. The signed-out forms restate all of this
   under `.lbn-auth` at the end of the file. */
.woocommerce-account .woocommerce-MyAccount-content form label {
  display: block;
  font-size: 13px;
  color: var(--lbn-muted) !important;
  margin-bottom: 6px;
  font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="date"],
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content form textarea,
.woocommerce-account .woocommerce-MyAccount-content form .select2-selection {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lbn-line) !important;
  border-radius: var(--lbn-radius-sm) !important;
  background: var(--lbn-surface) !important;
  color: var(--lbn-ink) !important;
  /* 16px minimum: iOS Safari zooms the whole page on focus below this. */
  font-size: 16px !important;
}

.woocommerce-account .woocommerce-MyAccount-content form input:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
  outline: none;
  border-color: var(--lbn-rose-deep) !important;
  box-shadow: 0 0 0 3px var(--lbn-blush);
}

/* Address form: core stacks these as 47% floats; a grid is tidier and
   collapses cleanly on mobile. */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-account .lbn-form .required {
  color: var(--lbn-rose-deep);
  border: 0;
}

.woocommerce-account .lbn-form .lbn-form-hint em {
  font-style: normal;
}

.lbn-fieldset {
  border: 0;
  border-top: 1px solid var(--lbn-line-soft);
  margin: 24px 0 0;
  padding: 22px 0 0;
}

.woocommerce-account .lbn-fieldset legend {
  font-size: 15px;
  font-weight: 500 !important;
  color: var(--lbn-ink) !important;
  padding: 0;
  margin-bottom: 16px;
}

.lbn-form-actions {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--lbn-line-soft);
}

/* ------------------------------------- core WooCommerce markup (baseline) -- */

/*
 * Endpoints we do not template (add-payment-method, order details tables)
 * still render core markup styled by Elementor in its own blues and greys.
 * These rules give that markup the account look so the section stays
 * consistent without owning every core template. Signed-out pages are not
 * covered here -- see the `.lbn-auth` block at the end of the file.
 */

/* Elementor's widget CSS paints these buttons #5bc0de at a specificity no
   class selector reaches, so colour is forced here. Our own .lbn-btn rules
   below must therefore also be !important to win against this block. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--lbn-radius-sm);
  border: 1px solid var(--lbn-rose-deep) !important;
  background: var(--lbn-rose-deep) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--lbn-rose-ink) !important;
  border-color: var(--lbn-rose-ink) !important;
  color: #fff !important;
}

/* Our own buttons must not be swallowed by the rule above. */
.woocommerce-account .woocommerce-MyAccount-content .lbn-btn {
  border: 1px solid var(--lbn-line) !important;
  background: var(--lbn-surface) !important;
  color: var(--lbn-ink) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-btn:hover {
  background: var(--lbn-cream) !important;
  border-color: var(--lbn-rose) !important;
  color: var(--lbn-ink) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-btn--primary {
  background: var(--lbn-rose-deep) !important;
  border-color: var(--lbn-rose-deep) !important;
  color: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-btn--primary:hover {
  background: var(--lbn-rose-ink) !important;
  border-color: var(--lbn-rose-ink) !important;
  color: #fff !important;
}

/* Notices — core renders these with a blue rule and grey fill. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--lbn-rose-deep);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-cream);
  color: var(--lbn-ink);
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
  color: var(--lbn-rose-deep);
}

.woocommerce-account .woocommerce-error {
  border-left-color: #c0392b;
}

.woocommerce-account .woocommerce-error::before {
  color: #c0392b;
}

/* Order details tables rendered by core order-details.php. */
.woocommerce-account .lbn-order-details .woocommerce-table,
.woocommerce-account .lbn-order-details table.shop_table {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
}

.woocommerce-account .lbn-order-details table tr:last-child th,
.woocommerce-account .lbn-order-details table tr:last-child td {
  border-bottom: 0 !important;
}

/* The "× 2" quantity is a <strong>, not a link — keep it quiet. */
.woocommerce-account .lbn-order-details .product-quantity {
  color: var(--lbn-muted) !important;
  font-weight: 400;
}

.woocommerce-account .lbn-order-details table th,
.woocommerce-account .lbn-order-details table td {
  border: 0 !important;
  border-bottom: 1px solid var(--lbn-line-soft) !important;
  padding: 14px 12px 14px 0;
  color: var(--lbn-ink) !important;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

/* Column headers and the row labels down the tfoot are both <th>. */
.woocommerce-account .lbn-order-details table thead th,
.woocommerce-account .lbn-order-details table tfoot th {
  font-size: 13px;
  font-weight: 500;
  color: var(--lbn-muted) !important;
}

.woocommerce-account .lbn-order-details table thead th {
  border-bottom: 1px solid var(--lbn-line) !important;
}

.lbn-order-details table td:last-child,
.lbn-order-details table th:last-child {
  text-align: right;
  padding-right: 0;
}

.lbn-order-details table tfoot tr:last-child th,
.lbn-order-details table tfoot tr:last-child td {
  border-bottom: 0;
  font-weight: 500;
}

.woocommerce-account .lbn-order-details h2,
.woocommerce-account .lbn-order-details h3 {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--lbn-ink);
  margin: 24px 0 14px !important;
}

.woocommerce-account .lbn-order-details > :first-child,
.woocommerce-account .lbn-order-details h2:first-child {
  margin-top: 0 !important;
}

/* Customer/address block under the order table. */
.woocommerce-account .lbn-order-details .woocommerce-customer-details address {
  font-style: normal;
  line-height: 1.7;
  color: var(--lbn-muted) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.woocommerce-account .lbn-order-details .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/*
 * WooCommerce clearfixes `.col2-set` with `::before/::after { content: " " }`.
 * Those pseudo-elements become grid items, so ::before claims cell 1 and pushes
 * billing into cell 2 and shipping onto row 2. Removing the content drops them
 * back out of the grid; the float they were clearing is gone anyway.
 */
.woocommerce-account .lbn-order-details .woocommerce-columns::before,
.woocommerce-account .lbn-order-details .woocommerce-columns::after {
  content: none;
}

.woocommerce-account .lbn-order-details .woocommerce-column {
  width: auto;
  float: none;
}

/* -------------------------------------------------------------- pay page -- */

/*
 * Pay for order. Core renders a bare table, a grey payment box and a purple
 * button on an Elementor page with no account chrome at all — nothing tells you
 * what you are paying for. `checkout/form-pay.php` adds the header card; these
 * rules place it and bring the rest of the form onto the brand.
 *
 * Scoped to the `woocommerce-order-pay` body class so none of it reaches the
 * ordinary checkout.
 */
.woocommerce-order-pay .lbn-pay {
  max-width: 640px;
  margin: 0 auto 24px;
}

.woocommerce-order-pay .lbn-pay__head {
  margin-bottom: 0;
}

.woocommerce-order-pay .lbn-pay__title {
  margin: 0 0 6px !important;
  font-size: 24px;
  font-weight: 500 !important;
  line-height: 1.25;
  color: var(--lbn-ink);
}

/* What is being paid for, in the customer's words: "Your August 2026 box". */
.woocommerce-order-pay .lbn-pay__for {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--lbn-rose-ink);
}

.woocommerce-order-pay .lbn-pay__box {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lbn-blush);
  font-size: 12px;
  color: var(--lbn-rose-ink);
}

.woocommerce-order-pay .lbn-pay__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--lbn-line-soft);
}

.woocommerce-order-pay .lbn-pay__meta dt {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lbn-muted);
}

.woocommerce-order-pay .lbn-pay__meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--lbn-ink);
}

.woocommerce-order-pay .lbn-pay__total {
  font-size: 17px !important;
}

.woocommerce-order-pay .lbn-pay__reassure {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-blush);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lbn-ink);
}

.woocommerce-order-pay .lbn-back {
  color: var(--lbn-rose-ink) !important;
}

/* --- the form itself --- */

.woocommerce-order-pay form#order_review {
  max-width: 640px;
  margin: 0 auto;
}

.woocommerce-order-pay form#order_review .shop_table {
  width: 100%;
  /* `collapse` discards the table's own border, so the card outline vanishes. */
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  background: var(--lbn-surface);
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius);
  overflow: hidden;
}

.woocommerce-order-pay form#order_review .shop_table th,
.woocommerce-order-pay form#order_review .shop_table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lbn-line-soft);
  color: var(--lbn-ink) !important;
  font-size: 15px;
  text-align: left;
}

.woocommerce-order-pay form#order_review .shop_table thead th {
  font-size: 13px;
  font-weight: 400;
  color: var(--lbn-muted) !important;
  background: var(--lbn-cream);
}

.woocommerce-order-pay form#order_review .shop_table td.product-quantity,
.woocommerce-order-pay form#order_review .shop_table td.product-subtotal,
.woocommerce-order-pay form#order_review .shop_table td.product-total,
.woocommerce-order-pay form#order_review .shop_table th.product-quantity,
.woocommerce-order-pay form#order_review .shop_table th.product-total {
  text-align: right;
}

.woocommerce-order-pay form#order_review .shop_table tfoot tr:last-child th,
.woocommerce-order-pay form#order_review .shop_table tfoot tr:last-child td {
  border-bottom: 0;
  font-size: 16px;
}

/* WooCommerce paints this box grey; the card treatment matches the header. */
.woocommerce-order-pay form#order_review #payment {
  background: var(--lbn-surface) !important;
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius);
  padding: 22px;
}

.woocommerce-order-pay form#order_review #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--lbn-line-soft);
}

.woocommerce-order-pay form#order_review #payment ul.payment_methods li {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.woocommerce-order-pay form#order_review #payment ul.payment_methods label {
  color: var(--lbn-ink) !important;
  font-size: 15px;
}

.woocommerce-order-pay form#order_review #payment .payment_box {
  background: var(--lbn-cream) !important;
  border-radius: var(--lbn-radius-sm);
  color: var(--lbn-muted) !important;
  font-size: 14px;
}

.woocommerce-order-pay form#order_review #payment .payment_box p {
  color: var(--lbn-muted) !important;
}

/* The privacy and terms links ship in WooCommerce's blue, the one colour the
   rest of the site never uses. Same rule the account pages are held to. */
.woocommerce-order-pay form#order_review #payment a {
  color: var(--lbn-rose-ink) !important;
  text-decoration: underline;
}

.woocommerce-order-pay form#order_review .woocommerce-privacy-policy-text p,
.woocommerce-order-pay form#order_review .woocommerce-terms-and-conditions-wrapper label {
  color: var(--lbn-muted) !important;
  font-size: 14px;
  line-height: 1.6;
}

.woocommerce-order-pay form#order_review input[type='radio'],
.woocommerce-order-pay form#order_review input[type='checkbox'] {
  accent-color: var(--lbn-rose-deep);
}

/* Core ships this as WooCommerce purple (#7f54b3), which appears nowhere else
   on the site — and it is the last thing a worried customer looks at. */
.woocommerce-order-pay form#order_review #place_order {
  display: block;
  width: 100%;
  padding: 14px 24px;
  border: 1px solid var(--lbn-rose-deep) !important;
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-rose-deep) !important;
  color: #fff !important;
  font-size: 16px;
  cursor: pointer;
}

.woocommerce-order-pay form#order_review #place_order:hover {
  background: var(--lbn-rose-ink) !important;
  border-color: var(--lbn-rose-ink) !important;
}

/* --- notices on this endpoint --- */

/*
 * WooCommerce prints these as a full-bleed block with an icon in its own font,
 * and Elementor's checkout widget then strips the padding, the background and
 * the border colour off it — leaving a bare 14px sentence pinned to the left
 * edge of the viewport, 440px away from the form it belongs to, with the
 * unresolved glyph rendering as an empty blue box underneath it.
 *
 * The `::before` goes entirely: the icon is the one part of it Elementor leaves
 * alone, and it is drawn in WooCommerce's info blue, a colour that appears
 * nowhere else on the site.
 */
.woocommerce-order-pay .woocommerce-info,
.woocommerce-order-pay .woocommerce-message,
.woocommerce-order-pay .woocommerce-error {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto 20px;
  padding: 14px 18px !important;
  border: 1px solid var(--lbn-line) !important;
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-blush) !important;
  color: var(--lbn-ink) !important;
  font-size: 15px;
  line-height: 1.6;
  list-style: none;
}

/* An error is a different claim from an instruction, so it gets the attention
   tone the rest of the account uses — amber, never red. */
.woocommerce-order-pay .woocommerce-error {
  border-color: var(--lbn-amber) !important;
  background: var(--lbn-amber-bg) !important;
}

.woocommerce-order-pay .woocommerce-info::before,
.woocommerce-order-pay .woocommerce-message::before,
.woocommerce-order-pay .woocommerce-error::before {
  content: none !important;
}

/* Core renders errors as a `<ul>`; the bullets and their indent are not wanted. */
.woocommerce-order-pay .woocommerce-error li,
.woocommerce-order-pay .woocommerce-info li,
.woocommerce-order-pay .woocommerce-message li {
  margin: 0;
  list-style: none;
}

/* --- changing the payment method --- */

/*
 * Same card as the pay page, on the same endpoint: `?change_gateway_flag=`
 * hands the page to the subscription plugin, whose form opens on a product
 * table with no heading above it. `lbn-change-payment.php` puts the heading,
 * the subscription and the way back.
 *
 * Its meta row carries two facts where the pay page's carries four, and drops
 * to one when a subscription has no next payment, so the columns are sized to
 * the content rather than counted.
 */
.woocommerce-order-pay .lbn-pay--change .lbn-pay__meta {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ------------------------------------------------------------ responsive -- */

/*
 * Elementor's My Account widget drops the sidebar at 1024px and the nav becomes
 * a full-width stack: six rows, 246px, before any content. On a 390x844 phone
 * that is a third of the screen spent on links — it pushed the dashboard's
 * failed-payment alert, the whole reason that customer opened the page, below
 * the fold. As a horizontal strip it costs one row.
 *
 * Everything visible has to stay reachable: the row scrolls, `my-account.js`
 * brings the current tab into view and marks which edges have more behind them.
 * Without JS the strip still scrolls, it just loses the fades.
 */
@media (max-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--lbn-line);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    gap: 4px;
    /* Keeps the active pill clear of the rail underneath it. */
    padding: 0 0 8px !important;
    overflow-x: auto;
    /* Swiping the strip to its end must not start dragging the page with it. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }

  /* Elementor's widget sizes these links at specificity (0,4,1): `display:
     block` and `width: 100%`, which in a flex row makes every tab as wide as
     the phone. Both need !important to come back to content width. */
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
    width: auto !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center;
    width: auto !important;
    /* 44px — Apple's minimum. These are the page's primary controls. */
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
    border-radius: 999px !important;
  }

  /* Once the row can scroll, the active pill is the only "you are here". */
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover {
    background: var(--lbn-blush) !important;
    color: var(--lbn-ink) !important;
  }

  /* Fade only an edge that has something behind it — a permanent fade on the
     last tab, at the end of the scroll, just reads as a rendering fault. */
  .woocommerce-account .woocommerce-MyAccount-navigation ul[data-overflow='end'] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul[data-overflow='start'] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul[data-overflow='both'] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}

@media (max-width: 900px) {
  .lbn-stats,
  .lbn-detail-grid,
  .lbn-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lbn-addresses,
  .woocommerce-account .lbn-order-details .woocommerce-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .lbn-stats,
  .lbn-detail-grid,
  .lbn-field-row,
  .lbn-field-row--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two columns, not one: order number, date, amount and status all stay
     above the fold with the heading. */
  .woocommerce-order-pay .lbn-pay__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lbn-orders-head__row {
    align-items: stretch;
  }

  .lbn-orders-filter,
  .lbn-orders-filter select {
    width: 100%;
  }

  /* Drop the icon indent so the alert body keeps its width on a phone. */
  .lbn-alert__meta,
  .lbn-alert__actions,
  .lbn-alert__foot {
    padding-left: 0;
  }

  .lbn-alert__actions .lbn-btn {
    width: 100%;
  }

  .woocommerce-account .woocommerce-address-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .lbn-card,
  .lbn-hero {
    padding: 18px;
  }

  .lbn-hero__count,
  .lbn-hero__couple {
    margin-left: 0;
    text-align: left;
  }

  .lbn-journey__counts {
    gap: 24px;
  }

  .lbn-sub-head {
    flex-direction: column;
  }

  .lbn-table {
    min-width: 460px;
  }

  /*
   * The orders table stacks into cards instead of scrolling sideways. Scrolling
   * hid the Actions column, which is where "Pay" lives — the single most
   * important control on this page for a customer whose renewal bounced.
   */
  .woocommerce-account .lbn-table--orders,
  .woocommerce-account .lbn-table--orders tbody,
  .woocommerce-account .lbn-table--orders tr,
  .woocommerce-account .lbn-table--orders td {
    display: block;
    min-width: 0;
    width: auto;
  }

  .woocommerce-account .lbn-table--orders thead {
    display: none;
  }

  .woocommerce-account .lbn-table--orders tr {
    border: 1px solid var(--lbn-line);
    border-radius: var(--lbn-radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
  }

  .woocommerce-account .lbn-table--orders tr:last-child {
    margin-bottom: 0;
  }

  .woocommerce-account .lbn-table--orders td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: right;
  }

  /* The header label comes from the cell's data-title. */
  .woocommerce-account .lbn-table--orders td[data-title]::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--lbn-muted);
    text-align: left;
  }

  .woocommerce-account .lbn-table--orders td.lbn-cell-actions {
    display: block;
    text-align: left;
    padding-top: 12px !important;
    margin-top: 8px;
    border-top: 1px solid var(--lbn-line-soft) !important;
  }

  .woocommerce-account .lbn-table--orders td.lbn-cell-actions .lbn-btn {
    width: 100%;
    margin-bottom: 8px;
  }

  /* Unpaid rows read as a card that needs attention. */
  .woocommerce-account .lbn-table--orders tr.lbn-row--needs-payment {
    background: var(--lbn-blush);
    border-color: var(--lbn-rose-deep);
    border-left-width: 4px;
  }

  .woocommerce-account .lbn-table--orders tr.lbn-row--needs-payment td {
    background: transparent;
  }

  .woocommerce-account .lbn-table--orders tr.lbn-row--needs-payment td:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* "Pay" leads on a row that needs paying. */
  .woocommerce-account .lbn-table--orders td.lbn-cell-actions .lbn-btn.pay {
    background: var(--lbn-rose-deep) !important;
    border-color: var(--lbn-rose-deep) !important;
    color: #fff !important;
  }
}

/* ---------------------------------------------------- before you go (cancel) --
 * The cancellation step. Rendered inline on ?lbn_confirm_cancel=1 and lifted to
 * a dialog by my-account.js — one set of markup for both, so the layout below
 * has to read as a panel either way. Nothing here is red: leaving is a decision
 * the customer is entitled to make, and alarm styling on their own subscription
 * page reads as a scolding. Blush, like every other attention surface here.
 */
.lbn-leaving[hidden] {
  display: none;
}

.lbn-leaving {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lbn-leaving__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(88, 78, 69, 0.45);
}

/* A column, so the box list is the only part that ever scrolls. Scrolling the
 * panel as a whole would push "Keep my boxes" below the fold on a long schedule
 * — the one control that must always be to hand.
 */
.lbn-leaving__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  background: var(--lbn-surface);
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius);
  padding: 28px;
  box-shadow: 0 18px 48px rgba(88, 78, 69, 0.22);
}

.lbn-leaving__panel > * {
  flex: 0 0 auto;
}

.lbn-leaving__title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  color: var(--lbn-ink);
}

.lbn-leaving__body {
  margin: 0 0 18px;
  color: var(--lbn-muted);
  font-size: 14px;
  line-height: 1.6;
}

.lbn-leaving__boxes {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lbn-line-soft);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-cream);
  /* Takes whatever height the panel has left, so a full twelve-box schedule
   * shows in full on any normal screen and only scrolls when it truly cannot
   * fit. A fixed cap hid the last rows — including the final box, the one row
   * with the most pull in it — behind a scroll with nothing to say so.
   */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.lbn-leaving__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--lbn-ink);
  border-bottom: 1px solid var(--lbn-line-soft);
}

.lbn-leaving__box:last-child {
  border-bottom: 0;
}

.lbn-leaving__box .lbn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--lbn-rose-deep);
}

.lbn-leaving__box .lbn-icon svg {
  width: 100%;
  height: 100%;
}

.lbn-leaving__box-number {
  font-weight: 600;
  flex: 0 0 auto;
}

.lbn-leaving__box-month {
  color: var(--lbn-muted);
  margin-right: auto;
}

.lbn-leaving__foot {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-blush);
  color: var(--lbn-ink);
  font-size: 14px;
  line-height: 1.6;
}

/* The one fact on the pause step a customer cannot guess: boxes are skipped,
   not moved. Given more weight than body text because it is the reason the
   step exists, and bordered so it reads as the headline of the panel. Blush,
   not red — pausing is a legitimate thing to want, and this is information
   rather than a warning. */
.lbn-leaving__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--lbn-rose);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-blush);
}

.lbn-leaving__note p {
  margin: 0;
  color: var(--lbn-ink);
  font-size: 15px;
  line-height: 1.6;
}

.lbn-leaving__note .lbn-icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.lbn-leaving__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Leaving stays one click away — it is just no longer the only click. */
.lbn-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--lbn-muted);
  text-decoration: underline;
}

.lbn-btn--quiet:hover {
  background: transparent;
  border-color: transparent;
  color: var(--lbn-ink);
}

/* The panel is fixed; without this the page behind it scrolls under the dialog. */
body.lbn-leaving-open {
  overflow: hidden;
}

/* Elementor's My Account widget paints links and headings inside
 * .woocommerce-MyAccount-content at (0,4,1) — see the note in CLAUDE.md. The
 * panel lives inside that container, so every colour it sets has to be retaken.
 */
.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__title {
  color: var(--lbn-ink) !important;
}

/* Elementor zeroes the bottom margin on p/ul/h3 in this container, which
 * collapsed the panel into one block — the blush footer sat flush against the
 * "Keep my boxes" button. Retake every gap rather than only the one that showed.
 */
.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__title {
  margin: 0 0 10px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__body {
  margin: 0 0 18px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__boxes {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__foot {
  margin: 0 0 20px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__note {
  margin: 0 0 18px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__note p {
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__panel a.lbn-btn {
  color: var(--lbn-ink) !important;
  text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__panel a.lbn-btn--primary {
  background: var(--lbn-rose-deep) !important;
  border-color: var(--lbn-rose-deep) !important;
  color: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-content .lbn-leaving__panel a.lbn-btn--quiet {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--lbn-muted) !important;
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  .lbn-leaving {
    padding: 0;
    align-items: flex-end;
  }

  .lbn-leaving__panel {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--lbn-radius) var(--lbn-radius) 0 0;
    padding: 22px 18px 24px;
  }

  /* Stacked, so the affirmative action is the one under the thumb. */
  .lbn-leaving__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lbn-leaving__actions .lbn-btn {
    width: 100%;
  }
}

/* ------------------------------------------- signed-out account forms -- */

/*
 * Lost password and reset password are reached signed **out**, and that is what
 * made them the odd pages out. The "core WooCommerce markup (baseline)" block
 * above names lost-password in its comment but is scoped to
 * `.woocommerce-MyAccount-content` — a wrapper the Elementor widget renders
 * only for a signed-in customer. Signed out it emits a bare
 * `<div class="woocommerce">`, so not one of those rules ever applied here.
 *
 * Everything the two forms need is restated below, scoped to `.lbn-auth` so it
 * cannot reach the signed-in pages and double up on the block above.
 *
 * `!important` throughout, for the reason given there: Elementor styles
 * `.woocommerce-ResetPassword .input-text` at (0,5,0) and
 * `.woocommerce-ResetPassword .button` at (0,6,0), which no practical class
 * selector reaches. The submit buttons dodge the second by dropping the
 * `button` class; the fields cannot dodge the first, so they out-shout it.
 */

.lbn-auth {
  max-width: 520px;
  margin-inline: auto;
}

/* Elementor draws the form itself as a 50%-wide bordered grey box. The card is
   doing that job now, so the form goes back to being a plain container.
 *
 * The login and register forms get the same treatment plus `min-height`, which
 * Elementor sets so the two columns of core's `#customer_login` match height.
 * Stacked in one column that is no longer wanted, and it showed as a bordered
 * box with a long empty tail below the register button. */
.woocommerce-account .lbn-auth .woocommerce-ResetPassword,
.woocommerce-account .lbn-auth form.login,
.woocommerce-account .lbn-auth form.register {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: inherit !important;
}

/* Elementor also gives them a fixed `height` and a 32px bottom margin, both to
   make core's two columns line up. `height` is the one that mattered: it held
   the register form at 342px against 206px of content, so the card rendered
   with an empty tail below the button. The card's own padding closes the
   bottom now. */
.woocommerce-account .lbn-auth form.login,
.woocommerce-account .lbn-auth form.register {
  margin-bottom: 0 !important;
}

/* Keep the notice above the card the same width as the card, or an "invalid
   email" error spans the container while the form it belongs to does not. */
.woocommerce-lost-password .woocommerce-notices-wrapper {
  max-width: 520px;
  margin-inline: auto;
}

.woocommerce-account .lbn-auth__intro {
  margin: 0 0 20px !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lbn-muted) !important;
}

.woocommerce-account .lbn-auth__note {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lbn-muted) !important;
}

.woocommerce-account .lbn-auth .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: block;
}

.woocommerce-account .lbn-auth form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lbn-muted) !important;
}

.woocommerce-account .lbn-auth .required {
  border: 0;
  text-decoration: none;
  color: var(--lbn-rose-deep);
}

.woocommerce-account .lbn-auth form input[type="text"],
.woocommerce-account .lbn-auth form input[type="email"],
.woocommerce-account .lbn-auth form input[type="password"] {
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid var(--lbn-line) !important;
  border-radius: var(--lbn-radius-sm) !important;
  background: var(--lbn-surface) !important;
  color: var(--lbn-ink) !important;
  /* 16px minimum: below it iOS Safari zooms the whole page on focus. Elementor
     sets these fields to 14px, which is what made that bite here. */
  font-size: 16px !important;
}

.woocommerce-account .lbn-auth form input:focus {
  outline: none;
  border-color: var(--lbn-rose-deep) !important;
  box-shadow: 0 0 0 3px var(--lbn-blush);
  color: var(--lbn-ink) !important;
}

.woocommerce-account .lbn-auth .lbn-form-hint {
  display: block;
  margin: 8px 0 0 !important;
}

.woocommerce-account .lbn-auth__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid var(--lbn-line-soft);
}

.woocommerce-account .lbn-auth button[type="submit"] {
  padding: 10px 20px !important;
  border: 1px solid var(--lbn-rose-deep) !important;
  border-radius: var(--lbn-radius-sm) !important;
  background: var(--lbn-rose-deep) !important;
  color: #fff !important;
  font-size: 14px !important;
}

.woocommerce-account .lbn-auth button[type="submit"]:hover {
  border-color: var(--lbn-rose-ink) !important;
  background: var(--lbn-rose-ink) !important;
  color: #fff !important;
}

/* Elementor colours every `a` inside the widget #5bc0de at (0,4,1), which
   reaches the two link-buttons on the confirmation card. */
.woocommerce-account .lbn-auth a.lbn-btn {
  color: var(--lbn-ink) !important;
  text-decoration: none;
}

.woocommerce-account .lbn-auth a.lbn-btn--primary {
  color: #fff !important;
}

.woocommerce-account .lbn-auth__alt {
  margin: 20px 0 0 !important;
  font-size: 14px;
  color: var(--lbn-muted) !important;
}

.woocommerce-account .lbn-auth__alt a {
  color: var(--lbn-rose-ink) !important;
  text-decoration: underline;
}

.woocommerce-account .lbn-auth__alt a:hover {
  color: var(--lbn-ink) !important;
}

/*
 * WooCommerce injects the strength meter after any `autocomplete="new-password"`
 * field, so this shows on the reset form *and* on Account details. Left alone it
 * arrives in core's own red/yellow/green, the only place those appear in the
 * account area.
 */
.woocommerce-account .woocommerce-password-strength {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--lbn-line);
  border-radius: var(--lbn-radius-sm);
  background: var(--lbn-cream);
  color: var(--lbn-muted);
  font-size: 13px;
  text-align: left;
}

.woocommerce-account .woocommerce-password-strength.short,
.woocommerce-account .woocommerce-password-strength.bad {
  border-color: #e6c9c9;
  background: #fbeeee;
  color: #9a3b3b;
}

.woocommerce-account .woocommerce-password-strength.good {
  border-color: #e8d9b5;
  background: var(--lbn-warn-bg);
  color: var(--lbn-warn);
}

.woocommerce-account .woocommerce-password-strength.strong {
  border-color: #bfe0cc;
  background: var(--lbn-success-bg);
  color: var(--lbn-success);
}

.woocommerce-account .woocommerce-password-hint {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--lbn-muted);
}

@media (max-width: 640px) {
  .lbn-auth,
  .woocommerce-lost-password .woocommerce-notices-wrapper {
    max-width: none;
  }

  .woocommerce-account .lbn-auth__actions .lbn-btn,
  .woocommerce-account .lbn-auth button[type="submit"] {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * The login and registration page.
 *
 * Signed out, `/my-account/` renders core's `#customer_login`: two equal 50%
 * columns under two bare `<h2>`s, in Elementor's own styling, with no opening
 * of any kind. It was the last account surface the branding never reached, for
 * the same reason the reset pages did not -- see the block above.
 *
 * The template restacks it into one column and reuses `.lbn-auth`, so the field,
 * label, button and link rules above already apply. Only what is new to this
 * page is below: the opening, the card rhythm, the checkbox row, and the
 * secondary button on the register card.
 *
 * `.lbn-auth--login` widens nothing. Keeping the 520px column shared with the
 * reset pages is the point: the two pages link to each other, and a customer
 * bouncing between them should not watch the layout change width underneath.
 * ------------------------------------------------------------------------- */

.woocommerce-account .lbn-auth__opening {
  margin: 0 0 24px;
  text-align: center;
}

/* Elementor styles `.woocommerce h2` at (0,4,1) inside its widget, which is
   what rendered "Login" as an unbranded default heading. */
.woocommerce-account .lbn-auth__heading {
  margin: 0 0 8px !important;
  color: var(--lbn-ink) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.woocommerce-account .lbn-auth__lede {
  margin: 0 !important;
  color: var(--lbn-muted) !important;
  font-size: 15px;
  line-height: 1.6;
}

/* Margin rather than a flex gap: Elementor zeroes bottom margins on children
   inside its widget, which is the same trap the cancellation panel hit, so the
   space below the card has to be stated rather than inherited. */
.woocommerce-account .lbn-auth__card + .lbn-auth__footer {
  margin-top: 18px !important;
}

/* Sign in carries two footer links, "Create an account" and "Choose your plan".
   The second is a further step down and sits closer to the first than the first
   does to the card. */
.woocommerce-account .lbn-auth__footer + .lbn-auth__footer {
  margin-top: 6px !important;
}

.woocommerce-account .lbn-auth__footer--shop {
  font-size: 13px;
}


.woocommerce-account .lbn-auth__remember {
  margin: 0 0 4px !important;
}

.woocommerce-account .lbn-auth__remember label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--lbn-muted) !important;
  font-size: 14px !important;
  cursor: pointer;
}

.woocommerce-account .lbn-auth__remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--lbn-rose-deep);
  flex: 0 0 auto;
}

/* The lost-password link sits inside the sign-in form, below the button, so it
   must not carry the top border `.lbn-auth__actions` draws. */
.woocommerce-account .lbn-auth .lost_password {
  margin: 14px 0 0 !important;
  padding: 0;
  border: 0;
}

.woocommerce-account .lbn-auth__footer {
  text-align: center;
}

/* Core prints the privacy policy text inside the register form via
   `woocommerce_register_form`. It arrives as an unstyled paragraph and is the
   longest text on the page, so it is set down to a footnote. */
.woocommerce-account .lbn-auth .woocommerce-privacy-policy-text p {
  margin: 0 0 18px !important;
  color: var(--lbn-muted) !important;
  font-size: 13px;
  line-height: 1.55;
}

.woocommerce-account .lbn-auth .woocommerce-privacy-policy-text a {
  color: var(--lbn-rose-ink) !important;
  text-decoration: underline;
}

/* Signed out there is no `.woocommerce-MyAccount-content`, so the notice
   wrapper that carries "Unknown email address" is unstyled and full-width
   while the card it belongs to is 520px. Matched, as the reset pages match it. */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
  max-width: 520px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
    max-width: none;
  }

  .woocommerce-account .lbn-auth__heading {
    font-size: 22px !important;
  }
}