/**
 * Kunhar Medical — global theme foundation
 * Approved primary color: #e43c3e
 * Approved primary typeface: Roboto
 */

:root {
	--kunhar-container: 1600px;
	--kunhar-primary-fallback: #e43c3e;
	--kunhar-primary-dark: #c93436;
	--kunhar-text-fallback: #1d2d35;
	--kunhar-surface: #f4f7f8;
	--kunhar-border: #d8e1e5;
	--kunhar-radius: 6px;
	--kunhar-section: clamp(40px, 6vw, 88px);
	--kunhar-font-family: "Roboto", Arial, sans-serif;
}

html {
	box-sizing: border-box;
}

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

body.kunhar-site {
	--kunhar-primary: var(--e-global-color-primary, var(--kunhar-primary-fallback));
	--kunhar-text: var(--e-global-color-text, var(--kunhar-text-fallback));

	margin: 0;
	color: var(--kunhar-text);
	font-family: var(--kunhar-font-family);
	font-size: 16px;
	line-height: 1.65;
	background: #fff;
	overflow-wrap: anywhere;
}

body.kunhar-site button,
body.kunhar-site input,
body.kunhar-site select,
body.kunhar-site textarea {
	font: inherit;
}

.kunhar-site img,
.kunhar-site video {
	max-width: 100%;
	height: auto;
}

.kunhar-site iframe {
	max-width: 100%;
}

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

.kunhar-content {
	padding-block: var(--kunhar-section);
	min-height: 55vh;
}

.kunhar-full-width {
	min-height: 55vh;
}

.kunhar-site h1,
.kunhar-site h2,
.kunhar-site h3,
.kunhar-site h4,
.kunhar-site h5,
.kunhar-site h6 {
	font-family: var(--kunhar-font-family);
	line-height: 1.2;
}

.kunhar-site h1 {
	font-size: clamp(2rem, 4vw, 3.6rem);
}

.kunhar-site h2 {
	font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.kunhar-site a {
	color: var(--kunhar-primary);
	text-underline-offset: .2em;
}

.kunhar-site :focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.kunhar-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999999;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	margin: -1px;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kunhar-skip:focus {
	width: auto;
	height: auto;
	overflow: visible;
	padding: 10px 14px;
	margin: 0;
	clip: auto;
	clip-path: none;
	background: #fff;
	border: 2px solid var(--kunhar-primary-fallback);
	border-radius: 4px;
	color: #182230;
}

/* Fallback header only. Header Manager layouts use their own scoped CSS. */
.kunhar-header {
	border-bottom: 1px solid var(--kunhar-border);
	background: #fff;
}

.kunhar-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: 20px;
}

.kunhar-brand {
	margin-inline-end: auto;
	max-width: 260px;
	font-size: 1.3rem;
	font-weight: 700;
}

.kunhar-brand a {
	text-decoration: none;
}

.kunhar-brand img {
	display: block;
	max-width: 240px;
	max-height: 64px;
	width: auto;
	height: auto;
}

.kunhar-menu,
.kunhar-footer-menu {
	display: flex;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.kunhar-menu a {
	text-decoration: none;
}

.kunhar-menu li {
	position: relative;
}

.kunhar-menu .sub-menu {
	display: none;
	position: absolute;
	z-index: 100;
	inset-inline-end: 0;
	top: 100%;
	width: 230px;
	max-width: calc(100vw - 40px);
	padding: 16px;
	background: #fff;
	list-style: none;
	border: 1px solid var(--kunhar-border);
}

.kunhar-menu li:hover > .sub-menu,
.kunhar-menu li:focus-within > .sub-menu {
	display: block;
}

.kunhar-menu .sub-menu .sub-menu {
	position: static;
	width: auto;
	border: 0;
	padding: 8px;
}

.kunhar-menu-toggle {
	display: none;
	background: #fff;
	border: 1px solid var(--kunhar-border);
	padding: 10px 16px;
	font: inherit;
	color: inherit;
	border-radius: var(--kunhar-radius);
}

.kunhar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid currentColor;
	border-radius: var(--kunhar-radius);
	text-decoration: none;
	font-weight: 600;
}

.kunhar-button:hover {
	background: var(--kunhar-surface);
}

.kunhar-footer {
	background: var(--kunhar-surface);
	padding-block: 40px;
	border-top: 1px solid var(--kunhar-border);
}

.kunhar-footer-name {
	font-size: 1.25rem;
	font-weight: 700;
}

.kunhar-footer-menu {
	margin-block: 20px;
}

.kunhar-post + .kunhar-post {
	margin-top: 48px;
}

.kunhar-site input,
.kunhar-site textarea {
	max-width: 100%;
}

.kunhar-site pre {
	overflow: auto;
}

.kunhar-site .screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.kunhar-header.kunhar-collapsed .kunhar-menu-toggle {
	display: block;
}

.kunhar-header.kunhar-collapsed .kunhar-primary {
	display: none;
	width: 100%;
	order: 4;
}

.kunhar-header.kunhar-collapsed .kunhar-primary.kunhar-open {
	display: block;
}

.kunhar-header.kunhar-collapsed .kunhar-menu {
	display: block;
}

.kunhar-header.kunhar-collapsed .kunhar-menu li {
	padding-block: 6px;
}

.kunhar-header.kunhar-collapsed .kunhar-menu .sub-menu {
	display: block;
	position: static;
	width: auto;
	border: 0;
	padding: 8px 16px;
}

.kunhar-header.kunhar-collapsed .kunhar-header-cta {
	order: 3;
}

.kunhar-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	margin-block: 32px;
}

.kunhar-product-card {
	border: 1px solid var(--kunhar-border);
	padding: 24px;
	border-radius: var(--kunhar-radius);
}

.kunhar-category-list {
	padding-inline-start: 24px;
}

.kunhar-category-list > li {
	margin-block: 16px;
}

.kunhar-category-list p {
	margin-block: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.kunhar-site * {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important;
	}
}