/* BIKOTIC - the Buy buttons and the Buy panel (buy.js; stage 1 and 2, 2026-11-06; stage 3's full-page overlay, 2026-11-09).
   Brand: orange (#CE4C0D) is only for buying - the Buy buttons and the panel's affiliate links. Direct links (Canyon,
   a maker's own site) aren't affiliate links, so they're plain blue outline. Reading text is IBM Plex Sans, labels Oswald,
   prices JetBrains Mono. The panel is built like the BIKES overlay (picker.css): the white blurred backdrop, a blue
   gradient band, cards. Layers: the panel is 700 - over the cards and BIKES (500), Browse and the 3D view (600); under
   the LEGACY tip (900) and the fade marker (1000), which it never covers or changes. */

/* ---------------------------------------------------------------- THE BUY BUTTONS */

/* .buyBtn's look is in picker.css; as a <button> it needs these */
button.buyBtn
{
	border: 0;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.buyBtn[hidden] { display: none; }
button.buyBtn:focus-visible, .buyGo:focus-visible, #buyClose:focus-visible, .buyTurnOn:focus-visible, .buyNudgeX:focus-visible, .buyChange:focus-visible { outline: 2px solid #142536; outline-offset: 2px; }

/* THE BUY ROW (Ben, 10 Nov 2026): Buy ("Buy from £4,999" when the bike has a direct shop link, shared.js setBuyLabel)
   and the maker's link under it, small. One line, never wrapped. The maker's price used to sit beside Buy; since
   14 Nov 2026 it's in the name line, after the year (shared.js makerPrice). Nothing may ever cover Buy (CLAUDE.md):
   the link's tap area starts below the button */
.buyBtn { white-space: nowrap; }
.buyLine { display: flex; align-items: center; gap: 12px; }
.buyLine ~ .makerLink { margin-top: 9px; font-size: 12px; }
.buyLine ~ .makerLink svg { width: 14px; height: 14px; }

/* desktop, 2D and 3D: in the title, under the name, fading with the title */
#titleBuyRow, #v3BuyRow { margin-top: 12px; }
#titleBuy, #v3Buy
{
	display: flex;
	width: max-content;
	padding: 9px 18px;
	text-transform: none;
	letter-spacing: 0;
	pointer-events: auto;
}
#titleBuy[hidden] { display: none; }
html.phone #titleBuyRow { display: none; }		/* a phone's is #phoneBuy: under the bike in portrait, in the bar in landscape (style.css) */

/* phones, 2D: a proper thumb-sized button. Portrait: the row centred under the bike, then the maker's link in its own
   44px strip below it (so the title's own link is off); landscape: the row in the bar, the link stays the title's icon */
html.phone #phoneBuy .buyBtn { justify-content: center; min-width: 132px; }
html.phone.land #phoneBuy .buyBtn { min-width: 64px; }
html.phone:not(.land) #phoneBuy { flex-direction: column; align-items: center; bottom: 2px; }
html.phone:not(.land) #titleLink { display: none; }
html.phone #phoneLink { min-height: 44px; margin: 0; font-size: 13px; }
html.phone.land #phoneLink { display: none; }
html.phone.land .buyLine { gap: 8px; }
html.phone.land #phoneBuy .buyBtn, html.phone.land #v3Buy { padding: 0 12px; }

/* phones, 3D portrait: the row under the name, under the blue bar, then the link */
html.phone #v3BuyRow { margin-top: 8px; }
html.phone #v3Buy
{
	justify-content: center;
	min-width: 72px;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	font-size: 16px;
	box-sizing: border-box;
	touch-action: none;
}
html.phone:not(.land) #v3Link { margin-top: 10px; font-size: 13px; }
html.phone:not(.land) #v3Link::after { top: -8px; transform: none; }		/* 44px to tap, starting below Buy */
/* phones, 3D landscape: the title's in the bar - Buy is its last column, after the maker's link */
html.phone.land #v3Title { grid-template-columns: 4px minmax(0, 1fr) 44px auto; }
html.phone.land #v3BuyRow { grid-column: 4; grid-row: 1 / span 2; margin: 0; }
html.phone.land #v3Buy { min-width: 64px; padding: 0 14px; font-size: 15px; }


/* The Compare and Geometry cards and the Gallery cover the whole screen, so the Buy behind them can't be reached: each
   carries its own, in the page, where nothing goes over it. Nothing may ever cover a Buy button (CLAUDE.md) */
.cardBuy, #galBuy { justify-content: center; text-transform: none; letter-spacing: 0; box-sizing: border-box; }
/* a card: over the empty top left corner of its photo, so the shared card rows don't move */
.cardBuy { position: absolute; top: 100%; left: 12px; margin-top: 10px; }
/* the Gallery's head: the names on the left, Buy ("Buy from £4,999" can be wide) in its own column on the right, so a long
   name wraps before it; a phone in portrait has it on the count's line, at the right */
#galHead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding-right: 0; }
#galMan, #galModel, #galCount { grid-column: 1; }
#galBuy { grid-column: 2; grid-row: 1 / span 3; }
html.phone:not(.land) #galMan, html.phone:not(.land) #galModel { grid-column: 1 / -1; }
html.phone:not(.land) #galCount { align-self: center; margin-top: 0; }
html.phone:not(.land) #galBuy { grid-row: 3; margin-top: 6px; }
html.phone:not(.land) #galStage { top: 132px; }
/* a phone in portrait: the Gallery's close is 44px wide (as in the 3D dock's tight row) and the head keeps its old width, so a long name
   wraps no sooner than it did and Buy stays above the photo's box */
html.phone:not(.land) #galClose { width: 44px; }
html.phone:not(.land) #galHead { right: calc(var(--pad, 21px) + 56px); }
html.phone .cardBuy, html.phone #galBuy { min-width: 64px; min-height: 44px; padding: 0 14px; font-size: 16px; touch-action: manipulation; }


/* ---------------------------------------------------------------- THE PANEL: a full-page overlay */

#buy
{
	position: fixed;
	inset: 0;
	z-index: 700;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	font-family: var(--body);
	color: #141414;
	opacity: 0;
	transition: opacity 0.25s ease;
}
#buy.open { opacity: 1; }
#buy[hidden] { display: none; }
/* the white blurred backdrop is its own layer: a blur on the scrolling overlay itself would pin the fixed close X to
   the overlay's scroll, not the screen */
.buyBack
{
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;		/* a fixed layer is outside the panel's scrolling: the mouse wheel over it would go nowhere, so the white beside the content passes through to #buy */
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.buyPanel { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #buy { transition: none; } }

.buyPanel
{
	max-width: 1120px;
	margin: 0 auto;
	outline: none;
}

/* the band: the blue gradient, the logo, BUY and the bike's name - as the BIKES heads-up band */
.buyHead
{
	position: relative;
	box-sizing: border-box;
	padding: 14px 84px 18px 20px;
	border-radius: 18px;
	background: var(--bk-hero-gradient);
	color: #ffffff;
	box-shadow: 0 18px 50px rgba(var(--shadowRGB), 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.buyHead .pkLogo { display: block; line-height: 0; margin-bottom: 14px; }
.buyHead .pkLogo img { display: block; height: 20px; width: auto; }
.buyTitle { min-width: 0; }
.buyEyebrow
{
	font-family: var(--head);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bk-mist);
}
#buyMan
{
	margin-top: 10px;
	font-family: var(--head);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.9;
}
#buyMan .makerYear { margin-left: 10px; font-family: var(--data); font-weight: 500; font-size: 13px; letter-spacing: 0; color: inherit; }		/* white on the band: the title's grey was too faint on blue */
#buyMan .makerPrice { margin-left: 8px; }		/* the maker's price after the year: the year's white, font, size and weight, at half opacity (style.css .makerPrice) */
#buyName
{
	margin-top: 4px;
	font-family: var(--head);
	font-weight: 600;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
#buyType
{
	margin-top: 8px;
	font-family: var(--head);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bk-mist);
}
#buyType[hidden] { display: none; }

/* the close: the shared close (style.css .xBtn), fixed at the top right so it's always to hand while the page scrolls */
#buyClose
{
	position: fixed;
	top: 16px;
	right: calc(16px + var(--buyBar, 0px));		/* clear of the panel's scrollbar, however wide the browser draws it (buy.js sets --buyBar) */
	z-index: 2;
}

.buyBody { padding: 6px 0 0; }

/* ---------------------------------------------------------------- SECTIONS */

.buySec { margin-top: 26px; }
.buySec[hidden] { display: none; }
.buySecHead { margin: 0 0 12px; }
.buySecTitle
{
	margin: 0;
	font-family: var(--head);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ui);
}
.buySecSub { margin: 6px 0 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: #555555; }
.buyNone, .buyWait
{
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
.buyWait { color: #555555; font-weight: 400; }

/* the cards: a grid, each about the width of its 250px photo; one column on a phone */
.buyCards
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
}
.buyCard
{
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease;
}
.buyCard:hover { box-shadow: 0 10px 28px rgba(var(--shadowRGB), 0.14); }
/* this bike's own card: a little wider, as the one that matters most */
#buyOffers .buyCards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.buyPhoto { position: relative; aspect-ratio: 16 / 9; background: #E6E9EC; }
.buyPhoto.ok { background: #ffffff; }
.buyPhoto img { width: 100%; height: 100%; object-fit: contain; display: block; background: #ffffff; -webkit-user-drag: none; }
/* a shop's photo of a same-frame build (Ben, 10 Nov 2026) isn't 16:9 (Tredz about 3:2, Ribble about 1.7:1, Decathlon
   square): it sits inside the card's 16:9 box, whole, on white, so every card's photo is the same size. SHOWN UNALTERED
   (Ribble's terms forbid altering their creative): resized to the box, never cropped - kept 16px in from every side
   (Ben, 10 Nov 2026: shops often crop right to the bike, so it gets a little white space round it, and the card's 12px
   rounded corners can't clip it) - no filters, nothing over it. Its credit goes under it */
.buyShopPhoto { margin: 0; }
.buyPhoto.shop img { position: absolute; top: 16px; bottom: 16px; left: 16px; right: 16px; width: calc(100% - 32px); height: calc(100% - 32px); filter: none; }
.buyCredit { margin: 0; padding: 4px 12px 0; font-size: 12px; line-height: 1.4; color: #555555; }
.buyNoPhoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #555555; }
/* a same-frame build that isn't one of our bikes shows our photo of this bike, and says so */
.buyPictured { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 10px; background: rgba(20, 37, 54, 0.72); color: #ffffff; font-size: 12px; line-height: 1.4; }

.buyWords { padding: 10px 12px 4px; min-width: 0; }
.buyBrand { display: flex; justify-content: space-between; gap: 8px; font-family: var(--head); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #555555; }
.buyBrand .num { font-family: var(--data); letter-spacing: 0; }
.buyCardName { margin-top: 2px; font-family: var(--head); font-weight: 600; font-size: 17px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: #141414; overflow-wrap: anywhere; }
.buyCardName .legacyChip { color: #555555; vertical-align: 0.1em; }
.buyTag
{
	display: inline-block;
	margin-top: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--uiTint);
	color: var(--ui);
	font-family: var(--head);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.buyTag + .buyTag { margin-left: 6px; }
.buyTag .num, .buyFacts .num { font-family: var(--bk-font-data, "JetBrains Mono", monospace); letter-spacing: 0; }
.buyReason { margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: #141414; }
.buyNote { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #555555; }
.buyWords .buyLabel { margin: 8px 0 0; }
.buyWords .buyFacts { margin-top: 8px; font-size: 15px; }

.buyActs { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 0; margin-top: auto; }
.buyCard .buyWhat { margin: 8px 12px 12px; font-size: 12px; line-height: 1.45; color: #555555; }

/* Compare: loads that bike into the other card of the comparison, against this one (picker.js) */
.buyCompare
{
	min-height: 44px;
	padding: 0 16px;
	font-family: var(--head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ui);
	background: #ffffff;
	border: 1px solid var(--ui);
	border-radius: 999px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.buyCompare:hover { background: var(--ui); color: #ffffff; }
.buyCompare:disabled, .buyCompare:disabled:hover { color: #767676; border-color: #dde2e7; background: #ffffff; cursor: default; }
.buyCompare:focus-visible { outline: 2px solid #142536; outline-offset: 2px; }

/* ---------------------------------------------------------------- THE FALLBACK ROWS (as stage 1) */

.buyRow { margin: 0 0 20px; max-width: 640px; }
.buyRow:last-child { margin-bottom: 0; }
.buyLabel
{
	margin: 0 0 8px;
	font-family: var(--head);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #555555;
}

/* a link out: orange for an affiliate link, plain blue outline for a direct one */
.buyGo
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
	-webkit-tap-highlight-color: transparent;
}
.buyGo.aff { background: var(--bk-buy); color: var(--bk-buy-text); }
.buyGo.aff:hover { filter: brightness(1.1); }
.buyGo.plain { background: #ffffff; color: var(--ui); border: 1px solid var(--ui); }
.buyGo.plain:hover { background: var(--ui); color: #ffffff; }
.buyArrow { flex: none; }
/* a similar bike whose only link is a newer version one (Ben, 11 Nov 2026): no shop link on its card, an orange Buy the
   size of a shop link that opens that bike's own panel */
.buyOpenBike { min-height: 48px; padding: 10px 16px; box-sizing: border-box; border-radius: 8px; font-size: 16px; justify-content: center; }
.buyOpenBike:disabled { opacity: 0.6; cursor: default; }
/* a real link's facts: "£4,999 at Tredz, checked 6 Nov" - the price in the numbers' font (JetBrains Mono) */
.buyFacts
{
	margin: 10px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #141414;
	overflow-wrap: anywhere;
}
.buyPrice { font-family: var(--bk-font-data, "JetBrains Mono", monospace); font-weight: 700; font-size: 17px; }
/* the rest of a price line (Ben's legal fixes, 14 Nov 2026): "Check available sizes, delivery charges and the final price
   at the shop." - the same line, quieter, so the price still leads */
.buyCheck { font-size: 13px; font-weight: 400; color: #555555; }
.buyFacts.out { color: #7A2E0B; }		/* out of stock: said plainly, never hidden */
.buyFacts + .buyWhat { margin-top: 4px; }
.buyWhat
{
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #555555;
}

/* ---------------------------------------------------------------- DISCLOSURE AND TRACKING: once, above the first affiliate link
   (2026-11-09: the Yes / No box is gone - the question is asked once by the banner at the bottom of the app, below.
   Links are never greyed out) */

/* tracking off: one friendly line at the top of the panel, Turn on, and a dismiss for the visit. Never blocks a link */
.buyNudge
{
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 18px 0 0;
	padding: 8px 6px 8px 14px;
	border: 1px solid var(--uiLine);
	border-radius: 10px;
	background: #ffffff;
}
.buyNudge p { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.5; }
.buyNudgeActs { display: flex; align-items: center; gap: 2px; flex: none; }
.buyTurnOn
{
	min-height: 44px;
	padding: 0 14px;
	font-family: var(--body);
	font-weight: 600;
	font-size: 14px;
	color: var(--ui);
	background: #ffffff;
	border: 1px solid var(--ui);
	border-radius: 8px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.buyTurnOn:hover { background: var(--ui); color: #ffffff; }
.buyNudgeX
{
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 15px;
	color: #555555;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.buyNudgeX:hover { background: var(--uiTint); color: var(--ui); }
.buyNudge + .buyAff { margin-top: 12px; }
.buyAff + .buyNudge { margin-top: 6px; }		/* since 14 Nov 2026 the Ad line is first and the friendly line sits under it */

.buyAff { max-width: 640px; margin-top: 18px; }
.buySec .buyAff { margin: 0 0 18px; }
.buyDisc
{
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--uiTint);
	font-size: 14px;
	line-height: 1.5;
}
.buyRow + .buyAff { margin-top: 4px; }
/* "Ad" at the head of the panel's top line (Ben's legal fixes, 14 Nov 2026): a small solid blue label, so it reads as a
   label at a glance. Blue, never orange: orange is only for the links themselves */
.buyAd
{
	display: inline-block;
	margin-right: 2px;
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--ui);
	color: #ffffff;
	font-family: var(--head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
/* tracking off: "Tracking off: I earn no commission through these links." under the Ad line, with Change */
.buyState.off span { color: #141414; }

/* the state of tracking, and the small link to switch it the other way */
.buyState
{
	display: flex;
	align-items: center;
	gap: 4px;
	margin: -6px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #555555;
}
.buyChange
{
	min-height: 44px;		/* 44px to tap */
	padding: 0 10px;
	font-family: var(--body);
	font-size: 14px;
	color: var(--ui);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- THE CONSENT BOX (index.html #consentBar, buy.js CONSENT)

   On a first visit: the app dimmed behind a centred white box with the question, Accept and Reject the same size and
   look (Reject is never smaller, fainter or harder to reach), and the privacy page. It has to be answered before the app
   can be used - a tap on the dim does nothing, Escape does nothing, Tab stays inside - and either answer gives full
   access straight away. Layer 850: over everything the rider can open (the Buy panel is 700); under the LEGACY tip (900)
   and the fade marker (1000). Gone for good once answered (buy.js banner) */
#consentBar
{
	position: fixed;
	inset: 0;
	z-index: 850;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	font-family: var(--body);
	color: #141414;
}
#consentBar[hidden] { display: none; }
.cbBack
{
	position: absolute;
	inset: 0;
	background: rgba(20, 37, 54, 0.55);		/* navy, so the app reads as dimmed, not gone */
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.cbBox
{
	position: relative;
	width: 100%;
	max-width: 440px;
	padding: 20px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid var(--uiLine);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(var(--shadowRGB), 0.32), 0 2px 6px rgba(0, 0, 0, 0.08);
	outline: none;
}
.cbText { margin: 0 0 14px; font-size: 16px; line-height: 1.5; }
.cbActs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cbActs button
{
	min-height: 48px;
	padding: 0 14px;
	font-family: var(--body);
	font-weight: 600;
	font-size: 16px;
	color: var(--ui);
	background: #ffffff;
	border: 1px solid var(--ui);
	border-radius: 8px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cbActs button:hover { background: var(--ui); color: #ffffff; }
/* the privacy page: a small link under the buttons, a 44px tap all the same */
.cbPrivacy { display: inline-block; margin-top: 6px; padding: 12px 0; font-size: 14px; line-height: 20px; color: var(--ui); text-decoration: underline; }
.cbActs button:focus-visible, .cbPrivacy:focus-visible { outline: 2px solid #142536; outline-offset: 2px; }
/* a phone on its side: a little tighter so the whole box is in view */
@media (max-height: 480px)
{
	.cbBox { padding: 14px 16px; }
	.cbText { margin-bottom: 10px; font-size: 15px; }
	.cbActs button { min-height: 44px; }
	.cbPrivacy { margin-top: 2px; }
}

/* ---------------------------------------------------------------- PHONES: fills the screen, scrolls inside, one column */

@media (max-width: 600px)
{
	#buy { padding: 12px 12px calc(28px + env(safe-area-inset-bottom, 0px)); }
	.buyHead { padding: 12px 76px 16px 16px; border-radius: 14px; }
	.buyHead .pkLogo { margin-bottom: 10px; }
	#buyName { font-size: 24px; }
	#buyClose { top: 12px; right: calc(12px + var(--buyBar, 0px)); }
	.buySec { margin-top: 22px; }
	.buySecTitle { font-size: 20px; }
	.buyCards, #buyOffers .buyCards { grid-template-columns: minmax(0, 1fr); }
	.buyCard .buyWhat { font-size: 13px; }
}
/* a phone on its side: the band a little tighter */
@media (max-height: 480px)
{
	#buy { padding-top: 10px; }
	.buyHead { padding-top: 10px; padding-bottom: 12px; }
	.buyHead .pkLogo { margin-bottom: 8px; }
	#buyName { font-size: 22px; }
	#buyClose { top: 10px; right: calc(10px + var(--buyBar, 0px)); }
}
/* Nothing may cover a Buy button (CLAUDE.md), the orange shop links included: where the page is too narrow to keep the
   cards out from under the fixed close X, the scrolling starts below the X, so nothing can pass beneath it. The white
   backdrop and the X are fixed to the screen, so they stay put. 1280px and wider, the cards stop short of the X anyway */
@media (max-width: 1279px)
{
	#buy { top: 72px; padding-top: 0; }
	/* the strip above that holds the X: the one part of the backdrop that still catches taps and the wheel, so neither reaches the app behind (buy.js sends the wheel on to the panel) */
	.buyBack::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 72px; pointer-events: auto; }
}
@media (max-width: 600px)
{
	#buy { top: 64px; }
	.buyBack::before { height: 64px; }
}
@media (max-width: 1279px) and (max-height: 480px)
{
	#buy { top: 60px; }
	.buyBack::before { height: 60px; }
}