/* Precision Labs — cart page.

   Loaded after base.css, so every colour here is a token from tokens.css and
   every corner stays square. The order-summary block (.pl-sum) is defined here
   rather than in checkout.css because both cart-totals.php and review-order.php
   render it and cart.css is enqueued first.

   The line-item table is a real <table>: WooCommerce fires do_action() hooks
   inside <tbody> and third-party plugins echo <tr> into them. A browser drops a
   stray <tr> that has no table ancestor, so switching to <div>s would silently
   delete whatever those plugins output. The design's grid is reached by
   overriding `display` instead. */

/* ── page head ──────────────────────────────────── */
/* padding-block, not the `padding: Y 0 Z` shorthand: .pl-cart also carries
   .pl-wrap, whose horizontal gutter the shorthand silently deletes. */
.pl-cart { padding-block: 34px 48px; }

.pl-cart__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; padding-bottom: 12px;
}
.pl-cart__title { margin-top: 8px; }
.pl-cart__back { font-size: 13.5px; white-space: nowrap; }

/* ── nudge strips ───────────────────────────────── */
/* Both the volume tier and the free-shipping remainder come from PHP helpers.
   Nothing about the threshold or the percentage is expressed in CSS. */
.pl-nudge {
  background: var(--pl-surface); border: 1px solid var(--pl-bd);
  padding: 14px 20px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 20px;
}
.pl-nudge__body { flex: 1; min-width: 0; }
.pl-nudge__text { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

/* <progress> keeps the fill width out of an inline style attribute and gives
   assistive tech a real value at the same time. */
.pl-nudge__bar {
  display: block; width: 100%; height: 6px; margin-top: 9px;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0; background: var(--pl-bd); color: var(--pl-navy);
}
.pl-nudge__bar::-webkit-progress-bar { background: var(--pl-bd); border-radius: 0; }
.pl-nudge__bar::-webkit-progress-value { background: var(--pl-navy); border-radius: 0; }
.pl-nudge__bar::-moz-progress-bar { background: var(--pl-navy); border-radius: 0; }

.pl-nudge__cta {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pl-navy); white-space: nowrap;
}
.pl-nudge__cta:hover { color: var(--pl-ink); }
.pl-nudge--ship .pl-nudge__text { font-weight: 600; color: var(--pl-ok-fg); }

/* ── layout ─────────────────────────────────────── */
.pl-cart__body { margin-top: 8px; }
.pl-cart__main { background: var(--pl-surface); border: 1px solid var(--pl-bd); padding: 8px 24px 16px; }
.pl-cart__side { display: flex; flex-direction: column; gap: 14px; }
.cart-collaterals { display: flex; flex-direction: column; gap: 14px; }

/* ── line items ─────────────────────────────────── */
.pl-cart__table { width: 100%; border-collapse: collapse; }
.pl-cart__table thead { display: none; }
.pl-cart__table tbody,
.pl-cart__table tr,
.pl-cart__table td { display: block; }

.pl-cart__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 120px 110px;
  gap: 18px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--pl-bd);
}
.pl-cart__row .product-thumbnail {
  grid-column: 1; grid-row: 1 / span 2;
  width: 96px; height: 96px; background: var(--pl-canvas);
}
.pl-cart__row .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.pl-cart__row .product-name     { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.pl-cart__row .product-quantity { grid-column: 3; grid-row: 1 / span 2; }
.pl-cart__row .product-subtotal {
  grid-column: 4; grid-row: 1; text-align: right;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.pl-cart__row .product-price {
  grid-column: 4; grid-row: 2; text-align: right;
  font-size: 12.5px; color: var(--pl-muted);
}

.pl-cart__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pl-cart__name a:hover { color: var(--pl-navy); }
.pl-cart__spec { margin-top: 6px; font-size: 13px; color: var(--pl-muted); }
.pl-cart__bundle { margin-top: 4px; font-size: 12.5px; color: var(--pl-t2); }

.pl-cart__meta { margin-top: 6px; font-size: 12.5px; color: var(--pl-muted); }
.pl-cart__meta dt { font-weight: 600; display: inline; }
.pl-cart__meta dd { display: inline; margin: 0 0 0 4px; }
.pl-cart__meta dd::after { content: ""; display: block; }
.pl-cart__meta p { margin: 0; }

.pl-cart__actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.pl-cart__lab {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 600 12.5px/1.4 var(--pl-font); color: var(--pl-navy);
  display: inline-flex; align-items: center; gap: 4px;
}
.pl-cart__lab:hover { color: var(--pl-ink); }
.pl-cart__remove { color: var(--pl-faint); font-size: 12.5px; }
.pl-cart__remove:hover { color: var(--pl-ink); }

.backorder_notification { margin-top: 6px; font-size: 12.5px; color: var(--pl-ok-fg); }

/* ── quantity stepper ───────────────────────────── */
.pl-qty {
  display: flex; align-items: center; width: 106px;
  border: 1px solid var(--pl-bd-strong); background: var(--pl-surface);
}
.pl-qty__btn {
  flex: none; width: 32px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--pl-faint); font-size: 16px; line-height: 1;
}
.pl-qty__btn:hover { color: var(--pl-ink); }
.pl-qty .quantity { flex: 1; min-width: 0; }
.pl-qty input.qty,
.pl-qty input[type="number"] {
  width: 100%; padding: 0; border: 0; background: transparent;
  text-align: center; font-size: 15px; font-weight: 700;
  -moz-appearance: textfield;
}
.pl-qty input.qty:focus { box-shadow: none; }
.pl-qty input[type="number"]::-webkit-outer-spin-button,
.pl-qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── coupon / update row ────────────────────────── */
.pl-cart__toolbar td.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px 0 4px; border-bottom: 0;
}
.pl-cart__coupon { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
.pl-cart__coupon input { max-width: 220px; }

/* ── bacteriostatic water add-on ────────────────── */
.pl-addon {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0 6px; border-top: 1px solid var(--pl-bd); margin-top: 4px;
}
.pl-addon__thumb { width: 64px; height: 64px; flex: none; background: var(--pl-canvas); }
.pl-addon__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pl-addon__copy { flex: 1; min-width: 0; }
.pl-addon__name { font-size: 15px; font-weight: 700; }
.pl-addon__sub { margin-top: 2px; font-size: 13px; color: var(--pl-muted); }
.pl-addon__price { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pl-addon__price del { color: var(--pl-faint); font-weight: 400; margin-right: 6px; }
.pl-addon__price ins { text-decoration: none; }

/* ── order summary (cart + checkout sidebar) ────── */
.pl-sum {
  background: var(--pl-surface); border: 1px solid var(--pl-bd); padding: 24px;
}
.pl-sum__h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 12px; }

.pl-sum__table { width: 100%; border-collapse: collapse; }
.pl-sum__table thead { display: none; }
.pl-sum__table tbody,
.pl-sum__table tfoot { display: block; }
.pl-sum__table tr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--pl-t2);
}
.pl-sum__table th,
.pl-sum__table td { display: block; padding: 0; font-weight: inherit; text-align: left; }
.pl-sum__table td { text-align: right; }
.pl-sum__table small { display: block; font-size: 11.5px; color: var(--pl-faint); }

.pl-sum__item { font-size: 13px; color: var(--pl-muted); }
.pl-sum__item .product-quantity { font-weight: 600; color: var(--pl-t3); }
.pl-sum__item .variation { display: none; }

.pl-sum__save,
.pl-sum__save th,
.pl-sum__save td,
.pl-sum__save .amount { color: var(--pl-ok-fg); font-weight: 600; }

.pl-sum__total {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--pl-bd);
  font-size: 16px; font-weight: 700; color: var(--pl-ink);
}
.pl-sum__total th, .pl-sum__total td { font-weight: 700; }

/* Shipping chooser, when WooCommerce renders it inside the totals table
   (cart page). On checkout the chooser lives in step 1 and this row is a
   read-only cost line. */
.pl-sum__table .woocommerce-shipping-totals { flex-direction: column; align-items: stretch; }
.pl-sum__table .woocommerce-shipping-totals td { text-align: left; }
.pl-sum__table ul#shipping_method {
  list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.pl-sum__table ul#shipping_method li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pl-sum__table ul#shipping_method input { flex: none; accent-color: var(--pl-navy); }
.pl-sum__table .woocommerce-shipping-destination { margin-top: 6px; font-size: 12px; color: var(--pl-faint); }
.pl-sum__table .shipping-calculator-button { color: var(--pl-navy); font-weight: 600; font-size: 12.5px; }

.pl-sum__go { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pl-sum__alt { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--pl-muted); }

/* ── payment marks ──────────────────────────────────────────────────────────
 *
 * Markup from pl_payment_marks_html(). One component for the footer and the
 * checkout summary, so the two cannot advertise different payment methods.
 *
 * The chip is white on both surfaces on purpose: brand marks are drawn for a
 * light ground, and the footer is near-black while the summary is off-white.
 * A single white card is legible on both and is what a shopper expects a
 * payment mark to look like. */
.pl-pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Every chip the same size, so the row reads as a set rather than as four
     unrelated badges. The wordmarks are sized to fit this box below — letting
     them set their own width made the Interac chip wider than the others and
     wrapped the footer row 3 + 1. */
  width: 44px;
  height: 28px;
  padding: 0 3px;
  overflow: hidden;
  flex: none;
  background: #fff;
  border: 1px solid var(--pl-bd-light);
  /* Square, like everything else. Real cards are rounded; one rounded element
     in a square system reads as a mistake rather than as realism. */
  border-radius: 0;
}

.pl-pay__svg { display: block; width: 30px; height: auto; }

/* Wordmarks set in type rather than traced paths — sharp at any size, and no
   mangled approximation of a registered mark ships. */
.pl-pay__word {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}
.pl-pay__word--visa {
  color: #1434CB;
  font-style: italic;
  letter-spacing: .06em;
}
.pl-pay__word--interac {
  color: #1A1A1A;
  /* 8.5px so the longest wordmark still fits the shared 46px chip. This is
     below the 12px body floor deliberately: it is a brand mark, not text a
     shopper has to read — the accessible name in .pl-sr carries "Interac
     e-Transfer" for anyone who needs it. */
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0;
  /* The brand's amber, as a rule under the wordmark — enough to read as
     Interac without pretending to be a traced copy of the logo. */
  border-bottom: 2px solid #FDB913;
  padding-bottom: 1px;
}

/* Footer: left-aligned under the column heading, not centred.
   The Ordering column measures 200px, so a 6px gap is what keeps all four
   marks on one row: 4 x 44 + 3 x 6 = 194px. At the default 8px they needed
   208px and wrapped 3 + 1, which read as a mistake rather than a set. */
.pl-pays--foot { justify-content: flex-start; margin-top: 2px; gap: 6px; }
/* Checkout summary: centred under the place-order button, matching the
   "or continue shopping" line above it. */
.pl-pays--sum  { justify-content: center; margin-top: 14px; }

/* ── reassurance card ───────────────────────────── */
.pl-label--navy { color: var(--pl-navy); font-weight: 700; }
.pl-cart__promise { display: flex; flex-direction: column; gap: 9px; padding: 20px; }
.pl-cart__promiselist {
  list-style: none; display: flex; flex-direction: column; gap: 9px;
  font-size: 13.5px; color: var(--pl-t3);
}

/* ── empty cart ─────────────────────────────────── */
.pl-cart__emptybody { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pl-cart__emptybody .woocommerce-info,
.pl-cart__emptybody .cart-empty { margin: 0; font-size: 15px; color: var(--pl-t2); }
.pl-cart__promise--wide { margin-top: 20px; max-width: 520px; }

/* ── responsive ─────────────────────────────────── */
@media (max-width: 1199px) {
  .pl-cart__row { grid-template-columns: 80px minmax(0, 1fr) 106px 100px; gap: 14px; }
  .pl-cart__row .product-thumbnail { width: 80px; height: 80px; }
}

@media (max-width: 767px) {
  .pl-cart { padding-block: 22px 36px; }
  .pl-cart__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pl-cart__main { padding: 4px 16px 12px; }
  .pl-nudge { flex-direction: column; align-items: stretch; gap: 12px; }
  .pl-nudge__cta { align-self: flex-start; }

  .pl-cart__row {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb qty"
      "total total"
      "price price";
    row-gap: 10px;
  }
  .pl-cart__row .product-thumbnail { grid-area: thumb; width: 72px; height: 72px; }
  .pl-cart__row .product-name      { grid-area: name; grid-row: auto; }
  .pl-cart__row .product-quantity  { grid-area: qty;  grid-row: auto; }
  .pl-cart__row .product-subtotal  { grid-area: total; grid-row: auto; text-align: left; }
  .pl-cart__row .product-price     { grid-area: price; grid-row: auto; text-align: left; }

  .pl-cart__toolbar td.actions { flex-direction: column; align-items: stretch; }
  .pl-cart__coupon { min-width: 0; }
  .pl-cart__coupon input { max-width: none; }

  .pl-addon { flex-wrap: wrap; }
  .pl-addon__copy { flex: 1 1 100%; order: 2; }
}