/* Butters Farms — the Jupiter-era design recreated for the Ollie block theme.
   Measurements come from the live buttersfarms.com computed styles (2026-09-02).
   Icons in assets/icons are the SVGs Jupiter rendered on the old site. */

/* ---------------------------------------------------------------
   0. Base
   --------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; }
.bf-svg { display: inline-block; width: 16px; height: 16px; fill: currentColor; flex: none; }
.entry-content a { text-decoration: none; }
.entry-content a:not(.wp-block-button__link):hover { color: #f97352; }
.wp-block-button__link:hover { color: #fff !important; }
.site-content { padding-bottom: 60px; }
.home .site-content { padding-bottom: 0; }

/* Jupiter's button transition */
.wp-block-button__link { transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, border-color 0.1s ease-in-out; }

/* ---------------------------------------------------------------
   1. Contact bar (Jupiter header toolbar): 35px, 13px text, pill search
   --------------------------------------------------------------- */
.bf-contact-bar {
	padding: 0 20px !important;
	font-size: 13px;
	line-height: 35px;
	min-height: 35px;
}
.bf-contact-bar .bf-contact-items { gap: 20px; }
.bf-contact-bar .bf-ico { display: inline-flex; align-items: center; gap: 6px; line-height: 35px; color: #fff; }
.bf-contact-bar .bf-ico .bf-svg { width: 16px; height: 16px; }
.bf-contact-bar a { color: #fff; text-decoration: none; }
.bf-contact-bar a:hover { color: #fff; opacity: 0.85; }
.bf-contact-bar .wp-block-search { width: 90px; margin: 0; }
.bf-contact-bar .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.bf-contact-bar .wp-block-search .wp-block-search__input {
	width: 90px !important;
	height: 23px !important;
	min-height: 0 !important;
	padding: 3px 8px 3px 28px !important;
	border: 0 !important;
	border-radius: 40px !important;
	background: rgba(255, 255, 255, 0.2) url("../icons/search.svg") 11px 50% / 12px 12px no-repeat !important;
	color: #ddd !important;
	font-size: 12px !important;
	line-height: 16px !important;
	box-shadow: none !important;
}
.bf-contact-bar .wp-block-search__input::placeholder { color: #ddd; opacity: 1; }
.bf-contact-bar .wp-block-search .wp-block-search__input:focus { outline: none; background-color: rgba(255, 255, 255, 0.3) !important; width: 160px !important; }
.bf-contact-bar .wp-block-search__button { display: none; }

@media (max-width: 781px) {
	.bf-contact-bar { justify-content: center; }
	.bf-contact-bar .bf-contact-items { justify-content: center; }
	.bf-contact-bar .bf-ico:first-child,
	.bf-contact-bar .wp-block-search { display: none; }
}

/* ---------------------------------------------------------------
   2. Header: 180px logo, 53px nav row, 13px uppercase links,
      green underline on the current item, charcoal dropdown.
   --------------------------------------------------------------- */
.bf-header { padding: 0 !important; }
.bf-header > * + * { margin-block-start: 0 !important; }
.bf-logo { line-height: 0; }
.bf-logo .wp-block-site-logo { margin: 0; }
.bf-logo .wp-block-site-logo img { width: 180px; height: 180px; display: block; }
.bf-nav { padding: 0 !important; border-top: 1px solid #fff; }
.bf-nav .wp-block-navigation { gap: 0; }
.bf-nav .wp-block-navigation-item { margin: 0; }
.bf-nav .wp-block-navigation-item__content,
.bf-nav .wp-block-navigation-item__content:hover,
.bf-nav .current-menu-item > .wp-block-navigation-item__content {
	display: block;
	padding: 14px 20px 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #444;
	text-decoration: none !important;
	transition: color 0.15s ease-out;
}
/* Jupiter menu-hover-style-5: a 2px bar that grows from the left */
.bf-nav .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 14px;
	background: #18572e;
	opacity: 0;
	transform: scale(0, 1);
	transform-origin: left center;
	transition: all 0.15s ease-out;
}
.bf-nav .wp-block-navigation-item__content:hover,
.bf-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: #18572e; }
.bf-nav .current-menu-item > .wp-block-navigation-item__content::after,
.bf-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.bf-nav .wp-block-navigation-item__content:hover::after,
.bf-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { opacity: 1; transform: scale(1, 1); }
.bf-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 20px; }

.bf-nav .wp-block-navigation .wp-block-navigation__submenu-container {
	background: #43474d !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 8px 0 !important;
	margin-top: 0;
	min-width: 230px;
	box-shadow: none;
	left: 0;
}
.bf-nav .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.bf-nav .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	display: flex !important;
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	overflow: visible;
}
.bf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 20px;
	font-size: 12px;
	line-height: 18px;
	color: #b3b3b3;
	letter-spacing: 1px;
}
.bf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.bf-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: #fff; }
.bf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #fff; background: transparent; }

/* Sticky nav row (Jupiter header-style-2): pinned once it scrolls off */
.bf-nav-spacer { display: none; }
.bf-stuck .bf-nav-spacer { display: block; }
.bf-stuck .bf-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 210;
	background: #fff;
	border-bottom: 1px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.site-header { position: relative; z-index: 200; }

/* ---------------------------------------------------------------
   3. Inner-page title strip: 30px light uppercase title, breadcrumb right
   --------------------------------------------------------------- */
.bf-page-head {
	padding: 35px 20px 20px !important;
	border-bottom: 1px solid #ededed;
	margin-bottom: 50px !important;
}
.bf-page-head .wp-block-post-title {
	margin: 0 0 15px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #4d4d4d;
}
.bf-breadcrumb {
	margin: 0;
	padding: 10px 0 0;
	text-align: right;
	font-size: 10px;
	font-weight: 700;
	line-height: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #919191;
}
.bf-breadcrumb a { color: #919191; text-decoration: none; }
.bf-breadcrumb a:hover { color: #18572e; }
.bf-breadcrumb .sep { margin: 0 4px; }
.bf-breadcrumb .current { color: #4d4d4d; }

/* ---------------------------------------------------------------
   4. Home hero: full-height photo (top-anchored), Playfair title,
      two 220px navy buttons, white curve at the base.
   --------------------------------------------------------------- */
.bf-hero.wp-block-cover {
	min-height: calc(100vh - 54px);
	position: relative;
	overflow: hidden;
	margin-top: 0 !important;
}
.bf-hero .wp-block-cover__image-background { object-position: 50% 0; }
.bf-hero .wp-block-cover__inner-container { width: 100%; }
.bf-hero .wp-block-cover__inner-container > .wp-block-group { padding-top: 0 !important; padding-bottom: 60px !important; }
.bf-hero h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 50px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: 8px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 38px;
	text-align: center;
}
.bf-hero .wp-block-buttons { gap: 30px; }
.bf-hero .wp-block-button__link { min-width: 220px; text-align: center; }
.bf-hero::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: -12%;
	right: -12%;
	bottom: -90px;
	height: 170px;
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	pointer-events: none;
}
@media (max-width: 781px) {
	.bf-hero h1 { font-size: 30px; line-height: 40px; letter-spacing: 4px; }
	.bf-hero .wp-block-buttons { gap: 15px; }
}

/* ---------------------------------------------------------------
   5. Home sections
   --------------------------------------------------------------- */
.bf-section-title { margin-top: 110px !important; margin-bottom: 100px !important; }
.bf-tiles { margin-bottom: 70px !important; }
.bf-tiles .wp-block-image { margin: 0; }
.bf-tiles .wp-block-image img { width: 300px; max-width: 100%; }
.bf-tile-title { font-size: 25px !important; font-weight: 600; margin-top: 60px !important; margin-bottom: 0 !important; }
.bf-tile-title a { color: #404040; text-decoration: none; }
.bf-tile-title a:hover { color: #f97352; }
.bf-btn-small { margin-bottom: 110px !important; }
.bf-btn-small .wp-block-button__link {
	font-size: 12px;
	letter-spacing: 1px;
	padding: 14px 24px;
	background: #ddd4c1;
	color: #fff;
}
.bf-btn-small .wp-block-button__link:hover { background: #ddd4c1; color: #fff; }
.bf-lead-wrap { margin-bottom: 90px !important; }
.bf-lead { font-size: 24px !important; font-weight: 600; line-height: 31px; margin-top: 0 !important; margin-bottom: 20px !important; }

/* Process steps: 180px outlined circles, 70px grey icons, dotted joiner */
.bf-features { position: relative; margin-bottom: 100px !important; }
.bf-features::before {
	content: "";
	position: absolute;
	top: 90px;
	left: 12.5%;
	right: 12.5%;
	border-top: 1px dashed #ddd;
	z-index: 0;
}
.bf-features .wp-block-column { position: relative; z-index: 1; padding: 0 15px; }
.bf-features .wp-block-column::before {
	content: "";
	display: block;
	width: 180px;
	height: 180px;
	margin: 0 auto 40px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #d0d0d0;
	background-color: var(--wp--preset--color--base);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70px 70px;
	transition: background-color 0.3s, box-shadow 0.3s;
}
.bf-features .wp-block-column:nth-child(1)::before { background-image: url("../icons/step-web.svg"); }
.bf-features .wp-block-column:nth-child(2)::before { background-image: url("../icons/step-cup.svg"); }
.bf-features .wp-block-column:nth-child(3)::before { background-image: url("../icons/step-leaf.svg"); }
.bf-features .wp-block-column:nth-child(4)::before { background-image: url("../icons/step-truck.svg"); }
/* Hover: tan fill, 6px halo, white icon sliding out right and back in from the left */
.bf-features .wp-block-column:hover::before {
	background-color: #ddd4c1;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
	animation: bf_icon_slide 0.3s forwards;
}
.bf-features .wp-block-column:nth-child(1):hover::before { background-image: url("../icons/step-web-white.svg"); }
.bf-features .wp-block-column:nth-child(2):hover::before { background-image: url("../icons/step-cup-white.svg"); }
.bf-features .wp-block-column:nth-child(3):hover::before { background-image: url("../icons/step-leaf-white.svg"); }
.bf-features .wp-block-column:nth-child(4):hover::before { background-image: url("../icons/step-truck-white.svg"); }
@keyframes bf_icon_slide {
	0% { background-position: 50% 50%; }
	49% { background-position: 200% 50%; }
	50% { background-position: -100% 50%; }
	100% { background-position: 50% 50%; }
}
.bf-features h3 { font-size: 16px !important; margin-top: 0 !important; margin-bottom: 22px !important; }
.bf-features p { font-size: 14px; }

/* Instagram feed at the old 1170px width */
.bf-instagram { max-width: 1170px !important; margin-left: auto; margin-right: auto; }
.bf-instagram #sb_instagram .sbi_header_text h3,
.bf-instagram #sb_instagram .sbi_header_text .sbi_bio_info h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; color: #404040; }
.bf-follow { margin-top: 40px !important; margin-bottom: 60px !important; }
.bf-follow a { color: #2e2e2e; }
.bf-follow a:hover { color: #f97352; }

/* ---------------------------------------------------------------
   6. Fancy titles (mk_fancy_title pattern style): 14px bold uppercase
      with Jupiter's dotted pattern running to the right.
   --------------------------------------------------------------- */
.bf-fancy,
.bf-variety h2 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0 !important; margin-bottom: 18px !important;
	padding-top: 5px;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 18.2px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #404040;
}
.bf-fancy::after,
.bf-variety h2::after {
	content: "";
	flex: 1 1 auto;
	height: 7px;
	background: url("../img/fancy-title-pattern.png") 0 50% repeat-x;
}
.bf-fancy a { color: #404040; }

/* ---------------------------------------------------------------
   7. Product variety cards: photo beside a fancy title and a
      checkmark list (mk_custom_list, check icon in the tan accent).
   --------------------------------------------------------------- */
.bf-variety { margin-top: 0 !important; margin-bottom: 50px !important; }
.bf-variety .wp-block-image { margin: 0; }
.bf-variety ul.wp-block-list { list-style: none; padding-left: 0; margin: 0; }
.bf-variety ul.wp-block-list li {
	position: relative;
	padding-left: 21px;
	margin-bottom: 6px;
	line-height: 24px;
	color: #777;
}
.bf-variety ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background: url("../icons/check.svg") center / 16px 16px no-repeat;
}

/* Products index: two columns, fancy title over each linked photo */
.bf-product-grid { gap: 30px; }
.bf-product-grid .wp-block-image { margin: 0 0 40px; }
.bf-product-grid .wp-block-image img { width: 100%; height: auto; }

/* ---------------------------------------------------------------
   8. Why Buy From Us: two text columns, inline coral headings
   --------------------------------------------------------------- */
.bf-why { gap: 30px; }
.bf-inline-heading {
	font-size: 14px !important;
	font-weight: 700;
	line-height: 23.24px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	color: #f97352;
	margin-top: 0 !important; margin-bottom: 0 !important;
}
.bf-inline-heading.is-italic { font-style: italic; }
.bf-inline-heading + p { margin-block-start: 0 !important; }
.bf-why p { margin: 0 0 20px; }

/* ---------------------------------------------------------------
   9. Sales: ornamental title, grey rounded panes, tan table headers
   --------------------------------------------------------------- */
.bf-ornamental {
	display: flex;
	align-items: center;
	gap: 35px;
	margin-top: 0 !important; margin-bottom: 60px !important;
	font-size: 30px !important;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	color: #404040;
}
.bf-ornamental::before,
.bf-ornamental::after {
	content: "";
	flex: 1 1 auto;
	height: 5px;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
}
.bf-intro { margin-bottom: 60px !important; }
.bf-pane {
	background: #f8f8f8;
	border: 1px solid #f0f0f0;
	border-radius: 5px;
	padding: 14px 20px 6px;
	margin-bottom: 40px !important;
}
.bf-pane-title {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 0 !important; margin-bottom: 18px !important;
	font-size: 16px !important;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	color: #404040;
}
.bf-pane-title::before,
.bf-pane-title::after { content: ""; flex: 1 1 auto; border-top: 1px solid #e5e5e5; }
.bf-pane .bf-fancy { margin-top: 10px !important; }
.bf-pane .wp-block-table { margin: 0 0 20px; }
.bf-pane .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
	font-size: 14px;
	line-height: 23px;
}
.bf-pane .wp-block-table th,
.bf-pane .wp-block-table td { border: 1px solid #fff; text-align: center; vertical-align: top; }
.bf-pane .wp-block-table th {
	background: #ddd4c1;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: 18px 12px;
}
.bf-pane .wp-block-table td { padding: 12px; color: #777; }
.bf-pane .wp-block-table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.04); }
.bf-pane .wp-block-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); }
.bf-pane .wp-block-table td strong { color: #f97352; font-weight: 700; }
.bf-pane .wp-block-table sup,
.bf-pane .wp-block-table sub { font-size: 10px; line-height: 0; }
.bf-footnote { font-size: 11px; line-height: 1.6; margin-top: 0 !important; margin-bottom: 12px !important; }
.bf-footnote strong { color: #404040; }
.bf-contact-note { font-size: 16px; margin-top: 50px !important; }

/* ---------------------------------------------------------------
   10. Shipping: leaf-bullet list (mk_custom_list, leaf icon)
   --------------------------------------------------------------- */
.page-id-92 ul.wp-block-list { list-style: none; padding: 0; margin: 0 0 60px; }
.page-id-92 ul.wp-block-list li { position: relative; padding-left: 21px; margin: 0 0 6px; line-height: 24px; }
.page-id-92 ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background: url("../icons/leaf.svg") center / 16px 16px no-repeat;
}

/* ---------------------------------------------------------------
   11. Galleries: Jupiter's masonry crops (square tiles, 8px gutters)
   --------------------------------------------------------------- */
.page-id-90 .wp-block-gallery,
.page-id-344 .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	grid-auto-flow: dense;
	gap: 8px !important;
	margin: 8px 0 20px;
}
.page-id-90 .wp-block-gallery > .wp-block-image,
.page-id-344 .wp-block-gallery > .wp-block-image {
	width: auto !important;
	margin-top: 0 !important; margin-bottom: 0 !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.page-id-90 .wp-block-gallery > .wp-block-image img,
.page-id-344 .wp-block-gallery > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.page-id-90 .wp-block-gallery > .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.page-id-344 .wp-block-gallery > .wp-block-image:nth-child(5n + 2) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 600px) {
	.page-id-90 .wp-block-gallery,
	.page-id-344 .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Mini Bales: three framed columns */
.page-id-326 .wp-block-gallery { gap: 8px !important; }
.page-id-326 .wp-block-gallery figure.wp-block-image {
	width: calc(33.333% - 6px) !important;
	margin-top: 0 !important; margin-bottom: 0 !important;
	padding: 6px;
	background: #fff;
	border: 1px solid #e6e6e6;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
@media (max-width: 600px) {
	.page-id-326 .wp-block-gallery figure.wp-block-image { width: calc(50% - 4px) !important; }
}

/* ---------------------------------------------------------------
   12. Contact page: icon list, three address boxes, directions
   --------------------------------------------------------------- */
.bf-icon-list { list-style: none; padding: 0; margin: 0; }
.bf-icon-list li { position: relative; padding-left: 25px; margin: 0 0 10px; line-height: 20px; }
.bf-icon-list li .bf-svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; }
.bf-contact-list .bf-icon-list li { font-size: 14px; color: #777; }
.bf-contact-list .bf-icon-list .bf-svg { fill: #777; }
.bf-contact-list .bf-icon-list a { color: #2e2e2e; }
.bf-contact-list .bf-icon-list a:hover { color: #f97352; }
.bf-contact-grid { gap: 30px; margin-bottom: 40px !important; }
.bf-box { text-align: center; }
.bf-box .bf-box-icon { display: block; width: 32px; height: 32px; margin: 0 auto 8px; fill: #404040; }
.bf-box h4 { margin-top: 0 !important; margin-bottom: 22px !important; font-size: 16px !important; }
.bf-box p { margin: 0; }
.bf-directions {
	font-size: 30px !important;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #444;
	margin-top: 0 !important; margin-bottom: 20px !important;
}
.bf-map { max-width: 1170px !important; margin-left: auto; margin-right: auto; }
.bf-map img { width: 100%; height: auto; }
.bf-map figcaption { font-size: 11px; color: #999; text-align: right; margin-top: 4px; }
.bf-map-btn { margin-top: 20px !important; }

/* ---------------------------------------------------------------
   12b. Gallery hover (Jupiter "fadebox"): tan overlay at 85%, greyscale
        photo, white plus-circle; the click opens the core lightbox.
   --------------------------------------------------------------- */
.page-id-90 .wp-block-gallery > .wp-block-image,
.page-id-344 .wp-block-gallery > .wp-block-image,
.page-id-326 .wp-block-gallery > .wp-block-image,
.page-id-92 .wp-block-gallery > .wp-block-image { position: relative; }
.page-id-90 .wp-block-gallery > .wp-block-image img,
.page-id-344 .wp-block-gallery > .wp-block-image img,
.page-id-326 .wp-block-gallery > .wp-block-image img,
.page-id-92 .wp-block-gallery > .wp-block-image img { transition: filter 0.2s ease; }
.page-id-90 .wp-block-gallery > .wp-block-image::before,
.page-id-344 .wp-block-gallery > .wp-block-image::before,
.page-id-326 .wp-block-gallery > .wp-block-image::before,
.page-id-92 .wp-block-gallery > .wp-block-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #ddd4c1 url("../icons/plus-circle.svg") center / 48px 48px no-repeat;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	pointer-events: none;
}
.page-id-326 .wp-block-gallery > .wp-block-image::before { inset: 6px; }
.page-id-90 .wp-block-gallery > .wp-block-image:hover::before,
.page-id-344 .wp-block-gallery > .wp-block-image:hover::before,
.page-id-326 .wp-block-gallery > .wp-block-image:hover::before,
.page-id-92 .wp-block-gallery > .wp-block-image:hover::before { opacity: 0.85; }
.page-id-90 .wp-block-gallery > .wp-block-image:hover img,
.page-id-344 .wp-block-gallery > .wp-block-image:hover img,
.page-id-326 .wp-block-gallery > .wp-block-image:hover img,
.page-id-92 .wp-block-gallery > .wp-block-image:hover img { filter: grayscale(100%); }
.wp-block-gallery .wp-lightbox-container button { z-index: 3; }

/* ---------------------------------------------------------------
   12c. Reveal on scroll (Jupiter mk-animate-element) and back-to-top.
        butters.js adds .bf-anim/.bf-anim-* on load and .bf-in in view.
   --------------------------------------------------------------- */
.bf-anim { opacity: 0; }
.bf-anim.bf-in.bf-anim-fade { animation: bf_fade 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) both; }
.bf-anim.bf-in.bf-anim-top { animation: bf_top 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95) both; }
@keyframes bf_fade { from { opacity: 0.1; } to { opacity: 1; } }
@keyframes bf_top { from { opacity: 0; transform: translateY(-20%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.bf-anim { opacity: 1; animation: none !important; }
}
.bf-go-top {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 300;
	width: 45px;
	height: 45px;
	background: rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, background-color 0.2s ease, visibility 0s linear 0.3s;
}
.bf-go-top.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.bf-go-top:hover { background: rgba(0, 0, 0, 0.3); }
.bf-go-top svg { position: absolute; top: 15px; left: 15px; width: 16px; height: 16px; fill: #fff; }

/* ---------------------------------------------------------------
   12d. Sales tabs (WPBakery classic grey tabs, rebuilt by butters.js)
   --------------------------------------------------------------- */
.bf-tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 -1px;
	padding: 0;
	position: relative;
	z-index: 1;
}
.bf-tabs li { margin: 1px 0 0 1px; }
.bf-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	font-size: 14px;
	color: #666;
	background: #ebebeb;
	border: 1px solid #e3e3e3;
	border-radius: 5px 5px 0 0;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}
.bf-tabs a:hover { background: #f1f1f1; color: #666; }
.bf-tabs a.is-active { background: #f8f8f8; border-color: #f0f0f0 #f0f0f0 transparent; }
.bf-tabs .bf-tab-icon { width: 16px; height: 16px; fill: #666; }
.bf-tabs-wrap .bf-pane { border-radius: 0 5px 5px 5px; margin-top: 0 !important; }
.bf-tabs-wrap .bf-pane[hidden] { display: none; }
.bf-tabs-wrap { margin-bottom: 40px; }

/* ---------------------------------------------------------------
   12e. Search results (Jupiter's search loop)
   --------------------------------------------------------------- */
.bf-page-head-search .bf-search-title,
.bf-page-head-search .bf-search-subtitle { text-align: left; }
.bf-page-head-search .bf-search-title {
	margin-top: 0 !important;
	margin-bottom: 12px !important;
	font-size: 30px !important;
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #4d4d4d;
}
.bf-page-head-search .bf-search-subtitle {
	margin-top: 0 !important;
	margin-bottom: 15px !important;
	font-size: 14px !important;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #777;
	padding-left: 3px;
}
.bf-search-results { margin-top: 40px !important; }
.bf-search-again { margin-bottom: 12px !important; }
.bf-search-form .wp-block-search__inside-wrapper { border: 1px solid #e5e5e5; border-radius: 3px; padding: 0; }
.bf-search-form .wp-block-search__input { border: 0; padding: 12px 40px 12px 16px; font-size: 14px; min-height: 0; background: #fff url("../icons/search-grey.svg") right 16px center / 14px 14px no-repeat; }
.bf-search-form .wp-block-search__button { display: none; }
.bf-search-query { margin-top: 60px !important; }
.bf-search-item { padding: 0 0 18px; margin: 0 0 30px !important; border-bottom: 1px solid #ededed; }
.bf-search-item-title { font-size: 18px !important; font-weight: 700; text-transform: uppercase; margin: 0 0 12px !important; }
.bf-search-item-title a { color: #404040; text-decoration: none; }
.bf-search-item-title a:hover { color: #f97352; }
.bf-search-meta { gap: 5px; font-size: 14px; color: #777; }
.bf-search-meta p { margin: 0; }
.bf-search-meta .wp-block-post-date { color: #b1aa9a; }
.wp-block-query-pagination { margin-top: 30px; font-size: 14px; }

/* ---------------------------------------------------------------
   13. Footer: tan field artwork, chevron nav, contact list,
       charcoal sub-footer with the Playfair copyright line
   --------------------------------------------------------------- */
.bf-footer {
	background: transparent url("../img/footer-bg.png") 50% 0 / cover no-repeat;
	padding: 60px 20px 40px !important;
	margin-top: 0 !important;
	color: #1a2b56;
	font-size: 16px;
}
.bf-footer .bf-footer-grid { gap: 0; }
.bf-footer .wp-block-column { padding: 0 2%; }
.bf-footer-nav,
.bf-footer-contact { padding-top: 104px !important; }
.bf-footer-logo { text-align: center; }
.bf-footer-logo img { display: block; width: 120px; height: auto; margin: 0 auto; }
.bf-footer-nav .wp-block-navigation { gap: 0; }
.bf-footer-nav .wp-block-navigation-item { display: block; margin: 0; }
.bf-footer-nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 5px 15px 5px 5px;
	color: #1a2b56;
	font-size: 16px;
	line-height: 23px;
	text-decoration: none;
}
.bf-footer-nav .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 14px;
	margin-right: 7px;
	vertical-align: -1px;
	background: url("../icons/angle-right.svg") center / contain no-repeat;
}
.bf-footer-nav .wp-block-navigation-item__content:hover { color: #c89c00; }
.bf-footer-nav .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; background: rgba(0, 0, 0, 0.03); }
.bf-footer-title {
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 0 !important; margin-bottom: 15px !important;
}
.bf-footer-contact .bf-icon-list li { font-size: 16px; color: #1a2b56; }
.bf-footer-contact .bf-icon-list .bf-svg { fill: #1a2b56; }
.bf-footer-contact .bf-icon-list a { color: #1a2b56; white-space: nowrap; }
.bf-footer .wp-block-column.bf-footer-contact { padding-right: 0; }
.bf-footer-contact .bf-icon-list a:hover { color: #c89c00; }
.bf-subfooter { padding: 0 20px !important; }
.bf-subfooter .bf-copy,
.bf-subfooter .bf-powered { margin: 0; padding: 25px 0 20px; color: #8c8e91; }
.bf-subfooter .bf-copy { font-family: var(--wp--preset--font-family--display); font-size: 11px; letter-spacing: 1px; line-height: 16px; }
.bf-subfooter .bf-powered { font-size: 12px; line-height: 16px; }
.bf-subfooter .bf-powered a { color: #8c8e91; text-decoration: none; }
.bf-subfooter .bf-powered a:hover { color: #fff; }

@media (max-width: 781px) {
	.bf-footer .wp-block-column:empty { display: none; }
	.bf-footer-nav,
	.bf-footer-contact { padding-top: 30px !important; }
	.bf-footer-logo { order: -1; }
}

/* ---------------------------------------------------------------
   14. Desktop-only tweaks
   --------------------------------------------------------------- */
@media (min-width: 782px) {
	.bf-nav .wp-block-navigation { flex-wrap: nowrap; }
}