/* =============================================================================
   CHECKOUT
   ============================================================================= */

.store-checkout-wrap {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.store-checkout-progress {
  margin-bottom: var(--space-2) !important;
  margin-top: var(--space-6) !important;
}

/* 2-step progress indicator: Details → Confirmation */
.store-checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-9);
}

.store-checkout-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  position: relative;
}

.store-checkout-step + .store-checkout-step::before {
  content: '›';
  display: block;
  width: auto;
  height: auto;
  background: none;
  color: var(--color-light-gray);
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 var(--space-3);
  align-self: center;
}

.store-checkout-progress-inner {
  display: flex;
  align-items: center;
}

.store-checkout-step__dot {
  display: none;
}

.store-checkout-step.is-active .store-checkout-step__dot {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-white);
}

.store-checkout-step.is-done .store-checkout-step__dot {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

.store-checkout-step__label {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-light-gray);
}

.store-checkout-step.is-active .store-checkout-step__label {
  color: var(--color-gold);
  font-weight: var(--weight-medium);
}

.store-checkout-step.is-done .store-checkout-step__label {
  color: var(--color-black);
}

/* Checkout form section heading */
.store-checkout-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-sand);
}

/* =============================================================================
   CHECKOUT — WooCommerce classic shortcode overrides
   Scope: .woocommerce-checkout body class
   DOM: form.woocommerce-checkout > .col2-set#customer_details > .col-1 / .col-2
        then h3#order_review_heading + #order_review > table + #payment
   ============================================================================= */

/* ── Layout: 2-column checkout (WC default float layout, kept as-is) ────────── */
/* WC default: #customer_details floats left 58%, #order_review floats right 38%.
   We keep those floats intact. The .store-checkout-wrap max-width is widened to
   give both columns room to breathe.                                              */
.store-checkout-wrap {
  max-width: 1000px !important;
}

/* col-1 and col-2 inside #customer_details are floated 48% each — keep them,
   but flatten to single column so billing fields don't split awkwardly at       */
/* narrow viewports (below 768px col2-set goes to 100% anyway via WC defaults).  */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
}

.woocommerce-checkout .col2-set .col-1 {
  margin-bottom: var(--space-7) !important;
}

/* col-2 = Additional Information — top separator from billing */
.woocommerce-checkout .col2-set .col-2 {
  padding-top: var(--space-9) !important;
  border-top: 1px solid var(--color-sand) !important;
}

/* Clearfix on col2-set */
.woocommerce-checkout .col2-set::after {
  content: '';
  display: table;
  clear: both;
}

/* Clearfix after the entire checkout form */
.woocommerce-checkout form.woocommerce-checkout::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Billing / Shipping section headings (h3) ──────────────────────────────── */
/* Only target real section headings — NOT #ship-to-different-address (checkbox) */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout h3#order_review_heading {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: var(--weight-light) !important;
  letter-spacing: 0.02em !important;
  color: var(--color-black) !important;
  margin: 0 0 var(--space-6) 0 !important;
  padding: 0 0 var(--space-3) 0 !important;
  border-bottom: 1px solid var(--color-sand) !important;
}

.woocommerce-checkout h3#order_review_heading {
  margin-top: var(--space-8) !important;
}

/* Beat Astra's high-specificity rule:
   "form #order_review_heading:not(.elementor-widget-woocommerce-checkout-page #order_review_heading)"
   Astra specificity = (2,1,1). We match it via sibling ID selector, then win
   on source order since child theme loads after Astra.                          */
.woocommerce-checkout #customer_details ~ h3#order_review_heading {
  border: none !important;
  border-bottom: 1px solid var(--color-sand) !important;
}

/* "Ship to different address?" — checkbox label, not a real heading */
.woocommerce-checkout #ship-to-different-address {
  font-family: var(--font-sans) !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: normal !important;
  color: var(--color-charcoal) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-5) 0 !important;
}

/* ── Form field wrapper: consistent vertical rhythm ────────────────────────── */
/* WC default: margin: 0 0 6px — too tight */
.woocommerce-checkout p.form-row {
  margin: 0 0 var(--space-5) 0 !important;
  padding: 0 !important;
}

/* WC wraps every input in <span class="woocommerce-input-wrapper"> (inline by default).
   Must be block so inputs fill 100% of the column. */
.woocommerce-checkout .woocommerce-input-wrapper {
  display: block !important;
}

/* ── Two-column billing fields (first name / last name, etc.) ──────────────── */
.woocommerce-checkout .form-row-first {
  float: left !important;
  width: calc(50% - var(--space-3)) !important;
  clear: left !important;
}

.woocommerce-checkout .form-row-last {
  float: right !important;
  width: calc(50% - var(--space-3)) !important;
}

.woocommerce-checkout .form-row-wide {
  float: none !important;
  width: 100% !important;
  clear: both !important;
}

/* Clearfix after field wrapper groups */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Select2 (WC replaces native <select> with select2 widget) ─────────────── */
/* select2 renders a .select2-container div — native <select> is hidden.       */
/* Our global .form-row select rule targets the hidden element; these target    */
/* the visible widget so it matches our bottom-border-only input style.         */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  border: 1px solid var(--color-sand) !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  outline: none !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  color: var(--color-black) !important;
  line-height: 1.5 !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-light-gray) !important;
}

/* Replace select2's crude CSS-border triangle with a clean SVG chevron */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
}

/* Hide select2's default <b> triangle */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

/* Inject a clean down-chevron via SVG background */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%233D3D3D' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-charcoal) !important;
}

/* ── Order notes textarea ── */
.woocommerce-checkout #order_comments {
  border: 1px solid var(--color-sand) !important;
}

/* ── Placeholder styling ───────────────────────────────────────────────────── */
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--color-light-gray) !important;
  font-size: 1rem !important;
}

/* ── Validation states ─────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-invalid .input-text {
  border-color: var(--color-error) !important;
}

.woocommerce-checkout .required {
  color: var(--color-gold) !important;
  text-decoration: none !important;
}

/* ── Full-border outlined inputs — Shopify-style (checkout only) ─────────────── */
/* body prefix lifts specificity to (0,4,3) to beat the global (0,3,2) rule       */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
  border: 1px solid var(--color-sand) !important;
  border-radius: 3px !important;
  padding: 0.75rem 1rem !important;
  background: var(--color-white) !important;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus {
  border-color: var(--color-charcoal) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Small gap so the label sits clearly above the input border box */
body.woocommerce-checkout .woocommerce form .form-row label {
  margin-bottom: 0.25rem !important;
}

/* ── Gap between customer form and order review ────────────────────────────── */
.woocommerce-checkout #customer_details {
  margin-bottom: 0 !important;
}

/* ── Your order panel: kill all box styling; vertical hairline as separator ─── */
/* WC's table.shop_table carries border:1px solid rgba(0,0,0,.1) + border-radius:5px.
   Target both the div and the inner table to strip it fully.                     */
.woocommerce-checkout #order_review table.shop_table {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Vertical hairline — column separator between billing (left) and order (right) */
/* Beats Astra's `form #order_review:not(...)` rule to strip rogue padding/border */
.woocommerce-checkout form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review),
.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* Strip Astra's padding: 0 2em; restore only left + top spacing */
  padding: var(--space-6) 0 0 var(--space-7) !important;
  border-left: 1px solid var(--color-sand) !important;
}

/* ── Mobile checkout ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Side padding — global reset strips .site-main; restore it here only */
  body.woocommerce-checkout .woocommerce {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* ── Progress indicator ── */
  .woocommerce-checkout .store-checkout-progress {
    margin-bottom: var(--space-6) !important;
  }

  /* Tighten breadcrumb chevron spacing at small viewports */
  .store-checkout-step + .store-checkout-step::before {
    margin: 0 var(--space-2) !important;
  }

  /* ── Form field rhythm ── */
  /* First/last name: stack to full-width — 50% each is ~148px at 320px, too narrow */
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none !important;
    width: 100% !important;
    clear: both !important;
  }

  /* Label sits flush above its input — they are one unit */
  .woocommerce-checkout p.form-row label {
    display: block !important;
    margin-bottom: 0 !important;
  }

  /* Full-border inputs — uniform padding on all sides */
  .woocommerce-checkout form .form-row input.input-text,
  .woocommerce-checkout form .form-row select {
    padding: 0.65rem 0.875rem !important;
  }

  /* select2 visible widget — match full-border padding */
  .woocommerce-checkout .select2-container--default .select2-selection--single {
    padding: 0.65rem 2.5rem 0.65rem 0.875rem !important;
  }

  /* Larger gap between separate form fields (visual grouping — label+input = unit) */
  .woocommerce-checkout p.form-row {
    margin-bottom: var(--space-5) !important;
  }

  /* ── Section gaps ── */
  .woocommerce-checkout .col2-set .col-1 {
    margin-bottom: var(--space-6) !important;
  }

  .woocommerce-checkout .col2-set .col-2 {
    padding-top: var(--space-6) !important;
  }

  /* ── "Your order" heading + panel ── */
  /* The h3 has border-bottom AND #order_review has border-top — two lines back-
     to-back on adjacent elements look like a double border. Remove the heading's
     border-bottom; the panel's border-top acts as the single section separator. */
  .woocommerce-checkout h3#order_review_heading,
  .woocommerce-checkout #customer_details ~ h3#order_review_heading {
    margin-top: var(--space-7) !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* Order review panel — swap vertical divider for horizontal separator */
  .woocommerce-checkout form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review),
  .woocommerce-checkout #order_review.woocommerce-checkout-review-order {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--color-sand) !important;
    padding-top: var(--space-5) !important;
    margin-top: 0 !important;
  }

  /* ── Payment methods ── */
  #payment ul.payment_methods li {
    padding: var(--space-3) 0 !important;
  }

  /* Place order button — ensure full touch target */
  #payment #place_order {
    min-height: 52px !important;
  }
}

/* ── Order review table ─────────────────────────────────────────────────────── */
.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
  margin-bottom: var(--space-6) !important;
}

/* Hide thead — "Product / Total" column headers are redundant in a summary */
.woocommerce-checkout-review-order-table thead {
  display: none !important;
}

/* All cells: base reset */
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
  border: none !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
}

/* Product line items in tbody */
.woocommerce-checkout-review-order-table tbody tr td {
  border-bottom: 1px solid var(--color-sand) !important;
  padding: var(--space-4) 0 !important;
  font-size: var(--text-small) !important;
  color: var(--color-charcoal) !important;
}

/* Strip WC alternating row tint */
.woocommerce-checkout-review-order-table tr:nth-child(odd) td,
.woocommerce-checkout-review-order-table tr:nth-child(odd) th {
  background: transparent !important;
}

/* Subtotal, shipping, tax rows — secondary/quiet, no heavy border */
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th,
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) td {
  padding: var(--space-2) 0 !important;
  font-size: var(--text-xs) !important;
  color: var(--color-gray) !important;
  border-bottom: none !important;
}

/* Order total: separated with a top rule, prominent */
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-top: 1px solid var(--color-black) !important;
  border-bottom: none !important;
  padding: var(--space-4) 0 !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-black) !important;
  font-size: var(--text-body) !important;
}

/* ── Checkout review order: thumbnail in product name cell ──────────────────── */
/* Smaller thumb modifier for the checkout sidebar context */
.woocommerce-checkout-review-order-table .store-order-item__thumb--sm {
  flex: 0 0 56px;
  width: 56px;
  height: 70px; /* 4:5 ratio */
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-cream);
}

.woocommerce-checkout-review-order-table .store-order-item__thumb--sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Price column: shrink to content, don't wrap */
.woocommerce-checkout-review-order-table tbody td.product-total {
  white-space: nowrap;
  text-align: right;
  width: 1%; /* shrinks column to minimum */
  padding-left: var(--space-4) !important;
}

/* ── Payment methods block ──────────────────────────────────────────────────── */
/* WC injects background:#EBEBEB and border-radius:5px — strip both */
#payment {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
}

#payment ul.payment_methods {
  list-style: none !important;
  margin: 0 0 var(--space-5) 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Each payment method: strip ALL WC default borders — we draw only what we need */
#payment ul.payment_methods li {
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: var(--space-4) 0 !important;
  margin: 0 !important;
}

/* Single separator between adjacent payment methods only — no double lines */
#payment ul.payment_methods li + li {
  border-top: none !important;
}

/* Payment method label — reset global uppercase/tracking overrides */
#payment ul.payment_methods li label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-black) !important;
  cursor: pointer !important;
}

/* Payment method description text box */
#payment .payment_box {
  background: var(--color-off-white) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: var(--space-3) 0 0 !important;
  padding: var(--space-3) var(--space-4) !important;
}

#payment .payment_box p,
#payment .payment_box label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-gray) !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ── Place order wrapper ─────────────────────────────────────────────────────── */
/* WC wraps the button in <div class="form-row place-order"> with added padding */
#payment .place-order {
  background: transparent !important;
  border: none !important;
  padding: var(--space-5) 0 0 !important;
  margin: 0 !important;
}

#payment #place_order {
  width: 100% !important;
}

/* ── BlockUI loading overlay — override Astra's ::before spinner square ────── */
/* Astra's rule puts a background-colored square + SVG on ::before.
   Kill it entirely with display:none, then inject our gold ring on ::after.    */
.woocommerce-js .blockUI.blockOverlay::before {
  display: none !important;
}

.woocommerce-js .blockUI.blockOverlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid var(--color-sand);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: store-spin 0.8s linear infinite;
}

/* ── Login / coupon toggle notices ──────────────────────────────────────────── */
/* WC renders these as .woocommerce-info boxes. Flatten to plain centered text. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: var(--space-6) !important;
  text-align: center !important;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important; /* !important needed: WC info applies left border inline */
  border-right: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-small) !important;
  color: var(--color-gray) !important;
  box-shadow: none !important;
}

/* Remove the info icon pseudo-element */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--color-gold) !important;
  text-decoration: none !important;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  color: var(--color-gold-dark) !important;
}

/* =============================================================================
   WOOCOMMERCE OVERRIDES
   ============================================================================= */

/* Override default WooCommerce container max-width to match our system */
.woocommerce #page,
.woocommerce-page #page {
  max-width: var(--container-max);
}

/* Remove default WooCommerce sidebar */
.woocommerce-page .site-content {
  max-width: 100%;
}

/* Override WooCommerce notice styles — luxury minimal treatment */
/* WC structure: <div class="woocommerce-message|info|error"> [::before icon] text <a class="button">action</a> </div> */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-small) !important;
  color: var(--color-charcoal) !important;
  padding: var(--space-4) var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  box-shadow: none !important;
}

/* Remove WC's default ::before icon (exclamation mark / info glyph) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before {
  display: none !important;
}

/* Success / add-to-cart confirmation */
.woocommerce-message {
  border-left: 2px solid var(--color-gold) !important;
  background: var(--color-cream) !important;
}

/* Informational */
.woocommerce-info {
  border-left: 2px solid var(--color-light-gray) !important;
  background: var(--color-off-white) !important;
}

/* Error */
.woocommerce-error {
  border-left: 2px solid var(--color-charcoal) !important;
  background: var(--color-cream) !important;
}

/* error is a <ul> — reset list styles */
.woocommerce-error {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: var(--space-5) !important;
}

.woocommerce-error li {
  padding: 0 !important;
  margin: 0 !important;
}

/* Action button inside notices (e.g. "View cart") — text link style, no fill */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notice a.button {
  background: transparent !important;
  border: 1px solid var(--color-black) !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.25rem !important;
  min-height: 0 !important;
  border-radius: 2px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default) !important;
  white-space: nowrap !important;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-notice a.button:hover {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* Notice close button */
.store-notice-close {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
  color: var(--color-light-gray);
  font-size: 1.25rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-default);
}

.store-notice-close:hover {
  color: var(--color-black);
}

.store-notice-close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Notice has a "View cart" button already — push close to the far right */
.woocommerce-message:has( a.button ) .store-notice-close,
.woocommerce-info:has( a.button ) .store-notice-close {
  margin-left: var(--space-2);
}

/* Fade-out transition */
.woocommerce-message,
.woocommerce-info {
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.woocommerce-message.is-dismissing,
.woocommerce-info.is-dismissing {
  opacity: 0 !important;
  transform: translateY( -6px ) !important;
  pointer-events: none;
}

/* WooCommerce price */
.woocommerce .price,
.woocommerce-page .price {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-black) !important;
}

/* WooCommerce star rating */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--color-gold) !important;
}

/* Default WooCommerce button override — gold palette, never blue */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--color-gold) !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  border: 1px solid var(--color-gold) !important;
  padding: 0.875rem 2rem !important;
  min-height: 48px !important;
  transition: background var(--duration-fast) var(--ease-default) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-gold-dark) !important;
  border-color: var(--color-gold-dark) !important;
  color: var(--color-white) !important;
}

/* WooCommerce Blocks buttons (Gutenberg checkout/cart blocks) */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-checkout__actions button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-white) !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-checkout__actions button:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--color-gold-dark) !important;
  border-color: var(--color-gold-dark) !important;
  color: var(--color-white) !important;
}

/* Astra and WooCommerce: prevent any default blue focus ring or hover */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.store-header__cart-btn:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* WooCommerce form fields integration */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: none !important;
  border-bottom: 1px solid var(--color-sand) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  background: transparent !important;
  box-shadow: none !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-bottom-color: var(--color-black) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* WooCommerce label styling */
.woocommerce form .form-row label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-gray) !important;
  margin-bottom: 0 !important;
}

/* WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray);
  letter-spacing: var(--tracking-wide);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-gray);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--color-gold);
}

/* =============================================================================
   ASTRA THEME INTEGRATION OVERRIDES
   ============================================================================= */

/* Body background */
body {
  background-color: var(--color-white);
}

/* ── Full-width layout fix ──
   Override Astra's inner container so our .store-container handles gutters.
   !important needed here to win over Astra's ID-specificity selectors.
*/
.ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Astra grid column gutters — zero out so our grid controls all spacing */
.ast-grid-common-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Primary content column — full width, no float */
#primary.site-content-area,
#primary.content-area {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Full-width page/site wrapper */
#page.site,
.ast-page-only-right-sidebar #page,
.ast-page-only-left-sidebar #page {
  max-width: 100% !important;
  margin: 0 !important;
}

/* Remove Astra separate-container box card effect */
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main {
  box-shadow: none !important; /* remove WP/Astra card shadow */
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove padding Astra adds to the entry-content area */
.ast-separate-container #primary {
  padding: 0 !important;
}

/* Strip entry-header (page title) that Astra renders above custom templates */
.ast-article-single .entry-header:has(> .entry-title:empty),
.ast-article-single > .entry-header:first-child {
  display: none;
}

/* Site content area — full width */
#content.site-content {
  padding: 0;
}

/* Ensure all pages are truly full-width — not just homepage */
.entry-content,
.site-main,
#main,
.ast-article-single,
.ast-article-single > .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Standard content pages (Privacy Policy, T&C, Cookie Policy, etc.)
   The global reset above strips all padding from .entry-content, which is
   correct for WooCommerce/custom templates but breaks plain text pages.
   Restore comfortable reading padding here. */
.page:not(.woocommerce) .entry-content,
.page:not(.woocommerce) .ast-article-single > .entry-content {
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem) !important;
  max-width: 75ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Astra header replacement — hide default, show ours */
#masthead.site-header {
  display: none !important;
}

/* Astra footer replacement — hide default, show ours */
#colophon.site-footer {
  display: none !important;
}

/* =============================================================================
   ASTRA GLOBAL COLOR OVERRIDES
   Override Astra's injected --ast-global-color-* variables so nothing picks
   up  a stray blue from the Astra default palette.
   ============================================================================= */

:root {
  --ast-global-color-0: var(--color-gold) !important;
  --ast-global-color-1: var(--color-gold-dark) !important;
  --ast-global-color-2: var(--color-gold-light) !important;
  --ast-global-color-3: var(--color-black) !important;
  --ast-global-color-4: var(--color-white) !important;
  --ast-global-color-5: var(--color-gray) !important;
}

/* Kill browser default :focus ring AND Astra's default focus box-shadow on
   every interactive element site-wide (replaced by gold :focus-visible ring) */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}

/* Restore an accessible ring only for keyboard navigation */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* =============================================================================
   ASTRA SCROLL-TO-TOP BUTTON
   Real element: #ast-scroll-top (div)
   Icon: .ast-icon.icon-arrow > svg.ast-arrow-svg
   Astra uses line-height:2.1 + translate(0,-20%) to (badly) centre the SVG.
   We switch to grid + fix the transform.
   ============================================================================= */

#ast-scroll-top {
  display: grid !important;
  place-items: center !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  transition: background var(--duration-fast) var(--ease-default) !important;
}

#ast-scroll-top:hover {
  background: var(--color-gold) !important;
  color: var(--color-white) !important;
}

/* Remove Astra's -20% Y-shift; keep only the 180deg rotation to point the arrow up */
#ast-scroll-top .ast-icon.icon-arrow svg {
  transform: rotate(180deg) !important;
}

/* On mobile product pages: lift scroll-to-top above the sticky ATC bar (~76px) */
@media (max-width: 1023px) {
  .single-product #ast-scroll-top {
    bottom: 88px !important;
  }
}

/* Astra Pro SVG-ring scroll-to-top progress variant */
#ast-scroll-top circle,
#ast-scroll-top path {
  stroke: var(--color-gold) !important;
  fill: var(--color-white) !important;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .store-header,
  .store-footer,
  .store-cart-drawer,
  .store-nav-drawer,
  .store-sticky-atc {
    display: none !important;
  }
}

/* =============================================================================
   MINI-CART (inside cart drawer)
   ============================================================================= */

.store-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Loading overlay — applied to [data-js="cart-drawer-items"] during AJAX */
[data-js="cart-drawer-items"].is-loading {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}

.store-mini-cart--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  text-align: center;
  list-style: none; /* <li> context */
}

.store-mini-cart__empty-text {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
  margin: 0;
}

.store-mini-cart__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  position: relative;
}

/* Name + remove button row inside details */
.store-mini-cart__name-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.store-mini-cart__name-row .store-mini-cart__name {
  flex: 1 1 auto;
}

.store-mini-cart__remove {
  background: none;
  border: none !important; /* Astra parent theme applies border to all <button> */
  box-shadow: none !important; /* Astra parent theme applies box-shadow to all <button> */
  padding: 0;
  cursor: pointer;
  color: var(--color-light-gray);
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) ease;
}

.store-mini-cart__remove:hover { color: var(--color-black); }
.store-mini-cart__remove:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.store-mini-cart__image-link { display: block; }

.store-mini-cart__image-link img,
.store-mini-cart__thumb-img {
  width: 5.5rem;
  height: 5.5rem; /* square */
  object-fit: cover;
  display: block;
}

.store-mini-cart__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.store-mini-cart__name {
  font-family: var(--font-serif);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  color: var(--color-black);
  text-decoration: none;
  line-height: var(--leading-tight);
}
.store-mini-cart__name:hover { color: var(--color-gold); }

.store-mini-cart__variant {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin: 0;
}

.store-mini-cart__qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.store-mini-cart__qty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.store-mini-cart__qty-btn {
  background: none;
  border: none !important; /* Astra parent theme applies border to all <button> */
  box-shadow: none !important; /* Astra parent theme applies box-shadow to all <button> */
  cursor: pointer;
  color: var(--color-charcoal);
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  transition: color var(--duration-fast) ease;
}
.store-mini-cart__qty-btn:hover { color: var(--color-gold); }
.store-mini-cart__qty-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.store-mini-cart__qty-value {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-black);
  min-width: 1rem;
  text-align: center;
}

.store-mini-cart__price {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-black);
}

/* =============================================================================
   ORDER CONFIRMATION (THANK-YOU) PAGE
   Design: full-bleed cream hero → centred content column → product card rows
   Scope: .store-thankyou  |  woocommerce/checkout/thankyou.php
   ============================================================================= */

/* ── Page wrapper ───────────────────────────────────────────────────────────── */
.store-thankyou {
  padding-bottom: var(--space-10);
}

/* ── Hero band: cream background, centred confirmation message ───────────────── */
.store-thankyou__hero {
  background: var(--color-cream);
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  margin-bottom: var(--space-8);
}

.store-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  margin-bottom: var(--space-5);
}

.store-thankyou__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WC injects success notice — pull into hero as the heading */
.store-thankyou .woocommerce-notice--success {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
  font-weight: var(--weight-light);
  letter-spacing: 0.02em;
  color: var(--color-black) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-3) !important;
  display: block !important; /* global .woocommerce-notice sets flex !important — override */
  line-height: var(--leading-tight);
  text-align: center !important;
}

.store-thankyou__hero-sub {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Two-column layout: order details (left) + billing (right) ───────────────── */
.store-thankyou__col--details {
  display: grid;
  grid-template-columns: 1fr; /* single col mobile */
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 768px) {
  .store-thankyou__col--details {
    grid-template-columns: 3fr 2fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

/* ── Order meta: stacked on mobile, horizontal row on desktop ───────────────── */
.store-thankyou__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-sand);
  border-bottom: 1px solid var(--color-sand);
  list-style: none;
}

.store-thankyou__meta-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) 0;
  position: relative;
}

.store-thankyou__meta-item + .store-thankyou__meta-item {
  border-top: 1px solid var(--color-sand);
}

/* Desktop: horizontal row with vertical hairline separators */
@media (min-width: 768px) {
  .store-thankyou__meta {
    flex-direction: row;
    align-items: stretch;
    padding: var(--space-6) 0;
  }

  .store-thankyou__meta-item {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-1);
    padding: 0 var(--space-5);
  }

  .store-thankyou__meta-item:first-child {
    padding-left: 0;
  }

  .store-thankyou__meta-item:last-child {
    padding-right: 0;
  }

  .store-thankyou__meta-item + .store-thankyou__meta-item {
    border-top: none;
    border-left: 1px solid var(--color-sand);
  }
}

.store-thankyou__meta-item dt {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
}

.store-thankyou__meta-item dd {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-black);
  margin: 0;
  text-align: left;
}

/* ── Section label (Order details, Billing address) ─────────────────────────── */
/* !important beats Astra's .woocommerce-page.woocommerce-checkout .woocommerce-order h2 rule
   which adds background:#fbfbfb and a 3-sided gray border. */
.store-thankyou .woocommerce-order-details__title,
.store-thankyou .woocommerce-column__title {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-5) !important;
  padding: 0 0 var(--space-3) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-gold) !important;
  background: none !important;
}

/* ── Billing address: remove Astra's border box around <address> ────────────── */
.store-thankyou .woocommerce-customer-details address {
  border: none !important;
  padding: 0 !important;
}

/* ── Order table: full reset — WC's .woocommerce table.shop_table rule has
   specificity (0,2,1). Using !important to guarantee override. ───────────────── */
.store-thankyou table.shop_table {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

/* Kill every cell border WC sets via .woocommerce table.shop_table td/th */
.store-thankyou table.shop_table td,
.store-thankyou table.shop_table th {
  border: none !important;
  background: none !important;
}

.store-thankyou .woocommerce-table--order-details thead {
  display: none; /* column labels replaced by visual hierarchy */
}

/* Product rows — ONLY a gold bottom border */
.store-thankyou table.shop_table tbody tr {
  border-bottom: 1px solid var(--color-gold) !important;
}

.store-thankyou table.shop_table tbody td {
  padding: var(--space-5) 0 !important;
  vertical-align: middle !important;
}

.store-thankyou .woocommerce-table__product-total {
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-black);
  white-space: nowrap;
  padding-left: var(--space-4) !important;
}

/* Totals foot rows */
.store-thankyou table.shop_table tfoot td,
.store-thankyou table.shop_table tfoot th {
  padding: var(--space-2) 0 !important;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
}

.store-thankyou table.shop_table tfoot th {
  font-weight: var(--weight-regular);
  text-align: left;
  width: 100%; /* expand label column, value column shrinks to content */
}

.store-thankyou table.shop_table tfoot td {
  text-align: right;
  color: var(--color-charcoal);
  white-space: nowrap;
}

/* Grand total row */
.store-thankyou table.shop_table tfoot tr.order-total th,
.store-thankyou table.shop_table tfoot tr.order-total td {
  color: var(--color-black) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-body) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--color-gold) !important;
}

/* ── Product item: thumbnail + name ─────────────────────────────────────────── */
.store-order-item__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.store-order-item__thumb {
  flex: 0 0 clamp(80px, 12vw, 120px);
  width: clamp(80px, 12vw, 120px);
  height: clamp(100px, 15vw, 150px); /* 4:5 ratio */
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-cream);
}

.store-order-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.store-order-item__info {
  flex: 1 1 auto;
  min-width: 0;
}

.store-order-item__info a,
.store-order-item__info > span:not(.product-quantity) {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  color: var(--color-black);
  text-decoration: none;
  display: block;
  line-height: var(--leading-tight);
}

.store-order-item__info a:hover {
  color: var(--color-gold);
}

.store-order-item__info .product-quantity {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-gray);
}

/* Variant meta (e.g. Size: M) */
.store-order-item__info .wc-item-meta,
.store-order-item__info dl.variation {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.store-order-item__info .wc-item-meta dt,
.store-order-item__info .wc-item-meta p,
.store-order-item__info dl.variation dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray);
  font-weight: var(--weight-regular);
  margin: 0;
  padding: 0;
}

.store-order-item__info .wc-item-meta dd,
.store-order-item__info dl.variation dd {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-charcoal);
  margin: 0;
}

/* ── Order details + billing: grid children must be block ───────────────────── */
.store-thankyou .woocommerce-order-details,
.store-thankyou .woocommerce-customer-details {
  display: block !important;
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin-bottom: 0;
}

/* ── Payment note (COD text) — hide, already shown in meta strip ─────────────── */
.store-thankyou .store-thankyou__body > p,
.store-thankyou .woocommerce-order > p:not(.woocommerce-notice),
.store-thankyou__body > .store-thankyou__columns + p {
  display: none !important;
}

/* ── Billing / Shipping address (right column on desktop) ───────────────────── */
.store-thankyou .woocommerce-customer-details {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.store-thankyou .woocommerce-customer-details address {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-style: normal;
  line-height: 1.8;
  color: var(--color-charcoal);
  margin: 0;
}

.store-thankyou .woocommerce-customer-details--phone,
.store-thankyou .woocommerce-customer-details--email {
  margin: 0;
}

.store-thankyou .woocommerce-customer-details--email {
  color: var(--color-gold);
}

/* Side-by-side when shipping is also present */
.store-thankyou .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

@media (max-width: 520px) {
  .store-thankyou .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}