/*!
Theme Name: Kid Daddy
Theme URI: http://underscores.me/
Author: Ashraf Uddin
Author URI: http://webdevsgo.com
Description: A lightweight WooCommerce baby products theme with mega menu and AJAX search.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kid-daddy
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce
*/

/*--------------------------------------------------------------
# CSS Custom Properties (edit these to retheme instantly)
--------------------------------------------------------------*/
:root {
	--clr-primary:        #FFA726;   /* orange — logo background */
	--clr-primary-dark:   #E65100;   /* darker orange for hover */
	--clr-primary-light:  #FFF3E0;   /* very light amber tint */
	--clr-secondary:      #333333;   /* charcoal — logo text */
	--clr-text:           #333333;   /* charcoal */
	--clr-text-muted:     #777777;
	--clr-border:         #e8e8e8;
	--clr-bg:             #ffffff;
	--clr-bg-light:       #fafafa;
	--clr-top-bar-bg:     #2d2827;   /* very dark charcoal */
	--clr-top-bar-text:   #cccccc;
	--clr-nav-bg:         #333333;   /* charcoal — matches logo text */
	--clr-nav-text:       #ffffff;

	--container-width:    1280px;
	--container-pad:      16px;

	--top-bar-h:          36px;
	--header-h:           80px;
	--nav-h:              48px;

	--radius-sm:          4px;
	--radius-md:          8px;
	--radius-lg:          12px;

	--shadow-sm:          0 2px 8px rgba(0,0,0,.08);
	--shadow-md:          0 4px 20px rgba(0,0,0,.12);
	--shadow-lg:          0 8px 32px rgba(0,0,0,.18);

	--transition:         0.2s ease;

	--font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/*--------------------------------------------------------------
# Reset & Box Sizing
--------------------------------------------------------------*/
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 1.6;
	color: var(--clr-text);
	background: var(--clr-bg);
	-webkit-font-smoothing: antialiased;
}

/*--------------------------------------------------------------
# Base Elements
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	line-height: 1.3;
	font-weight: 700;
}

p { margin: 0 0 1em; }

a {
	color: var(--clr-primary);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--clr-primary-dark); }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
}

input, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

/*--------------------------------------------------------------
# Layout — Container
--------------------------------------------------------------*/
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.site-content {
	min-height: 60vh;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.skip-link.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	background: var(--clr-primary);
	color: #fff;
	clip: auto !important;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 10px 20px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: var(--radius-sm);
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
.top-bar {
	background: var(--clr-top-bar-bg);
	color: var(--clr-top-bar-text);
	font-size: 13px;
	height: var(--top-bar-h);
	display: flex;
	align-items: center;
}

.top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-bar-promo {
	color: #ffd700;
	font-weight: 500;
}

.top-bar-links a {
	color: var(--clr-top-bar-text);
	font-size: 12px;
	transition: color var(--transition);
}
.top-bar-links a:hover { color: #fff; }
.top-bar-links .sep {
	margin-inline: 8px;
	opacity: .4;
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/
.site-header {
	background: var(--clr-bg);
	border-bottom: 1px solid var(--clr-border);
	position: sticky;
	top: 0;
	z-index: 900;
	box-shadow: var(--shadow-sm);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--header-h);
}

/* Logo */
.site-branding {
	flex-shrink: 0;
}
.site-branding img {
	height: 56px;
	width: auto;
	object-fit: contain;
}
.site-name-link {
	font-size: 22px;
	font-weight: 800;
	color: var(--clr-primary);
	white-space: nowrap;
}

/* Search — fills all space between logo and actions */
.header-search {
	flex: 1;
	min-width: 0;
	position: relative;
}

.search-wrap {
	display: flex;
	align-items: center;
	border: 2px solid var(--clr-border);
	border-radius: 40px;
	overflow: hidden;
	background: var(--clr-bg-light);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.search-wrap:focus-within {
	border-color: var(--clr-primary);
	box-shadow: 0 0 0 3px rgba(232,66,124,.15);
	background: var(--clr-bg);
}

/* Category filter dropdown inside search bar */
.search-cat-select {
	flex-shrink: 0;
	border: none;
	background: transparent;
	padding: 0 12px 0 16px;
	height: 44px;
	font-size: 13px;
	font-weight: 500;
	color: var(--clr-text);
	cursor: pointer;
	outline: none;
	border-right: 1px solid var(--clr-border);
	max-width: 140px;
	white-space: nowrap;
	appearance: auto;
}
.search-cat-select:focus { color: var(--clr-primary); }

.search-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--clr-text);
	outline: none;
	min-width: 0;
}
.search-input::placeholder { color: var(--clr-text-muted); }

.search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-primary);
	color: #fff;
	width: 48px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 0 40px 40px 0;
	transition: background var(--transition);
}
.search-btn:hover { background: var(--clr-primary-dark); }

/* Search Dropdown */
.search-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	z-index: 1000;
	display: none;
	overflow: hidden;
}
.search-dropdown.is-open { display: block; }

.search-result-list { margin: 0; padding: 8px 0; }

.search-result-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: var(--clr-text);
	transition: background var(--transition);
}
.search-result-item a:hover { background: var(--clr-primary-light); }

.search-result-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	background: var(--clr-bg-light);
}
.search-result-img-placeholder {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--clr-bg-light);
	flex-shrink: 0;
}

.search-result-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.search-result-title {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.search-result-price {
	font-size: 13px;
	color: var(--clr-primary);
	font-weight: 600;
}

.search-loading,
.search-no-results {
	padding: 16px;
	text-align: center;
	font-size: 14px;
	color: var(--clr-text-muted);
}

.search-view-all a {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-primary);
	text-align: center;
	border-top: 1px solid var(--clr-border);
	transition: background var(--transition);
}
.search-view-all a:hover { background: var(--clr-primary-light); }

/* Header Actions — margin-left:auto pushes this to the far right */
.header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	margin-left: auto;
}

.header-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 12px;
	color: var(--clr-text);
	border-radius: var(--radius-md);
	transition: color var(--transition), background var(--transition);
}
.header-action:hover {
	color: var(--clr-primary);
	background: var(--clr-primary-light);
}

.action-label {
	font-size: 11px;
	font-weight: 500;
}

.cart-icon-wrap {
	position: relative;
	display: flex;
}
.cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--clr-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

/* Mobile search toggle (hidden on desktop) */
.mobile-search-toggle { display: none; }

/* Mobile Search Bar */
.mobile-search-bar {
	display: none;
	padding: 10px 0;
	border-top: 1px solid var(--clr-border);
	background: var(--clr-bg);
}
.mobile-search-bar.is-open { display: block; }

/*--------------------------------------------------------------
# Navigation Bar
--------------------------------------------------------------*/
.site-nav {
	background: var(--clr-nav-bg);
	position: sticky;
	top: var(--header-h);
	z-index: 800;
}

.nav-inner {
	display: flex;
	align-items: stretch;
	min-height: var(--nav-h);
}

/* Categories toggle button */
.categories-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	background: rgba(0,0,0,.2);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,.15);
	transition: background var(--transition);
	flex-shrink: 0;
}
.categories-toggle:hover,
.categories-toggle[aria-expanded="true"] {
	background: rgba(0,0,0,.35);
}
.icon-chevron {
	transition: transform var(--transition);
}
.categories-toggle[aria-expanded="true"] .icon-chevron {
	transform: rotate(180deg);
}

/* Primary menu */
.primary-menu {
	display: flex;
	align-items: stretch;
	flex: 1;
}
.primary-menu li {
	display: flex;
	align-items: stretch;
}
.primary-menu a {
	display: flex;
	align-items: center;
	padding: 0 16px;
	color: rgba(255,255,255,.9);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition);
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	background: rgba(0,0,0,.2);
	color: #fff;
}

/* Mobile hamburger (hidden on desktop) */
.mobile-nav-toggle { display: none; }

/*--------------------------------------------------------------
# Mega Menu — vertical accordion panel
--------------------------------------------------------------*/
.mega-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: 300px;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-top: 3px solid var(--clr-primary);
	box-shadow: var(--shadow-lg);
	z-index: 700;
	scrollbar-width: thin;
	scrollbar-color: var(--clr-border) transparent;
}
.mega-menu.is-open { display: block; }

/* ── Accordion list ── */
.mac-list,
.mac-subs,
.mac-grand-subs {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ── Row: link + toggle button ── */
.mac-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--clr-border);
}

/* ── Category link ── */
.mac-link {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-text);
	text-decoration: none;
	transition: color var(--transition), background var(--transition);
	min-width: 0;
}
.mac-link:hover { color: var(--clr-primary); background: var(--clr-primary-light); }

/* Level 2 — subcategory */
.mac-link--l2 {
	padding-left: 28px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text);
}

/* Level 3 — grandchild */
.mac-link--l3 {
	padding: 7px 16px 7px 44px;
	font-size: 12px;
	font-weight: 400;
	color: var(--clr-primary);
}
.mac-link--l3:hover { color: var(--clr-primary-dark); }

/* ── Toggle +/− button ── */
.mac-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-left: 1px solid var(--clr-border);
	cursor: pointer;
	color: var(--clr-primary);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	transition: background var(--transition);
}
.mac-toggle:hover { background: var(--clr-primary-light); }

/* ── Subcategory panels ── */
.mac-subs { background: var(--clr-bg-light); }
.mac-subs[hidden] { display: none; }

.mac-grand-subs { background: #fff; }
.mac-grand-subs[hidden] { display: none; }

.mac-grand-subs .mac-row {
	border-bottom: 1px solid #f0f0f0;
}

/* Legacy — keep so old class refs don't break */
.mega-menu-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0;
	padding: 16px 0;
}

.mega-menu-item { position: relative; }

.mega-menu-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 12px;
	color: var(--clr-text);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	border-radius: var(--radius-md);
	transition: background var(--transition), color var(--transition);
}
.mega-menu-link:hover,
.mega-menu-item:hover > .mega-menu-link {
	background: var(--clr-primary-light);
	color: var(--clr-primary);
}

.mega-menu-link img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--clr-border);
}

/* Legacy flyout — no longer used, kept so JS doesn't break */
.mega-menu-sub { display: none !important; }

/*--------------------------------------------------------------
# Site Overlay
--------------------------------------------------------------*/
.site-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 600;
	cursor: pointer;
}
.site-overlay.is-visible { display: block; }

/*--------------------------------------------------------------
# Main Content
--------------------------------------------------------------*/
.site-content {
	/* padding: 24px 0; */
}

.content-area {
	width: 100%;
}

/*--------------------------------------------------------------
# Posts & Pages
--------------------------------------------------------------*/
.entry-header { margin-bottom: 24px; }
.entry-title { font-size: clamp(22px, 3vw, 32px); }
.entry-meta {
	font-size: 13px;
	color: var(--clr-text-muted);
}
.entry-content { max-width: 720px; }
.entry-content p { margin-bottom: 1.2em; }
.entry-footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--clr-border);
	font-size: 13px;
	color: var(--clr-text-muted);
}

/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
.comments-area {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 2px solid var(--clr-border);
}
.comment-list { padding: 0; }
.comment-body {
	padding: 16px 0;
	border-bottom: 1px solid var(--clr-border);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	transition: border-color var(--transition);
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--clr-primary);
}
.comment-form .submit {
	background: var(--clr-primary);
	color: #fff;
	padding: 10px 28px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	transition: background var(--transition);
}
.comment-form .submit:hover { background: var(--clr-primary-dark); }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget { margin-bottom: 32px; }
.widget-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--clr-primary);
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.nav-links, .page-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 32px 0;
	flex-wrap: wrap;
}
.nav-links a, .nav-links span,
.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--clr-text);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.page-numbers:hover,
.page-numbers.current {
	background: var(--clr-primary);
	border-color: var(--clr-primary);
	color: #fff;
}

/*--------------------------------------------------------------
# 404 Page
--------------------------------------------------------------*/
.error-404 {
	text-align: center;
	padding: 80px 16px;
}
.error-404 .page-title {
	font-size: 80px;
	color: var(--clr-primary);
	line-height: 1;
}

/*--------------------------------------------------------------
# Footer — 3-column layout with payment bar + bottom bar
# Colors are driven by CSS custom properties set inline
# in footer.php from Customizer values.
--------------------------------------------------------------*/

.site-footer {
	background: var(--ft-bg, #1a1a2e);
	color: var(--ft-text, #aaa);
	margin-top: 48px;
}

/* ── Footer Top ── */
.ft-top {
	padding: 52px 0 44px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.ft-grid {
	display: grid;
	gap: 40px;
}
.ft-grid--cols  { grid-template-columns: 260px 1fr 1fr; }
.ft-grid--single{ grid-template-columns: 1fr; }

/* ── Col 1: Logo + Contact ── */
.ft-col--info {}

.ft-logo {
	margin-bottom: 22px;
}
.ft-logo img {
	height: 52px;
	width: auto;
	object-fit: contain;
	max-width: 200px;
}
.ft-site-name {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}

.ft-contact { display: flex; flex-direction: column; gap: 8px; }

.ft-contact-item {
	font-size: 13px;
	color: var(--ft-text, #aaa);
	line-height: 1.6;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.ft-contact-item a {
	color: var(--ft-text, #aaa);
	transition: color var(--transition);
}
.ft-contact-item a:hover { color: var(--ft-hover, #FFA726); }

.ft-label {
	font-weight: 700;
	color: var(--ft-heading, #fff);
	flex-shrink: 0;
}

/* ── Widget Columns ── */
.ft-col--widget .widget { margin-bottom: 0; }

.ft-col--widget .widget-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ft-heading, #fff);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ft-hover, #FFA726);
}

.ft-col--widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ft-col--widget ul li a {
	font-size: 13px;
	color: var(--ft-text, #aaa);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color var(--transition), padding-left var(--transition);
	text-decoration: none;
}
.ft-col--widget ul li a::before {
	content: '›';
	opacity: .5;
	font-size: 15px;
	line-height: 1;
}
.ft-col--widget ul li a:hover {
	color: var(--ft-hover, #FFA726);
	padding-left: 4px;
}

/* ── Payment Logos Bar ── */
.ft-payment {
	background: rgba(0,0,0,.2);
	padding: 14px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.ft-payment-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ft-payment-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--ft-text, #aaa);
	white-space: nowrap;
	flex-shrink: 0;
}

.ft-payment-img {
	max-height: 28px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* ── Bottom Bar ── */
.ft-bottom {
	background: var(--ft-bottom-bg, #111120);
	padding: 16px 0;
}

.ft-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.ft-copyright {
	font-size: 13px;
	color: var(--ft-bottom-text, #666);
	margin: 0;
}
.ft-copyright a { color: var(--ft-hover, #FFA726); transition: opacity var(--transition); }
.ft-copyright a:hover { opacity: .8; }
.ft-credit { opacity: .7; }

/* ── Social Icons ── */
.ft-social {
	display: flex;
	gap: 8px;
}

.ft-social-link {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--ft-text, #aaa);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), color var(--transition), transform var(--transition);
	text-decoration: none;
}
.ft-social-link:hover {
	background: var(--ft-hover, #FFA726);
	color: #fff;
	transform: translateY(-2px);
}
.ft-social-link--whatsapp:hover  { background: #25D366 !important; }
.ft-social-link--messenger:hover { background: #0084FF !important; }

/*--------------------------------------------------------------
# Floating Contact Buttons — WhatsApp + Messenger
--------------------------------------------------------------*/
.kd-float-btns {
	position: fixed;
	bottom: 28px;
	right: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
}

.kd-float-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
	transition: transform .2s, box-shadow .2s;
	flex-shrink: 0;
}

.kd-float-btn svg {
	display: block;
	flex-shrink: 0;
}

.kd-float-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	color: #fff;
}

/* Tooltip on hover */
.kd-float-btn__label {
	position: absolute;
	right: 62px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.75);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}
.kd-float-btn__label::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: rgba(0,0,0,.75);
}
.kd-float-btn:hover .kd-float-btn__label { opacity: 1; }

/* Brand colours */
.kd-float-btn--whatsapp  { background: #25D366; }
.kd-float-btn--messenger { background: #0084FF; }

/* WhatsApp pulse ring */
.kd-float-btn--whatsapp::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(37, 211, 102, .6);
	animation: kd-pulse 2s ease-out infinite;
	pointer-events: none;
}
@keyframes kd-pulse {
	0%   { opacity: 1;  transform: scale(1); }
	100% { opacity: 0;  transform: scale(1.5); }
}

/* Hide on print */
@media print { .kd-float-btns { display: none; } }

/* ── Responsive ── */
@media (max-width: 1024px) {
	.ft-grid--cols { grid-template-columns: 220px 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
	.ft-grid--cols { grid-template-columns: 1fr 1fr; }
	.ft-col--info  { grid-column: 1 / -1; }
	.ft-top        { padding: 36px 0 32px; }
}
@media (max-width: 480px) {
	.ft-grid--cols  { grid-template-columns: 1fr; gap: 28px; }
	.ft-bottom-inner { flex-direction: column; text-align: center; }
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft  { float: left;  margin-right: 24px; margin-bottom: 16px; }
.alignright { float: right; margin-left:  24px; margin-bottom: 16px; }
.aligncenter { display: block; margin-inline: auto; margin-bottom: 16px; }
.alignwide  { margin-inline: -32px; max-width: calc(100% + 64px); }
.alignfull  { margin-inline: calc(-1 * var(--container-pad)); max-width: calc(100% + var(--container-pad) * 2); }

/*--------------------------------------------------------------
# WooCommerce — minimal overrides (woocommerce.css for rest)
--------------------------------------------------------------*/
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--clr-primary);
}
.woocommerce ul.products li.product .price { color: var(--clr-primary); }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--clr-primary) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 600 !important;
	transition: background var(--transition) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--clr-primary-dark) !important;
}

/*--------------------------------------------------------------
# Responsive — Tablet  (≤ 1024px)
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	:root {
		--header-h: 68px;
	}

	.header-search { max-width: 420px; }
	.action-label  { display: none; }
}

/*--------------------------------------------------------------
# Responsive — Mobile (≤ 768px)
--------------------------------------------------------------*/
@media (max-width: 768px) {
	:root {
		--header-h: 60px;
		--top-bar-h: 32px;
	}

	/* ── Header ── */
	.header-search       { display: none; }
	.mobile-search-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--clr-text);
		border-radius: var(--radius-sm);
		transition: background var(--transition);
	}
	.mobile-search-toggle:hover { background: var(--clr-bg-light); }

	/* ── Nav bar ── */
	.site-nav { position: sticky; top: var(--header-h); }
	.categories-toggle  { padding: 0 12px; font-size: 13px; }

	/* ── Mobile hamburger button — always visible, white icon ── */
	.mobile-nav-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		color: #fff;
		margin-left: auto;
		border-radius: var(--radius-sm);
		transition: background var(--transition);
	}
	.mobile-nav-toggle:hover { background: rgba(255,255,255,.15); }

	/* ── Mobile Menu Drawer ── */
	.primary-menu {
		display: none;
		position: fixed;
		/* Start from top of viewport — handle header clearance with padding */
		top: 0;
		left: 0;
		width: min(300px, 85vw);
		height: 100dvh;
		height: 100vh;
		background: var(--clr-bg);
		flex-direction: column;
		overflow-y: auto;
		/* Must be above site header (900) and cart drawer (9999) minus 1 */
		z-index: 9997;
		box-shadow: 4px 0 24px rgba(0,0,0,.18);
		padding: 0;
		align-items: flex-start;
		/* Slide in from left */
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.4,0,.2,1);
	}
	.primary-menu.mobile-open {
		display: flex !important;
		transform: translateX(0);
	}

	/* Menu header bar (branding + close) */
	.primary-menu::before {
		content: 'Menu';
		display: flex;
		align-items: center;
		width: 100%;
		padding: 18px 20px;
		font-size: 16px;
		font-weight: 800;
		color: var(--clr-bg);
		background: var(--clr-primary);
		flex-shrink: 0;
		box-sizing: border-box;
	}

	/* Menu items */
	.primary-menu li { width: 100%; border-bottom: 1px solid var(--clr-border); }
	.primary-menu li:last-child { border-bottom: none; }
	.primary-menu a {
		display: flex !important;
		align-items: center !important;
		color: var(--clr-text) !important;
		padding: 14px 20px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		width: 100% !important;
		transition: background var(--transition), color var(--transition) !important;
	}
	.primary-menu a:hover,
	.primary-menu .current-menu-item > a,
	.primary-menu .current_page_item > a {
		background: var(--clr-primary-light) !important;
		color: var(--clr-primary) !important;
	}

	/* ── Site overlay covers background when menu is open ── */
	/* (site-overlay z-index is 600 — behind menu z-index 9997) */

	/* ── Mega menu on mobile ── */
	.mega-menu         { width: min(300px, 90vw); max-height: 70vh; }

	/* ── Top bar ── */
	.top-bar-promo { font-size: 11px; }
}

/*--------------------------------------------------------------
# Responsive — Small Mobile (≤ 480px)
--------------------------------------------------------------*/
@media (max-width: 480px) {
	.mega-menu     { width: calc(100vw - 24px); }
	.top-bar-links { display: none; }
}

/*--------------------------------------------------------------
# Flexible Content Sections — shared
--------------------------------------------------------------*/
.kd-section {
	margin-bottom: 40px;
}
.kd-section:last-child { margin-bottom: 0; }

.section-heading {
	text-align: center;
	font-size: clamp(18px, 2.5vw, 26px);
	font-weight: 700;
	color: var(--clr-text);
	margin-bottom: 24px;
	position: relative;
	padding-bottom: 12px;
}
.section-heading::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--clr-primary);
	border-radius: 2px;
	margin: 10px auto 0;
}

/* Generic button styles */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--clr-primary);
	color: #fff;
	padding: 12px 28px;
	border-radius: 40px;
	font-size: 15px;
	font-weight: 600;
	transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover {
	background: var(--clr-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

.btn-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 2px solid var(--clr-primary);
	color: var(--clr-primary);
	padding: 9px 22px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 600;
	transition: background var(--transition), color var(--transition);
}
.btn-view-all:hover {
	background: var(--clr-primary);
	color: #fff;
}

/*--------------------------------------------------------------
# Section: Hero Banner Slider
--------------------------------------------------------------*/
.section-hero {
	margin-bottom: 0;
	position: relative;
	overflow: hidden;
	/* line-height:0 removes phantom gap below inline elements */
	line-height: 0;
}

/* ── Slider track ── */
.kd-slider {
	position: relative;
}
.slider-track {
	display: flex;
	transition: transform var(--kd-slider-transition, 700ms) cubic-bezier(.4,0,.2,1);
	will-change: transform;
	line-height: 1.6;
}

/* ── Individual slide ── */
.slider-slide {
	flex: 0 0 100%;
	width: 100%;
	position: relative;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
	user-select: none;
	-webkit-user-drag: none;
}

/* ── Overlay ── */
.slide-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* ── Slide content ── */
.slide-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	/* padding set inline per-slide */
}
.slide-content.pos-center { text-align: center; }
.slide-content.pos-right  { text-align: right; }

/* ── Slide title & subtitle ── */
.slide-title {
	/* font-size / color / font-family etc. set inline */
	margin: 0 0 .45em;
}
.slide-subtitle {
	/* size / color / spacing set inline */
	margin: 0 0 1.4em;
	opacity: .92;
}

/* ── Slide button sizes ── */
.slide-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: filter var(--transition), transform var(--transition);
	/* background / color / radius set inline */
}
.slide-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}
/* size variants */
.slide-btn--sm { font-size: 13px; padding:  8px 20px; }
.slide-btn--md { font-size: 15px; padding: 12px 28px; }
.slide-btn--lg { font-size: 17px; padding: 15px 36px; }
.slide-btn--xl { font-size: 20px; padding: 18px 46px; }

/* style variant — outline/ghost need border */
.slide-btn--outline { border-width: 2px; border-style: solid; }
.slide-btn--ghost   { text-decoration: underline; }

/* ── Arrows ── */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	color: var(--clr-text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), transform var(--transition);
	backdrop-filter: blur(4px);
}
.slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slider-prev { left:  16px; }
.slider-next { right: 16px; }

/* ── Dots ── */
.slider-dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
	line-height: 0;
}
.slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	border: 2px solid rgba(255,255,255,.8);
	transition: background var(--transition), transform var(--transition), width var(--transition);
}
.slider-dot.is-active {
	background: #fff;
	width: 26px;
	border-radius: 6px;
}

/* ── Fade effect ── */
.kd-slider--fade .slider-track { position: relative; }
.kd-slider--fade-ready         { overflow: hidden; }

/*--------------------------------------------------------------
# Section: Category Grid (CSS-variable driven)
# All values injected inline from PHP — no extra class permutations.
--------------------------------------------------------------*/

/* Section wrapper — spacing & bg set inline via PHP */
.section-cat-grid {}

/* Section title */
.cg-title {
	margin-bottom: 24px;
	padding-bottom: 0;
	/* colour / size / weight / align set inline */
}

/* ── Static grid ── */
.cg-grid {
	display: grid;
	grid-template-columns: repeat( var(--cg-cols, 5), 1fr );
	gap: var(--cg-gap, 14px);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Responsive columns — driven by CSS vars set inline on section */
@media (max-width: 900px) {
	.cg-grid { grid-template-columns: repeat( var(--cg-cols-tablet, 4), 1fr ); }
}
@media (max-width: 540px) {
	.cg-grid { grid-template-columns: repeat( var(--cg-cols-mobile, 3), 1fr ); }
}

/* ── Tile — shared base ── */
.cg-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	border-radius: var(--radius-md);
	text-decoration: none;
	text-align: center;
	height: 100%;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	background-color: var(--cg-tile-bg, #fff);
}

/* Tile style variants */
.cg-tile--bordered {
	border: 2px solid var(--cg-tile-border, #e8e8e8);
}
.cg-tile--bordered:hover {
	border-color: var(--cg-tile-hover, #FFA726);
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cg-tile--shadow {
	border: 1px solid transparent;
	box-shadow: var(--shadow-sm);
}
.cg-tile--shadow:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.cg-tile--plain:hover {
	transform: translateY(-2px);
}

/* ── Image wrap — size, shape, border all from CSS vars ── */
.cg-tile-img-wrap {
	width: var(--cg-img-size, 80px);
	height: var(--cg-img-size, 80px);
	border-radius: var(--cg-img-radius, 50%);
	overflow: hidden;
	border: var(--cg-img-bw, 2px) solid var(--cg-img-border, #e8e8e8);
	background: var(--cg-img-bg, #f9f9f9);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color var(--transition);
}
.cg-tile:hover .cg-tile-img-wrap {
	border-color: var(--cg-tile-hover, #FFA726);
}

.cg-tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.cg-tile:hover .cg-tile-img { transform: scale(1.06); }

/* ── Name & count ── */
.cg-tile-name {
	color:          var(--cg-name-color, #2d2d2d);
	font-size:      var(--cg-name-size, 13px);
	font-weight:    var(--cg-name-weight, 600);
	letter-spacing: var(--cg-name-spacing, 0px);
	line-height: 1.3;
}

.cg-tile-count {
	color: var(--cg-count-color, #777);
	font-size: 11px;
	font-weight: 400;
}

/* ── Carousel gap sync ── */
.cg-carousel .kd-carousel-track {
	gap: var(--cg-gap, 14px);
}

/*--------------------------------------------------------------
# Section: Product Section (ps-section)
# CSS custom properties set inline on the section element drive
# all card colours, grid columns and gaps — no extra classes needed.
--------------------------------------------------------------*/

/* ── Banner ── */
.ps-banner {
	width: 100%;
	margin-bottom: 0;
	position: relative;
	overflow: hidden;
}
.ps-banner-link  { display: block; }
.ps-banner-img   { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.ps-banner-link:hover .ps-banner-img { transform: scale(1.02); }
.ps-banner-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.ps-banner-text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 24px 32px;
}
.ps-banner-title { margin: 0; line-height: 1.2; }

/* ── Section Header ── */
.ps-header {
	margin-bottom: 16px;
}
.ps-header .container { padding-top: 0; padding-bottom: 0; }

.ps-header--bar  { padding: 12px 0; }
.ps-header--line { padding: 12px 0; }
.ps-header--plain{ padding: 12px 0; background: transparent !important; }

.ps-header-title {
	margin: 0;
	/* colour / size / weight set inline */
}
.ps-header-title a { color: inherit; }
.ps-header-title a:hover { opacity: .8; }

/* ── Product grid — columns driven by CSS vars ── */
.ps-grid {
	display: grid;
	grid-template-columns: repeat( var(--ps-cols, 6), 1fr );
	gap: var(--ps-gap, 14px);
	list-style: none;
	padding: 0;
	margin: 16px 0 20px;
}

@media (max-width: 1024px) {
	.ps-grid { grid-template-columns: repeat( var(--ps-cols-tablet, 4), 1fr ); }
}
@media (max-width: 600px) {
	.ps-grid { grid-template-columns: repeat( var(--ps-cols-mobile, 2), 1fr ); }
}

/* ── Product card ── */
.ps-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--ps-card-bg, #fff);
	border-radius: var(--ps-card-radius, 8px);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}
.ps-card:hover { transform: translateY(-3px); }

.ps-card--border { border: 1px solid var(--ps-card-border, #e8e8e8); }
.ps-card--shadow { box-shadow: var(--shadow-sm); }
.ps-card--shadow:hover { box-shadow: var(--shadow-md); }
.ps-card--both   { border: 1px solid var(--ps-card-border, #e8e8e8); box-shadow: var(--shadow-sm); }
.ps-card--both:hover { box-shadow: var(--shadow-md); }
.ps-card--plain  {}

/* Image */
.ps-card-img-link {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--clr-bg-light);
}
.ps-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.ps-card:hover .ps-card-img { transform: scale(1.06); }

/* Body */
.ps-card-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 5px;
}

.ps-card-title {
	font-size: var(--ps-title-size, 13px);
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ps-card-title a { color: var(--ps-title-color, #2d2d2d); }
.ps-card-title a:hover { color: var(--clr-primary); }

.ps-card-rating { line-height: 1; }
.ps-card-rating .star-rating { font-size: 12px; }

.ps-card-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--ps-price-color, #FFA726);
}
.ps-card-price del { font-size: 11px; color: var(--clr-text-muted); font-weight: 400; margin-right: 3px; }
.ps-card-price ins { text-decoration: none; }

.ps-card-btn {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 7px 10px;
	background: var(--ps-btn-bg, #FFA726);
	color: var(--ps-btn-color, #fff) !important;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	border-radius: var(--ps-btn-radius, 4px);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: filter var(--transition);
}
.ps-card-btn:hover            { filter: brightness(1.1); color: var(--ps-btn-color, #fff) !important; }
.ps-card-btn--view            { background: var(--clr-bg-light) !important; color: var(--clr-text) !important; border: 1px solid var(--clr-border); }
.ps-card-btn--view:hover      { background: var(--clr-primary-light) !important; color: var(--clr-primary) !important; border-color: var(--clr-primary); filter: none; }

/* View All */
.ps-view-all {
	text-align: center;
	padding: 8px 0 4px;
}

/* ── Shared badge (reused by product_row too) ── */
.product-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 40px;
	text-transform: uppercase;
	letter-spacing: .5px;
	z-index: 1;
}
.badge-sale     { background: var(--clr-primary);   color: #fff; }
.badge-featured { background: var(--clr-secondary); color: #fff; }

/* ── Legacy shared classes (product_row section reuses these) ── */
.product-card-wrap { display: flex; }
.product-card      { display: flex; flex-direction: column; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); width: 100%; }
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card-img-link { display: block; position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--clr-bg-light); }
.product-card-img  { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.product-card:hover .product-card-img { transform: scale(1.06); }
.product-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.product-card-title { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-title a { color: var(--clr-text); }
.product-card-title a:hover { color: var(--clr-primary); }
.product-card-price { font-size: 14px; font-weight: 700; color: var(--clr-primary); }
.product-card-price del { font-size: 12px; color: var(--clr-text-muted); font-weight: 400; margin-right: 4px; }
.product-card-price ins { text-decoration: none; }
.product-card-btn { display: block; width: 100%; margin-top: auto; padding: 7px 10px; background: var(--clr-primary); color: #fff !important; font-size: 12px; font-weight: 600; text-align: center; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background var(--transition); text-decoration: none; }
.product-card-btn:hover { background: var(--clr-primary-dark); color: #fff; }
.product-card-btn.btn-view { background: var(--clr-bg-light); color: var(--clr-text) !important; border: 1px solid var(--clr-border); }
.product-card-btn.btn-view:hover { background: var(--clr-primary-light); color: var(--clr-primary) !important; border-color: var(--clr-primary); }

.section-view-all { text-align: center; margin-top: 4px; padding-bottom: 8px; }

/*--------------------------------------------------------------
# Section: Promo Banner
--------------------------------------------------------------*/
.section-promo-banner {
	/* margin / padding set inline */
}

/* ── Wrapper (div or <a>) — position:relative so overlay + text can stack ── */
.promo-banner-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	/* border-radius set inline when needed */
}

/* ── Base image — always shown at natural size (or min-height with object-fit) ── */
.promo-banner-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}
a.promo-banner-wrap:hover .promo-banner-img {
	transform: scale(1.03);
}

/* ── Colour overlay ── */
.promo-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* ── Text content — sits above overlay ── */
.promo-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* padding / text-align / align-items / justify-content set inline */
}

/* ── Heading & subtitle ── */
.promo-title {
	margin: 0;
	line-height: 1.2;
}
.promo-subtitle {
	margin: 0;
	line-height: 1.5;
	opacity: .92;
}

/* ── Button ── */
.promo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: filter var(--transition), transform var(--transition);
	align-self: inherit;
}
.promo-btn:hover    { filter: brightness(1.1); transform: translateY(-2px); }
.promo-btn--sm      { font-size: 13px; padding:  8px 20px; }
.promo-btn--md      { font-size: 15px; padding: 12px 28px; }
.promo-btn--lg      { font-size: 17px; padding: 15px 36px; }
.promo-btn--xl      { font-size: 20px; padding: 18px 46px; }

/* ── Responsive ── */
@media (max-width: 768px) {
	.promo-content              { gap: 10px; }
	.promo-btn--lg,
	.promo-btn--xl              { font-size: 15px; padding: 12px 28px; }
}
@media (max-width: 480px) {
	.promo-btn                  { font-size: 13px !important; padding: 9px 20px !important; }
}

/*--------------------------------------------------------------
# Section: Two Column Block
--------------------------------------------------------------*/
.section-two-col { background: var(--clr-bg-light); padding: 40px 0; }

.two-col-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.two-col-heading {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--clr-primary);
	color: var(--clr-text);
}

.two-col-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.two-col-item-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 8px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	background: var(--clr-bg);
	text-align: center;
	transition: border-color var(--transition), box-shadow var(--transition);
	color: var(--clr-text);
}
a.two-col-item-inner:hover {
	border-color: var(--clr-primary);
	box-shadow: var(--shadow-sm);
	color: var(--clr-primary);
}

.two-col-item-img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.two-col-item-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/*--------------------------------------------------------------
# Section: Testimonials
--------------------------------------------------------------*/
.section-testimonials { background: var(--clr-primary-light); padding: 48px 0; }

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.testimonial-card {
	background: var(--clr-bg);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.testimonial-rating {
	display: flex;
	gap: 2px;
}
.star { display: inline-block; }
.star-filled { color: #fbbf24; }
.star-empty  { color: var(--clr-border); }

.testimonial-quote {
	margin: 0;
	font-size: 14px;
	color: var(--clr-text-muted);
	line-height: 1.6;
	flex: 1;
}
.testimonial-quote p { margin: 0; }
.testimonial-quote p::before { content: '\201C'; }
.testimonial-quote p::after  { content: '\201D'; }

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--clr-border);
}
.testimonial-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--clr-primary-light);
}
.testimonial-avatar-placeholder {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--clr-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-primary);
	flex-shrink: 0;
}
.testimonial-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-text);
}

/*--------------------------------------------------------------
# Section: Text Block (SEO)
--------------------------------------------------------------*/
.section-text-block { padding: 40px 0; }

.section-text-block.bg-white      { background: var(--clr-bg); }
.section-text-block.bg-light-gray { background: var(--clr-bg-light); }
.section-text-block.bg-light-pink { background: var(--clr-primary-light); }

.text-block-title {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--clr-text);
}

.text-block-content {
	font-size: 14px;
	line-height: 1.8;
	color: var(--clr-text-muted);
	columns: 2;
	column-gap: 40px;
}
.text-block-content p { margin-bottom: 1em; break-inside: avoid; }
.text-block-content a { color: var(--clr-primary); }
.text-block-content h2,
.text-block-content h3 { break-after: avoid; color: var(--clr-text); }

/*--------------------------------------------------------------
# Section Responsive
--------------------------------------------------------------*/
@media (max-width: 1200px) {
	.product-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1024px) {
	.product-grid      { grid-template-columns: repeat(4, 1fr); }
	.cat-grid          { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
	.two-col-grid      { gap: 24px; }
	.text-block-content { columns: 1; }
}

@media (max-width: 768px) {
	.product-grid       { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.two-col-grid       { grid-template-columns: 1fr; gap: 32px; }
	.testimonials-grid  { grid-template-columns: 1fr; }
	.cat-grid           { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
	.hero-banner .hero-content { padding: 32px var(--container-pad); }
	.hero-title         { font-size: clamp(20px, 5vw, 36px); }
	.product-section-banner img { max-height: 150px; }
}

@media (max-width: 480px) {
	.product-grid        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.two-col-list        { grid-template-columns: repeat(3, 1fr); }
	.cat-grid            { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
	.cat-grid-img-wrap   { width: 56px; height: 56px; }
	.cat-grid-name       { font-size: 11px; }
}

/*--------------------------------------------------------------
# KDCarousel — multi-item carousel
--------------------------------------------------------------*/

/* Outer wrapper: clips overflow, positions arrows */
.kd-carousel {
	--carousel-items: 5;
	--carousel-gap:   16px;
	position: relative;
	overflow: hidden;
}

/* Track: flex row, animated with transform */
.kd-carousel-track {
	display: flex;
	gap: var(--carousel-gap);
	transition: transform 0.4s cubic-bezier(.4,0,.2,1);
	will-change: transform;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Each item: fixed width calculated from visible count */
.kd-carousel-item {
	flex: 0 0 calc(
		(100% - (var(--carousel-items) - 1) * var(--carousel-gap)) / var(--carousel-items)
	);
	min-width: 0;
}

/* ── Column variants — controls --carousel-items at each breakpoint ── */
/* 3 columns */
.kd-carousel--cols-3 { --carousel-items: 3; }
@media (max-width: 768px) { .kd-carousel--cols-3 { --carousel-items: 2; } }
@media (max-width: 480px) { .kd-carousel--cols-3 { --carousel-items: 1; } }

/* 4 columns */
.kd-carousel--cols-4 { --carousel-items: 4; }
@media (max-width: 1024px) { .kd-carousel--cols-4 { --carousel-items: 3; } }
@media (max-width: 768px)  { .kd-carousel--cols-4 { --carousel-items: 2; } }
@media (max-width: 480px)  { .kd-carousel--cols-4 { --carousel-items: 2; } }

/* 5 columns (default) */
.kd-carousel--cols-5 { --carousel-items: 5; }
@media (max-width: 1200px) { .kd-carousel--cols-5 { --carousel-items: 4; } }
@media (max-width: 900px)  { .kd-carousel--cols-5 { --carousel-items: 3; } }
@media (max-width: 600px)  { .kd-carousel--cols-5 { --carousel-items: 2; } }

/* 6 columns */
.kd-carousel--cols-6 { --carousel-items: 6; }
@media (max-width: 1200px) { .kd-carousel--cols-6 { --carousel-items: 5; } }
@media (max-width: 900px)  { .kd-carousel--cols-6 { --carousel-items: 4; } }
@media (max-width: 600px)  { .kd-carousel--cols-6 { --carousel-items: 2; } }

/* 7 & 8 columns */
.kd-carousel--cols-7 { --carousel-items: 7; }
.kd-carousel--cols-8 { --carousel-items: 8; }
@media (max-width: 1200px) { .kd-carousel--cols-7 { --carousel-items: 5; } .kd-carousel--cols-8 { --carousel-items: 6; } }
@media (max-width: 900px)  { .kd-carousel--cols-7 { --carousel-items: 4; } .kd-carousel--cols-8 { --carousel-items: 4; } }
@media (max-width: 600px)  { .kd-carousel--cols-7 { --carousel-items: 2; } .kd-carousel--cols-8 { --carousel-items: 2; } }

/* ── Carousel Arrows ── */
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--clr-bg);
	color: var(--clr-text);
	border: 1px solid var(--clr-border);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), color var(--transition), box-shadow var(--transition);
	flex-shrink: 0;
}
.carousel-arrow:hover:not(:disabled) {
	background: var(--clr-primary);
	color: #fff;
	border-color: var(--clr-primary);
	box-shadow: var(--shadow-md);
}
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

/*--------------------------------------------------------------
# Section: Featured Categories
--------------------------------------------------------------*/
.section-featured-cats { /* spacing set inline */ }

.fc-title {
	/* inline styles override colour/size/weight/align */
	margin-bottom: 24px;
	padding-bottom: 0;
}

/* ── Category tile ── */
.kd-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 10px;
	border-radius: var(--radius-md);
	color: var(--clr-text);
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	height: 100%;
}

/* Tile styles */
.kd-cat-tile--bordered {
	border: 2px solid var(--clr-border);
	background: var(--clr-bg);
}
.kd-cat-tile--bordered:hover {
	border-color: var(--clr-primary);
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}
.kd-cat-tile--shadow {
	box-shadow: var(--shadow-sm);
	background: var(--clr-bg);
}
.kd-cat-tile--shadow:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.kd-cat-tile--plain:hover {
	color: var(--clr-primary);
	transform: translateY(-2px);
}

.kd-cat-tile-img-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--clr-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kd-cat-tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.kd-cat-tile:hover .kd-cat-tile-img { transform: scale(1.05); }

.kd-cat-tile-name {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	color: inherit;
}

/* Static grid fallback (when slider is off) */
.fc-grid {
	display: grid;
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.fc-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fc-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.fc-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.fc-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.fc-grid--cols-7 { grid-template-columns: repeat(7, 1fr); }
.fc-grid--cols-8 { grid-template-columns: repeat(8, 1fr); }

@media (max-width: 900px) {
	.fc-grid--cols-5,
	.fc-grid--cols-6,
	.fc-grid--cols-7,
	.fc-grid--cols-8 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.fc-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 400px) {
	.fc-grid { grid-template-columns: repeat(2, 1fr); }
}

/*--------------------------------------------------------------
# Section: Product Row
--------------------------------------------------------------*/
.section-product-row { /* spacing set inline */ }

/* Section header row: title left + view-all right */
.pr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--clr-border);
	padding-bottom: 10px;
}

.pr-title {
	margin: 0;
	/* colour/size/weight set inline */
}

.pr-view-all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-primary);
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--transition);
}
.pr-view-all:hover { color: var(--clr-primary-dark); }

/* Custom badge (set by admin) */
.product-badge--custom {
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 40px;
	text-transform: uppercase;
	letter-spacing: .5px;
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
}

/* Static grid for product row */
.pr-grid {
	display: grid;
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.pr-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pr-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pr-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.pr-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Product track inside carousel needs list-style reset */
.pr-track { list-style: none; padding: 0; margin: 0; }

@media (max-width: 1200px) {
	.pr-grid--cols-5, .pr-grid--cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
	.pr-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
	.pr-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/*--------------------------------------------------------------
# Section: Blank Space
--------------------------------------------------------------*/
.section-blank-space {
	width: 100%;
	/* height and bg-color set inline */
}

/*--------------------------------------------------------------
# Section: Page Title / Heading
--------------------------------------------------------------*/
.kd-pt-section { position: relative; overflow: hidden; }

.kd-pt-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.kd-pt-content { position: relative; z-index: 1; }

/* Breadcrumb */
.kd-pt-breadcrumb {
	font-size: .82rem;
	margin-bottom: 1rem;
	color: #999;
}
.kd-pt-breadcrumb a { color: inherit; text-decoration: none; }
.kd-pt-breadcrumb a:hover { color: var(--clr-primary); }
.kd-pt-bc-sep { margin-inline: .4rem; }

/* Title */
.kd-pt-title { margin: 0; }

/* Subtitle */
.kd-pt-subtitle { margin: 0; max-width: 680px; }
.kd-pt-section .kd-pt-content[style*="text-align:center"] .kd-pt-subtitle,
.kd-pt-section .kd-pt-content[style*="text-align: center"] .kd-pt-subtitle { margin-inline: auto; }
.kd-pt-section .kd-pt-content[style*="text-align:right"] .kd-pt-subtitle,
.kd-pt-section .kd-pt-content[style*="text-align: right"] .kd-pt-subtitle { margin-left: auto; }

/* ── Decorator styles ── */
.kd-pt-decorator {
	display: flex;
	align-items: center;
	justify-content: inherit;
}

/* Line */
.kd-pt-decorator--line {
	height: var(--dec-thick, 3px);
	width: var(--dec-width, 60px);
	background: var(--dec-color, #FFA726);
	border-radius: 99px;
}

/* Bar */
.kd-pt-decorator--bar {
	width: var(--dec-width, 60px);
	height: calc(var(--dec-thick, 3px) * 2.5);
	background: var(--dec-color, #FFA726);
	border-radius: 4px;
}

/* Dots */
.kd-pt-decorator--dots { gap: 6px; }
.kd-pt-decorator--dots span {
	display: block;
	width: calc(var(--dec-thick, 3px) * 3.5);
	height: calc(var(--dec-thick, 3px) * 3.5);
	border-radius: 50%;
	background: var(--dec-color, #FFA726);
}
.kd-pt-decorator--dots span:first-child,
.kd-pt-decorator--dots span:last-child { opacity: .45; transform: scale(.75); }

/* Gradient line */
.kd-pt-decorator--gradient {
	width: var(--dec-width, 60px);
	height: var(--dec-thick, 3px);
	background: linear-gradient(90deg, var(--dec-color, #FFA726), transparent);
	border-radius: 99px;
}

/*--------------------------------------------------------------
# Section: Rich Text / WYSIWYG
--------------------------------------------------------------*/
.kd-rt-content.kd-prose { word-break: break-word; }

/* Typography cascade applied via CSS vars set inline */
.kd-prose a              { color: var(--rt-link, #FFA726); text-decoration: underline; }
.kd-prose a:hover        { opacity: .8; }
.kd-prose h1,.kd-prose h2,.kd-prose h3,
.kd-prose h4,.kd-prose h5,.kd-prose h6 { color: var(--rt-heading, #333); margin-top: 1.4em; margin-bottom: .5em; line-height: 1.25; }
.kd-prose h1:first-child,.kd-prose h2:first-child,
.kd-prose h3:first-child { margin-top: 0; }
.kd-prose p  { margin-top: 0; margin-bottom: 1em; }
.kd-prose p:last-child { margin-bottom: 0; }
.kd-prose ul,.kd-prose ol { padding-left: 1.6em; margin-bottom: 1em; }
.kd-prose li { margin-bottom: .4em; }
.kd-prose blockquote {
	margin: 1.5em 0;
	padding: .8em 1.2em;
	border-left: 4px solid var(--clr-primary);
	background: #fffbf3;
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #555;
}
.kd-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.kd-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.kd-prose th,.kd-prose td { padding: .6em 1em; border: 1px solid #e0e0e0; text-align: left; }
.kd-prose th { background: #f5f5f5; font-weight: 600; }
.kd-prose code {
	background: #f5f5f5;
	border-radius: 4px;
	padding: .15em .4em;
	font-size: .9em;
	font-family: monospace;
}
.kd-prose pre { background: #1e1e2e; color: #cdd6f4; border-radius: 8px; padding: 1.2em; overflow-x: auto; margin-bottom: 1em; }
.kd-prose pre code { background: none; color: inherit; padding: 0; font-size: .88em; }
.kd-prose hr { border: none; border-top: 2px solid #eee; margin: 2em 0; }

/*--------------------------------------------------------------
# Section: Contact
--------------------------------------------------------------*/
.kd-contact-section .container { max-width: var(--container-width, 1200px); margin-inline: auto; padding-inline: var(--container-pad, 20px); }

/* ── Heading ── */
.kd-contact-heading,
.kd-contact-form-heading {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--clr-secondary);
	margin-bottom: 1.5rem;
}

/* ── Info Cards ── */
.kd-contact-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.kd-contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	flex: 1 1 200px;
	background: var(--card-bg, #fafafa);
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .2s;
}

a.kd-contact-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.1);
	transform: translateY(-2px);
}

.kd-contact-card__icon {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: rgba(255,167,38,.12);
	border-radius: 50%;
}

.kd-contact-card__icon svg {
	width: 20px;
	height: 20px;
}

.kd-contact-card__label {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #999;
}

.kd-contact-card__value {
	font-size: .95rem;
	color: var(--clr-secondary);
	line-height: 1.5;
}

/* ── Form Wrap ── */
.kd-contact-form-wrap {
	border-radius: 16px;
	padding: 2rem 2.5rem;
	box-shadow: 0 2px 24px rgba(0,0,0,.06);
}

/* ── Fields ── */
.kd-cf-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.kd-contact-form--single .kd-cf-fields { grid-template-columns: 1fr; }

.kd-cf-row { display: flex; flex-direction: column; gap: .4rem; }

.kd-cf-row--full { grid-column: 1 / -1; }

.kd-cf-row label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--clr-secondary);
}

.kd-cf-row label span { color: var(--clr-primary); }

.kd-cf-input {
	width: 100%;
	padding: .65rem 1rem;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	font-size: .95rem;
	font-family: inherit;
	color: var(--clr-secondary);
	background: #fff;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}

.kd-cf-input:focus {
	border-color: var(--clr-primary);
	box-shadow: 0 0 0 3px rgba(255,167,38,.15);
}

.kd-cf-textarea { resize: vertical; min-height: 120px; }

/* ── Footer / Submit ── */
.kd-cf-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.kd-cf-submit {
	padding: .75rem 2rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s, transform .15s;
}

.kd-cf-submit:hover { opacity: .88; transform: translateY(-1px); }
.kd-cf-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Feedback message ── */
.kd-cf-message {
	font-size: .9rem;
	font-weight: 500;
	padding: .5rem 1rem;
	border-radius: 6px;
}

.kd-cf-message:empty { display: none; }

.kd-cf-message--success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.kd-cf-message--error {
	background: #fdecea;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.kd-cf-fields { grid-template-columns: 1fr; }
	.kd-contact-form-wrap { padding: 1.5rem 1.25rem; }
	.kd-contact-card { flex: 1 1 100%; }
}

/*--------------------------------------------------------------
# Mobile Navigation Drawer (rendered in footer — always on top)
--------------------------------------------------------------*/

/* Overlay */
.kd-mob-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 10000;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.kd-mob-overlay.is-visible { display: block; }

/* Drawer — slides in from left, always above everything */
.kd-mob-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: min(300px, 85vw);
	height: 100dvh;
	height: 100vh;
	background: var(--clr-bg);
	z-index: 10001;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	box-shadow: 4px 0 32px rgba(0,0,0,.2);
	overflow: hidden;
}
.kd-mob-nav.is-open { transform: translateX(0); }
body.kd-mob-open    { overflow: hidden; }

/* Header row */
.kd-mob-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--clr-secondary);
	flex-shrink: 0;
	gap: 12px;
}
.kd-mob-nav__brand img {
	height: 36px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.kd-mob-nav__brand {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
}
.kd-mob-nav__close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--transition);
}
.kd-mob-nav__close:hover { background: rgba(255,255,255,.35); }

/* Nav links */
.kd-mob-nav__body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}
.kd-mob-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.kd-mob-menu-list li {
	border-bottom: 1px solid var(--clr-border);
}
.kd-mob-menu-list li:last-child { border-bottom: none; }
.kd-mob-menu-list a {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--clr-text);
	transition: background var(--transition), color var(--transition);
}
.kd-mob-menu-list a:hover,
.kd-mob-menu-list .current-menu-item > a,
.kd-mob-menu-list .current_page_item > a {
	background: var(--clr-primary-light);
	color: var(--clr-primary);
}

/* Sub-menu */
.kd-mob-menu-list .sub-menu {
	background: var(--clr-bg-light);
}
.kd-mob-menu-list .sub-menu a {
	padding-left: 36px;
	font-size: 14px;
	font-weight: 400;
}

/* Footer links (Account, Cart) */
.kd-mob-nav__footer {
	padding: 14px 18px;
	border-top: 2px solid var(--clr-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--clr-bg-light);
	flex-shrink: 0;
}
.kd-mob-nav__footer-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--clr-text);
	transition: color var(--transition);
}
.kd-mob-nav__footer-link:hover { color: var(--clr-primary); }

/*--------------------------------------------------------------
# Slide Cart Drawer
--------------------------------------------------------------*/

/* Overlay */
.kd-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 9998;
	display: none;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.kd-cart-overlay.is-visible { display: block; }

/* Drawer */
.kd-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 420px;
	height: 100dvh;
	height: 100vh;
	background: var(--clr-bg);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	box-shadow: -6px 0 40px rgba(0,0,0,.14);
}
.kd-cart-drawer.is-open { transform: translateX(0); }
body.kd-cart-open { overflow: hidden; }

/* Header */
.kd-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--clr-border);
	flex-shrink: 0;
}
.kd-cart-drawer__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--clr-text);
}
.kd-cart-badge {
	background: var(--clr-primary);
	color: #fff;
	border-radius: 40px;
	min-width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	padding: 0 6px;
}
.kd-cart-close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-bg-light);
	color: var(--clr-text);
	transition: background var(--transition), color var(--transition);
}
.kd-cart-close:hover { background: var(--clr-primary); color: #fff; }

/* Scrollable body */
.kd-cart-drawer__scroll {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--clr-border) transparent;
}

/* Empty state */
.kd-cart-empty {
	text-align: center;
	padding: 60px 28px;
}
.kd-cart-empty__icon {
	color: var(--clr-border);
	margin-bottom: 16px;
}
.kd-cart-empty__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--clr-text);
	margin-bottom: 6px;
}
.kd-cart-empty__sub {
	font-size: 14px;
	color: var(--clr-text-muted);
	margin-bottom: 24px;
}
.kd-cart-shop-link {
	display: inline-block;
	padding: 12px 28px;
	background: var(--clr-primary);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	transition: background var(--transition);
}
.kd-cart-shop-link:hover { background: var(--clr-primary-dark); color: #fff; }

/* Cart items list */
.kd-cart-items {
	padding: 16px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kd-cart-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--clr-border);
	transition: opacity .2s;
}
.kd-cart-item:last-child { border-bottom: none; padding-bottom: 0; }

.kd-cart-item__thumb {
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--clr-border);
	display: block;
}
.kd-cart-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kd-cart-item__details { flex: 1; min-width: 0; }

.kd-cart-item__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
	margin-bottom: 4px;
}
.kd-cart-item__name:hover { color: var(--clr-primary); }

.kd-cart-item__unit-price {
	font-size: 12px;
	color: var(--clr-text-muted);
	margin-bottom: 8px;
}

.kd-cart-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Quantity control */
.kd-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--clr-border);
	border-radius: 8px;
	overflow: hidden;
}
.kd-qty__btn {
	width: 28px;
	height: 28px;
	background: var(--clr-bg-light);
	color: var(--clr-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
	flex-shrink: 0;
}
.kd-qty__btn:hover { background: var(--clr-primary); color: #fff; }
.kd-qty__val {
	width: 32px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	border-inline: 1px solid var(--clr-border);
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-cart-item__subtotal {
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-primary);
}

.kd-cart-item__remove {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-text-muted);
	transition: color var(--transition), background var(--transition);
}
.kd-cart-item__remove:hover { color: #ef4444; background: #fef2f2; }

/* Coupon section */
.kd-cart-coupon {
	padding: 14px 22px;
	border-top: 1px solid var(--clr-border);
}
.kd-coupon-wrap {
	display: flex;
	gap: 8px;
}
.kd-coupon-input {
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid var(--clr-border);
	border-radius: 8px;
	font-size: 13px;
	outline: none;
	transition: border-color var(--transition);
	min-width: 0;
}
.kd-coupon-input:focus { border-color: var(--clr-primary); }
.kd-coupon-btn {
	padding: 10px 16px;
	background: var(--clr-secondary);
	color: #fff;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition);
	flex-shrink: 0;
}
.kd-coupon-btn:hover { background: var(--clr-primary); }

.kd-coupon-msg {
	font-size: 12px;
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	line-height: 1.4;
	display: none;
}
.kd-coupon-msg:not(:empty) { display: block; }
.kd-coupon-msg--success { color: #15803d; background: #f0fdf4; }
.kd-coupon-msg--error   { color: #b91c1c; background: #fef2f2; }

.kd-applied-coupons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.kd-applied-coupon {
	background: var(--clr-primary-light);
	color: var(--clr-primary-dark);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
}

/* Cart totals area */
.kd-cart-totals {
	padding: 16px 22px 22px;
	border-top: 1px solid var(--clr-border);
	background: var(--clr-bg-light);
}
.kd-cart-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	margin-bottom: 8px;
}
.kd-cart-row--discount { color: #15803d; font-weight: 600; }
.kd-cart-row--subtotal { font-size: 18px; font-weight: 700; color: var(--clr-text); margin-bottom: 6px; }
.kd-subtotal-amount { color: var(--clr-primary); }
.kd-discount-amount { color: #15803d; }

.kd-cart-note {
	font-size: 11px;
	color: var(--clr-text-muted);
	text-align: center;
	margin-bottom: 14px;
}

.kd-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px;
	background: var(--clr-primary);
	color: #fff;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	transition: background var(--transition), transform .15s;
	margin-bottom: 10px;
	text-decoration: none;
}
.kd-checkout-btn:hover { background: var(--clr-primary-dark); color: #fff; transform: translateY(-1px); }

.kd-continue-link {
	display: block;
	text-align: center;
	font-size: 13px;
	color: var(--clr-text-muted);
	padding: 6px;
	transition: color var(--transition);
}
.kd-continue-link:hover { color: var(--clr-primary); }

@media (max-width: 480px) {
	.kd-cart-drawer { max-width: 100%; }
}

/*--------------------------------------------------------------
# Page Header (archive, search, WooCommerce pages)
--------------------------------------------------------------*/
.kd-page-header {
	background: var(--clr-primary-light);
	border-bottom: 3px solid var(--clr-primary);
	padding: 28px 0;
	margin-bottom: 32px;
}
.kd-page-title {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 800;
	color: var(--clr-text);
	margin: 0 0 4px;
}
.kd-page-title span { color: var(--clr-primary); }
.kd-page-desc {
	font-size: 14px;
	color: var(--clr-text-muted);
	margin: 4px 0 0;
}
.kd-archive-wrap { padding-bottom: 48px; }

/*--------------------------------------------------------------
# Post Grid & Card (archive, search)
--------------------------------------------------------------*/
.kd-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 32px;
}

/* Card */
.kd-post-card {
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition);
}
.kd-post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

/* Image */
.kd-post-card__img-link { display: block; overflow: hidden; flex-shrink: 0; }
.kd-post-card__img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.kd-post-card:hover .kd-post-card__img { transform: scale(1.06); }
.kd-post-card__img-placeholder {
	width: 100%;
	height: 200px;
	background: var(--clr-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Body */
.kd-post-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}

.kd-post-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: var(--clr-text-muted);
}
.kd-post-card__cat {
	background: var(--clr-primary);
	color: #fff;
	padding: 2px 8px;
	border-radius: 40px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.kd-post-card__cat:hover { background: var(--clr-primary-dark); color: #fff; }
.kd-post-card__sep { opacity: .4; }
.kd-post-card__date { font-size: 12px; }

.kd-post-card__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kd-post-card__title a { color: var(--clr-text); }
.kd-post-card__title a:hover { color: var(--clr-primary); }

.kd-post-card__excerpt {
	font-size: 13px;
	color: var(--clr-text-muted);
	line-height: 1.6;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kd-post-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clr-primary);
	margin-top: auto;
	padding-top: 6px;
	border-top: 1px solid var(--clr-border);
	transition: gap var(--transition), color var(--transition);
}
.kd-post-card__read-more:hover { gap: 9px; color: var(--clr-primary-dark); }

/*--------------------------------------------------------------
# Pagination (shared)
--------------------------------------------------------------*/
.kd-pagination {
	text-align: center;
	margin-top: 32px;
}
.kd-pagination .nav-links { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kd-pagination a.page-numbers,
.kd-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--clr-text);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.kd-pagination a.page-numbers:hover,
.kd-pagination span.page-numbers.current {
	background: var(--clr-primary);
	border-color: var(--clr-primary);
	color: #fff;
}

/*--------------------------------------------------------------
# No Results
--------------------------------------------------------------*/
.kd-no-results {
	text-align: center;
	padding: 80px 24px;
}
.kd-no-results__icon { font-size: 56px; margin-bottom: 16px; opacity: .5; }
.kd-no-results h2 { font-size: 26px; font-weight: 700; color: var(--clr-text); margin-bottom: 8px; }
.kd-no-results p  { font-size: 15px; color: var(--clr-text-muted); margin-bottom: 24px; }
.kd-no-results__form { max-width: 480px; margin: 0 auto; }

/*--------------------------------------------------------------
# Single Post
--------------------------------------------------------------*/
.kd-single-wrap {
	max-width: 800px;
	margin-inline: auto;
	padding-top: 40px;
	padding-bottom: 60px;
}

.kd-single-post {}

.kd-single-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--clr-text-muted);
	margin-bottom: 16px;
}
.kd-single-meta a { color: var(--clr-primary); font-weight: 600; }
.kd-meta-sep { opacity: .4; }

.kd-single-title {
	font-size: clamp(24px, 4vw, 38px);
	font-weight: 800;
	line-height: 1.25;
	color: var(--clr-text);
	margin-bottom: 28px;
}

.kd-single-thumb {
	margin-bottom: 32px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.kd-single-thumb__img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 480px;
	object-fit: cover;
}

.kd-single-content {
	font-size: 16px;
	line-height: 1.85;
	color: var(--clr-text);
}
.kd-single-content h2,
.kd-single-content h3,
.kd-single-content h4 { margin: 1.5em 0 .6em; }
.kd-single-content p  { margin-bottom: 1.2em; }
.kd-single-content a  { color: var(--clr-primary); text-decoration: underline; }
.kd-single-content img { border-radius: var(--radius-md); }
.kd-single-content blockquote {
	border-left: 4px solid var(--clr-primary);
	background: var(--clr-primary-light);
	padding: 16px 20px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 1.5em 0;
	font-style: italic;
	color: var(--clr-text-muted);
}

.kd-single-tags {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--clr-border);
	font-size: 13px;
	color: var(--clr-text-muted);
}
.kd-single-tags a {
	display: inline-block;
	background: var(--clr-bg-light);
	border: 1px solid var(--clr-border);
	border-radius: 40px;
	padding: 3px 12px;
	margin: 3px;
	color: var(--clr-text);
	font-size: 12px;
	transition: background var(--transition), color var(--transition);
}
.kd-single-tags a:hover { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }

/* Post navigation */
.kd-post-nav {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid var(--clr-border);
}
.kd-post-nav .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kd-post-nav .nav-previous,
.kd-post-nav .nav-next {
	background: var(--clr-bg-light);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	transition: border-color var(--transition), background var(--transition);
}
.kd-post-nav .nav-previous:hover,
.kd-post-nav .nav-next:hover { border-color: var(--clr-primary); background: var(--clr-primary-light); }
.kd-post-nav .nav-next { text-align: right; }
.kd-post-nav a { color: var(--clr-text); }
.kd-post-nav a:hover { color: var(--clr-primary); }
.kd-post-nav__label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--clr-text-muted); margin-bottom: 4px; }
.kd-post-nav__title { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/*--------------------------------------------------------------
# Static Page
--------------------------------------------------------------*/
.kd-page-wrap {
	max-width: 880px;
	margin-inline: auto;
	padding-top: 40px;
	padding-bottom: 60px;
}
.kd-page-article-header { margin-bottom: 32px; }
.kd-page-article-title {
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 800;
	color: var(--clr-text);
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--clr-primary);
}
.kd-page-content {
	font-size: 16px;
	line-height: 1.8;
	color: var(--clr-text);
}
.kd-page-content h2,
.kd-page-content h3 { margin: 1.5em 0 .6em; }
.kd-page-content p  { margin-bottom: 1.2em; }
.kd-page-content a  { color: var(--clr-primary); }

/*--------------------------------------------------------------
# 404 Page
--------------------------------------------------------------*/
.kd-404 {
	text-align: center;
	padding: 80px 24px;
	max-width: 560px;
	margin-inline: auto;
}
.kd-404__number {
	font-size: clamp(80px, 15vw, 140px);
	font-weight: 900;
	color: var(--clr-primary);
	line-height: 1;
	margin-bottom: 16px;
	opacity: .85;
}
.kd-404__title {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	color: var(--clr-text);
	margin-bottom: 12px;
}
.kd-404__desc {
	font-size: 15px;
	color: var(--clr-text-muted);
	margin-bottom: 32px;
	line-height: 1.6;
}
.kd-404__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.kd-404__btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px;
	border-radius: 40px;
	font-size: 15px;
	font-weight: 600;
	transition: all var(--transition);
}
.kd-404__btn--primary { background: var(--clr-primary); color: #fff; }
.kd-404__btn--primary:hover { background: var(--clr-primary-dark); color: #fff; }
.kd-404__btn--outline { border: 2px solid var(--clr-primary); color: var(--clr-primary); }
.kd-404__btn--outline:hover { background: var(--clr-primary); color: #fff; }
.kd-404__search p { font-size: 14px; color: var(--clr-text-muted); margin-bottom: 12px; }

/*--------------------------------------------------------------
# WooCommerce Page Header
# Renders OUTSIDE the .container (priority 5 hook, before container at 10).
# No negative margins needed — element is already full-width.
--------------------------------------------------------------*/
.kd-wc-page-header {
	background: var(--clr-primary-light);
	border-bottom: 3px solid var(--clr-primary);
	padding: 26px var(--container-pad);
	margin: 0;          /* NO negative margins — prevents horizontal scrollbar */
	width: 100%;
	box-sizing: border-box;
}
.kd-wc-page-header__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.kd-wc-page-header__text h1 {
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 800;
	color: var(--clr-text);
	margin: 0 0 4px;
}
.kd-wc-page-desc { font-size: 14px; color: var(--clr-text-muted); margin: 0; }
.kd-wc-page-header .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 13px;
	color: var(--clr-text-muted);
	background: none;
}

.kd-wc-wrap {
	padding-top: 28px;
	padding-bottom: 48px;
}

/*--------------------------------------------------------------
# Archive / Search responsive
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	.kd-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kd-post-grid { grid-template-columns: 1fr; gap: 16px; }
	.kd-post-card__img { height: 200px; }
	.kd-single-wrap, .kd-page-wrap { padding-top: 24px; padding-bottom: 40px; }
	.kd-post-nav .nav-links { grid-template-columns: 1fr; }
}

/*--------------------------------------------------------------
# Toast Notifications
--------------------------------------------------------------*/
#kd-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.kd-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 260px;
	max-width: 360px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0,0,0,.16);
	border-left: 4px solid #ccc;
	pointer-events: all;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .3s ease, transform .3s ease;
}
.kd-toast--visible {
	opacity: 1;
	transform: translateX(0);
}
.kd-toast--success { border-color: #28a745; }
.kd-toast--error   { border-color: #dc3545; }
.kd-toast__icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	color: #fff;
}
.kd-toast--success .kd-toast__icon { background: #28a745; }
.kd-toast--error   .kd-toast__icon { background: #dc3545; }
.kd-toast__msg {
	flex: 1;
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}
.kd-toast__close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: #bbb;
	cursor: pointer;
	padding: 0 2px;
	flex-shrink: 0;
	transition: color .15s;
}
.kd-toast__close:hover { color: #555; }

/* Add-to-cart button loading spinner */
@keyframes kd-spin { to { transform: translateY(-50%) rotate(360deg); } }
.single_add_to_cart_button.loading {
	opacity: .75;
	cursor: wait;
	pointer-events: none;
	position: relative;
	padding-right: 48px !important;
}
.single_add_to_cart_button.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: kd-spin .65s linear infinite;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
}