/* ASP Product Promotions - front-end offer block.
   Class names are namespaced (asp-pp) so they never collide with the
   existing compatible-parts snippet. */

.asp-pp-offer {
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	overflow: hidden;
	margin: 0 0 20px;
	background: #fff;
}

.asp-pp-offer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: #edf3f8;
	padding: 14px 16px;
}

.asp-pp-offer__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.asp-pp-offer__label {
	color: #1c5d99;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.asp-pp-offer__headline {
	font-weight: 700;
	font-size: 18px;
	font-family: Georgia, "Times New Roman", serif;
	color: #000;
}

.asp-pp-offer__toggle {
	flex: 0 0 auto;
	border: 1px solid #cfd4da;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #1d2327;
}
.asp-pp-offer__toggle:hover { background: #f6f9fb; }

.asp-pp-offer.is-collapsed .asp-pp-offer__body { display: none; }

.asp-pp-offer__support {
	margin: 0;
	padding: 12px 16px 0;
	color: #5d6c76;
	font-size: 14px;
}

.asp-pp-offer__list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0;
}

/* Rows */
.asp-pp-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border-top: 1px solid #eef1f4;
}
.asp-pp-row:first-child { border-top: 0; }

.asp-pp-row__thumb img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.asp-pp-row__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.asp-pp-row__name {
	font-weight: 700;
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
.asp-pp-row__name:hover { text-decoration: underline; }

.asp-pp-row__desc {
	color: #7a8290;
	font-size: 13px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.asp-pp-row__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.asp-pp-row__price { font-weight: 700; font-size: 13px; }
.asp-pp-row__price del { font-weight: 400; opacity: .7; margin-right: 4px; }
.asp-pp-row__link { font-size: 13px; text-decoration: underline; }

.asp-pp-row__oos {
	display: inline-block;
	align-self: flex-start;
	margin-top: 6px;
	font-size: 12px;
	color: #7a8290;
	background: #f1f3f5;
	border: 1px solid #e3e6ea;
	border-radius: 3px;
	padding: 3px 8px;
}

.asp-pp-row__qtywrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
}

.asp-pp-qty { display: flex; align-items: center; gap: 6px; }
.asp-pp-qty button {
	width: 32px;
	height: 32px;
	border: 1px solid #cfd4da;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--global-palette2, #1f3a5f);
	padding: 0;
}
.asp-pp-qty button:hover { background: #edf7fa; }
.asp-pp-qty button:disabled { opacity: .4; cursor: not-allowed; }
.asp-pp-qty.is-disabled { opacity: .45; }

.asp-pp-qty__input {
	width: 46px;
	height: 32px;
	text-align: center;
	border: 1px solid #cfd4da;
	border-radius: 4px;
	font-weight: 600;
	-moz-appearance: textfield;
}
.asp-pp-qty__input::-webkit-outer-spin-button,
.asp-pp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.asp-pp-row__add {
	border: 1px solid currentColor;
	background: var(--global-palette2, #1f3a5f);
	color: #fff;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
	width: 100%;
}
.asp-pp-row__add:disabled { background: #6c7a86; cursor: default; }

.asp-pp-offer__footer {
	display: flex;
	justify-content: flex-end;
	padding: 12px 16px;
	border-top: 1px solid #eef1f4;
}
.asp-pp-offer__shopall {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	color: #1c5d99;
}

/* "On Sale" label beside the price on a discounted product page. Deliberately
   mirrors the site's "inc GST" badge sitting next to it, so the two read as a
   matched pair: same size, fill, padding and radius as the .woocommerce-price-suffix
   rule in the "GST pricing display" snippet. Keep the two in step if that changes.

   No margin: the price element is a flex row with its own 10px gap, so a margin
   here would stack on top of it and push this pill out of line with the others.
   Appended inside the price element, so it must not inherit the price's size or
   any strike-through from an adjacent <del>. */
.asp-pp-price-label {
	display: inline-block;
	vertical-align: baseline;
	/* Collapse the wrapper's own text strut, which is inherited from the price's
	   large font, so the wrapper hugs the pill and the flex row centres the pill
	   itself rather than a taller invisible box. */
	font-size: 0;
	line-height: 0;
}

.asp-pp-price-label__text {
	display: inline-block;
	padding: 2px 14px;
	border-radius: 28px;
	background: #134561;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

/* Category page notice */
.asp-pp-cat-notice {
	border: 1px solid #cfe3d6;
	background: #eef8f1;
	color: #0a6b3b;
	border-radius: 6px;
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 14px;
}

/* Shop and category tiles, narrow screens.

   A promoted tile shows "was / now" instead of a single price, which makes the
   price row much wider. The site's "GST pricing display" snippet sets
   `display:flex` on .wp-block-kadence-wootemplate-blocks-price, and that class
   is on the loop tiles as well as the single product, with no flex-wrap — so
   the "inc GST" pill is pushed out of the tile and clipped. Let it wrap. */
@media (max-width: 767px) {
	ul.products li.product .price.kwt-price-loop {
		flex-wrap: wrap;
	}

	/* A pre-order product that is also promoted gets two badges in the same
	   corner of the thumbnail, and they overlap. On a tile this narrow only one
	   fits, and "out of stock, pre-order now" is the more important of the two —
	   the discount is still obvious from the struck-through price below. */
	ul.products li.product.onbackorder .onsale {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Give the label its own row under the price instead of squeezing it in
	   beside the GST badge, where it wrapped to three lines.

	   The price element is a non-wrapping flex row, so both halves are needed:
	   let it wrap, then make the label a full-width flex item so it lands on a
	   line of its own. The parent's own 10px gap spaces the new row. !important
	   matches how the site's "GST pricing display" snippet already overrides
	   this element, whose theme styles we cannot outrank reliably.

	   Both rules sit behind :has() so they apply together or not at all: a
	   browser without :has() support drops both and keeps the previous
	   behaviour, rather than shrinking the label inside a row that never wraps. */
	.price:has(> .asp-pp-price-label) {
		flex-wrap: wrap !important;
	}

	.price:has(> .asp-pp-price-label) > .asp-pp-price-label {
		flex-basis: 100%;
	}

	/* Allow a break if the wording is ever long enough to overflow its own row. */
	.asp-pp-price-label__text {
		white-space: normal;
	}

	.asp-pp-row { flex-wrap: wrap; }
	.asp-pp-row__qtywrap { width: 100%; align-items: flex-start; padding-top: 4px; }
	.asp-pp-row__add { width: auto; }
}