/*
 * Cart, checkout and account.
 *
 * Styled entirely by selector against WooCommerce's own markup rather than by
 * overriding the templates. Cart and checkout are the most complex and most
 * frequently updated templates in WooCommerce, and overriding them means
 * hand-merging every release. The markup here is stable public API; the styling
 * is ours.
 */

/* ---------------------------------------------------------------------------
   Shared table treatment. Ruled rows, no zebra striping, no panel.
--------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin-bottom: var(--k-space-5);
}

.woocommerce table.shop_table th {
  padding: var(--k-space-3) var(--k-space-3) var(--k-space-3) 0;
  border-bottom: 1px solid var(--k-rule-strong);
  text-align: left;
  font-family: var(--k-font-body);
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
}

.woocommerce table.shop_table td {
  padding: var(--k-space-4) var(--k-space-3) var(--k-space-4) 0;
  border-bottom: 1px solid var(--k-rule);
  vertical-align: middle;
}

.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child { padding-right: 0; text-align: right; }

/* Line item: small plate, display-face title, tabular figures. */
.woocommerce table.shop_table td.product-thumbnail { width: 96px; }

.woocommerce table.shop_table td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background-color: var(--k-paper-sunk);
  padding: var(--k-space-1);
}

.woocommerce table.shop_table td.product-name a {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  color: var(--k-ink);
  text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover { text-decoration: underline; }

.woocommerce table.shop_table .amount,
.woocommerce .order-total .amount {
  font-variant-numeric: tabular-nums;
  color: var(--k-ink);
}

/* Remove control: quiet, never a red X. */
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0;
  color: var(--k-ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce a.remove:hover { color: var(--k-ink); background-color: var(--k-paper-sunk); }

/* Quantity input matches the product page stepper. */
.woocommerce .quantity input.qty {
  width: 5rem;
  min-height: 48px;
  padding: 0 var(--k-space-2);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Buttons. The single rose action per page is the one that advances the
   purchase: "Proceed to checkout" in the cart, "Place order" at checkout.
   Everything else — update cart, apply coupon — is the quiet tier.
--------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2rem;
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: transparent;
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--k-duration) var(--k-ease),
              background-color var(--k-duration) var(--k-ease);
}

.woocommerce .button:hover { border-color: var(--k-ink); background-color: var(--k-surface); }

.woocommerce .button:disabled,
.woocommerce .button[disabled] { opacity: 0.45; cursor: not-allowed; }

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  width: 100%;
  min-height: 58px;
  border-color: var(--k-rose);
  background-color: var(--k-rose);
  color: var(--k-surface);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce #place_order::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  opacity: 0.32;
  pointer-events: none;
  transition: inset var(--k-duration) var(--k-ease);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
  background-color: var(--k-rose-deep);
  border-color: var(--k-rose-deep);
  color: var(--k-surface);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover::after,
.woocommerce #place_order:hover::after { inset: 3px; }

/* ---------------------------------------------------------------------------
   Cart layout: items and totals side by side above the breakpoint.
--------------------------------------------------------------------------- */
/*
 * WooCommerce emits notices, the cart form and the totals as siblings inside
 * .woocommerce, so a naive two-column grid scatters them. Placement is explicit:
 * notices span the full width, the form takes the wide column and the totals the
 * narrow one.
 */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr; gap: var(--k-space-5); }

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info,
.woocommerce-cart .woocommerce > .woocommerce-error { grid-column: 1 / -1; }

/* The product column carries the long names, so it gets the room; the numeric
   columns are sized to their content. */
.woocommerce-cart table.shop_table { table-layout: auto; }
.woocommerce-cart table.shop_table td.product-name { min-width: 14rem; }
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal,
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table th.product-subtotal { white-space: nowrap; width: 1%; }
.woocommerce-cart table.shop_table td.product-quantity,
.woocommerce-cart table.shop_table th.product-quantity { width: 1%; white-space: nowrap; }
.woocommerce-cart table.shop_table td.product-remove,
.woocommerce-cart table.shop_table th.product-remove { width: 48px; }

.woocommerce-cart .cart-collaterals {
  background-color: var(--k-surface);
  border: 1px solid var(--k-rule);
  padding: var(--k-space-5);
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  font-weight: 400;
  margin-bottom: var(--k-space-3);
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th { padding-block: var(--k-space-2); }

.woocommerce .order-total th,
.woocommerce .order-total td {
  border-top: 1px solid var(--k-rule-strong);
  font-size: var(--k-size-body);
  color: var(--k-ink);
}

.woocommerce .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  margin-bottom: var(--k-space-4);
}

/* ---------------------------------------------------------------------------
   Forms — checkout and account.
--------------------------------------------------------------------------- */
.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
  margin-bottom: var(--k-space-3);
  padding: 0;
}

.woocommerce form .form-row label {
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
}

.woocommerce form .form-row .required { color: var(--k-rose-deep); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
}

.woocommerce form .form-row textarea { min-height: 8rem; padding-block: var(--k-space-2); line-height: 1.6; }

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible { outline-offset: 1px; }

.woocommerce-checkout #customer_details { margin-bottom: var(--k-space-6); }

.woocommerce-checkout #order_review {
  background-color: var(--k-surface);
  border: 1px solid var(--k-rule);
  padding: var(--k-space-5);
}

.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
  margin-top: var(--k-space-4);
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--k-space-4);
  padding: 0 0 var(--k-space-4);
  border-bottom: 1px solid var(--k-rule);
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--k-paper-sunk);
  border-radius: 0;
  padding: var(--k-space-3);
  font-size: var(--k-size-small);
  color: var(--k-ink-muted);
}

.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* Empty states read as an invitation, not an error. */
.woocommerce .cart-empty,
.woocommerce-info {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  font-weight: 400;
  color: var(--k-ink);
}

.woocommerce .return-to-shop { margin-top: var(--k-space-4); }

@media (min-width: 60rem) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr);
    align-items: start;
    gap: var(--k-space-6);
  }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 2; }
  .woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-5); }
}

@media (max-width: 48rem) {
  /* Stack the cart table into rows rather than letting it scroll sideways. */
  .woocommerce-cart table.shop_table thead { display: none; }
  .woocommerce-cart table.shop_table tr {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--k-space-2) var(--k-space-3);
    padding-block: var(--k-space-3);
    border-bottom: 1px solid var(--k-rule);
  }
  .woocommerce-cart table.shop_table td { border: 0; padding: 0; text-align: left; }
  .woocommerce-cart table.shop_table td.product-thumbnail { grid-row: span 3; }
  .woocommerce-cart table.shop_table td:last-child { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Account forms. WooCommerce's login/register markup ships a few controls with
   no usable size of their own.
--------------------------------------------------------------------------- */
.woocommerce form .show-password-input {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.woocommerce form .password-input {
  position: relative;
  display: block;
  width: 100%;
}

.woocommerce form .password-input input.input-text { padding-right: 56px; }

/* Native checkboxes cannot be resized reliably, so the label carries the
   target and the box is scaled up within it. */
.woocommerce form .woocommerce-form-login__rememberme,
.woocommerce form .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 48px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--k-size-small);
  color: var(--k-ink);
}

.woocommerce form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--k-forest);
  flex: 0 0 auto;
}

.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--k-ink);
}

.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register {
  border: 1px solid var(--k-rule);
  background-color: var(--k-surface);
  padding: var(--k-space-5);
}

.woocommerce h2 {
  font-family: var(--k-font-display);
  font-weight: 400;
  margin-bottom: var(--k-space-3);
}

/* A login form spanning the full container is unreadable; forms get a measure
   of their own regardless of how wide the page is. */
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register,
.woocommerce-lost-password .woocommerce-ResetPassword { max-width: 34rem; }

.woocommerce-account .woocommerce > h2:first-of-type { max-width: 34rem; }

/*
 * Totals rows draw one continuous rule.
 *
 * WooCommerce marks up each totals row as <th>label</th><td>amount</td>, and
 * the two carried different rule weights — rule-strong for the header cell,
 * rule for the data cell — so the line visibly changed weight halfway across
 * every Subtotal, Total and Payment method row on the order and cart pages.
 * The strong weight belongs to the table's column headings, not to these.
 */
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  border-bottom: 1px solid var(--k-rule);
}

.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
}