/* ========================================
 * Firestarter — utilitários estáticos
 * Espaçamentos, sections e container.
 * Editável à mão. Não é gerado pelo ACF.
 * ======================================== */

/* ========================================
 * VARIÁVEIS
 * Os tokens --fs-space-* são gerados a partir de
 * firestarter_layout_spacing_scale() e ficam em css/generated/layout.css.
 * ======================================== */

:root {
	--fs-gutter: clamp(16px, 4vw, 32px);
}

/* ========================================
 * INNERBLOCKS
 * O ACF envolve o InnerBlocks num div próprio. Sem isto ele vira o único
 * filho do container e recebe sozinho o flex e o gap que pertencem aos blocos.
 * ======================================== */

.acf-innerblocks-container {
	display: contents;
}

/* ========================================
 * PADDING
 * ======================================== */

.fs-p-0 { padding: var(--fs-space-0); }
.fs-p-4 { padding: var(--fs-space-4); }
.fs-p-8 { padding: var(--fs-space-8); }
.fs-p-10 { padding: var(--fs-space-10); }
.fs-p-12 { padding: var(--fs-space-12); }
.fs-p-14 { padding: var(--fs-space-14); }
.fs-p-16 { padding: var(--fs-space-16); }
.fs-p-24 { padding: var(--fs-space-24); }
.fs-p-32 { padding: var(--fs-space-32); }
.fs-p-40 { padding: var(--fs-space-40); }
.fs-p-48 { padding: var(--fs-space-48); }
.fs-p-56 { padding: var(--fs-space-56); }
.fs-p-64 { padding: var(--fs-space-64); }
.fs-p-80 { padding: var(--fs-space-80); }
.fs-p-96 { padding: var(--fs-space-96); }
.fs-p-120 { padding: var(--fs-space-120); }
.fs-p-160 { padding: var(--fs-space-160); }
.fs-p-180 { padding: var(--fs-space-180); }
.fs-p-200 { padding: var(--fs-space-200); }

.fs-px-0 { padding-inline: var(--fs-space-0); }
.fs-px-4 { padding-inline: var(--fs-space-4); }
.fs-px-8 { padding-inline: var(--fs-space-8); }
.fs-px-10 { padding-inline: var(--fs-space-10); }
.fs-px-12 { padding-inline: var(--fs-space-12); }
.fs-px-14 { padding-inline: var(--fs-space-14); }
.fs-px-16 { padding-inline: var(--fs-space-16); }
.fs-px-24 { padding-inline: var(--fs-space-24); }
.fs-px-32 { padding-inline: var(--fs-space-32); }
.fs-px-40 { padding-inline: var(--fs-space-40); }
.fs-px-48 { padding-inline: var(--fs-space-48); }
.fs-px-56 { padding-inline: var(--fs-space-56); }
.fs-px-64 { padding-inline: var(--fs-space-64); }
.fs-px-80 { padding-inline: var(--fs-space-80); }
.fs-px-96 { padding-inline: var(--fs-space-96); }
.fs-px-120 { padding-inline: var(--fs-space-120); }
.fs-px-160 { padding-inline: var(--fs-space-160); }
.fs-px-180 { padding-inline: var(--fs-space-180); }
.fs-px-200 { padding-inline: var(--fs-space-200); }

.fs-py-0 { padding-block: var(--fs-space-0); }
.fs-py-4 { padding-block: var(--fs-space-4); }
.fs-py-8 { padding-block: var(--fs-space-8); }
.fs-py-10 { padding-block: var(--fs-space-10); }
.fs-py-12 { padding-block: var(--fs-space-12); }
.fs-py-14 { padding-block: var(--fs-space-14); }
.fs-py-16 { padding-block: var(--fs-space-16); }
.fs-py-24 { padding-block: var(--fs-space-24); }
.fs-py-32 { padding-block: var(--fs-space-32); }
.fs-py-40 { padding-block: var(--fs-space-40); }
.fs-py-48 { padding-block: var(--fs-space-48); }
.fs-py-56 { padding-block: var(--fs-space-56); }
.fs-py-64 { padding-block: var(--fs-space-64); }
.fs-py-80 { padding-block: var(--fs-space-80); }
.fs-py-96 { padding-block: var(--fs-space-96); }
.fs-py-120 { padding-block: var(--fs-space-120); }
.fs-py-160 { padding-block: var(--fs-space-160); }
.fs-py-180 { padding-block: var(--fs-space-180); }
.fs-py-200 { padding-block: var(--fs-space-200); }

.fs-pt-0 { padding-top: var(--fs-space-0); }
.fs-pt-4 { padding-top: var(--fs-space-4); }
.fs-pt-8 { padding-top: var(--fs-space-8); }
.fs-pt-10 { padding-top: var(--fs-space-10); }
.fs-pt-12 { padding-top: var(--fs-space-12); }
.fs-pt-14 { padding-top: var(--fs-space-14); }
.fs-pt-16 { padding-top: var(--fs-space-16); }
.fs-pt-24 { padding-top: var(--fs-space-24); }
.fs-pt-32 { padding-top: var(--fs-space-32); }
.fs-pt-40 { padding-top: var(--fs-space-40); }
.fs-pt-48 { padding-top: var(--fs-space-48); }
.fs-pt-56 { padding-top: var(--fs-space-56); }
.fs-pt-64 { padding-top: var(--fs-space-64); }
.fs-pt-80 { padding-top: var(--fs-space-80); }
.fs-pt-96 { padding-top: var(--fs-space-96); }
.fs-pt-120 { padding-top: var(--fs-space-120); }
.fs-pt-160 { padding-top: var(--fs-space-160); }
.fs-pt-180 { padding-top: var(--fs-space-180); }
.fs-pt-200 { padding-top: var(--fs-space-200); }

.fs-pr-0 { padding-right: var(--fs-space-0); }
.fs-pr-4 { padding-right: var(--fs-space-4); }
.fs-pr-8 { padding-right: var(--fs-space-8); }
.fs-pr-10 { padding-right: var(--fs-space-10); }
.fs-pr-12 { padding-right: var(--fs-space-12); }
.fs-pr-14 { padding-right: var(--fs-space-14); }
.fs-pr-16 { padding-right: var(--fs-space-16); }
.fs-pr-24 { padding-right: var(--fs-space-24); }
.fs-pr-32 { padding-right: var(--fs-space-32); }
.fs-pr-40 { padding-right: var(--fs-space-40); }
.fs-pr-48 { padding-right: var(--fs-space-48); }
.fs-pr-56 { padding-right: var(--fs-space-56); }
.fs-pr-64 { padding-right: var(--fs-space-64); }
.fs-pr-80 { padding-right: var(--fs-space-80); }
.fs-pr-96 { padding-right: var(--fs-space-96); }
.fs-pr-120 { padding-right: var(--fs-space-120); }
.fs-pr-160 { padding-right: var(--fs-space-160); }
.fs-pr-180 { padding-right: var(--fs-space-180); }
.fs-pr-200 { padding-right: var(--fs-space-200); }

.fs-pb-0 { padding-bottom: var(--fs-space-0); }
.fs-pb-4 { padding-bottom: var(--fs-space-4); }
.fs-pb-8 { padding-bottom: var(--fs-space-8); }
.fs-pb-10 { padding-bottom: var(--fs-space-10); }
.fs-pb-12 { padding-bottom: var(--fs-space-12); }
.fs-pb-14 { padding-bottom: var(--fs-space-14); }
.fs-pb-16 { padding-bottom: var(--fs-space-16); }
.fs-pb-24 { padding-bottom: var(--fs-space-24); }
.fs-pb-32 { padding-bottom: var(--fs-space-32); }
.fs-pb-40 { padding-bottom: var(--fs-space-40); }
.fs-pb-48 { padding-bottom: var(--fs-space-48); }
.fs-pb-56 { padding-bottom: var(--fs-space-56); }
.fs-pb-64 { padding-bottom: var(--fs-space-64); }
.fs-pb-80 { padding-bottom: var(--fs-space-80); }
.fs-pb-96 { padding-bottom: var(--fs-space-96); }
.fs-pb-120 { padding-bottom: var(--fs-space-120); }
.fs-pb-160 { padding-bottom: var(--fs-space-160); }
.fs-pb-180 { padding-bottom: var(--fs-space-180); }
.fs-pb-200 { padding-bottom: var(--fs-space-200); }

.fs-pl-0 { padding-left: var(--fs-space-0); }
.fs-pl-4 { padding-left: var(--fs-space-4); }
.fs-pl-8 { padding-left: var(--fs-space-8); }
.fs-pl-10 { padding-left: var(--fs-space-10); }
.fs-pl-12 { padding-left: var(--fs-space-12); }
.fs-pl-14 { padding-left: var(--fs-space-14); }
.fs-pl-16 { padding-left: var(--fs-space-16); }
.fs-pl-24 { padding-left: var(--fs-space-24); }
.fs-pl-32 { padding-left: var(--fs-space-32); }
.fs-pl-40 { padding-left: var(--fs-space-40); }
.fs-pl-48 { padding-left: var(--fs-space-48); }
.fs-pl-56 { padding-left: var(--fs-space-56); }
.fs-pl-64 { padding-left: var(--fs-space-64); }
.fs-pl-80 { padding-left: var(--fs-space-80); }
.fs-pl-96 { padding-left: var(--fs-space-96); }
.fs-pl-120 { padding-left: var(--fs-space-120); }
.fs-pl-160 { padding-left: var(--fs-space-160); }
.fs-pl-180 { padding-left: var(--fs-space-180); }
.fs-pl-200 { padding-left: var(--fs-space-200); }

/* ========================================
 * MARGIN
 * ======================================== */

.fs-m-0 { margin: var(--fs-space-0); }
.fs-m-4 { margin: var(--fs-space-4); }
.fs-m-8 { margin: var(--fs-space-8); }
.fs-m-10 { margin: var(--fs-space-10); }
.fs-m-12 { margin: var(--fs-space-12); }
.fs-m-14 { margin: var(--fs-space-14); }
.fs-m-16 { margin: var(--fs-space-16); }
.fs-m-24 { margin: var(--fs-space-24); }
.fs-m-32 { margin: var(--fs-space-32); }
.fs-m-40 { margin: var(--fs-space-40); }
.fs-m-48 { margin: var(--fs-space-48); }
.fs-m-56 { margin: var(--fs-space-56); }
.fs-m-64 { margin: var(--fs-space-64); }
.fs-m-80 { margin: var(--fs-space-80); }
.fs-m-96 { margin: var(--fs-space-96); }
.fs-m-120 { margin: var(--fs-space-120); }
.fs-m-160 { margin: var(--fs-space-160); }
.fs-m-180 { margin: var(--fs-space-180); }
.fs-m-200 { margin: var(--fs-space-200); }

.fs-mx-0 { margin-inline: var(--fs-space-0); }
.fs-mx-4 { margin-inline: var(--fs-space-4); }
.fs-mx-8 { margin-inline: var(--fs-space-8); }
.fs-mx-10 { margin-inline: var(--fs-space-10); }
.fs-mx-12 { margin-inline: var(--fs-space-12); }
.fs-mx-14 { margin-inline: var(--fs-space-14); }
.fs-mx-16 { margin-inline: var(--fs-space-16); }
.fs-mx-24 { margin-inline: var(--fs-space-24); }
.fs-mx-32 { margin-inline: var(--fs-space-32); }
.fs-mx-40 { margin-inline: var(--fs-space-40); }
.fs-mx-48 { margin-inline: var(--fs-space-48); }
.fs-mx-56 { margin-inline: var(--fs-space-56); }
.fs-mx-64 { margin-inline: var(--fs-space-64); }
.fs-mx-80 { margin-inline: var(--fs-space-80); }
.fs-mx-96 { margin-inline: var(--fs-space-96); }
.fs-mx-120 { margin-inline: var(--fs-space-120); }
.fs-mx-160 { margin-inline: var(--fs-space-160); }
.fs-mx-180 { margin-inline: var(--fs-space-180); }
.fs-mx-200 { margin-inline: var(--fs-space-200); }
.fs-mx-auto { margin-inline: auto; }

.fs-my-0 { margin-block: var(--fs-space-0); }
.fs-my-4 { margin-block: var(--fs-space-4); }
.fs-my-8 { margin-block: var(--fs-space-8); }
.fs-my-10 { margin-block: var(--fs-space-10); }
.fs-my-12 { margin-block: var(--fs-space-12); }
.fs-my-14 { margin-block: var(--fs-space-14); }
.fs-my-16 { margin-block: var(--fs-space-16); }
.fs-my-24 { margin-block: var(--fs-space-24); }
.fs-my-32 { margin-block: var(--fs-space-32); }
.fs-my-40 { margin-block: var(--fs-space-40); }
.fs-my-48 { margin-block: var(--fs-space-48); }
.fs-my-56 { margin-block: var(--fs-space-56); }
.fs-my-64 { margin-block: var(--fs-space-64); }
.fs-my-80 { margin-block: var(--fs-space-80); }
.fs-my-96 { margin-block: var(--fs-space-96); }
.fs-my-120 { margin-block: var(--fs-space-120); }
.fs-my-160 { margin-block: var(--fs-space-160); }
.fs-my-180 { margin-block: var(--fs-space-180); }
.fs-my-200 { margin-block: var(--fs-space-200); }

.fs-mt-0 { margin-top: var(--fs-space-0); }
.fs-mt-4 { margin-top: var(--fs-space-4); }
.fs-mt-8 { margin-top: var(--fs-space-8); }
.fs-mt-10 { margin-top: var(--fs-space-10); }
.fs-mt-12 { margin-top: var(--fs-space-12); }
.fs-mt-14 { margin-top: var(--fs-space-14); }
.fs-mt-16 { margin-top: var(--fs-space-16); }
.fs-mt-24 { margin-top: var(--fs-space-24); }
.fs-mt-32 { margin-top: var(--fs-space-32); }
.fs-mt-40 { margin-top: var(--fs-space-40); }
.fs-mt-48 { margin-top: var(--fs-space-48); }
.fs-mt-56 { margin-top: var(--fs-space-56); }
.fs-mt-64 { margin-top: var(--fs-space-64); }
.fs-mt-80 { margin-top: var(--fs-space-80); }
.fs-mt-96 { margin-top: var(--fs-space-96); }
.fs-mt-120 { margin-top: var(--fs-space-120); }
.fs-mt-160 { margin-top: var(--fs-space-160); }
.fs-mt-180 { margin-top: var(--fs-space-180); }
.fs-mt-200 { margin-top: var(--fs-space-200); }

.fs-mr-0 { margin-right: var(--fs-space-0); }
.fs-mr-4 { margin-right: var(--fs-space-4); }
.fs-mr-8 { margin-right: var(--fs-space-8); }
.fs-mr-10 { margin-right: var(--fs-space-10); }
.fs-mr-12 { margin-right: var(--fs-space-12); }
.fs-mr-14 { margin-right: var(--fs-space-14); }
.fs-mr-16 { margin-right: var(--fs-space-16); }
.fs-mr-24 { margin-right: var(--fs-space-24); }
.fs-mr-32 { margin-right: var(--fs-space-32); }
.fs-mr-40 { margin-right: var(--fs-space-40); }
.fs-mr-48 { margin-right: var(--fs-space-48); }
.fs-mr-56 { margin-right: var(--fs-space-56); }
.fs-mr-64 { margin-right: var(--fs-space-64); }
.fs-mr-80 { margin-right: var(--fs-space-80); }
.fs-mr-96 { margin-right: var(--fs-space-96); }
.fs-mr-120 { margin-right: var(--fs-space-120); }
.fs-mr-160 { margin-right: var(--fs-space-160); }
.fs-mr-180 { margin-right: var(--fs-space-180); }
.fs-mr-200 { margin-right: var(--fs-space-200); }

.fs-mb-0 { margin-bottom: var(--fs-space-0); }
.fs-mb-4 { margin-bottom: var(--fs-space-4); }
.fs-mb-8 { margin-bottom: var(--fs-space-8); }
.fs-mb-10 { margin-bottom: var(--fs-space-10); }
.fs-mb-12 { margin-bottom: var(--fs-space-12); }
.fs-mb-14 { margin-bottom: var(--fs-space-14); }
.fs-mb-16 { margin-bottom: var(--fs-space-16); }
.fs-mb-24 { margin-bottom: var(--fs-space-24); }
.fs-mb-32 { margin-bottom: var(--fs-space-32); }
.fs-mb-40 { margin-bottom: var(--fs-space-40); }
.fs-mb-48 { margin-bottom: var(--fs-space-48); }
.fs-mb-56 { margin-bottom: var(--fs-space-56); }
.fs-mb-64 { margin-bottom: var(--fs-space-64); }
.fs-mb-80 { margin-bottom: var(--fs-space-80); }
.fs-mb-96 { margin-bottom: var(--fs-space-96); }
.fs-mb-120 { margin-bottom: var(--fs-space-120); }
.fs-mb-160 { margin-bottom: var(--fs-space-160); }
.fs-mb-180 { margin-bottom: var(--fs-space-180); }
.fs-mb-200 { margin-bottom: var(--fs-space-200); }

.fs-ml-0 { margin-left: var(--fs-space-0); }
.fs-ml-4 { margin-left: var(--fs-space-4); }
.fs-ml-8 { margin-left: var(--fs-space-8); }
.fs-ml-10 { margin-left: var(--fs-space-10); }
.fs-ml-12 { margin-left: var(--fs-space-12); }
.fs-ml-14 { margin-left: var(--fs-space-14); }
.fs-ml-16 { margin-left: var(--fs-space-16); }
.fs-ml-24 { margin-left: var(--fs-space-24); }
.fs-ml-32 { margin-left: var(--fs-space-32); }
.fs-ml-40 { margin-left: var(--fs-space-40); }
.fs-ml-48 { margin-left: var(--fs-space-48); }
.fs-ml-56 { margin-left: var(--fs-space-56); }
.fs-ml-64 { margin-left: var(--fs-space-64); }
.fs-ml-80 { margin-left: var(--fs-space-80); }
.fs-ml-96 { margin-left: var(--fs-space-96); }
.fs-ml-120 { margin-left: var(--fs-space-120); }
.fs-ml-160 { margin-left: var(--fs-space-160); }
.fs-ml-180 { margin-left: var(--fs-space-180); }
.fs-ml-200 { margin-left: var(--fs-space-200); }

/* ========================================
 * CHIP (pill, botão e similares)
 * Forma fixa. Cores, inset e borda vêm das camadas e das variáveis.
 * ======================================== */

.fs-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-4, 4px);
	flex: 0 0 auto;
	width: fit-content;
	box-sizing: border-box;
	text-decoration: none;
	color: var(--fs-chip-color, inherit);
	background-color: var(--fs-chip-bg, transparent);
}

a.fs-chip,
button.fs-chip {
	cursor: pointer;
}

button.fs-chip {
	margin: 0;
	appearance: none;
}

.fs-chip:hover {
	color: var(--fs-chip-hover-color, var(--fs-chip-color, inherit));
	background-color: var(--fs-chip-hover-bg, var(--fs-chip-bg, transparent));
	border-color: var(--fs-chip-hover-border, var(--fs-border-color, currentColor));
}

/*
 * WooCommerce pinta `button.button` / `a.button` no body.woocommerce.
 * A tipografia chamada Button usa essa classe; sem isto o chip perde
 * cor, fundo, padding e borda só na página de produto.
 */
body.woocommerce a.fs-chip,
body.woocommerce button.fs-chip,
body.woocommerce-page a.fs-chip,
body.woocommerce-page button.fs-chip {
	display: inline-flex;
	color: var(--fs-chip-color, inherit);
	background-color: var(--fs-chip-bg, transparent);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	padding-block: var(--fs-inset-py-mobile, 0);
	padding-inline: var(--fs-inset-px-mobile, 0);
	border: var(--fs-border-width, 0) solid var(--fs-border-color, currentColor);
	border-radius: var(--fs-border-radius, 0);
}

body.woocommerce a.fs-chip:hover,
body.woocommerce button.fs-chip:hover,
body.woocommerce-page a.fs-chip:hover,
body.woocommerce-page button.fs-chip:hover {
	color: var(--fs-chip-hover-color, var(--fs-chip-color, inherit));
	background-color: var(--fs-chip-hover-bg, var(--fs-chip-bg, transparent));
	background-image: none;
	border-color: var(--fs-chip-hover-border, var(--fs-border-color, currentColor));
}

.fs-chip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.fs-chip__icon {
	flex: 0 0 auto;
}

.fs-chip--placeholder {
	opacity: 0.5;
}

.fs-stretch {
	width: 100%;
	max-width: 100%;
	align-self: flex-start;
	box-sizing: border-box;
}

.fs-chip.fs-stretch {
	flex: 0 1 auto;
	width: 100%;
	justify-content: center;
}

/* ========================================
 * DRAWER (off-canvas genérico)
 * Painel lateral + fundo. O script em js/drawer.js abre/fecha.
 * ======================================== */

.fs-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.fs-drawer[hidden] {
	display: none;
}

.fs-drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--fs-drawer-backdrop, transparent);
}

.fs-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	overflow: auto;
	box-sizing: border-box;
}

.fs-drawer[data-fs-drawer-side="right"] .fs-drawer__panel {
	left: auto;
	right: 0;
}

.fs-drawer__panel:focus {
	outline: none;
}

.fs-drawer--preview {
	position: static;
	z-index: auto;
}

.fs-drawer--preview .fs-drawer__backdrop {
	display: none;
}

.fs-drawer--preview .fs-drawer__panel {
	position: relative;
	height: auto;
}

html.fs-drawer-open {
	overflow: hidden;
}

/* ========================================
 * SECTIONS E CONTAINER
 * ======================================== */

/* A section ocupa sempre toda a largura; quem limita é o container interno. */
.fs-section {
	position: relative;
	width: 100%;
}

/* Contém o conteúdo interno da section. */
.fs-container {
	width: 100%;
	max-width: var(--fs-layout-max-width, 1440px);
	margin-inline: auto;
	padding-inline: var(--fs-gutter);
}

.fs-container--flush {
	padding-inline: 0;
}

/* Preço antigo: sempre riscado, inclusive .amount do WooCommerce. */
.fs-price-old,
.fs-price-old .amount,
.fs-price-old bdi,
.fs-price-old .woocommerce-Price-amount,
.fs-product-card__price-old,
.fs-product-card__price-old .amount,
.fs-product-card__price-old bdi,
.fs-minicart__sum-old,
.fs-minicart__sum-old .amount,
.fs-minicart__sum-old bdi,
.fs-context[data-fs-context="price_old"]:not(.fs-context--placeholder),
.fs-context[data-fs-context="price_old"]:not(.fs-context--placeholder) .amount,
.fs-context[data-fs-context="price_old"]:not(.fs-context--placeholder) bdi {
	text-decoration: line-through;
}