/* Benito Phase 2 — values from Figma "Margz" Documentation page (mobile frames, 390px). */

:root {
	--bn-cream: #efedde;
	--bn-ink: #221514;
	--bn-ink-2: #563533;
	--bn-accent: #ae381d;
	--bn-card: rgba(255, 255, 255, 0.5);
	--bn-font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--bn-radius: 8px;
	--bn-col: 360px;
	--bn-header-h: 76px;
}

/* ---------- Base ---------- */

body.bn-site,
body.bn-site #outer-wrap,
body.bn-site #wrap,
body.bn-site #main,
body.bn-site #content-wrap {
	background: var(--bn-cream);
}

body.bn-site {
	color: #000;
	font-family: var(--bn-font);
	font-weight: 400;
}

body.bn-site h1,
body.bn-site h2,
body.bn-site h3,
body.bn-site p,
body.bn-site a,
body.bn-site button,
body.bn-site input,
body.bn-site select,
body.bn-site label,
body.bn-site li,
body.bn-site .woocommerce,
body.bn-site .woocommerce * {
	font-family: var(--bn-font);
}

body.bn-site h1,
body.bn-site h2,
body.bn-site h3 {
	letter-spacing: 0;
	line-height: normal;
	margin: 0;
}

body.bn-site p { margin: 0; }

body.bn-site img { max-width: 100%; height: auto; }

body.bn-site.bn-canvas #main { padding: 0; }
body.bn-site:not(.bn-canvas) #main { padding-top: var(--bn-header-h); }
body.bn-site #main .bn-page { padding-top: 0; }

.bn-visually-hidden,
.bn-site .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.bn-muted { color: rgba(0, 0, 0, 0.6); font-weight: 300; font-size: 14px; }
.bn-center { text-align: center; }

/* ---------- Buttons ---------- */

.bn-site .bn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: var(--bn-radius);
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	box-shadow: none;
	letter-spacing: 0;
	text-transform: none;
	min-height: 0;
}
.bn-site .bn-btn:hover { opacity: 0.85; }
.bn-site .bn-btn:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; }
.bn-site .bn-btn--cream { background: var(--bn-cream); color: var(--bn-ink); }
.bn-site .bn-btn--dark { background: var(--bn-ink); color: var(--bn-cream); }
.bn-site .bn-btn--white { background: #fff; color: #000; }
.bn-site .bn-btn--outline { background: transparent; color: var(--bn-cream); border-color: var(--bn-cream); }
.bn-site .bn-btn--162 { width: 162px; }
.bn-site .bn-btn--118 { width: 118px; }
.bn-site .bn-btn--h42 { height: 42px; }
.bn-site .bn-btn--block { width: 100%; }
.bn-site .bn-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Header ---------- */

.bn-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: rgba(34, 21, 20, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 0 0 16px 16px;
}
body.admin-bar .bn-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .bn-header { top: 46px; } }

.bn-logo,
.bn-footer__logo {
	display: block;
	padding: 7.784px;
	line-height: 0;
}
.bn-logo img,
.bn-footer__logo img {
	width: 98px;
	height: 36px;
	object-fit: cover;
	display: block;
}

.bn-header__actions { display: flex; align-items: center; gap: 16px; }
.bn-hero-page .bn-header__actions { gap: 8px; }

.bn-site .bn-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	line-height: 0;
	min-height: 0;
	box-shadow: none;
}
.bn-icon img { display: block; }
.bn-icon > img[src$="icon-search.svg"] { margin: 3px; }
.bn-icon:focus-visible { outline: 2px solid var(--bn-cream); outline-offset: -2px; }

.bn-cart-count {
	position: absolute;
	top: 6px; right: 4px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--bn-accent);
	color: var(--bn-cream);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.bn-cart-count.is-empty { display: none; }

.bn-burger {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 1px;
	width: 18px;
	height: 11px;
}
.bn-burger i { display: block; height: 3px; width: 100%; border-radius: 25px; background: var(--bn-cream); }
.bn-burger i:nth-child(2) { width: 9px; }

/* Drawer (menu contents not designed — minimal, on-brand) */
.bn-drawer { position: fixed; inset: 0; z-index: 1100; background: rgba(34, 21, 20, 0.5); }
.bn-drawer[hidden] { display: none; }
.bn-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(320px, 85vw);
	background: var(--bn-ink);
	padding: 72px 24px 24px;
	overflow-y: auto;
}
.bn-site .bn-drawer__close {
	position: absolute; top: 12px; right: 12px;
	padding: 15px; background: none; border: 0; line-height: 0; cursor: pointer;
}
.bn-drawer__menu { list-style: none; margin: 0; padding: 0; }
.bn-drawer__menu li { margin: 0 0 20px; }
.bn-drawer__menu a { color: var(--bn-cream); font-size: 20px; font-weight: 500; text-decoration: none; }
.bn-drawer__menu a:hover,
.bn-drawer__menu .current-menu-item > a { color: #fff; text-decoration: underline; }
body.bn-drawer-open { overflow: hidden; }

/* ---------- Image helpers ---------- */

.bn-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}
.bn-crop { position: relative; overflow: hidden; }
.bn-crop img {
	position: absolute;
	max-width: none !important;
	pointer-events: none;
}
.bn-crop--fill { position: absolute; inset: 0; border-radius: inherit; }
.bn-crop--fill img { width: auto; }

/* Figma "Ellipse 240": 855.68 x 767.24 box, inner 720.54 x 591.54 rotated -164deg */
.bn-veil {
	position: absolute;
	width: 855.681px;
	height: 767.236px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.bn-veil > span {
	position: relative;
	flex: none;
	width: 720.542px;
	height: 591.543px;
	transform: rotate(-164deg);
}
.bn-veil img {
	position: absolute;
	left: -5.43%;
	top: -6.61%;
	width: 110.86% !important;
	height: 113.22% !important;
	max-width: none !important;
	display: block;
}

/* ---------- Hero ---------- */

.bn-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 844px;
	background: var(--bn-ink);
}
.bn-hero--747 { height: 747px; }

.bn-hero__content {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	width: min(359px, calc(100% - 31px));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.bn-hero__text { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--bn-cream); }
.bn-site .bn-hero__title { font-size: 24px; font-weight: 700; color: var(--bn-cream); }
.bn-hero__sub { font-size: 15px; font-weight: 400; color: var(--bn-cream); }

/* ---------- Home ---------- */

.bn-home { display: flex; flex-direction: column; align-items: center; gap: 51px; }
.bn-tiles { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.bn-tile { position: relative; overflow: hidden; width: 100%; }
.bn-tile--premixes { height: 565px; background: rgba(255, 255, 255, 0.46); }
.bn-tile--recipes { height: 543px; }
.bn-tile--merch { height: 502px; }
.bn-tile__bottle {
	position: absolute;
	left: 50%; top: calc(50% - 6px);
	width: 248px; height: 473px;
	transform: translate(-50%, -50%);
}
.bn-tile__cta {
	position: absolute;
	left: 50%;
	transform: translateX(calc(-50% - 0.5px));
	width: min(359px, calc(100% - 31px));
}
.bn-site .bn-section-title { font-size: 24px; font-weight: 500; color: #000; text-align: center; width: 100%; }

/* ---------- Page column ---------- */

.bn-page {
	width: min(var(--bn-col), calc(100% - 30px));
	margin: 0 auto;
	padding: 36px 0 51px;
	display: flex;
	flex-direction: column;
	gap: 31px;
}
.bn-site .bn-h1 { font-size: 24px; font-weight: 500; color: #000; text-align: center; width: 327px; max-width: 100%; margin: 0 auto; }
.bn-intro { font-size: 15px; font-weight: 300; color: #000; text-align: center; width: 327px; max-width: 100%; margin: 0 auto; }
.bn-intro b { font-weight: 400; }
.bn-rule { border: 0; border-top: 0.5px solid var(--bn-ink); margin: 0; width: 100%; height: 0; background: none; }

/* ---------- Shop ---------- */

.bn-shop__top { display: flex; flex-direction: column; gap: 32px; }
.bn-shop__head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.bn-tabs {
	display: flex;
	gap: 14px;
	width: calc(100% + 15px);
	margin-right: -15px;
	overflow-x: auto;
	scrollbar-width: none;
	align-self: flex-start;
}
.bn-tabs::-webkit-scrollbar { display: none; }
.bn-site .bn-tab {
	flex: 0 0 118px;
	padding: 12px;
	border: 1px solid var(--bn-ink);
	border-radius: var(--bn-radius);
	background: transparent;
	color: var(--bn-ink);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
	min-height: 0;
	text-transform: none;
	letter-spacing: 0;
}
.bn-site .bn-tab.is-active { background: var(--bn-ink); color: var(--bn-cream); }
.bn-site .bn-tab:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; }

.bn-search { display: block; margin: 0; }
.bn-site .bn-search input {
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: 40px;
	background: #fff;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 100;
	color: #000;
	box-shadow: none;
}
.bn-site .bn-search input::placeholder { color: #000; opacity: 1; font-weight: 100; }

.bn-panel { display: flex; flex-direction: column; gap: 31px; }
.bn-panel[hidden] { display: none; }
.bn-panel--recipes { gap: 51px; margin-top: 20px; }

.bn-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 175px));
	justify-content: space-between;
	column-gap: 10px;
	row-gap: 12px;
}
.bn-site .bn-card {
	position: relative;
	display: block;
	min-height: 348px;
	padding: 28px 0 16px;
	border-radius: 12px;
	background: var(--bn-card);
	overflow: hidden;
	color: #000;
	text-decoration: none;
}
.bn-card[hidden],
.bn-rcard[hidden] { display: none; }
.bn-card__img {
	display: block;
	width: 138px; height: 253px;
	max-width: calc(100% - 20px);
	margin: 0 auto;
}
.bn-card__img img { width: 100%; height: 100% !important; object-fit: contain; }
.bn-card__meta {
	margin: 2px 11px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bn-card__name { font-size: 15px; font-weight: 400; }
.bn-card__price { font-size: 20px; font-weight: 500; }
.bn-count { font-size: 14px; font-weight: 300; color: #000; text-align: center; }

/* Sub-tabs (Mocktails | Cocktails, Newsletter | Events) */
.bn-subtabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	row-gap: 15px;
	width: 100%;
}
.bn-site .bn-subtab {
	padding: 0;
	background: none;
	border: 0;
	color: var(--bn-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-align: center;
	cursor: pointer;
	min-height: 0;
	text-transform: none;
	letter-spacing: 0;
}
.bn-site .bn-subtab.is-active { color: var(--bn-accent); }
.bn-subtab:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 4px; }
.bn-subtabs__track {
	grid-column: 1 / span 2;
	position: relative;
	height: 4px;
	border-radius: 41px;
	background: rgba(177, 177, 177, 0.24);
	overflow: hidden;
}
.bn-subtabs__bar {
	position: absolute;
	top: 0; left: 0;
	width: 50%;
	height: 4px;
	border-radius: 41px;
	background: var(--bn-accent);
	transition: transform 0.25s ease;
}
.bn-subtabs[data-active="1"] .bn-subtabs__bar { transform: translateX(100%); }

/* Recipe cards */
.bn-rlist { display: flex; flex-direction: column; gap: 56px; align-items: center; }
.bn-rcard {
	position: relative;
	width: 351px;
	max-width: 100%;
	height: 636px;
	border-radius: 24.686px;
	background: var(--bn-card);
	overflow: hidden;
}
.bn-site .bn-rcard__title {
	position: absolute;
	left: 20.5px; right: 20.5px; top: 33px;
	font-size: 15px;
	font-weight: 400;
	color: var(--bn-ink);
	text-align: center;
}
.bn-rcard__img {
	position: absolute;
	left: 50%; top: 68px;
	width: 330px; height: 521px;
	max-width: calc(100% - 21px);
	transform: translateX(-50%);
}
.bn-rcard__img:not(.bn-crop) img { width: 100%; height: 100% !important; object-fit: contain; }
.bn-site .bn-rcard__btn { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }

/* Recipe sheet (Figma "Recipe" 322:4115 — bottom sheet) */
.bn-sheet { position: fixed; inset: 0; z-index: 1200; }
.bn-sheet[hidden] { display: none; }
.bn-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.bn-sheet__panel {
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: min(390px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bn-ink);
	border-radius: 16px 16px 0 0;
	padding-bottom: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	outline: none;
}
.bn-sheet__panel--page { position: static; transform: none; margin: 0 auto; border-radius: 16px; max-height: none; }
.bn-sheet__head {
	position: relative;
	width: 100%;
	padding: 24px 16px 20px;
	border-bottom: 1px solid #eaecf0;
}
.bn-site .bn-sheet__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--bn-cream); padding-right: 40px; }
.bn-site .bn-sheet__close {
	position: absolute;
	top: 12px; right: 12px;
	width: 44px; height: 44px;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	min-height: 0;
}
.bn-sheet__body { width: 100%; padding: 0 16px; display: flex; flex-direction: column; gap: 24px; }
.bn-sheet__intro { display: flex; flex-direction: column; gap: 4px; }
.bn-site .bn-sheet__mix { font-size: 20px; font-weight: 700; line-height: 28px; color: var(--bn-cream); }
.bn-sheet__desc { font-size: 14px; line-height: 20px; color: #fff; }
.bn-sheet__lists { font-size: 14px; line-height: 20px; color: var(--bn-cream); }
.bn-sheet__lists p { margin: 0 0 8px; color: var(--bn-cream); }
.bn-sheet__lists ul { list-style: disc; margin: 0 0 8px; padding: 0 0 0 21px; }
.bn-sheet__lists ul + p { margin-top: 28px; }
.bn-sheet__lists li { margin: 0; color: var(--bn-cream); }
.bn-site .bn-sheet__cta { width: 224px; }
body.bn-sheet-open { overflow: hidden; }

/* ---------- Product ---------- */

.bn-pdp { padding-bottom: 120px; }
/* OceanWP's own mobile "Buy now" floating bar duplicates the Figma buy bar */
body.bn-site .owp-floating-bar { display: none !important; }
.bn-pdp__img { width: 219px; height: 403px; margin: 0 auto; }
.bn-pdp__img img { width: 100%; height: 100% !important; object-fit: contain; }
.bn-pdp__form { display: flex; flex-direction: column; gap: 31px; }
.bn-qty { position: relative; display: flex; align-items: center; justify-content: space-between; height: 48px; }
.bn-qty__label { font-size: 15px; font-weight: 300; color: #000; margin: 0; }
.bn-qty__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 22px; height: 41px; margin-right: 5px; }
.bn-site .bn-qty__btn {
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 41px; padding: 0;
	background: none; border: 0; cursor: pointer; min-height: 0;
}
.bn-site .bn-qty__input {
	width: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bn-ink);
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none;
	min-height: 0;
}
.bn-qty__input::-webkit-outer-spin-button,
.bn-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bn-site .bn-pdp__h { font-size: 15px; font-weight: 500; color: #000; }
.bn-pdp__desc { font-size: 15px; font-weight: 300; color: #000; }
.bn-pdp__desc p { margin: 0 0 18px; }
.bn-pdp__desc p:last-child { margin-bottom: 0; }

.bn-buybar {
	position: fixed;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	z-index: 900;
	width: min(390px, 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: rgba(39, 39, 39, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 16px 16px 0 0;
}
.bn-buybar__price { font-size: 24px; font-weight: 700; line-height: 48px; color: #fff; }

/* ---------- Cart ---------- */

.bn-cart__form { display: flex; flex-direction: column; gap: 31px; }
.bn-cart__items { display: flex; flex-direction: column; gap: 28px; padding-top: 14px; }
.bn-citem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 236px;
	padding: 20px 9px;
	border-radius: 12px;
	background: var(--bn-card);
	overflow: hidden;
}
.bn-citem__img { flex: 0 0 120px; height: 221px; display: block; }
.bn-citem__img img { width: 100%; height: 100% !important; object-fit: contain; }
.bn-citem__info { width: 209px; height: 198px; display: flex; flex-direction: column; gap: 15px; }
.bn-citem__top { display: flex; flex-direction: column; gap: 10px; }
.bn-site .bn-citem__name { font-size: 15px; font-weight: 400; color: #000; text-decoration: none; }
.bn-citem__range { font-size: 12px; font-weight: 300; color: #000; }
.bn-citem__qty { position: relative; display: inline-flex; align-items: center; gap: 0; width: 137px; height: 20px; margin: 0; font-size: 15px; font-weight: 300; color: #000; }
.bn-citem__qty > span { white-space: nowrap; }
.bn-site .bn-citem__qty select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	padding: 0 22px 0 9px;
	height: 20px;
	font-size: 15px;
	font-weight: 300;
	color: #000;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	width: auto;
}
.bn-citem__qty img { position: absolute; right: 8px; top: 7px; pointer-events: none; }
.bn-citem__price { font-size: 20px; font-weight: 500; color: #000; }

.bn-cart__totals { display: flex; flex-direction: column; gap: 16px; }
.bn-cart__row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 500; }
.bn-cart__continue { color: var(--bn-ink); font-size: 12px; text-align: center; }
.bn-cart--empty { align-items: center; }

/* WooCommerce notices inside our pages */
.bn-site .woocommerce-message,
.bn-site .woocommerce-info,
.bn-site .woocommerce-error {
	background: var(--bn-card);
	border: 0;
	border-left: 3px solid var(--bn-accent);
	color: #000;
	font-size: 13px;
	margin: 0;
	border-radius: 0;
}
.bn-site .woocommerce-message .button,
.bn-site .woocommerce-message a.button { display: none; }

/* ---------- Our story / community ---------- */

.bn-story { display: flex; flex-direction: column; align-items: center; gap: 52px; padding-bottom: 45px; overflow-x: hidden; }
.bn-prose { width: min(360px, calc(100% - 30px)); font-size: 15px; font-weight: 300; color: #000; text-align: center; scroll-margin-top: 96px; }
.bn-prose p { margin: 0 0 18px; }
.bn-prose p:last-child { margin-bottom: 0; }

.bn-feature {
	position: relative;
	width: min(390px, 100%);
	height: 750px;
	border-radius: 21px;
	overflow: hidden;
	background: var(--bn-ink);
}
.bn-feature .bn-cover { border-radius: 21px; }
.bn-glass {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 16px;
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(12.5px);
	backdrop-filter: blur(12.5px);
	border: 1px solid rgba(243, 243, 243, 0.25);
	border-radius: 16px 16px 0 0;
}
.bn-glass__text { display: flex; flex-direction: column; gap: 8px; color: #f8f8f8; font-size: 16px; font-weight: 300; }
.bn-site .bn-glass__title { font-size: 32px; font-weight: 500; color: #fff; }
.bn-glass__p--gap { margin-bottom: 4px !important; }
.bn-glass__actions { display: flex; gap: 8px; }

@media (prefers-reduced-motion: no-preference) {
	.bn-feature[data-bn-reveal] {
		transform: translateX(-200px) rotate(-180deg) scale(1.2);
		opacity: 0;
		transition: transform 0.5s cubic-bezier(0, 0, 0.58, 1), opacity 0.3s ease-out;
	}
	.bn-feature[data-bn-reveal].is-in { transform: none; opacity: 1; }
}

.bn-community { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-bottom: 51px; }
.bn-community__body { width: min(360px, calc(100% - 30px)); display: flex; flex-direction: column; gap: 31px; }
.bn-subpanel { min-height: 160px; }
.bn-subpanel[hidden] { display: none; }

/* ---------- Footer ---------- */

.bn-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	margin-top: 51px;
	padding: 37px 16px;
	background: linear-gradient(to bottom, var(--bn-ink), var(--bn-ink-2));
	color: var(--bn-cream);
}
.bn-canvas .bn-footer { margin-top: 0; }
.bn-footer__blurb { font-size: 16px; font-weight: 500; color: var(--bn-cream); }
.bn-footer__lower { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.bn-footer__social { display: flex; flex-direction: column; gap: 24px; }
.bn-footer__social-title { font-size: 16px; font-weight: 500; color: var(--bn-cream); text-align: center; }
.bn-footer__icons { display: flex; gap: 16px; align-items: center; }
.bn-footer__icon { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; line-height: 0; }
.bn-footer__links { list-style: none; margin: 0; padding: 0; width: 173px; display: flex; flex-direction: column; gap: 16px; }
.bn-footer__links li { margin: 0; font-size: 16px; font-weight: 500; color: var(--bn-cream); }
.bn-footer__links a,
.bn-footer__links span { color: var(--bn-cream); text-decoration: underline; text-underline-position: from-font; }

/* ---------- Checkout / my account (not redesigned yet: tokens only) ---------- */

.bn-site:not(.bn-canvas) #content-wrap { padding-top: 36px; }
.bn-site .woocommerce-checkout .button,
.bn-site .woocommerce-account .button,
.bn-site #place_order {
	background: var(--bn-ink);
	color: var(--bn-cream);
	border-radius: var(--bn-radius);
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
}
.bn-site .woocommerce-checkout input[type=text],
.bn-site .woocommerce-checkout input[type=email],
.bn-site .woocommerce-checkout input[type=tel],
.bn-site .woocommerce-checkout select,
.bn-site .woocommerce-checkout textarea {
	border-radius: var(--bn-radius);
	background: #fff;
	border: 1px solid rgba(34, 21, 20, 0.25);
	font-family: var(--bn-font);
}
.bn-site .benito-continue-shopping a { color: var(--bn-ink); }

/* ---------- Desktop (no desktop frames: mobile components adapted to wide screens) ---------- */

.bn-header__nav { display: none; }

@media (min-width: 768px) {
	:root { --bn-col: 720px; --bn-wide: min(1200px, calc(100% - 48px)); }

	/* Header */
	.bn-header { padding: 12px max(24px, calc((100% - 1200px) / 2)); }

	/* Veil is drawn for a 390px frame; on wide screens use a bottom gradient instead */
	.bn-veil { display: none; }
	.bn-hero::after,
	.bn-tile--recipes::after,
	.bn-tile--merch::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 60%;
		background: linear-gradient(to top, rgba(34, 21, 20, 0.83), rgba(34, 21, 20, 0));
		pointer-events: none;
	}

	/* Heroes: copy sits on the left of the content width */
	.bn-hero { height: max(640px, min(844px, 100vh)); }
	.bn-hero--747 { height: max(600px, min(747px, 90vh)); }
	.bn-hero__content {
		left: max(24px, calc((100% - 1200px) / 2));
		transform: none;
		width: min(520px, calc(100% - 48px));
		bottom: 64px !important;
		z-index: 1;
	}
	.bn-site .bn-hero__title { font-size: 40px; }
	.bn-hero__sub { font-size: 18px; }

	/* Home tiles */
	.bn-tiles { width: var(--bn-wide); margin: 0 auto; gap: 24px; }
	.bn-tile { border-radius: 16px; }
	.bn-tile__cta {
		left: 24px;
		transform: none;
		width: auto;
		bottom: 24px !important;
		z-index: 1;
	}
	.bn-tile__bottle {
		width: min(248px, 60%);
		height: auto;
		aspect-ratio: 248 / 473;
	}

	/* Shop */
	.bn-tabs { width: auto; margin-right: 0; align-self: center; overflow: visible; }
	.bn-search { width: min(560px, 100%); margin: 0 auto; }
	.bn-grid { grid-template-columns: repeat(auto-fit, 240px); column-gap: 24px; row-gap: 24px; justify-content: center; }
	.bn-site .bn-card { min-height: 420px; padding-top: 32px; }
	.bn-card__img { width: 170px; height: 300px; }
	.bn-card__meta { margin: 8px 16px 0; }
	.bn-rlist { display: grid; grid-template-columns: repeat(auto-fit, 351px); justify-content: center; gap: 56px 24px; }

	/* Recipe sheet becomes a centred dialog */
	.bn-sheet__panel:not(.bn-sheet__panel--page) {
		top: 50%; bottom: auto;
		transform: translate(-50%, -50%);
		width: min(480px, calc(100% - 48px));
		max-height: 85vh;
		border-radius: 16px;
	}

	/* Product: image left, details right */
	.bn-pdp {
		--bn-col: 960px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 64px;
		row-gap: 24px;
		align-items: start;
		padding-top: 56px;
		padding-bottom: 72px;
	}
	.bn-pdp > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.bn-pdp > .bn-pdp__img { grid-column: 1; grid-row: 2 / span 2; width: 100%; height: auto; aspect-ratio: 219 / 403; max-height: 640px; position: sticky; top: calc(var(--bn-header-h) + 24px); }
	.bn-pdp > .bn-h1 { grid-column: 2; grid-row: 2; text-align: left; width: auto; margin: 0; font-size: 32px; }
	.bn-pdp > .bn-pdp__form { grid-column: 2; grid-row: 3; }
	.bn-buybar {
		position: static;
		transform: none;
		width: 100%;
		border-radius: 16px;
		background: var(--bn-ink);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.bn-buybar .bn-btn--dark { background: var(--bn-cream); color: var(--bn-ink); }

	/* Cart: items left, totals right */
	.bn-cart:not(.bn-cart--empty) {
		--bn-col: 960px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		column-gap: 48px;
		align-items: start;
		padding-top: 56px;
	}
	.bn-cart:not(.bn-cart--empty) > .bn-h1 { grid-column: 1 / -1; }
	.bn-cart__totals {
		position: sticky;
		top: calc(var(--bn-header-h) + 24px);
		padding: 24px;
		border-radius: 12px;
		background: var(--bn-card);
	}
	.bn-citem { height: auto; min-height: 236px; padding: 20px 24px; gap: 24px; justify-content: flex-start; }
	.bn-citem__info { width: auto; flex: 1; }

	/* Our story / community */
	.bn-prose { width: min(560px, calc(100% - 48px)); }
	.bn-feature { width: min(720px, calc(100% - 48px)); }
	.bn-community__body { width: min(560px, calc(100% - 48px)); }

	/* Footer: three columns */
	.bn-footer {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "logo lower" "blurb lower";
		column-gap: 64px;
		row-gap: 16px;
		padding: 48px max(24px, calc((100% - 1200px) / 2));
		align-items: start;
	}
	.bn-footer__logo { grid-area: logo; }
	.bn-footer__blurb { grid-area: blurb; max-width: 360px; }
	.bn-footer__lower { grid-area: lower; flex-direction: row; justify-content: flex-end; gap: 64px; }
	.bn-footer__social-title { text-align: left; }
}

@media (min-width: 1024px) {
	:root { --bn-col: 1100px; }
	.bn-header__nav { display: block; flex: 1; }
	.bn-nav { display: flex; justify-content: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
	.bn-nav li { margin: 0; }
	.bn-site .bn-nav a { color: var(--bn-cream); font-size: 14px; font-weight: 400; text-decoration: none; }
	.bn-site .bn-nav a:hover,
	.bn-site .bn-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; }
	.bn-menu-toggle { display: none !important; }

	.bn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
	.bn-tile--premixes,
	.bn-tile--recipes,
	.bn-tile--merch { height: 560px; }
}

/* ---------- Fixes after live check 2026-10-13 ---------- */
.bn-site #scroll-top { display: none !important; }
body.bn-site.bn-canvas:not(.bn-hero-page) #main { padding-top: var(--bn-header-h); }
body.bn-site .bn-prose p:not(:last-child),
body.bn-site .bn-pdp__desc p:not(:last-child) { margin-bottom: 18px; }
body.bn-site .bn-sheet__lists p { margin: 0 0 8px; }
body.bn-site .bn-sheet__lists ul { list-style: disc !important; margin: 0 0 8px !important; padding: 0 0 0 21px !important; }
body.bn-site .bn-sheet__lists ul + p { margin-top: 28px; }
body.bn-site .bn-sheet__lists li { display: list-item; list-style: inherit; }
.bn-site .woocommerce-notices-wrapper:empty { display: none; }
body.bn-site .bn-intro,
body.bn-site .bn-h1 { margin-left: auto; margin-right: auto; }
/* (Phase 3: header + drawer menus are hard-coded now, so OceanWP's injected <li>s no longer appear.) */

@media (min-width: 768px) {
	.bn-page { padding-top: 56px; }
	.bn-home > .bn-hero:first-child .bn-cover { object-position: 50% 62% !important; }
	/* Phone-only zoomed crops -> cover crops on wide screens */
	.bn-crop--fill img {
		left: 0 !important; top: 0 !important;
		width: 100% !important; height: 100% !important;
		object-fit: cover;
	}
	.bn-feature .bn-crop--fill img { object-position: 65% 40%; }
	.bn-hero--747 .bn-crop--fill img { object-position: 50% 35%; }
	.bn-buybar { position: sticky; bottom: 24px; z-index: 5; }
}

/* ===================================================================== */
/* Phase 3 — Figma update 2026-10-16 (prototype start 340:1644)          */
/* ===================================================================== */

.is-pending { opacity: 0.55; cursor: default; }
.bn-nowrap { white-space: nowrap; }
.bn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bn-site .bn-btn--outline-dark { background: transparent; color: var(--bn-ink); border-color: var(--bn-ink); }
.bn-site .bn-btn--h50 { height: 50px; }

/* ---------- Watermarks (4% flower marks) ---------- */
.bn-wm-wrap { position: relative; overflow: hidden; overflow: clip; } /* clip keeps position:sticky working (hidden breaks it) */
.bn-wm { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bn-wm img { position: absolute; width: 259px; height: 258px !important; max-width: none !important; opacity: 0.04; }
.bn-wm-wrap > :not(.bn-wm) { position: relative; z-index: 1; }

/* ---------- Menu drawer (335:1583) ---------- */
.bn-drawer { background: rgba(34, 21, 20, 0.4); }
.bn-drawer__panel {
	padding: 0;
	left: 0; right: auto;
	width: min(358px, calc(100% - 32px));
	background: var(--bn-cream);
	border-radius: 0 32px 32px 0; /* Figma: anchored left, right corners rounded */
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}
.bn-drawer__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 63.4px;
	padding: 12px 16px 12px 21px;
	background: rgba(34, 21, 20, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 0 0 16px 16px;
}
.bn-drawer__panel:focus { outline: none; }
body.bn-site .bn-drawer__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 32px; color: var(--bn-cream); }
.bn-site .bn-drawer__close {
	position: relative;
	top: auto; right: auto;
	width: 39.06px; height: 39.39px; min-height: 0;
	padding: 0;
	background: none; border: 0; outline: 0; box-shadow: none; cursor: pointer;
}
.bn-site .bn-drawer__close:focus-visible { outline: 2px solid var(--bn-cream); outline-offset: -4px; }
.bn-drawer__close span::before,
.bn-drawer__close span::after {
	content: "";
	position: absolute;
	left: 10.5px; top: 18.2px;
	width: 18px; height: 3px;
	border-radius: 25px;
	background: var(--bn-cream);
	transform: rotate(45deg);
}
.bn-drawer__close span::after { transform: rotate(-45deg); }
.bn-drawer__body {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 46.6px 19px 32px 20px;
}
.bn-drawer__main,
.bn-drawer__secondary { list-style: none; margin: 0; padding: 0; }
.bn-drawer__main li {
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 0.5px solid #605651;
}
.bn-drawer__main li:last-child { margin-bottom: 0; }
body.bn-site .bn-drawer__main a,
body.bn-site .bn-drawer__main span { display: block; font-size: 20px; font-weight: 700; line-height: 26px; color: var(--bn-ink); text-decoration: none; opacity: 1; }
body.bn-site .bn-drawer__secondary { margin-top: 98px; display: flex; flex-direction: column; gap: 22px; }
.bn-drawer__secondary li { margin: 0; }
body.bn-site .bn-drawer__secondary a,
body.bn-site .bn-drawer__secondary span { display: block; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--bn-ink); text-decoration: none; opacity: 1; }
.bn-drawer__account { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 10px; }
body.bn-site .bn-drawer__account .bn-btn { min-height: 0; height: 40px; }
body.bn-site .bn-drawer__account .bn-btn + .bn-btn { height: 42px; }

/* ---------- Home (340:1644) ---------- */
.bn-home { gap: 0; }
.bn-home__cards { width: 100%; margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.bn-site .bn-pcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: min(359px, calc(100% - 31px));
	padding: 22px 15px;
	border-radius: 19.483px;
	background: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}
.bn-pcard__bottle { position: relative; overflow: hidden; display: block; width: 223.695px; height: 411.418px; }
.bn-pcard__cta { display: block; width: 100%; }
.bn-rtile {
	position: relative;
	overflow: hidden;
	width: min(359px, calc(100% - 31px));
	height: 535px;
	border-radius: 19.48px;
	background: var(--bn-ink);
}
.bn-rtile__cta { position: absolute; left: 15px; bottom: 22px; z-index: 1; }
.bn-hstory {
	width: 100%;
	min-height: 937px;
	padding-bottom: 64px;
	background: linear-gradient(to bottom, #fff, #f3f0d8);
}
.bn-hstory__img {
	position: relative;
	overflow: hidden;
	width: min(360px, calc(100% - 30px));
	height: 347px;
	margin: 0 auto;
	border-radius: 0 43px 43px 43px;
}
.bn-hstory__text {
	width: min(359px, calc(100% - 31px));
	margin: 20px auto 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: #231615;
}
body.bn-site .bn-hstory__title { font-size: 24px; font-weight: 700; color: #231615; }
.bn-hstory__copy { font-size: 15px; color: #231615; margin-bottom: 12px; }
body.bn-site .bn-hstory__copy p:not(:last-child) { margin-bottom: 18px; }

/* ---------- Footer (340:1685) ---------- */
.bn-footer {
	display: block;
	margin-top: 51px;
	padding: 21px 30px 48px 17px;
	background: #241615;
	border-radius: 0 20px 0 0;
	color: var(--bn-cream);
}
.bn-canvas .bn-footer { margin-top: 0; }
.bn-footer__logo { display: inline-flex; align-items: center; padding: 7.784px; }
.bn-footer__logo .bn-footer__mark { width: 41px; height: 41px; margin: 5px 3.5px; object-fit: contain; }
.bn-footer__cols { width: min(331px, 100%); margin: 2px 0 0 12px; display: flex; flex-direction: column; gap: 24px; }
body.bn-site .bn-fcol__title { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--bn-cream); }
.bn-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bn-fcol li { margin: 0; font-size: 15px; color: var(--bn-cream); }
.bn-fcol a,
.bn-fcol span { color: var(--bn-cream); text-decoration: none; }
.bn-fcol a:hover { text-decoration: underline; }
.bn-fcol--160 { width: 160px; }
.bn-fcol--139 { width: 139px; }
.bn-fcol--144 { width: 144px; }
.bn-fcol--143 { width: 143px; }
.bn-footer__row { display: flex; align-items: flex-start; }
.bn-footer__row--27 { gap: 27px; }
.bn-footer__row--45 { gap: 45px; }
.bn-footer__rule { margin: 0; height: 0; border: 0; border-top: 0.5px solid rgba(239, 237, 222, 0.6); background: none; }
.bn-footer__policies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; }
.bn-footer__policies li { margin: 0; font-size: 12px; }
.bn-footer__policies a,
.bn-footer__policies span { color: var(--bn-cream); text-decoration: underline; text-underline-position: from-font; }

/* ---------- Shop search (340:2260) ---------- */
.bn-search { position: relative; }
.bn-search__icon { position: absolute; left: 15px; top: 15px; pointer-events: none; }
.bn-site .bn-search input {
	padding-left: 39px;
	border: 0.5px solid rgba(34, 21, 20, 0.2);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
	color: var(--bn-ink);
}
.bn-site .bn-search input::placeholder { color: var(--bn-ink); }
.bn-rcard__img:not(.bn-crop) { overflow: hidden; border-radius: 12px; }
.bn-rcard__img:not(.bn-crop) img { object-fit: cover; border-radius: 12px; }

/* ---------- Product page tabs (322:4241 / 339:485) ---------- */
.bn-pdp__info,
.bn-pdp__desc { margin-top: -15px; }
.bn-pdp__info[hidden],
.bn-pdp__desc[hidden] { display: none; }
.bn-pdp__row { display: flex; gap: 24px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 0.5px solid rgba(34, 21, 20, 0.5); }
.bn-pdp__row:last-child { border-bottom: 0; margin-bottom: 0; }
.bn-pdp__label { flex: 0 0 73px; font-size: 15px; font-weight: 500; color: #000; }
.bn-pdp__value { flex: 1; font-size: 15px; font-weight: 300; color: #000; }
body.bn-site .bn-pdp__intro { margin-bottom: 16px; font-weight: 500; }

/* ---------- Our story (340:1797) ---------- */
body.bn-site .bn-prose__title { margin: 0 0 9px; font-size: 24px; font-weight: 700; color: var(--bn-ink); }
.bn-feature--full { width: 100%; border-radius: 0; }
.bn-feature--full .bn-cover { border-radius: 0; }

/* ---------- Community (322:4037 / 340:1906 / 340:2028) ---------- */
.bn-hero__content--16,
.bn-hero__content--16 .bn-hero__text { gap: 16px; }
.bn-community__body { gap: 40px; }
.bn-join { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--bn-ink); width: 100%; }
body.bn-site .bn-join__title { font-size: 24px; font-weight: 700; color: var(--bn-ink); }
.bn-join__copy { font-size: 15px; color: var(--bn-ink); }
body.bn-site .bn-join__copy p:not(:last-child) { margin-bottom: 18px; }
.bn-join__form { display: flex; width: 100%; height: 50px; margin: 0; border: 1px solid var(--bn-ink); border-radius: 10px; overflow: hidden; }
.bn-site .bn-join__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	color: var(--bn-ink);
}
.bn-site .bn-join__input::placeholder,
.bn-site .bn-field::placeholder { color: rgba(34, 21, 20, 0.5); opacity: 1; }
.bn-site .bn-join__btn { flex: 0 0 129px; height: 50px; margin: -1px -1px -1px 0; }
.bn-count-label { margin: 0; font-size: 15px; color: rgba(34, 21, 20, 0.5); }
.bn-articles { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; }
.bn-articles__list { display: flex; flex-direction: column; gap: 24px; }
.bn-article { position: relative; height: 535px; overflow: hidden; border-radius: 21px; background: var(--bn-ink); }
.bn-glass--article { bottom: -6px; min-height: 273px; }
body.bn-site .bn-article__title { font-size: 20px; font-weight: 500; color: #fff; }
.bn-events__none { margin-top: 24px; }
.bn-events { width: 100%; display: flex; flex-direction: column; gap: 36px; }
.bn-events[hidden] { display: none; }
.bn-event { width: 100%; background: #fff; padding-bottom: 40px; }
.bn-event__img { position: relative; height: 452px; overflow: hidden; background: var(--bn-ink); }
.bn-event__text { width: min(359px, calc(100% - 31px)); margin: 15px auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.bn-site .bn-event__title { font-size: 24px; font-weight: 700; color: #231615; }
.bn-event__copy { font-size: 15px; color: #231615; }
body.bn-site .bn-event__copy p:not(:last-child) { margin-bottom: 18px; }

/* ---------- Notices + forms ---------- */
.bn-notice { width: 100%; margin: 0; padding: 12px 14px; border-left: 3px solid var(--bn-accent); background: rgba(255, 255, 255, 0.6); font-size: 14px; color: var(--bn-ink); text-align: left; }
.bn-notice--error { border-left-color: #c0392b; }

/* ---------- Lets chat (340:2266) ---------- */
.bn-chat__page { padding-top: 63px; gap: 22px; }
.bn-form { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.bn-site .bn-field {
	width: 100%;
	height: 50px;
	padding: 14px 12px;
	border: 1px solid var(--bn-ink);
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	color: var(--bn-ink);
}
.bn-site .bn-field--area { height: 215px; resize: vertical; }
.bn-form__note { margin: 8px 0; font-size: 13px; color: rgba(34, 21, 20, 0.5); text-align: center; }
.bn-form .bn-btn { margin-top: 8px; }

/* ---------- Phase 3 desktop ---------- */
@media (min-width: 768px) {
	.bn-home__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: min(1200px, calc(100% - 48px)); margin: 24px auto 0; align-items: stretch; }
	.bn-pcard,
	.bn-rtile { width: 100%; height: 600px; }
	.bn-site .bn-pcard { width: 100%; justify-content: center; }
	.bn-rtile__cta { left: 24px; bottom: 24px; }
	.bn-hstory {
		grid-column: 1 / -1;
		min-height: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: center;
		padding: 48px;
		border-radius: 24px;
	}
	.bn-hstory__img { width: 100%; height: 480px; margin: 0; }
	.bn-hstory__text { width: 100%; margin: 0; }
	.bn-feature--full { width: min(720px, calc(100% - 48px)); border-radius: 21px; }
	.bn-feature--full .bn-cover { border-radius: 21px; }
	.bn-articles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
	.bn-events { width: min(1100px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
	.bn-event { border-radius: 16px; overflow: hidden; }
	.bn-event__text { width: calc(100% - 48px); }
	.bn-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 64px; padding: 48px max(24px, calc((100% - 1200px) / 2)); }
	.bn-footer__cols { width: auto; flex: 1; margin: 0; flex-direction: row; flex-wrap: wrap; gap: 32px 64px; }
	.bn-footer__rule { display: none; }
	.bn-footer__policies { flex-basis: 100%; grid-template-columns: repeat(3, max-content); gap: 24px; }
}
@media (min-width: 1024px) {
	.bn-header__nav .bn-nav a,
	.bn-header__nav .bn-nav span { color: var(--bn-cream); font-size: 14px; text-decoration: none; }
}

/* ---------- Checkout / My account / other OceanWP pages: no empty sidebar, Benito type + colours ---------- */
body.bn-site #right-sidebar,
body.bn-site #left-sidebar { display: none !important; }
body.bn-site.content-right-sidebar .content-area,
body.bn-site.content-left-sidebar .content-area { width: 100% !important; float: none; padding: 0 !important; border: 0 !important; }
body.bn-site:not(.bn-canvas) #content-wrap { width: 100%; max-width: 1100px; box-sizing: border-box; padding-left: 15px; padding-right: 15px; }
body.bn-site .woocommerce-form-login .button,
body.bn-site .woocommerce-form-register .button,
body.bn-site .woocommerce-ResetPassword .button,
body.bn-site .woocommerce-account .button { background: var(--bn-ink) !important; color: var(--bn-cream) !important; border-radius: var(--bn-radius); text-transform: none; letter-spacing: 0; font-size: 12px; }
body.bn-site .woocommerce form.login,
body.bn-site .woocommerce form.register { border-color: rgba(34, 21, 20, 0.15); border-radius: 12px; background: rgba(255, 255, 255, 0.5); }
body.bn-site .woocommerce form .input-text { border-radius: var(--bn-radius); border: 1px solid rgba(34, 21, 20, 0.25); background: #fff; }
body.bn-site .woocommerce h2,
body.bn-site .woocommerce h3,
body.bn-site .woocommerce-checkout h3,
body.bn-site #order_review_heading {
	text-transform: none;
	letter-spacing: 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--bn-ink);
}
body.bn-site.woocommerce-checkout .entry-content > h2:first-child { font-size: 24px; font-weight: 500; }
body.bn-site .woocommerce .amount,
body.bn-site .woocommerce-Price-amount { color: var(--bn-ink); }
body.bn-site .woocommerce table.shop_table { border-color: rgba(34, 21, 20, 0.15); background: rgba(255, 255, 255, 0.5); border-radius: 12px; }
body.bn-site .woocommerce table.shop_table th,
body.bn-site .woocommerce table.shop_table td { border-color: rgba(34, 21, 20, 0.1); font-size: 14px; color: var(--bn-ink); }
body.bn-site .woocommerce form .form-row label { font-size: 13px; color: var(--bn-ink); line-height: 1.4; }
body.bn-site .woocommerce-info,
body.bn-site .woocommerce-form-coupon-toggle .woocommerce-info { text-transform: none; letter-spacing: 0; }
body.bn-site .woocommerce-info a { color: var(--bn-accent); }
body.bn-site .woocommerce-checkout #payment { background: rgba(255, 255, 255, 0.5); border-radius: 12px; }
body.bn-site #place_order { width: 100%; height: 50px; font-size: 14px; }
body.bn-site .select2-container--default .select2-selection--single { border-radius: var(--bn-radius); border-color: rgba(34, 21, 20, 0.25); background: #fff; }

/* ===================================================================== */
/* Phase 4 — Figma update 2026-10-27: desktop frames (1440px) + new cart  */
/* Home 380:188, Shop 380:1713 / 380:2066, Product 389:422, Cart drawer   */
/* 411:926, Empty cart 411:660, Our story 411:448, Community 452:466 /     */
/* 452:708 / 452:846, Lets chat 452:1366; mobile Cart 405:547, Empty      */
/* cart 401:222, Chat sent 456:3174.                                       */
/* ===================================================================== */

:root { --bn-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }

.bn-desk,
.bn-header__login,
.bn-shade,
.bn-wm--desk,
.bn-minicart { display: none; }
.bn-join[hidden],
.bn-minicart[hidden] { display: none !important; }

/* ---------- Cart page + item cards (Cart_mobi 405:547, all widths) ---------- */
body.bn-site .bn-cart .bn-cart__title { font-family: var(--bn-sans); font-size: 24px; font-weight: 500; color: #000; }
.bn-cart:not(.bn-cart--empty) { gap: 24px; padding-bottom: 120px; }
.bn-cart__form { gap: 0; }
.bn-cart__items { gap: 8px; padding-top: 0; }
.bn-site .bn-citem {
	height: auto;
	min-height: 236px;
	padding: 20px 9px;
	gap: 0;
	justify-content: space-between;
	align-items: center;
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}
.bn-site .bn-citem__img { flex: 0 0 96px; height: 177px; }
.bn-site .bn-citem__info { width: auto; height: auto; flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bn-citem__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.bn-site .bn-citem__name { font-family: var(--bn-sans); font-size: 16px; font-weight: 600; color: #000; text-decoration: none; }
body.bn-site .bn-citem__price { font-family: var(--bn-sans); font-size: 20px; font-weight: 600; color: #000; white-space: nowrap; }
body.bn-site .bn-citem__blurb {
	font-family: var(--bn-sans);
	font-size: 14px;
	font-weight: 300;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bn-citem__foot { display: flex; align-items: center; justify-content: space-between; height: 24px; }
body.bn-site .bn-citem__qty { width: auto; font-family: var(--bn-sans); font-size: 15px; font-weight: 300; }
body.bn-site .bn-citem__qty label { font-family: var(--bn-sans); font-size: 15px; font-weight: 300; color: #000; margin: 0; }
body.bn-site .bn-citem__qty b { font-weight: 700; margin-left: 4px; }
body.bn-site .bn-citem__qty select { font-family: var(--bn-sans); font-weight: 700; padding: 0 24px 0 4px; }
.bn-citem__qty img { right: 6px; }
.bn-citem__remove { display: flex; line-height: 0; }
.bn-citem__remove:hover { opacity: 0.7; }

.bn-cartbar {
	position: fixed;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	z-index: 900;
	width: min(390px, 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: rgba(39, 39, 39, 0.7);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-radius: 16px 16px 0 0;
}
body.bn-site .bn-cartbar__total { font-family: var(--bn-sans); font-size: 24px; font-weight: 700; line-height: 48px; color: #fff; }
body.bn-site .bn-cartbar .bn-btn { font-family: var(--bn-sans); }

/* Empty cart (401:222 / 411:660) */
.bn-cart--empty { justify-content: center; min-height: calc(100vh - var(--bn-header-h) - 60px); padding-bottom: 60px; }
.bn-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
body.bn-site .bn-cart-empty__title { font-family: var(--bn-sans); font-size: 24px; font-weight: 500; color: #000; }
body.bn-site .bn-cart-empty__copy { font-family: var(--bn-sans); font-size: 16px; color: #000; width: 338px; max-width: 100%; }
body.bn-site .bn-cart-empty .bn-btn { margin-top: 16px; font-family: var(--bn-sans); }

/* ---------- Chat: sent state (456:3174) ---------- */
.bn-sent { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 120px; text-align: center; }
.bn-sent__mark { position: relative; display: block; width: 85px; height: 92px; margin-bottom: -24px; }
.bn-sent__mark img { width: 85px; height: 92px !important; object-fit: contain; }
.bn-sent__mark svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.bn-site .bn-sent__title { margin-top: 24px; font-size: 24px; font-weight: 700; color: var(--bn-ink); }
body.bn-site .bn-sent__copy { margin-top: -8px; font-size: 15px; color: var(--bn-ink); }

/* ---------- Desktop (Figma 1440 frames; fluid from 768, full menu bar from 1024) ---------- */
@media (min-width: 768px) {
	:root { --bn-gutter: clamp(24px, 5.56vw, 80px); }
	.bn-desk { display: inline; }

	/* Type: desktop frames set most UI in Manrope; tabs, footer, fields and cards keep Roboto Mono */
	body.bn-site .bn-btn,
	body.bn-site .bn-tab,
	body.bn-site .bn-h1,
	body.bn-site .bn-intro,
	body.bn-site .bn-intro b,
	body.bn-site .bn-hero__title,
	body.bn-site .bn-hero__sub,
	body.bn-site .bn-card__name,
	body.bn-site .bn-card__price,
	body.bn-site .bn-hstory__title,
	body.bn-site .bn-hstory__copy,
	body.bn-site .bn-hstory__copy p,
	body.bn-site .bn-prose,
	body.bn-site .bn-prose p,
	body.bn-site .bn-prose__title,
	body.bn-site .bn-feature .bn-glass__title,
	body.bn-site .bn-feature .bn-glass__text,
	body.bn-site .bn-feature .bn-glass__text p,
	body.bn-site .bn-join__title,
	body.bn-site .bn-join__copy,
	body.bn-site .bn-join__copy p,
	body.bn-site .bn-pdp__label,
	body.bn-site .bn-pdp__value,
	body.bn-site .bn-pdp__desc,
	body.bn-site .bn-pdp__desc p,
	body.bn-site .bn-minicart__title { font-family: var(--bn-sans); }


	/* Heroes: centred copy over the blurred dark ellipse (Figma "Ellipse 241") */
	.bn-hero,
	.bn-hero--747 { height: clamp(640px, 63.2vw, 915px); }
	.bn-hero::after { display: none; }
	.bn-shade {
		display: block;
		position: absolute;
		left: -15.9%; top: 24.3%;
		width: 122.64%; height: 116.5%;
		border-radius: 50%;
		background: rgba(34, 21, 20, 0.75);
		filter: blur(30.6px);
		pointer-events: none;
	}
	.bn-home .bn-hero .bn-shade { background: rgba(34, 21, 20, 0.53); }
	.bn-site .bn-hero__content {
		left: 50%;
		transform: translateX(-50%);
		width: min(761px, calc(100% - 48px));
		bottom: 34px !important;
		align-items: center;
		text-align: center;
		gap: 12px;
		z-index: 1;
	}
	.bn-home .bn-hero__content { bottom: 48px !important; }
	.bn-hero__text,
	.bn-hero__content--16 .bn-hero__text { gap: 8px; align-items: center; }
	body.bn-site .bn-hero__title { font-size: 24px; font-weight: 700; }
	body.bn-site .bn-hero__sub { font-size: 15px; font-weight: 400; }
	.bn-home > .bn-hero:first-of-type .bn-cover,
	.bn-story > .bn-hero .bn-cover { object-position: 50% 50% !important; }
	.bn-hero--747 .bn-crop--fill img { object-position: 50% 40%; }

	/* Card buttons (204 x 51, r10, 15px) */
	body.bn-site .bn-pcard__cta .bn-btn,
	body.bn-site .bn-rtile__cta .bn-btn,
	body.bn-site .bn-hstory .bn-btn,
	body.bn-site .bn-feature .bn-glass__actions .bn-btn { width: 204px; height: 51px; padding: 15px; border-radius: 10px; font-size: 15px; }
	body.bn-site .bn-feature .bn-glass__actions .bn-btn--outline { width: 149px; height: 54px; border-width: 1.26px; }

	/* Watermarks placed for the desktop frame */
	.bn-wm--desk { display: block; }

	/* ---------- Home (380:188) ---------- */
	.bn-home { padding-bottom: 101px; }
	.bn-home__cards {
		display: grid;
		grid-template-columns: minmax(0, 632fr) minmax(0, 572fr);
		column-gap: clamp(24px, 3.82vw, 55px);
		row-gap: 69px;
		width: min(1259px, calc(100% - 2 * var(--bn-gutter)));
		margin: 67px auto 0;
		align-items: stretch;
	}
	.bn-site .bn-pcard,
	.bn-rtile { position: relative; width: 100%; height: 484px; border-radius: 24.5px; }
	.bn-site .bn-pcard {
		display: block;
		padding: 28px 19px;
		background: rgba(255, 255, 255, 0.5);
		-webkit-backdrop-filter: blur(100px);
		backdrop-filter: blur(100px);
	}
	.bn-pcard__bottle { width: 178px; height: 327px; margin: 0 auto; }
	.bn-pcard__cta { position: absolute; left: 19px; bottom: 28px; width: auto; }
	.bn-rtile .bn-cover { object-position: 50% 50% !important; }
	.bn-rtile .bn-shade {
		left: -38.1%; top: 10.1%;
		width: 188.3%; height: 199.4%;
		background: rgba(34, 21, 20, 0.37);
		filter: blur(38.5px);
	}
	.bn-rtile__cta { left: 29px; bottom: 40px; z-index: 1; }

	.bn-site .bn-hstory {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(100% - 2 * clamp(0px, 1.18vw, 17px));
		min-height: 582px;
		display: grid;
		grid-template-columns: minmax(0, 604fr) minmax(0, 540fr);
		column-gap: clamp(24px, 3.4vw, 49px);
		align-items: start;
		padding: 0 clamp(16px, 2.15vw, 31px) 0 0;
		border-radius: 0 0 0 72px;
		background: linear-gradient(to bottom, #fff, #f3f0d8);
	}
	.bn-hstory__img { width: 100%; height: 582px; margin: 0; border-radius: 0 72px 72px 72px; }
	.bn-hstory__img .bn-cover { object-position: 55% 50% !important; }
	.bn-hstory__text { width: 100%; margin: 0; padding: 31px 0; gap: 16px; }
	body.bn-site .bn-hstory__title { font-size: 32px; font-weight: 700; }
	body.bn-site .bn-hstory__copy,
	body.bn-site .bn-hstory__copy p { font-size: 20px; margin: 0; color: #231615; }
	body.bn-site .bn-hstory__copy p:not(:last-child) { margin-bottom: 27px; }

	/* ---------- Footer (380:188 "Frame 1000006657") ---------- */
	.bn-site .bn-footer {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: clamp(32px, 6.1vw, 88px);
		margin-top: 0;
		padding: 62px var(--bn-gutter) 52px clamp(24px, 7.43vw, 107px);
		border-radius: 20px 20px 0 0;
	}
	.bn-footer__logo { flex: none; }
	.bn-footer__logo .bn-footer__mark { width: 48px; height: 52px; margin: 0; }
	.bn-site .bn-footer__cols {
		flex: 0 1 auto;
		width: auto;
		margin: 3px 0 0;
		display: grid;
		grid-template-columns: repeat(5, auto);
		column-gap: 24px;
		row-gap: 46px;
	}
	.bn-footer__row { display: contents; }
	.bn-footer__rule { display: none; }
	.bn-fcol--160,
	.bn-fcol--139,
	.bn-fcol--144,
	.bn-fcol--143 { width: auto; }
	.bn-fcol--143 li { max-width: 143px; }
	.bn-site .bn-footer__policies { grid-column: 1 / -1; display: flex; gap: 22px; }

	/* ---------- Shop (380:1713 / 380:2066) ---------- */
	.bn-site .bn-shop {
		--bn-col: 1281px;
		width: min(1281px, calc(100% - 2 * var(--bn-gutter)));
		padding-top: 72px;
		padding-bottom: 99px;
		gap: 32px;
	}
	body.bn-site .bn-shop .bn-h1 { font-size: 24px; font-weight: 800; }
	.bn-shop__top { width: min(521px, 100%); margin: 0 auto; }
	.bn-tabs { gap: 16px; justify-content: center; }
	.bn-site .bn-tab { height: 42px; }
	.bn-search { width: 100%; }
	.bn-panel--premixes { margin-top: 39px; }
	.bn-panel--premixes > .bn-intro,
	.bn-shop .bn-count { display: none; }
	.bn-site .bn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 35px; justify-content: stretch; }
	.bn-site .bn-card { height: 371px; min-height: 0; padding: 14px 0 0; -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); }
	.bn-site .bn-card__img { width: 156px; height: 286px; }
	.bn-site .bn-card__meta { margin: 0 23px; }
	body.bn-site .bn-card__name { font-size: 15px; font-weight: 500; }
	body.bn-site .bn-card__price { font-size: 20px; font-weight: 700; }

	.bn-site .bn-panel--recipes { margin-top: 0; gap: 62px; }
	.bn-panel--recipes > .bn-intro { width: min(521px, 100%); font-weight: 300; }
	.bn-panel--recipes > .bn-subtabs { width: min(1093px, 100%); margin: 0 auto; }
	.bn-site .bn-rlist { margin-top: -27px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 24px; }
	.bn-site .bn-rcard { width: 100%; height: 371px; border-radius: 12px; -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); }
	.bn-site .bn-rcard__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.bn-site .bn-rcard__img { left: 10px; right: 10px; top: 19px; width: auto; height: 332px; max-width: none; transform: none; border-radius: 12px; }
	.bn-site .bn-rcard__btn { height: 40px; }

	/* ---------- Product (389:422) ---------- */
	.bn-site .bn-pdp {
		--bn-col: 1223px;
		width: min(1223px, calc(100% - 2 * var(--bn-gutter)));
		grid-template-columns: minmax(0, 527fr) minmax(0, 648fr);
		column-gap: 48px;
		row-gap: 0;
		padding-top: 73px;
		padding-bottom: 75px;
	}
	.bn-site .bn-pdp > .bn-pdp__img { width: min(396px, 100%); height: auto; max-height: none; aspect-ratio: 396 / 729; top: calc(var(--bn-header-h) + 24px); }
	body.bn-site .bn-pdp > .bn-h1 { width: 100%; margin: 1px 0 66px; text-align: center; font-size: clamp(36px, 3.33vw, 48px); font-weight: 500; line-height: 64px; color: var(--bn-ink); }
	.bn-site .bn-pdp__form { align-items: center; gap: 24px; }
	.bn-pdp__form > .bn-qty,
	.bn-pdp__form > .bn-rule { display: none; }
	.bn-pdp__form > .bn-subtabs,
	.bn-pdp__info,
	.bn-pdp__desc,
	.bn-pdp__form > .bn-pdp__h { width: min(360px, 100%); }
	.bn-site .bn-pdp__info,
	.bn-site .bn-pdp__desc { margin-top: 0; }
	.bn-pdp__row { border-bottom-color: rgba(34, 21, 20, 0.15); }
	body.bn-site .bn-pdp__label { font-weight: 700; }
	body.bn-site .bn-pdp__value,
	body.bn-site .bn-pdp__desc,
	body.bn-site .bn-pdp__desc p { font-weight: 300; }
	body.bn-site .bn-pdp__desc .bn-pdp__intro { font-weight: 700; }
	.bn-site .bn-buybar {
		width: min(390px, 100%);
		background: rgba(39, 39, 39, 0.7);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border-radius: 16px 16px 0 0;
	}
	.bn-site .bn-buybar .bn-btn--dark { background: var(--bn-ink); color: var(--bn-cream); }

	/* ---------- Cart drawer (411:926) ---------- */
	.bn-minicart { display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(34, 21, 20, 0.3); }
	.bn-minicart__panel {
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: min(390px, 100%);
		display: flex;
		flex-direction: column;
		background: var(--bn-cream);
		border-radius: 10px 0 0 0;
		outline: none;
		overflow: hidden;
	}
	.bn-minicart__head { position: relative; flex: none; padding: 31px 15px 0; }
	body.bn-site .bn-minicart__title { margin: 0; text-align: center; font-size: 24px; font-weight: 500; line-height: 33px; color: var(--bn-ink); }
	.bn-site .bn-minicart__close {
		position: absolute; top: 31px; right: 15px;
		width: 33px; height: 33px; padding: 5px; min-height: 0;
		background: none; border: 0; box-shadow: none; cursor: pointer; line-height: 0;
	}
	.bn-minicart__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.bn-minicart__form { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 24px 15px; }
	.bn-minicart__items { display: flex; flex-direction: column; gap: 8px; }
	.bn-minicart .bn-cartbar { position: static; transform: none; width: 100%; flex: none; }
	.bn-cart-empty--drawer { flex: 1; justify-content: center; padding: 24px 15px 80px; }
	body.bn-minicart-open { overflow: hidden; }

	/* ---------- Our story (411:448) ---------- */
	.bn-story { gap: 52px; padding-bottom: 187px; }
	.bn-site .bn-prose { width: min(680px, calc(100% - 48px)); font-size: 20px; font-weight: 400; color: #231615; }
	body.bn-site .bn-prose p { color: #231615; }
	body.bn-site .bn-prose p:not(:last-child) { margin-bottom: 27px; }
	body.bn-site .bn-prose__title { margin: 0 0 16px; font-size: 32px; font-weight: 700; color: #231615; }
	.bn-site .bn-feature,
	.bn-site .bn-feature--full { width: min(1284px, calc(100% - 2 * var(--bn-gutter))); height: 350px; border-radius: 16px; }
	.bn-site .bn-feature .bn-cover { border-radius: 16px; object-position: 50% 60% !important; }
	.bn-feature::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); pointer-events: none; }
	.bn-site .bn-feature .bn-crop--fill img { object-position: 50% 30%; }
	.bn-site .bn-feature .bn-glass {
		top: 0; bottom: 0; left: 0; right: auto;
		z-index: 1;
		width: 50%;
		justify-content: flex-start;
		gap: 24px;
		padding: 55px 24px 24px;
		background: rgba(16, 16, 16, 0.55);
		-webkit-backdrop-filter: blur(25px);
		backdrop-filter: blur(25px);
		border: 0;
		border-radius: 16px 0 0 16px;
	}
	.bn-site .bn-feature--right .bn-glass { left: auto; right: 0; border-radius: 0 16px 16px 0; }
	.bn-feature .bn-glass__text { gap: 8px; font-size: 16px; line-height: 24px; color: #e0e0e0; font-weight: 400; }
	body.bn-site .bn-feature .bn-glass__text p { color: #e0e0e0; }
	body.bn-site .bn-feature .bn-glass__title { font-size: 28px; font-weight: 700; line-height: 36px; color: #fff; }
	.bn-feature .bn-glass__actions { gap: 10px; align-items: center; }

	/* ---------- Our community (452:466 / 452:708 / 452:846) ---------- */
	.bn-community { gap: 81px; padding-bottom: 68px; }
	.bn-site .bn-community__body { width: min(1284px, calc(100% - 2 * var(--bn-gutter))); gap: 96px; }
	.bn-community__body > .bn-subtabs { width: min(1093px, 100%); margin: 0 auto; }
	.bn-join { gap: 24px; }
	body.bn-site .bn-join__title { font-size: 32px; font-weight: 700; color: #231615; }
	body.bn-site .bn-join__title br { display: none; }
	body.bn-site .bn-join__copy,
	body.bn-site .bn-join__copy p { width: min(680px, 100%); margin-left: auto; margin-right: auto; font-size: 20px; color: #231615; }
	.bn-join__form { width: min(420px, 100%); }
	.bn-articles { margin-top: 52px; gap: 32px; }
	body.bn-site .bn-articles .bn-count-label,
	body.bn-site #bn-events > .bn-count-label:not(.bn-center) { font-size: 20px; text-align: left; }
	.bn-site .bn-articles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; }
	.bn-site .bn-article { height: 611px; border-radius: 24px; }
	.bn-site .bn-glass--article { bottom: 0; min-height: 305px; padding: 27px 18px; gap: 27px; border-radius: 18px 18px 0 0; -webkit-backdrop-filter: blur(28.5px); backdrop-filter: blur(28.5px); }
	.bn-glass--article .bn-glass__text { gap: 9px; font-size: 18.24px; font-weight: 300; color: #f8f8f8; }
	body.bn-site .bn-article__title { font-size: 22.8px; font-weight: 500; }
	body.bn-site .bn-glass--article .bn-btn--outline { height: 49px; padding: 13.7px; font-size: 13.7px; border-radius: 9px; }
	body.bn-site .bn-events__none { margin-top: 24px; font-size: 16px; }
	body.bn-site .bn-events__hint { width: min(680px, 100%); margin: 12px auto 0; font-size: 15px; }
	.bn-site .bn-events { width: min(1284px, calc(100% - 2 * var(--bn-gutter))); margin: -64px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 406px)); gap: 25px; justify-content: start; }
	.bn-site .bn-event { padding-bottom: 24px; border-radius: 0; }
	.bn-event__img { height: 477px; }
	.bn-site .bn-event__text { width: auto; margin: 15px 17px 0; }
	body.bn-site .bn-event__title { font-size: 25.3px; }
	body.bn-site .bn-event__copy { font-size: 15.8px; }
	body.bn-site .bn-event .bn-btn { width: 171px; height: 42px; margin-top: 8px; }

	/* ---------- Chat (452:1366) ---------- */
	.bn-site .bn-chat__page { --bn-col: 738px; padding-top: 92px; padding-bottom: 86px; gap: 40px; }
	body.bn-site .bn-chat .bn-join__copy p:not(:last-child) { margin-bottom: 27px; }
	.bn-form { gap: 16px; }
	.bn-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	.bn-site .bn-field--area { height: 186px; }
	.bn-form__note { margin: 24px 0 0; }
	body.bn-site .bn-form .bn-btn { width: min(361px, 100%); margin: 24px auto 0; }
	.bn-sent { width: min(361px, 100%); margin: 0 auto; }
}

@media (min-width: 1024px) {
	:root { --bn-header-h: 84px; }
	/* Header ("Main navigation"): full-width bar, centred menu, Login button */
	.bn-header {
		height: 84px;
		padding: 16px var(--bn-gutter);
		background: rgba(33, 24, 23, 0.7);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border-radius: 0;
	}
	.bn-header__nav { flex: 1; min-width: 0; }
	.bn-nav { gap: clamp(14px, 2.22vw, 32px); }
	body.bn-site .bn-header__nav .bn-nav a,
	body.bn-site .bn-header__nav .bn-nav span {
		font-family: var(--bn-sans);
		font-size: clamp(15px, 1.39vw, 20px);
		font-weight: 500;
		line-height: 28px;
		color: #f8f8f8;
		white-space: nowrap;
	}
	.bn-header__actions,
	.bn-hero-page .bn-header__actions { gap: 0; }
	body.bn-site .bn-header__login { display: inline-flex; margin-left: 24px; height: 40px; padding: 12px 26px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
	.bn-site .bn-footer { flex-wrap: wrap; }
}
@media (min-width: 1280px) {
	.bn-site .bn-footer__cols { grid-template-columns: 160px 160px 139px 188px 143px; column-gap: 16px; }
}
@media (max-width: 767px) {
	.bn-form__pair { display: contents; }
}
/* Cart page from tablet up: the mobile column, centred (desktop's cart design is the drawer) */
@media (min-width: 768px) {
	.bn-site .bn-cart:not(.bn-cart--empty) { --bn-col: 360px; display: flex; padding-top: 72px; }
}

/* ---------- Phase 4 fixes after live check 2026-10-27 ---------- */
/* Product shots are transparent cut-outs (2026-10-27): show the whole bottle */
.bn-site .bn-citem__img img { object-fit: contain; }
.bn-minicart__form.is-busy,
.bn-citem.is-busy { opacity: 0.5; pointer-events: none; }
body.admin-bar .bn-minicart__panel { top: 32px; }
.bn-site .bn-header__login { display: none; } /* .bn-site .bn-btn would show it on phones */

@media (min-width: 768px) {
	/* Figma "auto" line height = the font's normal metrics (OceanWP sets 1.8 on body) */
	body.bn-site .bn-hero__title,
	body.bn-site .bn-hero__sub,
	body.bn-site .bn-hstory__title,
	body.bn-site .bn-hstory__copy,
	body.bn-site .bn-hstory__copy p,
	body.bn-site .bn-prose,
	body.bn-site .bn-prose p,
	body.bn-site .bn-prose__title,
	body.bn-site .bn-join__title,
	body.bn-site .bn-join__copy,
	body.bn-site .bn-join__copy p,
	body.bn-site .bn-intro,
	body.bn-site .bn-card__name,
	body.bn-site .bn-card__price,
	body.bn-site .bn-pdp__label,
	body.bn-site .bn-pdp__value,
	body.bn-site .bn-pdp__desc,
	body.bn-site .bn-pdp__desc p,
	body.bn-site .bn-count-label,
	body.bn-site .bn-event__title,
	body.bn-site .bn-event__copy,
	body.bn-site .bn-event__copy p,
	body.bn-site .bn-article__title,
	body.bn-site .bn-glass--article .bn-glass__text p,
	body.bn-site .bn-fcol__title,
	body.bn-site .bn-fcol li,
	body.bn-site .bn-footer__policies li { line-height: normal; }

	.bn-site .bn-footer { flex-direction: row; }

	/* Page tops (beat "body.bn-site #main .bn-page { padding-top: 0 }") */
	body.bn-site #main .bn-shop { padding-top: 72px; }
	body.bn-site #main .bn-pdp { padding-top: 73px; }
	body.bn-site #main .bn-cart:not(.bn-cart--empty) { padding-top: 72px; }
	body.bn-site #main .bn-chat__page { padding-top: 92px; }


	/* Gather card: zoom so the laughing guest sits left of the text panel (Figma 411:448 "Component 12") */
	.bn-site .bn-feature--right .bn-crop--fill img {
		width: 130% !important;
		height: auto !important;
		left: -29.6% !important;
		top: 37% !important;
		transform: translateY(-34%);
		object-fit: fill;
	}

	/* Wide cards: a soft rise instead of the phone frame's spin-in */
	@media (prefers-reduced-motion: no-preference) {
		.bn-feature[data-bn-reveal] { transform: translateY(40px); }
		.bn-feature[data-bn-reveal].is-in { transform: none; }
	}
}

/* ---------- Navigation type, one family everywhere (2026-10-27 sense check) ----------
   Figma mixes Manrope (desktop bar) and Roboto Mono (drawer, footer, sub-tabs); all navigation now uses Manrope. */
body.bn-site .bn-header__nav .bn-nav a,
body.bn-site .bn-header__nav .bn-nav span,
body.bn-site .bn-drawer__title,
body.bn-site .bn-drawer__main a,
body.bn-site .bn-drawer__main span,
body.bn-site .bn-drawer__secondary a,
body.bn-site .bn-drawer__secondary span,
body.bn-site .bn-drawer__account .bn-btn,
body.bn-site .bn-fcol__title,
body.bn-site .bn-fcol li,
body.bn-site .bn-fcol a,
body.bn-site .bn-fcol span,
body.bn-site .bn-footer__policies li,
body.bn-site .bn-footer__policies a,
body.bn-site .bn-footer__policies span,
body.bn-site .bn-tab,
body.bn-site .bn-subtab { font-family: var(--bn-sans); }

/* ---------- Legal pages: Terms (1468), Shipping and returns (1469), Privacy (1470) ----------
   Client docs dated 22 Oct 2026. Not in Figma; long-form copy set in Manrope for readability. */
body.bn-site #main .bn-legal {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 16px 80px;
	color: #000;
}
body.bn-site .bn-legal h1,
body.bn-site .bn-legal h2,
body.bn-site .bn-legal p,
body.bn-site .bn-legal li,
body.bn-site .bn-legal a { font-family: var(--bn-sans); }
body.bn-site .bn-legal h1 { font-size: 28px; font-weight: 700; color: var(--bn-ink); margin: 0 0 4px; }
body.bn-site .bn-legal .bn-legal__date { font-size: 13px; color: var(--bn-ink-2); margin: 0 0 32px; }
body.bn-site .bn-legal h2 { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--bn-ink); margin: 32px 0 12px; }
body.bn-site .bn-legal p,
body.bn-site .bn-legal li { font-size: 15px; line-height: 1.65; }
body.bn-site .bn-legal p { margin: 0 0 14px; }
body.bn-site .bn-legal ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
body.bn-site .bn-legal li { margin: 0 0 4px; }
body.bn-site .bn-legal a { color: var(--bn-accent); text-decoration: underline; overflow-wrap: anywhere; }
@media (min-width: 768px) {
	body.bn-site #main .bn-legal { padding: 72px var(--bn-gutter, 24px) 120px; }
	body.bn-site .bn-legal h1 { font-size: 40px; }
	body.bn-site .bn-legal h2 { font-size: 18px; }
	body.bn-site .bn-legal p,
	body.bn-site .bn-legal li { font-size: 16px; }
}


/* ===================================================================== */
/* Client feedback round 2026-11-03                                      */
/* ===================================================================== */

/* ---------- Motion tokens ---------- */
:root {
	--bn-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
	--bn-home-gap: 24px;
}
@media (min-width: 768px) {
	:root { --bn-home-gap: clamp(20px, 2.5vw, 36px); }
}

/* ---------- Home: one gap everywhere (hero -> cards, card -> card) ---------- */
.bn-home__cards { margin-top: var(--bn-home-gap); gap: var(--bn-home-gap); }
@media (min-width: 768px) {
	.bn-home__cards { column-gap: var(--bn-home-gap); row-gap: var(--bn-home-gap); margin-top: var(--bn-home-gap); }
}

/* ---------- Menu drawer: slides in from the right (toward the left) ---------- */
.bn-drawer {
	opacity: 0;
	transition: opacity 0.35s ease;
}
.bn-drawer.is-open { opacity: 1; }
.bn-drawer__panel {
	left: auto; right: 0;
	border-radius: 32px 0 0 32px;
	transform: translateX(100%);
	transition: transform 0.45s var(--bn-ease);
	will-change: transform;
}
.bn-drawer.is-open .bn-drawer__panel { transform: none; }

/* ---------- Recipe sheet: gentle slide-up over a fading overlay; X slides it back down ---------- */
.bn-sheet__backdrop { opacity: 0; transition: opacity 0.4s ease; }
.bn-sheet.is-open .bn-sheet__backdrop { opacity: 1; }
.bn-sheet .bn-sheet__panel:not(.bn-sheet__panel--page) {
	transform: translate(-50%, 100%);
	transition: transform 0.5s var(--bn-ease);
	will-change: transform;
}
.bn-sheet.is-open .bn-sheet__panel:not(.bn-sheet__panel--page) { transform: translate(-50%, 0); }
@media (min-width: 768px) {
	.bn-sheet .bn-sheet__panel:not(.bn-sheet__panel--page) {
		transform: translate(-50%, calc(-50% + 56px));
		opacity: 0;
		transition: transform 0.5s var(--bn-ease), opacity 0.35s ease;
	}
	.bn-sheet.is-open .bn-sheet__panel:not(.bn-sheet__panel--page) { transform: translate(-50%, -50%); opacity: 1; }
}

/* ---------- Tab / toggle panes: short fade + rise when switched ---------- */
@keyframes bn-pane-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.bn-pane-anim { animation: bn-pane-in 0.4s var(--bn-ease) both; }
.bn-site .bn-tab,
.bn-site .bn-subtab { transition: background-color 0.25s ease, color 0.25s ease; }

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.bn-header { view-transition-name: bn-header; }
	::view-transition-old(root) { animation: 0.22s ease both bn-vt-out; }
	::view-transition-new(root) { animation: 0.38s var(--bn-ease) both bn-vt-in; }
	@keyframes bn-vt-out { to { opacity: 0; } }
	@keyframes bn-vt-in { from { opacity: 0; transform: translateY(10px); } }

	/* Browsers without cross-document view transitions: fade out on click, fade in on load */
	html.bn-no-vt #main,
	html.bn-no-vt .bn-footer { animation: bn-vt-in2 0.4s var(--bn-ease) both; }
	@keyframes bn-vt-in2 { from { opacity: 0; } to { opacity: 1; } }
	html.bn-no-vt body.bn-leaving #main,
	html.bn-no-vt body.bn-leaving .bn-footer { opacity: 0; transition: opacity 0.2s ease; animation: none; }
}

/* ---------- Our story / community: hero button always above the fold; slide-up reveal ---------- */
.bn-story > .bn-hero,
.bn-community > .bn-hero { height: min(844px, 100vh); height: min(844px, 100svh); }
.bn-story .bn-hero__content,
.bn-community .bn-hero__content { bottom: 96px !important; }
@media (min-width: 768px) {
	.bn-story > .bn-hero,
	.bn-community > .bn-hero { height: max(560px, min(clamp(640px, 63.2vw, 915px), 100vh)); height: max(560px, min(clamp(640px, 63.2vw, 915px), 100svh)); }
	.bn-site .bn-story .bn-hero__content,
	.bn-site .bn-community .bn-hero__content { bottom: 72px !important; }
}
@media (prefers-reduced-motion: no-preference) {
	html.bn-js .bn-prose[data-bn-reveal] > * {
		opacity: 0;
		transform: translateY(56px);
		transition: opacity 0.9s ease, transform 1s var(--bn-ease);
	}
	html.bn-js .bn-prose[data-bn-reveal] > *:nth-child(2) { transition-delay: 0.12s; }
	html.bn-js .bn-prose[data-bn-reveal] > *:nth-child(3) { transition-delay: 0.24s; }
	html.bn-js .bn-prose[data-bn-reveal].is-in > * { opacity: 1; transform: none; }
}

/* ---------- Events tab: breathing room under the intro copy ---------- */
body.bn-site .bn-events__none { margin-top: 40px; }

/* ---------- Product page: tabs always present ---------- */
.bn-pdp__empty { font-size: 15px; font-weight: 300; color: rgba(34, 21, 20, 0.6); }

/* ---------- Buy / checkout bars: full-bleed on phones, ink buttons ---------- */
@media (max-width: 767px) {
	.bn-buybar,
	.bn-cartbar {
		left: 0; right: 0;
		width: 100%;
		transform: none;
		border-radius: 0;
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	}
}
body.bn-site .bn-buybar .bn-btn--dark,
body.bn-site .bn-cartbar .bn-btn--dark {
	background: var(--bn-ink) !important;
	border-color: var(--bn-ink) !important;
	color: var(--bn-cream) !important;
}

/* ---------- Cart with items: the fixed Checkout bar replaces the footer ---------- */
body.woocommerce-cart:has(.bn-cart:not(.bn-cart--empty)) .bn-footer { display: none; }

/* ---------- Shop search: no-results note ---------- */
.bn-noresults { text-align: center; font-size: 14px; font-weight: 300; color: rgba(34, 21, 20, 0.6); }
.bn-noresults[hidden] { display: none; }

/* ---------- Checkout: street-address suggestions ---------- */
.bn-addr-wrap { position: relative; }
.bn-addr-list {
	position: absolute;
	z-index: 50;
	left: 0; right: 0; top: 100%;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(34, 21, 20, 0.2);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(34, 21, 20, 0.12);
	max-height: 280px;
	overflow-y: auto;
}
.bn-addr-list[hidden] { display: none; }
.bn-addr-list li {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--bn-ink);
	cursor: pointer;
}
.bn-addr-list li small { display: block; margin-top: 2px; font-size: 12px; color: rgba(34, 21, 20, 0.6); }
.bn-addr-list li:hover,
.bn-addr-list li.is-active { background: rgba(34, 21, 20, 0.07); }
.bn-addr-note { margin: 4px 0 0; font-size: 11px; color: rgba(34, 21, 20, 0.5); }

@media (prefers-reduced-motion: reduce) {
	.bn-drawer, .bn-drawer__panel, .bn-sheet__backdrop, .bn-sheet .bn-sheet__panel { transition: none !important; }
	.bn-pane-anim { animation: none; }
}

/* ===================================================================== */
/* Checkout — Figma "Continue as a guest" flow (453:1630 / 2778 / 2640)  */
/* ===================================================================== */

/* Page leftovers from the old classic checkout page */
body.woocommerce-checkout:has(.bn-co) .bn-footer,
body.woocommerce-checkout:has(.bn-co) .benito-continue-shopping,
body.woocommerce-checkout:has(.bn-co) .entry-content > h2:first-child,
body.woocommerce-checkout:has(.bn-co) #order_review_heading { display: none; }
.bn-co__hidden { display: none !important; }

.bn-co { width: min(390px, calc(100% - 30px)); margin: 0 auto; padding: 36px 0 72px; }
@media (min-width: 768px) { .bn-co { width: min(480px, calc(100% - 48px)); padding-top: 56px; } }

body.bn-site .bn-co__title { margin: 0 0 32px; text-align: center; font-family: var(--bn-sans); font-size: 24px; font-weight: 500; color: var(--bn-ink); }
body.bn-site .bn-co__h { margin: 0 0 12px; font-family: var(--bn-sans); font-size: 16px; font-weight: 500; color: var(--bn-ink); }
.bn-co__req { margin: 0 0 16px; font-size: 12px; color: var(--bn-ink); }
.bn-co__note { margin: -4px 0 16px; font-size: 14px; color: rgba(34, 21, 20, 0.6); }
.bn-co .bn-rule { margin: 28px 0 24px; }

/* Stepper: 1 Delivery / 2 Review / 3 Payment */
.bn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0 0 32px; padding: 0; }
.bn-steps__item { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-family: var(--bn-sans); color: rgba(34, 21, 20, 0.5); }
.bn-steps__num,
.bn-steps__label { font-size: 16px; font-weight: 500; line-height: 22px; }
.bn-steps__bar { order: 2; display: block; width: 100%; height: 7px; border-radius: 42px; background: rgba(34, 21, 20, 0.5); }
.bn-steps__label { order: 3; }
.bn-steps__item.is-current { color: var(--bn-ink); }
.bn-steps__item.is-current .bn-steps__bar { background: var(--bn-accent); }
.bn-steps__item.is-done { color: var(--bn-ink); }
.bn-steps__item.is-done .bn-steps__bar { background: var(--bn-ink); }

/* Fields: 50px, 10px radius, ink outline, placeholder as label */
.bn-co__panel[hidden] { display: none; }
.bn-co .form-row { margin: 0 0 16px; padding: 0; width: 100%; float: none; }
.bn-co .form-row .woocommerce-input-wrapper { display: block; }
.bn-co input[type=text],
.bn-co input[type=email],
.bn-co input[type=tel],
.bn-co input[type=search],
.bn-co select,
.bn-co .select2-container .select2-selection--single {
	width: 100%;
	height: 50px;
	padding: 0 12px;
	border: 1px solid var(--bn-ink);
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	font-family: var(--bn-font);
	font-size: 14px;
	color: var(--bn-ink);
}
.bn-co select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23221514' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.bn-co .select2-container .select2-selection--single { display: flex; align-items: center; }
.bn-co .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 48px; color: var(--bn-ink); }
.bn-co .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; right: 10px; }
.bn-co input::placeholder { color: rgba(34, 21, 20, 0.5); opacity: 1; }
.bn-co .form-row.woocommerce-invalid input,
.bn-co .form-row.woocommerce-invalid select,
.bn-co .form-row.woocommerce-invalid .select2-selection { border-color: #c0392b; }
.bn-co .form-row.woocommerce-invalid::after { content: "Please check this field"; display: block; margin-top: 4px; font-size: 12px; color: #c0392b; }

/* Address search (pill, white) */
.bn-addr-search { margin: 0 0 16px; }
.bn-addr-search__icon { position: absolute; left: 19px; top: 18px; pointer-events: none; }
.bn-co .bn-addr-search__input { padding-left: 42px; border-radius: 42px; background: #fff; }

/* "Same as street address" */
.bn-co__same { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; color: var(--bn-ink); cursor: pointer; }
.bn-co__same input { width: 18px; height: 18px; accent-color: var(--bn-ink); }
.bn-co__billing[hidden] { display: none; }

/* Delivery options */
.bn-ship-methods { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.bn-ship-opt { position: relative; display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 16px 16px 48px; border: 1px solid var(--bn-ink); border-radius: 10px; background: rgba(255, 255, 255, 0.5); cursor: pointer; font-family: var(--bn-sans); color: var(--bn-ink); }
.bn-ship-opt input { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--bn-ink); }
.bn-ship-opt:has(input:checked) { border-width: 2px; padding: 15px 15px 15px 47px; background: #fff; }
.bn-ship-opt__main { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; }
.bn-ship-opt__eta { font-size: 14px; font-weight: 500; }
.bn-ship-opt__desc { font-size: 13px; font-weight: 300; }
.bn-ship-none { font-size: 14px; color: #c0392b; }

/* Review */
.bn-review__items { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.bn-review__totals { margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--bn-sans); font-size: 15px; color: var(--bn-ink); }
.bn-review__totals > div { display: flex; justify-content: space-between; margin: 0; }
.bn-review__totals dt,
.bn-review__totals dd { margin: 0; font-weight: 400; }
.bn-review__total { padding-top: 12px; border-top: 0.5px solid var(--bn-ink); font-size: 20px; font-weight: 700; }
.bn-review__total dt,
.bn-review__total dd { font-weight: 700; }

/* Actions */
body.bn-site .bn-co .bn-co__next { width: 100%; height: 50px; margin-top: 8px; border-radius: 10px; font-size: 15px; }
.bn-co__back { display: block; margin: 16px auto 0; padding: 4px 8px; background: none; border: 0; font-size: 13px; color: var(--bn-ink); text-decoration: underline; cursor: pointer; }
.bn-co__err { margin: 0 0 12px; font-size: 13px; color: #c0392b; }
.bn-co__err[hidden] { display: none; }

/* Payment panel (WooCommerce markup) */
.bn-co #payment { background: rgba(255, 255, 255, 0.5); border-radius: 12px; }
.bn-co #payment ul.payment_methods { border: 0; padding: 12px 16px 0; margin: 0; }
.bn-co #payment .payment_box { background: transparent; color: var(--bn-ink); font-size: 13px; }
.bn-co #payment div.form-row { padding: 12px 16px 16px; margin: 0; }
.bn-co .woocommerce-privacy-policy-text,
.bn-co .woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: var(--bn-ink); }
.bn-co .woocommerce-notices-wrapper:empty { display: none; }

/* Checkout page: the old page content sits in .entry (not .entry-content) */
body.woocommerce-checkout:has(.bn-co) .entry > h2.wp-block-heading:first-child,
body.woocommerce-checkout:has(.bn-co) .entry > .benito-continue-shopping { display: none; }
.bn-co input.bn-addr-search__input[type=search] { padding-left: 42px; border-radius: 42px; background: #fff; }

/* ---------- Home hero (desktop): shadow follows the design — heavy at the bottom / lower-left behind the copy, soft along the top under the nav ---------- */
@media (min-width: 768px) {
	.bn-home > .bn-hero::after {
		display: block;
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			linear-gradient(to bottom, rgba(34, 21, 20, 0.4) 0, rgba(34, 21, 20, 0) 16%),
			linear-gradient(to right, rgba(34, 21, 20, 0.35) 0, rgba(34, 21, 20, 0) 60%) bottom / 100% 55% no-repeat,
			linear-gradient(to top, rgba(34, 21, 20, 0.82) 0, rgba(34, 21, 20, 0.5) 28%, rgba(34, 21, 20, 0) 60%);
	}
	.bn-home .bn-hero .bn-shade { background: rgba(34, 21, 20, 0.3); }
}

/* ===================================================================== */
/* Figma update 2026-11-03: buttons + home hero shadow                    */
/* ===================================================================== */

/* Desktop: hero CTAs ~297x40, card CTAs ~297x50, Our story glass buttons ~320x50 */
@media (min-width: 768px) {
	body.bn-site .bn-hero__content .bn-btn { width: 297px; height: 40px; padding: 0 12px; border-radius: 8px; }
	body.bn-site .bn-pcard__cta .bn-btn,
	body.bn-site .bn-rtile__cta .bn-btn,
	body.bn-site .bn-hstory .bn-btn { width: 297px; height: 50px; border-radius: 10px; }
	body.bn-site .bn-feature .bn-glass__actions .bn-btn--dark { width: 320px; height: 50px; }

	/* Home hero: the flower stays solid white; the shadow sits low, behind the copy */
	.bn-home .bn-hero .bn-shade { left: -10%; top: 66%; width: 120%; height: 70%; background: rgba(34, 21, 20, 0.45); filter: blur(40px); }
	.bn-home > .bn-hero::after {
		background:
			linear-gradient(to bottom, rgba(34, 21, 20, 0.25) 0, rgba(34, 21, 20, 0) 14%),
			linear-gradient(to top, rgba(34, 21, 20, 0.7) 0, rgba(34, 21, 20, 0.35) 24%, rgba(34, 21, 20, 0) 50%);
	}
}

/* Phones: CTAs run the full width of their container, Manrope label */
@media (max-width: 767px) {
	body.bn-site .bn-hero__content .bn-btn,
	body.bn-site .bn-pcard__cta .bn-btn,
	body.bn-site .bn-rtile__cta .bn-btn,
	body.bn-site .bn-hstory__text .bn-btn { width: 100%; font-family: var(--bn-sans); }
	.bn-rtile__cta { right: 15px; }
	body.bn-site .bn-home .bn-hero__title { font-family: var(--bn-sans); font-size: 20px; line-height: 1.3; }
	body.bn-site .bn-home .bn-hero__sub { font-family: var(--bn-sans); font-size: 14px; }
}

/* Fix: an older `.bn-hero::after { height: 60% }` made the home hero gradient stop short with a hard edge — span the full hero */
@media (min-width: 768px) {
	.bn-home > .bn-hero::after { top: 0; bottom: 0; height: auto; }
}
@media (max-width: 767px) {
	body.bn-site .bn-hero__content .bn-btn,
	body.bn-site .bn-pcard__cta .bn-btn,
	body.bn-site .bn-rtile__cta .bn-btn,
	body.bn-site .bn-hstory__text .bn-btn { height: 40px; padding: 0 12px; }
}

/* Our story cards: slide up on every screen size (the phone frame's spin-in felt like a flick) */
@media (prefers-reduced-motion: no-preference) {
	.bn-feature[data-bn-reveal] {
		transform: translateY(72px);
		opacity: 0;
		transition: transform 0.9s var(--bn-ease), opacity 0.7s ease;
	}
	.bn-feature[data-bn-reveal].is-in { transform: none; opacity: 1; }
}

/* Toggle transitions: outgoing pane fades and lifts, incoming pane fades and rises */
.bn-pane-out {
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}
.bn-pane-anim { animation: bn-pane-in 0.5s var(--bn-ease) both; }

/* Recipe cards (phone): long names wrap to two lines — keep them clear of the photo */
@media (max-width: 767px) {
	body.bn-site .bn-rcard__title { top: 24px; line-height: 1.25; z-index: 2; }
	.bn-rcard__img { top: 84px; height: 505px; }
}