/*!
  Funnel / Checkout Styles (lean)
  - Two-column layout (content + right checkout rail)
  - Single-column checkout except First/Last on one row
  - Brand headings, compact payment area, tidy bumps
*/

/* ---- Layout tokens ---- */
:root{
  /* Right column width: grows between 460–560px, responsive */
  --checkout-rail: clamp(460px, 38vw, 560px);
}

/* ===== Utilities ===== */
.hf-hide{ display:none !important; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Shell layout ===== */
.hf-wrap{ max-width:1200px; margin:0 auto; padding:20px; }

/* >>> This is the bit that went missing <<< */
.hf-grid{
  display:grid;
  grid-template-columns: 1fr var(--checkout-rail);
  gap:40px;
  align-items:start;
}
.hf-left{ min-width:0; }
.hf-right{ width:var(--checkout-rail); }
.hf-sticky{ position:sticky; top:24px; }

@media (max-width:960px){
  .hf-grid{ grid-template-columns:1fr; gap:20px; }
  .hf-right{ width:auto; }
}

/* Keep left-side media responsive & aligned */
.hf-left iframe,
.hf-left video,
.hf-left .wp-video,
.hf-left .wp-video-shortcode,
.hf-left .mejs-container{ display:block; max-width:100% !important; width:100% !important; height:auto; }
.hf-left img{ max-width:100%; height:auto; display:block; }

/* Optional hero image on the right */
.hf-right .hf-product-hero{ margin:0 0 12px 0; border-radius:12px; overflow:hidden; }
.hf-right .hf-product-hero img{ display:block; width:100%; height:auto; }

/* ===== Headings (content + sidebar) ===== */
.entry-content h1,.entry-content h2,.entry-content h3,
.hf-right h1,.hf-right h2,.hf-right h3{
  color:#038746; font-weight:800; font-family:var(--font-heading, "Merriweather", Georgia, serif);
}
.entry-content h1{ font-size:clamp(32px,3.2vw,46px); }
.entry-content h2{ font-size:clamp(26px,2.6vw,34px); }
.entry-content h3{ font-size:clamp(20px,2.1vw,26px); }

/* ===== Checkout form ===== */
/* Single column by default */
.hf-right .woocommerce form.checkout .form-row,
.hf-right .woocommerce form .form-row-first,
.hf-right .woocommerce form .form-row-last{
  float:none !important; width:100% !important; margin-right:0 !important; clear:both !important;
}
.hf-right .woocommerce form .form-row{ margin-bottom:14px; }
.hf-right .woocommerce form .form-row label{
  font-weight:600; color:#1F3A2A; margin-bottom:6px; font-size:14px;
}
.hf-right .woocommerce form .form-row input.input-text,
.hf-right .woocommerce form .form-row textarea,
.hf-right .woocommerce form .form-row select{
  width:100% !important;
  border:2px solid #f0f0f0; border-radius:8px; padding:12px 14px; font-size:16px;
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.hf-right .woocommerce form .form-row input:focus,
.hf-right .woocommerce form .form-row textarea:focus,
.hf-right .woocommerce form .form-row select:focus{
  border-color:#038746; box-shadow:0 0 0 3px rgba(3,135,70,.1); outline:0;
}

/* Only FIRST + LAST share a row on wider screens */
@media (min-width:600px){
  .hf-right form.checkout #billing_first_name_field,
  .hf-right form.checkout #billing_last_name_field{
    float:left !important; width:48% !important; clear:none !important;
  }
  .hf-right form.checkout #billing_first_name_field{ margin-right:4% !important; }
}

/* Select2 full width */
.hf-right .woocommerce form .select2-container{ width:100% !important; }

/* ===== Order review (minimal borders) ===== */
.hf-right .woocommerce-checkout-review-order{ background:transparent; border:0; padding:0; }
.hf-right .woocommerce-checkout-review-order-table{ width:100%; border:0; margin:0 0 16px 0; }
.hf-right .woocommerce-checkout-review-order-table th,
.hf-right .woocommerce-checkout-review-order-table td{ border:0; padding:10px 0; background:transparent; }
.hf-right .woocommerce-checkout-review-order-table thead th{
  font-family:var(--font-heading); color:#1F3A2A; font-size:18px; font-weight:800;
  border-bottom:2px solid #E8E8E8; padding-bottom:12px;
}
.hf-right .woocommerce-checkout-review-order-table tbody td{ border-bottom:1px solid #E8E8E8; }

/* ===== Payment area (compact) ===== */
.hf-right .woocommerce-checkout #payment{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
.hf-right .woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid #E8E8E8; padding:8px 0 10px; margin:0 0 10px; list-style:none;
}
.hf-right .woocommerce-checkout #payment ul.payment_methods li{ padding:6px 0; margin:0; border:0; }
.hf-right .woocommerce-checkout #payment .payment_box{
  margin:6px 0 0; padding:10px 12px; background:#f7f7f7; border:1px solid #E8E8E8; border-radius:8px;
}

/* Hide PayPal “Pay in 4” etc. (belt & suspenders) */
form.checkout [data-pp-message],
.ppcp-messages,.ppcp-messages-container,.wc-ppcp-shortcut-messaging,#ppc-button-message{ display:none !important; }

/* Place order button */
.hf-right .woocommerce #place_order{
  width:100%; padding:14px; margin-top:12px; font-size:18px; font-weight:800;
  background:#038746 !important; color:#fff !important; border:0 !important; border-radius:12px !important;
  box-shadow:0 6px 20px rgba(3,135,70,.30) !important; transition:transform .15s, box-shadow .15s;
}
.hf-right .woocommerce #place_order:hover{
  background:#026236 !important; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(3,135,70,.38) !important;
}

/* Terms: keep one line (desktop), wrap on very small screens */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
@media (max-width:420px){
  .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{ white-space:normal; }
}

/* ===== Order bumps (small thumb, neat) ===== */
#hf-order-bumps{ margin:16px 0 18px; background:#f6faf8; border-radius:12px; padding:12px; }
#hf-order-bumps .hf-bump-title{
  font-weight:800; margin-bottom:.5rem; font-family:var(--font-heading); color:#1F3A2A;
}
#hf-order-bumps .hf-bump-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:.6rem; align-items:center; padding:.25rem 0; margin:.2rem 0;
}
#hf-order-bumps .hf-bump-imgbtn{ all:unset; cursor:pointer; display:block; }
#hf-order-bumps .hf-bump-thumb{ width:64px; height:64px; overflow:hidden; border:1px solid #E8E8E8; border-radius:8px; display:block; }
#hf-order-bumps .hf-bump-img{ width:100%; height:100%; object-fit:cover; display:block; }
#hf-order-bumps .hf-bump-copy{ line-height:1.3; min-width:0; }
#hf-order-bumps .hf-bump-name{ font-weight:800; color:#1F3A2A; }
#hf-order-bumps .hf-bump-desc{ font-size:13px; color:#555; margin-top:2px; }
#hf-order-bumps .hf-bump-cta-col{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
#hf-order-bumps .hf-price-stack{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; gap:2px; }
#hf-order-bumps .hf-price-was{ font-size:12px; opacity:.8; color:#555; }
#hf-order-bumps .hf-price-now{ font-size:14px; font-weight:800; color:#1F3A2A; }
#hf-order-bumps .hf-bump-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:0; font-weight:800; cursor:pointer;
  background:#038746; color:#fff;
}
#hf-order-bumps .hf-bump-btn.is-added{ filter:saturate(1.05); }

/* ===== Social proof toast (bottom-left) ===== */
#hf-toast{
  position:fixed; z-index:9999; left:18px; bottom:18px; pointer-events:none;
  max-width:min(88vw,360px);
  font-family:var(--font-body,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
}
#hf-toast .hf-toast-item{
  background:rgba(31,58,42,.97); color:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18); line-height:1.25; font-size:14px; font-weight:600;
  transform:translateY(8px); opacity:0; transition:transform .28s ease, opacity .28s ease;
}
#hf-toast.is-on .hf-toast-item{ transform:translateY(0); opacity:1; }
@media (max-width:480px){
  #hf-toast{ left:12px; right:12px; max-width:none; }
  #hf-toast .hf-toast-item{ font-size:13px; padding:10px 12px; }
}
/* ===== Checkout column width (desktop) ===== */
:root{
  /* tighten the checkout rail a touch */
  --checkout-rail: clamp(360px, 30vw, 460px);
}
@supports (display:grid){
  .hf-grid{
    display:grid;
    grid-template-columns: 1fr var(--checkout-rail);
    gap: 40px;
    align-items: start;
  }
}
/* fallback if your template is using flex */
.hf-right{ width:100%; max-width: var(--checkout-rail); margin-left:auto; }

/* ===== Make billing fields actually stretch ===== */
.hf-right .woocommerce-billing-fields__field-wrapper{
  /* some themes make this grid/flex with 2 columns — disable that */
  display: block !important;
  max-width: 100% !important;
}

/* every field full width by default */
.hf-right .woocommerce-billing-fields__field-wrapper .form-row{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
  margin-right: 0 !important;
}

/* inputs/selects/select2 fill the row */
.hf-right .woocommerce-billing-fields__field-wrapper input,
.hf-right .woocommerce-billing-fields__field-wrapper select,
.hf-right .woocommerce-billing-fields__field-wrapper .select2-container{
  width: 100% !important;
  max-width: 100% !important;
}

/* only FIRST + LAST share a row on wider screens */
@media (min-width: 600px){
  .hf-right #billing_first_name_field,
  .hf-right #billing_last_name_field{
    float: left !important;
    clear: none !important;
    width: 48% !important;
  }
  .hf-right #billing_first_name_field{ margin-right: 4% !important; }
}

/* ====== HARD OVERRIDES: make billing fields full-width ====== */
/* Checkout rail width (so the column isn't gigantic) */
:root{ --checkout-rail: clamp(380px, 32vw, 500px); }

.page-template-template-funnel-checkout .hf-grid{
  display:grid; grid-template-columns: 1fr var(--checkout-rail); gap:40px; align-items:start;
}
.page-template-template-funnel-checkout .hf-right{
  width:100%; max-width:var(--checkout-rail); margin-left:auto;
}

/* 1) Kill any grid/flex/column sets on the billing wrapper */
.page-template-template-funnel-checkout .hf-right .woocommerce-billing-fields__field-wrapper{
  display:block !important;
  grid-template-columns:none !important;
  max-width:100% !important;
}

/* 2) Every field row fills the rail */
.page-template-template-funnel-checkout .hf-right .woocommerce-billing-fields__field-wrapper .form-row,
.page-template-template-funnel-checkout .hf-right .woocommerce-billing-fields .form-row,
.page-template-template-funnel-checkout .hf-right .col2-set .form-row{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  margin-right:0 !important;
  clear:both !important;
}

/* 3) Inputs/selects truly stretch */
.page-template-template-funnel-checkout .hf-right .woocommerce-input-wrapper,
.page-template-template-funnel-checkout .hf-right input.input-text,
.page-template-template-funnel-checkout .hf-right select,
.page-template-template-funnel-checkout .hf-right textarea,
.page-template-template-funnel-checkout .hf-right .select2-container{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* 4) Only First/Last share a row on desktop */
@media (min-width:600px){
  .page-template-template-funnel-checkout .hf-right #billing_first_name_field,
  .page-template-template-funnel-checkout .hf-right #billing_last_name_field{
    float:left !important; clear:none !important; width:48% !important;
  }
  .page-template-template-funnel-checkout .hf-right #billing_first_name_field{ margin-right:4% !important; }
}
/* ===== Woo "col2-set" override: make billing take full width ===== */
.page-template-template-funnel-checkout .hf-right #customer_details .col2-set{
  display:block !important;
}

.page-template-template-funnel-checkout .hf-right #customer_details .col-1,
.page-template-template-funnel-checkout .hf-right #customer_details .col-2{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

/* Hide the empty shipping column (we disabled shipping fields) */
.page-template-template-funnel-checkout .hf-right #customer_details .col-2{
  display:none !important;
}

/* Inputs/selects still stretch */
.page-template-template-funnel-checkout .hf-right .woocommerce-input-wrapper,
.page-template-template-funnel-checkout .hf-right input.input-text,
.page-template-template-funnel-checkout .hf-right select,
.page-template-template-funnel-checkout .hf-right textarea,
.page-template-template-funnel-checkout .hf-right .select2-container{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* --- WP align/center shims (we removed wp-block-library & global-styles) --- */

/* Text alignment utilities used by Gutenberg blocks */
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right;  }
.has-text-align-left   { text-align: left;   }

/* Classic align center for media/figures */
.aligncenter,
img.aligncenter,
figure.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Button block + general button centering */
.wp-block-buttons { text-align: center; }
.wp-block-button { display: inline-block; }
.wp-block-button__link,
.wp-element-button { display: inline-block; }

/* If your buttons are block-level and should center on the line */
.button, .button.alt, .woocommerce a.button,
.wp-block-button .wp-block-button__link,
.wp-element-button {
  /* keep them inline by default; remove the next 2 lines if you prefer left align */
  display: inline-block;
  vertical-align: middle;
}

/* Headings that relied on has-text-align-center */
h1.has-text-align-center,
h2.has-text-align-center,
h3.has-text-align-center,
h4.has-text-align-center,
h5.has-text-align-center,
h6.has-text-align-center { text-align: center; }

/* Safety: a generic helper you can add to any wrapper to center its children */
.text-center, .hf-center { text-align: center; }

/* ====== Mobile: force a single column and let the rail shrink ====== */

/* Make the grid explicit, with a 0-min content track so it never gets squeezed weirdly */
.hf-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,var(--checkout-rail));
  gap:40px;
  align-items:start;
}

/* Collapse to one column on narrow viewports */
@media (max-width: 900px){
  .hf-grid{ grid-template-columns:1fr !important; }
  .hf-sticky{ position:static; } /* avoid sticky overlapping on mobile */
}

/* Below 520px, let the checkout rail be 100% (no 420px minimum) */
@media (max-width: 520px){
  :root{ --checkout-rail: 100%; }
  .hf-right{ max-width:none !important; width:100% !important; }
}

/* Defensive: make sure left & right are full-width when stacked */
@media (max-width: 900px){
  .hf-left, .hf-right{ width:auto !important; max-width:none !important; }
}