/* Bevel Engine — front-end shortcodes. Brown/cream palette, self-scoped, theme-proof
   (declarations use !important so a host theme cannot override the look). */
.be-tpl, .be-log {
	--be-accent: #90633c;
	--be-accent-h: #6f4a2a;
	--be-ink: #2b2118;
	--be-muted: #7a6a58;
	--be-soft: #f1e8d8;
	--be-card: #fdfaf4;
	--be-border: #E1DDD5;
	--be-band: #f6ead6;
	color: var(--be-ink) !important;
	font-family: inherit !important;
	-webkit-font-smoothing: antialiased !important;
}
.be-tpl *, .be-log * { box-sizing: border-box !important; }

/* ---- toolbar (search left, filters right — matches admin Starter Sites) ---- */
.be-tpl__bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	margin: 0 0 24px !important;
}
.be-tpl__spacer { flex: 1 1 auto !important; }
.be-tpl__search { position: relative !important; flex: 0 1 320px !important; min-width: 220px !important; }
.be-tpl__search svg { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; color: var(--be-muted) !important; pointer-events: none !important; }
.be-tpl__searchin {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 16px 0 40px !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 6px !important;
	background: #ffffff69 !important;
	color: var(--be-ink) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	line-height: normal !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color .18s, box-shadow .18s !important;
}
.be-tpl__searchin::placeholder { color: var(--be-muted) !important; opacity: 1 !important; }
.be-tpl__searchin:focus { border-color: var(--be-accent) !important; box-shadow: 0 0 0 3px rgba(144, 99, 60, .1) !important; }

.be-tpl__filters { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }

/* Clear link — appears only when a filter is active (mirrors admin Starter Sites). */
.be-tpl__clear {
	background: none !important;
	border: 0 !important;
	padding: 0 4px !important;
	margin: 0 2px 0 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: var(--be-ink) !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.be-tpl__clear:hover { color: var(--be-accent) !important; }
.be-tpl__clear[hidden] { display: none !important; }

/* ---- custom filter dropdowns (Category, Types) ---- */
.be-dd { position: relative !important; }
.be-dd__btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 6px !important;
	background: #ffffff69 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	color: var(--be-ink) !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: border-color .15s, box-shadow .15s !important;
}
.be-dd__btn:hover { border-color: #d8c3a0 !important; }
.be-dd.is-open .be-dd__btn,
.be-dd.has-value .be-dd__btn { border-color: var(--be-accent) !important; box-shadow: 0 0 0 3px rgba(144, 99, 60, .09) !important; }
.be-dd__btn svg { width: 16px !important; height: 16px !important; color: var(--be-accent) !important; transition: transform .15s ease !important; }
.be-dd.is-open .be-dd__btn svg { transform: rotate(180deg) !important; }
.be-dd__label { max-width: 190px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

.be-dd__menu {
	position: absolute !important;
	z-index: 60 !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	min-width: 100% !important;
	width: max-content !important;
	max-width: 280px !important;
	background: #fff9f4 !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 34px rgba(43, 33, 24, .14) !important;
	padding: 6px !important;
	box-sizing: border-box !important;
}
.be-dd__menu[hidden] { display: none !important; }
.be-tpl__filters .be-dd:last-child .be-dd__menu { left: auto !important; right: 0 !important; }

.be-dd__search { padding: 4px 4px 6px !important; }
.be-dd__search input {
	width: 100% !important;
	height: 36px !important;
	box-sizing: border-box !important;
	padding: 0 12px !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 8px !important;
	background: #ffffff69 !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	color: var(--be-ink) !important;
	outline: none !important;
}
.be-dd__search input:focus { border-color: var(--be-accent) !important; box-shadow: none !important; }

.be-dd__list { max-height: 260px !important; overflow-y: auto !important; }
.be-dd__opt {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	background: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 10px 11px !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	color: var(--be-ink) !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}
.be-dd__opt[hidden] { display: none !important; }
.be-dd__opt:hover { background: var(--be-soft) !important; }
.be-dd__opt.is-active { background: var(--be-soft) !important; font-weight: 600 !important; color: var(--be-accent-h) !important; }
.be-dd__empty { padding: 12px 11px !important; font-size: 13px !important; color: var(--be-muted) !important; }

/* ---- grid + cards ---- */
.be-tpl__stage { position: relative !important; }
.be-tpl__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--be-cols, 3), minmax(0, 1fr)) !important;
	gap: 22px !important;
	transition: opacity .2s ease !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.be-tpl.is-loading .be-tpl__grid { opacity: .5 !important; }

.be-card {
	background: var(--be-card) !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.be-card:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 34px rgba(43, 33, 24, .12) !important; border-color: #dcc7a6 !important; }

.be-card__media { position: relative !important; aspect-ratio: 16 / 11 !important; overflow: hidden !important; background: var(--be-soft) !important; }
.be-card__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transition: transform .5s ease !important; display: block !important; border: 0 !important; max-width: none !important; }
.be-card:hover .be-card__img { transform: scale(1.04) !important; }
.be-card__img--ph { display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #f1e8d8, #e3d3bd) !important; color: rgba(144, 99, 60, .55) !important; }

.be-card__pill {
	position: absolute !important; top: 12px !important; left: 12px !important;
	margin: 0 !important;
	padding: 4px 11px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	backdrop-filter: blur(4px) !important;
}
.be-card__pill--free { background: rgba(253, 250, 244, .92) !important; color: var(--be-accent) !important; border: 1px solid rgba(144, 99, 60, .25) !important; }
.be-card__pill--pro { background: #4a352a !important; color: #f4e3c8 !important; }

.be-card__new {
	position: absolute !important; top: 12px !important; right: 12px !important;
	margin: 0 !important;
	padding: 4px 11px !important;
	border-radius: 999px !important;
	background: var(--be-accent) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	box-shadow: 0 2px 8px rgba(43, 33, 24, .2) !important;
	z-index: 2 !important;
}

.be-card__preview {
	position: absolute !important; inset: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
	background: rgba(43, 33, 24, .55) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	opacity: 0 !important;
	transition: opacity .2s ease !important;
}
.be-card__preview:hover, .be-card__preview:focus-visible { opacity: 1 !important; color: #fff !important; }
.be-card:hover .be-card__preview { opacity: 1 !important; }

.be-card__body { padding: 15px 17px 17px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; flex: 1 !important; }
.be-card__title { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--be-ink) !important; }
.be-card__meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 7px !important; margin-top: auto !important; }
.be-card__cat {
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: var(--be-soft) !important;
	color: var(--be-accent-h) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
}
.be-card__imports { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-left: auto !important; color: var(--be-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; }
.be-card__imports svg { opacity: .8 !important; }

.be-card__import {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
	height: 40px !important;
	margin-top: 4px !important;
	border-radius: 10px !important;
	background: var(--be-accent) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background .18s ease !important;
}
.be-card__import:hover { background: var(--be-accent-h) !important; color: #fff !important; }

/* ---- empty ---- */
.be-tpl__empty, .be-log .be-tpl__empty {
	grid-column: 1 / -1 !important;
	text-align: center !important;
	padding: 70px 20px !important;
	color: var(--be-muted) !important;
}
.be-tpl__empty svg { color: rgba(144, 99, 60, .5) !important; margin-bottom: 12px !important; }
.be-tpl__empty p { margin: 0 !important; font-size: 15px !important; }

/* ---- loading overlay (shows ONLY during an AJAX request) ---- */
.be-tpl__ov {
	position: absolute !important; inset: 0 !important;
	display: none !important;
	align-items: center !important; justify-content: center !important;
	background: rgba(253, 248, 240, .55) !important;
	border-radius: 16px !important;
	z-index: 3 !important;
}
.be-tpl.is-loading .be-tpl__ov { display: flex !important; }
.be-tpl__spin {
	width: 30px !important; height: 30px !important;
	border: 3px solid var(--be-soft) !important;
	border-top-color: var(--be-accent) !important;
	border-radius: 50% !important;
	animation: be-fspin .8s linear infinite !important;
}
@keyframes be-fspin { to { transform: rotate(360deg); } }

/* ---- pagination ---- */
.be-tpl__foot { display: flex !important; justify-content: center !important; margin-top: 34px !important; }
.be-pager { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.be-page {
	min-width: 40px !important; height: 40px !important;
	padding: 0 12px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	border: 1px solid var(--be-border) !important;
	border-radius: 10px !important;
	background: #ffffff69 !important;
	color: var(--be-ink) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all .15s ease !important;
}
.be-page:hover { border-color: var(--be-accent) !important; color: var(--be-accent) !important; }
.be-page.is-active { background: var(--be-accent) !important; border-color: var(--be-accent) !important; color: #fff !important; cursor: default !important; }
.be-page--nav { padding: 0 10px !important; min-width: 40px !important; }
.be-page--gap { border: 0 !important; background: transparent !important; cursor: default !important; color: var(--be-muted) !important; }
.be-page--dis { opacity: .4 !important; cursor: not-allowed !important; }

/* ---- changelog (card + tabs + timeline) ---- */
.be-log {
	display: block !important;
	position: relative !important;
	border: 1px solid var(--be-border) !important;
	padding: 26px 30px 30px !important;
	box-sizing: border-box !important;
}
.be-log__refresh {
	position: absolute !important;
	top: 22px !important; right: 30px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 30px !important; height: 30px !important;
	padding: 5px !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--be-ink) !important;
	cursor: pointer !important;
	transition: border-color .15s, background .15s, color .15s !important;
}
.be-log__refresh:hover { background: var(--be-soft) !important; }
.be-log__refresh.is-done { color: #2e7d46 !important; }
.be-log__refresh svg { width: 15px !important; height: 15px !important; }
.be-log.is-refreshing .be-log__refresh svg { animation: be-fspin .8s linear infinite !important; }

.be-log__tabs { display: flex !important; gap: 24px !important; border-bottom: 1px solid var(--be-border) !important; margin: 0 0 6px !important; }
.be-log__tab {
	position: relative !important;
	background: none !important; border: 0 !important;
	padding: 0 2px 12px !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	color: var(--be-muted) !important;
	cursor: pointer !important;
	transition: color .15s !important;
}
.be-log__tab:hover { color: var(--be-ink) !important; }
.be-log__tab.is-active { color: var(--be-ink) !important; }
.be-log__tab.is-active::after {
	content: "" !important;
	position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important;
	height: 2px !important;
	background: var(--be-ink) !important;
}

.be-log__panel[hidden] { display: none !important; }
.be-log__item {
	display: grid !important;
	grid-template-columns: 210px 1fr !important;
	gap: 30px !important;
	padding: 26px 0 !important;
	margin: 0 !important;
	border-top: 1px solid var(--be-border) !important;
}
.be-log__panel .be-log__item:first-child { border-top: 0 !important; }
.be-log__aside { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.be-log__verrow { display: flex !important; align-items: center !important; gap: 10px !important; }
.be-log__dot { flex: 0 0 auto !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--be-accent) !important; }
.be-log__ver { font-size: 17px !important; font-weight: 600 !important; color: var(--be-ink) !important; }
.be-log__latest {
	display: inline-flex !important;
	padding: 3px 10px !important;
	border-radius: 6px !important;
	background: var(--be-soft) !important;
	color: var(--be-accent-h) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
}
.be-log__cat { color: var(--be-muted) !important; font-size: 13px !important; font-weight: 600 !important; padding-left: 20px !important; }
.be-log__date { color: var(--be-muted) !important; font-size: 13.5px !important; padding-left: 20px !important; }
.be-log__body { color: #4a3d31 !important; line-height: 1.7 !important; font-size: 14.5px !important; padding-top: 1px !important; }
.be-log__body > :first-child { margin-top: 0 !important; }
.be-log__body > :last-child { margin-bottom: 0 !important; }
.be-log__body h1, .be-log__body h2, .be-log__body h3, .be-log__body h4 { color: var(--be-ink) !important; font-weight: 600 !important; margin: 16px 0 8px !important; }
.be-log__body ul, .be-log__body ol { padding-left: 18px !important; margin: 0 !important; list-style: none !important; }
.be-log__body ul li { position: relative !important; margin: 6px 0 !important; padding-left: 18px !important; }
.be-log__body ul li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 9px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #c9b48f !important; }
.be-log__body ol { list-style: decimal !important; padding-left: 20px !important; }
.be-log__body ol li { margin: 6px 0 !important; }
.be-log__body ol li::marker { color: var(--be-accent) !important; }
.be-log__body a { color: var(--be-accent) !important; text-decoration: underline !important; }
.be-log__body code { background: var(--be-soft) !important; padding: 2px 6px !important; border-radius: 5px !important; font-size: .9em !important; }
.be-log__empty { padding: 40px 4px !important; color: var(--be-muted) !important; font-size: 14px !important; }

/* ---- responsive (force column counts down; overrides --be-cols) ---- */
@media (max-width: 900px) { .be-tpl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
	.be-tpl__grid { grid-template-columns: 1fr !important; }
	.be-tpl__bar { flex-direction: column !important; align-items: stretch !important; }
	.be-tpl__search { flex: 1 1 auto !important; }
	.be-tpl__filters { justify-content: flex-start !important; }
	.be-dd { flex: 1 1 auto !important; }
	.be-dd__btn { width: 100% !important; justify-content: space-between !important; }
	.be-tpl__filters .be-dd:last-child .be-dd__menu { left: 0 !important; right: auto !important; }
	.be-log { padding: 22px 18px 24px !important; }
	.be-log__refresh { top: 18px !important; right: 18px !important; }
	.be-log__item { grid-template-columns: 1fr !important; gap: 12px !important; }
	.be-log__tabs { gap: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.be-card, .be-card__img, .be-tpl__grid, .be-page { transition: none !important; }
	.be-tpl__spin { animation: none !important; }
}