/*
 * Fresh & Save — Price Comparison
 * Brand orange #E76727 on the site's Pluto family, already loaded by Divi.
 */

.fnspc {
	--fnspc-orange: #e76727;
	--fnspc-orange-dark: #c9531a;
	--fnspc-orange-tint: rgba(231, 103, 39, 0.08);
	--fnspc-ink: #1c1c1c;
	--fnspc-ink-soft: #5a5f63;
	--fnspc-ink-muted: #8b9195;
	--fnspc-surface: #ffffff;
	--fnspc-page: #f6f7f8;
	--fnspc-line: rgba(0, 0, 0, 0.07);
	--fnspc-line-strong: rgba(0, 0, 0, 0.12);
	/* Same green the in-store screens use for savings. */
	--fnspc-green: #16a34a;
	--fnspc-radius: 14px;
	--fnspc-radius-lg: 22px;
	--fnspc-shadow: 0 1px 3px rgba(20, 24, 28, 0.06), 0 1px 2px rgba(20, 24, 28, 0.04);
	--fnspc-shadow-lg: 0 18px 34px rgba(20, 24, 28, 0.09), 0 6px 12px rgba(20, 24, 28, 0.05);
	--fnspc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fnspc-display: 'Pluto-black', 'Pluto-medium', Helvetica, Arial, sans-serif;
	--fnspc-body: 'Pluto-regular', Helvetica, Arial, sans-serif;
	--fnspc-medium: 'Pluto-medium', Helvetica, Arial, sans-serif;

	max-width: 1180px;
	margin: 0 auto;
	padding: 0 22px 72px;
	font-family: var(--fnspc-body);
	color: var(--fnspc-ink);
	-webkit-font-smoothing: antialiased;
}

.fnspc *,
.fnspc *::before,
.fnspc *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Intro */

.fnspc__intro {
	padding: 54px 0 34px;
	text-align: center;
}

/* Divi prints the page title above the content; the plugin renders its own,
   so hide the theme's copy rather than show "Price Comparison" twice. */
.page .entry-title.main_title {
	display: none;
}

.fnspc__title {
	margin: 0;
	font-family: var(--fnspc-display);
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--fnspc-ink);
}

.fnspc__store {
	margin: 10px 0 0;
	font-family: var(--fnspc-display);
	font-size: clamp(24px, 3.2vw, 36px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fnspc-orange);
}

.fnspc__lede {
	max-width: 620px;
	margin: 18px auto 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--fnspc-ink-soft);
}

/* --------------------------------------------------------------- Picker */

.fnspc__picker {
	margin: 0 0 34px;
	text-align: center;
}

.fnspc__picker-label {
	margin: 0 0 12px;
	font-family: var(--fnspc-medium);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fnspc-ink-muted);
}

.fnspc__picker-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	/* Narrower than the page so the stores break into balanced rows rather than
	   leaving a single orphan pill on the last line. */
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.fnspc__picker-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fnspc__pill {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--fnspc-line-strong);
	border-radius: 999px;
	background: var(--fnspc-surface);
	font-family: var(--fnspc-medium);
	font-size: 15px;
	line-height: 1.2;
	color: var(--fnspc-ink-soft);
	text-decoration: none;
	transition: color 200ms var(--fnspc-ease), border-color 200ms var(--fnspc-ease),
		background-color 200ms var(--fnspc-ease), transform 200ms var(--fnspc-ease);
}

.fnspc__pill:hover,
.fnspc__pill:focus-visible {
	color: var(--fnspc-orange-dark);
	border-color: var(--fnspc-orange);
	background: var(--fnspc-orange-tint);
	transform: translateY(-1px);
	text-decoration: none;
}

.fnspc__pill--current,
.fnspc__pill--current:hover,
.fnspc__pill--current:focus-visible {
	background: var(--fnspc-orange);
	border-color: var(--fnspc-orange);
	color: #fff;
	box-shadow: 0 4px 12px rgba(231, 103, 39, 0.3);
}

/* ---------------------------------------------- Basket totals & savings */

/*
 * Mirrors the in-store screens: a cream basket-total band, then one green
 * savings tile per competitor, both laid out on the same four columns as the
 * product tables so each figure sits under its own retailer.
 */
.fnspc__summary {
	margin: 0 0 48px;
	border: 1px solid var(--fnspc-line);
	border-radius: var(--fnspc-radius);
	background: var(--fnspc-surface);
	box-shadow: var(--fnspc-shadow);
	overflow: hidden;
}

.fnspc__totals,
.fnspc__savings {
	display: grid;
	grid-template-columns: 40% 20% 20% 20%;
	align-items: center;
}

/* Align the three figures on their shared text baseline, not their box edges. */
.fnspc__totals {
	align-items: baseline;
}

.fnspc__totals {
	padding: 16px 18px;
	border-bottom: 2px solid var(--fnspc-line-strong);
	background: #fff5ec;
}

.fnspc__totals-label {
	margin: 0;
	font-family: var(--fnspc-display);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fnspc-ink);
}

/*
 * Flex rather than a plain block: the hidden mobile label leaves whitespace
 * text nodes behind, which as inline content produce stray line boxes and knock
 * the three totals off a shared baseline. A flex container ignores them.
 */
.fnspc__totals-value {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	margin: 0;
	padding-left: 12px;
	font-family: var(--fnspc-display);
	font-size: 24px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--fnspc-ink);
	text-align: right;
}

.fnspc__totals-value--ours {
	color: var(--fnspc-green);
}

.fnspc__savings {
	padding: 18px;
	row-gap: 10px;
}

.fnspc__savings-title {
	margin: 0;
	font-family: var(--fnspc-display);
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fnspc-green);
}

.fnspc__saving-tile {
	margin-left: 10px;
	padding: 10px 14px;
	border-radius: var(--fnspc-radius);
	background: var(--fnspc-green);
	box-shadow: 0 4px 12px rgba(47, 143, 78, 0.28);
	color: #fff;
	text-align: right;
}

.fnspc__saving-tile--none {
	background: var(--fnspc-ink-muted);
	box-shadow: none;
}

.fnspc__saving-label {
	margin: 0 0 2px;
	font-family: var(--fnspc-medium);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.fnspc__saving-amount,
.fnspc__saving-percent {
	margin: 0;
	font-family: var(--fnspc-display);
	font-size: 24px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.fnspc__summary-meta {
	margin: 0;
	padding: 0 18px 16px;
	font-size: 12.5px;
	color: var(--fnspc-ink-muted);
}

/* ----------------------------------------------------- Featured product */

/*
 * Only rendered when a social link named a product. It is a signpost, not a
 * replacement for the comparison — the full list still follows underneath.
 */
.fnspc__featured {
	/* Tight to the basket below it: the card is one line's worth of the same saving. */
	margin: 0 0 14px;
	/* Landing from a #featured social link — clear of the viewport's top edge. */
	scroll-margin-top: 14px;
	padding: 22px 26px 24px;
	border: 1px solid var(--fnspc-line-strong);
	border-top: 4px solid var(--fnspc-orange);
	border-radius: var(--fnspc-radius-lg);
	background: var(--fnspc-surface);
	box-shadow: var(--fnspc-shadow-lg);
	text-align: center;
}

.fnspc__featured-eyebrow {
	margin: 0 0 6px;
	font-family: var(--fnspc-medium);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fnspc-ink-muted);
}

.fnspc__featured-name {
	margin: 0 0 18px;
	font-family: var(--fnspc-display);
	font-size: 27px;
	line-height: 1.15;
	color: var(--fnspc-ink);
}

.fnspc__featured-unit {
	display: block;
	margin-top: 5px;
	font-family: var(--fnspc-body);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fnspc-ink-muted);
}

.fnspc__featured-prices {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

.fnspc__featured-price {
	min-width: 132px;
	padding: 12px 18px;
	border-radius: var(--fnspc-radius);
	background: var(--fnspc-page);
}

.fnspc__featured-price--ours {
	background: var(--fnspc-orange-tint);
}

.fnspc__featured-label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--fnspc-medium);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fnspc-ink-muted);
}

.fnspc__featured-amount {
	display: block;
	font-family: var(--fnspc-display);
	font-size: 25px;
	line-height: 1.1;
	color: var(--fnspc-ink-soft);
}

.fnspc__featured-price--ours .fnspc__featured-amount {
	color: var(--fnspc-orange);
}

.fnspc__featured-saving {
	margin: 16px 0 0;
	font-family: var(--fnspc-display);
	font-size: 19px;
	color: var(--fnspc-green);
}

.fnspc__featured-jump {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--fnspc-medium);
	font-size: 13px;
	color: var(--fnspc-ink-muted);
	text-decoration: underline;
}

/* The same line, marked where it sits in the list the visitor scrolls to. */
.fnspc__table tbody tr.fnspc__row--featured {
	scroll-margin-top: 14px;
}

.fnspc__table tbody tr.fnspc__row--featured th,
.fnspc__table tbody tr.fnspc__row--featured td {
	background: rgba(231, 103, 39, 0.09);
	box-shadow: inset 0 1px 0 var(--fnspc-orange), inset 0 -1px 0 var(--fnspc-orange);
}

/* --------------------------------------------------------- Product list */

/*
 * One continuous list, matching the in-store screens. There are no department
 * headings — the order carries the grouping, so the eye runs straight down the
 * savings rather than stopping at a title every few lines.
 */
.fnspc__lines {
	margin: 0 0 38px;
}

.fnspc__table-wrap {
	border: 1px solid var(--fnspc-line);
	border-radius: var(--fnspc-radius);
	background: var(--fnspc-surface);
	box-shadow: var(--fnspc-shadow);
	overflow: hidden;
}

.fnspc__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.fnspc__table thead th {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid var(--fnspc-line-strong);
	background: #fbfbfc;
	font-family: var(--fnspc-medium);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fnspc-ink-muted);
	text-align: right;
}

.fnspc__table thead .fnspc__col-product {
	text-align: left;
	width: 40%;
}

.fnspc__table tbody tr {
	transition: background-color 150ms var(--fnspc-ease);
}

.fnspc__table tbody tr:hover {
	background: var(--fnspc-orange-tint);
}

.fnspc__table tbody tr + tr th,
.fnspc__table tbody tr + tr td {
	border-top: 1px solid var(--fnspc-line);
}

.fnspc__product {
	padding: 14px 18px;
	border: 0;
	font-family: var(--fnspc-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--fnspc-ink);
	text-align: left;
}

.fnspc__product-name {
	display: block;
}

.fnspc__unit {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--fnspc-ink-muted);
}

.fnspc__price {
	padding: 14px 18px;
	border: 0;
	font-family: var(--fnspc-medium);
	font-size: 16px;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	color: var(--fnspc-ink-soft);
	text-align: right;
	white-space: nowrap;
}

.fnspc__price--ours {
	color: var(--fnspc-ink);
	background: rgba(231, 103, 39, 0.04);
}

.fnspc__price--best .fnspc__amount {
	color: var(--fnspc-green);
	font-family: var(--fnspc-display);
}

/*
 * The cheapest price in a row is GREEN, in every column including ours.
 *
 * This used to override our column to brand orange, which broke the one thing the
 * colour is for: green means "this is the cheapest here". Painting our own cheapest
 * price a different colour from a competitor's made it read as column branding, so
 * the row where Fresh & Save wins got no more emphasis than the row where it does
 * not. The faint orange column tint below still marks whose column it is — that is
 * identity, and it is a separate job from the cheapest signal.
 */

.fnspc__price--none .fnspc__amount {
	color: var(--fnspc-ink-muted);
}


.fnspc__cell-label {
	display: none;
}

/* ------------------------------------------------------------- Footnote */

.fnspc__footnote {
	margin-top: 6px;
	padding-top: 22px;
	border-top: 1px solid var(--fnspc-line);
	text-align: center;
}

.fnspc__updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(47, 143, 78, 0.09);
	font-family: var(--fnspc-medium);
	font-size: 13px;
	color: #24713e;
}

.fnspc__updated-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fnspc-green);
}

.fnspc__disclaimer {
	max-width: 720px;
	margin: 14px auto 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--fnspc-ink-muted);
}

/* ---------------------------------------------------------------- Terms */

/*
 * Ben supplied these as an orange artwork panel; this is the same panel built
 * from real text so it reflows on a phone and can be read by a screen reader.
 */
.fnspc__terms {
	max-width: 860px;
	margin: 26px auto 0;
	padding: 22px 26px 24px;
	border-radius: var(--fnspc-radius-lg);
	background: var(--fnspc-orange);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 0 0 5px var(--fnspc-orange);
	text-align: left;
	color: #ffffff;
}

.fnspc__terms-title {
	margin: 0 0 12px;
	font-family: var(--fnspc-display);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #ffffff;
}

.fnspc__terms-list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
	font-family: var(--fnspc-medium);
	font-size: 13.5px;
	line-height: 1.55;
}

.fnspc__terms-list li {
	margin: 0 0 6px;
}

.fnspc__terms-list li:last-child {
	margin-bottom: 0;
}

.fnspc__sample-note {
	margin: 12px 0 0;
	font-family: var(--fnspc-medium);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fnspc-ink-muted);
}

/*
 * Honeypot. Kept out of the accessibility tree and off-screen rather than
 * display:none, so a DOM walker still sees it but no visitor ever does.
 */
.fnspc__index-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------ Responsive */

/*
 * Desktop only. The phone layout stacks (see the 780px block) and reads well as
 * it is, so none of this may leak into it.
 *
 * Two things were wrong up here. The three basket totals were bare figures with
 * no retailer against them, leaving you to infer which was which from the green
 * tiles below. And those tiles carry 14px of their own padding, so their digits
 * sat inset from the column while the totals sat flush to it — near enough to
 * look like a mistake, far enough not to read as a column.
 *
 * So: name each retailer above its own total, and pull both rows' digits onto
 * one shared right edge.
 */
@media (min-width: 781px) {
	.fnspc__totals-value {
		flex-direction: column;
		align-items: flex-end;
		row-gap: 4px;
		/* Matches the tile's padding-right, so digits share a right edge. */
		padding-right: 14px;
	}

	.fnspc__totals-value .fnspc__cell-label {
		display: block;
		font-family: var(--fnspc-medium);
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--fnspc-ink-muted);
	}

	.fnspc__totals-value--ours .fnspc__cell-label {
		color: var(--fnspc-green);
	}

	/*
	 * Sized to its content rather than filling the column: a full-bleed slab
	 * made the Woolworths tile read as heavier than the Coles one next to it.
	 * Anchored to the column's end, so it still hangs under its own total.
	 */
	.fnspc__saving-tile {
		justify-self: end;
		width: 90%;
		margin-left: 0;
	}
}

@media (max-width: 1024px) {
	.fnspc__totals,
	.fnspc__savings {
		grid-template-columns: 34% 22% 22% 22%;
	}

	.fnspc__saving-amount,
	.fnspc__saving-percent,
	.fnspc__totals-value {
		font-size: 20px;
	}
}

@media (max-width: 780px) {
	.fnspc {
		padding: 0 16px 56px;
	}

	.fnspc__featured {
		padding: 18px 16px 20px;
	}

	.fnspc__featured-name {
		font-size: 22px;
	}

	/* Three price boxes won't sit side by side on a phone; two up reads better. */
	.fnspc__featured-price {
		flex: 1 1 40%;
		min-width: 0;
	}

	.fnspc__featured-price--ours {
		flex-basis: 100%;
	}

	.fnspc__terms {
		padding: 18px 18px 20px;
	}

	.fnspc__terms-title {
		font-size: 19px;
	}

	.fnspc__terms-list {
		font-size: 13px;
	}

	.fnspc__intro {
		padding: 34px 0 24px;
	}

	/* The four-column alignment can't survive a phone; stack instead. */
	.fnspc__totals,
	.fnspc__savings {
		display: block;
		padding: 14px 16px;
	}

	.fnspc__totals-label {
		margin-bottom: 8px;
	}

	.fnspc__totals-value {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		font-size: 21px;
		text-align: right;
	}

	.fnspc__totals-value .fnspc__cell-label {
		display: inline;
		font-family: var(--fnspc-medium);
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--fnspc-ink-muted);
	}

	.fnspc__totals-value--ours .fnspc__cell-label {
		color: var(--fnspc-green);
	}

	.fnspc__savings-title {
		margin-bottom: 10px;
	}

	.fnspc__savings-spacer {
		display: none;
	}

	/*
	 * "vs Woolworths" plus both figures won't fit on one phone-width line, so
	 * the label takes its own row and the two figures sit together beneath it.
	 */
	.fnspc__saving-tile {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-end;
		column-gap: 14px;
		margin: 0 0 8px;
		padding: 10px 14px;
	}

	.fnspc__saving-label {
		flex: 1 0 100%;
		margin: 0 0 3px;
		text-align: left;
	}

	.fnspc__saving-amount,
	.fnspc__saving-percent {
		font-size: 21px;
	}

	/* Tables become one card per product. */
	.fnspc__table-wrap {
		border: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	.fnspc__table,
	.fnspc__table tbody,
	.fnspc__table tr,
	.fnspc__table th,
	.fnspc__table td {
		display: block;
		width: auto;
	}

	.fnspc__table thead {
		position: absolute;
		left: -9999px;
	}

	.fnspc__table tbody tr {
		margin-bottom: 10px;
		border: 1px solid var(--fnspc-line);
		border-radius: var(--fnspc-radius);
		background: var(--fnspc-surface);
		box-shadow: var(--fnspc-shadow);
		overflow: hidden;
	}

	.fnspc__table tbody tr + tr th,
	.fnspc__table tbody tr + tr td {
		border-top: 0;
	}

	.fnspc__product {
		padding: 13px 16px 11px;
		border-bottom: 1px solid var(--fnspc-line);
		font-family: var(--fnspc-medium);
	}

	/* Needs to out-specify the `.fnspc__table td { display: block }` rule above. */
	.fnspc__table td.fnspc__price {
		display: flex;
		align-items: baseline;
		justify-content: flex-end;
		gap: 10px;
		padding: 9px 16px;
		text-align: right;
	}

	.fnspc__price .fnspc__cell-label {
		margin-right: auto;
	}

	.fnspc__price + .fnspc__price {
		border-top: 1px solid var(--fnspc-line);
	}

	.fnspc__cell-label {
		display: inline;
		font-family: var(--fnspc-medium);
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--fnspc-ink-muted);
	}

	.fnspc__price--ours .fnspc__cell-label {
		color: var(--fnspc-orange);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fnspc *,
	.fnspc *::before,
	.fnspc *::after {
		transition: none !important;
		animation: none !important;
	}
}