/* b2b-shop: the business customers view of the storefront (Geschäftskunden-Ansicht). Elements are created by shop.js, catalog.js,
   cart-ui.js, checkout.js and order.js; only the theme tokens of tokens.css are used. */

/* The badge under the shop title: who is signed in, and that the prices are net. Calm, but clearly visible. */
.b2b-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-1);
  max-width: 100%;
  margin: var(--space-2) 0 0;
  padding: 0.4rem 0.75rem;
  border: var(--border-strong);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.b2b-badge[hidden] {
  display: none;
}

.b2b-badge-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.b2b-badge-company {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.b2b-badge-note {
  color: var(--color-charcoal-muted);
  font-size: var(--text-xs);
}

.b2b-badge-company::before,
.b2b-badge-note::before {
  content: "·";
  margin-right: var(--space-1);
  color: var(--color-charcoal-muted);
}

/* Phone: the three parts stack, so no separator dot is left dangling at the start of a wrapped line */
@media (max-width: 40rem) {
  .b2b-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-bottom: var(--space-2);
  }

  .b2b-badge-company::before,
  .b2b-badge-note::before {
    content: none;
  }
}

/* Price block: minimum quantity and price steps under the net price */
.price-block .price-min,
.price-block .price-tiers {
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.price-block .price-min {
  color: var(--color-charcoal);
  font-weight: var(--weight-medium);
}

.price-block .price-tiers {
  color: var(--color-charcoal-muted);
}

/* Cart lines: minimum quantity and the next price step */
.cart-line-min,
.cart-line-tier {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-charcoal-muted);
}

.cart-line-min {
  color: var(--color-charcoal);
}

/* Totals: net goods and the VAT lines above the gross sum */
.b2b-totals {
  margin: 0 0 var(--space-1);
  padding-top: 0;
  border-top: 0;
  font-variant-numeric: tabular-nums;
}

.b2b-totals[hidden] {
  display: none;
}

.summary-totals .b2b-vat-row {
  color: var(--color-charcoal-muted);
  font-variant-numeric: tabular-nums;
}

.b2b-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

.b2b-note a:hover {
  color: var(--color-charcoal);
  text-decoration-color: currentColor;
}

.b2b-note a:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 2px;
}

/* Checkout: the choice between paying online and buying on invoice (business customers with invoice switched on) */
.payment-methods {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  min-width: 0;
}

.payment-methods .payment-method {
  margin: 0 0 var(--space-1);
}

.payment-methods .payment-method:has(input:disabled) {
  color: var(--color-charcoal-muted);
  cursor: not-allowed;
}

.payment-methods #pm-invoice-hint {
  margin: 0 0 0 calc(1.1rem + var(--space-1));
}

.payment-methods #pm-invoice-hint:empty {
  display: none;
}

#invoice-terms {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

#invoice-terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#invoice-terms a:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 2px;
}

.invoice-error {
  margin: 0 0 var(--space-2);
}

/* Until Stripe is picked (nothing picked yet, or invoice) its parts are not shown; once prepared they stay mounted for the way back.
   The retry button stays: it prepares what the chosen way needs (the Stripe form, or only the prices). */
#payment-block.without-stripe #payment-element,
#payment-block.without-stripe #payment-status,
#payment-block.without-stripe #payment-test-notice {
  display: none;
}

/* Confirmation of an order on invoice: payment term and the state of the invoice */
.confirmation-meta .invoice-meta-row dd {
  overflow-wrap: anywhere;
}