/* =========================================================================
   Fehno Commerce — Branded checkout / cart / account / thank-you
   Scoped under body.fehno-checkout, body.fehno-cart, body.fehno-account,
   body.fehno-thankyou so it never leaks into other pages.
   ========================================================================= */

:root {
	--fc-purple:       #502878;
	--fc-purple-deep:  #23194B;
	--fc-purple-soft:  #6b3b9a;
	--fc-ink:          #120a1f;
	--fc-ink-2:        #1a112d;
	--fc-paper:        #f6efe0;
	--fc-paper-2:      #efeadd;
	--fc-cream:        #fffaf0;
	--fc-text:         #1a1a1a;
	--fc-text-soft:    #3a3a3a;
	--fc-muted:        #6a6a6a;
	--fc-border:       #e5e0d3;
	--fc-border-soft:  #efeadd;
	--fc-border-dark:  #2a1d45;
	--fc-highlight:    #fde68a;
	--fc-success:      #8be2a8;
	--fc-danger:       #ff6565;
	--fc-radius:       14px;
	--fc-radius-sm:    10px;
	--fc-shadow-card:  0 1px 0 rgba(26,10,40,0.04), 0 14px 40px -18px rgba(26,10,40,0.22);
}

/* ---- Global body styles only on commerce pages ---- */
body.fehno-checkout,
body.fehno-cart,
body.fehno-account,
body.fehno-thankyou {
	background: var(--fc-ink) !important;
	color: #f3eefb;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Hide theme chrome (header/footer template parts) on commerce pages */
body.fehno-checkout header.wp-block-template-part,
body.fehno-checkout footer.wp-block-template-part,
body.fehno-thankyou header.wp-block-template-part,
body.fehno-thankyou footer.wp-block-template-part {
	display: none !important;
}
body.fehno-cart header.wp-block-template-part,
body.fehno-account header.wp-block-template-part {
	/* Keep minimal on cart/account in case user wants nav — but style flat */
}

/* Unconstrain main layout */
body.fehno-checkout .wp-site-blocks,
body.fehno-thankyou .wp-site-blocks,
body.fehno-cart .wp-site-blocks,
body.fehno-account .wp-site-blocks {
	background: var(--fc-ink);
}
body.fehno-checkout main,
body.fehno-thankyou main,
body.fehno-cart main,
body.fehno-account main {
	max-width: none !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
}
body.fehno-checkout .entry-content,
body.fehno-thankyou .entry-content,
body.fehno-cart .entry-content,
body.fehno-account .entry-content,
body.fehno-checkout .wp-block-post-content,
body.fehno-thankyou .wp-block-post-content,
body.fehno-cart .wp-block-post-content,
body.fehno-account .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.fehno-checkout .wp-block-post-title,
body.fehno-cart .wp-block-post-title,
body.fehno-account .wp-block-post-title,
body.fehno-thankyou .wp-block-post-title {
	display: none;
}

/* =========================================================================
   CHECKOUT SHELL — top bar + intro
   ========================================================================= */

.fehno-checkout-shell {
	background: var(--fc-ink);
	padding: 28px clamp(20px, 4vw, 56px) 8px;
}

.fehno-checkout-topbar {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fehno-checkout-logo {
	font-family: 'Outfit', sans-serif;
	font-weight: 900;
	letter-spacing: 0.25em;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	display: inline-block;
}

.fehno-checkout-secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}
.fehno-checkout-secure svg { color: var(--fc-highlight); }

.fehno-checkout-intro {
	max-width: 1120px;
	margin: 0 auto;
	padding: 36px 0 28px;
	text-align: left;
}
.fehno-checkout-intro .fehno-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fc-highlight);
	margin: 0 0 12px;
}
.fehno-checkout-intro h1 {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.08;
	margin: 0 0 10px;
	color: #fff;
	letter-spacing: -0.02em;
}
.fehno-checkout-intro .fehno-lead {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: 1.55;
	max-width: 560px;
}

/* =========================================================================
   CHECKOUT LAYOUT — 2 columns on desktop
   ========================================================================= */

.fehno-checkout .woocommerce {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px) 48px;
}

.fehno-checkout .woocommerce-notices-wrapper {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}
.fehno-checkout .woocommerce-notices-wrapper:empty {
	display: none;
}
.fehno-checkout .woocommerce-error,
.fehno-checkout .woocommerce-message,
.fehno-checkout .woocommerce-info {
	background: #1a112d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 3px solid var(--fc-highlight);
	color: #f3eefb;
	border-radius: var(--fc-radius-sm);
	padding: 14px 18px;
	list-style: none;
	font-size: 14px;
	margin: 0 0 16px;
}
.fehno-checkout .woocommerce-error li,
.fehno-checkout .woocommerce-message li,
.fehno-checkout .woocommerce-info li { list-style: none; }

/* Login / coupon prompts — always hidden; coupon replaced by custom card below */
.fehno-checkout .woocommerce-form-login-toggle,
.fehno-checkout .woocommerce-form-coupon-toggle,
.fehno-checkout .woocommerce-form-coupon {
	display: none !important;
}

/* ── Custom coupon card ──────────────────────────────────────────────────────
   Rendered inside #customer_details via woocommerce_after_checkout_billing_form.
   No grid placement needed — it flows naturally at the bottom of the left card.
   A border-top separator distinguishes it from the billing fields above. */
.fehno-checkout .fehno-coupon-card {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--fc-border);
	color: var(--fc-text);
}

.fehno-coupon-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--fc-text);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

.fehno-coupon-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
/* Input inherits the global .input-text styles; override width/height only */
.fehno-coupon-row .input-text,
.fehno-coupon-row input[type="text"] {
	flex: 1 !important;
	min-width: 0 !important;
	width: auto !important;
}

.fehno-coupon-btn {
	flex-shrink: 0;
	padding: 0 22px;
	height: 48px;
	background: var(--fc-purple);
	color: #fff;
	border: 0;
	border-radius: var(--fc-radius-sm);
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
	white-space: nowrap;
}
.fehno-coupon-btn:hover:not(:disabled) { background: var(--fc-purple-soft); }
.fehno-coupon-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.fehno-coupon-feedback {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	min-height: 0;
}
.fehno-coupon-feedback:empty { display: none; }
.fehno-coupon-feedback.is-success { color: #1a7c3e; }
.fehno-coupon-feedback.is-error   { color: var(--fc-danger); }


/* ── Validation errors ──────────────────────────────────────────────────────
   WooCommerce prepends .woocommerce-NoticeGroup-checkout as the first child
   of form.checkout (via JS on failed submit).  Because form.checkout is a
   CSS grid with #customer_details and #order_review both pinned to grid-row:1,
   the auto-placed notice group gets pushed to row 2 — below the payment
   section and off-screen on mobile.  The JS in checkout.js moves it to
   .woocommerce-notices-wrapper (above the form) and scrolls to it.  These
   rules are a belt-and-suspenders fallback in case the notice is not moved:
   force it to span all columns and appear at the visual start of the form.  */
.fehno-checkout form.checkout > .woocommerce-NoticeGroup,
.fehno-checkout form.checkout > .woocommerce-NoticeGroup-checkout {
	grid-column: 1 / -1;   /* span both desktop columns */
	grid-row: 1;            /* force to first row */
	min-width: 0;
	margin-bottom: 8px;
}
/* When the notice occupies row 1, nudge pinned columns to row 2 so they
   don't overlap.  :has() is supported in all browsers since mid-2023. */
.fehno-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #customer_details,
.fehno-checkout form.checkout:has(> .woocommerce-NoticeGroup-checkout) > #customer_details {
	grid-row: 2;
}
.fehno-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review,
.fehno-checkout form.checkout:has(> .woocommerce-NoticeGroup-checkout) > #order_review {
	grid-row: 2;
}
/* .woocommerce-notices-wrapper scroll anchor — give a small top margin so
   the error isn't flush with the page edge when scrolled into view */
.fehno-checkout .woocommerce-notices-wrapper {
	scroll-margin-top: 16px;
}
/* Ensure error list inside .woocommerce-notices-wrapper has no extra margin */
.fehno-checkout .woocommerce-notices-wrapper .woocommerce-error:last-child {
	margin-bottom: 0;
}

/* ── Invalid / valid field states ────────────────────────────────────────── */
.fehno-checkout .form-row.woocommerce-invalid .input-text,
.fehno-checkout .form-row.woocommerce-invalid input[type="text"],
.fehno-checkout .form-row.woocommerce-invalid input[type="email"],
.fehno-checkout .form-row.woocommerce-invalid input[type="tel"],
.fehno-checkout .form-row.woocommerce-invalid input[type="number"],
.fehno-checkout .form-row.woocommerce-invalid select,
.fehno-checkout .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--fc-danger) !important;
	box-shadow: 0 0 0 3px rgba(255, 101, 101, 0.15) !important;
}
.fehno-checkout .form-row.woocommerce-validated .input-text,
.fehno-checkout .form-row.woocommerce-validated input[type="text"],
.fehno-checkout .form-row.woocommerce-validated input[type="email"],
.fehno-checkout .form-row.woocommerce-validated input[type="tel"],
.fehno-checkout .form-row.woocommerce-validated input[type="number"],
.fehno-checkout .form-row.woocommerce-validated select,
.fehno-checkout .form-row.woocommerce-validated .select2-selection--single {
	border-color: var(--fc-success) !important;
}

/* Form layout — 2-column grid.
   BUG FIX: WooCommerce injects 4 direct children into form.checkout besides
   #customer_details and #order_review:
     • wc-order-attribution-inputs  (custom element, renders nothing)
     • h3.fehno-review-heading       (our PHP-injected heading)
     • h3#order_review_heading       (WC's own heading)
   Without explicit grid placement these ghost items steal column 2 row 1,
   pushing #order_review to col 1 row 3.  Fixed by:
     1. column-gap only (no row-gap on phantom rows)
     2. collapsing ghost items via display:none
     3. pinning #customer_details and #order_review with grid-column/grid-row */
.fehno-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr;
	column-gap: 32px;
	align-items: start;
}

/* Collapse WC ghost grid items so they take zero space */
.fehno-checkout form.checkout > wc-order-attribution-inputs {
	display: none;
}
.fehno-checkout form.checkout > h3 {
	display: none;
}

/* Explicit column/row placement — immune to injected sibling count */
.fehno-checkout #customer_details {
	grid-column: 1;
	grid-row: 1;
}
.fehno-checkout #order_review {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 900px) {
	.fehno-checkout form.checkout {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 24px; /* breathing room between details card and order summary on mobile */
	}
	.fehno-checkout #customer_details {
		grid-column: 1;
		grid-row: 1;
	}
	.fehno-checkout #order_review {
		grid-column: 1;
		grid-row: 2;
		position: static; /* sticky makes no sense when stacked */
	}
}

/* ==== LEFT COLUMN ==== */

.fehno-checkout #customer_details {
	background: #fff;
	color: var(--fc-text);
	border-radius: var(--fc-radius);
	padding: clamp(22px, 3vw, 32px);
	box-shadow: var(--fc-shadow-card);
	/* min-width: 0 is required on grid items to prevent overflow of their track */
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.fehno-checkout #customer_details .col-1,
.fehno-checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	max-width: none !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}
.fehno-checkout #customer_details .col-2 {
	display: none; /* shipping column — not needed for digital */
}
/* Empty WC-generated sections inside col-1 */
.fehno-checkout .woocommerce-account-fields,
.fehno-checkout .woocommerce-additional-fields {
	display: none;
}

.fehno-checkout .woocommerce-billing-fields h3,
.fehno-checkout .woocommerce-additional-fields h3 {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 20px;
	margin: 0 0 18px;
	letter-spacing: -0.01em;
	color: var(--fc-text);
}
.fehno-checkout .woocommerce-billing-fields h3::before {
	content: "1";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fc-purple);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	margin-right: 10px;
	vertical-align: middle;
}

/* Fields */
.fehno-checkout .woocommerce-billing-fields__field-wrapper {
	/* clearfix — contains the inline-block form-row-first/last halves */
	overflow: hidden;
}
.fehno-checkout .form-row {
	padding: 0;
	margin: 0 0 14px;
	box-sizing: border-box;
	max-width: 100%;
}
.fehno-checkout .form-row-first,
.fehno-checkout .form-row-last {
	width: calc(50% - 7px);
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
.fehno-checkout .form-row-first { margin-right: 14px; }
/* woocommerce-input-wrapper must be block so the child input stretches 100% */
.fehno-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
@media (max-width: 540px) {
	.fehno-checkout .form-row-first,
	.fehno-checkout .form-row-last {
		width: 100%;
		margin-right: 0;
		display: block;
	}
}

.fehno-checkout label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-text);
	margin: 0 0 6px;
}
.fehno-checkout label .required {
	color: var(--fc-purple);
	text-decoration: none;
	margin-left: 2px;
}
.fehno-checkout label .optional {
	color: var(--fc-muted);
	font-weight: 400;
}

.fehno-checkout .input-text,
.fehno-checkout input[type="text"],
.fehno-checkout input[type="email"],
.fehno-checkout input[type="tel"],
.fehno-checkout input[type="number"],
.fehno-checkout input[type="password"],
.fehno-checkout select,
.fehno-checkout .select2-selection--single {
	width: 100% !important;
	height: 48px !important;
	line-height: 46px !important;
	padding: 0 14px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	color: var(--fc-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--fc-border) !important;
	border-radius: var(--fc-radius-sm) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fehno-checkout input:focus,
.fehno-checkout select:focus,
.fehno-checkout .select2-selection--single:focus,
.fehno-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--fc-purple) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(80, 40, 120, 0.18) !important;
}

/* Select2 dropdown — use flexbox centering instead of line-height hacks */
.fehno-checkout .select2-container .select2-selection--single,
.fehno-checkout .select2-container--default .select2-selection--single {
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}
.fehno-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal !important;
	padding: 0 40px 0 14px !important;
	color: var(--fc-text) !important;
	/* flex child — let it shrink/grow within the 48px container */
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fehno-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	/* pin the arrow to the right edge, vertically centered */
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: auto !important;
}
.select2-dropdown {
	border-color: var(--fc-border) !important;
	border-radius: var(--fc-radius-sm) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--fc-purple) !important;
	color: #fff !important;
}

/* ==== RIGHT COLUMN — order review ==== */

.fehno-checkout h3#order_review_heading,
.fehno-checkout .fehno-review-heading {
	display: none;
}

.fehno-checkout #order_review {
	background: #fff;
	color: var(--fc-text);
	border-radius: var(--fc-radius);
	padding: clamp(22px, 3vw, 32px);
	box-shadow: var(--fc-shadow-card);
	position: sticky;
	top: 20px;
	/* Grid item containment — prevents right column from stretching past its track */
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* Order summary table — table-layout:fixed prevents product name from
   stretching the column (and thus the whole right card) past its grid track */
.fehno-checkout #order_review .shop_table,
.fehno-checkout #order_review table.shop_table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: transparent;
	margin: 0;
	border: 0;
}
.fehno-checkout #order_review .shop_table th,
.fehno-checkout #order_review .shop_table td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--fc-border-soft);
	font-size: 14px;
	color: var(--fc-text);
	background: transparent;
	text-align: left;
}
.fehno-checkout #order_review .shop_table thead {
	display: none; /* header row adds noise */
}
.fehno-checkout #order_review .shop_table .product-name {
	font-weight: 600;
	color: var(--fc-text);
	/* Allow long names to break rather than push the table wider */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fehno-checkout #order_review .shop_table .product-total {
	text-align: right;
	font-weight: 600;
	color: var(--fc-text);
	white-space: nowrap;
	width: 80px; /* fixed price column so name column gets the rest */
}
.fehno-checkout #order_review .cart_item .product-quantity {
	color: var(--fc-muted);
	font-size: 13px;
	font-weight: 400;
}
.fehno-checkout #order_review .cart-subtotal th,
.fehno-checkout #order_review .cart-subtotal td,
.fehno-checkout #order_review .tax-rate th,
.fehno-checkout #order_review .tax-rate td,
.fehno-checkout #order_review .fee th,
.fehno-checkout #order_review .fee td {
	color: var(--fc-text-soft);
	font-weight: 500;
	font-size: 13px;
}
.fehno-checkout #order_review .order-total th,
.fehno-checkout #order_review .order-total td {
	padding-top: 16px;
	font-size: 17px;
	color: var(--fc-text);
	font-weight: 800;
	border-bottom: 0;
	font-family: 'Outfit', sans-serif;
}
.fehno-checkout #order_review .order-total .woocommerce-Price-amount {
	color: var(--fc-purple);
}

/* =========================================================================
   ORDER BUMP CARD
   ========================================================================= */

.fehno-bump {
	position: relative;
	margin: 20px 0 22px;
	border: 2px dashed var(--fc-purple);
	border-radius: var(--fc-radius);
	background: linear-gradient(180deg, #faf5ff 0%, #fff 80%);
	padding: 0;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	/* Fully contained within right column card */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}
.fehno-bump::before {
	content: "⚡ Oferta solo en checkout";
	position: absolute;
	top: -11px;
	left: 18px;
	background: var(--fc-purple);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.fehno-bump.is-added {
	border-style: solid;
	background: #f3e8ff;
	box-shadow: 0 0 0 4px rgba(80, 40, 120, 0.08);
}

.fehno-bump-label {
	display: flex;
	gap: 20px; /* was 14px — a little more air between checkbox and text */
	padding: 22px 18px 20px;
	cursor: pointer;
	align-items: flex-start;
	user-select: none;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.fehno-bump-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fehno-bump-check {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 2px solid var(--fc-purple);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	/* WordPress global styles injects `.is-layout-flex > :is(*, div) { margin: 0 }`
	   with specificity (0,1,1) which beats our single-class (0,1,0) rule.
	   !important is the only reliable way to win here. */
	margin-right: 10px !important;
	margin-top: 2px !important;
	transition: background .15s ease, border-color .15s ease;
}
.fehno-bump-check svg {
	opacity: 0;
	transition: opacity .15s ease;
}

/* CSS-native checked state: fires instantly on click via the hidden sibling input.
   input.fehno-bump-toggle is the very next sibling of span.fehno-bump-check
   inside the label, so the adjacent-sibling selector is exact. */
.fehno-bump-toggle:checked + .fehno-bump-check {
	background: var(--fc-purple);
	border-color: var(--fc-purple);
}
.fehno-bump-toggle:checked + .fehno-bump-check svg {
	opacity: 1;
}

/* JS class — applied after AJAX confirms the product was added to cart.
   Keeps the box filled if JS redraws the area. */
.fehno-bump.is-added .fehno-bump-check {
	background: var(--fc-purple);
	border-color: var(--fc-purple);
}
.fehno-bump.is-added .fehno-bump-check svg {
	opacity: 1;
}

.fehno-bump-body {
	flex: 1;
	min-width: 0;
	/* Second vector: padding-left is NOT touched by WP's margin:0 reset */
	padding-left: 8px;
}

.fehno-bump-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc-purple);
}
.fehno-bump-flag {
	background: var(--fc-purple);
	color: #fff;
	padding: 3px 7px;
	border-radius: 4px;
	font-size: 10px;
}

.fehno-bump-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--fc-text);
	letter-spacing: -0.01em;
}

.fehno-bump-bullets {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.fehno-bump-bullets li {
	font-size: 13px;
	line-height: 1.45;
	color: var(--fc-text-soft);
	padding-left: 15px;
	position: relative;
}
.fehno-bump-bullets li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--fc-purple);
	font-weight: 700;
	line-height: 1.45;
}

.fehno-bump-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.fehno-bump-price-was {
	font-size: 14px;
	font-weight: 500;
	color: var(--fc-muted);
	text-decoration: line-through;
	opacity: 0.7;
}
.fehno-bump-price-was .woocommerce-Price-amount {
	color: inherit;
}
.fehno-bump-price-now {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: var(--fc-purple);
	letter-spacing: -0.01em;
}
.fehno-bump-price-now .woocommerce-Price-amount {
	color: inherit;
}
.fehno-bump-price-note {
	font-size: 12px;
	color: var(--fc-muted);
	font-weight: 500;
}

.fehno-bump-status {
	padding: 0 18px 14px 58px;
	min-height: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.fehno-bump-status-added {
	color: var(--fc-purple);
	display: none;
}
.fehno-bump-status-loading {
	color: var(--fc-muted);
	display: none;
}
.fehno-bump.is-added .fehno-bump-status-added {
	display: inline;
}
.fehno-bump.is-loading .fehno-bump-status-added { display: none; }
.fehno-bump.is-loading .fehno-bump-status-loading { display: inline; }

/* =========================================================================
   EXPRESS CHECKOUT SECTION
   Stripe Express Checkout Element (Apple Pay · Google Pay · Link)
   Heading and divider are hidden by default; JS adds .fehno-express-visible
   to the root when Stripe.js activates the ECE.
   ========================================================================= */

/* Hide heading and divider until ECE is active */
.fehno-checkout .fehno-express-heading,
.fehno-checkout .fehno-express-divider {
	display: none;
}

/* Show when Stripe activates at least one express button */
.fehno-express-visible .fehno-express-heading,
.fehno-express-visible .fehno-express-divider {
	display: flex;
}

/* "Pago rápido" label above express buttons */
.fehno-checkout .fehno-express-heading {
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.fehno-checkout .fehno-express-heading span {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--fc-muted);
}

/* The ECE container itself — give it breathing room */
.fehno-checkout #wc-stripe-express-checkout-element {
	border-radius: var(--fc-radius-sm);
	overflow: hidden;
	margin-bottom: 4px;
}

/* Hide Stripe's default "— OR —" separator; replaced by .fehno-express-divider */
.fehno-checkout #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/* "— o —" divider between express buttons and billing form */
.fehno-checkout .fehno-express-divider {
	align-items: center;
	gap: 10px;
	margin: 14px 0 20px;
	color: var(--fc-muted);
}
.fehno-checkout .fehno-express-divider::before,
.fehno-checkout .fehno-express-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--fc-border);
}
.fehno-checkout .fehno-express-divider span {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fc-muted);
	flex-shrink: 0;
}

/* =========================================================================
   PAYMENT METHODS
   ========================================================================= */

.fehno-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 8px;
}
.fehno-checkout #payment::before {
	content: "Forma de pago";
	display: block;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 16px;
	margin: 12px 0 12px;
	color: var(--fc-text);
}
.fehno-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	background: transparent;
	margin: 0;
	list-style: none;
}
.fehno-checkout #payment ul.payment_methods li {
	padding: 14px 16px;
	border: 1.5px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: #fff;
	margin-bottom: 10px;
	list-style: none;
	transition: border-color .15s ease;
}
.fehno-checkout #payment ul.payment_methods li:hover {
	border-color: var(--fc-purple-soft);
}
.fehno-checkout #payment ul.payment_methods li input[type="radio"] {
	accent-color: var(--fc-purple);
	margin-right: 8px;
}
.fehno-checkout #payment ul.payment_methods li label {
	display: inline-block;
	font-weight: 600;
	font-size: 14px;
	color: var(--fc-text);
	margin: 0;
	cursor: pointer;
}
.fehno-checkout #payment ul.payment_methods li img {
	max-height: 24px;
	margin-left: 8px;
	vertical-align: middle;
}
.fehno-checkout #payment .payment_box {
	background: #faf6f0 !important;
	border-radius: var(--fc-radius-sm);
	padding: 14px;
	margin: 10px 0 0 !important;
	color: var(--fc-text);
	font-size: 13px;
}
.fehno-checkout #payment .payment_box::before {
	display: none !important;
}

/* ── PayPal section — real PPCP yellow button (v3.27) ───────────────────
   ROOT CAUSE of mobile failure (v3.22–v3.26):
   Previous JS detached li.payment_method_ppcp-gateway from ul.payment_methods
   and re-inserted it, triggering PPCP's MutationObserver.  On mobile (slower
   network), the PayPal SDK had not finished loading when that mutation fired.
   PPCP's re-initialization ran before the SDK was ready → SDK never mounted
   the iframe → div#ppc-button-ppcp-gateway stayed empty on mobile.

   v3.27 approach — never touch the li:
     • li.payment_method_ppcp-gateway stays in ul.payment_methods, hidden by CSS.
       The radio inside it remains in the DOM so WC can read payment_method.
     • div.ppc-button-wrapper (PHP-rendered by woocommerce_review_order_after_payment,
       outside #payment but inside #order_review) already sits below #place_order
       in the natural document flow.  We never move it.
     • JS marks the wrapper with class fehno-paypal-btn-wrapper and inserts a
       div.fehno-paypal-sep sibling before it (once, on DOM ready).
     • PPCP SDK mounts the iframe at its own pace without any interference.
   ──────────────────────────────────────────────────────────────────────── */

/* Hide the PayPal li — not used as a visual element.
   The input#payment_method_ppcp-gateway radio inside it stays in the DOM
   so our JS pre-check and WC's form serialisation work correctly. */
.fehno-checkout #payment li.payment_method_ppcp-gateway {
	display: none !important;
}

/* "o" separator — a <div> injected by JS before .fehno-paypal-btn-wrapper.
   Lives inside #order_review (same padding box as #payment) so width
   aligns with #place_order automatically. */
.fehno-checkout div.fehno-paypal-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 8px;
	pointer-events: none;
	cursor: default;
}
.fehno-checkout div.fehno-paypal-sep::before,
.fehno-checkout div.fehno-paypal-sep::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--fc-border);
}
.fehno-checkout div.fehno-paypal-sep > span {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fc-muted);
	flex-shrink: 0;
}

/* PPCP button wrapper — JS adds this class to div.ppc-button-wrapper.
   ⚠ NEVER add pointer-events/display/opacity here — PPCP detects those and
   collapses #ppc-button-ppcp-gateway to display:none on mobile (v3.28 lesson).
   isolation:isolate creates a scoped stacking context so the guard's z-index
   is evaluated WITHIN the wrapper, not against the whole page — this is what
   ensures the guard renders above the cross-origin PPCP iframe. (v3.31) */
.fehno-checkout .fehno-paypal-btn-wrapper {
	position: relative;
	isolation: isolate;
	width: 100%;
	box-sizing: border-box;
	transition: opacity .2s ease, filter .2s ease;
}

/* Terms-lock visual state — opacity + grayscale only, ZERO pointer-events.
   Applied alongside the guard div.  Opacity does NOT cause PPCP to collapse
   (only pointer-events:none does — confirmed v3.28 debug). */
.fehno-checkout .fehno-paypal-btn-wrapper.fehno-paypal-locked {
	opacity: 0.45;
	filter: grayscale(0.6);
}

/* Terms-guard overlay — injected by JS inside .fehno-paypal-btn-wrapper when
   terms are unchecked; removed when accepted.
   isolation:isolate on the wrapper scopes this z-index within the wrapper,
   placing the guard above the PPCP iframe regardless of global stacking.
   background: rgba(…,0.01) — a near-transparent paint layer guarantees the
   element captures touchstart events on iOS Safari (fully transparent divs
   can be skipped by the touch-routing algorithm in some WebKit versions). */
.fehno-checkout .fehno-paypal-guard {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.01);
}

/* Terms-hint — one-line message injected by JS before #ppc-button-ppcp-gateway
   when terms are unchecked; removed when accepted.  Never wraps, never shifts
   layout measurably.  Guard overlay sits above (z-index:999999) but is
   near-transparent so the text remains readable. */
.fehno-checkout .fehno-paypal-hint {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #b45309;
	text-align: center;
	white-space: normal;
	max-width: 100%;
	margin-bottom: 8px;
	line-height: 1.4;
}

/* Shake animation — applied to the terms row when PayPal is tapped without
   accepting terms.  Brief highlight on the checkbox itself. */
@keyframes fehno-terms-shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-6px); }
	40%       { transform: translateX(6px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}
.fehno-terms-shake {
	animation: fehno-terms-shake 0.45s ease;
}
.fehno-terms-highlight {
	outline: 2px solid var(--fc-purple) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Belt-and-suspenders: keep the WC description paragraph hidden in the li
   in case a third-party plugin ever makes the li visible. */
.fehno-checkout #payment li.payment_method_ppcp-gateway .payment_box > p {
	display: none !important;
}

/* ── Stripe UPE Payment Element (tabs layout) ────────────────────────────
   The Payment Element tabs (Card / Apple Pay / Google Pay / Link) are
   rendered inside a Stripe-hosted iframe, so their internal colours and
   typography are controlled by the Stripe appearance API — not by CSS here.
   These rules target the outer wrapper elements only.
   ──────────────────────────────────────────────────────────────────────── */

/* Remove default fieldset chrome — Stripe handles its own border/shadow */
.fehno-checkout #wc-stripe-upe-form {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Reserve minimum height while the Stripe iframe bootstraps (prevents layout shift) */
.fehno-checkout .wc-stripe-upe-element {
	min-height: 48px;
}

/* Stripe payment box: white bg so the iframe sits against a clean surface */
.fehno-checkout #payment .payment_method_stripe .payment_box {
	background: #fff !important;
	padding: 16px 0 8px !important;
}

/* Stripe UPE inline error banner */
.fehno-checkout #wc-stripe-upe-errors:not(:empty) {
	margin-top: 10px;
	padding: 10px 14px;
	background: rgba(255, 101, 101, 0.08);
	border: 1px solid rgba(255, 101, 101, 0.3);
	border-radius: var(--fc-radius-sm);
	color: var(--fc-danger);
	font-size: 13px;
	line-height: 1.5;
}

/* ── Below-form sections: opt out of CSS scroll anchoring ────────────────────
   Elements below the checkout form are opted out of being scroll anchors.
   This prevents the browser from adjusting scrollTop to keep them in view if
   any layout shift occurs (e.g. the Stripe UPE iframe resizing on bootstrap,
   or any future change to the payment section height).
   ──────────────────────────────────────────────────────────────────────────── */
.fehno-checkout-trust,
.fehno-testimonials,
.fehno-checkout-faq {
	overflow-anchor: none;
}

/* ── Mobile: testimonial separation ─────────────────────────────────────────
   Extra bottom padding on .woocommerce increases physical distance between
   the bottom of the checkout form and the testimonial strip, keeping
   testimonials below the fold while the user interacts with payment.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.fehno-checkout .woocommerce {
		padding-bottom: 72px;
	}
}

/* ── Fix: empty bordered box below Stripe Payment Element ────────────────
   save_payment_method_checkbox() in the Stripe abstract gateway renders an
   anonymous <fieldset> (no id, no class) after #wc-stripe-upe-form.
   Browsers apply their UA default "border: 2px groove" to bare fieldsets —
   that is the empty rectangle visible below the CVC field.
   Our existing rule targets #wc-stripe-upe-form only; this rule covers every
   other fieldset inside .payment_box (i.e. the save-card fieldset).
   ──────────────────────────────────────────────────────────────────────── */
.fehno-checkout #payment .payment_box fieldset:not(#wc-stripe-upe-form) {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Suppress empty saved-payment-methods list (logged-out / no saved cards) */
.fehno-checkout .woocommerce-SavedPaymentMethods:empty {
	display: none;
}

/* Error container: zero geometry when empty (no height/margin ghost) */
.fehno-checkout #wc-stripe-upe-errors:empty {
	display: none;
}

/* Place Order button */
.fehno-checkout #payment .place-order,
.fehno-checkout .place-order {
	padding: 18px 0 0;
	margin: 0;
	float: none;
	width: 100%;
}
.fehno-checkout #place_order,
.fehno-checkout button#place_order {
	width: 100% !important;
	padding: 18px 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	letter-spacing: 0.02em !important;
	background: var(--fc-purple) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--fc-radius-sm) !important;
	box-shadow: 0 10px 25px -10px rgba(80, 40, 120, 0.55) !important;
	cursor: pointer;
	transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
	text-transform: none !important;
}
.fehno-checkout #place_order:hover {
	background: #5e3190 !important;
	box-shadow: 0 14px 30px -10px rgba(80, 40, 120, 0.7) !important;
	transform: translateY(-1px);
}
.fehno-checkout #place_order:active {
	transform: translateY(0);
}

/* ── Submit processing state ─────────────────────────────────────────────────
   Applied by checkout.js (deferred via setTimeout) after WC's submit handler
   adds .processing to the form, confirming submission is in flight.
   Reset by checkout.js on checkout_error (any payment / validation failure).
   ──────────────────────────────────────────────────────────────────────────── */

@keyframes fehno-spin {
	to { transform: rotate(360deg); }
}

/* Button: processing state — flex so SVG spinner + text sit side-by-side */
.fehno-checkout #place_order.fehno-btn-processing {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	opacity: 0.78 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: 0 4px 14px -6px rgba(80, 40, 120, 0.4) !important;
	pointer-events: none !important;
}

/* SVG spinner inside the button */
.fehno-checkout #place_order .fehno-btn-spinner {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	animation: fehno-spin 0.8s linear infinite;
	color: rgba(255, 255, 255, 0.9);
}

.fehno-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0 6px;
	font-size: 12.5px;
	color: var(--fc-muted);
}
.fehno-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--fc-purple);
	text-decoration: underline;
}

/* Loading overlay */
.fehno-checkout .blockUI.blockOverlay {
	background: rgba(18, 10, 31, 0.05) !important;
	opacity: 1 !important;
}

/* WC block components notice (e.g. "no payment methods") — WC's block CSS
   sets max-width: none on this component which breaks narrow column layout */
.fehno-checkout .wc-block-components-notice-banner {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 13px;
	border-radius: var(--fc-radius-sm);
	padding: 12px 14px;
}
.fehno-checkout .wc-block-components-notice-banner__content {
	max-width: 100%;
	word-break: break-word;
}

/* =========================================================================
   SOCIAL PROOF BLOCK
   Renders between .fehno-checkout-shell (hero heading) and the form cards.
   Dark background zone — matches the overall ink canvas.
   Desktop: image left · pills right.  Mobile: pills only (image hidden).
   ========================================================================= */

.fehno-social-proof {
	padding: 4px clamp(20px, 4vw, 56px) 24px;
}
.fehno-social-proof-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--fc-radius);
}
/* When no product image (EP checkout) the pills centre themselves */
.fehno-social-proof-inner.fehno-sp-no-image {
	justify-content: center;
}

/* Product image + caption column */
.fehno-sp-image {
	flex-shrink: 0;
	width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.fehno-sp-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	filter: drop-shadow(0 10px 28px rgba(80, 40, 120, 0.45));
}
/* Book title + subtitle below the product image */
.fehno-sp-caption {
	text-align: center;
}
.fehno-sp-caption-title {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	letter-spacing: -0.01em;
	margin: 0 0 5px;
}
.fehno-sp-caption-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.5;
	margin: 0;
}

/* Trust pill list */
.fehno-sp-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.fehno-sp-pills li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.45;
}
.fehno-sp-pills li svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--fc-highlight);
}

@media (max-width: 720px) {
	.fehno-social-proof-inner {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 20px 16px;
	}
	/* Image + caption: capped width so subtitle wraps cleanly on narrow screens */
	.fehno-sp-image {
		width: 100%;
		max-width: 220px;
	}
	.fehno-sp-pills {
		width: 100%;
	}
	.fehno-sp-pills li {
		font-size: 14px;
	}
}

/* =========================================================================
   "QUÉ VAS A ENCONTRAR DENTRO"
   Inside #order_review (white card), before the payment section.
   Sits between the order table / bump card and the payment methods list.
   ========================================================================= */

.fehno-inside-content {
	margin: 4px 0 18px;
	padding: 16px 0 18px;
	border-top: 1px solid var(--fc-border-soft);
	border-bottom: 1px solid var(--fc-border-soft);
}
.fehno-inside-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fc-purple);
	margin: 0 0 11px;
}
.fehno-inside-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fehno-inside-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--fc-text-soft);
	line-height: 1.4;
}
.fehno-inside-list li svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--fc-purple);
}

/* =========================================================================
   TESTIMONIAL MARQUEE — two-row infinite horizontal scroll (CSS only)
   Row 1 scrolls left · Row 2 scrolls right.
   Each track renders the card set twice; animating by 50% means the
   duplicate seamlessly replaces the original — no JS, no flicker.
   ========================================================================= */

.fehno-testimonials {
	margin: 44px 0 0;
	overflow: hidden;
}
/* Mobile: pull the testimonials further below the form so they are less
   likely to be in the viewport while the user is in the payment section. */
@media (max-width: 768px) {
	.fehno-testimonials {
		margin-top: 72px; /* was 44px — 28 px extra separation */
	}
}
.fehno-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--fc-highlight);
	margin: 0 0 26px;
	text-align: center;
	padding: 0 clamp(20px, 4vw, 56px);
}

/* Stacks the two rows and fades their left/right edges into the page bg */
.fehno-marquee-wrapper {
	display: flex;
	flex-direction: column;
	gap: 16px;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image:         linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Clip box for each scrolling strip */
.fehno-marquee-row {
	overflow: hidden;
}

/* Moving track — flex row of cards, width driven by card content */
.fehno-marquee-track {
	display: flex;
	gap: 16px;
	width: max-content;
	will-change: transform;
}

@keyframes fehno-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes fehno-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.fehno-track-left  { animation: fehno-marquee-left  35s linear infinite; }
.fehno-track-right { animation: fehno-marquee-right 35s linear infinite; }

/* Pause while hovering so the user can read without chasing the card */
.fehno-marquee-row:hover .fehno-marquee-track {
	animation-play-state: paused;
}

/* Respect the system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.fehno-marquee-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}
}

/* ── Individual testimonial card ───────────────────────────────────────── */

.fehno-tc-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 16px rgba(18, 10, 31, 0.08), 0 1px 3px rgba(18, 10, 31, 0.04);
	padding: 20px 22px;
	width: 300px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--fc-text);
}

.fehno-tc-quote {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fc-text);
	font-weight: 500;
	margin: 0;
	flex: 1; /* push author row to bottom of the card */
}

.fehno-tc-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Coloured initials bubble — colour comes from inline style on each card */
.fehno-tc-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 13px;
	color: var(--fc-purple-deep);
	flex-shrink: 0;
}

.fehno-tc-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--fc-text);
	line-height: 1.3;
}

.fehno-tc-country {
	font-weight: 500;
	color: var(--fc-muted);
}

/* Source attribution — platform/channel label at the bottom of each card */
.fehno-tc-source {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fc-muted);
	padding-top: 8px;
	border-top: 1px solid rgba(26, 26, 26, 0.08);
	margin-top: -2px; /* closes extra gap left by card's gap: 14px */
}

@media (max-width: 540px) {
	.fehno-tc-card {
		width: 260px;
		padding: 16px 18px;
	}
	.fehno-tc-quote {
		font-size: 13px;
	}
}

/* =========================================================================
   TRUST BAR + FAQ
   ========================================================================= */

.fehno-checkout-trust {
	max-width: 1120px;
	margin: 28px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 720px) {
	.fehno-checkout-trust {
		grid-template-columns: 1fr;
	}
}
.fehno-trust-item {
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--fc-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.fehno-trust-item strong {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}
.fehno-trust-item span {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

.fehno-checkout-faq {
	max-width: 760px;
	margin: 40px auto 56px;
	padding: 0 clamp(20px, 4vw, 56px);
}
.fehno-checkout-faq h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #fff;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.fehno-checkout-faq details {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 14px 0;
}
.fehno-checkout-faq details:first-of-type {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fehno-checkout-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #f3eefb;
	font-weight: 600;
	font-size: 15px;
	padding: 2px 0;
}
.fehno-checkout-faq summary::-webkit-details-marker { display: none; }
.fehno-checkout-faq-icon {
	color: var(--fc-highlight);
	font-size: 22px;
	font-weight: 300;
	transition: transform .2s ease;
	line-height: 1;
}
.fehno-checkout-faq details[open] .fehno-checkout-faq-icon {
	transform: rotate(45deg);
}
.fehno-checkout-faq p {
	margin: 10px 0 4px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.6;
}

/* =========================================================================
   CART (classic shortcode)
   ========================================================================= */

.fehno-cart .woocommerce {
	max-width: 920px;
	margin: 0 auto;
	padding: 56px clamp(20px, 4vw, 56px);
	background: #fff;
	color: var(--fc-text);
	border-radius: var(--fc-radius);
	margin-top: 40px;
	margin-bottom: 40px;
}
.fehno-cart .cart_totals h2 {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	color: var(--fc-text);
}
.fehno-cart .checkout-button {
	background: var(--fc-purple) !important;
	color: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 800 !important;
	border-radius: var(--fc-radius-sm) !important;
	padding: 16px 24px !important;
	font-size: 15px !important;
}

/* =========================================================================
   MY ACCOUNT
   ========================================================================= */

.fehno-account .woocommerce {
	max-width: 1000px;
	margin: 40px auto;
	padding: 40px clamp(20px, 4vw, 56px);
	background: #fff;
	color: var(--fc-text);
	border-radius: var(--fc-radius);
}
.fehno-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
.fehno-account .woocommerce-MyAccount-navigation ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--fc-border-soft);
}
.fehno-account .woocommerce-MyAccount-navigation ul li.is-active a,
.fehno-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--fc-purple);
	font-weight: 700;
}
.fehno-account .button {
	background: var(--fc-purple) !important;
	color: #fff !important;
	border-radius: var(--fc-radius-sm) !important;
	font-weight: 700 !important;
}

/* =========================================================================
   THANK-YOU / ORDER-RECEIVED — Fehno-branded experience
   ========================================================================= */

/* ── Reset WC wrapper boxes so our elements control their own layout ── */
.fehno-thankyou .woocommerce {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: inherit !important;
}

/* ── Horizontal gutter — applied to the actual rendered block wrappers.
   In block-theme mode WooCommerce renders via its own Gutenberg block template.
   The classic .woocommerce-order wrapper does NOT exist; the containing elements
   are the WC block divs below.  main { padding: 0 } (set above) removes the
   theme's global padding, so side breathing room must live here.
   Cross-browser note: Safari may inherit padding from has-global-padding on <main>;
   Chrome/Firefox do not.  Targeting the blocks directly is the only reliable fix.
   clamp(24px, 6vw, 48px): 24px floor on tiny phones, grows with vw,
   caps at 48px so the card never feels cramped on wider screens. ── */
body.fehno-thankyou .wc-block-order-confirmation-status,
body.fehno-thankyou .wc-block-order-confirmation-additional-information {
	padding-left:  clamp(24px, 6vw, 48px);
	padding-right: clamp(24px, 6vw, 48px);
	box-sizing: border-box;
}

/* ── Suppress WC elements replaced by custom PHP output ──
   .woocommerce-order-details and .woocommerce-customer-details are removed at
   the PHP level via remove_action() in thankyou.php — no display:none needed.
   The two rules below are safety-nets for edge cases only. ── */
.fehno-thankyou .woocommerce-thankyou-order-received { display: none !important; }
.fehno-thankyou .woocommerce-order-overview          { display: none !important; }

/* ── Shared column: 520px centred within the guttered block wrapper.
   Width is 100% of the available space (block width minus its own padding),
   never exceeding 520px. No additional horizontal padding on these elements —
   the block-level gutter above handles all side spacing. ── */
.fehno-ty-hero,
.fehno-ty-card,
.fehno-ty-nextsteps,
.fehno-thankyou .woocommerce-order-downloads {
	width: 100%;
	max-width: 520px;
	margin-left:  auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* =========================================================================
   HERO
   ========================================================================= */

.fehno-ty-hero {
	/* Horizontal padding is handled by the block-level gutter above */
	padding: clamp(48px, 7vw, 80px) 0 clamp(32px, 5vw, 48px);
}
.fehno-ty-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fc-success);
	margin: 0 0 20px;
}
.fehno-ty-headline {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 5.5vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 14px;
}
.fehno-ty-sub {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 460px;
}

/* =========================================================================
   SUMMARY CARD
   ========================================================================= */

.fehno-ty-card {
	background: #fff;
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-shadow-card);
	padding: clamp(24px, 4vw, 40px);
	color: var(--fc-text);
	margin-bottom: 2px; /* gap absorbed by next-steps padding-top */
}

/* ── Rows ── */
.fehno-ty-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	font-size: 14px;
}
.fehno-ty-row-label {
	color: var(--fc-text-soft);
	font-weight: 500;
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.fehno-ty-row-value {
	font-weight: 600;
	color: var(--fc-text);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Product row */
.fehno-ty-product-row .fehno-ty-row-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--fc-text);
}
.fehno-ty-product-row .fehno-ty-row-value {
	font-size: 15px;
}
.fehno-ty-qty {
	font-size: 13px;
	font-weight: 400;
	color: var(--fc-muted);
}

/* Tax row — muted, clearly present */
.fehno-ty-tax-row .fehno-ty-row-label,
.fehno-ty-tax-row .fehno-ty-row-value {
	color: var(--fc-muted);
	font-weight: 500;
}

/* Total row — prominent */
.fehno-ty-total-row {
	padding-top: 13px;
}
.fehno-ty-total-row .fehno-ty-row-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: var(--fc-text);
}
.fehno-ty-total-row .fehno-ty-row-value {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: var(--fc-purple);
}
/* Unwrap woocommerce-Price-amount spans so colour inherits */
.fehno-ty-total-row .fehno-ty-row-value .woocommerce-Price-amount { color: inherit; }

/* Separator */
.fehno-ty-sep {
	height: 1px;
	background: var(--fc-border-soft);
	margin: 4px 0;
}

/* ── Order meta grid — 2 cols ── */
.fehno-ty-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	padding-top: 4px;
}
.fehno-ty-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.fehno-ty-meta-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fc-muted);
}
.fehno-ty-meta-val {
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-text);
	word-break: break-word;
}
.fehno-ty-meta-email {
	word-break: break-all; /* long emails don't overflow */
}
@media (max-width: 420px) {
	.fehno-ty-meta-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================================
   DOWNLOADS SECTION (rendered by WC when files are configured)
   ========================================================================= */

.fehno-thankyou .woocommerce-order-downloads {
	/* Padding is internal to the card; horizontal gutter is on .woocommerce-order */
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fc-radius);
	margin-bottom: 2px;
}
.fehno-thankyou .woocommerce-order-downloads__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: #fff;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.fehno-thankyou .woocommerce-table--order-downloads {
	width: 100%;
	border-collapse: collapse;
}
.fehno-thankyou .woocommerce-table--order-downloads thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	padding: 0 0 10px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fehno-thankyou .woocommerce-table--order-downloads td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	text-align: left;
	vertical-align: middle;
}
.fehno-thankyou .woocommerce-table--order-downloads tr:last-child td {
	border-bottom: 0;
}
.fehno-thankyou .woocommerce-table--order-downloads a,
.fehno-thankyou .woocommerce-table--order-downloads .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--fc-highlight);
	color: #1a1a1a !important;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 13px;
	text-decoration: none !important;
	border-radius: 6px;
	transition: opacity .15s ease;
}
.fehno-thankyou .woocommerce-table--order-downloads a:hover { opacity: .85; }

/* =========================================================================
   NEXT STEPS
   ========================================================================= */

.fehno-ty-nextsteps {
	/* Horizontal padding is handled by .woocommerce-order outer gutter */
	padding: clamp(36px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
}
.fehno-ty-nextsteps-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: clamp(20px, 3vw, 26px);
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
}
.fehno-ty-steps {
	list-style: none;
	padding: 0;
	margin: 0 0 36px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.fehno-ty-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.fehno-ty-step-num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 13px;
	color: var(--fc-highlight);
	margin-top: 2px;
}
.fehno-ty-step-body strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.fehno-ty-step-body p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.58);
	margin: 0;
	line-height: 1.65;
}
.fehno-ty-step-body a {
	color: var(--fc-highlight);
	text-decoration: underline;
}

/* ── CTA ── */
.fehno-ty-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.fehno-ty-btn-primary {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.01em;
	background: var(--fc-purple);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: var(--fc-radius-sm);
	box-shadow: 0 8px 22px -8px rgba(80, 40, 120, 0.6);
	transition: background .15s ease, transform .1s ease;
}
.fehno-ty-btn-primary:hover {
	background: #5e3190;
	transform: translateY(-1px);
	color: #fff !important;
}

@media (max-width: 460px) {
	.fehno-ty-btn-primary { width: 100%; justify-content: center; }
}

/* =========================================================================
   FAILED ORDER STATE
   ========================================================================= */

.fehno-thankyou .woocommerce-notice--error {
	/* Gutter comes from .woocommerce-order wrapper */
	max-width: 600px;
	margin: 48px auto 16px;
	padding: 16px 20px;
	background: rgba(255, 101, 101, 0.1);
	border: 1px solid rgba(255, 101, 101, 0.35);
	border-radius: var(--fc-radius-sm);
	color: #ff8585;
	font-size: 14px;
	line-height: 1.55;
	box-sizing: border-box;
}
.fehno-thankyou .woocommerce-thankyou-order-failed-actions {
	max-width: 600px;
	margin: 0 auto 48px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.fehno-thankyou .woocommerce-thankyou-order-failed-actions .button {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	background: var(--fc-purple);
	color: #fff !important;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
	border-radius: var(--fc-radius-sm);
	border: 0;
}