/*
 * Floomi Elementor — base layer.
 *
 * Deliberately small. The visual design is authored in Elementor (containers, widgets,
 * Global Colors and Global Fonts), so this file only provides:
 *   1. design tokens mirrored from the source CSS,
 *   2. a light reset + typography defaults,
 *   3. accessibility helpers,
 *   4. styling for the classic fallback templates used when Elementor Pro is inactive.
 *
 * Nothing here should need editing to restyle the site — do that in Elementor.
 */

:root {
	/* Blush / cream / warm-brown palette, taken from the brand logo image. */
	--floomi-primary: #a8707a;
	--floomi-secondary: #3d2f2b;
	--floomi-accent: #a8707a;
	--floomi-text: #3d2f2b;
	--floomi-muted: #9c8f8a;
	--floomi-bg-light: #faf5f0;
	--floomi-bg-dark: #3d2f2b;
	--floomi-border: #ece2dc;
	--floomi-success: #4caf50;
	--floomi-sale: #a8707a;

	--floomi-font-heading: "Cormorant", Georgia, "Times New Roman", serif;
	--floomi-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--floomi-radius: 0px;
	--floomi-transition: 0.35s ease;
	--floomi-container: 1300px;
}

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

body {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--floomi-muted);
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--floomi-font-heading);
	color: var(--floomi-text);
	font-weight: 500;
	line-height: 1.2;
	margin-block: 0 0.5em;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--floomi-transition);
}

a:hover,
a:focus {
	color: var(--floomi-primary);
}

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

/* Prevent the horizontal overflow that plagues wide hero/collage layouts. */
html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- Accessibility */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus,
.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 20px;
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 100000;
	background: #fff;
	color: var(--floomi-text);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* A visible focus ring everywhere. Never remove without a replacement. */
:focus-visible {
	outline: 2px solid var(--floomi-primary);
	outline-offset: 2px;
}

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

/* ------------------------------------------------- Classic fallback templates only */

.floomi-fallback-header__inner,
.floomi-fallback-footer__inner {
	max-width: var(--floomi-container);
	margin-inline: auto;
	padding-inline: 20px;
	padding-block: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.floomi-fallback-nav__list {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-main {
	max-width: var(--floomi-container);
	margin-inline: auto;
	padding-inline: 20px;
	padding-block: 40px;
}

.floomi-entry {
	margin-block-end: 48px;
}

.floomi-button {
	display: inline-block;
	padding: 14px 32px;
	background: var(--floomi-primary);
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background var(--floomi-transition), color var(--floomi-transition);
}

.floomi-button:hover,
.floomi-button:focus {
	background: var(--floomi-secondary);
	color: #fff;
}

.page-links {
	margin-block-start: 24px;
}


/* ---- floral-editorial-section ---- */
/*
 * Editorial floral collage.
 *
 * Built from native Elementor containers + Image widgets, so every image, the heading,
 * the description and the vertical caption stay individually editable. This file only
 * supplies the asymmetric geometry Elementor's controls cannot express: the overlap,
 * the vertical caption and the responsive collapse.
 *
 * Every selector is scoped under .floral-editorial-section — nothing here can reach
 * another Elementor image, heading or container on the site.
 *
 * No JavaScript required.
 */

.floral-editorial-section {
	--fe-main-h: 680px;    /* left portrait height  */
	--fe-side-h: 486px;    /* overlay + right image */
	--fe-side-w: 356px;
	max-inline-size: 1440px;
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 40px);
}

/* ---- top row: heading left, description right ---- */

.floral-editorial-section .floral-editorial-header {
	/*
	 * Elementor containers resolve their own layout from CSS variables
	 * (--flex-direction et al) and those declarations out-specify a plain class rule,
	 * so the variables are set here rather than the properties.
	 */
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: clamp(24px, 4vw, 60px);
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 60px);
}

.floral-editorial-section .floral-editorial-heading {
	--width: 42%;
	flex: 0 1 42%;
	max-inline-size: 430px;
}

.floral-editorial-section .floral-editorial-heading h1,
.floral-editorial-section .floral-editorial-heading h2,
.floral-editorial-section .floral-editorial-heading h3 {
	margin: 0;
	font-size: clamp(1.9rem, 2.6vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: start;
}

.floral-editorial-section .floral-editorial-description {
	--width: 58%;
	flex: 1 1 58%;
	max-inline-size: 620px;
	/* Push the copy to the right edge, matching the reference. */
	margin-inline-start: auto;
}

.floral-editorial-section .floral-editorial-description p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	text-align: start;
}

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

.floral-editorial-section .floral-editorial-collage {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: clamp(24px, 7vw, 130px);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 7vw, 130px);
	/* Absolute children are pulled up; this keeps them inside the section box. */
	padding-block-start: 40px;
	margin-block-start: clamp(30px, 5vw, 70px);
}

.floral-editorial-section .floral-editorial-left {
	--width: 58%;
	position: relative;
	flex: 0 0 58%;
	max-inline-size: 58%;
}

.floral-editorial-section .floral-editorial-main-image img {
	inline-size: 100%;
	block-size: var(--fe-main-h);
	object-fit: cover;
	object-position: center;
	border-radius: 9px;
	display: block;
}

/* The overlap itself: sits over the upper-right of the large image. */
.floral-editorial-section .floral-editorial-overlay-image {
	position: absolute;
	inset-block-start: -40px;
	inset-inline-end: -70px;
	inline-size: var(--fe-side-w);
	z-index: 2;
}

.floral-editorial-section .floral-editorial-overlay-image img {
	inline-size: 100%;
	block-size: var(--fe-side-h);
	object-fit: cover;
	object-position: center;
	border: 6px solid #fff;
	border-radius: 9px;
	display: block;
}

/* ---- right image + vertical caption ---- */

.floral-editorial-section .floral-editorial-right {
	--width: 30%;
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: 16px;
	flex: 0 0 30%;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	/* Sits lower than the overlapping image, as in the reference. */
	margin-block-start: 120px;
	margin-inline-start: auto;
}

.floral-editorial-section .floral-editorial-side-image {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.floral-editorial-section .floral-editorial-side-image img {
	inline-size: 100%;
	block-size: var(--fe-side-h);
	object-fit: cover;
	object-position: center;
	border-radius: 9px;
	display: block;
}

.floral-editorial-section .floral-editorial-vertical-text {
	flex: 0 0 auto;
	align-self: flex-end;
}

.floral-editorial-section .floral-editorial-vertical-text p,
.floral-editorial-section .floral-editorial-vertical-text h2,
.floral-editorial-section .floral-editorial-vertical-text h3,
.floral-editorial-section .floral-editorial-vertical-text .elementor-heading-title {
	margin: 0;
	writing-mode: vertical-rl;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--floomi-text);
	white-space: nowrap;
}

/* ---- laptop / small desktop ---- */

@media (max-width: 1199px) {
	.floral-editorial-section {
		--fe-main-h: 560px;
		--fe-side-h: 400px;
		--fe-side-w: 280px;
	}

	.floral-editorial-section .floral-editorial-overlay-image {
		inset-block-start: -28px;
		inset-inline-end: -40px;
	}

	.floral-editorial-section .floral-editorial-right {
		margin-block-start: 90px;
	}
}

/* ---- tablet: stack the text, keep the collage ---- */

@media (max-width: 991px) {
	.floral-editorial-section {
		--fe-main-h: 460px;
		--fe-side-h: 320px;
		--fe-side-w: 220px;
	}

	.floral-editorial-section .floral-editorial-header {
		--flex-direction: column;
		--gap: 18px;
		flex-direction: column;
		gap: 18px;
	}

	.floral-editorial-section .floral-editorial-heading,
	.floral-editorial-section .floral-editorial-description {
		--width: 100%;
		flex: 1 1 auto;
		max-inline-size: 100%;
		margin-inline-start: 0;
	}

	.floral-editorial-section .floral-editorial-collage {
		gap: 24px;
	}

	.floral-editorial-section .floral-editorial-overlay-image {
		inset-inline-end: -20px;
		inset-block-start: -20px;
	}

	.floral-editorial-section .floral-editorial-right {
		margin-block-start: 60px;
	}
}

/* ---- mobile: no absolute positioning, plain vertical stack ---- */

@media (max-width: 767px) {
	.floral-editorial-section {
		--fe-main-h: auto;
		--fe-side-h: auto;
		--fe-side-w: 100%;
		padding-inline: 20px;
	}

	.floral-editorial-section .floral-editorial-collage {
		--flex-direction: column;
		--gap: 22px;
		flex-direction: column;
		gap: 22px;
		padding-block-start: 0;
	}

	.floral-editorial-section .floral-editorial-left,
	.floral-editorial-section .floral-editorial-right {
		--width: 100%;
		flex: 1 1 auto;
		max-inline-size: 100%;
		inline-size: 100%;
		margin-block-start: 0;
		margin-inline-start: 0;
	}

	/* Overlap is fragile on phones — return the image to normal flow. */
	.floral-editorial-section .floral-editorial-left {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.floral-editorial-section .floral-editorial-overlay-image {
		position: static;
	}

	/*
	 * Hold the wrappers at full width even before a lazy image has decoded — a wrapper
	 * sized by its (not yet loaded) image collapses to 0 and the section jumps.
	 */
	.floral-editorial-section .floral-editorial-main-image,
	.floral-editorial-section .floral-editorial-overlay-image,
	.floral-editorial-section .floral-editorial-side-image {
		inline-size: 100%;
		flex: 0 0 auto;
	}

	.floral-editorial-section .floral-editorial-overlay-image img {
		border-width: 0;
	}

	.floral-editorial-section .floral-editorial-main-image img,
	.floral-editorial-section .floral-editorial-overlay-image img,
	.floral-editorial-section .floral-editorial-side-image img {
		block-size: auto;
		aspect-ratio: 4 / 5;
	}

	/* Caption becomes ordinary horizontal text under the image. */
	.floral-editorial-section .floral-editorial-right {
		--flex-direction: column;
		--gap: 12px;
		flex-direction: column;
		gap: 12px;
	}

	.floral-editorial-section .floral-editorial-vertical-text {
		align-self: flex-start;
	}

	.floral-editorial-section .floral-editorial-vertical-text p,
	.floral-editorial-section .floral-editorial-vertical-text h2,
	.floral-editorial-section .floral-editorial-vertical-text h3,
	.floral-editorial-section .floral-editorial-vertical-text .elementor-heading-title {
		writing-mode: horizontal-tb;
		white-space: normal;
	}
}


/* ---- promo-benefits-section ---- */
/*
 * Two wide promotional banners + a compact benefits strip.
 *
 * Native Elementor containers and widgets throughout: the images are container
 * backgrounds (so background-position stays editable per breakpoint), the whole banner
 * is a container link, and each benefit is an Icon widget + Heading + Text.
 *
 * Everything is scoped under .promo-benefits-section. No JavaScript.
 */

.promo-benefits-section {
	max-inline-size: 1440px;
	margin-inline: auto;
	padding-inline: clamp(18px, 2.5vw, 36px);
}

/* ---- promotional banners ---- */

.promo-benefits-section .floral-promo-row {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--gap: clamp(18px, 2vw, 30px);
	display: flex;
	gap: clamp(18px, 2vw, 30px);
	align-items: stretch;
}

.promo-benefits-section .floral-promo-card {
	--width: 50%;
	/* Elementor centres container children by default; the copy must hug the left edge. */
	--justify-content: flex-start;
	--align-items: center;
	justify-content: flex-start;
	flex: 1 1 50%;
	min-inline-size: 0;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	/* 2.7:1 — wide editorial banner, never a tall portrait card. */
	aspect-ratio: 2.7 / 1;
	min-block-size: 250px;
	display: flex;
	align-items: center;
	transition: box-shadow 0.3s ease;
}

.promo-benefits-section .floral-promo-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.promo-benefits-section .floral-promo-card:focus-within {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 3px;
}

/*
 * Text sits in the calm left third. A soft light wash — not a dark overlay — keeps it
 * readable without dimming the flowers.
 */
.promo-benefits-section .floral-promo-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.72) 0%,
		rgba(255, 255, 255, 0.45) 34%,
		rgba(255, 255, 255, 0) 62%
	);
	pointer-events: none;
	z-index: 1;
}

/* Elementor's default container padding would push the copy off the left edge. */
.promo-benefits-section .floral-promo-card > .e-con-inner,
.promo-benefits-section .floral-promo-card > .elementor-element {
	padding: 0;
	inline-size: 100%;
}

.promo-benefits-section .floral-promo-card {
	text-decoration: none;
	color: inherit;
}

.promo-benefits-section .floral-promo-content {
	--width: 100%;
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	position: relative;
	z-index: 2;
	max-inline-size: 58%;
	padding-inline-start: clamp(22px, 3vw, 46px);
	padding-inline-end: 12px;
	text-align: start;
}

.promo-benefits-section .floral-promo-title .elementor-heading-title,
.promo-benefits-section .floral-promo-title h2,
.promo-benefits-section .floral-promo-title h3 {
	margin: 0;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	color: #241d1a;
	text-align: start;
}

.promo-benefits-section .floral-promo-description p {
	margin: 10px 0 0;
	font-family: var(--floomi-font-body);
	font-size: clamp(0.875rem, 1.05vw, 1rem);
	line-height: 1.5;
	color: #3d2f2b;
	text-align: start;
}

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

.promo-benefits-section .floral-benefits-strip {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--gap: clamp(20px, 2.5vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 2.5vw, 40px);
	margin-block-start: clamp(56px, 7vw, 95px);
	padding-block: 24px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.1);
	border-block-end: 1px solid rgba(0, 0, 0, 0.1);
	background: transparent;
}

.promo-benefits-section .floral-benefit-item {
	--width: 25%;
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: center;
	--gap: 14px;
	flex: 1 1 25%;
	min-inline-size: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	text-align: start;
}

.promo-benefits-section .floral-benefit-icon {
	flex: 0 0 auto;
}

.promo-benefits-section .floral-benefit-icon .elementor-icon {
	color: #3d2f2b;
}

.promo-benefits-section .floral-benefit-icon svg,
.promo-benefits-section .floral-benefit-icon i {
	inline-size: 36px;
	block-size: 36px;
	font-size: 32px;
	color: #3d2f2b;
	fill: #3d2f2b;
}

/*
 * Elementor gives every container --width:100%, which makes the text block fill the row
 * and wraps the icon onto its own line. There is no "auto width" container setting, so
 * this single narrow override is the cleanest fix.
 */
.promo-benefits-section .floral-benefit-item > .e-con-inner {
	flex-wrap: nowrap;
}

.promo-benefits-section .floral-benefit-content {
	--width: auto;
	inline-size: auto !important;
	flex: 1 1 auto;
	min-inline-size: 0;
	text-align: start;
}

.promo-benefits-section .floral-benefit-title .elementor-heading-title,
.promo-benefits-section .floral-benefit-title h3,
.promo-benefits-section .floral-benefit-title h4 {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #241d1a;
	text-align: start;
}

.promo-benefits-section .floral-benefit-item > .e-con-inner,
.promo-benefits-section .floral-benefit-content > .e-con-inner {
	padding: 0;
}

.promo-benefits-section .floral-benefit-description p {
	margin: 6px 0 0;
	font-family: var(--floomi-font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	color: #9c8f8a;
	text-align: start;
}

/* ---- laptop ---- */

@media (max-width: 1199px) {
	.promo-benefits-section .floral-promo-card {
		min-block-size: 220px;
	}

	.promo-benefits-section .floral-promo-content {
		max-inline-size: 64%;
	}

	.promo-benefits-section .floral-benefits-strip {
		gap: 20px;
	}

	.promo-benefits-section .floral-benefit-description p {
		font-size: 0.8125rem;
	}
}

/* ---- tablet: banners stay horizontal, benefits become 2x2 ---- */

@media (max-width: 991px) {
	.promo-benefits-section .floral-promo-row {
		--flex-direction: column;
		flex-direction: column;
	}

	.promo-benefits-section .floral-promo-card {
		--width: 100%;
		flex: 1 1 auto;
		inline-size: 100%;
		aspect-ratio: 2.9 / 1;
		min-block-size: 220px;
	}

	.promo-benefits-section .floral-benefits-strip {
		--flex-wrap: wrap;
		flex-wrap: wrap;
		row-gap: 26px;
		column-gap: 24px;
	}

	.promo-benefits-section .floral-benefit-item {
		--width: 46%;
		flex: 0 0 calc(50% - 12px);
	}
}

/* ---- mobile: everything stacks, one benefit per row ---- */

@media (max-width: 767px) {

	.promo-benefits-section .floral-promo-card {
		aspect-ratio: auto;
		min-block-size: 215px;
	}

	.promo-benefits-section .floral-promo-content {
		max-inline-size: 78%;
		padding-inline-start: 20px;
	}

	/* A touch more wash on small screens where text sits over more of the image. */
	.promo-benefits-section .floral-promo-card::before {
		background: linear-gradient(
			to right,
			rgba(255, 255, 255, 0.82) 0%,
			rgba(255, 255, 255, 0.5) 55%,
			rgba(255, 255, 255, 0) 88%
		);
	}

	.promo-benefits-section .floral-promo-title .elementor-heading-title,
	.promo-benefits-section .floral-promo-title h2,
	.promo-benefits-section .floral-promo-title h3 {
		font-size: 1.75rem;
	}

	.promo-benefits-section .floral-benefits-strip {
		--flex-direction: column;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 20px;
		padding-block: 26px;
	}

	.promo-benefits-section .floral-benefit-item {
		--width: 100%;
		flex: 1 1 auto;
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.promo-benefits-section .floral-promo-card {
		transition: none;
	}
}


/* ---- glow-footer ---- */
/*
 * Unified dark footer: newsletter row, four columns, copyright.
 *
 * Everything is scoped under .glow-footer (and .glow-back-to-top for the button), so no
 * rule here can reach the header, the page body or any other Elementor form/menu/icon.
 *
 * The newsletter is the site's real Contact Form 7 form — only restyled, never rebuilt —
 * so its recipient, validation and success/error messages are untouched.
 */

.glow-footer,
[data-elementor-type="footer"] .glow-footer-inner {
	background-color: #2e2521;
}

[data-elementor-type="footer"] {
	background-color: #2e2521;
}

.glow-footer-inner {
	max-inline-size: 1440px;
	margin-inline: auto;
	inline-size: 100%;
	padding-inline: clamp(20px, 2.5vw, 40px);
	color: #fff;
}

.glow-footer-inner a {
	text-decoration: none;
}

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

.glow-footer-inner .glow-footer-newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 50px);
	padding-block: clamp(38px, 4vw, 56px);
}

.glow-footer-inner .glow-footer-newsletter-col--title  { flex: 0 1 20%; }
.glow-footer-inner .glow-footer-newsletter-col--text   { flex: 1 1 43%; }
.glow-footer-inner .glow-footer-newsletter-col--form   { flex: 0 1 37%; }

.glow-footer-inner .glow-footer-newsletter-title .elementor-heading-title {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.3;
}

.glow-footer-inner .glow-footer-newsletter-description p {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

/* ---- Contact Form 7, restyled into a rounded pill ---- */

.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form {
	position: relative;
	display: block;
	inline-size: 100%;
	max-inline-size: 460px;
	margin-inline-start: auto;
	background: #fff;
	border-radius: 999px;
	min-block-size: 52px;
}

.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form p {
	margin: 0;
}

.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form br {
	display: none;
}

.glow-footer-inner .glow-footer-newsletter-form input[type="email"] {
	inline-size: 100%;
	block-size: 52px;
	padding-inline: 26px 62px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

.glow-footer-inner .glow-footer-newsletter-form input[type="email"]::placeholder {
	color: #a89b95;
}

.glow-footer-inner .glow-footer-newsletter-form input[type="email"]:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

/*
 * The submit keeps its value ("Subscribe") as its accessible name — font-size:0 hides
 * the text visually without removing it from the accessibility tree — and an inline SVG
 * arrow is painted as the background.
 */
.glow-footer-inner .glow-footer-newsletter-form input[type="submit"] {
	position: absolute;
	inset-inline-end: 6px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--floomi-primary, #a8707a);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.glow-footer-inner .glow-footer-newsletter-form input[type="submit"]:hover {
	background-color: #bd8b94;
}

.glow-footer-inner .glow-footer-newsletter-form input[type="submit"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

[dir="rtl"] .glow-footer-inner .glow-footer-newsletter-form input[type="submit"] {
	transform: translateY(-50%) scaleX(-1);
}

/* CF7 status messages need to sit below the pill, not inside it. */
.glow-footer-inner .glow-footer-newsletter-form .wpcf7-response-output,
.glow-footer-inner .glow-footer-newsletter-form .wpcf7-not-valid-tip {
	margin: 10px 0 0;
	padding: 6px 10px;
	border: 0;
	font-size: 0.8125rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 6px;
}

.glow-footer-inner .glow-footer-newsletter-form .wpcf7-spinner {
	position: absolute;
	inset-inline-end: 56px;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

/* ----------------------------------------------------------- dividers */

.glow-footer-inner .glow-footer-divider {
	block-size: 1px;
	min-block-size: 1px;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------- main columns */

.glow-footer-inner .glow-footer-main {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 56px);
	padding-block: clamp(48px, 5vw, 76px);
}

.glow-footer-inner .glow-footer-brand  { flex: 0 1 30%; }
.glow-footer-inner .glow-footer-column { flex: 0 1 20%; }

.glow-footer-inner .glow-footer-about p {
	margin: 18px 0 0;
	max-inline-size: 320px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.62);
}

.glow-footer-inner .glow-footer-heading .elementor-heading-title {
	margin: 0 0 26px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

/* ---- menus ---- */

.glow-footer-inner .glow-footer-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.glow-footer-inner .glow-footer-menu li {
	margin: 0;
	border: 0;
}

.glow-footer-inner .glow-footer-menu .elementor-item,
.glow-footer-inner .glow-footer-menu a {
	display: inline-block;
	padding: 0;
	margin-block: 7px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
	background: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

.glow-footer-inner .glow-footer-menu a:hover,
.glow-footer-inner .glow-footer-menu a:focus-visible,
.glow-footer-inner .glow-footer-menu .elementor-item:hover {
	color: #fff;
	transform: translateX(3px);
}

[dir="rtl"] .glow-footer-inner .glow-footer-menu a:hover {
	transform: translateX(-3px);
}

.glow-footer-inner .glow-footer-menu a:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 3px;
}

/* ---- social + contact ---- */

.glow-footer-inner .glow-footer-social {
	margin-block-start: 24px;
}

/*
 * Elementor sizes the social glyph from its own --icon-size (50px here), which
 * overflowed the 38px circle and made the logos look squashed together. The glyph is
 * pinned to a size proportional to the circle instead.
 */
.glow-footer-inner .glow-footer-social .elementor-social-icons-wrapper,
.glow-footer-inner .glow-footer-social .elementor-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	--grid-column-gap: 12px;
	--grid-row-gap: 12px;
}

.glow-footer-inner .glow-footer-social .elementor-grid-item {
	margin: 0;
}

.glow-footer-inner .glow-footer-social .elementor-social-icon {
	inline-size: 38px;
	block-size: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 16px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-radius: 50%;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.glow-footer-inner .glow-footer-social .elementor-social-icon i {
	font-size: 16px;
	line-height: 1;
}

.glow-footer-inner .glow-footer-social .elementor-social-icon svg {
	inline-size: 16px;
	block-size: 16px;
	fill: currentColor;
}

.glow-footer-inner .glow-footer-social .elementor-social-icon:hover {
	transform: translateY(-2px);
}

.glow-footer-inner .glow-footer-social .elementor-social-icon:hover {
	background-color: var(--floomi-primary, #a8707a);
	color: #fff;
}

.glow-footer-inner .glow-footer-social .elementor-social-icon:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.glow-footer-inner .glow-footer-contact {
	margin-block-start: 22px;
}

/* Elementor's icon list inherits a disc marker inside the footer — remove it. */
.glow-footer-inner .glow-footer-contact ul,
.glow-footer-inner .glow-footer-contact .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.glow-footer-inner .glow-footer-contact .elementor-icon-list-item {
	list-style: none;
	margin-block: 6px;
}

.glow-footer-inner .glow-footer-contact .elementor-icon-list-item::marker {
	content: none;
}

.glow-footer-inner .glow-footer-contact .elementor-icon-list-item,
.glow-footer-inner .glow-footer-contact .elementor-icon-list-item a {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9375rem;
}

.glow-footer-inner .glow-footer-contact .elementor-icon-list-icon svg,
.glow-footer-inner .glow-footer-contact .elementor-icon-list-icon i {
	color: var(--floomi-primary, #a8707a);
	fill: var(--floomi-primary, #a8707a);
	font-size: 15px;
}

.glow-footer-inner .glow-footer-contact a:hover {
	color: #fff;
}

/* ---------------------------------------------------------- copyright */

.glow-footer-inner .glow-footer-bottom {
	padding-block: 28px 30px;
	text-align: center;
}

.glow-footer-inner .glow-footer-copyright p {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.62);
	text-align: center;
}

/* ------------------------------------------------------ back to top */

.glow-back-to-top {
	position: fixed;
	/* Physical right — the floating WhatsApp/accessibility buttons hold the left. */
	right: 26px;
	inset-block-end: 26px;
	z-index: 9990;
	inline-size: 46px;
	block-size: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--floomi-primary, #a8707a);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}

.glow-back-to-top[hidden] {
	display: none;
}

.glow-back-to-top.is-visible {
	opacity: 1;
	transform: none;
}

.glow-back-to-top:hover {
	background: #bd8b94;
}

.glow-back-to-top:focus-visible {
	outline: 2px solid #3d2f2b;
	outline-offset: 3px;
}

/*
 * Chevron drawn with borders - no icon font needed.
 *
 * Physical borders on purpose: "up" is up in every writing direction, but
 * `border-inline-start` flips in RTL, which turned this arrow sideways.
 */
.glow-back-to-top > span {
	inline-size: 10px;
	block-size: 10px;
	margin-block-start: 4px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

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

@media (max-width: 1199px) {
	.glow-footer-inner .glow-footer-newsletter {
		gap: 24px;
	}

	.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form {
		max-inline-size: 380px;
	}
}

@media (max-width: 991px) {
	/* Title + copy share row one; the form takes a full-width row beneath. */
	.glow-footer-inner .glow-footer-newsletter {
		flex-wrap: wrap;
	}

	.glow-footer-inner .glow-footer-newsletter-col--title { flex: 0 1 32%; }
	.glow-footer-inner .glow-footer-newsletter-col--text  { flex: 1 1 55%; }

	.glow-footer-inner .glow-footer-newsletter-col--form {
		flex: 1 1 100%;
	}

	.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form {
		margin-inline-start: 0;
		max-inline-size: 460px;
	}

	.glow-footer-inner .glow-footer-main {
		flex-wrap: wrap;
	}

	.glow-footer-inner .glow-footer-brand  { flex: 1 1 100%; }
	.glow-footer-inner .glow-footer-column { flex: 0 1 calc(50% - 28px); }
}

@media (max-width: 767px) {
	.glow-footer-inner {
		padding-inline: 20px;
	}

	.glow-footer-inner .glow-footer-newsletter {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-block: 34px;
	}

	.glow-footer-inner .glow-footer-newsletter-col--title,
	.glow-footer-inner .glow-footer-newsletter-col--text,
	.glow-footer-inner .glow-footer-newsletter-col--form {
		flex: 1 1 auto;
		inline-size: 100%;
	}

	.glow-footer-inner .glow-footer-newsletter-form .wpcf7-form {
		max-inline-size: 100%;
	}

	.glow-footer-inner .glow-footer-main {
		flex-direction: column;
		gap: 34px;
		padding-block: 40px;
	}

	.glow-footer-inner .glow-footer-brand,
	.glow-footer-inner .glow-footer-column {
		flex: 1 1 auto;
		inline-size: 100%;
	}

	.glow-back-to-top {
		right: 16px;
		inset-block-end: 16px;
		inline-size: 42px;
		block-size: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glow-back-to-top,
	.glow-footer-inner .glow-footer-menu a {
		transition: none;
	}
}


/* ---- glow-shop-archive ---- */
/*
 * WooCommerce shop archive.
 *
 * Every selector is scoped to .glow-shop-archive (a body class added only on is_shop()
 * and product taxonomy archives), so homepage product sections, the single product page
 * and any other WooCommerce loop keep their own styling.
 *
 * The product loop, ordering form, result count and pagination are WooCommerce's own —
 * this only restyles them.
 */

/* ------------------------------------------------------------------- hero */

.glow-shop-archive .glow-shop-hero {
	text-align: center;
}

.glow-shop-archive .glow-shop-title .elementor-heading-title {
	margin: 0;
	font-family: var(--floomi-font-heading);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.glow-shop-archive .glow-shop-breadcrumb,
.glow-shop-archive .glow-shop-breadcrumb .woocommerce-breadcrumb {
	margin: 10px 0 0;
	font-family: var(--floomi-font-body);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.82);
}

.glow-shop-archive .glow-shop-breadcrumb a {
	color: rgba(255, 255, 255, 0.82);
}

.glow-shop-archive .glow-shop-breadcrumb a:hover {
	color: #fff;
}

/* ----------------------------------------------------------------- layout */

/*
 * The row gap is set through the container's own Gap control, not here: Elementor
 * containers read --gap, so a plain `gap` declaration would be ignored.
 */
.glow-shop-archive .glow-shop-layout {
	max-inline-size: 1480px;
	margin-inline: auto;
}

/*
 * The container was authored with 70px top padding, which left a large empty band between
 * the hero and the toolbar. Because it is a boxed container, Elementor applies that
 * padding to the inner wrapper, not the element itself - so the override has to target
 * .e-con-inner. Body-prefixed to beat Elementor's per-element rule.
 */
body.glow-shop-archive .glow-shop-layout,
body.glow-shop-archive .glow-shop-layout > .e-con-inner {
	padding-block-start: 30px;
}

/*
 * The 272px measure lives on the container's own Width control (per-element CSS wins
 * over any stylesheet rule here, and it stays editable). Only the sticky behaviour,
 * which Elementor has no control for, is set in CSS.
 */
.glow-shop-archive .glow-shop-sidebar {
	position: sticky;
	inset-block-start: 110px;
}

.glow-shop-archive .glow-shop-results {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* ---------------------------------------------------------------- sidebar */

.glow-shop-archive .glow-shop-filter {
	margin-block-end: 34px;
}

.glow-shop-archive .glow-shop-filter-title {
	margin: 0 0 14px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #3d2f2b;
}

.glow-shop-archive .glow-shop-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.glow-shop-archive .glow-shop-filter-list--child {
	margin-block-start: 8px;
	padding-inline-start: 14px;
}

.glow-shop-archive .glow-shop-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-block-size: 40px;
	padding-inline: 18px;
	border-radius: 999px;
	background: #f7f0ea;
	color: #3d2f2b;
	font-size: 0.875rem;
	line-height: 1.3;
	transition: background 0.25s ease, color 0.25s ease;
}

.glow-shop-archive .glow-shop-pill:hover {
	background: #eee4de;
}

.glow-shop-archive .glow-shop-pill.is-active {
	background: var(--floomi-primary, #a8707a);
	color: #fff;
}

.glow-shop-archive .glow-shop-pill.is-active .glow-shop-pill__count {
	color: rgba(255, 255, 255, 0.85);
}

.glow-shop-archive .glow-shop-pill__count {
	color: #9c8f8a;
	font-size: 0.8125rem;
}

/* chips (non-colour attributes) */
.glow-shop-archive .glow-shop-filter-list--chips {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.glow-shop-archive .glow-shop-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 36px;
	padding-inline: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	font-size: 0.8125rem;
	color: #3d2f2b;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.glow-shop-archive .glow-shop-chip:hover {
	border-color: #3d2f2b;
}

.glow-shop-archive .glow-shop-chip.is-active {
	background: #3d2f2b;
	border-color: #3d2f2b;
	color: #fff;
}

/* colour swatches */
.glow-shop-archive .glow-shop-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.875rem;
	color: #3d2f2b;
}

.glow-shop-archive .glow-shop-swatch__dot {
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #ddd;
	flex: 0 0 auto;
}

.glow-shop-archive .glow-shop-swatch.is-active .glow-shop-swatch__dot {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--floomi-primary, #a8707a);
}

.glow-shop-archive .glow-shop-swatch__label {
	flex: 1 1 auto;
}

/* price filter — WooCommerce's own widget, restyled */
.glow-shop-archive .glow-shop-filter--price .price_slider_wrapper {
	margin-block-start: 6px;
}

.glow-shop-archive .ui-slider {
	position: relative;
	block-size: 4px;
	border-radius: 4px;
	background: #eee4de;
	margin-block: 14px 18px;
}

.glow-shop-archive .ui-slider .ui-slider-range {
	position: absolute;
	block-size: 4px;
	border-radius: 4px;
	background: var(--floomi-primary, #a8707a);
}

.glow-shop-archive .ui-slider .ui-slider-handle {
	position: absolute;
	inset-block-start: -6px;
	inline-size: 16px;
	block-size: 16px;
	margin-inline-start: -8px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--floomi-primary, #a8707a);
	cursor: grab;
}

.glow-shop-archive .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid #3d2f2b;
	outline-offset: 2px;
}

.glow-shop-archive .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	color: #685d56;
}

.glow-shop-archive .price_slider_amount .price_label {
	order: 1;
	flex: 1 1 auto;
}

.glow-shop-archive .price_slider_amount .button {
	order: 2;
	padding: 8px 18px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #fff;
	color: #3d2f2b;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.glow-shop-archive .price_slider_amount .button:hover {
	background: #3d2f2b;
	color: #fff;
}

/* featured mini products */
.glow-shop-archive .glow-shop-mini-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.glow-shop-archive .glow-shop-mini__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #3d2f2b;
}

.glow-shop-archive .glow-shop-mini__media {
	flex: 0 0 64px;
	inline-size: 64px;
	block-size: 78px;
	overflow: hidden;
	border-radius: 6px;
	background: #f6efe9;
}

.glow-shop-archive .glow-shop-mini__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.glow-shop-archive .glow-shop-mini__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.glow-shop-archive .glow-shop-mini__title {
	font-family: var(--floomi-font-heading);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.glow-shop-archive .glow-shop-mini__price {
	font-size: 0.8125rem;
	color: var(--floomi-primary, #a8707a);
}

.glow-shop-archive .glow-shop-mini__price del {
	color: #a89b95;
	margin-inline-end: 5px;
}

.glow-shop-archive .glow-shop-mini__price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------- toolbar */

.glow-shop-archive .woocommerce-products-header,
.glow-shop-archive .glow-shop-results .woocommerce-notices-wrapper:empty {
	display: none;
}

.glow-shop-archive .glow-shop-results .woocommerce-result-count,
.glow-shop-archive .glow-shop-results .woocommerce-ordering,
.glow-shop-archive .glow-shop-view-switcher,
.glow-shop-archive .glow-shop-filter-toggle {
	margin: 0;
}

/*
 * The wrapper is opened at woocommerce_before_shop_loop priority 19 and closed at 31,
 * so it contains WooCommerce's own result count (20) and ordering form (30) plus our
 * controls (25) — none of those three are unhooked or re-implemented.
 */
.glow-shop-archive .glow-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-block-end: 18px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.09);
}

.glow-shop-archive .glow-shop-toolbar .woocommerce-ordering {
	margin-inline-start: auto;
}

.glow-shop-archive .woocommerce-result-count {
	font-size: 0.8125rem;
	color: #9c8f8a;
}

.glow-shop-archive .glow-shop-view-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
}

.glow-shop-archive .glow-shop-view {
	block-size: 30px;
	display: grid;
	place-items: center;
	padding-inline: 5px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #d6cdc7;
	cursor: pointer;
	transition: color 0.2s ease;
}

/*
 * Two rows of dots, one row per line of the icon. The dot count is what distinguishes
 * the 2/3/4-column options; the list option is a dot plus a bar. Everything inherits
 * currentColor so only one property changes on hover and on the active state.
 */
.glow-shop-archive .glow-shop-view__icon {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.glow-shop-archive .glow-shop-view__row {
	display: flex;
	align-items: center;
	gap: 3px;
}

.glow-shop-archive .glow-shop-view__dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 1px;
	background: currentColor;
}

.glow-shop-archive .glow-shop-view__bar {
	inline-size: 13px;
	block-size: 4px;
	border-radius: 1px;
	background: currentColor;
}

.glow-shop-archive .glow-shop-view:hover {
	color: #9c8f8a;
}

.glow-shop-archive .glow-shop-view.is-active {
	color: var(--floomi-primary, #a8707a);
}

.glow-shop-archive .glow-shop-view:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

.glow-shop-archive .woocommerce-ordering select,
.glow-shop-archive .glow-shop-ordering select {
	appearance: none;
	-webkit-appearance: none;
	min-inline-size: 150px;
	block-size: 40px;
	padding-inline: 16px 34px;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 999px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	color: #3d2f2b;
	cursor: pointer;
	/* The reference labels it "Default Sorting"; WooCommerce's string is sentence case. */
	text-transform: capitalize;
}

[dir="rtl"] .glow-shop-archive .woocommerce-ordering select {
	background-position: left 12px center;
}

.glow-shop-archive .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

/* The filter button only exists for small screens. */
.glow-shop-archive .glow-shop-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	block-size: 40px;
	padding-inline: 18px;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 999px;
	background: #fff;
	color: #3d2f2b;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	cursor: pointer;
}

.glow-shop-archive .glow-shop-filter-toggle__icon svg {
	inline-size: 16px;
	block-size: 16px;
	display: block;
}

/* ------------------------------------------------------------------- grid */

/*
 * Column and row gaps are deliberately NOT set here: Elementor Pro's Archive Products
 * widget writes them as per-element CSS, which out-specifies any class rule, so they are
 * set through the widget's own Column Gap / Row Gap controls instead and stay editable.
 */
/*
 * WooCommerce's `.products.elementor-grid` zeroes the top margin, so the gap below the
 * toolbar is set on the toolbar's own bottom margin instead. 30px lets the first row sit
 * a touch below the toolbar rather than flush against it.
 */
.glow-shop-archive .glow-shop-toolbar {
	margin-block-end: 30px;
}

.glow-shop-archive .glow-shop-products ul.products {
	display: grid;
	grid-template-columns: repeat(var(--glow-cols, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-shop-archive .glow-shop-products ul.products::before,
.glow-shop-archive .glow-shop-products ul.products::after {
	display: none;
}

.glow-shop-archive .glow-shop-products ul.products li.product {
	inline-size: 100%;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	text-align: center;
}

/* ---- product card ---- */
/*
 * The archive renders `Floomi\Elementor\Product_Card_Renderer`, the same card the
 * homepage grids and product tabs use, so the card itself is styled once in the plugin's
 * widgets.css. Only the bits specific to sitting inside WooCommerce's `<li>` live here.
 */

.glow-shop-archive .glow-shop-products ul.products li.product > .floomi-card {
	block-size: 100%;
}

/* WooCommerce's list item adds its own spacing and text alignment; the card owns both. */
.glow-shop-archive .glow-shop-products ul.products li.product::before,
.glow-shop-archive .glow-shop-products ul.products li.product::after {
	display: none;
}

/* ------------------------------------------------------------- pagination */

.glow-shop-archive .woocommerce-pagination {
	margin-block-start: 60px;
	text-align: center;
}

/*
 * `flex`, not `inline-flex`: as an inline-flex box this shrank to a single 38px column
 * and the page numbers stacked vertically instead of sitting in a row.
 */
.glow-shop-archive .woocommerce-pagination ul.page-numbers {
	display: flex;
	inline-size: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.glow-shop-archive .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.glow-shop-archive .woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 5px;
	background: #fff;
	color: #3d2f2b;
	font-size: 0.875rem;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.glow-shop-archive .woocommerce-pagination .page-numbers:hover {
	border-color: #3d2f2b;
}

.glow-shop-archive .woocommerce-pagination .page-numbers.current {
	background: var(--floomi-primary, #a8707a);
	border-color: var(--floomi-primary, #a8707a);
	color: #fff;
}

.glow-shop-archive .woocommerce-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--floomi-primary, #a8707a);
	outline-offset: 2px;
}

/* --------------------------------------------------------- empty results */

.glow-shop-archive .woocommerce-info,
.glow-shop-archive .woocommerce-no-products-found {
	margin-block-start: 24px;
	padding: 18px 22px;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background: #faf6f2;
	color: #685d56;
}

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

@media (max-width: 1279px) {
	.glow-shop-archive .glow-shop-products ul.products {
		--glow-cols: 3;
	}
}

@media (max-width: 991px) {
	.glow-shop-archive .glow-shop-products ul.products {
		--glow-cols: 2;
	}

	/* Sidebar becomes an off-canvas drawer. */
	.glow-shop-archive .glow-shop-layout {
		flex-direction: column;
	}

	.glow-shop-archive .glow-shop-sidebar {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 10001;
		inline-size: min(330px, 88vw);
		max-block-size: 100vh;
		overflow-y: auto;
		padding: 24px 22px 40px;
		background: #fff;
		box-shadow: 6px 0 30px rgba(0, 0, 0, 0.14);
		flex: 0 0 auto;
	}

	/*
	 * Closed is the CSS default, so the drawer never flashes open before the script
	 * runs and it stays out of the way entirely with JavaScript disabled.
	 */
	.glow-shop-archive .glow-shop-sidebar {
		display: none;
	}

	.glow-shop-archive .glow-shop-sidebar.is-open {
		display: block;
	}

	.glow-shop-archive .glow-shop-results {
		inline-size: 100%;
	}

	.glow-shop-archive .glow-shop-filter-toggle {
		display: inline-flex;
	}

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

	.glow-shop-filter-backdrop {
		display: none;
	}

	.glow-shop-filter-backdrop.is-open {
		display: block;
	}

	body.glow-filters-open {
		overflow: hidden;
	}

	.glow-shop-sidebar-close {
		inline-size: 36px;
		block-size: 36px;
		display: grid;
		place-items: center;
		margin-inline-start: auto;
		margin-block-end: 12px;
		padding: 0;
		border: 1px solid rgba(0, 0, 0, 0.18);
		border-radius: 50%;
		background: #fff;
		font-size: 19px;
		line-height: 1;
		cursor: pointer;
	}
}

@media (min-width: 992px) {
	.glow-shop-sidebar-close {
		display: none;
	}
}

@media (max-width: 767px) {
	.glow-shop-archive .glow-shop-layout {
		padding-inline: 18px;
	}

	/*
	 * Below 768px the toolbar keeps only the filter button and the sort dropdown, as in
	 * the reference. The count and the column switcher are dropped rather than wrapped:
	 * four wrapped rows cost ~100px of vertical space, and a column switcher is
	 * meaningless where the grid is already one column. The count stays in the DOM for
	 * screen readers via its role="status" live region.
	 */
	.glow-shop-archive .glow-shop-toolbar .woocommerce-result-count {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.glow-shop-archive .glow-shop-view-switcher {
		display: none;
	}

	.glow-shop-archive .glow-shop-toolbar {
		justify-content: space-between;
	}

}

@media (max-width: 479px) {
	/* Two per row down to the smallest phones - one full-width card per screen made the
	   listing feel much longer than it is. */
	.glow-shop-archive .glow-shop-products ul.products {
		--glow-cols: 2;
	}

	.glow-shop-archive ul.products li.product .floomi-card__title {
		font-size: 0.875rem;
	}
}

/* List view (set by the switcher). */
.glow-shop-archive.glow-view-list .glow-shop-products ul.products {
	--glow-cols: 1;
}

.glow-shop-archive.glow-view-list ul.products li.product .floomi-card {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	text-align: start;
}

.glow-shop-archive.glow-view-list ul.products li.product .floomi-card__body {
	align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
	.glow-shop-archive .glow-shop-pill,
	.glow-shop-archive .glow-shop-chip,
	.glow-shop-archive .page-numbers,
	.glow-shop-archive ul.products li.product .button {
		transition: none;
	}
}


/* ---- floomi-cart-page ---- */
/*
 * Classic WooCommerce cart page.
 *
 * Scoped to body.floomi-cart-page. The markup is WooCommerce's own `cart/cart.php` and
 * `cart/cart-totals.php` — neither is overridden — so this is layout and skin only.
 */

/* The hero is full-bleed, so the page wrapper must not add its own top padding. */
body.floomi-cart-page .site-main {
	max-inline-size: none;
	padding: 0;
}

body.floomi-cart-page .entry-content {
	max-inline-size: none;
}

/* -------------------------------------------------------------- step nav */

.floomi-cart-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 auto;
	padding: 60px 20px 44px;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.floomi-cart-steps__step {
	color: #c9c6c0;
	transition: color 0.25s ease;
}

.floomi-cart-steps__step:hover {
	color: #3d2f2b;
}

.floomi-cart-steps__step.is-current {
	color: #3d2f2b;
}

.floomi-cart-steps__sep {
	color: #d8d5cf;
}

/* --------------------------------------------------------------- layout */

/*
 * WooCommerce prints the cart form and the collaterals as siblings. Turning their shared
 * parent into a two-column grid gives the design's layout without touching either
 * template; the coupon/actions row stays inside the form where WooCommerce put it.
 */
body.floomi-cart-page .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
	max-inline-size: 1440px;
	margin-inline: auto;
	padding: 0 clamp(20px, 4vw, 40px) 100px;
}

body.floomi-cart-page .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.floomi-cart-page .woocommerce-cart-form {
	grid-column: 1;
	min-inline-size: 0;
}

body.floomi-cart-page .cart-collaterals {
	grid-column: 2;
	inline-size: 100%;
	float: none;
}

/*
 * WooCommerce's own `.woocommerce .cart-collaterals .cart_totals` sets float:right and
 * width:48%; these selectors have to match that specificity to undo it, otherwise the
 * totals box collapses to 48% and its table overflows the column.
 */
body.floomi-cart-page .woocommerce .cart-collaterals .cart_totals,
body.floomi-cart-page .woocommerce .cart-collaterals .cross-sells {
	inline-size: 100%;
	float: none;
}

/* ---------------------------------------------------------------- table */

body.floomi-cart-page .shop_table {
	inline-size: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}

body.floomi-cart-page .shop_table thead th {
	padding: 0 0 18px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.12);
	font-family: var(--floomi-font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: #3d2f2b;
	text-align: start;
}

/* Header: WooCommerce emits remove + thumbnail + name cells; the design has one
   "Product" heading spanning the thumbnail and the name. */
body.floomi-cart-page .shop_table thead .product-remove,
body.floomi-cart-page .shop_table thead .product-thumbnail {
	display: none;
}

body.floomi-cart-page .shop_table thead .product-name {
	inline-size: 45%;
}

body.floomi-cart-page .shop_table thead .product-price,
body.floomi-cart-page .shop_table thead .product-quantity,
body.floomi-cart-page .shop_table thead .product-subtotal {
	inline-size: 15%;
}

body.floomi-cart-page .cart_item td {
	padding: 30px 0;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
	vertical-align: middle;
	background: transparent;
}

/* The "×" column is replaced by the worded Remove link under the product name. */
body.floomi-cart-page .cart_item .product-remove {
	display: none;
}

body.floomi-cart-page .cart_item .product-thumbnail {
	inline-size: 100px;
	padding-inline-end: 22px;
}

body.floomi-cart-page .cart_item .product-thumbnail img {
	inline-size: 100px;
	block-size: 118px;
	object-fit: contain;
	border-radius: 8px;
	background: #f6efe9;
}

body.floomi-cart-page .cart_item .product-name a {
	font-family: var(--floomi-font-heading);
	font-size: 1.25rem;
	line-height: 1.3;
	color: #3d2f2b;
}

body.floomi-cart-page .cart_item .product-name a:hover {
	color: var(--floomi-primary);
}

.floomi-cart-remove {
	display: inline-block;
	margin-block-start: 6px;
	font-family: var(--floomi-font-body);
	font-size: 0.875rem;
	color: #776a63;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.floomi-cart-remove:hover {
	color: #3d2f2b;
}

body.floomi-cart-page .cart_item .product-price,
body.floomi-cart-page .cart_item .product-subtotal {
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.floomi-cart-page .cart_item .product-subtotal {
	font-weight: 500;
}

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

body.floomi-cart-page .quantity {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: #f6efe9;
}

.floomi-qty-btn {
	inline-size: 30px;
	block-size: 30px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 15px;
	line-height: 1;
	color: #3d2f2b;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

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

.floomi-qty-btn:focus-visible {
	outline: 2px solid var(--floomi-primary);
	outline-offset: 1px;
}

body.floomi-cart-page .quantity input.qty {
	inline-size: 40px;
	block-size: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--floomi-font-body);
	font-size: 0.875rem;
	text-align: center;
	color: #3d2f2b;
	-moz-appearance: textfield;
}

body.floomi-cart-page .quantity input.qty::-webkit-outer-spin-button,
body.floomi-cart-page .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ------------------------------------------------- coupon / actions row */

body.floomi-cart-page .cart_item:last-child td {
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

body.floomi-cart-page .actions {
	padding: 34px 0 0;
	border: 0;
}

body.floomi-cart-page .actions::after {
	content: "";
	display: table;
	clear: both;
}

/*
 * Floats, not flex, for this row. The `.actions` element is a `<td colspan="6">`; giving
 * it `display: flex` takes it out of the table layout, the colspan stops applying and the
 * cell collapses to the width of a single column (483px of 909px), pushing
 * "Continue shopping" onto a second line.
 */
body.floomi-cart-page .coupon {
	display: flex;
	align-items: center;
	gap: 14px;
	float: left;
}

body.floomi-cart-page .actions .floomi-cart-continue {
	float: right;
}

body.floomi-cart-page .coupon label {
	display: none;
}

body.floomi-cart-page #coupon_code {
	inline-size: 260px;
	max-inline-size: 100%;
	block-size: 52px;
	padding-inline: 24px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 999px;
	background: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.floomi-cart-page #coupon_code::placeholder {
	color: #a89b95;
}

body.floomi-cart-page .actions .button,
body.floomi-cart-page .actions button[name="apply_coupon"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 52px;
	padding-inline: 34px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Two-word labels must stay on one line inside the pill. */
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

body.floomi-cart-page .actions .button:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
	color: #fff;
}

/*
 * Secondary: outlined. The selector has to include `.actions` to match the specificity of
 * the filled rule above — otherwise that rule wins and this button renders black.
 */
body.floomi-cart-page .actions .floomi-cart-continue {
	/*
	 * Centred flex so it reads as a button, not the outlined coupon input it sits under
	 * (both are 999px pills). The uppercase, centred label is what distinguishes them.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #3d2f2b;
	text-align: center;
}

body.floomi-cart-page .actions .floomi-cart-continue:hover {
	background: #3d2f2b;
	border-color: #3d2f2b;
	color: #fff;
}

/*
 * "Update cart" is redundant once the steppers auto-submit, and the design has no such
 * button. It is hidden only when the script is running (the class is set by widgets.js),
 * so with JavaScript disabled it stays visible and the quantity field remains usable.
 * It must stay in the DOM either way — the steppers submit by clicking it.
 */
html.floomi-js body.floomi-cart-page .actions .button[name="update_cart"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

body.floomi-cart-page .actions .button[name="update_cart"] {
	background: #fff;
	color: #3d2f2b;
}

body.floomi-cart-page .actions .button[name="update_cart"]:disabled {
	opacity: 0.4;
	cursor: default;
}

/* --------------------------------------------------- free-shipping bar */

.floomi-freeship--cart {
	margin-block-end: 26px;
	padding: 22px 26px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: #fff;
}

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

.floomi-freeship__text .amount {
	color: var(--floomi-primary);
	font-weight: 600;
}

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

.floomi-freeship__bar {
	display: block;
	block-size: 100%;
	border-radius: 5px;
	background: var(--floomi-primary);
	transition: width 0.4s ease;
}

/* ---------------------------------------------------------- cart totals */

body.floomi-cart-page .cart_totals {
	background: #f7f1eb;
	border-radius: 10px;
	overflow: hidden;
}

body.floomi-cart-page .cart_totals > h2 {
	margin: 0;
	padding: 24px 30px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	background: #efe8e1;
	font-family: var(--floomi-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	color: #3d2f2b;
}

body.floomi-cart-page .cart_totals table {
	inline-size: 100%;
	table-layout: fixed;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.floomi-cart-page .cart_totals th,
body.floomi-cart-page .cart_totals td {
	padding: 22px 30px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	vertical-align: top;
	background: transparent;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	text-align: start;
}

body.floomi-cart-page .cart_totals th {
	inline-size: 40%;
	font-weight: 400;
	color: #776a63;
}

body.floomi-cart-page .cart_totals td {
	color: #3d2f2b;
}

body.floomi-cart-page .cart_totals .cart-subtotal td,
body.floomi-cart-page .cart_totals .order-total td {
	font-family: var(--floomi-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
}

body.floomi-cart-page .cart_totals .order-total th,
body.floomi-cart-page .cart_totals .order-total td {
	border-block-end: 0;
	color: #3d2f2b;
}

body.floomi-cart-page .woocommerce-shipping-methods {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

body.floomi-cart-page .woocommerce-shipping-methods li {
	margin-block-end: 6px;
}

body.floomi-cart-page .woocommerce-shipping-destination {
	margin: 0;
	font-size: 0.875rem;
	color: #776a63;
}

body.floomi-cart-page .shipping-calculator-button {
	display: inline-block;
	margin-block-start: 6px;
	font-size: 0.875rem;
	color: #3d2f2b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.floomi-cart-page .wc-proceed-to-checkout {
	padding: 26px 30px 30px;
}

body.floomi-cart-page .wc-proceed-to-checkout .checkout-button {
	display: block;
	inline-size: 100%;
	padding: 18px 24px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.25s ease, border-color 0.25s ease;
}

body.floomi-cart-page .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

/* --------------------------------------------------------- empty cart */

body.floomi-cart-page .cart-empty {
	margin: 0;
	padding: 70px 20px 20px;
	text-align: center;
	font-family: var(--floomi-font-heading);
	font-size: 1.5rem;
	color: #3d2f2b;
}

body.floomi-cart-page .return-to-shop {
	padding: 0 20px 90px;
	text-align: center;
}

body.floomi-cart-page .return-to-shop .button {
	display: inline-block;
	padding: 16px 38px;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

@media (max-width: 1023px) {
	body.floomi-cart-page .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	body.floomi-cart-page .woocommerce-cart-form,
	body.floomi-cart-page .cart-collaterals {
		grid-column: 1;
	}
}

@media (max-width: 767px) {
	.floomi-page-hero {
		min-block-size: 240px;
	}

	.floomi-cart-steps {
		padding: 36px 20px 28px;
	}

	/* The table becomes one card per line: WooCommerce's own responsive labels are used. */
	body.floomi-cart-page .shop_table thead {
		display: none;
	}

	/*
	 * WooCommerce's `shop_table_responsive` mobile CSS forces `display: block !important`
	 * on every cell and hides the thumbnail outright, and cart.php hard-codes that class
	 * with no filter to remove it. Matching !important here is the only way to keep the
	 * product image on small screens.
	 */
	body.floomi-cart-page .cart_item {
		display: grid !important;
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 4px 16px;
		padding-block: 22px;
		border-block-end: 1px solid rgba(0, 0, 0, 0.08);
	}

	body.floomi-cart-page .cart_item td {
		display: block !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: start !important;
	}

	body.floomi-cart-page .cart_item .product-remove {
		display: none !important;
	}

	body.floomi-cart-page .cart_item .product-thumbnail {
		display: block !important;
		grid-row: span 4;
		inline-size: 90px;
	}

	body.floomi-cart-page .cart_item .product-thumbnail img {
		inline-size: 90px;
		block-size: 106px;
	}

	body.floomi-cart-page .cart_item .product-price::before,
	body.floomi-cart-page .cart_item .product-subtotal::before {
		content: attr(data-title) ": ";
		color: #9c8f8a;
	}

	body.floomi-cart-page .cart_item .product-quantity {
		margin-block-start: 8px;
	}

	/* The row is a table cell using floats, so stacking means dropping the floats. */
	body.floomi-cart-page .coupon,
	body.floomi-cart-page .actions .floomi-cart-continue {
		float: none;
	}

	/*
	 * Stacked, not side by side. Keeping the field and the pill on one line widens the
	 * table's min-content past 375px — the cart table then overflows the viewport, which
	 * is worse than the extra line.
	 */
	body.floomi-cart-page .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	body.floomi-cart-page #coupon_code {
		inline-size: 100%;
	}

	body.floomi-cart-page .actions .floomi-cart-continue {
		display: flex;
		margin-block-start: 14px;
		/* Filled on mobile: a full-width thin outline looked like a second input. */
		background: #faf5f0;
		border-color: #3d2f2b;
	}

	body.floomi-cart-page .actions .floomi-cart-continue:hover {
		background: #3d2f2b;
		color: #fff;
	}
}

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


/* ---- glow-single-product ---- */
/*
 * WooCommerce single product page.
 *
 * Every rule is scoped under .glow-single-product (the Elementor wrapper container) or
 * .glow-related-products. Nothing here touches bare WooCommerce selectors globally, so
 * the shop archive, the cart and the homepage grids keep their own styling.
 *
 * The markup is WooCommerce's own — its gallery, its add-to-cart form, its variation
 * JavaScript, its tabs and its structured data. This file only restyles them.
 */

.glow-single-product {
	margin-inline: auto;
}

/* -------------------------------------------------------------- breadcrumb */

.glow-single-product .glow-product-breadcrumb,
.glow-single-product .glow-product-breadcrumb .woocommerce-breadcrumb {
	margin: 0 0 22px;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #a89b95;
}

.glow-single-product .glow-product-breadcrumb a {
	color: #a89b95;
}

.glow-single-product .glow-product-breadcrumb a:hover {
	color: #3d2f2b;
}

/* The trailing item is the current product; WooCommerce prints it as bare text. */
.glow-single-product .glow-product-breadcrumb .woocommerce-breadcrumb {
	color: var(--floomi-primary);
}

/* -------------------------------------------------------------- main layout */

.glow-single-product .glow-product-main {
	align-items: flex-start;
}

.glow-single-product .glow-product-summary {
	max-inline-size: 100%;
}

/* ----------------------------------------------------------------- gallery */

/*
 * WooCommerce renders `.woocommerce-product-gallery` with the main image wrapper first
 * and `ol.flex-control-thumbs` after it. Grid places the thumbnails in a second column on
 * the right, which is the reference layout, without reordering any markup — so FlexSlider,
 * zoom and PhotoSwipe keep working on exactly the nodes they expect.
 */
.glow-single-product .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px;
	gap: 15px;
	align-items: start;
	inline-size: 100%;
	float: none;
	margin: 0;
	opacity: 1 !important; /* WooCommerce fades the gallery in via JS; keep it visible if JS is blocked. */
}

/* No gallery images: WooCommerce prints no thumbnail list, so drop the second column. */
.glow-single-product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
	grid-template-columns: minmax(0, 1fr);
}

.glow-single-product .woocommerce-product-gallery__wrapper {
	grid-column: 1;
	margin: 0;
	border-radius: 9px;
	overflow: hidden;
	background: #f7f0ea;
}

.glow-single-product .woocommerce-product-gallery .flex-viewport {
	border-radius: 9px;
	overflow: hidden;
	background: #f7f0ea;
}

.glow-single-product .woocommerce-product-gallery__image {
	margin: 0;
}

.glow-single-product .woocommerce-product-gallery__image img,
.glow-single-product .woocommerce-product-gallery__wrapper img {
	inline-size: 100%;
	block-size: auto;
	/* Reserve the space before the image loads so the page does not jump. */
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: var(--glow-gallery-position, center center);
	display: block;
}

/* Zoom clones the image into a wrapper; it must not inherit the aspect box. */
.glow-single-product .woocommerce-product-gallery .zoomImg {
	aspect-ratio: auto;
	object-fit: cover;
}

/* ---- thumbnails ---- */

.glow-single-product .woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
	inline-size: 100px;
}

/*
 * WooCommerce ships `.woocommerce div.product div.images .flex-control-thumbs li
 * { width: 25%; float: left }` for its own four-across thumbnail strip — specificity
 * (0,4,3). This selector reaches (0,5,3) on markup that exists here so the vertical
 * column actually gets full-width thumbnails instead of quarter-width ones.
 */
body.glow-product-page .glow-single-product .glow-product-gallery .woocommerce-product-gallery ol.flex-control-thumbs li,
.glow-single-product .woocommerce-product-gallery .flex-control-thumbs li {
	inline-size: 100%;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.glow-product-page .glow-single-product .glow-product-gallery .woocommerce-product-gallery ol.flex-control-thumbs li img,
.glow-single-product .woocommerce-product-gallery .flex-control-thumbs img {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #f7f0ea;
	cursor: pointer;
	opacity: 1;
	transition: border-color 0.25s ease;
}

.glow-single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: rgba(0, 0, 0, 0.2);
}

.glow-single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.glow-single-product .woocommerce-product-gallery .flex-control-thumbs .flex-active img {
	border-color: var(--floomi-primary);
	border-width: 2px;
}

/* WooCommerce's lightbox trigger sits over the image. */
.glow-single-product .woocommerce-product-gallery__trigger {
	inset-block-start: 14px;
	inset-inline-end: 14px;
	z-index: 4;
}

/* ------------------------------------------------------------------ title */

.glow-single-product .glow-product-title h1,
.glow-single-product .glow-product-title .product_title {
	margin: 0 0 12px;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.8rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	color: #3d2f2b;
}

/* ------------------------------------------------------------------ price */

.glow-single-product .glow-product-price-row .price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 1.125rem;
	color: var(--floomi-primary);
}

.glow-single-product .glow-product-price-row .price del {
	order: 1;
	color: #a89b95;
	font-size: 1rem;
	opacity: 1;
	text-decoration: line-through;
}

.glow-single-product .glow-product-price-row .price ins {
	order: 2;
	background: transparent;
	color: var(--floomi-primary);
	font-weight: 600;
	text-decoration: none;
}

/*
 * The discount badge is generated from the real prices in PHP and appended to the price
 * widget, so a variable product's range and any currency formatting stay WooCommerce's.
 */
.glow-single-product .glow-product-discount {
	order: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 46px;
	block-size: 28px;
	padding-inline: 10px;
	border-radius: 999px;
	background: #7c1f2b;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---- rating (kept for schema + reviews link) ---- */

.glow-single-product .glow-product-rating {
	margin-block: 10px 0;
}

.glow-single-product .glow-product-rating .star-rating {
	color: var(--floomi-primary);
	font-size: 0.85em;
}

.glow-single-product .glow-product-rating .woocommerce-review-link {
	font-size: 0.8125rem;
	color: #9c8f8a;
}

/* ---------------------------------------------------------------- divider */

.glow-single-product .glow-product-divider {
	margin-block: 20px;
}

/* --------------------------------------------------------------- viewers */

.glow-single-product .glow-product-viewers {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 0.8125rem;
	color: #3d2f2b;
}

.glow-single-product .glow-product-viewers__icon svg {
	inline-size: 17px;
	block-size: 17px;
	display: block;
}

/* ----------------------------------------------------- short description */

.glow-single-product .glow-product-short-description,
.glow-single-product .glow-product-short-description p {
	margin: 0 0 22px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #857870;
}

.glow-single-product .glow-product-short-description > :last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------- variations form */

.glow-single-product .variations {
	inline-size: 100%;
	margin-block-end: 18px;
	border: 0;
}

.glow-single-product .variations th,
.glow-single-product .variations td {
	padding: 6px 0;
	border: 0;
	text-align: start;
	vertical-align: middle;
}

.glow-single-product .variations .label label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #3d2f2b;
}

.glow-single-product .variations select {
	inline-size: 100%;
	block-size: 46px;
	padding-inline: 16px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 999px;
	background: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.875rem;
	color: #3d2f2b;
}

.glow-single-product .reset_variations {
	font-size: 0.8125rem;
	color: #9c8f8a;
}

/* Variation swatches, when the plugin is active. */
.glow-single-product .woo-variation-swatches .variable-items-wrapper {
	gap: 8px;
}

.glow-single-product .woo-variation-swatches .variable-item {
	border-radius: 999px;
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, 0.18);
}

.glow-single-product .woo-variation-swatches .variable-item.selected {
	border-color: var(--floomi-primary);
	box-shadow: none;
}

/* --------------------------------------------------------- actions row */

/*
 * WooCommerce prints: [ .quantity ] [ add-to-cart button ] and then whatever is hooked
 * onto woocommerce_after_add_to_cart_button — here the wishlist and Buy Now. Flex-wrap
 * keeps the first three on one line and pushes Buy Now onto its own full-width line.
 */
/*
 * Elementor Pro forces `flex-wrap: nowrap` on this form via a long :is() selector whose
 * specificity works out to (0,6,3). The second selector below is deliberately verbose to
 * reach (0,7,2) on markup that actually exists here — without it Buy Now stays on the
 * button row and overflows the column instead of dropping to its own full-width line.
 */
.glow-single-product .glow-product-actions form.cart,
body.glow-product-page .glow-single-product .glow-product-actions.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.grouped_form):not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}

.glow-single-product .glow-product-actions form.cart.variations_form {
	display: block;
}

.glow-single-product .glow-product-actions .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

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

.glow-single-product .quantity {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 120px;
	block-size: 50px;
	padding-inline: 6px;
	border-radius: 999px;
	background: #f6efe9;
	flex: 0 0 auto;
}

.glow-single-product .quantity input.qty {
	inline-size: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	text-align: center;
	color: #3d2f2b;
	-moz-appearance: textfield;
}

.glow-single-product .quantity input.qty::-webkit-outer-spin-button,
.glow-single-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Sold-individually products get no stepper; keep the pill from looking broken. */
.glow-single-product .quantity.hidden {
	display: none;
}

/* ---- add to cart ---- */

.glow-single-product .glow-product-actions .single_add_to_cart_button {
	flex: 1 1 auto;
	min-inline-size: 180px;
	block-size: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 28px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.glow-single-product .glow-product-actions .single_add_to_cart_button:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

.glow-single-product .glow-product-actions .single_add_to_cart_button.disabled,
.glow-single-product .glow-product-actions .single_add_to_cart_button:disabled {
	background: #c6bcb6;
	border-color: #c6bcb6;
	cursor: not-allowed;
}

/* ---- wishlist ---- */

.glow-single-product .glow-product-wishlist {
	flex: 0 0 auto;
}

.glow-single-product .glow-product-wishlist > * {
	inline-size: 50px;
	block-size: 50px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 50%;
	background: #fff;
	color: #3d2f2b;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.glow-single-product .glow-product-wishlist > *:hover {
	border-color: var(--floomi-primary);
	color: var(--floomi-primary);
}

/* ---- buy now ---- */

.glow-single-product .glow-product-buy-now {
	flex: 1 0 100%;
	block-size: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--floomi-primary);
	border-radius: 999px;
	background: var(--floomi-primary);
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.glow-single-product .glow-product-buy-now:hover {
	background: #3d2f2b;
	border-color: #3d2f2b;
}

/* ---------------------------------------------------- availability states */

/*
 * WooCommerce prints these itself; they are only restyled. The wording is never changed,
 * so backorder and stock messages stay whatever WooCommerce (or a plugin) decides.
 */
.glow-single-product .stock {
	margin: 0 0 20px;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.glow-single-product .stock.out-of-stock {
	display: inline-flex;
	align-items: center;
	block-size: 44px;
	padding-inline: 22px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 999px;
	background: #f6efe9;
	color: #736760;
}

.glow-single-product .stock.in-stock {
	color: #4a7c4a;
}

.glow-single-product .stock.available-on-backorder {
	color: #7d5560;
}

/* --------------------------------------------------- guaranteed checkout */

.glow-single-product .glow-product-checkout {
	margin-block-end: 22px;
}

.glow-single-product .glow-product-checkout__title {
	margin: 0 0 12px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: #3d2f2b;
}

.glow-single-product .glow-product-checkout__methods {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-single-product .glow-product-checkout__method img {
	block-size: 24px;
	inline-size: auto;
	max-inline-size: none;
	display: block;
}

.glow-single-product .glow-product-checkout__label {
	display: inline-flex;
	align-items: center;
	block-size: 30px;
	padding-inline: 12px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	font-size: 0.75rem;
	color: #685d56;
}

/* --------------------------------------------------------------- shipping */

.glow-single-product .glow-product-shipping {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.glow-single-product .glow-product-shipping__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #857870;
}

.glow-single-product .glow-product-shipping__icon svg {
	inline-size: 18px;
	block-size: 18px;
	display: block;
	flex: 0 0 auto;
}

.glow-single-product .glow-product-shipping__link {
	color: #3d2f2b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- meta */

.glow-single-product .glow-product-meta .product_meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-block-start: 20px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.10);
	font-size: 0.8125rem;
	color: #9c8f8a;
}

.glow-single-product .glow-product-meta .product_meta > span {
	display: block;
}

.glow-single-product .glow-product-meta .product_meta .sku_wrapper,
.glow-single-product .glow-product-meta .product_meta .posted_in,
.glow-single-product .glow-product-meta .product_meta .tagged_as {
	color: #9c8f8a;
}

.glow-single-product .glow-product-meta .product_meta a {
	color: #9c8f8a;
}

.glow-single-product .glow-product-meta .product_meta a:hover {
	color: var(--floomi-primary);
}

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

.glow-single-product .glow-product-tabs-wrap {
	margin-block-start: 80px;
	padding-block-start: 60px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.10);
}

.glow-single-product .glow-product-tabs .wc-tabs,
.glow-single-product .glow-product-tabs ul.tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 46px);
	margin: 0 0 40px;
	padding: 0;
	border: 0;
	list-style: none;
}

.glow-single-product .glow-product-tabs ul.tabs::before,
.glow-single-product .glow-product-tabs ul.tabs::after,
.glow-single-product .glow-product-tabs ul.tabs li::before,
.glow-single-product .glow-product-tabs ul.tabs li::after {
	display: none;
}

.glow-single-product .glow-product-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.glow-single-product .glow-product-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 0 8px;
	border-block-end: 1px solid transparent;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	color: #b3b0aa;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.glow-single-product .glow-product-tabs ul.tabs li a:hover {
	color: #3d2f2b;
}

.glow-single-product .glow-product-tabs ul.tabs li.active a {
	color: #3d2f2b;
	border-block-end-color: #3d2f2b;
}

/* Decorative slash between tabs, matching the reference. Not focusable or clickable. */
.glow-single-product .glow-product-tabs ul.tabs li + li::before {
	content: "/";
	display: inline-block;
	margin-inline-end: clamp(20px, 4vw, 46px);
	color: #d8d5cf;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	pointer-events: none;
}

/* ---- tab panels ---- */

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel {
	max-inline-size: 100%;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #544843;
}

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel > h2 {
	/* The tab already names the panel; a second heading duplicates it. */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel p {
	margin: 0 0 1.1em;
}

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel img {
	border-radius: 8px;
}

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel table {
	inline-size: 100%;
	border-collapse: collapse;
}

.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel th,
.glow-single-product .glow-product-tabs .woocommerce-Tabs-panel td {
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	text-align: start;
}

/* ---- reviews ---- */

.glow-single-product .glow-product-tabs #reviews .commentlist {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.glow-single-product .glow-product-tabs #reviews .comment_container {
	display: flex;
	gap: 16px;
	padding-block: 20px;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

.glow-single-product .glow-product-tabs #reviews .comment_container img.avatar {
	inline-size: 54px;
	block-size: 54px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.glow-single-product .glow-product-tabs #reviews .star-rating {
	color: var(--floomi-primary);
	font-size: 0.85em;
}

.glow-single-product .glow-product-tabs #reviews .woocommerce-review__author {
	font-family: var(--floomi-font-heading);
	font-size: 1.0625rem;
	color: #3d2f2b;
}

.glow-single-product .glow-product-tabs #reviews .woocommerce-review__published-date {
	font-size: 0.8125rem;
	color: #a89b95;
}

.glow-single-product .glow-product-tabs #review_form .comment-form input[type="text"],
.glow-single-product .glow-product-tabs #review_form .comment-form input[type="email"],
.glow-single-product .glow-product-tabs #review_form .comment-form textarea {
	inline-size: 100%;
	padding: 14px 18px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 12px;
	background: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

.glow-single-product .glow-product-tabs #review_form .comment-form textarea {
	min-block-size: 140px;
}

.glow-single-product .glow-product-tabs #review_form .form-submit input[type="submit"] {
	padding: 15px 36px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.glow-single-product .glow-product-tabs #review_form .form-submit input[type="submit"]:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

/* ------------------------------------------------------ related products */

.glow-single-product .glow-related-wrap {
	margin-block-start: 80px;
}

.glow-related-products > h2,
.glow-single-product .glow-related-products h2 {
	margin: 0 0 40px;
	font-family: var(--floomi-font-heading);
	font-size: clamp(1.75rem, 3vw, 2rem);
	font-weight: 400;
	color: #3d2f2b;
	text-align: center;
}

.glow-related-products ul.products {
	display: grid;
	grid-template-columns: repeat(var(--glow-related-cols, 4), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.glow-related-products ul.products::before,
.glow-related-products ul.products::after {
	display: none;
}

.glow-related-products ul.products li.product {
	inline-size: 100%;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	text-align: center;
}

/* The related row renders the same Floomi card as the shop, styled in widgets.css. */
.glow-related-products ul.products li.product > .floomi-card {
	block-size: 100%;
}

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

@media (max-width: 1199px) {
	.glow-single-product .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr) 84px;
		gap: 12px;
	}

	.glow-single-product .woocommerce-product-gallery .flex-control-thumbs {
		inline-size: 84px;
		gap: 12px;
	}

	.glow-related-products ul.products {
		--glow-related-cols: 3;
	}
}

@media (max-width: 991px) {
	.glow-related-products ul.products {
		--glow-related-cols: 2;
	}
}

/*
 * Below 900px two columns stop working: the summary holds its fixed measure and the
 * gallery collapses to ~257px, which is too small to judge a product by. Stacking gives
 * the image the full width instead.
 *
 * Elementor writes --flex-direction and --width as per-element CSS printed after this
 * stylesheet, so these selectors are specific enough (0,3,1) to override it.
 */
@media (max-width: 899px) {
	body.glow-product-page .glow-single-product .glow-product-main {
		--flex-direction: column;
		flex-direction: column;
	}

	body.glow-product-page .glow-single-product .glow-product-gallery,
	body.glow-product-page .glow-single-product .glow-product-summary {
		--width: 100%;
		inline-size: 100%;
		max-inline-size: 100%;
	}
}

@media (max-width: 767px) {
	/*
	 * Mobile gallery: main image full width, thumbnails in a scrollable row underneath.
	 * The grid becomes a single column and the thumbnail list switches to a row, so the
	 * markup order still matches what FlexSlider expects.
	 */
	.glow-single-product .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.glow-single-product .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		inline-size: 100%;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.glow-single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}

	body.glow-product-page .glow-single-product .glow-product-gallery .woocommerce-product-gallery ol.flex-control-thumbs li,
	.glow-single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 72px;
		inline-size: 72px;
	}

	.glow-single-product .glow-product-tabs-wrap {
		margin-block-start: 50px;
		padding-block-start: 40px;
	}

	.glow-single-product .glow-related-wrap {
		margin-block-start: 50px;
	}

	/* Keep every control at a comfortable touch size. */
	.glow-single-product .quantity,
	.glow-single-product .glow-product-actions .single_add_to_cart_button,
	.glow-single-product .glow-product-buy-now,
	.glow-single-product .glow-product-wishlist > * {
		block-size: 48px;
	}

	.glow-single-product .glow-product-actions .single_add_to_cart_button {
		flex: 1 1 auto;
		min-inline-size: 0;
	}
}

@media (max-width: 479px) {
	.glow-related-products ul.products {
		--glow-related-cols: 2;
	}

	/* Quantity on its own line, then a full-width Add to Cart. */
	.glow-single-product .glow-product-actions .single_add_to_cart_button {
		flex: 1 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glow-single-product .woocommerce-product-gallery .flex-control-thumbs img,
	.glow-single-product .glow-product-actions .single_add_to_cart_button,
	.glow-single-product .glow-product-buy-now {
		transition: none;
	}
}


/* ---- glow-contact ---- */
/*
 * Contact page. Scoped to .glow-contact, which sits on the page's top Elementor container.
 * Logical properties throughout, so the RTL layout needs no separate rules.
 */

/* ------------------------------------------------------------- info cards */

.glow-contact .glow-contact-cards {
	align-items: stretch;
}

.glow-contact .glow-contact-card {
	flex: 1 1 0;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 36px 26px 40px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 6px;
	background: #fff;
	text-align: center;
}

.glow-contact .glow-contact-card__title .elementor-heading-title,
.glow-contact .glow-contact-card__title h3 {
	margin: 0;
	font-family: var(--floomi-font-heading);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
	color: #3d2f2b;
}

.glow-contact .glow-contact-card__body,
.glow-contact .glow-contact-card__body p {
	margin: 0;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #544843;
}

.glow-contact .glow-contact-card__body a {
	color: #3d2f2b;
}

.glow-contact .glow-contact-card__body a:hover {
	color: var(--floomi-primary);
}

/* ---- social row ---- */

.glow-contact .glow-contact-card__social .elementor-social-icons-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.glow-contact .glow-contact-card__social .elementor-social-icon {
	inline-size: 38px;
	block-size: 38px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #f6efe9;
	color: #3d2f2b;
	font-size: 15px;
	transition: background 0.25s ease, color 0.25s ease;
}

.glow-contact .glow-contact-card__social .elementor-social-icon:hover {
	background: #3d2f2b;
	color: #fff;
}

.glow-contact .glow-contact-card__social .elementor-social-icon i,
.glow-contact .glow-contact-card__social .elementor-social-icon svg {
	inline-size: 15px;
	block-size: 15px;
	font-size: 15px;
}

/* ---------------------------------------------------------- vertical rule */

/*
 * The reference separates the cards from the form with a short vertical line. Elementor's
 * Divider draws a horizontal rule, so it is rotated into place rather than replaced with
 * a bare div — that keeps the colour and thickness editable in the panel.
 */
/*
 * Elementor containers default to flex-direction: column, so `flex: 0 0 80px` on the
 * divider below was sizing its HEIGHT and leaving it full-width — rotating that produced
 * a 1345px-tall line straight through the cards. Switching this wrapper to a row makes
 * flex-basis control the width, which is what the rotation needs.
 *
 * --flex-direction is what Elementor's own CSS reads, so it has to be set too, and the
 * selector is body-prefixed to outrank the per-element rule Elementor prints inline.
 */
body .glow-contact .glow-contact-rule-wrap {
	--flex-direction: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-block: 70px;
}

/*
 * `flex: 0 0 80px` is what actually sizes this. An Elementor widget fills its container,
 * so without it the divider is the full 1345px content width and rotating turns it into a
 * 1345px-tall line that overlaps the cards above.
 */
.glow-contact .glow-contact-rule {
	flex: 0 0 80px;
	inline-size: 80px;
	max-inline-size: 80px;
	transform: rotate(90deg);
}

.glow-contact .glow-contact-rule .elementor-divider {
	padding-block: 0;
}

.glow-contact .glow-contact-rule .elementor-divider-separator {
	inline-size: 80px;
}

/* ------------------------------------------------------------------- form */

.glow-contact .glow-contact-form {
	margin-inline: auto;
	text-align: center;
}

.glow-contact .glow-contact-form__title .elementor-heading-title,
.glow-contact .glow-contact-form__title h2 {
	margin: 0 0 22px;
	font-family: var(--floomi-font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: #3d2f2b;
}

.glow-contact .glow-contact-form__intro,
.glow-contact .glow-contact-form__intro p {
	margin: 0 0 46px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #544843;
}

/* ---- Contact Form 7 fields, underline style ---- */

.glow-contact .wpcf7-form p {
	margin: 0 0 34px;
}

.glow-contact .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.glow-contact .wpcf7-form input[type="text"],
.glow-contact .wpcf7-form input[type="email"],
.glow-contact .wpcf7-form input[type="tel"],
.glow-contact .wpcf7-form textarea {
	inline-size: 100%;
	padding: 12px 2px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: 0;
	background: transparent;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
	transition: border-color 0.25s ease;
}

.glow-contact .wpcf7-form textarea {
	min-block-size: 130px;
	resize: vertical;
}

.glow-contact .wpcf7-form input::placeholder,
.glow-contact .wpcf7-form textarea::placeholder {
	color: #a89b95;
}

.glow-contact .wpcf7-form input:focus,
.glow-contact .wpcf7-form textarea:focus {
	outline: none;
	border-block-end-color: var(--floomi-primary);
}

.glow-contact .wpcf7-form input:focus-visible,
.glow-contact .wpcf7-form textarea:focus-visible {
	outline: 2px solid var(--floomi-primary);
	outline-offset: 3px;
}

.glow-contact .wpcf7-form input[type="submit"] {
	inline-size: auto;
	min-inline-size: 220px;
	block-size: 54px;
	margin-block-start: 8px;
	padding-inline: 40px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.glow-contact .wpcf7-form input[type="submit"]:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

/* Contact Form 7's own validation and response messages. */
.glow-contact .wpcf7-not-valid-tip {
	margin-block-start: 6px;
	font-size: 0.8125rem;
	color: #a4262c;
	text-align: start;
}

.glow-contact .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 0.875rem;
	text-align: start;
}

.glow-contact .wpcf7-spinner {
	margin-inline-start: 10px;
}

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

@media (max-width: 1023px) {
	.glow-contact .glow-contact-cards {
		flex-wrap: wrap;
	}

	.glow-contact .glow-contact-card {
		flex: 1 1 calc(50% - 15px);
	}

	.glow-contact .glow-contact-rule-wrap {
		padding-block: 50px;
	}
}

@media (max-width: 767px) {
	.glow-contact .glow-contact-card {
		flex: 1 1 100%;
		padding: 28px 20px 30px;
	}

	.glow-contact .glow-contact-rule-wrap {
		padding-block: 36px;
	}

	.glow-contact .wpcf7-form input[type="submit"] {
		inline-size: 100%;
		min-inline-size: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glow-contact .wpcf7-form input,
	.glow-contact .wpcf7-form textarea,
	.glow-contact .glow-contact-card__social .elementor-social-icon {
		transition: none;
	}
}


/* ---- glow-page-hero ---- */
/*
 * One banner for every sub-page: My Account, Cart, Checkout, Order Tracking, About,
 * Contact, FAQ, the blog archive and single posts. Rendered by
 * `Floomi\Elementor\Page_Hero`.
 *
 * The front page, the shop archive and single products are excluded in PHP because they
 * carry their own headers.
 */

.floomi-page-hero {
	position: relative;
	display: grid;
	place-items: center;
	/*
	 * Plain `100%`, not the usual `100vw` + negative-margin breakout: 100vw includes the
	 * scrollbar, which made the banner 15px wider than the viewport and shifted it 7px
	 * off-centre. The page wrapper is already full width on hero pages (see the
	 * .glow-has-page-hero rules below), so no breakout is needed.
	 */
	inline-size: 100%;
	min-block-size: 320px;
	padding: 40px 20px;
	background-color: #2e2521;
	background-position: center center;
	background-size: cover;
	text-align: center;
}

.floomi-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.floomi-page-hero__inner {
	position: relative;
	z-index: 1;
}

.floomi-page-hero__title {
	margin: 0;
	font-family: var(--floomi-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.floomi-page-hero__crumbs {
	margin: 12px 0 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.floomi-page-hero__crumbs a {
	color: rgba(255, 255, 255, 0.85);
}

.floomi-page-hero__crumbs a:hover {
	color: #fff;
}

.floomi-page-hero__crumbs span {
	margin-inline: 6px;
}

/*
 * The banner already carries the page title, so the theme's own entry header would be a
 * duplicate H1 — bad for the outline and for SEO.
 */
body.glow-has-page-hero .entry-header {
	display: none;
}

body.glow-has-page-hero .site-main {
	max-inline-size: none;
	padding-block-start: 0;
	padding-inline: 0;
}

/* Page content still needs its own measure back. */
body.glow-has-page-hero .entry-content {
	max-inline-size: none;
}

@media (max-width: 767px) {
	.floomi-page-hero {
		min-block-size: 220px;
	}
}

/* ---- glow-account ---- */
/*
 * WooCommerce My Account. The markup is WooCommerce's own — its navigation, its forms,
 * its tables and its endpoints — so this is layout and skin only. No template override.
 */

/*
 * Only the WooCommerce block is boxed. Boxing .entry-content as well would trap the
 * shared page banner inside a 1240px column instead of letting it span the viewport.
 */
body.woocommerce-account .woocommerce {
	max-inline-size: 1240px;
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 40px);
}

body.woocommerce-account .woocommerce {
	padding-block: 70px 90px;
}

/* ------------------------------------------------- logged in: two columns */

body.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	inline-size: 100%;
}

body.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 4vw, 50px);
}

/*
 * Columns are assigned explicitly rather than left to auto-placement: relying on DOM
 * order put the navigation in the wide track and the content in the 260px one. Column 1
 * is the start side, so in Hebrew the menu sits on the right where it belongs.
 */
body.woocommerce-account.logged-in .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	grid-column: 2;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-block-end: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 16px 22px;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #544843;
	transition: background 0.2s ease, color 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: #faf5f0;
	color: #3d2f2b;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #3d2f2b;
	color: #fff;
}

/* ---- content ---- */

body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	inline-size: 100%;
	min-inline-size: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #544843;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-block-start: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: #3d2f2b;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content legend {
	font-family: var(--floomi-font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	color: #3d2f2b;
}

/* ---- tables (orders, downloads) ---- */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	inline-size: 100%;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 16px 18px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	text-align: start;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background: #faf5f0;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #3d2f2b;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-block-end: 0;
}

/* ---- addresses ---- */

body.woocommerce-account .woocommerce-Addresses {
	display: grid;
	/* 320px min gives two even cards in the ~850px content column, one below ~660px. */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	margin: 0;
}

/*
 * WooCommerce lays these out as floated 48% columns
 * (`.woocommerce .col2-set .col-1 { float: left; width: 48% }`, specificity 0,3,0). Left
 * alone, each card became 48% of an already-narrow grid track - about 128px - and the
 * headings wrapped one word per line. These selectors match that specificity to undo it
 * and let the grid do the columns instead.
 */
body.woocommerce-account .woocommerce .col2-set .col-1,
body.woocommerce-account .woocommerce .col2-set .col-2,
body.woocommerce-account .woocommerce-Address {
	inline-size: 100%;
	float: none;
	padding: 26px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	background: #fff;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-block-end: 12px;
}

body.woocommerce-account .woocommerce-Address-title .edit {
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: #3d2f2b;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
	color: #544843;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.25rem;
}

/* ---- forms (login, register, edit account, addresses) ---- */

body.woocommerce-account .woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
}

body.woocommerce-account .woocommerce form label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #3d2f2b;
}

body.woocommerce-account .woocommerce form .required {
	color: #a4262c;
	text-decoration: none;
}

body.woocommerce-account .woocommerce form input[type="text"],
body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="tel"],
body.woocommerce-account .woocommerce form input[type="password"],
body.woocommerce-account .woocommerce form select,
body.woocommerce-account .woocommerce form textarea,
body.woocommerce-account .woocommerce form .select2-selection {
	inline-size: 100%;
	min-block-size: 50px;
	padding: 13px 18px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	background: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.woocommerce-account .woocommerce form textarea {
	min-block-size: 120px;
}

body.woocommerce-account .woocommerce form input:focus-visible,
body.woocommerce-account .woocommerce form select:focus-visible,
body.woocommerce-account .woocommerce form textarea:focus-visible {
	outline: 2px solid var(--floomi-primary);
	outline-offset: 2px;
}

body.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

body.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme input {
	inline-size: auto;
	min-block-size: 0;
}

/* ---- buttons ---- */

body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button[type="submit"],
body.woocommerce-account .woocommerce input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 50px;
	padding-inline: 34px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button[type="submit"]:hover,
body.woocommerce-account .woocommerce input[type="submit"]:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

/* ---- logged out: centred login card ---- */

body.woocommerce-account:not(.logged-in) .woocommerce {
	max-inline-size: 520px;
}

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	margin: 0;
	padding: 34px 30px 36px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 14px;
	background: #fff;
}

body.woocommerce-account .woocommerce-form-login .button,
body.woocommerce-account .woocommerce-form-register .button {
	inline-size: 100%;
}

body.woocommerce-account .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 0.875rem;
	text-align: center;
}

/* ---- notices ---- */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	background: #faf5f0;
	list-style: none;
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.woocommerce-account .woocommerce-error {
	border-color: rgba(164, 38, 44, 0.3);
	background: #fdf3f3;
	color: #8a1f1f;
}

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

@media (max-width: 900px) {
	body.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	/* The nav becomes a horizontal scroller above the content. */
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		border-block-end: 0;
		border-inline-end: 1px solid rgba(0, 0, 0, 0.07);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		padding-inline: 18px;
	}
}

@media (max-width: 767px) {
	body.woocommerce-account .woocommerce {
		padding-block: 40px 60px;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
		padding: 12px 12px;
	}
}


/* ---- glow-checkout ---- */
/*
 * Classic WooCommerce checkout. Scoped to body.woocommerce-checkout. The markup, the
 * fields, the validation, the shipping calculation and the payment gateways are all
 * WooCommerce's own - no template override, no unhooked callback.
 */

body.woocommerce-checkout .woocommerce {
	max-inline-size: 1240px;
	margin-inline: auto;
	padding: 60px clamp(18px, 4vw, 40px) 90px;
}

/* ---- coupon / login prompts ---- */

body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-login-toggle {
	margin-block-end: 20px;
}

body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
	margin: 0 0 20px;
	padding: 15px 20px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	background: #faf5f0;
	list-style: none;
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.woocommerce-checkout .woocommerce-error {
	border-color: rgba(164, 38, 44, 0.3);
	background: #fdf3f3;
	color: #8a1f1f;
}

body.woocommerce-checkout .woocommerce-form-coupon,
body.woocommerce-checkout .woocommerce-form-login {
	margin: 0 0 26px;
	padding: 26px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 12px;
	background: #fff;
}

/* ---- two columns ---- */

body.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	/*
	 * `min-content 1fr`, not `auto auto`: the details column spans both rows, and with
	 * two auto rows the browser spreads its height across them — which pushed the order
	 * panel ~280px below its own heading. Pinning row 1 to the heading's own height and
	 * letting row 2 absorb the rest keeps them together.
	 */
	grid-template-rows: min-content 1fr;
	align-items: start;
	gap: 0 clamp(28px, 4vw, 56px);
}

/*
 * The details column has to span both rows explicitly. Without it, auto-placement puts
 * the heading in row 1 and the review panel in row 2 — and because row 1's height is set
 * by the tall details column, the panel ended up starting ~1300px further down the page
 * instead of sitting beside it.
 */
body.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-inline-size: 0;
}

body.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
}

body.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

body.woocommerce-checkout form.checkout #order_review_heading {
	margin: 0;
	padding: 24px 30px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-block-end: 0;
	border-start-start-radius: 12px;
	border-start-end-radius: 12px;
	background: #efe8e1;
	font-family: var(--floomi-font-heading);
	font-size: 1.375rem;
	font-weight: 500;
	color: #3d2f2b;
}

body.woocommerce-checkout form.checkout #order_review {
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-end-start-radius: 12px;
	border-end-end-radius: 12px;
	background: #f7f1eb;
	overflow: hidden;
}

/*
 * Billing and shipping stack instead of sitting in WooCommerce's floated 48% columns -
 * the left column is already only ~60% of the page, and two 48% sub-columns inside it
 * squeeze every field label onto its own line.
 */
body.woocommerce-checkout #customer_details .col2-set .col-1,
body.woocommerce-checkout #customer_details .col2-set .col-2,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	inline-size: 100%;
	float: none;
	margin-block-end: 26px;
}

/* ---- headings ---- */

body.woocommerce-checkout form.checkout h3,
body.woocommerce-checkout #customer_details h3 {
	margin: 0 0 18px;
	font-family: var(--floomi-font-heading);
	font-size: 1.375rem;
	font-weight: 400;
	color: #3d2f2b;
}

/* ---- fields ---- */

body.woocommerce-checkout .woocommerce form .form-row,
body.woocommerce-checkout form .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
}

body.woocommerce-checkout form .form-row label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #3d2f2b;
}

body.woocommerce-checkout form .required {
	color: #a4262c;
	text-decoration: none;
}

body.woocommerce-checkout form .input-text,
body.woocommerce-checkout form input[type="text"],
body.woocommerce-checkout form input[type="email"],
body.woocommerce-checkout form input[type="tel"],
body.woocommerce-checkout form input[type="password"],
body.woocommerce-checkout form select,
body.woocommerce-checkout form textarea,
body.woocommerce-checkout form .select2-selection {
	inline-size: 100%;
	min-block-size: 50px;
	padding: 13px 18px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	background: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.9375rem;
	color: #3d2f2b;
}

body.woocommerce-checkout form textarea {
	min-block-size: 110px;
}

body.woocommerce-checkout form .input-text:focus-visible,
body.woocommerce-checkout form select:focus-visible,
body.woocommerce-checkout form textarea:focus-visible {
	outline: 2px solid var(--floomi-primary);
	outline-offset: 2px;
}

/* Select2 renders its own box; match the plain inputs. */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	block-size: 50px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 10px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px;
	padding-inline: 18px;
	color: #3d2f2b;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	block-size: 48px;
}

/* Checkbox rows must stay horizontal. */
body.woocommerce-checkout form .form-row.woocommerce-validated .input-text,
body.woocommerce-checkout form .form-row .checkbox,
body.woocommerce-checkout form .woocommerce-form__label-for-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

body.woocommerce-checkout form .woocommerce-form__input-checkbox {
	inline-size: auto;
	min-block-size: 0;
	margin: 0;
}

/* ---- order review table ---- */

body.woocommerce-checkout #order_review table.shop_table {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
	padding: 16px 30px;
	border: 0;
	border-block-end: 1px solid rgba(0, 0, 0, 0.07);
	text-align: start;
	font-size: 0.9375rem;
	vertical-align: top;
}

body.woocommerce-checkout #order_review table.shop_table thead th {
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #3d2f2b;
}

body.woocommerce-checkout #order_review .cart_item .product-name {
	color: #3d2f2b;
}

body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td {
	border-block-end: 0;
	font-family: var(--floomi-font-heading);
	font-size: 1.25rem;
	color: #3d2f2b;
}

body.woocommerce-checkout #order_review .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- payment ---- */

body.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

body.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 22px 30px;
	border-block-start: 1px solid rgba(0, 0, 0, 0.07);
	list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 12px;
	font-size: 0.9375rem;
}

body.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-block-end: 0;
}

body.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	background: #efe8e1;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #544843;
}

body.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

body.woocommerce-checkout #payment .form-row.place-order {
	margin: 0;
	padding: 22px 30px 30px;
}

body.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	padding: 0 30px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #776a63;
}

/* ---- buttons ---- */

body.woocommerce-checkout .woocommerce .button,
body.woocommerce-checkout button.button,
body.woocommerce-checkout input[type="submit"],
body.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 54px;
	padding-inline: 34px;
	border: 1px solid #3d2f2b;
	border-radius: 999px;
	background: #3d2f2b;
	color: #fff;
	font-family: var(--floomi-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
}

body.woocommerce-checkout #place_order {
	inline-size: 100%;
}

body.woocommerce-checkout .woocommerce .button:hover,
body.woocommerce-checkout #place_order:hover {
	background: var(--floomi-primary);
	border-color: var(--floomi-primary);
}

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

body.woocommerce-checkout .cart-empty,
body.woocommerce-checkout .woocommerce-notice--info {
	padding: 60px 20px;
	text-align: center;
	font-family: var(--floomi-font-heading);
	font-size: 1.375rem;
	color: #3d2f2b;
}

@media (max-width: 991px) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	body.woocommerce-checkout form.checkout #customer_details,
	body.woocommerce-checkout form.checkout #order_review_heading,
	body.woocommerce-checkout form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	body.woocommerce-checkout form.checkout #order_review_heading {
		margin-block-start: 30px;
	}
}

@media (max-width: 767px) {
	body.woocommerce-checkout .woocommerce {
		padding-block: 40px 60px;
	}

	/*
	 * WooCommerce pairs first/last name into 50% columns. At 375px that leaves ~160px per
	 * field, so they go full width instead.
	 */
	body.woocommerce-checkout form .form-row-first,
	body.woocommerce-checkout form .form-row-last {
		inline-size: 100%;
		float: none;
	}

	body.woocommerce-checkout #order_review table.shop_table th,
	body.woocommerce-checkout #order_review table.shop_table td,
	body.woocommerce-checkout #payment ul.payment_methods,
	body.woocommerce-checkout #payment .form-row.place-order,
	body.woocommerce-checkout form.checkout #order_review_heading {
		padding-inline: 20px;
	}
}

/* ---- footer touch targets ---- */
/*
 * The footer social circles are 38px, set a few sections above with the same three-class
 * selector — this matches that specificity so the mobile size actually wins.
 */
@media (max-width: 1024px) {
	.glow-footer-inner .glow-footer-social .elementor-social-icon {
		inline-size: 44px;
		block-size: 44px;
	}
}

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

/*
 * Footer link columns sit two per row on tablets and phones instead of one long stack.
 * 49% rather than 50% leaves room for the gap without wrapping.
 */
@media (max-width: 1023px) {
	/*
	 * The link columns live in a flex *column* container, so widening the menu widget
	 * alone did nothing - they still stacked. The container has to become a wrapping row
	 * first, and the 49% belongs on the column, not on the menu inside it.
	 *
	 * --flex-direction is what Elementor's container CSS reads, and the body prefix beats
	 * the per-element rule Elementor prints inline.
	 */
	body .glow-footer-main .e-con-inner {
		--flex-direction: row;
		/* Elementor reads --flex-wrap; setting only the property left the row unwrapped
		   and all three columns overflowed the container at tablet width. */
		--flex-wrap: wrap;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		/*
		 * 2% column gap so two 49% columns and the gap add up to exactly 100%. Elementor's
		 * default 20px gap pushed 49+49 over the container width and they wrapped back to
		 * one per row.
		 */
		gap: 26px 2%;
	}

	body .glow-footer-main .glow-footer-column {
		--width: 49%;
		inline-size: 49%;
		flex: 0 0 49%;
	}

	/* The brand block keeps the full width above them. */
	body .glow-footer-main .glow-footer-brand {
		--width: 100%;
		inline-size: 100%;
		flex: 0 0 100%;
	}
}

/* ---------------------------------------------- tighter vertical rhythm */

/*
 * The mobile pages carried desktop-sized vertical gaps, which on a phone reads as large
 * empty bands between sections. These are the section-level paddings only - nothing
 * horizontal and no font sizes change.
 */
@media (max-width: 767px) {
	.glow-single-product .glow-product-tabs-wrap {
		margin-block-start: 34px;
		padding-block-start: 28px;
	}

	.glow-single-product .glow-related-wrap {
		margin-block-start: 34px;
	}

	.glow-single-product .glow-product-divider {
		margin-block: 12px;
	}

	.glow-single-product .glow-product-title h1,
	.glow-single-product .glow-product-title .product_title {
		margin-block-end: 8px;
	}

	.glow-single-product .glow-product-short-description,
	.glow-single-product .glow-product-short-description p {
		margin-block-end: 14px;
	}

	.glow-single-product .glow-product-actions form.cart {
		margin-block-end: 16px;
	}

	.glow-single-product .glow-product-meta .product_meta {
		padding-block-start: 14px;
	}

	/*
	 * Elementor spaces stacked widgets with --widgets-spacing (20px by default). Inside
	 * the product summary that adds up to roughly 120px of blank bands on a phone, so it
	 * is halved here. Only this container is affected.
	 */
	body .glow-single-product .glow-product-summary {
		--widgets-spacing: 10px;
		--widgets-spacing-row: 10px;
	}

	.glow-single-product .glow-product-rating {
		margin-block: 4px 0;
	}

	.glow-shop-archive .glow-shop-layout {
		padding-block: 24px 50px;
	}

	.glow-shop-archive .woocommerce-pagination {
		margin-block-start: 34px;
	}

	.floomi-page-hero {
		min-block-size: 200px;
	}
}

/*
 * Elementor still prints a wrapper for a widget with nothing to show - an empty short
 * description or a rating on a product with no reviews - and each one leaves a margin
 * behind. Collapsing them is what closes the stray gaps on the product page.
 */
.glow-single-product .elementor-widget:has(> .elementor-widget-container:empty),
.glow-single-product .elementor-widget:has(> .elementor-widget-container > :empty:only-child) {
	display: none;
}

/* ---- mobile vertical rhythm ---- */
/*
 * Phones only. Elementor's top-level sections keep their desktop block padding (often
 * 60-90px), which stacks into large empty bands on a narrow screen. This caps the block
 * padding on the page's own sections without touching horizontal padding, font sizes, the
 * header or the footer (each of which has its own rules). !important is unavoidable
 * because the values come from per-element Elementor CSS.
 *
 * Excludes the shared hero and the shop hero, which are sized deliberately.
 */
@media (max-width: 767px) {
	.site-main .elementor > .e-con.e-parent > .e-con-inner,
	.elementor-location-single .e-con.e-parent > .e-con-inner {
		padding-block: 30px !important;
	}

	/*
	 * The homepage sections sit directly under the Elementor wrapper. The :not() guards
	 * keep this off the header and footer locations, which set their own padding - without
	 * them the header grew from 72px to 89px.
	 */
	body:not(.woocommerce-account) .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element.e-con.e-parent > .e-con-inner {
		padding-block: clamp(20px, 6vw, 34px) !important;
	}

	/* Heroes keep their own height. */
	.floomi-page-hero,
	.glow-shop-hero,
	.floomi-hero {
		padding-block: 0 !important;
	}

	.glow-shop-hero {
		min-block-size: 190px;
	}

	/* Shop archive: trim its authored 30/100 block padding. */
	body.glow-shop-archive .glow-shop-layout > .e-con-inner {
		padding-block: 24px 50px !important;
	}

	.glow-shop-archive .glow-shop-toolbar {
		margin-block-end: 20px;
	}

	.glow-shop-archive .woocommerce-pagination {
		margin-block-start: 28px;
	}

	/* My Account and checkout: trim the 40/60 and 40/90 block padding. */
	body.woocommerce-account .woocommerce,
	body.woocommerce-checkout .woocommerce {
		padding-block: 28px 50px;
	}

	/* Cart page: the layout carried 100px bottom padding. */
	body.floomi-cart-page .woocommerce {
		padding-block-end: 50px;
	}

	/* Contact / About / FAQ Elementor pages already cap via the section rule above; the
	   page wrapper only needs its own top padding trimmed. */
	body.glow-has-page-hero .entry-content > .elementor > .e-con.e-parent:first-child > .e-con-inner {
		padding-block-start: 28px !important;
	}
}

/* ---- woocommerce brand overrides ---- */
/*
 * Elementor Pro's WooCommerce widgets and WooCommerce core ship their own purple/olive
 * defaults via CSS variables and per-element rules that beat the scoped brand rules. These
 * body-prefixed selectors re-assert the blush palette on the elements that were leaking the
 * old colours (add-to-cart, price, single-product tabs, checkout/account buttons).
 */

/* Neutralise WooCommerce's colour variables so anything reading them turns brand-brown. */
body.woocommerce-page,
body.woocommerce,
body .woocommerce {
	--wc-primary: #3d2f2b;
	--wc-primary-text: #ffffff;
	--wc-secondary: #f6efe9;
	--wc-secondary-text: #3d2f2b;
	--wc-highlight: #a8707a;
	--wc-highligh-text: #ffffff;
}

/* Add to cart (single + loop) */
body.glow-product-page .glow-single-product .single_add_to_cart_button,
body .woocommerce div.product form.cart .button,
body.glow-shop-archive ul.products li.product .button {
	background-color: #3d2f2b;
	color: #fff;
}

body.glow-product-page .glow-single-product .single_add_to_cart_button:hover,
body .woocommerce div.product form.cart .button:hover {
	background-color: #a8707a;
	border-color: #a8707a;
}

/* Price colour on the single product */
body.glow-product-page .glow-single-product .glow-product-price-row .price,
body.glow-product-page .glow-single-product .glow-product-price-row .price ins,
body.glow-product-page .glow-single-product .glow-product-price-row .price .amount {
	color: #a8707a;
}

body.glow-product-page .glow-single-product .glow-product-price-row .price del,
body.glow-product-page .glow-single-product .glow-product-price-row .price del .amount {
	color: #9c8f8a;
}

/* Buy Now shares WooCommerce's `.button` class, which paints it the WC secondary grey;
   re-assert the rose. */
body.glow-product-page .glow-single-product .glow-product-actions .glow-product-buy-now,
body.glow-product-page .glow-single-product .button.glow-product-buy-now {
	background-color: #a8707a;
	border-color: #a8707a;
	color: #fff;
}

body.glow-product-page .glow-single-product .glow-product-buy-now:hover {
	background-color: #3d2f2b;
	border-color: #3d2f2b;
}

/* Active data tab. Elementor Pro's tabs widget colours the active tab per-element, so the
   colour is forced here. */
body.glow-product-page .glow-single-product .glow-product-tabs ul.tabs li.active a {
	color: #3d2f2b !important;
	border-block-end-color: #3d2f2b !important;
}

/* Checkout / account submit buttons that read --wc-primary */
body.woocommerce-checkout #place_order,
body.woocommerce-account .woocommerce button[type="submit"],
body.woocommerce-account .woocommerce .button {
	background-color: #3d2f2b;
	color: #fff;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-account .woocommerce button[type="submit"]:hover,
body.woocommerce-account .woocommerce .button:hover {
	background-color: #a8707a;
	border-color: #a8707a;
}

/* ---- single product mobile whitespace ---- */
/*
 * On phones the product page carried several tall empty bands: the divider widget's own
 * gap (~41px for a 1px line), the gallery-to-summary gap, and the large space above the
 * tabs and related products. These trim them without touching the desktop rhythm.
 */
@media (max-width: 767px) {
	/* The divider widget's internal gap — the biggest single band. Elementor writes
	   the Gap control as padding on .elementor-divider at equal specificity but loads
	   later, so this needs !important to win. */
	.glow-single-product .glow-product-divider {
		margin-block: 6px;
	}

	body.glow-product-page .glow-single-product .glow-product-divider .elementor-divider {
		padding-block: 3px !important;
	}

	/* Gallery → summary. */
	body.glow-product-page .glow-single-product .glow-product-main {
		--gap: 18px;
		gap: 18px;
	}

	/* Tabs block: was margin 50 + padding 40 = 90px above. */
	.glow-single-product .glow-product-tabs-wrap {
		margin-block-start: 20px;
		padding-block-start: 18px;
	}

	.glow-single-product .glow-product-tabs .wc-tabs,
	.glow-single-product .glow-product-tabs ul.tabs {
		margin-block-end: 22px;
	}

	/* Related products. */
	.glow-single-product .glow-related-wrap {
		margin-block-start: 28px;
	}

	.glow-related-products > h2,
	.glow-single-product .glow-related-products h2 {
		margin-block-end: 22px;
	}

	/* Trim the wrapper's own top/bottom padding on the product container. The generic
	   .elementor-location-single .e-con.e-parent rule above forces 30px !important at
	   0,4,0; this needs to out-specify it (0,4,1). */
	body.glow-product-page .elementor-location-single .glow-single-product > .e-con-inner {
		padding-block: 14px 36px !important;
	}
}