/*
Theme Name: CPE Prime
Theme URI: https://cpeprime.com
Author: Exputo Inc.
Author URI: https://exputo.com
Description: Purpose-built block theme for CPE Prime. Design tokens live in theme.json. Site behaviour lives in the separate cpeprime-core plugin, not here.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.18.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cpeprime
Tags: full-site-editing, block-patterns, e-commerce, accessibility-ready
*/

/*
 * Keep this file small on purpose. Anything expressible in theme.json belongs
 * in theme.json, because that is what the Site Editor reads and writes.
 * What is left here is what theme.json genuinely cannot express.
 */

/* ---------- Header ---------------------------------------------------- */
/* Fixed height, never sticky, never shrinking. The old Divi header grew when
   the nav wrapped and the body offset did not follow, which is what put the
   menu on top of the page content. Nothing here is position:fixed, so that
   failure mode cannot recur. */
.cpe-header .wp-block-navigation {
	max-width: 100%;
}
.cpe-header .wp-block-navigation__responsive-container-open,
.cpe-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}
.cpe-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--highlight);
}
.cpe-header__tools .wc-block-mini-cart__button,
.cpe-header__tools .wc-block-customer-account {
	color: var(--wp--preset--color--base);
}
.cpe-header__tools svg {
	fill: currentColor;
}

/* ---------- Hero ------------------------------------------------------ */
/* The cream disc is drawn in CSS so the photograph stays a transparent
   cutout and the layout keeps working at every width. */
.cpe-hero__figure {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 380px;
}
.cpe-hero__figure::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	aspect-ratio: 1;
	max-width: 460px;
	margin: 0 auto;
	border-radius: 50%;
	background: #f6f0e4;
}
.cpe-hero__photo {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 520px;
}
.cpe-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Cards and badges ------------------------------------------ */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .cpe-card {
	height: 100%;
}
.cpe-card {
	background: var(--wp--preset--color--base);
	border-style: solid;
	height: 100%;
}
.cpe-card .cpe-price {
	margin: 0;
	line-height: 1.1;
}
/* inline-block, not inline-flex: as a flex container each <a> and the ", "
   separator become flex items, which breaks inline text flow and opens a gap
   before the comma on multi-term badges. */
.cpe-badge {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}
.cpe-badges {
	gap: 0.5rem;
}

/* ---------- Credentials strip ----------------------------------------- */
.cpe-credentials p {
	margin: 0;
}

/* ---------- Footer ---------------------------------------------------- */
.cpe-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--highlight);
}

/* ---------- Responsive ------------------------------------------------ */
/* Card grids size themselves: one column until a card can be 260px wide,
   then as many as fit. One rule instead of a list of breakpoints, and it
   stays right whether the grid runs full width, sits beside the 270px
   filter rail, or shares a row with the buy panel. */
.wc-block-product-template__responsive {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* WordPress stacks columns below 782px. Between 782px and 1100px a five or
   four column row gets too tight, so drop to two per row. The catalog and
   the single course are excluded: their columns are a sidebar plus a body,
   not a row of equals, and 50/50 starves the body — on the catalog it left
   the results half the width of the filters. */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns.alignwide:not(.cpe-catalog):not(.cpe-product) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.alignwide:not(.cpe-catalog):not(.cpe-product) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
		flex-grow: 0;
	}
}

/* The header brand and the tools fit one row once the wordmark is small
   enough. Left alone they wrap and the header doubles in height, which
   costs 80px above the fold on every phone. */
@media (max-width: 600px) {
	.cpe-header > .wp-block-group {
		gap: var(--wp--preset--spacing--30) !important;
	}
	.cpe-header .wp-block-site-title {
		font-size: 0.875rem;
		letter-spacing: 0.12em;
	}
	.cpe-header .cpe-header__tools {
		gap: var(--wp--preset--spacing--30) !important;
	}
}

@media (max-width: 781px) {
	.cpe-hero__figure {
		min-height: 0;
		margin-top: var(--wp--preset--spacing--50);
	}
	.cpe-hero__figure::before {
		max-width: 340px;
	}
}

/* ---------- Page head band -------------------------------------------- */
/* The navy band at the top of a content page, the catalog, and every category
   and attribute archive. On the archives the heading and the intro come from
   core/query-title and core/term-description, so a category description typed
   in the admin appears here with no template change. */
.cpe-pagehead .wp-block-woocommerce-breadcrumbs {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.7);
}
.cpe-pagehead .wp-block-woocommerce-breadcrumbs a,
.cpe-pagehead .wp-block-term-description a {
	color: var(--wp--preset--color--highlight);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-pagehead .wp-block-woocommerce-breadcrumbs a:hover,
.cpe-pagehead .wp-block-term-description a:hover {
	color: var(--wp--preset--color--base);
}
/* term-description prints an empty <div> on the shop page and on any term with
   no description. Left alone that adds a block gap and the band looks padded
   wrong on some archives and not others. */
.cpe-pagehead .wp-block-term-description:empty {
	display: none;
}
.cpe-pagehead .wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* ---------- Seminar date ---------------------------------------------- */
/* Rendered by the cpeprime/seminar-date block in the cpeprime-core plugin.
   The block prints nothing at all for a product with no date, so none of this
   applies to a self-study course sharing the same card template. */
/* A chip, not a line of bold text. On a seminar card the date is the fact
   people scan for, and it has to separate from the title without competing
   with it — so it gets its own shape rather than a heavier weight.

   Gold at full strength is 1.50:1 on white and can never carry text, so this
   is a gold tint behind ink, with the deep-gold border and icon doing the
   colour work. Measured 13.9:1. */
.cpe-seminar-date {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45em;
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(138, 97, 0, 0.3);
	border-radius: 999px;
	background: rgba(255, 205, 0, 0.16);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
}
.cpe-seminar-date__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--highlight-deep);
}
.cpe-seminar-date__prefix {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
/* A past seminar is normally hidden by the nightly job, so this only shows in
   the window between the event and the next run, or on a direct link. */
.cpe-seminar-date__past {
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
}

/* On the single course page the date is a headline fact, not a card label. */
.cpe-product__body .cpe-seminar-date,
.cpe-buypanel .cpe-seminar-date {
	padding: 0.5rem 1rem;
	font-size: 1rem;
}

/* ---------- Buy panel: Add to cart + Buy Now -------------------------- */
/* WooCommerce's form holds the quantity box and Add to cart; Edwiser appends
   its Buy Now as a plain link after them. Two rows: quantity beside a full-
   width Add to cart, then Buy Now across the panel as the outline partner —
   the same pairing the catalog cards use. (One row does not fit in 320px.)
   The group-purchase checkbox Edwiser puts first keeps its own line. */
.cpe-buypanel form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.6rem;
}
.cpe-buypanel form.cart > .wdm_edwiser_bulk_purchase {
	flex-basis: 100%;
}
.cpe-buypanel form.cart .quantity,
.cpe-buypanel form.cart .single_add_to_cart_button {
	margin: 0;
}
.cpe-buypanel form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
}
/* The quantity input defaulted to 15px regular in a 55px box; match the
   button beside it. */
.cpe-buypanel form.cart .quantity .qty {
	min-width: 4.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--contrast);
}
.cpe-buypanel form.cart a.wi_btn_buy_now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-basis: 100%;
	margin: 0 !important; /* Edwiser's stylesheet sets a left margin */
	padding: calc(0.85rem - 2px) calc(1.5rem - 2px);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.cpe-buypanel form.cart a.wi_btn_buy_now:hover,
.cpe-buypanel form.cart a.wi_btn_buy_now:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---------- Product summary ------------------------------------------- */
/* Seminar excerpts are Divi-era markup: the venue, street, city and phone are
   each their own <h3>, stacked. They are address lines, not section titles, and
   at heading size they shout and push the buy panel down the page. Restyle them
   as body copy here rather than rewriting 130 product descriptions — the markup
   is wrong but the words are right, and this is the cheap half of the fix. */
.wc-block-components-product-summary :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: inherit;
}
/* The first line is normally the date, which is worth keeping bold. */
.wc-block-components-product-summary > :first-child:where(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
}
.wc-block-components-product-summary p {
	margin: 0;
}
.wc-block-components-product-summary {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* ---------- Directions link ------------------------------------------- */
/* Rendered by cpeprime/seminar-directions. Prints nothing without an address,
   so virtual seminars and self-study courses never see it. */
.cpe-directions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
}
.cpe-directions__venue {
	font-weight: 700;
}
/* With the venue shown (the product template turns it on), the block is the
   seminar's "where": name, address, then the link — each on its own line. */
.cpe-directions--venue {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15em;
}
.cpe-directions--venue .cpe-directions__address {
	color: var(--wp--preset--color--muted);
}
.cpe-directions--venue .cpe-directions__link {
	margin-top: 0.25em;
	font-size: 0.9375rem;
}
.cpe-directions__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-directions__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

/* ---------- Long words in prose --------------------------------------- */
/* An email address or a URL is one unbreakable word, and several on the
   policy pages are wider than a phone screen. Without this they push the
   whole page sideways rather than wrapping. */
main :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* ---------- Focus ----------------------------------------------------- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--highlight);
	outline-offset: 2px;
}

/* ---------- Layout seams ---------------------------------------------- */
/* Full-bleed sections must sit flush against the header and the footer.
   WordPress otherwise applies block-gap margins to the root-level main and
   footer, which shows as a white strip on a dark section. */
main.wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}
.cpe-footer {
	margin-block-start: 0;
}

/* A panel is a card frame without the card behaviour: same white ground,
   same border, same equal-height stretch across a row, but its contents flow
   normally. Use it for prose. `.cpe-card` below turns the group into a flex
   column to pin a call to action to the bottom, and that fights WordPress's
   constrained layout, which centres and shrink-wraps every child. */
.cpe-panel {
	background: var(--wp--preset--color--base);
	border-style: solid;
	height: 100%;
}

/* ---------- Card interiors -------------------------------------------- */
/* Equal-height cards are not enough on their own: the price and the call to
   action have to sit on a common baseline no matter how many lines the title
   or the badges take. */
.cpe-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
/* !important is deliberate: the block editor writes an inline margin-top on
   this group, and an inline style beats a stylesheet rule. The alternative is
   dropping the margin from the pattern, which would then collapse the gap for
   anyone who reuses the card outside a fixed-height row. */
.cpe-card > :last-child {
	margin-top: auto !important;
}

/* ---------- Product Collection cards ---------------------------------- */
/* Reading order on a card is title, then the facts about it, then the price,
   then the actions. The title is the largest thing on the card; badges are
   labels and sized like labels.

   A grid, not a flex column, because the card ends in two actions side by
   side — WooCommerce's Add to cart button and the Buy Now link Edwiser injects
   after it as a loose sibling — and they have to sit on one row, pinned to the
   bottom so every card in a row shares a baseline. Rows 1–6 hold whatever the
   template puts there (title, date, badges, price: four or five items), row 7
   is the spring that takes up any slack in an equal-height row, and row 8 is
   the action row. Row gaps are done with margins so the empty rows cost
   nothing. */
.wp-block-woocommerce-product-collection .wc-block-product {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-rows: repeat(6, auto) minmax(0, 1fr) auto;
	gap: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 6px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	text-align: left;
}
.wp-block-woocommerce-product-collection .wc-block-product > * {
	grid-column: 1 / -1;
	margin: 0 0 0.75rem;
	text-align: left;
}
.wp-block-woocommerce-product-collection .wp-block-post-title {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}
.wp-block-woocommerce-product-collection .cpe-badges {
	margin-bottom: 0.9rem;
}
/* The date chip is inline-flex, which a grid blockifies and stretches to the
   full column. Keep it shrink-wrapped. */
.wp-block-woocommerce-product-collection .cpe-seminar-date {
	justify-self: start;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary-dark);
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-size: inherit;
}
/* The action row. */
.wp-block-woocommerce-product-collection .wc-block-product > .wp-block-woocommerce-product-button {
	grid-column: 1;
	grid-row: 8;
	margin: 0;
	align-self: end;
}
.wp-block-woocommerce-product-collection .wc-block-product > br {
	display: none;
}
/* Edwiser's Buy Now: same size as Add to cart, drawn as the secondary of the
   pair. It adds the course and goes straight to checkout. */
.wp-block-woocommerce-product-collection .wc-block-product > a:last-child {
	grid-column: 2;
	grid-row: 8;
	justify-self: start;
	align-self: end;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0 0 0 0.5rem;
	padding: calc(0.9em - 2px) calc(1.85em - 2px);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.65;
	text-decoration: none;
	white-space: nowrap;
}
.wp-block-woocommerce-product-collection .wc-block-product > a:last-child:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ---------- Course catalog -------------------------------------------- */
/* Filter group headings come out of WooCommerce as H3, which inherits the
   34px serif heading scale. In a 270px rail they need to read as labels. */
.cpe-catalog__rail .wp-block-woocommerce-product-filter-attribute > .wp-block-heading,
.cpe-catalog__rail .wp-block-woocommerce-product-filter-price > .wp-block-heading {
	margin: 0 0 0.5rem;
	padding-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	border-top: 1px solid var(--wp--preset--color--line);
}
.cpe-catalog__rail .wp-block-woocommerce-product-filter-attribute:first-of-type > .wp-block-heading {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 0;
}
/* Course Author has 32 terms and Field of Study 30. Without a cap the rail
   runs to ~2200px and the filters scroll off past the results. */
.cpe-catalog__rail .wc-block-product-filter-checkbox-list {
	max-height: 260px;
	overflow-y: auto;
	padding-right: 4px;
}
.cpe-catalog__rail .wc-block-product-filter-checkbox-list label,
.cpe-catalog__rail .wc-block-product-filter-checkbox-list li {
	font-size: 0.875rem;
	line-height: 1.4;
}


/* WooCommerce moves the filters into its own overlay below 660px, so down
   there the rail is just a "Filters" button and can take a full row. From
   661px to 781px WordPress would stack it, which puts a 1600px column of
   checkboxes above the first course; keep it a sidebar through that band. */
@media (max-width: 660px) {
	.cpe-catalog .cpe-catalog__rail {
		flex-basis: 100% !important;
	}
}
@media (min-width: 661px) and (max-width: 781px) {
	.cpe-catalog.wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.cpe-catalog > .cpe-catalog__rail {
		flex-basis: 250px !important;
		flex-grow: 0;
	}
	.cpe-catalog > .wp-block-column:not(.cpe-catalog__rail) {
		flex-basis: auto !important;
		flex-grow: 1;
	}
}

/* ---------- Single course --------------------------------------------- */
/* Spec panel: label left, value right, hairline between. This is what
   replaces the SKU field, which currently holds five concatenated values
   ("AC-128.26 | Credits: 32 | Taxes | ...") and so cannot be shown cleanly
   until the product data is cleaned up. */
.cpe-specs > .wp-block-post-terms {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9375rem;
}
.cpe-specs > .wp-block-post-terms:last-child {
	border-bottom: 0;
}
.cpe-specs .wp-block-post-terms__prefix {
	flex-shrink: 0;
	color: var(--wp--preset--color--muted);
}
.cpe-specs .wp-block-post-terms a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-align: right;
	text-decoration: none;
}
.cpe-specs .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Badges are post-terms blocks, so their term links inherit link colour. */
.cpe-badge a {
	color: inherit;
	text-decoration: none;
}
.cpe-badge .wp-block-post-terms__suffix {
	margin-left: 0.25em;
}

.cpe-product__buy {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	align-self: flex-start;
}
.cpe-instant {
	margin: 0;
	padding: 0.85rem 0.9rem;
	border-radius: 6px;
	line-height: 1.5;
}
.cpe-product__author a {
	text-decoration: none;
}

/* The buy panel is a fixed 372px, so below about 900px the description
   column gets too thin to read and the two have to stack. Stacking them
   naively buries the price under the whole description — 4000px down on a
   phone. display:contents dissolves both column boxes so their children
   become one flex column, and the details tabs are ordered last. Result:
   badges, title, summary, author, price and Add to cart, then the tabs. */
@media (max-width: 899px) {
	.cpe-product {
		display: flex;
		flex-direction: column;
		gap: 0; /* the columns' block gap would otherwise sit between every child */
	}
	.cpe-product > .wp-block-column {
		display: contents;
	}
	/* Reading order once everything is one column: the facts and the price
	   first, then the schedule, the note and the author, then the tabs — so
	   Add to cart is not a full seminar timetable away on a phone. */
	.cpe-product .cpe-buypanel {
		order: 1;
		margin-top: var(--wp--preset--spacing--40);
	}
	.cpe-product :is(.cpe-schedule, .cpe-seminar-note, .cpe-product__author, .cpe-companions) {
		order: 2;
	}
	.cpe-product .cpe-schedule {
		margin-top: var(--wp--preset--spacing--50);
	}
	.cpe-product .cpe-product__details {
		order: 3;
	}
	.cpe-product__buy {
		position: static;
	}
}

/* ---------- Cart, checkout, account ----------------------------------- */
/* Three pages, three different renderers: the cart and the account panel are
   Edwiser Bridge's React components (Mantine UI, colours hard-coded in its
   stylesheet, no variables to hook), the checkout is WooCommerce's classic
   shortcode form. None of them know about theme.json, so this is the one
   place the theme styles someone else's markup directly. Every rule is scoped
   to .cpe-commerce, the wrapper the three page templates put around the
   content, so nothing here leaks into the rest of the site — and it all has
   scoped again to the component's own id (#eb-cart, #eb-user-account), which
   outranks anything Edwiser writes with classes — no !important needed. */
.cpe-pagehead--compact h1 {
	font-size: var(--wp--preset--font-size--x-large);
}
/* WooCommerce widens .wp-block-post-title on its own pages; keep it in the
   content column with the eyebrow. */
.cpe-pagehead--compact > .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

/* -- Shared form controls -------------------------------------------- */
.cpe-commerce :is(.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, #eb-user-account input, #eb-user-account textarea, #eb-user-account select, #eb-cart input):not(.eb-cart__item-quantity-input) {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.4;
}
.cpe-commerce :is(.woocommerce input, .woocommerce textarea, .woocommerce select, #eb-user-account input, #eb-user-account textarea, #eb-user-account select, #eb-cart input):focus-visible {
	outline: 3px solid var(--wp--preset--color--highlight);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.cpe-commerce :is(.woocommerce form .form-row label, #eb-user-account label, #eb-cart label) {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.cpe-commerce .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
/* Buttons, whoever rendered them. */
.cpe-commerce :is(#eb-cart .eb-btn, #eb-user-account .eb-btn, #eb-user-account .eb-profile__btn, .woocommerce button.button, .woocommerce a.button, #place_order) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.85rem 1.75rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cpe-commerce :is(#eb-cart .eb-btn, #eb-user-account .eb-btn, #eb-user-account .eb-profile__btn, .woocommerce button.button, .woocommerce a.button, #place_order):hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}
.cpe-commerce :is(#eb-cart .eb-btn, #eb-user-account .eb-btn, #eb-user-account .eb-profile__btn, .woocommerce button.button, .woocommerce a.button, #place_order):disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.cpe-commerce #eb-user-account .eb-profile__btn--secondary,
.cpe-commerce #eb-cart .eb-btn__apply {
	background: transparent;
	color: var(--wp--preset--color--primary);
}
.cpe-commerce #eb-user-account .eb-profile__btn--secondary:hover,
.cpe-commerce #eb-cart .eb-btn__apply:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
/* Text links in these panels: Edwiser paints them orange. */
.cpe-commerce :is(#eb-cart, #eb-user-account, .woocommerce) a:not(.button, .eb-btn, .wp-block-button__link, .eb-cart__item-remove, .eb-profile__logout) {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WooCommerce's notices, both the classic ones and the newer banner. */
.cpe-commerce .wc-block-components-notice-banner {
	margin: 0 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
}
.cpe-commerce .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--accent);
}
.cpe-commerce .wc-block-components-notice-banner > svg {
	background: var(--wp--preset--color--primary);
	fill: var(--wp--preset--color--base);
}
.cpe-commerce .wc-block-components-notice-banner.is-error > svg {
	background: var(--wp--preset--color--accent);
}

/* -- Cart (Edwiser React) -------------------------------------------- */
.cpe-commerce #eb-cart .eb-cart__wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}
.cpe-commerce #eb-cart .eb-cart__left,
.cpe-commerce #eb-cart .eb-cart__right {
	width: auto;
	max-width: none;
	padding: 0;
	border: 0;
}
/* The component prints its own "Cart" heading; the page already has one. */
.cpe-commerce #eb-cart .eb-cart__left-header .eb-title {
	display: none;
}
.cpe-commerce #eb-cart .eb-cart__total-items {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
}
.cpe-commerce #eb-cart .eb-cart__item {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
}
/* Courses have no product photos, so the thumbnail is WooCommerce's grey
   placeholder tile. Drop it rather than show a picture of nothing. */
.cpe-commerce #eb-cart .eb-cart__item-image:has(img[src*="placeholder"]) {
	display: none;
}
.cpe-commerce #eb-cart .eb-cart__item-category {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.cpe-commerce #eb-cart .eb-cart__item-title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary-dark);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.cpe-commerce #eb-cart .eb-cart__item-content-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}
.cpe-commerce #eb-cart .eb-cart__item-content {
	max-width: none;
}
.cpe-commerce #eb-cart a.eb-cart__item-title {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.cpe-commerce #eb-cart a.eb-cart__item-title:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.cpe-commerce #eb-cart .eb-cart__item-price {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}
.cpe-commerce #eb-cart .eb-cart__item-remove {
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.cpe-commerce #eb-cart .eb-cart__item-quantity-btn {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	cursor: pointer;
}
.cpe-commerce #eb-cart .eb-cart__item-quantity-btn:hover {
	border-color: var(--wp--preset--color--primary);
}
.cpe-commerce #eb-cart .eb-cart__item-quantity-input {
	width: 3rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	text-align: center;
	font-weight: 700;
}
.cpe-commerce #eb-cart .eb-cart__item-subtotal {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary-dark);
}
/* Order summary panel */
.cpe-commerce #eb-cart .eb-cart__total {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 6px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}
.cpe-commerce #eb-cart .eb-cart__total-top,
.cpe-commerce #eb-cart .eb-cart__total-bottom {
	padding: 0;
	background: transparent;
}
.cpe-commerce #eb-cart .eb-cart__total .eb-title,
.cpe-commerce #eb-cart .eb-cart__total h2,
.cpe-commerce #eb-cart .eb-cart__total h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-commerce #eb-cart .eb-cart__total-bottom {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}
.cpe-commerce #eb-cart .eb-btn__checkout {
	width: 100%;
	margin-top: var(--wp--preset--spacing--30);
}
.cpe-commerce #eb-cart .mantine-Accordion-item {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}
.cpe-commerce #eb-cart .mantine-Accordion-control {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 899px) {
	.cpe-commerce #eb-cart .eb-cart__wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
	.cpe-commerce #eb-cart .eb-cart__total {
		position: static;
	}
}

/* -- Checkout (WooCommerce classic form) ------------------------------ */
/* WooCommerce caps its wrapper at 1000px and leaves it flush left. Centre it
   instead: a form plus a 400px order panel reads best around this width. */
.cpe-commerce--checkout .woocommerce {
	max-width: 1040px;
	margin: 0 auto;
}
.cpe-commerce--checkout .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
.cpe-commerce .woocommerce-info,
.cpe-commerce .woocommerce-message,
.cpe-commerce .woocommerce-error {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
}
.cpe-commerce .woocommerce-error {
	border-left-color: var(--wp--preset--color--accent);
}
.cpe-commerce .woocommerce-info::before,
.cpe-commerce .woocommerce-message::before,
.cpe-commerce .woocommerce-error::before {
	display: none;
}
.cpe-commerce--checkout .woocommerce form.checkout_coupon {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}
/* Two columns: your details on the left, the order on the right. The right
   column sticks, so the total and Place order stay in view while the form
   is being filled. WooCommerce's own markup is details, then heading, then
   review, all siblings — hence the explicit grid placement. */
.cpe-commerce--checkout .woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	grid-template-rows: auto auto 1fr;
	column-gap: var(--wp--preset--spacing--60);
	align-items: start;
}
.cpe-commerce--checkout .woocommerce form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}
.cpe-commerce--checkout .woocommerce form.checkout > #customer_details {
	grid-column: 1;
	grid-row: 2 / span 2;
}
.cpe-commerce--checkout .woocommerce form.checkout > #order_review_heading {
	grid-column: 2;
	grid-row: 2;
	margin: 0 0 0.75rem;
}
.cpe-commerce--checkout .woocommerce form.checkout > #order_review {
	grid-column: 2;
	grid-row: 3;
	position: sticky;
	top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 6px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}
/* Billing and "additional information" stack inside the left column instead
   of splitting it in half. */
.cpe-commerce--checkout .woocommerce #customer_details .col-1,
.cpe-commerce--checkout .woocommerce #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}
.cpe-commerce--checkout .woocommerce #customer_details .col-2 {
	margin-top: var(--wp--preset--spacing--50);
}
.cpe-commerce--checkout .woocommerce :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) > h3,
.cpe-commerce--checkout .woocommerce #order_review_heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-commerce--checkout .woocommerce .form-row {
	margin: 0 0 1rem;
	padding: 0;
}
.cpe-commerce--checkout .woocommerce .form-row label {
	display: block;
	margin-bottom: 0.3rem;
}
.cpe-commerce--checkout .woocommerce .form-row-first,
.cpe-commerce--checkout .woocommerce .form-row-last {
	float: none;
	width: 100%;
}
@media (min-width: 600px) {
	.cpe-commerce--checkout .woocommerce .woocommerce-billing-fields__field-wrapper,
	.cpe-commerce--checkout .woocommerce .woocommerce-additional-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}
	.cpe-commerce--checkout .woocommerce .form-row {
		grid-column: 1 / -1;
	}
	.cpe-commerce--checkout .woocommerce .form-row-first {
		grid-column: 1;
	}
	.cpe-commerce--checkout .woocommerce .form-row-last {
		grid-column: 2;
	}
}
/* select2 dropdowns (country, state) sized to match the text inputs */
.cpe-commerce .woocommerce form .form-row .select2-container .select2-selection--single {
	height: auto;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}
.cpe-commerce .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}
.cpe-commerce .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
}
/* Order table */
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table :is(th, td) {
	padding: 0.65rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table thead th {
	padding-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table :is(th, td):last-child {
	text-align: right;
	white-space: nowrap;
}
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}
.cpe-commerce--checkout .woocommerce .woocommerce-checkout-review-order-table tfoot .order-total :is(th, td) {
	padding-top: 0.9rem;
	border-bottom: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary-dark);
}
/* Payment */
.cpe-commerce--checkout .woocommerce #payment {
	background: transparent;
	border-radius: 0;
}
.cpe-commerce--checkout .woocommerce #payment .wc_payment_methods {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cpe-commerce--checkout .woocommerce #payment .wc_payment_method {
	padding: 0.5rem 0;
	list-style: none;
}
.cpe-commerce--checkout .woocommerce #payment .wc_payment_method > label {
	font-size: 1rem;
	font-weight: 600;
}
.cpe-commerce--checkout .woocommerce #payment div.payment_box {
	margin: 0.5rem 0 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
}
.cpe-commerce--checkout .woocommerce #payment div.payment_box::before {
	display: none;
}
.cpe-commerce--checkout .woocommerce .woocommerce-privacy-policy-text,
.cpe-commerce--checkout .woocommerce .woocommerce-terms-and-conditions-wrapper {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.cpe-commerce--checkout .woocommerce .woocommerce-terms-and-conditions-checkbox-text {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
}
.cpe-commerce--checkout .woocommerce .form-row.place-order {
	margin: 0;
	padding: 0;
}
.cpe-commerce--checkout .woocommerce #place_order {
	width: 100%;
	margin-top: var(--wp--preset--spacing--30);
}
@media (max-width: 899px) {
	.cpe-commerce--checkout .woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}
	.cpe-commerce--checkout .woocommerce form.checkout > #customer_details,
	.cpe-commerce--checkout .woocommerce form.checkout > #order_review_heading,
	.cpe-commerce--checkout .woocommerce form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
	}
	.cpe-commerce--checkout .woocommerce form.checkout > #order_review_heading {
		margin-top: var(--wp--preset--spacing--50);
	}
	.cpe-commerce--checkout .woocommerce form.checkout > #order_review {
		position: static;
	}
}

/* -- Account (Edwiser React) ----------------------------------------- */
.cpe-commerce #eb-user-account .eb-user-account__wrapper {
	margin-top: 0;
	max-width: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	box-shadow: none;
	overflow: hidden;
}
/* Duplicate heading: the page already says Account. */
.cpe-commerce #eb-user-account .eb-user-account__tabs-title-wrapper {
	display: none;
}
.cpe-commerce #eb-user-account .mantine-Tabs-list {
	background: var(--wp--preset--color--surface);
	border-right: 1px solid var(--wp--preset--color--line);
}
.cpe-commerce #eb-user-account .mantine-Tabs-tab {
	padding: 0.9rem 1.25rem;
	border-left: 3px solid transparent;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
}
.cpe-commerce #eb-user-account .mantine-Tabs-tab:hover,
.cpe-commerce #eb-user-account .mantine-Tabs-tab[data-active],
.cpe-commerce #eb-user-account .mantine-Tabs-tab[aria-selected="true"] {
	background: var(--wp--preset--color--base);
	border-left-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.cpe-commerce #eb-user-account .mantine-Tabs-tabSection,
.cpe-commerce #eb-user-account .mantine-Tabs-tab:hover .mantine-Tabs-tabSection,
.cpe-commerce #eb-user-account .mantine-Tabs-tab[data-active] .mantine-Tabs-tabSection {
	color: inherit;
}
.cpe-commerce #eb-user-account .mantine-Tabs-panel {
	padding: var(--wp--preset--spacing--40);
}
.cpe-commerce #eb-user-account :is(.eb-dashboard__title, .eb-profile__title, .eb-user-account__wrapper h2, .eb-user-account__wrapper h3):not(.eb-user-account__tabs-title) {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-commerce #eb-user-account .eb-profile__logout {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* The four course-count tiles. Edwiser lets them collapse into each other
   below ~1100px; give them a real grid. */
.cpe-commerce #eb-user-account .eb-dashboard__course-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border: 0;
}
.cpe-commerce #eb-user-account .eb-course-summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}
.cpe-commerce #eb-user-account .eb-course-summary__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}
.cpe-commerce #eb-user-account .eb-course-summary__icon svg {
	stroke: currentColor;
}
.cpe-commerce #eb-user-account .eb-course-summary__course-count {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-commerce #eb-user-account .eb-course-summary__status {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}
.cpe-commerce #eb-user-account .eb-profile__row-field label {
	display: block;
	margin-bottom: 0.3rem;
}
@media (max-width: 767px) {
	.cpe-commerce #eb-user-account .mantine-Tabs-list {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
}
/* Orders tab: WooCommerce orders are listed here by cpeprime-core. */
.cpe-commerce #eb-user-account .eb-orders__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.cpe-commerce #eb-user-account .eb-orders__table :is(th, td) {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.cpe-commerce #eb-user-account .eb-orders__table th {
	background: var(--wp--preset--color--surface);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cpe-commerce #eb-user-account .eb-user-order-courses {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cpe-commerce #eb-user-account .eb-orders__course-link {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-commerce #eb-user-account .eb-orders__table-row-item--status {
	white-space: nowrap;
}

/* -- Account: one order (/account/view-order/123/) -------------------- */
/* cpeprime-core swaps the Edwiser block for WooCommerce's order details on
   this address, so the "View order" links in emails and the Orders tab land
   on a receipt. */
.cpe-account-order {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
}
.cpe-account-order__back {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
}
.cpe-account-order__back a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-account-order .woocommerce-notice,
.cpe-account-order > p:not(.cpe-account-order__back) {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.cpe-account-order h2 {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-account-order .woocommerce-order-details h2:first-child {
	margin-top: 0;
}
.cpe-account-order .woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.cpe-account-order .woocommerce-table :is(th, td) {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.cpe-account-order .woocommerce-table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cpe-account-order .woocommerce-table :is(th, td):last-child {
	text-align: right;
}
.cpe-account-order .woocommerce-table .product-quantity {
	color: var(--wp--preset--color--muted);
}
.cpe-account-order .woocommerce-table tfoot tr.order-total :is(th, td) {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-account-order .woocommerce-table tfoot tr:last-child :is(th, td) {
	border-bottom: 0;
}
.cpe-account-order mark {
	background: none;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}
.cpe-account-order .woocommerce-table a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-account-order .woocommerce-customer-details address {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	font-style: normal;
	line-height: 1.6;
}
.cpe-account-order .woocommerce-customer-details--phone,
.cpe-account-order .woocommerce-customer-details--email {
	margin: 0.4rem 0 0;
}
.cpe-account-order .woocommerce-column--2 {
	margin-top: var(--wp--preset--spacing--30);
}

/* -- Payment step (gateways) ------------------------------------------ */
/* WooPayments mounts its card fields in a bordered fieldset inside the
   payment box, so the card sat in a box inside a box. One border is enough. */
.cpe-commerce--checkout .woocommerce #payment .wcpay-upe-form fieldset,
.cpe-commerce--checkout .woocommerce #payment fieldset.wc-payment-form {
	margin: 0;
	padding: 0 !important; /* WooPayments writes padding:7px inline */
	border: 0;
}
.cpe-commerce--checkout .woocommerce #payment .wc_payment_method > label .payment-methods--logos {
	float: right;
}
.cpe-commerce--checkout .woocommerce #payment .wc_payment_method > label .payment-methods--logos-count {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
}
.cpe-commerce--checkout .woocommerce #payment .wcpay-upe-form .save-payment-method-checkbox,
.cpe-commerce--checkout .woocommerce #payment .wc-saved-payment-methods {
	font-size: 0.875rem;
}
/* Express checkout (Apple Pay / Google Pay) sits above the billing form with
   an "— OR —" separator that WooPayments styles inline. Keep the separator,
   make it a hairline rule with quiet text so it does not read as a heading.
   When no wallet is available the whole slot is hidden by WooPayments' own
   script, separator included. */
.cpe-commerce--checkout .woocommerce .wcpay-express-checkout-wrapper {
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
}
.cpe-commerce--checkout .woocommerce #wcpay-express-checkout-button-separator {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.cpe-commerce--checkout .woocommerce #wcpay-express-checkout-button-separator::before,
.cpe-commerce--checkout .woocommerce #wcpay-express-checkout-button-separator::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* -- Order received (WooCommerce block template) ---------------------- */
/* templates/order-confirmation.html. The status block prints the H1 and the
   "thank you" line; it sits in the navy band so a failed or pending order
   reads the same way as a successful one, just with different words. */
.cpe-pagehead--received .wc-block-order-confirmation-status {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: 0;
}
.cpe-pagehead--received .wc-block-order-confirmation-status h1 {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
}
.cpe-pagehead--received .wc-block-order-confirmation-status p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--wp--preset--font-size--medium);
}
.cpe-pagehead--received .wc-block-order-confirmation-status a {
	color: var(--wp--preset--color--highlight);
}
.cpe-pagehead--received .wc-block-order-confirmation-status .button {
	margin-top: var(--wp--preset--spacing--30);
}
/* Five facts about the order as a strip of label/value pairs. */
.cpe-commerce--received .wc-block-order-confirmation-summary {
	padding: 0;
	border: 0;
}
.cpe-commerce--received .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.25rem;
	margin: 0;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	list-style: none;
}
.cpe-commerce--received .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
}
.cpe-commerce--received .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cpe-commerce--received .wc-block-order-confirmation-summary-list-item__value {
	font-weight: 600;
	overflow-wrap: anywhere;
}
/* The customer-account block, restyled as the one call to action: courses
   are reached from the account page, and the link resolves to whatever the
   My Account page is on this install. */
.cpe-commerce--received .cpe-received__account {
	margin-top: var(--wp--preset--spacing--30) !important;
}
.cpe-commerce--received .cpe-received__account .wc-block-customer-account__link {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none;
}
.cpe-commerce--received .cpe-received__account .wc-block-customer-account__link:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}
.cpe-commerce--received h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 1.375rem;
	color: var(--wp--preset--color--primary-dark);
}
/* Order table: same treatment as the checkout's order panel. */
.cpe-commerce--received .wc-block-order-confirmation-totals {
	padding: 0;
	border: 0;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table :is(th, td) {
	padding: 0.7rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table thead th {
	padding-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table :is(th, td):last-child {
	text-align: right;
	white-space: nowrap;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table .product-quantity {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table tfoot tr:last-child :is(th, td) {
	padding-top: 0.9rem;
	border-bottom: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-commerce--received .wc-block-order-confirmation-totals__table tfoot :is(th, td) {
	font-weight: 600;
}
/* Addresses and payment instructions: plain text, no boxes. */
.cpe-commerce--received :is(.wc-block-order-confirmation-billing-address, .wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-additional-information, .wc-block-order-confirmation-additional-fields, .wc-block-order-confirmation-downloads) {
	padding: 0;
	border: 0;
}
.cpe-commerce--received address {
	font-style: normal;
	line-height: 1.6;
}
.cpe-commerce--received .wc-block-order-confirmation-additional-information {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 4px solid var(--wp--preset--color--highlight);
	background: var(--wp--preset--color--surface);
	border-radius: 0 6px 6px 0;
}
.cpe-commerce--received .wc-block-order-confirmation-additional-information > :first-child {
	margin-top: 0;
}
.cpe-commerce--received .wc-block-order-confirmation-additional-information > :last-child {
	margin-bottom: 0;
}

/* ---------- Seminar schedule and companions --------------------------- */
/* Both rendered by cpeprime-core blocks, both print nothing for a product
   without the data, so a self-study course never sees them. */
.cpe-schedule__title,
.cpe-companions__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-schedule__list,
.cpe-companions__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Timetable: time in a fixed column so the labels line up. */
.cpe-schedule__item {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--30);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9375rem;
	line-height: 1.45;
}
.cpe-schedule__item:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}
.cpe-schedule__time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary-dark);
	white-space: nowrap;
}
.cpe-schedule__item:not(:has(.cpe-schedule__time)) .cpe-schedule__text {
	grid-column: 1 / -1;
}
@media (max-width: 480px) {
	.cpe-schedule__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem 0;
	}
}
/* The other days of the same seminar, under the buy panel. */
.cpe-companions {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}
.cpe-companions__title {
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cpe-companions__item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.cpe-companions__link {
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.cpe-companions__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-companions__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}
.cpe-companions__price {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}
.cpe-companions__price .woocommerce-Price-amount {
	font-size: inherit;
}

/* ---------- Authors, registrations, sign-up form ---------------------- */
/* Author card: photo left, everything else right. The photo is a flex item
   inside a nowrap flex group and would otherwise shrink to nothing. */
.cpe-author .cpe-author__photo {
	flex: 0 0 112px;
	margin: 0;
}
.cpe-author .cpe-author__photo img {
	display: block;
}
.cpe-author .cpe-author__body {
	flex: 1 1 auto;
	min-width: 0;
}
.cpe-author__name {
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 1.2;
}
.cpe-author__link {
	margin-top: var(--wp--preset--spacing--30);
	font-weight: 700;
}
.cpe-author__link a {
	text-decoration: none;
}
.cpe-author__link a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Registration card: a logo at a fixed height, the statement beside it. */
.cpe-sponsor .cpe-sponsor__logo {
	flex: 0 0 120px;
	margin: 0;
}
.cpe-sponsor .cpe-sponsor__logo img {
	display: block;
	width: 120px;
	height: 72px;
	object-fit: contain;
}
.cpe-sponsor .cpe-sponsor__body {
	flex: 1 1 auto;
	min-width: 0;
}
.cpe-sponsor .cpe-sponsor__body p {
	margin: 0;
}
@media (max-width: 480px) {
	.cpe-author,
	.cpe-sponsor {
		flex-wrap: wrap;
	}
}
/* Contact Form 7, dressed like the rest of the site's forms. */
.cpe-form .wpcf7 label {
	display: block;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.cpe-form .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 0.3rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}
.cpe-form .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}
.cpe-form .wpcf7 textarea {
	min-height: 8rem;
}
.cpe-form .wpcf7 :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--highlight);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.cpe-form .wpcf7 input[type="submit"] {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
}
.cpe-form .wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-dark);
}
.cpe-form .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 400;
}
.cpe-form .wpcf7 .wpcf7-response-output {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
}
.cpe-form .wpcf7 form.invalid .wpcf7-response-output,
.cpe-form .wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--accent);
}
.cpe-form .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #0b7a3b;
}
/* Two fields to a row on wide screens. Contact Form 7 wraps each row's labels
   in a <p>, which would be the only grid item; dissolve it. */
@media (min-width: 700px) {
	.cpe-form .wpcf7 .cpe-form__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}
	.cpe-form .wpcf7 .cpe-form__row > p {
		display: contents;
	}
}

/* ---------- Policy pages --------------------------------------------- */
/* Refund, cancellation, privacy, complaints: one prose column, section
   headings that read as sections, and a contact panel at the end. */
.cpe-policy h2 {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
	font-size: 1.5rem;
	line-height: 1.2;
}
.cpe-policy > h2:first-child,
.cpe-policy .cpe-contents + h2 {
	margin-top: 0;
}
.cpe-policy p,
.cpe-policy li {
	line-height: 1.65;
}
.cpe-policy ul,
.cpe-policy ol {
	padding-left: 1.4rem;
}
.cpe-policy li + li {
	margin-top: 0.4rem;
}
/* Table of contents for the long ones. */
.cpe-contents {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}
.cpe-contents__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cpe-contents ol {
	margin: 0;
	padding-left: 1.4rem;
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
	font-size: 0.9375rem;
}
.cpe-contents li {
	margin: 0 0 0.3rem;
	break-inside: avoid;
}
.cpe-contents a {
	text-decoration: none;
}
.cpe-contents a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 600px) {
	.cpe-contents ol {
		columns: 1;
	}
}
/* Refund tiers */
.cpe-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.cpe-table :is(th, td) {
	padding: 0.65rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.cpe-table th {
	background: var(--wp--preset--color--surface);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cpe-table :is(th, td):last-child {
	width: 8rem;
	font-weight: 700;
	white-space: nowrap;
}
/* A note that must not be missed */
.cpe-callout {
	border-radius: 0 8px 8px 0;
	margin: var(--wp--preset--spacing--40) 0;
}
.cpe-callout p {
	margin: 0;
	font-size: 0.9375rem;
}
/* Contact panel at the end of a policy */
.cpe-contactpanel h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 1.25rem;
}
.cpe-contactpanel p {
	margin: 0;
}
.cpe-contactpanel a {
	font-weight: 700;
	text-decoration: none;
}
.cpe-contactpanel a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Search results and 404 ------------------------------------ */
/* templates/search.html and templates/404.html. Both open with the compact
   navy band; the search form and the result list sit in the content column. */
.cpe-search .wp-block-search__inside-wrapper,
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
	border: 0;
}
.wp-block-search__input {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: 1rem;
}
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 0;
}
.cpe-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cpe-search__item {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cpe-search__list > li:first-child .cpe-search__item {
	border-top: 1px solid var(--wp--preset--color--line);
}
/* Badges print nothing for a page or a post; drop the empty row so the
   title sits at the top of the item. */
.cpe-search__item .cpe-badges:not(:has(*)) {
	display: none;
}
.cpe-search__item .wp-block-post-title a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}
.cpe-search__item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cpe-search__item .wp-block-post-excerpt p {
	margin: 0;
}
.cpe-pagination {
	margin-top: var(--wp--preset--spacing--40);
	font-weight: 700;
}
.cpe-pagination a {
	text-decoration: none;
}
.cpe-pagination .page-numbers.current {
	color: var(--wp--preset--color--muted);
}