/* Site carts (Werfwinkelwagens) — list */
.diore-site-carts-list-header,
.diore-site-carts-list-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 24px);
}

@media (max-width: 768px) {
  .diore-site-carts-list-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24px);
    grid-template-areas:
      "name arrow"
      "date arrow"
      "count arrow"
      "total arrow";
    row-gap: 4px;
  }

  .diore-site-carts-list-row .name { grid-area: name; }
  .diore-site-carts-list-row .date { grid-area: date; }
  .diore-site-carts-list-row .count { grid-area: count; }
  .diore-site-carts-list-row .total { grid-area: total; text-align: left; }
  .diore-site-carts-list-row .arrow { grid-area: arrow; }
}

/* Site cart detail (Werfwinkelwagen) */
.diore-site-cart-empty,
.diore-site-cart-actions {
  margin-bottom: 24px;
}

/* The description keeps a readable minimum; the list type, price and subtotal columns give way first */
.diore-site-cart-items-header,
.diore-site-cart-items-row {
  grid-template-columns: 56px minmax(160px, 1fr) minmax(0, 150px) minmax(0, 100px) 80px minmax(0, 110px) 48px;
}

.diore-site-cart-items-row .cell-subtotal {
  font-weight: 700;
}

.diore-site-cart-remove {
  padding: 10px;
}

@media (max-width: 992px) {
  .diore-site-cart-items-header {
    display: none;
  }

  .diore-site-cart-items-header + .diore-site-cart-items-row {
    border-top: 0;
  }

  .diore-site-cart-items-row {
    grid-template-columns: minmax(0, 56px) minmax(0, 1fr) minmax(0, 80px) auto;
    grid-template-areas:
      "image description description actions"
      "image list-type list-type list-type"
      "image price quantity subtotal";
    gap: 8px 12px;
  }

  .diore-site-cart-items-row .cell-image { grid-area: image; align-self: start; }
  .diore-site-cart-items-row .cell-description { grid-area: description; }
  .diore-site-cart-items-row .cell-list-type { grid-area: list-type; color: var(--diore-text-secondary); font-size: var(--diore-font-size-sm); }
  .diore-site-cart-items-row .cell-price { grid-area: price; }
  .diore-site-cart-items-row .cell-quantity { grid-area: quantity; }
  .diore-site-cart-items-row .cell-subtotal { grid-area: subtotal; justify-self: end; white-space: nowrap; }
  .diore-site-cart-items-row .cell-actions { grid-area: actions; }
}

@media (max-width: 768px) {
  .diore-site-cart-items-row {
    grid-template-columns: minmax(0, 56px) minmax(0, 1fr) auto;
    grid-template-areas:
      "image description actions"
      "image list-type list-type"
      "image price price"
      "image quantity subtotal";
  }
}

/* Site cart totals */
.diore-site-cart-totals {
  display: flex;
  justify-content: flex-end;
}

.diore-site-cart-totals .diore-site-cart-totals-inner {
  width: 100%;
  max-width: 550px;
}

.diore-site-cart-totals dl {
  margin: 0;
}

.diore-site-cart-totals .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin: 0;
  padding: 6px 0;
  color: var(--diore-text);
}

.diore-site-cart-totals .row dt,
.diore-site-cart-totals .row dd {
  width: auto;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.diore-site-cart-totals .row.total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--diore-border);
}

.diore-site-cart-totals .row.total dt,
.diore-site-cart-totals .row.total dd {
  font-weight: 700;
}

@media (max-width: 768px) {
  .diore-site-cart-totals .diore-site-cart-totals-inner {
    max-width: none;
  }
}

/* Site cart reference/comment fields: label column next to the field */
.diore-site-cart-submit-fields .inputs {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 16px;
  margin: 0;
}

.diore-site-cart-submit-fields .diore-field-label {
  padding-top: 14px;
}

@media (max-width: 768px) {
  .diore-site-cart-submit-fields .inputs {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .diore-site-cart-submit-fields .diore-field-label {
    padding-top: 0;
  }
}

/* Order requests (Bestelaanvragen) list */
.diore-order-requests-list-header,
.diore-order-requests-list-row {
  grid-template-columns: minmax(0, 90px) minmax(0, 92px) minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 24px);
}

@media (max-width: 768px) {
  .diore-order-requests-list-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24px);
    grid-template-areas:
      "number arrow"
      "name arrow"
      "subaccount arrow"
      "type arrow"
      "total arrow";
    row-gap: 4px;
  }

  .diore-order-requests-list-row > div:nth-child(1) { grid-area: number; }
  .diore-order-requests-list-row > div:nth-child(2) { display: none; }
  .diore-order-requests-list-row > div:nth-child(3) { grid-area: name; }
  .diore-order-requests-list-row > div:nth-child(4) { grid-area: subaccount; }
  .diore-order-requests-list-row > div:nth-child(5) { grid-area: type; }
  .diore-order-requests-list-row > div:nth-child(6) { grid-area: total; text-align: left; }
  .diore-order-requests-list-row > div:nth-child(7) { grid-area: arrow; }
}

/* Order request detail: items table */
.diore-order-request-items .cell-price,
.diore-order-request-items .cell-subtotal {
  text-align: right;
}

.diore-order-request-items .cell-quantity {
  text-align: center;
}

.diore-order-request-items tbody .sku {
  display: block;
  color: var(--diore-text-secondary);
  font-size: var(--diore-font-size-sm);
}

.diore-order-request-items tbody .name {
  display: block;
}

.diore-order-request-items tfoot td {
  padding: 8px 16px;
  text-align: right;
  background: var(--diore-surface-accent);
}

.diore-order-request-items tfoot td:last-child {
  width: 1%;
  font-weight: 700;
  white-space: nowrap;
}

.diore-order-request-items tfoot tr:last-child td:first-child {
  font-weight: 700;
}

.diore-order-request-resolved-notice {
  margin: 0;
  color: var(--diore-text);
  font-weight: 600;
}

@media (max-width: 768px) {
  .diore-order-request-items thead {
    display: none;
  }

  .diore-order-request-items tbody tr {
    display: block;
    padding: 8px 0;
  }

  .diore-order-request-items tbody tr:first-child {
    border-top: 0;
  }

  .diore-order-request-items tbody td,
  .diore-order-request-items tbody .cell-price,
  .diore-order-request-items tbody .cell-quantity,
  .diore-order-request-items tbody .cell-subtotal {
    display: block;
    padding: 4px 16px;
    text-align: left;
  }

  .diore-order-request-items tbody .cell-subtotal {
    font-weight: 700;
  }
}

/* SubAccount orders list */
.diore-subaccount-orders-list-header,
.diore-subaccount-orders-list-row {
  grid-template-columns: minmax(0, 110px) minmax(0, 100px) minmax(0, 1.4fr) minmax(0, 130px) minmax(0, 130px) minmax(0, 24px);
}

@media (max-width: 768px) {
  .diore-subaccount-orders-list-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24px);
    grid-template-areas:
      "number arrow"
      "site arrow"
      "status arrow"
      "total arrow";
    row-gap: 4px;
  }

  .diore-subaccount-orders-list-row > div:nth-child(1) { grid-area: number; }
  .diore-subaccount-orders-list-row > div:nth-child(2) { display: none; }
  .diore-subaccount-orders-list-row > div:nth-child(3) { grid-area: site; }
  .diore-subaccount-orders-list-row > div:nth-child(4) { grid-area: status; }
  .diore-subaccount-orders-list-row > div:nth-child(5) { grid-area: total; text-align: left; }
  .diore-subaccount-orders-list-row > div:nth-child(6) { grid-area: arrow; }
}

/* DiOrE order detail note (widget on the theme's order details page) */
.diore-order-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid var(--diore-warning);
  border-left: 4px solid var(--diore-warning-dark);
  color: var(--diore-primary);
}

.diore-order-note-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.diore-order-note-label {
  color: var(--diore-primary-dark);
  font-weight: 600;
  min-width: 180px;
}

.diore-order-note-value {
  color: var(--diore-primary-dark);
}

@media (max-width: 768px) {
  .diore-order-note-row {
    flex-direction: column;
    gap: 0;
  }

  .diore-order-note-label {
    min-width: 0;
  }
}

/* List expansion requests */
.diore-expansion-requests-list-header,
.diore-expansion-requests-list-row {
  grid-template-columns: minmax(0, 90px) minmax(0, 100px) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 120px) minmax(0, 24px);
}

@media (max-width: 768px) {
  .diore-expansion-requests-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .diore-expansion-requests-list-row .arrow {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
  }
}

/* List expansion request detail */
.diore-expansion-request-articles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diore-expansion-request-resolved-comment {
  margin: 0;
  color: var(--diore-text);
  overflow-wrap: anywhere;
}

/* Order request submitted (sub-account confirmation page) */
.diore-order-request-submitted-notice {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border-radius: var(--diore-radius-sm);
  background: var(--diore-success-soft);
}

.diore-order-request-submitted-notice .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--diore-success);
  color: var(--diore-text-inverse);
  font-size: var(--diore-font-size-3xl);
}

.diore-order-request-submitted-notice-text {
  min-width: 0;
}

.diore-order-request-submitted-lead {
  margin: 0;
  color: var(--diore-success-dark);
  font-size: var(--diore-font-size-lg);
  font-weight: 700;
}

.diore-order-request-submitted-hint {
  margin: 6px 0 0;
  color: var(--diore-text-secondary);
  font-size: var(--diore-font-size-md);
  overflow-wrap: anywhere;
}

.diore-order-request-submitted-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
}

@media (max-width: 991px) {
  .diore-order-request-submitted-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .diore-order-request-submitted-notice {
    gap: 16px;
    padding: 16px;
  }

  .diore-order-request-submitted-notice .icon {
    width: 40px;
    height: 40px;
    font-size: var(--diore-font-size-xl);
  }

  .diore-order-request-submitted-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}