/* =========================================================
   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%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 28px);
}

/* ---------- 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;
	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; }

/* ---------- 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 {
	padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px);
	background: #fff;
	overflow: hidden;
}
.bf-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

/* 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 {
		padding-block: 12px 16px;
	}
	.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-bottom: 14px; }

	/* 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 { padding-block: 8px 14px; }
	.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 16px; }
	.bf-cta__grid { gap: 12px; }
}

/* =========================================================
   Homepage — Category Cards (app-density)
   ========================================================= */
.bf-cats {
	padding-block: 20px 24px;
}
.bf-cats__heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: #131315;
	margin: 0 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;
		-webkit-overflow-scrolling: touch;
		gap: 10px;
		padding-bottom: 6px;
		margin-inline: calc(clamp(16px, 3vw, 28px) * -1);
		padding-inline: clamp(16px, 3vw, 28px);
		scrollbar-width: none;
	}
	.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;
}

.bf-prod__view-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--brand);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 4px 7px;
	border-radius: 4px;
	line-height: 1;
	z-index: 2;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity .2s ease, transform .2s ease, background .15s ease;
	box-shadow: 0 2px 6px rgba(29, 46, 92, 0.25);
}
.bf-prod:hover .bf-prod__view-badge {
	opacity: 1;
	transform: translateY(0);
}
.bf-prod__view-badge svg { color: inherit; }

/* On touch devices (no hover), show badge always */
@media (hover: none) {
	.bf-prod__view-badge {
		opacity: 1;
		transform: none;
	}
}

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

.bf-prod__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	padding: 0 8px 10px;
	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 {
	padding-block: 16px 24px;
}

.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;
		-webkit-overflow-scrolling: touch;
		gap: 10px;
		padding-bottom: 6px;
		margin-inline: calc(clamp(16px, 3vw, 28px) * -1);
		padding-inline: clamp(16px, 3vw, 28px);
		scrollbar-width: none;
	}
	.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 16px; }
	.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;
}
.bf-archive__crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: .82rem;
	color: #6b6f7a;
	margin-bottom: 8px;
}
.bf-archive__crumb a { color: #6b6f7a; }
.bf-archive__crumb a:hover { color: var(--brand); }
.bf-archive__crumb .is-current { color: #131315; font-weight: 600; }

.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 ---------- */
.bf-archive__pagination {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}
.bf-archive__pagination .woocommerce-pagination ul.page-numbers,
.bf-archive__pagination .nav-links {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
}
.bf-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #d4d8e2;
	border-radius: 8px;
	color: #131315;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bf-archive__pagination .page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand);
}
.bf-archive__pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.bf-archive__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* ---------- 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: 12px 32px;
}

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

/* Gallery */
.bf-sp__media {
	position: relative;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 14px;
	padding: 14px;
	overflow: hidden;
}
.bf-sp__sale-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
	background: #e74c3c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
	letter-spacing: .02em;
}

/* 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;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: #f4f5f8;
	border-radius: 10px;
}
.bf-sp__trust-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brand);
}
.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; }
	.bf-sp__trust { grid-template-columns: 1fr; }
	.bf-sp__line-box-actions { flex-direction: column; }
	.bf-sp__line-box-actions .bf-btn { width: 100%; }
	.related.products ul.products { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.bf-sp__media .flex-control-thumbs li { width: calc(25% - 6px) !important; }
}

/* =========================================================
   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: 760px;
	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;
	}
}

/* =========================================================
   Pagination — also used on blog archive
   ========================================================= */
.bf-archive__pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}
.bf-archive__pagination .page-numbers,
.bf-archive__pagination .nav-previous a,
.bf-archive__pagination .nav-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #d4d8e2;
	border-radius: 8px;
	color: #131315;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}

/* ---------- Footer — Apple-style ---------- */
.bf-footer {
	background: #f5f5f7;
	color: #1d1d1f;
	margin-top: 80px;
	font-size: 12px;
	line-height: 1.5;
	border-top: 1px solid #d2d2d7;
}
.bf-footer__inner {
	padding-block: 28px 20px;
}

/* Brand row (logo) */
.bf-footer__brand-row {
	padding-bottom: 18px;
	border-bottom: 1px solid #d2d2d7;
	margin-bottom: 18px;
}
.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;
}

/* details groups */
.bf-footer__group {
	min-width: 0;
}
.bf-footer__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #1d1d1f;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 10px;
	cursor: default;
	list-style: none;
}
.bf-footer__heading::-webkit-details-marker { display: none; }
.bf-footer__chevron { display: none; flex-shrink: 0; color: #6e6e73; transition: transform .2s ease; }

/* Force desktop to always show group body (override native details collapse) */
.bf-footer__group-body { display: block !important; }

.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: