/* ─────────────────────────────────────────────────────────────────
   Kavindi brand layer. Loaded after the Livora stylesheets, it swaps
   the theme's palette and type for the navy + gold of the Kavindi logo
   so every page picks up the brand without per-page rewrites.
   ───────────────────────────────────────────────────────────────── */

:root {
	--navy: #012035;
	--navy-deep: #011827;
	--gold: #D4C580;
	--gold-light: #EBE29F;
	--gold-deep: #B8995A;
	--gold-grad: linear-gradient(100deg, #B8995A 0%, #EBE29F 45%, #C9AD6E 100%);
	--display-font: 'Marcellus', Georgia, serif;
	--italic-font: 'Cormorant Garamond', Georgia, serif;

	/* Livora variables, re-pointed at the brand */
	--primary-color: #012035;
	--secondary-color: #F7F3EA;
	--bg-color: #FCFAF5;
	--text-color: #3d4652;
	--accent-color: #B8995A;
	--divider-color: rgba(1, 32, 53, .12);
	--dark-divider-color: rgba(212, 197, 128, .2);
}

body { font-size: 15.5px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display-font);
	font-weight: 400;
	letter-spacing: .01em;
}

em.gold {
	font-family: var(--italic-font);
	font-style: italic;
	background: var(--gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-right: .06em;
}

/* Buttons: navy pill with bold uppercase label */
.btn-default {
	background: var(--navy);
	color: #fff;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: 0 12px 28px -16px rgba(1, 32, 53, .7);
}
.btn-default::before { background-color: var(--gold-light); background-image: url('../images/arrow-primary.svg'); }
.btn-default::after { background: #0b3a5c; }
.btn-default:hover { color: #fff; }
.btn-default.btn-highlighted:hover { color: #fff; }
.btn-default.btn-highlighted::after { background-color: #0b3a5c; }
.dark-section .btn-default { box-shadow: inset 0 0 0 1px var(--gold); }

.readmore-btn { font-weight: 700; letter-spacing: .04em; }

/* Section eyebrows */
.section-title .section-sub-title {
	color: var(--gold-deep);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
}
.dark-section .section-title .section-sub-title { color: var(--gold); }

/* Dark bands and the inner-page banner take the logo's navy */
.page-header { padding: 110px 0; }
.page-header::before { opacity: 72%; }
.page-header-box h1 { font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); }
.page-header .breadcrumb-item.active { color: var(--gold-light); }

/* One field style across contact, sign-in, account and checkout forms */
.form-control, .form-select {
	min-height: 50px; padding: 12px 16px;
	border: 1px solid rgba(1, 32, 53, .18); border-radius: 12px; background-color: #fff;
	font-size: 15px; color: var(--navy); box-shadow: none;
	transition: border-color .25s, box-shadow .25s;
}
textarea.form-control { min-height: 110px; line-height: 1.6; }
.form-control::placeholder { color: #9aa1a9; }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(184, 153, 90, .16); }

/* Prices and highlights */
.product-item-price h3, .product-item-price h3 span { font-family: var(--display-font); }

::selection { background: var(--gold-light); color: var(--navy); }

/* Links: Bootstrap's default blue never matches the brand. Titles inherit
   their heading colour; plain links are navy and warm to gold on hover. */
a { color: var(--navy); }
a:hover { color: var(--gold-deep); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--gold-deep); }

/* Page banner on phones: smaller title and breadcrumb so long article
   titles don't fill the screen. */
@media (max-width: 575px) {
	.page-header { padding: 64px 0; }
	.page-header-box h1 { font-size: 28px; line-height: 1.15; }
	.page-header .breadcrumb { font-size: 12.5px; justify-content: center; flex-wrap: wrap; row-gap: 2px; }
	.page-header .breadcrumb-item.active { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}