/* ==========================================================================
   Core reusable components — Makhaana premium snack brand
   ========================================================================== */

:root {
	--mk-ring: var(--mk-brand-soft);
}

/* --------------------------------------------------------------------------
   Buttons — pill shaped, used on <button> and <a>
   -------------------------------------------------------------------------- */

.mk-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--mk-radius-pill);
	font-family: var(--mk-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.mk-btn:focus-visible {
	outline: 2px solid var(--mk-ring, var(--mk-brand-soft));
	outline-offset: 2px;
}

.mk-btn:active {
	transform: translateY(1px);
}

.mk-btn--primary {
	background-color: var(--mk-brand);
	border-color: var(--mk-brand);
	color: var(--mk-white);
}

.mk-btn--primary:hover {
	background-color: var(--mk-brand);
	border-color: var(--mk-brand);
	color: var(--mk-white);
	box-shadow: var(--mk-shadow-btn);
}

.mk-btn--ghost {
	background-color: var(--mk-white);
	border-color: var(--mk-border-brand);
	color: var(--mk-brand);
}

.mk-btn--ghost:hover {
	background-color: var(--mk-brand);
	border-color: var(--mk-brand);
	color: var(--mk-white);
}

/* Smaller variant — used on product cards */
.mk-btn--sm {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	gap: 0.35rem;
}

.mk-btn--sm.mk-btn--primary:hover {
	background-color: var(--mk-brand-soft);
	border-color: var(--mk-brand-soft);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Badges — small pill labels, absolute-friendly for card overlays
   -------------------------------------------------------------------------- */

.mk-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--mk-radius-pill);
	font-family: var(--mk-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.mk-badge--flag {
	background-color: var(--mk-brand);
	color: var(--mk-white);
}

.mk-badge--sale {
	background-color: var(--mk-butter);
	color: var(--mk-brand);
}

/* --------------------------------------------------------------------------
   Card — white surface with soft elevation
   -------------------------------------------------------------------------- */

.mk-card {
	position: relative;
	background-color: var(--mk-white);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-card);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pill — cream chip used for product benefit callouts
   -------------------------------------------------------------------------- */

.mk-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	background-color: var(--mk-cream);
	color: var(--mk-brand);
	border-radius: var(--mk-radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Rating — inline star + review count
   -------------------------------------------------------------------------- */

.mk-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--mk-muted);
}

.mk-rating__star,
.mk-rating svg {
	color: #eab308;
	fill: #eab308;
}

.mk-rating__count {
	color: var(--mk-muted);
}

/* --------------------------------------------------------------------------
   Eyebrow — small caps label above headings
   -------------------------------------------------------------------------- */

.mk-eyebrow {
	display: inline-block;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mk-brand-soft);
}

/* --------------------------------------------------------------------------
   Price
   -------------------------------------------------------------------------- */

.mk-price {
	font-family: var(--mk-font-heading);
	font-weight: 700;
	color: var(--mk-brand);
}

.mk-price__old {
	margin-inline-start: var(--mk-space-2);
	font-family: var(--mk-font-body);
	font-weight: 400;
	font-size: 0.875em;
	color: var(--mk-muted);
	text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   Input
   -------------------------------------------------------------------------- */

.mk-input {
	display: block;
	width: 100%;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-radius-pill);
	font-family: var(--mk-font-body);
	font-size: 1rem;
	color: var(--mk-ink);
	background-color: var(--mk-white);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.mk-input:focus-visible,
.mk-input:focus {
	outline: none;
	border-color: var(--mk-brand);
	box-shadow: 0 0 0 3px var(--mk-ring, var(--mk-brand-soft));
}