/*
 * Cart, checkout and quick order.
 */

/* --- Cart --------------------------------------------------------------- */

.eld-cart {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  padding: var(--eld-space-5) 0 var(--eld-space-7);
}

@media (min-width: 900px) {
  .eld-cart {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

.eld-cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--eld-space-3) var(--eld-space-4);
  padding: var(--eld-space-4) 0;
  border-bottom: 1px solid var(--eld-border);
  align-items: center;
}

@media (min-width: 700px) {
  .eld-cart-line {
    grid-template-columns: 80px minmax(0, 1fr) 6rem 7rem 6rem 2rem;
  }
}

.eld-cart-line__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
}

.eld-cart-line__title { margin: 0 0 0.25rem; font-weight: 600; }
.eld-cart-line__title a { color: var(--eld-ink); }
.eld-cart-line__title a:hover { color: var(--eld-accent); }

.eld-cart-line__ref { margin: 0 0 0.25rem; }
.eld-cart-line__ref .eld-ref { font-size: 0.75rem; color: var(--eld-ink-3); }

.eld-cart-line__box,
.eld-cart-line .variation {
  margin: 0;
  font-size: var(--eld-text-micro);
  color: var(--eld-ink-3);
}

.eld-cart-line .variation dt,
.eld-cart-line .variation dd { display: inline; margin: 0; }
.eld-cart-line .variation dd { margin-right: 0.5rem; }

.eld-cart-line__unit,
.eld-cart-line__total {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.eld-cart-line__total { font-weight: 600; color: var(--eld-ink); }
.eld-cart-line__unit { color: var(--eld-ink-3); font-size: var(--eld-text-small); }

.eld-cart-line__qty .qty {
  width: 100%;
  min-width: 5rem;
  min-height: 40px;
  text-align: center;
}

.eld-cart-line__remove .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--eld-radius);
  color: var(--eld-ink-3);
  font-size: 1.25rem;
  line-height: 1;
}

.eld-cart-line__remove .remove:hover { color: var(--eld-error); background-color: var(--eld-bg-2); }

/*
 * Phone layout: the picture on the left, everything about the line stacked
 * beside it, and the controls on one row underneath.
 *
 * Previously the remove control fell out of the three-column grid onto a row
 * of its own at the far left, orphaned under the quantity, and the unit price
 * was simply hidden — so the line showed a total with no way to see what one
 * of them cost.
 */
@media (max-width: 699px) {
  .eld-cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    row-gap: var(--eld-space-3);
  }

  .eld-cart-line__body { grid-column: 2; }

  .eld-cart-line__unit {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    align-self: center;
  }

  .eld-cart-line__qty {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }

  .eld-cart-line__total {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
  }

  .eld-cart-line__remove {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-self: center;
  }

  /* Wide enough for four digits and the spinner — a carton of 3 000 bases is
     a real line, and the field was clipping two. */
  .eld-cart-line__qty .qty { width: 6.5rem; }
}

.eld-cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eld-space-4);
  padding-top: var(--eld-space-5);
}

/* Quantities save over AJAX; the button is the JS-free fallback. */
.eld-js .eld-cart__actions [data-eld-update-cart] { display: none; }

.eld-cart__summary {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
  position: sticky;
  top: calc(76px + var(--eld-space-4));
}

.eld-cart__summary h2 {
  margin: 0 0 var(--eld-space-4);
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
}

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

.eld-cart__summary th,
.eld-cart__summary td {
  padding: var(--eld-space-3) 0;
  border-bottom: 1px solid var(--eld-border);
  font-size: var(--eld-text-small);
  text-align: left;
}

.eld-cart__summary td { text-align: right; font-variant-numeric: tabular-nums; color: var(--eld-ink); }
.eld-cart__summary th { color: var(--eld-ink-3); font-weight: 500; }
.eld-cart__summary .order-total td { font-size: 1.125rem; font-weight: 600; }

.eld-cart__summary .checkout-button { width: 100%; margin-top: var(--eld-space-4); }

.eld-cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eld-space-3);
  margin-bottom: var(--eld-space-6);
}

/* --- Checkout ----------------------------------------------------------- */

.eld-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  padding: var(--eld-space-5) 0 var(--eld-space-7);
}

@media (min-width: 900px) {
  /*
   * 26rem, not 24. The review column carries the order table, the privacy
   * paragraph, the terms checkbox and the payment notices — at the narrower
   * width every one of those wrapped to three or four words a line, which on
   * the page where the customer is deciding to pay reads as cramped.
   */
  .eld-checkout {
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

.eld-checkout h3 {
  margin: 0 0 var(--eld-space-4);
  font-family: var(--eld-font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--eld-ink);
}

.eld-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 var(--eld-space-4);
}

.eld-checkout .col2-set { display: grid; gap: var(--eld-space-5); }

/*
 * One panel, on paper. The review was a grey box holding a grey notice
 * holding a grey terms box — three tones of the same colour nested inside
 * each other, which reads as unfinished rather than layered.
 */
.eld-checkout__review {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-paper);
}

.eld-checkout__review .woocommerce-privacy-policy-text,
.eld-checkout__review .woocommerce-terms-and-conditions-wrapper,
.eld-checkout__review #payment,
.eld-checkout__review .woocommerce-checkout-payment {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.eld-checkout__review .woocommerce-terms-and-conditions-wrapper {
  margin-top: var(--eld-space-4);
  padding-top: var(--eld-space-4);
  border-top: 1px solid var(--eld-border);
}

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

.eld-checkout__review th,
.eld-checkout__review td {
  padding: var(--eld-space-3) 0;
  border-bottom: 1px solid var(--eld-border);
  font-size: var(--eld-text-small);
  text-align: left;
}

.eld-checkout__review td { text-align: right; font-variant-numeric: tabular-nums; }
.eld-checkout__review .order-total td { font-size: 1.125rem; font-weight: 600; color: var(--eld-ink); }

/*
 * The order button carries the wording required by art. L221-14, which is
 * long. It gets room to wrap rather than being clipped.
 */
#place_order,
.woocommerce-checkout #place_order {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  line-height: 1.3;
  white-space: normal;
  height: auto;
}

/* --- Quick order -------------------------------------------------------- */

.eld-quick__panel {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border-2);
  border-radius: var(--eld-radius);
  background-color: var(--eld-bg-2);
}

.eld-quick__label {
  display: block;
  margin-bottom: var(--eld-space-2);
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
}

.eld-quick__input {
  width: 100%;
  font-family: var(--eld-font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  background-color: var(--eld-bg);
}

.eld-quick__hint {
  margin: var(--eld-space-3) 0 var(--eld-space-4);
  font-size: var(--eld-text-small);
  color: var(--eld-ink-3);
}

.eld-quick__result { margin-top: var(--eld-space-5); }

.eld-quick__table-wrap { overflow-x: auto; }

.eld-quick__table { width: 100%; }
.eld-quick__name a { color: var(--eld-ink); }
.eld-quick__qty { display: flex; align-items: center; gap: 0.375rem; }
.eld-quick__qty input { width: 4.5rem; min-height: 36px; text-align: center; }

/* What was asked for, beside what will ship. Informational, not a control:
   the carton is the supplier's unit and not something to negotiate. */
.eld-quick__rounded {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--eld-text-micro);
  color: var(--eld-ink-3);
}

.eld-quick__drop {
  border: 0;
  background: transparent;
  color: var(--eld-ink-3);
  font-size: 1.125rem;
  cursor: pointer;
}

.eld-quick__drop:hover { color: var(--eld-error); }

.eld-quick__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eld-space-3);
  padding-top: var(--eld-space-4);
  border-top: 1px solid var(--eld-border);
  margin-top: var(--eld-space-4);
}

.eld-quick__total {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink);
}

.eld-quick__unknown {
  margin-top: var(--eld-space-5);
  padding: var(--eld-space-4);
  border: 1px solid var(--eld-stock-low);
  border-radius: var(--eld-radius);
  background-color: color-mix(in srgb, var(--eld-stock-low) 6%, transparent);
}

.eld-quick__unknown-title {
  margin: 0 0 var(--eld-space-2);
  font-size: var(--eld-text-small);
  font-weight: 600;
  color: var(--eld-stock-low);
}

.eld-quick__unknown ul { margin: 0; padding: 0; list-style: none; }
.eld-quick__unknown li { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0; font-size: var(--eld-text-small); }
.eld-quick__suggest { color: var(--eld-ink-2); }
.eld-quick__suggest strong { color: var(--eld-accent); }

.eld-quick__error { margin: var(--eld-space-3) 0 0; color: var(--eld-error); font-size: var(--eld-text-small); }
.eld-quick__empty { margin: 0; color: var(--eld-ink-3); }

.eld-quick__help {
  margin-top: var(--eld-space-6);
  padding-top: var(--eld-space-5);
  border-top: 1px solid var(--eld-border);
  color: var(--eld-ink-2);
}

.eld-quick__help-title {
  margin: 0 0 var(--eld-space-3);
  font-family: var(--eld-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--eld-ink);
}

.eld-quick__phone { font-size: var(--eld-text-small); }

/* A line waiting on the server dims rather than jumping; the numbers it holds
   are about to change and a stale figure at full contrast reads as current. */
.eld-cart-line.is-updating { opacity: 0.55; }
.eld-cart-line.is-updating input.qty { pointer-events: none; }