@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");


:root {
	--cream: #fbf7ee;
	--paper: #f6eedf;
	--butter: #eadfbd;
	--sand: #ded0b6;
	--brown: #4a2412;
	--brown-2: #6a4128;
	--olive: #626443;
	--gold: #b8943c;
	--blush: #ead2ca;
	/* --line: rgba(74, 36, 18, .16); */
	--muted: rgba(74, 36, 18, .68);
	--serif: "Playfair Display", serif;
	--sans: "Trebuchet MS", Arial, sans-serif;

	/* new code */
	--brown-3: #5b260f;
	--sans-2: 'Source Sans Pro', sans-serif;

	/* new */
	--espresso: #3E2B23;
	--muted-stone: #918681;
	--walnut-husk: #6B5E59;
	--muted-taupe: #756d63;
	--cream-2: #FFF9F0;
	--cream-3: #f7f2e8;
	/* --maybe footer? */

	--bloom-button-ratio: 4/0.9;
	--info-page-font-size: clamp(13px, 1.2vw, 14px) !important;

	--p-header-bloom-bar-font-size: clamp(.9rem, 1.05vw, 1.1rem);
	--p-bloom-bar-font-size: clamp(13px, 1vw, 14px) !important;

	--h2-font-size: clamp(34px, 8vw, 46px);
	--h2-font-size-480: clamp(40px, 2.8vw, 45px);
	--h2-potluck-font-size: clamp(3.2rem, 4.1vw, 4.5rem);

	--cart-font-body: var(--sans);
}


.small-break {
	display: block;
	height: 12px;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

@-ms-viewport {
	width: device-width;
}

html {
	box-sizing: border-box;
}

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

body {
	background: #f5f7fa;
	font-family: var(--sans);
	font-weight: 100;
	color: var(--walnut-husk);
	line-height: 1.75em;
	font-size: 14pt;
}

p {
	font-family: var(--sans);
	font-weight: 100;
	color: var(--walnut-husk);
	line-height: 1.75em;
	font-size: 14pt;
}

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

input,
textarea,
select {
	font-family: var(--sans);
	font-weight: 100;
	color: #52575c;
	line-height: 1.75em;
	font-size: 15pt;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300;
	color: #52575c;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
}

h2 {
	font-size: 2em;
	line-height: 1.25em;
}

h3 {
	font-size: 1.5em;
	line-height: 1.5em;
}

a {
	-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	color: inherit;
	text-decoration: none;
	border-bottom: solid 0.8px #62676c;
}

a:hover {
	color: #f35858;
	border-bottom-color: rgba(255, 255, 255, 0);
}

strong,
b {
	font-weight: 400;
	color: var(--brown);
}

em,
i {
	font-style: italic;
}

sub {
	position: relative;
	top: 0.5em;
	font-size: 0.8em;
}

sup {
	position: relative;
	top: -0.5em;
	font-size: 0.8em;
}

hr {
	border: 0;
	border-top: solid 1px #c2c7cc;
}

blockquote {
	border-left: solid 0.5em #c2c7cc;
	padding: 1em 0 1em 2em;
	font-style: italic;
}

p,
ul,
ol,
dl,
table {
	margin-bottom: 1.5em;
}

br.clear {
	clear: both;
}

.features {
	margin-bottom: 1.5em;
}

.feature {
	text-align: center;
}

/* Sections/Article */

/* section,
article {
	margin-bottom: 3em;
} */

section> :last-child,
article> :last-child,
section:last-child,
article:last-child {
	margin-bottom: 0;
}

.row>section,
.row>article {
	margin-bottom: 0;
}

header>p {
	display: block;
	color: #f35858;
	padding: 0.75em 0 1em 0;
	font-size: 1.5em;
	line-height: 1.5em;
}

header.major {
	text-align: center;
}

/* Container */

.container {
	margin: 0 auto;
	max-width: 100%;
	width: 1200px;
}

@media screen and (max-width: 1280px) {

	.container {
		width: 960px;
	}

}

@media screen and (max-width: 1080px) {

	.container {
		width: 100%;
	}

}

@media screen and (max-width: 820px) {

	.container {
		width: 100%;
	}

}

@media screen and (max-width: 736px) {

	.container {
		width: 100%;
	}

}

@media screen and (max-width: 480px) {

	.container {
		width: 100%;
	}

}

/* Row */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
}

.row>* {
	box-sizing: border-box;
}

.row.gtr-uniform>*> :last-child {
	margin-bottom: 0;
}

.row.aln-left {
	justify-content: flex-start;
}

.row.aln-center {
	justify-content: center;
}

.row.aln-right {
	justify-content: flex-end;
}

.row.aln-top {
	align-items: flex-start;
}

.row.aln-middle {
	align-items: center;
}

.row.aln-bottom {
	align-items: flex-end;
}

.row>.imp {
	order: -1;
}

.row>.col-1 {
	width: 8.33333%;
}

.row>.off-1 {
	margin-left: 8.33333%;
}

.row>.col-2 {
	width: 16.66667%;
}

.row>.off-2 {
	margin-left: 16.66667%;
}

.row>.col-3 {
	width: 25%;
}

.row>.off-3 {
	margin-left: 25%;
}

.row>.col-4 {
	width: 33.33333%;
}

.row>.off-4 {
	margin-left: 33.33333%;
}

.row>.col-5 {
	width: 41.66667%;
}

.row>.off-5 {
	margin-left: 41.66667%;
}

.row>.col-6 {
	width: 50%;
}

.row>.off-6 {
	margin-left: 50%;
}

.row>.col-7 {
	width: 58.33333%;
}

.row>.off-7 {
	margin-left: 58.33333%;
}

.row>.col-8 {
	width: 66.66667%;
}

.row>.off-8 {
	margin-left: 66.66667%;
}

.row>.col-9 {
	width: 75%;
}

.row>.off-9 {
	margin-left: 75%;
}

.row>.col-10 {
	width: 83.33333%;
}

.row>.off-10 {
	margin-left: 83.33333%;
}

.row>.col-11 {
	width: 91.66667%;
}

.row>.off-11 {
	margin-left: 91.66667%;
}

.row>.col-12 {
	width: 100%;
}

.row>.off-12 {
	margin-left: 100%;
}

.row.gtr-0 {
	margin-top: 0px;
	margin-left: 0px;
}

.row.gtr-0>* {
	padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
	margin-top: 0px;
}

.row.gtr-0.gtr-uniform>* {
	padding-top: 0px;
}

.row.gtr-25 {
	margin-top: -12.5px;
	margin-left: -12.5px;
}

.row.gtr-25>* {
	padding: 12.5px 0 0 12.5px;
}

.row.gtr-25.gtr-uniform {
	margin-top: -12.5px;
}

.row.gtr-25.gtr-uniform>* {
	padding-top: 12.5px;
}

.row.gtr-50 {
	margin-top: -25px;
	margin-left: -25px;
}

.row.gtr-50>* {
	padding: 25px 0 0 25px;
}

.row.gtr-50.gtr-uniform {
	margin-top: -25px;
}

.row.gtr-50.gtr-uniform>* {
	padding-top: 25px;
}

.row {
	margin-top: -50px;
	margin-left: -50px;
}

.row>* {
	padding: 50px 0 0 50px;
}

.row.gtr-uniform {
	margin-top: -50px;
}

.row.gtr-uniform>* {
	padding-top: 50px;
}

.row.gtr-150 {
	margin-top: -75px;
	margin-left: -75px;
}

.row.gtr-150>* {
	padding: 75px 0 0 75px;
}

.row.gtr-150.gtr-uniform {
	margin-top: -75px;
}

.row.gtr-150.gtr-uniform>* {
	padding-top: 75px;
}

.row.gtr-200 {
	margin-top: -100px;
	margin-left: -100px;
}

.row.gtr-200>* {
	padding: 100px 0 0 100px;
}

.row.gtr-200.gtr-uniform {
	margin-top: -100px;
}

.row.gtr-200.gtr-uniform>* {
	padding-top: 100px;
}

@media screen and (max-width: 1280px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-normal {
		order: -1;
	}

	.row>.col-1-normal {
		width: 8.33333%;
	}

	.row>.off-1-normal {
		margin-left: 8.33333%;
	}

	.row>.col-2-normal {
		width: 16.66667%;
	}

	.row>.off-2-normal {
		margin-left: 16.66667%;
	}

	.row>.col-3-normal {
		width: 25%;
	}

	.row>.off-3-normal {
		margin-left: 25%;
	}

	.row>.col-4-normal {
		width: 33.33333%;
	}

	.row>.off-4-normal {
		margin-left: 33.33333%;
	}

	.row>.col-5-normal {
		width: 41.66667%;
	}

	.row>.off-5-normal {
		margin-left: 41.66667%;
	}

	.row>.col-6-normal {
		width: 50%;
	}

	.row>.off-6-normal {
		margin-left: 50%;
	}

	.row>.col-7-normal {
		width: 58.33333%;
	}

	.row>.off-7-normal {
		margin-left: 58.33333%;
	}

	.row>.col-8-normal {
		width: 66.66667%;
	}

	.row>.off-8-normal {
		margin-left: 66.66667%;
	}

	.row>.col-9-normal {
		width: 75%;
	}

	.row>.off-9-normal {
		margin-left: 75%;
	}

	.row>.col-10-normal {
		width: 83.33333%;
	}

	.row>.off-10-normal {
		margin-left: 83.33333%;
	}

	.row>.col-11-normal {
		width: 91.66667%;
	}

	.row>.off-11-normal {
		margin-left: 91.66667%;
	}

	.row>.col-12-normal {
		width: 100%;
	}

	.row>.off-12-normal {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-25>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 10px;
	}

	.row.gtr-50 {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row.gtr-50>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 20px;
	}

	.row {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-uniform>* {
		padding-top: 40px;
	}

	.row.gtr-150 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-150>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 60px;
	}

	.row.gtr-200 {
		margin-top: -80px;
		margin-left: -80px;
	}

	.row.gtr-200>* {
		padding: 80px 0 0 80px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -80px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 80px;
	}

}

@media screen and (max-width: 1080px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-narrow {
		order: -1;
	}

	.row>.col-1-narrow {
		width: 8.33333%;
	}

	.row>.off-1-narrow {
		margin-left: 8.33333%;
	}

	.row>.col-2-narrow {
		width: 16.66667%;
	}

	.row>.off-2-narrow {
		margin-left: 16.66667%;
	}

	.row>.col-3-narrow {
		width: 25%;
	}

	.row>.off-3-narrow {
		margin-left: 25%;
	}

	.row>.col-4-narrow {
		width: 33.33333%;
	}

	.row>.off-4-narrow {
		margin-left: 33.33333%;
	}

	.row>.col-5-narrow {
		width: 41.66667%;
	}

	.row>.off-5-narrow {
		margin-left: 41.66667%;
	}

	.row>.col-6-narrow {
		width: 50%;
	}

	.row>.off-6-narrow {
		margin-left: 50%;
	}

	.row>.col-7-narrow {
		width: 58.33333%;
	}

	.row>.off-7-narrow {
		margin-left: 58.33333%;
	}

	.row>.col-8-narrow {
		width: 66.66667%;
	}

	.row>.off-8-narrow {
		margin-left: 66.66667%;
	}

	.row>.col-9-narrow {
		width: 75%;
	}

	.row>.off-9-narrow {
		margin-left: 75%;
	}

	.row>.col-10-narrow {
		width: 83.33333%;
	}

	.row>.off-10-narrow {
		margin-left: 83.33333%;
	}

	.row>.col-11-narrow {
		width: 91.66667%;
	}

	.row>.off-11-narrow {
		margin-left: 91.66667%;
	}

	.row>.col-12-narrow {
		width: 100%;
	}

	.row>.off-12-narrow {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-25>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 10px;
	}

	.row.gtr-50 {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row.gtr-50>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 20px;
	}

	.row {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-uniform>* {
		padding-top: 40px;
	}

	.row.gtr-150 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-150>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 60px;
	}

	.row.gtr-200 {
		margin-top: -80px;
		margin-left: -80px;
	}

	.row.gtr-200>* {
		padding: 80px 0 0 80px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -80px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 80px;
	}

}

@media screen and (max-width: 820px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-narrower {
		order: -1;
	}

	.row>.col-1-narrower {
		width: 8.33333%;
	}

	.row>.off-1-narrower {
		margin-left: 8.33333%;
	}

	.row>.col-2-narrower {
		width: 16.66667%;
	}

	.row>.off-2-narrower {
		margin-left: 16.66667%;
	}

	.row>.col-3-narrower {
		width: 25%;
	}

	.row>.off-3-narrower {
		margin-left: 25%;
	}

	.row>.col-4-narrower {
		width: 33.33333%;
	}

	.row>.off-4-narrower {
		margin-left: 33.33333%;
	}

	.row>.col-5-narrower {
		width: 41.66667%;
	}

	.row>.off-5-narrower {
		margin-left: 41.66667%;
	}

	.row>.col-6-narrower {
		width: 50%;
	}

	.row>.off-6-narrower {
		margin-left: 50%;
	}

	.row>.col-7-narrower {
		width: 58.33333%;
	}

	.row>.off-7-narrower {
		margin-left: 58.33333%;
	}

	.row>.col-8-narrower {
		width: 66.66667%;
	}

	.row>.off-8-narrower {
		margin-left: 66.66667%;
	}

	.row>.col-9-narrower {
		width: 75%;
	}

	.row>.off-9-narrower {
		margin-left: 75%;
	}

	.row>.col-10-narrower {
		width: 83.33333%;
	}

	.row>.off-10-narrower {
		margin-left: 83.33333%;
	}

	.row>.col-11-narrower {
		width: 91.66667%;
	}

	.row>.off-11-narrower {
		margin-left: 91.66667%;
	}

	.row>.col-12-narrower {
		width: 100%;
	}

	.row>.off-12-narrower {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -7.5px;
		margin-left: -7.5px;
	}

	.row.gtr-25>* {
		padding: 7.5px 0 0 7.5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -7.5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 7.5px;
	}

	.row.gtr-50 {
		margin-top: -15px;
		margin-left: -15px;
	}

	.row.gtr-50>* {
		padding: 15px 0 0 15px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -15px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 15px;
	}

	.row {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-150 {
		margin-top: -45px;
		margin-left: -45px;
	}

	.row.gtr-150>* {
		padding: 45px 0 0 45px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -45px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 45px;
	}

	.row.gtr-200 {
		margin-top: -60px;
		margin-left: -60px;
	}

	.row.gtr-200>* {
		padding: 60px 0 0 60px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -60px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 60px;
	}

}

@media screen and (max-width: 736px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-mobile {
		order: -1;
	}

	.row>.col-1-mobile {
		width: 8.33333%;
	}

	.row>.off-1-mobile {
		margin-left: 8.33333%;
	}

	.row>.col-2-mobile {
		width: 16.66667%;
	}

	.row>.off-2-mobile {
		margin-left: 16.66667%;
	}

	.row>.col-3-mobile {
		width: 25%;
	}

	.row>.off-3-mobile {
		margin-left: 25%;
	}

	.row>.col-4-mobile {
		width: 33.33333%;
	}

	.row>.off-4-mobile {
		margin-left: 33.33333%;
	}

	.row>.col-5-mobile {
		width: 41.66667%;
	}

	.row>.off-5-mobile {
		margin-left: 41.66667%;
	}

	.row>.col-6-mobile {
		width: 50%;
	}

	.row>.off-6-mobile {
		margin-left: 50%;
	}

	.row>.col-7-mobile {
		width: 58.33333%;
	}

	.row>.off-7-mobile {
		margin-left: 58.33333%;
	}

	.row>.col-8-mobile {
		width: 66.66667%;
	}

	.row>.off-8-mobile {
		margin-left: 66.66667%;
	}

	.row>.col-9-mobile {
		width: 75%;
	}

	.row>.off-9-mobile {
		margin-left: 75%;
	}

	.row>.col-10-mobile {
		width: 83.33333%;
	}

	.row>.off-10-mobile {
		margin-left: 83.33333%;
	}

	.row>.col-11-mobile {
		width: 91.66667%;
	}

	.row>.off-11-mobile {
		margin-left: 91.66667%;
	}

	.row>.col-12-mobile {
		width: 100%;
	}

	.row>.off-12-mobile {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -5px;
		margin-left: -5px;
	}

	.row.gtr-25>* {
		padding: 5px 0 0 5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 5px;
	}

	.row.gtr-50 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-50>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 10px;
	}

	.row {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-uniform>* {
		padding-top: 20px;
	}

	.row.gtr-150 {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row.gtr-150>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-200 {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row.gtr-200>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 40px;
	}

}

@media screen and (max-width: 480px) {

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

	.row>* {
		box-sizing: border-box;
	}

	.row.gtr-uniform>*> :last-child {
		margin-bottom: 0;
	}

	.row.aln-left {
		justify-content: flex-start;
	}

	.row.aln-center {
		justify-content: center;
	}

	.row.aln-right {
		justify-content: flex-end;
	}

	.row.aln-top {
		align-items: flex-start;
	}

	.row.aln-middle {
		align-items: center;
	}

	.row.aln-bottom {
		align-items: flex-end;
	}

	.row>.imp-mobilep {
		order: -1;
	}

	.row>.col-1-mobilep {
		width: 8.33333%;
	}

	.row>.off-1-mobilep {
		margin-left: 8.33333%;
	}

	.row>.col-2-mobilep {
		width: 16.66667%;
	}

	.row>.off-2-mobilep {
		margin-left: 16.66667%;
	}

	.row>.col-3-mobilep {
		width: 25%;
	}

	.row>.off-3-mobilep {
		margin-left: 25%;
	}

	.row>.col-4-mobilep {
		width: 33.33333%;
	}

	.row>.off-4-mobilep {
		margin-left: 33.33333%;
	}

	.row>.col-5-mobilep {
		width: 41.66667%;
	}

	.row>.off-5-mobilep {
		margin-left: 41.66667%;
	}

	.row>.col-6-mobilep {
		width: 50%;
	}

	.row>.off-6-mobilep {
		margin-left: 50%;
	}

	.row>.col-7-mobilep {
		width: 58.33333%;
	}

	.row>.off-7-mobilep {
		margin-left: 58.33333%;
	}

	.row>.col-8-mobilep {
		width: 66.66667%;
	}

	.row>.off-8-mobilep {
		margin-left: 66.66667%;
	}

	.row>.col-9-mobilep {
		width: 75%;
	}

	.row>.off-9-mobilep {
		margin-left: 75%;
	}

	.row>.col-10-mobilep {
		width: 83.33333%;
	}

	.row>.off-10-mobilep {
		margin-left: 83.33333%;
	}

	.row>.col-11-mobilep {
		width: 91.66667%;
	}

	.row>.off-11-mobilep {
		margin-left: 91.66667%;
	}

	.row>.col-12-mobilep {
		width: 100%;
	}

	.row>.off-12-mobilep {
		margin-left: 100%;
	}

	.row.gtr-0 {
		margin-top: 0px;
		margin-left: 0px;
	}

	.row.gtr-0>* {
		padding: 0px 0 0 0px;
	}

	.row.gtr-0.gtr-uniform {
		margin-top: 0px;
	}

	.row.gtr-0.gtr-uniform>* {
		padding-top: 0px;
	}

	.row.gtr-25 {
		margin-top: -5px;
		margin-left: -5px;
	}

	.row.gtr-25>* {
		padding: 5px 0 0 5px;
	}

	.row.gtr-25.gtr-uniform {
		margin-top: -5px;
	}

	.row.gtr-25.gtr-uniform>* {
		padding-top: 5px;
	}

	.row.gtr-50 {
		margin-top: -10px;
		margin-left: -10px;
	}

	.row.gtr-50>* {
		padding: 10px 0 0 10px;
	}

	.row.gtr-50.gtr-uniform {
		margin-top: -10px;
	}

	.row.gtr-50.gtr-uniform>* {
		padding-top: 10px;
	}

	.row {
		margin-top: -20px;
		margin-left: -20px;
	}

	.row>* {
		padding: 20px 0 0 20px;
	}

	.row.gtr-uniform {
		margin-top: -20px;
	}

	.row.gtr-uniform>* {
		padding-top: 20px;
	}

	.row.gtr-150 {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row.gtr-150>* {
		padding: 30px 0 0 30px;
	}

	.row.gtr-150.gtr-uniform {
		margin-top: -30px;
	}

	.row.gtr-150.gtr-uniform>* {
		padding-top: 30px;
	}

	.row.gtr-200 {
		margin-top: -40px;
		margin-left: -40px;
	}

	.row.gtr-200>* {
		padding: 40px 0 0 40px;
	}

	.row.gtr-200.gtr-uniform {
		margin-top: -40px;
	}

	.row.gtr-200.gtr-uniform>* {
		padding-top: 40px;
	}

}

/* Image */

.image {
	-moz-transition: opacity 0.25s ease-in-out;
	-webkit-transition: opacity 0.25s ease-in-out;
	-ms-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;
	display: inline-block;
	outline: 0;
	border: 0;
}

.image img {
	display: block;
	width: 100%;
}

.image.fit {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
	width: 100%;
	margin: 0 0 3em 0;
}

.image.left {
	float: left;
	margin: 0 2em 2em 0;
}

.image.centered {
	display: block;
	margin: 0 0 3em 0;
}

.image.centered img {
	margin: 0 auto;
	width: auto;
}

a.image:hover {
	opacity: 0.85;
}

/* List */

ul {
	list-style: disc;
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

ol {
	list-style: decimal;
	padding-left: 1.25em;
}

ol li {
	padding-left: 0.25em;
}

/* Actions */

ul.actions {
	padding-top: 1em;
	list-style: none;
	padding-left: 0;
}

ul.actions.major {
	text-align: center;
}

ul.actions li {
	display: inline-block;
	margin-left: 1em;
	padding-left: 0;
}

ul.actions li:first-child {
	margin-left: 0;
}

/* Divided */

ul.divided {
	list-style: none;
	padding-left: 0;
}

ul.divided li {
	border-top: solid 1px #d2d7dc;
	padding-top: 2em;
	margin-top: 2em;
	padding-left: 0;
}

ul.divided li:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

/* Icons */

ul.icons {
	list-style: none;
	padding-left: 0;
}

ul.icons li {
	padding-left: 0;
}

ul.icons li:before {
	display: inline-block;
	color: #fff;
	background: #61666b;
	width: 2.5em;
	height: 2.5em;
	border-radius: 0.35em;
	text-align: center;
	line-height: 2.5em;
	margin-right: 0.75em;
}

/* Menu */

ul.menu {
	list-style: none;
	padding-left: 0;
}

ul.menu li {
	display: inline-block;
	border-left: solid 1px #d2d7dc;
	padding-left: 1em;
	margin-left: 1em;
}

ul.menu li:first-child {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
}

/* Form */

form .actions {
	padding-top: 0;
}

form label {
	display: block;
	font-weight: 300;
	color: #52575c;
	margin: 0 0 0.5em 0;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
	-moz-transition: background-color 0.25s ease-in-out;
	-webkit-transition: background-color 0.25s ease-in-out;
	-ms-transition: background-color 0.25s ease-in-out;
	transition: background-color 0.25s ease-in-out;
	-webkit-appearance: none;
	display: block;
	background: #f9fbfe;
	border: solid 1px #d2d7dc;
	border-radius: 0.35em;
	width: 100%;
	line-height: 1.5em;
	padding: 0.75em;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
	background: #fff;
}

form textarea {
	min-height: 7em;
}

form ::-webkit-input-placeholder {
	color: #555 !important;
}

form :-moz-placeholder {
	color: #555 !important;
}

form ::-moz-placeholder {
	color: #555 !important;
}

form :-ms-input-placeholder {
	color: #555 !important;
}

form ::-moz-focus-inner {
	border: 0;
}

/* Table */

table {
	width: 100%;
}

table.default {
	width: 100%;
}

table.default tbody tr {
	border-top: solid 1px #D2D7DC;
}

table.default tbody tr:nth-child(2n+1) {
	background: #f9fbfe;
}

table.default td {
	padding: 0.5em 1em 0.5em 1em;
}

table.default th {
	text-align: left;
	font-weight: 400;
	padding: 0.5em 1em 0.5em 1em;
}

table.default tfoot {
	border-top: solid 1px #D2D7DC;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
	display: inline-block;
	color: inherit;
	background: none;
	text-decoration: none;
	border: var(--brown);
	border-radius: 0;
	padding: 0.8em 2em 0.8em 2em;
	cursor: pointer;
	outline: 0;
	font-weight: 500;
	background: var(--brown);
	margin-top: 1.2rem;
	color: #fff;
	text-transform: uppercase;
	font-size: .6rem;
	letter-spacing: .16em;
	padding: .9rem 1.45rem;
	align-items: center;
	justify-content: center;

}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	border-color: var(--brown);
	background: transparent;
	color: var(--brown);
	border: solid 1.2px;
}

.dark-button:hover {
	background: #361305 !important;
	border-color: #361305 !important;
	color: #fff !important;
}

/* Wrappers */

.wrapper {
	position: relative;
	background: #fff;
	overflow-x: hidden;
	padding: 6em 0 6em 0;
}

.image-wrapper {
	position: relative;
}

.image-wrapper .image {
	position: relative;
	z-index: 2;
}

.image-wrapper.first:before {
	content: '';
	display: block;
	width: 2000%;
	height: 100%;
	position: absolute;
	left: -1000%;
	top: 0;
	z-index: 1;
	box-shadow: inset 0px 0px 0px 1px #e8e8e8;
	background: #f6f8fb url("images/image-wrapper.svg");
}

#header-wrapper {
	position: relative;
	background-color: var(--cream);
	background-size: 100% 620%;
	background-size: 128px 128px, 100% 620%, auto;
	background-repeat: repeat, no-repeat, no-repeat;
}

.homepage #header-wrapper {
	/* padding: 10em 0 6em 0; */
	background-size: 128px 128px, 100% 100%, auto;
}

/* Hero */

#hero {
	position: relative;
	color: #fff;
	text-align: center;
	z-index: 1;
}

#hero h2 {
	color: #fff;
	font-size: 3em;
}

#hero strong {
	color: inherit;
}

#hero header>span {
	color: #fff;
}

#hero p {
	font-size: 1.5em;
	line-height: 1.5em;
}


body.dontcha-nav-open,
body.dontcha-cart-open {
	overflow: hidden;
}


/* Shared cart drawer. */
.cart-drawer {
	position: fixed !important;
	top: 0;
	right: 0;
	z-index: 2147483000;
	height: 100dvh !important;
	display: flex;
	flex-direction: column;
	background: var(--cream);
	color: var(---walnut-husk);
	transform: translate3d(102%, 0, 0);
	visibility: hidden;
	pointer-events: none;
	transition: transform 240ms ease, visibility 0s linear 240ms;
	box-shadow: -20px 0 50px rgba(0, 0, 0, 0.12);
	max-height: 100dvh !important;
	overflow: hidden !important;
	width: min(83vw, 469px) !important;
}


.cart-drawer.is-open {
	transform: translate3d(0, 0, 0);
	visibility: visible;
	pointer-events: auto;
	transition: transform 240ms ease;
}

.cart-drawer-backdrop {
	position: fixed !important;
	inset: 0;
	z-index: 2147482999;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	background: rgba(0, 0, 0, 0.28);
	box-shadow: none;
	opacity: 1;
	transition: opacity 340ms ease !important;
}

.cart-drawer-backdrop[hidden] {
	display: none;
	opacity: 0;
	pointer-events: none;
}

.cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 1.8rem 1.15rem;
	border-bottom: 1px solid #ddd6cb;
}

.cart-drawer-header h2 {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.55rem;
	font-weight: 400;
	color: var(--brown);
}

.cart-drawer-close {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--walnut-husk);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	margin: 0;
	font-family: var(--sans);
	font-weight: 0;
}

.cart-drawer-close:hover {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #361305 !important;
}


.cart-drawer-items {
	flex: 1 1 auto;
	padding: 0 1.8rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.cart-drawer-empty {
	margin: 2rem 0;
	color: var(--walnut-husk);
	font-size: 148x;
}

.cart-drawer-item {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: .9rem;
	height: 132px;
	padding: 1.05rem 0;
	border-bottom: 1px solid #ddd6cb;
	overflow: hidden;
}

.cart-item-image {
	display: block;
	width: 82px;
	height: 102px;
	overflow: hidden;
	background: #ece7de;
	border-bottom: 0;
}

.cart-item-image img,
.cart-item-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-item-heading {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
}


.cart-item-option {
	margin: .3rem 0 0;
	font-size: .76rem;
	color: #746d63;
}

.cart-item-note {
	display: -webkit-box;
	margin: .4rem 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .7rem;
	line-height: 1.3;
	color: var(--walnut-husk);
}

.cart-item-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.cart-item-quantity {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	height: 24px;
	font-size: .9rem;
	line-height: 1;
}

.cart-item-quantity>span,
.cart-item-quantity>button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	min-height: 24px;
	margin: 0;
	padding: 0;
	line-height: 1;
	vertical-align: middle;
}

.cart-item-quantity>span {
	min-width: 18px;
	font-size: 1rem;
	font-family: var(--serif);
	font-weight: 100 !important;
}

.cart-item-quantity button,
.cart-item-remove {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--walnut-husk);
	font: inherit;
	cursor: pointer;
	font-size: .68rem;
}

.cart-drawer-footer {
	border-top: 1px solid #ddd6cb;
	background: var(--cream);
	flex: 0 0 auto !important;
	padding: .85rem 1.35rem 1rem !important;
}


.cart-drawer-subtotal {
	display: flex;
	justify-content: space-between;
	margin-bottom: .9rem;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--brown);
}

.cart-drawer-subtotal strong {
	font-weight: 400;
}

.cart-drawer-checkout,
.cart-drawer-continue {
	display: flex;
	width: 100%;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--brown) !important;
	background: var(--brown);
	color: #fff !important;
	font-family: var(--sans) !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
}

.cart-drawer-checkout:hover {
	background: transparent !important;
	color: var(--brown) !important;
	border-color: var(--brown) !important;
}

.cart-drawer-continue {
	background: transparent;
	color: var(--brown) !important;
}

.cart-drawer-continue:hover {
	background: var(--brown) !important;
	color: #fff !important;
	border-color: var(--brown) !important;
}

/* Cart page. */
.cart-page {
	background: var(--cream);
	color: #4b2418;
}

.cart-page #header-wrapper {
	padding: 0;
	background: var(--cream);
}

.cart-page-main {
	min-height: 100vh;
	padding: calc(82px + 3rem) clamp(2rem, 5vw, 5rem) 5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(360px, .9fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	background: var(--cream);
	overflow: visible !important;
}

.cart-page-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid #d8cfc0;
}

.cart-page-heading h1 {
	margin: 0;
	font-family: --var(serif);
	font-style: italic;
	font-size: 2.25rem;
	font-weight: 400;
	color: var(--brown);
}

.cart-page-heading h1 span {

	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	margin-left: .45rem;
	border-radius: 50%;
	background: #eee5d6;
	font: 600 .72rem var(--sans);
	font-weight: 100;
	font-style: normal;
}

.cart-page-heading>a {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--brown);
}

.cart-page-item {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 1.2rem;
	height: 158px;
	padding: 1.25rem 0;
	border-bottom: 1px solid #d8cfc0;
	overflow: hidden;
}

.cart-page-item-image {
	display: block;
	width: 108px;
	height: 132px;
	overflow: hidden;
	background: #ece7de;
	border-bottom: 0;
}

.cart-page-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-page-item-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cart-page-item-top {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.cart-page-item-top h2 {
	margin: 0 0 .25rem;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: #4b2418;
}

.cart-page-item-top p {
	margin: 0;
	font-size: .78rem;
	color: #765c51;
}

.cart-page-item-top strong {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
	white-space: nowrap;
}

.cart-page-card-note {
	display: -webkit-box;
	margin-top: .35rem !important;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .68rem !important;
	line-height: 1.25;
}

.cart-page-item-bottom {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
}

.cart-page-qty-label {
	display: block;
	margin-bottom: .3rem;
	font-family: var(--serif);
	font-style: italic;
	font-size: .72rem;
}

.cart-page-qty {
	display: inline-flex !important;
	align-items: center !important;
	gap: .08rem !important;
	height: 30px !important;
	line-height: 1 !important;
}

.cart-page-qty button,
.cart-page-item-links button {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #4b2418;
	font: inherit;
	cursor: pointer;
}


.cart-page-item-links {
	display: inline-flex !important;
	align-items: center !important;
	gap: 1.6rem !important;
	height: 30px !important;
	margin-left: auto !important;
}


.cart-page-item-links button,
.cart-page-item-links a {
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--walnut-husk);
	border-bottom: 0;
}


.cart-page-qty button,
.cart-page-qty>span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 30px !important;
	min-width: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--sans) !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--brown) !important;
	vertical-align: middle !important;
}

.cart-page-item-links button {
	display: inline-flex !important;
	align-items: center !important;
	height: 30px !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.cart-page-empty {
	padding: 4rem 0;
	text-align: center;
}

.cart-summary-panel {
	border: 1px solid #d8cfc0;
	align-self: start;
	background: rgba(255, 255, 255, .18);
}

.cart-summary-inner {
	padding: clamp(1.5rem, 3vw, 2.3rem);
}

.cart-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid #d8cfc0;
}

.cart-summary-total span {
	font-size: .92rem;
}

.cart-summary-total strong {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.75rem;
	font-style: italic;
	font-weight: 400;
}

.cart-summary-copy {
	margin: 1.4rem 0;
	font-size: var(--p-bloom-bar-font-size);
	line-height: 1.55;
	color: #765c51;
}

.cart-summary-section {
	padding-top: 1rem;
	border-top: 1px solid #d8cfc0;
}

.cart-summary-label,
.cart-summary-field>span {
	display: block;
	margin-bottom: 0rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cart-fulfilment-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}

.cart-fulfilment-options button {
	min-height: 46px;
	border: 1px solid #d8cfc0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #4b2418;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cart-fulfilment-options button.is-selected {
	background: #5a2a16;
	color: #fff;
	border-color: #5a2a16;
}

.cart-fulfilment-options small {
	margin-left: .35rem;
	font-size: .6rem;
}

.cart-summary-field {
	display: block;
	margin-top: 1rem;
}

.cart-summary-field input,
.cart-summary-field select {
	width: 100%;
	height: 42px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #d8cfc0;
	border-radius: 0;
	background: transparent;
	color: var(--walnut-husk);
	box-shadow: none;
}

.cart-terms {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	margin: 2rem 0 1rem;
	font-size: .78rem;
	line-height: 1.4;
}

.cart-terms input {
	margin-top: .15rem;
}

.cart-continue-button {
	width: 100%;
	min-height: 48px;
	border-radius: 0;
	border: 1px solid #5a2a16;
	background: #5a2a16;
	color: #fff;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: none;
	font-weight: 600;
	font-size: 12px;
}

.cart-checkout-message {
	min-height: 1.15rem;
	margin: .2rem 0 .55rem;
	font-size: .72rem;
	color: #9f4b3f;
}

/* Flowers page hero and catalogue layout. */
.flowers-page #header-wrapper {
	padding: 0;
	background: var(--cream);
}

.flowers-hero {
	width: 100%;
	height: clamp(280px, 38vh, 460px);
	background: url('../../images/flowers-hero2.webp') center center / cover no-repeat;
}

.flowers-page .wrapper {
	padding: 0;
	background: var(--cream);
}





.flower-category {
	margin: 0 0 clamp(1.8rem, 3vw, 3rem);
	scroll-margin-top: 105px;
}

.flower-category:last-child {
	margin-bottom: 0;
}

.flower-category h2 {
	margin: 0 0 1rem;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.5vw, 1.7rem);
	letter-spacing: -.02em;
	/* font-size: clamp(15px, 1.2vw, 18px); */
	color: var(--brown);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.1rem, 2.5vw, 2.8rem);
	row-gap: clamp(0.8rem, 1.8vw, 2rem);
}

.product-card {
	min-width: 0;
}

.product-card-image {
	width: 100%;
	aspect-ratio: 1.8 / 1.05;
	background-image: url('../../images/flowers-hero.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.product-card:nth-child(1) .product-card-image {
	background-position: 18% 52%;
}

.product-card:nth-child(2) .product-card-image {
	background-position: 52% 52%;
}

.product-card:nth-child(3) .product-card-image {
	background-position: 82% 52%;
}

.product-card h3 {
	margin: 1rem 0 0.15rem;
	font-size: 0.9rem;
	/* font-style: italic; */
	letter-spacing: .0em;
	color: var(--brown);
	font-family: var(--serif);
}

.product-card p {
	margin: 0;
	font-size: 0.75rem;
	font-family: var(--serif);
	line-height: 1.4;
	color: var(--walnut-husk);
}

.product-card p.product-card-price {
	color: var(--walnut-husk);
}

/* Shared Flowers product cards: links and catalogue-generated content. */
.product-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border: 0;
}

.product-card-link:hover {
	color: inherit;
	border: 0;
}

.product-card-image {
	background-color: #ece7de;
	transition: transform 260ms ease;
}

.product-card-link:hover .product-card-image {
	transform: scale(1.012);
}

.product-card-price {
	margin-top: 0.22rem !important;
}

/* Product detail page: data-driven gallery + sticky information. v7 mobile viewport composition */
.product-page {
	background: var(--cream);
}

.product-page #header-wrapper {
	padding: 0;
	background: none;
}

/* Product pages use the same shared navbar dimensions and styling as every other page. */

.product-page .product-layout {
	display: grid;
	padding-top: 82px;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
	align-items: start;
	background: var(--cream);
}


.product-gallery-wrap {
	position: relative;
	min-width: 0;
	background: #f2f0eb;
}

.product-gallery {
	min-width: 0;
	background: var(--cream);
}

.product-media {
	width: 100%;
	height: calc(100vh - 82px);
	height: calc(100svh - 82px);
	min-height: 540px;
	margin: 0;
	overflow: hidden;
	background: #f2f0eb;
}

.product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-media.is-size-guide {
	height: calc(100vh - 82px);
	height: calc(100svh - 82px);
	min-height: 0 !important;
	background-color: #FAFAF7;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 4rem);
}

.product-media.is-size-guide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-info-column {
	position: sticky;
	top: 82px;
	height: calc(100vh - 82px);
	height: calc(100svh - 82px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 clamp(2.5rem, 6vw, 7rem) 4rem;
	background: var(--cream);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.product-info {
	width: min(100%, 560px);
	margin-top: clamp(1.7rem, 3vh, 2.35rem);
	padding-bottom: 2rem;
	text-align: center;
	color: var(--brown);
}

/* Title + style + options - authoritative styling */
.product-breadcrumb {
	text-transform: uppercase !important;
	font-size: .63rem !important;
	font-weight: 600 !important;
	letter-spacing: .20em !important;
	color: var(--muted-taupe) !important;
	/* padding-top: 2px; */
}


.product-title {
	/* color: #171513; */
	color: var(--espresso);
	margin: 0 0 1.05rem;
	font-size: clamp(3rem, 4.7vw, 5.7rem);
	line-height: .84;
	font-family: var(--serif) !important;
	font-weight: 460 !important;
	letter-spacing: -0.005em !important;
	display: block !important;
}



.product-tab-list {
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	border-bottom: 1px solid #d8d2c8;
}

.product-tab {
	position: relative;
	padding: 0 0 0.65rem;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--sans-2);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #7a7369;
	cursor: pointer;
}

.product-tab::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: transparent;
}

.product-tab.is-active {
	color: #28241f;
}

.product-tab.is-active::after {
	background: #28241f;
}

.product-tab-panel {
	padding-top: 0.62rem;
}

.product-tab-panel[hidden] {
	display: none;
}

.product-description {
	max-width: 520px;
	margin: 0 auto;
	font-size: var(--p-bloom-bar-font-size);
	line-height: 1.38;
	color: #514b43;
}

.product-best-for {
	width: min(100%, 470px);
	margin: .7rem 0 .1rem;
	padding-top: .65rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid #ded7cc;
	color: #625a50;
}

.product-best-for h2 {
	margin: 0 0 .45rem;
	font-family: var(--sans);
	font-size: .62rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--brown);
	padding-bottom: .4rem;
	padding-top: .4rem;
}

.product-best-for-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0 0 .55rem;
	padding: 0.5px;
	border: 0;
	color: inherit;
	text-decoration: none;
}

.product-best-for-row:hover {
	border: 0;
	color: inherit;
}

.product-best-for-row:last-child {
	margin-bottom: 0;
}

.product-best-for-copy {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: baseline;
	column-gap: .5rem;
	min-width: 0;
	font-family: var(--sans);
	font-size: .7rem;
	line-height: 1.28;
	color: var(--walnut-husk);
}

.product-best-for-copy strong {
	font-weight: 600;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: var(--walnut-husk);
	white-space: nowrap;
}

.product-best-for-arrow {
	flex: 0 0 auto;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1;
	color: #413b35;
	transition: transform 160ms ease;
}

.product-best-for-row:hover .product-best-for-arrow {
	transform: translateX(3px);
}

.product-option-label {
	display: flex;
	align-items: center;

	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 .18rem;
	font-size: .8rem;
	letter-spacing: .14em;
	color: var(--brown);
	display: block !important;
	padding: 0 !important;
	text-transform: uppercase !important;
}


body.product-page .product-card-note-label {
	margin-bottom: -10px !important;

}

.product-options {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 0.75rem;
}


.product-options {
	margin: 0;
	align-items: center;
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	margin-bottom: 0 !important;
}

.product-option {
	flex: 0 0 auto;
	min-width: 0;
	padding: .45rem .9rem;
	border: 0;
	border-left: 1px solid #cfc7bb;
	background: transparent;
	color: var(--walnut-husk);
	font-size: .88rem;
	line-height: 1.35;
	box-shadow: none;
}

.product-options.has-error .product-option {
	border-color: #9f4b3f;
}

.product-validation {
	min-height: 0;
	margin: 0 auto 0.15rem;
	font-size: 0.72rem;
	color: #9f4b3f;
}

.product-validation:empty {
	display: none;
}


.product-card-note-label span {
	float: right;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--walnut-husk);
}

.product-card-note:focus {
	border-color: #28241f;
	outline: none;
}

.product-add-button {
	width: min(100%, 240px);
	min-height: 54px;
	margin-top: .4rem;
	padding: .9rem 1.2rem;
	border: 1px solid var(--brown);
	border-radius: 0;
	background: var(--brown);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	font-family: var(--sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	box-shadow: none;
}

.product-add-button:hover {
	background: transparent;
	color: var(--brown);
}

.product-contact-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.4rem;
}


.product-aftercare {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid #ddd5c9;
	background: #fbf7ee;
}

.product-aftercare-block {
	min-height: 360px;
	padding: clamp(3.2rem, 6vw, 6rem) clamp(2.5rem, 4.5vw, 5rem);
	border-right: 1px solid #ddd5c9;
}

.product-aftercare-block:last-child {
	border-right: 0;
}

.product-aftercare-kicker {
	display: block;
	margin-bottom: 2.2rem;
	font-size: .62rem;
	letter-spacing: .18em;
	color: #948a7d;
}

.product-aftercare-block h2 {
	margin: 0 0 1.1rem;
	font-family: var(--serif);
	font-size: clamp(1.6rem, 2.2vw, 2.35rem);
	font-weight: 400;
	color: var(--brown);
}

.product-aftercare-block p {
	max-width: 430px;
	margin: 0;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--walnut-husk);
}

.product-not-found {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 6rem 2rem;
	text-align: center;
}


/* ==========================================================================
   DONTCHA BLOOMS - NAVBAR (SINGLE SOURCE OF TRUTH)
   ==========================================================================
   CHANGE NAVBAR TYPOGRAPHY HERE ONLY:

   --site-nav-font-size-desktop
   --site-nav-font-size-medium
   --site-nav-font-weight
   --site-nav-letter-spacing
   --site-nav-text-transform

   Dropdown and mobile typography are also grouped directly below.
   ========================================================================== */

:root {
	/* HEIGHT */
	--site-nav-height-desktop: 82px;
	--site-nav-height-mobile: 68px;
	--site-nav-height: var(--site-nav-height-desktop);

	/* COLOURS */
	--site-nav-bg: var(--cream);
	--site-nav-ink: var(--walnut-husk);
	--site-nav-on-hero: #ffffff;


	/* TOP-LEVEL NAV TYPOGRAPHY - EDIT THESE */
	--site-nav-font-family: var(--sans);
	--site-nav-font-size-desktop: .63rem;
	--site-nav-font-size-medium: .63rem;
	--site-nav-font-weight: 520;
	--site-nav-letter-spacing: .13em;
	--site-nav-text-transform: uppercase;

	/* DROPDOWN TYPOGRAPHY */
	--site-nav-dropdown-font-family: var(--site-nav-font-family);
	--site-nav-dropdown-font-size: var(--site-nav-font-size-desktop);
	--site-nav-dropdown-font-size-medium: var(--site-nav-font-size-medium);
	--site-nav-dropdown-weight: var(--site-nav-font-weight);

	--site-nav-dropdown-heading-size: .7rem;
	--site-nav-dropdown-heading-size-medium: .7rem;
	--site-nav-dropdown-heading-weight: 400;

	/* MOBILE DRAWER TYPOGRAPHY */
	--site-nav-mobile-font-family: var(--site-nav-font-family);
	--site-nav-mobile-font-size: 1rem;
	--site-nav-mobile-font-weight: 550;
	--site-nav-mobile-subheading-size: .72rem;
	--site-nav-mobile-letter-spacing: .16em;
}

@media screen and (max-width: 780px) {
	:root {
		--site-nav-height: var(--site-nav-height-mobile);
	}
}

/* ---------- BASE NAV ---------- */

#header {
	position: static;
}

.site-nav,
.site-nav * {
	box-sizing: border-box;
}

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1100;
	width: 100%;
	height: var(--site-nav-height);
	min-height: var(--site-nav-height);
	padding: 0 4vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	background: var(--cream);
	color: var(--site-nav-ink);
	border: 0;
	border-bottom: 0;
	box-shadow: none;
	font-family: var(--site-nav-font-family);
	transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.site-nav a,
.site-nav button {
	border: 0;
	color: inherit;
	text-decoration: none;
	font: inherit;
}

.site-nav a:hover {
	color: inherit;
	border: 0;
}

.brand-logo {
	display: block;
	width: auto;
	height: 49px;
	max-width: 128px;
	object-fit: contain;
	filter: none;
	transition: filter .2s ease;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(1.05rem, 1.9vw, 2.25rem);
	margin-left: 2rem;
	flex-shrink: 0;
}

.nav-links>a,
.nav-item>a {
	display: inline-flex;
	align-items: center;
	min-height: var(--site-nav-height);
	flex-shrink: 0;
	white-space: nowrap;
	border: 0;

	/* TOP-LEVEL NAV TYPE - driven entirely by variables above */
	font-family: var(--site-nav-font-family) !important;
	font-size: var(--site-nav-font-size-desktop) !important;
	font-weight: var(--site-nav-font-weight) !important;
	letter-spacing: var(--site-nav-letter-spacing) !important;
	text-transform: var(--site-nav-text-transform) !important;
	color: inherit !important;
}

.nav-item {
	position: relative;
}

/* Cart stays in the same nav rhythm: no divider. */
.nav-utility {
	padding-left: 0;
	border-left: 0 !important;
}

/* ---------- SOLID / HERO STATES ---------- */

body .site-nav,
body .site-nav.is-scrolled,
body .site-nav.mobile-open {
	background: var(--site-nav-bg) !important;
	color: var(--site-nav-ink) !important;
}

body .site-nav .brand-logo,
body .site-nav.is-scrolled .brand-logo,
body .site-nav.mobile-open .brand-logo {
	filter: none !important;
}

body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) {
	background: transparent !important;
	color: var(--site-nav-on-hero) !important;
}

body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .brand-logo {
	filter: brightness(0) invert(1) !important;
}

body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) a,
body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) button {
	color: inherit !important;
}

/* Utility/content pages always use the solid navbar. */
.cart-page .site-nav,
.bloom-bar-enquiry-page .site-nav,
.terms-page .site-nav {
	background: var(--site-nav-bg) !important;
	color: var(--site-nav-ink) !important;
}

/* Header surface immediately behind solid fixed navigation. */
.cart-page #header-wrapper,
.cart-page #header,
.bloom-bar-enquiry-page #header-wrapper,
.bloom-bar-enquiry-page #header {
	background: var(--site-nav-bg) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Fixed nav is removed from document flow, so non-hero pages need exactly
   one navbar-height spacer before their page content. Keep this here with
   the navbar - not in page-specific CSS. */
.bloom-bar-enquiry-page #header-wrapper,
.bloom-bar-enquiry-page #header {
	height: var(--site-nav-height) !important;
	min-height: var(--site-nav-height) !important;
	max-height: var(--site-nav-height) !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* ABOUT has a real image hero, so it begins behind the fixed navbar. */
.about-page #header-wrapper,
.about-page #header {
	height: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	background-image: none !important;
}

.about-page .about-page-main {
	padding-top: 0 !important;
}

.about-page .page-banner {
	margin-top: 0 !important;
}

/* ---------- DESKTOP DROPDOWNS ---------- */

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 140px;
	min-width: 140px;
	padding-top: 0;
	transform: translateY(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
	color: inherit;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.nav-dropdown-inner {
	padding: .45rem 0;
	background: var(--site-nav-bg);
	color: var(--site-nav-ink);
	border: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.nav-dropdown-inner a {
	display: block;
	padding: .68rem .85rem;
	border: 0;
	white-space: nowrap;
	color: inherit;
	font-family: var(--site-nav-dropdown-font-family);
	font-size: var(--site-nav-dropdown-font-size);
	font-weight: var(--site-nav-dropdown-weight);
	line-height: 1.3;
}

.nav-dropdown-inner a:hover {
	background: transparent;
	opacity: .58;
}

body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-dropdown-inner {
	background: transparent !important;
	color: var(--site-nav-on-hero) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-dropdown-inner a,
body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-dropdown-heading {
	color: inherit !important;
}

@media screen and (min-width: 781px) {
	.site-nav .nav-item.has-dropdown {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		height: var(--site-nav-height) !important;
	}

	/* Dropdown starts slightly left so its text aligns beneath the top label. */
	.site-nav .nav-item.has-dropdown>.nav-dropdown {
		position: absolute !important;
		top: 54px !important;
		left: 0 !important;
		right: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		z-index: 1000 !important;
	}

	.site-nav .nav-item.has-dropdown:hover>.nav-dropdown,
	.site-nav .nav-item.has-dropdown:focus-within>.nav-dropdown {
		transform: none !important;
	}

	/* SHOP - compact single column. */
	.site-nav .nav-item.nav-shop.has-dropdown>.nav-dropdown.nav-shop-dropdown {
		width: max-content !important;
		min-width: 150px !important;
		max-width: none !important;
		margin-left: -14px !important;
	}

	.site-nav .nav-item.nav-shop.has-dropdown>.nav-dropdown.nav-shop-dropdown>.nav-dropdown-inner.nav-shop-grid {
		display: block !important;
		width: max-content !important;
		min-width: 150px !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 8px 14px !important;
		box-sizing: border-box !important;
		border: 0 !important;
		box-shadow: none !important;
		text-align: left !important;
	}

	.site-nav .nav-item.nav-shop.has-dropdown>.nav-dropdown.nav-shop-dropdown>.nav-dropdown-inner.nav-shop-grid>.nav-dropdown-column {
		display: block !important;
		width: max-content !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.site-nav .nav-shop-collections {
		display: block !important;
	}

	.site-nav .nav-shop-everyday {
		display: none !important;
	}

	.site-nav .nav-shop-grid .nav-dropdown-heading,
	.site-nav .nav-shop-grid .nav-dropdown-column>a,
	.site-nav .nav-shop-grid .nav-dropdown-spacer {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		text-align: left !important;
		white-space: nowrap !important;
	}

	.site-nav .nav-shop-grid .nav-dropdown-heading {
		display: none !important;
		font-family: var(--site-nav-dropdown-font-family) !important;
		font-size: var(--site-nav-dropdown-heading-size) !important;
		font-weight: var(--site-nav-dropdown-heading-weight) !important;
		line-height: 1.2 !important;
		letter-spacing: .04em !important;
		text-transform: uppercase !important;
		color: inherit !important;
	}

	.site-nav .nav-shop-grid .nav-dropdown-column>a {
		height: 28px !important;
		min-height: 28px !important;
		font-family: var(--site-nav-dropdown-font-family) !important;
		font-size: var(--site-nav-dropdown-font-size) !important;
		font-weight: var(--site-nav-dropdown-weight) !important;
		letter-spacing: var(--site-nav-letter-spacing) !important;
		line-height: 1.2 !important;
		text-transform: var(--site-nav-text-transform) !important;
		color: inherit !important;
		background: transparent !important;
	}

	.site-nav .nav-shop-grid .nav-dropdown-spacer {
		display: none !important;
	}

	/* OCCASIONS - its own single-column menu. */
	.site-nav .nav-item.nav-occasions.has-dropdown>.nav-dropdown.nav-occasions-dropdown {
		width: max-content !important;
		min-width: 150px !important;
		max-width: none !important;
		margin-left: -14px !important;
	}

	.site-nav .nav-item.nav-occasions.has-dropdown>.nav-dropdown.nav-occasions-dropdown>.nav-dropdown-inner.nav-occasion-list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: max-content !important;
		min-width: 150px !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		border: 0 !important;
		box-shadow: none !important;
		text-align: left !important;
		padding: 8px 14px !important;
	}



	.site-nav .nav-occasion-list>a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		height: 28px !important;
		min-height: 28px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-family: var(--site-nav-dropdown-font-family) !important;
		font-size: var(--site-nav-dropdown-font-size) !important;
		font-weight: var(--site-nav-dropdown-weight) !important;
		letter-spacing: var(--site-nav-letter-spacing) !important;
		text-transform: var(--site-nav-text-transform) !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		text-align: left !important;
		color: inherit !important;
		background: transparent !important;
	}

	.site-nav .nav-shop-grid a:hover,
	.site-nav .nav-occasion-list a:hover {
		background: transparent !important;
		opacity: .58 !important;
	}
}

/* ---------- MEDIUM DESKTOP / TABLET ---------- */

@media screen and (min-width: 781px) and (max-width: 1080px) {
	.site-nav {
		padding-left: 28px;
		padding-right: 28px;
	}

	.site-nav .nav-links {
		gap: .82rem !important;
		margin-left: 1.25rem !important;
	}

	.nav-links>a,
	.nav-item>a {
		font-size: var(--site-nav-font-size-medium) !important;
	}

	.site-nav .nav-shop-grid .nav-dropdown-column>a,
	.site-nav .nav-occasion-list>a {
		font-size: var(--site-nav-dropdown-font-size-medium) !important;
	}

	.site-nav .nav-dropdown-heading {
		font-size: var(--site-nav-dropdown-heading-size-medium) !important;
	}
}

@media screen and (min-width: 781px) {

	/* Homepage dropdowns stay transparent over the hero. */
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-shop-dropdown,
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-occasions-dropdown {
		isolation: isolate;
	}

	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-shop-dropdown .nav-dropdown-inner,
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-occasions-dropdown .nav-dropdown-inner {
		position: relative;
		z-index: 2;
		background: transparent !important;
	}

	/* One continuous cream surface only where the dropdown overlaps the offerings section. */
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-shop-dropdown::before,
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-occasions-dropdown::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: var(--offerings-overlap-start, 100%);
		bottom: 0;
		background: var(--cream);
		z-index: 1;
		pointer-events: none;
	}

	/* Items still sitting over the hero remain light. */
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-shop-dropdown a,
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-occasions-dropdown a {
		position: relative;
		z-index: 3;
		color: var(--cream) !important;
		background: transparent !important;
	}

	/* Items whose centre has crossed into the cream section become brown. */
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-shop-dropdown a.is-over-cream,
	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .nav-occasions-dropdown a.is-over-cream {
		color: var(--walnut-husk) !important;
		background: transparent !important;
	}
}

/* ---------- MOBILE NAV ---------- */

.mobile-nav-toggle,
.mobile-nav-drawer,
.mobile-nav-backdrop {
	display: none;
}

body.dontcha-nav-open {
	overflow: hidden;
}

@media screen and (max-width: 780px) {
	.site-nav {
		height: var(--site-nav-height);
		min-height: var(--site-nav-height);
		padding: 0 20px;
	}

	.nav-links {
		display: none;
	}

	.mobile-nav-toggle {
		display: inline-flex;
		width: 42px;
		height: 42px;
		padding: 0;
		margin: 0 -8px 0 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 7px;
		background: transparent;
		cursor: pointer;
		appearance: none;
	}

	.mobile-nav-toggle span {
		display: block;
		width: 22px;
		height: 1px;
		background: var(--site-nav-ink);
		transform-origin: center;
		transition: transform 180ms ease, opacity 180ms ease, background-color 220ms ease;
	}

	body.has-nav-hero .site-nav:not(.is-scrolled):not(.mobile-open) .mobile-nav-toggle span {
		background: var(--site-nav-on-hero);
	}

	.mobile-open .mobile-nav-toggle span:first-child {
		transform: translateY(4px) rotate(45deg);
	}

	.mobile-open .mobile-nav-toggle span:last-child {
		transform: translateY(-4px) rotate(-45deg);
	}

	.mobile-nav-drawer {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1002;
		width: min(86vw, 390px);
		height: 100vh;
		height: 100dvh;
		padding: 92px 28px 32px;
		background: var(--site-nav-bg);
		color: var(--site-nav-ink);
		transform: translateX(102%);
		transition: transform 220ms ease;
		overflow-y: auto;
		box-shadow: -18px 0 40px rgba(0, 0, 0, .08);
	}

	.mobile-open .mobile-nav-drawer {
		transform: translateX(0);
	}

	.mobile-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1001;
		background: rgba(0, 0, 0, .28);
	}

	.mobile-nav-backdrop[hidden] {
		display: none;
	}

	.mobile-open .mobile-nav-toggle {
		position: fixed;
		top: 13px;
		right: 20px;
		z-index: 1003;
		color: var(--site-nav-ink);
	}

	.mobile-open .mobile-nav-toggle span {
		background: var(--site-nav-ink);
	}

	.mobile-nav-menu {
		display: flex;
		flex-direction: column;
	}

	.mobile-nav-menu>a,
	.mobile-nav-flowers-link {
		display: flex;
		width: 100%;
		min-height: 54px;
		padding: 0;
		margin: 0;
		align-items: center;
		font-family: var(--site-nav-mobile-font-family) !important;
		font-size: var(--site-nav-mobile-font-size) !important;
		font-weight: var(--site-nav-mobile-font-weight) !important;
		line-height: 1.2;
		letter-spacing: var(--site-nav-mobile-letter-spacing);
		text-transform: var(--site-nav-text-transform);
		color: var(--site-nav-ink) !important;
		text-decoration: none;
		border: 0;
	}

	.mobile-nav-flowers-row {
		display: flex;
		width: 100%;
		min-height: 54px;
		align-items: stretch;
	}

	.mobile-nav-flowers-link {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mobile-nav-flowers-toggle {
		display: flex;
		flex: 0 0 52px;
		width: 52px;
		min-height: 54px;
		padding: 0;
		margin: 0;
		align-items: center;
		justify-content: flex-end;
		background: transparent;
		color: var(--site-nav-ink);
		border: 0;
		cursor: pointer;
		appearance: none;
	}

	.mobile-nav-caret {
		font-size: .8rem;
		line-height: 1;
		transition: transform 180ms ease;
	}

	.mobile-nav-flowers-toggle[aria-expanded="true"] .mobile-nav-caret {
		transform: rotate(180deg);
	}

	.mobile-nav-submenu {
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		transition: max-height 240ms ease, opacity 160ms ease !important;
	}

	.mobile-nav-submenu.is-open {
		height: auto !important;
		max-height: 620px !important;
		opacity: 1 !important;
	}

	.mobile-nav-submenu>a {
		display: flex;
		align-items: center;
		min-height: 38px;
		padding: 0 0 0 1rem;
		/* font-family: var(--serif); */
		font-family: var(--site-nav-mobile-font-family);
		text-transform: uppercase;
		/* font-style: italic; */
		font-size: 1rem;
		font-weight: 450;
		line-height: 1.2;
		letter-spacing: 0.14em;
		color: var(--site-nav-ink);
		text-decoration: none;
		border: 0;
	}


	.mobile-nav-cart {
		margin-top: .9rem;
	}
}

/* ==========================================================================
   END NAVBAR
   ========================================================================== */


/* Homepage viewport sections. */
.homepage #header-wrapper {
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-size: cover;
	background-position: center center;
}

.homepage #hero {
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 110px;
	padding-bottom: 60px;
}

.homepage #page-wrapper>.wrapper,
.homepage #promo-wrapper {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
}

.homepage #page-wrapper>.wrapper>.container,
.homepage #promo-wrapper>#promo {
	width: 100%;
}

@media screen and (max-width: 1080px) and (min-width: 781px) {
	.homepage #header-wrapper {
		height: 100vh;
		height: 100svh;
		min-height: 100vh;
		min-height: 100svh;
	}

	.homepage #hero {
		min-height: 0;
		flex: 1 1 auto;
	}

	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-page .product-layout {
		grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
	}

	.product-info-column {
		padding: 0 3.5rem 3rem;
	}

	.product-info {
		margin-top: 1.25rem;
	}
}

@media screen and (max-width: 780px) {

	.homepage #header-wrapper {
		height: 100svh !important;
		min-height: 100svh !important;
		max-height: 100svh !important;
		padding: 0 !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	.homepage #hero {
		height: 100%;
		min-height: 0;
		padding-top: 68px;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.flowers-hero {
		height: clamp(210px, 32vh, 300px);
		background-position: 55% center;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 2.2rem;
	}

	.product-card-image {
		aspect-ratio: 5 / 3;
	}

	.product-page .product-layout {
		display: block;
		padding-top: 68px;
	}

	.product-gallery-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.product-gallery {
		display: flex;
		width: 100%;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.product-gallery::-webkit-scrollbar {
		display: none;
	}

	.product-media,
	.product-media.is-size-guide {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		min-height: 0;
		padding: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.product-media.is-size-guide {
		min-height: 0 !important;
		padding: clamp(1.25rem, 7vw, 2.75rem);
		background: #fafaf7;
	}

	.product-carousel-dots {
		position: absolute;
		left: 50%;
		bottom: 18px;
		z-index: 2;
		display: flex;
		gap: 8px;
		transform: translateX(-50%);
	}

	.product-carousel-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.95);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.45);
		box-shadow: none;
		appearance: none;
		cursor: pointer;
	}

	.product-carousel-dot.is-active {
		background: #fff;
	}

	.product-info-column {
		position: static;
		height: auto;
		min-height: 0;
		padding: 2.2rem 7vw 4rem;
		align-items: flex-start;
		overflow: visible;
	}

	.product-breadcrumb {
		margin-bottom: 0.45rem;
	}

	.product-title {
		font-size: clamp(1.75rem, 7vw, 2.35rem);
		line-height: 1.05;
		margin-bottom: 0;
	}

	.product-price {
		font-size: 1.05rem;
		margin-top: 0.2rem;
		margin-bottom: 0;
	}

	.product-info {
		width: 100%;
		margin-top: 0;
		padding-bottom: 0;
	}

	.product-options {
		flex-wrap: nowrap;
		gap: 0.45rem;
	}

	.product-tab-list {
		gap: 0.85rem;
	}

	.product-tab {
		font-size: 0.68rem;
		letter-spacing: 0.08em;
	}

	.product-option {
		flex: 1 1 0;
		min-width: 0;
	}

	.product-card-note-label,
	.product-card-note,
	.product-add-button {
		width: 100%;
	}

	.product-card-note {
		height: auto;
		min-height: 112px;
		padding: 0.85rem;
	}

	/* Keep the complete mobile intro visible on both short and tall phones. */
	@media screen and (max-height: 740px) {
		.product-title {
			font-size: clamp(1.6rem, 6.6vw, 2.05rem);
		}
	}

	.cart-drawer {
		width: min(94vw, 430px);
	}

	.cart-drawer-header,
	.cart-drawer-footer {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}

	.cart-drawer-items {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}

	.cart-drawer-item {
		grid-template-columns: 74px minmax(0, 1fr);
		gap: .8rem;
		height: 122px;
	}

	.cart-item-image {
		width: 74px;
		height: 92px;
	}

	.cart-page-main {
		padding: calc(68px + 2rem) 6vw 4rem;
		display: block;
	}

	.cart-page-heading {
		align-items: center;
	}

	.cart-page-heading h1 {
		font-size: 1.9rem;
	}

	.cart-page-heading>a {
		font-size: .64rem;
	}

	.cart-page-item {
		grid-template-columns: 86px minmax(0, 1fr);
		gap: .9rem;
		height: 142px;
	}

	.cart-page-item-image {
		width: 86px;
		height: 108px;
	}

	.cart-page-item-top h2 {
		font-size: 1rem;
	}

	.cart-page-item-bottom {
		margin-top: 1.2rem;
	}

	.cart-summary-panel {
		margin-top: 2.5rem;
	}
}

@media screen and (max-width: 736px) {
	.homepage #header-wrapper {
		height: 100svh !important;
		min-height: 100svh !important;
		max-height: 100svh !important;
	}

	.product-title {
		font-size: clamp(1.8rem, 8.3vw, 2.35rem);
	}

	.product-media,
	.product-media.is-size-guide {
		height: clamp(400px, 61svh, 425px);
	}
}

@media screen and (max-width: 480px) {
	.homepage #header-wrapper {
		height: 100svh !important;
		min-height: 100svh !important;
		max-height: 100svh !important;
	}

	.product-info-column {
		padding-left: 6vw;
		padding-right: 6vw;
	}

	.product-title {
		font-size: clamp(1.72rem, 8.4vw, 2.08rem);
	}

	.product-media,
	.product-media.is-size-guide {
		height: clamp(400px, 62svh, 420px);
	}
}

/* Tall/wide phones such as iPhone Pro-class screens: do not let the gallery consume the full first view. */
@media screen and (min-width: 400px) and (max-width: 780px) {

	.product-media,
	.product-media.is-size-guide {
		height: clamp(400px, 58svh, 420px);
	}
}

/* ==========================================================================
   POTLUCK BLOOMS PAGE
   ========================================================================== */

.potluck-page {
	background: var(--cream);
	color: var(--brown);
}

.potluck-page #header-wrapper {
	min-height: 82px;
	height: 82px;
	background: var(--cream);
}


.potluck-main {
	background: var(--cream);
}

/* Each chapter occupies one viewport below the desktop nav. */
.potluck-intro,
.potluck-inside,
.scenic-steps-section,
.potluck-gallery-section {
	height: auto;
	min-height: calc(100svh - 82px);
	box-sizing: border-box;
	scroll-margin-top: 82px;
}

.potluck-intro {
	position: relative;
	display: grid;
	place-items: center;
	padding: 5rem 6vw 8rem;
	text-align: center;
}

.potluck-intro-inner {
	max-width: 880px;
	transform: translateY(-1rem);
}

.potluck-intro h1,
.potluck-inside h2,
.potluck-kits h2,
.potluck-kits h3,
.scenic-steps-title,
.scenic-step h3,
.potluck-gallery-heading h2 {
	font-family: var(--serif);
	font-weight: 400;
	color: var(--brown);
}

.potluck-intro h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(58px, 6vw, 94px);
	line-height: .98;
	letter-spacing: -.035em;
	margin: 0 0 26px
}

.potluck-intro p {
	/* padding-top: 10px; */
	max-width: 560px;
	margin: 24px auto 0;
	font-size: var(--p-header-bloom-bar-font-size);
	line-height: 1.55;
	color: var(--walnut-husk);
	font-family: var(--sans);
}

.potluck-journey {
	position: absolute;
	left: 50%;
	bottom: clamp(28px, 5vw, 56px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
	font-weight: 700;
	color: var(--walnut-husk);
	border-bottom-color: transparent;
}

.potluck-journey i {
	width: 1px;
	height: 32px;
	background: currentColor;
	opacity: .5;
}

.potluck-journey:hover {
	color: var(--brown)
}

.potluck-inside {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
	align-items: center;
	align-content: center;
	gap: clamp(4rem, 7vw, 8rem);
	padding: clamp(3.5rem, 5vw, 5.5rem) 5.5vw;
	overflow: hidden;
}


.potluck-inside-image {
	width: 100%;
	height: min(72svh, 720px);
	overflow: visible;
}

.potluck-inside-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	width: 100%;
	display: block;
}

.potluck-inside-copy {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.potluck-inside-copy h2 {
	margin: 0 0 2rem;
	font-size: var(--h2-potluck-font-size);
	line-height: 1;
	font-style: italic;
	letter-spacing: -.035em;
}

.potluck-inside-copy p {
	margin: 0;
	font-size: var(--p-header-bloom-bar-font-size);
	line-height: 1.7;
}

/* Choose your kit is a full editorial spread. */
.potluck-kits {
	display: grid;
	grid-template-columns: minmax(190px, .42fr) minmax(0, 1.58fr);
	gap: clamp(2rem, 3.2vw, 4rem);
	align-items: center;
	align-content: center;
	height: auto;
	min-height: calc(100svh - 82px);
	box-sizing: border-box;
	scroll-margin-top: 82px;
	padding: clamp(2.6rem, 3.4vw, 3.5rem) 4vw clamp(3.6rem, 4.4vw, 4.8rem);
	overflow: visible;
}

.potluck-kits-intro {
	align-self: start;
	max-width: 300px;
}

.potluck-kits-intro h2 {
	margin: 0 0 2.2rem;
	font-size: var(--h2-potluck-font-size);
	line-height: .98;
	font-style: italic;
	letter-spacing: -.035em;
	padding-top: 10px;
}

.potluck-kits-intro p {
	margin: 0;
	/* font-size: clamp(0.9rem, 1vw, 1.2rem); */
	/* font-size: clamp(12.5px, 1vw, 14px) !important; */
	font-size: var(--p-header-bloom-bar-font-size);
	line-height: 1.55;
	font-weight: 100;
	color: var(--walnut-husk);
}

.potluck-kits-track {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.4vw, 2.6rem);
	align-items: stretch;
	min-width: 0;
}

.potluck-kit-card {
	min-width: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
}

.potluck-kit-image {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.potluck-kit-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.potluck-kit-card:hover .potluck-kit-image img {
	transform: scale(1.015);
}

.potluck-kit-copy {
	padding: 1.05rem .7rem 0;
	display: grid !important;
	grid-template-rows: auto auto auto auto 48px !important;
	/* grid-template-rows: minmax(2.7em, auto) minmax(3.9em, auto) minmax(1.55em, auto) minmax(1.55em, auto) auto; */
	align-content: start;
	height: 100%;
	row-gap: .55rem !important;
}

.potluck-kit-copy h3 {
	margin: 0 0 .45rem;
	font-size: clamp(1.8rem, 2vw, 2.3rem);
	line-height: 1;
}

.potluck-kit-copy>p:not(.potluck-kit-guests):not(.potluck-kit-price) {
	margin: 0 0 .55rem;
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.4;
	font-weight: 100;
	color: var(--walnut-husk);
}

.potluck-kit-guests,
.potluck-kit-price {
	margin: -0.82rem 0;
	font-family: var(--serif);
	/* font-style: italic; */
	font-size: 1.02rem;
	color: var(--brown);
	margin-top: .01rem;
}

.potluck-kit-button {
	align-self: start;
	justify-self: start;

	min-width: 170px;
	cursor: pointer;
}

.potluck-kit-button span {
	margin-left: .35rem;
}

/* How it works - scenic full-screen chapter. */
.scenic-steps-section {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	color: #fbf7ee;
	background: #5e5852;
}

.scenic-steps-media {
	position: absolute;
	inset: 0;
}

.scenic-steps-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(4.5px) saturate(.9);
	transform: scale(1.02);
}

.scenic-steps-overlay {
	position: absolute;
	inset: 0;
	background: rgba(97, 92, 86, 0.42);
}

.scenic-steps-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 80px) clamp(22px, 5vw, 72px);
}

.scenic-steps-eyebrow {
	display: block;
	margin-bottom: .5rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(251, 247, 238, .78);
}

.scenic-steps-title {
	font-size: var(--h2-font-size);
	font-style: italic;
	line-height: .95;
	letter-spacing: -.035em;
	color: #fbf7ee;
	margin: 6px 0 20px;
}

.scenic-steps-line {
	display: block;
	width: 100%;
	height: auto;
	margin: -38px 0 -56px;
}

.scenic-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.5vw, 32px);
}

.scenic-step {
	color: #fbf7ee;
	max-width: 260px;
}

.scenic-step b {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(26px, 2.6vw, 34px);
	color: #fbf7ee;
	margin-bottom: 8px;
}

.scenic-step h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.15;
	margin: 0 0 8px;
	color: #fbf7ee;
}

.scenic-step p {
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.55;
	color: var(--walnut-husk);
	margin: 0;
	max-width: 220px;
}

/* Sleek gallery: generous frame, tight image rhythm, shorter editorial tiles. */
.potluck-gallery-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 4vw, 4.25rem) clamp(4rem, 6vw, 7rem);
	overflow: hidden;
}

.potluck-gallery-heading {
	flex: 0 0 auto;
}

.potluck-gallery-heading p {
	margin: 0 0 .8rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #c08b22;
	padding-top: 20px;
}

.potluck-gallery-heading h2 {
	margin: 0 0 1.35rem;
	font-size: var(--h2-font-size);
	font-style: italic;
	line-height: .95;
	letter-spacing: -.035em;
	padding-top: 10px;
}

.potluck-gallery-grid {
	padding-top: 50px;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.16fr repeat(4, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 7px;
	height: min(59svh, 620px);
}

.potluck-gallery-grid figure {
	margin: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--cream);
}

.potluck-gallery-feature {
	grid-row: 1 / span 2;
}

.potluck-gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.potluck-gallery-toggle {
	display: none;
}

@media screen and (max-width: 1080px) {
	.potluck-inside {
		grid-template-columns: 1.2fr .85fr;
		gap: 3rem;
		padding-left: 4vw;
		padding-right: 4vw;
	}

	.potluck-inside-image {
		height: min(66svh, 640px);
	}

	.potluck-kits {
		grid-template-columns: .55fr repeat(2, 1fr);
		gap: 1.5rem;
		padding-left: 3vw;
		padding-right: 3vw;
	}

	.potluck-kit-copy {
		padding-left: .25rem;
		padding-right: .25rem;
	}

	.scenic-steps-line {
		margin-top: -22px;
		margin-bottom: -42px;
	}

	.scenic-steps-grid {
		gap: 1.6rem;
	}

	.potluck-gallery-section {
		padding-left: 4vw;
		padding-right: 4vw;
	}

	.potluck-gallery-grid {
		grid-template-columns: 1.15fr repeat(3, 1fr);
		grid-template-rows: repeat(3, minmax(0, 1fr));
		height: min(60svh, 600px);
	}

	.potluck-gallery-feature {
		grid-row: 1 / span 2;
	}
}

@media screen and (max-width: 820px) {
	.potluck-page #header-wrapper {
		height: 68px;
		min-height: 68px;
	}

	.potluck-intro,
	.potluck-inside,
	.potluck-kits,
	.scenic-steps-section,
	.potluck-gallery-section {
		height: auto;
		min-height: calc(100svh - 68px);
		scroll-margin-top: 68px;
	}

	.potluck-intro {
		height: calc(100svh - 68px);
		padding: 4rem 7vw 7rem;
	}

	.potluck-intro h1 {
		font-size: clamp(3.4rem, 4vw, 5.4rem);
		margin-bottom: 2rem;
	}

	.potluck-intro p {
		font-size: .98rem;
	}

	.potluck-desktop-break {
		display: none;
	}

	.potluck-journey {
		bottom: 2.5rem;
	}

	/* Anchor target remains visually centred on tablets and phones. */
	.potluck-inside {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		gap: clamp(1.5rem, 4svh, 2.2rem);
		padding: 3rem 7vw;
		text-align: center;
	}

	.potluck-inside-image {
		width: 100%;
		height: clamp(260px, 43svh, 430px);
	}

	.potluck-inside-copy {
		justify-content: center;
		text-align: center;
	}

	.potluck-inside-copy h2 {
		font-size: var(--h2-font-size);
		margin-bottom: 1rem;
	}

	.potluck-inside-copy p {
		font-size: .96rem;
		line-height: 1.55;
	}

	.potluck-kits {
		display: block;
		padding: 3rem 0 3.25rem;
		overflow: hidden;
	}

	.potluck-kits-intro {
		max-width: 520px;
		text-align: center;
		margin: 0 auto 2rem;
		padding: 0 6vw;
	}

	.potluck-kits-intro h2 {
		font-size: var(--h2-font-size);
		margin-bottom: .9rem;
	}

	.potluck-kits-intro p {
		font-size: .92rem;
	}

	.potluck-kits-track {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 6vw;
		padding: 0 6vw 1rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.potluck-kits-track::-webkit-scrollbar {
		display: none;
	}

	.potluck-kit-card {
		flex: 0 0 84%;
		scroll-snap-align: start;
		display: grid;
		grid-template-rows: auto 1fr;
		height: auto;
	}

	.potluck-kit-image {
		aspect-ratio: 1.12 / 1;
	}

	.potluck-kit-copy {
		padding: .9rem .15rem 0;
		grid-template-rows: 2.65em 4.35em 1.65em 1.65em 48px;
	}


	.potluck-kit-copy h3 {
		font-size: clamp(1.65rem, 6vw, 2.2rem);
		margin-bottom: .55rem;
	}

	.potluck-kit-copy>p:not(.potluck-kit-guests):not(.potluck-kit-price) {
		font-size: clamp(.82rem, 1.3vw, .9rem) !important;
		line-height: 1.4;
	}

	.potluck-kit-guests,
	.potluck-kit-price {
		font-size: .95rem;
	}

	.potluck-kit-button {
		min-width: 170px;
		width: auto;
		height: 48px;
		padding: 0 1.15rem;
		font-size: .64rem;
		align-self: stretch;
	}

	.scenic-steps-section {
		min-height: calc(100svh - 68px);
	}

	.scenic-steps-inner {
		min-height: calc(100svh - 68px);
		height: auto;
		padding: 3rem 6vw;
	}

	.scenic-steps-title {
		font-size: clamp(3.3rem, 12vw, 5rem);
		margin-bottom: 1rem;
	}

	.scenic-steps-line {
		display: none;
	}

	.scenic-steps-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 2.4rem;
	}

	.scenic-step {
		max-width: none;
	}

	.potluck-gallery-section {
		justify-content: center;
		padding: 3rem 5vw;
	}

	.potluck-gallery-heading {
		text-align: left;
	}

	.potluck-gallery-heading h2 {
		font-size: clamp(3rem, 11vw, 4.4rem);
		margin-bottom: 1.2rem;
	}

	.potluck-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		height: auto;
		gap: 6px;
	}

	.potluck-gallery-grid figure {
		aspect-ratio: .83 / 1;
	}

	.potluck-gallery-feature {
		grid-row: auto;
	}

	.potluck-gallery-grid figure:nth-child(n+5) {
		display: none;
	}

	.potluck-gallery-grid.is-expanded figure:nth-child(n+5) {
		display: block;
	}

	.potluck-gallery-toggle {
		display: grid;
		place-items: center;
		width: 58px;
		height: 58px;
		margin: 1.6rem auto 0;
		border: 0;
		border-radius: 50%;
		background: rgba(84, 37, 15, .1);
		color: #54250f;
		font-size: 2rem;
		font-weight: 300;
		line-height: 1;
		cursor: pointer;
		transition: transform .25s ease, background .25s ease;
	}

	.potluck-gallery-toggle[aria-expanded="true"] {
		transform: rotate(45deg);
		background: rgba(84, 37, 15, .16);
	}
}

@media screen and (max-width: 600px) {

	/* One clear kit at a time, with the next card peeking in. */
	.potluck-kits-intro {
		margin-bottom: 1.6rem;
	}

	.potluck-kits-track {
		gap: .85rem;
		scroll-padding-left: 5vw;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.potluck-kit-card {
		flex-basis: 86%;
	}

	.potluck-kit-image {
		aspect-ratio: 1.06 / 1;
	}

	.potluck-kit-copy h3 {
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	.potluck-kit-copy>p:not(.potluck-kit-guests):not(.potluck-kit-price) {
		font-size: clamp(.82rem, 1.3vw, .9rem) !important;
	}

	.potluck-kit-guests,
	.potluck-kit-price {
		font-size: .9rem;
	}

	.scenic-steps-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.scenic-step {
		display: grid;
		grid-template-columns: 46px 1fr;
		column-gap: .75rem;
	}

	.scenic-step b {
		grid-row: 1 / span 2;
	}

	.scenic-step h3 {
		margin-top: .15rem;
	}

	.scenic-step p {
		max-width: 100%;
	}

	.potluck-gallery-section {
		padding-top: 3.25rem;
		padding-bottom: 3.25rem;
	}

	.potluck-gallery-grid figure {
		aspect-ratio: .78 / 1;
	}
}

@media screen and (max-width: 480px) {
	.potluck-intro {
		padding-left: 8vw;
		padding-right: 8vw;
	}

	.potluck-intro h1 {
		font-size: clamp(3.05rem, 11vw, 4.2rem);
	}

	.potluck-intro p {
		font-size: .92rem;
		line-height: 1.5;
	}

	.potluck-inside {
		padding-left: 6vw;
		padding-right: 6vw;
	}

	.potluck-kits {
		padding-left: 3.5vw;
		padding-right: 3.5vw;
	}

	.potluck-gallery-section {
		padding-left: 4vw;
		padding-right: 4vw;
	}

	.potluck-gallery-grid {
		gap: 5px;
	}
}


/* Potluck interaction refinements - kit carousel + gallery lightbox */
@media screen and (max-width: 820px) {
	.potluck-kits {
		overflow: visible;
	}

	.potluck-kits-track {
		align-items: stretch;
		touch-action: pan-x pan-y;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
	}

	.potluck-kits-track:active {
		cursor: grabbing;
	}

	.potluck-kit-card {
		align-self: stretch;
		height: auto;
	}

	.potluck-kit-copy {
		height: 100%;
		/* grid-template-rows: 2.65em 4.35em 1.65em 1.65em 48px; */
		/* } */
		/* .potluck-kit-copy { */
		display: grid !important;
		grid-template-rows: auto auto auto auto 48px !important;
		row-gap: .55rem !important;
		align-content: start !important;
	}

	.potluck-kit-copy h3 {
		min-height: 1.15em;
	}

	.potluck-kit-copy>p:not(.potluck-kit-guests):not(.potluck-kit-price) {
		min-height: 3.55em;
	}

	.potluck-kit-guests {
		min-height: 1.5em;
	}

	.potluck-kit-price {
		min-height: 1.5em;
	}

	.potluck-kit-button {
		margin-top: 0;
		align-self: stretch;
	}
}

.potluck-gallery-grid figure {
	cursor: zoom-in;
}

.potluck-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(20, 16, 12, .91);
	padding: clamp(18px, 3vw, 48px);
}

.potluck-lightbox.is-open {
	display: flex;
}

.potluck-lightbox-stage {
	position: relative;
	width: min(84vw, 1320px);
	height: min(86vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.potluck-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.potluck-lightbox-close,
.potluck-lightbox-arrow {
	position: fixed;
	z-index: 2;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-weight: 300;
}

.potluck-lightbox-close {
	top: 18px;
	right: 24px;
	font-size: 2.25rem;
	line-height: 1;
	padding: .35rem;
}

.potluck-lightbox-arrow {
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	line-height: 1;
	padding: 1rem;
}

.potluck-lightbox-prev {
	left: 18px;
}

.potluck-lightbox-next {
	right: 18px;
}

.potluck-lightbox-count {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .82);
	font-size: .72rem;
	letter-spacing: .16em;
}

body.potluck-lightbox-open {
	overflow: hidden !important;
}

@media screen and (max-width: 820px) {
	.potluck-lightbox {
		padding: 16px;
	}

	.potluck-lightbox-stage {
		width: 100%;
		height: 78vh;
	}

	.potluck-lightbox-close {
		top: 10px;
		right: 10px;
		font-size: 2rem;
	}

	.potluck-lightbox-arrow {
		font-size: 2.4rem;
		padding: .7rem;
	}

	.potluck-lightbox-prev {
		left: 2px;
	}

	.potluck-lightbox-next {
		right: 2px;
	}
}

/* Potluck gallery remains clickable without a magnifying-glass cursor. */
.potluck-gallery-grid figure,
.potluck-gallery-grid img {
	cursor: pointer !important;
}

/* Bloom Bar editorial full-screen build */

/* ==========================================================================
   BLOOM BAR PAGE
   ========================================================================== */
.bloom-bar-page {
	background: var(--cream);
	color: var(--brown);
}

.bloom-bar-page #header-wrapper {
	min-height: 82px;
	height: 82px;
	background: var(--cream) !important;
	background-image: none !important;
}

.bloom-bar-page #header-wrapper::before,
.bloom-bar-page #header-wrapper::after {
	display: none !important;
	content: none !important;
}


.bloom-bar-page main {
	background: var(--cream);
}

.bloom-bar-page .bloom-section {
	height: calc(100svh - 82px);
	min-height: 620px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	scroll-margin-top: 82px;
}

.bloom-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5rem 5vw;
	background: var(--cream);
	background-image: none !important;
}

.bloom-hero-inner h1 {
	font-family: var(--serif);
	font-size: clamp(58px, 6vw, 94px);
	letter-spacing: -.035em;
	font-style: italic;
	font-weight: 400;
	line-height: .95;
	margin: 0 0 2.2rem;
	color: var(--brown);
	padding-top: 15px;
}



.bloom-hero-inner p {
	padding-top: 10px;
	max-width: 560px;
	margin: 16px auto 0;
	font-size: var(--p-header-bloom-bar-font-size);
	line-height: 1.55;
	color: var(--walnut-husk);
	font-family: var(--sans);
	padding-bottom: 10px;
}


.bloom-button {
	letter-spacing: .16em;
	padding: 0.6rem 1.8rem;
}

.bloom-journey {
	position: absolute;
	left: 50%;
	bottom: clamp(28px, 5vw, 56px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .65rem;
	color: var(--walnut-husk);
	font-weight: 700;
	border-bottom: none;
}

.bloom-journey:after {
	content: "";
	display: block;
	width: 0.5px;
	height: 32px;
	background: currentColor;
	margin: 0.5rem auto 0;
}


.bloom-journey:hover {
	color: var(--brown)
}

/* Pricing - exactly one desktop viewport, all cards equal. */
.bloom-pricing {
	display: flex;
	align-items: center;
	padding: clamp(2rem, 3vw, 3rem) 4.5vw;
	background: var(--cream);
}

.bloom-pricing-wrap {
	width: 100%;
}

.bloom-eyebrow {
	text-transform: uppercase;
	letter-spacing: .25em;
	color: var(--gold);
	font-weight: 700;
	font-size: .7rem;
}

.bloom-pricing h2,
.bloom-gallery h2 {
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--h2-font-size);
	font-weight: 400;
	line-height: 1;
	margin: 1rem 0 1rem;
	color: var(--brown);
	padding-bottom: 10px;
}

.bloom-pricing-intro {
	font-size: .85rem;
	line-height: 1.4;
	margin: 0 0 1rem;
	max-width: 1500px;
	padding-bottom: 5px;
}

.bloom-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: stretch;
}

.bloom-tier {
	background: #f5ead6;
	padding: .65rem;
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
}

.bloom-tier-inner {
	border: 1px solid #dccdb7;
	padding: clamp(1.45rem, 2vw, 2.25rem);
	width: 100%;
	height: 100%;
	min-height: 310px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.bloom-tier h3 {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.65rem, 2vw, 2rem);
	margin: 0 0 .4rem;
	color: var(--brown);
}

.bloom-tier-price,
.bloom-tier-label {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .72rem !important;
	line-height: 1.4 !important;
	font-weight: 700;
}

.bloom-tier hr {
	border: 0;
	border-top: 1px solid #d7c6ae;
	margin: 1.1rem 0;
	width: 100%;
}

.bloom-tier p,
.bloom-tier li {
	font-size: .88rem;
	line-height: 1.5;
}

.bloom-tier ul {
	list-style-type: square;
	padding-left: 15px;
	margin: .34rem 0 .8rem;
	text-indent: -7px;
	font-size: 0.15rem;
}

.bloom-stem-count {
	margin-top: auto;
	padding-top: .6rem;
}

/* Booking CTA - full-bleed blurred image chapter. */
.booking-cta-section {
	position: relative;
	color: #fff;
	display: flex;
	align-items: stretch;
	background: #5e5852;
}

.booking-cta-media {
	position: absolute;
	inset: 0;
}

.booking-cta-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(3px) saturate(.9);
	transform: scale(1.015);
}

.booking-cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(97, 92, 86, .42);
}

.booking-cta-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 5vw, 5.5rem) 4.5vw;
	box-sizing: border-box;
}

.booking-cta-inner h2 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--h2-font-size);
	line-height: .95;
	margin: 0;
	color: #fff;
}

.bloom-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4vw;
	margin: 3rem 0 4rem;
}

.bloom-fact h3 {
	font-family: var(--serif);
	font-style: italic;
	color: #fff;
	font-size: 1.25rem;
	margin-bottom: .55rem;
}

.bloom-fact p {
	font-size: clamp(12.5px, 1vw, 14px) !important;
	color: rgba(255, 255, 255, .9);
	line-height: 1.45;
}

.bloom-enquiry {
	border-top: 1px solid rgba(255, 255, 255, .35);
	padding-top: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

.bloom-enquiry-copy h3 {
	font-family: var(--serif);
	font-style: italic;
	color: #fff;
	font-size: clamp(25px, 2vw, 35px);
	font-weight: 400;
	max-width: 650px;
	line-height: 1.35;
}

.bloom-enquiry-copy p {
	max-width: 760px;
	font-size: clamp(12.5px, 1vw, 14px) !important;
	color: rgba(255, 255, 255, .9);
}


@media screen and (max-width:1280px) {
	.bloom-pricing {
		padding-left: 3.5vw;
		padding-right: 3.5vw;
	}

	.bloom-tier-grid {
		gap: 1.5rem;
	}

	.bloom-tier-inner {
		min-height: 320px;
		padding: 1.7rem;
	}
}

@media screen and (max-width:1080px) {
	.bloom-bar-page .bloom-section {
		height: auto;
		min-height: calc(100svh - 82px);
	}

	.bloom-tier-inner {
		min-height: 300px;
	}
}

@media screen and (max-width:820px) {

	body.product-page .product-best-for {
		margin-top: .8rem !important;
		padding-top: .75rem !important;
	}

	body.product-page .product-best-for h2 {
		margin-bottom: .8rem !important;
	}

	body.product-page .product-best-for-row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 14px !important;
		margin: 0 0 18px !important;
		padding: 0 !important;
		border: 0 !important;
	}

	body.product-page .product-best-for-row:last-child {
		margin-bottom: 0 !important;
	}

	body.product-page .product-best-for-copy {
		display: block !important;
		min-width: 0 !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	body.product-page .product-best-for-copy strong {
		display: block !important;
		margin: 0 0 3px !important;
		font-size: 13px !important;
		line-height: 1.2 !important;
		letter-spacing: .08em !important;
	}

	body.product-page .product-best-for-copy>span {
		display: block !important;
		color: #756f68 !important;
	}

	body.product-page .product-best-for-arrow {
		display: block !important;
		font-size: 18px !important;
	}

	body.product-page .product-contact-actions {
		width: 100% !important;
		margin-top: 26px !important;
		margin-bottom: 28px !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 10px !important;
	}

	body.product-page .product-contact-actions a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 11px 16px !important;
		margin: 0 !important;
		border: 1px solid var(--brown) !important;
		border-radius: 0 !important;
		background: var(--brown) !important;
		color: #fff !important;
		font-family: var(--sans) !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		letter-spacing: .11em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		white-space: nowrap !important;
	}

	body.product-page .product-contact-actions a:hover {
		background: transparent !important;
		color: var(--brown) !important;
		border-color: var(--brown) !important;
	}

	.bloom-bar-page #header-wrapper {
		height: 68px;
		min-height: 68px;
	}

	.bloom-bar-page .bloom-section {
		height: auto;
		min-height: calc(100svh - 68px);
		scroll-margin-top: 68px;
	}

	.bloom-hero {
		padding: 4rem 7vw 5.5rem;
	}

	.bloom-hero-inner h1 {
		font-size: clamp(4rem, 17vw, 6rem);
	}

	.bloom-pricing {
		padding: 3rem 0 3.5rem;
		overflow: hidden;
	}

	.bloom-pricing-wrap>.bloom-eyebrow,
	.bloom-pricing-wrap>h2,
	.bloom-pricing-wrap>.bloom-pricing-intro {
		margin-left: 7vw;
		margin-right: 7vw;
	}

	.bloom-tier-grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 7vw;
		padding: 0 7vw .75rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bloom-tier-grid::-webkit-scrollbar {
		display: none;
	}

	.bloom-tier {
		flex: 0 0 84%;
		height: auto;
		min-height: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		padding: .55rem;
	}

	.bloom-tier-inner {
		min-height: 390px;
		height: 100%;
		padding: 1.8rem;
	}

	.booking-cta-inner {
		min-height: calc(100svh - 68px);
		padding: 3rem 7vw;
	}

	.booking-cta-inner>h2 {
		font-size: 3.3rem;
	}

	.bloom-facts {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin: 2rem 0;
	}

	.bloom-enquiry {
		align-items: flex-start;
		flex-direction: column;
	}

}

@media screen and (max-width:480px) {

	body.product-page .product-best-for-row {
		margin-bottom: 15px !important;
	}

	body.product-page .product-best-for-copy,
	body.product-page .product-best-for-copy strong {
		font-size: 12.5px !important;
	}

	body.product-page .product-best-for-arrow {
		font-size: 17px !important;
	}

	.bloom-facts {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.booking-cta-inner h2 {
		font-size: var(--h2-font-size-480);
	}
}

/* ================================================================
   Homepage editorial offerings
   ================================================================ */
.homepage .home-hero {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.homepage .home-hero #hero {
	padding: 0;
}



.home-offerings-section {
	background: var(--cream);
	color: var(--walnut-husk);
	box-sizing: border-box;
}

/* Intro stays editorial and airy. */
.home-offerings-intro {
	width: min(1580px, 100%);
	margin: 0 auto;
	padding: clamp(3.8rem, 7vh, 6.2rem) clamp(3rem, 5vw, 5.5rem) clamp(3.2rem, 5.5vh, 5rem);
	display: grid;
	grid-template-columns: minmax(260px, .9fr) minmax(420px, 1fr);
	align-items: start;
	gap: clamp(4rem, 9vw, 10rem);
}

.home-offerings-intro h2 {
	font-family: var(--serif, Georgia, serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.6rem, 3.8vw, 4.5rem);
	line-height: .98;
	letter-spacing: -.04em;
	margin: 0;
	color: var(--brown);
}

.home-offerings-copy {
	max-width: 650px;
}

.home-offerings-copy p {
	font-size: clamp(.88rem, 1vw, 1.02rem);
	line-height: 1.48;
	margin: 0 0 1rem;
	color: var(--walnut-husk);
}

.home-offerings-copy p:last-child {
	margin-bottom: 0;
}

/* Three full-bleed offering panels, matching the supplied desktop reference. */
.home-offerings-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.home-offering-card {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important;
}



.home-offering-card figure {
	margin: 0;
	width: 100%;
	height: clamp(300px, 40vh, 430px);
	overflow: hidden;
	background: #d9d1c5;
}

.home-offering-card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;

	transform: scale(1);
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.7s ease;
}

.home-offering-card:hover figure img {
	transform: scale(1.06);
}



.home-offering-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 12, 8, .58) 0%, rgba(18, 12, 8, .17) 42%, rgba(18, 12, 8, 0) 72%);
	pointer-events: none;
}


.home-offering-meta {
	position: absolute;
	z-index: 2;
	left: clamp(1.7rem, 2.3vw, 2.8rem);
	right: clamp(1.7rem, 2.3vw, 2.8rem);
	bottom: clamp(1.5rem, 2.3vw, 2.5rem);
	color: #fff;
}

.home-offering-meta h3 {
	font-family: var(--serif, Georgia, serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 2.7vw, 3.25rem);
	line-height: 1;
	margin: 0 0 .18rem;
	color: #fff;
}

.home-offering-meta p {
	max-width: 500px;
	font-size: clamp(.78rem, .9vw, .96rem);
	line-height: 1.42;
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, .94);
}

.home-offering-meta span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: .72rem 1rem;
	border: 1px solid rgba(255, 255, 255, .82);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
	background: transparent;
	transition: color .2s ease, border-color .2s ease;
}

.home-offering-card:hover .home-offering-meta span {
	color: var(--gold);
	border-color: var(--gold);
}


@media screen and (min-width:821px) and (min-height:680px) {
	.home-offerings-section {
		height: calc(100svh - 72px);
		min-height: 620px;
		display: grid;
		grid-template-rows: minmax(250px, 38%) minmax(0, 62%);
		overflow: hidden;
	}

	.home-offerings-grid {
		min-height: 0;
	}

	.home-offering-card,
	.home-offering-card figure {
		height: 100%;
		min-height: 0;
	}
}


@media screen and (min-width:821px) and (max-width:1180px) {
	.home-offerings-section {
		height: calc(100svh - 72px);
		min-height: 600px;
		grid-template-rows: minmax(240px, 40%) minmax(0, 60%);
	}

	.home-offerings-intro {
		padding-top: clamp(3rem, 6vh, 4.5rem);
		padding-bottom: clamp(2.5rem, 4.5vh, 3.8rem);
	}

	.home-offerings-intro h2 {
		font-size: clamp(2.4rem, 4vw, 3.4rem);
	}

	.home-offering-meta h3 {
		font-size: clamp(1.65rem, 2.8vw, 2.4rem);
	}

	.home-offering-meta p {
		font-size: clamp(.72rem, 1.05vw, .86rem);
		line-height: 1.35;
	}
}

@media screen and (max-width:1080px) and (min-width:821px) {
	.home-offerings-intro {
		padding-left: 5vw;
		padding-right: 5vw;
		gap: 3.5rem;
	}

	.home-offerings-intro h2 {
		font-size: clamp(2.35rem, 4vw, 3.5rem);
	}
}

/* Mobile: keep the vertical image rows, but put all words over each image. */
@media screen and (max-width:820px) {
	.home-offerings-section {
		padding: 0 0 4rem;
	}

	.home-offerings-intro {
		display: block;
		width: auto;
		/* Match the 82% centred offering cards: 9% margin on each side. */
		padding: 3.4rem 9vw 3.7rem;
	}

	.home-offerings-intro h2 {
		font-size: clamp(2.15rem, 9vw, 3.2rem);
		margin-bottom: 1.3rem;
	}

	.home-offerings-copy {
		max-width: 32rem;
	}

	.home-offerings-copy p {
		font-size: .88rem;
		line-height: 1.5;
	}

	.home-offerings-grid {
		display: block;
		width: 100%;
	}

	.home-offering-card {
		width: 82%;
		margin: 0 auto clamp(4rem, 14vw, 6rem);
	}

	.home-offering-card:last-child {
		margin-bottom: 0;
	}

	.home-offering-card figure {
		width: 100%;
		height: auto;
		aspect-ratio: 1.48 / 1;
		margin: 0;
	}

	.home-offering-card::after {
		background: linear-gradient(to top, rgba(18, 12, 8, .65) 0%, rgba(18, 12, 8, .2) 48%, rgba(18, 12, 8, 0) 76%);
	}

	.home-offering-meta {
		left: 1.35rem;
		right: 1.35rem;
		bottom: 1.35rem;
	}

	.home-offering-meta h3 {
		font-size: clamp(1.8rem, 7vw, 2.45rem);
		margin-bottom: .45rem;
	}

	.home-offering-meta p {
		font-size: .8rem;
		line-height: 1.38;
		margin-bottom: .75rem;
		max-width: 25rem;
	}

	.home-offering-meta span {
		font-size: .61rem;
	}
}

@media screen and (max-width:480px) {
	.home-offerings-intro {
		padding-left: 9vw;
		padding-right: 9vw;
	}

	.home-offering-card {
		width: 84%;
		margin-bottom: 4.3rem;
	}

	.home-offering-card figure {
		aspect-ratio: 1.48 / 1;
	}
}


/* However you gather - desktop/tablet alignment refinement */
@media screen and (min-width:821px) {
	.home-offerings-intro {
		align-items: center;
	}

	.home-offerings-copy {
		align-self: center;
		margin-left: auto;
		width: min(100%, 650px);
		padding-left: clamp(3rem, 6vw, 7rem);
	}

	.home-offerings-intro h2 {
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Flowers page - desktop refinement */
@media screen and (min-width: 821px) {
	.flowers-content {
		padding-top: clamp(2.6rem, 4vw, 4rem);
		padding-bottom: clamp(2.6rem, 4vw, 4rem);
	}

	.flower-section,
	.flowers-section,
	.product-section {
		margin-bottom: clamp(2.1rem, 3vw, 3.2rem);
		padding-bottom: 0;
	}

	.flower-section+.flower-section,
	.flowers-section+.flowers-section,
	.product-section+.product-section {
		margin-top: 0;
	}

	.flowers-grid,
	.product-grid {
		margin-bottom: 0;
	}

	.flower-card img,
	.product-card img,
	.flowers-grid img {
		aspect-ratio: 1.68 / 1;
		object-fit: cover;
	}

	/* Refine spacing between Best For and Size */
	body.product-page .product-best-for {
		margin-top: clamp(10px, 1.25vh, 14px) !important;
		margin-bottom: clamp(8px, 1vh, 12px) !important;
	}


	/* Give the gift-message text more breathing room above its underline */
	body.product-page .product-note-row textarea,
	body.product-page .product-note-row input {
		padding-bottom: 7px !important;
	}
}

/* Solid navbar treatment */
.site-header,
.navbar,
#header {
	border-bottom: 0 !important;
	box-shadow: none;
}

.site-header.is-solid,
.navbar.is-solid,
#header.is-solid,
body:not(.home) .site-header,
body:not(.home) .navbar {
	background: #fbf7ee;
}

.nav-wordmark {
	display: block;
	width: auto;
	height: clamp(34px, 3.1vw, 48px);
	object-fit: contain;
}

@media screen and (max-width:820px) {
	.nav-wordmark {
		height: 34px;
	}
}


/* Homepage hero copy */
.homepage #hero .home-hero-copy {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 4vw, 4.8rem);
	padding: 0 clamp(2rem, 7vw, 8rem);
	color: #fff;
	pointer-events: none;
	z-index: 2;
	text-shadow: 0 2px 16px rgba(34, 19, 11, .28), 0 1px 3px rgba(34, 19, 11, .22);
}

.homepage #hero .home-hero-copy h1 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(30px, 2.5vw, 50px);
	font-style: italic;
	font-weight: 650;
	line-height: .88;
	letter-spacing: .005em;
	color: inherit;
	/* text-transform: uppercase; */
	/* text-shadow: 0 2px 14px rgba(34, 19, 11, .34), 0 1px 3px rgba(34, 19, 11, .28); */
	text-shadow:
		0 2px 10px rgba(34, 19, 11, .55),
		0 1px 3px rgba(34, 19, 11, .50);
}


@media screen and (max-width:820px) {
	.homepage #hero .home-hero-copy {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .9rem;
		padding: 0 7vw;
		text-align: center;
	}

}

/* ==========================================================================
   SOFT IMAGE LOADING — LOAD-DRIVEN, SITE-WIDE
   - Images already visible on first entry / refresh soften in as they load.
   - Images reached later while still loading stay softly blurred, then resolve.
   - No animation is triggered merely by scrolling into view.
   - Includes photographic background images such as Flowers/Occasions heroes
     and catalogue product thumbnails.
   ========================================================================== */

/* Initial document images are softened before JS runs. Dynamic/lazy images use
   .dontcha-image-loading until their real file has finished loading. */
body.is-preload img:not(.dontcha-no-soft-load),
img.dontcha-image-loading {
	opacity: 0 !important;
	filter: blur(5px);
	transform: scale(1.008);
}

img:not(.dontcha-no-soft-load) {
	transition:
		opacity .52s cubic-bezier(.22, .61, .36, 1),
		filter .62s cubic-bezier(.22, .61, .36, 1),
		transform .72s cubic-bezier(.22, .61, .36, 1);
}

img.dontcha-image-ready {
	opacity: 1 !important;
	filter: blur(0) !important;
	transform: scale(1) !important;
}

/* Background-photo surfaces need their own load state because they are not
   <img> elements. Do not animate transform here because product cards already
   use transform for hover styling. */
[data-bg-img],
.product-card-image {
	transition:
		opacity .52s cubic-bezier(.22, .61, .36, 1),
		filter .62s cubic-bezier(.22, .61, .36, 1);
}

body.is-preload [data-bg-img],
body.is-preload .product-card-image,
.dontcha-bg-loading {
	opacity: 0 !important;
	filter: blur(5px);
}

.dontcha-bg-ready {
	opacity: 1 !important;
	filter: blur(0) !important;
}

/* Keep the shared navigation above any hero fade treatment. */
.homepage #header-wrapper>#header,
.flowers-page #header-wrapper>#header,
.occasions-page #header-wrapper>#header {
	position: relative;
	z-index: 20;
}

@media (prefers-reduced-motion: reduce) {

	body.is-preload img:not(.dontcha-no-soft-load),
	img.dontcha-image-loading,
	img.dontcha-image-ready,
	body.is-preload [data-bg-img],
	body.is-preload .product-card-image,
	.dontcha-bg-loading,
	.dontcha-bg-ready {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}
}



/* ==========================================================================
   PRODUCT DETAIL - EDITORIAL TWO-PART LAYOUT
   Section 1: gallery + purchase information. Section 2: included/delivery/care.
   ========================================================================== */
.product-page {
	background: var(--cream);
}

.product-page .product-layout {
	display: block;
	padding-top: 82px;
	background: var(--cream);
}

.product-primary-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
	height: calc(100svh - 82px);
	min-height: 650px;
	background: #fbf7ee;
}

.product-gallery-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	background: #f0ece5;
}

.product-gallery {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	background: #f0ece5;
}

.product-gallery::-webkit-scrollbar {
	display: none;
}

.product-media,
.product-media.is-size-guide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-height: 0 !important;
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #f0ece5;
}

.product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-media.is-size-guide {
	padding: clamp(2rem, 5vw, 5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafaf7;
}

.product-media.is-size-guide img {
	object-fit: contain;
}

.product-carousel-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(251, 247, 238, .82);
	color: #2a241f;
	font: 300 28px/1 Georgia, serif;
	box-shadow: none;
	transform: translateY(-50%);
	cursor: pointer;
}

.product-carousel-arrow.is-prev {
	left: 20px;
}

.product-carousel-arrow.is-next {
	right: 20px;
}

.product-carousel-dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 4;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.product-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .95);
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	box-shadow: none;
}

.product-carousel-dot.is-active {
	background: #fff;
}

.product-info-column {
	position: static;
	height: 100%;
	min-height: 0;
	padding: clamp(2.4rem, 5vh, 4.5rem) clamp(3rem, 6vw, 7rem);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	background: #fbf7ee;
}

.product-info {
	width: min(100%, 520px);
	margin: 0;
	padding: 0;
	text-align: left;
	color: #28241f;
}

.product-price {
	padding-top: 0px;
	margin: 0 0 1.15rem;
	font-family: var(--serif);
	font-size: clamp(1.55rem, 2vw, 2rem);
	color: var(--brown);
}

.product-intro-description {
	max-width: 430px;
	margin: 0 0 1.9rem;
	font-size: .92rem;
	line-height: 1.65;
	color: var(--walnut-husk);
}

.product-option-row {
	display: grid;
	grid-template-columns: 72px 1fr;
	align-items: stretch;
	margin: 0 0 1.65rem;
	border: 1px solid #d7d0c5;
}



.product-options.has-error {
	outline: 1px solid #9f4b3f;
}

.product-note-row {
	margin-top: .2rem;
}


.product-card-note-label {
	display: block;
	width: min(100%, 420px);
	margin: 1.15rem auto 0.55rem;
	text-align: left;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--brown);
}

.product-card-note-label {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.product-card-note-label span {
	float: none;
	font-size: inherit;
	font-weight: 600;
	color: #82796e;
}


.product-card-note {
	border-radius: 0;
	display: block;
	width: 100%;
	height: 54px;
	min-height: 54px;
	margin: 0 0 1rem;
	padding: .8rem 0;
	resize: vertical;
	border: 0;
	border-bottom: 1px solid #8f877c;
	background: transparent;
	color: var(--walnut-husk);
	font: inherit;
	box-shadow: none;
	font-size: .8rem;
}

.product-card-note:focus {
	border-color: #28241f;
	outline: none;
}

.product-validation {
	margin: -.45rem 0 .7rem;
	font-size: .72rem;
	color: #9f4b3f;
}

.product-validation:empty {
	display: none;
}

/* Gift message — keep fixed height but allow scrolling */
body.product-page textarea.product-card-note {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	resize: none !important;
}

/* Legacy first-screen/tabs are no longer used by the redesigned product markup. */

@media screen and (max-width: 1080px) {
	.product-primary-section {
		grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
		min-height: 600px;
	}

	.product-info-column {
		padding: 2.4rem 4vw;
	}

	.product-title {
		font-size: clamp(2.7rem, 5vw, 4.5rem);
	}

	.product-intro-description {
		font-size: .68rem;
		line-height: 1.55;
	}
}

@media screen and (max-width: 820px) {
	.product-page .product-layout {
		padding-top: 68px;
	}

	.product-primary-section {
		display: block;
		height: auto;
		min-height: 0;
	}

	.product-gallery-wrap {
		height: clamp(430px, 58svh, 560px);
	}

	.product-gallery,
	.product-media,
	.product-media.is-size-guide {
		height: 100% !important;
		min-height: 0 !important;
	}

	.product-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-media.is-size-guide {
		padding: 1.5rem;
	}

	.product-carousel-arrow {
		width: 36px;
		height: 36px;
		font-size: 23px;
	}

	.product-carousel-arrow.is-prev {
		left: 12px;
	}

	.product-carousel-arrow.is-next {
		right: 12px;
	}

	.product-info-column {
		height: auto;
		padding: 2.6rem 7vw 3.5rem;
		display: block;
		overflow: visible;
	}

	.product-info {
		width: 100%;
	}

	.product-breadcrumb {
		margin-bottom: .8rem;
	}

	.product-title {
		font-size: clamp(2.3rem, 10vw, 3.7rem);
		line-height: .95;
	}

	.product-price {
		margin-bottom: 1.15rem;
		font-size: 1.35rem;
	}

	.product-intro-description {
		margin-bottom: 1.5rem;
		font-size: .88rem;
	}

	.product-option-row {
		grid-template-columns: 64px 1fr;
	}

	.product-option {
		padding: .9rem .4rem;
	}

	.product-add-button {
		width: 100%;
	}

	.product-aftercare {
		grid-template-columns: 1fr;
	}

	.product-aftercare-block {
		min-height: 0;
		padding: 3.2rem 7vw;
		border-right: 0;
		border-bottom: 1px solid #ddd5c9;
	}

	.product-aftercare-block:last-child {
		border-bottom: 0;
	}

	.product-aftercare-kicker {
		margin-bottom: 1.4rem;
	}
}

@media screen and (max-width: 480px) {
	.product-gallery-wrap {
		height: clamp(390px, 55svh, 500px);
	}

	.product-info-column {
		padding-left: 6vw;
		padding-right: 6vw;
	}

	.product-title {
		font-size: clamp(2.1rem, 10.5vw, 3.2rem);
	}
}

.product-title span {
	display: block
}

.product-price {
	margin: 0 0 1.35rem;
	font-size: clamp(1.18rem, 1.4vw, 1.45rem);
	line-height: 1.1
}

.product-option-row {
	display: block;
	margin: 0 0 1.15rem;
	border: 0
}

.product-option:first-child {
	padding-left: 0;
	border-left: 0
}

.product-options.has-error {
	outline: 0
}

.product-options.has-error .product-option {
	color: #9f4b3f
}

@media screen and (max-width:1080px) {
	.product-title {
		font-size: clamp(2.65rem, 5.2vw, 4.5rem)
	}

	.product-price {
		font-size: 1.2rem
	}
}

@media screen and (max-width:820px) {
	.product-breadcrumb {
		margin-bottom: .72rem
	}

	.product-title {
		margin-bottom: .85rem;
		font-size: clamp(2.25rem, 10vw, 3.35rem);
		line-height: .87
	}

	.product-price {
		margin-bottom: 1.1rem;
		font-size: 1.12rem
	}


	.product-option {
		padding: .08rem 1rem;
		font-size: .84rem
	}
}

@media screen and (max-width:480px) {
	.product-title {
		font-size: clamp(2rem, 10.5vw, 2.9rem)
	}

	.product-option {
		padding-left: .85rem;
		padding-right: .85rem
	}
}

@media screen and (max-width: 820px) {
	.product-option-row {
		display: block;
		border: 0;
	}

	.product-options {
		display: flex;
		gap: 8px;
	}

	.product-option,
	.product-option:first-child {
		flex: 1 1 0;
		min-width: 0;
		min-height: 50px;
		padding: .7rem .5rem;
		border: 1px solid #cfc7bb;
		background: transparent !important;
	}

	.product-option.is-selected {
		border-color: var(--brown);
		background: transparent !important;
	}
}


.product-option-row {
	display: block !important;
	border: 0 !important;
	background: transparent !important;
}



.product-option,
.product-option:first-child {
	border: 1px solid #c9c1b6 !important;
	background: transparent !important;
	box-shadow: none !important;
}

@media screen and (max-width:820px) {

	/* Mobile remains a carousel. */
	.product-primary-section {
		display: block !important;
	}

	.product-gallery-wrap {
		overflow: hidden !important;
	}

	.product-gallery {
		display: flex !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
	}

	.product-media {
		flex: 0 0 100% !important;
		width: 100% !important;
		scroll-snap-align: center !important;
	}

	.product-title {
		line-height: .95 !important;
		/* letter-spacing: 0 !important; */
	}

	.product-option-row {
		display: block !important;
		border: 0 !important;
	}

	.product-option-label {
		display: block !important;
		/* margin: 0 0 .18rem !important; */

		margin-bottom: -10px !important;
	}

	body.product-page .product-card-note-label {
		margin-bottom: -10px !important;

	}

	.product-options {
		display: flex !important;
		gap: 8px !important;
	}

	.product-option,
	.product-option:first-child {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		min-height: 50px !important;
		padding: .7rem .5rem !important;
		border: 1px solid #c9c1b6 !important;
		background: transparent !important;
	}

	/* On mobile, accordions remain below purchase details, full width. */
	.product-aftercare.product-accordion {
		display: block !important;
		padding: 0 1.5rem 3rem !important;
		background: #fbf7ee !important;
	}

	.product-info-disclosure {
		border-top: 1px solid #d8d0c5 !important;
	}

	.product-info-disclosure:last-child {
		border-bottom: 1px solid #d8d0c5 !important;
	}

	.product-info-disclosure summary {
		list-style: none !important;
		position: relative !important;
		padding: 1.05rem 2rem 1.05rem 0 !important;
		font-size: .66rem !important;
		font-weight: 600 !important;
		letter-spacing: .14em !important;
		text-transform: uppercase !important;
	}

	.product-info-disclosure summary::-webkit-details-marker {
		display: none !important;
	}

	.product-info-disclosure summary::after {
		content: '+' !important;
		position: absolute !important;
		right: 0 !important;
	}

	.product-info-disclosure[open] summary::after {
		content: "-" !important;
	}

	.product-info-disclosure-body {
		padding: 0 0 1.25rem !important;
	}

	.product-info-disclosure-body p {
		margin: 0 !important;
		font-size: .84rem !important;
		line-height: 1.6 !important;
	}
}


/* Shorter desktop windows: preserve the same structure, just scale it down. */


/* Narrow desktop / landscape tablet: 821–980px.
   The right column is much narrower here, so the title wraps onto more lines.
   Compact this range specifically so Add to Cart still fits in screen one. */


/* Only genuinely short laptop windows get a small proportional reduction. */


/* ==========================================================================
   2026-08-23 - PRODUCT OPTIONS + CART DRAWER/CART SUMMARY REFINEMENT
   ========================================================================== */

/* 1) Product size buttons - proportions from supplied reference */

.product-option,
.product-option:first-child {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 76px !important;
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	border: 1px solid #c9c1b6 !important;
	border-radius: 5px !important;
	background: transparent !important;
	color: var(---walnut-husk) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	letter-spacing: 0.2em !important;

}



.product-option:hover,
.product-option.is-selected {
	background: var(--brown) !important;
	color: var(--cream) !important;
}

/* Keep the same button proportion on phones, simply let the row fit the width. */
@media screen and (max-width: 480px) {
	.product-options {
		gap: 9px !important;
	}

	.product-option,
	.product-option:first-child {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 48px !important;
		min-height: 48px !important;
	}
}

/* 2 + 3) Cart drawer: 95% of previous width, true independent scrolling,
   and even/tighter vertical rhythm between rows. */

.cart-drawer-header {
	flex: 0 0 auto !important;
	padding: 1.05rem 1.35rem .8rem !important;
}

.cart-drawer-items {
	flex: 1 1 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 1.35rem !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin;
}

.cart-drawer-items {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


.cart-drawer-item {
	display: grid !important;
	grid-template-columns: 74px minmax(0, 1fr) !important;
	gap: .72rem !important;
	height: auto !important;
	min-height: 108px !important;
	padding: .62rem 0 !important;
	align-items: start !important;
	border-bottom: 1px solid #ddd6cb !important;
	overflow: visible !important;
}

.cart-item-image {
	width: 74px !important;
	height: 90px !important;
}

.cart-item-heading {
	gap: .5rem !important;
}


.cart-item-heading h3,
.cart-item-heading span {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: .92rem !important;
	line-height: 1.08 !important;
}

.cart-item-heading h3 {
	color: var(--brown) !important;
}

.cart-item-heading span {
	white-space: nowrap;
}

.cart-item-option {
	margin: .15rem 0 0 !important;
	font-size: .72rem !important;
	line-height: 1.08 !important;
}

.cart-item-note {
	margin: .16rem 0 0 !important;
	font-size: .67rem !important;
	line-height: 1.1 !important;
	-webkit-line-clamp: 1 !important;
}

.cart-item-actions {
	margin-top: .32rem !important;
	gap: .6rem !important;
}

.cart-item-quantity {
	display: inline-grid !important;
	grid-template-columns: 18px 24px 18px !important;
	grid-template-rows: 24px !important;
	column-gap: .32rem !important;
	align-items: stretch !important;
	height: 24px !important;
	font-family: var(--cart-font-body) !important;
	font-size: .66rem !important;
	line-height: 24px !important;
}

.cart-item-quantity>span,
.cart-item-quantity>button {
	display: block !important;
	width: 100% !important;
	height: 24px !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 24px !important;
	text-align: center !important;
	vertical-align: top !important;
	font-family: var(--cart-font-body) !important;
	font-size: .66rem !important;
	font-weight: 400 !important;
}

/* Mobile drawer: also 95% of the previous 94vw / 430px rule. */
@media screen and (max-width: 820px) {
	.cart-drawer {
		width: min(89.3vw, 409px) !important;
	}

	.cart-drawer-header {
		padding: .95rem 1rem .7rem !important;
	}

	.cart-drawer-items {
		padding: 0 1rem !important;
	}

	.cart-drawer-footer {
		padding: .75rem 1rem .9rem !important;
	}

	.cart-drawer-item {
		grid-template-columns: 68px minmax(0, 1fr) !important;
		min-height: 100px !important;
		padding: .55rem 0 !important;
		gap: .62rem !important;
	}

	.cart-item-image {
		width: 68px !important;
		height: 82px !important;
	}
}

/* 4) Cart summary: fit fully in the available screen and vertically centre it.
   Desktop/iPad landscape keeps only the cart-item list scrolling. */
@media screen and (min-width: 821px) {
	body.cart-page {
		height: auto !important;
		min-height: 100svh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	body.cart-page #page-wrapper {
		height: auto !important;
		min-height: 100svh !important;
		overflow: visible !important;
	}

	.cart-page-main {
		height: auto !important;
		min-height: 100svh !important;
		box-sizing: border-box !important;
		padding:
			calc(100px + .75rem) clamp(2rem, 5vw, 5rem) .75rem !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1.65fr) minmax(340px, .9fr) !important;
		gap: clamp(2.2rem, 4vw, 4rem) !important;
		align-items: stretch !important;
		/* overflow: hidden !important; */
	}

	.cart-page-items-panel {
		height: auto !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
	}

	.cart-page-heading {
		flex: 0 0 auto !important;
		padding-bottom: .9rem !important;
	}

	.cart-page-items {
		flex: 1 1 0 !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		overscroll-behavior: contain !important;
	}

	.cart-summary-panel {
		position: static !important;
		align-self: start !important;
		width: 100% !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	.cart-summary-inner {
		box-sizing: border-box !important;
		padding: clamp(.9rem, 1.8vh, 1.25rem) clamp(1rem, 1.8vw, 1.35rem) !important;
	}

	.cart-summary-total {
		padding-bottom: clamp(.65rem, 1.1vh, .9rem) !important;
	}

	.cart-summary-total strong {
		font-size: clamp(1.45rem, 2.1vw, 1.75rem) !important;
	}

	.cart-summary-copy {
		margin: clamp(.6rem, 1.2vh, .9rem) 0 !important;
		line-height: 1.35 !important;
	}

	.cart-summary-section {
		padding-top: clamp(.55rem, 1vh, .8rem) !important;
	}

	.cart-summary-label,
	.cart-summary-field>span {
		margin-bottom: .35rem !important;
	}

	.cart-fulfilment-options button {
		min-height: 38px !important;
	}

	.cart-summary-field {
		margin-top: clamp(.45rem, .9vh, .65rem) !important;
	}

	.cart-summary-field input,
	.cart-summary-field select {
		height: 32px !important;
	}

	.cart-terms {
		margin: clamp(.65rem, 1.2vh, .9rem) 0 .55rem !important;
		font-size: .74rem !important;
		line-height: 1.25 !important;
	}
}

/* Tablet portrait / mobile cart:
   make the summary itself a viewport-height section, vertically centred. */
@media screen and (max-width: 820px) {
	.cart-summary-panel {
		min-height: calc(100svh - 68px) !important;
		display: flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
		margin-top: 0 !important;
	}

	.cart-summary-inner {
		width: 100% !important;
		padding: clamp(1rem, 4vw, 1.35rem) !important;
	}
}


/* ==========================================================================
   CART SUMMARY - RESTORE AIRY REFERENCE STYLE
   Keep full proportions; only position/scale very lightly to fit viewport.
   ========================================================================== */
@media screen and (min-width: 821px) {

	.cart-summary-panel {
		align-self: start !important;
		width: 100% !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.cart-summary-inner {
		padding: clamp(1.45rem, 2.5vw, 2.15rem) !important;
	}

	.cart-summary-total {
		padding-bottom: 1.5rem !important;
	}

	.cart-summary-total span {
		font-size: .92rem !important;
	}

	.cart-summary-total strong {
		font-size: clamp(1.7rem, 2.5vw, 2rem) !important;
	}

	.cart-summary-copy {
		margin: 1.25rem 0 !important;
		line-height: 1.5 !important;
	}

	.cart-summary-section {
		padding-top: .95rem !important;
	}

	.cart-summary-label,
	.cart-summary-field>span {
		margin-bottom: 0rem !important;
		font-size: .7rem !important;
		letter-spacing: .16em !important;
	}

	.cart-fulfilment-options {
		gap: .65rem !important;
	}

	.cart-fulfilment-options button {
		min-height: 46px !important;
		font-size: .68rem !important;
	}

	.cart-summary-field {
		margin-top: .95rem !important;
	}

	.cart-summary-field input,
	.cart-summary-field select {
		height: 42px !important;
		font-size: .92rem !important;
	}

	.cart-terms {
		margin: 1.65rem 0 .95rem !important;
		font-size: .82rem !important;
		line-height: 1.4 !important;
	}

	.cart-summary-panel .button,
	.cart-summary-panel button[type="submit"],
	.cart-summary-panel .cart-continue-button {
		min-height: 54px !important;
		font-size: .78rem !important;
		letter-spacing: .13em !important;
	}
}

/* For shorter desktop windows, preserve the same visual style and only
   reduce spacing modestly - no typography squashing. */
@media screen and (min-width: 821px) and (max-height: 800px) {

	.cart-summary-inner {
		padding: 1.2rem 1.35rem !important;
	}

	.cart-summary-total {
		padding-bottom: 1.15rem !important;
	}

	.cart-summary-copy {
		margin: .95rem 0 !important;
		line-height: 1.42 !important;
	}

	.cart-summary-section {
		padding-top: .78rem !important;
	}

	.cart-summary-field {
		margin-top: .72rem !important;
	}

	.cart-terms {
		margin: 1.2rem 0 .75rem !important;
	}

	.cart-summary-field input,
	.cart-summary-field select {
		height: 38px !important;
	}
}


/* ==========================================================================
   2026-08-23 - SIZE BUTTONS + CART DRAWER REFINEMENT
   ========================================================================== */

/* 1) Product size options - square corners, no rounding */
.product-option,
.product-option:first-child {
	border-radius: 0 !important;
}

/* 2 + 3) Cart drawer:
   - another 5% narrower
   - rows ~5% larger
   - much smaller gap between one product and the next
*/
/* Let content determine row height, but make the visual row ~5% larger. */
.cart-drawer-item {
	grid-template-columns: 78px minmax(0, 1fr) !important;
	gap: .76rem !important;
	min-height: 114px !important;
	height: auto !important;
	padding: .48rem 0 !important;
	margin: 0 !important;
	align-items: start !important;
	border-bottom: 1px solid #ddd6cb !important;
}

/* Remove any extra spacing introduced by neighbouring rows. */
.cart-drawer-item+.cart-drawer-item {
	margin-top: 0 !important;
	padding-top: .48rem !important;
}

.cart-item-image {
	width: 78px !important;
	height: 95px !important;
}

.cart-item-heading {
	gap: .52rem !important;
}

.cart-item-heading h3,
.cart-item-heading span {
	line-height: 1.06 !important;
}

.cart-item-option {
	margin-top: .1rem !important;
	line-height: 1.06 !important;
}

.cart-item-note {
	margin-top: .12rem !important;
	line-height: 1.08 !important;
}

.cart-item-actions {
	margin-top: .28rem !important;
	gap: .58rem !important;
}

/* Mobile drawer: another 5% narrower there too */
@media screen and (max-width: 820px) {
	.cart-drawer {
		width: min(84.8vw, 389px) !important;
		/* ~95% of previous 89.3vw / 409px */
	}

	.cart-drawer-item {
		grid-template-columns: 71px minmax(0, 1fr) !important;
		min-height: 105px !important;
		padding: .44rem 0 !important;
		gap: .66rem !important;
	}

	.cart-drawer-item+.cart-drawer-item {
		padding-top: .44rem !important;
	}

	.cart-item-image {
		width: 71px !important;
		height: 86px !important;
	}
}


/* ==========================================================================
   CART DRAWER - CENTRE DIVIDERS BETWEEN ITEMS
   Keep current row scale, but centre content vertically so the separator
   sits visually halfway between one product and the next.
   ========================================================================== */
.cart-drawer-item {
	min-height: 120px !important;
	padding: .62rem 0 !important;
	align-items: center !important;
}

.cart-item-image {
	align-self: center !important;
}

.cart-item-copy {
	align-self: center !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 95px !important;
}

.cart-item-heading {
	align-items: flex-start !important;
}

.cart-drawer-item+.cart-drawer-item {
	padding-top: .62rem !important;
}

/* Mobile: same visual centering, slightly tighter */
@media screen and (max-width: 820px) {
	.cart-drawer-item {
		min-height: 110px !important;
		padding: .56rem 0 !important;
		align-items: center !important;
	}

	.cart-item-copy {
		min-height: 86px !important;
	}

	.cart-drawer-item+.cart-drawer-item {
		padding-top: .56rem !important;
	}
}


/* ==========================================================================
   CART LINE METADATA + CART EDITOR
   ========================================================================== */

/* Drawer: 10% larger row, still evenly centred around divider */
.cart-drawer-item {
	grid-template-columns: 82px minmax(0, 1fr) !important;
	min-height: 128px !important;
	padding: .68rem 0 !important;
	gap: .8rem !important;
	align-items: center !important;
}

.cart-item-image {
	width: 82px !important;
	height: 100px !important;
}

.cart-item-details {
	align-self: center !important;
	min-width: 0 !important;
}

.cart-item-option,
.cart-item-note {
	margin: .28rem 0 0 !important;
	font-size: .76rem !important;
	line-height: 1.2 !important;
	color: var(--walnut-husk) !important;
	letter-spacing: .02em !important;
}

.cart-item-option span,
.cart-item-note span {
	text-transform: uppercase !important;
	font-size: .66rem !important;
	letter-spacing: .12em !important;
	color: var(--walnut-husk) !important;
}

.cart-item-actions {
	margin-top: .42rem !important;
}

@media screen and (max-width: 820px) {
	.cart-drawer-item {
		grid-template-columns: 75px minmax(0, 1fr) !important;
		min-height: 116px !important;
		padding: .62rem 0 !important;
		gap: .7rem !important;
	}

	.cart-item-image {
		width: 75px !important;
		height: 92px !important;
	}
}

/* Cart page metadata */
.cart-page-option,
.cart-page-card-note {
	margin: .16rem 0 0 !important;
	font-size: .72rem !important;
	line-height: 1.22 !important;
	color: #776f67 !important;
}

.cart-page-option span,
.cart-page-card-note span {
	text-transform: uppercase !important;
	font-size: .61rem !important;
	letter-spacing: .12em !important;
	color: #5f574f !important;
}

.cart-page-item-links button {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	text-transform: uppercase !important;
	letter-spacing: .12em !important;
	cursor: pointer !important;
	border-bottom: 1px solid currentColor !important;
}

/* Modal editor */
.cart-edit-modal {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(30, 27, 23, .32);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.cart-edit-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cart-edit-dialog {
	position: relative;
	width: min(92vw, 520px);
	max-height: min(88svh, 720px);
	overflow-y: auto;
	background: #fbf7ee;
	border: 1px solid #d8d0c5;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: 0 18px 60px rgba(30, 27, 23, .14);
}

.cart-edit-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: 0 !important;
	background: none;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--brown);
}

.cart-edit-eyebrow,
.cart-edit-label {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .68rem;
	color: var(--brown);
}

.cart-edit-eyebrow {
	margin: 0 0 .55rem;
}

.cart-edit-dialog h2 {
	margin: 0 2.5rem 1.5rem 0;
	font-family: var(--serif);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	font-weight: 400;
	color: var(--brown);
}

.cart-edit-field {
	display: block;
	margin-top: 1.35rem;
}

.cart-edit-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cart-edit-label em {
	font-style: normal;
	font-size: .6rem;
}

.cart-edit-options {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
}

.cart-edit-option {
	min-width: 72px;
	height: 48px;
	border: 1px solid #c9c1b6;
	border-radius: 0;
	background: transparent;
	color: var(--muted-stone);
	cursor: pointer;
	margin-top: 0rem;
	font-size: 12px;

}

.cart-edit-option.is-selected {
	border-color: var(--brown);
	color: var(--brown);
}

.cart-edit-field textarea {
	width: 100%;
	min-height: 110px;
	resize: vertical;
	border: 1px solid #c9c1b6;
	background: transparent;
	padding: .8rem;
	font: inherit;
	font-size: 14px;
	color: #28241f;
	padding-bottom: 0px;
}

.cart-edit-validation {
	min-height: 1.2em;
	margin: .65rem 0 0;
	font-size: .72rem;
	color: #8a3b2c;
}

.cart-edit-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	margin-top: 1rem;
}

.cart-edit-cancel {
	background: transparent;
	color: var(--brown);
	border: 1px solid var(--brown);
}

.cart-edit-cancel:hover {
	background: var(--brown);
	color: var(--cream);
}

.cart-edit-save {
	background: var(--brown);
	color: var(--cream);
}

body.cart-edit-open {
	overflow: hidden !important;
}


/* ==========================================================================
   CART TYPOGRAPHY + ROW RHYTHM
   Change these FOUR variables later to restyle both the drawer and cart page.
   ========================================================================== */
:root {
	--cart-font-display: var(--serif);
	--cart-font-action: 'Source Sans Pro', Arial, sans-serif;
	--cart-text-color: var(--brown)
}

/* Use one typography system across BOTH cart surfaces. */
.cart-drawer,
.cart-page-main,
.cart-edit-modal {
	font-family: var(--cart-font-body) !important;
	color: var(--cart-text-color) !important;
}

.cart-drawer h2,
.cart-drawer h3,
.cart-drawer strong,
.cart-page-main h1,
.cart-page-main h2,
.cart-page-main strong,
.cart-summary-total strong,
.cart-edit-dialog h2 {
	font-family: var(--cart-font-display) !important;
}

.cart-item-option,
.cart-item-note,
.cart-page-option,
.cart-page-card-note,
.cart-page-qty-label,
.cart-summary-copy,
.cart-summary-label,
.cart-summary-field,
.cart-terms {
	font-family: var(--cart-font-body) !important;
}

.cart-item-remove,
.cart-page-item-links button,
.cart-page-item-links a,
.cart-drawer-checkout,
.cart-page-qty button,
.cart-item-quantity button,
.cart-continue-button {
	font-family: var(--cart-font-action) !important;
}

/* REMOVE / EDIT - reference style: clean uppercase, spaced out, no underline. */
.cart-item-remove,
.cart-page-item-links button,
.cart-page-item-links a {
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	letter-spacing: .16em !important;
	font-size: .68rem !important;
	font-weight: 600 !important;
	color: var(--walnut-husk) !important;
	padding: 0 !important;
	cursor: pointer !important;
}

.cart-item-remove:hover,
.cart-page-item-links button:hover,
.cart-page-item-links a:hover {
	color: #4b2418 !important;
	text-decoration: none !important;
}

/* ==========================================================================
   CART PAGE - REFERENCE-LIKE ROW PROPORTIONS
   Less space between products + divider visually centred between rows.
   ========================================================================== */
.cart-page-item {
	display: grid !important;
	grid-template-columns: 106px minmax(0, 1fr) !important;
	gap: 1.35rem !important;
	height: auto !important;
	min-height: 152px !important;
	padding: 10px 0 !important;
	margin: 0 !important;
	align-items: center !important;
	border-bottom: 1px solid #d8cfc0 !important;
	overflow: visible !important;
}

.cart-page-item-image {
	width: 106px !important;
	height: 128px !important;
	align-self: center !important;
}

.cart-page-item-info {
	min-height: 128px !important;
	align-self: center !important;
	justify-content: center !important;
	gap: .72rem !important;
}

.cart-page-item-top {
	align-items: flex-start !important;
	gap: 1.25rem !important;
}

.cart-page-item-top h2 {
	margin: 0 0 .18rem !important;
	font-style: normal !important;
	line-height: 1.12 !important;
}

.cart-page-option,
.cart-page-card-note {
	margin: .12rem 0 0 !important;
	line-height: 1.15 !important;
}

.cart-page-item-bottom {
	margin-top: .15rem !important;
	align-items: end !important;
}

.cart-page-item-links {
	gap: 1.25rem !important;
	align-items: center !important;
}

/* ==========================================================================
   DRAWER - DESKTOP RHYTHM
   Keep current roomy rows and clean equal spacing around each divider.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.cart-drawer-item {
		grid-template-columns: 82px minmax(0, 1fr) !important;
		min-height: 128px !important;
		height: auto !important;
		padding: .72rem 0 !important;
		margin: 0 !important;
		align-items: center !important;
		border-bottom: 1px solid #ddd6cb !important;
	}

	.cart-item-image {
		width: 82px !important;
		height: 100px !important;
		align-self: center !important;
	}

	.cart-item-details {
		height: 100px !important;
		min-height: 100px !important;
		align-self: center !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
	}

	.cart-item-actions {
		margin-top: auto !important;
		min-height: 30px !important;
		align-items: center !important;
		transform: translateY(2px);
	}

	.cart-item-quantity {
		grid-template-columns: 22px 30px 22px !important;
		grid-template-rows: 30px !important;
		column-gap: .38rem !important;
		height: 30px !important;
		font-size: .92rem !important;
		line-height: 1 !important;
		transform: translateY(2px) !important;
	}

	.cart-item-quantity>span,
	.cart-item-quantity>button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 30px !important;
		min-height: 30px !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
		vertical-align: middle !important;
		font-size: .92rem !important;
	}

	.cart-item-quantity>span {
		font-family: var(--serif) !important;
		font-size: 1.12rem !important;
		font-weight: 400 !important;
	}
}

/* ==========================================================================
   DRAWER - MOBILE
   User asked for MORE breathing room than current mobile version.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.cart-drawer-item {
		grid-template-columns: 90px minmax(0, 1fr) !important;
		min-height: 139px !important;
		height: auto !important;
		padding: .9rem 0 !important;
		gap: .9rem !important;
		align-items: center !important;
	}

	.cart-item-image {
		width: 90px !important;
		height: 112px !important;
		align-self: center !important;
	}

	.cart-item-details {
		min-height: 112px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
	}

	.cart-item-heading h3,
	.cart-item-heading span {
		font-family: var(--cart-font-display) !important;
		color: var(--cart-text-color) !important;
		font-size: 1rem !important;
		line-height: 1.08 !important;
	}

	.cart-item-option,
	.cart-item-note {
		margin-top: .42rem !important;
		font-family: var(--cart-font-body) !important;
		font-size: .88rem !important;
		line-height: 1.18 !important;
		color: var(--walnut-husk) !important;
	}

	.cart-item-option span,
	.cart-item-note span {
		font-size: .77rem !important;
		color: var(--walnut-husk) !important;
	}

	.cart-item-actions {
		margin-top: .94rem !important;
		align-items: center !important;
		min-height: 30px !important;
	}

	.cart-item-quantity,
	.cart-item-remove {
		align-self: center !important;
		height: 30px !important;
		min-height: 30px !important;
		margin: 0 !important;
		line-height: 30px !important;
	}

	.cart-item-remove {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
	}
}


/* ==========================================================================
   PRODUCT INFORMATION TYPOGRAPHY
   Edit these variables later to restyle What's Included / Delivery / Care.
   ========================================================================== */
:root {
	--product-info-heading-font: Georgia, 'Times New Roman', serif;
	--product-info-body-font: 'Source Sans Pro', Arial, sans-serif;
	--product-info-heading-size: 1rem;
	--product-info-body-size: .88rem;
	--product-info-note-size: .76rem;
	--product-info-line-height: 1.55;
	--product-info-section-gap: 1.2rem;
}

/* What's included */
.product-included-list {
	margin: 0;
	padding-left: 1.1rem;
	font-family: var(--product-info-body-font);
	font-size: var(--product-info-body-size);
	line-height: var(--product-info-line-height);
}

.product-included-list li+li {
	margin-top: .25rem;
}

.product-included-note {
	margin: .95rem 0 0 !important;
	font-family: var(--product-info-body-font);
	font-size: var(--product-info-note-size) !important;
	line-height: 1.45 !important;
	font-style: italic;
	color: #8a8178;
}

/* Care */
.product-care-title {
	margin: 0 0 1rem !important;
	font-family: var(--product-info-body-font);
	font-size: .66rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #82796f;
}

.product-care-sections {
	display: grid;
	gap: var(--product-info-section-gap);
}

.product-care-section h4 {
	margin: 0 0 .35rem;
	font-family: var(--product-info-heading-font);
	font-size: var(--product-info-heading-size);
	font-weight: 400;
	font-style: italic;
	line-height: 1.25;
	color: #28241f;
}

.product-care-section p {
	margin: 0 !important;
	font-family: var(--product-info-body-font);
	font-size: var(--product-info-body-size) !important;
	line-height: var(--product-info-line-height) !important;
	color: #6f675f;
}

/* Delivery shares the body typography */
.product-info-disclosure-body>p {
	font-family: var(--product-info-body-font);
	font-size: var(--product-info-body-size) !important;
	line-height: var(--product-info-line-height) !important;
}


/* ==========================================================================
   SHARED SITE FOOTER
   One footer rendered by nav-v6.js across the whole site.
   ========================================================================== */
.site-footer {
	position: relative;
	z-index: 5;
	width: 100%;
	background: #fbf7ee;
	color: #655d55;
	border-top: 1px solid rgba(101, 93, 85, .14);
	font-family: 'Source Sans Pro', Arial, sans-serif;
}

.site-footer * {
	box-sizing: border-box;
}

.site-footer-inner {
	width: min(1180px, calc(100% - 44px));
	margin: 0 auto;
	padding: clamp(58px, 7vw, 92px) 0 clamp(28px, 4vw, 46px);
}

.site-footer-top {
	display: grid;
	grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, .8fr));
	gap: clamp(36px, 6vw, 84px);
	align-items: start;
}

.site-footer-brand {
	max-width: 270px;
}

.site-footer-logo {
	display: inline-block;
	border: 0 !important;
	text-decoration: none !important;
}

.site-footer-logo img {
	display: block;
	width: auto;
	height: 58px;
	max-width: 150px;
	object-fit: contain;
	filter: none;
}

.site-footer-brand p {
	margin: 24px 0 0;
	font-size: 13px;
	line-height: 1.75;
	letter-spacing: .02em;
	color: #756d65;
}

.site-footer-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.site-footer-column h2 {
	margin: 0 0 2px;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #2d2925;
}

.site-footer-column a,
.site-footer-bottom a {
	border: 0 !important;
	text-decoration: none !important;
	color: #756d65 !important;
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: .01em;
	transition: color .18s ease;
}

.site-footer-column a:hover,
.site-footer-bottom a:hover {
	color: #4b2418 !important;
}

.site-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(58px, 8vw, 92px);
	padding-top: 28px;
	border-top: 1px solid rgba(101, 93, 85, .25);
}

.site-footer-bottom p {
	margin: 0;
	font-size: 12px;
	letter-spacing: .03em;
	color: #756d65;
}

.site-footer-legal {
	display: flex;
	align-items: center;
	gap: 26px;
}

.site-footer-legal a {
	font-size: 10px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em !important;
	color: #655d55 !important;
}

/* Footer sits naturally below standard pages. */
.about-page .site-footer,
.terms-page .site-footer,
.flowers-page .site-footer,
.potluck-page .site-footer,
.bloom-bar-page .site-footer,
.homepage .site-footer {
	margin-top: 0;
}

@media screen and (max-width: 820px) {
	.site-footer-inner {
		width: min(100% - 38px, 620px);
		padding: 52px 0 30px;
	}

	.site-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 42px 28px;
	}

	.site-footer-brand {
		grid-column: 1 / -1;
		max-width: 310px;
	}

	.site-footer-logo img {
		height: 52px;
	}

	.site-footer-brand p {
		margin-top: 18px;
	}

	.site-footer-bottom {
		align-items: flex-start;
		flex-direction: column;
		margin-top: 52px;
		padding-top: 22px;
	}
}

@media screen and (max-width: 480px) {
	.site-footer-top {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.site-footer-brand {
		grid-column: auto;
	}

	.site-footer-column {
		gap: 10px;
	}

	.site-footer-bottom {
		gap: 18px;
	}
}

/* ==========================================================================
   ABOUT / FAQ / CARE PAGE
   ========================================================================== */
.about-page {
	background: #fbf7ee;
	color: #4b2418;
}

.about-page #header-wrapper,
.terms-page #header-wrapper {
	padding: 0;
	background: #fbf7ee;
}

.about-page-main,
.terms-page-main {
	padding-top: 82px;
	background: #fbf7ee;
}

.about-page .page-banner,
.terms-page .page-banner {
	position: relative;
	width: 100%;
	height: clamp(280px, 45vw, 560px);
	overflow: hidden;
}

.about-page .page-banner-media,
.terms-page .page-banner-media,
.about-page .page-banner-media img,
.terms-page .page-banner-media img {
	width: 100%;
	height: 100%;
}

.about-page .page-banner-media img,
.terms-page .page-banner-media img {
	display: block;
	object-fit: cover;
}

.about-page .section,
.terms-page .section {
	width: min(1180px, calc(100% - 44px));
	margin: 0 auto;
}

.about-page .section-intro,
.terms-page .section-intro {
	padding: clamp(72px, 9vw, 120px) 0;
}

.about-page .section-center,
.terms-page .section-center {
	max-width: 760px;
}

.about-page .section-title,
.terms-page .section-title {
	margin: 0 0 24px;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(30px, 4vw, 50px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--brown);
}

.about-page .lead,
.terms-page .lead {
	margin: 0;
	font-size: clamp(13px, 1vw, 15px) !important;
	line-height: 1.75;
	color: var(--walnut-husk);
}

.about-page .editorial-section {
	width: min(1180px, calc(100% - 44px));
	margin: 0 auto;
	padding: clamp(54px, 7vw, 92px) 0;
}

.about-page .editorial-layout {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(300px, .8fr);
	gap: clamp(46px, 7vw, 100px);
	align-items: center;
}

.about-page .editorial-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.about-page .editorial-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.about-page .editorial-copy {
	max-width: 650px;
}

.about-page .editorial-copy p {
	margin: 0;
	color: var(--brown);
	font-size: 14px;
	line-height: 1.8;
}

.about-page .care-guide-section {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(86px, 10vw, 140px) 0;
}

.about-page .care-guide-header {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(36px, 6vw, 90px);
	align-items: center;
	margin-bottom: clamp(64px, 8vw, 105px);
}

.about-page .care-guide-header h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(30px, 4vw, 50px);
	font-style: italic;
	font-weight: 400;
	color: #4b2418;
}

.about-page .care-guide-list {
	display: flex;
	flex-direction: column;
	gap: clamp(68px, 8vw, 110px);
}

.about-page .care-guide-row {
	display: grid;
	grid-template-columns: minmax(160px, .65fr) minmax(0, 1.55fr);
	gap: clamp(42px, 7vw, 100px);
	align-items: start;
}

.about-page .care-guide-label {
	margin: 0;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #4b2418;
}

.about-page .accordion-item {
	padding: 0 0 20px;
	margin: 0 0 20px;
	border-bottom: 1px solid rgba(101, 93, 85, .18);
}

.about-page .accordion-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--serif);
	font-size: 14px;
	color: var(--brown);
	letter-spacing: 0.02rem !important;
}

.about-page .accordion-item summary::-webkit-details-marker {
	display: none;
}

.about-page .accordion-item summary::after {
	content: "+";
	font-family: var(--sans);
	color: var(--walnut-husk);
}

.about-page .accordion-item[open] summary::after {
	content: "-";
}

.about-page .accordion-item p,
.about-page .faq-category-items>p {
	max-width: 680px;
	margin: 13px 0 0;
	color: var(--walnut-husk);
	font-size: 13px;
	line-height: 1.7;
}

.about-page .care-guide-content .care-guide-block+.care-guide-block {
	margin-top: 28px;
}

.about-page .care-guide-block h3 {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #4b2418;
}

.about-page .care-guide-block p {
	margin: 0;
	color: var(--walnut-husk);
	font-size: 13px;
	line-height: 1.75;
}

/* ==========================================================================
   TERMS PAGE
   ========================================================================== */
.terms-page {
	background: #fbf7ee;
	color: #4b2418;
}

.terms-page .terms {
	padding: 0 0 clamp(90px, 11vw, 150px);
}

.terms-page .terms-block {
	display: grid;
	grid-template-columns: minmax(180px, .65fr) minmax(0, 1.55fr);
	gap: clamp(45px, 7vw, 100px);
	padding: 38px 0;
	border-top: 1px solid rgba(101, 93, 85, .18);
}

.terms-page .terms-block .section-title {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(11px, 1vw, 12px) !important;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.5;
}

.terms-page .terms-block p,
.terms-page .terms-block ul {
	margin: 0;
	max-width: 720px;
	color: var(--walnut-husk);
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.75;

}

.terms-page .terms-block ul {
	padding-left: 1.15rem;
}

.terms-page .terms-block li+li {
	margin-top: 10px;
}

@media screen and (max-width: 820px) {

	.about-page .editorial-layout,
	.about-page .care-guide-header,
	.about-page .care-guide-row,
	.terms-page .terms-block {
		grid-template-columns: 1fr;
	}

	.about-page .care-guide-row,
	.terms-page .terms-block {
		gap: 24px;
	}

	.about-page .editorial-image {
		aspect-ratio: 4 / 5;
	}

	.about-page .section,
	.terms-page .section,
	.about-page .editorial-section,
	.about-page .care-guide-section {
		width: min(100% - 38px, 620px);
	}
}

/* TERMS PAGE — section headings + remove dividers */

body.terms-page .terms-block {
	border-top: none !important;
}

body.terms-page .terms-block .section-title,
body.terms-page .terms-block h3 {
	font-style: normal !important;
}


/* ==========================================
   TERMS — INTRO ALIGNMENT
   Match FAQ section positioning
   ========================================== */

/* Desktop */
body.terms-page .section.section-intro {
	width: min(1180px, calc(100% - 44px)) !important;
	margin: 0 auto !important;
	padding: clamp(72px, 9vw, 120px) 0 !important;
}

/* Shift the actual intro content inward */
body.terms-page .section.section-intro .section-center {
	max-width: 760px !important;
	margin-left: clamp(30px, 4vw, 60px) !important;
	margin-right: 0 !important;
}


/* MOBILE */
@media screen and (max-width: 820px) {

	body.terms-page .section.section-intro {
		width: min(100% - 38px, 620px) !important;
	}

	body.terms-page .section.section-intro .section-center {
		width: 100% !important;
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	body.terms-page .section.section-intro .section-title,
	body.terms-page .section.section-intro .lead {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ==========================================================================
   ABOUT / FAQ / CARE / TERMS - SHARED CONTENT TYPE SCALE
   Change ONE variable above: --info-page-font-size
   ========================================================================== */

/* FAQ questions + answers */
.about-page .accordion-item summary,
.about-page .accordion-item p,
.about-page .faq-category-items>p,

/* Care guide subsection titles + copy */
.about-page .care-guide-block h3,
.about-page .care-guide-block p,

/* Terms body copy + list items */
.terms-page .terms-block p,
.terms-page .terms-block ul,
.terms-page .terms-block li {
	/* font-size: var(--info-page-font-size) !important; */
	font-size: var(--p-bloom-bar-font-size) !important;
	line-height: 1.55 !important;
	list-style-type: none;
	padding-left: 0 !important;
	/* margin-left: 5px !important; */
	/* list-style-type: none;
	
	margin-left: 0 !important; */

}

/* Keep subsection title hierarchy through weight/case rather than smaller type. */
.about-page .care-guide-block h3 {
	font-weight: 600 !important;
	letter-spacing: .08em !important;
}

/* FAQ summary remains slightly more prominent only by weight, not size. */
.about-page .accordion-item summary {
	font-weight: 500 !important;
}

/* Mobile uses the SAME content size rather than jumping to separate values. */
@media screen and (max-width: 820px) {

	.about-page .accordion-item summary,
	.about-page .accordion-item p,
	.about-page .faq-category-items>p,
	.about-page .care-guide-block h3,
	.about-page .care-guide-block p,
	.terms-page .terms-block p,
	.terms-page .terms-block ul,
	.terms-page .terms-block li {
		/* font-size: var(--info-page-font-size) !important; */
		font-size: var(--p-header-bloom-bar-font-size) !important;
	}
}


/* ==========================================================================
   ABOUT - centered Our Story intro
   Mirrors the centered editorial composition in the supplied reference.
   ========================================================================== */
.about-page #our-story {
	width: 100%;
	max-width: none;
	padding-left: clamp(24px, 6vw, 96px);
	padding-right: clamp(24px, 6vw, 96px);
	box-sizing: border-box;
	text-align: center;
}

.about-page #our-story .section-center {
	width: min(100%, 860px);
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.about-page #our-story .section-title {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: var(--brown);
}

.about-page #our-story .lead {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 820px;
	color: var(--walnut-husk);
}

@media screen and (max-width: 780px) {
	.about-page #our-story {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* Legacy Shop dropdown experiments removed; canonical rules are at the end of this file. */

/* ==========================================================================
   CART DATE + TIME - EDITORIAL PICKERS
   ========================================================================== */
.cart-summary-field {
	position: relative;
}


/* Date / time triggers should read like form fields, not headings. */

.cart-date-trigger,
.cart-time-trigger {
	width: 100%;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid #cfc0ad;
	background: transparent;
	color: var(--walnut-husk);
	text-align: left;
	font-family: var(--sans);
	font-size: clamp(12px, 1vw, 13px);
	font-weight: 500;
	line-height: 1.2;
	padding-bottom: 7px !important;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.cart-date-trigger:hover,
.cart-time-trigger:hover {
	border: 0 !important;
	border-bottom: 1px solid var(--gold) !important;
	background: transparent !important;
	color: var(--brown) !important;
}

.cart-date-trigger:focus,
.cart-time-trigger:focus {
	outline: none;
	border-bottom-color: #b98b2e;
}


/* Date validation: clicking Time before choosing a date */
.cart-date-trigger.is-error,
.cart-date-trigger.is-error:hover,
.cart-date-trigger.is-error:focus {
	color: #a84a3f !important;
	border: 0 !important;
	border-bottom: 1px solid #a84a3f !important;
	background: transparent !important;
}

.cart-time-trigger:disabled {
	color: #8d7a70;
	cursor: default;
}

.cart-calendar-popover,
.cart-time-menu {
	position: absolute;
	left: 0;
	z-index: 80;
	background: #fbf7ee;
	box-shadow: 0 12px 32px rgba(74, 36, 18, .14);
}

.cart-calendar-popover {
	position: absolute;
	top: calc(100% + 5px);
	width: min(480px, 92vw);
	padding: 28px 28px 26px;
}

.cart-calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.cart-calendar-head h3 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	text-align: center;
	font-family: var(--serif);
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 400;
	font-style: italic;
	color: var(--brown);
}

.cart-calendar-nav {
	grid-row: 1;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	color: var(--brown);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.cart-calendar-nav[data-calendar-prev] {
	grid-column: 1;
}

.cart-calendar-nav[data-calendar-next] {
	grid-column: 3;
}

.cart-calendar-nav:disabled {
	opacity: .22;
	cursor: default;
}

.cart-calendar-weekdays,
.cart-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 6px;

}

.cart-calendar-weekdays {
	margin-bottom: 9px;
}

.cart-calendar-weekdays span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #826b5f;
}

.cart-calendar-day {
	border: 1px solid transparent;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	font-family: var(--sans);
	color: var(--brown);
	cursor: pointer;
	letter-spacing: .03em;
	padding: 10px !important;
	min-height: 32px !important;
	line-height: 1 !important;
	font-size: clamp(12px, 1vw, 13px) !important;
}

.cart-calendar-day:hover:not(:disabled),
.cart-calendar-day.is-selected {
	background: var(--brown);
	color: var(--cream);
	border: 1px solid var(--brown);
}


.cart-calendar-day.is-disabled:hover,
.cart-calendar-day:disabled:hover {
	color: none;
}

.cart-calendar-day.is-outside {
	color: #c9beb1;
}

.cart-calendar-day.is-disabled {
	color: #d7cec4;
	cursor: default;
}

.cart-calendar-day.is-selected {
	font-weight: 600;
}

.cart-time-menu {
	top: calc(100% + 16px);
	width: min(360px, 92vw);
	padding: 5px 0;
}

.cart-time-menu .cart-time-option {
	display: block !important;
	width: 100% !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 10px 18px !important;

	line-height: 1.2 !important;
}

.cart-time-option {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: #4b2418;
	text-align: left;
	font-family: var(--sans);
	font-weight: 400;
	line-height: 1.15;
	cursor: pointer;
	padding: 0.55rem 1rem;
	font-size: 14px !important;
}

.cart-time-option:hover,
.cart-time-option:focus {
	background: rgba(185, 139, 46, .08);
	color: #b98b2e;
	outline: none;
	border: none;
}

.cart-time-field:has(.cart-time-menu:not([hidden])) .cart-time-trigger {
	border-bottom-color: #b98b2e;
}

@media screen and (max-width: 820px) {
	.cart-calendar-popover {
		width: min(420px, calc(100vw - 40px));
		padding: 22px 18px 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.cart-calendar-head {
		margin-bottom: 18px;
	}

	.cart-calendar-day {
		font-size: 15px;
	}

	.cart-time-menu {
		width: 100%;
	}

	.cart-time-option {
		font-size: 17px;
		padding: 12px 18px;
	}
}


/* ==========================================================================
   CART SUMMARY - fulfilment, checkbox, calendar visibility + type scale
   ========================================================================== */

/* Allow custom picker panels to escape the summary box instead of being clipped. */
.cart-summary-panel,
.cart-summary-inner,
.cart-summary-section,
.cart-summary-field {
	overflow: visible !important;
}

.cart-summary-panel {
	position: relative;
	z-index: 20;
}

/* Fulfilment buttons: smaller, closer to the reference proportions. */
.cart-fulfilment-options button {
	font-size: 12px !important;
	letter-spacing: .12em !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	padding-top: 13px !important;
	padding-bottom: 13px !important;
}

.cart-fulfilment-options button small {
	font-size: 9px !important;
	letter-spacing: .08em !important;
	font-weight: 600 !important;
	margin-left: 7px !important;
}



/* Calendar needs to fit within the viewport/summary area. */
.cart-calendar-popover {
	width: min(420px, calc(100vw - 48px)) !important;
	max-height: min(560px, calc(100vh - 120px)) !important;
	overflow-y: auto !important;
	padding: 22px 22px 20px !important;
}

.cart-calendar-head {
	margin-bottom: 18px !important;
}

.cart-calendar-head h3 {
	font-size: 25px !important;
}

.cart-calendar-weekdays span {
	font-size: 10px !important;
}



/* Visible custom T&C checkbox. */
.cart-terms {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	cursor: pointer;
}

.cart-terms input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	margin: 3px 0 0 !important;
	border: 1px solid #8e7c70 !important;
	border-radius: 0 !important;
	background: transparent !important;
	display: inline-grid !important;
	place-content: center !important;
	cursor: pointer !important;
}

.cart-terms input[type="checkbox"]::before {
	content: "" !important;
	width: 7px !important;
	height: 7px !important;
	transform: scale(0) !important;
	background: #4b2418 !important;
	transition: transform .12s ease-in-out !important;
}

.cart-terms input[type="checkbox"]:checked::before {
	transform: scale(1) !important;
}

.cart-terms span {
	font-size: 13px !important;
	line-height: 1.45 !important;
}

/* On narrower desktop/mobile, center the calendar beneath the field and keep all dates visible. */
@media screen and (max-width: 820px) {
	.cart-calendar-popover {
		left: 0 !important;
		transform: none !important;
		width: min(380px, calc(100vw - 44px)) !important;
		max-height: calc(100vh - 110px) !important;
	}

	.cart-date-trigger,
	.cart-time-trigger {
		font-size: 14px !important;
	}

	.cart-time-option {
		font-size: 14px !important;
	}
}


/* ==========================================================================
   CART CALENDAR - FIT THE FULL MONTH IN VIEW
   The previous square day cells made a 6-week month unnecessarily tall.
   ========================================================================== */
.cart-calendar-popover {
	width: min(370px, calc(100vw - 44px)) !important;
	max-height: none !important;
	overflow: visible !important;
	padding: 18px 18px 16px !important;
}

.cart-calendar-head {
	grid-template-columns: 34px 1fr 34px !important;
	margin-bottom: 12px !important;
}

.cart-calendar-head h3 {
	font-size: 23px !important;
	line-height: 1.05 !important;
}

.cart-calendar-nav {
	width: 34px !important;
	height: 34px !important;
	font-size: 25px !important;
}

.cart-calendar-weekdays {
	margin-bottom: 4px !important;
}

.cart-calendar-weekdays span {
	font-size: 9px !important;
	line-height: 1 !important;
	padding: 3px 0 5px !important;
}

.cart-calendar-grid {
	grid-auto-rows: 34px !important;
	row-gap: 1px !important;
}

@media screen and (max-width: 820px) {
	.cart-calendar-popover {
		width: min(350px, calc(100vw - 30px)) !important;
		padding: 16px 14px 14px !important;
	}

	.cart-calendar-grid {
		grid-auto-rows: 32px !important;
	}

	.cart-calendar-day {
		height: 32px !important;
		min-height: 32px !important;
		line-height: 32px !important;
		font-size: 12px !important;
	}
}


/* ==========================================================================
   CART CALENDAR - MORE COMPACT POPOVER
   Sized to sit comfortably inside the viewport rather than touch the bottom.
   ========================================================================== */
.cart-calendar-popover {
	width: min(340px, calc(100vw - 44px)) !important;
	padding: 14px 14px 12px !important;
}

.cart-calendar-head {
	grid-template-columns: 30px 1fr 30px !important;
	margin-bottom: 8px !important;
}

.cart-calendar-head h3 {
	font-size: 20px !important;
	line-height: 1 !important;
}

.cart-calendar-nav {
	width: 30px !important;
	height: 30px !important;
	font-size: 22px !important;
}

.cart-calendar-weekdays {
	margin-bottom: 2px !important;
}

.cart-calendar-weekdays span {
	font-size: 8.5px !important;
	padding: 2px 0 3px !important;
}

.cart-calendar-grid {
	grid-auto-rows: 28px !important;
	row-gap: 0 !important;
}


@media screen and (max-width: 820px) {
	.cart-calendar-popover {
		width: min(320px, calc(100vw - 28px)) !important;
		padding: 12px 12px 10px !important;
	}

	.cart-calendar-head h3 {
		font-size: 19px !important;
	}

	.cart-calendar-grid {
		grid-auto-rows: 27px !important;
	}

	.cart-calendar-day {
		height: 27px !important;
		min-height: 27px !important;
		line-height: 27px !important;
		font-size: 11.5px !important;
	}
}


/* ==========================================================================
   CART - MOBILE SUMMARY + CALENDAR/TIME REFINEMENT
   ========================================================================== */

/* 1. Reduce the large empty area at the top of the mobile summary box. */
@media screen and (max-width: 820px) {
	.cart-summary-panel {
		padding-top: 0 !important;
	}

	.cart-summary-inner {
		padding-top: 34px !important;
	}

	.cart-summary-total,
	.cart-summary-total-row {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.cart-summary-panel>*:first-child,
	.cart-summary-inner>*:first-child {
		margin-top: 0 !important;
	}
}

/* 2. Calendar: month on left, arrows together on right, squarer compact panel. */
.cart-calendar-popover {
	width: min(350px, calc(100vw - 40px)) !important;
	padding: 18px 18px 16px !important;
	border-radius: 0 !important;
}

.cart-calendar-head {
	display: grid !important;
	grid-template-columns: 1fr auto auto !important;
	align-items: center !important;
	column-gap: 8px !important;
	margin-bottom: 14px !important;
}

.cart-calendar-head h3 {
	grid-column: 1 !important;
	grid-row: 1 !important;
	text-align: left !important;
	margin: 0 !important;
	font-size: 21px !important;
	line-height: 1.05 !important;
	white-space: nowrap !important;
}

.cart-calendar-nav {
	grid-row: 1 !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	text-align: center !important;
}

.cart-calendar-nav[data-calendar-prev] {
	grid-column: 2 !important;
}

.cart-calendar-nav[data-calendar-next] {
	grid-column: 3 !important;
}

.cart-calendar-weekdays {
	margin-bottom: 5px !important;
}

.cart-calendar-weekdays span {
	font-size: 9px !important;
	padding: 2px 0 4px !important;
}

.cart-calendar-grid {
	grid-auto-rows: 30px !important;
	row-gap: 0 !important;
}

/* Selected date as a simple circular outline like the reference. */
.cart-calendar-day.is-selected {
	background: transparent !important;
	color: #b98b2e !important;
	border: 1px solid #b98b2e !important;
	border-radius: 50% !important;
	width: 30px !important;
	height: 30px !important;
	margin: 0 auto !important;
	line-height: 28px !important;
}

/* 3. Shorter time menu so it doesn't touch the viewport bottom. */
.cart-time-menu {
	width: min(330px, calc(100vw - 40px)) !important;
	padding: 8px 0 !important;
	max-height: min(250px, calc(100vh - 160px)) !important;
	overflow-y: auto !important;
}

@media screen and (max-width: 820px) {
	.cart-calendar-popover {
		width: min(330px, calc(100vw - 28px)) !important;
		padding: 16px 14px 14px !important;
		left: 0 !important;
		transform: none !important;
	}

	.cart-calendar-head h3 {
		font-size: 20px !important;
	}

	.cart-calendar-grid {
		grid-auto-rows: 28px !important;
	}

	.cart-calendar-day {
		height: 28px !important;
		min-height: 28px !important;
		line-height: 28px !important;
		font-size: 11.5px !important;
	}

	.cart-calendar-day.is-selected {
		width: 28px !important;
		height: 28px !important;
		line-height: 26px !important;
	}

	.cart-time-menu {
		width: 100% !important;
		max-height: 220px !important;
	}

	.cart-time-option {
		padding: 8px 16px !important;
		font-size: 13.5px !important;
	}
}


/* ==========================================================================
   CART SUMMARY - MOBILE TOP ALIGNMENT
   Remove legacy viewport-height / centering rules that leave a large blank
   area above "Estimated total" on small screens.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.cart-summary-panel {
		min-height: 0 !important;
		height: auto !important;
		display: block !important;
		padding-top: 0 !important;
		padding-bottom: 28px !important;
	}

	.cart-summary-inner {
		min-height: 0 !important;
		height: auto !important;
		display: block !important;
		justify-content: initial !important;
		align-items: initial !important;
		padding-top: 24px !important;
		padding-bottom: 0 !important;
	}

	.cart-summary-card,
	.cart-summary-content {
		min-height: 0 !important;
		height: auto !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
	}

	.cart-summary-total,
	.cart-summary-total-row {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	.cart-summary-inner> :first-child {
		margin-top: 0 !important;
	}
}

/* Slightly roomier tablet/small-desktop, but still top-aligned. */
@media screen and (min-width: 821px) and (max-width: 1100px) {

	.cart-summary-panel,
	.cart-summary-inner {
		min-height: 0 !important;
		height: auto !important;
		justify-content: flex-start !important;
	}
}

/* Bloom Bar enquiry sticky summary requires document-level vertical scrolling. */
body.bloom-bar-enquiry-page {
	overflow-y: visible !important;
	overflow-x: clip !important;
}


/* ==========================================================================
   CART PAGE - EMPTY STATE + COUNT ALIGNMENT + FULFILMENT BUTTONS
   ========================================================================== */

/* Cart heading/count: keep the count badge aligned with the Cart baseline. */
.cart-page-heading h1 {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.8rem !important;

	padding-top: .08em !important;
	overflow: visible !important;

}

.cart-page-heading [data-cart-page-count] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 2.15rem !important;
	height: 2.15rem !important;
	margin: 0 !important;
	border-radius: 50% !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

/* Empty cart: no badge, no top "continue shopping" link and no checkout summary. */
body.cart-page.cart-is-empty .cart-page-heading [data-cart-page-count],
body.cart-page.cart-is-empty .cart-page-heading>a,
body.cart-page.cart-is-empty .cart-summary-panel {
	display: none !important;
}

/* Make the left side become the entire content width when empty. */
body.cart-page.cart-is-empty .cart-page-main {
	display: block !important;
}

body.cart-page.cart-is-empty .cart-page-items-panel {
	width: 100% !important;
	max-width: none !important;
}

/* Reference-style empty cart state. */
body.cart-page.cart-is-empty .cart-page-heading {
	border-bottom: 0 !important;
}

body.cart-page.cart-is-empty .cart-page-items {
	min-height: calc(100vh - 250px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.cart-page.cart-is-empty .cart-page-empty {
	width: min(92%, 520px) !important;
	margin: 0 auto !important;
	padding: 2rem 1rem 5rem !important;
	text-align: center !important;
}

body.cart-page.cart-is-empty .cart-page-empty h2 {
	font-family: var(--serif);
	font-style: italic;
	letter-spacing: -.035em;
	margin: 0 0 .85rem !important;
	font-size: clamp(1.95rem, 2.5vw, 2.8rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--brown) !important;
}

body.cart-page.cart-is-empty .cart-page-empty p {
	margin: 0 0 0.5rem !important;
	font-size: .9rem !important;
	line-height: 1.45 !important;
	color: var(--muted-stone) !important;
}


/* Fulfilment buttons: wider visual treatment, smaller labels/costs. */
.cart-fulfilment-options {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 1rem !important;
	width: 100% !important;
}

.cart-fulfilment-options button {
	width: 100% !important;
	min-width: 0 !important;
	min-height: 62px !important;
	padding: 0.8rem 1rem !important;
	font-size: 0.78rem !important;
	line-height: 1.15 !important;
	letter-spacing: 0.12em !important;
	white-space: nowrap !important;
}

.cart-fulfilment-options button small {
	display: inline !important;
	margin-left: 0.55rem !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.06em !important;
}

/* Shared footer should sit naturally below cart content. */
body.cart-page .site-footer {
	margin-top: 0 !important;
}

@media screen and (max-width: 820px) {
	.cart-page-heading [data-cart-page-count] {
		width: 1.9rem !important;
		height: 1.9rem !important;
		font-size: 0.78rem !important;
	}

	body.cart-page.cart-is-empty .cart-page-items {
		min-height: calc(100svh - 210px) !important;
	}

	body.cart-page.cart-is-empty .cart-page-empty {
		padding-bottom: 3rem !important;
	}


	.cart-fulfilment-options {
		gap: 0.75rem !important;
	}

	.cart-fulfilment-options button {
		min-height: 56px !important;
		font-size: 0.72rem !important;
		padding-left: 0.7rem !important;
		padding-right: 0.7rem !important;
	}
}


/* ========================================================================== 
   CART PAGE - FINAL EMPTY/COUNT/FULFILMENT/FOOTER REFINEMENT
   ========================================================================== */

/* 1. Empty state: remove the entire Cart heading row. */
body.cart-page.cart-is-empty .cart-page-heading {
	display: none !important;
}

body.cart-page.cart-is-empty .cart-page-items {
	min-height: calc(100svh - 82px) !important;
}

/* 2. Non-empty count badge: same text size, smaller circle. */
body.cart-page:not(.cart-is-empty) .cart-page-heading [data-cart-page-count] {
	width: 1.55rem !important;
	height: 1.55rem !important;
	min-width: 1.55rem !important;
	font-size: 0.88rem !important;
	line-height: 1 !important;
}

/* Cart count circle distance from Cart text */
body.cart-page:not(.cart-is-empty) .cart-page-heading h1 {
	gap: .85rem !important;
}

/* 3. Fulfilment buttons: flatter, wider, smaller typography - reference proportions. */
.cart-fulfilment-options {
	width: calc(100% + .8rem) !important;
	margin-left: -.4rem !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: .75rem !important;
}

.cart-fulfilment-options button {
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	padding: 0 .65rem !important;
	font-size: .64rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .12em !important;
	white-space: nowrap !important;
}

.cart-fulfilment-options button small {
	display: inline !important;
	margin-left: .48rem !important;
	font-size: .55rem !important;
	font-weight: 600 !important;
	letter-spacing: .055em !important;
	line-height: 1 !important;
}

/* 4. Footer: the footer was rendered, but body/#page-wrapper were locked so it
      could never be reached. Keep the cart workspace one viewport tall, then
      allow the document to continue naturally into the shared footer. */
@media screen and (min-width: 821px) {
	body.cart-page {
		height: auto !important;
		min-height: 100svh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	body.cart-page #page-wrapper {
		height: auto !important;
		min-height: 100svh !important;
		overflow: visible !important;
	}

	body.cart-page .site-footer {
		display: block !important;
		position: relative !important;
	}
}

@media screen and (max-width: 820px) {
	body.cart-page.cart-is-empty .cart-page-items {
		min-height: calc(100svh - 68px) !important;
	}

	body.cart-page:not(.cart-is-empty) .cart-page-heading [data-cart-page-count] {
		width: 1.4rem !important;
		height: 1.4rem !important;
		min-width: 1.4rem !important;
	}

	.cart-fulfilment-options {
		width: 100% !important;
		margin-left: 0 !important;
		gap: .6rem !important;
	}

	.cart-fulfilment-options button {
		height: 44px !important;
		min-height: 44px !important;
		font-size: .62rem !important;
	}

	.cart-fulfilment-options button small {
		font-size: .53rem !important;
	}
}


/* ==========================================================================
   CART EMPTY STATE - SMALLER COPY + BROWN CTA
   ========================================================================== */


/* ==========================================================================
   CART EMPTY STATE - FIXED BUTTON SIZE ACROSS ALL VIEWPORTS
   ========================================================================== */


.cart-page-empty-button {

	font-weight: 500 !important;
	text-transform: uppercase !important;

	width: 190px !important;
	height: 40px !important;
	min-width: 190px !important;
	max-width: 190px !important;
	min-height: 45px !important;
	max-height: 45px !important;
	padding: 0 20px !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	font-size: .68rem !important;
	line-height: 1 !important;
	letter-spacing: .08em !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

/* Keep the exact same size at every breakpoint. */
/* @media screen and (max-width: 1280px),
screen and (max-width: 1080px),
screen and (max-width: 820px),
screen and (max-width: 736px),
screen and (max-width: 480px) {
	.cart-page-empty-button {
		width: 190px !important;
		height: 40px !important;
		min-width: 190px !important;
		max-width: 190px !important;
		min-height: 45px !important;
		max-height: 45px !important;
		padding: 0 20px !important;
		font-size: .68rem !important;
	}
} */



/* ==========================================================================
   FLOWERS + OCCASIONS — SHARED CATALOGUE SYSTEM
   One source of truth. Only the available filter OPTIONS differ.
   ========================================================================== */

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

/* ---------- PAGE BASE ---------- */

.flowers-page #header-wrapper,
.occasions-page #header-wrapper {
	padding: 0;
	background: var(--cream);
}

.flowers-page .wrapper,
.occasions-page .occasions-wrapper {
	padding: 0;
	background: var(--cream);

	/* IMPORTANT:
	   the global .wrapper uses overflow-x:hidden, which can stop
	   position:sticky from behaving as expected. */
	overflow: visible !important;
}

.flowers-hero,
.occasions-hero {
	width: 100%;
	height: clamp(280px, 38vh, 460px);
	background: var(--db-flowers-hero, url('../../images/flowers-hero2.webp')) center center / cover no-repeat;
}

/* Both pages now have IDENTICAL content width and top padding. */
.flowers-page .flowers-content,
.occasions-page .occasions-content {
	width: min(92vw, 1540px);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(3.6rem, 5.2vw, 5.6rem) 0 clamp(3rem, 4.5vw, 4.8rem);
	overflow: visible;
}

/* ---------- IDENTICAL HEADER / FILTER SPACING ---------- */

.flowers-page .flowers-intro,
.occasions-page .occasions-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
	gap: clamp(2rem, 7vw, 9rem);
	align-items: center;

	/* This is the ONLY title-to-filter spacing value. */
	margin: 0 0 1.5rem;
	padding: 0;
	text-align: left;
	color: var(--brown);
}

.flowers-page .flowers-intro h1,
.occasions-page .occasions-intro h1 {
	margin: 0;
	padding: 0;
	font-family: var(--serif);
	font-size: var(--h2-font-size);
	font-style: italic;
	font-weight: 400;
	line-height: .95;
	letter-spacing: 0;
	color: var(--brown);
}

.flowers-page .flowers-intro h1::after,
.occasions-page .occasions-intro h1::after {
	display: none;
	content: none;
}

.flowers-page .flowers-intro p,
.occasions-page .occasions-intro p {
	width: auto;
	max-width: 540px;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: var(--p-bloom-bar-font-size) !important;
	font-weight: 400;
	line-height: 1.55;
	color: var(--walnut-husk);
}

/* ---------- THE ONLY STICKY ELEMENT ---------- */

.flowers-page .catalogue-filter-bar,
.occasions-page .catalogue-filter-bar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--site-nav-height);
	z-index: 100;

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;

	width: 100%;
	margin: 0 0 38px;
	padding: 8px 0;

	background: var(--cream);
	box-sizing: border-box;
}

/* Full-width cream background while the actual controls remain aligned
   to the catalogue content width. This removes the thin side line. */
.flowers-page .catalogue-filter-bar::before,
.occasions-page .catalogue-filter-bar::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--cream);
	pointer-events: none;
}

/* Respect anything intentionally hidden in the HTML/JS.
   This prevents an old/duplicate secondary filter from being forced visible. */
.catalogue-filter-bar[hidden],
.catalogue-secondary-filters[hidden],
.catalogue-primary-filters[hidden] {
	display: none !important;
}

/* ---------- PRIMARY FILTERS ---------- */

.catalogue-primary-filters,
.occasions-page .occasion-filters {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 28px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	white-space: nowrap;
}

.catalogue-primary-filters button,
.occasions-page .occasion-filters button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: baseline;

	height: auto;
	margin: 0;
	padding: 0 0 10px;
	position: relative;

	border: 0;
	border-radius: 0;
	background: transparent;

	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--walnut-husk);

	opacity: .66;
	cursor: pointer;
}

.catalogue-primary-filters button::after,
.occasions-page .occasion-filters button::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}

.catalogue-primary-filters button:hover,
.catalogue-primary-filters button.is-active,
.occasions-page .occasion-filters button:hover,
.occasions-page .occasion-filters button.is-active {
	opacity: 1;
}

.catalogue-primary-filters button:hover::after,
.catalogue-primary-filters button.is-active::after,
.occasions-page .occasion-filters button:hover::after,
.occasions-page .occasion-filters button.is-active::after {
	transform: scaleX(1);
}

.occasions-page .occasion-filters>span {
	display: none !important;
}

/* ---------- CATEGORY / SORT CONTROLS ---------- */

.catalogue-secondary-filters {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 22px;
	flex: 0 0 auto;
	min-width: 0;
}

.catalogue-secondary-filters label {
	display: flex;
	align-items: baseline;
	height: auto;
	margin: 0;
	position: relative;
}

.catalogue-secondary-filters select {
	appearance: none;
	-webkit-appearance: none;

	height: auto;
	min-width: 0;
	margin: 0;
	padding: 0 17px 10px 0;

	border: 0;
	background-color: transparent;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 7px) calc(50% - 5px),
		calc(100% - 3px) calc(50% - 5px);
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;

	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-stone);

	opacity: .66;
	cursor: pointer;
}

.catalogue-secondary-filters select:focus {
	outline: none;
}

/* ---------- FILTERED RESULTS ---------- */

.flowers-page .flower-category[hidden],
.flowers-page .product-card[hidden],
.occasions-page .product-card[hidden] {
	display: none !important;
}

.occasion-results {
	scroll-margin-top: calc(var(--site-nav-height) + 56px);
}

/* ---------- TABLET ---------- */

@media screen and (max-width: 980px) {

	.flowers-page .catalogue-filter-bar,
	.occasions-page .catalogue-filter-bar {
		gap: 16px;
	}

	.catalogue-primary-filters,
	.occasions-page .occasion-filters {
		gap: 18px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.catalogue-primary-filters::-webkit-scrollbar,
	.occasions-page .occasion-filters::-webkit-scrollbar {
		display: none;
	}

	.catalogue-secondary-filters {
		gap: 12px;
	}
}

/* ---------- MOBILE ---------- */

@media screen and (max-width: 780px) {

	.flowers-hero,
	.occasions-hero {
		height: clamp(230px, 34vh, 330px);
	}

	.flowers-page .flowers-content,
	.occasions-page .occasions-content {
		width: min(90vw, 680px);
		padding-top: 3.2rem;
	}

	.flowers-page .flowers-intro,
	.occasions-page .occasions-intro {
		display: block;
		margin-bottom: 1.5rem;
	}

	.flowers-page .flowers-intro h1,
	.occasions-page .occasions-intro h1 {
		margin-bottom: 1.1rem;
		font-size: var(--h2-font-size-480);
	}

	.flowers-page .flowers-intro p,
	.occasions-page .occasions-intro p {
		max-width: none;
		font-size: 12.5px;
	}

	/* POSSE-INSPIRED MOBILE FILTER:
	   row 1 = horizontally swipeable categories
	   row 2 = utility controls such as Category / Sort By */
	.flowers-page .catalogue-filter-bar,
	.occasions-page .catalogue-filter-bar {
		top: var(--site-nav-height);
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		margin: 0 0 24px;
		padding: 0;
		background: var(--cream);
		border-top: 1px solid rgba(74, 36, 18, .12);
		border-bottom: 1px solid rgba(74, 36, 18, .12);
	}

	.catalogue-primary-filters,
	.occasions-page .occasion-filters {
		width: 100%;
		gap: 26px;
		padding: 14px 0 12px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-bottom: 1px solid rgba(74, 36, 18, .12);
	}

	.catalogue-primary-filters::-webkit-scrollbar,
	.occasions-page .occasion-filters::-webkit-scrollbar {
		display: none;
	}

	.catalogue-primary-filters button,
	.occasions-page .occasion-filters button {
		flex: 0 0 auto;
		padding: 0 0 5px;
		font-family: var(--sans);
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: var(--site-nav-letter-spacing);
		text-transform: var(--site-nav-text-transform);
		color: var(--espresso);
		opacity: .72;
		white-space: nowrap;
	}

	.catalogue-primary-filters button::after,
	.occasions-page .occasion-filters button::after {
		bottom: 0;
		height: 1px;
	}

	.catalogue-primary-filters button:hover,
	.catalogue-primary-filters button.is-active,
	.occasions-page .occasion-filters button:hover,
	.occasions-page .occasion-filters button.is-active {
		color: var(--espresso);
		opacity: 1;
	}

	.catalogue-secondary-filters {
		width: 100%;
		min-height: 52px;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 28px;
	}

	.catalogue-secondary-filters label {
		display: flex;
		align-items: center;
		min-height: 52px;
		margin: 0;
	}

	.catalogue-secondary-filters select {
		padding: 0 20px 0 0;
		font-family: var(--sans);
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: var(--site-nav-letter-spacing);
		text-transform: var(--site-nav-text-transform);
		color: var(--espresso);
		opacity: 1;
		background-position:
			calc(100% - 8px) 50%,
			calc(100% - 4px) 50%;
		background-size: 4px 4px, 4px 4px;
	}

	.flowers-page .catalogue-filter-bar::before,
	.occasions-page .catalogue-filter-bar::before {
		background: var(--cream);
	}
}

/* ==========================================================================
   END SHARED FLOWERS + OCCASIONS CATALOGUE SYSTEM
   ========================================================================== */

/* ================================================================
   Homepage: lock intro copy and offering cards to the same edge
   The intro previously used viewport padding while cards used a % width,
   which can diverge at small responsive sizes. Use one shared width instead.
   ================================================================ */
@media screen and (max-width: 820px) {
	.home-offerings-section {
		--home-offering-mobile-width: 82%;
	}

	.home-offerings-intro {
		box-sizing: border-box;
		width: var(--home-offering-mobile-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.home-offering-card {
		width: var(--home-offering-mobile-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media screen and (max-width: 480px) {
	.home-offerings-section {
		--home-offering-mobile-width: 84%;
	}

	.home-offerings-intro,
	.home-offering-card {
		width: var(--home-offering-mobile-width) !important;
	}
}

/* ========================================================================== 
   POTLUCK MOBILE - kit spacing + editorial swipe gallery
   ========================================================================== */

/* The page wrappers disappear into the existing desktop grid. */
.potluck-gallery-page {
	display: contents;
}

@media screen and (max-width: 820px) {

	.potluck-kit-copy h3,
	.potluck-kit-copy>p,
	.potluck-kit-guests,
	.potluck-kit-price {
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.potluck-kit-price {
		padding-bottom: .15rem;
	}

	.potluck-kit-button {
		position: relative;
		margin-top: .25rem;
		align-self: start !important;
	}
}

@media screen and (max-width: 480px) {
	.potluck-kit-copy {
		row-gap: .48rem !important;
	}

}

/* ========================================================================== 
   POTLUCK GALLERY - responsive geometry / resize stability
   Large screens keep the 1 + 8 square mosaic. Smaller windows become a
   one-image swipe rail. Every mode is constrained to one viewport chapter.
   ========================================================================== */

/* Large desktop: keep the title visible and constrain the 3:1 mosaic by BOTH
   viewport width and the vertical space left beneath the heading. */
@media screen and (min-width: 1101px) {
	.potluck-gallery-section {
		height: calc(100svh - 82px) !important;
		min-height: 0 !important;
		max-height: calc(100svh - 82px) !important;
		padding: clamp(1.4rem, 2.5svh, 2.6rem) 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		overflow: hidden !important;
	}

	.potluck-gallery-heading {
		flex: 0 0 auto !important;
		width: 100% !important;
		padding-left: clamp(4rem, 6vw, 7rem) !important;
		padding-right: clamp(4rem, 6vw, 7rem) !important;
	}

	.potluck-gallery-heading h2 {
		margin-bottom: clamp(.8rem, 1.8svh, 1.35rem) !important;
	}

	.potluck-gallery-grid {
		/* 1 big 2x2 square + eight 1x1 squares = exact 3:1 overall ratio. */
		width: min(100vw, calc((100svh - 82px - 9.5rem) * 3)) !important;
		max-width: 100vw !important;
		height: auto !important;
		aspect-ratio: 3 / 1 !important;
		margin: 0 auto !important;
		transform: none !important;
		flex: 0 1 auto !important;
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
		gap: 7px !important;
		overflow: hidden !important;
	}

	.potluck-gallery-grid figure {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
	}

	.potluck-gallery-grid .potluck-gallery-feature {
		grid-column: span 2 !important;
		grid-row: span 2 !important;
	}

	.potluck-gallery-grid img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Smaller desktop / tablet / mobile: one image at a time, horizontal swipe.
   The next image peeks in slightly, but the chapter never exceeds the viewport. */
@media screen and (max-width: 1100px) {
	.potluck-gallery-section {
		height: calc(100svh - 82px) !important;
		min-height: 0 !important;
		max-height: calc(100svh - 82px) !important;
		padding: clamp(1.8rem, 4svh, 3rem) 0 clamp(1.4rem, 3svh, 2.2rem) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		overflow: hidden !important;
	}

	.potluck-gallery-heading {
		flex: 0 0 auto !important;
		padding: 0 5vw !important;
		text-align: left !important;
	}

	.potluck-gallery-heading h2 {
		margin-bottom: clamp(1.6rem, 3.5svh, 2.5rem) !important;
	}

	.potluck-gallery-grid {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
		transform: none !important;
		padding: 0 5vw !important;
		display: flex !important;
		flex: 1 1 auto !important;
		gap: 12px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding-left: 5vw !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	.potluck-gallery-grid::-webkit-scrollbar {
		display: none !important;
	}

	.potluck-gallery-grid figure,
	.potluck-gallery-grid .potluck-gallery-feature,
	.potluck-gallery-grid figure:nth-child(n) {
		display: block !important;
		flex: 0 0 86% !important;
		width: 86% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		grid-column: auto !important;
		grid-row: auto !important;
		scroll-snap-align: start !important;
		overflow: hidden !important;
	}

	.potluck-gallery-grid img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	.potluck-gallery-toggle {
		display: none !important;
	}
}

/* Tablet / small-laptop "in-between" zone: same 1 + 8 mosaic language as
   desktop (a 2x2 feature square plus eight 1x1 squares), but here the
   mosaic is allowed to run wider than the viewport. Land on the feature
   with the next column peeking in, then swipe/scroll right for the rest.
   The chapter itself is still capped to one screen - only the grid scrolls. */
@media screen and (min-width: 821px) and (max-width: 1100px) {
	.potluck-gallery-grid {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-template-columns: none !important;
		grid-template-rows: repeat(2, 1fr) !important;
		grid-auto-columns: max-content !important;
		width: auto !important;
		max-width: none !important;
		height: 100% !important;
		flex: 1 1 auto !important;
		gap: 7px !important;
		padding: 0 5vw !important;
		margin: 0 !important;
		transform: none !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding-left: 5vw !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	.potluck-gallery-grid::-webkit-scrollbar {
		display: none !important;
	}

	.potluck-gallery-grid figure,
	.potluck-gallery-grid figure:nth-child(n) {
		display: block !important;
		flex: none !important;
		width: auto !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
		scroll-snap-align: start !important;
		overflow: hidden !important;
	}

	/* Specificity note: the swipe-rail rule above (shared with the 820px
	   mode) groups a :nth-child(n) selector, which quietly outranks a plain
	   two-class selector here  - so this override repeats the class to win. */
	.potluck-gallery-grid .potluck-gallery-feature.potluck-gallery-feature {
		grid-column: span 2 !important;
		grid-row: span 2 !important;
	}

	.potluck-gallery-grid img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	.potluck-gallery-toggle {
		display: none !important;
	}
}

@media screen and (max-width: 820px) {
	.potluck-gallery-section {
		height: calc(100svh - 68px) !important;
		max-height: calc(100svh - 68px) !important;
		scroll-margin-top: 68px !important;
		padding-top: clamp(2rem, 5svh, 3rem) !important;
		padding-bottom: clamp(1.25rem, 3svh, 2rem) !important;
	}

	.potluck-gallery-heading {
		padding-left: 5vw !important;
		padding-right: 5vw !important;
	}

	.potluck-gallery-heading h2 {
		margin-bottom: clamp(2rem, 4.5svh, 3rem) !important;
	}

	.potluck-gallery-grid {
		padding-left: 5vw !important;
		padding-right: 5vw !important;
		scroll-padding-left: 5vw !important;
		gap: 10px !important;
	}

	.potluck-gallery-grid figure,
	.potluck-gallery-grid .potluck-gallery-feature,
	.potluck-gallery-grid figure:nth-child(n) {
		flex-basis: 88% !important;
		width: 88% !important;
	}
}

/* Mobile gallery: shorter, near-square swipe cards */
@media screen and (max-width: 820px) {
	.potluck-gallery-grid {
		flex: 0 0 auto !important;
		height: auto !important;
	}

	.potluck-gallery-grid figure,
	.potluck-gallery-grid .potluck-gallery-feature,
	.potluck-gallery-grid figure:nth-child(n) {
		height: auto !important;
		aspect-ratio: 1 / 1.08 !important;
	}

	.potluck-gallery-grid img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* ==========================================================================
   POTLUCK - Choose your kit: keep desktop editorial layout down to 821px
   Fixes the 821-1080px range where the track was being squeezed into one column.
   ========================================================================== */
@media screen and (min-width: 821px) and (max-width: 1080px) {
	.potluck-kits {
		display: grid !important;
		grid-template-columns: minmax(170px, .42fr) minmax(0, 1.58fr) !important;
		gap: clamp(1.5rem, 2.5vw, 2.4rem) !important;
		align-items: center !important;
		align-content: center !important;
		padding: clamp(2.2rem, 3.2vw, 3rem) 3.5vw clamp(2.8rem, 4vw, 3.8rem) !important;
		overflow: hidden !important;
	}

	.potluck-kits-intro {
		max-width: 240px !important;
		align-self: start !important;
	}

	.potluck-kits-intro h2 {
		font-size: clamp(3rem, 5vw, 4.1rem) !important;
		margin-bottom: 1.8rem !important;
		line-height: .98 !important;
	}

	.potluck-kits-intro p {
		font-size: clamp(.88rem, 1.2vw, 0.9rem) !important;
		line-height: 1.5 !important;
	}

	.potluck-kits-track {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: clamp(1.2rem, 2vw, 1.8rem) !important;
		min-width: 0 !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	.potluck-kit-card {
		min-width: 0 !important;
		width: 100% !important;
		height: 100% !important;
		display: grid !important;
		grid-template-rows: auto 1fr !important;
	}

	.potluck-kit-image {
		width: 100% !important;
		aspect-ratio: 1.54 / 1 !important;
	}

	.potluck-kit-copy {
		padding: .85rem .25rem 0 !important;
		grid-template-rows: auto auto auto auto 46px !important;
		row-gap: .42rem !important;
	}

	.potluck-kit-copy h3 {
		font-size: clamp(1.7rem, 2.8vw, 2.25rem) !important;
		line-height: 1 !important;
		margin-bottom: .45rem !important;
	}

	.potluck-kit-copy>p:not(.potluck-kit-guests):not(.potluck-kit-price) {
		/* font-size: clamp(.76rem, 1.25vw, .88rem) !important; */
		font-size: clamp(.82rem, 1.3vw, .9rem) !important;
		line-height: 1.38 !important;
		margin-bottom: .35rem !important;
	}

	.potluck-kit-guests,
	.potluck-kit-price {
		font-size: clamp(.88rem, 1.3vw, .98rem) !important;
	}

	.potluck-kit-price {
		margin-top: .45rem !important;
	}

	.potluck-kit-button {
		min-width: 0 !important;
		width: fit-content !important;
		height: 46px !important;
		margin-top: .8rem !important;
		padding: 0 1.15rem !important;
		font-size: .64rem !important;
	}
}




/* ==========================================================================
   BLOOM BAR - remove false gap beneath the fixed navbar
   ========================================================================== */
.bloom-bar-page #header-wrapper {
	height: var(--site-nav-height) !important;
	min-height: var(--site-nav-height) !important;
	max-height: var(--site-nav-height) !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #f8f3e9 !important;
	background-image: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.bloom-bar-page #header {
	height: var(--site-nav-height) !important;
	min-height: var(--site-nav-height) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.bloom-bar-page main {
	margin: 0 !important;
	padding: 0 !important;
}

.bloom-bar-page .bloom-section {
	height: calc(100svh - var(--site-nav-height)) !important;
	scroll-margin-top: var(--site-nav-height) !important;
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-section {
		height: auto !important;
		min-height: calc(100svh - var(--site-nav-height)) !important;
	}
}

/* ==========================================================================
   BLOOM BAR CTA - same width/height proportion at every size
   ========================================================================== */
.bloom-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: clamp(220px, 15vw, 250px) !important;
	height: auto !important;
	aspect-ratio: var(--bloom-button-ratio) !important;
	padding: 0 1.35rem !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   BLOOM BAR - mobile
   ========================================================================== */
@media screen and (max-width: 780px) {

	.bloom-bar-page #header-wrapper,
	.bloom-bar-page #header {
		height: var(--site-nav-height) !important;
		min-height: var(--site-nav-height) !important;
		max-height: var(--site-nav-height) !important;
	}

	.bloom-bar-page .bloom-section {
		min-height: calc(100svh - var(--site-nav-height)) !important;
		scroll-margin-top: var(--site-nav-height) !important;
	}

	/* Force exactly two title lines: The / Bloom Bar. */
	.bloom-hero-inner h1 {
		font-size: 0 !important;
		line-height: 1 !important;
		margin-bottom: 1.65rem !important;
	}

	.bloom-hero-inner h1::before {
		content: "The\A Bloom Bar";
		white-space: pre-line;
		display: block;
		font-family: var(--serif);
		font-size: clamp(4rem, 15vw, 5.7rem);
		line-height: .92;
		letter-spacing: -.035em;
		font-style: italic;
		font-weight: 400;
		color: inherit;
	}

	.bloom-button {
		width: clamp(205px, 48vw, 230px) !important;
		max-width: 230px !important;
		aspect-ratio: var(--bloom-button-ratio) !important;
		padding: 0 1rem !important;
	}
}


/* ===== Bloom Bar tier cards: editorial pricing style ===== */
.bloom-tier-grid {
	gap: clamp(1.4rem, 2.8vw, 2.6rem) !important;
	align-items: stretch !important;
	margin-bottom: clamp(2.5rem, 3.7dvh, 3.5rem) !important;
}

.bloom-tier {
	position: relative !important;
	background: transparent !important;
	padding: 0 !important;
	border: 1px solid rgba(74, 36, 18, .14) !important;
	min-width: 0 !important;
	display: flex !important
}

.bloom-tier:nth-child(2) {
	background: #ebe7de !important;
	border-color: transparent !important
}

.bloom-tier-inner {
	position: relative !important;
	width: 100% !important;
	min-height: clamp(460px, 50vh, 600px) !important;
	height: 100% !important;
	border: 0 !important;
	padding: clamp(2.4rem, 3.4vw, 4rem) clamp(2rem, 3.2vw, 3.8rem) clamp(2rem, 3vw, 3rem) !important;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	text-align: center !important
}

.bloom-tier::before {
	position: absolute;
	top: clamp(1.9rem, 2.7vw, 2.8rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	line-height: 1;
	font-weight: 400;
	color: rgba(74, 36, 18, .28)
}

.bloom-tier:nth-child(1)::before {
	content: "01"
}

.bloom-tier:nth-child(2)::before {
	content: "02"
}

.bloom-tier:nth-child(3)::before {
	content: "03"
}

.bloom-tier-label {
	order: -2;
	margin: clamp(2.2rem, 3vw, 3rem) 0 .8rem !important;
	text-transform: uppercase !important;
	letter-spacing: .24em !important;
	font-size: .72rem !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;
	color: rgba(74, 36, 18, .78) !important
}

.bloom-tier h3 {
	order: -1;
	font-family: var(--serif) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: clamp(2rem, 2.8vw, 2.8rem) !important;
	line-height: 1 !important;
	margin: 0 0 1rem !important;
	color: var(--brown) !important
}

.bloom-tier-price {
	margin: 0 0 clamp(1.5rem, 2.2vw, 2.1rem) !important;
	text-transform: uppercase !important;
	letter-spacing: .2em !important;
	font-size: .76rem !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;
	color: rgba(74, 36, 18, .9) !important
}

.bloom-tier hr {
	width: 100% !important;
	border: 0 !important;
	border-top: 1px solid rgba(74, 36, 18, .13) !important;
	margin: 0 0 clamp(1.7rem, 2.4vw, 2.2rem) !important
}

.bloom-tier-inner>p:not(.bloom-tier-price):not(.bloom-tier-label):not(.bloom-stem-count) {
	max-width: 92% !important;
	margin: 0 auto clamp(1.7rem, 2.4vw, 2.3rem) !important;
	font-size: clamp(.86rem, 1vw, .98rem) !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: rgba(74, 36, 18, .72) !important
}

.bloom-tier ul {
	width: min(92%, 330px) !important;
	margin: 0 auto 1.3rem !important;
	padding: 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
	text-align: left !important
}

.bloom-tier li {
	position: relative !important;
	padding: .48rem 0 .48rem 2rem !important;
	font-size: .72rem !important;
	line-height: 1 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	color: rgba(74, 36, 18, .88) !important
}

.bloom-tier li::before {
	content: "";
	position: absolute;
	left: .45rem;
	top: 1.05em;
	width: 1rem;
	height: 1px;
	background: rgba(74, 36, 18, .38)
}

.bloom-stem-count {
	margin-top: auto !important;
	padding-top: 1.2rem !important;
	margin-bottom: 0 !important;
	font-family: var(--serif) !important;
	font-style: italic !important;
	font-size: .9rem !important;
	line-height: 1.3 !important;
	color: rgba(74, 36, 18, .62) !important
}

.bloom-pricing {
	background: var(--cream) !important;
	padding-top: clamp(2.5rem, 4vw, 4.5rem) !important;
	padding-bottom: clamp(2.5rem, 4vw, 4.5rem) !important
}

@media screen and (max-width:820px) {
	.bloom-tier-grid {
		gap: 1rem !important;
		padding: 0 7vw .9rem !important
	}

	.bloom-tier {
		flex: 0 0 min(84%, 390px) !important
	}

	.bloom-tier-inner {
		min-height: 500px !important;
		padding: 2.5rem 1.75rem 1.8rem !important
	}

	.bloom-tier::before {
		top: 1.8rem !important;
		font-size: 1.15rem !important
	}

	.bloom-tier-label {
		margin-top: 2rem !important;
		font-size: .67rem !important
	}

	.bloom-tier h3 {
		font-size: clamp(2rem, 8vw, 2.5rem) !important
	}

	.bloom-tier-price {
		font-size: .7rem !important
	}

	.bloom-tier-inner>p:not(.bloom-tier-price):not(.bloom-tier-label):not(.bloom-stem-count) {
		font-size: .88rem !important
	}

	.bloom-tier ul {
		width: 100% !important
	}

	.bloom-stem-count {
		font-size: .86rem !important
	}
}

/* ==========================================================================\n   CART PAGE — editorial item row (reference layout)\n   ========================================================================== */
.cart-page-item {
	grid-template-columns: 130px minmax(0, 1fr) !important;
	gap: clamp(1.5rem, 2.4vw, 2.5rem) !important;
	min-height: 188px !important;
	padding: 1.15rem 0 !important;
	align-items: stretch !important;
}

.cart-page-item-image {
	width: 120px !important;
	height: 140px !important;
	align-self: start !important;
}

.cart-page-item-info {
	min-height: 160px !important;
	padding-top: .75rem !important;
	padding-bottom: .15rem !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	gap: .8rem !important;
}

.cart-page-item-top {
	display: block !important;
}

.cart-page-item-top h2 {
	margin: 0 0 .28rem !important;
	font-family: var(--serif) !important;
	font-size: clamp(1.2rem, 1vw, 1.25rem) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.08 !important;
	color: var(--brown) !important;
}

.cart-page-item-price {
	display: block !important;
	margin: 0 0 .28rem !important;
	font-family: var(--sans) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	color: var(--walnut-husk) !important;
	padding-top: 5px;

}

.cart-page-item-meta {
	margin: 0 !important;
	font-family: var(--sans) !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: .04em !important;
	color: var(--walnut-husk) !important;
	padding-top: 5px;
}

.cart-page-item-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin-top: auto !important;
}

@media screen and (max-width: 820px) {
	.cart-page-item {
		grid-template-columns: 112px minmax(0, 1fr) !important;
		gap: 1rem !important;
		min-height: 150px !important;
		padding: .9rem 0 !important;
	}

	.cart-page-item-image {
		width: 112px !important;
		height: 132px !important;
	}

	.cart-page-item-info {
		min-height: 132px !important;
		padding-top: .35rem !important;
		gap: .55rem !important;
	}

	.cart-page-item-top h2 {
		font-size: 1.08rem !important;
	}

	.cart-page-item-price {
		font-size: .82rem !important;
	}

	.cart-page-item-meta {
		font-size: .66rem !important;
	}

	.cart-page-qty {
		gap: .75rem !important;
	}

	.cart-page-item-links {
		gap: .8rem !important;
	}

	.cart-page-item-links button {
		font-size: .58rem !important;
	}
}

@media screen and (max-width: 480px) {
	.cart-page-item {
		grid-template-columns: 92px minmax(0, 1fr) !important;
		gap: .85rem !important;
	}

	.cart-page-item-image {
		width: 92px !important;
		height: 112px !important;
	}

	.cart-page-item-info {
		min-height: 112px !important;
		padding-top: .2rem !important;
	}

	.cart-page-item-bottom {
		gap: .6rem !important;
	}

	.cart-page-qty {
		gap: .45rem !important;
	}

	.cart-page-item-links {
		gap: .55rem !important;
	}
}

/* ==========================================================================
   CART ITEMS - reference-style details
   Title + price + SIZE/MESSAGE stack, then quantity/Edit/Remove on one row.
   ========================================================================== */

.cart-page-item-info {
	padding-top: .55rem !important;
}

.cart-page-item-top {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0 !important;
}

.cart-page-item-top h2 {
	margin: 0 0 .25rem !important;
}

.cart-page-item-price {
	display: block !important;
	margin: 0 0 1.05rem !important;
	font-family: var(--serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--brown) !important;
	white-space: nowrap !important;
}

.cart-page-item-options {
	display: flex !important;
	flex-direction: column !important;
	gap: .22rem !important;
	margin: 0 !important;
}

.cart-page-item-option {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--sans) !important;
	font-size: .7rem !important;
	line-height: 1.4 !important;
	letter-spacing: .02em !important;
	color: var(--walnut-husk) !important;
}

.cart-page-item-option span {
	margin-right: .28rem !important;
	font-weight: 200 !important;
	letter-spacing: .12em !important;
	color: var(--walnut-husk) !important;
}

.cart-page-item-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin-top: auto !important;
}

.cart-page-qty {
	display: inline-flex !important;
	align-items: center !important;
	gap: .18rem !important;
	height: 30px !important;
	line-height: 1 !important;
}

.cart-page-qty button,
.cart-page-qty>span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	min-width: 20px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

.cart-page-item-links {
	display: inline-flex !important;
	align-items: center !important;
	gap: 1.6rem !important;
	height: 30px !important;
	margin-left: auto !important;
}

.cart-page-item-links button {
	display: inline-flex !important;
	align-items: center !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* The old combined 'M - With Message' line is no longer rendered. */
.cart-page-item-meta {
	display: none !important;
}

@media screen and (max-width: 820px) {
	.cart-page-item-info {
		padding-top: .3rem !important;
	}

	.cart-page-item-price {
		margin-bottom: .7rem !important;
		font-size: .84rem !important;
	}

	.cart-page-item-option {
		font-size: .64rem !important;
	}

	.cart-page-item-bottom {
		gap: .6rem !important;
	}

	.cart-page-qty {
		gap: .08rem !important;
	}

	.cart-page-item-links {
		gap: .8rem !important;
	}
}

@media screen and (max-width: 480px) {
	.cart-page-item-info {
		padding-top: .2rem !important;
	}

	.cart-page-item-price {
		margin-bottom: .55rem !important;
	}

	.cart-page-item-option {
		font-size: .6rem !important;
	}

	.cart-page-item-links {
		gap: .55rem !important;
	}
}


.checkout-page-heading h1 {
	font-family: var(--serif) !important;
	font-style: italic !important;
	font-weight: 400 !important;
}


.checkout-promo>div {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.checkout-promo input,
.checkout-promo button {
	height: 52px !important;
	box-sizing: border-box !important;
}

.checkout-promo input {
	flex: 1;
}

.checkout-promo input:focus {
	outline: none !important;
	border: .5px solid var(--brown) !important;
	box-shadow: none !important;
}

.checkout-promo button {
	margin: 0 !important;
	padding: 0 28px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}


.checkout-card .checkout-field {
	margin: 0 !important;
	min-height: 0 !important;
}

.checkout-card .checkout-field>span {
	display: block;
	margin: 0 0 4px !important;
}

.checkout-card .checkout-field input {
	height: 20px !important;
	min-height: 0 !important;
	padding: 0 !important;
	line-height: 20px !important;
}

.checkout-card .checkout-field textarea {
	margin-top: 4px !important;
	font-size: 0.8rem !important;

}


/* ==========================================================================
   SHARED DATE CALENDAR - CART + BLOOM BAR ENQUIRY
   Single source of truth for the visual calendar component.
   Both pages keep their own trigger/input styling, but the popover/calendar
   itself is styled here once.
   ========================================================================== */

.cart-calendar-popover,
.event-calendar-popover {
	position: absolute !important;
	top: calc(100% + 5px) !important;
	left: 0 !important;
	z-index: 100 !important;

	width: min(350px, calc(100vw - 40px)) !important;
	padding: 18px 18px 16px !important;

	box-sizing: border-box !important;
	background: var(--cream, #fbf7ee) !important;
	border: 1px solid var(--line, rgba(74, 36, 18, .16)) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.cart-calendar-head,
.event-calendar-head {
	display: grid !important;
	grid-template-columns: 1fr auto auto !important;
	align-items: center !important;
	column-gap: 8px !important;
	margin-bottom: 14px !important;
}

.cart-calendar-head h3,
.event-calendar-head h3 {
	grid-column: 1 !important;
	grid-row: 1 !important;

	margin: 0 !important;
	text-align: left !important;
	white-space: nowrap !important;

	font-family: var(--serif, Georgia, 'Times New Roman', serif) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 1.05 !important;
	color: var(--brown, #4a2412) !important;
}

.cart-calendar-nav,
.event-calendar-nav {
	grid-row: 1 !important;

	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	border: 0 !important;
	background: transparent !important;
	color: var(--brown, #4a2412) !important;

	font-size: 22px !important;
	font-weight: 100 !important;
	line-height: 1 !important;
	text-align: center !important;

	cursor: pointer !important;
}

.cart-calendar-nav[data-calendar-prev],
#event-calendar-prev {
	grid-column: 2 !important;
}

.cart-calendar-nav[data-calendar-next],
#event-calendar-next {
	grid-column: 3 !important;
}

.cart-calendar-nav:disabled,
.event-calendar-nav:disabled {
	opacity: .22 !important;
	cursor: default !important;
}

.cart-calendar-weekdays,
.cart-calendar-grid,
.event-calendar-weekdays,
.event-calendar-grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	text-align: center !important;
}

.cart-calendar-weekdays,
.event-calendar-weekdays {
	margin-bottom: 5px !important;
}

.cart-calendar-weekdays span,
.event-calendar-weekdays span {
	padding: 2px 0 4px !important;

	font-family: var(--sans, 'Trebuchet MS', Arial, sans-serif) !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;

	color: #826b5f !important;
}

.cart-calendar-grid,
.event-calendar-grid {
	grid-auto-rows: 30px !important;
	row-gap: 0 !important;
}

.cart-calendar-day,
.event-calendar-day {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;

	margin: 0 auto !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	border: 1px solid transparent !important;
	border-radius: 50% !important;
	background: transparent !important;

	font-family: var(--sans, 'Trebuchet MS', Arial, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: .03em !important;

	color: var(--brown, #4a2412) !important;
	cursor: pointer !important;
}

.cart-calendar-day:hover:not(:disabled):not(.is-selected),
.event-calendar-day:hover:not(:disabled):not(.is-selected) {
	color: #b98b2e !important;
	border-color: #b98b2e !important;
	background: transparent !important;
}

.cart-calendar-day.is-selected,
.event-calendar-day.is-selected {
	width: 30px !important;
	height: 30px !important;

	background: transparent !important;
	color: #b98b2e !important;
	border: 1px solid #b98b2e !important;
	border-radius: 50% !important;
}

.cart-calendar-day.is-outside,
.event-calendar-day.is-outside {
	color: #c9beb1 !important;
}

.cart-calendar-day.is-disabled,
.cart-calendar-day:disabled,
.event-calendar-day.is-disabled,
.event-calendar-day:disabled {
	color: #d7cec4 !important;
	cursor: default !important;
}

.cart-calendar-day.is-disabled:hover,
.cart-calendar-day:disabled:hover,
.event-calendar-day.is-disabled:hover,
.event-calendar-day:disabled:hover {
	background: transparent !important;
	border-color: transparent !important;
	color: #d7cec4 !important;
}

@media screen and (max-width: 820px) {

	.cart-calendar-popover,
	.event-calendar-popover {
		width: min(330px, calc(100vw - 28px)) !important;
		padding: 16px 14px 14px !important;
		left: 0 !important;
		transform: none !important;
	}

	.cart-calendar-head h3,
	.event-calendar-head h3 {
		font-size: 20px !important;
	}

	.cart-calendar-grid,
	.event-calendar-grid {
		grid-auto-rows: 28px !important;
	}

	.cart-calendar-day,
	.event-calendar-day,
	.cart-calendar-day.is-selected,
	.event-calendar-day.is-selected {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		font-size: 11.5px !important;
	}
}

/* ==========================================================================
   END SHARED DATE CALENDAR
   ========================================================================== */

/* ==========================================================================
   CATALOGUE STICKY - ANCESTOR SAFETY
   ========================================================================== */

.flowers-page,
.occasions-page,
.flowers-page #page-wrapper,
.occasions-page #page-wrapper,
.flowers-page .wrapper,
.occasions-page .wrapper,
.flowers-page .flowers-content,
.occasions-page .occasions-content {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

.flowers-page .catalogue-filter-bar,
.occasions-page .catalogue-filter-bar {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: var(--site-nav-height) !important;
	z-index: 999 !important;
	align-self: start;
}

/* ==========================================================================
   END CATALOGUE STICKY - ANCESTOR SAFETY
   ========================================================================== */

/* === CATALOGUE MOBILE STICKY SAFETY 2026-08-28 === */
@media screen and (max-width: 980px) {

	html,
	body {
		overflow-x: clip !important;
	}

	.flowers-page #page-wrapper,
	.occasions-page #page-wrapper,
	.flowers-page .wrapper,
	.occasions-page .wrapper,
	.flowers-page .flowers-content,
	.occasions-page .occasions-content {
		overflow: visible !important;
	}

	.flowers-page .catalogue-filter-bar,
	.occasions-page .catalogue-filter-bar {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: var(--site-nav-height) !important;
		z-index: 999 !important;
	}
}

/* ==========================================================================
   OCCASIONS TABLET/MOBILE STICKY FALLBACK
   ========================================================================== */

.occasions-filter-sticky-placeholder {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

@media screen and (max-width: 980px) {
	.occasions-page .occasions-filter-bar.is-mobile-fixed {
		position: fixed !important;
		z-index: 9999 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		background: var(--cream) !important;
	}

	.occasions-page .occasions-filter-bar.is-mobile-fixed::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset: 0 auto 0 50%;
		width: 100vw;
		transform: translateX(-50%);
		background: var(--cream);
		pointer-events: none;
	}
}

/* ==========================================================================
   END OCCASIONS TABLET/MOBILE STICKY FALLBACK
   ========================================================================== */

/* ========================================================================== 
   BLOOM BAR — BUILT FOR YOUR KIND OF GATHERING
   Uses the site's standard breakpoint ladder: 1280 / 1080 / 820 / 736 / 480.
   ========================================================================== */

.bloom-bar-page .bloom-gatherings-section {
	background: var(--cream);
	color: var(--brown);
	/* Keep this chapter at least one full viewport below the desktop nav. */
	min-height: calc(100svh - 82px);
	padding: clamp(72px, 7vw, 108px) 5vw clamp(82px, 8vw, 122px);
	/* Anchor offset: keep the section title below the fixed desktop nav. */
	scroll-margin-top: 82px;
}

.bloom-bar-page .bloom-gatherings-inner {
	width: min(1120px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	column-gap: 72px;
	align-items: start;
}

.bloom-bar-page .bloom-gatherings-left {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Heading, intro and image deliberately share the same width/centre axis. */
.bloom-bar-page .bloom-gatherings-heading {
	width: 341px;
	max-width: 100%;
	text-align: center;
}

.bloom-bar-page .bloom-gatherings-heading h2 {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 45px;
	font-weight: 400;
	line-height: .99;
	letter-spacing: -.02em;
	color: inherit;
}

.bloom-bar-page .bloom-gatherings-heading p {
	margin: 16px auto 0;
	width: 100%;
	font-family: var(--sans);
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.55;
	color: var(--walnut-husk, #75665b);
}

.bloom-bar-page .bloom-gatherings-image {
	width: 341px;
	max-width: 100%;
	margin: 46px 0 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #eee7dc;
}

.bloom-bar-page .bloom-gatherings-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Weddings starts level with the intro copy, not the main heading. */
.bloom-bar-page .bloom-gatherings-list {
	padding-top: 113px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.bloom-bar-page .bloom-gathering-item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 24px;
	align-items: start;
	padding: 0;
}

.bloom-bar-page .bloom-gathering-no {
	padding-top: 5px;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	color: currentColor;
}

.bloom-bar-page .bloom-gathering-item h3 {
	margin: 0 0 12px;
	font-family: var(--serif);

	/* font-size: 27px; */
	font-size: clamp(23px, 2vw, 25px) !important;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: inherit;
}

.bloom-bar-page .bloom-gathering-item p {
	margin: 0;
	max-width: 520px;
	font-family: var(--sans);
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.58;
	color: var(--walnut-husk, #75665b);
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .bloom-gatherings-section {
		padding: 82px 5vw 96px;
	}

	.bloom-bar-page .bloom-gatherings-inner {
		width: min(1040px, 100%);
		column-gap: 58px;
	}

	.bloom-bar-page .bloom-gatherings-heading,
	.bloom-bar-page .bloom-gatherings-image {
		width: 320px;
	}

	.bloom-bar-page .bloom-gatherings-heading h2 {
		font-size: 40px;
	}

	.bloom-bar-page .bloom-gatherings-list {
		padding-top: 103px;
		gap: 34px;
	}

	.bloom-bar-page .bloom-gathering-item h3 {
		font-size: 25px;
	}

	.bloom-bar-page .bloom-gathering-item p {
		font-size: 15px;
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-gatherings-section {
		padding: 72px 6vw 84px;
	}

	.bloom-bar-page .bloom-gatherings-inner {
		width: min(900px, 100%);
		grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
		column-gap: 44px;
	}

	.bloom-bar-page .bloom-gatherings-heading,
	.bloom-bar-page .bloom-gatherings-image {
		width: 290px;
	}

	.bloom-bar-page .bloom-gatherings-heading h2 {
		font-size: 35px;
	}

	.bloom-bar-page .bloom-gatherings-heading p {
		font-size: 13px;
	}

	.bloom-bar-page .bloom-gatherings-image {
		margin-top: 38px;
	}

	.bloom-bar-page .bloom-gatherings-list {
		padding-top: 94px;
		gap: 28px;
	}

	.bloom-bar-page .bloom-gathering-item {
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 18px;
	}

	.bloom-bar-page .bloom-gathering-item h3 {
		font-size: 23px;
		margin-bottom: 10px;
	}

	.bloom-bar-page .bloom-gathering-item p {
		font-size: 14px;
		line-height: 1.52;
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-gatherings-section {
		min-height: calc(100svh - 68px);
		padding: 64px 7vw 78px;
		/* Mobile nav is 68px tall: land the anchor immediately below it. */
		scroll-margin-top: 68px !important;
	}

	.bloom-bar-page .bloom-gatherings-inner {
		width: min(620px, 100%);
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.bloom-bar-page .bloom-gatherings-left {
		width: 100%;
		margin: 0 auto;
		align-items: center;
	}

	.bloom-bar-page .bloom-gatherings-heading {
		width: min(420px, 100%);
	}

	.bloom-bar-page .bloom-gatherings-heading h2 {
		font-size: 38px;
	}

	.bloom-bar-page .bloom-gatherings-image {
		width: min(460px, 80%);
		margin-top: 34px;
	}

	.bloom-bar-page .bloom-gatherings-list {
		width: 100%;
		padding-top: 0;
		gap: 32px;
	}

	.bloom-bar-page .bloom-gathering-item {
		grid-template-columns: 34px minmax(0, 1fr);
		column-gap: 18px;
	}

	.bloom-bar-page .bloom-gathering-item h3 {
		font-size: 24px;
	}

	.bloom-bar-page .bloom-gathering-item p {
		font-size: 14px;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-gatherings-section {
		padding: 56px 7vw 68px;
	}

	.bloom-bar-page .bloom-gatherings-inner {
		gap: 34px;
	}

	.bloom-bar-page .bloom-gatherings-heading h2 {
		font-size: 36px;
	}

	.bloom-bar-page .bloom-gatherings-heading p {
		margin-top: 13px;
		font-size: 12.5px;
	}

	.bloom-bar-page .bloom-gatherings-image {
		width: min(430px, 84%);
		margin-top: 30px;
	}

	.bloom-bar-page .bloom-gatherings-list {
		gap: 28px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-gatherings-section {
		padding: 50px 7vw 62px;
	}

	.bloom-bar-page .bloom-gatherings-heading h2 {
		font-size: 34px;
	}

	.bloom-bar-page .bloom-gatherings-image {
		width: 88%;
		margin-top: 26px;
		aspect-ratio: 5 / 6;
	}

	.bloom-bar-page .bloom-gatherings-list {
		gap: 26px;
	}

	.bloom-bar-page .bloom-gathering-item {
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 14px;
	}

	.bloom-bar-page .bloom-gathering-item h3 {
		margin-bottom: 9px;
		font-size: 22px;
	}

	.bloom-bar-page .bloom-gathering-item p {
		font-size: 13px;
		line-height: 1.55;
	}
}


/* ========================================================================== 
   BLOOM BAR — CONTINUOUS BROWN EDITORIAL STORY
   Built for your kind of gathering + What Your Bloom Bar Looks Like + wraps.
   Uses the site's existing breakpoint ladder only.
   ========================================================================== */


.bloom-bar-page .bloom-gatherings-heading h2,
.bloom-bar-page .bloom-gathering-no,
.bloom-bar-page .bloom-gathering-item h3 {
	color: var(--cream, #fbf7ee);
}

.bloom-bar-page .bloom-gatherings-heading p,
.bloom-bar-page .bloom-gathering-item p {
	color: rgba(251, 247, 238, .72);
}

.bloom-bar-page .bloom-look-wrap {
	width: min(1460px, 90%);
	margin: clamp(118px, 10vw, 164px) auto 0;
}

.bloom-bar-page .bloom-look-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(360px, .88fr);
	gap: clamp(68px, 7vw, 118px);
	align-items: center;
}

.bloom-bar-page .bloom-look-image {
	margin: 0;
	width: 100%;
	aspect-ratio: 1.56 / 1;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
}

.bloom-bar-page .bloom-look-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bloom-bar-page .bloom-look-copy {
	text-align: center;
	color: var(--cream);
}

.bloom-bar-page .bloom-look-copy h2 {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--h2-font-size);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: inherit;
}

.bloom-bar-page .bloom-look-lead {
	max-width: 530px;
	margin: clamp(38px, 3.2vw, 52px) auto 0;
	font-family: var(--sans);
	font-size: clamp(16px, 1.25vw, 21px);
	line-height: 1.5;
	color: rgba(251, 247, 238, .9);
}

.bloom-bar-page .bloom-look-note {
	max-width: 560px;
	margin: clamp(52px, 4.4vw, 72px) auto 0;
	font-family: var(--sans);
	line-height: 1.45;
	color: rgba(251, 247, 238, .82);
}

.bloom-bar-page .bloom-look-note strong {
	font-weight: 500;
	color: var(--cream, #fbf7ee);
}

.bloom-bar-page .bloom-wrap-block {
	margin-top: clamp(132px, 11vw, 186px);
	display: grid;
	grid-template-columns: minmax(130px, .38fr) minmax(0, 1.62fr);
	gap: clamp(58px, 6vw, 96px);
	align-items: start;
}

.bloom-bar-page .bloom-wrap-label {
	padding-top: 4px;
	font-family: var(--serif);
	font-size: clamp(25px, 1.8vw, 30px) !important;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	font-style: italic;
	color: --var(cream);
}

.bloom-bar-page .bloom-wrap-options {
	width: min(760px, 100%);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(34px, 3.2vw, 54px);
}

.bloom-bar-page .bloom-wrap-option {
	min-width: 0;
}

.bloom-bar-page .bloom-wrap-image {
	margin: 0 0 17px;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
}

.bloom-bar-page .bloom-wrap-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bloom-bar-page .bloom-wrap-option p {
	margin: 0;
	max-width: 330px;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.45;
	color: var(--cream);
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .bloom-look-wrap {
		width: min(1180px, 88%);
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(330px, .9fr);
		gap: 64px;
	}

	.bloom-bar-page .bloom-wrap-block {
		grid-template-columns: 145px minmax(0, 1fr);
		gap: 54px;
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-look-wrap {
		width: min(920px, 86%);
		margin-top: 110px;
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
		gap: 48px;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: clamp(38px, 4.2vw, 48px);
	}

	.bloom-bar-page .bloom-look-lead {
		margin-top: 30px;
		font-size: 15px;
	}

	.bloom-bar-page .bloom-look-note {
		margin-top: 40px;
		font-size: 13.5px;
	}

	.bloom-bar-page .bloom-wrap-block {
		margin-top: 118px;
		grid-template-columns: 125px minmax(0, 1fr);
		gap: 42px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(660px, 100%);
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-look-wrap {
		width: min(640px, 86%);
		margin-top: 88px;
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.bloom-bar-page .bloom-look-copy {
		order: -1;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: clamp(40px, 7vw, 54px);
	}

	.bloom-bar-page .bloom-look-image {
		aspect-ratio: 4 / 3;
	}

	.bloom-bar-page .bloom-look-lead {
		max-width: 500px;
	}

	.bloom-bar-page .bloom-look-note {
		max-width: 500px;
		margin-top: 30px;
	}

	.bloom-bar-page .bloom-wrap-block {
		margin-top: 92px;
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: 100%;
		gap: 24px;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-gatherings-section {
		padding-bottom: 76px;
	}

	.bloom-bar-page .bloom-look-wrap {
		width: 86%;
		margin-top: 76px;
	}

	.bloom-bar-page .bloom-look-grid {
		gap: 38px;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: clamp(36px, 8.5vw, 48px);
	}

	.bloom-bar-page .bloom-look-lead {
		font-size: 14px;
		line-height: 1.55;
	}

	.bloom-bar-page .bloom-look-note {
		font-size: 12.5px;
	}

	.bloom-bar-page .bloom-wrap-block {
		margin-top: 78px;
	}

	.bloom-bar-page .bloom-wrap-options {
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-look-wrap {
		width: 88%;
		margin-top: 64px;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 36px;
	}

	.bloom-bar-page .bloom-look-lead {
		margin-top: 24px;
		font-size: 13px;
	}

	.bloom-bar-page .bloom-look-note {
		margin-top: 24px;
		font-size: 12px;
	}

	.bloom-bar-page .bloom-look-image {
		aspect-ratio: 5 / 4;
	}

	.bloom-bar-page .bloom-wrap-block {
		margin-top: 64px;
	}

	.bloom-bar-page .bloom-wrap-label {
		font-size: 10px;
	}

	.bloom-bar-page .bloom-wrap-options {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.bloom-bar-page .bloom-wrap-image {
		aspect-ratio: 4 / 5;
	}

	.bloom-bar-page .bloom-wrap-option p {
		max-width: none;
	}
}


/* ==========================================================================
   BLOOM BAR — EDITORIAL STORY V11
   Cream gatherings; brown Bloom Bar look + compact wrap section.
   Uses the site's established breakpoint ladder only.
   ========================================================================== */
.bloom-bar-page .bloom-gatherings-heading h2,
.bloom-bar-page .bloom-gathering-no,
.bloom-bar-page .bloom-gathering-item h3 {
	color: var(--brown);
}

.bloom-bar-page .bloom-gatherings-heading p,
.bloom-bar-page .bloom-gathering-item p {
	color: var(--walnut-husk, #75665b);
}

.bloom-bar-page .bloom-look-section {
	background: var(--espresso);
	color: var(--cream, #fbf7ee);
	padding: clamp(94px, 8vw, 132px) 0 clamp(104px, 9vw, 146px);
}

.bloom-bar-page .bloom-look-wrap {
	margin-top: 0;
}

.bloom-bar-page .bloom-look-copy h2 {
	font-size: var(--h2-font-size);
	line-height: .99;
}

.bloom-bar-page .bloom-look-lead,
.bloom-bar-page .bloom-look-note {
	max-width: 430px;
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.55;
}

.bloom-bar-page .bloom-look-lead {
	margin-top: 16px;
}

.bloom-bar-page .bloom-look-note {
	margin-top: 28px;
}

.bloom-bar-page .bloom-wrap-block {
	width: min(720px, 68%);
	margin: clamp(86px, 7vw, 112px) auto 0;
	grid-template-columns: 155px minmax(0, 1fr);
	gap: 38px;
}

.bloom-bar-page .bloom-wrap-options {
	width: min(260px, 100%);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.bloom-bar-page .bloom-wrap-image {
	margin-bottom: 12px;
}


.bloom-bar-page .bloom-wrap-option h3 {
	margin: 0 0 7px;
	font-family: var(--sans);
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream, #fbf7ee);
	font-size: clamp(12px, 1vw, 13px) !important;
}

.bloom-bar-page .bloom-wrap-option p {
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.4;
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 42px;
	}

	.bloom-bar-page .bloom-look-lead,
	.bloom-bar-page .bloom-look-note {
		font-size: 13.5px;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: min(680px, 72%);
		grid-template-columns: 145px minmax(0, 1fr);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(250px, 100%);
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 40px;
	}

	.bloom-bar-page .bloom-look-lead,
	.bloom-bar-page .bloom-look-note {
		font-size: 13px;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: min(620px, 76%);
		margin-top: 82px;
		grid-template-columns: 135px minmax(0, 1fr);
		gap: 30px;
	}

	.bloom-bar-page .bloom-wrap-label {
		font-size: 14px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(240px, 100%);
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-look-section {
		padding: 76px 0 84px;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 38px;
	}

	.bloom-bar-page .bloom-look-lead,
	.bloom-bar-page .bloom-look-note {
		font-size: 14px;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: min(480px, 82%);
		margin-top: 72px;
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.bloom-bar-page .bloom-wrap-label {
		font-size: 14px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(260px, 100%);
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 36px;
	}

	.bloom-bar-page .bloom-look-lead,
	.bloom-bar-page .bloom-look-note {
		font-size: 12.5px;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: 84%;
		margin-top: 66px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-look-section {
		padding: 64px 0 70px;
	}

	.bloom-bar-page .bloom-look-copy h2 {
		font-size: 34px;
	}

	.bloom-bar-page .bloom-look-lead,
	.bloom-bar-page .bloom-look-note {
		font-size: 12px;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: 88%;
		margin-top: 58px;
	}

	.bloom-bar-page .bloom-wrap-label {
		font-size: 13px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(180px, 100%);
		margin: 0 auto;
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V12
   Align the Bloom Bar look spread with the Potluck "What's Inside" geometry.
   ========================================================================== */
.bloom-bar-page .bloom-look-wrap {
	width: 100%;
	max-width: none;
	padding-left: 5.5vw;
	padding-right: 5.5vw;
	box-sizing: border-box;
}

.bloom-bar-page .bloom-look-grid {
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
	gap: clamp(4rem, 7vw, 8rem);
}

/* Start Choose your wrap on the same left edge as the large image above. */
.bloom-bar-page .bloom-wrap-block {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	grid-template-columns: 155px minmax(0, 1fr);
	gap: 38px;
}

.bloom-bar-page .bloom-wrap-label {
	font-size: 15px;
}

/* Larger than v11, but still deliberately compact like the reference. */
.bloom-bar-page .bloom-wrap-options {
	width: min(560px, 100%);
	gap: 28px;
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .bloom-look-wrap {
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
		gap: 4rem;
	}

	.bloom-bar-page .bloom-wrap-block {
		grid-template-columns: 145px minmax(0, 1fr);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(520px, 100%);
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-look-wrap {
		width: 100%;
		padding-left: 4vw;
		padding-right: 4vw;
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(300px, .85fr);
		gap: 3rem;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: 100%;
		grid-template-columns: 135px minmax(0, 1fr);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(480px, 100%);
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-look-wrap {
		width: min(640px, 86%);
		padding-left: 0;
		padding-right: 0;
	}

	.bloom-bar-page .bloom-look-grid {
		grid-template-columns: 1fr;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(520px, 100%);
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-look-wrap {
		width: 86%;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-look-wrap {
		width: 88%;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(260px, 100%);
		margin: 0 auto;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V13
   Smaller look image + wrap composition shifted right to match reference.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* Keep the large setup image closer to the page centre rather than spanning
     the full left grid column. */
	.bloom-bar-page .bloom-look-image {
		width: 82%;
		justify-self: end;
	}

	/* Nudge the whole wrap composition to the right, like the supplied reference. */
	.bloom-bar-page .bloom-wrap-block {
		width: min(920px, calc(100% - 6vw));
		margin-left: clamp(60px, 6vw, 110px);
		margin-right: 0;
		grid-template-columns: 155px minmax(0, 1fr);
		gap: clamp(36px, 3vw, 54px);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(700px, 100%);
		gap: clamp(46px, 4vw, 64px);
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-look-image {
		width: 84%;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: min(840px, calc(100% - 5vw));
		margin-left: clamp(48px, 5vw, 72px);
		grid-template-columns: 145px minmax(0, 1fr);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(620px, 100%);
		gap: clamp(38px, 3.5vw, 52px);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-look-image {
		width: 86%;
	}

	.bloom-bar-page .bloom-wrap-block {
		width: min(760px, calc(100% - 4vw));
		margin-left: clamp(34px, 4vw, 52px);
		grid-template-columns: 135px minmax(0, 1fr);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(560px, 100%);
		gap: 38px;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V14
   Desktop alignment refinement + mobile wrap carousel.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* Keep the setup image compact, but align its left edge with the
     "Choose your wrap" label below. */
	.bloom-bar-page .bloom-look-image {
		width: 78%;
		justify-self: start;
		margin-left: clamp(48px, 6vw, 108px);
	}

	.bloom-bar-page .bloom-wrap-label {
		white-space: nowrap;
	}

	/* Leave the label where it is and move the two option cards slightly right. */
	.bloom-bar-page .bloom-wrap-block {
		grid-template-columns: 155px minmax(0, 1fr);
		gap: clamp(54px, 4.3vw, 76px);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(700px, 100%);
		gap: clamp(54px, 4.5vw, 76px);
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-look-image {
		width: 80%;
		margin-left: clamp(42px, 5vw, 72px);
	}

	.bloom-bar-page .bloom-wrap-block {
		grid-template-columns: 145px minmax(0, 1fr);
		gap: clamp(48px, 4vw, 64px);
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(640px, 100%);
		gap: clamp(46px, 4vw, 62px);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-look-image {
		width: 82%;
		margin-left: clamp(32px, 4vw, 48px);
	}

	.bloom-bar-page .bloom-wrap-block {
		grid-template-columns: 135px minmax(0, 1fr);
		gap: 44px;
	}

	.bloom-bar-page .bloom-wrap-options {
		width: min(570px, 100%);
		gap: 42px;
	}
}

/* Mobile: use the same native horizontal swipe / peek behaviour as
   Potluck Blooms' "Choose your kit" carousel. */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-wrap-block {
		display: block;
		width: 100%;
		overflow: visible;
	}

	.bloom-bar-page .bloom-wrap-label {
		width: 100%;
		margin: 0 0 22px;
		padding: 0;
		white-space: nowrap;
		text-align: left;
	}

	.bloom-bar-page .bloom-wrap-options {
		display: flex;
		width: calc(100vw - 7vw);
		max-width: none;
		gap: 16px;
		margin: 0;
		padding: 0 7vw 12px 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		cursor: grab;
	}

	.bloom-bar-page .bloom-wrap-options::-webkit-scrollbar {
		display: none;
	}

	.bloom-bar-page .bloom-wrap-options:active {
		cursor: grabbing;
	}

	.bloom-bar-page .bloom-wrap-option {
		flex: 0 0 82%;
		width: 82%;
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	.bloom-bar-page .bloom-wrap-image {
		width: 100%;
		aspect-ratio: 4 / 5;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 84%;
		width: 84%;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-wrap-options {
		width: calc(100vw - 6vw);
		padding-right: 6vw;
		gap: 14px;
	}

	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 86%;
		width: 86%;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V15
   Reduce Choose Your Wrap cards to ~85% of V14 on desktop and mobile.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-options {
		width: min(595px, 85%);
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-options {
		width: min(544px, 85%);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-options {
		width: min(485px, 85%);
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 70%;
		width: 70%;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 71.5%;
		width: 71.5%;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 73%;
		width: 73%;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V16
   More breathing room around Choose Your Wrap without changing card sizing.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* Increase the space from the Choose Your Wrap label to the two cards. */
	.bloom-bar-page .bloom-wrap-block {
		gap: clamp(72px, 5.5vw, 96px);
	}

	/* Give the two wrap images a little more separation as well. */
	.bloom-bar-page .bloom-wrap-options {
		gap: clamp(64px, 5vw, 88px);
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-block {
		gap: clamp(60px, 5vw, 78px);
	}

	.bloom-bar-page .bloom-wrap-options {
		gap: clamp(56px, 4.5vw, 72px);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-block {
		gap: 54px;
	}

	.bloom-bar-page .bloom-wrap-options {
		gap: 50px;
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-wrap-label {
		margin-bottom: 30px;
	}

	.bloom-bar-page .bloom-wrap-options {
		gap: 30px;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-wrap-options {
		gap: 28px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-wrap-label {
		margin-bottom: 26px;
	}

	.bloom-bar-page .bloom-wrap-options {
		gap: 24px;
	}
}

/* ========================================================================== 
   BLOOM BAR — EDITORIAL STORY V17
   Match Potluck Blooms mobile carousel geometry + shift desktop wrap cards right.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* Keep the label anchored; move only the two wrap cards further right. */
	.bloom-bar-page .bloom-wrap-options {
		transform: translateX(clamp(34px, 3.2vw, 62px));
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-options {
		transform: translateX(clamp(28px, 2.8vw, 46px));
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-wrap-options {
		transform: translateX(24px);
	}
}

/* Mobile uses the same carousel sizing/padding as Potluck Blooms "Choose your kit". */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-wrap-block {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		overflow: hidden;
	}

	.bloom-bar-page .bloom-wrap-label {
		width: auto;
		margin: 0 6vw 2rem;
		padding: 0;
	}

	.bloom-bar-page .bloom-wrap-options {
		display: flex;
		width: 100%;
		max-width: none;
		gap: 1rem;
		margin: 0;
		padding: 0 6vw 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 6vw;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		transform: none;
	}

	.bloom-bar-page .bloom-wrap-option {
		flex: 0 0 84%;
		width: 84%;
		height: auto;
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	.bloom-bar-page .bloom-wrap-image {
		width: 100%;
		aspect-ratio: 1.12 / 1;
		margin-bottom: 0;
	}

	.bloom-bar-page .bloom-wrap-option h3,
	.bloom-bar-page .bloom-wrap-option p {
		margin-left: .15rem;
		margin-right: .15rem;
	}

	.bloom-bar-page .bloom-wrap-option h3 {
		margin-top: .9rem;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 84%;
		width: 84%;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-wrap-label {
		margin-left: 6vw;
		margin-right: 6vw;
	}

	.bloom-bar-page .bloom-wrap-options {
		gap: 1rem;
		padding-left: 6vw;
		padding-right: 6vw;
		scroll-padding-left: 6vw;
	}

	.bloom-bar-page .bloom-wrap-option {
		flex-basis: 84%;
		width: 84%;
	}
}

/* Final anchor specificity: prevents 'Built for your kind of gathering' being hidden by the fixed nav. */
.bloom-bar-page #bloom-gatherings {
	scroll-margin-top: 82px !important;
}

@media screen and (max-width: 820px) {
	.bloom-bar-page #bloom-gatherings {
		scroll-margin-top: 68px !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / FOUR CARD EDITORIAL GRID
   Reference: blurred garden backdrop + centred 2x2 cream cards.
   Uses standard site breakpoints only: 1280 / 1080 / 820 / 736 / 480.
   ========================================================================== */
.bloom-bar-page .scenic-steps-section {
	min-height: 0;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(54px, 6vw, 76px) 0;
	background: #626443;
	color: var(--brown);
	overflow: hidden;
}

.bloom-bar-page .scenic-steps-media img {
	filter: blur(5px) saturate(.72) brightness(.72);
	transform: scale(1.045);
}

.bloom-bar-page .scenic-steps-overlay {
	background: rgba(78, 82, 57, .30);
}

.bloom-bar-page .scenic-steps-inner {
	width: min(860px, 88vw);
	min-height: 0;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bloom-bar-page .scenic-steps-title {
	width: 100%;
	margin: 0 0 clamp(28px, 3.5vw, 44px);
	text-align: center;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--h2-font-size);
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--cream);
}

.bloom-bar-page .scenic-steps-line {
	display: none;
}

.bloom-bar-page .scenic-steps-grid {
	width: min(660px, 100%);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 34px);
}

.bloom-bar-page .scenic-step {
	width: 100%;
	max-width: none;
	min-height: 235px;
	padding: clamp(28px, 3vw, 38px) clamp(24px, 2.7vw, 34px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(251, 247, 238, .94);
	border: 1px solid rgba(74, 36, 18, .10);
	box-shadow: 0 10px 28px rgba(40, 31, 23, .10);
	color: var(--brown);
}

.bloom-bar-page .scenic-step b {
	display: block;
	margin: 0 0 15px;
	font-family: var(--sans);
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	color: var(--brown);
}

.bloom-bar-page .scenic-step h3 {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(24px, 2.1vw, 31px);
	line-height: 1.05;
	color: var(--brown);
}

.bloom-bar-page .scenic-step p {
	max-width: 230px;
	margin: 0;
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--walnut-husk);
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(800px, 88vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(620px, 100%);
		gap: 28px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 220px;
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(740px, 86vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(580px, 100%);
		gap: 24px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 205px;
		padding: 26px 24px;
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .scenic-steps-section {
		min-height: calc(100svh - 68px);
		scroll-margin-top: 68px;
	}

	.bloom-bar-page .scenic-steps-inner {
		width: 88vw;
		min-height: calc(100svh - 68px);
		padding: 54px 0 62px;
	}

	.bloom-bar-page .scenic-steps-title {
		margin-bottom: 30px;
		font-size: clamp(36px, 8vw, 48px);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(560px, 100%);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 190px;
		padding: 24px 18px;
	}

	.bloom-bar-page .scenic-step h3 {
		font-size: clamp(21px, 4.4vw, 27px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 11.5px;
		line-height: 1.45;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .scenic-steps-inner {
		width: 90vw;
		padding: 48px 0 56px;
	}

	.bloom-bar-page .scenic-steps-title {
		margin-bottom: 26px;
		font-size: clamp(34px, 8.7vw, 44px);
	}

	.bloom-bar-page .scenic-steps-grid {
		gap: 14px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 176px;
		padding: 20px 14px;
	}

	.bloom-bar-page .scenic-step b {
		margin-bottom: 11px;
		font-size: 9px;
	}

	.bloom-bar-page .scenic-step h3 {
		margin-bottom: 10px;
		font-size: clamp(19px, 4.8vw, 24px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 10.8px;
		line-height: 1.42;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .scenic-steps-inner {
		width: 91vw;
		padding: 44px 0 50px;
	}

	.bloom-bar-page .scenic-steps-title {
		width: 92%;
		margin-bottom: 24px;
		font-size: var(--h2-font-size-480);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: 100%;
		gap: 12px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 164px;
		padding: 18px 12px;
	}

	.bloom-bar-page .scenic-step h3 {
		font-size: clamp(18px, 5.2vw, 22px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 10.2px;
		line-height: 1.38;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / DESKTOP VIEWPORT REFINEMENT
   Keeps the full composition inside one desktop viewport and gives each card
   the soft translucent framed edge from the visual reference.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-section {
		height: auto;
		min-height: 0;
	}

	.bloom-bar-page .scenic-steps-inner {
		width: min(800px, 86vw);
		height: auto;
		min-height: 0;
		padding: 0;
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(610px, 100%);
		gap: clamp(18px, 2.2svh, 26px) clamp(20px, 2.2vw, 28px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(160px, 19svh, 190px);
		padding: clamp(20px, 2.4svh, 28px) clamp(20px, 2vw, 28px);
		background: rgba(251, 247, 238, .88);
		border: 8px solid rgba(251, 247, 238, .26);
		box-shadow: 0 8px 22px rgba(40, 31, 23, .08);
		background-clip: padding-box;
	}

	.bloom-bar-page .scenic-step b {
		margin-bottom: 10px;
	}

	.bloom-bar-page .scenic-step h3 {
		margin-bottom: 10px;
		font-size: clamp(22px, 1.8vw, 28px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 11.5px;
		line-height: 1.42;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(760px, 86vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(580px, 100%);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(154px, 18svh, 178px);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(700px, 86vw);
		padding-top: 26px;
		padding-bottom: 28px;
	}

	.bloom-bar-page .scenic-steps-title {
		margin-bottom: 18px;
		font-size: clamp(32px, 3.5vw, 42px);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(550px, 100%);
		gap: 18px 20px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 150px;
		padding: 18px 18px;
		border-width: 7px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / EDITORIAL DESKTOP SCALE
   Larger poster-like cards while retaining one-viewport desktop composition.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(980px, 90vw);
		padding: clamp(18px, 2.2svh, 30px) 0 clamp(20px, 2.5svh, 34px);
		justify-content: center;
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(760px, 100%);
		gap: clamp(18px, 2.1svh, 26px) clamp(24px, 2.5vw, 34px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(205px, 23svh, 245px);
		padding: clamp(26px, 3svh, 36px) clamp(28px, 2.8vw, 38px);
		border: 9px solid rgba(251, 247, 238, .26);
		background: rgba(251, 247, 238, .90);
		background-clip: padding-box;
	}

	.bloom-bar-page .scenic-step b {
		margin-bottom: 14px;
	}

	.bloom-bar-page .scenic-step h3 {
		margin-bottom: 13px;
		font-size: clamp(24px, 2vw, 31px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 270px;
		font-size: 12.5px;
		line-height: 1.5;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(900px, 90vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(700px, 100%);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(195px, 22svh, 225px);
		padding: clamp(24px, 2.7svh, 32px) 26px;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(820px, 90vw);
		padding-top: 18px;
		padding-bottom: 20px;
	}

	.bloom-bar-page .scenic-steps-title {
		margin-bottom: 16px;
		font-size: clamp(34px, 3.7vw, 44px);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(660px, 100%);
		gap: 18px 22px;
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(185px, 21svh, 205px);
		padding: 22px 24px;
		border-width: 8px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / TALLER EDITORIAL CARDS
   Narrower, taller card proportions without compressing the internal spacing.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(900px, 88vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(640px, 100%);
		gap: clamp(18px, 2.1svh, 26px) clamp(20px, 2vw, 28px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(225px, 25svh, 265px);
		padding: clamp(28px, 3.1svh, 38px) clamp(24px, 2.3vw, 32px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 235px;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(820px, 88vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(610px, 100%);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(215px, 24svh, 245px);
		padding: clamp(26px, 2.8svh, 34px) 24px;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(760px, 88vw);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(570px, 100%);
		gap: 18px 20px;
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(195px, 22svh, 220px);
		padding: 24px 22px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / EXTRA-TALL EDITORIAL CARDS
   More portrait-like proportions to match the reference.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-inner {
		width: min(860px, 88vw);
		padding-top: clamp(12px, 1.5svh, 20px);
		padding-bottom: clamp(14px, 1.8svh, 22px);
	}


	.bloom-bar-page .scenic-steps-grid {
		width: min(570px, 100%);
		gap: clamp(14px, 1.7svh, 20px) clamp(18px, 1.8vw, 24px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(245px, 28svh, 295px);
		padding: clamp(30px, 3.3svh, 40px) clamp(22px, 2vw, 28px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 210px;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-grid {
		width: min(545px, 100%);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(235px, 27svh, 275px);
		padding: clamp(28px, 3svh, 36px) 22px;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-grid {
		width: min(520px, 100%);
		gap: 14px 18px;
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(215px, 25svh, 245px);
		padding: 26px 20px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / FINAL EDITORIAL SPACING
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-title {
		font-family: var(--serif);
		font-size: var(--h2-font-size);
		font-weight: 400;
		line-height: .99;
		letter-spacing: -.025em;
		margin-bottom: clamp(34px, 4.2svh, 50px);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(1180px, 92vw);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(16px, 1.7vw, 24px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(250px, 30svh, 310px);
		padding: clamp(26px, 3svh, 36px) clamp(18px, 1.7vw, 26px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 220px;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-title {
		margin-bottom: clamp(30px, 3.6svh, 42px);
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(1080px, 92vw);
		gap: clamp(14px, 1.6vw, 20px);
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(240px, 29svh, 290px);
		padding: clamp(24px, 2.8svh, 32px) clamp(16px, 1.5vw, 22px);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-steps-title {
		font-size: clamp(32px, 2.8vw, 45px);
		margin-bottom: 28px;
	}

	.bloom-bar-page .scenic-steps-grid {
		width: min(980px, 94vw);
		gap: 12px;
	}

	.bloom-bar-page .scenic-step {
		min-height: clamp(225px, 27svh, 270px);
		padding: 22px 14px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / MOBILE EDITORIAL CARDS
   One generous card per row on phones/tablets; retain the translucent frame.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.bloom-bar-page .scenic-steps-grid {
		grid-template-columns: 1fr;
		width: min(430px, 82vw);
		margin-left: auto;
		margin-right: auto;
		gap: 24px;
	}

	.bloom-bar-page .scenic-step {
		width: 100%;
		min-height: 300px;
		padding: 42px 34px;
		background: rgba(251, 247, 238, .90);
		border: 9px solid rgba(251, 247, 238, .26);
		box-shadow: 0 8px 22px rgba(40, 31, 23, .08);
		background-clip: padding-box;
	}

	.bloom-bar-page .scenic-step b {
		margin-bottom: 15px;
	}

	.bloom-bar-page .scenic-step h3 {
		margin-bottom: 14px;
		font-size: clamp(24px, 5.5vw, 30px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 290px;
		font-size: 12.5px;
		line-height: 1.5;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .scenic-steps-grid {
		width: min(410px, 84vw);
		gap: 22px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 285px;
		padding: 38px 30px;
		border-width: 8px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .scenic-steps-grid {
		width: 82vw;
		gap: 20px;
	}

	.bloom-bar-page .scenic-step {
		min-height: 270px;
		padding: 34px 26px;
		border-width: 8px;
	}

	.bloom-bar-page .scenic-step h3 {
		font-size: clamp(23px, 6.5vw, 28px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 12px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / MOBILE CARD REFINEMENT
   Scale follows the homepage's centred 82% mobile offering-card rhythm,
   but keeps these as portrait editorial cards. Border is stronger/less sheer.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.bloom-bar-page .scenic-steps-grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		padding: 0 9vw;
		margin: 0 auto;
		gap: 28px;
	}

	.bloom-bar-page .scenic-step {
		width: 82%;
		max-width: 360px;
		min-height: 245px;
		margin: 0 auto;
		padding: 30px 28px;
		background: rgba(251, 247, 238, .93);
		border: 10px solid rgba(251, 247, 238, .50);
		box-shadow: 0 8px 22px rgba(40, 31, 23, .10);
		background-clip: padding-box;
	}

	.bloom-bar-page .scenic-step b {
		margin-bottom: 12px;
	}

	.bloom-bar-page .scenic-step h3 {
		margin-bottom: 12px;
		font-size: clamp(23px, 5.2vw, 28px);
	}

	.bloom-bar-page .scenic-step p {
		max-width: 260px;
		font-size: 12.5px;
		line-height: 1.48;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .scenic-steps-grid {
		padding: 0 9vw;
		gap: 26px;
	}

	.bloom-bar-page .scenic-step {
		width: 82%;
		max-width: 340px;
		min-height: 230px;
		padding: 28px 25px;
		border-width: 10px;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .scenic-steps-grid {
		padding: 0 9vw;
		gap: 24px;
	}

	.bloom-bar-page .scenic-step {
		width: 82%;
		max-width: 320px;
		min-height: 215px;
		padding: 25px 22px;
		border-width: 9px;
	}

	.bloom-bar-page .scenic-step h3 {
		font-size: clamp(22px, 6.1vw, 27px);
	}

	.bloom-bar-page .scenic-step p {
		font-size: 12px;
	}
}

/* ========================================================================== 
   BLOOM BAR — HOW EVERY EVENT UNFOLDS / DESKTOP FRAME REFINEMENT
   Stronger, more opaque outer frame on desktop/tablet only.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .scenic-step {
		border-width: 11px;
		border-color: rgba(251, 247, 238, .48);
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .scenic-step {
		border-width: 10px;
		border-color: rgba(251, 247, 238, .46);
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .scenic-step {
		border-width: 10px;
		border-color: rgba(251, 247, 238, .44);
	}
}

/* ========================================================================== 
   BLOOM BAR — CHOOSE YOUR BLOOM BAR / EDITORIAL PROGRAM CARDS
   ========================================================================== */
.bloom-bar-page .bloom-pricing {
	height: auto !important;
	min-height: calc(100svh - var(--site-nav-height, 82px)) !important;
	padding: clamp(22px, 2.6svh, 30px) 5vw clamp(24px, 2.8svh, 32px) !important;
	background: var(--cream, #fbf7ee) !important;
	overflow: visible !important;
}

.bloom-bar-page .bloom-pricing-wrap {
	width: min(1180px, 100%) !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}

.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow {
	display: block !important;
	text-align: center !important;
	margin: 0 0 9px !important;
	letter-spacing: .18em !important;
	font-size: 10px !important;
}

.bloom-bar-page .bloom-pricing h2 {
	margin: 0 !important;
	text-align: center !important;
	font-family: var(--serif) !important;
	font-size: var(--h2-font-size) !important;
	font-weight: 400 !important;
	line-height: .99 !important;
	letter-spacing: -.025em !important;
	color: var(--brown) !important;
}

.bloom-bar-page .bloom-pricing-intro {
	max-width: 600px !important;
	margin: 12px auto clamp(18px, 2.2svh, 26px) !important;
	text-align: center !important;
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.55 !important;
	color: var(--walnut-husk) !important;
}

.bloom-bar-page .bloom-tier-grid-editorial {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(24px, 3vw, 42px) !important;
	align-items: stretch !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

.bloom-bar-page .bloom-tier-editorial {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: 100% !important;
	padding: clamp(16px, 1.5vw, 22px) !important;
	background: var(--cream) !important;
	border: 1px solid rgba(74, 36, 18, .13) !important;
	box-shadow: 0 5px 14px rgba(74, 36, 18, .045) !important;
	text-align: center !important;
}

.bloom-bar-page .bloom-tier-editorial:nth-child(2) {
	background: rgba(255, 252, 245, .84) !important;
	border-color: rgba(74, 36, 18, .13) !important;
}

.bloom-bar-page .bloom-tier-editorial::before {
	content: none !important;
}

.bloom-bar-page .bloom-tier-kicker {
	margin: 0 0 clamp(10px, 1.2svh, 14px) !important;
	font-family: var(--sans) !important;
	font-size: 10px !important;
	line-height: 1 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgba(74, 36, 18, .72) !important;
}

.bloom-bar-page .bloom-tier-media {
	width: 100% !important;
	height: clamp(104px, 14svh, 154px) !important;
	aspect-ratio: auto !important;
	margin: 0 0 clamp(12px, 1.5svh, 18px) !important;
	overflow: hidden !important;
	background: #eee7dc !important;
}

.bloom-bar-page .bloom-tier-media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

.bloom-bar-page .bloom-tier-editorial .bloom-tier-inner {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}

.bloom-bar-page .bloom-tier-no {
	display: block !important;
	margin: 0 0 8px !important;
	font-family: var(--sans) !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgba(74, 36, 18, .55) !important;
}

.bloom-bar-page .bloom-tier-editorial h3 {
	order: initial !important;
	margin: 0 0 12px !important;
	font-family: var(--serif) !important;
	font-size: clamp(28px, 2.35vw, 38px) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -.02em !important;
	color: var(--walnut-husk) !important;
}

.bloom-bar-page .bloom-tier-tagline {
	max-width: 280px !important;
	margin: 0 auto 10px !important;
	font-family: var(--serif) !important;
	font-size: 14px !important;
	font-style: italic !important;
	line-height: 1.45 !important;
	color: rgba(74, 36, 18, .68) !important;
}

.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
	margin: 0 auto clamp(12px, 1.5svh, 18px) !important;
	padding: 8px 18px !important;
	min-width: 140px !important;
	background: var(--olive, #626443) !important;
	color: #fff !important;
	font-family: var(--sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
}

.bloom-bar-page .bloom-tier-program {
	width: 100% !important;
	margin-top: auto !important;
	padding-top: clamp(12px, 1.4svh, 18px) !important;
	border-top: 1px solid rgba(74, 36, 18, .12) !important;
}

.bloom-bar-page .bloom-tier-editorial .bloom-tier-label {
	order: initial !important;
	margin: 0 0 8px !important;
	font-family: var(--sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: rgba(74, 36, 18, .72) !important;
}

.bloom-bar-page .bloom-tier-editorial ul {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: center !important;
	min-height: 86px !important;
}

.bloom-bar-page .bloom-tier-editorial li {
	padding: 2px 0 !important;
	font-family: var(--serif) !important;
	font-size: 12.5px !important;
	font-style: italic !important;
	line-height: 1.28 !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	color: rgba(74, 36, 18, .72) !important;
}

.bloom-bar-page .bloom-tier-editorial li::before {
	content: none !important;
}

.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-family: var(--sans) !important;
	font-size: 9px !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: rgba(74, 36, 18, .5) !important;
}

@media screen and (max-width: 1280px) {
	.bloom-bar-page .bloom-tier-grid-editorial {
		gap: 26px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		min-height: 0 !important;
		height: 100% !important;
		padding: 18px !important;
	}
}

@media screen and (max-width: 1080px) {
	.bloom-bar-page .bloom-pricing {
		padding-left: 4vw !important;
		padding-right: 4vw !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial {
		gap: 18px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		min-height: 0 !important;
		height: 100% !important;
		padding: 16px !important;
	}
}

@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-pricing {
		height: auto !important;
		min-height: calc(100svh - 68px) !important;
		padding: 58px 0 68px !important;
		overflow: hidden !important;
	}

	.bloom-bar-page .bloom-pricing-wrap {
		height: auto !important;
		display: block !important;
	}

	.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow,
	.bloom-bar-page .bloom-pricing-wrap>h2,
	.bloom-bar-page .bloom-pricing-wrap>.bloom-pricing-intro {
		padding-left: 7vw !important;
		padding-right: 7vw !important;
	}

	.bloom-bar-page .bloom-pricing-intro {
		margin-bottom: 34px !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial {
		display: flex !important;
		gap: 1rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-padding-inline: 8vw !important;
		padding: 0 8vw 1rem !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial::-webkit-scrollbar {
		display: none !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		flex: 0 0 84% !important;
		min-height: 585px !important;
		padding: 20px !important;
		scroll-snap-align: start !important;
	}

	.bloom-bar-page .bloom-tier-media {
		height: auto !important;
		aspect-ratio: 1.45 / 1 !important;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-tier-editorial {
		min-height: 560px !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-pricing h2 {
		font-size: var(--h2-font-size-480) !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		min-height: 540px !important;
		padding: 18px !important;
	}

	.bloom-bar-page .bloom-tier-editorial h3 {
		font-size: 30px !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING CARD COMPACT FLOW FIX
   Keep the section within one desktop viewport without stretching the cards.
   ========================================================================== */
@media screen and (min-width: 821px) {
	.bloom-bar-page .bloom-pricing-wrap {
		height: 100% !important;
		min-height: 0 !important;
		justify-content: center !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial {
		flex: 0 0 auto !important;
		align-items: start !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		height: auto !important;
		min-height: 0 !important;
		align-self: start !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-inner {
		flex: 0 0 auto !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		margin-bottom: 18px !important;
	}

	.bloom-bar-page .bloom-tier-program {
		margin-top: 0 !important;
		padding-top: 18px !important;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-tier-editorial {
		height: auto !important;
		min-height: 0 !important;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-tier-editorial {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING REFINEMENT V21
   More breathing room inside the editorial cards while keeping the desktop
   composition within one viewport.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* Pull the whole pricing composition upward slightly. */
	.bloom-bar-page .bloom-pricing {
		padding-top: clamp(22px, 2.6svh, 30px) !important;
		padding-bottom: clamp(24px, 2.8svh, 32px) !important;
	}

	/* Let the cards feel a little more elongated without creating a huge void. */
	.bloom-bar-page .bloom-tier-editorial {
		min-height: clamp(460px, 58svh, 600px) !important;
		padding: clamp(22px, 2vw, 28px) clamp(22px, 2vw, 28px) clamp(16px, 1.5vw, 20px) !important;
	}

	.bloom-bar-page .bloom-tier-kicker {
		margin-bottom: clamp(16px, 1.7svh, 22px) !important;
	}

	.bloom-bar-page .bloom-tier-media {
		margin-bottom: clamp(20px, 2.1svh, 28px) !important;
	}

	.bloom-bar-page .bloom-tier-editorial h3 {
		margin-bottom: 10px !important;
	}

	.bloom-bar-page .bloom-tier-tagline {
		font-size: 15px !important;
		line-height: 1.5 !important;
		margin-bottom: 8px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		margin-bottom: 20px !important;
	}

	.bloom-bar-page .bloom-tier-program {
		margin-top: 0 !important;
		padding-top: 22px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-label {
		font-size: 11px !important;
		margin-bottom: 10px !important;
	}

	.bloom-bar-page .bloom-tier-editorial li {
		font-size: 13.5px !important;
		line-height: 1.38 !important;
		padding: 3px 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
		font-size: 11px !important;
		line-height: 1.15 !important;
		margin-top: 10px !important;
	}
}

@media screen and (max-width: 1280px) and (min-width: 821px) {
	.bloom-bar-page .bloom-tier-editorial {
		min-height: clamp(520px, 57svh, 565px) !important;
		padding: 21px !important;
	}

	.bloom-bar-page .bloom-tier-editorial li {
		font-size: 13px !important;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-tier-editorial {
		min-height: clamp(500px, 56svh, 545px) !important;
		padding: 19px !important;
	}

	.bloom-bar-page .bloom-tier-editorial li {
		font-size: 12.75px !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING POSITION TWEAK V22
   Move the desktop composition upward and pull the price bar closer to copy.
   ========================================================================== */
@media screen and (min-width: 821px) {

	/* The v20 compact-flow rule centres the whole wrap vertically, so changing
	   padding alone barely moves the eyebrow. Shift the composition itself. */
	.bloom-bar-page .bloom-pricing-wrap {
		transform: none !important;
	}

	/* Pull the price toward the tagline regardless of the tagline's later
	   margin override in V21. */
	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		transform: translateY(-8px) !important;
		margin-bottom: 14px !important;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {
	.bloom-bar-page .bloom-pricing-wrap {
		transform: none !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING MOBILE VIEWPORT FIT V23
   Keep Choose your Bloom Bar within one mobile/tablet viewport while
   preserving the swipeable card carousel.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-pricing {
		height: calc(100svh - 68px) !important;
		min-height: calc(100svh - 68px) !important;
		padding: clamp(24px, 4svh, 34px) 0 clamp(18px, 3svh, 26px) !important;
		display: flex !important;
		align-items: center !important;
		overflow: hidden !important;
	}

	.bloom-bar-page .bloom-pricing-wrap {
		height: 100% !important;
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		transform: none !important;
	}

	.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow {
		margin-bottom: 8px !important;
	}

	.bloom-bar-page .bloom-pricing h2 {
		margin: 0 7vw 8px !important;
		padding-bottom: 0 !important;
		font-size: clamp(32px, 8.6vw, 44px) !important;
		line-height: 1 !important;
	}

	.bloom-bar-page .bloom-pricing-intro {
		margin: 0 auto clamp(16px, 2.6svh, 22px) !important;
		max-width: 580px !important;
		font-size: clamp(12.5px, 2.8vw, 13px) !important;
		line-height: 1.45 !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial {
		flex: 0 0 auto !important;
		gap: 1rem !important;
		padding: 0 8vw 8px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		flex: 0 0 84% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: calc(100svh - 245px) !important;
		padding: clamp(14px, 2.4svh, 18px) !important;
		overflow: hidden !important;
	}

	.bloom-bar-page .bloom-tier-kicker {
		margin-bottom: clamp(10px, 1.6svh, 14px) !important;
	}

	.bloom-bar-page .bloom-tier-media {
		aspect-ratio: 1.58 / 1 !important;
		margin-bottom: 12px !important;
	}

	.bloom-bar-page .bloom-tier-no {
		margin-bottom: 5px !important;
	}

	.bloom-bar-page .bloom-tier-editorial h3 {
		font-size: clamp(34px, 9vw, 42px) !important;
		line-height: 1.02 !important;
		margin-bottom: 10px !important;
	}

	.bloom-bar-page .bloom-tier-tagline {
		font-size: 15px !important;
		line-height: 1.35 !important;
		margin-bottom: 12px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		transform: none !important;
		margin: 0 auto 14px !important;
		padding: 9px 18px !important;
		font-size: 11px !important;
	}

	.bloom-bar-page .bloom-tier-program {
		margin-top: 0 !important;
		padding-top: 14px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-label {
		font-size: 11px !important;
		margin-bottom: 10px !important;
	}

	.bloom-bar-page .bloom-tier-editorial li {
		font-size: 15px !important;
		line-height: 1.35 !important;
		padding: 4px 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
		font-size: 10px !important;
		margin-top: 10px !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-pricing {
		padding-top: 20px !important;
		padding-bottom: 24px !important;
	}

	.bloom-bar-page .bloom-pricing h2 {
		font-size: var(--h2-font-size-480) !important;
	}

	.bloom-bar-page .bloom-pricing-intro {
		margin-bottom: 14px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		max-height: calc(100svh - 228px) !important;
		padding: 14px !important;
	}

	.bloom-bar-page .bloom-tier-media {
		aspect-ratio: 1.65 / 1 !important;
		margin-bottom: 10px !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING MOBILE PROPORTIONS V24
   Use the wasted space above the eyebrow for a taller, more relaxed card.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-pricing {
		padding-top: clamp(12px, 2svh, 18px) !important;
		padding-bottom: clamp(12px, 2svh, 18px) !important;
		align-items: center !important;
	}

	.bloom-bar-page .bloom-pricing-wrap {
		justify-content: center !important;
	}

	.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow {
		margin-top: 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		/* Give the recovered vertical space back to the card. */
		max-height: calc(100svh - 205px) !important;
		min-height: clamp(470px, 62svh, 535px) !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-pricing {
		padding-top: 10px !important;
		padding-bottom: 12px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		max-height: calc(100svh - 195px) !important;
		min-height: clamp(455px, 61svh, 515px) !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING MOBILE DETAIL SPACING V25
   More breathing room in At the bar, and visually centre the price bar
   between the tagline and the divider line.
   ========================================================================== */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-tier-tagline {
		margin-bottom: 8px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		/* Equal visual breathing room above and below the price bar. */
		margin: 0 auto 16px !important;
	}

	.bloom-bar-page .bloom-tier-program {
		padding-top: 13px !important;
		padding-bottom: 4px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-label {
		font-size: clamp(10px, 1.35svh, 11.5px) !important;
		margin-bottom: clamp(14px, 1.9svh, 18px) !important;
	}

	.bloom-bar-page .bloom-tier-editorial li {
		font-size: clamp(12px, 1.8svh, 15px) !important;
		line-height: 1.3 !important;
		padding: clamp(2px, .45svh, 4px) 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
		font-size: clamp(10px, 1.4svh, 12px) !important;
		line-height: 1.18 !important;
		margin-top: clamp(12px, 1.6svh, 16px) !important;
		letter-spacing: .1em !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-tier-editorial li {
		font-size: clamp(12px, 1.8svh, 14.5px) !important;
		line-height: 1.28 !important;
		padding: clamp(2px, .45svh, 3px) 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
		font-size: clamp(10px, 1.4svh, 12px) !important;
		line-height: 1.18 !important;
		margin-top: clamp(12px, 1.6svh, 16px) !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING RESPONSIVE STABILITY V26
   Equal card heights at desktop sizes; mobile carousel may scroll vertically
   with the page instead of clipping cards against a forced viewport height.
   ========================================================================== */

/* Desktop / laptop: make all three cards follow the tallest card in the row. */
@media screen and (min-width: 821px) {
	.bloom-bar-page .bloom-tier-grid-editorial {
		align-items: stretch !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		height: 100% !important;
		min-height: clamp(460px, 58svh, 600px) !important;
		align-self: stretch !important;
	}
}

/* Smaller sizes: never crop the carousel/card to the viewport height. */
@media screen and (max-width: 820px) {
	.bloom-bar-page .bloom-pricing {
		height: auto !important;
		min-height: calc(100svh - 68px) !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}

	.bloom-bar-page .bloom-pricing-wrap {
		height: 100% !important;
		min-height: 0 !important;
		justify-content: flex-start !important;
	}

	.bloom-bar-page .bloom-tier-grid-editorial {
		align-items: stretch !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		padding-bottom: 0 !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		height: auto !important;
		min-height: 585px !important;
		max-height: none !important;
		align-self: stretch !important;
	}
}

@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-tier-editorial {
		min-height: 575px !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-tier-editorial {
		min-height: 565px !important;
		max-height: none !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING MID-MOBILE FIT V27
   Give the heading a little more breathing room below the nav while keeping
   the carousel fully visible around 681–736px wide screens.
   ========================================================================== */
@media screen and (max-width: 736px) {
	.bloom-bar-page .bloom-pricing {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow {
		margin-top: 4px !important;
	}

	/* At this width the 84% card becomes quite wide, so the old 1.58 image
     ratio makes the image unnecessarily tall. A wider crop preserves the
     editorial card while recovering enough vertical space for the full card. */
	.bloom-bar-page .bloom-tier-media {
		aspect-ratio: 1.78 / 1 !important;
		margin-bottom: 11px !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		min-height: 545px !important;
		max-height: none !important;
		padding: 16px !important;
	}

	.bloom-bar-page .bloom-tier-editorial h3 {
		font-size: clamp(30px, 4.6svh, 40px) !important;
		line-height: 1 !important;
		margin-bottom: clamp(9px, 1.3svh, 12px) !important;
	}

	.bloom-bar-page .bloom-tier-tagline {
		font-size: clamp(13px, 1.8svh, 16px) !important;
		line-height: 1.3 !important;
		margin-bottom: clamp(12px, 1.8svh, 16px) !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-price {
		margin-bottom: clamp(16px, 2.2svh, 20px) !important;
		padding: clamp(7px, 1.1svh, 9px) 18px !important;
		font-size: clamp(10px, 1.35svh, 11.5px) !important;
	}

	.bloom-bar-page .bloom-tier-program {
		padding-top: clamp(14px, 2svh, 18px) !important;
	}
}

@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-pricing {
		padding-top: clamp(10px, 1.4svh, 14px) !important;
		padding-bottom: clamp(10px, 1.4svh, 14px) !important;
	}

	.bloom-bar-page .bloom-pricing-wrap>.bloom-eyebrow {
		margin-top: 2px !important;
	}

	.bloom-bar-page .bloom-tier-media {
		aspect-ratio: 1.72 / 1 !important;
		margin-bottom: clamp(18px, 2.4svh, 24px) !important;
	}

	.bloom-bar-page .bloom-tier-editorial {
		min-height: clamp(500px, 66svh, 620px) !important;
	}
}

/* ========================================================================== 
   BLOOM BAR — PRICING MOBILE CARD HEIGHT V28
   Let phone cards finish naturally after the stem count instead of forcing
   a tall minimum height that creates a large empty block at the bottom.
   ========================================================================== */
@media screen and (max-width: 480px) {
	.bloom-bar-page .bloom-tier-editorial {
		height: auto !important;
		min-height: clamp(500px, 66svh, 620px) !important;
		max-height: none !important;
		padding-bottom: 12px !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-tier-inner {
		height: auto !important;
		min-height: 0 !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
	}

	.bloom-bar-page .bloom-tier-program {
		margin-top: 0 !important;
		padding-bottom: 0 !important;
		flex: 0 0 auto !important;
		display: block !important;
	}

	.bloom-bar-page .bloom-tier-editorial .bloom-stem-count {
		margin-top: clamp(12px, 1.7svh, 16px) !important;
		margin-bottom: 0 !important;
	}
}

/* ========================================================================== 
   POTLUCK BLOOMS — HOW IT WORKS / MATCH BLOOM BAR EDITORIAL CARD STYLE
   Same blurred garden backdrop, centered title and framed cream cards.
   Standard site breakpoints only: 1280 / 1080 / 820 / 736 / 480.
   ========================================================================== */
.potluck-page .scenic-steps-section {
	height: auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(54px, 6vw, 76px) 0;
	background: #626443;
	color: var(--brown);
	overflow: hidden;
	scroll-margin-top: 82px;
}

.potluck-page .scenic-steps-media img {
	display: block;
	filter: blur(5px) saturate(.72) brightness(.72);
	transform: scale(1.06);
}

.potluck-page .scenic-steps-overlay {
	background: rgba(78, 82, 57, .30);
}

.potluck-page .scenic-steps-inner {
	width: min(860px, 88vw);
	height: auto;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.potluck-page .scenic-steps-title {
	width: 100%;
	margin: 0 0 clamp(34px, 4.2svh, 50px);
	text-align: center;
	font-family: var(--serif);
	font-style: normal;
	font-weight: 400;
	font-size: var(--h2-font-size);
	line-height: .99;
	letter-spacing: -.025em;
	color: var(--cream);
	font-style: italic;
}

.potluck-page .scenic-steps-line {
	display: none;
}

.potluck-page .scenic-steps-grid {
	width: min(1180px, 92vw);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.7vw, 24px);
}

.potluck-page .scenic-step {
	width: 100%;
	max-width: none;
	min-height: clamp(250px, 30svh, 310px);
	padding: clamp(26px, 3svh, 36px) clamp(18px, 1.7vw, 26px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(251, 247, 238, .90);
	border: 11px solid rgba(251, 247, 238, .48);
	box-shadow: 0 8px 22px rgba(40, 31, 23, .10);
	background-clip: padding-box;
	color: var(--brown);
}

.potluck-page .scenic-step b {
	display: block;
	margin: 0 0 14px;
	font-family: var(--sans);
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	color: var(--brown);
}

.potluck-page .scenic-step h3 {
	margin: 0 0 13px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(24px, 2vw, 31px);
	line-height: 1.05;
	color: var(--brown);
}

.potluck-page .scenic-step p {
	max-width: 210px;
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(12.5px, 1vw, 14px) !important;
	line-height: 1.5;
	color: var(--walnut-husk);
}

@media screen and (max-width: 1280px) {
	.potluck-page .scenic-steps-inner {
		width: min(820px, 88vw);
	}

	.potluck-page .scenic-steps-title {
		margin-bottom: clamp(30px, 3.6svh, 42px);
	}

	.potluck-page .scenic-steps-grid {
		width: min(1080px, 92vw);
		gap: clamp(14px, 1.6vw, 20px);
	}

	.potluck-page .scenic-step {
		min-height: clamp(240px, 29svh, 290px);
		padding: clamp(24px, 2.8svh, 32px) clamp(16px, 1.5vw, 22px);
		border-width: 10px;
		border-color: rgba(251, 247, 238, .46);
	}
}

@media screen and (max-width: 1080px) {
	.potluck-page .scenic-steps-inner {
		width: min(760px, 88vw);
	}

	.potluck-page .scenic-steps-title {
		font-size: clamp(32px, 2.8vw, 45px);
		margin-bottom: 28px;
	}

	.potluck-page .scenic-steps-grid {
		width: min(980px, 94vw);
		gap: 12px;
	}

	.potluck-page .scenic-step {
		min-height: clamp(225px, 27svh, 270px);
		padding: 22px 14px;
		border-width: 10px;
		border-color: rgba(251, 247, 238, .44);
	}
}

@media screen and (max-width: 820px) {
	.potluck-page .scenic-steps-section {
		height: auto;
		min-height: calc(100svh - 68px);
		scroll-margin-top: 68px;
		overflow: hidden;
	}

	.potluck-page .scenic-steps-inner {
		width: 100%;
		height: auto;
		min-height: calc(100svh - 68px);
		padding: 54px 0 62px;
	}

	.potluck-page .scenic-steps-title {
		margin-bottom: 34px;
		padding: 0 9vw;
		font-size: var(--h2-font-size);
	}

	.potluck-page .scenic-steps-grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		padding: 0 9vw;
		margin: 0 auto;
		gap: 28px;
	}

	.potluck-page .scenic-step {
		width: 82%;
		max-width: 360px;
		min-height: 245px;
		margin: 0 auto;
		padding: 30px 28px;
		background: rgba(251, 247, 238, .93);
		border: 10px solid rgba(251, 247, 238, .50);
		box-shadow: 0 8px 22px rgba(40, 31, 23, .10);
		background-clip: padding-box;
	}

	.potluck-page .scenic-step b {
		margin-bottom: 12px;
	}

	.potluck-page .scenic-step h3 {
		margin-bottom: 12px;
		font-size: clamp(23px, 5.2vw, 28px);
	}

	.potluck-page .scenic-step p {
		max-width: 260px;
		font-size: 12.5px;
		line-height: 1.48;
	}
}

@media screen and (max-width: 736px) {
	.potluck-page .scenic-steps-grid {
		padding: 0 9vw;
		gap: 26px;
	}

	.potluck-page .scenic-step {
		width: 82%;
		max-width: 340px;
		min-height: 230px;
		padding: 28px 25px;
		border-width: 10px;
	}
}

@media screen and (max-width: 480px) {
	.potluck-page .scenic-steps-inner {
		padding-top: 48px;
		padding-bottom: 54px;
	}

	.potluck-page .scenic-steps-title {
		font-size: 34px;
		margin-bottom: 30px;
	}

	.potluck-page .scenic-steps-grid {
		padding: 0 9vw;
		gap: 24px;
	}

	.potluck-page .scenic-step {
		width: 82%;
		max-width: 320px;
		min-height: 215px;
		padding: 25px 22px;
		border-width: 9px;
	}

	.potluck-page .scenic-step h3 {
		font-size: clamp(22px, 6.1vw, 27px);
	}

	.potluck-page .scenic-step p {
		font-size: 12px;
	}
}

/* === FLOWERS MOBILE FILTER ROW HEIGHT MATCH 2026-08-30 ===
   Keep the category-filter row and Sort By row the same height so the
   divider rhythm is even on mobile. */
@media screen and (max-width: 820px) {
	.flowers-page .catalogue-primary-filters {
		min-height: 52px !important;
		box-sizing: border-box;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-items: center !important;
	}

	.flowers-page .catalogue-primary-filters button {
		align-self: center;
	}

	.flowers-page .catalogue-secondary-filters,
	.flowers-page .catalogue-secondary-filters label {
		min-height: 52px !important;
		height: 52px !important;
		box-sizing: border-box;
	}
}

/* === FLOWERS MOBILE FILTER / SORT EQUAL ROWS V2 2026-08-30 ===
   Authoritative mobile layout through the site's 820px breakpoint.
   Both divider bands are exactly 52px tall. */
@media screen and (max-width: 820px) {
	.flowers-page .catalogue-filter-bar {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: 52px 52px !important;
		gap: 0 !important;
		padding: 0 !important;
		border-top: 1px solid rgba(74, 36, 18, .12) !important;
		border-bottom: 1px solid rgba(74, 36, 18, .12) !important;
		background: var(--cream) !important;
	}

	.flowers-page .catalogue-primary-filters {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		height: 52px !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		border-bottom: 1px solid rgba(74, 36, 18, .12) !important;
	}

	.flowers-page .catalogue-primary-filters button {
		flex: 0 0 auto !important;
		align-self: center !important;
		margin: 0 !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}

	.flowers-page .catalogue-secondary-filters {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		height: 52px !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.flowers-page .catalogue-secondary-filters label {
		display: flex !important;
		align-items: center !important;
		height: 52px !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.flowers-page .catalogue-secondary-filters select {
		margin: 0 !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}
}

@media screen and (max-width: 736px) {
	.flowers-page .catalogue-filter-bar {
		grid-template-rows: 52px 52px !important;
	}
}

@media screen and (max-width: 480px) {
	.flowers-page .catalogue-filter-bar {
		grid-template-rows: 52px 52px !important;
	}
}

/* === FLOWERS FILTER LAYOUT V3 2026-08-30 ===
   Tablet widths (737–820px): keep category filters and Sort By on ONE row.
   Smaller mobile widths (<=736px): retain the two equal-height rows. */
@media screen and (min-width: 737px) and (max-width: 820px) {
	.flowers-page .catalogue-filter-bar {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-rows: 52px !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.flowers-page .catalogue-primary-filters {
		width: auto !important;
		min-width: 0 !important;
		height: 52px !important;
		min-height: 52px !important;
		border-bottom: 0 !important;
	}

	.flowers-page .catalogue-secondary-filters,
	.flowers-page .catalogue-secondary-filters label {
		width: auto !important;
		height: 52px !important;
		min-height: 52px !important;
	}
}

/* ==========================================================================
   PRODUCT PAGE — CONSOLIDATED DESKTOP / TABLET
   821px and above:
   - Prefer to fit everything through Add to Cart inside the first viewport.
   - Keep a deliberate bottom cushion beneath Add to Cart.
   - If the content cannot fit, the right column scrolls naturally; nothing clips.
   - Mobile (<=820px) keeps its existing carousel/layout rules.
   ========================================================================== */

@media screen and (min-width: 821px) {

	body.product-page,
	body.product-page #page-wrapper {
		height: auto !important;
		min-height: 100dvh !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}

	body.product-page .product-layout {
		height: auto !important;
		min-height: 100dvh !important;
		padding-top: 82px !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	body.product-page .product-primary-section {
		display: grid !important;
		grid-template-columns: 50% 50% !important;
		height: auto !important;
		min-height: calc(100dvh - 82px) !important;
		align-items: start !important;
		overflow: visible !important;
	}

	body.product-page .product-gallery-wrap,
	body.product-page .product-info-column {
		height: auto !important;
		min-height: 0 !important;
	}

	body.product-page .product-gallery-wrap {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		scrollbar-width: none !important;
	}

	body.product-page .product-gallery-wrap::-webkit-scrollbar,
	body.product-page .product-info-column::-webkit-scrollbar {
		display: none !important;
	}

	body.product-page .product-gallery {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	body.product-page .product-media,
	body.product-page .product-media.is-size-guide {
		width: 100% !important;
		height: calc(100dvh - 82px) !important;
		min-height: calc(100dvh - 82px) !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}

	body.product-page .product-media:not(.is-size-guide) {
		position: relative !important;
		padding: 0 !important;
	}

	body.product-page .product-media:not(.is-size-guide) img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	body.product-page .product-media.is-size-guide {
		padding: clamp(2rem, 4vw, 4rem) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #fafaf7 !important;
	}

	body.product-page .product-media.is-size-guide img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	body.product-page .product-carousel-arrow,
	body.product-page .product-carousel-dots {
		display: none !important;
	}

	body.product-page .product-info-column {
		overflow: visible !important;
		overscroll-behavior: auto !important;
		background: #fbf7ee !important;
	}

	body.product-page .product-info {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Fit-first purchase panel.
	   margin-top:auto on the gift-message row uses any spare viewport height,
	   placing the CTA lower. If space runs out, the margin collapses and the
	   right column simply scrolls. */
	body.product-page .product-purchase-panel {
		width: 100% !important;
		min-height: calc(100dvh - 82px) !important;
		height: auto !important;
		max-height: none !important;
		padding: clamp(12px, 2.2vh, 24px) clamp(48px, 5vw, 76px) clamp(32px, 6vh, 60px) clamp(54px, 5.6vw, 86px) !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		overflow: visible !important;
	}

	body.product-page .product-breadcrumb {
		margin: 0 0 clamp(6px, .9vh, 10px) !important;
		font-size: clamp(9px, 1.05vh, 11px) !important;
		line-height: 1.2 !important;
	}


	body.product-page .product-title span {
		display: block !important;
	}


	body.product-page .product-intro-description {
		max-width: 92% !important;
		margin: 0 !important;
		font-size: clamp(13px, 1.65vh, 16px) !important;
		line-height: 1.42 !important;
	}

	body.product-page .product-best-for {
		width: 92% !important;
		max-width: none !important;
		margin: clamp(11px, 1.5vh, 17px) 0 0 !important;
		padding-top: clamp(7px, 1vh, 11px) !important;
	}

	body.product-page .product-best-for h2,
	body.product-page .product-option-label,
	body.product-page .product-card-note-label {
		font-size: clamp(11px, 1.3vh, 13px) !important;
		line-height: 1.2 !important;
		margin-bottom: clamp(3px, .45vh, 5px) !important;
	}

	body.product-page .product-option-label {
		margin-bottom: -10px !important;
	}

	body.product-page .product-card-note-label {
		margin-bottom: clamp(3px, .45vh, 5px) !important;

	}

	body.product-page .product-best-for-row {
		margin-bottom: clamp(6px, .8vh, 10px) !important;
	}

	body.product-page .product-best-for-copy {
		grid-template-columns: clamp(104px, 8.8vw, 118px) minmax(0, 1fr) !important;
		column-gap: 8px !important;
		font-size: clamp(10.5px, 1.28vh, 12.5px) !important;
		line-height: 1.24 !important;
	}

	body.product-page .product-options {
		margin-bottom: 0 !important;
	}

	body.product-page .product-option,
	body.product-page .product-option:first-child {
		height: clamp(30px, 4.2vh, 42px) !important;
		min-height: clamp(30px, 4.2vh, 42px) !important;
		padding: 2px 12px !important;
		white-space: nowrap !important;
	}

	body.product-page .product-note-row {
		width: 92% !important;
		max-width: none !important;
		margin-top: auto !important;
		padding-top: clamp(12px, 1.5vh, 20px) !important;
		margin-bottom: clamp(6px, .8vh, 10px) !important;
	}

	body.product-page .product-card-note {
		width: 100% !important;
		height: clamp(38px, 5vh, 44px) !important;
		min-height: clamp(38px, 5vh, 44px) !important;
		max-height: clamp(38px, 5vh, 44px) !important;
		padding: clamp(7px, 1vh, 9px) 0 clamp(6px, .9vh, 8px) !important;
		line-height: 1.3 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		resize: none !important;
	}

	body.product-page .product-card-note::placeholder {
		font-size: clamp(12px, 1.35vh, 14px) !important;
		line-height: 1.3 !important;
		opacity: .9 !important;
	}

	body.product-page .product-validation {
		min-height: 0 !important;
		margin: 0 0 clamp(2px, .4vh, 4px) !important;
	}

	body.product-page .product-add-button {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: min(240px, 100%) !important;
		min-width: 210px !important;
		height: clamp(40px, 5.4vh, 46px) !important;
		min-height: clamp(40px, 5.4vh, 46px) !important;
		margin: clamp(2px, .3vh, 4px) 0 0 !important;
		flex: 0 0 auto !important;
	}

	body.product-page .product-aftercare.product-accordion {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 clamp(48px, 5vw, 76px) clamp(42px, 6vh, 64px) clamp(54px, 5.6vw, 86px) !important;
		box-sizing: border-box !important;
		background: #fbf7ee !important;
	}
}

/* 1081–1280px */
@media screen and (max-width: 1280px) and (min-width: 1081px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(46px, 4.5vw, 62px) !important;
		padding-right: clamp(42px, 4.2vw, 58px) !important;
	}

	body.product-page .product-title {
		font-size: clamp(40px, min(4.9vw, 6.15vh), 62px) !important;
	}
}

/* 821–1080px */
@media screen and (max-width: 1080px) and (min-width: 821px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(32px, 4vw, 44px) !important;
		padding-right: clamp(28px, 3.6vw, 40px) !important;
	}

	body.product-page .product-title {
		font-size: clamp(38px, min(5.1vw, 6vh), 54px) !important;
	}

	body.product-page .product-intro-description {
		font-size: clamp(14px, 1.6vh, 16px) !important;
	}

	body.product-page .product-best-for-copy {
		grid-template-columns: 100px minmax(0, 1fr) !important;
		font-size: clamp(9px, 1.08vh, 10.5px) !important;
	}
}


/* ==========================================================================
   PRODUCT PAGE — DESKTOP ACCORDION RESTORE V40
   The generic .product-aftercare rule is a 3-column grid for the older
   aftercare-card layout. The product page uses <details> accordions instead,
   so force that variant back to a single vertical stack on 821px+.
   ========================================================================== */

@media screen and (min-width: 821px) {
	body.product-page .product-aftercare.product-accordion {
		display: block !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		border-top: 0 !important;
	}

	body.product-page .product-info-disclosure {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-top: 1px solid #d8d0c5 !important;
	}

	body.product-page .product-info-disclosure:last-child {
		border-bottom: 1px solid #d8d0c5 !important;
	}

	body.product-page .product-info-disclosure summary {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		list-style: none !important;
		cursor: pointer !important;
		padding: 1.1rem 2rem 1.1rem 0 !important;
		font-size: .66rem !important;
		font-weight: 600 !important;
		letter-spacing: .15em !important;
		text-transform: uppercase !important;
		color: #28241f !important;
	}

	body.product-page .product-info-disclosure summary::-webkit-details-marker {
		display: none !important;
	}

	body.product-page .product-info-disclosure summary::after {
		content: '+' !important;
		position: absolute !important;
		right: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		font-size: 1rem !important;
		font-weight: 400 !important;
		letter-spacing: 0 !important;
	}

	body.product-page .product-info-disclosure[open] summary::after {
		content: '−' !important;
	}

	body.product-page .product-info-disclosure-body {
		width: 100% !important;
		padding: 0 0 1.25rem !important;
	}

	body.product-page .product-info-disclosure-body p {
		max-width: 500px !important;
		margin: 0 !important;
		font-size: .84rem !important;
		line-height: 1.6 !important;
	}
}


/* ==========================================================================
   PRODUCT PAGE — DESKTOP TEXT POSITION V41
   Bring the right-column copy closer to the image and lift the breadcrumb.
   ========================================================================== */

@media screen and (min-width: 821px) {
	body.product-page .product-purchase-panel {
		padding-top: clamp(6px, 1.2vh, 14px) !important;
		padding-left: clamp(32px, 3.4vw, 54px) !important;
		padding-right: clamp(36px, 4.2vw, 64px) !important;
	}

	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(32px, 3.4vw, 54px) !important;
		padding-right: clamp(36px, 4.2vw, 64px) !important;
	}
}

@media screen and (max-width: 1280px) and (min-width: 1081px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(30px, 3.2vw, 42px) !important;
		padding-right: clamp(30px, 3.5vw, 46px) !important;
	}
}

@media screen and (max-width: 1080px) and (min-width: 821px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(26px, 3vw, 34px) !important;
		padding-right: clamp(24px, 3vw, 32px) !important;
	}
}


/* ==========================================================================
   PRODUCT PAGE — EVEN VERTICAL SCALE + CLOSER TEXT V42
   821px+:
   - eyebrow starts at the top of the image area
   - Add to Cart sits around the lower 7/8 of the image area when space allows
   - spare vertical room is distributed evenly, not dumped into one big gap
   - if the content cannot fit, the right column simply scrolls
   - 1084px+ horizontal inset is reduced to ~75% of the previous distance
   ========================================================================== */

@media screen and (min-width: 821px) {
	body.product-page .product-purchase-panel {
		/* Start the eyebrow essentially level with the image top. */
		padding-top: clamp(4px, .7vh, 8px) !important;

		/* Leave a deliberate lower cushion so the CTA lands near 7/8 down
		   the image rather than sitting against the viewport edge. */
		padding-bottom: clamp(42px, 8vh, 78px) !important;

		/* Use the image-height as the minimum canvas. If content needs more
		   room, this grows naturally and the right column scrolls. */
		min-height: calc(100dvh - 82px) !important;
		height: auto !important;
		max-height: none !important;

		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		gap: clamp(4px, .6vh, 8px) !important;
	}

	body.product-page .product-breadcrumb {
		margin-top: 0 !important;
		margin-bottom: clamp(5px, .7vh, 8px) !important;
	}

	body.product-page .product-title {
		margin-bottom: clamp(12px, 1.2vh, 14px) !important;
		font-size: clamp(40px, min(5vw, 6.3vh), 68px) !important;
		line-height: .98 !important;
		max-width: 92% !important;
	}

	body.product-page .product-price {
		margin: 0 0 clamp(11px, 1.5vh, 17px) !important;
		font-size: clamp(17px, 2.15vh, 23px) !important;
		line-height: 1 !important;
		margin-bottom: clamp(4px, .6vh, 4px) !important;
	}

	body.product-page .product-intro-description {
		margin-bottom: 0 !important;
	}

	body.product-page .product-best-for {
		margin-top: 0px !important;
		/* clamp(10px, 1vh, 12px) !important; */
		padding-top: 0px !important;
	}

	body.product-page .product-option-row {
		width: 92% !important;
		max-width: none !important;
		margin: clamp(6px, .8vh, 9px) 0 0 !important;
	}

	/* Remove the old auto spacer that created the large empty block
	   before Gift Message. Space is now distributed across the full panel. */
	body.product-page .product-note-row {
		margin-top: 0 !important;
		padding-top: clamp(6px, .8vh, 9px) !important;
		margin-bottom: clamp(2px, .3vh, 4px) !important;
	}

	body.product-page .product-validation {
		margin-bottom: clamp(2px, .3vh, 3px) !important;
	}
}

/* 1084px and above: bring the text ~25% closer to the image. */
@media screen and (min-width: 1084px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(24px, 2.55vw, 40px) !important;
	}
}

/* Keep the same closer relationship through the 1084–1280 range. */
@media screen and (min-width: 1084px) and (max-width: 1280px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(22px, 2.4vw, 32px) !important;
	}
}


/* ==========================================================================
   PRODUCT PAGE — REMOVE HIDDEN OUTER INFO PADDING V43
   The large gap was not coming from .product-purchase-panel anymore.
   An older .product-info-column rule still had:
     padding: ... clamp(2.5rem, 6vw, 7rem)
   plus flex centering.
   Remove that outer inset so the purchase-panel positioning is authoritative.
   ========================================================================== */

@media screen and (min-width: 821px) {
	body.product-page .product-info-column {
		padding: 0 !important;
		display: block !important;
		align-items: initial !important;
		justify-content: initial !important;
	}

	body.product-page .product-info {
		margin: 0 !important;
		padding: 0 !important;
	}

	body.product-page .product-purchase-panel {
		/* Eyebrow now begins almost exactly at the top of the image area. */
		padding-top: 4px !important;
	}
}

/* 1084px+: keep only a modest inset from the image edge. */
@media screen and (min-width: 1084px) {

	body.product-page .product-purchase-panel,
	body.product-page .product-aftercare.product-accordion {
		padding-left: clamp(65px, 2.5vw, 80px) !important;
	}
}

/* ==========================================================================
   PRODUCT PAGE — ADD TO CART VERTICAL ANCHOR V44
   For 821px+, keep the top of the purchase content aligned with the image,
   while placing the bottom of the Add to Cart button at approximately 8/9
   of the product image height. Intermediate space is distributed naturally.
   If the content cannot fit, the panel grows and remains scrollable instead
   of clipping.
   ========================================================================== */

@media screen and (min-width: 821px) {
	body.product-page .product-purchase-panel {
		/* Image area is the viewport below the desktop navigation. */
		min-height: calc((100svh - var(--site-nav-height, 82px)) * 0.8889) !important;
		display: flex !important;
		flex-direction: column !important;
		padding-top: 4px !important;
		padding-bottom: 0 !important;
	}

	body.product-page .product-purchase-panel .product-add-to-cart,
	body.product-page .product-purchase-panel .add-to-cart,
	body.product-page .product-purchase-panel button[type="submit"] {
		margin-top: auto !important;
		margin-bottom: 0 !important;
	}
}

/* ==========================================================================
   PRODUCT PAGE — DESKTOP PURCHASE LAYOUT RESET V45
   821px+:
   - breadcrumb sits almost at the top of the product image
   - Add to Cart finishes at roughly 95% of the image height
   - everything between is distributed across the available vertical space
   - if the content genuinely needs more room, it can grow rather than clip
   ========================================================================== */

@media screen and (min-width: 821px) {

	body.product-page .product-info-column {
		padding: 0 !important;
		display: block !important;
	}

	body.product-page .product-info {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}

	body.product-page .product-purchase-panel {
		/* Keep a full-screen minimum, but let short-window content grow. */
		width: 100% !important;
		height: auto !important;
		min-height: calc(100svh - var(--site-nav-height, 82px)) !important;
		max-height: none !important;
		box-sizing: border-box !important;

		/* Breadcrumb almost level with image top; 10% lower reserve puts
		   the bottom of the CTA at approximately 95% of image height. */
		padding-top: clamp(4px, .7vh, 8px) !important;
		padding-bottom: calc((100svh - var(--site-nav-height, 82px)) * .05) !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: clamp(8px, 1.2vh, 14px) !important;
		overflow: visible !important;
	}

	body.product-page .product-breadcrumb {
		margin-top: 0 !important;
		margin-bottom: clamp(5px, .7vh, 8px) !important;
		flex: 0 0 auto !important;
	}

	/* Remove the previous CTA auto-margin behaviour. The panel itself now
	   distributes all purchase content evenly from breadcrumb to CTA. */
	body.product-page .product-purchase-panel .product-add-to-cart,
	body.product-page .product-purchase-panel .add-to-cart,
	body.product-page .product-purchase-panel button[type="submit"] {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		flex: 0 0 auto !important;
	}
}



/* ==========================================================================
   PRODUCT PAGE — PURCHASE VS CONTACT PRODUCT FIX V47
   The 95%-height distribution should only apply to products that actually
   have an Add to Cart button. Bespoke/contact-only products use their normal
   editorial flow and must not be stretched across the viewport.
   ========================================================================== */

@media screen and (min-width: 821px) {

	/* Purchasable products: keep the 95% image-height composition. */
	body.product-page .product-purchase-panel:has(.product-add-button) {
		height: auto !important;
		min-height: calc(100svh - var(--site-nav-height, 82px)) !important;
		padding-top: clamp(4px, .7vh, 8px) !important;
		padding-bottom: calc((100svh - var(--site-nav-height, 82px)) * .04) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		gap: clamp(10px, 1.45vh, 17px) !important;
	}

	/* Bespoke / enquiry products: restore compact natural spacing. */
	body.product-page .product-purchase-panel:not(:has(.product-add-button)) {
		height: auto !important;
		min-height: calc(100svh - var(--site-nav-height, 82px)) !important;
		padding-top: clamp(8px, 1.2vh, 14px) !important;
		padding-bottom: clamp(36px, 5vh, 56px) !important;
		display: block !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-breadcrumb {
		margin: 0 0 clamp(10px, 1.4vh, 16px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-contact-actions {
		margin-top: clamp(24px, 3.5vh, 38px) !important;
		justify-content: flex-start !important;
	}
}


/* ==========================================================================
   PRODUCT PAGE — BESPOKE / CONTACT PRODUCT COMPACT LAYOUT V48
   Desktop/tablet 821px+ only.
   ========================================================================== */

@media screen and (min-width: 821px) {

	/* Bespoke/contact-only products: keep the full composition higher and tighter. */
	body.product-page .product-purchase-panel:not(:has(.product-add-button)) {
		min-height: 0 !important;
		height: auto !important;
		padding-top: clamp(4px, .6vh, 7px) !important;
		padding-bottom: clamp(24px, 3vh, 36px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-breadcrumb {
		margin-bottom: clamp(6px, .8vh, 9px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-title {
		margin-bottom: clamp(10px, 1.35vh, 15px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-price {
		margin-bottom: clamp(12px, 1.6vh, 18px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-intro-description {
		margin-bottom: 0 !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-best-for {
		margin-top: clamp(14px, 2vh, 22px) !important;
		padding-top: clamp(8px, 1.1vh, 12px) !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-contact-actions {
		margin-top: clamp(20px, 2.8vh, 30px) !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 10px !important;
	}

	/* Turn DM / Email links into proper brown CTA buttons. */
	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-contact-actions a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 10px 18px !important;
		margin: 0 !important;
		border: 1px solid var(--brown) !important;
		border-radius: 0 !important;
		background: var(--brown) !important;
		color: #fff !important;
		font-size: .66rem !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		letter-spacing: .14em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
	}

	body.product-page .product-purchase-panel:not(:has(.product-add-button)) .product-contact-actions a:hover {
		background: transparent !important;
		color: var(--brown) !important;
		border-color: var(--brown) !important;
	}
}



body.checkout-page .checkout-field>span {
	font-family: var(--sans);
	font-size: 0.72rem !important;
	line-height: 1.2 !important;
	font-weight: 100 !important;
}


body.checkout-page .checkout-field input {
	font-size: 0.8rem !important;
	line-height: 1.2 !important;
	height: 25px !important;
	min-height: 25x !important;
	padding: 0 0 5px 0 !important;

}



body.checkout-page .checkout-field {
	gap: 2px !important;
	margin-bottom: 15px !important;
}

.cart-drawer-backdrop,
.cart-drawer-backdrop:focus,
.cart-drawer-backdrop:focus-visible,
.cart-drawer-backdrop:active {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
}


/* WHAT'S INCLUDED / DELIVERY / CARE */
body.product-page .product-aftercare summary {
	color: var(--brown) !important;
}

/* Main accordion body text */
body.product-page .product-aftercare p,
body.product-page .product-aftercare li {
	color: var(--walnut-husk) !important;
	font-family: inherit;
	font-weight: 400 !important;

}

/* While they're with you / When they start to fade */
body.product-page .product-aftercare h4 {
	color: var(--brown-2) !important;
	font-size: 0.9rem;
	font-family: var(--serif);
}


/* ==========================================
   ABOUT PAGE — STANDARD TYPOGRAPHY OVERRIDE
   ========================================== */


/* ABOUT — Who We Are image */

body.about-page .editorial-image {
	width: 80% !important;
	aspect-ratio: 4 / 5 !important;
	justify-self: center;
}



/* ==========================================
   ABOUT PAGE — FINAL TYPOGRAPHY + MOBILE
   ========================================== */

/* Desktop H2 sizing */
body.about-page .section-title,
body.about-page .editorial-copy h2,
body.about-page .care-guide-header h2 {
	font-size: var(--h2-font-size) !important;
	color: var(--brown) !important;
}

/* "We started as two..." + other main About copy */
body.about-page .lead,
body.about-page .care-guide-header p {
	font-size: var(--p-header-bloom-bar-font-size) !important;
	color: var(--walnut-husk) !important;

}


body.about-page .editorial-copy p {
	font-size: var(--p-bloom-bar-font-size) !important;
	color: var(--walnut-husk);
}

/* CARE GUIDE — category headings */

/* body.about-page .care-guide-block h3 {
    font-size: clamp(16px, 1.3vw, 19px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
} */

body.about-page .care-guide-label {
	font-size: clamp(0.7rem, 0.7vw, 0.8rem) !important;
}

/* =========================
   MOBILE
   ========================= */

@media screen and (max-width: 820px) {

	body.about-page .care-guide-label {
		font-size: clamp(1.2rem, 1.5vw, 1.8rem) !important;
	}

	body.about-page .care-guide-header p {
		font-size: var(--p-header-bloom-bar-font-size) !important;
	}

	body.about-page .editorial-copy p {
		font-size: var(--p-header-bloom-bar-font-size) !important;
		color: var(--walnut-husk);
	}


}


@media screen and (max-width: 736px) {

	body.about-page .care-guide-label {
		font-size: clamp(0.9rem, 1.2vw, 1.4rem) !important;
	}

}

@media screen and (max-width: 480px) {

	/* Mobile H2 size */
	body.about-page .section-title,
	body.about-page .editorial-copy h2,
	body.about-page .care-guide-header h2 {
		font-size: var(--h2-font-size-480) !important;
	}

	/* WHO WE ARE:
       heading/text first, image underneath */
	body.about-page .editorial-layout {
		display: flex !important;
		flex-direction: column !important;
		text-align: center !important;
	}

	body.about-page .editorial-copy {
		order: 1 !important;
		text-align: center !important;
		max-width: 100% !important;
	}

	body.about-page .editorial-image {
		order: 2 !important;
		width: 80% !important;
		margin: 32px auto 0 !important;
	}

	body.about-page .editorial-copy h2,
	body.about-page .editorial-copy p {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}


	/* "WE STARTED AS TWO..." section */
	body.about-page #our-story .section-center,
	body.about-page #our-story .section-title,
	body.about-page #our-story .lead {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}


	/* FAQ heading + intro */
	body.about-page .care-guide-header {
		display: block !important;
		text-align: center !important;
	}

	body.about-page .care-guide-header h2,
	body.about-page .care-guide-header p {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.about-page .care-guide-label {
		font-size: clamp(0.9rem, 0.9vw, 1rem) !important;
		/* letter-spacing: 0.12em !important; */
		/* font-weight: 500 !important; */
	}

}

/* =====================================================
   ABOUT + TERMS — SHARED EDITORIAL ALIGNMENT
   ===================================================== */


/* DESKTOP */
/* ==========================================
   TERMS INTRO — MATCH FAQ LAYOUT
   ========================================== */

@media screen and (min-width: 821px) {

	body.terms-page .section.section-intro {
		width: min(1180px, calc(100% - 80px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.terms-page .section.section-intro .section-center {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;

		display: grid !important;
		grid-template-columns: 1.2fr 1fr !important;
		gap: clamp(70px, 10vw, 150px) !important;
		align-items: start !important;
	}

	body.terms-page .section.section-intro .section-title {
		margin: 0 !important;
		text-align: left !important;
	}

	body.terms-page .section.section-intro .lead {
		margin: 0 !important;
		max-width: 520px !important;
		justify-self: end !important;
		text-align: left !important;
	}
}

/* =====================================================
   MOBILE
   ===================================================== */

@media screen and (max-width: 820px) {

	body.terms-page .section.section-intro,
	body.terms-page .terms,
	body.about-page .care-guide-section {
		width: min(100% - 38px, 620px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.terms-page .section.section-intro .section-center {
		display: block !important;
		width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
	}

	body.terms-page .section.section-intro .section-title,
	body.terms-page .section.section-intro .lead {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.terms-page .terms-block,
	body.about-page .care-guide-header,
	body.about-page .care-guide-row {
		grid-template-columns: 1fr !important;
	}
}


/* ==========================================
   TERMS — ALIGN SECTIONS WITH MAIN HEADING
   ========================================== */

@media screen and (min-width: 821px) {

	body.terms-page .terms {
		width: min(1180px, calc(100% - 80px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}




/* ABOUT — match Flowers hero image height */

body.about-page .page-banner {
	height: clamp(280px, 38vh, 460px) !important;
}


/* ABOUT — Care Guide subheadings match FAQ questions */

body.about-page .care-guide-block h3 {
	font-family: var(--serif) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02rem !important;
	text-transform: none !important;
	line-height: inherit !important;
}



/* =====================================================
   PRODUCT DESKTOP — IMAGE PANE FIRST, THEN TEXT PANE
   ===================================================== */

@media screen and (min-width: 821px) {

	body.product-page .product-layout {
		display: block !important;
		padding-top: 82px !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.product-page .product-primary-section {
		display: grid !important;
		grid-template-columns: 50% 50% !important;

		height: calc(100svh - 82px) !important;
		min-height: 0 !important;

		align-items: stretch !important;
		overflow: hidden !important;
	}

	/* ==================================
       LEFT — REAL SCROLL CONTAINER
       ================================== */

	body.product-page .product-gallery-wrap {
		position: relative !important;

		width: 100% !important;
		height: calc(100svh - 82px) !important;
		min-height: 0 !important;

		overflow-y: auto !important;
		overflow-x: hidden !important;

		overscroll-behavior: contain !important;
		scrollbar-width: none !important;
	}

	body.product-page .product-gallery-wrap::-webkit-scrollbar {
		display: none !important;
	}

	body.product-page .product-gallery {
		display: block !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		overflow: visible !important;
	}

	body.product-page .product-media,
	body.product-page .product-media.is-size-guide {
		width: 100% !important;

		height: calc(100svh - 82px) !important;
		min-height: calc(100svh - 82px) !important;

		margin: 0 !important;
	}

	/* ==================================
       RIGHT — SECOND SCROLL CONTAINER
       ================================== */

	body.product-page .product-info-column {
		position: relative !important;
		top: auto !important;

		width: 100% !important;
		height: calc(100svh - 82px) !important;
		min-height: 0 !important;

		overflow-y: auto !important;
		overflow-x: hidden !important;

		overscroll-behavior: contain !important;
		scrollbar-width: none !important;

		background: var(--cream) !important;
	}

	body.product-page .product-info-column::-webkit-scrollbar {
		display: none !important;
	}
}

/* ========================================================================== 
   DONTCHA CATALOGUE DROPDOWNS — custom Category / Sort menu
   Replaces the browser/OS popup while keeping the native select underneath.
   ========================================================================== */
.flowers-page .catalogue-secondary-filters label,
.occasions-page .catalogue-secondary-filters label {
	position: relative;
	overflow: visible !important;
}

.flowers-page .dontcha-native-select,
.occasions-page .dontcha-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
}

.flowers-page .dontcha-select,
.occasions-page .dontcha-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	z-index: 30;
}

.flowers-page .dontcha-select-trigger,
.occasions-page .dontcha-select-trigger {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: 0 18px 10px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--muted-stone) !important;
	opacity: .66;
	cursor: pointer;
	white-space: nowrap;
}

.flowers-page .dontcha-select-trigger::after,
.occasions-page .dontcha-select-trigger::after {
	content: '';
	position: absolute;
	right: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 180ms ease, margin-top 180ms ease;
}

.flowers-page .dontcha-select.is-open .dontcha-select-trigger,
.occasions-page .dontcha-select.is-open .dontcha-select-trigger {
	color: var(--brown) !important;
	opacity: 1;
}

.flowers-page .dontcha-select.is-open .dontcha-select-trigger::after,
.occasions-page .dontcha-select.is-open .dontcha-select-trigger::after {
	transform: rotate(225deg);
	margin-top: -1px;
}

.flowers-page .dontcha-select-trigger:hover,
.flowers-page .dontcha-select-trigger:focus-visible,
.occasions-page .dontcha-select-trigger:hover,
.occasions-page .dontcha-select-trigger:focus-visible {
	color: var(--brown) !important;
	opacity: 1;
	outline: none !important;
}

.flowers-page .dontcha-select-menu,
.occasions-page .dontcha-select-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	min-width: 205px;
	width: max-content;
	max-width: min(300px, calc(100vw - 28px));
	margin: 0;
	padding: 7px 0;
	border: 1px solid rgba(74, 36, 18, .18);
	border-radius: 0;
	background: var(--cream);
	box-shadow: 0 10px 26px rgba(62, 43, 35, .08);
}

.flowers-page .dontcha-select-menu[hidden],
.occasions-page .dontcha-select-menu[hidden] {
	display: none !important;
}

/* The first secondary control on Occasions is Category: open it to the left. */
.occasions-page .catalogue-secondary-filters label:first-child .dontcha-select-menu {
	left: 0;
	right: auto;
}

.flowers-page .dontcha-select-option,
.occasions-page .dontcha-select-option {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0 !important;
	padding: 9px 16px 9px 30px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: left;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	letter-spacing: .10em !important;
	text-transform: uppercase !important;
	color: var(--walnut-husk) !important;
	cursor: pointer;
	white-space: nowrap;
}

.flowers-page .dontcha-select-option:hover,
.flowers-page .dontcha-select-option:focus-visible,
.occasions-page .dontcha-select-option:hover,
.occasions-page .dontcha-select-option:focus-visible {
	background: rgba(74, 36, 18, .045) !important;
	color: var(--brown) !important;
	outline: none !important;
}

.flowers-page .dontcha-select-option.is-selected,
.occasions-page .dontcha-select-option.is-selected {
	color: var(--brown) !important;
}

.flowers-page .dontcha-select-option.is-selected::before,
.occasions-page .dontcha-select-option.is-selected::before {
	content: '✓';
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-53%);
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--brown);
}

@media screen and (max-width: 820px) {

	.flowers-page .dontcha-select-trigger,
	.occasions-page .dontcha-select-trigger {
		height: 52px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.flowers-page .dontcha-select-trigger::after,
	.occasions-page .dontcha-select-trigger::after {
		margin-top: -3px;
	}

	.flowers-page .dontcha-select-menu,
	.occasions-page .dontcha-select-menu {
		top: calc(100% - 1px);
	}
}

/* ========================================================================== 
   DONTCHA CATALOGUE DROPDOWNS — mobile viewport alignment fix
   Keep custom Category / Sort menus fully inside the screen.
   ========================================================================== */
@media screen and (max-width: 820px) {

	.flowers-page .dontcha-select-menu,
	.occasions-page .dontcha-select-menu {
		left: 0 !important;
		right: auto !important;
		width: max-content !important;
		min-width: 205px !important;
		max-width: calc(100vw - 28px) !important;
	}

	/* If a trigger happens to sit very close to the right edge, let the menu
       anchor to the viewport-safe side instead of extending off-screen. */
	.flowers-page .catalogue-secondary-filters label:last-child .dontcha-select-menu,
	.occasions-page .catalogue-secondary-filters label:last-child .dontcha-select-menu {
		left: 0 !important;
		right: auto !important;
	}
}

/* ========================================================================== 
   FLOWERS + OCCASIONS — QUICKER SOFT IMAGE LOAD
   Keep the same soft treatment, but resolve faster on catalogue-heavy pages.
   ========================================================================== */

.flowers-page img:not(.dontcha-no-soft-load),
.occasions-page img:not(.dontcha-no-soft-load) {
	transition:
		opacity .25s cubic-bezier(.22, .61, .36, 1),
		filter .25s cubic-bezier(.22, .61, .36, 1),
		transform .4s cubic-bezier(.22, .61, .36, 1) !important;
}

.flowers-page [data-bg-img],
.flowers-page .product-card-image,
.occasions-page [data-bg-img],
.occasions-page .product-card-image {
	transition:
		opacity .25s cubic-bezier(.22, .61, .36, 1),
		filter .25s cubic-bezier(.22, .61, .36, 1) !important;
}

/* ========================================================================== 
   HOME HERO SOFT-LOAD — FIXED NAV SAFETY
   The home hero contains the fixed navbar. Applying filter/opacity directly to
   #header-wrapper makes position:fixed descendants behave as if fixed to the
   hero instead of the viewport. Keep the wrapper unfiltered and fade a cream
   overlay instead, so the hero still resolves softly while the nav stays fixed.
   ========================================================================== */
body.homepage #header-wrapper,
body.homepage.is-preload #header-wrapper,
body.homepage #header-wrapper.dontcha-bg-loading,
body.homepage #header-wrapper.dontcha-bg-ready {
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
}

body.homepage #header-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--cream);
	opacity: 0;
	transition: opacity .68s cubic-bezier(.22, .61, .36, 1);
}

body.homepage.is-preload #header-wrapper::after,
body.homepage #header-wrapper.dontcha-bg-loading::after {
	opacity: 1;
}

body.homepage #header-wrapper.dontcha-bg-ready::after {
	opacity: 0;
}

/* Keep hero copy and nav above the temporary reveal overlay. */
body.homepage #header-wrapper>#header {
	position: relative;
	z-index: 20;
}

body.homepage #header-wrapper>#hero {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.homepage #header-wrapper::after {
		opacity: 0 !important;
		transition: none !important;
	}
}

/* ========================================================================== 
   FLOWERS + OCCASIONS — KEEP NAV DROPDOWNS ABOVE CATALOGUE CONTENT
   The fixed nav lives inside #header-wrapper. The sticky catalogue/filter
   content can otherwise paint above dropdowns that extend beyond the hero.
   Raise only the page header stacking context; do not alter fixed-nav behavior.
   ========================================================================== */
@media screen and (min-width: 781px) {

	body.flowers-page #header-wrapper,
	body.occasions-page #header-wrapper {
		position: relative !important;
		z-index: 1200 !important;
		overflow: visible !important;
	}
}





/* BLOOM BAR — gatherings fit one desktop viewport */

@media screen and (min-width: 821px) {

	.bloom-bar-page .bloom-gatherings-section {
		height: calc(100svh - 82px) !important;
		min-height: 0 !important;
		padding: 48px 5vw !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		display: flex !important;
		align-items: center !important;
	}

	.bloom-bar-page .bloom-gatherings-inner {
		width: min(1120px, 100%) !important;
		margin: 0 auto !important;
	}

	.bloom-bar-page .bloom-gatherings-image {
		width: 300px !important;
		margin-top: 28px !important;
	}

	.bloom-bar-page .bloom-gatherings-list {
		padding-top: 72px !important;
		gap: 26px !important;
	}
}
/* ========================================================================== 
   HOME HERO — GUARANTEED SOFT REVEAL
   Keep the hero itself unfiltered so the fixed navbar remains truly fixed.
   The cream veil is present from the first paint, then JS removes it only
   after the hero image is actually ready.
   ========================================================================== */
body.homepage #header-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--cream);
    opacity: 1 !important;
    transition: opacity 1.05s cubic-bezier(.22, .61, .36, 1) !important;
    will-change: opacity;
}

body.homepage.home-hero-revealed #header-wrapper::after {
    opacity: 0 !important;
}

body.homepage #header-wrapper > #header {
    position: relative;
    z-index: 20;
}

body.homepage #header-wrapper > #hero {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.homepage #header-wrapper::after {
        opacity: 0 !important;
        transition: none !important;
    }
}