/**
 * Drupal Commerce: cart, checkout, product and order pages.
 *
 * Inert on sites without Commerce. Built on the base tokens and the element
 * styles in forms.css and tables.css, so only layout and Commerce-specific
 * markup are handled here.
 */

/* ---- Product and add to cart ------------------------------------------ */

.commerce-order-item-add-to-cart-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.commerce-order-item-add-to-cart-form > .dl-field,
.commerce-order-item-add-to-cart-form > .form-item { margin: 0; min-width: 200px; flex: 0 1 320px; }
.commerce-order-item-add-to-cart-form .form-actions { margin: 0; }
.product--variation-field--variation__price,
.field--name-price { font: 700 28px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.field--name-price .field__item { font: inherit; }

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

.cart-form .views-field-edit-quantity .dl-input,
.cart-form .views-field-edit-quantity input { width: 80px; }
.cart-form .views-field-edit-delete-order-item .dl-button { white-space: nowrap; }
.cart-form .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
/* The cart form renders Checkout as a secondary button: make it the main action. */
.cart-form .form-actions input[id^="edit-checkout"] {
  order: 2;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.cart-form .form-actions input[id^="edit-checkout"]:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.view-commerce-cart-form .view-footer,
.cart-form .view-footer { display: flex; justify-content: flex-end; margin-block: var(--space-4); }
.cart-empty-page { padding: var(--space-8) 0; color: var(--text-muted); }

/* ---- Order totals (cart, checkout summary, order pages) ---------------- */

.order-total-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.order-total-line__total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
}
.order-total-line-label { margin: 0; }
.order-total-line-value { text-align: right; }

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

.checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: checkout-step;
}
.checkout-progress > li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 500;
  counter-increment: checkout-step;
}
.checkout-progress > li::before {
  content: counter(checkout-step);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 600;
}
.checkout-progress > li.checkout-progress--step__current { color: var(--text); font-weight: 600; }
.checkout-progress > li.checkout-progress--step__current::before {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.checkout-progress > li.checkout-progress--step__previous::before {
  content: "\2713";
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.checkout-progress a { color: inherit; }

.layout-checkout-form {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.layout-checkout-form > .layout-region { float: none; width: auto; min-width: 0; }
@media (min-width: 900px) {
  .layout-checkout-form {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas: "main secondary" "footer secondary";
    grid-template-rows: auto 1fr;
  }
  .layout-region-checkout-main { grid-area: main; }
  .layout-region-checkout-secondary { grid-area: secondary; position: sticky; top: var(--space-6); }
  .layout-region-checkout-footer { grid-area: footer; }
}
.layout-region-checkout-footer .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }

@media (min-width: 900px) {
  .layout-checkout-form:not(:has(.layout-region-checkout-secondary)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "footer";
    grid-template-rows: auto;
  }
}

/* Panes are panels; the summary is a sunken one. */
.checkout-pane,
fieldset.checkout-pane {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}
fieldset.checkout-pane > legend { padding: 0 var(--space-2); font: 600 15px/22px var(--font-sans); }
.checkout-pane > .fieldset-wrapper { display: grid; gap: var(--space-3); }
.layout-region-checkout-secondary > h3 {
  margin: 0 0 var(--space-3);
  font: 600 15px/22px var(--font-sans);
}
.layout-region-checkout-secondary .checkout-pane-order-summary {
  background: var(--surface-sunken);
  border-color: var(--border);
}
.layout-region-checkout-secondary .dl-table-wrap { border: 0; background: transparent; }
.layout-region-checkout-secondary .dl-table td { border-color: var(--border); }
.layout-region-checkout-secondary footer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* Address: first and last name side by side, the rest full width. */
.address-container-inline {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.address-container-inline > .form-item { margin: 0; }
.field--type-address .form-item { display: block; max-width: none; }
.field--type-address .dl-field__label { display: block; }
.field--type-address .dl-input,
.field--type-address .dl-select { width: 100%; max-width: 100%; }
.field--type-address .form-item-address-postal-code,
[class*="address-postal-code"] .dl-input { max-width: 14ch; }

/* Payment methods: one bordered option per method. */
.checkout-pane-payment-information .form-type-radio,
.checkout-pane-payment-information .js-form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.checkout-pane-payment-information .form-type-radio:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Login pane: returning and new customer as two panels. */
.checkout-pane.checkout-pane-login {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
}
@media (min-width: 900px) {
  .checkout-pane.checkout-pane-login { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.form-wrapper__login-option {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.form-wrapper__login-option .dl-input { width: 100%; max-width: 100%; }
.form-wrapper__login-option > legend { padding: 0 var(--space-2); font: 600 15px/22px var(--font-sans); }
.form-wrapper__login-option .fieldset-wrapper { display: grid; gap: var(--space-3); }
.form-wrapper__login-option .form-actions { margin-top: var(--space-2); }

/* Review: each reviewed pane is a labelled block with its edit link. */
.checkout-pane-review .fieldset-wrapper { gap: var(--space-4); }
.checkout-pane-review .fieldset-wrapper fieldset,
.checkout-pane-review .fieldset-wrapper > .checkout-pane {
  margin: 0;
  padding: 0 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.checkout-pane-review .fieldset-wrapper > :last-child { padding-bottom: 0; border-bottom: 0; }
.checkout-pane-review legend { display: flex; gap: var(--space-3); align-items: baseline; padding: 0; font-size: 14px; }
.checkout-pane-review legend a { font-size: 13px; font-weight: 400; }
.address .organization,
.address .country { display: block; }

/* Completion. */
.checkout-complete { display: grid; gap: var(--space-4); max-width: var(--measure); }
.checkout-complete .checkout-complete__message,
.checkout-complete > p:first-child {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  background: var(--success-soft);
}

/* ---- Customer order pages ---------------------------------------------- */

.commerce-order .order-total-line,
.commerce-order--user .order-total-line { max-width: 360px; margin-left: auto; }