/**
 * Proffprint: base, layout, header, footer and content styles.
 *
 * Mobile-first. Design tokens come from theme.json (--wp--preset--*); the
 * aliases below keep component rules short and give fallbacks. Pastels are
 * used for surfaces only; text and controls use ink, sea and apricot, which
 * all meet WCAG AA contrast on every surface.
 */

:root {
	--pp-ink: var(--wp--preset--color--ink, #16213a);
	--pp-muted: var(--wp--preset--color--muted, #56607a);
	--pp-sea: var(--wp--preset--color--sea, #1b6694);
	--pp-apricot: var(--wp--preset--color--apricot, #ffbe6e);
	--pp-apricot-deep: var(--wp--preset--color--apricot-deep, #ffab47);
	--pp-mint: var(--wp--preset--color--mint, #dcf2e5);
	--pp-mint-soft: var(--wp--preset--color--mint-soft, #eef8f2);
	--pp-sky: var(--wp--preset--color--sky, #e2f0fa);
	--pp-peach: var(--wp--preset--color--peach, #ffe6d5);
	--pp-butter: var(--wp--preset--color--butter, #fff2c7);
	--pp-blush: var(--wp--preset--color--blush, #fbe3ea);
	--pp-mist: var(--wp--preset--color--mist, #f5f8fa);
	--pp-rule: var(--wp--preset--color--rule, #e3e7ee);
	--pp-white: var(--wp--preset--color--white, #fff);
	--pp-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--pp-space-xs: 0.5rem;
	--pp-space-sm: 1rem;
	--pp-space-md: 1.5rem;
	--pp-space-lg: clamp(2rem, 4vw, 2.75rem);
	--pp-space-xl: clamp(3rem, 7vw, 5.5rem);
	--pp-gutter: var(--wp--custom--gutter, clamp(1rem, 4vw, 2rem));
	--pp-content-width: 46rem;
	--pp-wide-width: 80rem;
	--pp-radius-sm: var(--wp--custom--radius--small, 10px);
	--pp-radius-md: var(--wp--custom--radius--medium, 18px);
	--pp-radius-pill: var(--wp--custom--radius--pill, 999px);
	--pp-target-size: 2.75rem;
}

/* Base
--------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background-color: var(--pp-white);
	color: var(--pp-ink);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

/* The hidden attribute must win over component display rules. */
[hidden] {
	display: none !important;
}

img,
video {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--pp-space-sm);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--pp-ink);
	outline-offset: 2px;
}

.icon {
	display: block;
	flex-shrink: 0;
}

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

.skip-link:focus {
	/* Above the WordPress admin bar (z-index 99999). */
	z-index: 100000;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
	font-weight: 600;
	white-space: normal;
}

/* Forms: zero specificity so WooCommerce and block styles override freely. */
:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], textarea, select) {
	min-height: var(--pp-target-size);
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--pp-muted);
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font: inherit;
}

:where(textarea) {
	width: 100%;
}

/* Buttons
--------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--pp-target-size);
	padding: 0.625rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--pp-radius-pill);
	font-family: var(--pp-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button--primary {
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
}

.button--primary:hover {
	background-color: var(--pp-apricot-deep);
	color: var(--pp-ink);
}

.button--secondary {
	border-color: var(--pp-ink);
	background-color: transparent;
	color: var(--pp-ink);
}

.button--secondary:hover {
	background-color: var(--pp-mist);
	color: var(--pp-ink);
}

.link-button {
	min-height: var(--pp-target-size);
	padding: 0;
	border: 0;
	background: none;
	color: var(--pp-sea);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.link-button:hover {
	color: var(--pp-ink);
	text-decoration-thickness: 2px;
}

/* Search forms (core and WooCommerce product search)
--------------------------------------------- */

.search-form,
.woocommerce-product-search {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.search-form label {
	display: flex;
	flex: 1;
}

.search-form .search-field,
.woocommerce-product-search .search-field {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	padding-inline: 1.25rem;
	border-radius: var(--pp-radius-pill);
}

.search-form .search-submit,
.woocommerce-product-search button {
	min-height: 3rem;
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-ink);
	color: var(--pp-white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.search-form .search-submit:hover,
.woocommerce-product-search button:hover {
	background-color: var(--pp-sea);
}

/* Layout
--------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--pp-wide-width) + 2 * var(--pp-gutter));
	margin-inline: auto;
	padding-inline: var(--pp-gutter);
}

.site-main {
	flex: 1 0 auto;
	/* Lets .alignfull break out to the viewport edge without horizontal scrolling. */
	overflow-x: clip;
	padding-block: var(--pp-space-lg) var(--pp-space-xl);
}

/* Top bar
--------------------------------------------- */

.top-bar {
	background-color: var(--pp-sky);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.top-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem var(--pp-space-md);
	max-width: calc(var(--pp-wide-width) + 2 * var(--pp-gutter));
	margin-inline: auto;
	padding: 0.5rem var(--pp-gutter);
}

.top-bar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--pp-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-bar a {
	color: var(--pp-ink);
	text-decoration: none;
}

.top-bar a:hover {
	text-decoration: underline;
}

.top-bar .top-bar__contact {
	display: none;
}

.top-bar__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.top-bar__points .icon {
	width: 1rem;
	height: 1rem;
	color: var(--pp-sea);
}

/* Small screens show the first selling point only. */
.top-bar__points li:not(:first-child) {
	display: none;
}

/* Private / Business switch (inc/business.php), shown with JavaScript only. */
.price-mode {
	display: none;
	flex: none;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
}

.js .price-mode {
	display: inline-flex;
}

.js .top-bar--price-mode .top-bar__inner {
	justify-content: space-between;
}

.price-mode__option {
	min-height: 1.75rem;
	margin: 0;
	padding: 0.125rem 0.75rem;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background-color: transparent;
	color: var(--pp-ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.price-mode__option:hover {
	background-color: var(--pp-mist);
}

/* The selected option follows the root class, so it is right from the first paint. */
html:not(.is-business) .price-mode__option[data-price-mode="private"],
html.is-business .price-mode__option[data-price-mode="business"] {
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

@media (min-width: 48em) {
	.top-bar__inner {
		justify-content: space-between;
	}

	.top-bar .top-bar__contact {
		display: flex;
	}

	.js .top-bar--price-mode .top-bar__points {
		margin-inline-start: auto;
	}

	.top-bar__points li:not(:first-child) {
		display: inline-flex;
	}
}

/* Header
--------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--pp-rule);
	background-color: var(--pp-white);
}

.site-header__inner {
	display: grid;
	grid-template-areas:
		"toggle brand actions"
		"nav nav nav";
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--pp-space-xs);
	min-height: 4.25rem;
	max-width: calc(var(--pp-wide-width) + 2 * var(--pp-gutter));
	margin-inline: auto;
	padding-inline: var(--pp-gutter);
}

.site-header__branding {
	grid-area: brand;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-title a {
	color: var(--pp-ink);
	text-decoration: none;
}

.custom-logo-link {
	display: inline-block;
	vertical-align: middle;
}

/* Scoped to the header to outrank WooCommerce's `.woocommerce-page img { height: auto }`. */
.site-header .custom-logo {
	display: block;
	width: auto;
	max-width: none;
	height: 1.625rem;
}

.site-header__toggle,
.site-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	padding: 0;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background: none;
	color: var(--pp-ink);
	cursor: pointer;
}

.site-header__toggle {
	grid-area: toggle;
	margin-inline-start: -0.625rem;
}

.site-header__toggle:hover,
.site-header__action:hover,
.site-header__action[aria-expanded="true"] {
	background-color: var(--pp-mist);
	color: var(--pp-ink);
}

.site-header__toggle .icon--close,
.site-header__toggle[aria-expanded="true"] .icon--menu {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .icon--close {
	display: block;
}

.site-header__actions {
	display: flex;
	grid-area: actions;
	align-items: center;
	margin-inline-end: -0.625rem;
}

.site-header__cart-count {
	position: absolute;
	top: 0.125rem;
	right: 0;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.25rem;
	text-align: center;
}

.site-header__cart-count[data-count="0"] {
	display: none;
}

/* Without JavaScript the menu and search are always shown. */
.no-js .site-header__toggle,
.no-js [data-search-toggle] {
	display: none;
}

/* Primary navigation: stacked in the mobile menu. */
.primary-nav {
	grid-area: nav;
}

.js .primary-nav {
	display: none;
}

.js .site-header.is-nav-open .primary-nav {
	display: block;
	padding-block: 0.25rem var(--pp-space-sm);
}

.primary-nav__list,
.primary-nav__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--pp-rule);
	color: var(--pp-ink);
	font-weight: 500;
	text-decoration: none;
}

.primary-nav__list .sub-menu a {
	padding-inline-start: var(--pp-space-sm);
	font-weight: 400;
}

.primary-nav__list a[aria-current="page"] {
	color: var(--pp-sea);
}

/* Search panel below the header row. */
.js .site-search {
	display: none;
}

.js .site-header.is-search-open .site-search {
	display: block;
}

.site-search {
	border-top: 1px solid var(--pp-rule);
	background-color: var(--pp-mist);
}

.site-search__inner {
	max-width: 42rem;
	margin-inline: auto;
	padding: var(--pp-space-sm) var(--pp-gutter);
}

@media (min-width: 72em) {
	.site-header {
		position: sticky;
		z-index: 50;
		top: var(--wp-admin--admin-bar--height, 0px);
	}

	.site-header__inner {
		grid-template-areas: "brand nav actions";
		column-gap: var(--pp-space-lg);
		min-height: 4.75rem;
	}

	.site-header__toggle {
		display: none;
	}

	.site-header .custom-logo {
		height: 1.875rem;
	}

	.js .primary-nav,
	.primary-nav {
		display: block;
	}

	.primary-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem;
	}

	.primary-nav__list > li {
		position: relative;
	}

	.primary-nav__list a {
		padding: 0.5rem 0.9rem;
		border: 0;
		border-radius: var(--pp-radius-pill);
		font-size: 0.9375rem;
	}

	.primary-nav__list > li > a:hover {
		background-color: var(--pp-mist);
	}

	.primary-nav__list > li > a[aria-current="page"],
	.primary-nav__list > .current-menu-ancestor > a {
		background-color: var(--pp-mint);
		color: var(--pp-ink);
	}

	/* Dropdowns open on hover and when a link inside has keyboard focus. */
	.primary-nav__list .sub-menu {
		position: absolute;
		z-index: 1;
		top: calc(100% + 0.25rem);
		left: 0;
		display: none;
		min-width: 15rem;
		padding: 0.5rem;
		border: 1px solid var(--pp-rule);
		border-radius: var(--pp-radius-md);
		background-color: var(--pp-white);
		box-shadow: 0 18px 40px -20px rgb(22 33 58 / 0.35);
	}

	.primary-nav__list li:hover > .sub-menu,
	.primary-nav__list li:focus-within > .sub-menu {
		display: block;
	}

	.primary-nav__list .sub-menu a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--pp-radius-sm);
	}

	.primary-nav__list .sub-menu a:hover {
		background-color: var(--pp-mist);
	}
}

/* Footer
--------------------------------------------- */

.site-footer {
	margin-top: var(--pp-space-xl);
	background-color: var(--pp-mint-soft);
	font-size: 0.9375rem;
}

.site-main + .site-footer {
	margin-top: 0;
}

.site-footer a {
	color: var(--pp-ink);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--pp-ink);
	text-decoration: underline;
}

.site-footer__inner {
	max-width: calc(var(--pp-wide-width) + 2 * var(--pp-gutter));
	margin-inline: auto;
	padding: var(--pp-space-xl) var(--pp-gutter) var(--pp-space-md);
}

/* Newsletter sign-up (inc/newsletter.php): a MailPoet form in a card. */
.site-footer__newsletter {
	display: grid;
	gap: var(--pp-space-sm) var(--pp-space-lg);
	align-items: center;
	margin-bottom: var(--pp-space-lg);
	padding: var(--pp-space-md);
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-white);
}

.site-footer__newsletter-title {
	margin: 0 0 0.375rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.site-footer__newsletter-text p {
	max-width: 44ch;
	margin: 0;
	color: var(--pp-muted);
}

.site-footer .site-footer__newsletter-text a {
	color: var(--pp-sea);
	text-decoration: underline;
}

/* MailPoet writes widths and padding inline, hence !important. */
.site-footer__newsletter .mailpoet_form,
.site-footer__newsletter form.mailpoet_form {
	margin: 0;
	padding: 0 !important;
}

.site-footer__newsletter form.mailpoet_form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.site-footer__newsletter .mailpoet_paragraph {
	margin: 0 !important;
}

.site-footer__newsletter .mailpoet_paragraph:has(.mailpoet_text) {
	flex: 1 1 14rem;
}

.site-footer__newsletter .mailpoet_text {
	width: 100% !important;
	min-height: var(--pp-target-size);
	padding: 0.625rem 1rem !important;
	border: 1px solid var(--pp-muted);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font: inherit;
}

.site-footer__newsletter .mailpoet_text::placeholder {
	color: var(--pp-muted);
	opacity: 1;
}

.site-footer__newsletter .mailpoet_text:focus-visible {
	outline: 2px solid var(--pp-sea);
	outline-offset: 2px;
}

.site-footer__newsletter .mailpoet_submit {
	min-height: var(--pp-target-size);
	margin: 0 !important;
	padding: 0.625rem 1.5rem !important;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.site-footer__newsletter .mailpoet_submit:hover {
	background-color: var(--pp-apricot-deep);
}

.site-footer__newsletter .mailpoet_submit:focus-visible {
	outline: 2px solid var(--pp-ink);
	outline-offset: 2px;
}

.site-footer__newsletter .mailpoet_form_loading {
	display: none;
}

.site-footer__newsletter .mailpoet_message {
	flex: 1 0 100%;
	padding: 0 !important;
}

.site-footer__newsletter .mailpoet_message p {
	margin: 0.25rem 0 0;
}

.site-footer__newsletter .mailpoet_validate_success {
	color: #1d6b43;
	font-weight: 600;
}

.site-footer__newsletter .mailpoet_validate_error,
.site-footer__newsletter .parsley-errors-list {
	color: #a4262c;
}

/* MailPoet's CAPTCHA step, shown after the first "Sign up". MailPoet's own
   stylesheet loads later with the same weight, hence ".site-footer". */
.site-footer .site-footer__newsletter .mailpoet_captcha_container {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	max-width: none;
	margin: 0;
	text-align: start;
}

.site-footer .site-footer__newsletter .mailpoet_captcha_image_wrapper {
	/* Starts small so the two buttons stay beside it, then grows to full size. */
	flex: 1 1 8rem;
	min-width: 0;
	max-width: 13.75rem;
	margin: 0;
}

.site-footer .site-footer__newsletter .mailpoet_captcha {
	display: block;
	margin: 0;
	max-width: 100%;
	height: auto;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mist);
}

.site-footer .site-footer__newsletter .mailpoet_icon_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	margin: 0;
	padding: 0;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	cursor: pointer;
}

.site-footer .site-footer__newsletter .mailpoet_icon_button:hover {
	border-color: var(--pp-ink);
	opacity: 1;
}

.site-footer .site-footer__newsletter .mailpoet_icon_button img {
	width: 1.125rem;
	height: 1.125rem;
}

.site-footer .site-footer__newsletter .mailpoet_captcha_label {
	display: flex;
	flex: 1 0 100%;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	text-align: start;
}

.site-footer .site-footer__newsletter .mailpoet_captcha_label .mailpoet_text {
	max-width: 20rem;
}

.site-footer .site-footer__newsletter .mailpoet_captcha_submit {
	flex: 0 0 auto;
	margin: 0;
}

.site-footer__newsletter .parsley-errors-list {
	margin: 0.25rem 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

@media (min-width: 48em) {
	.site-footer__newsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		padding: var(--pp-space-md) var(--pp-space-lg);
	}
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--pp-space-lg) var(--pp-space-md);
}

.site-footer__logo-link {
	display: inline-block;
	margin-bottom: 0.75rem;
}

/* Scoped to the footer to outrank WooCommerce's `.woocommerce-page img { height: auto }`. */
.site-footer .site-footer__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 2rem;
}

.site-footer__name {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.site-footer__about {
	max-width: 30ch;
	margin: 0 0 var(--pp-space-sm);
	color: var(--pp-muted);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-style: normal;
}

.site-footer__social {
	display: flex;
	gap: 0.5rem;
	margin: var(--pp-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
}

.site-footer__social a:hover {
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

.site-footer__title {
	margin-bottom: 0.875rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.site-footer__links,
.site-footer .widget ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .widget + .widget {
	margin-top: var(--pp-space-md);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--pp-space-md);
	margin-top: var(--pp-space-lg);
	padding-top: var(--pp-space-sm);
	border-top: 1px solid var(--pp-rule);
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.site-footer__bottom p {
	margin: 0;
}

@media (min-width: 64em) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(10rem, 1fr));
	}
}

/* Page and post content
--------------------------------------------- */

.page-header {
	margin-bottom: var(--pp-space-lg);
}

.page-title {
	margin: 0;
}

.page-header__description {
	max-width: var(--pp-content-width);
	margin-top: 0.75rem;
	color: var(--pp-muted);
}

.entry-header {
	max-width: var(--pp-content-width);
	margin: 0 auto var(--pp-space-lg);
}

.entry-title {
	margin: 0;
}

.entry-meta {
	margin: 0.5rem 0 0;
	color: var(--pp-muted);
}

.entry-thumbnail {
	max-width: var(--pp-wide-width);
	margin: 0 auto var(--pp-space-lg);
}

.entry-thumbnail img {
	display: block;
	width: 100%;
	border-radius: var(--pp-radius-md);
}

/* Constrained layout for classic-theme post content. */
.entry-content > * {
	max-width: var(--pp-content-width);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--pp-wide-width);
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content :is(h2, h3, h4) {
	margin-top: 1.75em;
}

.entry-content .alignleft {
	float: left;
	margin: 0.25em var(--pp-space-md) var(--pp-space-sm) 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.25em 0 var(--pp-space-sm) var(--pp-space-md);
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

.entry-footer {
	max-width: var(--pp-content-width);
	margin: var(--pp-space-lg) auto 0;
	padding-top: var(--pp-space-sm);
	border-top: 1px solid var(--pp-rule);
	color: var(--pp-muted);
}

.entry-footer p {
	margin: 0.25rem 0;
}

.page-links {
	margin-top: var(--pp-space-md);
}

/* Post cards and listings
--------------------------------------------- */

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--pp-space-lg) var(--pp-space-md);
}

/* Front page: at most --post-columns per row (set from the number of posts), fewer when narrow. */
.post-grid--front {
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 18rem), calc((100% - (var(--post-columns, 4) - 1) * var(--pp-space-md)) / var(--post-columns, 4))), 1fr));
}

.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__image {
	display: block;
	/* Keeps the zoomed photo inside the rounded corners in Safari. */
	isolation: isolate;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--pp-space-sm);
	overflow: hidden;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-sky);
}

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

/* A slight zoom on the photo while the card is pointed at or has keyboard focus. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.post-card__image img {
		transition: transform 0.45s ease;
	}

	.post-card:hover .post-card__image img,
	.post-card:focus-within .post-card__image img {
		transform: scale(1.05);
	}
}

.post-card__title {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.post-card__title a {
	color: var(--pp-ink);
	text-decoration: none;
}

.post-card__title a:hover {
	text-decoration: underline;
}

.post-card__meta {
	margin: 0 0 0.5rem;
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.post-card__excerpt p {
	margin: 0;
	color: var(--pp-muted);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--pp-space-xl);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pp-target-size);
	min-height: var(--pp-target-size);
	padding-inline: 0.75rem;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-pill);
	color: var(--pp-ink);
	text-decoration: none;
}

a.page-numbers:hover {
	border-color: var(--pp-ink);
	background-color: var(--pp-mist);
	color: var(--pp-ink);
}

.page-numbers.current {
	border-color: var(--pp-ink);
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

.page-numbers.dots {
	border-color: transparent;
}

@media (max-width: 30em) {
	.pagination .nav-links {
		gap: 0.25rem;
	}

	.page-numbers {
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding-inline: 0.5rem;
	}
}

@media (max-width: 24em) {
	.page-numbers {
		min-width: 2.25rem;
		min-height: 2.25rem;
		padding-inline: 0.375rem;
	}
}

/* Moving between posts
--------------------------------------------- */

.breadcrumbs {
	max-width: var(--pp-content-width);
	margin: 0 auto var(--pp-space-sm);
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	content: "›" / "";
	margin-inline: 0.5rem;
}

.breadcrumbs a {
	display: inline-block;
	padding-block: 0.375rem;
	color: var(--pp-ink);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
	display: inline-block;
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.entry-footer__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.25rem;
}

.entry-footer__label {
	margin: 0;
	color: var(--pp-muted);
	font-size: 0.9375rem;
	font-weight: 400;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.25rem 0.875rem;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-mint-soft);
	color: var(--pp-ink);
	font-size: 0.875rem;
	text-decoration: none;
}

.tag-list a:hover {
	background-color: var(--pp-mint);
}

.post-pager {
	max-width: var(--pp-content-width);
	margin: var(--pp-space-lg) auto 0;
}

.post-pager__list {
	display: grid;
	gap: var(--pp-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-pager__link {
	display: flex;
	align-items: center;
	gap: var(--pp-space-sm);
	height: 100%;
	padding: 0.75rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-sky);
	color: var(--pp-ink);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.post-pager__item--next .post-pager__link {
	flex-direction: row-reverse;
	background-color: var(--pp-peach);
	text-align: end;
}

.post-pager__link:hover {
	background-color: var(--pp-mint);
	transform: translateY(-2px);
}

.post-pager__media {
	flex: 0 0 auto;
	width: 5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
}

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

.post-pager__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.post-pager__label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.post-pager__item--next .post-pager__label {
	flex-direction: row-reverse;
	align-self: flex-end;
}

.post-pager__label .icon {
	width: 1rem;
	height: 1rem;
}

.post-pager__title {
	font-weight: 600;
	line-height: 1.35;
}

@media (min-width: 40em) {
	.post-pager__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-pager__item--next {
		grid-column: 2;
	}
}

.related-posts {
	margin-top: var(--pp-space-xl);
	padding-top: var(--pp-space-lg);
	border-top: 1px solid var(--pp-rule);
}

.related-posts__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem var(--pp-space-md);
	margin-bottom: var(--pp-space-md);
}

.related-posts__title {
	margin: 0;
}

/* Small screens: a compact list, image beside title, whole row tappable. */
@media (max-width: 47.99em) {
	.related-posts .post-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.related-posts .post-card {
		position: relative;
		flex-direction: row;
		align-items: center;
		gap: var(--pp-space-sm);
		padding: 0.625rem;
		border-radius: var(--pp-radius-md);
		background-color: var(--pp-mist);
	}

	.related-posts .post-card__image {
		flex: 0 0 5.5rem;
		aspect-ratio: 1;
		margin-bottom: 0;
		border-radius: var(--pp-radius-sm);
	}

	.related-posts .post-card__body {
		min-width: 0;
	}

	.related-posts .post-card__title {
		font-size: 1rem;
		line-height: 1.35;
	}

	.related-posts .post-card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.related-posts .post-card__meta {
		margin: 0;
	}

	.related-posts .post-card__excerpt {
		display: none;
	}
}

/* Wider screens: the cards share one row, whatever their number. */
@media (min-width: 48em) {
	.related-posts .post-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

.related-posts__link {
	font-weight: 600;
}

/* Product sections (front page and cart)
--------------------------------------------- */

.front-section {
	max-width: calc(var(--pp-wide-width) + 2 * var(--pp-gutter));
	margin: var(--pp-space-xl) auto 0;
	padding-inline: var(--pp-gutter);
}

.front-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--pp-space-md);
	margin-bottom: var(--pp-space-md);
}

.front-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
}

.front-section__link {
	color: var(--pp-sea);
	font-weight: 500;
}

.front-section__status {
	margin: 0;
	color: var(--pp-muted);
}

.front-section__status:empty {
	display: none;
}

.front-section__intro {
	max-width: var(--pp-content-width);
	margin: calc(-1 * var(--pp-space-xs)) 0 var(--pp-space-md);
	color: var(--pp-muted);
}

/* Comments
--------------------------------------------- */

.comments {
	max-width: var(--pp-content-width);
	margin: var(--pp-space-xl) auto 0;
}

.comments__list,
.comments__list .children {
	padding: 0;
	list-style: none;
}

.comments__list .children {
	padding-inline-start: var(--pp-space-md);
}

.comment-body {
	margin-bottom: var(--pp-space-md);
	padding-bottom: var(--pp-space-md);
	border-bottom: 1px solid var(--pp-rule);
}

.comment-meta {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.comment-author .avatar {
	float: left;
	margin-inline-end: 0.75rem;
	border-radius: 50%;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 500;
}

.comment-form input:not([type="checkbox"], [type="submit"]) {
	width: 100%;
}

.comment-form .submit {
	min-height: var(--pp-target-size);
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* 404 and empty states
--------------------------------------------- */

.error-404,
.no-results {
	max-width: var(--pp-content-width);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--pp-space-md);
}

/* Cookie consent banner (Complianz)
--------------------------------------------- */

/*
 * Complianz exposes its banner colours as custom properties on :root.
 * "html:root" outranks its declaration regardless of load order. Refusing
 * stays as visible and as large as accepting.
 */
html:root {
	--cmplz_banner_background_color: var(--pp-white);
	--cmplz_banner_border_radius: 18px;
	--cmplz_text_color: var(--pp-ink);
	--cmplz_hyperlink_color: var(--pp-sea);
	--cmplz_text_font_size: 0.875rem;
	--cmplz_title_font_size: 1.0625rem;
	--cmplz_button_font_size: 0.9375rem;
	--cmplz_button_border_radius: 999px;
	--cmplz_button_accept_background_color: var(--pp-apricot);
	--cmplz_button_accept_border_color: var(--pp-apricot);
	--cmplz_button_accept_text_color: var(--pp-ink);
	--cmplz_button_deny_background_color: var(--pp-white);
	--cmplz_button_deny_border_color: var(--pp-ink);
	--cmplz_button_deny_text_color: var(--pp-ink);
	--cmplz_button_settings_background_color: var(--pp-white);
	--cmplz_button_settings_border_color: var(--pp-ink);
	--cmplz_button_settings_text_color: var(--pp-ink);
	--cmplz_slider_active_color: var(--pp-ink);
}

.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--pp-font);
}

/* Reduced motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		/* Overrides motion from any source, including plugins. */
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Category cards (front page)
--------------------------------------------- */

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-grid__item {
	--tile-bg: var(--pp-mint);
}

.category-grid__item:nth-child(5n + 2) {
	--tile-bg: var(--pp-sky);
}

.category-grid__item:nth-child(5n + 3) {
	--tile-bg: var(--pp-peach);
}

.category-grid__item:nth-child(5n + 4) {
	--tile-bg: var(--pp-butter);
}

.category-grid__item:nth-child(5n + 5) {
	--tile-bg: var(--pp-blush);
}

.category-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--pp-space-sm);
	border-radius: var(--pp-radius-md);
	background-color: var(--tile-bg);
	color: var(--pp-ink);
	text-decoration: none;
}

.category-card:hover {
	color: var(--pp-ink);
}

.category-card:hover .category-card__name {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.category-card__media {
	display: block;
	aspect-ratio: 1;
	margin-bottom: 0.75rem;
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
}

.category-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* WooCommerce's placeholder for categories without any product images. */
.category-card__image.woocommerce-placeholder {
	opacity: 0.45;
}

.category-card__name {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-underline-offset: 0.2em;
}

.category-card__count {
	margin-top: 0.125rem;
	color: var(--pp-muted);
	font-size: 0.875rem;
}

@media (min-width: 40em) {
	.category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.category-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--pp-space-md);
	}

	.category-card {
		padding: var(--pp-space-md);
	}
}

/* Prices with or without VAT
--------------------------------------------- */

/* Every price is rendered both ways (inc/business.php); the root class picks one. */
.pp-price--excl,
.business-vat-note {
	display: none;
}

/* Categories and products for businesses only (inc/business-categories.php). */
/* !important: product cards and sections set their own display with more specific selectors. */
html:not(.is-business) .pp-b2b-only {
	display: none !important;
}

html.is-business .pp-price--incl {
	display: none;
}

html.is-business .pp-price--excl {
	display: inline;
}

/* A price the product page could not convert is shown as it is, to everyone. */
html.is-business .pp-price--incl-only .pp-price--incl {
	display: inline;
}

html.is-business .pp-price--incl-only .pp-price--excl {
	display: none;
}

html.is-business .business-vat-note {
	display: block;
	margin-block: 0 var(--pp-space-md);
	padding: 0.75rem 1rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-butter);
	font-size: 0.9375rem;
}

/* On categories and products for businesses: a shortcut to business prices. */
.b2b-price-hint {
	display: none;
}

html.js:not(.is-business) .b2b-price-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block: 0 var(--pp-space-md);
	padding: 0.75rem 1rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-sky);
	font-size: 0.9375rem;
}

.b2b-price-hint__button {
	min-height: 2rem;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--pp-ink);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.b2b-price-hint__button:hover {
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

/* Quick cart: the cart in a panel from the side (inc/quick-cart.php)
--------------------------------------------- */

.quick-cart-is-open {
	overflow: hidden;
}

/* A modal <dialog>: the browser keeps focus inside and closes it with Esc. */
.quick-cart {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(26rem, calc(100% - 2.5rem));
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--pp-white);
	color: var(--pp-ink);
	box-shadow: -0.5rem 0 2rem rgb(22 33 58 / 0.18);
}

.quick-cart[open] {
	display: flex;
	flex-direction: column;
	animation: quick-cart-in 0.22s ease-out;
}

.quick-cart::backdrop {
	background-color: rgb(22 33 58 / 0.45);
}

@keyframes quick-cart-in {
	from {
		transform: translateX(100%);
	}
}

.quick-cart__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.75rem;
	padding: 0.75rem var(--pp-space-sm) 0.75rem var(--pp-space-md);
	border-bottom: 1px solid var(--pp-rule);
	background-color: var(--pp-mint-soft);
}

.quick-cart__title {
	margin: 0;
	font-size: 1.25rem;
}

/* Focus moves to the heading when the panel opens, so screen readers start
   there; it is not a control, so it needs no focus ring. */
.quick-cart__title:focus {
	outline: none;
}

.quick-cart__count {
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.quick-cart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--pp-ink);
	cursor: pointer;
}

.quick-cart__close:hover {
	background-color: var(--pp-mint);
}

.quick-cart__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--pp-space-md);
}

.quick-cart__body[aria-busy="true"] .quick-cart__items {
	opacity: 0.6;
}

.quick-cart__message {
	margin-block: var(--pp-space-md);
	color: var(--pp-muted);
}

.quick-cart__empty {
	padding-block: var(--pp-space-lg);
	text-align: center;
}

.quick-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.15s ease;
}

.quick-cart__item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr) auto;
	gap: 0 0.875rem;
	align-items: start;
	padding-block: var(--pp-space-sm);
	border-bottom: 1px solid var(--pp-rule);
}

.quick-cart__item--no-image {
	grid-template-columns: minmax(0, 1fr) auto;
}

.quick-cart__image img {
	display: block;
	width: 4rem;
	height: 4rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mist);
	object-fit: contain;
}

.quick-cart__name {
	color: var(--pp-ink);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.quick-cart__name:hover {
	text-decoration: underline;
}

.quick-cart__meta {
	margin: 0.25rem 0 0;
	padding: 0;
	color: var(--pp-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
	list-style: none;
}

.quick-cart__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	margin-top: 0.5rem;
}

.quick-cart__quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-pill);
}

.quick-cart__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--pp-ink);
	cursor: pointer;
}

.quick-cart__step .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.quick-cart__step:hover:not(:disabled) {
	background-color: var(--pp-mist);
}

.quick-cart__step:disabled {
	color: var(--pp-rule);
	cursor: not-allowed;
}

.quick-cart__quantity-value {
	min-width: 1.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.quick-cart__quantity-text {
	font-size: 0.875rem;
}

.quick-cart__remove {
	min-height: 2.5rem;
	font-size: 0.875rem;
}

.quick-cart__price {
	font-weight: 600;
	white-space: nowrap;
}

.quick-cart__footer {
	padding: var(--pp-space-sm) var(--pp-space-md) var(--pp-space-md);
	border-top: 1px solid var(--pp-rule);
	background-color: var(--pp-mist);
}

.quick-cart__totals {
	margin: 0;
}

.quick-cart__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.125rem;
}

.quick-cart__total dt,
.quick-cart__total dd {
	margin: 0;
}

.quick-cart__total dd {
	white-space: nowrap;
}

.quick-cart__total--discount dd {
	color: var(--pp-sea);
	font-weight: 600;
}

.quick-cart__total--sum {
	margin-top: 0.375rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--pp-rule);
	font-size: 1.125rem;
	font-weight: 700;
}

.quick-cart__note {
	margin: 0.5rem 0 var(--pp-space-sm);
	color: var(--pp-muted);
	font-size: 0.8125rem;
}

.quick-cart__actions {
	display: grid;
	gap: 0.5rem;
}

/* Quick cart suggestions: "Goes well with" and "Recently viewed". */
.quick-cart__suggestions {
	padding-block: var(--pp-space-sm) var(--pp-space-xs);
}

.quick-cart__subtitle {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.quick-cart__offer {
	margin: 0 0 0.5rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mint);
	font-size: 0.875rem;
	line-height: 1.45;
}

.quick-cart__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The button goes under the name, so long product names keep their width. */
.quick-cart__product {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.375rem 0.75rem;
	align-items: start;
	padding-block: 0.625rem;
}

.quick-cart__product > .quick-cart__image {
	grid-row: span 2;
}

.quick-cart__product + .quick-cart__product {
	border-top: 1px solid var(--pp-rule);
}

.quick-cart__product--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.quick-cart__product .quick-cart__image img {
	width: 3.5rem;
	height: 3.5rem;
}

.quick-cart__product .quick-cart__name {
	display: block;
	font-size: 0.875rem;
}

.quick-cart__product-price {
	color: var(--pp-muted);
	font-size: 0.8125rem;
}

.quick-cart__product-button {
	justify-self: start;
	min-height: 2.5rem;
	padding: 0.375rem 0.875rem;
	font-size: 0.8125rem;
}

/* Newsletter sign-up popup (inc/newsletter.php)
--------------------------------------------- */

.newsletter-popup {
	width: min(30rem, calc(100% - 2rem));
	max-width: none;
	padding: var(--pp-space-md);
	border: 0;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	box-shadow: 0 1.5rem 3rem rgb(22 33 58 / 0.22);
}

.newsletter-popup[open] {
	animation: newsletter-popup-in 0.25s ease-out;
}

.newsletter-popup::backdrop {
	background-color: rgb(22 33 58 / 0.45);
}

@keyframes newsletter-popup-in {
	from {
		transform: translateY(1rem);
		opacity: 0;
	}
}

.newsletter-popup__close {
	display: inline-flex;
	float: inline-end;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	margin: -0.5rem -0.5rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--pp-ink);
	cursor: pointer;
}

.newsletter-popup__close:hover {
	background-color: var(--pp-mist);
}

.newsletter-popup__title {
	margin-block: 0 var(--pp-space-xs);
	font-size: 1.375rem;
}

.newsletter-popup__title:focus {
	outline: none;
}

.newsletter-popup__text {
	margin-block: 0 var(--pp-space-xs);
}

.newsletter-popup__until {
	margin-block: 0 var(--pp-space-sm);
	padding: 0.5rem 0.875rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-butter);
	font-size: 0.875rem;
	font-weight: 600;
}

.newsletter-popup__fineprint {
	margin-block: var(--pp-space-xs) 0;
	color: var(--pp-muted);
	font-size: 0.8125rem;
}

/* MailPoet's own form, in the theme's shapes. */
.newsletter-popup .mailpoet_text,
.newsletter-popup .mailpoet_email {
	width: 100% !important;
	min-height: var(--pp-target-size);
	padding: 0.5rem 0.875rem !important;
	border: 1px solid var(--pp-muted) !important;
	border-radius: var(--pp-radius-sm) !important;
	font: inherit !important;
}

.newsletter-popup .mailpoet_submit {
	width: 100%;
	min-height: var(--pp-target-size);
	padding: 0.625rem 1.5rem !important;
	border: 0 !important;
	border-radius: var(--pp-radius-pill) !important;
	background-color: var(--pp-apricot) !important;
	color: var(--pp-ink) !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.newsletter-popup .mailpoet_submit:hover {
	background-color: var(--pp-apricot-deep) !important;
}

.newsletter-popup .mailpoet_validate_success {
	color: var(--pp-ink);
	font-weight: 600;
}

/* Already signed up in this browser: no sign-up box in the footer
   (inc/newsletter.php sets the class before the page is painted). */
.pp-newsletter-subscribed .site-footer__newsletter {
	display: none !important;
}