/* ==========================================================================
   Cabeçalho Cortinar — busca, sacola popup e mega-menu de categorias
   ========================================================================== */

.ch {
	--ch-vinho: #800203;
	--ch-vinho-esc: #5e0102;
	--ch-gold: #c9a227;
	--ch-creme: #faf6f2;
	--ch-borda: #e8ded5;
	--ch-txt: #2a2a2a;
	--ch-txt-2: #6b615c;

	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.ch *, .ch-drawer * { box-sizing: border-box; }

.ch__container {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding-inline: 20px;
}

/* ---------- Linha principal ---------- */
.ch__top { border-bottom: 1px solid var(--ch-borda); }
.ch__top-inner {
	display: grid;
	grid-template-areas:
		"burger logo actions"
		"search search search";
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px 10px;
	padding-block: 12px;
}

/* Hambúrguer (mobile) */
.ch__burger {
	grid-area: burger;
	width: 44px; height: 44px;
	display: flex; flex-direction: column; justify-content: center; gap: 5px;
	background: none; border: none; cursor: pointer; padding: 0 10px 0 0;
}
.ch__burger span { display: block; height: 2px; background: var(--ch-vinho); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.ch__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ch__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ch__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Logo */
.ch__logo { grid-area: logo; display: inline-flex; align-items: center; text-decoration: none; }
.ch__logo img { max-height: 52px; width: auto; display: block; }
.ch__logo-text { font-family: "Playfair Display", Georgia, serif; font-size: 26px; color: var(--ch-vinho); }

/* Busca */
.ch__search {
	grid-area: search;
	display: flex;
	align-items: center;
	background: var(--ch-creme);
	border: 1.5px solid var(--ch-borda);
	border-radius: 999px;
	overflow: hidden;
	transition: border-color .2s ease, background .2s ease;
	min-width: 0;
}
.ch__search:focus-within { border-color: var(--ch-vinho); background: #fff; }
.ch__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 12px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--ch-txt);
	outline: none;
	-webkit-appearance: none;
}
.ch__search input::placeholder { color: var(--ch-txt-2); }
.ch__search button {
	flex: none;
	width: 46px; height: 44px;
	display: grid; place-items: center;
	background: var(--ch-vinho);
	border: none; cursor: pointer;
	border-radius: 999px;
	margin: 3px;
	transition: background .2s ease;
}
.ch__search button:hover { background: var(--ch-vinho-esc); }
.ch__search svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* Ações (conta / sacola) */
.ch__actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.ch__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 10px;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	color: var(--ch-txt);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	border-radius: 10px;
	min-width: 52px;
	min-height: 44px;
	transition: background .18s ease, color .18s ease;
}
.ch__action:hover { background: var(--ch-creme); color: var(--ch-vinho); }
.ch__action svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ch__action-txt { display: none; }

/* Contador da sacola */
.ch__cart-ico { position: relative; display: block; }
.ch__cart-count {
	position: absolute;
	top: -6px; right: -8px;
	min-width: 19px; height: 19px;
	padding: 0 5px;
	background: var(--ch-vinho);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	border: 2px solid #fff;
}

/* ---------- Navegação ---------- */
.ch__nav { display: none; background: #fff; border-bottom: 1px solid var(--ch-borda); }
.ch__nav.is-open { display: block; }

.ch__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch__menu > li { position: relative; border-bottom: 1px solid var(--ch-borda); }
.ch__menu > li:last-child { border-bottom: none; }

/* Só os links de primeiro nível — não afeta o conteúdo do mega-menu. */
.ch__menu > li > a, .ch__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	color: var(--ch-txt);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	text-align: left;
	min-height: 44px;
}
.ch__menu > li > a:hover, .ch__link:hover { color: var(--ch-vinho); }
/* ---------- Botão de ação: Sob Medida ----------
   Seletor precisa vencer `.ch__menu > li > a` (0,1,2), por isso o `a.ch__cta`. */
.ch__menu > li > a.ch__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ch-vinho);
	color: #fff;
	padding: 12px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	width: 100%;
	min-height: 46px;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ch__menu > li > a.ch__cta:hover {
	background: var(--ch-vinho-esc);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(128, 2, 3, .28);
}
.ch__cta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch__item--cta { padding-block: 10px; }

/* ==========================================================================
   Popup da sacola (drawer lateral)
   ========================================================================== */
.ch-overlay {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 1000;
	opacity: 0;
	transition: opacity .28s ease;
}
.ch-overlay.is-open { opacity: 1; }

.ch-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 100%);
	z-index: 1001;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	visibility: hidden;
}
.ch-drawer.is-open { transform: none; visibility: visible; }

.ch-drawer__panel {
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 40px rgba(0, 0, 0, .2);
}

.ch-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid #e8ded5;
	background: #800203;
	color: #fff;
}
.ch-drawer__title { font-family: "Playfair Display", Georgia, serif; font-size: 21px; font-weight: 600; margin: 0; color: #fff; }
.ch-drawer__close {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .14);
	border: none; border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease;
}
.ch-drawer__close:hover { background: rgba(255, 255, 255, .28); }
.ch-drawer__close svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

.ch-drawer__body { flex: 1; overflow-y: auto; padding: 20px 22px; }

/* Estiliza o mini-carrinho do WooCommerce dentro do drawer */
.ch-drawer__body .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
/* O WooCommerce coloca a imagem DENTRO do link, junto com o nome —
   por isso o link vira o container flex, não o <li>. */
.ch-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	padding: 14px 30px 14px 0;
	border-bottom: 1px solid #f0e7dd;
	list-style: none;
}
.ch-drawer__body .woocommerce-mini-cart-item > a:not(.remove) {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #2a2a2a;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
}
.ch-drawer__body .woocommerce-mini-cart-item > a:not(.remove):hover { color: #800203; }
.ch-drawer__body .woocommerce-mini-cart-item img {
	width: 62px;
	height: 62px;
	flex: none;
	object-fit: cover;
	border-radius: 8px;
	background: #f4ece4;
}
/* Quantidade alinhada ao texto, abaixo do nome */
.ch-drawer__body .quantity {
	display: block;
	font-size: 13.5px;
	color: #6b615c;
	margin: 6px 0 0 74px;
}
.ch-drawer__body .quantity .woocommerce-Price-amount { font-size: 15px; }
.ch-drawer__body .woocommerce-mini-cart-item .remove_from_cart_button {
	position: absolute; top: 14px; right: 0;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #f4ece4;
	color: #800203;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.ch-drawer__body .woocommerce-mini-cart-item .remove_from_cart_button:hover { background: #800203; color: #fff; }
.ch-drawer__body .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin: 18px 0 4px; padding-top: 16px;
	border-top: 2px solid #800203;
	font-size: 16px;
}
.ch-drawer__body .woocommerce-mini-cart__total strong { font-weight: 600; }
.ch-drawer__body .woocommerce-Price-amount { color: #800203; font-weight: 800; font-size: 20px; }
.ch-drawer__body .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ch-drawer__body .woocommerce-mini-cart__buttons a {
	display: block;
	text-align: center;
	padding: 14px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid #800203;
	color: #800203;
	transition: background .2s ease, color .2s ease;
}
.ch-drawer__body .woocommerce-mini-cart__buttons a:hover { background: #800203; color: #fff; }
.ch-drawer__body .woocommerce-mini-cart__buttons a.checkout { background: #800203; color: #fff; }
.ch-drawer__body .woocommerce-mini-cart__buttons a.checkout:hover { background: #5e0102; border-color: #5e0102; }
.ch-drawer__body .woocommerce-mini-cart__empty-message {
	text-align: center;
	color: #6b615c;
	padding: 40px 10px;
	font-size: 15px;
}

body.ch-locked { overflow: hidden; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1024px) {
	.ch__burger { display: none; }
	.ch__top-inner {
		grid-template-areas: "logo search actions";
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 28px;
		padding-block: 16px;
	}
	.ch__search { max-width: 560px; margin: 0 auto; width: 100%; }
	.ch__action-txt { display: block; }
	.ch__actions { gap: 8px; }

	/* Navegação horizontal sempre visível */
	.ch__nav { display: block; }
	.ch__menu { flex-direction: row; align-items: center; gap: 4px; }
	.ch__menu > li { border-bottom: none; }
	.ch__menu > li > a, .ch__link { padding: 14px 14px; width: auto; }
	.ch__menu > li > a::after, .ch__link--mega::after {
		content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px;
		height: 2px; background: var(--ch-vinho);
		transform: scaleX(0); transform-origin: left;
		transition: transform .25s ease;
	}
	.ch__menu > li:hover > a::after { transform: scaleX(1); }

	/* Botão Sob Medida empurrado para a direita, separado das categorias */
	.ch__item--cta { margin-left: auto; padding-block: 0; }
	.ch__menu > li > a.ch__cta { width: auto; padding: 11px 22px; }
	.ch__item--cta > a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ch-drawer, .ch-overlay, .ch__cta, .ch__burger span { transition: none; }
}