/*
 * HC Carlix - template.css
 * Base geral do template: reset leve, estrutura e secoes principais.
 *
 * Não colocar aqui componentes especificos como menu, breadcrumb,
 * botões, formulários, hero, artigos ou módulos. Eles ficam em arquivos
 * CSS proprios para facilitar manutencao e overrides.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
	overflow-x: clip;
	scroll-behavior: var(--carlix-scroll-behavior, auto);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--carlix-bg);
	color: var(--carlix-text);
	font-family: var(--carlix-font-body);
	font-size: var(--carlix-font-size);
	line-height: var(--carlix-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a { color: inherit; }

.carlix-site {
	position: relative;
	min-height: 100vh;
	background: var(--carlix-bg);
	color: var(--carlix-text);
	isolation: isolate;
}

.carlix-site::before,
.carlix-site::after {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
}

.carlix-site::before {
	background:
		var(--carlix-site-bg-image, none),
		var(--carlix-site-bg, transparent);
	background-position: var(--carlix-site-bg-position, center center);
	background-size: var(--carlix-site-bg-size, cover);
	background-repeat: var(--carlix-site-bg-repeat, no-repeat);
	background-attachment: var(--carlix-site-bg-attachment, scroll);
	opacity: var(--carlix-site-bg-opacity, 1);
}

.carlix-site::after {
	background: var(--carlix-site-overlay-bg, transparent);
	opacity: var(--carlix-site-overlay-opacity, 0);
}

/* Escopado às seções do próprio template (.carlix-session). Um seletor aberto
   (.carlix-site > *) sobrescreveria o position de qualquer elemento injetado por
   plugins no fim do body — botões flutuantes, modais, cookie bars — quebrando o
   position:fixed deles. As variantes sticky/fixed/floating do header definem o
   próprio position e ficam de fora. */
.carlix-site > .carlix-session:not(.carlix-header--sticky):not(.carlix-header--fixed):not(.carlix-header--floating) {
	position: relative;
	z-index: var(--carlix-layer, 1);
}

.carlix-reduce-motion *,
.carlix-reduce-motion *::before,
.carlix-reduce-motion *::after {
	scroll-behavior: auto !important;
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
}

.carlix-enhanced-contrast {
	color-scheme: light;
}

.carlix-session {
	display: block;
	width: 100%;
}

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

.carlix-container-fluid {
	max-width: none;
}

.carlix-container-full {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.carlix-layout-section,
.carlix-layout-row,
.carlix-layout-column {
	position: relative;
	color: inherit;
	isolation: isolate;
}

.carlix-layout-section::before,
.carlix-layout-row::before,
.carlix-layout-column::before,
.carlix-layout-section::after,
.carlix-layout-row::after,
.carlix-layout-column::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
}

.carlix-layout-section::before,
.carlix-layout-row::before,
.carlix-layout-column::before {
	background:
		var(--carlix-managed-bg-image, none),
		var(--carlix-managed-bg, transparent);
	background-position: var(--carlix-managed-bg-position, center center);
	background-size: var(--carlix-managed-bg-size, cover);
	background-repeat: var(--carlix-managed-bg-repeat, no-repeat);
	background-attachment: var(--carlix-managed-bg-attachment, scroll);
	opacity: var(--carlix-managed-bg-opacity, 1);
}

.carlix-layout-section::after,
.carlix-layout-row::after,
.carlix-layout-column::after {
	background: var(--carlix-managed-overlay-bg, transparent);
	opacity: var(--carlix-managed-overlay-opacity, 0);
}

.carlix-layout-section > *,
.carlix-layout-column > *,
.carlix-layout-row > * {
	position: relative;
	z-index: 1;
}

.carlix-layout-section a,
.carlix-layout-column a {
	color: var(--carlix-managed-link, inherit);
}

.carlix-layout-section a:hover,
.carlix-layout-section a:focus-visible,
.carlix-layout-column a:hover,
.carlix-layout-column a:focus-visible {
	color: var(--carlix-managed-hover, var(--carlix-managed-link, inherit));
}

/* Container das secoes do Layout Manager: empilha as Rows na vertical e
   ESTICA cada Row para 100% da largura. Antes era display:grid sem
   grid-template-columns, o que criava uma célula auto-sized e fazia a
   .carlix-row interna contrair até a largura mínima do conteúdo
   (sintoma: banner e colunas "pequenas" mesmo com col-12). Flex column
   resolve sem mexer na .carlix-row (que continua com seu próprio grid
   de 12 colunas vindo do grid.css). */
.carlix-layout-section > .carlix-container,
.carlix-layout-section > .carlix-container-fluid,
.carlix-layout-section > .carlix-container-full {
	display: flex;
	flex-direction: column;
	gap: var(--carlix-managed-row-gap, var(--carlix-grid-gap, 1.5rem));
	align-items: var(--carlix-align-horizontal, stretch);
	justify-content: var(--carlix-align-vertical, flex-start);
}

.carlix-layout-row {
	position: relative;
	width: 100%;
	gap: var(--carlix-row-gap, var(--carlix-grid-gap, 1.5rem));
	align-items: var(--carlix-align-vertical, stretch);
	justify-content: var(--carlix-align-horizontal, start);
}

.carlix-layout-row--gap-none { --carlix-row-gap: 0; }
.carlix-layout-row--gap-xs { --carlix-row-gap: 0.5rem; }
.carlix-layout-row--gap-sm { --carlix-row-gap: 0.75rem; }
.carlix-layout-row--gap-md { --carlix-row-gap: var(--carlix-grid-gap, 1.5rem); }
.carlix-layout-row--gap-lg { --carlix-row-gap: 2rem; }
.carlix-layout-row--gap-xl { --carlix-row-gap: 3rem; }

.carlix-layout-row--v-start { align-items: var(--carlix-align-vertical, start); }
.carlix-layout-row--v-center { align-items: var(--carlix-align-vertical, center); }
.carlix-layout-row--v-end { align-items: var(--carlix-align-vertical, end); }
.carlix-layout-row--v-stretch { align-items: var(--carlix-align-vertical, stretch); }

/* Alinhamento horizontal do GRUPO de colunas dentro da Row. justify-content
   atua quando as colunas não somam 12 (sobra espaço no track). NUNCA usar
   justify-items aqui — ele torna justify-self:start em cada coluna e faz
   a célula contrair ao tamanho do conteúdo, quebrando o grid de 12 cols. */
.carlix-layout-row--h-start { justify-content: var(--carlix-align-horizontal, start); }
.carlix-layout-row--h-center { justify-content: var(--carlix-align-horizontal, center); }
.carlix-layout-row--h-end { justify-content: var(--carlix-align-horizontal, end); }
.carlix-layout-row--h-between { justify-content: var(--carlix-align-horizontal, space-between); }

.carlix-layout-column {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	min-width: 0;
	align-items: var(--carlix-align-horizontal, stretch);
	justify-content: var(--carlix-align-vertical, flex-start);
}

/* Conteúdo solto dentro da coluna ocupa a largura disponível da célula
   do grid. Não força em módulos que já tenham largura própria (img/svg
   continuam com max-width:100% pelo reset, formulários continuam livres). */
.carlix-layout-column > * {
	max-width: 100%;
}

.carlix-hidden-all { display: none !important; }

@media (max-width: 767.98px) {
	.carlix-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.carlix-hide-tablet { display: none !important; }
}

@media (min-width: 992px) {
	.carlix-hide-desktop { display: none !important; }
}

@media (max-width: 575.98px) {
	.carlix-hide-phone { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.carlix-hide-large-phone { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.carlix-hide-tablet { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.carlix-hide-small-desktop { display: none !important; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.carlix-hide-large-desktop { display: none !important; }
}

@media (min-width: 1400px) {
	.carlix-hide-extra-large-desktop { display: none !important; }
}

.carlix-dev-show-grid .carlix-row,
.carlix-dev-show-grid .carlix-layout-column {
	outline: 1px dashed rgba(211, 47, 47, 0.55);
	outline-offset: -1px;
}

.carlix-dev-show-grid .carlix-layout-column::after,
.carlix-dev-show-positions .carlix-layout-column[data-carlix-position]::before {
	position: absolute;
	top: 0.25rem;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	min-height: 1.25rem;
	padding: 0.12rem 0.42rem;
	color: #ffffff;
	background: rgba(13, 19, 27, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.carlix-dev-show-grid .carlix-layout-column::after {
	right: 0.25rem;
	content: attr(data-carlix-grid);
}

.carlix-dev-show-positions .carlix-layout-column[data-carlix-position]::before {
	left: 0.25rem;
	content: attr(data-carlix-position);
}

.carlix-dev-show-empty-areas .carlix-layout-column:empty {
	min-height: 4rem;
	background: repeating-linear-gradient(
		-45deg,
		rgba(211, 47, 47, 0.08),
		rgba(211, 47, 47, 0.08) 8px,
		rgba(255, 255, 255, 0.04) 8px,
		rgba(255, 255, 255, 0.04) 16px
	);
}

.carlix-dev-show-breakpoints::after {
	position: fixed;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 9999;
	padding: 0.38rem 0.55rem;
	color: #ffffff;
	background: rgba(13, 19, 27, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.35rem;
	font-size: 0.75rem;
	font-weight: 800;
	content: "desktop";
	pointer-events: none;
}

@media (max-width: 767.98px) {
	.carlix-dev-show-breakpoints::after { content: "mobile"; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.carlix-dev-show-breakpoints::after { content: "tablet"; }
}

@media (min-width: 1024px) {
	.carlix-visible-tablet,
	.carlix-visible-mobile { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1023px) {
	.carlix-visible-desktop,
	.carlix-visible-mobile { display: none !important; }
}

@media (max-width: 640px) {
	.carlix-visible-desktop,
	.carlix-visible-tablet { display: none !important; }
}

/* Largura do container por seção (override) com fallback na global.
   "full" vira "none" (max-width: none = largura total, com padding). */
.carlix-topbar      > .carlix-container { max-width: var(--carlix-topbar-container,      var(--carlix-container)); }
.carlix-header      > .carlix-container { max-width: var(--carlix-header-container,      var(--carlix-container)); }
.carlix-banner      > .carlix-container { max-width: var(--carlix-banner-container,      var(--carlix-container)); }
.carlix-breadcrumbs > .carlix-container { max-width: var(--carlix-breadcrumbs-container, var(--carlix-container)); }
.carlix-top         > .carlix-container { max-width: var(--carlix-top-container,         var(--carlix-container)); }
.carlix-main        > .carlix-container { max-width: var(--carlix-main-container,        var(--carlix-container)); }
.carlix-bottom      > .carlix-container { max-width: var(--carlix-bottom-container,      var(--carlix-container)); }
.carlix-footer      > .carlix-container { max-width: var(--carlix-footer-container,      var(--carlix-container)); }
.carlix-credits     > .carlix-container { max-width: var(--carlix-credits-container,     var(--carlix-container)); }

.carlix-header,
.carlix-top,
.carlix-main,
.carlix-bottom,
.carlix-footer,
.carlix-credits {
	border-top: 1px solid color-mix(in srgb, var(--carlix-border) 70%, transparent);
}

.carlix-topbar {
	padding-block: var(--carlix-topbar-space-top) var(--carlix-topbar-space-bottom);
	background: var(--carlix-topbar-bg);
	color: var(--carlix-topbar-text);
	font-size: 0.875rem;
}

.carlix-header {
	--carlix-layer: 60;
	position: relative;
	overflow: visible;
	padding-block: var(--carlix-header-space-top) var(--carlix-header-space-bottom);
	min-height: var(--carlix-header-height-desktop, auto);
	background: var(--carlix-header-bg);
	color: var(--carlix-header-text);
	box-shadow: var(--carlix-shadow-sm);
}

/* Comportamento do cabeçalho (parametro) */
.carlix-header--static { position: relative; }
.carlix-header--sticky {
	--carlix-layer: 70;
	position: sticky;
	top: 0;
	z-index: 70;
}
.carlix-header--fixed {
	--carlix-layer: 70;
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 70;
}

.carlix-header--transparent-initial {
	background: transparent;
	box-shadow: none;
}

body.carlix-header-scrolled .carlix-header--background-on-scroll {
	background: var(--carlix-header-bg);
}

body.carlix-header-scrolled .carlix-header--shadow-on-scroll {
	box-shadow: var(--carlix-shadow);
}

body.carlix-header-scrolled .carlix-header--shrink-on-scroll {
	padding-block: max(0.35rem, calc(var(--carlix-header-space-top) * 0.55)) max(0.35rem, calc(var(--carlix-header-space-bottom) * 0.55));
}

.carlix-header--blur {
	backdrop-filter: blur(14px);
}

.carlix-header--overlay {
	pointer-events: auto;
}

.carlix-header-is-hidden .carlix-header--sticky,
.carlix-header-is-hidden .carlix-header--fixed {
	transform: translateY(-110%);
}

.carlix-header--sticky,
.carlix-header--fixed {
	transition:
		transform var(--carlix-header-transition, 220ms) ease,
		background var(--carlix-header-transition, 220ms) ease,
		box-shadow var(--carlix-header-transition, 220ms) ease,
		padding var(--carlix-header-transition, 220ms) ease;
}

.carlix-header--floating {
	--carlix-layer: 70;
	position: sticky;
	top: var(--carlix-space-3);
	z-index: 70;
	background: transparent;
	box-shadow: none;
	border-top: 0;
}

.carlix-header--floating > .carlix-container {
	background: var(--carlix-header-bg);
	border: 1px solid color-mix(in srgb, var(--carlix-border) 80%, transparent);
	border-radius: var(--carlix-radius-lg);
	box-shadow: var(--carlix-shadow);
	transition:
		box-shadow var(--carlix-transition),
		transform var(--carlix-transition);
}

body.carlix-header-scrolled .carlix-header--floating > .carlix-container {
	box-shadow: var(--carlix-shadow-lg);
	transform: translateY(0.15rem);
}

/* compensa o header fixo (JS seta --carlix-header-h) */
body.carlix-header-is-fixed:not(.carlix-header-overlay-content) { padding-top: var(--carlix-header-h, 0px); }

.carlix-header .carlix-row {
	align-items: center;
}

.carlix-header .carlix-row--toggle-start {
	grid-template-columns: auto repeat(12, minmax(0, 1fr));
}

.carlix-header .carlix-row--toggle-end {
	grid-template-columns: repeat(12, minmax(0, 1fr)) auto;
}

.carlix-header .carlix-nav-toggle-column {
	position: relative;
	top: auto;
	display: none;
	align-items: center;
	justify-content: center;
	align-self: center;
	justify-self: center;
	width: auto;
	min-width: var(--carlix-mobile-button-size, 2.75rem);
	height: auto;
	transform: none;
}

.carlix-header .carlix-nav-toggle-column--start {
	grid-column: 1 / 2;
	grid-row: 1;
}

.carlix-header .carlix-nav-toggle-column--end {
	grid-column: -2 / -1;
	grid-row: 1;
}

@media (max-width: 1023px) {
	.carlix-header .carlix-nav-toggle-column {
		display: flex;
	}
}

@media (min-width: 1024px) {
	.carlix-header .carlix-nav-toggle-column:not(.carlix-mobile-nav--desktop) {
		display: none;
	}

	.carlix-header .carlix-nav-toggle-column.carlix-mobile-nav--desktop {
		display: flex;
	}
}

.carlix-header > .carlix-container,
.carlix-header .carlix-row,
.carlix-header .carlix-layout-row,
.carlix-header .carlix-layout-column,
.carlix-navigation,
.carlix-navigation > .carlix-container,
.carlix-navigation .carlix-row,
.carlix-navigation .carlix-layout-row,
.carlix-navigation .carlix-layout-column {
	overflow: visible;
}

.carlix-navigation {
	--carlix-layer: 60;
	position: relative;
}

.carlix-logo-slot {
	display: flex;
	align-items: center;
}

.carlix-logo-slot--start { justify-content: flex-start; }
.carlix-logo-slot--center { justify-content: center; }
.carlix-logo-slot--end { justify-content: flex-end; }

.carlix-brand,
.hc-logo-showcase {
	display: inline-flex;
	align-items: center;
	max-width: 13rem;
	text-decoration: none;
}

.carlix-brand {
	color: inherit;
	gap: 0.15rem;
}

.carlix-logo {
	min-width: 0;
}

.carlix-brand--text {
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.05;
}

.carlix-logo-slot--center .carlix-brand--text,
.carlix-logo-slot--center .carlix-logo--text {
	align-items: center;
	text-align: center;
}

.carlix-logo-slot--end .carlix-brand--text,
.carlix-logo-slot--end .carlix-logo--text {
	align-items: flex-end;
	text-align: right;
}

.carlix-brand-title,
.carlix-logo__title {
	color: var(--carlix-secondary);
	font-family: var(--carlix-font-heading);
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	font-weight: 800;
	letter-spacing: 0;
}

.carlix-brand-slogan,
.carlix-logo__slogan {
	color: var(--carlix-primary);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
}

.carlix-logo-picture,
.carlix-logo__picture {
	display: inline-flex;
	align-items: center;
}

.carlix-brand img,
.carlix-logo__image,
.hc-logo-showcase img {
	max-height: 4rem;
	object-fit: contain;
}

.carlix-logo--image {
	line-height: 0;
}

.carlix-menu {
	display: flex;
	justify-content: flex-start;
}
.carlix-menu--start  { justify-content: flex-start; }
.carlix-menu--center { justify-content: center; }
.carlix-menu--end    { justify-content: flex-end; }

.carlix-nav-type-offcanvas .carlix-menu {
	display: none;
}

@media (max-width: 1023px) {
	.carlix-menu {
		display: none;
	}
}

/* Botão voltar ao topo (parametro) */
.carlix-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: #fff;
	background: var(--carlix-primary);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--carlix-shadow-lg);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity var(--carlix-transition), transform var(--carlix-transition), background var(--carlix-transition);
}
.carlix-to-top[hidden] { display: none; }
.carlix-to-top.is-visible { opacity: 1; transform: translateY(0); }
.carlix-to-top:hover,
.carlix-to-top:focus-visible { background: var(--carlix-primary-hover); outline: 0; }
@media print { .carlix-to-top { display: none !important; } }

.carlix-search {
	min-width: 0;
}

.carlix-banner {
	padding-block: var(--carlix-banner-space-top) var(--carlix-banner-space-bottom);
	background: var(--carlix-banner-bg);
	color: var(--carlix-banner-text);
}

.carlix-top {
	padding-block: var(--carlix-top-space-top) var(--carlix-top-space-bottom);
	background: var(--carlix-top-bg);
	color: var(--carlix-top-text);
}

.carlix-bottom {
	padding-block: var(--carlix-bottom-space-top) var(--carlix-bottom-space-bottom);
	background: var(--carlix-bottom-bg);
	color: var(--carlix-bottom-text);
}

.carlix-top .carlix-row,
.carlix-bottom .carlix-row,
.carlix-footer .carlix-row {
	align-items: stretch;
}

.carlix-top .carlix-row > div,
.carlix-bottom .carlix-row > div,
.carlix-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--carlix-space-4);
}

.carlix-top .carlix-row > div {
	height: 100%;
}

.carlix-top .carlix-row > div > * {
	flex: 1 1 auto;
	min-height: 100%;
}

.carlix-main {
	padding-block: var(--carlix-main-space-top) var(--carlix-main-space-bottom);
	background: var(--carlix-main-bg);
	color: var(--carlix-main-text);
}

.carlix-main > .carlix-container > .carlix-row {
	align-items: start;
}

.carlix-content {
	min-width: 0;
}

.carlix-main-top {
	margin-block: 0 var(--carlix-space-6);
}

.carlix-main-bottom {
	margin-block: var(--carlix-space-6) 0;
}

.carlix-footer {
	padding-block: var(--carlix-footer-space-top) var(--carlix-footer-space-bottom);
	color: var(--carlix-footer-text);
	background: var(--carlix-footer-bg);
}

.carlix-credits {
	padding-block: var(--carlix-credits-space-top) var(--carlix-credits-space-bottom);
	color: var(--carlix-credits-text);
	background: var(--carlix-credits-bg);
	font-size: 0.875rem;
}

.carlix-topbar a { color: var(--carlix-topbar-link); }
.carlix-header a { color: var(--carlix-header-link); }
.carlix-banner a { color: var(--carlix-banner-link); }
.carlix-top a { color: var(--carlix-top-link); }
.carlix-main a { color: var(--carlix-main-link); }
.carlix-bottom a { color: var(--carlix-bottom-link); }
.carlix-footer a { color: var(--carlix-footer-link); }
.carlix-credits a { color: var(--carlix-credits-link); }

.carlix-skip-link {
	position: fixed !important;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--carlix-primary);
	color: #fff;
	text-decoration: none;
	border: 0;
	border-radius: var(--carlix-radius);
}

.carlix-skip-link:focus,
.carlix-skip-link:focus-visible {
	left: var(--carlix-space-4);
	top: var(--carlix-space-4);
	width: auto;
	height: auto;
	padding: var(--carlix-space-3) var(--carlix-space-4);
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

@media (max-width: 1023px) {
	.carlix-topbar {
		padding-block: var(--carlix-topbar-space-top-tablet) var(--carlix-topbar-space-bottom-tablet);
	}

	.carlix-header {
		padding-block: var(--carlix-header-space-top-tablet) var(--carlix-header-space-bottom-tablet);
		min-height: var(--carlix-header-height-tablet, var(--carlix-header-height-desktop, auto));
	}

	.carlix-banner {
		padding-block: var(--carlix-banner-space-top-tablet) var(--carlix-banner-space-bottom-tablet);
	}

	.carlix-top {
		padding-block: var(--carlix-top-space-top-tablet) var(--carlix-top-space-bottom-tablet);
	}

	.carlix-main {
		padding-block: var(--carlix-main-space-top-tablet) var(--carlix-main-space-bottom-tablet);
	}

	.carlix-bottom {
		padding-block: var(--carlix-bottom-space-top-tablet) var(--carlix-bottom-space-bottom-tablet);
	}

	.carlix-footer {
		padding-block: var(--carlix-footer-space-top-tablet) var(--carlix-footer-space-bottom-tablet);
	}

	.carlix-credits {
		padding-block: var(--carlix-credits-space-top-tablet) var(--carlix-credits-space-bottom-tablet);
	}

	.carlix-search {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.carlix-container {
		padding-inline: var(--carlix-space-3);
	}

	.carlix-header--floating {
		top: 0;
	}

	.carlix-header--floating > .carlix-container {
		border-inline: 0;
		border-radius: 0;
	}

	.carlix-topbar {
		padding-block: var(--carlix-topbar-space-top-mobile) var(--carlix-topbar-space-bottom-mobile);
	}

	.carlix-header {
		padding-block: var(--carlix-header-space-top-mobile) var(--carlix-header-space-bottom-mobile);
		min-height: var(--carlix-header-height-mobile, var(--carlix-header-height-tablet, auto));
	}

	.carlix-banner {
		padding-block: var(--carlix-banner-space-top-mobile) var(--carlix-banner-space-bottom-mobile);
	}

	.carlix-top {
		padding-block: var(--carlix-top-space-top-mobile) var(--carlix-top-space-bottom-mobile);
	}

	.carlix-main {
		padding-block: var(--carlix-main-space-top-mobile) var(--carlix-main-space-bottom-mobile);
	}

	.carlix-bottom {
		padding-block: var(--carlix-bottom-space-top-mobile) var(--carlix-bottom-space-bottom-mobile);
	}

	.carlix-footer {
		padding-block: var(--carlix-footer-space-top-mobile) var(--carlix-footer-space-bottom-mobile);
	}

	.carlix-credits {
		padding-block: var(--carlix-credits-space-top-mobile) var(--carlix-credits-space-bottom-mobile);
	}
}