/* ==========================================================================
   Cortinar — base do site (carrega em TODAS as páginas)
   Design tokens, barra de anúncio, botões, layout de página e WooCommerce.
   Estilos exclusivos da home ficam em home.css.
   ========================================================================== */

:root {
	/* Cores semânticas */
	--c-vinho: #800203;
	--c-vinho-escuro: #5e0102;
	--c-vinho-claro: #a11f24;
	--c-gold: #c9a227;
	--c-gold-escuro: #a8871a;
	--c-creme: #faf6f2;
	--c-creme-2: #f2e9e1;
	--c-grafite: #2a2a2a;
	--c-texto-2: #5b5350;
	--c-branco: #ffffff;
	--c-borda: #e8ded5;

	/* Tipografia */
	--f-serif: "Playfair Display", Georgia, serif;
	--f-sans: "Inter", system-ui, -apple-system, sans-serif;

	/* Espaçamento (8pt) */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
	--sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

	/* Raios e sombras */
	--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;
	--sh-1: 0 2px 8px rgba(42, 42, 42, .06);
	--sh-2: 0 10px 30px rgba(42, 42, 42, .10);
	--sh-3: 0 20px 50px rgba(128, 2, 3, .18);

	--ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Utilitários ---------- */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: var(--sp-4);
}

.overline {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--c-vinho);
	margin-bottom: var(--sp-3);
}
.overline--light { color: var(--c-gold); }

/* ---------- Botões ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 16px 28px;
	border-radius: var(--r-full);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
	min-height: 44px;
}
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--primary { background: var(--c-vinho); color: #fff; }
.btn--primary:hover { background: var(--c-vinho-escuro); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-3); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn--ghost:hover { background: #fff; color: var(--c-vinho); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--c-vinho); border-color: var(--c-vinho); }
.btn--outline:hover { background: var(--c-vinho); color: #fff; transform: translateY(-2px); }
.btn--gold { background: var(--c-gold); color: #2a1f00; }
.btn--gold:hover { background: var(--c-gold-escuro); color: #2a1f00; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201,162,39,.35); }

/* ---------- Barra de anúncio (topo, site-wide) ---------- */
.cortinar-announce {
	background: var(--c-vinho-escuro);
	color: #fff;
	font-family: var(--f-sans);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	padding: 9px 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	letter-spacing: .02em;
	box-sizing: border-box;
}
.cortinar-announce__sep { opacity: .5; }

/* ==========================================================================
   LAYOUT DAS PÁGINAS INTERNAS
   Estrutura do Hello Elementor:
   main.site-main > .page-header > h1.entry-title  +  .page-content
   ========================================================================== */

body { font-family: var(--f-sans); color: var(--c-grafite); }

/*
 * O Hello Elementor limita `.site-main` a 1140px, o que impede faixas de
 * ponta a ponta. Liberamos a largura e deixamos os containers internos
 * cuidarem da centralização. Mesma especificidade do tema pai (0,2,1) e
 * nossa folha carrega depois, então esta regra vence.
 */
body:not([class*="elementor-page-"]) .site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

/* O título também é limitado pelo tema pai — usamos nosso próprio container */
.page-header .entry-title {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--sp-4);
	box-sizing: border-box;
}

/* Faixa de título da página */
.site-main > .page-header,
.woocommerce-products-header {
	background: var(--c-creme);
	border-bottom: 1px solid var(--c-borda);
	padding-block: var(--sp-6);
	margin-bottom: var(--sp-7);
	text-align: center;
}
.site-main > .page-header > *,
.woocommerce-products-header > * {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--sp-4);
	box-sizing: border-box;
}
.site-main .entry-title,
.woocommerce-products-header__title {
	font-family: var(--f-serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	color: var(--c-vinho);
	margin: 0;
}

/* Conteúdo da página */
.site-main > .page-content,
.site-main > .entry-content {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	padding: 0 var(--sp-4) var(--sp-8);
	box-sizing: border-box;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--c-texto-2);
}
.site-main > .page-content > h2,
.site-main > .page-content > h3 {
	font-family: var(--f-serif);
	color: var(--c-vinho);
	line-height: 1.25;
	margin-top: var(--sp-6);
}
.site-main > .page-content a { color: var(--c-vinho); }
.site-main > .page-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* A página do simulador não precisa da caixa estreita */
.page-template-default .cortina-sim,
.page-content .cortina-sim { max-width: 560px; margin-inline: auto; }

/* ==========================================================================
   WOOCOMMERCE — geral
   ========================================================================== */
.woocommerce .site-main,
.woocommerce-page .site-main { padding-bottom: var(--sp-8); }

/* Envolve o conteúdo das páginas Woo num container centralizado */
.woocommerce main.site-main > .woocommerce,
.woocommerce main.site-main > .woocommerce-notices-wrapper,
.woocommerce-page main.site-main > .woocommerce,
.woocommerce-page main.site-main > .woocommerce-notices-wrapper,
.woocommerce main.site-main > ul.products,
.woocommerce main.site-main > nav.woocommerce-pagination,
.woocommerce main.site-main > .woocommerce-breadcrumb,
.woocommerce main.site-main > div.product,
.woocommerce main.site-main > .term-description {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--sp-4);
	box-sizing: border-box;
}

/* Migalhas */
.woocommerce-breadcrumb {
	font-size: 13.5px;
	color: var(--c-texto-2);
	margin-bottom: var(--sp-4);
}
.woocommerce-breadcrumb a { color: var(--c-vinho); text-decoration: none; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Barra de contagem + ordenação (agrupada via hook no functions.php) */
.cortinar-toolbar {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto var(--sp-5);
	padding-inline: var(--sp-4);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
}
/* O WooCommerce usa float nesses dois — anulamos para o flex funcionar */
.cortinar-toolbar .woocommerce-result-count,
.cortinar-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}
.woocommerce-result-count { color: var(--c-texto-2); font-size: 14.5px; }
.woocommerce-ordering select {
	padding: 10px 14px;
	border: 1.5px solid var(--c-borda);
	border-radius: var(--r-sm);
	background: var(--c-creme);
	font: inherit;
	font-size: 14.5px;
	color: var(--c-grafite);
}

/* Avisos — o WooCommerce posiciona um ícone via ::before à esquerda,
   por isso o padding-left precisa reservar espaço para ele. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--r-md);
	border: 1px solid var(--c-borda);
	border-top: 3px solid var(--c-vinho);
	background: var(--c-creme);
	color: var(--c-grafite);
	padding: 18px 20px 18px 56px;
	font-size: 15px;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { left: 22px; top: 20px; }
.woocommerce-message a.button,
.woocommerce-info a.button { float: right; }

/* ==========================================================================
   WOOCOMMERCE — grade de produtos (loja e categorias)
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0 var(--sp-4);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	margin: 0;
	background: var(--c-creme-2);
	display: block;
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--f-sans);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-grafite);
	padding: var(--sp-3) var(--sp-3) var(--sp-1);
	margin: 0;
}
.woocommerce ul.products li.product .price {
	color: var(--c-vinho);
	font-weight: 700;
	font-size: 18px;
	padding: 0 var(--sp-3);
	margin: 0 0 var(--sp-3);
	display: block;
}
.woocommerce ul.products li.product .price del { color: var(--c-texto-2); font-weight: 400; font-size: 14px; }
.woocommerce ul.products li.product .button {
	margin: auto var(--sp-3) var(--sp-3);
	text-align: center;
}
.woocommerce ul.products li.product .onsale {
	background: var(--c-vinho);
	color: #fff;
	border-radius: var(--r-full);
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	top: 10px;
	left: 10px;
	right: auto;
	margin: 0;
	min-height: 0;
	line-height: 1.4;
}

/* Paginação */
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: var(--r-sm);
	padding: 10px 15px;
	color: var(--c-vinho);
	font-weight: 600;
	background: var(--c-creme);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--c-vinho); color: #fff; }

/* ==========================================================================
   WOOCOMMERCE — página do produto
   ========================================================================== */
.woocommerce div.product { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--r-md); background: var(--c-creme-2); }

.woocommerce div.product .product_title {
	font-family: var(--f-serif);
	font-weight: 600;
	font-size: clamp(24px, 3.2vw, 36px);
	line-height: 1.18;
	color: var(--c-vinho);
	margin: 0 0 var(--sp-3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--c-vinho);
	font-size: 28px;
	font-weight: 800;
	margin-bottom: var(--sp-4);
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--c-texto-2);
	line-height: 1.7;
	margin-bottom: var(--sp-4);
}
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-5); }
.woocommerce div.product form.cart .quantity input {
	width: 78px;
	padding: 13px 10px;
	border: 1.5px solid var(--c-borda);
	border-radius: var(--r-sm);
	background: var(--c-creme);
	font: inherit;
	text-align: center;
}
.woocommerce div.product .product_meta { font-size: 14px; color: var(--c-texto-2); border-top: 1px solid var(--c-borda); padding-top: var(--sp-3); }
.woocommerce div.product .product_meta a { color: var(--c-vinho); }

/* Abas */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--sp-4); display: flex; gap: 6px; flex-wrap: wrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--c-creme);
	border: 1px solid var(--c-borda);
	border-radius: var(--r-full);
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 11px 20px; color: var(--c-grafite); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--c-vinho); border-color: var(--c-vinho); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs h2 { font-family: var(--f-serif); color: var(--c-vinho); }

/* Relacionados */
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; margin-top: var(--sp-6); }
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-family: var(--f-serif);
	font-size: 26px;
	color: var(--c-vinho);
	margin-bottom: var(--sp-4);
}
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products { padding-inline: 0; }

/* ==========================================================================
   WOOCOMMERCE — botões
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--c-vinho);
	color: #fff;
	border-radius: var(--r-full);
	font-weight: 600;
	font-size: 15px;
	padding: 13px 24px;
	min-height: 44px;
	line-height: 1.2;
	transition: background .2s var(--ease), transform .2s var(--ease);
	text-shadow: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--c-vinho-escuro);
	color: #fff;
	transform: translateY(-2px);
}

/* ==========================================================================
   WOOCOMMERCE — carrinho, checkout e conta
   ========================================================================== */
.woocommerce table.shop_table {
	border: 1px solid var(--c-borda);
	border-radius: var(--r-md);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--c-creme); color: var(--c-grafite); font-size: 14px; }
.woocommerce table.shop_table td { border-top: 1px solid var(--c-borda); }
.woocommerce table.cart img { width: 64px; border-radius: var(--r-sm); }

/* Carrinho, checkout e conta merecem mais largura que uma página de texto */
.woocommerce-cart .site-main > .page-content,
.woocommerce-checkout .site-main > .page-content,
.woocommerce-account .site-main > .page-content { max-width: 1200px; }

/* Campo de cupom sem espremer */
.woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.woocommerce table.cart td.actions .coupon input#coupon_code {
	width: auto;
	min-width: 190px;
	padding: 12px 14px;
	border: 1.5px solid var(--c-borda);
	border-radius: var(--r-sm);
	background: var(--c-creme);
	font: inherit;
	font-size: 15px;
}

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-family: var(--f-serif);
	color: var(--c-vinho);
	font-size: 22px;
}

/* Campos de formulário */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
	padding: 12px 14px;
	border: 1.5px solid var(--c-borda);
	border-radius: var(--r-sm);
	background: var(--c-creme);
	font: inherit;
	font-size: 15px;
	color: var(--c-grafite);
	min-height: 46px;
	box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--c-vinho); background: #fff; }
.woocommerce form .form-row label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }

.woocommerce-checkout #payment { background: var(--c-creme); border-radius: var(--r-md); border: 1px solid var(--c-borda); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--r-sm); }

/* Minha conta */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--r-sm);
	color: var(--c-grafite);
	text-decoration: none;
	font-weight: 600;
	background: var(--c-creme);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--c-vinho); color: #fff; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce div.product { grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
}
@media (min-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.btn, .woocommerce ul.products li.product, .woocommerce a.button { transition: none; }
}