/*
Theme Name: Cestas Sofisticadas
Template: storefront
Author: Cestas Sofisticadas
Description: Tema filho do Storefront. Paleta aprovada pela proprietaria em 2026-08-19: fundo azul ardosia, cartoes em verde quase preto, rosa como cor de acao, verde agua nas linhas, texto branco. Playfair Display + Inter, sem cantos arredondados.
Version: 1.0.0
*/

:root {
	/* Paleta oficial do site, aprovada pela proprietaria em 2026-08-19.
	   Origem: referencia HAUS trazida pelo Carlos, com fundo mais claro a
	   pedido da Irene. Substituiu a paleta dark luxury (fundo #0D0A07,
	   dourado #C9A84C), cujo arquivo original esta guardado em
	   wordpress/backups/tema-antes-paleta-2026-08-19/ e no commit 4691290. */
	--cs-bg: #2F4454;         /* azul ardosia: fundo da pagina */
	--cs-bg-alt: #1C3334;     /* verde quase preto: cartoes, cabecalho, rodape, campos */
	--cs-text: #FFFFFF;
	--cs-text-muted: rgba(255, 255, 255, 0.74);
	--cs-gold: #DA7B93;       /* rosa: cor de acao, preco, link, botao */
	--cs-gold-dark: #DA7B93;  /* mesmo rosa: usos que sao texto sobre fundo escuro */
	--cs-border: #376E6F;     /* verde agua: linhas e contornos */
	--cs-on-accent: #2E151B;  /* vinho quase preto: texto escrito sobre o rosa */
}

/* ---------- Base ---------- */

body {
	background-color: var(--cs-bg);
	color: var(--cs-text);
	font-family: "Inter", sans-serif;
}

a {
	color: var(--cs-gold);
}

a:hover,
a:focus {
	color: var(--cs-text);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-product-section .section-title {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cs-text);
}

/* Preco na grade da Loja usa a mesma fonte do corpo de texto (Inter, igual
   a descricao do produto), nao mais a serifada dos titulos - bate com o
   preco da pagina de produto, que ja usava Inter. */
.woocommerce ul.products li.product .price {
	font-family: "Inter", sans-serif;
	font-weight: 600;
}

/* Titulos principais em dourado (identidade dark luxury); subtitulos de
   corpo de texto ficam no creme claro pra nao cansar a vista com dourado
   demais e manter hierarquia visual. */
h1,
h2,
.page-title,
.entry-title,
.woocommerce-products-header__title {
	color: var(--cs-gold);
}

.woocommerce-products-header {
	margin-top: 2rem;
}

.cs-selecionadas-title {
	text-align: center;
	margin-top: 1rem;
	font-size: 1.5rem;
}

/* Atalhos de colecao abaixo do titulo "Loja" */
/* Na pagina inicial a fileira de colecoes vem logo abaixo da faixa de
   beneficios, entao precisa de mais respiro em cima do que na Loja, onde
   ela fica sob o titulo da pagina. */
.home .cs-shop-collections {
	margin-top: 3rem;
}

.cs-shop-collections {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1rem auto 2rem;
	max-width: 900px;
}

.cs-shop-collections a {
	padding: 0.4rem 1rem;
	border: 1px solid var(--cs-border);
	color: var(--cs-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cs-shop-collections a:hover {
	border-color: var(--cs-gold);
	color: var(--cs-gold);
}

.cs-shop-collections__item {
	position: relative;
}

.cs-shop-collections__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	margin-top: 0.5rem;
	padding: 0.5rem 0;
	background-color: var(--cs-bg-alt);
	border: 1px solid var(--cs-border);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.cs-shop-collections__item:hover .cs-shop-collections__dropdown,
.cs-shop-collections__item:focus-within .cs-shop-collections__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.cs-shop-collections__dropdown a {
	border: none;
	padding: 0.55rem 1.25rem;
	text-transform: none;
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-align: left;
}

.cs-shop-collections__dropdown a:hover {
	background-color: var(--cs-bg);
	color: var(--cs-gold);
}

/* Cantos sempre retos, nunca arredondados */
*,
*::before,
*::after {
	border-radius: 0 !important;
}

/* ---------- Faixa de mensagens (marquee) ---------- */

.cs-marquee {
	background-color: var(--cs-gold);
	color: var(--cs-on-accent);
	overflow: hidden;
	white-space: nowrap;
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35rem 0;
}

.cs-marquee__track {
	display: inline-block;
	white-space: nowrap;
	animation: cs-marquee-scroll 28s linear infinite;
}

.cs-marquee__track span {
	display: inline-block;
	padding: 0 3rem;
}

@keyframes cs-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cs-marquee__track {
		animation: none;
	}
}

/* ---------- Cabecalho ---------- */

.site-header,
.storefront-primary-navigation,
.main-navigation ul.menu {
	background-color: var(--cs-bg);
	border-color: var(--cs-border);
}

/* Evita colapso de margem de elementos internos "vazando" pro rodape do
   cabecalho e criando um vao em branco antes do hero. */
#masthead.site-header {
	margin-bottom: 0 !important;
}

/* Cabecalho um pouco mais compacto - so o espacamento entre as linhas,
   sem diminuir logo nem banner. */
#masthead.site-header {
	padding-top: 1rem;
}

.site-branding {
	margin-bottom: 0.1rem;
}

.storefront-primary-navigation {
	padding-top: 0.2rem;
	padding-bottom: 0.4rem;
}

.site-header .site-branding .site-title a,
.site-header .site-branding .site-title a:visited {
	color: var(--cs-text);
	font-family: "Playfair Display", serif;
}

.site-header,
.site-header a,
.site-header .site-search label,
.main-navigation ul li a,
.site-header-cart a,
.site-header-cart .amount,
.storefront-primary-navigation,
.storefront-primary-navigation .site-search .search-field {
	color: var(--cs-text);
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
	color: var(--cs-gold);
}

/* Barra fixa do rodape no mobile (Storefront usa fundo branco por padrao) */
.storefront-handheld-footer-bar {
	background-color: var(--cs-bg-alt);
	border-top: 1px solid var(--cs-border);
}

.storefront-handheld-footer-bar ul.columns-3 {
	background-color: var(--cs-bg-alt);
}

.storefront-handheld-footer-bar a,
.storefront-handheld-footer-bar li {
	color: var(--cs-text);
}

/* Dourado sobre fundo claro nao tem contraste suficiente (WCAG AA) */
.storefront-handheld-footer-bar a {
	color: var(--cs-gold-dark);
}

.site-header-cart .cart-contents,
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count,
.site-header-cart .cart-contents::after {
	color: var(--cs-gold) !important;
}

.storefront-handheld-footer-bar .dropdown,
.storefront-handheld-footer-bar .site-search,
.storefront-handheld-footer-bar .widget_product_search,
.storefront-handheld-footer-bar .shopping_cart_content {
	background-color: var(--cs-bg-alt) !important;
}

.search-field {
	background-color: var(--cs-bg-alt);
	color: var(--cs-text);
	border: 1px solid var(--cs-border);
}

/* ---------- Hero (banners reais em crossfade) ---------- */

.cs-hero {
	position: relative;
	width: 100%;
	height: min(60vh, 535px);
	min-height: 280px;
	overflow: hidden;
	background-color: var(--cs-bg);
}

.cs-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	transition: opacity 1.2s ease, transform 8s ease;
	transform: scale(1);
}

.cs-hero__slide.is-active {
	opacity: 1;
	transform: scale(1.06);
}

/* ---------- Faixa de beneficios (abaixo do hero) ---------- */

.cs-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background-color: var(--cs-bg-alt);
	border-bottom: 1px solid var(--cs-border);
}

.cs-benefits__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 0.5rem 1rem;
	border-right: 1px solid var(--cs-border);
	color: var(--cs-gold);
	text-align: center;
}

.cs-benefits__item:last-child {
	border-right: none;
}

.cs-benefits__item h4 {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cs-text);
}

.cs-benefits__item p {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--cs-text-muted);
}

@media (max-width: 900px) {
	.cs-benefits {
		grid-template-columns: repeat(2, 1fr);
	}

	.cs-benefits__item:nth-child(2) {
		border-right: none;
	}

	.cs-benefits__item {
		border-bottom: 1px solid var(--cs-border);
	}
}

/* ---------- Rodape completo (Informacoes/Atendimento/Paginas/Departamentos/Pagamento) ---------- */

.cs-footer-top,
.cs-footer-payment {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem 2rem;
}

.cs-footer-payment {
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--cs-border);
	padding-top: 2rem;
}

.cs-footer-col h4 {
	color: var(--cs-gold);
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.cs-footer-col p,
.cs-footer-col ul {
	color: var(--cs-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 0.75rem;
}

.cs-footer-col ul {
	list-style: none;
	padding: 0;
}

.cs-footer-col ul li {
	margin-bottom: 0.5rem;
}

.cs-footer-col a {
	color: var(--cs-text-muted);
}

.cs-footer-col a:hover {
	color: var(--cs-gold);
}

.cs-social-links--inline {
	display: flex;
	gap: 0.75rem;
	margin: 0;
}

.cs-social-links--inline a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	background-color: var(--cs-bg-alt);
	border: 1px solid var(--cs-border);
}

.cs-footer-departments {
	text-align: center;
	background-color: var(--cs-bg-alt);
	padding: 2.5rem 1.5rem;
	border-top: 1px solid var(--cs-border);
	border-bottom: 1px solid var(--cs-border);
}

.cs-footer-departments h4 {
	color: var(--cs-gold);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.cs-footer-logo {
	max-width: 220px;
	height: auto;
	margin-bottom: 1.5rem;
}

.cs-footer-departments nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	padding: 0;
	margin: 0 0 1.5rem;
}

.cs-footer-departments nav a {
	color: var(--cs-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.cs-footer-departments nav a:hover {
	color: var(--cs-gold);
}

.cs-footer-disclaimers {
	color: var(--cs-text-muted);
	font-size: 0.75rem;
	line-height: 1.7;
	max-width: 900px;
	margin: 0 auto;
}

.cs-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.cs-payment-icons img {
	height: 26px;
	width: auto;
	background-color: #fff;
	padding: 3px 6px;
}

.cs-security-badge {
	height: 36px;
	width: auto;
	margin-bottom: 0.75rem;
}

.cs-footer-cookie-note {
	font-size: 0.75rem;
	max-width: 320px;
}

/* Botao flutuante de WhatsApp */
.cs-whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #25D366;
	color: #fff;
	padding: 0.75rem 1rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	text-decoration: none;
}

.cs-whatsapp-float span {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.cs-whatsapp-float:hover {
	background-color: #1ebe5a;
	color: #fff;
}

@media (max-width: 782px) {
	.cs-footer-top,
	.cs-footer-payment {
		grid-template-columns: 1fr;
	}

	.cs-whatsapp-float span {
		display: none;
	}
}

/* ---------- Redes sociais no rodape ---------- */

.cs-social-links {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.cs-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--cs-bg);
	border: 1px solid var(--cs-border);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.cs-social-links a:hover {
	border-color: var(--cs-gold);
	transform: translateY(-2px);
}

/* ---------- Rodape ---------- */

.storefront-footer-widget-region {
	background-color: var(--cs-bg-alt);
	color: var(--cs-text-muted);
}

#colophon a {
	color: var(--cs-gold);
}

/* ---------- Conteudo / paginas ---------- */

#content,
.site-content,
#primary,
.content-area {
	background-color: var(--cs-bg);
	color: var(--cs-text);
}

/* ---------- Botoes ---------- */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-message a.button {
	background-color: var(--cs-gold);
	color: var(--cs-on-accent);
	border: 1px solid var(--cs-gold);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: transparent;
	color: var(--cs-gold);
	border-color: var(--cs-gold);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.checkout-button {
	background-color: var(--cs-gold);
	color: var(--cs-on-accent);
}

/* ---------- Vitrine de produtos ---------- */

/* Grade em flexbox (em vez do float padrao do WooCommerce) pra que uma
   ultima linha incompleta fique centralizada, nao alinhada a esquerda
   com espaco vazio do lado direito. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: var(--cs-bg-alt);
	border: 1px solid var(--cs-border);
	padding: 1rem;
	float: none;
	/* Titulo de produto mais comprido quebra em 2 linhas e empurraria so
	   aquele botao "Adicionar ao carrinho" pra baixo, desalinhando a
	   fileira - corrigido deixando o card uma coluna flex e prendendo o
	   botao no fundo dele (regra ".add_to_cart_button" abaixo), pra
	   qualquer produto, sem precisar mexer em fonte/texto. */
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	margin-top: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--cs-text);
	font-family: "Playfair Display", serif;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cs-gold);
}

.woocommerce span.onsale {
	background-color: var(--cs-gold);
	color: var(--cs-on-accent);
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul {
	border-color: var(--cs-border);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background-color: var(--cs-bg-alt);
	color: var(--cs-text);
}

/* ---------- Pagina de produto ---------- */

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--cs-bg-alt);
	border-color: var(--cs-border);
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--cs-bg);
}

.woocommerce div.product .woocommerce-tabs .panel {
	background-color: var(--cs-bg);
	color: var(--cs-text);
	border-color: var(--cs-border);
}

/* Vitrine de produtos sugeridos no carrinho ("Novidades" quando vazio,
   "Voce tambem pode gostar" quando tem item) - usa o bloco nativo do
   WooCommerce (Product New / Product Collection), com classes proprias
   (wc-block-grid__...) diferentes da grade classica da Loja (ul.products),
   por isso ficava com o cinza escuro padrao do bloco, ilegivel no fundo
   escuro do tema. */
.wc-block-grid__product-title,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title a {
	color: var(--cs-text) !important;
	font-family: "Playfair Display", serif;
}

.wc-block-grid__product-price,
.wc-block-grid__product-price .amount,
.wp-block-woocommerce-product-collection .price,
.wp-block-woocommerce-product-collection .price .amount {
	color: var(--cs-gold) !important;
	font-family: "Inter", sans-serif;
	font-weight: 600;
}

.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wp-block-woocommerce-product-collection .wp-block-button__link {
	background-color: var(--cs-gold) !important;
	color: var(--cs-on-accent) !important;
	border: 1px solid var(--cs-gold);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8125rem;
	border-radius: 0 !important;
}

.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wp-block-woocommerce-product-collection .wp-block-button__link:hover {
	background-color: transparent !important;
	color: var(--cs-gold) !important;
}

/* Alinhamento dos botoes "Adicionar ao carrinho" nessa vitrine: sem isso,
   um titulo de produto mais comprido (quebra em 2 linhas) empurra so aquele
   botao mais pra baixo, desalinhando a fileira toda. Correcao estrutural
   (nao depende do tamanho do texto de cada produto): cada card vira uma
   coluna flex, e o botao sempre gruda no fundo do card (`margin-top:auto`),
   nao importa quantas linhas o titulo ocupar. Funciona sozinho pra
   qualquer produto novo, sem precisar ajustar nada manualmente. */
.wc-block-grid__product {
	display: flex;
	flex-direction: column;
}

.wc-block-grid__product-add-to-cart {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* ---------- Carrinho / checkout ---------- */

.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	border-color: var(--cs-border);
	color: var(--cs-text);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--cs-border);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
	background-color: var(--cs-bg-alt);
	color: var(--cs-text);
	border: 1px solid var(--cs-border);
}

/* Quantidade (produto e carrinho): fundo padrao do Storefront (cinza claro)
   trocado pro escuro do tema, e botoes +/- (ver functions.php) alinhados
   junto do campo numerico, formando um unico controle. Os botoes +/- sao
   irmaos de ".quantity" no HTML do WooCommerce (nao filhos), por isso quem
   vira flex container e o formulario, nao a div .quantity. */
.woocommerce div.product form.cart,
.woocommerce table.cart td.product-quantity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
}

.quantity .qty {
	background-color: var(--cs-bg-alt);
	color: var(--cs-text);
	border: 1px solid var(--cs-border);
	border-left: none;
	border-right: none;
	width: 3rem;
	text-align: center;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cs-qty-btn {
	width: 2.25rem;
	padding: 0 !important;
	font-size: 1rem !important;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Botao de WhatsApp ao lado do "Adicionar ao Carrinho" */
.cs-product-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid #25D366;
	color: #25D366 !important;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cs-product-whatsapp-btn:hover {
	background-color: #25D366;
	color: var(--cs-bg) !important;
}

.cs-product-whatsapp-btn svg {
	flex-shrink: 0;
}

/* Selos de confianca na pagina de produto */
.cs-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--cs-border);
	list-style: none;
}

.cs-trust-badges li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--cs-text-muted);
}

.cs-trust-badges li::before {
	content: "";
	width: 6px;
	height: 6px;
	background-color: var(--cs-gold);
	border-radius: 50%;
	flex-shrink: 0;
}

/* Bloco "Observacoes" na descricao do produto (prazo de entrega, contato,
   cuidados) - separado da lista de itens da cesta, texto menor e mais
   discreto pra nao competir visualmente com o conteudo real da cesta. */
.cs-observacoes {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cs-border);
}

.cs-observacoes__title {
	font-family: "Playfair Display", serif;
	color: var(--cs-gold-dark);
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

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

.cs-observacoes li {
	font-size: 0.8125rem;
	color: var(--cs-text-muted);
	margin-bottom: 0.4rem;
}

/* Checkout novo (WooCommerce Blocks) usa outras classes que o checkout
   classico acima nao cobre. Sem isso, os campos ficam com fundo branco
   padrao do WooCommerce e o rotulo flutuante herda o creme do body,
   criando texto quase invisivel (creme sobre branco). */
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
	background-color: var(--cs-bg-alt) !important;
	color: var(--cs-text) !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: 0 !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--cs-text-muted) !important;
}

.wc-blocks-components-select__select-arrow {
	fill: var(--cs-text-muted);
}

/* ---------- Aviso de cookies (LGPD) ---------- */

.cs-cookie-banner[hidden] {
	display: none !important;
}

.cs-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background-color: var(--cs-bg-alt);
	border-top: 1px solid var(--cs-gold);
	color: var(--cs-text-muted);
	padding: 1rem 1.5rem;
	box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
}

.cs-cookie-banner p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	max-width: 60ch;
}

.cs-cookie-banner a {
	color: var(--cs-gold);
	text-decoration: underline;
}

.cs-cookie-banner__actions {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}

.cs-cookie-banner__actions button {
	border: 1px solid var(--cs-gold);
	background-color: transparent;
	color: var(--cs-text);
	font-family: "Inter", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}

#cs-cookie-accept {
	background-color: var(--cs-gold);
	color: var(--cs-on-accent);
}

#cs-cookie-accept:hover {
	background-color: var(--cs-gold-dark);
	border-color: var(--cs-gold-dark);
}

#cs-cookie-reject:hover {
	background-color: var(--cs-border);
}

@media (max-width: 600px) {
	.cs-cookie-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.cs-cookie-banner__actions {
		justify-content: stretch;
	}

	.cs-cookie-banner__actions button {
		flex: 1;
	}
}

/* Loja e paginas de categoria: o tema base deixa vaos muito grandes entre o
   caminho de navegacao, o titulo, a fileira de colecoes e a grade de produtos
   (3.7em, 6em e 2.6em respectivamente). Reduzido para caber mais conteudo na
   primeira tela, sem mexer no tamanho de nenhuma imagem. */
.storefront-breadcrumb {
	padding: 0.8em 0;
	margin-bottom: 1.2em;
}

.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	padding-bottom: 1.2em;
}

.storefront-sorting {
	margin-bottom: 1.2em;
}

/* Ajuste fino 2026-08-17: ainda sobrava vao entre o caminho de navegacao, o
   titulo da Loja, a fileira de colecoes e a paginacao. Estas regras vem depois
   das anteriores de proposito, para prevalecer sobre elas. */
.storefront-breadcrumb {
	padding: 0.4em 0;
	margin-bottom: 0.4em;
}

.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	margin-top: 0.5rem;
	padding-bottom: 0.4em;
}

.woocommerce-products-header .cs-shop-collections {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

/* Ajuste 2026-08-17 (2a rodada): reduzir mais o espaco acima do titulo "Loja". */
.storefront-breadcrumb {
	padding: 0.3em 0;
	margin-bottom: 0.1em;
}

.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	margin-top: 0;
}

/* Link "Ver todas as cestas" abaixo da grade nas paginas de categoria.
   Mesmo desenho dos botoes de colecao, para o cliente reconhecer na hora. */
.cs-voltar-loja {
	clear: both;
	text-align: center;
	margin: 1.75rem 0 0.5rem;
}

.cs-voltar-loja a {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--cs-border);
	color: var(--cs-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cs-voltar-loja a:hover,
.cs-voltar-loja a:focus {
	border-color: var(--cs-gold);
	color: var(--cs-gold);
}

/* Rodape: "Redes Sociais" e o icone do Instagram na mesma linha. */
.cs-social-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cs-social-line a {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* Faixa rotativa: espaco maior entre uma frase e outra. */
.cs-marquee__sep {
	display: inline-block;
	margin: 0 2.75rem;
	opacity: 0.55;
}

/* Link do Instagram dentro do conteudo (pagina Contato): icone e nome juntos. */
.cs-instagram-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

/* Campo de busca mais largo no cabecalho. O Storefront divide a linha em
   73,9% para a marca e 21,7% para a busca. Aqui a busca passa a 45% (mais que
   o dobro) e a marca recebe o restante. O logo nao muda de tamanho: ele tem
   largura maxima propria de 210px, bem abaixo do espaco que sobra.
   Dentro do mesmo @media do tema base, para o celular seguir intocado. */
@media (min-width: 768px) {
	.woocommerce-active .site-header .site-branding {
		width: 50.652%;
	}

	.woocommerce-active .site-header .site-search {
		width: 45%;
	}
}

/* ============================================================
   RESPONSIVO - revisao completa 2026-08-17
   Corrige seis defeitos medidos em navegador real nos tamanhos
   320, 360, 768 e 1024 pixels. Cada bloco diz o problema que resolve.
   ============================================================ */

/* 1. Botao "Quero informacoes desta cesta" ficava cortado: tinha 312px de
      largura dentro de uma coluna de 275px, e a regra de nao quebrar linha
      impedia o texto de se ajustar. Agora ocupa a largura disponivel e quebra
      quando precisa. */
.cs-product-whatsapp-btn {
	white-space: normal;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: center;
	text-align: center;
	line-height: 1.3;
}

/* 2. Titulos de pagina tinham tamanho fixo de ~42px em qualquer tela, o que e
      grande demais em celular (ocupava tres linhas). Agora acompanham a largura
      da tela, sem passar do tamanho atual no computador. */
h1,
.page-title,
.entry-title,
.woocommerce-products-header__title,
.product_title {
	font-size: clamp(1.75rem, 6vw, 2.618rem);
	line-height: 1.15;
	overflow-wrap: break-word;
}

h2 {
	font-size: clamp(1.35rem, 4.5vw, 1.9rem);
	overflow-wrap: break-word;
}

/* 3. Cards de produto tinham alturas diferentes (413 a 452px) porque o nome
      ocupa uma, duas ou tres linhas. Isso desalinhava as linhas da grade no
      tablet. Agora o card e uma coluna e o botao fica colado no rodape dele,
      entao todos alinham independente do tamanho do nome. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* Sem hifenizacao: nome de produto nao pode ser cortado no meio da palavra
	   (ex: "Ver-melha"). Quebra so acontece entre palavras. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.woocommerce ul.products li.product .price {
	margin-top: auto;
}

.woocommerce ul.products li.product .button {
	margin-top: 0.5rem;
}

/* 4. O menu de subcategorias tinha largura minima de 220px e escapava da tela
      em celular. Agora nunca passa da largura disponivel. */
.cs-shop-collections__dropdown {
	max-width: calc(100vw - 2rem);
}

/* 5. Aviso de cookies ocupava mais de metade da primeira tela no celular e os
      dois botoes ficavam de tamanhos diferentes, com texto em tres linhas. */
@media (max-width: 600px) {
	.cs-cookie-banner {
		font-size: 0.8125rem;
		line-height: 1.4;
		padding: 0.9rem 1rem;
	}

	.cs-cookie-banner__actions {
		display: flex;
		gap: 0.5rem;
	}

	.cs-cookie-banner__actions button {
		flex: 1 1 0;
		min-width: 0;
		font-size: 0.75rem;
		padding: 0.6rem 0.4rem;
		line-height: 1.2;
	}
}

/* 6. Links do menu e do rodape tinham 17px de altura, abaixo do minimo
      recomendado para toque (cerca de 44px). */
@media (max-width: 767px) {
	.main-navigation ul li a,
	.cs-footer-col a,
	.cs-shop-collections a {
		display: block;
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
	}

	.cs-shop-collections a {
		display: inline-block;
	}
}

/* 7. Rede de seguranca: nenhuma imagem ou video pode empurrar a pagina para
      os lados, e palavra comprida nao estoura o bloco. */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

body {
	overflow-x: hidden;
}

/* Nenhum texto do site pode ser cortado no meio da palavra. */
body,
h1, h2, h3, h4,
p, a, span, li {
	hyphens: none;
	-webkit-hyphens: none;
}

/* Menu suspenso de subcategorias nao existe em celular: nao ha "passar o
   mouse" em tela de toque, e ele escapava 10px pela lateral. Em telas
   pequenas o cliente toca na colecao e cai na pagina dela, que ja mostra as
   subcategorias. */
@media (max-width: 767px) {
	.cs-shop-collections__dropdown {
		display: none;
	}
}

/* ---------- Correcoes vistas so em tela de celular (2026-08-17) ---------- */

/* 8. O banner e uma arte larga, feita para computador. No celular, recortar
      pelo centro cortava as laterais e a frase virava "estas de na" em vez de
      "Cestas de Natal 2026". Em telas estreitas a arte passa a caber inteira,
      e a altura acompanha a proporcao para nao sobrar faixa preta. */
@media (max-width: 767px) {
	.cs-hero {
		height: auto;
		min-height: 0;
		/* Proporcao exata das artes (1920x534). Assim o banner aparece inteiro
		   e sem faixa preta em cima e embaixo. */
		aspect-ratio: 1920 / 534;
	}

	.cs-hero__slide {
		background-size: contain;
		background-repeat: no-repeat;
	}
}

/* 9. O botao flutuante do WhatsApp tapava o texto da faixa de beneficios.
      Em celular ele fica menor, so com o icone, e mais para o canto. */
@media (max-width: 767px) {
	.cs-whatsapp-float {
		right: 0.75rem;
		bottom: 0.75rem;
		padding: 0.7rem;
		gap: 0;
	}

	.cs-whatsapp-float span {
		display: none;
	}

	/* Espaco extra no fim da pagina para o botao nunca cobrir o ultimo texto. */
	.site-footer {
		padding-bottom: 4.5rem;
	}
}

/* ============================================================
   Botao "Adicionar ao carrinho" sempre colado na base do card.
   Antes o alinhamento estava ancorado no preco, e produtos cujo
   preco se comporta diferente deixavam o botao ate 20px fora de
   linha. Agora a ancora e o proprio botao, entao ele vai para o
   fim do card independente do que exista acima: nome de uma, duas
   ou tres linhas, com preco ou sem.
   Vale em todas as telas com card de produto: home, Loja,
   categorias e subcategorias.
   ============================================================ */
.woocommerce ul.products li.product {
	padding-bottom: 0;
}

.woocommerce ul.products li.product .price {
	margin-top: 0;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	margin-bottom: 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ---------- Ajustes da paleta aprovada (2026-08-19) ---------- */

/* Sem esta regra o botao de cookies ficaria com rosa sobre rosa ao passar o
   mouse, porque o hover reaproveita a mesma cor de acao. */
#cs-cookie-accept:hover {
	background-color: #376E6F;
	border-color: #376E6F;
	color: #FFFFFF;
}


/* ---------------------------------------------------------------
   Menu do celular: a lista fica presa em altura zero porque a regra
   do Storefront que abre o menu nao alcanca ul.nav-menu, e o elemento
   .handheld-navigation nao existe nesta pagina. Esta regra abre.
   Acrescentado em 28/08/2026.
   --------------------------------------------------------------- */
.main-navigation.toggled ul.nav-menu {
	max-height: 9999px;
}

/* A trava de verdade: no celular o Storefront esconde a navegacao inteira
   com display:none, porque espera encontrar uma .handheld-navigation no
   lugar, que este tema nao tem. Sem esta linha o menu nunca aparece,
   mesmo com a altura liberada acima. Acrescentado em 28/08/2026. */
.main-navigation.toggled .primary-navigation {
	display: block;
}