/* ==========================================================================
   WooCommerce
   --------------------------------------------------------------------------
   The plugin's own stylesheet is dequeued in inc/assets.php, so this file is
   not overriding it - it is the only styling those pages get. That is why it
   covers dull things like notices and form rows as well as the shop itself.
   ========================================================================== */

/* Icons for controls WooCommerce adds from JavaScript, where there is no
   template to put an inline SVG in. Masked rather than drawn, so they take
   currentColor like every other icon in the theme. */
:root {
	--pcs-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--pcs-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
	--pcs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6f69' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
	--pcs-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------ 1. archive header */

.pcs-shophead {
	padding-block: clamp(32px, 4vw, 64px) var(--pc-6);
	border-bottom: 1px solid var(--pc-line-soft);
	background: var(--pc-cream);
}

.pcs-shophead__title {
	margin: 0;
	font-size: var(--pc-step-5);
	font-weight: 300;
	letter-spacing: -0.03em;
}

.pcs-shophead__lede {
	max-width: 60ch;
	margin-top: var(--pc-4);
	color: var(--pc-ink-70);
}

.pcs-shophead__lede p:last-child {
	margin-bottom: 0;
}

.pcs-crumbs {
	margin-bottom: var(--pc-4);
	font-size: var(--pc-step--2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pcs-crumbs a {
	text-decoration: none;
}

.pcs-crumbs a:hover {
	color: var(--pc-mint-deep);
}

.pcs-crumbs__sep {
	display: inline-block;
	margin-inline: var(--pc-2);
	opacity: 0.5;
}

/* --------------------------------------------------------- 2. shop layout */

.pcs-shopwrap {
	padding-block: var(--pc-7) var(--pc-9);
}

.pcs-shopbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-4);
	flex-wrap: wrap;
	margin-bottom: var(--pc-6);
	padding-bottom: var(--pc-4);
	border-bottom: 1px solid var(--pc-line-soft);
}

.woocommerce-result-count {
	margin: 0;
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select,
.pcs select,
.pcs .select2-container--default .select2-selection--single {
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	padding: 11px 42px 11px var(--pc-4);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	background-color: var(--pc-paper);
	background-image: var(--pcs-chevron);
	background-repeat: no-repeat;
	background-position: right var(--pc-4) center;
	font-size: var(--pc-step--1);
	cursor: pointer;
}

/* select2 is not a <select>, and styling it as though it were is what broke the
   checkout's Country / Region field. It is a span whose text lives in a child
   with padding and a line-height of its own, and it draws its own arrow - so
   the field came out with two chevrons side by side and the country name
   hanging out of the bottom of the pill. */
.pcs .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.45;
	color: inherit;
}

.pcs .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

.pcs .select2-dropdown {
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	overflow: hidden;
}

.pcs .select2-search--dropdown .select2-search__field {
	padding: var(--pc-2) var(--pc-3);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
}

.pcs .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--pc-mint-wash);
	color: var(--pc-ink);
}

[dir='rtl'] .woocommerce-ordering select {
	background-position: left var(--pc-4) center;
	padding: 11px var(--pc-4) 11px 42px;
}

/* The product grid. WooCommerce prints ul.products; the card rules live in
   theme.css and this only sets the track. */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pc-7) var(--pc-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after {
	content: none;
}

.woocommerce-no-products-found {
	padding: var(--pc-8) 0;
}

/* pagination reuses the blog's */
.woocommerce-pagination {
	margin-top: var(--pc-8);
}

.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--pc-2);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce-pagination li {
	border: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--pc-3);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	text-decoration: none;
	font-size: var(--pc-step--1);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--pc-ink);
	border-color: var(--pc-ink);
	color: #fff;
}

/* ------------------------------------------------------ 3. single product */

.single-product .pcs-shopwrap {
	padding-top: var(--pc-6);
}

/* The grid is the wrapper around the gallery and the summary, not div.product:
   the gallery is sticky, and a sticky grid item is held by its grid container
   rather than by its own row, so a grid that ran the length of the page let the
   gallery slide down over the tabs and the related products. */
.single-product .pcs-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}

/* The gallery is two things stacked: a lit stage for the photograph and a row
   of thumbnails under it. The ground belongs to the stage alone - a single slab
   behind both put the thumbnails on the same cream as the picture and they read
   as part of it rather than as a control. */
.single-product .woocommerce-product-gallery {
	position: sticky;
	top: calc(var(--pc-header-h) + 20px);
}

/* The frame. flexslider moves the slides into a .flex-viewport of its own, so
   that is the box the picture sits in; the direct-child selector is the same
   box on the rare load where the script has not run. The frame carries only the
   edge and the lift - the ground has to sit lower down, see below. */
.single-product .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--pc-line-soft);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow);
	overflow: hidden;
	transition: box-shadow var(--pc-med) var(--pc-ease);
}

.single-product .woocommerce-product-gallery:hover .flex-viewport {
	box-shadow: var(--pc-shadow-lift);
}

/* The ground, and it has to be on the slide rather than on the frame around it.
   The shots are all cut out on white, and the multiply below is what turns that
   white into the ground instead of printing a white rectangle over it - but
   flexslider animates the strip with an inline translate3d, and a transform
   opens a stacking context, so a blend on the image can only reach a backdrop
   painted inside that same context. With the gradient on the frame the blend
   had nothing to find and the photograph sat on the cream as a hard white
   square. On the slide it is in reach, and the picture is lit rather than
   pasted: white where the product stands, cream and sand at the edges. */
.single-product .woocommerce-product-gallery__image {
	background: radial-gradient(
		116% 86% at 50% 6%,
		#fff 0%,
		var(--pc-cream) 56%,
		var(--pc-sand) 100%
	);
}

.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	mix-blend-mode: multiply;
}

/* The whole picture opens the lightbox, so it should say so. */
.single-product .woocommerce-product-gallery__image > a {
	display: block;
	cursor: zoom-in;
}

/* A filmstrip that fills the width under the stage rather than a short row of
   fixed-width tiles with a gap at the end. The cap stops a two-picture product
   from drawing two thumbnails the size of postcards. */
.single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-3);
	margin: var(--pc-3) 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	flex: 1 1 0;
	min-width: 0;
	max-width: 140px;
	margin: 0;
	/* Same ground as the stage, and here the blend reaches it - there is no
	   transformed ancestor over the thumbnails to isolate it. */
	background: var(--pc-cream);
	border-radius: var(--pc-radius);
}

.single-product .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	/* Cover for the same reason the cards use it: WooCommerce's gallery
	   thumbnail is a square crop where it was generated, and the originals'
	   own shape - with its grey sweep and shadow - where it was not. */
	object-fit: cover;
	border: 1px solid var(--pc-line-soft);
	border-radius: var(--pc-radius);
	mix-blend-mode: multiply;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity var(--pc-fast) var(--pc-ease),
		border-color var(--pc-fast) var(--pc-ease),
		box-shadow var(--pc-fast) var(--pc-ease),
		transform var(--pc-fast) var(--pc-ease);
}

.single-product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--pc-ink-45);
	transform: translateY(-2px);
}

/* The mint ring rather than a heavy dark border: it is the same colour the rest
   of the page uses for "this one", and it reads at a glance on a row of five
   near-identical bottles. */
.single-product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--pc-mint-deep);
	box-shadow: 0 0 0 3px var(--pc-mint-wash);
}

.single-product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--pc-3);
	right: var(--pc-3);
	z-index: 2;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--pc-line-soft);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(6px);
	box-shadow: var(--pc-shadow);
	text-decoration: none;
	/* WooCommerce writes the trigger as a magnifier emoji, which WordPress then
	   swaps for an <img class="emoji">. Zeroing the font size collapses it -
	   the emoji stylesheet sizes it in em - and the icon below is drawn in the
	   theme's own line weight instead. */
	font-size: 0;
	transition: background var(--pc-fast) var(--pc-ease),
		border-color var(--pc-fast) var(--pc-ease);
}

.single-product .woocommerce-product-gallery__trigger::after {
	content: '';
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--pcs-expand) center / contain no-repeat;
	mask: var(--pcs-expand) center / contain no-repeat;
}

.single-product .woocommerce-product-gallery__trigger:hover {
	background: var(--pc-paper);
	border-color: var(--pc-ink-45);
}

.single-product .product_title {
	font-size: var(--pc-step-4);
	font-weight: 400;
	margin-bottom: var(--pc-4);
}

.single-product .summary .price {
	display: flex;
	align-items: baseline;
	gap: var(--pc-3);
	margin: 0 0 var(--pc-5);
	font-size: var(--pc-step-3);
	font-weight: 600;
}

.single-product .summary .price del {
	font-size: var(--pc-step-1);
	font-weight: 400;
	color: var(--pc-ink-45);
}

.single-product .summary .price ins {
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--pc-6);
	padding-bottom: var(--pc-6);
	border-bottom: 1px solid var(--pc-line-soft);
	color: var(--pc-ink-70);
	font-size: var(--pc-step-1);
	line-height: 1.7;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-3);
	margin: 0 0 var(--pc-5);
}

.single-product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	overflow: hidden;
}

.single-product form.cart .quantity input {
	width: 68px;
	height: 52px;
	border: 0;
	text-align: center;
	font-size: var(--pc-step-0);
	font-weight: 600;
	-moz-appearance: textfield;
}

.single-product form.cart .quantity input::-webkit-outer-spin-button,
.single-product form.cart .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
}

.pcs-reassure {
	display: grid;
	gap: var(--pc-2);
	margin: 0 0 var(--pc-6);
	padding: 0;
	list-style: none;
	font-size: var(--pc-step--1);
	color: var(--pc-ink-70);
}

.pcs-reassure li {
	display: flex;
	align-items: center;
	gap: var(--pc-3);
}

.pcs-reassure .pcs-icon {
	color: var(--pc-mint-deep);
}

/*
 * The note for a shopper the shop cannot ship to (pcs_outside_europe_notice).
 *
 * Quiet on purpose. It sits under the reassurance list on a product page and
 * above the basket, and it has to be readable without competing with the price
 * or the Add to basket button - it is for the minority of visitors it applies
 * to, and it should not read as a warning to everyone else.
 */
.pcs-elsewhere {
	margin: 0 0 var(--pc-6);
	padding: var(--pc-3) var(--pc-4);
	border-left: 2px solid var(--pc-mint-deep);
	background: var(--pc-mint-pale, rgba(0, 0, 0, 0.03));
	font-size: var(--pc-step--1);
	line-height: 1.5;
	color: var(--pc-ink-70);
}

.pcs-elsewhere a {
	color: var(--pc-mint-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-cart .pcs-elsewhere {
	margin-bottom: var(--pc-5);
}

/*
 * Above a product listing and on the home page the notice is the full width of
 * the column rather than a narrow rail beside a price, so it is given room to
 * breathe and the same top margin the listing header has. The paragraph inside
 * keeps its own styling; only the spacing differs by context.
 */
.pcs-elsewhere-loop {
	margin: 0 0 var(--pc-5);
}

.pcs-band--elsewhere {
	padding-block: 0;
}

.pcs-band--elsewhere .pcs-elsewhere {
	margin: 0;
}

.product_meta {
	font-size: var(--pc-step--2);
	color: var(--pc-muted);
	letter-spacing: 0.04em;
}

/* tabs --------------------------------------------------------------------- */

.woocommerce-tabs {
	margin-top: var(--pc-9);
	border-top: 1px solid var(--pc-line-soft);
	padding-top: var(--pc-7);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-2);
	margin: 0 0 var(--pc-6);
	padding: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	padding: 10px 20px;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	background: var(--pc-ink);
	border-color: var(--pc-ink);
	color: #fff;
}

.woocommerce-tabs .panel {
	max-width: 760px;
	color: var(--pc-ink-70);
	font-size: var(--pc-step-1);
	line-height: 1.75;
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* The description is rebuilt from the harvested blurb by
   tools/lib/descriptions.php, so the panel always gets the same shapes: a lede
   paragraph, then h3 sections of prose, bullets, or a run of FAQ disclosures. */

.woocommerce-tabs .panel > p:first-of-type {
	font-size: var(--pc-step-2);
	line-height: 1.55;
	color: var(--pc-ink);
	letter-spacing: var(--pc-tight);
}

.woocommerce-tabs .panel h3 {
	margin: var(--pc-6) 0 var(--pc-3);
	font-size: var(--pc-step-0);
	font-weight: 700;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: var(--pc-mint-deep);
}

.woocommerce-tabs .panel > p {
	margin: 0 0 var(--pc-3);
}

.woocommerce-tabs .panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A tick rather than a disc: these are claims, and the list reads as a
   specification when every line opens with one. */
.woocommerce-tabs .panel ul li {
	position: relative;
	padding-left: var(--pc-5);
	margin-bottom: var(--pc-2);
}

.woocommerce-tabs .panel ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pc-mint);
}

/* FAQ. Closed by default - the answers are long and a shopper wants the
   question list first - so the row has to look like something to open. */
.pcs-faq {
	border-bottom: 1px solid var(--pc-line-soft);
}

.pcs-faq:first-of-type {
	border-top: 1px solid var(--pc-line-soft);
}

.pcs-faq > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-4);
	padding: var(--pc-4) 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--pc-ink);
}

/* Both spellings: WebKit still wants its own pseudo-element to drop the marker. */
.pcs-faq > summary::-webkit-details-marker {
	display: none;
}

.pcs-faq > summary::after {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 0.45em;
	border-right: 1.5px solid var(--pc-ink-45);
	border-bottom: 1.5px solid var(--pc-ink-45);
	transform: rotate(45deg);
	transition: transform var(--pc-fast) var(--pc-ease);
}

.pcs-faq[open] > summary::after {
	transform: rotate(-135deg);
}

.pcs-faq > summary:hover {
	color: var(--pc-mint-deep);
}

.pcs-faq > p {
	margin: 0;
	padding: 0 var(--pc-6) var(--pc-5) 0;
}

/* related ------------------------------------------------------------------ */

.related,
.up-sells,
.cross-sells {
	margin-top: var(--pc-9);
}

/* The cross-sells are the one of the three that still sits in a grid - the cart
   collaterals - and they take the whole row there. */
.cross-sells {
	grid-column: 1 / -1;
}

.related > h2,
.up-sells > h2,
.cross-sells > h2 {
	font-size: var(--pc-step-3);
	font-weight: 400;
	margin-bottom: var(--pc-6);
}

/* -------------------------------------------------------------- 4. notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pc-4);
	margin: 0 0 var(--pc-5);
	padding: var(--pc-4) var(--pc-5);
	border-radius: var(--pc-radius-lg);
	border-left: 3px solid var(--pc-mint-deep);
	background: var(--pc-mint-wash);
	list-style: none;
	font-size: var(--pc-step-0);
}

.woocommerce-error {
	border-left-color: var(--pc-danger);
	background: #fbeeea;
}

.woocommerce-info {
	border-left-color: var(--pc-gold);
	background: var(--pc-gold-wash);
}

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

/* Notices queued on one of the theme's own templates - see
   pcs_print_stray_notices(). They sit above whatever the page opens with. */
.pcs-notices {
	padding-top: var(--pc-6);
}

.pcs-notices :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ 5. cart & checkout */

/* The article around this already carries .pcs-band's padding, so anything here
   is added to it: the two together left 149px between the page heading and the
   cart table. */
.pcs-woopage {
	padding-block: 0;
}

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--pc-6);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--pc-4);
	border-bottom: 1px solid var(--pc-line-soft);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-size: var(--pc-step--2);
	font-weight: 600;
	letter-spacing: var(--pc-wide);
	text-transform: uppercase;
	color: var(--pc-muted);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 76px;
	border-radius: var(--pc-radius);
	background: var(--pc-cream);
}

.woocommerce table.shop_table .product-name a {
	font-weight: 600;
	text-decoration: none;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	background: var(--pc-cream);
	border-radius: var(--pc-radius-lg);
	padding: var(--pc-6);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout-review-order h3 {
	font-size: var(--pc-step-2);
	margin-bottom: var(--pc-4);
}

.woocommerce .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
	gap: var(--pc-6);
	align-items: start;
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after {
	content: none;
}

/* The totals go in the narrow second column and stay there. WooCommerce only
   puts anything in the first one when there are cross-sells to show, and with
   none - which is this shop - the totals fell into it by source order and sat
   in the middle of the page with the whole right-hand half empty. */
.woocommerce .cart_totals {
	grid-column: 2;
}

/* The coupon field, Apply and Update all belong on one line. The field is not a
   form row, so the full-width rule that every other input wants pushed both
   buttons onto lines of their own.

   The cell itself has to stay a table-cell. Laying it out with display:flex
   takes it out of the table's column model, at which point its colspan="6"
   stops meaning anything and the row shrinks to its contents - 216px inside a
   1232px table, with the buttons stacked exactly as before. So the change is
   made to what is inside the cell, not to the cell. */
.woocommerce .woocommerce-cart-form .actions {
	border-bottom: 0;
	padding-inline: 0;
}

.woocommerce .woocommerce-cart-form .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-3);
	vertical-align: middle;
}

.woocommerce .woocommerce-cart-form .actions > button[name='update_cart'] {
	float: right;
}

.woocommerce .woocommerce-cart-form .coupon .input-text {
	width: auto;
	min-width: 13rem;
}

/* A quantity is two digits. Left to the generic input rule it filled its
   column, which on a wide screen is a 300px box holding the number 2. */
.woocommerce table.shop_table td.product-quantity .quantity input {
	width: 5.5rem;
	text-align: center;
}

/* Neither of these needs a share of the free space; without a width the table
   spread them out and left the × stranded far from the thing it removes. */
.woocommerce table.shop_table td.product-remove,
.woocommerce table.shop_table th.product-remove {
	width: 1px;
	padding-right: 0;
}

.woocommerce table.shop_table td.product-thumbnail,
.woocommerce table.shop_table th.product-thumbnail {
	width: 108px;
}

.woocommerce table.shop_table .product-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--pc-muted);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.shop_table .product-remove .remove:hover {
	background: var(--pc-cream);
	color: var(--pc-danger);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-6);
}

.woocommerce form .form-row {
	display: grid;
	gap: var(--pc-2);
	margin-bottom: var(--pc-4);
}

.woocommerce form .form-row label {
	font-size: var(--pc-step--1);
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--pc-danger);
	text-decoration: none;
}

.woocommerce form .input-text,
.woocommerce form textarea,
.pcs input[type='text'],
.pcs input[type='email'],
.pcs input[type='tel'],
.pcs input[type='password'],
.pcs input[type='number'],
.pcs textarea {
	width: 100%;
	padding: 13px var(--pc-4);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-paper);
	font-size: var(--pc-step-0);
	transition: border-color var(--pc-fast) var(--pc-ease);
}

.woocommerce form .input-text:focus,
.pcs input:focus,
.pcs textarea:focus {
	border-color: var(--pc-mint-deep);
	outline: none;
}

/* The customs warning above the payment methods. Quiet, but not hidden - it is
   there to be read before the order, not to be technically present. */
.pcs-customs {
	display: flex;
	align-items: flex-start;
	gap: var(--pc-3);
	margin: 0 0 var(--pc-5);
	padding: var(--pc-4);
	border-radius: var(--pc-radius);
	background: var(--pc-gold-wash);
	color: var(--pc-ink-70);
	font-size: var(--pc-step--1);
	line-height: 1.5;
}

.pcs-customs .pcs-icon {
	flex: none;
	margin-top: 1px;
	color: var(--pc-gold);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--pc-5);
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--pc-4);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	margin-bottom: var(--pc-2);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--pc-paper);
	border-radius: var(--pc-radius);
	padding: var(--pc-4);
	margin-top: var(--pc-3);
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
}

/* Every WooCommerce button gets the theme's pill, including the ones the
   plugin prints in places this theme never templates. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.pcs .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-2);
	padding: 14px var(--pc-6);
	min-height: 48px;
	border: 1px solid var(--pc-ink);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-ink);
	color: #fff;
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--pc-fast) var(--pc-ease),
		border-color var(--pc-fast) var(--pc-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.pcs .button:hover {
	background: var(--pc-mint-deep);
	border-color: var(--pc-mint-deep);
	color: #fff;
}

.woocommerce button.button.alt,
.woocommerce #place_order {
	background: var(--pc-mint-deep);
	border-color: var(--pc-mint-deep);
}

.woocommerce .button[disabled],
.woocommerce .button.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* The quick-add button on a card is a .button to WooCommerce's JS, so it needs
   the theme's own look put back on top. */
.pcs-card .pcs-btn--quick.added {
	display: none;
}

.pcs-card .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding-inline: var(--pc-4);
	border-radius: var(--pc-radius-pill);
	background: var(--pc-mint);
	color: var(--pc-ink);
	font-size: var(--pc-step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.pcs-btn--quick.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------- 6. account */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
	margin: 0 0 var(--pc-6);
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--pc-3) var(--pc-4);
	border-radius: var(--pc-radius);
	text-decoration: none;
	font-size: var(--pc-step-0);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--pc-ink);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--pc-ink-70);
}

/* Signed out, the account page is one short form. Left at the content width it
   ran the full 1030px of the page, which makes a two-field login look like a
   checkout. */
.woocommerce-account:not(.logged-in) .pcs-woopage {
	max-width: 30rem;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	padding: var(--pc-6);
	border: 1px solid var(--pc-line-soft);
	border-radius: var(--pc-radius-lg);
}

/* Remember-me and Log in share one .form-row, which the grid rule stacks. The
   checkbox needs to sit beside its words rather than above them. */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--pc-2);
	font-weight: 400;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: auto;
	margin: 0;
}

.woocommerce-account .woocommerce-form-login__submit {
	width: 100%;
	margin-top: var(--pc-2);
}

.woocommerce-account .woocommerce-LostPassword {
	margin: var(--pc-4) 0 0;
	font-size: var(--pc-step--1);
}

/* The show/hide password control.
   WooCommerce adds this from JavaScript, wrapping the field in .password-input
   and appending the button - which is why it is in no template and does not
   appear when the page is fetched rather than rendered. Unstyled it collapsed
   to a 16x6 grey sliver sitting under the field. */
.woocommerce .password-input {
	display: block;
	position: relative;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pc-muted);
	cursor: pointer;
}

.woocommerce .show-password-input::after {
	content: '';
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--pcs-eye) center / contain no-repeat;
	mask: var(--pcs-eye) center / contain no-repeat;
}

.woocommerce .show-password-input:hover {
	color: var(--pc-ink);
}

.woocommerce .show-password-input.display-password::after {
	-webkit-mask-image: var(--pcs-eye-off);
	mask-image: var(--pcs-eye-off);
}

/* Room for it, so a long password does not run underneath. */
.woocommerce .password-input .input-text {
	padding-right: 2.75rem;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 240px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		margin-left: 290px;
	}
}

/* ---------------------------------------------------------- 7. responsive */

@media (max-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.single-product .pcs-product-top {
		grid-template-columns: 1fr;
	}

	.single-product .woocommerce-product-gallery {
		position: static;
	}

	.woocommerce .cart-collaterals,
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}

	/* One column, so the totals go back to wherever source order puts them. */
	.woocommerce .cart_totals {
		grid-column: auto;
	}
}

@media (max-width: 720px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-6) var(--pc-3);
	}

	.pcs-shopbar {
		gap: var(--pc-3);
	}

	.woocommerce-result-count {
		width: 100%;
	}

	/* A cart table on a phone is read row by row, not column by column. The
	   head goes, so every cell has to carry its own label: dropping it and
	   leaving the cells bare gives a column of numbers with nothing to say
	   which is the price and which the total.

	   Only the line-items table is stacked. The totals tables label each row
	   with a <th> of its own and are two columns already, so stacking them
	   printed every label twice - "SUBTOTAL" from data-title above "Subtotal"
	   from the cell that was always there. */
	.woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	.woocommerce-cart-form table.shop_table,
	.woocommerce-cart-form table.shop_table tbody,
	.woocommerce-cart-form table.shop_table tr {
		display: block;
		width: 100%;
	}

	.woocommerce-cart-form table.shop_table tr {
		padding: var(--pc-4) 0;
		border-bottom: 1px solid var(--pc-line-soft);
	}

	.woocommerce-cart-form table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pc-4);
		padding: var(--pc-2) 0;
		border: 0;
		text-align: right;
	}

	/* WooCommerce puts the column heading on the cell as data-title, so the
	   label needs no markup of its own. */
	.woocommerce-cart-form table.shop_table td::before {
		content: attr(data-title);
		flex: none;
		font-size: var(--pc-step--2);
		font-weight: 600;
		letter-spacing: var(--pc-wide);
		text-transform: uppercase;
		color: var(--pc-muted);
		text-align: left;
	}

	/* The cells that are a picture, a control or a whole toolbar rather than a
	   labelled value. */
	.woocommerce-cart-form table.shop_table td.product-remove::before,
	.woocommerce-cart-form table.shop_table td.product-thumbnail::before,
	.woocommerce-cart-form table.shop_table td.actions::before {
		content: none;
	}

	.woocommerce-cart-form table.shop_table td.product-thumbnail {
		justify-content: flex-start;
	}

	.woocommerce-cart-form table.shop_table td.product-remove {
		justify-content: flex-end;
		padding: 0;
	}

	/* One line each on a phone; side by side they are both too narrow to read.
	   The actions cell is the one cell that is a toolbar rather than a labelled
	   value, so it must not take the flex row the others get: as a flex row it
	   made the coupon a flex item, which shrank it and its field to fit beside
	   the Update button. */
	.woocommerce-cart-form table.shop_table td.actions,
	.woocommerce .woocommerce-cart-form .coupon {
		display: block;
	}

	.woocommerce .woocommerce-cart-form .actions > button[name='update_cart'] {
		float: none;
	}

	.woocommerce .woocommerce-cart-form .coupon .input-text,
	.woocommerce .woocommerce-cart-form .actions .button {
		width: 100%;
		min-width: 0;
	}

	.woocommerce .woocommerce-cart-form .actions .button {
		margin-top: var(--pc-3);
	}

	.single-product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}
}