/**
 * 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;
}