.elementor-149727 .elementor-element.elementor-element-ac10735{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-fd513aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-149727 .elementor-element.elementor-element-37831ef{--display:flex;--min-height:38px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#EAE8E4;--border-color:#EAE8E4;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-de5fdfe .diwan-header__util-link{font-size:13px;padding-inline:14px;}.elementor-149727 .elementor-element.elementor-element-de5fdfe .diwan-header__util-link:first-of-type{padding-inline-start:0;}.elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__wishlist .diwan-header__label, .elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__item:not(.diwan-header__lang) .diwan-header__label{display:inline;}.elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__lang .diwan-header__label{display:inline;}.elementor-149727 .elementor-element.elementor-element-3955e12{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:16px;--padding-bottom:2px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-489a66b .diwan-logo--large{max-inline-size:160px;}.elementor-149727 .elementor-element.elementor-element-3aded06{--display:flex;--min-height:54px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-e5cb2ba.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-149727 .elementor-element.elementor-element-e5cb2ba .mega-menu-wrap > ul.mega-menu{justify-content:flex-start !important;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1300px){.elementor-149727 .elementor-element.elementor-element-37831ef{--gap:12px 12px;--row-gap:12px;--column-gap:12px;}.elementor-149727 .elementor-element.elementor-element-de5fdfe .diwan-header__util-link{font-size:13px;padding-inline:10px;}.elementor-149727 .elementor-element.elementor-element-de5fdfe .diwan-header__util-link:first-of-type{padding-inline-start:0;}.elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__wishlist .diwan-header__label, .elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__item:not(.diwan-header__lang) .diwan-header__label{display:inline;}.elementor-149727 .elementor-element.elementor-element-3aded06{--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-149727 .elementor-element.elementor-element-e5cb2ba .mega-menu-wrap > ul.mega-menu{justify-content:flex-start !important;}}@media(min-width:768px){.elementor-149727 .elementor-element.elementor-element-fd513aa{--content-width:1360px;}}@media(max-width:1024px){.elementor-149727 .elementor-element.elementor-element-37831ef{--min-height:52px;--justify-content:flex-end;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__wishlist .diwan-header__label, .elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__item:not(.diwan-header__lang) .diwan-header__label{display:none;}.elementor-149727 .elementor-element.elementor-element-80832d2 .diwan-header__lang .diwan-header__label{display:none;}.elementor-149727 .elementor-element.elementor-element-3955e12{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-489a66b .diwan-logo--large{max-inline-size:130px;}.elementor-149727 .elementor-element.elementor-element-3aded06{--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-149727 .elementor-element.elementor-element-6609c19 .diwan-search{inline-size:100%;}}/* Start custom CSS *//* ==================== Diwan Core · chrome.css ==================== */

/**
 * The header: its rows, the account controls and their drop-downs, the
 * search and its suggestions, the sticky header, and the header as built
 * in Elementor. The footer is in chrome-footer.css and the rules for every
 * page in chrome-site.css (3.6.0).
 */

/* ------------------------------------------------------------------ header */

.diwan-header {
	background: var(--diwan-surface, #fff);
	color: var(--diwan-text, #000);
	font-family: "Loew", "Loew Font Family", "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
	position: relative;
	/*
	 * The site's layers, low to high (reviewed October 2026, after the branch
	 * map rose over the stuck header): the page's own content from 0 to 10,
	 * with anything that brings its own layers (the map) shut in a layer of
	 * its own; the header at 1000 and the offer bar over it at 1001-1002; the
	 * phone basket bar, the WhatsApp button and pop-ups above that; and the
	 * header again over all of them while its phone menu is open.
	 */
	z-index: 1000;
}

.diwan-header:has(.mega-menu-toggle.mega-menu-open) {
	z-index: 10000;
}

/* Excludes the button, which carries its own colour. Without the exclusion
   this rule outranks .diwan-button and the button comes out black on black. */
.diwan-header a:not(.diwan-button) {
	color: inherit;
}

.diwan-header a {
	text-decoration: none;
}

/* --- top row --- */

.diwan-header__top {
	align-items: center;
	border-block-end: 1px solid var(--diwan-border, #eae8e4);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	/* The spacing is set on Diwan → Header & footer and written onto the page,
	   for this header and the Elementor one alike. */
	min-height: var(--diwan-hrow-top, 38px);
}

/* The top row's icons at the size of the words beside them (13px), as
   Waterstones draws its own: drawn at 18 they stood a size above the text. */
.diwan-header__top .diwan-icon {
	block-size: 17px;
	inline-size: 17px;
}

.diwan-header__utility {
	align-items: center;
	display: flex;
	gap: 0;
}

/* The vertical rule sits before every link except the first, so the row never
   ends on a stray divider however many links there are. */
.diwan-header__util-link {
	align-items: center;
	display: inline-flex;
	/* 13px, as Waterstones sets its own top row (Diwan, October 2026). */
	font-size: 13px;
	gap: 7px;
	padding-inline: 14px;
	position: relative;
	white-space: nowrap;
}

.diwan-header__utility > .diwan-header__util-link:first-of-type {
	padding-inline-start: 0;
}

.diwan-header__util-link + .diwan-header__util-link::before {
	background: var(--diwan-border-strong, #d5d5d5);
	block-size: 15px;
	content: "";
	inline-size: 1px;
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	transform: translateY(-50%);
}

/* The words and the icon, with room round them for the hover colour. The room
   is drawn back into the link's own spacing, so every word stays exactly
   where it was, the first one in line with the row, and only the colour
   reaches out round it. */
.diwan-header__util-inner {
	align-items: center;
	border-radius: var(--diwan-radius-sm, 4px);
	display: inline-flex;
	gap: 8px;
	margin-inline: -10px;
	padding: 6px 10px;
	transition: background-color 0.16s ease, color 0.16s ease;
}

/* The header's links and controls take the menu's own hover: papyrus behind,
   wood in front. "You are here" and "open" are the same colours, as the menu
   marks its current shelf. Stated with the header in front, and for buttons as
   well as links, so a theme's rules for every button (Hello Elementor paints
   them pink) cannot win here. */
.diwan-header .diwan-header__util-link:hover .diwan-header__util-inner,
.diwan-header .diwan-header__util-link:focus-visible .diwan-header__util-inner,
.diwan-header .diwan-header__util-link[aria-current="page"] .diwan-header__util-inner {
	background: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

.diwan-header .diwan-header__util-link:focus-visible {
	outline: none;
}

/* Shown only once the header sticks; kept in the DOM so nothing reflows. */
.diwan-header__mini-logo {
	display: none;
	margin-inline-end: 14px;
}

.diwan-header.is-stuck .diwan-header__mini-logo {
	display: inline-flex;
}

/* Store settings → Header and menu: the small logo always beside Store
   Locations, or never. */
.diwan-header.diwan-header--mini-always .diwan-header__mini-logo {
	display: inline-flex;
}

.diwan-header.diwan-header--mini-never .diwan-header__mini-logo {
	display: none;
}

.diwan-header__account {
	align-items: center;
	display: flex;
	gap: 4px;
}

/* The language switch: the language you are in, with a flag, and a menu under
   it. Last in the row, after the cart, and divided off from the controls
   before it because it changes the whole site rather than one thing on it. */
.diwan-header__lang {
	border-inline-start: 1px solid var(--diwan-border, #e6e6e6);
	margin-inline-start: 8px;
	padding-inline-start: 8px;
}

/* The flag, the name and the chevron are one line, and stay one line however
   little room the row has left. Every part of that is stated: a theme rule that
   turns a button into a block, or lets its contents wrap, puts the name
   underneath the flag instead of beside it. */
.diwan-header .diwan-header__lang-toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--diwan-link, #000000);
	cursor: pointer;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font: inherit;
	/* The same size as the controls beside it: "font: inherit" above would
	   take the row's 16px and stand the switch a size larger than Wishlist. */
	font-size: 13px;
	gap: 6px;
	white-space: nowrap;
}

.diwan-header__lang-toggle > * {
	flex: 0 0 auto;
}

/* Drawn, not typed: Windows has no font for the flag emoji and prints the two
   letters of the country code instead. */
.diwan-flag {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	display: block;
	flex: none;
}

/* The chevron turns over when the menu is open, so the control says which way
   it is going rather than only which way it was. */
.diwan-header__lang-toggle .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	rotate: 90deg;
	transition: rotate 0.16s ease;
	width: 14px;
	height: 14px;
}

.diwan-header__lang.is-open .diwan-header__lang-toggle .diwan-icon {
	rotate: 270deg;
}

.diwan-dropdown--lang {
	inline-size: 180px;
}

.diwan-dropdown__lang.is-current {
	font-weight: 600;
}

.diwan-header__item {
	position: relative;
}

.diwan-header__control {
	align-items: center;
	border-radius: var(--diwan-radius-sm, 4px);
	display: inline-flex;
	font-size: 13px;
	gap: 7px;
	padding: 6px 9px;
	position: relative;
}

/* The menu's hover, and the same colours while a control's panel is open. */
.diwan-header .diwan-header__control:hover,
.diwan-header .diwan-header__control:focus-visible,
.diwan-header .diwan-header__control[aria-expanded="true"],
.diwan-header .diwan-header__lang.is-open .diwan-header__lang-toggle {
	background: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
	outline: none;
}

.diwan-header .diwan-header__control:hover .diwan-icon,
.diwan-header .diwan-header__control[aria-expanded="true"] .diwan-icon,
.diwan-header .diwan-header__lang.is-open .diwan-header__lang-toggle .diwan-icon {
	color: inherit;
}

/* The account's name, the same weight as Wishlist beside it: in bold it
   read as a bigger button than the others in the row. */
.diwan-header__label--strong {
	font-weight: 400;
}

/* Wishlist and the account each as wide as their own words (Ahmad, 7 October
   2026): the one width of 5 October made both too wide. Only a reader's name
   that runs long is cut short with an ellipsis, so it cannot push the row. */
.diwan-header .diwan-header__account > .diwan-header__user .diwan-header__label {
	max-inline-size: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.diwan-header__badge {
	align-items: center;
	background: var(--diwan-blue, #246b8f);
	border-radius: 999px;
	color: var(--diwan-white, #fff);
	display: inline-flex;
	font-size: 10px;
	font-weight: 700;
	inset-block-start: 2px;
	inset-inline-start: 20px;
	justify-content: center;
	line-height: 1;
	min-inline-size: 16px;
	padding: 3px 4px;
	position: absolute;
}

.diwan-header__badge--dark {
	background: var(--diwan-accent-bg, #000);
}

/* Where the word stands beside the heart, the count sits on the heart's far
   side, against the reading direction, so it never covers the word: to the
   left of the heart in English, to the right in Arabic (Ahmad, 7 October
   2026). Narrower than a laptop the words are hidden and the count goes back
   over the heart (the responsive rules below). */
.diwan-header .diwan-header__wishlist .diwan-header__badge {
	inset-inline-start: -6px;
}

/* --- middle row --- */

.diwan-header__middle {
	align-items: center;
	display: flex;
	justify-content: center;
	padding-block: var(--diwan-logo-above, 16px) var(--diwan-logo-below, 2px);
}

/* 160 wide on a laptop (Diwan, 5 October 2026): 16 pixels less tall than the
   220 it was, the 16 given to the air above it instead. */
.diwan-logo--large {
	block-size: auto;
	max-inline-size: 160px;
}

.diwan-logo--small {
	block-size: auto;
	max-inline-size: 92px;
}

.diwan-logo--text {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.diwan-logo--text.diwan-logo--small {
	font-size: 18px;
}

/* Collapsing the middle row rather than hiding the logo keeps the height
   animation on one element, which is what the mega menu measures. */
.diwan-header.is-stuck:not(.diwan-header--no-fold) .diwan-header__middle {
	block-size: 0;
	overflow: hidden;
	padding-block: 0;
}

/* --- bottom row --- */

.diwan-header__bottom {
	align-items: center;
	display: flex;
	/* Wide enough that the last menu item never touches the search box, which
	   read as one run of text rather than two separate things. */
	gap: 48px;
	justify-content: space-between;
	/* 54, as Waterstones' menu row: the header as a whole is its 170. */
	min-height: 54px;
}

.diwan-header__nav {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* One line, spread across the whole width up to the search. Wrapping was what
   put the last item underneath the search box: there were more items than fit,
   so the row broke and the overflow landed below. Spreading them means the
   first item starts at the reading edge and the last one ends at the search,
   which is the same rule in both directions and needs no mirrored copy. */
.diwan-header__nav ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	inline-size: 100%;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The items give up their padding before the row gives up and wraps. */
.diwan-header__nav > ul > li {
	flex: 0 1 auto;
	min-inline-size: 0;
}

.diwan-search {
	align-items: center;
	background: var(--diwan-surface-sunken, #f4f3f1);
	border: 1px solid transparent;
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	/* Wider and shallower, as Waterstones' search (Diwan, October 2026): 340
	   by 35 on a laptop, giving way to the menu down to 180 at 1025. */
	box-sizing: border-box;
	inline-size: clamp(170px, calc(170px + (100vw - 1025px) * 0.382), 340px);
	/* Never wider than the room the menu leaves it: between 1251 and 1346 the
	   box ran past the page's edge, with no margin on the far side (Diwan,
	   5 October 2026). */
	max-inline-size: 100%;
	min-block-size: 35px;
	padding: 6px 12px;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.diwan-search__icon .diwan-icon {
	block-size: 16px;
	inline-size: 16px;
}

/* Where the keyboard is (WCAG 2.4.7) once the field gives up its own ring: a
   thin grey ring inside the box, dark enough to see on its ground (4.6:1), not
   the heavy black box Diwan asked to lose. A ring rather than the box's own
   edge: the Elementor header's search widget writes the edge and the ground
   itself, and its rule outweighed this one, so in 3.3.0 nothing showed at all
   (found by the 3.4.0 keyboard pass). */
html body .diwan-search:focus-within {
	box-shadow: inset 0 0 0 1px var(--diwan-text-muted, #6e6e6e);
}

.diwan-search__icon {
	color: var(--diwan-text-muted, #6e6e6e);
	display: inline-flex;
}

/* Themes and WooCommerce both style bare inputs, which put a second background
   and border inside this one and made the field look like a box in a box. */
.diwan-header .diwan-search__field,
.diwan-header .diwan-search__field:focus {
	background: none !important;
	block-size: auto;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	font-size: 14px;
	inline-size: 100%;
	margin: 0;
	min-block-size: 0;
	outline: none;
	padding: 0 !important;
}

.diwan-header .diwan-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* --------------------------------------------------------------- dropdowns */

.diwan-dropdown {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	box-shadow: var(--diwan-shadow, 0 8px 28px rgba(0, 0, 0, 0.12));
	inline-size: 240px;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	padding: 6px 0;
	position: absolute;
	z-index: 30;
}

.diwan-dropdown--wide {
	inline-size: 320px;
	padding: 10px;
}

/* flex rather than block. A block row stacked the flag above the language name
   in the language menu, and it comes after that rule in this file so it won.
   flex fills the row exactly as block did and puts anything inside it on one
   line, which is what a row of a menu should do in either case. */
.diwan-dropdown__row {
	align-items: center;
	display: flex;
	font-size: 14px;
	gap: 9px;
	padding: 8px 20px;
}

/* The menu's hover, as in the header and the menu. */
.diwan-header .diwan-dropdown__row:hover,
.diwan-header .diwan-dropdown__row:focus-visible {
	background: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
	outline: none;
}

.diwan-dropdown__row .diwan-icon {
	flex: none;
}

.diwan-dropdown__row--danger {
	color: var(--diwan-danger, #c0392b);
}

/* The way out points the way the page reads. */
html[dir="rtl"] .diwan-dropdown__row--danger .diwan-icon {
	transform: scaleX(-1);
}

.diwan-dropdown__empty {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 14px;
	margin: 8px 10px 12px;
}

.diwan-dropdown__products {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.diwan-dropdown__products a {
	align-items: center;
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	gap: 10px;
	padding: 8px 6px;
}

.diwan-dropdown__products a:hover {
	background: var(--diwan-surface-sunken, #f4f3f1);
}

.diwan-dropdown__thumb img {
	block-size: 48px;
	border-radius: 2px;
	display: block;
	inline-size: 36px;
	object-fit: cover;
}

.diwan-dropdown__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.diwan-dropdown__title {
	display: -webkit-box;
	font-size: 13px;
	line-height: 1.35;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.diwan-dropdown__price {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 12px;
}

/* -------------------------------------------------------------- responsive */

/*
 * The search's second place. The code header draws the search in the top row
 * as well as beside the menu. Since October 2026 the one beside the menu is
 * the only one shown at every width down to the phone menu: the menu keeps its
 * reading edge and the search keeps its place, and the menu's type gives way
 * instead (mega-menu.css), as Diwan asked.
 */
.diwan-header__top .diwan-search-wrap {
	display: none;
}

/* Narrower than a laptop the menu needs every pixel it can get beside the
   search: the gap between them comes in to 24, the Elementor header's own
   laptop setting. */
@media (min-width: 1025px) and (max-width: 1300px) {
	.diwan-header__bottom {
		gap: 24px;
	}
}

/*
 * Tablets and phones, from the width at which the menu becomes the phone menu:
 * one row of menu button, logo and account controls, and the search across the
 * whole width under it, as Waterstones lays out its own. The rows give their
 * pieces to one grid (display: contents) so the logo can sit beside the menu
 * button rather than in a row of its own, in the middle.
 *
 * The same grid for both headers: the code one's rows by their own classes,
 * the Elementor one's by the classes its rows are built with. The grid's start
 * is the reading edge, so the menu button is on the left in English and on the
 * right in Arabic with no mirrored copy.
 */
@media (max-width: 1024px) {
	.diwan-header > .diwan-box,
	.diwan-header .diwan-hrow--box > .e-con-inner {
		align-items: center;
		column-gap: 10px;
		display: grid !important;
		grid-template-areas:
			"menu logo account"
			"search search search";
		grid-template-columns: auto 1fr auto;
		padding-block: 8px 10px;
		row-gap: 8px;
	}

	.diwan-header .diwan-header__top,
	.diwan-header .diwan-header__middle,
	.diwan-header .diwan-header__bottom,
	.diwan-header .diwan-hrow--top,
	.diwan-header .diwan-hrow--middle,
	.diwan-header .diwan-hrow--bottom {
		display: contents !important;
	}

	/* The four utility links do not fit a phone; the menu carries them there,
	   which is what the appended mobile items in the mega menu are for. */
	.diwan-header__top .diwan-header__utility,
	.diwan-header .elementor-widget-diwan-header-links {
		display: none !important;
	}

	.diwan-header .diwan-header__nav,
	.diwan-header .elementor-widget-diwan-header-menu {
		grid-area: menu;
		min-inline-size: 0;
	}

	.diwan-header .diwan-header__logo,
	.diwan-header .elementor-widget-diwan-header-logo {
		grid-area: logo;
		justify-self: start;
	}

	.diwan-header .diwan-header__account,
	.diwan-header .elementor-widget-diwan-header-account {
		grid-area: account;
		justify-self: end;
	}

	.diwan-header .diwan-header__bottom > .diwan-search-wrap,
	.diwan-header .diwan-hrow--bottom > .elementor-widget-diwan-header-search {
		grid-area: search;
		inline-size: 100%;
	}

	.diwan-header .diwan-header__bottom > .diwan-search-wrap .diwan-search,
	.diwan-header .diwan-hrow--bottom > .elementor-widget-diwan-header-search .diwan-search {
		inline-size: 100% !important;
	}

	.diwan-header .diwan-logo--large,
	.elementor .diwan-header img.diwan-logo--large {
		max-inline-size: 130px !important;
	}

	.diwan-header__top .diwan-header__label,
	.diwan-header .elementor-widget-diwan-header-account .diwan-header__label {
		display: none !important;
	}

	.diwan-header .diwan-header__account .diwan-header__badge {
		inset-inline-start: 20px;
	}

	.diwan-header .diwan-header__lang {
		margin-inline-start: 2px;
		padding-inline-start: 4px;
	}

	.diwan-header .diwan-header__control {
		padding: 8px 7px;
	}

	.diwan-dropdown {
		inline-size: min(88vw, 320px);
	}

	/* Each panel hangs from the end of the whole row of icons rather than from
	   its own icon: hung from the wishlist or the account icon, a 320-pixel
	   panel ran past the start of a phone's screen and its words were cut off
	   (Diwan, 5 October 2026). The row ends at the page's margin, so the
	   panel does too, in both directions. */
	.diwan-header .diwan-header__account {
		position: relative;
	}

	.diwan-header .diwan-header__account > .diwan-header__item {
		position: static;
	}

	.diwan-header .diwan-header__account .diwan-dropdown {
		max-inline-size: calc(100vw - 40px);
	}
}

@media (max-width: 400px) {
	.diwan-header .diwan-logo--large,
	.elementor .diwan-header img.diwan-logo--large {
		max-inline-size: 104px !important;
	}

	.diwan-header > .diwan-box,
	.diwan-header .diwan-hrow--box > .e-con-inner {
		column-gap: 6px;
	}
}

/* ---------------------------------------------------------- sticky header */

.diwan-header.is-stuck {
	box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
	/* Under the offer bar when that is set to stay at the top: top-bar.js
	   writes its height here, and nothing once it is closed. */
	inset-block-start: var(--diwan-topbar-stick, 0px);
	inset-inline: 0;
	position: fixed;
}

/* The admin bar is fixed too and would sit on top of it. */
body.admin-bar .diwan-header.is-stuck {
	inset-block-start: calc(32px + var(--diwan-topbar-stick, 0px));
}

@media (max-width: 782px) {
	body.admin-bar .diwan-header.is-stuck {
		inset-block-start: calc(46px + var(--diwan-topbar-stick, 0px));
	}
}

/* On a phone WordPress lets its own bar scroll away with the page (it is
   absolute there, not fixed), so the stuck header goes to the very top:
   below 46 pixels of nothing, the page showed through (Diwan, 5 October
   2026). */
@media (max-width: 600px) {
	body.admin-bar .diwan-header.is-stuck {
		inset-block-start: var(--diwan-topbar-stick, 0px);
	}
}

.diwan-header-spacer {
	block-size: 0;
}

/* The middle row is what collapses. Animating its height rather than hiding
   the logo keeps the change on one element, which is the element the mega menu
   measures. */
.diwan-header__middle {
	transition: block-size 0.18s ease, padding-block 0.18s ease;
}

.diwan-header.is-stuck .diwan-header__top {
	min-height: var(--diwan-hrow-top-stuck, 48px);
}

/* ------------------------------------------------------- search suggestions */

.diwan-search-wrap {
	flex: 0 0 auto;
	position: relative;
}

.diwan-suggest {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	box-shadow: var(--diwan-shadow, 0 8px 28px rgba(0, 0, 0, 0.12));
	inline-size: 560px;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	max-block-size: min(70vh, 520px);
	overflow: hidden auto;
	position: absolute;
	z-index: 40;
}

.diwan-suggest__head {
	align-items: center;
	background: var(--diwan-surface-alt, #fafaf8);
	border-block-end: 1px solid var(--diwan-border, #e6e6e6);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 12px 16px;
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
}

.diwan-suggest__label {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.diwan-suggest__authors {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border-strong, #d5d5d5);
	border-radius: var(--diwan-radius-sm, 4px);
	font: inherit;
	font-size: 13px;
	max-inline-size: 240px;
	padding: 7px 10px;
}

.diwan-suggest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.diwan-suggest__list li + li {
	border-block-start: 1px solid var(--diwan-border-soft, #f0f0f0);
}

.diwan-suggest__list a {
	align-items: center;
	display: flex;
	gap: 14px;
	padding: 12px 16px;
	text-decoration: none;
}

.diwan-suggest__list a:hover {
	background: var(--diwan-surface-sunken, #f4f3f1);
}

.diwan-suggest__list img {
	block-size: 54px;
	flex: 0 0 auto;
	inline-size: 40px;
	object-fit: cover;
}

.diwan-suggest__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.diwan-suggest__title {
	color: var(--diwan-wood, #3b0f00);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.diwan-suggest__author {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 12px;
}

.diwan-suggest__price {
	color: var(--diwan-blue, #246b8f);
	font-size: 13px;
	font-weight: 600;
}

.diwan-suggest__empty {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 14px;
	margin: 0;
	padding: 22px 16px;
	text-align: center;
}

.diwan-suggest__foot {
	background: var(--diwan-surface, #fff);
	border-block-start: 1px solid var(--diwan-border, #e6e6e6);
	inset-block-end: 0;
	padding: 12px 16px;
	position: sticky;
}

@media (max-width: 1024px) {
	.diwan-header__bottom .diwan-search-wrap,
	.elementor-widget-diwan-header-search .diwan-search-wrap {
		flex: 1 1 auto;
	}

	.diwan-header__bottom .diwan-suggest,
	.elementor-widget-diwan-header-search .diwan-suggest {
		inline-size: 100%;
	}
}

/* ------------------------------------------------ built in Elementor */

/*
 * The Elementor header and footer take their layout from their containers'
 * own settings: rows, columns, spacing and what shows on which screen are all
 * set in the editor, for desktop, laptop (to 1300px), tablet (to 1024px) and
 * mobile. Nothing here pins them. What lives here is behaviour, which is the
 * same whoever lays the header out.
 */

/* A row marked "hide when the header sticks" folds away as it sticks. */
.diwan-header .diwan-hide-on-stick {
	transition: block-size 0.18s ease, padding-block 0.18s ease, min-block-size 0.18s ease;
}

.diwan-header.is-stuck .diwan-hide-on-stick {
	block-size: 0 !important;
	border-block-width: 0 !important;
	min-block-size: 0 !important;
	overflow: hidden !important;
	padding-block: 0 !important;
}

/* The top row tightens a little once the header sticks, as the built-in one does. */
.diwan-header.is-stuck .diwan-hrow--top {
	min-block-size: var(--diwan-hrow-top-stuck, 48px);
}

/* A logo given a smaller size for the stuck header takes it, unless the
   header is set to stay as it is (Store settings → Header and menu). */
.diwan-header.is-stuck:not(.diwan-header--no-fold) .diwan-logo-shrinks img.diwan-logo--large {
	max-inline-size: var(--diwan-logo-stuck, 120px) !important;
}

.diwan-header img.diwan-logo--large {
	transition: max-inline-size 0.18s ease;
}

.diwan-header.is-stuck.diwan-header--no-shadow {
	box-shadow: none;
}

/* Elementor's own picture rule (.elementor img) outranks the logo's width. */
.elementor .diwan-header img.diwan-logo--large {
	block-size: auto;
}

.elementor .diwan-header img.diwan-logo--small {
	block-size: auto;
	max-inline-size: 92px;
}

.elementor-widget-diwan-header-menu .diwan-header__nav {
	inline-size: 100%;
}

/* A widget marked to sit at the far end of its row, next to the one after it. */
.e-con > .elementor-widget.diwan-push-end,
.e-con > .e-con-inner > .elementor-widget.diwan-push-end {
	margin-inline-start: auto;
}

/* ------------------------------------------------ the big logo, switched off */

/* Store settings → Header and menu: the big logo hidden on computers. The row
   that holds it goes with it, so no empty band is left where it stood; a phone
   keeps it, as it is the only logo there. The small logo is then always shown
   (the settings make sure of that). */
@media (min-width: 1025px) {
	.diwan-header.diwan-header--big-desktop_hidden .diwan-header__middle,
	.diwan-header.diwan-header--big-desktop_hidden .elementor-widget-diwan-header-logo,
	.diwan-header.diwan-header--big-desktop_hidden .e-con:has(> .elementor-widget-diwan-header-logo):not(:has(.diwan-header__utility, .diwan-header__nav, .diwan-header__account)),
	.diwan-header.diwan-header--big-desktop_hidden .e-con:has(> .e-con-inner > .elementor-widget-diwan-header-logo):not(:has(.diwan-header__utility, .diwan-header__nav, .diwan-header__account)) {
		display: none !important;
	}
}

/*
 * The header's dropdowns (saved books, account, language) before the header's
 * script has run: a heavy page shows its header seconds before its scripts,
 * and a pointer on the heart in that time met a panel that would not open.
 * Until chrome.js marks the page, hovering or focusing opens it here.
 */
html:not(.diwan-dropdowns-ready) [data-diwan-dropdown]:hover [data-diwan-panel][hidden],
html:not(.diwan-dropdowns-ready) [data-diwan-dropdown]:focus-within [data-diwan-panel][hidden] {
	display: block;
}

/* ==================== Diwan Core · mega-menu.css ==================== */

/**
 * 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 .elementor-149727s, 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 .elementor-149727s,
	 * 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;
}/* End custom CSS */