/**
 * RuleFence store surfaces.
 *
 * Loaded only when WooCommerce is active and only on a page WooCommerce owns.
 * Everything is scoped to `body.wpam-site`, which is enough specificity to win
 * against both Kadence and WooCommerce Blocks without a single `!important`.
 *
 * WHAT THIS SHEET IS ARGUING WITH
 *
 * Three stylesheets reach these pages: WooCommerce core, WooCommerce Blocks
 * (cart and checkout are React, and their class names are only in the hydrated
 * DOM, never in the served HTML), and Kadence's product templates. All three
 * assume a shop selling physical goods with photographs. This site sells three
 * licence keys. So the recurring moves here are: remove the image affordance,
 * widen the type back to the site's scale, and put a card around things that
 * WooCommerce leaves as bare rows.
 *
 * NO PRODUCT IMAGES, BUT NOT UNCONDITIONALLY
 *
 * A licence has nothing to photograph, so every image slot currently holds
 * WooCommerce's grey placeholder. Rather than hide the image slot outright, the
 * rules use `:has(.woocommerce-placeholder)` so the slot disappears only while
 * the placeholder is what is in it. Give a product a real image later and the
 * layout comes back on its own.
 */

/* ============================================================ 1. frame */

/*
 * Kadence puts the H1 in its own hero section, above and outside the content.
 * The site's own pages put breadcrumbs, an eyebrow, an H1 and a lede in one
 * block, so the band is restyled to match that hero's surface and the content
 * below it opens hard against the band with no border between them. The lede
 * then reads as part of the heading rather than as the first line of the body.
 */
body.wpam-site.woocommerce-page .entry-hero-container-inner,
body.wpam-site.woocommerce .entry-hero-container-inner,
body.wpam-site.post-type-archive-product .entry-hero-container-inner,
body.wpam-site.single-product .entry-hero-container-inner {
	border-bottom: 0;
	background:
		radial-gradient(120% 140% at 88% -30%, rgba(56, 88, 233, .1), transparent 62%),
		linear-gradient(180deg, #fbfcff, #ffffff);
}

/*
 * Kadence centres the hero header with flex and gives the band a minimum
 * height, which on a page whose heading is one word leaves a large empty box
 * between the header and the lede. Both go: the band is only as tall as its
 * contents, and the title starts where the content below it starts.
 */
body.wpam-site.woocommerce-page .entry-hero .hero-container,
body.wpam-site.woocommerce-page .entry-hero .entry-hero-container-inner,
body.wpam-site.post-type-archive-product .entry-hero .hero-container,
body.wpam-site.post-type-archive-product .entry-hero .entry-hero-container-inner {
	min-height: 0;
	padding-block: 0;
}

body.wpam-site.woocommerce-page .entry-hero .entry-header,
body.wpam-site.post-type-archive-product .entry-hero .entry-header {
	display: block;
	min-height: 0;
	padding-block: 72px 0;
	text-align: left;
}

body.wpam-site.woocommerce-page .entry-hero .entry-title,
body.wpam-site.woocommerce-page .entry-hero .page-title,
body.wpam-site.post-type-archive-product .entry-hero .archive-title {
	max-width: 20ch;
	margin: 0;
	/* Kadence draws a hairline under the title; the lede's rule below is the
	   one that separates the heading from the page. */
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(2.25rem, 4.2vw, 3.125rem);
	font-weight: 700;
	letter-spacing: -.042em;
	line-height: 1.08;
}

body.wpam-site.woocommerce-page .content-area,
body.wpam-site.post-type-archive-product .content-area,
body.wpam-site.single-product .content-area {
	margin-top: 0;
	background: #ffffff;
}

body.wpam-site.woocommerce-page .content-container,
body.wpam-site.post-type-archive-product .content-container {
	padding-block: 0 88px;
}

/*
 * A single product has no hero band -- Kadence puts breadcrumbs in the content
 * area instead -- so this page supplies its own top spacing.
 */
body.wpam-site.single-product .content-container {
	padding-block: 44px 88px;
}

body.wpam-site.single-product .product-title.product-above {
	margin-bottom: 26px;
}

/*
 * Kadence's boxed content style pads the article by 32px, which left every
 * store page's body inset from its own heading. The heading is the alignment
 * everything else on the site follows.
 */
body.wpam-site.woocommerce-page .entry-content-wrap,
body.wpam-site.post-type-archive-product .entry-content-wrap,
body.wpam-site.single-product .entry-content-wrap {
	/*
	 * Zeroing the variable rather than the padding. Kadence pulls `.alignwide`
	 * blocks -- which is what the cart and checkout are -- back out by exactly
	 * this value, so setting `padding-inline: 0` here left those two blocks
	 * hanging 32px into the left margin while everything else lined up.
	 */
	--global-content-boxed-padding: 0px;

	padding-inline: 0;
}

/* The lede, sitting immediately under the heading it belongs to. */
body.wpam-site .wpam-store-intro {
	padding-block: 18px 30px;
	border-bottom: 1px solid var(--wpam-line);
	margin-bottom: 44px;
}

body.wpam-site .wpam-store-lede {
	max-width: 62ch;
	margin: 0;
	color: var(--wpam-ink-600);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	line-height: 1.6;
}

/*
 * The shop archive's description comes out of the shop page's own content, and
 * WooCommerce wraps it in a term-description container that carries Kadence's
 * archive spacing. Reset that so the lede lines up with the grid below it.
 */
body.wpam-site .woocommerce-products-header,
body.wpam-site .term-description,
body.wpam-site .page-description {
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Breadcrumbs, matching `.wpam-crumbs` on the standard page template. */
body.wpam-site .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--wpam-ink-500);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 600;
}

body.wpam-site .woocommerce-breadcrumb a {
	color: var(--wpam-ink-600);
	text-decoration: none;
}

body.wpam-site .woocommerce-breadcrumb a:hover {
	color: var(--wpam-blue-700);
}

/* =========================================================== 2. notices */

/*
 * The blocks notice banner keeps WooCommerce's own padding: it is declared
 * `!important` there, and matching it would mean answering with `!important`
 * over a 4px difference nobody can see.
 */
body.wpam-site .woocommerce-message,
body.wpam-site .woocommerce-info,
body.wpam-site .woocommerce-error,
body.wpam-site .woocommerce-notice {
	padding: 16px 20px;
}

body.wpam-site .woocommerce-message,
body.wpam-site .woocommerce-info,
body.wpam-site .woocommerce-error,
body.wpam-site .woocommerce-notice,
body.wpam-site .wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 24px;
	border: 1px solid var(--wpam-line);
	border-left: 3px solid var(--wpam-blue-600);
	border-radius: var(--wpam-radius-sm);
	color: var(--wpam-ink-700);
	background: var(--wpam-surface-alt);
	font-size: 14.5px;
	line-height: 1.55;
	list-style: none;
}

body.wpam-site .woocommerce-message::before,
body.wpam-site .woocommerce-info::before,
body.wpam-site .woocommerce-error::before {
	display: none;
}

body.wpam-site .woocommerce-message {
	border-left-color: var(--wpam-green-700);
	background: var(--wpam-green-100);
}

body.wpam-site .woocommerce-error,
body.wpam-site .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wpam-red-700);
	color: var(--wpam-ink-800);
	background: var(--wpam-red-100);
}

body.wpam-site .wc-block-components-notice-banner.is-warning {
	border-left-color: var(--wpam-amber-800);
	background: var(--wpam-amber-100);
}

body.wpam-site .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wpam-green-700);
	background: var(--wpam-green-100);
}

body.wpam-site .wc-block-components-notice-banner > svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

body.wpam-site .woocommerce-message .button,
body.wpam-site .woocommerce-info .button {
	margin-left: auto;
}

/* ====================================================== 3. shop archive */

body.wpam-site.woocommerce ul.products.product-archive {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
}

body.wpam-site.woocommerce ul.products.product-archive::before,
body.wpam-site.woocommerce ul.products.product-archive::after {
	display: none;
}

body.wpam-site.woocommerce ul.products.product-archive > li.product {
	display: flex;
	width: auto;
	margin: 0;
	padding: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-lg);
	background: #ffffff;
	box-shadow: var(--wpam-shadow-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.wpam-site.woocommerce ul.products.product-archive > li.product:hover {
	border-color: #b8c4e6;
	box-shadow: var(--wpam-shadow-md);
	transform: translateY(-2px);
}

/*
 * The placeholder image goes, and only the placeholder.
 *
 * The sale badge is WooCommerce's first child of the image link, so hiding the
 * whole link takes the badge with it. The image alone is hidden instead and the
 * link is left as a zero-height wrapper -- `line-height: 0` collapses it to
 * nothing when there is no badge inside, and the badge supplies its own
 * spacing when there is. Give a product a real image and the rule stops
 * matching and the layout comes back.
 */
body.wpam-site.woocommerce ul.products li.product a.woocommerce-loop-image-link:has(.woocommerce-placeholder) {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

body.wpam-site.woocommerce ul.products li.product a.woocommerce-loop-image-link:has(.woocommerce-placeholder) > img.woocommerce-placeholder,
body.wpam-site.woocommerce ul.products li.product .product-details-hover-wrap:has(.woocommerce-placeholder) {
	display: none;
}

/*
 * WooCommerce labels the single-product gallery itself when a product has no
 * image, which is a more honest hook than looking for the placeholder file.
 */
body.wpam-site.single-product div.product .woocommerce-product-gallery--without-images {
	display: none;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .product-details {
	display: flex;
	padding: 26px 26px 24px;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .woocommerce-loop-product__title {
	margin: 0;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.25;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .woocommerce-loop-product__title a:hover {
	color: var(--wpam-blue-700);
}

body.wpam-site.woocommerce ul.products.product-archive li.product .price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 14px 0 0;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 2.125rem;
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .price del {
	color: var(--wpam-ink-500);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
	opacity: 1;
	text-decoration-thickness: 1px;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .price ins {
	background: transparent;
	text-decoration: none;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .product-excerpt {
	/* Kadence hides the excerpt outside its list layout. */
	display: block;
	margin: 14px 0 0;
	color: var(--wpam-ink-600);
	font-size: 14.5px;
	line-height: 1.6;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .product-excerpt p {
	margin: 0;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .product-action-wrap {
	position: static;
	margin: 22px 0 0;
	padding: 0;
	background: transparent;
	opacity: 1;
	transform: none;
	text-align: left;
}

body.wpam-site.woocommerce ul.products.product-archive li.product .product-action-wrap .button {
	/* Kadence sets `display: block` here, which strips the centring the global
	   button rule relies on and drops the label to the top of the box. */
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

/*
 * Kadence's add-to-cart button carries a spinner and a tick for the AJAX add,
 * which this store does not use -- the icons are invisible but still take
 * width, which pushed the label off centre.
 */
body.wpam-site.woocommerce ul.products.product-archive li.product .add_to_cart_button > .kadence-svg-iconset {
	display: none;
}

/* The sale badge becomes the early-adopter marker, in the site's tag idiom. */
body.wpam-site.woocommerce ul.products li.product span.onsale,
body.wpam-site.single-product div.product span.onsale,
body.wpam-site .wc-block-components-sale-badge {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	display: inline-flex;
	min-width: 0;
	min-height: 0;
	align-self: flex-start;
	margin: 0 0 14px;
	padding: 5px 10px;
	border: 1px solid rgba(21, 122, 54, .28);
	border-radius: 999px;
	color: var(--wpam-green-700);
	background: var(--wpam-green-100);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	/* "Save" and the amount are separate children; inline-flex eats the space. */
	gap: 4px;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.wpam-site.woocommerce ul.products.product-archive li.product span.onsale {
	margin: 26px 26px 0;
	line-height: 1.2;
}

/* A card whose badge is showing needs less air above its title. */
body.wpam-site.woocommerce ul.products.product-archive li.product:has(span.onsale) .product-details {
	padding-top: 14px;
}

/* A grid item stretches to the column unless told otherwise. */
body.wpam-site.single-product div.product > span.onsale {
	margin: 0 0 18px;
	justify-self: start;
}

/* ==================================================== 4. single product */

body.wpam-site.single-product div.product {
	display: grid;
	gap: 0 56px;
	grid-template-columns: minmax(0, 1fr);
}

body.wpam-site.single-product.woocommerce div.product .entry-summary,
body.wpam-site.single-product.woocommerce div.product .summary {
	width: auto;
	max-width: 62ch;
	margin: 0;
	float: none;
}

body.wpam-site.single-product.woocommerce div.product .product_title {
	margin: 0 0 6px;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(2.25rem, 4.2vw, 3.125rem);
	font-weight: 700;
	letter-spacing: -.042em;
	line-height: 1.08;
}

body.wpam-site.single-product.woocommerce div.product .summary > .price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 20px 0 0;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1;
}

body.wpam-site.single-product.woocommerce div.product .summary > .price del {
	color: var(--wpam-ink-500);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.01em;
	opacity: 1;
}

body.wpam-site.single-product.woocommerce div.product .summary > .price ins {
	background: transparent;
	text-decoration: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 20px 0 0;
	color: var(--wpam-ink-600);
	font-size: 1.0625rem;
	line-height: 1.62;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

body.wpam-site.single-product.woocommerce div.product form.cart {
	margin: 28px 0 0;
}

body.wpam-site.single-product.woocommerce div.product .single_add_to_cart_button {
	min-height: 54px;
	padding-inline: 30px;
	font-size: 16px;
}

body.wpam-site.single-product.woocommerce div.product .product_meta {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--wpam-line);
	color: var(--wpam-ink-500);
	font-size: 13px;
}

/*
 * With no categories, tags or SKU the meta block is whitespace and a rule --
 * `:empty` will not match it because of that whitespace, so the test is for
 * the absence of element children instead.
 */
body.wpam-site.single-product.woocommerce div.product .product_meta:not(:has(*)) {
	display: none;
}

/* Description tabs. One tab is not a tab strip; it is a heading. */
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs {
	margin: 52px 0 0;
	padding-top: 44px;
	border-top: 1px solid var(--wpam-line);
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	list-style: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after,
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	padding: 9px 16px;
	border: 1px solid var(--wpam-line);
	border-radius: 999px;
	color: var(--wpam-ink-700);
	background: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-color: transparent;
	color: #ffffff;
	background: var(--wpam-blue-600);
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 68ch;
	margin: 0;
	color: var(--wpam-ink-600);
}

/*
 * Reviews are off and there is no additional-information tab, so the tab strip
 * is one pill labelled with the name of the only panel. That is a heading
 * pretending to be a control: the strip is hidden and the panel's own heading,
 * which WooCommerce prints and themes usually suppress, is shown instead. Add a
 * second tab and both revert.
 */
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) {
	display: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: block;
	margin: 0 0 16px;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.2;
}

/*
 * The pair above is written this way round because `:has()` cannot be nested
 * inside another `:has()` -- the one-tab case has to be expressed as "not the
 * many-tab case", which is a plain `:has()` and valid.
 */
body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs:has(ul.tabs li + li) .panel > h2:first-child {
	display: none;
}

body.wpam-site.single-product.woocommerce div.product .woocommerce-tabs .panel h3 {
	margin: 32px 0 10px;
	color: var(--wpam-ink-900);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

body.wpam-site.single-product.woocommerce .related.products,
body.wpam-site.single-product.woocommerce .up-sells {
	margin: 64px 0 0;
	padding-top: 48px;
	border-top: 1px solid var(--wpam-line);
}

body.wpam-site.single-product.woocommerce .related.products > h2,
body.wpam-site.single-product.woocommerce .up-sells > h2 {
	margin: 0 0 24px;
	color: var(--wpam-ink-950);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
}

/* ====================================================== 5. cart, blocks */

/*
 * Nothing needed for `.wp-block-woocommerce-cart` / `-checkout` themselves:
 * they are `.alignwide`, and with `--global-content-boxed-padding` set to zero
 * above, Kadence's alignwide rule resolves to no offset on its own.
 */

/*
 * No `gap` here on purpose. WooCommerce sizes the two columns as percentages
 * that add up to 100, so a gap makes them overflow and the sidebar wraps
 * underneath -- which is what happened the first time. The separation comes
 * from padding inside the main column instead, exactly as WooCommerce does it.
 */
body.wpam-site .wc-block-components-sidebar-layout {
	align-items: flex-start;
}

body.wpam-site .wc-block-components-main {
	padding-right: 40px;
}

/* The order summary becomes a card, which is what the site does with totals. */
body.wpam-site .wc-block-components-sidebar {
	padding: 26px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-lg);
	background: var(--wpam-surface-alt);
	box-shadow: var(--wpam-shadow-sm);
}

/*
 * Section labels inside the order-summary card only.
 *
 * `.wc-block-components-title` is also the class on the checkout step headings
 * ("Contact information", "Billing address"), so this must not be written as a
 * bare class rule -- the first version of it put those headings in 20px
 * uppercase. The order-summary selector carries the whole chain WooCommerce
 * uses, because a shorter one loses to it.
 */
body.wpam-site .wc-block-cart__totals-title,
body.wpam-site .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
body.wpam-site .wc-block-components-sidebar .wc-block-components-title {
	color: var(--wpam-ink-500);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

body.wpam-site .wc-block-cart-items {
	border: 0;
}

/*
 * The header row goes.
 *
 * Its three cells are an image column, a screen-reader-only "Details", and
 * "Total". The image column is hidden here because a licence has no picture,
 * and it is the cell that carries the visible word "Product" -- so what is left
 * is a rule with "Total" floating at one end of it. Every licence is sold
 * individually, so the row total is the same number as the price printed under
 * the name two lines below: there is nothing for a header to disambiguate.
 */
body.wpam-site .wc-block-cart-items__header {
	display: none;
}

body.wpam-site .wc-block-cart-items__row {
	border-bottom: 1px solid var(--wpam-line-soft);
}

body.wpam-site .wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]),
body.wpam-site .wc-block-cart-items__header-image,
body.wpam-site .wc-block-components-order-summary-item__image:has(img[src*="woocommerce-placeholder"]) {
	display: none;
}

body.wpam-site table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body.wpam-site .wc-block-components-order-summary .wc-block-components-product-name {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	text-decoration: none;
}

body.wpam-site table.wc-block-cart-items a.wc-block-components-product-name:hover {
	color: var(--wpam-blue-700);
}

body.wpam-site .wc-block-components-order-summary .wc-block-components-product-metadata,
body.wpam-site .wc-block-cart-items .wc-block-components-product-metadata {
	color: var(--wpam-ink-600);
	font-size: 14px;
	line-height: 1.55;
}

body.wpam-site .wc-block-components-product-price__value,
body.wpam-site .wc-block-components-formatted-money-amount {
	color: var(--wpam-ink-900);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
	letter-spacing: -.02em;
}

body.wpam-site .wc-block-components-product-price__regular,
body.wpam-site .wc-block-components-order-summary-item__regular-individual-price {
	color: var(--wpam-ink-500);
	font-weight: 600;
}

body.wpam-site table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	color: var(--wpam-ink-500);
	font-size: 13px;
	font-weight: 600;
	text-underline-offset: .18em;
}

body.wpam-site table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
	color: var(--wpam-red-700);
}

body.wpam-site .wc-block-components-sidebar .wc-block-components-totals-wrapper {
	padding: 16px 0;
	border-top: 1px solid var(--wpam-line);
}

body.wpam-site .wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
	padding-top: 0;
	border-top: 0;
}

body.wpam-site .wc-block-components-totals-item__label {
	color: var(--wpam-ink-600);
	font-size: 14.5px;
	font-weight: 600;
}

body.wpam-site .wc-block-components-totals-item__value {
	color: var(--wpam-ink-900);
	font-weight: 700;
}

body.wpam-site .wc-block-components-totals-footer-item {
	color: var(--wpam-ink-950);
	font-size: 1.125rem;
}

body.wpam-site .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wpam-ink-950);
	font-size: 1.625rem;
	letter-spacing: -.035em;
}

body.wpam-site .wc-block-components-panel__button {
	color: var(--wpam-blue-700);
	font-size: 14.5px;
	font-weight: 700;
}

body.wpam-site .wc-block-components-panel__button-icon {
	fill: currentColor;
}

/* Buttons inside the blocks, matching the global button. */
body.wpam-site .wc-block-components-button:not(.is-link),
body.wpam-site .wc-block-cart__submit-button,
body.wpam-site .wc-block-components-checkout-place-order-button {
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	padding: 0 26px;
	border: 1px solid var(--wpam-blue-600);
	border-radius: var(--wpam-radius-sm);
	color: #ffffff;
	background: var(--wpam-blue-600);
	box-shadow: 0 10px 24px rgba(56, 88, 233, .2);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.wpam-site .wc-block-components-button:not(.is-link):hover,
body.wpam-site .wc-block-cart__submit-button:hover,
body.wpam-site .wc-block-components-checkout-place-order-button:hover {
	border-color: var(--wpam-blue-700);
	color: #ffffff;
	background: var(--wpam-blue-700);
	box-shadow: 0 14px 26px rgba(56, 88, 233, .24);
}

body.wpam-site .wc-block-components-button.outlined {
	border-color: var(--wpam-line);
	color: var(--wpam-ink-900);
	background: #ffffff;
	box-shadow: none;
}

body.wpam-site .wc-block-components-button.outlined:hover {
	border-color: #b8c4e6;
	color: var(--wpam-blue-700);
	background: #ffffff;
}

body.wpam-site .wc-block-cart__submit-container {
	padding: 0;
}

/*
 * On a narrow screen WooCommerce pins the checkout button to the bottom of the
 * viewport. Zeroing the padding above left it flush against the screen edges
 * and against whatever it was floating over, so the sticky variant gets its
 * own padding and a hairline back.
 */
body.wpam-site .wc-block-cart__submit-container--sticky {
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wpam-line);
	box-shadow: 0 -8px 24px rgba(9, 17, 31, .07);
}

/* The replacement empty cart. */
body.wpam-site .wpam-empty-cart {
	max-width: 56ch;
	padding: 0;
	text-align: left;
}

body.wpam-site .wpam-empty-cart h2 {
	margin: 0 0 14px;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.15;
}

body.wpam-site .wpam-empty-cart p {
	margin: 0;
	color: var(--wpam-ink-600);
	font-size: 1.0625rem;
	line-height: 1.62;
}

body.wpam-site .wpam-empty-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

body.wpam-site .wpam-empty-cart-actions .wpam-button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	border: 1px solid var(--wpam-blue-600);
	border-radius: var(--wpam-radius-sm);
	color: #ffffff;
	background: var(--wpam-blue-600);
	box-shadow: 0 10px 24px rgba(56, 88, 233, .2);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

body.wpam-site .wpam-empty-cart-actions .wpam-button--secondary {
	border-color: var(--wpam-line);
	color: var(--wpam-ink-900);
	background: #ffffff;
	box-shadow: none;
}

/* ================================================== 6. checkout, blocks */

body.wpam-site .wc-block-components-checkout-step {
	padding: 0 0 36px;
	border: 0;
}

body.wpam-site .wc-block-components-checkout-step__title {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.3;
	text-transform: none;
}

body.wpam-site .wc-block-components-checkout-step__heading {
	margin: 0 0 18px;
}

body.wpam-site .wc-block-components-checkout-step__description {
	color: var(--wpam-ink-600);
	font-size: 14.5px;
	line-height: 1.55;
}

body.wpam-site .wc-block-components-form .wc-block-components-text-input input,
body.wpam-site .wc-block-components-form .wc-blocks-components-select__select {
	min-height: 52px;
	padding: 20px 14px 6px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-sm);
	color: var(--wpam-ink-900);
	background: #ffffff;
	font: inherit;
	font-size: 15px;
}

body.wpam-site .wc-block-components-form .wc-block-components-text-input input:focus,
body.wpam-site .wc-block-components-form .wc-blocks-components-select__select:focus {
	border-color: var(--wpam-blue-600);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, .14);
	outline: 0;
}

body.wpam-site .wc-block-components-form .wc-block-components-text-input label,
body.wpam-site .wc-block-components-form .wc-blocks-components-select__label {
	color: var(--wpam-ink-500);
	font-size: 14px;
	font-weight: 500;
}

body.wpam-site .wc-block-components-form .wc-block-components-text-input.is-active label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.wpam-site .wc-block-components-checkbox__label,
body.wpam-site .wc-block-checkout__terms label {
	color: var(--wpam-ink-600);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.55;
}

body.wpam-site .wc-block-components-checkbox__mark {
	fill: #ffffff;
}

body.wpam-site .wc-block-checkout__terms--with-separator {
	padding-top: 24px;
	border-top: 1px solid var(--wpam-line);
}

body.wpam-site .wc-block-components-order-summary .wc-block-components-order-summary-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--wpam-line-soft);
}

/*
 * WooCommerce draws its own bordered, 5px-radius box around the order summary,
 * which inside the card above reads as a box in a box.
 */
body.wpam-site .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

/* The block below it opens with a rule of its own; two would be a double line. */
body.wpam-site .wc-block-components-order-summary .wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

/* The summary card already has 26px of padding; these add a second inset. */
body.wpam-site .wc-block-components-sidebar .wc-block-components-order-summary,
body.wpam-site .wc-block-components-sidebar .wc-block-components-panel,
body.wpam-site .wc-block-components-sidebar .wc-block-components-totals-wrapper {
	padding-inline: 0;
}

body.wpam-site .wc-block-components-order-summary-item__quantity {
	border-color: var(--wpam-line);
	color: var(--wpam-ink-600);
	background: #ffffff;
}

/*
 * The payment method list.
 *
 * WooCommerce renders each method as an accordion row with a bare radio and no
 * boundary. With one method that reads as a stray radio button under a heading;
 * with several it reads as a list with nothing to click. Each becomes a card in
 * the same idiom as the rest of the site, and the selected one takes the blue.
 *
 * The card fields inside the row are Stripe's, drawn in an iframe this sheet
 * cannot reach. The gateway samples the page's own inputs and sends the result
 * to Stripe as an appearance object, so the input styling above is what the
 * card field inherits -- which is also why the cached appearance has to be
 * dropped whenever this file changes. The theme does that on version change.
 */
body.wpam-site .wc-block-components-radio-control-accordion-option {
	margin-bottom: 10px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-sm);
	background: #ffffff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

body.wpam-site .wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0;
}

body.wpam-site .wc-block-components-radio-control-accordion-option:hover {
	border-color: #b8c4e6;
}

body.wpam-site .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
	border-color: var(--wpam-blue-600);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, .12);
}

body.wpam-site .wc-block-components-radio-control__option {
	padding: 16px 18px 16px 48px;
}

body.wpam-site .wc-block-components-radio-control__label,
body.wpam-site .wc-block-components-payment-method-label {
	color: var(--wpam-ink-900);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}

body.wpam-site .wc-block-components-radio-control__description {
	margin-top: 4px;
	color: var(--wpam-ink-600);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
}

/*
 * The unchecked radio keeps WooCommerce's own border, which is
 * `color-mix(currentcolor 80%)` -- derived from the label colour set above, so
 * it already tracks this palette. Claiming it here only lost the tie.
 */
body.wpam-site .wc-block-components-radio-control__input:checked {
	border-color: var(--wpam-blue-600);
	color: var(--wpam-blue-600);
}

/*
 * One payment method: no radio.
 *
 * The Stripe gateway in use renders an empty `payment-method-label`, so the
 * row is a bare radio button with nothing beside it -- a control offering a
 * choice between one thing, labelled with nothing. With a single method the
 * row is hidden and the card fields sit directly under the "Payment options"
 * heading, which is what the heading already says.
 *
 * Matched on the absence of a second option rather than on a gateway name, so
 * enabling Link or Apple Pay brings the radios straight back.
 */
body.wpam-site .wc-block-components-radio-control:not(:has(.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option)) .wc-block-components-radio-control__option {
	display: none;
}

/* Nothing is selected when there is nothing to select, so no selected state. */
body.wpam-site .wc-block-components-radio-control:not(:has(.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option)) .wc-block-components-radio-control-accordion-option {
	box-shadow: none;
}

body.wpam-site .wc-block-components-radio-control:not(:has(.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option)) .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
	border-color: var(--wpam-line);
}

body.wpam-site .wc-block-components-radio-control:not(:has(.wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option)) .wc-block-components-radio-control-accordion-content {
	padding: 18px;
}

body.wpam-site .wc-block-components-radio-control-accordion-content {
	padding: 4px 18px 18px 48px;
	color: var(--wpam-ink-600);
	font-size: 14px;
}

body.wpam-site .wc-block-checkout__actions_row {
	align-items: center;
	gap: 16px;
}

body.wpam-site .wc-block-components-checkout-return-to-cart-button {
	color: var(--wpam-ink-600);
	font-size: 14.5px;
	font-weight: 600;
}

/* ======================================================= 7. my account */

/*
 * WooCommerce lays the account page out with percentage floats, which do not
 * survive a 240px fixed sidebar. The wrapper becomes a two-column grid, matched
 * on the presence of the navigation so the signed-out login page -- which uses
 * the same wrapper -- is left alone.
 *
 * KADENCE PUTS THE NAVIGATION IN A WRAPPER OF ITS OWN
 *
 * `div.account-navigation-wrap`, holding an avatar and then the nav. So the
 * navigation is a grandchild of `.woocommerce`, not a child, and the first
 * version of this rule -- `:has(> .woocommerce-MyAccount-navigation)` -- never
 * matched on the real page. The grid silently did not apply and the page fell
 * back to Kadence's float: body text sat beside the sidebar, and every table,
 * being full width, cleared underneath it.
 *
 * It passed review because the fixture used to test it was hand-written from
 * WooCommerce's template, where the nav *is* a direct child. The fixture is now
 * built from the real hook output for exactly this reason.
 *
 * Both shapes are matched, so this survives Kadence changing its mind and
 * works on a theme that does not add the wrapper at all.
 */
body.wpam-site .woocommerce:has(> .account-navigation-wrap),
body.wpam-site .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	gap: 0 44px;
	align-items: start;
	grid-template-columns: 240px minmax(0, 1fr);
}

/* As on the login page, the float clearfix would take the first cell. */
body.wpam-site .woocommerce:has(> .account-navigation-wrap)::before,
body.wpam-site .woocommerce:has(> .account-navigation-wrap)::after,
body.wpam-site .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
body.wpam-site .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	display: none;
}

/* Kadence's wrapper is floated; inside a grid that float is noise. */
body.wpam-site.woocommerce-account .account-navigation-wrap {
	width: auto;
	margin: 0;
	/* Kadence's divider between the floated sidebar and the content; the
	   navigation is a card here and the grid provides the separation. */
	border: 0;
	float: none;
}

body.wpam-site.woocommerce-account .kadence-account-avatar {
	margin-bottom: 16px;
}

body.wpam-site .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.wpam-site.woocommerce-account .woocommerce-MyAccount-navigation {
	width: auto;
	margin: 0;
	float: none;
}

body.wpam-site.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	margin: 0;
	float: none;
}

body.wpam-site .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius);
	background: var(--wpam-surface-alt);
	list-style: none;
	overflow: hidden;
}

body.wpam-site .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--wpam-line-soft);
}

body.wpam-site .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

/*
 * Kadence styles these as `.kadence-account-nav-left.woocommerce-account
 * .account-navigation-wrap li a` -- three classes, where the obvious
 * `body.wpam-site .woocommerce-MyAccount-navigation li a` has only two. So the
 * padding, the weight and its 5px accent border all won, and this sheet's
 * spacing silently did not apply. Matching its chain and adding one more class
 * settles it.
 */
body.wpam-site.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li a,
body.wpam-site .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	/* The accent border is Kadence's way of marking the active item; this
	   sheet fills the row instead, and the two together read as a mistake. */
	border: 0;
	margin: 0;
	color: var(--wpam-ink-700);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

body.wpam-site.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li a:hover,
body.wpam-site .woocommerce-MyAccount-navigation li a:hover {
	border: 0;
	color: var(--wpam-blue-700);
	background: #ffffff;
}

body.wpam-site.woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation li.is-active a,
body.wpam-site .woocommerce-MyAccount-navigation li.is-active a {
	border: 0;
	color: #ffffff;
	background: var(--wpam-blue-600);
	font-weight: 700;
}

body.wpam-site .woocommerce-MyAccount-content {
	color: var(--wpam-ink-600);
}

body.wpam-site .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.wpam-site .woocommerce-MyAccount-content h2,
body.wpam-site .woocommerce-MyAccount-content h3 {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
	letter-spacing: -.025em;
}

body.wpam-site .woocommerce-MyAccount-content h2 {
	margin: 34px 0 14px;
	font-size: 1.375rem;
}

body.wpam-site .woocommerce-MyAccount-content h2:first-child {
	margin-top: 0;
}

/* Login and register, side by side in the site's card idiom. */
body.wpam-site #customer_login.u-columns,
body.wpam-site .woocommerce-account .u-columns.col2-set {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * WooCommerce clears the old float layout with `::before`/`::after` table
 * cells. In a grid container those pseudo-elements are grid items: they took
 * the first cell, which put Login in the right-hand column and Register on a
 * second row underneath it.
 */
body.wpam-site #customer_login.u-columns::before,
body.wpam-site #customer_login.u-columns::after,
body.wpam-site .woocommerce .u-columns.col2-set::before,
body.wpam-site .woocommerce .u-columns.col2-set::after {
	display: none;
}

body.wpam-site .u-columns > .col-1,
body.wpam-site .u-columns > .col-2 {
	width: auto;
	float: none;
	padding: 30px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-lg);
	background: #ffffff;
	box-shadow: var(--wpam-shadow-sm);
}

body.wpam-site .u-columns > .col-1 > h2,
body.wpam-site .u-columns > .col-2 > h2 {
	margin: 0 0 20px;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.03em;
}

body.wpam-site .woocommerce form.woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

body.wpam-site .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

body.wpam-site .woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--wpam-ink-700);
	font-size: 13px;
	font-weight: 700;
}

/*
 * The required marker WooCommerce prints is #a00 on white, which is 4.00:1 --
 * under the 4.5:1 this site holds itself to for text this size.
 */
body.wpam-site .woocommerce form .form-row .required,
body.wpam-site .woocommerce .required {
	color: var(--wpam-red-700);
	text-decoration: none;
}

body.wpam-site .woocommerce form .form-row label.woocommerce-form-login__rememberme,
body.wpam-site .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wpam-ink-600);
	font-size: 14px;
	font-weight: 400;
}

body.wpam-site .woocommerce-form__input-checkbox {
	width: auto;
	min-height: 0;
	margin: 0;
}

body.wpam-site .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 14px;
}

body.wpam-site .woocommerce-privacy-policy-text {
	color: var(--wpam-ink-500);
	font-size: 13.5px;
	line-height: 1.6;
}

/*
 * Headings inside an account page or an order receipt.
 *
 * These come from WooCommerce and the licence manager as bare `<h2>`, so they
 * inherit the site's article scale -- up to 46px, which is the size of a
 * marketing headline. "License key" arrived three times the height of the key
 * underneath it, and "Billing address" outweighed the address.
 *
 * They are subheadings within a page whose own H1 is above them, and they are
 * sized as such.
 */
body.wpam-site .woocommerce-MyAccount-content h2,
body.wpam-site.woocommerce-order-received .entry-content h2,
body.wpam-site .woocommerce-order h2 {
	margin: 34px 0 14px;
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.25;
}

body.wpam-site .woocommerce-MyAccount-content h2:first-child,
body.wpam-site .woocommerce-order h2:first-child {
	margin-top: 0;
}

body.wpam-site .woocommerce-MyAccount-content h3,
body.wpam-site .woocommerce-order h3 {
	margin: 26px 0 12px;
	color: var(--wpam-ink-900);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

/*
 * The licence key itself.
 *
 * The licence manager prints it as a bare `<code>`, which renders as small
 * grey monospace -- the least prominent thing on a page whose entire purpose
 * is to hand it over. It is the one string the customer has to copy, so it is
 * given the weight of a field they are meant to take something from.
 */
body.wpam-site .woocommerce-order h2 + p > code,
body.wpam-site .woocommerce-MyAccount-content > p > code {
	display: inline-block;
	padding: 14px 18px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-sm);
	color: var(--wpam-ink-950);
	background: var(--wpam-surface-alt);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .06em;
	user-select: all;
	word-break: break-all;
}

/* Order and licence tables. */
body.wpam-site .woocommerce table.shop_table,
body.wpam-site table.woocommerce-orders-table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--wpam-line);
	border-collapse: separate;
	border-radius: var(--wpam-radius);
	border-spacing: 0;
	overflow: hidden;
	font-size: 14.5px;
}

body.wpam-site .woocommerce table.shop_table th {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--wpam-line);
	color: var(--wpam-ink-500);
	background: var(--wpam-surface-alt);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}

body.wpam-site .woocommerce table.shop_table td {
	padding: 15px 16px;
	border: 0;
	border-bottom: 1px solid var(--wpam-line-soft);
	color: var(--wpam-ink-700);
	vertical-align: middle;
}

body.wpam-site .woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

body.wpam-site .woocommerce table.shop_table td code {
	padding: 3px 7px;
	border: 1px solid var(--wpam-line);
	border-radius: 6px;
	color: var(--wpam-ink-900);
	background: var(--wpam-surface-alt);
	font-size: 13px;
}

body.wpam-site .woocommerce table.shop_table .button {
	min-height: 38px;
	padding-inline: 14px;
	font-size: 13px;
}

/*
 * Below 720px Kadence pulls the boxed article out to the screen edges with a
 * -1rem margin, on the assumption that the article's own padding is the gutter.
 * That padding is zero here (see the frame section), so the gutter has to come
 * back as padding on the inner wrap -- 1rem, which is what the hero above it
 * uses, so the two still line up.
 */
@media (max-width: 719px) {
	body.wpam-site.woocommerce-page .entry-content-wrap,
	body.wpam-site.post-type-archive-product .entry-content-wrap,
	body.wpam-site.single-product .entry-content-wrap {
		padding-inline: 1rem;
	}
}

/* ====================================================== 8. narrow views */

@media (max-width: 1023px) {
	body.wpam-site.woocommerce ul.products.product-archive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.wpam-site .wc-block-components-main {
		padding-right: 28px;
	}
}

@media (max-width: 899px) {
	body.wpam-site .woocommerce:has(> .account-navigation-wrap),
	body.wpam-site .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		gap: 28px 0;
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	body.wpam-site.woocommerce-page .entry-hero .entry-header,
	body.wpam-site.post-type-archive-product .entry-hero .entry-header {
		padding-block: 48px 0;
	}

	body.wpam-site .wpam-store-intro {
		padding-block: 14px 24px;
		margin-bottom: 32px;
	}

	body.wpam-site.woocommerce-page .content-container,
	body.wpam-site.post-type-archive-product .content-container,
	body.wpam-site.single-product .content-container {
		padding-block: 0 64px;
	}

	body.wpam-site.woocommerce ul.products.product-archive {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}

	body.wpam-site.woocommerce ul.products.product-archive li.product .product-details {
		padding: 22px;
	}

	body.wpam-site.woocommerce ul.products.product-archive li.product span.onsale {
		margin: 22px 22px 0;
	}

	body.wpam-site #customer_login.u-columns,
	body.wpam-site .woocommerce-account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wpam-site .u-columns > .col-1,
	body.wpam-site .u-columns > .col-2 {
		padding: 24px;
	}

	body.wpam-site .wc-block-components-main {
		padding-right: 0;
	}

	/*
	 * WooCommerce's narrow cart row is a three-column grid: image, product, and
	 * the row total tucked under the image. With the image gone the total was
	 * left sitting in a narrow column to the left of the name it belongs to.
	 *
	 * One column instead, product then total. Putting the total back on the
	 * right was tried first and is worse -- the product cell does not yield the
	 * width, so the total printed on top of the description.
	 */
	/*
	 * WooCommerce's narrow cart row is a three-column grid -- an 80px image
	 * column, then the product across the other two, with the row total tucked
	 * under the image. With no image to put there, the total ended up in a
	 * zero-content column to the left of the name it belongs to, and the first
	 * track still reserved its 80px, indenting every row.
	 *
	 * Both cells span all three columns instead: product, then total beneath
	 * it. Overriding the track list rather than the cells was tried first and
	 * does not work -- WooCommerce's own template rule wins.
	 */
	body.wpam-site table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 1 / 4;
		grid-row: 1;
	}

	body.wpam-site table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		align-items: flex-start;
		grid-column: 1 / 4;
		grid-row: 2;
		margin-top: 12px;
		text-align: left;
	}

	body.wpam-site .wc-block-components-sidebar {
		padding: 22px;
	}

	body.wpam-site .wpam-empty-cart-actions .wpam-button {
		width: 100%;
	}

	/*
	 * `shop_table_responsive` turns rows into stacked blocks with the column
	 * name in a data-title pseudo-element. Restore the card border that the
	 * rounded table corners were providing.
	 */
	body.wpam-site .woocommerce table.shop_table_responsive tr {
		display: block;
		margin-bottom: 14px;
		border: 1px solid var(--wpam-line);
		border-radius: var(--wpam-radius-sm);
	}

	body.wpam-site .woocommerce table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
	}

	body.wpam-site .woocommerce table.shop_table_responsive td::before {
		color: var(--wpam-ink-500);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
}