/**
 * Mesato — "prateleiras" horizontais (carrossel por categoria).
 * Transforma um track (.mst-grid / .mst-wine-list) marcado com data-mst-shelf
 * num scroll horizontal com snap. As setas são injetadas por shelf.js; sem JS,
 * funciona como scroll nativo (swipe/scrollbar). Mantém todos os itens no DOM.
 */

/* Track horizontal (vence o display:grid das listas via maior especificidade). */
.mst-menu .mst-grid[data-mst-shelf],
.mst-wines .mst-wine-list[data-mst-shelf] {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 10px 2px 16px;
	margin: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(120, 90, 60, .35) transparent;
}
.mst-menu .mst-grid[data-mst-shelf]::-webkit-scrollbar,
.mst-wines .mst-wine-list[data-mst-shelf]::-webkit-scrollbar { height: 8px; }
.mst-menu .mst-grid[data-mst-shelf]::-webkit-scrollbar-thumb,
.mst-wines .mst-wine-list[data-mst-shelf]::-webkit-scrollbar-thumb { background: rgba(120, 90, 60, .3); border-radius: 8px; }

/* Largura fixa de cada cartão dentro do track. */
.mst-menu .mst-grid[data-mst-shelf] > *,
.mst-wines .mst-wine-list[data-mst-shelf] > * {
	flex: 0 0 280px;
	scroll-snap-align: start;
}
@media (max-width: 600px) {
	.mst-menu .mst-grid[data-mst-shelf] > *,
	.mst-wines .mst-wine-list[data-mst-shelf] > * { flex-basis: 82%; }
}

/* Botão "Ver todos / Ver menos" no título da categoria (injetado por shelf.js). */
.mst-shelf-head { position: relative; padding-right: 130px; }
.mst-shelf-all {
	position: absolute;
	top: 2px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mst-brand-dark, #8a5630);
	cursor: pointer;
	padding: 4px 2px;
	line-height: 1.2;
}
.mst-shelf-all:hover { color: var(--mst-brand, #b0703e); text-decoration: underline; }
.mst-shelf-all[hidden] { display: none; }

/* Modo expandido: a categoria vira grelha (mostra tudo). */
.mst-menu .mst-grid[data-mst-shelf].is-expanded,
.mst-wines .mst-wine-list[data-mst-shelf].is-expanded {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	overflow: visible;
	scroll-snap-type: none;
}
.mst-menu .mst-grid[data-mst-shelf].is-expanded > *,
.mst-wines .mst-wine-list[data-mst-shelf].is-expanded > * {
	flex: initial;
	scroll-snap-align: none;
}

/* Wrapper + setas (injetados por shelf.js). */
.mst-shelf-wrap { position: relative; }
.mst-shelf-nav {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .07);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: #5b4632;
	transition: opacity .2s ease, background .18s ease, transform .18s ease;
}
.mst-shelf-nav:hover { background: #fff; }
.mst-shelf-nav svg { width: 22px; height: 22px; }
.mst-shelf-nav.prev { left: -8px; }
.mst-shelf-nav.next { right: -8px; }
.mst-shelf-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
	.mst-shelf-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mst-menu .mst-grid[data-mst-shelf],
	.mst-wines .mst-wine-list[data-mst-shelf] { scroll-behavior: auto; }
}