/*
 * Floomi widgets — structural CSS only.
 *
 * Colours, typography, spacing and sizing are driven by Elementor controls (which emit
 * their own scoped CSS). What lives here is the layout scaffolding those controls need:
 * grid/flex structure, aspect ratios, overlay positioning, transitions and the
 * responsive behaviour that cannot be expressed as a single Elementor selector.
 *
 * Logical properties are used throughout so RTL works without a mirrored stylesheet.
 */

/* ------------------------------------------------------------------ shared */

.floomi-section-heading__label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8125rem;
	margin-block-end: 0.75rem;
}

.floomi-section-heading__title {
	margin: 0;
}

.floomi-section-heading__description {
	margin-block-start: 0.75rem;
}

.floomi-section-heading__description > :last-child {
	margin-block-end: 0;
}

.floomi-empty-state,
.floomi-editor-notice {
	margin: 0;
	padding: 1.25rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.03);
	border: 1px dashed rgba(0, 0, 0, 0.15);
}

.floomi-grid,
.floomi-cats,
.floomi-collection,
.floomi-benefits,
.floomi-collage__grid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------ product card */
/*
 * Scoped to .floomi-card / .floomi-products only. Nothing here targets bare WooCommerce
 * classes, so other product grids and sliders on the site are untouched.
 */

.floomi-products {
	position: relative;
	--floomi-per-view: 4;
	--floomi-gap: 30px;
}

/* ---- carousel ---- */

.floomi-products__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/* Room for the focus ring without introducing a vertical scrollbar. */
	padding-block: 4px;
}

.floomi-products__viewport::-webkit-scrollbar {
	display: none;
}

.floomi-products__viewport:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 4px;
}

.floomi-products__track {
	display: flex;
	/*
	 * max-content, so the track grows to the sum of its items instead of shrinking to the
	 * viewport width. Without it the flex row was capped at the viewport, the items were
	 * squeezed to fit, and there was no overflow to scroll — the root cause of the
	 * carousels "not working" in every direction.
	 */
	inline-size: max-content;
	max-inline-size: none;
	gap: var(--floomi-gap);
	align-items: stretch;
}

.floomi-products__item {
	flex: 0 0 calc(
		(100% - (var(--floomi-per-view) - 1) * var(--floomi-gap)) / var(--floomi-per-view)
	);
	min-inline-size: 0;
	scroll-snap-align: start;
	display: flex;
}

.floomi-products__item > .floomi-card {
	inline-size: 100%;
}

.floomi-products__arrow {
	position: absolute;
	inset-block-start: 38%;
	transform: translateY(-50%);
	z-index: 5;
	inline-size: 50px;
	block-size: 50px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px dashed #3d2f2b;
	border-radius: 50%;
	background: #fff;
	color: #3d2f2b;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.floomi-products__arrow:hover {
	background: #3d2f2b;
	color: #fff;
}

.floomi-products__arrow:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 3px;
}

.floomi-products__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Just outside the cards, still inside the section. */
.floomi-products__arrow--prev { inset-inline-start: -62px; }
.floomi-products__arrow--next { inset-inline-end: -62px; }

/*
 * Physical borders, not logical ones. `border-inline-start` flips in RTL, and the RTL
 * rules below flip the rotation as well - the two cancelled out and the chevrons ended up
 * pointing up and down instead of left and right. Keeping the glyph shape fixed and
 * rotating it per direction is the only combination that behaves in both.
 */
.floomi-products__arrow > span {
	inline-size: 9px;
	block-size: 9px;
	border-left: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
}

.floomi-products__arrow--prev > span { transform: rotate(-45deg); margin-inline-start: 3px; }
.floomi-products__arrow--next > span { transform: rotate(135deg); margin-inline-end: 3px; }

[dir="rtl"] .floomi-products__arrow--prev > span { transform: rotate(135deg); }
[dir="rtl"] .floomi-products__arrow--next > span { transform: rotate(-45deg); }

/* ---- card ---- */

.floomi-card {
	display: flex;
	flex-direction: column;
	position: relative;
	min-inline-size: 0;
}

.floomi-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #f6efe9;
	border-radius: 9px;
}

.floomi-card__link {
	display: block;
	block-size: 100%;
}

/*
 * contain, not cover: these are product shots on a plain backdrop, so cropping would
 * cut stems off. The grey panel fills whatever the image does not cover.
 */
.floomi-card__image,
.floomi-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.floomi-card__image--placeholder {
	display: block;
	background: rgba(0, 0, 0, 0.06);
	block-size: 100%;
}

.floomi-card__badges {
	position: absolute;
	inset-block-start: 12px;
	inset-inline: 12px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
}

.floomi-card__badge {
	padding: 5px 11px;
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
	border-radius: 3px;
	color: #fff;
}

.floomi-card__badge--sale { background: #3d2f2b; }
.floomi-card__badge--hot  { background: #96636c; margin-inline-start: auto; }
.floomi-card__badge--oos  { background: #736760; margin-inline-start: auto; }

/* Pre-order sits centre-stage like the reference, not in a corner. */
.floomi-card__badge--preorder {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 62px;
	block-size: 62px;
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1.15;
	border-radius: 50%;
	background: #fff;
	color: #3d2f2b;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* ---- hover actions ---- */

.floomi-card__actions {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.floomi-card:hover .floomi-card__actions,
.floomi-card:focus-within .floomi-card__actions {
	opacity: 1;
}

.floomi-card__action > * {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: background 0.25s ease, color 0.25s ease;
}

.floomi-card__action > *:hover {
	background: #3d2f2b;
	color: #fff;
}

.floomi-card__reveal {
	position: absolute;
	inset-block-end: 18px;
	inset-inline: 18px;
	z-index: 3;
	/*
	 * A column, not a row: after an AJAX add-to-cart WooCommerce injects its
	 * `.added_to_cart` "View cart" link as a sibling of the button. As a flex row that
	 * link stole horizontal space and wrapped across two lines on top of the button.
	 * Stacking is also why the box is anchored by its bottom edge — the extra line grows
	 * upward instead of pushing the button out of the image.
	 */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/*
 * WooCommerce's post-add "View cart" link. Kept rather than hidden so the cart is still
 * reachable if the side-cart drawer is ever switched off, but rendered as a quiet
 * secondary link so it never competes with the button above it.
 */
.floomi-card__reveal .added_to_cart {
	display: block;
	padding: 6px 10px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.92);
	color: #3d2f2b;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.floomi-card__reveal .added_to_cart:hover,
.floomi-card__reveal .added_to_cart:focus-visible {
	color: var(--floomi-primary, #a8707a);
}

.floomi-card:hover .floomi-card__reveal,
.floomi-card:focus-within .floomi-card__reveal {
	opacity: 1;
	transform: none;
}

.floomi-card__cart-button {
	display: inline-block;
	inline-size: 100%;
	padding: 13px 24px;
	background: #fff;
	color: #3d2f2b;
	border: 1px dashed #3d2f2b;
	border-radius: 40px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.floomi-card__cart-button:hover,
.floomi-card__cart-button:focus-visible {
	background: #3d2f2b;
	color: #fff;
}

/*
 * Touch devices have no hover, so reveal everything permanently — the wishlist and the
 * purchase action must never be unreachable.
 */
@media (hover: none) {
	.floomi-card__actions,
	.floomi-card__reveal {
		opacity: 1;
		transform: none;
	}

	.floomi-card__reveal {
		position: static;
		margin-block-start: 12px;
	}
}

/* ---- card body ---- */

.floomi-card__body {
	padding-block: 16px 0;
	text-align: center;
}

.floomi-card__title {
	margin: 0 0 6px;
	font-size: 1.125rem;
	line-height: 1.3;
}

.floomi-card__price {
	margin-block-end: 6px;
}

.floomi-card__price del {
	opacity: 0.55;
	margin-inline-end: 6px;
}

.floomi-card__price ins {
	text-decoration: none;
	color: var(--floomi-primary, #a8707a);
}

.floomi-card__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 0.8125rem;
}

/* Star row drawn with a CSS mask — no icon font, no extra HTTP request. */
.floomi-card__stars {
	position: relative;
	display: inline-block;
	inline-size: 78px;
	block-size: 14px;
	background: rgba(0, 0, 0, 0.16);
	-webkit-mask: repeat-x left center / 15.6px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.4 4.2 13.4l.7-4.3-3.1-3 4.3-.6z'/%3E%3C/svg%3E");
	mask: repeat-x left center / 15.6px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.4 4.2 13.4l.7-4.3-3.1-3 4.3-.6z'/%3E%3C/svg%3E");
}

.floomi-card__stars-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: var(--floomi-primary, #a8707a);
}

.floomi-card__review-count {
	color: #9c8f8a;
}

/* ---- responsive ---- */

@media (max-width: 1400px) {
	.floomi-products__arrow--prev { inset-inline-start: -20px; }
	.floomi-products__arrow--next { inset-inline-end: -20px; }
}

/*
 * Laptop band (992-1199px) -> 3 per view.
 *
 * Elementor ships three breakpoints by default (desktop / tablet <=1024 / mobile <=767),
 * so this range would otherwise inherit the desktop value of 4 and the cards would be
 * cramped. !important is needed because Elementor emits its desktop value with higher
 * specificity and no media query.
 *
 * If you enable Elementor's optional "Laptop" breakpoint (Site Settings -> Layout ->
 * Breakpoints) you get an editable control for this range instead — delete this block then.
 */
@media (min-width: 992px) and (max-width: 1199px) {
	.floomi-products {
		--floomi-per-view: 3 !important;
	}
}

@media (max-width: 1024px) {
	.floomi-products__arrow {
		inline-size: 42px;
		block-size: 42px;
	}

	.floomi-products__arrow--prev { inset-inline-start: -8px; }
	.floomi-products__arrow--next { inset-inline-end: -8px; }
}

@media (max-width: 767px) {
	.floomi-products {
		--floomi-gap: 16px;
	}

	.floomi-products__arrow {
		inline-size: 38px;
		block-size: 38px;
	}

	.floomi-products__arrow--prev { inset-inline-start: 0; }
	.floomi-products__arrow--next { inset-inline-end: 0; }

	.floomi-card__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.floomi-products__viewport { scroll-behavior: auto; }

	.floomi-card__image,
	.floomi-card__actions,
	.floomi-card__reveal {
		transition: none;
	}
}

/* --------------------------------------------------------- categories */

.floomi-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.floomi-cat__media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
}

.floomi-cat__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.floomi-cat__image--placeholder {
	display: block;
	background: rgba(0, 0, 0, 0.06);
	block-size: 100%;
}

.floomi-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.floomi-cat__name {
	display: block;
	font-size: 1.125rem;
}

.floomi-cat__subtitle {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/*
 * Category slider: a horizontal scroller on every breakpoint — 6.5 items per view on
 * desktop, 3.5 on mobile, so a partial next item peeks in and signals the row can be
 * swiped. `.floomi-cats` is both the flex container and the overflow container (definite
 * width from its parent section), which is why flex-basis percentages resolve here and the
 * row genuinely overflows.
 *
 * Body-prefixed so it beats the widget's own `columns` control, which writes
 * grid-template-columns on `.elementor-element-xxx .floomi-cats`.
 */
body .floomi-categories ul.floomi-cats {
	/*
	 * One gap value drives both the `gap` and the item's flex-basis, so they can never
	 * disagree. The widget's own Gap control writes `gap: 30px` on
	 * `.elementor-element-xxx .floomi-cats` (0,2,0); `ul.floomi-cats` here is (0,2,2), so
	 * this wins and the peek maths stays correct.
	 */
	--cat-gap: 30px;
	--cat-per-view: 6.5;
	--cat-gaps: 6;   /* floor(per-view): the number of whole gaps before the peeking item */
	display: flex;
	/* !important: the widget's Gap control writes gap on a 0,4,0 selector. */
	gap: var(--cat-gap) !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	padding-block-end: 6px;
	grid-template-columns: none;
}

body .floomi-categories ul.floomi-cats::-webkit-scrollbar {
	display: none;
}

body .floomi-categories ul.floomi-cats .floomi-cat {
	flex: 0 0 calc(
		(100% - var(--cat-gaps) * var(--cat-gap)) / var(--cat-per-view)
	);
	min-inline-size: 0;
	margin: 0;
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	body .floomi-categories ul.floomi-cats {
		--cat-gap: 16px;
		--cat-per-view: 3.5;
		--cat-gaps: 3;
	}
}

/* --------------------------------------------------------------- hero */
/*
 * Triptych hero: one slide = three vertical images. The overlay box is a GRID CHILD
 * placed in the chosen column, not an absolutely positioned element, so it stays
 * centred on that image at every width with no magic offsets.
 */

.floomi-hero {
	position: relative;
	overflow: hidden;
}

/*
 * Scroll-snap carousel rather than a transformed track: the browser owns the motion,
 * which means native touch swiping on phones, correct RTL behaviour, and no dependency
 * on transform compositing. JS only calls scrollTo() on the viewport.
 */
.floomi-hero__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.floomi-hero__viewport::-webkit-scrollbar {
	display: none;
}

.floomi-hero__track {
	display: flex;
	inline-size: 100%;
}

.floomi-hero__slide {
	flex: 0 0 100%;
	min-inline-size: 0;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 1fr;
	gap: 4px;
}

.floomi-hero__cell {
	position: relative;
	overflow: hidden;
	block-size: 700px;
	grid-row: 1;
}

.floomi-hero__cell--1 { grid-column: 1; }
.floomi-hero__cell--2 { grid-column: 2; }
.floomi-hero__cell--3 { grid-column: 3; }

/* Only rendered when a dedicated mobile image is set; hidden until the phone breakpoint. */
.floomi-hero__cell--mobile {
	display: none;
}

.floomi-hero__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 900ms cubic-bezier(0.2, 0, 0.2, 1);
}

.floomi-hero__tint {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---- overlay box: a grid child, centred inside its column ---- */

.floomi-hero__box {
	grid-row: 1;
	z-index: 3;
	align-self: center;
	justify-self: center;
	inline-size: min(430px, 88%);
	padding: 46px 40px;
	text-align: center;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.floomi-hero__box--col1 { grid-column: 1; }
.floomi-hero__box--col2 { grid-column: 2; }
.floomi-hero__box--col3 { grid-column: 3; }

.floomi-hero__label {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #776a63;
}

.floomi-hero__heading {
	margin: 0;
	font-size: clamp(1.9rem, 3vw, 2.9rem);
	line-height: 1.12;
	font-weight: 400;
}

.floomi-hero__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #685d56;
}

.floomi-hero__button {
	display: inline-block;
	margin-block-start: 6px;
	padding: 13px 34px;
	background: #a8707a;
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	border-radius: 2px;
	transition: background 0.3s ease, color 0.3s ease;
}

/* ---- navigation ---- */

.floomi-hero__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 4;
	inline-size: 48px;
	block-size: 48px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px dashed #3d2f2b;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	color: #3d2f2b;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.floomi-hero__arrow:hover {
	background: #fff;
}

.floomi-hero__arrow--prev { inset-inline-start: 28px; }
.floomi-hero__arrow--next { inset-inline-end: 28px; }

/* Arrow glyph drawn with borders — no icon font dependency. */
.floomi-hero__arrow > span {
	inline-size: 9px;
	block-size: 9px;
	border-inline-start: 1.5px solid currentColor;
	border-block-start: 1.5px solid currentColor;
}

.floomi-hero__arrow--prev > span {
	transform: rotate(-45deg);
	margin-inline-start: 3px;
}

.floomi-hero__arrow--next > span {
	transform: rotate(135deg);
	margin-inline-end: 3px;
}

[dir="rtl"] .floomi-hero__arrow--prev > span { transform: rotate(135deg); }
[dir="rtl"] .floomi-hero__arrow--next > span { transform: rotate(-45deg); }

.floomi-hero__dots {
	position: absolute;
	inset-block-end: 22px;
	inset-inline: 0;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 9px;
}

.floomi-hero__dot {
	inline-size: 9px;
	block-size: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(28, 28, 28, 0.28);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.floomi-hero__dot[aria-selected="true"] {
	background: #a8707a;
	transform: scale(1.25);
}

/* ---- responsive ----
 * Tablet keeps all three images (the composition is the point) but shortens them.
 * Phones show ONE image so the overlay text stays readable at a sensible size:
 * the dedicated mobile image if provided, otherwise the middle one.
 */

@media (max-width: 1024px) {
	.floomi-hero__cell { block-size: 520px; }

	/*
	 * Keep all three images, but let the box span the whole slide instead of being
	 * squeezed into one ~250px column — otherwise the heading wraps to a sliver.
	 * It still reads as "centred on the middle image" because it is centred overall.
	 */
	.floomi-hero__box,
	.floomi-hero__box--col1,
	.floomi-hero__box--col2,
	.floomi-hero__box--col3 {
		grid-column: 1 / -1;
		justify-self: center;
		inline-size: min(360px, 62%);
		padding: 32px 26px;
		gap: 10px;
	}

	.floomi-hero__arrow {
		inline-size: 40px;
		block-size: 40px;
	}

	.floomi-hero__arrow--prev { inset-inline-start: 12px; }
	.floomi-hero__arrow--next { inset-inline-end: 12px; }
}

@media (max-width: 767px) {
	.floomi-hero__slide {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.floomi-hero__cell { block-size: 460px; }

	/* Hide the side images; keep exactly one behind the box. */
	.floomi-hero__cell--1,
	.floomi-hero__cell--3 {
		display: none;
	}

	.floomi-hero__cell--2,
	.floomi-hero__box {
		grid-column: 1;
	}

	/* When a mobile-specific image exists it replaces the middle one. */
	.floomi-hero__slide:has(.floomi-hero__cell--mobile) .floomi-hero__cell--2 {
		display: none;
	}

	.floomi-hero__cell--mobile {
		display: block;
		grid-column: 1;
	}

	.floomi-hero__box {
		inline-size: min(330px, 86%);
		padding: 30px 22px;
	}

	/*
	 * Hide the arrows on phones: at this width a 48px circle would sit on top of the
	 * content box. The viewport is a native scroll-snap carousel, so swiping already
	 * moves between groups, and the dots stay as the visible affordance.
	 */
	.floomi-hero__arrow {
		display: none;
	}

	.floomi-hero__dots { inset-block-end: 14px; }
}

@media (hover: none) {
	.floomi-hero__cell:hover .floomi-hero__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.floomi-hero__viewport {
		scroll-behavior: auto;
	}

	.floomi-hero__img,
	.floomi-hero__arrow,
	.floomi-hero__dot {
		transition: none;
	}
}

/* --------------------------------------------------------------- tabs */

.floomi-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin-block-end: 40px;
}

/* Split header: title on the left, category tabs on the right. */
.floomi-tabs--split .floomi-tabs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-block-end: 34px;
}

.floomi-tabs--split .floomi-tabs__head .floomi-section-heading {
	margin-block-end: 0;
	text-align: start;
}

.floomi-tabs--split .floomi-tabs__head .floomi-section-heading__title {
	font-size: clamp(1.6rem, 2.2vw, 2rem);
	font-weight: 400;
}

.floomi-tabs--split .floomi-tabs__head .floomi-tabs__nav {
	justify-content: flex-end;
	margin-block-end: 0;
	flex-wrap: nowrap;
	gap: 34px;
}

.floomi-tabs--split .floomi-tabs__button {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8125rem;
	color: #a89b95;
	white-space: nowrap;
}

.floomi-tabs--split .floomi-tabs__button[aria-selected="true"] {
	color: #3d2f2b;
	border-block-end-color: #3d2f2b;
}

/* Tabs scroll rather than wrap once the row runs out of room. */
@media (max-width: 991px) {
	.floomi-tabs--split .floomi-tabs__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.floomi-tabs--split .floomi-tabs__head .floomi-tabs__nav {
		justify-content: flex-start;
		inline-size: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 24px;
	}

	.floomi-tabs--split .floomi-tabs__head .floomi-tabs__nav::-webkit-scrollbar {
		display: none;
	}
}

.floomi-tabs__button {
	padding: 8px 4px;
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.floomi-tabs__button[aria-selected="true"] {
	border-block-end-color: currentColor;
}

.floomi-tabs__panel[hidden] {
	display: none;
}

.floomi-tabs__panel.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Tabs scroll horizontally rather than wrapping awkwardly on phones. */
@media (max-width: 599px) {
	.floomi-tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
	}

	.floomi-tabs__button {
		white-space: nowrap;
	}
}

/* -------------------------------------------------- featured collection */

.floomi-collection__item {
	display: block;
	position: relative;
	overflow: hidden;
}

.floomi-collection__media {
	position: relative;
	overflow: hidden;
	block-size: 420px;
}

.floomi-collection__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.floomi-collection__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

.floomi-collection__badge {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	padding: 4px 12px;
	background: #fff;
	color: #3d2f2b;
	font-size: 0.75rem;
	text-transform: uppercase;
}

.floomi-collection__body {
	padding-block: 1rem;
}

.floomi-collection__title {
	margin: 0 0 0.25rem;
}

/* ------------------------------------------------------------- banner */

.floomi-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-block-size: 480px;
}

.floomi-banner__picture,
.floomi-banner__picture img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.floomi-banner__image {
	object-fit: cover;
}

.floomi-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.floomi-banner__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem;
	color: #fff;
	text-align: center;
	max-inline-size: 640px;
}

.floomi-banner__title {
	margin: 0;
	color: inherit;
	font-size: clamp(1.75rem, 4vw, 3rem);
}

.floomi-banner__label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
}

.floomi-banner__button {
	display: inline-block;
	padding: 12px 30px;
	background: #fff;
	color: #3d2f2b;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	transition: background 0.3s ease, color 0.3s ease;
}

/* ----------------------------------------------------------- benefits */

.floomi-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.floomi-benefit__link {
	display: contents;
}

.floomi-benefit__icon {
	display: inline-flex;
}

.floomi-benefit__title {
	display: block;
	font-weight: 600;
}

.floomi-benefit__desc {
	display: block;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------ collage */

.floomi-collage {
	position: relative;
}

.floomi-collage__item {
	margin: 0;
	min-inline-size: 0;
}

.floomi-collage__item img {
	inline-size: 100%;
	block-size: auto;
}

.floomi-collage__vertical {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.8125rem;
}

.floomi-collage--vertical-end .floomi-collage__vertical {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

@media (max-width: 767px) {
	.floomi-collage--stack .floomi-collage__item {
		transform: none !important;
		inline-size: 100% !important;
	}

	.floomi-collage__vertical--hide-mobile {
		display: none;
	}
}

/* --------------------------------------------------------- newsletter */

.floomi-newsletter__form {
	margin-inline: auto;
	max-inline-size: 520px;
}

.floomi-newsletter form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.floomi-newsletter input[type="email"],
.floomi-newsletter input[type="text"] {
	flex: 1 1 220px;
	min-inline-size: 0;
	padding: 14px 18px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font: inherit;
}

.floomi-newsletter input[type="submit"],
.floomi-newsletter button[type="submit"] {
	padding: 14px 28px;
	border: 0;
	background: #a8707a;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	font: inherit;
}

/* CF7 status messages need to be visible and announced. */
.floomi-newsletter .wpcf7-response-output {
	flex: 1 0 100%;
	margin-inline: 0;
}

/* ---------------------------------------------------- header actions */

.floomi-actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

.floomi-actions__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

.floomi-actions__icon svg {
	inline-size: 22px;
	block-size: 22px;
	display: block;
}

/*
 * The badge hangs off the icon's corner. Two positions are needed because the link box
 * changes size: on desktop it hugs the 22px icon, and on touch screens it is padded out
 * to 44px with the icon centred (see the touch-target block at the end of this file), so
 * a fixed offset either overlapped the neighbouring icon or floated away from its own.
 *
 * Pinning it inside the box instead covered the whole 22px icon on desktop.
 */
.floomi-cart-count,
.floomi-wishlist-count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -6px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	border-radius: 9px;
	background: #a8707a;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.floomi-cart-total {
	margin-inline-start: 4px;
	font-size: 0.875rem;
}

/*
 * Search drawer.
 *
 * Previously the panel was an inline block inside the header actions, so it opened as a
 * cramped ~240px box and pushed the header layout around. It is now a fixed drawer that
 * overlays the page and sizes itself to its content instead of stretching full height.
 */

.floomi-search-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.42);
}

.floomi-search-backdrop[hidden] {
	display: none;
}

.floomi-search-backdrop.is-open {
	display: block;
}

.floomi-search-panel {
	position: fixed;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 10001;
	inline-size: min(460px, 92vw);
	/* Height follows the content — no tall empty white column. */
	block-size: auto;
	max-block-size: 100vh;
	overflow-y: auto;
	padding: 26px 28px 32px;
	background: #fff;
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
	/*
	 * Docked at the edge and revealed with opacity only.
	 *
	 * Earlier versions slid in with a transform and then with an animated `right`
	 * offset; both could leave the panel parked off-screen if the browser did not
	 * recompute the animated property, which meant the search silently did nothing.
	 * It is now anchored at the edge with no animated property at all: the `hidden`
	 * attribute alone decides whether the panel exists. Binary and unbreakable — the
	 * panel can never end up present-but-invisible or parked off-screen.
	 */
	inset-inline-end: 0;
	right: 0;
}

[dir="rtl"] .floomi-search-panel {
	box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
}

.floomi-search-panel[hidden] {
	display: none;
}

/* Kept for JS/state hooks; visibility itself is driven by the [hidden] attribute. */
.floomi-search-panel.is-open {
	display: block;
}


.floomi-search-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block-end: 16px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
}

.floomi-search-panel__title {
	margin: 0;
	font-family: var(--floomi-font-heading, Georgia, serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	color: #3d2f2b;
}

.floomi-search-panel__close {
	inline-size: 38px;
	block-size: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	background: #fff;
	color: #3d2f2b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.floomi-search-panel__close:hover {
	background: #3d2f2b;
	color: #fff;
}

.floomi-search-panel__close:focus-visible,
.floomi-search-panel__submit:focus-visible,
.floomi-search-panel__field:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

.floomi-search-panel__form {
	position: relative;
	display: flex;
	align-items: center;
	margin-block-start: 24px;
	background: #f6efe9;
	border-radius: 8px;
}

.floomi-search-panel__field {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 54px;
	padding-inline: 20px 54px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

.floomi-search-panel__field::placeholder {
	color: #9c8f8a;
}

.floomi-search-panel__submit {
	position: absolute;
	inset-inline-end: 8px;
	inline-size: 38px;
	block-size: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #3d2f2b;
	cursor: pointer;
	transition: color 0.25s ease;
}

.floomi-search-panel__submit svg {
	inline-size: 20px;
	block-size: 20px;
}

.floomi-search-panel__submit:hover {
	color: var(--floomi-primary, #a8707a);
}

@media (max-width: 767px) {
	.floomi-search-panel {
		inline-size: 100vw;
		padding: 20px 20px 26px;
	}

	.floomi-search-panel__title {
		font-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.floomi-search-panel,
	.floomi-search-backdrop {
		transition: none;
	}
}

/* -------------------------------------------------- mobile navigation */

.floomi-mobile-nav__toggle,
.floomi-mobile-nav__close {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	line-height: 1;
}

.floomi-mobile-nav__close {
	font-size: 1.75rem;
}

.floomi-mobile-nav__panel {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 10000;
	inline-size: 320px;
	max-inline-size: 88vw;
	padding: 1.5rem;
	background: #fff;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.35s ease;
}

[dir="rtl"] .floomi-mobile-nav__panel {
	transform: translateX(100%);
}

.floomi-mobile-nav__panel[hidden] {
	display: none;
}

.floomi-mobile-nav__panel.is-open {
	transform: none;
}

.floomi-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1.5rem;
}

.floomi-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.floomi-mobile-nav__list li {
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.floomi-mobile-nav__list a {
	display: block;
	padding-block: 12px;
}

.floomi-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-inline-start: 1rem;
}

.floomi-mobile-nav__backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.45);
}

.floomi-mobile-nav__backdrop[hidden] {
	display: none;
}

/* Visibility rules for the toggle. */
@media (min-width: 1025px) {
	.floomi-mobile-nav--mobile-tablet .floomi-mobile-nav__toggle {
		display: none;
	}
}

@media (min-width: 768px) {
	.floomi-mobile-nav--mobile .floomi-mobile-nav__toggle {
		display: none;
	}
}

/* ------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.floomi-hero__slide {
		min-block-size: 460px;
	}

	.floomi-collection__media {
		block-size: 320px;
	}
}

@media (max-width: 767px) {
	.floomi-hero__slide {
		min-block-size: 380px;
	}

	.floomi-banner {
		min-block-size: 340px;
	}

	.floomi-collection__media {
		block-size: 260px;
	}

	.floomi-card__body {
		padding-block: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.floomi-hero--slider .floomi-hero__track,
	.floomi-card__image,
	.floomi-cat__image,
	.floomi-collection__image,
	.floomi-mobile-nav__panel {
		transition: none;
	}
}


/* ---- cart drawer ---- */
/*
 * Off-canvas cart. The panel is always in the DOM so WooCommerce's fragment refresh has
 * something to replace; `hidden` controls visibility, and the slide is a transform on top
 * of that rather than the thing that decides whether it is open.
 */

.floomi-cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.45);
}

.floomi-cart-drawer-backdrop[hidden] {
	display: none;
}

.floomi-cart-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 100001;
	inline-size: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.16);
}

.floomi-cart-drawer[hidden] {
	display: none;
}

body.floomi-cart-open {
	overflow: hidden;
}

.floomi-cart-drawer.is-busy {
	pointer-events: none;
	opacity: 0.6;
}

/* ---- header ---- */

.floomi-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 26px 30px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.floomi-cart-drawer__title {
	margin: 0;
	font-family: var(--floomi-font-heading, serif);
	font-size: 1.75rem;
	font-weight: 500;
	color: #3d2f2b;
}

.floomi-cart-drawer__count {
	margin-inline-start: 4px;
	font-size: 0.8125rem;
	vertical-align: super;
	color: #9c8f8a;
}

.floomi-cart-drawer__close {
	inline-size: 40px;
	block-size: 40px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: #3d2f2b;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.floomi-cart-drawer__close:hover {
	background: #3d2f2b;
	color: #fff;
}

/* ---- body ---- */

.floomi-cart-drawer__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	overflow-y: auto;
}

.floomi-cart-drawer .floomi-freeship {
	padding: 22px 30px 18px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.floomi-cart-drawer .floomi-freeship__text {
	margin: 0 0 12px;
	font-size: 0.875rem;
	color: #3d2f2b;
}

.floomi-cart-drawer .floomi-freeship__text .amount {
	color: var(--floomi-primary, #a8707a);
	font-weight: 600;
}

.floomi-cart-drawer .floomi-freeship__track {
	block-size: 4px;
	border-radius: 4px;
	background: #eee4de;
	overflow: hidden;
}

.floomi-cart-drawer .floomi-freeship__bar {
	display: block;
	block-size: 100%;
	border-radius: 4px;
	background: var(--floomi-primary, #a8707a);
	transition: width 0.4s ease;
}

/* WooCommerce's mini-cart list */

.floomi-cart-drawer .woocommerce-mini-cart,
.floomi-cart-drawer ul.cart_list {
	flex: 1 1 auto;
	margin: 0;
	padding: 10px 30px 20px;
	list-style: none;
	overflow-y: auto;
}

.floomi-cart-drawer .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding-block: 22px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.06);
}

.floomi-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
	display: contents;
	color: #3d2f2b;
	font-family: var(--floomi-font-heading, serif);
	font-size: 1.125rem;
	line-height: 1.3;
}

.floomi-cart-drawer .woocommerce-mini-cart-item img {
	grid-row: span 3;
	inline-size: 100px;
	block-size: 118px;
	object-fit: contain;
	border-radius: 8px;
	background: #f6efe9;
}

.floomi-cart-drawer .woocommerce-mini-cart-item .quantity,
.floomi-cart-drawer .floomi-cart-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-block-start: 10px;
}

.floomi-cart-drawer .woocommerce-Price-amount {
	color: #3d2f2b;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.9375rem;
}

/* remove ("×") link */
.floomi-cart-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-end: 0;
	inline-size: 24px;
	block-size: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #a89b95;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.floomi-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
	color: #3d2f2b;
}

/* ---- quantity stepper ---- */

.floomi-cart-qty__btn {
	inline-size: 28px;
	block-size: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	color: #3d2f2b;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.floomi-cart-qty__btn:hover {
	background: #3d2f2b;
	color: #fff;
}

.floomi-cart-qty__input {
	inline-size: 42px;
	block-size: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.875rem;
	text-align: center;
	color: #3d2f2b;
	-moz-appearance: textfield;
}

.floomi-cart-qty__input::-webkit-outer-spin-button,
.floomi-cart-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- footer (subtotal + buttons) ---- */

.floomi-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 22px 30px 6px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.08);
	background: #faf6f2;
	font-family: var(--floomi-font-heading, serif);
	font-size: 1.25rem;
	color: #3d2f2b;
}

.floomi-cart-drawer .woocommerce-mini-cart__total .amount {
	font-weight: 600;
}

.floomi-cart-drawer .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 14px 30px 30px;
	background: #faf6f2;
}

.floomi-cart-drawer .woocommerce-mini-cart__buttons .button {
	flex: 1 1 0;
	padding: 15px 18px;
	border: 1px solid #3d2f2b;
	border-radius: 40px;
	background: #fff;
	color: #3d2f2b;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.floomi-cart-drawer .woocommerce-mini-cart__buttons .checkout {
	order: -1;
	background: #3d2f2b;
	color: #fff;
}

.floomi-cart-drawer .woocommerce-mini-cart__buttons .button:hover {
	background: var(--floomi-primary, #a8707a);
	border-color: var(--floomi-primary, #a8707a);
	color: #fff;
}

/* ---- empty state ---- */

.floomi-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 60px 30px;
	text-align: center;
	color: #9c8f8a;
}

/*
 * With the drawer present, WooCommerce's post-add "View cart" link on a product card is
 * redundant — the drawer that opens already offers both View Cart and Checkout.
 */
body.floomi-has-cart-drawer .floomi-card__reveal .added_to_cart {
	display: none;
}

@media (max-width: 479px) {
	.floomi-cart-drawer__header,
	.floomi-cart-drawer .woocommerce-mini-cart,
	.floomi-cart-drawer ul.cart_list,
	.floomi-cart-drawer .woocommerce-mini-cart__total,
	.floomi-cart-drawer .woocommerce-mini-cart__buttons,
	.floomi-cart-drawer .floomi-freeship {
		padding-inline: 20px;
	}

	.floomi-cart-drawer .woocommerce-mini-cart-item {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 14px;
	}

	.floomi-cart-drawer .woocommerce-mini-cart-item img {
		inline-size: 76px;
		block-size: 92px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.floomi-cart-drawer .floomi-freeship__bar {
		transition: none;
	}
}


/* ---- account dialog ---- */
/*
 * Sign in / sign up dialog. Visibility is the `hidden` attribute only — binary, so it can
 * never end up half-open, and the markup is inert for logged-in visitors because the PHP
 * does not print it at all.
 */

.floomi-account-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100010;
	background: rgba(0, 0, 0, 0.45);
}

.floomi-account-backdrop[hidden] {
	display: none;
}

.floomi-account-modal {
	position: fixed;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 100011;
	inline-size: min(470px, calc(100vw - 32px));
	max-block-size: calc(100vh - 40px);
	overflow-y: auto;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.floomi-account-modal[hidden] {
	display: none;
}

body.floomi-account-open {
	overflow: hidden;
}

/* ---- banner ---- */

.floomi-account-modal__banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: 200px;
	padding: 22px 28px;
	background-color: #efe8e1;
	background-position: center center;
	background-size: cover;
}

.floomi-account-modal__banner--plain {
	background-color: #2e2521;
}

.floomi-account-modal__title {
	position: relative;
	margin: 0;
	font-family: var(--floomi-font-heading, serif);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1;
	color: #3d2f2b;
}

.floomi-account-modal__banner--plain .floomi-account-modal__title {
	color: #fff;
}

.floomi-account-modal__close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	inline-size: 34px;
	block-size: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #3d2f2b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease, color 0.2s ease;
}

.floomi-account-modal__close:hover {
	background: #3d2f2b;
	color: #fff;
}

/* ---- body ---- */

.floomi-account-modal__body {
	padding: 28px;
}

.floomi-account-form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.floomi-account-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid rgba(160, 0, 0, 0.25);
	border-radius: 10px;
	background: #fdf3f3;
	color: #8a1f1f;
	font-size: 0.875rem;
	line-height: 1.45;
}

.floomi-account-error[hidden] {
	display: none;
}

.floomi-account-field {
	position: relative;
	margin: 0 0 14px;
}

.floomi-account-field input {
	inline-size: 100%;
	block-size: 54px;
	padding-inline: 24px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 999px;
	background: #fff;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

.floomi-account-field--password input {
	padding-inline-end: 58px;
}

.floomi-account-field input::placeholder {
	color: #a89b95;
}

.floomi-account-field input:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 1px;
}

.floomi-account-reveal {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 18px;
	transform: translateY(-50%);
	inline-size: 28px;
	block-size: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9c8f8a;
	cursor: pointer;
}

.floomi-account-reveal svg {
	inline-size: 20px;
	block-size: 20px;
}

.floomi-account-reveal:hover,
.floomi-account-reveal[aria-pressed="true"] {
	color: #3d2f2b;
}

.floomi-account-links {
	margin: 0 0 20px;
	font-size: 0.875rem;
}

.floomi-account-links a {
	color: #3d2f2b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.floomi-account-links a:hover {
	color: var(--floomi-primary, #a8707a);
}

.floomi-account-note {
	margin: 0 0 18px;
	font-size: 0.8125rem;
	color: #857870;
}

.floomi-account-extra {
	margin: 0 0 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #857870;
}

.floomi-account-submit {
	inline-size: 100%;
	block-size: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.floomi-account-submit:hover {
	background: var(--floomi-primary, #a8707a);
	border-color: var(--floomi-primary, #a8707a);
}

.floomi-account-switch {
	margin: 18px 0 0;
	font-size: 0.875rem;
	color: #776a63;
	text-align: center;
}

.floomi-account-switch button {
	padding: 0;
	border: 0;
	background: transparent;
	color: #3d2f2b;
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.floomi-account-switch button:hover {
	color: var(--floomi-primary, #a8707a);
}

@media (max-width: 479px) {
	.floomi-account-modal__banner {
		min-block-size: 150px;
		padding: 18px 20px;
	}

	.floomi-account-modal__body {
		padding: 22px 20px;
	}
}

/* ---- header touch targets ---- */
/*
 * The header icons are drawn at 22px, which is a fine visual size but far too small to
 * tap reliably. The hit area is padded out to 44px on touch-sized screens without
 * changing how big the icon looks.
 */
@media (max-width: 1024px) {
	.floomi-actions__link,
	.floomi-mobile-nav__toggle {
		min-inline-size: 44px;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/*
	 * The 22px icon is centred in a 44px box, so its corner is 11px in from the edge.
	 * 11 - 6 = 5 keeps the badge on the icon's corner rather than the box's.
	 */
	.floomi-cart-count,
	.floomi-wishlist-count {
		inset-block-start: 5px;
		inset-inline-end: 5px;
	}

	/* The row was spaced for 22px targets; tighten it so the wider hit areas still fit. */
	.floomi-actions {
		gap: 0;
	}
}

/* ---- touch target sizes ---- */
/*
 * Below 1024px every icon-only control gets at least a 44px hit area. The slider dots
 * keep their small visual size and gain an invisible expanded target instead, so the
 * design is unchanged but they are actually tappable.
 */
@media (max-width: 1024px) {
	.floomi-products__arrow,
	.elementor-location-footer .elementor-social-icon,
	.glow-contact .glow-contact-card__social .elementor-social-icon {
		inline-size: 44px;
		block-size: 44px;
	}

	.floomi-hero__dot {
		position: relative;
	}

	.floomi-hero__dot::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
		inline-size: 44px;
		block-size: 44px;
	}

	/* Dots sit closer together than their new hit areas; keep them from overlapping. */
	.floomi-hero__dots {
		gap: 18px;
	}

	/* Footer link rows: more vertical room between tap targets. */
	.elementor-location-footer .elementor-nav-menu a {
		padding-block: 7px;
	}
}

/* ---- mobile carousel ---- */
/*
 * On phones the arrows sat on top of the product image and there was only ever one card
 * in view, so nothing suggested the row could scroll. Dropping the arrows and showing two
 * and a half cards makes the swipe affordance obvious and frees the image.
 */
@media (max-width: 767px) {
	/*
	 * !important for the same reason as the laptop band above: Elementor emits the
	 * widget's own "Products Visible" value as per-element CSS (`.elementor-element-xxx
	 * .floomi-products`, specificity 0,2,0) printed after this stylesheet, and it was
	 * pinning phones to a single card. To change the phone value from the editor instead,
	 * set Products Visible on the mobile breakpoint and delete this block.
	 */
	.floomi-products {
		--floomi-per-view: 2.5 !important;
		--floomi-gap: 14px;
	}

	.floomi-products__arrow {
		display: none;
	}
}

@media (max-width: 479px) {
	.floomi-products {
		--floomi-per-view: 2.2 !important;
	}
}


/* ---- floating widgets ---- */
/*
 * A WhatsApp contact button and an accessibility toolbar, fixed to the start-bottom corner
 * (left in RTL). The accessibility toggles act on classes set on <html>, so they reach the
 * whole document.
 */

.floomi-floats {
	position: fixed;
	inset-block-end: 22px;
	/* Physical left, matching the reference and staying clear of the back-to-top button,
	   which is pinned to the physical right. */
	left: 22px;
	z-index: 9995;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.floomi-float {
	inline-size: 52px;
	block-size: 52px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floomi-float:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.floomi-float:focus-visible {
	outline: 3px solid var(--floomi-primary, #a8707a);
	outline-offset: 3px;
}

.floomi-float svg {
	inline-size: 28px;
	block-size: 28px;
}

.floomi-float--a11y {
	background: #2d6bff;
	color: #fff;
}

.floomi-float--whatsapp {
	background: #25d366;
	color: #fff;
}

/* ---- accessibility panel ---- */

.floomi-a11y-panel {
	position: fixed;
	inset-block-end: 88px;
	left: 22px;
	z-index: 9996;
	inline-size: min(280px, calc(100vw - 32px));
	padding: 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.floomi-a11y-panel[hidden] {
	display: none;
}

.floomi-a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 14px;
}

.floomi-a11y-panel__title {
	margin: 0;
	font-family: var(--floomi-font-heading, serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: #3d2f2b;
}

.floomi-a11y-panel__close {
	inline-size: 32px;
	block-size: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 50%;
	background: #fff;
	font-size: 19px;
	line-height: 1;
	color: #3d2f2b;
	cursor: pointer;
}

.floomi-a11y-panel__close:hover {
	background: #3d2f2b;
	color: #fff;
}

.floomi-a11y-panel__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.floomi-a11y-option {
	min-block-size: 62px;
	padding: 8px 6px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 10px;
	background: #faf5f0;
	font-family: var(--floomi-font-body, sans-serif);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: #3d2f2b;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.floomi-a11y-option:hover {
	border-color: #3d2f2b;
}

.floomi-a11y-option.is-active {
	background: #3d2f2b;
	border-color: #3d2f2b;
	color: #fff;
}

.floomi-a11y-option:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

.floomi-a11y-reset {
	inline-size: 100%;
	margin-block-start: 12px;
	padding: 10px;
	border: 0;
	border-radius: 999px;
	background: #efe8e1;
	font-size: 0.8125rem;
	color: #3d2f2b;
	cursor: pointer;
}

.floomi-a11y-reset:hover {
	background: #e6dcd3;
}

@media (max-width: 479px) {
	.floomi-floats {
		inset-block-end: 16px;
		left: 16px;
	}

	.floomi-a11y-panel {
		inset-block-end: 80px;
		left: 16px;
	}
}

/* ================= accessibility adjustments (act on <html>) ================= */

/* Larger text — scale the root font; rem-based type across the site follows. */
html.floomi-a11y-bigger-text {
	font-size: 118%;
}

/* Readable font — swap the display serif for a plain sans everywhere. */
html.floomi-a11y-readable-font,
html.floomi-a11y-readable-font body,
html.floomi-a11y-readable-font h1,
html.floomi-a11y-readable-font h2,
html.floomi-a11y-readable-font h3,
html.floomi-a11y-readable-font h4,
html.floomi-a11y-readable-font .floomi-card__title,
html.floomi-a11y-readable-font [class*="elementor-heading"] {
	font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
	letter-spacing: normal !important;
}

/* High contrast — force dark text on white, keep the panel controls usable. */
html.floomi-a11y-high-contrast body,
html.floomi-a11y-high-contrast p,
html.floomi-a11y-high-contrast span:not(.floomi-cart-count):not(.floomi-float svg),
html.floomi-a11y-high-contrast li,
html.floomi-a11y-high-contrast a,
html.floomi-a11y-high-contrast h1,
html.floomi-a11y-high-contrast h2,
html.floomi-a11y-high-contrast h3,
html.floomi-a11y-high-contrast h4 {
	color: #000 !important;
}

html.floomi-a11y-high-contrast body {
	background: #fff !important;
}

/* Highlight links — underline + outline every link so they stand out. */
html.floomi-a11y-links-highlight a {
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	outline: 1px dashed currentColor;
	outline-offset: 2px;
}

/* Large cursor. */
html.floomi-a11y-big-cursor,
html.floomi-a11y-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M4 2l16 8-6.5 1.8L18 20l-3 1.4-4.2-8.3L4 18z'/%3E%3C/svg%3E") 4 2, auto;
}

/* Pause animations — stop transitions, animations and smooth scrolling. */
html.floomi-a11y-stop-motion *,
html.floomi-a11y-stop-motion *::before,
html.floomi-a11y-stop-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}