/**
 * Book Price - main stylesheet (the theme's only CSS file).
 *
 * 1. Design tokens (every colour, font, size, spacing, radius and shadow)
 * 2. Global: reset, container, titles, buttons, header, popups, footer, notices (every page)
 * 3. Homepage sections (Homepage template)
 * 4. Book detail page
 * 5. Watchlist page
 * 6. Price alerts (book page popup, watchlist switch)
 * 7. Search results ("No Matches..." after a header search)
 * 8. Blog (blog index, category / tag pages, single post)
 * 9. Reviews page (Reviews template, testimonials)
 * 10. Contact form ("Leave a Comment": Contact page + popup)
 * 11. Content pages (FAQ, Press, Affiliates, Scholarship, Terms, Privacy)
 *
 * Rules:
 * - Components use the tokens below, never raw values. To change a colour or size, change the token.
 * - The main colours can also be changed in Appearance → Customize → Colors
 *   (the theme then overrides the matching tokens, see inc/customizer.php).
 * - Mobile first: base styles are for phones, then min-width media queries.
 * - Breakpoints (taken from the reference site; CSS can't use variables in media queries):
 *   375 / 400 / 490 / 600 / 740 / 850 / 1100 / 1176 / 1200 px.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

/* Until Roboto has loaded (display=swap), text uses Arial resized to Roboto's measurements, so lines
   break in the same places and nothing moves when Roboto arrives (no layout shift). Font descriptors
   can't use variables: Roboto is 0.6% narrower than Arial (measured on page text in Chrome); ascent /
   descent = Roboto's (1900 / 500 of 2048 units) divided by that size. */
@font-face {
	font-family: "Roboto Fallback";
	src: local("Arial");
	size-adjust: 99.4%;
	ascent-override: 93.33%;
	descent-override: 24.56%;
	line-gap-override: 0%;
}

:root {
	/* Main colours (editable in Customize → Colors) */
	--bp-primary: #3e5c6d;              /* dark blue: header, footer, headings, text on light areas */
	--bp-accent: #f15726;               /* orange: main buttons, highlights, slider arrows */
	--bp-secondary: #50b5c3;            /* teal: secondary buttons, links, steps line */
	--bp-light-bg: #edf8ff;             /* light blue section background */
	--bp-text: #696969;                 /* body text */

	/* Shades of the main colours (worked out automatically when a main colour is changed) */
	--bp-accent-hover: #d63e0e;
	--bp-accent-soft: #ffe3da;          /* tab hover background */
	--bp-accent-glow: color-mix(in srgb, var(--bp-accent-hover) 20%, transparent);
	--bp-accent-glow-strong: color-mix(in srgb, var(--bp-accent-hover) 50%, transparent);
	--bp-nav-hover: #e06239;            /* header menu link hover */
	--bp-secondary-hover: #6bafb9;
	--bp-primary-light: #4b6b7c;        /* video placeholder gradient */
	--bp-primary-dark: #2f4856;         /* video placeholder gradient */
	--bp-icon-bg: #e1f2fa;              /* circle behind the "Why buy" icons */

	/* Neutrals */
	--bp-white: #ffffff;
	--bp-black: #000000;
	--bp-grey: #c4c4c4;                 /* topic buttons, copyright text */
	--bp-grey-light: #d6d8dd;           /* image placeholders */
	--bp-grey-mid: #b9bec6;             /* book cover placeholder */
	--bp-grey-dark: #868788;            /* search icon */
	--bp-grey-soft: #a9a9a9;            /* "More vendors" */
	--bp-hover-text: #e6e6e6;           /* text on hovered buttons */
	--bp-overlay: rgba(12, 70, 98, 0.6); /* page dimmed behind the open mobile menu */
	--bp-divider: #bec0c2;              /* footer line */
	--bp-footer-text: #f4f5f7;
	--bp-footer-title: rgba(255, 255, 255, 0.5);
	--bp-footer-muted: #b7b9bb;         /* Terms / Privacy */
	--bp-footer-link-hover: #bbbbbb;
	--bp-badge-border: #a6a6a6;         /* app store badges */

	/* Log in / Sign up popups */
	--bp-field-label: #c0c3cb;          /* field label inside the input */
	--bp-divider-light: #cbced4;        /* "or continue with" lines */
	--bp-social-border: #bdbdbd;
	--bp-social-hover: #f4f4f4;
	--bp-accent-text-hover: #f47c57;    /* orange text links hover */

	/* Brand colours (social login icons) */
	--bp-brand-amazon: #29425a;
	--bp-brand-facebook: #1877f2;
	--bp-brand-google-blue: #4285f4;
	--bp-brand-google-red: #ea4335;
	--bp-brand-google-yellow: #fbbc05;
	--bp-brand-google-green: #34a853;

	/* Book detail page */
	--bp-surface: #f7fafd;              /* light panels: prices section, best price card */
	--bp-heading-dark: #0d0c0c;         /* price list titles, filter labels */
	--bp-muted: #959595;                /* "Price", "Shipping" labels */
	--bp-free: #2da771;                 /* "Free" shipping */
	--bp-info-bg: #e8f3ff;              /* info boxes (eBay seller, Amazon note) */
	--bp-primary-deep: #083145;         /* More Filters hover */
	--bp-primary-hover: #385362;        /* Reviews / Find in Library hover text */
	--bp-button-hover-bg: #f1f7ff;      /* Reviews / Find in Library hover background */
	--bp-tooltip-text: #333333;         /* "Add to Watchlist" tooltip */
	--bp-tooltip-border: rgba(0, 8, 16, 0.15);
	--bp-remove-cross: #aeaeae;         /* X on watchlist books */
	--bp-alert-invalid: #f18467;        /* price alert box with a wrong price */
	--bp-alert-divider: #dedede;        /* line between alert switch and best price (phones) */
	--bp-alert-on: var(--bp-free);      /* price box border while the alert is on (green, like the reference) */

	/* Notices at the bottom left (assets/js/main.js, section 7), same as the reference */
	--bp-notice-text: #757575;
	--bp-notice-success: #07bc0c;
	--bp-notice-warning: #f1c40f;
	--bp-notice-error: #e74c3c;
	--bp-notice-width: 320px;
	--bp-notice-min-height: 64px;
	--bp-notice-offset: 1em;            /* gap to the window edge */
	--bp-notice-bar: 5px;               /* height of the time bar */
	--bp-notice-time: 7s;               /* how long a notice stays */

	/* Blog (colours of the reference blog) */
	--bp-blog-text: #606060;            /* post text */
	--bp-blog-heading: #4b4b4b;         /* post titles, sidebar titles */
	--bp-blog-meta: #777777;            /* "By ...", dates, tags */
	--bp-blog-button: #121212;          /* "Continue reading", page numbers */
	--bp-blog-button-hover: #ef5025;    /* "Continue reading" text on hover */
	--bp-blog-panel: #f5f5f5;           /* sidebar boxes, related post titles */
	--bp-blog-line: rgba(0, 0, 0, 0.1); /* dotted lines between categories */
	--bp-blog-overlay: rgba(255, 255, 255, 0.85); /* text box on the sidebar post images */

	/* Reviews page (colours of the reference reviews page) */
	--bp-reviews-band: #f4f9fd;         /* title band */
	--bp-review-card: #f7f7f8;          /* speech bubbles */
	--bp-review-date: #a9a9a9;
	--bp-review-star: #f7d20f;
	--bp-review-star-off: #dcdcdc;
	--bp-share-facebook: #3b5998;       /* "Would you like to share your story?" buttons */
	--bp-share-x: #00b67a;

	/* Contact page (behind the "Leave a Comment" box) */
	--bp-contact-bg: #f4f9fd;
	--bp-field-height-textarea: 110px; /* comment box, like the reference */

	/* Content pages (FAQ, Press, Affiliates, Scholarship, Terms, Privacy), colours of the reference pages */
	--bp-page-band: #f4f9fd;            /* title band, "Do you have any questions?" band */
	--bp-faq-line: #e0e0e0;             /* line under each question */
	--bp-faq-col: 40%;                  /* text and form columns of "Do you have any questions?" (740px+) */
	--bp-faq-icon-scale: 1.5;           /* question arrow, like the reference */
	--bp-faq-time: 0.6s;                /* open / close animation */
	--bp-ls-band: 0.4px;                /* title band (phones) */
	--bp-ls-band-lg: -0.9px;            /* title band (740px+) */
	--bp-ls-title-lg: 0.1px;            /* Press / Terms page titles (740px+) */
	--bp-press-band: #e4ecf0;           /* Press: logos band */
	--bp-press-news: #f6fafd;           /* Press: "In the News" background */
	--bp-press-text: 680px;             /* Press: text column (600px of text + padding) */
	--bp-press-quotes: 940px;           /* Press: quote cards area */
	--bp-press-quote-col: 200px;        /* Press: narrowest quote column */
	--bp-press-logo: 120px;             /* Press: logo box width (every logo the same box, like the reference) */
	--bp-press-logo-height: 40px;       /* Press: logo box height */
	--bp-landing-heading: #090909;      /* Affiliates / Scholarship headings, step numbers */
	--bp-tick-green: #5ebc4e;           /* Affiliates: approved types */
	--bp-cross-red: #de4c2c;            /* Affiliates: types not approved */
	--bp-winners-line: #cacccd;         /* Scholarship: line through the winner years */
	--bp-winners-confetti: url("../images/scholarship/confetti.svg"); /* Scholarship: behind the winners (850px+) */
	--bp-winners-confetti-mobile: url("../images/scholarship/confetti-mobile.svg"); /* two groups beside the year */
	--bp-winners-confetti-max: 1445px;  /* its widest size (95% of a 1521px section), so zooming out keeps it around the years */
	--bp-radio-hover: rgba(239, 88, 49, 0.08); /* Scholarship: Yes / No hover */
	--bp-landing-image: 340px;          /* illustrations: width (phones) */
	--bp-landing-image-lg: 465px;       /* top illustration: width (850px+) */
	--bp-landing-image-h: 225px;        /* top illustration: height (phones) */
	--bp-landing-image-h-lg: 305px;     /* top illustration: height (850px+) */
	--bp-landing-image-h-sm: 230px;     /* smaller illustrations (earnings, questions) */
	--bp-landing-image-h-side: 260px;   /* Scholarship: illustrations beside lists (850px+) */
	--bp-landing-text: 520px;           /* top text column */
	--bp-landing-text-big: 560px;       /* Scholarship top text column */
	--bp-landing-col: 60%;              /* text beside a small illustration (850px+) */
	--bp-landing-btn: 315px;            /* button width */
	--bp-landing-btn-big: 380px;        /* earnings band button */
	--bp-landing-btn-card: 175px;       /* card buttons */
	--bp-landing-video: 850px;          /* video / banner width */
	--bp-steps-circle: 34px;            /* step numbers */
	--bp-steps-max: 585px;              /* Scholarship steps column */
	--bp-steps-min: 70px;               /* Scholarship step height */
	--bp-steps-line: 80%;               /* line between step numbers */
	--bp-steps-line-top: 42px;          /* where that line starts */
	--bp-steps-line-top-lg: 46px;       /* same, Scholarship */
	--bp-check: 18px;                   /* ticks, crosses and Yes / No circles */
	--bp-check-dot: 14px;               /* Yes / No chosen dot */
	--bp-checks-max: 590px;             /* Scholarship requirements column */
	--bp-who-approved: 660px;           /* Affiliates: approved cards column (850px+) */
	--bp-who-refused: 430px;            /* Affiliates: not approved box (850px+) */
	--bp-intro-max: 460px;              /* Affiliates: text under "who can join" */
	--bp-card-max: 500px;               /* promotion cards */
	--bp-card-basis: 350px;
	--bp-card-image-h: 140px;
	--bp-card-image-w: 205px;
	--bp-card-text: 270px;
	--bp-winner-min: 210px;             /* Scholarship: one year of winners */
	--bp-winner-dot: 25px;
	--bp-lh-19: 19px;                   /* landing page text line heights, like the reference */
	--bp-lh-24: 24px;
	--bp-lh-25: 25px;
	--bp-lh-32: 32px;
	--bp-lh-tight: 1.1;
	--bp-lh-list: 1.4;
	--bp-notice-page-bg: #fff8e5;       /* "Awaiting client content" note (editors only) */
	--bp-notice-page-line: #f0b849;

	/* Card backgrounds ("Why buy textbooks" cards) */
	--bp-card-green: #eaefeb;
	--bp-card-lime: #f2f6e9;
	--bp-card-peach: #fdecdc;

	/* States */
	--bp-error: #b8330a;                /* form errors (darker orange, readable on light blue) */
	--bp-focus: var(--bp-accent-hover); /* keyboard focus ring */
	--bp-focus-on-dark: var(--bp-white);
	--bp-focus-width: 2px;
	--bp-video-button: rgba(33, 33, 33, 0.8);
	--bp-video-red: #ff0000;

	/* Screen-reader "skip link" (WordPress standard colours) */
	--bp-sr-bg: #f1f1f1;
	--bp-sr-text: #21759b;

	/* Fonts */
	--bp-font-body: Roboto, "Roboto Fallback", Tahoma, Helvetica, sans-serif;
	--bp-font-heading: Oswald, "Arial Narrow", Impact, sans-serif;
	--bp-font-system: sans-serif;       /* notices, like the reference */
	--bp-font-blog: Bitter, Georgia, serif; /* blog text, like the reference blog */

	/* Type scale */
	--bp-fs-badge: 7px;
	--bp-fs-xxs: 0.74rem;
	--bp-fs-xs: 0.75rem;                /* 12px */
	--bp-fs-sm: 0.875rem;               /* 14px */
	--bp-fs-base: 1rem;                 /* 16px */
	--bp-fs-md: 1.125rem;               /* 18px */
	--bp-fs-lg: 20px;
	--bp-fs-xl: 24px;
	--bp-fs-2xl: 28px;                  /* section titles */
	--bp-fs-3xl: 40px;                  /* book price */
	--bp-fs-4xl: 42px;                  /* hero title */
	--bp-fs-logo-sm: 34px;
	--bp-fs-logo-lg: 46px;
	--bp-fs-logo-stacked-sm: 27px;      /* logo big line when the name has a small line above */
	--bp-fs-logo-stacked-lg: 36px;
	--bp-fs-logo-top: 0.42em;           /* logo small line ("BEST COMPARE"), relative to the big line */
	--bp-fs-8: 8px;                     /* offer "i" icon */
	--bp-fs-10: 10px;
	--bp-fs-11: 11px;                   /* blog search / archive label */
	--bp-fs-22: 22px;
	--bp-fs-26: 26px;
	--bp-fs-30: 30px;                   /* blog search / archive title */
	--bp-fs-34: 34px;                   /* watchlist best price (tablet) */
	--bp-fs-32: 32px;                   /* headings inside blog posts */
	--bp-fs-36: 36px;                   /* best price (mobile) */
	--bp-fs-46: 46px;                   /* blog post title (tablet / desktop) */
	--bp-fs-blog: 19px;                 /* blog text */
	--bp-fs-62: 62px;                   /* best price (desktop) */

	/* Line heights */
	--bp-lh-none: 1;
	--bp-lh-base: 1.15;
	--bp-lh-heading: 1.3;
	--bp-lh-relaxed: 1.5;
	--bp-lh-text: 1.6;                  /* blog text */
	--bp-lh-tooltip: 1.4;
	--bp-lh-input: 22px;
	--bp-lh-icon: 20px;

	/* Letter spacing */
	--bp-ls-wide: 1px;
	--bp-ls-label: 2px;                 /* blog search / archive label */
	--bp-ls-heading: -0.3px;
	--bp-ls-tight: -0.45px;
	--bp-ls-logo: -0.5px;
	--bp-ls-logo-top: 0.08em;

	/* Spacing (named by pixel size, taken from the reference) */
	--bp-space-1: 1px;
	--bp-space-2: 2px;
	--bp-space-3: 3px;
	--bp-space-4: 4px;
	--bp-space-5: 5px;
	--bp-space-6: 6px;
	--bp-space-7: 7px;
	--bp-space-8: 8px;
	--bp-space-9: 9px;
	--bp-space-10: 10px;
	--bp-space-11: 11px;
	--bp-space-12: 12px;
	--bp-space-13: 13px;
	--bp-space-14: 14px;
	--bp-space-15: 15px;
	--bp-space-16: 16px;
	--bp-space-17: 17px;
	--bp-space-18: 18px;
	--bp-space-19: 19px;
	--bp-space-20: 20px;
	--bp-space-22: 22px;
	--bp-space-23: 23px;
	--bp-space-24: 24px;
	--bp-space-25: 25px;
	--bp-space-27: 27px;
	--bp-space-30: 30px;
	--bp-space-32: 32px;
	--bp-space-33: 33px;
	--bp-space-34: 34px;
	--bp-space-35: 35px;
	--bp-space-37: 37px;
	--bp-space-40: 40px;
	--bp-space-45: 45px;
	--bp-space-46: 46px;
	--bp-space-48: 48px;
	--bp-space-50: 50px;
	--bp-space-52: 52px;
	--bp-space-55: 55px;
	--bp-space-60: 60px;
	--bp-space-62: 62px;
	--bp-space-65: 65px;
	--bp-space-70: 70px;
	--bp-space-74: 74px;
	--bp-space-80: 80px;
	--bp-space-90: 90px;

	/* Layout */
	--bp-container: 1200px;
	--bp-blog-main: 66%;                /* posts column beside the sidebar (1100px+) */
	--bp-blog-side: 30%;                /* sidebar column (1100px+) */
	--bp-blog-widget-max-sm: 400px;     /* sidebar under the posts (phones) */
	--bp-blog-widget-max: 500px;        /* sidebar under the posts (740px to 1100px) */
	--bp-blog-image-height: 210px;      /* sidebar post images */
	--bp-blog-related-image: 174px;     /* "You may also like" images */

	/* Border widths */
	--bp-border-1: 1px;
	--bp-border-2: 2px;
	--bp-border-3: 3px;
	--bp-border-4: 4px;
	--bp-border-5: 5px;                /* blog sidebar title bar, quotes */
	--bp-border-10: 10px;              /* speech bubble tail (reviews) */
	--bp-border-20: 20px;              /* white frame around the video */

	/* Radii */
	--bp-radius-xs: 2px;
	--bp-radius-sm: 3px;
	--bp-radius-md: 4px;
	--bp-radius-lg: 5px;
	--bp-radius-xl: 12px;
	--bp-radius-round: 50%;

	/* Shadows */
	--bp-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	--bp-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.25);
	--bp-shadow-focus: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	--bp-shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);  /* best price card */
	--bp-shadow-row: 0 2px 2px rgba(0, 0, 0, 0.25);   /* offer rows, title bars, cards */
	--bp-shadow-menu: 0 2px 4px rgba(0, 0, 0, 0.25);  /* account dropdown */
	--bp-shadow-up: 0 -5px 6px -5px rgba(0, 0, 0, 0.1); /* filters panel OK bar */
	--bp-shadow-tooltip: 0 4px 14px -2px rgba(0, 8, 16, 0.08);
	--bp-shadow-notice: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
	--bp-shadow-hero-inset: inset 0 -4px 12px 0 rgba(0, 0, 0, 0.1); /* soft line at the bottom of the blog hero */

	/* Loader (8 dots in a ring, like the reference) */
	--bp-spinner-dot: 5px;             /* dot size */
	--bp-spinner-radius: 10px;         /* ring radius */
}

/* ==========================================================================
   2. Global (every page)
   ========================================================================== */

/* ==========================================================================
   2.1 Reset / base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 400;
	line-height: var(--bp-lh-base);
	color: var(--bp-text);
	background-color: var(--bp-white);
	-webkit-font-smoothing: antialiased;
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--bp-font-heading);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a,
a:visited {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	max-width: 100%;
	vertical-align: middle;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: var(--bp-lh-base);
	margin: 0;
}

button {
	cursor: pointer;
}

/*
Keyboard focus: a visible ring for keyboard users (:focus-visible does not show on mouse clicks,
except in text inputs, which is normal browser behaviour). White on the dark header/footer.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-header :focus-visible,
.bp-footer :focus-visible {
	outline-color: var(--bp-focus-on-dark);
}

/*
Inline SVG icon colours. Icons use these classes instead of fill="#..." attributes,
so they follow the tokens (and the Customize → Colors settings).
*/
.bp-fill-primary { fill: var(--bp-primary); }
.bp-fill-accent { fill: var(--bp-accent); }
.bp-fill-secondary { fill: var(--bp-secondary); }
.bp-fill-white { fill: var(--bp-white); }
.bp-fill-current { fill: currentColor; }
.bp-fill-icon-bg { fill: var(--bp-icon-bg); }
.bp-stroke-primary { stroke: var(--bp-primary); }
.bp-stroke-accent { stroke: var(--bp-accent); }
.bp-stroke-secondary { stroke: var(--bp-secondary); }
.bp-stroke-white { stroke: var(--bp-white); }
.bp-stroke-current { fill: none; stroke: currentColor; }
.bp-fill-black { fill: var(--bp-black); }
.bp-fill-grey { fill: var(--bp-grey); }
.bp-fill-amazon { fill: var(--bp-brand-amazon); }
.bp-fill-facebook { fill: var(--bp-brand-facebook); }
.bp-fill-google-blue { fill: var(--bp-brand-google-blue); }
.bp-fill-google-red { fill: var(--bp-brand-google-red); }
.bp-fill-google-yellow { fill: var(--bp-brand-google-yellow); }
.bp-fill-google-green { fill: var(--bp-brand-google-green); }

/* Accessibility helpers (kept from Underscores) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: calc(-1 * var(--bp-space-1));
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--bp-sr-bg);
	border-radius: var(--bp-radius-sm);
	box-shadow: var(--bp-shadow-focus);
	clip: auto !important;
	clip-path: none;
	color: var(--bp-sr-text);
	display: block;
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: var(--bp-space-15) var(--bp-space-23) var(--bp-space-14);
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1.5em 0;
}

.alignright {
	float: right;
	margin: 0 0 1.5em 1.5em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   2.2 Layout container
   ========================================================================== */
.bp-container {
	width: 100%;
	max-width: var(--bp-container);
	margin: 0 auto;
	padding: 0 var(--bp-space-20);
}

@media (min-width: 740px) {
	.bp-container {
		padding: 0 var(--bp-space-30);
	}
}

@media (min-width: 1100px) {
	.bp-container {
		padding: 0 var(--bp-space-40);
	}
}

.site-main {
	flex: 1 0 auto;
	color: var(--bp-primary);
}

/* ==========================================================================
   2.3 Shared section title
   ========================================================================== */
.bp-title {
	margin-top: var(--bp-space-10);
	margin-bottom: var(--bp-space-20);
	font-size: var(--bp-fs-2xl);
	color: var(--bp-primary);
}

.bp-title--center {
	text-align: center;
}

/* ==========================================================================
   2.4 Buttons
   ========================================================================== */
.bp-btn,
.bp-btn:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--bp-space-15) var(--bp-space-24);
	border: 0;
	border-radius: var(--bp-radius-xs);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 400;
	line-height: var(--bp-lh-none);
	color: var(--bp-white);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-btn--accent,
.bp-btn--accent:visited {
	background-color: var(--bp-accent);
}

.bp-btn--accent:hover,
.bp-btn--accent:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

.bp-btn--teal,
.bp-btn--teal:visited {
	background-color: var(--bp-secondary);
}

.bp-btn--teal:hover,
.bp-btn--teal:focus {
	background-color: var(--bp-secondary-hover);
	color: var(--bp-hover-text);
}

/* ==========================================================================
   2.5 Header
   ========================================================================== */
.bp-header {
	position: sticky;
	top: 0;
	z-index: 1070;
	background-color: var(--bp-primary);
}

/* Logged-in admin bar: keep the sticky header below it (WordPress admin-bar breakpoints 601 / 783 px) */
.admin-bar .bp-header {
	top: 0;
}

@media (min-width: 601px) {
	.admin-bar .bp-header {
		top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar .bp-header {
		top: 32px;
	}
}

.bp-header__inner {
	display: flex;
	align-items: center;
	padding-top: var(--bp-space-13);
	padding-bottom: var(--bp-space-13);
}

@media (min-width: 600px) {
	.bp-header__inner {
		padding-top: var(--bp-space-18);
		padding-bottom: var(--bp-space-18);
	}
}

@media (min-width: 1100px) {
	.bp-header__inner {
		min-height: 99px;
		padding: var(--bp-space-20) var(--bp-space-40);
	}
}

/* Logo */
.bp-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 41px;
}

.bp-logo img {
	width: auto;
	height: 41px;
}

.bp-logo__icon {
	width: 40px;
	height: 41px;
	margin-right: var(--bp-space-6);
}

.bp-logo__text {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-logo-sm);
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-logo);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bp-white);
}

.bp-logo__text span {
	color: var(--bp-accent);
}

/* Longer names (header.php): small white line above the big two-word line, e.g. "BEST COMPARE" over "BOOKPRICE" */
.bp-logo__text--stacked {
	font-size: var(--bp-fs-logo-stacked-sm);
}

.bp-logo__text .bp-logo__top {
	display: block;
	margin-bottom: var(--bp-space-2);
	font-size: var(--bp-fs-logo-top);
	letter-spacing: var(--bp-ls-logo-top);
	color: var(--bp-white);
}

@media (min-width: 1100px) {
	.bp-logo {
		height: 55px;
	}

	.bp-logo img {
		height: 55px;
	}

	.bp-logo__icon {
		width: 58px;
		height: 55px;
		margin-right: var(--bp-space-8);
	}

	.bp-logo__text {
		font-size: var(--bp-fs-logo-lg);
	}

	.bp-logo__text--stacked {
		font-size: var(--bp-fs-logo-stacked-lg);
	}
}

/* Navigation wrapper */
.bp-nav {
	margin-left: auto;
}

/* Burger button (mobile + tablet) */
.bp-burger {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
}

@media (min-width: 740px) {
	.bp-burger {
		width: 44px;
		height: 44px;
	}
}

.bp-burger__icon,
.bp-burger__icon::before,
.bp-burger__icon::after {
	position: absolute;
	left: 50%;
	display: block;
	width: 32px;
	height: 4px;
	background: var(--bp-white);
	transition: 0.4s ease-in-out;
}

.bp-burger__icon {
	top: 50%;
	transform: translate(-50%, -50%);
}

.bp-burger__icon::before,
.bp-burger__icon::after {
	content: "";
	transform: translateX(-50%);
}

.bp-burger__icon::before {
	top: -10px;
}

.bp-burger__icon::after {
	top: 10px;
}

.bp-nav.toggled .bp-burger__icon {
	background: transparent;
}

.bp-nav.toggled .bp-burger__icon::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}

.bp-nav.toggled .bp-burger__icon::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* Mobile + tablet menu: dark blue panel under the header, big white uppercase links */
.bp-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	background-color: var(--bp-primary);
}

.bp-nav.toggled .bp-nav__panel {
	display: block;
}

.bp-nav__menu {
	padding: var(--bp-space-10) var(--bp-space-10) var(--bp-space-20);
}

.bp-nav__menu a,
.bp-nav__menu a:visited {
	display: block;
	padding: var(--bp-space-10) var(--bp-space-15);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-xl);
	line-height: var(--bp-lh-base);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bp-white);
	transition: color 0.3s;
}

.bp-nav__menu a:hover,
.bp-nav__menu a:focus {
	color: var(--bp-nav-hover);
}

/* Current page's link, and the last tapped link (.is-active, set in assets/js/main.js): orange on a white tab */
.bp-nav__menu .current-menu-item > a,
.bp-nav__menu .is-active > a {
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	color: var(--bp-nav-hover);
}

/* Page behind the open menu is dimmed (body class added in assets/js/main.js) */
.bp-menu-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 110;
	background-color: var(--bp-overlay);
}

/* Desktop header: links in one row, Log In / Sign Up as buttons */
@media (min-width: 1100px) {
	.bp-burger {
		display: none;
	}

	.bp-menu-open::after {
		display: none;
	}

	.bp-nav {
		width: 100%;
		padding-left: var(--bp-space-10);
	}

	.bp-nav__panel {
		position: static;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: none;
	}

	.bp-nav__menu {
		display: flex;
		align-items: center;
		padding: 0;
	}

	.bp-nav__menu a {
		padding: var(--bp-space-5) var(--bp-space-10);
	}

	/* Desktop: the current page's link is only orange (no white tab) */
	.bp-nav__menu .current-menu-item > a,
	.bp-nav__menu .is-active > a {
		border-radius: 0;
		background: none;
	}

	/* Menu items with the class "show-only-in-mobile" (e.g. Recently Viewed) only show in the mobile menu */
	.bp-nav__menu > li.show-only-in-mobile {
		display: none;
	}

	.bp-nav__menu > li.log-in {
		padding-left: var(--bp-space-20);
	}

	.bp-nav__menu > li.sign-up {
		padding-left: var(--bp-space-10);
	}

	/* Log In / Sign Up buttons (menu items with class "log-in" / "sign-up") */
	.bp-nav__menu .log-in > a,
	.bp-nav__menu .log-in > a:visited,
	.bp-nav__menu .sign-up > a,
	.bp-nav__menu .sign-up > a:visited {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 110px;
		padding: var(--bp-space-13) var(--bp-space-16);
		border: var(--bp-border-1) solid var(--bp-accent);
		border-radius: var(--bp-radius-xs);
		font-family: var(--bp-font-body);
		font-size: var(--bp-fs-md);
		font-weight: 700;
		line-height: var(--bp-lh-none);
		letter-spacing: var(--bp-ls-wide);
		color: var(--bp-white);
		background-color: var(--bp-accent);
		transition: color 0.3s, background-color 0.3s;
	}

	.bp-nav__menu .sign-up > a:hover,
	.bp-nav__menu .sign-up > a:focus {
		background-color: var(--bp-accent-hover);
		border-color: var(--bp-accent-hover);
		color: var(--bp-hover-text);
	}

	/* Log In is the outlined one */
	.bp-nav__menu .log-in > a,
	.bp-nav__menu .log-in > a:visited {
		border-color: var(--bp-white);
		background-color: transparent;
	}

	.bp-nav__menu .log-in > a:hover,
	.bp-nav__menu .log-in > a:focus {
		background-color: var(--bp-accent-hover);
		border-color: var(--bp-accent-hover);
		color: var(--bp-hover-text);
	}

	/* Logged in: the Log In button becomes the account icon */
	.bp-nav__menu .log-in.bp-account > a,
	.bp-nav__menu .log-in.bp-account > a:visited {
		width: auto;
		padding: var(--bp-space-5) var(--bp-space-10);
		border: 0;
		background: none;
		color: var(--bp-white);
	}

	.bp-nav__menu .log-in.bp-account > a:hover,
	.bp-nav__menu .log-in.bp-account > a:focus {
		background: none;
		color: var(--bp-nav-hover);
	}

	.bp-nav__menu .bp-account__icon {
		width: 32px;
		height: 32px;
	}

	.bp-nav__menu .bp-watchlist__icon {
		width: 28px;
		height: 28px;
	}

	/* Desktop shows the icon only; the text stays for screen readers */
	.bp-watchlist__label,
	.bp-account__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Watchlist heart (menu item with the class "watchlist") + its label (mobile menu) */
.bp-watchlist > a {
	display: flex;
	align-items: center;
	gap: var(--bp-space-10);
}

.bp-watchlist__heart {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.bp-watchlist__icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Number of saved books (logged in, hidden at 0) */
.bp-watchlist__count {
	position: absolute;
	top: calc(-1 * var(--bp-space-5));
	right: calc(-1 * var(--bp-space-8));
	min-width: var(--bp-space-16);
	height: var(--bp-space-16);
	padding: 0 var(--bp-space-3);
	border-radius: var(--bp-space-8);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-10);
	font-weight: 700;
	line-height: var(--bp-space-16);
	text-align: center;
	color: var(--bp-white);
}

.bp-watchlist__count[hidden] {
	display: none;
}

/* Account icon + "My Account" (mobile menu) */
.bp-account > a {
	display: flex;
	align-items: center;
	gap: var(--bp-space-10);
}

.bp-account__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Account dropdown (Account / Log Out). Mobile: two links under "My Account" in the menu. */
.bp-profile-menu[hidden] {
	display: none;
}

.bp-nav__menu .bp-profile-menu__link,
.bp-nav__menu .bp-profile-menu__link:visited {
	display: flex;
	width: 100%;
	margin: 0;
	padding: var(--bp-space-10) var(--bp-space-15) var(--bp-space-10) var(--bp-space-50);
	border: 0;
	background: none;
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	line-height: var(--bp-lh-base);
	text-align: left;
	text-transform: uppercase;
	color: var(--bp-white);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-nav__menu .bp-profile-menu__link:hover,
.bp-nav__menu .bp-profile-menu__link:focus {
	color: var(--bp-nav-hover);
}

.bp-profile-menu__arrow {
	display: none;
}

@media (min-width: 1100px) {
	.bp-nav__menu > li.bp-account {
		position: relative;
	}

	.bp-profile-menu {
		position: absolute;
		top: calc(100% + var(--bp-space-15));
		right: 0;
		z-index: 120;
		display: flex;
		width: 230px;
		border-radius: var(--bp-radius-md);
		background-color: var(--bp-white);
		box-shadow: var(--bp-shadow-menu);
	}

	.bp-profile-menu__list {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: var(--bp-space-10);
	}

	.bp-nav__menu .bp-profile-menu__link,
	.bp-nav__menu .bp-profile-menu__link:visited {
		padding: var(--bp-space-10);
		color: var(--bp-black);
	}

	.bp-nav__menu .bp-profile-menu__link:hover,
	.bp-nav__menu .bp-profile-menu__link:focus {
		background-color: var(--bp-surface);
		color: var(--bp-accent);
	}

	/* Small white arrow pointing up at the icon */
	.bp-profile-menu__arrow {
		position: absolute;
		top: calc(-1 * var(--bp-space-5));
		right: var(--bp-space-18);
		z-index: -1;
		display: block;
		width: 15px;
		height: 22px;
		background-color: var(--bp-white);
		transform: rotate(45deg);
	}
}

/* Book page: ISBN search in the header (below the logo on phones, beside it from 600px) */
.bp-header--search .bp-header__inner {
	flex-wrap: wrap;
}

.bp-header-search {
	position: relative;
	display: flex;
	order: 3;
	width: 100%;
	margin: var(--bp-space-20) 0 calc(-1 * var(--bp-space-5));
}

.bp-header-search__icon {
	position: absolute;
	top: 50%;
	left: var(--bp-space-10);
	z-index: 1;
	width: 16px;
	height: 16px;
	border: var(--bp-border-2) solid var(--bp-primary);
	border-radius: var(--bp-radius-round);
	transform: translateY(-60%);
}

.bp-header-search__icon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	width: 100%;
	height: 2px;
	background-color: var(--bp-primary);
	transform: rotate(45deg) translate(-25%, -25%);
	transform-origin: left center;
}

.bp-header-search__input {
	display: block;
	width: 100%;
	height: 38px;
	padding: var(--bp-space-10) var(--bp-space-40);
	border: 0;
	border-radius: var(--bp-radius-md) 0 0 var(--bp-radius-md);
	background-color: var(--bp-white);
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-input);
	color: var(--bp-black);
}

.bp-header-search__input::placeholder {
	color: var(--bp-primary);
}

.bp-header-search__input:placeholder-shown {
	font-size: var(--bp-fs-xs);
	text-overflow: ellipsis;
}

.bp-header-search__button {
	flex-shrink: 0;
	margin-left: calc(-1 * var(--bp-space-2));
	padding: var(--bp-space-10) var(--bp-space-15);
	border: 0;
	border-radius: 0 var(--bp-radius-md) var(--bp-radius-md) 0;
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	color: var(--bp-white);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-header-search__button:hover,
.bp-header-search__button:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

@media (min-width: 600px) {
	.bp-header-search {
		flex: 1;
		order: 0;
		width: auto;
		max-width: 500px;
		margin: 0 var(--bp-space-20) 0 var(--bp-space-10);
	}
}

@media (min-width: 740px) {
	.bp-header-search__input {
		height: auto;
		border-radius: var(--bp-radius-xs) 0 0 var(--bp-radius-xs);
	}

	.bp-header-search__input:placeholder-shown {
		font-size: var(--bp-fs-base);
	}

	.bp-header-search__button {
		margin-left: 0;
		padding: var(--bp-space-14) var(--bp-space-20);
		border-radius: 0 var(--bp-radius-xs) var(--bp-radius-xs) 0;
		font-size: var(--bp-fs-md);
	}
}

@media (min-width: 1100px) {
	.bp-header-search {
		max-width: none;
		margin: 0 var(--bp-space-10) 0 var(--bp-space-15);
	}

	.bp-header--search .bp-nav {
		flex-shrink: 0;
		width: auto;
	}
}

/* ==========================================================================
   2.6 Log in / Sign up popups (template-parts/auth-modals.php, opened in assets/js/main.js)
   ========================================================================== */
.bp-modal {
	position: fixed;
	inset: 0;
	z-index: 1080;
}

.bp-modal[hidden] {
	display: none;
}

/* Logged-in admin bar: start the popup below it (WordPress admin-bar heights 46 / 32 px) */
.admin-bar .bp-modal {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .bp-modal {
		top: 32px;
	}
}

/* No page scrolling behind an open popup */
.bp-modal-open {
	overflow: hidden;
}

.bp-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--bp-overlay);
}

.bp-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(100% - var(--bp-space-20));
	max-width: 600px;
	max-height: calc(100% - var(--bp-space-50));
	margin: var(--bp-space-20) auto 0;
	padding: var(--bp-space-10);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	overflow: hidden;
}

.bp-modal__header {
	position: relative;
	padding: var(--bp-space-20) var(--bp-space-10) 0;
}

.bp-modal__title {
	margin: 0;
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-md);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-black);
}

/* Close button: an X drawn with two lines */
.bp-modal__close {
	position: absolute;
	top: var(--bp-space-5);
	right: 0;
	width: 16px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-modal__close::before,
.bp-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 100%;
	background-color: var(--bp-text);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: background-color 0.3s;
}

.bp-modal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bp-modal__close:hover::before,
.bp-modal__close:hover::after,
.bp-modal__close:focus::before,
.bp-modal__close:focus::after {
	background-color: var(--bp-accent-hover);
}

.bp-modal__content {
	padding: var(--bp-space-10);
	overflow-y: auto;
	font-size: var(--bp-fs-sm);
	color: var(--bp-text);
}

@media (min-width: 740px) {
	.bp-modal__box {
		padding-bottom: var(--bp-space-20);
	}

	.bp-modal__header {
		padding: var(--bp-space-14) var(--bp-space-22) 0;
	}

	.bp-modal__title {
		font-size: var(--bp-fs-2xl);
	}

	.bp-modal__content {
		padding: var(--bp-space-10) var(--bp-space-22);
		font-size: var(--bp-fs-md);
	}
}

/* Text fields with a label that moves up when the field is used */
.bp-field {
	position: relative;
	margin-bottom: var(--bp-space-20);
	padding-top: var(--bp-space-20);
}

.bp-field__input {
	width: 100%;
	height: 32px;
	padding: 0;
	border: 0;
	border-bottom: var(--bp-border-1) solid var(--bp-grey-light);
	border-radius: 0;
	background: none;
	font-size: var(--bp-fs-base);
	color: var(--bp-black);
}

.bp-field__input:focus,
.bp-field__input:focus-visible {
	outline: none;
	border-bottom-color: var(--bp-primary);
}

.bp-field__input::placeholder {
	color: transparent;
}

.bp-field__label {
	position: absolute;
	left: 0;
	bottom: 0;
	line-height: 1.7;
	color: var(--bp-field-label);
	pointer-events: none;
	transition: 0.2s;
}

.bp-field__input:focus + .bp-field__label,
.bp-field__input:not(:placeholder-shown) + .bp-field__label {
	bottom: calc(100% - var(--bp-space-20));
	font-size: var(--bp-fs-xs);
	font-weight: 500;
}

.bp-field--password .bp-field__input {
	padding-right: var(--bp-space-30);
}

/* Show password (eye) button */
.bp-field__eye {
	position: absolute;
	top: 70%;
	right: var(--bp-space-3);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bp-text);
	cursor: pointer;
	transform: translateY(-50%);
}

.bp-field__eye svg {
	fill: currentColor;
}

.bp-field__eye:hover,
.bp-field__eye:focus,
.bp-field__eye[aria-pressed="true"] {
	color: var(--bp-accent);
}

/* Orange text links and buttons: Forgot password?, Sign up, Log in */
.bp-auth-link,
.bp-auth-link:visited {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	color: var(--bp-accent);
	cursor: pointer;
}

.bp-auth-link:hover,
.bp-auth-link:focus {
	color: var(--bp-accent-text-hover);
}

.bp-auth-form__sub {
	display: flex;
	justify-content: flex-end;
}

/* Checkbox (Newsletter) */
.bp-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--bp-space-20);
	font-size: var(--bp-fs-sm);
	line-height: 1.8;
	color: var(--bp-text);
	cursor: pointer;
}

.bp-check__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
}

.bp-check__box {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: var(--bp-space-3) var(--bp-space-5) 0 0;
	border: var(--bp-border-1) solid var(--bp-text);
	border-radius: var(--bp-radius-xs);
}

.bp-check__input:checked + .bp-check__box {
	border-color: var(--bp-accent);
	background-color: var(--bp-accent);
}

/* Tick mark */
.bp-check__input:checked + .bp-check__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 5px;
	height: 10px;
	border: solid var(--bp-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bp-check__input:focus-visible + .bp-check__box {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

/* Error / success messages at the top of the forms */
.bp-auth-form__error,
.bp-auth-form__success {
	margin: 0 0 var(--bp-space-10);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

.bp-auth-form__error {
	color: var(--bp-error);
}

.bp-auth-form__success {
	color: var(--bp-free);
}

.bp-auth-form__intro {
	margin: 0;
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

/* Hidden field that only bots fill in */
.bp-auth-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* My Account popup */
.bp-account__email {
	margin: 0;
	overflow-wrap: anywhere;
}

/* LOGIN / SIGN UP button */
.bp-auth-form__submit {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 48px;
	margin-top: var(--bp-space-20);
	padding: var(--bp-space-15) var(--bp-space-24);
	border: 0;
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	color: var(--bp-white);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-auth-form__submit:visited {
	color: var(--bp-white);
}

/* While the form is being sent */
.bp-auth-form__submit.is-loading {
	opacity: 0.7;
	cursor: wait;
}

.bp-auth-form__submit:hover,
.bp-auth-form__submit:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

/* Line, "or continue with", line */
.bp-auth-or {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--bp-space-20) 0 0;
	font-size: var(--bp-fs-lg);
	white-space: nowrap;
	color: var(--bp-text);
}

.bp-auth-or::before,
.bp-auth-or::after {
	content: "";
	display: block;
	width: 100%;
	height: var(--bp-border-1);
	background-color: var(--bp-divider-light);
}

.bp-auth-or::before {
	margin-right: var(--bp-space-8);
}

.bp-auth-or::after {
	margin-left: var(--bp-space-8);
}

/* Social buttons */
.bp-auth-social {
	display: flex;
	column-gap: var(--bp-space-8);
	margin-top: var(--bp-space-20);
}

.bp-auth-social__button {
	display: flex;
	flex-basis: 100%;
	justify-content: center;
	align-items: center;
	width: 55px;
	height: 45px;
	padding: 0;
	border: var(--bp-border-1) solid var(--bp-social-border);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	cursor: pointer;
}

.bp-auth-social__button:hover,
.bp-auth-social__button:focus {
	background-color: var(--bp-social-hover);
	opacity: 0.8;
}

@media (min-width: 600px) {
	.bp-auth-social {
		justify-content: center;
		column-gap: var(--bp-space-16);
	}

	.bp-auth-social__button {
		flex-basis: auto;
		width: 90px;
	}
}

/* Need an account? SIGN UP */
.bp-auth-switch {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--bp-space-15) 0 0;
	font-size: var(--bp-fs-sm);
}

.bp-auth-switch .bp-auth-link {
	margin-left: var(--bp-space-3);
	text-transform: uppercase;
}

/* ==========================================================================
   2.7 Footer
   ========================================================================== */
.bp-footer {
	flex: 0 1 auto;
	padding: var(--bp-space-24) 0;
	background-color: var(--bp-primary);
	color: var(--bp-footer-text);
}

.bp-footer__inner {
	display: flex;
	flex-direction: column;
}

.bp-footer__main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	font-size: var(--bp-fs-md);
}

@media (min-width: 850px) {
	.bp-footer__main {
		flex-direction: row;
		align-items: flex-start;
		column-gap: var(--bp-space-4);
	}
}

.bp-footer__columns {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-24) var(--bp-space-20);
	width: 100%;
}

@media (min-width: 600px) {
	.bp-footer__columns {
		flex-direction: row;
		justify-content: space-between;
		max-width: 730px;
	}
}

/* Footer menu: each top-level item ("footer-menu-title") is one column */
.bp-footer__columns > .footer-menu-title {
	min-width: 100px;
}

/* Column title (About, Categories, ...) */
.bp-footer .footer-menu-title > a,
.bp-footer .footer-menu-title > a:visited,
.bp-footer .footer-menu-title > a:hover,
.bp-footer .footer-menu-title > a:focus {
	display: block;
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
	color: var(--bp-footer-title);
}

/* Links under each title ("footer-sub-menu-links") */
.footer-menu-title > .sub-menu {
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-5);
	margin-top: var(--bp-space-12);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

@media (min-width: 740px) {
	.footer-menu-title > .sub-menu {
		font-size: var(--bp-fs-base);
	}
}

.footer-sub-menu-links > a {
	display: flex;
}

/* ---------- Mobile open/close (assets/js/main.js, part 2); from 600px every column is always open ---------- */
.bp-footer .footer-menu-title > a {
	position: relative;
	padding-right: var(--bp-space-20);
	cursor: pointer;
}

/* Chevron points up when open, down when closed */
.bp-footer__chevron {
	position: absolute;
	top: 50%;
	right: 5px;
	color: var(--bp-white);
	transform: translateY(-50%) rotate(180deg);
	transition: transform 0.3s;
}

.footer-menu-title.is-closed .bp-footer__chevron {
	transform: translateY(-50%);
}

.footer-menu-title > .sub-menu {
	max-height: 500px;
	overflow: hidden;
	transition: max-height 0.5s, margin-top 0.5s;
}

.footer-menu-title.is-closed > .sub-menu {
	max-height: 0;
	margin-top: 0;
}

@media (min-width: 600px) {
	.bp-footer .footer-menu-title > a {
		position: static;
		padding-right: 0;
	}

	.bp-footer__chevron {
		display: none;
	}

	.footer-menu-title > .sub-menu,
	.footer-menu-title.is-closed > .sub-menu {
		max-height: none;
		margin-top: var(--bp-space-12);
		overflow: visible;
	}
}

@media (min-width: 600px) {
	.footer-sub-menu-links > a {
		font-size: var(--bp-fs-md);
	}
}

.bp-footer a:hover,
.bp-footer a:focus {
	color: var(--bp-footer-link-hover);
	transition: color 0.3s; /* Colour only, so the keyboard focus ring appears instantly. */
}

/* App store badges */
.bp-footer__apps {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: var(--bp-space-30);
}

@media (min-width: 400px) {
	.bp-footer__apps {
		width: auto;
		justify-content: flex-start;
		column-gap: var(--bp-space-30);
	}
}

@media (min-width: 850px) {
	.bp-footer__apps {
		margin-top: 0;
		align-items: flex-start;
	}
}

.bp-store-badge,
.bp-store-badge:visited {
	display: flex;
	align-items: center;
	gap: var(--bp-space-6);
	width: 125px;
	height: 37px;
	padding: 0 var(--bp-space-8);
	border: var(--bp-border-1) solid var(--bp-badge-border);
	border-radius: var(--bp-radius-lg);
	background-color: var(--bp-white);
	color: var(--bp-black);
}

.bp-footer .bp-store-badge:hover,
.bp-footer .bp-store-badge:focus {
	color: var(--bp-black);
	opacity: 0.85;
}

.bp-store-badge svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.bp-store-badge__text {
	display: flex;
	flex-direction: column;
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-none);
	white-space: nowrap;
}

.bp-store-badge__text small {
	font-size: var(--bp-fs-badge);
	text-transform: uppercase;
}

.bp-footer__separator {
	width: 100%;
	height: 1px;
	margin: var(--bp-space-30) 0;
	background-color: var(--bp-divider);
}

.bp-footer__bottom {
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-15);
}

@media (min-width: 1100px) {
	.bp-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

.bp-footer__social {
	width: 100%;
	padding-bottom: var(--bp-space-15);
}

@media (min-width: 400px) {
	.bp-footer__social {
		max-width: 200px;
		margin: 0 auto;
	}
}

@media (min-width: 1100px) {
	.bp-footer__social {
		order: 1;
		margin: 0;
		padding-bottom: 0;
	}
}

.bp-footer__social ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.bp-footer__social a {
	display: flex;
}

.bp-footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.bp-footer__legal {
	display: flex;
	column-gap: var(--bp-space-15);
	font-size: var(--bp-fs-sm);
	color: var(--bp-footer-muted);
}

.bp-footer__legal a:hover,
.bp-footer__legal a:focus {
	color: var(--bp-white);
}

.bp-footer__copyright {
	margin-top: var(--bp-space-15);
	font-size: var(--bp-fs-sm);
	color: var(--bp-grey);
	text-align: left;
}

/* ==========================================================================
   2.8 Notices: small messages at the bottom left (created in assets/js/main.js, section 7)
   Like the reference: slide in from the left, a coloured bar shrinks for 7 seconds
   (paused on hover), then slide out. Phones: full width at the bottom of the screen.
   ========================================================================== */
.bp-notices {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
}

.bp-notice {
	position: relative;
	display: flex;
	justify-content: space-between;
	min-height: var(--bp-notice-min-height);
	padding: var(--bp-space-8);
	overflow: hidden;
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-notice);
	color: var(--bp-notice-text);
	font-family: var(--bp-font-system);
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-base);
	cursor: pointer;
	animation: bp-notice-in 0.7s both;
}

.bp-notice.is-closing {
	animation: bp-notice-out 0.7s both;
}

.bp-notice__body {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	margin: auto 0;
	padding: var(--bp-space-6);
}

.bp-notice__icon {
	display: flex;
	flex-shrink: 0;
	width: 20px;
	margin-right: var(--bp-space-10);
	fill: currentColor;
	animation: bp-notice-icon 0.3s both;
}

.bp-notice--success .bp-notice__icon,
.bp-notice--success .bp-notice__bar {
	color: var(--bp-notice-success);
}

.bp-notice--warning .bp-notice__icon,
.bp-notice--warning .bp-notice__bar {
	color: var(--bp-notice-warning);
}

.bp-notice--error .bp-notice__icon,
.bp-notice--error .bp-notice__bar {
	color: var(--bp-notice-error);
}

/* X button: faint until hovered */
.bp-notice__close {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bp-black);
	opacity: 0.3;
	cursor: pointer;
	transition: opacity 0.3s;
}

.bp-notice__close:hover,
.bp-notice__close:focus-visible {
	opacity: 1;
}

.bp-notice__close svg {
	display: block;
	width: 14px;
	height: 16px;
	fill: currentColor;
}

/* Time bar: shrinks to the left, then the notice closes (animationend in main.js) */
.bp-notice__bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--bp-notice-bar);
	background-color: currentColor;
	opacity: 0.7;
	transform-origin: left;
	animation: bp-notice-time var(--bp-notice-time) linear forwards;
}

.bp-notice:hover .bp-notice__bar {
	animation-play-state: paused;
}

/* 490px+: a 320px box at the bottom left, with rounded corners and a gap between notices */
@media (min-width: 490px) {

	.bp-notices {
		right: auto;
		bottom: var(--bp-notice-offset);
		left: var(--bp-notice-offset);
		width: var(--bp-notice-width);
		padding: var(--bp-space-4);
	}

	.bp-notice {
		margin-bottom: var(--bp-space-16);
		border-radius: var(--bp-radius-md);
	}
}

@keyframes bp-notice-in {

	0%,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: translate3d(-3000px, 0, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0);
	}

	75% {
		transform: translate3d(-10px, 0, 0);
	}

	90% {
		transform: translate3d(5px, 0, 0);
	}

	100% {
		transform: none;
	}
}

@keyframes bp-notice-out {

	20% {
		opacity: 1;
		transform: translate3d(20px, 0, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0);
	}
}

@keyframes bp-notice-icon {

	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

@keyframes bp-notice-time {

	0% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

/* ==========================================================================
   3. Homepage (Homepage template)
   ========================================================================== */

/* Shared paragraph style used in several homepage sections */
.bp-text {
	margin: 0;
	padding-bottom: var(--bp-space-12);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

@media (min-width: 740px) {
	.bp-text {
		font-size: var(--bp-fs-lg);
		line-height: var(--bp-lh-relaxed);
	}
}

/* ==========================================================================
   3.1 Homepage: Hero / search
   ========================================================================== */
.bp-hero {
	display: flex;
	justify-content: center;
	padding-bottom: var(--bp-space-40);
	background-color: var(--bp-light-bg);
}

.bp-hero__wrap {
	display: flex;
	width: 100%;
	max-width: var(--bp-container);
}

.bp-hero__content {
	padding-bottom: var(--bp-space-20);
}

@media (min-width: 740px) {
	.bp-hero__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 85%;
		padding: 0 var(--bp-space-30);
	}
}

@media (min-width: 850px) {
	.bp-hero__content {
		width: 60%;
	}
}

@media (min-width: 1100px) {
	.bp-hero__content {
		justify-content: flex-start;
		padding-top: var(--bp-space-62);
	}
}

.bp-hero__title {
	margin-top: var(--bp-space-48);
	font-size: var(--bp-fs-2xl);
	text-align: center;
	color: var(--bp-primary);
}

@media (min-width: 600px) {
	.bp-hero__title {
		margin-bottom: var(--bp-space-5);
		font-size: var(--bp-fs-4xl);
	}

	.bp-hero__title br {
		display: none;
	}
}

@media (min-width: 740px) {
	.bp-hero__title {
		max-width: 380px;
		text-align: left;
	}
}

@media (min-width: 1100px) {
	.bp-hero__title {
		max-width: 100%;
	}
}

.bp-hero__accent {
	color: var(--bp-accent);
}

.bp-nobreak {
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.bp-nobreak {
		white-space: normal;
	}
}

/* Sell / Buy / Rent tabs */
/* Mobile: tab centred, like the heading above it. 740px+: left-aligned. */
.bp-tabs {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--bp-space-20);
	margin-bottom: var(--bp-space-25);
}

@media (min-width: 740px) {
	.bp-tabs {
		justify-content: flex-start;
	}
}

.bp-tabs__tab,
.bp-tabs__tab:visited {
	display: inline-block;
	width: 33.33%;
	padding: var(--bp-space-12) var(--bp-space-20);
	border: var(--bp-border-1) solid var(--bp-primary);
	background-color: var(--bp-white);
	font-size: var(--bp-fs-sm);
	text-align: center;
	color: var(--bp-primary);
	transition: background-color 0.3s, color 0.3s;
}

@media (min-width: 740px) {
	.bp-tabs__tab,
	.bp-tabs__tab:visited {
		width: 117px;
	}
}

@media (min-width: 1100px) {
	.bp-tabs__tab,
	.bp-tabs__tab:visited {
		width: 107px;
	}
}

.bp-tabs__tab:first-child {
	border-right: 0;
	border-radius: var(--bp-radius-sm) 0 0 var(--bp-radius-sm);
}

.bp-tabs__tab:last-child {
	border-left: 0;
	border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
}

/* A single tab on its own (Buy only): full border, all corners rounded */
.bp-tabs__tab:only-child {
	border: var(--bp-border-1) solid var(--bp-primary);
	border-radius: var(--bp-radius-sm);
}

.bp-tabs__tab:hover {
	background-color: var(--bp-accent-soft);
}

.bp-tabs__tab.is-active {
	background-color: var(--bp-accent);
	border-color: var(--bp-accent);
	color: var(--bp-white);
}

.bp-tabs__tab.is-active:hover {
	background-color: var(--bp-accent-hover);
	border-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

/* Search form */
.bp-search {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 790px;
}

.bp-search__row {
	position: relative;
	display: flex;
}

@media (min-width: 740px) {
	.bp-search__row {
		max-width: 503px;
	}
}

.bp-search__input {
	display: block;
	width: 100%;
	height: 46px;
	padding: var(--bp-space-12) var(--bp-space-34) var(--bp-space-12) var(--bp-space-18);
	border: var(--bp-border-1) solid var(--bp-primary);
	border-right: 0;
	border-radius: var(--bp-radius-sm) 0 0 var(--bp-radius-sm);
	background: var(--bp-white);
	box-shadow: none;
	outline: none; /* The focus ring comes from input:focus-visible in 2.1. */
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-input);
	color: var(--bp-black);
}

.bp-search__input:placeholder-shown {
	text-overflow: ellipsis;
}

@media (min-width: 600px) {
	.bp-search__input {
		height: 50px;
		padding: var(--bp-space-13) var(--bp-space-18);
		font-size: var(--bp-fs-md);
	}

	.bp-search__input:placeholder-shown {
		font-size: var(--bp-fs-base);
	}
}

@media (min-width: 740px) {
	.bp-search__input {
		padding-left: var(--bp-space-45);
	}
}

/* Magnifying glass drawn with CSS */
.bp-search__icon {
	display: none;
	position: absolute;
	top: 14px;
	left: 16px;
	width: 18px;
	height: 18px;
	border: var(--bp-border-3) solid var(--bp-grey-dark);
	border-radius: var(--bp-radius-round);
}

.bp-search__icon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	display: block;
	width: 100%;
	height: 3px;
	background: var(--bp-grey-dark);
	transform: rotate(45deg) translate(-25%, -25%);
	transform-origin: left center;
}

@media (min-width: 740px) {
	.bp-search__icon {
		display: block;
	}
}

.bp-search__button {
	display: block;
	flex-shrink: 0;
	padding: var(--bp-space-13) var(--bp-space-27);
	border: 0;
	border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
	background-color: var(--bp-accent);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	color: var(--bp-white);
	transition: color 0.3s, background-color 0.3s;
}

@media (min-width: 740px) {
	.bp-search__button {
		padding: var(--bp-space-16) var(--bp-space-22);
	}
}

.bp-search__button:hover,
.bp-search__button:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

/* "Try our Advanced Search" hint with the round "i" icon */
.bp-search__hint {
	position: relative;
	max-width: 525px;
	margin-bottom: calc(-1 * var(--bp-space-15));
	padding-top: var(--bp-space-10);
}

.bp-search__hint p {
	margin: var(--bp-space-3) 0 0 var(--bp-space-33);
	font-size: var(--bp-fs-base);
	color: var(--bp-primary);
}

@media (min-width: 600px) {
	.bp-search__hint p {
		margin-left: var(--bp-space-37);
	}
}

.bp-search__hint p::before {
	content: "i";
	position: absolute;
	top: 22px;
	left: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-secondary);
	line-height: var(--bp-lh-icon);
	color: var(--bp-white);
	transform: translateY(-50%);
}

.bp-search__hint a,
.bp-search__hint a:visited {
	color: var(--bp-secondary);
	text-decoration: underline;
}

/* Bookstore bubbles (right side of hero) */
.bp-bubbles {
	display: none;
}

@media (min-width: 740px) {
	.bp-bubbles {
		display: flex;
		width: 50%;
		margin-left: -10%;
		padding: var(--bp-space-24) var(--bp-space-30) 0 0;
	}
}

@media (min-width: 850px) {
	.bp-bubbles {
		width: 40%;
		margin-left: 0;
	}
}

.bp-bubbles__chart {
	position: relative;
	width: 100%;
	max-width: 450px;
	min-height: 340px;
}

@media (min-width: 1100px) {
	.bp-bubbles__chart {
		min-height: 400px;
		margin-bottom: calc(-1 * var(--bp-space-40));
	}
}

.bp-bubble {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--bp-radius-round);
	overflow: hidden;
	background-color: var(--bp-white);
}

/* Logo fits inside the circle without stretching.
   Padding is on the image so 10% is measured from the bubble, not the whole chart. */
.bp-bubble img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
}

/* Bubble sizes + positions (width / left / bottom) */
.bp-bubble:nth-child(1) { width: 26.2%;  left: 16%;   bottom: 79.2%; }
.bp-bubble:nth-child(2) { width: 22.8%;  left: 44%;   bottom: 81.2%; }
.bp-bubble:nth-child(3) { width: 31.6%;  left: 68%;   bottom: 74.2%; }
.bp-bubble:nth-child(4) { width: 24.15%; left: 21%;   bottom: 55.2%; }
.bp-bubble:nth-child(5) { width: 28.9%;  left: 47%;   bottom: 54.2%; }
.bp-bubble:nth-child(6) { width: 23.5%;  left: 0.6%;  bottom: 41%; }
.bp-bubble:nth-child(7) { width: 23.5%;  left: 24%;   bottom: 33%; }
.bp-bubble:nth-child(8) { width: 30.3%;  left: 48%;   bottom: 23.2%; }
.bp-bubble:nth-child(9) { width: 26.5%;  left: 75%;   bottom: 42%; }

@media (min-width: 850px) {
	.bp-bubble:nth-child(1) { width: 25.5%; left: 20%;   bottom: 74%; }
	.bp-bubble:nth-child(2) { width: 22.2%; left: 47%;   bottom: 76%; }
	.bp-bubble:nth-child(3) { width: 30.9%; left: 70.5%; bottom: 68%; }
	.bp-bubble:nth-child(4) { width: 23.5%; left: 26%;   bottom: 46%; }
	.bp-bubble:nth-child(5) { width: 28.2%; left: 51%;   bottom: 44%; }
	.bp-bubble:nth-child(6) { width: 22.9%; left: 4%;    bottom: 33%; }
	.bp-bubble:nth-child(7) { width: 22.9%; left: 25%;   bottom: 19%; }
	.bp-bubble:nth-child(8) { width: 29.5%; left: 48%;   bottom: 8%; }
	.bp-bubble:nth-child(9) { width: 26%;   left: 77%;   bottom: 26%; }
}

/* ==========================================================================
   3.2 Homepage: 1-2-3 steps box (overlaps the hero bottom edge)
   ========================================================================== */
.bp-steps {
	position: relative;
	background-color: var(--bp-light-bg);
}

.bp-steps__box {
	position: absolute;
	left: 20px;
	z-index: 2;
	width: calc(100% - 40px);
	margin-top: calc(-1 * var(--bp-space-32));
	background: var(--bp-white);
	border-bottom: var(--bp-border-4) solid var(--bp-secondary);
	border-radius: 0 0 var(--bp-radius-md) var(--bp-radius-md);
	box-shadow: var(--bp-shadow-soft);
}

@media (min-width: 740px) {
	.bp-steps__box {
		left: 15%;
		width: 72%;
	}
}

@media (min-width: 1100px) {
	.bp-steps__box {
		left: calc(50% - 273px);
		width: 546px;
	}
}

.bp-steps__items {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: var(--bp-space-16) 0;
}

.bp-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33%;
	margin: 0 var(--bp-space-5);
	text-align: center;
}

@media (min-width: 400px) {
	.bp-steps__item {
		max-width: 27%;
	}
}

@media (min-width: 490px) {
	.bp-steps__item {
		max-width: 22%;
	}
}

@media (min-width: 600px) {
	.bp-steps__item {
		max-width: 31%;
	}
}

@media (min-width: 850px) {
	.bp-steps__item {
		max-width: 30%;
	}
}

/* A <p>, not a heading (keeps the heading order h1 > h2), styled like the reference heading */
.bp-steps__title {
	margin: 0 0 var(--bp-space-5);
	font-family: var(--bp-font-heading);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	font-size: var(--bp-fs-base);
	text-transform: uppercase;
	color: var(--bp-accent);
}

@media (min-width: 740px) {
	.bp-steps__title {
		margin-bottom: var(--bp-space-10);
		font-size: var(--bp-fs-lg);
	}
}

.bp-steps__text {
	margin: 0;
	font-size: var(--bp-fs-xxs);
	line-height: var(--bp-lh-none);
}

@media (min-width: 375px) {
	.bp-steps__text {
		font-size: var(--bp-fs-sm);
	}
}

.bp-steps__line {
	flex-shrink: 0;
	width: 2px;
	height: 42px;
	background: var(--bp-secondary);
}

/* ==========================================================================
   3.3 Homepage: Why buy books with us (4 advantages)
   ========================================================================== */
.bp-advantages {
	padding-top: var(--bp-space-50);
	background-color: var(--bp-white);
}

.bp-advantages__content {
	padding-top: var(--bp-space-52);
	padding-bottom: var(--bp-space-24);
}

@media (min-width: 740px) {
	.bp-advantages__content {
		padding-top: var(--bp-space-48);
		padding-bottom: var(--bp-space-4);
	}
}

@media (min-width: 850px) {
	.bp-advantages__content {
		padding: var(--bp-space-48) var(--bp-space-40) var(--bp-space-4);
	}
}

.bp-advantages__title {
	margin-top: 0;
	margin-bottom: var(--bp-space-24);
	font-size: var(--bp-fs-xl);
	text-align: center;
}

@media (min-width: 740px) {
	.bp-advantages__title {
		font-size: var(--bp-fs-2xl);
	}
}

.bp-advantages__items {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 335px;
	margin: 0 auto;
}

@media (min-width: 740px) {
	.bp-advantages__items {
		flex-flow: row wrap;
		justify-content: space-between;
		max-width: none;
		margin-top: var(--bp-space-74);
	}
}

@media (min-width: 1100px) {
	.bp-advantages__items {
		flex-wrap: nowrap;
		margin-top: var(--bp-space-48);
	}
}

.bp-advantages__item {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: var(--bp-space-24);
}

@media (min-width: 740px) {
	.bp-advantages__item {
		width: 50%;
		margin-bottom: var(--bp-space-46);
	}
}

@media (min-width: 1100px) {
	.bp-advantages__item {
		margin-right: var(--bp-space-20);
	}

	.bp-advantages__item:last-child {
		margin-right: 0;
	}
}

.bp-advantages__icon {
	flex-shrink: 0;
	width: 82px;
	height: 82px;
	margin-right: var(--bp-space-10);
}

.bp-advantages__icon img {
	display: block;
	width: 82px;
	height: 82px;
}

.bp-advantages__text {
	display: flex;
	align-items: center;
	max-width: 206px;
}

@media (min-width: 740px) {
	.bp-advantages__text {
		max-width: 220px;
	}
}

.bp-advantages__text p {
	margin: 0;
}

.bp-advantages__notice {
	margin-bottom: var(--bp-space-30);
	font-size: var(--bp-fs-sm);
	text-align: center;
	color: var(--bp-text);
}

/* ==========================================================================
   3.4 Homepage: Recently searched books
   ========================================================================== */
.bp-recent {
	background-color: var(--bp-light-bg);
}

.bp-recent__content {
	padding-top: var(--bp-space-30);
	padding-bottom: var(--bp-space-30);
}

.bp-recent__title {
	margin-top: 0;
	font-size: var(--bp-fs-base);
	text-align: center;
}

@media (min-width: 740px) {
	.bp-recent__title {
		font-size: var(--bp-fs-2xl);
	}
}

.bp-recent__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--bp-space-12);
}

/* 3 cards per row; more books wrap onto the next row (centred) */
@media (min-width: 740px) {
	.bp-recent__cards {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--bp-space-24);
		row-gap: var(--bp-space-24);
	}

	.bp-recent__cards .bp-book-card {
		width: calc((100% - 2 * var(--bp-space-24)) / 3);
	}
}

.bp-book-card {
	width: 100%;
	max-width: 335px;
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
	text-align: center;
	color: var(--bp-primary);
}

.bp-book-card__inner {
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-10);
	padding: var(--bp-space-10);
}

.bp-book-card__content {
	display: flex;
	align-items: flex-end;
	column-gap: var(--bp-space-25);
}

@media (min-width: 740px) {
	.bp-book-card__content {
		column-gap: var(--bp-space-10);
	}
}

@media (min-width: 850px) {
	.bp-book-card__content {
		column-gap: var(--bp-space-25);
	}
}

/* Book cover; the grey placeholder shows when there is no cover or it fails to load */
.bp-book-card__cover {
	flex-shrink: 0;
	width: 75px;
	height: 100px;
	background: linear-gradient(135deg, var(--bp-grey-light) 0%, var(--bp-grey-mid) 100%);
}

.bp-book-card__cover img {
	width: 100%;
	height: 100%;
	background-color: var(--bp-white); /* Covers the grey placeholder around narrow / wide covers */
	object-fit: contain;
}

.bp-book-card__info {
	width: 100%;
}

.bp-book-card__isbn {
	margin: 0 0 var(--bp-space-5);
	font-size: inherit;
	text-align: left;
}

@media (min-width: 740px) {
	.bp-book-card__isbn {
		font-size: var(--bp-fs-base);
	}
}

@media (min-width: 1100px) {
	.bp-book-card__isbn {
		font-size: var(--bp-fs-md);
	}
}

.bp-book-card__price {
	display: block;
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-3xl);
	text-align: start;
}

/* Currency symbol of the best price ($, £...) */
.bp-book-card__currency {
	font-size: var(--bp-fs-sm);
	vertical-align: top;
}

@media (min-width: 740px) {
	.bp-book-card__currency {
		font-size: var(--bp-fs-base);
	}
}

@media (min-width: 1100px) {
	.bp-book-card__currency {
		font-size: var(--bp-fs-md);
	}
}

.bp-book-card__actions {
	display: flex;
	column-gap: var(--bp-space-10);
}

.bp-book-card__btn,
.bp-book-card__btn:visited {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 40px;
	border-radius: var(--bp-radius-xs);
	font-size: var(--bp-fs-base);
	font-weight: 500;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	color: var(--bp-white);
	transition: color 0.3s, background-color 0.3s;
}

.bp-book-card__btn--sell,
.bp-book-card__btn--sell:visited {
	background-color: var(--bp-accent);
}

.bp-book-card__btn--sell:hover,
.bp-book-card__btn--sell:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

.bp-book-card__btn--buy,
.bp-book-card__btn--buy:visited {
	background-color: var(--bp-secondary);
}

.bp-book-card__btn--buy:hover,
.bp-book-card__btn--buy:focus {
	background-color: var(--bp-secondary-hover);
	color: var(--bp-hover-text);
}

.bp-recent__text {
	margin-top: var(--bp-space-20);
	text-align: center;
}

.bp-recent__link,
.bp-recent__link:visited {
	width: 100%;
	max-width: 225px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	font-weight: 700;
	text-transform: uppercase;
}

/* ==========================================================================
   3.5 Homepage: Mobile app
   ========================================================================== */
.bp-app {
	background-color: var(--bp-white);
}

.bp-app__wrap {
	display: flex;
	flex-direction: column-reverse;
	padding-bottom: var(--bp-space-15);
}

@media (min-width: 600px) {
	.bp-app__wrap {
		flex-direction: row;
		padding-top: var(--bp-space-30);
		padding-bottom: var(--bp-space-25);
	}
}

@media (min-width: 740px) {
	.bp-app__wrap {
		justify-content: space-between;
	}
}

/* Text column - shared by the app and scholarship sections */
.bp-app__text,
.bp-scholarship__text {
	display: flex;
	flex-direction: column;
}

.bp-app__text .bp-title,
.bp-scholarship__text .bp-title {
	text-align: center;
}

@media (min-width: 600px) {
	.bp-app__text,
	.bp-scholarship__text {
		width: 50%;
	}

	.bp-app__text .bp-title,
	.bp-scholarship__text .bp-title {
		text-align: left;
	}
}

@media (min-width: 740px) {
	.bp-app__text,
	.bp-scholarship__text {
		width: 47%;
	}
}

@media (min-width: 1200px) {
	.bp-app__text,
	.bp-scholarship__text {
		width: 50%;
	}
}

.bp-app__btn,
.bp-scholarship__btn {
	margin-top: var(--bp-space-10);
}

@media (min-width: 600px) {
	.bp-app__btn,
	.bp-scholarship__btn {
		max-width: 290px;
	}
}

.bp-app__btn--last {
	margin-bottom: var(--bp-space-10);
}

.bp-app__video {
	width: 100%;
	border: var(--bp-border-20) solid var(--bp-white);
	border-left-width: 0;
	border-right-width: 0;
}

@media (min-width: 600px) {
	.bp-app__video {
		box-sizing: content-box; /* border sits outside the 500px, like the reference */
		align-self: center;
		width: 50%;
		max-width: 500px;
		border-left-width: var(--bp-border-20);
	}
}

.bp-app__player {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	background: linear-gradient(135deg, var(--bp-primary-light) 0%, var(--bp-primary-dark) 100%);
	box-shadow: var(--bp-shadow);
	cursor: pointer;
}

.bp-app__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Play button drawn with CSS */
.bp-app__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	border-radius: var(--bp-radius-xl);
	background-color: var(--bp-video-button);
	transform: translate(-50%, -50%);
	transition: background-color 0.3s;
}

.bp-app__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 10px 0 10px 17px; /* Triangle shape (play icon), not a design token. */
	border-color: transparent transparent transparent var(--bp-white);
	transform: translate(-40%, -50%);
}

.bp-app__player:hover .bp-app__play {
	background-color: var(--bp-video-red);
}

/* ==========================================================================
   3.6 Homepage: Scholarship
   ========================================================================== */
.bp-scholarship {
	margin-top: var(--bp-space-30); /* White gap from the light blue "Recently searched" section above */
	background-color: var(--bp-light-bg);
}

.bp-scholarship__wrap {
	padding-top: 70%;
	padding-bottom: var(--bp-space-25);
	background-image: url("../images/third-party-logos/scholarship.svg");
	background-position: center 25px;
	background-repeat: no-repeat;
	background-size: 52% auto;
}

/* Illustration removed in the meta box: no space kept for it on mobile */
.bp-scholarship__wrap--no-image {
	padding-top: var(--bp-space-25);
	background-image: none;
}

@media (min-width: 600px) {
	.bp-scholarship__wrap {
		display: flex;
		justify-content: flex-end;
		padding-top: var(--bp-space-20);
		background-position: 8% 100%;
		background-size: 30% auto;
	}
}

@media (min-width: 740px) {
	.bp-scholarship__wrap {
		padding-top: var(--bp-space-40);
		padding-bottom: var(--bp-space-40);
		background-size: 36% auto;
	}
}

@media (min-width: 850px) {
	.bp-scholarship__wrap {
		padding-top: var(--bp-space-70);
		padding-bottom: var(--bp-space-70);
		background-position: 8% 100%;
		background-size: 30% auto;
	}
}

@media (min-width: 1100px) {
	.bp-scholarship__wrap {
		background-size: 26% auto;
	}
}

/* ==========================================================================
   3.7 Homepage: Recent blog posts + topics
   ========================================================================== */
.bp-blog {
	background-color: var(--bp-white);
}

.bp-blog__content {
	padding-top: var(--bp-space-40);
	padding-bottom: var(--bp-space-40);
}

/* Mobile: slider showing one post at a time (see "Slider" styles below). 740px+: 3-column grid */
.bp-blog__slider {
	margin-bottom: var(--bp-space-30);
}

@media (min-width: 740px) {
	.bp-blog__slider {
		margin-bottom: 0;
	}
}

.bp-blog__cards {
	display: flex;
	gap: var(--bp-space-10);
	padding: var(--bp-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* hide scrollbar (Firefox) */
}

.bp-blog__cards::-webkit-scrollbar {
	display: none; /* hide scrollbar (Chrome, Safari) */
}

@media (min-width: 740px) {
	.bp-blog__cards {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--bp-space-20) var(--bp-space-30);
		place-items: center;
		padding: 0 0 var(--bp-space-30);
		overflow: visible;
	}
}

@media (min-width: 850px) {
	.bp-blog__cards {
		column-gap: var(--bp-space-40);
	}
}

.bp-post-card {
	display: block;
	flex: 0 0 100%; /* mobile: exactly one post visible */
	width: 100%;
	min-width: 180px;
	height: 100%;
	margin: 0;
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow);
	scroll-snap-align: center;
}

@media (min-width: 740px) {
	.bp-post-card {
		max-width: 400px;
		margin: 0 var(--bp-space-5) var(--bp-space-10);
	}
}

.bp-post-card__image {
	position: relative;
	width: 100%;
	height: 160px;
	background-color: var(--bp-grey-light);
}

.bp-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bp-post-card__title {
	margin: var(--bp-space-15) var(--bp-space-10);
	font-size: var(--bp-fs-sm);
	color: var(--bp-primary);
}

@media (min-width: 850px) {
	.bp-post-card__title {
		margin: var(--bp-space-15);
		font-size: var(--bp-fs-2xl);
	}
}

.bp-topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.bp-topics__title {
	width: 100%;
	margin-bottom: var(--bp-space-10);
	font-size: var(--bp-fs-lg);
	text-align: center;
}

.bp-topics__link,
.bp-topics__link:visited {
	display: inline-block;
	width: fit-content;
	margin: var(--bp-space-2);
	padding: var(--bp-space-8) var(--bp-space-10);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-grey);
	font-size: var(--bp-fs-xs);
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-tight);
	white-space: nowrap;
	color: var(--bp-primary);
	transition: color 0.3s;
}

.bp-topics__link:hover,
.bp-topics__link:focus {
	color: var(--bp-white);
}

@media (min-width: 400px) {
	.bp-topics__link,
	.bp-topics__link:visited {
		margin: var(--bp-space-5);
		padding: var(--bp-space-8) var(--bp-space-20);
	}
}

/* ==========================================================================
   3.8 Homepage: Why buy textbooks with us (3 coloured cards)
   ========================================================================== */
.bp-reasons {
	background-color: var(--bp-white);
}

.bp-reasons__content {
	padding-top: var(--bp-space-10);
	padding-bottom: var(--bp-space-30);
}

@media (min-width: 600px) {
	.bp-reasons__content {
		padding-bottom: var(--bp-space-65);
	}
}

.bp-reasons__intro {
	max-width: 800px;
	margin: 0 0 var(--bp-space-12);
	color: var(--bp-primary);
}

@media (min-width: 600px) {
	.bp-reasons__intro {
		margin-bottom: 0;
	}
}

@media (min-width: 740px) {
	.bp-reasons__intro {
		font-size: var(--bp-fs-md);
	}
}

/* Mobile: slider showing one card at a time. 740px+: 3 cards side by side */
.bp-reasons__cards {
	display: flex;
	gap: var(--bp-space-10);
	margin-top: var(--bp-space-20);
	padding: var(--bp-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* hide scrollbar (Firefox) */
}

.bp-reasons__cards::-webkit-scrollbar {
	display: none; /* hide scrollbar (Chrome, Safari) */
}

@media (min-width: 740px) {
	.bp-reasons__cards {
		margin-top: var(--bp-space-40);
		padding: 0;
		overflow: visible;
	}
}

/* ---------- Slider (arrows + dots), mobile only ---------- */
.bp-slider {
	position: relative;
	padding: 0 var(--bp-space-24);
}

@media (min-width: 600px) {
	.bp-slider {
		padding: 0 var(--bp-space-60);
	}
}

.bp-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: var(--bp-radius-round);
	background-color: transparent;
	transform: translateY(-50%);
	transition: background-color 0.7s;
}

.bp-slider__arrow:hover,
.bp-slider__arrow:focus {
	background-color: var(--bp-accent-glow);
}

/* Chevron drawn with two borders */
.bp-slider__arrow::before {
	content: "";
	position: absolute;
	top: 5px;
	width: 10px;
	height: 10px;
	border-bottom: var(--bp-border-3) solid var(--bp-accent);
	border-left: var(--bp-border-3) solid var(--bp-accent);
	border-radius: var(--bp-radius-xs);
}

.bp-slider__arrow--prev {
	left: 0;
}

.bp-slider__arrow--prev::before {
	left: 7px;
	transform: rotate(45deg);
}

.bp-slider__arrow--next {
	right: 0;
}

.bp-slider__arrow--next::before {
	right: 7px;
	transform: rotate(225deg);
}

@media (min-width: 600px) {
	.bp-slider__arrow--prev {
		left: 20px;
	}

	.bp-slider__arrow--next {
		right: 20px;
	}
}

.bp-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--bp-space-10);
	margin-top: var(--bp-space-20);
}

.bp-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-grey);
	transition: background-color 0.7s;
}

.bp-slider__dot:hover {
	background-color: var(--bp-accent-glow-strong);
}

.bp-slider__dot.is-active {
	background-color: var(--bp-accent);
}

/* 740px+: no slider, hide arrows and dots */
@media (min-width: 740px) {
	.bp-slider {
		padding: 0;
	}

	.bp-slider__arrow,
	.bp-slider__dots {
		display: none;
	}
}

@media (min-width: 850px) {
	.bp-reasons__cards {
		gap: var(--bp-space-15);
	}
}

@media (min-width: 1100px) {
	.bp-reasons__cards {
		gap: var(--bp-space-30);
	}
}

.bp-reason-card {
	position: relative;
	flex: 0 0 100%; /* mobile: exactly one card visible */
	width: 100%;
	margin: 0;
	padding: var(--bp-space-25);
	box-shadow: var(--bp-shadow);
	color: var(--bp-primary);
	scroll-snap-align: center;
}

@media (min-width: 740px) {
	.bp-reason-card {
		flex: 1 1 0;
		max-width: 400px;
		margin: var(--bp-space-5);
	}
}

.bp-reason-card--green { background-color: var(--bp-card-green); }
.bp-reason-card--lime  { background-color: var(--bp-card-lime); }
.bp-reason-card--peach { background-color: var(--bp-card-peach); }

.bp-reason-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	margin: 0 auto var(--bp-space-15);
}

/* Card graphics keep their own size, never taller than the 70px box */
.bp-reason-card__icon img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 70px;
}

.bp-reason-card__title {
	margin-bottom: var(--bp-space-25);
	font-size: var(--bp-fs-2xl);
	letter-spacing: var(--bp-ls-heading);
	text-align: center;
	color: var(--bp-primary);
}

@media (min-width: 850px) {
	.bp-reason-card__title {
		text-align: left;
	}
}

.bp-reason-card__content p {
	margin: var(--bp-space-14) 0 var(--bp-space-12);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
	text-align: left;
	color: var(--bp-primary);
}

.bp-reason-card__content a,
.bp-reason-card__content a:visited {
	text-decoration: underline;
}

/* ==========================================================================
   4. Book detail page (page-templates/book-detail.php, rows from inc/book.php)
   ========================================================================== */
.bp-book-page {
	color: var(--bp-text);
}

/* ==========================================================================
   4.1 Book: cover, title, details and best price
   ========================================================================== */
.bp-book {
	padding: var(--bp-space-20) 0;
	background-color: var(--bp-white);
}

.bp-book__wrap {
	display: flex;
	flex-direction: column;
}

/* Cover on the left, title + details on the right; below them the extra box and the
   description at full width (phones). From 740px the extra box stays under the details. */
.bp-book__main {
	display: grid;
	grid-template-areas: "preview title" "preview info" "extra extra" "desc desc";
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: max-content 1fr;
	gap: var(--bp-space-12) var(--bp-space-16);
}

.bp-book__title-wrap {
	grid-area: title;
}

.bp-book__title {
	font-size: var(--bp-fs-base);
	color: var(--bp-black);
}

.bp-book__preview {
	grid-area: preview;
	min-width: 100px;
	padding-top: var(--bp-space-3);
}

.bp-book__cover {
	display: flex;
	justify-content: center;
	margin-bottom: var(--bp-space-5);
	padding: var(--bp-space-8);
	background-color: var(--bp-surface);
}

.bp-book__cover img,
.bp-book__cover-placeholder {
	display: block;
	width: 85px;
	height: 125px;
	object-fit: contain;
}

.bp-book__cover-placeholder {
	background-color: var(--bp-grey-mid);
}

/* Cover with an image: a button that opens the big view; a dark tint fades in on hover (like the reference) */
.bp-book__cover--zoom {
	position: relative;
	width: 100%;
	border: 0;
	cursor: zoom-in;
}

.bp-book__cover--zoom::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--bp-overlay);
	opacity: 0;
	transition: opacity 0.3s;
}

.bp-book__cover--zoom:hover::before,
.bp-book__cover--zoom:focus-visible::before {
	opacity: 1;
}

/* Big view of the cover (#bp-zoom, opened in assets/js/main.js section 6) */
.bp-zoom {
	position: fixed;
	inset: 0;
	z-index: 1080;
}

.bp-zoom[hidden] {
	display: none;
}

/* The view gets the focus when it opens (so Escape works); no outline around the whole screen */
.bp-zoom:focus {
	outline: none;
}

.bp-zoom__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--bp-overlay);
}

/* Image centred below the header area, never bigger than the window */
.bp-zoom__img {
	position: fixed;
	inset: 90px 0 0;
	width: 350px;
	max-width: calc(100% - var(--bp-space-50));
	height: auto;
	max-height: calc(100vh - 140px);
	margin: auto;
	object-fit: contain;
}

/* White X in the top right corner */
.bp-zoom__close {
	position: absolute;
	top: 110px;
	right: var(--bp-space-20);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-zoom__close::before,
.bp-zoom__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bp-border-2);
	height: 100%;
	background-color: var(--bp-white);
	transform: translate(-50%, -50%) rotate(45deg);
}

.bp-zoom__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bp-zoom__close:focus-visible {
	outline: var(--bp-focus-width) solid var(--bp-focus-on-dark);
	outline-offset: var(--bp-space-4);
}

@media (min-width: 740px) {
	.bp-zoom__img {
		max-width: calc(100% - 80px);
		max-height: calc(100vh - 100px);
	}
}

/* Watchlist + price alert buttons under the cover */
.bp-book__actions {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: var(--bp-space-10) 0;
}

.bp-book__action {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 40px;
	padding: var(--bp-space-2);
	border: var(--bp-border-1) solid var(--bp-accent);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	color: var(--bp-accent);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-book__action svg {
	fill: currentColor;
}

.bp-book__action--first {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.bp-book__action--last {
	margin-left: calc(-1 * var(--bp-border-1));
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* :focus-visible, not :focus: after a mouse click the button goes back to white (keyboard focus still fills it) */
.bp-book__action:hover,
.bp-book__action:focus-visible {
	background-color: var(--bp-accent);
	color: var(--bp-white);
}

/* "Add to Watchlist" tooltip under the button, shown on hover and keyboard focus */
.bp-book__tip {
	position: absolute;
	top: calc(100% + var(--bp-space-10));
	left: 50%;
	z-index: 5;
	padding: var(--bp-space-19) var(--bp-space-23);
	border: var(--bp-border-1) solid var(--bp-tooltip-border);
	border-radius: var(--bp-radius-md);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-tooltip);
	color: var(--bp-tooltip-text);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-tooltip);
	white-space: nowrap;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s, visibility 0.3s;
}

.bp-book__action:hover .bp-book__tip,
.bp-book__action:focus-visible .bp-book__tip {
	visibility: visible;
	opacity: 1;
}

/* Price alert button: the loader shows first, then the bell (assets/js/main.js, section 6) */
.bp-book__action.is-loading svg {
	display: none;
}

.bp-book__action:not(.is-loading) .bp-spinner {
	display: none;
}

/* Loader: 8 dots in a ring (currentColor), the ring turning and each dot shrinking in turn */
.bp-spinner {
	display: inline-block;
	width: calc(var(--bp-spinner-radius) * 2 + var(--bp-spinner-dot));
	height: calc(var(--bp-spinner-radius) * 2 + var(--bp-spinner-dot));
}

.bp-spinner__ring {
	position: relative;
	display: block;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	animation: bp-spinner-turn 3s linear infinite;
}

.bp-spinner__dot {
	position: absolute;
	width: var(--bp-spinner-dot);
	height: var(--bp-spinner-dot);
	border-radius: var(--bp-radius-round);
	background-color: currentColor;
	animation: bp-spinner-dot 0.7s ease-in infinite;
}

.bp-spinner__dot:nth-child(1) {
	top: calc(var(--bp-spinner-dot) / -2);
	left: calc(var(--bp-spinner-radius) * 1 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.7s;
}

.bp-spinner__dot:nth-child(2) {
	top: calc(var(--bp-spinner-radius) * 0.7071 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-radius) * 0.7071 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.6125s;
}

.bp-spinner__dot:nth-child(3) {
	top: calc(var(--bp-spinner-radius) * 1 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-dot) / -2);
	animation-delay: 0.525s;
}

.bp-spinner__dot:nth-child(4) {
	top: calc(var(--bp-spinner-radius) * 0.7071 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-radius) * -0.7071 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.4375s;
}

.bp-spinner__dot:nth-child(5) {
	top: calc(var(--bp-spinner-dot) / -2);
	left: calc(var(--bp-spinner-radius) * -1 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.35s;
}

.bp-spinner__dot:nth-child(6) {
	top: calc(var(--bp-spinner-radius) * -0.7071 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-radius) * -0.7071 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.2625s;
}

.bp-spinner__dot:nth-child(7) {
	top: calc(var(--bp-spinner-radius) * -1 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-dot) / -2);
	animation-delay: 0.175s;
}

.bp-spinner__dot:nth-child(8) {
	top: calc(var(--bp-spinner-radius) * -0.7071 - var(--bp-spinner-dot) / 2);
	left: calc(var(--bp-spinner-radius) * 0.7071 - var(--bp-spinner-dot) / 2);
	animation-delay: 0.0875s;
}

@keyframes bp-spinner-turn {
	to {
		transform: rotate(-1turn);
	}
}

@keyframes bp-spinner-dot {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-spinner__ring,
	.bp-spinner__dot {
		animation: none;
	}
}

/* Details. On phones the wrapper is "display: contents", so the details and the extra box
   are placed in the grid on their own (details next to the cover, extra box full width). */
.bp-book__content {
	display: contents;
}

/* No fixed height: the box is as tall as the fields the book has */
.bp-book__fields {
	display: flex;
	grid-area: info;
	flex-direction: column;
	row-gap: var(--bp-space-8);
	margin-bottom: var(--bp-space-13);
}

.bp-book__fields-col {
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-8);
}

.bp-book__field {
	font-size: var(--bp-fs-xs);
	line-height: var(--bp-lh-heading);
	overflow-wrap: anywhere;
}

.bp-book__label {
	white-space: nowrap;
}

.bp-book__link-text {
	color: var(--bp-accent);
}

/* Copy ISBN button (assets/js/main.js) */
.bp-book__copy {
	display: inline-flex;
	vertical-align: top;
	width: 16px;
	height: 16px;
	margin-left: var(--bp-space-5);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-book__copy svg {
	width: 100%;
	height: 100%;
}

.bp-book__copy:active {
	transform: scale(0.95);
}

.bp-book__copy.is-copied {
	opacity: 0.5;
}

.bp-book__login-button {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--bp-accent);
	cursor: pointer;
}

.bp-book__login-button:hover,
.bp-book__login-button:focus {
	color: var(--bp-accent-text-hover);
}

/* Description (full width on phones, under the details from 740px) */
.bp-book__desc {
	grid-area: desc;
}

.bp-book__desc-title {
	margin: 0 0 var(--bp-space-10);
	font-size: var(--bp-fs-sm);
	font-weight: 700;
}

.bp-book__desc-text {
	font-size: var(--bp-fs-xs);
	line-height: var(--bp-lh-heading);
}

.bp-book__desc-text p {
	margin: var(--bp-space-10) 0;
}

/* Read more / Read less: 3 lines until opened (the class is added by main.js) */
.bp-book__desc-text.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.bp-book__desc-text > :first-child {
	margin-top: 0;
}

.bp-book__desc-toggle {
	margin-top: var(--bp-space-5);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--bp-fs-xs);
	font-weight: 700;
	color: var(--bp-accent);
	cursor: pointer;
}

.bp-book__desc-toggle:hover,
.bp-book__desc-toggle:focus {
	color: var(--bp-accent-text-hover);
}

.bp-book__desc-toggle[hidden] {
	display: none;
}

.bp-book__desc-text ul {
	margin: var(--bp-space-10) 0;
	padding-left: var(--bp-space-20);
	list-style: disc;
}

/* Box under the details: extra data (logged in) and Reviews + Find in Library (from 740px) */
.bp-book__extra {
	display: flex;
	grid-area: extra;
	flex-direction: column;
	row-gap: var(--bp-space-12);
	padding-top: var(--bp-space-20);
	border-top: var(--bp-border-2) solid var(--bp-light-bg);
}

/* Phones, logged out: the box is empty (the buttons show from 740px), so no line either */
.bp-book__extra:not(:has(.bp-book__more)) {
	display: none;
}

/* Logged in: rank, sellers and from price on one line, values in orange.
   Phones: full width, spread out, 14px. From 740px: left aligned, 18px. */
.bp-book__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	gap: var(--bp-space-8) var(--bp-space-24);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

.bp-book__more-item .bp-book__label {
	font-weight: 400;
}

.bp-book__more-value {
	font-weight: 500;
	color: var(--bp-accent);
}

.bp-book__buttons {
	display: none;
	column-gap: var(--bp-space-8);
	width: 100%;
}

.bp-book__button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--bp-space-8);
	width: 100%;
	min-width: 125px;
	padding: var(--bp-space-10);
	border: var(--bp-border-1) solid var(--bp-primary);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	color: var(--bp-primary);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-book__button:visited {
	color: var(--bp-primary);
}

.bp-book__button svg {
	fill: currentColor;
}

.bp-book__button:hover,
.bp-book__button:focus {
	background-color: var(--bp-button-hover-bg);
	color: var(--bp-primary-hover);
}

/* Best price card */
.bp-best {
	height: min-content;
	margin-top: var(--bp-space-10);
	padding: var(--bp-space-15);
	background-color: var(--bp-surface);
	box-shadow: var(--bp-shadow-card);
}

.bp-best__vendor {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.bp-best__name {
	margin-bottom: var(--bp-space-2);
	overflow: hidden;
	font-size: var(--bp-fs-26);
	text-overflow: ellipsis;
}

.bp-best__label {
	display: none;
	align-items: center;
	font-size: var(--bp-fs-lg);
	white-space: nowrap;
}

.bp-best__logo {
	display: none;
	min-width: 120px;
	max-width: 125px;
	min-height: 40px;
	max-height: 45px;
	padding-top: var(--bp-space-5);
}

.bp-best__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* No logo yet: the store name in the logo spot */
.bp-best__logo--text {
	min-width: 0;
}

.bp-best__logo-text {
	display: flex;
	align-items: center;
	height: 100%;
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-26);
	line-height: var(--bp-lh-none);
	white-space: nowrap;
	color: var(--bp-primary);
}

.bp-best__buy {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bp-best__price {
	margin: 0;
	font-size: var(--bp-fs-36);
	font-weight: 500;
	color: var(--bp-accent);
}

.bp-best__link,
.bp-best__link:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 140px;
	margin-left: var(--bp-space-10);
	padding: var(--bp-space-15) 0;
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-lg);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	color: var(--bp-white);
	transition: color 0.3s, background-color 0.3s;
}

.bp-best__link:hover,
.bp-best__link:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

@media (min-width: 400px) {
	.bp-book__preview {
		min-width: 140px;
	}

	.bp-book__cover img,
	.bp-book__cover-placeholder {
		width: 100px;
	}
}

@media (min-width: 600px) {
	.bp-book__field,
	.bp-book__desc-text,
	.bp-book__desc-toggle {
		font-size: var(--bp-fs-sm);
	}

	.bp-book__desc-title {
		font-size: var(--bp-fs-base);
	}

	.bp-best__wrap {
		display: flex;
		justify-content: space-between;
	}

	.bp-best__vendor {
		width: auto;
	}

	.bp-best__name {
		display: none;
	}

	.bp-best__logo {
		display: block;
		padding-top: 0;
	}

	.bp-best__buy {
		justify-content: flex-end;
		width: 50%;
	}

	.bp-best__link,
	.bp-best__link:visited {
		max-width: 170px;
	}
}

@media (min-width: 740px) {
	.bp-book__main {
		grid-template-areas: "preview title" "preview info" "preview desc";
		grid-template-rows: auto auto 1fr;
		gap: var(--bp-space-12) var(--bp-space-20);
	}

	.bp-book__desc-title {
		font-size: var(--bp-fs-md);
	}

	.bp-book__desc-text,
	.bp-book__desc-toggle {
		font-size: var(--bp-fs-base);
	}

	.bp-book__title {
		font-size: var(--bp-fs-lg);
	}

	.bp-book__preview {
		min-width: 180px;
	}

	.bp-book__cover img,
	.bp-book__cover-placeholder {
		width: 155px;
		height: 225px;
	}

	.bp-book__action {
		padding-top: var(--bp-space-10);
		padding-bottom: var(--bp-space-10);
	}

	.bp-book__fields {
		flex-direction: row;
		gap: 0 var(--bp-space-16);
	}

	.bp-book__fields-col {
		row-gap: var(--bp-space-13);
		width: 50%;
	}

	.bp-book__copy {
		width: 20px;
		height: 20px;
	}

	/* The details wrapper is a normal box again: details with the extra box under them */
	.bp-book__content {
		display: block;
		grid-area: info;
		width: 100%;
	}

	.bp-book__extra,
	.bp-book__extra:not(:has(.bp-book__more)) {
		display: flex;
	}

	.bp-book__more {
		justify-content: flex-start;
		font-size: var(--bp-fs-md);
	}

	.bp-book__buttons {
		display: flex;
	}

	.bp-best {
		margin-top: var(--bp-space-20);
		padding: var(--bp-space-11) var(--bp-space-15);
	}

	.bp-best__logo {
		min-width: 150px;
		max-width: 155px;
		min-height: 50px;
		max-height: 55px;
	}

	.bp-best__link,
	.bp-best__link:visited {
		margin-left: var(--bp-space-25);
		font-size: var(--bp-fs-xl);
	}
}

@media (min-width: 850px) {
	.bp-book__title {
		font-size: var(--bp-fs-2xl);
	}

	.bp-book__content {
		width: 85%;
	}

	.bp-book__buttons {
		max-width: 330px;
	}
}

@media (min-width: 1100px) {
	.bp-book__wrap {
		flex-direction: row;
		justify-content: space-between;
		column-gap: var(--bp-space-30);
	}

	.bp-book__main {
		gap: var(--bp-space-12) var(--bp-space-30);
		width: 100%;
	}

	.bp-book__content {
		width: 100%;
		max-width: 600px;
	}

	.bp-book__field,
	.bp-book__more,
	.bp-book__desc-text,
	.bp-book__desc-toggle {
		font-size: var(--bp-fs-md);
	}

	.bp-book__desc {
		max-width: 600px;
	}

	.bp-best {
		min-width: 228px;
		max-width: 228px;
		margin-top: 0;
		padding: var(--bp-space-18);
	}

	.bp-best__wrap {
		flex-direction: column;
	}

	.bp-best__vendor {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--bp-space-20);
		margin-bottom: var(--bp-space-15);
	}

	.bp-best__label {
		display: flex;
	}

	.bp-best__logo {
		min-width: 120px;
		max-width: 125px;
		min-height: 40px;
		max-height: 45px;
		margin-left: var(--bp-space-10);
	}

	.bp-best__logo--text {
		min-width: 0;
		max-width: none;
	}

	.bp-best__buy {
		flex-direction: column;
		align-items: center;
		width: auto;
	}

	.bp-best__price {
		font-size: var(--bp-fs-62);
	}

	.bp-best__link,
	.bp-best__link:visited {
		max-width: 100%;
		margin-top: var(--bp-space-8);
		margin-left: 0;
	}
}

@media (min-width: 1200px) {
	.bp-book__button {
		font-size: var(--bp-fs-base);
	}
}

/* ==========================================================================
   4.2 Prices: Low Price Summary, filters, Top Bookstores
   ========================================================================== */
.bp-prices {
	padding: var(--bp-space-20) 0 var(--bp-space-30);
	background-color: var(--bp-surface);
}

.bp-prices__title {
	margin-bottom: var(--bp-space-15);
	border-radius: var(--bp-radius-xs);
	font-size: var(--bp-fs-2xl);
	color: var(--bp-heading-dark);
}

/* "Low Price Summary" bar that opens / closes the summary */
.bp-prices__title--toggle {
	position: relative;
	background-color: var(--bp-white);
	font-size: var(--bp-fs-lg);
	box-shadow: var(--bp-shadow-row);
}

.bp-prices__toggle {
	display: block;
	width: 100%;
	padding: var(--bp-space-10) var(--bp-space-24);
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.bp-prices__arrow {
	position: absolute;
	top: var(--bp-space-15);
	right: var(--bp-space-20);
	width: 25px;
	height: 17px;
	fill: var(--bp-heading-dark);
	transform: rotate(180deg);
	transition: transform 0.3s;
}

.bp-prices__toggle[aria-expanded="false"] .bp-prices__arrow {
	transform: rotate(0deg);
}

.bp-prices__summary {
	margin-bottom: var(--bp-space-20);
}

.bp-prices__summary[hidden] {
	display: none;
}

.bp-prices__empty {
	margin: 0;
	padding: var(--bp-space-20);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	font-size: var(--bp-fs-base);
	color: var(--bp-text);
	box-shadow: var(--bp-shadow-row);
}

/* Offer rows */
.bp-offers {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--bp-space-15);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-sm);
	color: var(--bp-text);
}

.bp-offer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 85px;
	margin-bottom: var(--bp-space-5);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
}

.bp-offer[hidden] {
	display: none;
}

.bp-offer__cells {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 85px;
}

/* Desktop cells are hidden on phones, where the card (last cell) shows instead */
.bp-offer__cell {
	display: none;
	flex-direction: column;
	flex-shrink: 1;
	align-items: center;
	padding: var(--bp-space-10) var(--bp-space-5);
}

.bp-offer__cell--logo {
	width: 15%;
	padding: var(--bp-space-10) var(--bp-space-2) var(--bp-space-10) var(--bp-space-8);
}

.bp-offer__cell--name {
	align-items: flex-start;
	width: 30%;
	min-width: 60px;
	max-width: 300px;
	padding: var(--bp-space-10) var(--bp-space-6);
}

.bp-offer__cell--price,
.bp-offer__cell--shipping,
.bp-offer__cell--total {
	width: 20%;
}

.bp-offer__cell--condition {
	width: 29%;
}

.bp-offer__cell--coupon {
	width: 8%;
	min-width: 20px;
	padding: 0;
}

.bp-offer__cell--buy {
	width: 22%;
}

.bp-offer__cell--mobile {
	display: flex;
	width: 100%;
}

.bp-offer__vendor,
.bp-offer__via {
	display: block;
	max-width: 100%;
	line-height: var(--bp-lh-heading);
}

.bp-offer__vendor {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Seller name shown in full: wraps onto more lines (after a dot, see inc/book.php), a very long word breaks too. */
.bp-offer__via {
	overflow-wrap: break-word;
}

.bp-offer__vendor {
	font-size: var(--bp-fs-base);
}

.bp-offer__via {
	margin-top: var(--bp-space-2);
	font-size: var(--bp-fs-xs);
}

/* Price / shipping / condition / total blocks */
.bp-offer__section {
	display: block;
	font-family: var(--bp-font-body);
	color: var(--bp-muted);
}

.bp-offer__value {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--bp-space-2);
	font-size: var(--bp-fs-lg);
	font-weight: 500;
}

.bp-offer__value.is-free {
	color: var(--bp-free);
}

.bp-offer__value--condition {
	color: var(--bp-text);
}

.bp-offer__label {
	display: block;
	margin-bottom: var(--bp-space-2);
	font-size: var(--bp-fs-xs);
}

.bp-offer__cell--total .bp-offer__section {
	text-align: center;
}

.bp-offer__total {
	display: block;
	margin-bottom: var(--bp-space-2);
	font-size: var(--bp-fs-22);
	font-weight: 500;
	color: var(--bp-text);
}

/* Currency symbol before the totals ($, £, €...) */
.bp-offer__currency {
	color: var(--bp-accent);
}

/* Small orange "i" next to the condition */
.bp-offer__tip {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 12px;
	height: 12px;
	margin: var(--bp-space-4) var(--bp-space-5) 0;
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-8);
	line-height: var(--bp-lh-none);
	color: var(--bp-white);
	cursor: help;
}

/* Buy buttons: teal, the cheapest offer orange */
.bp-offer__buy,
.bp-offer__buy:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-width: 60px;
	max-width: 60px;
	padding: var(--bp-space-8) var(--bp-space-12);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-secondary);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	color: var(--bp-white);
	transition: color 0.3s, background-color 0.3s;
}

.bp-offer__buy:hover,
.bp-offer__buy:focus {
	background-color: var(--bp-secondary-hover);
	color: var(--bp-hover-text);
}

.bp-offer__buy.is-best {
	background-color: var(--bp-accent);
}

.bp-offer__buy.is-best:hover,
.bp-offer__buy.is-best:focus {
	background-color: var(--bp-accent-hover);
}

/* Store logo, or a round letter badge when there is no logo yet */
.bp-vendor-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	margin: 0 auto;
	object-fit: contain;
}

.bp-vendor-logo--letter {
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-light-bg);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-sm);
	color: var(--bp-primary);
}

/* Phone card */
.bp-offer-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 var(--bp-space-5);
	font-family: var(--bp-font-body);
}

.bp-offer-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--bp-space-5);
}

.bp-offer-card__cell {
	display: flex;
	align-items: center;
	width: 100%;
}

.bp-offer-card__cell--end {
	justify-content: flex-end;
}

.bp-offer-card__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 35px;
}

.bp-offer-card__vendor {
	max-width: 60px;
	min-height: 17px;
	padding-right: var(--bp-space-5);
	overflow: hidden;
	font-family: var(--bp-font-heading);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bp-offer-card__total-label {
	margin-right: var(--bp-space-6);
	font-size: var(--bp-fs-10);
	color: var(--bp-muted);
}

.bp-offer-card__total {
	margin-right: var(--bp-space-24);
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	color: var(--bp-text);
}

.bp-offer-card__sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--bp-space-4) var(--bp-space-8);
	background-color: var(--bp-surface);
}

.bp-offer-card__info {
	display: flex;
	align-items: center;
	min-width: 90px;
	font-size: var(--bp-fs-xs);
	font-weight: 500;
	color: var(--bp-text);
}

.bp-offer-card__info .bp-offer__tip {
	margin-top: 0;
}

.bp-offer-card__text {
	max-width: 50px;
	margin: 0 var(--bp-space-5);
	overflow: hidden;
	font-size: var(--bp-fs-10);
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--bp-muted);
}

.bp-offer-card__text--price {
	font-weight: 700;
}

.bp-offer-card__text.is-free {
	color: var(--bp-free);
}

/* Filters */
.bp-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--bp-space-20);
	padding: var(--bp-space-18) var(--bp-space-20) var(--bp-space-16);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
}

.bp-filter__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}

.bp-filter__item {
	position: relative;
	display: flex;
	align-items: center;
	margin-right: var(--bp-space-10);
	line-height: 24px;
	white-space: nowrap;
	color: var(--bp-heading-dark);
	cursor: pointer;
}

.bp-filter__item--wide {
	display: none;
}

/* Real checkboxes (filter bar and "More Filters" panel): the browser draws the box and the
   tick, coloured with the accent colour when ticked. */
.bp-filter__input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0 var(--bp-space-5) 0 0;
	accent-color: var(--bp-accent);
	cursor: pointer;
}

.bp-filter__input:focus-visible {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-filter__right {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: var(--bp-space-7);
	padding-top: var(--bp-space-8);
	border-top: var(--bp-border-1) solid var(--bp-grey);
	line-height: 19px;
}

.bp-filter__more svg {
	flex-shrink: 0;
}

.bp-filter__more {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--bp-space-7);
	width: 100%;
	padding: var(--bp-space-9);
	border: var(--bp-border-1) solid var(--bp-primary);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
	color: var(--bp-primary);
	cursor: pointer;
}

.bp-filter__more:hover,
.bp-filter__more:focus {
	border-color: var(--bp-primary-deep);
	background-color: var(--bp-surface);
	color: var(--bp-primary-deep);
}

.bp-filter__count {
	display: none;
	margin-left: var(--bp-space-10);
	padding-left: var(--bp-space-10);
	border-left: var(--bp-border-1) solid var(--bp-grey);
	line-height: 24px;
	white-space: nowrap;
}

@media (min-width: 400px) {
	.bp-filter__items {
		justify-content: normal;
	}

	.bp-offer-card__vendor {
		max-width: 80px;
	}

	.bp-offer-card__total {
		font-size: var(--bp-fs-md);
		font-weight: 500;
	}

	.bp-offer-card__text {
		max-width: 100%;
	}

	.bp-offer-card__text--price {
		font-size: var(--bp-fs-xs);
	}
}

@media (min-width: 600px) {
	.bp-offer-card__vendor {
		max-width: calc(100% - var(--bp-space-40));
	}

	.bp-offer-card__total {
		font-size: var(--bp-fs-lg);
	}
}

@media (min-width: 740px) {
	.bp-prices__title--toggle {
		font-size: var(--bp-fs-2xl);
	}

	.bp-prices__arrow {
		top: var(--bp-space-22);
	}

	.bp-prices__summary {
		margin-bottom: var(--bp-space-48);
	}

	.bp-offers {
		font-size: var(--bp-fs-22);
	}

	.bp-offer {
		justify-content: flex-start;
		align-items: center;
	}

	.bp-offer__cell {
		display: flex;
		padding: var(--bp-space-10) var(--bp-space-15);
	}

	.bp-offer__cell--logo {
		min-width: 30px;
		max-width: 70px;
		padding: var(--bp-space-10) var(--bp-space-2) var(--bp-space-10) var(--bp-space-8);
	}

	.bp-offer__cell--name {
		min-width: 110px;
		max-width: 430px;
		padding: var(--bp-space-10) var(--bp-space-6);
	}

	.bp-offer__cell--price,
	.bp-offer__cell--shipping {
		min-width: 90px;
		max-width: 120px;
	}

	.bp-offer__cell--condition {
		min-width: 90px;
		max-width: 125px;
	}

	.bp-offer__cell--total {
		min-width: 110px;
		max-width: 140px;
	}

	.bp-offer__cell--coupon {
		min-width: 25px;
		padding: 0;
	}

	.bp-offer__cell--mobile {
		display: none;
	}

	.bp-offer__vendor {
		font-size: var(--bp-fs-lg);
	}

	.bp-offer__via {
		font-size: var(--bp-fs-sm);
	}

	.bp-vendor-logo {
		width: 46px;
		height: 46px;
	}

	.bp-vendor-logo--letter {
		font-size: var(--bp-fs-22);
	}

	.bp-offer__buy,
	.bp-offer__buy:visited {
		min-width: 78px;
		max-width: 164px;
		padding: var(--bp-space-10) var(--bp-space-12);
		font-size: var(--bp-fs-lg);
	}

	.bp-filter {
		flex-wrap: nowrap;
		padding: var(--bp-space-16) var(--bp-space-17) var(--bp-space-15) var(--bp-space-16);
	}

	.bp-filter__item {
		font-size: var(--bp-fs-md);
	}

	.bp-filter__item--wide {
		display: flex;
	}

	.bp-filter__right {
		justify-content: space-between;
		width: auto;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.bp-filter__more {
		max-width: 189px;
	}
}

@media (min-width: 850px) {
	.bp-offers {
		font-size: var(--bp-fs-26);
	}

	.bp-offer__cell {
		padding: var(--bp-space-12) var(--bp-space-20);
	}

	.bp-offer__cell--logo {
		padding: var(--bp-space-10) var(--bp-space-2) var(--bp-space-10) var(--bp-space-8);
	}

	.bp-offer__cell--name {
		padding: var(--bp-space-10) var(--bp-space-6);
	}

	.bp-offer__cell--coupon {
		padding: 0;
	}

	.bp-offer__vendor {
		font-size: var(--bp-fs-22);
	}

	.bp-offer__total {
		font-size: var(--bp-fs-xl);
	}

	.bp-offer__buy,
	.bp-offer__buy:visited {
		min-width: 108px;
		padding: var(--bp-space-12) var(--bp-space-22);
		font-size: var(--bp-fs-xl);
	}
}

@media (min-width: 1100px) {
	.bp-offer__vendor {
		font-size: var(--bp-fs-26);
	}

	.bp-offer__total {
		font-size: var(--bp-fs-2xl);
	}

	.bp-filter {
		padding: var(--bp-space-17) var(--bp-space-30) var(--bp-space-16);
	}

	.bp-filter__items {
		width: auto;
	}

	.bp-filter__right {
		align-items: center;
		width: 320px;
	}

	.bp-filter__count {
		display: inline-block;
	}
}

/* ==========================================================================
   4.3 Amazon note + "Want a Better Price Offer?" / "Report a Pricing Issue" cards
   ========================================================================== */
.bp-book-notes,
.bp-book-questions {
	padding-bottom: var(--bp-space-20);
	background-color: var(--bp-surface);
}

.bp-book-notes__amazon {
	position: relative;
	margin: 0;
	padding: var(--bp-space-20) var(--bp-space-20) var(--bp-space-20) var(--bp-space-60);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-info-bg);
	font-size: var(--bp-fs-xs);
	color: var(--bp-black);
}

/* Round teal "i" before the note */
.bp-book-notes__amazon::before {
	content: "i";
	position: absolute;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-secondary);
	color: var(--bp-white);
	top: var(--bp-space-30);
	left: var(--bp-space-20);
	width: 23px;
	height: 23px;
	transform: translateY(-50%);
}

.bp-book-questions__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-20);
}

.bp-book-questions__card {
	width: 100%;
	padding: var(--bp-space-25);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	color: var(--bp-black);
	box-shadow: var(--bp-shadow-row);
}

.bp-book-questions__title {
	margin-bottom: var(--bp-space-10);
	font-size: var(--bp-fs-xl);
}

.bp-book-questions__text {
	margin: 0 0 var(--bp-space-15);
	font-size: var(--bp-fs-sm);
}

.bp-book-questions__button,
.bp-book-questions__button:visited {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: var(--bp-space-10) var(--bp-space-40);
	border: var(--bp-border-1) solid var(--bp-accent);
	border-radius: var(--bp-radius-xs);
	background: none;
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-none);
	color: var(--bp-accent);
	cursor: pointer;
	transition: color 0.3s;
}

.bp-book-questions__button:hover,
.bp-book-questions__button:focus {
	color: var(--bp-accent-text-hover);
}

@media (min-width: 600px) {
	.bp-book-notes__amazon {
		font-size: var(--bp-fs-sm);
	}

	.bp-book-questions__wrap {
		flex-direction: row;
	}

	.bp-book-questions__title {
		font-size: var(--bp-fs-md);
	}

	.bp-book-questions__text {
		font-size: var(--bp-fs-xs);
	}
}

@media (min-width: 740px) {
	.bp-book-questions__text {
		font-size: var(--bp-fs-sm);
	}
}

@media (min-width: 850px) {
	.bp-book-questions__title {
		font-size: var(--bp-fs-2xl);
	}
}

@media (min-width: 1100px) {
	.bp-book-notes__amazon {
		font-size: var(--bp-fs-md);
	}
}

/* ==========================================================================
   4.4 "More Filters" side panel (book page)
   ========================================================================== */
.bp-filters-open {
	overflow: hidden;
}

.bp-filters-overlay {
	position: fixed;
	inset: 0;
	z-index: 150;
	background-color: var(--bp-primary);
	opacity: 0;
	transition: opacity 0.2s;
}

.bp-filters-overlay.is-open {
	opacity: 0.5;
}

/* Starts under the site header (--bp-filters-top is set by assets/js/main.js when it opens) */
.bp-filters {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 151;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 375px;
	height: 100%;
	padding-top: var(--bp-filters-top, 117px);
	background-color: var(--bp-white);
	transform: translateX(100%);
	transition: transform 0.4s;
}

.bp-filters.is-open {
	transform: translateX(0);
}

.bp-filters-overlay[hidden],
.bp-filters[hidden] {
	display: none;
}

.bp-filters__header {
	position: relative;
	padding: 0 var(--bp-space-20) var(--bp-space-6);
}

.bp-filters__title {
	margin: 0;
	padding-right: var(--bp-space-30);
	font-size: var(--bp-fs-sm);
	color: var(--bp-text);
}

.bp-filters__title-bold {
	font-size: var(--bp-fs-lg);
	color: var(--bp-heading-dark);
}

/* Close (thin grey X) */
.bp-filters__close {
	position: absolute;
	top: 0;
	right: var(--bp-space-20);
	width: 16px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-filters__close::before,
.bp-filters__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 20px;
	background-color: var(--bp-grey);
	transform: translate(-50%, -50%) rotate(45deg);
}

.bp-filters__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bp-filters__content {
	flex: 1;
	overflow-y: auto;
}

/* Groups (Used Book Condition, Alternate Editions, Shipping, Vendor) */
.bp-filters__group {
	margin-top: var(--bp-space-14);
	padding: var(--bp-space-20) var(--bp-space-20) 0;
}

.bp-filters__group-title {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 var(--bp-space-20);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	line-height: 28px;
	text-align: left;
	color: var(--bp-text);
}

.bp-filters__toggle {
	cursor: pointer;
}

.bp-filters__arrow {
	position: absolute;
	top: var(--bp-space-9);
	right: var(--bp-space-3);
	height: 9px;
	fill: var(--bp-accent);
	transform: rotate(180deg);
	transition: transform 0.3s;
}

.bp-filters__toggle[aria-expanded="false"] .bp-filters__arrow {
	transform: rotate(0deg);
}

.bp-filters__options {
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-24);
	margin-bottom: var(--bp-space-34);
}

.bp-filters__options[hidden],
.bp-filters__option[hidden] {
	display: none;
}

.bp-filters__option {
	position: relative;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	font-size: var(--bp-fs-md);
	line-height: 24px;
	color: var(--bp-heading-dark);
	cursor: pointer;
}

.bp-filters__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Panel checkboxes: lined up with the first line of their label */
.bp-filters__option .bp-filter__input {
	margin-top: var(--bp-space-3);
}

/* "More vendors" */
.bp-filters__more-vendors {
	position: relative;
	margin-top: var(--bp-space-1);
	padding: 0 var(--bp-space-20) 0 0;
	border: 0;
	background: none;
	font-size: var(--bp-fs-md);
	text-align: left;
	color: var(--bp-grey-soft);
	cursor: pointer;
}

.bp-filters__arrow--more {
	top: var(--bp-space-5);
	fill: var(--bp-grey-soft);
	transform: rotate(270deg);
}

/* Price: two fields with a bottom line */
.bp-filters__price {
	margin-bottom: var(--bp-space-25);
	padding: var(--bp-space-20) var(--bp-space-20) 0;
}

.bp-filters__price-inputs {
	display: flex;
	gap: var(--bp-space-24);
	padding-top: var(--bp-space-5);
}

.bp-filters__price-input {
	width: 100%;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-bottom: var(--bp-border-1) solid var(--bp-grey-light);
	border-radius: 0;
	background: none;
	font-size: var(--bp-fs-base);
	color: var(--bp-black);
}

.bp-filters__price-input::placeholder {
	color: var(--bp-field-label);
}

.bp-filters__price-input:focus {
	outline: none;
	border-bottom-color: var(--bp-primary);
}

/* OK button */
.bp-filters__footer {
	position: relative;
	padding: var(--bp-space-16) var(--bp-space-20);
	box-shadow: var(--bp-shadow-up);
}

.bp-filters__ok {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: var(--bp-space-15) var(--bp-space-24);
	border: 0;
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	color: var(--bp-white);
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.bp-filters__ok:hover,
.bp-filters__ok:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

@media (min-width: 1100px) {
	.bp-filters__title {
		padding-bottom: var(--bp-space-30);
	}

	.bp-filters__group {
		margin-top: 0;
		margin-bottom: var(--bp-space-16);
		padding: var(--bp-space-16);
	}

	.bp-filters__options {
		margin-bottom: var(--bp-space-12);
	}
}

/* ==========================================================================
   5. Watchlist page (page-templates/watchlist.php, /watchlist/)
   Like the reference: title, intro, Buy tab, then a grey area with one white card per book.
   ========================================================================== */
.bp-watchlist-page {
	display: flex;
	flex-direction: column;
	color: var(--bp-text);
}

.bp-watchlist-page__title {
	padding: var(--bp-space-20) 0;
	font-size: var(--bp-fs-2xl);
	color: var(--bp-black);
}

.bp-watchlist-page__intro {
	margin: 0 0 var(--bp-space-20);
	font-size: var(--bp-fs-sm);
}

/* Tabs: grey line across the page, orange bar under the current tab */
.bp-watchlist-tabs {
	border-bottom: var(--bp-border-2) solid var(--bp-grey);
}

.bp-watchlist-tabs__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-watchlist-tabs__item {
	display: flex;
	width: 50%;
}

/* :visited too: the global a:visited rule would otherwise make visited links grey */
.bp-watchlist-tabs__link,
.bp-watchlist-tabs__link:visited {
	position: relative;
	width: 100%;
	padding: var(--bp-space-14);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	text-align: center;
	text-decoration: none;
	color: var(--bp-heading-dark);
	transition: background-color 0.3s;
}

.bp-watchlist-tabs__link:hover,
.bp-watchlist-tabs__link:focus-visible {
	background-color: var(--bp-surface);
}

.bp-watchlist-tabs__link.is-active,
.bp-watchlist-tabs__link.is-active:visited {
	color: var(--bp-accent);
}

.bp-watchlist-tabs__link.is-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(-1 * var(--bp-border-2));
	left: 0;
	height: var(--bp-space-6);
	background-color: var(--bp-accent);
}

/* Grey area with the cards, down to the footer */
.bp-watchlist-page__body {
	flex: 1 0 auto;
	background-color: var(--bp-surface);
}

.bp-watchlist-cards {
	display: grid;
	grid-template-columns: 100%;
	row-gap: var(--bp-space-20);
	margin: var(--bp-space-40) 0 var(--bp-space-60);
	padding: 0;
	list-style: none;
}

.bp-watchlist-cards[hidden],
.bp-watchlist-page__empty[hidden] {
	display: none;
}

.bp-watchlist-page__empty {
	margin: var(--bp-space-20) 0;
}

/* One book */
.bp-watchlist-card {
	position: relative;
	padding: var(--bp-space-10);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
}

.bp-watchlist-card__content {
	display: flex;
	flex-direction: column;
}

.bp-watchlist-card__main {
	display: flex;
	min-width: 250px;
	margin-bottom: var(--bp-space-15);
}

.bp-watchlist-card__cover {
	display: block;
	flex-shrink: 0;
	width: 90px;
	height: 100px;
	margin-right: var(--bp-space-15);
	background-color: var(--bp-surface);
}

.bp-watchlist-card__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bp-watchlist-card__placeholder {
	display: block;
	height: 100%;
	background-color: var(--bp-grey-mid);
}

.bp-watchlist-card__text {
	flex: 1;
	min-width: 0;
}

/* Title: one line, cut with "...", an orange line grows under it on hover */
.bp-watchlist-card__title {
	max-width: 100%;
	margin-right: var(--bp-space-20);
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-heading);
}

.bp-watchlist-card__title a,
.bp-watchlist-card__title a:visited {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: top;
	text-decoration: none;
	color: var(--bp-black);
}

.bp-watchlist-card__title a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: var(--bp-border-2);
	background-color: var(--bp-accent);
	transition: width 0.3s;
}

.bp-watchlist-card__title a:hover::after,
.bp-watchlist-card__title a:focus-visible::after {
	width: 100%;
}

.bp-watchlist-card__details {
	margin: 0;
}

.bp-watchlist-card__detail {
	display: flex;
	margin-top: var(--bp-space-6);
	font-size: var(--bp-fs-xs);
	line-height: var(--bp-lh-base);
}

.bp-watchlist-card__detail dt {
	flex-shrink: 0;
	margin-right: var(--bp-space-10);
	font-weight: 700;
}

.bp-watchlist-card__detail dd {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Best price + store */
.bp-watchlist-card__prices {
	display: flex;
}

.bp-watchlist-card__best {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.bp-watchlist-card__best-label {
	margin-bottom: var(--bp-space-6);
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	line-height: var(--bp-lh-base);
}

.bp-watchlist-card__price,
.bp-watchlist-card__price:visited {
	margin-bottom: var(--bp-space-10);
	font-size: var(--bp-fs-xl);
	font-weight: 700;
	line-height: var(--bp-lh-base);
	text-decoration: none;
	color: var(--bp-accent);
	transition: color 0.3s;
}

.bp-watchlist-card__price:hover,
.bp-watchlist-card__price:focus-visible {
	color: var(--bp-accent-text-hover);
}

.bp-watchlist-card__no-price {
	font-size: var(--bp-fs-sm);
}

.bp-watchlist-card__vendor {
	display: flex;
	align-items: center;
	min-width: 0;
}

.bp-watchlist-card__vendor .bp-vendor-logo {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin: 0 var(--bp-space-10) 0 0;
}

.bp-watchlist-card__vendor-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--bp-fs-xs);
}

/* X in the top right corner: two grey lines, orange on hover */
.bp-watchlist-card__remove {
	position: absolute;
	top: var(--bp-space-5);
	right: var(--bp-space-5);
	width: 16px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-watchlist-card__remove::before,
.bp-watchlist-card__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bp-border-2);
	height: 100%;
	background-color: var(--bp-remove-cross);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: background-color 0.3s;
}

.bp-watchlist-card__remove::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bp-watchlist-card__remove:hover::before,
.bp-watchlist-card__remove:hover::after,
.bp-watchlist-card__remove:focus-visible::before,
.bp-watchlist-card__remove:focus-visible::after {
	background-color: var(--bp-accent-hover);
}

.bp-watchlist-card__remove:disabled {
	cursor: default;
}

@media (min-width: 400px) {
	.bp-watchlist-card__cover {
		width: 100px;
		height: 140px;
	}
}

@media (min-width: 740px) {
	.bp-watchlist-page__title {
		font-size: var(--bp-fs-4xl);
	}

	.bp-watchlist-page__intro {
		font-size: var(--bp-fs-base);
	}

	.bp-watchlist-tabs__item {
		max-width: 160px;
	}

	.bp-watchlist-tabs__link {
		font-size: var(--bp-fs-2xl);
	}

	.bp-watchlist-cards {
		margin-top: var(--bp-space-60);
	}

	.bp-watchlist-card {
		padding: var(--bp-space-20) var(--bp-space-20) var(--bp-space-30);
	}

	.bp-watchlist-card__content {
		flex-direction: row;
	}

	.bp-watchlist-card__main {
		flex-basis: 100%;
		max-width: 45%;
		min-width: 300px;
		margin: 0 var(--bp-space-40) 0 0;
	}

	.bp-watchlist-card__title {
		font-size: var(--bp-fs-22);
	}

	.bp-watchlist-card__detail {
		font-size: var(--bp-fs-base);
	}

	.bp-watchlist-card__detail dt {
		margin-right: var(--bp-space-20);
	}

	.bp-watchlist-card__prices {
		width: 100%;
		max-width: 50%;
		padding-top: var(--bp-space-40);
	}

	.bp-watchlist-card__best-label {
		font-size: var(--bp-fs-base);
	}

	.bp-watchlist-card__price {
		font-size: var(--bp-fs-34);
	}

	.bp-watchlist-card__vendor .bp-vendor-logo {
		width: 45px;
		height: 45px;
	}

	.bp-watchlist-card__vendor-name {
		font-size: var(--bp-fs-md);
	}

	.bp-watchlist-card__remove {
		top: var(--bp-space-10);
		right: var(--bp-space-10);
	}
}

@media (min-width: 850px) {
	.bp-watchlist-card__prices {
		max-width: 40%;
	}
}

@media (min-width: 1100px) {
	.bp-watchlist-card__main {
		max-width: 55%;
	}

	.bp-watchlist-card__title {
		font-size: var(--bp-fs-26);
	}

	.bp-watchlist-card__detail,
	.bp-watchlist-card__best-label {
		font-size: var(--bp-fs-md);
	}

	.bp-watchlist-card__price {
		font-size: var(--bp-fs-4xl);
	}

	.bp-watchlist-card__vendor-name {
		font-size: var(--bp-fs-lg);
	}
}

/* ==========================================================================
   6. Price alerts: popup on the book page (template-parts/price-alert-modal.php) and the
      "Price alert" switch on watchlist cards (page-templates/watchlist.php). Script: main.js section 9.
   ========================================================================== */

/* ---------- Popup: "Notify if the price is under [ ] $" ---------- */
.bp-alert-form {
	margin-top: var(--bp-space-5);
	text-align: center;
}

.bp-alert-form__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: var(--bp-space-10);
	font-size: var(--bp-fs-sm);
}

.bp-alert-form__field {
	display: flex;
	align-items: center;
	margin-left: var(--bp-space-10);
	color: var(--bp-black);
}

.bp-alert-form__input {
	width: 70px;
	margin-right: var(--bp-space-10);
	padding: var(--bp-space-10);
	border: var(--bp-border-1) solid var(--bp-black);
	border-radius: var(--bp-radius-sm);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	text-align: center;
	color: var(--bp-black);
}

/* Green while the alert is on; orange-red for a wrong price (wins, it comes after) */
.bp-alert-form__input.is-on,
.bp-watchlist-card__alert-input.is-on {
	border-color: var(--bp-alert-on);
	box-shadow: 0 0 0 var(--bp-border-1) var(--bp-alert-on);
}

.bp-alert-form__input.is-invalid,
.bp-watchlist-card__alert-input.is-invalid {
	box-shadow: none;
	border-color: var(--bp-alert-invalid);
}

.bp-alert-form__error,
.bp-watchlist-card__alert-error {
	margin: var(--bp-space-8) 0 0;
	font-size: var(--bp-fs-xs);
	color: var(--bp-error);
}

.bp-alert-form__error[hidden],
/* "Alert sent on ..." under the price box (the email went out; no more until the alert changes) */
.bp-watchlist-card__alert-sent {
	margin-top: var(--bp-space-6);
	font-size: var(--bp-fs-xs);
	color: var(--bp-muted);
}

.bp-watchlist-card__alert-error[hidden] {
	display: none;
}

/* SET PRICE ALERT: teal button, "Saving" while it is sent */
.bp-alert-form__submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-top: var(--bp-space-34);
	padding: var(--bp-space-15) var(--bp-space-24);
	border: 0;
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-secondary);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	color: var(--bp-white);
	cursor: pointer;
	transition: background-color 0.3s;
}

.bp-alert-form__submit:hover,
.bp-alert-form__submit:focus-visible {
	background-color: var(--bp-secondary-hover);
}

.bp-alert-form__submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

/* ---------- Watchlist card: "Price alert" switch, then the price box when it is on ---------- */
.bp-watchlist-card__alert {
	flex-shrink: 0;
	width: 50%;
	padding-right: var(--bp-space-12);
}

/* Phones: a thin line between the switch and the best price */
.bp-watchlist-card__alert + .bp-watchlist-card__best {
	padding-left: var(--bp-space-12);
	border-left: var(--bp-border-1) solid var(--bp-alert-divider);
}

.bp-watchlist-card__alert-switch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	cursor: pointer;
}

.bp-watchlist-card__alert-label {
	margin-bottom: var(--bp-space-8);
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	line-height: var(--bp-lh-input);
}

/* The real checkbox stays in the page for keyboards and screen readers, drawn as a switch */
.bp-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bp-toggle {
	position: relative;
	display: block;
	width: 30px;
	height: 15px;
	border-radius: 100px;
	background-color: var(--bp-text);
	transition: background-color 0.4s;
}

.bp-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 7.5px;
	width: 12px;
	height: 12px;
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-white);
	transform: translate(-50%, -50%);
	transition: left 0.4s;
}

.bp-toggle__input:checked + .bp-toggle {
	background-color: var(--bp-accent);
}

.bp-toggle__input:checked + .bp-toggle::before {
	left: calc(100% - 7.5px);
}

.bp-toggle__input:focus-visible + .bp-toggle {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-toggle__input:disabled + .bp-toggle {
	opacity: 0.7;
}

.bp-watchlist-card__alert-price {
	display: flex;
	flex-direction: column;
	margin-top: var(--bp-space-15);
}

.bp-watchlist-card__alert-price[hidden] {
	display: none;
}

.bp-watchlist-card__alert-price-label {
	margin-bottom: var(--bp-space-8);
	font-size: var(--bp-fs-sm);
}

/* Currency sign inside the box, on the left */
.bp-watchlist-card__alert-field {
	position: relative;
	display: inline-flex;
}

.bp-watchlist-card__alert-field::before {
	content: attr(data-currency);
	position: absolute;
	top: 50%;
	left: var(--bp-space-5);
	transform: translateY(-50%);
	font-size: var(--bp-fs-sm);
	color: var(--bp-black);
}

.bp-watchlist-card__alert-input {
	width: 80px;
	padding: var(--bp-space-6) var(--bp-space-6) var(--bp-space-6) var(--bp-space-15);
	border: var(--bp-border-1) solid var(--bp-text);
	border-radius: var(--bp-radius-sm);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-sm);
	color: var(--bp-black);
}

@media (min-width: 740px) {
	.bp-watchlist-card__alert {
		width: auto;
		min-width: 110px;
	}

	.bp-watchlist-card__alert + .bp-watchlist-card__best {
		border-left: 0;
	}

	.bp-watchlist-card__alert-label {
		margin-bottom: var(--bp-space-20);
		font-size: var(--bp-fs-base);
	}

	.bp-toggle {
		width: 45px;
		height: 25px;
	}

	.bp-toggle::before {
		left: 12.5px;
		width: 20px;
		height: 20px;
	}

	.bp-toggle__input:checked + .bp-toggle::before {
		left: calc(100% - 12.5px);
	}

	.bp-watchlist-card__alert-price-label {
		margin-bottom: var(--bp-space-15);
		font-size: var(--bp-fs-base);
	}

	.bp-watchlist-card__alert-input {
		font-size: var(--bp-fs-md);
	}
}

@media (min-width: 850px) {
	.bp-watchlist-card__alert {
		min-width: 140px;
	}
}

@media (min-width: 1100px) {
	.bp-watchlist-card__alert-label,
	.bp-watchlist-card__alert-price-label {
		font-size: var(--bp-fs-md);
	}
}

/* ==========================================================================
   7. Search results (page-templates/search-results.php, /isbn-search/?isbn=...)
   Header search with no book. Like the reference "No Matches..." page: title, text, tips
   (slider below 740px, 3 side by side from 740px), Back to homepage + Contact us.
   ========================================================================== */
.bp-results-page__inner {
	padding-top: var(--bp-space-20);
	padding-bottom: var(--bp-space-30);
}

.bp-results {
	padding: var(--bp-space-10);
	background-color: var(--bp-white);
	color: var(--bp-black);
}

.bp-results__title,
.bp-results__tips-title {
	font-size: var(--bp-fs-2xl);
	color: var(--bp-black);
}

.bp-results__text {
	margin: var(--bp-space-20) 0 0;
	font-size: var(--bp-fs-lg);
}

.bp-results__tips-title {
	margin: var(--bp-space-55) 0 var(--bp-space-40);
}

/* Tips: the slider track below 740px (one tip per swipe, dots from main.js) */
.bp-results__slider {
	padding: 0;
}

.bp-results__tips {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* hide scrollbar (Firefox) */
}

.bp-results__tips::-webkit-scrollbar {
	display: none; /* hide scrollbar (Chrome, Safari) */
}

.bp-results__tip {
	flex: 0 0 100%;
	min-width: 215px;
	padding: var(--bp-space-3);
	scroll-snap-align: start;
}

.bp-results__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: var(--bp-space-4); /* same gap as the reference's inline icon */
}

.bp-results__tip-title {
	margin: var(--bp-space-20) 0;
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-lg);
	font-weight: 600;
	line-height: var(--bp-lh-base);
	color: var(--bp-black);
}

.bp-results__tip-text {
	margin: 0;
	font-size: var(--bp-fs-lg);
}

/* Buttons: stacked and full width on phones, side by side from 600px */
.bp-results__actions {
	display: flex;
	flex-direction: column;
	margin: var(--bp-space-90) 0 var(--bp-space-50);
}

.bp-results__home,
.bp-results__home:visited,
.bp-results__contact,
.bp-results__contact:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: var(--bp-space-15) 0;
	border-radius: var(--bp-radius-xs);
	font-family: var(--bp-font-body);
	line-height: var(--bp-lh-none);
	letter-spacing: 1px;
	text-decoration: none;
	transition: color 0.3s, background-color 0.3s, opacity 0.3s;
}

.bp-results__home,
.bp-results__home:visited {
	background-color: var(--bp-accent);
	font-size: var(--bp-fs-lg);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bp-white);
}

.bp-results__home:hover,
.bp-results__home:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

.bp-results__contact,
.bp-results__contact:visited {
	margin-top: var(--bp-space-10);
	border: var(--bp-border-1) solid var(--bp-black);
	background-color: transparent;
	font-size: var(--bp-fs-md);
	color: var(--bp-black);
}

.bp-results__contact:hover,
.bp-results__contact:focus {
	opacity: 0.7;
}

@media (min-width: 600px) {
	.bp-results__actions {
		flex-direction: row;
	}

	.bp-results__home {
		max-width: 290px;
	}

	.bp-results__contact {
		max-width: 200px;
		margin-top: 0;
		margin-left: var(--bp-space-30);
	}
}

@media (min-width: 740px) {
	.bp-results-page__inner {
		padding-top: var(--bp-space-30);
	}

	.bp-results__tips-title {
		margin-top: var(--bp-space-80);
	}

	/* No slider: 3 tips side by side */
	.bp-results__tips {
		justify-content: center;
		column-gap: var(--bp-space-25);
		overflow: visible;
	}

	.bp-results__tip {
		flex: 1 1 0;
		padding: 0;
	}
}

@media (min-width: 1100px) {
	.bp-results__title {
		font-size: var(--bp-fs-4xl);
	}
}

/* ==========================================================================
   8. Blog (blog index, category / tag pages, single post)
   Layout of the reference blog: hero with the ISBN search (3.1), then the posts
   with a sidebar beside them (1100px+) or under them. The first post of every
   three is wide, the other two are half width side by side (740px+).
   ========================================================================== */
.bp-blog-page {
	font-family: var(--bp-font-blog);
	color: var(--bp-blog-text);
}

/* Hero: the homepage hero without the logo bubbles: full width, heading on two lines, wider search box,
   soft shadow along the bottom edge (like the reference) */
.bp-hero--blog {
	box-shadow: var(--bp-shadow-hero-inset);
}

.bp-hero--blog .bp-hero__title {
	font-family: var(--bp-font-heading);
	line-height: var(--bp-lh-heading);
}

.bp-hero--blog .bp-hero__title br {
	display: inline;
}

@media (min-width: 740px) {
	.bp-hero--blog .bp-hero__content {
		width: 100%;
		padding-top: 0;
	}

	.bp-hero--blog .bp-hero__title {
		max-width: none;
		margin: var(--bp-space-20) 0 var(--bp-space-45);
	}

	.bp-hero--blog .bp-search__row {
		max-width: none;
	}

	.bp-hero--blog {
		padding-bottom: var(--bp-space-80);
	}
}

@media (min-width: 1100px) {
	.bp-hero--blog .bp-hero__content {
		padding: 0 var(--bp-space-40);
	}
}

.bp-blog-layout {
	padding-top: var(--bp-space-40);
	padding-bottom: var(--bp-space-70);
}

@media (min-width: 1100px) {
	.bp-blog-layout {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	/* Sticky too, like the sidebar, so the shorter column stays in view (e.g. a short post next to a long
	   sidebar); the taller column has no room to stick. When the column is taller than the screen it sticks
	   once its end reaches the bottom of the screen, so none of the post is hidden.
	   --bp-blog-main-height = the column's height, set by assets/js/main.js, section 11. */
	.bp-blog-layout__main {
		position: sticky;
		top: min(calc(var(--bp-sticky-top, 0px) + var(--bp-space-5)), calc(100vh - var(--bp-blog-main-height, 0px) - var(--bp-space-5)));
		flex: 0 1 var(--bp-blog-main);
		min-width: 0;
	}
}

/* Page heading: a grey centred box on category / tag pages and search results, like the reference
   (small label, then the name); screen readers only on the blog index */
.bp-blog-header--box {
	margin-bottom: var(--bp-space-50);
	padding: var(--bp-space-30);
	background-color: var(--bp-blog-panel);
	text-align: center;
}

@media (min-width: 490px) {
	.bp-blog-header--box {
		padding: var(--bp-space-50);
	}
}

.bp-blog-header__title {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-30);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-heading);
	color: var(--bp-blog-heading);
	overflow-wrap: break-word;
}

.bp-blog-header__label {
	display: block;
	margin-bottom: var(--bp-space-15);
	font-family: var(--bp-font-blog);
	font-size: var(--bp-fs-11);
	font-weight: 400;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-label);
	text-transform: uppercase;
	color: var(--bp-blog-meta);
}

.bp-blog-header__text {
	padding-top: var(--bp-space-15);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-text);
}

.bp-blog-empty {
	font-size: var(--bp-fs-blog);
	line-height: var(--bp-lh-text);
	text-align: center;
}

/* Post list: one column, then wide + half-width cards from 740px */
.bp-post-list {
	display: grid;
	row-gap: var(--bp-space-50);
}

@media (min-width: 740px) {
	.bp-post-list {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: var(--bp-space-45);
	}

	.bp-blog-card--wide {
		grid-column: 1 / -1;
	}
}

.bp-blog-card {
	min-width: 0;
}

.bp-blog-card__title,
.bp-post__title {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-22);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-blog-heading);
	overflow-wrap: break-word;
}

.bp-blog-card__title a,
.bp-blog-card__title a:visited {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.bp-blog-card__title a:hover,
.bp-blog-card__title a:focus {
	color: var(--bp-accent);
}

@media (min-width: 740px) {
	.bp-blog-card--wide .bp-blog-card__title {
		font-size: var(--bp-fs-2xl);
	}
}

/* Archives and search results: every card wide, with the title as big as on the post itself */
.bp-post-list--wide .bp-blog-card__title {
	font-size: var(--bp-fs-34);
}

@media (min-width: 740px) {
	.bp-post-list--wide .bp-blog-card__title {
		font-size: var(--bp-fs-46);
	}
}

/* Line under the title: category, author, dates, tags */
.bp-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--bp-space-22);
	row-gap: var(--bp-space-2);
	margin-top: var(--bp-space-8);
	font-size: var(--bp-fs-xs);
	line-height: var(--bp-lh-text);
	color: var(--bp-blog-meta);
}

.bp-post-meta a,
.bp-post-meta a:visited {
	color: inherit;
	text-decoration: underline;
}

.bp-post-meta a:hover,
.bp-post-meta a:focus {
	color: var(--bp-accent);
}

.bp-post-meta .bp-post-meta__category,
.bp-post-meta .bp-post-meta__category:visited {
	font-size: var(--bp-fs-sm);
	font-weight: 700;
	color: var(--bp-accent);
	text-decoration: none;
}

.bp-post-meta .bp-post-meta__category:hover,
.bp-post-meta .bp-post-meta__category:focus {
	color: var(--bp-accent-hover);
	text-decoration: underline;
}

.bp-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--bp-space-5);
}

.bp-post-meta__icon {
	width: var(--bp-fs-xs);
	height: var(--bp-fs-xs);
	stroke-width: 1.5;
}

/* Tags on their own line, like the reference */
.bp-post-meta__tags {
	flex-basis: 100%;
}

.bp-blog-card__image {
	display: block;
	margin-top: var(--bp-space-25);
}

.bp-blog-card__image img,
.bp-post__image img {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--bp-grey-light);
}

.bp-blog-card__excerpt {
	margin-top: var(--bp-space-25);
	font-size: var(--bp-fs-blog);
	line-height: var(--bp-lh-text);
	overflow-wrap: break-word;
}

/* "Continue reading" button */
.bp-blog-card__more,
.bp-blog-card__more:visited {
	display: inline-block;
	margin-top: var(--bp-space-20);
	padding: 0 var(--bp-space-22);
	background-color: var(--bp-blog-button);
	font-size: var(--bp-fs-xs);
	font-weight: 700;
	line-height: var(--bp-space-34);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bp-white);
	transition: color 0.3s;
}

/* Hover: only the text colour changes, like the reference */
.bp-blog-card__more:hover,
.bp-blog-card__more:focus {
	color: var(--bp-blog-button-hover);
}

/* Page numbers: black squares, current page in orange */
.bp-pagination {
	margin-top: var(--bp-space-70);
}

.bp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bp-space-5);
}

.bp-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bp-space-34);
	height: var(--bp-space-34);
	padding: 0 var(--bp-space-8);
	background-color: var(--bp-blog-button);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	text-decoration: none;
	color: var(--bp-white);
	transition: background-color 0.3s;
}

.bp-pagination .page-numbers.current {
	color: var(--bp-accent);
}

.bp-pagination a.page-numbers:hover,
.bp-pagination a.page-numbers:focus {
	background-color: var(--bp-accent);
	color: var(--bp-white);
}

/* Sidebar: grey boxes; under the posts (centred) below 1100px */
.bp-blog-sidebar {
	max-width: var(--bp-blog-widget-max-sm);
	margin: var(--bp-space-70) auto 0;
}

@media (min-width: 740px) {
	.bp-blog-sidebar {
		max-width: var(--bp-blog-widget-max);
	}
}

/* 1100px+: sticky, like the reference. When the sidebar's top reaches the header it stays there while the
   posts scroll on; once its end lines up with the end of the posts, both scroll together.
   --bp-sticky-top = header height (+ admin bar), set by assets/js/main.js, section 11. */
@media (min-width: 1100px) {
	.bp-blog-sidebar {
		position: sticky;
		top: calc(var(--bp-sticky-top, 0px) + var(--bp-space-5));
		flex: 0 0 var(--bp-blog-side);
		max-width: none;
		margin: 0;
	}
}

.bp-widget {
	margin-bottom: var(--bp-space-50);
	padding: var(--bp-space-30);
	background-color: var(--bp-blog-panel);
}

.bp-widget:last-child {
	margin-bottom: 0;
}

.bp-widget__title {
	margin-bottom: var(--bp-space-30);
	padding-left: var(--bp-space-10);
	border-left: var(--bp-border-5) solid var(--bp-blog-heading);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	color: var(--bp-blog-heading);
}

.bp-widget__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--bp-space-20);
}

.bp-widget__text {
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-text);
}

/* "Looking for Something?" blog search */
.bp-widget__title label {
	cursor: pointer;
}

.bp-widget-search__input {
	display: block;
	width: 100%;
	height: var(--bp-space-40);
	padding: var(--bp-space-10);
	border: var(--bp-border-1) solid var(--bp-blog-line);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--bp-font-system);
	font-size: var(--bp-fs-base);
	color: var(--bp-black);
}

.bp-widget__list li {
	display: flex;
	justify-content: space-between;
	gap: var(--bp-space-10);
	margin-bottom: var(--bp-space-8);
	padding-bottom: var(--bp-space-8);
	border-bottom: var(--bp-border-1) dotted var(--bp-blog-line);
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-text);
}

.bp-widget__list a,
.bp-widget__list a:visited {
	color: var(--bp-blog-text);
	text-decoration: none;
}

.bp-widget__list a:hover,
.bp-widget__list a:focus {
	color: var(--bp-accent);
}

/* Latest posts: image with the date and title in a light box on top */
.bp-widget-post {
	margin-bottom: var(--bp-space-20);
}

.bp-widget-post:last-child {
	margin-bottom: 0;
}

.bp-widget-post a {
	position: relative;
	display: flex;
	min-height: var(--bp-blog-image-height);
	text-decoration: none;
	color: var(--bp-blog-heading);
}

.bp-widget-post__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bp-widget-post--no-image a {
	background-color: var(--bp-grey-light);
}

.bp-widget-post__text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	margin: var(--bp-space-15);
	padding: var(--bp-space-15);
	background-color: var(--bp-blog-overlay);
	text-align: center;
	transition: background-color 0.3s;
}

.bp-widget-post a:hover .bp-widget-post__text,
.bp-widget-post a:focus .bp-widget-post__text {
	background-color: var(--bp-white);
}

.bp-widget-post__date {
	font-size: var(--bp-fs-10);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	color: var(--bp-blog-text);
}

.bp-widget-post__title {
	margin-top: var(--bp-space-5);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
}

/* Single post */
.bp-post__title {
	font-size: var(--bp-fs-34);
}

@media (min-width: 740px) {
	.bp-post__title {
		font-size: var(--bp-fs-46);
	}
}

.bp-post__image {
	margin: var(--bp-space-25) 0 0;
}

/* Post content (from the editor) */
.bp-post__content {
	margin-top: var(--bp-space-25);
	font-size: var(--bp-fs-blog);
	line-height: var(--bp-lh-text);
	overflow-wrap: break-word;
}

.bp-post__content > * + * {
	margin-top: var(--bp-space-25);
}

.bp-post__content h2,
.bp-post__content h3,
.bp-post__content h4 {
	margin-top: var(--bp-space-40);
	font-family: var(--bp-font-heading);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	color: var(--bp-blog-heading);
}

.bp-post__content h2 {
	font-size: var(--bp-fs-2xl);
}

.bp-post__content h3 {
	font-size: var(--bp-fs-xl);
}

.bp-post__content h4 {
	font-size: var(--bp-fs-lg);
}

@media (min-width: 740px) {
	.bp-post__content h2 {
		font-size: var(--bp-fs-32);
	}
}

.bp-post__content a,
.bp-post__content a:visited {
	font-weight: 700;
	color: var(--bp-accent);
	text-decoration: none;
}

.bp-post__content a:hover,
.bp-post__content a:focus {
	color: var(--bp-accent-hover);
	text-decoration: underline;
}

.bp-post__content ul,
.bp-post__content ol {
	padding-left: var(--bp-space-25);
}

.bp-post__content ul {
	list-style: disc;
}

.bp-post__content ol {
	list-style: decimal;
}

.bp-post__content li + li {
	margin-top: var(--bp-space-8);
}

.bp-post__content img {
	max-width: 100%;
	height: auto;
}

.bp-post__content figcaption {
	margin-top: var(--bp-space-8);
	font-size: var(--bp-fs-sm);
	color: var(--bp-blog-meta);
	text-align: center;
}

.bp-post__content blockquote {
	padding-left: var(--bp-space-20);
	border-left: var(--bp-border-5) solid var(--bp-accent);
	font-style: italic;
}

.bp-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bp-fs-base);
}

.bp-post__content th,
.bp-post__content td {
	padding: var(--bp-space-8) var(--bp-space-12);
	border: var(--bp-border-1) solid var(--bp-grey-light);
	text-align: left;
}

.bp-post__pages {
	font-weight: 700;
}

/* "Find the Best Price Instantly" search after the post */
.bp-post-search {
	margin-top: var(--bp-space-50);
}

.bp-post-search__title {
	margin-bottom: var(--bp-space-15);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-xl);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-primary);
}

/* Author box */
.bp-author {
	margin-top: var(--bp-space-50);
	text-align: center;
}

.bp-author__avatar {
	display: block;
	margin: 0 auto var(--bp-space-10);
	border-radius: var(--bp-radius-round);
}

.bp-author__name {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	font-weight: 700;
	color: var(--bp-blog-heading);
}

.bp-author__bio {
	margin-top: var(--bp-space-10);
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-text);
	text-align: left;
}

/* "You may also like": 3 posts side by side from 600px */
.bp-related {
	margin-top: var(--bp-space-50);
}

.bp-related__title {
	margin-bottom: var(--bp-space-20);
	border-bottom: var(--bp-border-2) solid var(--bp-blog-heading);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-xl);
	font-weight: 700;
	line-height: var(--bp-space-50);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--bp-blog-heading);
}

.bp-related__list {
	display: grid;
	gap: var(--bp-space-25);
}

@media (min-width: 600px) {
	.bp-related__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bp-related__link {
	display: block;
	height: 100%;
	background-color: var(--bp-blog-panel);
	text-decoration: none;
	color: var(--bp-blog-heading);
	transition: color 0.3s;
}

.bp-related__link:hover,
.bp-related__link:focus {
	color: var(--bp-accent);
}

.bp-related__image {
	display: block;
	width: 100%;
	height: var(--bp-blog-related-image);
	object-fit: cover;
}

.bp-related__image--empty {
	background-color: var(--bp-grey-light);
}

.bp-related__name {
	display: block;
	padding: var(--bp-space-10) var(--bp-space-10) var(--bp-space-15);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
}

/* ==========================================================================
   9. Reviews page (page-templates/reviews.php, testimonials from inc/reviews.php)
   ========================================================================== */

/* Title band */
.bp-reviews-hero {
	padding: var(--bp-space-24) 0;
	background-color: var(--bp-reviews-band);
}

.bp-reviews-hero__title {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-2xl);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-heading-dark);
}

@media (min-width: 740px) {
	.bp-reviews-hero__title {
		font-size: var(--bp-fs-4xl);
	}
}

.bp-reviews-hero__text {
	margin-top: var(--bp-space-16);
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-reviews-hero__text p + p {
	margin-top: var(--bp-space-10);
}

/* Testimonials: 1 column, 2 from 740px, 3 from 1100px (filled column by column) */
.bp-reviews {
	padding-top: var(--bp-space-48);
	padding-bottom: var(--bp-space-27);
}

.bp-reviews__list {
	column-gap: var(--bp-space-20);
}

@media (min-width: 740px) {
	.bp-reviews__list {
		column-count: 2;
	}
}

@media (min-width: 1100px) {
	.bp-reviews__list {
		column-count: 3;
	}
}

.bp-review {
	padding-bottom: var(--bp-space-24);
	break-inside: avoid;
}

.bp-review__bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: var(--bp-space-20);
	padding: var(--bp-space-24);
	background-color: var(--bp-review-card);
	border-radius: var(--bp-radius-sm);
}

/* Speech bubble tail, bottom right */
.bp-review__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	right: var(--bp-space-14);
	border-top: var(--bp-border-10) solid var(--bp-review-card);
	border-right: var(--bp-border-10) solid transparent;
	border-left: var(--bp-border-10) solid transparent;
}

.bp-review__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bp-space-10) var(--bp-space-20);
}

.bp-review__date {
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-base);
	color: var(--bp-review-date);
}

.bp-review__stars {
	display: flex;
	gap: var(--bp-space-2);
}

.bp-review__star {
	width: var(--bp-space-16);
	height: var(--bp-space-16);
	fill: var(--bp-review-star-off);
}

.bp-review__star.is-on {
	fill: var(--bp-review-star);
}

.bp-review__text {
	margin: 0;
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-base);
	color: var(--bp-heading-dark);
	overflow-wrap: break-word;
}

.bp-review__text p {
	margin: 0;
}

.bp-review__text p + p {
	margin-top: var(--bp-space-10);
}

.bp-review__by {
	margin-top: var(--bp-space-18);
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-base);
	text-align: right;
	color: var(--bp-primary-deep);
}

.bp-review__context {
	color: var(--bp-text);
}

.bp-reviews__empty {
	font-size: var(--bp-fs-md);
	text-align: center;
	color: var(--bp-text);
}

/* "Would you like to share your story?" */
.bp-reviews-share {
	padding-bottom: var(--bp-space-70);
	color: var(--bp-primary);
}

.bp-reviews-share__title {
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-2xl);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
}

.bp-reviews-share__text {
	margin-top: var(--bp-space-20);
	font-size: var(--bp-fs-md);
	line-height: var(--bp-lh-heading);
}

.bp-reviews-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bp-space-20);
	margin-top: var(--bp-space-20);
}

.bp-reviews-share__button,
.bp-reviews-share__button:visited {
	padding: var(--bp-space-12) var(--bp-space-24);
	font-size: var(--bp-fs-xl);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bp-white);
	background-color: var(--bp-share-facebook);
	border-radius: var(--bp-radius-sm);
	transition: opacity 0.3s;
}

.bp-reviews-share__button--x,
.bp-reviews-share__button--x:visited {
	background-color: var(--bp-share-x);
}

.bp-reviews-share__button:hover,
.bp-reviews-share__button:focus {
	color: var(--bp-white);
	opacity: 0.85;
}

/* ==========================================================================
   10. Contact form (template-parts/contact-form.php: Contact page + "Leave a Comment" popup)
   ========================================================================== */

/* Intro text above the fields */
.bp-contact__intro {
	line-height: var(--bp-lh-base);
}

.bp-contact__intro p {
	margin: var(--bp-space-10) 0 var(--bp-space-25);
}

/* Comment box: the label sits at its bottom until it is used, like the reference */
.bp-field--textarea .bp-field__input {
	display: block;
	height: var(--bp-field-height-textarea);
	padding: var(--bp-space-6) 0;
	font-family: var(--bp-font-body);
	line-height: var(--bp-lh-base);
	resize: vertical;
}

/* Message under a field ("Full name is required"): 11px, light orange, like the reference */
.bp-field__error {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: var(--bp-space-2);
	font-size: var(--bp-fs-11);
	line-height: var(--bp-lh-base);
	color: var(--bp-alert-invalid);
}

.bp-field.is-invalid .bp-field__input {
	border-bottom-color: var(--bp-alert-invalid);
}

/* 34px above the button, like the reference (it collapses with the field's 20px bottom margin) */
.bp-contact__form .bp-auth-form__submit {
	margin-top: var(--bp-space-34);
}

/* SEND COMMENT: while sending, the white loader and "LOADING" show instead of the text (the button keeps its colour) */
.bp-contact__submit {
	gap: var(--bp-space-10);
}

.bp-contact__submit .bp-spinner,
.bp-contact__submit:not(.is-loading) .bp-contact__submit-busy {
	display: none;
}

.bp-contact__submit.is-loading {
	opacity: 1;
}

.bp-contact__submit.is-loading .bp-contact__submit-text {
	display: none;
}

.bp-contact__submit.is-loading .bp-spinner {
	display: inline-block;
	color: var(--bp-white);
}

/* Contact page: the same white box as the popup, centred on a light background */
.bp-contact-page {
	padding: var(--bp-space-40) 0;
	background-color: var(--bp-contact-bg);
}

.bp-contact-page__box {
	width: calc(100% - var(--bp-space-20));
	max-width: 600px;
	margin: 0 auto;
	padding: var(--bp-space-10);
	border-radius: var(--bp-radius-sm);
	background-color: var(--bp-white);
}

.bp-contact-page__title {
	padding: var(--bp-space-20) var(--bp-space-10) 0;
}

@media (min-width: 740px) {
	.bp-contact-page {
		padding: var(--bp-space-60) 0;
	}

	.bp-contact-page__box {
		padding-bottom: var(--bp-space-20);
	}

	.bp-contact-page__title {
		padding: var(--bp-space-14) var(--bp-space-22) 0;
	}
}

/* ==========================================================================
   11. Content pages (FAQ, Press, Affiliates, Scholarship, Terms, Privacy; inc/content-pages.php)
   ========================================================================== */

/* Page title on a full-width light blue band (FAQ), like the reference */
.bp-page-band-title {
	width: 100%;
	margin: 0 0 var(--bp-space-10);
	padding: var(--bp-space-20);
	background-color: var(--bp-page-band);
	font-size: var(--bp-fs-2xl);
	line-height: var(--bp-lh-heading);
	letter-spacing: var(--bp-ls-band);
	text-align: center;
	color: var(--bp-primary);
}

@media (min-width: 600px) {
	.bp-page-band-title {
		margin-bottom: var(--bp-space-20);
	}
}

@media (min-width: 740px) {
	.bp-page-band-title {
		font-size: var(--bp-fs-4xl);
		letter-spacing: var(--bp-ls-band-lg);
	}
}

/* "Awaiting client content" note, only shown to editors on a page with no text yet */
.bp-page-notice {
	margin: var(--bp-space-20) 0;
	padding: var(--bp-space-12) var(--bp-space-15);
	border-left: var(--bp-border-4) solid var(--bp-notice-page-line);
	background-color: var(--bp-notice-page-bg);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-relaxed);
	color: var(--bp-text);
}

.bp-page-notice a {
	color: var(--bp-accent);
}

/* ==========================================================================
   11.1 FAQ (page-templates/faq.php): questions as an accordion (<details>), then the contact form
   ========================================================================== */
.bp-faq {
	margin-bottom: var(--bp-space-40);
}

.bp-faq__intro {
	margin-bottom: var(--bp-space-20);
	color: var(--bp-text);
}

.bp-faq__item {
	border-bottom: var(--bp-border-1) solid var(--bp-faq-line);
	interpolate-size: allow-keywords; /* lets the answer slide open (browsers that support it) */
}

/* Question row: the whole row opens / closes the answer */
.bp-faq__question {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--bp-space-20) var(--bp-space-25) var(--bp-space-20) 0;
	list-style: none;
	cursor: pointer;
}

.bp-faq__question::-webkit-details-marker {
	display: none;
}

.bp-faq__question:focus-visible {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-faq__question-text {
	margin: 0;
	padding-bottom: var(--bp-space-5);
	font-size: var(--bp-fs-lg);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-primary);
}

/* Arrow on the right: turns upside down while the answer is open */
.bp-faq__icon {
	position: absolute;
	top: 50%;
	right: var(--bp-space-5);
	color: var(--bp-text);
	transform: rotate(0deg) scale(var(--bp-faq-icon-scale)) translateY(-25%);
	transition: transform var(--bp-faq-time);
}

.bp-faq__item[open] .bp-faq__icon {
	transform: rotate(180deg) scale(var(--bp-faq-icon-scale)) translateY(-25%);
}

/* Answer: slides open in browsers that support it, opens at once in the others */
.bp-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: block-size var(--bp-faq-time), opacity var(--bp-faq-time), content-visibility var(--bp-faq-time) allow-discrete;
}

.bp-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

.bp-faq__answer {
	padding-bottom: var(--bp-space-30);
	color: var(--bp-text);
}

.bp-faq__answer p,
.bp-faq__answer ul,
.bp-faq__answer ol {
	margin: 0;
	padding-bottom: var(--bp-space-12);
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-heading);
}

.bp-faq__answer ul,
.bp-faq__answer ol {
	padding-left: var(--bp-space-20);
}

.bp-faq__answer a {
	color: var(--bp-accent);
}

.bp-faq__answer a:hover,
.bp-faq__answer a:focus {
	color: var(--bp-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
	.bp-faq__icon,
	.bp-faq__item::details-content {
		transition: none;
	}
}

/* "Do you have any questions?": text on the left, contact form on the right (740px+) */
.bp-faq-contact {
	padding: var(--bp-space-50) 0;
	background-color: var(--bp-page-band);
	color: var(--bp-text);
}

.bp-faq-contact__inner {
	display: flex;
	flex-direction: column;
}

.bp-faq-contact__title {
	margin: 0 0 var(--bp-space-20);
	font-size: var(--bp-fs-2xl);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-primary);
}

@media (min-width: 740px) {
	.bp-faq-contact__inner {
		flex-direction: row;
		justify-content: space-between;
	}

	.bp-faq-contact__inner > * {
		width: var(--bp-faq-col);
	}
}

/* ==========================================================================
   11.2 Page titles and editor text (Terms, Privacy, any page on the default template; Press)
   ========================================================================== */

/* Centred grey title: bold 28px on phones, regular 36px from 740px, like the reference */
.bp-page-title {
	margin: 0 0 var(--bp-space-20);
	font-size: var(--bp-fs-2xl);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	text-align: center;
	color: var(--bp-text);
}

@media (min-width: 740px) {
	.bp-page-title {
		font-size: var(--bp-fs-36);
		font-weight: 400;
	}
}

/* Text written in the page editor */
.bp-entry {
	font-size: var(--bp-fs-base);
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-entry p {
	margin: 0 0 var(--bp-space-12);
	padding: 0;
}

.bp-entry h2,
.bp-entry h3,
.bp-entry h4 {
	margin: var(--bp-space-20) 0 var(--bp-space-12);
	font-family: var(--bp-font-body);
	font-size: inherit;
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-entry ul,
.bp-entry ol {
	margin: var(--bp-space-20) 0;
	padding-left: var(--bp-space-30);
}

.bp-entry ul {
	list-style: disc;
}

.bp-entry li {
	margin-bottom: var(--bp-space-10);
}

.bp-entry a {
	color: var(--bp-accent);
}

.bp-entry a:hover,
.bp-entry a:focus {
	color: var(--bp-accent-hover);
}

.bp-entry img {
	max-width: 100%;
	height: auto;
}

@media (min-width: 740px) {
	.bp-entry {
		font-size: var(--bp-fs-md);
	}
}

/* Default page template (page.php): Terms, Privacy */
.bp-text-page {
	padding: var(--bp-space-30) 0;
}

@media (min-width: 600px) {
	.bp-text-page {
		padding: var(--bp-space-50) 0 var(--bp-space-60);
	}
}

/* ==========================================================================
   11.3 Press (page-templates/press.php)
   ========================================================================== */
.bp-press__title {
	margin: 0;
	padding: var(--bp-space-20) var(--bp-space-20) 0;
	font-size: var(--bp-fs-2xl);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	letter-spacing: var(--bp-ls-band);
	text-align: center;
	color: var(--bp-text);
}

@media (min-width: 740px) {
	.bp-press__title {
		font-size: var(--bp-fs-36);
		font-weight: 400;
		letter-spacing: var(--bp-ls-title-lg);
	}
}

/* Text under the title and under the logos: one narrow centred column */
.bp-press__text {
	max-width: var(--bp-press-text);
	padding-top: var(--bp-space-20);
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-press__text p {
	margin: 0 0 var(--bp-space-12);
	padding: 0 0 var(--bp-space-20);
}

.bp-press__text a {
	color: var(--bp-accent);
}

@media (min-width: 740px) {
	.bp-press__text {
		font-size: var(--bp-fs-md);
	}
}

/* Publication logos on a grey band */
.bp-press__logos {
	padding: var(--bp-space-20) 0 var(--bp-space-40);
	background-color: var(--bp-press-band);
}

.bp-press__logo-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding-top: var(--bp-space-20);
	list-style: none;
}

.bp-press__logo {
	flex: 0 1 auto;
	padding: 0 var(--bp-space-10) var(--bp-space-4); /* 140 x 44 per logo, as on the reference */
}

/* Same 120 x 40 box for every logo (logo scaled to fit inside), so the rows line up like the reference:
   2 per row on phones, 3 from 490px, 5 on tablets, 8 on desktop */
.bp-press__logo-img {
	display: block;
	width: var(--bp-press-logo);
	height: var(--bp-press-logo-height);
	object-fit: contain;
}

/* "In the News": quote cards in up to 3 columns */
.bp-press__news {
	background-color: var(--bp-press-news);
}

.bp-press__quotes {
	max-width: var(--bp-press-quotes);
	margin-top: var(--bp-space-20);
	columns: var(--bp-press-quote-col) 3;
	column-gap: var(--bp-space-30);
}

.bp-press__quote,
.bp-press__quote:visited {
	display: inline-block;
	width: 100%;
	margin: var(--bp-space-1) 0 var(--bp-space-30);
	padding: var(--bp-space-20);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow);
	text-decoration: none;
	break-inside: avoid;
}

.bp-press__quote-text,
.bp-press__quote-source {
	display: block;
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-press__quote-source {
	font-weight: 700;
}

a.bp-press__quote:hover .bp-press__quote-source,
a.bp-press__quote:focus .bp-press__quote-source {
	color: var(--bp-accent);
}

@media (min-width: 740px) {
	.bp-press__quote-text,
	.bp-press__quote-source {
		font-size: var(--bp-fs-md);
	}
}

/* ==========================================================================
   11.4 Affiliates and Scholarship (page-templates/affiliates.php, scholarship.php)
   Sections with text beside an illustration, alternating white / light blue, like the reference.
   ========================================================================== */
.bp-landing__section {
	padding: var(--bp-space-30) 0 var(--bp-space-35);
	color: var(--bp-text);
}

.bp-landing__section--alt,
.bp-landing__media {
	background-color: var(--bp-surface);
}

@media (min-width: 850px) {
	.bp-landing__section {
		padding-bottom: var(--bp-space-30);
	}

	.bp-scholarship-page .bp-landing__section {
		padding: var(--bp-space-40) 0;
	}
}

/* Text + illustration: illustration on top on phones, side by side from 850px */
.bp-landing__row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.bp-landing__row--center {
	justify-content: center;
	gap: var(--bp-space-20);
}

.bp-landing__text {
	order: 1;
	width: 100%;
}

.bp-landing__text--contact {
	margin-bottom: var(--bp-space-40);
}

.bp-landing__image {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 100%;
	max-width: var(--bp-landing-image);
	height: var(--bp-landing-image-h);
	margin-bottom: var(--bp-space-15);
}

.bp-landing__image--small {
	height: var(--bp-landing-image-h-sm);
	margin-bottom: var(--bp-space-20);
}

.bp-landing__image--side {
	margin: 0 auto var(--bp-space-20);
}

.bp-landing__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

@media (min-width: 850px) {
	.bp-landing__row {
		flex-direction: row;
	}

	.bp-landing__row--start {
		align-items: flex-start;
	}

	.bp-landing__text {
		order: 0;
		width: auto;
	}

	.bp-landing__text--earn {
		width: var(--bp-landing-col);
	}

	.bp-landing__text--contact {
		margin-bottom: 0;
	}

	.bp-landing__image {
		max-width: var(--bp-landing-image-lg);
		height: var(--bp-landing-image-h-lg);
	}

	.bp-landing__image--small {
		max-width: var(--bp-landing-image);
		height: var(--bp-landing-image-h-sm);
		margin-bottom: 0;
	}

	.bp-landing__image--first {
		order: -1;
	}

	.bp-landing__earn .bp-landing__image--first {
		margin-left: var(--bp-space-30);
	}

	.bp-landing__image--side {
		max-width: var(--bp-landing-image);
		height: var(--bp-landing-image-h-side);
		margin: 0 auto 0 5%;
	}
}

/* Earnings band: less space above and below, like the reference */
.bp-landing__earn {
	padding: var(--bp-space-15) 0 var(--bp-space-30);
}

/* Only the row gap between the illustration and the text (phones) */
.bp-landing__earn .bp-landing__image--small {
	margin-bottom: 0;
}

/* Text block as wide as its longest line, centred in its column (the reference's text wrapper) */
.bp-landing__text--earn {
	display: grid;
	justify-content: center;
}

.bp-landing__text--earn .bp-landing__title {
	margin-bottom: var(--bp-space-15);
}

.bp-landing__text--earn .bp-landing__intro {
	max-width: none;
	margin-bottom: var(--bp-space-20);
	line-height: var(--bp-lh-base);
}

@media (min-width: 850px) {
	.bp-landing__earn {
		padding-bottom: var(--bp-space-15);
	}
}

/* Headings and text */
.bp-landing__h1,
.bp-landing__title {
	margin: 0 0 var(--bp-space-15);
	font-size: var(--bp-fs-xl);
	font-weight: 400;
	line-height: var(--bp-lh-heading);
	color: var(--bp-landing-heading);
}

.bp-landing__h1--big {
	margin-top: var(--bp-space-20);
}

.bp-landing__title {
	margin-bottom: var(--bp-space-20);
}

.bp-landing__title--tight {
	margin-bottom: var(--bp-space-10);
}

.bp-landing__title--center {
	text-align: center;
}

.bp-landing__lead,
.bp-landing__intro {
	max-width: var(--bp-landing-text);
	margin: 0 0 var(--bp-space-20);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-19);
}

.bp-landing__lead p {
	margin: 0;
}

.bp-landing__lead a,
.bp-landing__intro a,
.bp-landing__small a {
	color: var(--bp-accent);
}

.bp-landing__lead--big {
	max-width: var(--bp-landing-text-big);
	line-height: var(--bp-lh-tight);
}

.bp-landing__intro {
	max-width: var(--bp-intro-max);
	line-height: var(--bp-lh-25);
}

.bp-landing__text--contact .bp-landing__intro {
	max-width: none;
	line-height: var(--bp-lh-heading);
}

.bp-landing__small {
	margin: 0 0 var(--bp-space-20);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-list);
}

@media (min-width: 600px) {
	.bp-landing__h1,
	.bp-landing__title {
		font-size: var(--bp-fs-2xl);
	}

	.bp-landing__h1 {
		margin-bottom: var(--bp-space-30);
	}

	.bp-landing__h1--big {
		margin-bottom: var(--bp-space-10);
		font-size: var(--bp-fs-3xl);
	}

	.bp-landing__lead,
	.bp-landing__intro {
		font-size: var(--bp-fs-md);
	}

	.bp-landing__lead {
		margin-bottom: var(--bp-space-30);
		line-height: var(--bp-lh-24);
	}

	.bp-landing__lead--big {
		margin-bottom: var(--bp-space-20);
		font-size: var(--bp-fs-lg);
		line-height: var(--bp-lh-heading);
	}
}

@media (min-width: 850px) {
	.bp-landing__title {
		margin-bottom: var(--bp-space-30);
	}

	.bp-landing__title--steps {
		margin-bottom: var(--bp-space-40);
	}

	.bp-landing__title--tight {
		margin-bottom: var(--bp-space-15);
	}

	.bp-landing__intro {
		margin-bottom: var(--bp-space-30);
		line-height: var(--bp-lh-32);
	}

	.bp-landing__text--contact .bp-landing__intro {
		margin-bottom: var(--bp-space-40);
	}

	.bp-landing__small {
		font-size: var(--bp-fs-md);
	}
}

/* Buttons: orange (default), teal, with a shadow, big, card size */
.bp-page-btn,
.bp-page-btn:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--bp-landing-btn);
	padding: var(--bp-space-12) var(--bp-space-24);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-accent);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-none);
	letter-spacing: var(--bp-ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bp-white);
	transition: color 0.3s, background-color 0.3s;
}

.bp-page-btn:hover,
.bp-page-btn:focus {
	background-color: var(--bp-accent-hover);
	color: var(--bp-hover-text);
}

.bp-page-btn--teal,
.bp-page-btn--teal:visited {
	background-color: var(--bp-secondary);
}

.bp-page-btn--teal:hover,
.bp-page-btn--teal:focus {
	background-color: var(--bp-secondary-hover);
}

.bp-page-btn--shadow,
.bp-page-btn--shadow:visited {
	padding: var(--bp-space-15) var(--bp-space-25);
	box-shadow: var(--bp-shadow-row);
}

.bp-page-btn--big,
.bp-page-btn--big:visited {
	max-width: var(--bp-landing-btn-big);
}

.bp-page-btn--card,
.bp-page-btn--card:visited {
	max-width: var(--bp-landing-btn-card);
}

@media (min-width: 850px) {
	.bp-page-btn--big,
	.bp-page-btn--big:visited {
		font-size: var(--bp-fs-xl);
	}
}


/* Video / banner: 16:9 image on a light band (play button from the homepage, section 3.5) */
.bp-landing__media {
	padding: var(--bp-space-20) 0;
}

.bp-landing__video {
	position: relative;
	display: block;
	overflow: hidden;
	max-width: var(--bp-landing-video);
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	box-shadow: var(--bp-shadow);
}

.bp-landing__video.bp-app__player {
	height: auto;
	padding-bottom: 0;
}

.bp-landing__video-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 740px) {
	.bp-landing__media {
		padding: var(--bp-space-45) 0;
	}
}

/* Numbered steps: white numbered circles joined by a thin line */
.bp-numbered {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bp-numbered;
}

.bp-numbered__item {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--bp-space-8);
	padding: var(--bp-space-7) 0 var(--bp-space-15) var(--bp-space-45);
}

.bp-numbered__item::before {
	content: counter(bp-numbered);
	counter-increment: bp-numbered;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--bp-steps-circle);
	height: var(--bp-steps-circle);
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-card);
	font-size: var(--bp-fs-md);
	color: var(--bp-landing-heading);
}

.bp-numbered__item::after {
	content: "";
	position: absolute;
	top: var(--bp-steps-line-top);
	left: var(--bp-space-16);
	width: var(--bp-border-1);
	height: var(--bp-steps-line);
	background-color: var(--bp-text);
}

.bp-numbered__item:last-child::after {
	display: none;
}

.bp-numbered__title {
	margin: 0 0 var(--bp-space-10);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	color: var(--bp-landing-heading);
}

.bp-numbered__text {
	max-width: var(--bp-landing-text);
	margin: 0;
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-25);
}

.bp-numbered a {
	color: var(--bp-accent);
}

/* Scholarship steps: a little lower and narrower */
.bp-numbered-wrap .bp-numbered {
	margin-top: var(--bp-space-40);
}

.bp-numbered-wrap .bp-numbered__item {
	min-height: var(--bp-steps-min);
	max-width: var(--bp-steps-max);
}

.bp-numbered-wrap .bp-numbered__item::after {
	top: var(--bp-steps-line-top-lg);
}

/* Bullet points (small grey dots) */
.bp-bullets {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-numbered .bp-bullets {
	gap: 0;
}

.bp-bullets__item {
	position: relative;
	max-width: var(--bp-landing-text);
	margin: 0;
	padding-left: var(--bp-space-20);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-heading);
}

.bp-numbered .bp-bullets__item {
	line-height: var(--bp-lh-25);
}

.bp-bullets__item::before {
	content: "";
	position: absolute;
	top: var(--bp-space-8);
	left: var(--bp-space-5);
	width: var(--bp-space-3);
	height: var(--bp-space-3);
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-text);
}

.bp-numbered .bp-bullets__item::before {
	top: var(--bp-space-12);
}

@media (min-width: 600px) {
	.bp-numbered__title {
		font-size: var(--bp-fs-md);
	}

	.bp-numbered__text,
	.bp-numbered .bp-bullets__item {
		font-size: var(--bp-fs-md);
		line-height: var(--bp-lh-32);
	}

	.bp-numbered .bp-bullets__item::before {
		top: var(--bp-space-15);
	}

	.bp-bullets__item {
		font-size: var(--bp-fs-base);
	}
}

/* Ticks and crosses drawn with CSS (white bars on a coloured square) */
.bp-tick,
.bp-cross {
	position: absolute;
	display: inline-block;
	width: var(--bp-check);
	height: var(--bp-check);
	border-radius: var(--bp-radius-xs);
}

.bp-tick::before,
.bp-tick::after,
.bp-cross::before,
.bp-cross::after {
	content: "";
	position: absolute;
	width: var(--bp-border-2);
	background-color: var(--bp-white);
}

.bp-tick::before {
	top: var(--bp-space-4);
	right: var(--bp-space-6);
	height: var(--bp-space-11);
	transform: rotate(45deg);
}

.bp-tick::after {
	top: var(--bp-space-8);
	left: var(--bp-space-5);
	height: var(--bp-space-6);
	transform: rotate(315deg);
}

.bp-tick--green {
	top: var(--bp-space-18);
	left: var(--bp-space-18);
	background-color: var(--bp-tick-green);
}

.bp-tick--teal {
	position: relative;
	flex-shrink: 0;
	margin: var(--bp-space-5) var(--bp-space-12) 0 0;
	background-color: var(--bp-secondary);
}

.bp-cross {
	left: 0;
	background-color: var(--bp-cross-red);
}

.bp-cross::before,
.bp-cross::after {
	top: var(--bp-space-2);
	height: var(--bp-space-14);
}

.bp-cross::before {
	left: var(--bp-space-8);
	transform: rotate(45deg);
}

.bp-cross::after {
	right: var(--bp-space-8);
	transform: rotate(315deg);
}

/* Affiliates: who can join (cards with a green tick) and who cannot (box with red crosses) */
.bp-who {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--bp-space-30);
}

.bp-who__approved {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-who__card {
	position: relative;
	margin-bottom: var(--bp-space-10);
	padding: var(--bp-space-15) var(--bp-space-15) var(--bp-space-10) var(--bp-space-55);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
}

.bp-who__card-title,
.bp-who__refused-title {
	display: inline-block;
	margin: 0 0 var(--bp-space-10);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	color: var(--bp-text);
}

.bp-who__card-text {
	margin: 0 0 var(--bp-space-10);
	font-size: var(--bp-fs-sm);
}

.bp-who__refused {
	align-self: flex-start;
	margin-bottom: var(--bp-space-10);
	padding: var(--bp-space-30);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
}

.bp-who__refused-title {
	margin-bottom: var(--bp-space-25);
	font-size: var(--bp-fs-md);
}

.bp-who__refused-list {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-who__refused-item {
	position: relative;
	padding-left: var(--bp-space-25);
}

@media (min-width: 600px) {
	.bp-who__card-title {
		font-size: var(--bp-fs-md);
	}

	.bp-who__card-text {
		font-size: var(--bp-fs-base);
	}
}

@media (min-width: 850px) {
	.bp-who {
		flex-direction: row;
	}

	.bp-who__approved {
		flex-basis: var(--bp-who-approved);
	}

	.bp-who__refused {
		flex-basis: var(--bp-who-refused);
	}
}

/* Scholarship: requirements with teal ticks */
.bp-checks {
	max-width: var(--bp-checks-max);
}

.bp-checks__list {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-10);
	margin: var(--bp-space-30) 0 0;
	padding: 0;
	list-style: none;
}

.bp-checks__item {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--bp-space-5);
}

.bp-checks__text {
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-list);
}

@media (min-width: 600px) {
	.bp-checks__text {
		font-size: var(--bp-fs-md);
	}
}

@media (min-width: 850px) {
	.bp-checks {
		margin-left: var(--bp-space-30);
	}
}

/* Cards: illustration, title, text (Affiliates "promote" cards, Scholarship "more opportunities") */
.bp-cards {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--bp-space-20);
	margin: 0 0 var(--bp-space-50);
	padding: 0;
	list-style: none;
}

.bp-cards--more {
	margin-top: var(--bp-space-40);
}

.bp-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--bp-space-8);
	width: 100%;
	max-width: var(--bp-card-max);
	padding: var(--bp-space-30) var(--bp-space-20);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
	text-align: center;
}

.bp-cards--more .bp-card {
	justify-content: flex-start;
}

.bp-card__image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--bp-card-image-w);
	height: var(--bp-card-image-h);
}

.bp-cards--more .bp-card__image {
	max-width: none;
}

.bp-card__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.bp-card__title {
	margin: 0;
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-base);
	font-weight: 700;
	line-height: var(--bp-lh-heading);
	color: var(--bp-landing-heading);
}

.bp-card__text {
	margin: 0;
}

.bp-cards--more .bp-card__text {
	max-width: var(--bp-card-text);
	margin-bottom: var(--bp-space-10);
}

.bp-card__text a {
	color: var(--bp-accent);
}

.bp-card__text a:hover,
.bp-card__text a:focus {
	color: var(--bp-accent-text-hover);
}

@media (min-width: 600px) {
	.bp-card__title {
		font-size: var(--bp-fs-md);
	}
}

@media (min-width: 850px) {
	.bp-cards {
		flex-direction: row;
		align-items: stretch;
		gap: var(--bp-space-10);
	}

	/* Fewer than 3 cards: keep them together in the middle */
	.bp-cards:not(:has(> :nth-child(3))) {
		justify-content: center;
		gap: var(--bp-space-30);
	}

	.bp-card {
		flex-basis: var(--bp-card-basis);
	}
}

/* Scholarship: Yes / No question (the answer shows with CSS, no JavaScript) */
.bp-eligible {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--bp-space-10);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The question (legend) sits above the flex row of answers; padding, as legends ignore margins */
.bp-eligible__question {
	display: block;
	width: 100%;
	max-width: var(--bp-landing-text-big);
	margin: 0;
	padding: 0 0 var(--bp-space-30);
}

.bp-eligible__input {
	position: absolute;
	width: var(--bp-space-1);
	height: var(--bp-space-1);
	opacity: 0;
}

.bp-eligible__label {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--bp-space-10);
	color: var(--bp-black);
	cursor: pointer;
}

.bp-eligible__radio {
	position: relative;
	display: block;
	width: var(--bp-check);
	height: var(--bp-check);
	margin-right: var(--bp-space-8);
	border: var(--bp-border-1) solid var(--bp-text);
	border-radius: var(--bp-radius-round);
	transition: background-color 0.4s;
}

.bp-eligible__label:hover .bp-eligible__radio {
	background-color: var(--bp-radio-hover);
}

.bp-eligible__radio::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: var(--bp-check-dot);
	height: var(--bp-check-dot);
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-accent);
	transform: translate(-50%, -50%);
}

.bp-eligible__input:checked + .bp-eligible__label .bp-eligible__radio::before {
	display: block;
}

.bp-eligible__input:focus-visible + .bp-eligible__label .bp-eligible__radio {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-eligible__answer {
	display: none;
	flex-basis: 100%;
	margin: var(--bp-space-10) 0 0;
	line-height: var(--bp-lh-list);
}

.bp-eligible__answer a {
	color: var(--bp-accent);
}

#bp-eligible-yes:checked ~ .bp-eligible__answer--yes,
#bp-eligible-no:checked ~ .bp-eligible__answer--no {
	display: block;
}

@media (min-width: 740px) {
	.bp-eligible__label {
		font-size: var(--bp-fs-base);
	}
}

/* Scholarship: questions in white boxes that open and close (<details>) */
.bp-boxes__item {
	width: 100%;
	margin-bottom: var(--bp-space-20);
	border-radius: var(--bp-radius-xs);
	background-color: var(--bp-white);
	box-shadow: var(--bp-shadow-row);
}

.bp-boxes__question {
	position: relative;
	padding: var(--bp-space-25) var(--bp-space-50) var(--bp-space-25) var(--bp-space-25);
	font-family: var(--bp-font-heading);
	font-size: var(--bp-fs-lg);
	line-height: var(--bp-lh-heading);
	color: var(--bp-black);
	list-style: none;
	cursor: pointer;
}

.bp-boxes__question::-webkit-details-marker {
	display: none;
}

/* Arrow on the right (CSS borders), turns upside down while open */
.bp-boxes__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--bp-space-25);
	width: var(--bp-space-10);
	height: var(--bp-space-10);
	border-right: var(--bp-border-2) solid currentColor;
	border-bottom: var(--bp-border-2) solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.4s;
}

.bp-boxes__item[open] .bp-boxes__question::after {
	transform: translateY(-25%) rotate(225deg);
}

.bp-boxes__question:focus-visible {
	outline: var(--bp-focus-width) solid var(--bp-focus);
	outline-offset: var(--bp-space-2);
}

.bp-boxes__answer {
	margin: 0;
	padding: 0 var(--bp-space-25) var(--bp-space-25);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-relaxed);
	color: var(--bp-text);
}

.bp-boxes__answer a {
	color: var(--bp-accent);
}

@media (min-width: 850px) {
	.bp-boxes__question {
		font-size: var(--bp-fs-2xl);
	}

	.bp-boxes__answer {
		font-size: var(--bp-fs-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-boxes__question::after {
		transition: none;
	}
}

/* Scholarship: past winners on confetti, like the reference (a smaller two-group picture below 850px). Below 900px one year at a time (swipe or the
   dots under it, main.js section 3); from 900px one column per year on a line. */
.bp-winners {
	background: var(--bp-winners-confetti-mobile) center 16% / 90% auto no-repeat;
}

.bp-winners .bp-landing__title {
	margin-bottom: var(--bp-space-10);
}

.bp-winners__slider {
	padding: var(--bp-space-30) 0 var(--bp-space-5); /* no side space: this slider has no arrows */
}

.bp-winners__years {
	display: flex;
	overflow-x: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* the dots show the position */
}

.bp-winners__years::-webkit-scrollbar {
	display: none;
}

.bp-winners__slider .bp-slider__dots {
	margin-top: var(--bp-space-25);
}

.bp-winners__year {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: center;
	min-width: var(--bp-winner-min);
	text-align: center;
	color: var(--bp-black);
	scroll-snap-align: center;
}

.bp-winners__year::before {
	content: "";
	position: absolute;
	top: var(--bp-space-12);
	left: 50%;
	width: var(--bp-winner-min); /* slider: a short line centred on the year, like the reference */
	height: var(--bp-border-1);
	background-color: var(--bp-winners-line);
	transform: translateX(-50%);
}

.bp-winners__dot {
	position: relative;
	display: block;
	width: var(--bp-winner-dot);
	height: var(--bp-winner-dot);
	margin-bottom: var(--bp-space-15);
	border-radius: var(--bp-radius-round);
	background-color: var(--bp-secondary);
}

.bp-winners__year:first-child .bp-winners__dot {
	background-color: var(--bp-accent);
}

.bp-winners__year-title {
	margin: 0 0 var(--bp-space-10);
	font-family: var(--bp-font-body);
	font-size: var(--bp-fs-md);
	font-weight: 700;
	line-height: var(--bp-lh-base);
	color: var(--bp-black);
}

.bp-winners__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-winners__person {
	margin-bottom: var(--bp-space-15);
	font-size: var(--bp-fs-sm);
	line-height: var(--bp-lh-base);
}

.bp-winners__name {
	display: block;
	margin-bottom: var(--bp-space-3);
	font-weight: 700;
}

.bp-winners__school {
	display: block;
}

@media (min-width: 600px) {
	.bp-winners {
		background-size: 60% auto;
	}
}

/* The shared slider hides its dots from 740px; this one stays a slider up to 900px */
@media (min-width: 740px) {
	.bp-winners__slider .bp-slider__dots {
		display: flex;
	}
}

@media (min-width: 850px) {
	.bp-winners {
		background-image: var(--bp-winners-confetti);
		background-position: center 15%;
		background-size: 95% auto;
	}
}

@media (min-width: 900px) {
	.bp-winners__slider {
		padding-bottom: 0;
	}

	.bp-winners__slider .bp-slider__dots {
		display: none;
	}

	.bp-winners__years {
		overflow: visible;
		justify-content: space-around;
		align-items: flex-start;
	}

	.bp-winners__year {
		flex: 1 1 100%;
	}

	/* One line across all the years */
	.bp-winners__year::before {
		left: 0;
		width: 100%;
		transform: none;
	}
}

@media (min-width: 1100px) {
	.bp-winners {
		background-position: center -7%;
		background-size: min(95%, var(--bp-winners-confetti-max)) auto;
	}
}