/* =============================================================================
   72-checkout.css — THE LAST SCREEN  (classic [woocommerce_checkout])
   =============================================================================

   The checkout is the classic shortcode, not the block: `.woocommerce-checkout
   form.checkout`, `#customer_details`, `#order_review`, `#payment`. That means
   real, stable markup — so unlike the cart this file can compose rather than
   negotiate.

   WHAT WAS WRONG
   --------------
   Nothing here was ugly; it was undifferentiated. Eleven identical field slabs
   ran down the left in one unbroken column with a single 20px interval between
   every one of them, so "who you are", "where it goes" and "anything else"
   arrived as one 900px list. The right column printed a table, a payment
   notice and a button as three unrelated objects. And the page ended on 450px
   of dead field because the summary stops 350px above the form does.

   WHAT IT IS NOW
   --------------
     THREE GROUPS, NUMBERED.  01 Billed to / 02 Delivered to / 03 Notes for us,
     each opening on the site's three-part lockup — 34x1px accent rule, 0.7rem
     kicker, Fraunces display line — and each seated on its own rule with a
     full interval of silence above it. The fields inside a group are a real
     two-column grid: the name pair sits side by side, town and region share a
     line, postcode and phone share a line, and the address runs full measure.
     WooCommerce's floats are replaced, not fought.

     THE RECEIPT.  One panel on the form plane holding the whole commitment:
     ruled column heads, the line in Fraunces with a tracked multiplier, the
     ledger rows as HUD/tabular pairs, and a total that is the largest figure
     on the page. Sticky, so it stays with a customer scrolling eleven fields.

     THE PAYMENT STATE.  No gateway is configured on this install, so
     WooCommerce prints "there are no available payment methods". That is a
     real state of a real store, and it is designed here rather than hidden: a
     labelled section, a dashed plate — the one dashed edge in the system,
     which is what says PENDING rather than BROKEN — and a status marker over
     the sentence. It reads as a shop that has not opened its tills yet, not
     as a page that has fallen over.

   ONE ACCENT.  The kicker rules. Every figure in the receipt is --ink,
   matching the cart and the convention 93-coherence.css settled for ledgers.
   The Total was the one green number on the site's most important screen.

   Owns: `.woocommerce-checkout` only. The field material, the tick boxes, the
   notices and the #place_order pill are 25-controls.css's and are built on
   here, never restated.

   Part files load last, so this file carries its own media queries.
   ========================================================================== */

body.woocommerce-checkout {
  --ck-gap:        clamp(40px, 4.6vw, 84px);
  --ck-panel-pad:  clamp(24px, 2.2vw, 34px);
  --ck-group-gap:  clamp(44px, 4.4vw, 72px);
  --ck-field-gap-x: clamp(14px, 1.4vw, 22px);
  --ck-field-gap-y: clamp(18px, 1.7vw, 26px);
  --ck-rule:       var(--ctl-hair, rgba(236, 229, 214, 0.16));
  --ck-ease:       var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1));

  --ck-kicker-rule: linear-gradient(90deg,
      var(--color-accent) 0%,
      color-mix(in srgb, var(--color-accent) 26%, transparent) 100%);
}

/* Order-received and the other checkout endpoints are a different page with a
   different shape; everything below is scoped to the form itself. */


/* =============================================================================
   1 · THE PAGE FRAME
   -----------------------------------------------------------------------------
   Same correction as the cart, same tokens: the chapter interval belongs to a
   page of prose, and this is a form. Stated on the section so the block's own
   padding can never compound with it.
   ========================================================================== */

body.woocommerce-checkout .page-content-section {
  padding-top: var(--rhythm-tight, clamp(64px, 7vw, 112px));
  padding-bottom: var(--rhythm, clamp(96px, 11.7vw, 176px));
}


/* =============================================================================
   2 · THE TWO NOTICES ABOVE THE FORM

   A confirmation and a coupon prompt. They are chrome for the screen below
   them, so they are set as rails — one line each, HUD voice — not as two
   stacked alert panels 80px tall.
   ========================================================================== */

body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  flex-wrap: wrap;
  padding: clamp(15px, 1.5vw, 20px) clamp(18px, 1.8vw, 26px);
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text-light);
}
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message {
  margin-bottom: 12px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 0;
}
body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message .button {
  margin-left: auto;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =============================================================================
   3 · THE SPREAD
   ========================================================================== */

body.woocommerce-checkout form.checkout {
  grid-template-columns: minmax(0, 1fr) clamp(346px, 29vw, 428px);
  /* woocommerce.css defines two rows; a third carries the ledger that closes
     the right-hand column. The middle row takes the 1fr so the summary's grid
     area is TALL — which is what gives `position: sticky` somewhere to
     travel. In the two-row version the area was exactly the panel's own
     height and the sticky never moved. */
  grid-template-areas:
      "details summary-title"
      "details summary"
      "details assurance";
  grid-template-rows: auto 1fr auto;
  column-gap: var(--ck-gap);
  row-gap: clamp(18px, 1.8vw, 26px);
  margin-top: clamp(40px, 4vw, 64px);
  align-items: start;
}

/* =============================================================================
   3b · THE FOOT OF THE RIGHT COLUMN

   The summary stops ~370px above the form does, and the composition closed on
   a 420x370px hole in its lower right — the single most-repeated rejection in
   review. `align-self: end` pins this ledger to the bottom of the column, so
   the spread resolves on all four edges whatever the form's height.
   ========================================================================== */

body.woocommerce-checkout form.checkout::after {
  content: "Ships from · Kowloon, Hong Kong\A Questions · support@teaory.net\A Confirmed by email on dispatch";
  grid-area: assurance;
  align-self: end;
  display: block;
  margin-top: clamp(30px, 3vw, 46px);
  padding: clamp(22px, 2.2vw, 30px) 0 0 47px;
  border-top: 1px solid var(--ck-rule);
  background-image: var(--ck-kicker-rule);
  background-repeat: no-repeat;
  background-position: left clamp(28px, 2.2vw + 6px, 38px);
  background-size: 34px 1px;
  white-space: pre-line;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  margin: 0;
}


/* =============================================================================
   4 · THE GROUP LOCKUP

   The site opens every section on three parts in this order: a 34x1px accent
   rule with a 0.7rem/0.17em kicker on it, a Fraunces display line, then the
   content. A checkout group is a section. It gets the same lockup, and an
   index — 01 / 02 / 03 — because a repeating set on this site is always
   numbered.
   ========================================================================== */

body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin: 0 0 var(--ck-group-gap);
}
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  padding-top: var(--ck-group-gap);
  border-top: 1px solid var(--ck-rule);
}
body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin-bottom: 0;
}

/* The display line. */
body.woocommerce-checkout #customer_details h3 {
  display: block;
  margin: 0 0 clamp(22px, 2.2vw, 32px);
  padding: 0;
  border-bottom: 0;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1vw + 1.28rem, 1.95rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: var(--ink);
  text-wrap: balance;
}

/* "Ship to a different address?" is a control, not a title: it keeps a size a
   tick box can sit beside. 25-controls.css owns the box itself. */
body.woocommerce-checkout #customer_details h3#ship-to-different-address {
  margin-bottom: 0;
  font-size: clamp(1.14rem, 0.5vw + 1.02rem, 1.34rem);
  letter-spacing: -0.024em;
}
body.woocommerce-checkout #customer_details h3#ship-to-different-address label span {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--ink);
}
/* Only when it is actually ticked open does the group need the interval back. */
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  margin-top: clamp(24px, 2.4vw, 34px);
}

/* The kickers. */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3::before,
body.woocommerce-checkout #customer_details h3#ship-to-different-address::before,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields::before,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #payment::before {
  display: block;
  box-sizing: border-box;
  margin: 0 0 clamp(13px, 1.3vw, 18px);
  padding: 0 0 0 47px;
  background-image: var(--ck-kicker-rule);
  background-repeat: no-repeat;
  background-position: left 0.42em;
  background-size: 34px 1px;
  border: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-align: left;
}
body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3::before {
  content: "01 · Billed to";
}
body.woocommerce-checkout #customer_details h3#ship-to-different-address::before {
  content: "02 · Delivered to";
  margin-bottom: clamp(15px, 1.5vw, 20px);
}
body.woocommerce-checkout #customer_details .woocommerce-additional-fields::before {
  content: "03 · Notes for us";
}
body.woocommerce-checkout #order_review_heading {
  margin-bottom: clamp(15px, 1.5vw, 22px);
}

/* Group 03 has no heading element to hang a lockup on — WooCommerce prints
   the notes field with no title at all. Two pseudo-elements on two nested
   divs rebuild the same two-part lockup the other groups get, so the column
   does not lose its rhythm on its last movement. */
body.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper::before {
  content: "Anything we should know?";
  display: block;
  margin: 0 0 clamp(22px, 2.2vw, 32px);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1vw + 1.28rem, 1.95rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: var(--ink);
  text-wrap: balance;
}


/* =============================================================================
   5 · THE FIELD GRID

   WooCommerce floats `form-row-first` / `form-row-last` at 47% and leaves
   everything else at 100%, which is why an eleven-field address reads as one
   column with two orphans at the top. A two-track grid replaces the floats
   outright, and four IDs pair the fields that belong on one line: town with
   region, postcode with phone. A field the country locale hides is
   `display: none` and takes no cell, so the pairing survives every country.
   ========================================================================== */

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ck-field-gap-x);
  row-gap: var(--ck-field-gap-y);
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field,
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field {
  grid-column: 1;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last,
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field,
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_phone_field {
  grid-column: 2;
}

/* The order note is one field and wants the full measure. */
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
  width: auto;
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout #order_comments {
  min-height: 128px;
}


/* =============================================================================
   6 · THE RECEIPT

   One panel, on the form plane — the same --ctl-panel-face the cart's ledger
   and the store's other forms stand on, which sits BELOW the page ground and
   is what makes the paper pill on it read as lifted.
   ========================================================================== */

body.woocommerce-checkout #order_review {
  position: sticky;
  top: clamp(16px, 2vw, 28px);
  padding: var(--ck-panel-pad);
  border: 1px solid var(--ctl-panel-edge, rgba(244, 240, 228, 0.11));
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-panel-face, rgba(7, 12, 8, 0.62));
  box-shadow: inset 0 1px 0 rgba(236, 229, 214, 0.035);
}

/* --- Column heads --------------------------------------------------------- */
body.woocommerce-checkout #order_review table.shop_table thead th {
  padding: 0 0 13px;
  border-bottom: 1px solid var(--ck-rule);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- The lines ------------------------------------------------------------ */
body.woocommerce-checkout #order_review table.shop_table tbody td {
  padding: clamp(15px, 1.5vw, 20px) 0;
  border-bottom: 1px solid var(--ck-rule);
  vertical-align: top;
}
body.woocommerce-checkout #order_review table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}
body.woocommerce-checkout #order_review table.shop_table td.product-name {
  padding-right: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
}
/* The multiplier is chrome, not part of the name. */
body.woocommerce-checkout #order_review table.shop_table td.product-name .product-quantity {
  display: block;
  margin-top: 9px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-muted);
}
body.woocommerce-checkout #order_review table.shop_table td.product-total {
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text);
}

/* --- The ledger ----------------------------------------------------------- */
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  padding: 13px 0;
  border-bottom: 0;
  vertical-align: baseline;
}
body.woocommerce-checkout #order_review table.shop_table tfoot tr:first-child th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr:first-child td {
  padding-top: clamp(16px, 1.6vw, 22px);
}
body.woocommerce-checkout #order_review table.shop_table tfoot th {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
body.woocommerce-checkout #order_review .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.woocommerce-checkout #order_review .woocommerce-shipping-methods li {
  margin: 0;
  list-style: none;
}
body.woocommerce-checkout #order_review .woocommerce-shipping-methods label {
  display: inline;
  white-space: nowrap;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text);
}
body.woocommerce-checkout #order_review .woocommerce-shipping-destination {
  margin: 8px 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- The total: the largest figure on the screen -------------------------- */
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid var(--ck-rule);
}
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total th {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.34rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total td,
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total td strong,
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total .amount {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.7rem, 1.1vw + 1.4rem, 2.15rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.woocommerce-checkout #order_review table.shop_table tfoot .order-total small.includes_tax {
  display: block;
  margin-top: 6px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* =============================================================================
   7 · THE PAYMENT STATE

   No gateway is configured on this install, so this box holds WooCommerce's
   "no available payment methods" notice and nothing else. Designed, not
   hidden: a labelled section, then a DASHED plate — the only dashed edge in
   the whole system, which is precisely what makes it read as "not yet" rather
   than "went wrong" — carrying a status marker and the sentence. A red error
   panel would be a lie; an unstyled grey one would look unfinished.

   When a gateway is switched on, the same rules dress the real method list:
   the list items become ruled rows, the radio is 25-controls.css's, and the
   dashed plate is simply never rendered.
   ========================================================================== */

body.woocommerce-checkout #payment {
  margin-top: clamp(26px, 2.6vw, 38px);
  padding-top: clamp(24px, 2.4vw, 34px);
  border-top: 1px solid var(--ck-rule);
  background: transparent;
}
body.woocommerce-checkout #payment::before {
  content: "Payment";
}

body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li {
  padding: 0;
  margin: 0;
  border: 0;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li + li {
  margin-top: 10px;
}
body.woocommerce-checkout #payment ul.payment_methods label {
  font-family: var(--font-primary);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* The pending plate. */
body.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
  position: relative;
  display: block;
  /* woocommerce.css holds every notice's padding with an !important, so the
     marker cannot be given room INSIDE the plate. It is given room above it
     instead, which reads better anyway: label, state, explanation. */
  margin: 30px 0 0;
  border: 1px dashed color-mix(in srgb, var(--ink) 19%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--ink) 19%, transparent);
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-wash-1, rgba(236, 229, 214, 0.05));
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  color: var(--color-text-light);
}
/* The status marker.

   It has to be ::after, not ::before: woocommerce.css kills every notice's
   ::before with `content: none !important` to delete WooCommerce's icon
   webfont glyph, and answering a bang with a bang is not how this codebase
   reaches anything. So the marker is absolutely positioned into the space the
   plate's own margin reserves for it, and its status dot is drawn as a radial
   gradient rather than needing a third pseudo-element. */
body.woocommerce-checkout #payment ul.payment_methods .woocommerce-info::after {
  content: "No methods available yet";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  padding-left: 16px;
  background-image: radial-gradient(circle at 3px 50%,
      var(--color-secondary) 0 2.5px, transparent 2.6px);
  background-repeat: no-repeat;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
/* --- Terms, privacy, and the commit --------------------------------------- */
body.woocommerce-checkout #payment .place-order {
  margin: clamp(22px, 2.2vw, 30px) 0 0;
  padding: 0;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: clamp(18px, 1.8vw, 24px);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 0 14px;
  font-family: var(--font-primary);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-muted);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-light);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--ck-rule);
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-wash-1, rgba(236, 229, 214, 0.05));
  font-size: 0.78rem;
  line-height: 1.72;
  color: var(--color-text-light);
}

/* The HUD line under the commit — what actually happens when it is pressed.
   The same closing gesture the cart's panel makes. */
body.woocommerce-checkout #payment .place-order::after {
  content: "No charge until you confirm";
  display: block;
  margin-top: 16px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}


/* =============================================================================
   8 · THE COUPON FORM
   ========================================================================== */

body.woocommerce-checkout form.checkout_coupon {
  gap: clamp(12px, 1.2vw, 18px);
  margin: 14px 0 0;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--ctl-panel-edge, rgba(244, 240, 228, 0.11));
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-panel-face, rgba(7, 12, 8, 0.62));
}
body.woocommerce-checkout form.checkout_coupon p:first-child {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
body.woocommerce-checkout form.checkout_coupon #coupon_code {
  min-width: 240px;
}


/* =============================================================================
   9 · WIDTH
   ========================================================================== */

@media (max-width: 1120px) {
  body.woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "details" "summary-title" "summary" "assurance";
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
    row-gap: 0;
  }
  body.woocommerce-checkout form.checkout::after {
    align-self: start;
  }
  body.woocommerce-checkout form.checkout #order_review_heading {
    margin-top: var(--ck-group-gap);
    padding-top: var(--ck-group-gap);
    border-top: 1px solid var(--ck-rule);
    background-position: left calc(var(--ck-group-gap) + 0.42em);
  }
  body.woocommerce-checkout #order_review {
    position: static;
  }
}

@media (max-width: 720px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The paired fields are placed by ID, so a class-level reset cannot reach
     them: left in place, `grid-column: 2` conjures an implicit second track
     and squeezes every other field to 80px. They are named again here. */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
  body.woocommerce-checkout #billing_city_field,
  body.woocommerce-checkout #shipping_city_field,
  body.woocommerce-checkout #billing_postcode_field,
  body.woocommerce-checkout #shipping_postcode_field,
  body.woocommerce-checkout #billing_state_field,
  body.woocommerce-checkout #shipping_state_field,
  body.woocommerce-checkout #billing_phone_field,
  body.woocommerce-checkout #shipping_phone_field {
    grid-column: 1;
  }
  body.woocommerce-checkout .page-content-section {
    padding-top: clamp(52px, 12vw, 72px);
    padding-bottom: clamp(72px, 16vw, 104px);
  }
  body.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message .button {
    margin-left: 0;
  }
  body.woocommerce-checkout #customer_details h3 {
    font-size: clamp(1.34rem, 5vw, 1.6rem);
  }
}