/**
 * Kabook Mind Main Stylesheet
 *
 * @package Kabook_Mind
 * @since 1.0.0
 */

/* =========================================
   Base Variables (Color and Typography)
========================================= */
:root {
	--km-primary: #2c3e50;      /* Dark blue for main text */
	--km-secondary: #009688;    /* Soft teal for buttons and links */
	--km-background: #fcfcfc;   /* Site background color */
	--km-surface: #ffffff;      /* Surface color for elements like headers */
	--km-border: #eaeaea;
	--km-text-light: #777777;
    --km-font-family: Vazirmatn, IRANSans, IRANSansWeb, Shabnam, Tahoma, Arial, sans-serif;}

/* =========================================
   Reset Defaults
========================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--km-font-family);
	background-color: var(--km-background);
	color: var(--km-primary);
	line-height: 1.6;
}

a {
	color: var(--km-secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--km-primary);
}

/* =========================================
   Header Structure
========================================= */
.site-header {
	background-color: var(--km-surface);
	border-block-end: 1px solid var(--km-border);
	padding-block: 1rem;
	padding-inline: 5%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Optional custom header image (Appearance > Customize > Header Image). */
.site-header-image {
	line-height: 0;
	margin-block-end: 1rem;
}

.site-header-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
}

/* =========================================
   Navigation
========================================= */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
}

.main-navigation a {
	color: var(--km-primary);
	font-weight: 500;
}

.main-navigation a:hover {
	color: var(--km-secondary);
}

/* Mobile Toggle (Hidden on Desktop) */
.menu-toggle {
	display: none;
}

/* =========================================
   Responsive: Mobile Menu (Off-canvas)
========================================= */
@media screen and (max-width: 768px) {
	/* Hamburger Button Position */
	.menu-toggle {
		display: flex !important;
		align-items: center;
		background: transparent;
		border: none;
		color: var(--km-primary);
		font-size: 1.2rem;
		cursor: pointer;
		padding: 0.5rem;
		position: relative;
		z-index: 10001; /* Above the open menu */
	}

	/* Hamburger Icon */
	.menu-toggle::before {
		content: "\2630";
		font-size: 2rem;
		line-height: 1;
	}

	/* Close Icon */
	.main-navigation.toggled .menu-toggle::before {
		content: "\2715";
		font-size: 1.8rem;
	}

	/* Prevent Off-canvas on main container */
	.main-navigation {
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	/* Apply Off-canvas specifically to the list */
	.main-navigation > ul {
		position: fixed;
		top: 0;
		inset-inline-start: -320px; /* Hidden state */
		width: 300px;
		height: 100vh;
		background-color: var(--km-surface, #ffffff);
		box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
		visibility: hidden;
		transition: inset-inline-start 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
		z-index: 9999;
		padding-block-start: 5rem;
		padding-inline: 2rem;
		overflow-y: auto;
		display: flex !important;
		flex-direction: column;
		margin: 0;
		gap: 0;
	}

	/* Menu Entry State */
	.main-navigation.toggled > ul {
		inset-inline-start: 0;
		visibility: visible;
		transition: inset-inline-start 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
	}

	.main-navigation > ul > li {
		border-block-end: 1px solid var(--km-border, #eeeeee);
	}

	.main-navigation > ul > li > a {
		display: block;
		padding: 1.2rem 0;
		font-size: 1.1rem;
	}

	/* Menu items with children need room for the toggle button beside the link. */
	.main-navigation .menu-item-has-children,
	.main-navigation .page_item_has_children {
		position: relative;
	}

	.main-navigation .has-sub-menu-toggle > a {
		padding-inline-end: 2.5rem;
	}

	/* Sub-menu Toggle Button (Mobile) */
	.main-navigation .sub-menu-toggle {
		position: absolute;
		inset-inline-end: 0;
		top: 0;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
	}

	.main-navigation .sub-menu-toggle-icon {
		display: block;
		width: 10px;
		height: 10px;
		border-inline-end: 2px solid var(--km-primary);
		border-block-end: 2px solid var(--km-primary);
		transform: rotate(45deg);
		transition: transform 0.3s ease;
	}

	.main-navigation .sub-menu-toggled-on > .sub-menu-toggle .sub-menu-toggle-icon {
		transform: rotate(-135deg);
	}

	/* Nested sub-menus are collapsed by default and expand inline (accordion). */
	.main-navigation ul.sub-menu,
	.main-navigation ul.children {
		display: none;
		width: 100%;
		list-style: none;
		margin: 0;
		padding-inline-start: 1rem;
	}

	.main-navigation .sub-menu-toggled-on > ul.sub-menu,
	.main-navigation .sub-menu-toggled-on > ul.children {
		display: block;
	}

	.main-navigation ul.sub-menu li {
		border-block-end: 1px solid var(--km-border, #eeeeee);
	}

	.main-navigation ul.sub-menu a {
		display: block;
		padding: 1rem 0;
		font-size: 1rem;
		font-weight: 400;
	}
}

/* =========================================
   Dropdown Menus (Desktop)
========================================= */
@media screen and (min-width: 769px) {
	.main-navigation ul li {
		position: relative;
	}

	/* The tap-to-open toggle button is a mobile-only affordance (desktop
	   sub-menus open on hover/focus). The button is injected by JS for every
	   screen size, so it must be explicitly hidden here or it renders with
	   unstyled, non-positioned browser defaults and overlaps the menu label. */
	.main-navigation .sub-menu-toggle {
		display: none;
	}

	/* Initial Sub-menu Styling */
	.main-navigation ul ul.sub-menu,
	.main-navigation ul ul.children {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: 99999;
		width: max-content !important;
		min-width: 220px;
		background-color: var(--km-surface);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
		border-radius: 8px;
		padding: 0.5rem 0;
		border: 1px solid var(--km-border);
		opacity: 0;
		visibility: hidden;
		transform: translateY(15px);
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	/* Hover & Focus States */
	.main-navigation ul li:hover > ul.sub-menu,
	.main-navigation ul li:hover > ul.children,
	.main-navigation ul li:focus-within > ul.sub-menu,
	.main-navigation ul li:focus-within > ul.children {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation ul ul li {
		border: none;
		display: block;
	}

	.main-navigation ul ul a {
		padding: 0.8rem 1.5rem;
		font-size: 0.95rem;
		display: block;
		width: 100%;
		font-weight: 400;
		transition: all 0.3s ease;
		white-space: normal;
		line-height: 1.6;
	}

	.main-navigation ul ul a:hover {
		background-color: rgba(0, 0, 0, 0.02);
		color: var(--km-secondary);
		padding-inline-start: 1.8rem;
	}

	/* Support for nested sub-menus (Level 3+) */
	.main-navigation ul ul ul.sub-menu {
		top: 0;
		inset-inline-start: 100%;
	}
}

/* =========================================
   Main Structure and Container
========================================= */
.km-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 5%;
	padding-block: 3rem;
}

/* =========================================
   Post Grid Layout
========================================= */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

/* =========================================
   Article Card
========================================= */
.kabook-card {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.kabook-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.post-thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.kabook-card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.entry-title {
	font-size: 1.25rem;
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}

.entry-summary {
	color: var(--km-text-light);
	font-size: 0.95rem;
	margin-block-end: 1.5rem;
	flex-grow: 1;
}

.read-more-btn {
	display: inline-block;
	background-color: var(--km-secondary);
	color: #ffffff !important;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.9rem;
	text-align: center;
	align-self: flex-start;
}

.read-more-btn:hover {
	background-color: var(--km-primary);
}

/* =========================================
   Posts Pagination (Older/Newer posts)
========================================= */
.posts-navigation,
.pagination {
	margin-block-start: 1rem;
}

.posts-navigation .nav-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--km-border, #eaeaea);
}

.posts-navigation .nav-previous,
.posts-navigation .nav-next {
	flex: 0 1 auto;
}

.posts-navigation .nav-next {
	margin-inline-start: auto;
}

.posts-navigation .nav-links a {
	display: inline-block;
	background-color: var(--km-secondary);
	color: #ffffff !important;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background-color 0.3s ease;
}

.posts-navigation .nav-links a:hover {
	background-color: var(--km-primary);
}

/* =========================================
   Single Post
========================================= */
.km-container-single {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 5%;
	padding-block: 3rem;
}

/* The My Account dashboard (nav + table) needs noticeably more room than a
   blog post does — widen just this page instead of the shared single-post
   container so blog/page reading width stays untouched. */
.woocommerce-account .km-container-single {
	max-width: 1140px;
}

.entry-title-single {
	font-size: 2.5rem;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 0.5rem;
	color: var(--km-primary);
}

.entry-meta {
	color: var(--km-text-light);
	font-size: 0.95rem;
	margin-block-end: 2rem;
}

.post-thumbnail-single img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-block-end: 2.5rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.entry-content {
	font-size: 1.15rem;
	line-height: 1.8;
	color: #333333;
}

.entry-content h2,
.entry-content h3 {
	color: var(--km-primary);
	margin-block-start: 2.5rem;
	margin-block-end: 1rem;
}

.entry-content p {
	margin-block-end: 1.5rem;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry-content a:hover {
	color: var(--km-primary);
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* =========================================
   Main Layout (Content + Sidebar)
========================================= */
.km-layout-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media screen and (min-width: 992px) {
	.km-layout-wrapper {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}
}

.km-main-column .posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

.km-main-column {
	min-width: 0;
	word-wrap: break-word;
}

/* =========================================
   Sidebar Widgets
========================================= */
.widget-area {
	position: sticky;
	top: 100px;
}

.widget {
	background: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	padding: 1.5rem;
	margin-block-end: 2rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.widget-title {
	font-size: 1.25rem;
	margin-block-start: 0;
	margin-block-end: 1rem;
	border-block-end: 2px solid var(--km-secondary);
	padding-block-end: 0.5rem;
	display: inline-block;
	color: var(--km-primary);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding-block: 0.5rem;
	border-block-end: 1px dashed var(--km-border);
}

.widget ul li:last-child {
	border-block-end: none;
}

/* =========================================
   Search Widget / Search Block
   Combines the field and button into a single
   pill-shaped control instead of two boxes
   sitting side by side.
========================================= */
.widget_search .search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 50px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget_search .search-form:focus-within,
.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15);
}

.widget_search .search-form label {
	flex: 1 1 auto;
	margin: 0;
}

.search-field,
.wp-block-search__input {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	padding-inline: 1.2rem;
	padding-block: 0.7rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--km-primary);
}

.search-field:focus,
.wp-block-search__input:focus {
	outline: none;
}

.search-field::placeholder,
.wp-block-search__input::placeholder {
	color: var(--km-text-light);
}

.search-submit,
.wp-block-search__button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: none;
	background-color: var(--km-secondary) !important;
	color: #ffffff !important;
	padding-inline: 1.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.search-submit:hover,
.search-submit:focus,
.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background-color: var(--km-primary) !important;
}

/* Icon-only button variant of the core Search block: keep it a clean circle. */
.wp-block-search__button.wp-block-search__button-only,
.wp-block-search__icon-button .wp-block-search__button {
	border-radius: 0;
	padding-inline: 1.1rem;
}

.wp-block-search__button svg {
	fill: currentColor;
	width: 1.1em;
	height: 1.1em;
}

/* When the block's own "Button only outside" layout is used, the label sits
   above the pill — keep it visually tied to the widget title style. */
.wp-block-search__label {
	display: block;
	margin-block-end: 0.6rem;
	font-weight: 600;
	color: var(--km-primary);
}

/* =========================================
   Custom Logo
========================================= */
.custom-logo-link img {
	max-width: 160px;
	height: auto;
	display: block;
}

/* =========================================
   Comments Form
========================================= */
.comment-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	background-color: var(--km-background);
	font-family: var(--km-font-family);
	color: var(--km-primary);
	transition: border-color 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1);
}

.comment-form input[type="submit"] {
	background-color: var(--km-secondary);
	color: #ffffff;
	padding: 0.8rem 2rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
	align-self: flex-start;
}

.comment-form input[type="submit"]:hover {
	background-color: var(--km-primary);
	transform: translateY(-2px);
}

/* =========================================
   WooCommerce Base Styles
========================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--km-secondary) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 0.6rem 1.5rem !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--km-primary) !important;
}

/* =========================================
   WooCommerce Shop Grid
========================================= */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 2rem !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
	padding-block-end: 1.5rem;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce ul.products li.product img {
	margin-block-end: 1rem !important;
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.2rem !important;
	color: var(--km-primary) !important;
	padding-inline: 1rem;
	margin-block-end: 0.5rem !important;
}

.woocommerce ul.products li.product .price {
	color: var(--km-secondary) !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	margin-block-end: 1rem !important;
}

.woocommerce ul.products li.product .button {
	margin-inline: auto !important;
	margin-block-start: auto !important;
	width: calc(100% - 2rem);
}

/* =========================================
   WooCommerce Single Product
========================================= */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-block-start: 2rem;
}

@media screen and (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce div.product .product_title {
	font-size: 2.5rem;
	color: var(--km-primary);
	margin-block-start: 0;
	line-height: 1.3;
}

.woocommerce div.product p.price {
	color: var(--km-secondary);
	font-size: 1.8rem;
	font-weight: 700;
	margin-block-end: 2rem;
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-block-start: 3rem !important;
	border-block-start: 1px solid var(--km-border);
	padding-block-start: 2rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-block-end: 1.5rem !important;
	display: flex;
	gap: 1rem;
	border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 1px solid var(--km-border) !important;
	border-radius: 8px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--km-primary) !important;
	border-color: var(--km-primary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #ffffff !important;
}

/* =========================================
   WooCommerce Image Fixes
========================================= */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product div.images img {
	width: 100% !important;
	height: auto !important;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 1rem;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: calc(25% - 7.5px) !important;
	float: none !important;
}

/* =========================================
   WooCommerce Related Products
========================================= */
.woocommerce .related.products {
	margin-block-start: 4rem;
	border-block-start: 1px solid var(--km-border);
	padding-block-start: 3rem;
	grid-column: 1 / -1;
}

.woocommerce .related.products h2 {
	font-size: 1.8rem;
	margin-block-end: 2rem;
	color: var(--km-primary);
}

.woocommerce .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 1.5rem !important;
}

/* =========================================
   Footer Widgets
========================================= */
.footer-widgets-area {
	background-color: var(--km-primary);
	color: #e0e0e0;
	padding-block: 4rem 2rem;
	margin-block-start: 4rem;
}

.footer-widgets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
}

.footer-widget-title {
	color: var(--km-secondary) !important;
	font-size: 1.2rem;
	margin-block-end: 1.5rem;
	border-block-end: none !important;
}

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

.footer-widget ul li {
	padding-block: 0.4rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-widget a {
	color: #e0e0e0;
}

.footer-widget a:hover {
	color: #ffffff;
	padding-inline-start: 5px;
}

.footer-widget img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Footer Widget Transparency Fixes */
.footer-widgets-grid .widget {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-block-end: 2rem;
}

.footer-widgets-grid .widget-title {
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 1.5rem !important;
	display: block;
}

.footer-widgets-grid .widget ul li {
	border-block-end: 1px solid rgba(150, 150, 150, 0.2) !important;
}

/* Footer Bottom Info */
.footer-bottom {
	background-color: #1a252f;
	color: #aaaaaa;
	padding-block: 1.5rem;
	font-size: 0.9rem;
}
/* =========================================
   Gutenberg / Block Editor Core Block Styles
========================================= */
.alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
}

.wp-block-quote,
.wp-block-pullquote {
	border-inline-start: 4px solid var(--km-secondary);
	padding-inline-start: 1.2em;
	font-style: italic;
	color: var(--km-primary);
}

.wp-block-pullquote {
	border-inline-start: none;
	border-block-start: 3px solid var(--km-secondary);
	border-block-end: 3px solid var(--km-secondary);
	text-align: center;
	padding-block: 1.5em;
}

.wp-block-button__link {
	background-color: var(--km-secondary);
	color: #ffffff;
	border-radius: 4px;
	padding: 0.7em 1.4em;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--km-secondary);
	border: 2px solid var(--km-secondary);
}

.wp-block-separator {
	border-color: var(--km-border);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--km-border);
	padding: 0.6em 1em;
}

/* =========================================
   WordPress Core Generated Classes
========================================= */

/* Alignment */
.alignleft {
	float: inline-start;
	margin-inline-end: 1.5em;
	margin-block-end: 1em;
}

.alignright {
	float: inline-end;
	margin-inline-start: 1.5em;
	margin-block-end: 1em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-block-end: 1em;
}

/* Captions */
.wp-caption {
	max-width: 100%;
	margin-block-end: 1.5em;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text,
.gallery-caption {
	font-size: 0.85rem;
	color: var(--km-text-light);
	text-align: center;
	padding-block-start: 0.5em;
}

/* Sticky Posts */
.sticky {
	position: relative;
}

.sticky .entry-title::before {
	content: "\2605";
	color: var(--km-secondary);
	margin-inline-end: 0.4em;
	font-size: 0.85em;
}

/* Multi-author Highlight */
.bypostauthor {
	position: relative;
}

/* Screen Reader Text (accessibility) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--km-surface);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--km-primary);
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: auto;
	inset-inline-start: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
# Block Styles (register_block_style)
--------------------------------------------------------------*/

/* Button block – Soft Rounded style. */
.wp-block-button.is-style-kabook-soft .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--km-secondary);
	border-radius: 999px;
	color: var(--km-secondary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-kabook-soft .wp-block-button__link:hover,
.wp-block-button.is-style-kabook-soft .wp-block-button__link:focus {
	background-color: var(--km-secondary);
	color: var(--km-surface);
}

/* Group block – Card style. */
.wp-block-group.is-style-kabook-card {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	padding: 1.75rem;
}

/* Separator block – Dashed style. */
hr.wp-block-separator.is-style-kabook-dashed {
	border: none;
	border-top: 2px dashed var(--km-border);
}

/*--------------------------------------------------------------
# WooCommerce Visual Package (v1.2.0)
# Dedicated, theme-harmonized styling: header cart, shop toolbar,
# product cards, single product, cart & checkout.
--------------------------------------------------------------*/

/* =========================================
   Header Actions & Cart Icon
========================================= */
.header-container {
	gap: 1.5rem;
}

.km-header-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.main-navigation {
	margin-inline-start: auto;
}

@media screen and (max-width: 768px) {
	.km-header-actions {
		margin-inline-start: 0.5rem;
	}
}

.km-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: var(--km-primary) !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.km-header-cart:hover,
.km-header-cart:focus-visible {
	background-color: rgba(0, 150, 136, 0.1) !important;
	color: var(--km-secondary) !important;
	transform: translateY(-1px);
}

.km-cart-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

.km-cart-count {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: -4px;
	min-width: 19px;
	height: 19px;
	padding-inline: 4px;
	border-radius: 999px;
	background-color: var(--km-secondary);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--km-surface);
	transition: transform 0.2s ease;
}

.km-cart-count:empty,
.km-cart-count[data-count="0"] {
	display: none;
}

/* Animate the badge briefly whenever WooCommerce refreshes the cart
   fragment after an AJAX add-to-cart. */
.km-header-cart.added .km-cart-count {
	animation: km-cart-pop 0.4s ease;
}

@keyframes km-cart-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.35);
	}
	100% {
		transform: scale(1);
	}
}

/* =========================================
   Shop Archive Toolbar (result count + ordering)
========================================= */
.woocommerce .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 !important;
}

.woocommerce .woocommerce-result-count {
	color: var(--km-text-light);
	font-size: 0.9rem;
}

.km-woocommerce-page .km-page-header,
.woocommerce-page .km-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 2.5rem;
}

.woocommerce .woocommerce-ordering select {
	appearance: none;
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 8px;
	padding: 0.55rem 2rem 0.55rem 1rem;
	font-family: var(--km-font-family);
	font-size: 0.9rem;
	color: var(--km-primary);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.6rem center;
	background-size: 14px;
}

.woocommerce .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.12);
}

/* =========================================
   Product Badges (Sale / Out of Stock)
========================================= */
.km-onsale-badge,
span.onsale {
	position: absolute !important;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	min-width: auto !important;
	height: auto !important;
	padding: 0.3rem 0.7rem !important;
	border-radius: 999px !important;
	background-color: var(--km-secondary) !important;
	color: #ffffff !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	z-index: 2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.woocommerce ul.products li.product,
.woocommerce div.product div.images {
	position: relative;
}

.woocommerce ul.products li.product.outofstock {
	opacity: 0.7;
}

.woocommerce ul.products li.product.outofstock::after {
	content: attr(data-km-outofstock);
}

.woocommerce span.stock.out-of-stock,
.woocommerce p.stock.out-of-stock {
	display: inline-block;
	background-color: #fdecea;
	color: #c0392b;
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.woocommerce span.stock.in-stock,
.woocommerce p.stock.in-stock {
	display: inline-block;
	background-color: #e8f6f3;
	color: #009688;
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
}

/* =========================================
   Product Card Refinements (Shop / Archive)
========================================= */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.woocommerce ul.products li.product img {
	transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.05);
}

.woocommerce ul.products li.product .star-rating {
	margin-inline: auto !important;
	margin-block-end: 0.5rem !important;
	font-size: 0.9rem !important;
	color: var(--km-border);
}

.woocommerce ul.products li.product .star-rating span::before,
.woocommerce .star-rating span::before {
	color: #f5a623;
}

.woocommerce ul.products li.product del {
	color: var(--km-text-light) !important;
	font-weight: 400 !important;
	opacity: 0.8;
	margin-inline-end: 0.4rem;
}

.woocommerce ul.products li.product ins {
	text-decoration: none;
}

/* Quick "Add to cart" reveal on hover (desktop), always visible on touch. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple {
	opacity: 1;
}

@media screen and (min-width: 769px) {
	.woocommerce ul.products li.product .button {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.woocommerce ul.products li.product:hover .button,
	.woocommerce ul.products li.product:focus-within .button {
		opacity: 1;
		transform: translateY(0);
	}
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-block-start: 0.5rem !important;
	font-size: 0.85rem;
}

/* =========================================
   Breadcrumbs
========================================= */
.woocommerce-breadcrumb {
	color: var(--km-text-light);
	font-size: 0.85rem;
	margin-block-end: 1.5rem !important;
	grid-column: 1 / -1;
}

.woocommerce-breadcrumb a {
	color: var(--km-text-light);
}

.woocommerce-breadcrumb a:hover {
	color: var(--km-secondary);
}

/* =========================================
   Single Product — Sticky Gallery & Summary
========================================= */
@media screen and (min-width: 992px) {
	.woocommerce div.product div.images {
		position: sticky;
		top: 110px;
		align-self: start;
	}
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 1rem;
}

.woocommerce div.product p.price del {
	color: var(--km-text-light);
	font-size: 1.1rem;
	font-weight: 400;
	margin-inline-end: 0.5rem;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce div.product .stock {
	margin-block-end: 1.5rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: #444444;
	font-size: 1.02rem;
	line-height: 1.8;
	margin-block-end: 1.5rem;
}

/* Quantity Stepper */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.woocommerce div.product .quantity {
	display: inline-flex;
}

.woocommerce div.product .quantity .qty,
.woocommerce div.product .quantity input.qty {
	width: 70px;
	padding: 0.65rem 0.5rem;
	text-align: center;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	font-family: var(--km-font-family);
	font-size: 1rem;
	color: var(--km-primary);
	background-color: var(--km-surface);
}

.woocommerce div.product .quantity .qty:focus {
	outline: none;
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.12);
}

.woocommerce div.product .single_add_to_cart_button {
	padding-inline: 2.2rem !important;
	font-size: 1rem !important;
}

/* Trust / Shipping Info Bar */
.woocommerce div.product .km-product-trust-bar {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-block-start: 1rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--km-border);
}

.woocommerce div.product .km-product-trust-bar .km-trust-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--km-text-light);
}

/* Product Tabs Polish */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.7rem 1.4rem;
	display: inline-block;
	font-weight: 600;
	font-size: 0.95rem;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 1.4rem;
	color: var(--km-primary);
	margin-block-start: 0;
}

.woocommerce table.shop_attributes {
	border: none;
	font-size: 0.95rem;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: none;
	border-block-end: 1px solid var(--km-border);
	padding: 0.7rem 0.5rem;
}

.woocommerce table.shop_attributes th {
	color: var(--km-primary);
	font-weight: 600;
	background: transparent;
}

/* =========================================
   Cart & Checkout Pages
========================================= */
.woocommerce table.shop_table {
	border: 1px solid var(--km-border);
	border-radius: 12px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	background-color: var(--km-background);
	color: var(--km-primary);
	font-weight: 600;
	padding: 1rem;
	border-block-end: 1px solid var(--km-border);
}

.woocommerce table.shop_table td {
	padding: 1rem;
	border-block-end: 1px solid var(--km-border);
	vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
	border-block-end: none;
}

.woocommerce td.product-name a {
	color: var(--km-primary);
	font-weight: 600;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #order_review {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	padding: 1.75rem;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review h3 {
	font-size: 1.3rem;
	color: var(--km-primary);
	margin-block-start: 0;
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout table.shop_table {
	border: none;
}

.woocommerce .cart_totals .order-total .amount {
	color: var(--km-secondary);
	font-weight: 700;
	font-size: 1.2rem;
}

.woocommerce-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.woocommerce-cart .coupon .input-text {
	padding: 0.65rem 1rem;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	font-family: var(--km-font-family);
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	font-family: var(--km-font-family);
	background-color: var(--km-surface);
	color: var(--km-primary);
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.12);
}

.woocommerce-checkout #payment {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	padding: 1.5rem;
	margin-block-start: 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--km-background);
	border-radius: 8px;
}

/* =========================================
   Empty Cart State
========================================= */
.woocommerce-cart-form,
.woocommerce .cart-empty {
	font-size: 1.05rem;
}

.woocommerce a.button.wc-backward {
	display: inline-block;
	margin-block-start: 1rem;
}

/* =========================================
   Responsive: Shop / Product on Small Screens
========================================= */
@media screen and (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr 1fr !important;
		gap: 1rem !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem !important;
	}

	.woocommerce div.product .product_title {
		font-size: 1.8rem;
	}

	.woocommerce div.product p.price {
		font-size: 1.4rem;
	}
}

/*--------------------------------------------------------------
# Header Search (icon toggle + full-screen overlay) — v1.2.0
--------------------------------------------------------------*/

/* Icon Button (hardened to match the header cart button exactly, and to
   win against generic button styling from page builders / plugins that
   target the bare <button> element, e.g. Elementor's default button skin). */
.km-header-search-toggle,
button.km-header-search-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--km-primary) !important;
	cursor: pointer;
	padding: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	line-height: 1;
	font-size: 0;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.km-header-search-toggle:hover,
.km-header-search-toggle:focus-visible,
button.km-header-search-toggle:hover,
button.km-header-search-toggle:focus-visible {
	background-color: rgba(0, 150, 136, 0.1) !important;
	color: var(--km-secondary) !important;
	transform: translateY(-1px);
	outline: none;
}

.km-search-icon {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

/* Full-screen Overlay */
.km-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-block-start: 12vh;
	padding-inline: 5%;
	background-color: rgba(20, 25, 30, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.km-search-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.km-search-overlay-inner {
	position: relative;
	width: 100%;
	max-width: 640px;
	transform: translateY(-16px);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.km-search-overlay.is-active .km-search-overlay-inner {
	transform: translateY(0);
}

.km-search-close {
	position: absolute;
	inset-block-start: -52px;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.km-search-close:hover,
.km-search-close:focus-visible {
	background-color: rgba(255, 255, 255, 0.22);
	transform: rotate(90deg);
}

/* Wrapper around the decorative icon + the theme's standard search form
   (output via get_search_form(), so it stays filterable via the core
   "get_search_form" hook — see inc/header-search.php). */
.km-search-overlay-form-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--km-surface);
	border-radius: 16px;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.km-search-overlay-icon {
	flex-shrink: 0;
	color: var(--km-text-light);
}

/* Restyle the standard .search-form / .search-field / .search-submit
   markup (same classes used by the sidebar search widget) into the
   larger, borderless look that fits the overlay. */
.km-search-overlay-form-wrap .search-form {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	gap: 0.75rem;
}

.km-search-overlay-form-wrap .search-form label {
	flex: 1 1 auto;
	margin: 0;
}

.km-search-overlay-form-wrap .search-field {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--km-font-family);
	font-size: 1.15rem;
	color: var(--km-primary);
	padding-block: 0.9rem;
	padding-inline: 0;
}

.km-search-overlay-form-wrap .search-field::placeholder {
	color: var(--km-text-light);
}

.km-search-overlay-form-wrap .search-submit {
	flex-shrink: 0;
	border: none !important;
	border-radius: 12px !important;
	background-color: var(--km-secondary) !important;
	color: #ffffff !important;
	font-family: var(--km-font-family);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 1.6rem !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.km-search-overlay-form-wrap .search-submit:hover,
.km-search-overlay-form-wrap .search-submit:focus-visible {
	background-color: var(--km-primary) !important;
}

/* Prevent background scroll while the overlay is open. */
body.km-search-open {
	overflow: hidden;
}

@media screen and (max-width: 600px) {
	.km-search-overlay {
		padding-block-start: 18vh;
	}

	.km-search-overlay-form-wrap {
		flex-wrap: wrap;
		border-radius: 14px;
		padding: 1rem;
	}

	.km-search-overlay-form-wrap .search-form {
		flex-basis: 100%;
		order: 1;
	}

	.km-search-overlay-form-wrap .search-field {
		padding-block: 0.6rem;
	}

	.km-search-overlay-icon {
		order: 0;
	}

	.km-search-overlay-form-wrap .search-submit {
		order: 2;
		margin-inline-start: auto;
	}
}

/*--------------------------------------------------------------
# WooCommerce My Account — v1.2.0
# Sidebar navigation, dashboard, orders, downloads, addresses,
# account details, and login/register forms.
--------------------------------------------------------------*/

/* =========================================
   Notices (info / success / error) — used across
   My Account, Cart, and Checkout.
========================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 2rem !important;
	padding: 1rem 1.5rem !important;
	border-radius: 10px;
	font-size: 0.95rem;
}

.woocommerce-message {
	background-color: #e8f6f3;
	color: #00695c;
	border: 1px solid #b6e4dc;
}

.woocommerce-info {
	background-color: #eef2ff;
	color: #3730a3;
	border: 1px solid #cdd4fb;
}

.woocommerce-error {
	background-color: #fdecea;
	color: #a3241a;
	border: 1px solid #f6c6c1;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
}

/* =========================================
   My Account — Layout

   WooCommerce's own default stylesheet lays this out with legacy,
   non-RTL-aware floats (nav 30% / content 68%, both float:left),
   which fights an RTL site and causes the nav column to render far
   too narrow (text wrapping/overlapping the icon). We cancel that
   float layout first, then build our own layout using :has() so it
   works no matter which element WooCommerce uses as the wrapper.
========================================= */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
}

.woocommerce-account :where(main, div, section, article):has( > .woocommerce-MyAccount-navigation ) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem;
}

.woocommerce-MyAccount-navigation {
	flex: 0 0 260px;
	max-width: 260px;
}

.woocommerce-MyAccount-content {
	flex: 1 1 320px;
	min-width: 0;
}

@media screen and (max-width: 860px) {
	.woocommerce-account .woocommerce,
	.woocommerce-account :where(main, div, section, article):has( > .woocommerce-MyAccount-navigation ) {
		grid-template-columns: 1fr;
		flex-direction: column;
		gap: 1.5rem;
	}

	.woocommerce-MyAccount-navigation {
		flex-basis: auto;
		max-width: 100%;
	}
}

/* =========================================
   My Account — Sidebar Navigation
========================================= */
.woocommerce-MyAccount-navigation {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 16px;
	padding: 0.75rem;
	position: sticky;
	top: 110px;
	box-sizing: border-box;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	color: var(--km-primary);
	font-weight: 500;
	font-size: 0.95rem;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-MyAccount-navigation-link a::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	opacity: 0.65;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: opacity 0.2s ease;
}

.woocommerce-MyAccount-navigation-link:hover a {
	background-color: rgba(0, 150, 136, 0.08);
	color: var(--km-secondary);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background-color: var(--km-secondary);
	color: #ffffff;
}

.woocommerce-MyAccount-navigation-link.is-active a::before,
.woocommerce-MyAccount-navigation-link:hover a::before {
	opacity: 1;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'%3E%3C/line%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'%3E%3C/line%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-block-start: 0.4rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var(--km-border);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #c0392b;
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	background-color: #c0392b;
	opacity: 0.7;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout:hover a {
	background-color: #fdecea;
	color: #c0392b;
}

.woocommerce-MyAccount-navigation-link--customer-logout:hover a::before {
	opacity: 1;
}

.rtl .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	transform: scaleX(-1);
}

@media screen and (max-width: 860px) {
	.woocommerce-MyAccount-navigation {
		position: static;
		padding: 0.5rem;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		overflow-x: auto;
		gap: 0.4rem;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation-link {
		flex-shrink: 0;
	}

	.woocommerce-MyAccount-navigation-link a {
		white-space: nowrap;
		padding: 0.65rem 0.9rem;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: none;
		border-inline-start: 1px solid var(--km-border);
		padding-inline-start: 0.4rem;
	}
}

/* =========================================
   My Account — Content Panel
========================================= */
.woocommerce-MyAccount-content {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 16px;
	padding: 2rem;
	min-width: 0;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-block-start: 0;
}

.woocommerce-MyAccount-content mark {
	background: none;
	color: var(--km-secondary);
	font-weight: 700;
}

@media screen and (max-width: 600px) {
	.woocommerce-MyAccount-content {
		padding: 1.25rem;
	}
}

/* =========================================
   My Account — Orders Table
========================================= */

/* Allow the table to scroll horizontally instead of squeezing its
   columns/text together when the panel is narrower than the table
   needs (rather than depending on a wide global container). */
.woocommerce-MyAccount-content {
	overflow-x: auto;
}

.woocommerce-orders-table,
.woocommerce-table--order-downloads {
	min-width: 620px;
}

/* Status badge — WooCommerce prints the status label as plain text
   inside the cell (no wrapping <mark>), so the colour comes from the
   status class WooCommerce puts on the row itself. The mark.order-status
   rule below is kept as a fallback for setups/plugins that do output it. */
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table .order-status,
.woocommerce-MyAccount-content mark.order-status {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	background: none;
	white-space: nowrap;
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.order-status.status-completed {
	background-color: #e8f6f3;
	color: #009688 !important;
}

.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.order-status.status-processing {
	background-color: #e8f0fe;
	color: #2563eb !important;
}

.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.order-status.status-on-hold {
	background-color: #fff4e5;
	color: #c47e0b !important;
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.order-status.status-pending {
	background-color: #f3f4f6;
	color: #6b7280 !important;
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.order-status.status-cancelled,
.order-status.status-failed {
	background-color: #fdecea;
	color: #c0392b !important;
}

.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
.order-status.status-refunded {
	background-color: #eef2ff;
	color: #4f46e5 !important;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content .woocommerce-orders-table .button {
	padding: 0.4rem 1rem !important;
	font-size: 0.8rem !important;
	margin-inline-end: 0.35rem;
	margin-block-end: 0.35rem;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-total {
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-date {
	white-space: nowrap;
}

/* =========================================
   My Account — Downloads
========================================= */
.woocommerce-table--order-downloads .download-product a {
	color: var(--km-primary);
	font-weight: 600;
}

.woocommerce-table--order-downloads td.download-remaining,
.woocommerce-table--order-downloads td.download-expires {
	color: var(--km-text-light);
	font-size: 0.9rem;
}

.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--km-secondary) !important;
	color: #ffffff !important;
	padding: 0.55rem 1.2rem !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file:hover {
	background-color: var(--km-primary) !important;
	transform: translateY(-1px);
}

.woocommerce-table--order-downloads a.woocommerce-MyAccount-downloads-file::before {
	content: "";
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

/* =========================================
   My Account — Addresses
========================================= */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

.woocommerce-Address {
	background-color: var(--km-background);
	border: 1px solid var(--km-border);
	border-radius: 12px;
	padding: 1.5rem;
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.1rem;
	color: var(--km-primary);
}

.woocommerce-Address-title a {
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--km-secondary);
	border-radius: 999px;
	color: var(--km-secondary) !important;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.woocommerce-Address-title a:hover {
	background-color: var(--km-secondary);
	color: #ffffff !important;
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.9;
	color: #444444;
}

/* =========================================
   My Account — Forms (Account Details, Addresses,
   Login, Register, Reset Password)
========================================= */
.woocommerce-account form .form-row {
	margin-block-end: 1.25rem;
}

.woocommerce-account form label {
	display: block;
	margin-block-end: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--km-primary);
}

.woocommerce-account form .input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	font-family: var(--km-font-family);
	background-color: var(--km-surface);
	color: var(--km-primary);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--km-secondary);
	box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.12);
}

.woocommerce-account form .password-input {
	position: relative;
	display: block;
}

.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
	background-color: var(--km-surface);
	border: 1px solid var(--km-border);
	border-radius: 16px;
	padding: 2rem;
}

.woocommerce-account .col2-set h2 {
	margin-block-start: 0;
	font-size: 1.3rem;
	color: var(--km-primary);
}

.woocommerce-account .woocommerce-form-row--wide,
.woocommerce-account .form-row-wide {
	width: 100%;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400 !important;
	cursor: pointer;
}

.woocommerce-account .woocommerce-form__input-checkbox {
	width: auto;
	margin: 0;
}

.woocommerce-account .lost_password {
	margin-block-start: 0.75rem;
	font-size: 0.9rem;
}

@media screen and (max-width: 600px) {
	.woocommerce-account .col2-set .col-1,
	.woocommerce-account .col2-set .col-2 {
		padding: 1.5rem;
	}
}