/**
 * Configurator styling. Intentionally restrained and token-driven - a client's block theme
 * supplies colour and type via theme.json; this only supplies structure and rhythm.
 */

.hpp-configurator {
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 8px;
}

.hpp-title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.hpp-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.hpp-row > .hpp-field {
	flex: 1 1 8rem;
}

.hpp-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
}

.hpp-field label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.hpp-input {
	width: 100%;
	padding: 0.55rem 0.65rem;
	font: inherit;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 6px;
	background: transparent;
	color: inherit;
}

.hpp-hint {
	font-size: 0.8rem;
	opacity: 0.72;
	margin: 0.2rem 0 0;
}

.hpp-options {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.hpp-options legend {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: 0.4rem;
}

.hpp-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.3rem 0;
	font-size: 0.92rem;
}

/* ---- price panel ---- */

.hpp-price {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.hpp-breakdown {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.hpp-breakdown th,
.hpp-breakdown td {
	text-align: left;
	padding: 0.3rem 0;
	font-weight: 400;
	vertical-align: baseline;
}

.hpp-breakdown th {
	font-weight: 600;
}

.hpp-detail {
	opacity: 0.68;
	font-size: 0.85rem;
}

.hpp-amt {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hpp-breakdown tfoot th,
.hpp-breakdown tfoot td {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	padding-top: 0.55rem;
}

.hpp-total {
	font-size: 1.15rem;
	font-weight: 700;
}

.hpp-note {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	opacity: 0.75;
}

/* ---- quote state ---- */

.hpp-quote-msg {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.hpp-quote-btn {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border-radius: 6px;
	border: 1px solid currentColor;
	text-decoration: none;
	font-weight: 600;
}

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

@media (max-width: 480px) {
	.hpp-row {
		gap: 0.5rem;
	}
}

/* The configurator owns quantity and mirrors it into Woo's native input, which would
   otherwise render a second, contradictory quantity box beside Add to cart. */
.hpp-configurator ~ .quantity,
form.cart .quantity:has(~ .single_add_to_cart_button),
form.cart .wc-block-components-quantity-selector {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- artwork upload + preflight findings ---- */

.hpp-artwork {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.hpp-artlabel {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.hpp-file {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 0.9rem;
}

.hpp-artresult {
	margin-top: 0.6rem;
}

.hpp-art {
	padding: 0.7rem 0.85rem;
	border-radius: 6px;
	border-left: 3px solid;
	font-size: 0.88rem;
}

.hpp-art--ok      { border-color: #1a7f4b; background: color-mix(in srgb, #1a7f4b 8%, transparent); }
.hpp-art--warning { border-color: #b26a00; background: color-mix(in srgb, #b26a00 9%, transparent); }
.hpp-art--fail    { border-color: #b3261e; background: color-mix(in srgb, #b3261e 9%, transparent); }

.hpp-arthead {
	margin: 0;
}

.hpp-artname {
	opacity: 0.7;
	font-size: 0.85em;
}

.hpp-flist {
	margin: 0.45rem 0 0;
	padding-left: 1.1rem;
}

.hpp-flist li {
	margin: 0.2rem 0;
	line-height: 1.45;
}

.hpp-f--fail {
	font-weight: 600;
}

/* ---------------------------------------------------------------- quote request form */

.hpp-quoteform { max-width: none; }

/* Fields are laid out on a 6-column grid so a control can be sized to its content:
   a date or a name takes half the row, and Width / Height / Quantity sit together as
   thirds instead of each getting a full-width box that says nothing about what goes in it. */
.hpp-qgroup {
	border: 0;
	padding: 0;
	margin: 0 0 30px;
}

.hpp-qgroup legend {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5a6b80);
	padding: 0;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--line, #d8e3f0);
	width: 100%;
	padding-bottom: 8px;
}

.hpp-qgrid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px 18px;
}

.hpp-span-full  { grid-column: span 6; }
.hpp-span-half  { grid-column: span 3; }
.hpp-span-third { grid-column: span 2; }

@media (max-width: 640px) {
	.hpp-span-half, .hpp-span-third { grid-column: span 6; }
}

.hpp-quoteform .hpp-field { margin: 0; }

.hpp-quoteform label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}

.hpp-quoteform .hpp-input {
	width: 100%;
	box-sizing: border-box;
}

.hpp-quoteform textarea.hpp-input { resize: vertical; }

.hpp-req { color: #b32d2e; }

.hpp-invalid { border-color: #b32d2e !important; }

.hpp-fielderr {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #b32d2e;
}

/* The honeypot must be off-screen rather than display:none — some bots skip hidden inputs
   and would sail past the check. */
.hpp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hpp-quote-context {
	padding: 12px 14px;
	margin: 0 0 22px;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, 0.04);
	font-size: 15px;
}

.hpp-quote-actions { margin: 4px 0 0; }

.hpp-quote-submit {
	font-size: 16px;
	font-weight: 700;
	padding: 13px 26px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	background: var(--wp--preset--color--brand, #0c48a8);
	color: #fff;
}

.hpp-quote-submit[disabled] { opacity: 0.6; cursor: default; }

.hpp-quote-result:not(:empty) {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15px;
}

.hpp-quote-ok {
	background: #edf7ed;
	border: 1px solid #b7e0b7;
	color: #14591a;
}

.hpp-quote-bad {
	background: #fdecea;
	border: 1px solid #f3c1bd;
	color: #8a1c13;
}

/* ---------------------------------------------------------------- proof approval page */

.hpp-proofpage { max-width: 860px; }

.hpp-proof-meta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5a6b80);
	margin: 0 0 10px;
}

.hpp-proof-lead { margin: 0 0 22px; }

.hpp-proof-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line, #d8e3f0);
	border-radius: 8px;
	background: #fff;
}

.hpp-proof-checks {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--line, #d8e3f0);
	border-radius: 8px;
	background: var(--wp--preset--color--accent, #eaf2fb);
}

.hpp-proof-checks h3 { margin: 0 0 8px; font-size: 15px; }
.hpp-proof-checks ul { margin: 0; padding-left: 1.1em; font-size: 15px; }

.hpp-proof-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.hpp-proof-approve,
.hpp-proof-changes {
	font-size: 16px;
	font-weight: 700;
	padding: 13px 24px;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid transparent;
}

.hpp-proof-approve {
	background: var(--wp--preset--color--brand, #0c48a8);
	color: #fff;
}

/* Requesting changes is the reversible choice, so it is quieter than approving - but still a
   real button, not a link, because it is one of two equal outcomes. */
.hpp-proof-changes {
	background: transparent;
	color: var(--wp--preset--color--ink, #10233d);
	border-color: var(--wp--preset--color--line, #d8e3f0);
}

.hpp-proof-approve[disabled],
.hpp-proof-changes[disabled] { opacity: 0.55; cursor: default; }

.hpp-proof-notes-wrap { margin-top: 18px; }
.hpp-proof-notes-wrap label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.hpp-proof-notes-wrap textarea { width: 100%; box-sizing: border-box; }

.hpp-proof-result:not(:empty) {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15px;
}

.hpp-proof-ok { background: #edf7ed; border: 1px solid #b7e0b7; color: #14591a; }
.hpp-proof-bad { background: #fdecea; border: 1px solid #f3c1bd; color: #8a1c13; }

.hpp-proof-msg { padding: 18px 0; }


/* ---------------------------------------------------------------- design studio CTA */

.hpp-designcta {
	margin: 14px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line, #d8e3f0);
}

.hpp-designbtn {
	display: block;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--brand, #0c48a8);
	border-radius: 8px;
	color: var(--wp--preset--color--brand, #0c48a8);
	background: #fff;
}

.hpp-designbtn:hover { background: var(--wp--preset--color--accent, #eaf2fb); }

.hpp-designcta .hpp-hint { display: block; margin-top: 7px; }

/* Customer artwork shown in place of the catalogue photo on a cart or order line. */
.hpp-lineart {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line, #d8e3f0);
	border-radius: 4px;
}

/* --- finishing (storefront sheet add-ons, 2026-08-17) ---------------------------------- */
/* Each finish is one row: what it is, what it costs, and which edges it goes on. The edge
   toggles sit on the same line as their finish so a customer never has to work out which
   "Top" belongs to which finish. They wrap to their own line when the row runs out of room
   rather than shrinking the labels into an unreadable strip. */
.hpp-finishing .hpp-finish {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .75rem;
	padding: .5rem 0;
	border-top: 1px solid var(--hpp-rule, #e4e7ec);
}
.hpp-finishing .hpp-finish:first-of-type { border-top: 0; }
.hpp-finish-name { font-weight: 600; }
.hpp-finish-rate { color: var(--hpp-muted, #667085); font-size: .875rem; }
.hpp-edges {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .85rem;
	margin-left: auto;   /* push the toggles to the right, away from the name and rate */
}
.hpp-edge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .875rem;
	white-space: nowrap;
}
.hpp-edge input { margin: 0; }

@media (max-width: 560px) {
	/* At phone width "auto" margin would strand the toggles on their own line hard right. */
	.hpp-edges { margin-left: 0; width: 100%; }
}

/* CR's stake caveat. A warning, not an error: the order is still priced and still sellable,
   so this must not borrow the red used for blocked configurations. */
.hpp-hint.hpp-warn {
	color: var(--hpp-warn, #8a5a00);
	font-weight: 600;
}

/* An incomplete configuration - "choose a material" - is a prompt, not an error and not a
   quote. Neutral weight so it reads as guidance rather than a problem the customer caused. */
.hpp-prompt {
	margin: 0;
	color: var(--hpp-muted, #667085);
	font-style: italic;
}

/* Guidance under the material selector. Reserves its line height so swapping between a one-line
   and a two-line sentence does not shift the price panel below it - a configurator that jumps
   while you are reading it reads as broken. */
.hpp-bestfor {
	display: block;
	margin-top: .35rem;
	min-height: 2.4em;
	font-size: .875rem;
	line-height: 1.2;
	color: var(--hpp-muted, #5a6472);
}
.hpp-bestfor:empty {
	min-height: 0;
}