/**
 * The book card, and the band of new releases it sits in.
 *
 * The card itself is an Elementor loop template, so its spacing, its type and
 * its colours are all in the builder. What is here is the part a panel control
 * cannot express: the shape of a cover, the heart pinned to it, and how many
 * lines a title is allowed before it is cut.
 */

:root {
	/* Two by three, the proportions every book site stores covers at. Stated
	   as a unitless ratio because aspect-ratio takes a ratio, not a pair of
	   lengths: 200px / 300px is not a ratio and collapses the box. */
	--diwan-book-ratio: 2 / 3;
	--diwan-book-gap: 24px;
	--diwan-book-visible: 6;
	--diwan-wish-size: 34px;

	/* How wide a book is in a band of covers: one size in every band, smaller
	   than the slide (the client's review of 1 October 2026). Its 2:3 cover
	   is 156 x 234. */
	--diwan-card-width: 156px;

	/* Pale enough to separate the band from the white above and below it
	   without reading as a coloured panel. */
	--diwan-book-band: #fafafa;
}

/* ------------------------------------------------------------------ the card */

.diwan-book-card {
	block-size: 100%;
}

/*
 * One size for every book in a band of covers: the card no wider than
 * --diwan-card-width, centred in its slide, whichever band it is in (New
 * Releases had five to a row, the others six, so their covers were 187 to
 * 230 wide). The Diwan Publishing covers take the same 2:3 shape there. On a
 * phone, two to a row, the card takes its slide again.
 */
.elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card),
.elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card {
	/* Never the whole slide: with five to a row on a narrower laptop the
	   slide is the card's width, and the covers stood spine to spine. */
	inline-size: min(var(--diwan-card-width, 156px), calc(100% - 16px)) !important;
	margin-inline: auto;
}

/* The More to explore card is a box with its words inside it, so it takes
   its slide, up to 200 (Diwan, 5 October 2026: five across, each card
   taking the room it has, where six small covers sat in a lot of card). */
.elementor-widget-loop-carousel .e-loop-item > .diwan-explore-card {
	inline-size: min(var(--diwan-explore-width, 200px), calc(100% - 16px)) !important;
}

.elementor-widget-loop-carousel .e-loop-item > .diwan-pub-card .diwan-pub-card__cover {
	--diwan-pub-ratio: 2 / 3;
}

@media (max-width: 1024px) {
	.elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card),
	.elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card {
		inline-size: min(140px, calc(100% - 16px)) !important;
	}

	/* Its slide, as on a computer: held to the 140 of a book card its cover
	   was 112 wide and READ MORE broke over two lines (Diwan, 5 October 2026). */
	.elementor-widget-loop-carousel .e-loop-item > .diwan-explore-card {
		inline-size: min(var(--diwan-explore-width, 200px), calc(100% - 16px)) !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget-loop-carousel .e-loop-item > :is(.diwan-book-card, .diwan-explore-card, .diwan-pub-card),
	.elementor-element[class*="elementor-element-dkid"] .e-loop-item > .diwan-book-card {
		inline-size: 100% !important;
	}
}

/* The currency the size of the price it belongs to. */
.woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
}

/*
 * The cover box.
 *
 * The shape is on the box rather than on the artwork, and that is the whole
 * point of it. A book whose jacket has not been uploaded yet keeps its place in
 * the row: an empty frame in a shelf of covers reads as a book waiting for its
 * picture, where a card that has collapsed to the height of its title reads as
 * a broken page.
 *
 * It is also what the heart hangs off. Pinned to the card instead, the heart
 * would drift down the page every time a title ran to two lines.
 */
.diwan-book-card__cover {
	aspect-ratio: var(--diwan-book-ratio, 2 / 3);
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	position: relative;
}

/* Rounded and clipped on every page. Until 3.6.0 the home page, the authors
   and Diwan Publishing drew it so, but the shop, the search and an author's
   page lost both to Elementor's container rule (.e-con), which their
   stylesheets happened to be read before. One step past that rule, so the
   order no longer decides. */
.diwan-book-card__cover.e-con,
.diwan-book-card__cover:not(.e-con) {
	border-radius: 4px;
	overflow: hidden;
}

/* The image widget and everything Elementor wraps it in fill the frame, so the
   artwork is measured against the box rather than against itself. */
.diwan-book-card__cover-widget,
.diwan-book-card__cover-widget > .elementor-widget-container,
.diwan-book-card__cover-widget figure,
.diwan-book-card__cover-widget a {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

/*
 * Fitted inside the frame rather than cropped to fill it. Every publisher's
 * artwork is a slightly different shape, and a cropped cover loses the author's
 * name off the bottom, which is the one thing a cover is for.
 */
.diwan-book-card__cover-widget img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: var(--diwan-fit-book, contain);
}

/*
 * The frame is the size; the picture only fills it. A frame whose height comes
 * from aspect-ratio has no height its children can take a percentage of, so a
 * cover taller than 2:3 — most publishers' are, a little — used to stretch the
 * frame and push its title below its neighbours'. Held at the frame's edges,
 * the picture is measured against the frame and fitted inside it, whole.
 */
.diwan-book-card__cover .diwan-book-card__cover-widget,
.diwan-staff-card__cover .diwan-staff-card__cover-widget,
.diwan-explore-card__cover .diwan-explore-card__cover-widget {
	inset: 0;
	position: absolute;
}

.diwan-book-card__cover .diwan-book-card__cover-widget img,
.diwan-staff-card__cover .diwan-staff-card__cover-widget img,
.diwan-explore-card__cover .diwan-explore-card__cover-widget img {
	block-size: 100%;
	inline-size: 100%;
	max-inline-size: none;
	object-fit: var(--diwan-fit-book, contain);
}

/*
 * A book's name on a card is set in its own face, Loew and Rubik by default,
 * and not in the section headings' TAY (Diwan, 15 October 2026): the heading
 * names the shelf, the card names the book. Chosen on Store settings → Fonts
 * ("A book name on a card"). In the face's own case, too: the capitals were
 * only ever there for TAY, whose lowercase letters are small capitals
 * (fonts.css).
 *
 * Over the card template's own typography, which names the global heading
 * face: four classes against its two.
 */
.e-loop-item .elementor-widget-theme-post-title.diwan-book-card__name .elementor-heading-title,
.e-loop-item .elementor-widget-theme-post-title.diwan-staff-card__name .elementor-heading-title {
	font-family: var(--diwan-font-card);
	text-transform: none;
}

/* Two lines, then stop. A title is a label on a shelf here, and the third line
   of a long one would push the price out of the row it shares with its
   neighbours. */
.diwan-book-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.diwan-book-card__name a {
	color: inherit;
	text-decoration: none;
}

.diwan-book-card__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* One line for the author, because two names at most reach here and a third
   would be a different book. */
.diwan-book-card__author {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* An author nobody has recorded yet leaves no gap rather than an empty line
   between the title and the price. */
.diwan-book-card__author:empty {
	display: none;
}

/* WooCommerce prints a price as a paragraph with its own margins, which inside
   a card fights the gap the container already sets. */
.diwan-book-card__price .price,
.diwan-book-card__price p {
	margin: 0;
}

/* A book on offer shows what it was beside what it is. The old price is quieter
   than the new one, which is the whole point of showing it. */
.diwan-book-card__price del {
	color: var(--diwan-text-muted, #6e6e6e);
	font-weight: 400;
	margin-inline-end: 6px;
	/* Not faded further: inside a book's page WooCommerce sets 0.7 on any old
	   price, and the muted colour at 0.7 is too faint to read (2.8 to 1). */
	opacity: 1 !important; /* WooCommerce's own rule is one element stronger */
}

.diwan-book-card__price ins {
	text-decoration: none;
}

/* ----------------------------------------------------------------- the heart */

/*
 * The blur is a progressive enhancement. Where a browser cannot do it the
 * fallback underneath turns the disc solid white.
 */
/*
 * Round, and nearly solid white (Diwan, October 2026): the frosted square
 * all but disappeared into a pale cover. A white disc with a dark ring of
 * shadow and a black heart stands out on a light jacket and a dark one alike.
 */
.diwan-wish {
	align-items: center;
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	background: rgba(255, 255, 255, 0.94);
	block-size: var(--diwan-wish-size, 34px);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.18);
	color: var(--diwan-black, #000);
	cursor: pointer;
	display: flex;
	inline-size: var(--diwan-wish-size, 34px);
	justify-content: center;
	padding: 0;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.diwan-wish {
		background: var(--diwan-white, #fff);
	}
}

.diwan-wish:hover,
.diwan-wish:focus-visible {
	background: var(--diwan-wood, #3b0f00);
	border-color: var(--diwan-wood, #3b0f00);
	color: var(--diwan-canvas, #faf7db);
}

/* On the list: the outline fills in. The icon set is outlines throughout, and
   this is the one place a fill means something rather than being a second
   style, so the fill is applied here instead of drawing a second heart. */
.diwan-wish.is-on {
	background: var(--diwan-wood, #3b0f00);
	border-color: var(--diwan-wood, #3b0f00);
	color: var(--diwan-canvas, #faf7db);
}

.diwan-wish.is-on .diwan-icon {
	fill: currentColor;
}

/* The editor previews the card against whatever it is pointed at, which need
   not be a product. A heart that saves nothing should not look pressable. */
.diwan-wish.is-preview {
	cursor: default;
	opacity: 0.5;
}

/* ------------------------------------------------------- the staff favourite */

/*
 * A cover on the leading edge and the recommendation beside it. The card is
 * laid out in the builder, which owns the direction and the gap; what is here
 * is the shape of the jacket and how much of the note fits before it is cut.
 */
.diwan-staff-card {
	block-size: 100%;
}

/* The same proportions as every other cover on the page, on the box rather
   than the artwork, so a book whose jacket has not been uploaded keeps its
   place instead of collapsing the row. */
.diwan-staff-card__cover {
	aspect-ratio: var(--diwan-book-ratio, 2 / 3);
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

/* The width set in the builder is the width it keeps.
 *
 * A flex item may shrink below the width it was given, and left to it the
 * jacket gave way to the recommendation beside it and came out a third
 * narrower than the covers in the run above.
 *
 * Said as a floor rather than by switching the shrink off, and that is not a
 * dodge: Elementor sets the flex shorthand on its own containers, so a rule
 * here naming flex-shrink would be a fight decided by which stylesheet loads
 * last. A minimum reads from the same width the panel writes and says what is
 * actually meant, which is that the jacket has a size below which it stops
 * being a jacket.
 *
 * Named through the card, because Elementor zeroes the minimum on its own
 * containers and a single class here would be another tie decided by load
 * order. */
.diwan-staff-card .diwan-staff-card__cover {
	min-inline-size: var(--width, 26%);
}

.diwan-staff-card__cover-widget,
.diwan-staff-card__cover-widget > .elementor-widget-container,
.diwan-staff-card__cover-widget figure,
.diwan-staff-card__cover-widget a {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.diwan-staff-card__cover-widget img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: var(--diwan-fit-book, contain);
}

.diwan-staff-card__name a {
	color: inherit;
	text-decoration: none;
}

.diwan-staff-card__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Four lines of the note, then stop. Whoever writes these will write four
   sentences one day and fourteen the next, and a card that grows with them
   would leave the one beside it half empty. */
.diwan-staff-card__note {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* A book with a note but nobody's name against it takes no room rather than
   leaving a blank line under the recommendation. */
.diwan-staff-card__by:empty {
	display: none;
}

/* The grid is Elementor's and its columns are set in the panel. This only
   pushes the button clear of the last row. */
.diwan-staff__all {
	margin-block-start: 32px;
}

/* --------------------------------------------------------- Diwan Publishing */

:root {
	/* The house's own covers, at the proportions the staging build uses. Wider
	   than the 2:3 of a trade paperback because these are the hardbacks. */
	--diwan-pub-cover: 180px;
	--diwan-pub-ratio: 180 / 250;
}

/* The copy sits at the top of its half, level with the top of the portrait,
   rather than floating in the middle of a column as tall as the picture. */
.diwan-pub__copy > .elementor-column-wrap,
.diwan-pub__copy > .elementor-widget-wrap {
	align-content: flex-start;
}

.diwan-pub__title {
	margin-block-start: -6px;
}

.diwan-pub__button {
	margin-block-start: 8px;
}

/* The portrait is a background, so it needs a height of its own: a background
   has none, and a column holding one short heading is the height of that
   heading.
 *
 * Said on the wrap inside the column rather than on the column, because that is
 * where Elementor paints a column's background and applies its padding. On the
 * column itself the rule is inert, and an inert rule is worse than no rule: it
 * reads as though somebody had already thought about this. */
.diwan-pub__portrait > .elementor-column-wrap,
.diwan-pub__portrait > .elementor-widget-wrap {
	align-content: flex-end;
	min-block-size: 250px;
}

/* On a phone the portrait sits under the words rather than beside them, and
   the band has to stay on one screen with its covers (October 2026). */
@media (max-width: 767px) {
	.diwan-pub__portrait > .elementor-column-wrap,
	.diwan-pub__portrait > .elementor-widget-wrap {
		min-block-size: 150px;
	}
}

/* Staff Favourites whole on a tablet's and a phone's screen too (Diwan,
   October 2026): on a tablet all six, three across and two deep, the card a
   size smaller (5 October; it was two across, and four of them); on a phone
   three, one to a row. View All Staff Favorites is under them for the rest. */
@media (max-width: 767px) {
	.diwan-staff__grid .e-loop-item:nth-child(n+4) {
		display: none;
	}
}

/* A name in white on a photograph is legible until somebody swaps in a photograph
   with a bright corner. The shadow costs nothing and survives that. */
.diwan-pub__name {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------- the Diwan Publishing card */

/* A cover and the heart on it, and nothing else: the titles are on the jackets
   and the panel above has already said what they are. */
.diwan-pub-card {
	margin-inline: auto;
	max-inline-size: 100%;
	position: relative;
}

/* The shape is on the box, not on the artwork, for the same reason it is on
   every other cover here: a book whose jacket has not been uploaded keeps its
   place in the row instead of collapsing it. */
.diwan-pub-card .diwan-pub-card__cover {
	aspect-ratio: var(--diwan-pub-ratio, 180 / 250);
	background: var(--diwan-surface, #fff);
	inline-size: 100%;
}

.diwan-pub-card__cover > .elementor-widget-container,
.diwan-pub-card__cover figure,
.diwan-pub-card__cover a {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.diwan-pub-card__cover img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* Smaller than the one on a new release, because the jacket it sits on is
   smaller. Where it sits is the panel's business: the card is the jacket, so
   the corner of one is the corner of the other. */
.diwan-pub-card .diwan-wish {
	--diwan-wish-size: 30px;
}

/* ------------------------------------------------------------- the author card */

:root {
	--diwan-author-size: 140px;
}

/* Centred on every page: until 3.6.0 an author's own page lost the
   centring to Elementor's container rule (.e-con-full), which the Authors
   page kept. One step past that rule, so the order no longer decides. */
.diwan-author-card {
	position: relative;
}

.diwan-author-card.e-con-full,
.diwan-author-card:not(.e-con-full) {
	text-align: center;
}

/*
 * Round, because a rectangle of a face reads as a product and a circle reads as
 * a person. Cropped to fill rather than fitted, which a portrait can take: a
 * jacket cannot, which is why the covers on this page do the opposite.
 */
.diwan-author-card__photo {
	align-items: center;
	aspect-ratio: 1;
	background: var(--diwan-surface-sunken, #f4f3f1);
	border-radius: 999px;
	display: flex;
	inline-size: var(--diwan-author-size, 140px);
	justify-content: center;
	max-inline-size: 100%;
	overflow: hidden;
}

.diwan-author-card__image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/*
 * An author with no photograph yet gets their initials rather than an empty
 * circle or a stock silhouette. A shelf of identical grey heads says the site
 * is broken; initials say what a name badge says.
 */
.diwan-author-card__photo--initials {
	background: var(--diwan-taupe, #ab9169);
	color: var(--diwan-white, #fff);
	font-family: var(--diwan-font-display);
	font-size: calc(var(--diwan-author-size, 140px) / 3);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.diwan-author-card__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* The name underlines when the pointer is anywhere on the card, because the
   whole card is the link. */
.diwan-author-card:hover .diwan-author-card__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-author-card:has(.diwan-card-link:focus-visible) {
	outline: 2px solid var(--diwan-blue, #246b8f);
	outline-offset: 4px;
}

/* The photograph field on the author screen. */
.diwan-author-photo-field__preview {
	border-radius: 4px;
	display: block;
	margin-block-end: 8px;
	object-fit: cover;
}

/* --------------------------------------------------------- the best sellers */

/*
 * The picker under the heading. It is a form, so it carries a button for the
 * reader with no script to press; the script hides that button because for
 * everybody else the change is the submit.
 */
.diwan-bestsellers__picker {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-end: 26px;
}

.diwan-bestsellers__label {
	color: var(--diwan-text-soft, #444);
	font-size: 13px;
}

/* A width of its own. A bare select inherits the full measure from the theme,
   which on a 1360 page is a category picker a metre wide. */
.diwan-bestsellers__picker .diwan-bestsellers__select {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border-strong, #d5d5d5);
	border-radius: 0;
	color: var(--diwan-black, #000);
	font-family: inherit;
	font-size: 14px;
	inline-size: auto;
	max-inline-size: 100%;
	min-inline-size: 220px;
	padding: 9px 14px;
}

.diwan-bestsellers__select:focus-visible {
	outline: 2px solid var(--diwan-blue, #246b8f);
	outline-offset: 2px;
}

.diwan-bestsellers__go {
	background: var(--diwan-black, #000);
	border: 0;
	border-radius: 0;
	color: var(--diwan-white, #fff);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	text-transform: uppercase;
}

/* The button is only there for the reader whose browser is not running the
   script. The script marks the page the moment it parses, which is before the
   form is on screen, so the button is never seen flickering away. */
.diwan-js .diwan-bestsellers__go {
	display: none;
}

/* While the new shelf is on its way. Not a spinner: the old shelf is still
   readable and it is about to be replaced, so it only needs to stop looking
   like it is waiting for a click. */
.diwan-bestsellers__picker.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* The picker sits under the heading, so the heading row gives up the margin it
   would otherwise put between itself and the run. */
.diwan-bestsellers__filter {
	margin-block-start: -14px;
}

/* ------------------------------------------------------------- the card link */

/*
 * The whole card is one click target.
 *
 * Laid over the card rather than wrapped around it, because several of these
 * cards carry a wishlist heart and a link inside a link is markup a browser
 * pulls apart. It sits under the heart, so the heart still gets its own clicks.
 */
/* The widget itself is taken out of the flow, not only the link inside it. A
   widget left in the flow still claims a line and the twenty pixels Elementor
   puts under every widget, which on six bands added up to a page of empty
   space nobody could see the cause of. */
.elementor-element.elementor-widget-diwan-card-link {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: 1;
}

.diwan-card-link {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

/* It has no content, so a focus ring on the link itself would be a ring around
   nothing. The card takes it instead, which is what a keyboard reader needs to
   see: which card they are on. */
.diwan-card-link:focus-visible {
	outline: none;
}

.diwan-book-card:has(.diwan-card-link:focus-visible),
.diwan-staff-card:has(.diwan-card-link:focus-visible),
.diwan-pub-card:has(.diwan-card-link:focus-visible),
.diwan-event-card__built:has(.diwan-card-link:focus-visible) {
	outline: 2px solid var(--diwan-blue, #246b8f);
	outline-offset: 3px;
}

/* The title underlines when the pointer is anywhere on the card, not only on
   the title, because the whole card is the link now. */
.diwan-book-card:hover .diwan-book-card__name,
.diwan-staff-card:hover .diwan-staff-card__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------- the Arabic band */

/* The tagline sits under the heading rather than beside it, and close enough
   to read as part of it. */
.diwan-band__tagline {
	margin-block-start: -14px;
}

/* ------------------------------------------------------------------ the band */

/*
 * The section is Elementor's: its background, padding and the row that holds
 * the heading and the link are all set in the builder. This is the run itself,
 * which needs the cards to be the same height whatever the length of a title,
 * so the prices line up across the row.
 */
.diwan-books__run .swiper-slide {
	block-size: auto;
}

.diwan-books__run .e-loop-item {
	block-size: 100%;
}

/* The heading and the way to the rest sit on one line with the whole measure
   between them, so they have to sit on the same line: aligned on their
   baselines rather than on their boxes, because a 28px heading and a 13px link
   are different heights and lining up their tops or their middles leaves the
   link visibly adrift.

   Stated on the row Elementor builds inside the section rather than on the
   section, which is not the flex container and quietly ignores it. */
.diwan-books__head > .elementor-container {
	align-items: baseline;
}

.diwan-books__all .elementor-button {
	letter-spacing: 0.06em;
}

/*
 * The home page's bands set the room between their own pieces (Diwan,
 * October 2026: as compact as Waterstones'). Elementor adds the kit's "space
 * between widgets" on top of whatever a widget's own margin says, which put
 * 20 more pixels under every heading, rule and run of cards; inside a band
 * that is 0, and the margins written on the widgets are the whole of it.
 */
.elementor-section.diwan-band .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

/* A card's title in two lines at most, the rest ellipsed, on the title
   itself: the rule above, on the widget round it, let a third line through,
   and on an Arabic page an English title set in Cairo ran to five, one card
   standing a third taller than the run (Diwan, October 2026: every band and
   two rows of a shelf on one screen). The whole title is the card's link's
   name, so nothing is lost to a reader. */
.e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 767px) {
	:root {
		--diwan-book-gap: 16px;
	}

	/*
	 * The recommendation stays beside its jacket on a phone rather than under
	 * it, which the card itself says. All that is left here is how much of the
	 * width the jacket takes: two fifths is small, but it is still a book and
	 * the whole card is on screen at once.
	 */
	.diwan-staff-card .diwan-staff-card__cover {
		inline-size: 40%;
		min-inline-size: 40%;
	}
}

/* --------------------------------------------------------- the add to cart */

/*
 * A bar across the foot of the jacket, and out of sight until somebody looks at
 * the book. A shelf is covers: a row of six black buttons at rest would be a
 * row of six buttons with some books behind them. Where it sits is Elementor's
 * business, set on the widget in the card; all this decides is that it starts
 * below the edge of the cover and slides up.
 *
 * The cover box already clips what hangs off it, which is what hides the bar at
 * rest without anything here having to say display: none. That matters: a
 * control that is only moved can still be reached by keyboard, and focus inside
 * the card brings it up the same way a pointer does.
 */
.diwan-cart {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.diwan-book-card:hover .diwan-cart,
.diwan-book-card:focus-within .diwan-cart,
.diwan-pub-card:hover .diwan-cart,
.diwan-pub-card:focus-within .diwan-cart,
.diwan-staff-card:hover .diwan-cart,
.diwan-staff-card:focus-within .diwan-cart,
.diwan-cart--always {
	opacity: 1;
	transform: none;
}

/* A staff favourite's jacket is a thumbnail beside its quotation (October
   2026: Add to cart on it too), so the bar is a size smaller to stay on one
   line across it, and the jacket clips it at rest as a cover does. */
.diwan-staff-card__cover {
	overflow: hidden;
	position: relative;
}

.diwan-staff-card .diwan-cart__button {
	font-size: 10.5px;
	letter-spacing: 0.02em;
	padding-inline: 4px;
	white-space: nowrap;
}

/* A touch screen has no hover to wait for, so the bar is simply there. */
@media (hover: none) {
	.diwan-cart {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.diwan-cart {
		transition: none;
	}
}

.diwan-cart__button {
	background: var(--diwan-btn-bg, #000000);
	color: var(--diwan-btn-text, #ffffff);
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding: 10px 8px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* The book's name in the button, for screen readers (the theme's own rule,
   repeated for a theme that has none). */
.diwan-cart__button .screen-reader-text,
.elementor-button .screen-reader-text {
	block-size: 1px;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
}

.diwan-cart__button:hover,
.diwan-cart__button:focus-visible {
	background: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* WooCommerce marks the link while its request is in the air and again when the
   book is in the basket. The second state is worth showing: the bar is the only
   thing the reader is looking at, and the count in the header is at the top of
   the page. */
.diwan-cart__button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.diwan-cart__button.added {
	background: var(--diwan-taupe, #ab9169);
}

/* WooCommerce adds its own "View cart" link after the button. Inside a bar this
   size it would be a second control on top of the first, and the bag in the
   header, which has just counted up, is where the cart is on this site. */
.diwan-cart .added_to_cart {
	display: none;
}

/* ------------------------------------------------------------- the rating */

.diwan-rating {
	--diwan-star-size: 15px;

	align-items: center;
	display: flex;
	gap: 6px;
	line-height: 1;
}

.diwan-rating__stars {
	display: inline-block;
	position: relative;
}

.diwan-rating__row {
	display: flex;
}

.diwan-rating__row--empty {
	color: var(--diwan-star-empty, #dddddd);
}

/* The filled stars are the same five stars over the top, clipped to the average.
   Half a star is half a star rather than a rounded one. */
.diwan-rating__row--full {
	color: var(--diwan-star, #e0b070);
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	position: absolute;
}

.diwan-rating__row--full .diwan-icon {
	fill: currentColor;
}

.diwan-rating .diwan-icon {
	block-size: var(--diwan-star-size);
	inline-size: var(--diwan-star-size);
}

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

/* -------------------------------------------------------- more to explore */

/*
 * The one boxed card on the page. Every other band is jackets on a ground, and
 * a border round each of those would draw a grid over a shelf. This band has no
 * argument behind it, so the card is a card: a frame, a cover, a name, what
 * readers made of it, a price and a way in.
 */
/* The card carries no ground of its own: the jackets stand on the band's
   tint, the way they do on every other shelf down the page. A white box on a
   near-white band is a frame drawn for no reason. */
.diwan-explore-card {
	background: transparent;
	block-size: 100%;
	position: relative;
}

.diwan-explore-card__cover {
	aspect-ratio: var(--diwan-book-ratio, 2 / 3);
	background: transparent;
	overflow: hidden;
	position: relative;
}

.diwan-explore-card__cover-widget,
.diwan-explore-card__cover-widget > .elementor-widget-container,
.diwan-explore-card__cover-widget figure,
.diwan-explore-card__cover-widget a {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

.diwan-explore-card__cover-widget img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: var(--diwan-fit-book, contain);
}

/* The way in sits on the bottom edge of the card whatever the title above it
   did, so a row of six cards has six buttons on one line. */
.diwan-explore-card .diwan-explore-card__more {
	margin-block-start: auto;
}

.diwan-explore-card__more .elementor-button {
	inline-size: 100%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.diwan-explore-card__more .elementor-button:hover,
.diwan-explore-card__more .elementor-button:focus-visible {
	background: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* The card is clickable as well as the button in it, so the frame answers a
   pointer the way the other cards on this page do. */
.diwan-explore-card:hover {
	border-color: var(--diwan-border-strong, #d5d5d5);
}

.diwan-explore-card:has(.diwan-card-link:focus-visible) {
	outline: 2px solid var(--diwan-blue, #246b8f);
	outline-offset: 2px;
}

/* --------------------------------------------------- the authors directory */

/*
 * The row over the whole directory: a search, how many names are under it, and
 * the two alphabets. The letters are links rather than a control, so every
 * letter is a page somebody can send to somebody else.
 */
.diwan-authors-find {
	margin-block-end: 26px;
}

.diwan-authors-find__form {
	align-items: center;
	display: flex;
	gap: 10px;
}

.diwan-authors-find__box {
	align-items: center;
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	flex: 1 1 320px;
	gap: 8px;
	max-inline-size: 420px;
	padding-inline: 12px;
}

.diwan-authors-find__box .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	flex: none;
}

/* One step deeper than the theme's input rule: the box is the border, so the
   field inside it has none of its own. */
.diwan-authors-find__form .diwan-authors-find__box input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--diwan-text, #000);
	font-size: 14px;
	inline-size: 100%;
	min-inline-size: 0;
	outline: 0;
	padding-block: 10px;
}

.diwan-authors-find__form .diwan-authors-find__go {
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 11px 20px;
	text-transform: uppercase;
}

.diwan-authors-find__form .diwan-authors-find__go:hover {
	background: var(--diwan-blue, #246b8f);
	border-color: var(--diwan-blue, #246b8f);
	color: var(--diwan-white, #fff);
}

.diwan-authors-find__clear {
	color: var(--diwan-blue, #246b8f);
	display: inline-block;
	font-size: 13px;
	margin-block-start: 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-authors-find__count {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 13px;
	margin: 10px 0 0;
}

/* A search that found nobody is the page's answer, not an aside. */
.diwan-authors-find__count.is-empty {
	color: var(--diwan-text, #000);
	font-size: 15px;
}

.diwan-authors-find__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 14px;
}

/* Each alphabet is kept together and reads its own way round, so the Arabic
   letters run right to left inside a page that runs left to right. */
.diwan-authors-find__set {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.diwan-authors-find__letter {
	align-items: center;
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-text-soft, #444);
	display: inline-flex;
	font-size: 13px;
	justify-content: center;
	line-height: 1;
	min-inline-size: 32px;
	padding: 8px 8px;
	text-decoration: none;
}

.diwan-authors-find__letter:hover {
	border-color: var(--diwan-black, #000);
	color: var(--diwan-black, #000);
}

.diwan-authors-find__letter.is-on,
.diwan-authors-find__letter.is-on:hover {
	background: var(--diwan-blue, #246b8f);
	border-color: var(--diwan-blue, #246b8f);
	color: var(--diwan-white, #fff);
}

/* The way to the next sixty, under the grid. */
.diwan-authors-more {
	margin-block-start: 34px;
	text-align: center;
}

.diwan-authors-more__link {
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 12px 28px;
	text-decoration: none;
	text-transform: uppercase;
}

.diwan-authors-more__link:hover {
	background: var(--diwan-blue, #246b8f);
	border-color: var(--diwan-blue, #246b8f);
	color: var(--diwan-white, #fff);
}

.diwan-authors-more__count {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 13px;
	margin: 10px 0 0;
}

/* The grid while the next helping is on its way. */
.diwan-authors__grid.is-loading {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.diwan-authors__grid.is-loading {
		transition: none;
	}
}

@media (max-width: 600px) {
	.diwan-authors-find__form {
		flex-wrap: wrap;
	}

	.diwan-authors-find__box {
		flex-basis: 100%;
		max-inline-size: none;
	}
}

/* ------------------------------------------ the way to the rest of a shelf */

/*
 * "View All" beside a section heading reads as a line of words until the
 * pointer reaches it, and then it is a button like every other: a whole
 * Papyrus panel with Wood Brown on it, and room around the words.
 *
 * The room is there all the time, so nothing on the row moves when the panel
 * appears, and the panel ends where the shelf under it ends.
 *
 * Written at the weight of Elementor's own rule for the element's padding,
 * plus the element of the link itself, so this is the one that lands.
 */
.elementor .elementor-element.diwan-books__all a.elementor-button {
	border-radius: 0;
	padding: 9px 14px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.elementor .elementor-element.diwan-books__all a.elementor-button:hover,
.elementor .elementor-element.diwan-books__all a.elementor-button:focus-visible {
	background-color: var(--diwan-papyrus, #e0b070);
	box-shadow: none;
	color: var(--diwan-wood, #3b0f00);
}

/* ------------------------------------------- the things that are not books */

/*
 * Gifts and stationery are photographed as they are: a mug is square-ish, a
 * tote is wide, a pen is long and thin. A jacket's two-by-three frame turns a
 * shelf of them into a row of different-sized objects floating in different
 * amounts of space.
 *
 * So the frame becomes a square and the photograph sits inside it, which is
 * the one shape that holds all of them: whatever the picture is, the card
 * beside it is the same size, and the row lines up.
 *
 * The mark comes from the product itself — the plugin puts it on the card
 * through post_class — so one rule covers the shop, the carousels on the home
 * page and any shelf built later.
 */
.diwan-not-book .diwan-book-card__cover,
.diwan-not-book .diwan-explore-card__cover {
	aspect-ratio: var(--diwan-thing-ratio, 1 / 1);
}

/*
 * A grid with books and things in it together (the whole shop, a search) is a
 * row of jackets with the odd mug among them. There the square would make the
 * mug a smaller card than the book beside it, so the things take the jacket's
 * frame and sit inside it: every card in the row is the same size. A shelf of
 * things alone keeps the square.
 */
.elementor-loop-container:has(> .e-loop-item.diwan-not-book):has(> .e-loop-item:not(.diwan-not-book)),
.swiper-wrapper:has(> .e-loop-item.diwan-not-book):has(> .e-loop-item:not(.diwan-not-book)) {
	--diwan-thing-ratio: var(--diwan-book-ratio, 2 / 3);
}

/*
 * The picture is laid inside the frame rather than stacked in it. A jacket is
 * always two by three, so a frame that grows to fit one is the right height by
 * accident; a photograph of a mug is not, and the frame would grow with it and
 * take the row out of line. Lifted out of the flow, the frame's height is the
 * square and nothing else, whatever arrives inside it.
 */
.diwan-not-book .diwan-book-card__cover-widget,
.diwan-not-book .diwan-explore-card__cover-widget {
	inset: 0;
	position: absolute;
}

/* Elementor states height:auto on every picture it draws, at the same weight as
   a single class, and it is loaded after this file — so the frame is named as
   well as the picture to keep the height the square's. */
.diwan-not-book .diwan-book-card__cover .diwan-book-card__cover-widget img,
.diwan-not-book .diwan-explore-card__cover .diwan-explore-card__cover-widget img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: var(--diwan-fit-thing, contain);
	padding: 10px;
}

/* No author, so no line for one: without this the card keeps the empty line's
   gap and the price sits lower than it does on the card beside it. */
.diwan-not-book .diwan-book-card__author,
.diwan-not-book .diwan-staff-card__author {
	display: none;
}

/* ------------------------------------------------- room for the descenders */

/*
 * A box that clips its text cuts at the line box, and an Arabic line box is
 * taller than the line-height these titles are set in: ـج ـح ـق ـى hang below
 * the Latin baseline and were being sliced across the bottom on every shelf.
 *
 * The room is given as padding and taken straight back as margin, so the text
 * has somewhere to hang and nothing below it moves. Raising the line-height
 * instead would have worked too, and would have pushed every price on the page
 * down ten pixels to fix a handful of letters.
 *
 * On every card and in both languages, because an Arabic title turns up on an
 * English page all day long.
 */
.diwan-book-card__name,
.diwan-book-card__author,
.diwan-staff-card__name,
.diwan-staff-card__author,
.diwan-staff-card__note,
.diwan-staff-card__by,
.diwan-event-card__name {
	padding-block-end: 0.3em;
	margin-block-end: -0.3em;
}

/* A favourite marked by its tag alone has no note and no name under it: the
   two lines go, rather than leaving a gap where they would have been. */
.elementor-widget.diwan-staff-card__note:has(.elementor-heading-title:empty),
.elementor-widget.diwan-staff-card__by:has(.elementor-heading-title:empty) {
	display: none;
}

/*
 * Every grid of cards keeps its columns equal, whatever is in them.
 *
 * Elementor lays a loop grid out in 1fr columns, and 1fr grows to fit the
 * widest thing in the column that cannot break. One title with a wide glyph —
 * "نبي الله محمد ﷺ", where ﷺ is a single character drawn as wide as a phrase —
 * pushed one column to 277px on a 390px phone and the whole shop scrolled
 * sideways. minmax(0, 1fr) keeps each column to its share; the title is
 * clipped inside its own card instead.
 */
.elementor-widget-loop-grid .elementor-loop-container.elementor-grid {
	grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr));
}

.elementor-widget-loop-grid .elementor-loop-container.elementor-grid > .e-loop-item {
	min-inline-size: 0;
}

.diwan-book-card__name .elementor-heading-title {
	overflow-wrap: anywhere;
}