/*
 * ABDigitizing order-confirmed page (FunnelKit thank-you, post 12932).
 * Loaded by mu-plugins/abdigitizing-thankyou.php on is_singular('wffn_ty') only,
 * after every other stylesheet (priority 100000, like the checkout restyle).
 *
 * Spec: docs/audit-2026-09-12/thankyou/IMPLEMENTATION-BRIEF-2026-09-14.md (section 4
 * names the classes, section 5 the block layout). The approved look is
 * docs/mockups/thankyou-mockup-v5.html; its sizes and colours are copied here.
 * The tokens are the checkout's (abdigitizing-checkout-style/checkout.css,
 * section 0), redeclared on body.abdig-ty because that sheet is not loaded on this
 * page; the same --ck-* names keep the quote form's designs block, which reads
 * var(--ck-ink, ...) and friends, on the same palette.
 *
 * Specificity notes. Three sources paint FunnelKit's order-details block:
 *   - the block's own inline CSS, ".wfty-order-details-block.wfty-be448df5
 *     .wfty_wrap ...": up to (0,8,1) on the price span, (0,7,0) on ".wfty_info *"
 *     and (0,6,2) on "table tr:last-child *" (which reaches the cells themselves);
 *   - FunnelKit's two sheets (thankyou-pages style.css, wfty-block-front.css): up
 *     to (0,5,3) on the download button and (0,4,3) with !important on the
 *     responsive table cells under 600 px;
 *   - the page's custom CSS (wffn_step_custom_settings): !important on the
 *     .wfty_leftDiv padding and on the meta labels.
 * Every rule for the block starts from
 *   body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap   (0,4,1)
 * and repeats the block's own path, so it sits at least one class above the rule
 * it replaces without depending on the block's uniqueID (the page updater keeps
 * be448df5, a re-saved block would get another). This file is also printed last,
 * so a tie still goes to it. Three !important in the whole file, each against a
 * rule that carries one: the .wfty_leftDiv padding of the page's custom CSS
 * (section 7.2) and the two responsive-table declarations FunnelKit forces on
 * the downloads cells under 600 px (section 12). Nothing here changes FunnelKit's
 * markup; the .abdig-ty-* nodes come from the plugin's shortcodes, the designs
 * block (.abd-designs) from the quote form plugin.
 */

/* ==========================================================================
   0. Tokens (the checkout's, plus the four tones of the status box)
   ========================================================================== */
body.abdig-ty {
	--ck-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ck-ink: #192a3d;
	--ck-ink-2: #3A4F66;
	--ck-ink-3: #6b7a8c;
	--ck-line: #e1e8ed;
	--ck-line-hover: #c9d4dc;
	--ck-surface-2: #f2f5f7;
	--ck-ground: #FAFBFC;
	--ck-white: #fff;
	--ck-accent: #287297;
	--ck-accent-hover: #358cb8;       /* outlined and tinted controls only */
	--ck-accent-hover-fill: #22617f;  /* filled buttons: white text stays 6.8:1 */
	--ck-tint: #eaf3fa;
	--ck-focus: 0 0 0 3px rgba(40, 114, 151, .45);
	--ck-outline: 2px solid #287297;
	--ck-ok: #1f7a4d;
	--ck-ok-bg: #eaf6ef;
	--ck-warn: #8a5a00;
	--ck-warn-bg: #fff7e6;
	--ck-warn-line: #e9a825;          /* the amber rule of the pending box and stepper ring */
	--ck-warn-ring: #e9c46a;
	--ck-bad: #cc0033;
	--ck-bad-bg: #fff1f3;
	--ck-bad-ring: #f3a6b6;
	--ck-error: #cc0033;
	--ck-error-bg: #fce4e4;
	--ck-amber: #f5a623;
	--ck-amber-bg: #fffaf0;
	--ck-amber-line: #f0d9a6;
	--ck-r-s: 8px;
	--ck-r-m: 12px;
	--ck-r-pill: 999px;
	--ck-t: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;

	background: var(--ck-ground);
}

/* ==========================================================================
   1. Page frame. The theme keeps its header and footer; the page is the group
      blocks of the brief (section 5) inside Blocksy's constrained entry-content.
   ========================================================================== */
/* Blocksy still prints its hero (an empty title and a hidden meta line) with a
   36 px bottom margin; the greeting below is the H1 now. */
body.abdig-ty article > .hero-section {
	display: none;
}

body.abdig-ty .entry-content > .abdig-ty-wrap,
body.abdig-ty .abdig-ty-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 8px 0 32px;
	box-sizing: border-box;
	font-family: var(--ck-font);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ck-ink);
	-webkit-font-smoothing: antialiased;
}
body.abdig-ty .abdig-ty-wrap *,
body.abdig-ty .abdig-ty-wrap *::before,
body.abdig-ty .abdig-ty-wrap *::after {
	box-sizing: border-box;
}
/* Core group blocks render as flow layouts: WordPress gives every child a
   1.5em top margin (--theme-content-spacing). The pieces carry their own. */
body.abdig-ty .abdig-ty-wrap > *,
body.abdig-ty .abdig-ty-cols > *,
body.abdig-ty .abdig-ty-cols__left > *,
body.abdig-ty .abdig-ty-cols__right > * {
	margin-block: 0;
	max-width: none;
}
body.abdig-ty .abdig-ty-wrap a {
	color: var(--ck-accent);
	text-decoration: none;
	transition: var(--ck-t);
}
body.abdig-ty .abdig-ty-wrap a:focus-visible,
body.abdig-ty .wfty-order-details-block a:focus-visible {
	outline: var(--ck-outline);
	outline-offset: 2px;
}
body.abdig-ty .abdig-ty-wrap h1,
body.abdig-ty .abdig-ty-wrap h2,
body.abdig-ty .abdig-ty-wrap h3 {
	font-family: var(--ck-font);
	color: var(--ck-ink);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
body.abdig-ty .abdig-ty-wrap p {
	margin: 0;
}
body.abdig-ty .abdig-ty-wrap svg {
	display: block;
}

/* ==========================================================================
   2. Stepper: three steps and two lines. The third step is honest per state
      (is-done "Confirmed", is-wait "Payment" in amber, is-err in red).
   ========================================================================== */
body.abdig-ty .abdig-ty-stepper {
	max-width: 560px;
	margin: 18px auto 22px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
body.abdig-ty .abdig-ty-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80px;
	flex: none;
}
body.abdig-ty .abdig-ty-step__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ck-accent);
	color: var(--ck-white);
	border: 0;
}
body.abdig-ty .abdig-ty-step__dot svg {
	width: 15px;
	height: 15px;
}
body.abdig-ty .abdig-ty-step__label {
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ck-accent);
	text-align: center;
}
body.abdig-ty .abdig-ty-line {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: var(--ck-accent);
	margin: 13px 8px 0;
}
body.abdig-ty .abdig-ty-line.is-off {
	background: var(--ck-line);
}
body.abdig-ty .abdig-ty-step.is-now .abdig-ty-step__dot {
	box-shadow: 0 0 0 4px rgba(40, 114, 151, .18);
}
body.abdig-ty .abdig-ty-step.is-now .abdig-ty-step__label {
	font-weight: 800;
}
body.abdig-ty .abdig-ty-step.is-wait .abdig-ty-step__dot {
	background: var(--ck-warn-bg);
	color: var(--ck-warn);
	border: 2px solid var(--ck-warn-ring);
	box-shadow: none;
}
body.abdig-ty .abdig-ty-step.is-wait .abdig-ty-step__label {
	color: var(--ck-warn);
}
body.abdig-ty .abdig-ty-step.is-err .abdig-ty-step__dot {
	background: var(--ck-bad-bg);
	color: var(--ck-bad);
	border: 2px solid var(--ck-bad-ring);
	box-shadow: none;
}
body.abdig-ty .abdig-ty-step.is-err .abdig-ty-step__label {
	color: var(--ck-bad);
}
/* Cancelled and refunded: the three steps happened, but nothing is in progress. */
body.abdig-ty--cancelled .abdig-ty-step__dot,
body.abdig-ty--refunded .abdig-ty-step__dot,
body.abdig-ty--cancelled .abdig-ty-line,
body.abdig-ty--refunded .abdig-ty-line {
	background: var(--ck-line-hover);
	box-shadow: none;
}
body.abdig-ty--cancelled .abdig-ty-step__label,
body.abdig-ty--refunded .abdig-ty-step__label {
	color: var(--ck-ink-3);
}

/* ==========================================================================
   3. Two columns (62/38, top-aligned) and the two cards
   ========================================================================== */
body.abdig-ty .abdig-ty-cols {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	gap: 24px;
	align-items: start;
}
body.abdig-ty .abdig-ty-card {
	background: var(--ck-white);
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r-m);
	padding: 28px;
	min-width: 0;
}

/* ==========================================================================
   4. Greeting: icon, "Order #N · date", the H1
   ========================================================================== */
body.abdig-ty .abdig-ty-greet {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 18px;
}
body.abdig-ty .abdig-ty-greet__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ck-tint);
	color: var(--ck-accent);
}
body.abdig-ty .abdig-ty-greet__icon svg {
	width: 22px;
	height: 22px;
}
body.abdig-ty .abdig-ty-greet__num {
	font-size: 13px;
	color: var(--ck-ink-3);
	margin: 0;
}
body.abdig-ty h1.abdig-ty-greet__title,
body.abdig-ty .abdig-ty-greet__title {
	margin: 2px 0 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--ck-ink);
}

/* Tone per state: ok (processing, download, delivered, tip), warn (pending,
   partial, onhold), bad (failed), quote (accent), neutral (cancelled, refunded). */
body.abdig-ty--processing .abdig-ty-greet__icon,
body.abdig-ty--download .abdig-ty-greet__icon,
body.abdig-ty--delivered .abdig-ty-greet__icon,
body.abdig-ty--tip .abdig-ty-greet__icon,
body.abdig-ty--quote .abdig-ty-greet__icon {
	background: var(--ck-ok-bg);
	color: var(--ck-ok);
}
body.abdig-ty--pending .abdig-ty-greet__icon,
body.abdig-ty--partial .abdig-ty-greet__icon,
body.abdig-ty--onhold .abdig-ty-greet__icon {
	background: var(--ck-warn-bg);
	color: var(--ck-warn);
}
body.abdig-ty--failed .abdig-ty-greet__icon {
	background: var(--ck-bad-bg);
	color: var(--ck-bad);
}
body.abdig-ty--cancelled .abdig-ty-greet__icon,
body.abdig-ty--refunded .abdig-ty-greet__icon {
	background: var(--ck-surface-2);
	color: var(--ck-ink-3);
}

/* ==========================================================================
   5. Status box: the line with the badge, the message, the actions, the mail line
   ========================================================================== */
body.abdig-ty .abdig-ty-status {
	border: 1px solid var(--ck-line);
	border-left: 4px solid var(--ck-accent);
	border-radius: var(--ck-r-s);
	padding: 18px 20px;
	margin: 0 0 16px;
	background: var(--ck-white);
}
body.abdig-ty--processing .abdig-ty-status,
body.abdig-ty--download .abdig-ty-status,
body.abdig-ty--delivered .abdig-ty-status,
body.abdig-ty--tip .abdig-ty-status {
	border-left-color: var(--ck-ok);
}
body.abdig-ty--pending .abdig-ty-status,
body.abdig-ty--partial .abdig-ty-status,
body.abdig-ty--onhold .abdig-ty-status {
	border-left-color: var(--ck-warn-line);
}
body.abdig-ty--failed .abdig-ty-status {
	border-left-color: var(--ck-bad);
}
body.abdig-ty--cancelled .abdig-ty-status,
body.abdig-ty--refunded .abdig-ty-status {
	border-left-color: var(--ck-line-hover);
}

body.abdig-ty .abdig-ty-status__line {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	color: var(--ck-ink);
}
body.abdig-ty .abdig-ty-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--ck-r-pill);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	background: var(--ck-tint);
	color: var(--ck-accent);
	white-space: nowrap;
}
body.abdig-ty--processing .abdig-ty-badge,
body.abdig-ty--download .abdig-ty-badge,
body.abdig-ty--delivered .abdig-ty-badge,
body.abdig-ty--tip .abdig-ty-badge {
	background: var(--ck-ok-bg);
	color: var(--ck-ok);
}
body.abdig-ty--pending .abdig-ty-badge,
body.abdig-ty--partial .abdig-ty-badge,
body.abdig-ty--onhold .abdig-ty-badge {
	background: var(--ck-warn-bg);
	color: var(--ck-warn);
}
body.abdig-ty--failed .abdig-ty-badge {
	background: var(--ck-bad-bg);
	color: var(--ck-bad);
}
body.abdig-ty--cancelled .abdig-ty-badge,
body.abdig-ty--refunded .abdig-ty-badge {
	background: var(--ck-surface-2);
	color: var(--ck-ink-2);
}

body.abdig-ty .abdig-ty-status__msg {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ck-ink-2);
}
body.abdig-ty .abdig-ty-status__msg + .abdig-ty-status__msg {
	margin-top: 8px;
}

body.abdig-ty .abdig-ty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	margin: 16px 0 0;
}

/* Buttons: filled accent, or ghost (white, accent text). Hover changes colour
   only; no lift. */
body.abdig-ty .abdig-ty-wrap a.abdig-ty-btn,
body.abdig-ty .abdig-ty-btn {
	height: 46px;
	padding: 0 22px;
	border-radius: var(--ck-r-s);
	background: var(--ck-accent);
	color: var(--ck-white);
	font-family: var(--ck-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	border: 1px solid var(--ck-accent);
	box-shadow: none;
	cursor: pointer;
	transition: var(--ck-t);
	white-space: nowrap;
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-btn:hover,
body.abdig-ty .abdig-ty-btn:hover {
	background: var(--ck-accent-hover-fill);
	border-color: var(--ck-accent-hover-fill);
	color: var(--ck-white);
	text-decoration: none;
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-btn--ghost,
body.abdig-ty .abdig-ty-btn--ghost {
	background: var(--ck-white);
	color: var(--ck-accent);
	border-color: var(--ck-line-hover);
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-btn--ghost:hover,
body.abdig-ty .abdig-ty-btn--ghost:hover {
	background: var(--ck-tint);
	border-color: var(--ck-accent);
	color: var(--ck-accent);
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-link,
body.abdig-ty .abdig-ty-link {
	color: var(--ck-accent);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-link:hover,
body.abdig-ty .abdig-ty-link:hover {
	color: var(--ck-accent-hover-fill);
}

body.abdig-ty .abdig-ty-status__mail {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--ck-line);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ck-ink-2);
}
body.abdig-ty .abdig-ty-status__mail b,
body.abdig-ty .abdig-ty-status__mail strong {
	color: var(--ck-ink);
	font-weight: 600;
}

/* ==========================================================================
   6. Customer details: Email | Billing
   ========================================================================== */
body.abdig-ty .abdig-ty-customer {
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r-s);
	padding: 16px 20px;
}
body.abdig-ty .abdig-ty-customer h2 {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.3;
}
body.abdig-ty .abdig-ty-customer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
body.abdig-ty .abdig-ty-customer__k {
	font-size: 12px;
	color: var(--ck-ink-3);
	margin: 0 0 2px;
}
body.abdig-ty .abdig-ty-customer__v {
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
	color: var(--ck-ink);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   7. FunnelKit's order-details block, restyled in place
   ========================================================================== */

/* 7.1 Wrapper and headings. The block's inline CSS gives .wfty_wrap 36/32 px of
   padding (0 under 1024, 16 under 767) and a 5 px radius: the card around it
   carries the frame now. The wrap becomes a column with explicit order so our
   payment box (printed on wffn_end_order_details_table, a sibling of the two
   boxes) sits between the totals and the downloads whatever hook prints it, as
   in the mockup. */
body.abdig-ty .wfty-order-details-block {
	font-family: var(--ck-font);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ck-ink);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details {
	order: -3;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .abdig-ty-pay {
	order: -2;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .abdig-ty-anchor,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_download {
	order: -1;
}
/* The anchor the status box's "Download your design" scrolls to when the order
   has several downloads: printed on wffn_start_downloads_table, right before the
   box, and ordered with it so it never sorts behind the box it points at. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .abdig-ty-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 24px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_title {
	margin: 0 0 14px;
	font-family: var(--ck-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ck-ink);
	text-align: left;
}

/* The failed notice: our status box carries the message and the button. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty-order-notice {
	display: none;
}

/* 7.2 Item rows: 56 px image, name and specs, price on the right. FunnelKit floats
   a 70/30 split with 22 px of padding; the page's custom CSS then forces
   ".wfty_leftDiv { padding: 8px 0 !important }", the one !important this file
   answers in kind. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont {
	float: none;
	width: 100%;
	border: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 0 14px;
	margin: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--ck-line);
	font-size: 14px;
	line-height: 1.3;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv {
	float: none;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 !important; /* the page's custom CSS: padding: 8px 0 !important */
	position: static;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
/* The clearfix pseudo-elements would be empty flex items and each would cost a gap. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list::before,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list::after,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv::before,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv::after,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty-clearfix,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty-hr {
	display: none;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv .wfty_p_img {
	float: none;
	flex: none;
	width: 56px;
	height: 56px;
	position: static;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_p_img a {
	display: block;
	width: 56px;
	height: 56px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_p_img img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--ck-r-s);
	border: 1px solid var(--ck-line);
	background: var(--ck-surface-2);
	margin: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv .wfty_p_name {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	position: static;
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ck-ink);
	overflow-wrap: anywhere;
}
/* The block's CSS paints every descendant of the name cell in Lucida, 14 px, #000,
   line-height 2 px; back to inheritance, then the parts get their own sizes. The
   designs block is excluded: the quote form paints it (its guard rules carry
   !important and win anyway; this keeps the unguarded parts inheriting sanely). */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_p_name * {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_t {
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ck-ink);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv .wfty_p_name a {
	color: var(--ck-ink);
	font-weight: 600;
	text-decoration: none;
	transition: var(--ck-t);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_leftDiv .wfty_p_name a:hover {
	color: var(--ck-accent);
}

/* Quantity: FunnelKit's white "1" on a grey circle over the thumbnail becomes an
   inline pill after the name. thankyou.js hides it when the quantity is 1
   (nothing in the store is bought by the unit except the add-ons). Its white
   !important text stays: the pill is dark. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_quantity_value_box {
	position: static;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 20px;
	padding: 0 8px;
	margin: 0 0 0 8px;
	border-radius: var(--ck-r-pill);
	background: var(--ck-ink-2);
	vertical-align: middle;
	z-index: auto;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_quantity_value_box::after {
	content: none;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_quantity_value_box .multiply {
	display: inline;
	margin-right: 2px;
}

/* Specs under the name: the meta list (File name, Machine format...) in 12.5 px
   grey, one line each, the label in the darker grey. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info {
	display: block;
	margin-top: 3px;
	font-family: var(--ck-font);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ck-ink-3);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info * {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info ul.wc-item-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info ul.wc-item-meta li {
	display: block;
	margin: 0 0 1px;
	padding: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info ul.wc-item-meta li p {
	display: inline;
	margin: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info .wc-item-meta-label {
	color: var(--ck-ink-2);
	font-weight: 600;
	clear: none;
	margin-right: 2px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info a {
	color: var(--ck-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info .wc-item-downloads {
	display: none; /* the downloads table below lists the same file with its button */
}

/* Line price */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list .wfty_rightDiv {
	float: none;
	width: auto;
	flex: none;
	padding: 0;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_rightDiv .woocommerce-Price-amount.amount,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_rightDiv .woocommerce-Price-amount.amount span {
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ck-ink);
}

/* 7.3 Rows that carry the designs block (quote form 0.2.1 on 6586 orders): the
   block is the row, one line per design with its own thumbnail and price, so
   FunnelKit's product photo, service name, quantity and line total go. The
   subtree returns to inheritance (the block's "*" rules would paint it 12 px #000)
   and the quote form's own sheet paints it from there. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_p_img,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_t,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_quantity_value_box,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_rightDiv {
	display: none;
}
/* The service name is a bare text node before the block when the product is not
   visible in the catalogue (6586 is hidden): shrink the cell's own text away. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_leftDiv .wfty_p_name {
	font-size: 0;
	line-height: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) .wfty_info {
	margin-top: 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--ck-ink);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info .abd-designs,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list .wfty_info .abd-designs * {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
/* Two design rows in a row (an automatic order is one line item per design): no
   divider between them, the block's own row borders do the job. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs) {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont .wfty_pro_list:has(.abd-designs):last-of-type {
	margin-bottom: 12px;
}

/* 7.4 Totals: 13.5 px rows, the last one 16 px bold over a rule. "Total due" on
   unpaid orders comes from the plugin's filter, not from here. */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	box-shadow: none;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr th,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr td {
	display: table-cell;
	width: auto;
	padding: 4px 0;
	border: 0;
	background: transparent;
	font-family: var(--ck-font);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ck-ink-2);
	text-transform: none;
	vertical-align: baseline;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr th {
	text-align: left;
	padding-right: 12px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr th *,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr td * {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr:nth-last-child(2) th,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr:nth-last-child(2) td {
	padding-bottom: 10px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr:last-child th,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr:last-child td {
	padding: 12px 0 0;
	border-top: 1px solid var(--ck-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--ck-ink);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_details .wfty_pro_list_cont table tfoot tr:last-child th {
	padding-right: 12px;
}

/* 7.5 Payment details (printed by the plugin for paid orders): grey box with a
   green rule; on hold gets the amber one. */
body.abdig-ty .abdig-ty-pay {
	margin: 16px 0 0;
	background: var(--ck-surface-2);
	border-left: 4px solid var(--ck-ok);
	border-radius: var(--ck-r-s);
	padding: 12px 16px;
	font-family: var(--ck-font);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ck-ink-2);
}
body.abdig-ty--onhold .abdig-ty-pay {
	border-left-color: var(--ck-warn-line);
}
body.abdig-ty .abdig-ty-pay b,
body.abdig-ty .abdig-ty-pay strong,
body.abdig-ty .abdig-ty-pay__title {
	display: block;
	color: var(--ck-ink);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 4px;
}
/* One line per fact: only the direct children are blocks; the price markup and
   the short reference (full id in its title) stay inline inside them. */
body.abdig-ty .abdig-ty-pay > span,
body.abdig-ty .abdig-ty-pay > p {
	display: block;
	margin: 2px 0;
}
body.abdig-ty .abdig-ty-pay span span,
body.abdig-ty .abdig-ty-pay p span,
body.abdig-ty .abdig-ty-pay .woocommerce-Price-amount,
body.abdig-ty .abdig-ty-pay .woocommerce-Price-amount span {
	display: inline;
	margin: 0;
	font: inherit;
	color: inherit;
}
body.abdig-ty .abdig-ty-pay [title] {
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

/* 7.6 Downloads: the heading, then one row per file (48 px image, product name,
   accent button). FunnelKit's header row ("Product Image", "File") says nothing
   the row does not, so it goes at every width. On desktop the row is a flex
   line; under 767 px it becomes a grid with the button on its own line
   (section 12, where FunnelKit's responsive-table rules are answered). */
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_download {
	margin: 18px 0 0;
	scroll-margin-top: 24px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap .wfty_order_download .wfty_title {
	margin: 0 0 6px;
	font-size: 15px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	box-shadow: none;
	background: transparent;
	font-family: var(--ck-font);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads thead {
	display: none;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tbody,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tbody tr {
	display: block;
	width: 100%;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tbody tr {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--ck-line);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ck-ink);
	text-align: left;
	width: auto;
	min-width: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td::before {
	content: none;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.product-image {
	flex: none;
	width: 48px;
	height: 48px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.product-image a,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.product-image > div {
	display: block;
	width: 48px;
	height: 48px;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.product-image img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--ck-r-s);
	border: 1px solid var(--ck-line);
	background: var(--ck-surface-2);
	margin: 0;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-product {
	flex: 1 1 auto;
	font-weight: 600;
	overflow-wrap: anywhere;
	word-break: normal;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-remaining,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-expires {
	flex: none;
	font-size: 12.5px;
	color: var(--ck-ink-3);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file {
	flex: none;
	margin-left: auto;
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file a {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	box-sizing: border-box;
	height: 38px;
	min-height: 0; /* the theme gives every .button 40 px */
	padding: 0 16px;
	border-radius: var(--ck-r-s);
	border: 1px solid var(--ck-accent);
	background: var(--ck-accent);
	background-color: var(--ck-accent);
	color: var(--ck-white);
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: var(--ck-t);
}
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file a:hover,
body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file:hover a {
	background: var(--ck-accent-hover-fill);
	background-color: var(--ck-accent-hover-fill);
	border-color: var(--ck-accent-hover-fill);
	color: var(--ck-white);
	text-decoration: none;
	box-shadow: none;
}

/* ==========================================================================
   8. What happens next: a heading and three or four numbered cards. The
      shortcode may print the cards straight inside the section or inside an
      .abdig-ty-next__grid wrapper; both lay out the same.
   ========================================================================== */
body.abdig-ty .abdig-ty-next {
	margin: 24px 0 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
body.abdig-ty .abdig-ty-next--three,
body.abdig-ty .abdig-ty-next:has(.abdig-ty-nx:nth-of-type(3):last-of-type) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.abdig-ty .abdig-ty-next > h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}
body.abdig-ty .abdig-ty-next__grid {
	display: contents;
}
body.abdig-ty .abdig-ty-nx {
	background: var(--ck-white);
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r-m);
	padding: 16px 16px 14px;
	position: relative;
	min-width: 0;
}
body.abdig-ty .abdig-ty-nx__n {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ck-tint);
	color: var(--ck-accent);
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 10px;
}
body.abdig-ty .abdig-ty-nx.is-done .abdig-ty-nx__n {
	background: var(--ck-ok-bg);
	color: var(--ck-ok);
}
body.abdig-ty .abdig-ty-nx.is-act .abdig-ty-nx__n {
	background: var(--ck-accent);
	color: var(--ck-white);
}
body.abdig-ty .abdig-ty-nx b,
body.abdig-ty .abdig-ty-nx strong,
body.abdig-ty .abdig-ty-nx__t {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ck-ink);
	margin: 0 0 2px;
}
body.abdig-ty .abdig-ty-nx p.abdig-ty-nx__when {
	font-size: 12.5px;
	color: var(--ck-accent);
	font-weight: 600;
	margin: 0 0 6px;
}
body.abdig-ty .abdig-ty-nx.is-done p.abdig-ty-nx__when {
	color: var(--ck-ok);
}
body.abdig-ty .abdig-ty-nx p {
	margin: 0;
	font-size: 13px;
	color: var(--ck-ink-2);
	line-height: 1.45;
}

/* ==========================================================================
   9. The three cards: portal (or account), emails from us, questions
   ========================================================================== */
body.abdig-ty .abdig-ty-cards {
	margin: 24px 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
body.abdig-ty .abdig-ty-cards > .abdig-ty-card {
	padding: 18px;
}
body.abdig-ty .abdig-ty-card h3 {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 8px;
}
body.abdig-ty .abdig-ty-card h3 svg {
	width: 18px;
	height: 18px;
	color: var(--ck-accent);
	flex: none;
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card p {
	margin: 0 0 8px;
	font-size: 13.5px;
	color: var(--ck-ink-2);
	line-height: 1.5;
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card p b,
body.abdig-ty .abdig-ty-cards .abdig-ty-card p strong {
	color: var(--ck-ink);
	font-weight: 600;
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	color: var(--ck-ink-2);
	line-height: 1.6;
	list-style: disc;
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card ul li {
	margin: 0;
	padding: 0;
}
body.abdig-ty .abdig-ty-card__more {
	margin: 10px 0 0;
}
body.abdig-ty .abdig-ty-card__more .abdig-ty-btn,
body.abdig-ty .abdig-ty-cards .abdig-ty-card .abdig-ty-btn {
	height: 40px;
	font-size: 14px;
	padding: 0 16px;
}
body.abdig-ty .abdig-ty-card__note,
body.abdig-ty .abdig-ty-cards .abdig-ty-card p.abdig-ty-card__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ck-ink-3);
}

/* The email list: a dot (green sent, grey still to come), the subject, when */
body.abdig-ty .abdig-ty-cards .abdig-ty-card ul.abdig-ty-mails,
body.abdig-ty .abdig-ty-mails {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card ul.abdig-ty-mails li,
body.abdig-ty .abdig-ty-mails li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 6px 0;
	border-bottom: 1px solid var(--ck-line);
	color: var(--ck-ink-2);
}
body.abdig-ty .abdig-ty-cards .abdig-ty-card ul.abdig-ty-mails li:last-child,
body.abdig-ty .abdig-ty-mails li:last-child {
	border-bottom: 0;
}
body.abdig-ty .abdig-ty-mails__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ck-ok);
	flex: none;
	margin-top: 6px;
}
body.abdig-ty .abdig-ty-mails__dot.is-soon {
	background: var(--ck-line-hover);
}
body.abdig-ty .abdig-ty-mails b,
body.abdig-ty .abdig-ty-mails strong {
	color: var(--ck-ink);
	font-weight: 600;
}
body.abdig-ty .abdig-ty-mails small {
	display: block;
	color: var(--ck-ink-3);
	font-size: 12px;
	line-height: 1.4;
}

/* ==========================================================================
   10. Cross-sell: a heading and three links with a 48 px image
   ========================================================================== */
body.abdig-ty .abdig-ty-more {
	margin: 24px 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
body.abdig-ty .abdig-ty-more > h2 {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}
body.abdig-ty .abdig-ty-more__grid {
	display: contents;
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-xs,
body.abdig-ty .abdig-ty-xs {
	display: flex;
	gap: 12px;
	align-items: center;
	background: var(--ck-white);
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r-m);
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	transition: var(--ck-t);
}
body.abdig-ty .abdig-ty-wrap a.abdig-ty-xs:hover,
body.abdig-ty .abdig-ty-xs:hover {
	border-color: var(--ck-accent);
	color: inherit;
}
body.abdig-ty .abdig-ty-xs__im {
	width: 48px;
	height: 48px;
	border-radius: var(--ck-r-s);
	flex: none;
	overflow: hidden;
	background: linear-gradient(135deg, #e6ecf2, #cfdae5);
}
body.abdig-ty .abdig-ty-xs__im img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
}
body.abdig-ty .abdig-ty-xs__body {
	min-width: 0;
}
body.abdig-ty .abdig-ty-xs b,
body.abdig-ty .abdig-ty-xs strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ck-ink);
}
body.abdig-ty .abdig-ty-xs span:not(.abdig-ty-xs__im):not(.abdig-ty-xs__go) {
	font-size: 12.5px;
	color: var(--ck-ink-3);
	line-height: 1.4;
}
body.abdig-ty .abdig-ty-xs__go {
	margin-left: auto;
	color: var(--ck-accent);
	font-weight: 700;
	font-size: 18px;
	flex: none;
}

/* ==========================================================================
   11. Trust line, print link, the buttons row
   ========================================================================== */
body.abdig-ty .abdig-ty-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: center;
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--ck-ink-3);
	text-align: center;
}
body.abdig-ty .abdig-ty-trust span::before {
	content: "\2713\00a0\00a0";
	color: var(--ck-ok);
}
body.abdig-ty .abdig-ty-print {
	text-align: center;
	margin: 12px 0 0;
	font-size: 12.5px;
}
body.abdig-ty .abdig-ty-wrap .abdig-ty-print a {
	color: var(--ck-ink-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.abdig-ty .abdig-ty-wrap .abdig-ty-print a:hover {
	color: var(--ck-accent);
}
body.abdig-ty .abdig-ty-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
}

/* ==========================================================================
   12. Tablets and phones
   ========================================================================== */
@media (max-width: 1023px) {
	body.abdig-ty .abdig-ty-next,
	body.abdig-ty .abdig-ty-next--three,
	body.abdig-ty .abdig-ty-next:has(.abdig-ty-nx:nth-of-type(3):last-of-type) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.abdig-ty .abdig-ty-cards,
	body.abdig-ty .abdig-ty-more {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

@media (max-width: 767px) {
	body.abdig-ty .abdig-ty-wrap {
		padding: 0 0 24px;
	}
	body.abdig-ty .abdig-ty-stepper {
		max-width: 100%;
		margin: 12px auto 18px;
	}
	body.abdig-ty .abdig-ty-step {
		width: 64px;
	}
	body.abdig-ty .abdig-ty-step__label {
		font-size: 11.5px;
	}
	body.abdig-ty .abdig-ty-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	body.abdig-ty .abdig-ty-card {
		padding: 18px 16px;
	}
	body.abdig-ty h1.abdig-ty-greet__title,
	body.abdig-ty .abdig-ty-greet__title {
		font-size: 21px;
	}
	body.abdig-ty .abdig-ty-status {
		padding: 16px;
	}
	body.abdig-ty .abdig-ty-actions {
		flex-direction: column;
		align-items: stretch;
	}
	body.abdig-ty .abdig-ty-wrap a.abdig-ty-btn,
	body.abdig-ty .abdig-ty-btn {
		width: 100%;
	}
	body.abdig-ty .abdig-ty-actions .abdig-ty-link {
		text-align: center;
	}
	body.abdig-ty .abdig-ty-customer {
		padding: 14px 16px;
	}
	body.abdig-ty .abdig-ty-customer__grid {
		grid-template-columns: 1fr;
	}
	body.abdig-ty .abdig-ty-next,
	body.abdig-ty .abdig-ty-next--three,
	body.abdig-ty .abdig-ty-next:has(.abdig-ty-nx:nth-of-type(3):last-of-type),
	body.abdig-ty .abdig-ty-cards,
	body.abdig-ty .abdig-ty-more {
		grid-template-columns: minmax(0, 1fr);
	}
	body.abdig-ty .abdig-ty-buttons {
		flex-direction: column;
	}
	/* Downloads on phones: image and name on one line, the button full width under
	   them. The responsive-table rules of FunnelKit (and the theme's) under 600 px
	   turn every cell into a right-aligned, full-width block with 10 px of
	   padding, all !important; the row becomes a grid so the cell widths are grid
	   areas, and the two !important below answer the two that would still show
	   (the right alignment inside the name cell, the 10 px on every cell). */
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tbody tr {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 10px 12px;
		align-items: center;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td {
		text-align: left !important; /* FunnelKit: text-align: right !important under 600 px */
		padding: 0 !important;       /* FunnelKit: padding: 10px 0 !important under 600 px */
		width: auto;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.product-image {
		grid-column: 1;
		grid-row: 1;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-product {
		grid-column: 2;
		grid-row: 1;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tbody tr:not(:has(td.product-image)) td.download-product {
		grid-column: 1 / -1;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-remaining,
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-expires,
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file {
		grid-column: 1 / -1;
		margin: 0;
	}
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file a {
		width: 100%;
	}
}

/* ==========================================================================
   13. Print: the page as a receipt. The site chrome, the buttons, the cross-sell
       and the three cards go; the stepper, the status, the customer details,
       the order details and the next steps stay, in one column.
   ========================================================================== */
@media print {
	body.abdig-ty {
		background: #fff;
	}
	body.abdig-ty header#header,
	body.abdig-ty footer#footer,
	body.abdig-ty .ct-drawer-canvas,
	body.abdig-ty .ct-back-to-top,
	body.abdig-ty .skip-link,
	body.abdig-ty .abdig-ty-buttons,
	body.abdig-ty .abdig-ty-more,
	body.abdig-ty .abdig-ty-cards,
	body.abdig-ty .abdig-ty-trust,
	body.abdig-ty .abdig-ty-print,
	body.abdig-ty .abdig-ty-actions,
	body.abdig-ty .abdig-ty-btn,
	body.abdig-ty .wfty-order-details-block .wffn_order_details_table .wfty_wrap table.wfty_order_downloads tr td.download-file {
		display: none;
	}
	body.abdig-ty .abdig-ty-wrap {
		max-width: none;
		padding: 0;
	}
	body.abdig-ty .abdig-ty-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	body.abdig-ty .abdig-ty-card,
	body.abdig-ty .abdig-ty-status,
	body.abdig-ty .abdig-ty-customer,
	body.abdig-ty .abdig-ty-nx {
		break-inside: avoid;
		box-shadow: none;
	}
	body.abdig-ty .abdig-ty-next {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.abdig-ty .abdig-ty-wrap a {
		color: inherit;
		text-decoration: none;
	}
}
