/*
Theme Name: Sourdough
Theme URI: https://bombaysourdoughcompany.com
Author: Bombay Sourdough Company
Description: Custom WooCommerce theme for Bombay Sourdough Company. Warm cream, deep espresso and terracotta, built mobile first.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sourdough
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 10.6
*/

/* ---------------------------------------------------------------
   1. Design tokens
   Colours sampled from the current live site (Elementor kit and
   inline page CSS). Fonts match what the live site already serves.
   --------------------------------------------------------------- */

:root {
	/* Browns sampled from the live site, hierarchy taken from the reference */
	--bsc-espresso:        #3d2415;
	--bsc-espresso-mid:    #4a2a17;
	--bsc-espresso-soft:   #623e2e;

	/* Gold is the reference accent. Sampled value was #c4ae6a on the live site. */
	--bsc-gold:            #b8965a;
	--bsc-gold-light:      #c9a96e;
	--bsc-wheat:           #c4ae6a;

	/* Terracotta stays available but is secondary in this design */
	--bsc-terracotta:      #af5302;
	--bsc-terracotta-deep: #9e3f00;

	--bsc-cream:           #faf5ea;
	--bsc-cream-deep:      #f5eddc;
	--bsc-white:           #ffffff;
	--bsc-line:            rgba(61, 36, 21, 0.12);
	--bsc-muted:           rgba(61, 36, 21, 0.64);

	/* Display serif, script accent, sans body. See DEPLOY.md on font choices. */
	--bsc-font-head:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--bsc-font-script: "Dancing Script", "Cormorant Garamond", cursive;
	--bsc-font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/*
	 * Display sizes live here as tokens because the Elementor bridge has to
	 * restate them to outrank the kit stylesheet. One source of truth.
	 */
	--bsc-h1: clamp(2.75rem, 8.5vw, 5.25rem);
	--bsc-h2: clamp(2.1rem, 6vw, 3.9rem);
	--bsc-h3: clamp(1.25rem, 3vw, 1.6rem);

	--bsc-wrap: 1240px;
	--bsc-gap: 1.25rem;
	--bsc-radius: 8px;
	--bsc-radius-lg: 16px;
	--bsc-radius-pill: 999px;
	--bsc-shadow: 0 1px 2px rgba(61, 36, 21, .05), 0 10px 30px rgba(61, 36, 21, .07);
	--bsc-header-h: 64px;
	--bsc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bsc-cream);
	color: var(--bsc-espresso);
	font-family: var(--bsc-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--bsc-terracotta-deep); text-decoration: none; }
a:hover, a:focus-visible { color: var(--bsc-espresso); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bsc-font-head);
	font-weight: 600;
	line-height: 1.08;
	color: var(--bsc-espresso);
	margin: 0 0 .5em;
	letter-spacing: -.005em;
}

/* Cormorant runs small and light, so the display sizes are generous */
h1 { font-size: var(--bsc-h1); }
h2 { font-size: var(--bsc-h2); }
h3 { font-size: var(--bsc-h3); font-weight: 600; }

/*
 * The reference sets the second half of nearly every headline in script.
 * Wrap that part in <em class="bsc-script"> inside the heading.
 */
.bsc-script {
	font-family: var(--bsc-font-script);
	font-style: normal;
	font-weight: 600;
	color: var(--bsc-gold);
	letter-spacing: 0;
	/* Script sits optically small next to the serif, so nudge it up */
	font-size: 1.04em;
	padding-inline: .06em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 3px solid var(--bsc-terracotta);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--bsc-espresso); color: var(--bsc-cream);
	padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------- */

.bsc-wrap {
	width: 100%;
	max-width: var(--bsc-wrap);
	margin-inline: auto;
	padding-inline: 1.15rem;
}

/*
 * Interior pages in the reference sit on a noticeably narrower column than
 * the shop grid does, roughly 960px against the 1240px wrap.
 */
.bsc-wrap--narrow { max-width: 62rem; }

.bsc-section { padding-block: clamp(2.75rem, 8vw, 5.5rem); }
.bsc-section--tight { padding-block: clamp(2rem, 5vw, 3.25rem); }
.bsc-section--cream-deep { background: var(--bsc-cream-deep); }
.bsc-section--espresso { background: var(--bsc-espresso); color: var(--bsc-cream-deep); }
.bsc-section--espresso h2,
.bsc-section--espresso h3 { color: var(--bsc-white); }

.bsc-section__head { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vw, 2.5rem); }
.bsc-section__head--center { margin-inline: auto; text-align: center; }
.bsc-section__head p { color: var(--bsc-muted); font-size: 1.05rem; margin-bottom: 0; }
.bsc-section--espresso .bsc-section__head p { color: rgba(250, 244, 233, .78); }

/*
 * Eyebrow: gold script with a trailing rule, matching the reference
 * ("Our bakery ——", "—— Why choose us ——", "Shop by category ——").
 */
.bsc-eyebrow {
	display: flex;
	align-items: center;
	gap: .65rem;
	font-family: var(--bsc-font-script);
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--bsc-gold);
	margin-bottom: .5rem;
	text-transform: none;
	letter-spacing: 0;
}
.bsc-eyebrow::after {
	content: "";
	width: 2.75rem;
	height: 1px;
	background: currentColor;
	opacity: .55;
	flex-shrink: 0;
}

.bsc-section__head--center .bsc-eyebrow { justify-content: center; }
.bsc-section__head--center .bsc-eyebrow::before {
	content: "";
	width: 2.75rem;
	height: 1px;
	background: currentColor;
	opacity: .55;
	flex-shrink: 0;
	order: -1;
}

.bsc-section--espresso .bsc-eyebrow { color: var(--bsc-gold-light); }

/* ---------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------- */

.bsc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--bsc-font-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 1rem 1.9rem;
	border: 1px solid transparent;
	border-radius: var(--bsc-radius-pill);
	background: var(--bsc-espresso-mid);
	color: var(--bsc-white);
	cursor: pointer;
	text-decoration: none;
	transition: background .18s var(--bsc-ease), transform .18s var(--bsc-ease);
}

.bsc-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--bsc-espresso);
	color: var(--bsc-white);
	text-decoration: none;
}

.bsc-btn:active { transform: translateY(1px); }

.bsc-btn--ghost {
	background: transparent;
	color: var(--bsc-espresso);
	border-color: rgba(61, 36, 21, .32);
}
.bsc-btn--ghost:hover { background: var(--bsc-espresso); color: var(--bsc-cream); border-color: var(--bsc-espresso); }

.bsc-btn--light {
	background: var(--bsc-cream);
	color: var(--bsc-espresso);
}
.bsc-btn--light:hover { background: var(--bsc-white); color: var(--bsc-espresso); }

.bsc-btn--block { width: 100%; }

/* Buttons never wrap mid-label */
.bsc-btn { white-space: nowrap; }
.bsc-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */

.bsc-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--bsc-cream);
	border-bottom: 1px solid var(--bsc-line);
}

.bsc-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--bsc-header-h);
}

.bsc-brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.bsc-brand img { max-height: 44px; width: auto; border-radius: 3px; }

/*
 * A square logo that already contains the wordmark needs more height than a
 * small mark does, or the words in it are illegible. The site title next to
 * it is hidden in PHP when a custom logo is set, so there is room.
 */
.bsc-brand--logo img { max-height: 58px; border-radius: 0; }
.bsc-brand__text {
	font-family: var(--bsc-font-head);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.1;
	color: var(--bsc-espresso);
}

.bsc-nav { display: none; }

/*
 * Top level row only. This selector used to be `.bsc-nav ul`, which also hit
 * `.sub-menu` and laid every dropdown child out inline in the header bar. On
 * the client's real menu that put nine product categories across the top,
 * pushed the nav onto three rows and gave the whole page a horizontal
 * scrollbar.
 */
.bsc-nav > ul {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsc-nav li { position: relative; }

.bsc-nav a {
	font-size: .93rem;
	font-weight: 500;
	color: var(--bsc-espresso);
	padding-block: .5rem;
	position: relative;
}
.bsc-nav a:hover { text-decoration: none; color: var(--bsc-terracotta-deep); }
.bsc-nav > ul > .current-menu-item > a::after,
.bsc-nav > ul > li > a:hover::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--bsc-terracotta);
}

/* Caret on any item that has a dropdown, matching the reference's "Shop v" */
.bsc-nav > ul > .menu-item-has-children > a { padding-right: .8rem; }
.bsc-nav > ul > .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 5px; height: 5px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
}

/* Dropdown panel */
.bsc-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -.9rem;
	z-index: 60;
	min-width: 14rem;
	margin: 0;
	padding: .4rem 0;
	list-style: none;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius);
	box-shadow: var(--bsc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s var(--bsc-ease), transform .16s var(--bsc-ease), visibility .16s;
}
.bsc-nav li:hover > .sub-menu,
.bsc-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.bsc-nav .sub-menu a {
	display: block;
	padding: .5rem .95rem;
	font-size: .87rem;
	white-space: nowrap;
}
.bsc-nav .sub-menu a:hover { background: var(--bsc-cream-deep); color: var(--bsc-espresso); }

/*
 * The last items in the menu sit near the right edge, so a left aligned
 * dropdown there hangs off the viewport and gives the page a horizontal
 * scrollbar. Product Certifications is currently last on the client menu.
 */
.bsc-nav > ul > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: -.9rem;
}

.bsc-header__actions { display: flex; align-items: center; gap: .35rem; }

.bsc-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 42px;
	height: 42px;
	padding-inline: .5rem;
	border: 0;
	border-radius: var(--bsc-radius);
	background: transparent;
	color: var(--bsc-espresso);
	cursor: pointer;
	font-size: .88rem;
	font-weight: 600;
	font-family: inherit;
}
.bsc-iconbtn:hover { background: var(--bsc-cream-deep); color: var(--bsc-espresso); text-decoration: none; }
.bsc-iconbtn svg { width: 21px; height: 21px; }

.bsc-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--bsc-terracotta);
	color: var(--bsc-white);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
}

.bsc-burger { display: inline-flex; }

/* Mobile drawer */
.bsc-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(84vw, 340px);
	background: var(--bsc-cream);
	border-left: 1px solid var(--bsc-line);
	padding: 1.15rem;
	transform: translateX(100%);
	transition: transform .28s var(--bsc-ease);
	z-index: 110;
	overflow-y: auto;
	visibility: hidden;
}
.bsc-drawer.is-open { transform: translateX(0); visibility: visible; }

.bsc-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.bsc-drawer ul { list-style: none; margin: 0; padding: 0; }
.bsc-drawer li + li { border-top: 1px solid var(--bsc-line); }
.bsc-drawer a {
	display: block;
	padding: .85rem .25rem;
	font-family: var(--bsc-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bsc-espresso);
}

/*
 * Dropdown children are always open in the drawer, just indented and set
 * smaller, so a nested menu stays reachable on mobile without a toggle.
 */
.bsc-drawer .sub-menu { padding-left: .9rem; border-top: 1px solid var(--bsc-line); }
.bsc-drawer .sub-menu a {
	font-family: var(--bsc-font-body);
	font-size: .92rem;
	font-weight: 500;
	padding-block: .6rem;
	color: var(--bsc-muted);
}

.bsc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(68, 34, 18, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s var(--bsc-ease);
	z-index: 100;
}
.bsc-overlay.is-open { opacity: 1; visibility: visible; }

body.bsc-locked { overflow: hidden; }

/* Announcement marquee, gold band above the header */
.bsc-topbar {
	background: var(--bsc-gold);
	color: var(--bsc-white);
	font-size: .78rem;
	font-weight: 600;
	padding-block: .55rem;
	overflow: hidden;
	white-space: nowrap;
}

.bsc-topbar__track {
	display: inline-flex;
	align-items: center;
	will-change: transform;
	animation: bsc-marquee 42s linear infinite;
}
.bsc-topbar:hover .bsc-topbar__track { animation-play-state: paused; }

.bsc-topbar__item { padding-inline: 2.25rem; }
.bsc-topbar__item::after {
	content: "\2022";
	position: relative;
	left: 2.25rem;
	opacity: .6;
}

@keyframes bsc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.bsc-topbar { text-align: center; white-space: normal; }
	.bsc-topbar__track { animation: none; display: block; }
	.bsc-topbar__item:not(:first-child) { display: none; }
	.bsc-topbar__item::after { content: none; }
}

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */

.bsc-hero {
	position: relative;
	background: var(--bsc-cream);
	overflow: hidden;
}

.bsc-hero__grid {
	display: grid;
	gap: clamp(1.5rem, 5vw, 3rem);
	align-items: center;
	padding-block: clamp(2.25rem, 7vw, 4.5rem);
}

.bsc-hero__copy h1 {
	margin-bottom: .4em;
	/* The reference sets the hero noticeably larger and heavier than other h1s */
	font-size: clamp(3rem, 9vw, 6rem);
	font-weight: 700;
	line-height: 1.02;
}

.bsc-hero__lede {
	font-size: clamp(1.02rem, 2.4vw, 1.2rem);
	color: var(--bsc-muted);
	max-width: 34rem;
	margin-bottom: 1.75rem;
}

.bsc-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

/*
 * No overflow:hidden here. The badge and the note card deliberately sit
 * outside the image bounds, so the radius goes on the image itself.
 */
.bsc-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 34rem;
	margin-inline: auto;
}
.bsc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bsc-radius-lg);
	box-shadow: var(--bsc-shadow);
}

.bsc-hero__badge {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	background: rgba(250, 244, 233, .95);
	border-radius: var(--bsc-radius);
	padding: .6rem .9rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bsc-espresso);
	box-shadow: var(--bsc-shadow);
}
.bsc-hero__badge span { display: block; color: var(--bsc-terracotta-deep); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------------------------------------------------------------
   7. Trust strip
   --------------------------------------------------------------- */

.bsc-trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--bsc-line);
	border-block: 1px solid var(--bsc-line);
}

.bsc-trust__item {
	background: var(--bsc-cream);
	padding: 1.1rem .85rem;
	text-align: center;
}
.bsc-trust__item strong {
	display: block;
	font-family: var(--bsc-font-head);
	font-size: .95rem;
	margin-bottom: .15rem;
}
.bsc-trust__item span { font-size: .8rem; color: var(--bsc-muted); }

/* ---------------------------------------------------------------
   8. Product grid (shared by front page and shop)
   --------------------------------------------------------------- */

.bsc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bsc-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsc-card {
	display: flex;
	flex-direction: column;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	transition: transform .2s var(--bsc-ease), box-shadow .2s var(--bsc-ease);
}
.bsc-card:hover { transform: translateY(-3px); box-shadow: var(--bsc-shadow); }

.bsc-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bsc-cream-deep);
	overflow: hidden;
}
.bsc-card__media img { width: 100%; height: 100%; object-fit: cover; }

.bsc-card__tag {
	position: absolute;
	top: .6rem; left: .6rem;
	background: var(--bsc-espresso);
	color: var(--bsc-cream);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .55rem;
	border-radius: 2px;
}

.bsc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .4rem;
	padding: .9rem .85rem 1rem;
}

.bsc-card__title {
	font-family: var(--bsc-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.bsc-card__title a { color: var(--bsc-espresso); }
.bsc-card__title a:hover { color: var(--bsc-terracotta-deep); text-decoration: none; }

.bsc-card__meta { font-size: .82rem; color: var(--bsc-muted); margin: 0; }

.bsc-card__price {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--bsc-espresso);
	margin-top: auto;
	padding-top: .3rem;
}
.bsc-card__price del { color: var(--bsc-muted); font-weight: 400; font-size: .9em; margin-right: .35rem; }

.bsc-card__actions { display: flex; gap: .4rem; margin-top: .55rem; }
.bsc-card__actions .bsc-btn { flex: 1; padding: .65rem .8rem; font-size: .85rem; }

/* ---------------------------------------------------------------
   9. Subscribe band
   --------------------------------------------------------------- */

.bsc-band__grid { display: grid; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }

.bsc-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.bsc-steps li { display: flex; gap: .8rem; align-items: flex-start; }
.bsc-steps__num {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--bsc-wheat);
	color: var(--bsc-espresso);
	font-size: .82rem;
	font-weight: 700;
}
.bsc-steps strong { display: block; font-family: var(--bsc-font-head); }
.bsc-steps span { font-size: .9rem; color: rgba(250, 244, 233, .75); }

.bsc-band__media { border-radius: var(--bsc-radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.bsc-band__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------
   10. Categories
   --------------------------------------------------------------- */

.bsc-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bsc-gap); }

.bsc-cat {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	background: var(--bsc-espresso);
}
.bsc-cat img {
	width: 100%; height: 100%; object-fit: cover;
	opacity: .78;
	transition: transform .35s var(--bsc-ease), opacity .35s var(--bsc-ease);
}
.bsc-cat:hover img { transform: scale(1.05); opacity: .62; }

.bsc-cat__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem .9rem .9rem;
	background: linear-gradient(to top, rgba(68, 34, 18, .85), transparent);
	color: var(--bsc-white);
	font-family: var(--bsc-font-head);
	font-weight: 700;
	font-size: 1rem;
}
.bsc-cat__label small { display: block; font-family: var(--bsc-font-body); font-weight: 400; font-size: .76rem; opacity: .85; }

/* ---------------------------------------------------------------
   11. Story / process
   --------------------------------------------------------------- */

.bsc-process { display: grid; gap: 1.5rem; }

.bsc-process__item { text-align: center; }
.bsc-process__icon {
	width: 54px; height: 54px;
	margin: 0 auto .8rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bsc-cream-deep);
	color: var(--bsc-terracotta-deep);
}
.bsc-process__icon svg { width: 26px; height: 26px; }
.bsc-process__item h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.bsc-process__item p { font-size: .92rem; color: var(--bsc-muted); }

/* ---------------------------------------------------------------
   12. Testimonials
   --------------------------------------------------------------- */

.bsc-quotes { display: grid; gap: var(--bsc-gap); }

.bsc-quote {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.4rem 1.2rem;
}
.bsc-quote__stars { color: var(--bsc-terracotta); font-size: .9rem; letter-spacing: .1em; margin-bottom: .6rem; }
.bsc-quote p { font-size: .96rem; }
.bsc-quote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .84rem; font-weight: 600; color: var(--bsc-muted); }

/* ---------------------------------------------------------------
   13. Footer
   --------------------------------------------------------------- */

.bsc-footer {
	position: relative;
	overflow: hidden;
	background: var(--bsc-espresso);
	color: rgba(250, 245, 234, .78);
	padding-block: clamp(2.5rem, 6vw, 4rem) 0;
	font-size: .9rem;
}
.bsc-footer a { color: rgba(250, 245, 234, .78); }
.bsc-footer a:hover { color: var(--bsc-white); text-decoration: none; }
.bsc-footer > .bsc-wrap { position: relative; z-index: 1; }

/* Oversized wordmark bleeding off the bottom edge */
.bsc-footer__watermark {
	position: absolute;
	left: 50%;
	bottom: -.18em;
	transform: translateX(-50%);
	font-family: var(--bsc-font-head);
	font-weight: 700;
	font-size: clamp(5rem, 17vw, 15rem);
	line-height: .8;
	letter-spacing: .02em;
	white-space: nowrap;
	color: rgba(250, 245, 234, .045);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.bsc-footer__grid { display: grid; gap: 2.25rem; }

.bsc-footer h4 {
	color: var(--bsc-white);
	font-family: var(--bsc-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.bsc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.bsc-footer__logo {
	font-family: var(--bsc-font-head);
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--bsc-white);
	margin-bottom: .7rem;
}
.bsc-footer__logo .bsc-script { color: var(--bsc-gold-light); }

.bsc-footer__brand > p { max-width: 26rem; font-size: .89rem; line-height: 1.6; }

/* Newsletter, pill input with the button tucked inside */
.bsc-subscribe {
	display: flex;
	align-items: center;
	gap: .4rem;
	max-width: 25rem;
	margin-top: 1.4rem;
	padding: .3rem .3rem .3rem 1.1rem;
	background: rgba(250, 245, 234, .07);
	border: 1px solid rgba(250, 245, 234, .16);
	border-radius: var(--bsc-radius-pill);
}
.bsc-subscribe input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: .55rem 0;
	color: var(--bsc-cream);
	font-size: .86rem;
}
.bsc-subscribe input::placeholder { color: rgba(250, 245, 234, .5); }
.bsc-subscribe input:focus { outline: none; }
.bsc-subscribe button {
	flex-shrink: 0;
	border: 0;
	cursor: pointer;
	border-radius: var(--bsc-radius-pill);
	background: var(--bsc-gold);
	color: var(--bsc-espresso);
	font-family: var(--bsc-font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .7rem 1.15rem;
	transition: background .18s var(--bsc-ease);
}
.bsc-subscribe button:hover { background: var(--bsc-gold-light); }

/* Circular social buttons */
.bsc-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.bsc-social a {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(250, 245, 234, .22);
	color: rgba(250, 245, 234, .8);
	transition: background .18s var(--bsc-ease), color .18s var(--bsc-ease);
}
.bsc-social a:hover { background: var(--bsc-gold); color: var(--bsc-espresso); border-color: var(--bsc-gold); }
.bsc-social svg { width: 17px; height: 17px; }

/* Visit column, icon beside each line */
.bsc-footer__visit li { display: flex; gap: .65rem; align-items: flex-start; }
.bsc-footer__visit svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .18rem; color: var(--bsc-gold-light); }

.bsc-footer__bottom {
	margin-top: 2.75rem;
	border-top: 1px solid rgba(250, 245, 234, .12);
	padding-block: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	font-size: .8rem;
}
.bsc-footer__policies { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ---------------------------------------------------------------
   14. WooCommerce
   --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--bsc-cream-deep);
	border-top: 3px solid var(--bsc-terracotta);
	border-radius: var(--bsc-radius);
	color: var(--bsc-espresso);
	list-style: none;
	padding: .95rem 1.1rem;
	margin-bottom: 1.5rem;
}
.woocommerce-error { border-top-color: #a4231f; }

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bsc-gap);
	margin: 0;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	padding: 0;
	text-align: left;
	transition: transform .2s var(--bsc-ease), box-shadow .2s var(--bsc-ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--bsc-shadow); }

/* Reference uses a portrait crop on product imagery, not a square */
.woocommerce ul.products li.product a img,
.bsc-card__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.bsc-card__media { aspect-ratio: 4 / 5; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bsc-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bsc-espresso);
	padding: .9rem .85rem 0;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--bsc-espresso);
	font-size: .98rem;
	font-weight: 600;
	padding: 0 0 0 .95rem;
	margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--bsc-muted); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/*
 * The reference puts the price and the action on one row. WooCommerce emits
 * them as siblings, so a grid on the card pairs them without overriding
 * content-product.php.
 */
.woocommerce ul.products li.product {
	display: grid;
	grid-template-columns: 1fr auto;
	align-content: start;
	padding-bottom: 1.1rem;
}
.woocommerce ul.products li.product > *:not(.price):not(.button) {
	grid-column: 1 / -1;
}
.woocommerce ul.products li.product .price  { grid-column: 1; align-self: center; margin-top: .85rem; white-space: nowrap; }
.woocommerce ul.products li.product .button { grid-column: 2; align-self: center; margin-top: .85rem; white-space: nowrap; }
/* Titles keep a consistent height so the price row lines up across a row */
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 2.5em; }

/* Loop action reads as a text link, not a filled button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button:hover {
	background: transparent;
	color: var(--bsc-espresso);
	border: 0;
	padding: 0 .95rem 0 .5rem;
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	border-radius: 0;
}
.woocommerce ul.products li.product .button:hover { color: var(--bsc-gold); }
.woocommerce ul.products li.product .added_to_cart { display: none; }

.woocommerce span.onsale {
	background: var(--bsc-terracotta);
	color: var(--bsc-white);
	border-radius: 2px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: .35rem .55rem;
	top: .6rem;
	left: .6rem;
	right: auto;
	margin: 0;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: .88rem; color: var(--bsc-muted); }

/* Single product */
.woocommerce div.product .product_title { margin-bottom: .3em; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--bsc-espresso);
	font-size: 1.5rem;
	font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--bsc-cream-deep);
	border-color: var(--bsc-line);
	border-radius: var(--bsc-radius) var(--bsc-radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bsc-white); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--bsc-espresso); font-weight: 600; }

.woocommerce .quantity .qty {
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius);
	padding: .6rem .4rem;
	background: var(--bsc-white);
	color: var(--bsc-espresso);
	font-family: inherit;
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
input[type="url"], input[type="date"],
textarea, select {
	width: 100%;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius);
	padding: .7rem .8rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--bsc-espresso);
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--bsc-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .7rem .25rem; font-weight: 500; color: var(--bsc-espresso); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--bsc-terracotta-deep); font-weight: 700; }

/* ---------------------------------------------------------------
   15. Sticky product action bar (mobile first, per Phase 1 scope)
   --------------------------------------------------------------- */

.bsc-stickybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
	background: var(--bsc-cream);
	border-top: 1px solid var(--bsc-line);
	box-shadow: 0 -4px 18px rgba(68, 34, 18, .1);
	transform: translateY(110%);
	transition: transform .26s var(--bsc-ease);
}
.bsc-stickybar.is-visible { transform: translateY(0); }

.bsc-stickybar__info { flex: 1; min-width: 0; }
.bsc-stickybar__name {
	display: block;
	font-family: var(--bsc-font-head);
	font-size: .88rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bsc-stickybar__price { font-size: .82rem; color: var(--bsc-muted); }
.bsc-stickybar__actions { display: flex; gap: .4rem; flex-shrink: 0; }
.bsc-stickybar__actions .bsc-btn { padding: .7rem 1rem; font-size: .85rem; white-space: nowrap; }

/* ---------------------------------------------------------------
   16. Content pages
   --------------------------------------------------------------- */

.bsc-page__header { padding-block: clamp(1.75rem, 5vw, 3rem) 0; }
.bsc-page__header .bsc-eyebrow { margin-bottom: .4rem; }

.bsc-entry > * + * { margin-top: 1.1rem; }
.bsc-entry ul, .bsc-entry ol { padding-left: 1.35rem; }
.bsc-entry blockquote {
	margin: 0;
	padding: .35rem 0 .35rem 1.1rem;
	border-left: 3px solid var(--bsc-wheat);
	font-family: var(--bsc-font-head);
	font-size: 1.1rem;
}
.bsc-entry table { width: 100%; border-collapse: collapse; }
.bsc-entry th, .bsc-entry td { border: 1px solid var(--bsc-line); padding: .6rem .7rem; text-align: left; }

.bsc-pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2rem; }
.bsc-pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding-inline: .5rem;
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius);
	color: var(--bsc-espresso);
	font-size: .9rem;
	font-weight: 600;
}
.bsc-pagination .page-numbers.current { background: var(--bsc-espresso); color: var(--bsc-cream); border-color: var(--bsc-espresso); }

/* ---------------------------------------------------------------
   17. Reference-specific components
   --------------------------------------------------------------- */

/* Header call to action pill */
.bsc-header__cta { display: none; }

/* Section head with an action on the right */
.bsc-section__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: clamp(1.6rem, 4vw, 2.5rem);
}
.bsc-section__bar .bsc-section__head { margin-bottom: 0; }
.bsc-section__bar .bsc-btn { flex-shrink: 0; display: none; }

/* Circular rotating stamp, top right of the hero */
.bsc-stamp {
	position: absolute;
	top: 1.5rem;
	right: 1rem;
	width: 92px;
	height: 92px;
	display: none;
	color: var(--bsc-gold);
	opacity: .85;
	animation: bsc-spin 26s linear infinite;
}
.bsc-stamp svg { width: 100%; height: 100%; }
@keyframes bsc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bsc-stamp { animation: none; } }

/* "Baked Fresh Daily" circular badge on the hero image */
.bsc-hero__stamp {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	text-align: center;
	border-radius: 50%;
	background: var(--bsc-espresso-mid);
	color: var(--bsc-cream);
	border: 1px dashed rgba(250, 245, 234, .5);
	outline: 4px solid var(--bsc-espresso-mid);
	outline-offset: -7px;
	font-family: var(--bsc-font-script);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
	padding: .5rem;
}

/* "24-hour Slow Fermentation" card, bottom right of the hero image */
.bsc-hero__note {
	position: absolute;
	right: -.5rem;
	bottom: -1.25rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	background: var(--bsc-white);
	border-radius: var(--bsc-radius-lg);
	padding: .8rem 1.1rem;
	box-shadow: var(--bsc-shadow);
	max-width: 82%;
}
.bsc-hero__note-icon {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bsc-cream-deep);
	color: var(--bsc-gold);
}
.bsc-hero__note-icon svg { width: 20px; height: 20px; }
.bsc-hero__note strong {
	display: block;
	font-family: var(--bsc-font-head);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.1;
}
.bsc-hero__note span { font-size: .78rem; color: var(--bsc-muted); }

/* Social proof row under the hero buttons */
.bsc-proof {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.bsc-proof:hover { text-decoration: none; }
.bsc-proof:hover .bsc-proof__text { color: var(--bsc-espresso); }
.bsc-proof__faces { display: flex; }
.bsc-proof__faces img {
	width: 38px; height: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bsc-cream);
}
.bsc-proof__faces img + img { margin-left: -12px; }
.bsc-proof__stars { color: var(--bsc-gold); font-size: .95rem; letter-spacing: .08em; }
.bsc-proof__score { font-weight: 600; font-size: .9rem; margin-left: .3rem; }
.bsc-proof__text { display: block; font-size: .82rem; color: var(--bsc-muted); }

/* Feature cards, the "Why choose us" row */
.bsc-features { display: grid; gap: 1rem; }

.bsc-feature {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.6rem 1.4rem 1.75rem;
}
.bsc-feature__icon {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	margin-bottom: 1.1rem;
	border-radius: 12px;
	background: var(--bsc-cream-deep);
	color: var(--bsc-espresso-mid);
}
.bsc-feature__icon svg { width: 23px; height: 23px; }
.bsc-feature h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: .5rem; }
.bsc-feature p { font-size: .88rem; color: var(--bsc-muted); margin: 0; }

/* The verified specific under a certification claim, when the client has one */
.bsc-feature__detail {
	display: block;
	margin-top: .4rem;
	font-weight: 500;
	color: var(--bsc-espresso-mid);
}

/* Product card extras: badge, category label, rating */
.bsc-card__badge,
.woocommerce ul.products li.product .bsc-badge {
	position: absolute;
	top: .75rem; left: .75rem;
	z-index: 2;
	background: var(--bsc-espresso-mid);
	color: var(--bsc-cream);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .7rem;
	border-radius: var(--bsc-radius-pill);
}

.bsc-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bsc-muted);
}

/* The badge is absolutely positioned against the card */
.woocommerce ul.products li.product { position: relative; }

/* Topline is injected before the title, so it needs the card's gutter */
.woocommerce ul.products li.product .bsc-card__topline {
	padding: .95rem .95rem 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: .3rem;
}
.bsc-card__rating {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	color: var(--bsc-espresso);
	letter-spacing: 0;
}
.bsc-card__rating svg { width: 12px; height: 12px; fill: var(--bsc-gold); stroke: none; }

.bsc-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: auto;
	padding-top: .5rem;
}
.bsc-card__link {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bsc-espresso);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

/* Product cards get the serif treatment */
.bsc-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bsc-font-head);
	font-size: clamp(1.15rem, 2.5vw, 1.35rem);
	font-weight: 600;
}

/* Category cards carry a product count above the name */
.bsc-cat__count {
	display: block;
	font-family: var(--bsc-font-body);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	opacity: .9;
	margin-bottom: .2rem;
}
.bsc-cat__label {
	font-size: clamp(1.2rem, 2.6vw, 1.5rem);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   18. Interior pages
   --------------------------------------------------------------- */

/* Page hero, shared by every interior page and archive */
.bsc-pagehero {
	background: var(--bsc-cream-deep);
	padding-block: clamp(2.25rem, 6vw, 4rem);
	text-align: center;
	border-bottom: 1px solid var(--bsc-line);
}
.bsc-pagehero .bsc-eyebrow { justify-content: center; }
.bsc-pagehero .bsc-eyebrow::before {
	content: "";
	width: 2.75rem; height: 1px;
	background: currentColor; opacity: .55;
	flex-shrink: 0; order: -1;
}
.bsc-pagehero h1 { margin-bottom: .25em; }

/*
 * Long headlines, like the client's Our Story title, need smaller display
 * sizes or the script half runs to three lines and swamps the page.
 */
.bsc-pagehero--compact h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 46rem; margin-inline: auto; }
.bsc-pagehero--compact h1 .bsc-script { font-size: 1.05em; }
.bsc-pagehero p {
	max-width: 42rem;
	margin-inline: auto;
	color: var(--bsc-muted);
	font-size: 1.02rem;
}

/* Breadcrumb */
.bsc-crumbs {
	font-size: .78rem;
	color: var(--bsc-muted);
	margin-top: .9rem;
}
.bsc-crumbs a { color: var(--bsc-muted); }
.bsc-crumbs a:hover { color: var(--bsc-espresso); }

/* Prose column for policy and guide pages */
.bsc-prose { max-width: 44rem; margin-inline: auto; }

/*
 * Heading sizes inside written content, asked for in the client review of
 * 2026-08-19: h2 to 32px and h3 to 24px.
 *
 * Scoped to content areas on purpose. The review measured 65px on a product
 * description, which was Elementor's kit forcing every h2 to a fixed size.
 * That is fixed separately. Applying 32px globally would also shrink the
 * landing page display headings, which are meant to be large, so this only
 * covers headings the client writes: product descriptions, the tabs, and
 * page content.
 */
.bsc-prose h2,
.bsc-entry h2,
.woocommerce div.product .woocommerce-tabs .panel h2,
body[class*="elementor-kit-"] .bsc-entry h2,
body[class*="elementor-kit-"] .woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 2rem;
	margin-top: 2rem;
	line-height: 1.2;
}

.bsc-prose h3,
.bsc-entry h3,
.woocommerce div.product .woocommerce-tabs .panel h3,
body[class*="elementor-kit-"] .bsc-entry h3,
body[class*="elementor-kit-"] .woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 1.5rem;
	margin-top: 1.6rem;
	line-height: 1.25;
}

/* Story layout */
.bsc-story__grid { display: grid; gap: clamp(1.75rem, 5vw, 3.25rem); align-items: center; }
/*
 * The reference crops both story images to the same portrait frame. Without
 * a fixed ratio the tall source photos run to nearly 800px and strand the
 * text column in whitespace.
 */
.bsc-story__media img {
	border-radius: var(--bsc-radius-lg);
	box-shadow: var(--bsc-shadow);
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.bsc-story__lead {
	font-family: var(--bsc-font-head);
	font-size: clamp(1.35rem, 3.2vw, 1.75rem);
	line-height: 1.35;
	color: var(--bsc-espresso);
}

/*
 * Our Story runs plain serif subheads over each block, with no eyebrow and
 * no script accent, so they sit smaller than a section h2.
 */
.bsc-story__title,
body[class*="elementor-kit-"] .bsc-story__title { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: .6rem; }
.bsc-story__text p { color: var(--bsc-muted); }
.bsc-story__text p:last-child { margin-bottom: 0; }

.bsc-story__cta { text-align: center; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }

/*
 * Numbered steps, How it works.
 *
 * The reference stacks these as full width rows, not as a three column grid:
 * an oversized serif numeral on the left, the copy in the middle, a gold
 * check on the right.
 */
.bsc-howto {
	list-style: none;
	max-width: 60rem;
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	counter-reset: bsc-step;
}

.bsc-howto__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: clamp(1.4rem, 3.5vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}
.bsc-howto__item::before {
	counter-increment: bsc-step;
	content: counter(bsc-step, decimal-leading-zero);
	font-family: var(--bsc-font-head);
	font-size: clamp(2.4rem, 6vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--bsc-gold);
	opacity: .8;
}
.bsc-howto__body h3 { margin-bottom: .35rem; }
.bsc-howto__body p { font-size: .92rem; color: var(--bsc-muted); margin: 0; }

.bsc-howto__check { display: grid; place-items: center; color: var(--bsc-gold); }
.bsc-howto__check svg { width: 26px; height: 26px; }

.bsc-howto__cta { text-align: center; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }

/* FAQ accordion */
.bsc-faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .7rem; }

.bsc-faq__item {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
}
.bsc-faq__item[open] { border-color: rgba(184, 150, 90, .55); }

.bsc-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 1.25rem;
	font-family: var(--bsc-font-head);
	font-size: clamp(1.08rem, 2.4vw, 1.3rem);
	font-weight: 600;
	color: var(--bsc-espresso);
}
.bsc-faq__q::-webkit-details-marker { display: none; }

/* Circular toggle on the right, matching the reference */
.bsc-faq__q::after {
	content: "+";
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bsc-cream-deep);
	font-family: var(--bsc-font-body);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1;
	color: var(--bsc-espresso-mid);
	transition: background .18s var(--bsc-ease), color .18s var(--bsc-ease);
}
.bsc-faq__q:hover::after { background: var(--bsc-gold); color: var(--bsc-white); }
.bsc-faq__item[open] .bsc-faq__q::after { content: "\2212"; }

.bsc-faq__a {
	padding: 0 1.25rem 1.25rem;
	font-size: .94rem;
	color: var(--bsc-muted);
}
.bsc-faq__a p:last-child { margin-bottom: 0; }

/*
 * Delivery facts.
 *
 * Rebuilt on client feedback, 2026-08-16: the label and the figure were the
 * wrong way round, and the joined single row read as a table rather than as
 * three facts. Now three cards, each reading label, figure, detail from the
 * top, which is the order they get scanned in.
 */
.bsc-facts {
	display: grid;
	gap: .85rem;
	max-width: 52rem;
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.bsc-fact {
	display: grid;
	justify-items: center;
	gap: .1rem;
	padding: 1.35rem 1.15rem 1.5rem;
	text-align: center;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
}

.bsc-fact__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	margin-bottom: .55rem;
	border-radius: 11px;
	background: var(--bsc-cream-deep);
	color: var(--bsc-espresso-mid);
}
.bsc-fact__icon svg { width: 19px; height: 19px; }

.bsc-fact__label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--bsc-muted);
}

.bsc-fact__value {
	font-family: var(--bsc-font-head);
	font-size: clamp(1.35rem, 3.2vw, 1.7rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--bsc-espresso);
}

.bsc-fact__note {
	margin-top: .2rem;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--bsc-muted);
	max-width: 15rem;
}

/* FAQ closing line */
.bsc-faq__more {
	text-align: center;
	margin-top: 2.5rem;
	font-family: var(--bsc-font-head);
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
	color: var(--bsc-espresso);
}
.bsc-faq__more a { color: var(--bsc-terracotta-deep); text-decoration: underline; }
.bsc-faq__more a:hover { color: var(--bsc-espresso); }

/* Lab results table, Certifications */
.bsc-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bsc-table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	font-size: .92rem;
}
.bsc-table th,
.bsc-table td {
	padding: .75rem .9rem;
	text-align: right;
	border-bottom: 1px solid var(--bsc-line);
}
.bsc-table thead th {
	background: var(--bsc-cream-deep);
	font-family: var(--bsc-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bsc-espresso);
}
.bsc-table th:first-child,
.bsc-table td:first-child { text-align: left; }
.bsc-table tbody th {
	font-weight: 500;
	color: var(--bsc-muted);
	font-size: .88rem;
}
.bsc-table tbody tr:last-child th,
.bsc-table tbody tr:last-child td { border-bottom: 0; }
.bsc-table tbody td { font-variant-numeric: tabular-nums; }

.bsc-table__note {
	max-width: 40rem;
	margin: 1.25rem auto 0;
	text-align: center;
	font-size: .88rem;
	color: var(--bsc-muted);
}

/* Downloadable report links */
.bsc-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bsc-reports a {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .9rem 1.1rem;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	color: var(--bsc-espresso);
	transition: border-color .18s var(--bsc-ease), transform .18s var(--bsc-ease);
}
.bsc-reports a:hover {
	text-decoration: none;
	border-color: var(--bsc-gold);
	transform: translateY(-2px);
}
.bsc-reports__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--bsc-cream-deep);
	color: var(--bsc-espresso-mid);
}
.bsc-reports__icon svg { width: 20px; height: 20px; }
.bsc-reports__body strong {
	display: block;
	font-family: var(--bsc-font-head);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
}
.bsc-reports__body span { font-size: .84rem; color: var(--bsc-muted); }

/* Contact */
.bsc-contact__grid { display: grid; gap: 2rem; align-items: start; }

.bsc-contact__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.bsc-contact__list li { display: flex; gap: .85rem; align-items: flex-start; }
.bsc-contact__list .bsc-feature__icon { margin-bottom: 0; width: 42px; height: 42px; }
.bsc-contact__list strong { display: block; font-family: var(--bsc-font-head); font-size: 1.15rem; }
.bsc-contact__list a, .bsc-contact__list span { font-size: .92rem; color: var(--bsc-muted); }
.bsc-contact__list a:hover { color: var(--bsc-gold); }

.bsc-contact__panel {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.6rem 1.4rem;
}

/* Shop toolbar: category pills + search */
.bsc-shopbar { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.bsc-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: .35rem;
	margin-bottom: 1rem;
}
.bsc-pills::-webkit-scrollbar { display: none; }

.bsc-pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: .6rem 1.15rem;
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-pill);
	background: var(--bsc-white);
	color: var(--bsc-espresso);
	font-size: .82rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background .16s var(--bsc-ease), color .16s var(--bsc-ease);
}
.bsc-pill:hover { background: var(--bsc-cream-deep); color: var(--bsc-espresso); text-decoration: none; }
.bsc-pill.is-active {
	background: var(--bsc-espresso-mid);
	border-color: var(--bsc-espresso-mid);
	color: var(--bsc-white);
	font-weight: 600;
}

.bsc-shopsearch {
	display: flex;
	align-items: center;
	gap: .55rem;
	max-width: 19rem;
	padding: .1rem .95rem;
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-pill);
}
.bsc-shopsearch svg { width: 16px; height: 16px; color: var(--bsc-muted); flex-shrink: 0; }
.bsc-shopsearch input[type="search"] {
	border: 0;
	background: transparent;
	padding: .6rem 0;
	font-size: .86rem;
	width: 100%;
}
.bsc-shopsearch input[type="search"]:focus { outline: none; }

/* Woo's own result count and ordering sit alongside the pills */
.woocommerce .woocommerce-result-count { margin-bottom: .5rem; }
.woocommerce .woocommerce-ordering select {
	border-radius: var(--bsc-radius-pill);
	padding: .6rem 1rem;
	background: var(--bsc-white);
	font-size: .84rem;
}

/* Single product refinements */
.woocommerce div.product .product_title {
	font-size: clamp(2rem, 5vw, 3.1rem);
	font-weight: 600;
}
.woocommerce div.product div.images img { border-radius: var(--bsc-radius-lg); }
.woocommerce div.product form.cart { margin-bottom: 1.5rem; }

/*
 * Product gallery, collapsed height guard.
 *
 * Found on staging 2026-08-16: the main product image was invisible while
 * the thumbnails rendered fine. The gallery images are floated, and
 * flexslider had not finished building its `.flex-viewport` wrapper, so
 * nothing contained the floats and `.woocommerce-product-gallery__wrapper`
 * computed to height 0. The image was loaded and present, just outside a
 * zero height parent.
 *
 * A clearfix restores the height whether or not the slider initialises, so
 * a JS failure can never blank the product image again. Elementor throws
 * `elementorFrontendConfig is not defined` on these pages, which is the most
 * likely reason the slider does not finish.
 */
.woocommerce div.product .woocommerce-product-gallery__wrapper::after {
	content: "";
	display: block;
	clear: both;
}

/* Without the slider there is no way to change image, so show just the first */
.woocommerce div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image {
	float: none;
	width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image {
	display: none;
}

/*
 * Variable products: WooCommerce paints the add to cart button its own
 * purple (#7f54b3) until a variant is chosen, via
 * `.woocommerce button.button.alt.disabled` at (0,3,1), which outranked the
 * theme's (0,2,1) button rule. On staging every variable product showed a
 * lavender button. Matched here and given a genuinely "not ready" look
 * rather than a brand colour, since the button really is not clickable yet.
 */
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover {
	background: var(--bsc-espresso-mid);
	color: var(--bsc-white);
	opacity: .45;
	cursor: not-allowed;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.02rem;
	color: var(--bsc-muted);
}
.bsc-buy {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.25rem;
	margin-block: 1.25rem;
}

/* Cart, checkout and account tables */
.woocommerce table.shop_table {
	border-radius: var(--bsc-radius-lg);
	border-color: var(--bsc-line);
	background: var(--bsc-white);
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-family: var(--bsc-font-body);
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bsc-muted);
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* ---------------------------------------------------------------
   19. Cart, checkout and account
   Covers both the classic shortcode markup and WooCommerce Blocks,
   since this store runs the block cart and checkout.
   --------------------------------------------------------------- */

/* Shared panel look */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-checkout__sidebar {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.5rem 1.35rem;
}

/* Headings inside Woo flows pick up the serif */
.woocommerce-cart h2,
.woocommerce-checkout h2,
.woocommerce-account h2,
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--bsc-font-head) !important;
	font-weight: 600 !important;
	color: var(--bsc-espresso) !important;
	letter-spacing: -.005em;
	text-transform: none !important;
	font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
}

/* Tables read as cards */
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--bsc-line); }
.woocommerce table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr { border-color: var(--bsc-line); }

.woocommerce table.cart img,
.wc-block-cart-item__image img {
	border-radius: var(--bsc-radius);
	width: 74px;
}

.woocommerce a.remove {
	color: var(--bsc-terracotta-deep) !important;
	font-weight: 400;
}
.woocommerce a.remove:hover { background: var(--bsc-terracotta-deep); color: var(--bsc-white) !important; }

/* Coupon and quantity controls */
.woocommerce .cart .actions .coupon .input-text {
	width: auto;
	min-width: 11rem;
	margin-right: .5rem;
}

/* Block cart and checkout */
.wc-block-components-product-name {
	font-family: var(--bsc-font-head);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--bsc-espresso);
}
.wc-block-components-product-name:hover { color: var(--bsc-gold); }

.wc-block-components-totals-item__value,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
	font-weight: 600;
	color: var(--bsc-espresso);
}

.wc-block-components-button:not(.is-link) {
	background: var(--bsc-espresso-mid) !important;
	color: var(--bsc-white) !important;
	border-radius: var(--bsc-radius-pill) !important;
	font-family: var(--bsc-font-body) !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 1rem 1.9rem !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--bsc-espresso) !important; }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
	border-radius: var(--bsc-radius) !important;
	border-color: var(--bsc-line) !important;
	background: var(--bsc-white) !important;
	font-family: var(--bsc-font-body) !important;
	color: var(--bsc-espresso) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--bsc-muted); }

.wc-block-components-checkout-step {
	border-color: var(--bsc-line);
}
.wc-block-components-notice-banner {
	border-radius: var(--bsc-radius) !important;
	background: var(--bsc-cream-deep) !important;
	border-color: var(--bsc-gold) !important;
	color: var(--bsc-espresso) !important;
}

/* Empty cart state */
.wc-block-cart__empty-cart__title,
.cart-empty {
	font-family: var(--bsc-font-head);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	color: var(--bsc-espresso);
}

/* My Account navigation as a card */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: .4rem 1rem;
	margin-bottom: 1.75rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--bsc-gold); }

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.6rem 1.4rem;
}

/* Login and register columns */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	padding: 1.6rem 1.4rem;
}
.woocommerce form.login,
.woocommerce form.register { border: 0; padding: 0; margin: 0; border-radius: 0; }

.woocommerce-address-fields__field-wrapper,
.woocommerce-Addresses { margin-top: .5rem; }

/* Order tables in the account area */
.woocommerce-orders-table__cell-order-number a { font-weight: 600; }
.woocommerce-order-overview {
	list-style: none;
	padding: 1.25rem;
	background: var(--bsc-cream-deep);
	border-radius: var(--bsc-radius-lg);
}

/* ---------------------------------------------------------------
   20. Elementor bridge
   Several live pages (/shop/, /cart/, the policy pages) are built in
   Elementor and keep rendering with the old Astra era typography and
   colours. Remapping Elementor's own global tokens pulls that content
   into the new design system without touching the page layouts.
   --------------------------------------------------------------- */

body[class*="elementor-kit-"],
.elementor-widget-container {
	/* Elementor global colours */
	--e-global-color-primary:   var(--bsc-espresso);
	--e-global-color-secondary: var(--bsc-espresso-mid);
	--e-global-color-text:      var(--bsc-muted);
	--e-global-color-accent:    var(--bsc-gold);

	/* The Astra palette Elementor inherited, remapped onto the new one */
	--e-global-color-astglobalcolor0: var(--bsc-gold);
	--e-global-color-astglobalcolor1: var(--bsc-espresso-mid);
	--e-global-color-astglobalcolor2: var(--bsc-espresso);
	--e-global-color-astglobalcolor3: var(--bsc-muted);
	--e-global-color-astglobalcolor4: var(--bsc-white);
	--e-global-color-astglobalcolor5: var(--bsc-cream-deep);
	--e-global-color-astglobalcolor6: var(--bsc-espresso);
	--e-global-color-astglobalcolor7: var(--bsc-line);
	--e-global-color-astglobalcolor8: var(--bsc-espresso);

	/* Typography */
	--e-global-typography-primary-font-family:   "Cormorant Garamond";
	--e-global-typography-primary-font-weight:   600;
	--e-global-typography-secondary-font-family: "Cormorant Garamond";
	--e-global-typography-secondary-font-weight: 600;
	--e-global-typography-text-font-family:      "Inter";
	--e-global-typography-accent-font-family:    "Inter";
}

/* Elementor headings take the display serif */
.elementor-widget-heading .elementor-heading-title,
.elementor h1, .elementor h2, .elementor h3, .elementor h4 {
	font-family: var(--bsc-font-head) !important;
	font-weight: 600 !important;
	color: var(--bsc-espresso);
	letter-spacing: -.005em;
	line-height: 1.1;
}

/* Elementor body copy takes the sans */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor p, .elementor li {
	font-family: var(--bsc-font-body) !important;
}

/* Elementor buttons match the theme pill */
.elementor-button,
.elementor-button-link {
	font-family: var(--bsc-font-body) !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: var(--bsc-radius-pill) !important;
	background-color: var(--bsc-espresso-mid) !important;
	color: var(--bsc-white) !important;
	padding: 1rem 1.9rem !important;
	transition: background-color .18s var(--bsc-ease);
}
.elementor-button:hover { background-color: var(--bsc-espresso) !important; }

/* Elementor icons pick up the gold accent */
.elementor-icon { color: var(--bsc-gold); }
.elementor-icon svg { fill: currentColor; }

/*
 * Elementor sections that were painted plain white now sit on the cream
 * page background instead, so interior pages stop looking like two sites
 * stitched together.
 */
.elementor-section[class*="elementor-section"] > .elementor-background-overlay { opacity: .06; }

/*
 * Elementor's global kit overrides every heading on the site.
 *
 * Found on staging 2026-08-16: the kit stylesheet, uploads/elementor/css/
 * post-5.css, carries `.elementor-kit-5 h1 { font-family: roc, sans-serif }`
 * and the same for h2 to h6. Body carries the `elementor-kit-5` class, so at
 * specificity (0,1,1) that beats the theme's bare `h1` at (0,0,1) and every
 * heading on every page rendered in `roc`, the leftover Astra era font,
 * instead of Cormorant Garamond.
 *
 * `roc` is registered by the Use Any Font plugin. This is the font the old
 * handoff notes called "never identified".
 *
 * The kit ID is site specific, so this matches any of them, and `body` in
 * front takes it to (0,1,2) so it wins outright. The real fix is for the
 * client to clear the fonts in Elementor > Site Settings > Typography, but
 * the theme should not depend on that.
 */
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6 {
	font-family: var(--bsc-font-head);
	color: var(--bsc-espresso);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.005em;
}

/*
 * The kit also pins heading sizes, `h2` at a fixed 65px for example, which
 * both looks wrong and stops them scaling on small screens. Restated here
 * from the same tokens the base rules use.
 */
body[class*="elementor-kit-"] h1 { font-size: var(--bsc-h1); }
body[class*="elementor-kit-"] h2 { font-size: var(--bsc-h2); }
body[class*="elementor-kit-"] h3 { font-size: var(--bsc-h3); }

/*
 * And the kit sets the body font to `spring`, another Use Any Font leftover,
 * at `.elementor-kit-5` which is (0,1,0) against the theme's bare `body` at
 * (0,0,1). That meant every paragraph, link, nav item and button on the site
 * was rendering in the old font rather than Inter. Same story as `roc` for
 * the headings.
 */
body[class*="elementor-kit-"] {
	font-family: var(--bsc-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--bsc-espresso);
}

/*
 * A link inside a heading must keep the heading's face. Without this the
 * rule below drags every heading link back to the body font, so an h2 renders
 * in Cormorant while the anchor inside it renders in Inter. Caught on the
 * blog archive, but it affected every linked heading on the site.
 */
body[class*="elementor-kit-"] :is(h1, h2, h3, h4, h5, h6) a { font-family: inherit; }

body[class*="elementor-kit-"] a,
body[class*="elementor-kit-"] button,
body[class*="elementor-kit-"] input,
body[class*="elementor-kit-"] select,
body[class*="elementor-kit-"] textarea,
body[class*="elementor-kit-"] input[type="button"],
body[class*="elementor-kit-"] input[type="submit"] {
	font-family: var(--bsc-font-body);
}

/* Headings inside Elementor content keep the display face, not the body one */
body[class*="elementor-kit-"] .bsc-brand__text,
body[class*="elementor-kit-"] .bsc-fact__value,
body[class*="elementor-kit-"] .bsc-story__title { font-family: var(--bsc-font-head); }

/* The script accent has to survive the override above */
body[class*="elementor-kit-"] .bsc-script {
	font-family: var(--bsc-font-script);
	color: var(--bsc-gold);
}

/* Espresso sections keep their light heading colour */
body[class*="elementor-kit-"] .bsc-section--espresso h1,
body[class*="elementor-kit-"] .bsc-section--espresso h2,
body[class*="elementor-kit-"] .bsc-section--espresso h3 { color: var(--bsc-white); }

body[class*="elementor-kit-"] .bsc-footer h1,
body[class*="elementor-kit-"] .bsc-footer h2,
body[class*="elementor-kit-"] .bsc-footer h3,
body[class*="elementor-kit-"] .bsc-footer h4 { color: var(--bsc-cream); }

/* UAE navigation and footer widgets, in case HFE stays enabled */
.hfe-nav-menu .menu-item a.hfe-menu-item {
	font-family: var(--bsc-font-body) !important;
	color: var(--bsc-espresso) !important;
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover { color: var(--bsc-gold) !important; }

/* ---------------------------------------------------------------
   21. Breakpoints
   --------------------------------------------------------------- */

@media (min-width: 600px) {
	.bsc-trust { grid-template-columns: repeat(4, 1fr); }
	.bsc-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsc-process { grid-template-columns: repeat(3, 1fr); }
	.bsc-features { grid-template-columns: repeat(2, 1fr); }
	.bsc-cats { grid-template-columns: repeat(4, 1fr); }
	.bsc-quotes { grid-template-columns: repeat(3, 1fr); }
	.bsc-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
	.bsc-section__bar .bsc-btn { display: inline-flex; }
	.bsc-facts { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	:root { --bsc-header-h: 76px; --bsc-gap: 1.6rem; }

	.bsc-nav { display: block; }
	.bsc-burger { display: none; }

	.bsc-brand img { max-height: 52px; }
	.bsc-brand--logo img { max-height: 68px; }
	.bsc-brand__text { font-size: 1.18rem; }

	.bsc-hero__grid { grid-template-columns: 1fr 1fr; }
	.bsc-band__grid { grid-template-columns: 1.05fr .95fr; }

	.bsc-header__cta { display: inline-flex; }
	.bsc-stamp { display: block; }
	.bsc-features { grid-template-columns: repeat(4, 1fr); }

	/* Our Story runs three trust cards, Certifications a two by two grid */
	.bsc-features--three { grid-template-columns: repeat(3, 1fr); }
	.bsc-features--two { grid-template-columns: repeat(2, 1fr); }
	.bsc-hero__stamp { width: 118px; height: 118px; font-size: 1.15rem; top: 1.5rem; left: 1.5rem; }
	.bsc-hero__note { right: -1.75rem; }

	.bsc-story__grid { grid-template-columns: 1fr 1fr; }
	.bsc-story__grid--flip .bsc-story__media { order: -1; }
	.bsc-contact__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }

	.bsc-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.bsc-footer__grid { grid-template-columns: 1.9fr 1fr 1fr 1.4fr; gap: 3rem; }

	/* Desktop keeps the inline add to cart, no sticky bar needed */
	.bsc-stickybar { display: none; }

	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 24%; }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
   22. Social login on the account forms
   Nextend's own buttons are generic, so they get pulled into the
   theme's palette here rather than sitting on top of it.
   --------------------------------------------------------------- */

/*
 * Named bsc-authsocial, not bsc-social. The footer social icon row already
 * owns .bsc-social and relies on it being flex. Reusing the name here, then
 * setting display:block to fix this divider, stacked the footer icons
 * vertically. Client spotted it on 2026-08-22.
 */
.bsc-authsocial { display: block; margin-top: 1.25rem; }

.bsc-authsocial__divider {
	display: flex;
	width: 100%;
	align-items: center;
	gap: .8rem;
	margin-bottom: 1rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bsc-muted);
}
.bsc-authsocial__divider::before,
.bsc-authsocial__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--bsc-line);
}

/* Nextend renders its own markup, so match its classes rather than fight them */
.bsc-authsocial .nsl-container { margin: 0 !important; padding: 0 !important; }

.bsc-authsocial .nsl-container-buttons a,
.bsc-authsocial .nsl-button {
	border-radius: var(--bsc-radius-pill) !important;
	font-family: var(--bsc-font-body) !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	box-shadow: none !important;
	border: 1px solid var(--bsc-line) !important;
	transition: border-color .18s var(--bsc-ease), transform .18s var(--bsc-ease);
}
.bsc-authsocial .nsl-container-buttons a:hover,
.bsc-authsocial .nsl-button:hover {
	border-color: var(--bsc-gold) !important;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   23. Journal
   Blog index and single post. Added 2026-08-22.
   --------------------------------------------------------------- */

.bsc-posts { display: grid; gap: 1.5rem; }

.bsc-post {
	background: var(--bsc-white);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s var(--bsc-ease), box-shadow .18s var(--bsc-ease);
}
.bsc-post:hover { transform: translateY(-3px); box-shadow: var(--bsc-shadow); }

.bsc-post__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.bsc-post__media img { width: 100%; height: 100%; object-fit: cover; }

.bsc-post__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: 1.4rem 1.4rem 1.6rem;
}

.bsc-post__meta {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bsc-muted);
}

/*
 * Prefixed with `body` deliberately. The Elementor bridge sets a size on
 * `body[class*="elementor-kit-"] h2`, which outranks a bare class, so this
 * needs matching specificity. Being later in the file, it then wins.
 */
/*
 * The Elementor bridge sets a size on `body[class*="elementor-kit-"] h2`,
 * which is (0,1,2) and outranks a bare class. The second selector matches
 * that weight so component headings keep their own size. Same rule, so the
 * value is not duplicated.
 */
.bsc-post__title,
body[class*="elementor-kit-"] .bsc-post__title {
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 1.65rem);
	line-height: 1.2;
}
.bsc-post__title a { color: var(--bsc-espresso); }
.bsc-post__title a:hover { color: var(--bsc-terracotta-deep); text-decoration: none; }

.bsc-post__excerpt {
	margin: 0;
	font-size: .92rem;
	color: var(--bsc-muted);
}

.bsc-post__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .35rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bsc-terracotta-deep);
}
.bsc-post__more:hover { color: var(--bsc-espresso); text-decoration: none; }
.bsc-post__more svg { width: 15px; height: 15px; }

/* Featured image on a single post */
.bsc-post__hero {
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
	max-width: 56rem;
	border-radius: var(--bsc-radius-lg);
	overflow: hidden;
	box-shadow: var(--bsc-shadow);
}
.bsc-post__hero img { width: 100%; height: auto; display: block; }

/* Categories under a post */
.bsc-post__terms {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	max-width: 44rem;
	margin: 2rem auto 0;
}

/* Previous and next */
.bsc-postnav {
	max-width: 44rem;
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bsc-line);
}
.bsc-postnav .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.bsc-postnav a {
	font-family: var(--bsc-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bsc-espresso);
}
.bsc-postnav a:hover { color: var(--bsc-terracotta-deep); text-decoration: none; }

.bsc-empty { text-align: center; padding-block: 2rem; }

@media (min-width: 600px) {
	.bsc-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.bsc-posts { grid-template-columns: repeat(3, 1fr); }
}

/*
 * Long hero headline. The live site's hero sentence is far longer than the
 * reference's two word headline, so it needs a smaller display size or it
 * runs to five lines and pushes the buttons below the fold.
 */
.bsc-hero__title--long,
body[class*="elementor-kit-"] .bsc-hero__title--long {
	font-size: clamp(1.9rem, 4.4vw, 3.2rem);
	line-height: 1.12;
}