/**
 * Site footer: "the dove comes home".
 *
 * A golden wave opens it; below, the owner's diamond frame holds the dove's
 * nest, the note the quill writes, the subscription box and the seals.
 * Beside the frame (under it on a phone): what the visitor looked at last,
 * the two menus and the store's email and address. Small golden plaques
 * (WhatsApp, a call, the accounts) and a copyright line close it.
 *
 * Sizes: cqi of the footer outside the frame; inside the frame, which is a
 * container of its own, cqi is a hundredth of the frame's width, so the
 * whole card scales as one piece. One breakpoint (a container query) puts
 * the frame beside the links when there is room.
 *
 * The story plays once per visit when the frame comes into view: the script
 * adds .is-armed (everything waiting), then .is-play, then .is-done. Without
 * the script, or for whoever asks for less motion, the footer is simply
 * complete. Only transforms, opacity and clip-path move.
 */

/* Cairo, self-hosted (SIL Open Font License). */
@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;
}

/* Lalezar, self-hosted (SIL Open Font License): the display face. */
@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;
}

/* Aref Ruqaa, self-hosted (SIL Open Font License): the quill's hand. */
@font-face {
	font-family: "HT Ruqaa";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/aref-ruqaa-arabic-700.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;
}

/* ------------------------------------------------------------------ */
/* The footer                                                          */
/* ------------------------------------------------------------------ */

.ht-foot {
	--htf-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--htf-display: "HT Lalezar", "HT Cairo", system-ui, sans-serif;
	--htf-hand: "HT Ruqaa", "HT Lalezar", "HT Cairo", serif;
	--htf-cream: #fffaf2;
	--htf-ink: #3b2a17;
	--htf-muted: rgb(59 42 23 / 68%);
	--htf-gold: #c4962f;
	--htf-frame: #e0b10b;
	--htf-orange: #ff751f;

	position: relative;
	container: htf / inline-size;
	isolation: isolate;
	overflow: hidden;
	clear: both;
	color: var(--htf-ink);
	background:
		radial-gradient(ellipse 60% 40% at 50% 34%, #fff 0%, rgb(255 255 255 / 0%) 70%),
		var(--htf-cream);
	font-family: var(--htf-font);
	text-align: center;
	direction: rtl;
}

.ht-foot,
.ht-foot *,
.ht-foot *::before,
.ht-foot *::after {
	box-sizing: border-box;
}

.ht-foot img {
	max-inline-size: none;
	block-size: auto;
}

.ht-foot a {
	color: inherit;
	text-decoration: none;
}

.ht-foot .ht-foot__head,
.ht-foot .ht-foot__copy,
.ht-foot .ht-foot__note,
.ht-foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- The wave ---------- */

.ht-foot__wave {
	position: relative;
	block-size: clamp(110px, 30cqi, 300px);
	margin-block-end: -9cqi;
	pointer-events: none;
}

.ht-foot .ht-foot__wave-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	animation: htf-drift 14s ease-in-out infinite alternate;
}

/* A light that runs along the wave. */
.ht-foot__shine {
	position: absolute;
	inset-block: 18% 22%;
	left: -30%;
	inline-size: 26%;
	background: radial-gradient(ellipse 50% 40% at 50% 50%, rgb(255 255 255 / 95%) 0%, rgb(255 236 180 / 55%) 40%, rgb(255 236 180 / 0%) 100%);
	opacity: 0;
}

.ht-foot.is-play .ht-foot__shine {
	animation: htf-shine 2.2s ease-in-out 0.1s both;
}

/* ---------- Layout ---------- */

.ht-foot__inner {
	position: relative;
	display: grid;
	grid-template-areas:
		"seen"
		"card"
		"side";
	grid-template-columns: minmax(0, 1fr);
	gap: 7cqi;
	padding: 0 4cqi 6cqi;
}

@container htf (min-width: 900px) {
	.ht-foot__inner {
		grid-template-areas:
			"card seen"
			"card side";
		grid-template-rows: auto 1fr;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: 3cqi 6cqi;
		max-inline-size: 1240px;
		margin-inline: auto;
		padding: 0 6cqi 3cqi;
	}
}

/* ---------- The frame ---------- */

/* The owner's frame, a container of its own: 1cqi is a hundredth of its width. */
.ht-foot__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	grid-area: card;
	container-type: inline-size;
	inline-size: 92cqi;
	aspect-ratio: 469.36 / 652.66;
	margin-inline: auto;
	padding: 7% 10% 9%;
}

@container htf (min-width: 900px) {
	.ht-foot__card {
		inline-size: min(30cqi, 64svh * 0.719);
	}
}

.ht-foot .ht-foot__frame {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
}

/* The branch hangs from the top corner and the roses grow at the foot, as in the hero, mirrored. */
.ht-foot .ht-foot__branch {
	position: absolute;
	top: -7cqi;
	left: -14cqi;
	z-index: -2;
	inline-size: 58cqi;
	transform-origin: 13% 14%;
	animation: htf-sway 7s ease-in-out infinite alternate;
	pointer-events: none;
}

.ht-foot .ht-foot__roses {
	position: absolute;
	right: -11cqi;
	bottom: -4cqi;
	z-index: 2;
	inline-size: 30cqi;
	transform-origin: 85% 96%;
	animation: htf-sway 6s ease-in-out -2s infinite alternate-reverse;
	pointer-events: none;
}

/* ---------- The nest ---------- */

.ht-foot__nest {
	position: relative;
	flex: none;
	inline-size: 100%;
	block-size: 40cqi;
}

/* The dove: a third of the frame wide, placed by the script. */
.ht-foot__bird {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	inline-size: 40cqi;
	aspect-ratio: 596 / 472;
	opacity: 0;
	transform-origin: 50% 55%;
	pointer-events: none;
	will-change: transform;
}

.ht-foot .ht-foot__dove {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	animation: htf-bob 0.56s infinite;
}

.ht-foot__wing--front {
	transform-origin: 300px 316px;
	animation: htf-wing-front 0.56s infinite;
}

.ht-foot__wing--back {
	transform-origin: 336px 238px;
	animation: htf-wing-back 0.56s infinite;
}

/* Hovering in the nest: slower beats and a gentle float. */
.ht-foot__bird.is-rest .ht-foot__dove,
.ht-foot__bird.is-rest .ht-foot__wing {
	animation-duration: 0.9s;
}

.ht-foot__bird.is-rest .ht-foot__dove {
	animation-name: htf-float;
	animation-duration: 3.2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.ht-foot__bird.is-glide .ht-foot__dove,
.ht-foot__bird.is-glide .ht-foot__wing {
	animation: none;
}

.ht-foot__plumes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ht-foot .ht-foot__plume {
	position: absolute;
	top: 45%;
	left: calc(38% + var(--i) * 8%);
	inline-size: 4.2cqi;
	opacity: 0;
}

.ht-foot.is-plumes .ht-foot__plume {
	animation: htf-plume 2.6s cubic-bezier(0.3, 0.2, 0.6, 1) calc(var(--i) * 0.16s) both;
}

/* ---------- The note the quill writes ---------- */

.ht-foot .ht-foot__note {
	flex: none;
	inline-size: 100%;
	font: 700 min(9cqi, calc(200cqi / var(--n))) / 1.55 var(--htf-hand);
	white-space: nowrap;
}

.ht-foot__line {
	position: relative;
	display: inline-block;
}

.ht-foot__ink {
	display: inline-block;
	padding-inline: 0.15em;
	color: #8a5a12;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.ht-foot__ink {
		background: linear-gradient(100deg, #7a4d0e 0%, #c99a3b 38%, #f0cf7c 50%, #c99a3b 62%, #7a4d0e 100%);
		background-clip: text;
		color: transparent;
	}
}

/* The quill: its nib, at the bottom of the drawing, rests on the line. */
.ht-foot__pen {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ht-foot .ht-foot__quill {
	position: absolute;
	bottom: 18%;
	left: 0;
	inline-size: 1.25em;
	transform: translateX(-30%) rotate(-8deg);
	transform-origin: 30% 100%;
	animation: htf-quill 3s ease-in-out infinite alternate;
}

.ht-foot.is-armed .ht-foot__ink {
	clip-path: inset(0 0 0 100%);
}

.ht-foot.is-armed .ht-foot__pen {
	opacity: 0;
	transform: translateX(100%);
}

/* Right to left, as Arabic is written: the ink appears behind the nib. */
.ht-foot.is-write .ht-foot__ink {
	animation: htf-ink calc(var(--n) * 0.14s + 0.6s) linear both;
}

.ht-foot.is-write .ht-foot__pen {
	animation: htf-pen calc(var(--n) * 0.14s + 0.6s) linear both;
}

.ht-foot.is-write .ht-foot__quill {
	animation: htf-scribble 0.16s ease-in-out infinite alternate;
}

/* ---------- The garland, the subscription box and the seals ---------- */

.ht-foot .ht-foot__garland {
	flex: none;
	inline-size: 76cqi;
	block-size: auto;
	margin-block: 2cqi 4cqi;
}

.ht-foot.is-armed .ht-foot__garland {
	clip-path: inset(0 50%);
}

.ht-foot.is-done .ht-foot__garland,
.ht-foot.is-crown .ht-foot__garland {
	clip-path: inset(0);
	transition: clip-path 1s ease;
}

/* The subscription box, where the golden plaque was: the owner's SureForms
   form inside a golden frame. Its colours and sizes are set here only,
   through SureForms' own variables, so the form looks as it did elsewhere. */
.ht-foot__news {
	position: relative;
	flex: none;
	overflow: hidden;
	inline-size: 92cqi;
	padding: 2.6cqi 2.6cqi 3cqi;
	border: 0.55cqi solid transparent;
	border-radius: 3cqi;
	background:
		linear-gradient(180deg, #fffdf7, #fbf0d6) padding-box,
		linear-gradient(150deg, #f6dc8f, #b98422 45%, #f3d27c 70%, #9c6c18) border-box;
	box-shadow: 0 0.8cqi 2.4cqi rgb(160 110 20 / 22%);
}

.ht-foot .ht-foot__news-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4cqi;
	margin: 0 0 2cqi;
	color: #6b4510;
	font: 400 4.6cqi / 1.3 var(--htf-display);
}

.ht-foot__news-title .ht-foot__ico {
	inline-size: 1.15em;
	stroke: #9a6a17;
	stroke-width: 1.8;
}

/* A gleam crosses the box once the note is written. */
.ht-foot__news::after {
	position: absolute;
	inset-block: 0;
	left: 0;
	inline-size: 30%;
	background: linear-gradient(100deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 75%), rgb(255 255 255 / 0%));
	content: "";
	transform: translateX(-260%) skewX(-18deg);
	pointer-events: none;
}

.ht-foot.is-crown .ht-foot__news::after {
	animation: htf-gleam 1.1s ease-in-out both;
}

.ht-foot .ht-foot__news .srfm-form-container {
	--srfm-bg-color: transparent;
	--srfm-color-scheme-primary: #ff751f;
	--srfm-color-scheme-text-on-primary: #fff;
	--srfm-color-scheme-text: var(--htf-ink);
	--srfm-color-input-text: var(--htf-ink);
	--srfm-color-input-placeholder: rgb(59 42 23 / 48%);
	--srfm-color-input-background: #fff;
	--srfm-color-input-background-hover: #fff;
	--srfm-color-input-border: rgb(196 150 47 / 75%);
	--srfm-color-input-border-hover: var(--htf-gold);
	--srfm-color-input-border-focus-glow: rgb(224 177 11 / 28%);
	--srfm-btn-color-hover: #e9620e;
	--srfm-input-height: 11.5cqi;
	--srfm-input-field-padding: 0 1.8cqi;
	--srfm-input-field-font-size: max(16px, 4cqi);
	--srfm-input-field-line-height: 1.4;
	--srfm-input-field-margin-top: 0;
	--srfm-input-field-margin-bottom: 0;
	--srfm-input-field-border-radius: 2.2cqi;
	--srfm-btn-border-radius: 2.2cqi;
	--srfm-error-font-size: 3cqi;
	--srfm-error-line-height: 1.4;
	--srfm-row-gap-between-blocks: 1.4cqi;
	--srfm-column-gap-between-blocks: 1.6cqi;

	font-family: var(--htf-font);
	text-align: start;
}

/* The field and the button side by side, on a phone too. */
.ht-foot .ht-foot__news .srfm-form-container .srfm-form {
	align-items: flex-start;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-block {
	margin: 0;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-block-width-75 {
	flex: 1 1 0;
	inline-size: auto;
	min-inline-size: 0;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-block-width-25 {
	flex: none;
	inline-size: auto;
	min-inline-size: 0;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-block .srfm-error-wrap {
	block-size: auto;
}

/* An address is written left to right. */
.ht-foot .ht-foot__news .srfm-form-container .srfm-input-email {
	direction: ltr;
	text-align: left;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-form .srfm-button {
	block-size: var(--srfm-input-height);
	margin: 0;
	padding: 0 2.4cqi;
	border: 0;
	background: linear-gradient(180deg, #ff9445 0%, #ff751f 55%, #e9620e 100%);
	box-shadow: 0 0.6cqi 1.4cqi rgb(233 98 14 / 32%), inset 0 -0.4cqi 0 rgb(0 0 0 / 12%);
	color: #fff;
	font: 800 max(12px, 3.8cqi) / 1 var(--htf-font);
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-form .srfm-button:hover,
.ht-foot .ht-foot__news .srfm-form-container .srfm-form .srfm-button:focus-visible {
	background: linear-gradient(180deg, #ff8a30 0%, #f0670f 55%, #d4560a 100%);
	transform: translateY(-1px);
}

/* SureForms' own messages, smaller to fit the frame, each in the direction
   of its own language. */
.ht-foot .ht-foot__news .srfm-form-container .srfm-error-message,
.ht-foot .ht-foot__news .srfm-form-container .srfm-success-box-description {
	unicode-bidi: plaintext;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-form p.srfm-common-error-message {
	padding: 1.4cqi 2cqi;
	font-size: 3cqi;
	line-height: 1.4;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-success-box {
	min-block-size: 0;
	color: var(--htf-ink);
	font: 600 3.8cqi / 1.5 var(--htf-font);
	text-align: center;
}

.ht-foot .ht-foot__news .srfm-form-container .srfm-success-box .srfm-success-box-description {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ht-foot__seals {
	display: flex;
	flex: none;
	justify-content: center;
	gap: 6cqi;
	margin-block-start: 4cqi;
}

.ht-foot__seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4cqi;
	max-inline-size: 22cqi;
}

.ht-foot__coin {
	display: grid;
	place-items: center;
	inline-size: 12cqi;
	aspect-ratio: 1;
	border: 0.6cqi solid var(--htf-frame);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fffdf6 0%, #fbeccb 55%, #f0d38f 100%);
	box-shadow: 0 0.6cqi 1.6cqi rgb(160 110 20 / 25%), inset 0 0 0 0.5cqi #fff8e4;
}

.ht-foot.is-crown .ht-foot__coin {
	animation: htf-coin 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) calc(0.25s + var(--i) * 0.18s) both;
}

.ht-foot__coin .ht-foot__ico {
	inline-size: 62%;
	stroke: #a0701a;
	stroke-width: 1.6;
}

.ht-foot__seal-text {
	color: var(--htf-ink);
	font: 700 3.3cqi / 1.3 var(--htf-font);
}

.ht-foot__ico {
	inline-size: 1.4em;
	aspect-ratio: 1;
	fill: none;
	stroke: var(--htf-gold);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Seen lately ---------- */

.ht-foot__seen {
	grid-area: seen;
}

.ht-foot__seen[hidden] {
	display: none;
}

.ht-foot .ht-foot__seen-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3cqi;
	margin-block-start: 3cqi;
}

.ht-foot__seen-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1cqi;
}

/* A small gold oval, like the medallion of the hero. */
.ht-foot__oval {
	display: block;
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 3 / 4;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(150deg, #f6dc8f, #b98422 45%, #f3d27c 70%, #9c6c18);
}

.ht-foot .ht-foot__oval img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	background: #fff;
	object-fit: cover;
}

.ht-foot__seen-name {
	overflow: hidden;
	max-inline-size: 100%;
	color: var(--htf-ink);
	font: 600 clamp(11px, 3cqi, 14px) / 1.3 var(--htf-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ht-foot__seen-price {
	color: #b4470d;
	font: 800 clamp(11px, 3.1cqi, 15px) / 1.2 var(--htf-font);
}

/* ---------- Links and contacts ---------- */

.ht-foot__side {
	display: flex;
	flex-direction: column;
	gap: 6cqi;
	grid-area: side;
}

.ht-foot__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5cqi;
	text-align: start;
}

.ht-foot .ht-foot__head {
	position: relative;
	margin-block-end: 3cqi;
	padding-block-end: 1.6cqi;
	color: var(--htf-ink);
	font: 400 clamp(18px, 5.4cqi, 26px) / 1.3 var(--htf-display);
}

.ht-foot .ht-foot__head::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 2.6em;
	block-size: 2px;
	background: linear-gradient(to left, var(--htf-frame), rgb(224 177 11 / 0%));
	content: "";
}

.ht-foot__seen .ht-foot__head::after {
	inset-inline-start: calc(50% - 1.3em);
	background: var(--htf-frame);
}

.ht-foot__links a {
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding-block: 0.38em;
	color: var(--htf-ink);
	font: 600 clamp(14px, 3.9cqi, 17px) / 1.4 var(--htf-font);
	transition: color 0.2s ease, transform 0.2s ease;
}

/* A diamond with a dot, from the owner's frame. */
.ht-foot__links a::before {
	flex: none;
	inline-size: 0.5em;
	aspect-ratio: 1;
	border: 1.5px solid var(--htf-frame);
	background: radial-gradient(circle, var(--htf-frame) 0 30%, transparent 34%);
	content: "";
	transform: rotate(45deg);
}

.ht-foot__links a:hover,
.ht-foot__links a:focus-visible {
	color: #9a6a17;
	transform: translateX(-0.25em);
}

.ht-foot__reach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4cqi;
}

.ht-foot__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2cqi 6cqi;
}

.ht-foot__contact li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font: 600 clamp(13px, 3.6cqi, 16px) / 1.4 var(--htf-font);
}

@container htf (min-width: 900px) {
	.ht-foot__side {
		gap: 3cqi;
	}

	.ht-foot__nav {
		gap: 3cqi;
	}

	.ht-foot .ht-foot__head {
		margin-block-end: 1cqi;
		padding-block-end: 0.6cqi;
		font-size: clamp(20px, 1.8cqi, 28px);
	}

	.ht-foot__links a {
		font-size: clamp(15px, 1.2cqi, 18px);
	}

	.ht-foot__reach {
		align-items: flex-start;
		gap: 1.6cqi;
	}

	.ht-foot__contact {
		justify-content: flex-start;
		gap: 1cqi 2.4cqi;
	}

	.ht-foot__contact li {
		font-size: clamp(14px, 1.1cqi, 17px);
	}

	.ht-foot__seen .ht-foot__head::after {
		inset-inline-start: 0;
		background: linear-gradient(to left, var(--htf-frame), rgb(224 177 11 / 0%));
	}

	.ht-foot__seen {
		text-align: start;
	}

	.ht-foot .ht-foot__seen-list {
		gap: 1.6cqi;
		margin-block-start: 1.2cqi;
		max-inline-size: 640px;
	}

	.ht-foot__seen-name,
	.ht-foot__seen-price {
		font-size: clamp(12px, 1cqi, 15px);
	}
}

/* ---------- The small plaques ---------- */

/* WhatsApp, a call and the accounts, each on the golden plaque of PDF 8.
   Three to a line on a phone, the last line centred; each plaque is a
   container of its own, so its word grows with it. An account with no link
   yet is a button: a press shows «قريبًا» above it for a moment. */
.ht-foot .ht-foot__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.4cqi 2cqi;
	max-inline-size: 92cqi;
	margin: 0 auto 4cqi;
}

.ht-foot__btns li {
	position: relative;
	flex: 0 0 calc((100% - 4cqi) / 3);
	container-type: inline-size;
}

.ht-foot .ht-foot__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4cqi;
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 900 / 438;
	padding: 0 0 6cqi;
	background: url("../images/footer/plaque.webp") center / 100% 100% no-repeat;
	color: #6b4510;
	font: 400 12.5cqi / 1.2 var(--htf-display);
	white-space: nowrap;
	transition: transform 0.25s ease;
}

/* The theme's own button look stays out of the plaque. */
.ht-foot button.ht-foot__btn {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ht-foot__soon {
	position: absolute;
	bottom: calc(100% - 0.4em);
	left: 50%;
	z-index: 2;
	padding: 0.2em 0.9em 0.3em;
	border-radius: 999px;
	background: var(--htf-ink);
	color: #fff4da;
	font: 700 11cqi / 1.4 var(--htf-font);
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 0.4em) scale(0.9);
	transition: opacity 0.2s ease, transform 0.25s ease;
	pointer-events: none;
}

.ht-foot__soon::after {
	position: absolute;
	top: 100%;
	left: 50%;
	border: 0.35em solid transparent;
	border-block-start-color: var(--htf-ink);
	content: "";
	transform: translateX(-50%);
}

.ht-foot__btns li.is-soon .ht-foot__soon {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

.ht-foot__btn .ht-foot__ico {
	flex: none;
	inline-size: 1.2em;
	stroke: #9a6a17;
	stroke-width: 1.9;
}

.ht-foot .ht-foot__btn:hover,
.ht-foot .ht-foot__btn:focus-visible {
	color: #4a2f08;
	transform: scale(1.05);
}

.ht-foot__btn::after {
	position: absolute;
	inset-block: 6% 18%;
	left: 0;
	inline-size: 30%;
	background: linear-gradient(100deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 75%), rgb(255 255 255 / 0%));
	content: "";
	transform: translateX(-260%) skewX(-18deg);
	pointer-events: none;
}

.ht-foot .ht-foot__btn:hover::after {
	animation: htf-gleam 1.1s ease-in-out both;
}

@container htf (min-width: 900px) {
	.ht-foot .ht-foot__btns {
		gap: 1.2cqi;
		max-inline-size: none;
		margin-block-end: 1.4cqi;
	}

	.ht-foot__btns li {
		flex-basis: clamp(110px, 9cqi, 150px);
	}
}

/* ---------- The last line ---------- */

.ht-foot__base {
	position: relative;
	padding: 4cqi 4cqi 5cqi;
	border-block-start: 1px solid rgb(196 150 47 / 30%);
}

.ht-foot .ht-foot__copy {
	color: var(--htf-muted);
	font: 600 clamp(12px, 3.3cqi, 15px) / 1.6 var(--htf-font);
}

/* The hanging star of the hero, swinging from the top of the frame. */
.ht-foot .ht-foot__star {
	position: absolute;
	top: 2.2%;
	left: 24%;
	z-index: 3;
	inline-size: 4.2cqi;
	transform-origin: 50% 0;
	animation: htf-swing 3.6s ease-in-out infinite alternate;
	pointer-events: none;
}

@container htf (min-width: 900px) {
	.ht-foot__base {
		padding: 1.6cqi 6cqi 2cqi;
	}

	.ht-foot .ht-foot__copy {
		font-size: clamp(13px, 1cqi, 15px);
	}
}

/* Nothing moves while the footer is off screen. */
.ht-foot.is-away *,
.ht-foot.is-away *::before,
.ht-foot.is-away *::after {
	animation-play-state: paused !important;
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */

@keyframes htf-drift {
	from {
		transform: translateX(-1.2%) scaleY(0.97);
	}

	to {
		transform: translateX(1.2%) scaleY(1.03);
	}
}

@keyframes htf-shine {
	0% {
		opacity: 0;
		transform: translateX(0);
	}

	15% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateX(560%);
	}
}

@keyframes htf-sway {
	from {
		transform: rotate(-1.4deg);
	}

	to {
		transform: rotate(1.4deg);
	}
}

@keyframes htf-swing {
	from {
		transform: rotate(-4deg);
	}

	to {
		transform: rotate(4deg);
	}
}

@keyframes htf-ink {
	from {
		clip-path: inset(0 0 0 100%);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes htf-pen {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}

	6% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* The nib moving up and down as letters are drawn. */
@keyframes htf-scribble {
	from {
		transform: translate(-30%, 6%) rotate(-12deg);
	}

	to {
		transform: translate(-30%, -10%) rotate(-3deg);
	}
}

@keyframes htf-quill {
	from {
		transform: translateX(-30%) rotate(-10deg);
	}

	to {
		transform: translate(-30%, -6%) rotate(-4deg);
	}
}

@keyframes htf-gleam {
	from {
		transform: translateX(-260%) skewX(-18deg);
	}

	to {
		transform: translateX(380%) skewX(-18deg);
	}
}

@keyframes htf-coin {
	from {
		transform: perspective(40cqi) rotateY(0);
	}

	to {
		transform: perspective(40cqi) rotateY(360deg);
	}
}

@keyframes htf-plume {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(calc((var(--i) - 1.5) * 18deg));
	}

	12% {
		opacity: 1;
	}

	55% {
		transform: translate(calc((var(--i) - 1.5) * 4cqi), 30cqi) rotate(calc((1.5 - var(--i)) * 16deg + 25deg));
	}

	88% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
		transform: translate(calc((1.5 - var(--i)) * 3cqi), 62cqi) rotate(calc((var(--i) - 1.5) * 14deg - 15deg));
	}
}

@keyframes htf-bob {
	0%,
	100% {
		transform: translateY(1.3%);
	}

	36% {
		transform: translateY(-1.7%);
	}
}

@keyframes htf-float {
	from {
		transform: translateY(2.5%);
	}

	to {
		transform: translateY(-3.5%);
	}
}

@keyframes htf-wing-front {
	0% {
		transform: rotate(-18deg) scaleY(1) rotate(18deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4);
	}

	36% {
		transform: rotate(-18deg) scaleY(-0.3) rotate(18deg);
		animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
	}

	100% {
		transform: rotate(-18deg) scaleY(1) rotate(18deg);
	}
}

@keyframes htf-wing-back {
	0% {
		transform: rotate(-30deg) scaleY(1) rotate(30deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4);
	}

	38% {
		transform: rotate(-30deg) scaleY(0.12) rotate(30deg);
		animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
	}

	100% {
		transform: rotate(-30deg) scaleY(1) rotate(30deg);
	}
}

/* ------------------------------------------------------------------ */
/* Less motion                                                         */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ht-foot *,
	.ht-foot *::before,
	.ht-foot *::after {
		animation: none !important;
		transition: none !important;
	}

	.ht-foot .ht-foot__ink,
	.ht-foot .ht-foot__garland {
		clip-path: none;
	}

	.ht-foot .ht-foot__pen {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* French and English pages (v76): left to right                       */
/* ------------------------------------------------------------------ */

/* Playpen Sans, self-hosted (assets/fonts/OFL-PlaypenSans.txt): the hand for Latin letters, which Aref Ruqaa has not. */
@font-face {
	font-family: "HT Playpen";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/playpen-latin-500.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;
}

:root:not([dir="rtl"]) .ht-foot {
	--htf-hand: "HT Ruqaa", "HT Playpen", "HT Lalezar", "HT Cairo", serif;

	direction: ltr;
}

:root:not([dir="rtl"]) .ht-foot .ht-foot__note {
	font-weight: 500;
}

/* The quill writes from the line's left end to its right end, and rests there. */
:root:not([dir="rtl"]) .ht-foot__pen {
	transform: translateX(100%);
}

:root:not([dir="rtl"]) .ht-foot.is-armed .ht-foot__ink {
	clip-path: inset(0 100% 0 0);
}

:root:not([dir="rtl"]) .ht-foot.is-armed .ht-foot__pen {
	transform: translateX(0);
}

:root:not([dir="rtl"]) .ht-foot.is-write .ht-foot__ink {
	animation-name: htf-ink-ltr;
}

:root:not([dir="rtl"]) .ht-foot.is-write .ht-foot__pen {
	animation-name: htf-pen-ltr;
}

@keyframes htf-ink-ltr {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes htf-pen-ltr {
	0% {
		opacity: 0;
		transform: translateX(0);
	}

	6% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root:not([dir="rtl"]) .ht-foot .ht-foot__ink {
		clip-path: none;
	}

	:root:not([dir="rtl"]) .ht-foot .ht-foot__pen {
		opacity: 1;
		transform: translateX(100%);
	}
}

/* ---------- [ht_contact]: the «اتصل بنا» page (v80) ---------- */

/* The footer's ways to reach the store as a list of cream cards with a gold edge, in the page's direction. */
.ht-ways {
	--htw-ink: #3b2a17;
	--htw-cream: #fffaf2;
	--htw-gold: #e0b10b;
	--htw-orange: #ff751f;

	container-type: inline-size;
	margin-block: 1.5em;
	font-family: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

.ht-ways__list {
	display: grid;
	gap: clamp(8px, 2.4cqi, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ht-ways__list li {
	margin: 0;
}

.ht-ways__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.7em;
	align-items: center;
	padding: clamp(12px, 3.4cqi, 18px) clamp(14px, 4cqi, 22px);
	border: 1.5px solid var(--htw-gold);
	border-radius: 16px;
	background: var(--htw-cream);
	color: var(--htw-ink);
	font-size: clamp(15px, 3.9cqi, 18px);
	line-height: 1.4;
	text-decoration: none;
}

a.ht-ways__item:is(:hover, :focus-visible) {
	border-color: var(--htw-orange);
	color: var(--htw-ink);
}

a.ht-ways__item:focus-visible {
	outline: 2px solid var(--htw-ink);
	outline-offset: 2px;
}

.ht-ways__ico {
	flex: none;
	inline-size: 1.4em;
	block-size: 1.4em;
	fill: none;
	stroke: var(--htw-orange);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-ways__label {
	font-weight: 800;
}

.ht-ways__value {
	margin-inline-start: auto;
	font-weight: 600;
	overflow-wrap: anywhere;
}