/**
 * HT Categories, the visitor's side.
 *
 * - .htcat: the categories' row. Four shapes: arches (a number above, the
 *   category's icon under the picture, after the owner's picture), orange
 *   rings, stories, squares with an orange sticker. Arches are a
 *   grid (or a row the finger scrolls on a phone); the other shapes always a
 *   row that scrolls, centred when it fits. Not .htc: that is the theme's
 *   comments panel (comments.css, position: fixed over the whole screen);
 *   when its stylesheet came in, at the first touch on a comment bubble, the
 *   row took that rule and floated over the page (1.0.0 to 1.1.1).
 * - .htc-head: «الصورة بجانب الاسم والوصف», where Astra's title bar was.
 * - body.htc-bg: «الصورة خلفية الشريط», on Astra's own title bar.
 *
 * The row's sizes follow the screen (vw), the header's its own width (vw);
 * the store's orange, cream, ink and the footer's gold.
 *
 * Movement, on devices with a mouse only (hover: hover, pointer: fine): a
 * picture lifts under the mouse, but not while the page scrolls
 * (html.htc-scrolling), and pictures fade in once loaded (.htcat--fade-on);
 * categories.js sets both there and nowhere else. On a phone nothing in the
 * row moves, changes or animates while the page scrolls, the row is not a
 * size container and its scrolling strip takes no style change mid-scroll.
 */

/* Cairo and Lalezar, self-hosted (SIL Open Font License, assets/fonts/OFL-*.txt). */
@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.htcat,
.htc-head,
body.htc-bg {
	--htc-orange: #e2803f;
	--htc-orange-d: #c8642a;
	--htc-cream: #fdf6f1;
	--htc-ink: #26222f;
	--htc-soft: #6f655d;
	--htc-gold: #c4962f;
	--htc-gold-l: #e6c66e;
	--htc-font: "HT Cairo", "Cairo", system-ui, sans-serif;
	--htc-display: "HT Lalezar", "Lalezar", "HT Cairo", sans-serif;
}

/* ---------- The row ---------- */

.htcat {
	margin: 0 0 clamp(20px, 5vw, 36px);
	font-family: var(--htc-font);
}

.htcat .htcat__title {
	margin: 0 0 clamp(12px, 3vw, 20px);
	color: var(--htc-ink);
	font: 400 clamp(22px, 5.2vw, 32px) / 1.3 var(--htc-display);
	text-align: center;
}

.htcat .htcat__title::after {
	display: block;
	inline-size: 56px;
	block-size: 4px;
	margin: 6px auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--htc-gold), var(--htc-orange));
	content: "";
}

.htcat__wrap {
	position: relative;
}

.htcat .htcat__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.htcat .htcat__item {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

.htcat .htcat__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--htc-ink);
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.htcat .htcat__link:focus-visible {
	border-radius: 14px;
	outline: 2px solid var(--htc-orange);
	outline-offset: 4px;
}

.htcat .htcat__pic {
	position: relative;
	display: block;
	inline-size: 100%;
	overflow: hidden;
	background: var(--htc-cream);
}

.htcat .htcat__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
	.htcat .htcat__pic {
		transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	}

	.htcat .htcat__img {
		transition: opacity 0.35s ease, transform 0.45s ease;
	}

	.htcat.htcat--fade-on .htcat__img:not(.is-loaded) {
		opacity: 0;
	}

	/* While the page scrolls, no arch rises under a still mouse. */
	html.htc-scrolling .htcat .htcat__link:hover .htcat__pic,
	html.htc-scrolling .htcat .htcat__link:hover .htcat__img {
		transform: none;
	}
}

.htcat .htcat__letter {
	display: grid;
	inline-size: 100%;
	block-size: 100%;
	place-items: center;
	color: var(--htc-orange);
	font: 400 clamp(26px, 9vw, 48px) / 1 var(--htc-display);
}

.htcat .htcat__name {
	display: -webkit-box;
	max-inline-size: 100%;
	margin-block-start: 8px;
	overflow: hidden;
	font: 700 clamp(13px, 3.4vw, 16px) / 1.35 var(--htc-font);
	word-break: normal;
	overflow-wrap: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.htcat .htcat__sub {
	display: block;
	margin-block-start: 2px;
	color: var(--htc-soft);
	font: 600 clamp(11px, 2.8vw, 13px) / 1.35 var(--htc-font);
}

.htcat .htcat__link:focus-visible .htcat__img {
	transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
	.htcat .htcat__link:hover .htcat__img {
		transform: scale(1.04);
	}
}

.htcat .htcat__item.is-current .htcat__name {
	color: var(--htc-orange-d);
}

/* The home page is full width (Spectra): the row keeps to the content's width. */
.htcat.htcat--at-home {
	box-sizing: border-box;
	max-inline-size: 1200px;
	margin: clamp(22px, 6vw, 44px) auto;
	padding-inline: 16px;
}

/* A row the finger scrolls: rings, stories, squares; arches when chosen for phones. */
.htcat--scroller .htcat__list {
	display: flex;
	gap: clamp(12px, 3.6vw, 24px);
	padding: 6px 4px 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 4px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.htcat--scroller .htcat__list::-webkit-scrollbar {
	display: none;
}

.htcat--scroller .htcat__item {
	flex: 0 0 clamp(86px, 23vw, 116px);
	scroll-snap-align: start;
}

/* In the middle when the strip fits, from its edge when it scrolls. */
.htcat--scroller .htcat__item:first-child {
	margin-inline-start: auto;
}

.htcat--scroller .htcat__item:last-child {
	margin-inline-end: auto;
}

.htcat--ring .htcat__name,
.htcat--stories .htcat__name {
	font-size: clamp(12px, 3.3vw, 15px);
}

.htcat .htcat__arrow {
	position: absolute;
	inset-block-start: 34%;
	z-index: 2;
	display: grid;
	inline-size: 38px;
	block-size: 38px;
	margin: 0;
	padding: 0;
	place-items: center;
	border: 1px solid #f0e2d4;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 12px rgb(38 34 47 / 0.14);
	color: var(--htc-orange);
	cursor: pointer;
	transform: translateY(-50%);
}

.htcat .htcat__arrow[hidden] {
	display: none;
}

.htcat .htcat__arrow svg {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.4;
}

.htcat .htcat__arrow:hover,
.htcat .htcat__arrow:focus-visible {
	background: var(--htc-orange);
	color: #fff;
}

.htcat .htcat__arrow--prev {
	inset-inline-start: -6px;
}

.htcat .htcat__arrow--next {
	inset-inline-end: -6px;
}

@media (hover: none) {
	.htcat .htcat__arrow {
		display: none;
	}
}

/* ---------- Arches ---------- */

/* Three in a line; a shorter last line stays in the middle. */
.htcat--arches .htcat__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(18px, 5vw, 34px) clamp(10px, 3vw, 24px);
}

.htcat--arches .htcat__item {
	flex: 0 0 calc((100% - 2 * clamp(10px, 3vw, 24px)) / 3);
}

.htcat--arches.htcat--scroller .htcat__list {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: clamp(12px, 3.6vw, 22px);
}

.htcat--arches.htcat--scroller .htcat__item {
	flex-basis: clamp(116px, 34vw, 200px);
}

@media (min-width: 700px) {
	.htcat--arches .htcat__list,
	.htcat--arches.htcat--scroller .htcat__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 34px 22px;
		padding: 0;
		overflow: visible;
	}

	.htcat--arches .htcat__item,
	.htcat--arches.htcat--scroller .htcat__item {
		flex: 0 0 calc((100% - 3 * 22px) / 4);
		margin-inline: 0;
	}
}

@media (min-width: 1100px) {
	.htcat--arches .htcat__item,
	.htcat--arches.htcat--scroller .htcat__item {
		flex-basis: calc((100% - 4 * 22px) / 5);
	}
}

.htcat--arches .htcat__num {
	display: grid;
	inline-size: clamp(28px, 7.5vw, 40px);
	margin-block-end: 8px;
	place-items: center;
	border-radius: 50%;
	background: var(--htc-orange);
	box-shadow: 0 2px 6px rgb(226 128 63 / 0.35);
	color: #fff;
	font: 400 clamp(13px, 3.4vw, 18px) / 1 var(--htc-display);
	aspect-ratio: 1;
}

.htcat--arches .htcat__pic {
	border: 2px solid var(--htc-gold);
	border-radius: 999px 999px 8px 8px;
	box-shadow: 0 8px 18px rgb(38 34 47 / 0.08);
	aspect-ratio: 3 / 4;
}

.htcat--arches .htcat__icon {
	position: relative;
	z-index: 1;
	display: grid;
	inline-size: clamp(36px, 10vw, 56px);
	margin-block-start: calc(clamp(36px, 10vw, 56px) / -2);
	place-items: center;
	border: 3px solid var(--htc-cream);
	border-radius: 50%;
	background: var(--htc-orange);
	box-shadow: 0 3px 8px rgb(38 34 47 / 0.16);
	color: #fff;
	aspect-ratio: 1;
}

.htcat--arches .htcat__icon .htc-i {
	inline-size: 56%;
	block-size: 56%;
}

.htcat--arches .htcat__name {
	margin-block-start: 10px;
}

.htcat--arches .htcat__link:focus-visible .htcat__pic {
	box-shadow: 0 14px 24px rgb(38 34 47 / 0.14);
	transform: translateY(-4px);
}

@media (hover: hover) and (pointer: fine) {
	.htcat--arches .htcat__link:hover .htcat__pic {
		box-shadow: 0 14px 24px rgb(38 34 47 / 0.14);
		transform: translateY(-4px);
	}
}

.htcat--arches .htcat__item.is-current .htcat__pic {
	border-color: var(--htc-orange);
	box-shadow: 0 0 0 3px rgb(226 128 63 / 0.28), 0 8px 18px rgb(38 34 47 / 0.08);
}

/* ---------- Rings and stories ---------- */

.htcat--ring .htcat__pic,
.htcat--stories .htcat__pic {
	padding: 3px;
	border-radius: 50%;
	background: var(--htc-orange);
	aspect-ratio: 1;
}

.htcat--stories .htcat__pic {
	padding: 3.5px;
	background: conic-gradient(from 210deg, var(--htc-orange), #f0a35e, var(--htc-gold-l), var(--htc-gold), var(--htc-orange));
}

.htcat--ring .htcat__img,
.htcat--stories .htcat__img,
.htcat--ring .htcat__letter,
.htcat--stories .htcat__letter {
	box-sizing: border-box;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--htc-cream);
}

.htcat--ring .htcat__item.is-current .htcat__pic,
.htcat--stories .htcat__item.is-current .htcat__pic {
	box-shadow: 0 0 0 3px rgb(226 128 63 / 0.3);
}

@media (hover: hover) and (pointer: fine) {
	.htcat--ring .htcat__link:hover .htcat__pic,
	.htcat--stories .htcat__link:hover .htcat__pic {
		transform: translateY(-3px);
	}
}

/* ---------- Squares with a sticker ---------- */

.htcat--tiles .htcat__item {
	flex-basis: clamp(96px, 27vw, 140px);
}

.htcat--tiles .htcat__pic {
	border: 2.5px solid var(--htc-orange);
	border-radius: 16px;
	aspect-ratio: 1;
}

.htcat--tiles .htcat__name {
	position: relative;
	z-index: 1;
	display: block;
	max-inline-size: 94%;
	margin-block-start: -14px;
	padding: 4px 10px;
	overflow: visible;
	background: var(--htc-orange);
	box-shadow: 4px 4px 0 var(--htc-ink);
	color: #fff;
	font-weight: 800;
	white-space: nowrap;
	transform: skewX(-9deg);
}

.htcat--tiles .htcat__name > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: skewX(9deg);
}

.htcat--tiles .htcat__sub {
	margin-block-start: 8px;
}

.htcat--tiles .htcat__item.is-current .htcat__pic {
	border-color: var(--htc-ink);
}

.htcat--tiles .htcat__item.is-current .htcat__name {
	background: var(--htc-ink);
	box-shadow: 4px 4px 0 var(--htc-orange);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.htcat--tiles .htcat__link:hover .htcat__pic {
		transform: translateY(-3px);
	}
}

/* ---------- «الصورة بجانب الاسم والوصف» ---------- */

body.htc-has-head .ast-archive-entry-banner,
body.htc-has-head section.ast-archive-description {
	display: none !important;
}

.htc-head {
	container-type: inline-size;
	padding: clamp(24px, 6vw, 56px) 16px;
	border-block-end: 1px solid #f0e4d8;
	background: var(--htc-cream);
	font-family: var(--htc-font);
}

.htc-head .htc-head__in {
	display: grid;
	max-inline-size: 1180px;
	margin: 0 auto;
	gap: clamp(18px, 4cqi, 48px);
	align-items: center;
	justify-items: center;
	text-align: center;
}

@container (min-width: 700px) {
	.htc-head .htc-head__in {
		grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
		justify-items: start;
		text-align: start;
	}
}

.htc-head .htc-head__pic {
	inline-size: min(82%, 440px);
	margin: 0;
	background: #fff;
}

.htc-head .htc-head__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

.htc-head .htc-head__text {
	min-inline-size: 0;
}

.htc-head .htc-head__title {
	margin: 0;
	color: var(--htc-ink);
	font: 400 clamp(30px, 7cqi, 54px) / 1.2 var(--htc-display);
}

.htc-head .htc-head__title::after {
	display: block;
	inline-size: 64px;
	block-size: 4px;
	margin-block-start: 10px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--htc-gold), var(--htc-orange));
	content: "";
}

.htc-head .htc-head__desc {
	max-inline-size: 56ch;
	margin-block-start: 14px;
	color: var(--htc-soft);
	font: 500 clamp(15px, 2.4cqi, 18px) / 1.8 var(--htc-font);
}

.htc-head .htc-head__desc p {
	margin: 0 0 0.6em;
}

.htc-head .htc-head__count {
	display: inline-block;
	margin: 12px 0 0;
	padding: 4px 14px;
	border: 1.5px solid var(--htc-orange);
	border-radius: 999px;
	background: #fff;
	color: var(--htc-orange-d);
	font: 700 14px / 1.6 var(--htc-font);
}

@container (max-width: 699.98px) {
	.htc-head .htc-head__title::after {
		margin-inline: auto;
	}

	.htc-head .htc-head__desc {
		margin-inline: auto;
	}
}

/* Orange frame, like the product cards. */
.htc-head--frame .htc-head__pic {
	padding: 6px;
	border: 3px solid var(--htc-orange);
	border-radius: 22px;
	aspect-ratio: 4 / 3;
}

.htc-head--frame .htc-head__img {
	border-radius: 15px;
}

/* A circle in an orange ring. */
.htc-head--circle .htc-head__pic {
	inline-size: min(58%, 340px);
	padding: 7px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--htc-orange), 0 14px 30px rgb(38 34 47 / 0.12);
	aspect-ratio: 1;
}

.htc-head--circle .htc-head__img {
	border-radius: 50%;
}

/* ---------- «الصورة خلفية الشريط» (Astra's own bar) ---------- */

body.htc-bg .ast-archive-entry-banner[data-post-type] {
	position: relative;
	z-index: 0;
	min-block-size: clamp(220px, 52vw, 300px);
	background: var(--htc-cream) var(--htc-banner-s) center / cover no-repeat;
}

@media (min-width: 768px) {
	body.htc-bg .ast-archive-entry-banner[data-post-type] {
		min-block-size: clamp(280px, 28vw, 420px);
		background-image: var(--htc-banner-l);
	}
}

body.htc-bg .ast-archive-entry-banner[data-post-type]::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
}

body.htc-bg .ast-archive-entry-banner[data-post-type] .ast-container {
	position: relative;
}

body.htc-bg .ast-archive-entry-banner[data-post-type] .ast-container h1 {
	margin: 0;
	font: 400 clamp(34px, 6vw, 60px) / 1.2 var(--htc-display);
}

body.htc-bg .ast-archive-entry-banner[data-post-type] .ast-container p {
	max-inline-size: 60ch;
	margin: 10px auto 0;
	font: 600 clamp(15px, 2vw, 19px) / 1.7 var(--htc-font);
}

/* Sunset: a dark shade from the bottom, the name in white. */
body.htc-bg--sunset .ast-archive-entry-banner[data-post-type]::before {
	background: linear-gradient(to top, rgb(38 34 47 / 0.84), rgb(38 34 47 / 0.35) 65%, rgb(38 34 47 / 0.12));
}

body.htc-bg--sunset .ast-archive-entry-banner[data-post-type] .ast-container h1 {
	color: #fff;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.35);
}

body.htc-bg--sunset .ast-archive-entry-banner[data-post-type] .ast-container p {
	color: var(--htc-cream);
}

/* Gold plaque: the name and description on a cream plaque in a double gold line. */
body.htc-bg--plaque .ast-archive-entry-banner[data-post-type]::before {
	background: rgb(38 34 47 / 0.12);
}

body.htc-bg--plaque .ast-archive-entry-banner[data-post-type] .ast-container {
	inline-size: auto;
	max-inline-size: min(92%, 640px);
	margin-inline: auto;
	padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 40px);
	border: 4px double var(--htc-gold);
	background: rgb(253 246 241 / 0.95);
	box-shadow: 0 16px 40px rgb(38 34 47 / 0.2);
	outline: 1px solid rgb(196 150 47 / 0.55);
	outline-offset: -11px;
}

body.htc-bg--plaque .ast-archive-entry-banner[data-post-type] .ast-container h1 {
	color: var(--htc-ink);
}

body.htc-bg--plaque .ast-archive-entry-banner[data-post-type] .ast-container p {
	color: var(--htc-soft);
}

@media (prefers-reduced-motion: reduce) {
	.htcat .htcat__pic,
	.htcat .htcat__img {
		transition: none;
	}

	.htcat .htcat__link:hover .htcat__pic,
	.htcat .htcat__link:hover .htcat__img,
	.htcat .htcat__link:focus-visible .htcat__pic,
	.htcat .htcat__link:focus-visible .htcat__img {
		transform: none !important;
	}
}