/**
 * CE Pricing Engine - 13oz configurator styles. Scoped to .ce-pe-cfg. Consumes the theme's
 * brand tokens where present, with safe fallbacks so the plugin renders acceptably alone.
 */
.ce-pe-cfg {
	margin: 0 0 var(--ce-space-5, 24px);
}

.ce-pe-cfg__unit-note {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ce-color-text-mid, #5A524C);
	margin: 0 0 var(--ce-space-4, 16px);
}

/* Governed maximum-size guidance shown before dimension entry. Subordinate practical help, not an
 * error: no alert styling, wraps naturally, stays inside the configurator width on narrow screens. */
.ce-pe-cfg__sizelimit {
	font-size: 0.8rem;
	color: var(--ce-color-text-mid, #5A524C);
	margin: 0 0 var(--ce-space-3, 12px);
	line-height: 1.4;
	max-width: 100%;
	overflow-wrap: break-word;
}

.ce-pe-cfg__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ce-space-4, 16px);
	margin-bottom: var(--ce-space-4, 16px);
}

.ce-pe-cfg__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* A dimension field is also a .ce-pe-cfg__field, whose display:flex would otherwise defeat the UA
 * [hidden] { display: none }. Honor the hidden attribute the v2 configurator toggles per variant so
 * fixed-package branches (no custom size) do not render Width/Height. Specificity (0,2,0) beats the
 * .ce-pe-cfg__field rule with no !important. */
.ce-pe-cfg__dims[hidden] {
	display: none;
}

.ce-pe-cfg__field label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ce-color-text-mid, #5A524C);
}

.ce-pe-cfg__field input,
.ce-pe-cfg__field select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--ce-color-text, #1C1A17);
	background: var(--ce-color-bg-page, #FDFAF6);
	border: 1px solid var(--ce-color-border, #E6DDD3);
	border-radius: 6px;
}

.ce-pe-cfg__field input:focus-visible,
.ce-pe-cfg__field select:focus-visible,
.ce-pe-cfg__calc:focus-visible {
	outline: 2px solid var(--ce-color-rust, #8C3820);
	outline-offset: 2px;
}

.ce-pe-cfg__calc {
	margin-top: 4px;
}

.ce-pe-cfg__calc[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ce-pe-cfg__loading {
	margin: var(--ce-space-4, 16px) 0 0;
	font-size: 0.9rem;
	color: var(--ce-color-text-mid, #5A524C);
}

.ce-pe-cfg__error {
	margin: var(--ce-space-4, 16px) 0 0;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: #7a1f10;
	background: #fbeae6;
	border: 1px solid #e6b3a7;
	border-radius: 6px;
}

.ce-pe-cfg__result {
	margin: var(--ce-space-4, 16px) 0 0;
	padding: 16px 18px;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ce-color-rust, #8C3820);
	background: var(--ce-color-bg-cream, #F5F0EA);
	border: 1px solid var(--ce-color-border, #E6DDD3);
	border-radius: 6px;
}

.ce-pe-cfg__preview-note {
	margin: 10px 0 0;
	font-size: 0.78rem;
	color: var(--ce-color-text-muted, #9A908A);
}

.ce-pe-cfg__cartrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: var(--ce-space-5, 24px);
}

.ce-pe-cfg__addcart[disabled] {
	opacity: 0.5;
	cursor: default;
}

.ce-pe-cfg__viewcart {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ce-color-rust, #8C3820);
	text-decoration: underline;
}

.ce-pe-cfg__cartmsg {
	margin: 12px 0 0;
	padding: 12px 14px;
	font-size: 0.9rem;
	border-radius: 6px;
}

.ce-pe-cfg__cartmsg.is-ok {
	color: #1f5130;
	background: #e8f4ec;
	border: 1px solid #a9d3ba;
}

.ce-pe-cfg__cartmsg.is-error {
	color: #7a1f10;
	background: #fbeae6;
	border: 1px solid #e6b3a7;
}

.ce-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;
}

@media (min-width: 640px) {
	.ce-pe-cfg__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Bulk-order sales CTA (directly-orderable configurators only). A quiet, compact card near the
 * ordering controls - clean and premium, never a promotional / discount banner. No decorative
 * short-dash motif beside the heading. */
.ce-pe-cfg__bulk {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--ce-color-border, #E4DCD2);
	border-radius: var(--ce-radius-card, 8px);
	background: var(--ce-color-bg-cream, #F7F2EA);
}
.ce-pe-cfg__bulk-title {
	margin: 0 0 2px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--ce-color-text, #1A1613);
}
.ce-pe-cfg__bulk-msg {
	margin: 0 0 8px;
	font-size: 0.82rem;
	color: var(--ce-color-text-mid, #6B6157);
}
.ce-pe-cfg__bulk-actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}
.ce-pe-cfg__bulk-link {
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--ce-color-rust, #B4552D);
	text-decoration: none;
}
.ce-pe-cfg__bulk-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------------- */
/* Purchase-flow visual hierarchy refinement (custom-dimension configurator). */
/* Presentation only: no field names, IDs, JS hooks or business copy changed. */
/* ------------------------------------------------------------------------- */

/* Section grouping + quiet scan labels (Size, Order information). */
.ce-pe-cfg__section {
	margin: 0 0 var(--ce-space-4, 16px);
}
.ce-pe-cfg__seclabel {
	display: block;
	margin: 0 0 8px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ce-color-text-mid, #5A524C);
}

/* Size group: the governed maximum-size helper sits directly under the Size label, quiet. */
.ce-pe-cfg__sizesection .ce-pe-cfg__sizelimit {
	margin-top: -2px;
}
.ce-pe-cfg__sizesection .ce-pe-cfg__grid {
	margin-bottom: 0;
}

/* Quantity is a single small number: keep it compact on desktop, full width on mobile. */
.ce-pe-cfg__qtyfield {
	max-width: 180px;
}

/* The governed note for the selected variant: what it includes (hardware, pole set, whether the
   design comes from a stock catalogue). Rendered only when the catalog carries a note. */
.ce-pe-cfg__variantnote {
	margin: 6px 0 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--ce-color-text-mid, #5A5149);
}

/* The governed minimum order quantity, stated beside the field it constrains. Rendered only for a
   product whose catalog record carries a minimum, so it never appears as an empty hint. */
.ce-pe-cfg__qtymin {
	margin: 6px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	font-weight: var(--ce-fw-semibold, 600);
	color: var(--ce-color-rust, #B4552D);
}

/* Transaction block: Calculate -> price -> artwork -> Add to Cart read as one connected group. */
.ce-pe-cfg__transaction {
	margin: var(--ce-space-4, 16px) 0 0;
	padding: var(--ce-space-4, 16px);
	border: 1px solid var(--ce-color-border, #E6DDD3);
	border-radius: var(--ce-radius-card, 8px);
	background: var(--ce-color-bg-page, #FDFAF6);
}
.ce-pe-cfg__transaction .ce-pe-cfg__calc {
	width: 100%;
}
.ce-pe-cfg__transaction .ce-pe-cfg__result {
	margin-top: 14px;
}
.ce-pe-cfg__transaction .ce-pe-cfg__artwork {
	margin-top: 14px;
}
.ce-pe-cfg__transaction .ce-pe-cfg__cartrow {
	margin-top: 14px;
}

/* Artwork: a deliberate, integrated upload control rather than a raw native field. */
.ce-pe-cfg__artwork {
	padding: 12px 14px;
	border: 1px solid var(--ce-color-border, #E6DDD3);
	border-radius: var(--ce-radius-card, 8px);
	background: var(--ce-color-bg-cream, #F7F2EA);
}
.ce-pe-cfg__art-note {
	margin: 2px 0 10px;
	font-size: 0.78rem;
	color: var(--ce-color-text-mid, #6B6157);
}
.ce-pe-cfg__artfile {
	max-width: 100%;
	font-size: 0.85rem;
	color: var(--ce-color-text-mid, #5A524C);
}
.ce-pe-cfg__artfile::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ce-color-text, #1C1A17);
	background: var(--ce-color-bg-page, #FDFAF6);
	border: 1px solid var(--ce-color-border, #E6DDD3);
	border-radius: 6px;
	cursor: pointer;
}
.ce-pe-cfg__artfile::file-selector-button:hover {
	border-color: var(--ce-color-rust, #8C3820);
}

/* Bulk links as distinct pills so "Email Us" and "WhatsApp Us" never visually run together. */
.ce-pe-cfg__bulk-link {
	padding: 7px 14px;
	border: 1px solid var(--ce-color-rust, #B4552D);
	border-radius: 6px;
	line-height: 1.1;
}
.ce-pe-cfg__bulk-link:hover {
	background: var(--ce-color-rust, #B4552D);
	color: #fff;
	text-decoration: none;
}

/* Order information: necessary governed copy, kept subordinate and after the purchase actions. */
.ce-pe-cfg__orderinfo {
	margin-top: var(--ce-space-4, 16px);
}
.ce-pe-cfg__orderinfo .ce-kyd-notice,
.ce-pe-cfg__orderinfo .ce-min-notice,
.ce-pe-cfg__orderinfo .ce-pe-cfg__preview-note {
	margin: 0 0 6px;
	font-size: 0.76rem;
	color: var(--ce-color-text-muted, #9A908A);
}

@media (min-width: 640px) {
	/* Quantity stays compact next to the size group on wider screens. */
	.ce-pe-cfg__qtyfield {
		max-width: 160px;
	}
}

/* Product Specifications: fixed, non-selectable product facts (e.g. DTF/UV DTF Color Printing 5/0),
 * rendered from a non-paper product's fixed_specification. Descriptive label/value rows, never a
 * control - quiet and consistent with the configurator's information language. */
.ce-pe-cfg__specrow {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	padding: 4px 0;
}
.ce-pe-cfg__speclabel {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ce-color-text-mid, #5A524C);
	min-width: 120px;
}
.ce-pe-cfg__specvalue {
	font-size: 0.95rem;
	color: var(--ce-color-text, #1C1A17);
}

/* Subordinate size-entry guidance for the v1 (13oz) banner path. Sits under the data-driven starting
 * rate (.ce-pe-cfg__unit-note) and never substitutes for it. Quiet, not a price. */
.ce-pe-cfg__size-instruction {
	margin: 0 0 var(--ce-space-3, 12px);
	font-size: 0.85rem;
	color: var(--ce-color-text-mid, #5A524C);
}