/* Where to buy: tyre page band + hero button, size-search price chips, and the
   panel (a right-hand sheet on wide screens, a bottom sheet on phones). */
:root {
	--buy-ink: #10232d;
	--buy-ink-2: #3c5260;
	--buy-line: #d3dde2;
	--buy-mist: #f1f7fa;
	--buy-accent: #0db1e7;
	--buy-accent-dark: #007b9d;
	--buy-warn: #9a5c00;
}
#tr-buy [hidden], [data-buy-open][hidden]:not(.tyd-buybtn), .buy-band[hidden] { display: none !important; }
html.buy-open { overflow: hidden; }
.buy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero button: same size as Watch / Save beside it. Reserved while hidden so
   revealing it moves nothing (the Save button does the same). */
.tyd-titletools .tyd-buybtn {
	min-height: 32px; padding: 4px 12px; border-radius: 4px; font-size: 13px; font-weight: 700;
	background: var(--buy-accent); color: #07151c; border: 1px solid var(--buy-accent-dark); cursor: pointer;
}
.tyd-titletools .tyd-buybtn[hidden] { display: block !important; visibility: hidden; }
.tyd-titletools .tyd-buybtn i { margin-right: 4px; }
/* Phones: the hero row already holds the breadcrumb, Watch and Save. A third
   button overlapped the breadcrumb, so there the band and the jump nav's
   "Prices" link open the panel instead. */
@media (max-width: 600px) { .tyd-titletools .tyd-buybtn, .tyd-titletools .tyd-buybtn[hidden] { display: none !important; } }

/* Band after the test record */
.buy-band {
	display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center;
	padding: 18px 20px; border: 1px solid var(--buy-line); border-left: 4px solid var(--buy-accent);
	background: #fff; border-radius: 6px;
}
.buy-band__title { margin: 0 0 4px; font-size: 20px; line-height: 1.2; color: var(--buy-ink); background: none; padding: 0; border: 0; }
.buy-band__line { margin: 0; font-size: 15px; color: var(--buy-ink-2); }
.buy-band__btn {
	min-height: 44px; padding: 8px 18px; border-radius: 5px; font-size: 15px; font-weight: 700; cursor: pointer;
	background: var(--buy-accent); color: #07151c; border: 1px solid var(--buy-accent-dark); white-space: nowrap;
}
.buy-band__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--buy-ink-2); }
@media (max-width: 600px) {
	.buy-band { grid-template-columns: 1fr; }
	.buy-band__btn { width: 100%; }
}

/* Size search: a price chip under each tyre row */
.sr-list > .sr-buy { align-self: flex-start; }
.sr-buy {
	display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 4px 12px; min-height: 32px;
	padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 700; cursor: pointer;
	background: var(--buy-mist); color: var(--buy-ink); border: 1px solid #9fb6c1;
}
.sr-buy:hover, .sr-buy:focus-visible { border-color: var(--buy-accent-dark); background: #e2f4fa; }

/* The panel */
dialog.buy-sheet {
	box-sizing: border-box; padding: 0; border: 0; color: var(--buy-ink); background: #fff;
	width: min(460px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
	margin: 0 0 0 auto; border-radius: 12px 0 0 12px; box-shadow: -12px 0 48px #07151c40;
	font-size: 15px; line-height: 1.45;
}
dialog.buy-sheet[open] { display: flex; flex-direction: column; animation: buy-in-right .22s ease-out; }
dialog.buy-sheet::backdrop { background: #07151c99; }
@keyframes buy-in-right { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buy-in-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
	dialog.buy-sheet {
		width: 100vw; height: auto; max-height: 88vh; max-height: 88dvh; margin: auto 0 0;
		border-radius: 16px 16px 0 0; box-shadow: 0 -12px 48px #07151c40;
	}
	dialog.buy-sheet[open] { animation-name: buy-in-up; }
}
@media (prefers-reduced-motion: reduce) { dialog.buy-sheet[open] { animation: none; } }

.buy-sheet__head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	padding: 18px 20px 12px; border-bottom: 1px solid var(--buy-line);
}
@media (max-width: 640px) {
	.buy-sheet__head { padding-top: 22px; position: relative; }
	.buy-sheet__head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #c3d0d6; }
}
.buy-sheet__heading { flex: 1 1 auto; min-width: 0; }
.buy-sheet__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--buy-accent-dark); }
.buy-sheet__title { margin: 2px 0 0; font-size: 20px; line-height: 1.25; color: var(--buy-ink); background: none; padding: 0; border: 0; }
.buy-sheet__close {
	flex: none; width: 44px; height: 44px; border: 1px solid var(--buy-line); border-radius: 50%;
	background: #fff; color: var(--buy-ink); font-size: 18px; cursor: pointer;
}
.buy-disclosure { margin: 0; padding: 10px 20px; font-size: 13px; color: var(--buy-ink-2); background: var(--buy-mist); }
.buy-disclosure a { color: var(--buy-accent-dark); }
.buy-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 20px; }
.buy-sheet__foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px;
	padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--buy-line); font-size: 13.5px;
}
.buy-saved { color: var(--buy-ink-2); }

.buy-sizebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.buy-sizebar label, .buy-country span { font-weight: 700; font-size: 14px; }
.buy-sizebar select, .buy-country select {
	min-height: 40px; padding: 6px 10px; border: 1px solid #758996; border-radius: 5px;
	background: #fff; color: var(--buy-ink); font-size: 15px;
}
.buy-country { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.buy-lead { margin: 4px 0 10px; }
.buy-hint { margin: 8px 0 12px; font-size: 13px; color: var(--buy-ink-2); }
.buy-chips, .buy-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-chip {
	min-height: 36px; padding: 5px 12px; border: 1px solid #9fb6c1; border-radius: 18px;
	background: #fff; color: var(--buy-ink); font-size: 14px; font-weight: 600; cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.buy-chip small { font-weight: 400; color: var(--buy-ink-2); margin-left: 4px; }
.buy-chip[aria-pressed="true"] { background: var(--buy-ink); color: #fff; border-color: var(--buy-ink); }
.buy-chip:hover { border-color: var(--buy-accent-dark); }
.buy-chip--save { background: var(--buy-mist); }

.buy-list { list-style: none; margin: 4px 0 0; padding: 0; }
.buy-offer {
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: "shop price" "spec spec" "go go";
	gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--buy-line);
}
.buy-offer[hidden] { display: none; }
.buy-offer__shop { grid-area: shop; min-width: 0; }
.buy-offer__shop strong { display: block; font-size: 16px; }
.buy-offer__basis { display: block; font-size: 13px; color: var(--buy-ink-2); }
.buy-offer__spec { grid-area: spec; display: flex; flex-wrap: wrap; gap: 6px; }
.buy-tag { padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: var(--buy-mist); border: 1px solid var(--buy-line); font-variant-numeric: tabular-nums; }
.buy-tag--oe { background: #fff6e0; border-color: #e7c66d; cursor: help; }
.buy-tag--warn { color: var(--buy-warn); background: #fbeed6; border-color: #ecc98a; }
.buy-offer__price { grid-area: price; text-align: right; }
.buy-offer__amount { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.buy-offer__per { display: block; font-size: 12px; color: var(--buy-ink-2); }
.buy-offer__go {
	grid-area: go; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
	border-radius: 5px; font-weight: 700; text-decoration: none; background: var(--buy-accent); color: #07151c;
	border: 1px solid var(--buy-accent-dark);
}
.buy-offer__go:hover, .buy-offer__go:focus-visible { background: #33c2ef; color: #07151c; text-decoration: none; }
@media (min-width: 641px) {
	.buy-offer { grid-template-columns: 1fr auto auto; grid-template-areas: "shop price go" "spec spec spec"; align-items: center; }
	.buy-offer__go { padding: 0 14px; }
}
.buy-order { margin: 14px 0 0; font-size: 12.5px; color: var(--buy-ink-2); }
.buy-demo { margin: 10px 0 0; padding: 8px 10px; font-size: 12.5px; background: #fff6e0; border: 1px dashed #e7c66d; border-radius: 4px; }
.buy-empty p { margin: 6px 0 12px; }
.buy-skeleton { display: grid; gap: 12px; }
.buy-skeleton span { display: block; height: 58px; border-radius: 6px; background: linear-gradient(90deg, #eef3f5, #f8fafb, #eef3f5); background-size: 200% 100%; animation: buy-shimmer 1.2s infinite linear; }
@keyframes buy-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .buy-skeleton span { animation: none; } }
.buy-error { margin: 8px 0; }

/* ---- Price chips (any list) ---- */
[data-buy-chip][hidden], [data-buy-multi][hidden], .buy-successor[hidden] { display: none !important; }
.buy-pill {
	display: inline-flex; align-items: center; gap: 7px; min-height: 32px; max-width: 100%;
	padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer; text-align: left;
	background: var(--buy-mist); color: var(--buy-ink); border: 1px solid #9fb6c1;
}
.buy-pill:hover, .buy-pill:focus-visible { border-color: var(--buy-accent-dark); background: #e2f4fa; }
.buy-pill__text { display: inline-flex; flex-direction: column; min-width: 0; }
.buy-pill__text small { font-size: 11.5px; font-weight: 500; color: var(--buy-ink-2); }
.buy-pill__text small:empty { display: none; }
.buy-multi-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 5px;
	font-size: 14px; font-weight: 700; cursor: pointer; background: var(--buy-accent); color: #07151c; border: 1px solid var(--buy-accent-dark);
}
.buy-successor { margin: 6px 0 0; font-size: 13px; color: var(--buy-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.buy-successor a { font-weight: 700; }

/* Places the chips sit */
.ta-shortlist__links .buy-pill { margin-top: 6px; }
.ta-shortlist-prices { display: flex; justify-content: flex-start; margin: 14px 0 4px; }
.alt-tyre-item .buy-pill { margin-top: 6px; width: 100%; justify-content: center; }
.tsl-sizelink .buy-pill { margin-left: 10px; }
@media (max-width: 700px) { .tsl-sizelink .buy-pill { margin: 6px 0 0; } }
.tsa-card .buy-pill { margin-top: 10px; }
.tsa-compare-bar .buy-multi-btn { margin-left: 8px; }
.cvs-prices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 4px; padding: 14px 16px;
	border: 1px solid var(--buy-line); border-left: 4px solid var(--buy-accent); border-radius: 6px; background: #fff; }
.cvs-prices__title { flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 800; color: var(--buy-ink); }
.cvs-prices__line { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--buy-ink); }
.cvs-prices__line:empty { display: none; }
.cvs-prices__note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--buy-ink-2); }

/* ---- The many-tyres panel ---- */
.buy-sheet__back {
	flex: none; width: 44px; height: 44px; margin-right: -4px; border: 1px solid var(--buy-line); border-radius: 50%;
	background: #fff; color: var(--buy-ink); font-size: 16px; cursor: pointer;
}
.buy-mlist { list-style: none; margin: 4px 0 0; padding: 0; }
.buy-mrow {
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "go go"; gap: 6px 12px;
	align-items: center; padding: 12px 0; border-bottom: 1px solid var(--buy-line);
}
.buy-mrow__name { grid-area: name; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.buy-mrow__name strong { font-size: 15px; }
.buy-mrow__label { flex: none; min-width: 34px; padding: 1px 6px; border-radius: 4px; background: var(--buy-ink); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.buy-mrow__price { grid-area: price; text-align: right; }
.buy-mrow__go { grid-area: go; justify-self: stretch; }
.buy-mrow--none .buy-mrow__name strong { color: var(--buy-ink-2); font-weight: 600; }
.buy-mrow__none { font-size: 13px; color: var(--buy-ink-2); }
@media (min-width: 641px) {
	.buy-mrow { grid-template-columns: 1fr auto auto; grid-template-areas: "name price go"; }
	.buy-mrow__go { justify-self: end; }
}


/* ---- "Buy this tyre" strip on test result cards ---- */
.buy-card[hidden] { display: none !important; }
.buy-card {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "lead price actions" "note note note";
	align-items: center; gap: 6px 22px; margin: 4px 20px 20px; padding: 14px 18px 10px;
	background: linear-gradient(100deg, #eef7fb 0%, #fff 70%); border: 1px solid var(--buy-line);
	border-left: 4px solid var(--buy-accent); border-radius: 8px; color: var(--buy-ink);
}
.buy-card__lead { grid-area: lead; min-width: 0; }
.buy-card__eyebrow { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--buy-accent-dark); }
.buy-card__eyebrow i { margin-right: 4px; }
.buy-card__shop { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; }
.buy-card__shop:empty { display: none; }
.buy-card__meta { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--buy-ink-2); }
.buy-card__price { grid-area: price; text-align: right; white-space: nowrap; }
.buy-card__price:empty { display: none; }
.buy-card__price strong { display: block; font-size: 26px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.buy-card__price small { font-size: 12px; color: var(--buy-ink-2); }
.buy-card__actions { grid-area: actions; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.buy-card__go {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border-radius: 6px; font-size: 15px; font-weight: 800; white-space: nowrap; text-decoration: none;
	background: var(--buy-accent); color: #07151c; border: 1px solid var(--buy-accent-dark); box-shadow: 0 1px 0 #007b9d33;
}
.buy-card__go:hover, .buy-card__go:focus-visible { background: #33c2ef; color: #07151c; text-decoration: none; }
.buy-card__go[hidden] { display: none; }
.buy-card__more {
	min-height: 32px; padding: 2px 10px; border: 0; background: none; color: var(--buy-accent-dark);
	font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.buy-card__more[hidden] { display: none; }
.buy-card__note { grid-area: note; font-size: 11.5px; color: var(--buy-ink-2); }
@media (max-width: 640px) {
	.buy-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead price" "actions actions" "note note"; margin: 4px 12px 16px; padding: 14px 14px 10px; }
	.buy-card__price strong { font-size: 22px; }
	.buy-card__go { width: 100%; }
}

/* ---- Tyre page: "Where to buy" along the foot of the quick answer (dark hero) ---- */
.buy-quick[hidden] { display: none !important; }
.buy-quick {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text btn" "note note note";
	align-items: center; gap: 4px 14px; margin-top: 16px; padding: 12px 16px 8px;
	border: 1px solid #0db1e766; border-radius: 8px; background: #0db1e714; color: #e8f4f8;
}
.buy-quick__icon { grid-area: icon; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0db1e7; color: #07151c; font-size: 16px; }
.buy-quick__text { grid-area: text; min-width: 0; }
.buy-quick__eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6fd3f3; }
.buy-quick__line { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; }
.buy-quick__btn {
	grid-area: btn; min-height: 42px; padding: 0 18px; border-radius: 6px; font-size: 14.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
	background: var(--buy-accent); color: #07151c; border: 1px solid #6fd3f3;
}
.buy-quick__btn:hover, .buy-quick__btn:focus-visible { background: #33c2ef; }
.buy-quick__note { grid-area: note; font-size: 11px; color: #9fb8c4; }
@media (max-width: 640px) {
	.buy-quick { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon text" "btn btn" "note note"; }
	.buy-quick__btn { width: 100%; margin-top: 6px; }
}

/* ---- Compare page: prices by size ---- */
.cvs-sizeprices[hidden], .cvs-sizeprices tr[hidden] { display: none !important; }
.cvs-sizeprices { margin: 24px 0 8px; }
.cvs-sizeprices__title { margin: 0 0 4px; font-size: 20px; color: var(--buy-ink); background: none; padding: 0; border: 0; }
.cvs-sizeprices__lede { margin: 0 0 10px; font-size: 14px; color: var(--buy-ink-2); }
.cvs-sizeprices__scroll { overflow-x: auto; }
.cvs-sizeprices__table { width: 100%; }
.cvs-sizeprices__table th[scope="row"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cvs-sizeprices__table td { vertical-align: middle; }
.cvs-sizeprices__table td:not(:has([data-buy-chip]:not([hidden])))::after { content: "-"; color: var(--buy-ink-2); }
.cvs-sizeprices__table tr.is-mine th[scope="row"]::after { content: attr(data-mine-label); display: block; font-size: 11.5px; font-weight: 700; color: var(--buy-accent-dark); }
.cvs-sizeprices__table tr.is-mine { background: #eaf7fc; }
.cvs-sizeprices__note { margin: 8px 0 0; font-size: 12.5px; color: var(--buy-ink-2); }


/* The band starts hidden (shown once the reader's country has a shop for the
   tyre): its own page section goes with it, so no empty stripe is left. */
.tf-sec:has(> .tf-wrap > .buy-band[hidden]:only-child) { display: none; }
.ta-shortlist-prices[hidden], .cvs-prices[hidden], .cvs-prices__tyre[hidden] { display: none !important; }