/* ==========================================================================
   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
   -------------------------------------------------------------------------- */
.woocommerce-form-coupon-toggle {
  margin-bottom: 1.5rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-panel);
  padding: 1rem 1.25rem;
  color: var(--navy);
  font-size: .9375rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before {
  color: var(--gold);
}
.checkout_coupon {
  background: #fff;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-panel);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   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;
  gap: clamp(1.5rem, 4vw, 3rem) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

#customer_details,
#customer_details {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !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
   -------------------------------------------------------------------------- */
#order_review_heading {
  grid-column: 2;
  grid-row: 1;
  border-bottom: 0;
  margin-bottom: 1rem;
}
#order_review,
#order_review {
  grid-column: 2 !important;
  grid-row: 2 !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;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

/* 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: auto !important;
  word-break: normal;
  color: var(--navy);
  font-weight: 600;
}
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: 1.5rem;
}
#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: 1rem !important;
  margin: .75rem 0 0 !important;
  font-size: .9rem;
  color: var(--navy-muted);
}
#payment .payment_box::before { display: none !important; }
#payment div.payment_box {
  color: var(--navy-muted);
}

/* 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 {
  background: #fff !important;
  border: 1px solid var(--navy-line) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: var(--r-panel);
  padding: 1rem 1.25rem !important;
  color: var(--navy) !important;
  list-style: none;
  margin-bottom: 1.25rem;
}
.woocommerce-checkout .woocommerce-error { border-top-color: #b32d2e !important; }
.woocommerce-checkout .woocommerce-error li { list-style: none; }

/* --------------------------------------------------------------------------
   8. Order received / thank-you page
   -------------------------------------------------------------------------- */
.woocommerce-order-received .woocommerce-order {
  max-width: 720px;
  margin-inline: auto;
}
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: 1.6rem;
  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;
}
.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: 1.5rem;
  margin-bottom: 1.5rem;
  list-style: none;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 0;
  padding: .5rem 0;
}

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  form.checkout,
  form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr !important;
  }
  #customer_details,
  #order_review,
  #order_review_heading {
    grid-column: 1;
    grid-row: auto;
  }
  #order_review {
    position: static;
  }
  #order_review_heading {
    margin-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout #billing_first_name_field,
  .woocommerce-checkout #billing_last_name_field {
    grid-column: 1;
  }
}