.pc-campaign {
	--pc-accent: #b8232f;
	--pc-accent-text: #fff;
	--pc-ink: #1a1a1a;
	--pc-muted: #6b6b6b;
	--pc-surface: #f7f4ef;
	--pc-columns: 4;
	--pc-col-gap: 24px;
	--pc-row-gap: 32px;

	margin: 1.5em 0;
}

/* Grid ---------------------------------------------------------------
   Themes lay WooCommerce loops out with floats and percentage widths,
   which ignores any column setting made in the page builder. The grid
   below takes that job over so the widget controls always win. */
.pc-campaign .pc-grid ul.products {
	display: grid;
	grid-template-columns: repeat(var(--pc-columns), minmax(0, 1fr));
	column-gap: var(--pc-col-gap);
	row-gap: var(--pc-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-campaign .pc-grid ul.products::before,
.pc-campaign .pc-grid ul.products::after {
	display: none;
}

.pc-campaign .pc-grid ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.pc-campaign .pc-grid ul.products li.product > a {
	display: block;
}

.pc-campaign .pc-grid ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 .9em;
	transition: transform .35s ease;
}

.pc-campaign .pc-grid ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 .35em;
	font-size: 1rem;
	line-height: 1.35;
}

.pc-campaign .pc-grid ul.products li.product .price {
	display: block;
	margin: 0 0 .6em;
}

/* Push the button to the bottom so cards in a row line up. */
.pc-campaign .pc-grid ul.products li.product .button {
	margin-top: auto;
	/* inherit, not flex-start: align-self on the child would otherwise beat
	   the alignment control's align-items on the card. */
	align-self: inherit;
}

/* Element toggles. remove_action() handles stock WooCommerce; these cover
   themes that call the loop template functions directly (Astra does). */
.pc-hide-button .pc-grid ul.products li.product .button,
.pc-hide-image .pc-grid ul.products li.product img,
.pc-hide-image .pc-grid ul.products li.product .astra-shop-thumbnail-wrap,
.pc-hide-title .pc-grid ul.products li.product .woocommerce-loop-product__title,
.pc-hide-price .pc-grid ul.products li.product .price,
.pc-hide-rating .pc-grid ul.products li.product .star-rating,
.pc-hide-rating .pc-grid ul.products li.product .woocommerce-product-rating {
	display: none !important;
}

.pc-campaign .pc-grid ul.products li.product .added_to_cart {
	margin-top: .5em;
	font-size: .85em;
}

/* Campaign offer -----------------------------------------------------
   Sits under the product's own price, which is left untouched. */
.pc-offer {
	display: block;
	margin-top: .45em;
	line-height: 1.4;
}

/* Tag on its own line, price underneath — reads cleanly in a narrow card.
   The inline variant is available per widget. */
.pc-offer__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3em;
}

.pc-offer-inline .pc-offer__head {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .45em;
}

.pc-offer__tag {
	display: inline-block;
	padding: .18em .5em;
	border-radius: 3px;
	background: var(--pc-offer-bg, #1f7a4d);
	color: var(--pc-offer-color, #fff);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pc-offer__price {
	font-size: .92em;
	color: var(--pc-offer-text-color, #1a1a1a);
}

/* Cards wrap their content in a link, so the label would otherwise inherit
   the theme's link colour. */
.pc-offer__label,
ul.products li.product a .pc-offer__label {
	color: var(--pc-offer-text-color, #1a1a1a);
}

/* In a product card the offer sits between the category and the title. */
.pc-campaign .pc-offer,
ul.products li.product .pc-offer {
	margin: 0 0 .5em;
}

/* The price line must never break across two lines. nowrap alone is not
   enough — the markup is nested (label + strong > span.amount > bdi) and
   themes style those, so the whole chain is forced inline. */
.pc-offer__price,
.pc-offer__label,
.pc-offer__price strong,
.pc-offer__price .woocommerce-Price-amount,
.pc-offer__price .amount,
.pc-offer__price bdi {
	display: inline !important;
	white-space: nowrap;
}

.pc-offer__price strong {
	font-weight: 700;
	color: var(--pc-offer-price-color, #1a1a1a);
}

.pc-offer__price .amount {
	color: inherit;
}

.pc-offer__meta {
	display: block;
	margin-top: .15em;
	color: var(--pc-muted);
	font-size: .78em;
}

.pc-badge {
	display: inline-block;
	margin-left: .4em;
	padding: .15em .5em;
	border-radius: 3px;
	background: var(--pc-accent);
	color: var(--pc-accent-text);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.pc-hide-badge .pc-badge,
.pc-hide-badge .pc-flash,
.pc-hide-offer .pc-offer {
	display: none;
}

/* Third-party product labels (Empire Product Labels and similar). Hiding is
   the belt to the hook-removal braces, since some label plugins also print
   from the thumbnail template. */
.pc-hide-label-sale .wle-sale-label,
.pc-hide-label-new .wle-new-release-label {
	display: none !important;
}

.pc-hide-label-sale.pc-hide-label-new .wle-product-labels {
	display: none !important;
}

.pc-flash {
	position: absolute;
	top: var(--pc-flash-top, 8px);
	left: var(--pc-flash-side, 8px);
	z-index: 20;
	padding: .3em .55em;
	border-radius: 3px;
	background: var(--pc-accent);
	color: var(--pc-accent-text);
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.pc-flash-right .pc-flash {
	left: auto;
	right: var(--pc-flash-side, 8px);
}

.pc-product-note {
	margin: .75em 0;
	padding: .6em .8em;
	border-left: 3px solid var(--pc-accent);
	background: var(--pc-surface);
	font-size: .92em;
	color: var(--pc-ink);
}

.pc-product-note--active {
	border-left-color: #1f7a4d;
}

.pc-cart-badge {
	display: inline-block;
	margin-left: .5em;
	padding: .1em .45em;
	border-radius: 3px;
	background: #e8f6ee;
	color: #135e3b;
	font-size: .75em;
	font-weight: 600;
	white-space: nowrap;
}

/* Mini cart ----------------------------------------------------------- */
.pc-mini-discount,
.pc-mini-after {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: .25em 0 0;
	font-size: .92em;
}

.pc-mini-discount {
	color: #1f7a4d;
	font-weight: 600;
}

.pc-mini-after {
	padding-top: .4em;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.pc-mini-discount .amount,
.pc-mini-after .amount {
	color: inherit;
}

/* Campaign header ---------------------------------------------------- */
.pc-campaign__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 1.25em;
	padding: 14px 18px;
	border-radius: 6px;
	background: var(--pc-surface);
}

.pc-campaign__code-label {
	display: block;
	font-size: .72em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pc-muted);
}

.pc-campaign__code-value {
	font-family: Menlo, Consolas, monospace;
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--pc-ink);
}

.pc-campaign__status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: .85em;
}

.pc-campaign__saved {
	color: #1f7a4d;
	font-weight: 600;
}

.pc-campaign__auto {
	color: var(--pc-muted);
}

.pc-campaign__until {
	color: var(--pc-muted);
	font-size: .92em;
}

.pc-add-all {
	margin-top: 1.5em;
	text-align: center;
}

.pc-expired {
	padding: .6em .8em;
	background: #f6f6f6;
	color: var(--pc-muted);
	border-radius: 4px;
}

.pc-notice {
	padding: .75em 1em;
	border: 1px dashed #c9c9c9;
	color: var(--pc-muted);
	border-radius: 4px;
}

/* Scan confirmation bar ---------------------------------------------- */
.pc-scan-banner {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 14px;
	width: calc(100% - 32px);
	max-width: 560px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #14301f;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	transform: translateX(-50%);
	font-size: .92rem;
	line-height: 1.4;
}

.pc-scan-banner strong {
	font-family: Menlo, Consolas, monospace;
	letter-spacing: .04em;
}

.pc-scan-banner__close {
	margin-left: auto;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}

.pc-scan-banner__close:hover {
	opacity: 1;
}

@media (max-width: 600px) {
	.pc-campaign__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.pc-campaign__status {
		align-items: flex-start;
	}
}

/* Diagnostics panel (?pc_debug=1, shop managers only) ------------------ */
.pc-debug {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 100000;
	max-width: 520px;
	max-height: 60vh;
	overflow: auto;
	padding: 12px 14px;
	border-radius: 8px;
	background: #14181f;
	color: #e6e6e6;
	font: 12px/1.45 Menlo, Consolas, monospace;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.pc-debug table {
	width: 100%;
	margin: 8px 0;
	border-collapse: collapse;
}

.pc-debug th,
.pc-debug td {
	padding: 3px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.pc-debug th {
	color: #9fb3c8;
	white-space: nowrap;
}

.pc-debug p {
	margin: 6px 0 0;
	color: #9fb3c8;
}