/* ============================================================
   ASTROZON — checkout
   depends on cart.css for .summary, .freeship, .trust, .helpstrip
   ============================================================ */

.ckpage__head{ margin-bottom:16px; }
.ckpage__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.ckpage__sub{
  margin:5px 0 0;
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.ckpage__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:24px;
  align-items:start;
}

/*
 * The grid is the checkout form itself, and on a failed submission
 * checkout.js prepends its error into that form:
 *
 *   $checkout_form.prepend( '<div class="woocommerce-NoticeGroup …' )
 *
 * which made the notice grid cell one and shunted the whole details column
 * across into the summary's column, leaving the left half empty. So the two
 * columns are pinned by name, and anything else injected between them — the
 * notice group, the express-payment buttons, whatever a gateway adds — spans
 * the full width instead of consuming a cell.
 */
.ckpage__main{ grid-column:1; }
.ckpage__side{ grid-column:2; }

.ckpage__grid > *:not(.ckpage__main):not(.ckpage__side){
  grid-column:1 / -1;
}

.ckpage__side{
  position:sticky;
  top:98px;
}

.ckcard{
  padding:22px 24px 24px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.ckcard__title{
  margin:0 0 18px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}

/* card header with a right-aligned action, e.g. "Deliver to another address" */
.ckcard__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.ckcard__bar .ckcard__title{ margin:0; }
.ckcard__alt{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:var(--brand);
  cursor:pointer;
  transition:opacity .18s ease;
}
.ckcard__alt svg{ width:15px; height:15px; }
.ckcard__alt:hover{ opacity:.75; }
.ckcard--alt[hidden]{ display:none; }


/* ============================================================
   FORM FIELDS
   ============================================================ */

.ckfields{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:0 22px;
}
.ckcard .form-row{
  display:flex;
  flex-direction:column;
  margin:0 0 18px;
  padding:0;
}

/* the field array assigns these; see inc/checkout-fields.php */
.ckfields .az-col-4{ grid-column:span 4; }
.ckfields .az-col-6{ grid-column:span 6; }
.ckfields .az-col-12,
.ckfields .az-check,
.ckfields .form-row-wide,
.ckfields .notes{ grid-column:1 / -1; }

/* WooCommerce's own width classes, for anything the theme did not relabel */
.ckfields .form-row-first,
.ckfields .form-row-last{ grid-column:span 6; }

/*
 * Phone row: dial code, then the number.
 *
 * The dial field has no label, so in a grid of label-over-input rows its select
 * floated up level with the neighbouring labels. Pushing it to the bottom of its
 * cell lines it up with the inputs instead. The two were also butted together
 * with a negative margin, which only worked while the phone field had no label
 * of its own — they read better as two plain boxes.
 */
.ckfields .az-dial{
  grid-column:span 3;
  justify-content:flex-end;
}
.ckfields .az-phone{ grid-column:span 3; }

.az-check{ margin-top:2px; }
.az-check label{ margin:0; }

/* the dial select carries no label, so nothing sits above it */
.ckfields .az-dial label{ display:none; }

/*
 * Checkbox rows. WooCommerce gives its checkboxes their own margins and floats,
 * which fought the flex gap and left the box either glued to the text or riding
 * above it.
 */
.woocommerce .ckcard .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce .ckcard label.woocommerce-form__label-for-checkbox,
.ckcard .woocommerce-form__label-for-checkbox{
  display:flex !important;
  align-items:center;
  gap:10px;
  margin:0;
  line-height:1.4;
  cursor:pointer;
}
.ckcard .woocommerce-form__label-for-checkbox input[type=checkbox]{
  margin:0 !important;
  float:none;
  flex:0 0 auto;
}
.ckcard .woocommerce-form__label-for-checkbox span{ display:inline; }

/*
 * A store selling to one country only gets a read-only country row from
 * WooCommerce — bare bold text where every neighbour is a boxed field.
 */
.ckfields .form-row strong{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#F7F8FA;
  font-size:13px;
  font-weight:500;
  color:var(--ink-2);
}

.ckcard--notes .form-row{ margin:0; }

.ckcard label{
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
}
.ckcard label .required{
  margin-left:2px;
  color:var(--brand);
  text-decoration:none;
  border:0;
}
.ckcard .optional{ color:var(--muted); font-weight:500; }

/* One border for every control. WooCommerce's own `.woocommerce form .form-row
   select` is more specific than a plain `.ckcard select`, so the selects kept
   the browser's default border while the inputs took the theme's. */
.woocommerce .ckcard .form-row input[type=text],
.woocommerce .ckcard .form-row input[type=email],
.woocommerce .ckcard .form-row input[type=tel],
.woocommerce .ckcard .form-row input[type=password],
.woocommerce .ckcard .form-row input[type=number],
.woocommerce .ckcard .form-row select,
.woocommerce .ckcard .form-row textarea,
.ckcard input[type=text],
.ckcard input[type=email],
.ckcard input[type=tel],
.ckcard input[type=password],
.ckcard input[type=number],
.ckcard select,
.ckcard textarea,
.ckcard .select2-selection--single{
  width:100%;
  height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:13px;
  line-height:normal;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* native select chevron differs per browser — draw our own so the two match */
.woocommerce .ckcard .form-row select,
.ckcard select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%233A4150' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px;
  cursor:pointer;
}
.ckcard textarea{
  height:auto;
  min-height:96px;
  padding:12px 14px;
  line-height:1.6;
  resize:vertical;
}
.ckcard input::placeholder,
.ckcard textarea::placeholder{ color:#A9AEBA; }
.ckcard input:focus,
.ckcard select:focus,
.ckcard textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}
/* ---------- validation states ---------- */

/*
 * WooCommerce paints every field it has accepted with a green border. On a form
 * this dense that reads as a warning rather than an all-clear — and it sat on
 * the postcode field at the same time as a red "not a valid postcode" message.
 * Accepted fields go back to looking like ordinary fields; only problems show.
 */
.woocommerce .ckcard .form-row.woocommerce-validated input,
.woocommerce .ckcard .form-row.woocommerce-validated select,
.woocommerce .ckcard .form-row.woocommerce-validated textarea,
.woocommerce .ckcard .form-row.woocommerce-validated .select2-selection--single{
  border-color:var(--line);
}

.woocommerce .ckcard .form-row.woocommerce-invalid input,
.woocommerce .ckcard .form-row.woocommerce-invalid select,
.woocommerce .ckcard .form-row.woocommerce-invalid textarea,
.woocommerce .ckcard .form-row.woocommerce-invalid .select2-selection--single,
.ckcard input:user-invalid,
.ckcard select:user-invalid{
  border-color:#DC2626;
  background-color:#FFF7F7;
}
.woocommerce .ckcard .form-row.woocommerce-invalid input:focus,
.woocommerce .ckcard .form-row.woocommerce-invalid select:focus,
.woocommerce .ckcard .form-row.woocommerce-invalid textarea:focus{
  border-color:#DC2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.14);
}

/* what is actually wrong, next to the field it is wrong about */
.ckerr{
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin-top:6px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
  color:#DC2626;
}
.ckerr::before{
  content:"";
  flex:0 0 13px;
  height:13px;
  margin-top:1px;
  background:#DC2626;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v8h-2V7Zm0 10h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v8h-2V7Zm0 10h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* WooCommerce's own inline message, when a server round-trip does happen */
.woocommerce .ckcard .form-row .woocommerce-error{
  margin:6px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:11.5px;
  font-weight:600;
  color:#DC2626;
}

/* Select2, which WooCommerce uses for country and state */
.ckcard .select2-container .select2-selection--single{
  display:flex;
  align-items:center;
}
.ckcard .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:inherit;
  color:var(--ink);
}
.ckcard .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:42px;
  right:8px;
}

/* "ship to a different address" toggle */
.ckcard .woocommerce-shipping-fields h3,
.ckcard .woocommerce-additional-fields h3{
  margin:6px 0 16px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
}
.ckcard #ship-to-different-address label,
.ckcard .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
}
.ckcard input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:18px; height:18px;
  margin:0;
  border:1.6px solid #CFD4DD;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.ckcard input[type=checkbox]:checked{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.4 3 3 6-6.6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:var(--brand);
}


/* ============================================================
   SHIPPING METHOD
   ============================================================ */

.ckship__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ckship__opt{ position:relative; }
.ckship__opt input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}
.ckship__opt label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:15px 17px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.ckship__opt label:hover{ border-color:#CFD4DD; }
.ckship__opt input:checked + label{
  border-color:var(--brand);
  background:var(--brand-tint);
  color:var(--ink);
}
.ckship__opt input:focus-visible + label{ outline:2px solid var(--brand); outline-offset:2px; }
.ckship__cost{ font-weight:800; color:var(--ink); white-space:nowrap; }
.ckship__none{
  margin:0;
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   PAYMENT
   ============================================================ */

/* WooCommerce wraps this in a grey rounded box of its own; the card around it
   is the theme's frame, so that one is cleared away.

   Prefixed rather than left as "#payment.woocommerce-checkout-payment": that
   ties exactly with WooCommerce's ".woocommerce-checkout #payment" and was
   only winning because the theme's stylesheet happens to load second — which
   a plugin that combines and reorders CSS is free to change. */
body.woocommerce-checkout #payment.woocommerce-checkout-payment{
  padding:0;
  border-radius:0;
  background:transparent;
}

/* One column. The mock's two-up grid worked for bare labels, but live gateways
   bring card forms and logo rows that simply do not fit half a sidebar. */
#payment .wc_payment_methods{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* the "no payment methods" notice is a bare <li> — as a grid item it was
   squeezed into one narrow column and wrapped a word per line */
#payment .wc_payment_methods > li:not(.wc_payment_method){ min-width:0; }
#payment .woocommerce-info,
#payment .woocommerce-error,
#payment .woocommerce-message{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:9px;
  background:#FCFCFD;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
}
#payment .woocommerce-info::before,
#payment .woocommerce-error::before,
#payment .woocommerce-message::before{ display:none; }
/*
 * The tile chrome lives on the <li>, not the <label>.
 *
 * With the border on the label, gateways that restyle their own label — most
 * hosted ones do — left the box hugging the text while the radio dot, which is
 * positioned against the <li>, floated outside it along with the card logos.
 * Anchoring both to the same element makes the tile immune to whatever the
 * gateway does inside it.
 */
#payment .wc_payment_method{
  position:relative;
  min-width:0;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease;
}
#payment .wc_payment_method:hover{ border-color:#CFD4DD; }
#payment .wc_payment_method:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.12);
}

#payment .wc_payment_method > input[type=radio]{
  position:absolute;
  opacity:0;
  width:0; height:0;
}

#payment .wc_payment_method > label{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  width:100%;
  min-height:52px;
  margin:0;
  padding:12px 46px 12px 42px;
  float:none;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
}

/* radio dot on the left, drawn against the tile itself */
#payment .wc_payment_method::before{
  content:'';
  position:absolute;
  left:15px; top:26px;
  width:16px; height:16px;
  margin-top:-8px;
  border:1.6px solid #CFD4DD;
  border-radius:50%;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
  pointer-events:none;
  z-index:1;
}
#payment .wc_payment_method:has(> input:checked),
#payment .wc_payment_method.is-selected{
  border-color:var(--brand);
  background:var(--brand-tint);
}
#payment .wc_payment_method:has(> input:checked)::before,
#payment .wc_payment_method.is-selected::before{
  border-color:var(--brand);
  box-shadow:inset 0 0 0 3.5px var(--brand);
}

/* gateway logos: capped, kept inside the tile, wrapping rather than escaping */
#payment .wc_payment_method > label img,
#payment .wc_payment_method > label svg{
  max-height:22px;
  max-width:100%;
  width:auto;
  margin:0;
  display:inline-block;
  vertical-align:middle;
}
#payment .wc_payment_method > label > *:not(img):not(svg){ min-width:0; }
/* whatever the gateway uses to group its icons is pushed to the right */
#payment .wc_payment_method > label .wc-payment-gateway-method-logos,
#payment .wc_payment_method > label .payment-methods--logos,
#payment .wc_payment_method > label > span:last-child:has(img){
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/*
 * The card form the gateway injects. WooCommerce gives this a grey block and a
 * little pointer arrow; inside our tile it reads better as a plain section
 * divided off by a rule.
 */
/*
 * Specificity, not order. WooCommerce styles this as
 *   .woocommerce-checkout #payment div.payment_box
 * which is one id and two classes and an element, and beats a plain
 * "#payment .payment_box" however late the theme's stylesheet loads. Its lilac
 * survived every attempt to replace it until these selectors outgrew it.
 */
body.woocommerce-checkout #payment div.payment_box{
  position:relative;
  margin:0;
  padding:16px 16px 18px;
  border-top:1px solid var(--line);
  border-radius:0;
  /* Sunk slightly, so the panel reads as belonging to the method above it
     rather than as the next thing in the list. WooCommerce's own lilac and
     its little pointer triangle both go. */
  background:#FAFBFC;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after{ display:none !important; }
body.woocommerce-checkout #payment div.payment_box p{ margin:0 0 10px; }
body.woocommerce-checkout #payment div.payment_box p:last-child{ margin:0; }

/* keep embedded card fields inside the column */
body.woocommerce-checkout #payment div.payment_box iframe,
body.woocommerce-checkout #payment div.payment_box img{ max-width:100%; }

/*
 * Card fields, laid out the way a card is read: the long number across the
 * top, then expiry and security code side by side. WooCommerce ships them as
 * three stacked full-width rows, which leaves a 3-digit code in a box wide
 * enough for a sentence.
 */
body.woocommerce-checkout #payment div.payment_box .wc-credit-card-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 12px;
  margin:14px 0 0;
  padding:0;
  border:0;
}

/*
 * ".wc-payment-form" used to be gridded alongside the rule above, and that was
 * wrong. WooCommerce's own card gateway wears both classes, so the grid found
 * its three rows either way — but Stripe and WooPayments wear only this one and
 * mount their entire form as a single iframe inside it. The iframe became one
 * grid column: 117px of a 320px box, with the card number, expiry and security
 * code squeezed into a vertical ribbon.
 *
 * So the grid now keys off .wc-credit-card-form, which is present only when
 * there really are separate rows to lay out, and anything mounting its own
 * element is left to size itself.
 */
body.woocommerce-checkout #payment div.payment_box .wc-payment-form{
  margin:14px 0 0;
  padding:0;
  border:0;
}
body.woocommerce-checkout #payment div.payment_box .wcpay-upe-form,
body.woocommerce-checkout #payment div.payment_box .wcpay-upe-element,
body.woocommerce-checkout #payment div.payment_box .StripeElement,
body.woocommerce-checkout #payment div.payment_box .__PrivateStripeElement{
  display:block;
  width:100%;
  min-width:0;
}
body.woocommerce-checkout #payment div.payment_box iframe{
  display:block;
  width:100% !important;
  min-width:0;
}
body.woocommerce-checkout #payment div.payment_box .form-row{
  display:flex;
  flex-direction:column;
  margin:0 0 12px;
  padding:0;
  grid-column:span 1;
  /*
   * WooCommerce puts "width:47%" on .form-row-first and .form-row-last, from
   * the days when these rows floated. As grid items they already have a
   * column, so the percentage was taken of that column instead of the row:
   * 47% of a 138px cell is the 65px sliver that made "Expiration date" wrap
   * onto two lines and left the CVC box too narrow to read.
   */
  width:auto;
  float:none;
  /* And "font-size:1.5em" on the three card rows, which the label and the
     required asterisk were inheriting at nearly 19px. */
  font-size:inherit;
}
body.woocommerce-checkout #payment div.payment_box .form-row-wide,
body.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number{ grid-column:1 / -1; }

body.woocommerce-checkout #payment div.payment_box label{
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
}

body.woocommerce-checkout #payment div.payment_box input[type=text],
body.woocommerce-checkout #payment div.payment_box input[type=tel],
body.woocommerce-checkout #payment div.payment_box input[type=number],
body.woocommerce-checkout #payment div.payment_box input[type=email],
body.woocommerce-checkout #payment div.payment_box select,
body.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-field,
body.woocommerce-checkout #payment div.payment_box .wc-card-element{
  width:100%;
  height:44px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:13px;
  line-height:normal;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
/* the element wrappers a gateway injects need the height as padding instead */
body.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-field,
body.woocommerce-checkout #payment div.payment_box .wc-card-element{
  height:auto;
  padding:13px;
}

body.woocommerce-checkout #payment div.payment_box input:focus,
body.woocommerce-checkout #payment div.payment_box select:focus,
body.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-field--focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}
body.woocommerce-checkout #payment div.payment_box input::placeholder{ color:#A9AEBA; }

/* the card-brand mark WooCommerce paints into the number field */
body.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number{ position:relative; }
body.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number input{
  padding-right:46px;
  background-position:right 12px center;
  background-repeat:no-repeat;
  background-size:28px 18px;
}

body.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods{
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
body.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods li{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
  font-size:12.5px;
}

@media (max-width:560px){
  /* a security code beside an expiry is already tight; below this they stack */
  body.woocommerce-checkout #payment div.payment_box .wc-credit-card-form{ grid-template-columns:minmax(0, 1fr); }
}

#payment .place-order{
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
#payment .place-order noscript{
  display:block;
  margin-bottom:14px;
  font-size:12px;
  color:var(--muted);
}
#payment .woocommerce-terms-and-conditions-wrapper{ margin-bottom:16px; }
#payment .woocommerce-privacy-policy-text p{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
}

/* Place Order — out-specify WooCommerce's own .button.alt */
.woocommerce #payment #place_order,
#payment button#place_order.button.alt,
#payment #place_order{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:54px;
  margin:0;
  padding:0 20px;
  border:0;
  border-radius:9px;
  background:var(--brand);
  background-image:none;
  color:#fff;
  font-size:14.5px;
  font-weight:800;
  text-shadow:none;
  box-shadow:0 12px 24px -14px rgba(224,30,38,.85);
  transition:background .18s ease, transform .18s ease;
}
.woocommerce #payment #place_order:hover,
#payment #place_order:hover{
  background:var(--brand-dark);
  color:#fff;
  transform:translateY(-1px);
}


/* ============================================================
   SUMMARY LINE ITEMS
   ============================================================ */

.summary__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.summary__head .summary__title{ margin:0; }
.summary__edit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
}
.summary__edit svg{ width:14px; height:14px; }
.summary__edit:hover{ opacity:.75; }

.cklines{
  list-style:none;
  margin:0 0 18px;
  padding:0 0 6px;
  border-bottom:1px solid var(--line);
}
.ckline{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:0 0 14px;
}
.ckline__thumb{
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F5F7;
}
.ckline__thumb img{ width:100%; height:auto; display:block; }
.ckline__info h3{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.ckline__info p{
  margin:3px 0 0;
  font-size:11px;
  color:var(--muted);
}
.ckline__money{ text-align:right; white-space:nowrap; }
.ckline__money strong{
  display:block;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink);
}
.ckline__money small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
}

/* the promises close the page, full width under both columns */
.ckpage > .trust{
  margin-top:26px;
  border:0;
  border-radius:0;
  background:none;
}
.ckpage > .trust li{ border-left:0; padding:18px 14px; }
.ckpage > .trust{ grid-template-columns:repeat(4, 1fr); }

/* WooCommerce notices inside the checkout column */
.ckpage .woocommerce-NoticeGroup{ margin-bottom:18px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  .ckpage__grid{ grid-template-columns:minmax(0,1fr) 340px; }
}

@media (max-width:980px){
  .ckpage__grid{ grid-template-columns:1fr; }
  /* One column, so the pinned column two above would invent a second one. */
  .ckpage__main,
  .ckpage__side{ grid-column:1 / -1; }
  /*
   * No order swap here. The sidebar led on mobile back when it held only the
   * order summary; it now carries the payment methods and Place Order, so
   * hoisting it put the button above the address form.
   */
  .ckpage__side{ position:static; }
  .ckreview__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CHECKOUT REASSURANCE  —  the facts about the order, beside the form
   ============================================================ */

/* One panel, two zones: the quick promises, then the detail worth reading
   twice. Loose blocks floating under the summary read as leftovers. */
.ckassure{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.ckassure__list{
  list-style:none;
  margin:0;
  padding:16px 18px;
  display:grid;
  gap:12px;
  background:#FBFBFC;
  border-bottom:1px solid var(--line);
}
.ckassure__list li{
  display:flex;
  align-items:center;
  gap:11px;
}
.ckassure__list p{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
}
.ckassure__list strong{
  font-weight:700;
  color:var(--ink);
}

/* the theme's icon tile, at the size a sidebar can spare */
.ckassure__ico,
.ckassure__mark{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--brand-tint);
  color:var(--brand);
}
.ckassure__ico svg,
.ckassure__mark svg{ width:17px; height:17px; }

/* green for what is already settled, grey for plain fact */
.ckassure__ico--go,
.ckassure__mark--go{ background:#E8F6EE; color:#16A34A; }
.ckassure__mark{ background:#F2F3F6; color:var(--ink-2); }
.ckassure__mark--go{ background:#E8F6EE; color:#16A34A; }
.ckassure__mark--call{ background:var(--brand-tint); color:var(--brand); }

.ckassure__card{ padding:0 18px; }
.ckassure__row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.ckassure__row:first-child{ border-top:0; }
.ckassure__row h3{
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
}
.ckassure__row p{
  margin:5px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
}
.ckassure__row a{
  font-weight:700;
  color:var(--brand);
  white-space:nowrap;
}
.ckassure__row a:hover{ text-decoration:underline; text-underline-offset:2px; }


@media (max-width:720px){
  .ckcard{ padding:18px 16px 20px; }
  .ckfields .az-col-4,
  .ckfields .az-col-6,
  .ckfields .az-dial,
  .ckfields .az-phone,
  .ckfields .form-row-first,
  .ckfields .form-row-last{ grid-column:1 / -1; }
  .ckfields .az-dial{ justify-content:flex-start; }

  .ckpage > .trust{ grid-template-columns:repeat(2, 1fr); }

}

/* ============================================================
   WOOPAY'S CONTACT SECTION
   ============================================================ */

/*
 * WooPay prints its own contact block above this form and styles it like plain
 * WooCommerce, so it sat outside the card language of the rest of the page.
 * Rather than fight it, it is dressed as the card it should have been — and
 * the news opt-in, which the billing template still owns, is joined onto the
 * bottom of it so the two read as one panel instead of two stacked headings.
 */
#customer_details #contact_details{
  padding:22px 24px 4px;
  margin-bottom:0;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:#fff;
}
#customer_details #contact_details > h3{
  margin:0 0 18px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
}
#customer_details .ckcard--optin{
  padding-top:0;
  margin-top:0;
  border-top:0;
  border-radius:0 0 12px 12px;
}
#customer_details .ckcard--optin .form-row{ margin-bottom:0; }


/*
 * WooPayments builds the Stripe card form's appearance by reading the computed
 * styles off the page itself, not from anything it ships. On a classic checkout
 * it samples:
 *
 *   input   #billing_first_name          (falls back to the first text input)
 *   label   .woocommerce-checkout .form-row label
 *   probe   appended into .woocommerce-billing-fields__field-wrapper
 *
 * That wrapper lives inside WooPay's own #contact_details block, which sits
 * outside .ckcard and so never inherited any of the theme's field styling.
 * Stripe was faithfully copying the browser default — which is why the card
 * number, expiry and security code looked nothing like the rest of the form.
 *
 * Styling this block therefore does two jobs: WooPay's email field stops
 * looking foreign, and the card fields inside the iframe inherit the theme.
 */
#customer_details #contact_details .form-row{
  display:flex;
  flex-direction:column;
  margin:0 0 18px;
  padding:0;
}
#customer_details #contact_details label{
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
}
#customer_details #contact_details label .required{
  margin-left:2px;
  color:var(--brand);
  text-decoration:none;
  border:0;
}
.woocommerce #customer_details #contact_details .form-row input[type=email],
.woocommerce #customer_details #contact_details .form-row input[type=text],
#customer_details #contact_details input[type=email],
#customer_details #contact_details input[type=text]{
  width:100%;
  height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:13px;
  line-height:normal;
  color:var(--ink);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#customer_details #contact_details input::placeholder{ color:#A9AEBA; }
#customer_details #contact_details input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}

/* The gateway header: brand mark, name, then the accepted-card logos. */
body.woocommerce-checkout #payment .wc_payment_method > label img,
body.woocommerce-checkout #payment .payment-methods--logos img{
  height:22px;
  width:auto;
  border-radius:3px;
}
body.woocommerce-checkout #payment .payment-methods--logos{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
}