/* ==========================================================================
   DORMAX — Folha de estilos principal
   Reconstruída a partir do tema Shopify Horizon usado em dormax.pt
   Design tokens extraídos do :root do original (123 variáveis).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — valores idênticos aos do original
   -------------------------------------------------------------------------- */
:root {
	/* Escala de espaçamento (idêntica ao Horizon) */
	--spacing-0-5: 0.125rem;
	--spacing-1: 0.25rem;
	--spacing-1-5: 0.375rem;
	--spacing-2: 0.5rem;
	--spacing-2-5: 0.625rem;
	--spacing-3: 0.75rem;
	--spacing-3-5: 0.875rem;
	--spacing-4: 1rem;
	--spacing-4-5: 1.125rem;
	--spacing-5: 1.25rem;
	--spacing-5-5: 1.375rem;
	--spacing-6: 1.5rem;
	--spacing-6-5: 1.625rem;
	--spacing-7: 1.75rem;
	--spacing-8: 2rem;
	--spacing-9: 2.25rem;
	--spacing-10: 2.5rem;
	--spacing-11: 2.75rem;
	--spacing-12: 3rem;
	--spacing-14: 3.5rem;
	--spacing-16: 4rem;
	--spacing-18: 4.5rem;
	--spacing-20: 5rem;
	--spacing-24: 6rem;
	--spacing-28: 7rem;

	/* Tipografia — escala do Horizon */
	--text-xs: 0.75rem;
	/* Escala tipográfica — derivada do Horizon: a base é 0.875rem (14px),
	   não 16px. O original tem `body { font-size: 14px }`, o que faz toda a
	   escala de headings (em rem) render mais pequena do que a nossa. */
	--text-sm: 0.75rem;
	--text-base: 0.875rem;
	--text-lg: 1.125rem;
	--text-h6: 1.125rem;
	--text-h5: 1.375rem;
	--text-h4: 1.75rem;
	--text-h3: 2rem;
	--text-h2: 2.25rem;
	--text-h1: 3.25rem;
	--text-h0: 4.5rem;

	--text-font-family: Helvetica, Arial, sans-serif;
	--heading-font-family: Helvetica, Arial, sans-serif;
	--text-font-weight: 400;
	--heading-font-weight: 700;
	--heading-letter-spacing: -0.02em;
	--text-letter-spacing: 0em;

	/* Cores — RGB triples como no original (permite rgb(x / alpha)) */
	--accent: 0 32 57;
	--text-primary: 26 26 26;
	--background-primary: 255 255 255;
	--header-background: 255 255 255;
	--header-text: 26 26 26;
	--footer-background: 0 32 57;
	--footer-text: 255 255 255;
	--button-background-primary: 0 32 57;
	--button-text-primary: 255 255 255;
	--button-background-secondary: 0 32 57;
	--button-text-secondary: 255 255 255;
	--product-card-background: 255 255 255;
	--product-card-text: 26 26 26;
	--on-sale-badge-background: 248 58 58;
	--on-sale-badge-text: 255 255 255;
	--on-sale-text: 248 58 58;
	--star-color: 255 183 74;
	--error-text: 248 58 58;
	--success-text: 0 163 65;
	--primary-badge-background: 128 60 238;
	--primary-badge-text: 255 255 255;
	--border-color: rgb(var(--text-primary) / 0.12);

	/* Formas */
	--rounded: 0.75rem;
	--rounded-sm: 0.375rem;
	--rounded-xs: 0.25rem;
	--rounded-lg: 1.5rem;
	--rounded-input: 0.5rem;
	--rounded-button: 3.75rem;
	--rounded-full: 9999px;

	/* Sombras */
	--shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.1);
	--shadow: 0 5px 15px rgb(var(--text-primary) / 0.1);
	--shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1);
	--shadow-block: 0px 18px 50px rgb(var(--text-primary) / 0.1);

	/* Layout — max-width 1600px com gutter 3rem => 1344px de conteúdo útil,
   exatamente como o original (--container-max-width: 1600px). */
	--container-max-width: 1600px;
	--container-narrow-max-width: 1350px;
	--container-gutter: var(--spacing-12);
	--grid-gutter: var(--spacing-6);

	--section-outer-spacing-block: var(--spacing-24);
	--section-stack-spacing-block: var(--spacing-12);

	--input-height: 3.125rem;
	--input-padding-inline: var(--spacing-5);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--text-font-family);
	font-size: var(--text-base);
	font-weight: var(--text-font-weight);
	line-height: 1.6;
	color: rgb(var(--text-primary));
	background-color: rgb(var(--background-primary));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--heading-font-family);
	font-weight: var(--heading-font-weight);
	letter-spacing: var(--heading-letter-spacing);
	line-height: 1.15;
	text-wrap: balance;
}

h0, .text-h0 { font-size: var(--text-h0); }
h1, .text-h1 { font-size: var(--text-h1); }
h2, .text-h2 { font-size: var(--text-h2); }
h3, .text-h3 { font-size: var(--text-h3); }
h4, .text-h4 { font-size: var(--text-h4); }
h5, .text-h5 { font-size: var(--text-h5); }
h6, .text-h6 { font-size: var(--text-h6); }

p { margin: 0 0 var(--spacing-4); }
p:last-child { margin-bottom: 0; }

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.container--narrow {
	max-width: var(--container-narrow-max-width);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. BOTÕES — pílula (border-radius 3.75rem) como no original
   -------------------------------------------------------------------------- */
.btn,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .cart input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2);
	min-height: var(--input-height);
	padding: 0 var(--spacing-8);
	border-radius: var(--rounded-button);
	background-color: rgb(var(--button-background-primary));
	color: rgb(var(--button-text-primary));
	font-family: var(--text-font-family);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
	cursor: pointer;
	border: none;
	line-height: 1;
}

.btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	opacity: 0.85;
}

.btn--secondary {
	background-color: transparent;
	color: rgb(var(--button-background-primary));
	box-shadow: inset 0 0 0 2px rgb(var(--button-background-primary));
}

.btn--full { width: 100%; }

/* --------------------------------------------------------------------------
   4. BARRA DE ANÚNCIO
   -------------------------------------------------------------------------- */
.announcement-bar {
	background-color: rgb(var(--accent));
	color: #fff;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
}

.announcement-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4) var(--spacing-8);
	min-height: 2.5rem;
	padding-block: var(--spacing-2);
	text-align: center;
}

.announcement-bar__item { display: inline-flex; align-items: center; gap: var(--spacing-2); }

/* --------------------------------------------------------------------------
   5. CABEÇALHO
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgb(var(--header-background) / 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-color);
	transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled { box-shadow: var(--shadow); }

/* Grelha do header: [esquerda] [logo] [ações].
   No original o logo fica CENTRADO em mobile, com hambúrguer+pesquisa à
   esquerda e o carrinho à direita. Em desktop o menu passa para a linha do
   header (slot central preenchido pelo <nav> fixed). */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--spacing-4);
	height: 4.3125rem; /* 69px — igual ao header do original em mobile */
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	justify-self: start;
}

.site-header__logo {
	justify-self: center;
	display: inline-flex;
	align-items: center;
	min-height: 33px;     /* caixa do logo no original */
	font-size: 1rem;      /* 16px, como o original */
	font-weight: 400;
	letter-spacing: 0;
	color: rgb(var(--header-text));
	text-transform: none;
}

.header-actions { justify-self: end; }

/* Mobile: a grelha tem 3 colunas [1fr auto 1fr]. O `nav-slot` é MÓVEL —
   só existe em desktop, onde o <nav> ocupa o slot central. Se não for
   retirado do fluxo, é o 3º filho e empurra o `.header-actions` para a
   linha 2 (carrinho fora do header). */
.site-header__nav-slot { display: none; }

/* Em desktop o hambúrguer e a pesquisa desaparecem (o menu está na barra). */
@media (min-width: 1024px) {
	.header-actions__search { display: none; }
}

/* Os ícones do header têm 22×22 no original. */
.header-actions__link svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
	.site-header__inner {
		height: 6.3rem; /* 101px em desktop */
		grid-template-columns: auto 1fr auto;
	}

	/* Desktop: [logo] [slot do nav] [ações]. O hambúrguer já está escondido. */
	.site-header__left { display: none; }
	.site-header__logo { grid-column: 1; justify-self: start; }
	.site-header__nav-slot { grid-column: 2; display: block; }
	.header-actions { grid-column: 3; justify-self: end; }
}

.site-header__logo img { max-height: 3rem; width: auto; }

/* Navegação de topo (desktop).
   O <nav> vive fora do <header> (ver header.php). Em desktop é posicionado
   por cima da faixa do header com fixed + offset, acompanhando o sticky.
   `--announcement-h` é atualizada pelo JS com a altura real da barra. */
.main-nav {
	position: fixed;
	top: var(--announcement-h, 2.5rem);
	left: 0;
	right: 0;
	height: 4.3125rem; /* 69px em mobile, igual ao header */
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 101;
}

@media (min-width: 1024px) {
	.main-nav { height: 6.3rem; } /* 101px em desktop */
}

.main-nav ul { pointer-events: auto; }
.main-nav__close { display: none; }

.main-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	font-size: 1rem;      /* 16px, como o original */
	font-weight: 700;
	position: relative;
	padding-block: var(--spacing-2);
}

.main-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
}

.header-actions__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--rounded-full);
	transition: background-color 0.25s ease;
}

.header-actions__link:hover { background-color: rgb(var(--text-primary) / 0.06); }

.cart-count {
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	border-radius: var(--rounded-full);
	background-color: rgb(var(--on-sale-badge-background));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

.menu-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.menu-toggle span:not(.screen-reader-text) {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --------------------------------------------------------------------------
   6. HERO / SLIDESHOW — imagem full-width + overlay gradiente (idêntico)
   -------------------------------------------------------------------------- */
.slideshow {
	position: relative;
	background: linear-gradient(60deg, rgba(60, 65, 68, 1), rgba(23, 29, 33, 1) 98%);
}

.slideshow__slide {
	position: relative;
	display: grid;
	isolation: isolate;
}

/* content-over-media: imagem de fundo + conteúdo sobreposto.
   Base (sem modificador): a imagem preenche a caixa, cuja altura vem do
   aspect-ratio — o texto fica por cima. */
.content-over-media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 1344 / 823;
	min-height: 480px;
	max-height: 90vh;
}

.content-over-media > img,
.content-over-media > picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Overlay: 0 0 0 / 0.25 (igual ao original) */
.content-over-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0.25);
	z-index: 1;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Variante --auto: a imagem define a altura natural da caixa
   (como no slideshow do original). Todas as regras vêm DEPOIS da base
   para ganharem na cascata.
   -------------------------------------------------------------------------- */
.content-over-media--auto {
	display: block;
	aspect-ratio: auto;
	min-height: 0;
	max-height: none;
}

.content-over-media--auto > picture {
	display: block;
	width: 100%;
}

.content-over-media--auto > img,
.content-over-media--auto > picture img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	z-index: auto;
}

/* O texto sobrepõe-se à imagem */
.content-over-media--auto > .content-over-media__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: var(--spacing-20) var(--spacing-6);
	z-index: 2;
}

/* Largura máxima do bloco de texto: 780px (igual ao original) */
.content-over-media--auto > .content-over-media__content > * {
	max-width: 780px;
}

/* O overlay na variante auto fica entre a imagem e o texto */
.content-over-media--auto::after {
	z-index: 1;
}

.content-over-media__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 780px;
	padding: var(--spacing-20) var(--spacing-6);
	margin-inline: auto;
	text-align: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-5);
}
.content-over-media__eyebrow {
	display: inline-block;
	padding: var(--spacing-1-5) var(--spacing-4);
	border-radius: var(--rounded-full);
	background-color: rgb(255 255 255 / 0.15);
	backdrop-filter: blur(6px);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.content-over-media__content h1,
.content-over-media__content h2 {
	color: #fff;
	text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}

.content-over-media__content .btn {
	background-color: #fff;
	color: rgb(var(--accent));
	margin-top: var(--spacing-2);
}

.content-over-media__content .btn:hover { opacity: 1; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   7. SECÇÕES — espaçamento vertical genérico
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-outer-spacing-block); }
.section--tight { padding-block: var(--spacing-12); }
.section--flush { padding-block: 0; }
.section--dark {
	background-color: rgb(var(--accent));
	color: #fff;
}
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--muted { background-color: rgb(var(--text-primary) / 0.03); }

.section__header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto var(--spacing-12);
}

.section__header h2 {
	margin-bottom: var(--spacing-4);
}

/* O original renderiza este heading a 36px/peso 300/cinza — é o único
   heading "leve" da página, ao contrário dos restantes (700/preto). */
.experts__title {
	font-size: 2.25rem;
	font-weight: 300;
	color: rgb(70 70 70);
	line-height: 1.2;
}

.section__header p {
	color: rgb(var(--text-primary) / 0.7);
	font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   8b. CARROSSEL DE CLIENTES ("Milhares de portugueses já dormem melhor!")
   Marquee horizontal infinito de fotos 2:3. No original ocupa 429px de
   altura em mobile: título (2 linhas) + 300px de fotos + espaçamentos.
   -------------------------------------------------------------------------- */
.customers-marquee {
	padding-block: var(--spacing-10);
	overflow: hidden;
}

.customers-marquee__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	max-width: 780px;
	margin: 0 auto var(--spacing-6);
	padding-inline: var(--spacing-5);
}

.customers-marquee__viewport {
	overflow: hidden;
	width: 100%;
}

.customers-marquee__track {
	display: flex;
	gap: var(--spacing-4);
	width: max-content;
	animation: customers-scroll 40s linear infinite;
}

.customers-marquee__item {
	flex: 0 0 auto;
	width: 200px;
	margin: 0;
}

.customers-marquee__item img {
	width: 200px;
	height: 300px;
	object-fit: cover;
	border-radius: var(--rounded);
	display: block;
}

/* Em desktop as fotos são maiores: 300×400 no original (vs 200×300 em
   mobile). Sem isto a secção ficava 142px mais baixa que o original. */
@media (min-width: 750px) {
	.customers-marquee__item { width: 300px; }
	.customers-marquee__item img { width: 300px; height: 400px; }
}

/* Pausa o movimento para quem prefere menos animação. */
@media (prefers-reduced-motion: reduce) {
	.customers-marquee__track { animation: none; }
}

@keyframes customers-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-33.333%); }
}

/* --------------------------------------------------------------------------
   9. MARQUEE DE LOGOS — CSS copiado do original
   -------------------------------------------------------------------------- */
.logo-slider-section {
	background: #ffffff;
	padding: 40px 20px;
}

.logo-slider-title {
	color: #1a1a1a;
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 30px;
	font-family: Helvetica, Arial, sans-serif;
}

.marquee-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.marquee-content {
	display: flex;
	width: max-content;
	animation: doormax-marquee 40s linear infinite;
}

.marquee-container:hover .marquee-content { animation-play-state: paused; }

.logo-item {
	flex-shrink: 0;
	margin: 0 30px;
	display: flex;
	align-items: center;
}

.logo-item img {
	width: 90px;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.logo-item img:hover { transform: scale(1.1); }

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

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

/* --------------------------------------------------------------------------
   9. PRODUTO EM DESTAQUE
   -------------------------------------------------------------------------- */
.featured-product__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-16);
	align-items: start;
}

/* Mobile: a galeria sangra até às bordas do ecrã, como no original. O
   container tem gutter, por isso cancelamo-lo só na imagem. */
.featured-product__layout { display: block; }

.featured-product .featured-product__media {
	position: relative;
	margin-inline: calc(var(--container-gutter) * -1);
	border-radius: 0;
	overflow: hidden;
	background-color: rgb(var(--text-primary) / 0.04);
}

.featured-product__media img {
	width: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --- Galeria: 1 imagem grande + coluna de miniaturas (como o original) --- */
.featured-product__gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-4);
}

.featured-product__stage {
	position: relative;
	order: 1;
}

.featured-product__stage img {
	width: 100%;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--rounded);
}

.featured-product__thumbs {
	order: 2;
	display: flex;
	gap: var(--spacing-3);
	overflow-x: auto;
	scrollbar-width: none;
}

.featured-product__thumbs::-webkit-scrollbar { display: none; }

.thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1.5px solid transparent;
	border-radius: var(--rounded-sm);
	overflow: hidden;
	cursor: pointer;
	background: none;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb.is-active { border-color: rgb(var(--accent)); }

/* Desktop: miniaturas em coluna lateral à esquerda da imagem grande. */
@media (min-width: 1000px) {
	.featured-product__gallery {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas: "thumbs stage";
	}

	.featured-product__thumbs {
		grid-area: thumbs;
		flex-direction: column;
		overflow: visible;
	}

	.featured-product__stage { grid-area: stage; }
}

@media (min-width: 750px) {
	.featured-product .featured-product__media {
		margin-inline: 0;
		max-width: 640px;
		margin-inline: auto;
		border-radius: var(--rounded-lg);
	}
}

/* Desktop: o original põe a galeria e a informação lado a lado (2 colunas),
   o que dá 954px de altura. Empilhado dava 1451px. */
@media (min-width: 1000px) {
	.featured-product__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-16);
		align-items: start;
	}

	.featured-product .featured-product__media {
		max-width: none;
		margin-inline: 0;
	}
}

/* Botão "Zoom na imagem" — no original é um pill no canto da imagem. */
.featured-product__zoom {
	position: absolute;
	top: var(--spacing-4);
	right: var(--spacing-4);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-4);
	background: rgb(255 255 255 / 0.9);
	backdrop-filter: blur(6px);
	border-radius: var(--rounded-full);
	font-size: var(--text-sm);
	cursor: pointer;
}

.featured-product__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	padding-top: var(--spacing-6);
}

@media (min-width: 750px) {
	.featured-product__info { position: sticky; top: 7rem; }
}

/* --- Preço com desconto --- */
.featured-product__price {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-4);
	flex-wrap: wrap;
}

.price__now { font-size: 1.625rem; font-weight: 700; }

.price__save {
	font-size: var(--text-sm);
	font-weight: 700;
	color: rgb(var(--on-sale-text));
}

/* --- Variantes em cartões (Apenas Uma / Pack Duo / Pack Completo) --- */
.featured-product__packs {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.pack-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding: var(--spacing-4) var(--spacing-5);
	border: 1.5px solid var(--border-color);
	border-radius: var(--rounded);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pack-card.is-selected,
.pack-card:has(input:checked) {
	border-color: rgb(var(--accent));
	background-color: rgb(var(--accent) / 0.04);
}

/* O input é o alvo de clique acessível, mas fica invisível. */
.pack-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pack-card__name { font-weight: 700; font-size: var(--text-lg); }

.pack-card__prices {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-2);
	margin-left: auto;
}

.pack-card__now { font-weight: 700; font-size: var(--text-lg); }

.pack-card__was {
	font-size: var(--text-sm);
	color: rgb(var(--text-primary) / 0.5);
	text-decoration: line-through;
}

.pack-card__badge {
	flex-basis: 100%;
	font-size: var(--text-xs);
	font-weight: 700;
	color: rgb(var(--accent));
	margin-top: var(--spacing-1);
}

/* --- Seletor de cor --- */
.featured-product__color {
	border: none;
	padding: 0;
	margin: 0;
}

.featured-product__color legend {
	font-size: var(--text-sm);
	padding: 0;
	margin-bottom: var(--spacing-2);
}

.color-swatches { display: flex; gap: var(--spacing-3); }

.swatch {
	cursor: pointer;
	display: inline-flex;
}

.swatch input { position: absolute; opacity: 0; pointer-events: none; }

.swatch__dot {
	width: 2rem;
	height: 2rem;
	border-radius: var(--rounded-full);
	background: var(--swatch);
	border: 1.5px solid var(--border-color);
	display: block;
}

.swatch.is-selected .swatch__dot,
.swatch:has(input:checked) .swatch__dot {
	outline: 2px solid rgb(var(--accent));
	outline-offset: 2px;
}

.featured-product__cta { margin-top: var(--spacing-2); }

.featured-product__alt { margin-top: var(--spacing-6); }
.featured-product__alt img { width: 100%; border-radius: var(--rounded-lg); }

.featured-product__rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	flex-wrap: wrap;
	font-size: var(--text-sm);
}

.stars { color: rgb(var(--star-color)); letter-spacing: 0.1em; }

/* O original: h2 do produto = 32px (desktop 40px). */
.featured-product__title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}

.price {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-3);
	font-size: var(--text-h5);
	font-weight: 700;
}

.price del,
.price .original {
	color: rgb(var(--text-primary) / 0.45);
	font-weight: 400;
	text-decoration: line-through;
}

.price ins,
.price .current {
	color: rgb(var(--on-sale-text));
	text-decoration: none;
	font-weight: 700;
}

.product-badge {
	display: inline-block;
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--rounded-full);
	background-color: rgb(var(--on-sale-badge-background));
	color: rgb(var(--on-sale-badge-text));
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   10. CARTÕES (especialistas, comparação, etc.)
   -------------------------------------------------------------------------- */
.card {
	background-color: rgb(var(--product-card-background));
	border: 1px solid var(--border-color);
	border-radius: var(--rounded);
	padding: var(--spacing-8);
	box-shadow: var(--shadow-sm);
}

.card__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-6);
}

/* Desktop: o original mostra 3 cartões num carrossel com largura fixa
   (~285px). Com `auto-fit` minmax() os cartões esticavam para 379px e
   ficavam mais baixos (264px vs 482px do original). */
@media (min-width: 750px) {
	.card__grid {
		display: flex;
		gap: var(--spacing-6);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.card__grid::-webkit-scrollbar { display: none; }

	.card__grid > .expert-card {
		flex: 0 0 285px;
		scroll-snap-align: start;
	}
}

/* Em mobile, o original mostra os cartões num carrossel lateral (swiper):
   cartões de ~289px deslizam horizontalmente. Empilhados somavam 844px em
   vez dos 512px do original. */
@media (max-width: 749px) {
	.card__grid {
		display: flex;
		grid-template-columns: none;
		gap: var(--spacing-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-inline: var(--spacing-5);
		margin-inline: calc(var(--spacing-5) * -1);
		padding-bottom: var(--spacing-2);
	}

	.card__grid::-webkit-scrollbar { display: none; }

	.card__grid > .expert-card {
		flex: 0 0 289px;
		scroll-snap-align: start;
	}
}

.expert-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	text-align: left;
	height: 100%;
	padding: var(--spacing-3);
	border: 1px solid var(--border-color);
	border-radius: var(--rounded);
}

/* Imagem grande (255×269 no original) — dá ao cartão os ~482px de altura. */
.expert-card__image-wrapper {
	border-radius: var(--rounded-sm);
	overflow: hidden;
	background-color: rgb(var(--text-primary) / 0.04);
}

.expert-card__image-wrapper img {
	width: 100%;
	aspect-ratio: 255 / 240;
	object-fit: cover;
	display: block;
}

.expert-card__badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-1) var(--spacing-3);
	border-radius: var(--rounded-full);
	background-color: rgb(var(--text-primary) / 0.06);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.expert-card__name { font-size: 1.0625rem; font-weight: 700; }
.expert-card__designation { font-size: var(--text-sm); color: rgb(var(--text-primary) / 0.65); }
.expert-card__review { font-size: var(--text-sm); flex: 1; }

.expert-card__button {
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	align-self: flex-start;
}

.expert-card__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
}

.expert-card__avatar {
	width: 4rem;
	height: 4rem;
	border-radius: var(--rounded-full);
	object-fit: cover;
	flex-shrink: 0;
}

.expert-card__name { font-size: var(--text-lg); font-weight: 700; }
.expert-card__role { font-size: var(--text-sm); color: rgb(var(--text-primary) / 0.6); }

.expert-card__quote {
	font-style: italic;
	color: rgb(var(--text-primary) / 0.8);
}

.verified-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	font-size: var(--text-xs);
	font-weight: 700;
	color: rgb(var(--success-text));
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   11. ESTATÍSTICAS (impact text)
   -------------------------------------------------------------------------- */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-10);
	text-align: center;
}

/* O original mostra exatamente 3 colunas (uma por estatística). Com
   `auto-fit` o browser criava uma 4ª coluna vazia e mudava a largura
   dos números. */
@media (min-width: 750px) {
	.impact-grid { grid-template-columns: repeat(3, 1fr); }
}

.impact-item__number {
	font-size: 4.0625rem; /* 65px — igual ao original */
	font-weight: 700;
	line-height: 1;
	margin-bottom: var(--spacing-3);
	color: rgb(var(--accent));
}

.section--dark .impact-item__number { color: #fff; }

.impact-item__label {
	font-size: var(--text-base);
	color: rgb(var(--text-primary) / 0.75);
	max-width: 28ch;
	margin-inline: auto;
}

.section--dark .impact-item__label { color: rgb(255 255 255 / 0.8); }

/* --------------------------------------------------------------------------
   12. GRELHA DE PRODUTOS (WooCommerce)
   -------------------------------------------------------------------------- */
.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--grid-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O original mostra 2 colunas em mobile (3 produtos = 1,5 linhas, ~725px).
   Com minmax(280px) só cabia 1 coluna e a lista esticava para 1830px. */
@media (max-width: 749px) {
	.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--spacing-4);
	}
}

@media (min-width: 750px) {
	.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.product-card {
	display: flex;
	flex-direction: column;
	background-color: rgb(var(--product-card-background));
	border-radius: var(--rounded);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: rgb(var(--text-primary) / 0.04);
	overflow: hidden;
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__badges {
	position: absolute;
	top: var(--spacing-3);
	left: var(--spacing-3);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	z-index: 2;
}

.product-card__body {
	padding: var(--spacing-5) var(--spacing-4) var(--spacing-6);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	text-align: center;
}

.product-card__title {
	font-size: var(--text-lg);
	font-weight: 700;
	margin: 0;
}

.product-card__price {
	font-size: var(--text-base);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. WOOCOMMERCE — afinações gerais
   -------------------------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: rgb(var(--star-color)); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--rounded);
	border-top-color: rgb(var(--accent));
}

.woocommerce-message::before,
.woocommerce-info::before { color: rgb(var(--accent)); }

.quantity input[type="number"],
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea {
	min-height: var(--input-height);
	padding-inline: var(--input-padding-inline);
	border: 1px solid var(--border-color);
	border-radius: var(--rounded-input);
	font-family: inherit;
	font-size: var(--text-base);
	background-color: #fff;
	color: rgb(var(--text-primary));
	width: 100%;
}

.woocommerce form textarea { min-height: 8rem; padding-block: var(--spacing-3); }

/* --------------------------------------------------------------------------
   14. PÁGINAS DE CONTEÚDO
   -------------------------------------------------------------------------- */
.page-content {
	max-width: 780px;
	margin-inline: auto;
}

.page-content h2 { margin-block: var(--spacing-10) var(--spacing-4); }
.page-content h3 { margin-block: var(--spacing-8) var(--spacing-3); }
.page-content ul,
.page-content ol { padding-left: var(--spacing-6); margin-bottom: var(--spacing-4); }
.page-content li { margin-bottom: var(--spacing-2); }
.page-content a { color: rgb(var(--accent)); text-decoration: underline; }

.page-hero {
	background-color: rgb(var(--accent));
	color: #fff;
	padding-block: var(--spacing-16);
	text-align: center;
}

.page-hero h1 { color: #fff; }

/* --------------------------------------------------------------------------
   15. FAQ / ACORDEÕES
   -------------------------------------------------------------------------- */
.accordion {
	border-top: 1px solid var(--border-color);
}

.accordion__item { border-bottom: 1px solid var(--border-color); }

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	width: 100%;
	padding: var(--spacing-5) 0;
	font-size: var(--text-lg);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	list-style: none;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary::after {
	content: "+";
	font-size: var(--text-h5);
	font-weight: 400;
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.accordion__item[open] .accordion__summary::after { transform: rotate(45deg); }

.accordion__panel {
	padding-bottom: var(--spacing-5);
	color: rgb(var(--text-primary) / 0.8);
}

/* --------------------------------------------------------------------------
   16. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: rgb(var(--footer-background));
	color: rgb(var(--footer-text));
	padding-block: var(--spacing-16) var(--spacing-8);
}

.site-footer a { color: rgb(var(--footer-text) / 0.85); }
.site-footer a:hover { color: rgb(var(--footer-text)); }

/* O original tem 2 colunas: newsletter (larga) + Informações. */
.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-10);
	margin-bottom: var(--spacing-8);
}

.footer-col h3 {
	font-size: var(--text-h6);
	margin-bottom: var(--spacing-4);
	color: rgb(var(--footer-text));
}

/* O heading da newsletter no original não é um título de coluna: é uma
   frase de venda em texto normal, e o formulário fica logo abaixo. */
.footer-col__lead {
	font-size: var(--text-base) !important;
	font-weight: 400 !important;
	line-height: 1.6;
	max-width: 34ch;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.footer-col li { line-height: 1.5; }

.footer-col p { color: rgb(var(--footer-text) / 0.8); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--spacing-4);
	padding-top: var(--spacing-8);
	border-top: 1px solid rgb(var(--footer-text) / 0.15);
	font-size: var(--text-sm);
	color: rgb(var(--footer-text) / 0.7);
}

@media (max-width: 749px) {
	.footer-grid { grid-template-columns: 1fr; gap: var(--spacing-8); }
}

/* --------------------------------------------------------------------------
   17. ÍCONES COM TEXTO (acima do rodapé)
   -------------------------------------------------------------------------- */
/* No original, em desktop os 3 ícones ficam sobre fundo transparente com
   títulos a 32px; em mobile o bloco ganha fundo azul e carrossel. */
.text-with-icons {
	background-color: transparent;
	color: inherit;
	padding-block: var(--spacing-16);
}

@media (max-width: 749px) {
	.text-with-icons {
		background-color: rgb(var(--accent));
		color: #fff;
		padding-block: var(--spacing-12);
	}
}

.text-with-icons__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--spacing-8);
	text-align: center;
}

/* Em mobile, o original mostra os 3 ícones num carrossel horizontal — cada
   item ocupa a largura do ecrã e desliza. Empilhá-los na vertical somava
   ~550px em vez dos 224px do original. */
@media (max-width: 749px) {
	.text-with-icons__grid {
		display: flex;
		gap: var(--spacing-6);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-inline: var(--spacing-5);
		margin-inline: calc(var(--spacing-5) * -1);
	}

	.text-with-icons__grid::-webkit-scrollbar { display: none; }

	.text-with-icons__item {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}
}

.text-with-icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-3);
}

.text-with-icons__item h3 { color: inherit; font-size: var(--text-h6); }
.text-with-icons__item p { color: rgb(var(--text-primary) / 0.75); font-size: var(--text-base); }

@media (min-width: 750px) {
	.text-with-icons__item h3 { font-size: 2rem; } /* 32px, como o original */
}

.text-with-icons__icon {
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: var(--rounded-full);
	background-color: rgb(var(--text-primary) / 0.05);
}

@media (max-width: 749px) {
	.text-with-icons__item h3 { color: #fff; }
	.text-with-icons__item p { color: rgb(255 255 255 / 0.8); }
	.text-with-icons__icon { background-color: rgb(255 255 255 / 0.12); }
}

/* --------------------------------------------------------------------------
   19. PÁGINA "SOBRE NÓS" — título + secções media-with-text
   Geometria retirada do original: título 250px; cada secção alterna a imagem
   entre a esquerda e a direita; imagem ~640px de largura.
   -------------------------------------------------------------------------- */
.page-hero {
	padding-block: var(--spacing-16) var(--spacing-10);
	text-align: center;
}

.page-hero__title { font-size: 2.25rem; font-weight: 700; }

.media-with-text { padding-block: var(--spacing-10); }

.media-with-text__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-10);
	align-items: center;
}

.media-with-text__media img {
	width: 100%;
	border-radius: var(--rounded-lg);
	display: block;
}

.media-with-text__content h2 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: var(--spacing-5);
	line-height: 1.25;
}

.media-with-text__content p { margin-bottom: var(--spacing-4); }

.media-with-text__content ul {
	margin: 0 0 var(--spacing-4);
	padding-left: var(--spacing-6);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

/* Em desktop: 2 colunas com a imagem a alternar de lado. */
@media (min-width: 1000px) {
	.media-with-text__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-16);
	}

	.media-with-text--reverse .media-with-text__media { order: 2; }
	.media-with-text--reverse .media-with-text__content { order: 1; }
}

/* --------------------------------------------------------------------------
   20. SECÇÕES DE PÁGINA DE PRODUTO — FAQ, colunas, nota legal
   -------------------------------------------------------------------------- */
.section__title {
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: var(--spacing-8);
}

.section--tint { background-color: rgb(var(--text-primary) / 0.03); }

.columns-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-8);
}

/* Em mobile o original mostra as 3 posições num carrossel horizontal
   (container 471px, itens de 285px lado a lado, com scroll). Empilhados
   somavam 1241px — 770px a mais do que o original. */
@media (max-width: 999px) {
	.columns-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--spacing-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: calc(var(--container-gutter) * -1);
		padding-inline: var(--container-gutter);
	}

	.columns-grid::-webkit-scrollbar { display: none; }

	.columns-grid__item {
		flex: 0 0 285px;
		width: 285px;
		scroll-snap-align: start;
	}
}

.columns-grid__item h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: var(--spacing-3);
}

/* Cada coluna tem uma imagem quadrada no topo — no original as 3 colunas
   medem 471px em mobile, com imagem de 285×285 (quadrada, igual à largura
   do item). Com `aspect-ratio: 4/3` a imagem ficava 214px e a coluna 90px
   mais curta. */
.columns-grid__icon {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--rounded);
	margin-bottom: var(--spacing-5);
	display: block;
	background-color: rgb(var(--text-primary) / 0.04);
}

.columns-grid__item p { color: rgb(var(--text-primary) / 0.8); }

/* FAQ — <details>/<summary> nativos (funcionam sem JS). */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.faq-item {
	border: 1px solid var(--border-color);
	border-radius: var(--rounded);
	overflow: hidden;
}

.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding: var(--spacing-5);
	font-weight: 700;
	font-size: 1.0625rem;
	cursor: pointer;
	list-style: none;
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
}

.faq-item[open] .faq-item__q::after { content: "–"; }

.faq-item__a {
	padding: 0 var(--spacing-5) var(--spacing-5);
	color: rgb(var(--text-primary) / 0.85);
}

.faq-item__a p { margin: 0; }

.rich-text-note {
	padding-block: var(--spacing-8);
	text-align: center;
	font-size: var(--text-sm);
	color: rgb(var(--text-primary) / 0.6);
}

@media (min-width: 750px) {
	.columns-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Avaliações de clientes --- */
.reviews-section__meta {
	text-align: center;
	margin: calc(var(--spacing-4) * -1) 0 var(--spacing-8);
	color: rgb(var(--text-primary) / 0.7);
}

.reviews-track {
	display: flex;
	gap: var(--spacing-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--spacing-2);
}

.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
	flex: 0 0 300px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-6);
	border: 1px solid var(--border-color);
	border-radius: var(--rounded);
}

.review-card__title { font-size: 1.0625rem; font-weight: 700; }
.review-card__body { font-size: var(--text-sm); color: rgb(var(--text-primary) / 0.8); flex: 1; }
.review-card__author { display: flex; flex-direction: column; font-size: var(--text-sm); }
.review-card__author span { color: rgb(var(--text-primary) / 0.6); }

/* --- Carrinho vazio ---
   O original (Shopify/Horizon) monta isto como `.empty-state`: um ícone de
   carrinho 48×48 com um badge "0" de 28×28 sobreposto no topo-direito, um
   título `p.h4` a 26px, e um botão `button--xl` de 237×60px — tudo centrado
   dentro do `.container` (1184px, x=48 em desktop).
   Não há título de página no carrinho: o H1 "Cart" do WooCommerce sobrava
   e empurrava o bloco para baixo. */
.dmx-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: var(--spacing-12) var(--spacing-16);
}

.dmx-cart-empty__icon {
	position: relative;
	width: 48px;
	height: 48px;
	margin-bottom: var(--spacing-6);
	color: rgb(var(--text-primary));
}

.dmx-cart-empty__icon svg {
	width: 48px;
	height: 48px;
	display: block;
}

.dmx-cart-empty__count {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgb(var(--accent));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

.dmx-cart-empty__title {
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 var(--spacing-6);
	max-width: 302px;
}

.dmx-cart-empty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 237px;
	height: 60px;
	padding-inline: var(--spacing-8);
	border-radius: 999px;
	background: rgb(var(--accent));
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

.dmx-cart-empty__btn:hover {
	opacity: 0.9;
	color: #fff;
}

/* O WooCommerce injecta o título da página acima do bloco — o original não
   tem título nenhum no carrinho. */
body.woocommerce-cart .woocommerce-products-header,
body.woocommerce-cart .page-title,
body.woocommerce-cart main > h1,
body.woocommerce-cart .wp-block-post-title {
	display: none;
}

/* O bloco de carrinho vazio do WooCommerce traz padding e alinhamento
   próprios que não batem com o `.empty-state` do original. O original usa o
   `.container` completo (1184px em desktop, x=48); o `alignwide` do
   WooCommerce encolhia para 712px e centrava. */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
}

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   22. FORMULÁRIO DE CONTACTOS
   O original tem um cartão cinza (`rounded bg-secondary`) com Nome + E-mail
   lado a lado e Mensagem por baixo. Os labels são flutuantes (sobem quando
   o campo tem conteúdo ou foco).
   -------------------------------------------------------------------------- */
.dmx-contact-eyebrow { margin-bottom: var(--spacing-2); }

.dmx-contact-form {
	max-width: 733px; /* --section-stack-main: 58.3334% de 1256px no original */
	margin: var(--spacing-10) auto 0;
	padding: var(--spacing-8);
	background: rgb(var(--text-primary) / 0.04);
	border-radius: var(--rounded);
}

.dmx-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-5);
}

.dmx-field {
	position: relative;
	margin-bottom: var(--spacing-5);
}

.dmx-field--full { margin-top: 0; }

.dmx-input {
	width: 100%;
	padding: 1.4rem var(--spacing-4) 0.6rem;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: rgb(var(--text-primary));
	background: #fff;
	border: 1px solid rgb(var(--text-primary) / 0.18);
	border-radius: var(--rounded-sm);
	appearance: none;
}

.dmx-textarea { resize: vertical; min-height: 140px; }

.dmx-input:focus {
	outline: none;
	border-color: rgb(var(--accent));
	box-shadow: 0 0 0 1px rgb(var(--accent));
}

/* Label flutuante: fica no centro do campo enquanto está vazio e sem foco. */
.dmx-label {
	position: absolute;
	left: var(--spacing-4);
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: rgb(var(--text-primary) / 0.55);
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease;
}

.dmx-field .dmx-textarea + .dmx-label {
	top: 1.6rem;
	transform: none;
}

.dmx-input:focus + .dmx-label,
.dmx-input:not(:placeholder-shown) + .dmx-label {
	top: 0.55rem;
	transform: none;
	font-size: 11px;
}

.dmx-contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding-inline: var(--spacing-8);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	background: rgb(var(--accent));
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.dmx-contact-form__submit:hover { opacity: 0.9; }

@media (max-width: 749px) {
	.dmx-contact-form__row { grid-template-columns: 1fr; }
	.dmx-contact-form { padding: var(--spacing-5); }
}

/* --------------------------------------------------------------------------
   21. CONTEÚDO LEGAL / PÁGINAS DE TEXTO ("prose")
   O original usa uma coluna de 712px com texto a 16px/1.6. Tínhamos 764px a
   14px, o que encurtava a página ~30% em desktop.
   Excepção: carrinho/checkout/conta NÃO são prosa — o WooCommerce traz o seu
   próprio layout de largura total e a coluna de 712px encolhia-o (o original
   usa o container completo de 1184px).
   -------------------------------------------------------------------------- */
.entry-content,
.prose {
	max-width: 712px;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.6;
}

body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-account .entry-content {
	max-width: none;
	margin-inline: 0;
}

/* Em mobile a coluna ocupa a largura toda (o original não limita a 712px
   em ecrãs estreitos — limitar alongava a página ~25%). */
@media (max-width: 749px) {
	.entry-content,
	.prose {
		max-width: none;
		font-size: 0.875rem;
		line-height: 1.55;
	}
}

.entry-content h2,
.prose h2 {
	font-size: 1.375rem;
	font-weight: 700;
	margin: var(--spacing-8) 0 var(--spacing-4);
}

.entry-content h3,
.prose h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: var(--spacing-6) 0 var(--spacing-3);
}

.entry-content p,
.prose p { margin-bottom: var(--spacing-5); }

.entry-content ul,
.prose ul {
	margin: 0 0 var(--spacing-5);
	padding-left: var(--spacing-6);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

/* A página de texto vive num container que não deve centrar a coluna duas
   vezes, nem limitar demais. */
.page-text-content { padding-block: var(--spacing-12); }

/* --------------------------------------------------------------------------
   22. BUY BOX DO PRODUTO — galeria + painel de compra
   Original: galeria 513px (imagem) + miniaturas 64px; painel com rating,
   título, preço, packs, cor, upsell e botão. ~1733px no total em desktop.
   -------------------------------------------------------------------------- */
.buybox { padding-block: var(--spacing-10); }

.buybox__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-8);
	align-items: start;
}

.buybox__gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-4);
}

.buybox__thumbs {
	order: 2;
	display: flex;
	gap: var(--spacing-3);
	overflow-x: auto;
	scrollbar-width: none;
}

.buybox__thumbs::-webkit-scrollbar { display: none; }

.buybox__stage {
	position: relative;
	order: 1;
}

.buybox__hero {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--rounded);
	display: block;
	background-color: rgb(var(--text-primary) / 0.04);
}

.buybox__zoom {
	position: absolute;
	top: var(--spacing-4);
	right: var(--spacing-4);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-4);
	background: rgb(255 255 255 / 0.9);
	backdrop-filter: blur(6px);
	border-radius: var(--rounded-full);
	font-size: var(--text-sm);
	cursor: pointer;
}

.buybox__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}

.buybox__rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	flex-wrap: wrap;
	font-size: var(--text-sm);
}

.buybox__title { font-size: 22px; font-weight: 700; line-height: 1.3; }

@media (min-width: 1000px) {
	.buybox__title { font-size: 26px; }
}

.buybox__price {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-4);
	flex-wrap: wrap;
}

.price__was {
	font-size: var(--text-lg);
	color: rgb(var(--text-primary) / 0.5);
	text-decoration: line-through;
}

.buybox__cta .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-3);
}

.buybox__cta-price { font-weight: 400; opacity: 0.85; }

.buybox__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-5);
	font-size: var(--text-sm);
	color: rgb(var(--text-primary) / 0.75);
}

.buybox__trust li { display: inline-flex; align-items: center; gap: var(--spacing-2); }

/* --- Blocos abaixo do botão de compra, como no original --- */

/* Lista de benefícios com visto verde (14px/1.5). */
.buybox__benefits {
	list-style: none;
	margin: var(--spacing-5) 0 0;
	padding: 0;
}

.buybox__benefits li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0.3rem 0;
	font-size: 14px;
	line-height: 1.5;
}

.buybox__check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: rgb(var(--accent));
}

/* Aviso de stock com ponto amarelo pulsante. */
.buybox__stock {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 4px 0 0 4px;
	padding: 0.3rem 0;
	font-size: 14px;
	line-height: 1.5;
}

.buybox__stock-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background: #ffc107;
	border-radius: 50%;
	animation: buybox-pulse 1.5s ease-in-out infinite;
}

@keyframes buybox-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.18); }
}

/* Linha de risco ("menos de 1% solicita a Garantia"). */
.buybox__risk {
	margin: var(--spacing-4) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgb(var(--text-primary) / 0.7);
}

/* Review em destaque (Teresa S.). */
.buybox__review {
	margin: var(--spacing-6) 0 0;
	padding: var(--spacing-5);
	background: rgb(var(--text-primary) / 0.04);
	border-radius: var(--rounded);
}

.buybox__review blockquote {
	margin: 0 0 var(--spacing-4);
	font-size: 14px;
	line-height: 1.6;
}

.buybox__review blockquote p { margin: 0; }

.buybox__review figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-3);
	font-size: 13px;
}

.buybox__review .stars { color: rgb(255 183 74); }
.buybox__review em {
	font-style: normal;
	font-weight: 700;
	color: rgb(var(--accent));
}

/* Acordeões do buybox (Conteúdo da Embalagem / Envio / Garantia / Pagamento). */
.buybox__accordion {
	margin-top: var(--spacing-6);
	border-top: 1px solid rgb(var(--text-primary) / 0.12);
}

.buybox__accordion .accordion { border-bottom: 1px solid rgb(var(--text-primary) / 0.12); }

.buybox__accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding: var(--spacing-4) 0;
	cursor: pointer;
	list-style: none;
}

.buybox__accordion summary::-webkit-details-marker { display: none; }

.buybox__accordion .accordion__toggle {
	font-size: 14px;
	font-weight: 700;
}

.buybox__accordion .accordion__chevron { transition: transform 0.2s ease; }
.buybox__accordion details[open] .accordion__chevron { transform: rotate(180deg); }

.buybox__accordion .accordion__content {
	padding-bottom: var(--spacing-4);
	font-size: 14px;
	line-height: 1.6;
	color: rgb(var(--text-primary) / 0.8);
}

.buybox__accordion .accordion__content p { margin: 0; }

/* Desktop: 2 colunas — galeria com miniaturas em coluna lateral.
   O original tem a galeria a 513px e a coluna de compra a 511px, com um
   vão largo entre elas (a galeria começa em x=160, não em x=48). Com
   `1fr 1fr` e gap de 64px as duas colunas ficavam a 560px — 47px a mais
   cada — e a imagem do produto aparecia maior do que no original. */
@media (min-width: 1000px) {
	.buybox__grid {
		/* A coluna da galeria é 513px de imagem + 80px de miniaturas =
		   593px; a coluna de compra fica nos 511px do original. O `gap`
		   de 96px reproduz a distância entre elas (galeria em x=160). */
		grid-template-columns: minmax(0, 593px) minmax(0, 511px);
		justify-content: center;
		column-gap: 48px;
		row-gap: var(--spacing-16);
	}

	.buybox__gallery {
		/* No original a imagem grande tem 513px e as miniaturas (64px)
		   sobrepõem-se à esquerda, fora do fluxo — não roubam largura.
		   O padding-left cria o espaço para elas sem encolher a imagem. */
		position: relative;
		display: block;
		padding-left: 80px;
	}

	.buybox__thumbs {
		position: absolute;
		top: 0;
		left: 0;
		width: 64px;
		flex-direction: column;
		overflow: visible;
	}
	.buybox__stage { width: 100%; }
}

@media (max-width: 1150px) {
	:root {
		--text-h0: 3.5rem;
		--text-h1: 2.75rem;
		--text-h2: 2.25rem;
		--container-gutter: var(--spacing-6);
	}

	.footer-grid { grid-template-columns: 1fr 1fr; }
	.featured-product__grid { gap: var(--spacing-10); }
}

@media (max-width: 1024px) {
	/* Drawer de navegação — encostado à direita, com overlay por trás.
	   top+bottom (SEM height) faz o drawer esticar a altura toda; definir
	   height em simultâneo faria o browser usar a altura do conteúdo.
	   O <nav> está fora do <header> de propósito: o backdrop-filter do header
	   cria um containing block e o fixed colapsaria à altura do header. */
	.main-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		margin-top: 0;
		width: min(22rem, 88vw);
		height: auto;
		display: block;
		justify-content: flex-start;
		background-color: #fff;
		padding: var(--spacing-16) var(--spacing-6) var(--spacing-8);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		box-shadow: var(--shadow-block);
		z-index: 300;
		overflow-y: auto;
		pointer-events: auto;
	}

	.main-nav.is-open { transform: translateX(0); }

	/* Botão de fechar dentro do drawer.
	   No original fica no canto SUPERIOR ESQUERDO (x=32) e tem 40px. */
	.main-nav__close {
		position: absolute;
		top: var(--spacing-6);
		left: var(--spacing-6);
		right: auto;
		width: 2.5rem;
		height: 2.5rem;
		display: grid;
		place-items: center;
		border-radius: var(--rounded-full);
		font-size: 1.5rem;
		line-height: 1;
		background-color: rgb(var(--text-primary) / 0.05);
	}

	.main-nav__close:hover { background-color: rgb(var(--text-primary) / 0.1); }

	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: var(--spacing-6);
	}

	.main-nav li { border-bottom: 1px solid var(--border-color); }

	.main-nav a {
		display: block;
		padding-block: var(--spacing-4);
		font-size: 1.5rem;   /* 24px, como o original */
		font-weight: 700;
	}

	.main-nav a::after { display: none; }

	.menu-toggle { display: flex; }

	/* Overlay do menu */
	.nav-overlay {
		position: fixed;
		inset: 0;
		background-color: rgb(0 0 0 / 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 250;
		border: none;
		padding: 0;
		cursor: pointer;
	}

	.nav-overlay.is-visible { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   Drawer de pesquisa (mobile)
   Espelha o `<search-drawer>` do original. Medidas extraídas do dormax.pt:
     drawer    fixed, top 0, 100% largura, z 999, padding 8px
     .search-input  flex, border-bottom 2px solid rgb(26,26,26),
                    gap 16px, align-items center, padding-bottom 10px
     input     18px Helvetica, sem borda/fundo
     Limpar    12px, rgba(26,26,26,0.7)   ✕ 24px, rgb(26,26,26)
   ========================================================================== */
.search-drawer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: rgb(var(--background));
	padding: 8px;
	transform: translateY(-100%);
	transition: transform 0.3s ease, visibility 0.3s ease;
	visibility: hidden;
}

.search-drawer.is-open {
	transform: translateY(0);
	visibility: visible;
}

/* `hidden` no HTML evita que o drawer apareça antes do CSS carregar. */
.search-drawer[hidden] { display: none; }

.search-drawer__form { margin: 0; }

.search-input {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 24px;           /* drawer pad 8 + 24 = x=32, como o original */
	padding: 20px 0 10px;     /* 20px acima → input a y=28, como o original */
	border-bottom: 2px solid rgb(var(--text-primary));
}

.search-input input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0;
	font-size: 18px;
	line-height: 1.6;
	font-family: inherit;
	color: rgb(var(--text-primary));
	-webkit-appearance: none;
	appearance: none;
}

.search-input input[type="search"]::placeholder { color: rgb(var(--text-primary) / 0.7); }
.search-input input[type="search"]:focus { outline: none; }

.search-input__clear {
	flex: none;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.6;
	color: rgb(var(--text-primary) / 0.7);
	/* No original o "Limpar" está invisível com o campo vazio e aparece
	   (fade) assim que há texto. */
	opacity: 0;
	transition: opacity 0.2s ease;
}

.search-input.has-value .search-input__clear { opacity: 1; }

.search-input__clear:hover { color: rgb(var(--text-primary)); }

.search-input__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: rgb(var(--text-primary));
}

.search-input__close svg { width: 24px; height: 24px; }

/* Overlay por baixo do drawer, para fechar ao tocar fora. */
.search-overlay {
	position: fixed;
	inset: 0;
	background-color: rgb(0 0 0 / 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 998;
	border: none;
	padding: 0;
	cursor: pointer;
}

.search-overlay.is-visible { opacity: 1; visibility: visible; }
body.search-open { overflow: hidden; }

	.featured-product__grid { grid-template-columns: 1fr; }
	.featured-product__info { position: static; }

	:root {
		--text-h0: 2.5rem;
		--text-h1: 2rem;
		--text-h2: 1.75rem;
		--text-h3: 1.5rem;
	}

	.content-over-media { min-height: 60vh; }
}

/* Fora do breakpoint o drawer está em fluxo normal: esconder auxiliares. */
@media (min-width: 1025px) {
	.main-nav__close,
	.nav-overlay { display: none; }
}

@media (max-width: 600px) {
	:root { --container-gutter: var(--spacing-5); }

	.logo-slider-title { font-size: 18px; }
	.logo-item { margin: 0 20px; }

	.footer-grid { grid-template-columns: 1fr; }

	/* Barra de anúncio numa só linha, como o original — evita empurrar o
	   hero 18px para baixo e desalinhar a dobra. */
	.announcement-bar {
		font-size: var(--text-xs);
		white-space: nowrap;
		overflow: hidden;
	}

	.announcement-bar__inner {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--spacing-2);
		min-height: 2.25rem;
		padding-inline: var(--spacing-3);
		text-overflow: ellipsis;
	}

	/* Alterna qual das duas mensagens aparece, para caber numa linha. */
	.announcement-bar__item:last-child { display: none; }

	.content-over-media__content { padding-block: var(--spacing-12); }
}

/* Alvos de toque: mínimo 44px de altura em ecrãs táteis. Excluímos os ícones
   do header — no original têm 22px e a caixa maior descentrava o logo. */
@media (hover: none) and (pointer: coarse) {
	.main-nav a,
	.footer-col a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Acessibilidade: foco visível */
:focus-visible {
	outline: 2px solid rgb(var(--accent));
	outline-offset: 3px;
	border-radius: var(--rounded-xs);
}