/* ==========================================================================
   Endless Garage — Purchase flow
   /cart/ (page 1552), /checkout/ (page 1554) and the checkout endpoints
   order-received and order-pay.
   --------------------------------------------------------------------------
   Companion sheet to eg-account.css and eg-fleet.css. The tokens, panel
   treatment, micro-label scale, hairline grids and hover behaviour are
   deliberately identical to the member account area so the purchase flow
   reads as the same product as the dashboard, not a third dialect.

   Loaded ONLY on the cart and the checkout — see
   wp-content/mu-plugins/eg-checkout-assets.php, which gates on
   is_cart() || is_checkout() and versions the file by filemtime.

   THREE THINGS THAT SHAPE EVERY RULE BELOW
   ----------------------------------------
   1. THE THEME ASSUMES A LIGHT BACKGROUND. Anything not explicitly coloured
      inherits near-black and disappears. Every text node reachable on these
      screens is coloured here on purpose, including the ones WooCommerce and
      the delivery/pickup plugin hand over with inline styles.
   2. LOAD ORDER. The child theme is stylesheet ~#15; WooCommerce, the theme's
      own WooCommerce sheet, Elementor and WPForms land between #100 and #142.
      This sheet is enqueued at priority 9999 so it is appended last, which is
      what makes these declarations win. Where a rule still has to beat an
      inline style (the points-explanation box, the distance note) it is
      marked !important, because an author !important outranks a
      non-important inline declaration.
   3. EVERY AMOUNT IS GARAGE POINTS. woocommerce_currency_symbol is filtered
      to an empty string site-wide, so WooCommerce prints "750" where it would
      print "$750". Units are added in real DOM by the mu-plugin; this sheet
      styles them. No amount on these screens is left bare.

   The banner (.page-header) and the site header are owned by
   eg-header-banner-fix.php. This sheet contains NO .page-header and NO header
   rules and must not gain any.
   ========================================================================== */

:root {
  --eg-bg:      #0A0A0A;
  --eg-panel:   #111111;
  --eg-panel-2: #151515;
  --eg-line:    rgba(255,255,255,.12);
  --eg-line-2:  rgba(255,255,255,.20);
  --eg-lime:    #BDFF3E;
  --eg-ink:     #FFFFFF;
  --eg-body:    #C7C7C7;
  --eg-mute:    #8A8A8A;
  --eg-warn:    #FF7A7A;
}

/* --------------------------------------------------------------------------
   1. Page shell
   The theme renders both pages on a white content area inside a boxed
   .wgl-container. The surface goes black and the container is flattened so
   the sections below can own their own gutter and rhythm.
   -------------------------------------------------------------------------- */
body.eg-flow {
  background: var(--eg-bg) !important;
}
body.eg-flow #main,
body.eg-flow .site-main,
body.eg-flow #main-content,
body.eg-flow .page_content_wrap,
body.eg-flow #wrapper {
  background: var(--eg-bg) !important;
}
body.eg-flow #main {
  padding-top: 26px !important;
  padding-bottom: 96px !important;
  /* The theme's default body colour here is #494949, which is 1.9:1 on black.
     Anything that slips past the rules below would inherit it. */
  color: var(--eg-body) !important;
}
body.eg-flow #main > .wgl-container {
  max-width: 1320px !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}
body.eg-flow #main > .wgl-container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.eg-flow #main-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* The checkout is an Elementor document whose only content is the shortcode.
   Its boxed container and column padding would add a second gutter inside the
   one the theme container already supplies. */
body.eg-flow .elementor-1554 .elementor-section > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
}
body.eg-flow .elementor-1554 .elementor-widget-wrap,
body.eg-flow .elementor-1554 .elementor-element-populated {
  padding: 0 !important;
}
body.eg-flow .elementor-1554 .elementor-widget { margin-bottom: 0 !important; }
body.eg-flow .elementor-1554 .elementor-section { margin-top: 0 !important; }

/* Base type colour for everything inside the flow, so no node can fall back
   to the theme's near-black. */
body.eg-flow .woocommerce,
body.eg-flow .woocommerce p,
body.eg-flow .woocommerce li,
body.eg-flow .woocommerce td,
body.eg-flow .woocommerce label,
body.eg-flow .woocommerce span,
body.eg-flow .woocommerce div {
  color: var(--eg-body);
}
body.eg-flow .woocommerce h1,
body.eg-flow .woocommerce h2,
body.eg-flow .woocommerce h3,
body.eg-flow .woocommerce h4 {
  color: var(--eg-ink);
}

/* The theme's float clearfix on .woocommerce becomes a real grid item the
   moment that element is given display:grid, and silently occupies the first
   cell. Removed before any grid is declared on it. */
body.eg-flow .woocommerce::before,
body.eg-flow .woocommerce::after,
body.eg-flow .col2-set::before,
body.eg-flow .col2-set::after,
body.eg-flow .cart-collaterals::before,
body.eg-flow .cart-collaterals::after,
body.eg-flow form.checkout::before,
body.eg-flow form.checkout::after {
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. Shared primitives — same values as eg-account.css / eg-fleet.css
   -------------------------------------------------------------------------- */
body.eg-flow .eg-co-btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--eg-lime);
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
  transition: background .28s, color .28s, border-color .28s;
}
body.eg-flow .eg-co-btn:hover,
body.eg-flow .eg-co-btn:focus {
  background: transparent !important;
  color: var(--eg-lime) !important;
}
body.eg-flow .eg-co-btn--ghost {
  background: transparent !important;
  color: var(--eg-lime) !important;
  border-color: rgba(189,255,62,.45);
}
body.eg-flow .eg-co-btn--ghost:hover,
body.eg-flow .eg-co-btn--ghost:focus {
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
  border-color: var(--eg-lime);
}
body.eg-flow a:focus-visible,
body.eg-flow button:focus-visible,
body.eg-flow input:focus-visible,
body.eg-flow select:focus-visible,
body.eg-flow textarea:focus-visible {
  outline: 2px solid var(--eg-lime);
  outline-offset: 2px;
}

/* The Garage Points unit that the mu-plugin appends to every amount. */
body.eg-flow .eg-unit {
  display: inline-block;
  white-space: nowrap;
  margin-left: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  vertical-align: baseline;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-unit--full { letter-spacing: .12em; }

/* Amounts. WooCommerce renders these in its own near-black; on these panels
   that measured 1.11:1 during the sweep of the account area, and the same
   markup is reused here. */
body.eg-flow .woocommerce-Price-amount,
body.eg-flow .woocommerce-Price-amount.amount,
body.eg-flow .woocommerce-Price-amount bdi,
body.eg-flow .woocommerce-Price-currencySymbol {
  color: var(--eg-ink) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: none !important;
}

/* --------------------------------------------------------------------------
   3. Head band — step rail + the numbers that decide the purchase
   -------------------------------------------------------------------------- */
body.eg-flow .eg-co-head {
  margin: 0 0 26px;
  padding: 0;
  background: transparent;
}
body.eg-flow .eg-co-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 32px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--eg-line);
}
body.eg-flow .eg-co-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.eg-flow .eg-co-step {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 !important;
  padding: 0 22px 0 0;
  list-style: none !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-co-step::before,
body.eg-flow .eg-co-step::marker { content: none !important; }
body.eg-flow .eg-co-step__n {
  font-size: 10px;
  letter-spacing: .1em;
  color: inherit !important;
  font-variant-numeric: tabular-nums;
}
body.eg-flow .eg-co-step__t { color: inherit !important; }
body.eg-flow .eg-co-step.is-done   { color: var(--eg-body) !important; }
body.eg-flow .eg-co-step.is-active { color: var(--eg-lime) !important; }
body.eg-flow .eg-co-step.is-active .eg-co-step__n,
body.eg-flow .eg-co-step.is-done .eg-co-step__n { color: inherit !important; }
/* Hairline separator between steps, drawn on the item rather than with a
   pseudo-element so it cannot become a grid/flex item anywhere. */
body.eg-flow .eg-co-step + .eg-co-step { border-left: 1px solid var(--eg-line); }

body.eg-flow .eg-co-head__note {
  flex: 0 1 auto;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--eg-mute) !important;
  text-align: right;
}
body.eg-flow .eg-co-head__eyebrow {
  display: inline-block;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--eg-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eg-lime) !important;
}

/* Stat strip — the hairline tile idiom from the account dashboard. */
/* The track count is set from the number of tiles rather than with auto-fit.
   auto-fit only collapses tracks that are genuinely empty, and the full-width
   shortfall tile occupies every track — so auto-fit produced six 185px tracks
   with three tiles in them and a dead grey block filling the rest. */
body.eg-flow .eg-co-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  padding: 0;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
  border-top: 3px solid var(--eg-lime);
  list-style: none !important;
}
body.eg-flow .eg-co-stats--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.eg-flow .eg-co-stats--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.eg-flow .eg-co-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
  background: var(--eg-panel) !important;
}
body.eg-flow .eg-co-stat__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-co-stat__v {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--eg-ink) !important;
  font-variant-numeric: tabular-nums;
}
body.eg-flow .eg-co-stat__v--lime  { color: var(--eg-lime) !important; }
body.eg-flow .eg-co-stat__v--short { color: var(--eg-warn) !important; }
body.eg-flow .eg-co-stat__u {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
/* The shortfall tile spans the strip and carries its own instruction. */
body.eg-flow .eg-co-stat--wide { grid-column: 1 / -1; }
body.eg-flow .eg-co-short { border-left: 3px solid var(--eg-warn); }
body.eg-flow .eg-co-short__b {
  margin: 6px 0 0 !important;
  max-width: 64ch;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--eg-body) !important;
}
body.eg-flow .eg-co-short__b a {
  color: var(--eg-lime) !important;
  font-weight: 700;
  text-decoration: none !important;
}
body.eg-flow .eg-co-short__b a:hover { text-decoration: underline !important; }

/* --------------------------------------------------------------------------
   4. Notices
   The theme wraps every WooCommerce notice in .ketofitt_module_message_box and
   puts the WooCommerce class on an INNER element, so exactly one element is
   made the panel (the outer theme box) and everything inside is flattened —
   otherwise the result is two nested, offset boxes with different borders.
   The theme's 70x70 absolutely-positioned flaticon tile is removed outright:
   the club styling does not use notification icons, and left in place it sits
   on top of the message text once the 100px left padding is replaced.
   -------------------------------------------------------------------------- */
body.eg-flow .ketofitt_module_message_box {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 20px 54px 20px 24px !important;
  background: #121212 !important;
  border: 1px solid var(--eg-line) !important;
  border-left: 3px solid var(--eg-lime) !important;
  border-radius: 0 !important;
  color: #EDEDED !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  box-shadow: none !important;
}
body.eg-flow .ketofitt_module_message_box.type_error { border-left-color: var(--eg-warn) !important; }
body.eg-flow .ketofitt_module_message_box.type_success { border-left-color: var(--eg-lime) !important; }
body.eg-flow .ketofitt_module_message_box .message_icon_wrap,
body.eg-flow .ketofitt_module_message_box .message_icon { display: none !important; }
body.eg-flow .woocommerce-error::before,
body.eg-flow .woocommerce-info::before,
body.eg-flow .woocommerce-message::before,
body.eg-flow .ketofitt_module_message_box::before,
body.eg-flow .ketofitt_module_message_box::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.eg-flow .ketofitt_module_message_box .message_content,
body.eg-flow .ketofitt_module_message_box .message_text,
body.eg-flow .ketofitt_module_message_box .woocommerce-error,
body.eg-flow .ketofitt_module_message_box .woocommerce-info,
body.eg-flow .ketofitt_module_message_box .woocommerce-message,
body.eg-flow .ketofitt_module_message_box ul {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
  color: #EDEDED !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
body.eg-flow .ketofitt_module_message_box li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  line-height: 1.7 !important;
  color: #EDEDED !important;
}
body.eg-flow .ketofitt_module_message_box li::before,
body.eg-flow .ketofitt_module_message_box li::marker { content: none !important; }
body.eg-flow .ketofitt_module_message_box li + li { margin-top: 8px !important; }
body.eg-flow .ketofitt_module_message_box strong,
body.eg-flow .ketofitt_module_message_box b { color: #FFFFFF !important; font-weight: 700 !important; }
body.eg-flow .ketofitt_module_message_box a:not(.button):not(.eg-co-btn) {
  color: var(--eg-lime) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
body.eg-flow .ketofitt_module_message_box a:not(.button):not(.eg-co-btn):hover { text-decoration: underline !important; }
body.eg-flow .ketofitt_module_message_box .message_close_button {
  position: absolute !important;
  top: 15px !important;
  right: 16px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  line-height: 22px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--eg-mute) !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: color .25s;
}
body.eg-flow .ketofitt_module_message_box .message_close_button:hover { color: var(--eg-ink) !important; }
/* Notices that arrive WITHOUT the theme wrapper still get the panel. */
body.eg-flow .woocommerce-notices-wrapper > .woocommerce-error,
body.eg-flow .woocommerce-notices-wrapper > .woocommerce-info,
body.eg-flow .woocommerce-notices-wrapper > .woocommerce-message,
body.eg-flow .woocommerce-NoticeGroup > .woocommerce-error,
body.eg-flow .woocommerce-NoticeGroup > .woocommerce-info,
body.eg-flow .woocommerce-NoticeGroup > .woocommerce-message {
  margin: 0 0 22px !important;
  padding: 20px 24px !important;
  background: #121212 !important;
  border: 1px solid var(--eg-line) !important;
  border-left: 3px solid var(--eg-lime) !important;
  border-radius: 0 !important;
  color: #EDEDED !important;
  list-style: none !important;
}
body.eg-flow .woocommerce-notices-wrapper > .woocommerce-error,
body.eg-flow .woocommerce-NoticeGroup > .woocommerce-error { border-left-color: var(--eg-warn) !important; }
body.eg-flow .woocommerce-notices-wrapper:empty { display: none !important; }

/* --------------------------------------------------------------------------
   5. Panels and tables (shared by cart, checkout, order screens)
   -------------------------------------------------------------------------- */
body.eg-flow .eg-panel,
body.eg-flow form.woocommerce-cart-form,
body.eg-flow .cart_totals,
body.eg-flow .woocommerce-additional-fields,
body.eg-flow #cps-distance-points-info,
body.eg-flow #order_review,
body.eg-flow .woocommerce-order-details,
body.eg-flow .woocommerce-customer-details,
body.eg-flow .woocommerce-order-overview {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.eg-flow table.shop_table,
body.eg-flow table.woocommerce-checkout-review-order-table,
body.eg-flow table.woocommerce-table--order-details {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.eg-flow table.shop_table thead th,
body.eg-flow table.woocommerce-table--order-details thead th {
  padding: 15px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eg-line-2) !important;
  color: var(--eg-mute) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap;
}
body.eg-flow table.shop_table tbody td,
body.eg-flow table.shop_table tbody th,
body.eg-flow table.woocommerce-table--order-details tbody td {
  padding: 18px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: var(--eg-body) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  vertical-align: middle !important;
}
body.eg-flow table.shop_table tbody tr:last-child td { border-bottom: 0 !important; }
body.eg-flow table.shop_table tfoot th,
body.eg-flow table.shop_table tfoot td,
body.eg-flow table.woocommerce-table--order-details tfoot th,
body.eg-flow table.woocommerce-table--order-details tfoot td {
  padding: 14px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  color: var(--eg-body) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
/* Table cell labels wrap in span.nobr, which carries its own colour. */
body.eg-flow .nobr, body.eg-flow th .nobr { color: inherit !important; }

/* --------------------------------------------------------------------------
   6. CART — two columns: the line items, and a sticky summary
   -------------------------------------------------------------------------- */
body.eg-flow.eg-cart-filled #main-content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  column-gap: 26px;
  row-gap: 26px;
  align-items: start;
}
body.eg-flow.eg-cart-filled #main-content > .woocommerce > .eg-co-head,
body.eg-flow.eg-cart-filled #main-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.eg-flow.eg-cart-filled #main-content > .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
body.eg-flow.eg-cart-filled #main-content > .woocommerce > .cart-collaterals { grid-column: 2; }

body.eg-flow form.woocommerce-cart-form {
  margin: 0 !important;
  border-top: 3px solid var(--eg-lime) !important;
}

/* ---- Line rows -----------------------------------------------------------
   The cart table is taken out of table layout and each row is laid out as an
   explicit grid.

   Why: these products encode the event and its date/time in the variation, so
   product names run past 120 characters and are the NORMAL case. Under table
   layout the browser distributes width by content, which gave the three
   numeric columns ~150px each and left the name about 99px — one word per
   line and a 500px-tall row. A grid lets the name take every pixel the numeric
   columns do not need, and lets the unit price sit UNDER the name instead of
   claiming a whole column of its own.

   Only display and placement change; every cell, link, input and form control
   stays exactly where WooCommerce put it in the DOM, so the quantity stepper
   JS, the remove links and the update-cart submit are untouched.
   -------------------------------------------------------------------------- */
/* display:block carries !important on purpose. WooCommerce's small-screen
   sheet sets `display: flex` on these cells below 768px; without !important it
   wins inside its media query, and the two name lines (.eg-ci__t / .eg-ci__s)
   stop being stacked blocks and become side-by-side FLEX ITEMS — 54px and
   128px wide, one word per line. Measured, not guessed. */
body.eg-flow table.cart,
body.eg-flow table.cart thead,
body.eg-flow table.cart tbody,
body.eg-flow table.cart tr,
body.eg-flow table.cart th,
body.eg-flow table.cart td {
  display: block !important;
  width: auto !important;
  border: 0 !important;
}
body.eg-flow table.cart thead tr,
body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item { display: grid !important; }
/* The responsive sheet also right-aligns every cell and stripes alternate
   rows. Both are for a light stacked table, not this layout. */
body.eg-flow table.shop_table_responsive.cart tbody tr td,
body.eg-flow table.shop_table_responsive.cart tbody tr:nth-child(2n) td {
  background-color: transparent !important;
  text-align: left !important;
}
body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

body.eg-flow table.cart thead tr,
body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) 104px 128px 40px;
  column-gap: 18px;
  row-gap: 2px;
  align-items: center;
}
body.eg-flow table.cart thead tr { row-gap: 0; }
body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item {
  padding: 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item:last-of-type { border-bottom: 0; }

/* WooCommerce's small-screen sheet injects the column name into every cell
   through td::before. On the desktop grid the real column headers are present,
   so those generated labels are suppressed and re-enabled at phone width. */
body.eg-flow table.cart tbody td::before { content: none !important; display: none !important; }

body.eg-flow table.cart thead th {
  padding: 15px 0 !important;
  border-bottom: 0 !important;
}
body.eg-flow table.cart thead tr {
  padding: 0 18px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--eg-line-2);
}
body.eg-flow table.cart thead th.product-name     { grid-column: 2; }
body.eg-flow table.cart thead th.product-price    { display: none !important; }
body.eg-flow table.cart thead th.product-quantity { grid-column: 3; }
body.eg-flow table.cart thead th.product-subtotal { grid-column: 4; text-align: right !important; }
body.eg-flow table.cart thead th.product-remove   { grid-column: 5; }

body.eg-flow table.cart tbody td { padding: 0 !important; border: 0 !important; }
body.eg-flow td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; }
body.eg-flow td.product-name      { grid-column: 2; grid-row: 1; }
body.eg-flow td.product-price     { grid-column: 2; grid-row: 2; }
body.eg-flow td.product-quantity  { grid-column: 3; grid-row: 1 / span 2; }
body.eg-flow td.product-subtotal  { grid-column: 4; grid-row: 1 / span 2; text-align: right !important; }
body.eg-flow td.product-remove    { grid-column: 5; grid-row: 1 / span 2; }

body.eg-flow td.product-thumbnail a { display: block; }
body.eg-flow td.product-thumbnail img {
  display: block;
  width: 100px !important;
  height: 71px !important;
  max-width: none !important;
  object-fit: cover;
  border: 1px solid var(--eg-line);
  border-radius: 0 !important;
}
/* Product title + the chosen event as a second line. */
body.eg-flow .eg-ci__t { display: block; }
body.eg-flow .eg-ci__s {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eg-body) !important;
}
body.eg-flow td.product-name a {
  display: inline-block;
  color: var(--eg-ink) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
  text-decoration: none !important;
  transition: color .25s;
}
body.eg-flow td.product-name a:hover { color: var(--eg-lime) !important; }
body.eg-flow td.product-price { color: var(--eg-mute) !important; }
body.eg-flow td.product-price .woocommerce-Price-amount { font-size: 13px !important; }
/* The chosen event / booking dates — the secondary line under the product
   title. This is the same information the 125-character variation name used to
   carry, shown once and set as its own line so it reads instead of wrapping
   into a hyphenated column of single words. */
body.eg-flow td.product-name .variation,
body.eg-flow td.product-name dl.variation {
  display: block;
  margin: 7px 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--eg-body) !important;
}
body.eg-flow td.product-name dl.variation dt {
  display: inline;
  float: none !important;
  clear: none !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px !important;
  color: var(--eg-mute) !important;
}
body.eg-flow td.product-name dl.variation dd {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--eg-body) !important;
}
body.eg-flow td.product-name dl.variation dd::after { content: ""; display: block; }
body.eg-flow td.product-name dl.variation dd p { display: inline; margin: 0 !important; color: var(--eg-body) !important; }
body.eg-flow .backorder_notification { color: var(--eg-warn) !important; font-size: 12.5px !important; }

body.eg-flow td.product-price .woocommerce-Price-amount { color: var(--eg-body) !important; font-weight: 600 !important; }
body.eg-flow td.product-subtotal .woocommerce-Price-amount {
  color: var(--eg-lime) !important;
  font-size: 22px !important;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800 !important;
}
/* The unit sits under the figure in the subtotal cell so the column stays
   narrow while still spelling the words out in full. */
body.eg-flow td.product-subtotal .eg-unit { display: block; margin: 5px 0 0; }
body.eg-flow td.product-price .eg-unit { margin-left: 6px; }

/* Quantity.
   The theme builds this as a 54px box with the number input on the left and a
   26px absolutely-positioned plus/minus stack on the right, drawn with two 2px
   pseudo-element bars. That geometry is fine and is left alone; fighting the
   absolute positioning only produced a broken hybrid. What was wrong was
   purely colour — an #ebebeb wrapper with #fff buttons on a black page. */
body.eg-flow td.product-quantity .quantity { margin: 0 !important; }
body.eg-flow .quantity .label-qty,
body.eg-flow .quantity label.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper {
  height: 44px !important;
  background-color: #060606 !important;
  border: 1px solid var(--eg-line-2) !important;
  border-radius: 0 !important;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper:hover,
body.eg-flow .quantity-wrapper:focus-within { border-color: var(--eg-lime) !important; }
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper .qty {
  background: transparent !important;
  border: 0 !important;
  color: var(--eg-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span {
  background-color: #151515 !important;
  border-color: var(--eg-line) !important;
  transition: background-color .25s;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:before,
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:after {
  background-color: var(--eg-body) !important;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:hover {
  background-color: var(--eg-lime) !important;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:hover:before,
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:hover:after {
  background-color: #0A0A0A !important;
}
body.eg-flow.eg-flow table.shop_table td.product-quantity .quantity .quantity-wrapper span:active {
  background-color: #0A0A0A !important;
}

/* Remove control.
   The theme sets a.remove to font-size:0 / colour:transparent and draws a
   "flaticon" webfont glyph in ::before. Re-showing the real × without
   removing that glyph rendered BOTH — a visible "xx". The webfont dependency
   is dropped and the actual character is used. */
body.eg-flow td.product-remove { text-align: right !important; }
body.eg-flow.eg-flow .woocommerce a.remove,
body.eg-flow td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
  color: var(--eg-mute) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color .22s, border-color .22s, background .22s;
}
body.eg-flow.eg-flow .woocommerce a.remove:before,
body.eg-flow td.product-remove a.remove:before { content: none !important; display: none !important; }
body.eg-flow.eg-flow .woocommerce a.remove:hover,
body.eg-flow td.product-remove a.remove:hover,
body.eg-flow td.product-remove a.remove:focus {
  background: transparent !important;
  border-color: var(--eg-warn) !important;
  color: var(--eg-warn) !important;
}

/* Actions row */
body.eg-flow table.cart tbody tr:not(.woocommerce-cart-form__cart-item) { display: block; }
body.eg-flow td.actions {
  display: block !important;
  padding: 20px 18px !important;
  border-top: 1px solid var(--eg-line) !important;
  border-bottom: 0 !important;
  text-align: right !important;
}
body.eg-flow td.actions::before { content: none !important; }
body.eg-flow td.actions .coupon {
  display: flex;
  gap: 10px;
  float: none !important;
  margin: 0 0 14px;
}
body.eg-flow td.actions .coupon input#coupon_code {
  width: auto !important;
  min-width: 200px;
  margin: 0 !important;
}
body.eg-flow td.actions button.button,
body.eg-flow td.actions input.button {
  float: none !important;
  padding: 12px 24px !important;
  background: transparent !important;
  border: 1px solid rgba(189,255,62,.45) !important;
  border-radius: 0 !important;
  color: var(--eg-lime) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  transition: background .25s, color .25s;
}
body.eg-flow td.actions button.button:hover,
body.eg-flow td.actions input.button:hover {
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
}
body.eg-flow td.actions button.button:disabled,
body.eg-flow td.actions button.button[disabled] {
  opacity: 1 !important;
  border-color: var(--eg-line) !important;
  color: var(--eg-mute) !important;
  cursor: not-allowed;
}

/* Summary column ---------------------------------------------------------- */
body.eg-flow .cart-collaterals {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  position: sticky;
  top: 108px;
}
body.eg-flow .cart-collaterals .cross-sells { display: none !important; }
body.eg-flow .cart_totals {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 26px 24px 24px !important;
  border-top: 3px solid var(--eg-lime) !important;
}
/* The theme prints its own "Cart totals" title AND WooCommerce prints a bare
   <h2> with the same words. The theme's is kept and turned into the section
   eyebrow; WooCommerce's duplicate is removed. */
body.eg-flow .cart_totals > h2 { display: none !important; }
body.eg-flow .cart_totals .title-wrapper { margin: 0 0 18px !important; padding: 0 0 14px !important; border-bottom: 1px solid var(--eg-line); overflow: visible !important; }
/* The theme underlines this title with a skewed 8px slab. The section eyebrows
   everywhere else in the club styling use a hairline rule, not a slab. */
body.eg-flow .cart_totals .title-wrapper:before { content: none !important; display: none !important; }
body.eg-flow .cart_totals .title-wrapper h2.title,
body.eg-flow .cart_totals .title-wrapper .title {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--eg-lime) !important;
}
body.eg-flow .cart_totals table.shop_table { min-width: 0 !important; }
body.eg-flow .cart_totals table.shop_table th {
  width: 45%;
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: var(--eg-mute) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  vertical-align: middle !important;
}
body.eg-flow .cart_totals table.shop_table td {
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: var(--eg-body) !important;
  text-align: right !important;
  vertical-align: middle !important;
}
body.eg-flow .cart_totals tr.order-total th,
body.eg-flow .cart_totals tr.order-total td { border-bottom: 0 !important; padding-bottom: 4px !important; }
body.eg-flow .cart_totals tr.order-total th { color: var(--eg-ink) !important; font-size: 11px !important; }
body.eg-flow .cart_totals tr.order-total .woocommerce-Price-amount {
  color: var(--eg-lime) !important;
  font-size: 30px !important;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800 !important;
}
body.eg-flow .cart_totals tr.order-total .eg-unit { display: block; margin: 4px 0 0; text-align: right; }
body.eg-flow .cart_totals .woocommerce-shipping-destination,
body.eg-flow .cart_totals .shipping-calculator-button,
body.eg-flow .cart_totals .includes_tax { color: var(--eg-mute) !important; font-size: 12.5px !important; }

body.eg-flow .wc-proceed-to-checkout { padding: 20px 0 0 !important; }
body.eg-flow .wc-proceed-to-checkout a.checkout-button,
body.eg-flow a.checkout-button.button.alt {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 17px 24px !important;
  background: var(--eg-lime) !important;
  border: 1px solid var(--eg-lime) !important;
  border-radius: 0 !important;
  color: #0A0A0A !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background .28s, color .28s;
}
body.eg-flow .wc-proceed-to-checkout a.checkout-button:hover,
body.eg-flow a.checkout-button.button.alt:hover {
  background: transparent !important;
  color: var(--eg-lime) !important;
}
/* Stripe's express-checkout buttons render here and on checkout. Left to
   Stripe entirely apart from spacing — the widgets are iframes and restyling
   their internals is neither possible nor safe. */
body.eg-flow #wc-stripe-express-checkout-element,
body.eg-flow .wc-stripe-express-checkout__container { margin-top: 14px !important; }
body.eg-flow #wc-stripe-express-checkout-button-separator,
body.eg-flow .wc-stripe-express-checkout-button-separator {
  margin: 16px 0 !important;
  color: var(--eg-mute) !important;
  font-size: 10.5px !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. CART — empty
   The WooCommerce session here is 30 minutes rather than the 48-hour default,
   so this is a state members reach in normal use, not an edge case.
   -------------------------------------------------------------------------- */
body.eg-flow.eg-cart-empty #main-content > .woocommerce { max-width: 760px; }
body.eg-flow .eg-co-empty {
  margin: 0;
  padding: 40px 38px 38px;
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line);
  border-top: 3px solid var(--eg-lime);
}
body.eg-flow .eg-co-empty__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eg-lime) !important;
}
body.eg-flow .eg-co-empty__t {
  margin: 0 0 14px !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--eg-ink) !important;
}
body.eg-flow .eg-co-empty__b {
  margin: 0 0 26px !important;
  max-width: 56ch;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: var(--eg-body) !important;
}
body.eg-flow .eg-co-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.eg-flow .eg-co-empty__foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 26px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid var(--eg-line);
  font-size: 13.5px !important;
  color: var(--eg-body) !important;
}
body.eg-flow .eg-co-empty__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-co-empty__foot strong {
  color: var(--eg-lime) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.eg-flow .eg-co-empty__foot a {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eg-lime) !important;
  text-decoration: none !important;
}
body.eg-flow .eg-co-empty__foot a:hover { text-decoration: underline !important; }
/* The stock "Return to shop" link stays; it becomes the quiet third action. */
body.eg-flow p.return-to-shop { margin: 22px 0 0 !important; }
body.eg-flow p.return-to-shop a.button {
  display: inline-block !important;
  padding: 13px 24px !important;
  background: transparent !important;
  border: 1px solid var(--eg-line-2) !important;
  border-radius: 0 !important;
  color: var(--eg-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color .25s, border-color .25s;
}
body.eg-flow p.return-to-shop a.button:hover { color: var(--eg-lime) !important; border-color: var(--eg-lime) !important; }
body.eg-flow.eg-cart-empty .wc-empty-cart-message { margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   8. CHECKOUT — layout
   .eg-co-grid / .eg-co-main / .eg-co-side are opened by the mu-plugin using
   WooCommerce's own form-checkout hooks; see the note there for why the
   two-column layout cannot be done on form.checkout directly.
   -------------------------------------------------------------------------- */
body.eg-flow .eg-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: 30px;
  row-gap: 26px;
  align-items: start;
}
body.eg-flow .eg-co-main { min-width: 0; }
body.eg-flow form.checkout { margin: 0 !important; }

/* The order summary is the panel; the heading lives inside it.
   MEASURED, not assumed: the theme ships
     body.woocommerce-checkout #order_review_heading,
     body.woocommerce-checkout #order_review { width: calc(50% - 33px); float: right; }
   with a companion rule that resets it to 100% — but only when #order_review is
   a DIRECT child of form.checkout. Wrapping it for the two-column layout took
   it out of that selector, so the float stayed and the panel collapsed to
   167px inside a 420px column: "Place order" broke across two lines, the
   gateway label wrapped, and "Garage Points" split in the totals. Both are
   neutralised explicitly here. */
body.eg-flow.eg-flow #order_review_heading,
body.eg-flow.eg-flow #order_review {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
body.eg-flow .eg-co-side {
  min-width: 0;
  position: sticky;
  top: 108px;
  padding: 24px 26px 26px !important;
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  border-top: 3px solid var(--eg-lime) !important;
}
body.eg-flow .eg-co-side #order_review {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Billing details: the child theme strips every billing field on purpose, so
   WooCommerce is left printing a heading above an empty wrapper. The fields
   are NOT restored — the orphan is simply not shown. */
body.eg-flow.eg-co-nobilling .woocommerce-billing-fields,
body.eg-flow.eg-co-nobilling .woocommerce-billing-fields > h3,
body.eg-flow.eg-co-nobilling .col2-set > .col-1 { display: none !important; }
body.eg-flow .col2-set,
body.eg-flow #customer_details { display: block !important; width: 100% !important; margin: 0 !important; }
body.eg-flow .col2-set > .col-1,
body.eg-flow .col2-set > .col-2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
body.eg-flow .woocommerce-shipping-fields:empty { display: none !important; }
body.eg-flow wc-order-attribution-inputs { display: none !important; }

/* Distance / points information — the Custom Points System prints this with
   inline styles (a cream #fffbe6 panel and a #d63638 note) that were written
   for a light page. An author !important outranks a non-important inline
   declaration, which is why these carry it. */
body.eg-flow #cps-distance-points-info {
  margin: 0 0 26px !important;
  padding: 26px 26px 24px !important;
  border-top: 3px solid var(--eg-lime) !important;
}
body.eg-flow.eg-flow #cps-distance-points-info h3,
body.eg-flow.eg-flow .woocommerce-distance-info h3 {
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--eg-line);
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--eg-lime) !important;
}
body.eg-flow.eg-flow #cps-distance-points-info .points-explanation {
  font-style: normal !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eg-body) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: 68ch;
}
/* The Custom Points System ships these as #eeeeee slabs inside a near-white
   card. The contrast sweep measured the copy inside them at 1.46:1. Every one
   of that sheet's colours is restated here. */
body.eg-flow.eg-flow #cps-distance-points-info,
body.eg-flow.eg-flow .woocommerce-distance-info {
  background-color: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  border-top: 3px solid var(--eg-lime) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eg-body) !important;
}
/* ONE panel, not four boxes.
   The plugin ships this as a cream card containing a bordered note plus two
   individually bordered #eeeeee blocks and a red footnote — four stacked
   rectangles for one short piece of guidance, and the two "will be calculated"
   blocks looked like empty form controls even though they are read-only status
   readouts the plugin's JS writes into. The ids and classes are preserved
   exactly (delivery-pickup.js targets them); only the boxing is removed, so
   the charge explanation reads as body copy and the two readouts as quiet
   status lines. */
body.eg-flow.eg-flow #delivery-distance-info,
body.eg-flow.eg-flow #pickup-distance-info {
  position: relative;
  margin: 0 !important;
  padding: 7px 0 7px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--eg-body) !important;
}
body.eg-flow.eg-flow #delivery-distance-info::before,
body.eg-flow.eg-flow #pickup-distance-info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 1px;
  background: var(--eg-lime);
}
body.eg-flow.eg-flow #delivery-distance-info p,
body.eg-flow.eg-flow #pickup-distance-info p {
  margin: 0 !important;
  color: var(--eg-mute) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
body.eg-flow.eg-flow #delivery-distance-info strong,
body.eg-flow.eg-flow #pickup-distance-info strong { color: var(--eg-lime) !important; font-size: 1em !important; }
body.eg-flow.eg-flow .woocommerce-distance-info .error {
  padding: 14px 16px !important;
  background-color: #1A1010 !important;
  border-radius: 0 !important;
  color: var(--eg-warn) !important;
}
body.eg-flow #cps-distance-points-info p {
  margin: 0 0 8px !important;
  color: var(--eg-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
/* Informational, not an error state: the plugin sets it #d63638 with an
   italic face, which reads as a failure and measures 4.0:1 on the panel. */
body.eg-flow.eg-flow #cps-distance-points-info #delivery-distance-info { margin-top: 10px !important; padding-top: 13px !important; border-top: 1px solid var(--eg-line) !important; }
body.eg-flow.eg-flow #cps-distance-points-info .distance-note {
  margin: 12px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--eg-line) !important;
  color: var(--eg-mute) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}
body.eg-flow #cps-distance-points-info strong { color: var(--eg-ink) !important; }

/* Additional information / delivery + pickup fields */
body.eg-flow .woocommerce-additional-fields {
  margin: 0 !important;
  padding: 26px 26px 8px !important;
  border-top: 3px solid var(--eg-lime) !important;
}
body.eg-flow .woocommerce-additional-fields > h3,
body.eg-flow .woocommerce-shipping-fields > h3,
body.eg-flow .wcdp-section-heading {
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--eg-line);
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--eg-lime) !important;
}
body.eg-flow .wcdp-section-heading { margin-top: 30px !important; }
body.eg-flow .wcdp-info-box {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
  padding: 15px 18px;
  background: #0A0A0A !important;
  border: 1px solid var(--eg-line);
  border-left: 3px solid var(--eg-lime);
}
body.eg-flow .wcdp-info-icon,
body.eg-flow .wcdp-info-icon i { color: var(--eg-lime) !important; }
body.eg-flow .wcdp-info-text {
  margin: 0 !important;
  color: var(--eg-body) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* --------------------------------------------------------------------------
   9. Form controls — same treatment as the account area
   -------------------------------------------------------------------------- */
body.eg-flow .woocommerce form .form-row,
body.eg-flow .woocommerce .form-row,
body.eg-flow form.checkout .form-row {
  margin: 0 0 20px !important;
  padding: 0 !important;
}
body.eg-flow .form-row-first,
body.eg-flow .form-row-last {
  width: calc(50% - 8px) !important;
  float: none !important;
  display: inline-block;
  vertical-align: top;
}
body.eg-flow .form-row-first { margin-right: 12px !important; }
body.eg-flow .woocommerce form .form-row label,
body.eg-flow .woocommerce .form-row label,
body.eg-flow form.checkout .form-row label {
  display: block !important;
  margin-bottom: 9px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--eg-mute) !important;
}
body.eg-flow .woocommerce .form-row label .optional,
body.eg-flow .woocommerce .optional { color: var(--eg-mute) !important; text-transform: none; letter-spacing: .04em; }
body.eg-flow .woocommerce .required,
body.eg-flow .woocommerce abbr.required {
  color: var(--eg-lime) !important;
  border: 0 !important;
  text-decoration: none !important;
}
body.eg-flow .woocommerce .input-text,
body.eg-flow .woocommerce input[type="text"],
body.eg-flow .woocommerce input[type="email"],
body.eg-flow .woocommerce input[type="tel"],
body.eg-flow .woocommerce input[type="number"],
body.eg-flow .woocommerce input[type="password"],
body.eg-flow .woocommerce select,
body.eg-flow .woocommerce textarea,
body.eg-flow form.checkout select,
body.eg-flow form.checkout textarea,
body.eg-flow .select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 14px 16px !important;
  background: #060606 !important;
  border: 1px solid var(--eg-line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eg-ink) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  transition: border-color .25s, background .25s;
}
body.eg-flow .woocommerce textarea, body.eg-flow form.checkout textarea { min-height: 96px; }
body.eg-flow .woocommerce .input-text:focus,
body.eg-flow .woocommerce input:focus,
body.eg-flow .woocommerce select:focus,
body.eg-flow .woocommerce textarea:focus {
  background: #0B0B0B !important;
  border-color: var(--eg-lime) !important;
  outline: none !important;
}
body.eg-flow .woocommerce ::placeholder { color: #7A7A7A !important; opacity: 1; }
body.eg-flow .woocommerce select option { background: #0A0A0A; color: var(--eg-ink); }
/* Native select arrows are invisible on a dark control in several browsers, so
   the chevron is drawn explicitly. appearance:none removes the native one so
   there is never a doubled marker. */
body.eg-flow .woocommerce select,
body.eg-flow form.checkout select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23BDFF3E' stroke-width='1.7' d='M1 1.6 6 6.6l5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
/* Select2 (state dropdowns) */
body.eg-flow .select2-container--default .select2-selection--single { height: auto !important; }
body.eg-flow .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4 !important;
  color: var(--eg-ink) !important;
}
body.eg-flow .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7A7A7A !important; }
body.eg-flow .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: 10px !important; }
body.eg-flow .woocommerce-input-wrapper { display: block; }
body.eg-flow .woocommerce-input-wrapper > .description,
body.eg-flow form.checkout .description,
body.eg-flow form.checkout em,
body.eg-flow form.checkout small { color: var(--eg-mute) !important; font-size: 12.5px !important; line-height: 1.6 !important; }
body.eg-flow .woocommerce-invalid input.input-text,
body.eg-flow .woocommerce-invalid select { border-color: var(--eg-warn) !important; }
body.eg-flow .woocommerce-validated input.input-text { border-color: rgba(189,255,62,.45) !important; }
body.eg-flow input[type="checkbox"],
body.eg-flow input[type="radio"] { accent-color: var(--eg-lime); }

/* --------------------------------------------------------------------------
   10. CHECKOUT — order review
   -------------------------------------------------------------------------- */
body.eg-flow #order_review_heading {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--eg-line);
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--eg-lime) !important;
}
body.eg-flow #order_review {
  padding: 22px 24px 24px !important;
  border-top: 3px solid var(--eg-lime) !important;
}
body.eg-flow .woocommerce-checkout-review-order-table { min-width: 0 !important; }
body.eg-flow.eg-flow .woocommerce-checkout-review-order-table th.product-name,
body.eg-flow.eg-flow .woocommerce-checkout-review-order-table td.product-name { width: auto !important; }
body.eg-flow .woocommerce-checkout-review-order-table th.product-total,
body.eg-flow .woocommerce-checkout-review-order-table td.product-total,
body.eg-flow .woocommerce-checkout-review-order-table tfoot td { white-space: nowrap !important; }
body.eg-flow .woocommerce-checkout-review-order-table td.product-total .eg-unit,
body.eg-flow .woocommerce-checkout-review-order-table tfoot td .eg-unit { display: block; margin: 4px 0 0; }
body.eg-flow .woocommerce-checkout-review-order-table thead th {
  padding: 0 0 12px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--eg-line) !important;
  padding-left: 0 !important;
}
body.eg-flow .woocommerce-checkout-review-order-table tbody td.product-name { padding-left: 0 !important; }
body.eg-flow .woocommerce-checkout-review-order-table thead th.product-total,
body.eg-flow .woocommerce-checkout-review-order-table tbody td.product-total,
body.eg-flow .woocommerce-checkout-review-order-table tfoot td { text-align: right !important; }
body.eg-flow .woocommerce-checkout-review-order-table tbody td {
  padding: 15px 0 !important;
  font-size: 14px !important;
  color: var(--eg-body) !important;
}
body.eg-flow .woocommerce-checkout-review-order-table tbody td.product-name { color: var(--eg-ink) !important; font-weight: 700; padding-right: 16px !important; }
body.eg-flow .woocommerce-checkout-review-order-table tbody td.product-name .eg-ci__s { font-size: 12.5px; margin-top: 5px; }
body.eg-flow.eg-flow table.shop_table td.product-name .product-quantity,
body.eg-flow.eg-flow strong.product-quantity { color: var(--eg-mute) !important; }
body.eg-flow .woocommerce-checkout-review-order-table strong.product-quantity {
  display: inline-block;
  margin-left: 4px;
  color: var(--eg-mute) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.eg-flow .woocommerce-checkout-review-order-table td.product-total .woocommerce-Price-amount { color: var(--eg-ink) !important; }
body.eg-flow .woocommerce-checkout-review-order-table tfoot th {
  width: 50%;
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  color: var(--eg-mute) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
body.eg-flow .woocommerce-checkout-review-order-table tfoot .order-total th { color: var(--eg-ink) !important; font-size: 11px !important; }
body.eg-flow .woocommerce-checkout-review-order-table tfoot .order-total td { padding-bottom: 2px !important; }
body.eg-flow .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  color: var(--eg-lime) !important;
  font-size: 28px !important;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800 !important;
}
body.eg-flow .woocommerce-checkout-review-order-table tfoot .order-total .eg-unit { display: block; margin: 4px 0 0; }

/* Parking-pass add-on (sc-event-product-creator) */
body.eg-flow .sc-epc-checkout-parking {
  margin: 18px 0 0 !important;
  padding: 15px 16px;
  background: #0A0A0A !important;
  border: 1px solid var(--eg-line);
}
body.eg-flow .sc-epc-checkout-parking label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--eg-body) !important;
  cursor: pointer;
}
body.eg-flow .sc-epc-checkout-parking input[type="checkbox"] { width: 16px; height: 16px; margin: 0 !important; flex: none; }

/* --------------------------------------------------------------------------
   11. Payment methods
   The gateway list, its inputs, labels and payment boxes are WooCommerce's and
   the gateways' own markup — only colour, spacing and borders are touched.
   Nothing here reorders, renames, hides or restructures a gateway, and no
   rule touches the inside of a Stripe element (they are cross-origin iframes).
   -------------------------------------------------------------------------- */
body.eg-flow #payment,
body.eg-flow .woocommerce-checkout-payment {
  margin-top: 22px !important;
  padding: 20px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
}
body.eg-flow #payment ul.payment_methods,
body.eg-flow ul.wc_payment_methods {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
}
body.eg-flow ul.wc_payment_methods > li,
body.eg-flow #payment ul.payment_methods > li {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: #0A0A0A !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
  list-style: none !important;
  transition: border-color .25s;
}
body.eg-flow ul.wc_payment_methods > li::before,
body.eg-flow ul.wc_payment_methods > li::marker { content: none !important; }
body.eg-flow ul.wc_payment_methods > li:hover { border-color: var(--eg-line-2) !important; }
body.eg-flow ul.wc_payment_methods > li > label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 16px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--eg-ink) !important;
  cursor: pointer;
}
body.eg-flow ul.wc_payment_methods > li > input.input-radio {
  margin: 0 0 0 18px !important;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
/* The radio is a sibling of its label, so the checked state is styled through
   the adjacent-sibling combinator rather than :has(). */
body.eg-flow ul.wc_payment_methods > li > input.input-radio:checked + label { color: var(--eg-lime) !important; }
body.eg-flow ul.wc_payment_methods > li > label img {
  max-height: 24px;
  width: auto;
  margin: 0 0 0 auto;
  border-radius: 0 !important;
}
body.eg-flow ul.wc_payment_methods > li .payment_box {
  margin: 0 !important;
  padding: 0 18px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  color: var(--eg-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
body.eg-flow ul.wc_payment_methods > li .payment_box::before,
body.eg-flow ul.wc_payment_methods > li .payment_box::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
body.eg-flow .payment_box p { margin: 14px 0 0 !important; color: var(--eg-body) !important; font-size: 14px !important; line-height: 1.7 !important; }
body.eg-flow .payment_box a { color: var(--eg-lime) !important; font-weight: 700; text-decoration: none !important; }
body.eg-flow .payment_box a:hover { text-decoration: underline !important; }
body.eg-flow .payment_box .cps-points-balance-inline,
body.eg-flow .cps-points-balance-inline {
  color: var(--eg-lime) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Stripe's own containers: give them room and a dark surround, but never
   touch what Stripe mounts inside — those are cross-origin iframes. */
body.eg-flow .payment_box .wc-stripe-upe-element,
body.eg-flow .payment_box #wc-stripe-upe-form,
body.eg-flow .payment_box .wc-stripe-elements-field,
body.eg-flow .payment_box .woocommerce-SavedPaymentMethods { margin-top: 14px !important; }
body.eg-flow .woocommerce-SavedPaymentMethods-token label,
body.eg-flow .woocommerce-SavedPaymentMethods li label {
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--eg-body) !important;
}

/* Place order */
body.eg-flow .form-row.place-order,
body.eg-flow #payment .form-row {
  margin: 20px 0 0 !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid var(--eg-line) !important;
}
body.eg-flow .woocommerce-terms-and-conditions-wrapper { margin: 0 0 18px; }
body.eg-flow .woocommerce-privacy-policy-text p,
body.eg-flow .woocommerce-terms-and-conditions-wrapper p {
  margin: 0 !important;
  color: var(--eg-mute) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}
body.eg-flow .woocommerce-privacy-policy-text a,
body.eg-flow .woocommerce-terms-and-conditions-wrapper a { color: var(--eg-lime) !important; text-decoration: none !important; }
body.eg-flow .woocommerce-privacy-policy-text a:hover { text-decoration: underline !important; }
body.eg-flow #place_order,
body.eg-flow button#place_order.button.alt {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  background: var(--eg-lime) !important;
  border: 1px solid var(--eg-lime) !important;
  border-radius: 0 !important;
  color: #0A0A0A !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background .28s, color .28s;
}
body.eg-flow #place_order:hover,
body.eg-flow button#place_order.button.alt:hover { background: transparent !important; color: var(--eg-lime) !important; }
body.eg-flow #payment .form-row noscript {
  display: block;
  margin-bottom: 14px;
  color: var(--eg-body) !important;
  font-size: 13px !important;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. "Not enough Garage Points"
   Rendered by WooCommerce inside the payment list when no gateway is
   available. The sentence itself is set in the child theme and is not changed
   here; the mu-plugin appends the numbers and the way forward.
   -------------------------------------------------------------------------- */
body.eg-flow ul.wc_payment_methods > li.woocommerce-notice,
body.eg-flow ul.wc_payment_methods > li.woocommerce-info,
body.eg-flow #payment ul.payment_methods > li > .ketofitt_module_message_box {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.eg-flow .eg-nopay {
  display: block;
  padding: 26px 26px 24px;
  background: #121212 !important;
  border: 1px solid var(--eg-line);
  border-left: 3px solid var(--eg-warn);
}
body.eg-flow .eg-nopay__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--eg-warn) !important;
}
body.eg-flow .eg-nopay__t {
  display: block;
  margin-bottom: 20px;
  max-width: 52ch;
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  text-transform: none !important;
  color: var(--eg-ink) !important;
}
/* Flex, not grid: with three tiles in a 420px sidebar an auto-fit grid makes
   two tracks and leaves a fourth, empty cell showing as a grey block. Flex
   hands the leftover space to the items instead of inventing a track. */
body.eg-flow .eg-nopay__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: 20px;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
}
body.eg-flow .eg-nopay__num {
  display: flex;
  flex: 1 1 128px;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 17px;
  background: #0A0A0A !important;
}
body.eg-flow .eg-nopay__k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-nopay__num strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--eg-ink) !important;
  font-variant-numeric: tabular-nums;
}
body.eg-flow .eg-nopay__num--short strong { color: var(--eg-warn) !important; }
body.eg-flow .eg-nopay__u {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .eg-nopay__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
body.eg-flow .eg-nopay__b {
  display: block;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--eg-mute) !important;
}

/* --------------------------------------------------------------------------
   13. Order received / order pay
   -------------------------------------------------------------------------- */
body.eg-flow .woocommerce-order { max-width: 1080px; }
body.eg-flow .eg-co-head--done { margin-bottom: 30px; }
body.eg-flow p.woocommerce-thankyou-order-received,
body.eg-flow .woocommerce-notice--success {
  margin: 0 0 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--eg-ink) !important;
}
body.eg-flow p.woocommerce-thankyou-order-failed {
  margin: 0 0 20px !important;
  padding: 22px 24px !important;
  background: #121212 !important;
  border: 1px solid var(--eg-line) !important;
  border-left: 3px solid var(--eg-warn) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #EDEDED !important;
}
body.eg-flow p.woocommerce-thankyou-order-failed-actions { display: flex; gap: 12px; margin: 0 0 26px !important; }
body.eg-flow p.woocommerce-thankyou-order-failed-actions a.button,
body.eg-flow .woocommerce-order a.button:not(.checkout-button) {
  display: inline-block !important;
  padding: 13px 24px !important;
  background: transparent !important;
  border: 1px solid rgba(189,255,62,.45) !important;
  border-radius: 0 !important;
  color: var(--eg-lime) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .25s, color .25s;
}
body.eg-flow p.woocommerce-thankyou-order-failed-actions a.button:hover,
body.eg-flow .woocommerce-order a.button:not(.checkout-button):hover { background: var(--eg-lime) !important; color: #0A0A0A !important; }

body.eg-flow ul.woocommerce-order-overview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  background: var(--eg-line) !important;
  border: 1px solid var(--eg-line) !important;
  border-top: 3px solid var(--eg-lime) !important;
  list-style: none !important;
}
body.eg-flow ul.woocommerce-order-overview > li {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 20px 22px 22px !important;
  background: var(--eg-panel) !important;
  border: 0 !important;
  list-style: none !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--eg-mute) !important;
}
body.eg-flow ul.woocommerce-order-overview > li::before,
body.eg-flow ul.woocommerce-order-overview > li::marker { content: none !important; }
/* Same trap as the checkout form: the clearfix pseudo-elements on this list
   become grid items and occupy the first cell, which rendered as an empty
   tile before "Order number". */
body.eg-flow ul.woocommerce-order-overview::before,
body.eg-flow ul.woocommerce-order-overview::after,
body.eg-flow .woocommerce-order::before,
body.eg-flow .woocommerce-order::after,
body.eg-flow .woocommerce-columns--addresses::before,
body.eg-flow .woocommerce-columns--addresses::after { content: none !important; display: none !important; }
body.eg-flow ul.woocommerce-order-overview > li strong {
  font-size: 19px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--eg-ink) !important;
  font-variant-numeric: tabular-nums;
}
body.eg-flow ul.woocommerce-order-overview > li.total strong,
body.eg-flow ul.woocommerce-order-overview > li.total .woocommerce-Price-amount { color: var(--eg-lime) !important; }
/* Order totals on these screens come from order objects that are also used to
   build the transactional emails, so the unit is added here rather than by
   filtering the amount. */
body.eg-flow.woocommerce-order-received .woocommerce-Price-amount::after,
body.eg-flow.woocommerce-order-pay .woocommerce-Price-amount::after {
  content: " Garage Points";
  white-space: nowrap;
  display: inline-block;
  margin-left: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}

body.eg-flow .woocommerce-order-details,
body.eg-flow .woocommerce-customer-details {
  margin: 0 0 26px !important;
  padding: 26px 26px 24px !important;
  border-top: 3px solid var(--eg-lime) !important;
}
body.eg-flow .woocommerce-order-details h2,
body.eg-flow .woocommerce-customer-details h2,
body.eg-flow .woocommerce-column__title,
body.eg-flow .points-used h2 {
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--eg-line);
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--eg-lime) !important;
}
body.eg-flow .woocommerce-table--order-details td.woocommerce-table__product-name,
body.eg-flow .woocommerce-table--order-details th.woocommerce-table__product-name { color: var(--eg-ink) !important; }
body.eg-flow .woocommerce-table--order-details .wc-item-meta,
body.eg-flow .wc-item-meta {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 12.5px !important;
  color: var(--eg-mute) !important;
}
body.eg-flow .wc-item-meta li { margin: 0 0 3px !important; padding: 0 !important; list-style: none !important; color: var(--eg-body) !important; }
body.eg-flow .wc-item-meta li::before, body.eg-flow .wc-item-meta li::marker { content: none !important; }
body.eg-flow .wc-item-meta strong.wc-item-meta-label {
  margin-right: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-flow .wc-item-meta p { display: inline; margin: 0 !important; color: var(--eg-body) !important; }
body.eg-flow .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
body.eg-flow.eg-flow .woocommerce-column address,
body.eg-flow.eg-flow .woocommerce-customer-details address {
  margin: 0 !important;
  padding: 18px 20px !important;
  font-style: normal !important;
  background: #0A0A0A !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
  color: var(--eg-body) !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}
body.eg-flow.eg-flow .woocommerce-customer-details address a,
body.eg-flow.eg-flow .woocommerce-column address a { color: var(--eg-lime) !important; text-decoration: none !important; }
body.eg-flow.eg-flow .woocommerce-customer-details address p { margin: 6px 0 0 !important; color: var(--eg-body) !important; }
body.eg-flow .woocommerce-customer-details--phone::before,
body.eg-flow .woocommerce-customer-details--email::before { color: var(--eg-mute) !important; }
body.eg-flow .points-used {
  margin: 26px 0 0 !important;
  padding: 24px 26px !important;
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line);
  border-left: 3px solid var(--eg-lime);
}
body.eg-flow .points-used p { margin: 0 !important; color: var(--eg-body) !important; font-size: 15px !important; }

/* order-pay: form#order_review is a form, not the review div. */
body.eg-flow.woocommerce-order-pay form#order_review {
  margin: 0 !important;
  padding: 26px 26px 24px !important;
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  border-top: 3px solid var(--eg-lime) !important;
  max-width: 720px;
}
body.eg-flow.woocommerce-order-pay form#order_review table.shop_table thead th { padding-left: 0 !important; padding-right: 0 !important; }
body.eg-flow.woocommerce-order-pay form#order_review table.shop_table tbody td,
body.eg-flow.woocommerce-order-pay form#order_review table.shop_table tfoot th,
body.eg-flow.woocommerce-order-pay form#order_review table.shop_table tfoot td { padding-left: 0 !important; padding-right: 0 !important; }
body.eg-flow.woocommerce-order-pay form#order_review td.product-total,
body.eg-flow.woocommerce-order-pay form#order_review td.product-subtotal { text-align: right !important; color: var(--eg-lime) !important; }
body.eg-flow.woocommerce-order-pay form#order_review tfoot th { color: var(--eg-mute) !important; font-size: 10.5px !important; letter-spacing: .18em; text-transform: uppercase; text-align: left !important; }

/* --------------------------------------------------------------------------
   14. Odds and ends the theme leaves light
   -------------------------------------------------------------------------- */
/* WooCommerce's AJAX overlay is white by default and flashes over the panel
   on every quantity change and order-review refresh. */
body.eg-flow .blockUI.blockOverlay { background: #0A0A0A !important; opacity: .55 !important; }
body.eg-flow .blockUI.blockOverlay::before {
  border-color: var(--eg-lime) !important;
  border-right-color: transparent !important;
}
body.eg-flow .woocommerce-info a.button,
body.eg-flow .woocommerce-message a.button { margin-left: 12px; }
body.eg-flow .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.eg-flow.eg-cart-filled #main-content > .woocommerce { grid-template-columns: minmax(0, 1fr) 310px; }
  body.eg-flow .eg-co-grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 24px; }
}
@media (max-width: 900px) {
  body.eg-flow.eg-cart-filled #main-content > .woocommerce { grid-template-columns: minmax(0, 1fr); }
  body.eg-flow.eg-cart-filled #main-content > .woocommerce > form.woocommerce-cart-form,
  body.eg-flow.eg-cart-filled #main-content > .woocommerce > .cart-collaterals { grid-column: 1; }
  body.eg-flow .eg-co-grid { grid-template-columns: minmax(0, 1fr); }
  body.eg-flow .cart-collaterals,
  body.eg-flow .eg-co-side { position: static; }
  body.eg-flow .eg-co-head__bar { justify-content: flex-start; }
  body.eg-flow .eg-co-head__note { text-align: left; width: 100%; }
}
@media (max-width: 782px) {
  body.eg-flow #main { padding-bottom: 64px !important; }
  body.eg-flow #main > .wgl-container { padding-left: 20px !important; padding-right: 20px !important; }
  body.eg-flow .eg-co-stats { grid-template-columns: minmax(0, 1fr); }
  body.eg-flow .eg-co-empty { padding: 30px 22px 28px; }
  body.eg-flow .eg-co-empty__actions .eg-co-btn { flex: 1 1 auto; }
  body.eg-flow #cps-distance-points-info,
  body.eg-flow .woocommerce-additional-fields,
  body.eg-flow #order_review,
  body.eg-flow .cart_totals,
  body.eg-flow .woocommerce-order-details,
  body.eg-flow .woocommerce-customer-details,
  body.eg-flow.woocommerce-order-pay form#order_review { padding-left: 20px !important; padding-right: 20px !important; }
  body.eg-flow .form-row-first,
  body.eg-flow .form-row-last { width: 100% !important; margin-right: 0 !important; }
}
@media (max-width: 640px) {
  body.eg-flow .eg-co-step { padding-right: 14px; font-size: 10px; letter-spacing: .14em; }
  body.eg-flow .eg-co-step + .eg-co-step { padding-left: 14px; }
  body.eg-flow .eg-co-stat__v { font-size: 28px; }
  body.eg-flow .eg-co-empty__t { font-size: 26px !important; }
  body.eg-flow .eg-co-empty__foot a { margin-left: 0; }
  body.eg-flow ul.wc_payment_methods > li > label { font-size: 11px !important; letter-spacing: .12em !important; }

}

/* --------------------------------------------------------------------------
   16. Cart line rows on a phone
   The same grid, restacked: artwork down the left, everything else in one
   column beside it, remove pinned to the top right. The column headers go —
   at this width each value labels itself.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body.eg-flow table.cart thead { display: none !important; }
  body.eg-flow table.cart tbody tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 92px minmax(0, 1fr) 40px;
    column-gap: 14px;
    row-gap: 10px;
    align-items: start;
    padding: 18px 16px;
  }
  body.eg-flow td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  body.eg-flow td.product-thumbnail img { width: 92px !important; height: 66px !important; }
  body.eg-flow td.product-name     { grid-column: 2; grid-row: 1; }
  body.eg-flow td.product-price    { grid-column: 2; grid-row: 2; }
  body.eg-flow td.product-quantity { grid-column: 2; grid-row: 3; }
  body.eg-flow td.product-subtotal { grid-column: 2 / span 2; grid-row: 4; text-align: left !important; }
  body.eg-flow td.product-remove   { grid-column: 3; grid-row: 1; justify-self: end; }
  body.eg-flow td.product-name a { font-size: 16px !important; }
  body.eg-flow td.product-subtotal .woocommerce-Price-amount { font-size: 26px !important; }
  body.eg-flow td.product-subtotal .eg-unit { display: inline-block; margin: 0 0 0 6px; }
  body.eg-flow td.actions { text-align: left !important; }
  body.eg-flow td.actions button.button { width: 100%; }
}

/* ==========================================================================
   Order-summary width — appended 2026-08-07
   The panel was 420px, which the order table then splits into a name column
   and a total column, leaving the product name roughly 180px. These names
   encode the event and its date ("Ball Arena Concert Box Seats - J. Cole: The
   Fall-Off Tour - Aug 21, 2026 (8:00 pm)"), so long is the NORMAL case here,
   not an edge case — the title broke mid-phrase across two lines with the
   event spilling onto two more.

   The smaller breakpoints are restated BELOW the new default deliberately:
   this block is appended to the end of the sheet, after the existing
   @media rules, so a bare default declared here would out-order them and win
   at every width. Re-declaring keeps the responsive ladder intact.
   ========================================================================== */
body.eg-flow .eg-co-grid { grid-template-columns: minmax(0, 1fr) 480px; }
@media (max-width: 1180px) {
  body.eg-flow .eg-co-grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 24px; }
}
@media (max-width: 900px) {
  body.eg-flow .eg-co-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The unit label must never break away from its figure. */
body.eg-flow .eg-unit { white-space: nowrap; }
/* The currency symbol is filtered to an empty string site-wide, so the span
   renders empty; make sure it can never occupy space or show a stray mark. */
body.eg-flow .woocommerce-Price-currencySymbol { display: none !important; }