/*
Theme Name: MXJ Child
Theme URI: https://www.merrychristmasjumpers.co.uk/
Description: GeneratePress child theme for Merry Christmas Jumpers. Reproduces the Pinfinity masonry layout the site ranked with, without carrying a 2016 theme forward.
Author: Infinity Online
Template: generatepress
Version: 1.0.0
*/

/*
 * The live site is a Pinterest-style masonry wall of product cards, built on
 * Isotope. CSS columns reproduce it with no JavaScript at all: the cards are
 * variable height, flow into columns, and reflow on resize. Isotope's one real
 * advantage — animated re-ordering on filter — is not used anywhere on MXJ.
 *
 * Colours are taken from the live scheme (ci-scheme-red).
 */

:root {
	--mxj-red: #c1282a;
	--mxj-ink: #333;
	--mxj-muted: #777;
	--mxj-rule: #e6e6e6;
	--mxj-bg: #fff;

	/* Live's own stack, not a new choice. Courgette is the brand face: the
	   script on the logo and the retailer button, and every h1–h3. Lato is the
	   body. Montserrat carries h4–h6. Declared here so a future change is one
	   edit rather than a grep. The files are in assets/fonts/. */
	--mxj-font-display: "Courgette", "Brush Script MT", cursive;
	--mxj-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mxj-font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Typography ───────────────────────────────────────────────────────
 * Live set `body { font: 13px Lato }` and then overrode h1–h3 to Courgette,
 * leaving h4–h6 on Montserrat. That split is the look, so it is reproduced
 * exactly rather than tidied into one family.
 *
 * 13px is too small for 2026 and was the one thing not carried over: GP's own
 * base size stands, and the ratio between the headings and the body is what
 * actually reads as MXJ.
 *
 * The cursive fallback matters. Courgette is a script, so falling back to the
 * body sans would make a heading look like a different site for the moment
 * before the webfont lands.
 */
body,
button, input, select, textarea {
	font-family: var(--mxj-font-body);
}

h1, h2, h3,
.mxj-card__title,
.site-title, .main-title {
	font-family: var(--mxj-font-display);
	font-weight: 400;
	letter-spacing: .005em;   /* Courgette's default tracking sets a touch tight */
}

h4, h5, h6 {
	font-family: var(--mxj-font-heading);
}

/* A script face carries far less of its weight in the stroke, so headings set
   in it need a little more line height than a sans would at the same size. */
h1, h2, h3 { line-height: 1.25; }

/* ── The background ───────────────────────────────────────────────────
 * The repeating festive tile is what makes the site feel like itself — white
 * cards floating on it is the whole look. Taken from live
 * (uploads/2016/01/merry-background-small-min.jpg) and shipped as a theme asset
 * so it survives a media-library rebuild.
 *
 * `fixed` matches live: the wall of cards scrolls over a still background.
 */
body {
	/* WebP first, JPEG for anything that cannot read it. At 1024px square and
	   repeating, this tile was 232KB — the single heaviest asset on every page
	   of the site, and a third of a category page's weight. The WebP is 131KB
	   for the same picture. image-set lets the browser choose; a browser
	   without WebP support simply takes the second entry. */
	background-image: url("assets/merry-background.jpg");
	background-image: -webkit-image-set(
		url("assets/merry-background.webp") type("image/webp"),
		url("assets/merry-background.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("assets/merry-background.webp") type("image/webp"),
		url("assets/merry-background.jpg") type("image/jpeg")
	);
	background-position: center top;
	background-attachment: fixed;
	background-repeat: repeat;
}

/* Content sits on white so the tile stays decorative and never fights the
   product photography. */
.site-content .content-area,
.inside-article {
	background: var(--mxj-bg);
}

.site-content .content-area {
	padding: 2rem;
	border-radius: 4px;
}

@media (max-width: 768px) {
	body { background-attachment: scroll; } /* fixed backgrounds judder on iOS */
}

/* ── Category archive head ────────────────────────────────────────────
 * Only the heading and the strapline sit above the wall. The long editorial
 * copy is a card inside it (see .mxj-card--intro): this is a site for shopping
 * by photograph, and a full-width slab of several hundred words puts every
 * jumper below the fold. Live did it this way and live was right.
 */
.mxj-archive-head {
	margin: 0 0 1.75rem;
}

/* Heading and count share a baseline where there is room and stack where
   there is not, so a long category name and the count never collide. */
.mxj-archive-head__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .75rem;
	margin-bottom: .5rem;
}

.mxj-archive-head h1 {
	font-size: 2rem;
	margin-bottom: 0;
}

/* Small and quiet on purpose: reassurance that there is plenty to look at,
   not a second headline competing with the photographs. */
.mxj-archive-count {
	margin: 0;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--mxj-muted);
	white-space: nowrap;
}

/* Deliberately not centred and not narrow: it is a lead-in of two or three
   sentences, not a body of copy, and it should read as a caption to the wall. */
.mxj-strapline {
	max-width: 54rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--mxj-muted);
}

.mxj-strapline p:last-child { margin-bottom: 0; }


/* ── Page frame ───────────────────────────────────────────────────────
 * Live runs a narrower content column so the festive tile stays visible down
 * both sides. Without that the white content area covers the background
 * entirely and the site loses the thing that makes it feel like itself.
 */
.site-content .content-area {
	/* GeneratePress's unsemantic grid sets .mobile-grid-100 { width: 100% } on
	   this element, so a side MARGIN here is added to a full-width box and the
	   page overflows the viewport by exactly twice that margin. That is what
	   put a horizontal scrollbar on phones. border-box plus a side PADDING
	   keeps the gutter inside the 100%, so it can never overflow. */
	box-sizing: border-box;
	max-width: 1180px;
	margin: 2rem auto;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ONE gutter, at one place in the cascade.
 *
 * Below the desktop width there were three nested gutters — GP's container,
 * this element's margin, and this element's padding — which together made the
 * content wider than the frame. Narrow screens get a single inset, and it is
 * padding rather than margin so the white card still reaches the full width of
 * the viewport minus that inset.
 *
 * The festive tile showing down both sides is a desktop pleasure; on a phone
 * every pixel of width belongs to the product photographs. */
@media (max-width: 1240px) {
	.site-content .content-area {
		margin: 1rem auto;
		max-width: calc(100% - 2rem);
	}
}

@media (max-width: 768px) {
	.site-content .content-area {
		margin: 0;
		max-width: 100%;
		padding: 1rem;
		border-radius: 0;
	}
}

/* Nothing should be able to push the page sideways: a long unbroken product
   title or a wide embed in imported copy would otherwise do what the gutters
   were doing. This bounds the children rather than hiding the overflow, so a
   future offender shows up as wrapped text instead of a silent scrollbar. */
.site-content .content-area img,
.site-content .content-area iframe,
.site-content .content-area table,
.site-content .content-area pre {
	max-width: 100%;
}

.mxj-card__title,
.mxj-strapline,
.mxj-intro-body {
	overflow-wrap: break-word;
}

/* ── Navigation ───────────────────────────────────────────────────────
 * Live's nav is not a red bar: it sits on the same near-white as the header,
 * with bold grey 14px Lato links and a hairline above. The current page is
 * black rather than coloured. GeneratePress's Customizer ships a solid
 * #c1282a bar, which put a heavy red band directly under a red site title and
 * made the whole top of the page shout.
 *
 * These override inline Customizer CSS, so each selector matches the
 * specificity GeneratePress emits rather than relying on load order.
 */
.main-navigation,
.main-navigation ul ul {
	background-color: #fafafa;
}

.main-navigation {
	border-top: 1px solid var(--mxj-rule);
	border-bottom: 1px solid var(--mxj-rule);
}

.main-navigation .inside-navigation {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 2rem;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: #676767;
	font-family: var(--mxj-font-body);
	font-size: 14px;
	font-weight: 700;
}

/* Hover and the open submenu parent: darken the text rather than fill the
   item, which is what live does and what keeps the bar quiet. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
	color: var(--mxj-red);
	background-color: transparent;
}

/* The page you are on, black rather than coloured — live's own treatment. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: #000;
	background-color: transparent;
}

/* Dropdowns need a background of their own: transparent over the product wall
   would make them unreadable. */
.main-navigation ul ul {
	background-color: #fff;
	border: 1px solid var(--mxj-rule);
	box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.main-navigation .main-nav ul ul li a {
	color: #676767;
	font-size: 14px;
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--mxj-red);
	background-color: #f3f3f3;
}

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: #000;
	background-color: #f3f3f3;
}

button.menu-toggle:hover,
button.menu-toggle:focus,
.main-navigation .mobile-bar-items a,
.main-navigation .mobile-bar-items a:hover,
.main-navigation .mobile-bar-items a:focus {
	color: var(--mxj-red);
	background-color: transparent;
}

/* ── Masthead ─────────────────────────────────────────────────────────
 * Live's header is one row 92px tall: a small site title at the left set in
 * 22px Courgette, the quick-links button in the middle, the search at the
 * right. GeneratePress ships a 45px title with 40px of padding all round,
 * which on this site pushed the jumpers most of a screen down and made the
 * header the loudest thing on the page. On a shopping site the photographs
 * should be the loudest thing on the page.
 */
.site-header .inside-header {
	display: flex;
	align-items: center;
	/* No `gap` here on purpose. GeneratePress's header markup has newlines
	   between the three blocks, and those whitespace text nodes are counted
	   when the gaps are distributed — the row ended up inset 24px at both ends
	   and the search stopped short of the content edge. Spacing lives on the
	   middle item instead, where no amount of whitespace can affect it. */
	/* border-box, or GeneratePress's grid-container adds the padding to the
	   1180 and the masthead ends up wider than the content beneath it. */
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 2rem;
}

.site-branding { flex: 0 0 auto; }

.main-title {
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;      /* one line; it only wraps once the row stacks */
}

/* Live's title is a lighter red than the navigation bar — the two reds sitting
   directly above each other at full strength is what made the local header
   look heavy. */
.main-title a,
.main-title a:hover,
.main-title a:focus {
	color: #e36d6d;
}

/* Live carries no tagline in the header, and on the home page ours repeated
   the line sitting directly beneath the <h1> a few pixels further down. It is
   still in the markup for anything reading the page structure — screen
   readers, search engines — just not drawn. */
.site-description {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.site-header .inside-header {
		flex-direction: column;
		gap: .75rem;   /* stacked, so the whitespace nodes no longer matter */
		padding: 1rem;
		text-align: center;
	}

	.main-title { white-space: normal; }
	.mxj-header-search { width: 100%; margin-left: 0; }
	.mxj-header-search input[type="search"] { width: auto; flex: 1 1 auto; }
}

/* The right-hand third of the masthead row. The auto margin pins it to the
   content edge: left to the flex distribution alone it stopped a gap short. */
.mxj-header-search {
	flex: 0 0 auto;
	margin-left: auto;
}

.mxj-header-search form {
	display: flex;
	align-items: stretch;
}

.mxj-header-search input[type="search"] {
	width: 11rem;
	font-size: .875rem;
	padding: .4rem .6rem;
	border: 1px solid var(--mxj-rule);
	border-right: 0;
	border-radius: 3px 0 0 3px;
	background: #fafafa;
}

.mxj-header-search button {
	font-family: var(--mxj-font-display);
	font-size: .95rem;
	color: #fff;
	background: var(--mxj-red);
	border: 0;
	border-radius: 0 3px 3px 0;
	padding: 0 .8rem;
	cursor: pointer;
}

.mxj-header-search button:hover,
.mxj-header-search button:focus-visible { background: #751b1e; }

/* ── Retailer quick links ─────────────────────────────────────────────
 * The red button under the masthead and the panel it opens. Live set the
 * button in Courgette, which is what makes it read as part of the brand rather
 * than as an advert, so that is kept.
 */
/* Takes the rest of the masthead row and sits at the far right of it, so the
   row reads title-then-action rather than having the button floating in the
   middle competing with the name of the site. */
/* The middle of the three masthead parts — title left, this centred, search
   right — which is how live frames it. */
.mxj-quicklinks {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 1.5rem;
	text-align: center;
}

.mxj-quicklinks__open {
	font-family: var(--mxj-font-display);
	font-size: 20px;          /* live's own size */
	line-height: 1.3;
	color: #fff;
	background: var(--mxj-red);
	border: 0;
	border-bottom: 3px solid #751b1e;   /* live's own button treatment */
	border-radius: 4px;
	padding: .7rem 1.4rem;
	cursor: pointer;
}

.mxj-quicklinks__open:hover,
.mxj-quicklinks__open:focus-visible {
	background: #751b1e;
}

.mxj-quicklinks__panel {
	width: min(960px, calc(100vw - 2rem));
	box-sizing: border-box;
	padding: 1.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--mxj-bg);
	color: var(--mxj-ink);
}

.mxj-quicklinks__panel::backdrop {
	background: rgba(0, 0, 0, .45);
}

.mxj-quicklinks__closeform {
	float: right;
	margin: -.5rem -.5rem 0 0;
}

.mxj-quicklinks__close {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--mxj-muted);
	background: none;
	border: 0;
	cursor: pointer;
	padding: .25rem .5rem;
}

.mxj-quicklinks__close:hover { color: var(--mxj-red); }

.mxj-quicklinks__intro {
	font-family: var(--mxj-font-display);
	font-size: 1.15rem;
	color: var(--mxj-red);
	margin: 0 0 1.25rem;
	max-width: 42rem;
}

/* auto-fit rather than a fixed count: live floated these at 14% and had to
   re-declare the width at four breakpoints, with :nth-child clears to stop
   the rows snagging. One grid line does the same job at every width. */
.mxj-quicklinks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mxj-quicklinks__item {
	text-align: center;
	font-size: .875rem;
	line-height: 1.5;
}

.mxj-quicklinks__logo { display: block; margin-bottom: .6rem; }

.mxj-quicklinks__logo img {
	width: 100%;
	height: auto;
	border: 1px solid var(--mxj-rule);
	border-radius: 3px;
}

.mxj-quicklinks__name {
	font-family: var(--mxj-font-display);
	font-size: 1.05rem;
	margin: 0 0 .35rem;
}

.mxj-quicklinks__name a { color: var(--mxj-red); text-decoration: none; }
.mxj-quicklinks__name a:hover { text-decoration: underline; }

.mxj-quicklinks__text { margin: 0 0 .5rem; color: var(--mxj-muted); }

.mxj-quicklinks__cta { margin: 0; }
.mxj-quicklinks__cta a { color: var(--mxj-red); }

@media (max-width: 768px) {
	.mxj-quicklinks { width: 100%; padding: 0; }
	.mxj-quicklinks__open { font-size: 1rem; padding: .6rem 1rem; }

	/* Six retailers do not fit a phone screen, so the panel scrolls. Without
	   the explicit overflow it simply clipped at two and a half of them with
	   nothing to say there was more. */
	.mxj-quicklinks__panel {
		padding: 1rem;
		max-height: 85vh;
		overflow-y: auto;
	}

	/* Two across rather than one: the logos are wordmarks and stay legible
	   small, and it halves how far anyone has to scroll to see all six. */
	.mxj-quicklinks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.mxj-quicklinks__intro { font-size: 1rem; margin-bottom: 1rem; }
	.mxj-quicklinks__item { font-size: .8125rem; }
	.mxj-quicklinks__name { font-size: .95rem; }
}

/* ── Footer ───────────────────────────────────────────────────────────
 * GeneratePress puts the footer on its own 1200px grid-container while the
 * content card above it is capped at 1180px with its own page gutters, so the
 * two never lined up — the footer text sat a little wider than, and to the
 * left of, everything above it. Give it the same box as the content and they
 * agree at every width.
 *
 * It also sat directly on the festive tile, which made it read as a stray line
 * of text rather than part of the page. It is now the same white card as the
 * content, closing the page off properly.
 */
.site-info {
	background: transparent;
	padding: 0;
}

.site-info .inside-site-info {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto 2rem;
	padding: 1.25rem 2rem;
	background: var(--mxj-bg);
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* The same single-gutter rules the content card uses, for the same reason:
   below the desktop width a side margin on a full-width box overflows. */
@media (max-width: 1240px) {
	.site-info .inside-site-info {
		margin: 0 auto 1rem;
		max-width: calc(100% - 2rem);
	}
}

@media (max-width: 768px) {
	.site-info .inside-site-info {
		margin: 0;
		max-width: 100%;
		padding: 1.25rem 1rem;
		border-radius: 0;
	}
}

.mxj-footer-text {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--mxj-muted);
	text-align: center;
}

.mxj-footer-text a {
	color: var(--mxj-red);
}

/* ── Category browse strip ────────────────────────────────────────────
 * The site is presented by category; this is the way in from the home page.
 */
.mxj-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2rem;
}

.mxj-cats a {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	padding: .45rem .8rem;
	background: #f5f5f5;
	border: 1px solid var(--mxj-rule);
	border-radius: 3px;
	color: var(--mxj-ink);
	text-decoration: none;
	font-size: .9rem;
}

.mxj-cats a:hover { background: var(--mxj-red); border-color: var(--mxj-red); color: #fff; }
.mxj-cats a:hover span { color: #fff; }
.mxj-cats span { color: var(--mxj-muted); font-size: .8em; }

/* ── The masonry wall ─────────────────────────────────────────────── */

.mxj-grid {
	columns: 4 260px;
	column-gap: 1.25rem;
}

.mxj-card {
	break-inside: avoid;          /* never split a card across columns */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;        /* Safari needs this to honour the above */
	width: 100%;
	margin-bottom: 1.25rem;
	background: var(--mxj-bg);
	border: 1px solid var(--mxj-rule);
	border-radius: 3px;
	overflow: hidden;
}

.mxj-card img {
	display: block;
	width: 100%;
	height: auto;
}

.mxj-card__body {
	padding: .85rem 1rem 1rem;
}

.mxj-card__title {
	margin: 0 0 .35rem;
	font-size: 1rem;
	line-height: 1.35;
}

.mxj-card__title a {
	color: var(--mxj-ink);
	text-decoration: none;
}

.mxj-card__title a:hover {
	color: var(--mxj-red);
}

.mxj-card__desc {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--mxj-muted);
}

/* ── Search results ───────────────────────────────────────────────────
 * The results wall is the archive wall; only these extras are new.
 */
.mxj-search-again {
	margin-top: 1rem;
}

.mxj-search-again form {
	display: flex;
	max-width: 28rem;
}

.mxj-search-again input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1rem;
	padding: .55rem .75rem;
	border: 1px solid var(--mxj-rule);
	border-right: 0;
	border-radius: 3px 0 0 3px;
	background: #fafafa;
}

.mxj-search-again button {
	font-family: var(--mxj-font-display);
	font-size: 1rem;
	color: #fff;
	background: var(--mxj-red);
	border: 0;
	border-radius: 0 3px 3px 0;
	padding: 0 1.1rem;
	cursor: pointer;
}

.mxj-search-again button:hover,
.mxj-search-again button:focus-visible { background: #751b1e; }

/* An article in among the jumpers, marked so it cannot be mistaken for one. */
.mxj-card--article {
	background: #fffdf8;
	border-color: #e3d9c4;
}

.mxj-card__kicker {
	margin: 0 0 .3rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mxj-red);
}

.mxj-no-results {
	max-width: 44rem;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

/* ── The intro card ──────────────────────────────────────────────────
 * The category's editorial copy, in the wall, as one column — the same shape
 * live used for the post it pinned to the top of the archive. It reads as part
 * of the collection rather than as a wall of text in front of it.
 *
 * CSS multi-column cannot make a single item span two of its columns: the only
 * spanning value is `column-span: all`, which is full width and is the thing
 * being fixed. So on wider screens the card is given its own two-column text
 * flow instead — the copy reads two-up inside one card of the wall, which is
 * the 2-column look without abandoning the no-JavaScript masonry.
 */
.mxj-card--intro {
	background: #fffdf8;
	border-color: #e3d9c4;
}

.mxj-card--intro .mxj-card__body {
	padding: 1rem 1.15rem 1.15rem;
	font-size: .9rem;
	line-height: 1.6;
}

.mxj-card--intro .mxj-intro-body > :first-child { margin-top: 0; }
.mxj-card--intro .mxj-intro-body > :last-child { margin-bottom: 0; }

.mxj-card--intro .mxj-intro-body p { margin-bottom: .8em; }

/* Long copy in a 260px column runs very tall. Above 1100px there is room to
   set it two-up within the card, which roughly halves its height and keeps the
   top of the wall shoppable. */
@media (min-width: 1100px) {
	.mxj-card--intro .mxj-intro-body {
		columns: 2 150px;
		column-gap: 1.1rem;
	}
	.mxj-card--intro .mxj-intro-body p { break-inside: avoid-column; }
}

/* ── Product page ─────────────────────────────────────────────────── */

.mxj-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 768px) {
	.mxj-product { grid-template-columns: 1fr; gap: 1.5rem; }
	.mxj-grid { columns: 2 150px; column-gap: .75rem; }
	.mxj-card { margin-bottom: .75rem; }
}

.mxj-product__image img {
	width: 100%;
	height: auto;
	border: 1px solid var(--mxj-rule);
	border-radius: 3px;
}

.mxj-product__desc {
	font-size: 1.05rem;
	line-height: 1.6;
}

/* The outbound button. Deliberately a plain link to the retailer: these are
   monetised by Skimlinks at click time, so it must not be rewritten to an
   internal /go/ URL. */
.mxj-buy {
	display: inline-block;
	margin: 1.25rem 0;
	padding: .8rem 1.4rem;
	background: var(--mxj-red);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 3px;
}

.mxj-buy:hover { background: #a42123; color: #fff; }

/* ── Facets ───────────────────────────────────────────────────────────
 * The other categories a product sits in. On live these are what gave Google
 * several routes into the same catalogue, so they are shown, not hidden.
 */
.mxj-facets {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mxj-rule);
	font-size: .875rem;
}

.mxj-facets a {
	display: inline-block;
	margin: 0 .4rem .4rem 0;
	padding: .25rem .6rem;
	background: #f5f5f5;
	border-radius: 2px;
	color: var(--mxj-ink);
	text-decoration: none;
}

.mxj-facets a:hover { background: var(--mxj-red); color: #fff; }

/* ── Editorial article ────────────────────────────────────────────────
 * Long-form copy needs a measure; the masonry does not. Constrain the prose
 * and let the product grid underneath run full width.
 */
.mxj-article__body {
	max-width: 46rem;
	margin: 0 auto 2.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

.mxj-article__body p { margin-bottom: 1.1em; }

.mxj-article__more {
	padding-top: 1.5rem;
	border-top: 1px solid var(--mxj-rule);
}

.mxj-article__more h2 { margin-bottom: 1rem; }

/* ── Collapsible intro on mobile ──────────────────────────────────────
 * The category copy is why these pages rank, so it opens expanded. But on a
 * phone it can run several hundred words and push the jumpers below the fold,
 * and most people arriving from search want the products. One tap closes it.
 *
 * Native <details>: no JavaScript, keyboard and screen-reader friendly.
 */
.mxj-intro-toggle > summary {
	cursor: pointer;
	list-style: none;
	display: block;
	padding: .55rem .9rem;
	margin-bottom: .75rem;
	background: #f5f5f5;
	border: 1px solid var(--mxj-rule);
	border-radius: 3px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--mxj-red);
}

.mxj-intro-toggle > summary::-webkit-details-marker { display: none; }
.mxj-intro-toggle > summary::after { content: " ▾"; }
.mxj-intro-toggle[open] > summary::after { content: " ▴"; }

/* Show whichever label matches the current state. */
.mxj-intro-toggle > summary .mxj-intro-toggle__hide,
.mxj-intro-toggle:not([open]) > summary .mxj-intro-toggle__show { display: inline; }
.mxj-intro-toggle > summary .mxj-intro-toggle__show,
.mxj-intro-toggle[open] > summary .mxj-intro-toggle__show { display: none; }
.mxj-intro-toggle:not([open]) > summary .mxj-intro-toggle__hide { display: none; }

/* Desktop has room for the copy and the wall at once, so there is nothing to
   collapse: hide the control and keep the copy open regardless of state. */
@media (min-width: 769px) {
	.mxj-intro-toggle > summary { display: none; }
	.mxj-intro-toggle > .mxj-intro-body { display: block !important; }
}

/* ── Countdown ────────────────────────────────────────────────────────
 * The House Kit component is designed full-bleed; inside the content card it
 * needs reining in so it reads as part of the page rather than an advert.
 */
.mxj-countdown {
	margin: 0 0 2rem;
	border-radius: 4px;
	overflow: hidden;
}

.mxj-countdown .hk-section,
.mxj-countdown section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* The component is built to go full-bleed: `width: 100vw` with a horizontal
   padding of `max(1.5rem, calc(50vw - 590px))`, content-box. Dropped inside our
   content card that resolves to the full viewport width PLUS its own padding,
   so on a 390px phone it came out 438px and the title and the seconds tile were
   cut off. Bound it to its container instead; `overflow: hidden` on the wrapper
   was hiding the scrollbar, not the problem. */
.mxj-countdown .cs-countdown,
.mxj-countdown .hk-section,
.mxj-countdown section {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.mxj-countdown .cs-countdown__inner,
.mxj-countdown .cs-countdown__grid {
	box-sizing: border-box;
	max-width: 100%;
}

/* ── Pagination and the "View more" CTA ───────────────────────────────
 * Still pagination: the CTA is the next-page <a> itself, with the real
 * /page/N/ href, which is why it is styled as a button rather than being one.
 * The numbered links stay below it — present in the markup for crawlers and
 * for anyone who wants to jump, but quiet enough that the CTA is plainly the
 * control. See taxonomy-product_category.php for the reasoning.
 */
.mxj-pagination {
	margin: 1.5rem 0 0;
	text-align: center;
}

/* An appended batch is its own .mxj-grid so that the cards already on screen
   cannot be re-balanced into different columns. Its cards carry the usual
   bottom margin, so no top margin is wanted here or the seam becomes visible. */
.mxj-grid--more {
	margin-top: 0;
}

.mxj-grid--more .mxj-card:focus {
	outline: 2px solid #9e1b32;
	outline-offset: 3px;
}

.mxj-viewmore {
	display: inline-block;
	padding: .9rem 2.25rem;
	border-radius: 4px;
	background: #9e1b32;
	color: #fff;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background .15s ease;
}

.mxj-viewmore:hover,
.mxj-viewmore:focus {
	background: #7d1527;
	color: #fff;
}

.mxj-viewmore:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

/* Loading state. The label text changes too, so this is only the visual cue —
   and the cursor matters more than it looks, because the control stays a link
   and would otherwise invite a second press. */
.mxj-viewmore[aria-busy="true"] {
	background: #b4697a;
	cursor: progress;
}

.mxj-pagination__status {
	margin: 0 0 .75rem;
	color: #5a5147;
	font-size: .9375rem;
	min-height: 1.25rem;   /* reserved, so filling it in shifts nothing */
}

/* The numbered links: smaller, muted, and below the CTA. */
.mxj-pagination__pages {
	margin-top: 1.25rem;
	font-size: .875rem;
}

.mxj-pagination__legend {
	display: block;
	margin-bottom: .4rem;
	color: #6d655b;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mxj-pagination__pages .page-numbers {
	display: inline-flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mxj-pagination__pages .page-numbers li {
	margin: 0;
}

.mxj-pagination__pages a.page-numbers,
.mxj-pagination__pages span.page-numbers {
	display: inline-block;
	padding: .25rem .55rem;
	border-radius: 3px;
	color: #6d655b;
	text-decoration: none;
}

.mxj-pagination__pages a.page-numbers:hover,
.mxj-pagination__pages a.page-numbers:focus {
	background: #f3ece1;
	color: #9e1b32;
}

.mxj-pagination__pages .page-numbers.current {
	background: #ebe2d4;
	color: #3a342e;
	font-weight: 600;
}