/**
 * Mega menu styling, taken from the staging build.
 *
 * Max Mega Menu's own theme on staging is close to stock; this is where the
 * look actually comes from. What is here is the styling only. The promotional
 * banners that staging injects into the panels are not: those get their own
 * plugin with a proper editing screen, so only the rules describing how such a
 * banner would look are kept, ready for whatever ends up printing it.
 *
 * The per-slug column-break rules staging generates are also left out. They
 * pin a column break to a named category ("break before Humour", "break before
 * Stickers") and are tuned to that exact tree, so they would land in the wrong
 * places here. The mechanism is kept: every item carries a data-diwan-slug
 * attribute, so a rule can be added per branch once the design is settled.
 *
 * Breakpoint note: 1024px is Max Mega Menu's responsive breakpoint here, so the
 * desktop rules start at 1025px and the mobile block ends at 1024px. Staging
 * switches at 1300px; between 1025 and 1300 this site keeps the menu and moves
 * the search up a row instead. Changing one number without the other leaves a
 * gap where neither applies, and the header's stylesheet uses the same two.
 */

@media screen and (min-width: 1025px) {

	/*
	 * The top level runs along one row from the reading edge, each item taking the
	 * width it needs and carrying its own divider. Whatever is left over at the far
	 * end stays empty, which is better than stretching eight items across 1360
	 * pixels and leaving holes between them.
	 *
	 * Max Mega Menu writes its own rules behind two ID selectors, so nothing short
	 * of !important reaches them; that is why these few carry it. The list used to
	 * wrap, which is what put the last item underneath the search rather than
	 * beside it.
	 */
	.diwan-header .mega-menu-wrap > ul.mega-menu {
		display: flex !important;
		/* row, not row-reverse. Max Mega Menu sets row-reverse for Arabic, on a row
		   that is already running right to left because the document is. The two
		   reversals cancel and the menu came out starting from the left. Direction
		   alone puts the first item at the reading edge in both languages. */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		inline-size: 100% !important;
	}

	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item {
		flex: 0 1 auto !important;
	}

	/* The first item keeps its padding like the rest. It used to sit flush with
	   the reading edge, and its hover colour then stopped hard against its first
	   letter (Diwan, September 2026). */


	.mega-menu-wrap > ul.mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
		position: fixed !important;
		/*
		 * Anchored to the header rather than left at its static position.
		 *
		 * A fixed panel with top:auto keeps whatever offset it had when it
		 * opened, so once the header became sticky the two drifted apart on
		 * scroll and the panel hung in mid-air. The variable is written by the
		 * header script and shrinks with the header when the logo collapses.
		 */
		top: var(--diwan-bar-bottom, var(--diwan-header-h, 265px)) !important;
		left: 0 !important;
		right: 0 !important;
		width: 92vw !important;
		max-width: 92vw !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
		background: var(--diwan-surface, #fff) !important;
		border-top: 1px solid var(--diwan-border, #ececec) !important;
		box-shadow: var(--diwan-shadow, 0 10px 26px rgba(0, 0, 0, 0.09)) !important;
		padding-top: 0 !important;
		padding-bottom: 22px !important;
	}

	/* How a promotional banner looks, for whatever prints one. */
	.mega-promo-banner {
		background-color: var(--diwan-promo-bg, #000);
		color: var(--diwan-promo-text, #fff);
		padding: 9px 24px;
		text-align: center;
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: 0.02em;
		box-sizing: border-box;
		border-radius: 0;
		margin-top: 0 !important;
		margin-bottom: 20px !important;
		width: auto !important;
		/*
		 * The banner spans the panel, which sits inside the <li>. Hovering it
		 * would keep the neighbouring top level items lit, because the banner
		 * overlaps them. It carries no link, so nothing is lost by taking it
		 * out of hit testing.
		 */
		pointer-events: none;
	}

	/*
	 * A menu offer with a link (Menu_Offers): only its words take the
	 * pointer, so the strip still lets the neighbouring items be.
	 */
	.mega-promo-banner .diwan-menu-offer__link {
		color: inherit;
		text-decoration: none;
		pointer-events: auto;
	}

	.mega-promo-banner .diwan-menu-offer__link:hover,
	.mega-promo-banner .diwan-menu-offer__link:focus-visible {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		left: auto !important;
	}

	.mega-menu-wrap {
		clear: both;
	}

	.mega-menu-wrap > ul.mega-menu.mega-menu-horizontal {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item {
		flex: 0 0 auto;
		white-space: nowrap;
		margin-right: 9px !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item:last-of-type {
		margin-right: 0 !important;
	}

	/* 14px on a laptop, giving way a step at a time as the screen narrows and
	   never under 13 (Diwan, October 2026): the menu keeps its row and its
	   reading edge all the way down to the phone menu. */
	/* The fill an item wears on hover, or with its panel open, is the search
	   box's height, 35 (Diwan, 5 October 2026): the two read as one row. The
	   row itself stays 48 tall, so a panel still opens where it did and the
	   pointer crosses no gap on its way down into it. */
	.diwan-header .mega-menu-wrap > ul.mega-menu.mega-menu-horizontal {
		align-items: stretch !important;
		/* Max Mega Menu zeroes this from its own stylesheet, by ID. */
		min-height: 48px !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: clamp(13px, calc(13px + (100vw - 1025px) / 445), 14px) !important;
		font-weight: 700 !important;
		padding: 0 6px !important;
		height: 35px !important;
		line-height: 35px !important;
		letter-spacing: 0 !important;
		white-space: nowrap !important;
		position: relative !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator {
		margin-left: 4px !important;
		font-size: 11px !important;
	}

	li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
		height: unset !important;
	}

	/*
	 * The divider is drawn BEFORE each item except the first. Drawing it after
	 * the item and excluding :last-of-type failed: the mobile-only items,
	 * though display:none here, still count for :last-of-type, so the last
	 * visible item kept a trailing divider.
	 */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link::after,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link::before {
		content: none !important;
	}

	/*
	 * The items share out whatever the row has left (Diwan, October 2026), so
	 * the first starts at the reading edge, the last ends at the gap before the
	 * search, and the room between them is even. Each item but the last grows by
	 * the same amount, and its divider is a flex item of its own with an auto
	 * margin either side: the growth splits in two round it, which puts every
	 * divider exactly halfway between two items whatever the width.
	 */
	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item {
		align-items: center !important;
		display: flex !important;
		flex: 1 1 auto !important;
		margin: 0 !important;
	}

	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:not(.diwan-mm-extra):is(:last-of-type, :has(+ li.diwan-mm-extra)) {
		flex: 0 0 auto !important;
	}

	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:not(:last-of-type, :has(+ li.diwan-mm-extra), .diwan-mm-extra)::after {
		background-color: var(--diwan-border-strong, #d5d5d5) !important;
		content: "" !important;
		display: block !important;
		flex: 0 0 1px !important;
		height: 15px !important;
		margin-inline: auto !important;
		min-inline-size: 1px;
		pointer-events: none !important;
		width: 1px !important;
	}

	/* Never closer than this to each other, however little room is left. */
	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:not(:last-of-type, :has(+ li.diwan-mm-extra), .diwan-mm-extra) {
		padding-inline-end: 0 !important;
		column-gap: 6px;
	}

	/*
	 * Top level hover state.
	 *
	 * Max Mega Menu opens a panel by adding .mega-toggle-on with JavaScript and
	 * styles that state from its own generated stylesheet using ID selectors,
	 * which outrank anything written with classes. Two consequences:
	 *
	 * 1. Styling only :hover meant the fill appeared and vanished as the
	 *    pointer crossed sub-pixel gaps, so it looked like it only worked in
	 *    one spot. Both states are styled here.
	 * 2. The ID prefix is needed to win the specificity contest. It is the one
	 *    place in this file that uses one, because the alternative is
	 *    !important on every declaration.
	 */
	/*
	 * 3. The page you are on (or the shelf it sits under) is black with white
	 *    on it: a solid block that says where you are. Max Mega Menu's theme
	 *    paints that state itself, so it is named here too.
	 */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
		background: var(--diwan-black, #000) !important;
		color: #fff !important;
	}

	/*
	 * 4. The item under the pointer, and the one whose panel is open, wear the
	 *    buttons' own hover, Papyrus with Wood Brown on it, so the menu and
	 *    every button on the site answer the pointer the same way. Written
	 *    after the black, at the same weight, so the page you are on turns
	 *    Papyrus too while the pointer is on it, and goes back to black after.
	 */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item:hover > a.mega-menu-link,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link:focus-visible {
		background: var(--diwan-papyrus, #e0b070) !important;
		color: var(--diwan-wood, #3b0f00) !important;
	}

	/* The dividers stay on hover and on the page you are on: each sits in the
	   gap before its item, outside the fill, and hiding it made the row lose
	   a rule every time the pointer crossed it (Diwan, September 2026). */

	/* The appended Store Locations and Login items are mobile only. */
	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra {
		display: none !important;
	}

	/* No scrolling: every item visible. */
	.mega-menu-wrap ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column,
	.mega-menu-wrap li.mega-menu-row {
		max-height: none !important;
		overflow: visible !important;
		overflow-y: visible !important;
	}

	/* Panel content: second level headings. */
	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.05em !important;
		text-transform: uppercase !important;
		color: var(--diwan-text, #000) !important;
		padding: 0 0 5px !important;
		margin-bottom: 5px !important;
		line-height: 1.35 !important;
		display: block !important;
		border-bottom: 1px solid var(--diwan-border, #e6e6e6) !important;
	}

	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item-has-children > a.mega-menu-link {
		font-weight: 700 !important;
		color: var(--diwan-text, #000) !important;
		margin-bottom: 3px !important;
	}

	/* Grown to its full size over the forty pixels after the narrower
	   laptops' size ends (1300), not in one step: at 1301 the longest name,
	   "Graphic Novels, Comics & Manga", ran seven pixels past its column
	   until about 1330 (found in 3.6.0's tests). */
	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: clamp(12px, calc(12px + (100vw - 1301px) / 78), 12.5px) !important;
		font-weight: 400 !important;
		line-height: 1.4 !important;
		padding: 2px 6px !important;
		display: block !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		color: var(--diwan-text-soft, #333) !important;
		border: none !important;
		transition: background-color 0.18s ease, color 0.18s ease;
		/* One line each (Diwan, October 2026). The columns are sized from
		   their longest name (Menu_Layout::fit_spans) so the line fits. */
		white-space: nowrap !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		white-space: nowrap !important;
	}

	/* Inside a panel the same two states: the shelf you are on is black, a
	   shelf under the pointer is Papyrus, written second so it wins on both. */
	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
		background-color: var(--diwan-black, #000) !important;
		color: #fff !important;
		text-decoration: none !important;
	}

	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover {
		background-color: var(--diwan-papyrus, #e0b070) !important;
		color: var(--diwan-wood, #3b0f00) !important;
		text-decoration: none !important;
	}

	.mega-menu-wrap li.mega-menu-item-has-children > a.mega-menu-link:hover {
		background: transparent !important;
		color: var(--diwan-text, #000) !important;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.mega-menu-wrap li.mega-menu-column {
		padding: 0 12px !important;
	}

	.mega-menu-wrap li.mega-menu-column:first-child {
		padding-left: 0 !important;
	}

	.mega-menu-wrap li.mega-menu-column:last-child {
		padding-right: 0 !important;
	}

	.mega-menu-wrap li.mega-menu-item {
		margin-bottom: 0 !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item {
		margin-top: 11px !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
		margin-bottom: 0 !important;
		padding-bottom: 5px !important;
	}

	/* Wide columns split long second level lists. */
	.mega-menu-wrap li.mega-menu-columns-6-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-7-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-9-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-10-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-11-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-12-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
		column-count: 3;
		column-gap: 26px;
	}

	.mega-menu-wrap li.mega-menu-columns-4-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-columns-5-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
		column-count: 2;
		column-gap: 24px;
	}

	.mega-menu-wrap ul.mega-sub-menu:has(li.mega-menu-item-has-children) {
		column-count: 1 !important;
	}

	.mega-menu-wrap ul.mega-sub-menu > li.mega-menu-item {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}

	/*
	 * The split the menu layout asks for, group by group, over the guesses
	 * above: the existing site pours some narrow columns into two lists and
	 * keeps some wide ones whole. Max Mega Menu prefixes custom classes with
	 * "mega-" unless the location turns prefixing off, so both spellings.
	 */
	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-1 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-1 > ul.mega-sub-menu {
		column-count: 1 !important;
	}

	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-2 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-2 > ul.mega-sub-menu {
		column-count: 2 !important;
		column-gap: 24px;
	}

	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-3 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-3 > ul.mega-sub-menu {
		column-count: 3 !important;
		column-gap: 26px;
	}

	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-4 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-4 > ul.mega-sub-menu {
		column-count: 4 !important;
		column-gap: 26px;
	}

	.diwan-search-container {
		position: relative;
		z-index: 1;
		margin-left: 16px;
	}
}

/* The narrowest desktop widths: eight items and the search share 985 pixels,
   so the items give up some of their own padding and the arrow beside each
   shelf gets smaller, before the type would have to go under 13. */
@media screen and (min-width: 1025px) and (max-width: 1250px) {
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
		padding: 0 3px !important;
	}

	.diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item {
		column-gap: 3px !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator {
		margin-left: 2px !important;
		font-size: 9px !important;
		width: 8px !important;
	}
}

/* The panels on the narrower laptops: a size smaller, and less room between
   the columns, so every name still fits its one line. */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	/* The same, after the narrowest size ends (1180): 11 growing to 11.5 by
	   about 1226 rather than at 1181, where the same name ran eight pixels
	   over. */
	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: clamp(11px, calc(11px + (100vw - 1181px) / 90), 11.5px) !important;
		padding: 2px 4px !important;
	}

	.mega-menu-wrap li.mega-menu-column {
		padding: 0 8px !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 11px !important;
		letter-spacing: 0.03em !important;
	}

	/* A shelf poured into three lists gets two here: the panel is a quarter
	   narrower than on a laptop, and three lists of long names no longer fit
	   one line each. */
	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-3 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-3 > ul.mega-sub-menu {
		column-count: 2 !important;
	}
}

/* Narrower still, down to the phone menu: the panel is three quarters of a
   laptop's, so the type comes down another half size and a shelf poured into
   two or three lists runs down one list instead, rather than break a name. */
@media screen and (min-width: 1025px) and (max-width: 1180px) {
	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 11px !important;
		padding: 1px 3px !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 10.5px !important;
		letter-spacing: 0.02em !important;
	}

	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-2 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-2 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.mega-diwan-split-3 > ul.mega-sub-menu,
	.mega-menu-wrap li.mega-menu-column li.diwan-split-3 > ul.mega-sub-menu {
		column-count: 1 !important;
	}

	.mega-menu-wrap li.mega-menu-column {
		padding: 0 6px !important;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1080px) {
	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 10.5px !important;
		padding: 1px 2px !important;
	}
}

/* Narrower still, the arrows go: the shelves still open on hover and on a
   tap, and the eight names stay at 13 pixels beside a search box that has
   kept its place. */
@media screen and (min-width: 1025px) and (max-width: 1180px) {
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator {
		display: none !important;
	}
}

/* Short screens: tighten the panel so it still fits without scrolling. */
@media screen and (min-width: 1025px) and (max-height: 700px) {
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
		padding-bottom: 16px !important;
	}

	.mega-menu-wrap li.mega-menu-column ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 12px !important;
		line-height: 1.3 !important;
		padding: 1px 6px !important;
	}

	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item {
		margin-top: 8px !important;
	}

	.mega-promo-banner {
		padding: 7px 22px;
		font-size: 11.5px;
		margin-bottom: 14px !important;
	}
}

@media screen and (max-width: 1024px) {

	/*
	 * The menu button: three lines beside the logo, as Waterstones has it, in
	 * place of the black bar across the whole header. It sits at the reading
	 * edge of the header's first row (chrome.css), so it is on the left in
	 * English and on the right in Arabic; the menu slides in from that side.
	 */
	.diwan-header .mega-menu-wrap .mega-menu-toggle {
		background: transparent !important;
		block-size: 44px !important;
		border: 0 !important;
		display: flex !important;
		inline-size: 44px !important;
		line-height: 44px !important;
		padding: 0 !important;
	}

	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-blocks-left,
	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-blocks-center {
		display: none !important;
	}

	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-blocks-right,
	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-block {
		block-size: 44px !important;
		display: flex !important;
		inline-size: 44px !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.diwan-header .mega-menu-wrap .mega-menu-toggle button.mega-toggle-animated {
		align-items: center !important;
		block-size: 44px !important;
		display: flex !important;
		inline-size: 44px !important;
		justify-content: center !important;
		padding: 0 !important;
		transform: scale(0.82) !important;
	}

	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner,
	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner::before,
	.diwan-header .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner::after {
		background-color: var(--diwan-text, #000) !important;
	}

	.diwan-header .mega-menu-wrap .mega-menu-toggle button.mega-toggle-animated:focus-visible {
		outline: 2px solid var(--diwan-wood, #3b0f00) !important;
		outline-offset: -2px;
	}

	/* Arabic: the same panel, in from the right, with its close button on
	   the panel's left. Max Mega Menu compiles one direction per location,
	   and both languages draw the same location. */
	body.diwan-lang-ar .diwan-header .mega-menu-wrap .mega-menu-toggle + ul.mega-menu[data-effect-mobile="slide_right"] {
		left: auto !important;
		right: -300px !important;
	}

	body.diwan-lang-ar .diwan-header .mega-menu-wrap .mega-menu-toggle.mega-menu-open + ul.mega-menu[data-effect-mobile="slide_right"] {
		right: 0 !important;
	}

	body.diwan-lang-ar .diwan-header .mega-menu-wrap .mega-menu-toggle.mega-menu-open ~ button.mega-close {
		left: auto !important;
		right: calc(min(100vw - 40px, 300px)) !important;
	}

	body.diwan-lang-ar .diwan-header .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
		text-align: right !important;
	}

	/* And the arrow at the panel's far edge, as the English one is. */
	body.diwan-lang-ar .diwan-header .mega-menu-wrap ul.mega-menu li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
		float: left !important;
		margin-left: 0 !important;
	}

	/* Let Max Mega Menu own the layout; just tidy it up. */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
		font-size: 15px !important;
		font-weight: 600 !important;
		text-align: left !important;
		padding: 14px 18px !important;
		height: auto !important;
		line-height: 1.4 !important;
	}

	/* No dividers on mobile. */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link::before,
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link::after {
		display: none !important;
		content: none !important;
	}

	.mega-menu-wrap ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
		font-size: 14px !important;
		font-weight: 400 !important;
		text-align: left !important;
		padding: 11px 18px !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	/* Section headings keep their weight. */
	.mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		font-weight: 700 !important;
		font-size: 14px !important;
		border-bottom: none !important;
	}

	/* A promo banner is desktop clutter on a phone. */
	.mega-promo-banner {
		display: none !important;
	}

	/* Unless its menu offer asks to be shown there (Menu_Offers). */
	.mega-promo-banner.diwan-menu-offer--phone {
		display: block !important;
		margin: 0 0 6px !important;
		padding: 8px 16px;
		font-size: 13px;
		pointer-events: auto;
	}

	/* Stacked, full width, no column splitting. */
	.mega-menu-wrap li.mega-menu-column,
	.mega-menu-wrap li.mega-menu-row,
	.mega-menu-wrap ul.mega-sub-menu {
		width: 100% !important;
		max-width: 100% !important;
		column-count: 1 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}

	/* Appended items: a black block pinned to the bottom. */
	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra {
		display: block !important;
		background: var(--diwan-btn-bg, #000) !important;
		margin: 0 !important;
	}

	/*
	 * A white hairline between the two, not above the first. Translucent white
	 * rather than a palette colour: it has to dim with whatever the block
	 * behind it is, so a fixed grey would break if that changes.
	 */
	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra + li.diwan-mm-extra {
		border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
	}

	/*
	 * Both extras fill the menu width. The gap above the block comes from the
	 * last ordinary item, not from a margin on the block itself: a margin there
	 * left the first extra narrower than the second.
	 */
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item:not(.diwan-mm-extra):last-of-type {
		margin-bottom: 14px !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-stores {
		margin-top: 0 !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra > a.mega-menu-link {
		width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		gap: 11px !important;
		background: transparent !important;
		color: var(--diwan-btn-text, #fff) !important;
		font-weight: 600 !important;
		padding: 15px 18px !important;
	}

	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra > a.mega-menu-link:hover,
	.mega-menu-wrap > ul.mega-menu > li.diwan-mm-extra > a.mega-menu-link:focus {
		background: var(--diwan-surface-sunken, #1a1a1a) !important;
		color: var(--diwan-btn-text, #fff) !important;
	}

	.diwan-mm-icon {
		flex: 0 0 auto;
		display: inline-block;
		vertical-align: middle;
		color: var(--diwan-btn-text, #fff);
	}
}

/* Arabic: the menu reads right to left, so the horizontal details flip. */
body.diwan-lang-ar .mega-menu-wrap > ul.mega-menu.mega-menu-horizontal {
	flex-direction: row-reverse;
}

/* The items carry no margins of their own: the room between them is shared
   out by the row (above), the same on both sides of the language switch. */
body.diwan-lang-ar .mega-menu-wrap > ul.mega-menu > li.mega-menu-item {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/*
 * The panel's columns too: Max Mega Menu floats them left whatever the
 * direction, which would put the first column of an Arabic panel on the far
 * side from where the reader starts.
 */
@media screen and (min-width: 1025px) {
	body.diwan-lang-ar .mega-menu-wrap li.mega-menu-column {
		float: right !important;
	}

	body.diwan-lang-ar .mega-menu-wrap li.mega-menu-column:first-child {
		padding-left: 12px !important;
		padding-right: 0 !important;
	}

	body.diwan-lang-ar .mega-menu-wrap li.mega-menu-column:last-child {
		padding-left: 0 !important;
		padding-right: 12px !important;
	}

	body.diwan-lang-ar .mega-menu-wrap li.mega-menu-column:first-child:last-child {
		padding: 0 !important;
	}
}

body.diwan-lang-ar .mega-menu-wrap li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
body.diwan-lang-ar .mega-menu-wrap ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	text-align: right !important;
}