/* =========================================================================
   PhysioPoint store design system
   Hello Elementor child theme - WooCommerce shop, product, cart, checkout
   ========================================================================= */

:root {
	--pp-navy: #12334a;
	--pp-navy-900: #0c2536;
	--pp-blue: #0878a6;
	--pp-cyan: #0097cf;
	--pp-slate: #5f6f7b;
	--pp-slate-light: #8195a2;
	--pp-tint: #f6fbfd;
	--pp-tint-2: #eef6fa;
	--pp-line: #e0eaf1;
	--pp-line-strong: #cbdde8;
	--pp-cta: #321fe7;
	--pp-cta-dark: #2415b8;
	--pp-white: #ffffff;
	--pp-success: #1f8a5b;
	--pp-sale: #d1345b;

	--pp-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--pp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pp-radius: 14px;
	--pp-radius-sm: 10px;
	--pp-radius-pill: 999px;

	--pp-shadow: 0 1px 2px rgba(18, 51, 74, .04), 0 8px 24px rgba(18, 51, 74, .06);
	--pp-shadow-lift: 0 2px 6px rgba(18, 51, 74, .06), 0 18px 40px rgba(18, 51, 74, .12);

	--pp-ease: cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------------------
   Base: WooCommerce templates do not inherit the Elementor kit typography,
   which is why the store currently renders in the system font stack.
   ---------------------------------------------------------------------- */

.woocommerce,
.woocommerce-page,
.woocommerce-page .site-main,
.woocommerce div.product,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
	font-family: var(--pp-font-body);
	color: var(--pp-slate);
	-webkit-font-smoothing: antialiased;
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3 {
	font-family: var(--pp-font-head);
	color: var(--pp-navy);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.1;
}

.woocommerce a {
	color: var(--pp-blue);
	text-decoration: none;
}

.woocommerce a:hover {
	color: var(--pp-navy);
}

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	font-family: var(--pp-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-cta);
	color: var(--pp-white);
	text-shadow: none;
	transition: background .2s var(--pp-ease), transform .2s var(--pp-ease), box-shadow .2s var(--pp-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--pp-navy);
	color: var(--pp-white);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(18, 51, 74, .18);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 3px solid var(--pp-cyan);
	outline-offset: 2px;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--pp-line);
	color: var(--pp-slate-light);
	opacity: 1;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.pp-btn-ghost,
.woocommerce .pp-btn-ghost {
	background: transparent;
	border-color: var(--pp-line-strong);
	color: var(--pp-navy);
}

/* Form controls ---------------------------------------------------------- */

.woocommerce .select2-container .select2-selection--single,
.woocommerce select,
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce-page select,
.woocommerce-page input.input-text {
	font-family: var(--pp-font-body);
	font-size: 15px;
	color: var(--pp-navy);
	background-color: var(--pp-white);
	border: 1px solid var(--pp-line-strong);
	border-radius: var(--pp-radius-sm);
	padding: 12px 14px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .2s var(--pp-ease), box-shadow .2s var(--pp-ease);
}

.woocommerce select,
.woocommerce-page select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2312334A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.woocommerce select:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus {
	border-color: var(--pp-cyan);
	box-shadow: 0 0 0 3px rgba(0, 151, 207, .18);
	outline: none;
}

/* Page frame ------------------------------------------------------------
   Hello Elementor gives .site-main no vertical padding, so store content
   butts straight against the header and the Elementor footer. Worse, with no
   padding or border on the wrapper the last element's bottom margin collapses
   through it, so the grid's own 56px never reaches the footer at all.
   Padding here both creates the rhythm and stops the collapse. */

.woocommerce-page .site-main,
.woocommerce .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	padding-top: 44px;
	padding-bottom: 88px;
}

/* Spacing below the last block is the wrapper's job now, not the grid's. */
.woocommerce ul.products:last-child,
.woocommerce-page ul.products:last-child,
.woocommerce div.product .related:last-child,
.woocommerce div.product .upsells:last-child,
.woocommerce-cart .cart-collaterals:last-child,
.woocommerce-checkout #order_review:last-child {
	margin-bottom: 0;
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-size: 15px;
	border: 1px solid var(--pp-line);
	border-top: 3px solid var(--pp-cyan);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-tint);
	color: var(--pp-navy);
	padding: 16px 20px 16px 20px;
	box-shadow: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error {
	border-top-color: var(--pp-sale);
	background: #fdf3f5;
}

.woocommerce-message .button,
.woocommerce-info .button {
	padding: 9px 18px;
	font-size: 14px;
}


/* =========================================================================
   1. Shop archive
   ========================================================================= */

.woocommerce-breadcrumb,
.pp-breadcrumb {
	font-size: 13px;
	color: var(--pp-slate-light);
	margin: 0 0 18px;
	letter-spacing: .01em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

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

.pp-breadcrumb a:hover {
	color: var(--pp-blue);
}

.pp-crumb-sep {
	color: var(--pp-line-strong);
	margin: 0 8px;
}

/* Truncate the marketplace-length product name in the breadcrumb trail.
   display:block drops the flex gap, so the separator carries its own margin. */
.single-product .pp-breadcrumb {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.woocommerce-products-header {
	margin: 0 0 28px;
}

.woocommerce-products-header__title,
.woocommerce-products-header h1 {
	font-family: var(--pp-font-head);
	font-size: clamp(38px, 5vw, 54px);
	line-height: 1.02;
	color: var(--pp-navy);
	margin: 0 0 10px;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--pp-slate);
	max-width: 58ch;
	margin: 0;
}

/* Toolbar: result count left, sorting right, on one baseline. */
.pp-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 0 16px;
	margin: 0 0 28px;
	border-top: 1px solid var(--pp-line);
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce .pp-shop-toolbar .woocommerce-result-count {
	float: none;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--pp-slate);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.woocommerce .pp-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce .pp-shop-toolbar .woocommerce-ordering select {
	min-width: 210px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
	background-color: var(--pp-tint);
	border-color: var(--pp-line);
}

/* Grid ------------------------------------------------------------------- */

/* WooCommerce sizes list items with .columns-N selectors, which outrank a
   plain li.product rule. Every selector below is matched at that same
   specificity or higher so the grid track, not a percentage width, decides
   how wide a card is. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce-page[class*="columns-"] ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product {
	width: 100%;
	max-width: none;
	min-width: 0;
	float: none;
	margin: 0;
	padding: 0;
	clear: none;
	display: flex;
}

/* woocommerce-smallscreen.css alternates floats with nth-child selectors. */
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n+1),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n+1),
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
	float: none;
	clear: none;
	width: 100%;
	margin: 0;
}

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

/* Card ------------------------------------------------------------------- */

.pp-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 14px 14px 18px;
	transition: border-color .25s var(--pp-ease), box-shadow .25s var(--pp-ease), transform .25s var(--pp-ease);
}

.pp-card:hover {
	border-color: var(--pp-line-strong);
	box-shadow: var(--pp-shadow-lift);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
}

/* Fixed square media frame so mismatched marketplace images line up. */
.pp-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--pp-radius-sm);
	background: var(--pp-tint);
	overflow: hidden;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.woocommerce ul.products li.product .pp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0;
	padding: 12px;
	box-shadow: none;
	border-radius: 0;
	transition: transform .5s var(--pp-ease);
}

.pp-card:hover .pp-card__media img {
	transform: scale(1.04);
}

.pp-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	padding: 5px 12px;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-sale);
	color: var(--pp-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	margin: 0;
	padding: 5px 12px;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	line-height: 1;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-sale);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Title: clamped to two lines so a 90-character marketplace name cannot
   push the price and button out of alignment across the row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	font-family: var(--pp-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--pp-navy);
	padding: 0;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pp-card:hover .woocommerce-loop-product__title {
	color: var(--pp-blue);
}

.pp-card__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pp-slate-light);
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .star-rating {
	font-size: 13px;
	margin: 0 0 10px;
	color: var(--pp-cyan);
}

/* Price pinned to the bottom of the link so every card lines up. */
.woocommerce ul.products li.product .price {
	margin: auto 0 0;
	padding-top: 4px;
	font-family: var(--pp-font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--pp-navy);
	line-height: 1.2;
}

.woocommerce ul.products li.product .price del {
	color: var(--pp-slate-light);
	font-weight: 500;
	font-size: 15px;
	opacity: 1;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--pp-sale);
	text-decoration: none;
	font-weight: 700;
}

.woocommerce ul.products li.product .price .from,
.woocommerce ul.products li.product .price small {
	font-size: 13px;
	font-weight: 500;
	color: var(--pp-slate-light);
}

/* Card button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_variable {
	display: block;
	width: 100%;
	margin: 16px 0 0;
	padding: 13px 20px;
	text-align: center;
	font-size: 15px;
	background: var(--pp-white);
	color: var(--pp-navy);
	border: 1px solid var(--pp-line-strong);
	border-radius: var(--pp-radius-pill);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--pp-cta);
	border-color: var(--pp-cta);
	color: var(--pp-white);
	transform: none;
	box-shadow: 0 8px 18px rgba(50, 31, 231, .22);
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.woocommerce ul.products li.product .button.loading::after {
	top: .5em;
}

/* Pagination ------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 42px;
	padding: 11px 14px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-navy);
	background: var(--pp-white);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--pp-navy);
	border-color: var(--pp-navy);
	color: var(--pp-white);
}


/* =========================================================================
   2. Single product
   ========================================================================= */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	column-gap: 56px;
	row-gap: 0;
	align-items: start;
}

/* WooCommerce core styles this column through `div.images` selectors, for
   example `.woocommerce div.product div.images .flex-control-thumbs li`
   (four classes, three type selectors). Matching on the gallery class alone
   scores lower, so core wins and the layout quietly falls back to its own
   float grid. Every gallery rule below therefore matches
   `div.images.woocommerce-product-gallery` to outrank core on specificity
   rather than reaching for !important. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	grid-column: 1;
	width: 100%;
	float: none;
	margin: 0;
	align-self: start;
}

.woocommerce div.product .summary,
.woocommerce div.product .entry-summary {
	grid-column: 2;
	width: 100% !important;
	float: none;
	margin: 0;
	align-self: start;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .clear,
.woocommerce div.product .up-sells {
	grid-column: 1 / -1;
}

/* Gallery ---------------------------------------------------------------- */

/* Frame. With the gallery slider running, `.flex-viewport` is the visible
   window and `__wrapper` is the sliding track, which is as wide as every
   slide laid end to end. A frame on the track is therefore never seen. With a
   single image there is no viewport and the track is the visible box, so both
   carry the frame and the inner one is reset when it sits inside a viewport. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport,
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-white);
	overflow: hidden;
	margin: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

/* Slide widths are set inline by flexslider, so only the image is sized here. */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 20px;
	background: var(--pp-white);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius-sm);
	padding: 6px;
	opacity: 1;
	cursor: pointer;
	transition: border-color .2s var(--pp-ease);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--pp-cyan);
	opacity: 1;
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 16px;
	right: 16px;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: 50%;
	box-shadow: var(--pp-shadow);
}

.woocommerce div.product .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	margin: 0;
	padding: 6px 14px;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	line-height: 1;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-sale);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Summary ---------------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-family: var(--pp-font-head);
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.06;
	color: var(--pp-navy);
	margin: 0 0 14px;
	padding: 0;
	letter-spacing: -.01em;
}

.woocommerce div.product .woocommerce-product-rating {
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	font-size: 14px;
	color: var(--pp-slate);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--pp-font-body);
	font-size: 30px;
	font-weight: 700;
	color: var(--pp-navy);
	line-height: 1.15;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce div.product p.price del {
	font-size: 20px;
	font-weight: 500;
	color: var(--pp-slate-light);
	opacity: 1;
	margin-right: 8px;
}

.woocommerce div.product p.price ins {
	background: none;
	text-decoration: none;
	color: var(--pp-sale);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pp-slate);
	margin: 0 0 26px;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
	margin: 0 0 12px;
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Supplier listings often paste a raw attributes table into the short
   description. Keep it readable and stop it forcing the column wider. */
.woocommerce div.product .woocommerce-product-details__short-description h2,
.woocommerce div.product .woocommerce-product-details__short-description h3,
.woocommerce div.product .woocommerce-product-details__short-description h4 {
	font-family: var(--pp-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pp-slate);
	margin: 20px 0 10px;
}

.woocommerce div.product .woocommerce-product-details__short-description table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius-sm);
	border-collapse: collapse;
	margin: 0 0 18px;
	font-size: 14px;
}

.woocommerce div.product .woocommerce-product-details__short-description table th,
.woocommerce div.product .woocommerce-product-details__short-description table td {
	border: 0;
	border-bottom: 1px solid var(--pp-line);
	padding: 10px 14px;
	text-align: left;
	line-height: 1.45;
	vertical-align: top;
}

.woocommerce div.product .woocommerce-product-details__short-description table th {
	background: var(--pp-tint);
	color: var(--pp-navy);
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-product-details__short-description table tr:last-child th,
.woocommerce div.product .woocommerce-product-details__short-description table tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description ul {
	padding-left: 20px;
	margin: 0 0 14px;
}

/* Variations ------------------------------------------------------------- */

.woocommerce div.product form.cart {
	margin: 0 0 22px;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	background: transparent;
	padding: 0;
	border-collapse: collapse;
}

/* The attribute label is a <th> in current WooCommerce and a <td> in older
   releases, so both are unstyled here. Left as a table cell it keeps the
   theme's default header background and reads as a grey box beside the
   dropdown. */
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
}

.woocommerce div.product form.cart .variations tr {
	margin: 0 0 16px;
}

.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.label {
	padding: 0 0 8px;
	text-align: left;
	font-weight: 400;
}

.woocommerce div.product form.cart .variations th.label label,
.woocommerce div.product form.cart .variations td.label label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pp-slate);
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 13px 40px 13px 14px;
	font-size: 15px;
	font-weight: 500;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--pp-slate);
	text-decoration: underline;
}

/* WooCommerce hides this link with inline visibility until an option is
   chosen, so it still reserves its own line and opens a gap above the
   quantity row. Take it out of flow while it is hidden. */
.woocommerce div.product form.cart .reset_variations[style*="hidden"] {
	display: none;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
	margin: 0 0 16px;
}

.woocommerce div.product form.cart .woocommerce-variation-price .price {
	font-size: 24px;
	border: 0;
	padding: 0;
	margin: 0;
}

.woocommerce div.product form.cart .woocommerce-variation-availability p {
	font-size: 14px;
	color: var(--pp-success);
	font-weight: 600;
	margin: 0 0 12px;
}

/* Quantity + add to cart ------------------------------------------------- */

.woocommerce div.product form.cart.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
}

.woocommerce div.product form.cart div.quantity,
.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 1px solid var(--pp-line-strong);
	border-radius: var(--pp-radius-pill);
	background: var(--pp-white);
	overflow: hidden;
	float: none;
}

.woocommerce .quantity input.qty,
.woocommerce div.product form.cart div.quantity .qty {
	width: 74px;
	height: 50px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	font-family: var(--pp-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--pp-navy);
	text-align: center;
	box-shadow: none;
}

.woocommerce .quantity input.qty:focus {
	outline: none;
	box-shadow: none;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 50px;
	padding: 15px 30px;
	font-size: 16px;
	background: var(--pp-cta);
	border-color: var(--pp-cta);
	color: var(--pp-white);
	border-radius: var(--pp-radius-pill);
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
	background: var(--pp-navy);
	border-color: var(--pp-navy);
}

/* Reassurance strip ------------------------------------------------------ */

.pp-trust {
	list-style: none;
	margin: 0 0 22px;
	padding: 18px 20px;
	background: var(--pp-tint);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	display: grid;
	gap: 12px;
}

.pp-trust__item {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0 0 0 26px;
	position: relative;
	list-style: none;
}

.pp-trust__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pp-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4.2 3.6 6.8 9 1.4'/%3E%3C/svg%3E") center no-repeat;
}

.pp-trust__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-navy);
	line-height: 1.3;
}

.pp-trust__copy {
	font-size: 13px;
	color: var(--pp-slate);
	line-height: 1.45;
}

/* Meta ------------------------------------------------------------------- */

.woocommerce div.product .product_meta {
	font-size: 13px;
	color: var(--pp-slate-light);
	border-top: 1px solid var(--pp-line);
	padding-top: 16px;
	display: grid;
	gap: 6px;
}

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

.woocommerce div.product .product_meta a {
	color: var(--pp-slate);
	text-decoration: underline;
}

/* Tabs ------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	margin-top: 64px;
	padding-top: 8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
	display: none;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 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;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 20px;
	font-family: var(--pp-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-slate);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 76ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--pp-slate);
	margin-bottom: 0;
}

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

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-family: var(--pp-font-head);
	font-size: 26px;
	color: var(--pp-navy);
	margin: 28px 0 12px;
}

.woocommerce div.product .woocommerce-tabs .panel p {
	margin: 0 0 14px;
}

.woocommerce div.product .woocommerce-tabs .panel ul {
	padding-left: 20px;
	margin: 0 0 16px;
}

/* Supplier descriptions arrive with centred headings and bare spec tables.
   Pull them back onto the page's left edge and give tables the site's own
   table language. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th {
	text-align: left;
}

.woocommerce div.product .woocommerce-tabs .panel table {
	width: 100%;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.woocommerce div.product .woocommerce-tabs .panel table th,
.woocommerce div.product .woocommerce-tabs .panel table td {
	border: 0;
	border-bottom: 1px solid var(--pp-line);
	padding: 13px 18px;
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce div.product .woocommerce-tabs .panel table th {
	background: var(--pp-tint);
	color: var(--pp-navy);
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-tabs .panel table tr:last-child th,
.woocommerce div.product .woocommerce-tabs .panel table tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs .panel img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pp-radius-sm);
}

.woocommerce table.shop_attributes {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	max-width: 640px;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--pp-line);
	padding: 14px 18px;
	font-style: normal;
	font-size: 15px;
	background: transparent;
}

.woocommerce table.shop_attributes th {
	background: var(--pp-tint);
	color: var(--pp-navy);
	font-weight: 600;
	width: 34%;
}

.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td {
	border-bottom: 0;
}

/* Related ---------------------------------------------------------------- */

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--pp-line);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-family: var(--pp-font-head);
	font-size: 32px;
	color: var(--pp-navy);
	margin: 0 0 24px;
}


/* =========================================================================
   3. Cart
   ========================================================================= */

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.woocommerce table.shop_table {
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 28px;
}

.woocommerce table.shop_table th {
	background: var(--pp-tint);
	font-family: var(--pp-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pp-slate);
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce table.shop_table td {
	padding: 20px 18px;
	border: 0;
	border-bottom: 1px solid var(--pp-line);
	vertical-align: middle;
	font-size: 15px;
	color: var(--pp-navy);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce table.cart img,
.woocommerce-cart table.cart img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	background: var(--pp-tint);
	border-radius: var(--pp-radius-sm);
	padding: 6px;
}

.woocommerce table.cart td.product-name a {
	font-weight: 600;
	color: var(--pp-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce table.cart td.product-name a:hover {
	color: var(--pp-blue);
}

.woocommerce a.remove {
	width: 26px;
	height: 26px;
	line-height: 24px;
	font-size: 18px;
	color: var(--pp-slate-light) !important;
	border: 1px solid var(--pp-line);
	background: var(--pp-white);
}

.woocommerce a.remove:hover {
	background: var(--pp-sale) !important;
	border-color: var(--pp-sale);
	color: var(--pp-white) !important;
}

.woocommerce-cart table.cart td.actions {
	background: var(--pp-tint);
	padding: 18px;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	float: none;
	flex-wrap: wrap;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 220px;
	float: none;
	margin: 0;
}

.woocommerce-cart table.cart td.actions .button {
	float: none;
}

.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 440px;
	margin-left: auto;
	float: none;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 24px 26px 26px;
	box-shadow: var(--pp-shadow);
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--pp-font-head);
	font-size: 26px;
	color: var(--pp-navy);
	margin: 0 0 16px;
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	margin: 0 0 20px;
	border-radius: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: transparent;
	padding: 12px 0;
	border-bottom: 1px solid var(--pp-line);
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

.woocommerce-cart .cart_totals table.shop_table th {
	color: var(--pp-slate);
	font-weight: 500;
	width: 45%;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	border-bottom: 0;
	padding-top: 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--pp-navy);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 16px 24px;
	margin: 0;
}


/* =========================================================================
   4. Checkout
   ========================================================================= */

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 20px;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	width: 100%;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-checkout #customer_details {
	margin-bottom: 36px;
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
	font-family: var(--pp-font-head);
	font-size: 26px;
	color: var(--pp-navy);
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 16px;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pp-slate);
	margin: 0 0 6px;
}

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

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
}

.woocommerce form .form-row textarea {
	min-height: 110px;
	resize: vertical;
}

.woocommerce .select2-container--default .select2-selection--single {
	height: auto;
	border: 1px solid var(--pp-line-strong);
	border-radius: var(--pp-radius-sm);
	padding: 11px 14px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
	color: var(--pp-navy);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

.woocommerce-checkout #order_review_heading {
	font-family: var(--pp-font-head);
	font-size: 28px;
	color: var(--pp-navy);
	margin: 0 0 18px;
}

.woocommerce-checkout #order_review {
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 24px 26px 26px;
	box-shadow: var(--pp-shadow);
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0 0 8px;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	background: transparent;
	padding: 12px 0;
	border-bottom: 1px solid var(--pp-line);
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
	border-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--pp-navy);
	padding-top: 16px;
	text-transform: none;
	letter-spacing: 0;
}

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

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--pp-line);
	padding: 16px 0;
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 8px;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--pp-tint);
	border-radius: var(--pp-radius-sm);
	color: var(--pp-slate);
	font-size: 14px;
	line-height: 1.6;
	margin-top: 10px;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--pp-tint);
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 20px 0 0;
	margin: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	font-size: 16px;
	padding: 16px 24px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--pp-slate-light);
	margin-bottom: 14px;
}

/* Order received --------------------------------------------------------- */

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	overflow: hidden;
	background: var(--pp-tint);
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 18px 20px;
	border-right: 1px solid var(--pp-line);
	border-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pp-slate);
	list-style: none;
}

.woocommerce ul.order_details li:last-child {
	border-right: 0;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--pp-font-body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pp-navy);
}


/* =========================================================================
   5. Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery,
	.woocommerce div.product .summary,
	.woocommerce div.product .entry-summary {
		grid-column: 1;
	}

	/* Four thumbnails across is too tight once the gallery is full width. */
	.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.woocommerce-page .site-main,
	.woocommerce .site-main,
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main {
		padding-top: 28px;
		padding-bottom: 60px;
	}

	.woocommerce .col2-set,
	.woocommerce-page .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: none;
	}

	.pp-shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.woocommerce .pp-shop-toolbar .woocommerce-ordering,
	.woocommerce .pp-shop-toolbar .woocommerce-ordering select {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.pp-card {
		padding: 10px 10px 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	.pp-card__excerpt {
		display: none;
	}

	.woocommerce ul.products li.product .price {
		font-size: 17px;
	}

	.woocommerce ul.products li.product .button {
		font-size: 14px;
		padding: 11px 14px;
	}

	.woocommerce div.product form.cart .button.single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		text-align: right;
		padding: 12px 14px;
	}

	.woocommerce ul.order_details li {
		border-right: 0;
		border-bottom: 1px solid var(--pp-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-card,
	.pp-card__media img,
	.woocommerce a.button,
	.woocommerce button.button {
		transition: none;
	}

	.pp-card:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Description panel layout
   -------------------------------------------------------------------------
   The store's product copy follows one shape: intro paragraphs, then
   "About this ..." / "How it gets used" feature lists whose items open with a
   bolded lead, then a Specifications table. These rules give that shape a
   layout instead of leaving it as one long column of bullets.
   ---------------------------------------------------------------------- */

/* Section headings: smaller than the 26px default and separated by a rule, so
   the eye can find the sections without them competing with the product title. */
.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 21px;
	line-height: 1.25;
	margin: 34px 0 14px;
	padding-top: 20px;
	border-top: 1px solid var(--pp-line);
}

.woocommerce div.product .woocommerce-tabs .panel h3:first-of-type {
	margin-top: 28px;
}

/* Feature lists. :has() keeps this to the bolded-lead lists; a browser without
   it simply leaves them as a normal single-column list, which still reads. */
.woocommerce div.product .woocommerce-tabs .panel ul:has(> li > strong) {
	list-style: none;
	padding-left: 0;
	margin: 0 0 8px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 32px;
}

@media (min-width: 900px) {
	.woocommerce div.product .woocommerce-tabs .panel ul:has(> li > strong) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce div.product .woocommerce-tabs .panel ul:has(> li > strong) > li {
	position: relative;
	padding-left: 20px;
	margin: 0;
	line-height: 1.65;
}

.woocommerce div.product .woocommerce-tabs .panel ul:has(> li > strong) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pp-cyan);
}

.woocommerce div.product .woocommerce-tabs .panel ul > li > strong {
	color: var(--pp-navy);
	font-weight: 600;
}

/* Specifications table. Inherits the panel table styling above; this only
   fixes the key column so the six products line up with each other. */
.woocommerce div.product .woocommerce-tabs .panel table.pp-spec {
	display: table;
	max-width: 520px;
	margin-top: 4px;
}

.woocommerce div.product .woocommerce-tabs .panel table.pp-spec th {
	width: 38%;
	white-space: normal;
}

@media (max-width: 600px) {
	.woocommerce div.product .woocommerce-tabs .panel table.pp-spec th {
		width: 44%;
	}
}