/* Interior public pages (page.php) — breadcrumb + block-editor content,
   styled to match the landing page's type system. Loaded after landing.css,
   so it can reuse the --kl-* variables defined there. */

/* Same max-width as .kl-page-hero__inner (the title band above), so the
   body content's left edge and overall width line up with the title
   instead of sitting in a narrower centred reading column. */
.kl-content-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 48px 120px;
}
.kl-content-page--wide { max-width: 1400px; }
/* Same max-width as every other interior page now, so the checkout/cart
   body lines up with the breadcrumb + title in the hero band above it —
   was previously narrower (1140px), which shifted its left edge out of
   line with the hero's 1400px-wide inner container. */
.kl-content-page--commerce { max-width: 1400px; }

/* Ordinary content pages (About, Privacy Policy, ...) get a donate/
   business/forums promo rail — checkout/cart skip it (excluded in page.php)
   since a form flow isn't the place for it. */
.kl-content-page--with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}

.kl-content-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.kl-side-widget {
	background: var(--kl-cream);
	border: 1px solid var(--kl-border);
	border-radius: 10px;
	padding: 24px;
}
.kl-side-widget h3 { font: 700 17px var(--kl-serif); color: var(--kl-ink); margin: 0 0 8px; }
.kl-side-widget p { font: 400 13.5px/1.6 var(--kl-sans); color: var(--kl-warm-grey); margin: 0 0 16px; }
.kl-side-widget .kl-btn { width: 100%; }
.kl-side-widget--donate { background: var(--kl-red-tint); border-color: var(--kl-border); }

@media (max-width: 900px) {
	.kl-content-page--with-sidebar { grid-template-columns: 1fr; }
	.kl-content-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
	.kl-side-widget { flex: 1 1 220px; }
}

/* Page hero — a band behind the breadcrumb + title on every interior page,
   instead of dropping straight into body copy. Commerce pages (checkout/
   cart) skip this — see page.php — a purely functional flow like that
   doesn't need a decorative header.
   Same background as the fixed header above it and the body itself
   (base.css) — white, so header/hero/page all read as one continuous
   surface. A crest watermark + red rule reintroduce brand colour without a
   flat colour wash, and the border-bottom does the job of separating hero
   from content that a colour contrast would otherwise have done. */
.kl-page-hero {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: #fff;
	border-bottom: 1px solid var(--kl-border);
	overflow: hidden;
}
.kl-page-hero::before {
	content: '';
	position: absolute;
	top: -18%;
	right: -4%;
	width: 340px;
	height: 340px;
	background: url('../images/crest.png') center / contain no-repeat;
	opacity: .05;
	pointer-events: none;
}
.kl-page-hero__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 108px 48px 40px;
}
.kl-page-hero .kl-breadcrumb { margin-bottom: 16px; }
.kl-page-hero .kl-content-page__title {
	margin: 0;
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}
.kl-page-hero .kl-content-page__title::after {
	content: '';
	position: absolute;
	left: 2px;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--kl-red);
}

/* Single post — category + date line above the title, featured image
   below it. */
.kl-post-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kl-post-meta__cat {
	font: 600 10.5px var(--kl-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kl-red);
	background: #fff;
	border-radius: 99px;
	padding: 6px 12px;
}
.kl-post-meta__date { font: 400 14px var(--kl-sans); color: var(--kl-warm-grey-light); }
.kl-post-thumbnail { margin-bottom: 32px; border-radius: 14px; overflow: hidden; }
.kl-post-thumbnail img { width: 100%; height: auto; display: block; }

/* Breadcrumb */
.kl-breadcrumb { margin-bottom: 28px; }
.kl-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font: 500 12.5px var(--kl-sans);
	color: var(--kl-warm-grey-light);
}
.kl-breadcrumb__item { display: flex; align-items: center; }
.kl-breadcrumb__item:not(:last-child)::after {
	content: '/';
	margin: 0 8px;
	color: var(--kl-border);
}
.kl-breadcrumb__item a { color: var(--kl-warm-grey-light); }
.kl-breadcrumb__item a:hover { color: var(--kl-red); }
.kl-breadcrumb__item span[aria-current] { color: var(--kl-ink); font-weight: 600; }

/* Article */
.kl-content-page__title {
	font: 700 40px/1.15 var(--kl-serif);
	color: var(--kl-ink);
	letter-spacing: -.02em;
	margin: 0 0 32px;
}

.kl-content-page__body {
	font: 400 16.5px/1.85 var(--kl-sans);
	color: var(--kl-warm-grey);
}
.kl-content-page__body > * + * { margin-top: 22px; }
.kl-content-page__body h2 {
	font: 600 26px/1.3 var(--kl-serif);
	color: var(--kl-ink);
	letter-spacing: -.01em;
	margin-top: 44px;
}
.kl-content-page__body h3 {
	font: 600 20px/1.3 var(--kl-serif);
	color: var(--kl-ink);
	margin-top: 36px;
}
.kl-content-page__body h4,
.kl-content-page__body h5,
.kl-content-page__body h6 {
	font: 700 15px var(--kl-sans);
	color: var(--kl-ink);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-top: 28px;
}
.kl-content-page__body p { text-wrap: pretty; }
.kl-content-page__body a { color: var(--kl-red); text-decoration: underline; text-underline-offset: 2px; }
.kl-content-page__body strong { color: var(--kl-ink); font-weight: 600; }
.kl-content-page__body ul,
.kl-content-page__body ol { padding-left: 22px; }
.kl-content-page__body li + li { margin-top: 8px; }
.kl-content-page__body blockquote {
	border-left: 3px solid var(--kl-red);
	padding: 4px 0 4px 20px;
	font-style: italic;
	color: var(--kl-ink);
}
.kl-content-page__body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.kl-content-page__body figcaption {
	font: 400 12.5px var(--kl-sans);
	color: var(--kl-warm-grey-light);
	margin-top: 8px;
}
.kl-content-page__body hr { border: none; border-top: 1px solid var(--kl-border); }
.kl-content-page__body table { width: 100%; border-collapse: collapse; }
.kl-content-page__body th,
.kl-content-page__body td { padding: 10px 14px; border: 1px solid var(--kl-border); text-align: left; }
.kl-content-page__body th { font: 600 13px var(--kl-sans); color: var(--kl-ink); }

@media ( max-width: 720px ) {
	.kl-content-page { padding: 28px 24px 80px; }
	.kl-content-page__title { font-size: 30px; }
}

/* Events archive */
.kl-events-archive__section { margin-top: 52px; }
.kl-events-archive__section:first-of-type { margin-top: 36px; }
.kl-events-archive__heading {
	font: 600 22px var(--kl-serif);
	color: var(--kl-ink);
	letter-spacing: -.01em;
	margin: 0 0 22px;
}
.kl-events-archive__empty { font: 400 15px var(--kl-sans); color: var(--kl-warm-grey-light); margin-top: 24px; }
.kl-event-card--past { opacity: .6; }
.kl-event-card--past .kl-event-card__date-badge { background: var(--kl-cream); color: var(--kl-warm-grey); }
.kl-event-card--past .kl-event-card__date-day { color: var(--kl-warm-grey); }

/* 404 */
.kl-404 { max-width: 560px; margin: 0 auto; padding: 24px 0 56px; text-align: center; }
.kl-404__code {
	font: 800 96px/1 var(--kl-serif);
	color: var(--kl-red);
	opacity: .18;
	margin: 0;
}
.kl-404__message {
	font: 400 16.5px/1.7 var(--kl-sans);
	color: var(--kl-warm-grey);
	margin: 8px 0 0;
}
.kl-404__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

@media ( max-width: 480px ) {
	.kl-404__code { font-size: 64px; }
	.kl-404__actions { flex-direction: column; align-items: stretch; }
}

/* Single event */
.kl-event-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.kl-event-meta__tag {
	font: 600 10.5px var(--kl-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kl-red);
	background: var(--kl-red-tint);
	border-radius: 99px;
	padding: 6px 12px;
}
.kl-event-meta__item { font: 400 14px var(--kl-sans); color: var(--kl-warm-grey-light); }
.kl-event-meta__back { margin-top: 44px; }

/* Single career opportunity */
.kl-career-single__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.kl-career-single__apply { margin-bottom: 32px; }
.kl-career-single__meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 500 13.5px var(--kl-sans);
	color: var(--kl-warm-grey);
	background: var(--kl-cream);
	border: 1px solid var(--kl-border);
	border-radius: 8px;
	padding: 8px 14px;
}
.kl-career-single__meta-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.kl-career-single__meta-item.is-expired { color: var(--kl-red); border-color: var(--kl-red-tint); background: var(--kl-red-tint); }
.kl-career-single__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--kl-border);
}
.kl-career-single__author { display: flex; align-items: center; gap: 10px; font: 500 14px var(--kl-sans); color: var(--kl-warm-grey); }
.kl-career-single__author img { border-radius: 50%; display: block; }

/* Join page — plan picker */
.kl-join__intro { font: 400 15px/1.7 var(--kl-sans); color: var(--kl-warm-grey); max-width: 620px; margin: 0 0 40px; }
.kl-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kl-plan {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kl-border);
	border-radius: 14px;
	padding: 28px 24px;
	background: #fff;
}
.kl-plan--featured { border-color: var(--kl-red); box-shadow: 0 14px 28px -18px rgba(226,58,46,.35); }
.kl-plan__name { font: 600 17px var(--kl-serif); color: var(--kl-ink); margin: 0 0 14px; }
.kl-plan__price { font: 700 26px var(--kl-serif); color: var(--kl-ink); line-height: 1.1; }
.kl-plan__price span { font: 400 13px var(--kl-sans); color: var(--kl-warm-grey-light); }
.kl-plan__extra { font: 600 11.5px var(--kl-sans); color: var(--kl-red); margin-top: 6px; }
.kl-plan__text { font: 400 13.5px/1.7 var(--kl-sans); color: var(--kl-warm-grey); margin: 16px 0 0; flex: 1; }
.kl-plan__cta { width: 100%; margin-top: 22px; padding: 13px 0; text-align: center; }
.kl-join__note { font: 400 14px var(--kl-sans); color: var(--kl-warm-grey-light); margin-top: 40px; }
.kl-join__note a { color: var(--kl-red); font-weight: 600; }

@media (max-width: 900px) {
	.kl-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.kl-plans { grid-template-columns: 1fr; }
}

/* Public Biz Connect directory — CTA merged into the hero, tabs below */
.kl-page-hero__inner--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.kl-page-hero__inner--split .kl-join__intro { margin: 0; max-width: 480px; }
.kl-directory-cta { display: flex; gap: 12px; flex-shrink: 0; }

/* Business Connect's own shortcode wrapper caps itself at 1180px and
   auto-centers by default (a sensible default for a normal-width page) —
   but .kl-content-page runs up to 1400px, so on a wide screen that
   centering left the search box/listings sitting to the right of the
   flush-left tabs above them. Match the tabs' full width instead. */
.lbc-wrap { max-width: none; margin-left: 0; margin-right: 0; }

.lbc-tabs__nav {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--kl-border);
	margin-bottom: 32px;
}
.lbc-tabs__btn {
	font: 600 14px var(--kl-sans);
	color: var(--kl-warm-grey-light);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 12px 6px;
	margin-bottom: -1px;
	cursor: pointer;
}
.lbc-tabs__btn + .lbc-tabs__btn { margin-left: 18px; }
.lbc-tabs__btn:hover { color: var(--kl-ink); }
.lbc-tabs__btn.is-active { color: var(--kl-red); border-bottom-color: var(--kl-red); }
.lbc-tabs__panel { display: none; }
.lbc-tabs__panel.is-active { display: block; }

@media (max-width: 720px) {
	.kl-page-hero__inner--split { flex-direction: column; align-items: stretch; }
	.kl-directory-cta { width: 100%; }
	.kl-directory-cta .kl-btn { flex: 1; }
	.kl-page-hero__inner { padding: 92px 24px 32px; }
	.kl-page-hero::before { width: 220px; height: 220px; top: -12%; right: -10%; }
}

/* Checkout — billing + payment + Place order in the main column, "Your
   order" summary in a sticky panel on the right (see the theme's
   woocommerce/checkout/form-checkout.php override, which pulls the payment
   method list and Place order button out of #order_review and into the
   left column). */
.kl-checkout__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 0 56px;
	align-items: start;
}
.kl-checkout__sidebar { position: sticky; top: 24px; }

/* #customer_details is a WooCommerce ".col2-set" — its own
   woocommerce-layout.css caps ".col-1" (billing) to 48% width to leave
   room for ".col-2" (shipping) beside it. Nothing here ships physical
   goods, so shipping fields are always empty; without this override the
   billing column — and everything below it, since .form-row is 100% of
   its parent — sits at half width for no reason, leaving a large gap
   before the sidebar. */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout #customer_details .col-2:empty { display: none; }

.woocommerce-billing-fields h3 {
	font: 600 20px var(--kl-serif);
	color: var(--kl-ink);
	letter-spacing: -.01em;
	margin: 0 0 24px;
}
#order_review_heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 600 20px var(--kl-serif);
	color: var(--kl-ink);
	letter-spacing: -.01em;
	margin: 0 0 16px;
}
.kl-order-count {
	font: 600 12px var(--kl-sans);
	color: var(--kl-warm-grey);
	background: var(--kl-cream);
	border-radius: 99px;
	padding: 5px 12px;
}

/* Field pairing — First/Last name etc. sit side by side, signup-form
   style. WooCommerce ships ".woocommerce form .form-row-first{width:47%}"
   at the same specificity, so this is a wash on width but needs
   !important on the gap/box-sizing pairing to render as a clean two-up
   row instead of two independently-floated 47% boxes. */
.woocommerce-checkout .form-row { width: 100%; margin-bottom: 18px; box-sizing: border-box !important; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: calc(50% - 9px) !important;
	float: left !important;
	box-sizing: border-box !important;
}
.woocommerce-checkout .form-row-last { float: right !important; }
.woocommerce-checkout .form-row-first::after { content: ''; display: table; clear: both; }

.woocommerce-checkout .form-row label {
	display: block;
	font: 500 13px var(--kl-sans);
	color: var(--kl-warm-grey);
	margin-bottom: 7px;
}
.woocommerce-checkout .form-row label .required { color: var(--kl-red); text-decoration: none; }

/* Base field styling. WooCommerce 11 ships its own
   ".woocommerce form .form-row .input-text" rule using --wc-form-* CSS
   variables — one type-selector (form) more specific than a same-class
   override, so it silently wins without !important here. This is also
   why the select2 country box and the plain text inputs could drift out
   of sync: only one of the two was actually being overridden. */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	font: 400 14.5px var(--kl-sans) !important;
	line-height: normal !important;
	color: var(--kl-ink) !important;
	background: #fff !important;
	border: 1.5px solid var(--kl-border) !important;
	border-radius: 10px !important;
	padding: 13px 16px !important;
	box-sizing: border-box !important;
	transition: border-color .12s ease;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--kl-red) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: auto !important;
	border: 1.5px solid var(--kl-border) !important;
	border-radius: 10px !important;
	padding: 0 !important;
}
.woocommerce-checkout .select2-selection__rendered { padding: 13px 16px !important; font: 400 14.5px var(--kl-sans) !important; color: var(--kl-ink) !important; line-height: normal !important; }
.woocommerce-checkout .select2-selection__arrow { height: 100% !important; right: 10px !important; }
.woocommerce-checkout .password-input { position: relative; display: block; }
.woocommerce-checkout .show-password-input { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

.woocommerce-checkout .create-account { margin-top: 6px; }
.woocommerce-checkout p.create-account label.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 14px var(--kl-sans);
	color: var(--kl-ink);
}

/* Payment methods — laid out as part of the same form flow (a labelled
   section with plain dividers between rows), not a separate boxed-off
   card, so it doesn't feel detached from the billing fields above it. */
.woocommerce-checkout-payment { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--kl-border); }
.woocommerce-checkout-payment h3 { font: 600 18px var(--kl-serif); color: var(--kl-ink); margin: 0 0 18px; }
/* WooCommerce's own woocommerce.css puts a large tinted background on
   #payment itself (".woocommerce-checkout #payment{background:...}", an
   ID selector) — that's the oversized grey card wrapping the whole
   payment + Place order area. Stripped so this section is just plain
   page flow, sized to its actual content. */
.woocommerce-checkout #payment {
	background: none !important;
	border-radius: 0 !important;
}
/* Same ID-selector situation as .payment_box above —
   ".woocommerce-checkout #payment ul.payment_methods" ships its own
   padding/border. */
.woocommerce-checkout .wc_payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: none !important;
	text-align: left;
}
.woocommerce-checkout .wc_payment_method { border-bottom: 1px solid var(--kl-border); padding: 16px 2px; }
.woocommerce-checkout .wc_payment_method:first-child { padding-top: 0; }
.woocommerce-checkout .wc_payment_method:last-child { border-bottom: none; padding-bottom: 0; }
.woocommerce-checkout .wc_payment_method label { font: 600 14px var(--kl-sans); color: var(--kl-ink); }
/* WooCommerce's own woocommerce.css targets this as
   ".woocommerce-checkout #payment div.payment_box" (an ID selector), which
   otherwise beats a plain class override regardless of load order. */
.woocommerce-checkout .payment_box {
	font: 400 12px/1.5 var(--kl-sans);
	color: var(--kl-warm-grey) !important;
	background: var(--kl-cream) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	margin: 10px 0 0 !important;
	width: auto !important;
}
/* Gateway plugins (Paystack, etc.) render their own card-brand/method
   logos and a "Secured by ..." trust badge inside .payment_box — shrunk
   generically since the exact markup is plugin-specific and not something
   this theme controls, but everything in here should read as a small
   aside, not a card-sized block.
   !important is required on the icon sizing specifically: Paystack's own
   get_icon() (woo-paystack/includes/custom-gateways/class-wc-gateway-
   custom-paystack.php) hardcodes `style="height: 40px"` on every <img> it
   outputs, and an inline style attribute always outranks an external
   stylesheet rule regardless of selector specificity — a plain
   `max-height` here was silently losing to that 40px every time. */
.woocommerce-checkout .payment_box img,
.woocommerce-checkout .payment_box svg {
	max-height: 16px !important;
	height: 16px !important;
	width: auto !important;
	vertical-align: middle !important;
	margin: 0 4px 4px 0 !important;
}
.woocommerce-checkout .payment_box > div,
.woocommerce-checkout .payment_box p,
.woocommerce-checkout .payment_box [class*="paystack" i],
.woocommerce-checkout .payment_box [class*="secure" i] {
	padding: 6px 8px !important;
	margin: 4px 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	border-radius: 8px !important;
}
.woocommerce-checkout .payment_box h1,
.woocommerce-checkout .payment_box h2,
.woocommerce-checkout .payment_box h3,
.woocommerce-checkout .payment_box h4,
.woocommerce-checkout .payment_box strong { font-size: 12px !important; }
/* The "added to cart" success notice is emptied out server-side
   (wc_add_to_cart_message_html filter, functions.php — the cart page it
   used to link to is gone) but WooCommerce's notices/success.php template
   still prints the wrapping <div> unconditionally. :empty catches that
   specific case without touching any notice that actually has content
   (validation errors, etc). */
.woocommerce-message:empty { display: none !important; }

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
	list-style: none;
	font: 400 14px/1.6 var(--kl-sans);
	color: var(--kl-warm-grey);
	background: var(--kl-cream);
	border: none !important;
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
}

/* Place order — left-aligned, matching the billing form fields above it,
   and visually separated from the payment method list by its own top
   divider rather than sharing one grey box with it (see the #payment
   strip above). WooCommerce's own
   ".woocommerce-checkout #payment div.form-row{padding:1em}" (another ID
   selector) needs !important to clear, same as everything else here. */
.woocommerce-checkout .form-row.place-order {
	padding: 20px 0 0 !important;
	margin-top: 12px !important;
	border-top: 1px solid var(--kl-border);
	text-align: left;
}
/* The terms checkbox is a ".form-row" (per checkout/terms.php), so it
   inherits the 18px bottom margin from the generic .form-row rule above —
   that's what was pushing "Pay now" well below it instead of sitting
   snugly underneath. Zeroed out here since this is the last thing before
   the button, not a field with another field following it. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px !important; font: 400 13px var(--kl-sans); color: var(--kl-warm-grey-light); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row { margin-bottom: 0 !important; }
/* Checkboxes/radios (the terms-and-conditions checkbox, "Create an
   account?", "Remember me", etc.) must never inherit the generic
   .form-row / .input-text sizing above — without this, a checkbox sitting
   in a ".form-row" gets stretched to a full-width blank box instead of
   staying its natural small size. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	flex: 0 0 auto;
	margin: 2px 8px 0 0 !important;
	padding: 0 !important;
	border-radius: 4px;
	vertical-align: middle;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}
.woocommerce-checkout #place_order,
.woocommerce-checkout .form-row.place-order .button {
	display: inline-flex;
	width: auto;
	background: var(--kl-red);
	color: #fff;
	border: none;
	border-radius: 99px;
	font: 700 14px var(--kl-sans);
	padding: 15px 34px;
	cursor: pointer;
	transition: opacity .12s ease;
}
.woocommerce-checkout #place_order:hover { opacity: .92; }

/* Student Membership's school-ID upload — kotet_checkout_student_id_field()
   in functions.php, shown only when the cart contains that tier. */
.kl-checkout__student-id { display: flex; flex-direction: column; }
.kl-checkout__student-id input[type="file"] {
	font: 400 13.5px var(--kl-sans);
	color: var(--kl-ink);
	border: 1.5px dashed var(--kl-border);
	border-radius: 10px;
	padding: 11px 14px;
	background: #fff;
}
.kl-checkout__student-id-hint {
	font: 400 12.5px var(--kl-sans);
	color: var(--kl-warm-grey-light);
	margin-top: 6px;
}
.kl-checkout__student-id-status {
	font: 600 12.5px var(--kl-sans);
	margin-top: 6px;
}
.kl-checkout__student-id-status.is-uploading { color: var(--kl-warm-grey-light); }
.kl-checkout__student-id-status.is-success { color: var(--kl-ink); }
.kl-checkout__student-id-status.is-error { color: var(--kl-red); }

/* Your order — sticky summary card on the right. Soft shadow instead of a
   flat border for some depth, a small red marker per line item, quantity
   as a little pill instead of bare "× 1" text, and the total as its own
   bold red-tinted strip along the bottom rather than the whole card (or
   just the subtotal row) being tinted — so the total is unmistakably the
   payoff line, not just one more row in a table. */
.kl-checkout__sidebar #order_review {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(26,20,20,.05), 0 16px 36px -20px rgba(26,20,20,.22);
}
/* WooCommerce's own woocommerce.css puts a border + border-radius on
   .shop_table itself, and border-top on nearly every td/th/tfoot
   combination (".woocommerce table.shop_table tfoot th", etc.) — those
   selectors carry more type-selector weight than a same-class-count
   override here, so !important is used throughout this block rather than
   chasing each of core's variants individually. */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot { display: block !important; }
.woocommerce-checkout-review-order-table tbody tr,
.woocommerce-checkout-review-order-table tfoot tr {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 16px 22px;
}
.woocommerce-checkout-review-order-table tbody tr { border-bottom: 1px solid var(--kl-border) !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	font: 400 14px var(--kl-sans);
	color: var(--kl-warm-grey);
	border: none !important;
	padding: 0 !important;
	min-width: 0;
	overflow-wrap: break-word;
}
.woocommerce-checkout-review-order-table .product-name {
	color: var(--kl-ink);
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.5;
	padding-left: 15px !important;
	position: relative;
}
.woocommerce-checkout-review-order-table .product-name::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--kl-red);
}
.woocommerce-checkout-review-order-table .product-total {
	flex: 0 1 auto;
	white-space: normal;
	text-align: right;
	font-weight: 500;
	color: var(--kl-ink);
}
.woocommerce-checkout-review-order-table .product-quantity {
	display: inline-block;
	font: 600 11px var(--kl-sans);
	color: var(--kl-warm-grey);
	background: var(--kl-cream);
	border-radius: 99px;
	padding: 2px 8px;
	margin-left: 4px;
	vertical-align: middle;
}
.woocommerce-checkout-review-order-table tfoot { display: block !important; }
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) {
	padding: 10px 22px;
}
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th,
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) td { font-size: 13px; color: var(--kl-warm-grey-light); }
.woocommerce-checkout-review-order-table tfoot th { flex: 1 1 auto; }
.woocommerce-checkout-review-order-table tfoot td { flex: 0 1 auto; text-align: right; }
.woocommerce-checkout-review-order-table tfoot tr:first-child { padding-top: 16px !important; border-top: 1px dashed var(--kl-border); }
.woocommerce-checkout-review-order-table tfoot th { font-weight: 500 !important; }
.woocommerce-checkout-review-order-table .order-total {
	background: var(--kl-red-tint);
	padding: 18px 22px !important;
	margin-top: 8px;
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	font: 700 20px var(--kl-serif) !important;
	color: var(--kl-ink);
}

@media (max-width: 900px) {
	.kl-checkout__grid { grid-template-columns: 1fr; }
	.kl-checkout__sidebar { position: static; margin-top: 40px; }
}

/* Thank-you / order-received page */
.kl-thankyou { max-width: 620px; margin: 0 auto; text-align: center; }
.kl-thankyou__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	background: var(--kl-red);
	color: #fff;
}
.kl-thankyou__icon svg { width: 26px; height: 26px; }
.kl-thankyou__title { font: 700 26px var(--kl-serif); color: var(--kl-ink); letter-spacing: -.01em; margin: 0 0 10px; }
.kl-thankyou__body { font: 400 15px/1.7 var(--kl-sans); color: var(--kl-warm-grey); margin: 0 0 32px; }
.kl-thankyou__summary {
	text-align: left;
	background: #fff;
	border: 1px solid var(--kl-border);
	border-radius: 14px;
	padding: 6px 22px;
	margin-bottom: 28px;
}
.kl-thankyou__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--kl-border);
	font: 400 14px var(--kl-sans);
	color: var(--kl-warm-grey);
}
.kl-thankyou__summary-row strong { color: var(--kl-ink); font-weight: 600; }
.kl-thankyou__summary-row:last-child { border-bottom: none; }
.kl-thankyou__summary-row--total {
	font: 700 17px var(--kl-serif) !important;
	color: var(--kl-ink);
}
.kl-thankyou__summary-row--total strong { font: 700 17px var(--kl-serif); color: var(--kl-ink); }
.kl-thankyou__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.kl-thankyou .woocommerce-notice--error {
	font: 400 14px/1.6 var(--kl-sans);
	color: var(--kl-warm-grey);
	background: var(--kl-cream);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 20px;
}

/* Native WooCommerce order-details/billing-address blocks that render
   below our redesigned summary (via the woocommerce_thankyou action) —
   restyled just enough that they read as part of the same page instead of
   dropping back to plain default WooCommerce tables. */
.kl-thankyou .woocommerce-order-details,
.kl-thankyou .woocommerce-customer-details { margin-top: 40px; text-align: left; }
.kl-thankyou .woocommerce-order-details__title,
.kl-thankyou .woocommerce-column__title {
	font: 600 18px var(--kl-serif) !important;
	color: var(--kl-ink);
	letter-spacing: -.01em;
	margin: 0 0 16px !important;
}
.kl-thankyou table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse !important;
	border: 1px solid var(--kl-border) !important;
	border-radius: 12px !important;
	overflow: hidden;
}
.kl-thankyou table.woocommerce-table--order-details th,
.kl-thankyou table.woocommerce-table--order-details td {
	font: 400 14px var(--kl-sans) !important;
	color: var(--kl-warm-grey);
	border: none !important;
	border-bottom: 1px solid var(--kl-border) !important;
	padding: 12px 16px !important;
}
.kl-thankyou table.woocommerce-table--order-details th { font-weight: 600 !important; color: var(--kl-ink); }
.kl-thankyou table.woocommerce-table--order-details tr:last-child td,
.kl-thankyou table.woocommerce-table--order-details tfoot tr:last-child th,
.kl-thankyou table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: none !important; }
.kl-thankyou address {
	font: 400 14px/1.7 var(--kl-sans);
	color: var(--kl-warm-grey);
	border: 1px solid var(--kl-border);
	border-radius: 12px;
	padding: 16px;
	font-style: normal;
}

@media (max-width: 560px) {
	.kl-thankyou__actions { flex-direction: column; }
	.kl-thankyou__actions .kl-btn { width: 100%; }
}

/* Login page */
.kl-login { max-width: 420px; margin: 0 auto; }
.kl-login__error {
	font: 500 13.5px/1.6 var(--kl-sans);
	color: #a13327;
	background: var(--kl-red-tint);
	border: 1px solid var(--kl-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 20px;
}
.kl-login__field { margin-bottom: 18px; }
.kl-login__field label {
	display: block;
	font: 500 13px var(--kl-sans);
	color: var(--kl-warm-grey);
	margin-bottom: 7px;
}
.kl-login__field input[type="text"],
.kl-login__field input[type="password"] {
	width: 100%;
	font: 400 14.5px var(--kl-sans);
	color: var(--kl-ink);
	background: #fff;
	border: 1.5px solid var(--kl-border);
	border-radius: 10px;
	padding: 13px 16px;
	transition: border-color .12s ease;
}
.kl-login__field input:focus { outline: none; border-color: var(--kl-red); }
.kl-login__password { position: relative; }
.kl-login__password input { padding-right: 46px; }
.kl-login__toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--kl-warm-grey-light);
	cursor: pointer;
	padding: 4px;
	display: flex;
}
.kl-login__toggle:hover { color: var(--kl-ink); }
.kl-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
	font: 400 13.5px var(--kl-sans);
}
.kl-login__remember { display: flex; align-items: center; gap: 7px; color: var(--kl-warm-grey); }
.kl-login__row a { color: var(--kl-red); font-weight: 600; }
.kl-login__submit { width: 100%; padding: 14px 0; }
.kl-login__note { text-align: center; font: 400 14px var(--kl-sans); color: var(--kl-warm-grey-light); margin-top: 28px; }
.kl-login__note a { color: var(--kl-red); font-weight: 600; }

@media (max-width: 480px) {
	.kl-login { max-width: 100%; }
}

/* Category/tag/blog archive pagination */
.kl-archive-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.kl-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 99px;
	font: 600 13px var(--kl-sans);
	color: var(--kl-ink);
	border: 1px solid var(--kl-border);
}
.kl-archive-pagination .page-numbers.current { background: var(--kl-red); border-color: var(--kl-red); color: #fff; }
.kl-archive-pagination .page-numbers.dots { border: none; }
.kl-archive-pagination a.page-numbers:hover { border-color: var(--kl-red); color: var(--kl-red); }

/* WooCommerce single product page — used as-is (no theme template override)
   for the plain "buy a membership" flow, but also for WooCommerce
   Subscriptions' switch/upgrade flow (?switch-subscription=…), so it needs
   the same polish as everywhere else rather than looking like a bare
   default WooCommerce page. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
@media (max-width: 700px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce div.product .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kl-cream) !important;
	border-top-color: var(--kl-ink) !important;
	color: var(--kl-ink) !important;
	border-radius: 10px;
	padding: 14px 18px !important;
	font: 400 14px var(--kl-sans);
}
.woocommerce div.product div.images,
.woocommerce div.product div.images img {
	border-radius: 14px;
}
.woocommerce div.product div.images {
	overflow: hidden;
	background: var(--kl-cream);
}
.woocommerce div.product .product_title { font: 700 26px var(--kl-serif); color: var(--kl-ink); margin: 0 0 6px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font: 700 24px var(--kl-serif) !important;
	color: var(--kl-ink) !important;
}
.woocommerce div.product form.cart { margin-top: 20px !important; }
.woocommerce div.product form.variations_form table.variations {
	margin-bottom: 16px !important;
}
.woocommerce div.product form.variations_form table.variations th {
	font: 600 13px var(--kl-sans) !important;
	color: var(--kl-ink) !important;
	padding: 0 12px 0 0 !important;
}
.woocommerce div.product form.variations_form table.variations select {
	width: 100%;
	max-width: 320px;
	padding: 10px 14px;
	border: 1px solid var(--kl-border);
	border-radius: 8px;
	font: 400 14px var(--kl-sans);
	color: var(--kl-ink);
	background: #fff;
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 18px; }
.woocommerce div.product .reset_variations {
	font: 500 13px var(--kl-sans) !important;
	color: var(--kl-warm-grey-light) !important;
}
.woocommerce div.product .reset_variations:hover { color: var(--kl-red) !important; }
.woocommerce div.product form.cart .button,
.woocommerce div.product .woocommerce-variation-add-to-cart .button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--kl-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 99px !important;
	padding: 13px 28px !important;
	font: 700 13.5px var(--kl-sans) !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: opacity .12s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .woocommerce-variation-add-to-cart .button:hover,
.woocommerce #respond input#submit:hover { opacity: .92; }
.woocommerce div.product .product_meta {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--kl-border);
	font: 400 13px var(--kl-sans);
	color: var(--kl-warm-grey-light);
}
.woocommerce div.product .product_meta a { color: var(--kl-warm-grey-light); }
.woocommerce div.product .product_meta a:hover { color: var(--kl-red); }