/* Becca's Creations shop enhancements - see bc-shop-enhancements.php */

:root {
	--bc-basket-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1l1.6-6.8H6.2'/%3E%3Ccircle cx='9.5' cy='19.8' r='1.3'/%3E%3Ccircle cx='17' cy='19.8' r='1.3'/%3E%3C/svg%3E");
	--bc-tick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--bc-gold: #D49A2A;
	--bc-charcoal: #2E2E2E;
	--bc-cream: #FBF8F3;
}

/* ---------- "<item> added to basket" notice ---------- */

.bc-notice {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 99990; /* above the page and banner content, below the basket drawer */
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(560px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 14px 12px 14px 18px;
	background: var(--bc-charcoal);
	color: var(--bc-cream);
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
	transform: translate(-50%, 24px);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}
.bc-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }
.bc-notice__text { flex: 1; min-width: 0; }
.bc-notice__link {
	color: var(--bc-gold) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.bc-notice__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .bc-notice { transition: none; } }

/* The notices it replaces: "View basket" under a product card, and the banner on product pages. */
html body li.wc-block-product a.added_to_cart.wc_forward,
html body li.product a.added_to_cart.wc_forward { display: none !important; }
html body .bc-hidden-notice { display: none !important; }

/* ---------- basket drawer: "Continue shopping" ---------- */

.bc-continue-shopping {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--bc-charcoal);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- product cards: add to basket on hover (desktop) or a "+" (touch) ---------- */

/* Stack the button on top of the product photo: both sit in the card's first grid cell. */
html body li.wc-block-product {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}
/* The photo's bottom margin would make the shared cell taller than the photo (buttons would hang below
   it), so move that gap onto the title instead. */
html body li.wc-block-product > .wp-block-woocommerce-product-image { grid-area: 1 / 1; margin-bottom: 0 !important; }
html body li.wc-block-product > .wp-block-post-title { margin-top: 12px !important; }
html body li.wc-block-product > .wp-block-woocommerce-product-button {
	grid-area: 1 / 1;
	z-index: 2;
	width: auto !important;
	margin: 0 !important;
	align-self: end !important;
}

@media (hover: hover) and (pointer: fine) {
	html body li.wc-block-product > .wp-block-woocommerce-product-button {
		align-self: end;
		justify-self: center !important;
		margin-bottom: 14px !important;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease;
		pointer-events: none;
	}
	html body li.wc-block-product:hover > .wp-block-woocommerce-product-button,
	html body li.wc-block-product:focus-within > .wp-block-woocommerce-product-button {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

@media (hover: none), (pointer: coarse) {
	html body li.wc-block-product > .wp-block-woocommerce-product-button {
		align-self: end;
		justify-self: end !important;
		margin: 0 8px 8px 0 !important; /* just inside the photo's bottom-right corner */
		/* The wrapper is otherwise taller than the button, which pushed it past the photo's edge. */
		display: block !important;
		height: 36px !important;
		padding: 0 !important;
		line-height: 0;
	}
	/* A square in the site's button style, slightly see-through so it doesn't cover the photo. */
	html body li.wc-block-product .wc-block-components-product-button__button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 36px !important;
		min-width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background-color: rgba(212, 154, 42, .78) !important;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		font-size: 0 !important; /* the label stays for screen readers; the "+" is drawn below */
		box-shadow: none !important;
	}
	/* A basket icon (the header's own), drawn in the text colour; once the piece is in the basket, a tick. */
	html body li.wc-block-product .wc-block-components-product-button__button::before {
		content: "";
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: var(--bc-basket-icon) no-repeat center / contain;
		mask: var(--bc-basket-icon) no-repeat center / contain;
	}
	html body li.wc-block-product.bc-in-basket .wc-block-components-product-button__button::before {
		-webkit-mask-image: var(--bc-tick-icon);
		mask-image: var(--bc-tick-icon);
	}
	/* WooCommerce's own "1 in basket" label has no room in the circle. Hide it visually only: WooCommerce
	   updates the label when its slide animation ends, which never happens on a display:none element. */
	html body li.wc-block-product .wc-block-components-product-button__button { position: relative; overflow: hidden; }
	html body li.wc-block-product .wc-block-components-product-button__button > span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ---------- carousels ---------- */

/* Use the wide width even inside a narrow (text-width) section, like the Shop by Type grid. */
html body .bc-carousel {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1180px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html body .bc-new-arrivals .wc-block-product-template,
html body .bc-collection-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	grid-template-columns: none !important;
	padding-bottom: 4px;
}
html body .bc-new-arrivals .wc-block-product-template::-webkit-scrollbar,
html body .bc-collection-carousel::-webkit-scrollbar { display: none; }
html body .bc-new-arrivals .wc-block-product-template > li,
html body .bc-collection-carousel > * {
	/* Four cards (three collections) and part of the next, so it is clear there is more to see. */
	flex: 0 0 calc((100% - 4 * 20px) / 4.35) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
	min-width: 0;
}
html body .bc-collection-carousel > * { flex-basis: calc((100% - 3 * 20px) / 3.3) !important; }
@media (max-width: 781px) {
	html body .bc-new-arrivals .wc-block-product-template,
	html body .bc-collection-carousel { gap: 14px !important; }
	/* Two cards and a sliver of the next, so it is obvious the row scrolls. */
	html body .bc-new-arrivals .wc-block-product-template > li { flex-basis: 43% !important; }
	html body .bc-collection-carousel > * { flex-basis: 72% !important; }
}

.bc-carousel__arrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(46, 46, 46, .18);
	border-radius: 0;
	background: rgba(255, 255, 255, .92);
	color: var(--bc-charcoal);
	box-shadow: none;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease;
}
.bc-carousel__arrow svg { width: 22px; height: 22px; }
.bc-carousel__arrow--prev { left: -22px; }
.bc-carousel__arrow--next { right: -22px; }
.bc-carousel__arrow:hover { background: var(--bc-gold); border-color: var(--bc-gold); }
.bc-carousel.is-static .bc-carousel__arrow { opacity: 0; pointer-events: none; }
@media (hover: none), (pointer: coarse) {
	.bc-carousel__arrow { display: none; } /* swipe instead */
}
@media (max-width: 1260px) {
	.bc-carousel__arrow--prev { left: 6px; }
	.bc-carousel__arrow--next { right: 6px; }
}

/* ---------- shop filters ---------- */

/* Same (wide) width as the shop's title and product grid. */
html body main > .bc-filters-wrap,
html body main > .bc-filters__empty { max-width: var(--wp--style--global--wide-size, 1180px) !important; }
/* Clear space between the title (or a collection's name and banner) and the filters. */
html body main > .bc-filters-wrap { margin-top: 28px !important; margin-bottom: 28px; }
.bc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.bc-filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bc-filters__field label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bc-charcoal);
}
.bc-filters select {
	min-width: 180px;
	min-height: 44px;
	padding: 8px 36px 8px 12px;
	border: 1px solid rgba(46, 46, 46, .35);
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232E2E2E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
	color: var(--bc-charcoal);
	font: inherit;
	font-size: 15px;
	appearance: none;
	cursor: pointer;
}
.bc-filters select:focus-visible { outline: 2px solid var(--bc-gold); outline-offset: 2px; }
/* A chosen value stands out from "All". */
.bc-filters select.is-active { border-color: var(--bc-charcoal); font-weight: 700; }
.bc-filters__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.bc-filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 4px;
	color: var(--bc-charcoal);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bc-filters__count { margin: 0 0 0 auto; font-size: 14px; color: #5c5c5c; }
.bc-filters__empty { margin: 0 0 32px; font-size: 16px; }
@media (max-width: 781px) {
	html body main > .bc-filters-wrap { margin-top: 20px !important; margin-bottom: 20px; }
	.bc-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
	.bc-filters__field label { font-size: 11px; }
	.bc-filters select { min-width: 0; width: 100%; padding: 8px 26px 8px 10px; background-position: right 6px center; background-size: 16px; font-size: 14px; }
}

/* ---------- My Account: log in and create account in one panel ---------- */

html body #customer_login.bc-account {
	display: block !important;
	max-width: 440px;
	margin: 0 auto;
	border: 1px solid rgba(46, 46, 46, .18);
	background: #fff;
}
html body #customer_login.bc-account::before,
html body #customer_login.bc-account::after { display: none; } /* WooCommerce's float clearfix */
html body #customer_login.bc-account > .u-column1,
html body #customer_login.bc-account > .u-column2 {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px 24px 20px;
}
html body #customer_login.bc-account > [hidden] { display: none !important; }
/* The tabs name each form; keep the headings for screen readers only. */
html body #customer_login.bc-account h2 {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* The forms' own boxes would sit inside the panel's box. */
html body #customer_login.bc-account form.woocommerce-form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.bc-account__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(46, 46, 46, .18); }
.bc-account__tab {
	min-height: 52px;
	padding: 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: #6b6b6b;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}
.bc-account__tab[aria-selected="true"] { border-bottom-color: var(--bc-gold); color: var(--bc-charcoal); font-weight: 700; }
.bc-account__tab:focus-visible { outline: 2px solid var(--bc-gold); outline-offset: -2px; }
.bc-account__switch { margin: 20px 0 0; font-size: 15px; text-align: center; }
.bc-account__switch a { color: var(--bc-charcoal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Collection carousel photos keep the tiles' (square) shape while they are still lazy-load placeholders. The image
   optimiser gives placeholders the photo's own proportions (some are portrait), so until every image had
   loaded the row was as tall as its tallest placeholder, leaving a big gap under it. */
/* The frame and its link take the tile's width (the link otherwise shrink-wraps the 1x1 placeholder), the photo its shape. */
html body .bc-collection-carousel .wp-block-image,
html body .bc-collection-carousel .wp-block-image > a { display: block !important; width: 100% !important; }
html body .bc-collection-carousel img,
html body .bc-collection-carousel img.lazyload {
	aspect-ratio: 1 / 1 !important; /* square, like the Shop by Type tiles */
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
}

/* ---------- basket page and basket drawer: easy quantity and remove controls ---------- */

/* The stepper was 107x27 with 30x25 buttons and the bin 24x24 - fiddly on a phone. Make each a full tap target. */
html body .wc-block-cart .wc-block-components-quantity-selector,
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	height: 44px !important;
	min-width: 132px;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
}
html body .wc-block-cart .wc-block-components-quantity-selector::after,
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after { border-radius: 0 !important; }
html body .wc-block-cart .wc-block-components-quantity-selector__button,
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
	min-width: 44px !important;
	height: 42px !important;
	font-size: 20px !important;
	color: var(--bc-charcoal) !important;
	opacity: 1 !important;
}
html body .wc-block-cart .wc-block-components-quantity-selector__button:disabled,
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:disabled { opacity: .3 !important; }
/* 16px stops iPhones zooming the page when the number is tapped. */
html body .wc-block-cart .wc-block-components-quantity-selector__input,
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
	height: 42px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}
html body .wc-block-cart .wc-block-cart-item__remove-link,
html body .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	margin-left: 4px !important;
	vertical-align: middle;
}
html body .wc-block-cart .wc-block-cart-item__quantity,
html body .wc-block-mini-cart__drawer .wc-block-cart-item__quantity { display: flex !important; align-items: center; flex-wrap: nowrap !important; gap: 4px; }
/* With the bigger controls the basket table grew past the page margin on phones; keep it to its container. */
html body .wc-block-cart .wc-block-cart-items { width: 100% !important; table-layout: fixed; }
/* WooCommerce lays phone rows out on fixed columns (80px 132px 60px + price), 12px wider than the row with the
   bigger controls; let the middle columns share whatever space there is. */
html body .wc-block-cart.is-mobile .wc-block-cart-items__row,
html body .wc-block-cart.is-small .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) auto !important;
	column-gap: 12px !important;
}

/* ---------- checkout: slim header (logo + back to basket) and less space above the form ---------- */

.bc-checkout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1180px) + 2 * 48px);
	margin: 0 auto;
	padding: 16px 48px;
}
.bc-checkout-header .custom-logo { display: block; width: 56px; height: auto; }
.bc-checkout-header__back {
	color: var(--bc-charcoal);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.bc-checkout-header { padding: 12px 20px; }
	.bc-checkout-header .custom-logo { width: 48px; }
}
html body.woocommerce-checkout main { padding-top: 8px !important; }
/* The header was followed by 24px above main, 8px padding and another 24px under the (empty) notices area. */
html body.woocommerce-checkout main { margin-top: 0 !important; }
html body.woocommerce-checkout main > .entry-content { margin-top: 0 !important; }
/* ...and inside the Checkout block: 24px of padding, plus 16px above the order summary bar. */
html body.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 0 !important; }
html body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { margin-top: 0 !important; }

/* ---------- product cards: name and price read as two different things ---------- */

:root { --bc-bronze: #8C6418; } /* the brand gold, darkened to stay readable on the cream page (about 5:1) */

/* Name: the display face, a little smaller so it doesn't crowd the photo. */
html body li.wc-block-product > .wp-block-post-title {
	margin-bottom: 4px !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
	color: var(--bc-charcoal);
}
/* Price: small, bold, spaced-out and bronze. */
html body li.wc-block-product .wc-block-components-product-price,
html body li.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
	font-family: Urbanist, Arial, sans-serif;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	color: var(--bc-bronze) !important;
}
/* On sale: the old price struck through in grey, the new one in bronze. */
html body li.wc-block-product .wc-block-components-product-price del,
html body li.wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
	margin-right: 6px;
	font-weight: 400 !important;
	color: #8a8a8a !important;
}
html body li.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }
@media (min-width: 782px) {
	html body li.wc-block-product > .wp-block-post-title { font-size: 20px !important; }
	html body li.wc-block-product .wc-block-components-product-price,
	html body li.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount { font-size: 15px !important; }
}

/* ---------- product page: same clean style as the shop, basket and filters ---------- */

/* Photos: no 80px gap under them on phones; fill their column on desktop (were capped at 512px of 634px). */
@media (max-width: 781px) {
	html body.single-product .wp-block-woocommerce-product-image-gallery { margin-bottom: 0 !important; }
}
@media (min-width: 782px) {
	html body.single-product .wp-block-woocommerce-product-image-gallery,
	html body.single-product .woo-variation-product-gallery { max-width: none !important; width: 100% !important; }
}

/* Price in bronze, like the product cards - including the price shown once an option is chosen. */
html body.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
html body.single-product .woocommerce-variation-price .woocommerce-Price-amount {
	color: var(--bc-bronze) !important;
	font-family: Urbanist, Arial, sans-serif;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
}
html body.single-product .wp-block-woocommerce-product-price del .woocommerce-Price-amount,
html body.single-product .woocommerce-variation-price del .woocommerce-Price-amount { color: #8a8a8a !important; font-weight: 400 !important; }
html body.single-product .wp-block-woocommerce-product-price ins,
html body.single-product .woocommerce-variation-price ins { text-decoration: none; }
html body.single-product .woocommerce-variation-price { margin: 4px 0 12px; }
html body.single-product .woocommerce-variation-availability p { margin: 0 0 12px; font-size: 14px; color: #5c5c5c; }

/* Options: the label above (like the shop filters), the choices as square buttons; the chosen one in gold. */
html body.single-product table.variations,
html body.single-product table.variations tbody,
html body.single-product table.variations tr,
html body.single-product table.variations th,
html body.single-product table.variations td { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
html body.single-product table.variations { margin: 0 0 8px !important; }
html body.single-product table.variations tr { margin-bottom: 16px; }
html body.single-product table.variations tr:last-child { margin-bottom: 0; }
html body.single-product table.variations th.label label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--bc-charcoal);
}
html body.single-product .variable-items-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; }
html body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 44px;
	height: auto !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--bc-charcoal) !important;
	font-size: 15px !important;
	cursor: pointer;
}
html body.single-product .variable-items-wrapper .variable-item.color-variable-item { padding: 0 !important; width: 44px !important; }
html body.single-product .variable-items-wrapper .variable-item .variable-item-span { padding: 0 !important; font-size: inherit !important; }
html body.single-product .variable-items-wrapper .variable-item:not(.radio-variable-item):hover { border-color: var(--bc-charcoal) !important; }
html body.single-product .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) {
	background: var(--bc-gold) !important;
	border-color: var(--bc-gold) !important;
	font-weight: 700;
	box-shadow: none !important;
}
html body.single-product .variable-items-wrapper .variable-item.disabled,
html body.single-product .variable-items-wrapper .variable-item.disabled:hover { opacity: .4 !important; text-decoration: line-through; }
html body.single-product .variable-items-wrapper .variable-item.color-variable-item.selected { outline: 2px solid var(--bc-charcoal); outline-offset: 2px; }
/* Options shown as photos with names (e.g. colours): the same tiles - thumbnail and name in a bordered box, gold
   when chosen. The radio stays for keyboards and screen readers; the "-" separators and per-option price go
   (the price appears below once chosen). */
html body.single-product .variable-items-wrapper .variable-item.radio-variable-item {
	display: inline-flex !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
}
html body.single-product .variable-items-wrapper .variable-item.radio-variable-item:hover { border-color: var(--bc-charcoal) !important; }
html body.single-product .variable-items-wrapper .variable-item.radio-variable-item.selected { background: var(--bc-gold) !important; border-color: var(--bc-gold) !important; }
html body.single-product .radio-variable-item .variable-item-radio-input-wrapper { display: flex !important; align-items: center; min-height: 44px; margin: 0 !important; padding: 4px 14px 4px 4px !important; cursor: pointer; }
html body.single-product .radio-variable-item .variable-item-radio-input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0; }
html body.single-product .radio-variable-item .variable-item-radio-value-wrapper { display: flex !important; align-items: center; gap: 10px; font-size: 0 !important; }
html body.single-product .radio-variable-item .variable-item-radio-value-wrapper img { width: 36px !important; height: 36px !important; margin: 0 !important; object-fit: cover; aspect-ratio: 1 / 1 !important; }
html body.single-product .radio-variable-item .variable-item-radio-value { font-size: 15px !important; color: var(--bc-charcoal); }
html body.single-product .radio-variable-item.selected .variable-item-radio-value { font-weight: 700; }
html body.single-product .radio-variable-item .variable-item-radio-value-wrapper .price { display: none !important; }
html body.single-product .radio-variable-item .variable-item-radio-input:focus-visible + .variable-item-radio-value-wrapper { outline: 2px solid var(--bc-charcoal); outline-offset: 4px; }
html body.single-product a.reset_variations { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--bc-charcoal); text-decoration: underline; text-underline-offset: 3px; }

/* Quantity stepper (added by bc-shop.js) beside "Add to basket", one 44px row like the basket. */
html body.single-product form.cart:not(.variations_form),
html body.single-product .woocommerce-variation-add-to-cart { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 8px; }
/* WooCommerce's float clearfix pseudo-elements would become empty flex items (and add a 12px gap). */
html body.single-product form.cart::before,
html body.single-product form.cart::after,
html body.single-product .woocommerce-variation-add-to-cart::before,
html body.single-product .woocommerce-variation-add-to-cart::after { display: none !important; }
html body.single-product form.cart .single_add_to_cart_button { min-height: 44px; margin: 0 !important; padding: 0 28px !important; }
@media (max-width: 781px) {
	html body.single-product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
}
html body .bc-qty { display: inline-flex !important; align-items: stretch; height: 44px; margin: 0 !important; border: 1px solid rgba(46, 46, 46, .35); background: #fff; }
html body .bc-qty input.qty {
	width: 44px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
	font-size: 16px !important; /* no zoom on iPhones */
	font-weight: 700;
	-moz-appearance: textfield;
	appearance: textfield;
}
html body .bc-qty input.qty::-webkit-inner-spin-button,
html body .bc-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bc-qty__btn { width: 44px; padding: 0; border: 0; background: none; color: var(--bc-charcoal); font-size: 20px; line-height: 1; cursor: pointer; }
.bc-qty__btn:disabled { opacity: .3; cursor: default; }

/* "Check your size" / "Ask about this piece": square outline buttons, the secondary style. */
html body.single-product main p a[href*="/sizing/"],
html body.single-product main p a[href*="/contact-me/"] {
	display: inline-flex !important;
	align-items: center;
	min-height: 40px;
	margin: 0 6px 6px 0 !important;
	padding: 0 14px !important;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--bc-charcoal) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
html body.single-product main p a[href*="/sizing/"]:hover,
html body.single-product main p a[href*="/contact-me/"]:hover { border-color: var(--bc-charcoal) !important; }

/* Tags: quieter. */
html body.single-product .wp-block-woocommerce-product-meta { font-size: 13px; color: #5c5c5c; }

/* Tabs like the My Account switches: plain text, gold underline for the active one, no boxes. */
html body.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
	gap: 24px;
	margin: 0 0 20px !important;
	padding: 0 !important;
	overflow-x: auto;
	border-bottom: 1px solid rgba(46, 46, 46, .18) !important;
	scrollbar-width: none;
}
html body.single-product .woocommerce-tabs ul.tabs::before,
html body.single-product .woocommerce-tabs ul.tabs li::before,
html body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
html body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	white-space: nowrap;
}
html body.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 0 !important;
	border-bottom: 3px solid transparent;
	color: #6b6b6b !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
html body.single-product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--bc-gold); color: var(--bc-charcoal) !important; font-weight: 700 !important; }
/* The tab already names the panel. */
html body.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; }
html body.single-product .woocommerce-tabs table.shop_attributes { border: 0; border-top: 1px solid rgba(46, 46, 46, .18); }
html body.single-product .woocommerce-tabs table.shop_attributes th,
html body.single-product .woocommerce-tabs table.shop_attributes td { padding: 10px 12px 10px 0 !important; border: 0; border-bottom: 1px solid rgba(46, 46, 46, .18) !important; background: none !important; font-style: normal; text-align: left; }
html body.single-product .woocommerce-tabs table.shop_attributes th { width: 40%; font-weight: 600; }
html body.single-product .woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* Sharing (from the old theme): a small "Share" row of square monochrome icon buttons; the "Love" counter goes. */
html body.single-product .nectar-social .nectar-love { display: none !important; }
html body.single-product .nectar-social-inner { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
html body.single-product .nectar-social-inner::before {
	content: "Share";
	margin-right: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bc-charcoal);
}
html body.single-product .nectar-social-inner a.nectar-sharing {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bc-charcoal) !important;
}
html body.single-product .nectar-social-inner a.nectar-sharing:hover { border-color: var(--bc-charcoal) !important; }
html body.single-product .nectar-social-inner a.nectar-sharing i { margin: 0 !important; color: inherit !important; font-size: 16px !important; }
html body.single-product .nectar-social-inner a.nectar-sharing .social-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- every page: the same space under the header, the same title, no stray padding ---------- */

/* ":not(#bc-page)" outranks the rules some pages carry in their own content (e.g. "body.page-id-2525 main"). */
:root {
	--bc-page-top: 24px;     /* header -> title (or breadcrumb) */
	--bc-page-bottom: 40px;  /* content -> footer */
	--bc-page-side: 20px;
	--bc-title-size: 30px;
	--bc-title-gap: 16px;    /* title -> what follows */
}
@media (min-width: 782px) {
	:root { --bc-page-top: 40px; --bc-page-bottom: 56px; --bc-page-side: 48px; --bc-title-size: 42px; --bc-title-gap: 24px; } /* 48px: the header's edge */
}
html body:not(.home) .wp-site-blocks > main:not(#bc-page),
html body:not(.home) .wp-site-blocks > .wp-block-group > main:not(#bc-page) {
	box-sizing: border-box;
	margin-top: 0 !important;
	padding: var(--bc-page-top) var(--bc-page-side) var(--bc-page-bottom) !important;
}
html body:not(.home) .wp-site-blocks > main:not(#bc-page) > :first-child,
html body:not(.home) .wp-site-blocks > .wp-block-group > main:not(#bc-page) > :first-child { margin-top: 0 !important; }
/* Product pages wrap their main in a group, which had its own 24px gap above it. */
html body:not(.home) .wp-site-blocks > .wp-block-group:has(> main):not(#bc-page) { margin-top: 0 !important; }
html body .wp-site-blocks > footer:not(#bc-page) { margin-top: 0 !important; }

html body main > .wp-block-post-title:not(#bc-page),
html body main > .wp-block-query-title:not(#bc-page) {
	margin: 0 auto !important;
	font-family: "Tenor Sans", Arial, sans-serif !important;
	font-size: var(--bc-title-size) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: normal !important;
	text-align: left !important;
}
html body main > .wp-block-post-title:not(#bc-page) + *,
html body main > .wp-block-query-title:not(#bc-page) + * { margin-top: var(--bc-title-gap) !important; }
html body main > .wp-block-woocommerce-breadcrumbs:not(#bc-page) { margin-bottom: 8px !important; }

/* Intro lines under a title: one size, left-aligned with the title. */
html body .bc-page-intro:not(#bc-page),
html body .bc-all-intro:not(#bc-page),
html body .bc-gift-intro:not(#bc-page) {
	max-width: 640px !important;
	margin: 0 0 24px !important;
	font-family: Urbanist, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	text-align: left !important;
}
@media (min-width: 782px) {
	html body .bc-page-intro:not(#bc-page),
	html body .bc-all-intro:not(#bc-page),
	html body .bc-gift-intro:not(#bc-page) { font-size: 17px !important; margin-bottom: 32px !important; }
}

/* New In and the Shop by Collection / Type / Edit pages use the shop's wide width. */
html body.bc-wide-page main > .wp-block-post-title:not(#bc-page),
html body.bc-wide-page main > .wp-block-post-content:not(#bc-page) { max-width: var(--wp--style--global--wide-size, 1180px) !important; }
html body.bc-wide-page main > .wp-block-post-content:not(#bc-page) > * { max-width: none !important; }
html body.bc-wide-page main > .wp-block-post-content:not(#bc-page) > :is(.bc-page-intro, .bc-all-intro) { max-width: 640px !important; margin-left: 0 !important; }
html body .bc-page-more:not(#bc-page) { margin-top: 32px !important; }

/* Shop by Collection / Type / Edit pages: the home page tiles - square photo, gold label on it, whole tile a link. */
/* As many columns as there are tiles (up to five across), so a row is never left with one stray tile. */
html body .bc-all-grid:not(#bc-tiles) {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 20px !important;
	max-width: none !important;
	margin: 0 !important;
}
html body .bc-all-grid:not(#bc-tiles):has(> :nth-child(2):last-child) { max-width: 760px !important; } /* two tiles */
html body .bc-all-collection:not(#bc-tiles) {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 !important;
	overflow: hidden;
	color: var(--bc-charcoal) !important;
	text-decoration: none !important;
}
html body .bc-all-collection:not(#bc-tiles) > * { grid-area: 1 / 1; }
html body .bc-all-collection:not(#bc-tiles) img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
	transition: transform .4s ease;
}
html body .bc-all-collection:not(#bc-tiles):hover img { transform: scale(1.04); }
html body .bc-all-collection:not(#bc-tiles) > span {
	align-self: end;
	justify-self: center;
	z-index: 2;
	max-width: calc(100% - 24px);
	margin: 0 0 16px;
	padding: 9px 19px;
	background: var(--bc-gold);
	color: var(--bc-charcoal) !important; /* the pages' own styles made it grey */
	font: 700 14px/1.3 Urbanist, Arial, sans-serif !important;
	text-align: center;
}
html body .bc-all-collection:not(#bc-tiles):focus-visible { outline: none; }
html body .bc-all-collection:not(#bc-tiles):focus-visible > span { outline: 2px solid var(--bc-charcoal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body .bc-all-collection:not(#bc-tiles) img { transition: none; } }
@media (max-width: 781px) {
	html body .bc-all-grid:not(#bc-tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	html body .bc-all-collection:not(#bc-tiles) > span { margin-bottom: 10px; padding: 7px 12px; font-size: 13px !important; }
}
/* The links under the tiles: the site's button style, left-aligned like everything else. */
html body .bc-all-links:not(#bc-tiles) { justify-content: flex-start !important; margin: 32px 0 0 !important; }
html body .bc-all-links:not(#bc-tiles) a {
	min-height: 44px !important;
	padding: 12px 20px !important;
	background: var(--bc-gold) !important;
	color: var(--bc-charcoal) !important;
	font: 700 14px/1.2 Urbanist, Arial, sans-serif !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Contact page: its content brought its own 72px (120px on phones) of padding and an off-white box. */
html body main div:has(> .bc6-wrap) { padding: 0 !important; background: transparent !important; }
html body main .bc6-wrap:not(#bc-page) { max-width: none !important; padding: 0 !important; }
html body main .bc6-grid a { border-radius: 0 !important; }
/* Pages built with the old page builder: no extra space under its blocks. */
html body main .wpb_raw_code.wpb_content_element { margin-bottom: 0 !important; }

/* ---------- footer: brand and social icons, two short link lists, one bottom line ---------- */

html body .bc-footer:not(#bc-page) {
	margin: 0 !important;
	padding: 40px var(--bc-page-side) 20px !important;
	background: #F5F1E8;
	color: var(--bc-charcoal);
	font-family: Urbanist, Arial, sans-serif;
}
html body .bc-footer .bc-footer__inner,
html body .bc-footer .bc-footer__bottom {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1180px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html body .bc-footer .bc-footer__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 20px;
	margin-top: 0 !important;
}
html body .bc-footer .bc-footer__inner > * { margin: 0 !important; }
html body .bc-footer .bc-footer__brand { grid-column: 1 / -1; }
html body .bc-footer .bc-footer__name {
	margin: 0 0 8px !important;
	font-family: "Tenor Sans", Arial, sans-serif;
	font-size: 22px;
	line-height: 1.2;
}
html body .bc-footer .bc-footer__tagline {
	max-width: 340px;
	margin: 0 0 16px !important;
	color: #5E5850;
	font-size: 15px;
	line-height: 1.55;
}
html body .bc-footer .bc-footer__tagline a { color: var(--bc-charcoal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html body .bc-footer .bc-footer__label {
	margin: 0 0 12px !important;
	color: var(--bc-bronze, #8C6418);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
html body .bc-footer ul.bc-footer__links {
	display: grid;
	gap: 2px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
html body .bc-footer ul.bc-footer__links a {
	display: inline-block;
	padding: 6px 0; /* 32px+ tap rows without looking spaced out */
	color: var(--bc-charcoal);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
}
html body .bc-footer a:hover { text-decoration: underline; text-decoration-color: var(--bc-gold); text-underline-offset: 3px; }
/* Social icons: monochrome squares like the share buttons on product pages. */
html body .bc-footer .bc-footer__social { gap: 8px !important; margin: 0 !important; padding: 0 !important; }
html body .bc-footer .bc-footer__social .wp-social-link {
	margin: 0 !important;
	border: 1px solid rgba(46, 46, 46, .2);
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--bc-charcoal) !important;
	transition: background-color .15s ease, border-color .15s ease;
}
html body .bc-footer .bc-footer__social .wp-social-link a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
}
html body .bc-footer .bc-footer__social .wp-social-link svg { width: 20px; height: 20px; fill: currentColor; }
html body .bc-footer .bc-footer__social .wp-social-link:hover { background: var(--bc-gold) !important; border-color: var(--bc-gold); transform: none; }
html body .bc-footer .bc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin-top: 28px !important;
	padding-top: 16px;
	border-top: 1px solid rgba(46, 46, 46, .12);
	color: #5E5850;
	font-size: 13px;
}
html body .bc-footer .bc-footer__bottom > * { margin: 0 !important; }
html body .bc-footer .bc-footer__bottom a { color: inherit; }
@media (min-width: 782px) {
	html body .bc-footer:not(#bc-page) { padding-top: 48px !important; padding-bottom: 24px !important; }
	html body .bc-footer .bc-footer__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	html body .bc-footer .bc-footer__brand { grid-column: auto; }
	html body .bc-footer .bc-footer__bottom { margin-top: 40px !important; }
}

/* Gift Finder: the shop filters' look - labels in small capitals, plain white selects, square buttons, no beige box. */
/* No extra gap above a page's first content (several pages start with a <style> element, so the visible first
   item is its neighbour). */
html body main .wp-block-post-content > :first-child,
html body main .wp-block-post-content > style:first-child + *,
html body main .wp-block-post-content > :first-child > :first-child,
html body main .wp-block-post-content > style:first-child + * > :first-child { margin-top: 0 !important; }
html body .bc-gift .bc-gift-tools:not(#bc-page) {
	margin: 0 0 24px !important;
	padding: 20px !important;
	border: 1px solid rgba(46, 46, 46, .18);
	border-radius: 0 !important;
	background: #fff !important;
}
html body .bc-gift .bc-gift-fields label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bc-charcoal); }
html body .bc-gift .bc-gift-fields select:not(#bc-page) {
	min-height: 44px;
	padding: 8px 36px 8px 12px !important;
	border: 1px solid rgba(46, 46, 46, .35) !important;
	border-radius: 0 !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232E2E2E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 10px center / 18px !important;
	-webkit-appearance: none;
	appearance: none;
	color: var(--bc-charcoal);
	font-size: 15px;
}
html body .bc-gift button:not(#bc-page) { border-radius: 0 !important; font-weight: 700; }
html body .bc-gift button[type="submit"]:not(#bc-page) { background: var(--bc-gold) !important; border-color: var(--bc-gold) !important; color: var(--bc-charcoal); }
html body .bc-gift button:not([type="submit"]):not(#bc-page) { background: #fff !important; border-color: rgba(46, 46, 46, .35) !important; }
html body .bc-gift #bc-gift-empty { background: #fff !important; border: 1px solid rgba(46, 46, 46, .18); }
@media (min-width: 782px) { html body .bc-gift .bc-gift-tools:not(#bc-page) { padding: 24px !important; } }

/* ---------- home page: one gap between sections, one gap under each heading, one content width ---------- */

/* Product, type and collection sections stop growing at --bc-home-max (their square photos would otherwise keep
   getting taller on wide screens); the hero and the Gift Finder, delivery and About banners use the full width. */
:root { --bc-home-gap: 40px; --bc-home-head: 16px; --bc-home-max: 1400px; --bc-banner-pad: 28px 20px; }
@media (min-width: 782px) { :root { --bc-home-gap: 64px; --bc-home-head: 24px; --bc-banner-pad: 40px; } }

html body.home .wp-site-blocks > main:not(#bc-page) {
	margin-top: 0 !important;
	padding: var(--bc-page-top) var(--bc-page-side) var(--bc-page-bottom) !important;
}
html body.home main > *:not(#bc-page):not(#bc-home) { margin-top: 0 !important; margin-bottom: 0 !important; }
html body.home main > * + *:not(#bc-page):not(#bc-home) { margin-top: var(--bc-home-gap) !important; }

/* Content sections: no padding of their own, the capped width, and the same gap under the heading. */
html body.home main > .wp-block-group:not(.has-background):not(#bc-page) {
	width: 100%;
	max-width: var(--bc-home-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}
html body.home main > .wp-block-group:not(.has-background) > *:not(#bc-page):not(#bc-home) { max-width: none !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body.home main > .wp-block-group:not(.has-background) > * + *:not(#bc-page):not(#bc-home) { margin-top: var(--bc-home-head) !important; }
html body.home main > .wp-block-group:not(.has-background) > .wp-block-spacer { display: none; }
html body.home main > .wp-block-group:not(.has-background) > .wp-block-spacer + *:not(#bc-page):not(#bc-home) { margin-top: var(--bc-home-head) !important; }
/* The carousels fill the section, like the Shop by Type tiles and the banners. */
html body.home .bc-carousel { max-width: none !important; }
html body.home .bc-carousel .bc-carousel__arrow--prev { left: 8px; }
html body.home .bc-carousel .bc-carousel__arrow--next { right: 8px; }

/* Gift Finder, delivery and About banners: the box itself, colour and padding included, stays within the same
   --bc-home-max as the carousels, so its edges line up with theirs. */
html body.home main > .wp-block-group.has-background:not(#bc-page) {
	width: 100%;
	max-width: var(--bc-home-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: var(--bc-banner-pad) !important;
}
/* The hero's colour runs the full width, but its text starts at the carousels' left edge. */
html body.home .bc-hero .wp-block-cover__inner-container > .wp-block-group:not(#bc-page) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 782px) {
	html body.home main > .bc-hero:not(#bc-page):not(#bc-home) {
		padding-left: max(40px, calc((100% - var(--bc-home-max)) / 2)) !important;
		padding-right: max(40px, calc((100% - var(--bc-home-max)) / 2)) !important;
	}
	/* The 60% charcoal overlay darkened the photo too and flattened the earrings. Keep it behind the text and
	   fade it out over the photo, which is anchored to the right and about 712px wide at this height. */
	html body.home .bc-hero .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(to left, transparent 0, transparent 400px, #000 580px);
		mask-image: linear-gradient(to left, transparent 0, transparent 400px, #000 580px);
	}
}
/* Narrower desktops: the photo reaches under the heading, so the heading scales down and the overlay ends sooner
   (it covers the photo's plain left part; the earrings stay clear). */
@media (min-width: 782px) and (max-width: 1279px) {
	html body.home .bc-hero:not(#bc-compact) h1:not(#bc-mobile-hero) { font-size: clamp(56px, 6.4vw, 92px) !important; }
	html body.home .bc-hero .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(to left, transparent 0, transparent 300px, #000 460px);
		mask-image: linear-gradient(to left, transparent 0, transparent 300px, #000 460px);
	}
}
@media (min-width: 782px) and (max-width: 1023px) {
	html body.home .bc-hero:not(#bc-compact) h1:not(#bc-mobile-hero) { font-size: 40px !important; }
	html body.home .bc-hero .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(to left, transparent 0, transparent 40%, #000 55%);
		mask-image: linear-gradient(to left, transparent 0, transparent 40%, #000 55%);
	}
}
/* Phones: the photo fills the hero behind the text, so the overlay stays behind the text but lightens towards the earrings. */
@media (max-width: 781px) {
	html body.home .bc-hero .wp-block-cover__background {
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 45%, rgba(0, 0, 0, .2) 100%);
		mask-image: linear-gradient(to right, #000 0, #000 45%, rgba(0, 0, 0, .2) 100%);
	}
}

/* ---------- order received: the checkout's style - one column, small-capital labels, plain rows and cards ---------- */

html body.woocommerce-order-received main > * { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
html body.woocommerce-order-received main > * + * { margin-top: 28px !important; }

.bc-thanks { text-align: center; }
.bc-thanks__tick {
	display: inline-flex;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	background: var(--bc-gold);
	-webkit-mask: none;
}
.bc-thanks__tick::before {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--bc-charcoal);
	-webkit-mask: var(--bc-tick-icon) no-repeat center / 30px;
	mask: var(--bc-tick-icon) no-repeat center / 30px;
}
html body .bc-thanks .bc-thanks__title {
	margin: 0 0 12px !important;
	font-family: "Tenor Sans", Arial, sans-serif !important;
	font-size: var(--bc-title-size) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
}
.bc-thanks__text { max-width: 520px; margin: 0 auto !important; font-size: 16px; line-height: 1.6; }
.bc-thanks__actions { margin: 20px 0 0 !important; }
html body .bc-thanks .bc-thanks__shop {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 24px;
	border-radius: 0;
	background: var(--bc-gold);
	color: var(--bc-charcoal);
	font: 700 15px/1.2 Urbanist, Arial, sans-serif;
	text-decoration: none;
}

/* Order number, date, total, email, payment: one card, label above value. */
html body .wc-block-order-confirmation-summary-list:not(#bc-page) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	margin: 0 !important;
	padding: 20px !important;
	border: 1px solid rgba(46, 46, 46, .18);
	background: #fff;
	list-style: none;
}
@media (min-width: 600px) { html body .wc-block-order-confirmation-summary-list:not(#bc-page) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html body .wc-block-order-confirmation-summary-list-item:not(#bc-page) { display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0; }
html body .wc-block-order-confirmation-summary-list-item__key {
	color: var(--bc-bronze);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
html body .wc-block-order-confirmation-summary-list-item__value { font-size: 15px; overflow-wrap: anywhere; }

/* Section headings ("Order details", addresses) like the filter labels. */
html body.woocommerce-order-received main h2.wp-block-heading:not(#bc-page) {
	margin: 0 0 10px !important;
	color: var(--bc-bronze);
	font-family: Urbanist, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	line-height: 1.4 !important;
	text-transform: uppercase;
}

/* Items and totals: plain rows with thin dividers, like the basket. */
html body .wc-block-order-confirmation-totals__table:not(#bc-page) { width: 100%; border: 0 !important; border-collapse: collapse; font-size: 15px; }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) :is(th, td) { padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(46, 46, 46, .12) !important; background: none !important; text-align: left; }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) :is(th, td):last-child { text-align: right; }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* "Product / Total" */
html body .wc-block-order-confirmation-totals__table:not(#bc-page) tbody a { color: var(--bc-charcoal); }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) tfoot th { font-weight: 400; }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) tfoot tr:last-child :is(th, td) { border-bottom: 0 !important; font-size: 17px; font-weight: 700; }
html body .wc-block-order-confirmation-totals__table:not(#bc-page) tfoot tr:last-child td { color: var(--bc-bronze); }

/* Addresses: two plain cards side by side (stacked on phones). */
html body .wc-block-order-confirmation-address-wrapper:not(#bc-page) { gap: 20px !important; }
html body .wc-block-order-confirmation-address-wrapper:not(#bc-page) > .wp-block-column { margin: 0 !important; }
html body :is(.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address):not(#bc-page) {
	padding: 16px 20px !important;
	border: 1px solid rgba(46, 46, 46, .18) !important;
	border-radius: 0 !important;
	background: #fff;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------- empty basket: a short message and the site's buttons, then the newest pieces ---------- */

html body .bc-empty-basket:not(#bc-page) {
	max-width: none;
	margin: 0 0 40px !important;
	padding: 28px 20px;
	border: 1px solid rgba(46, 46, 46, .18);
	background: #fff;
	text-align: center;
}
html body .bc-empty-basket::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 12px;
	background: var(--bc-gold);
	-webkit-mask: var(--bc-basket-icon) no-repeat center / contain;
	mask: var(--bc-basket-icon) no-repeat center / contain;
}
html body .bc-empty-basket .bc-empty-basket__title { margin: 0 0 6px !important; font-family: "Tenor Sans", Arial, sans-serif; font-size: 24px; line-height: 1.2; }
html body .bc-empty-basket .bc-empty-basket__text { max-width: 420px; margin: 0 auto !important; font-size: 15px; line-height: 1.6; }
html body .bc-empty-basket .bc-empty-basket__actions { justify-content: center; gap: 10px; margin-top: 20px !important; }
html body .bc-empty-basket .wp-block-button__link { min-height: 44px; padding: 12px 22px; border-radius: 0 !important; font-weight: 700; }
html body .bc-empty-basket .is-style-outline .wp-block-button__link { border: 1px solid rgba(46, 46, 46, .35) !important; background: #fff !important; color: var(--bc-charcoal) !important; }
html body h2.bc-empty-basket__heading:not(#bc-page) {
	margin: 0 0 16px !important;
	color: var(--bc-bronze);
	font-family: Urbanist, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-align: left !important;
	text-transform: uppercase;
}
/* Two cards a row on phones, four on wider screens. */
html body .bc-empty-basket__products .wc-block-product-template:not(#bc-page) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px 14px !important;
	margin: 0 !important;
	padding: 0 !important;
}
@media (min-width: 782px) {
	html body .bc-empty-basket__products .wc-block-product-template:not(#bc-page) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
	html body .bc-empty-basket:not(#bc-page) { padding: 40px; }
}
html body .bc-empty-basket__products .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; }
html body .bc-empty-basket__products .wp-block-post-title a { color: inherit; text-decoration: none; }

/* Wallet buttons (Google Pay / Apple Pay / Link) on product pages. Stripe keeps their box hidden (inline display:none)
   for a second or so while it sets them up, then shows it, and the content below jumped. Hold the space with two
   placeholder bars next to the hidden box (Stripe won't draw its buttons if the box is forced visible early), and give
   the box the same height once shown. bc-shop.js marks the box "bc-wallet-ready" if no buttons come (no wallet on
   this device), which removes the placeholder. */
html body #wc-stripe-express-checkout-element { min-height: 104px; }
html body .wp-block-add-to-cart-form:has(> #wc-stripe-express-checkout-element[style*="display:none"]:not(.bc-wallet-ready))::after,
html body .wp-block-add-to-cart-form:has(> #wc-stripe-express-checkout-element[style*="display: none"]:not(.bc-wallet-ready))::after {
	content: "";
	display: block;
	height: 104px;
	margin-top: 1em;
	background:
		linear-gradient(rgba(46, 46, 46, .07), rgba(46, 46, 46, .07)) 0 0 / 100% 48px no-repeat,
		linear-gradient(rgba(46, 46, 46, .07), rgba(46, 46, 46, .07)) 0 56px / 100% 48px no-repeat;
	animation: bc-wallet-pulse 1.4s ease-in-out infinite;
}
@keyframes bc-wallet-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { html body .wp-block-add-to-cart-form::after { animation: none !important; } }

/* Free-shipping banner: hold its height (7px padding top and bottom, one line at the size set in Additional CSS) at
   the top of the header until its script inserts it, so the page doesn't drop by ~32px a moment after it appears. */
html body.bc-has-banner .wp-site-blocks > header:first-child:not(:has(> .simple-banner))::before {
	content: "";
	display: block;
	height: calc(14px + clamp(11.5px, 3.2vw, 14px) * 1.4);
	background: #fff;
}