/**
 * The shop: a column of filters, and five books across beside it.
 *
 * The grid itself is Elementor's, and the number of columns is a panel setting
 * rather than a rule here. What is here is the column beside it, which is a set
 * of controls rather than content and is the one part of the page the brand's
 * own styling has to reach: a native select, a native number box and a checkbox
 * all arrive looking like whatever the browser thinks, and three different
 * browsers is three different shops.
 */

/*
 * The filters follow the reader down a long shelf. The offset clears the
 * header, which is fixed and would otherwise cut the top off the column.
 *
 * Written one class deeper than Elementor writes its own column rule, which
 * sets position: relative at the same weight and loads after this file.
 */
.elementor-element.diwan-shop__side {
	align-self: flex-start;
	position: sticky;
	top: calc(var(--diwan-header-height, 122px) + 16px);
}

.diwan-filters {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 14px;
}

.diwan-filters__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.diwan-filters__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.diwan-filters__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.diwan-filters__title label {
	cursor: pointer;
}

/* ------------------------------------------------------------- the search */

.diwan-filters__search {
	align-items: center;
	background: var(--diwan-surface, #ffffff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	gap: 6px;
	padding-inline: 10px;
}

/*
 * The box is the box, and the field inside it is not.
 *
 * Written with the element in the selector because the theme paints a border on
 * every input at the same weight and loads after this file, which is how the
 * search and the price boxes ended up drawn twice: one border for the control
 * and one, a few pixels inside it, for the field.
 */
.diwan-filters input.diwan-filters__field {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1 1 auto;
	font: inherit;
	min-inline-size: 0;
	outline: none;
	padding: 10px 0;
}

.diwan-filters input.diwan-filters__field:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

.diwan-filters__search:focus-within {
	border-color: var(--diwan-black, #000000);
}

.diwan-filters__go {
	background: none;
	border: 0;
	color: var(--diwan-text, #000000);
	cursor: pointer;
	display: flex;
	padding: 4px;
}

.diwan-filters__scope {
	display: flex;
	gap: 16px;
}

.diwan-filters__check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 6px;
}

/* --------------------------------------------------------------- the sort */

.diwan-filters__select {
	appearance: none;
	background: var(--diwan-surface, #ffffff);
	/* The chevron is the site's own, as a data URI: a select cannot hold an
	   element, and the browser's arrow is the one control on the page that
	   would not be ours. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9.5 7 7 7-7'/%3E%3C/svg%3E");
	background-position: left 10px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	color: inherit;
	font: inherit;
	inline-size: 100%;
	padding: 10px 12px;
	padding-inline-end: 34px;
}

/* The arrow sits on the far edge, which is the right in English and the left
   in Arabic. Logical properties do not reach a background position, so the one
   place in this file that has to know the direction is here. */
body:not(.rtl) .diwan-filters__select {
	background-position: right 10px center;
}

.diwan-filters__select:focus-visible {
	border-color: var(--diwan-black, #000000);
}

/* -------------------------------------------------------------- the stock */

.diwan-filters__switch {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
}

.diwan-filters__switch input {
	block-size: 1px;
	inline-size: 1px;
	opacity: 0;
	position: absolute;
}

.diwan-filters__track {
	background: var(--diwan-border-strong, #d5d5d5);
	block-size: 20px;
	border-radius: 999px;
	flex: 0 0 auto;
	inline-size: 36px;
	position: relative;
	transition: background-color 0.2s ease;
}

.diwan-filters__track::after {
	background: var(--diwan-white, #ffffff);
	block-size: 14px;
	border-radius: 50%;
	content: "";
	inline-size: 14px;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	position: absolute;
	transition: inset-inline-start 0.2s ease;
}

.diwan-filters__switch input:checked + .diwan-filters__track {
	background: var(--diwan-black, #000000);
}

.diwan-filters__switch input:checked + .diwan-filters__track::after {
	inset-inline-start: 19px;
}

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

.diwan-filters__switch-label {
	font-size: 13px;
}

/* -------------------------------------------------------------- the price */

.diwan-filters__range {
	align-items: center;
	display: flex;
	gap: 8px;
}

.diwan-filters__money {
	align-items: center;
	background: var(--diwan-surface, #ffffff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	flex: 1 1 0;
	gap: 4px;
	min-inline-size: 0;
	padding-inline: 8px;
}

.diwan-filters__money:focus-within {
	border-color: var(--diwan-black, #000000);
}

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

.diwan-filters input.diwan-filters__number {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	inline-size: 100%;
	min-inline-size: 0;
	outline: none;
	padding: 9px 0;
}

.diwan-filters input.diwan-filters__number:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* The spinners are a second control inside a control, and they make a 3-digit
   box too narrow to read. */
.diwan-filters input.diwan-filters__number::-webkit-outer-spin-button,
.diwan-filters input.diwan-filters__number::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.diwan-filters input.diwan-filters__number {
	appearance: textfield;
}

.diwan-filters__dash {
	color: var(--diwan-text-muted, #6e6e6e);
}

/* ------------------------------------------------------------ the buttons */

.diwan-filters__apply {
	background: var(--diwan-btn-bg, #000000);
	border: 1px solid var(--diwan-btn-border, #000000);
	color: var(--diwan-btn-text, #ffffff);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 11px 14px;
	text-transform: uppercase;
}

.diwan-filters__apply:hover,
.diwan-filters__apply:focus-visible {
	background: var(--diwan-btn-bg-hover, #ffffff);
	color: var(--diwan-btn-text-hover, #000000);
}

/* With the script running, a change sends the form on its own and the button is
   one press nobody needs. Without it, it is the only way to send anything. */
.diwan-js .diwan-filters__apply {
	display: none;
}

/* A control rather than a line of small print: it undoes everything above it,
   which is the second most consequential thing in the column. */
.diwan-filters__clear {
	align-items: center;
	border: 1px solid var(--diwan-border-strong, #d5d5d5);
	color: var(--diwan-text, #000000);
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0.06em;
	padding: 10px 12px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Out of sight while nothing is filtered, and the count beside "Filters" while
   it is nought: both carry the hidden attribute then, and their own display
   (flex, grid) outranked it, so "Clear all filters" stood under every shelf
   and a 0 beside the phone's Filters (Ahmad, 7 October 2026). */
.diwan-filters__clear[hidden],
.diwan-filters__badge[hidden] {
	display: none;
}

.diwan-filters__clear::before {
	content: "×";
	font-size: 16px;
	line-height: 1;
}

.diwan-filters__clear:hover,
.diwan-filters__clear:focus-visible {
	background: var(--diwan-black, #000000);
	border-color: var(--diwan-black, #000000);
	color: var(--diwan-white, #ffffff);
}

/* ---------------------------------------------------------------- the sheet */

/*
 * Beside the books the column is a column: its own head would repeat the page
 * and its own way out would lead nowhere. Both are drawn all the same, because
 * the same markup becomes a sheet over the shelf on anything narrower than a
 * desk, and a sheet has to say what it is and how to leave.
 */
.diwan-filters__bar,
.diwan-filters__done {
	display: none;
}

/* ------------------------------------------------------------- the handle */

/*
 * The whole column folds away on a phone, behind one control that says how many
 * filters are on. Beside the books there is nothing to fold, so the handle is
 * not drawn at all.
 */
.diwan-filters__handle {
	display: none;
}

.diwan-filters__handle::-webkit-details-marker {
	display: none;
}

@media (max-width: 1024px) {
	.diwan-filters__handle {
		align-items: center;
		border: 1px solid var(--diwan-black, #000000);
		cursor: pointer;
		display: flex;
		font-size: 13px;
		font-weight: 600;
		gap: 8px;
		justify-content: center;
		letter-spacing: 0.06em;
		list-style: none;
		padding: 12px;
		text-transform: uppercase;
	}

	.diwan-filters__handle::after {
		content: "+";
		font-size: 16px;
		line-height: 1;
	}

	.diwan-filters__panel[open] > .diwan-filters__handle {
		margin-block-end: 18px;
	}

	.diwan-filters__panel[open] > .diwan-filters__handle::after {
		content: "–";
	}

	.diwan-filters__badge {
		background: var(--diwan-black, #000000);
		block-size: 20px;
		border-radius: 999px;
		color: var(--diwan-white, #ffffff);
		display: grid;
		font-size: 11px;
		inline-size: 20px;
		place-items: center;
	}
}

/* --------------------------------------------------------- the categories */

.diwan-filters__block--cats {
	border-block-start: 1px solid var(--diwan-border, #e6e6e6);
	padding-block-start: 4px;
}

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

/* Every level after the first is stepped in on the reading edge, which is the
   left in English and the right in Arabic. */
.diwan-cats__sub .diwan-cats__list {
	border-inline-start: 1px solid var(--diwan-border, #e6e6e6);
	margin-inline-start: 7px;
	padding-inline-start: 10px;
}

.diwan-cats__row {
	align-items: center;
	display: flex;
	gap: 6px;
	padding-block: 3px;
}

.diwan-cats__check {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	gap: 7px;
	min-inline-size: 0;
}

.diwan-cats__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* A category whose parent is already ticked is ticked too and cannot be
   unticked on its own: it is included by the parent, and saying otherwise
   would offer a distinction the shelf does not make. */
.diwan-cats__check input:disabled + .diwan-cats__name {
	color: var(--diwan-text-muted, #6e6e6e);
}

.diwan-cats__toggle {
	background: none;
	border: 0;
	color: var(--diwan-text-muted, #6e6e6e);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	padding: 2px 4px;
}

.diwan-cats__toggle:hover,
.diwan-cats__toggle:focus-visible {
	color: var(--diwan-text, #000000);
}

.diwan-cats__sub {
	display: none;
}

.diwan-cats__sub.is-open {
	display: block;
}

/* The disclosure's own control is only ever used on a narrow screen; beside the
   books there is nothing to fold away. */
.diwan-filters__summary {
	cursor: pointer;
	display: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	list-style: none;
	padding-block: 10px;
	text-transform: uppercase;
}

.diwan-filters__summary::-webkit-details-marker {
	display: none;
}

.diwan-filters__summary::after {
	content: " +";
}

details[open] > .diwan-filters__summary::after {
	content: " –";
}

@media (max-width: 1024px) {
	.diwan-filters__summary {
		border-block-start: 1px solid var(--diwan-border, #e6e6e6);
		display: block;
	}

	.diwan-filters__block--cats {
		padding-block-start: 0;
	}

	/* The column is already behind one control on a phone; a second one in
	   front of the categories would be two doors to the same room. */
	.diwan-filters__panel[open] .diwan-filters__block--cats {
		border-block-start: 1px solid var(--diwan-border, #e6e6e6);
	}
}

/* -------------------------------------------------------------- the shelf */

.diwan-shop-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-end: 22px;
}

.diwan-shop-head__title {
	color: var(--diwan-heading, #246b8f);
	font-size: 26px;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
}

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

/* Elementor lays the grid out; these are the two things it cannot know: that a
   card should fill the cell it is in, and that the button underneath is the
   site's button rather than the theme's. */
.diwan-shop__grid .e-loop-item {
	display: flex;
}

.diwan-shop__grid .e-loop-item > .e-con,
.diwan-shop__grid .e-loop-item > .elementor-section {
	inline-size: 100%;
}

/* Two whole rows of a shelf on a laptop's screen (Diwan, October 2026): on a
   shelf the frame is a little less tall than a jacket's two by three, and
   the cover sits inside it as Store settings → Pictures says. */
@media (min-width: 1025px) {
	.diwan-shop__grid {
		--diwan-book-ratio: 5 / 7;
	}
}

/* The Load More button. One class deeper than Elementor's own rule, which
   paints it the kit's accent colour and loads after this file. */
.elementor-element.diwan-shop__grid .elementor-button {
	background-color: var(--diwan-btn-bg, #000000);
	border-radius: 0;
	color: var(--diwan-btn-text, #ffffff);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 13px 34px;
	text-transform: uppercase;
}

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

@media (max-width: 1024px) {
	.elementor-element.diwan-shop__side {
		position: static;
	}

	/* One column wherever the menu is the phone menu (Diwan, October 2026):
	   two columns side by side read as two separate forms. */
	.diwan-filters__form {
		display: grid;
		gap: 14px;
		grid-template-columns: minmax(0, 1fr);
	}

	.diwan-filters__block--search {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------- the filters as a sheet */

/*
 * A shelf narrower than a desk has no room for a column of controls beside it:
 * at 914px the column was 170px wide and every control in it was folded, which
 * is a filter nobody uses. So the two stack, the column goes behind one button,
 * and opening it draws the controls over the shelf at the size of the screen —
 * the way every shop of this size does it, and the way the phone already did.
 *
 * It is the same markup and the same form throughout: a disclosure whose panel
 * happens to be fixed. Nothing here needs the script, and with the script off
 * the sheet still opens, still filters, and still closes.
 */
@media (max-width: 1024px) {
	/* Elementor writes the column widths at three classes deep in the page's
	   own stylesheet, which loads after this file; the element on the front
	   carries this rule past it without touching the page's data. */
	body[class] .elementor-element.diwan-shop__side,
	body[class] .elementor-element.diwan-shop__main {
		width: 100%;
	}

	body[class] .elementor-element.diwan-shop__side {
		margin-block-end: 18px;
	}

	/* One button, the width of what it says. */
	.diwan-filters__handle {
		inline-size: fit-content;
	}

	.diwan-filters__panel[open] > .diwan-filters__handle {
		margin-block-end: 0;
	}

	.diwan-filters__panel[open] > .diwan-filters__form {
		align-content: start;
		background: var(--diwan-surface, #ffffff);
		display: grid;
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 18px 96px;
		position: fixed;
		z-index: 100000;
	}

	/* The head of the sheet stays where it is while the controls scroll under
	   it: on a long list the way out should never be a scroll away. */
	.diwan-filters__panel[open] .diwan-filters__bar {
		align-items: center;
		background: var(--diwan-surface, #ffffff);
		border-block-end: 1px solid var(--diwan-border, #e6e6e6);
		display: flex;
		grid-column: 1 / -1;
		inset-block-start: 0;
		justify-content: space-between;
		margin-inline: -18px;
		padding: 16px 18px;
		position: sticky;
		z-index: 1;
	}

	.diwan-filters__bar-title {
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.diwan-filters__close {
		align-items: center;
		background: none;
		border: 0;
		color: var(--diwan-text, #000000);
		cursor: pointer;
		display: flex;
		padding: 6px;
	}

	.diwan-filters__block--search {
		grid-column: 1 / -1;
	}

	/* The count is the point of the button, so it is on the same line as the
	   words and not under them. */
	.diwan-filters__panel[open] .diwan-filters__done {
		align-items: center;
		background: var(--diwan-btn-bg, #000000);
		border: 0;
		color: var(--diwan-btn-text, #ffffff);
		cursor: pointer;
		display: flex;
		font-size: 13px;
		font-weight: 600;
		gap: 8px;
		inset-block-end: 16px;
		inset-inline: 18px;
		justify-content: center;
		letter-spacing: 0.06em;
		padding: 15px;
		position: fixed;
		text-transform: uppercase;
		z-index: 2;
	}

	.diwan-filters__panel[open] .diwan-filters__done:hover,
	.diwan-filters__panel[open] .diwan-filters__done:focus-visible {
		background: var(--diwan-hover, #e0b070);
		color: var(--diwan-hover-text, #3b0f00);
	}

	.diwan-filters__done-count {
		opacity: 0.75;
	}

	.diwan-filters__panel[open] .diwan-filters__clear {
		grid-column: 1 / -1;
	}

	/* The page behind the sheet does not scroll, and nothing of the site's own
	   furniture floats over it. */
	.diwan-filters-open,
	.diwan-filters-open body {
		overflow: hidden;
	}

	.diwan-filters-open .diwan-wa,
	.diwan-filters-open .diwan-header {
		display: none;
	}
}

/* -------------------------------------------------------------- the swap */

/*
 * While the next shelf is on its way the old one stays where it is, inert, and
 * each card on it becomes the outline of a card: a cover, a title, a name, a
 * price, shimmering. Emptying the grid first would collapse the page to the
 * height of the filters and throw the reader's scroll position away for the
 * sake of half a second; this keeps every card where it is and says plainly
 * that new ones are coming.
 */
.diwan-shop__grid.is-loading {
	pointer-events: none;
}

.diwan-shop__grid.is-loading .e-loop-item {
	position: relative;
}

.diwan-shop__grid.is-loading .e-loop-item::after,
.diwan-skeleton {
	--diwan-skeleton-ink: #eeeeee;

	animation: diwan-shimmer 1.2s linear infinite;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 70%) 0 0 / 200% 100%,
		linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 0 / 100% 70% no-repeat,
		linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 76% / 82% 12px no-repeat,
		linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 84% / 56% 10px no-repeat,
		linear-gradient(var(--diwan-skeleton-ink), var(--diwan-skeleton-ink)) 0 93% / 34% 12px no-repeat,
		var(--diwan-white, #ffffff);
	content: "";
}

.diwan-shop__grid.is-loading .e-loop-item::after {
	inset: 0;
	position: absolute;
	z-index: 2;
}

/* The row of empty cards Load More puts where the next books will go. */
.diwan-skeleton {
	aspect-ratio: 2 / 4.1;
	inline-size: 100%;
}

[dir="rtl"] .diwan-shop__grid.is-loading .e-loop-item::after,
[dir="rtl"] .diwan-skeleton {
	background-position: 0 0, 100% 0, 100% 76%, 100% 84%, 100% 93%, 0 0;
}

@keyframes diwan-shimmer {
	from {
		background-position-x: 150%, 0, 0, 0, 0, 0;
	}

	to {
		background-position-x: -50%, 0, 0, 0, 0, 0;
	}
}

[dir="rtl"] .diwan-shop__grid.is-loading .e-loop-item::after,
[dir="rtl"] .diwan-skeleton {
	animation-name: diwan-shimmer-rtl;
}

@keyframes diwan-shimmer-rtl {
	from {
		background-position-x: -50%, 100%, 100%, 100%, 100%, 0;
	}

	to {
		background-position-x: 150%, 100%, 100%, 100%, 100%, 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.diwan-shop__grid.is-loading .e-loop-item::after,
	.diwan-skeleton {
		animation: none;
	}
}

/* ------------------------------------------------------------ the chips */

/* What the shelf has been asked, above the books, each one a way to undo it. */
.diwan-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.diwan-chips li {
	margin: 0;
}

.diwan-chip {
	align-items: center;
	background: var(--diwan-grey-50, #fafafa);
	border: 1px solid var(--diwan-border, #e6e6e6);
	color: var(--diwan-text, #000000);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	line-height: 1.2;
	padding: 7px 10px 7px 12px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

[dir="rtl"] .diwan-chip {
	padding: 7px 12px 7px 10px;
}

.diwan-chip:hover,
.diwan-chip:focus-visible {
	background: var(--diwan-papyrus, #e0b070);
	border-color: var(--diwan-papyrus, #e0b070);
	color: var(--diwan-wood, #3b0f00);
}

.diwan-chip__x {
	display: inline-flex;
	opacity: 0.6;
}

.diwan-chip:hover .diwan-chip__x {
	opacity: 1;
}

.diwan-chips__clear {
	color: var(--diwan-text, #000000);
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-chips__clear:hover,
.diwan-chips__clear:focus-visible {
	color: var(--diwan-wood, #3b0f00);
}

.diwan-shop__empty {
	color: var(--diwan-text-muted, #6e6e6e);
	padding-block: 40px;
}

.diwan-shop__empty h2 {
	color: var(--diwan-text, #000000);
	font-size: 18px;
	margin: 0 0 6px;
}

.diwan-shop__empty p {
	margin: 0;
}