/* ==========================================================================
   Kairós Livraria — components.css
   Header, hero, trust-bar, cards de categoria, seções, banner, footer.
   Escopo em .kairos-theme p/ não vazar pro admin/editor.
   ========================================================================== */

/* ==========================================================================
   1. HEADER — glassmorphism leve, semi-fixo
   Refina o header do Astra sem sobrescrever sua estrutura.
   ========================================================================== */
.kairos-theme .site-header,
.kairos-theme .ast-primary-header-bar {
	background: var(--k-glass) !important;
	-webkit-backdrop-filter: blur(var(--k-glass-blur));
	backdrop-filter: blur(var(--k-glass-blur));
	border-bottom: 1px solid var(--k-line);
	box-shadow: var(--k-shadow-sm);
	transition: box-shadow var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kairos-theme .site-header,
	.kairos-theme .ast-primary-header-bar { background: var(--k-glass-strong) !important; }
}
/* Estado "scrolled" (toggle por JS) — sombra um pouco mais presente */
.kairos-theme.is-scrolled .site-header,
.kairos-theme.is-scrolled .ast-primary-header-bar {
	box-shadow: var(--k-shadow-md);
}

/* Logo: limita altura p/ header enxuto */
.kairos-theme .site-logo-img img,
.kairos-theme .custom-logo { max-height: 44px; width: auto; }

/* Menu principal: tipografia e hover laranja */
.kairos-theme .main-header-menu .menu-link {
	font-weight: 500;
	letter-spacing: 0.01em;
}
.kairos-theme .main-header-menu .menu-link:hover { color: var(--k-orange-dark); }

/* Botão de destaque no header (classe .kairos-header-cta no menu item) */
.kairos-theme .menu-item.kairos-header-cta > a {
	background: var(--k-orange);
	color: #fff !important;
	border-radius: var(--k-radius-pill);
	padding: 0.5rem 1.1rem !important;
	margin-left: 0.5rem;
}
.kairos-theme .menu-item.kairos-header-cta > a:hover { background: var(--k-orange-dark); }

/* Ícone do carrinho — contador laranja */
.kairos-theme .ast-cart-menu-wrap .count,
.kairos-theme .ast-site-header-cart .count {
	background: var(--k-orange);
	border-color: var(--k-orange);
	color: #fff;
}

/* ==========================================================================
   2. SECTION HEADER — eyebrow + título + intro
   ========================================================================== */
.kairos-section-head {
	max-width: 640px;
	margin-bottom: var(--k-sp-4);
}
.kairos-section-head.is-center { margin-inline: auto; text-align: center; }
.kairos-section-head h2 {
	font-size: var(--k-fs-h2);
	margin: 0.4rem 0 0.6rem;
}
.kairos-section-head p { color: var(--k-ink-soft); margin: 0; }

/* ==========================================================================
   3. HERO
   ========================================================================== */
.kairos-hero__content { max-width: 36rem; }
.kairos-hero__title {
	font-size: var(--k-fs-display);
	margin: 0.6rem 0 1rem;
}
.kairos-hero__subtitle {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
	color: var(--k-ink-soft);
	margin: 0 0 1.75rem;
	max-width: 32rem;
}
.kairos-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Moldura de mídia do hero (imagem/vídeo/3D) sobre card de vidro */
.kairos-hero__media {
	position: relative;
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	box-shadow: var(--k-shadow-premium);
	aspect-ratio: 16 / 11;
	background: var(--k-white-soft);
}
.kairos-hero__media img,
.kairos-hero__media video,
.kairos-hero__media canvas {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Brilho laranja decorativo atrás do hero */
.kairos-hero::before {
	content: "";
	position: absolute;
	inset: auto -10% 10% auto;
	width: 38%;
	height: 60%;
	background: radial-gradient(circle, var(--k-orange-soft), transparent 70%);
	filter: blur(40px);
	z-index: -1;
	pointer-events: none;
}

/* ==========================================================================
   4. TRUST BAR — itens
   ========================================================================== */
.kairos-trust__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--k-fs-sm);
	font-weight: 500;
}
.kairos-trust__icon {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: var(--k-radius-pill);
	background: var(--k-orange-soft);
	color: var(--k-orange-dark);
}
.kairos-trust__item small { display: block; color: var(--k-ink-soft); font-weight: 400; }

/* ==========================================================================
   5. CATEGORIAS — grid de cards
   ========================================================================== */
.kairos-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--k-sp-2);
}
@media (min-width: 768px) { .kairos-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kairos-cat-grid { grid-template-columns: repeat(4, 1fr); } }

.kairos-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 160px;
	padding: var(--k-sp-2);
	border-radius: var(--k-radius);
	background: var(--k-white-soft);
	border: 1px solid var(--k-line);
	color: var(--k-ink);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.kairos-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--k-shadow-md);
	color: var(--k-ink);
}
.kairos-cat-card__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.6s var(--k-ease);
}
.kairos-cat-card:hover .kairos-cat-card__bg { transform: scale(1.05); }
/* Camada de vidro p/ legibilidade do título sobre a imagem */
.kairos-cat-card__label {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 0.45rem 0.9rem;
	border-radius: var(--k-radius-pill);
	background: var(--k-glass-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--k-glass-border);
	font-weight: 600;
	font-size: var(--k-fs-sm);
}

/* ==========================================================================
   6. BANNER INSTITUCIONAL
   ========================================================================== */
.kairos-banner {
	position: relative;
	padding: clamp(var(--k-sp-4), 5vw, var(--k-sp-5));
	border-radius: var(--k-radius-lg);
	background: linear-gradient(135deg, var(--k-orange-tint), #fff);
	border: 1px solid var(--k-line);
	overflow: hidden;
	text-align: center;
}
.kairos-banner h2 {
	font-size: var(--k-fs-h2);
	max-width: 22ch;
	margin: 0 auto 0.75rem;
}
.kairos-banner p { color: var(--k-ink-soft); max-width: 46ch; margin: 0 auto 1.5rem; }

/* ==========================================================================
   7. SOBRE — bloco institucional
   ========================================================================== */
.kairos-about {
	display: grid;
	gap: var(--k-sp-4);
	align-items: center;
}
@media (min-width: 1024px) { .kairos-about { grid-template-columns: 1fr 1fr; } }
.kairos-about__media {
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	box-shadow: var(--k-shadow-md);
	aspect-ratio: 4 / 3;
}
.kairos-about__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.kairos-theme .site-footer,
.kairos-theme .ast-small-footer {
	background: var(--k-white-soft);
	border-top: 1px solid var(--k-line);
}
.kairos-footer {
	display: grid;
	gap: var(--k-sp-4);
	grid-template-columns: 1fr;
	padding-block: var(--k-sp-5);
}
@media (min-width: 768px) { .kairos-footer { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.kairos-footer h4 {
	font-size: var(--k-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--k-ink-soft);
	margin-bottom: 0.75rem;
}
.kairos-footer ul { list-style: none; margin: 0; padding: 0; }
.kairos-footer li { margin-bottom: 0.4rem; }
.kairos-footer a { color: var(--k-ink); text-decoration: none; }
.kairos-footer a:hover { color: var(--k-orange-dark); }
.kairos-footer__brand p { color: var(--k-ink-soft); max-width: 30ch; }

/* Redes sociais */
.kairos-social { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.kairos-social a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: var(--k-radius-pill);
	border: 1px solid var(--k-line);
	color: var(--k-ink);
	transition: background-color var(--k-dur-fast) var(--k-ease), color var(--k-dur-fast) var(--k-ease);
}
.kairos-social a:hover { background: var(--k-orange); color: #fff; border-color: var(--k-orange); }