/* ============================================================
   Customer account pages (login, register, account, addresses,
   order, reset/activate). DS-native, tokens only.
   ============================================================ */
.lh-account { padding-block: var(--section-pad-top) var(--section-pad-bottom); }

/* ---- Centered auth column (login / register / reset / activate) ---- */
.lh-account--auth .lh-container { max-width: 460px; }
.lh-account__head { text-align: center; margin-bottom: var(--space-8); }
.lh-account__eyebrow { display: block; margin-bottom: var(--space-3); color: var(--color-primary); }
.lh-account__title { font-family: var(--font-display); font-size: var(--font-h2); margin: 0; }
.lh-account__subtext { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--font-body-md); }

.lh-account__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.lh-account__form { display: flex; flex-direction: column; gap: var(--space-5); }
.lh-account__form .lh-button { margin-top: var(--space-2); }
.lh-account__row { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .lh-account__row--2 { grid-template-columns: 1fr 1fr; } }

.lh-account__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.lh-account__forgot-row { display: flex; justify-content: flex-end; margin: var(--space-2) 0 0; }
.lh-account__forgot { font-size: var(--font-body-sm); color: var(--color-primary); }
.lh-account__forgot:hover { text-decoration: underline; }

.lh-account__alt {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: var(--font-body-sm);
  color: var(--text-muted);
}
.lh-account__alt a { color: var(--color-primary); font-weight: var(--weight-medium); }
.lh-account__alt a:hover { text-decoration: underline; }

/* Field errors (Shopify form.errors) */
.lh-account__errors {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 32%, transparent);
  color: var(--color-error);
  font-size: var(--font-body-sm);
}
.lh-account__errors ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.lh-account__success {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--text-body);
  font-size: var(--font-body-sm);
}

/* ---- Login: recover-password toggle (CSS :target, no-JS) ---- */
#lh-recover { display: none; }
#lh-recover:target { display: block; }
#lh-recover:target ~ #lh-login { display: none; }
html.lh-recover-active #lh-recover { display: block; }
html.lh-recover-active #lh-login { display: none; }

/* ============================================================
   Account dashboard (orders + sidebar)
   ============================================================ */
.lh-account--dash .lh-container { max-width: var(--page-max); }
.lh-account__topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-8);
}
.lh-account__greeting { font-family: var(--font-display); font-size: var(--font-h2); margin: 0; }
.lh-account__greeting span { color: var(--color-primary); }

/* ---- Sidebar tabs (Overview / Orders / Membership / Addresses / Profile) ----
   Mobile: a horizontal scrollable pill strip above the content. Desktop: a
   fixed-width vertical rail on the left. Every panel below is visible by
   default (no [hidden] in the markup) — assets/account-tabs.js adds
   `lh-account--tabbed` to the section root, and only THAT class makes the
   `:not(.is-active)` rule below take effect, so a no-JS visitor still gets
   every panel, just stacked instead of tabbed. */
.lh-account__layout { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .lh-account__layout { grid-template-columns: 220px 1fr; align-items: start; gap: var(--space-8); }
}

.lh-account__nav {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.lh-account__nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .lh-account__nav { flex-direction: column; gap: var(--space-1); padding: 0; overflow-x: visible; }
}

.lh-account__nav-link {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.lh-account__nav-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lh-account__nav-link.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-action);
}
@media (min-width: 900px) {
  .lh-account__nav-link {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
  }
  .lh-account__nav-link.is-active { background: var(--surface-sunken); color: var(--color-primary); }
}

.lh-account__nav-logout {
  display: none;
  color: var(--text-muted);
  font-size: var(--font-body-sm);
}
.lh-account__nav-logout:hover { color: var(--color-primary); text-decoration: underline; }
@media (min-width: 900px) {
  .lh-account__nav-logout {
    display: block;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
  }
}

.lh-account__content { min-width: 0; }
.lh-account__tabpanel { min-width: 0; }
.lh-account--tabbed .lh-account__tabpanel:not(.is-active) { display: none; }

.lh-account__overview-grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .lh-account__overview-grid { grid-template-columns: 1fr 1fr; } }
.lh-account__overview-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.lh-account__overview-card h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--font-body-lg); margin: 0 0 var(--space-3);
}
.lh-account__overview-card p { color: var(--text-body); font-size: var(--font-body-sm); margin: 0; }
.lh-account__overview-card--membership {
  background: var(--color-accent-soft); border-color: var(--color-accent);
}
.lh-account__overview-card--membership h3 { color: var(--color-primary); }

.lh-account__section-title { font-family: var(--font-display); font-size: var(--font-h4); margin: 0 0 var(--space-4); }

/* Orders table */
.lh-orders { width: 100%; border-collapse: collapse; font-size: var(--font-body-sm); }
.lh-orders th, .lh-orders td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.lh-orders thead th { color: var(--text-muted); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; font-size: var(--font-caption); }
.lh-orders tbody tr:hover { background: var(--surface-sunken); }
.lh-orders a { color: var(--color-primary); font-weight: var(--weight-medium); }

/* Responsive: stack order rows on small screens */
@media (max-width: 639px) {
  .lh-orders, .lh-orders thead, .lh-orders tbody, .lh-orders tr, .lh-orders td { display: block; }
  .lh-orders thead { display: none; }
  .lh-orders tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); }
  .lh-orders td { border: none; padding: var(--space-1) 0; display: flex; justify-content: space-between; gap: var(--space-4); }
  .lh-orders td::before { content: attr(data-label); color: var(--text-muted); font-weight: var(--weight-medium); }
}

/* Status pill */
.lh-status {
  display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--font-caption); font-weight: var(--weight-semibold); white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-body);
}
.lh-status--paid, .lh-status--fulfilled { background: color-mix(in srgb, var(--color-instock) 14%, transparent); color: var(--color-instock); }
.lh-status--pending, .lh-status--unfulfilled { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }

.lh-account__empty {
  padding: var(--space-10) var(--space-6); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted);
}

.lh-account__address-block { font-style: normal; line-height: var(--leading-body); color: var(--text-body); font-size: var(--font-body-sm); }
.lh-account__panel-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); color: var(--color-primary); font-weight: var(--weight-medium); font-size: var(--font-body-sm); background: none; border: 0; padding: 0; cursor: pointer; }
.lh-account__panel-link:hover { text-decoration: underline; }

.lh-account__since { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--font-body-sm); }

.lh-account__guest { max-width: 32rem; margin: 0 auto; text-align: center; }
.lh-account__guest .lh-account__greeting { margin-bottom: var(--space-3); }
.lh-account__guest p { color: var(--text-muted); margin: 0 0 var(--space-6); }

/* ============================================================
   Addresses page
   ============================================================ */
.lh-addresses .lh-container { max-width: 880px; }
.lh-addresses__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.lh-addresses__head-actions { display: flex; gap: var(--space-3); }
.lh-addresses__list { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .lh-addresses__list { grid-template-columns: 1fr 1fr; } }
.lh-address-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.lh-address-card__badge { display: inline-block; margin-bottom: var(--space-3); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary); font-size: var(--font-caption); font-weight: var(--weight-semibold); }
.lh-address-card__body { font-style: normal; line-height: var(--leading-body); color: var(--text-body); font-size: var(--font-body-sm); }
.lh-address-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.lh-address-card__actions button {
  appearance: none; background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--font-body-sm); color: var(--text-body); cursor: pointer;
}
.lh-address-card__actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }

.lh-address-form { margin-top: var(--space-6); }
.lh-address-form[hidden] { display: none; }
.lh-address-form__grid { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .lh-address-form__grid--2 { grid-template-columns: 1fr 1fr; } }
.lh-address-form__check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-body-sm); color: var(--text-body); }
.lh-address-form__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

.lh-field-native { display: flex; flex-direction: column; gap: var(--space-2); }
.lh-field-native > span { font-size: var(--font-body-sm); font-weight: var(--weight-medium); color: var(--text-heading); }
.lh-field-native select,
.lh-field-native input {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--font-body-md);
  background: var(--surface-card); color: var(--text-body);
}
.lh-field-native select:focus,
.lh-field-native input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }

/* ============================================================
   Single order page
   ============================================================ */
.lh-order .lh-container { max-width: 1000px; }
.lh-order__head { margin-bottom: var(--space-8); }
.lh-order__title { font-family: var(--font-display); font-size: var(--font-h2); margin: 0 0 var(--space-2); }
.lh-order__date { color: var(--text-muted); font-size: var(--font-body-sm); }
.lh-order__back { margin: 0 0 var(--space-3); }
.lh-order__cancelled { margin-top: var(--space-4); }
.lh-order__layout { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .lh-order__layout { grid-template-columns: 1fr 320px; align-items: start; } }

.lh-order-table { width: 100%; border-collapse: collapse; font-size: var(--font-body-sm); }
.lh-order-table th, .lh-order-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.lh-order-table thead th { color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: var(--font-caption); }
.lh-order-table td.lh-num, .lh-order-table th.lh-num { text-align: right; }
.lh-order-table tfoot td { border-bottom: none; }
.lh-order-table tfoot tr:last-child td { font-weight: var(--weight-bold); color: var(--text-price); font-size: var(--font-body-md); border-top: 2px solid var(--border-strong); }
.lh-order-line__title { font-weight: var(--weight-medium); color: var(--text-heading); }
.lh-order-line__variant { color: var(--text-muted); font-size: var(--font-caption); margin-top: 2px; }

.lh-order__panel {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5);
}
.lh-order__panel h2 { font-family: var(--font-display); font-size: var(--font-body-lg); margin: 0 0 var(--space-3); }
.lh-order__panel address { font-style: normal; line-height: var(--leading-body); color: var(--text-body); font-size: var(--font-body-sm); }