/**
 * Kashmir Nuts & Berries — Next-Level Reusable UI Components
 * Buttons · Cards · Badges · Stats · Toast · Dividers
 * Palette: Beige · Brown · Purple · Chocolate Brown
 */

/* ════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════ */

.knb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.125rem;
	padding: 0 2rem;
	border: 1.5px solid transparent;
	border-radius: var(--knb-radius-pill);
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-sm);
	font-weight: var(--knb-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--knb-duration) var(--knb-ease-out),
		box-shadow var(--knb-duration) var(--knb-ease-out),
		background var(--knb-duration) var(--knb-ease-out),
		border-color var(--knb-duration-fast) ease,
		color var(--knb-duration-fast) ease;
	will-change: transform;
}

.knb-btn:focus-visible {
	outline: 2px solid var(--knb-purple);
	outline-offset: 3px;
}

/* Primary — Royal Kashmir Purple fill with Gold & Purple glow */
.knb-btn--primary {
	background: var(--knb-purple);
	color: var(--knb-cream);
	box-shadow: var(--knb-shadow-purple);
}

.knb-btn--primary:hover {
	transform: translateY(-2px);
	background: var(--knb-purple-dark);
	color: var(--knb-cream);
	box-shadow:
		0 8px 32px rgba(var(--knb-purple-rgb), 0.45),
		var(--knb-shadow-glow);
}

.knb-btn--primary:active {
	transform: translateY(0);
	box-shadow: var(--knb-shadow-sm);
}

/* Secondary — Deep Chocolate Brown outlined / glass */
.knb-btn--secondary {
	background: transparent;
	color: var(--knb-chocolate-brown);
	border-color: rgba(var(--knb-chocolate-rgb), 0.35);
}

.knb-btn--secondary:hover {
	transform: translateY(-2px);
	background: rgba(247, 243, 235, 0.85);
	border-color: var(--knb-purple);
	color: var(--knb-purple);
	box-shadow: var(--knb-shadow-sm);
}

.knb-btn--secondary:active {
	transform: translateY(0);
}

/* Chocolate Variant — Deep Dark Chocolate Solid Button */
.knb-btn--chocolate {
	background: var(--knb-grad-chocolate);
	color: var(--knb-cream);
	box-shadow: var(--knb-shadow-chocolate);
}

.knb-btn--chocolate:hover {
	transform: translateY(-2px);
	background: var(--knb-chocolate-abyss);
	color: var(--knb-cream);
	border-color: rgba(var(--knb-purple-rgb), 0.4);
	box-shadow:
		0 10px 36px rgba(35, 21, 18, 0.5),
		var(--knb-shadow-glow);
}

/* Brown Variant — Rich Walnut Brown */
.knb-btn--brown {
	background: var(--knb-grad-brown);
	color: var(--knb-cream);
	box-shadow: var(--knb-shadow-sm);
}

.knb-btn--brown:hover {
	transform: translateY(-2px);
	background: var(--knb-brown-warm);
	box-shadow: var(--knb-shadow-md);
}

/* Ghost — compact, light linen fill */
.knb-btn--ghost {
	min-height: 2.375rem;
	padding: 0 1.125rem;
	font-size: var(--knb-text-xs);
	background: var(--knb-off-white);
	color: var(--knb-chocolate-brown);
	border-color: rgba(var(--knb-brown-rgb), 0.18);
}

.knb-btn--ghost:hover {
	background: var(--knb-purple);
	color: var(--knb-cream);
	border-color: var(--knb-purple);
}

/* Purple variant */
.knb-btn--forest,
.knb-btn--purple {
	background: var(--knb-grad-purple);
	color: var(--knb-cream);
	box-shadow: var(--knb-shadow-purple);
}

.knb-btn--forest:hover,
.knb-btn--purple:hover {
	transform: translateY(-2px);
	background: var(--knb-purple-mid);
	box-shadow:
		0 8px 32px rgba(var(--knb-purple-rgb), 0.4),
		var(--knb-shadow-glow);
}

/* Gold accent */
.knb-btn--gold {
	background: var(--knb-grad-sunrise);
	color: var(--knb-chocolate-brown);
	font-weight: var(--knb-weight-semibold);
	box-shadow: var(--knb-shadow-sm);
}

.knb-btn--gold:hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 32px rgba(var(--knb-gold-rgb), 0.4),
		var(--knb-shadow-glow);
}

/* Icon-only variant */
.knb-btn--icon {
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	border-radius: 50%;
}

/* ════════════════════════════════════════════════════
   TEXT COMPONENTS
   ════════════════════════════════════════════════════ */

.knb-eyebrow {
	display: block;
	margin-bottom: var(--knb-space-sm);
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-xs);
	font-weight: var(--knb-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--knb-purple);
}

.knb-heading {
	margin: 0 0 var(--knb-space-md);
	font-family: var(--knb-font-serif);
	font-weight: var(--knb-weight-medium);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--knb-chocolate-brown);
}

.knb-heading--xl {
	font-size: var(--knb-text-3xl);
}

.knb-heading--lg {
	font-size: var(--knb-text-2xl);
}

.knb-heading--md {
	font-size: var(--knb-text-xl);
}

.knb-lead {
	max-width: 38ch;
	margin: 0;
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-lg);
	line-height: 1.65;
	color: rgba(var(--knb-chocolate-rgb), 0.78);
}

.knb-section-label {
	position: absolute;
	top: var(--knb-space-lg);
	left: var(--knb-space-lg);
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-xs);
	font-weight: var(--knb-weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--knb-chocolate-rgb), 0.45);
	z-index: 2;
}

/* ════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════ */

.knb-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--knb-radius-pill);
	font-family: var(--knb-font-sans);
	font-size: 0.6875rem;
	font-weight: var(--knb-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.knb-badge--new {
	background: var(--knb-purple);
	color: var(--knb-cream);
}

.knb-badge--bestseller {
	background: var(--knb-grad-sunrise);
	color: var(--knb-chocolate-brown);
}

.knb-badge--chocolate {
	background: var(--knb-chocolate-brown);
	color: var(--knb-cream);
}

.knb-badge--brown {
	background: var(--knb-brown);
	color: var(--knb-cream);
}

.knb-badge--sale {
	background: #c93b2b;
	color: #fff;
}

.knb-badge--organic {
	background: rgba(var(--knb-purple-rgb), 0.1);
	color: var(--knb-purple);
	border: 1px solid rgba(var(--knb-purple-rgb), 0.22);
}

/* ════════════════════════════════════════════════════
   PRODUCT CARD
   ════════════════════════════════════════════════════ */

.knb-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--knb-radius);
	background: var(--knb-off-white);
	border: 1px solid rgba(var(--knb-chocolate-rgb), 0.08);
	box-shadow: var(--knb-shadow-sm);
	overflow: hidden;
	transform-style: preserve-3d;
	transition:
		transform var(--knb-duration) var(--knb-ease-out),
		box-shadow var(--knb-duration) var(--knb-ease-out),
		border-color var(--knb-duration-fast) ease;
}

.knb-product-card:hover {
	box-shadow: var(--knb-shadow-md);
	border-color: rgba(var(--knb-purple-rgb), 0.3);
}

.knb-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--knb-stone);
}

.knb-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--knb-duration-slow) var(--knb-ease-out);
}

.knb-product-card:hover .knb-product-card__img {
	transform: scale(1.06);
}

.knb-product-card__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.24) 0%,
		transparent 55%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--knb-duration) var(--knb-ease-out);
}

.knb-product-card:hover .knb-product-card__shine {
	opacity: 1;
}

.knb-product-card .knb-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
}

.knb-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.375rem 1.375rem 1.625rem;
}

.knb-product-card__title {
	margin: 0;
	font-family: var(--knb-font-serif);
	font-size: var(--knb-text-xl);
	font-weight: var(--knb-weight-medium);
	line-height: 1.2;
	color: var(--knb-chocolate-brown);
}

.knb-product-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--knb-duration-fast) ease;
}

.knb-product-card__title a:hover {
	color: var(--knb-purple);
}

.knb-product-card__excerpt {
	margin: 0;
	font-size: var(--knb-text-sm);
	line-height: 1.55;
	color: rgba(var(--knb-chocolate-rgb), 0.68);
}

.knb-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
}

.knb-product-card__price {
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-base);
	font-weight: var(--knb-weight-semibold);
	color: var(--knb-purple);
}

.knb-product-card__price del {
	opacity: 0.45;
	font-weight: var(--knb-weight-regular);
	text-decoration: line-through;
}

.knb-product-card__price ins {
	text-decoration: none;
	color: #c93b2b;
	font-weight: var(--knb-weight-semibold);
}

/* ════════════════════════════════════════════════════
   STATS
   ════════════════════════════════════════════════════ */

.knb-stat {
	text-align: center;
}

.knb-stat__value {
	display: block;
	font-family: var(--knb-font-serif);
	font-size: var(--knb-text-2xl);
	font-weight: var(--knb-weight-semibold);
	color: var(--knb-cream);
	line-height: 1;
}

.knb-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--knb-cream-rgb), 0.6);
}

/* ════════════════════════════════════════════════════
   DECORATIVE DIVIDER
   ════════════════════════════════════════════════════ */

.knb-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: var(--knb-space-xl) auto;
	max-width: 220px;
}

.knb-divider::before,
.knb-divider::after {
	content: "";
	flex: 1;
	height: 1.5px;
	background: linear-gradient(
		to var(--dir, right),
		transparent,
		rgba(var(--knb-purple-rgb), 0.35)
	);
}

.knb-divider::after {
	--dir: left;
}

.knb-divider__ornament {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--knb-gold);
	box-shadow: 0 0 10px rgba(var(--knb-purple-rgb), 0.3);
	flex-shrink: 0;
}

/* ════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ════════════════════════════════════════════════════ */

.knb-toast {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.9375rem 1.375rem;
	border-radius: var(--knb-radius-sm);
	background: var(--knb-chocolate-brown);
	color: var(--knb-cream);
	font-family: var(--knb-font-sans);
	font-size: var(--knb-text-sm);
	font-weight: var(--knb-weight-medium);
	box-shadow: var(--knb-shadow-chocolate);
	border: 1px solid rgba(var(--knb-purple-rgb), 0.3);
	opacity: 0;
	transform: translateX(20px);
	transition:
		opacity var(--knb-duration) var(--knb-ease-out),
		transform var(--knb-duration) var(--knb-ease-out);
	z-index: 9999;
	pointer-events: none;
}

.knb-toast.is-visible {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.knb-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--knb-purple);
	flex-shrink: 0;
}

.knb-toast__icon::after {
	content: "✓";
	font-size: 0.75rem;
	color: var(--knb-cream);
}

/* ════════════════════════════════════════════════════
   STORY & RECIPE CARD IMAGES
   ════════════════════════════════════════════════════ */

.knb-story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--knb-off-white);
	border: 1px solid rgba(var(--knb-chocolate-rgb), 0.08);
	border-radius: var(--knb-radius);
	overflow: hidden;
	transition: transform var(--knb-duration) var(--knb-ease-out), box-shadow var(--knb-duration) var(--knb-ease-out);
}

.knb-story-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--knb-shadow-md);
	border-color: rgba(var(--knb-purple-rgb), 0.3);
}

.knb-story-card__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.knb-story-card__body {
	padding: 1.5rem;
}

.knb-recipe-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--knb-off-white);
	border: 1px solid rgba(var(--knb-chocolate-rgb), 0.08);
	border-radius: var(--knb-radius);
	overflow: hidden;
	transition: transform var(--knb-duration) var(--knb-ease-out), box-shadow var(--knb-duration) var(--knb-ease-out);
}

.knb-recipe-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--knb-shadow-md);
	border-color: rgba(var(--knb-purple-rgb), 0.3);
}

.knb-recipe-card__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.knb-recipe-card__body {
	padding: 1.5rem;
}

.knb-testimonial__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1rem;
	border: 2px solid var(--knb-purple);
	box-shadow: 0 4px 12px rgba(var(--knb-purple-rgb), 0.2);
}

/* ════════════════════════════════════════════════════
   SITE-WIDE NON-SQUARE ULTRA-SMOOTH ROUNDED DESIGN SYSTEM
   ════════════════════════════════════════════════════ */

/* 1. All Product Cards & WoodMart Grid Items */
.knb-product-card,
.product-grid-item,
.product-grid-item .product-element-top,
.product-grid-item .product-image-link,
.product-grid-item .wd-product,
article.product,
.wd-hover-starter,
.wd-hover-quick {
	border-radius: var(--knb-radius) !important;
	overflow: hidden !important;
}

.knb-product-card__media,
.product-grid-item .product-element-top {
	border-radius: calc(var(--knb-radius) - 6px) !important;
	margin: 6px 6px 0 6px !important;
	overflow: hidden !important;
}

.knb-product-card__img,
.product-grid-item img {
	border-radius: calc(var(--knb-radius) - 6px) !important;
}

/* 2. Showcase Slides, Recipe Cards, Story Cards */
.knb-showcase__slide,
.knb-showcase__slide img,
.knb-recipe-card,
.knb-recipe-card__img,
.knb-story-card,
.knb-story-card__img,
.knb-testimonial {
	border-radius: var(--knb-radius) !important;
	overflow: hidden !important;
}

/* 3. All Buttons, CTAs, and Quick Add Actions */
.knb-btn,
.btn,
.button,
button,
input[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button,
.knb-quick-add,
.wd-btn,
.wd-buy-now-btn {
	border-radius: var(--knb-radius-pill) !important;
}

/* 4. Form Inputs, Selects, and Search Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control,
.search-field,
.wd-search-cat {
	border-radius: var(--knb-radius-sm) !important;
}

/* 5. Drawers, Popups, Sidebars, and Floating Shells */
.wd-drawer,
.wd-popup,
.mfp-content,
.cart-widget-side,
.woodmart-shopping-cart,
.offcanvas-sidebar {
	border-radius: var(--knb-radius-lg) !important;
}

/* 6. Badges, Chips, Labels */
.knb-badge,
.product-label,
.onsale,
.wd-label,
.knb-eyebrow-chip {
	border-radius: var(--knb-radius-pill) !important;
}

/* ════════════════════════════════════════════════════
   FOUNDER CARD — Expanded Luxury Component
   ════════════════════════════════════════════════════ */

.knb-founder-card {
	position: relative;
	margin-top: 1.25rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(var(--knb-purple-rgb), 0.08) 0%, rgba(var(--knb-chocolate-rgb), 0.04) 100%);
	border: 1px solid rgba(var(--knb-purple-rgb), 0.22);
	border-radius: var(--knb-radius);
	box-shadow: 0 8px 24px rgba(var(--knb-chocolate-rgb), 0.07);
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	max-width: 420px;
	transition: all 300ms ease;
}

.knb-founder-card:hover {
	border-color: rgba(var(--knb-purple-rgb), 0.4);
	box-shadow: 0 12px 32px rgba(var(--knb-purple-rgb), 0.16);
	transform: translateY(-2px);
}

.knb-founder-card__header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.knb-founder-card__avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.knb-founder-card__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 15%;
	border: 3px solid var(--knb-gold);
	outline: 2px solid rgba(var(--knb-purple-rgb), 0.25);
	outline-offset: 2px;
	box-shadow: 0 6px 20px rgba(var(--knb-purple-rgb), 0.35);
	display: block;
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.knb-founder-card:hover .knb-founder-card__avatar {
	transform: scale(1.04);
	box-shadow: 0 8px 25px rgba(var(--knb-purple-rgb), 0.45);
}

.knb-founder-card__badge {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--knb-purple);
	font-weight: 800;
	margin-bottom: 0.25rem;
}

.knb-founder-card__name {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--knb-chocolate-brown);
	font-family: var(--knb-font-serif);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 2px rgba(var(--knb-chocolate-rgb), 0.08);
}

.knb-founder-card__bio {
	margin: 0;
	font-size: var(--knb-text-xs);
	line-height: 1.65;
	color: rgba(var(--knb-chocolate-rgb), 0.85);
	font-style: italic;
}

.knb-founder-card__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--knb-purple-rgb), 0.12);
}

.knb-founder-card__social-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--knb-radius-pill);
	background: var(--knb-purple);
	color: var(--knb-cream);
	font-size: var(--knb-text-xs);
	font-weight: 600;
	text-decoration: none;
	transition: all 250ms ease;
	box-shadow: 0 3px 10px rgba(var(--knb-purple-rgb), 0.25);
}

.knb-founder-card__social-btn:hover {
	background: var(--knb-purple-dark);
	color: var(--knb-cream);
	transform: translateY(-1.5px);
	box-shadow: 0 6px 16px rgba(var(--knb-purple-rgb), 0.35);
}

.knb-founder-card__avatar {
	width: 115px !important;
	height: 145px !important;
	border-radius: 14px !important;
	object-fit: cover !important;
	object-position: center 15% !important;
	border: 2px solid var(--knb-gold) !important;
	box-shadow: 0 8px 24px rgba(76, 28, 70, 0.22) !important;
	display: block !important;
}

.knb-social-btn-avatar {
	width: 22px !important;
	height: 22px !important;
	border-radius: 5px !important;
	object-fit: cover !important;
	object-position: center 15% !important;
	border: 1px solid var(--knb-gold) !important;
	flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════
   HOMEPAGE CATEGORIES GRID STYLING
   ════════════════════════════════════════════════════ */

.knb-category-card {
	transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.knb-category-card:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--knb-purple-rgb), 0.35) !important;
	box-shadow: 0 14px 36px rgba(var(--knb-purple-rgb), 0.12) !important;
}

.knb-category-card:hover img {
	transform: scale(1.08);
	transition: transform 400ms ease;
}