/*
 * The shop in the portermason.com design system: tokens and base.css come
 * from the parent. This file only fits WooCommerce's blocks into it.
 */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Page head: the landing spacing from base.css (56px above the title). */
.pm-shop__title {
	margin: 56px 0 0;
	font-size: clamp(var(--wp--preset--font-size--title-mobile), 5.625vw, var(--wp--preset--font-size--title));
}

/* WooCommerce caps the cart and checkout titles at 1000px, which shifts them off the indent. */
.pm-main.pm-shop > .pm-shop__title {
	max-width: var(--wp--style--global--content-size);
}

.pm-shop > .pm-intro {
	margin-top: 8px;
}

/* Reading page (policies): about half the page's width, centered. Text after a heading sits half a line below it. */
.pm-main.pm-reading > .pm-shop__title,
.pm-reading .wp-block-post-content > * {
	max-width: 640px;
}

.pm-main.pm-reading > .pm-shop__title {
	font-size: var(--wp--preset--font-size--section);
}

.pm-reading .wp-block-post-content {
	margin-top: 24px;
	margin-bottom: 80px;
}

.pm-reading .wp-block-post-content > h2 {
	margin-top: 32px;
	margin-bottom: 0;
}

.pm-reading .wp-block-post-content > h2 + * {
	margin-top: 12px;
}

.pm-shop > .pm-products,
.pm-shop > .pm-product__layout {
	margin-top: 40px;
}

/* Product cards: the photo (on white) as a tile with a 1px line, so white meets white with an edge, and the .pm-tile lift on hover. */
/*
 * Three across on desktop, two on phones. WooCommerce's responsive grid works
 * out its columns without this gap, so with the gap it fits only two.
 */
.pm-products .wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 28px;
}

.pm-products .wc-block-components-product-image {
	margin: 0 0 14px;
}

.pm-products .wc-block-components-product-image img {
	display: block;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tile);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-products .wc-block-components-product-image a:hover img,
.pm-products .wc-block-components-product-image a:focus-visible img {
	transform: translateY(-3px);
	box-shadow: 0 6px 0 var(--wp--preset--color--ink);
}

.pm-product-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.pm-product-card__title a {
	text-decoration: none;
}

.pm-product-card__price {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-3);
}

/* WooCommerce centers the button; the card's text is left-aligned, so the button is too. */
.pm-products .pm-product-card__button {
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: 14px;
	text-align: left;
}

.pm-products .pm-product-card__button .wp-element-button {
	margin-left: 0;
}

/*
 * Buttons. Every WooCommerce button (Add to cart, Choose options, Proceed to
 * checkout, Place order) is the shop's one action color, custom.shop.buy, so
 * the next step is never in doubt; everything else on the page stays quiet.
 */
.pm-shop .wp-element-button,
.pm-shop .wc-block-components-button:not(.is-link) {
	padding: 10px 18px;
	border-color: var(--wp--custom--shop--buy);
	line-height: normal;
	text-decoration: none;
	color: var(--wp--custom--shop--buy-ink);
	background: var(--wp--custom--shop--buy);
}

.pm-shop .wp-element-button:hover,
.pm-shop .wc-block-components-button:not(.is-link):hover {
	border-color: var(--wp--custom--shop--buy-hover);
	color: var(--wp--custom--shop--buy-ink);
	background: var(--wp--custom--shop--buy-hover);
}

/* Glyphs on the shop's circles are currentColor: white unless a header setting says otherwise. */
.pm-dot {
	color: var(--wp--preset--color--white);
}

/* Single product: image and details side by side, like the single illustration (1.4fr / 1fr, 44px apart). */
.pm-product__crumbs {
	margin-top: 44px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-2);
}

/*
 * The product page: the title and subtitle across the top (Porter,
 * 2026-10-28: long book titles wrapped in the buy column), then two columns:
 * on the left the photos, then Description and Details; on the right the
 * summary, the buy form and Better together, so the upsell sits right under
 * Buy now. On phones, one column: photos, title, the buy column, then the
 * description.
 */
.pm-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	grid-template-areas: "head head" "media summary" "info summary";
	grid-template-rows: auto auto 1fr;
	/* The page's own side gutter (32px), so the middle never outweighs the edges (Porter, 2026-10-28). */
	gap: 0 var(--wp--custom--layout--gutter);
}

.pm-product__head {
	grid-area: head;
	margin-bottom: 32px;
}

.pm-product__media {
	grid-area: media;
}

.pm-product__summary {
	grid-area: summary;
	align-self: start;
}

.pm-product__info {
	grid-area: info;
	min-width: 0;
}

/* The gallery fills its column (WooCommerce caps the block at 512px), so the photo meets the text. */
.pm-product__media .wp-block-woocommerce-product-image-gallery,
.pm-product__media .woocommerce-product-gallery {
	width: 100%;
	max-width: none;
}

.pm-product__summary .pm-buy-form {
	margin-top: 24px;
}

.pm-product__summary > .pm-buy-form:first-child {
	margin-top: 0;
}

/* The 52px section size across the page; if a title ever wraps, it wraps in even lines. */
.pm-product__title {
	margin: 0;
	font-size: clamp(var(--wp--preset--font-size--section-mobile), 4.0625vw, var(--wp--preset--font-size--section));
	line-height: 1.05;
	text-wrap: balance;
}

/* A book's series line under its title (inc/subtitle.php). */
.pm-product__subtitle {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--intro);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--text-2);
}

.pm-product__summary .wc-block-add-to-cart-form {
	margin-top: 24px;
}

/*
 * The top of the product page keeps to three sizes, two weights and one gray
 * (Porter, 2026-10-28), on the hub's scale: the title (52px, bold); the
 * price line (26px, bold); the subtitle (20px); 15px for the facts, "Format"
 * and the pills. Bold only for the
 * title, the price line, the chosen pill's price and the buttons. Gray
 * (text-2) for the subtitle, the facts, "Format" and the prices not chosen.
 *
 * The right column leads with "$60.00 | Hardcover + PDF" and the facts under
 * it, then a 1px rule, then Format, the pills and the buttons (inc/buy.php,
 * pm_shop_lead()).
 */
.pm-product__leads {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pm-product__lead[hidden] {
	display: none;
}

/* 26px, the hub's strip-title step: half the title, so the column has its own anchor (Porter, 2026-10-28). */
.pm-product__price {
	margin: 0;
	font-size: var(--wp--preset--font-size--strip-title);
	font-weight: 700;
	line-height: 1.25;
}

/* Buy now gets a little room from the choices above it. */
.pm-product .pm-formats {
	margin-bottom: 32px;
}

/* The format after the price, past a divider, as in the featured box. */
.pm-product__format {
	margin-left: 6px;
	padding-left: 12px;
	border-left: 2px solid var(--wp--preset--color--line);
}

.pm-product__facts {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
	color: var(--wp--preset--color--text-2);
}

.pm-product__facts span + span::before {
	content: "·";
	margin: 0 8px;
}

.pm-product__summary .pm-product__leads ~ .pm-buy-form {
	margin-top: 20px;
}

/* A bundle: the What's inside box already sets the price apart, so no rule (Porter, 2026-10-29). */
.pm-product__summary:has(.pm-inside) .pm-product__leads {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * Description tabs as the nav's underline: no boxes, the open tab underlined
 * in the shop color. The panel's own "Description" heading repeats the tab, so it's hidden.
 * WooCommerce's tab rules start ".woocommerce div.product .woocommerce-tabs", so these do too, to outrank them.
 */
.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	margin: 0 0 24px;
	padding: 0 0 12px;
	list-style: none;
}

.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.woocommerce div.product .pm-product__details .woocommerce-tabs ul.tabs li.active a {
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--shop--color);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

/* Desktop: room between the photos' thumbnails and the tabs (Porter, 2026-10-28: 56px was too much, now 32px). */
@media (min-width: 768px) {
	.pm-product__details {
		margin-top: 32px;
	}
}

.pm-product__details .woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pm-product__details .woocommerce-Tabs-panel {
	max-width: 640px;
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
}

/* The footer has a fourth link (Shop), so on narrow phones the row wraps instead of running off the edges. */
.pm-footer__sections {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 12px;
}

/*
 * Buying (inc/buy.php): the same form in the featured box and on the product
 * page. Format pills with their prices, every option visible; the chosen one
 * is a pale fill and an ink outline, so it reads as chosen without competing
 * with Buy now, the one bold red thing beside it. Add to cart is its outlined
 * partner.
 */
.pm-formats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.pm-formats__legend {
	margin-bottom: 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-2);
}

.pm-format {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: 1.2;
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.pm-format input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pm-format__price {
	color: var(--wp--preset--color--text-2);
}

/* WooCommerce gives store-page labels a bottom margin (.woocommerce-page label); the row gap is the flex gap. */
.pm-formats .pm-format {
	margin: 0;
}

.pm-format:hover {
	border-color: var(--wp--preset--color--ink-hover);
}

/* 1px wider border when chosen, with the padding 1px less, so nothing shifts. */
.pm-format:has(input:checked) {
	padding: 7px 14px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--custom--shop--tint);
}

.pm-format:has(input:checked) .pm-format__price {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.pm-format:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.pm-buy__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Buy now and Add to cart: the size and weight of the header's "Shop" (20px bold), Buy now in red. Both 56px tall, like the quantity pill. */
.pm-shop .pm-buy__now.wp-element-button,
.pm-buy__add {
	box-sizing: border-box;
	height: 56px;
	padding: 0 30px;
	border-width: 2px;
	border-style: solid;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

/* Buy now's 3px ledge makes it stand out (Porter, 2026-10-29). The margin makes room for it, so the centered row centers face and ledge together and the red shape doesn't hang below the pills beside it. */
.pm-shop .pm-buy__now.wp-element-button {
	margin-bottom: 3px;
	box-shadow: 0 3px 0 var(--wp--custom--shop--buy-hover);
}

.pm-buy__add {
	padding: 0 24px;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.pm-buy__add:hover {
	border-color: var(--wp--preset--color--ink-hover);
	color: var(--wp--preset--color--ink-hover);
}

/* Quantity: one pill, − 1 +, as tall as the buttons beside it. */
.pm-qty {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 56px;
	padding: 0 6px;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
}

.pm-qty label {
	display: flex;
	align-self: stretch;
	align-items: center;
	margin: 0;
}

.pm-qty input {
	width: 40px;
	height: 36px;
	margin: 0;
	padding: 0;
	line-height: normal;
	border: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 600;
	text-align: center;
	background: none;
	-moz-appearance: textfield;
}

.pm-qty input::-webkit-inner-spin-button,
.pm-qty input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.pm-qty__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: 22px;
	line-height: 36px;
	color: var(--wp--preset--color--ink);
	background: none;
	cursor: pointer;
}

.pm-qty__step:hover {
	background: var(--wp--custom--shop--tint);
}

/*
 * The Details tab: a plain two-column list, labels left, values upright.
 * WooCommerce centers, italicizes and stripes it with .woocommerce table.shop_attributes rules, hence the long selectors.
 */
.pm-shop table.woocommerce-product-attributes.shop_attributes {
	max-width: 640px;
	border-collapse: collapse;
}

.pm-shop table.woocommerce-product-attributes.shop_attributes tr :is(th, td) {
	padding: 10px 24px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line-2);
	font-size: var(--wp--preset--font-size--body);
	font-style: normal;
	text-align: left;
	vertical-align: top;
	background: none;
}

.pm-shop table.woocommerce-product-attributes.shop_attributes tr th {
	width: 140px;
	font-weight: 600;
}

.pm-shop table.woocommerce-product-attributes.shop_attributes tr td p {
	margin: 0;
}

/* WooCommerce's small-screen stylesheet makes every row and cell a stacked block under 768px; the list is short enough to stay two columns on a phone (Porter, 2026-10-28). */
.pm-shop table.woocommerce-product-attributes.shop_attributes tr {
	display: table-row;
}

.pm-shop table.woocommerce-product-attributes.shop_attributes tr :is(th, td) {
	display: table-cell;
}

/* Phones and iPads in portrait, where the column is narrow: a tighter label column, and values stay on one line (the ISBN broke at its hyphens). */
@media (max-width: 1100px) {
	.pm-shop table.woocommerce-product-attributes.shop_attributes tr th {
		width: 112px;
	}

	.pm-shop table.woocommerce-product-attributes.shop_attributes tr :is(th, td) {
		padding-right: 16px;
	}

	.pm-shop table.woocommerce-product-attributes.shop_attributes tr td {
		white-space: nowrap;
	}
}


@media (max-width: 767px) {
	.pm-products .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.pm-shop__title {
		margin-top: 28px;
	}

	.pm-shop > .pm-products,
	.pm-shop > .pm-product__layout {
		margin-top: 24px;
	}

	.pm-product__crumbs {
		margin-top: 20px;
	}

	.pm-product__layout {
		gap: 24px;
	}
}

/* Shop home: the featured product, then a list section per category. */
.pm-shop-home .wp-block-post-content > .pm-featured {
	margin-top: 48px;
}

.pm-shop-home .pm-product-list {
	margin-top: 80px;
}

/* 404 (templates/404.html): Home's sections under its heading and line; the line's own margin is the gap. */
.pm-shop-home.pm-404 .wp-block-post-content > .pm-featured {
	margin-top: 0;
}

/* Category pages: the title with its circle, 56px under the header, as the main site's landing page titles sit. */
.pm-shop-category .pm-product-list {
	margin-top: 56px;
}

@media (max-width: 767px) {
	.pm-shop-home .wp-block-post-content > .pm-featured {
		margin-top: 20px;
	}

	.pm-shop-home .pm-product-list {
		margin-top: 48px;
	}

	.pm-shop-category .pm-product-list {
		margin-top: 28px;
	}
}

/*
 * A bundle's line, cart and checkout (inc/bundle-cart.php): what's inside
 * stands in for its blurb, as a bulleted list. The saving is the shop's
 * pointed tag. "You saved" sits right above the total, in its box.
 */
.pm-cart-bundle .wc-block-components-product-metadata__description {
	display: none;
}

.pm-cart-bundle .wc-block-components-product-details {
	margin: 6px 0 4px;
	padding-left: 18px;
	font-size: var(--wp--preset--font-size--small);
}

.pm-cart-bundle .wc-block-components-product-details > span {
	display: list-item;
	margin-bottom: 4px;
	list-style: disc;
}

.pm-cart-bundle .wc-block-components-product-details span[aria-hidden="true"] {
	display: none;
}

.pm-cart-bundle .wc-block-components-sale-badge {
	margin: 0;
	padding: 3px 9px 3px 17px;
	border: 0;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
	background:
		radial-gradient(circle at 8px 50%, var(--wp--preset--color--white) 0 2px, transparent 2.5px),
		var(--wp--custom--shop--ok);
	clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%);
}

.pm-cart-saved {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--wp--custom--shop--ok);
}

/* The cart: same box as Estimated total, no line between them. */
.wp-block-woocommerce-cart-order-summary-totals-block:has(.pm-cart-saved) {
	padding-bottom: 0;
}

.wp-block-woocommerce-cart-order-summary-totals-block:has(.pm-cart-saved) ~ .wc-block-components-totals-wrapper {
	padding-top: 0;
	border-top: 0;
}

.wc-block-cart__sidebar .pm-cart-saved {
	padding: 16px 0 4px;
}

/* Checkout: above Subtotal, which WooCommerce prints first. */
.wp-block-woocommerce-checkout-order-summary-totals-block:has(.pm-cart-saved) {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-checkout-order-summary-totals-block > :has(.pm-cart-saved) {
	order: -1;
}

.wp-block-woocommerce-checkout-order-summary-totals-block:has(.pm-cart-saved) .wp-block-woocommerce-checkout-order-summary-subtotal-block {
	padding-top: 4px;
}

.wc-block-checkout__sidebar .pm-cart-saved,
.wc-block-components-checkout-order-summary__content .pm-cart-saved {
	padding: 16px 16px 0;
}

/*
 * Cart lines on phones, every item the same: the name across the top, the
 * photo at under half the width, and beside it the price, the saving, the
 * format and the quantity, one price only. A bundle's list runs full width
 * under that. The !importants beat WooCommerce's own narrow-cart grid.
 */
@media (max-width: 599px) {
	/* WooCommerce's fixed 132px name column pushes the row past the screen on the narrowest phones. */
	.wc-block-cart table.wc-block-cart-items,
	.wc-block-cart table.wc-block-cart-items tbody {
		display: block;
		width: 100%;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
		display: grid !important;
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto auto auto 1fr !important;
		align-items: start;
		gap: 6px 14px;
	}

	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__product,
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__wrap {
		display: contents !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-components-product-name {
		grid-area: 1 / 1 / 2 / -1 !important;
		margin: 0 0 4px !important;
		font-size: var(--wp--preset--font-size--body-large);
		font-weight: 600;
	}

	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__image {
		grid-area: 2 / 1 / 7 / 2 !important;
		width: 100% !important;
		padding: 0 !important;
	}

	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__image img {
		width: 100% !important;
		height: auto;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices {
		grid-area: 2 / 2 / 3 / 3 !important;
		margin: 0 !important;
		font-size: var(--wp--preset--font-size--body-large);
		font-weight: 600;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices del {
		font-weight: 400;
	}

	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__total {
		grid-area: 3 / 2 / 4 / 3 !important;
		justify-content: flex-end;
		padding: 0 !important;
	}

	/* The price sits beside the photo now; only the saving stays here. */
	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__total .wc-block-components-product-price {
		display: none !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row:not(.pm-cart-bundle) td.wc-block-cart-item__total {
		display: none !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-components-product-metadata {
		grid-area: 4 / 2 / 5 / 3 !important;
		margin: 0 !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__quantity {
		grid-row: 5 !important;
		grid-column: 2 !important;
	}

	.wc-block-cart .wc-block-cart-items .pm-cart-bundle .wc-block-cart-item__quantity {
		grid-row: 4 !important;
	}

	.wc-block-cart .wc-block-cart-items .pm-cart-bundle .wc-block-components-product-metadata {
		grid-area: 7 / 1 / 8 / -1 !important;
		margin-top: 6px;
	}

	/* Beside the photo, everything lines up on the right. */
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices,
	.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__total,
	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__quantity,
	.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row:not(.pm-cart-bundle) .wc-block-components-product-metadata {
		justify-self: end;
		text-align: right;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-end !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__quantity {
		display: flex !important;
		justify-content: flex-end;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	.wc-block-cart .wc-block-cart-items .wc-block-cart-item__remove-link {
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	/* The sticky Check out bar carries the total. */
	.pm-cart-sticky {
		margin: 0 0 10px;
	}

	.pm-cart-sticky[hidden] {
		display: none;
	}

	.pm-cart-sticky p {
		display: flex;
		justify-content: space-between;
		margin: 0;
		font-size: var(--wp--preset--font-size--body-large);
		font-weight: 700;
	}

	.pm-cart-sticky .pm-cart-sticky__saved {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		text-align: right;
		color: var(--wp--custom--shop--ok);
	}
}

/*
 * Checkout: an item's format, or a bundle's list, runs under its photo, the
 * full width of the line. The photo, name, prices and total keep their row.
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 12px;
}

.wc-block-components-order-summary-item .wc-block-components-order-summary-item__image {
	grid-row: 1 / span 2;
}

.wc-block-components-order-summary-item .wc-block-components-order-summary-item__description {
	display: contents;
}

.wc-block-components-order-summary-item .wc-block-components-order-summary-item__total-price {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.wc-block-components-order-summary-item .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-cart-item__prices {
	grid-column: 2;
	padding-left: 12px;
}

.wc-block-components-order-summary-item .wc-block-components-product-metadata {
	grid-column: 1 / -1;
	margin-bottom: 8px;
}

/*
 * Checkout on phones: WooCommerce prints the order summary twice, collapsed at
 * the top and in full above Place order. Only the full one stays, right where
 * they decide, with each bundle's list closed until they ask (bundle-cart.js).
 */
.wc-block-components-sidebar-layout:not(.is-large) .wc-block-checkout__sidebar {
	display: none;
}

.checkout-order-summary-block-fill .pm-cart-saved {
	padding: 16px 16px 0;
}

/*
 * Express buttons, cart and checkout: Link, Apple Pay, Google Pay (Porter,
 * 2026-11-04). Stripe adds them Apple Pay, Google Pay, Link, each in its own
 * grid slot, so this only moves them on screen; keyboard order stays Stripe's.
 * The product page's buttons are one Stripe frame and keep Stripe's order.
 */
#express-payment-method-express_checkout_element_link { order: 1; }
#express-payment-method-express_checkout_element_applePay { order: 2; }
#express-payment-method-express_checkout_element_googlePay { order: 3; }

.pm-cart-contents {
	display: block;
	margin: 8px auto 0 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	text-decoration: underline;
	color: inherit;
	background: none;
	cursor: pointer;
}

.pm-cart-contents::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px 3px 8px;
	border-right: 1.5px solid;
	border-bottom: 1.5px solid;
	transform: rotate(45deg);
}

.pm-cart-contents[aria-expanded="true"]::after {
	margin-bottom: 0;
	transform: rotate(-135deg);
}

.pm-cart-contents[aria-expanded="false"] + .wc-block-components-product-details {
	display: none;
}

/* Only while the bar is sticky: at the end of the page the button rejoins the summary, which has its own total. */
.wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky) .pm-cart-sticky {
	display: none;
}

/* The upgrade offer: the suggestion box, with what they'd also get. */
.pm-upgrade__also {
	margin: 10px 0 2px;
	font-size: var(--wp--preset--font-size--small);
}

.pm-upgrade ul {
	margin: 0 0 12px;
	padding-left: 18px;
	font-size: var(--wp--preset--font-size--small);
}

.pm-upgrade .pm-added__suggest-title {
	margin-bottom: 10px;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--custom--shop--ok);
}

.pm-upgrade .pm-added__suggest-add {
	display: block;
	width: 100%;
	padding: 9px 14px;
	color: var(--wp--preset--color--white);
	background: var(--wp--custom--shop--ok);
	border-color: var(--wp--custom--shop--ok);
}

.pm-upgrade {
	border: 2px solid var(--wp--custom--shop--ok);
	background: var(--wp--preset--color--white);
}

.pm-cart-upgrade {
	margin-bottom: 20px;
}

.pm-cart-upgrade .pm-added__suggest {
	margin: 0;
}

/* The pop-up, when the add made a bundle: what they asked for, then the news. */
.pm-added__news {
	margin: 4px 0 12px;
	font-weight: 600;
	color: var(--wp--custom--shop--ok);
}

.pm-added__upgraded {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--small);
}

.pm-added__tag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px 1px 15px;
	font-size: var(--wp--preset--font-size--x-small, 13px);
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
	background:
		radial-gradient(circle at 7px 50%, var(--wp--preset--color--white) 0 2px, transparent 2.5px),
		var(--wp--custom--shop--ok);
	border-radius: 3px;
	clip-path: polygon(0 50%, 10px 0, 100% 0, 100% 100%, 10px 100%);
}

.pm-added__bundled {
	margin: 12px 0;
	font-size: var(--wp--preset--font-size--small);
}

.pm-added__bundled p {
	margin: 0 0 4px;
}

.pm-added__bundled ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

/*
 * The cart's add-on suggestions ("How about these?"): the shop's
 * own cards (pm_shop_cart_suggestions(), inc/added.php), three across the
 * cart's column, under a section heading, not the 52px h2.
 */
.wc-block-cart__main .pm-cart-suggestions {
	margin-top: 40px;
}

.wc-block-cart__main .pm-cart-suggestions > h2 {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--strip-title);
	font-weight: 600;
}

.wc-block-cart__main .pm-cart-suggestions .pm-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
}

@media (max-width: 599px) {
	.wc-block-cart__main .pm-cart-suggestions .pm-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wc-block-cart__main .wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
	}

	.pm-shop .wc-block-cart__main .wp-block-woocommerce-product-collection .wp-element-button {
		width: 100%;
	}
}

/*
 * My account (WooCommerce's [woocommerce_my_account] on a page, so this
 * theme's page.html): the full column, not WooCommerce's 1000px, and its menu
 * a quiet column beside the content, the current item underlined like the
 * product tabs. Logged out, "Login" is a section heading under the page
 * title, and the form keeps to a readable width.
 */
.woocommerce-account .pm-main.pm-shop .woocommerce {
	max-width: var(--wp--style--global--content-size);
	margin-top: 40px;
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation {
	width: 200px;
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-content {
	width: calc(100% - 244px);
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation ul {
	margin: 0;
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation li {
	padding: 0 0 16px;
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation li a {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--shop--color);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.woocommerce-account .pm-shop .woocommerce > h2 {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--strip-title);
	font-weight: 600;
}

.woocommerce-account .pm-shop .woocommerce-form-login {
	max-width: 560px;
}

@media (max-width: 767px) {
	.woocommerce-account .pm-main.pm-shop .woocommerce {
		margin-top: 24px;
	}

	/* Phones: the menu as a row that wraps, above the content. */
	.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation,
	.woocommerce-account .pm-shop .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 20px;
		margin: 0 0 24px;
		padding: 0 0 16px;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.woocommerce-account .pm-shop .woocommerce-MyAccount-navigation li {
		padding: 0;
	}
}

/* "You may also like…" under a product (its upsells, e.g. the bundle a book is in), as a section heading. */
.pm-product .up-sells {
	margin-top: 56px;
}

.pm-product .up-sells > h2 {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--strip-title);
	font-weight: 600;
}


/*
 * Details by format: what all formats share, then a section per format. The
 * format's name is the section heading, on a 2px ink rule (heavier than the
 * table's 1px rows), and its rows are indented under it. Porter, 2026-10-28:
 * these lines stay; the tab strip has none but the open tab's underline.
 */
.pm-specs__format {
	margin: 32px 0 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 600;
	letter-spacing: 0;
}

/* A bundle's Details: each item's name heads its own formats, a step bigger, with room above it. */
.pm-specs__item {
	margin: 48px 0 4px;
	font-size: var(--wp--preset--font-size--strip-title);
	font-weight: 600;
	letter-spacing: 0;
}

.pm-specs__item:first-child {
	margin-top: 8px;
}

.pm-shop .pm-specs__format + table.woocommerce-product-attributes.shop_attributes {
	width: calc(100% - 24px);
	margin-left: 24px;
}

/*
 * The product page on phones: the buy buttons in the first screen. The
 * photo stays on top (its thumbnails go; swipe instead), then the title, the
 * formats and the buttons, and the description moves below them.
 */
@media (max-width: 767px) {
	/*
	 * Phones: Buy now on the first screen (Porter, 2026-10-28). No
	 * breadcrumb (the header's Books circle does it), no "Format" label (the
	 * price line names the chosen format; it stays for screen readers), no
	 * prices on the pills (the price line changes as you tap, and the three
	 * fit on one row), and the 26px title.
	 */
	.pm-product__crumbs {
		display: none;
	}

	.pm-product .pm-formats__legend {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pm-product .pm-format__price {
		display: none;
	}

	.pm-product__price {
		font-size: var(--wp--preset--font-size--intro);
	}

	.pm-product .pm-formats {
		margin-bottom: 24px;
	}

	.pm-product__summary {
		display: flex;
		flex-direction: column;
	}

	/* 26px, the strip-title step: the title fits one line, with the price line (20) and subtitle (17) under it. */
	.pm-product .pm-product__title {
		font-size: var(--wp--preset--font-size--strip-title);
		line-height: 1.15;
	}

	/* Smaller pills, so the three formats take two rows, not three. */
	.pm-product .pm-format {
		padding: 7px 12px;
		font-size: var(--wp--preset--font-size--small);
	}

	.pm-product .pm-format:has(input:checked) {
		padding: 6px 11px;
	}

	.pm-product .pm-product__subtitle {
		margin-top: 6px;
		font-size: var(--wp--preset--font-size--body-large);
	}

	/* The layout's 24px gap is the space between the title and the formats. */
	.pm-product__head {
		margin-bottom: 0;
	}

	/* Under the gallery's dots the title sits closer (14px); a single photo, with no dots, keeps the 24px. */
	.pm-product__layout:has(.pm-gallery__set:not([hidden]) .pm-gallery__thumbs) .pm-product__head {
		margin-top: -10px;
	}

	.pm-product__summary .pm-buy-form {
		order: 2;
		margin-top: 16px;
	}

	.pm-product__summary > .pm-buy-form:first-child {
		margin-top: 0;
	}

	.pm-product__summary .pm-together {
		order: 3;
	}

	.pm-product__leads {
		order: 2;
	}

	.pm-product__facts {
		font-size: var(--wp--preset--font-size--small);
	}

	.pm-product__media .flex-control-thumbs {
		display: none;
	}

	.pm-product__media .woocommerce-product-gallery {
		margin-bottom: 0;
	}

	.pm-product__crumbs {
		margin-top: 14px;
	}

	.pm-product__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "head" "summary" "info";
		grid-template-rows: auto;
		gap: 16px;
	}

	.pm-product .pm-formats {
		margin-bottom: 14px;
	}

	.pm-buy__actions {
		display: grid;
		grid-template-columns: auto 1fr;
	}

	.pm-buy__actions .pm-buy__add {
		grid-column: 1 / -1;
	}

	.pm-featured .pm-buy__actions {
		grid-template-columns: 1fr 1fr;
	}

	.pm-featured .pm-buy__actions .pm-buy__add {
		grid-column: auto;
	}

	.pm-shop .pm-buy__now.wp-element-button,
	.pm-buy__add {
		height: 52px;
		padding: 0 16px;
		font-size: var(--wp--preset--font-size--body-large);
	}

	.pm-qty {
		height: 52px;
	}
}

/*
 * Bundles (the Porter Mason Shop plugin): the saving as a small green tag
 * beside a price (custom.shop.ok, a darker green than About's, so 13px text
 * passes 4.5:1), and "What's inside" above a bundle's buy form.
 */
.pm-saving {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	line-height: 1.4;
	vertical-align: 0.1em;
	color: var(--wp--custom--shop--ok);
	background: var(--wp--custom--shop--ok-tint);
}

.pm-inside {
	margin-bottom: 24px;
	padding: 16px 18px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--custom--shop--tint);
}

.pm-inside__title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--shop--color);
}

.pm-inside__items {
	margin: 0;
	padding-left: 18px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

/* "$30.00 if bought separately", bold at the list's size, so the tag beside it can be that size too (Porter, 2026-10-29). */
.pm-inside__value {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
}

/* The sale tag from Bundle and save (pointed, with a punched hole), at body size. */
.pm-saving--tag {
	padding: 3px 11px 3px 21px;
	font-size: inherit;
	line-height: 1.3;
	vertical-align: baseline;
	color: var(--wp--preset--color--white);
	background:
		radial-gradient(circle at 10px 50%, var(--wp--custom--shop--tint) 0 2.5px, transparent 3px),
		var(--wp--custom--shop--ok);
	border-radius: 3px;
	clip-path: polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%);
}

/* A bundle's price line: what the items cost one at a time, crossed out and gray, then the price, then the percent off. */
.pm-product__was {
	margin-right: 4px;
	font-weight: 400;
	color: var(--wp--preset--color--text-2);
	text-decoration-thickness: 2px;
}

/* "25% off": squared off (Porter, 2026-10-29), a round pill read as a button. */
.pm-saving--off {
	border-radius: 3px;
}

/* On the product page's price line, at body size. */
.pm-product__price .pm-saving--off {
	margin-left: 10px;
	padding: 3px 10px;
	font-size: var(--wp--preset--font-size--body);
	vertical-align: 0.15em;
}

/*
 * "Added to your cart" (inc/added.php): a modal dialog with the featured
 * box's edge (2px ink, hard 6px shadow). Check out is the red button, Keep
 * shopping its outlined partner; the add-on suggestion is a quiet row below.
 * While it's open, WooCommerce's own green notice says nothing new, so it hides.
 */
.pm-has-added :is(.wc-block-components-notice-banner.is-success, .woocommerce-message) {
	display: none;
}

.pm-added {
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	padding: 26px 26px 22px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

/* Phones: edge to edge, for the long names. */
@media (max-width: 599px) {
	.pm-added {
		width: 100vw;
		max-width: 100vw;
		margin: auto 0;
		padding: 24px 16px 20px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.pm-added__keep {
		padding: 0 8px;
		white-space: nowrap;
	}
}

.pm-added::backdrop {
	background: rgb(22 22 22 / 0.45);
}

.pm-added__close {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
}

.pm-added__close button {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: none;
	cursor: pointer;
}

.pm-added__close button:hover {
	background: var(--wp--custom--shop--tint);
}

.pm-added__title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 700;
	color: var(--wp--custom--shop--ok);
}

.pm-added__item {
	display: grid;
	grid-template-columns: 96px 1fr;
	align-items: center;
	gap: 14px;
}

.pm-added__item img {
	display: block;
	width: 96px;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--tile);
}

.pm-added__item p {
	margin: 0;
}

.pm-added__name {
	font-weight: 600;
	line-height: 1.3;
}

.pm-added__format {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-2);
}

.pm-added__price {
	margin-top: 4px !important;
	font-weight: 600;
}

.pm-added__cart {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line-2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-2);
}

.pm-added__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}

.pm-added__actions form {
	margin: 0;
}

.pm-added .pm-added__checkout.wp-element-button,
.pm-added__keep {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 2px solid var(--wp--custom--shop--buy);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--custom--shop--buy-ink);
	background: var(--wp--custom--shop--buy);
}

.pm-added .pm-added__checkout.wp-element-button:hover {
	border-color: var(--wp--custom--shop--buy-hover);
	background: var(--wp--custom--shop--buy-hover);
}

.pm-added__keep {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.pm-added__keep:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
}

.pm-added__suggest {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--custom--shop--tint);
}

.pm-added__suggest-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--shop--color);
}

.pm-added__suggest-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.pm-added__suggest-item img {
	display: block;
	width: 56px;
	height: auto;
	border-radius: var(--wp--custom--radius--tile);
}

.pm-added__suggest-name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.pm-added__suggest-price {
	display: block;
	font-weight: 500;
	color: var(--wp--preset--color--text-2);
}

.pm-added__suggest-add {
	padding: 6px 14px;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.pm-added__suggest-add:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
}

/*
 * The summary column is a container, so the buy row and the bundle box lay
 * themselves out by the room they have, not the screen. At iPad portrait
 * and landscape phone widths, Buy now takes what's left after the quantity and Add to
 * cart gets its own full-width row, as on phones (Porter, 2026-10-28).
 */
.pm-product__summary {
	container: pm-summary / inline-size;
}

/* The three buttons need about 444px in one row; below that they used to wrap, so they get the stacked treatment instead (landscape phones, iPads in portrait). */
@container pm-summary (max-width: 444px) {
	.pm-buy__actions {
		display: grid;
		grid-template-columns: auto 1fr;
	}

	.pm-buy__actions .pm-buy__add {
		grid-column: 1 / -1;
	}

	.pm-shop .pm-buy__now.wp-element-button,
	.pm-buy__add {
		height: 52px;
		padding: 0 16px;
		font-size: var(--wp--preset--font-size--body-large);
	}

	.pm-qty {
		height: 52px;
	}
}

/* The featured box on the shop home: between phones and about 920px its text column is too narrow for Buy now and Add to cart side by side at their desktop size, so they get the phone treatment: two equal buttons (Porter, 2026-10-28). */
@media (min-width: 768px) and (max-width: 920px) {
	.pm-featured .pm-buy__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.pm-featured .pm-buy__actions .pm-buy__add {
		grid-column: auto;
	}

	.pm-featured .pm-buy__now.wp-element-button,
	.pm-featured .pm-buy__add {
		height: 52px;
		padding: 0 16px;
		font-size: var(--wp--preset--font-size--body-large);
	}
}

/* The empty cart (shop-photos/set-empty-cart.php). */
.pm-empty-cart__art img {
	display: block;
	width: 240px;
	height: auto;
}

.pm-empty-cart__art {
	margin: 24px 0 0;
}

.pm-empty-cart__message {
	margin: 16px 0 4px;
	font-size: var(--wp--preset--font-size--intro);
	font-weight: 600;
}

/* The shop home's section headings: bigger than the message, smaller than the page title. */
.pm-empty-cart .pm-empty-cart__heading {
	margin-top: 48px;
	margin-bottom: 24px;
	font-size: var(--wp--preset--font-size--section-mobile);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.wp-block-woocommerce-empty-cart-block .pm-product-list {
	--pm-list-indent: 0px;
}

/* Free shipping (inc/free-shipping.php): the line under the header, a product's note, and the cart's progress. */
.pm-free-bar {
	margin: 0;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	color: var(--wp--preset--color--white);
	background: var(--wp--custom--shop--ok);
}

.pm-free-bar strong {
	font-weight: 700;
}

.pm-free-bar a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Kept whole, so a phone breaks the bar between its two sentences. */
.pm-free-bar__elsewhere {
	display: inline-block;
}

.pm-product__ship {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--custom--shop--ok);
}

.pm-free-shipping {
	margin: 12px 0 0;
	padding: 10px 14px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: #6b4300;
	background: #fff3d1;
	border: 2px solid #e9a100;
	border-radius: 6px;
}

.pm-free-shipping--free {
	color: var(--wp--custom--shop--ok);
	background: color-mix(in srgb, var(--wp--custom--shop--ok) 10%, var(--wp--preset--color--white));
	border-color: var(--wp--custom--shop--ok);
}

.pm-free-shipping--page {
	margin: 24px 0 0;
}

/* On a wide screen the totals sit beside the items, so the line under Shipping is enough. */
@media (min-width: 783px) {
	.pm-free-shipping--page {
		display: none;
	}
}

.pm-free-shipping--totals {
	margin: 4px 16px 12px;
}

.pm-free-shipping[hidden] {
	display: none;
}

/* A free order's Shipping row in the totals, in the same green. */
.pm-ships-free .wc-block-components-totals-shipping,
.pm-ships-free .wc-block-components-totals-shipping * {
	font-weight: 700;
	color: var(--wp--custom--shop--ok);
}

/*
 * Thank-you page Downloads (inc/thank-you.php): photo, name and PDF badge in a
 * row, like the receipt email. A list, so it fits a phone.
 */
.pm-thankyou-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pm-thankyou-downloads__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pm-thankyou-downloads__photo {
	flex: 0 0 80px;
	line-height: 0;
}

.pm-thankyou-downloads__photo img {
	display: block;
	width: 80px;
	height: auto;
}

.pm-thankyou-downloads__name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--wp--preset--color--ink);
}

.pm-thankyou-downloads__badge {
	flex: 0 0 auto;
	line-height: 0;
}

.pm-thankyou-downloads__badge img {
	display: block;
	width: 28px;
	height: 32px;
}

/* Thank-you page: the opening line at reading size, under the page's own title size. */
.wc-block-order-confirmation-status.has-large-font-size p {
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.5;
	margin-top: 16px;
}