/**
 * Menu do celular — [drope_menu_mobile].
 *
 * Vive dentro do off-canvas do Elementor, que já dá o painel, o véu e o botão
 * de fechar. Aqui é só o conteúdo.
 *
 * Complemento de home-blocks.css: os tokens (--hb-*) e os ícones vêm de lá. O
 * escopo .dmm existe porque este bloco é injetado num container do Elementor,
 * que tem estilos próprios de link e de lista chegando de todo lado.
 *
 * A armadilha de sempre: o kit do Elementor estiliza `a` dentro de um seletor
 * de classe (0,2,0). Toda regra de link aqui é escrita como `.dmm a.classe`
 * (0,2,1), que vence sem !important.
 *
 * @see includes/mobile-menu.php
 */

.dmm {
	--dmm-gap: 22px;

	display: grid;
	gap: var(--dmm-gap);
	padding: 4px 18px 28px;
	color: var(--hb-text, #100b08);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

.dmm ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dmm li { margin: 0; }

/* ============================================================
 * Busca
 * ============================================================ */

/*
 * A busca ao vivo, revestida.
 *
 * Ela chega com o desenho da barra do cabeçalho: pílula com sombra e um botão
 * laranja redondo na ponta direita. Aquilo funciona sobre a faixa escura do
 * topo, onde precisa se destacar do fundo; aqui dentro do painel branco vira
 * um objeto solto, com uma bola de cor competindo com o "Ver planos" que é a
 * única ação laranja que deveria existir neste menu.
 *
 * A lupa passa para a ESQUERDA, discreta, como em qualquer campo de busca de
 * aplicativo: ali ela é rótulo, não botão. O envio continua funcionando pelo
 * Enter e pelo próprio clique nela.
 */
.dmm-busca { margin-top: 2px; }

.dmm .dmm-busca .dls,
.dmm .dmm-busca .dls-bar {
	width: 100%;
	max-width: none;
}

.dmm .dmm-busca .dls-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
	border-radius: 12px;
	background: var(--hb-bg, #fbf6ec);
	box-shadow: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.dmm .dmm-busca .dls-bar:focus-within {
	border-color: var(--hb-accent, #ff7e01);
	background: var(--hb-surface, #fffdf9);
}

.dmm .dmm-busca .dls-input {
	flex: 1;
	width: 100%;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--hb-text, #100b08);
	/* 16px evita o zoom automático do iOS ao focar. */
	font-size: 16px;
}

.dmm .dmm-busca .dls-input:focus {
	outline: none;
	box-shadow: none;
}

/* A lupa vira rótulo à esquerda: ordem -1 no flex, sem tinta. */
.dmm .dmm-busca button.dls-go {
	order: -1;
	width: 20px;
	height: 20px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--hb-dim, #4d423a);
	opacity: 0.7;
}

.dmm .dmm-busca button.dls-go svg { width: 18px; height: 18px; }
.dmm .dmm-busca .dls-bar:focus-within button.dls-go { opacity: 1; }

/* O X de limpar fica na direita, onde o polegar espera. */
.dmm .dmm-busca button.dls-clear {
	order: 2;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 11, 8, 0.07);
	box-shadow: none;
	color: var(--hb-dim, #4d423a);
}

.dmm .dmm-busca button.dls-clear svg { width: 11px; height: 11px; }
.dmm .dmm-busca button.dls-clear[hidden] { display: none; }

/* ============================================================
 * Títulos de seção
 * ============================================================ */

.dmm-t {
	margin: 0 0 10px;
	font-family: var(--hb-mono, ui-monospace, Menlo, Consolas, monospace);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--hb-dim, #4d423a);
}

/* ============================================================
 * Catálogo
 *
 * Grade de dois, não lista de seis. As categorias são o coração do menu, e em
 * lista elas ficariam com o mesmo peso de "Contato". Em cartão, com o número
 * de produtos, elas param o dedo: "5.549" convence de um jeito que a palavra
 * "Plugins" sozinha não convence.
 * ============================================================ */

.dmm-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.dmm a.dmm-cat {
	position: relative;
	display: grid;
	gap: 2px;
	height: 100%;
	padding: 14px 13px 12px;
	border: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
	border-radius: 14px;
	background: var(--hb-surface, #fffdf9);
	color: var(--hb-text, #100b08);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.18s ease;
}

/*
 * Um brilho da marca que nasce do canto inferior direito ao tocar. Sem ele o
 * cartão não dá retorno nenhum no celular, onde não existe hover: o dedo
 * cobre o próprio elemento e a pessoa fica sem saber se o toque pegou.
 */
.dmm a.dmm-cat::after {
	content: '';
	position: absolute;
	right: -30%;
	bottom: -60%;
	width: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--hb-accent-bg, #fff1de), transparent 70%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.dmm a.dmm-cat:active {
	border-color: var(--hb-accent-soft, #ffe4c2);
	transform: scale(0.98);
}

.dmm a.dmm-cat:active::after { opacity: 1; }

@media (hover: hover) {
	.dmm a.dmm-cat:hover {
		border-color: var(--hb-accent-soft, #ffe4c2);
		transform: translateY(-2px);
		box-shadow: 0 10px 24px -18px rgba(16, 11, 8, 0.5);
	}

	.dmm a.dmm-cat:hover::after { opacity: 1; }
}

.dmm-cat-i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 6px;
	border-radius: 10px;
	background: var(--hb-accent-bg, #fff1de);
	color: var(--hb-accent-deep, #b45309);
}

.dmm-cat-i .hb-i { width: 16px; height: 16px; }

.dmm-cat-n {
	font-family: var(--hb-display, inherit);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

/* Mono com dígito tabular: as seis contagens alinham entre si. */
.dmm-cat-q {
	font-family: var(--hb-mono, ui-monospace, Menlo, Consolas, monospace);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: var(--hb-dim, #4d423a);
}

/* ============================================================
 * Links
 * ============================================================ */

.dmm-links {
	display: grid;
	gap: 2px;
}

.dmm a.dmm-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 12px 10px;
	border-radius: 12px;
	color: var(--hb-text, #100b08);
	font-size: 0.97rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.dmm a.dmm-link:active { background: var(--hb-bg-warm, #f5ecdb); }

@media (hover: hover) {
	.dmm a.dmm-link:hover { background: var(--hb-bg-warm, #f5ecdb); }
}

.dmm-link-i {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: var(--hb-bg, #fbf6ec);
	color: var(--hb-dim, #4d423a);
}

.dmm-link-i .hb-i { width: 15px; height: 15px; }

.dmm-link-n { flex: 1; min-width: 0; }

/* A seta avança um fio ao tocar: diz que o link leva a outro lugar. */
.dmm-link-a {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--hb-dim, #4d423a);
	opacity: 0.5;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}

.dmm-link-a .hb-i { width: 15px; height: 15px; }

.dmm a.dmm-link:active .dmm-link-a {
	transform: translateX(3px);
	opacity: 1;
}

@media (hover: hover) {
	.dmm a.dmm-link:hover .dmm-link-a {
		transform: translateX(3px);
		opacity: 1;
	}
}

/* ============================================================
 * Conta
 * ============================================================ */

.dmm-conta {
	display: grid;
	gap: 12px;
	padding-top: var(--dmm-gap);
	border-top: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
}

/* ---------- Logado ---------- */

.dmm a.dmm-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
	border-radius: 14px;
	background: var(--hb-surface, #fffdf9);
	color: var(--hb-text, #100b08);
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.dmm a.dmm-user:active {
	border-color: var(--hb-accent-soft, #ffe4c2);
	transform: scale(0.99);
}

/* Inicial do nome. Um monograma diz quem está logado sem carregar imagem. */
.dmm-user-av {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--hb-deep, #222);
	color: var(--hb-bg, #fbf6ec);
	font-family: var(--hb-display, inherit);
	font-size: 1.05rem;
	font-weight: 700;
}

.dmm-user-txt {
	display: grid;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.dmm-user-txt strong {
	font-size: 0.95rem;
	font-weight: 650;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dmm-user-txt span {
	font-size: 0.8rem;
	color: var(--hb-muted, #75695e);
}

.dmm-user-plano {
	flex: none;
	padding: 4px 10px;
	border: 1px solid var(--hb-accent-soft, #ffe4c2);
	border-radius: 999px;
	background: var(--hb-accent-bg, #fff1de);
	color: var(--hb-accent-deep, #b45309);
	font-family: var(--hb-mono, ui-monospace, Menlo, Consolas, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Visitante ---------- */

.dmm-visita {
	display: grid;
	gap: 8px;
}

.dmm a.dmm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
	border-radius: 12px;
	background: var(--hb-surface, #fffdf9);
	color: var(--hb-text, #100b08);
	font-size: 0.95rem;
	font-weight: 650;
	text-decoration: none;
	transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.dmm a.dmm-btn:active { transform: scale(0.985); }

.dmm a.dmm-btn--main {
	border-color: var(--hb-accent, #ff7e01);
	background: var(--hb-accent, #ff7e01);
	/* Branco sobre #ff7e01 dá 2,6:1 e reprova; quase-preto dá 7,4:1. */
	color: #1a0f06;
}

.dmm-btn .hb-i {
	width: 16px;
	height: 16px;
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dmm a.dmm-btn--main:active .hb-i { transform: translateX(3px); }

/* ---------- Rodapé ---------- */

.dmm-rodape {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.dmm a.dmm-mini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--hb-line, rgba(16, 11, 8, 0.09));
	border-radius: 11px;
	background: transparent;
	color: var(--hb-muted, #75695e);
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.dmm a.dmm-mini:active {
	border-color: var(--hb-accent-soft, #ffe4c2);
	color: var(--hb-text, #100b08);
}

.dmm-mini .hb-i { width: 15px; height: 15px; }

/* O do WhatsApp carrega a cor dele: é o canal, não a marca da loja. */
.dmm a.dmm-mini--zap {
	border-color: #bfe6cd;
	background: #f0faf4;
	color: #146c43;
}

.dmm a.dmm-mini--zap:active {
	border-color: #8fd3ab;
	color: #0f5132;
}

/* ============================================================
 * Telas muito estreitas
 * ============================================================ */

@media (max-width: 340px) {
	.dmm { padding-inline: 14px; }
	.dmm-cats { grid-template-columns: minmax(0, 1fr); }
	.dmm-rodape { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.dmm *,
	.dmm *::after {
		transition-duration: 0.01ms !important;
	}
}