/*
Theme Name:   Bead Formations
Theme URI:    https://beadformations.com/
Description:  Crimson & cream redesign of the Bead Formations storefront, built as a Storefront child theme.
Author:       Bead Formations
Template:     storefront
Version:      1.0.0
Text Domain:  bead-formations
*/

/* ==========================================================================
   Fonts — self-hosted (no external request, so the page never blocks on
   an outside network call to load).
   ========================================================================== */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("fonts/manrope-variable.woff2") format("woff2");
}

/* ==========================================================================
   Design tokens
   Colors sampled directly from the approved Figma reference screenshots.
   ========================================================================== */
:root {
	--bf-crimson: #9d2236;
	--bf-crimson-dark: #7c1b2b;
	--bf-cream: #fbf6f2;
	--bf-blush: #e6cfc9;
	--bf-dark: #2a2722;
	--bf-white: #ffffff;
	--bf-text: #2a2722;
	--bf-text-muted: #75706a;
	--bf-border: #e7ded7;
	/* Meets WCAG 1.4.11 (3:1) against both white and cream, unlike --bf-border
	   above (1.3:1) — use this specifically for real form-control boundaries,
	   keep --bf-border for purely decorative hairline dividers. */
	--bf-input-border: #8f8378;
	--bf-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bf-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bf-container: 1320px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background: var(--bf-white);
	color: var(--bf-text);
	font-family: var(--bf-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.site-content .col-full,
.site-header .col-full,
.site-footer .col-full {
	max-width: var(--bf-container);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bf-font-display);
	font-weight: 400;
	color: var(--bf-dark);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

a {
	color: var(--bf-crimson);
}

a:hover,
a:focus {
	color: var(--bf-crimson-dark);
}

hr {
	border: none;
	border-top: 1px solid var(--bf-border);
}

/* Breaks a section out of the #content > .col-full max-width container so
   its background spans the full browser width, edge to edge. */
.bf-full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Eyebrow / label style used throughout (SUPPORT, OUR STORY, NECKLACES, etc.) */
.bf-eyebrow {
	display: block;
	font-family: var(--bf-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bf-crimson);
	margin: 0 0 0.75rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-Button {
	background: var(--bf-crimson);
	border: 1px solid var(--bf-crimson);
	border-radius: 2px;
	color: var(--bf-white);
	font-family: var(--bf-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.85em 1.6em;
	text-transform: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--bf-crimson-dark);
	border-color: var(--bf-crimson-dark);
	color: var(--bf-white);
}

.button.bf-button--outline,
.woocommerce a.button.bf-button--outline {
	background: transparent;
	border-color: var(--bf-dark);
	color: var(--bf-dark);
}

.button.bf-button--outline:hover {
	background: var(--bf-dark);
	border-color: var(--bf-dark);
	color: var(--bf-white);
}

/* ==========================================================================
   Announcement bar + header
   ========================================================================== */
.bf-announcement {
	background: var(--bf-crimson);
	color: var(--bf-white);
	text-align: center;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	padding: 0.6em 1em;
}

.bf-announcement a {
	color: var(--bf-white);
	text-decoration: underline;
}

.site-header {
	background: var(--bf-white);
	border-bottom: 1px solid var(--bf-border);
	padding: 0;
}

.bf-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.1rem 0;
	max-width: var(--bf-container);
	margin: 0 auto;
}

.bf-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-decoration: none;
}

.bf-brand-name {
	font-family: var(--bf-font-body);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: var(--bf-dark);
}

.bf-brand-sub {
	font-family: var(--bf-font-body);
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	color: var(--bf-crimson);
	margin-top: 0.15rem;
}

.bf-primary-nav {
	flex: 1 1 auto;
}

.bf-primary-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-primary-nav a {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bf-dark);
	text-decoration: none;
}

.bf-primary-nav a:hover {
	color: var(--bf-crimson);
}

.bf-header-actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	font-size: 0.82rem;
	position: relative;
}

.bf-header-actions a {
	color: var(--bf-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.bf-header-actions a:hover {
	color: var(--bf-crimson);
}

.bf-search-toggle {
	background: none;
	border: none;
	padding: 0;
	color: var(--bf-dark);
	font-family: var(--bf-font-body);
	font-size: 0.82rem;
	cursor: pointer;
}

.bf-search-toggle:hover {
	background: none;
	border-color: transparent;
	color: var(--bf-crimson);
}

.bf-search-form {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.75rem;
	background: var(--bf-white);
	border: 1px solid var(--bf-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 0.6rem;
	align-items: center;
	gap: 0.4rem;
	z-index: 20;
}

.bf-search-form.is-active {
	display: flex;
}

.bf-search-form input[type="search"] {
	border: 1px solid var(--bf-input-border);
	background: var(--bf-cream);
	padding: 0.6em 0.8em;
	font-family: var(--bf-font-body);
	font-size: 0.85rem;
	width: 220px;
}

.bf-search-form button[type="submit"] {
	background: var(--bf-crimson);
	color: var(--bf-white);
	border: none;
	padding: 0.6em 0.9em;
}

.bf-cart-count {
	background: var(--bf-crimson);
	color: var(--bf-white);
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 50%;
	width: 1.3em;
	height: 1.3em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.bf-newsletter {
	background: var(--bf-crimson);
	color: var(--bf-white);
	text-align: center;
	padding: 3.5rem 1.5rem;
}

.bf-newsletter h2 {
	color: var(--bf-white);
	font-size: 1.9rem;
	margin: 0 0 0.5rem;
}

.bf-newsletter p {
	margin: 0 0 1.5rem;
	opacity: 0.9;
}

.bf-newsletter-form {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	max-width: 420px;
	margin: 0 auto;
}

.bf-newsletter-form input[type="email"] {
	flex: 1 1 auto;
	border: none;
	padding: 0.85em 1em;
	font-family: var(--bf-font-body);
}

.bf-newsletter-form .button {
	background: var(--bf-dark);
	border-color: var(--bf-dark);
	flex: 0 0 auto;
}

/* !important here because Storefront's Customizer prints its own inline
   ".site-footer { background-color / color }" rule (default #f0f0f0 /
   #6d6d6d, sometimes twice for different color-scheme states) that can
   outrank a plain class selector regardless of theme-mod values set. */
.site-footer {
	background: var(--bf-dark) !important;
	color: #cfc9c2 !important;
	padding: 0;
}

.bf-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-top: 20px;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bf-footer-grid h3 {
	color: var(--bf-white);
	font-family: var(--bf-font-body);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.bf-footer-brand {
	font-family: var(--bf-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bf-white);
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

.bf-footer-grid p {
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
}

.bf-footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-footer-grid li {
	margin-bottom: 0.6rem;
}

.bf-footer-grid a {
	color: #cfc9c2 !important;
	text-decoration: none;
	font-size: 0.85rem;
}

.bf-footer-grid a:hover {
	color: var(--bf-white) !important;
}

.bf-footer-categories a {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bf-footer-bottom {
	text-align: center;
	font-size: 0.78rem;
	padding: 1.25rem 0;
	color: var(--bf-white);
	background: var(--bf-crimson);
}

/* Storefront's mobile handheld footer bar (account/search/cart) — keep it,
   just re-skin it to match the palette. */
.storefront-handheld-footer-bar {
	background: var(--bf-crimson) !important;
	border-top: none;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

/* !important: Storefront's Customizer inline CSS targets this link with a
   4-class-deep selector (.site-footer .storefront-handheld-footer-bar
   a:not(.button):not(.components-button)) that outranks a normal selector. */
.storefront-handheld-footer-bar ul li a {
	color: var(--bf-white) !important;
	opacity: 0.85;
}

.storefront-handheld-footer-bar ul li a:hover,
.storefront-handheld-footer-bar ul li.current-menu-item a {
	color: var(--bf-white) !important;
	opacity: 1;
}

.storefront-handheld-footer-bar .cart-contents .count {
	background: var(--bf-white);
	color: var(--bf-crimson);
}

/* WooCommerce's "demo store" notice bar (Settings > Advanced), currently
   showing custom text "Delta Certified Vendor" — recolored to match the
   palette instead of Woo's default blue. */
.demo_store {
	background-color: var(--bf-crimson) !important;
	color: var(--bf-white) !important;
}

.demo_store a,
.demo_store a:hover,
.demo_store a:focus,
.demo_store a:active,
.demo_store .dismiss,
.demo_store .dismiss:hover,
.demo_store .dismiss:focus {
	color: var(--bf-white) !important;
	text-decoration: underline;
}

.demo_store *,
.demo_store *::before,
.demo_store *::after {
	color: inherit !important;
	fill: currentColor;
}

/* ==========================================================================
   Diamond bullet motif
   ========================================================================== */
.bf-diamond {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--bf-crimson);
	transform: rotate(45deg);
	margin-bottom: 1rem;
}

/* ==========================================================================
   Shop archive: filters + product grid
   ========================================================================== */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3 {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2.5rem 1.75rem !important;
}

.woocommerce ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2.5rem 1.75rem !important;
}

/* WooCommerce's old float-layout clearfix (::before/::after {content:"";
   display:table}) becomes a phantom first grid item once display is grid,
   shifting every real product one slot later. Neutralize it. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none;
	text-align: left;
}

.woocommerce ul.products li.product a img {
	background: var(--bf-blush);
	border-radius: 2px;
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product .bf-badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 2;
	background: var(--bf-crimson);
	color: var(--bf-white);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
}

.woocommerce ul.products li.product a {
	position: relative;
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bf-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--bf-dark);
	margin: 0 0 0.35rem;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--bf-font-body);
	color: var(--bf-dark);
	font-size: 0.95rem;
}

.woocommerce ul.products li.product .price ins {
	color: var(--bf-crimson);
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	width: auto !important;
	max-width: 100%;
	white-space: nowrap;
	margin-top: 0.75rem;
	background: transparent;
	border-color: var(--bf-dark);
	color: var(--bf-dark);
	font-size: 0.8rem;
	padding: 0.6em 1.2em;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--bf-dark);
	color: var(--bf-white);
}

.woocommerce ul.products li.product .onsale {
	display: none; /* replaced by .bf-badge */
}

.woocommerce-page .content-area {
	padding-top: 2.5rem;
}

/* Storefront's own CSS gives #primary a legacy float-layout percentage
   width (~66-74%) unconditionally, meant to leave room for a sidebar. The
   sidebar-grid rule below already sets width:100% for pages that keep the
   sidebar, but pages with no sidebar at all (Cart, Checkout, My Account,
   single Product, Contact...) never got that reset and were stuck at the
   old percentage width, leaving unused space on the right. */
#primary.content-area {
	width: 100%;
	max-width: 100%;
	float: none;
}

/* #primary and #secondary are siblings inside #content > .col-full (see
   storefront/archive.php + storefront_sidebar action) — the grid has to be
   applied to that shared parent, not to #primary itself. */
body.woocommerce #content > .col-full:has( > #secondary.widget-area ) {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 3rem;
	align-items: start;
	max-width: var(--bf-container);
	margin: 0 auto;
}

body.woocommerce #content > .col-full:has( > #secondary.widget-area ) > #primary.content-area {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	max-width: 100%;
	margin-right: 0;
	float: none;
}

body.woocommerce #content > .col-full:has( > #secondary.widget-area ) > #secondary.widget-area {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

.woocommerce-page .page-title,
.woocommerce-products-header__title {
	font-size: 2.4rem;
}

#secondary.widget-area .widget {
	margin-bottom: 2.5rem;
}

#secondary.widget-area .widget-title {
	font-family: var(--bf-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bf-dark);
	margin-bottom: 1rem;
}

#secondary.widget-area .product-categories,
#secondary.widget-area .widget_price_filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.88rem;
}

#secondary.widget-area .product-categories li {
	margin-bottom: 0.6rem;
	padding-left: 0 !important;
	background: none !important;
	list-style: none !important;
}

#secondary.widget-area .product-categories li::before,
#secondary.widget-area .product-categories li::marker {
	content: none !important;
	display: none !important;
}

#secondary.widget-area .product-categories a {
	color: var(--bf-text-muted);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

#secondary.widget-area .product-categories a:hover,
#secondary.widget-area .product-categories .current-cat > a {
	color: var(--bf-crimson);
}

.woocommerce-breadcrumb {
	font-size: 0.8rem;
	color: var(--bf-text-muted);
	margin-bottom: 1.5rem;
}

.woocommerce-breadcrumb a {
	color: var(--bf-text-muted);
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product div.product .woocommerce-product-gallery {
	background: var(--bf-blush);
}

.single-product div.product .product_title {
	font-size: 2.1rem;
}

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--bf-crimson);
	font-family: var(--bf-font-body);
	font-size: 1.3rem;
}

.single-product div.product .cart .button,
.single-product div.product form.cart .button {
	padding: 0.9em 2.2em;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--bf-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==========================================================================
   Cart
   ========================================================================== */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 3rem;
	align-items: start;
	max-width: var(--bf-container);
	margin: 2rem auto;
}

.woocommerce-cart .woocommerce-cart-form {
	grid-column: 1;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	background: var(--bf-cream);
	padding: 1.75rem;
}

table.shop_table {
	border: none;
	border-collapse: collapse;
}

table.shop_table th {
	font-family: var(--bf-font-body);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bf-text-muted);
	border-bottom: 1px solid var(--bf-border);
	padding: 0.75em 0.5em;
}

table.shop_table td {
	border-bottom: 1px solid var(--bf-border);
	padding: 1em 0.5em;
	vertical-align: middle;
}

table.shop_table td.product-thumbnail img {
	background: var(--bf-blush);
	width: 72px;
	border-radius: 2px;
}

.cart_totals {
	float: none !important;
	width: 100% !important;
}

.cart_totals h2 {
	font-size: 1.3rem;
}

.wc-proceed-to-checkout {
	width: 100%;
}

/* WooCommerce's own core CSS (.wc-proceed-to-checkout .button.checkout-button)
   sets font-size: 1.41575em with 3 classes of specificity — matching that
   here (plus !important, since this fight has regressed before) so ours
   reliably wins instead of silently losing to core on a fresh cache. */
.wc-proceed-to-checkout .button.checkout-button,
.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100% !important;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	padding: 0.85em 0.75em !important;
	font-size: 0.92rem !important;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	border-bottom: 1px solid var(--bf-border);
}

.cart_totals .order-total .amount {
	color: var(--bf-crimson);
	font-weight: 700;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 3rem;
	align-items: start;
	max-width: var(--bf-container);
	margin: 2rem auto;
}

/* WooCommerce Payments injects an Apple Pay / Google Pay "express
   checkout" block (.wcpay-express-checkout-wrapper) as its own direct
   child of form.checkout, ahead of #customer_details, with no grid
   position of its own — CSS Grid auto-places it, and combined with
   #order_review's row-span below it used to stretch that row to the
   order-review box's full height, leaving the short button stranded in a
   mostly-empty cell. Giving every top-level child an explicit row
   (instead of spanning) keeps each row sized to its own shortest content,
   regardless of whether the express-checkout block exists for a given
   browser/session. */
.woocommerce-checkout .wcpay-express-checkout-wrapper {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 2;
	width: 100% !important;
	float: none !important;
}

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	background: var(--bf-cream);
	padding: 1.75rem;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box;
}

.woocommerce-checkout #order_review_heading {
	background: transparent;
	padding: 0 0 1rem;
	margin: 0;
}

.woocommerce-checkout .form-row label {
	font-size: 0.85rem;
	color: var(--bf-text-muted);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	border: 1px solid var(--bf-input-border);
	background: var(--bf-cream);
	padding: 0.85em 1em;
	font-family: var(--bf-font-body);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-top: 1px solid var(--bf-border);
	margin-top: 1rem;
	padding-top: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: none;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	text-align: center;
	padding: 1em 1.6em;
}

.woocommerce-checkout-review-order-table .order-total .amount {
	color: var(--bf-crimson);
	font-weight: 700;
}

/* ==========================================================================
   Home page
   ========================================================================== */
.bf-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
}

.bf-hero-copy {
	background: var(--bf-cream);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 5vw;
}

.bf-hero-copy h1 {
	font-size: 2.9rem;
	margin: 0 0 1rem;
}

.bf-hero-copy p {
	color: var(--bf-text-muted);
	max-width: 42ch;
	margin-bottom: 2rem;
}

.bf-hero-actions {
	display: flex;
	gap: 1rem;
}

.bf-hero-image {
	background: var(--bf-blush);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bf-section {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: 4.5rem 1.5rem;
}

.bf-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.bf-section-head h2 {
	font-size: 2rem;
	margin: 0;
}

.bf-section-head a {
	font-size: 0.82rem;
	text-decoration: none;
	font-weight: 600;
}

.bf-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.bf-tile {
	text-decoration: none;
	color: inherit;
}

.bf-tile-image {
	background: var(--bf-blush);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 0.85rem;
}

.bf-tile-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bf-tile h3 {
	font-family: var(--bf-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.15rem;
}

.bf-tile span {
	font-size: 0.8rem;
	color: var(--bf-text-muted);
}

.bf-craft {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.bf-craft-image {
	background: var(--bf-blush);
	min-height: 360px;
}

.bf-craft-copy {
	background: var(--bf-cream);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 5vw;
}

.bf-craft-copy h2 {
	font-size: 2rem;
}

.bf-craft-copy p {
	color: var(--bf-text-muted);
	max-width: 46ch;
}

.bf-trust-strip {
	background: var(--bf-cream);
	padding: 3.5rem 1.5rem;
}

.bf-trust-grid {
	max-width: var(--bf-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	text-align: center;
}

.bf-trust-grid h3 {
	font-family: var(--bf-font-body);
	font-size: 1rem;
	font-weight: 600;
	margin: 0.5rem 0 0.35rem;
}

.bf-trust-grid p {
	color: var(--bf-text-muted);
	font-size: 0.88rem;
	margin: 0;
}

/* ==========================================================================
   About page
   ========================================================================== */
.bf-about-hero {
	background: var(--bf-cream);
	text-align: center;
	padding: 4.5rem 1.5rem 5rem;
}

.bf-about-hero h1 {
	font-size: 2.9rem;
	max-width: 20ch;
	margin: 0 auto 1.25rem;
}

.bf-about-hero p {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--bf-text-muted);
}

.bf-about-photo {
	max-width: var(--bf-container);
	margin: -2.5rem auto 0;
	padding: 0 1.5rem;
}

.bf-about-photo-block {
	position: relative;
	background: var(--bf-blush);
	min-height: 420px;
	overflow: hidden;
}

.bf-about-photo-block img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bf-about-photo-cta {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bf-about-values {
	max-width: var(--bf-container);
	margin: 0 auto;
	padding: 4rem 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.bf-about-values h3 {
	font-family: var(--bf-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.bf-about-values p {
	color: var(--bf-text-muted);
	font-size: 0.92rem;
	margin: 0;
}

.bf-about-body {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
	color: var(--bf-text-muted);
	line-height: 1.75;
}

.bf-about-body p {
	margin: 0 0 1.2em;
}

.bf-about-body p:first-of-type {
	font-size: 1.05rem;
}

.bf-about-body strong {
	display: inline-block;
	font-family: var(--bf-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bf-crimson);
	margin-top: 1rem;
}

.bf-about-body em {
	display: block;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bf-border);
	font-family: var(--bf-font-display);
	font-size: 1.3rem;
	font-style: normal;
	color: var(--bf-dark);
	text-align: center;
}

.bf-about-body > a:first-child {
	display: inline-block;
	margin-bottom: 1.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
}

.bf-cta-band {
	background: var(--bf-blush);
	text-align: center;
	padding: 4rem 1.5rem;
}

.bf-cta-band h2 {
	font-size: 2rem;
	margin: 0 0 1.5rem;
}

/* ==========================================================================
   FAQ page
   ========================================================================== */
.bf-faq-hero {
	text-align: center;
	padding: 4rem 1.5rem 1rem;
}

.bf-faq-hero h1 {
	font-size: 2.6rem;
	margin: 0;
}

.bf-faq-list {
	max-width: 780px;
	margin: 2rem auto 0;
	padding: 0 1.5rem;
	border-top: 1px solid var(--bf-border);
}

.bf-faq-item {
	border-bottom: 1px solid var(--bf-border);
}

.bf-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--bf-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bf-dark);
	padding: 1.4rem 0;
	cursor: pointer;
}

.bf-faq-question:hover {
	background: none;
	border-color: transparent;
	color: var(--bf-crimson);
}

.bf-faq-question .bf-faq-icon {
	color: var(--bf-crimson);
	font-size: 1.3rem;
	font-family: var(--bf-font-body);
	flex: 0 0 auto;
	margin-left: 1rem;
}

.bf-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	color: var(--bf-text-muted);
}

.bf-faq-item.is-open .bf-faq-answer {
	max-height: 400px;
}

.bf-faq-answer p {
	margin: 0 0 1.4rem;
	max-width: 62ch;
}

.bf-faq-cta {
	max-width: 780px;
	margin: 3rem auto 5rem;
	background: var(--bf-cream);
	text-align: center;
	padding: 3rem 1.5rem;
}

.bf-faq-cta h2 {
	font-size: 1.4rem;
	margin: 0 0 0.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.bf-header-row {
		flex-wrap: wrap;
	}

	.bf-primary-nav ul {
		justify-content: flex-start;
		gap: 1rem 1.2rem;
	}

	.woocommerce ul.products,
	.woocommerce ul.products.columns-4,
	.bf-tile-grid,
	.bf-trust-grid,
	.bf-about-values {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.bf-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	body.woocommerce #content > .col-full:has( > #secondary.widget-area ),
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout,
	.bf-hero,
	.bf-craft {
		grid-template-columns: 1fr;
	}

	body.woocommerce #content > .col-full:has( > #secondary.widget-area ) > #primary.content-area,
	body.woocommerce #content > .col-full:has( > #secondary.widget-area ) > #secondary.widget-area {
		grid-column: 1;
	}

	.woocommerce-checkout .wcpay-express-checkout-wrapper,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce ul.products.columns-4,
	.bf-tile-grid,
	.bf-trust-grid,
	.bf-about-values,
	.bf-footer-grid {
		grid-template-columns: 1fr !important;
	}
}