/* ==========================================================================
   The Golden Space — WooCommerce checkout & cart styling
   A cohesive, branded checkout that matches the site's design system.
   Loaded only on WooCommerce pages (see inc/enqueue.php).

   Design language: navy + cream + gold, Bricolage display / Karla body,
   soft rounded panels, generous spacing, calm and premium.

   High specificity + targeted !important override WooCommerce's default
   stylesheet where necessary.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell — clear the fixed header, sit on the cream band

   NOTE: We anchor on the .woocommerce wrapper and the checkout form — which
   are ALWAYS present on WooCommerce pages — rather than body.woocommerce-*
   classes, because some page setups (e.g. checkout via shortcode on a plain
   page) don't add those body classes. This makes the styling reliable.
   -------------------------------------------------------------------------- */

/* Cream background on any page that contains WooCommerce content. */
body:has(.woocommerce) {
  background: var(--cream);
}

/* Fallback for browsers without :has() — target the wrapper itself. */
.woocommerce {
  background: var(--cream);
}

/* Clear the fixed header. page.php now adds .is-woocommerce-page to the
   section wrapping WooCommerce content, so we can target it precisely. We also
   keep :has() fallbacks for robustness. */
.band-cream.is-woocommerce-page {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) !important;
  padding-bottom: clamp(3rem, 7vw, 6rem) !important;
}
main:has(> .woocommerce),
main:has(.woocommerce),
#main:has(.woocommerce),
.site-main:has(.woocommerce) {
  padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 2rem));
  box-sizing: border-box;
}

/* Constrain and center WooCommerce content. Inside the theme's .shell wrapper
   (page.php now uses full .shell for WooCommerce pages), so here we just make
   the .woocommerce block fill the available width — no second max-width that
   would squeeze it. */
.woocommerce {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  float: none !important;
  box-sizing: border-box;
}
/* When the checkout is NOT inside a .shell (fallback), give it the shell width. */
main:not(:has(.shell)) > .woocommerce,
body:not(.page) .woocommerce {
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter);
}

/* Page title ("Checkout" / "Cart") — match section headings. */
body.woocommerce-checkout #main > .woocommerce > h1,
body.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. Coupon toggle bar
   -------------------------------------------------------------------------- */
/* Coupon field is intentionally hidden at checkout — the discount is baked
   into the class price, and staff apply any coupons in admin. This also
   removes the odd coupon-toggle icon. */
.woocommerce-form-coupon-toggle,
.checkout_coupon,
form.checkout .woocommerce-form-coupon-toggle {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Two-column checkout grid: details left, order summary right
   -------------------------------------------------------------------------- */
/* WooCommerce's default CSS floats #customer_details and #order_review at ~47%
   width each. We override with a grid. The !important and explicit widths are
   necessary to beat WooCommerce's own stylesheet. */
form.checkout,
form.checkout.woocommerce-checkout,
.woocommerce form.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
  grid-template-rows: auto auto auto !important;
  gap: 0 clamp(1.5rem, 4vw, 3rem) !important;
  align-items: start !important;
  align-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

#customer_details {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  align-self: start !important;
  float: none !important;
  margin: 0 !important;
}

/* Kill WooCommerce's internal side-by-side split; stack full width. */
#customer_details .col2-set,
#customer_details > .col-1,
#customer_details > .col-2,
.woocommerce-billing-fields,
.woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
}

/* Billing + Additional info as stacked cards. */
.woocommerce-billing-fields,
.woocommerce-additional-fields {
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
  margin-bottom: 1.5rem !important;
}

/* Since order notes are removed, the additional-fields section is empty —
   hide it entirely so it doesn't render as an empty white box. Same for the
   account-fields section (guest checkout, no account creation). */
.woocommerce-additional-fields,
.woocommerce-account-fields,
.woocommerce-additional-fields:empty,
#customer_details .woocommerce-additional-fields {
  display: none !important;
}

/* Remove the privacy-policy / personal-data text under the payment box. */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text,
form.checkout .woocommerce-privacy-policy-text {
  display: none !important;
}

/* Section headings inside checkout. */
#customer_details h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--navy-line);
}

/* --------------------------------------------------------------------------
   4. Form fields — branded inputs
   -------------------------------------------------------------------------- */
/* With the checkout trimmed to First/Last name + Phone + Email, lay the name
   fields side by side and phone/email full width. Works with WooCommerce's
   form-row-first / form-row-last / form-row-wide classes. */
.woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout #billing_first_name_field {
  grid-column: 1;
}
.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout #billing_last_name_field {
  grid-column: 2;
}
.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_email_field {
  grid-column: 1 / -1;
}

.form-row {
  margin: 0 0 1.1rem !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}
.form-row label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  color: var(--navy);
  font-size: .9rem;
}
.form-row .required { color: var(--gold); border: 0; text-decoration: none; }
.form-row .optional { color: var(--navy-muted); }

input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container .select2-selection {
  width: 100% !important;
  padding: .8rem .95rem !important;
  border: 1px solid var(--navy-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent) !important;
  outline: none !important;
}
.woocommerce-checkout textarea {
  min-height: 5.5rem;
  resize: vertical;
}
/* Select2 dropdown alignment. */
.select2-container .select2-selection--single {
  height: auto !important;
  display: flex;
  align-items: center;
}
.select2-container .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4 !important;
  color: var(--navy);
}
.select2-container .select2-selection__arrow {
  height: 100% !important;
}

/* --------------------------------------------------------------------------
   5. Order summary — the right-hand card
   -------------------------------------------------------------------------- */
/* The heading sits directly above its card. To avoid the tall left column
   (#customer_details, spanning rows 1-2) stretching row 1 and creating a gap
   between the heading and the card, we pull the card up flush to the heading
   with a negative safety and rely on align-self:start. */
#order_review_heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  border-bottom: 0;
  margin: 0 0 .75rem !important;
  line-height: 1.1;
}
#order_review {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-sizing: border-box;
}
/* KEY: make row 1 (the heading row) only as tall as the heading, so the card
   in row 2 sits right beneath it regardless of the left column's height. */
form.checkout,
form.checkout.woocommerce-checkout,
.woocommerce form.woocommerce-checkout {
  grid-template-rows: min-content auto auto auto !important;
}

/* The payment row (moved here by JS) spans BOTH columns, full width, below
   the Billing details and Your order columns. */
.tgs-payment-row {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  width: 100% !important;
  margin-top: 1rem;
}
.tgs-payment-row #payment {
  margin-top: 0 !important;
}
/* Constrain only the place-order button to a comfortable width; the payment
   methods box itself spans the full container width. */
.tgs-payment-row #payment ul.payment_methods {
  max-width: 100%;
}
.tgs-payment-row #payment #place_order,
.tgs-payment-row #payment button#place_order {
  max-width: 100%;
}

/* Relocated gateway buttons (PayPal, card gateway, etc.) that our JS moved into
   the payment row from the order-review column. Make them span the FULL width
   of the container, matching Curlec's "Proceed To Pay" button, so every
   payment method has a consistent full-width button at the bottom. */
.tgs-payment-row > .paypal-buttons,
.tgs-payment-row > .ppc-button-wrapper,
.tgs-payment-row > .ppcp-button-container,
.tgs-payment-row > [id^="paypal-"],
.tgs-payment-row > [id*="paypal-button"],
.tgs-payment-row > [class*="paypal-button"],
.tgs-payment-row > [class*="paypal"],
.tgs-payment-row > .woocommerce-checkout-payment,
.tgs-payment-row > div:not(#payment) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 1rem;
  box-sizing: border-box;
  float: none !important;
}
/* The actual button/iframe inside those wrappers should fill the width too. */
.tgs-payment-row > .paypal-buttons iframe,
.tgs-payment-row > .ppc-button-wrapper iframe,
.tgs-payment-row [id*="paypal"] iframe,
.tgs-payment-row .paypal-button,
.tgs-payment-row > div:not(#payment) .button,
.tgs-payment-row > div:not(#payment) button,
.tgs-payment-row > div:not(#payment) input[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
}
/* PayPal's smart button renders as a chain of DIVs (NOT an iframe) with these
   exact class names (confirmed from the live DOM):
     .paypal-button-container > .paypal-button-row > .paypal-button
   Each level has its own width from PayPal's SDK. Force the ENTIRE chain — and
   every descendant inside the relocated PayPal wrapper — to full width so the
   button reaches edge-to-edge like the Curlec button. */
.tgs-payment-row [class*="paypal-button"],
.tgs-payment-row .paypal-button-container,
.tgs-payment-row .paypal-button-row,
.tgs-payment-row .paypal-button,
.tgs-payment-row [data-funding-source="paypal"] {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}
/* Belt-and-braces: any descendant of the relocated PayPal wrapper that PayPal
   gave an inline pixel width — override it. */
.tgs-payment-row > div:not(#payment) > *,
.tgs-payment-row > div:not(#payment) > * > * {
  max-width: 100% !important;
}
/* If a relocated button is a plain WooCommerce .button.alt / #place_order that
   landed directly in the row (not wrapped), full-width it and brand it. */
.tgs-payment-row > .button,
.tgs-payment-row > input[type="submit"],
.tgs-payment-row > button:not(#place_order) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-top: 1rem;
}

/* The review table: force clean horizontal layout, prices on one line. */
table.shop_table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  display: table !important;
  border: 0 !important;
  margin: 0 !important;
}
table.shop_table thead { display: table-header-group !important; }
table.shop_table tbody { display: table-row-group !important; }
table.shop_table tfoot { display: table-row-group !important; }
table.shop_table tr { display: table-row !important; }
table.shop_table th,
table.shop_table td {
  display: table-cell !important;
  padding: .85rem .25rem !important;
  vertical-align: top;
  text-align: left;
  float: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--navy-line) !important;
}
table.shop_table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy-muted);
  border-bottom: 1px solid var(--navy-line) !important;
}
table.shop_table td.product-name,
table.shop_table th.product-name {
  width: 99% !important;
  word-break: normal;
  color: var(--navy);
  font-weight: 600;
  padding-right: 1rem !important;
}
/* The product name line itself should use the full available width. */
table.shop_table td.product-name > * {
  max-width: 100%;
}
table.shop_table td.product-total,
table.shop_table th.product-total,
table.shop_table tfoot td,
table.shop_table tfoot th {
  width: 1% !important;
  white-space: nowrap !important;
  text-align: right !important;
}
.woocommerce-checkout .woocommerce-Price-amount,
.woocommerce-checkout .amount,
.woocommerce-checkout bdi {
  white-space: nowrap !important;
  word-break: normal !important;
  display: inline !important;
  font-variant-numeric: tabular-nums;
}

/* Product meta (Date / Time) under the item name. */
table.shop_table .product-name dl.variation,
table.shop_table .product-name .wc-item-meta {
  margin: .5rem 0 0 !important;
  padding: 0;
  font-size: .85rem;
  color: var(--navy-muted);
  font-weight: 400;
  line-height: 1.5;
}
table.shop_table .product-name dl.variation dt,
table.shop_table .wc-item-meta dt {
  font-weight: 600;
  color: var(--navy);
  float: left;
  clear: left;
  margin-right: .35rem;
}
table.shop_table .product-name dl.variation dd,
table.shop_table .wc-item-meta dd {
  margin: 0 0 .15rem;
  padding: 0;
}
table.shop_table .product-name dl.variation p,
table.shop_table .wc-item-meta {
  margin: 0;
}

/* Totals emphasis. */
table.shop_table tfoot .order-total th,
table.shop_table tfoot .order-total td {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  border-bottom: 0 !important;
  padding-top: 1rem !important;
}
table.shop_table tfoot .order-total .amount {
  color: var(--gold);
}
table.shop_table tfoot tr:last-child th,
table.shop_table tfoot tr:last-child td {
  border-bottom: 0 !important;
}

/* Product thumbnail in summary (small, tidy). */
table.shop_table td.product-name img,
.woocommerce-checkout .cart-item img {
  max-width: 44px;
  border-radius: 6px;
  margin-right: .5rem;
}

/* --------------------------------------------------------------------------
   6. Payment methods + place order
   -------------------------------------------------------------------------- */
#payment {
  background: transparent !important;
  border-radius: 0;
  margin-top: 2rem !important;
}
/* Curlec's bank-selection dropdown — styled as a proper, branded select with
   a custom arrow (with breathing room from the edge) and ellipsis for long
   option text so it never shows just one lonely word. */
#payment .payment_box select,
#payment .payment_box .select2-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* Right padding leaves room for the custom arrow so text/arrow aren't cramped. */
  padding: .7rem 2.5rem .7rem .9rem !important;
  margin-top: .5rem;
  border: 1px solid var(--navy-line) !important;
  border-radius: 8px !important;
  font-size: .95rem !important;
  line-height: 1.3 !important;
  color: var(--navy) !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  /* Remove native arrow and draw our own (a chevron) with comfortable inset. */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 14px 14px !important;
  /* Truncate long option text with an ellipsis instead of clipping mid-word. */
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer;
}
#payment .payment_box select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent) !important;
  outline: none !important;
}
/* Curlec lays its options out in a fixed-ish table; force everything fluid so
   nothing (especially the bank <select>) gets clipped on narrow screens. */
#payment .payment_box,
#payment .payment_box table,
#payment .payment_box tbody,
#payment .payment_box tr,
#payment .payment_box td,
#payment .payment_box > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#payment .payment_box table {
  table-layout: fixed !important;
}
/* The Curlec FPX radio-options box (bordered) sits too close to the intro
   text above it — add clear separation. Targets the bordered inner container. */
#payment .payment_box table,
#payment .payment_box fieldset,
#payment .payment_box > div:not(:first-child) {
  margin-top: 1.25rem !important;
}
/* Also space the intro paragraph from the box. */
#payment .payment_box p {
  margin: 0 0 1rem !important;
}
#payment ul.payment_methods {
  border: 1px solid var(--navy-line) !important;
  border-radius: 12px;
  padding: 1rem 1.25rem !important;
  margin: 0 0 1.25rem !important;
  list-style: none !important;
  background: color-mix(in srgb, var(--cream) 40%, #fff);
}
#payment ul.payment_methods li {
  list-style: none !important;
  margin: 0 0 .5rem;
  padding: 0;
}
#payment ul.payment_methods li:last-child { margin-bottom: 0; }
#payment ul.payment_methods label {
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
#payment .payment_box {
  background: var(--cream) !important;
  border-radius: 9px;
  padding: 1.25rem !important;
  margin: 1.25rem 0 .5rem !important;
  font-size: .9rem;
  color: var(--navy-muted);
}
#payment .payment_box::before { display: none !important; }
#payment div.payment_box {
  color: var(--navy-muted);
}
/* Curlec's specific option containers (real IDs from the gateway markup):
   #fpxInstantpay (Online Banking block), #instantPayFPX (bank sub-options),
   #cardInstantPay (Credit/Debit Card block). Give the card block clear spacing
   from the block above it so the options aren't cramped together. */
#payment #cardInstantPay {
  margin-top: 20px !important;
}
#payment #fpxInstantpay {
  margin-bottom: 8px !important;
}

/* The big Proceed / Place Order button. */
#place_order,
button#place_order {
  background: var(--gold) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 1rem 2rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  cursor: pointer;
  width: 100% !important;
  float: none !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent);
}
#place_order:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--gold) 65%, transparent);
}
#place_order:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Terms / privacy text. */
.woocommerce-terms-and-conditions-wrapper {
  margin: 1rem 0;
  font-size: .85rem;
  color: var(--navy-muted);
}
.woocommerce-privacy-policy-text p {
  font-size: .85rem;
  color: var(--navy-muted);
  margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   7. Notices (error / info / success)
   -------------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--navy-line) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: var(--r-panel);
  /* Left padding leaves clear room for the status icon so it never overlaps
     the message text. */
  padding: 1.1rem 1.25rem 1.1rem 3.25rem !important;
  color: var(--navy) !important;
  list-style: none !important;
  margin: 0 0 1.25rem !important;
  font-size: .95rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
/* WooCommerce draws the icon via ::before — position it cleanly in the left pad. */
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before {
  position: absolute !important;
  left: 1.15rem !important;
  top: 1.15rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: var(--gold) !important;
}
.woocommerce .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error::before {
  color: #b32d2e !important;
}
.woocommerce-checkout .woocommerce-error,
.woocommerce .woocommerce-error {
  border-top-color: #b32d2e !important;
}
.woocommerce .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li {
  list-style: none !important;
  margin: 0 !important;
  flex: 1 1 auto;
}
/* The "Return to Home" link/button inside a notice — style as a neat inline
   link, aligned with the message. */
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce-checkout .woocommerce-error .button {
  display: inline-block;
  margin-left: auto;
  padding: .5rem 1.1rem !important;
  background: var(--gold) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.woocommerce .woocommerce-error .button:hover,
.woocommerce-checkout .woocommerce-error .button:hover {
  filter: brightness(1.05);
}

/* --------------------------------------------------------------------------
   Venue address card — shown beneath the order summary on checkout so
   customers see where the in-person class is held before paying. It sits in
   the right column, below #order_review.
   -------------------------------------------------------------------------- */
.tgs-venue-address {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: 14px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-top: 1.25rem;
}
.tgs-venue-address h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--navy-line);
}
.tgs-venue-address address {
  font-style: normal;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy);
}
/* Overflow protection: keep everything within the viewport at all widths.
   Prevents the order-details card/table from extending past the screen edge
   and clipping the price on narrow mobile screens.

   IMPORTANT: scope to the MAIN content area only (#main), NOT all .shell
   elements — the header and footer also use .shell, and forcing them to
   max-width:100% here made the header/footer stretch differently on the
   thank-you page than on every other page. */
.woocommerce-order-received #main .woocommerce,
.woocommerce-order-received #main .woocommerce-order {
  overflow-x: hidden;
  max-width: 100% !important;
  box-sizing: border-box;
}
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received ul.woocommerce-order-overview {
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box;
}
/* Center the whole order-received content, including the "Order received"
   page title. */
.woocommerce-order-received .entry-title,
.woocommerce-order-received #main > .woocommerce > h1,
.woocommerce-order-received h1.entry-title {
  text-align: center;
}
.woocommerce-order-received #main .woocommerce {
  max-width: 760px !important;
  margin-inline: auto !important;
}
.woocommerce-order-received #main .woocommerce-order {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-panel);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.5rem;
  list-style: none;
  box-sizing: border-box;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 0;
  padding: .5rem 0;
}
.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1rem;
}

/* Order details table — same treatment as checkout: horizontal, prices on one
   line, class name/date/time full width, no overflow on mobile. */
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce-order table.order_details,
.woocommerce-order table.shop_table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  display: table !important;
  margin: 0 !important;
  border: 0 !important;
}
.woocommerce-order table.shop_table thead,
.woocommerce-order table.order_details thead { display: table-header-group !important; }
.woocommerce-order table.shop_table tbody,
.woocommerce-order table.order_details tbody { display: table-row-group !important; }
.woocommerce-order table.shop_table tfoot,
.woocommerce-order table.order_details tfoot { display: table-row-group !important; }
.woocommerce-order table.shop_table tr,
.woocommerce-order table.order_details tr { display: table-row !important; }
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td,
.woocommerce-order table.order_details th,
.woocommerce-order table.order_details td {
  display: table-cell !important;
  padding: .85rem .25rem !important;
  vertical-align: top;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid var(--navy-line) !important;
  word-break: normal;
}
/* Class name column: bold, prominent (like the seat product name was), full width. */
.woocommerce-order table td.product-name,
.woocommerce-order table td.woocommerce-table__product-name {
  width: 75% !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--navy) !important;
}
.woocommerce-order table td.product-name a {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--navy) !important;
  text-decoration: none;
  pointer-events: none;
}
.woocommerce-order table td.product-total,
.woocommerce-order table th.product-total,
.woocommerce-order table td.woocommerce-table__product-total,
.woocommerce-order table tfoot td,
.woocommerce-order table tfoot th {
  width: 25% !important;
  white-space: nowrap !important;
  text-align: right !important;
}
.woocommerce-order table .amount,
.woocommerce-order table bdi {
  white-space: nowrap !important;
  display: inline !important;
}
/* The Class / Date / Time meta under the class name — full width, readable. */
.woocommerce-order table td.product-name .wc-item-meta,
.woocommerce-order table td.product-name dl.variation {
  margin: .5rem 0 0 !important;
  padding: 0;
  font-size: .875rem;
  font-weight: 400;
  color: var(--navy-muted);
  line-height: 1.5;
  width: 100%;
}
.woocommerce-order table td.product-name .wc-item-meta strong,
.woocommerce-order table td.product-name dl.variation dt {
  font-weight: 600;
  color: var(--navy);
  display: inline;
  margin-right: .35rem;
}
.woocommerce-order table td.product-name .wc-item-meta p,
.woocommerce-order table td.product-name dl.variation dd {
  display: inline;
  margin: 0;
}
.woocommerce-order table td.product-name .wc-item-meta li {
  list-style: none;
  margin: 0 0 .15rem;
}
/* Totals emphasis: the Total row (has .order-total or .total class). */
.woocommerce-order table tfoot tr.order-total th,
.woocommerce-order table tfoot tr.total th,
.woocommerce-order table tfoot tr.order-total td,
.woocommerce-order table tfoot tr.total td {
  font-weight: 800;
  color: var(--navy);
}
/* The "Payment method:" footer row holds long text. It shares the narrow price
   column with the amounts, so it overflows. Fix: make this row's cells
   block-level so the value uses the full card width — label on its own line,
   value beneath — guaranteeing it never overflows at any width.

   IMPORTANT: WooCommerce's order-received template may render this row as a
   plain <tr> WITHOUT a .payment-method class, so we target it by BOTH the class
   AND its position as the last row in the order-details tfoot. */
.woocommerce-order table tfoot tr.payment-method,
.woocommerce-order table.order_details tfoot tr:last-child,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: .85rem .5rem 0 !important;
  box-sizing: border-box !important;
}
.woocommerce-order table tfoot tr.payment-method th,
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-align: left !important;
  padding: 0 0 .25rem !important;
  border-bottom: 0 !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  color: var(--navy) !important;
  box-sizing: border-box !important;
}
.woocommerce-order table tfoot tr.payment-method td,
.woocommerce-order table.order_details tfoot tr:last-child td,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--navy-muted) !important;
  text-align: left !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}
/* Keep the actual money totals (subtotal/total rows) right-aligned + nowrap. */
.woocommerce-order table tfoot tr td .amount {
  white-space: nowrap !important;
}
.woocommerce-order table tfoot .woocommerce-table__line-item.subtotal td,
.woocommerce-order table tfoot .woocommerce-table__line-item.total td {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   9. Cart page (in case it's ever shown)
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart img { max-width: 60px; border-radius: 8px; }
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-panel);
  padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   10. Responsive — stack to a single column on tablet/mobile.
   These use !important to override the desktop grid-column/grid-row rules
   above (which are themselves !important to beat WooCommerce).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  form.checkout,
  form.checkout.woocommerce-checkout,
  .woocommerce form.woocommerce-checkout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  #customer_details {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1;
  }
  #order_review_heading {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2;
    margin-top: 1.5rem !important;
  }
  #order_review {
    grid-column: 1 !important;
    grid-row: 3 !important;
    order: 3;
    position: static !important;
  }
  .tgs-venue-address {
    grid-column: 1 !important;
    grid-row: 4 !important;
    order: 4;
    margin-top: 1rem;
  }
  .tgs-payment-row {
    grid-column: 1 !important;
    grid-row: 5 !important;
    order: 5;
  }
}

@media (max-width: 600px) {
  /* Stack first/last name on small screens. */
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
  #billing_first_name_field,
  #billing_last_name_field {
    grid-column: 1 !important;
  }

  /* Order-received table on mobile: ensure the price column stays visible and
     the product-name (class name + meta) wraps within the remaining space so
     nothing is clipped at the right edge. */
  .woocommerce-order table.order_details,
  .woocommerce-order table.shop_table {
    table-layout: fixed !important;
  }
  .woocommerce-order table td.product-name,
  .woocommerce-order table th.product-name {
    width: 68% !important;
    padding-right: .5rem !important;
  }
  .woocommerce-order table td.product-total,
  .woocommerce-order table th.product-total {
    width: 32% !important;
    padding-left: 0 !important;
  }
  .woocommerce-order table .amount {
    font-size: .95rem !important;
  }

  /* Curlec FPX box: make the layout fluid so nothing gets clipped, WITHOUT
     overriding Curlec's own show/hide of the sub-options. We force width/
     box-sizing (which don't affect visibility) but only set display:block on
     elements Curlec hasn't explicitly hidden — so when "Online Banking" is not
     selected, its Personal/Business/bank-select children stay hidden exactly
     like on desktop. */
  #payment .payment_box,
  #payment .payment_box * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #payment .payment_box table,
  #payment .payment_box tbody,
  #payment .payment_box tr,
  #payment .payment_box td {
    width: 100% !important;
    word-break: break-word;
  }
  /* Stack the table cells (structural), but never un-hide hidden elements. */
  #payment .payment_box table:not([style*="display: none"]),
  #payment .payment_box tbody:not([style*="display: none"]),
  #payment .payment_box tr:not([style*="display: none"]),
  #payment .payment_box td:not([style*="display: none"]) {
    display: block !important;
  }
  /* Divs: only make visible ones fluid; do NOT force display on hidden ones. */
  #payment .payment_box div:not([style*="display: none"]):not([style*="display:none"]) {
    width: 100% !important;
    word-break: break-word;
  }
  /* Target selects in the payment area, but only style VISIBLE ones — never
     force a Curlec-hidden bank select to appear. */
  #payment select:not([style*="display: none"]):not([style*="display:none"]),
  #payment .payment_box select:not([style*="display: none"]):not([style*="display:none"]),
  .tgs-payment-row select:not([style*="display: none"]):not([style*="display:none"]) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-top: .5rem !important;
    padding: .7rem 2.5rem .7rem .9rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-position: right .9rem center !important;
  }
  /* Keep radio inputs inline with their labels even though parents are block. */
  #payment .payment_box input[type="radio"] {
    display: inline !important;
    width: auto !important;
  }
  /* Bank logos shouldn't force width. */
  #payment .payment_box img {
    max-width: 60px !important;
    height: auto !important;
    display: inline !important;
  }
  /* Reduce inner padding a touch so content has more room. */
  #payment ul.payment_methods {
    padding: .85rem !important;
  }
  #payment .payment_box {
    padding: 1rem !important;
  }
}