/**
 * WooCommerce styles on top of WooCommerce's own stylesheets.
 *
 * WooCommerce's layout CSS (grid floats, single product columns, account
 * navigation) is kept; this file re-brands it. WooCommerce exposes some
 * colours as custom properties; hover and badge colours are hardcoded, so
 * those selectors are matched at equal specificity and win by load order.
 */

:root {
	--wc-primary: var(--wp--preset--color--apricot, #ffbe6e);
	--wc-primary-text: var(--wp--preset--color--ink, #16213a);
	--wc-secondary: var(--wp--preset--color--white, #fff);
	--wc-secondary-text: var(--wp--preset--color--ink, #16213a);
	--wc-highlight: var(--wp--preset--color--ink, #16213a);
	--wc-highligh-text: #fff;
	--wc-subtext: var(--wp--preset--color--muted, #56607a);
	--wc-form-border-color: var(--wp--preset--color--muted, #56607a);
	--wc-form-border-radius: var(--wp--custom--radius--small, 10px);
}

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 0.7em 1.4em;
	border: 2px solid var(--pp-ink);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: var(--pp-apricot);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	border-color: var(--pp-apricot-deep);
	background-color: var(--pp-apricot-deep);
	color: var(--pp-ink);
}

/* "Design now" on products that are designed in DesignO first. */
.woocommerce a.button.product-design-button {
	border-color: var(--pp-apricot);
	background-color: var(--pp-apricot);
}

.woocommerce a.button.product-design-button:hover {
	border-color: var(--pp-apricot-deep);
	background-color: var(--pp-apricot-deep);
	color: var(--pp-ink);
}

.woocommerce span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 0.25em 0.8em;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-blush);
	color: var(--pp-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
}

/* Product grid
--------------------------------------------- */

/*
 * A CSS grid instead of WooCommerce's floats, so every card in a row has
 * the same height. "html" lifts the specificity just above WooCommerce's
 * column width rules, e.g. `.woocommerce ul.products.columns-4 li.product`,
 * and matches both a `.woocommerce` wrapper and `body.woocommerce` (shop pages).
 */
html .woocommerce ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-sm);
	margin: 0 0 var(--pp-space-lg);
}

/* WooCommerce's clearfix pseudo-elements would become grid items. */
html .woocommerce ul.products[class*="columns-"]::before,
html .woocommerce ul.products[class*="columns-"]::after {
	display: none;
}

@media (min-width: 48em) {
	html .woocommerce ul.products.columns-3,
	html .woocommerce ul.products.columns-4,
	html .woocommerce ul.products.columns-5,
	html .woocommerce ul.products.columns-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--pp-space-md);
	}
}

@media (min-width: 64em) {
	html .woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	html .woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	html .woocommerce ul.products.columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Product cards
--------------------------------------------- */

html .woocommerce ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0.75rem 0.75rem 1rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	flex: 1;
	color: var(--pp-ink);
	text-decoration: none;
}

/* Photos sit in a white frame so product colours are shown as they are. */
.woocommerce ul.products li.product .product-card__media {
	position: relative;
	display: block;
	margin-bottom: 0.875rem;
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
}

.woocommerce ul.products li.product .product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	object-fit: contain;
}

.woocommerce ul.products li.product .product-card__media-link {
	display: block;
}

/* The photos lie on top of each other; the arrows bring one forward. */
.woocommerce ul.products li.product .product-card__media .product-card__slide:not(.is-current) {
	position: absolute;
	inset: 0;
	height: 100%;
	background-color: var(--pp-white);
	opacity: 0;
}

.woocommerce ul.products li.product .product-card__media.is-animated .product-card__slide {
	transition: opacity 0.3s ease;
}

/* Second photo, faded in on hover and when the card has keyboard focus.
   Only while the arrows are not in charge (no JavaScript). */
.woocommerce ul.products li.product .product-card__media .product-card__hover-image {
	transition: opacity 0.3s ease;
}

.woocommerce ul.products li.product:hover .product-card__media:not(.is-paged) .product-card__hover-image,
.woocommerce ul.products li.product:focus-within .product-card__media:not(.is-paged) .product-card__hover-image {
	opacity: 1;
}

/* Touch screens have no hover; don't download the extra photo there. */
@media (hover: none) {
	.woocommerce ul.products li.product .product-card__media:not(.is-paged) .product-card__hover-image {
		display: none;
	}
}

/* Arrows over the photos
--------------------------------------------- */

/*
 * The arrow is the chevron alone: on a small card a button with a background
 * covers the sign it is there to show. It keeps a full-size invisible hit
 * area, and the chevron carries a soft white glow so it stays readable over a
 * dark photo as well as a light one.
 */
.product-card__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-target-size);
	height: var(--pp-target-size);
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: var(--pp-radius-pill);
	background: none;
	color: var(--pp-ink);
	cursor: pointer;
}

.product-card__arrow svg {
	/* Bigger than the icon in a button, now that it stands on its own. */
	width: 1.375rem;
	height: 1.375rem;
	filter: drop-shadow(0 0 1px var(--pp-white)) drop-shadow(0 1px 3px rgb(0 0 0 / 25%));
	transition: transform 0.15s ease;
}

.product-card__arrow--prev {
	left: 0.25rem;
}

.product-card__arrow--next {
	right: 0.25rem;
}

.product-card__arrow:hover svg {
	transform: scale(1.15);
}

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

/*
 * On screens with a pointer the arrows appear when the card is pointed at or
 * something in it has keyboard focus, so a grid is not a wall of buttons.
 * Where there is no pointer they are always there, since there is no hover.
 */
@media (hover: hover) {
	.product-card__arrow {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	/*
	 * :has(:focus-visible), not :focus-within, so an arrow that was clicked
	 * with the mouse does not keep the pair on screen after the pointer has
	 * moved away; a keyboard visitor still sees them.
	 */
	li.product:hover .product-card__arrow,
	li.product:has(:focus-visible) .product-card__arrow,
	.product-card__arrow:focus-visible {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card__arrow,
	.product-card__arrow svg {
		transition: none;
	}
}

/*
 * Dots instead of arrows on touch screens: arrows sit in the middle of the
 * photo, where the sign is. The dots sit under the photo instead, covering
 * nothing, say how many photos there are, and a tap goes straight to one;
 * swiping does the rest.
 */
.product-card__dots {
	display: flex;
	justify-content: center;
	/* Sits under the photo, in the space above the title. */
	margin: -0.5rem 0 0.25rem;
}

.product-card__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* The dot itself is small; the button around it is big enough to tap. The
   one showing stretches into a short bar rather than only changing colour. */
.product-card__dot::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-ink);
	/* Faint beside the one showing, still clear enough to count the photos
	   against the card (3.4:1). */
	opacity: 0.55;
	transition: width 0.2s ease, opacity 0.2s ease;
}

.product-card__dot[aria-current]::before {
	width: 0.875rem;
	opacity: 1;
}

.product-card__dot:focus-visible {
	outline: 2px solid var(--pp-ink);
	outline-offset: -3px;
	border-radius: var(--pp-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
	.product-card__dot::before {
		transition: none;
	}
}

@media (hover: hover) {
	.product-card__dots {
		display: none;
	}
}

@media (hover: none) {
	.product-card__arrow {
		display: none;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--pp-font);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	text-decoration: underline;
}

.woocommerce ul.products li.product .price {
	color: var(--pp-ink);
	font-size: 1rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .price .woocommerce-price-suffix {
	color: var(--pp-muted);
	font-size: 0.75rem;
	font-weight: 400;
}

/* The link grows, so buttons line up along the bottom of each row. */
.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.woocommerce ul.products li.product .onsale {
	top: 1.25rem;
	right: auto;
	left: 1.25rem;
	margin: 0;
}

/* Shop listing: filters beside the products
--------------------------------------------- */

/* While the next set of products is being fetched. The filters stay as they
   are, so the sidebar keeps working during the wait. */
.shop-layout.is-filtering .shop-layout__main {
	opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
	.shop-layout__main {
		transition: opacity 0.15s ease;
	}
}

/* The category heading and its text sit in a soft card, like the cards on
   the front page. Ink, muted and link colours all keep AA contrast on mint. */
.woocommerce-products-header {
	margin-bottom: var(--pp-space-lg);
	padding: var(--pp-space-md);
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mint);
}

@media (min-width: 48em) {
	.woocommerce-products-header {
		padding: var(--pp-space-lg);
	}
}

.woocommerce-products-header__title.page-title {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--xx-large, 2.75rem);
	line-height: 1.1;
}

/* A short apricot rule under the heading, as on the front page sections. */
.woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 0.25rem;
	margin-top: 0.875rem;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-ink);
}

/*
 * Category text. Full-width lines are hard to read, so it is held to a
 * comfortable measure; the first sentence leads, the rest is quieter.
 */
.term-description {
	max-width: 46rem;
	margin-block: var(--pp-space-sm) 0;
	color: var(--pp-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.term-description > :first-child {
	margin-top: 0;
	color: var(--pp-ink);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.term-description > :last-child {
	margin-bottom: 0;
}

.term-description p {
	margin-block: 0 0.75rem;
}

@media (min-width: 48em) {
	.woocommerce-products-header__title.page-title {
		font-size: var(--wp--preset--font-size--xx-large, 3rem);
	}
}

.shop-layout__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--pp-target-size);
	margin-bottom: var(--pp-space-sm);
	padding: 0.5rem 1.25rem;
	border: 2px solid var(--pp-ink);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-white);
	color: var(--pp-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.shop-layout__toggle[aria-expanded="true"] {
	background-color: var(--pp-mint);
}

.no-js .shop-layout__toggle {
	display: none;
}

.js .shop-filters {
	display: none;
}

.js .shop-layout.is-filters-open .shop-filters {
	display: block;
}

.shop-filters {
	margin-bottom: var(--pp-space-md);
	padding: var(--pp-space-md);
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mint-soft);
}

.shop-filters__widget + .shop-filters__widget {
	margin-top: var(--pp-space-md);
	padding-top: var(--pp-space-md);
	border-top: 1px solid var(--pp-rule);
}

.shop-filters__title {
	margin-bottom: 0.75rem;
	font-size: 1rem;
	font-weight: 600;
}

.shop-filters ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-filters li {
	margin-block: 0.125rem;
}

.shop-filters .product-categories a,
.shop-filters .woocommerce-widget-layered-nav-list a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--pp-ink);
	text-decoration: none;
}

.shop-filters .product-categories a:hover,
.shop-filters .woocommerce-widget-layered-nav-list a:hover {
	text-decoration: underline;
}

.shop-filters .product-categories .count,
.shop-filters .woocommerce-widget-layered-nav-list .count {
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.shop-filters .current-cat > a,
.shop-filters .chosen > a {
	font-weight: 600;
}

.shop-filters .children {
	padding-inline-start: var(--pp-space-sm);
}

/* WooCommerce price slider */
.shop-filters .widget_price_filter .ui-slider .ui-slider-range,
.shop-filters .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--pp-ink);
}

.shop-filters .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--pp-rule);
}

.shop-filters .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.shop-filters .widget_price_filter .price_slider_amount .button {
	float: none;
	padding: 0.5em 1.1em;
	font-size: 0.875rem;
}

.shop-filters .widget_layered_nav_filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shop-filters .widget_layered_nav_filters a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font-size: 0.875rem;
	text-decoration: none;
}

@media (min-width: 64em) {
	.shop-layout {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
		gap: var(--pp-space-lg);
	}

	.shop-layout__toggle {
		display: none;
	}

	.js .shop-filters,
	.shop-filters {
		display: block;
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.shop-layout__main {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Single product
--------------------------------------------- */

/*
 * The gallery and summary are floated. Anything a plugin places after them
 * (DesignO's template browser is position: relative with a background, so
 * it painted over both) has to start below them.
 */
.woocommerce div.product > .summary ~ :not(.summary) {
	clear: both;
}

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pp-ink);
	font-size: 1.5rem;
	font-weight: 600;
}

.woocommerce div.product div.images img {
	border-radius: var(--pp-radius-md);
}

/* Bundle discount offer below the price (Proffprint Bundle Discount plugin). */
.woocommerce div.product .bundle-offer {
	margin-block: 0 var(--pp-space-md);
	padding: 0.75rem 1rem;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mint);
	color: var(--pp-ink);
	font-size: 0.9375rem;
}

/* Gallery: a swipeable row of photos with thumbnails (assets/js/product-page.js). */
.woocommerce div.product div.images.pp-gallery .woocommerce-product-gallery__wrapper {
	position: relative;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--pp-radius-md);
}

.woocommerce div.product div.images.pp-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
	display: none;
}

html .woocommerce div.product div.images.pp-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
}

/* DesignO hides every photo after the first; the gallery shows them again. */
html .woocommerce div.product div.images.pp-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) img {
	display: block !important;
}

.woocommerce div.product div.images.pp-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0;
	background-color: var(--pp-white);
}

/* Arrows over the big photo, for stepping one photo at a time. The gallery
   itself is a row that scrolls, so a swipe still works as before. */
.woocommerce div.product div.images.pp-gallery {
	position: relative;
}

.pp-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	cursor: pointer;
}

.pp-gallery__arrow--prev {
	left: 0.75rem;
}

.pp-gallery__arrow--next {
	right: 0.75rem;
}

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

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

/* At the first or last photo there is nowhere to go. */
.pp-gallery__arrow:disabled {
	color: var(--pp-muted);
	cursor: default;
	opacity: 0.45;
}

.pp-gallery__thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.25rem 0.125rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.pp-gallery__thumb {
	flex: 0 0 4.25rem;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mist);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pp-gallery__thumb:hover {
	opacity: 1;
}

.pp-gallery__thumb[aria-current="true"] {
	border-color: var(--pp-ink);
	opacity: 1;
}

.woocommerce div.product div.images .pp-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Summary */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--pp-muted);
}

/*
 * DesignO's product options: label above a full-width field. DesignO pushes
 * the fields right (max 300px) with !important rules, hence the !important.
 */
.woocommerce div.product form.cart table.dnb-custom-table-variation {
	width: 100%;
	max-width: none;
	margin: 0 0 var(--pp-space-sm);
	border: 0;
}

.woocommerce div.product form.cart table.dnb-custom-table-variation td {
	display: block;
	padding: 0 0 0.875rem;
	border: 0;
}

.woocommerce div.product form.cart .dnb-custom-table-variation .form-row {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
}

.woocommerce div.product form.cart .dnb-custom-table-variation label {
	margin: 0 !important;
	color: var(--pp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	white-space: normal;
}

.woocommerce div.product form.cart .dnb-custom-table-variation label::first-letter {
	text-transform: uppercase;
}

.woocommerce div.product form.cart .dnb-custom-table-variation select,
.woocommerce div.product form.cart .dnb-custom-table-variation .custom-image-dropdown {
	width: 100%;
	max-width: none;
	min-height: var(--pp-target-size);
	border: 1px solid var(--pp-muted);
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.woocommerce div.product form.cart .dnb-custom-table-variation select {
	padding: 0.5rem 0.75rem;
}

.woocommerce div.product form.cart .dnb-custom-table-variation .form-row :is(select, .woocommerce-input-wrapper) {
	max-width: none !important;
	margin-inline: 0 !important;
}

.woocommerce div.product form.cart .dnb-custom-table-variation .custom-image-dropdown {
	margin-top: 0.375rem;
}

/* Buttons: DesignO's inline colours are removed by product-page.js. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	min-height: 3rem;
	margin: 0 0 0.625rem !important;
	padding: 0.75em 1.25em;
	border-radius: var(--pp-radius-pill);
	font-size: 1rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button .desc {
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	font-weight: 400;
}

.woocommerce div.product form.cart .single_add_to_cart_button .desc:empty {
	display: none;
}

.woocommerce div.product form.cart #personalize_btn {
	border-color: var(--pp-apricot);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
}

.woocommerce div.product form.cart #personalize_btn:hover {
	border-color: var(--pp-apricot-deep);
	background-color: var(--pp-apricot-deep);
}

.woocommerce div.product form.cart :is(#quickedit_btn, #uploadfiles, #browsetemplate_btn) {
	border-color: var(--pp-ink);
	background-color: var(--pp-white);
	color: var(--pp-ink);
}

.woocommerce div.product form.cart :is(#quickedit_btn, #uploadfiles, #browsetemplate_btn):hover {
	background-color: var(--pp-mist);
}

/* Signs DesignO only offers quick edit for, such as the house numbers: that
   button is the way to personalise the sign, so it gets the weight "Designe
   nå" has on the other products. */
.pp-quick-edit-main.woocommerce div.product form.cart #quickedit_btn {
	border-color: var(--pp-apricot);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
}

.pp-quick-edit-main.woocommerce div.product form.cart #quickedit_btn:hover {
	border-color: var(--pp-apricot-deep);
	background-color: var(--pp-apricot-deep);
}

.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover {
	border-color: var(--pp-rule);
	background-color: var(--pp-mist);
	color: var(--pp-muted);
	cursor: not-allowed;
	opacity: 1;
}

.product-assurance {
	margin: var(--pp-space-sm) 0 var(--pp-space-md);
	padding: 1rem 1.25rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mint-soft);
}

.product-assurance__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 0.5rem;
	padding: 0;
	font-weight: 600;
	list-style: none;
}

.product-assurance__points li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.product-assurance__points .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--pp-sea);
}

.product-assurance__help {
	margin: 0;
	font-size: 0.9375rem;
}

.product-assurance__points:last-child {
	margin-bottom: 0;
}

.woocommerce div.product .product_meta {
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.woocommerce div.product .product_meta > span {
	display: block;
}

/* DesignO's template browser, placed before the tabs; kept to the page width. */
html #designo-template-wrapper {
	position: static;
	width: auto;
	margin: var(--pp-space-xl) 0 0;
	padding: 0;
	border: 0;
	background: none;
}

html #designo-template-wrapper #designo-template-inner {
	max-width: none;
	margin: 0;
	padding: var(--pp-space-lg) var(--pp-space-md);
	border: 0;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mint-soft);
	box-shadow: none;
}

html #designo-template-wrapper .dnb-template-title {
	margin: 0 0 var(--pp-space-md);
	text-align: start;
}

html #designo-template-wrapper .dnb-template-title h2 {
	margin: 0 0 0.25rem;
	color: var(--pp-ink);
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
	line-height: 1.2;
}

html #designo-template-wrapper .dnb-template-title p {
	margin: 0;
	padding: 0;
	color: var(--pp-muted);
	font-size: 1rem;
}

html #designo-template-wrapper #designo-template-search {
	gap: 0.5rem;
	max-width: 32rem;
	margin: 0 0 var(--pp-space-md);
}

html #designo-template-wrapper #designo-template-search input {
	height: var(--pp-target-size);
	padding: 0 1.125rem;
	border: 1px solid var(--pp-muted);
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-white);
	font: inherit;
	font-size: 0.9375rem;
}

html #designo-template-wrapper #designo-template-search button {
	height: var(--pp-target-size);
	padding: 0 1.5rem;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-ink) !important;
	color: var(--pp-white) !important;
	font: inherit;
	font-weight: 600;
}

html #designo-inline-templates {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: var(--pp-space-sm);
}

html #designo-inline-templates .dnb-tpl-card {
	display: flex;
	flex-direction: column;
	max-width: none;
	padding: 0.75rem;
	border: 0;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-white);
	box-shadow: none;
}

html #designo-inline-templates .dnb-tpl-card img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0.5rem;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mist);
}

html #designo-inline-templates .dnb-tpl-name {
	height: auto;
	min-height: 0;
	margin: 0.625rem 0;
	color: var(--pp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: start;
}

html #designo-inline-templates .dnb-tpl-actions {
	display: grid;
	gap: 0.5rem;
	margin-top: auto;
}

html #designo-inline-templates .dnb-tpl-actions button {
	width: 100%;
	height: auto;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--pp-ink);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-white) !important;
	color: var(--pp-ink) !important;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: normal;
}

html #designo-inline-templates .dnb-tpl-actions button:first-child {
	border-color: var(--pp-apricot);
	background: var(--pp-apricot) !important;
}

html #designo-inline-templates .dnb-tpl-actions button:hover {
	background: var(--pp-mist) !important;
}

html #designo-inline-templates .dnb-tpl-actions button:first-child:hover {
	border-color: var(--pp-apricot-deep);
	background: var(--pp-apricot-deep) !important;
}

/* Small screens: templates side by side in a swipeable row. */
@media (max-width: 47.99em) {
	html #designo-template-wrapper #designo-template-inner {
		padding: var(--pp-space-md) var(--pp-space-sm);
	}

	html #designo-template-wrapper #designo-template-search {
		flex-direction: row;
		align-items: stretch;
	}

	html #designo-template-wrapper #designo-template-search input {
		flex: 1;
		min-width: 0;
	}

	html #designo-template-wrapper #designo-template-search button {
		width: auto;
		padding: 0 1.125rem;
	}

	/* DesignO sets display: grid !important on this list. */
	html #designo-inline-templates {
		display: flex !important;
		gap: 0.75rem;
		margin-inline: calc(-1 * var(--pp-space-sm));
		padding: 0 var(--pp-space-sm) 0.25rem;
		overflow-x: auto;
		scroll-padding-inline: var(--pp-space-sm);
		scroll-snap-type: x mandatory;
	}

	html #designo-inline-templates .dnb-tpl-card {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}

	html #designo-inline-templates .dnb-tpl-card img {
		height: auto;
	}

	html #designo-inline-templates .dnb-tpl-actions {
		flex-direction: column;
	}
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--pp-space-xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 var(--pp-space-md);
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--pp-rule);
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.75rem 1rem;
	border-bottom: 3px solid transparent;
	color: var(--pp-muted);
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--pp-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--pp-ink);
	color: var(--pp-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--pp-content-width);
	margin: 0;
}

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--pp-space-md);
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--pp-sea);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: var(--wp--preset--font-size--x-large, 1.875rem);
}

/* Notices
--------------------------------------------- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--pp-sea);
	background-color: var(--pp-sky);
	color: var(--pp-ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--pp-sea);
}

/* Cart, checkout and account pages
--------------------------------------------- */

/* The Cart and Checkout blocks and the account area need the wide width. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header,
.woocommerce-account .entry-content > .woocommerce {
	max-width: var(--pp-wide-width);
}

/* Shop pagination
 *
 * WooCommerce draws its pagination as one bordered box with dividers and
 * clipped items, and its list shares the .page-numbers class with the links,
 * so the theme's pill (main.css) also landed on the list. Reset to separate
 * pills, like the blog.
 */
html .woocommerce nav.woocommerce-pagination {
	margin-top: var(--pp-space-lg);
	text-align: center;
}

html .woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	white-space: normal;
	list-style: none;
}

/* Its clearfix would become two empty flex items. */
html .woocommerce nav.woocommerce-pagination ul.page-numbers::before,
html .woocommerce nav.woocommerce-pagination ul.page-numbers::after {
	display: none;
}

html .woocommerce nav.woocommerce-pagination ul li {
	display: block;
	float: none;
	overflow: visible;
	border: 0;
}

html .woocommerce nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex;
	min-width: var(--pp-target-size);
	min-height: var(--pp-target-size);
	padding: 0 0.75rem;
	border: 1px solid var(--pp-rule);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
}

html .woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
html .woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	border-color: var(--pp-ink);
	background-color: var(--pp-mist);
	color: var(--pp-ink);
}

html .woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--pp-ink);
	background-color: var(--pp-ink);
	color: var(--pp-white);
}

html .woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
}

/* Phones: a row of eight (arrows and six pages) fits down to 360 pixels. */
@media (max-width: 30em) {
	html .woocommerce nav.woocommerce-pagination ul.page-numbers {
		gap: 0.25rem;
	}

	html .woocommerce nav.woocommerce-pagination ul li .page-numbers {
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding: 0 0.5rem;
	}
}

@media (max-width: 24em) {
	html .woocommerce nav.woocommerce-pagination ul li .page-numbers {
		min-width: 2.25rem;
		min-height: 2.25rem;
		padding: 0 0.375rem;
	}
}

/* Cart (the Cart block) */
.wc-block-cart .wc-block-cart-items__header {
	color: var(--pp-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.wc-block-cart .wc-block-cart-item__image a {
	display: block;
	padding: 0.25rem;
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-mist);
}

.wc-block-cart .wc-block-cart-item__image img {
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 6px;
	background-color: var(--pp-white);
}

.wc-block-cart .wc-block-components-product-name {
	color: var(--pp-ink);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.wc-block-cart .wc-block-components-product-name:hover {
	text-decoration: underline;
}

.wc-block-cart .wc-block-components-product-metadata {
	color: var(--pp-muted);
}

.wc-block-cart .wc-block-components-quantity-selector,
.wc-block-cart .wc-block-components-quantity-selector::after {
	border-radius: var(--pp-radius-pill);
}

.wc-block-cart .wc-block-components-quantity-selector::after {
	border-color: var(--pp-muted);
}

/* Poppins has no full-width plus sign; the system font draws both signs alike. */
.wc-block-cart .wc-block-components-quantity-selector__button {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The order summary as a card, kept in view beside long carts. "html" beats
   WooCommerce's small-screen rule that removes the padding. */
html .wc-block-cart .wc-block-cart__sidebar {
	align-self: flex-start;
	padding: 1.25rem 1.5rem 1.5rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
}

@media (min-width: 64em) {
	.wc-block-cart .wc-block-cart__sidebar {
		position: sticky;
		top: 7rem;
	}
}

html .wc-block-cart .wc-block-cart__totals-title {
	padding: 0 0 0.75rem;
	color: var(--pp-ink);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 600;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
}

/*
 * WooCommerce's product grid blocks ("New in store" on the empty cart) and
 * product collections, styled like the theme's product cards.
 */
/* [class] outranks WooCommerce's `.wc-block-grid.has-4-columns .wc-block-grid__products { display: block }` below 480px. */
html .wc-block-grid[class] .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-sm);
	margin: 0;
}

@media (min-width: 48em) {
	html .wc-block-grid[class] .wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--pp-space-md);
	}
}

@media (min-width: 64em) {
	html .wc-block-grid[class] .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* WooCommerce sizes the items with flex and max-width: 25% under a
   five-class selector; in the grid they size by column instead. */
html .wc-block-grid .wc-block-grid__product {
	display: flex;
	flex: none !important;
	flex-direction: column;
	align-items: flex-start;
	width: auto;
	max-width: none !important;
	margin: 0;
	padding: 0.75rem 0.75rem 1rem;
	border: 0;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
	text-align: start;
}

.wc-block-grid .wc-block-grid__product-link {
	flex: 1;
	width: 100%;
	color: var(--pp-ink);
	text-decoration: none;
}

.wc-block-grid .wc-block-grid__product-image {
	margin-bottom: 0.875rem;
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background-color: var(--pp-white);
}

.wc-block-grid .wc-block-grid__product-image img {
	aspect-ratio: 1;
	object-fit: contain;
}

html .wc-block-grid .wc-block-grid__product-title {
	margin: 0 0 0.25rem;
	color: var(--pp-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.wc-block-grid .wc-block-grid__product-link:hover .wc-block-grid__product-title {
	text-decoration: underline;
}

html .wc-block-grid .wc-block-grid__product-price {
	margin: 0 0 0.5rem;
	color: var(--pp-ink);
	font-weight: 600;
}

html .wc-block-grid .wc-block-grid__product-add-to-cart {
	margin: 0;
}

.wp-block-woocommerce-product-collection a.product-design-button {
	display: inline-flex;
	padding: 0.7em 1.4em;
	border-radius: var(--pp-radius-pill);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
	font-weight: 600;
	text-decoration: none;
}

/* Suggestions and recently viewed below the cart, at the cart's width. */
.woocommerce-cart .entry-content > .front-section {
	max-width: var(--pp-wide-width);
	padding-inline: 0;
}

/* "Goes well with" on a product page and after an order: the page already
   has its side gutter. */
.woocommerce div.product > .front-section,
.woocommerce-order > .front-section {
	max-width: none;
	padding-inline: 0;
}

/* Below the cart: continue shopping, selling points, help. */
.woocommerce-cart .entry-content > .cart-assurance {
	max-width: var(--pp-wide-width);
}

.cart-assurance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	margin-top: var(--pp-space-lg);
	padding-top: var(--pp-space-md);
	border-top: 1px solid var(--pp-rule);
}

.cart-assurance__back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: var(--pp-target-size);
	color: var(--pp-ink);
	font-weight: 600;
	text-decoration: none;
}

.cart-assurance__back:hover {
	text-decoration: underline;
}

.cart-assurance__back .icon,
.cart-assurance__points .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.cart-assurance__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 0 auto;
	padding: 0;
	font-weight: 600;
	list-style: none;
}

/* Without "Continue shopping" (on the checkout) the points start the row. */
.cart-assurance > .cart-assurance__points:first-child {
	margin-left: 0;
}

.cart-assurance__points li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.cart-assurance__points .icon {
	color: var(--pp-sea);
}

.cart-assurance__help {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9375rem;
}

@media (max-width: 47.99em) {
	.cart-assurance__points {
		margin-left: 0;
	}
}

/* Order steps above the cart and the checkout */
.checkout-steps {
	margin: 0 0 var(--pp-space-md);
}

.checkout-steps__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	margin: 0;
	padding: 0;
	counter-reset: checkout-step;
	list-style: none;
}

.checkout-steps__step {
	display: flex;
	align-items: center;
	color: var(--pp-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	counter-increment: checkout-step;
}

.checkout-steps__step + .checkout-steps__step::before {
	content: "";
	width: clamp(1rem, 4vw, 3rem);
	height: 2px;
	margin-inline: 0.625rem;
	background-color: var(--pp-rule);
}

.checkout-steps__step > :is(a, span)::before {
	content: counter(checkout-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	background-color: var(--pp-mist);
	color: var(--pp-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

.checkout-steps__step > :is(a, span) {
	display: inline-flex;
	align-items: center;
	min-height: var(--pp-target-size);
}

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

.checkout-steps__step a:hover {
	text-decoration: underline;
}

.checkout-steps__step.is-done > a::before {
	background-color: var(--pp-mint);
}

.checkout-steps__step.is-current {
	color: var(--pp-ink);
	font-weight: 600;
}

.checkout-steps__step.is-current > span::before {
	background-color: var(--pp-apricot);
}

/* Narrow screens: all three steps on one line. */
@media (max-width: 30em) {
	.checkout-steps__step {
		font-size: 0.8125rem;
	}

	.checkout-steps__step + .checkout-steps__step::before {
		width: 0.75rem;
		margin-inline: 0.375rem;
	}

	.checkout-steps__step > :is(a, span)::before {
		width: 1.5rem;
		height: 1.5rem;
		margin-inline-end: 0.375rem;
		font-size: 0.75rem;
	}
}

@media (max-width: 24em) {
	.checkout-steps__step {
		font-size: 0.75rem;
	}

	.checkout-steps__step + .checkout-steps__step::before {
		width: 0.5rem;
		margin-inline: 0.25rem;
	}
}

.woocommerce-cart .entry-content > .checkout-steps,
.woocommerce-cart .entry-content > .business-vat-note,
.woocommerce-checkout .entry-content > .business-vat-note,
.woocommerce-checkout .entry-content > .checkout-steps,
.woocommerce-checkout .entry-content > .cart-assurance {
	max-width: var(--pp-wide-width);
}

/* Checkout (the Checkout block) */
.wc-block-checkout .wc-block-components-checkout-step__title {
	font-size: 1.25rem;
	font-weight: 600;
}

html .wc-block-checkout .wc-block-components-text-input input,
html .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
html .wc-block-checkout .wc-block-components-textarea,
html .wc-block-checkout .wc-block-components-address-card,
html .wc-block-components-totals-coupon .wc-block-components-text-input input {
	border-radius: var(--pp-radius-sm);
}

html .wc-block-checkout .wc-block-components-radio-control--highlight-checked,
html .wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
html .wc-block-checkout .wc-block-components-radio-control-accordion-option,
html .wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
html .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--pp-radius-sm);
}

.wc-block-checkout .wc-block-components-checkout-place-order-button {
	min-height: 3.25rem;
	padding-inline: 2.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

/* The order summary as a card, kept in view while filling in the form. */
html .wc-block-checkout .wc-block-checkout__sidebar {
	align-self: flex-start;
}

html .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	overflow: hidden;
	border: 0;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
}

@media (min-width: 64em) {
	html .wc-block-checkout .wc-block-checkout__sidebar {
		position: sticky;
		top: 7rem;
	}
}

.wc-block-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 6px;
	background-color: var(--pp-white);
}

/* My account: the menu beside the content (below it on small screens). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: var(--pp-space-md);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--pp-target-size);
	padding: 0.5rem 0.875rem;
	border-radius: var(--pp-radius-sm);
	color: var(--pp-ink);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background-color: var(--pp-white);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--pp-mint);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-logout {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: 1px solid var(--pp-rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-logout a {
	color: var(--pp-muted);
}

@media (min-width: 64em) {
	.woocommerce-account.logged-in .entry-content > .woocommerce {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--pp-space-lg);
		align-items: start;
	}

	.woocommerce-account.logged-in .entry-content > .woocommerce::before,
	.woocommerce-account.logged-in .entry-content > .woocommerce::after {
		display: none;
	}

	/* Notices printed before the menu span both columns. */
	.woocommerce-account.logged-in .entry-content > .woocommerce > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: sticky;
		top: 7rem;
		margin: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* Dashboard */
.account-latest-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.25rem 1.5rem;
	margin: var(--pp-space-md) 0;
	padding: 1.125rem 1.25rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-sky);
}

.woocommerce-account .account-latest-order__title {
	grid-column: 1;
	margin: 0;
	font-size: 1rem;
}

.account-latest-order__summary {
	grid-column: 1;
	margin: 0;
}

.woocommerce .account-latest-order .button {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--pp-space-sm);
	margin: var(--pp-space-md) 0;
	padding: 0;
	list-style: none;
}

.account-card__link {
	display: grid;
	align-content: start;
	gap: 0.25rem;
	height: 100%;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-white);
	color: var(--pp-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.account-card__link:hover {
	border-color: var(--pp-ink);
	background-color: var(--pp-mint-soft);
}

.account-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.5rem;
	border-radius: 50%;
	background-color: var(--pp-mint);
}

.account-card:nth-child(5n + 2) .account-card__icon {
	background-color: var(--pp-sky);
}

.account-card:nth-child(5n + 3) .account-card__icon {
	background-color: var(--pp-peach);
}

.account-card:nth-child(5n + 4) .account-card__icon {
	background-color: var(--pp-butter);
}

.account-card:nth-child(5n + 5) .account-card__icon {
	background-color: var(--pp-blush);
}

.account-card__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.account-card__title {
	font-size: 1.0625rem;
	font-weight: 600;
}

.account-card__text {
	color: var(--pp-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Small screens: the latest order stacks, and cards become compact rows. */
@media (max-width: 47.99em) {
	.account-latest-order {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce .account-latest-order .button {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 0.5rem;
	}

	.account-cards {
		gap: 0.625rem;
	}

	.account-card__link {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 0.875rem;
		align-items: center;
		padding: 0.875rem 1rem;
	}

	.account-card__icon {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.account-card__link > :not(.account-card__icon) {
		grid-column: 2;
	}
}

.account-help,
.account-auth__help {
	font-size: 0.9375rem;
}

/* Addresses */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--pp-space-sm);
	margin-top: var(--pp-space-md);
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	padding: 1.25rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mist);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}

/* WooCommerce's clearfix pseudo-elements would become flex items. */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
	display: none;
}

.woocommerce-account .addresses .woocommerce-Address-title h2 {
	float: none;
	margin: 0;
	font-size: 1.25rem;
}

.woocommerce-account .addresses .woocommerce-Address-title .edit {
	float: none;
	font-weight: 600;
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
}

/* Tables and forms */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	overflow: hidden;
	border-color: var(--pp-rule);
	border-radius: var(--pp-radius-md);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background-color: var(--pp-mist);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
	padding: 0.4em 1em;
	font-size: 0.875rem;
}

/*
 * WooCommerce's small-screen table (768px and below) hides the row header,
 * which on the orders list is the order number. Show it as each order's heading.
 */
@media (max-width: 768px) {
	.woocommerce-account table.shop_table_responsive tbody th {
		display: block;
		padding: 0.75rem;
		background-color: var(--pp-mist);
		text-align: start;
	}

	.woocommerce-account table.shop_table_responsive tbody tr + tr th {
		border-top: 1px solid var(--pp-rule);
	}
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: var(--pp-space-md) 0 var(--pp-space-sm);
	padding: 0.75rem 1.25rem 0.25rem;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-md);
}

.woocommerce-account .woocommerce-MyAccount-content legend {
	padding: 0 0.5rem;
	font-weight: 600;
}

.woocommerce-account form .form-row em {
	color: var(--pp-muted);
	font-size: 0.875rem;
	font-style: normal;
}

/* Primary buttons; "button" in the selectors outranks `.woocommerce button.button`. */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce button.woocommerce-form-login__submit,
.woocommerce-account .woocommerce button.woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
	border-color: var(--pp-apricot);
	background-color: var(--pp-apricot);
	color: var(--pp-ink);
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce button.woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover {
	border-color: var(--pp-apricot-deep);
	background-color: var(--pp-apricot-deep);
	color: var(--pp-ink);
}

/* Login screen: the form beside a panel for new customers. */
.account-auth {
	display: grid;
	gap: var(--pp-space-md);
	max-width: 62rem;
}

/* WooCommerce prints the "Log in" heading and the form as separate elements. */
@media (min-width: 48em) {
	.account-auth:not(.account-auth--register) {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}

	.account-auth:not(.account-auth--register) > :not(.account-auth__panel) {
		grid-column: 1;
	}

	.account-auth:not(.account-auth--register) > .account-auth__panel {
		grid-column: 2;
		grid-row: 2;
	}
}

.woocommerce-account .account-auth h2 {
	margin: 0;
	font-size: 1.5rem;
}

.account-auth--register #customer_login h2 {
	margin-bottom: 1rem;
}

.woocommerce .account-auth form.login,
.woocommerce .account-auth form.register {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--pp-rule);
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-white);
}

.woocommerce .account-auth form.login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.woocommerce .account-auth .woocommerce-form-login__rememberme {
	order: 1;
}

.woocommerce .account-auth .woocommerce-form-login__submit {
	order: 2;
	float: none;
	width: 100%;
	min-height: 3rem;
	margin: 0;
}

.woocommerce .account-auth .lost_password {
	margin: 1rem 0 0;
}

.account-auth__panel {
	padding: 1.5rem;
	border-radius: var(--pp-radius-md);
	background-color: var(--pp-mint-soft);
}

.account-auth__panel > :last-child {
	margin-bottom: 0;
}

/* With registration switched on: login and registration side by side. */
.account-auth--register #customer_login {
	display: grid;
	gap: var(--pp-space-md);
}

.account-auth--register #customer_login::before,
.account-auth--register #customer_login::after {
	display: none;
}

.account-auth--register #customer_login > .u-column1,
.account-auth--register #customer_login > .u-column2 {
	float: none;
	width: auto;
}

@media (min-width: 48em) {
	.account-auth--register #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}