/**
 * The categories in the phone's menu (class-ht-categories-menu.php): a cream
 * card each, the round picture in an orange ring (as the «rings» row) and the
 * name; Astra's own arrow moves to the card's far end. Only Astra's phone menu
 * (#ast-hf-mobile-menu) is touched, never the computer's.
 */

/* Cairo, self-hosted (SIL Open Font License, assets/fonts/OFL-Cairo.txt): loaded only when a card shows. */
@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;
}

#ast-hf-mobile-menu {
	--htcat-m-orange: #e2803f;
	--htcat-m-cream: #fdf6f1;
	--htcat-m-line: #ecdccd;
	--htcat-m-ink: #26222f;

	container-type: inline-size;
}

/* The item the categories hang under opens with the menu; Astra's arrow still closes it (its inline style wins). */
#ast-hf-mobile-menu .htcat-mnav-open > .sub-menu {
	display: block;
}

#ast-hf-mobile-menu .htcat-mnav-open > .sub-menu:has(> .menu-item-object-product_cat) {
	padding: 1cqi 4cqi 3cqi;
	border: 0;
}

#ast-hf-mobile-menu .sub-menu > .menu-item-object-product_cat {
	margin: 0 0 2cqi;
	border: 0;
}

/* The card. */
#ast-hf-mobile-menu .menu-item-object-product_cat > .menu-link {
	display: flex;
	gap: 3.6cqi;
	align-items: center;
	padding: 2.4cqi 3cqi;
	border: 1px solid var(--htcat-m-line);
	border-radius: 3cqi;
	background: var(--htcat-m-cream);
	color: var(--htcat-m-ink);
	font: 700 clamp(15px, 4.1cqi, 18px) / 1.35 "HT Cairo", "Cairo", system-ui, sans-serif;
	text-decoration: none;
}

#ast-hf-mobile-menu .menu-item-object-product_cat > .menu-link:hover,
#ast-hf-mobile-menu .menu-item-object-product_cat > .menu-link:focus-visible,
#ast-hf-mobile-menu .menu-item-object-product_cat.current-menu-item > .menu-link {
	border-color: var(--htcat-m-orange);
	color: var(--htcat-m-ink);
}

/* The round picture in an orange ring, a white edge inside it. */
#ast-hf-mobile-menu .htcat-mnav__pic {
	display: block;
	flex: none;
	order: 1;
	inline-size: 14.4cqi;
	block-size: 14.4cqi;
	padding: 2.5px;
	border-radius: 50%;
	background: var(--htcat-m-orange);
}

#ast-hf-mobile-menu .htcat-mnav__img,
#ast-hf-mobile-menu .htcat-mnav__letter {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	border: 2.5px solid #fff;
	border-radius: 50%;
	background: var(--htcat-m-cream);
	object-fit: cover;
}

#ast-hf-mobile-menu .htcat-mnav__letter {
	color: var(--htcat-m-orange);
	font-size: 1.2em;
}

#ast-hf-mobile-menu .htcat-mnav__name {
	order: 2;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* Astra's arrow at the far end, orange. */
#ast-hf-mobile-menu .menu-item-object-product_cat > .menu-link > .ast-icon {
	order: 3;
	margin-inline-start: auto;
	color: var(--htcat-m-orange);
	fill: currentcolor;
}