/*
Theme Name:   Kominote Online
Theme URI:    https://kominote.online
Description:  Child theme Astra pou Kominote Online — platfòm fòmasyon an Kreyòl Ayisyen.
Author:       Kominote Online
Template:     astra
Version:      1.24.0
Text Domain:  kominote
*/

/* ---------------------------------------------------------
   0. Font lokal — Plus Jakarta Sans (font varyab, 200–800)
   Yon sèl fichye 27 KB sou pwòp sèvè a. Avan, telefòn nan te
   dwe konekte ak 2 sèvè Google anvan li montre premye mo a.
   Seri "latin" lan kouvri tout aksan Kreyòl yo (è, ò, à).
   --------------------------------------------------------- */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------
   1. Tokens — koulè ak espas sit la
   --------------------------------------------------------- */
:root {
	--km-blue:        #0056D2; /* ble prensipal, hero */
	--km-blue-dark:   #1D4ED8; /* bouton */
	--km-blue-deep:   #1E3A8A; /* tit sou fon klè */
	--km-blue-soft:   #EFF6FF; /* fon seksyon klè */
	--km-ink:         #0F172A; /* tèks prensipal */
	--km-muted:       #475569; /* tèks segondè */
	--km-line:        #E2E8F0; /* bòdi */
	--km-bg:          #F8FAFC; /* fon paj */
	--km-white:       #FFFFFF;

	--km-radius:      8px;
	--km-radius-lg:   16px;
	--km-radius-xl:   24px;
	--km-shadow:      0 1px 3px rgba(15, 23, 42, .08);
	--km-shadow-lg:   0 12px 32px rgba(15, 23, 42, .10);
	--km-max:         1200px;
}

/* ---------------------------------------------------------
   2. Baz
   --------------------------------------------------------- */
body {
	background-color: var(--km-bg);
	color: var(--km-ink);
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Plus Jakarta Sans", sans-serif;
	letter-spacing: -.02em;
	color: var(--km-ink);
}

h1 { font-weight: 800; line-height: 1.15; }
h2 { font-weight: 800; line-height: 1.2; }
h3 { font-weight: 700; }

::selection { background: var(--km-blue-dark); color: #fff; }

/* ---------------------------------------------------------
   3. Bouton
   --------------------------------------------------------- */
.km-btn,
.wp-block-button__link,
.ast-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.tutor-btn-primary {
	background-color: var(--km-blue-dark);
	color: var(--km-white);
	border: 0;
	border-radius: var(--km-radius);
	padding: 12px 24px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color .18s ease, transform .18s ease;
}

.km-btn:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.tutor-btn-primary:hover {
	background-color: #1740B8;
	color: var(--km-white);
	transform: translateY(-1px);
}

/* Bouton segondè — kontou sèlman */
.km-btn--ghost,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--km-blue-dark);
	box-shadow: inset 0 0 0 1.5px var(--km-blue-dark);
}
.km-btn--ghost:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--km-blue-dark);
	color: var(--km-white);
}

/* Bouton sou fon ble */
.km-on-blue .km-btn {
	background: var(--km-white);
	color: var(--km-blue);
}
.km-on-blue .km-btn:hover { background: #EAF1FF; color: var(--km-blue); }

/* ---------------------------------------------------------
   4. Seksyon ak konteni
   --------------------------------------------------------- */
.km-section { padding: 80px 0; }
.km-section--tight { padding: 56px 0; }
.km-section--blue {
	background: var(--km-blue);
	color: var(--km-white);
}
.km-section--blue h1,
.km-section--blue h2,
.km-section--blue h3 { color: var(--km-white); }
.km-section--soft { background: var(--km-blue-soft); }

.km-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--km-blue-dark);
	background: var(--km-blue-soft);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 16px;
}
.km-section--blue .km-eyebrow {
	color: var(--km-white);
	background: rgba(255, 255, 255, .16);
}

.km-lead {
	font-size: 18px;
	line-height: 1.7;
	color: var(--km-muted);
	max-width: 60ch;
}
.km-section--blue .km-lead { color: rgba(255, 255, 255, .88); }

/* ---------------------------------------------------------
   5. Kat (kou, pwodwi, avantaj)
   --------------------------------------------------------- */
.km-card {
	background: var(--km-white);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	padding: 28px;
	box-shadow: var(--km-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
	height: 100%;
}
.km-card:hover {
	box-shadow: var(--km-shadow-lg);
	transform: translateY(-3px);
}
.km-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--km-blue-soft);
	color: var(--km-blue-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

/* ---------------------------------------------------------
   6. WooCommerce ak Tutor LMS — jis sa ki nesesè
   --------------------------------------------------------- */
.woocommerce ul.products li.product,
.tutor-course-card {
	border-radius: var(--km-radius-lg);
	overflow: hidden;
}
.woocommerce ul.products li.product .price,
.tutor-course-price {
	color: var(--km-blue-dark);
	font-weight: 700;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--km-blue-dark);
	border-radius: var(--km-radius);
}
.woocommerce-store-notice,
.woocommerce .onsale {
	background-color: var(--km-blue-dark);
	border-radius: 999px;
}

/* ---------------------------------------------------------
   7. Responsive
   --------------------------------------------------------- */
@media (max-width: 782px) {
	.km-section { padding: 56px 0; }
	h1 { font-size: 34px; }
	h2 { font-size: 26px; }
	.km-lead { font-size: 16px; }
	.km-card { padding: 22px; }
}

/* ---------------------------------------------------------
   8. Header — logo badj + non sit la sou yon sèl liy
   --------------------------------------------------------- */

/* Logo a se yon badj wonn 1254x1254. San limit li kraze header la. */
.site-header .custom-logo-link img,
.ast-site-identity .custom-logo-link img,
.site-branding img {
	max-height: 52px !important;
	max-width: 52px !important;
	width: auto !important;
	height: auto !important;
}

/* Badj la + non an kanpe kòte a kòte, san koupe an de liy. */
.site-header .ast-site-identity,
.ast-site-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
}

.site-title {
	font-size: 20px !important;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	white-space: nowrap;
	margin: 0;
}

.site-title a,
.site-title a:hover,
.site-title a:visited {
	color: var(--km-ink);
	text-decoration: none;
}

.site-description {
	display: none;
}

/* Meni an: yon sèl liy, espas ki respire. */
.main-header-menu > .menu-item > a {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item > a:hover {
	color: var(--km-blue-dark);
}

/* Sou telefòn, badj la vin pi piti toujou. */
@media (max-width: 921px) {
	.site-header .custom-logo-link img,
	.ast-site-identity .custom-logo-link img,
	.site-branding img {
		max-height: 40px !important;
		max-width: 40px !important;
	}
	.site-title { font-size: 17px !important; }
}

/* ---------------------------------------------------------
   9. Hero plen ekran — imaj kòm fon, degrade ble sou bò gòch
   --------------------------------------------------------- */
:root {
	--km-sky: #38BDF8; /* ble klè pou mo ki make nan tit la */
}

.km-hero {
	min-height: 660px;
	padding: 0;
}

/* Degrade a: opak sou bò gòch pou tèks la li, klè sou bò dwat
   pou figi a rete vizib. */
.km-hero .wp-block-cover__background {
	background: linear-gradient(
		90deg,
		rgba(7, 26, 71, .94) 0%,
		rgba(7, 26, 71, .88) 32%,
		rgba(7, 26, 71, .45) 58%,
		rgba(7, 26, 71, .05) 100%
	) !important;
	opacity: 1 !important;
}

.km-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.km-hero-body {
	max-width: 620px;
}

.km-hero-title {
	font-size: clamp(34px, 5.2vw, 62px) !important;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: #fff;
	margin: 0 0 20px;
}

.km-accent {
	color: var(--km-sky);
}

.km-hero-lead {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
	max-width: 520px;
	margin: 0 0 32px;
}

/* Bouton pill nan hero a. */
.km-hero .wp-block-button__link {
	border-radius: 999px;
	padding: 16px 34px;
	font-size: 16px;
	font-weight: 700;
}

.km-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	color: var(--km-blue);
}

.km-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: #E8F0FF;
	color: var(--km-blue);
}

.km-hero .is-style-outline .wp-block-button__link {
	background: rgba(9, 30, 78, .55);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}

.km-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(9, 30, 78, .85);
	color: #fff;
}

@media (max-width: 921px) {
	.km-hero { min-height: 520px; }
	.km-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(7, 26, 71, .72) 0%,
			rgba(7, 26, 71, .92) 65%,
			rgba(7, 26, 71, .96) 100%
		) !important;
	}
	.km-hero-body { max-width: 100%; }
	.km-hero .wp-block-button__link { padding: 14px 26px; font-size: 15px; }
}

/* ---------------------------------------------------------
   10. Aksyon header yo — panye, Konekte, Kreye Kont
   --------------------------------------------------------- */

/* Pouse gwoup aksyon yo sou bò dwat nèt. */
.main-header-menu > .km-nav-cart {
	margin-left: auto;
}

.main-header-menu > .km-nav-item > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

/* --- Panye --- */
.km-nav-cart > a {
	position: relative;
	color: var(--km-ink);
	padding-inline: 10px;
}

.km-nav-cart > a:hover { color: var(--km-blue-dark); }

.km-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--km-blue-dark);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* --- Konekte --- */
.km-nav-login > a {
	color: var(--km-ink);
}

.km-nav-login > a:hover { color: var(--km-blue-dark); }

/* --- Kreye Kont --- */
.main-header-menu > .km-nav-cta > a {
	background: var(--km-blue-dark);
	color: #fff !important;
	border-radius: 999px;
	padding: 12px 26px;
	font-weight: 700;
	line-height: 1;
	transition: background-color .18s ease, transform .18s ease;
}

.main-header-menu > .km-nav-cta > a:hover {
	background: #1740B8;
	transform: translateY(-1px);
}

/* Sou telefòn, meni an vin vètikal — aksyon yo pa bezwen pouse. */
@media (max-width: 921px) {
	.main-header-menu > .km-nav-cart { margin-left: 0; }
	.main-header-menu > .km-nav-cta > a {
		display: inline-flex;
		margin: 10px 20px;
	}
}

/* ---------------------------------------------------------
   11. Retire banyè tit la sou paj yo
   Paj nou yo gen pwòp hero pa yo; banyè Astra a fè doublon.
   --------------------------------------------------------- */
.page .ast-single-entry-banner,
.page .ast-archive-description,
.page .entry-header,
.page .ast-page-title,
.page .entry-title {
	display: none !important;
}

/* Kontni an kòmanse nan tèt paj la, san espas vid anlè. */
.page .site-content .ast-container,
.page .entry-content > .alignfull:first-child {
	padding-top: 0;
}

.page .site-main > article > .entry-content {
	margin-top: 0;
}

/* ---------------------------------------------------------
   12. Ti eleman: badj estatistik, nòt anba kat, paj legal
   --------------------------------------------------------- */
.km-badges {
	margin-top: 32px;
	gap: 24px;
}

.km-badge-num {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--km-blue-dark);
	letter-spacing: -.02em;
	margin: 0 0 4px;
}

.km-badge-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--km-muted);
	margin: 0;
}

.km-card-note {
	font-size: 14px;
	color: var(--km-muted);
	margin-top: 4px;
}

/* Paj legal: tèks ki fasil pou li, tit ki byen separe. */
.km-section h2 + p,
.km-section h3 + p {
	margin-top: 8px;
}

.km-section h2 {
	margin-top: 44px;
}

.km-section h2:first-of-type {
	margin-top: 0;
}

.km-section h3 {
	margin-top: 28px;
}

.km-section ul.wp-block-list li {
	margin-bottom: 8px;
	line-height: 1.7;
}

/* ---------------------------------------------------------
   13. Footer Kominote
   --------------------------------------------------------- */

/* Kache footer Astra a — nou gen pwòp pa nou. */
.site-footer {
	display: none !important;
}

.km-footer {
	background: #071A47;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.75;
}

.km-footer a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color .15s ease;
}

.km-footer a:hover {
	color: #fff;
}

.km-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 72px 24px 48px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
}

/* --- Kolòn mak la --- */
.km-footer-logo {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #fff;
	padding: 4px;
	display: block;
	margin-bottom: 14px;
}

.km-footer-name {
	color: #fff;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 12px;
}

.km-footer-about {
	max-width: 42ch;
	margin: 0 0 24px;
}

.km-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-footer-contact li {
	margin-bottom: 8px;
}

.km-footer-address {
	color: rgba(255, 255, 255, .6);
	font-size: 14px;
	line-height: 1.6;
	margin-top: 14px;
}

/* --- Kolòn lyen yo --- */
.km-footer-col__title {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 6px 0 18px;
}

.km-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-footer-list li {
	margin-bottom: 11px;
}

/* --- Ba anba a --- */
.km-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.km-footer__bar-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
}

.km-footer-copy {
	margin: 0;
	color: rgba(255, 255, 255, .6);
}

.km-footer-legal {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.km-footer-legal li + li::before {
	content: "•";
	margin-right: 10px;
	color: rgba(255, 255, 255, .3);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.km-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		padding-top: 56px;
	}
}

@media (max-width: 600px) {
	.km-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 20px 32px;
	}
	.km-footer__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
}

/* ---------------------------------------------------------
   14. Sètifika
   --------------------------------------------------------- */
.km-cert-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-cert-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	padding: 20px 24px;
	margin-bottom: 12px;
}

.km-cert-row.is-done {
	border-color: #BFDBFE;
	background: #F8FBFF;
}

.km-cert-row__title {
	font-weight: 700;
	font-size: 17px;
}

.km-cert-row__pct {
	font-size: 14px;
	font-weight: 600;
	color: var(--km-muted);
}

/* --- Sètifika a menm --- */
.km-cert {
	background: #fff;
	padding: 14px;
	border-radius: var(--km-radius-lg);
	box-shadow: var(--km-shadow-lg);
	max-width: 900px;
	margin-inline: auto;
}

.km-cert__frame {
	border: 2px solid var(--km-blue);
	border-radius: 10px;
	padding: 56px 48px;
	text-align: center;
	position: relative;
}

.km-cert__frame::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid #BFDBFE;
	border-radius: 6px;
	pointer-events: none;
}

.km-cert__logo {
	width: 84px;
	height: 84px;
	margin: 0 auto 18px;
	display: block;
}

.km-cert__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--km-blue-dark);
	margin: 0 0 28px;
}

.km-cert__intro {
	font-size: 15px;
	color: var(--km-muted);
	margin: 0;
}

.km-cert__name {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--km-ink);
	margin: 10px 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--km-line);
	display: inline-block;
	min-width: 60%;
}

.km-cert__course {
	font-size: clamp(19px, 2.2vw, 25px);
	font-weight: 700;
	color: var(--km-blue-deep);
	margin: 10px 0 36px;
}

.km-cert__meta {
	display: flex;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.km-cert__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--km-muted);
	margin-bottom: 4px;
}

.km-cert__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--km-ink);
}

.km-cert__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: .04em;
}

.km-cert__verify {
	font-size: 12px;
	color: var(--km-muted);
	margin: 0;
}

.km-cert__qr {
	display: block;
	width: 104px;
	height: 104px;
	margin: 0 auto 10px;
}

.km-cert__actions {
	text-align: center;
	margin-top: 28px;
}

/* --- Verifikasyon --- */
.km-verify-form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.km-verify-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
}

.km-verify-form input {
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 12px 16px;
	font-size: 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	min-width: 280px;
}

.km-verify--ok { border-left: 4px solid #16A34A; }
.km-verify--bad { border-left: 4px solid #DC2626; }

/* --- Enprime --- */
@media print {
	.km-footer,
	.site-header,
	.no-print,
	#wpadminbar { display: none !important; }

	.km-cert {
		box-shadow: none;
		max-width: 100%;
		padding: 0;
	}

	.km-cert__frame { padding: 40px; }

	@page { size: landscape; margin: 12mm; }
}

/* ---------------------------------------------------------
   15. Retire espas blan anwo kontni paj yo
   Chak paj nou kòmanse ak yon hero plen lajè. Kontenè Astra a
   kenbe padding li anwo, sa ki kite yon bann blan ant header
   la ak hero a.
   --------------------------------------------------------- */
.page .site-content > .ast-container,
.page .site-content .ast-container,
.page #primary,
.page .site-main,
.page .ast-article-single,
.page .ast-article-post,
.page .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Hero a dwe touche header la nèt. */
.page .entry-content > .alignfull:first-child,
.page .entry-content > .km-section:first-child,
.page .entry-content > .wp-block-cover:first-child {
	margin-top: 0 !important;
}

/* Kontenè "boxed" Astra a ta mete bòdi ak lonbraj otou hero a. */
.page.ast-separate-container .ast-article-single {
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.page.ast-separate-container #primary {
	padding: 0 !important;
	margin: 0 !important;
}

/* Ranje vid nan header la (Above / Below Header) pa dwe pran plas. */
.ast-above-header-wrap:empty,
.ast-below-header-wrap:empty,
.site-above-header-wrap:empty,
.site-below-header-wrap:empty {
	display: none !important;
}

/* Espas anba kontni an rete — se sèlman anwo nou vle sere. */
.page .site-content {
	padding-top: 0 !important;
}

/* ---------------------------------------------------------
   16. Koreksyon verifye an dirèk sou sit la
   - Meni an te kase an 2 liy → header la te 120px
   - Astra te bat koulè tèks hero a
   --------------------------------------------------------- */

/* --- Header sou yon sèl liy — SÈLMAN sou ekran òdinatè.
   Sou mobil meni an se yon lis vètikal nan yon panèl; si nou fòse
   nowrap la, li vin yon ranje orizontal ki depase ekran an. --- */
@media (min-width: 922px) {
	.main-header-menu {
		flex-wrap: nowrap !important;
		align-items: center;
	}

	.main-header-menu > .menu-item > a {
		padding-left: 13px !important;
		padding-right: 13px !important;
		white-space: nowrap;
	}

	.main-header-menu > .km-nav-item > a {
		white-space: nowrap;
	}

	.km-nav-cart > a {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.main-header-menu > .km-nav-cta > a {
		padding: 11px 22px;
		font-size: 14.5px;
	}
}

/* Tit sit la kache vizyèlman: logo a deja gen mo "Kominote Online"
   ladan l, kidonk tèks la t ap repete menm bagay la epi pran ~170px.
   Nou pa sèvi ak display:none — lektè ekran ak motè rechèch dwe
   toujou wè non sit la. */
.site-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Logo a kanpe pou kont li — yon ti souf sou bò dwat li. */
.site-header .ast-site-identity,
.ast-site-identity {
	gap: 0;
}

/* --- Koulè tèks hero a --- */
/* Astra mete #334155 sou paragraf yo ak plis espesifisite pase nou. */
.km-hero .km-hero-title,
.km-hero h1.km-hero-title {
	color: #fff !important;
}

.km-hero .km-hero-title .km-accent {
	color: var(--km-sky) !important;
}

.km-hero .km-hero-lead,
.km-hero p.km-hero-lead {
	color: rgba(255, 255, 255, .92) !important;
}

.km-hero .wp-block-cover__inner-container,
.km-hero .wp-block-cover__inner-container p {
	color: #fff;
}

/* --- Bouton hero yo --- */
.km-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: #fff !important;
	background-image: none !important;
	color: var(--km-blue) !important;
}

.km-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: rgba(9, 30, 78, .55) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6) !important;
}

.km-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(9, 30, 78, .85) !important;
}

/* ---------------------------------------------------------
   17. Boutik Dijital
   --------------------------------------------------------- */

/* --- Hero paj boutik la --- */
.km-shop-hero {
	margin-bottom: 48px;
}

.km-shop-hero__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.km-shop-hero__title {
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff !important;
	margin: 0 0 16px;
}

.km-shop-hero .km-lead {
	color: rgba(255, 255, 255, .9) !important;
}

.km-shop-hero__points {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.km-shop-hero__points li {
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.km-shop-hero__points li::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	flex: 0 0 18px;
}

/* --- Kat pwodwi --- */
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	padding: 16px;
	box-shadow: var(--km-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--km-shadow-lg);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
	border-radius: 10px;
	margin-bottom: 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.35;
	padding-top: 0 !important;
}

.km-file-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--km-blue-dark);
	background: var(--km-blue-soft);
	border-radius: 999px;
	padding: 4px 10px;
	margin-bottom: 8px;
}

.woocommerce ul.products li.product .price {
	font-size: 19px !important;
	color: var(--km-blue-dark) !important;
	font-weight: 800;
}

.woocommerce ul.products li.product .button {
	width: 100%;
	justify-content: center;
	margin-top: 10px;
}

/* --- Lyen retounen --- */
.km-back-link {
	margin-bottom: 20px;
	font-weight: 600;
}

.km-back-link a {
	color: var(--km-blue-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.km-back-link a:hover {
	text-decoration: underline;
}

/* --- Avi kòmand annatant --- */
.km-pending {
	border-left: 4px solid #F59E0B;
	margin-bottom: 28px;
}

.km-pending h3 {
	margin-top: 0;
}

/* --- Chèk-out ak panye --- */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 12px 14px;
	font-size: 15px;
}

.woocommerce-checkout #payment {
	background: #F8FAFC;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--km-line);
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	font-size: 14px;
	line-height: 1.7;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 15px 24px;
	border-radius: 999px;
}

/* --- Enstriksyon peman sou paj mèsi a --- */
.km-payment-instructions {
	background: #fff;
	border: 1px solid var(--km-line);
	border-left: 4px solid var(--km-blue-dark);
	border-radius: var(--km-radius-lg);
	padding: 24px 28px;
	margin-bottom: 28px;
}

.km-payment-instructions h2 {
	font-size: 19px;
	margin: 0 0 12px;
}

.km-payment-note {
	font-size: 14px;
	color: var(--km-muted);
	margin-bottom: 0;
}

/* --- Tablodbò kont lan --- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin-bottom: 4px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--km-radius);
	font-weight: 600;
	color: var(--km-ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--km-blue-soft);
	color: var(--km-blue-dark);
}

@media (max-width: 782px) {
	.km-shop-hero__points { gap: 14px; }
	.woocommerce ul.products li.product { padding: 12px; }
}

/* ---------------------------------------------------------
   18. Akòdeyon Kesyon Moun Poze Souvan
   --------------------------------------------------------- */
.km-faq {
	background: #fff;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	padding: 0;
	margin-bottom: 10px;
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.km-faq[open] {
	box-shadow: var(--km-shadow);
	border-color: #BFDBFE;
}

.km-faq > summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 56px 20px 24px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--km-ink);
	position: relative;
	user-select: none;
}

.km-faq > summary::-webkit-details-marker { display: none; }

.km-faq > summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--km-blue-dark);
	border-bottom: 2px solid var(--km-blue-dark);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.km-faq[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -3px;
}

.km-faq > summary:hover { color: var(--km-blue-dark); }

.km-faq > p {
	padding: 0 24px 22px;
	margin: 0;
	color: var(--km-muted);
	line-height: 1.75;
}

.km-faq a { color: var(--km-blue-dark); }

/* Paj swiv kòmand la */
.woocommerce form.track_order .form-row {
	margin-bottom: 16px;
}

.woocommerce form.track_order button {
	border-radius: 999px;
	padding: 14px 30px;
}

/* ---------------------------------------------------------
   19. Meni mobil la
   Astra sèvi ak menm klas `.main-header-menu` nan panèl mobil la.
   Isit la li dwe rete yon lis vètikal ki respire.
   --------------------------------------------------------- */
@media (max-width: 921px) {

	.main-header-menu,
	.ast-mobile-header-content .main-header-menu {
		flex-wrap: wrap !important;
		flex-direction: column;
		align-items: stretch;
	}

	.main-header-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--km-line);
	}

	.main-header-menu > li > a {
		display: flex;
		align-items: center;
		padding: 15px 20px !important;
		font-size: 16px;
		font-weight: 600;
		white-space: normal;
	}

	/* Panye a: ikòn ak yon etikèt, paske yon ikòn pou kont li
	   pa di anyen nan yon lis vètikal. */
	.main-header-menu > .km-nav-cart > a::after {
		content: "Panye";
		font-weight: 600;
	}

	.km-nav-cart > a {
		gap: 10px;
		position: relative;
	}

	.km-cart-count {
		position: static;
		margin-left: 4px;
	}

	/* Bouton Kreye Kont: yon vrè bouton, pa yon liy nan lis la. */
	.main-header-menu > .km-nav-cta {
		border-bottom: 0;
		padding: 16px 20px;
	}

	.main-header-menu > .km-nav-cta > a {
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 14px 24px;
		border-radius: 999px;
		font-size: 16px;
	}

	.main-header-menu > .km-nav-login > a {
		color: var(--km-blue-dark);
	}
}

/* ---------------------------------------------------------
   20. Prèv peman (resi + nimewo referans)
   --------------------------------------------------------- */
.km-receipt {
	border-left: 4px solid var(--km-blue-dark);
	margin-bottom: 28px;
}

.km-receipt h3 {
	margin-top: 0;
}

.km-receipt__done {
	background: #ECFDF5;
	border: 1px solid #A7F3D0;
	border-radius: var(--km-radius);
	padding: 12px 16px;
	margin-bottom: 8px;
}

.km-receipt__form {
	margin-top: 18px;
}

.km-receipt__row {
	margin-bottom: 18px;
}

.km-receipt__row label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}

.km-receipt__row input[type="text"] {
	width: 100%;
	max-width: 380px;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 12px 14px;
	font-size: 15px;
}

.km-receipt__row input[type="file"] {
	display: block;
	width: 100%;
	max-width: 380px;
	border: 1px dashed var(--km-line);
	border-radius: var(--km-radius);
	padding: 14px;
	background: #F8FAFC;
	font-size: 14px;
	margin-bottom: 6px;
}

.km-receipt__row .km-card-note {
	display: block;
	margin-top: 2px;
}

/* Chan referans nan chèk-out */
.km-reference-field label {
	font-weight: 700;
}

@media (max-width: 600px) {
	.km-receipt__row input[type="text"],
	.km-receipt__row input[type="file"] { max-width: 100%; }
}

/* ---------------------------------------------------------
   21. Koneksyon ak Google
   --------------------------------------------------------- */
.km-social {
	margin-top: 22px;
}

.km-social__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--km-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.km-social__or::before,
.km-social__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--km-line);
}

.km-social .nsl-container {
	margin: 0 !important;
}

.km-social .nsl-button {
	border-radius: 999px !important;
	box-shadow: none !important;
	border: 1px solid var(--km-line) !important;
	min-height: 48px;
}

.km-checkout-social {
	background: #fff;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-lg);
	padding: 22px 24px;
	margin-bottom: 28px;
}

.km-checkout-social .km-social {
	margin-top: 0;
}

.km-social__intro {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--km-ink);
}

/* ---------------------------------------------------------
   22. Tablodbò elèv Tutor LMS
   --------------------------------------------------------- */
.tutor-dashboard-sidebar-logo img,
.tutor-dashboard .custom-logo,
.tutor-brand-logo img {
	max-height: 48px !important;
	width: auto !important;
}

.tutor-dashboard-sidebar-nav a.active,
.tutor-dashboard-sidebar-nav a:hover {
	color: var(--km-blue-dark) !important;
	background: var(--km-blue-soft) !important;
	border-radius: var(--km-radius);
}

.tutor-dashboard-sidebar-nav li a {
	font-weight: 600;
}