/* ==========================================================================
   Kenbrick homepage 2026 — styles for the kb-h-* Elementor containers.
   Loaded only on the front page by mu-plugins/kb-shop-ui.php
   ========================================================================== */

:root {
	/* brand terracotta from the Ceramic Studio kit (legacy var names kept) */
	--kbh-blue: #AF4B2F;
	--kbh-blue-dark: #963F27;
	--kbh-ink: #16181d;
	--kbh-muted: #5f6672;
	--kbh-line: #e7eaf0;
	--kbh-soft: #f6f2f0;
	--kbh-dark: #121212;
}

/* ---- shared section rhythm ---- */
.kb-h-hero, .kb-h-cats, .kb-h-products, .kb-h-why, .kb-h-works, .kb-h-comm, .kb-h-final {
	padding-top: 44px;
	padding-bottom: 44px;
}
@media (max-width: 767px) {
	/* Elementor containers ship with no mobile side padding — keep text off the edges */
	.kb-h-hero, .kb-h-cats, .kb-h-products, .kb-h-why, .kb-h-works, .kb-h-comm, .kb-h-final {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}
@media (min-width: 768px) {
	.kb-h-hero, .kb-h-cats, .kb-h-products, .kb-h-why, .kb-h-works, .kb-h-comm, .kb-h-final {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}
.kb-h-cats .elementor-widget-heading h2,
.kb-h-products .elementor-widget-heading h2,
.kb-h-why .elementor-widget-heading h2,
.kb-h-works .elementor-widget-heading h2 {
	font-size: clamp(26px, 5vw, 38px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--kbh-ink);
	text-align: center;
	margin: 0 0 26px;
}

/* ---- buttons ---- */
.kb-h-btn-primary .elementor-button,
.kb-h-btn-ghost .elementor-button,
.kb-h-btn-light .elementor-button,
.kb-h-btn-wa .elementor-button {
	border-radius: 999px;
	padding: 15px 30px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .01em;
	transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
}
.kb-h-btn-primary .elementor-button {
	background: var(--kbh-blue) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(175, 75, 47, .32);
}
.kb-h-btn-primary .elementor-button:hover { background: var(--kbh-blue-dark) !important; transform: translateY(-1px); }
.kb-h-btn-ghost .elementor-button {
	background: #fff !important;
	color: var(--kbh-ink) !important;
	border: 2px solid var(--kbh-line) !important;
}
.kb-h-btn-ghost .elementor-button:hover { border-color: var(--kbh-blue) !important; color: var(--kbh-blue) !important; }
.kb-h-btn-light .elementor-button { background: #fff !important; color: var(--kbh-dark) !important; }
.kb-h-btn-light .elementor-button:hover { transform: translateY(-1px); }
.kb-h-btn-wa .elementor-button { background: #1faf57 !important; color: #fff !important; box-shadow: 0 6px 18px rgba(31, 175, 87, .3); }
.kb-h-btn-wa .elementor-button:hover { background: #178f47 !important; }
.kb-h-center { text-align: center; }
.kb-h-center .elementor-button-wrapper { text-align: center; }

/* ---- 1. hero ---- */
.kb-h-hero > .e-con-inner {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}
@media (min-width: 992px) {
	.kb-h-hero > .e-con-inner { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
.kb-h-hero-text .elementor-widget-heading h1 {
	font-size: clamp(34px, 7vw, 54px);
	line-height: 1.08;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--kbh-ink);
	margin: 0 0 18px;
}
.kb-h-hero-text .elementor-widget-text-editor p {
	font-size: clamp(16px, 2.2vw, 18px);
	line-height: 1.65;
	color: var(--kbh-muted);
	max-width: 56ch;
}
.kb-h-hero-ctas > .e-con-inner,
.kb-h-hero-ctas:not(:has(> .e-con-inner)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 12px;
}
.kb-h-hero-ctas { margin: 22px 0 6px; padding: 0 !important; }
p.kb-h-trust {
	font-size: 13px !important;
	color: var(--kbh-muted) !important;
	border-left: 3px solid var(--kbh-blue);
	padding-left: 12px;
	margin-top: 18px !important;
}
.kb-h-hero-img img {
	width: 100%;
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(18, 24, 40, .18);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ---- 2. category tiles ---- */
.kb-h-cats-grid > .e-con-inner,
.kb-h-cats-grid:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 992px) {
	.kb-h-cats-grid > .e-con-inner,
	.kb-h-cats-grid:not(:has(> .e-con-inner)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.kb-h-cat-tile {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	padding: 0 !important;
}
.kb-h-cat-tile .elementor-widget-image,
.kb-h-cat-tile .elementor-widget-image .elementor-widget-container { margin: 0; }
.kb-h-cat-tile img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.kb-h-cat-tile:hover img { transform: scale(1.06); }
.kb-h-cat-tile .elementor-widget-heading {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 38px 14px 14px;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.74));
	pointer-events: none;
}
.kb-h-cat-tile .elementor-widget-heading h3,
.kb-h-cat-tile .elementor-widget-heading a {
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .01em;
	margin: 0;
}

/* ---- 3. products (cards come from kb-shop.css) ---- */
.kb-h-products .elementor-widget-button { margin-top: 10px; }

/* ---- 4. why cards ---- */
.kb-h-why-grid > .e-con-inner,
.kb-h-why-grid:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 992px) {
	.kb-h-why-grid > .e-con-inner,
	.kb-h-why-grid:not(:has(> .e-con-inner)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.kb-h-why-card {
	background: var(--kbh-soft);
	border: 1px solid var(--kbh-line);
	border-radius: 18px;
	padding: 20px 18px !important;
}
.kb-h-why-card .elementor-widget-heading h3 {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--kbh-ink);
	margin: 0 0 8px;
}
.kb-h-why-card .elementor-widget-heading h3::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 9px;
	border-radius: 8px;
	background: var(--kbh-blue);
	color: #fff;
	font-size: 13px;
}
.kb-h-why-card .elementor-widget-text-editor p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--kbh-muted);
	margin: 0;
}

/* ---- 5. works carousel ---- */
.kb-h-works-carousel .swiper-slide img {
	border-radius: 16px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}
.kb-h-works-carousel .elementor-swiper-button {
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	width: 42px;
	height: 42px;
	box-shadow: 0 4px 14px rgba(18, 24, 40, .18);
	color: var(--kbh-ink);
	font-size: 16px;
}
.kb-h-works .elementor-widget-button { margin-top: 18px; }

/* ---- 6. commercial band ---- */
.kb-h-comm {
	background: var(--kbh-dark);
	border-radius: 28px;
	margin-top: 18px;
	margin-bottom: 18px;
}
.kb-h-comm .elementor-widget-heading h2 {
	color: #fff;
	font-size: clamp(24px, 4.5vw, 34px);
	font-weight: 800;
	text-align: center;
	margin: 0 0 12px;
}
.kb-h-comm .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, .75);
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 22px;
}

/* ---- 7. final cta ---- */
.kb-h-final .elementor-widget-heading h2 {
	font-size: clamp(26px, 5vw, 38px);
	font-weight: 800;
	text-align: center;
	color: var(--kbh-ink);
	margin: 0 0 10px;
}
.kb-h-final .elementor-widget-text-editor p {
	text-align: center;
	color: var(--kbh-muted);
	margin: 0 auto 22px;
}
.kb-h-final-ctas > .e-con-inner,
.kb-h-final-ctas:not(:has(> .e-con-inner)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}