/* LENOVA FORGE — owned commerce surfaces (cart, checkout, account, quote).
   Component styles for the `lnv-` markup contract in docs/FUNNEL-SPEC.md.
   Tokens come from the shared static-build bundle; every use carries a solid
   fallback so a missing bundle degrades to a legible dark page, never a white
   flash. No dependency on WooCommerce's own stylesheets — those are dequeued. */

/* ------------------------------------------------------------- progress -- */

.lnv-steps-bar {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  padding: 0;
  border: 1px solid var(--color-border, #313236);
  background: var(--color-surface, #1d1e20);
}

.lnv-steps-bar li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 0.6rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #a8a5a0);
  border-inline-end: 1px solid var(--color-border, #313236);
  text-align: center;
}

.lnv-steps-bar li:last-child { border-inline-end: 0; }

.lnv-steps-bar li[aria-current='step'] {
  color: var(--ink-inverse, #1b1a1c);
  background: var(--color-accent, #db972a);
  font-weight: 600;
}

.lnv-steps-bar .lnv-steps-bar__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border: 1px solid currentColor;
  font-size: 0.62rem;
}

.lnv-steps-bar li[aria-current='step'] .lnv-steps-bar__n { border-color: var(--ink-inverse, #1b1a1c); }

@media (max-width: 560px) {
  .lnv-steps-bar li span:not(.lnv-steps-bar__n) { display: none; }
  .lnv-steps-bar li { padding: 0.6rem 0.3rem; }
}

/* ---------------------------------------------------------- line items -- */

.lnv-lines { margin: 0; padding: 0; list-style: none; }

.lnv-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: clamp(0.7rem, 2vw, 1.1rem);
  align-items: start;
  padding: clamp(0.9rem, 2vw, 1.2rem) 0;
  border-block-start: 1px solid var(--color-border-soft, #2a2b2e);
}

.lnv-line:first-child { border-block-start: 0; }

.lnv-line__media {
  display: block;
  inline-size: 84px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border-soft, #2a2b2e);
  background: var(--color-surface-raised, #242528);
}

.lnv-line__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.lnv-line__title {
  display: block;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--color-text-primary, #eceae6);
  text-decoration: none;
}

.lnv-line__title:hover { color: var(--color-accent, #db972a); }

.lnv-line__meta {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #a8a5a0);
}

.lnv-line__meta span + span::before {
  content: '·';
  margin: 0 0.45rem;
  color: var(--color-border, #313236);
}

.lnv-line__price {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-primary, #eceae6);
  white-space: nowrap;
}

.lnv-line__unit {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary, #a8a5a0);
}

.lnv-line__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: 0.7rem;
  flex-wrap: wrap;
}

.lnv-line__remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body, sans-serif);
  font-size: 0.82rem;
  color: var(--color-text-secondary, #a8a5a0);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lnv-line__remove:hover { color: var(--color-danger, #d97862); }

@media (max-width: 620px) {
  .lnv-line { grid-template-columns: 64px minmax(0, 1fr); }
  .lnv-line__media { inline-size: 64px; }
  .lnv-line__price { grid-column: 2; text-align: start; margin-block-start: 0.4rem; }
}

/* ------------------------------------------------------ quantity input -- */

.lnv-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #313236);
  background: var(--color-surface-raised, #242528);
}

.lnv-qty button {
  inline-size: 2.2rem;
  background: none;
  border: 0;
  color: var(--color-text-primary, #eceae6);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.lnv-qty button:hover { color: var(--color-accent, #db972a); }
.lnv-qty button:disabled { opacity: 0.4; cursor: not-allowed; }

.lnv-qty input {
  inline-size: 3rem;
  border: 0 !important;
  border-inline: 1px solid var(--color-border, #313236) !important;
  background: transparent !important;
  color: var(--color-text-primary, #eceae6) !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 16px !important; /* iOS: no focus zoom */
  padding: 0.5rem 0.25rem !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.lnv-qty input::-webkit-outer-spin-button,
.lnv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------- checkout -- */

.lnv-checkout { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }

@media (min-width: 1000px) {
  .lnv-checkout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
  .lnv-checkout__aside { position: sticky; top: 96px; }
}

.lnv-checkout__section { margin-block-end: clamp(1.4rem, 3vw, 2.1rem); }

.lnv-checkout__section > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--color-border-soft, #2a2b2e);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary, #eceae6);
}

.lnv-checkout__section > h2 .lnv-step-n {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--color-accent, #db972a);
}

/* ------------------------------------------------------------- fields -- */

.lnv-fields { display: grid; gap: 0.95rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lnv-field { display: flex; flex-direction: column; gap: 0.35rem; grid-column: span 2; }
.lnv-field--half { grid-column: span 1; }

@media (max-width: 620px) {
  .lnv-fields { grid-template-columns: minmax(0, 1fr); }
  .lnv-field, .lnv-field--half { grid-column: span 1; }
}

.lnv-field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-primary, #eceae6);
}

.lnv-field .lnv-req { color: var(--color-accent, #db972a); margin-inline-start: 0.15rem; }

.lnv-field input,
.lnv-field select,
.lnv-field textarea {
  inline-size: 100%;
  background: var(--color-surface-raised, #242528);
  color: var(--color-text-primary, #eceae6);
  border: 1px solid var(--color-border, #313236);
  border-radius: var(--radius-sm, 2px);
  font-family: var(--font-body, sans-serif);
  font-size: 16px; /* iOS: no focus zoom */
  padding: 0.65rem 0.75rem;
  min-block-size: 44px;
}

.lnv-field textarea { min-block-size: 7.5rem; resize: vertical; line-height: 1.55; }

.lnv-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 2.2rem;
}

.lnv-field input:focus-visible,
.lnv-field select:focus-visible,
.lnv-field textarea:focus-visible {
  border-color: var(--color-accent, #db972a);
  outline: 2px solid var(--color-accent, #db972a);
  outline-offset: 0;
}

.lnv-field--error input,
.lnv-field--error select,
.lnv-field--error textarea { border-color: var(--color-danger, #d97862); }

.lnv-field__error {
  font-size: 0.78rem;
  color: var(--color-danger, #d97862);
}

.lnv-field__static {
  padding: 0.65rem 0;
  font-weight: 600;
  color: var(--color-text-primary, #eceae6);
}

.lnv-note { font-size: 0.82rem; color: var(--color-text-secondary, #a8a5a0); line-height: 1.55; }

.lnv-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-text-secondary, #a8a5a0);
  line-height: 1.5;
}

.lnv-check input[type='checkbox'] {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.15rem;
  accent-color: var(--color-accent, #db972a);
  flex: none;
}

.lnv-check a { color: var(--color-accent, #db972a); }

/* ------------------------------------------------------ choice panels -- */

.lnv-choices { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.lnv-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--color-border, #313236);
  background: var(--color-surface, #1d1e20);
  cursor: pointer;
}

.lnv-choice:hover { border-color: var(--color-text-secondary, #a8a5a0); }

.lnv-choice input[type='radio'] {
  margin-block-start: 0.2rem;
  accent-color: var(--color-accent, #db972a);
  flex: none;
}

.lnv-choice:has(input:checked) {
  border-color: var(--color-accent, #db972a);
  box-shadow: inset 0 0 0 1px var(--color-accent, #db972a);
}

.lnv-choice__body { flex: 1 1 auto; min-inline-size: 0; }

.lnv-choice__title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #eceae6);
}

.lnv-choice__price { font-variant-numeric: tabular-nums; color: var(--color-accent, #db972a); }

.lnv-choice__desc { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--color-text-secondary, #a8a5a0); line-height: 1.55; }

/* ------------------------------------------------------------ totals -- */

.lnv-order-summary {
  border: 1px solid var(--color-border, #313236);
  background: var(--color-surface, #1d1e20);
  padding: clamp(1rem, 2.4vw, 1.4rem);
}

.lnv-order-summary > h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-primary, #eceae6);
}

.lnv-totals { margin: 0; border-block-start: 1px solid var(--color-border, #313236); padding-block-start: 0.9rem; }

.lnv-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--color-text-secondary, #a8a5a0);
}

.lnv-totals__row > span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary, #eceae6);
}

.lnv-totals__grand {
  margin-block-start: 0.55rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border, #313236);
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--color-text-primary, #eceae6);
}

.lnv-totals__grand > span:last-child { color: var(--color-accent, #db972a); }

.lnv-place-order { inline-size: 100%; margin-block-start: 1.1rem; padding: 1rem 1.5rem !important; font-size: 1.05rem !important; }

/* ----------------------------------------------------------- notices -- */

.lnv-notice {
  border: 1px solid var(--color-border, #313236);
  border-block-start: 3px solid var(--color-accent, #db972a);
  background: var(--color-surface, #1d1e20);
  color: var(--color-text-primary, #eceae6);
  padding: 0.95rem 1.1rem;
  margin-block-end: 1.1rem;
}

.lnv-notice--error { border-block-start-color: var(--color-danger, #d97862); }
.lnv-notice--success { border-block-start-color: var(--color-success, #5cb585); }

.lnv-notice h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lnv-notice ul { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; }
.lnv-notice li { color: var(--color-text-secondary, #a8a5a0); }
.lnv-notice a { color: var(--color-accent, #db972a); }

/* ------------------------------------------------------- empty state -- */

.lnv-empty {
  border: 1px dashed var(--color-border, #313236);
  background: var(--color-surface, #1d1e20);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  text-align: center;
}

.lnv-empty h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  text-transform: uppercase;
  color: var(--color-text-primary, #eceae6);
}

.lnv-empty p { margin: 0 auto 1.3rem; max-inline-size: 46ch; color: var(--color-text-secondary, #a8a5a0); }

/* ------------------------------------------------------- my account -- */

.lnv-account { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }

.lnv-account-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lnv-account-nav a {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-border, #313236);
  color: var(--color-text-secondary, #a8a5a0);
  text-decoration: none;
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lnv-account-nav a:hover { border-color: var(--color-accent, #db972a); color: var(--color-accent, #db972a); }

.lnv-account-nav .is-active a {
  border-color: var(--color-accent, #db972a);
  background: var(--color-accent, #db972a);
  color: var(--ink-inverse, #1b1a1c);
  font-weight: 600;
}

.lnv-auth { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 880px) { .lnv-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------- data table -- */

.lnv-table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.lnv-table caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lnv-table th {
  text-align: start;
  padding: 0.7rem 0.8rem;
  background: var(--color-surface-raised, #242528);
  border-block-end: 1px solid var(--color-border, #313236);
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #a8a5a0);
  font-weight: 500;
}

.lnv-table td {
  padding: 0.8rem;
  border-block-start: 1px solid var(--color-border-soft, #2a2b2e);
  color: var(--color-text-primary, #eceae6);
}

.lnv-table__wrap { overflow-x: auto; border: 1px solid var(--color-border, #313236); }

.lnv-status {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lnv-status--pending { color: var(--color-warning, #d9a03c); }
.lnv-status--processing { color: var(--steel, #8fb3cc); }
.lnv-status--completed { color: var(--color-success, #5cb585); }
.lnv-status--cancelled,
.lnv-status--failed { color: var(--color-danger, #d97862); }

/* --------------------------------------------------------- timeline -- */

.lnv-timeline { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }

.lnv-timeline li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.lnv-timeline li::before {
  content: '';
  inline-size: 0.7rem;
  block-size: 0.7rem;
  margin-block-start: 0.35rem;
  margin-inline-start: 0.45rem;
  border: 1px solid var(--color-accent, #db972a);
  background: transparent;
}

.lnv-timeline li:first-child::before { background: var(--color-accent, #db972a); }

.lnv-timeline strong { display: block; color: var(--color-text-primary, #eceae6); }
.lnv-timeline span { color: var(--color-text-secondary, #a8a5a0); font-size: 0.9rem; line-height: 1.55; }

/* --------------------------------------------------------- quote cart -- */

.lnv-quote-cart { border: 1px solid var(--color-border, #313236); background: var(--color-surface, #1d1e20); padding: clamp(1rem, 2.4vw, 1.4rem); }
.lnv-quote-cart > h2 { margin-block-start: 0; }

.lnv-ref {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-accent, #db972a);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-accent, #db972a);
}

/* ----------------------------------------------------------- utility -- */

.lnv-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-block-start: 1.2rem; }
.lnv-actions--split { justify-content: space-between; }

.lnv-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.lnv-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lnv-checkout__aside { position: static; }
}

/* ------------------------------------------------ structural containers --
   Wrappers the templates use for layout scoping and JS/CSS addressing. Most
   need only sane box behaviour; they exist as named hooks so future rules
   have somewhere to land rather than reaching for tag selectors. */

.lnv-cart,
.lnv-order-details,
.lnv-customer-details,
.lnv-order-downloads,
.lnv-order-pay,
.lnv-verify-email,
.lnv-shipping-calculator,
.lnv-quote-cart__form,
.lnv-add-to-quote {
  min-inline-size: 0;
}

/* min-width:0 matters on the checkout grid: without it a long unbreakable
   string (a SKU, a pasted URL) widens the track and breaks the two-column
   layout on desktop. */
.lnv-checkout__main,
.lnv-checkout__aside {
  min-inline-size: 0;
}

.lnv-line__body {
  min-inline-size: 0;
}

.lnv-cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding-block-start: clamp(0.9rem, 2vw, 1.2rem);
  border-block-start: 1px solid var(--color-border-soft, #2a2b2e);
}

.lnv-cart-collaterals {
  margin-block-start: clamp(1.4rem, 3vw, 2.2rem);
}

@media (min-width: 900px) {
  .lnv-cart-collaterals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: start;
  }
  .lnv-cart-collaterals > :only-child {
    grid-column: 2;
  }
}

/* Collapsed disclosures (coupon, checkout login). Native <details> so they
   work with JavaScript disabled. */
.lnv-coupon,
.lnv-checkout-login {
  margin-block-start: clamp(0.9rem, 2vw, 1.2rem);
}

.lnv-coupon > summary,
.lnv-checkout-login > summary {
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #a8a5a0);
  padding: 0.5rem 0;
  list-style: none;
}

.lnv-coupon > summary::marker,
.lnv-checkout-login > summary::marker { content: ''; }

.lnv-coupon > summary::before,
.lnv-checkout-login > summary::before {
  content: '+ ';
  color: var(--color-accent, #db972a);
}

.lnv-coupon[open] > summary::before,
.lnv-checkout-login[open] > summary::before { content: '– '; }

.lnv-coupon > summary:hover,
.lnv-checkout-login > summary:hover { color: var(--color-accent, #db972a); }

.lnv-coupon > summary:focus-visible,
.lnv-checkout-login > summary:focus-visible {
  outline: 2px solid var(--color-accent, #db972a);
  outline-offset: 2px;
}

.lnv-account-fields,
.lnv-account-login {
  margin-block-start: clamp(0.9rem, 2vw, 1.2rem);
}

/* Forms rendered by the plugin's shortcodes. */
.lnv-form { margin: 0; }
.lnv-form--quote,
.lnv-form--contact { margin-block-start: clamp(0.9rem, 2vw, 1.2rem); }

/* Single shipping rate: the row that carries the delivery fee at checkout.
   Reuses the choice-panel treatment so it reads as a decision, not stray text,
   even though there is only one option to select. */
.lnv-shipping-single {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border, #313236);
  background: var(--color-surface, #1d1e20);
}

.lnv-shipping-single .lnv-note { flex: none; }

/* BACS leaves every order on-hold until the transfer clears — on this store it
   is the most common status of all, so it must not fall through unstyled. */
.lnv-status--on-hold { color: var(--color-warning, #d9a03c); }