/* ============================================================================
   Klipist — checkout.css  (Acceptance form / WooCommerce checkout redesign)
   Restyles the CLASSIC [woocommerce_checkout] form to the Klipist redesign:
   celebratory hero, 7 numbered step-cards, suede chips, upload tiles, restyled
   order summary + coupon + Payrexx row + terms. Presentation only — every input,
   name, nonce, AJAX hook and the Payrexx gateway stay WooCommerce-owned.
   ALL rules are scoped under .kl-checkout-page so nothing leaks to cart/account.
   Step-card / chip / upload wrappers are injected by js/klipist-checkout.js;
   without JS the form degrades to a fully functional (ungrouped) checkout.
   marker: klipist_checkout
   ============================================================================ */

/* ---- page shell + hero ---- */
.kl-checkout-page{ position:relative; overflow:hidden; min-height:100vh; background:var(--bg,#160000); }
.kl-checkout-page .col-backdrop{ position:absolute; top:0; left:0; right:0; height:780px; pointer-events:none; overflow:hidden; z-index:0; }
.kl-checkout-page .col-backdrop-blur{ position:absolute; inset:-20%; filter:blur(140px) saturate(0.85); opacity:0.9; }
.kl-checkout-page .col-backdrop-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,0,0,0.35) 0%, rgba(22,0,0,0.72) 60%, var(--bg,#160000) 100%); }
.kl-checkout-page .col-backdrop-tint{ position:absolute; inset:0; background:radial-gradient(ellipse at 20% 30%, rgba(22,0,0,0) 0%, rgba(22,0,0,0.5) 100%); }
.kl-checkout-head{ text-align:center; padding:118px 24px 10px; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.kl-checkout-head .kicker{ font-family:var(--ff-header,'Gatwick',sans-serif); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent,#e6c8bd); margin:0 0 20px; }
.kl-checkout-head .taxo-page-h1{ font-family:var(--ff-title,'Bely Display',serif); font-size:clamp(34px,6vw,56px); font-weight:700; letter-spacing:-1px; line-height:1; color:var(--text,#fff); margin:0 0 16px; max-width:760px; }
.kl-checkout-head .taxo-page-h1 em{ font-family:var(--ff-italic,'Cormorant Garamond',serif); font-style:italic; color:var(--accent,#e6c8bd); }
.kl-checkout-head .sf-sub{ max-width:560px; font-size:18px; line-height:1.55; margin:0 auto; color:var(--text-dim,rgba(230,200,189,0.72)); font-family:var(--ff-italic,'Cormorant Garamond',serif); font-style:italic; }
.kl-checkout-wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:40px 24px 120px; }
.kl-checkout-wrap .woocommerce{ width:100%; }

/* ---- the WooCommerce two-column layout collapses to one stacked column ---- */
.kl-checkout-page #customer_details.col2-set,
.kl-checkout-page .woocommerce form.checkout #customer_details{ width:100%; float:none; }
.kl-checkout-page #customer_details .col-1,
.kl-checkout-page #customer_details .col-2{ width:100%; float:none; max-width:none; padding:0; }
.kl-checkout-page #order_review,
.kl-checkout-page #order_review_heading{ width:100%; float:none; }
.kl-checkout-page form.checkout::after{ content:""; display:block; clear:both; }

/* ---- step cards (wrappers injected by JS) ---- */
.kl-checkout-page .kl-step{ background:var(--surface,#1c0606); border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:20px; padding:32px 34px 30px; margin-bottom:22px; box-shadow:0 30px 80px -50px rgba(0,0,0,0.8); }
.kl-checkout-page .kl-step-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.kl-checkout-page .kl-step-num{ flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong,rgba(230,200,189,0.28)); display:flex; align-items:center; justify-content:center; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:13px; font-weight:700; color:var(--accent,#e6c8bd); }
.kl-checkout-page .kl-step-title{ font-family:var(--ff-title,'Bely Display',serif); font-size:20px; color:var(--text,#fff); line-height:1.15; }
.kl-checkout-page .kl-step-sub{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:13px; color:var(--text-muted,rgba(230,200,189,0.42)); margin-top:2px; }

/* ---- generic field rows (WooCommerce .form-row) restyled ---- */
.kl-checkout-page .form-row{ margin:0 0 18px; padding:0; display:block; }
.kl-checkout-page .form-row:last-child{ margin-bottom:0; }
.kl-checkout-page .form-row > label{ display:block; margin:0 0 8px; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--accent,#e6c8bd); }
.kl-checkout-page .form-row .required, .kl-checkout-page .form-row abbr.required{ color:var(--pink,#F7A5B4); border:0; text-decoration:none; }
.kl-checkout-page .form-row .optional{ color:var(--text-muted,rgba(230,200,189,0.42)); font-weight:400; font-size:11px; }
.kl-checkout-page .form-row .input-text,
.kl-checkout-page .form-row select,
.kl-checkout-page .form-row textarea{ width:100%; box-sizing:border-box; background:var(--bg,#160000); border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:11px; padding:13px 15px; font-family:var(--ff-body,'Montserrat',sans-serif); font-size:15px; color:var(--text,#fff); transition:border-color .18s, box-shadow .18s, background .18s; }
.kl-checkout-page .form-row textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.kl-checkout-page .form-row .input-text::placeholder, .kl-checkout-page .form-row textarea::placeholder{ color:var(--text-muted,rgba(230,200,189,0.42)); }
.kl-checkout-page .form-row .input-text:hover, .kl-checkout-page .form-row textarea:hover, .kl-checkout-page .form-row select:hover{ border-color:var(--border-strong,rgba(230,200,189,0.28)); }
.kl-checkout-page .form-row .input-text:focus, .kl-checkout-page .form-row textarea:focus, .kl-checkout-page .form-row select:focus{ outline:none; border-color:var(--accent,#e6c8bd); box-shadow:0 0 0 3px rgba(230,200,189,0.14); background:#1a0303; }
.kl-checkout-page .form-row .description, .kl-checkout-page .thwcfe-description{ margin-top:7px; font-family:var(--ff-body,'Montserrat',sans-serif); font-size:12.5px; color:var(--text-muted,rgba(230,200,189,0.42)); }
/* two-up rows where JS marks them */
.kl-checkout-page .kl-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kl-checkout-page .kl-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:560px){ .kl-checkout-page .kl-row-2, .kl-checkout-page .kl-row-3{ grid-template-columns:1fr; gap:0; } }

/* ---- chips (genre / moods) — JS builds .kl-chips bound to the native <select multiple> ---- */
.kl-checkout-page .kl-chip-hint{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:12.5px; color:var(--text-muted,rgba(230,200,189,0.42)); margin:-2px 0 12px; }
.kl-checkout-page .kl-chip-hint.kl-chip-hint-warn{ color:var(--pink,#F7A5B4); }
.kl-checkout-page .kl-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.kl-checkout-page .kl-chip{ position:relative; }
.kl-checkout-page .kl-chip input{ position:absolute; opacity:0; pointer-events:none; }
.kl-checkout-page .kl-chip label{ display:inline-block; margin:0; padding:8px 15px; border:1px solid var(--border-strong,rgba(230,200,189,0.28)); border-radius:999px; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:13px; font-weight:400; letter-spacing:0; color:var(--text-dim,rgba(230,200,189,0.72)); cursor:pointer; transition:all .15s; user-select:none; }
.kl-checkout-page .kl-chip label:hover{ border-color:var(--accent,#e6c8bd); color:var(--text,#fff); }
.kl-checkout-page .kl-chip input:checked + label{ background:var(--accent,#e6c8bd); border-color:var(--accent,#e6c8bd); color:var(--bg,#160000); font-weight:600; }
.kl-checkout-page .kl-chip input:focus-visible + label{ box-shadow:0 0 0 3px rgba(230,200,189,0.2); }
.kl-checkout-page .kl-chip.kl-chip-disabled label{ opacity:0.4; cursor:not-allowed; }
/* the native select2/select stays in the DOM for data, hidden visually */
.kl-checkout-page .kl-chip-source{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); opacity:0; pointer-events:none; }

/* ---- upload tiles (stills) — JS wraps the real file inputs ---- */
.kl-checkout-page .kl-uploads{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:560px){ .kl-checkout-page .kl-uploads{ grid-template-columns:1fr; } }
.kl-checkout-page .kl-upload{ position:relative; aspect-ratio:16/9; border:1px dashed var(--border-strong,rgba(230,200,189,0.28)); border-radius:13px; background:var(--bg,#160000); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:all .15s; text-align:center; padding:10px; overflow:hidden; }
.kl-checkout-page .kl-upload:hover{ border-color:var(--accent,#e6c8bd); background:#1a0303; }
.kl-checkout-page .kl-upload.kl-has-file{ border-style:solid; border-color:var(--accent-3,#B2DFC3); }
.kl-checkout-page .kl-upload svg{ color:var(--accent,#e6c8bd); opacity:0.85; }
.kl-checkout-page .kl-upload-label{ font-family:var(--ff-header,'Gatwick',sans-serif); font-size:12px; color:var(--text-dim,rgba(230,200,189,0.72)); }
.kl-checkout-page .kl-upload-sub{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:10.5px; color:var(--text-muted,rgba(230,200,189,0.42)); padding:0 4px; word-break:break-word; }
.kl-checkout-page .kl-upload input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.kl-checkout-page .kl-upload-thumb{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* ---- order summary / review table (WooCommerce-owned, restyled in place) ---- */
.kl-checkout-page #order_review .shop_table{ width:100%; background:linear-gradient(135deg, rgba(46,80,79,0.18), rgba(31,6,6,0.4)); border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:16px; border-collapse:separate; overflow:hidden; margin:0 0 18px; }
.kl-checkout-page #order_review .shop_table th,
.kl-checkout-page #order_review .shop_table td{ padding:12px 22px; border:0; font-family:var(--ff-body,'Montserrat',sans-serif); font-size:14px; color:var(--text-dim,rgba(230,200,189,0.72)); text-align:left; }
.kl-checkout-page #order_review .shop_table td:last-child,
.kl-checkout-page #order_review .shop_table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.kl-checkout-page #order_review .shop_table tfoot .order-total th,
.kl-checkout-page #order_review .shop_table tfoot .order-total td{ border-top:1px solid var(--border,rgba(230,200,189,0.14)); font-family:var(--ff-title,'Bely Display',serif); font-size:19px; color:var(--text,#fff); }
.kl-checkout-page #order_review .shop_table .amount{ color:var(--text,#fff); }

/* ---- coupon (the "Have a coupon?" toggle/form, relocated into the Distribution card by JS) ---- */
.kl-checkout-page .checkout_coupon .form-row{ margin-bottom:0; }
.kl-checkout-page .kl-coupon-line{ display:flex; gap:10px; margin:4px 0 6px; }
.kl-checkout-page .kl-coupon-line .input-text{ flex:1; }
.kl-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info,
.kl-checkout-page .checkout_coupon .button,
.kl-checkout-page #order_review .button:not(#place_order){ background:transparent; border:1px solid var(--border-strong,rgba(230,200,189,0.28)); border-radius:11px; padding:0 20px; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:13px; font-weight:600; color:var(--accent,#e6c8bd); cursor:pointer; transition:all .15s; }
.kl-checkout-page .checkout_coupon .button:hover{ border-color:var(--accent,#e6c8bd); background:rgba(230,200,189,0.06); }

/* ---- payment / Payrexx row ---- */
.kl-checkout-page #payment{ background:transparent; border:0; }
.kl-checkout-page #payment ul.payment_methods{ border:0; padding:0; margin:0 0 14px; list-style:none; }
.kl-checkout-page #payment ul.payment_methods li{ border:1px solid rgba(230,200,189,0.16); border-radius:13px; padding:16px 18px; background:rgba(230,200,189,0.04); margin:0; }
.kl-checkout-page #payment ul.payment_methods li label{ color:var(--text,#fff); font-family:var(--ff-header,'Gatwick',sans-serif); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:10px; }
.kl-checkout-page #payment ul.payment_methods li img{ max-height:24px; vertical-align:middle; }
.kl-checkout-page #payment .payment_box{ background:transparent; color:var(--text-muted,rgba(230,200,189,0.42)); font-size:13px; margin:10px 0 0; padding:0; }
.kl-checkout-page #payment .payment_box::before{ display:none; }

/* ---- terms box + agreement checkbox ---- */
.kl-checkout-page .woocommerce-terms-and-conditions{ max-height:160px; overflow-y:auto; border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:12px; padding:18px 20px; background:var(--bg,#160000); font-family:var(--ff-body,'Montserrat',sans-serif); font-size:12.5px; line-height:1.6; color:var(--text-muted,rgba(230,200,189,0.42)); margin:6px 0 16px; }
.kl-checkout-page .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p,
.kl-checkout-page .validate-required.terms{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:13.5px; color:var(--text-dim,rgba(230,200,189,0.72)); }
.kl-checkout-page p.form-row.validate-required label.checkbox{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; color:var(--text-dim,rgba(230,200,189,0.72)); font-family:var(--ff-body,'Montserrat',sans-serif); font-size:13.5px; font-weight:400; letter-spacing:0; }
.kl-checkout-page #terms{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent,#e6c8bd); flex-shrink:0; }
.kl-checkout-page .woocommerce-terms-and-conditions-checkbox-text a{ color:var(--accent-2,#F7E0D3); text-decoration:underline; text-underline-offset:2px; }

/* ---- place order button ---- */
.kl-checkout-page #place_order{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--accent,#e6c8bd); color:var(--bg,#160000); border:none; border-radius:12px; padding:17px 24px; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:15px; font-weight:700; letter-spacing:0.02em; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; float:none; margin-top:6px; }
.kl-checkout-page #place_order:hover{ background:var(--accent-2,#F7E0D3); transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(230,200,189,0.4); }

/* ---- WooCommerce notices restyled to the redesign ---- */
.kl-checkout-page .woocommerce-error,
.kl-checkout-page .woocommerce-message,
.kl-checkout-page .woocommerce-info{ background:var(--surface-2,#271010); border:1px solid var(--border,rgba(230,200,189,0.14)); border-left:3px solid var(--accent,#e6c8bd); border-radius:10px; color:var(--text-dim,rgba(230,200,189,0.72)); font-family:var(--ff-body,'Montserrat',sans-serif); font-size:13.5px; padding:14px 18px; list-style:none; }
.kl-checkout-page .woocommerce-error{ border-left-color:var(--pink,#F7A5B4); }
.kl-checkout-page .woocommerce-message{ border-left-color:var(--accent-3,#B2DFC3); }
.kl-checkout-page .woocommerce-invalid .input-text,
.kl-checkout-page .woocommerce-invalid select,
.kl-checkout-page .woocommerce-invalid textarea{ border-color:var(--pink,#F7A5B4) !important; }

/* ---- select2 (genre/moods fallback if chips JS fails) tidy to match ---- */
.kl-checkout-page .select2-container--default .select2-selection--multiple{ background:var(--bg,#160000); border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:11px; min-height:48px; }
.kl-checkout-page .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--accent,#e6c8bd); color:var(--bg,#160000); border:0; border-radius:999px; padding:3px 10px; }

/* hide WooCommerce notice/coupon-toggle pseudo-icon glyphs (icon font not loaded → tofu);
   the left-border accent is the cue instead. */
.kl-checkout-page .woocommerce-info::before,
.kl-checkout-page .woocommerce-message::before,
.kl-checkout-page .woocommerce-error::before,
.kl-checkout-page .woocommerce-noreviews::before{ content:none !important; display:none !important; }

/* ===== match acceptance-form-preview.html — summary header, inline coupon, pay hint, button arrow ===== */
/* summary table: drop the "Type / Subtotal" header row (preview has none) */
.kl-checkout-page #order_review .shop_table thead{ display:none; }
.kl-checkout-page #order_review_heading{ display:none; }

/* coupon: always-visible inline input + Apply (no "click here" toggle) */
.kl-checkout-page .woocommerce-form-coupon-toggle{ display:none !important; }
.kl-checkout-page .checkout_coupon{ display:flex !important; gap:10px; align-items:stretch; margin:0 0 18px; }
.kl-checkout-page .checkout_coupon .form-row{ margin:0; padding:0; }
.kl-checkout-page .checkout_coupon .form-row-first{ flex:1; }
.kl-checkout-page .checkout_coupon .form-row-last{ flex:0 0 auto; }
.kl-checkout-page .checkout_coupon .input-text{ width:100%; }
.kl-checkout-page .checkout_coupon .button{ height:100%; white-space:nowrap; }
.kl-checkout-page .checkout_coupon .clear{ display:none; }

/* payment reassurance hint under the Payrexx row */
.kl-checkout-page .kl-pay-hint{ margin:12px 0 0; font-family:var(--ff-body,'Montserrat',sans-serif); font-size:12.5px; color:var(--text-muted,rgba(230,200,189,0.42)); }

/* Continue button: arrow icon (label text set via woocommerce_order_button_text filter) */
.kl-checkout-page #place_order{ --kl-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.kl-checkout-page #place_order::after{ content:""; width:15px; height:15px; flex:0 0 auto; background-color:currentColor; -webkit-mask:var(--kl-arrow) center/contain no-repeat; mask:var(--kl-arrow) center/contain no-repeat; }

/* card 7 agreement body spacing */
.kl-checkout-page .kl-step-7-body .form-row.place-order{ margin:0; padding:0; }
.kl-checkout-page .kl-step-7-body .woocommerce-terms-and-conditions-wrapper{ margin-bottom:18px; }

/* show the terms text as an always-visible scroll box (WC collapses it by default) */
.kl-checkout-page .woocommerce-terms-and-conditions{ display:block !important; }

/* 3-up / 2-up field rows (JS wraps these) — grid gap controls spacing */
.kl-checkout-page .kl-row-2, .kl-checkout-page .kl-row-3{ margin-bottom:18px; }
.kl-checkout-page .kl-row-2 > .form-row, .kl-checkout-page .kl-row-3 > .form-row{ margin-bottom:0; }

/* ============================================================================
   DARK-THEME THE WOOCOMMERCE DEFAULTS. WC core ships a light palette via its own
   CSS variables, and the parent theme forces Poppins on inputs — both beat the
   earlier scoped rules on specificity. Set WC's variables (themed, no specificity
   war) on the checkout body, then !important the few field/button/summary props
   that legacy Customizer CSS / Elementor kit-18 still leak into. marker: klipist_checkout_dark
   ============================================================================ */
body.kl-checkout{
  --wc-form-color-background:#160000;
  --wc-form-color-text:#ffffff;
  --wc-form-border-color:rgba(230,200,189,0.16);
  --wc-form-border-width:1px;
  --wc-form-border-radius:11px;
  --wc-content-bg:transparent;
  --wc-secondary:rgba(230,200,189,0.06);
  --wc-secondary-text:#e6c8bd;
  --wc-primary:#e6c8bd;
  --wc-primary-text:#160000;
  --wc-subtext:rgba(230,200,189,0.55);
}
.kl-checkout-page{ font-family:var(--ff-body,'Montserrat',sans-serif); }

/* fields — dark bg, light text, suede border, Montserrat (beats WC core 0,3,1 + parent Poppins + Customizer) */
.kl-checkout-page .form-row .input-text,
.kl-checkout-page .form-row input[type=text],
.kl-checkout-page .form-row input[type=email],
.kl-checkout-page .form-row input[type=url],
.kl-checkout-page .form-row input[type=tel],
.kl-checkout-page .form-row input[type=number],
.kl-checkout-page .form-row select,
.kl-checkout-page .form-row textarea,
.kl-checkout-page .checkout_coupon .input-text{
  background:#160000 !important; color:#ffffff !important;
  border:1px solid rgba(230,200,189,0.16) !important;
  font-family:var(--ff-body,'Montserrat',sans-serif) !important;
}
.kl-checkout-page .form-row .input-text::placeholder,
.kl-checkout-page .form-row textarea::placeholder,
.kl-checkout-page .checkout_coupon .input-text::placeholder{ color:rgba(230,200,189,0.42) !important; }
.kl-checkout-page .form-row .input-text:focus,
.kl-checkout-page .form-row textarea:focus,
.kl-checkout-page .form-row select:focus,
.kl-checkout-page .checkout_coupon .input-text:focus{ border-color:var(--accent,#e6c8bd) !important; background:#1a0303 !important; box-shadow:0 0 0 3px rgba(230,200,189,0.14) !important; }

/* coupon + any secondary button -> suede outline; place order -> filled suede */
.kl-checkout-page .checkout_coupon .button,
.kl-checkout-page #order_review .button:not(#place_order){
  background:transparent !important; color:var(--accent,#e6c8bd) !important;
  border:1px solid var(--border-strong,rgba(230,200,189,0.28)) !important;
  font-family:var(--ff-header,'Gatwick',sans-serif) !important; box-shadow:none !important;
}
.kl-checkout-page .checkout_coupon .button:hover{ background:rgba(230,200,189,0.06) !important; border-color:var(--accent,#e6c8bd) !important; }
.kl-checkout-page #place_order{ background:var(--accent,#e6c8bd) !important; color:var(--bg,#160000) !important; font-family:var(--ff-header,'Gatwick',sans-serif) !important; }
.kl-checkout-page #place_order:hover{ background:var(--accent-2,#F7E0D3) !important; }

/* order summary text/fonts (parent theme leaks Poppins onto table cells) */
.kl-checkout-page #order_review .shop_table,
.kl-checkout-page #order_review .shop_table th,
.kl-checkout-page #order_review .shop_table td,
.kl-checkout-page #order_review .cart-subtotal,
.kl-checkout-page #order_review .woocommerce-remove-coupon,
.kl-checkout-page #payment,
.kl-checkout-page #payment label,
.kl-checkout-page .woocommerce-terms-and-conditions-checkbox-text{ font-family:var(--ff-body,'Montserrat',sans-serif); }
.kl-checkout-page #order_review .shop_table tfoot .order-total th,
.kl-checkout-page #order_review .shop_table tfoot .order-total td{ font-family:var(--ff-title,'Bely Display',serif) !important; color:var(--text,#fff) !important; }
.kl-checkout-page #order_review .woocommerce-remove-coupon{ color:var(--accent,#e6c8bd) !important; }
.kl-checkout-page .cart-discount td, .kl-checkout-page .cart-discount th{ color:var(--accent-3,#B2DFC3) !important; }

/* ===== mobile polish (≤600px) ===== */
@media (max-width:600px){
  .kl-checkout-head{ padding:88px 16px 6px; }
  .kl-checkout-head .taxo-page-h1{ font-size:clamp(30px,9vw,42px); }
  .kl-checkout-head .sf-sub{ font-size:16px; }
  .kl-checkout-wrap{ padding:26px 13px 90px; }
  .kl-checkout-page .kl-step{ padding:22px 18px 20px; border-radius:16px; margin-bottom:16px; }
  .kl-checkout-page .kl-step-head{ gap:11px; margin-bottom:18px; }
  .kl-checkout-page .kl-step-title{ font-size:18px; }
  .kl-checkout-page .kl-step-num{ width:27px; height:27px; }
  /* stack first/last name on phones */
  .kl-checkout-page .form-row-first, .kl-checkout-page .form-row-last{ width:100% !important; float:none !important; margin-right:0 !important; }
  /* coupon: input full width, Apply below */
  .kl-checkout-page .checkout_coupon{ flex-wrap:wrap; }
  .kl-checkout-page .checkout_coupon .form-row-first{ flex:1 1 100%; }
  .kl-checkout-page .checkout_coupon .form-row-last{ flex:1 1 100%; }
  .kl-checkout-page .checkout_coupon .button{ width:100%; }
  /* summary + payment tighter */
  .kl-checkout-page #order_review .shop_table th,
  .kl-checkout-page #order_review .shop_table td{ padding:11px 15px; }
  .kl-checkout-page #payment ul.payment_methods li{ padding:14px 14px; }
  .kl-checkout-page #payment ul.payment_methods li label{ flex-wrap:wrap; gap:8px; font-size:13px; }
}

/* ===== HTML-match adjustments (2026-06-23) ===== */
/* my injected hints */
.kl-checkout-page .kl-hint{ margin:7px 0 0; font-family:var(--ff-body,'Montserrat',sans-serif); font-size:12.5px; color:var(--text-muted,rgba(230,200,189,0.42)); }

/* hide order notes + the section titles ("Billing details" / "Additional information") + genre/moods field labels */
.kl-checkout-page .woocommerce-additional-fields,
.kl-checkout-page #order_comments_field{ display:none !important; }
.kl-checkout-page .woocommerce-billing-fields > h3,
.kl-checkout-page .woocommerce-additional-fields > h3,
.kl-checkout-page #customer_details > h3{ display:none !important; }
.kl-checkout-page #genre_field > label,
.kl-checkout-page #moods_field > label{ display:none !important; }

/* number fields: no spinner clutter */
.kl-checkout-page input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.kl-checkout-page input[type=number]::-webkit-outer-spin-button,
.kl-checkout-page input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* summary box (was teal -> bluish over total). Flat oxblood surface = the "box", table transparent inside */
.kl-checkout-page .kl-summary{ background:var(--surface,#1c0606); border:1px solid var(--border,rgba(230,200,189,0.14)); border-radius:16px; padding:8px 24px 22px; }
.kl-checkout-page .kl-summary #order_review .shop_table{ background:transparent !important; border:0 !important; margin:0; }
.kl-checkout-page .kl-summary #order_review .shop_table th,
.kl-checkout-page .kl-summary #order_review .shop_table td{ padding:11px 0; }
.kl-checkout-page .kl-summary #order_review .shop_table tfoot .order-total th,
.kl-checkout-page .kl-summary #order_review .shop_table tfoot .order-total td{ border-top:1px solid var(--border,rgba(230,200,189,0.14)); padding-top:15px; background:transparent !important; }
.kl-checkout-page .kl-summary .shop_table del{ color:var(--text-muted,rgba(230,200,189,0.42)); margin-right:6px; font-weight:400; }
.kl-checkout-page .kl-summary .shop_table ins{ text-decoration:none; color:var(--text,#fff); }

/* coupon — inline input + "Apply" inside the summary box (matches preview .sf-coupon) */
.kl-checkout-page .kl-summary .checkout_coupon{ display:flex !important; gap:10px; align-items:stretch; margin:14px 0 0; padding:0; border:0; }
.kl-checkout-page .kl-summary .checkout_coupon .form-row{ margin:0; padding:0; }
.kl-checkout-page .kl-summary .checkout_coupon .form-row-first{ flex:1; }
.kl-checkout-page .kl-summary .checkout_coupon .form-row-last{ flex:0 0 auto; }
.kl-checkout-page .kl-summary .checkout_coupon .input-text{ width:100%; }
.kl-checkout-page .kl-summary .checkout_coupon .button{ padding:0 22px !important; }
.kl-checkout-page .kl-summary .checkout_coupon .clear{ display:none; }

/* secure-payment hint with lock */
.kl-checkout-page .kl-pay-hint{ display:flex; align-items:center; gap:7px; }
.kl-checkout-page .kl-pay-hint .kl-lock{ flex:0 0 auto; color:var(--accent-3,#B2DFC3); }

/* empty/required field highlight: use the suede hover colour, NOT red */
.kl-checkout-page .woocommerce-invalid .input-text,
.kl-checkout-page .woocommerce-invalid select,
.kl-checkout-page .woocommerce-invalid textarea,
.kl-checkout-page .woocommerce-invalid-required-field .input-text{ border-color:var(--border-strong,rgba(230,200,189,0.28)) !important; box-shadow:0 0 0 3px rgba(230,200,189,0.08) !important; }
.kl-checkout-page .woocommerce-invalid > label,
.kl-checkout-page .woocommerce-invalid-required-field > label{ color:var(--accent,#e6c8bd) !important; }

/* moods 3-limit: disabled chips truly unclickable; "3 of 3 selected" is mint, never red */
.kl-checkout-page .kl-chip.kl-chip-disabled label{ opacity:0.4; cursor:not-allowed; pointer-events:none; }
.kl-checkout-page .kl-chip-hint-done{ color:var(--accent-3,#B2DFC3); }

/* <ins> (discounted price) renders with a yellow browser highlight by default — kill it */
.kl-checkout-page .shop_table ins,
.kl-checkout-page .kl-summary ins{ background:transparent !important; color:var(--text,#fff) !important; text-decoration:none; }
.kl-checkout-page .shop_table del,
.kl-checkout-page .kl-summary del{ background:transparent !important; }

/* ===== fixes (2026-06-23 #2) ===== */
/* Continue button: Elementor kit-18 button rule was overriding size/radius/padding — force ours */
.kl-checkout-page #place_order{
  width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  background:var(--accent,#e6c8bd) !important; color:var(--bg,#160000) !important; border:none !important;
  border-radius:12px !important; padding:17px 24px !important; margin-top:6px !important; float:none !important;
  font-family:var(--ff-header,'Gatwick',sans-serif) !important; font-size:15px !important; font-weight:700 !important;
  letter-spacing:0.02em !important; text-transform:none !important; line-height:1.2 !important; height:auto !important; min-height:0 !important;
}
.kl-checkout-page #place_order:hover{ background:var(--accent-2,#F7E0D3) !important; }

/* hide the big "3 still images (from the film…) Min. size 1920×1080px:" instruction (card sub covers it) */
.kl-checkout-page #stillimages_field{ display:none !important; }

/* genre + moods now SHOW their titles ("Genres" / "Moods") — un-hide the field labels */
.kl-checkout-page #genre_field > label,
.kl-checkout-page #moods_field > label{ display:block !important; }

/* "Payment method" title above the Payrexx row */
.kl-checkout-page .kl-pay-label{ margin:4px 0 10px; font-family:var(--ff-header,'Gatwick',sans-serif); font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--accent,#e6c8bd); }

/* breathing room above the Payment method title */
.kl-checkout-page .kl-pay-label{ margin-top:26px; }

/* selected chip — driven by an explicit JS class (kl-chip-on) so it can never be lost to a
   :checked cascade quirk or a .woocommerce-invalid bleed on the field */
.kl-checkout-page .kl-chip.kl-chip-on label{ background:var(--accent,#e6c8bd) !important; border-color:var(--accent,#e6c8bd) !important; color:var(--bg,#160000) !important; font-weight:600 !important; }

/* chip colours must beat WooCommerce core .form-row.woocommerce-invalid label {color:--wc-red}
   (which bleeds red into chip labels when the field is flagged). !important wins over WC core
   (non-important); kl-chip-on is more specific so the selected suede always wins. */
.kl-checkout-page .kl-chips .kl-chip label{ color:var(--text-dim,rgba(230,200,189,0.72)) !important; background:transparent !important; }
.kl-checkout-page .kl-chips .kl-chip.kl-chip-on label{ color:var(--bg,#160000) !important; background:var(--accent,#e6c8bd) !important; border-color:var(--accent,#e6c8bd) !important; font-weight:600 !important; }

/* ===== stills: style the thwcfe file field IN PLACE as a tile (FIX: keeps the real
   file picker + AJAX upload that populates the required value field) ===== */
.kl-checkout-page .kl-upload-field{ position:relative; margin:0 !important; padding:0 !important; aspect-ratio:16/9; border:1px dashed var(--border-strong,rgba(230,200,189,0.28)); border-radius:13px; background:var(--bg,#160000); overflow:hidden; display:block; cursor:pointer; }
.kl-checkout-page .kl-upload-field:hover{ border-color:var(--accent,#e6c8bd); background:#1a0303; }
.kl-checkout-page .kl-upload-field > label.required_field, .kl-checkout-page .kl-upload-field > label{ display:none !important; }
.kl-checkout-page .kl-upload-deco{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:10px; pointer-events:none; }
.kl-checkout-page .kl-upload-deco svg{ color:var(--accent,#e6c8bd); opacity:.85; }
.kl-checkout-page .kl-upload-deco .kl-upload-label{ font-family:var(--ff-header,'Gatwick',sans-serif); font-size:12px; color:var(--text-dim,rgba(230,200,189,0.72)); }
.kl-checkout-page .kl-upload-deco .kl-upload-sub{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:10.5px; color:var(--text-muted,rgba(230,200,189,0.42)); }
/* thwcfe wrapper fills the tile; preview image covers it once uploaded */
.kl-checkout-page .kl-upload-field .woocommerce-input-wrapper{ position:absolute !important; inset:0; z-index:1; margin:0; padding:0; display:block; }
.kl-checkout-page .kl-upload-field .thwcfe-upload-preview{ position:absolute; inset:0; margin:0; }
.kl-checkout-page .kl-upload-field img{ width:100%; height:100%; object-fit:cover; display:block; }
.kl-checkout-page .kl-upload-field img[src=""], .kl-checkout-page .kl-upload-field img:not([src]){ display:none; }
/* the real file picker covers the whole tile (transparent, clickable, on top) */
.kl-checkout-page .kl-upload-field input[type=file]{ position:absolute !important; inset:0; width:100% !important; height:100% !important; opacity:0; cursor:pointer; z-index:2; }
/* upload status/msg as a small caption */
.kl-checkout-page .kl-upload-field .thwcfe-file-upload-status, .kl-checkout-page .kl-upload-field .thwcfe-file-upload-msg{ position:absolute; bottom:3px; left:0; right:0; z-index:3; font-size:10px; line-height:1.2; text-align:center; color:var(--accent-3,#B2DFC3); pointer-events:none; }

/* stills: clean UPLOADED state — hide the decorative icon/label so it no longer overlaps the
   thwcfe thumbnail/filename/remove, and free the remove "X" (picker overlay no longer intercepts) */
.kl-checkout-page .kl-upload-field.kl-has-file .kl-upload-deco{ display:none !important; }
.kl-checkout-page .kl-upload-field.kl-has-file input[type=file]{ pointer-events:none !important; }
.kl-checkout-page .kl-upload-field .woocommerce-input-wrapper{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; text-align:center; }
.kl-checkout-page .kl-upload-field img{ width:auto !important; height:auto !important; max-width:72%; max-height:52px; object-fit:contain; border-radius:6px; }
.kl-checkout-page .kl-upload-field .thwcfe-upload-preview{ font-family:var(--ff-body,'Montserrat',sans-serif); font-size:11px; line-height:1.3; color:var(--text-dim,rgba(230,200,189,0.72)); max-width:100%; word-break:break-word; }
.kl-checkout-page .kl-upload-field .thwcfe-upload-preview a{ color:var(--text-dim,rgba(230,200,189,0.72)); text-decoration:none; }
.kl-checkout-page .kl-upload-field [class*="remove"]{ color:var(--pink,#F7A5B4) !important; cursor:pointer; font-weight:700; }

/* uploaded still = full-bleed thumbnail + corner remove X (replaces the cramped top row) */
.kl-checkout-page .kl-upload-field.kl-has-file .woocommerce-input-wrapper{ display:block !important; padding:0 !important; }
.kl-checkout-page .kl-upload-field.kl-has-file .thwcfe-uloaded-files{ position:absolute; inset:0; display:block !important; margin:0; padding:0; }
.kl-checkout-page .kl-upload-field.kl-has-file .thwcfe-upload-preview{ position:absolute; inset:0; margin:0 !important; font-size:0; }
.kl-checkout-page .kl-upload-field.kl-has-file .thwcfe-upload-preview img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover; border-radius:12px; }
.kl-checkout-page .kl-upload-field.kl-has-file .thwcfe-remove-uploaded{ position:absolute; top:7px; right:7px; z-index:6; width:26px; height:26px; border-radius:50%; background:rgba(22,0,0,0.82); border:1px solid rgba(230,200,189,0.3); color:#fff !important; font-size:13px !important; line-height:1; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; }
.kl-checkout-page .kl-upload-field.kl-has-file .thwcfe-remove-uploaded:hover{ background:var(--pink,#F7A5B4); color:var(--bg,#160000) !important; }

/* entrance fade-up — matches the site's .kl-reveal feel (.6s ease, 18px rise), staggered via --kl-i.
   animation-fill-mode:both keeps elements hidden during their delay so there is no flash; CSS-only
   so the hero animates even before JS, and reduced-motion shows everything instantly. */
@keyframes klCheckoutFade { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.kl-checkout-page .kl-cfade{ animation: klCheckoutFade .6s ease both; animation-delay: calc(var(--kl-i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce){ .kl-checkout-page .kl-cfade{ animation:none !important; } }