/*
Theme Name: Posterity – Mestre Capote
Theme URI: https://mestrecapote.ao
Description: Child theme do Posterity com a identidade visual da Mestre Capote – Confeitaria Artesanal (laranja dourado, serifada clássica, cartões "bilhete" com cantos recortados) e estilos WooCommerce.
Author: Mestre Capote
Template: posterity
Version: 1.0.0
Text Domain: posterity-mestre-capote
*/

/* ==========================================================================
   1. TOKENS DE MARCA
   Origem: logótipo + carta de apresentação Mestre Capote
   ========================================================================== */
:root {
	--mc-orange:      #F3A941;   /* laranja do logótipo – fundos, botões, ornamentos */
	--mc-orange-deep: #9A5A08;   /* laranja escuro – TEXTO (contraste 5.2:1 sobre #F8F8F8) */
	--mc-orange-soft: #FDF1DD;   /* tinta suave para realces */
	--mc-ink:         #1F1F1F;   /* texto e "Confeitaria Artesanal" do logótipo */
	--mc-paper:       #F8F8F8;   /* fundo das páginas */
	--mc-card:        #FFFFFF;

	--mc-font-display: 'Cactus Classical Serif', 'Source Serif 4', Georgia, serif;
	--mc-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--mc-notch: 16px;            /* raio do recorte dos cartões */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html body,
body #mid,
body #content {
	background-color: var(--mc-paper);
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
}

body,
button, input, select, textarea {
	font-family: var(--mc-font-body);
}

::selection { background: var(--mc-orange); color: var(--mc-ink); }

:focus-visible {
	outline: 2px solid var(--mc-orange);
	outline-offset: 2px;
}

/* Títulos: serifada clássica, sempre peso 400 (a fonte só tem regular) */
h1, h2, h3, h4, h5, h6,
.page-title, .widget h3.title, .widgettitle,
.woocommerce div.product .product_title,
.woocommerce-loop-product__title {
	font-family: var(--mc-font-display) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	color: var(--mc-orange);
}
h1, h2, .page-title { text-transform: uppercase; letter-spacing: .04em; }
h3, h4, h5, h6      { text-transform: none; }

/* Laranja #F3A941 sobre claro só passa para texto grande (≥24px).
   Para texto pequeno usar o tom escuro. */
h4, h5, h6,
.widget h3.title, .widgettitle { color: var(--mc-orange-deep); }

a { color: var(--mc-orange-deep); text-decoration: none; }
a:hover { color: var(--mc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   3. ORNAMENTOS  (uso: <div class="mc-divider"></div> num bloco HTML)
   ========================================================================== */
.mc-divider {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16' viewBox='0 0 72 16'%3E%3Cg fill='%23F3A941'%3E%3Cpath id='s' d='M12 0c.6 4.6 2.8 7.4 7 8-4.2.6-6.4 3.4-7 8-.6-4.6-2.8-7.4-7-8 4.2-.6 6.4-3.4 7-8z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E");
	height: 16px;
	margin: 2rem auto;
	max-width: 100%;
	background:
		var(--star) center / 72px 16px no-repeat,
		linear-gradient(var(--mc-orange), var(--mc-orange)) left center / calc(50% - 44px) 1px no-repeat,
		linear-gradient(var(--mc-orange), var(--mc-orange)) right center / calc(50% - 44px) 1px no-repeat;
}

/* Etiqueta de destaque (ex.: "Área de Entrega", "O nosso posicionamento") */
.mc-tag {
	display: inline-block;
	padding: .2em .8em;
	background: var(--mc-orange);
	color: var(--mc-ink);
	font-family: var(--mc-font-display);
}

/* ==========================================================================
   4. CARTÕES "BILHETE"  – cantos recortados + fio laranja
   Usar a classe .mc-ticket em qualquer bloco; já aplicado aos produtos.
   ========================================================================== */
.mc-ticket,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce div.product .woocommerce-tabs .panel {
	--n: var(--mc-notch);
	border: 1px solid var(--mc-orange);
	background-color: var(--mc-card);
	background-origin: border-box;
	background-image:
		radial-gradient(circle at 0 0,       transparent var(--n), var(--mc-orange) var(--n), var(--mc-orange) calc(var(--n) + 1px), transparent calc(var(--n) + 1px)),
		radial-gradient(circle at 100% 0,    transparent var(--n), var(--mc-orange) var(--n), var(--mc-orange) calc(var(--n) + 1px), transparent calc(var(--n) + 1px)),
		radial-gradient(circle at 0 100%,    transparent var(--n), var(--mc-orange) var(--n), var(--mc-orange) calc(var(--n) + 1px), transparent calc(var(--n) + 1px)),
		radial-gradient(circle at 100% 100%, transparent var(--n), var(--mc-orange) var(--n), var(--mc-orange) calc(var(--n) + 1px), transparent calc(var(--n) + 1px));
	-webkit-mask:
		radial-gradient(circle at 0 0,       transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 0,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 0 100%,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n));
	-webkit-mask-composite: source-in, source-in, source-in;
	mask:
		radial-gradient(circle at 0 0,       transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 0,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 0 100%,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n));
	mask-composite: intersect, intersect, intersect;
	border-radius: 0;
	box-shadow: none;
}

.mc-ticket { padding: 1.75rem 2rem; }

@media (max-width: 600px) {
	:root { --mc-notch: 12px; }
	.mc-ticket { padding: 1.25rem; }
}

/* ==========================================================================
   5. CABEÇALHO
   ========================================================================== */
#header,
#header.a13-horizontal,
#header .head {
	background-color: var(--mc-paper);
}
#header.a13-horizontal { border-bottom: 1px solid rgba(243, 169, 65, .55); }

/* Barra mais fina — o Posterity vem com muito espaço vertical por defeito */
#header .head,
#header .head .container,
#header .head-inner,
#header .container-inner {
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
	min-height: 0 !important;
}
#header .navigation-bar,
#header .navigation-bar > li,
#header .navigation-bar > li > a {
	padding-top: .6rem !important;
	padding-bottom: .6rem !important;
}
#header .logo-container img,
#header .logo img { max-height: 44px; width: auto; }

#header .navigation-bar a,
#header-tools .tool a {
	font-family: var(--mc-font-body);
	font-weight: 500;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-ink);
	text-decoration: none;
}
#header .navigation-bar li:hover > a,
#header .navigation-bar li.current-menu-item > a,
#header .navigation-bar li.current_page_item > a,
#header-tools .tool a:hover { color: var(--mc-orange-deep); }

/* ==========================================================================
   6. BOTÕES  – cápsula, como o emblema da marca
   ========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.wc-block-components-button,
input[type="submit"],
button[type="submit"],
.a13-button, .button {
	background-color: var(--mc-orange);
	color: var(--mc-ink);
	border: 1px solid var(--mc-orange);
	border-radius: 999px;
	font-family: var(--mc-font-body);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .25s, color .25s, border-color .25s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover,
.wc-block-components-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.a13-button:hover, .button:hover {
	background-color: var(--mc-ink);
	border-color: var(--mc-ink);
	color: var(--mc-orange);
	text-decoration: none;
}

/* Campos de formulário */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-cart table.cart td.actions .coupon .input-text {
	background: var(--mc-card);
	border: 1px solid rgba(31, 31, 31, .25);
	border-radius: 0;
	color: var(--mc-ink);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--mc-orange);
	outline: none;
	box-shadow: 0 0 0 2px rgba(243, 169, 65, .35);
}

/* ==========================================================================
   7. WOOCOMMERCE – LOJA
   ========================================================================== */
/* Cartão do produto */
.woocommerce ul.products li.product {
	padding: 14px 14px 20px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
}
.woocommerce ul.products li.product a img {
	margin-bottom: 1rem;
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--mc-ink);
	text-transform: none;
	letter-spacing: .01em;
	padding: 0 .5rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--mc-font-body);
	font-weight: 600;
	color: var(--mc-orange-deep);
}
.woocommerce ul.products li.product .price del { color: rgba(31, 31, 31, .5); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin-top: .75rem; }

/* Selo de promoção */
.woocommerce span.onsale {
	background: var(--mc-ink);
	color: var(--mc-orange);
	border-radius: 999px;
	font-family: var(--mc-font-body);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	min-height: 0; min-width: 0;
	line-height: 1;
	padding: .55em .9em;
}

/* Estrelas, migalhas, ordenação */
.woocommerce .star-rating,
.woocommerce .star-rating span::before { color: var(--mc-orange); }
.woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: rgba(31, 31, 31, .7); font-size: .875rem; }
.woocommerce-result-count { color: rgba(31, 31, 31, .7); }

/* Página de produto */
.woocommerce div.product .product_title { font-size: clamp(1.75rem, 3vw, 2.5rem); text-transform: none; }
.woocommerce div.product .woocommerce-product-details__short-description { line-height: 1.7; }
.woocommerce div.product .product_meta { font-size: .875rem; color: rgba(31, 31, 31, .7); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--mc-font-display);
	color: var(--mc-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mc-orange-deep); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 1.75rem 2rem; margin-top: 1rem; }
.woocommerce .quantity .qty {
	border: 1px solid var(--mc-orange);
	border-radius: 999px;
	background: var(--mc-card);
}

/* Carrinho e checkout */
.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: rgba(243, 169, 65, .45); }
.woocommerce table.shop_table th {
	font-family: var(--mc-font-display);
	font-weight: 400;
	color: var(--mc-ink);
}
.woocommerce .cart_totals,
.woocommerce-checkout #order_review { padding: 1.5rem 1.75rem; }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.5rem; }
.woocommerce #payment { background: var(--mc-orange-soft); border-radius: 0; }
.woocommerce #payment div.payment_box { background: var(--mc-card); color: var(--mc-ink); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--mc-card); }

/* Avisos */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--mc-card);
	color: var(--mc-ink);
	border-top: 3px solid var(--mc-orange);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--mc-orange-deep); }
.woocommerce-error { border-top-color: #b3261e; }
.woocommerce-error::before { color: #b3261e; }

/* Paginação */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { color: var(--mc-ink); border-color: var(--mc-orange); }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--mc-orange); color: var(--mc-ink); }

/* ==========================================================================
   8. RODAPÉ – tinta escura, letras claras, detalhes laranja
   ========================================================================== */
#footer,
#footer .foot-widgets,
#footer .foot-items {
	background-color: var(--mc-ink);
	color: var(--mc-paper);
}
#footer h3, #footer .widget h3.title, #footer .widgettitle { color: var(--mc-orange); }
#footer a { color: var(--mc-paper); }
#footer a:hover { color: var(--mc-orange); }
#footer .foot-items, #footer .footer-separator { border-color: rgba(243, 169, 65, .35); }

/* Botão "voltar ao topo" */
#to-top { background: var(--mc-orange); color: var(--mc-ink); border-radius: 999px; }
#to-top:hover { background: var(--mc-ink); color: var(--mc-orange); }

/* ==========================================================================
   9. PÁGINA INICIAL  (front-page.php)
   ========================================================================== */
#mc-front { overflow: hidden; }
#mc-front .mc-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
#mc-front section.mc-section { padding: 5rem 0; }
#mc-front .mc-section-alt  { background: var(--mc-orange-soft); }
#mc-front .mc-section-dark { background: var(--mc-ink); }
#mc-front .mc-center { text-align: center; }
#mc-front .mc-light, #mc-front .mc-light h2, #mc-front .mc-section-dark h2 { color: var(--mc-paper); }

#mc-front .mc-eyebrow {
	display: block;
	font-family: var(--mc-font-body);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .8125rem;
	color: var(--mc-orange-deep);
	margin-bottom: .5rem;
}
#mc-front .mc-eyebrow-light { color: var(--mc-orange); }
#mc-front .mc-lede { font-size: 1.125rem; color: rgba(31, 31, 31, .75); max-width: 640px; margin: .5rem auto 0; }
#mc-front .mc-section-dark .mc-lede { color: rgba(248, 248, 248, .8); }

/* Hero */
#mc-front .mc-hero {
	position: relative;
	min-height: 68vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#mc-front .mc-hero-overlay {
	width: 100%;
	min-height: 68vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(31,31,31,.55), rgba(31,31,31,.75));
}
#mc-front .mc-hero-inner { text-align: center; padding: 24px; }
#mc-front .mc-hero-logo { max-width: 260px; width: 70%; margin: 0 auto 1.5rem; display: block; }
#mc-front .mc-hero-kicker {
	color: var(--mc-orange);
	font-family: var(--mc-font-body);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .875rem;
	margin: 0 0 .75rem;
}
#mc-front .mc-hero-title {
	color: var(--mc-paper);
	font-size: clamp(2rem, 5vw, 3.25rem);
	text-transform: none;
	margin: 0 0 2rem;
}
#mc-front .mc-hero-inner .a13-button { margin: 0 .4rem; }
#mc-front .mc-button-outline {
	background: transparent;
	color: var(--mc-paper);
	border-color: var(--mc-paper);
}
#mc-front .mc-button-outline:hover { background: var(--mc-orange); border-color: var(--mc-orange); color: var(--mc-ink); }

/* Colunas "Quem somos" */
#mc-front .mc-cols-2 { display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; }
#mc-front .mc-col { flex: 1 1 420px; }
#mc-front .mc-col-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: none; margin-top: 0; }
#mc-front .mc-col-text p { line-height: 1.75; color: rgba(31, 31, 31, .85); }
#mc-front .mc-photo-ticket {
	width: 100%;
	height: auto;
	display: block;
	--n: 28px;
	background-color: var(--mc-card);
	-webkit-mask:
		radial-gradient(circle at 0 0,       transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 0,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 0 100%,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n));
	-webkit-mask-composite: source-in, source-in, source-in;
	mask:
		radial-gradient(circle at 0 0,       transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 0,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 0 100%,    transparent calc(var(--n) - 1px), #000 var(--n)),
		radial-gradient(circle at 100% 100%, transparent calc(var(--n) - 1px), #000 var(--n));
	mask-composite: intersect, intersect, intersect;
}

/* Grelhas */
#mc-front .mc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1rem; }
#mc-front .mc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
#mc-front .mc-feature { text-align: center; }
#mc-front .mc-feature img {
	width: 96px; height: 96px; object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--mc-orange);
	margin: 0 auto 1.25rem;
	display: block;
}
#mc-front .mc-feature h3 { margin: 0 0 .5rem; text-transform: none; }
#mc-front .mc-feature p, #mc-front .mc-grid-3 p { color: rgba(31, 31, 31, .8); line-height: 1.6; margin: 0; }

/* Galeria */
#mc-front .mc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
#mc-front .mc-gallery img {
	width: 100%; height: 220px; object-fit: cover;
	border: 1px solid var(--mc-orange);
}

/* CTA de contacto */
#mc-front .mc-logo-small { max-width: 160px; margin-bottom: 1.5rem; }
#mc-front .mc-contact-row { font-size: 1.125rem; margin: .5rem 0; }
#mc-front .mc-contact-row a { color: var(--mc-orange); }
#mc-front .mc-contact-row a:hover { color: var(--mc-paper); }

@media (max-width: 900px) {
	#mc-front .mc-grid-4 { grid-template-columns: repeat(2, 1fr); }
	#mc-front .mc-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	#mc-front .mc-grid-3 { grid-template-columns: 1fr; }
	#mc-front section.mc-section { padding: 3rem 0; }
	#mc-front .mc-hero, #mc-front .mc-hero-overlay { min-height: 58vh; }
}

/* ==========================================================================
   9. HEADER FIXO AO SCROLL
   ========================================================================== */
body.mc-scrolled #header,
body.mc-scrolled #header.a13-horizontal {
	box-shadow: 0 2px 14px rgba(31,31,31,.12);
}
#header .navigation-bar li > a { position: relative; }
#header .navigation-bar li > a::after {
	content: "";
	position: absolute; left: 0; bottom: -4px;
	width: 0; height: 2px;
	background: var(--mc-orange);
	transition: width .25s ease;
}
#header .navigation-bar li:hover > a::after,
#header .navigation-bar li.current-menu-item > a::after,
#header .navigation-bar li.current_page_item > a::after { width: 100%; }

/* ==========================================================================
   10. HERO EM SLIDER + ANIMAÇÕES DE ENTRADA
   ========================================================================== */
#mc-front .mc-hero { position: relative; overflow: hidden; background: var(--mc-ink); }
#mc-front .mc-hero-slides { position: absolute; inset: 0; }
#mc-front .mc-hero-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.4s ease;
}
#mc-front .mc-hero-slide.is-active { opacity: 1; }
#mc-front .mc-hero-overlay {
	position: relative; z-index: 2;
	background: linear-gradient(180deg, rgba(31,31,31,.35), rgba(31,31,31,.65));
}
#mc-front .mc-hero-dots {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px;
	display: flex; justify-content: center; gap: .5rem;
}
#mc-front .mc-hero-dots button {
	width: 9px; height: 9px; border-radius: 50%;
	border: 1px solid var(--mc-paper); background: transparent;
	padding: 0; cursor: pointer; opacity: .7;
}
#mc-front .mc-hero-dots button.is-active { background: var(--mc-orange); border-color: var(--mc-orange); opacity: 1; }

#mc-front .mc-hero-logo,
#mc-front .mc-hero-kicker,
#mc-front .mc-hero-title,
#mc-front .mc-hero-inner .a13-button {
	opacity: 0; transform: translateY(18px);
	animation: mcFadeUp .8s ease forwards;
}
#mc-front .mc-hero-logo   { animation-delay: .1s; }
#mc-front .mc-hero-kicker { animation-delay: .3s; }
#mc-front .mc-hero-title  { animation-delay: .45s; }
#mc-front .mc-hero-inner .a13-button:nth-of-type(1) { animation-delay: .65s; }
#mc-front .mc-hero-inner .a13-button:nth-of-type(2) { animation-delay: .8s; }
@keyframes mcFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   11. REVELAÇÃO AO SCROLL  (classe .mc-reveal + JS adiciona .is-visible)
   ========================================================================== */
#mc-front .mc-reveal {
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}
#mc-front .mc-reveal.is-visible { opacity: 1; transform: none; }
#mc-front .mc-grid-2 .mc-reveal:nth-child(2),
#mc-front .mc-grid-3 .mc-reveal:nth-child(2),
#mc-front .mc-grid-3 .mc-reveal:nth-child(3),
#mc-front .mc-grid-4 .mc-reveal:nth-child(2) { transition-delay: .1s; }
#mc-front .mc-grid-3 .mc-reveal:nth-child(3),
#mc-front .mc-grid-4 .mc-reveal:nth-child(3) { transition-delay: .2s; }
#mc-front .mc-grid-4 .mc-reveal:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
	#mc-front .mc-reveal, #mc-front .mc-hero-logo, #mc-front .mc-hero-kicker,
	#mc-front .mc-hero-title, #mc-front .mc-hero-inner .a13-button {
		opacity: 1 !important; transform: none !important; animation: none !important;
	}
}

/* ==========================================================================
   12. MISSÃO & VISÃO
   ========================================================================== */
#mc-front .mc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
#mc-front .mc-mv-icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--mc-orange); color: var(--mc-ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mc-font-display); font-size: 1.5rem; margin-bottom: 1rem;
}
@media (max-width: 700px) { #mc-front .mc-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   13. GRELHA DE PRODUTOS (secção "Os Nossos Produtos" na home)
   ========================================================================== */
#mc-front .mc-shop-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
#mc-front .mc-shop-card { padding: 1.25rem 1.25rem 1.5rem; text-align: center; }
#mc-front .mc-shop-card img {
	width: 100%; height: 160px; object-fit: cover; margin-bottom: 1rem;
}
#mc-front .mc-shop-card h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
#mc-front .mc-shop-card .price { color: var(--mc-orange-deep); font-weight: 600; display: block; margin-bottom: 1rem; }
#mc-front .mc-shop-empty { text-align: center; }
@media (max-width: 900px) { #mc-front .mc-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { #mc-front .mc-shop-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   14. RODAPÉ – arrumar as colunas de widgets já existentes no tema
   Usa !important porque o Posterity define float/width em cada widget
   directamente no HTML (style="..."), o que vence uma regra CSS normal.
   ========================================================================== */
#footer .foot-widgets {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 2.5rem !important;
	width: auto !important;
}
#footer .foot-widgets > * {
	float: none !important;
	width: calc(25% - 1.875rem) !important;
	margin: 0 !important;
	box-sizing: border-box;
}
#footer .foot-widgets .widget ul { list-style: none; padding: 0; margin: 0; }
#footer .foot-widgets .widget li { margin-bottom: .4rem; }
#footer .mc-foot-social { display: flex; gap: .75rem; margin-top: .75rem; }
#footer .mc-foot-social a {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--mc-orange); display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
	#footer .foot-widgets > * { width: calc(50% - 1.25rem) !important; }
}
@media (max-width: 600px) {
	#footer .foot-widgets > * { width: 100% !important; }
}

/* ==========================================================================
   15. BOTÕES — relevo, seta animada e hover mais convidativo
   ========================================================================== */
.a13-button, .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	position: relative;
	padding-right: 2.6em !important;
	box-shadow: 0 6px 16px rgba(154, 90, 8, .28);
	transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.a13-button::after {
	content: "→";
	position: absolute; right: 1.1em; top: 50%;
	transform: translate(0, -50%);
	transition: transform .25s ease;
}
.a13-button:hover {
	box-shadow: 0 8px 20px rgba(31, 31, 31, .3);
	transform: translateY(-2px);
}
.a13-button:hover::after { transform: translate(4px, -50%); }
.mc-button-outline {
	background: transparent !important;
	color: var(--mc-paper) !important;
	border-color: var(--mc-paper) !important;
	box-shadow: none;
}
.mc-button-outline:hover {
	background: var(--mc-paper) !important;
	color: var(--mc-ink) !important;
	border-color: var(--mc-paper) !important;
}

/* ==========================================================================
   16. CARTÕES — hover com elevação + zoom subtil na imagem
   ========================================================================== */
#mc-front .mc-ticket,
#mc-front .mc-feature,
#mc-front .mc-shop-card {
	transition: transform .3s ease, box-shadow .3s ease;
}
#mc-front .mc-ticket:hover,
#mc-front .mc-feature:hover,
#mc-front .mc-shop-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 30px rgba(31, 31, 31, .14);
}
#mc-front .mc-feature { overflow: hidden; }
#mc-front .mc-feature img {
	width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
	margin: 0 auto 1.1rem; display: block;
	border: 3px solid var(--mc-orange);
	transition: transform .4s ease;
}
#mc-front .mc-feature:hover img { transform: scale(1.08) rotate(-3deg); }
#mc-front .mc-shop-card img { transition: transform .4s ease; }
#mc-front .mc-shop-card:hover img { transform: scale(1.06); }
#mc-front .mc-gallery img { transition: transform .45s ease, filter .45s ease; }
#mc-front .mc-gallery img:hover { transform: scale(1.05); filter: brightness(1.05); }

/* ==========================================================================
   17. TEXTURA DE FUNDO — profundidade sem imagens de terceiros
   ========================================================================== */
#mc-front .mc-section-alt {
	position: relative;
	background-color: var(--mc-orange-soft);
	background-image: radial-gradient(rgba(154, 90, 8, .12) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
}
#mc-front .mc-section-dark {
	position: relative;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(243, 169, 65, .10), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(243, 169, 65, .08), transparent 45%);
}

/* ==========================================================================
   18. HERO — zoom lento nas fotos (efeito "Ken Burns") + kicker com fio
   ========================================================================== */
#mc-front .mc-hero-slide {
	animation: mcHeroZoom 9s ease-in-out infinite alternate;
}
@keyframes mcHeroZoom {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}
#mc-front .mc-hero-kicker {
	position: relative;
	display: inline-block;
	padding-bottom: .6rem;
}
#mc-front .mc-hero-kicker::after {
	content: "";
	position: absolute; left: 50%; bottom: 0;
	width: 46px; height: 2px; background: var(--mc-orange);
	transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) {
	#mc-front .mc-hero-slide { animation: none; }
}

/* ==========================================================================
   19. SECÇÕES COM FOTO DE FUNDO — a "vida" nas secções, com fotos próprias
   ========================================================================== */
#mc-front .mc-section-photo {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	overflow: hidden;
	padding: 6rem 0 !important;
}
#mc-front .mc-section-photo-overlay {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(31,31,31,.55) 0%, rgba(31,31,31,.85) 78%),
		linear-gradient(180deg, rgba(31,31,31,.35), rgba(31,31,31,.55));
}
#mc-front .mc-section-photo .mc-wrap {
	position: relative; z-index: 2;
	max-width: 760px;
}
#mc-front .mc-section-photo .mc-eyebrow-light {
	display: inline-block;
	padding-bottom: .7rem;
	position: relative;
}
#mc-front .mc-section-photo .mc-eyebrow-light::after {
	content: "";
	position: absolute; left: 50%; bottom: 0;
	width: 54px; height: 2px; background: var(--mc-orange);
	transform: translateX(-50%);
}
#mc-front .mc-section-photo h2.mc-light {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.25;
	text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
#mc-front .mc-section-photo .mc-lede.mc-light,
#mc-front .mc-section-photo p.mc-light { text-shadow: 0 1px 10px rgba(0,0,0,.35); }
@media (max-width: 900px) {
	/* background-attachment:fixed é pesado/instável em telemóvel */
	#mc-front .mc-section-photo { background-attachment: scroll; padding: 4rem 0 !important; }
}

/* ==========================================================================
   20. BOTÕES — reforço final (garante que ganha a qualquer CSS do tema pai)
   ========================================================================== */
#mc-front .a13-button,
#mc-front .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: .95em 2.6em .95em 1.8em !important;
	font-size: .78rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	border-radius: 999px !important;
	line-height: 1.2 !important;
	background-color: var(--mc-orange) !important;
	color: var(--mc-ink) !important;
	border: 1px solid var(--mc-orange) !important;
}
#mc-front .a13-button:hover,
#mc-front .button:hover {
	background-color: var(--mc-ink) !important;
	border-color: var(--mc-ink) !important;
	color: var(--mc-orange) !important;
}
#mc-front .mc-button-outline {
	background-color: transparent !important;
	color: var(--mc-paper) !important;
	border-color: rgba(248,248,248,.8) !important;
}
#mc-front .mc-button-outline:hover {
	background-color: var(--mc-paper) !important;
	color: var(--mc-ink) !important;
	border-color: var(--mc-paper) !important;
}

/* ==========================================================================
   21. RODAPÉ — visual mais rico (tom, tipografia, espaçamento)
   ========================================================================== */
#footer {
	background-color: #171310 !important;
	padding-top: 4rem !important;
	padding-bottom: 1.5rem !important;
}
#footer .foot-widgets {
	padding-bottom: 2.5rem !important;
	border-bottom: 1px solid rgba(243, 169, 65, .18);
	margin-bottom: 1.5rem !important;
}
#footer .widget h3.title,
#footer .widgettitle {
	font-size: 1rem !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 1.1rem !important;
	position: relative;
	padding-bottom: .6rem;
}
#footer .widget h3.title::after,
#footer .widgettitle::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 30px; height: 2px; background: var(--mc-orange);
}
#footer .foot-widgets .widget li,
#footer .foot-widgets p { color: rgba(248, 248, 248, .72); line-height: 1.8; }
#footer .foot-items,
#footer .foot-items * { color: rgba(248, 248, 248, .55) !important; font-size: .8rem; }

/* ==========================================================================
   22. O NOSSO COMPROMISSO — faixa de ícones logo a seguir ao hero
   ========================================================================== */
#mc-front .mc-compromisso { padding-top: 3rem; padding-bottom: 2rem; }
#mc-front .mc-grid-5 {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem;
}
#mc-front .mc-compromisso-item { text-align: center; padding: 0 .5rem; }
#mc-front .mc-compromisso-icon {
	width: 56px; height: 56px; margin: 0 auto .9rem;
	border-radius: 50%; background: var(--mc-orange-soft);
	border: 1px solid var(--mc-orange);
	color: var(--mc-orange-deep);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.2rem;
	transition: transform .3s ease, background .3s ease;
}
#mc-front .mc-compromisso-item:hover .mc-compromisso-icon {
	transform: scale(1.12) rotate(8deg);
	background: var(--mc-orange);
}
#mc-front .mc-compromisso-item h4 {
	font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--mc-orange-deep); margin: 0 0 .4rem;
}
#mc-front .mc-compromisso-item p { font-size: .85rem; color: rgba(31,31,31,.7); margin: 0; }
@media (max-width: 900px) { #mc-front .mc-grid-5 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } }
@media (max-width: 560px) { #mc-front .mc-grid-5 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   23. VITRINA "ESPECIALIDADES" — estilo menu, fundo escuro
   ========================================================================== */
#mc-front .mc-menu-section {
	background-color: var(--mc-ink);
	background-image:
		radial-gradient(circle at 10% 10%, rgba(243,169,65,.10), transparent 40%),
		radial-gradient(circle at 90% 90%, rgba(243,169,65,.08), transparent 40%);
}
#mc-front .mc-menu-section h2.mc-light,
#mc-front .mc-menu-section .mc-eyebrow-light { color: var(--mc-paper); }
#mc-front .mc-menu-section .mc-eyebrow-light { color: var(--mc-orange); }
#mc-front .mc-menu-list {
	max-width: 820px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 1.5rem;
}
#mc-front .mc-menu-row {
	display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem;
	align-items: center;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed rgba(243, 169, 65, .3);
}
#mc-front .mc-menu-row:last-child { border-bottom: none; padding-bottom: 0; }
#mc-front .mc-menu-row-photo {
	width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
	border: 2px solid var(--mc-orange); flex-shrink: 0;
}
#mc-front .mc-menu-row-photo img {
	width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;
}
#mc-front .mc-menu-row:hover .mc-menu-row-photo img { transform: scale(1.12); }
#mc-front .mc-menu-row-text h3 { color: var(--mc-orange); margin: 0 0 .35rem; font-size: 1.3rem; }
#mc-front .mc-menu-row-text p { color: rgba(248,248,248,.75); margin: 0; }
@media (max-width: 560px) {
	#mc-front .mc-menu-row { grid-template-columns: 72px 1fr; gap: 1rem; }
	#mc-front .mc-menu-row-photo { width: 72px; height: 72px; }
}

/* ==========================================================================
   24. COMO ENCOMENDAR — passos numerados
   ========================================================================== */
#mc-front .mc-steps {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
#mc-front .mc-step { position: relative; padding-top: 2.5rem; }
#mc-front .mc-step-number {
	position: absolute; top: -1.1rem; left: 1.5rem;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--mc-orange); color: var(--mc-ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mc-font-display); font-size: 1.1rem;
	box-shadow: 0 6px 14px rgba(154,90,8,.3);
}
@media (max-width: 900px) { #mc-front .mc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #mc-front .mc-steps { grid-template-columns: 1fr; } }