/*
  TWP V2 CHECKOUT — the WooCommerce purchase flow in the V2 site's material: the cart, the checkout, pay-for-order
  (order-pay) and order received. Presentation only. One sheet for the four pages: the shared parts (ground, chrome,
  frame, header, notices, fields, buttons, payment) first, then each page's own section (CART · ORDER PAY · ORDER
  RECEIVED), keyed on the body's twp-surface-* class.

  THE MARKUP IT EXPECTS: WooCommerce's classic shortcode pages, as printed on Pat's site — plus the pieces Avada
  prints in their place, as its compiled CSS on shop shows (2025-12 capture): its own code boxes (.promo-code-heading /
  .coupon-contents on the checkout, .shipping-coupon / .avada-coupon-fields on the cart), .woocommerce-content-box
  wrappers, .avada-checkout-no-shipping, .cart-totals-buttons, .avada-order-details / .avada-customer-details, and
  WooCommerce's block-style notices (.wc-block-components-notice-banner — what Pat's site prints) next to the classic ones.

  THE CONCEPT: an ORDER SHEET, not a shopping cart. The V2 pages' grammar, not their layouts: the home page's
  ground (its Grainient stage held on the pricing state + the site's grain), ivory type by rank, Instrument Serif
  for the voice, Manrope for every word read, IBM Plex Mono for indices and labels only, 1 px white hairlines,
  the frame's two edges with the house's cross ticks, cyan for STATE only (a field being written in, the chosen
  payment method, an applied code), soft-warm errors that always carry a square mark and words, and the Store's
  ivory purchase pill as the one final action.

  ONE GRID (≥ 1024): details | the sheet. The sheet column (order · payment · place order) is ruled off by a
  hairline; the promo code is an issued-code strip directly above it, aligned to the same two columns. The code
  form stays where WooCommerce prints it (a separate <form> before the checkout form — never nested, never moved),
  so the DOM, the tab order and the reading order are the same thing.

  WHAT IT NEVER DOES: hide a WooCommerce notice or error, change a field's name/id/order, set `display` on
  anything WooCommerce or a gateway toggles (payment boxes, #place_order, PayPal's buttons), reach into an
  iframe, or paint a translucent wash on the containers Stripe samples for its card fields
  (.payment_box, #payment, #order_review, form.checkout, body — a light wash flips Stripe to its light theme).

  SPECIFICITY: Avada dequeues WooCommerce's CSS for its own compiled sheet, and the site's Additional CSS forces
  fonts with !important (h1 → Poppins; p, h2–h4, a, button → Inter). Every rule is anchored on
  `body.twp-v2-checkout #content .post-content .woocommerce` — WooCommerce's own page wrapper, wherever the page's
  builder boxes put it (the checkout prints it straight into .post-content; Pat's cart page holds it inside an Avada
  text element) — an id beats Avada's class selectors. !important is used for fonts, for the theme's chrome being
  hidden, for the grounds made transparent, against Avada's and WooCommerce's own !important rules, and for BlockUI's
  inline white overlay — and nowhere a script sets an inline display.

  SCALE: px steps per breakpoint (the V2 rule): phones · 640 · 1024 · 1440 · 1920 · 2400 (the frame:
  1320 · 1480 · 1640 · 1880, the Store and Contact pages' column).
*/

/* ── Faces (self-hosted, OFL — see assets/fonts/LICENSES.md) ───────────────────────────────── */

@font-face {
  font-family: "TWP Manrope";
  src: url("fonts/manrope-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWP Instrument Serif";
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWP Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWP Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens (the V2 Store / Contact values) ──────────────────────────────────────────────── */

body.twp-v2-checkout {
  --co-ivory: #eef1f7;
  --co-ink-1: rgb(238 241 247 / 0.9);
  --co-ink-2: rgb(238 241 247 / 0.76);
  --co-ink-3: rgb(238 241 247 / 0.7); /* 0.6 measured 3.8–4.0:1 on the ground's lightest band; 0.7 clears 4.5:1 */
  --co-hair: rgb(255 255 255 / 0.075);
  --co-rule: rgb(255 255 255 / 0.12);
  --co-rule-strong: rgb(255 255 255 / 0.16);
  --co-frame: rgb(255 255 255 / 0.085);
  --co-tick: rgb(238 241 247 / 0.5);
  --co-field: rgb(255 255 255 / 0.03);
  --co-field-focus: rgb(39 170 225 / 0.06);
  --co-field-line: rgb(255 255 255 / 0.26);
  --co-field-hover: rgb(255 255 255 / 0.42);
  --co-cyan: #27aae1;
  --co-gold: #fbcf38; /* the Store's code gold (--st-gold, twp-v2 3a54c8f): the applied-code mark only */
  --co-focus: rgb(39 170 225 / 0.75);
  --co-lift: rgb(255 255 255 / 0.024);
  --co-deep: #0b1120;
  --co-panel: #0f1a31;
  --co-error: #f4b4a8;
  --co-error-rule: rgb(244 180 168 / 0.72);
  --co-error-ground: rgb(244 180 168 / 0.06);
  --co-sans: "TWP Manrope", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --co-serif: "TWP Instrument Serif", "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --co-mono: "TWP Plex Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --co-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* phones first */
  --co-gutter: 16px;
  --co-max: 100%;
  --co-pad: 0px;
  --co-sheet: 100%;
  --co-half: 0px;
  --co-top-h: 64px;
  --co-logo-h: 30px;
  --co-fs-h1: 40px;
  --co-fs-lead: 16px;
  --co-fs-label: 11.5px;
  --co-fs-title: 28px;
  --co-fs-flabel: 14.5px;
  --co-fs-field: 17px;
  --co-field-h: 50px;
  --co-fs-body: 15px;
  --co-fs-small: 13.5px;
  --co-fs-product: 26px;
  --co-fs-amount: 17px;
  --co-fs-total: 28px;
  --co-fs-method: 16px;
  --co-cta-h: 56px;
  --co-fs-cta: 16px;
  --co-cta-go: 40px;
  --co-fs-code: 18px;
  --co-space: 40px;
  --co-gap-fields: 20px;
}
@media (min-width: 640px) {
  body.twp-v2-checkout {
    --co-gutter: 24px;
    --co-pad: 32px;
    --co-top-h: 72px;
    --co-logo-h: 34px;
    --co-fs-h1: 52px;
    --co-fs-lead: 17px;
    --co-fs-title: 30px;
    --co-fs-flabel: 15px;
    --co-field-h: 52px;
    --co-fs-product: 28px;
    --co-fs-total: 30px;
    --co-cta-h: 58px;
    --co-fs-cta: 16.5px;
    --co-space: 48px;
    --co-gap-fields: 22px;
  }
}
@media (min-width: 1024px) {
  body.twp-v2-checkout {
    --co-pad: 40px;
    --co-sheet: 420px;
    --co-half: 32px;
    --co-top-h: 76px;
    --co-logo-h: 36px;
    --co-fs-h1: 60px;
    --co-fs-label: 12px;
    --co-fs-title: 32px;
    --co-space: 56px;
  }
}
@media (min-width: 1280px) {
  body.twp-v2-checkout {
    --co-sheet: 460px;
    --co-half: 40px;
  }
}
@media (min-width: 1440px) {
  body.twp-v2-checkout {
    --co-max: 1320px;
    --co-sheet: 480px;
    --co-half: 48px;
    --co-top-h: 80px;
    --co-logo-h: 38px;
    --co-fs-h1: 68px;
    --co-fs-lead: 18px;
    --co-fs-title: 34px;
    --co-fs-flabel: 15.5px;
    --co-fs-field: 18px;
    --co-field-h: 54px;
    --co-fs-body: 15.5px;
    --co-fs-product: 30px;
    --co-fs-amount: 18px;
    --co-fs-total: 32px;
    --co-fs-method: 16.5px;
    --co-cta-h: 60px;
    --co-fs-cta: 17px;
    --co-space: 64px;
    --co-gap-fields: 24px;
  }
}
@media (min-width: 1680px) {
  body.twp-v2-checkout {
    --co-max: 1480px;
  }
}
@media (min-width: 1920px) {
  body.twp-v2-checkout {
    --co-max: 1640px;
    --co-sheet: 540px;
    --co-half: 64px;
    --co-top-h: 84px;
    --co-logo-h: 40px;
    --co-fs-h1: 76px;
    --co-fs-lead: 19px;
    --co-fs-label: 12.5px;
    --co-fs-title: 38px;
    --co-fs-flabel: 16px;
    --co-fs-field: 18.5px;
    --co-field-h: 56px;
    --co-fs-body: 16px;
    --co-fs-small: 14px;
    --co-fs-product: 34px;
    --co-fs-amount: 19px;
    --co-fs-total: 36px;
    --co-fs-method: 17px;
    --co-cta-h: 64px;
    --co-fs-cta: 18px;
    --co-cta-go: 44px;
    --co-fs-code: 19px;
    --co-space: 72px;
    --co-gap-fields: 26px;
  }
}
@media (min-width: 2400px) {
  body.twp-v2-checkout {
    --co-max: 1880px;
    --co-sheet: 600px;
    --co-half: 80px;
    --co-top-h: 92px;
    --co-logo-h: 44px;
    --co-fs-h1: 84px;
    --co-fs-lead: 20px;
    --co-fs-label: 13px;
    --co-fs-title: 42px;
    --co-fs-flabel: 17px;
    --co-fs-field: 19.5px;
    --co-field-h: 60px;
    --co-fs-body: 17px;
    --co-fs-small: 15px;
    --co-fs-product: 38px;
    --co-fs-amount: 20px;
    --co-fs-total: 40px;
    --co-fs-method: 18px;
    --co-cta-h: 68px;
    --co-fs-cta: 19px;
    --co-cta-go: 48px;
    --co-fs-code: 20px;
    --co-space: 80px;
    --co-gap-fields: 28px;
  }
}

/* ── The ground: the stage (fixed, under everything), the grain (over everything, like the site) ─ */

/* Opaque navy on <body>: its background paints the canvas (so the stage at z-index −1 shows above it), and it is
   the colour Stripe samples for its card fields (dark → Stripe's "night" theme). The root's own background is
   cleared so the body's reaches the canvas. */
html:has(> body.twp-v2-checkout) {
  background: none !important;
}
body.twp-v2-checkout {
  background: #0b1120 !important;
  color: var(--co-ink-1);
  overflow-x: clip;
}
body.twp-v2-checkout .twp-co-stage {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}
body.twp-v2-checkout .twp-co-stage > div {
  position: absolute;
  inset: 0;
}
/* The stage's CSS stage (stage-store.ts cssStage) on the navy "pricing" keyframe: the shader's own pattern
   (a greyscale frame of it) tinted by its three tones — under the still, and the whole ground if a still is missing. */
body.twp-v2-checkout .twp-co-stage-css {
  background-color: #000;
  background-image:
    linear-gradient(105deg, #133e5a 0%, #133e5a 45%, #0d1b2e 78%, #0a0f1f 100%),
    url("img/stage-texture.jpg");
  background-blend-mode: multiply, normal;
  background-size: cover, cover;
  background-position: center, left center;
}
/* The still of the shader's own frame for this keyframe — portrait on phones, wide from 768 (page-stage.tsx). */
body.twp-v2-checkout .twp-co-stage-still {
  background: url("img/stage-pricing.jpg") center / cover no-repeat;
}
@media (min-width: 768px) {
  body.twp-v2-checkout .twp-co-stage-still {
    background-image: url("img/stage-pricing-wide.jpg");
  }
}
/* The site's grain (globals.css body::after): 3 %, the same SVG tile at its native 256 px. */
body.twp-v2-checkout .twp-co-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
@media print, (forced-colors: active) {
  body.twp-v2-checkout .twp-co-stage,
  body.twp-v2-checkout .twp-co-grain {
    display: none;
  }
}
body.twp-v2-checkout ::selection {
  background-color: rgb(39 170 225 / 0.3);
  color: #fff;
}

/* ── The theme's chrome steps aside: no marketing header, title bar, sliding bar, popups or footer ── */

body.twp-v2-checkout :is(
  .fusion-tb-header, .fusion-header-wrapper, .fusion-secondary-header, #sliders-container,
  .avada-page-titlebar-wrapper, .fusion-page-title-bar, .fusion-tb-page-title-bar,
  .fusion-tb-footer, .fusion-footer, .fusion-sliding-bar-wrapper, #slidingbar-area, .fusion-sliding-bar-area,
  .to-top-container, #toTop, #splite_popup_box, #splite_curtain, .splite_sideEnquiry,
  .rich-snippet-hidden, .fusion-page-load-link
) {
  display: none !important;
}
body.twp-v2-checkout :is(#boxed-wrapper, #wrapper, #main, #main > .fusion-row, #content, #content > .post, #content .post-content) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.twp-v2-checkout #main {
  padding: 0 !important;
  min-height: 0 !important;
}
body.twp-v2-checkout #main > .fusion-row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.twp-v2-checkout #content {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.twp-v2-checkout #content > .post,
body.twp-v2-checkout #content .post-content {
  margin: 0 !important;
  padding: 0 !important;
}
/* The page's own builder content around WooCommerce steps aside the same way (Pat's cart page: a promo alert above
   the cart, a testimonials carousel below it): these pages show WooCommerce's purchase content only. */
body.twp-v2-checkout #content .post-content > :not(.woocommerce):not(:has(.woocommerce)) {
  display: none !important;
}
/* …and the builder boxes that hold it drop their own paddings, widths and grounds (the frame below sets those). */
body.twp-v2-checkout #content .post-content :is(.fusion-fullwidth, .fusion-builder-row, .fusion-layout-column, .fusion-column-wrapper, .fusion-text):has(.woocommerce) {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ── The page: the frame column, its two edges (from 640), every word in the V2 faces ─────── */

body.twp-v2-checkout #content .post-content .woocommerce {
  position: relative;
  box-sizing: border-box;
  width: min(100% - 2 * var(--co-gutter), var(--co-max));
  margin: 0 auto;
  padding: 0 var(--co-pad) var(--co-space);
  color: var(--co-ink-1);
  font-family: var(--co-sans);
  font-size: var(--co-fs-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 640px) {
  body.twp-v2-checkout #content .post-content .woocommerce {
    background:
      linear-gradient(var(--co-frame), var(--co-frame)) left top / 1px 100% no-repeat,
      linear-gradient(var(--co-frame), var(--co-frame)) right top / 1px 100% no-repeat;
  }
}
/* A wrapper inside the wrapper (a plugin's own .woocommerce box) is not a second frame. */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
}
body.twp-v2-checkout #content .post-content .woocommerce *,
body.twp-v2-checkout #content .post-content .woocommerce *::before,
body.twp-v2-checkout #content .post-content .woocommerce *::after {
  box-sizing: border-box;
}
/* Avada's boxes (its cart table and order boxes, its code form) lose their frames — the sheet's rules replace them. */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-content-box {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* The site's Additional CSS forces Poppins/Inter with !important on h1–h4, p, a, button. Zero-specificity
   :where() so every face below still wins where it names its own. Icon elements keep their font. */
body.twp-v2-checkout #content .post-content .woocommerce :where(h1, h2, h3, h4, h5, h6, p, a, button, label, span, strong, em, b, abbr, small, li, dt, dd, td, th, input, select, textarea, legend, div, address):where(:not(i):not([class*="icon"])) {
  font-family: var(--co-sans) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce :where(p) {
  margin: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce a {
  color: var(--co-ivory);
  text-decoration: underline;
  text-decoration-color: rgb(238 241 247 / 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms var(--co-ease), color 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce a:hover {
  text-decoration-color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--co-focus);
  outline-offset: 3px;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.clear, .clearboth) {
  display: none;
}
body.twp-v2-checkout #content .post-content .woocommerce address {
  font-style: normal;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.screen-reader-text) {
  color: var(--co-ivory);
}

/* ── The header: the logo, the way back to the store. A full-width rule with the house's crosses. ── */

body.twp-v2-checkout .twp-co-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--co-top-h);
  margin: 0 calc(-1 * var(--co-pad));
  padding: 0 var(--co-pad);
}
body.twp-v2-checkout .twp-co-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  margin-left: -50vw;
  background: var(--co-rule);
  pointer-events: none;
}
@media (min-width: 640px) {
  body.twp-v2-checkout .twp-co-top::before {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -6px;
    left: -6px;
    z-index: 1;
    height: 11px;
    pointer-events: none;
    background:
      linear-gradient(var(--co-tick), var(--co-tick)) left 6px top 0 / 1px 11px no-repeat,
      linear-gradient(var(--co-tick), var(--co-tick)) left 1px top 5px / 11px 1px no-repeat,
      linear-gradient(var(--co-tick), var(--co-tick)) right 6px top 0 / 1px 11px no-repeat,
      linear-gradient(var(--co-tick), var(--co-tick)) right 1px top 5px / 11px 1px no-repeat;
  }
}
body.twp-v2-checkout .twp-co-brand {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  text-decoration: none !important;
}
body.twp-v2-checkout .twp-co-brand img {
  display: block;
  width: auto !important;
  height: var(--co-logo-h) !important;
  max-width: none;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--co-fs-small);
  font-weight: 500;
  color: var(--co-ink-2);
  text-decoration: none;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-back:hover {
  color: var(--co-ivory);
}
body.twp-v2-checkout .twp-co-back svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 200ms var(--co-ease);
}
body.twp-v2-checkout .twp-co-back:hover svg {
  transform: translateX(-3px);
}

/* ── The intro: a mono label, the serif headline, one factual line ───────────────────────── */

body.twp-v2-checkout .twp-co-intro {
  padding: calc(var(--co-space) * 0.72) 0 calc(var(--co-space) * 0.6);
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-eyebrow,
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-mono {
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce h1.twp-co-title {
  margin-top: 14px;
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-h1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--co-ivory);
  text-wrap: balance;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-lead {
  max-width: 34em;
  margin-top: 16px;
  font-size: var(--co-fs-lead);
  line-height: 1.5;
  color: var(--co-ink-2);
  text-wrap: pretty;
}

/* ── The promo code: an issued-code strip on the same two columns as the sheet below ─────────── */

/* WooCommerce prints a toggle ("Have a coupon?") and keeps the form folded; the code is the page's own offer, so
   the form simply stays open (its handler, its AJAX, its notices are WooCommerce's). The toggle is only hidden. */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-form-coupon-toggle {
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon {
  position: relative;
  display: grid !important;
  height: auto !important;
  overflow: visible !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "field" "error";
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 calc(var(--co-space) * 0.75) !important;
  padding: 18px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--co-rule) !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1 !important;
}
/* the strip's torn-off top edge (the Store's code strip) */
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgb(238 241 247 / 0.3) 0 2px, transparent 2px 5px);
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon .form-row-first {
  display: contents;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon .form-row-first > label[for="coupon_code"] {
  grid-area: label;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  /* the billing labels' voice — Stripe samples the first checkout label for its card fields' labels */
  font-size: var(--co-fs-flabel);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon .form-row-last {
  grid-area: field;
  justify-self: end;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon #coupon_code {
  grid-area: field;
  width: 100%;
  min-width: 0;
  height: var(--co-field-h);
  padding: 0 calc(7.2em + 16px) 0 14px;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-code);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon #coupon_code::placeholder {
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-flabel);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon :is(button, input)[name="apply_coupon"] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--co-field-h) - 12px);
  min-width: 6.6em;
  margin: 0 6px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgb(238 241 247 / 0.32) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--co-fs-small) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--co-ivory) !important;
  cursor: pointer;
  transition: border-color 160ms var(--co-ease), background-color 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon :is(button, input)[name="apply_coupon"]:hover {
  border-color: var(--co-ivory) !important;
  background: rgb(238 241 247 / 0.06) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon.processing :is(button, input)[name="apply_coupon"] {
  opacity: 0.6;
  cursor: progress;
}
/* Woo's own inline coupon error (role="alert", under the field) */
body.twp-v2-checkout #content .post-content .woocommerce .coupon-error-notice {
  grid-area: error;
  position: relative;
  display: block;
  padding-left: 17px;
  font-size: var(--co-fs-small);
  line-height: 1.45;
  color: var(--co-error);
}
body.twp-v2-checkout #content .post-content .woocommerce .coupon-error-notice::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--co-error);
}
/* Avada prints its own code form in WooCommerce's place (same class, same field id and name, same handler): its
   heading is the label, its .coupon-contents the field with the button drawn inside it. The error WooCommerce adds
   under the field lands inside .coupon-contents here, so it takes that box's second row. */
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon > .promo-code-heading {
  grid-area: label;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-flabel);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left !important;
  text-transform: none;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon > .coupon-contents {
  grid-area: field;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  row-gap: 10px;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon > .coupon-contents #coupon_code {
  grid-area: 1 / 1;
  float: none;
  margin: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon > .coupon-contents > .form-row-last {
  grid-area: 1 / 1;
  z-index: 1;
}
body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon > .coupon-contents .coupon-error-notice {
  grid-area: 2 / 1;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(form.checkout_coupon, .coupon, .avada-coupon-fields) input[type="submit"][name="apply_coupon"] {
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 1024px) {
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout_coupon {
    grid-template-columns: minmax(0, 1fr) calc(var(--co-sheet) - var(--co-half));
    grid-template-areas: "label field" ". error";
    column-gap: calc(var(--co-half) * 2);
    padding: 22px 0 24px !important;
  }
}

/* ── Notices: WooCommerce's, all of them, made intentional — never hidden ────────────────────── */

body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
  position: relative;
  display: block;
  width: auto;
  margin: 0 0 20px !important;
  padding: 16px 18px 16px 20px !important;
  border: 1px solid var(--co-rule) !important;
  border-left-width: 2px !important;
  border-radius: 0 !important;
  background: rgb(255 255 255 / 0.03) !important;
  box-shadow: none !important;
  list-style: none !important;
  font-size: var(--co-fs-body);
  line-height: 1.5;
  color: var(--co-ivory) !important;
  text-align: left;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::after {
  content: none !important;
  display: none !important;
}
/* errors: the warm square mark + the words, per line (Woo links each to its field) */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-error {
  border-color: rgb(244 180 168 / 0.32) !important;
  border-left-color: var(--co-error-rule) !important;
  background: var(--co-error-ground) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-error > li {
  position: relative;
  margin: 0 !important;
  padding: 3px 0 3px 19px !important;
  list-style: none !important;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-error > li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: calc(3px + 0.62em);
  left: 0;
  width: 7px;
  height: 7px;
  margin: 0;
  background: var(--co-error);
  font-family: inherit;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-error > li a {
  color: inherit;
  text-decoration-color: rgb(244 180 168 / 0.6);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-error strong {
  font-weight: 600;
}
/* success: STATE — the cyan rule and a filled cyan square */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-message {
  padding-left: 40px !important;
  border-color: rgb(39 170 225 / 0.3) !important;
  border-left-color: var(--co-cyan) !important;
  background: rgb(39 170 225 / 0.06) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-message::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: calc(16px + 0.58em);
  left: 20px;
  width: 7px;
  height: 7px;
  background: var(--co-cyan);
}
/* information: the quiet ivory edge */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-info {
  border-left-color: rgb(238 241 247 / 0.45) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-message, .woocommerce-info) .button {
  float: none !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--co-ivory) !important;
  text-decoration: underline;
}
/* WooCommerce's block-style notices (Pat's site prints these: role="alert"/"status", a decorative SVG, the words in
   __content). The same three states as above — the square mark and the edge carry the state, never colour alone. */
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner {
  position: relative;
  display: block !important;
  width: auto;
  margin: 0 0 20px !important;
  padding: 16px 18px 16px 40px !important;
  border: 1px solid var(--co-rule) !important;
  border-left: 2px solid rgb(238 241 247 / 0.45) !important;
  border-radius: 0 !important;
  background: rgb(255 255 255 / 0.03) !important;
  box-shadow: none !important;
  font-size: var(--co-fs-body) !important;
  font-weight: 400;
  line-height: 1.5 !important;
  color: var(--co-ivory) !important;
  text-align: left;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner > svg {
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: calc(16px + 0.5em);
  left: 20px;
  width: 7px;
  height: 7px;
  margin: 0;
  background: rgb(238 241 247 / 0.6);
  font-family: inherit !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner.is-error {
  border-color: rgb(244 180 168 / 0.32) !important;
  border-left-color: var(--co-error-rule) !important;
  background: var(--co-error-ground) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner.is-error::before {
  background: var(--co-error);
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner.is-success {
  border-color: rgb(39 170 225 / 0.3) !important;
  border-left-color: var(--co-cyan) !important;
  background: rgb(39 170 225 / 0.06) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner.is-success::before {
  background: var(--co-cyan);
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner__content {
  display: block !important;
  flex: none;
  padding: 0 !important;
  font-size: inherit;
  color: inherit;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner__summary {
  display: block !important;
  margin: 0 0 4px !important;
  font-weight: 600 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner__content ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner__content li {
  margin: 0 !important;
  padding: 2px 0 !important;
  list-style: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-block-components-notice-banner a {
  color: inherit;
}
/* The links WooCommerce puts in a notice ("View cart", "Undo"): read as links, not as buttons. */
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) :is(.button, .wc-forward, .restore-item) {
  display: inline !important;
  float: none !important;
  min-height: 0 !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-decoration-color: rgb(238 241 247 / 0.45) !important;
  text-underline-offset: 3px;
  color: var(--co-ivory) !important;
  opacity: 1 !important;
}
/* WooCommerce's notice lines (order received / failed, the account's "please log in"): a state line, not a box. */
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-notice {
  position: relative;
  margin: 0 0 20px !important;
  padding: 0 0 0 19px !important;
  border: 0 !important;
  background: none !important;
  font-size: var(--co-fs-lead);
  line-height: 1.5;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-notice::before {
  content: "" !important;
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  background: rgb(238 241 247 / 0.6);
}
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-notice--success::before {
  background: var(--co-cyan);
}
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-notice--error::before {
  background: var(--co-error);
}
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-thankyou-order-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce p.woocommerce-thankyou-order-failed-actions::before {
  content: none !important;
}
/* The code's confirmations sit over the sheet's column on the checkout (WooCommerce inserts them just before the
   code strip / form). */
@media (min-width: 1024px) {
  body.twp-v2-checkout.twp-surface-checkout #content .post-content .woocommerce > :is(.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-info) {
    margin-left: calc(100% - var(--co-sheet) + var(--co-half)) !important;
  }
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-NoticeGroup {
  margin: 0 0 8px;
}

/* ── The sheet: ONE grid (details | order · payment · place order) ──────────────────────────── */

body.twp-v2-checkout #content .post-content .woocommerce form.checkout {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #customer_details {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce #customer_details::before,
body.twp-v2-checkout #content .post-content .woocommerce #customer_details::after {
  content: none;
}
body.twp-v2-checkout #content .post-content .woocommerce #customer_details :is(.col-1, .col-2) {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #order_review_heading,
body.twp-v2-checkout #content .post-content .woocommerce #order_review {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #order_review_heading {
  margin-top: var(--co-space);
}
/* Avada wraps the details in .avada-checkout-no-shipping when there is nothing to ship: the wrapper adds no box, so
   the details still take their place in the grid below. */
body.twp-v2-checkout #content .post-content .woocommerce form.checkout .avada-checkout-no-shipping {
  display: contents;
}
@media (min-width: 1024px) {
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--co-sheet);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "notice notice"
      "express ."
      "or ."
      "details head"
      "details review";
    align-items: start;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout > * {
    grid-column: 1 / -1;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout > .woocommerce-NoticeGroup {
    grid-area: notice;
  }
  /* Stripe's express checkout (Apple Pay · Google Pay · Link) and its "— OR —" print inside the form, before the details:
     they head the details column, the fast way past it. Rows they don't fill (no wallet, Stripe's script hides them) are
     empty and take no room. */
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout > #wc-stripe-express-checkout-element {
    grid-area: express;
    max-width: 880px;
    margin-right: var(--co-half);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout > #wc-stripe-express-checkout-button-separator {
    grid-area: or;
    max-width: 880px;
    margin-right: var(--co-half) !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout #customer_details {
    grid-area: details;
    align-self: stretch;
    padding-right: var(--co-half);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout #order_review_heading {
    grid-area: head;
    align-self: stretch;
    margin-top: 0;
    padding-left: var(--co-half);
    border-left: 1px solid var(--co-rule);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form.checkout #order_review {
    grid-area: review;
    align-self: stretch;
    padding-left: var(--co-half);
    border-left: 1px solid var(--co-rule);
  }
  /* the details' fields keep a reading measure; the column's remainder is air */
  body.twp-v2-checkout #content .post-content .woocommerce #customer_details > * {
    max-width: 880px;
  }
}

/* Section titles: the house's mono index + the serif over a full-width rule (the Store's layer titles).
   :where() keeps this list at the anchor's specificity, so the margins set per title below still apply. */
body.twp-v2-checkout #content .post-content .woocommerce :where(.woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, h3#order_review_heading, h3.twp-co-payment-title, .woocommerce-account-fields > h3) {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 calc(var(--co-gap-fields) + 2px);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--co-rule);
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-title);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-billing-fields > h3, h3#order_review_heading, h3.twp-co-payment-title)::before {
  flex: none;
  min-width: 2ch;
  font-family: var(--co-mono);
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--co-ink-3);
  transform: translateY(-0.2em);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-billing-fields > h3::before {
  content: "01";
}
body.twp-v2-checkout #content .post-content .woocommerce h3#order_review_heading::before {
  content: "02";
}
body.twp-v2-checkout #content .post-content .woocommerce h3.twp-co-payment-title::before {
  content: "03";
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-additional-fields, .woocommerce-shipping-fields, .woocommerce-account-fields) > h3 {
  margin-top: var(--co-space);
  font-size: calc(var(--co-fs-title) * 0.82);
}
body.twp-v2-checkout #content .post-content .woocommerce h3.twp-co-payment-title {
  margin-top: calc(var(--co-space) * 0.9);
}

/* ── Fields: the Contact page's ruled document — label, then the words written on a drawn line ── */

body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper, .woocommerce-account-fields .create-account) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--co-gap-fields) 18px;
}
@media (min-width: 480px) {
  body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row:not(.form-row-first):not(.form-row-last) {
    grid-column: 1 / -1;
  }
}
body.twp-v2-checkout #content .post-content .woocommerce .form-row {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
}
body.twp-v2-checkout #content .post-content .woocommerce .form-row > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: var(--co-fs-flabel);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce .form-row .required {
  margin-left: 2px;
  border: 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--co-ivory);
  visibility: visible;
}
body.twp-v2-checkout #content .post-content .woocommerce .form-row .optional {
  margin-left: 6px;
  font-family: var(--co-mono) !important;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
/* The field — and, by construction, Stripe's card fields: Stripe clones #billing_first_name (classes and all)
   into a hidden .form-row inside the billing wrapper and reads these computed styles for its Payment Element. */
body.twp-v2-checkout #content .post-content .woocommerce :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], select, textarea),
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection--single {
  display: block;
  width: 100%;
  height: var(--co-field-h);
  min-height: var(--co-field-h);
  margin: 0;
  padding: 0 14px;
  border: 0 !important;
  border-bottom: 1px solid var(--co-field-line) !important;
  border-radius: 2px 2px 0 0 !important;
  background: var(--co-field) !important;
  box-shadow: none !important;
  outline: none;
  font-size: var(--co-fs-field) !important;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--co-ivory) !important;
  caret-color: var(--co-cyan);
  transition: border-color 160ms var(--co-ease), background-color 160ms var(--co-ease), box-shadow 160ms var(--co-ease);
  -webkit-appearance: none;
  appearance: none;
}
body.twp-v2-checkout #content .post-content .woocommerce input[type="hidden"] {
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce textarea {
  height: auto;
  min-height: 120px;
  padding: 14px;
  line-height: 1.5;
  resize: vertical;
}
body.twp-v2-checkout #content .post-content .woocommerce select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8' fill='none' stroke='%23eef1f7' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}
body.twp-v2-checkout #content .post-content .woocommerce select option {
  background: var(--co-panel);
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(input, textarea)::placeholder {
  color: rgb(238 241 247 / 0.42);
  opacity: 1;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):hover,
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection--single:hover {
  border-bottom-color: var(--co-field-hover) !important;
}
/* writing in a field: a 2 px cyan line and the faintest light */
body.twp-v2-checkout #content .post-content .woocommerce :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):focus,
body.twp-v2-checkout #content .post-content .woocommerce .select2-container--focus .select2-selection--single,
body.twp-v2-checkout #content .post-content .woocommerce .select2-container--open .select2-selection--single {
  border-bottom-color: var(--co-cyan) !important;
  background-color: var(--co-field-focus) !important;
  box-shadow: inset 0 -1px 0 var(--co-cyan) !important;
  outline: none;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(input, select, textarea):focus-visible {
  outline: none;
}
/* …except button-type inputs, which have no cyan line to show focus: Avada prints the checkout's Apply as
   <input type="submit">, so it keeps the shared focus ring (1.1.1 — keyboard focus was invisible there). */
body.twp-v2-checkout #content .post-content .woocommerce :is(input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
  outline: 2px solid var(--co-focus);
  outline-offset: 3px;
}
/* the browser's autofill keeps the dark field and ivory words */
body.twp-v2-checkout #content .post-content .woocommerce input:-webkit-autofill,
body.twp-v2-checkout #content .post-content .woocommerce input:-webkit-autofill:hover,
body.twp-v2-checkout #content .post-content .woocommerce input:-webkit-autofill:focus,
body.twp-v2-checkout #content .post-content .woocommerce select:-webkit-autofill {
  -webkit-text-fill-color: var(--co-ivory) !important;
  caret-color: var(--co-cyan);
  box-shadow: inset 0 0 0 100px #111c33 !important;
  transition: background-color 9999s ease-out 0s;
}
body.twp-v2-checkout #content .post-content .woocommerce input:autofill {
  box-shadow: inset 0 0 0 100px #111c33 !important;
}
/* invalid: the warm line; WooCommerce's own inline message under the field (with its square mark) */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid :is(input.input-text, select, textarea),
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid .select2-selection--single,
body.twp-v2-checkout #content .post-content .woocommerce :is(input, select, textarea)[aria-invalid="true"],
body.twp-v2-checkout #content .post-content .woocommerce #coupon_code.has-error {
  border-bottom-color: var(--co-error-rule) !important;
  box-shadow: inset 0 -1px 0 var(--co-error-rule) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid > label {
  color: var(--co-ivory) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .checkout-inline-error-message {
  position: relative;
  margin: 8px 0 0 !important;
  padding: 0 0 0 17px !important;
  font-size: var(--co-fs-small);
  line-height: 1.45;
  color: var(--co-error) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .checkout-inline-error-message::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--co-error);
}
/* Avada appends a generic line to every invalid row (.woocommerce-invalid::after "Please enter correct details for
   this required field."). Where WooCommerce has printed its own, specific message for the field, Avada's duplicate
   rests; where it hasn't, Avada's line stays — in the skin's error voice — so an invalid field always has words. */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid::after {
  display: block;
  margin: 8px 0 0;
  padding: 0 0 0 17px;
  background: linear-gradient(var(--co-error), var(--co-error)) left 0.5em / 7px 7px no-repeat;
  font-family: var(--co-sans);
  font-size: var(--co-fs-small);
  line-height: 1.45;
  color: var(--co-error);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid:has(.checkout-inline-error-message, .coupon-error-notice)::after {
  content: none !important;
  display: none !important;
}
/* WooCommerce's "validated" tick colours (Avada/Woo turn the line green): kept neutral — the field just reads */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-validated :is(input.input-text, select) {
  border-bottom-color: var(--co-field-line);
}

/* The account password (a subscription's checkout creates an account): WooCommerce's show-password eye. */
body.twp-v2-checkout #content .post-content .woocommerce .password-input {
  position: relative;
  display: block;
}
body.twp-v2-checkout #content .post-content .woocommerce .password-input input {
  padding-right: 52px;
}
body.twp-v2-checkout #content .post-content .woocommerce .show-password-input {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z' fill='none' stroke='%23eef1f7' stroke-opacity='.7' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23eef1f7' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer;
}
body.twp-v2-checkout #content .post-content .woocommerce .show-password-input::after,
body.twp-v2-checkout #content .post-content .woocommerce .show-password-input::before {
  content: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .show-password-input.display-password {
  background-color: rgb(238 241 247 / 0.08) !important;
}

/* Country / State: WooCommerce's selectWoo box, styled as a field; its dropdown is appended to <body>. */
body.twp-v2-checkout #content .post-content .woocommerce .select2-container {
  width: 100% !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection__rendered {
  flex: 1;
  padding: 0 42px 0 14px !important;
  line-height: calc(var(--co-field-h) - 1px) !important;
  color: var(--co-ivory) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection__placeholder {
  color: rgb(238 241 247 / 0.42) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection__arrow {
  top: 0 !important;
  right: 12px !important;
  width: 20px !important;
  height: 100% !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8' fill='none' stroke='%23eef1f7' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body.twp-v2-checkout #content .post-content .woocommerce .select2-container .select2-selection__arrow b {
  display: none !important;
}
body.twp-v2-checkout .select2-container--open .select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--co-rule-strong) !important;
  border-radius: 2px !important;
  background: var(--co-panel) !important;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.7) !important;
  color: var(--co-ivory) !important;
  font-family: var(--co-sans) !important;
}
body.twp-v2-checkout .select2-container--open .select2-search--dropdown {
  padding: 8px;
}
body.twp-v2-checkout .select2-container--open .select2-search--dropdown .select2-search__field {
  height: 42px;
  padding: 0 12px;
  border: 0 !important;
  border-bottom: 1px solid var(--co-field-line) !important;
  border-radius: 2px 2px 0 0 !important;
  background: rgb(255 255 255 / 0.04) !important;
  color: var(--co-ivory) !important;
  font-family: var(--co-sans) !important;
  font-size: 16px !important;
  outline: none;
}
body.twp-v2-checkout .select2-container--open .select2-search--dropdown .select2-search__field:focus {
  border-bottom-color: var(--co-cyan) !important;
}
body.twp-v2-checkout .select2-container--open .select2-results__option {
  padding: 9px 14px !important;
  font-family: var(--co-sans) !important;
  font-size: 15px !important;
  color: var(--co-ink-1) !important;
  background: transparent !important;
}
body.twp-v2-checkout .select2-container--open .select2-results__option[aria-selected="true"],
body.twp-v2-checkout .select2-container--open .select2-results__option[data-selected="true"] {
  color: var(--co-ivory) !important;
  background: rgb(255 255 255 / 0.05) !important;
}
body.twp-v2-checkout .select2-container--open .select2-results__option--highlighted,
body.twp-v2-checkout .select2-container--open .select2-results__option--highlighted[aria-selected],
body.twp-v2-checkout .select2-container--open .select2-results__option--highlighted[data-selected] {
  color: #fff !important;
  background: rgb(39 170 225 / 0.2) !important;
}
body.twp-v2-checkout .select2-container--open .select2-results__message {
  color: var(--co-ink-3) !important;
}

/* Checkboxes and radios: native controls, drawn in the house's line (still the real inputs). */
body.twp-v2-checkout #content .post-content .woocommerce :is(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0 10px 0 0;
  padding: 0;
  border: 1.5px solid rgb(238 241 247 / 0.55) !important;
  border-radius: 3px;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: -4px;
  cursor: pointer;
  transition: border-color 140ms var(--co-ease), background-color 140ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce input[type="radio"] {
  border-radius: 50%;
}
body.twp-v2-checkout #content .post-content .woocommerce input[type="checkbox"]:checked {
  border-color: var(--co-cyan) !important;
  background: var(--co-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.8' fill='none' stroke='%230b1120' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
}
body.twp-v2-checkout #content .post-content .woocommerce input[type="radio"]:checked {
  border-color: var(--co-cyan) !important;
  background: radial-gradient(circle, var(--co-cyan) 0 4.5px, transparent 5px) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--co-focus);
  outline-offset: 3px;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-invalid input[type="checkbox"] {
  border-color: var(--co-error-rule) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(label.checkbox, .woocommerce-form__label-for-checkbox) {
  display: inline-flex !important;
  align-items: flex-start;
  margin: 0 !important;
  font-size: var(--co-fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--co-ink-1);
  cursor: pointer;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(label.checkbox, .woocommerce-form__label-for-checkbox) input {
  margin-top: 1px;
}

/* ── 02 The order: the sheet's ledger (WooCommerce's table, its numbers untouched) ──────────── */

body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0;
  border-radius: 0 !important;
  background: transparent !important;
  table-layout: auto;
  font-size: var(--co-fs-body);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table :is(th, td) {
  padding: 13px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--co-hair) !important;
  background: transparent !important;
  vertical-align: baseline;
  text-align: left;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table :is(td.product-total, tfoot td) {
  padding-left: 16px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--co-ivory);
}
/* the column heads: mono labels */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table thead th {
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--co-rule) !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right !important;
}
/* the product: what is being bought, in the voice — WooCommerce's own product name */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td {
  padding: 22px 0 22px !important;
  border-bottom-color: var(--co-rule) !important;
  vertical-align: top;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-name {
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-product);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--co-ivory);
  text-wrap: balance;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-name :is(.product-quantity, strong.product-quantity) {
  display: block;
  margin-top: 10px;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-name :is(dl.variation, .wc-item-meta) {
  margin: 10px 0 0;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-small);
  line-height: 1.5;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-name dl.variation :is(dt, dd, p) {
  display: inline;
  margin: 0;
  font-family: var(--co-sans) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-total {
  padding-top: calc(22px + (var(--co-fs-product) - var(--co-fs-amount)) * 0.45) !important;
  font-size: var(--co-fs-amount);
  font-weight: 500;
}
/* the price as WooCommerce prints it — a sale's struck regular price stays visible, quieter */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table del {
  margin-right: 6px;
  color: var(--co-ink-3);
  opacity: 1;
  text-decoration-thickness: 1px;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table ins {
  background: none;
  text-decoration: none;
}
/* subtotal · discount · fees · tax: label left, figure right */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  font-size: var(--co-fs-body);
  font-weight: 500;
  color: var(--co-ink-2);
}
/* an applied code (cart-discount): its row carries the filled gold square — the Store's code colour, confirmed by WooCommerce */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.cart-discount th {
  position: relative;
  padding-left: 17px !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.cart-discount th::before {
  content: "";
  position: absolute;
  top: calc(13px + 0.55em);
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--co-gold);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.cart-discount td {
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-small);
  font-weight: 500;
  color: var(--co-ink-3) !important;
  text-decoration: underline;
  text-decoration-color: rgb(238 241 247 / 0.3);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-remove-coupon:hover {
  color: var(--co-ivory) !important;
}
/* the total: the sheet's last line, the figure at its largest */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.order-total :is(th, td) {
  padding-top: 20px !important;
  padding-bottom: 6px !important;
  border-bottom: 0 !important;
  vertical-align: baseline;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.order-total th {
  font-size: var(--co-fs-flabel);
  font-weight: 600;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td {
  font-size: var(--co-fs-total);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--co-ivory);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td :is(strong, .amount, bdi) {
  font-weight: 500;
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table :is(.includes_tax, small) {
  display: block;
  margin-top: 6px;
  font-size: var(--co-fs-small);
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  color: var(--co-ink-3);
}
/* WooCommerce Subscriptions' recurring totals, when the cart holds a subscription */
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.recurring-totals th {
  padding-top: 26px !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table tr.recurring-total td {
  font-size: var(--co-fs-amount);
}
body.twp-v2-checkout #content .post-content .woocommerce table.woocommerce-checkout-review-order-table .first-payment-date {
  display: block;
  font-size: var(--co-fs-small);
  color: var(--co-ink-3);
}

/* WooCommerce's BlockUI veil while the sheet or payment refreshes is inline WHITE at 60 % — the navy instead,
   with a thin turning ring (still under reduced motion). */
body.twp-v2-checkout .blockUI.blockOverlay {
  background: rgb(11 17 32) !important;
  opacity: 0.55 !important;
}
body.twp-v2-checkout .blockUI.blockOverlay::before {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.5px solid rgb(238 241 247 / 0.25);
  border-top-color: var(--co-ivory);
  border-radius: 50%;
  background: none !important;
  font-size: 0 !important;
  animation: twp-co-turn 0.8s linear infinite;
}
@keyframes twp-co-turn {
  to {
    transform: rotate(360deg);
  }
}

/* ── 03 Payment: the methods as ruled rows; the gateways' own fields untouched ────────────────── */

body.twp-v2-checkout #content .post-content .woocommerce #payment {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--co-rule) !important;
  list-style: none !important;
  background: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
  padding: 16px 16px 16px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--co-rule) !important;
  list-style: none !important;
  background: none !important;
  line-height: 1.4;
  text-align: left;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li::before {
  content: "" !important;
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  background: var(--co-cyan);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--co-ease);
  pointer-events: none;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--co-lift);
  opacity: 0;
  transition: opacity 200ms var(--co-ease);
  pointer-events: none;
}
/* the chosen method: the Store's chosen row — 2 px cyan along its top line, the faintest lift */
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li:has(> input.input-radio:checked)::before {
  transform: scaleX(1);
  transform-origin: left center;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li:has(> input.input-radio:checked)::after {
  opacity: 1;
}
/* one method only: WooCommerce hides its radio — nothing to choose, so no chosen state either */
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li:only-child::before,
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li:only-child::after {
  display: none;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li > input.input-radio {
  margin: 0 12px 0 0;
  vertical-align: -4px;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li > label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: var(--co-fs-method);
  font-weight: 600;
  line-height: 1.4;
  color: var(--co-ivory);
  cursor: pointer;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li > label img {
  display: inline-block;
  width: auto;
  max-width: none;
  height: auto;
  max-height: 24px;
  margin: -2px 0 0 8px;
  padding: 0;
  border: 0;
  float: none;
  vertical-align: middle;
}
/* the method's own area: no bubble, no panel — the gateway's fields sit on the sheet (transparent: Stripe samples it) */
body.twp-v2-checkout #content .post-content .woocommerce #payment div.payment_box {
  position: relative;
  margin: 14px 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--co-fs-small);
  line-height: 1.55;
  color: var(--co-ink-2) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment div.payment_box::before {
  content: none !important;
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment div.payment_box :is(p, li) {
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce #payment div.payment_box :is(fieldset, .wc-payment-form, .wc-upe-form) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment div.payment_box .form-row {
  margin: 12px 0 0 !important;
}
/* the gateways' own error lines (Stripe's #wc-stripe-upe-errors and friends): warm, never hidden */
body.twp-v2-checkout #content .post-content .woocommerce #payment :is(.stripe-source-errors, [id$="-upe-errors"], .wc-stripe-upe-errors, .woocommerce-error) {
  color: var(--co-error);
}

/* Terms, privacy, the robot check, then the one final action */
body.twp-v2-checkout #content .post-content .woocommerce #payment .form-row.place-order {
  display: grid;
  gap: 16px;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border: 0 !important;
  background: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment .form-row.place-order > :is(noscript) {
  display: block;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text) {
  margin: 0 !important;
  font-size: var(--co-fs-small);
  line-height: 1.55;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text) :is(p, a) {
  font-size: inherit;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-terms-and-conditions {
  max-height: 260px;
  overflow: auto;
  margin: 0 0 14px;
  padding: 14px 16px !important;
  border: 1px solid var(--co-rule) !important;
  background: rgb(255 255 255 / 0.02) !important;
  box-shadow: none !important;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 12px 0 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.g-recaptcha, [id*="recaptcha"]) {
  margin: 0;
  max-width: 100%;
}

/* PLACE ORDER — the Store's purchase pill: ivory, the words left, the arrow in its own dark disc.
   WooCommerce's real submit button; its text is WooCommerce's (it changes with the gateway); `display` is never
   set here, so a gateway that hides it (PayPal shows its own buttons) still can. */
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order {
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--co-cta-h);
  margin: 2px 0 0 !important;
  padding: 0 calc((var(--co-cta-h) - var(--co-cta-go)) / 2) 0 calc(var(--co-cta-h) * 0.42) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef1f7 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgb(11 17 32 / 0.16),
    0 1px 0 rgb(0 0 0 / 0.3),
    0 22px 44px -28px rgb(238 241 247 / 0.42) !important;
  font-size: var(--co-fs-cta) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.006em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: #0b1120 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--co-ease), box-shadow 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order::after {
  content: "";
  flex: none;
  width: var(--co-cta-go);
  height: var(--co-cta-go);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10h10.5M10.5 5.5 15 10l-4.5 4.5' fill='none' stroke='%23eef1f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 42% 42% no-repeat,
    #0b1120;
  transition: transform 220ms var(--co-ease), background-color 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:hover {
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(11 17 32 / 0.16),
    0 1px 0 rgb(0 0 0 / 0.3),
    0 24px 48px -26px rgb(238 241 247 / 0.55) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:hover::after {
  transform: translateX(3px);
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:active {
  background: #e2e7ef !important;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:focus-visible {
  outline: 2px solid var(--co-focus);
  outline-offset: 4px;
}
/* submitting (WooCommerce adds .processing to the form while it validates and pays): the disc turns, nothing else */
body.twp-v2-checkout #content .post-content .woocommerce :is(form.checkout, form#order_review).processing #place_order {
  cursor: progress;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(form.checkout, form#order_review).processing #place_order::after {
  background: #0b1120;
  transform: none;
}
/* the turning ring, drawn over the empty disc */
body.twp-v2-checkout #content .post-content .woocommerce :is(form.checkout, form#order_review).processing #place_order::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc((var(--co-cta-h) - var(--co-cta-go)) / 2 + var(--co-cta-go) * 0.27);
  width: calc(var(--co-cta-go) * 0.46);
  height: calc(var(--co-cta-go) * 0.46);
  margin-top: calc(var(--co-cta-go) * -0.23);
  border: 1.5px solid rgb(238 241 247 / 0.28);
  border-top-color: #eef1f7;
  border-radius: 50%;
  animation: twp-co-turn 0.8s linear infinite;
}
/* unavailable (a gateway or a rule disables it): drawn as absent — the Store's pending pill — never as broken */
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:is(:disabled, .disabled) {
  border: 1px dashed rgb(238 241 247 / 0.3) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--co-ink-3) !important;
  cursor: not-allowed;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment #place_order:is(:disabled, .disabled)::after {
  opacity: 0.35;
}
/* PayPal's own buttons (cross-origin iframes) only get room */
body.twp-v2-checkout #content .post-content .woocommerce #payment :is(.ppc-button-wrapper, [id^="ppc-button"]) {
  margin: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce #payment :is(#ppcp-hosted-fields, .ppcp-hosted-fields) .form-row {
  margin: 12px 0 0 !important;
}
/* …on the checkout PayPal prints them after the payment block, on the cart after the purchase pill (outside #payment):
   the same air as the rows above them. On the box PayPal shows or hides, so a hidden one leaves no gap. */
body.twp-v2-checkout #content .post-content .woocommerce :is(#order_review, .wc-proceed-to-checkout) > .ppc-button-wrapper > [id^="ppc-button-"] {
  margin-top: 16px;
}

/* Stripe's express checkout separator ("— OR —", Stripe's words): a mono label like the sheet's other labels. Stripe
   shows and hides it; only its type and spacing are set here. */
body.twp-v2-checkout #content .post-content .woocommerce #wc-stripe-express-checkout-button-separator {
  margin: 20px 0 calc(var(--co-gap-fields) + 6px) !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}

/* A signed-in customer's saved cards (WooCommerce's token list in the gateway's box) and "Save payment information":
   plain rows, no bullets, the radios and the checkbox drawn like every other — WooCommerce prints them with an inline
   width:auto, which would crush the drawn control to its border. */
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-SavedPaymentMethods {
  margin: 0 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-SavedPaymentMethods > li {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 8px 0 !important;
  list-style: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-SavedPaymentMethods > li > label {
  margin: 0;
  font-size: var(--co-fs-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--co-ink-1);
  cursor: pointer;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(input[type="checkbox"], input[type="radio"])[style*="width"] {
  width: 20px !important;
  height: 20px !important;
}

/* ── Buttons on every page: the secondary actions (update cart, apply, log in, verify, order again, view, download —
   WooCommerce's and Avada's) are the Store's outline pill. `display` is never !important here, so a script that hides
   a button inline still can. Each page's one final action has its own rule (place order above; below: proceed to
   checkout, return to the store, pay a failed order). ── */

body.twp-v2-checkout #content .post-content .woocommerce :is(a.button, button.button, input.button, input[type="submit"], .woocommerce-button, .fusion-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  float: none;
  width: auto;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 0 20px !important;
  border: 1px solid rgb(238 241 247 / 0.32) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-small) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  color: var(--co-ivory) !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms var(--co-ease), background-color 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a.button, button.button, input.button, input[type="submit"], .woocommerce-button, .fusion-button):hover {
  border-color: var(--co-ivory) !important;
  background: rgb(238 241 247 / 0.06) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(button.button, input.button, input[type="submit"]):is(:disabled, .disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
/* The final action on the cart, the empty cart and a failed order: the purchase pill (#place_order's look). */
body.twp-v2-checkout #content .post-content .woocommerce :is(a.checkout-button, .return-to-shop a.button, .woocommerce-thankyou-order-failed-actions a.pay:first-child) {
  position: relative;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--co-cta-h);
  padding: 0 calc((var(--co-cta-h) - var(--co-cta-go)) / 2) 0 calc(var(--co-cta-h) * 0.42) !important;
  border: 0 !important;
  background: #eef1f7 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgb(11 17 32 / 0.16),
    0 1px 0 rgb(0 0 0 / 0.3),
    0 22px 44px -28px rgb(238 241 247 / 0.42) !important;
  font-size: var(--co-fs-cta) !important;
  letter-spacing: -0.006em !important;
  text-align: left;
  color: #0b1120 !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--co-ease), box-shadow 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a.checkout-button, .return-to-shop a.button, .woocommerce-thankyou-order-failed-actions a.pay:first-child)::after {
  content: "";
  flex: none;
  width: var(--co-cta-go);
  height: var(--co-cta-go);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10h10.5M10.5 5.5 15 10l-4.5 4.5' fill='none' stroke='%23eef1f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 42% 42% no-repeat,
    #0b1120;
  transition: transform 220ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a.checkout-button, .return-to-shop a.button, .woocommerce-thankyou-order-failed-actions a.pay:first-child):hover {
  background: #fff !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a.checkout-button, .return-to-shop a.button, .woocommerce-thankyou-order-failed-actions a.pay:first-child):hover::after {
  transform: translateX(3px);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(a.checkout-button, .return-to-shop a.button, .woocommerce-thankyou-order-failed-actions a.pay:first-child):focus-visible {
  outline-offset: 4px;
}

/* Section titles on the cart, pay-for-order and order-received pages (WooCommerce's and Avada's h2s): the serif over
   a full-width rule, as the checkout's. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce h2 {
  display: block;
  float: none !important;
  margin: 0 0 calc(var(--co-gap-fields) + 2px) !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--co-rule) !important;
  background: none !important;
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.008em !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--co-ivory) !important;
}
/* Small headings inside a section (Avada's "Billing Address"): the mono label. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce :is(h3, header.title h3):not(.twp-co-payment-title) {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--co-ink-3) !important;
}

/* The ledger on the cart's totals, pay-for-order and order received (WooCommerce's tables, their numbers untouched):
   the checkout's order table — mono column heads, hairlines, the product in the serif, figures right-aligned. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0;
  border-radius: 0 !important;
  background: transparent !important;
  table-layout: auto;
  font-size: var(--co-fs-body);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(th, td) {
  padding: 13px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--co-hair) !important;
  background: transparent !important;
  vertical-align: baseline;
  text-align: left;
  color: var(--co-ink-2);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(th, td) + :is(th, td) {
  padding-left: 16px !important;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table thead th {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--co-rule) !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(th, td):is(.product-total, .product-subtotal, .product-quantity),
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tfoot td,
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce .cart_totals table.shop_table td {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(td.product-total, td.product-subtotal, tfoot td),
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce .cart_totals table.shop_table td {
  color: var(--co-ivory);
}
/* A value that is words (the payment method) wraps; an amount never breaks. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tfoot :is(th, td) {
  white-space: normal;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table .woocommerce-Price-amount {
  white-space: nowrap;
}
/* Row labels in a table that has its own th never also get the responsive "data-title" label. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table:not(.cart) td::before {
  content: none !important;
  display: none !important;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tbody td {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  border-bottom-color: var(--co-rule) !important;
  vertical-align: top;
}
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tbody td.product-name {
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-product);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--co-ivory);
  text-wrap: balance;
}
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tbody td.product-name a {
  color: inherit;
  text-decoration: none;
}
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table td.product-name :is(strong.product-quantity, .product-quantity) {
  display: block;
  margin-top: 10px;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--co-ink-3);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(.wc-item-meta, dl.variation) {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-small);
  line-height: 1.5;
  color: var(--co-ink-2);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(.wc-item-meta, dl.variation) :is(li, dt, dd, p) {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: var(--co-sans) !important;
}
/* Avada's thumbnail in its order table: the sheet is typographic (the checkout's has none either). */
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table td.product-name .product-thumbnail {
  display: none;
}
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table td.product-name .product-info {
  display: inline;
  font-family: var(--co-serif) !important;
}
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table td.product-quantity {
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-small);
  color: var(--co-ink-2);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(tfoot th, .cart_totals th) {
  font-size: var(--co-fs-body);
  font-weight: 500;
  color: var(--co-ink-2);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table del {
  margin-right: 6px;
  color: var(--co-ink-3);
  opacity: 1;
  text-decoration-thickness: 1px;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table ins {
  background: none;
  text-decoration: none;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(.includes_tax, small) {
  display: block;
  margin-top: 6px;
  font-size: var(--co-fs-small);
  font-weight: 400;
  white-space: normal;
  color: var(--co-ink-3);
}
/* The total: the last row that carries an amount (a customer's order note may follow it), the figure at its largest. */
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(tr.order-total, tfoot tr:has(.amount):not(:has(~ tr .amount))) :is(th, td) {
  padding-top: 20px !important;
  padding-bottom: 8px !important;
  border-bottom: 0 !important;
  vertical-align: baseline;
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(tr.order-total, tfoot tr:has(.amount):not(:has(~ tr .amount))) th {
  font-size: var(--co-fs-flabel);
  font-weight: 600;
  color: var(--co-ivory);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(tr.order-total, tfoot tr:has(.amount):not(:has(~ tr .amount))) td {
  font-size: var(--co-fs-total);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--co-ivory);
}
body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(tr.order-total, tfoot tr:has(.amount):not(:has(~ tr .amount))) td :is(strong, .amount, bdi) {
  font-weight: 500;
}
/* An applied code (cart-discount): the filled gold square, as on the checkout. */
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.cart-discount th {
  position: relative;
  padding-left: 17px !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--co-ivory);
}
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.cart-discount th::before {
  content: "";
  position: absolute;
  top: calc(13px + 0.55em);
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--co-gold);
}
/* WooCommerce Subscriptions' recurring totals in the cart's totals, as on the checkout: a mono label, then ordinary rows —
   the recurring total is a figure, not a second "total". */
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.recurring-totals th {
  padding-top: 26px !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.order-total.recurring-total :is(th, td) {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid var(--co-hair) !important;
}
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.order-total.recurring-total th {
  font-size: var(--co-fs-body);
  font-weight: 500;
  color: var(--co-ink-2);
}
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table tr.order-total.recurring-total td {
  font-size: var(--co-fs-amount);
}
body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce table.shop_table .first-payment-date {
  display: block;
  font-size: var(--co-fs-small);
  color: var(--co-ink-3);
}

/* ── CART: the order sheet's first page — the items on the left, the code and the totals in the sheet column ──── */

body.twp-v2-checkout #content .post-content .woocommerce form.woocommerce-cart-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
@media (min-width: 1024px) {
  body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce:has(> form.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--co-sheet);
    align-items: start;
  }
  body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce:has(> form.woocommerce-cart-form) > * {
    grid-column: 1 / -1;
  }
  body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce:has(> form.woocommerce-cart-form) > form.woocommerce-cart-form {
    grid-column: 1;
    padding-right: var(--co-half);
  }
  body.twp-v2-checkout.twp-surface-cart #content .post-content .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals {
    grid-column: 2;
    align-self: stretch;
    padding-left: var(--co-half) !important;
    border-left: 1px solid var(--co-rule);
  }
}
/* the items: WooCommerce's cart table — remove · product · price · quantity · subtotal (the thumbnails rest; the
   sheet is typographic, like the checkout's) */
body.twp-v2-checkout #content .post-content .woocommerce table.cart :is(th, td).product-thumbnail {
  display: none;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart :is(th, td).product-remove {
  width: 48px;
  padding-right: 8px !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart :is(th, td).product-remove + :is(th, td) {
  padding-left: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td {
  vertical-align: middle;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-name {
  font-family: var(--co-serif) !important;
  font-size: var(--co-fs-product);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--co-ivory);
  text-wrap: balance;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-name a {
  color: inherit;
  text-decoration: none;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-name .backorder_notification {
  margin-top: 8px;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-small);
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart :is(th, td):is(.product-price, .product-quantity) {
  white-space: nowrap;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.product-price {
  font-variant-numeric: tabular-nums;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.product-subtotal {
  font-size: var(--co-fs-amount);
  font-weight: 500;
}
/* the quantity: a small field when it can change; the plain figure when the package is sold one at a time */
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.product-quantity .quantity {
  display: inline-block;
  float: none;
  margin: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.product-quantity input.qty {
  width: 76px !important;
  height: 44px;
  min-height: 44px;
  padding: 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart:not(:has(td.product-quantity input:not([type="hidden"]))) :is(th, td).product-quantity {
  display: none;
}
/* remove: a ruled × with a 44 px target; its name is WooCommerce's ("Remove … from cart") */
body.twp-v2-checkout #content .post-content .woocommerce table.cart a.remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border: 1px solid rgb(238 241 247 / 0.3) !important;
  border-radius: 50% !important;
  background: none !important;
  font-family: var(--co-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: var(--co-ink-2) !important;
  transition: border-color 160ms var(--co-ease), background-color 160ms var(--co-ease), color 160ms var(--co-ease);
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart a.remove::after {
  content: "";
  position: absolute;
  inset: -6px;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart a.remove:is(:hover, :focus-visible) {
  border-color: var(--co-error-rule) !important;
  background: var(--co-error-ground) !important;
  color: var(--co-error) !important;
}
/* the actions row: WooCommerce's code field (open, labelled, the button drawn inside it) and "Update cart" — shown
   only once a quantity has changed (WooCommerce keeps it disabled until then). */
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions {
  padding: 26px 0 0 !important;
  border-bottom: 0 !important;
  text-align: left;
}
/* On Pat's cart Avada hides this field and prints its own box in the totals column, but WooCommerce now writes a
   wrong code's error under THIS field — inside Avada's hidden box. The skin shows WooCommerce's own field (same
   handler) and rests Avada's copy, so the error is seen. */
body.twp-v2-checkout #content .post-content .woocommerce table.cart tr.avada-cart-actions td.actions .coupon,
body.twp-v2-checkout #content .post-content .woocommerce table.cart tr.avada-cart-actions td.actions > button[name="update_cart"] {
  position: static !important;
  height: auto !important;
  visibility: visible !important;
}
body.twp-v2-checkout #content .post-content .woocommerce:has(table.cart td.actions .coupon #coupon_code) .cart-collaterals .shipping-coupon .coupon {
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "field" "error";
  align-items: center;
  gap: 10px;
  float: none !important;
  width: auto;
  max-width: 480px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon > label[for="coupon_code"] {
  grid-area: label;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-size: var(--co-fs-flabel);
  font-weight: 500;
  line-height: 1.35;
  color: var(--co-ink-2);
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon #coupon_code,
body.twp-v2-checkout #content .post-content .woocommerce #avada_coupon_code {
  grid-area: field;
  float: none;
  width: 100% !important;
  min-width: 0;
  height: var(--co-field-h);
  margin: 0 !important;
  padding: 0 calc(7.2em + 16px) 0 14px;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-code) !important;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(table.cart td.actions .coupon #coupon_code, #avada_coupon_code)::placeholder {
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-flabel);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon [name="apply_coupon"] {
  grid-area: field;
  justify-self: end;
  z-index: 1;
  height: calc(var(--co-field-h) - 12px);
  min-width: 6.6em;
  margin: 0 6px 0 0 !important;
  padding: 0 18px !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon .coupon-error-notice {
  grid-area: error;
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
  font-size: var(--co-fs-small);
  line-height: 1.45;
  color: var(--co-error) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions .coupon .coupon-error-notice::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--co-error);
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions > button[name="update_cart"] {
  margin-top: 16px;
}
body.twp-v2-checkout #content .post-content .woocommerce table.cart td.actions > button[name="update_cart"]:disabled {
  display: none;
}
/* the sheet column: WooCommerce's totals (and Avada's boxes around them, frames off) */
body.twp-v2-checkout #content .post-content .woocommerce .cart-collaterals {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce .cart-collaterals > * {
  order: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .cart-collaterals :is(.cart_totals, .cart-totals-buttons, .shipping-coupon, .cross-sells) {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .cart_totals table.shop_table :is(th, td) {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  border-bottom-color: var(--co-hair) !important;
  vertical-align: baseline;
}
body.twp-v2-checkout #content .post-content .woocommerce .wc-proceed-to-checkout {
  margin: 0 !important;
  padding: 24px 0 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .cart-collaterals a.checkout-button {
  display: flex;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 1023px) {
  body.twp-v2-checkout #content .post-content .woocommerce .cart-collaterals {
    margin-top: var(--co-space) !important;
  }
}
/* the empty cart: WooCommerce's line, then the way back to the store (Avada floats the two side by side) */
body.twp-v2-checkout #content .post-content .woocommerce .wc-empty-cart-message {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 720px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .return-to-shop {
  float: none !important;
  width: auto !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}
/* Avada draws an icon-font glyph before WooCommerce's forward/back links; the skin's arrow disc says it instead. */
body.twp-v2-checkout #content .post-content .woocommerce :is(.wc-forward, .wc-backward)::before {
  content: none !important;
  display: none !important;
}

/* ── ORDER PAY: WooCommerce's pay-for-order form — the order on the left, payment and the final action in the sheet
   column. #order_review IS the form here; it stays transparent (Stripe samples it for its card fields). ── */

body.twp-v2-checkout #content .post-content .woocommerce form#order_review {
  margin: 0;
  padding: 0;
  border: 0;
}
body.twp-v2-checkout.twp-surface-order-pay #content .post-content .woocommerce h3.twp-co-payment-title::before {
  content: none;
}
body.twp-v2-checkout #content .post-content .woocommerce form#order_review #payment > .form-row {
  display: grid;
  gap: 16px;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border: 0 !important;
  background: none !important;
}
@media (min-width: 1024px) {
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--co-sheet);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "order express"
      "order or"
      "order head"
      "order pay";
    align-items: start;
  }
  /* Stripe's express checkout and its "— OR —" (printed before the payment block) head the sheet column, inside its rule. */
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > :is(#wc-stripe-express-checkout-element, #wc-stripe-express-checkout-button-separator) {
    align-self: stretch;
    margin-top: 0 !important;
    padding-left: var(--co-half);
    border-left: 1px solid var(--co-rule);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > #wc-stripe-express-checkout-element {
    grid-area: express;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > #wc-stripe-express-checkout-button-separator {
    grid-area: or;
    margin-bottom: 0 !important;
    padding-top: 20px;
    padding-bottom: calc(var(--co-gap-fields) + 6px);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > * {
    grid-column: 1 / -1;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > table.shop_table {
    grid-area: order;
    width: calc(100% - var(--co-half)) !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > h3.twp-co-payment-title {
    grid-area: head;
    align-self: stretch;
    margin-top: 0;
    padding-left: var(--co-half);
    border-left: 1px solid var(--co-rule);
  }
  body.twp-v2-checkout #content .post-content .woocommerce form#order_review > #payment {
    grid-area: pay;
    align-self: stretch;
    padding-left: var(--co-half);
    border-left: 1px solid var(--co-rule);
  }
}

/* ── ORDER RECEIVED: a receipt — WooCommerce's line, the order's facts in one ruled strip, then the order (left)
   and the billing details (sheet column). Only what WooCommerce and its extensions print; nothing added. ── */

/* the facts: number · date · e-mail · total · payment method, each a mono label over its value */
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 24px;
  margin: 0 0 var(--co-space) !important;
  padding: 0 !important;
  border-top: 1px solid var(--co-rule);
  border-bottom: 1px solid var(--co-rule);
  list-style: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-order-overview > li {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 16px 0 18px !important;
  border: 0 !important;
  list-style: none !important;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-order-overview > li::before,
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-order-overview > li::after {
  content: none !important;
  display: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce ul.woocommerce-order-overview > li strong {
  display: block;
  margin-top: 8px;
  font-family: var(--co-sans) !important;
  font-size: var(--co-fs-amount);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  color: var(--co-ivory);
}
/* the sections: WooCommerce's (downloads, details, billing address, a gateway's notes) and Avada's boxes */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order > :is(section, div, ul, h2, p):not(.woocommerce-order-overview):not(:last-child) {
  margin-bottom: var(--co-space) !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order > p.woocommerce-notice:not(:last-child) {
  margin-bottom: 24px !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-order-details, .avada-order-details) .order-again {
  margin: 20px 0 0 !important;
  text-align: left;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) :is(.woocommerce-columns, .col2-set, .addresses) {
  display: block;
  margin: 0;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) :is(.woocommerce-column, .col-1, .col-2) {
  float: none !important;
  width: auto !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) .title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) address {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--co-fs-body);
  line-height: 1.7;
  color: var(--co-ink-1);
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) address p {
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(.woocommerce-customer-details, .avada-customer-details) address p::before {
  content: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .avada-customer-details dl.customer_details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0 0 22px;
}
body.twp-v2-checkout #content .post-content .woocommerce .avada-customer-details dl.customer_details dt {
  margin: 0;
  font-family: var(--co-mono) !important;
  font-size: var(--co-fs-label);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce .avada-customer-details dl.customer_details dd {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  color: var(--co-ink-1);
}
/* a gateway's own lines after the order (e.g. bank details) */
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order ul.order_details:not(.woocommerce-order-overview) {
  margin: 0 0 var(--co-space);
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--co-sheet);
    align-items: start;
  }
  body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order > * {
    grid-column: 1 / -1;
  }
  body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order > :is(.woocommerce-order-details, .avada-order-details) {
    grid-column: 1;
    padding-right: var(--co-half) !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-order > :is(.woocommerce-customer-details, .avada-customer-details) {
    grid-column: 2;
    align-self: stretch;
    padding-left: var(--co-half) !important;
    border-left: 1px solid var(--co-rule) !important;
  }
}
/* the log-in or e-mail check WooCommerce asks for before it shows an order (order received, order-pay) */
body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce :is(form.woocommerce-form-login, form.woocommerce-verify-email) {
  display: grid;
  gap: var(--co-gap-fields);
  max-width: 520px;
  margin: 0 0 var(--co-space) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
body.twp-v2-checkout #content .post-content .woocommerce :is(form.woocommerce-form-login, form.woocommerce-verify-email) :is(p, .form-row) {
  margin: 0 !important;
}
body.twp-v2-checkout #content .post-content .woocommerce .woocommerce-form-login__rememberme {
  margin: 0 0 14px !important;
}

/* ── The foot: the support address and the three legal pages ────────────────────────────── */

body.twp-v2-checkout .twp-co-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: var(--co-space);
  padding-top: 22px;
  border-top: 1px solid var(--co-rule);
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-foot :is(p, a) {
  font-size: var(--co-fs-small);
  line-height: 1.5;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-help {
  color: var(--co-ink-3);
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-help a {
  margin-left: 4px;
}
body.twp-v2-checkout .twp-co-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--co-ink-2);
  text-decoration: none;
}
body.twp-v2-checkout #content .post-content .woocommerce .twp-co-legal a:hover {
  color: var(--co-ivory);
  text-decoration: underline;
}

/* ── Phones: one column in WooCommerce's order; the final action never cramped ───────────────── */

@media (max-width: 1023px) {
  body.twp-v2-checkout #content .post-content .woocommerce #order_review {
    margin-top: 0;
  }
}
@media (max-width: 639px) {
  body.twp-v2-checkout #content .post-content .woocommerce .twp-co-legal a {
    min-height: 44px;
  }
  /* the cart's rows as cards: the name, then WooCommerce's own column names beside each figure, the × top-right */
  body.twp-v2-checkout #content .post-content .woocommerce table.cart,
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody {
    display: block;
    width: 100% !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart thead {
    display: none;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody tr {
    display: block;
    position: relative;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody tr.cart_item {
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--co-rule);
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: auto !important;
    padding: 5px 0 !important;
    border: 0 !important;
    text-align: right !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td[data-title]::before {
    content: attr(data-title) !important;
    display: block !important;
    float: none !important;
    flex: none;
    font-family: var(--co-mono) !important;
    font-size: var(--co-fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--co-ink-3);
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-name {
    display: block;
    padding: 0 52px 10px 0 !important;
    text-align: left !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-name::before {
    content: none !important;
    display: none !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-remove {
    display: block;
    position: absolute;
    top: 14px;
    right: 0;
    width: auto;
    padding: 0 !important;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.product-quantity:not(:has(input:not([type="hidden"]))) {
    display: none;
  }
  body.twp-v2-checkout #content .post-content .woocommerce table.cart tbody td.actions {
    display: block;
    padding: 22px 0 0 !important;
    text-align: left !important;
  }
  /* three-column order tables (pay-for-order; Avada's order details) fit a phone: a smaller voice, tighter heads */
  body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tbody td.product-name {
    font-size: calc(var(--co-fs-product) * 0.84);
    overflow-wrap: anywhere;
  }
  body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table thead th {
    letter-spacing: 0.08em;
  }
  body.twp-v2-checkout:where(.twp-surface-cart, .twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table :is(th, td) + :is(th, td) {
    padding-left: 10px !important;
  }
  body.twp-v2-checkout:where(.twp-surface-order-pay, .twp-surface-order-received) #content .post-content .woocommerce table.shop_table tfoot tr:has(.amount):not(:has(~ tr .amount)) td {
    font-size: calc(var(--co-fs-total) * 0.86);
  }
  body.twp-v2-checkout .twp-co-top {
    margin: 0;
    padding: 0;
  }
  body.twp-v2-checkout #content .post-content .woocommerce .twp-co-back span {
    font-size: 14px;
  }
  body.twp-v2-checkout #content .post-content .woocommerce #payment ul.wc_payment_methods > li {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  body.twp-v2-checkout .twp-co-foot {
    flex-direction: column;
  }
}

/* ── Motion: only what a state needs; nothing under reduced motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.twp-v2-checkout *,
  body.twp-v2-checkout *::before,
  body.twp-v2-checkout *::after {
    transition-duration: 0.01ms !important;
  }
  body.twp-v2-checkout .blockUI.blockOverlay::before,
  body.twp-v2-checkout #content .post-content .woocommerce :is(form.checkout, form#order_review).processing #place_order::before {
    animation: none;
  }
}