/**
 * PrettyCool — WooCommerce styles.
 *
 * Loaded only on WooCommerce pages. Everything here reuses the tokens from
 * style.css so the shop looks like the rest of the sticker book.
 */

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

/*
 * WooCommerce renders most of its calls to action as <a class="button">, which
 * the base button rules in style.css do not reach — those only cover real
 * <button> and <input> elements. Without this block WooCommerce's own grey
 * default wins on every add-to-cart, and the shop stops looking like the theme.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .widget a.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--pc-font-body);
	font-size: var(--pc-step--1);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	padding: 0.75em 1.4em;
	color: var(--pc-white);
	background-color: var(--pc-pink);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-sm);
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce), background-color 0.15s var(--pc-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	color: var(--pc-white);
	background-color: var(--pc-pink-dark);
	transform: translate(-2px, -2px);
	box-shadow: var(--pc-shadow);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--pc-ink);
}

/* Secondary actions read as outlines, not as a second pink. */
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward,
.woocommerce button[name="update_cart"],
.woocommerce .cart button[name="apply_coupon"] {
	background-color: var(--pc-white);
	color: var(--pc-ink);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-forward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce .cart button[name="apply_coupon"]:hover {
	background-color: var(--pc-pink-100);
	color: var(--pc-ink);
}

/* WooCommerce disables the update-cart button until something changes. */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	padding: 0.75em 1.4em;
	color: var(--pc-ink);
	background-color: var(--pc-white);
}

.woocommerce button.button:disabled:hover {
	transform: none;
	box-shadow: var(--pc-shadow-sm);
	background-color: var(--pc-white);
	color: var(--pc-ink);
}

/* The single-product add-to-cart is the loudest button on the page. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	font-size: var(--pc-step-0);
	padding: 0.85em 1.9em;
	box-shadow: var(--pc-shadow);
}

/* Checkout's place-order button, and the cart's proceed button. */
.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	font-size: var(--pc-step-0);
	padding: 0.9em 1.6em;
	box-shadow: var(--pc-shadow);
}

/* Shop notices
 * ------------------------------------------------------------ */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-sm);
	list-style: none;
	margin: 0 0 var(--pc-space-md);
	padding: var(--pc-space-sm) var(--pc-space-md);
	background: var(--pc-pink-100);
	border: var(--pc-line);
	border-left-width: 10px;
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	font-weight: 600;
	color: var(--pc-ink);
}

.woocommerce-error {
	background: var(--pc-white);
	border-left-color: var(--pc-pink-dark);
}

/*
 * WooCommerce sets an icon-font glyph on these via ::before. The theme marks
 * notices with the thick left border instead, and the glyph otherwise lands on
 * top of the first word.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	content: none;
	display: none;
}

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

/* The empty-cart notice inherits a centred alignment that fights the heading. */
.woocommerce .cart-empty,
.woocommerce-cart .cart-empty {
	text-align: left;
	justify-content: flex-start;
}

.woocommerce-cart .return-to-shop { margin-bottom: 0; }

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

.woocommerce ul.products,
ul.products {
	display: grid;
	gap: var(--pc-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	list-style: none;
	margin: 0 0 var(--pc-space-lg);
	padding: 0;
}

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

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 0 var(--pc-space-md);
	overflow: hidden;
	text-align: left;
	background: var(--pc-surface);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	transition: transform 0.25s var(--pc-ease-bounce), box-shadow 0.25s var(--pc-ease-bounce);
}

.woocommerce ul.products li.product:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--pc-shadow);
}

.woocommerce ul.products li.product a img,
ul.products li.product a img {
	width: 100%;
	margin: 0 0 var(--pc-space-sm);
	border-bottom: var(--pc-line);
	background: var(--pc-pink-50);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pc-font-display);
	font-size: var(--pc-step-1);
	font-weight: 700;
	line-height: 1.15;
	padding: 0 var(--pc-space-md) 0.25rem;
	margin: 0;
}

.woocommerce ul.products li.product a { text-decoration: none; color: var(--pc-ink); }

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	display: block;
	padding: 0 var(--pc-space-md);
	margin-bottom: var(--pc-space-sm);
	color: var(--pc-pink-dark);
	font-family: var(--pc-font-display);
	font-size: var(--pc-step-1);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	color: var(--pc-ink-40);
	font-size: 0.8em;
	margin-right: 0.35rem;
}

.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
ul.products li.product .button {
	align-self: flex-start;
	margin: auto var(--pc-space-md) 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }

/* Star ratings */
.woocommerce .star-rating {
	margin: 0 var(--pc-space-md) var(--pc-space-xs);
	color: var(--pc-pink);
	font-size: 0.9em;
}

.woocommerce .star-rating::before { color: var(--pc-pink-200); }

/* Sale badge — a hand-stuck sticker in the corner. */
.woocommerce span.onsale,
span.onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.3em 0.9em;
	line-height: 1.4;
	font-family: var(--pc-font-body);
	font-size: var(--pc-step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pc-white);
	background: var(--pc-pink);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-pill);
	box-shadow: 3px 3px 0 var(--pc-ink);
	transform: rotate(-6deg);
}

/* Shop toolbar
 * ------------------------------------------------------------ */

.pc-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	margin-bottom: var(--pc-space-lg);
	padding: var(--pc-space-xs) var(--pc-space-md);
	background: var(--pc-pink-50);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
}

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

.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { padding: 0.4em 0.8em; border-radius: var(--pc-radius-pill); }

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

.woocommerce div.product {
	display: grid;
	gap: var(--pc-space-lg) var(--pc-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
	.woocommerce div.product .summary { grid-column: 2; margin: 0; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper img {
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-white);
}

.woocommerce div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pc-space-xs);
	margin: var(--pc-space-sm) 0 0;
	padding: 0;
}

.woocommerce div.product .flex-control-thumbs li { width: auto; float: none; margin: 0; }

.woocommerce div.product .flex-control-thumbs img {
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
	opacity: 1;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
	border-color: var(--pc-pink);
	box-shadow: 3px 3px 0 var(--pc-pink);
}

.woocommerce div.product .product_title {
	font-size: var(--pc-step-4);
	margin-bottom: var(--pc-space-sm);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: inline-block;
	font-family: var(--pc-font-display);
	font-size: var(--pc-step-3);
	font-weight: 700;
	color: var(--pc-ink);
	background: var(--pc-pink-100);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-pill);
	padding: 0.1em 0.7em;
	margin-bottom: var(--pc-space-md);
}

.woocommerce div.product p.price del { color: var(--pc-ink-40); font-size: 0.7em; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--pc-step-1);
	color: var(--pc-ink-70);
	margin-bottom: var(--pc-space-md);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-sm);
	margin-bottom: var(--pc-space-md);
}

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .woocommerce-variation { width: 100%; }

.woocommerce div.product form.cart .variations td { border: 0; padding: 0.4rem 0; }
.woocommerce div.product form.cart .variations label { margin: 0; }

.woocommerce .quantity .qty {
	width: 5.5rem;
	text-align: center;
	padding: 0.7em 0.4em;
	border-radius: var(--pc-radius-pill);
}

.woocommerce div.product .product_meta {
	font-size: var(--pc-step--1);
	color: var(--pc-ink-70);
	padding-top: var(--pc-space-sm);
	border-top: var(--pc-line-thin);
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.25rem; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 calc(var(--pc-line-width) * -1);
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm) var(--pc-radius-sm) 0 0;
	box-shadow: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.6em 1.2em;
	font-weight: 700;
	color: var(--pc-ink);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--pc-pink-100);
	border-bottom-color: var(--pc-pink-100);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: var(--pc-space-lg);
	background: var(--pc-pink-100);
	border: var(--pc-line);
	border-radius: 0 var(--pc-radius) var(--pc-radius) var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }

.woocommerce #reviews #comments ol.commentlist li {
	margin-bottom: var(--pc-space-sm);
	padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0 0 0 4.5rem;
	padding: var(--pc-space-md);
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	width: 3.5rem;
	padding: 0;
	background: none;
	border: var(--pc-line-thin);
	border-radius: 50%;
}

/* Related / upsells */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce .cart-collaterals .cross-sells > h2 {
	font-size: var(--pc-step-3);
	margin-bottom: var(--pc-space-md);
}

/* Cart
 * ------------------------------------------------------------ */

.woocommerce table.shop_table {
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	border-collapse: separate;
	overflow: hidden;
	background: var(--pc-white);
	margin-bottom: var(--pc-space-lg);
}

.woocommerce table.shop_table th {
	background: var(--pc-pink-100);
	font-family: var(--pc-font-body);
	font-weight: 700;
}

.woocommerce table.shop_table td { border-top: 0; border-bottom: var(--pc-line-thin); }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.cart img,
.woocommerce-cart table.cart img {
	width: 4.5rem;
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--pc-ink) !important;
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: 50%;
	text-decoration: none;
}

.woocommerce a.remove:hover {
	background: var(--pc-pink) !important;
	color: var(--pc-white) !important;
}

.woocommerce .cart-collaterals {
	display: grid;
	gap: var(--pc-space-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 54rem) {
	.woocommerce .cart-collaterals { grid-template-columns: 1fr minmax(20rem, 26rem); }
	.woocommerce .cart-collaterals .cross-sells { grid-column: 1; }
	.woocommerce .cart-collaterals .cart_totals { grid-column: 2; }
}

.woocommerce .cart-collaterals > * { width: auto !important; float: none !important; }

.woocommerce .cart_totals {
	padding: var(--pc-space-md);
	background: var(--pc-pink-50);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.woocommerce .cart_totals h2 { font-size: var(--pc-step-2); }
.woocommerce .cart_totals table.shop_table { border: 0; box-shadow: none; background: none; }
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout .button { width: 100%; }

.woocommerce .coupon {
	display: flex;
	gap: var(--pc-space-xs);
	align-items: center;
	flex-wrap: wrap;
}

.woocommerce .coupon .input-text { width: auto; flex: 1 1 10rem; }

/* Checkout & account
 * ------------------------------------------------------------ */

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	padding: var(--pc-space-md);
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.woocommerce form .form-row { margin-bottom: var(--pc-space-sm); padding: 0; }
.woocommerce form .form-row label { font-weight: 700; }
.woocommerce form .form-row .required { color: var(--pc-pink-dark); text-decoration: none; }

.woocommerce .select2-container .select2-selection--single {
	height: auto;
	padding: 0.35em 0.3em;
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.6;
	color: var(--pc-ink);
}

.woocommerce-checkout #payment {
	background: var(--pc-pink-50);
	border-radius: var(--pc-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: var(--pc-line-thin);
	padding: var(--pc-space-sm);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { padding: var(--pc-space-sm); }
.woocommerce-checkout #payment #place_order { width: 100%; }

/* My account
 * The shortcode wrapper is a direct child of .entry-content, so it inherits
 * the narrow prose measure and floats its two halves inside that. Let it use
 * the whole card instead, and lay it out on a grid so notices span the full
 * width while the nav lines up with the content box. */
.woocommerce-account .entry-content > .woocommerce { max-width: none; }

/* The page template wraps everything in the .pc-entry sticker, and the account
 * content box is a sticker of its own, so the page showed one border inside
 * another. Drop the outer card here: the nav pills and the content box carry
 * the chrome. With no card padding to bleed into, the small-screen nav row
 * bleeds to the page gutter instead. */
.woocommerce-account .pc-entry {
	--pc-entry-pad: var(--pc-gutter);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.55em 1.1em;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	color: var(--pc-ink);
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-pill);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--pc-pink);
	color: var(--pc-white);
	border-color: var(--pc-ink);
}

/* Small screens: one scrollable row of pills that bleeds to the card edges,
 * instead of a tall stack the visitor has to scroll past to reach anything. */
@media (max-width: 53.99rem) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		margin: 0 calc(var(--pc-entry-pad, var(--pc-space-md)) * -1) var(--pc-space-md);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: var(--pc-space-2xs);
		/* Vertical room for the focus ring; horizontal keeps pills on the content edge. */
		padding: 0.5rem var(--pc-entry-pad, var(--pc-space-md));
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--pc-entry-pad, var(--pc-space-md));
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a { font-size: var(--pc-step--1); }

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}
}

/* Larger screens: fixed-width nav column, content takes the rest. */
@media (min-width: 54rem) {
	.woocommerce-account .entry-content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
		column-gap: var(--pc-space-lg);
		align-items: start;
	}

	/* Notices, the login form, and anything else span both columns. */
	.woocommerce-account .entry-content > .woocommerce > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		grid-column: 1;
		position: sticky;
		top: 6rem; /* matches the html scroll-padding-top under the sticky header */
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		grid-column: 2;
	}
}

/* Breadcrumb
 * ------------------------------------------------------------ */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--pc-space-md);
	font-size: var(--pc-step--1);
	color: var(--pc-ink-70);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--pc-pink-dark); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Header account button
 * ------------------------------------------------------------ */

.pc-account-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55em 1.1em;
	font-weight: 700;
	font-size: var(--pc-step--1);
	text-decoration: none;
	white-space: nowrap;
	color: var(--pc-ink);
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-sm);
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce);
}

.pc-account-link:hover {
	color: var(--pc-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--pc-shadow);
}

.pc-account-link svg { width: 1.15rem; height: 1.15rem; }

/* Product widgets
 * ------------------------------------------------------------ */

/*
 * WooCommerce's product widgets (Recent/Featured/Top rated/On sale products)
 * all render as ul.product_list_widget: an anchor wrapping a thumbnail and
 * title, followed by loose price markup.
 *
 * The thumbnail is positioned out of flow rather than made a grid or flex item,
 * because what follows it varies — a sale price adds del/ins, a rating adds a
 * .star-rating, and the subscriptions plugin appends a bare "/ year" text node.
 * Taking the image out of flow and indenting the item leaves all of that to wrap
 * normally, whatever it turns out to be.
 */
.widget ul.product_list_widget,
ul.product_list_widget {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul.product_list_widget li {
	position: relative;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.75rem 0 0.75rem 4.1rem;
	border-top: 1px dashed var(--pc-pink-200);
	line-height: 1.35;
}

.widget ul.product_list_widget li:first-child {
	padding-top: 0;
	border-top: 0;
}

.widget ul.product_list_widget li:last-child { padding-bottom: 0; }

.widget ul.product_list_widget li > a {
	display: block;
	font-weight: 700;
	text-decoration: none;
	color: var(--pc-ink);
}

.widget ul.product_list_widget li > a:hover { color: var(--pc-pink-dark); }

.widget ul.product_list_widget li img {
	position: absolute;
	left: 0;
	top: 0.75rem;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	object-fit: cover;
	background: var(--pc-pink-50);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
	float: none;
}

.widget ul.product_list_widget li:first-child img { top: 0; }

.widget ul.product_list_widget li .woocommerce-Price-amount {
	color: var(--pc-pink-dark);
	font-weight: 700;
}

.widget ul.product_list_widget li del { opacity: 0.55; font-weight: 400; }
.widget ul.product_list_widget li del .woocommerce-Price-amount { color: var(--pc-ink-70); }
.widget ul.product_list_widget li ins { text-decoration: none; }

.widget ul.product_list_widget li .star-rating {
	margin: 0.25rem 0 0;
	font-size: 0.8em;
}

/* The cart widget's totals and buttons sit below the list. */
.widget .woocommerce-mini-cart__total {
	padding-top: 0.75rem;
	margin-top: 0.75rem;
	border-top: var(--pc-line-thin);
}

.widget .woocommerce-mini-cart__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

/* Filter-by-price widget. */
.widget .price_slider_wrapper .ui-slider {
	position: relative;
	height: 0.6rem;
	margin: 1.2rem 0 1rem;
	background: var(--pc-pink-100);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-pill);
}

.widget .price_slider_wrapper .ui-slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--pc-pink);
	border-radius: var(--pc-radius-pill);
}

.widget .price_slider_wrapper .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 1.1rem;
	height: 1.1rem;
	margin-left: -0.55rem;
	transform: translateY(-50%);
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: 50%;
	cursor: ew-resize;
}

.widget .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.widget .price_slider_amount .price_label {
	order: 1;
	width: 100%;
	font-size: var(--pc-step--1);
	color: var(--pc-ink-70);
}

.widget .price_slider_amount .button { order: 2; }

/* Layered nav and product categories: keep the counts quiet. */
.widget .woocommerce-widget-layered-nav-list__item,
.widget .product-categories li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.widget .woocommerce-widget-layered-nav-list__item .count,
.widget .product-categories .count {
	flex: 0 0 auto;
	font-size: var(--pc-step--1);
	font-weight: 600;
	color: var(--pc-ink-70);
	background: var(--pc-pink-100);
	border-radius: var(--pc-radius-pill);
	padding: 0.05em 0.55em;
}

/* Blocks-based cart & checkout (WooCommerce Blocks)
 * ------------------------------------------------------------ */

.wc-block-components-button:not(.is-link) {
	background: var(--pc-pink);
	color: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-sm);
	font-weight: 700;
}

.wc-block-components-button:not(.is-link):hover { background: var(--pc-pink-dark); }

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm);
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper {
	border-color: var(--pc-pink-200);
}