/**
 * Kaally Bundle & Save — kbs.css  (v1.0.0)
 *
 * Enqueued conditionally: only on configured single-product pages and
 * cart/checkout. Never loads site-wide.
 *
 * LiteSpeed / QUIC.cloud note:
 * These styles may be stripped by UCSS for logged-out visitors.
 * The critical subset is also printed inline via kbs_print_inline_styles()
 * in the main plugin file, which survives UCSS. This stylesheet is a
 * progressive enhancement for browsers that receive it.
 *
 * ALWAYS test incognito (guest) + "Purge All" in LiteSpeed after any deploy.
 *
 * Brand tokens:
 *   mauve    #6B5A5B  (primary accent)
 *   cream    #F7F1E8  (background warmth)
 *   brown    #5D4A3A  (headings / dark text)
 *   mid-brown #7a6060 (secondary text)
 *   light border #e8ddd4
 */

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.kbs-tier-wrap {
	margin: 1.25rem 0 1rem;
	font-family: Lato, sans-serif;
}

/* ── Section heading ────────────────────────────────────────────────────── */
.kbs-tier-heading {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-size: .95rem;
	color: #5D4A3A;
	margin: 0 0 .6rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ── Table container ────────────────────────────────────────────────────── */
.kbs-tier-table {
	border: 1.5px solid #e8ddd4;
	border-radius: 10px;
	overflow: hidden;
}

/* ── Row grid: qty | price/unit | saving | badge ────────────────────────── */
.kbs-tier-row {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr 1.5fr;
	align-items: center;
	padding: .65rem .9rem;
	gap: .4rem;
	cursor: pointer;
	transition: background .15s ease;
}

/* Single-unit reference row (no discount) */
.kbs-tier-row--single {
	cursor: default;
	background: #faf7f4;
	color: #888;
	font-size: .82rem;
}

/* Divider between rows */
.kbs-tier-row:not(.kbs-tier-row--single) {
	border-top: 1px solid #f0e8e0;
}

/* Hover / focus (keyboard accessible) */
.kbs-tier-row:not(.kbs-tier-row--single):hover,
.kbs-tier-row:not(.kbs-tier-row--single):focus {
	background: #f5ede8;
	outline: none;
}

/* "Most popular" row gets a warm tint */
.kbs-tier-row--popular {
	background: #fdf6f0;
}

/* Active / clicked row — left accent bar */
.kbs-tier-row--active {
	background: #f0e6e0;
	box-shadow: inset 3px 0 0 #6B5A5B;
}

/* ── Cell text styles ───────────────────────────────────────────────────── */
.kbs-tier-qty {
	font-weight: 700;
	color: #3d2d2e;
	font-size: .9rem;
}

.kbs-tier-ppunit {
	color: #3d2d2e;
	font-size: .88rem;
}

.kbs-tier-saving {
	color: #6B5A5B;
	font-weight: 700;
	font-size: .88rem;
}

.kbs-tier-badge {
	text-align: right;
}

/* ── "Most popular" pill badge ──────────────────────────────────────────── */
.kbs-badge {
	display: inline-block;
	background: #6B5A5B;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	padding: .15rem .5rem;
	border-radius: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── On-sale notice ─────────────────────────────────────────────────────── */
.kbs-on-sale-note {
	font-size: .82rem;
	color: #888;
	margin: .3rem 0;
}

/* ── Engraving nudge line ───────────────────────────────────────────────── */
.kbs-engraving-nudge {
	margin: .85rem 0 0;
	font-size: .82rem;
	color: #7a6060;
	line-height: 1.5;
}

.kbs-nudge-icon {
	margin-right: .3rem;
	font-style: normal;
}

/* ── Mobile — 480 px breakpoint ─────────────────────────────────────────── */
@media (max-width: 480px) {
	.kbs-tier-row {
		grid-template-columns: 1.8fr 1.8fr 1.8fr 1.2fr;
		padding: .6rem .7rem;
		gap: .25rem;
	}

	.kbs-tier-qty,
	.kbs-tier-ppunit,
	.kbs-tier-saving {
		font-size: .8rem;
	}

	.kbs-badge {
		font-size: .62rem;
		padding: .12rem .4rem;
	}
}

/* ── Mobile — very narrow (360 px) — two-column layout ─────────────────── */
@media (max-width: 360px) {
	.kbs-tier-row {
		grid-template-columns: 1fr 1fr;
		row-gap: .2rem;
	}

	.kbs-tier-qty   { grid-column: 1; font-size: .82rem; }
	.kbs-tier-ppunit { grid-column: 2; font-size: .78rem; text-align: right; }
	.kbs-tier-saving { grid-column: 1; font-size: .78rem; }
	.kbs-tier-badge  { grid-column: 2; text-align: right; }
}