/* Precision Labs — two-step checkout and order confirmation.

   Loaded after cart.css, which owns the shared .pl-sum order summary. Every
   colour is a token; every corner is square. Woo's own field markup is styled
   in place rather than replaced, so a gateway or a `woocommerce_checkout_fields`
   filter that adds a field still lands in the right column.

   STEP SWITCHING — the JS contract, stated once so it cannot drift.
   Implemented by initCheckoutSteps() in assets/js/theme.js (section 11); until
   that was written the contract below described a switch that did not exist and
   every shopper got both steps at once.

     assets/js/theme.js must
       · add   `is-js`     to form.pl-co on init
       · toggle `is-step-2` on form.pl-co to move between steps
       · refuse to add `is-step-2` while either [data-pl-compliance] checkbox
         is unchecked, or while a visible `.validate-required` row in step 1 is
         empty — hiding step 1 hides those fields, so a shopper would otherwise
         reach Place Order with an empty address and learn about it from the
         server. Refusals surface in [data-pl-step-error]; the button is a
         type="button" and submits nothing, so no browser validation fires.
       · delegate clicks on [data-pl-next-step] and [data-pl-edit-step]
       · move `is-on` between the two .pl-steps__i in the reduced header —
         header.php derives its initial state from ?step=, which never changes
         once the switch is client side, so without this the indicator is stuck
         on "1 Contact & shipping" while the customer is looking at payment
       · mirror the live field values into [data-pl-review] on the step 2 rows;
         they are server-rendered from WC()->customer, which is only as fresh as
         the last update_order_review round trip

   The rules below are written so that `is-js` ALONE is already a correct state:
   step 1 shows, step 2 hides. There is no combination in which both steps
   disappear. With scripting off neither class is ever added, both steps render
   as one long form, and the server-side woocommerce_checkout_process guard is
   what actually enforces the compliance boxes. */

/* ── things WooCommerce prints OUTSIDE our templates ──
 *
 * The coupon toggle, the login prompt and the notices wrapper are echoed from
 * woocommerce_before_checkout_form / _before_cart, which fire inside the
 * shortcode and therefore outside the .pl-wrap that form-checkout.php puts on
 * its grid. They ran edge to edge — "Have a coupon?" started at x=0 while the
 * form beside it sat at 1280.
 *
 * Given the same measure rather than moved, because a plugin adding another
 * notice would land here too and inherit the fix.
 *
 * The measure is now set with width + auto margins instead of the gutter as
 * padding. Same computed content edge — max 1280, one gutter each side, which
 * is what _dev/cart-align.js measures against .pl-head__inner — but the
 * element's BORDER now lands on the page grid rather than a gutter outside it,
 * which is what these blocks need to be drawn as panels at all. With the
 * padding version a bordered coupon card would have been 88px wider than the
 * form beneath it. */
.pl-commercepage .woocommerce-notices-wrapper,
.pl-commercepage .woocommerce-form-coupon-toggle,
.pl-commercepage .woocommerce-form-coupon,
.pl-commercepage .woocommerce-form-login-toggle,
.pl-commercepage .woocommerce-form-login,
.pl-commercepage > .woocommerce > .woocommerce-message,
.pl-commercepage > .woocommerce > .woocommerce-info,
.pl-commercepage > .woocommerce > .woocommerce-error {
  width: calc(100% - 2 * var(--pl-gutter));
  max-width: calc(var(--pl-content) - 2 * var(--pl-gutter));
  margin-inline: auto;
}
/* An empty notices wrapper still reserves its margin, which reads as a gap
   above the form for no reason. */
.pl-commercepage .woocommerce-notices-wrapper:empty { display: none; }

/* ── and what they look like ──
 *
 * Everything above was aligned but undesigned: "Have a coupon? Click here to
 * enter your code" rendered as a bare sentence in the page's body colour, one
 * line above a bordered form panel, which reads as a rendering fault rather
 * than as an offer.
 *
 * Matched by position (direct child of a wrapper WooCommerce prints) rather
 * than by the notice class alone, so cart-empty.php's own info line — which
 * cart.css deliberately draws as plain text — is left where it is.
 *
 * Every selector is under body.pl-checkout-flow, the class functions.php adds
 * for is_cart() || is_checkout(). Without it these rules outrank account.css's
 * own notice styling, which is scoped to body.woocommerce-account precisely so
 * that "the cart and checkout own their own messaging" — this is that
 * messaging, and it must not leak back the other way. */
.pl-checkout-flow .pl-commercepage > .woocommerce > .woocommerce-info,
.pl-checkout-flow .pl-commercepage > .woocommerce > .woocommerce-message,
.pl-checkout-flow .pl-commercepage > .woocommerce > .woocommerce-error,
.pl-checkout-flow .pl-commercepage .woocommerce-notices-wrapper > .woocommerce-info,
.pl-checkout-flow .pl-commercepage .woocommerce-notices-wrapper > .woocommerce-message,
.pl-checkout-flow .pl-commercepage .woocommerce-notices-wrapper > .woocommerce-error,
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon-toggle > .woocommerce-info,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login-toggle > .woocommerce-info {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--pl-info-bd);
  background: var(--pl-info-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pl-t3);
}
.pl-checkout-flow .pl-commercepage > .woocommerce > .woocommerce-message,
.pl-checkout-flow .pl-commercepage .woocommerce-notices-wrapper > .woocommerce-message {
  border-color: var(--pl-ok-fg);
  background: var(--pl-ok-bg);
  color: var(--pl-ok-fg);
}
/* There is no red in tokens.css and one is not invented here. account.css
   settles the same question the same way: an error is the brand navy at full
   ink weight on white, carried by border and weight rather than by hue. */
.pl-checkout-flow .pl-commercepage > .woocommerce > .woocommerce-error,
.pl-checkout-flow .pl-commercepage .woocommerce-notices-wrapper > .woocommerce-error {
  flex-direction: column;
  align-items: flex-start;
  border-color: var(--pl-navy);
  background: var(--pl-surface);
  color: var(--pl-ink);
  font-weight: 600;
}
.pl-checkout-flow .pl-commercepage .woocommerce-error li { margin: 0; }
.pl-checkout-flow .pl-commercepage .woocommerce-info a,
.pl-checkout-flow .pl-commercepage .woocommerce-message a,
.pl-checkout-flow .pl-commercepage .woocommerce-error a {
  color: var(--pl-navy);
  font-weight: 700;
}
.pl-checkout-flow .pl-commercepage .woocommerce-info a:hover,
.pl-checkout-flow .pl-commercepage .woocommerce-message a:hover,
.pl-checkout-flow .pl-commercepage .woocommerce-error a:hover { color: var(--pl-ink); }

/* The coupon and login forms are toggled by WooCommerce's own jQuery, which
   writes `display: block` straight onto the element — so the layout has to come
   from the children. A `display: flex` here would be beaten by that inline
   style the moment the shopper opened the panel. */
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login {
  margin: 0 auto 16px;
  padding: 20px;
  border: 1px solid var(--pl-bd);
  background: var(--pl-surface);
  font-size: 13.5px;
  color: var(--pl-t2);
}
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon > p,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login > p { margin: 0 0 12px; }
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon .form-row,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login .form-row {
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
  max-width: 280px;
  margin: 0 12px 0 0;
  padding: 0;
}
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon .form-row-last,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login .form-row-last {
  width: auto;
  max-width: none;
  margin-right: 0;
}
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon label,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pl-muted);
}
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon button,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 24px;
  cursor: pointer;
  border: 1px solid var(--pl-navy);
  border-radius: 0;
  background: var(--pl-navy);
  color: var(--pl-on-dark);
  font: 700 12px/1 var(--pl-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pl-checkout-flow .pl-commercepage .woocommerce-form-coupon button:hover,
.pl-checkout-flow .pl-commercepage .woocommerce-form-login button:hover { background: var(--pl-navy-deep); }
.pl-checkout-flow .pl-commercepage .woocommerce-form-login .woocommerce-form-login__rememberme { max-width: none; }

/* ── reduced checkout header (markup lives in header.php) ── */
/* padding-block only: .pl-head__inner also carries .pl-wrap, whose
   `padding: 0 var(--pl-gutter)` the shorthand would delete — collapsing the
   page gutter on the checkout header alone. */
.pl-head--checkout .pl-head__inner { gap: 28px; padding-block: 20px; }
.pl-steps { list-style: none; display: flex; align-items: center; gap: 14px; }
.pl-steps__i { font-size: 12.5px; font-weight: 700; color: var(--pl-faint); }
.pl-steps__i.is-on { color: var(--pl-navy); }
.pl-steps__rule { width: 34px; height: 1px; background: var(--pl-bd-strong); }
.pl-secure {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pl-muted);
}

/* ── layout ─────────────────────────────────────── */
/* padding-block: this element also carries .pl-wrap, and `padding: 36px 0 52px`
   deletes that class's horizontal gutter — which put the whole checkout form
   44px left of the header and of the coupon line above it. */
.pl-co__grid { padding-block: 36px 52px; }
.pl-co__main { display: flex; flex-direction: column; gap: 26px; }
.pl-co__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.pl-co__step { display: flex; flex-direction: column; gap: 26px; }

.pl-co.is-js .pl-co__step--2 { display: none; }
.pl-co.is-js.is-step-2 .pl-co__step--1 { display: none; }
.pl-co.is-js.is-step-2 .pl-co__step--2 { display: flex; }

/* ── panels ─────────────────────────────────────── */
.pl-co__panel { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--pl-bd); }
.pl-co__panelhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pl-co__panelh { font-size: 19px; font-weight: 700; letter-spacing: -.02em; padding: 0; }
.pl-co__panelnote { font-size: 12.5px; color: var(--pl-muted); }
.pl-co__details { display: flex; flex-direction: column; gap: 26px; }

/* The second panel carries only the ship-elsewhere toggle and the order note.
   Drawn quieter than the panel above it: a full-weight card holding one
   checkbox reads as a section that has lost its contents. */
.pl-co__panel--ship { background: var(--pl-surface-alt); gap: 14px; }

/* A heading INSIDE a panel is a group divider, not a second title. WooCommerce
   prints "Billing details" at the top of its billing fields; at 19px directly
   under the panel's own <h2> the panel appeared to be titled twice, which is
   most of what made this column read as undifferentiated. */
/* .woocommerce-billing-fields > h3 is matched as well as the theme's own
   class: form-billing.php adds pl-co__grouph, but WooCommerce's stock template
   does not, and this stylesheet must not depend on that override being present
   — with only the class, an un-overridden checkout renders "Billing details" at
   the browser's default h3 size. Deliberately NOT matching
   .woocommerce-shipping-fields > h3: that one is #ship-to-different-address, a
   checkbox wearing a heading, and it is styled as the control it is. */
.pl-co__panel .pl-co__grouph,
.pl-co__panel .woocommerce-billing-fields > h3,
.pl-co__panel .woocommerce-additional-fields > h3 {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pl-bd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-muted);
}

/* Woo's field wrappers, laid out on a six-track grid.
 *
 * Six rather than two so a two-up (name, contact) and a three-up
 * (town / province / postcode) both land on one rhythm without a second
 * container. Every address field WooCommerce ships carries `form-row-wide`, so
 * the previous `.form-row-wide { grid-column: 1 / -1 }` widened nine of the
 * eleven rows and the panel became a single column of identical boxes — the
 * "long undifferentiated column" complaint, in one selector.
 *
 * Full width is still the DEFAULT: anything not named below spans the row,
 * which is the right answer for a field a plugin adds. */
.pl-co__panel .woocommerce-billing-fields__field-wrapper,
.pl-co__panel .woocommerce-shipping-fields__field-wrapper,
.pl-co__panel .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.pl-co__panel .form-row { grid-column: 1 / -1; margin: 0; padding: 0; }
.pl-co__panel .form-row-first,
.pl-co__panel .form-row-last,
.pl-co__panel [id$="_phone_field"],
.pl-co__panel [id$="_email_field"] { grid-column: span 3; }
.pl-co__panel [id$="_city_field"],
.pl-co__panel [id$="_state_field"],
.pl-co__panel [id$="_postcode_field"] { grid-column: span 2; }

.pl-co__panel .form-row label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--pl-t2);
}
/* The label takes the brand colour while its own field has focus. In a form
   drawn in one hue with square corners, that is the only "you are here" the
   design has room for. */
.pl-co__panel .form-row:focus-within > label { color: var(--pl-navy); }
.pl-co__panel .form-row label .required,
.pl-co__panel abbr.required {
  color: var(--pl-navy); text-decoration: none; border: 0; margin-left: 2px;
}
/* Woo prints "(optional)" inside the label at label weight, which made an
   optional field shout as loudly as a required one. */
.pl-co__panel .form-row label .optional {
  color: var(--pl-faint); font-weight: 500; font-size: 12px;
}
.pl-co__panel .woocommerce-input-wrapper { display: block; }
.pl-co__panel .form-row textarea { min-height: 96px; resize: vertical; }

/* selectWoo swaps the province <select> for a span. Sized to the same 51px an
   input resolves to (15px text + 14px padding + 1px border, twice over) so a
   row holding one of each does not step. */
.pl-co__panel .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 51px;
  padding: 0 15px;
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  background: var(--pl-surface);
}
.pl-co__panel .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.4; font-size: 15px; color: var(--pl-ink);
}
.pl-co__panel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 49px; right: 12px;
}
.pl-co__panel .select2-container--default.select2-container--focus .select2-selection--single,
.pl-co__panel .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pl-navy);
}

/* Error state. Focus is a 1px navy border plus a soft ring (base.css); invalid
   is a 2px border plus a tinted field, so the two are told apart by weight and
   fill rather than by a colour this palette does not contain. */
.pl-co__panel .form-row.woocommerce-invalid input,
.pl-co__panel .form-row.woocommerce-invalid select,
.pl-co__panel .form-row.woocommerce-invalid textarea,
.pl-co__panel .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
  border-width: 2px;
  border-color: var(--pl-navy);
  background: var(--pl-info-bg);
}
.pl-co__panel .form-row.woocommerce-invalid > label { color: var(--pl-navy); }

/* Woo's checkbox rows — "Create an account?", "Ship to a different address?".
   The label is the target, so the whole row is the target. */
.pl-co__panel .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--pl-t3); cursor: pointer;
}
.pl-co__panel .woocommerce-form__input-checkbox,
.pl-co__panel #ship-to-different-address input {
  flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--pl-navy); border-radius: 0; cursor: pointer;
}

/* "Ship to a different address" toggle */
.pl-co__panel #ship-to-different-address {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 15px; font-weight: 700;
}
.pl-co__panel #ship-to-different-address .woocommerce-form__label-for-checkbox { font: inherit; }

/* selectWoo appends its dropdown to <body>, so it is outside .pl-co__panel and
   cannot be scoped to it. Square corners and the theme's own lines, since the
   default is a rounded blue-highlighted list that belongs to no page here. */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  background: var(--pl-surface);
}
.select2-container--default .select2-results__option {
  font-size: 14px;
  color: var(--pl-t3);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--pl-navy);
  color: var(--pl-on-dark);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  font-size: 14px;
}

/* ── delivery options ───────────────────────────── */
.pl-co__delivery { border: 1px solid var(--pl-bd); }
.pl-co__delivery legend { padding: 0; }
.pl-opts { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pl-opts__i {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--pl-bd-strong); padding: 16px 18px;
}
.pl-opts__i:has(input:checked),
.pl-opts__i.is-on { border: 2px solid var(--pl-navy); padding: 15px 17px; }
.pl-opts__i input { flex: none; width: 16px; height: 16px; accent-color: var(--pl-navy); }
.pl-opts__i label {
  flex: 1; display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; cursor: pointer;
}
.pl-opts__label { font-size: 15px; font-weight: 700; }
.pl-opts__i .amount { font-weight: 700; }
.pl-co__norates { font-size: 13.5px; color: var(--pl-t2); }
.pl-co__deliverynote { font-size: 13px; color: var(--pl-muted); }

/* ── compliance panel ───────────────────────────── */
/* Legal control, not decoration. The server-side half is registered in
   inc/woocommerce.php on woocommerce_checkout_process — see the note at the top
   of woocommerce/checkout/form-checkout.php. */
.pl-compliance {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--pl-info-bg); border: 1px solid var(--pl-info-bd); padding: 22px;
}
.pl-compliance legend { padding: 0; margin-bottom: 2px; }
.pl-check { display: flex; gap: 12px; align-items: flex-start; }
.pl-check__box {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--pl-navy); border-radius: 0; cursor: pointer;
}
.pl-check__label { font-size: 13.5px; line-height: 1.5; color: var(--pl-t3); cursor: pointer; }
.pl-check__label .required { color: var(--pl-navy); text-decoration: none; border: 0; }

/* The panel takes a heavier line while the gate is refusing, so the message
   below the form and the box that caused it are visibly the same event. */
.pl-compliance.is-invalid { border-width: 2px; border-color: var(--pl-navy); padding: 21px; }

/* ── step actions ───────────────────────────────── */
/* Shown by theme.js when "Continue to payment" is refused. No `display` is set
   on it, so the `hidden` attribute is what actually hides it — a display rule
   here would outrank [hidden] and the message would be permanent. */
.pl-co__error {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--pl-navy);
  background: var(--pl-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--pl-ink);
}
.pl-co__foot { display: flex; gap: 14px; align-items: center; }
.pl-co__next { flex: 1; }
.pl-co__return {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 600 13px/1.4 var(--pl-font); color: var(--pl-muted);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.pl-co__return:hover { color: var(--pl-ink); }

/* ── order summary, checkout side ────────────────
 *
 * cart.css lays the shipping row out as a COLUMN, because on the CART page
 * WooCommerce renders the rate chooser inside that cell and label-above-radios
 * is the only shape that works there. On checkout the chooser lives in step 1
 * and this cell is a read-only cost, so that rule turned "Shipping — Flat rate"
 * and "$30.00" into two stacked full-width rows in a summary where every other
 * line is a label/value pair.
 *
 * Scoped to .woocommerce-checkout-review-order-table — the class
 * WC_AJAX::update_order_review keys its fragment on, and the one class
 * review-order.php documents as load bearing — so the cart page keeps its
 * chooser layout untouched. */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals {
  flex-direction: row;
  align-items: baseline;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th {
  flex: 1 1 auto;
  min-width: 0;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
  flex: none;
  text-align: right;
}

/* The heading sits outside the .pl-sum box on checkout (aside > h2 + div),
   where the column's own 14px gap already provides the space its
   margin-bottom was adding on the cart page. */
.pl-co__side > .pl-sum__h { margin-bottom: 0; }

/* ── step 2 review rows ─────────────────────────── */
.pl-co__review { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; }
.pl-co__reviewrow { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.pl-co__reviewk { color: var(--pl-muted); flex: none; }
.pl-co__reviewv {
  display: flex; gap: 10px; align-items: baseline; justify-content: flex-end;
  font-weight: 600; text-align: right; min-width: 0;
}
.pl-co__reviewv button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 600 13px/1.4 var(--pl-font); color: var(--pl-navy);
}
.pl-co__reviewv button:hover { color: var(--pl-ink); }

/* ── payment ────────────────────────────────────── */
.pl-co__payment #payment,
.pl-co__payment .woocommerce-checkout-payment { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pl-co__payment .wc_payment_methods {
  list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0;
}
.pl-co__payment li.wc_payment_method {
  border: 1px solid var(--pl-bd-strong); padding: 16px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.pl-co__payment li.wc_payment_method:has(input:checked) { border: 2px solid var(--pl-navy); padding: 15px 17px; }
.pl-co__payment li.wc_payment_method > input { flex: none; width: 16px; height: 16px; accent-color: var(--pl-navy); }
.pl-co__payment li.wc_payment_method > label {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer; margin: 0;
}
.pl-co__payment li.wc_payment_method img { max-height: 24px; width: auto; display: inline-block; }
.pl-co__payment .payment_box {
  flex: 1 1 100%; background: var(--pl-surface-alt); border: 1px solid var(--pl-bd);
  padding: 16px; margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--pl-t2);
}
.pl-co__payment .payment_box p:last-child { margin-bottom: 0; }

.pl-co__payment .woocommerce-terms-and-conditions-wrapper {
  margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--pl-muted);
}
.pl-co__payment .form-row.place-order { margin: 16px 0 0; padding: 0; }
.pl-co__payment #place_order {
  width: 100%; padding: 16px 26px; cursor: pointer;
  border: 1px solid var(--pl-ink); border-radius: 0;
  background: var(--pl-ink); color: var(--pl-on-dark);
  font: 700 12.5px/1 var(--pl-font); letter-spacing: .14em; text-transform: uppercase;
  transition: filter .18s;
}
.pl-co__payment #place_order:hover { filter: brightness(1.35); }
.pl-co__legal { font-size: 12.5px; line-height: 1.55; color: var(--pl-muted); }

/* ── confirmation ───────────────────────────────── */
.pl-cols--conf { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }

/* padding-block throughout this block: every one of these elements also carries
   .pl-wrap, and a `padding: <v> 0` shorthand deletes that class's horizontal
   gutter. _dev/gutter-lint.js checks for exactly this. */
.pl-conf__head { padding-block: 44px 12px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pl-conf__check {
  width: 52px; height: 52px; flex: none;
  background: var(--pl-ok-bg); color: var(--pl-ok-fg);
  display: flex; align-items: center; justify-content: center;
}
.pl-conf__title { margin: 0; }
.pl-conf__received { font-size: 13.5px; color: var(--pl-muted); }
.pl-conf__received p { margin: 0; }
.pl-conf__lead { max-width: 640px; }
.pl-conf__body { padding-block: 24px 52px; }
.pl-conf__failed { padding-block: 44px; display: flex; flex-direction: column; gap: 16px; }
.pl-conf__gateway:empty { display: none; }

.pl-conf__items { padding: 8px 24px 20px; }
.pl-conf__itemshead { padding: 16px 0 4px; }
.pl-conf__row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 190px;
  gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--pl-bd);
}
.pl-conf__thumb { width: 72px; height: 72px; background: var(--pl-canvas); }
.pl-conf__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pl-conf__name { font-size: 16px; font-weight: 700; }
.pl-conf__lot { margin-top: 3px; font-size: 13px; color: var(--pl-muted); }
.pl-conf__dl { width: 100%; }

.pl-conf__bulk { display: flex; gap: 12px; padding-top: 18px; }
.pl-conf__bulk > * { flex: 1; }

.pl-conf__overview {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--pl-bd);
  font-size: 12.5px; color: var(--pl-muted);
}
.pl-conf__overview strong { display: block; font-size: 13.5px; color: var(--pl-ink); }

.pl-conf__side { display: flex; flex-direction: column; gap: 14px; }
.pl-conf__sideh { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pl-conf__ship { display: flex; flex-direction: column; gap: 14px; padding: 24px; }

/* Timeline dots stay round: they are status bullets, which the design source
   also draws as circles. The square-corner rule covers buttons, cards, inputs
   and badges. */
.pl-track { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pl-track__i { display: flex; gap: 11px; align-items: center; font-size: 13.5px; font-weight: 600; }
.pl-track__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1px solid var(--pl-bd-strong); background: transparent;
}
.pl-track__i--done .pl-track__dot { background: var(--pl-ok-fg); border-color: var(--pl-ok-fg); }
.pl-track__i--now  .pl-track__dot { background: var(--pl-navy);  border-color: var(--pl-navy); }
.pl-track__i--open { color: var(--pl-faint); font-weight: 500; }
.pl-track__note { color: var(--pl-muted); font-weight: 500; }

.pl-conf__addr { font-style: normal; font-size: 13.5px; line-height: 1.5; color: var(--pl-t2); }
.pl-conf__method { font-size: 13.5px; color: var(--pl-t2); }

.pl-conf__news { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.pl-conf__newsform { display: flex; }
.pl-conf__newsform input { flex: 1; min-width: 0; }
.pl-conf__newsform .pl-btn { flex: none; }
.pl-conf__support { padding: 22px; }

/* ── responsive ─────────────────────────────────── */
@media (max-width: 1199px) {
  .pl-cols--conf { grid-template-columns: minmax(0, 1fr); }
  .pl-co__side { position: static; }
}

@media (max-width: 767px) {
  .pl-co__grid { padding-block: 22px 40px; }
  .pl-co__panel .woocommerce-billing-fields__field-wrapper,
  .pl-co__panel .woocommerce-shipping-fields__field-wrapper,
  .pl-co__panel .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One track, so every span above has to be cancelled or the browser invents
     implicit columns and the panel scrolls sideways. The child combinator
     outranks the `span` rules (0,3,0 against 0,2,0) whatever their order. */
  .pl-co__panel .woocommerce-billing-fields__field-wrapper > .form-row,
  .pl-co__panel .woocommerce-shipping-fields__field-wrapper > .form-row,
  .pl-co__panel .woocommerce-additional-fields__field-wrapper > .form-row {
    grid-column: 1 / -1;
  }
  /* iOS zooms the page in on focus for anything under 16px. The search overlay
     already holds this floor for the same reason. */
  .pl-co__panel input,
  .pl-co__panel select,
  .pl-co__panel textarea,
  .pl-co__panel .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
  }
  .pl-co__panel .woocommerce-form__label-for-checkbox,
  .pl-co__panel #ship-to-different-address { min-height: 44px; }

  /* Native checkboxes and radios cannot be made 44px — Chrome ignores padding
     on them and scales the glyph to whatever box it is given — so the LABEL is
     the target, as it already is for .pl-comply__row. Measured at 390px before
     this block: the delivery radio's label was 222x23 and the 19+ confirmation's
     was 243x20, both under the floor while the row around them looked generous.
     Padding rather than a flex box: the label holds an <abbr> that must stay in
     the text flow, and flex items would move it out of the sentence. */
  .pl-opts__i { padding-block: 8px; }
  .pl-opts__i:has(input:checked) { padding-block: 7px; }
  .pl-opts__i label { min-height: 44px; align-items: center; }
  .pl-check__label { display: block; padding-block: 12px; }
  .pl-check__box { margin-top: 14px; }
  .pl-commercepage .woocommerce-form-coupon .form-row,
  .pl-commercepage .woocommerce-form-login .form-row {
    display: block; max-width: none; margin: 0 0 12px;
  }
  .pl-commercepage .woocommerce-form-coupon .form-row-last,
  .pl-commercepage .woocommerce-form-login .form-row-last { margin-bottom: 0; }
  .pl-commercepage .woocommerce-form-coupon button,
  .pl-commercepage .woocommerce-form-login button { width: 100%; }
  /* "Click here to enter your code" measured 188x20 at 375px — the only way
     into the coupon field, and under the floor on one axis. */
  .pl-commercepage .woocommerce-info .showcoupon,
  .pl-commercepage .woocommerce-info .showlogin {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* The checkout header's logo is the mark alone: 19x46 at 375px. It is the
     one route back to the site from a payment in progress. */
  .pl-head--checkout .pl-logo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  .pl-co__foot { flex-direction: column; align-items: stretch; }
  .pl-co__return { justify-content: center; min-height: 44px; }
  .pl-co__reviewrow { flex-direction: column; gap: 4px; }
  .pl-co__reviewv { justify-content: flex-start; text-align: left; }

  .pl-conf__head { padding-block: 26px 8px; }
  .pl-conf__row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 12px; }
  .pl-conf__thumb { width: 56px; height: 56px; }
  .pl-conf__get { grid-column: 1 / -1; }
  .pl-conf__bulk { flex-direction: column; }

  /* The step indicator STAYS on a phone now that the two steps actually
     switch: hiding it meant tapping "Continue to payment" replaced the whole
     page with no signal about where the shopper had landed. It was also making
     four rules in mobile.css dead — that file sizes .pl-steps to 12px and holds
     .pl-steps__rule to 18px for a small screen, against an element this file
     was hiding.
     "Encrypted checkout" gives way to it instead: the header inner wraps at
     this width, and logo + steps + claim + back-to-cart is a three-row header.
     Reassurance loses to orientation on a two-step form. */
  .pl-head--checkout .pl-secure { display: none; }
}

/* ── compliance confirmations ─────────────────────
   Rendered by pl_render_compliance_fields() on a hook, so these styles have to
   stand on their own inside whichever checkout layout is active — including
   FunnelKit's Aero Checkout, which replaces the theme's checkout template. */
.pl-comply {
  margin: 18px 0;
  padding: 18px;
  background: var(--pl-info-bg);
  border: 1px solid var(--pl-info-bd);
}
.pl-comply__lead {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-navy);
}
.pl-comply__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pl-t3);
  cursor: pointer;
}
.pl-comply__row input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--pl-navy);
  border-radius: 0;
}
@media (max-width: 767px) {
  /* The label is the tap target; the box alone is 20px. */
  .pl-comply__row { min-height: 44px; align-items: center; }
}
/* ── Checkout blocked by the cart ─────────────────────────────────────────
 *
 * woocommerce/checkout/cart-errors.php. Same measure and panel language as the
 * cart, so a shopper who lands here does not feel dropped onto an error page.
 * padding-block, never `padding: x 0` — that shorthand wipes the page gutter.
 */
.pl-cartissues { max-width: 720px; padding-block: 8px 56px; }
.pl-cartissues__head { margin-bottom: 24px; }
.pl-cartissues__head .pl-h2 { margin: 6px 0 10px; }
.pl-cartissues__head .pl-body { color: var(--pl-muted); max-width: 52ch; }

.pl-cartissues__list { list-style: none; margin: 0 0 24px; padding: 0; }
.pl-cartissues__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  border: 1px solid var(--pl-bd);
  border-bottom: 0;
  padding-inline: 18px;
  background: var(--pl-surface);
}
.pl-cartissues__item:last-child { border-bottom: 1px solid var(--pl-bd); }
.pl-cartissues__what { flex: 1 1 auto; min-width: 0; }
.pl-cartissues__name { margin: 0; font-size: 15px; font-weight: 600; color: var(--pl-ink); }
.pl-cartissues__why {
  margin: 4px 0 0;
  font-size: 13px;
  color: #B42318;
}
.pl-cartissues__qty { color: var(--pl-muted); }
.pl-cartissues__remove { flex: none; }

.pl-cartissues__notices p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--pl-muted);
}
.pl-cartissues__back { margin: 8px 0 0; }

@media (max-width: 599px) {
  .pl-cartissues__item { flex-wrap: wrap; }
  .pl-cartissues__remove { width: 100%; text-align: center; }
}