﻿/* Safety net against mobile horizontal scroll/rubber-banding: several sources (full-width
   Elementor sections, entrance-animation transforms before they settle, decorative floating
   elements) can push the document a few px wider than the viewport without any content
   actually being visibly cut off - clipping at the root is the standard, reliable fix.
   Important: this goes on body ONLY, not html - overflow-x:hidden on BOTH elements at once
   is a known cause of mouse-wheel scrolling breaking in some browsers (it leaves the engine
   unsure which element owns the scroll), which is exactly what happened here. */
html {
	max-width: 100%;
}
body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
}

/* This section used to hold only the (now removed) decorative earrings PNG, pulled up over
   the "collections" heading above it via a -274px top margin baked into the page's own Elementor
   data. With nothing left inside, it collapsed to ~0 height and the next section rode up into
   the heading text - this restores the height the image used to contribute so spacing matches. */
.elementor-element-c922559 {
	min-height: 280px;
}
@media only screen and (max-width: 767px) {
	/* The -274px pull-up margin baked into this section is a fixed px value, not
	   responsive, so the 280px desktop fix left a huge gap once the "collections"
	   heading's own layout got shorter on a narrow phone - less height is needed here.
	   Its own padding/column structure still renders ~200px tall even with nothing
	   visible inside, so a negative margin pulls the product grid up to close the
	   rest of the gap, and the grid section's own 60px margin-top is trimmed too. */
	.elementor-element-c922559 {
		min-height: 0;
		margin-bottom: -210px;
	}
	.elementor-element-371d5e5 {
		margin-top: 10px !important;
	}
}

/* Mimoza custom header layout: menu left, logo truly centered, cart+menu-toggle right.
   Transparent over the hero, solid cream once stuck to the top on scroll. */

.fixed-header-box.vamtam-sticky-header {
	background-color: transparent;
}
.fixed-header-box.vamtam-sticky-header.vamtam-sticky-header--fixed-shown {
	background-color: transparent !important;
}

header.main-header.layout-logo-menu .header-contents {
	display: flex;
	align-items: center;
	position: relative;
}

/* Menu: left */
header.main-header.layout-logo-menu .header-contents .second-row {
	order: 1;
	flex: 0 0 auto;
	width: auto;
	text-align: left;
}
header.main-header.layout-logo-menu .header-contents .second-row #menus {
	margin-right: 0;
}

/* Logo: truly centered, independent of left/right group widths */
header.main-header.layout-logo-menu .header-contents .first-row {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	min-height: 0;
	justify-content: center;
}
header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper {
	text-align: center;
}
header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper .logo img {
	max-height: 64px !important;
	width: auto;
}
header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper .site-tagline {
	display: none;
}

/* Cart + menu toggle: right, grouped together. Absolutely positioned (like the
   logo) so they sit precisely regardless of the menu's width on the left -
   flex "order + auto margin" tricks broke here once there were 2 right-side items. */
header.main-header.layout-logo-menu .header-contents .mimoza-menu-toggle {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
header.main-header.layout-logo-menu .header-contents .cart-dropdown {
	position: absolute;
	right: 46px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	height: 24px !important;
	display: flex;
	align-items: center;
	overflow: visible;
}
.cart-dropdown .cart-dropdown-inner {
	display: flex !important;
	align-items: center;
	height: 24px;
}
.cart-dropdown .vamtam-cart-dropdown-link {
	position: relative !important;
	display: inline-flex !important;
	width: 24px !important;
	height: 24px !important;
	align-items: center;
	justify-content: center;
}
.mimoza-cart-icon {
	display: inline-flex;
	color: var(--vamtam-h3-color, #364784);
}
.mimoza-cart-icon svg {
	fill: none !important;
	stroke: currentColor !important;
}
.cart-dropdown .products {
	position: absolute !important;
	top: -5px !important;
	right: -5px !important;
	left: auto !important;
	bottom: auto !important;
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	max-width: 14px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: var(--vamtam-h3-color, #364784);
	color: #fff !important;
	font-size: 8px !important;
	line-height: 14px !important;
	text-align: center;
}

/* Language switcher: a globe icon between the cart and the hamburger toggle. */
header.main-header.layout-logo-menu .header-contents .mimoza-lang-switcher {
	position: absolute;
	right: 92px;
	top: 50%;
	transform: translateY(-50%);
}
.mimoza-lang-switcher {
	position: relative;
}
.mimoza-lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	color: var(--vamtam-h3-color, #364784);
}
.mimoza-lang-switcher__menu {
	position: absolute;
	top: calc(100% + 16px);
	right: -10px;
	z-index: 20;
	min-width: 130px;
	padding: 8px 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(54, 71, 132, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.mimoza-lang-switcher:hover .mimoza-lang-switcher__menu,
.mimoza-lang-switcher__menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mimoza-lang-switcher__menu a {
	display: block;
	padding: 9px 18px;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #364784;
	text-decoration: none;
	white-space: nowrap;
}
.mimoza-lang-switcher__menu a:hover {
	background: rgba(54, 71, 132, 0.06);
}
.mimoza-lang-switcher__menu a.is-active {
	font-weight: 700;
}
.mimoza-lang-switcher__menu a.is-active::before {
	content: '\2713\0020';
}
@media only screen and (max-width: 899px) {
	/* Logo moves to the left on mobile instead of staying centred - this also
	   permanently resolves the logo/icon-cluster collision fight at narrow
	   widths, since they're no longer both competing for the same centre space. */
	header.main-header.layout-logo-menu .header-contents .first-row {
		left: 20px;
		transform: translateY(-50%);
	}
	header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper {
		text-align: left;
	}
	/* The base theme force-hides .cart-dropdown on mobile (it has its own, unused,
	   fallback mobile cart in the logo area instead) - our header replaces that
	   system entirely, so the cart stays visible here too. */
	.responsive-layout .fixed-header-box header.main-header.layout-logo-menu .header-contents .cart-dropdown {
		display: flex !important;
	}
	/* Below a theme-internal breakpoint (around 380px), the base theme's OWN
	   fallback hamburger toggle starts rendering inside the logo area too (in
	   plain black, not matching our design) - it sat right on top of our globe
	   icon. We have our own menu toggle everywhere, so this one is just hidden. */
	.mobile-logo-additions {
		display: none !important;
	}
	/* Tighter grouping + smaller touch targets so all 3 icons comfortably fit
	   next to a mobile-width logo without crowding it. */
	header.main-header.layout-logo-menu .header-contents .mimoza-menu-toggle {
		right: 0;
	}
	/* .cart-dropdown is 42px wide (24px icon + an 18px-wide badge that overflows
	   to its right), but the icon glyph itself sits flush against the LEFT edge
	   of that box. Balancing the "right" offset against the box's own width (as
	   before) lines up the box edges evenly but leaves the visible glyph sitting
	   much closer to the lang switcher than to the hamburger - the eye sees an
	   uneven gap even though the invisible boxes are balanced. Accounting for
	   that 18px of icon-to-box offset here keeps the actual glyph-to-glyph gaps
	   equal instead. */
	header.main-header.layout-logo-menu .header-contents .cart-dropdown {
		right: 20px;
	}
	header.main-header.layout-logo-menu .header-contents .mimoza-lang-switcher {
		right: 76px;
	}
}
@media only screen and (max-width: 400px) {
	/* Below ~400px the centred logo and the right-anchored icon cluster start
	   fighting for the same space (the logo is centred on the viewport, the
	   icons sit a fixed distance from the right edge, so a narrower screen
	   pushes them into each other) - shrinking the logo a bit further and
	   tightening the icon gaps keeps a clean gap between them down to the
	   narrowest common phone widths. */
	header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper .logo img {
		max-height: 24px !important;
	}
	header.main-header.layout-logo-menu .header-contents .mimoza-menu-toggle {
		right: 0;
	}
	header.main-header.layout-logo-menu .header-contents .cart-dropdown {
		right: 20px;
	}
	header.main-header.layout-logo-menu .header-contents .mimoza-lang-switcher {
		right: 76px;
	}
}

.mimoza-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}
.mimoza-menu-toggle span,
.mimoza-menu-toggle span::before,
.mimoza-menu-toggle span::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--vamtam-h3-color, #364784);
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.mimoza-menu-toggle span {
	position: relative;
}
.mimoza-menu-toggle span::before,
.mimoza-menu-toggle span::after {
	content: '';
	position: absolute;
	left: 0;
}
.mimoza-menu-toggle span::before { top: -7px; }
.mimoza-menu-toggle span::after { top: 7px; }

body.mimoza-menu-open .mimoza-menu-toggle span { background-color: transparent; }
body.mimoza-menu-open .mimoza-menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.mimoza-menu-open .mimoza-menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* While the overlay is open, hide the header's own cart/hamburger so nothing
   duplicate-renders on top of the overlay's photo panel. */
body.mimoza-menu-open .fixed-header-box .cart-dropdown,
body.mimoza-menu-open .fixed-header-box .mimoza-menu-toggle {
	visibility: hidden;
}

/* Full-screen menu overlay - a solid background of its own (not just relying on
   the content panel's) plus a snappy transition, so there's never a moment where
   the page behind shows through the nav text while it's fading in/out. */
.mimoza-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	background: #F4F1BF;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s;
	overflow: hidden;
}
body.mimoza-menu-open {
	overflow: hidden;
}
body.mimoza-menu-open .mimoza-menu-overlay {
	opacity: 1;
	visibility: visible;
}

.mimoza-menu-overlay__photo {
	flex: 0 0 42%;
	background-size: cover;
	background-position: center;
	position: relative;
}
.mimoza-menu-overlay__social {
	position: absolute;
	left: 40px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	gap: 18px;
}
.mimoza-menu-overlay__social a {
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(20, 18, 10, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background-color 0.2s ease;
}
.mimoza-menu-overlay__social a:hover {
	background: rgba(20, 18, 10, 0.65);
}

.mimoza-menu-overlay__content {
	flex: 1 1 auto;
	background: var(--vamtam-sticky-header-bg-color, #F4F1BF);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px;
	position: relative;
	text-align: center;
}
.mimoza-menu-overlay__logo {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	max-height: 68px;
	width: auto;
}
.mimoza-menu-overlay__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mimoza-menu-overlay__nav ul li {
	margin: 0.25em 0;
}
.mimoza-menu-overlay__nav ul li a {
	font-family: 'Instrument Serif', serif;
	font-size: 56px;
	color: var(--vamtam-h3-color, #364784);
	text-decoration: none;
}
.mimoza-menu-overlay__nav ul li a:hover {
	opacity: 0.6;
}
.mimoza-menu-overlay__circle {
	margin-top: 40px;
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	position: relative;
	transition: transform 0.3s ease;
}
.mimoza-menu-overlay__circle:hover {
	transform: scale(1.06);
}
.mimoza-menu-overlay__circle-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 230px;
	height: 230px;
	transform: translate(-50%, -50%);
	opacity: 0.9;
	pointer-events: none;
	animation: mimoza-spin 26s linear infinite;
}
.mimoza-menu-overlay__circle span {
	position: relative;
	font-family: 'Work Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vamtam-h3-color, #364784);
	line-height: 1.4;
}
.mimoza-menu-overlay__columns {
	position: absolute;
	bottom: 40px;
	left: 60px;
	right: 60px;
	display: flex;
	justify-content: space-between;
}
.mimoza-menu-overlay__columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.mimoza-menu-overlay__columns ul:last-child {
	text-align: right;
}
.mimoza-menu-overlay__columns li {
	margin: 0.1em 0;
}
.mimoza-menu-overlay__columns a {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vamtam-h3-color, #364784);
	text-decoration: none;
	opacity: 0.7;
}
.mimoza-menu-overlay__columns a:hover {
	opacity: 1;
}
@media only screen and (max-width: 767px) {
	/* The close X sat on the same visual row as "MIMOZA" (same rough height,
	   just off to the side), which read as the logo being off-centre even
	   though it's mathematically centred - moving the X up clears that row so
	   the logo reads as plainly, unambiguously centred underneath it. */
	.mimoza-menu-overlay .mimoza-menu-close {
		top: 22px;
		right: 24px;
	}
	.mimoza-menu-overlay__logo {
		top: 66px;
	}
	/* "Our Story / FAQ / Contact Us" were two columns pinned to opposite edges
	   (space-between) - on a narrow phone that reads as off-balance rather than
	   intentional. A single centred, stacked list matches the rest of the menu. */
	.mimoza-menu-overlay__columns {
		position: static;
		margin-top: 32px;
		left: auto;
		right: auto;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	.mimoza-menu-overlay__columns ul,
	.mimoza-menu-overlay__columns ul:last-child {
		text-align: center;
	}
	/* The bottom links are now part of the normal centred stack rather than
	   pinned to the bottom edge, so a short phone screen needs to be able to
	   scroll the overlay itself to reach everything. */
	.mimoza-menu-overlay__content {
		overflow-y: auto;
		padding-top: 120px;
		padding-bottom: 32px;
	}
}

.mimoza-menu-overlay .mimoza-menu-close {
	position: absolute;
	top: 30px;
	right: 40px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	background: none;
	border: none;
	z-index: 2;
}
.mimoza-menu-overlay .mimoza-menu-close::before,
.mimoza-menu-overlay .mimoza-menu-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--vamtam-h3-color, #364784);
}
.mimoza-menu-overlay .mimoza-menu-close::before { transform: rotate(45deg); }
.mimoza-menu-overlay .mimoza-menu-close::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Every button on the site is a Mimoza flower, with its label written on it.
   --------------------------------------------------------------------------- */
.elementor-button,
.elementor-button-link.elementor-button {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 150px !important;
	height: 150px !important;
	min-width: 0;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	text-align: center;
	isolation: isolate;
}
.elementor-button::before {
	content: '';
	position: absolute;
	inset: -32%;
	z-index: -1;
	background: url('/wp-content/uploads/2026/09/logo-icographiqueicon.png') center / contain no-repeat;
	opacity: 0.8;
	animation: mimoza-flower-idle 3.4s ease-in-out infinite;
}
.elementor-button:hover::before {
	animation: none;
	transform: rotate(12deg) scale(1.06);
	opacity: 1;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.elementor-button::after,
.elementor-button .elementor-button-content-wrapper::before,
.elementor-button .elementor-button-content-wrapper::after,
.elementor-button .elementor-button-text::before,
.elementor-button .elementor-button-text::after,
.elementor-button .elementor-button-icon::before,
.elementor-button .elementor-button-icon::after {
	display: none !important; /* theme's decorative dash/arrow pseudo-elements */
	content: none !important;
}
.elementor-widget-button .elementor-button-wrapper::before,
.elementor-widget-button .elementor-button-wrapper::after {
	display: none !important;
	content: none !important;
}
.elementor-button .elementor-button-content-wrapper {
	justify-content: center;
	flex-direction: row;
	gap: 0;
}
.elementor-button .vamtam-prefix,
.elementor-button .elementor-button-icon,
.elementor-button .elementor-button-icon-qty {
	display: none !important;
}
.elementor-button .elementor-button-text {
	color: var(--vamtam-h3-color, #364784) !important;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 !important;
	white-space: normal;
	max-width: 100px;
	line-height: 1.25;
}

/* WooCommerce buttons (add to cart, cart, checkout...) get the same treatment. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	position: relative;
	isolation: isolate;
	min-width: 130px;
	min-height: 130px;
	padding: 0 18px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--vamtam-h3-color, #364784) !important;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before {
	content: '';
	position: absolute;
	inset: -32%;
	z-index: -1;
	background: url('/wp-content/uploads/2026/09/logo-icographiqueicon.png') center / contain no-repeat;
	opacity: 0.8;
	animation: mimoza-flower-idle 3.4s ease-in-out infinite;
}
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before {
	animation: none;
	transform: rotate(10deg) scale(1.05);
	opacity: 1;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

/* ---------------------------------------------------------------------------
   Home hero: full-bleed photo banner, tagline + flower button at the left.
   --------------------------------------------------------------------------- */
.elementor-element-b58e694 {
	overflow: hidden;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}
@media only screen and (max-width: 767px) {
	/* On a tall phone screen, cover+center crops a wide landscape shot down to a
	   narrow vertical slice - centered on the image's midpoint can land in an
	   awkward spot depending on the composition. Anchoring to the top keeps
	   faces/the main subject in frame instead of drifting into body/background. */
	.elementor-element-b58e694 {
		background-position: center top !important;
	}
	/* The text block is vertically centered in the full 100vh hero on desktop (it sits
	   next to the photo there, so mid-height reads fine) - on mobile the photo is the
	   full background behind the text, and centered text lands low enough to sit right
	   on top of the subject's face. Pin it near the top of the section instead. */
	.elementor-element-b58e694 > .elementor-container {
		align-items: flex-start !important;
	}
	.elementor-element-b58e694 .elementor-element-5027374 > .elementor-widget-wrap {
		padding-top: 8vh !important;
	}
}
/* Cream fade under the header (keeps the nav readable), plus a dark gradient behind the text
   block - the photo itself is a real candid shot with detail everywhere, so the text needs its
   own contrast rather than relying on a quiet patch of the image. */
.elementor-element-b58e694::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
		linear-gradient(180deg, rgba(20, 18, 10, 0.45) 0, rgba(20, 18, 10, 0) 220px),
		linear-gradient(100deg, rgba(10, 12, 24, 0.72) 0%, rgba(10, 12, 24, 0.5) 30%, rgba(10, 12, 24, 0.12) 58%, rgba(10, 12, 24, 0) 72%);
}
.elementor-element-b58e694 > .elementor-container {
	position: relative;
	z-index: 1;
	align-items: center !important;
}
.elementor-element-b58e694 .elementor-element-c4feebe .elementor-heading-title,
.elementor-element-b58e694 .elementor-element-deee045 .elementor-heading-title {
	color: #fff !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}
.elementor-element-b58e694 .elementor-element-bb55d74 .elementor-button-text {
	text-shadow: none;
}


@media only screen and (max-width: 899px) {
	header.main-header.layout-logo-menu .header-contents .first-row .logo-wrapper .logo img {
		max-height: 32px !important;
	}
	.mimoza-menu-overlay__photo {
		display: none;
	}
	.mimoza-menu-overlay__nav ul li a {
		font-size: 32px;
	}
	.mimoza-menu-overlay__columns {
		position: static;
		margin-top: 40px;
	}
}

/* Disabled flower buttons (e.g. "Add to cart" before a colour is chosen) stay readable. */
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.wc-variation-selection-needed {
	opacity: 0.7 !important;
}

/* ---------------------------------------------------------------------------
   Collections earrings: smaller, softer, more premium.
   --------------------------------------------------------------------------- */
.elementor-element-592e30e img {
	filter: drop-shadow(0 22px 24px rgba(54, 71, 132, 0.16));
	animation: mimoza-float 6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   Footer: illustrated mimosa background, About / Store / Care + socials on top.
   --------------------------------------------------------------------------- */
.footer-wrapper {
	overflow: hidden;
}
.main-footer {
	position: relative;
	min-height: 58.6vw;
	background: url('/wp-content/uploads/2026/09/mimoza-footer-bg.png') center bottom / 100% auto no-repeat;
}
.main-footer .elementor-section {
	background: transparent !important;
}
.main-footer .elementor-element-fa86cf9 {
	padding-top: 21vw !important;
}
.main-footer .elementor-element-fa86cf9 > .elementor-container {
	max-width: 36vw !important;
	margin: 0 auto;
}
.main-footer .elementor-element-fa86cf9 .elementor-heading-title {
	color: var(--vamtam-h3-color, #364784);
	margin-bottom: 10px;
}
ul.mimoza-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
ul.mimoza-footer-menu li {
	margin: 0 0 6px;
}
ul.mimoza-footer-menu a {
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--vamtam-h3-color, #364784);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
ul.mimoza-footer-menu a:hover {
	opacity: 1;
	text-decoration: underline;
}
.main-footer .elementor-element-c93062f {
	padding-top: 24px;
}
.main-footer .elementor-element-c93062f .elementor-social-icons-wrapper {
	text-align: center;
}
.main-footer .elementor-element-ed295cd {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
}
.main-footer .elementor-element-ed295cd,
.main-footer .elementor-element-ed295cd p {
	color: var(--vamtam-h3-color, #364784);
	font-size: 12px;
}

@media only screen and (max-width: 900px) {
	.main-footer {
		/* The flower/"MIMOZA" artwork is one background image, bottom-anchored and
		   scaled to the container's own height - so the logo's position is always a
		   fixed proportion of that height. The text content above it has a roughly
		   fixed pixel height (font-size isn't in vw), so a short min-height lets the
		   3rd "Care" link (About/Store/Care can each wrap to 2-3 lines on a narrow
		   phone) run into the logo. Tall enough headroom keeps them apart at any
		   mobile width.
		*/
		min-height: 230vw;
		background-size: auto 100%;
	}
	.main-footer .elementor-element-fa86cf9 {
		/* Recalibrated after raising .main-footer's min-height above (which shifts
		   the wave artwork's position too, since it's scaled to the container).
		   46vw landed the "About"/"Store" headings about 25px above where the
		   wave artwork actually turns yellow, sitting them on the cream backdrop
		   instead of on the yellow - pushed down further so they clear it with a
		   comfortable margin. There's plenty of slack before the social icons and
		   the "MIMOZA" logo lower down to absorb this. */
		padding-top: 58vw !important;
	}
	.main-footer .elementor-element-fa86cf9 > .elementor-container {
		max-width: 92vw !important;
	}
}

/* ---------------------------------------------------------------------------
   Product cards: bigger title, bolder price, short sales line + call to action.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	color: var(--vamtam-h3-color, #364784) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi {
	font-family: 'Instrument Serif', serif !important;
	font-style: italic;
	font-size: 25px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	color: var(--vamtam-h3-color, #364784) !important;
}
.mimoza-loop-desc {
	display: block;
	clear: both;
	padding-top: 12px;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 19px;
	line-height: 1.3;
	color: var(--vamtam-h3-color, #364784);
	opacity: 0.85;
}
.mimoza-loop-cta {
	display: block;
	width: fit-content;
	margin-top: 12px;
	padding-bottom: 2px;
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vamtam-h3-color, #364784);
	border-bottom: 1px solid currentColor;
	text-decoration: none;
	transition: letter-spacing 0.25s ease;
}
.woocommerce ul.products li.product:hover .mimoza-loop-cta {
	letter-spacing: 0.14em;
}

/* Bloom section: right padding keeps equal empty space left/right of the content; the pale box still reaches the page edge. */
@media only screen and (min-width: 1025px) {
	.elementor-element-03f7e53 > .elementor-container > .elementor-element-20beb66 {
		box-shadow: 152px 0 0 #E9F4F8;
	}
}

/* Hero banner: a real full-bleed photo (not a pre-composed graphic), so it's handled like any
   ordinary hero - cover the whole viewport, and put a dark gradient behind the text instead of
   assuming the photo itself has a quiet area to sit the text on. */
.elementor-element-b58e694 {
	min-height: 100vh;
}
.elementor-element-b58e694 > .elementor-container {
	min-height: 100vh;
	max-width: none !important;
	width: 100%;
	padding: 90px 0 60px;
}
@media only screen and (min-width: 900px) {
	.elementor-element-b58e694 .elementor-element-5027374 {
		width: 48% !important;
		max-width: 560px;
	}
	.elementor-element-b58e694 .elementor-element-5027374 > .elementor-widget-wrap {
		padding: 0 0 0 6vw !important;
		text-align: left;
		align-items: flex-start !important;
	}
	.elementor-element-b58e694 .elementor-element-c4feebe .elementor-heading-title,
	.elementor-element-b58e694 .elementor-element-5027374 .elementor-heading-title {
		text-align: left !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		transform: none !important;
	}
	.elementor-element-b58e694 .elementor-element-bb55d74 .elementor-button-wrapper {
		display: flex;
		justify-content: flex-start;
	}
}

/* Main menu: the current page is not highlighted (same navy as the other items) and there is no hover dropdown. */
#main-menu .menu > li > a,
#main-menu .menu > li.current-menu-item > a,
#main-menu .menu > li > a:hover,
#main-menu .menu > li > a span {
	color: #364784 !important;
}
#main-menu .menu > li > a::before,
#main-menu .menu > li > a::after,
#main-menu .menu > li > a span::before,
#main-menu .menu > li > a span::after,
#main-menu .menu > li::before,
#main-menu .menu > li::after {
	background-color: #364784 !important;
	border-color: #364784 !important;
}
#main-menu .sub-menu-wrapper,
#main-menu .sub-menu {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Single product page: big picture + scrollable thumbnails on the left,
   category / name / colour / price / quantity + add to cart / accordions on the right.
   --------------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	column-gap: 72px;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 150px 40px 0;
}
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > section {
	grid-column: 1 / -1;
}
.single-product div.product > .summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.single-product div.product > .mimoza-gallery {
	grid-column: 1;
	min-width: 0;
}
.mimoza-gallery__main {
	background: #fff;
	overflow: hidden;
}
.mimoza-gallery__main img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.mimoza-gallery__thumbs {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: #364784 transparent;
}
.mimoza-gallery__thumb {
	flex: 0 0 104px;
	width: 104px;
	height: 104px;
	padding: 0;
	background: #fff;
	border: 2px solid transparent !important;
	border-radius: 0 !important;
	cursor: pointer;
	opacity: 0.65;
	scroll-snap-align: start;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.mimoza-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mimoza-gallery__thumb:hover,
.mimoza-gallery__thumb.is-active {
	opacity: 1;
}
.mimoza-gallery__thumb.is-active {
	border-color: #364784 !important;
}

.single-product .summary form.variations_form,
.single-product .summary form.cart {
	display: contents;
}
.single-product .summary .mimoza-eyebrow {
	order: 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #364784;
	border-bottom: 1px solid #364784;
	padding-bottom: 2px;
	margin-bottom: 18px;
	text-decoration: none;
}
.single-product .summary .product_title {
	order: 1;
	margin: 0 0 14px;
	font-size: 64px;
	line-height: 1;
	color: #364784;
}
.single-product .summary .mimoza-swatches {
	order: 2;
	margin-bottom: 18px;
}
.mimoza-swatches__label {
	display: block;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #364784;
	margin-bottom: 10px;
}
.mimoza-swatches__row {
	display: flex;
	gap: 12px;
}
.mimoza-swatch {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50% !important;
	background: var(--swatch) !important;
	border: 2px solid #FAF8E9 !important;
	box-shadow: 0 0 0 1px rgba(54, 71, 132, 0.35) !important;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mimoza-swatch:hover {
	transform: scale(1.08);
}
.mimoza-swatch.is-active {
	box-shadow: 0 0 0 2px #364784 !important;
}
.single-product .summary table.variations {
	display: none !important;
}
.single-product .summary .price {
	order: 3;
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 500;
	color: #364784;
}
.single-product .summary .single_variation_wrap {
	order: 5;
	width: 100%;
}
.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 6px 0 26px;
}
.single-product .summary .woocommerce-variation-price,
.single-product .summary .woocommerce-variation-description {
	display: none;
}
.single-product .summary .single_add_to_cart_button.button {
	min-width: 150px !important;
	min-height: 150px !important;
	font-size: 13px !important;
}
.single-product .summary .mimoza-accordions {
	order: 6;
	width: 100%;
}
.mimoza-accordion {
	border-top: 1px solid rgba(54, 71, 132, 0.2);
}
.mimoza-accordion:last-child {
	border-bottom: 1px solid rgba(54, 71, 132, 0.2);
}
.mimoza-accordion summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #364784;
}
.mimoza-accordion summary::-webkit-details-marker {
	display: none;
}
.mimoza-accordion summary::after {
	content: '+';
	font-size: 20px;
	font-weight: 400;
}
.mimoza-accordion[open] summary::after {
	content: '\2013';
}
.mimoza-accordion__body {
	padding: 0 0 22px;
	color: #364784;
	font-size: 16px;
	line-height: 1.65;
}
.mimoza-accordion__body p {
	margin: 0 0 14px;
}
.mimoza-accordion__body ul {
	margin: 0;
	padding-left: 18px;
}

/* ---------------------------------------------------------------------------
   FAQ page: same accordion as the product page, with bigger, friendlier
   questions (actual sentences read oddly in tiny uppercase tracked-out labels).
   --------------------------------------------------------------------------- */
.mimoza-faq {
	max-width: 760px;
	margin: 0 auto;
	padding: 100px 20px 120px;
}
.mimoza-faq__intro {
	text-align: center;
	margin-bottom: 56px;
}
.mimoza-faq__intro h1 {
	margin: 0 0 14px;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: normal;
	font-size: 56px;
	color: #364784;
}
.mimoza-faq__intro p {
	margin: 0;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 19px;
	color: #364784;
	opacity: 0.75;
}
.mimoza-faq .mimoza-accordion summary {
	font-family: 'Instrument Serif', serif;
	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	gap: 24px;
}
.mimoza-faq .mimoza-accordion summary::after {
	flex: 0 0 auto;
}
.mimoza-faq .mimoza-accordion__body {
	font-family: 'Work Sans', sans-serif;
}
@media only screen and (max-width: 600px) {
	.mimoza-faq__intro h1 {
		font-size: 40px;
	}
	.mimoza-faq .mimoza-accordion summary {
		font-size: 18px;
	}
}
@media only screen and (max-width: 899px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		padding: 110px 20px 0;
	}
	.single-product div.product > .summary {
		margin-top: 28px !important;
	}
	.single-product .summary .product_title {
		font-size: 46px;
	}
}
.single-product .summary .single_add_to_cart_button.button {
	width: 170px !important;
	height: 170px !important;
	min-width: 170px !important;
	min-height: 170px !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	overflow: visible !important;
}
.single-product .summary .single_add_to_cart_button.button::before {
	inset: -16% !important;
	opacity: 0.9 !important;
}
.single-product .summary .woocommerce-variation {
	margin: 0 !important;
	min-height: 0 !important;
}
.single-product .summary .product_title {
	font-size: 76px;
}
.single-product div.product {
	padding-top: 40px;
}
/* ---------------------------------------------------------------------------
   Shop page: centred title -> banner -> products.
   --------------------------------------------------------------------------- */
body.post-type-archive-product #sub-header,
body.tax-product_cat #sub-header {
	display: none;
}
body.post-type-archive-product .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header {
	display: none;
}
.mimoza-shop-head {
	text-align: center;
	padding-top: 130px;
	margin-bottom: 56px;
}
.mimoza-shop-title {
	margin: 0 0 36px;
	font-size: 84px;
	line-height: 1;
	color: #364784;
	text-align: center;
}
.mimoza-shop-banner {
	max-width: 860px;
	margin: 0 auto;
}
.mimoza-shop-banner img {
	display: block;
	width: 100%;
	height: auto;
}
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px 48px;
	margin: 0 auto !important;
	padding: 0;
}
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
	float: none !important;
	width: 300px !important;
	max-width: 100%;
	margin: 0 !important;
	clear: none !important;
}
@media only screen and (max-width: 680px) {
	/* flex-wrap centers each row as a group, and with only one 300px card per row
	   here (any pair would be wider than the screen), its gap math came out
	   inconsistent card to card - each one a bit further left than the last.
	   Switching to plain block layout with auto margins sidesteps that entirely. */
	body.post-type-archive-product ul.products,
	body.tax-product_cat ul.products {
		display: block !important;
	}
	body.post-type-archive-product ul.products li.product,
	body.tax-product_cat ul.products li.product {
		margin: 0 auto 56px !important;
	}
	body.post-type-archive-product ul.products li.product:last-child,
	body.tax-product_cat ul.products li.product:last-child {
		margin-bottom: 0 !important;
	}
}

/* Product page: quantity and flower button sit side by side, vertically centred. */
.single-product .summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	margin: 0 0 26px;
}
.single-product .summary .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
	margin: 0 !important;
	float: none !important;
}
.single-product .summary .single_add_to_cart_button.button {
	margin: 0 0 0 -8px !important;
	float: none !important;
}

/* Top bar: always visible while scrolling (no hide/show jumping), soft cream glass once it is stuck to the top. */
.vamtam-sticky-header.vamtam-sticky-header--fixed-hidden,
.vamtam-sticky-header.vamtam-sticky-header--fixed-shown {
	transform: translateY(0) !important;
}
.fixed-header-box.vamtam-sticky-header.vamtam-sticky-header--fixed-shown,
.fixed-header-box.vamtam-sticky-header.vamtam-sticky-header--fixed-hidden {
	background-color: rgba(250, 248, 233, 0.9) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Shop banner: horizontal/landscape photo centred on a yellow rectangle; less space above the title. */
.mimoza-shop-head {
	padding-top: 10px !important;
}
.mimoza-shop-title {
	margin-bottom: 40px !important;
}
.mimoza-shop-banner {
	position: relative;
	max-width: 1140px !important;
	width: 100%;
	height: 540px;
	margin: 0 auto;
}
.mimoza-shop-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #EFCD58;
}
.mimoza-shop-banner img:not(.mimoza-shop-banner__flower):not(.mimoza-loop-cycle-overlay) {
	position: absolute;
	inset: 0 auto auto 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 900px;
	max-width: 100%;
	height: 540px;
	object-fit: cover;
}
.mimoza-shop-banner .mimoza-loop-cycle-overlay {
	inset: 0 auto auto 50% !important;
	transform: translateX(-50%);
	width: 900px;
	max-width: 100%;
	height: 540px;
}
.mimoza-shop-banner img.mimoza-shop-banner__flower {
	position: absolute !important;
	top: 50%;
	z-index: 2;
	width: 190px !important;
	height: auto;
	transform: translateY(-50%);
	opacity: 0.95;
	pointer-events: none;
	animation: mimoza-float-center 5s ease-in-out infinite;
}
.mimoza-shop-banner__flower--left {
	left: 3%;
}
.mimoza-shop-banner__flower--right {
	right: 3%;
	animation-delay: 1.4s;
}
@media only screen and (max-width: 1024px) {
	.mimoza-shop-banner img.mimoza-shop-banner__flower {
		display: none !important;
	}
}

/* Custom cursor: turns blue over the yellow footer so it stays visible. */
body.mimoza-cursor-blue #mouseDot {
	background-color: #364784 !important;
}
body.mimoza-cursor-blue #mouseCircle {
	border-color: #364784 !important;
}

/* ---------------------------------------------------------------------------
   Cart & checkout: tighter under the steps, colour dots, flower checkout button.
   --------------------------------------------------------------------------- */
body.woocommerce-cart #sub-header .meta-header-inside,
body.woocommerce-checkout #sub-header .meta-header-inside {
	padding-top: 60px;
	padding-bottom: 10px;
}
body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content {
	padding-top: 10px;
}
.mimoza-color-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: -3px;
	background: #ccc;
	box-shadow: 0 0 0 1px rgba(54, 71, 132, 0.35);
}
.mimoza-color-dot--chocolate { background: #6B3A33; }
.mimoza-color-dot--green { background: #5E9E4E; }
.mimoza-color-dot--pacific-blue { background: #2F62C9; }
.mimoza-color-dot--raspberry { background: #C2237F; }

.woocommerce-cart .vamtam-cart__header .label,
.woocommerce-cart .vamtam-cart__header .item-count,
.woocommerce-cart .cart_totals h4 {
	font-family: 'Instrument Serif', serif;
	font-size: 36px;
	font-style: normal;
	color: #364784;
}
.woocommerce-cart .vamtam-cart__product {
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid rgba(54, 71, 132, 0.18);
}
.woocommerce-cart .vamtam-cart__product-image img {
	width: 130px;
	height: 130px;
	object-fit: cover;
}
.woocommerce-cart .vamtam-cart__product-name,
.woocommerce-cart .vamtam-cart__product-name a {
	font-family: 'Instrument Serif', serif;
	font-size: 30px;
	line-height: 1.1;
	color: #364784;
	text-decoration: none;
}
.woocommerce-cart .vamtam-cart__product-name dl.variation {
	margin: 10px 0 0;
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	color: #364784;
}
.woocommerce-cart .vamtam-cart__product-name dl.variation dt,
.woocommerce-cart .vamtam-cart__product-name dl.variation dd,
.woocommerce-cart .vamtam-cart__product-name dl.variation dd p {
	display: inline;
	margin: 0;
}
.woocommerce-cart .vamtam-cart__product-name dl.variation dt {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	margin-right: 6px;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td bdi {
	color: #364784 !important;
}
.woocommerce-cart .cart_totals .order-total td .amount {
	font-size: 22px;
	font-weight: 500;
}
.woocommerce-cart .wc-proceed-to-checkout {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	min-width: 190px !important;
	min-height: 190px !important;
	width: 190px !important;
	height: 190px !important;
	padding: 0 !important;
	margin: 0 auto !important;
	background: transparent !important;
	color: #364784 !important;
	font-size: 14px !important;
	line-height: 1.25;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before,
.woocommerce-checkout #place_order::before {
	inset: -16% !important;
	opacity: 0.9 !important;
}
.woocommerce-message,
.woocommerce-info {
	border: 1px solid rgba(54, 71, 132, 0.35) !important;
	border-radius: 0 !important;
	background: #FAF8E9 !important;
	color: #364784 !important;
	padding: 14px 20px !important;
	min-height: 0 !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.woocommerce-message .button,
.woocommerce-info .button {
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	order: 2;
}
.woocommerce-message .button::before,
.woocommerce-info .button::before {
	display: none;
}

/* The theme paints its main buttons solid black - our flower artwork replaces that everywhere. */
.woocommerce.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout .checkout-button,
.woocommerce.woocommerce-cart .vamtam-cart-collaterals .coupon button[name=apply_coupon],
.woocommerce.woocommerce-checkout .checkout_coupon .button[name=apply_coupon],
.woocommerce #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #364784 !important;
}
.woocommerce.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout .checkout-button .vamtam-prefix,
.woocommerce #place_order .vamtam-prefix,
.woocommerce.woocommerce-cart .vamtam-cart-collaterals .coupon button .vamtam-prefix {
	display: none !important;
}
.woocommerce.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout .checkout-button::after,
.woocommerce #place_order::after {
	display: none !important;
}

html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button.button.alt,
html body.woocommerce-checkout #payment #place_order.button.alt,
html body.woocommerce-cart .vamtam-cart-collaterals .coupon button[name=apply_coupon],
html body.woocommerce-checkout .checkout_coupon .button[name=apply_coupon] {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #364784 !important;
}

html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button.button.alt,
html body.woocommerce-checkout #payment #place_order.button.alt {
	position: relative !important;
	isolation: isolate !important;
	z-index: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button.button.alt::before,
html body.woocommerce-checkout #payment #place_order.button.alt::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	inset: -16% !important;
	z-index: -1 !important;
	background: url('/wp-content/uploads/2026/09/logo-icographiqueicon.png') center / contain no-repeat !important;
	opacity: 0.9 !important;
	width: auto !important;
	height: auto !important;
}

html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button.button.alt,
html body.woocommerce-checkout #payment #place_order.button.alt {
	padding: 0 46px !important;
	white-space: normal !important;
	text-align: center !important;
	line-height: 1.25 !important;
}
@media only screen and (max-width: 767px) {
	/* #place_order is inline-flex, so its own margin:auto doesn't self-centre it -
	   it only did on desktop because the row around it happened to centre things
	   a different way. Centring the row directly works regardless of width. */
	html body.woocommerce-checkout .form-row.place-order {
		text-align: center;
	}
}
html body .woocommerce-message,
html body .woocommerce-info {
	border: 1px solid rgba(54, 71, 132, 0.35) !important;
}
@media only screen and (max-width: 767px) {
	/* On mobile this becomes a fixed bar pinned to the bottom of the screen - its
	   cream-on-cream colouring blended straight into the page, and "View cart"
	   could break mid-word in the tight space. Stronger contrast + no mid-word
	   wrap makes it register as the confirmation it's meant to be. */
	html body .woocommerce-message,
	html body .woocommerce-info {
		background: #364784 !important;
		color: #fff !important;
		border: none !important;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
		font-size: 15px;
		line-height: 1.4;
	}
	html body .woocommerce-message .vamtam-wc-msg,
	html body .woocommerce-info .vamtam-wc-msg {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 10px;
	}
	html body .woocommerce-message a.button,
	html body .woocommerce-info a.button {
		color: #fff !important;
		font-weight: 700;
		text-decoration: underline;
		white-space: nowrap;
	}
	html body .woocommerce-message .vamtam-close-notice-btn,
	html body .woocommerce-info .vamtam-close-notice-btn {
		filter: invert(1) brightness(2);
	}
}

/* Our Story page: "coming soon" placeholder inside the category tabs (Bracelets / Rings / Necklaces). */
.mimoza-coming-soon {
	padding: 60px 20px;
	text-align: center;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 26px;
	color: #364784;
	opacity: 0.6;
}

/* Our Story: "read more" toggle for the origin story, and a bold lead-in on the closing "Choose yourself." line. */
.mimoza-readmore__details {
	margin-top: 10px;
}
.mimoza-readmore__details summary {
	list-style: none;
	cursor: pointer;
	display: inline-block;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #364784;
	border-bottom: 1px solid #364784;
	padding-bottom: 2px;
}
.mimoza-readmore__details summary::-webkit-details-marker {
	display: none;
}
.mimoza-readmore__details:not([open]) summary .is-open,
.mimoza-readmore__details[open] summary .is-closed {
	display: none;
}
.mimoza-readmore__body {
	margin-top: 18px;
}
.mimoza-choose-headline {
	font-weight: 700;
	font-size: 1.25em;
}

/* ---------------------------------------------------------------------------
   More life across the site: idle motion on the flower artwork, a hover zoom
   on product photos, and a fade/slide-up reveal on scroll for the areas
   (shop grid, cart, product gallery...) that are plain WooCommerce/theme
   markup and never got one of Elementor's own entrance animations.
   --------------------------------------------------------------------------- */
@keyframes mimoza-flower-idle {
	0%, 100% { transform: rotate(0deg) scale(1); }
	50% { transform: rotate(3deg) scale(1.035); }
}
@keyframes mimoza-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@keyframes mimoza-float-center {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(calc(-50% - 10px)); }
}
@keyframes mimoza-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	overflow: hidden;
	position: relative;
}
.mimoza-loop-cycle-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.5s cubic-bezier(.45, 0, .2, 1), transform 1.5s cubic-bezier(.45, 0, .2, 1);
	transform: scale(1.015);
}
.mimoza-loop-cycle-overlay.is-visible {
	opacity: 1;
	transform: scale(1);
}
/* Same crossfade idea as .mimoza-loop-cycle-overlay above, but for elements whose photo is a
   CSS background-image (the hamburger-overlay photo) rather than an <img> tag. */
.mimoza-bg-cycle-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.1s cubic-bezier(.45, 0, .2, 1);
}
.mimoza-bg-cycle-overlay.is-visible {
	opacity: 1;
}
/* On the hero, the crossfade must stay under the gradient/::before (z-index:0) and the text
   container (z-index:1), replacing only the base CSS background-image behind them. */
.elementor-element-b58e694 > .mimoza-bg-cycle-overlay {
	z-index: -1;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
	transition: transform 0.6s ease, opacity 0.4s ease;
}
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img {
	transform: scale(1.06);
}
.mimoza-gallery__main {
	overflow: hidden;
}
.mimoza-gallery__main-img {
	transition: transform 0.6s ease, opacity 0.25s ease;
}
.mimoza-gallery:hover .mimoza-gallery__main-img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button::before,
	.woocommerce a.button::before,
	.woocommerce button.button::before,
	.woocommerce input.button::before,
	.elementor-element-592e30e img,
	.mimoza-menu-overlay__circle-bg,
	.mimoza-shop-banner__flower {
		animation: none !important;
	}
}

.mimoza-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.mimoza-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.mimoza-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   "Collections" mega menu: category list / selected category / photo.
   --------------------------------------------------------------------------- */
.mimoza-collections-menu {
	position: fixed;
	inset: 0;
	z-index: 998;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	overflow: hidden;
}
body.mimoza-collections-open {
	overflow: hidden;
}
body.mimoza-collections-open .mimoza-collections-menu {
	opacity: 1;
	visibility: visible;
}
body.mimoza-collections-open .fixed-header-box .cart-dropdown,
body.mimoza-collections-open .fixed-header-box .mimoza-menu-toggle {
	visibility: hidden;
}

.mimoza-collections-menu__close {
	position: absolute;
	top: 30px;
	right: 40px;
	z-index: 2;
	width: 26px;
	height: 26px;
	cursor: pointer;
	background: none;
	border: none;
}
.mimoza-collections-menu__close::before,
.mimoza-collections-menu__close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}
.mimoza-collections-menu__close::before { transform: rotate(45deg); }
.mimoza-collections-menu__close::after { transform: rotate(-45deg); }

.mimoza-collections-menu__list {
	flex: 0 0 26%;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding: 0 60px;
}
.mimoza-collections-menu__cat {
	position: relative;
	align-self: flex-start;
	padding: 0 0 0 26px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: 'Instrument Serif', serif;
	font-size: 40px;
	line-height: 1.2;
	color: rgba(54, 71, 132, 0.35);
	transition: color 0.25s ease;
}
.mimoza-collections-menu__cat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: transparent;
	transition: background 0.25s ease;
}
.mimoza-collections-menu__cat:hover {
	color: rgba(54, 71, 132, 0.65);
}
.mimoza-collections-menu__cat.is-active {
	color: #364784;
}
.mimoza-collections-menu__cat.is-active::before {
	background: #EFCD58;
}

.mimoza-collections-menu__content {
	flex: 0 0 32%;
	background: #FAF8E9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
}
.mimoza-collections-menu__available img {
	max-width: 220px;
	height: auto;
	margin: 0 auto 28px;
	display: block;
}
.mimoza-collections-menu__eyebrow {
	display: block;
	margin-bottom: 18px;
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #364784;
	opacity: 0.55;
}
.mimoza-collections-menu__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 0 0 20px;
	color: #364784;
}
.mimoza-collections-menu__price-label {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 20px;
	opacity: 0.6;
}
.mimoza-collections-menu__price-amount {
	font-family: 'Instrument Serif', serif;
	font-size: 56px;
	line-height: 1;
}
.mimoza-collections-menu__swatches {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
}
.mimoza-collections-menu__swatches span {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--c, #ccc);
	box-shadow: 0 0 0 3px #FAF8E9, 0 0 0 4px rgba(54, 71, 132, 0.18);
}
.mimoza-collections-menu__tagline {
	max-width: 260px;
	margin: 0 auto 36px;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.4;
	color: #364784;
	opacity: 0.8;
}
.mimoza-collections-menu__cta {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	padding: 0;
	text-align: center;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #364784;
	text-decoration: none;
	white-space: normal;
	line-height: 1.35;
}
.mimoza-collections-menu__cta-text {
	display: block;
	max-width: 78px;
	margin: 0 auto;
}
.mimoza-collections-menu__cta::before {
	content: '';
	position: absolute;
	inset: -16%;
	z-index: -1;
	background: url('/wp-content/uploads/2026/09/logo-icographiqueicon.png') center / contain no-repeat;
	opacity: 0.8;
	animation: mimoza-flower-idle 3.4s ease-in-out infinite;
}
.mimoza-collections-menu__cta:hover::before {
	animation: none;
	transform: rotate(10deg) scale(1.05);
	opacity: 1;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.mimoza-collections-menu__cta-dash {
	display: none;
}
.mimoza-collections-menu__soon {
	display: none;
}
.mimoza-collections-menu__soon img {
	width: 90px;
	height: auto;
	margin: 0 auto 18px;
	opacity: 0.8;
	animation: mimoza-float 5s ease-in-out infinite;
}
.mimoza-collections-menu__soon p {
	margin: 0;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 22px;
	color: #364784;
}

.mimoza-collections-menu__photo {
	flex: 1 1 auto;
	background-size: cover;
	background-position: center;
	background-color: #F4F1BF;
	position: relative;
}
.mimoza-collections-menu__social {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	gap: 18px;
}
.mimoza-collections-menu__social a {
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(20, 18, 10, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background-color 0.2s ease;
}
.mimoza-collections-menu__social a:hover {
	background: rgba(20, 18, 10, 0.65);
}

@media only screen and (max-width: 1024px) {
	.mimoza-collections-menu {
		flex-direction: column;
		overflow-y: auto;
	}
	.mimoza-collections-menu__photo {
		display: none;
	}
	.mimoza-collections-menu__list {
		flex: 0 0 auto;
		padding: 110px 40px 20px;
		gap: 14px;
	}
	.mimoza-collections-menu__cat {
		font-size: 30px;
	}
	.mimoza-collections-menu__content {
		flex: 1 1 auto;
		padding: 30px 40px 60px;
	}
}

/* Empty cart: the bag icon above "Your cart is currently empty." is now our brand yellow. */
.woocommerce .vamtam-empty-cart svg {
	fill: #EFCD58 !important;
}

/* Scrolling past the top/bottom of the page (mouse-wheel or trackpad "bounce") must never
   reveal the browser's own white canvas - the page should just stop at the edge.
   Important: this goes on html ONLY, not body - overscroll-behavior on BOTH at once is
   another case of the same html/body footgun as the overflow-x fix above. html is the
   element that actually owns the page scroll (document.scrollingElement), but Chrome's
   scroll-chaining logic still treats body as part of the chain it walks up through before
   reaching html - having overscroll-behavior-y:none on body too made Chrome stop the chain
   right there and swallow every mouse-wheel scroll on the whole site before it ever reached
   html, even though no script was calling preventDefault(). */
html {
	background-color: #FAF8E9 !important;
	overscroll-behavior-y: none;
}

/* On some pages (checkout in particular) the theme's own JS measures the header's height
   as ~20px instead of its real height, then applies that as a negative margin-bottom to
   "prevent a scroll jump" - while the header is still in normal flow (not yet fixed), this
   collapses its own space and the page content overlaps up into it, cropping the header.
   The negative margin only ever makes sense once the header is actually position:fixed. */
.vamtam-sticky-header:not([class*="--fixed-shown"]):not([class*="--fixed-hidden"]) {
	margin-bottom: 0 !important;
}

/* Checkout (with items in the cart) hides the nav menu row for a "distraction-free" checkout -
   since the logo/cart/hamburger are all position:absolute (for centering), with the menu row
   gone nothing is left in normal flow to give the header any height, so it collapses to almost
   nothing and the logo (centered on that collapsed box) ends up half above the top of the page. */
.header-contents {
	min-height: 74px;
}

/* The theme hides the menu/cart on checkout ("distraction-free checkout") once the cart has
   items - the client wants the exact same header everywhere, so that behaviour is reverted. */
body.woocommerce-checkout header.main-header .second-row {
	display: block !important;
}
body.woocommerce-checkout header.main-header .cart-dropdown {
	display: flex !important;
}
body.woocommerce-checkout header.main-header .header-contents {
	display: flex !important;
	text-align: left !important;
}
body.woocommerce-checkout header.main-header .first-row {
	display: flex !important;
	padding: 0 !important;
}

/* Decorative drifting flowers (hero, shop banner) - see mimoza-header.js. */
.mimoza-drift-petal {
	position: absolute;
	z-index: 1;
	height: auto;
	opacity: 0.28;
	pointer-events: none;
	animation-name: mimoza-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes mimoza-drift {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(14px, -18px) rotate(14deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	.mimoza-drift-petal { animation: none; }
}
@media only screen and (max-width: 899px) {
	.mimoza-drift-petal { display: none; }
}
