/* PBJ Forms & Products — frontend */
.pbj-ord-wrap { max-width: 720px; margin: 1.25rem 0; }
.pbj-ord-form { display: block; }
.pbj-ord-desc { margin: 0 0 1rem; opacity: .85; }
.pbj-ord-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.pbj-ord-field { display: block; }
.pbj-ord-col-full { grid-column: 1 / -1; }
.pbj-ord-col-half { grid-column: span 1; }
@media (max-width: 640px) {
	.pbj-ord-grid { grid-template-columns: 1fr; }
	.pbj-ord-col-half { grid-column: 1 / -1; }
}

/* The option picker inside a Buy now form (Jake Q-B9) sits above the fields. */
.pbj-ord-form > .pbj-ordshop-variations { margin: 0 0 1rem; }

/* =================================================================
 * Cart and add-to-cart (2.1.0). Every colour here is a --pbjfb-*
 * token with a plain fallback, so a themed site restyles the cart
 * with the same controls that restyle a form, and an unthemed site
 * still gets sane defaults.
 * ================================================================= */
.pbj-ord-product-card .pbj-ord-add-to-cart { margin-top: 1rem; }
.pbj-ord-add-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pbj-ord-added {
	margin: .75rem 0 0; font-size: .95em;
	color: var(--pbjfb-success, #2a7a2a);
}
.pbj-ord-link { color: var(--pbjfb-accent, #2271b1); }

.pbj-ord-cart { margin-bottom: 1.5rem; }
.pbj-ord-cart-busy { opacity: .6; }

.pbj-ord-cart-lines { list-style: none; margin: 0; padding: 0; }
.pbj-ord-cart-line {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
}
.pbj-ord-cart-lines-noimg .pbj-ord-cart-line { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.pbj-ord-cart-thumb { width: 64px; height: 64px; }
.pbj-ord-cart-thumb img {
	width: 64px; height: 64px; object-fit: cover; display: block;
	border-radius: var(--pbjfb-radius, 6px);
}
.pbj-ord-cart-detail { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pbj-ord-cart-title { font-weight: 600; overflow-wrap: anywhere; }
.pbj-ord-cart-unit,
.pbj-ord-cart-note { font-size: .9em; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-cart-line-total { font-weight: 700; white-space: nowrap; }

/* Quantity stepper — shared by the cart and the product card. */
.pbj-ord-qty { display: inline-flex; align-items: stretch; }
.pbj-ord-qty-btn {
	width: 2.25rem; min-height: 2.25rem;
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
	color: var(--pbjfb-text, currentColor);
	font: inherit; line-height: 1; cursor: pointer;
}
.pbj-ord-qty-btn:first-child { border-radius: var(--pbjfb-radius, 6px) 0 0 var(--pbjfb-radius, 6px); }
.pbj-ord-qty-btn:last-child { border-radius: 0 var(--pbjfb-radius, 6px) var(--pbjfb-radius, 6px) 0; }
.pbj-ord-qty-btn:hover { background: color-mix(in srgb, var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent)) 35%, var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent))); }
.pbj-ord-qty-btn[disabled] { opacity: .5; cursor: default; }
.pbj-ord-qty-input {
	width: 3.25rem; text-align: center;
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
	border-left-width: 0; border-right-width: 0;
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
	color: var(--pbjfb-text, currentColor);
	font: inherit; padding: .35rem 0;
	-moz-appearance: textfield;
}
.pbj-ord-qty-input::-webkit-outer-spin-button,
.pbj-ord-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Remove: a quiet text link (WooCommerce-style), still a real <button>
   for the JS, with a 44px tap target. */
.pbj-ord-remove {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; padding: 0 .35rem; margin: 0;
	background: none; border: 0; box-shadow: none; border-radius: 4px;
	font: inherit; font-size: .875em; line-height: 1.2; cursor: pointer;
	text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
	color: var(--pbjfb-muted, color-mix(in srgb, currentColor 62%, transparent));
}
.pbj-ord-remove:hover, .pbj-ord-remove:focus-visible { color: inherit; background: none; }
.pbj-ord-remove:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.pbj-ord-cart-count { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); font-weight: 400; font-size: .7em; margin-left: .35rem; }

.pbj-ord-checkout-head { margin-top: 1.5rem; }
.pbj-ord-checkout-title { margin: 0 0 .25rem; }
.pbj-ord-checkout-sub { margin: 0; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }

/* One column on a phone: the thumbnail and the controls stack under the
   title rather than squeezing five columns into 390px. */
@media (max-width: 640px) {
	.pbj-ord-cart-line {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb detail total"
			"qty   qty    remove";
		row-gap: .75rem;
	}
	.pbj-ord-cart-lines-noimg .pbj-ord-cart-line {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"detail total"
			"qty    remove";
	}
	.pbj-ord-cart-thumb { grid-area: thumb; width: 56px; height: 56px; }
	.pbj-ord-cart-thumb img { width: 56px; height: 56px; }
	.pbj-ord-cart-detail { grid-area: detail; }
	.pbj-ord-cart-line-total { grid-area: total; text-align: right; }
	.pbj-ord-cart-line .pbj-ord-qty { grid-area: qty; justify-self: start; }
	.pbj-ord-remove { grid-area: remove; justify-self: end; }
}
.pbj-ord-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pbj-ord-field input[type="text"],
.pbj-ord-field input[type="email"],
.pbj-ord-field input[type="tel"],
.pbj-ord-field input[type="url"],
.pbj-ord-field input[type="number"],
.pbj-ord-field input[type="date"],
.pbj-ord-field select,
.pbj-ord-field textarea {
	width: 100%; box-sizing: border-box;
	padding: .55rem .75rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 6px; font: inherit; line-height: 1.4;
	color: inherit; background-color: color-mix(in srgb, currentColor 5%, transparent);
}
.pbj-ord-field :is(input, textarea)::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.pbj-ord-field :is(input, select, textarea):focus { outline: none; border-color: color-mix(in srgb, currentColor 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent); }
.pbj-ord-field select option { color: #1d2327; background: #fff; }
.pbj-ord-field textarea { min-height: 6rem; resize: vertical; }
.pbj-ord-options { display: flex; flex-direction: column; gap: .25rem; }
.pbj-ord-opt { font-weight: 400; }
.pbj-ord-consent { font-weight: 400; }
.pbj-ord-required { color: #c00; margin-left: .15rem; }
.pbj-ord-help { font-size: .85em; margin: .25rem 0 0; opacity: .8; }
.pbj-ord-captcha { margin: 1rem 0; }
.pbj-ord-captcha input { max-width: 8rem; }
.pbj-ord-price { font-weight: 700; margin: 1rem 0 .5rem; }
/* Card box: tinted like the form fields so a dark theme gets a dark box.
   Square draws its own bordered field (styled from these same colours in
   the JS), so its outer box adds no second border. */
.pbj-ord-card {
	min-height: 52px; padding: .65rem .75rem; margin-bottom: .75rem; box-sizing: border-box;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 6px;
	background-color: color-mix(in srgb, currentColor 5%, transparent);
}
.pbj-ord-card:has(+ input[name="square_token"]) { min-height: 0; padding: 0; border: 0; background: none; }
.pbj-ord-paypal { min-height: 50px; margin-bottom: .75rem; }
.pbj-ord-actions { margin-top: 1rem; }
/* Primary buttons carry the theme's own button classes when the theme has
   them (uk-button uk-button-primary on YOOtheme, wp-element-button on a block
   theme; PBJ_Orders_Shortcode::button_class()). The plugin colour below
   is only the fallback for themes without one, so it never overrides them. */
.pbj-ord-submit { cursor: pointer; }
.pbj-ord-submit:not(.uk-button):not(.wp-element-button) {
	background: #2271b1; color: #fff; border: 0; padding: .65rem 1.25rem;
	border-radius: 6px; font: inherit;
}
.pbj-ord-submit:not(.uk-button):not(.wp-element-button):hover { background: #135e96; }
.pbj-ord-submit[disabled] { opacity: .6; cursor: progress; }
.pbj-ord-errors { color: #b32d2e; margin-top: 1rem; min-height: 1.25rem; }
.pbj-ord-success { color: #2a7a2a; margin-top: 1rem; min-height: 1.25rem; }

/* =================================================================
 * Product block (v1.6.0) — optional. Renders only when the form
 * carries a picture, headline, subhead or bullet points.
 * ================================================================= */
.pbj-ord-product { margin: 0 0 1.25rem; }
.pbj-ord-product-media img,
.pbj-ord-product-image {
	display: block; width: 100%; height: auto;
	border-radius: var(--pbjfb-radius, 6px);
}
.pbj-ord-product-headline { margin: 0 0 .35rem; line-height: 1.2; }
.pbj-ord-product-stacked .pbj-ord-product-media { margin-bottom: 1rem; }
.pbj-ord-product-subhead { margin: 0 0 .75rem; opacity: .85; }
.pbj-ord-product-details { margin: 0 0 .5rem; padding-left: 1.25rem; }
.pbj-ord-product-details li { margin-bottom: .3rem; }
.pbj-ord-price-note { font-weight: 400; opacity: .75; margin-left: .5rem; font-size: .9em; }
.pbj-ord-hosted-note { margin: .25rem 0 .75rem; font-size: .9em; opacity: .8; }

/* Picture beside the form on wide screens; stacks below 720px. */
@media (min-width: 721px) {
	.pbj-ord-product-side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; align-items: start; }
	.pbj-ord-product-side .pbj-ord-product-media { margin-bottom: 0; }
}

/* =================================================================
 * Theme layer (v1.6.0). Everything below applies ONLY when the
 * owner has ticked "Use my own styling" — the .pbj-ord-themed class
 * is absent otherwise, and the plain rules above are all that runs.
 * The custom properties are written inline on .pbj-ord-themed by PHP.
 * ================================================================= */
.pbj-ord-themed {
	max-width: var(--pbjfb-max-width, 720px);
	font-size: var(--pbjfb-font-size, 1rem);
	font-family: var(--pbjfb-font-family, inherit);
	color: var(--pbjfb-text, currentColor);
}
.pbj-ord-themed[data-align="center"] { margin-left: auto; margin-right: auto; }

.pbj-ord-themed .pbj-ord-grid { gap: var(--pbjfb-gap, 1rem); }
.pbj-ord-themed .pbj-ord-field label { font-weight: var(--pbjfb-label-weight, 600); color: var(--pbjfb-text, currentColor); }
.pbj-ord-themed .pbj-ord-help,
.pbj-ord-themed .pbj-ord-desc { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); opacity: 1; }
.pbj-ord-themed .pbj-ord-required { color: var(--pbjfb-error, #b32d2e); }
.pbj-ord-themed .pbj-ord-errors { color: var(--pbjfb-error, #b32d2e); }
.pbj-ord-themed .pbj-ord-success { color: var(--pbjfb-success, #2a7a2a); }
.pbj-ord-themed .pbj-ord-price { color: var(--pbjfb-accent, #2271b1); }
.pbj-ord-themed .pbj-ord-product-subhead { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); opacity: 1; }

.pbj-ord-themed .pbj-ord-field input[type="text"],
.pbj-ord-themed .pbj-ord-field input[type="email"],
.pbj-ord-themed .pbj-ord-field input[type="tel"],
.pbj-ord-themed .pbj-ord-field input[type="url"],
.pbj-ord-themed .pbj-ord-field input[type="number"],
.pbj-ord-themed .pbj-ord-field input[type="date"],
.pbj-ord-themed .pbj-ord-field select,
.pbj-ord-themed .pbj-ord-field textarea,
.pbj-ord-themed .pbj-ord-captcha input {
	padding: var(--pbjfb-field-padding, .55rem) calc(var(--pbjfb-field-padding, .55rem) * 1.35);
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
	border-radius: var(--pbjfb-radius, 6px);
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
	color: var(--pbjfb-text, currentColor);
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pbj-ord-themed .pbj-ord-card {
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
	border-radius: var(--pbjfb-radius, 6px);
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
}
.pbj-ord-themed .pbj-ord-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--pbjfb-accent, #2271b1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbjfb-accent, #2271b1) 25%, transparent);
}

/* Field style: underline */
.pbj-ord-themed[data-field-style="underline"] .pbj-ord-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	border-width: 0 0 2px 0;
	border-radius: 0;
	background: transparent;
	padding-left: 0; padding-right: 0;
}
/* Field style: filled */
.pbj-ord-themed[data-field-style="filled"] .pbj-ord-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	border-color: transparent;
	background: color-mix(in srgb, var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent)) 30%, var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent)));
}

/* Buttons */
.pbj-ord-themed .pbj-ord-submit:not(.uk-button):not(.wp-element-button) {
	background: var(--pbjfb-accent, #2271b1);
	color: var(--pbjfb-accent-text, #fff);
	border: 2px solid var(--pbjfb-accent, #2271b1);
	border-radius: var(--pbjfb-radius, 6px);
	padding: calc(var(--pbjfb-field-padding, .55rem) * 1.15) calc(var(--pbjfb-field-padding, .55rem) * 2.4);
	font-family: inherit;
	font-weight: var(--pbjfb-label-weight, 600);
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.pbj-ord-themed .pbj-ord-submit:not(.uk-button):not(.wp-element-button):hover { background: var(--pbjfb-accent, #2271b1); filter: brightness(.9); }
.pbj-ord-themed .pbj-ord-submit:not(.uk-button):not(.wp-element-button):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbjfb-accent, #2271b1) 35%, transparent);
}
.pbj-ord-themed[data-button-style="outline"] .pbj-ord-submit:not(.uk-button):not(.wp-element-button) {
	background: transparent; color: var(--pbjfb-accent, #2271b1);
}
.pbj-ord-themed[data-button-style="outline"] .pbj-ord-submit:not(.uk-button):not(.wp-element-button):hover {
	background: var(--pbjfb-accent, #2271b1); color: var(--pbjfb-accent-text, #fff); filter: none;
}
.pbj-ord-themed[data-button-style="pill"] .pbj-ord-submit:not(.uk-button):not(.wp-element-button) { border-radius: 999px; }
.pbj-ord-themed[data-button-style="block"] .pbj-ord-submit { display: block; width: 100%; }

/* Respect a visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.pbj-ord-themed .pbj-ord-submit,
	.pbj-ord-themed .pbj-ord-field :is(input, select, textarea) { transition: none; }
}

/* Themed cart — same tokens the themed form uses. */
.pbj-ord-themed .pbj-ord-cart-line { border-bottom-color: var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent)); }
.pbj-ord-themed .pbj-ord-cart-unit,
.pbj-ord-themed .pbj-ord-cart-note,
.pbj-ord-themed .pbj-ord-cart-count,
.pbj-ord-themed .pbj-ord-checkout-sub { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-themed .pbj-ord-cart-total { color: var(--pbjfb-accent, #2271b1); }
.pbj-ord-themed .pbj-ord-qty-btn,
.pbj-ord-themed .pbj-ord-qty-input {
	border-color: var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
	color: var(--pbjfb-text, currentColor);
}
.pbj-ord-themed[data-button-style="pill"] .pbj-ord-qty-btn:first-child { border-radius: 999px 0 0 999px; }
.pbj-ord-themed[data-button-style="pill"] .pbj-ord-qty-btn:last-child { border-radius: 0 999px 999px 0; }


/* =================================================================
 * Store (2.4.0): wider cart and checkout, totals, coupon, shipping,
 * checkout address block, order received. Tokens as above; the ONE
 * primary colour is --pbjfb-accent (the .pbj-ord-submit button), and
 * every other control is a neutral outline.
 * ================================================================= */
.pbj-ord-cart,
.pbj-ord-checkout-head,
.pbj-ord-cart-checkout,
.pbj-ord-store-notice,
.pbj-ord-thanks-wrap { max-width: 1040px; }
.pbj-ord-cart *, .pbj-ord-cart-checkout *, .pbj-ord-thanks * { box-sizing: border-box; }

.pbj-ord-cart-heading { margin: 0 0 .5rem; font-size: 1.5em; line-height: 1.2; }
.pbj-ord-cart-lines { border-top: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-cart-variation { font-size: .9em; color: var(--pbjfb-text, currentColor); }
.pbj-ord-cart-stock { font-size: .85em; font-weight: 600; color: var(--pbjfb-error, #b32d2e); }

.pbj-ord-cart-foot {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 2rem; align-items: start; margin-top: 1.5rem;
}
.pbj-ord-cart-tools { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.pbj-ord-coupon-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.pbj-ord-coupon-row { display: flex; gap: .5rem; max-width: 420px; }
.pbj-ord-coupon-row input,
.pbj-ord-estimate-form input,
.pbj-ord-estimate-form select,
.pbj-ord-co-field input,
.pbj-ord-co-field select,
.pbj-ord-co-field textarea,
.pbj-ord-variation select {
	width: 100%; min-width: 0; padding: .6rem .75rem; font: inherit; line-height: 1.4;
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent)); border-radius: var(--pbjfb-radius, 6px);
	background: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent)); color: var(--pbjfb-text, currentColor);
}
.pbj-ord-coupon-row input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: .04em; }
:is(.pbj-ord-coupon-row, .pbj-ord-estimate-form, .pbj-ord-co-field, .pbj-ord-variation) :is(input, select, textarea):focus {
	outline: none; border-color: var(--pbjfb-accent, #2271b1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbjfb-accent, #2271b1) 22%, transparent);
}
.pbj-ord-secondary { flex: 0 0 auto; cursor: pointer; }
.pbj-ord-secondary:not(.uk-button):not(.wp-element-button) {
	padding: .6rem 1rem; font: inherit; font-weight: 600;
	border: 1px solid var(--pbjfb-text, currentColor); border-radius: var(--pbjfb-radius, 6px);
	background: transparent; color: var(--pbjfb-text, currentColor);
}
.pbj-ord-secondary:not(.uk-button):not(.wp-element-button):hover { background: color-mix(in srgb, var(--pbjfb-text, currentColor) 7%, transparent); }
.pbj-ord-secondary[disabled] { opacity: .5; cursor: default; }
/* 'both' item (contracts §12): Buy now above, Add to cart as the secondary path. */
.pbj-ord-both-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .75rem 0 0; }
.pbj-ord-both-add .pbj-ord-both-or { margin: 0; color: var(--pbjfb-muted, inherit); font-size: .92em; }
.pbj-ord-both-add .pbj-ord-added { flex-basis: 100%; margin: 0; }
.pbj-ord-coupon-msg { margin: .5rem 0 0; color: var(--pbjfb-error, #b32d2e); font-size: .92em; }
.pbj-ord-coupon-chips { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pbj-ord-chip {
	display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .35rem .3rem .7rem;
	border-radius: 999px; font-size: .9em;
	background: color-mix(in srgb, var(--pbjfb-success, #3a9d4f) 12%, transparent);
	color: var(--pbjfb-success, #3a9d4f);
}
.pbj-ord-chip-code { font-weight: 700; letter-spacing: .04em; }
.pbj-ord-chip-x {
	width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.1em; line-height: 1;
	background: transparent; color: inherit;
}
.pbj-ord-chip-x:hover { background: color-mix(in srgb, var(--pbjfb-success, #3a9d4f) 20%, transparent); }
.pbj-ord-linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; color: inherit; }

.pbj-ord-estimate { border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); border-radius: var(--pbjfb-radius, 6px); padding: .75rem 1rem; max-width: 420px; }
.pbj-ord-estimate summary { cursor: pointer; font-weight: 600; }
.pbj-ord-estimate-form { display: grid; gap: .6rem; margin-top: .75rem; }
.pbj-ord-estimate-form label span { display: block; font-size: .9em; margin-bottom: .2rem; }
.pbj-ord-estimate-form .pbj-ord-secondary { justify-self: start; }

.pbj-ord-cart-summary {
	padding: 1.25rem; border-radius: calc(var(--pbjfb-radius, 6px) + 4px);
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent));
	background: var(--pbjfb-panel, color-mix(in srgb, currentColor 5%, transparent));
}
.pbj-ord-cart-summary-title { margin: 0 0 .5rem; font-weight: 700; font-size: 1.1em; }
.pbj-ord-totals { margin: 0; }
.pbj-ord-tot-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-tot-row[hidden] { display: none; }
.pbj-ord-tot-row dt { margin: 0; color: var(--pbjfb-text, currentColor); }
.pbj-ord-tot-row dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbj-ord-tot-sub, .pbj-ord-tot-codes { display: block; font-size: .85em; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-tot-discount dd { color: var(--pbjfb-success, #3a9d4f); }
.pbj-ord-tot-grand { border-bottom: 0; padding-top: .8rem; font-size: 1.15em; font-weight: 700; }
.pbj-ord-tot-grand dd { display: flex; flex-direction: column; align-items: flex-end; }
.pbj-ord-tot-incl { font-size: .72em; font-weight: 400; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-free-hint { margin: .75rem 0 0; font-size: .92em; color: var(--pbjfb-success, #3a9d4f); }
.pbj-ord-cart-blockers { margin: .75rem 0 0; }
.pbj-ord-cart-blockers[hidden], .pbj-ord-cart-error[hidden] { display: none; }
.pbj-ord-cart-continue { margin: 1rem 0 0; }

.pbj-ord-cart-empty {
	text-align: center; padding: 3rem 1.25rem; border: 1px dashed var(--pbjfb-border, color-mix(in srgb, currentColor 28%, transparent));
	border-radius: calc(var(--pbjfb-radius, 6px) + 4px);
}
.pbj-ord-cart-empty-icon { display: inline-flex; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); margin-bottom: .5rem; }
.pbj-ord-cart-empty-title { font-size: 1.25em; font-weight: 700; margin: 0 0 .35rem; }
.pbj-ord-cart-empty-sub { margin: 0 0 1.25rem; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
/* A navigation link, drawn as a neutral outline so the theme's filled
   button stays the only primary colour on the page. */
.pbj-ord-button-link:not(.uk-button):not(.wp-element-button) {
	display: inline-block; padding: .65rem 1.25rem; border-radius: var(--pbjfb-radius, 6px); font-weight: 600; text-decoration: none;
	border: 1px solid currentColor; color: inherit; background: transparent;
}
.pbj-ord-button-link:not(.uk-button):not(.wp-element-button):hover, .pbj-ord-button-link:not(.uk-button):not(.wp-element-button):focus { color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); }

.pbj-ord-stock { margin: .25rem 0 0; font-weight: 600; font-size: .92em; }
.pbj-ord-stock-out { color: var(--pbjfb-error, #b32d2e); }
.pbj-ord-stock-low { color: #9a6700; }
.pbj-ord-variation { margin: 0 0 .9rem; max-width: 360px; }
.pbj-ord-variation label { display: block; font-weight: 600; margin-bottom: .35rem; }

/* Checkout block (inside the checkout form, before payment). */
.pbj-ord-cart-checkout { margin-top: .5rem; }
.pbj-ord-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 1.5rem 0 1rem; }
.pbj-ord-co-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.pbj-ord-co-title { display: block; width: 100%; margin: 0 0 .75rem; padding: 0 0 .5rem; font-size: 1.15em; font-weight: 700; border-bottom: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-co-subtitle { margin: 1rem 0 .5rem; font-weight: 600; }
.pbj-ord-co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.pbj-ord-co-grid[hidden] { display: none; }
.pbj-ord-co-field { grid-column: 1 / -1; margin: 0; }
.pbj-ord-co-half { grid-column: span 1; }
.pbj-ord-co-field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95em; }
.pbj-ord-req { color: var(--pbjfb-error, #b32d2e); text-decoration: none; border: 0; }
.pbj-ord-co-check { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-weight: 600; cursor: pointer; }
.pbj-ord-co-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--pbjfb-accent, auto); }
.pbj-ord-co-rates { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); border-radius: var(--pbjfb-radius, 6px); overflow: hidden; }
.pbj-ord-co-rates li { border-top: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-co-rates li:first-child { border-top: 0; }
.pbj-ord-co-rates li[hidden] { display: none; }
.pbj-ord-co-rates label { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; cursor: pointer; }
.pbj-ord-co-rates input { accent-color: var(--pbjfb-accent, auto); }
.pbj-ord-co-rate-label { flex: 1 1 auto; }
.pbj-ord-co-rate-cost { font-weight: 600; white-space: nowrap; }
.pbj-ord-co-hint { margin: .5rem 0 0; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); font-size: .92em; }
.pbj-ord-co-hint[hidden] { display: none; }
.pbj-ord-co-hint-error { color: var(--pbjfb-error, #b32d2e); }
.pbj-ord-co-review {
	padding: 1.25rem; border-radius: calc(var(--pbjfb-radius, 6px) + 4px);
	border: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent));
	background: var(--pbjfb-panel, color-mix(in srgb, currentColor 5%, transparent));
}
.pbj-ord-co-review .pbj-ord-co-title { border-bottom: 0; padding-bottom: 0; }
.pbj-ord-cart-checkout .pbj-ord-actions .pbj-ord-submit { min-width: 220px; }
.pbj-ord-cart-checkout .pbj-ord-actions .pbj-ord-submit:not(.uk-button):not(.wp-element-button) { padding: .8rem 1.5rem; font-weight: 700; font-size: 1.05em; }

@media (min-width: 900px) {
	.pbj-ord-co { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
	.pbj-ord-co-review { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 2rem; }
}

/* Order received. */
.pbj-ord-thanks { padding: 0; }
.pbj-ord-thanks-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.pbj-ord-thanks-tick {
	flex: 0 0 auto; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: color-mix(in srgb, var(--pbjfb-success, #3a9d4f) 14%, transparent); color: var(--pbjfb-success, #3a9d4f);
}
.pbj-ord-thanks-title { margin: 0 0 .25rem; font-size: 1.5em; line-height: 1.2; }
.pbj-ord-thanks-sub { margin: 0; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-thanks-facts {
	list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px dashed var(--pbjfb-border, color-mix(in srgb, currentColor 28%, transparent)); border-radius: calc(var(--pbjfb-radius, 6px) + 4px);
}
.pbj-ord-thanks-facts li { padding: .9rem 1rem; border-left: 1px dashed var(--pbjfb-border, color-mix(in srgb, currentColor 28%, transparent)); min-width: 0; }
.pbj-ord-thanks-facts li:first-child { border-left: 0; }
.pbj-ord-thanks-facts span { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .05em; color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-thanks-facts strong { display: block; overflow-wrap: anywhere; }
.pbj-ord-thanks-h3 { margin: 1.25rem 0 .5rem; font-size: 1.1em; }
.pbj-ord-thanks-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-thanks-items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .6rem 0; border-bottom: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 20%, transparent)); }
.pbj-ord-thanks-item small { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); }
.pbj-ord-thanks-qty { color: var(--pbjfb-muted, color-mix(in srgb, currentColor 68%, transparent)); white-space: nowrap; }
.pbj-ord-thanks-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: .5rem 0 1.5rem; }
.pbj-ord-thanks-addr address { font-style: normal; line-height: 1.6; }

@media (max-width: 760px) {
	.pbj-ord-cart-foot { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.pbj-ord-cart-summary { order: -1; }
	.pbj-ord-thanks-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pbj-ord-thanks-facts li:nth-child(3) { border-left: 0; }
	.pbj-ord-thanks-facts li:nth-child(n+3) { border-top: 1px dashed var(--pbjfb-border, color-mix(in srgb, currentColor 28%, transparent)); }
	.pbj-ord-thanks-addr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.pbj-ord-co-grid { grid-template-columns: minmax(0, 1fr); }
	.pbj-ord-co-half { grid-column: 1 / -1; }
	.pbj-ord-coupon-row { max-width: none; }
	.pbj-ord-cart-checkout .pbj-ord-actions .pbj-ord-submit { width: 100%; min-width: 0; }
}

/* After a successful submit with no redirect (2.4.0): only the success
   message remains; the fields and the pay button are gone. A 'both' item's
   "Or keep shopping: Add to cart" row goes with them (Jake Q-B1; the JS
   sets [hidden] too, plugin-dev Rule 4). */
.pbj-ord-done .pbj-ord-both-add,
.pbj-ord-done .pbj-ord-form > :not(.pbj-ord-success),
.pbj-ord-done .pbj-ord-product + .pbj-ord-price { display: none !important; }
.pbj-ord-done .pbj-ord-success {
	margin-top: 0; padding: 1rem 1.25rem; font-weight: 600; outline: none;
	border-radius: var(--pbjfb-radius, 6px);
	background: color-mix(in srgb, var(--pbjfb-success, #3a9d4f) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--pbjfb-success, #3a9d4f) 35%, transparent);
}

/* =================================================================
 * Store controls follow the site's colours (2.4.0). Unthemed, every
 * store control is tinted from currentColor — the same recipe as the
 * shop (pbj-orders-shop.css) — so a dark theme gets dark fields
 * and a light theme light ones. "Use my own styling" (.pbj-ord-themed)
 * still wins through its own --pbjfb-* tokens.
 * ================================================================= */
.pbj-ord-qty-btn,
.pbj-ord-qty-input,
.pbj-ord-coupon-row input,
.pbj-ord-estimate-form input,
.pbj-ord-estimate-form select,
.pbj-ord-co-field input,
.pbj-ord-co-field select,
.pbj-ord-co-field textarea,
.pbj-ord-variation select {
	color: var(--pbjfb-text, inherit);
	background-color: var(--pbjfb-field-bg, color-mix(in srgb, currentColor 5%, transparent));
	border-color: var(--pbjfb-border, color-mix(in srgb, currentColor 22%, transparent));
}
.pbj-ord-qty-btn:hover { background-color: color-mix(in srgb, currentColor 12%, transparent); }
:is(.pbj-ord-coupon-row, .pbj-ord-estimate-form, .pbj-ord-co-field) input::placeholder,
.pbj-ord-co-field textarea::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.pbj-ord-estimate-form select,
.pbj-ord-co-field select,
.pbj-ord-variation select {
	-webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat;
}
.pbj-ord-estimate-form select option,
.pbj-ord-co-field select option,
.pbj-ord-variation select option { color: #1d2327; background: #fff; }

/* Lines without a picture keep the column tidy with a quiet tile. */
.pbj-ord-cart-thumb:empty { border-radius: var(--pbjfb-radius, 6px); background: color-mix(in srgb, currentColor 7%, transparent); }
.pbj-ord-price-was { font-weight: 400; opacity: .7; margin-right: .25rem; }
.pbj-ord-sale-badge { display: inline-block; padding: .05rem .5rem; margin-right: .35rem; border-radius: 999px; font-size: .75em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid currentColor; }
.pbj-ord-thanks-items li > span:last-child { white-space: nowrap; }

/* The "Verify you are human" answer matches the other text fields
   (same height, border, radius and padding), just narrower. */
.pbj-ord-captcha label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pbj-ord-captcha input[type="text"] {
	display: block; width: 100%; max-width: 14rem; box-sizing: border-box;
	padding: .55rem .75rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 6px;
	font: inherit; line-height: 1.4; color: inherit; background-color: color-mix(in srgb, currentColor 5%, transparent);
}

/* Line thumbnails (cart, checkout review, thank-you): the product image or
   the shop's drawn placeholder, so every row lines up. */
.pbj-ord-thumb { display: block; flex: none; overflow: hidden; box-sizing: border-box; border-radius: var(--pbjfb-radius, 6px); }
.pbj-ord-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.pbj-ord-thumb-ph {
	display: grid; place-items: center; color: color-mix(in srgb, currentColor 55%, transparent);
	background-color: color-mix(in srgb, currentColor 6%, transparent);
	background-image: linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, currentColor 14%, transparent) 46% 54%, transparent 54% 100%);
	background-size: 12px 12px; border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.pbj-ord-thumb-ph svg { width: 46%; height: 46%; opacity: .85; }
.pbj-ord-line-thumb { width: 44px; height: 44px; }
.pbj-ord-review-lines { list-style: none; margin: 0 0 .5rem; padding: 0; }
.pbj-ord-review-line {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .75rem;
	padding: .55rem 0; border-bottom: 1px solid var(--pbjfb-border, color-mix(in srgb, currentColor 14%, transparent));
}
.pbj-ord-review-name { min-width: 0; overflow-wrap: anywhere; }
.pbj-ord-review-name small { opacity: .75; }
.pbj-ord-review-qty { opacity: .7; white-space: nowrap; }
.pbj-ord-review-total { white-space: nowrap; font-weight: 600; }

/* Cart thank-you: one row per licensed line, its key and its download. */
.pbj-ord-thanks-downloads { margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-radius: calc(var(--pbjfb-radius, 6px) + 4px); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); }
.pbj-ord-thanks-downloads .pbj-ord-thanks-h3 { margin-top: 0; }
.pbj-ord-dl-list { list-style: none; margin: 0; padding: 0; }
.pbj-ord-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title button" "key button"; align-items: center; gap: .25rem 1rem; padding: .75rem 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.pbj-ord-dl:first-child { border-top: 0; padding-top: .25rem; }
.pbj-ord-dl-title { grid-area: title; font-weight: 600; }
.pbj-ord-dl-key { grid-area: key; font-size: .9em; overflow-wrap: anywhere; }
.pbj-ord-dl-key-label { opacity: .7; }
.pbj-ord-dl-key code { font-size: .95em; padding: .1rem .35rem; border-radius: 4px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; }
.pbj-ord-dl-button { grid-area: button; text-decoration: none; text-align: center; }
.pbj-ord-dl-help { margin: .5rem 0 0; font-size: .88em; opacity: .75; }
@media (max-width: 480px) {
	.pbj-ord-dl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "key" "button"; }
	.pbj-ord-dl-button { justify-self: stretch; }
}

/* One-time cart notice (e.g. a coupon that stopped being valid was removed). */
.pbj-ord-cart-notice {
	margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--pbjfb-radius, 6px);
	border-left: 3px solid currentColor; background: color-mix(in srgb, currentColor 7%, transparent);
}