/*
 * Cart, checkout and my account.
 *
 * Loaded only on those three. They are the pages where a mistake costs an
 * order, so the styling here stays conservative: WooCommerce's own markup and
 * behaviour are left intact and only given this theme's type, spacing and
 * control styling.
 */

/* On .nd-main, not on .nd-commerce: that class is on <body>, so putting
   padding on it padded the document -- 24px above the sticky header and
   64px of page background below the footer. */
.nd-commerce .nd-main { padding-block: var(--nd-s-5) var(--nd-s-8); }

.nd-commerce .nd-main h1 { margin-bottom: var(--nd-s-5); }

/* --------------------------------------------------------------- forms -- */

.nd-commerce .input-text,
.nd-commerce select,
.nd-commerce textarea {
  width: 100%;
  min-height: var(--nd-control-h);
  padding: var(--nd-s-3) var(--nd-s-4);
  background: var(--nd-white);
  color: var(--nd-ink);
  border: 1px solid var(--nd-border-control);
  border-radius: var(--nd-r-md);
}

.nd-commerce label { font-size: var(--nd-fs-sm); font-weight: var(--nd-fw-semibold); display: block; margin-bottom: var(--nd-s-2); }

.nd-commerce .form-row { margin-bottom: var(--nd-s-4); }

/* WooCommerce marks required fields with an abbr; give it a real label rather
   than leaving a bare asterisk for a screen reader to read as punctuation. */
.nd-commerce .required { color: var(--nd-error); text-decoration: none; border: 0; }

/* ------------------------------------------------------------ buttons --- */

.nd-commerce .button,
.nd-commerce button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nd-control-h);
  padding-inline: var(--nd-s-6);
  background: var(--nd-green);
  color: var(--nd-white);
  border: 0;
  border-radius: var(--nd-r-md);
  font-weight: var(--nd-fw-bold);
  cursor: pointer;
  text-decoration: none;
}

.nd-commerce .button:hover,
.nd-commerce button[type="submit"]:hover { background: var(--nd-green-deep); color: var(--nd-white); }

.nd-commerce .button:disabled,
.nd-commerce .button.disabled {
  background: var(--nd-surface-alt);
  color: var(--nd-ink);
  border: 1px solid var(--nd-border-control);
  cursor: not-allowed;
  opacity: 1;
}

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

.nd-commerce .shop_table {
  width: 100%;
  background: var(--nd-white);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-r-lg);
  overflow: hidden;
}

.nd-commerce .shop_table th,
.nd-commerce .shop_table td {
  padding: var(--nd-s-3) var(--nd-s-4);
  border-bottom: 1px solid var(--nd-border);
  text-align: left;
  font-size: var(--nd-fs-sm);
}

.nd-commerce .shop_table thead th { background: var(--nd-surface-alt); font-weight: var(--nd-fw-bold); }

.nd-commerce .cart_item img { width: 64px; height: auto; border-radius: var(--nd-r-sm); }

.nd-commerce .cart-collaterals,
.nd-commerce .cart_totals { margin-top: var(--nd-s-6); }

/* On a phone the line items are stacked rather than left to scroll sideways:
   an order summary is something people re-read.
 *
 * Scoped to `table.cart`, the line-item table, and NOT to `.shop_table`.
 * That class is on every summary table WooCommerce prints, including the cart
 * totals and the checkout's order review, which are two columns wide and need
 * none of this. Applied to those it printed every label twice -- once from the
 * <th>, once from `attr(data-title)` -- and wedged the coupon row into a flex
 * cell that was never meant to be one.
 *
 * The table is released from table layout too. Left as `display: table` it
 * takes its width from its widest cell, so a long product name pushed it past
 * the container and the text was clipped at the right edge. */
@media (max-width: 767px) {
  .nd-commerce table.cart,
  .nd-commerce table.cart tbody,
  .nd-commerce table.cart tr,
  .nd-commerce table.cart td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .nd-commerce table.cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .nd-commerce table.cart tr {
    padding-block: var(--nd-s-4);
    border-block-end: 1px solid var(--nd-rule);
  }

  .nd-commerce table.cart td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nd-s-3);
    border: 0;
    padding-inline: 0;
    padding-block: var(--nd-s-1);
  }

  .nd-commerce table.cart td::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-family: var(--nd-font-mono);
    font-size: var(--nd-fs-micro);
    font-weight: var(--nd-fw-medium);
    letter-spacing: var(--nd-track-micro);
    text-transform: uppercase;
    color: var(--nd-ink-500);
  }

  /* The name is the row's heading, so it gets the row to itself. */
  .nd-commerce table.cart td.product-name { display: block; }
  .nd-commerce table.cart td.product-name::before { display: none; }
  .nd-commerce table.cart td.product-name a { font-size: var(--nd-fs-md); }

  /* Thumbnail and remove control share the top line. */
  .nd-commerce table.cart td.product-thumbnail { width: auto; padding-block-end: var(--nd-s-3); }
  .nd-commerce table.cart td.product-thumbnail::before { display: none; }
  .nd-commerce table.cart td.product-remove { justify-content: flex-end; padding: 0; }
  .nd-commerce table.cart td.product-remove::before { display: none; }

  .nd-commerce table.cart td.actions { display: block; }
  .nd-commerce table.cart td.actions::before { display: none; }
}

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

.nd-commerce #order_review,
.nd-commerce .woocommerce-checkout-review-order {
  background: var(--nd-surface-alt);
  border: 1px solid var(--nd-green-line);
  border-radius: var(--nd-r-lg);
  padding: var(--nd-s-5);
}

.nd-commerce .wc_payment_methods { list-style: none; margin: 0 0 var(--nd-s-4); padding: 0; display: grid; gap: var(--nd-s-2); }

.nd-commerce .wc_payment_method label { display: inline; font-weight: var(--nd-fw-semibold); }

.nd-commerce .payment_box {
  background: var(--nd-white);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-r-md);
  padding: var(--nd-s-3) var(--nd-s-4);
  font-size: var(--nd-fs-sm);
}

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

.nd-commerce .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--nd-s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--nd-s-2); }

.nd-commerce .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--nd-control-h-sm);
  padding-inline: var(--nd-s-4);
  border: 1px solid var(--nd-border-control);
  border-radius: var(--nd-r-md);
  color: var(--nd-ink);
  text-decoration: none;
  font-size: var(--nd-fs-sm);
  font-weight: var(--nd-fw-semibold);
}

.nd-commerce .woocommerce-MyAccount-navigation .is-active a {
  background: var(--nd-green);
  border-color: var(--nd-green);
  color: var(--nd-white);
}

@media (min-width: 1024px) {
  .nd-commerce .woocommerce-MyAccount-navigation { float: none; width: auto; }
  .nd-commerce .woocommerce-MyAccount-content { float: none; width: auto; }
}

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

.nd-commerce .woocommerce-message,
.nd-commerce .woocommerce-info,
.nd-commerce .woocommerce-error {
  list-style: none;
  margin: 0 0 var(--nd-s-5);
  padding: var(--nd-s-3) var(--nd-s-4);
  border-radius: var(--nd-r-md);
  font-size: var(--nd-fs-sm);
}

.nd-commerce .woocommerce-message,
.nd-commerce .woocommerce-info {
  background: var(--nd-green-soft);
  border: 1px solid var(--nd-green-line);
  color: var(--nd-ink);
}

.nd-commerce .woocommerce-error {
  background: var(--nd-error-soft);
  border: 1px solid var(--nd-error);
  color: var(--nd-ink);
}

/* ------------------------------------------------- commerce, spacing ---- */

/*
 * checkout.css gave h1 a margin and stopped, so on /my-account/ the words
 * "Login" and "Register" sat directly on top of their own field labels, and
 * the two forms ran into one another with nothing between them.
 *
 * These are WooCommerce's own class names, styled from the theme. No core
 * template is touched.
 */
.nd-commerce .nd-main h2,
.nd-commerce .nd-main h3 {
  margin-block: var(--nd-s-7) var(--nd-s-4);
  font-size: var(--nd-fs-xl);
}

.nd-commerce .nd-main form.login,
.nd-commerce .nd-main form.register,
.nd-commerce .nd-main form.woocommerce-form {
  padding-block-start: var(--nd-s-4);
  border-block-start: 1px solid var(--nd-rule);
}

.nd-commerce .nd-main .woocommerce-LostPassword { margin-top: var(--nd-s-4); }

.nd-commerce .nd-main .woocommerce-privacy-policy-text p,
.nd-commerce .nd-main form .woocommerce-form__label + p,
.nd-commerce .nd-main .woocommerce-form-register > p:not(.form-row) {
  color: var(--nd-ink-500);
  font-size: var(--nd-fs-sm);
}

/* Login and register are two independent tasks; on a wide screen they sit
   beside each other instead of one burying the other below the fold. */
@media (min-width: 1024px) {
  .nd-commerce .nd-main .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nd-s-8);
    align-items: start;
  }

  .nd-commerce .nd-main .u-columns > .col-1,
  .nd-commerce .nd-main .u-columns > .col-2 { width: auto; float: none; margin: 0; }
}

/* The empty-cart notice is a statement, not a strip of tinted background. */
.nd-commerce .nd-main .cart-empty,
.nd-commerce .nd-main .woocommerce-info {
  background: none;
  border: 0;
  border-inline-start: 2px solid var(--nd-green);
  border-radius: 0;
  padding: var(--nd-s-2) 0 var(--nd-s-2) var(--nd-s-4);
  color: var(--nd-ink-700);
  font-size: var(--nd-fs-md);
}

/* ========================================================================
   CART, CHECKOUT AND ACCOUNT AT DESKTOP WIDTH
   ========================================================================

   These pages inherited the editorial page layout: title sticky in a 3fr
   rail, body clamped to --nd-measure. Right for a policy page, where the
   measure is the point. Wrong for a cart: measured at 1440px the container
   was 1240px and the cart had 544px of it, so the items and the totals were
   folded into 44% of the page with 696px empty beside them.

   Cart and checkout are not prose. Full container, title across the top, and
   the money beside the goods rather than under them. */

@media (min-width: 1024px) {
  .woocommerce-cart .nd-page > .nd-container,
  .woocommerce-checkout .nd-page > .nd-container,
  .woocommerce-account .nd-page > .nd-container { display: block; }

  .woocommerce-cart .nd-page__head,
  .woocommerce-checkout .nd-page__head,
  .woocommerce-account .nd-page__head {
    position: static;
    margin-block-end: var(--nd-s-6);
  }

  .woocommerce-cart .nd-page__body,
  .woocommerce-checkout .nd-page__body,
  .woocommerce-account .nd-page__body { max-width: none; }

  /* ---------------------------------------------------------- the cart --- */

  .woocommerce-cart .nd-page__body > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: var(--nd-s-7);
    align-items: start;
  }

  .woocommerce-cart .nd-page__body > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }

  /* The total follows the items down the page. */
  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
    margin-block-start: 0;
    position: sticky;
    top: calc(var(--nd-header-h) + var(--nd-s-5));
  }

  .woocommerce-cart .cart_totals { margin-block-start: 0; }

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

  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    /*
     * min-content on the first row, and it matters. The billing column spans
     * both rows, and with two implicit `auto` rows the browser distributes that
     * column height across them -- which pushed the first row to 287px and left
     * a 242px hole between the words "Your order" and the panel they head.
     * Pinning row one to its own content sends the slack to row two instead.
     */
    grid-template-rows: min-content 1fr;
    column-gap: var(--nd-s-7);
    align-items: start;
  }

  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: 0;
  }

  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: calc(var(--nd-header-h) + var(--nd-s-5));
  }

  /* Billing and shipping stop stacking now that there is room for both. */
  .woocommerce-checkout #customer_details > .col2-set,
  .woocommerce-checkout #customer_details.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nd-s-6);
    align-items: start;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 { width: auto; float: none; margin: 0; }
  .woocommerce-checkout #customer_details .woocommerce-additional-fields { grid-column: 1 / -1; }

  /* ------------------------------------------------------- the account --- */

  .woocommerce-account .woocommerce-MyAccount-navigation { margin-block-end: var(--nd-s-6); }
}

/* The totals panel reads as the same object as the checkout's order review,
   because it is the same information one step earlier. */
.nd-commerce .cart_totals {
  background: var(--nd-surface-alt);
  border: 1px solid var(--nd-green-line);
  border-radius: var(--nd-r-lg);
  padding: var(--nd-s-5);
}

.nd-commerce .cart_totals > h2 {
  margin-block: 0 var(--nd-s-4);
  font-size: var(--nd-fs-lg);
}

.nd-commerce .cart_totals .shop_table { border: 0; background: none; }
.nd-commerce .cart_totals .shop_table th,
.nd-commerce .cart_totals .shop_table td { padding-inline: 0; background: none; }

/* The label and the figure were touching: "Subtotal$89.85". */
.nd-commerce .cart_totals .shop_table th { padding-inline-end: var(--nd-s-4); text-align: start; }
.nd-commerce .cart_totals .shop_table td { text-align: end; }
.nd-commerce .cart_totals .order-total th,
.nd-commerce .cart_totals .order-total td { font-size: var(--nd-fs-md); }
.nd-commerce .cart_totals .checkout-button { display: block; width: 100%; text-align: center; margin-block-start: var(--nd-s-4); }

/* --------------------------------------------------- the line item ------ */
/*
 * The photograph was rendering at 14.7px. The theme asked for 64 but asked it
 * of the image alone, and the table's own layout algorithm had already given
 * that column 46px to live in and then shrunk the contents to fit. A table
 * column takes its width from the cell, so the cell is what has to be told.
 */
.nd-commerce td.product-thumbnail,
.nd-commerce th.product-thumbnail { width: 96px; }

.nd-commerce .cart_item img,
.nd-commerce td.product-thumbnail img {
  width: 72px;
  height: 72px;
  max-width: none;
  object-fit: contain;
  border-radius: var(--nd-r-sm);
  background: var(--nd-white);
}

/* A cart full of underlined links reads like a search results page. The name
   is the row's subject; it underlines when it is pointed at. */
.nd-commerce td.product-name a {
  font-weight: var(--nd-fw-semibold);
  color: var(--nd-ink-900);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .nd-commerce td.product-name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .nd-commerce td.product-remove a.remove:hover { background: var(--nd-surface-alt); color: var(--nd-ink-900); }
}
.nd-commerce td.product-name .variation { color: var(--nd-ink-500); font-size: var(--nd-fs-sm); margin-block-start: var(--nd-s-1); }

/* The remove control was a bare x in the margin at 10px. */
.nd-commerce td.product-remove a.remove {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--nd-ink-500);
  font-size: var(--nd-fs-md);
  line-height: 1;
  text-decoration: none;
}

/* Coupon and update are one row of controls, not a stack of three.
 *
 * The cell spans six columns, so it has to stay a cell. `display: flex` on the
 * <td> -- or `display: block` on its <tr> -- takes it out of the table box,
 * and the browser stops honouring colspan, wraps it in an anonymous cell and
 * shrinks it to its contents: 268px inside a 776px table, both times.
 *
 * So the cell keeps table-cell and its CONTENTS are what get arranged. */
.nd-commerce .cart td.actions {
  padding-block: var(--nd-s-4);
  text-align: end;
}

.nd-commerce .cart td.actions::after {
  content: "";
  display: block;
  clear: both;
}

.nd-commerce .cart td.actions .coupon {
  display: inline-flex;
  float: inline-start;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-s-2);
  margin: 0;
  text-align: start;
}

.nd-commerce .cart td.actions .coupon .input-text { width: auto; min-width: 12rem; }

@media (max-width: 767px) {
  .nd-commerce .cart td.actions { text-align: start; }
  .nd-commerce .cart td.actions .coupon { display: grid; float: none; gap: var(--nd-s-3); margin-block-end: var(--nd-s-3); }
  .nd-commerce .cart td.actions .coupon .input-text { width: 100%; }
  .nd-commerce .cart td.actions .button { width: 100%; }
}