/* Compare feature — checkbox on product cards, sticky tray bar, add-to-compare button. */

/* --- Compare checkbox on product cards ---------------------------- */
/* Wrapper keeps the label positioned against the image area (not the
   whole card, which would put it under the product name). Sits under
   the discount badge (top:-10; right:5) by anchoring to bottom right. */
.grid_item.product .product_img_wrap { position: relative; }

.compare-check-wrap {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	background: rgba(255,255,255,0.85);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 5px;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	user-select: none;
	cursor: pointer;
	color: #444;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.compare-check-wrap:hover {
	background: #fff;
	border-color: rgba(0,0,0,0.12);
}
.compare-check-wrap.disabled { opacity: 0.45; cursor: not-allowed; }
.compare-check-wrap label { margin: 0; cursor: inherit; }
/* Explicit checkbox sizing so the text + box centre on the same axis
   regardless of browser default. Without this the native checkbox
   reports its own intrinsic baseline and the text sits a pixel low. */
.compare-check-wrap input[type=checkbox] {
	cursor: inherit;
	margin: 0;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	vertical-align: middle;
}
.compare-check-wrap span {
	display: inline-flex;
	align-items: center;
	height: 14px;
	line-height: 14px;
}

/* --- Product-page "Add to compare" text link ----------------------
   Sits below the primary "View deal" CTA. Text-link styling (no pill,
   no border) so it visibly recedes — secondary action, not competing
   with the buy button. Plus icon swaps to a tick when in-tray, label
   flips to "Added to compare". Block-level + margin-top puts it on
   its own line so it doesn't crowd the buy button. */
.compare-add-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;     /* tighter against the View deal button — was 16px */
	margin-left: 4px;
	background: none;
	border: 0;
	padding: 4px 0;
	color: #555;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}
/* Mobile: per the user's pixel-tweak in the round-9 review — pull the
   link upward (-10px margin-top) so it sits closer to the View deal
   button, and indent 12px so the checkbox sits under the button's
   left padding edge. The button is 70% wide and the label is centered
   inside; this nudge places the checkbox+label group visually under
   the button's leading edge. */
@media (max-width: 767px) {
	.compare-add-link {
		margin-top: -10px;
		margin-left: 12px;
	}
}
.compare-add-link:hover,
.compare-add-link:focus-visible {
	color: #F68600;
	outline: none;
}
.compare-add-link-label {
	border-bottom: 1px dotted currentColor;
	padding-bottom: 1px;
}
.compare-add-link.in-tray {
	color: #1a7a4a;
}
.compare-add-link.in-tray .compare-add-link-label {
	border-bottom-color: transparent;
}
/* Faux checkbox matching the tile-level .compare-check-wrap visual,
   so the on-product compare control looks identical to the listing
   tiles. Pure CSS (no <input>); the parent button owns the click. */
.compare-add-link-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	background: #fff;
	position: relative;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}
.compare-add-link.in-tray .compare-add-link-check {
	background: #1a7a4a;
	border-color: #1a7a4a;
}
.compare-add-link.in-tray .compare-add-link-check::after {
	content: "";
	position: absolute;
	top: 1px; left: 4px;
	width: 4px; height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.compare-add-link:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- Legacy product-page button (any pages still rendering it) ----
   Rounded white pill matching the tile compare-check-wrap visual tone —
   secondary action that shouldn't compete with the primary buy button.
   Active (in-tray) flips to the brand blue so the state is obvious. */
.compare-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #d0d5db;
	color: #444;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.compare-add-btn:hover { background: #f7f7f7; border-color: #9aa0a6; color: #111; }
.compare-add-btn.in-tray { background: #0066cc; border-color: #0066cc; color: #fff; }
.compare-add-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Faux checkbox inside the compare button — mirrors the tile-level
   .compare-check appearance so users recognise it as the same control.
   Pure CSS (no <input>): state reflects the parent's .in-tray class,
   which compare.js already toggles. pointer-events:none so the whole
   button stays the single click target. */
.compare-add-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	background: #fff;
	position: relative;
	flex-shrink: 0;
	pointer-events: none;
	transition: background 0.15s, border-color 0.15s;
}
.compare-add-btn.in-tray .compare-add-check {
	background: #fff;
	border-color: #fff;
}
.compare-add-btn.in-tray .compare-add-check::after {
	content: "";
	position: absolute;
	top: 1px; left: 4px;
	width: 5px; height: 9px;
	border: solid #0066cc;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --- Sticky tray at page bottom ----------------------------------- */
#compare-tray {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
	border-top: 1px solid #e1e1e1;
	transform: translateY(110%);
	transition: transform 0.25s ease;
	padding: 10px 12px;
	will-change: transform;
}
#compare-tray.is-open { transform: translateY(0); }

.compare-tray-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1400px;
	margin: 0 auto;
}
.compare-tray-label { font-weight: 500; white-space: nowrap; font-size: 14px; }

.compare-tray-slots {
	display: flex;
	gap: 8px;
	flex: 1;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.compare-tray-slot {
	flex: 0 0 180px;
	height: 68px;
	border: 1px dashed #d0d0d0;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	position: relative;
	color: #999;
	font-size: 12px;
	background: #fafafa;
}
.compare-tray-slot.filled { border-style: solid; border-color: #c0d8ef; background: #fff; color: inherit; }
.compare-tray-slot img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 3px; flex-shrink: 0; }
/* The whole tile (image + body) is a link to the product page. Flex-fills
   the slot so it mirrors the old non-link layout, fades on hover. */
.compare-tray-slot .slot-link {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}
.compare-tray-slot .slot-link:hover { opacity: 0.65; text-decoration: none; color: inherit; }
.compare-tray-slot .slot-body { flex: 1; min-width: 0; padding-right: 26px; }
.compare-tray-slot .slot-name {
	font-size: 11px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.compare-tray-slot .slot-price { font-weight: 500; font-size: 13px; margin-top: 2px; }
/* Enlarged close — larger hit target + sits above the tile link (z-index)
   so a click on the X never triggers navigation. */
.compare-tray-slot .slot-remove {
	position: absolute;
	top: 5px; right: 5px;
	background: #fff; border: 1px solid #ccc;
	width: 26px; height: 26px;
	font-size: 20px; line-height: 1;
	border-radius: 50%;
	cursor: pointer; padding: 0;
	color: #666;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.compare-tray-slot .slot-remove:hover { background: #fee; border-color: #c44; color: #c44; transform: scale(1.06); }
.slot-placeholder { margin: auto; font-style: italic; }

.compare-tray-cta {
	background: #0066cc; color: #fff; border: 0;
	padding: 10px 18px; border-radius: 4px;
	font-weight: 500; cursor: pointer;
	white-space: nowrap;
	font-size: 14px;
}
.compare-tray-cta:hover:not(:disabled) { background: #0052a3; }
.compare-tray-cta:disabled { background: #bbb; cursor: not-allowed; }

.compare-tray-clear {
	color: #888; font-size: 13px; white-space: nowrap;
	text-decoration: underline;
}
.compare-tray-clear:hover { color: #c44; }

@media (max-width: 640px) {
	.compare-tray-label { display: none; }
	.compare-tray-slot { flex: 0 0 140px; }
}

/* Push page content up so fixed tray never covers the last row. */
body.compare-tray-active { padding-bottom: 96px; }

/* --- Compare page table ------------------------------------------- */
.compare-page .compare-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 30px;
}
.compare-page .compare-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background: #fff;
	/* table-layout: fixed makes the data columns equal width regardless of
	   content (product name length, image aspect ratio, price digits etc.).
	   Without this, the longest content in any cell stretches that column,
	   producing the uneven look reported 2026-04-26. The label col below
	   still gets a fixed width so the row labels stay narrow. */
	table-layout: fixed;
}
.compare-page .compare-table th,
.compare-page .compare-table td {
	border: 1px solid #e5e5e5;
	padding: 12px;
	vertical-align: top;
	text-align: center;
}
.compare-page .compare-table th[scope=row],
.compare-page .compare-table .compare-label-col {
	text-align: left;
	background: #f7f7f7;
	font-weight: 500;
	color: #444;
	/* Fixed width — table-layout:fixed needs explicit widths to honour
	   asymmetric column sizing. 110px fits the longest label ("Merchant",
	   "Saving") with comfortable padding; remaining width splits equally
	   across the product columns. */
	width: 110px;
	white-space: nowrap;
	font-size: 13px;
	padding: 10px 12px;
	/* Sticky first column on mobile so labels stay visible while the
	 * user scrolls right across multiple product columns. z-index keeps
	 * it above other cells; the opaque background is required or the
	 * scrolled content would show through. */
	position: sticky;
	left: 0;
	z-index: 2;
}

/* Mobile — one product column at a time, snap-scroll between them, with
   a sticky label column on the left so the user always sees what each
   row means while swiping. Previously tried to fit 2-3 columns onto
   ≤375px which made everything cramped and partially clipped. The
   snap-scroll pattern is what John Lewis / Argos / Wayfair use on
   their compare flows.

   Layout maths at 320px viewport:
     label col ~74px wide, sticky-left
     each product col = (viewport - label col - some breathing) ≈ 220px
     scroll-snap aligns the start of each product col to the right edge
     of the sticky label, so swiping reveals exactly one product. */
@media (max-width: 600px) {
	.compare-page .compare-table-wrap {
		scroll-snap-type: x mandatory;
		/* scroll-padding-left was 74px (snap stops just to the right of
		   the sticky label column). At default scrollLeft=0 the first
		   product slide rendered with the empty corner column visible
		   on its left, making the slide look offset. Change to a calc
		   that centers the first slide in the viewport on initial load:
		   start of slide should be at (viewport - slide_width) / 2.
		   With slide_width = (100vw - 74px) / 2, start = (100vw + 74) / 4
		   ≈ 25vw + 18.5px. */
		scroll-padding-left: calc(25vw + 19px);
	}
	/* Override desktop's table-layout:fixed so cell min-width below drives the
	   column sizes. With layout:fixed, min-width on tbody cells is ignored —
	   columns inherit width from the first row only — which silently broke
	   the snap-scroll pattern (columns rendered at ~60px instead of 273px).
	   border-collapse: separate (not collapse) is REQUIRED for position:sticky
	   on table cells to work — collapse silently breaks sticky in <thead>,
	   causing the corner cell to scroll with the products while body label
	   cells stay sticky (the visual jank the user reported 2026-04-27). */
	.compare-page .compare-table {
		min-width: 0;
		table-layout: auto;
		border-collapse: separate;
		border-spacing: 0;
	}
	.compare-page .compare-table th,
	.compare-page .compare-table td {
		padding: 8px 6px;
		font-size: 13px;
	}
	.compare-page .compare-table th[scope=row],
	.compare-page .compare-table .compare-label-col {
		font-size: 11px;
		padding: 8px 6px;
		white-space: normal;
		width: 74px;
		min-width: 74px;
		max-width: 74px;
		left: 0;
		position: sticky;
		z-index: 2;
		background: #f7f7f7;
	}
	/* The corner cell (empty header above the row labels) lives inside
	   <thead>. Position: sticky in <thead> + horizontal scroll is unreliable
	   across mobile browsers (Safari iOS in particular) — even with
	   border-collapse:separate the corner can scroll with the products
	   while body row labels stay sticky. Make it visibility:hidden so the
	   layout slot is preserved (column widths align between header and
	   body rows) but no grey square draws on screen. The user's reported
	   "top grey row scrolls" jank goes away. */
	.compare-page .compare-table thead .compare-label-col {
		visibility: hidden;
		background: transparent;
		border: 0;
	}
	/* Each product column is sized so 2 fit in the viewport at once
	   (label col + 2 product cols + a sliver of the next), with snap-stops
	   on each so horizontal swipes land cleanly. Was 100vw - 74px - 28px
	   (one per swipe) — at 50% the user can compare two products side-by-
	   side without scrolling for the most common case (2-product compare),
	   and 3-4 product compares still scroll cleanly.
	   Exclude the corner .compare-label-col cell — it carries scope="col"
	   for accessibility but is the row-label column and must stay at 74px. */
	.compare-page .compare-table th[scope=col]:not(.compare-label-col),
	.compare-page .compare-table tbody td {
		min-width: calc((100vw - 74px - 28px) / 2);
		max-width: calc((100vw - 74px - 28px) / 2);
		scroll-snap-align: start;
	}
	.compare-page .compare-thumb-link img {
		height: 100px;
		max-width: 130px;
	}
	.compare-page .compare-row-images td,
	.compare-page .compare-row-images th[scope="col"] { padding: 12px 8px; }

	/* The right-edge white-fade gradient (originally a "more to scroll"
	   cue) was rendering inside the scrollable content area on some
	   mobile browsers — it scrolled with the table instead of staying
	   anchored to the viewport edge. The snap-scroll already cues "more"
	   via the partial-next-card peek, so the gradient is redundant. */
	.compare-page .compare-table-wrap {
		position: relative;
	}
	.compare-page .compare-table-wrap::after {
		display: none;
	}
}
.compare-page .compare-row-images td,
.compare-page .compare-row-images th[scope="col"] { padding: 18px 12px; position: relative; }
.compare-page .compare-thumb-link { display: block; }

/* × close button — top-right of each compared product cell. Floats
   over the image area in the column header. Larger tap target than
   the existing "Remove" text link below the image. Same data-id /
   data-slug payload so compare.js's existing remove-handler picks it up. */
.compare-page .compare-remove-x {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 0;
	background: #fff;
	border: 1px solid #d0d5db;
	border-radius: 50%;
	color: #555;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.compare-page .compare-remove-x:hover {
	background: #f7f7f7;
	color: #c44;
	border-color: #9aa0a6;
}
.compare-page .compare-remove-x .lhs-icon {
	width: 14px;
	height: 14px;
	margin: 0;
}
.compare-page .compare-thumb-link img {
	width: 100%;
	max-width: 180px;
	height: 180px;
	object-fit: contain;
	background: #fff;
	margin: 0 auto 8px;
	display: block;
}
.compare-page .compare-remove-link {
	display: inline-block;
	font-size: 12px;
	color: #999;
	text-decoration: underline;
}
.compare-page .compare-remove-link:hover { color: #c44; }
.compare-page .compare-name-link { font-weight: 500; color: #0066cc; text-decoration: none; }

/* Product page merchant badge — sits under the H1 like ufurnish does.
   Logo + "From {merchant}" pill, clickable to /sale/{merchant}. */
.product_merchant_line {
	margin: 6px 0 14px;
}
.product_merchant_link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px 4px 4px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}
.product_merchant_link:hover {
	border-color: #0066cc;
	background: #f7fbff;
	color: inherit;
}
.product-merchant-logo {
	width: 54px;
	height: 54px;
	padding: 4px;
}
.product-merchant-logo.merchant-logo-text { line-height: 46px; font-size: 16px; }
.product_merchant_meta {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.product_merchant_from {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.product_merchant_name {
	font-weight: 600;
	font-size: 15px;
	color: #222;
}

/* Merchant logo — shared pattern used in compare table + product group panel. */
.merchant-logo {
	display: inline-block;
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 3px;
	vertical-align: middle;
	flex-shrink: 0;
}
.merchant-logo-text {
	font-size: 13px;
	font-weight: 700;
	color: #555;
	background: #f3f3f3;
	text-align: center;
	line-height: 32px;  /* 40 - padding + border */
	letter-spacing: 0.5px;
}
.compare-merchant-cell {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.compare-merchant-cell:hover span { text-decoration: underline; }
.compare-merchant-logo { width: 48px; height: 48px; }

.product-group-merchants .pg-merchant-logo {
	width: 36px;
	height: 36px;
	padding: 2px;
	margin-right: 4px;
}
.product-group-merchants .pg-merchant-logo.merchant-logo-text { line-height: 30px; font-size: 11px; }
.compare-page .compare-name-link:hover { text-decoration: underline; }
.compare-page .compare-price { font-weight: 600; font-size: 18px; color: #111; }
.compare-page .compare-saving { color: #c44; font-weight: 500; }
.compare-page .compare-hist .hist-down { color: #2a8a2a; font-weight: 700; }
.compare-page .compare-hist .hist-up   { color: #c44;    font-weight: 700; }
/* Match the product-page "Buy this item" visual — .buy_btn styling in
   the main stylesheet is scoped to .product_wrap so we re-style here.
   Square (no border-radius) to match the rest of the site's buttons. */
.compare-page .compare-buy-btn {
	display: inline-block;
	background-color: var(--product-buy-button-background, #D14900);
	color: var(--product-buy-button-text, #FFF);
	border: 1px solid var(--product-buy-button-background, #D14900);
	padding: 8px 14px;
	margin: 4px 0;
	text-decoration: none;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	white-space: normal;
	max-width: 100%;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.compare-page .compare-buy-btn:hover {
	background-color: var(--product-buy-button-background-hover, #333);
	border-color: var(--product-buy-button-background-hover, #333);
	color: var(--product-buy-button-text-hover, #FFF);
}
.compare-page .compare-buy-btn .fal { margin-left: 6px; }
.compare-page .compare-empty { max-width: 640px; }

/* Short compare pages (empty state or 2-product) used to leave a visible
   white gap between the "Find the best furniture deals" footer-search
   strip and the main footer. Forcing body into a flex column pushes
   footer content to the bottom of the viewport on short pages, so any
   slack shows as extra space INSIDE the compare content area (where it
   belongs) rather than between the two footers. */
body.compare_page { display: flex; flex-direction: column; min-height: 100vh; }
body.compare_page main { flex: 1 0 auto; }
body.compare_page footer { flex-shrink: 0; }
.compare-page { min-height: 360px; padding-bottom: 24px; }

/* --- Group panel on product.php ----------------------------------- */
.product-group-panel {
	border: 1px solid #d7e5f1;
	background: #f5f9fd;
	border-radius: 6px;
	padding: 12px 14px;
	margin: 10px 0 16px;
}
.product-group-summary { font-size: 14px; margin: 0 0 8px; }
.product-group-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	background: #1f8a3a;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.product-group-badge-warn { background: #d96f2b; }
.product-group-summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.product-group-compare-all {
	background: #0066cc;
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
}
.product-group-compare-all:hover { background: #0052a3; color: #fff; }

.product-group-merchants {
	list-style: none;
	padding: 0;
	margin: 0;
}
.product-group-merchants li.pg-row {
	border-top: 1px solid #e3ebf3;
	display: flex;
	align-items: center;
	gap: 10px;
}
.product-group-merchants li.pg-row:first-child { border-top: 0; }
.product-group-merchants .pg-row-main {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 2px;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}
.product-group-merchants .pg-row-main:hover { background: #ecf3fa; }
.product-group-merchants .pg-merchant { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-group-merchants .pg-price { font-weight: 600; font-size: 16px; white-space: nowrap; }
.product-group-merchants .pg-delta {
	font-size: 12px;
	padding: 1px 6px;
	border-radius: 3px;
	border: 1px solid transparent;
	white-space: nowrap;
	font-weight: 500;
}
.product-group-merchants .pg-delta-cheaper {
	color: #2a8a2a;
	background: #eef8ee;
	border-color: #c8e6c8;
}
.product-group-merchants .pg-delta-more {
	color: #8a6a2a;
	background: #fff5dd;
	border-color: #eadfb8;
}
.product-group-merchants .pg-row-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}
.product-group-merchants .pg-compare-link {
	color: #0066cc;
	font-size: 12px;
	padding: 4px 8px;
	border: 1px solid #cfdcef;
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.product-group-merchants .pg-compare-link:hover { background: #eaf3ff; color: #0066cc; }
.product-group-merchants .pg-visit-link {
	color: #0066cc;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
}
.product-group-merchants .pg-visit-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.product-group-summary-row { flex-direction: column; align-items: flex-start; }
	.product-group-merchants li.pg-row { flex-wrap: wrap; }
}

/* --- Price history chart ------------------------------------------ */
.price-history-chart { margin: 10px 0 16px; }
.price-history-chart .phc-tabs {
	display: inline-flex;
	gap: 0;
	border: 1px solid #d0d7df;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 6px;
}
.price-history-chart .phc-tab {
	background: #fff;
	border: 0;
	padding: 4px 12px;
	font-size: 12px;
	color: #555;
	cursor: pointer;
	border-right: 1px solid #d0d7df;
}
.price-history-chart .phc-tab:last-child { border-right: 0; }
.price-history-chart .phc-tab.is-active { background: #0066cc; color: #fff; }
/* Single static label variant (no tab switching) — used when only the
   14-day "Lowest price seen" pill renders. */
.price-history-chart .phc-tab[aria-disabled="true"] {
	cursor: default;
	padding: 5px 14px;
	font-weight: 500;
}
.price-history-chart .phc-chart { display: none; }
.price-history-chart .phc-chart.is-active { display: block; }

/* SVG chart — scrub-anywhere interaction. Mousemove over the chart area
   snaps a vertical crosshair + focus ring to the nearest data point by X.
   The full-chart hover rect is the pointer target; static dots are visual
   only. Crosshair cursor hints that anywhere-in-the-area is hoverable. */
.price-history-chart .phc-svg { cursor: crosshair; }
.price-history-chart .phc-hover-rect { cursor: crosshair; }
.price-history-chart .phc-crosshair {
	transition: opacity 0.08s ease;
}
.price-history-chart .phc-focus {
	filter: drop-shadow(0 0 2px rgba(0, 102, 204, 0.4));
}
.price-history-chart .phc-summary {
	margin-top: 4px;
	font-size: 12px;
	color: #666;
}

/* JS tooltip — fires immediately on mouseover (no native <title> delay).
   Positioned absolutely above the hovered data point. */
.phc-tooltip {
	position: absolute;
	transform: translate(-50%, -100%);
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s ease;
	z-index: 1000;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.phc-tooltip.is-visible { opacity: 1; }
.phc-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #111;
}

/* Watch price form */
.watch-price { font-size: 14px; }
.watch-price-toggle {
	cursor: pointer;
	display: inline-block;
	padding: 6px 0;
	color: #0066cc;
	list-style: none;
}
.watch-price-toggle::-webkit-details-marker { display: none; }
.watch-price-toggle:hover { text-decoration: underline; }

/* --- Amazon block scaffolding ------------------------------------- */
.amazon-block {
	margin: 20px 0;
	padding: 16px;
	border: 1px solid #eadfb8;
	border-radius: 6px;
	background: #fff8e7;
}
.amazon-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 12px;
}
.amazon-block-header h3,
.amazon-block-header-heading { margin: 0; font-size: 16px; font-weight: 600; color: inherit; }
.amazon-block-header-link {
	text-decoration: none;
	color: inherit;
	padding: 4px 6px;
	border-radius: 4px;
	transition: background 0.15s;
}
.amazon-block-header-link:hover {
	background: rgba(255, 153, 0, 0.08);
	color: inherit;
}
.amazon-block-disclosure {
	font-size: 11px;
	color: #8a7a3e;
	background: #fff;
	border: 1px solid #eadfb8;
	padding: 2px 8px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Hero banner — category-themed Unsplash photo with readable overlay.
   Anchor-based: the whole banner clicks through to a broad Amazon search
   for the current namespace (e.g. "bedroom furniture"). */
.amazon-block-hero {
	position: relative;
	display: block;
	height: 220px;
	margin: -18px -18px 16px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	transition: filter 0.2s;
}
.amazon-block-hero:hover {
	filter: brightness(1.05);
	color: #fff;
}
.amazon-block-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,20,20,0) 35%, rgba(20,20,20,0.65) 100%);
}
.amazon-block-hero-content {
	position: absolute;
	inset: auto 16px 14px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	color: #fff;
}
.amazon-block-hero-heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	flex: 1;
	min-width: 0;
	color: #fff;
}
.amazon-block-hero .amazon-block-disclosure {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #fff;
	background: rgba(0,0,0,0.55);
	border-color: rgba(255,255,255,0.2);
	white-space: nowrap;
}

/* Amazon logo — navy pill with "amazon" wordmark + SVG smile underneath and
   a small ".co.uk" supplement. Scaled to ~120px wide so it reads clearly on
   the hero photo; FA is trimmed on this site so the smile is an inline SVG. */
.amazon-block-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #232F3E;
	color: #fff;
	padding: 12px 22px 14px;
	border-radius: 5px;
	line-height: 1;
	box-shadow: 0 3px 8px rgba(0,0,0,0.25);
	flex-shrink: 0;
	min-width: 120px;
}
.amazon-block-logo-word {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.amazon-block-logo-smile {
	width: 82%;
	height: 10px;
	margin-top: 3px;
	display: block;
}
.amazon-block-logo-tld {
	font-style: normal;
	font-size: 11px;
	opacity: 0.8;
	margin-top: 4px;
	letter-spacing: 0.3px;
}
.amazon-block-header .amazon-block-logo {
	/* Fallback layout (no hero): sit the logo to the right of the heading,
	   slightly tighter to fit in a row with the H3. */
	margin-left: auto;
	padding: 8px 16px 10px;
	min-width: 100px;
}
.amazon-block-header .amazon-block-logo-word { font-size: 22px; }
.amazon-block-header .amazon-block-logo-tld { display: none; }

@media (max-width: 640px) {
	.amazon-block-hero { height: 180px; }
	.amazon-block-hero-heading { font-size: 18px; }
	.amazon-block-logo { padding: 9px 16px 11px; min-width: 100px; }
	.amazon-block-logo-word { font-size: 22px; }
	.amazon-block-logo-tld { display: none; }
}

.amazon-smile {
	display: inline-block;
	vertical-align: middle;
}
.amazon-block-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 640px) {
	.amazon-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.amazon-block-card {
	display: block;
	background: #fff;
	border: 1px solid #eadfb8;
	border-radius: 4px;
	padding: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s;
}
.amazon-block-card:hover { border-color: #d9b94e; transform: translateY(-1px); }
.amazon-block-img img { width: 100%; height: 140px; object-fit: contain; background: #fff; }
.amazon-block-name {
	font-size: 13px;
	line-height: 1.3;
	margin-top: 8px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 34px;
}
.amazon-block-price { font-size: 15px; font-weight: 600; margin-top: 4px; color: #111; }
.amazon-block-rating { font-size: 11px; color: #e6a600; margin-top: 2px; }
.amazon-block-note { font-size: 11px; color: #8a7a3e; margin: 10px 0 0; font-style: italic; }

/* Tile mode — image-led. Category photo fills the top of the tile,
   label + CTA stack beneath. */
.amazon-block-tile {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #eadfb8;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.amazon-block-tile:hover {
	border-color: #FF9900;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	color: inherit;
}
.amazon-block-tile-img {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: #f4efe0;
}
/* Icon fallback — only renders when a tile has no img (legacy). */
.amazon-block-tile-icon {
	font-size: 42px;
	color: #8a6a2a;
	line-height: 1;
	margin: 22px auto 8px;
	text-align: center;
}
.amazon-block-tile-body {
	padding: 10px 12px 12px;
	text-align: center;
}
.amazon-block-tile-label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: #222;
	line-height: 1.25;
}
.amazon-block-tile-cta {
	font-size: 12px;
	color: #232F3E;
	letter-spacing: 0.2px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.amazon-block-tile-cta .amazon-smile {
	width: 20px;
	height: 8px;
	display: inline-block;
}
.amazon-block-tile:hover .amazon-block-tile-cta { color: #FF9900; }

.amazon-block-footer-note {
	font-size: 11px;
	color: #8a7a3e;
	margin: 12px 0 0;
	font-style: italic;
	text-align: center;
}

/* Flash toast */
.compare-flash {
	position: fixed;
	bottom: 120px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: rgba(0,0,0,0.85);
	color: #fff;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
	z-index: 1001;
}
.compare-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }