/* ==========================================================================
   Clube SMK — Navegação (mega-menu desktop, nav mobile), busca, to-top
   ========================================================================== */

/* ===== Barra de navegação (categorias) ===== */
.csmk-header__nav {
	position: relative;
	border-top: 1px solid var(--border);
	background: var(--surface);
}
@media (max-width: 1024px) { .csmk-header__nav { display: none; } }

.csmk-mm {
	display: flex;
	align-items: stretch;
	gap: var(--s-1);
	flex-wrap: wrap;
}
.csmk-mm__item { position: static; }
.csmk-mm__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-4) var(--s-3);
	font-family: var(--font-sans);
	font-weight: var(--fw-semi);
	font-size: var(--fs-14);
	color: var(--text);
	letter-spacing: 0.01em;
	position: relative;
}
.csmk-mm__link::after {
	content: "";
	position: absolute;
	left: var(--s-3); right: var(--s-3); bottom: 10px;
	height: 2px; background: var(--c-purple);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--t) var(--ease);
}
.csmk-mm__item:hover .csmk-mm__link,
.csmk-mm__item:focus-within .csmk-mm__link { color: var(--c-purple); }
.csmk-mm__item:hover .csmk-mm__link::after,
.csmk-mm__item:focus-within .csmk-mm__link::after { transform: scaleX(1); }
.csmk-mm__chev { transition: transform var(--t) var(--ease); }
.csmk-mm__item:hover .csmk-mm__chev { transform: rotate(180deg); }

/* ===== Painel mega ===== */
.csmk-mm__panel {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: var(--sh-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
	z-index: var(--z-megamenu);
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	overflow: hidden;
}
.csmk-mm__item.has-mega:hover .csmk-mm__panel,
.csmk-mm__item.has-mega:focus-within .csmk-mm__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.csmk-mm__inner { padding: var(--s-8) var(--gutter); }
.csmk-mm__cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--s-6) var(--s-8);
}
.csmk-mm__col-title {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-15, 0.95rem);
	color: var(--text);
	padding-bottom: var(--s-2);
	margin-bottom: var(--s-2);
	border-bottom: 1px solid var(--border);
}
.csmk-mm__col-title:hover { color: var(--c-purple); }
.csmk-mm__sublist { display: flex; flex-direction: column; gap: 2px; }
.csmk-mm__leaf a {
	display: block;
	padding: var(--s-1) 0;
	font-size: var(--fs-14);
	color: var(--text-soft);
}
.csmk-mm__leaf a:hover { color: var(--c-purple); padding-left: var(--s-1); }

/* ===== Navegação mobile (drawer) ===== */
.csmk-mnav__list { display: flex; flex-direction: column; }
.csmk-mnav__item { border-bottom: 1px solid var(--border); }
.csmk-mnav__row { display: flex; align-items: center; justify-content: space-between; }
.csmk-mnav__link {
	display: block;
	flex: 1;
	padding: var(--s-4) 0;
	font-weight: var(--fw-semi);
	font-size: var(--fs-16);
	color: var(--text);
}
.csmk-mnav__toggle {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-soft);
	transition: transform var(--t) var(--ease);
}
.csmk-mnav__item.is-open > .csmk-mnav__row .csmk-mnav__toggle { transform: rotate(180deg); color: var(--c-purple); }
.csmk-mnav__sub {
	display: none;
	padding-left: var(--s-4);
	margin-bottom: var(--s-2);
	border-left: 2px solid var(--c-purple-100);
}
.csmk-mnav__item.is-open > .csmk-mnav__sub { display: block; }
.csmk-mnav__sub .csmk-mnav__item { border-bottom: none; }
.csmk-mnav__sub .csmk-mnav__link { padding: var(--s-2) 0; font-size: var(--fs-14); font-weight: var(--fw-reg); color: var(--text-soft); }
.csmk-mnav__sub .csmk-mnav__link:hover { color: var(--c-purple); }
.csmk-mnav__foot { display: flex; flex-direction: column; gap: var(--s-3); }

/* ===== Busca ===== */
.csmk-search { position: relative; display: flex; align-items: center; width: 100%; }
.csmk-search__icon {
	position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
	color: var(--text-faint);
	display: inline-flex; align-items: center; pointer-events: none;
}
/* Escopado em `.csmk-search` (0,2,0) para vencer o reset global de
   input[type="search"] em components.css (0,1,1), que zera o padding/pill. */
.csmk-search .csmk-search__input {
	width: 100%;
	height: 48px;
	padding: 0 2.9rem 0 3.5rem;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--border-strong);
	background: var(--bg-soft);
	font-size: var(--fs-14);
	line-height: normal;
}
.csmk-search .csmk-search__input:focus { background: var(--surface); }
.csmk-search__clear {
	position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-faint); background: var(--bg-muted);
}
.csmk-search__clear:hover { color: var(--c-purple); }

.csmk-search__results {
	position: absolute;
	top: calc(100% + 8px); left: 0; right: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	z-index: var(--z-megamenu);
	max-height: min(70vh, 480px);
	overflow-y: auto;
	padding: var(--s-2);
}
.csmk-ls__item {
	display: flex; align-items: center; gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	color: var(--text);
}
.csmk-ls__item:hover, .csmk-ls__item.is-active { background: var(--bg-soft); }
.csmk-ls__media { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r-xs); overflow: hidden; background: var(--bg-muted); }
.csmk-ls__media img { width: 100%; height: 100%; object-fit: cover; }
.csmk-ls__info { min-width: 0; }
.csmk-ls__name { font-size: var(--fs-14); font-weight: var(--fw-med); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csmk-ls__price { font-size: var(--fs-13); color: var(--c-purple); font-weight: var(--fw-semi); }
.csmk-ls__all {
	display: block; text-align: center;
	padding: var(--s-3); margin-top: var(--s-1);
	border-top: 1px solid var(--border);
	font-weight: var(--fw-semi); font-size: var(--fs-13); color: var(--c-purple);
}
.csmk-ls__empty, .csmk-ls__loading { padding: var(--s-5); text-align: center; color: var(--text-soft); font-size: var(--fs-14); }

/* ===== Botão voltar ao topo ===== */
.csmk-totop {
	position: fixed; bottom: var(--s-6); left: var(--s-6);
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--c-black); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--sh-2);
	z-index: var(--z-header);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t), background var(--t-fast);
}
.csmk-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.csmk-totop:hover { background: var(--c-purple); }
.csmk-totop__icon { transform: rotate(180deg); }
@media (max-width: 600px) { .csmk-totop { bottom: var(--s-4); left: var(--s-4); width: 42px; height: 42px; } }

/* Texto auxiliar dos ícones do header (oculto, acessível) */
.csmk-iconbtn__text { display: none; }