/* PrintForge x Elementor: maps Elementor containers and widgets built with PrintForge classes onto the design system.
   Every section is an Elementor container, so text, images and buttons stay editable in the Elementor editor. */

/* ------------------------------------------------------------ resets for Elementor widgets inside PrintForge sections */

.elementor .e-con.pf-section {
	padding-block: clamp(64px, 8vw, 120px);
	padding-inline: 0;
}

.elementor .e-con.pf-wrap {
	width: 100%;
	max-width: calc(var(--pf-wrap) + var(--pf-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
}

.pf-section .elementor-widget {
	width: 100%;
	margin: 0;
}

.elementor .pf-section .elementor-heading-title {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--pf-display);
	font-weight: 600;
	letter-spacing: -0.014em;
	word-spacing: 0.06em;
	line-height: 1.02;
	color: inherit;
	text-wrap: balance;
}

.elementor .pf-section h1.elementor-heading-title {
	font-size: clamp(3rem, 1.3rem + 6vw, 6.5rem);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.025em;
}

.elementor .pf-section h2.elementor-heading-title {
	font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.75rem);
}

/* Emphasis is set as a slightly mis-registered impression: cyan and magenta plates
   peek out from under the key plate, the way a press sheet looks when it is a hair off. */
.elementor .pf-section .elementor-heading-title em {
	font-style: italic;
	font-weight: 700;
	text-shadow:
		-0.035em 0.01em 0 rgba(0, 160, 227, 0.85),
		0.03em -0.012em 0 rgba(229, 0, 126, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
	.pf-js .elementor .pf-hero .elementor-heading-title em {
		animation: pf-register 1.1s 0.3s var(--pf-ease) both;
	}
}

@keyframes pf-register {
	from {
		text-shadow:
			-0.12em 0.03em 0 rgba(0, 160, 227, 0.85),
			0.1em -0.04em 0 rgba(229, 0, 126, 0.8);
	}
}

.elementor .pf-section .elementor-widget-text-editor {
	font-family: var(--pf-font);
	color: inherit;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.elementor .pf-section .elementor-widget-text-editor p {
	margin: 0 0 20px;
	max-width: 58ch;
}

.elementor .pf-section .elementor-widget-text-editor .pf-lead {
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
}

.pf-el-eyebrow p.pf-eyebrow {
	margin-bottom: 18px;
}

.pf-eyebrow-light .pf-eyebrow,
.pf-eyebrow-light.pf-eyebrow {
	color: #c9c4ba;
}

.pf-eyebrow-light .pf-eyebrow::before {
	filter: invert(1);
}

.pf-eyebrow-ink .pf-eyebrow {
	color: var(--pf-ink);
}

.elementor .pf-section .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
}

.elementor .pf-rounded-img img {
	border: var(--pf-rule);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Buttons */
.elementor-widget.pf-el-btn {
	width: auto;
	flex: 0 0 auto;
}

.elementor-widget.pf-el-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 26px;
	border: 1.5px solid var(--pf-ink);
	border-radius: 0;
	background: transparent;
	color: var(--pf-ink);
	font-family: var(--pf-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* Every call to action ends in a small arrow set in the mono face */
.elementor-widget.pf-el-btn .elementor-button .elementor-button-text::after {
	content: " \2192";
	font-family: var(--pf-mono);
	font-weight: 400;
}

.elementor-widget.pf-el-btn .elementor-button:focus-visible {
	outline: 3px solid var(--pf-cyan);
	outline-offset: 3px;
}

.elementor-widget.pf-el-btn-lg .elementor-button {
	min-height: 58px;
	padding: 0 32px;
	font-size: 1.0625rem;
}

/* Primary: solid key plate, magenta on hover. (Class names kept so the Elementor data stays untouched.) */
.elementor-widget.pf-el-btn-yellow .elementor-button,
.elementor-widget.pf-el-btn-ink .elementor-button {
	border-color: var(--pf-ink);
	background: var(--pf-ink);
	color: var(--pf-paper);
}

.elementor-widget.pf-el-btn-yellow .elementor-button:hover,
.elementor-widget.pf-el-btn-ink .elementor-button:hover {
	border-color: var(--pf-magenta);
	background: var(--pf-magenta);
	color: #fff;
}

.elementor-widget.pf-el-btn-ghost .elementor-button:hover {
	background: var(--pf-ink);
	color: var(--pf-paper);
}

/* On the black band the primary button flips to paper */
.pf-band-ink .elementor-widget.pf-el-btn-yellow .elementor-button {
	border-color: var(--pf-paper);
	background: var(--pf-paper);
	color: var(--pf-ink);
}

.pf-band-ink .elementor-widget.pf-el-btn-ghost .elementor-button {
	border-color: #fff;
	color: #fff;
}

.elementor .e-con.pf-el-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 0;
}

/* Section header row */
.elementor .e-con.pf-head-row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.elementor .e-con.pf-head-row > .e-con {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.elementor .e-con.pf-head-row .elementor-heading-title {
	margin: 0;
}

/* ------------------------------------------------------------ hero */

.elementor .e-con.pf-hero {
	padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px);
	overflow: hidden;
}

.elementor .e-con.pf-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.pf-hero-title {
	max-width: 11ch;
}

/* Hero is ruled into two columns like a spread, with a hairline down the gutter */
.elementor .e-con.pf-hero {
	border-bottom: var(--pf-rule);
}

.elementor .e-con.pf-hero-copy {
	position: relative;
}

/* Trust points read as proof sign-offs: a ticked box and a mono note */
.pf-hero-trust {
	display: grid;
	gap: 0;
	max-width: 440px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--pf-rule);
	font-family: var(--pf-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pf-hero-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pf-line);
}

.pf-tick {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--pf-ink);
	background: var(--pf-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8006a' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M4.5 12.5l5 5L20 6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.elementor .e-con.pf-hero-media {
	position: relative;
	padding: 28px;
}

.elementor .pf-hero-img img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

.elementor-widget.pf-crop {
	position: relative;
}

.pf-hero-media .elementor-widget-html {
	position: static;
}

/* Hero notes: a stock label and a colour patch, pinned to the sheet like proofs on a board */
.pf-hero-chip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: var(--pf-rule);
	border-radius: 0;
	background: var(--pf-white);
	font-family: var(--pf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: none;
}

.pf-hero-chip-a {
	left: -8px;
	bottom: 13%;
}

.pf-hero-chip-b {
	right: -8px;
	top: 10%;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 16px 12px 16px;
	background: var(--pf-white);
	border-left: 8px solid var(--pf-y);
}

.pf-hero-chip-b strong {
	font-family: var(--pf-display);
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.pf-hero-chip-b span {
	font-size: 0.6875rem;
	color: var(--pf-muted);
}

/* ------------------------------------------------------------ product index (was a marquee) */

.elementor .e-con.pf-ticker {
	padding-block: 0;
	background: var(--pf-paper);
	color: var(--pf-ink);
	border-bottom: var(--pf-rule);
	overflow: hidden;
}

.pf-ticker .e-con.pf-wrap {
	max-width: none;
	padding-inline: 0;
}

.pf-marquee-track {
	align-items: stretch;
	gap: 0;
	font-family: var(--pf-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pf-marquee-track span {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border-right: 1px solid var(--pf-line);
}

.pf-marquee-track i {
	display: none;
}

/* ------------------------------------------------------------ category swatch book */

.pf-cat-bento ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.pf-cat-bento ul.products li:first-child {
	grid-row: span 2;
}

.pf-cat-bento ul.products li:first-child .pf-cat-name {
	font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem);
}

.pf-cat-bento .woocommerce {
	width: 100%;
}

/* ------------------------------------------------------------ how it works */

.pf-band-ink {
	color: #d9d5cc;
}

.elementor .pf-band-ink .elementor-heading-title {
	color: #fff;
}

.elementor .pf-band-ink .elementor-heading-title em {
	text-shadow: none;
	color: var(--pf-y);
}

.elementor .e-con.pf-how-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.elementor .e-con.pf-how-copy {
	position: sticky;
	top: calc(var(--pf-header-h) + 32px);
}

.pf-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/* Four steps, four plates: each step is keyed to one process ink, C then M then Y then K */
.pf-steps li {
	--plate: var(--pf-c);
	--plate-name: "Cyan";
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 22px;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.pf-steps li:nth-child(2) { --plate: var(--pf-m); --plate-name: "Magenta"; }
.pf-steps li:nth-child(3) { --plate: var(--pf-y); --plate-name: "Yellow"; }
.pf-steps li:nth-child(4) { --plate: #f3f1ec; --plate-name: "Key"; }

.pf-steps li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.pf-step-n {
	position: relative;
	display: grid;
	align-content: start;
	gap: 8px;
	font-family: var(--pf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c9c4ba;
}

.pf-step-n::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	background: var(--plate);
}

.pf-step-n::after {
	content: var(--plate-name) " plate";
	color: #8f8a81;
}

.pf-steps h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 1.75rem;
}

.pf-steps p {
	margin: 0;
	max-width: 46ch;
}

/* ------------------------------------------------------------ featured products */

.pf-featured .woocommerce {
	width: 100%;
}

/* ------------------------------------------------------------ pricing */

.elementor .pf-band-yellow .elementor-widget-text-editor p {
	color: var(--pf-ink-2);
}

.elementor .e-con.pf-pricing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

/* Price list set as a printed rate card */
.pf-bars {
	margin: 0;
	padding: clamp(20px, 3vw, 32px);
	border: var(--pf-rule);
	background: var(--pf-white);
	box-shadow: none;
}

.pf-bars figcaption {
	margin: calc(clamp(20px, 3vw, 32px) * -1) calc(clamp(20px, 3vw, 32px) * -1) 22px;
	padding: 12px clamp(20px, 3vw, 32px);
	border-bottom: var(--pf-rule);
	background: var(--pf-ink);
	font-family: var(--pf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pf-paper);
}

.pf-bars ol {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-bars li {
	display: grid;
	grid-template-columns: 58px 1fr auto;
	grid-template-areas: "q track v" "q track s";
	align-items: center;
	column-gap: 14px;
	font-variant-numeric: tabular-nums;
}

.pf-bar-q {
	grid-area: q;
	font-family: var(--pf-mono);
	font-size: 1rem;
	font-weight: 600;
}

/* Bars printed as a halftone tint ramp: denser dots for the pricier small runs */
.pf-bar-track {
	grid-area: track;
	height: 16px;
	border: 1px solid var(--pf-ink);
	background: var(--pf-white);
	overflow: hidden;
}

.pf-bar {
	display: block;
	height: 100%;
	background-color: var(--pf-ink);
	background-image: radial-gradient(var(--pf-white) 28%, transparent 30%);
	background-size: 5px 5px;
}

.pf-bar-v {
	grid-area: v;
	font-family: var(--pf-mono);
	font-weight: 600;
	text-align: right;
}

.pf-bar-s {
	grid-area: s;
	font-family: var(--pf-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: right;
	color: var(--pf-magenta);
}

/* ------------------------------------------------------------ papers and finishes */

.elementor .e-con.pf-papers-grid,
.elementor .e-con.pf-promise-grid,
.elementor .e-con.pf-faq-grid,
.elementor .e-con.pf-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

/* Finishes as a swatch board: cells share their rules like a printed sample sheet */
.pf-finish-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--pf-rule);
	border-left: var(--pf-rule);
}

.pf-finish-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-right: var(--pf-rule);
	border-bottom: var(--pf-rule);
	background: var(--pf-white);
}

.pf-finish-list .pf-sw {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: 1px solid var(--pf-ink);
}

.pf-finish-list strong {
	display: block;
	line-height: 1.2;
}

.pf-finish-list small {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--pf-muted);
}

/* Paper swatches (shared with the configurator) */
.pf-sw-matte { background-color: #efeae0; background-image: radial-gradient(rgba(20,17,15,.08) 1px, transparent 1.2px); background-size: 5px 5px; }
.pf-sw-silk { background-color: #efe8da; background-image: linear-gradient(160deg, #f7f2e8, #e4dccb 60%, #f3ede1); }
.pf-sw-gloss { background-color: #e6ecef; background-image: linear-gradient(135deg, #ffffff 0%, #dbe3e7 42%, #ffffff 55%, #c8d2d8 100%); }
.pf-sw-soft { background-color: #2b2724; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px); }
.pf-sw-uv { background-color: #14110f; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 38%); }
.pf-sw-kraft { background-color: #c9a77c; background-image: repeating-linear-gradient(100deg, rgba(90,60,30,.16) 0 1px, transparent 1px 5px); }
.pf-sw-linen { background-color: #eee7d8; background-image: repeating-linear-gradient(0deg, rgba(20,17,15,.07) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(20,17,15,.07) 0 1px, transparent 1px 4px); }
.pf-sw-foil { background-color: #d9b456; background-image: linear-gradient(135deg, #f4d77a, #b9892c 50%, #f7e29b); }

/* ------------------------------------------------------------ promise */

.elementor .e-con.pf-promise {
	background: var(--pf-paper-2);
	border-top: var(--pf-rule);
	border-bottom: var(--pf-rule);
}

/* Promises listed like the sign-off boxes on a proof approval form */
.pf-promise-list {
	display: grid;
	gap: 0;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: pf-proof;
}

.pf-promise-list li {
	position: relative;
	display: grid;
	gap: 4px;
	padding: 18px 0 18px 48px;
	border-top: var(--pf-rule);
	counter-increment: pf-proof;
}

.pf-promise-list li::before {
	content: counter(pf-proof, upper-alpha);
	position: absolute;
	left: 0;
	top: 18px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: var(--pf-rule);
	background: var(--pf-white);
	font-family: var(--pf-mono);
	font-size: 0.75rem;
	font-weight: 600;
}

.pf-promise-list strong {
	font-size: 1.125rem;
}

.pf-promise-list span {
	color: var(--pf-ink-2);
}

.elementor .e-con.pf-promise-media {
	position: relative;
	padding-bottom: 12%;
}

.elementor .pf-promise-media .elementor-widget:first-child img {
	width: 82%;
	aspect-ratio: 4 / 5;
}

.elementor-widget.pf-promise-small {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
}

.elementor .pf-promise-small img {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--pf-ink);
	outline: 8px solid var(--pf-paper-2);
}

/* ------------------------------------------------------------ FAQ */

.elementor .e-con.pf-faq-grid {
	align-items: start;
}

.pf-faq details {
	border-top: var(--pf-rule);
}

.pf-faq details:last-child {
	border-bottom: var(--pf-rule);
}

.pf-faq summary {
	position: relative;
	padding: 22px 52px 22px 0;
	font-family: var(--pf-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	list-style: none;
	cursor: pointer;
}

.pf-faq summary::-webkit-details-marker {
	display: none;
}

.pf-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border: var(--pf-rule);
	font-family: var(--pf-mono);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-faq details[open] summary::after {
	content: "\2212";
	background: var(--pf-ink);
	color: var(--pf-paper);
}

.pf-faq summary:hover::after {
	background: var(--pf-ink);
	color: var(--pf-paper);
}

.pf-faq summary:focus-visible {
	outline: 3px solid var(--pf-cyan);
	outline-offset: 2px;
}

.pf-faq details p {
	margin: 0 0 22px;
	max-width: 62ch;
	color: var(--pf-ink-2);
}

/* ------------------------------------------------------------ inner pages built in Elementor */

.elementor .e-con.pf-page-intro {
	position: relative;
	padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px);
	background: var(--pf-paper);
	border-bottom: var(--pf-rule);
}

.elementor .e-con.pf-page-intro::after {
	content: "";
	position: absolute;
	right: clamp(16px, 4vw, 56px);
	bottom: 20px;
	width: min(240px, 40vw);
	height: 10px;
	background: var(--pf-colorbar);
}

.elementor .pf-page-intro h1.elementor-heading-title {
	font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5rem);
	max-width: 16ch;
}

/* Info cards share their rules: a ruled table rather than floating boxes */
.pf-cards3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--pf-rule);
	border-left: var(--pf-rule);
}

.pf-cards3 li {
	padding: 28px;
	border-right: var(--pf-rule);
	border-bottom: var(--pf-rule);
	background: var(--pf-white);
}

.pf-cards3 h3 {
	margin: 18px 0 8px;
	font-size: 1.5rem;
}

.pf-cards3 p {
	margin: 0;
	color: var(--pf-ink-2);
}

.pf-cards3 .pf-icon-badge {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: var(--pf-rule);
	background: var(--pf-paper);
	color: var(--pf-ink);
}

.pf-cards3 li:nth-child(4n + 1) .pf-icon-badge { box-shadow: inset 0 -5px 0 var(--pf-c); }
.pf-cards3 li:nth-child(4n + 2) .pf-icon-badge { box-shadow: inset 0 -5px 0 var(--pf-m); }
.pf-cards3 li:nth-child(4n + 3) .pf-icon-badge { box-shadow: inset 0 -5px 0 var(--pf-y); }
.pf-cards3 li:nth-child(4n + 4) .pf-icon-badge { box-shadow: inset 0 -5px 0 var(--pf-k); }

.pf-contact-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--pf-rule);
}

.pf-contact-list li {
	padding: 18px 0;
	border-bottom: var(--pf-rule);
}

.pf-contact-list strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--pf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pf-muted);
}

.pf-contact-list a,
.pf-contact-list span {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pf-ink);
}

.pf-cards3.pf-cards4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pf-cards4 h3 {
	margin-top: 0;
}

.pf-steps-wide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 5vw, 80px);
}

.pf-steps-wide li:nth-last-child(2) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.elementor .e-con.pf-faq-group {
	padding-block: 36px;
	border-top: 3px double var(--pf-ink);
}

.elementor .e-con.pf-faq-group:first-child {
	border-top: 0;
	padding-top: 0;
}

.elementor .pf-faq-group-title .elementor-heading-title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}

.elementor .e-con.pf-contact-grid {
	align-items: start;
}

.elementor .e-con.pf-contact-side {
	display: grid;
	gap: 20px;
}

.elementor .pf-contact-side .pf-rounded-img img {
	aspect-ratio: 16 / 11;
}

.pf-contact-list a:hover {
	color: var(--pf-cyan);
}

.pf-track-section .pf-track {
	max-width: 980px;
	margin-inline: auto;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.pf-cards3.pf-cards4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pf-steps-wide {
		grid-template-columns: 1fr;
	}

	.pf-steps-wide li:nth-last-child(2) {
		border-bottom: 0;
	}

	.elementor .e-con.pf-hero-grid,
	.elementor .e-con.pf-how-grid,
	.elementor .e-con.pf-pricing-grid,
	.elementor .e-con.pf-papers-grid,
	.elementor .e-con.pf-promise-grid,
	.elementor .e-con.pf-faq-grid,
	.elementor .e-con.pf-split {
		grid-template-columns: 1fr;
	}

	.elementor .e-con.pf-how-copy {
		position: static;
	}

	.elementor .e-con.pf-hero-media {
		max-width: 560px;
	}

	.pf-cat-bento ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pf-cat-bento ul.products li:first-child {
		grid-row: auto;
		grid-column: span 2;
	}

	.pf-cat-bento ul.products li:first-child .pf-cat {
		aspect-ratio: 16 / 10;
	}

	.pf-cards3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.elementor .e-con.pf-head-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.pf-hero-chip-a {
		left: 10px;
	}

	.pf-hero-chip-b {
		right: 10px;
	}

	.pf-steps li {
		grid-template-columns: 84px 1fr;
		gap: 14px;
	}

	.pf-step-n::before {
		width: 32px;
		height: 32px;
	}

	.pf-finish-list,
	.pf-cards3.pf-cards4 {
		grid-template-columns: 1fr;
	}

	.elementor .e-con.pf-hero-media {
		padding: 22px;
	}

	.pf-hero-chip-a {
		left: 0;
	}

	.pf-hero-chip-b {
		right: 0;
	}

	.pf-bars li {
		grid-template-columns: 48px 1fr auto;
		column-gap: 10px;
	}

	.pf-cat-bento ul.products {
		gap: 12px;
	}
}

/* ------------------------------------------------------------ atomic (V4) Elementor bridge
   Pages built with Elementor's atomic elements are styled by the ps-* global classes and
   colour/font variables in the Elementor kit. The atomic style engine cannot express
   transitions, text-shadow, pseudo-elements or child selectors, so the few Press Sheet
   effects that need them are added here, keyed to the global class names. */

/* Emphasis in a heading is set upright in the signature orange (Bricolage has no italic) */
.elementor :is(.ps-h1, .ps-h1-page, .ps-h2) em {
	font-style: normal;
	color: var(--pf-magenta);
}

.elementor :is(.ps-h1, .ps-h2, .ps-h3, .ps-cat-name) {
	text-wrap: balance;
}

/* Calls to action end in a mono arrow, as on the rest of the site */
.elementor :is(.ps-btn, .ps-btn-line)::after {
	content: "\2192";
	margin-left: 10px;
	font-family: var(--pf-mono);
	font-weight: 400;
	transition: transform 0.18s ease;
}

.elementor :is(.ps-btn, .ps-btn-line):hover::after {
	transform: translateX(3px);
}

.elementor :is(.ps-btn, .ps-btn-line, .ps-cat) {
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--pf-ease), box-shadow 0.18s ease;
}

.elementor .ps-cat {
	white-space: normal;
}

.elementor .ps-cat:hover {
	box-shadow: 0 3px 0 var(--pf-magenta);
}

.elementor .ps-cat:focus-visible,
.elementor :is(.ps-btn, .ps-btn-line):focus-visible {
	outline: 3px solid var(--pf-cyan);
	outline-offset: 3px;
}

/* Accordion: a square ink-ruled key that reads + when closed and a minus when open */
/* Elementor's container ::before rules stretch the glyph across the box; size it to its text */
.elementor .e-accordion-item-icon-base:not(:has(svg))::before {
	content: "+";
	position: static;
	display: block;
	width: auto;
	height: auto;
	text-align: center;
	font-family: var(--pf-mono);
	font-size: 18px;
	line-height: 1;
	color: var(--pf-ink);
}

.elementor details[open] > summary .e-accordion-item-icon-base:not(:has(svg)) {
	background: var(--pf-ink);
}

.elementor details[open] > summary .e-accordion-item-icon-base:not(:has(svg))::before {
	content: "\2013";
	color: var(--pf-paper);
}

.elementor .e-accordion-item-header-base {
	list-style: none;
}

.elementor .e-accordion-item-header-base::-webkit-details-marker {
	display: none;
}

.elementor .e-accordion-item-header-base:focus-visible {
	outline: 3px solid var(--pf-cyan);
	outline-offset: 2px;
}

/* Links inside job-sheet values and ruled lists: underlined like the body copy, and long
   addresses may break so they never push past a phone screen */
.elementor :is(.ps-fact-value, .ps-body) a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.elementor :is(.ps-fact-value, .ps-body) a:hover {
	color: var(--pf-magenta);
}

.elementor .ps-fact-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Rate card numbers line up in columns */
.elementor :is(.ps-mono-strong, .ps-code) {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.elementor :is(.ps-btn, .ps-btn-line, .ps-cat),
	.elementor :is(.ps-btn, .ps-btn-line)::after {
		transition: none;
		transform: none;
	}
}

/* ============================================================ Bright Studio layer
   October 2026 restyle. The rules above stay as the structural base; this layer restates
   shape, emphasis and the few colours that tokens alone cannot change. elementor.css is the
   theme's last stylesheet, so these win without !important. */

/* Emphasis anywhere in a heading: upright orange instead of a mis-registered italic */
h1 em,
h2 em,
h3 em,
.elementor .elementor-heading-title em,
.pf-js .elementor .pf-hero .elementor-heading-title em {
	font-style: normal;
	font-weight: inherit;
	color: var(--pf-magenta);
	text-shadow: none;
	animation: none;
}

/* Slug lines: bold orange label led by a dot instead of a registration target */
.pf-eyebrow {
	font-family: var(--pf-font);
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--pf-magenta);
}

.pf-eyebrow::before,
.pf-footer-cta .pf-eyebrow::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pf-yellow);
}

.pf-footer-cta .pf-eyebrow::before {
	background: var(--pf-ink);
}

/* Buttons: rounded; "yellow" is the orange primary with ink text, "ink" stays black */
.pf-btn,
.pf-btn-yellow,
.pf-btn-ink,
.pf-btn-ghost,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.elementor-widget.pf-el-btn .elementor-button {
	border-radius: 10px;
}

.pf-btn-yellow,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: var(--pf-yellow);
	background: var(--pf-yellow);
	color: var(--pf-ink);
}

.pf-btn-yellow:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	border-color: var(--pf-ink);
	background: var(--pf-ink);
	color: #fff;
}

.pf-btn-ink {
	background: var(--pf-ink);
	color: #fff;
}

.pf-btn-ink:hover {
	border-color: var(--pf-magenta);
	background: var(--pf-magenta);
	color: #fff;
}

/* Fields: rounded, warm grey border with 3:1 contrast */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.pf-search-form input[type="search"],
.pf-quote :is(input, select, textarea),
.pf-track :is(input, select, textarea) {
	border-color: #958b7c;
	border-radius: 10px;
}

.woocommerce form .form-row label {
	font-family: var(--pf-font);
	font-weight: 600;
}

/* Filter chips become pills */
.pf-chip {
	border-radius: 999px;
}

/* Product cards: rounded white sheet, inset rounded photo, soft lift on hover */
.pf-pcard {
	border-color: var(--pf-line);
	border-radius: var(--pf-radius-lg);
	box-shadow: 0 1px 0 rgba(22, 22, 26, 0.04);
}

.pf-pcard:hover {
	border-color: var(--pf-yellow);
	box-shadow: 0 16px 32px -14px rgba(22, 22, 26, 0.28);
}

.pf-pcard-media {
	border-radius: 12px;
}

.pf-pcard-cat {
	font-family: var(--pf-font);
	font-weight: 700;
	color: var(--pf-magenta);
}

.pf-pcard-title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pf-pcard-ticket {
	font-family: var(--pf-font);
}

.pf-pcard-price strong {
	font-weight: 700;
	font-size: 1.0625rem;
}

.pf-pcard:hover .pf-pcard-go {
	color: var(--pf-yellow-press);
}

/* Category tiles on the shop */
.pf-cat {
	border-color: var(--pf-line);
	border-radius: var(--pf-radius-lg);
}

.pf-cat-media {
	border-radius: 12px 12px 0 0;
}

/* Page and shop title bands: a rounded cream panel; the registration target is retired */
.pf-page-hero::after,
.pf-shop-hero::after {
	display: none;
}

.pf-page-hero::before,
.pf-shop-hero::before {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
}

.pf-shop-hero {
	padding-inline: clamp(20px, 4vw, 48px);
	border-bottom: 0;
	border-radius: 24px;
	background: var(--pf-paper-2);
}

.pf-page-hero {
	background: var(--pf-paper-2);
	border-bottom: 0;
}

/* Product page gallery */
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .flex-control-thumbs img {
	border-radius: 14px;
}

/* Configurator (plugin markup, restyled from the theme so the plugin stays untouched).
   Each rule is one class more specific than the plugin's own. */
.pf-config .pf-step {
	border-top-color: var(--pf-line);
}

.pf-config .pf-num {
	border: 0;
	border-radius: 50%;
	background: var(--pf-yellow);
	color: var(--pf-ink);
	font-family: var(--pf-font);
	font-weight: 700;
}

.pf-config .pf-card {
	border-color: #d6cab8;
	border-radius: 12px;
}

.pf-config .pf-opt:hover .pf-card {
	border-color: var(--pf-ink-2);
}

.pf-config .pf-input:checked + .pf-card {
	border-color: var(--pf-yellow);
	box-shadow: inset 0 0 0 1px var(--pf-yellow);
	background: #fff5ee;
}

.pf-config .pf-input:checked + .pf-card::after {
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316161a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
		var(--pf-yellow);
}

.pf-config .pf-sw {
	border-color: rgba(22, 22, 26, 0.22);
	border-radius: 8px;
}

.pf-config .pf-drop,
.pf-config .pf-notes {
	border-color: #958b7c;
	border-radius: 12px;
}

.pf-config .pf-review {
	border-color: var(--pf-line);
	border-radius: 16px;
	overflow: hidden;
}

.pf-config .pf-review::before {
	display: none;
}

.pf-config .pf-review-title {
	font-family: var(--pf-font);
	font-weight: 700;
}

.pf-config .pf-summary {
	border-radius: 16px;
	box-shadow: 0 18px 36px -18px rgba(22, 22, 26, 0.5);
}

.pf-config .pf-summary::before {
	display: none;
}

.pf-config .pf-btn {
	border-radius: 10px;
}

/* Tracking, quote form and thank-you box (plugin markup) */
:is(.pf-track, .pf-quote, .pf-thanks) :is(.pf-track-btn, input, select, textarea, button) {
	border-radius: 10px;
}

:is(.pf-track, .pf-quote, .pf-thanks) :is(.pf-track-form, .pf-track-card) {
	border-color: var(--pf-line);
	border-radius: 16px;
	overflow: hidden;
}

:is(.pf-track, .pf-quote, .pf-thanks) label {
	font-family: var(--pf-font);
	font-weight: 600;
}

.pf-config .pf-tier-save {
	border-radius: 6px;
}

/* On phones the title band's stripe would sit on the description: drop it */
@media (max-width: 700px) {
	.pf-page-hero::before,
	.pf-shop-hero::before {
		display: none;
	}
}

/* WooCommerce product grid blocks (empty cart "New in store") */
.wc-block-grid__product-image img {
	border-radius: 14px;
}

.wc-block-grid__product-link,
.wc-block-grid__product-title {
	color: var(--pf-ink);
	text-decoration: none;
}

.wc-block-grid__product-title {
	font-family: var(--pf-display);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
	border-radius: 10px;
	background: var(--pf-yellow);
	color: var(--pf-ink);
	font-weight: 700;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--pf-ink);
	color: #fff;
}

/* Touch targets: small text links get a 44px-tall hit area without moving the layout */
.pf-breadcrumb a,
.pf-footer-col a,
.elementor :is(.ps-fact-value, .ps-body) a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
}

/* On phones the filter chips scroll sideways: fade the right edge so the row reads as scrollable */
@media (max-width: 700px) {
	.pf-chips {
		-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
		mask-image: linear-gradient(90deg, #000 82%, transparent);
		padding-right: 32px;
	}
}

/* Checkout and cart blocks: rounded fields, soft panels, orange place-order button */
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: #958b7c;
	border-radius: 10px;
}

.wc-block-components-radio-control--highlight-checked,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 12px;
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--pf-yellow);
	box-shadow: inset 0 0 0 1px var(--pf-yellow);
}

.wc-block-components-checkout-place-order-button {
	border-radius: 12px;
	background: var(--pf-yellow);
	color: var(--pf-ink);
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--pf-ink);
	color: #fff;
}

.wc-block-checkout__sidebar {
	border-color: var(--pf-line);
	border-radius: var(--pf-radius-lg);
	overflow: hidden;
}

.wc-block-checkout__sidebar::before {
	display: none;
}

.wc-block-components-order-summary-item__image img {
	border-color: var(--pf-line);
	border-radius: 8px;
}

/* Order received page */
.woocommerce-thankyou-order-received {
	border: 0;
	border-radius: 16px;
	background: var(--pf-paper-2);
}

ul.woocommerce-order-overview {
	border: 1px solid var(--pf-line);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

ul.woocommerce-order-overview li {
	border-color: var(--pf-line);
}

.woocommerce-customer-details address {
	border-color: var(--pf-line);
	border-radius: 14px;
}

.woocommerce-customer-details .woocommerce-column,
.woocommerce .woocommerce-customer-details .col2-set > div {
	border-radius: 18px;
}

/* Order tracking items and the header cart badge */
.pf-track-items li {
	border-color: var(--pf-line);
	border-radius: 14px;
	background: #fff;
}

/* WooCommerce's block stylesheet loads after the theme with equally or more specific selectors,
   so the checkout overrides above need one more level of specificity to apply. */
body .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .wc-block-components-form .wc-block-components-text-input input[type="number"],
body .wc-block-components-text-input input,
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid #958b7c;
	border-radius: 10px;
}

body .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
	border-radius: 12px;
	background: var(--pf-yellow);
	color: var(--pf-ink);
}

body .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover {
	background: var(--pf-ink);
	color: #fff;
}

body .wc-block-components-radio-control--highlight-checked::after {
	border-color: var(--pf-line);
	border-radius: 12px;
}

body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
body .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: 12px;
	box-shadow: inset 0 0 0 2px var(--pf-yellow);
}

/* ---- Page polish: the Elementor V3 title band (Track order) matches the cream bands, account boxes are rounded cards */
.elementor .e-con.pf-page-intro {
	background-color: var(--pf-paper-2);
	border-bottom: 0;
}

.elementor .e-con.pf-page-intro::after {
	height: 8px;
	border-radius: 999px;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	border-color: var(--pf-line);
	border-radius: 20px;
	box-shadow: 0 1px 0 rgba(22, 22, 26, 0.04);
}

/* ============================================================ Motion and glass layer
   Framer-style movement: blocks fade up out of a soft blur as they scroll in, headings set word by word,
   pages cross-fade. The glass header stays in view the whole way down. Frosted glass on the
   header, menus, drawer and the cards that sit over photos or colour. All movement respects reduced motion. */

:root {
	--pf-spring: cubic-bezier(0.16, 1, 0.3, 1);
	--pf-glass: rgba(255, 255, 255, 0.6);
	--pf-glass-edge: rgba(255, 255, 255, 0.72);
	--pf-glass-blur: blur(18px) saturate(180%);
}

/* ---- Glass: header bar. Its backdrop-filter makes the bar the mega menu's containing block, so the menu hangs from the bar. */
.pf-header-in {
	background: var(--pf-glass);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	backdrop-filter: var(--pf-glass-blur);
	border-color: var(--pf-glass-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(22, 22, 26, 0.06), 0 10px 30px -20px rgba(22, 22, 26, 0.35);
}

.pf-header.is-stuck .pf-header-in {
	background: rgba(255, 255, 255, 0.55);
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(22, 22, 26, 0.07), 0 18px 40px -20px rgba(22, 22, 26, 0.4);
}

.pf-mega {
	top: 100%;
	padding-top: 10px;
}

.pf-mega-in {
	width: 100%;
	max-width: none;
	background: var(--pf-white);
}

.pf-search > .pf-wrap {
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	backdrop-filter: var(--pf-glass-blur);
	border-color: var(--pf-glass-edge);
}

/* ---- Glass: mobile drawer over a softened page */
.pf-drawer-panel {
	background: rgba(255, 252, 247, 0.82);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-right: 1px solid var(--pf-glass-edge);
}

.pf-drawer-scrim {
	background: rgba(22, 22, 26, 0.3);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ---- Colour fields behind the glass: soft orange, sun and blue light in the title bands and the home hero */
.elementor section.ps-hero-page,
.elementor .e-con.pf-page-intro,
.pf-page-hero,
.pf-shop-hero {
	background-image:
		radial-gradient(38% 60% at 86% 18%, rgba(255, 106, 43, 0.26), transparent 70%),
		radial-gradient(34% 55% at 66% 92%, rgba(255, 201, 60, 0.32), transparent 70%),
		radial-gradient(28% 48% at 98% 86%, rgba(31, 79, 224, 0.12), transparent 70%);
	background-size: 140% 140%;
	background-position: 0% 0%;
}

.elementor > section.ps-section:first-child {
	background-image:
		radial-gradient(30% 50% at 62% 30%, rgba(255, 201, 60, 0.28), transparent 70%),
		radial-gradient(34% 55% at 96% 82%, rgba(255, 106, 43, 0.22), transparent 70%),
		radial-gradient(26% 40% at 70% 96%, rgba(31, 79, 224, 0.1), transparent 70%);
	background-size: 140% 140%;
	background-position: 0% 0%;
}

/* ---- Glass cards: the job sheet on page heroes, the stock tag on the home photo, the configurator total bar */
.elementor section.ps-hero-page .ps-facts {
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	backdrop-filter: var(--pf-glass-blur);
	border-color: var(--pf-glass-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 48px -28px rgba(22, 22, 26, 0.35);
}

.elementor section.ps-hero-page .ps-fact-row {
	background: transparent;
	border-color: rgba(22, 22, 26, 0.08);
}

.elementor > section.ps-section:first-child img ~ .e-con {
	background: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	backdrop-filter: var(--pf-glass-blur);
	border: 1px solid var(--pf-glass-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 20px 40px -24px rgba(22, 22, 26, 0.45);
}

body .pf-config .pf-summary {
	background: rgba(22, 22, 26, 0.82);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Glass chip on product photos */
.pf-pcard-media::after {
	content: "Customise \2192";
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 8px 14px;
	border: 1px solid var(--pf-glass-edge);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: var(--pf-glass-blur);
	backdrop-filter: var(--pf-glass-blur);
	color: var(--pf-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.45s var(--pf-spring);
	pointer-events: none;
}

.pf-pcard:hover .pf-pcard-media::after,
.pf-pcard:focus-visible .pf-pcard-media::after {
	opacity: 1;
	transform: none;
}

/* ---- Pointer light on cards */
.pf-pcard,
.pf-cat,
.elementor .ps-cat,
.elementor .ps-plate {
	position: relative;
}

.pf-pcard::after,
.pf-cat::after,
.elementor .ps-cat::after,
.elementor .ps-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 106, 43, 0.13), transparent 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.pf-pcard:hover::after,
.pf-cat:hover::after,
.elementor .ps-cat:hover::after,
.elementor .ps-plate:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	/* Blocks wait hidden until the motion script picks them up. If it never runs, the failsafe shows them after 3s.
	   Keep this list in step with REVEAL and HEADINGS in theme.js. */
	html.pf-js :is(.ps-eyebrow, .ps-lead, .ps-body, .ps-btn, .ps-btn-line, .ps-cat, .ps-plate, .ps-spec, .ps-rate-row, .ps-swatch, .ps-facts, .e-accordion-item-base, .elementor img, ul.products > li, .pf-cat, .pf-page-lead, .pf-shop-desc, .pf-footer-cta, .pf-footer-grid > *, .pf-config .pf-step):not(.pf-revealed):not([data-reveal]),
	html.pf-js :is(h1.ps-h1, h1.ps-h1-page, .pf-page-hero h1, .pf-page-intro h1, .pf-shop-title, h2.ps-h2, .pf-footer-cta h2):not(.pf-split) {
		opacity: 0;
		animation: pf-failsafe 0.01s 3s forwards;
	}

	html.pf-js [data-reveal] {
		opacity: 0;
		transform: translateY(28px) scale(0.985);
		filter: blur(8px);
		animation: none;
		transition:
			opacity 0.9s var(--pf-spring) var(--pf-d, 0ms),
			transform 1.1s var(--pf-spring) var(--pf-d, 0ms),
			filter 0.9s var(--pf-spring) var(--pf-d, 0ms);
	}

	html.pf-js img[data-reveal] {
		transform: scale(1.04);
	}

	html.pf-js [data-reveal].is-in {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* Word-by-word headings */
	.pf-split .pf-w {
		display: inline-block;
		opacity: 0;
		transform: translateY(0.45em);
		filter: blur(10px);
	}

	.pf-split.is-in .pf-w {
		animation: pf-word 1s var(--pf-spring) both;
		animation-delay: calc(var(--i) * 55ms + 60ms);
	}

	/* Rate card bars draw out once their row is in */
	.elementor .ps-rate-fill {
		transform-origin: left center;
		transition: transform 1.3s var(--pf-spring) calc(var(--pf-d, 0ms) + 250ms);
	}

	html.pf-js .ps-rate-row:not(.is-in):not(.pf-revealed) .ps-rate-fill {
		transform: scaleX(0);
	}

	/* The four ink dots pop in one after another */
	.elementor .ps-ink-chip {
		animation: pf-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.elementor .ps-ink-chip:nth-child(2) { animation-delay: 0.08s; }
	.elementor .ps-ink-chip:nth-child(3) { animation-delay: 0.16s; }
	.elementor .ps-ink-chip:nth-child(4) { animation-delay: 0.24s; }

	/* Colour fields drift slowly */
	.elementor section.ps-hero-page,
	.elementor .e-con.pf-page-intro,
	.pf-page-hero,
	.pf-shop-hero,
	.elementor > section.ps-section:first-child {
		animation: pf-drift 18s ease-in-out infinite alternate;
	}

	/* Hover and press */
	.elementor .ps-cat:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 40px -22px rgba(22, 22, 26, 0.4);
	}

	.elementor .ps-plate {
		transition: transform 0.45s var(--pf-spring), box-shadow 0.45s var(--pf-spring);
	}

	.elementor .ps-plate:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 40px -22px rgba(22, 22, 26, 0.35);
	}

	.pf-pcard {
		transition: transform 0.45s var(--pf-spring), box-shadow 0.45s var(--pf-spring), border-color 0.2s ease;
	}

	.pf-pcard:hover {
		transform: translateY(-5px);
	}

	.pf-pcard-media img,
	.pf-cat-media img {
		transition: transform 0.9s var(--pf-spring);
	}

	.pf-pcard:hover .pf-pcard-media img,
	.pf-cat:hover .pf-cat-media img {
		transform: scale(1.05);
	}

	:is(.pf-btn, .elementor .ps-btn, .elementor .ps-btn-line) .pf-icon,
	.pf-mega-all .pf-icon {
		transition: transform 0.35s var(--pf-spring);
	}

	:is(.pf-btn, .pf-mega-all):hover .pf-icon {
		transform: translateX(4px);
	}

	:is(.pf-btn, .elementor .ps-btn, .elementor .ps-btn-line, .pf-iconbtn, .pf-mega-all):active {
		transform: scale(0.97);
	}

	/* Pages cross-fade. The header gets no view-transition-name: that would make it a backdrop root and kill its glass. */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: pf-vt-out 0.2s ease both;
	}

	::view-transition-new(root) {
		animation: pf-vt-in 0.45s var(--pf-spring) both;
	}
}

@keyframes pf-failsafe {
	to {
		opacity: 1;
	}
}

@keyframes pf-word {
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes pf-pop {
	from {
		opacity: 0;
		transform: scale(0);
	}
}

@keyframes pf-drift {
	to {
		background-position: 100% 60%;
	}
}

@keyframes pf-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes pf-vt-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}