/* ==========================================================================
   Kassab's — Base: reset, tipografia, botões, header, rodapé, flutuantes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset e base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--k-header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body.kassabs {
	margin: 0;
	background: var(--k-bg);
	color: var(--k-text);
	font-family: var(--k-font-body);
	font-size: var(--k-fs-base);
	line-height: var(--k-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.kassabs img,
.kassabs video { max-width: 100%; height: auto; display: block; }

/* SVG fica fora da regra acima de propósito: um <svg> só com viewBox é um
   elemento substituído — com height:auto ele estica até a largura do
   contêiner. Este tamanho padrão é o piso; cada componente define o seu. */
.kassabs svg {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.kassabs h1, .kassabs h2, .kassabs h3,
.kassabs h4, .kassabs h5, .kassabs h6 {
	font-family: var(--k-font-display);
	font-weight: 700;
	line-height: var(--k-lh-tight);
	letter-spacing: var(--k-ls-tight);
	margin: 0 0 var(--k-space-4);
	text-wrap: balance;
}

.kassabs p { margin: 0 0 var(--k-space-4); }
.kassabs p:last-child { margin-bottom: 0; }

/* :where() zera a especificidade do seletor, então qualquer componente
   (.k-btn, .k-wa, .k-item__link…) sobrescreve esta cor base sem precisar
   de !important nem de seletores aninhados. */
.kassabs :where(a) { color: var(--k-accent-soft); text-decoration: none; transition: color var(--k-dur-sm) var(--k-ease); }
.kassabs :where(a):hover { color: var(--k-gold-200); }

.kassabs ul, .kassabs ol { margin: 0 0 var(--k-space-4); padding-left: 1.25rem; }

.kassabs :focus-visible {
	outline: 2px solid var(--k-gold-200);
	outline-offset: 3px;
	border-radius: 4px;
}

.kassabs ::selection { background: var(--k-red-400); color: #fff; }

/* Acessibilidade: pular para o conteúdo */
.k-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--k-z-overlay);
	padding: 12px 20px;
	background: var(--k-gold-400);
	color: var(--k-ink-900);
	font-weight: 700;
	border-radius: 0 0 var(--k-radius-sm) 0;
}
.k-skip:focus { left: 0; }

.k-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.k-container {
	width: 100%;
	max-width: var(--k-container);
	margin-inline: auto;
	padding-inline: var(--k-container-pad);
}
.k-container--wide { max-width: var(--k-container-wide); }
.k-container--narrow { max-width: 820px; }

.k-section {
	position: relative;
	padding-block: var(--k-section-y);
}
.k-section--tight { padding-block: calc(var(--k-section-y) * .6); }
.k-section--alt { background: var(--k-bg-alt); }
.k-section--wine {
	background:
		radial-gradient(120% 90% at 50% 0%, var(--k-wine-700) 0%, transparent 60%),
		var(--k-ink-800);
}

/* Fio dourado de separação */
.k-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--k-gold-500), transparent);
	opacity: .5;
}

/* --------------------------------------------------------------------------
   3. Tipografia de apoio
   -------------------------------------------------------------------------- */

.k-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--k-font-body);
	font-size: var(--k-fs-xs);
	font-weight: 600;
	letter-spacing: var(--k-ls-wide);
	text-transform: uppercase;
	color: var(--k-gold-300);
	margin-bottom: var(--k-space-4);
}
.k-eyebrow::before {
	content: "";
	width: 28px; height: 1px;
	background: currentColor;
	opacity: .7;
}

.k-title    { font-size: var(--k-fs-2xl); }
.k-title-lg { font-size: var(--k-fs-3xl); }
.k-title-sm { font-size: var(--k-fs-xl); }

.k-lead {
	font-size: var(--k-fs-md);
	color: var(--k-text-soft);
	max-width: 62ch;
	text-wrap: pretty;
}

.k-gold {
	background: var(--k-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.k-red { color: var(--k-red-300); }

.k-center { text-align: center; }
.k-center .k-lead { margin-inline: auto; }
.k-center .k-eyebrow::before { display: none; }

.k-head { margin-bottom: var(--k-space-7); }

/* --------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */

.k-btn {
	--btn-bg: var(--k-surface);
	--btn-fg: var(--k-text);
	--btn-bd: var(--k-line);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.6rem;
	min-height: 52px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--k-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--k-font-body);
	font-size: var(--k-fs-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--k-dur-sm) var(--k-ease),
	            box-shadow var(--k-dur-sm) var(--k-ease),
	            background var(--k-dur-sm) var(--k-ease),
	            color var(--k-dur-sm) var(--k-ease),
	            border-color var(--k-dur-sm) var(--k-ease);
}
.k-btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.k-btn:active { transform: translateY(0); }

.k-btn svg { width: 18px; height: 18px; }

.k-btn--gold {
	--btn-bg: var(--k-gold-grad);
	--btn-fg: var(--k-ink-900);
	--btn-bd: transparent;
	box-shadow: var(--k-glow-gold);
}
.k-btn--gold:hover { box-shadow: 0 16px 46px rgba(200, 149, 43, .42); color: var(--k-ink-900); }

.k-btn--red {
	--btn-bg: var(--k-red-grad);
	--btn-fg: #fff;
	--btn-bd: transparent;
	box-shadow: var(--k-glow-red);
}
.k-btn--red:hover { box-shadow: 0 16px 46px rgba(214, 19, 19, .45); color: #fff; }

.k-btn--wa {
	--btn-bg: #1FAE54;
	--btn-fg: #fff;
	--btn-bd: transparent;
	box-shadow: 0 10px 34px rgba(31, 174, 84, .3);
}
.k-btn--wa:hover { --btn-bg: #17984a; color: #fff; }

.k-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--k-text);
	--btn-bd: rgba(248, 243, 233, .28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.k-btn--ghost:hover { --btn-bd: var(--k-gold-300); --btn-fg: var(--k-gold-200); }

.k-btn--sm { min-height: 42px; padding: .6rem 1.1rem; font-size: var(--k-fs-xs); }
.k-btn--lg { min-height: 60px; padding: 1.1rem 2.1rem; font-size: var(--k-fs-base); }
.k-btn--block { display: flex; width: 100%; }

.k-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-space-3);
}
.k-center .k-btns { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Selos e chips
   -------------------------------------------------------------------------- */

.k-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .9rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-pill);
	background: rgba(248, 243, 233, .05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: var(--k-fs-xs);
	font-weight: 600;
	color: var(--k-text);
}
.k-badge > svg { width: 15px; height: 15px; color: var(--k-gold-300); }

.k-stars { display: inline-flex; gap: 2px; color: var(--k-gold-300); }
.k-stars svg { width: 14px; height: 14px; }

.k-chip {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.1rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-pill);
	background: transparent;
	color: var(--k-text-soft);
	font-family: var(--k-font-body);
	font-size: var(--k-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--k-dur-sm) var(--k-ease);
}
.k-chip:hover { border-color: var(--k-gold-400); color: var(--k-text); }
.k-chip[aria-pressed="true"] {
	background: var(--k-gold-grad);
	border-color: transparent;
	color: var(--k-ink-900);
}

/* Marcador de dado pendente de preenchimento (config.php) */
.k-todo {
	display: inline-block;
	padding: 0 .5em;
	border-radius: 4px;
	background: repeating-linear-gradient(45deg, rgba(214,19,19,.18) 0 6px, rgba(214,19,19,.06) 6px 12px);
	border: 1px dashed rgba(240, 75, 75, .5);
	color: var(--k-red-300);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	-webkit-text-fill-color: var(--k-red-300);
}

/* --------------------------------------------------------------------------
   6. Cabeçalho
   -------------------------------------------------------------------------- */

.k-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--k-z-header);
	height: var(--k-header-h);
	display: flex;
	align-items: center;
	transition: background var(--k-dur) var(--k-ease),
	            box-shadow var(--k-dur) var(--k-ease),
	            border-color var(--k-dur) var(--k-ease);
	border-bottom: 1px solid transparent;
}
.k-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 5, 6, .85) 0%, rgba(8, 5, 6, 0) 100%);
	pointer-events: none;
	transition: opacity var(--k-dur) var(--k-ease);
}
.k-header.is-stuck {
	background: rgba(8, 5, 6, .92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--k-line);
	box-shadow: var(--k-shadow-sm);
}
.k-header.is-stuck::before { opacity: 0; }

.k-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--k-space-5);
	width: 100%;
	max-width: var(--k-container-wide);
	margin-inline: auto;
	padding-inline: var(--k-container-pad);
}

.k-logo { display: flex; align-items: center; flex: none; }
.k-logo img { height: 44px; width: auto; }

.k-nav { margin-left: auto; }
.k-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.k-nav a {
	position: relative;
	display: block;
	padding: .4rem 0;
	color: var(--k-text);
	font-size: var(--k-fs-sm);
	font-weight: 600;
	letter-spacing: .02em;
}
.k-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--k-gold-grad);
	border-radius: 2px;
	transition: width var(--k-dur-sm) var(--k-ease);
}
.k-nav a:hover::after,
.k-nav a[aria-current="true"]::after { width: 100%; }

.k-header__cta { flex: none; }

.k-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	background: rgba(248, 243, 233, .05);
	color: var(--k-text);
	cursor: pointer;
}
.k-burger span {
	display: block;
	position: relative;
	width: 20px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background var(--k-dur-sm) var(--k-ease);
}
.k-burger span::before,
.k-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--k-dur-sm) var(--k-ease);
}
.k-burger span::before { top: -6px; }
.k-burger span::after  { top: 6px; }
.k-burger[aria-expanded="true"] span { background: transparent; }
.k-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.k-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile */
.k-drawer {
	position: fixed;
	inset: var(--k-header-h) 0 0 0;
	z-index: var(--k-z-header);
	display: none;
	flex-direction: column;
	gap: var(--k-space-2);
	padding: var(--k-space-6) var(--k-container-pad) var(--k-space-8);
	background: rgba(8, 5, 6, .97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.k-drawer.is-open { display: flex; }
.k-drawer a:not(.k-btn) {
	display: block;
	padding: var(--k-space-4) 0;
	border-bottom: 1px solid var(--k-line-2);
	color: var(--k-text);
	font-family: var(--k-font-display);
	font-size: var(--k-fs-lg);
	font-weight: 600;
}
.k-drawer .k-btn { margin-top: var(--k-space-4); }

body.k-locked { overflow: hidden; }

@media (max-width: 1023px) {
	.k-nav, .k-header__cta { display: none; }
	.k-burger { display: inline-flex; }
	.k-logo img { height: 38px; }
}

/* --------------------------------------------------------------------------
   7. Rodapé
   -------------------------------------------------------------------------- */

.k-footer {
	position: relative;
	padding-block: var(--k-space-8) var(--k-space-6);
	background: var(--k-ink-800);
	border-top: 1px solid var(--k-line);
}
.k-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--k-space-7) var(--k-space-6);
}
.k-footer__brand img { height: 66px; width: auto; margin-bottom: var(--k-space-4); }
.k-footer__brand p { color: var(--k-text-soft); font-size: var(--k-fs-sm); max-width: 34ch; }

.k-footer h3 {
	font-size: var(--k-fs-xs);
	font-weight: 700;
	letter-spacing: var(--k-ls-wide);
	text-transform: uppercase;
	color: var(--k-gold-300);
	margin-bottom: var(--k-space-4);
}
.k-footer ul { list-style: none; margin: 0; padding: 0; }
.k-footer li {
	margin-bottom: .7rem;
	color: var(--k-text-soft);
	font-size: var(--k-fs-sm);
	line-height: 1.6;
}
.k-footer li:last-child { margin-bottom: 0; }
.k-footer a, .k-footer address {
	color: var(--k-text-soft);
	font-size: var(--k-fs-sm);
	font-style: normal;
	line-height: 1.7;
}
.k-footer a:hover { color: var(--k-gold-200); }

.k-social { display: flex; gap: .6rem; margin-top: var(--k-space-4); }
.k-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 1px solid var(--k-line);
	border-radius: 50%;
	color: var(--k-text);
	transition: all var(--k-dur-sm) var(--k-ease);
}
.k-social a:hover {
	border-color: var(--k-gold-400);
	background: rgba(200, 149, 43, .12);
	color: var(--k-gold-200);
	transform: translateY(-2px);
}
.k-social svg { width: 18px; height: 18px; }

.k-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-space-3);
	margin-top: var(--k-space-7);
	padding-top: var(--k-space-5);
	border-top: 1px solid var(--k-line-2);
	color: var(--k-muted-2);
	font-size: var(--k-fs-xs);
}

@media (max-width: 900px) {
	.k-footer__grid { grid-template-columns: 1fr 1fr; }
	.k-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.k-footer__grid { grid-template-columns: 1fr; }
	.k-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   8. Flutuantes: WhatsApp, barra mobile, voltar ao topo
   -------------------------------------------------------------------------- */

.k-wa {
	position: fixed;
	right: clamp(1rem, 2vw, 1.75rem);
	bottom: clamp(1rem, 2vw, 1.75rem);
	z-index: var(--k-z-float);
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .85rem 1.15rem;
	border-radius: var(--k-radius-pill);
	background: #1FAE54;
	color: #fff;
	font-size: var(--k-fs-sm);
	font-weight: 700;
	box-shadow: 0 14px 40px rgba(31, 174, 84, .38);
	transition: transform var(--k-dur-sm) var(--k-ease), box-shadow var(--k-dur-sm) var(--k-ease);
}
.k-wa:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 20px 52px rgba(31, 174, 84, .5); }
.k-wa svg { width: 24px; height: 24px; }
.k-wa__label { display: inline; }

/* Pulso discreto, uma vez a cada 6s */
.k-wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(31, 174, 84, .6);
	animation: k-pulse 6s var(--k-ease) infinite;
	pointer-events: none;
}
@keyframes k-pulse {
	0%, 82%  { transform: scale(1);    opacity: 0; }
	86%      { transform: scale(1);    opacity: .9; }
	100%     { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.k-wa::after { animation: none; }
}

.k-mobilebar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--k-z-bar);
	display: none;
	gap: .6rem;
	padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
	background: rgba(8, 5, 6, .96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--k-line);
}
.k-mobilebar .k-btn { flex: 1; min-height: 48px; padding-inline: .8rem; font-size: var(--k-fs-xs); }

.k-totop {
	position: fixed;
	right: clamp(1rem, 2vw, 1.75rem);
	bottom: calc(clamp(1rem, 2vw, 1.75rem) + 68px);
	z-index: var(--k-z-float);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--k-line);
	border-radius: 50%;
	background: rgba(8, 5, 6, .8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--k-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--k-dur) var(--k-ease);
}
.k-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.k-totop:hover { border-color: var(--k-gold-400); color: var(--k-gold-200); }
.k-totop svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
	.k-mobilebar { display: flex; }
	body.kassabs { padding-bottom: 74px; }
	.k-wa { bottom: calc(74px + 1rem); padding: .8rem; }
	.k-wa__label { display: none; }
	.k-totop { bottom: calc(74px + 1rem + 62px); }
}

/* --------------------------------------------------------------------------
   9. Revelação no scroll
   -------------------------------------------------------------------------- */

.k-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--k-ease), transform .7s var(--k-ease);
}
.k-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.k-reveal { opacity: 1; transform: none; transition: none; }
}

/* Sem JS o conteúdo não pode ficar invisível. */
.no-js .k-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. Bloco dividido (foto + texto)
   Usado pela home e pela landing de franquias.
   -------------------------------------------------------------------------- */

.k-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.k-split--flip .k-split__media { order: 2; }

.k-split__media {
	position: relative;
	border-radius: var(--k-radius-xl);
	overflow: hidden;
	box-shadow: var(--k-shadow-lg);
}
.k-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.k-split__media--wide img { aspect-ratio: 4 / 3; }

/* O retrato do fundador tem a figura à esquerda do enquadramento; sem este
   object-position o recorte 4/5 corta o rosto. */
.k-split__media--portrait img { object-position: 24% center; }

/* Moldura dourada deslocada */
.k-split__media::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(242, 210, 120, .35);
	border-radius: calc(var(--k-radius-xl) - 8px);
	pointer-events: none;
}

.k-split__body h2 { margin-bottom: var(--k-space-5); }

@media (max-width: 860px) {
	.k-split { grid-template-columns: 1fr; gap: var(--k-space-6); }
	.k-split--flip .k-split__media { order: 0; }
	.k-split__media img { aspect-ratio: 16 / 11; }
}

/* --------------------------------------------------------------------------
   11. CTA final
   Usado pela home e pela landing de franquias.
   -------------------------------------------------------------------------- */

.k-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(78, 18, 25, .8) 0%, transparent 70%),
		var(--k-ink-800);
	border-top: 1px solid var(--k-line);
}
.k-cta h2 { font-size: var(--k-fs-2xl); margin-bottom: var(--k-space-4); }
.k-cta .k-lead { margin: 0 auto var(--k-space-6); }
.k-cta .k-eyebrow { justify-content: center; }
.k-cta .k-btns { justify-content: center; }
.k-cta__note { margin-top: var(--k-space-5); color: var(--k-muted); font-size: var(--k-fs-sm); }

/* --------------------------------------------------------------------------
   12. Cartão genérico
   -------------------------------------------------------------------------- */

.k-card {
	position: relative;
	padding: var(--k-space-6);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	background: var(--k-surface);
	transition: transform var(--k-dur) var(--k-ease),
	            border-color var(--k-dur) var(--k-ease),
	            background var(--k-dur) var(--k-ease);
}
.k-card:hover {
	transform: translateY(-4px);
	border-color: rgba(200, 149, 43, .4);
	background: var(--k-surface-hover);
}
.k-card h3 { font-size: var(--k-fs-lg); margin-bottom: var(--k-space-3); }
.k-card p  { color: var(--k-text-soft); font-size: var(--k-fs-sm); }

.k-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: var(--k-space-4);
	border-radius: var(--k-radius);
	background: linear-gradient(135deg, rgba(200, 149, 43, .22), rgba(200, 149, 43, .06));
	border: 1px solid rgba(200, 149, 43, .28);
	color: var(--k-gold-200);
}
.k-icon svg { width: 24px; height: 24px; }