/* =========================================================================
   05-shop.css — shop, product, cart, checkout and account-downloads styles.

   Owns the product card. The home page renders the identical card through
   wc_get_template_part( 'content', 'product' ), so every card rule lives here
   and 04-home.css stays thin.

   Token-driven throughout: no raw colour values, no magic font stacks.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Local safety nets
   ---------------------------------------------------------------------- */

/* Duplicated from base on purpose — a missing rule here would leak
   screen-reader text into the layout. Identical declarations cascade safely. */
.mp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Button modifiers used by shop templates. */
.mp-btn--block {
	display: flex;
	width: 100%;
}

.mp-btn--sm {
	min-height: 44px;
	padding: 0 var(--sp-4);
	font-size: var(--fs-small);
}

/* =========================================================================
   1. Archive header
   ========================================================================= */

.mp-shop {
	padding-block: var(--sp-7) 0;
}

.mp-shop__header {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

.mp-shop__breadcrumb,
.mp-product__breadcrumb {
	margin-bottom: var(--sp-4);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: var(--ls-wide);
	color: var(--ink-soft);
}

.mp-shop__breadcrumb .woocommerce-breadcrumb,
.mp-product__breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	color: inherit;
}

.mp-shop__breadcrumb a,
.mp-product__breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease);
}

.mp-shop__breadcrumb a:hover,
.mp-product__breadcrumb a:hover {
	border-bottom-color: var(--taupe-line);
}

.mp-shop__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	color: var(--ink);
}

.mp-shop__intro {
	margin-top: var(--sp-3);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

.mp-shop__intro :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   2. Occasion filter pills

   Plain crawlable links. Horizontally scrollable on narrow screens with the
   scrollbar hidden — the row is edge-bled so the overflow reads as intentional.
   ========================================================================= */

.mp-filter {
	margin-top: var(--sp-6);
}

.mp-filter__list {
	display: flex;
	gap: var(--sp-2);
	justify-content: flex-start;
	margin: 0;
	padding: 0 var(--gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	/* Bleed past the container so pills can scroll to the screen edge. */
	margin-inline: calc(var(--gutter) * -1);
}

.mp-filter__list::-webkit-scrollbar {
	display: none;
}

.mp-filter__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.mp-filter__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-full);
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

@media (hover: hover) {
	.mp-filter__pill:hover {
		background: var(--sage-tint);
		border-color: var(--sage);
	}
}

.mp-filter__pill.is-active {
	color: var(--on-sage);
	background: var(--sage-dark);
	border-color: var(--sage-dark);
}

@media (hover: hover) {
	.mp-filter__pill.is-active:hover {
		background: var(--sage-deeper);
		border-color: var(--sage-deeper);
	}
}

/* Centre the row once it comfortably fits. */
@media (min-width: 900px) {
	.mp-filter__list {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		row-gap: var(--sp-2);
	}
}

/* =========================================================================
   3. Toolbar — result count + ordering
   ========================================================================= */

.mp-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--taupe-line);
}

.mp-shop__count,
.mp-shop__count .woocommerce-result-count {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--ink-soft);
}

.mp-shop__sort .woocommerce-ordering {
	margin: 0;
}

.mp-shop__sort select,
.mp-shop__sort .orderby {
	min-height: 44px;
	padding: 0 var(--sp-6) 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--ink);
	background-color: var(--surface);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-xs);
	cursor: pointer;
	appearance: none;
	/* Chevron drawn with a token colour via currentColor-safe mask. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 1px),
		calc(100% - 14px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* =========================================================================
   4. Products grid
   ========================================================================= */

.mp-products-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5);
	row-gap: var(--sp-7);
	margin-top: var(--sp-7);
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.mp-products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.mp-products-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.mp-products-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================================
   5. Product card — shared by the archive, related row and home page.

   Structure:
     .mp-product-card
       .mp-product-card__frame       matte mount
         .mp-product-card__media     4:5 window
           .mp-product-card__img
         .mp-product-card__badge     sale disc
       .mp-product-card__body
         .mp-product-card__tag
         .mp-product-card__title > .mp-product-card__link   (stretched)
         .mp-product-card__meta
           .mp-product-card__price
           .mp-product-card__format  PDF affordance
         .mp-product-card__cta       decorative button
   ========================================================================= */

.mp-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: transparent;
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

/* --- The matte frame ---------------------------------------------------- */

.mp-product-card__frame {
	position: relative;
	padding: var(--sp-4);
	background: var(--bg-alt);
	border: 1px solid var(--taupe);
	border-radius: var(--r-sm);
	transition: box-shadow var(--dur) var(--ease);
}

.mp-product-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-xs);
	background: var(--surface);
}

.mp-product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

/* --- Sale disc ---------------------------------------------------------- */

.mp-product-card__badge {
	position: absolute;
	top: calc(var(--sp-4) - 10px);
	left: calc(var(--sp-4) - 10px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-full);
	background: var(--clay);
	color: var(--on-sage);
	pointer-events: none;
}

.mp-product-card__badge-value {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* --- Body --------------------------------------------------------------- */

.mp-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--sp-2);
	padding-top: var(--sp-3);
}

.mp-product-card__tag {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.mp-product-card__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 20px;
	line-height: var(--lh-tight);
	color: var(--ink);
	/* Two-line clamp keeps every card in a row the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mp-product-card__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the whole card is clickable, but only one tab stop exists. */
.mp-product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--r-sm);
}

.mp-product-card__link:focus-visible {
	outline: none;
}

.mp-product-card__link:focus-visible::after {
	outline: 2px solid var(--sage-dark);
	outline-offset: 3px;
}

/* Anything a plugin injects into the card must stay clickable above the
   stretched overlay. */
.mp-product-card a:not(.mp-product-card__link),
.mp-product-card button {
	position: relative;
	z-index: 3;
}

.mp-product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-1);
}

.mp-product-card__price {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.mp-product-card__price del {
	margin-right: 6px;
	font-weight: 400;
	color: var(--ink-soft);
	text-decoration: line-through;
}

.mp-product-card__price ins {
	color: var(--clay);
	text-decoration: none;
	background: transparent;
}

/* The "it's a PDF" affordance. */
.mp-product-card__format {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.mp-product-card__format-icon {
	flex: 0 0 auto;
	color: var(--sage-dark);
}

.mp-product-card__cta {
	justify-content: center;
	width: 100%;
	margin-top: var(--sp-3);
}

/* --- Hover, pointer devices only ---------------------------------------- */

@media (hover: hover) {
	.mp-product-card:hover {
		transform: translateY(-4px);
	}

	.mp-product-card:hover .mp-product-card__frame {
		box-shadow: var(--shadow-md);
	}

	.mp-product-card:hover .mp-product-card__img {
		transform: scale(1.04);
	}

	.mp-product-card:hover .mp-product-card__cta {
		color: var(--on-sage);
		background: var(--sage-dark);
		border-color: var(--sage-dark);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mp-product-card,
	.mp-product-card__img {
		transition: none;
	}

	.mp-product-card:hover {
		transform: none;
	}

	.mp-product-card:hover .mp-product-card__img {
		transform: none;
	}
}

/* Stays legible down to a 160px column. */
@media (max-width: 420px) {
	.mp-product-card__frame {
		padding: var(--sp-2);
	}

	.mp-product-card__badge {
		top: calc(var(--sp-2) - 8px);
		left: calc(var(--sp-2) - 8px);
		width: 40px;
		height: 40px;
	}

	.mp-product-card__title {
		font-size: 17px;
	}

	.mp-product-card__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* =========================================================================
   6. Pagination
   ========================================================================= */

.mp-shop__pagination {
	margin-top: var(--sp-7);
}

.mp-shop__pagination .woocommerce-pagination ul,
.mp-shop__pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.mp-shop__pagination li {
	margin: 0;
	border: 0;
}

.mp-shop__pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 6px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-xs);
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

@media (hover: hover) {
	.mp-shop__pagination a.page-numbers:hover {
		background: var(--sage-tint);
		border-color: var(--sage);
	}
}

.mp-shop__pagination .page-numbers.current {
	color: var(--on-sage);
	background: var(--sage-dark);
	border-color: var(--sage-dark);
}

.mp-shop__pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--ink-soft);
}

/* =========================================================================
   7. Empty state
   ========================================================================= */

.mp-shop__empty,
.mp-downloads__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	max-width: 42ch;
	margin: var(--sp-8) auto;
	padding: var(--sp-7) var(--sp-5);
	text-align: center;
	background: var(--bg-alt);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-lg);
}

.mp-shop__empty-icon,
.mp-downloads__empty-icon {
	color: var(--sage-dark);
}

.mp-shop__empty-text,
.mp-downloads__empty-text {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	color: var(--ink);
}

/* =========================================================================
   8. Pre-footer trust strip
   ========================================================================= */

.mp-shop-trust {
	margin-top: var(--sp-9);
	padding-block: var(--sp-7);
	background: var(--bg-alt);
	border-top: 1px solid var(--taupe-line);
}

.mp-shop-trust__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 620px) {
	.mp-shop-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.mp-shop-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mp-shop-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.mp-shop-trust__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--sage-dark);
	background: var(--sage-tint);
	border-radius: var(--r-full);
}

.mp-shop-trust__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mp-shop-trust__title {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink);
}

.mp-shop-trust__text {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

/* =========================================================================
   9. Single product — layout
   ========================================================================= */

.mp-product {
	padding-block: var(--sp-7) var(--sp-9);
}

.mp-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	margin-top: var(--sp-5);
}

@media (min-width: 900px) {
	.mp-product__layout {
		grid-template-columns: 55fr 45fr;
		gap: var(--sp-8);
		align-items: start;
	}
}

/* --- Gallery: the same matte mount the cards use ------------------------ */

.mp-product__gallery {
	position: relative;
}

@media (min-width: 900px) {
	.mp-product__gallery {
		position: sticky;
		top: var(--sp-6);
	}
}

.mp-product__gallery .woocommerce-product-gallery {
	position: relative;
	padding: var(--sp-4);
	background: var(--bg-alt);
	border: 1px solid var(--taupe);
	border-radius: var(--r-sm);
	/* Woo's product-image.php hard-codes style="opacity:0" and relies on its own
	   JS to fade the gallery in. Beating that inline style is the one place
	   !important is the correct tool — without it a JS hiccup hides the product
	   image entirely. */
	opacity: 1 !important;
}

.mp-product__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-xs);
}

.mp-product__gallery .woocommerce-product-gallery__image {
	margin: 0;
}

.mp-product__gallery .woocommerce-product-gallery__image img,
.mp-product__gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-xs);
}

/* PhotoSwipe zoom trigger — kept working, restyled to the theme. */
.mp-product__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: calc(var(--sp-4) + 10px);
	right: calc(var(--sp-4) + 10px);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-full);
	box-shadow: var(--shadow-sm);
}

/* Woo's own sale flash inside the frame (foundation restyles the chip itself). */
.mp-product__gallery .onsale {
	position: absolute;
	top: calc(var(--sp-4) + 10px);
	left: calc(var(--sp-4) + 10px);
	z-index: 4;
	margin: 0;
}

/* Thumbnails */
.mp-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}

.mp-product__gallery .flex-control-thumbs li {
	width: 72px;
	margin: 0;
	list-style: none;
}

.mp-product__gallery .flex-control-thumbs img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: var(--r-xs);
	opacity: 1;
	transition:
		border-color var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

.mp-product__gallery .flex-control-thumbs img:hover {
	border-color: var(--taupe);
}

.mp-product__gallery .flex-control-thumbs img.flex-active,
.mp-product__gallery .flex-control-thumbs .flex-active img {
	border-color: var(--sage);
}

/* =========================================================================
   10. Single product — summary column
   ========================================================================= */

.mp-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.mp-product__tag {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.mp-product__title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	text-transform: none;
	color: var(--ink);
}

.mp-product__price {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ink);
}

.mp-product__price del {
	margin-right: var(--sp-2);
	font-size: 20px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: line-through;
}

.mp-product__price ins {
	color: var(--clay);
	text-decoration: none;
	background: transparent;
}

.mp-product__price .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
}

.mp-product__excerpt {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

.mp-product__excerpt p:last-child {
	margin-bottom: 0;
}

/* --- Kit contents checklist -------------------------------------------- */

.mp-kit {
	padding-top: var(--sp-2);
}

.mp-kit__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-overline);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink);
}

.mp-kit__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-kit__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink);
}

.mp-kit__check {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--sage-dark);
}

/* --- Digital delivery note --------------------------------------------- */

.mp-delivery {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--sage-tint);
	border: 1px solid var(--sage);
	border-radius: var(--r-sm);
}

.mp-delivery__icon {
	flex: 0 0 auto;
	color: var(--sage-deeper);
}

.mp-delivery__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mp-delivery__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--ink);
}

.mp-delivery__text strong {
	font-weight: 700;
}

.mp-delivery__meta {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

/* --- Buy button + micro-trust ------------------------------------------ */

.mp-product__buy {
	padding-top: var(--sp-1);
}

.mp-atc {
	margin: 0;
}

.mp-atc .quantity {
	display: none;
}

.mp-product__buy .mp-btn--block,
.mp-product__buy .single_add_to_cart_button {
	gap: var(--sp-2);
	width: 100%;
	justify-content: center;
}

.mp-microtrust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin: 0;
	padding: var(--sp-1) 0 0;
	list-style: none;
}

.mp-microtrust__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ink-soft);
}

.mp-microtrust__item .mp-icon {
	flex: 0 0 auto;
	color: var(--sage-dark);
}

/* =========================================================================
   11. Description prose + related
   ========================================================================= */

.mp-product__description {
	max-width: 68ch;
	margin-top: var(--sp-9);
}

.mp-product__description-title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	color: var(--ink);
}

.mp-prose {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

.mp-prose > :first-child {
	margin-top: 0;
}

.mp-prose > :last-child {
	margin-bottom: 0;
}

.mp-prose h2,
.mp-prose h3,
.mp-prose h4 {
	margin: var(--sp-6) 0 var(--sp-2);
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--ink);
}

.mp-prose ul,
.mp-prose ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
}

.mp-prose li {
	margin-bottom: var(--sp-1);
}

.mp-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.mp-prose a {
	color: var(--sage-deeper);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mp-related {
	margin-top: var(--sp-9);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--taupe-line);
}

.mp-related__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-overline);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink);
}

.mp-products-grid--related {
	margin-top: var(--sp-5);
}

/* =========================================================================
   12. My Account — downloads table
   ========================================================================= */

.mp-downloads {
	width: 100%;
	overflow-x: auto;
}

.mp-downloads__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.mp-downloads__th {
	padding: var(--sp-3) var(--sp-3);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-soft);
	background: var(--bg-alt);
	border: 0;
	white-space: nowrap;
}

.mp-downloads__th:first-child {
	border-top-left-radius: var(--r-xs);
	border-bottom-left-radius: var(--r-xs);
}

.mp-downloads__th:last-child {
	border-top-right-radius: var(--r-xs);
	border-bottom-right-radius: var(--r-xs);
}

.mp-downloads__th--action,
.mp-downloads__cell--action {
	text-align: right;
}

.mp-downloads__cell {
	padding: var(--sp-4) var(--sp-3);
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--taupe-line);
	color: var(--ink);
}

.mp-downloads__row:last-child .mp-downloads__cell {
	border-bottom: 0;
}

.mp-downloads__row.is-exhausted .mp-downloads__cell {
	color: var(--ink-soft);
}

.mp-downloads__name {
	display: block;
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--ink);
	text-decoration: none;
}

a.mp-downloads__name:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mp-downloads__file {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ink-soft);
}

.mp-downloads__forever {
	color: var(--ink-soft);
}

/* The remaining count is the point of this page — give it weight. */
.mp-downloads__count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.mp-downloads__count-value {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var(--sage-deeper);
}

.mp-downloads__count.is-spent .mp-downloads__count-value {
	color: var(--clay);
}

.mp-downloads__count-unit {
	font-size: 12px;
	color: var(--ink-soft);
}

.mp-downloads__spent {
	font-size: 12px;
	color: var(--ink-soft);
}

.mp-downloads__btn {
	gap: 6px;
	white-space: nowrap;
}

/* Stack the table into cards on small screens. */
@media (max-width: 700px) {
	.mp-downloads__table,
	.mp-downloads__table tbody,
	.mp-downloads__row,
	.mp-downloads__cell {
		display: block;
		width: 100%;
	}

	.mp-downloads__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.mp-downloads__row {
		margin-bottom: var(--sp-4);
		padding: var(--sp-4);
		background: var(--bg-alt);
		border: 1px solid var(--taupe-line);
		border-radius: var(--r-sm);
	}

	.mp-downloads__cell {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
		padding: var(--sp-2) 0;
		border-bottom: 0;
		text-align: left;
	}

	.mp-downloads__cell--name {
		display: block;
		padding-top: 0;
	}

	.mp-downloads__cell:not(.mp-downloads__cell--name)::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-family: var(--font-sans);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
		color: var(--ink-soft);
	}

	.mp-downloads__cell--action {
		display: block;
		padding-bottom: 0;
	}

	.mp-downloads__cell--action::before {
		display: none;
	}

	.mp-downloads__btn {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================================
   13. Cart
   ========================================================================= */

.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form__contents {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--fs-small);
}

.woocommerce-cart-form table.shop_table th {
	padding: var(--sp-3);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-soft);
	background: var(--bg-alt);
	border: 0;
}

.woocommerce-cart-form table.shop_table td {
	padding: var(--sp-4) var(--sp-3);
	vertical-align: middle;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--taupe-line);
}

.woocommerce-cart-form .product-thumbnail img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--r-xs);
}

.woocommerce-cart-form .product-name a {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-cart-form .product-remove a.remove {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 1;
	color: var(--ink-soft);
	text-decoration: none;
	border-radius: var(--r-full);
	transition:
		color var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}

.woocommerce-cart-form .product-remove a.remove:hover {
	color: var(--clay);
	background: var(--clay-tint);
}

/* Sold individually — the quantity stepper is meaningless for a PDF. */
.woocommerce-cart-form .product-quantity .quantity {
	color: var(--ink-soft);
}

/* Coupon row: inline field + outline button. */
.woocommerce-cart-form .actions {
	padding: var(--sp-5) 0 0;
	border-bottom: 0;
}

.woocommerce-cart-form .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.woocommerce-cart-form .coupon label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.woocommerce-cart-form .coupon .input-text {
	flex: 1 1 180px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-xs);
}

.woocommerce-cart-form .coupon button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--sp-4);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-full);
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.woocommerce-cart-form .coupon button:hover {
	background: var(--sage-tint);
	border-color: var(--sage);
}

.cart_totals {
	padding: var(--sp-5);
	background: var(--bg-alt);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-sm);
}

.cart_totals h2 {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-overline);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink);
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.cart_totals table th,
.cart_totals table td {
	padding: var(--sp-2) 0;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--taupe-line);
}

.cart_totals table td {
	text-align: right;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: 0;
	font-size: var(--fs-body);
	color: var(--ink);
}

.cart_totals .order-total .amount {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
}

.wc-proceed-to-checkout {
	padding-top: var(--sp-4);
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--on-sage);
	background: var(--sage-dark);
	border: 1px solid var(--sage-dark);
	border-radius: var(--r-full);
	transition: background-color var(--dur) var(--ease);
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--sage-deeper);
	border-color: var(--sage-deeper);
}

/* =========================================================================
   14. Checkout
   ========================================================================= */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	color: var(--ink);
}

.checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--sp-4);
	padding: 0;
}

.checkout .form-row label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
}

.checkout .form-row .required {
	color: var(--clay);
	text-decoration: none;
}

.checkout .form-row .input-text,
.checkout .form-row input[type="text"],
.checkout .form-row input[type="email"],
.checkout .form-row input[type="tel"],
.checkout .form-row textarea,
.checkout .form-row select,
.checkout .form-row .select2-container .select2-selection {
	width: 100%;
	min-height: 48px;
	padding: 12px var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-xs);
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

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

.checkout .form-row .input-text:focus,
.checkout .form-row select:focus,
.checkout .form-row textarea:focus {
	border-color: var(--sage);
	outline: none;
	box-shadow: 0 0 0 3px var(--sage-tint);
}

.woocommerce-checkout #order_review {
	padding: var(--sp-5);
	background: var(--bg-alt);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-sm);
}

.woocommerce-checkout #order_review table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: var(--sp-2) 0;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--taupe-line);
}

.woocommerce-checkout #order_review table.shop_table td {
	text-align: right;
}

.woocommerce-checkout .woocommerce-checkout-payment {
	margin-top: var(--sp-4);
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout .wc_payment_methods {
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
}

.woocommerce-checkout .wc_payment_method label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	font-size: var(--fs-body);
	color: var(--ink);
	cursor: pointer;
}

.woocommerce-checkout .payment_box {
	padding: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--ink-soft);
	background: var(--sage-tint);
	border-radius: var(--r-xs);
}

.woocommerce-checkout .payment_box::before {
	display: none;
}

#place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--on-sage);
	background: var(--sage-dark);
	border: 1px solid var(--sage-dark);
	border-radius: var(--r-full);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}

#place_order:hover {
	background: var(--sage-deeper);
	border-color: var(--sage-deeper);
}

/* Checkout coupon toggle. */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
	margin-bottom: var(--sp-4);
}

.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: flex-end;
	padding: var(--sp-4);
	background: var(--bg-alt);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-sm);
}

/* =========================================================================
   15. Woo notices
   ========================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	list-style: none;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
}

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

.woocommerce-message,
.woocommerce-info {
	color: var(--ink);
	background: var(--sage-tint);
	border-color: var(--sage);
}

.woocommerce-error {
	color: var(--ink);
	background: var(--clay-tint);
	border-color: var(--clay);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--sp-4);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-full);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--surface);
	border-color: var(--sage);
}

/* =========================================================================
   16. Thank-you page

   The reassurance line is decorative dressing on top of Woo's own confirmation
   sentence — the real order status is already in the markup above it.
   ========================================================================= */

.woocommerce-order {
	padding-block: var(--sp-7) var(--sp-9);
}

.woocommerce-order .woocommerce-notice--success,
.woocommerce-thankyou-order-received {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-6);
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--ink);
	text-align: center;
	background: var(--sage-tint);
	border: 1px solid var(--sage);
	border-radius: var(--r-lg);
}

.woocommerce-order .woocommerce-notice--success::after,
.woocommerce-thankyou-order-received::after {
	content: "Jūsų PDF failai jau kelyje!";
	display: block;
	margin-top: var(--sp-2);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: 400;
	letter-spacing: var(--ls-wide);
	color: var(--ink-soft);
}

.woocommerce-order .woocommerce-order-overview,
.woocommerce-order ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	list-style: none;
	background: var(--bg-alt);
	border: 1px solid var(--taupe-line);
	border-radius: var(--r-sm);
}

.woocommerce-order ul.order_details li {
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--ink-soft);
	border: 0;
}

.woocommerce-order ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

/* Downloads table on the thank-you page reuses the account styling. */
.woocommerce-order .woocommerce-order-downloads table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.woocommerce-order .woocommerce-order-downloads table.shop_table th {
	padding: var(--sp-3);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-soft);
	background: var(--bg-alt);
	border: 0;
}

.woocommerce-order .woocommerce-order-downloads table.shop_table td {
	padding: var(--sp-4) var(--sp-3);
	border: 0;
	border-bottom: 1px solid var(--taupe-line);
}

/* =========================================================================
   17. Focus visibility — never let a shop control lose its ring
   ========================================================================= */

.mp-filter__pill:focus-visible,
.mp-shop__pagination a:focus-visible,
.mp-shop__sort select:focus-visible,
.mp-downloads__btn:focus-visible,
.mp-downloads__name:focus-visible,
.woocommerce-cart-form .coupon button:focus-visible,
.woocommerce-cart-form .product-remove a.remove:focus-visible,
.wc-proceed-to-checkout .checkout-button:focus-visible,
.mp-product__gallery .woocommerce-product-gallery__trigger:focus-visible,
.mp-product__gallery .flex-control-thumbs img:focus-visible,
#place_order:focus-visible {
	outline: 2px solid var(--sage-dark);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   DIGITAL CONTENT CONSENT (checkout)
   Sits directly above the pay button. Deliberately high-contrast and boxed:
   this is the acknowledgement that removes the 14-day withdrawal right, so
   it must not read as fine print.
   ---------------------------------------------------------------------- */

.mp-digital-consent {
	margin-block: var(--sp-5);
	padding: var(--sp-4);
	background: var(--sage-tint);
	border: 1px solid var(--sage-dark);
	border-radius: var(--r-sm);
}

.mp-digital-consent__label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	cursor: pointer;
	margin: 0;
}

.mp-digital-consent__input {
	inline-size: 22px;
	block-size: 22px;
	margin: 2px 0 0;
	accent-color: var(--sage-dark);
	flex: none;
	cursor: pointer;
}

.mp-digital-consent__input:focus-visible {
	outline: 2px solid var(--sage-deeper);
	outline-offset: 3px;
}

.mp-digital-consent__text {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ink);
}

.mp-digital-consent__text .required {
	color: var(--clay);
	text-decoration: none;
	border: 0;
}

/* Error state — WooCommerce re-renders checkout with the notice on top. */
.woocommerce-error ~ form .mp-digital-consent,
.mp-digital-consent.is-invalid {
	border-color: var(--clay);
	background: var(--clay-tint);
}

/* -------------------------------------------------------------------------
   CONSENT BOX — override inherited checkout label styling
   Checkout labels in this design are uppercase and letterspaced, which is
   wrong for a sentence of legal text, and the grid column was collapsing.
   ---------------------------------------------------------------------- */

.woocommerce form .mp-digital-consent .mp-digital-consent__label,
.mp-digital-consent .mp-digital-consent__label {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	line-height: 1.55;
}

.woocommerce form .mp-digital-consent .mp-digital-consent__text,
.mp-digital-consent .mp-digital-consent__text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	width: auto;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ink);
	white-space: normal;
}

.woocommerce form .mp-digital-consent .mp-digital-consent__input,
.mp-digital-consent .mp-digital-consent__input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	position: static;
	opacity: 1;
	appearance: auto;
	accent-color: var(--sage-dark);
}

/* -------------------------------------------------------------------------
   COOKIE BANNER — wear the brand, not Complianz's default blue
   ---------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	border: 1px solid var(--taupe);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-family: var(--font-sans);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
	font-family: var(--font-serif);
	color: var(--ink);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	color: var(--ink-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Accept and deny get identical weight — the client asked for that
   explicitly, and dark-patterning the reject button is a GDPR risk. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: var(--sage-dark);
	border: 1px solid var(--sage-dark);
	color: var(--on-sage);
	border-radius: var(--r-xs);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
	padding: 12px 18px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: var(--sage-deeper);
	border-color: var(--sage-deeper);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	border-radius: var(--r-xs);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
	padding: 12px 18px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	outline: 2px solid var(--sage-deeper);
	outline-offset: 3px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
.cmplz-manage-consent {
	color: var(--sage-dark);
}

/* Complianz renders its footer links from a saved banner record; until one is
   saved in the plugin UI those anchors are empty and show as stray bullets. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a:empty {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links li:has(a:empty) {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* TCF vendor links are hidden by Complianz's own JS when TCF is inactive,
   leaving their list markers behind. Drop the markers everywhere in the
   banner and hide the TCF rows outright. */
#cmplz-cookiebanner-container .cmplz-cookiebanner ul,
#cmplz-cookiebanner-container .cmplz-cookiebanner ol {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner li::marker {
	content: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner li:has(> a.tcf),
#cmplz-cookiebanner-container .cmplz-cookiebanner li:has(> a[style*="display: none"]) {
	display: none;
}

/* -------------------------------------------------------------------------
   COOKIE BANNER POSITION
   Complianz generates its own positioning stylesheet from a saved banner
   record; that record does not exist here, so the box renders unpositioned
   in the middle of the viewport. Pin it ourselves — bottom-right on desktop,
   full-width sheet on phones.
   ---------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	position: fixed;
	z-index: 99999;
	inset: auto var(--sp-5) var(--sp-5) auto;
	width: min(420px, calc(100vw - 2 * var(--sp-5)));
	max-height: calc(100vh - 2 * var(--sp-5));
	overflow-y: auto;
	padding: var(--sp-5);
	margin: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-size: 1.0625rem;
	text-align: left;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	flex: 1 1 auto;
	min-width: 8rem;
}

@media (max-width: 640px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		inset: auto 0 0 0;
		width: 100%;
		max-width: none;
		border-radius: var(--r-sm) var(--r-sm) 0 0;
	}
}

/* Complianz's generated banner-optin.css pins the banner to top:50% as a
   centred modal and sets its own width. It is generated from a saved banner
   record we cannot write from the CLI, and it loads after the theme, so these
   need !important to win. */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner {
	position: fixed !important;
	top: auto !important;
	left: 50% !important;
	right: auto !important;
	bottom: var(--sp-5) !important;
	transform: translateX(-50%) !important;
	width: min(400px, calc(100vw - 2 * var(--sp-5))) !important;
	max-width: min(400px, calc(100vw - 2 * var(--sp-5))) !important;
	max-height: min(70vh, 520px) !important;
	overflow-y: auto !important;
	margin: 0 !important;
}

@media (max-width: 640px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner,
	.cmplz-cookiebanner {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
	}
}

/* Buttons side by side while there is room. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: var(--sp-2) !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	flex: 1 1 7.5rem !important;
	width: auto !important;
	margin: 0 !important;
}