:root {
	/* THE STANDARD — fixed palette, see _project/docs/DESIGN-STANDARD.md */
	--wc24-blue: #2A5EC9;
	--wc24-blue-hover: #22509F;
	--wc24-blue-light: #EAF2FE;
	--wc24-blue-selected: #F0F5FD;
	--wc24-amber: #FFB020;
	--wc24-amber-light: #FFF6E5;
	--wc24-green: #00803D;
	--wc24-green-light: #E6F4EC;
	--wc24-red: #D6180B;
	--wc24-red-light: #FDECEA;

	/* text — nothing is pure black */
	--wc24-heading: #1F2933;
	--wc24-body: #3E4C59;
	--wc24-muted: #6B7684;
	--wc24-price: #2C3A47;

	/* legacy aliases kept for anything still referencing the old names */
	--wc24-ink: var(--wc24-heading);

	--wc24-line: #E9E9E9;
	--wc24-panel: #F5F7F9;
	--wc24-radius: 14px;
	--wc24-pill: 26px;
	--wc24-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
	--wc24-shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.09);

	/* type scale — see THE STANDARD */
	--wc24-fs-hero: 34px;
	--wc24-fs-page-h1: 30px;
	--wc24-fs-product-title: 26px;
	--wc24-fs-section-h: 22px;
	--wc24-fs-body: 14px;
	--wc24-fs-muted: 13px;
	--wc24-fs-price-product: 30px;
	--wc24-fs-price-plan: 26px;
	--wc24-fs-price-category: 22px;
	--wc24-fs-price-card: 19px;
	--wc24-fs-price-cart: 17px;
	--wc24-fs-button: 14.5px;
}

/* Kadence kills the keyboard focus ring site-wide with
     :where(html:not(.no-js)) .hide-focus-outline :focus { outline: 0 }
   and puts body.hide-focus-outline on every page. That selector is (0,2,0) —
   :where() contributes nothing, but .hide-focus-outline and :focus are a
   class each.

   This rule used to be `a:focus-visible` alone, which is (0,1,1): one class
   against their two, so it lost every time and the ring was never actually
   restored. It looked right in the stylesheet and did nothing on the page,
   which is the worst way for an accessibility fix to fail.

   So it is stated twice on purpose. The first is the baseline for when the
   body class is absent; the second out-specifies Kadence at (0,2,1) for when
   it is present. Neither relies on stylesheet order.

   :focus-visible, not :focus, so a mouse click does not draw a ring — which
   is the thing Kadence's class was crudely trying to achieve in the first
   place. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--wc24-blue);
	outline-offset: 2px;
}
html .hide-focus-outline :focus-visible {
	outline: 2px solid var(--wc24-blue);
	outline-offset: 2px;
}

.woocommerce ul.products li.product {
	background: #fff;
	border: 0 !important;
	border-radius: var(--wc24-radius) !important;
	box-shadow: var(--wc24-shadow);
	overflow: hidden;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--wc24-shadow-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product p.price bdi {
	color: var(--wc24-price) !important;
	font-weight: 700 !important;
	letter-spacing: -.025em;
}

.woocommerce ul.products li.product .price { font-size: var(--wc24-fs-price-card) !important; }
.woocommerce div.product p.price { font-size: var(--wc24-fs-price-product) !important; }

/* THE STANDARD: outline is the default button — white fill, 1.5px blue
   border, blue text. Add-to-cart is the only solid button (see below). */
/* display:inline-flex + min-height, not padding alone — a <button>'s UA
   line-height ran this to 40px measured, under the 44px tap-target minimum
   (an <a> with body's inherited 1.6 line-height clears it on padding alone,
   but a <button> can't be relied on to). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button {
	align-items: center !important;
	background: #fff !important;
	border: 1.5px solid var(--wc24-blue) !important;
	border-radius: var(--wc24-pill) !important;
	box-sizing: border-box !important;
	color: var(--wc24-blue) !important;
	display: inline-flex !important;
	font-size: var(--wc24-fs-button) !important;
	font-weight: 600 !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 12px 24px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wc24-blue-selected) !important;
	color: var(--wc24-blue) !important;
}

/* Solid: the single primary action in context — add to cart, proceed to
   checkout, the recommended plan, one CTA in a full-width band. See
   _project/docs/DESIGN-STANDARD.md. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce ul.products li.product .add_to_cart_button,
.wc-block-components-button {
	background: var(--wc24-blue) !important;
	border: 1.5px solid var(--wc24-blue) !important;
	border-radius: var(--wc24-pill) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wc24-blue-hover) !important;
	border-color: var(--wc24-blue-hover) !important;
	color: #fff !important;
}

.woocommerce ul.products li.product .button {
	display: block !important;
	margin-top: 12px;
	text-align: center;
}

/* .woocommerce prefix to beat Kadence's own .woocommerce .woocommerce-message
   rule (same specificity would lose to load order); border-left, not
   border-top — that's the side Kadence actually draws one on. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	background: var(--wc24-blue-light);
	border-left-color: var(--wc24-blue);
	border-radius: 10px;
	color: var(--wc24-heading);
	font-size: var(--wc24-fs-body);
}

.woocommerce .woocommerce-error {
	background: #FDECEA;
	border-left-color: var(--wc24-red);
	border-radius: 10px;
	color: var(--wc24-heading);
	font-size: var(--wc24-fs-body);
}

.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-error a {
	color: var(--wc24-blue);
	font-weight: 600;
}

/* Real interactive toggle ("Have a coupon?"), not a footer/utility-bar link — 44px applies. */
.woocommerce a.showcoupon { align-items: center; display: inline-flex; min-height: 44px; }

.wc24-turnaround {
	color: var(--wc24-muted);
	font-size: .85rem;
	margin: 4px 0 2px;
}

.wc24-emergency {
	align-items: flex-start;
	background: #FFF6E5;
	border-radius: 12px;
	display: flex;
	font-size: .92rem;
	gap: 11px;
	line-height: 1.45;
	margin: 0 0 20px;
	padding: 14px 16px;
}

.wc24-emergency input {
	accent-color: #B8760A;
	flex: none;
	height: 17px;
	margin-top: 2px;
	width: 17px;
}

.wc24-emergency strong { color: #8A5A00; }

/* No stacking a diagnosis fix — quantity locked to 1 (see
   woocommerce_is_sold_individually in functions.php), input hidden since
   there's nothing for a buyer to do with it. */
.woocommerce div.product form.cart div.quantity { display: none; }

/* trust block */
.wc24-trust {
	background: var(--wc24-panel);
	border-radius: 16px;
	margin: 44px 0;
	padding: 34px 36px;
}

.wc24-trust-grid {
	display: grid;
	gap: 26px 40px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* An odd final card would otherwise sit in the left column with an empty
   cell beside it. Spanning the row makes it read as a closing line rather
   than a leftover, and adjusts itself if the number of promises changes. */
.wc24-trust-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

.wc24-trust h4 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.015em;
	margin: 0 0 7px;
}

.wc24-trust p {
	color: var(--wc24-muted);
	font-size: .93rem;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 720px) {
	.wc24-trust-grid { grid-template-columns: minmax(0, 1fr); }
	.wc24-trust { padding: 26px 22px; }
}

/* ---------------------------------------------------------------------- */
/* single product — webcare24-product-page-sample.html                     */
/* ---------------------------------------------------------------------- */

.wc24-crumb { font-size: 13px; color: var(--wc24-muted); padding: 20px 0 0; }
.wc24-crumb a { color: inherit; }
.wc24-crumb a:hover { color: var(--wc24-blue); }

/*
 * Both two-column sections on this page — the above-fold buy column and the
 * below-fold sticky rail — share one right-column width so the page's right
 * edge runs straight instead of stepping in or out between them.
 */
:root { --wc24-product-rail: 380px; }

/* above the fold: image left, buy column right */
.wc24-pdp { align-items: start; display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) var(--wc24-product-rail); padding: 22px 0 0; }

.wc24-gal { background: #fff; border: 1px solid var(--wc24-line); border-radius: 10px; overflow: hidden; }
.wc24-gal img { display: block; height: auto; width: 100%; }
.wc24-gal .woocommerce-product-gallery,
.wc24-gal .woocommerce-product-gallery__wrapper { margin: 0; }
/* Single composed image per product, no thumbnail strip to toggle between. */
.wc24-gal .flex-control-thumbs { display: none; }

/* The left column: image, then the direct answer, then the self-check where
   the product has one. 318 of 674 do not, and those columns are meant to end
   short rather than have filler invented for them. */
.wc24-pcol { display: flex; flex-direction: column; min-width: 0; }
.wc24-pcol .wc24-gal { margin-bottom: 26px; }
.wc24-pcol .wc24-answer { max-width: none; }
.wc24-pcol .wc24-selfcheck { margin-bottom: 0; }

/* WooCommerce puts class="images" on the gallery and its own stylesheet floats
   that at 48%, so the artwork sat in the left half of a full-width bordered
   box with ~390px of empty space beside it. Measured: 358px inside a 748px
   column. Our column, our width — specificity has to clear
   `.woocommerce div.product div.images` (0,3,2), hence the shape of this. */
.woocommerce div.product .wc24-gal div.images,
.woocommerce div.product .wc24-gal .woocommerce-product-gallery {
	float: none;
	margin: 0;
	width: 100%;
}

/* WooCommerce ships the gallery with inline opacity:0 and relies on its own
   JS to fade it in. On a product page the image is the likeliest LCP element,
   so that made the LCP wait on a script — and left the image invisible
   entirely if the script never ran. Inline styles need !important to beat.
   Every product has exactly one image and no gallery extras, so there is no
   stack of images to hide while flexslider collapses them: nothing is being
   protected by the fade. */
.wc24-gal .woocommerce-product-gallery { opacity: 1 !important; }

.wc24-buy .wc24-sku { color: var(--wc24-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; margin-bottom: 9px; }
.wc24-buy h1 { color: var(--wc24-price); font-size: var(--wc24-fs-product-title); font-weight: 700; letter-spacing: -.025em; line-height: 1.22; margin: 0 0 14px; }
.wc24-buy .wc24-lede { color: var(--wc24-body); font-size: 15px; margin: 0 0 20px; }

.wc24-pbox { border: 1px solid var(--wc24-line); border-radius: 16px; box-shadow: var(--wc24-shadow); padding: 22px; }
.wc24-pbox .wc24-price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 4px; }
.wc24-pbox .wc24-price .p { color: var(--wc24-price); font-size: var(--wc24-fs-price-product); font-weight: 700; letter-spacing: -.035em; }
.wc24-pbox .wc24-price .p .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.wc24-pbox .wc24-price .t { color: var(--wc24-muted); font-size: 14px; }
.wc24-pbox .wc24-acc { border-bottom: 1px solid var(--wc24-line); color: var(--wc24-muted); font-size: 13.5px; margin-bottom: 16px; padding-bottom: 16px; }
.wc24-pbox form.cart { margin: 0; }
.wc24-pbox .single_add_to_cart_button { box-sizing: border-box; display: block; width: 100%; }

.wc24-ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.wc24-ticks li { align-items: baseline; color: var(--wc24-body); display: flex; font-size: 13.5px; gap: 9px; padding: 6px 0; }
.wc24-ticks li:before { color: var(--wc24-green); content: "\2713"; font-weight: 700; }

/* Market context for the $49 band. Quiet on purpose: it is a footnote to the
   price, not a second sales pitch, and it renders only on Q products and on
   categories that hold one. */
.wc24-valuenote { background: var(--wc24-blue-light); border-radius: 6px; color: var(--wc24-body); font-size: 13px; line-height: 1.6; margin: 16px 0 0; padding: 13px 15px; }
.wc24-valuenote b { color: var(--wc24-heading); }
.wc24-valuenote-src { color: var(--wc24-muted); display: block; font-size: 11.5px; margin-top: 5px; }
.wc24-box .wc24-valuenote-src { margin-top: 7px; }

/* The gate's enquiry route. The form lives AFTER the checkout form because a
   form inside a form is discarded by the parser — see business-gate.php. It is
   always in the DOM and revealed by the fragment, so the reveal survives
   JavaScript being off: following #wc24-enquiry makes :target match. */
.wc24-enquiry-block { display: none; }
.wc24-enquiry-block:target,
.wc24-enquiry-block.is-open { display: block; margin: 40px auto 0; max-width: 620px; background: var(--wc24-blue-light); border-radius: 8px; padding: 26px 28px; }
.wc24-enq-msg { border-radius: 5px; font-size: 14.5px; margin: 0 0 18px; padding: 12px 14px; }
.wc24-enq-ok { background: var(--wc24-green-light); color: var(--wc24-heading); }
.wc24-enq-bad { background: var(--wc24-amber-light); color: var(--wc24-heading); }
.wc24-enquiry-block h2 { color: var(--wc24-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.wc24-enquiry-block p { color: var(--wc24-body); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; }
.wc24-enquiry-block label { color: var(--wc24-heading); display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.wc24-enquiry-block input, .wc24-enquiry-block textarea { border: 1px solid var(--wc24-line); border-radius: 5px; box-sizing: border-box; font: inherit; font-size: 15px; padding: 11px 13px; width: 100%; }
.wc24-enquiry-block textarea { resize: vertical; }
.wc24-gate-link { text-decoration: underline; }

/* The export invoice. Screen first, print second — there is no PDF pipeline, the
   browser makes the file when anyone needs one. */
.wc24-inv { background: #fff; margin: 0 auto; max-width: 820px; padding: 8px 0 60px; }
.wc24-inv-head { align-items: start; border-bottom: 2px solid var(--wc24-heading); display: flex; gap: 32px; justify-content: space-between; padding-bottom: 18px; }
.wc24-inv-head h1 { color: var(--wc24-heading); font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.wc24-inv-kind { color: var(--wc24-muted); font-size: 13.5px; margin: 4px 0 0; }
.wc24-inv-no { font-size: 13.5px; line-height: 1.7; text-align: right; }
.wc24-inv-no b { color: var(--wc24-muted); font-weight: 600; }
.wc24-inv-parties { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; padding: 26px 0; }
.wc24-inv-parties h2 { color: var(--wc24-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }
.wc24-inv-parties p { font-size: 13.5px; line-height: 1.65; margin: 0 0 10px; }
.wc24-inv-pos { border-top: 1px solid var(--wc24-line); padding-top: 10px; }
.wc24-inv-lines { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.wc24-inv-lines th, .wc24-inv-lines td { border-bottom: 1px solid var(--wc24-line); padding: 11px 8px; text-align: left; vertical-align: top; }
.wc24-inv-lines thead th { color: var(--wc24-muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.wc24-inv-lines .r { text-align: right; }
.wc24-inv-lines tfoot th { border-bottom: none; border-top: 2px solid var(--wc24-heading); font-size: 15px; }
.wc24-inv-sku { color: var(--wc24-muted); display: block; font-size: 11.5px; }
.wc24-inv-notes { font-size: 13px; line-height: 1.7; padding-top: 24px; }
.wc24-inv-notes p { margin: 0 0 10px; }
.wc24-inv-endorse { background: var(--wc24-blue-light); border-radius: 4px; font-weight: 700; letter-spacing: .01em; padding: 10px 12px; }
.wc24-inv-todo { color: var(--wc24-muted); }
.wc24-inv-print { padding-top: 20px; }

/* The invoice is a document, not a page. Strip the furniture around it — the
   hero in particular, which duplicated the document's own heading and, sitting
   inside the content area rather than in <header>, printed with it. */
.wc24-invoice-page .entry-hero,
.wc24-invoice-page .page-hero-section { display: none; }
.wc24-invoice-page .entry-content-wrap { padding-top: 34px; }

@media print {
	.wc24-inv-print, header, footer, .wc24-mega, #wpadminbar { display: none !important; }
	.wc24-invoice-page .entry-hero, .wc24-invoice-page .page-hero-section { display: none !important; }
	.wc24-inv { max-width: none; padding: 0; }
	.wc24-inv-endorse { background: none; border: 1px solid #000; }
	a[href]:after { content: none !important; }
}

@media (max-width: 720px) {
	.wc24-inv-head { display: block; }
	.wc24-inv-no { margin-top: 14px; text-align: left; }
	.wc24-inv-parties { grid-template-columns: 1fr; gap: 22px; }
	.wc24-inv-lines th:nth-child(2), .wc24-inv-lines td:nth-child(2) { display: none; }
}

/* below the fold: copy + sticky rail */
.wc24-lower { align-items: start; display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) var(--wc24-product-rail); }
.wc24-copy { max-width: none; padding: 44px 0 70px; }

.wc24-pcol .wc24-answer, .wc24-copy .wc24-answer { border-left: 3px solid var(--wc24-blue); color: var(--wc24-body); font-size: 16.5px; line-height: 1.65; margin: 0 0 34px; padding-left: 22px; }
.wc24-copy h2 { color: var(--wc24-heading); font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 32px 0 12px; }
.wc24-copy h2:first-child { margin-top: 0; }
.wc24-copy p { margin: 0 0 14px; max-width: 70ch; }
.wc24-copy ul, .wc24-copy ol { margin: 0 0 16px 20px; padding: 0; }
.wc24-copy li { line-height: 1.5; max-width: 68ch; padding: 4px 0; }

.wc24-pcol .wc24-selfcheck, .wc24-copy .wc24-selfcheck { background: var(--wc24-blue-light); border-radius: 14px; margin: 0 0 34px; padding: 24px 28px; }
.wc24-pcol .wc24-selfcheck h2, .wc24-copy .wc24-selfcheck h2 { font-size: 18px; margin-top: 0; }
.wc24-pcol .wc24-selfcheck p, .wc24-copy .wc24-selfcheck p { font-size: 14px; margin-bottom: 11px; }
.wc24-pcol .wc24-selfcheck p:last-child, .wc24-copy .wc24-selfcheck p:last-child { margin-bottom: 0; }
.wc24-pcol .wc24-selfcheck code, .wc24-copy .wc24-selfcheck code { background: #fff; border-radius: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; padding: 2px 7px; }

.wc24-copy table.wc24-disambig { border-collapse: collapse; margin: 0 0 34px; width: 100%; }
.wc24-copy table.wc24-disambig td { border-bottom: 1px solid var(--wc24-line); font-size: 14px; padding: 12px 14px; }
.wc24-copy table.wc24-disambig td:first-child { color: var(--wc24-muted); width: 56%; }
.wc24-copy table.wc24-disambig td:last-child { color: var(--wc24-heading); font-weight: 600; }

/* short-item lists run two-up so a wide row doesn't leave half of it empty */
.wc24-copy ul.two, .wc24-copy ol.two { column-gap: 44px; columns: 2; list-style-position: inside; margin-bottom: 16px; margin-left: 0; padding-left: 0; }
.wc24-copy ul.two li, .wc24-copy ol.two li { -webkit-column-break-inside: avoid; break-inside: avoid; line-height: 1.5; max-width: none; padding: 3px 0 3px 20px; text-indent: -20px; }
.wc24-copy ol.two { counter-reset: st; list-style: none; }
.wc24-copy ol.two li { counter-increment: st; padding: 4px 0 4px 28px; position: relative; text-indent: 0; }
.wc24-copy ol.two li:before {
	align-items: center; background: var(--wc24-blue-light); border-radius: 50%; color: var(--wc24-blue);
	content: counter(st); display: flex; font-size: 11.5px; font-weight: 700; height: 20px; justify-content: center;
	left: 0; position: absolute; top: 5px; width: 20px;
}

/* FAQs — plain h2 + h3 + p, no accordion */
.wc24-faqgrid { column-gap: 44px; columns: 2; margin-bottom: 8px; }
.wc24-faqgrid .wc24-faq { -webkit-column-break-inside: avoid; border-bottom: 1px solid var(--wc24-line); break-inside: avoid; margin-bottom: 4px; }
.wc24-faqgrid .wc24-faq h3 { color: var(--wc24-heading); font-size: 16px; font-weight: 700; margin: 0; padding: 16px 0 6px; }
.wc24-faqgrid .wc24-faq p { color: var(--wc24-body); margin: 0; max-width: none; padding: 0 0 16px; }

.wc24-buystrip { align-items: center; background: var(--wc24-panel); border: 1px solid var(--wc24-line); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 24px; margin: 44px 0 34px; padding: 22px 26px; }
.wc24-buystrip .bs-t { color: var(--wc24-heading); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.wc24-buystrip .bs-m { color: var(--wc24-muted); font-size: 13.5px; }
.wc24-buystrip form.cart { margin: 0 0 0 auto; }
.wc24-buystrip .single_add_to_cart_button { white-space: nowrap; }

.wc24-rel { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 34px; }
.wc24-rel a { border: 1px solid var(--wc24-line); border-radius: 12px; display: block; padding: 16px 18px; }
.wc24-rel a:hover { box-shadow: var(--wc24-shadow); }
.wc24-rel .rs { color: var(--wc24-muted); display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; margin-bottom: 5px; }
.wc24-rel .rt { color: var(--wc24-heading); display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.wc24-rel .rp { color: var(--wc24-muted); display: block; font-size: 13px; }
.wc24-rel .rp .woocommerce-Price-amount { color: var(--wc24-price); font-weight: 700; }

.wc24-upsell { align-items: center; border: 1px solid var(--wc24-line); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 34px; padding: 26px 30px; }
.wc24-upsell h3 { color: var(--wc24-heading); font-size: 17px; font-weight: 700; margin: 0 0 7px; }
.wc24-upsell p { color: var(--wc24-muted); font-size: 14px; margin: 0; max-width: 62ch; }
.wc24-upsell .wc24-btn { margin-left: auto; white-space: nowrap; }

/* sticky rail */
.wc24-rail { display: flex; flex-direction: column; gap: 16px; padding-top: 44px; position: -webkit-sticky; position: sticky; top: 20px; }
.wc24-railbox { background: #fff; border: 1px solid var(--wc24-line); border-radius: 16px; box-shadow: var(--wc24-shadow); padding: 22px; }
.wc24-railbox.quiet { background: var(--wc24-panel); border-color: transparent; box-shadow: none; }
.wc24-railbox .rb-sku { color: var(--wc24-muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; margin-bottom: 8px; }
.wc24-railbox .rb-price { color: var(--wc24-price); font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.wc24-railbox .rb-price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.wc24-railbox .rb-turn { color: var(--wc24-muted); font-size: 13.5px; margin: 4px 0 18px; }
.wc24-railbox form.cart { margin: 0; }
.wc24-railbox .single_add_to_cart_button { box-sizing: border-box; display: block; width: 100%; }
.wc24-railbox .rb-note { color: var(--wc24-muted); font-size: 12.5px; line-height: 1.5; margin-top: 14px; }
/* h2 as well as h4: the partner application's rail sits directly under the
   page h1 with nothing between, so h4 there was a heading-level skip. Same
   size either way — the level is about document structure, not appearance. */
.wc24-railbox h4, .wc24-railbox h2 { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 0 0 11px; }
.wc24-railbox .rb-acc { list-style: none; margin: 0 0 11px; padding: 0; }
.wc24-railbox .rb-acc li { color: var(--wc24-body); font-size: 13.5px; padding: 4px 0 4px 18px; position: relative; }
.wc24-railbox .rb-acc li:before { background: var(--wc24-muted); border-radius: 50%; content: ""; height: 5px; left: 0; position: absolute; top: 12px; width: 5px; }
.wc24-railbox.quiet p { color: var(--wc24-muted); font-size: 12.5px; line-height: 1.5; margin: 0; }
.wc24-railbox .rb-rel { align-items: baseline; border-bottom: 1px solid var(--wc24-line); color: var(--wc24-body); display: flex; font-size: 13.5px; gap: 10px; padding: 9px 0; }
.wc24-railbox .rb-rel:last-of-type { border-bottom: 0; }
.wc24-railbox .rb-rel span { flex: 1; line-height: 1.35; }
.wc24-railbox .rb-rel em { color: var(--wc24-price); font-size: 13px; font-style: normal; font-weight: 700; }
.wc24-railbox .rb-all { color: var(--wc24-blue); display: block; font-size: 13.5px; font-weight: 600; margin-top: 12px; }

@media (max-width: 1180px) {
	:root { --wc24-product-rail: 320px; }
	.wc24-pdp, .wc24-lower { gap: 32px; }
}
@media (max-width: 980px) {
	.wc24-pdp, .wc24-lower, .wc24-rel { grid-template-columns: minmax(0, 1fr); }
	.wc24-copy ul.two, .wc24-copy ol.two, .wc24-faqgrid { columns: 1; }
	.wc24-rail { padding-top: 0; position: static; }
	.wc24-buystrip form.cart, .wc24-upsell .wc24-btn { margin-left: 0; width: 100%; }
	.wc24-buystrip .single_add_to_cart_button { width: 100%; }
}
@media (max-width: 640px) {
	.wc24-buy h1 { font-size: 22px; }
	.wc24-pbox { padding: 18px; }
	.wc24-buystrip, .wc24-upsell { padding: 20px; }
}

/*
 * Safari below 14.1 has no flex gap — every flex row on this page that
 * relies on `gap` for spacing gets a margin-left fallback instead, so rows
 * don't visually collapse together rather than just losing some breathing
 * room. Matches the pattern already established in the other approved
 * page samples (webcare24-remaining-pages.html etc).
 */
@supports not (row-gap: 1px) {
	.wc24-pbox .wc24-price > * + *,
	.wc24-ticks li > * + *,
	.wc24-buystrip > * + *,
	.wc24-upsell > * + *,
	.wc24-railbox .rb-rel > * + * { margin-left: 10px; }
}

/* ---------------------------------------------------------------------- */
/* category archive — webcare24-category-page-sample.html                  */
/* ---------------------------------------------------------------------- */

/*
 * The filter rail (left, above/below the fold) and the bottom "About these
 * fixes" aside (right, at the very bottom) share one narrow-column width —
 * same reasoning as the product page's --wc24-product-rail — so the page's
 * two supplementary columns read as one consistent rhythm even though one
 * sits left and the other right.
 */
:root { --wc24-category-rail: 236px; }

/* above the fold: H1 + lead + stats, then the 3 best-selling cards */
.wc24-chead { align-items: end; display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) 300px; padding: 26px 0 22px; }
.wc24-chead h1 { color: var(--wc24-price); font-size: var(--wc24-fs-page-h1); font-weight: 700; letter-spacing: -.03em; margin: 0 0 8px; }
.wc24-chead p { color: var(--wc24-muted); font-size: 16px; margin: 0; max-width: 58ch; }
.wc24-cstats { display: flex; gap: 26px; padding-bottom: 4px; }
.wc24-cstats .n { color: var(--wc24-price); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.wc24-cstats .l { color: var(--wc24-muted); font-size: 12.5px; }

.wc24-mostlbl { color: var(--wc24-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 12px; }
.wc24-toprow { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 30px; }
.wc24-tcard { align-items: flex-start; background: #fff; border: 1px solid var(--wc24-line); border-radius: 14px; display: flex; gap: 14px; padding: 15px; }
.wc24-tcard:hover { box-shadow: var(--wc24-shadow); }
.wc24-tcard .im { flex: none; width: 84px; }
.wc24-tcard .im img { border-radius: 8px; display: block; height: 56px; object-fit: cover; width: 84px; }
.wc24-tcard .sku { color: var(--wc24-muted); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; margin-bottom: 4px; }
.wc24-tcard .tt { color: var(--wc24-heading); display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 7px; }
.wc24-tcard .r { align-items: baseline; display: flex; gap: 8px; }
.wc24-tcard .p { color: var(--wc24-price); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.wc24-tcard .p .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.wc24-tcard .t { color: var(--wc24-muted); font-size: 12.5px; }

.wc24-cgrid { align-items: start; display: grid; gap: 30px; grid-template-columns: var(--wc24-category-rail) minmax(0, 1fr); padding-top: 4px; }
/* No filter rail until the filters filter — see archive-product.php. */
.wc24-cgrid-wide { grid-template-columns: minmax(0, 1fr); }

/* filter sidebar */

.wc24-filters {
	background: #fff;
	border-radius: var(--wc24-radius);
	box-shadow: var(--wc24-shadow);
	padding: 22px;
	position: -webkit-sticky;
	position: sticky;
	top: 24px;
}

.wc24-filters h2 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 14px;
}

.wc24-fgrp {
	border-top: 1px solid var(--wc24-line);
	color: var(--wc24-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 18px 0 4px;
	padding-top: 16px;
}
.wc24-fgrp:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.wc24-filters label {
	align-items: center;
	color: var(--wc24-body);
	cursor: default;
	display: flex;
	font-size: .9rem;
	gap: 9px;
	min-height: 40px;
	padding: 7px 0;
}

.wc24-filters input { accent-color: var(--wc24-blue); flex: none; height: 16px; width: 16px; }
.wc24-filters label span:first-of-type { flex: 1; }
.wc24-filters .pr { color: var(--wc24-muted); font-size: .85rem; margin-left: auto; }

.wc24-filters-note {
	color: var(--wc24-muted);
	font-size: .78rem;
	line-height: 1.5;
	margin: 18px 0 0;
}

/* results toolbar */

.wc24-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-bottom: 18px;
}

.wc24-toolbar .woocommerce-result-count {
	color: var(--wc24-muted);
	font-size: .92rem;
	margin: 0;
}

.wc24-toolbar .woocommerce-ordering { margin: 0; }

.wc24-toolbar .woocommerce-ordering select {
	background: #fff;
	border: 1px solid var(--wc24-line);
	border-radius: 10px;
	color: var(--wc24-body);
	font-size: .88rem;
	font-weight: 600;
	padding: 9px 14px;
}

.wc24-toolbar .woocommerce-notices-wrapper:empty { display: none; }
.wc24-toolbar .woocommerce-notices-wrapper { flex-basis: 100%; order: -1; }

/* results — horizontal cards */

.wc24-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wc24-card {
	background: #fff;
	border: 0 !important;
	border-radius: var(--wc24-radius) !important;
	box-shadow: var(--wc24-shadow);
	display: flex;
	gap: 22px;
	padding: 18px;
}

.wc24-card:hover { box-shadow: var(--wc24-shadow-2); }

.wc24-card-image {
	border-radius: 10px;
	flex: none;
	height: 162px;
	overflow: hidden;
	width: 216px;
}

.wc24-card-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wc24-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.wc24-card-sku {
	color: var(--wc24-muted);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.wc24-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
	margin: 0 0 8px;
}

.wc24-card-title a { color: var(--wc24-ink); text-decoration: none; }
.wc24-card-title a:hover { color: var(--wc24-blue); }

.wc24-card-desc {
	color: var(--wc24-muted);
	flex: 1;
	font-size: .92rem;
	line-height: 1.55;
	margin: 0 0 12px;
	max-width: 62ch;
}

.wc24-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.wc24-pill {
	background: var(--wc24-blue-light);
	border-radius: var(--wc24-pill);
	color: var(--wc24-blue);
	font-size: .78rem;
	font-weight: 700;
	padding: 5px 12px;
}

.wc24-card-needs {
	color: var(--wc24-muted);
	font-size: .82rem;
}

.wc24-card-side {
	align-items: flex-end;
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	text-align: right;
	width: 168px;
}

.wc24-card-price {
	margin-bottom: 4px;
}

.wc24-card-price .price,
.wc24-card-price .price bdi {
	color: var(--wc24-price) !important;
	font-size: var(--wc24-fs-price-category) !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
}

.wc24-card-turnaround {
	color: var(--wc24-muted);
	font-size: .82rem;
	margin-bottom: 14px;
}

.wc24-card-cta .button { white-space: nowrap; }

/* the description, at the very bottom, paired so the row doesn't sit half empty */
.wc24-about { align-items: start; border-top: 1px solid var(--wc24-line); display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) var(--wc24-category-rail); margin-top: 46px; padding: 44px 0 70px; }
.wc24-about h2 { color: var(--wc24-heading); font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 14px; }
.wc24-about p { color: var(--wc24-body); margin: 0 0 14px; max-width: 72ch; }
.wc24-aside .wc24-box { border: 1px solid var(--wc24-line); border-radius: 16px; margin-bottom: 16px; padding: 22px; }
.wc24-aside .wc24-box.quiet { background: var(--wc24-panel); border-color: transparent; }
.wc24-aside h3 { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 0 0 11px; }
.wc24-aside .wc24-box p { color: var(--wc24-muted); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.wc24-aside .wc24-lk { align-items: baseline; border-bottom: 1px solid var(--wc24-line-2, var(--wc24-line)); display: flex; font-size: 13.5px; gap: 10px; padding: 9px 0; }
.wc24-aside .wc24-lk:last-of-type { border-bottom: 0; }
.wc24-aside .wc24-lk span { flex: 1; line-height: 1.35; }
.wc24-aside .wc24-lk em { color: var(--wc24-muted); font-size: 12.5px; font-style: normal; }

@media (max-width: 1180px) {
	:root { --wc24-category-rail: 210px; }
	.wc24-chead { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
	.wc24-cgrid, .wc24-about { gap: 24px; }
}
@media (max-width: 980px) {
	.wc24-chead, .wc24-cgrid, .wc24-about { grid-template-columns: minmax(0, 1fr); }
	.wc24-toprow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.wc24-filters { position: static; }
	.wc24-card { flex-direction: column; }
	.wc24-card-image { height: 200px; width: 100%; }
	.wc24-card-side {
		align-items: stretch;
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		width: auto;
	}
	.wc24-card-cta { margin-left: auto; }
}
@media (max-width: 640px) {
	.wc24-toprow { grid-template-columns: minmax(0, 1fr); }
	.wc24-chead h1 { font-size: 24px; }
}

/* Safari below 14.1 has no flex gap. */
@supports not (row-gap: 1px) {
	.wc24-cstats > * + *,
	.wc24-tcard .r > * + *,
	.wc24-aside .wc24-lk > * + * { margin-left: 10px; }
}

/* ---------------------------------------------------------------------- */
/* site-wide chrome — header, utility bar, category nav, footer            */
/* ---------------------------------------------------------------------- */

.wc24-w { margin: 0 auto; max-width: 1220px; padding: 0 24px; }

/* body colour, not muted: #6B7684 muted-on-#F5F7F9-panel is 4.3:1, under the 4.5:1 minimum */
.wc24-util { background: var(--wc24-panel); font-size: var(--wc24-fs-muted); color: var(--wc24-body); }
.wc24-util-in { align-items: center; display: flex; height: 36px; }
.wc24-util-rt { margin-left: auto; }
.wc24-util a { color: var(--wc24-body); }
.wc24-util a:hover { color: var(--wc24-blue); }

.wc24-hdr { background: #fff; border-bottom: 1px solid var(--wc24-line); padding: 16px 0; }
.wc24-hdr-in { align-items: center; display: flex; gap: 22px; }
/* The real logo replaces the text mark. Height is fixed and width is auto so
   the rendered box always matches the width/height attributes on the <img>
   (5.82:1 for both files) and nothing reflows when the PNG lands.

   The mark contains blue. Everywhere else on this site blue means clickable,
   and this is the one deliberate exception — it stays inside the image and is
   never lifted into a token or reused on another element. */
.wc24-logo { align-items: center; display: inline-flex; min-height: 44px; }
.wc24-logo img { display: block; height: 28px; width: auto; }

.wc24-search { align-items: center; background: var(--wc24-panel); border: 1px solid #E4E7EB; border-radius: 30px; display: flex; flex: 1; max-width: 520px; padding: 4px 4px 4px 18px; }
/* 16px, not the 14.5px button/UI scale — anything smaller triggers iOS Safari's auto-zoom on focus */
.wc24-search input[type="search"] { background: none; border: 0; flex: 1; font: inherit; font-size: 16px; outline: 0; padding: 8px 0; min-width: 0; }
.wc24-search button { align-items: center; background: transparent; border: 0; border-radius: 24px; color: var(--wc24-blue); cursor: pointer; display: flex; font: inherit; font-size: var(--wc24-fs-button); font-weight: 600; min-height: 44px; padding: 0 20px; box-sizing: border-box; }
.wc24-search button:hover { background: var(--wc24-blue-selected); }

.wc24-hdr-links { align-items: center; display: flex; gap: 8px; margin-left: auto; }
.wc24-hdr-lk { align-items: center; border-radius: 24px; color: var(--wc24-heading); display: flex; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 13px; box-sizing: border-box; }
.wc24-hdr-lk:hover, .wc24-hdr-lk.on { background: var(--wc24-panel); }
.wc24-hdr-lk.on { color: var(--wc24-blue); font-weight: 600; }
.wc24-cart { align-items: center; background: #fff; border: 1.5px solid var(--wc24-blue); border-radius: 24px; color: var(--wc24-blue); display: flex; font-weight: 600; gap: 9px; padding: 8px 16px 8px 17px; }
.wc24-cart:hover { background: var(--wc24-blue-selected); }
.wc24-cart-n { align-items: center; background: var(--wc24-blue); border-radius: 50%; color: #fff; display: grid; font-size: 13px; font-weight: 700; height: 22px; justify-content: center; width: 22px; }

.wc24-catnav { background: #fff; box-shadow: 0 1px 0 var(--wc24-line); position: relative; }
.wc24-catnav-in { display: flex; gap: 6px; overflow: auto; padding: 10px 24px; -webkit-overflow-scrolling: touch; }
.wc24-catnav a { align-items: center; background: transparent; border-radius: 24px; color: var(--wc24-body); display: flex; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 14px; white-space: nowrap; box-sizing: border-box; }
.wc24-catnav a:hover { background: var(--wc24-panel); }
.wc24-catnav a.on { background: var(--wc24-blue-selected); color: var(--wc24-blue); font-weight: 600; }

/* Mega menu trigger — same chip treatment as the plain catnav links beside it. */
.wc24-mega-trigger { align-items: center; background: transparent; border: 0; border-radius: 24px; color: var(--wc24-body); cursor: pointer; display: flex; font: inherit; font-size: 14px; font-weight: 500; gap: 6px; min-height: 44px; padding: 0 14px; white-space: nowrap; }
.wc24-mega-trigger:hover { background: var(--wc24-panel); }
.wc24-mega-trigger[aria-expanded="true"] { background: var(--wc24-blue-selected); color: var(--wc24-blue); font-weight: 600; }
.wc24-mega-caret { font-size: 10px; }
.wc24-mega-trigger[aria-expanded="true"] .wc24-mega-caret { transform: rotate(180deg); }

.wc24-mega[hidden] { display: none; }
.wc24-mega { background: #fff; border-top: 1px solid var(--wc24-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.28); left: 0; position: absolute; right: 0; top: 100%; z-index: 50; }
/* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), and the auto
   minimum is the column's min-content width — the fix titles are long, so the
   three tracks summed to 1386px inside a 1220px container and the third
   column ran off the side of the viewport. minmax(0,…) lets the middle track
   shrink and the titles wrap, which keeps the panel inside the same 1220px
   container as every other section on the site. */
.wc24-mega-in { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; min-height: 380px; padding-bottom: 32px; padding-top: 32px; }
/* Grid and flex children default to min-width:auto, which reintroduces the
   same floor one level down. */
.wc24-mega-in > *, .wc24-mega-fix > *, .wc24-mega-f > * { min-width: 0; }

.wc24-mega-c1 { border-right: 1px solid var(--wc24-line); padding-right: 22px; }
.wc24-mega-allfixes { border-bottom: 1px solid var(--wc24-line); color: var(--wc24-blue); display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 9px 13px 14px; }
.wc24-mega-grp { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); font-weight: 700; letter-spacing: .06em; margin: 14px 0 8px 13px; }
.wc24-mega-c1 .wc24-mega-grp:first-of-type { margin-top: 0; }
.wc24-mega-catlink { align-items: center; border-radius: 8px; color: var(--wc24-body); display: flex; font-size: 14px; justify-content: space-between; min-height: 40px; padding: 9px 13px; }
.wc24-mega-catlink:hover { background: var(--wc24-panel); }
.wc24-mega-catlink.on { background: var(--wc24-blue-light); color: var(--wc24-blue); font-weight: 600; }

.wc24-mega-c2 { padding: 0 28px; }
.wc24-mega-preview[hidden] { display: none; }
.wc24-mega-head { align-items: baseline; display: flex; gap: 12px; margin-bottom: 4px; }
.wc24-mega-title { color: var(--wc24-heading); font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.wc24-mega-from { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); }
.wc24-mega-desc { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); margin-bottom: 16px; }
.wc24-mega-fix { display: grid; gap: 4px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wc24-mega-f { align-items: center; border-radius: 9px; box-sizing: border-box; display: flex; gap: 11px; min-height: 44px; padding: 7px; }
.wc24-mega-fimg { background: var(--wc24-panel); border: 1px solid var(--wc24-line); border-radius: 7px; flex: none; height: 38px; overflow: hidden; width: 38px; }
.wc24-mega-fimg img { display: block; height: 100%; object-fit: cover; width: 100%; }
.wc24-mega-ft { min-width: 0; }
.wc24-mega-f:hover { background: var(--wc24-panel); }
.wc24-mega-fn { color: var(--wc24-heading); display: block; font-size: var(--wc24-fs-muted); line-height: 1.35; margin-bottom: 2px; }
/* Body font. Monospace is for SKUs, table names and error text — a price is
   none of those. */
.wc24-mega-fp { color: var(--wc24-muted); display: block; font-size: var(--wc24-fs-muted); }
.wc24-mega-fp b { color: var(--wc24-price); font-weight: 700; }
/* "from $49" on the category tiles, the mega menu and the related-category
   list. The amount is a price, so it takes the same weight as every other
   price on the site; "from" stays quiet beside it. */
.wc24-mega-from b,
.wc24-lk em b { color: var(--wc24-price); font-weight: 700; }
.wc24-mega-all { color: var(--wc24-blue); display: inline-block; font-size: var(--wc24-fs-muted); font-weight: 600; margin-top: 14px; }

.wc24-mega-c3 { border-left: 1px solid var(--wc24-line); padding-left: 26px; }
.wc24-mega-card { border-radius: 12px; box-shadow: var(--wc24-shadow); margin-bottom: 14px; padding: 20px; }
.wc24-mega-card-red { background: var(--wc24-red-light); }
.wc24-mega-card-grey { background: var(--wc24-panel); }
.wc24-mega-card-title { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 0 0 7px; }
.wc24-mega-card-red .wc24-mega-card-title { color: var(--wc24-red); }
.wc24-mega-card p { color: var(--wc24-body); font-size: var(--wc24-fs-muted); line-height: 1.5; margin: 0 0 12px; }
.wc24-mega-btn { background: var(--wc24-blue); border-radius: 22px; color: #fff; display: block; font-size: var(--wc24-fs-muted); font-weight: 600; padding: 10px; text-align: center; }
.wc24-mega-btn:hover { background: var(--wc24-blue-hover); }
.wc24-mega-btn-red { background: var(--wc24-red); }
.wc24-mega-btn-red:hover { background: #B01309; }

/* Mobile: a normal expanding section in the document flow, not a floating
   hover panel — nothing here depends on hover, and the live fix-preview
   (built for a 3-column hover layout) is dropped since tapping a category
   link already goes straight to that category, same as any other nav. */
@media (max-width: 900px) {
	.wc24-mega { position: static; box-shadow: none; }
	.wc24-mega-in { display: block; padding: 16px 24px 24px; }
	.wc24-mega-c1 { border-right: 0; padding-right: 0; }
	.wc24-mega-c2 { display: none; }
	.wc24-mega-c3 { border-left: 0; border-top: 1px solid var(--wc24-line); margin-top: 8px; padding-left: 0; padding-top: 20px; }
	/* The flat per-category chips are redundant with the mega panel's own
	   category list once it's expanded in-flow — worse, .wc24-catnav-in is
	   still display:flex here, so those chips would stretch full-height
	   beside the now-tall expanded panel (flex's default align-items:
	   stretch) instead of just sitting quietly out of the way. */
	.wc24-catnav-in > a { display: none; }
}

/* Checkout's own minimal header: logo + reassurance, nothing to click away with. */
.wc24-hdr-checkout .wc24-hdr-in { gap: 0; }
.wc24-hdr-secure { color: var(--wc24-muted); font-size: 13.5px; margin-left: auto; }

.wc24-steps-bar { background: var(--wc24-panel); border-bottom: 1px solid var(--wc24-line); padding: 20px 0; }
.wc24-steps-list { display: flex; margin: 0 auto; max-width: 720px; }
.wc24-step-item { align-items: center; color: var(--wc24-muted); display: flex; flex: 1; font-size: 13.5px; font-weight: 600; gap: 10px; }
.wc24-step-item-n { align-items: center; background: #fff; border: 2px solid var(--wc24-line); border-radius: 50%; display: flex; flex: none; font-size: 13px; height: 28px; justify-content: center; width: 28px; }
.wc24-step-item.on { color: var(--wc24-blue); }
.wc24-step-item.on .wc24-step-item-n { background: var(--wc24-blue); border-color: var(--wc24-blue); color: #fff; }
.wc24-step-item.done { color: var(--wc24-green); }
.wc24-step-item.done .wc24-step-item-n { background: var(--wc24-green); border-color: var(--wc24-green); color: #fff; }
.wc24-step-item:not(:last-child):after { background: var(--wc24-line); content: ""; flex: 1; height: 2px; margin: 0 12px; }
.wc24-step-item.done:after { background: var(--wc24-green); }

/* body colour, not muted — the footer's own panel background fails 4.5:1
   against muted (4.3:1), same issue as .wc24-sh2 p above */
.wc24-foot { background: var(--wc24-panel); color: var(--wc24-body); font-size: 13.5px; margin-top: 56px; padding: 56px 0 28px; }
/* Four columns since "Your order" joined them — the tracking link has to be
   reachable from every page, because most customers never make an account. */
.wc24-foot-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 32px; }
.wc24-foot-grid > div > p { max-width: 34ch; }
.wc24-foot h2 { color: var(--wc24-heading); font-size: 13px; font-weight: 700; margin: 0 0 13px; }
.wc24-foot a { color: var(--wc24-body); display: block; padding: 5px 0; }
.wc24-foot a:hover { color: var(--wc24-blue); }
.wc24-foot-bot { align-items: baseline; border-top: 1px solid var(--wc24-line); display: flex; flex-wrap: wrap; font-size: 13px; gap: 10px 24px; justify-content: space-between; padding-top: 20px; }
/* Attribution, so it sits back: muted at rest, brand blue on hover. Not a
   call to action and styled so it never reads as one. */
/* flex-shrink:0 so the phrase is not squeezed into a mid-sentence break
   while there is still room beside it. */
.wc24-foot-venture { color: var(--wc24-muted); flex-shrink: 0; text-align: right; }
/* The footer's column links are display:block (one per line); this one sits
   inside a sentence, so it has to be put back inline or "XONIK" drops to its
   own line. Carries .wc24-foot to out-specify that rule rather than rely on
   order. */
.wc24-foot .wc24-foot-venture a { color: var(--wc24-muted); display: inline; padding: 0; }
.wc24-foot .wc24-foot-venture a:hover, .wc24-foot .wc24-foot-venture a:focus-visible { color: var(--wc24-blue); }

@media (max-width: 1000px) {
	.wc24-hdr-lk { display: none; }
	.wc24-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.wc24-hdr-in { flex-wrap: wrap; }
	.wc24-search { order: 3; max-width: none; width: 100%; }
	.wc24-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* buttons — outline is the default. Solid is reserved for the single      */
/* primary action in a given context: Add to cart on a product (styled     */
/* separately above via .woocommerce a.button.alt), the recommended plan   */
/* in a pricing table, the one CTA in a full-width band. Everything else   */
/* outline — corrected 2026-09-06, see _project/docs/DESIGN-STANDARD.md.   */
/* ---------------------------------------------------------------------- */

.wc24-btn {
	background: #fff;
	border: 1.5px solid var(--wc24-blue);
	border-radius: var(--wc24-pill);
	color: var(--wc24-blue);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: var(--wc24-fs-button);
	font-weight: 600;
	padding: 12px 24px;
	text-align: center;
}
.wc24-btn:hover, .wc24-btn:focus-visible { background: var(--wc24-blue-selected); }
.wc24-btn:focus-visible { outline: 2px solid var(--wc24-blue); outline-offset: 2px; }
.wc24-btn-full { display: block; width: 100%; }

.wc24-btn-solid {
	background: var(--wc24-blue);
	color: #fff;
	font-weight: 700;
}
.wc24-btn-solid:hover, .wc24-btn-solid:focus-visible { background: var(--wc24-blue-hover); border-color: var(--wc24-blue-hover); color: #fff; }
.wc24-btn-solid:focus-visible { outline: 2px solid var(--wc24-blue-hover); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* homepage                                                                 */
/* ---------------------------------------------------------------------- */

.wc24-hero { background: #fff; padding: 56px 0 60px; }
.wc24-hero-in { align-items: center; display: grid; gap: 56px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.wc24-hero h1 { color: var(--wc24-price); font-size: var(--wc24-fs-hero); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 18px; max-width: 20ch; }
.wc24-hero p { color: var(--wc24-body); font-size: var(--wc24-fs-body); line-height: 1.6; margin: 0 0 26px; max-width: 56ch; }
.wc24-hero-cta { margin-bottom: 26px; }
.wc24-tick { display: flex; flex-wrap: wrap; gap: 10px; }
.wc24-tick span { background: #fff; border-radius: 24px; box-shadow: var(--wc24-shadow); color: var(--wc24-body); font-size: var(--wc24-fs-muted); font-weight: 500; padding: 7px 15px; }
.wc24-tick span:before { color: var(--wc24-green); content: "\2713"; font-weight: 700; margin-right: 7px; }

/* the hero artwork — a real catalogue product image (see front-page.php), not a decorative icon */
.wc24-hero-art { border: 1px solid var(--wc24-line); border-radius: 14px; box-shadow: var(--wc24-shadow-2); display: block; overflow: hidden; }
.wc24-hero-art img { display: block; height: auto; width: 100%; }

/* the "674 fixes / 24h fastest / $49 starting" stats band, directly under the hero */
.wc24-band { background: var(--wc24-panel); border-bottom: 1px solid var(--wc24-line); border-top: 1px solid var(--wc24-line); }
.wc24-band-in { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 36px 24px; }
.wc24-band-in .n { color: var(--wc24-price); font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.wc24-band-in .l { color: var(--wc24-muted); font-size: 13px; margin-top: 2px; }

/* explicit #fff, not inherited — Kadence sets <body> to rgb(247,250,252),
   not pure white, which drops muted text below the 4.5:1 minimum */
.wc24-sec { background: #fff; padding: 56px 0; }
.wc24-sec-grey { background: var(--wc24-panel); }
.wc24-sh2 { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 22px; }
.wc24-sh2 h2 { color: var(--wc24-heading); font-size: var(--wc24-fs-section-h); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.wc24-sh2 p { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); margin: 5px 0 0; }
/* muted-on-panel is 4.3:1, under 4.5:1 — .wc24-sec-grey puts this paragraph
   directly on the panel background rather than inside a white card */
.wc24-sec-grey .wc24-sh2 p { color: var(--wc24-body); }
.wc24-sh2 a { color: var(--wc24-blue); font-size: var(--wc24-fs-body); font-weight: 600; white-space: nowrap; }

.wc24-cat-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wc24-cat-tile { background: #fff; border-radius: var(--wc24-radius); box-shadow: var(--wc24-shadow); display: block; overflow: hidden; }
.wc24-cat-tile:hover { box-shadow: var(--wc24-shadow-2); }
.wc24-cat-tile-img { aspect-ratio: 4 / 3; background: var(--wc24-panel); overflow: hidden; }
.wc24-cat-tile-img img { display: block; height: 100%; object-fit: cover; width: 100%; }
.wc24-cat-tile-body { padding: 16px 17px 18px; }
.wc24-cat-tile-body h3 { color: var(--wc24-heading); font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 5px; }
.wc24-cat-tile-body .wc24-pill { display: inline-block; margin-bottom: 9px; }
.wc24-cat-tile-meta { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); line-height: 1.5; }

/* Urgency pills. Red and amber on their own light grounds, both at the same
   contrast the rest of the site uses for text on colour — not the raw
   --wc24-red/--wc24-amber, which are signal colours for larger elements. */
.wc24-pill-amber { background: var(--wc24-amber-light); color: #8A5A00; }

.wc24-steps { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wc24-step { background: #fff; border-radius: var(--wc24-radius); box-shadow: var(--wc24-shadow); padding: 24px; }
.wc24-step-no { align-items: center; background: var(--wc24-blue-light); border-radius: 50%; color: var(--wc24-blue); display: flex; font-size: 15px; font-weight: 700; height: 36px; justify-content: center; margin-bottom: 14px; width: 36px; }
.wc24-step h3 { color: var(--wc24-heading); font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 6px; }
.wc24-step p { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); margin: 0; }

.wc24-plan-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc24-plan-card { background: #fff; border-radius: 16px; box-shadow: var(--wc24-shadow); display: flex; flex-direction: column; padding: 34px 30px; position: relative; }
.wc24-plan-hi { box-shadow: 0 0 0 2px var(--wc24-blue), var(--wc24-shadow-2); }
.wc24-plan-flag { background: var(--wc24-blue); border-radius: 20px; color: #fff; font-size: 13px; font-weight: 700; left: 28px; padding: 4px 13px; position: absolute; top: -13px; }
.wc24-plan-card h2 { color: var(--wc24-heading); font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
.wc24-plan-price { color: var(--wc24-price); font-size: var(--wc24-fs-price-plan); font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.wc24-plan-price small { color: var(--wc24-muted); font-size: 13px; font-weight: 500; }
.wc24-plan-card > p { color: var(--wc24-muted); flex: 1; font-size: var(--wc24-fs-muted); line-height: 1.55; margin: 0 0 24px; }

/* Full care-plans page card body (desc + term + feature list) — the compact
   homepage teaser card only ever has the plain > p above, unaffected. */
.wc24-plan-card .wc24-plan-desc { color: var(--wc24-muted); flex: none; font-size: var(--wc24-fs-muted); line-height: 1.55; margin: 0 0 24px; min-height: 42px; }
.wc24-plan-term { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); margin: 6px 0 28px; }
.wc24-plan-features { flex: 1; list-style: none; margin: 0 0 28px; padding: 0; }
.wc24-plan-features li { color: var(--wc24-body); font-size: var(--wc24-fs-muted); line-height: 1.5; padding: 8px 0 8px 24px; position: relative; }
.wc24-plan-features li:before { color: var(--wc24-green); content: "\2713"; font-weight: 700; left: 0; position: absolute; }

/* The first weeks are not a subscription — panel background, so body
   colour throughout, not muted (same rule as .wc24-sh2 p / .wc24-foot). */
.wc24-takeover { background: var(--wc24-panel); border-radius: 18px; display: grid; gap: 52px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 64px 0; padding: 48px 52px; }
.wc24-takeover h3 { color: var(--wc24-heading); font-size: var(--wc24-fs-section-h); font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.wc24-takeover p { color: var(--wc24-body); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; }
.wc24-takeover p:last-child { margin-bottom: 0; }
.wc24-phase { border-bottom: 1px solid #E4E7EB; display: flex; gap: 16px; padding: 16px 0; }
.wc24-phase:last-child { border-bottom: 0; }
.wc24-phase-no { align-items: center; background: #fff; border-radius: 50%; color: var(--wc24-blue); display: flex; flex: none; font-size: 13px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.wc24-phase b { color: var(--wc24-heading); display: block; font-size: 14px; margin-bottom: 4px; }
.wc24-phase span { color: var(--wc24-body); font-size: var(--wc24-fs-muted); line-height: 1.5; }

.wc24-cmp { background: #fff; border-collapse: collapse; border-radius: 14px; box-shadow: var(--wc24-shadow); overflow: hidden; width: 100%; }
.wc24-cmp th, .wc24-cmp td { border-bottom: 1px solid var(--wc24-line); font-size: var(--wc24-fs-muted); padding: 16px 22px; text-align: left; }
.wc24-cmp thead th { background: var(--wc24-panel); color: var(--wc24-body); font-size: 13px; font-weight: 700; }
.wc24-cmp td:first-child { color: var(--wc24-muted); }
.wc24-cmp td:not(:first-child) { color: var(--wc24-heading); font-weight: 600; }
.wc24-cmp tr:last-child td { border-bottom: 0; }
.wc24-cmp .hi { background: #FAFCFF; }

/* The rule governing both allowance rows above — "Task time" and
   "Publish-ready content" — so it sits with the table rather than in a policy
   nobody reads. Body colour, not muted: it is a commitment, not a footnote
   (same rule as .wc24-sh2 p above). */
.wc24-cmp-note { color: var(--wc24-body); font-size: var(--wc24-fs-muted); line-height: 1.6; margin: 18px 0 0; max-width: 68ch; }
.wc24-cmp-note b { color: var(--wc24-heading); font-weight: 700; }

.wc24-agency-teaser { align-items: center; background: var(--wc24-panel); border-radius: 16px; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) auto; padding: 38px 40px; }
.wc24-agency-teaser h3 { color: var(--wc24-heading); font-size: var(--wc24-fs-section-h); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
/* body colour, not muted — this sits directly on the panel background (see .wc24-sh2 p above) */
.wc24-agency-teaser p { color: var(--wc24-body); font-size: var(--wc24-fs-body); margin: 0; max-width: 58ch; }

@media (max-width: 1180px) {
	.wc24-hero-in { gap: 36px; }
	.wc24-cat-grid, .wc24-steps, .wc24-band-in { gap: 14px; }
}
@media (max-width: 980px) {
	.wc24-hero-in, .wc24-plan-grid, .wc24-agency-teaser, .wc24-takeover { grid-template-columns: minmax(0, 1fr); }
	.wc24-cat-grid, .wc24-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.wc24-band-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wc24-agency-teaser { text-align: left; }
	.wc24-hero h1 { max-width: none; }
	.wc24-takeover { padding: 28px 26px; }
}
@media (max-width: 640px) {
	.wc24-cat-grid, .wc24-steps { grid-template-columns: minmax(0, 1fr); }
	.wc24-band-in { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: left; }
	.wc24-sh2 { align-items: flex-start; flex-direction: column; }
	.wc24-hero h1 { font-size: 26px; }
	.wc24-cmp { display: block; overflow-x: auto; }
}

/* Safari below 14.1 has no flex gap. */
@supports not (row-gap: 1px) {
	.wc24-tick > * + *,
	.wc24-sh2 > * + * { margin-left: 14px; }
}

/* ---------------------------------------------------------------------- */
/* page headline — shared by cart, checkout, and every non-homepage page   */
/* ---------------------------------------------------------------------- */

.wc24-ph { background: #fff; padding: 40px 0 32px; }
/* Same letter-spacing as .wc24-archive-title (category page headline) — was -.03em, drifted from the established page-headline rhythm. */
.wc24-ph h1 { color: var(--wc24-price); font-size: var(--wc24-fs-page-h1); font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.wc24-ph p { color: var(--wc24-body); font-size: var(--wc24-fs-body); line-height: 1.6; margin: 0; max-width: 62ch; }
.wc24-ph-tight { padding-bottom: 20px; }
body.woocommerce-cart .wc24-w, body.woocommerce-checkout .wc24-w { background: #fff; }

/* ---------------------------------------------------------------------- */
/* cart                                                                     */
/* ---------------------------------------------------------------------- */

.wc24-cartgrid { align-items: start; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) 350px; padding-bottom: 60px; }

.wc24-citem { align-items: start; background: #fff; border-radius: var(--wc24-radius); box-shadow: var(--wc24-shadow); display: grid; gap: 20px; grid-template-columns: 100px minmax(0, 1fr) auto; margin-bottom: 16px; padding: 20px; }
.wc24-citem-img { border-radius: 9px; box-shadow: var(--wc24-shadow); overflow: hidden; }
.wc24-citem-img img { display: block; width: 100%; }
.wc24-citem-body h3 { font-size: var(--wc24-fs-price-card); font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
.wc24-citem-body h3 a { color: var(--wc24-heading); }
.wc24-citem-body h3 a:hover { color: var(--wc24-blue); }
.wc24-citem-sku { color: var(--wc24-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; margin-bottom: 5px; }
.wc24-citem-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wc24-citem-pills .wc24-pill { background: var(--wc24-panel); color: var(--wc24-body); font-size: 12px; font-weight: 600; padding: 4px 10px; }
/* Amber, matching the emergency treatment on the product page — the upgrade
   reads as a state of this item, not as another thing bought. */
.wc24-cprice-amt { display: block; }
.wc24-cprice-was { color: var(--wc24-muted); display: block; font-size: 12.5px; font-weight: 400; margin-top: 2px; text-decoration: line-through; }

.wc24-citem-row { align-items: center; display: flex; gap: 16px; }
/* No stacking a diagnosis fix — quantity is locked to 1 (see
   woocommerce_is_sold_individually in functions.php) and the input hidden
   rather than shown readonly/disabled, since there's nothing for a buyer to
   do with it. */
.wc24-citem-row .quantity { display: none; }
.wc24-citem-remove { align-items: center; color: var(--wc24-muted); display: inline-flex; font-size: var(--wc24-fs-muted); font-weight: 600; min-height: 44px; padding: 0 4px; }
.wc24-citem-remove:hover { color: var(--wc24-red); }
.wc24-cprice { color: var(--wc24-price); font-size: var(--wc24-fs-price-cart); font-weight: 700; letter-spacing: -.02em; text-align: right; white-space: nowrap; }

.wc24-cart-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.wc24-coupon { display: flex; gap: 8px; }
.wc24-coupon-input { border: 1.5px solid var(--wc24-line); border-radius: 24px; font: inherit; font-size: 16px; padding: 11px 16px; }
.wc24-cart-actions button[name="update_cart"] { background: #fff; border: 1.5px solid var(--wc24-blue); border-radius: var(--wc24-pill); color: var(--wc24-blue); cursor: pointer; font: inherit; font-size: var(--wc24-fs-button); font-weight: 600; padding: 12px 24px; }
.wc24-cart-actions button[name="update_cart"]:hover { background: var(--wc24-blue-selected); }

.wc24-why { background: var(--wc24-panel); border-radius: 12px; color: var(--wc24-body); font-size: var(--wc24-fs-body); line-height: 1.65; margin-top: 20px; padding: 18px 20px; }
.wc24-why b { color: var(--wc24-heading); display: block; margin-bottom: 4px; }

/* Agencies page: two programme cards. */
.wc24-two { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wc24-opt { background: #fff; border-radius: 16px; box-shadow: var(--wc24-shadow); display: flex; flex-direction: column; padding: 36px 34px; }
.wc24-opt-tag { align-self: flex-start; border-radius: 20px; display: inline-block; font-size: var(--wc24-fs-muted); font-weight: 700; margin-bottom: 14px; padding: 4px 12px; }
.wc24-opt-tag-blue { background: var(--wc24-blue-light); color: var(--wc24-blue); }
/* Not var(--wc24-green): that's 4.46:1 on --wc24-green-light, just under
   the 4.5:1 minimum. This is a one-off darker shade for this pairing only —
   --wc24-green itself stays untouched since it's used elsewhere on white,
   where it already passes comfortably. */
.wc24-opt-tag-green { background: var(--wc24-green-light); color: #006B34; }
.wc24-opt h2 { color: var(--wc24-heading); font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; }
.wc24-opt-lede { color: var(--wc24-muted); font-size: var(--wc24-fs-body); line-height: 1.6; margin: 0 0 24px; }
.wc24-opt ul { flex: 1; list-style: none; margin: 0 0 28px; padding: 0; }
.wc24-opt li { border-bottom: 1px solid #F3F3F3; color: var(--wc24-body); font-size: var(--wc24-fs-muted); line-height: 1.5; padding: 10px 0 10px 24px; position: relative; }
.wc24-opt li:last-child { border-bottom: 0; }
.wc24-opt li:before { color: var(--wc24-green); content: "\2713"; font-weight: 700; left: 0; position: absolute; }

/* Gated rate card CTA — deliberately no numbers here, see inc copy for why. */
/* The partner's book. Same clock as the customer sees on their own order —
   a second status vocabulary would be a second thing to keep true. */
.wc24-book-head p { margin: 0 0 6px; }
.wc24-book-note { color: var(--wc24-muted); font-size: 13.5px; }
.wc24-book { list-style: none; margin: 22px 0 0; padding: 0; }
.wc24-book li { align-items: center; border-top: 1px solid var(--wc24-line); display: grid; gap: 8px 18px;
	grid-template-columns: minmax(0, 1fr) auto; padding: 15px 0; }
.wc24-book li:first-child { border-top: 0; }
.wc24-book-site { color: var(--wc24-heading); font-weight: 600; grid-column: 1; }
.wc24-book-meta { color: var(--wc24-muted); font-size: 13px; grid-column: 1; }
.wc24-book li .wc24-st { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 600px) {
	.wc24-book li { grid-template-columns: minmax(0, 1fr); }
	.wc24-book li .wc24-st { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Partner application page. Same two-column shape as the product page —
   .wc24-single's 1fr/320px at a 44px gap — and the same .wc24-rail /
   .wc24-railbox classes, reused rather than copied, so the rail cannot drift
   away from the one on the product page. */
.wc24-pa { align-items: start; column-gap: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; padding-bottom: 70px; }
/* Explicit rows, so the rail starts level with the first field rather than
   with the lead. The lead owns row 1 of the left column on its own; the form
   and the rail share row 2 and therefore share a top edge, whatever the lead
   wraps to. */
.wc24-pa-lead { grid-column: 1; grid-row: 1; }
.wc24-pa-form { grid-column: 1; grid-row: 2; }
.wc24-pa-rail { grid-column: 2; grid-row: 2; padding-top: 0; }
/* No max-width: the lead is one sentence introducing the fields below it, and
   a narrower measure than the row of inputs it sits above reads as a stray
   column rather than as a lead. */
.wc24-pa-lead p { color: var(--wc24-body); font-size: 16.5px; line-height: 1.6; margin: 0 0 26px; max-width: none; }
.wc24-pa-lead p:last-child { margin-bottom: 26px; }
/* The page head is a white band everywhere it sits outside .wc24-w and spans
   the viewport. Here it sits inside the container above a grey page, so the
   band reads as a box drawn around the heading. Keep the spacing, drop the
   background. */
.wc24-ph-plain { background: transparent; }
.wc24-pa-steps { color: var(--wc24-body); font-size: 13.5px; line-height: 1.5; margin: 0; padding-left: 18px; }
.wc24-pa-steps li { margin-bottom: 8px; }
.wc24-pa-steps li:last-child { margin-bottom: 0; }
.wc24-pa-prog { border-bottom: 1px solid var(--wc24-line); padding: 0 0 11px; margin-bottom: 11px; }
.wc24-pa-prog:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.wc24-pa-prog b { color: var(--wc24-heading); display: block; font-size: 13.5px; margin-bottom: 3px; }
.wc24-pa-prog span { color: var(--wc24-body); display: block; font-size: 13px; line-height: 1.5; }
.wc24-pa-nb { border-top: 1px solid var(--wc24-line); color: var(--wc24-muted); font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; padding-top: 11px; }
.wc24-pa-rail .rb-acc li { line-height: 1.5; padding-bottom: 9px; }
.wc24-pa-rail .rb-acc li b { color: var(--wc24-heading); font-weight: 700; }

/* Partner application form. Deliberately plain: it is a form, not a pitch —
   the pitch is the rail beside it. Fields pair up by row, and the vertical
   rhythm is the checkout's 22px rather than the ~46px this had when every
   label carried its own 20px top margin in a single column. */
.wc24-pform { display: block; max-width: none; }
.wc24-pform-f { display: flex; flex-direction: column; margin-bottom: 22px; min-width: 0; }
.wc24-pform-row { column-gap: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 22px; }
.wc24-pform-row > .wc24-pform-f { margin-bottom: 0; }
.wc24-pform label { color: var(--wc24-heading); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.wc24-pform input, .wc24-pform select, .wc24-pform textarea {
	background: #fff; border: 1px solid var(--wc24-line); border-radius: 6px;
	font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
}
.wc24-pform input:focus-visible, .wc24-pform select:focus-visible, .wc24-pform textarea:focus-visible { border-color: var(--wc24-blue); }
.wc24-pform textarea { resize: vertical; }
.wc24-pform-send { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.wc24-pform-send .wc24-btn { margin: 0; }
.wc24-pform-hint { color: var(--wc24-muted); font-size: 13px; margin: 7px 0 0; }
.wc24-pform-send .wc24-pform-hint { flex: 1; margin: 0; min-width: 220px; }
/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.wc24-pform-hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

/* Kept next to the rules they override, not in a shared breakpoint block —
   same specificity means the later rule wins, and the two-column base rules
   above are later than the consolidated blocks earlier in this file. */
@media (max-width: 1180px) {
	.wc24-pa { column-gap: 30px; grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
	/* One column: the explicit row/column placement above has to be undone or
	   the rail stays pinned to a column that no longer exists. */
	.wc24-pa { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.wc24-pa-lead, .wc24-pa-form, .wc24-pa-rail { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
	.wc24-pform-row { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
	.wc24-pform-row > .wc24-pform-f { margin-bottom: 22px; }
	.wc24-pform-send .wc24-btn { width: 100%; }
}

.wc24-gated { align-items: center; background: var(--wc24-panel); border-radius: 18px; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) auto; margin: 56px 0; padding: 44px 48px; }
.wc24-gated h2 { color: var(--wc24-heading); font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; }
.wc24-gated p { color: var(--wc24-body); font-size: var(--wc24-fs-body); line-height: 1.65; margin: 0; max-width: 58ch; }

/* The four client-protection points are the part of this page that actually
   converts (an agency reading it is deciding whether we'll steal their
   clients) — same .wc24-why component as elsewhere, but given real size:
   a 2x2 grid instead of a cramped row, and larger padding/type than the
   one-liner it plays elsewhere (e.g. the cart page's "why" note). */
.wc24-protect-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wc24-protect-grid .wc24-why { font-size: 14.5px; margin-top: 0; padding: 22px 26px; }
/* A checkmark anchor on each heading — the same visual language as the
   checklist above (.wc24-opt li) — so these four read as fulfilled
   commitments, not a generic informational aside. */
.wc24-protect-grid .wc24-why b { align-items: baseline; display: flex; gap: 9px; font-size: 15px; }
.wc24-protect-grid .wc24-why b:before { color: var(--wc24-green); content: "\2713"; flex: none; font-weight: 700; }

/* These three MUST stay below their own definitions above, not up in the
   shared 980 block after .wc24-agency-teaser — same specificity means the
   later rule wins, so collapsing them from up there silently loses to the
   two-column base rules and the agencies page stays two-up on a phone. */
@media (max-width: 980px) {
	.wc24-two, .wc24-protect-grid, .wc24-gated { grid-template-columns: minmax(0, 1fr); }
	.wc24-gated { padding: 28px 26px; text-align: left; }
}
/* .wc24-two, .wc24-protect-grid and .wc24-gated all collapse to 1fr at 980px — see the consolidated breakpoint block after .wc24-agency-teaser above. */

.wc24-sum { background: #fff; border-radius: 16px; box-shadow: var(--wc24-shadow-2); overflow: hidden; position: sticky; top: 18px; }
.wc24-sum-hd { border-bottom: 1px solid var(--wc24-line); font-size: 15px; font-weight: 700; padding: 20px 26px; }
.wc24-sum-bd { padding: 24px 26px; }

/* Order summary rows (cart/cart-totals.php override) — the emergency
   upgrade broken out onto its own line rather than folded into a subtotal. */
.wc24-sumrows { margin-bottom: 4px; }
.wc24-srow { display: flex; font-size: var(--wc24-fs-body); gap: 16px; justify-content: space-between; padding: 9px 0; }
.wc24-srow .k { color: var(--wc24-muted); }
.wc24-srow .woocommerce-Price-amount { color: var(--wc24-price); font-weight: 700; }
.wc24-srow-total { border-top: 1px solid var(--wc24-line); color: var(--wc24-price); font-size: 19px; font-weight: 700; letter-spacing: -.025em; margin-top: 14px; padding-top: 18px; }
.wc24-srow-total .woocommerce-Price-amount { color: var(--wc24-price); font-weight: 700; }

/* Checkout: the "what happens next" panel under the payment methods. */
.wc24-why-checkout { margin-top: 18px; }

/* Field hints. Kadence ships these hidden via
   `.woocommerce form .form-row .woocommerce-input-wrapper .description`
   (0,4,1) — matching that selector's own wrapper and adding one more class
   is what actually beats it; a shorter selector loses silently. These two
   answer questions at the moment they're asked: what the email is used for,
   and that the country is for tax, not for posting anything to you.

   WooCommerce also ships .description as a filled blue callout bubble
   (background #1e85be, white text, 1em padding, its own border) meant for
   the one-off notices it uses it for — unset all of that too, or a plain
   sentence under a field renders as a solid blue slab. */
.woocommerce-checkout .woocommerce-billing-fields .form-row .woocommerce-input-wrapper .description {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wc24-muted);
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin: 6px 0 0;
	padding: 0;
}
/* The same bubble carries a CSS arrow on ::before — no background means no
   arrow to point with. */
.woocommerce-checkout .woocommerce-billing-fields .form-row .woocommerce-input-wrapper .description::before { display: none; }

/* WooCommerce's own cart/order totals table, restyled in place */
.wc24-sum .cart_totals > h2, .wc24-sum .woocommerce-checkout-review-order-table thead { display: none; }
.wc24-sum table.shop_table { border-collapse: collapse; width: 100%; }
.wc24-sum table.shop_table th, .wc24-sum table.shop_table td { border: 0; font-size: var(--wc24-fs-body); font-weight: 400; padding: 10px 0; text-align: left; }
.wc24-sum table.shop_table th { color: var(--wc24-muted); font-weight: 400; }
.wc24-sum table.shop_table td { color: var(--wc24-body); text-align: right; }
.wc24-sum table.shop_table tr.order-total { border-top: 1px solid var(--wc24-line); }
.wc24-sum table.shop_table tr.order-total th, .wc24-sum table.shop_table tr.order-total td { color: var(--wc24-price); font-size: 19px; font-weight: 700; letter-spacing: -.025em; padding-top: 16px; }
.wc24-sum table.shop_table .woocommerce-Price-amount { color: inherit; }
/* Empty cart (cart/cart-empty.php override). Kadence's own
   .woocommerce .cart-empty.woocommerce-info (3 classes) beats the generic
   2-class .woocommerce-info rule above and gives it a 34px bold centered
   "hero" treatment in a Kadence theme color — that size is reserved for the
   homepage hero in THE STANDARD, and this is otherwise just a status
   message, so it gets the same notice look as every other one on the site. */
.woocommerce .cart-empty.woocommerce-info {
	background: var(--wc24-blue-light);
	border-left: 5px solid var(--wc24-blue);
	border-radius: 10px;
	color: var(--wc24-heading);
	font-size: var(--wc24-fs-body);
	font-weight: 400;
	padding: 21.25px 34px;
	text-align: left;
}
.wc-empty-cart-message { margin-bottom: 24px; }
.return-to-shop { margin: 0; }

/* Real "Proceed to checkout" link from cart/proceed-to-checkout-button.php
   (class .checkout-button) — already solid via .woocommerce a.button.alt,
   just needs to run full-width here instead of its default inline sizing. */
.wc24-sum .checkout-button { box-sizing: border-box; display: block; margin-top: 16px; text-align: center; width: 100%; }
.wc24-sumnote { background: var(--wc24-blue-light); border-radius: 12px; color: var(--wc24-heading); font-size: var(--wc24-fs-muted); line-height: 1.6; margin-top: 18px; padding: 15px 17px; }

@media (max-width: 900px) {
	.wc24-cartgrid { grid-template-columns: minmax(0, 1fr); }
	.wc24-citem { grid-template-columns: 80px minmax(0, 1fr); }
	.wc24-cprice { grid-column: 2; text-align: left; }
	.wc24-sum { position: static; }
}

/* ---------------------------------------------------------------------- */
/* checkout                                                                 */
/* ---------------------------------------------------------------------- */

.woocommerce-checkout .wc24-w { padding-top: 30px; padding-bottom: 60px; }

/* form.checkout's real children (#customer_details, #order_review_heading,
   #order_review) are placed directly on a grid rather than restructuring
   the template — keeps WooCommerce's own checkout JS/AJAX untouched. */
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; column-gap: 32px; align-items: start; }
form.checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
/* Kadence's own classic-checkout CSS still styles the real .woocommerce-
   checkout-review-order class (width:50%, float:left, padding-left) for its
   old .col2-set layout — reset it since #order_review now sits on the grid. */
form.checkout #order_review { float: none; grid-column: 2; grid-row: 1 / 3; padding-left: 0; width: auto; }
form.checkout .col2-set, form.checkout .col-1, form.checkout .col-2 { width: auto; float: none; }
form.checkout .col-2:empty { display: none; }

.woocommerce-billing-fields,
#order_review {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--wc24-shadow);
	margin-bottom: 18px;
	overflow: hidden;
}
.woocommerce-billing-fields { padding: 28px; }
.woocommerce-billing-fields > h2 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 22px; }
.woocommerce-billing-fields__field-wrapper .form-row { margin-bottom: 22px; }
.woocommerce-billing-fields__field-wrapper .form-row:last-child { margin-bottom: 0; }
.woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row.form-row-last { display: inline-block; width: calc(50% - 8px); }
.woocommerce-billing-fields__field-wrapper .form-row.form-row-first { margin-right: 16px; }
.woocommerce-billing-fields label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--wc24-heading); }
.woocommerce-billing-fields label .optional { color: var(--wc24-muted); font-weight: 400; }
/* Matches Kadence's own .woocommerce .form-row .required specificity (its
   plain "red" keyword is 4:1 on white, under the 4.5:1 minimum) rather than
   losing to it. */
.woocommerce .form-row .required { color: var(--wc24-red); text-decoration: none; }
.woocommerce-billing-fields input.input-text,
.woocommerce-billing-fields select { background: #fff; border: 1px solid var(--wc24-line); border-radius: 10px; box-sizing: border-box; font: inherit; font-size: 16px; padding: 13px 16px; width: 100%; }
.woocommerce-billing-fields .select2-container .select2-selection--single { border: 1px solid var(--wc24-line); border-radius: 10px; height: auto; padding: 13px 16px; }
.woocommerce-billing-fields .select2-selection__rendered { font-size: 16px; line-height: 1.4 !important; padding: 0 !important; }
.woocommerce-billing-fields .select2-selection__arrow { height: 100% !important; }

/* The summary card: its header comes from form-checkout.php and sits outside
   the AJAX-replaced rows, so it survives a country change. Padding lives on
   .wc24-sum-hd/.wc24-sum-bd, shared with the cart summary, so both cards are
   the same object. */
/* Kadence still carries its old classic-checkout rule for #order_review_heading
   (width:50%; float:left) from the days that heading sat above a .col2-set.
   It used to be hidden here, which hid the bug with it; now that the heading
   is the summary card's own header it has to be reset, or "Order summary"
   floats into a 175px box beside the first row. Their selector is
   `form.checkout #order_review_heading` (1,1,1), so the reset has to carry
   the form prefix too — `#order_review > .wc24-sum-hd` alone is (1,1,0) and
   loses. */
form.checkout #order_review > .wc24-sum-hd { clear: both; float: none; margin: 0; width: auto; }
#order_review .woocommerce-checkout-review-order-table { margin-bottom: 16px; }
/* The fix name is long and the price must not wrap: the name flexes, the
   amount holds its own width. */
.wc24-srow .k { min-width: 0; }
.wc24-srow-amt { flex: none; font-weight: 700; white-space: nowrap; color: var(--wc24-price); }
.wc24-srow-total .wc24-srow-amt { font-weight: 700; }
/* The emergency line belongs to the fix above it, so it hangs off that row
   rather than reading as a second purchase. */
.wc24-srow-sub { padding-top: 0; }
.wc24-srow-sub .k { font-size: 12.5px; }
#order_review .wc-item-meta { color: var(--wc24-muted); font-size: var(--wc24-fs-muted); list-style: none; margin: 4px 0 0; padding: 0; }

#payment { background: transparent; }
#payment ul.wc_payment_methods { list-style: none; margin: 0 0 20px; padding: 0; }
#payment ul.wc_payment_methods li.wc_payment_method { border: 1px solid var(--wc24-line); border-radius: 12px; margin-bottom: 10px; padding: 15px 18px; }
#payment ul.wc_payment_methods li.wc_payment_method label { font-size: 14px; font-weight: 600; color: var(--wc24-heading); }
#payment ul.wc_payment_methods li.wc_payment_method input.input-radio { accent-color: var(--wc24-blue); margin-right: 10px; }
#payment .payment_box { background: var(--wc24-panel); border-radius: 10px; color: var(--wc24-body); font-size: var(--wc24-fs-body); margin-top: 12px; padding: 14px 16px; }
#payment .form-row.place-order { margin-top: 4px; }
#payment .woocommerce-terms-and-conditions-wrapper { font-size: var(--wc24-fs-muted); color: var(--wc24-muted); margin-bottom: 14px; }

/* Same solid-button treatment/scale as everywhere else (THE STANDARD fixes
   button font-size at 14.5px with nothing above weight 700) — the mockup's
   own "Pay $317.00" button uses its ordinary .btn class, not a larger one. */
#place_order {
	background: var(--wc24-blue);
	border: 1.5px solid var(--wc24-blue);
	border-radius: var(--wc24-pill);
	color: #fff;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: var(--wc24-fs-button);
	font-weight: 700;
	padding: 15px;
	text-align: center;
	width: 100%;
}
#place_order:hover, #place_order:focus-visible { background: var(--wc24-blue-hover); border-color: var(--wc24-blue-hover); }
#place_order:focus-visible { outline: 2px solid var(--wc24-blue-hover); outline-offset: 2px; }

/* 980, not 900 — the same middle breakpoint every other page collapses at, so
   the whole site steps down together rather than checkout going its own way. */
@media (max-width: 980px) {
	form.checkout { grid-template-columns: minmax(0, 1fr); }
	/* Single column means one row track — without resetting grid-row too,
	   both cards keep their desktop "span both rows" placement and stack
	   directly on top of each other instead of one after the other. */
	form.checkout #customer_details, form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

@media (max-width: 640px) {
	/* First/last name share a line down to 640; below that the two 16px
	   inputs and their labels are too tight to read side by side. */
	.woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row.form-row-last { display: block; width: 100%; margin-right: 0; }
	.woocommerce-billing-fields { padding: 22px 18px; }
	.wc24-sum-hd { padding: 18px 20px; }
	.wc24-sum-bd { padding: 20px; }
}

/* ---------------------------------------------------------------------- */
/* intake — step 3 of the same four-step flow as cart and checkout        */
/* ---------------------------------------------------------------------- */

.wc24-intakegrid { align-items: start; display: grid; column-gap: 44px; grid-template-columns: minmax(0, 1fr) 340px; padding-bottom: 70px; }

.wc24-icard { border: 1px solid var(--wc24-line); border-radius: 16px; margin-bottom: 18px; overflow: hidden; }
.wc24-icard-hd { align-items: center; border-bottom: 1px solid var(--wc24-line); display: flex; gap: 12px; padding: 20px 26px; }
.wc24-icard-hd h2 { color: var(--wc24-heading); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.wc24-icard-n { background: var(--wc24-blue-light); border-radius: 50%; color: var(--wc24-blue); display: grid; flex: none; font-size: 12px; font-weight: 700; height: 24px; place-items: center; width: 24px; }
.wc24-icard-cnt { color: var(--wc24-muted); font-size: 12.5px; margin-left: auto; }
.wc24-icard-bd { padding: 26px; }

.wc24-fr { margin-bottom: 22px; }
.wc24-fr:last-child { margin-bottom: 0; }
.wc24-fl { color: var(--wc24-heading); display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.wc24-req { color: var(--wc24-red); font-weight: 600; }
.wc24-opt { color: var(--wc24-muted); font-weight: 400; }
.wc24-hint { color: var(--wc24-muted); font-size: 13px; margin-top: 6px; }
/* 16px so iOS doesn't zoom the page when a field takes focus.
   The selector carries the form class and the element name on purpose:
   Kadence styles these through `input[type="text"], input[type="url"], …`,
   which is (0,1,1) — a bare `.wc24-tx` is (0,1,0), loses the padding fight
   and renders every field 40px tall, under the 44px tap-target minimum.
   min-height keeps that guarantee even if the padding is ever changed. */
.wc24-intake input.wc24-tx,
.wc24-intake textarea.wc24-tx,
.wc24-intake select.wc24-tx { background: #fff; border: 1px solid var(--wc24-line); border-radius: 10px; box-sizing: border-box; color: var(--wc24-body); font: inherit; font-size: 16px; min-height: 44px; padding: 13px 16px; width: 100%; }
.wc24-intake textarea.wc24-tx { line-height: 1.55; min-height: 96px; resize: vertical; }
.wc24-f2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Radio and checkbox rows are the control, not the little square beside it —
   the whole row is the 44px tap target. */
.wc24-choice { align-items: flex-start; border: 1px solid var(--wc24-line); border-radius: 11px; cursor: pointer; display: flex; gap: 11px; margin-bottom: 9px; min-height: 44px; padding: 11px 14px; }
.wc24-choice:hover { background: var(--wc24-panel); }
.wc24-choice input { accent-color: var(--wc24-blue); flex: none; height: 17px; margin-top: 2px; width: 17px; }
.wc24-choice b { color: var(--wc24-heading); display: block; font-size: 14px; font-weight: 600; }
.wc24-choice span span { color: var(--wc24-muted); font-size: 13px; line-height: 1.5; }
/* Selected state without a line of JavaScript. Browsers without :has() lose
   the highlight and nothing else — the radio itself still shows the answer. */
.wc24-choice:has(input:checked) { background: #FAFCFF; border-color: var(--wc24-blue); }

/* Access items. The reason line is the point of this whole page: people
   refuse access they don't understand the reason for. */
.wc24-acc { border: 1px solid var(--wc24-line); border-radius: 12px; margin-bottom: 12px; padding: 16px 18px; }
.wc24-acc-top { align-items: flex-start; display: flex; gap: 12px; }
/* Body font: this is a step counter ("1", "2", a tick), not a code. */
.wc24-acc-ic { background: var(--wc24-panel); border-radius: 8px; color: var(--wc24-muted); display: grid; flex: none; font-size: 11px; font-weight: 700; height: 26px; place-items: center; width: 26px; }
.wc24-acc b { color: var(--wc24-heading); display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.wc24-acc-why { color: var(--wc24-muted); font-size: 13px; line-height: 1.5; }
.wc24-acc-st { color: var(--wc24-muted); font-size: 12.5px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.wc24-acc-fields { border-top: 1px solid var(--wc24-line); margin-top: 14px; padding-top: 14px; }
.wc24-acc-done { background: var(--wc24-green-light); border-color: #C6E3D2; }
.wc24-acc-done .wc24-acc-ic { background: var(--wc24-green); color: #fff; }
.wc24-acc-done .wc24-acc-st { color: var(--wc24-green); }
/* The item that asks for nothing — deliberately quiet, deliberately present. */
.wc24-acc-quiet { background: var(--wc24-panel); border-color: transparent; }

.wc24-secure { background: var(--wc24-blue-light); border: 1px solid #DCE6F8; border-radius: 12px; color: var(--wc24-body); font-size: 13px; line-height: 1.6; margin-bottom: 20px; padding: 15px 17px; }
.wc24-secure b { color: var(--wc24-heading); display: block; margin-bottom: 4px; }

.wc24-perm { align-items: flex-start; border-bottom: 1px solid var(--wc24-line); cursor: pointer; display: flex; gap: 11px; padding: 13px 0; }
.wc24-perm:last-of-type { border-bottom: 0; }
.wc24-perm input { accent-color: var(--wc24-blue); flex: none; height: 17px; margin-top: 2px; width: 17px; }
.wc24-perm b { color: var(--wc24-heading); display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.wc24-perm span span { color: var(--wc24-muted); font-size: 13px; line-height: 1.5; }
.wc24-perm-staging { margin-top: 18px; }

.wc24-subwrap { align-items: center; border-top: 1px solid var(--wc24-line); display: flex; flex-wrap: wrap; gap: 18px; padding-top: 24px; }
.wc24-subnote { color: var(--wc24-muted); flex: 1; font-size: 13px; min-width: 220px; }

/* The rail: what was bought, and the promise that the clock is not running. */
.wc24-irail { display: flex; flex-direction: column; gap: 16px; position: -webkit-sticky; position: sticky; top: 20px; }
.wc24-rb { background: #fff; border: 1px solid var(--wc24-line); border-radius: 16px; box-shadow: var(--wc24-shadow); padding: 22px; }
.wc24-rb-quiet { background: var(--wc24-panel); border-color: transparent; box-shadow: none; }
.wc24-rb-sku { color: var(--wc24-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; margin-bottom: 7px; }
.wc24-rb h3 { color: var(--wc24-heading); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 11px; }
.wc24-rb-extra { color: var(--wc24-muted); font-size: 13px; margin: -6px 0 11px; }
.wc24-rb-row { border-bottom: 1px solid var(--wc24-line); display: flex; font-size: 13.5px; justify-content: space-between; padding: 7px 0; }
.wc24-rb-row:last-of-type { border-bottom: 0; }
.wc24-rb-row .k { color: var(--wc24-muted); }
.wc24-rb-row .v { color: var(--wc24-heading); font-weight: 600; }
.wc24-rb-row .v .woocommerce-Price-amount { color: var(--wc24-price); font-weight: 700; }
.wc24-rb h4 { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.wc24-rb p { color: var(--wc24-muted); font-size: 13px; line-height: 1.55; margin: 0; }
/* Amber, not blue: this is the one thing on the page someone must not skim,
   because believing the clock has started is what makes them rush the form. */
.wc24-clocknote { background: var(--wc24-amber-light); border: 1px solid #F0D9A8; border-radius: 12px; padding: 16px 18px; }
.wc24-clocknote h4 { color: #6B4400; font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.wc24-clocknote p { color: #8A5A00; font-size: 13px; line-height: 1.55; margin: 0; }

@media (max-width: 1180px) {
	.wc24-intakegrid { column-gap: 32px; grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
	.wc24-intakegrid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
	.wc24-irail { position: static; }
	.wc24-f2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.wc24-icard-bd { padding: 20px; }
	.wc24-icard-hd { padding: 16px 20px; }
	.wc24-subwrap .wc24-btn { width: 100%; }
	/* The status word drops under the title rather than squeezing it. */
	.wc24-acc-top { flex-wrap: wrap; }
	.wc24-acc-st { flex-basis: 100%; margin-left: 0; }
}

/* Safari below 14.1 has no flex gap; fall back to spacing that still reads. */
@supports not (row-gap: 1px) {
	.wc24-acc-top > * + *,
	.wc24-perm > * + *,
	.wc24-choice > * + *,
	.wc24-subwrap > * + * { margin-left: 12px; }
	.wc24-irail > * + * { margin-top: 16px; }
}

/* ---------------------------------------------------------------------- */
/* account, thank you and tracking — every page where the clock is the     */
/* reason someone opened it                                               */
/* ---------------------------------------------------------------------- */

.wc24-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* status pill */
.wc24-st { align-items: center; border-radius: 20px; display: inline-flex; font-size: 12.5px; font-weight: 600; gap: 7px; padding: 5px 13px; background: var(--wc24-panel); color: var(--wc24-muted); }
.wc24-st i { border-radius: 50%; flex: none; height: 7px; width: 7px; background: currentColor; }
.wc24-st-wait, .wc24-st-you { background: var(--wc24-amber-light); color: #8A5A00; }
.wc24-st-queue, .wc24-st-prog { background: var(--wc24-blue-light); color: var(--wc24-blue); }
.wc24-st-done { background: var(--wc24-green-light); color: var(--wc24-green); }
.wc24-st-block { display: inline-flex; margin-bottom: 14px; }

/* The clock. Largest thing on the card, because it is the question. */
.wc24-clock { align-items: center; background: var(--wc24-panel); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding: 16px 18px; }
.wc24-clock-big { color: var(--wc24-heading); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.wc24-clock-sm { font-size: 15px; font-weight: 600; }
.wc24-clock-lbl { color: var(--wc24-muted); font-size: 12.5px; margin-top: 2px; }
.wc24-clock-sep { align-self: stretch; background: var(--wc24-line); width: 1px; }
.wc24-clock-act { margin-left: auto; }
.wc24-clock-bar { background: var(--wc24-line); border-radius: 3px; height: 6px; margin-top: 12px; overflow: hidden; width: 100%; }
.wc24-clock-bar span { background: var(--wc24-blue); border-radius: 3px; display: block; height: 100%; }
/* Paused is amber and carries its reason in .wc24-clock-lbl — never a bare
   "Paused" that sends someone to the contact form to ask why. */
.wc24-clock-paused { background: var(--wc24-amber-light); border: 1px solid #F0D9A8; }
.wc24-clock-paused .wc24-clock-big, .wc24-clock-paused .wc24-clock-lbl { color: #8A5A00; }
.wc24-clock-paused .wc24-clock-bar span { background: #D89B1F; }
.wc24-clock-done { background: var(--wc24-green-light); }
.wc24-clock-done .wc24-clock-big { color: var(--wc24-green); }
/* Overdue is red and still running, which is not the same as paused. */
.wc24-clock-over { background: var(--wc24-red-light); }
.wc24-clock-over .wc24-clock-big, .wc24-clock-over .wc24-clock-lbl { color: var(--wc24-red); }
.wc24-clock-over .wc24-clock-bar span { background: var(--wc24-red); }
.wc24-clock-notstarted .wc24-clock-big { color: var(--wc24-muted); }

/* orders list */
.wc24-anav { border: 1px solid var(--wc24-line); border-radius: 16px; padding: 10px; position: -webkit-sticky; position: sticky; top: 20px; }
.wc24-anav a { align-items: center; border-radius: 11px; color: var(--wc24-body); display: flex; font-size: 14px; gap: 10px; min-height: 44px; padding: 12px 14px; }
.wc24-anav a.wc24-anav-on { background: var(--wc24-blue-light); color: var(--wc24-blue); font-weight: 600; }
.wc24-anav-ct { color: var(--wc24-muted); font-size: 12.5px; margin-left: auto; }
.wc24-anav a.wc24-anav-on .wc24-anav-ct { color: var(--wc24-blue); }

.wc24-ocard { border: 1px solid var(--wc24-line); border-radius: 16px; margin-bottom: 14px; padding: 22px; }
.wc24-otop { align-items: center; border-bottom: 1px solid var(--wc24-line); display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; }
.wc24-onum { color: var(--wc24-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.wc24-odate { color: var(--wc24-muted); font-size: 12.5px; }
.wc24-otop .wc24-st { margin-left: auto; }
.wc24-oitem { align-items: flex-start; display: flex; gap: 16px; }
.wc24-oitem + .wc24-oitem { margin-top: 14px; }
.wc24-oimg { border: 1px solid var(--wc24-line); border-radius: 9px; flex: none; overflow: hidden; width: 76px; }
.wc24-oimg img { display: block; height: auto; width: 100%; }
.wc24-osku { color: var(--wc24-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; margin-bottom: 5px; }
.wc24-oitem h3 { color: var(--wc24-heading); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 5px; }
.wc24-ometa { color: var(--wc24-muted); font-size: 13px; }
.wc24-pager { display: flex; gap: 10px; margin-top: 18px; }
.wc24-empty { border: 1px solid var(--wc24-line); border-radius: 16px; padding: 40px; text-align: center; }
.wc24-empty h2 { color: var(--wc24-heading); font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.wc24-empty p { color: var(--wc24-muted); margin: 0 0 20px; }

/* order detail */
.wc24-single { align-items: start; display: grid; column-gap: 44px; grid-template-columns: minmax(0, 1fr) 320px; padding-bottom: 70px; }
.wc24-box { border: 1px solid var(--wc24-line); border-radius: 16px; margin-bottom: 16px; padding: 24px; }
.wc24-box-flush { overflow: hidden; padding: 0; }
.wc24-box-flush .wc24-clock { border-radius: 0; margin: 0; padding: 22px 24px; }
.wc24-box-quiet { background: var(--wc24-panel); border-color: transparent; }
.wc24-box-amber { background: var(--wc24-amber-light); border-color: #F0D9A8; }
.wc24-box-amber h2 { color: #6B4400; }
.wc24-box h2 { color: var(--wc24-heading); font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 14px; }
.wc24-box h3 { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.wc24-box p { margin: 0 0 12px; }
.wc24-box p:last-of-type { margin-bottom: 0; }
.wc24-box-sm { font-size: 15px !important; }
.wc24-box-note { color: var(--wc24-muted); font-size: 13px; }

.wc24-steps { list-style: none; margin: 0; padding: 0; }
/* Stated once for the timeline above. A deadline read on its own still
   carries the zone inline -- see WC24_Lifecycle::with_zone(). */
.wc24-steps-zone { color: var(--wc24-muted); font-size: 12.5px; margin: 14px 0 0; }
.wc24-steps li { display: flex; font-size: 14px; gap: 14px; padding: 11px 0; position: relative; }
.wc24-steps li:not(:last-child)::after { background: var(--wc24-line); bottom: -4px; content: ""; left: 10px; position: absolute; top: 32px; width: 2px; }
.wc24-steps-dot { background: var(--wc24-line); border-radius: 50%; color: #fff; display: grid; flex: none; font-size: 11px; font-weight: 700; height: 22px; place-items: center; position: relative; width: 22px; z-index: 1; }
.wc24-steps .done .wc24-steps-dot { background: var(--wc24-green); }
.wc24-steps .now .wc24-steps-dot { background: var(--wc24-blue); }
.wc24-steps b { color: var(--wc24-heading); display: block; font-weight: 600; }
.wc24-steps span { color: var(--wc24-muted); font-size: 12.5px; }

.wc24-answers { font-size: 14px; margin: 0; }
.wc24-answers dt { color: var(--wc24-heading); font-weight: 600; margin-top: 14px; }
.wc24-answers dt:first-child { margin-top: 0; }
.wc24-answers dd { color: var(--wc24-body); margin: 3px 0 0; }
.wc24-acclist { list-style: none; margin: 0 0 14px; padding: 0; }
.wc24-acclist li { color: var(--wc24-body); font-size: 13.5px; padding: 6px 0 6px 20px; position: relative; }
.wc24-acclist li::before { color: var(--wc24-green); content: "\2713"; font-weight: 700; left: 0; position: absolute; }
.wc24-notes { list-style: none; margin: 0; padding: 0; }
.wc24-notes li { border-top: 1px solid var(--wc24-line); padding: 12px 0; }
.wc24-notes li:first-child { border-top: 0; padding-top: 0; }
.wc24-notes-when { color: var(--wc24-muted); display: block; font-size: 12.5px; margin-bottom: 3px; }
.wc24-notes p { margin: 0; }

/* awaiting intake — one thing on the page */
.wc24-intake-prompt { border: 1.5px solid var(--wc24-blue); border-radius: 18px; box-shadow: var(--wc24-shadow); margin-bottom: 60px; max-width: 760px; padding: 34px 38px; }
.wc24-intake-prompt h2 { color: var(--wc24-heading); font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; }
.wc24-intake-prompt p { font-size: 15px; margin: 0 0 18px; max-width: 62ch; }
.wc24-intake-prompt .wc24-why { margin-bottom: 22px; }
.wc24-why-amber { background: var(--wc24-amber-light); color: #8A5A00; }
.wc24-why-amber b { color: #6B4400; }

/* thank you */
.wc24-ty { margin: 0 auto; max-width: 760px; padding: 52px 0 80px; }
.wc24-ty-head { margin-bottom: 34px; text-align: center; }
.wc24-ty-tick { background: var(--wc24-green-light); border-radius: 50%; color: var(--wc24-green); display: grid; font-size: 24px; font-weight: 700; height: 52px; margin: 0 auto 18px; place-items: center; width: 52px; }
.wc24-ty h1 { color: var(--wc24-heading); font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 10px; }
.wc24-ty-sub { color: var(--wc24-muted); font-size: 16px; margin: 0; }
.wc24-ty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wc24-next { border: 1.5px solid var(--wc24-blue); border-radius: 18px; box-shadow: var(--wc24-shadow); margin-bottom: 20px; padding: 32px 36px; }
.wc24-next h2 { color: var(--wc24-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.wc24-next p { margin: 0 0 18px; }
.wc24-next-alt { color: var(--wc24-muted); font-size: 13px; margin: 16px 0 0 !important; }
.wc24-notyet { background: var(--wc24-amber-light); border-radius: 12px; color: #8A5A00; font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; padding: 15px 17px; }
.wc24-notyet strong { color: #6B4400; }
.wc24-rcpt { font-size: 14px; }
.wc24-rcpt-row > span:last-child { color: var(--wc24-price); font-weight: 700; }
.wc24-rcpt-row { border-bottom: 1px solid var(--wc24-line); display: flex; gap: 16px; justify-content: space-between; padding: 9px 0; }
.wc24-rcpt-row:last-child { border-bottom: 0; color: var(--wc24-price); font-size: 17px; font-weight: 700; padding-top: 14px; }
.wc24-rcpt .k { color: var(--wc24-muted); }

/* tracking */
.wc24-track { margin: 0 auto; max-width: 560px; padding: 56px 0 80px; text-align: center; }
.wc24-track h1 { color: var(--wc24-heading); font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 10px; }
.wc24-track > p { color: var(--wc24-muted); font-size: 16px; margin: 0 0 30px; }
.wc24-tform { display: grid; gap: 12px; text-align: left; }
.wc24-tform label { color: var(--wc24-heading); display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* 16px so iOS doesn't zoom, and the element name beats Kadence's
   input[type="text"] padding the same way the intake fields do. */
.wc24-tform input[type="text"], .wc24-tform input[type="email"] { background: #fff; border: 1px solid var(--wc24-line); border-radius: 12px; box-sizing: border-box; font: inherit; font-size: 16px; min-height: 44px; padding: 14px 18px; width: 100%; }
.wc24-track-hint { color: var(--wc24-muted); font-size: 13px; margin: 18px 0 0; }
.wc24-track-result { margin: 0 auto; max-width: 760px; padding-bottom: 70px; }
.wc24-track-result .wc24-why { margin-top: 18px; }

@media (max-width: 1180px) {
	.wc24-single { column-gap: 30px; grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
	.wc24-single { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.wc24-anav { display: flex; gap: 4px; overflow: auto; padding: 6px; position: static; }
	.wc24-anav a { white-space: nowrap; }
}
@media (max-width: 640px) {
	.wc24-clock { gap: 12px; }
	.wc24-clock-sep { display: none; }
	.wc24-clock-act { flex-basis: 100%; margin-left: 0; text-align: center; }
	.wc24-ocard { padding: 18px; }
	.wc24-intake-prompt, .wc24-next { padding: 24px 20px; }
	.wc24-ty h1, .wc24-track h1 { font-size: 24px; }
	.wc24-box { padding: 20px; }
}

@supports not (row-gap: 1px) {
	.wc24-otop > * + *, .wc24-oitem > * + *, .wc24-clock > * + * { margin-left: 12px; }
	.wc24-pager > * + * { margin-left: 10px; }
}

.wc24-acct { align-items: start; display: grid; column-gap: 36px; grid-template-columns: 224px minmax(0, 1fr); padding-bottom: 70px; }
@media (max-width: 1180px) { .wc24-acct { column-gap: 26px; grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 980px)  { .wc24-acct { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } }

/* ---------------------------------------------------------------------- */
/* search results, the empty state, and 404                               */
/* ---------------------------------------------------------------------- */

/* Matched terms. Amber ground rather than the browser default yellow, which
   is louder than anything else on the page and reads as a warning here. */
.wc24-card-title mark,
.wc24-card-desc mark,
.wc24-near mark { background: var(--wc24-amber-light); border-radius: 3px; color: inherit; padding: 0 2px; }

/* No results — the page someone leaves from, if it lets them. */
.wc24-noresults { border: 1px solid var(--wc24-line); border-radius: 16px; padding: 32px; }
.wc24-noresults h2 { color: var(--wc24-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.wc24-noresults > p { color: var(--wc24-muted); margin: 0 0 22px; max-width: 62ch; }
.wc24-noresults-h3 { color: var(--wc24-heading); font-size: 14px; font-weight: 700; margin: 28px 0 12px; }
.wc24-noresults-ask { border-top: 1px solid var(--wc24-line); color: var(--wc24-muted); font-size: 13.5px; margin: 26px 0 0; padding-top: 18px; }
.wc24-noresults-ask a { color: var(--wc24-blue); }
.wc24-noresults-scan { background: var(--wc24-blue-light); border: 1px solid #DCE6F8; border-radius: 12px; padding: 20px 22px; }
.wc24-noresults-scan b { color: var(--wc24-heading); display: block; font-size: 14.5px; margin-bottom: 5px; }
.wc24-noresults-scan p { color: var(--wc24-body); font-size: 13.5px; margin: 0 0 14px; }

/* Near misses: the closest thing we do have, rather than nothing. */
.wc24-nearlist { display: grid; gap: 10px; }
.wc24-near { align-items: center; border: 1px solid var(--wc24-line); border-radius: 12px; display: flex; gap: 16px; min-height: 44px; padding: 14px 16px; text-decoration: none; }
.wc24-near b, .wc24-near span { text-decoration: none; }
.wc24-near:hover { box-shadow: var(--wc24-shadow); }
.wc24-near-body { flex: 1; min-width: 0; }
.wc24-near-sku { color: var(--wc24-muted); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; margin-bottom: 3px; }
.wc24-near b { color: var(--wc24-heading); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.wc24-near-side { flex: none; text-align: right; }
.wc24-near-price { color: var(--wc24-price); display: block; font-size: 15px; font-weight: 700; }
.wc24-near-price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.wc24-near-turn { color: var(--wc24-muted); display: block; font-size: 12.5px; }

/* The doors — shared by the search empty state and 404, because they are the
   same offer: here is the way in, sorted by how urgent it is. */
.wc24-doorgrid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
/* The whole card is the link, so it must not read as underlined body text —
   Kadence underlines every <a> in content by default. */
.wc24-doorgrid a { border: 1px solid var(--wc24-line); border-radius: 12px; display: block; padding: 15px 17px; text-decoration: none; }
.wc24-doorgrid a b, .wc24-doorgrid a span { text-decoration: none; }
.wc24-doorgrid a:hover { box-shadow: var(--wc24-shadow); }
.wc24-doorgrid .wc24-pill { display: inline-block; margin-bottom: 8px; }
.wc24-doorgrid b { color: var(--wc24-heading); display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.wc24-doorgrid span:not(.wc24-pill) { color: var(--wc24-muted); display: block; font-size: 12.5px; line-height: 1.5; }

/* 404 */
.wc24-nf { margin: 0 auto; max-width: 820px; padding: 64px 0 80px; text-align: center; }
.wc24-nf-code { color: var(--wc24-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 56px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.wc24-nf h1 { color: var(--wc24-heading); font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 14px 0 10px; }
.wc24-nf > p { color: var(--wc24-muted); font-size: 16px; margin: 0 auto 30px; max-width: 52ch; }
.wc24-nf-search { align-items: center; background: var(--wc24-panel); border: 1px solid var(--wc24-line); border-radius: 30px; display: flex; margin: 0 auto 40px; max-width: 560px; padding: 4px 4px 4px 20px; }
/* 16px so iOS doesn't zoom on focus; the element name beats Kadence's
   input[type="search"] padding the same way the intake fields do. */
.wc24-nf-search input[type="search"] { background: none; border: 0; flex: 1; font: inherit; font-size: 16px; min-width: 0; outline: 0; padding: 11px 0; }
.wc24-nf-search .wc24-btn { flex: none; }
.wc24-nf-alt { color: var(--wc24-muted); font-size: 13.5px; margin: 30px 0 0; }
.wc24-nf-alt a { color: var(--wc24-blue); }

@media (max-width: 980px) {
	.wc24-doorgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
	/* Stacked under the copyright line, so right-aligning it would leave it
	   floating away from everything else. */
	.wc24-foot-venture { text-align: left; }
	.wc24-doorgrid { grid-template-columns: minmax(0, 1fr); }
	.wc24-noresults { padding: 22px 18px; }
	.wc24-nf { padding: 40px 0 60px; }
	.wc24-nf h1 { font-size: 24px; }
	.wc24-nf-search { flex-wrap: wrap; background: none; border: 0; gap: 10px; padding: 0; }
	.wc24-nf-search input[type="search"] { background: var(--wc24-panel); border: 1px solid var(--wc24-line); border-radius: 26px; flex-basis: 100%; padding: 13px 20px; }
	.wc24-nf-search .wc24-btn { width: 100%; }
	.wc24-near { flex-wrap: wrap; }
	.wc24-near-side { text-align: left; }
}

/* ---------------------------------------------------------------------- */
/* legal documents — terms, refund policy, privacy, DPA                    */
/* ---------------------------------------------------------------------- */

.wc24-crumb { color: var(--wc24-muted); font-size: 13px; padding: 20px 0 0; }
.wc24-crumb a { color: var(--wc24-muted); }
.wc24-crumb a:hover { color: var(--wc24-blue); }

.wc24-legal { align-items: start; display: grid; column-gap: 44px; grid-template-columns: 236px minmax(0, 1fr); padding-bottom: 70px; }

.wc24-toc { border: 1px solid var(--wc24-line); border-radius: 16px; padding: 20px; position: -webkit-sticky; position: sticky; top: 20px; }
.wc24-toc-h { color: var(--wc24-muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; margin: 0 0 10px; }
.wc24-toc a { border-radius: 9px; color: var(--wc24-body); display: block; font-size: 13.5px; line-height: 1.4; padding: 8px 10px; text-decoration: none; }
.wc24-toc a:hover { background: var(--wc24-panel); }
/* Set on the first entry server-side and moved by legal-toc.js as the reader
   scrolls. Without the script the first entry simply stays marked. */
.wc24-toc a.on { background: var(--wc24-blue-light); color: var(--wc24-blue); font-weight: 600; }

/* 74ch: a legal document is read, not scanned, and a full-width measure is
   where people give up. */
.wc24-doc { max-width: 74ch; }
.wc24-doc-upd { border-bottom: 1px solid var(--wc24-line); color: var(--wc24-muted); font-size: 13px; margin-bottom: 28px; padding-bottom: 20px; }
.wc24-doc-upd a { color: var(--wc24-blue); }
.wc24-doc h2 { color: var(--wc24-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 12px; }
.wc24-doc h2:first-of-type { margin-top: 0; }
/* Anchored headings land under the header rather than behind it. */
.wc24-doc h2[id] { scroll-margin-top: 90px; }
.wc24-doc h3 { color: var(--wc24-heading); font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.wc24-doc p { margin: 0 0 14px; }
.wc24-doc ul, .wc24-doc ol { margin: 0 0 16px 20px; }
.wc24-doc li { line-height: 1.5; padding: 4px 0; }
.wc24-doc a { color: var(--wc24-blue); }
.wc24-doc table { border-collapse: collapse; margin: 0 0 18px; width: 100%; }
.wc24-doc th, .wc24-doc td { border-bottom: 1px solid var(--wc24-line); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.wc24-doc th { color: var(--wc24-heading); font-size: 13px; font-weight: 700; }

/* The short version, at the top. On the refund policy this is the reason
   someone came: every product page promises a refund, and they want it
   confirmed in two lines rather than after four scrolled sections. */
/* The short version has to be the thing you read, not a summary you skim
   past on the way to the "real" document. It was a grey panel at 13.5px —
   smaller than the body text under it, which is how a page tells you
   something is a footnote.

   Now it carries the same weight as .wc24-next on the thank-you page, which
   is this site's established treatment for "if you read one thing, read
   this": blue border, real padding, and type a step ABOVE the body rather
   than below it. On the refund policy this is the answer someone arrived
   from a product page to find. */
.wc24-callout {
	background: #fff;
	border: 1.5px solid var(--wc24-blue);
	border-radius: 16px;
	box-shadow: var(--wc24-shadow);
	color: var(--wc24-body);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 32px;
	padding: 26px 30px;
}
.wc24-callout b {
	color: var(--wc24-heading);
	display: block;
	font-size: 15px;
	letter-spacing: .04em;
	margin-bottom: 8px;
	text-transform: uppercase;
}
@media (max-width: 640px) {
	.wc24-callout { font-size: 15px; padding: 20px 18px; }
}

@media (max-width: 1180px) {
	.wc24-legal { column-gap: 30px; grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 980px) {
	.wc24-legal { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	/* Horizontal above the document rather than sticky beside it. */
	.wc24-toc { display: flex; gap: 4px; overflow: auto; position: static; }
	.wc24-toc a { white-space: nowrap; }
	.wc24-toc-h { display: none; }
	.wc24-doc { max-width: none; }
}

/* ---------------------------------------------------------------------- */
/* links: interface versus prose                                           */
/* ---------------------------------------------------------------------- */

/* The distinction is not decoration versus function. A nav item, a card, a
   breadcrumb or a button is obviously clickable from where it sits and needs
   no underline. A word in the middle of a sentence is not, and needs one.

   SPECIFICITY, and why every selector in this block carries :not(.button):

   Kadence underlines content links with
     .inner-link-style-normal a:not(.button)
   which is (0,2,1) — two classes, because of the :not(). A plain
   `.wc24-doc a` is (0,1,1) and silently loses to it, which is how several
   rules in this stylesheet were quietly doing nothing. So the reset and the
   prose rules below are all written at (0,2,1): equal to Kadence's, resolved
   by order (the child stylesheet is enqueued after the parent's), and equal
   to each other, resolved by their order here — reset first, prose after.

   Do not "tidy" the :not(.button) off these selectors. It is load-bearing. */

/* Interface: everything, by default. */
a { text-decoration: none; }
.inner-link-style-normal a:not(.button),
.link-style-color-underline .entry-content a:not(.button) { text-decoration: none; }

/* Prose: a link inside a sentence, which is narrower than "a link inside a
   prose container". Scoping to p/li/dd/dt/blockquote is what separates them —
   the first version underlined every link in .wc24-copy and .wc24-about,
   which caught the "Scan my site free" button and the related-fix cards,
   because our buttons are .wc24-btn and Kadence's :not(.button) never
   excluded them.

   These links are distinguished by colour alone, and colour alone is nothing
   to a colour-blind reader — on a refund policy that is a missed link that
   costs someone money. So they are underlined at rest, not only on hover,
   and the underline thickens on hover and on keyboard focus. */
.wc24-doc p a:not(.wc24-btn),
.wc24-doc li a:not(.wc24-btn),
.wc24-doc dd a:not(.wc24-btn),
.wc24-doc dt a:not(.wc24-btn),
.wc24-doc blockquote a:not(.wc24-btn),
.wc24-copy p a:not(.wc24-btn),
.wc24-copy li a:not(.wc24-btn),
.wc24-copy dd a:not(.wc24-btn),
.wc24-copy dt a:not(.wc24-btn),
.wc24-copy blockquote a:not(.wc24-btn),
.wc24-about p a:not(.wc24-btn),
.wc24-about li a:not(.wc24-btn),
.wc24-about dd a:not(.wc24-btn),
.wc24-about dt a:not(.wc24-btn),
.wc24-about blockquote a:not(.wc24-btn),
.wc24-callout p a:not(.wc24-btn),
.wc24-callout li a:not(.wc24-btn),
.wc24-callout dd a:not(.wc24-btn),
.wc24-callout dt a:not(.wc24-btn),
.wc24-callout blockquote a:not(.wc24-btn),
.wc24-why p a:not(.wc24-btn),
.wc24-why li a:not(.wc24-btn),
.wc24-why dd a:not(.wc24-btn),
.wc24-why dt a:not(.wc24-btn),
.wc24-why blockquote a:not(.wc24-btn),
.wc24-secure p a:not(.wc24-btn),
.wc24-secure li a:not(.wc24-btn),
.wc24-secure dd a:not(.wc24-btn),
.wc24-secure dt a:not(.wc24-btn),
.wc24-secure blockquote a:not(.wc24-btn),
.wc24-sumnote p a:not(.wc24-btn),
.wc24-sumnote li a:not(.wc24-btn),
.wc24-sumnote dd a:not(.wc24-btn),
.wc24-sumnote dt a:not(.wc24-btn),
.wc24-sumnote blockquote a:not(.wc24-btn),
.wc24-notyet p a:not(.wc24-btn),
.wc24-notyet li a:not(.wc24-btn),
.wc24-notyet dd a:not(.wc24-btn),
.wc24-notyet dt a:not(.wc24-btn),
.wc24-notyet blockquote a:not(.wc24-btn),
.wc24-notes p a:not(.wc24-btn),
.wc24-notes li a:not(.wc24-btn),
.wc24-notes dd a:not(.wc24-btn),
.wc24-notes dt a:not(.wc24-btn),
.wc24-notes blockquote a:not(.wc24-btn),
.wc24-answers p a:not(.wc24-btn),
.wc24-answers li a:not(.wc24-btn),
.wc24-answers dd a:not(.wc24-btn),
.wc24-answers dt a:not(.wc24-btn),
.wc24-answers blockquote a:not(.wc24-btn),
.wc24-box-note p a:not(.wc24-btn),
.wc24-box-note li a:not(.wc24-btn),
.wc24-box-note dd a:not(.wc24-btn),
.wc24-box-note dt a:not(.wc24-btn),
.wc24-box-note blockquote a:not(.wc24-btn),
.wc24-noresults-ask a:not(.wc24-btn),
.wc24-nf-alt a:not(.wc24-btn) {
	color: var(--wc24-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.wc24-doc p a:not(.wc24-btn):hover,
.wc24-doc p a:not(.wc24-btn):focus-visible,
.wc24-doc li a:not(.wc24-btn):hover,
.wc24-doc li a:not(.wc24-btn):focus-visible,
.wc24-doc dd a:not(.wc24-btn):hover,
.wc24-doc dd a:not(.wc24-btn):focus-visible,
.wc24-doc dt a:not(.wc24-btn):hover,
.wc24-doc dt a:not(.wc24-btn):focus-visible,
.wc24-doc blockquote a:not(.wc24-btn):hover,
.wc24-doc blockquote a:not(.wc24-btn):focus-visible,
.wc24-copy p a:not(.wc24-btn):hover,
.wc24-copy p a:not(.wc24-btn):focus-visible,
.wc24-copy li a:not(.wc24-btn):hover,
.wc24-copy li a:not(.wc24-btn):focus-visible,
.wc24-copy dd a:not(.wc24-btn):hover,
.wc24-copy dd a:not(.wc24-btn):focus-visible,
.wc24-copy dt a:not(.wc24-btn):hover,
.wc24-copy dt a:not(.wc24-btn):focus-visible,
.wc24-copy blockquote a:not(.wc24-btn):hover,
.wc24-copy blockquote a:not(.wc24-btn):focus-visible,
.wc24-about p a:not(.wc24-btn):hover,
.wc24-about p a:not(.wc24-btn):focus-visible,
.wc24-about li a:not(.wc24-btn):hover,
.wc24-about li a:not(.wc24-btn):focus-visible,
.wc24-about dd a:not(.wc24-btn):hover,
.wc24-about dd a:not(.wc24-btn):focus-visible,
.wc24-about dt a:not(.wc24-btn):hover,
.wc24-about dt a:not(.wc24-btn):focus-visible,
.wc24-about blockquote a:not(.wc24-btn):hover,
.wc24-about blockquote a:not(.wc24-btn):focus-visible,
.wc24-callout p a:not(.wc24-btn):hover,
.wc24-callout p a:not(.wc24-btn):focus-visible,
.wc24-callout li a:not(.wc24-btn):hover,
.wc24-callout li a:not(.wc24-btn):focus-visible,
.wc24-callout dd a:not(.wc24-btn):hover,
.wc24-callout dd a:not(.wc24-btn):focus-visible,
.wc24-callout dt a:not(.wc24-btn):hover,
.wc24-callout dt a:not(.wc24-btn):focus-visible,
.wc24-callout blockquote a:not(.wc24-btn):hover,
.wc24-callout blockquote a:not(.wc24-btn):focus-visible,
.wc24-why p a:not(.wc24-btn):hover,
.wc24-why p a:not(.wc24-btn):focus-visible,
.wc24-why li a:not(.wc24-btn):hover,
.wc24-why li a:not(.wc24-btn):focus-visible,
.wc24-why dd a:not(.wc24-btn):hover,
.wc24-why dd a:not(.wc24-btn):focus-visible,
.wc24-why dt a:not(.wc24-btn):hover,
.wc24-why dt a:not(.wc24-btn):focus-visible,
.wc24-why blockquote a:not(.wc24-btn):hover,
.wc24-why blockquote a:not(.wc24-btn):focus-visible,
.wc24-secure p a:not(.wc24-btn):hover,
.wc24-secure p a:not(.wc24-btn):focus-visible,
.wc24-secure li a:not(.wc24-btn):hover,
.wc24-secure li a:not(.wc24-btn):focus-visible,
.wc24-secure dd a:not(.wc24-btn):hover,
.wc24-secure dd a:not(.wc24-btn):focus-visible,
.wc24-secure dt a:not(.wc24-btn):hover,
.wc24-secure dt a:not(.wc24-btn):focus-visible,
.wc24-secure blockquote a:not(.wc24-btn):hover,
.wc24-secure blockquote a:not(.wc24-btn):focus-visible,
.wc24-sumnote p a:not(.wc24-btn):hover,
.wc24-sumnote p a:not(.wc24-btn):focus-visible,
.wc24-sumnote li a:not(.wc24-btn):hover,
.wc24-sumnote li a:not(.wc24-btn):focus-visible,
.wc24-sumnote dd a:not(.wc24-btn):hover,
.wc24-sumnote dd a:not(.wc24-btn):focus-visible,
.wc24-sumnote dt a:not(.wc24-btn):hover,
.wc24-sumnote dt a:not(.wc24-btn):focus-visible,
.wc24-sumnote blockquote a:not(.wc24-btn):hover,
.wc24-sumnote blockquote a:not(.wc24-btn):focus-visible,
.wc24-notyet p a:not(.wc24-btn):hover,
.wc24-notyet p a:not(.wc24-btn):focus-visible,
.wc24-notyet li a:not(.wc24-btn):hover,
.wc24-notyet li a:not(.wc24-btn):focus-visible,
.wc24-notyet dd a:not(.wc24-btn):hover,
.wc24-notyet dd a:not(.wc24-btn):focus-visible,
.wc24-notyet dt a:not(.wc24-btn):hover,
.wc24-notyet dt a:not(.wc24-btn):focus-visible,
.wc24-notyet blockquote a:not(.wc24-btn):hover,
.wc24-notyet blockquote a:not(.wc24-btn):focus-visible,
.wc24-notes p a:not(.wc24-btn):hover,
.wc24-notes p a:not(.wc24-btn):focus-visible,
.wc24-notes li a:not(.wc24-btn):hover,
.wc24-notes li a:not(.wc24-btn):focus-visible,
.wc24-notes dd a:not(.wc24-btn):hover,
.wc24-notes dd a:not(.wc24-btn):focus-visible,
.wc24-notes dt a:not(.wc24-btn):hover,
.wc24-notes dt a:not(.wc24-btn):focus-visible,
.wc24-notes blockquote a:not(.wc24-btn):hover,
.wc24-notes blockquote a:not(.wc24-btn):focus-visible,
.wc24-answers p a:not(.wc24-btn):hover,
.wc24-answers p a:not(.wc24-btn):focus-visible,
.wc24-answers li a:not(.wc24-btn):hover,
.wc24-answers li a:not(.wc24-btn):focus-visible,
.wc24-answers dd a:not(.wc24-btn):hover,
.wc24-answers dd a:not(.wc24-btn):focus-visible,
.wc24-answers dt a:not(.wc24-btn):hover,
.wc24-answers dt a:not(.wc24-btn):focus-visible,
.wc24-answers blockquote a:not(.wc24-btn):hover,
.wc24-answers blockquote a:not(.wc24-btn):focus-visible,
.wc24-box-note p a:not(.wc24-btn):hover,
.wc24-box-note p a:not(.wc24-btn):focus-visible,
.wc24-box-note li a:not(.wc24-btn):hover,
.wc24-box-note li a:not(.wc24-btn):focus-visible,
.wc24-box-note dd a:not(.wc24-btn):hover,
.wc24-box-note dd a:not(.wc24-btn):focus-visible,
.wc24-box-note dt a:not(.wc24-btn):hover,
.wc24-box-note dt a:not(.wc24-btn):focus-visible,
.wc24-box-note blockquote a:not(.wc24-btn):hover,
.wc24-box-note blockquote a:not(.wc24-btn):focus-visible,
.wc24-noresults-ask a:not(.wc24-btn):hover,
.wc24-noresults-ask a:not(.wc24-btn):focus-visible,
.wc24-nf-alt a:not(.wc24-btn):hover,
.wc24-nf-alt a:not(.wc24-btn):focus-visible { text-decoration-thickness: 2px; }

/* A button inside prose is still a button. */
.wc24-doc .wc24-btn, .wc24-copy .wc24-btn, .wc24-why .wc24-btn,
.wc24-secure .wc24-btn, .wc24-notyet .wc24-btn, .wc24-prose .wc24-btn { text-decoration: none; }

/* The focus ring is an outline, not a text-decoration, so nothing above can
   remove it — but Kadence's *:focus{outline:0} can, which is why the
   baseline a:focus-visible rule near the top of this file exists. Restated
   here at a specificity nothing in this block can undercut, because a focus
   ring lost to a link-styling change is exactly the kind of regression that
   goes unnoticed until somebody tries to use the site without a mouse. */
a:focus-visible,
html .hide-focus-outline a:focus-visible { outline: 2px solid var(--wc24-blue); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* text the customer supplies, which has no length limit                   */
/* ---------------------------------------------------------------------- */

/* Everything here renders something a person typed or pasted: a search term
   that may be a whole stack trace, a site URL, an intake answer, an order
   note. Designer-written copy wraps because it has spaces; a 200-character
   path or a long domain does not, and without this it runs straight out of
   its container.

   It does not scroll the page — an ancestor clips it — so the failure is
   silent: the text is simply cut off at the screen edge with no way to read
   it. That is how the search heading was overflowing by 666px at 390px while
   every page-level overflow check reported clean.

   `anywhere` rather than `break-word` so the long token also shrinks the
   element's min-content width, which is what stops it forcing a grid track
   wider than its share. */
.wc24-chead h1,
.wc24-answers dd,
.wc24-notes,
.wc24-ometa,
.wc24-acclist,
.wc24-doc,
.wc24-near b,
.wc24-card-title,
.wc24-citem-body h3,
.wc24-oitem h3,
.wc24-rb h3 { overflow-wrap: anywhere; }

/* Kadence's boxed article adds its own padding, and under 719px also pulls
   itself 1rem wider than its column (.content-style-boxed .content-bg, which
   is (0,3,0) — three classes, because of the :not()). On pages where our own
   .wc24-w provides the gutter that stacked, leaving cart, checkout and order
   tracking on a 56px inset at 390px against 24px everywhere else.

   Zeroed only on the pages we wrap ourselves; every other page keeps
   Kadence's treatment. .wc24-own-container is added in inc/header-footer.php. */
.wc24-own-container .content-container.site-container,
.wc24-own-container .content-bg,
.wc24-own-container .entry-content-wrap { padding-left: 0; padding-right: 0; }
/* .site-container also caps at Kadence's 1290px content width, which would
   centre our 1220px container inside a different box to every other page. */
.wc24-own-container .content-container.site-container { max-width: none; }
@media screen and (max-width: 719px) {
	html .wc24-own-container .content-style-boxed .content-bg:not(.loop-entry),
	html .content-style-boxed.wc24-own-container .content-bg:not(.loop-entry) { margin-left: 0; margin-right: 0; }
}


/* ---------------------------------------------------------------------- */
/* grid items may shrink                                                   */
/* ---------------------------------------------------------------------- */

/* Companion to the minmax(0, …) tracks above. Freeing the track is only half
   of it: a grid item's min-width defaults to auto, which is its min-content
   width, so a long unbroken string in a cell still forces the column wider
   than its share — the same floor, one level down.

   This has now bitten twice: the mega panel overflowing its container by
   166px, and the search heading rendering 1032px wide inside a 390px
   viewport. Both failed silently, clipped by an ancestor with nothing in the
   logs. A customer pasting a file path into intake or a long site URL into
   order tracking is not an edge case.

   Generated from every rule in this file that declares grid-template-columns,
   so it covers exactly those containers and nothing else. */
.wc24-about > *,
.wc24-acct > *,
.wc24-agency-teaser > *,
.wc24-band-in > *,
.wc24-cartgrid > *,
.wc24-cat-grid > *,
.wc24-cgrid > *,
.wc24-chead > *,
.wc24-citem > *,
.wc24-doorgrid > *,
.wc24-f2 > *,
.wc24-foot-grid > *,
.wc24-gated > *,
.wc24-hero-in > *,
.wc24-intakegrid > *,
.wc24-legal > *,
.wc24-lower > *,
.wc24-mega-fix > *,
.wc24-mega-in > *,
.wc24-pdp > *,
.wc24-plan-grid > *,
.wc24-protect-grid > *,
.wc24-rel > *,
.wc24-pa > *,
.wc24-single > *,
.wc24-steps > *,
.wc24-takeover > *,
.wc24-toprow > *,
.wc24-trust-grid > *,
.wc24-two > *,
form.checkout > * { min-width: 0; }

/* Legal links in the bottom bar rather than a fifth footer column — they are
   reference, not navigation, and the column grid is already balanced. Absent
   entirely until a document is published. */
.wc24-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.wc24-foot .wc24-foot-legal a { color: var(--wc24-muted); display: inline; padding: 0; }
.wc24-foot .wc24-foot-legal a:hover, .wc24-foot .wc24-foot-legal a:focus-visible { color: var(--wc24-blue); }

/* Intake validation, and the cancellation consent.
   The consent is deliberately not styled as a quiet footnote: it is the one
   box a customer must actively tick, and the sentence is the record. */
.wc24-ierr { background: #FFF4F4; border: 1px solid #F3C9C4; border-radius: 14px; margin: 0 0 22px; padding: 20px 24px; }
.wc24-ierr h2 { color: #A6140A; font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.wc24-ierr p { color: var(--wc24-body); font-size: 14px; margin: 0 0 10px; }
.wc24-ierr ul { margin: 0; padding-left: 20px; }
.wc24-ierr li { color: var(--wc24-body); font-size: 14px; margin-bottom: 5px; }
.wc24-ierr a { color: #A6140A; }
.wc24-ferr { color: #A6140A; font-size: 13px; line-height: 1.45; margin-top: 7px; }
.wc24-tx-err { border-color: #D6180B !important; }
.wc24-icard-consent .wc24-icard-bd { padding-top: 22px; }
.wc24-icard-err { border-color: #D6180B; }
.wc24-perm-consent b { display: block; font-size: 14.5px; line-height: 1.55; margin-bottom: 6px; }
.wc24-consent { background: var(--wc24-panel); border-left: 3px solid var(--wc24-blue); border-radius: 0 10px 10px 0;
	color: var(--wc24-body); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; padding: 16px 20px; }

/* Cancellation route. The two options sit side by side at equal weight —
   presented with the fee first and credit as a footnote, the same policy
   reads as a penalty. */
.wc24-cancel h2 { color: var(--wc24-heading); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.wc24-cancel > p { color: var(--wc24-body); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.wc24-cancel-two { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.wc24-copt { align-items: flex-start; background: #fff; border: 1px solid var(--wc24-line); border-radius: 12px;
	cursor: pointer; display: flex; gap: 11px; padding: 16px 18px; }
.wc24-copt:has(input:checked) { border-color: var(--wc24-blue); box-shadow: 0 0 0 1px var(--wc24-blue) inset; }
.wc24-copt input { margin-top: 3px; }
.wc24-copt b { color: var(--wc24-heading); display: block; font-size: 14.5px; margin-bottom: 5px; }
.wc24-copt span span { color: var(--wc24-muted); display: block; font-size: 13px; line-height: 1.55; }
.wc24-copt-stat { background: var(--wc24-panel); border-color: transparent; margin-bottom: 16px; }
.wc24-cancelform .wc24-btn { margin-bottom: 10px; }
.wc24-cancel-sent { border-left: 3px solid var(--wc24-blue); }
@media (max-width: 640px) { .wc24-cancel-two { grid-template-columns: minmax(0, 1fr); } }

/* The end of a company page. One action, and a quiet line under it — not a
   row of buttons competing for the same click. */
.wc24-docend { border-top: 1px solid var(--wc24-line); margin-top: 38px; padding-top: 26px; }
.wc24-docend p { color: var(--wc24-body); font-size: 16px; line-height: 1.6; margin: 0 0 16px; max-width: 62ch; }
.wc24-docend-note { color: var(--wc24-muted); font-size: 14px; margin: 14px 0 0; }

/* Store credit. The balance is the answer to the question the page is asked,
   so it is the biggest thing on it; the ledger underneath is the evidence. */
.wc24-creditbal { align-items: baseline; border: 1px solid var(--wc24-line); border-radius: 16px; display: flex;
	gap: 16px; justify-content: space-between; margin: 0 0 16px; padding: 22px 26px; }
.wc24-creditbal .k { color: var(--wc24-muted); font-size: 14px; }
.wc24-creditbal .v { color: var(--wc24-price); font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.wc24-credit-note { color: var(--wc24-muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 24px; max-width: 62ch; }
.wc24-credittable { border-collapse: collapse; width: 100%; }
.wc24-credittable th { border-bottom: 1px solid var(--wc24-line); color: var(--wc24-muted); font-size: 12px;
	font-weight: 600; letter-spacing: .04em; padding: 0 0 9px; text-align: left; text-transform: uppercase; }
.wc24-credittable td { border-bottom: 1px solid var(--wc24-line); font-size: 14px; padding: 12px 0; vertical-align: top; }
.wc24-credittable .a { text-align: right; white-space: nowrap; }
.wc24-credittable .pos { color: var(--wc24-price); font-weight: 600; }
.wc24-credittable .neg { color: var(--wc24-muted); }
.wc24-credit-optout { margin: 0 0 14px; }
.wc24-credit-optout label { color: var(--wc24-body); font-size: 14px; }