/**
 * Print Product Configurator - front-end styles.
 *
 * COLOUR POLICY: this stylesheet declares no fixed colours. Every colour is a
 * custom property, and assets/js/theme.js fills those properties in from the
 * colours the active theme is actually painting - the real background behind
 * the widget, the inherited text colour, and the theme's own button or link
 * colour for the accent. Dark themes, tinted sections and page builders all
 * work without configuration.
 *
 * The values below are only the pre-JavaScript fallback. They are deliberately
 * conservative so the widget is readable for the split second before
 * theme.js runs, and on the rare page where detection is blocked.
 *
 * To brand it manually, set --pcfg-accent (and optionally --pcfg-accent-ink,
 * --pcfg-paper, --pcfg-ink) on .pcfg-wrap. The Settings screen does exactly
 * that, and marks which properties are locked via data-pcfg-colors so that
 * detection leaves them alone.
 */

.pcfg-wrap {
	/* Fallbacks. theme.js replaces all of these with resolved theme colours. */
	--pcfg-ink: currentColor;
	--pcfg-paper: Canvas;
	--pcfg-surface: Canvas;
	--pcfg-accent: currentColor;
	--pcfg-accent-ink: Canvas;
	--pcfg-accent-hover: currentColor;

	--pcfg-line: color-mix(in srgb, currentColor 22%, transparent);
	--pcfg-line-soft: color-mix(in srgb, currentColor 12%, transparent);
	--pcfg-muted: color-mix(in srgb, currentColor 62%, transparent);
	--pcfg-soft: color-mix(in srgb, currentColor 6%, transparent);
	--pcfg-softer: color-mix(in srgb, currentColor 3%, transparent);
	--pcfg-danger: currentColor;
	--pcfg-radius: 4px;

	box-sizing: border-box;
	color: inherit;
	font: inherit;
	line-height: 1.5;
	max-width: 1180px;
	margin: 0 auto;

	/* Responsiveness is driven by how much room the configurator itself has,
	   not by the size of the window. A theme may drop it into a narrow sidebar,
	   a half-width column or a full-bleed section, and all three need the same
	   treatment a phone gets. Viewport media queries cannot see any of that.
	   A @media fallback for older browsers follows at the end of this file. */
	container-type: inline-size;
	container-name: pcfg;

	/* Long option labels, price summaries and pasted URLs must never be able to
	   push the page sideways on a narrow screen. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.pcfg-wrap *,
.pcfg-wrap *::before,
.pcfg-wrap *::after {
	box-sizing: inherit;
}

/* Defensive resets: themes routinely set global rules for img, table and
   button that would otherwise distort the widget. */
.pcfg-wrap img {
	max-width: 100%;
	height: auto;
}

.pcfg-wrap table {
	max-width: 100%;
}

/* Older browsers without color-mix() still get usable, theme-neutral tints. */
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.pcfg-wrap {
		--pcfg-line: rgba(128, 128, 128, 0.4);
		--pcfg-line-soft: rgba(128, 128, 128, 0.22);
		--pcfg-muted: inherit;
		--pcfg-soft: rgba(128, 128, 128, 0.08);
		--pcfg-softer: rgba(128, 128, 128, 0.04);
	}
}

/* Colour transitions on the containers that change most, so a theme's dark
   mode toggle re-themes the widget smoothly rather than snapping. */
.pcfg-wrap.pcfg-themed .pcfg-cell,
.pcfg-wrap.pcfg-themed .pcfg-btnopt,
.pcfg-wrap.pcfg-themed .pcfg-select,
.pcfg-wrap.pcfg-themed .pcfg-bar {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.pcfg-wrap * {
		transition: none !important;
	}
}

/* ---------- Layout ---------- */

.pcfg-layout {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

@container pcfg (max-width: 900px) {
	.pcfg-layout {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/* Unwrap the sidebar so its two halves can be ordered independently.
	   Stacked in source order the visitor had to scroll past four collapsed
	   panels before reaching a single price. Gallery, then the configurator,
	   then the reference panels. */
	.pcfg-aside {
		display: contents;
	}

	.pcfg-gallery {
		order: 1;
	}

	.pcfg-main {
		order: 2;
	}

	.pcfg-accordions {
		order: 3;
		margin-top: 0;
	}
}

.pcfg-title {
	margin: 0 0 12px;
	color: inherit;
}

.pcfg-intro p {
	margin: 0 0 12px;
}

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

.pcfg-gallery__main {
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	overflow: hidden;
	background: var(--pcfg-softer);
}

.pcfg-gallery__main img {
	display: block;
	width: 100%;
	height: auto;
}

.pcfg-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.pcfg-gallery__thumb {
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	border-radius: var(--pcfg-radius);
	line-height: 0;
}

.pcfg-gallery__thumb.is-active {
	border-color: var(--pcfg-accent);
}

.pcfg-gallery__thumb img {
	width: 84px;
	height: auto;
	display: block;
}

/* ---------- Accordions ---------- */

.pcfg-accordions {
	margin-top: 18px;
	border-top: 1px solid var(--pcfg-line);
}

.pcfg-acc {
	border-bottom: 1px solid var(--pcfg-line);
}

.pcfg-acc > summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 30px 14px 12px;
	font-weight: 600;
	position: relative;
	user-select: none;
}

.pcfg-acc > summary::-webkit-details-marker {
	display: none;
}

.pcfg-acc > summary::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.15s ease;
}

.pcfg-acc[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.pcfg-acc--highlight > summary {
	background: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
	border-radius: var(--pcfg-radius);
}

.pcfg-acc__body {
	padding: 4px 12px 16px;
	font-size: 0.94em;
}

.pcfg-acc__body p {
	margin: 0 0 10px;
}

.pcfg-acc__label {
	font-weight: 700;
	margin: 6px 0;
}

.pcfg-acc__note {
	font-style: italic;
	color: var(--pcfg-muted);
	font-size: 0.9em;
}

.pcfg-sheets {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.pcfg-sheets li {
	margin: 0 0 6px;
}

.pcfg-sheets a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pcfg-sheets__icon {
	width: 12px;
	height: 15px;
	background: currentColor;
	border-radius: 1px;
	flex: 0 0 auto;
	clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%);
}

/* ---------- Fields ---------- */

.pcfg-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
	margin: 20px 0 26px;
}

@container pcfg (max-width: 640px) {
	.pcfg-fields {
		grid-template-columns: 1fr;
	}
}

.pcfg-field[hidden] {
	display: none;
}

.pcfg-label {
	display: block;
	font-weight: 700;
	font-size: 0.92em;
	margin-bottom: 6px;
}

.pcfg-select,
.pcfg-readout,
.pcfg-custom-qty,
.pcfg-dim,
.pcfg-dims__unit {
	width: 100%;
	/* Form controls carry an intrinsic minimum width from their `size`
	   attribute and, for a select, from its longest option. Inside a flex or
	   grid track that floor wins over `width: 100%` and pushes the layout
	   sideways on a narrow screen. Releasing it is what lets them actually
	   shrink. */
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-paper);
	color: inherit;
	font: inherit;
}

.pcfg-readout {
	display: flex;
	align-items: center;
	background: var(--pcfg-soft);
	color: var(--pcfg-muted);
}

/* ---------- Weight readouts ---------- */

/* The two weights belong together. As two loose cells in the parent grid they
   drifted apart the moment an odd number of attribute fields was visible above
   them, so one ended a row and the other started the next. This keeps them on
   their own full-width row, one per column. */
.pcfg-field--weights {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 22px;
	align-items: center;
}

.pcfg-weight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.pcfg-weight .pcfg-label {
	margin: 0;
	min-width: 0;
}

/* These only ever show a short number, so they do not need the full 42px
   input height or the full column width the editable fields use. */
.pcfg-weight .pcfg-readout {
	flex: 0 0 auto;
	width: auto;
	min-width: 86px;
	height: 30px;
	padding: 0 10px;
	justify-content: flex-end;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

@container pcfg (max-width: 430px) {
	.pcfg-field--weights {
		grid-template-columns: 1fr;
	}
}

.pcfg-dims {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* The two number inputs share whatever is left after the × and the unit
   select, and are allowed to shrink all the way down. */
.pcfg-dims .pcfg-dim {
	flex: 1 1 0;
	min-width: 0;
}

.pcfg-dims__x {
	flex: 0 0 auto;
	color: var(--pcfg-muted);
}

.pcfg-dims__unit {
	width: auto;
	min-width: 72px;
	padding: 0 6px;
}

.pcfg-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
	font-size: 0.7em;
	font-weight: 700;
	cursor: help;
	position: relative;
	vertical-align: middle;
	margin-left: 4px;
}

.pcfg-help:hover::after,
.pcfg-help:focus::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 240px;
	background: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: var(--pcfg-radius);
	z-index: 20;
	text-align: left;
}

/* Button-style attribute (Printed Sides, Format, Shape) */

.pcfg-btngroup {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pcfg-btnopt {
	position: relative;
	/* Centre the label explicitly. `font: inherit` does not reset padding,
	   text-align or line-height, so a theme's own button rules were leaking in
	   and pushing the text off-centre. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 120px;
	min-height: 42px;
	/* Symmetric padding: the right side reserves room for the tick on every
	   option, selected or not, so choosing one never shifts its label. */
	padding: 7px 26px;
	margin: 0;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-paper);
	color: inherit;
	font: inherit;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.pcfg-btnopt:hover:not(:disabled) {
	border-color: var(--pcfg-accent);
}

.pcfg-btnopt.is-active {
	background: var(--pcfg-accent);
	border-color: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
}

/* Absolutely positioned so it sits outside the text flow. As part of the
   label it widened the content and knocked the wording sideways. */
.pcfg-btnopt.is-active::after {
	content: "✓";
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
	font-size: 0.85em;
	line-height: 1;
	pointer-events: none;
}

.pcfg-btnopt:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Price grid ---------- */

.pcfg-grid-wrap {
	position: relative;
}

.pcfg-grid-scroll {
	/* Never taller than most of the viewport: a fixed 430px box swallowed the
	   whole screen on a phone and left nothing to orient against. */
	max-height: min(430px, 70vh);
	overflow: auto;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	-webkit-overflow-scrolling: touch;
	/* Stop a sideways swipe on the grid from triggering the browser's
	   back-navigation gesture or scrolling the page behind it. */
	overscroll-behavior-x: contain;
}

.pcfg-grid {
	width: 100%;
	/* Separate, not collapse: collapsed borders are not painted on sticky
	   cells, so the frozen quantity column lost its edges the moment the grid
	   was scrolled sideways. Each cell carries only a bottom and a left border,
	   so nothing doubles up. */
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.92em;
	background: var(--pcfg-paper);
}

.pcfg-grid thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--pcfg-paper);
	padding: 12px 10px;
	text-align: center;
	font-weight: 700;
	border-bottom: 1px solid var(--pcfg-line);
	border-left: 1px solid var(--pcfg-line-soft);
	vertical-align: top;
}

/* The corner cell is frozen on both axes, so it has to sit above the row
   headers and the column headers alike. */
.pcfg-grid thead th:first-child {
	left: 0;
	z-index: 4;
	border-left: 0;
	text-align: right;
	vertical-align: bottom;
}

.pcfg-grid thead th.is-unavailable {
	opacity: 0.5;
}

.pcfg-grid__tname {
	display: block;
}

.pcfg-grid__express {
	display: block;
	line-height: 1;
	margin: 2px 0;
}

.pcfg-grid__due {
	display: block;
	font-weight: 400;
	font-size: 0.82em;
	color: var(--pcfg-muted);
	margin-top: 4px;
}

/* Freeze the quantity column. With four or five turnarounds the grid has to
   scroll sideways on a phone, and without this the visitor loses track of
   which quantity row the price they are looking at belongs to. */
.pcfg-grid tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--pcfg-surface);
	font-weight: 600;
	text-align: center;
	padding: 6px 10px;
	border-bottom: 1px solid var(--pcfg-line-soft);
	width: 130px;
}

/* A hairline that reads as an edge once the columns slide underneath it. */
.pcfg-grid tbody th::after,
.pcfg-grid thead th:first-child::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: var(--pcfg-line);
	pointer-events: none;
}

.pcfg-grid tbody td {
	padding: 4px;
	border-bottom: 1px solid var(--pcfg-line-soft);
	border-left: 1px solid var(--pcfg-line-soft);
	text-align: center;
}

.pcfg-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	min-height: 34px;
	/* Symmetric padding keeps the price optically centred while reserving the
	   space the radio dot sits in, so a long total cannot run underneath it. */
	padding: 4px 22px;
	margin: 0;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-paper);
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.pcfg-cell:hover:not(:disabled) {
	border-color: var(--pcfg-accent);
}

.pcfg-cell__radio {
	position: absolute;
	right: 8px;
	width: 11px;
	height: 11px;
	border: 1px solid var(--pcfg-line);
	border-radius: 50%;
}

.pcfg-cell.is-selected {
	background: var(--pcfg-accent);
	border-color: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
}

.pcfg-cell.is-selected .pcfg-cell__radio {
	background: var(--pcfg-accent-ink);
	border-color: var(--pcfg-accent-ink);
}

.pcfg-cell:disabled,
.pcfg-cell.is-unavailable {
	color: var(--pcfg-muted);
	cursor: default;
	font-weight: 400;
	border-color: var(--pcfg-line-soft);
}

.pcfg-cell:disabled .pcfg-cell__radio {
	display: none;
}

.pcfg-custom-qty {
	height: 34px;
	font-size: 0.9em;
	font-weight: 600;
	text-align: center;
}

.pcfg-grid__loading {
	margin: 8px 0 0;
	font-size: 0.86em;
	color: var(--pcfg-muted);
}

/* Shown by frontend.js only when the grid genuinely has columns off screen. */
.pcfg-grid__scrollhint {
	margin: 8px 0 0;
	font-size: 0.82em;
	color: var(--pcfg-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.pcfg-grid__scrollhint[hidden] {
	display: none;
}

.pcfg-grid__scrollhint::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* No gradient overlay here on purpose: .pcfg-grid-wrap also contains the hint
   and loading lines, so anything stretched to its full height would wash over
   the text underneath. The frozen quantity column, its hairline edge and this
   hint carry the affordance between them. */

.pcfg-wrap.is-loading .pcfg-grid-scroll {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* ---------- Sticky summary bar ---------- */

.pcfg-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: 18px;
	border-radius: var(--pcfg-radius);
	overflow: hidden;
	border: 1px solid var(--pcfg-line);
	background: var(--pcfg-paper);
}

.pcfg-bar__summary {
	margin: 0;
	background: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
	font-size: 0.85em;
	padding: 9px 16px;
	text-align: center;
}

.pcfg-bar__row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	background: var(--pcfg-soft);
	padding: 12px 16px;
	flex-wrap: wrap;
}

.pcfg-bar__price {
	text-align: right;
	line-height: 1.25;
}

.pcfg-bar__total {
	display: block;
	font-size: 1.4em;
	font-weight: 700;
}

.pcfg-bar__unit {
	display: block;
	font-size: 0.8em;
	color: var(--pcfg-muted);
}

.pcfg-submit {
	background: var(--pcfg-accent);
	color: var(--pcfg-accent-ink);
	border: 1px solid var(--pcfg-accent);
	border-radius: var(--pcfg-radius);
	padding: 12px 28px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pcfg-submit:hover:not(:disabled) {
	background: var(--pcfg-accent-hover);
	border-color: var(--pcfg-accent-hover);
}

.pcfg-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.pcfg-link {
	background: none;
	border: 0;
	padding: 12px 6px;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.75;
}

/* ---------- Enquiry form ---------- */

.pcfg-enquiry {
	margin-top: 22px;
	padding: 20px;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-softer);
}

.pcfg-enquiry[hidden] {
	display: none;
}

.pcfg-enquiry__title {
	margin: 0 0 6px;
}

.pcfg-enquiry__intro {
	margin: 0 0 12px;
	color: var(--pcfg-muted);
}

.pcfg-enquiry__spec {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--pcfg-accent);
	background: var(--pcfg-soft);
	font-size: 0.9em;
}

.pcfg-enquiry__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 18px;
}

@container pcfg (max-width: 640px) {
	.pcfg-enquiry__grid {
		grid-template-columns: 1fr;
	}
}

.pcfg-f {
	margin: 0;
}

.pcfg-f--wide {
	grid-column: 1 / -1;
}

.pcfg-f label {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 4px;
}

.pcfg-f input,
.pcfg-f textarea {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pcfg-line);
	border-radius: var(--pcfg-radius);
	background: var(--pcfg-paper);
	color: inherit;
	font: inherit;
}

/* An artwork link pasted in full must wrap, not stretch the form. */
.pcfg-f textarea {
	resize: vertical;
}

.pcfg-f input.is-invalid,
.pcfg-f textarea.is-invalid {
	border-color: var(--pcfg-danger);
	border-width: 2px;
}

.pcfg-f input:focus-visible,
.pcfg-f textarea:focus-visible,
.pcfg-select:focus-visible,
.pcfg-cell:focus-visible,
.pcfg-btnopt:focus-visible,
.pcfg-submit:focus-visible,
.pcfg-custom-qty:focus-visible,
.pcfg-dim:focus-visible {
	outline: 2px solid var(--pcfg-accent);
	outline-offset: 2px;
}

.pcfg-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pcfg-enquiry__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.pcfg-notice {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: var(--pcfg-radius);
	border: 1px solid var(--pcfg-line);
	background: var(--pcfg-soft);
}

.pcfg-notice[hidden] {
	display: none;
}

.pcfg-notice.is-success {
	border-left: 4px solid var(--pcfg-accent);
	font-weight: 600;
}

.pcfg-notice.is-error {
	border-left: 4px solid var(--pcfg-danger);
	color: var(--pcfg-danger);
	font-weight: 600;
}

.pcfg-error {
	padding: 10px 14px;
	border-left: 4px solid var(--pcfg-danger);
	background: var(--pcfg-soft);
}

/* ---------- Cart / order line item ---------- */

.pcfg-item-meta {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85em;
}

/* =====================================================================
 * Responsive
 *
 * Breakpoints react to the width of the configurator, not the window, so
 * the same rules cover a phone, a narrow theme sidebar and a two-column
 * page layout. A viewport-based fallback for browsers without container
 * query support sits at the bottom of this file.
 * ===================================================================== */

/* ---------- Narrow: single column territory ---------- */

@container pcfg (max-width: 640px) {
	.pcfg-fields {
		gap: 12px 0;
		margin: 16px 0 20px;
	}

	.pcfg-btngroup {
		gap: 8px;
	}

	/* Two per row rather than one long stack, unless the label is genuinely
	   too wide to fit. */
	.pcfg-btnopt {
		min-width: calc(50% - 4px);
	}

	.pcfg-gallery__thumb img {
		width: 64px;
	}

	.pcfg-acc > summary {
		padding: 13px 30px 13px 10px;
	}

	/* Stack the summary bar: a right-aligned row squeezed the price and the
	   button into an unreadable pair on a phone. */
	.pcfg-bar__row {
		justify-content: stretch;
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
		padding: 12px;
	}

	.pcfg-bar__price {
		text-align: left;
	}

	.pcfg-submit {
		width: 100%;
		padding: 14px 20px;
	}

	.pcfg-enquiry {
		padding: 16px 14px;
	}

	.pcfg-enquiry__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pcfg-link {
		width: 100%;
		text-align: center;
	}
}

/* ---------- Very narrow: phones in portrait, tight sidebars ---------- */

@container pcfg (max-width: 430px) {
	.pcfg-btnopt {
		min-width: 100%;
	}

	.pcfg-grid {
		font-size: 0.86em;
	}

	.pcfg-grid thead th {
		padding: 10px 6px;
	}

	.pcfg-grid tbody th {
		width: 92px;
		padding: 6px;
	}

	.pcfg-grid tbody td {
		padding: 3px;
	}

	.pcfg-cell {
		padding: 4px 18px;
	}

	.pcfg-dims__unit {
		min-width: 64px;
	}
}

/* ---------- Touch devices ---------- */

@media (hover: none) and (pointer: coarse) {
	/* Comfortable tap targets. 34px is fine for a mouse and frustrating for
	   a thumb. */
	.pcfg-cell {
		min-height: 44px;
	}

	.pcfg-btnopt {
		min-height: 46px;
	}

	.pcfg-gallery__thumb img {
		width: 72px;
	}

	/* iOS zooms the page whenever a focused field is under 16px. Every
	   editable control is pinned to 16px so tapping one never rescales the
	   layout the visitor was reading. */
	.pcfg-select,
	.pcfg-custom-qty,
	.pcfg-dim,
	.pcfg-dims__unit,
	.pcfg-f input,
	.pcfg-f textarea {
		font-size: 16px;
	}

	/* Hover cannot fire, so the tooltip is driven by focus. The badge already
	   carries tabindex="0", which makes it tappable. */
	.pcfg-help {
		width: 20px;
		height: 20px;
	}

	.pcfg-acc > summary {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

/* ---------- Tooltips ---------- */

/* A fixed 240px bubble anchored to the badge's centre overflowed the screen
   whenever the badge sat near an edge. Clamp it to the container and let it
   shrink. */
.pcfg-help:hover::after,
.pcfg-help:focus::after,
.pcfg-help:focus-visible::after {
	width: max-content;
	max-width: min(240px, 70cqw);
}

@container pcfg (max-width: 430px) {
	.pcfg-help:hover::after,
	.pcfg-help:focus::after {
		/* Pin to the left edge of the label instead of centring on a badge
		   that may be inches from the screen edge. */
		left: 0;
		transform: none;
		max-width: 80cqw;
	}
}

/* ---------- Fallback for browsers without container queries ---------- */

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.pcfg-layout {
			grid-template-columns: 1fr;
			gap: 22px;
		}

		.pcfg-aside {
			display: contents;
		}

		.pcfg-gallery {
			order: 1;
		}

		.pcfg-main {
			order: 2;
		}

		.pcfg-accordions {
			order: 3;
			margin-top: 0;
		}
	}

	@media (max-width: 640px) {
		.pcfg-fields,
		.pcfg-enquiry__grid {
			grid-template-columns: 1fr;
		}

		.pcfg-btnopt {
			min-width: calc(50% - 4px);
		}

		.pcfg-bar__row {
			flex-direction: column;
			align-items: stretch;
			gap: 12px;
			padding: 12px;
		}

		.pcfg-bar__price {
			text-align: left;
		}

		.pcfg-submit {
			width: 100%;
		}

		.pcfg-enquiry__actions {
			flex-direction: column;
			align-items: stretch;
		}
	}

	@media (max-width: 430px) {
		.pcfg-field--weights {
			grid-template-columns: 1fr;
		}

		.pcfg-btnopt {
			min-width: 100%;
		}

		.pcfg-grid {
			font-size: 0.86em;
		}

		.pcfg-grid tbody th {
			width: 92px;
			padding: 6px;
		}

		.pcfg-help:hover::after,
		.pcfg-help:focus::after {
			left: 0;
			transform: none;
			max-width: 80vw;
		}
	}

	.pcfg-help:hover::after,
	.pcfg-help:focus::after {
		max-width: min(240px, 70vw);
	}
}

/* =====================================================================
 * Trade print preset
 *
 * The flat, square-cornered, high-contrast look trade printers use: a
 * bordered price grid where every cell is a selectable control with a
 * radio dot, grey quantity headers, and solid accent fills for whatever
 * is currently chosen.
 *
 * Structure and behaviour are shared with the theme preset — this only
 * restyles. Colours still come from the same custom properties, so the
 * accent remains a single setting rather than a hardcoded value, and the
 * whole skin re-tints when it changes.
 * ===================================================================== */

.pcfg-wrap[data-pcfg-preset="trade"] {
	--pcfg-radius: 0px;
	--pcfg-hairline: 0.8px;
	--pcfg-grey-row: #e5e7eb;
	--pcfg-grey-line: #d5d8dd;
	font-size: 16px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-label {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

/* ---------- Controls ---------- */

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-select,
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-dim,
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-dims__unit,
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-readout {
	height: 43px;
	border-width: var(--pcfg-hairline);
	border-color: var(--pcfg-ink);
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
}

/* Read-only values sit on a tint so they read as output, not input. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-readout {
	background: #f8f9fa;
	color: var(--pcfg-ink);
	border-color: var(--pcfg-grey-line);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-weight .pcfg-readout {
	height: 43px;
	justify-content: flex-start;
	font-size: 14px;
	min-width: 96px;
}

/* Option buttons fill their row and go solid when chosen. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-btnopt {
	min-height: 43px;
	border-width: var(--pcfg-hairline);
	border-color: var(--pcfg-accent);
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--pcfg-accent);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-btnopt.is-active {
	color: var(--pcfg-accent-ink);
	font-weight: 600;
}

/* ---------- Price grid ---------- */

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid-scroll {
	border: 0;
	border-radius: 0;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid {
	font-size: 16px;
	border-spacing: 6px 4px;
	border-collapse: separate;
}

/* The header carries no fill and no boxes — just the turnaround name, the
   due date under it, and a rule along the bottom. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid thead th {
	background: var(--pcfg-paper);
	border-left: 0;
	border-bottom: var(--pcfg-hairline) solid var(--pcfg-grey-line);
	padding: 10px 8px 14px;
	font-weight: 400;
	color: var(--pcfg-ink);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid__tname {
	font-weight: 700;
	font-size: 16px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid__due {
	font-size: 13px;
	color: var(--pcfg-muted);
	margin-top: 6px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid thead th:first-child {
	text-align: center;
	vertical-align: middle;
	font-weight: 700;
}

/* Quantity headers are flat grey blocks, not table cells. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid tbody th {
	background: var(--pcfg-grey-row);
	color: var(--pcfg-accent);
	border: 0;
	font-weight: 400;
	padding: 11px 10px;
	width: 118px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid tbody th::after {
	display: none;
}

/* border-spacing leaves a transparent gutter either side of the frozen
   quantity column, and scrolled price cells would show through it. These
   paper-coloured shadows fill the gutter without adding markup. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid tbody th,
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid thead th:first-child {
	box-shadow: 6px 0 0 var(--pcfg-paper), -6px 0 0 var(--pcfg-paper);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid tbody td {
	border: 0;
	padding: 0;
}

/* Every price is its own outlined control with a radio dot on the right. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell {
	min-height: 43px;
	padding: 8px 30px;
	border-width: var(--pcfg-hairline);
	border-color: var(--pcfg-accent);
	border-radius: 0;
	color: var(--pcfg-accent);
	font-weight: 400;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell.is-selected {
	color: var(--pcfg-accent-ink);
	font-weight: 600;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell__radio {
	right: 10px;
	width: 13px;
	height: 13px;
	border-width: var(--pcfg-hairline);
	border-color: currentColor;
}

/* Selected reads as a filled dot rather than a ring. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell.is-selected .pcfg-cell__radio {
	background: var(--pcfg-accent-ink);
	border-color: var(--pcfg-accent-ink);
	box-shadow: inset 0 0 0 2px var(--pcfg-accent);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell:disabled,
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell.is-unavailable {
	border-color: var(--pcfg-grey-line);
	color: var(--pcfg-muted);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-custom-qty {
	height: 43px;
	border-width: var(--pcfg-hairline);
	border-color: var(--pcfg-ink);
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	padding: 0 10px;
}

/* ---------- Accordions ---------- */

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-accordions {
	border-top: 0;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc {
	border-bottom: var(--pcfg-hairline) solid var(--pcfg-grey-line);
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc > summary {
	padding: 16px 44px 16px 16px;
	font-weight: 400;
	font-size: 16px;
}

/* The highlighted panel is a solid pill, which is what separates it from
   the plain rules above and below it. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc--highlight {
	border-bottom: 0;
	margin: 4px 0;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc--highlight > summary {
	border-radius: 9999px;
	padding-left: 20px;
}

/* Chevrons sit in a ring, as on the reference layout. */
.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc > summary::after {
	right: 18px;
	width: 7px;
	height: 7px;
	border-width: 2px;
}

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

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar {
	border: 0;
	border-radius: 0;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__summary {
	font-size: 15px;
	padding: 11px 16px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__row {
	background: #cfe7e4;
	color: #111827;
	padding: 14px 16px;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__total {
	font-size: 1.65em;
	font-weight: 700;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__unit {
	font-size: 0.78em;
	color: #4b5563;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-submit {
	border-radius: 3px;
	padding: 12px 32px;
	font-weight: 400;
}

/* ---------- Rewards line ---------- */

.pcfg-bar__loyalty {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.88em;
	line-height: 1.4;
}

.pcfg-bar__loyalty[hidden] {
	display: none;
}

.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__row {
	justify-content: space-between;
}

/* ---------- Trade preset, narrow ---------- */

@container pcfg (max-width: 640px) {
	.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid {
		border-spacing: 4px 3px;
	}

	.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-bar__row {
		justify-content: stretch;
	}

	.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-acc > summary {
		padding: 14px 40px 14px 14px;
	}
}

@container pcfg (max-width: 430px) {
	.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-grid tbody th {
		width: 84px;
		padding: 9px 6px;
	}

	.pcfg-wrap[data-pcfg-preset="trade"] .pcfg-cell {
		padding: 8px 24px;
	}
}