/* =========================================================
   BoonForal — main.css
   v0.2.0 — header matched to live design
   Brand color comes from --brand (set via Customizer).
   LINE green is fixed.
   ========================================================= */

:root {
	--brand: #1d2e5c;
	--brand-ink: #1d2e5c;
	--text: #2c2d33;
	--text-muted: #6b6f7a;
	--line-green: #06c755;
	--line-green-hover: #05b34c;
	--separator: #e1e3e8;
	--bg: #ffffff;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
	margin: 0;
	font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
button, input, select, textarea {
	font-family: inherit;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand); }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { color: #131315; margin: 0 0 .6em; line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
p  { margin: 0 0 1.1em; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; padding: 8px; background: #000; color: #fff; z-index: 9999; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

.bf-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 18px;
	max-width: 1100px;
	margin: 0 auto 0px;
	padding-block: 12px 8px;
}

/* ---------- Header layout ---------- */
.bf-header {
	background: var(--bg);
	border-bottom: 1px solid var(--separator);
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow .2s ease;
}
.bf-header.is-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

.bf-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	padding-block: 14px;
	min-height: 80px;
}

/* Brand / logo */
.bf-header__brand { grid-column: 1; }
.bf-header__brand .custom-logo,
.bf-header__brand .custom-logo-link img,
.bf-header__brand img {
	max-height: 60px;
	width: auto;
}
.bf-logo-link { display: inline-block; line-height: 0; }

/* Nav (center) */
.bf-nav {
	grid-column: 2;
	display: flex;
	justify-content: center;
}
.bf-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.bf-menu > li {
	position: relative;
	border-right: 1px solid var(--separator);
}
.bf-menu > li:last-child { border-right: 0; }
.bf-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	font-weight: 500;
	font-size: .98rem;
	color: var(--text);
	letter-spacing: .01em;
}
.bf-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .55;
	transition: transform .18s ease;
}
.bf-menu > li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }

.bf-menu > li > a:hover,
.bf-menu > li.current-menu-item > a,
.bf-menu > li.current-menu-parent > a,
.bf-menu > li.current-menu-ancestor > a {
	color: var(--brand);
	font-weight: 700;
}

/* Sub-menus */
.bf-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	min-width: 240px;
	box-shadow: 0 10px 30px rgba(0,0,0,.1);
	border-radius: 4px;
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 100;
}
.bf-menu li:hover > .sub-menu,
.bf-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bf-menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: .92rem;
	color: var(--text);
	white-space: nowrap;
}
.bf-menu .sub-menu a:hover { background: #f6f7fa; color: var(--brand); }

/* ---------- LINE CTA button ---------- */
.bf-line-cta {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--line-green);
	color: #fff;
	padding: 8px 18px 8px 12px;
	border-radius: 999px;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(6,199,85,.25);
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	text-align: left;
	line-height: 1.15;
}
.bf-line-cta:hover {
	background: var(--line-green-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(6,199,85,.32);
}
.bf-line-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--line-green);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
}
.bf-line-cta__icon svg { width: 22px; height: 22px; }
.bf-line-cta__text { display: flex; flex-direction: column; }
.bf-line-cta__headline { font-size: .95rem; font-weight: 700; }
.bf-line-cta__subline { font-size: .72rem; font-weight: 400; opacity: .92; margin-top: 1px; }
.bf-line-cta__mobile-img { display: none; }

/* Chevron expand button — JS-injected; hidden on desktop, visible inside mobile media query */
.bf-menu__expand { display: none; }

/* ---------- Mobile menu toggle ---------- */
.bf-menu-toggle {
	display: none;
	border: 0;
	background: transparent;
	padding: 8px;
	gap: 5px;
	flex-direction: column;
	grid-column: 1;
}
.bf-menu-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--brand);
	transition: transform .2s ease, opacity .2s ease;
}
.bf-menu-toggle[aria-expanded="true"] .bf-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bf-menu-toggle[aria-expanded="true"] .bf-menu-toggle__bar:nth-child(2) { opacity: 0; }
.bf-menu-toggle[aria-expanded="true"] .bf-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Buttons
   ========================================================= */
.bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 10px;
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.bf-btn:hover { transform: translateY(-1px); }
.bf-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

.bf-btn--primary {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 6px 16px rgba(29, 46, 92, 0.18);
}
.bf-btn--primary:hover {
	background: #16244a;
	color: #fff;
	box-shadow: 0 8px 20px rgba(29, 46, 92, 0.28);
}

.bf-btn--ghost {
	background: #fff;
	color: var(--brand);
	border-color: #d4d8e2;
}
.bf-btn--ghost:hover {
	background: #fff;
	color: var(--brand);
	border-color: var(--brand);
}

.bf-btn--accent {
	background: var(--line-green);
	color: #fff;
}
.bf-btn--accent:hover { background: var(--line-green-hover); color: #fff; }

/* =========================================================
   Hero (homepage)
   ========================================================= */
.bf-hero {
	background: #fff;
	overflow: hidden;
}
.bf-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 56px;
	padding-top: 37px;
}

/* Left column */
.bf-hero__text { max-width: 580px; }
.bf-hero__title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
	line-height: 1.18;
	margin: 0 0 18px;
	color: #131315;
	font-weight: 800;
	letter-spacing: -.01em;
}
.bf-hero__title-main { display: block; }
.bf-hero__title-accent {
	display: block;
	color: var(--brand);
	margin-top: 4px;
}
.bf-hero__lead {
	font-size: clamp(.98rem, .9rem + .25vw, 1.1rem);
	line-height: 1.75;
	color: #4a4d57;
	margin: 0 0 28px;
}
.bf-hero__lead strong { color: var(--brand); font-weight: 700; }

.bf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 36px;
}
.bf-hero__actions .bf-btn { padding: 14px 26px; font-size: 1rem; }

/* Features row */
.bf-hero__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.bf-feature {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
}
.bf-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(29, 46, 92, 0.08);
	color: var(--brand);
}
.bf-feature__icon svg { width: 18px; height: 18px; }
.bf-feature__text { display: flex; flex-direction: column; gap: 2px; }
.bf-feature__title { font-size: .92rem; color: #131315; font-weight: 600; line-height: 1.3; }
.bf-feature__sub   { font-size: .82rem; color: #6b6f7a; line-height: 1.3; }

/* Right column — image */
.bf-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bf-hero__image {
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
	display: block;
}
.bf-hero__image-placeholder {
	width: 100%;
	min-height: 420px;
	background:
		repeating-linear-gradient(
			45deg,
			#f4f5f8,
			#f4f5f8 10px,
			#eef0f5 10px,
			#eef0f5 20px
		);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8c91a0;
	font-size: .92rem;
	text-align: center;
	padding: 24px;
}

/* Hero responsive */
@media (max-width: 920px) {
	.bf-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.bf-hero__text { max-width: none; order: 2; }
	.bf-hero__media { order: 1; }
	.bf-hero__image { max-height: 380px; }
	.bf-hero__features { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 600px) {
	/* ===== APP-DENSITY mobile overrides — cut all wasted whitespace ===== */

	/* Hero — tight */
	.bf-hero {
	}
	.bf-hero__inner { gap: 14px; }
	.bf-hero__title { margin-bottom: 8px; }
	.bf-hero__lead {
		margin-bottom: 14px;
		font-size: .92rem;
		line-height: 1.55;
	}
	.bf-hero__actions { margin-top: 13px; margin-bottom: 26px; }

	/* Buttons share one row 50/50 */
	.bf-hero__actions {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
	}
	.bf-hero__actions .bf-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 10px;
		font-size: .9rem;
		justify-content: center;
		white-space: nowrap;
	}
	.bf-hero__actions .bf-btn__icon { width: 16px; height: 16px; }

	/* Features 2x2 with frame + divider lines — tighter */
	.bf-hero__features {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		border: 1px solid #ececef;
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
	}
	.bf-feature {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 10px 11px;
		border-right: 1px solid #ececef;
		border-bottom: 1px solid #ececef;
		margin: 0;
	}
	.bf-feature:nth-child(2n)        { border-right: 0; }
	.bf-feature:nth-last-child(-n+2) { border-bottom: 0; }

	.bf-feature__icon {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}
	.bf-feature__icon svg { width: 16px; height: 16px; }
	.bf-feature__text  { flex: 1; min-width: 0; gap: 0; }
	.bf-feature__title { font-size: .8rem; line-height: 1.2; }
	.bf-feature__sub   { font-size: .7rem; line-height: 1.25; }

	/* Categories — tighter section padding + heading margin */
	.bf-cats { padding-block: 14px 12px; }
	.bf-cats__heading { font-size: 1rem; margin-bottom: 8px; }
	.bf-cat { min-height: 64px; padding: 8px 10px; }
	.bf-cat__media { width: 48px; height: 48px; }

	/* Product grid section — tighter */
	.bf-grid-section { padding-block: 8px 14px; }
	.bf-grid-section__head { margin-bottom: 8px; }
	.bf-grid-section__title { font-size: 1rem; }

	/* Blog section — tighter */
	.bf-blog-section { }
	.bf-blog-section__head { margin-bottom: 8px; }

	/* Location — tighter */
	.bf-loc { padding-block: 8px 14px; }
	.bf-loc__inner { gap: 10px; }
	.bf-loc__card { padding: 16px 18px; gap: 10px; }

	/* CTA — tighter */
	.bf-cta { padding-block: 12px 10px; }
	.bf-cta__grid { gap: 12px; }
}

/* =========================================================
   Homepage — Category Cards (app-density)
   ========================================================= */
.bf-cats {
	padding-block: 0;
}
.bf-cats__heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: #131315;
	margin: 8px 0 12px;
	letter-spacing: -.005em;
}
.bf-cats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bf-cats__item { min-width: 0; }

.bf-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 12px;
	min-height: 76px;
	color: var(--text);
	text-decoration: none;
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.bf-cat:hover {
	transform: translateY(-1px);
	border-color: #d9dde6;
	box-shadow: 0 4px 12px rgba(20, 24, 40, 0.06);
	color: var(--text);
}
.bf-cat__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bf-cat__title {
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.25;
	color: #131315;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bf-cat__sub {
	font-size: .78rem;
	line-height: 1.3;
	color: #6b6f7a;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bf-cat__media {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #f4f5f8;
}
.bf-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bf-cat__media-placeholder {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg, #eef0f5, #eef0f5 5px, #f4f5f8 5px, #f4f5f8 10px);
}

/* Tablet — 2 columns */
@media (max-width: 920px) {
	.bf-cats__list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Mobile — horizontal scroll snap (app feel) */
@media (max-width: 600px) {
	.bf-cats__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 6px;
		margin-inline: -16px;
		padding-inline: 16px;
		scrollbar-width: none;
		margin-left: 0;
	}
	.bf-cats__list::-webkit-scrollbar { display: none; }
	.bf-cats__item {
		flex: 0 0 78%;
		max-width: 280px;
		scroll-snap-align: start;
	}
}

/* =========================================================
   Homepage — Product Grid (3 / 6 / 9 col, app-density)
   ========================================================= */
.bf-grid-section {
	padding-block: 16px 24px;
}

.bf-grid-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.bf-grid-section__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #131315;
	margin: 0;
	letter-spacing: -.005em;
}
.bf-grid-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--brand);
}
.bf-grid-section__view-all:hover { color: #16244a; }

/* Grid */
.bf-prod-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bf-prod-grid__item { min-width: 0; }

/* Card */
.bf-prod {
	display: block;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 10px;
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.bf-prod:hover {
	transform: translateY(-1px);
	border-color: #d9dde6;
	box-shadow: 0 4px 12px rgba(20, 24, 40, 0.06);
	color: var(--text);
}

.bf-prod__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f4f5f8;
	overflow: hidden;
}
.bf-prod__img,
.bf-prod__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.bf-prod:hover .bf-prod__media img { transform: scale(1.04); }

.bf-prod__img-placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, #eef0f5 0%, #f4f5f8 50%, #eef0f5 100%);
}

.bf-prod__sale-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	background: #e74c3c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 6px;
	border-radius: 4px;
	letter-spacing: .02em;
	line-height: 1;
	z-index: 2;
}

/* View counter — overlay at bottom-right of product image */
.bf-prod__views {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1;
	z-index: 2;
	pointer-events: none;
}
.bf-prod__views svg {
	color: inherit;
	opacity: .95;
}
.bf-prod__views span {
	color: inherit;
}

.bf-prod__title {
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	color: #131315;
	margin: 6px 8px 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.4em;
	letter-spacing: -.005em;
}

.bf-prod__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	padding: 0 8px 8px;
	margin: 0;
	line-height: 1;
}
.bf-prod__regular {
	font-size: .68rem;
	color: #9ba0ab;
	text-decoration: line-through;
}
.bf-prod__regular .woocommerce-Price-amount,
.bf-prod__regular bdi { color: inherit; text-decoration: inherit; }
.bf-prod__current {
	font-size: .82rem;
	font-weight: 700;
	color: var(--brand);
}
.bf-prod__current .woocommerce-Price-amount,
.bf-prod__current bdi { color: inherit; }

/* Tablet — 6 columns */
@media (max-width: 1024px) {
	.bf-prod-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 10px;
	}
	.bf-prod__title { font-size: .82rem; }
	.bf-prod__current { font-size: .9rem; }
}

/* Mobile — 3 columns */
@media (max-width: 600px) {
	.bf-prod-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	.bf-prod { border-radius: 8px; }
	.bf-prod__title { font-size: .82rem; margin: 8px 8px 4px; }
	.bf-prod__sale-badge { font-size: 9px; padding: 2px 5px; }
	.bf-prod__current { font-size: .9rem; }
	.bf-prod__regular { font-size: .7rem; }
	.bf-grid-section__title { font-size: 1rem; }
}

/* =========================================================
   Homepage — Blog (3 cols desktop / 2 tablet / mobile slide)
   ========================================================= */
.bf-blog-section {
}

.bf-blog-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.bf-blog-section__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #131315;
	margin: 0;
	letter-spacing: -.005em;
}
.bf-blog-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--brand);
}
.bf-blog-section__view-all:hover { color: #16244a; }

/* Grid */
.bf-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bf-blog-grid__item { min-width: 0; }

/* Card */
.bf-blog-card {
	display: block;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 12px;
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
	height: 100%;
}
.bf-blog-card:hover {
	transform: translateY(-2px);
	border-color: #d9dde6;
	box-shadow: 0 6px 16px rgba(20, 24, 40, 0.08);
	color: var(--text);
}

.bf-blog-card__media {
	aspect-ratio: 16 / 10;
	background: #f4f5f8;
	overflow: hidden;
}
.bf-blog-card__img,
.bf-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.bf-blog-card:hover .bf-blog-card__media img { transform: scale(1.04); }

.bf-blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef0f5 0%, #f4f5f8 50%, #eef0f5 100%);
}

.bf-blog-card__body {
	padding: 12px 14px 14px;
}
.bf-blog-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	color: #6b6f7a;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.bf-blog-card__cat {
	color: var(--brand);
	font-weight: 600;
}
.bf-blog-card__dot { opacity: .5; }
.bf-blog-card__title {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	color: #131315;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Tablet — 2 columns */
@media (max-width: 1024px) {
	.bf-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Mobile — horizontal scroll-snap (slide like categories/products) */
@media (max-width: 600px) {
	.bf-blog-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 6px;
		margin-inline: -16px;
		padding-inline: 16px;
		scrollbar-width: none;
		margin-left: 0;
	}
	.bf-blog-grid::-webkit-scrollbar { display: none; }
	.bf-blog-grid__item {
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
	}
	.bf-blog-card__title { font-size: .92rem; }
}

/* =========================================================
   Homepage — Location & Map
   ========================================================= */
.bf-loc {
	padding-block: 16px 24px;
}
.bf-loc__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
	gap: 16px;
	align-items: stretch;
}

/* Card */
.bf-loc__card {
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 16px;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bf-loc__title {
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.3;
	color: #131315;
	margin: 0;
	letter-spacing: -.005em;
}
.bf-loc__title-main { display: block; }
.bf-loc__title-line { display: block; }
.bf-loc__title-line span:not(.bf-loc__title-accent) { color: #131315; }
.bf-loc__title-accent { color: var(--brand); margin-right: 6px; }

.bf-loc__desc {
	font-size: .9rem;
	line-height: 1.6;
	color: #4a4d57;
	margin: 0;
}

/* Tags / pill chips */
.bf-loc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bf-loc__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	background: #fdf3eb;
	color: #8a5a32;
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* Info rows (address, hours) */
.bf-loc__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.bf-loc__row-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(29, 46, 92, 0.08);
	color: var(--brand);
	margin-top: 1px;
}
.bf-loc__row-icon svg { width: 14px; height: 14px; }
.bf-loc__row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bf-loc__row-text strong { font-size: .88rem; color: #131315; font-weight: 600; line-height: 1.45; }
.bf-loc__row-sub        { font-size: .78rem; color: #6b6f7a; line-height: 1.4; }

/* Action buttons */
.bf-loc__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.bf-loc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid #d4d8e2;
	border-radius: 999px;
	color: #131315;
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.bf-loc-btn:hover {
	border-color: var(--brand);
	color: var(--brand);
	transform: translateY(-1px);
}
.bf-loc-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #131315;
	color: #fff;
	border-radius: 50%;
	flex-shrink: 0;
}
.bf-loc-btn__icon svg { width: 14px; height: 14px; }

/* Map */
.bf-loc__map {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #ececef;
	background: #f4f5f8;
	min-height: 360px;
	position: relative;
}
.bf-loc__map iframe {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
	display: block;
}

/* Responsive */
@media (max-width: 920px) {
	.bf-loc__inner {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.bf-loc__card { padding: 20px 22px; }
	.bf-loc__title { font-size: 1.2rem; }
	.bf-loc__map, .bf-loc__map iframe { min-height: 280px; }
	.bf-loc__actions { flex-direction: row; flex-wrap: wrap; }
	.bf-loc-btn { flex: 1; justify-content: flex-start; min-width: 0; }
}

@media (max-width: 480px) {
	.bf-loc__actions { flex-direction: column; }
	.bf-loc-btn { width: 100%; }
}

/* =========================================================
   Owner CTA Section
   ========================================================= */
.bf-cta {
	padding-block: 28px 32px;
	--gold: #b8893d;
	--gold-soft: #d4b576;
	--cream: #faf3e3;
	--cream-border: #ead9b8;
}

.bf-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 24px;
	align-items: stretch;
}

/* ---------- LEFT ---------- */
.bf-cta__left {
	--pad: 22px;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 18px;
	padding: var(--pad);
	display: flex;
	flex-direction: column;
	gap: 18px;
	overflow: hidden;
}

.bf-cta__owner-photo {
	position: relative;
	/* Match owner.jpg natural ratio 697:636 — no cropping */
	aspect-ratio: 697 / 636;
	/* Break out of card padding — full edge-to-edge image */
	margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
	border-radius: 0;
	overflow: hidden;
	background-color: #fff;
	background-image: var(--bf-cta-owner, linear-gradient(135deg, #f5ecdb 0%, #e8d9bd 100%));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Gold experience badge */
.bf-cta__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #f5d27c 0%, #c9a55c 60%, #8a6a2e 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(138, 106, 46, 0.4);
	border: 3px solid #fff;
	line-height: 1;
	gap: 1px;
}
.bf-cta__badge-stars { font-size: 9px; letter-spacing: 2px; opacity: .9; }
.bf-cta__badge-num   { font-size: 10px; font-weight: 600; }
.bf-cta__badge-big   { font-size: 26px; font-weight: 800; line-height: 1; }
.bf-cta__badge-tag {
	font-size: 9px;
	background: rgba(0, 0, 0, 0.25);
	padding: 2px 8px;
	border-radius: 999px;
	margin-top: 2px;
}

.bf-cta__owner-info {
	text-align: center;
	padding: 0 4px;
	margin-top: -42px;       /* overlap onto faded white bottom of photo */
	position: relative;
	z-index: 1;
}
.bf-cta__owner-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: #131315;
	margin: 0 0 4px;
	letter-spacing: -.005em;
}
.bf-cta__owner-sub {
	font-size: .88rem;
	color: #6b6f7a;
	margin: 0;
}

/* 3 quality features */
.bf-cta__quals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bf-cta__qual {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}
.bf-cta__qual-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cream);
	border: 1px solid var(--cream-border);
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bf-cta__qual-icon svg { width: 22px; height: 22px; }
.bf-cta__qual-title { font-size: .82rem; font-weight: 700; color: #131315; line-height: 1.3; }
.bf-cta__qual-sub   { font-size: .72rem; color: #6b6f7a; line-height: 1.4; }

/* Phone CTA box */
.bf-cta__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

.bf-cta__phone {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--brand);
	color: #fff;
	border-radius: 12px;
	text-decoration: none;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
	box-shadow: 0 6px 16px rgba(29, 46, 92, 0.18);
}
.bf-cta__phone:hover {
	background: #16244a;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(29, 46, 92, 0.28);
}
.bf-cta__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #fff;
	color: #131315;
	border-radius: 50%;
	flex-shrink: 0;
}
.bf-cta__phone-icon svg { width: 16px; height: 16px; }
.bf-cta__phone-text { display: flex; flex-direction: column; gap: 1px; }
.bf-cta__phone-label { font-size: .72rem; opacity: .8; }
.bf-cta__phone-num   { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }

.bf-cta__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-cta__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
	min-width: 0;
}
.bf-cta__btn:hover { transform: translateY(-1px); }
.bf-cta__btn--line {
	background: var(--line-green);
	color: #fff;
	border: 1px solid var(--line-green);
}
.bf-cta__btn--line:hover { background: var(--line-green-hover); color: #fff; }
.bf-cta__btn--ghost {
	background: #fff;
	color: #131315;
	border: 1px solid #d4d8e2;
}
.bf-cta__btn--ghost:hover { border-color: #131315; color: #131315; }

/* ---------- RIGHT ---------- */
.bf-cta__right {
	position: relative;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 18px;
	overflow: hidden;
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bf-cta__right-bg {
	position: absolute;
	inset: 0;
	background-image: var(--bf-cta-service, none);
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}
.bf-cta__right-content {
	position: relative;
	z-index: 1;
	max-width: 60%;
}

.bf-cta__svc-title {
	font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
	font-weight: 800;
	color: #131315;
	margin: 0 0 6px;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.bf-cta__svc-accent {
	color: var(--gold);
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 14px;
	line-height: 1.4;
}
.bf-cta__svc-desc {
	font-size: .92rem;
	line-height: 1.6;
	color: #4a4d57;
	margin: 0 0 16px;
}

.bf-cta__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	margin: 8px 0 16px;
	position: relative;
}
.bf-cta__divider::before,
.bf-cta__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cream-border), transparent);
}
.bf-cta__divider svg { margin: 0 12px; }

/* 5 service features */
.bf-cta__features {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bf-cta__feature {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.bf-cta__feature-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cream);
	border: 1px solid var(--cream-border);
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.bf-cta__feature-icon svg { width: 22px; height: 22px; }
.bf-cta__feature-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-cta__feature-title { font-size: .95rem; font-weight: 700; color: #131315; line-height: 1.45; }
.bf-cta__feature-sub   { font-size: .82rem; color: #6b6f7a; line-height: 1.55; }

/* 3 trust badges */
.bf-cta__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
	border-top: 1px solid #ececef;
}
.bf-cta__trust-item {
	display: flex;
	gap: 8px;
	align-items: center;
}
.bf-cta__trust-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cream);
	border: 1px solid var(--cream-border);
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bf-cta__trust-icon svg { width: 16px; height: 16px; }
.bf-cta__trust-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bf-cta__trust-text strong { font-size: .82rem; color: #131315; font-weight: 700; line-height: 1.3; }
.bf-cta__trust-text span   { font-size: .72rem; color: #6b6f7a; line-height: 1.3; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
	.bf-cta__grid { grid-template-columns: 1fr; gap: 16px; }
	.bf-cta__left  { --pad: 18px; padding: var(--pad); }
	.bf-cta__right { padding: 18px; }
	/* Owner photo keeps natural 697/636 ratio — no crop */
	.bf-cta__svc-title { font-size: 1.4rem; }
	.bf-cta__btns { flex-direction: row; }
}

@media (max-width: 600px) {
	.bf-cta { padding-block: 12px 10px; }
	.bf-cta__quals { gap: 8px; }
	.bf-cta__qual-title { font-size: .76rem; }
	.bf-cta__qual-sub   { font-size: .68rem; }
	.bf-cta__trust { grid-template-columns: 1fr; gap: 8px; }
	.bf-cta__phone-num { font-size: .95rem; }
	.bf-cta__btns { flex-direction: column; }
	.bf-cta__btn  { width: 100%; }

	/* Right section — keep BG image, full-width text on mobile */
	.bf-cta__right { padding: 16px 18px; }
	.bf-cta__right-content { max-width: 100%; }
	.bf-cta__svc-title { font-size: 1.15rem; margin-bottom: 4px; }
	.bf-cta__svc-accent { font-size: .88rem; margin-bottom: 10px; }
	.bf-cta__svc-desc { font-size: .85rem; margin-bottom: 10px; }
	.bf-cta__divider { margin: 4px 0 10px; }

	/* Compact 5-feature list */
	.bf-cta__features { gap: 10px; margin-bottom: 0; }
	.bf-cta__feature { gap: 10px; }
	.bf-cta__feature-icon { width: 36px; height: 36px; }
	.bf-cta__feature-icon svg { width: 18px; height: 18px; }
	.bf-cta__feature-title { font-size: .88rem; line-height: 1.35; }
	.bf-cta__feature-sub { font-size: .76rem; line-height: 1.4; }

	/* Hide 3 trust badges on mobile (รับประกัน/จัดส่งตรงเวลา/ราคายุติธรรม) — too cramped */
	.bf-cta__trust { display: none; }
}

/* =========================================================
   Product Catalog Archive — /shop/, /product-category/*/
   ========================================================= */
.bf-archive { padding-block: 12px 32px; }

.bf-archive__head {
	padding-block: 16px 14px;
}
/* Breadcrumb — single line, ellipsis on long current item */
.bf-archive__crumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: #6b6f7a;
	margin-bottom: 8px;
	margin-top: -8px;
	min-width: 0;
	overflow: hidden;
}
.bf-archive__crumb > * { flex-shrink: 0; }
.bf-archive__crumb a {
	color: #6b6f7a;
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bf-archive__crumb a:hover { color: var(--brand); }
.bf-archive__crumb .is-current {
	color: #131315;
	font-weight: 600;
	min-width: 0;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dedicated thin breadcrumb bar (right after header) */
.bf-crumb-bar {
	background: #fafafa;
	border-bottom: 1px solid rgba(0,0,0,.05);
	padding: 8px 0;
}
.bf-crumb-bar .bf-archive__crumb {
	margin: 0;
	font-size: .8rem;
}
@media (max-width: 720px) {
	.bf-crumb-bar { padding: 6px 0; }
	.bf-crumb-bar .bf-archive__crumb {
		font-size: .76rem;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.bf-crumb-bar .bf-archive__crumb::-webkit-scrollbar { display: none; }
	.bf-crumb-bar .bf-archive__crumb a,
	.bf-crumb-bar .bf-archive__crumb .is-current {
		max-width: none;
		flex-shrink: 0;
		text-overflow: clip;
		overflow: visible;
	}
}

.bf-archive__title {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 800;
	color: #131315;
	margin: 0 0 4px;
	letter-spacing: -.005em;
}
.bf-archive__title em { font-style: normal; color: var(--brand); }
.bf-archive__desc {
	font-size: .92rem;
	color: #4a4d57;
	line-height: 1.6;
	margin: 6px 0 0;
}

/* ---------- Sticky Category Switcher ---------- */
.bf-cat-switcher {
	position: sticky;
	top: 80px; /* below desktop header */
	z-index: 30;
	background: rgba(255,255,255,.95);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	border-block: 1px solid #ececef;
	margin-bottom: 16px;
}
.bf-cat-switcher__list {
	display: flex;
	gap: 8px;
	padding-block: 10px;
	margin: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bf-cat-switcher__list::-webkit-scrollbar { display: none; }
.bf-cat-switcher__item { flex: 0 0 auto; scroll-snap-align: start; }

.bf-cat-switcher__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #f4f5f8;
	color: #4a4d57;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bf-cat-switcher__pill:hover {
	background: #ececef;
	color: #131315;
}
.bf-cat-switcher__pill.is-active {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}
.bf-cat-switcher__pill svg { color: inherit; }
.bf-cat-switcher__count {
	font-style: normal;
	font-size: .72rem;
	font-weight: 600;
	background: rgba(0,0,0,.08);
	padding: 1px 7px;
	border-radius: 999px;
	min-width: 20px;
	text-align: center;
}
.bf-cat-switcher__pill.is-active .bf-cat-switcher__count {
	background: rgba(255,255,255,.22);
	color: #fff;
}

/* ---------- Toolbar (count + sort) ---------- */
.bf-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-block: 6px 14px;
}
.bf-archive__count {
	font-size: .82rem;
	color: #6b6f7a;
}
.bf-archive__sort .woocommerce-ordering { margin: 0; }
.bf-archive__sort select.orderby,
.bf-archive__sort select {
	font-family: inherit;
	font-size: .88rem;
	padding: 8px 32px 8px 14px;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
	background-size: 14px;
	border: 1px solid #d4d8e2;
	border-radius: 8px;
	color: #131315;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.bf-archive__sort select:hover { border-color: var(--brand); }
.bf-archive__sort select:focus {
	outline: 0;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(29, 46, 92, 0.15);
}

/* ---------- Pagination ---------- */
/* Note: WooCommerce uses .page-numbers on BOTH the <ul> wrapper AND each item.
   Use ul.page-numbers / li > .page-numbers to disambiguate. */
.bf-archive__pagination {
	margin: 40px 0 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Wrapper (white pill bar with shadow) */
.bf-archive__pagination ul.page-numbers,
.bf-archive__pagination .nav-links {
	display: inline-flex;
	gap: 4px;
	margin: 0;
	padding: 6px;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(20, 30, 60, .06);
}
.bf-archive__pagination ul.page-numbers > li,
.bf-archive__pagination .nav-links > * {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each pagination button — only inside a <li> (not the ul wrapper itself) */
.bf-archive__pagination ul.page-numbers > li > a.page-numbers,
.bf-archive__pagination ul.page-numbers > li > span.page-numbers,
.bf-archive__pagination .nav-links a.page-numbers,
.bf-archive__pagination .nav-links span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #4a4d57;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .1s ease;
	letter-spacing: .01em;
	box-sizing: border-box;
}
.bf-archive__pagination ul.page-numbers > li > a.page-numbers:hover,
.bf-archive__pagination .nav-links a.page-numbers:hover {
	background: #f4f5f8;
	color: var(--brand);
}
.bf-archive__pagination ul.page-numbers > li > a.page-numbers:active {
	transform: scale(.96);
}

/* Current page — navy filled with shadow */
.bf-archive__pagination ul.page-numbers > li > span.current,
.bf-archive__pagination ul.page-numbers > li > a.current,
.bf-archive__pagination .nav-links span.current {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 2px 8px rgba(29, 46, 92, .25);
}

/* Dots */
.bf-archive__pagination ul.page-numbers > li > span.dots,
.bf-archive__pagination .nav-links span.dots {
	background: transparent;
	color: #9ba0ab;
	min-width: 28px;
	padding: 0 4px;
	cursor: default;
	box-shadow: none;
}

/* Prev/Next arrows */
.bf-archive__pagination ul.page-numbers > li > a.prev,
.bf-archive__pagination ul.page-numbers > li > a.next,
.bf-archive__pagination .nav-links a.prev,
.bf-archive__pagination .nav-links a.next {
	color: var(--brand);
	font-size: 1.1rem;
	padding: 0 14px;
}
.bf-archive__pagination ul.page-numbers > li > a.prev:hover,
.bf-archive__pagination ul.page-numbers > li > a.next:hover {
	background: var(--brand);
	color: #fff;
}

@media (max-width: 600px) {
	.bf-archive__pagination ul.page-numbers > li > a.page-numbers,
	.bf-archive__pagination ul.page-numbers > li > span.page-numbers,
	.bf-archive__pagination .nav-links a.page-numbers,
	.bf-archive__pagination .nav-links span.page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
		font-size: .88rem;
	}
	.bf-archive__pagination ul.page-numbers,
	.bf-archive__pagination .nav-links { padding: 4px; gap: 2px; }
}

/* ---------- Empty state ---------- */
.bf-archive__empty {
	text-align: center;
	padding: 56px 16px 64px;
	color: #6b6f7a;
}
.bf-archive__empty svg { color: #d4d8e2; margin: 0 auto 12px; }
.bf-archive__empty h2 { font-size: 1.2rem; color: #131315; margin: 0 0 6px; }
.bf-archive__empty p { margin: 0 0 16px; }
.bf-archive__empty .bf-btn { display: inline-flex; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
	.bf-cat-switcher { top: 64px; } /* below mobile header */
}
@media (max-width: 600px) {
	.bf-archive__title { font-size: 1.3rem; }
	.bf-archive__toolbar { gap: 8px; }
	.bf-archive__count { width: 100%; order: 2; }
	.bf-archive__sort  { width: 100%; }
	.bf-archive__sort select { width: 100%; }
	.bf-cat-switcher__pill {
		padding: 7px 12px;
		font-size: .82rem;
	}
	.bf-cat-switcher__list {
		margin-inline: calc(clamp(16px, 3vw, 28px) * -1);
		padding-inline: clamp(16px, 3vw, 28px);
	}
}

/* =========================================================
   Button — large variant
   ========================================================= */
.bf-btn--lg {
	padding: 14px 26px;
	font-size: 1rem;
	gap: 10px;
}

/* =========================================================
   Single Product Page
   ========================================================= */
.bf-single-product {
	padding-block: 4px 24px;
}

.bf-sp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 28px;
	margin-top: 6px;
}

/* Gallery */
.bf-sp__media {
	position: relative;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 14px;
	padding: 6px;
	overflow: hidden;
}
/* Image area — make it the positioning context for badges */
.bf-sp__media .woocommerce-product-gallery,
.bf-sp__media .woocommerce-product-gallery__wrapper,
.bf-sp__media .woocommerce-product-gallery__image {
	position: relative;
}

/* Save badge — overlay TOP-LEFT, GREEN with pulse animation */
.bf-sp__sale-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	background: linear-gradient(135deg, #06c755 0%, #04a445 100%);
	color: #fff;
	padding: 8px 14px;
	border-radius: 10px;
	box-shadow:
		0 4px 14px -2px rgba(6,199,85,0.55),
		0 0 0 4px rgba(6,199,85,0.15);
	pointer-events: none;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1.1;
	transform-origin: top left;
	animation: bf-sale-pulse 2.4s ease-in-out infinite;
}
.bf-sp__sale-badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: bf-sale-shimmer 3s ease-in-out infinite;
	pointer-events: none;
}
.bf-sp__sale-badge-flash {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	opacity: 0.95;
	text-transform: uppercase;
}
.bf-sp__sale-badge-amt {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.005em;
}

@keyframes bf-sale-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@keyframes bf-sale-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bf-sp__sale-badge,
	.bf-sp__sale-badge::before { animation: none !important; }
}

/* Deposit badge — overlay BOTTOM-RIGHT of the image */
.bf-sp__deposit-badge {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 5;
	background: linear-gradient(135deg, #1d2e5c, #2a3d76);
	color: #fff;
	padding: 8px 14px;
	border-radius: 10px;
	box-shadow: 0 4px 14px -2px rgba(29,46,92,.5);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	pointer-events: none;
	min-width: 110px;
}
.bf-sp__deposit-badge-label {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.85;
	letter-spacing: .02em;
}
.bf-sp__deposit-badge-amt {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.1;
	color: #ffd56b;
}
.bf-sp__deposit-badge-amt .woocommerce-Price-amount,
.bf-sp__deposit-badge-amt bdi { color: inherit; font-weight: inherit; }
@media (max-width: 600px) {
	.bf-sp__sale-badge { top: 10px; left: 10px; padding: 6px 11px; }
	.bf-sp__sale-badge-amt { font-size: 14px; }
	.bf-sp__sale-badge-flash { font-size: 9px; }
	.bf-sp__deposit-badge { bottom: 8px; right: 8px; padding: 6px 11px; min-width: 96px; }
	.bf-sp__deposit-badge-amt { font-size: 14px; }
	.bf-sp__deposit-badge-label { font-size: 10px; }
	.bf-single-product { padding-block: 0 18px; }
	.bf-sp__layout { margin-top: 0; gap: 18px; }
	.bf-sp__media { padding: 4px; border-radius: 12px; }
}

/* WC gallery overrides */
.bf-sp__media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.bf-sp__media .woocommerce-product-gallery__image,
.bf-sp__media .woocommerce-product-gallery__wrapper {
	border-radius: 10px;
	overflow: hidden;
}
.bf-sp__media .woocommerce-product-gallery__image img {
	border-radius: 10px;
}
.bf-sp__media .flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
.bf-sp__media .flex-control-thumbs li {
	width: calc(20% - 7px) !important;
	margin: 0 !important;
	padding: 0 !important;
}
.bf-sp__media .flex-control-thumbs img {
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color .15s ease;
	opacity: 1 !important;
	width: 100% !important;
	aspect-ratio: 1;
	object-fit: cover;
}
.bf-sp__media .flex-control-thumbs img:hover,
.bf-sp__media .flex-control-thumbs .flex-active {
	border-color: var(--brand);
}
.bf-sp__media .woocommerce-product-gallery__trigger {
	background: rgba(255,255,255,.95);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* Details */
.bf-sp__details {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bf-sp__cat {
	font-size: .82rem;
	color: var(--brand);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.bf-sp__cat a { color: inherit; text-decoration: none; }
.bf-sp__cat a:hover { text-decoration: underline; }
.bf-sp__title {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 800;
	color: #131315;
	margin: 0;
	letter-spacing: -.005em;
	line-height: 1.25;
}

.bf-sp__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 0;
	border-block: 1px solid #ececef;
}
.bf-sp__regular {
	font-size: 1rem;
	color: #9ba0ab;
	text-decoration: line-through;
}
.bf-sp__current {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--brand);
}
.bf-sp__current .woocommerce-Price-amount,
.bf-sp__current bdi { color: inherit; font-weight: inherit; }
.bf-sp__regular .woocommerce-Price-amount,
.bf-sp__regular bdi { color: inherit; text-decoration: inherit; }
.bf-sp__save {
	font-size: .82rem;
	color: #fff;
	background: #e74c3c;
	padding: 3px 9px;
	border-radius: 4px;
	font-weight: 600;
}

.bf-sp__excerpt {
	font-size: .94rem;
	line-height: 1.7;
	color: #4a4d57;
}
.bf-sp__excerpt p:last-child { margin-bottom: 0; }

/* LINE CTA box */
.bf-sp__line-box {
	background: linear-gradient(135deg, rgba(6,199,85,.08), rgba(6,199,85,.02));
	border: 1px solid rgba(6,199,85,.2);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bf-sp__line-box-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bf-sp__line-box-head > svg {
	flex-shrink: 0;
	color: var(--line-green);
	background: #fff;
	border-radius: 50%;
	padding: 6px;
	width: 36px;
	height: 36px;
}
.bf-sp__line-box-head strong {
	display: block;
	font-size: 1rem;
	color: #131315;
	font-weight: 700;
}
.bf-sp__line-box-head span {
	display: block;
	font-size: .82rem;
	color: #4a4d57;
	margin-top: 2px;
}
.bf-sp__line-box-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bf-sp__line-box-actions .bf-btn { flex: 1; min-width: 0; justify-content: center; }

/* Trust badges */
.bf-sp__trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bf-sp__trust li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px 14px;
	background: #f4f5f8;
	border-radius: 10px;
	min-height: 90px;
}
.bf-sp__trust-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brand);
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.bf-sp__trust li > div {
	min-width: 0;
	width: 100%;
}
.bf-sp__trust strong {
	display: block;
	font-size: .8rem;
	color: #131315;
	font-weight: 700;
	line-height: 1.3;
}
.bf-sp__trust span {
	display: block;
	font-size: .72rem;
	color: #6b6f7a;
	line-height: 1.3;
	margin-top: 1px;
}

/* WC add-to-cart form */
.bf-sp__cart {
	border-top: 1px solid #ececef;
	padding-top: 14px;
}
.bf-sp__cart .quantity {
	margin-right: 10px;
}
.bf-sp__cart input.qty {
	width: 64px;
	height: 44px;
	text-align: center;
	border: 1px solid #d4d8e2;
	border-radius: 8px;
	font-size: 1rem;
	-moz-appearance: textfield;
}
.bf-sp__cart input.qty::-webkit-outer-spin-button,
.bf-sp__cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.bf-sp__cart .single_add_to_cart_button,
.bf-sp__cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--brand);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s ease, transform .12s ease;
	height: 44px;
}
.bf-sp__cart .single_add_to_cart_button:hover,
.bf-sp__cart .button:hover {
	background: #16244a;
	transform: translateY(-1px);
}

/* Meta */
.bf-sp__meta {
	font-size: .85rem;
	color: #6b6f7a;
	border-top: 1px solid #ececef;
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bf-sp__meta-row { display: flex; gap: 8px; }
.bf-sp__meta-label { color: #131315; font-weight: 600; min-width: 90px; }
.bf-sp__meta-row a { color: var(--brand); text-decoration: none; }
.bf-sp__meta-row a:hover { text-decoration: underline; }

/* Tabs */
.bf-sp__tabs {
	margin-top: 32px;
	border-top: 1px solid #ececef;
	padding-top: 24px;
}
.bf-sp__tabs .woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	gap: 6px;
	border-bottom: 1px solid #ececef;
	flex-wrap: wrap;
}
.bf-sp__tabs .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.bf-sp__tabs .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 16px;
	color: #6b6f7a;
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
	margin-bottom: -1px;
}
.bf-sp__tabs .woocommerce-tabs ul.tabs li.active a,
.bf-sp__tabs .woocommerce-tabs ul.tabs li a:hover {
	color: var(--brand);
	border-bottom-color: var(--brand);
}
.bf-sp__tabs .woocommerce-Tabs-panel {
	font-size: .94rem;
	line-height: 1.75;
	color: #2c2d33;
}
.bf-sp__tabs .woocommerce-Tabs-panel h2 {
	font-size: 1.2rem;
	margin-top: 0;
}

/* Related products — custom design (matches homepage product grid) */
.bf-related {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #ececef;
}
.bf-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.bf-related__title {
	font-size: 1.2rem;
	font-weight: 800;
	color: #131315;
	margin: 0;
	letter-spacing: -.005em;
}
.bf-related__view-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--brand);
	text-decoration: none;
}
.bf-related__view-all:hover { color: #16244a; }

.bf-prod-grid--related {
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 1024px) {
	.bf-prod-grid--related { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
	.bf-prod-grid--related {
		grid-template-columns: repeat(2, 1fr);
		display: grid !important;
		overflow: visible;
		padding: 0;
		margin-inline: 0;
		gap: 10px;
	}
	.bf-prod-grid--related .bf-prod-grid__item {
		flex: none;
		max-width: none;
	}
}

/* Hide WC's default related output (we use custom .bf-related instead) */
.related.products { display: none; }

/* =========================================================
   Deposit display (single product page)
   ========================================================= */
.bf-sp__deposit {
	background: linear-gradient(135deg, rgba(29, 46, 92, 0.04), rgba(29, 46, 92, 0.01));
	border: 1px solid rgba(29, 46, 92, 0.15);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bf-sp__deposit-head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--brand);
}
.bf-sp__deposit-head strong {
	font-size: .92rem;
	font-weight: 700;
}
.bf-sp__deposit-amount {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--brand);
	line-height: 1.1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}
.bf-sp__deposit-amount .woocommerce-Price-amount,
.bf-sp__deposit-amount bdi { color: inherit; font-weight: inherit; }
.bf-sp__deposit-of {
	font-size: .78rem;
	color: #6b6f7a;
	font-weight: 500;
}
.bf-sp__deposit-of .woocommerce-Price-amount,
.bf-sp__deposit-of bdi { color: inherit; font-weight: 500; }
.bf-sp__deposit-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: #4a4d57;
	margin: 0;
	padding-top: 8px;
	border-top: 1px dashed rgba(29, 46, 92, 0.15);
}
.bf-sp__deposit-note svg { color: var(--brand); flex-shrink: 0; }
.bf-sp__deposit-note .woocommerce-Price-amount,
.bf-sp__deposit-note bdi { color: var(--brand); font-weight: 700; }

/* Single product responsive */
@media (max-width: 920px) {
	.bf-sp__layout { grid-template-columns: 1fr; gap: 20px; }
	.bf-sp__current { font-size: 1.5rem; }
	.bf-sp__trust { grid-template-columns: 1fr 1fr 1fr; }
	.related.products ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.bf-sp__layout { gap: 16px; }
	.bf-sp__title { font-size: 1.3rem; }
	.bf-sp__current { font-size: 1.4rem; }

	/* Trust badges — compact 3-col on mobile, icon centered above text */
	.bf-sp__trust {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.bf-sp__trust li {
		padding: 10px 6px;
		gap: 4px;
		min-height: 0;
		text-align: center;
		align-items: center;
	}
	.bf-sp__trust-icon {
		width: 28px;
		height: 28px;
	}
	.bf-sp__trust-icon svg { width: 16px; height: 16px; }
	.bf-sp__trust strong { font-size: .68rem; line-height: 1.25; }
	.bf-sp__trust span   { font-size: .6rem;  line-height: 1.25; margin-top: 2px; }

	.bf-sp__line-box-actions { flex-direction: row; flex-wrap: nowrap; }
	.bf-sp__line-box-actions .bf-btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: .9rem; }
	.bf-sp__line-box-actions .bf-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.related.products ul.products { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.bf-sp__media .flex-control-thumbs li { width: calc(25% - 6px) !important; }
}

/* =========================================================
   Page Template — for landing/pillar/child pages
   ========================================================= */
.bf-page {
	/* padding-bottom: 32px; */
}
.bf-page > .bf-container > .bf-archive__crumb {
	margin: 14px 0 6px;
}
/* New 2-column hero (text + square cover) for landing/pillar pages */
.bf-page__hero {
	background: linear-gradient(180deg, #f7f6f1 0%, #ffffff 100%);
	padding: 36px 0 28px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(29, 46, 92, 0.06);
}
.bf-page__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 48px;
}
.bf-page--no-cover .bf-page__hero-grid {
	grid-template-columns: 1fr;
}
.bf-page__hero-text { min-width: 0; }
.bf-page__hero-text .bf-archive__crumb { margin-bottom: 14px; }
.bf-page__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
.bf-page__hero-actions .bf-btn { padding: 11px 22px; font-size: .98rem; }
.bf-page__hero-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}
.bf-page__hero-img,
.bf-page__hero-media img {
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 18px;
	box-shadow: 0 18px 48px -16px rgba(29, 46, 92, 0.28),
	            0 4px 14px -6px rgba(0, 0, 0, 0.08);
}

.bf-page__head {
	max-width: 800px;
	padding-block: 0;
	margin-bottom: 18px;
}
.bf-page__title {
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 800;
	color: #131315;
	margin: 0 0 8px;
	letter-spacing: -.01em;
	line-height: 1.25;
}
.bf-page__lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #4a4d57;
	margin: 0 0 14px;
}

/* Quick contact pills near the title */
/* Quick-contact pills + side-cta removed (page.php trimmed). Kept only as no-op. */

/* Empty content placeholder (admin-only when post_content blank) */
.bf-page__empty-notice {
	display: block;
	padding: 24px 22px;
	margin: 12px 0 24px;
	border: 2px dashed #c9cdd6;
	border-radius: 12px;
	background: #f7f8fb;
	color: #5a6270;
	text-align: center;
	font-size: .95rem;
	line-height: 1.6;
}
.bf-page__empty-notice strong {
	display: block;
	margin-bottom: 6px;
	color: #1d1d1f;
	font-size: 1rem;
}
.bf-page__empty-notice a {
	color: var(--brand);
	font-weight: 600;
	text-decoration: underline;
}

/* Layout — full container width, content splits into 2 reading columns inside */
.bf-page__layout {
	display: block;
	max-width: none;
	margin: 0;
}
.bf-page__main { min-width: 0; width: 100%; max-width: none; }
.bf-page__side {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid #ececef;
}
.bf-page__side:empty { display: none; }
/* Hide sidebar when it has no real content (only whitespace/nothing) */
.bf-page__side:not(:has(*)) { display: none; }

/* Content typography — premium editorial */
.bf-page__content {
	font-size: 1.06rem;
	line-height: 1.9;
	color: #2c2d33;
	letter-spacing: .005em;
}
.bf-page__content > * { max-width: none; }
.bf-page__content > .alignwide,
.bf-page__content > .alignfull { max-width: none; }

/* Lead (first paragraph) — slightly larger, premium feel */
.bf-page__content > p:first-of-type {
	font-size: 1.14rem;
	color: #1d1d1f;
	line-height: 1.85;
	margin-bottom: 1.6em;
	font-weight: 500;
}

/* Headings — clear hierarchy with brand accent */
.bf-page__content h2,
.bf-page__content h3,
.bf-page__content h4 {
	color: #131315;
	line-height: 1.32;
	font-weight: 800;
	letter-spacing: -.005em;
}
.bf-page__content h2 {
	font-size: clamp(1.45rem, 1.2rem + .8vw, 1.75rem);
	margin-top: 2.2em;
	margin-bottom: .7em;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--brand);
}
.bf-page__content h2:first-child,
.bf-page__content > h2:first-of-type { margin-top: .4em; }
.bf-page__content h3 {
	font-size: 1.28rem;
	margin-top: 1.8em;
	margin-bottom: .55em;
	color: var(--brand);
}
.bf-page__content h4 {
	font-size: 1.08rem;
	margin-top: 1.5em;
	margin-bottom: .45em;
}
.bf-page__content p { margin: 0 0 1.3em; }
.bf-page__content a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.bf-page__content a:hover { color: #16244a; }
.bf-page__content img,
.bf-page__content figure { border-radius: 10px; max-width: 100%; height: auto; }
.bf-page__content figure { margin: 1.5em 0; }
.bf-page__content figcaption { font-size: .85rem; color: #6b6f7a; margin-top: 6px; text-align: center; }
.bf-page__content blockquote {
	border-left: 3px solid var(--brand);
	padding: 4px 0 4px 18px;
	margin: 1.5em 0;
	color: #4a4d57;
	font-style: italic;
}
.bf-page__content ul,
.bf-page__content ol {
	padding-left: 24px;
	margin: 0 0 1.2em;
}
.bf-page__content li { margin-bottom: 6px; }
.bf-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: .94rem;
}
.bf-page__content th,
.bf-page__content td {
	border: 1px solid #ececef;
	padding: 8px 12px;
	text-align: left;
}
.bf-page__content th { background: #f4f5f8; font-weight: 700; }

/* Page CTA at bottom of content */
.bf-page__cta {
	background: linear-gradient(135deg, rgba(6,199,85,.10), rgba(6,199,85,.02));
	border: 1px solid rgba(6,199,85,.22);
	border-radius: 16px;
	padding: 28px 32px;
	margin-top: 48px;
	text-align: center;
	box-shadow: 0 4px 20px -8px rgba(6,199,85,.15);
}
.bf-page__cta h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	color: #131315;
}
.bf-page__cta p {
	margin: 0 0 16px;
	color: #4a4d57;
	font-size: .94rem;
}
.bf-page__cta-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.bf-page__pagelinks {
	margin: 1.5em 0;
	font-size: .9rem;
	color: #6b6f7a;
}
.bf-page__pagelinks a,
.bf-page__pagelinks > span {
	display: inline-block;
	min-width: 32px;
	padding: 4px 10px;
	margin: 0 2px;
	text-align: center;
	border-radius: 6px;
}
.bf-page__pagelinks a {
	background: #f4f5f8;
	color: #131315;
	text-decoration: none;
}
.bf-page__pagelinks > span {
	background: var(--brand);
	color: #fff;
}

/* Sidebar */
.bf-page__side { min-width: 0; }
.bf-page__side-title {
	font-size: 1rem;
	font-weight: 700;
	color: #131315;
	margin: 0 0 12px;
}

/* Related pages list */
.bf-page__related {
	margin-bottom: 18px;
}
.bf-page__related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bf-page__related li a {
	display: flex;
	gap: 10px;
	padding: 8px;
	border: 1px solid #ececef;
	border-radius: 10px;
	text-decoration: none;
	color: #131315;
	transition: border-color .15s ease, background .15s ease;
	align-items: center;
}
.bf-page__related li a:hover {
	border-color: var(--brand);
	background: #fafbfd;
	color: var(--brand);
}
.bf-page__related-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: #f4f5f8;
}
.bf-page__related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bf-page__related-text {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Sidebar sticky LINE CTA */
.bf-page__side-cta {
	position: sticky;
	top: 100px;
	background: linear-gradient(135deg, rgba(6,199,85,.08), rgba(6,199,85,.02));
	border: 1px solid rgba(6,199,85,.25);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}
.bf-page__side-cta > svg {
	color: var(--line-green);
	background: #fff;
	border-radius: 50%;
	padding: 6px;
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
}
.bf-page__side-cta strong {
	font-size: .95rem;
	color: #131315;
}
.bf-page__side-cta > span {
	font-size: .8rem;
	color: #4a4d57;
	margin-bottom: 10px;
}
.bf-page__side-cta .bf-btn {
	width: 100%;
	justify-content: center;
}

/* Page responsive */
@media (max-width: 920px) {
	.bf-page__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.bf-page__side-cta { position: static; }
	/* Mobile: single column stack */
	.bf-page__layout {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 32px !important;
	}
	.bf-page__main { max-width: none; }
	.bf-page__side {
		position: static;
		margin-top: 8px;
		padding-top: 24px;
		border-top: 1px solid #ececef;
	}
	.bf-page__content { font-size: 1rem; line-height: 1.8; }
	.bf-page__content > p:first-of-type { font-size: 1.05rem; }
	.bf-page__content h2 { font-size: 1.32rem; margin-top: 1.6em; padding-bottom: 8px; }
	.bf-page__content h3 { font-size: 1.15rem; }
	.bf-page__article-section { padding: 32px 0 40px; }

	.bf-page__hero { padding: 0 0 18px; }
	.bf-page__hero-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.bf-page__hero-text { order: 2; }
	.bf-page__hero-media { order: 1; }
	.bf-page__hero-media img { max-width: 360px; border-radius: 14px; }
	.bf-page__head { margin-bottom: 14px; }
	.bf-page__cta { padding: 20px; margin-top: 24px; }

	/* Mobile: keep CTA buttons on one line, equal width */
	.bf-page__hero-actions {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.bf-page__hero-actions .bf-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 12px;
		font-size: .92rem;
		justify-content: center;
		white-space: nowrap;
	}
	.bf-page__hero-actions .bf-btn span {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* =========================================================
   Single Blog Post
   ========================================================= */
.bf-post {
	padding-bottom: 32px;
}
.bf-post__hero {
	max-height: 480px;
	overflow: hidden;
	margin-bottom: 24px;
	background: #f4f5f8;
}
.bf-post__hero-img,
.bf-post__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-height: 480px;
}

.bf-post__head {
	max-width: 1100px;
	margin: 0 auto 28px;
	padding-block: 12px 0;
}
.bf-post__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .82rem;
	color: #6b6f7a;
	margin-bottom: 12px;
}
.bf-post__cat-pill {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(29, 46, 92, 0.08);
	color: var(--brand);
	border-radius: 999px;
	font-weight: 600;
	font-size: .78rem;
	text-decoration: none;
}
.bf-post__cat-pill:hover { background: var(--brand); color: #fff; }
.bf-post__date,
.bf-post__read-time { font-size: .82rem; }
.bf-post__read-time::before { content: "·"; margin-right: 8px; opacity: .5; }

.bf-post__title {
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 800;
	color: #131315;
	margin: 0 0 12px;
	letter-spacing: -.01em;
	line-height: 1.25;
}
.bf-post__lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #4a4d57;
	margin: 0;
}

/* 2-col layout: main + sidebar */
.bf-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}
.bf-post__main { min-width: 0; }

/* Content typography */
.bf-post__content {
	font-size: 1rem;
	line-height: 1.85;
	color: #2c2d33;
}
.bf-post__content > * { max-width: 760px; }
.bf-post__content > .alignwide,
.bf-post__content > .alignfull { max-width: none; }
.bf-post__content h2,
.bf-post__content h3,
.bf-post__content h4 {
	color: #131315;
	margin-top: 1.6em;
	margin-bottom: .6em;
	line-height: 1.3;
}
.bf-post__content h2 { font-size: 1.5rem; }
.bf-post__content h3 { font-size: 1.25rem; }
.bf-post__content h4 { font-size: 1.1rem; }
.bf-post__content p { margin: 0 0 1.2em; }
.bf-post__content a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.bf-post__content a:hover { color: #16244a; }
.bf-post__content img,
.bf-post__content figure { border-radius: 10px; max-width: 100%; height: auto; }
.bf-post__content figure { margin: 1.5em 0; }
.bf-post__content figcaption { font-size: .85rem; color: #6b6f7a; margin-top: 6px; text-align: center; }
.bf-post__content blockquote {
	border-left: 3px solid var(--brand);
	padding: 4px 0 4px 18px;
	margin: 1.5em 0;
	color: #4a4d57;
	font-style: italic;
}
.bf-post__content ul,
.bf-post__content ol {
	padding-left: 24px;
	margin: 0 0 1.2em;
}
.bf-post__content li { margin-bottom: 6px; }
.bf-post__content code {
	background: #f4f5f8;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}

/* Share buttons (top + can be reused at bottom) */
.bf-share {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto 24px;
	padding: 14px 0;
	border-block: 1px solid #ececef;
}
.bf-share__label {
	font-size: .82rem;
	color: #6b6f7a;
	font-weight: 500;
}
.bf-share__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bf-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	text-decoration: none;
	position: relative;
}
.bf-share__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.bf-share__btn--line { background: #06C755; }
.bf-share__btn--fb   { background: #1877F2; }
.bf-share__btn--x    { background: #000; }
.bf-share__btn--copy { background: #f5ecdb; color: #b8893d; }
.bf-share__btn--copy:hover { background: #ead9b8; }

.bf-share__copied {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	background: #131315;
	color: #fff;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: .72rem;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.bf-share__btn.is-copied .bf-share__copied { opacity: 1; }
.bf-share__btn.is-copied::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #131315;
}

/* Tags */
.bf-post__tags {
	margin: 32px 0 24px;
	padding-top: 20px;
	border-top: 1px solid #ececef;
	font-size: .85rem;
	color: #6b6f7a;
}
.bf-post__tags-label {
	font-weight: 600;
	margin-right: 8px;
	color: #131315;
}
.bf-post__tags a {
	display: inline-block;
	padding: 4px 12px;
	background: #f4f5f8;
	color: #4a4d57;
	border-radius: 999px;
	font-size: .78rem;
	text-decoration: none;
	margin: 0 4px 4px 0;
}
.bf-post__tags a:hover { background: var(--brand); color: #fff; }

/* CTA at bottom of post */
.bf-post__cta {
	background: linear-gradient(135deg, rgba(6,199,85,.08), rgba(6,199,85,.02));
	border: 1px solid rgba(6,199,85,.2);
	border-radius: 14px;
	padding: 24px;
	margin-top: 32px;
	text-align: center;
}
.bf-post__cta h3 {
	margin: 0 0 6px;
	font-size: 1.15rem;
	color: #131315;
}
.bf-post__cta p {
	margin: 0 0 14px;
	color: #4a4d57;
	font-size: .92rem;
}

/* Sidebar */
.bf-post__side { min-width: 0; }
.bf-post__side-sticky {
	position: sticky;
	top: 100px;
}
.bf-post__side-title {
	font-size: 1rem;
	font-weight: 700;
	color: #131315;
	margin: 0 0 12px;
}
.bf-post__related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bf-post__related li a {
	display: flex;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	color: #131315;
	transition: background .15s ease;
}
.bf-post__related li a:hover { background: #f4f5f8; }
.bf-post__related-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: #f4f5f8;
}
.bf-post__related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bf-post__related-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.bf-post__related-text strong {
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.4;
	color: #131315;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.bf-post__related-text time {
	font-size: .72rem;
	color: #9ba0ab;
}

/* Single post responsive */
@media (max-width: 920px) {
	.bf-post__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.bf-post__side-sticky { position: static; }
	.bf-post__hero { max-height: 360px; }
	.bf-post__hero img { max-height: 360px; }
}

/* =========================================================
   Blog Archive variant — show excerpt on cards
   ========================================================= */
.bf-blog-grid--archive {
	margin-bottom: 24px;
}
.bf-blog-grid--archive .bf-blog-card__excerpt {
	font-size: .82rem;
	color: #6b6f7a;
	line-height: 1.5;
	margin: 8px 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* On archive, override mobile horizontal-scroll → use vertical grid */
@media (max-width: 600px) {
	.bf-blog-grid--archive {
		display: grid !important;
		grid-template-columns: 1fr;
		overflow: visible;
		padding: 0;
		margin-inline: 0;
		gap: 14px;
	}
	.bf-blog-grid--archive .bf-blog-grid__item {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* (Old pagination rules removed — see modern version above near line 1592) */
.bf-archive__pagination__legacy {
	display: none;
}

/* ---------- Footer — Apple-style ---------- */
.bf-footer {
	background: #f5f5f7;
	color: #1d1d1f;

	font-size: 12px;
	line-height: 1.5;
	border-top: 1px solid #d2d2d7;
}
.bf-footer__inner {
	padding-block: 28px 20px;
}

/* Brand row (logo) — no border, disclaimer's border is the only divider */
.bf-footer__brand-row {
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.bf-footer__logo {
	display: inline-block;
	line-height: 0;
}
.bf-footer__logo img {
	max-height: 48px;
	width: auto;
}

/* Social row */
.bf-footer__social-row {
	padding: 18px 0;
	border-bottom: 1px solid #d2d2d7;
}
.bf-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.bf-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #d2d2d7;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	text-decoration: none;
}
.bf-social:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
	border-color: transparent;
	text-decoration: none;
}
.bf-social__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.bf-social__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Per-platform hover background */
.bf-social--facebook:hover  { background: #1877F2; }
.bf-social--facebook:hover svg path { fill: #fff; }

.bf-social--instagram:hover { background: linear-gradient(45deg, #FED576, #F47133, #BC3081, #4C63D2); }
.bf-social--instagram:hover svg path { fill: #fff; }

.bf-social--tiktok:hover    { background: #000; }
.bf-social--tiktok:hover svg path { fill: #fff; }

.bf-social--youtube:hover   { background: #FF0000; }
.bf-social--youtube:hover svg path { fill: #fff; }

.bf-social--line:hover      { background: #06C755; }
.bf-social--line:hover svg path { fill: #fff; }
.bf-footer a {
	color: #1d1d1f;
	text-decoration: none;
}
.bf-footer a:hover {
	text-decoration: underline;
	color: #1d1d1f;
}

/* Disclaimer (top small print, optional) */
.bf-footer__disclaimer {
	color: #6e6e73;
	font-size: 12px;
	line-height: 1.5;
	padding-bottom: 18px;
	border-bottom: 1px solid #d2d2d7;
	margin-bottom: 4px;
}
.bf-footer__disclaimer p { margin: 0 0 .8em; }
.bf-footer__disclaimer p:last-child { margin-bottom: 0; }

/* Footer nav — desktop columns / mobile accordion */
.bf-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
	padding-block: 24px;
	border-bottom: 1px solid #d2d2d7;
}

/* Footer columns — div + button accordion */
.bf-footer__group {
	min-width: 0;
}
.bf-footer__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: #1d1d1f;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 10px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: default;
	text-align: left;
	font-family: inherit;
}
.bf-footer__chevron { display: none; flex-shrink: 0; color: #6e6e73; transition: transform .2s ease; }

/* Desktop — body always visible */
.bf-footer__group-body { display: block; }

.bf-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bf-footer__menu a,
.bf-footer .widget a {
	display: inline-block;
	color: #6e6e73;
	font-size: 12px;
	line-height: 1.5;
}
.bf-footer__menu a:hover,
.bf-footer .widget a:hover {
	color: #1d1d1f;
	text-decoration: underline;
}
.bf-footer .widget-title {
	color: #1d1d1f;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 10px;
}
.bf-footer .widget ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* "More ways to contact" line */
.bf-footer__more {
	margin: 0;
	padding: 18px 0;
	color: #1d1d1f;
	font-size: 12px;
	line-height: 1.5;
	border-bottom: 1px solid #d2d2d7;
}
.bf-footer__link {
	color: var(--brand);
	text-decoration: underline;
	margin: 0 4px;
}
.bf-footer__link:hover { text-decoration: underline; color: var(--brand); }

/* Bottom row — copyright + legal */
.bf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	padding-top: 18px;
	color: #6e6e73;
	font-size: 12px;
}
.bf-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
}
.bf-footer__legal a {
	color: #6e6e73;
	font-size: 12px;
}
.bf-footer__legal a:hover { color: #1d1d1f; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
	.bf-menu > li > a { padding: 10px 16px; }
}

@media (max-width: 1024px) {
	.bf-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* Mobile breakpoint — header: LINE LEFT | logo CENTER | hamburger RIGHT */
@media (max-width: 1024px) {
	.bf-header .bf-header__inner {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		grid-template-rows: auto !important;
		align-items: center !important;
		gap: 8px !important;
		min-height: 64px;
		padding-block: 8px !important;
	}

	.bf-header .bf-nav { display: none !important; }

	/* LINE on left (column 1) */
	.bf-header .bf-line-cta {
		grid-column: 1 / 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		padding: 0 !important;
		gap: 0 !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		height: auto !important;
		width: auto !important;
	}
	.bf-header .bf-line-cta:hover {
		background: transparent !important;
		transform: none !important;
		box-shadow: none !important;
	}
	.bf-header .bf-line-cta__icon,
	.bf-header .bf-line-cta__text { display: none !important; }
	.bf-header .bf-line-cta__mobile-img {
		display: block !important;
		height: 38px;
		width: auto;
		max-width: 130px;
	}

	/* Brand center (column 2) */
	.bf-header .bf-header__brand {
		grid-column: 2 / 3 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		width: auto !important;
		max-width: none !important;
		margin-top: 6px;
		margin-bottom: 0px;
	}
	.bf-header .bf-header__brand .custom-logo,
	.bf-header .bf-header__brand .custom-logo-link,
	.bf-header .bf-header__brand .custom-logo-link img,
	.bf-header .bf-header__brand img,
	.bf-header .bf-header__brand a {
		max-height: 44px !important;
		width: auto !important;
		max-width: none !important;
		display: inline-block !important;
	}

	/* Hamburger on right (column 3) */
	.bf-header .bf-menu-toggle {
		grid-column: 3 / 4 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		display: inline-flex !important;
	}

	body.bf-drawer-open { overflow: hidden; }
}

/* =========================================================
 * MOBILE DRAWER (anga.co.th-style slide-in panel)
 * ========================================================= */
.bf-drawer { display: none; }
.bf-drawer__backdrop { display: none; }

@media (max-width: 1024px) {
	.bf-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(92vw, 380px);
		background: #fff;
		box-shadow: -8px 0 24px rgba(0,0,0,.18);
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.4,0,.2,1);
		z-index: 1100;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.bf-drawer.is-open { transform: translateX(0); }

	.bf-drawer__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.5);
		z-index: 1090;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	.bf-drawer__backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}
	.bf-drawer__backdrop[hidden] { display: none; }

	.bf-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid #ececef;
		flex-shrink: 0;
	}
	.bf-drawer__logo-link img {
		max-height: 38px;
		width: auto;
		display: block;
	}
	.bf-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 999px;
		color: #1d1d1f;
		cursor: pointer;
		transition: background .15s ease;
	}
	.bf-drawer__close:hover { background: #f4f5f8; }

	.bf-drawer__panels {
		position: relative;
		flex: 1;
		overflow: hidden;
	}

	.bf-drawer__panel {
		position: absolute;
		inset: 0;
		background: #fff;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .28s cubic-bezier(.4,0,.2,1);
		padding: 8px 0 16px;
		-webkit-overflow-scrolling: touch;
	}
	.bf-drawer__panel.is-active { transform: translateX(0); }
	.bf-drawer__panel[data-panel="root"] { transform: translateX(0); }
	.bf-drawer__panel[data-panel="root"]:not(.is-active) { transform: translateX(-30%); }

	.bf-drawer__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.bf-drawer__list > li { margin: 0; }

	.bf-drawer__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 16px 22px;
		font-size: 16px;
		font-weight: 600;
		color: #1d1d1f;
		text-align: left;
		background: transparent;
		border: 0;
		border-bottom: 1px solid #f1f2f5;
		font-family: inherit;
		cursor: pointer;
		transition: background .12s ease;
	}
	.bf-drawer__item:hover,
	.bf-drawer__item:active {
		background: #f7f8fb;
		color: var(--brand);
	}
	.bf-drawer__item--has-sub svg {
		color: #9ba0ab;
		flex-shrink: 0;
	}
	.bf-drawer__item--has-sub:hover svg {
		color: var(--brand);
	}

	.bf-drawer__back {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 22px;
		font-size: 14px;
		font-weight: 600;
		color: var(--brand, #1d2e5c);
		background: transparent;
		border: 0;
		cursor: pointer;
		font-family: inherit;
	}
	.bf-drawer__back svg { stroke: var(--brand, #1d2e5c); }

	.bf-drawer__panel-title {
		margin: 0 0 8px;
		padding: 6px 22px 14px;
		font-size: 22px;
		font-weight: 700;
		color: #1d1d1f;
		border-bottom: 1px solid #ececef;
	}

	.bf-drawer__foot {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 14px 18px;
		border-top: 1px solid #ececef;
		background: #fafbfc;
		flex-shrink: 0;
	}
	.bf-drawer__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 11px 12px;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		transition: filter .15s ease, transform .1s ease;
	}
	.bf-drawer__cta:active { transform: scale(.98); }
	.bf-drawer__cta--line {
		background: var(--line-green, #06c755);
		color: #fff;
	}
	.bf-drawer__cta--line:hover { filter: brightness(.95); color: #fff; }
	.bf-drawer__cta--tel {
		background: #fff;
		color: var(--brand, #1d2e5c);
		border: 1.5px solid var(--brand, #1d2e5c);
	}
	.bf-drawer__cta--tel:hover {
		background: var(--brand, #1d2e5c);
		color: #fff;
	}
}

/* Apple-style footer accordion behaviour on mobile */
@media (max-width: 768px) {
	.bf-footer__nav {
		display: block;
		padding-block: 0;
		border-bottom: 0;
	}
	.bf-footer__group {
		border-bottom: 1px solid #d2d2d7;
	}
	.bf-footer__heading {
		padding: 14px 0;
		margin: 0;
		font-size: 13px;
		cursor: pointer;
	}
	.bf-footer__chevron {
		display: inline-block;
		transform: rotate(0deg);
	}
	.bf-footer__heading[aria-expanded="true"] .bf-footer__chevron {
		transform: rotate(180deg);
	}
	.bf-footer__heading[aria-expanded="false"] + .bf-footer__group-body {
		display: none;
	}
	.bf-footer__group-body {
		padding: 0 0 14px;
	}
	.bf-footer__more {
		padding: 18px 0;
	}
	.bf-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* =========================================================
 * Override WooCommerce default pagination styles
 * (.woocommerce body class adds rules with high specificity)
 * ========================================================= */
.bf-archive__pagination nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	border: 0 !important;
	background: #fff;
}
.bf-archive__pagination nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li {
	border-right: 0 !important;
	display: inline-flex !important;
	float: none !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
}
.bf-archive__pagination nav.woocommerce-pagination ul li a,
.bf-archive__pagination nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 0 !important;
	padding: 0 14px !important;
	margin: 0 !important;
	min-width: 40px;
	height: 40px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #4a4d57;
	font-size: .95rem;
	font-weight: 600;
	border-radius: 10px !important;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .18s ease, color .18s ease;
	line-height: 1;
}
.bf-archive__pagination nav.woocommerce-pagination ul li a:focus,
.bf-archive__pagination nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: #f4f5f8 !important;
	color: var(--brand) !important;
}
.bf-archive__pagination nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--brand) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(29, 46, 92, .25);
}
.bf-archive__pagination nav.woocommerce-pagination ul li span.dots,
.woocommerce nav.woocommerce-pagination ul li span.dots {
	background: transparent !important;
	color: #9ba0ab !important;
	min-width: 28px;
	box-shadow: none;
}

/* =========================================================
 * Pillar page article section — magazine 2-col reading layout
 * ========================================================= */
.bf-page__article-section {
	padding: 64px 0 72px;
	background: linear-gradient(180deg, #fafaf7 0%, #ffffff 120px);
}

/* Desktop: split text into 2 balanced reading columns */
@media (min-width: 768px) {
	.bf-page__content--columns {
		column-count: 2;
		column-gap: 64px;
		column-fill: balance;
	}
	/* Don't orphan headings at column bottom — keep with following paragraph */
	.bf-page__content--columns h2,
	.bf-page__content--columns h3,
	.bf-page__content--columns h4 {
		break-after: avoid-column;
		page-break-after: avoid;
	}
	/* Lead paragraph: don't span columns — flow normally */
	.bf-page__content--columns > p:first-of-type {
		break-after: auto;
	}
	/* H2 inside columns: lighter border so it doesn't dominate the narrower column */
	.bf-page__content--columns h2 {
		padding-bottom: 8px;
		border-bottom-width: 1px;
		font-size: clamp(1.2rem, 1rem + .5vw, 1.4rem);
	}
}

@media (max-width: 767px) {
	.bf-page__article-section { padding: 36px 0 48px; }
	.bf-page__content--columns {
		column-count: 1 !important;
		column-rule: 0 !important;
	}
}

/* Old :first-of-type lead paragraph rule removed — replaced by .bf-page__intro from meta field */

/* =========================================================
 * Page intro (from _bf_intro meta field) — under title, full width
 * ========================================================= */
.bf-page__intro {
	max-width: 920px;
	margin: 4px 0 24px;
	font-size: 1.02rem;
	line-height: 1.8;
	color: #2a2d35;
}
.bf-page__intro p {
	margin: 0 0 14px;
}
.bf-page__intro p:last-child {
	margin-bottom: 0;
}
.bf-page__intro a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

@media (max-width: 600px) {
	.bf-page__intro {
		font-size: .95rem;
		line-height: 1.7;
		margin: 4px 0 18px;
	}
}

/* Inline product grids inside blog posts (after first paragraph) */
.bf-post__inline-grids {
	margin: 28px 0 32px;
}
.bf-post__inline-grids .bf-grid-section {
	padding: 18px 0 22px;
}
.bf-post__inline-grids .bf-grid-section:first-child {
	padding-top: 6px;
}
.bf-post__inline-grids .bf-grid-section__title {
	font-size: 1.1rem;
}
.bf-post__inline-grids .bf-prod-grid {
	gap: 10px;
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	margin-left: 0 !important;
	list-style: none !important;
}
.bf-post__inline-grids ul,
.bf-post__inline-grids ol,
.bf-post__inline-grids li {
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	margin-left: 0 !important;
	list-style: none !important;
}
.bf-post__inline-grids,
.bf-post__inline-grids .bf-grid-section,
.bf-post__inline-grids .bf-grid-section__head,
.bf-post__inline-grids section.bf-grid-section {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
/* Kill .bf-container left/right padding inside inline grids */
.bf-post__inline-grids .bf-container,
.bf-post__inline-grids section.bf-grid-section .bf-container,
.bf-post__inline-grids .bf-grid-section .bf-container {
	padding-inline: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-inline: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}
/* Smaller compact product titles inside blog inline grids */
.bf-post__inline-grids .bf-prod__title {
	font-size: .76rem;
	line-height: 1.3;
	font-weight: 600;
	margin: 5px 6px 1px;
	min-height: 2em;
	-webkit-line-clamp: 2;
}
.bf-post__inline-grids .bf-prod__price {
	padding: 0 6px 6px;
}
.bf-post__inline-grids .bf-prod__current { font-size: .82rem; }
.bf-post__inline-grids .bf-prod__regular { font-size: .64rem; }
.bf-post__inline-grids .bf-prod__sale-badge {
	font-size: .58rem;
	padding: 2px 5px;
}
.bf-post__inline-grids .bf-prod__views {
	font-size: .6rem;
	padding: 2px 5px;
}
.bf-post__inline-grids .bf-prod__views svg { width: 9px; height: 9px; }

@media (max-width: 600px) {
	.bf-post__inline-grids {
		margin: 20px 0 24px;
	}
	.bf-post__inline-grids .bf-grid-section__title { font-size: .98rem; }
	.bf-post__inline-grids .bf-prod__title {
		font-size: .72rem;
		margin: 4px 5px 0;
		min-height: 1.9em;
	}
	.bf-post__inline-grids .bf-prod__current { font-size: .78rem; }
	.bf-post__inline-grids .bf-prod__regular { font-size: .6rem; }
}

/* Single blog post — mobile compact (no extra padding; .bf-container handles edges) */
@media (max-width: 600px) {
	.bf-post__hero {
		max-height: 280px;
		margin-bottom: 12px;
	}
	.bf-post__hero img { max-height: 280px; }
	.bf-post__head {
		padding-block: 8px 0;
		margin-bottom: 16px;
	}
	.bf-post__title {
		font-size: 1.35rem;
		margin-bottom: 8px;
	}
}

/* "View all" button below product grids */
.bf-grid-section__footer {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
.bf-grid-section__view-all-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border-radius: 999px;
	background: #fff;
	color: var(--brand);
	border: 1.5px solid var(--brand);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.bf-grid-section__view-all-btn:hover {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 4px 14px rgba(29, 46, 92, .25);
}
.bf-grid-section__view-all-btn:active {
	transform: scale(.98);
}
.bf-grid-section__view-all-btn svg {
	transition: transform .15s ease;
}
.bf-grid-section__view-all-btn:hover svg {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.bf-grid-section__footer { margin-top: 18px; }
	.bf-grid-section__view-all-btn {
		padding: 13px 26px;
		font-size: .9rem;
		line-height: 1.5;
	}
}

/* =========================================================
 * Blog archive — magazine layout (1 featured + 3-col grid)
 * ========================================================= */
.bf-blog-archive {
	padding-bottom: 40px;
}
.bf-blog-archive__head {
	max-width: 800px;
	margin: 0 auto 18px;
	padding-block: 8px 0;
}
.bf-blog-archive__title {
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	font-weight: 800;
	color: #131315;
	margin: 0 0 10px;
	letter-spacing: -.01em;
	line-height: 1.25;
}
.bf-blog-archive__desc {
	font-size: 1rem;
	line-height: 1.7;
	color: #4a4d57;
	margin: 0 0 6px;
}

/* Magazine grid: row 1 is featured (full width), rows 2+ are 3-col */
.bf-blog-grid--magazine {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 16px;
	list-style: none;
	margin: 16px 0 24px;
	padding: 0;
}
.bf-blog-grid--magazine .bf-blog-grid__item--feat {
	grid-column: span 3;
}

/* Featured card (row 1) — image left, content right */
.bf-blog-card--feat {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 14px;
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
	min-height: 320px;
}
.bf-blog-card--feat:hover {
	border-color: #cbd0db;
	box-shadow: 0 8px 24px rgba(20, 24, 40, .1);
	transform: translateY(-2px);
}
.bf-blog-card--feat .bf-blog-card__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 280px;
}
.bf-blog-card--feat .bf-blog-card__body {
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bf-blog-card--feat .bf-blog-card__title {
	font-size: 1.5rem;
	-webkit-line-clamp: 3;
	margin-bottom: 12px;
}
.bf-blog-card--feat .bf-blog-card__excerpt {
	font-size: .92rem;
	line-height: 1.65;
	-webkit-line-clamp: 4;
	margin-bottom: 14px;
}

/* Standard card (row 2+) */
.bf-blog-grid--magazine .bf-blog-card:not(.bf-blog-card--feat) {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 12px;
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
	height: 100%;
}
.bf-blog-grid--magazine .bf-blog-card:not(.bf-blog-card--feat):hover {
	border-color: #cbd0db;
	box-shadow: 0 6px 16px rgba(20, 24, 40, .08);
	transform: translateY(-2px);
}

/* Media: image + category badge overlay */
.bf-blog-grid--magazine .bf-blog-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f4f5f8;
	overflow: hidden;
}
.bf-blog-grid--magazine .bf-blog-card__img,
.bf-blog-grid--magazine .bf-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.bf-blog-grid--magazine .bf-blog-card:hover .bf-blog-card__media img {
	transform: scale(1.05);
}
.bf-blog-grid--magazine .bf-blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eef0f5 0%, #f4f5f8 50%, #e6eaf2 100%);
	color: #b6bbca;
}
.bf-blog-card__cat-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 5px 11px;
	background: rgba(255, 255, 255, .95);
	color: var(--brand);
	font-size: .72rem;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: .02em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Body */
.bf-blog-grid--magazine .bf-blog-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.bf-blog-grid--magazine .bf-blog-card__title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	color: #131315;
	margin: 0 0 8px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	letter-spacing: -.005em;
}
.bf-blog-grid--magazine .bf-blog-card__excerpt {
	font-size: .85rem;
	color: #5a6270;
	line-height: 1.55;
	margin: 0 0 12px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	flex: 1;
}
.bf-blog-grid--magazine .bf-blog-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	color: #8a8f9e;
	margin-top: auto;
}
.bf-blog-grid--magazine .bf-blog-card__dot { opacity: .5; }
.bf-blog-grid--magazine .bf-blog-card__rt { display: inline-flex; align-items: center; }

@media (max-width: 1024px) {
	.bf-blog-grid--magazine {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
	}
	.bf-blog-grid--magazine .bf-blog-grid__item--feat { grid-column: span 2; }
	.bf-blog-card--feat {
		grid-template-columns: 1fr 1fr;
		min-height: 260px;
	}
	.bf-blog-card--feat .bf-blog-card__body { padding: 20px 22px; }
	.bf-blog-card--feat .bf-blog-card__title { font-size: 1.3rem; }
}

@media (max-width: 600px) {
	.bf-blog-grid--magazine {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.bf-blog-grid--magazine .bf-blog-grid__item--feat { grid-column: span 1; }
	.bf-blog-card--feat {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.bf-blog-card--feat .bf-blog-card__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
	.bf-blog-card--feat .bf-blog-card__body { padding: 16px 16px 18px; }
	.bf-blog-card--feat .bf-blog-card__title { font-size: 1.15rem; -webkit-line-clamp: 3; }
	.bf-blog-card--feat .bf-blog-card__excerpt { -webkit-line-clamp: 3; }
}

/* Aggressive reset for inline grids inside blog content
   (the_content adds default underlines and list paddings) */
.bf-post__inline-grids ul,
.bf-post__inline-grids li {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
/* ========== Strip ALL text decoration from inline product cards ========== */
.bf-post__content .bf-post__inline-grids a,
.bf-post__content .bf-post__inline-grids .bf-prod,
.bf-post__content .bf-post__inline-grids .bf-prod *,
.bf-post__content .bf-post__inline-grids .bf-prod:hover,
.bf-post__content .bf-post__inline-grids .bf-prod:hover *,
.bf-post__content .bf-post__inline-grids h2,
.bf-post__content .bf-post__inline-grids h3,
.bf-post__content .bf-post__inline-grids span,
.bf-post__content .bf-post__inline-grids bdi,
.bf-post__inline-grids a,
.bf-post__inline-grids .bf-prod,
.bf-post__inline-grids .bf-prod *,
.bf-post__inline-grids h2,
.bf-post__inline-grids h3,
.bf-post__inline-grids span,
.bf-post__inline-grids bdi,
.bf-post__inline-grids .bf-prod__title,
.bf-post__inline-grids .bf-prod__price,
.bf-post__inline-grids .bf-prod__regular,
.bf-post__inline-grids .bf-prod__current,
.bf-post__inline-grids .bf-grid-section__view-all,
.bf-post__inline-grids .bf-grid-section__view-all-btn {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	background-image: none !important;
}
/* Restore strikethrough ONLY on cancelled price (sale display) */
.bf-post__inline-grids .bf-prod__regular,
.bf-post__inline-grids .bf-prod__regular .woocommerce-Price-amount,
.bf-post__inline-grids .bf-prod__regular bdi {
	text-decoration: line-through !important;
	text-decoration-line: line-through !importa