/* =========================================================================
   EMPIRE TECH — product page
   Assumes the global tokens (--emp-brown, --emp-sand, --emp-tan …) are
   already loaded from emptech-tokens.css.
   ========================================================================= */

.ga-emp {
	--emp-font:       "Almoni", heebo, system-ui, sans-serif;

	--emp-brown:      #786452;
	--emp-sand:       #cec5bc;
	--emp-tan:        #deb998;
	--emp-tan-67:     rgba(222, 185, 152, .67);
	--emp-white:      #fff;
	--emp-shadow:     0 4px 4px rgba(0, 0, 0, .25);
	--emp-ease:       cubic-bezier(.22, .61, .36, 1);
	--emp-wrap:       min(1636px, 92vw);

	box-sizing: border-box;
	position: relative;
	width: 100%;
	font-family: var(--emp-font);
	background: #FFFBF8;
}

/* Headings and buttons inherit rather than falling back to theme defaults. */
.ga-emp h1, .ga-emp h2, .ga-emp h3,
.ga-emp p,  .ga-emp li, .ga-emp a,
.ga-emp span, .ga-emp button {
	font-family: inherit;
}
.ga-emp *,
.ga-emp *::before,
.ga-emp *::after { box-sizing: inherit; }

.ga-emp img,
.ga-emp svg { max-width: 100%; }

/* =========================================================================
   Price + add to cart
   From Figma node 131:801 — brown fill, 1px same-colour border, r13,
   Almoni Neue DL Medium 46.296px white. Component box 247x68.
   ========================================================================= */

.ga-emp-price {
	font-family: var(--emp-font-price, var(--emp-font));
	color: #000;
	font-size: clamp(15px, 2.4113vw, 46px);   /* 46.296 / 1920 */
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}
.ga-emp-price del { opacity: .5; font-size: .7em; margin-inline-end: .35em; }
.ga-emp-price ins { text-decoration: none; }

.ga-emp-atc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	background: var(--emp-brown);
	border: 1px solid var(--emp-brown);
	border-radius: clamp(7px, .677vw, 13px);   /* 13 / 1920 */
	color: var(--emp-white);
	font-size: clamp(14px, 2.4113vw, 46px);
	font-weight: 500;
	line-height: 1;
	min-height: clamp(32px, 3.542vw, 68px);    /* 68 / 1920 */
	padding-inline: clamp(10px, 1.25vw, 24px);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s var(--emp-ease), transform .25s var(--emp-ease);
	border-radius: 16px;
	border: 4px solid #FFF;
	/*background: rgba(222, 185, 152, 0.67);*/
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) !important;
	margin: 0 !important;
}
.ga-emp-atc:hover,
.ga-emp-atc:focus-visible { background: #8b7561; border-color: #8b7561; color: var(--emp-white); transform: translateY(-2px); }
.ga-emp-atc:focus-visible { outline: 2px solid var(--emp-white); outline-offset: 3px; }
.ga-emp-atc.is-oos { background: #b9b1a8; border-color: #b9b1a8; cursor: not-allowed; transform: none; }

/* Section-level CTA — Figma Frame 23, 363x100 */
.ga-emp-atc--wide {
	font-size: clamp(18px, 3.2vw, 62px);
	min-width: clamp(200px, 18.93vw, 364px);
	min-height: clamp(48px, 5.21vw, 100px);
}
.ga-emp-atc__icon { width: 1.1em; height: 1.1em; flex: none; }

/* Woo AJAX states */
.ga-emp-atc.loading { opacity: .6; pointer-events: none; }
.ga-emp-atc.added::after { content: "\2713"; margin-inline-start: .4em; }
.ga-emp-atc + .added_to_cart { display: none; }

/* =========================================================================
   Hero
   Fixed-proportion composition. All percentages are lifted from the Figma
   frame (1920 x 1082):
     card     x103  y352  621x505   rgba(255,255,255,.75)  r27
       ├ wordmark  x184.8 y407  442x31
       ├ EMP mark  x323   y508  181x190
       └ buy row   y761   (ATC 247x68 @ x128 · price @ x521)
     warranty x1535 y763  371x304
     wordmark x767  y849  803x56
     tagline  x627  y915  943x94   Almoni Black 32px
   ========================================================================= */

.ga-emp-hero {
	position: relative;
	isolation: isolate;
	height: 100vh;
	height: 100svh;          /* ignores mobile browser chrome */
	min-height: 960px;
	max-height: 1082px;      /* never taller than the design frame */
	overflow: hidden;
}

.ga-emp-hero__media { position: absolute; inset: 0; }
.ga-emp-hero__img,
.ga-emp-hero__video { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.ga-emp-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(183deg, rgba(120, 100, 82, 0) 55%, var(--emp-sand) 99.5%);
}

.ga-emp-hero__inner { position: absolute; inset: 0; z-index: 1; }

/* --- buy card --- */
.ga-emp-hero__card {
	position: absolute;
	left: 5.365%;          /* 103 / 1920  */
	top: 18.532%;          /* raised from the design's 32.532% */
	width: 32.344%;        /* 621 / 1920 */
	aspect-ratio: 621 / 505;
	max-height: 62%;
	/* wordmark pinned top, buy row pinned bottom, emblem absorbs the slack.
	   Rows must STRETCH — centring them leaves an indefinite height and the
	   images inside can't resolve their max-height, so they overflow. */
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	align-items: stretch;
	justify-items: stretch;
	background: rgba(255, 255, 255, .75);
	border-radius: clamp(12px, 1.406vw, 27px);
	/* 55 / 25 / 28 px at a 1920 canvas. NOT percentages: padding-% on an
	   absolutely positioned box resolves against the containing block's
	   width (the whole hero), not the card. */
	padding: 2.865vw 1.302vw 1.458vw;
}

/* Emblem and product image share one grid cell: emblem behind, shot on top.
   The track must be minmax(0,1fr) — an auto track sizes to the image's
   natural height, leaving max-height:100% with nothing to resolve against.
   Selectors are doubled up to outrank `.ga-emp img { max-width:100% }`. */
.ga-emp-hero__mark {
	margin: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
}
.ga-emp-hero__mark > img { grid-area: 1 / 1; }

.ga-emp-hero__mark .ga-emp-hero__mark-bg {
	width: 31.7%;            /* 181 against the 566px content box */
	max-width: 31.7%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 1px 3px rgba(120, 100, 82, .35));
}

.ga-emp-hero__mark .ga-emp-hero__mark-shot {
	z-index: 1;
	width: auto;
	height: auto;
	max-width: 70%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(120, 100, 82, .3));
}

.ga-emp-hero__buy {
	width: 100%;
	justify-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(8px, 1vw, 20px);
}
.ga-emp-hero__buy .ga-emp-atc { min-width: 43.3%; }   /* 247 / 571 */

/* --- foot: warranty + wordmark/tagline, one row hugging the right edge ---
   RTL puts the first flex child on the right, so warranty leads the DOM and
   sits outermost, matching the Figma (warranty x1535, lead x627).
   Widths are vw so they stay tied to the 1920 canvas, not the container. */
.ga-emp-hero__foot {
	position: absolute;
	inset-inline-start: 0.729%; /* RTL: 14px clear of the RIGHT frame edge */
	inset-inline-end: auto;
	bottom: 1.386%;             /* 15px clear of the hero foot */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
	max-width: 94%;
}

.ga-emp-hero__warranty {
	flex: 0 0 auto;
	width: 12.32vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3em;
	color: var(--emp-white);
	font-size: clamp(12px, 1.667vw, 32px);
	line-height: 1.15;
	text-align: center;
}
.ga-emp-hero__warranty-icon { width: 100%; height: auto; }

.ga-emp-hero__lead {
	flex: 0 1 auto;
	width: 53.11vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;    /* RTL: flush right */
	gap: .55vw;
	margin-bottom: 0;
	color: var(--emp-white);
	text-align: start;
}
.ga-emp-hero__lead .ga-emp-logotype--hero { text-align: start; }
.ga-emp-hero__tagline {
	margin: 0;
	font-size: clamp(18px, 2.667vw, 36px);
	font-weight: 900;
	line-height: 1.2;
}

/* --- logotype ---
   Figma wordmarks are tight crops: hero 803x56 (86:158), card 442x31 (86:176).
   max-height stops a padded/square export from dominating the layout — but a
   correctly cropped asset is what actually makes these land. */
.ga-emp-logotype { display: block; line-height: 0; width: 100%; text-align: center; }
.ga-emp-logotype__img { width: 100%; height: auto; }

.ga-emp-logotype--hero .ga-emp-logotype__img {
	width: auto;
	max-height: 3.6vw;       /* design height 56.5 = 2.94vw, plus tolerance */
	height: auto;
	object-fit: contain;
}
.ga-emp-logotype--card .ga-emp-logotype__img {
	width: 77.4%;            /* 442 of the 571 card box */
	max-height: 3.2vw;       /* design height 31 = 1.62vw, plus tolerance */
	height: auto;
	object-fit: contain;
}

/* No dark wordmark uploaded yet — darken the white one so it reads on the card. */
.ga-emp-logotype.is-inverted .ga-emp-logotype__img { filter: brightness(0) opacity(.68); }

.ga-emp-logotype--text {
	color: currentColor;
	font-size: clamp(22px, 2.9vw, 56px);
	letter-spacing: .06em;
	line-height: 1.1;
	text-transform: uppercase;
	width: auto;
}

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

/* --- mobile: normal flow --- */
@media (max-width: 767px) {
	.ga-emp-hero { height: auto; max-height: none; min-height: 0; }
	.ga-emp-hero__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 90px 16px 24px;
	}
	.ga-emp-hero__card,
	.ga-emp-hero__foot,
	.ga-emp-hero__warranty,
	.ga-emp-hero__lead {
		position: static;
		left: auto; top: auto; bottom: auto;
		inset-inline-start: auto; inset-inline-end: auto;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		max-height: none;
		transform: none;
	}
	.ga-emp-hero__inner { padding: 156px 14px 20px; gap: 14px; }
	.ga-emp-hero__card { padding: 16px 14px !important; gap: 12px; }
	.ga-emp-logotype--hero .ga-emp-logotype__img { width: 100%; max-height: 34px; }
	.ga-emp-logotype--card .ga-emp-logotype__img { width: 82%;  max-height: 26px; }
	.ga-emp-hero__tagline { font-size: 13px; line-height: 1.4; }
	.ga-emp-hero__warranty { font-size: 12px; }
	.ga-emp-hero__buy .ga-emp-atc { min-width: 46%; }
	.ga-emp-hero__mark { height: auto; min-height: 30vw; }
	.ga-emp-hero__mark .ga-emp-hero__mark-bg { width: 42%; max-width: 42%; }
	.ga-emp-hero__mark .ga-emp-hero__mark-shot { max-width: 52%; }
	.ga-emp-hero__foot { display: flex; flex-direction: row; gap: 14px; padding: 0; margin: 0 auto; }
	.ga-emp-hero__warranty { width: 30%; align-self: flex-end; padding: 0; }
	.ga-emp-hero__lead { order: -1; padding: 0; margin-bottom: 0; }
}

/* =========================================================================
   Benefits — flip circles
   Figma 103:60 @1920: title FbLiddar Bold 115.014px #786452;
   circles 358.118 dia, fill #786452, 68.13 gap; back text
   Almoni DL AAA Bold 34.657px white.
   ========================================================================= */

.ga-emp-benefits { padding: clamp(32px, 5vw, 96px) 0; text-align: center; }

.ga-emp-benefits__title {
	margin: 0 auto clamp(18px, 3.18vw, 61px);
	color: var(--emp-brown);
	font-size: clamp(26px, 5.99vw, 115px);   /* 115.014 / 1920 */
	font-weight: 700;
	line-height: 1.1;
	max-width: var(--emp-wrap);
	font-family: 'FbLiddar' !important;
}

.ga-emp-benefits__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: var(--emp-wrap);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 3.548vw, 68px);         /* 68.13 / 1920 */
}

.ga-emp-benefits__item {
	aspect-ratio: 1;
	perspective: 1200px;
}

/* The rotating shell. A <button> when there are two faces, a <span> when not.
   Child selector is deliberate: theme button resets (display:inline-block,
   shrink-to-fit width, white-space:nowrap) outrank a lone class. The nowrap
   is the nasty one — white-space inherits, so the back copy rendered as a
   single 880px line and blew out the page horizontally. */
.ga-emp-benefits__item > .ga-emp-benefits__flip {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	font: inherit;
	color: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
	transform-style: preserve-3d;
	transition: transform .65s var(--emp-ease);
	background-color: unset !important;
}
.ga-emp-benefits__item > .ga-emp-benefits__flip:hover { background-color: unset !important; }
.ga-emp-benefits__item > button.ga-emp-benefits__flip { cursor: pointer; }

.ga-emp-benefits__item:hover button.ga-emp-benefits__flip,
button.ga-emp-benefits__flip:focus-visible,
button.ga-emp-benefits__flip.is-flipped {
	transform: rotateY(180deg);
}

.ga-emp-benefits__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16%;
	border-radius: 179.059px;
	border: 3px solid #786452;
	background: rgba(120, 100, 82, 0.00);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	color: #786452;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
/* Un-mirror the back so its text reads the right way round once flipped. */
.ga-emp-benefits__face--back {
	transform: rotateY(180deg);
	border-radius: 358.118px;
	background: #786452;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	color: #fff;
}

.ga-emp-benefits__heading {
	font-size: clamp(15px, 2.1vw, 40px);
	font-weight: 700;
	line-height: 1.15;
}
.ga-emp-benefits__text {
	font-size: clamp(11px, 1.805vw, 35px);   /* 34.657 / 1920 */
	font-weight: 700;
	line-height: 1.2;
	max-width: 100%;
}

button.ga-emp-benefits__flip:focus-visible {
	outline: 3px solid var(--emp-tan);
	outline-offset: 6px;
	border-radius: 50%;
}

/* --- tablet / mobile: keep the circles and the flip. Tap fires the same
       .is-flipped toggle the JS binds, so touch works without :hover. --- */
@media (max-width: 1024px) {
	.ga-emp-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ga-emp-benefits__item { aspect-ratio: 1; perspective: 900px; }

	.ga-emp-benefits__item > .ga-emp-benefits__flip {
		display: block;
		min-height: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		cursor: pointer;
		transform-style: preserve-3d;
	}
	.ga-emp-benefits__item:hover button.ga-emp-benefits__flip,
	button.ga-emp-benefits__flip:focus-visible,
	button.ga-emp-benefits__flip.is-flipped { transform: rotateY(180deg); }

	/* Tighter padding so the longer back copy still fits a ~170px circle. */
	.ga-emp-benefits__face {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		padding: 11%;
		border-radius: 50%;
		border: 2px solid #786452;
		background: transparent;
		color: #786452;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	.ga-emp-benefits__face--back {
		transform: rotateY(180deg);
		border-radius: 50%;
		background: #786452;
		color: #fff;
	}

	.ga-emp-benefits__heading { font-size: 15px; line-height: 1.15; }
	.ga-emp-benefits__text    { font-size: 11.5px; line-height: 1.2; font-weight: 400; }
}

/* Reduced motion: cross-fade instead of a 3D rotation. */
@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {
	.ga-emp-benefits__item > .ga-emp-benefits__flip { transition: none; }
	.ga-emp-benefits__item:hover button.ga-emp-benefits__flip,
	button.ga-emp-benefits__flip:focus-visible,
	button.ga-emp-benefits__flip.is-flipped { transform: none; }
	.ga-emp-benefits__face { transition: opacity .2s linear; backface-visibility: visible; }
	.ga-emp-benefits__face--back { transform: none; opacity: 0; }
	.ga-emp-benefits__item:hover .ga-emp-benefits__face--back,
	button.ga-emp-benefits__flip:focus-visible .ga-emp-benefits__face--back,
	button.ga-emp-benefits__flip.is-flipped .ga-emp-benefits__face--back { opacity: 1; }
}

/* =========================================================================
   Features
   ========================================================================= */

.ga-emp-features { padding: clamp(32px, 5vw, 96px) 0; }
.ga-emp-features__grid {
	position: relative;
	width: var(--emp-wrap);
	margin-inline: auto;
}

.ga-emp-features__item { text-align: center; }
.ga-emp-features__icon { display: block; margin: 0 auto clamp(8px, .8vw, 16px); }
.ga-emp-features__icon img { width: clamp(34px, 3.9vw, 76px); height: auto; }
.ga-emp-features__heading {
	margin: 0 0 .4em;
	color: var(--emp-brown);
	font-size: clamp(14px, 1.56vw, 30px);
	line-height: 1.2;
}
.ga-emp-features__text {
	margin: 0;
	color: var(--emp-brown);
	font-size: clamp(11px, 1.04vw, 20px);
	line-height: 1.5;
}

.ga-emp-features__cta { margin-top: clamp(20px, 3vw, 56px); text-align: center; }

/* --- radial (desktop, exactly 4 features + centre image) --- */
@media (min-width: 1025px) {
	.ga-emp-features.is-radial .ga-emp-features__grid {
		display: grid;
		grid-template-columns: minmax(0, 402fr) minmax(0, 420fr) minmax(0, 402fr);
		grid-template-rows: auto auto;
		align-items: center;
		gap: clamp(24px, 2.6vw, 50px) clamp(16px, 2vw, 38px);
	}
	.ga-emp-features.is-radial .ga-emp-features__media {
		grid-column: 2;
		grid-row: 1 / 3;
		margin: 0;
		text-align: center;
	}
	/* RTL: column 1 is the right-hand side */
	.ga-emp-features.is-radial .ga-emp-features__item:nth-child(2) { grid-area: 1 / 1; }
	.ga-emp-features.is-radial .ga-emp-features__item:nth-child(3) { grid-area: 1 / 3; }
	.ga-emp-features.is-radial .ga-emp-features__item:nth-child(4) { grid-area: 2 / 1; }
	.ga-emp-features.is-radial .ga-emp-features__item:nth-child(5) { grid-area: 2 / 3; }

	.ga-emp-features__lines {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		color: var(--emp-brown);
		opacity: .55;
		pointer-events: none;
	}
}

/* --- plain grid fallback + mobile --- */
.ga-emp-features.is-grid .ga-emp-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 48px);
}
.ga-emp-features.is-grid .ga-emp-features__media { grid-column: 1 / -1; margin: 0 0 clamp(16px, 2vw, 32px); text-align: center; }
.ga-emp-features.is-grid .ga-emp-features__lines { display: none; }

/* Desktop diagram export. When present it replaces the CSS-built radial
   above 1025px; the repeater still drives the mobile slider, so the copy
   lives in one place either way. */
.ga-emp-features__still { display: none; margin: 0; }
.ga-emp-features__still img { display: block; width: 80%; height: auto; margin: 0 auto; }

@media (min-width: 1025px) {
	.ga-emp-features.has-still .ga-emp-features__still { display: block; }
	.ga-emp-features.has-still .ga-emp-features__grid  { display: none; }
}
@media (max-width: 1024px) {
	.ga-emp-features.has-still .ga-emp-features__still { display: none; }
}

/* Nav arrows: slider-only, so hidden until the breakpoint. */
.ga-emp-features__nav { display: none !important; }

/* --- mobile: one feature at a time, swipe or arrows --- */
@media (max-width: 1024px) {
	.ga-emp-features { position: relative; }
	.ga-emp-features__lines { display: none; }

	.ga-emp-features .ga-emp-features__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		width: 100%;
		padding-inline: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.ga-emp-features .ga-emp-features__grid::-webkit-scrollbar { display: none; }

	.ga-emp-features .ga-emp-features__media,
	.ga-emp-features .ga-emp-features__item {
		flex: 0 0 100%;
		min-width: 0;
		margin: 0;
		scroll-snap-align: center;
	}
	.ga-emp-features .ga-emp-features__media { order: -1; text-align: center; }
	.ga-emp-features .ga-emp-features__media img { max-height: 46vw; width: auto; }

	.ga-emp-features .ga-emp-features__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 20px 18px;
		min-height: 190px;
	}
	.ga-emp-features__heading { font-size: 18px; }
	.ga-emp-features__text    { font-size: 14px; }

	.ga-emp-features__nav {
		display: grid !important;
		place-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, .9);
		border: 0;
		border-radius: 50%;
		box-shadow: var(--emp-shadow);
		color: var(--emp-brown);
		cursor: pointer;
		z-index: 2;
		padding: 0;
	}
	.ga-emp-features__nav svg { width: 20px; height: 20px; }
	.ga-emp-features__nav[data-dir="prev"] { inset-inline-start: 4px; }
	.ga-emp-features__nav[data-dir="next"] { inset-inline-end: 4px; }
	.ga-emp-features__nav[hidden] { display: none; }
}

/* =========================================================================
   Gallery
   ========================================================================= */

.ga-emp-gallery { padding: clamp(24px, 4vw, 76px) 0; position: relative; }
.ga-emp-gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: clamp(12px, 3.4vw, 65px);
	width: var(--emp-wrap);
	margin-inline: auto;
}
.ga-emp-gallery__slide { margin: 0; }
.ga-emp-gallery__slide img {
	width: 100%;
	aspect-ratio: 499 / 608;
	object-fit: cover;
	border-radius: clamp(10px, 1vw, 20px);
	display: block;
}
.ga-emp-gallery__nav { display: none !important; }

@media (max-width: 1024px) {
	.ga-emp-gallery__track {
		grid-auto-columns: 72%;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--emp-pad, 14px);
		padding-inline: 14px;
		width: 100%;
		scrollbar-width: none;
	}
	.ga-emp-gallery__track::-webkit-scrollbar { display: none; }
	.ga-emp-gallery__slide { scroll-snap-align: center; }

	.ga-emp-gallery__nav {
		display: grid !important;
		place-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, .85);
		border: 0;
		border-radius: 50%;
		box-shadow: var(--emp-shadow);
		color: var(--emp-brown);
		cursor: pointer;
		z-index: 2;
	}
	.ga-emp-gallery__nav svg { width: 22px; height: 22px; }
	.ga-emp-gallery__nav[data-dir="prev"] { inset-inline-start: 6px; }
	.ga-emp-gallery__nav[data-dir="next"] { inset-inline-end: 6px; }
	.ga-emp-gallery__nav[hidden] { display: none; }
}

/* =========================================================================
   Usage steps
   Figma @1920: cards 317x417 at x155/518/880 (46 gap), y3679;
   title 419x149 @ x1330; intro 604x86 @ x1223 — so head and cards sit
   side by side, head on the right in RTL.
   ========================================================================= */

.ga-emp-usage { padding: clamp(32px, 5vw, 96px) 0; }

.ga-emp-usage__inner {
	width: var(--emp-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 604fr) minmax(0, 1042fr);
	gap: clamp(16px, 1.354vw, 26px);
	align-items: center;
}

.ga-emp-usage__head { text-align: start; }

.ga-emp-usage__title {
	margin: 0 0 clamp(10px, 1.1vw, 21px);
	color: var(--emp-brown);
	font-family: 'FbLiddar' !important;
	font-size: clamp(28px, 7.19vw, 138px);   /* 419x149 box, one line */
	font-weight: 700;
	line-height: 0.8;
}
.ga-emp-usage__intro {
	margin: 0;
	color: var(--emp-brown);
	font-size: clamp(12px, 1.667vw, 32px);   /* 604x86, two lines */
	line-height: 1.34;
}

.ga-emp-usage__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 2.4vw, 46px);           /* 46 / 1920 */
}
.ga-emp-usage__card {
	display: flex;
	flex-direction: column;
	border-radius: clamp(10px, 1vw, 20px);
	padding: clamp(12px, 1.6vw, 30px);
	min-height: clamp(160px, 21.72vw, 417px); /* 417 / 1920 */
	color: var(--emp-brown);
}

/* Tint cycle. RTL puts card 1 on the right, so --i:0 is הכנה. */
.ga-emp-usage__card[style*="--i:0"] { background: #e3d5c8; }
.ga-emp-usage__card[style*="--i:1"] { background: #cdaba1; color: #fff; }
.ga-emp-usage__card[style*="--i:2"] { background: #eae7e4; }

.ga-emp-usage__step {
	margin: 0 0 .45em;
	color: inherit;
	font-family: 'FbLiddar' !important;
	font-size: clamp(28px, 4.13vw, 80px);
	font-weight: 700;
	line-height: 0.5;
	text-align: center;
}
.ga-emp-usage__text {
	margin: 0;
	color: #000000;
	font-size: clamp(11px, 1.55vw, 32px);
	line-height: 1.2;
	text-align: center;
}

@media (max-width: 1024px) {
	.ga-emp-usage__inner { grid-template-columns: 1fr; gap: 20px; }
	.ga-emp-usage__grid  { gap: 12px; }
	.ga-emp-usage__card  { min-height: 0; padding: 16px 14px; }
	.ga-emp-usage__step  { font-size: 22px; }
	.ga-emp-usage__text  { font-size: 14px; }
}
@media (max-width: 560px) {
	.ga-emp-usage__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   What's in the box
   ========================================================================= */

.ga-emp-box {
	/* --emp-box-bg and --emp-box-ink come from the per-product ACF fields;
	   the fallbacks keep the section usable before they're filled in. */
	background: var(--emp-box-bg, linear-gradient(180deg, rgba(222, 185, 152, .67) 0%, #786452 100%));
	color: var(--emp-box-ink, #fff);
	padding: clamp(24px, 4vw, 76px) 0;
}
.ga-emp-box__inner {
	width: var(--emp-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 3vw, 58px);
}
.ga-emp-box__title {
	margin: 0 0 clamp(14px, 1.6vw, 30px);
	color: inherit;
	font-family: 'FbLiddar' !important;
	font-size: clamp(22px, 5.2vw, 100px);
	line-height: 1;
	font-weight: 900;
}
.ga-emp-box__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, .8vw, 16px); }
.ga-emp-box__item {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	color: inherit;
	font-size: clamp(11px, 1.67vw, 32px);
	line-height: 1.3;
}
.ga-emp-box__check { width: 1.1em; height: 1.1em; flex: none; margin-top: .1em; }
/* Packshot leads the DOM order so RTL places it in the right-hand column.
   The offset lands on the <img>, not the <figure>, so it can break out of
   the band without dragging the grid cell with it. */
.ga-emp-box__media {
	order: -1;
	margin: 0;
	text-align: center;
	min-width: 0;
}
.ga-emp-box__media img {
	margin: var(--emp-box-media-margin, 0);
	max-width: none;
	width: 100%;
	height: auto;
}
.ga-emp-box__cta { margin-top: clamp(16px, 2vw, 38px); }

@media (max-width: 767px) {
	.ga-emp-box__inner { grid-template-columns: 1fr; text-align: start; }
	.ga-emp-box__media img { margin: 0; width: auto; max-width: 100%; }
}

/* =========================================================================
   Floating cart + phone
   ========================================================================= */

.ga-emp-float {
	position: fixed;
	/* Physical, not logical: inset-inline-end resolves to the LEFT under RTL,
	   which is what pinned this to the wrong side. Both logical longhands are
	   reset explicitly so nothing can quietly reintroduce it. */
	right: clamp(10px, 1.2vw, 24px) !important;
	bottom: clamp(10px, 1.2vw, 24px) !important;
	left: auto !important;
	top: auto !important;
	inset-inline-start: auto;
	inset-inline-end: auto;
	transform: none !important;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, .8vw, 16px);
}
.ga-emp-float__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(46px, 6.2vw, 96px);
	height: clamp(46px, 6.2vw, 96px);
	background: var(--emp-brown, #786452);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	color: #fff;
	text-decoration: none;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), background-color .25s;
}
.ga-emp-float__btn:hover,
.ga-emp-float__btn:focus-visible { background: #8b7561; color: #fff; transform: scale(1.06); }
.ga-emp-float__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ga-emp-float__btn svg { width: 48%; height: 48%; }

.ga-emp-float__count {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-start: -4px;
	min-width: 1.7em;
	height: 1.7em;
	display: grid;
	place-items: center;
	background: var(--emp-tan, #deb998);
	border-radius: 999px;
	color: #4a3c30;
	font-size: clamp(10px, .78vw, 15px);
	font-weight: 700;
	line-height: 1;
	padding: 0 .35em;
}
.ga-emp-float__count.is-empty { display: none; }

/* Mobile-bar pieces, hidden on desktop */
.ga-emp-float__atc,
.ga-emp-float__label,
.ga-emp-float__icon--chat { display: none; }

/* --- mobile: a full-width action bar instead of floating circles --- */
@media (max-width: 767px) {
	.ga-emp-float {
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		flex-direction: row;
		gap: 0;
		background: var(--emp-brown, #786452);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
	}

	/* RTL puts the first child on the right, so add-to-cart leads. */
	.ga-emp-float .ga-emp-float__atc,
	.ga-emp-float .ga-emp-float__btn--tel {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: auto;
		height: auto;
		min-height: 58px;
		padding: 0 10px;
		background: transparent !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		transform: none !important;
	}
	.ga-emp-float .ga-emp-float__btn--tel {
		border-inline-start: 1px solid rgba(255, 255, 255, .45);
	}

	.ga-emp-float__label { display: inline; }
	.ga-emp-float__icon--chat { display: block; }
	.ga-emp-float__icon--tel { display: none; }

	.ga-emp-float__btn svg,
	.ga-emp-float .ga-emp-atc__icon { width: 22px; height: 22px; flex: none; }

	/* The drawer opens itself after an add, so the view-cart circle is noise. */
	.ga-emp-float__btn--cart { display: none; }

	/* Stop the bar covering the end of the page. */
	body.single-product { padding-bottom: 62px; }
}

/* =========================================================================
   Mini-cart drawer — slides in from the left
   ========================================================================= */

.ga-emp-cart[hidden] { display: none; }
.ga-emp-cart {
	position: fixed;
	inset: 0;
	z-index: 1000;
	font-family: var(--emp-font, system-ui, sans-serif);
}

.ga-emp-cart__scrim {
	position: absolute;
	inset: 0;
	background: rgba(60, 48, 38, .45);
	opacity: 0;
	transition: opacity .3s var(--emp-ease);
}
.ga-emp-cart.is-open .ga-emp-cart__scrim { opacity: 1; }

.ga-emp-cart__panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: min(420px, 90vw);
	display: flex;
	flex-direction: column;
	background: #fffbf8;
	box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
	transform: translateX(-100%);
	transition: transform .32s var(--emp-ease);
	direction: rtl;
}
.ga-emp-cart.is-open .ga-emp-cart__panel { transform: translateX(0); }

.ga-emp-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(120, 100, 82, .2);
}
.ga-emp-cart__title {
	margin: 0;
	color: var(--emp-brown, #786452);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
}
.ga-emp-cart__close {
	background: none;
	border: 0;
	color: var(--emp-brown, #786452);
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
	padding: 0 4px;
}

.ga-emp-cart__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ga-emp-cart__empty { margin: 0; color: var(--emp-brown, #786452); font-size: 15px; }

.ga-emp-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ga-emp-cart__item {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(120, 100, 82, .14);
}
.ga-emp-cart__thumb img { width: 62px; height: 62px; object-fit: contain; border-radius: 8px; display: block; }
.ga-emp-cart__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ga-emp-cart__name { color: var(--emp-brown, #786452); font-size: 15px; line-height: 1.25; }
.ga-emp-cart__meta { color: rgba(120, 100, 82, .75); font-size: 13px; }
.ga-emp-cart__remove {
	color: rgba(120, 100, 82, .6);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	padding: 2px 6px;
}
.ga-emp-cart__remove:hover { color: #a33; }

.ga-emp-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	color: var(--emp-brown, #786452);
	font-size: 18px;
	font-weight: 500;
	padding-top: 4px;
}
.ga-emp-cart__actions { display: grid; gap: 10px; }
.ga-emp-cart__checkout {
	width: 100%;
	font-size: 17px;
	min-height: 50px;
	border-radius: 10px;
}
.ga-emp-cart__link {
	color: var(--emp-brown, #786452);
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ga-emp-cart__scrim,
	.ga-emp-cart__panel { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ga-emp-atc,
	.ga-emp-float__btn { transition: none; }
	.ga-emp-atc:hover,
	.ga-emp-float__btn:hover { transform: none; }
	.ga-emp-gallery__track { scroll-behavior: auto; }
}

/* =========================================================================
   Fallback (unmigrated products)
   ========================================================================= */

.ga-emp-fallback { padding: clamp(24px, 4vw, 64px) 0; }
.ga-emp-fallback__inner {
	width: var(--emp-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(20px, 3vw, 56px);
}
.ga-emp-fallback__media { margin: 0; }
.ga-emp-fallback__media img { width: 100%; height: auto; border-radius: 12px; }
.ga-emp-fallback__title {
	margin: 0 0 .4em;
	color: var(--emp-brown);
	font-size: clamp(22px, 3vw, 48px);
	line-height: 1.15;
}
.ga-emp-fallback__excerpt,
.ga-emp-fallback__body { color: var(--emp-brown); font-size: clamp(14px, 1.1vw, 20px); line-height: 1.6; }
.ga-emp-fallback__body { margin-top: clamp(16px, 2vw, 32px); }
.ga-emp-fallback .ga-emp-price { margin-bottom: .6em; }
.ga-emp-fallback .ga-emp-atc { margin-block: clamp(12px, 1.5vw, 24px); }

@media (max-width: 767px) {
	.ga-emp-fallback__inner { grid-template-columns: 1fr; }
}

/* =========================================================================
   Mobile typography + slider corrections
   Several clamp() floors were set for a 1920 canvas and bottom out far too
   small on a ~390px screen: box items and usage intro land on 11-12px,
   the price on 15px. Overridden here rather than raising the floors, which
   would drag the mid-range up on tablet too.
   ========================================================================= */

@media (max-width: 767px) {
	.ga-emp-price            { font-size: 20px; }
	.ga-emp-atc              { font-size: 15px; min-height: 44px; padding-inline: 16px; }
	.ga-emp-atc--wide        { font-size: 17px; min-height: 50px; min-width: min(260px, 78vw); }

	.ga-emp-benefits__title  { font-size: 30px; margin-bottom: 20px; }
	.ga-emp-benefits         { padding: 36px 0; }

	.ga-emp-usage            { padding: 36px 0; }
	.ga-emp-usage__title     { font-size: 38px; }
	.ga-emp-usage__intro     { font-size: 15px; line-height: 1.45; }

	.ga-emp-box              { padding: 32px 0; }
	.ga-emp-box__title       { font-size: 34px; }
	.ga-emp-box__item        { font-size: 15px; line-height: 1.4; }
	.ga-emp-box__inner       { gap: 0; }

	.ga-emp-features         { padding: 36px 0; }
	.ga-emp-gallery          { padding: 28px 0; }
}

/* Sliders: full-bleed track, slides sized off the viewport rather than a
   padded content box, so scroll-snap centres them properly. */
@media (max-width: 1024px) {
	.ga-emp-features .ga-emp-features__grid,
	.ga-emp-gallery__track {
		padding-inline: 14px;
		scroll-padding-inline: 14px;
	}
	.ga-emp-features .ga-emp-features__media,
	.ga-emp-features .ga-emp-features__item {
		flex: 0 0 calc(100vw - 28px);
		max-width: calc(100vw - 28px);
	}
	.ga-emp-gallery__track { grid-auto-columns: calc(100vw - 56px); }

	.ga-emp-features__nav,
	.ga-emp-gallery__nav { width: 38px; height: 38px; }
}

/* =========================================================================
   Mobile: features slider + arrow anchoring + readable type
   `.ga-emp-features.is-grid .ga-emp-features__grid` is a base rule at 0-3-0,
   so it outranked the mobile slider at 0-2-0 and the track never became a
   scroller. Both state classes are matched here to win it back.
   ========================================================================= */

.ga-emp-features__slider { position: relative; }

@media (max-width: 1024px) {
	.ga-emp-features.is-grid  .ga-emp-features__grid,
	.ga-emp-features.is-radial .ga-emp-features__grid,
	.ga-emp-features .ga-emp-features__grid {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		gap: 14px;
		width: 100%;
		padding-inline: 14px;
		scroll-padding-inline: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.ga-emp-features.is-grid .ga-emp-features__media,
	.ga-emp-features.is-grid .ga-emp-features__item {
		grid-column: auto;
		flex: 0 0 calc(100vw - 28px);
		max-width: calc(100vw - 28px);
		margin: 0;
		scroll-snap-align: center;
	}

	/* Arrows anchor to the slider wrapper, not the whole section — the CTA
	   below used to drag their 50% centre off the track. */
	.ga-emp-features__nav {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* --- readable type at phone widths --- */
@media (max-width: 767px) {
	.ga-emp-price           { font-size: 40px; }
	.ga-emp-atc             { font-size: 24px; min-height: 46px; }
	.ga-emp-atc--wide       { font-size: 18px; min-height: 52px; }

	.ga-emp-hero__tagline   { font-size: 14px; }
	.ga-emp-hero__warranty  { font-size: 13px; }

	.ga-emp-benefits__title   { font-size: 46px; }
	.ga-emp-benefits__heading { font-size: 20px; line-height: 1; }
	.ga-emp-benefits__text    { font-size: 16.5px; line-height: 1; }

	.ga-emp-features__heading { font-size: 5vw; line-height: 1; font-weight: 600; }
	.ga-emp-features__text    { font-size: 4.5vw; line-height: 1; }

	.ga-emp-usage__title  { font-size: 70px; text-align: center; }
	.ga-emp-usage__intro  { font-size: 24px; line-height: 1; text-align: center; margin-top: 30px; }
	.ga-emp-usage__step   { font-size: 64px; }
	.ga-emp-usage__text   { font-size: 24px; }

	.ga-emp-box__title { font-size: 75px; margin-right: 15px; }
	.ga-emp-box__item  { font-size: 20px; line-height: 1.2; }

	.ga-emp-cart__name { font-size: 16px; }
	.ga-emp-cart__meta { font-size: 14px; }
}

/* =========================================================================
   Slider arrows — centred pair beneath the track
   Side placement can't work when a slide is calc(100vw - 28px): the buttons
   land on top of the copy and hang off the edge. Physical left/right here,
   not logical, so the pair reads prev-right / next-left under RTL.
   ========================================================================= */

@media (max-width: 1024px) {
	.ga-emp-features__slider,
	.ga-emp-gallery { padding-bottom: 60px; }

	.ga-emp-features__nav,
	.ga-emp-gallery__nav {
		position: absolute;
		top: auto;
		bottom: 6px;
		inset-inline-start: auto;
		inset-inline-end: auto;
		transform: none;
		width: 42px;
		height: 42px;
		background: var(--emp-brown, #786452);
		border: 0;
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
		color: #fff;
		z-index: 3;
	}
	.ga-emp-features__nav svg,
	.ga-emp-gallery__nav svg { width: 20px; height: 20px; }

	/* prev = back = right in RTL */
	.ga-emp-features__nav[data-dir="prev"],
	.ga-emp-gallery__nav[data-dir="prev"] { right: calc(50% + 7px); left: auto; }
	.ga-emp-features__nav[data-dir="next"],
	.ga-emp-gallery__nav[data-dir="next"] { left: calc(50% + 7px); right: auto; }

	/* Keep the pair in place instead of collapsing at the ends. */
	.ga-emp-features__nav[hidden],
	.ga-emp-gallery__nav[hidden] {
		display: grid !important;
		opacity: .35;
		pointer-events: none;
	}
}

/* =========================================================================
   Slider arrows — bare chevrons flanking the slide
   Slides narrow to calc(100vw - 92px) so the chevrons sit in their own
   gutter instead of over the copy. No circle, no fill, no shadow.
   ========================================================================= */

@media (max-width: 1024px) {
	.ga-emp-features__slider,
	.ga-emp-gallery { padding-bottom: 0; }

	.ga-emp-features.is-grid  .ga-emp-features__grid,
	.ga-emp-features.is-radial .ga-emp-features__grid,
	.ga-emp-features .ga-emp-features__grid {
		padding-inline: 46px;
		scroll-padding-inline: 46px;
	}
	.ga-emp-features.is-grid .ga-emp-features__media,
	.ga-emp-features.is-grid .ga-emp-features__item,
	.ga-emp-features .ga-emp-features__media,
	.ga-emp-features .ga-emp-features__item {
		flex: 0 0 calc(100vw - 92px);
		max-width: calc(100vw - 92px);
	}
	.ga-emp-gallery__track {
		grid-auto-columns: calc(100vw - 92px);
		padding-inline: 46px;
		scroll-padding-inline: 46px;
	}

	.ga-emp-features__nav,
	.ga-emp-gallery__nav {
		position: absolute;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: var(--emp-brown, #786452);
	}
	.ga-emp-features__nav svg,
	.ga-emp-gallery__nav svg { width: 28px; height: 28px; }

	/* prev = back = right in RTL */
	.ga-emp-features__nav[data-dir="prev"],
	.ga-emp-gallery__nav[data-dir="prev"] { right: 2px; left: auto; }
	.ga-emp-features__nav[data-dir="next"],
	.ga-emp-gallery__nav[data-dir="next"] { left: 2px; right: auto; }
}

/* =========================================================================
   Hardening — beat the theme reset
   reset.css styles every bare <button> with `border: 1px solid #c36`,
   `border-radius: 3px`, `color: #c36`, `padding: .5rem 1rem`,
   `white-space: nowrap` and a .3s transition on ALL properties. Element
   selectors are only 0-0-1, but they load after our stylesheet, so the
   cascade hands them the win on any property we don't explicitly set.
   Everything below is scoped to our own components.
   ========================================================================= */

.ga-emp button,
.ga-emp-cart button {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	letter-spacing: normal !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: inherit;
	text-transform: none !important;
	white-space: normal !important;
	transition: none;
}

.ga-emp .ga-emp-features__nav,
.ga-emp .ga-emp-gallery__nav,
.ga-emp-cart .ga-emp-cart__close { cursor: pointer; }

@media (max-width: 1024px) {
	.ga-emp .ga-emp-features__nav,
	.ga-emp .ga-emp-gallery__nav {
		display: grid !important;
		place-items: center !important;
		position: absolute !important;
		top: 50% !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
		width: 36px !important;
		height: 36px !important;
		color: var(--emp-brown, #786452) !important;
		z-index: 3;
	}
	.ga-emp .ga-emp-features__nav svg,
	.ga-emp .ga-emp-gallery__nav svg {
		width: 28px !important;
		height: 28px !important;
		display: block;
	}
	.ga-emp .ga-emp-features__nav[data-dir="prev"],
	.ga-emp .ga-emp-gallery__nav[data-dir="prev"] { left: 2px !important; right: auto !important; }
	.ga-emp .ga-emp-features__nav[data-dir="next"],
	.ga-emp .ga-emp-gallery__nav[data-dir="next"] { left: auto !important; right: 2px !important; }

	.ga-emp .ga-emp-features__nav[hidden],
	.ga-emp .ga-emp-gallery__nav[hidden] {
		display: grid !important;
		opacity: .3;
		pointer-events: none;
	}
}

/* The cart close button and the benefit flips need the same protection. */
.ga-emp-cart .ga-emp-cart__close {
	font-size: 30px !important;
	line-height: 1 !important;
	padding: 0 4px !important;
	color: var(--emp-brown, #786452) !important;
}

/* =========================================================================
   Sliders: no peeking neighbours
   The gutters were padding INSIDE the scroller, so adjacent slides showed
   through them. Narrow the track itself and move the gutters out to margin
   — the track's own overflow then clips whatever isn't the current slide,
   and the arrows sit in the margins beside it.
   ========================================================================= */

@media (max-width: 1024px) {
	.ga-emp-features.is-grid  .ga-emp-features__grid,
	.ga-emp-features.is-radial .ga-emp-features__grid,
	.ga-emp-features .ga-emp-features__grid,
	.ga-emp-gallery__track {
		width: calc(100% - 92px);
		margin-inline: 46px;
		padding-inline: 0;
		scroll-padding-inline: 0;
		gap: 0;
	}

	.ga-emp-features.is-grid .ga-emp-features__media,
	.ga-emp-features.is-grid .ga-emp-features__item,
	.ga-emp-features .ga-emp-features__media,
	.ga-emp-features .ga-emp-features__item {
		flex: 0 0 100%;
		max-width: 100%;
		scroll-snap-align: center;
	}

	.ga-emp-gallery__track { grid-auto-columns: 100%; }
	.ga-emp-gallery__slide { scroll-snap-align: center; }
}

/* =========================================================================
   Best Seller cards  [ga_emp_bestseller]
   Homepage frame @1920: white card 1699x942 r64; product image 379x379 r50;
   price 40px; CTA 36px; warranty pill 26.9px.
   ========================================================================= */

.ga-emp-bs { background: none; padding: 0; }

.ga-emp-bs__card {
	padding: clamp(20px, 3.2vw, 62px) clamp(16px, 2.6vw, 50px);
}

.ga-emp-bs__title {
	margin: 0 0 clamp(18px, 2.4vw, 46px);
	color: var(--emp-brown);
	font-family: 'FbLiddar', var(--emp-font);
	font-size: clamp(24px, 3.6vw, 69px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.ga-emp-bs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(54px, 32.6vw, 100px);
}

.ga-emp-bs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, .7vw, 14px);
	text-align: center;
	position: relative;
}

.ga-emp-bs__media {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: clamp(14px, 2.6vw, 50px);   /* 50 / 1920 */
	overflow: hidden;
}
.ga-emp-bs__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Warranty pill overlaps the foot of the image, as in the design. */
.ga-emp-bs__pill {
	position: absolute;
	top: calc(100% / 1.6);
	inset-inline-start: 50%;
	transform: translateX(50%);
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
	color: var(--emp-brown);
	font-size: clamp(10px, 1.4vw, 27px);       /* 26.9 / 1920 */
	line-height: 1.6;
	padding: .15em .8em;
	white-space: nowrap;
	z-index: 2;
}

.ga-emp-bs__stars { display: inline-flex; gap: .12em; margin-top: 0; }
.ga-emp-bs__star { width: clamp(23px, 2.15vw, 36px); height: auto; fill: #d9d2cb; }
.ga-emp-bs__star.is-on { fill: #e0a93c; }

.ga-emp-bs__name { display: block; width: 100%; line-height: 0; text-decoration: none; }
.ga-emp-bs__name img {
	width: auto;
	height: 1.2vw;
	object-fit: contain;
	filter: brightness(0) opacity(.68);
	margin-top: 1vw;
}
.ga-emp-bs__name span {
	color: var(--emp-brown);
	font-size: clamp(15px, 1.6vw, 31px);
	letter-spacing: .05em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ga-emp-bs__price {
	color: var(--emp-brown);
	font-size: clamp(16px, 2.08vw, 40px);      /* 40 / 1920 */
	font-weight: 500;
	line-height: 1;
}
.ga-emp-bs__price del { opacity: .5; font-size: .72em; margin-inline-end: .35em; }
.ga-emp-bs__price ins { text-decoration: none; }

.ga-emp-bs__cta {
	margin-top: clamp(6px, .8vw, 16px);
	font-size: clamp(13px, 1.88vw, 36px);      /* 36 / 1920 */
	min-height: clamp(34px, 3.2vw, 62px);
	min-width: 74%;
}

@media (max-width: 767px) {
	.ga-emp-bs__card { padding: 20px 24px; border-radius: 0; width: 100%; }
	.ga-emp-bs__grid { grid-template-columns: 1fr; gap: 80px; }
	.ga-emp-bs__title { font-size: 34px; }
	.ga-emp-bs__pill  { font-size: 13px; }
	.ga-emp-bs__star  { width: 28px; margin-top: 2vw; }
	.ga-emp-bs__name img { height: 4vw; }
	.ga-emp-bs__price { font-size: 40px; }
	.ga-emp-bs__cta   { font-size: 26px; min-height: 46px; font-weight: 900; }
}

/* =========================================================================
   Usage steps — one row on desktop, whatever the count
   repeat(3, 1fr) wrapped the 4th card onto a second line. grid-auto-flow:
   column lays every step in a single row without hard-coding how many.
   ========================================================================= */

@media (min-width: 1025px) {
	.ga-emp-usage__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

/* Back to rows below the breakpoint — a single row of 4+ is unreadable. */
@media (max-width: 1024px) {
	.ga-emp-usage__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.ga-emp-usage__grid {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Usage steps — 4+ cards put the head on the same grid as the cards
   The head and the <ol> are siblings, so equal widths need them in ONE
   grid. display:contents dissolves the <ol> box and promotes the <li>s to
   grid items of __inner, giving head + N cards N+1 equal columns.
   Only from 4 up: at 3 the design deliberately runs a wider head (604 vs
   317). role="list" on the <ol> keeps the semantics display:contents drops.
   ========================================================================= */

@media (min-width: 1025px) {
	.ga-emp-usage__inner[data-steps="4"],
	.ga-emp-usage__inner[data-steps="5"],
	.ga-emp-usage__inner[data-steps="6"] {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: clamp(10px, 2.4vw, 46px);
		align-items: stretch;
	}
	.ga-emp-usage__inner[data-steps="4"] > .ga-emp-usage__grid,
	.ga-emp-usage__inner[data-steps="5"] > .ga-emp-usage__grid,
	.ga-emp-usage__inner[data-steps="6"] > .ga-emp-usage__grid {
		display: contents;
	}
	.ga-emp-usage__inner[data-steps="4"] > .ga-emp-usage__head,
	.ga-emp-usage__inner[data-steps="5"] > .ga-emp-usage__head,
	.ga-emp-usage__inner[data-steps="6"] > .ga-emp-usage__head {
		align-self: center;
	}
}

/* =========================================================================
   Benefits — centre the row when there are fewer than 4
   repeat(4, 1fr) always reserves four tracks, so 3 circles filled the first
   three and left a hole. Flex with justify-content:center centres whatever
   count there is, while flex-basis keeps each circle exactly the width it
   would have had in the 4-column grid.
   ========================================================================= */

.ga-emp-benefits__grid {
	--emp-benefit-gap: clamp(12px, 3.548vw, 68px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	grid-template-columns: none;
	gap: var(--emp-benefit-gap);
}
.ga-emp-benefits__item {
	flex: 0 0 calc((100% - 3 * var(--emp-benefit-gap)) / 4);
	max-width: calc((100% - 3 * var(--emp-benefit-gap)) / 4);
}

@media (max-width: 1024px) {
	.ga-emp-benefits__grid { --emp-benefit-gap: 12px; }
	.ga-emp-benefits__item {
		flex: 0 0 calc((100% - var(--emp-benefit-gap)) / 2);
		max-width: calc((100% - var(--emp-benefit-gap)) / 2);
	}
}

/* =========================================================================
   Usage — small text under a step title, and a footnote row below
   The step heading runs FbLiddar at line-height .5, so the subtitle needs
   its own family and leading rather than inheriting them.
   ========================================================================= */

.ga-emp-usage__sub {
	display: block;
	margin: 0 0 .55em;
	color: inherit;
	font-family: var(--emp-font) !important;
	font-family: 'FbLiddar' !important;
	font-size: clamp(37px, 2.04vw, 30px);
	font-weight: 400;
	line-height: 0;
	opacity: 1;
	text-align: center;
	font-weight: 900;
	margin-bottom: 40px;
}

.ga-emp-usage__footnote {
	width: var(--emp-wrap);
	margin: clamp(18px, 2.4vw, 46px) auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1vw, 20px);
}
.ga-emp-usage__footnote-text {
	margin: 0;
	color: var(--emp-brown);
	font-family: 'FbLiddar', var(--emp-font);
	font-size: clamp(16px, 2.1vw, 40px);
	line-height: 1.2;
}
.ga-emp-usage__footnote-img { line-height: 0; }
.ga-emp-usage__footnote-img img {
	display: block;
	width: auto;
	height: clamp(18px, 2.2vw, 42px);
	object-fit: contain;
}

@media (max-width: 767px) {
	.ga-emp-usage__sub { font-size: 35px; }
	.ga-emp-usage__footnote { gap: 10px; margin-top: 24px; }
	.ga-emp-usage__footnote-text { font-size: 22px; }
	.ga-emp-usage__footnote-img img { height: 24px; }
}

/* =========================================================================
   Usage steps — at 5+ the head goes on top, full width
   Sharing one row works at 4 (head + 4 = 5 columns). At 5 it becomes six
   narrow columns and the title has nowhere to go, so from 5 up the head
   returns to its own full-width row and the cards keep a row to themselves.
   This block must come AFTER the [data-steps] rules above — it undoes the
   display:contents those set for 5 and 6.
   ========================================================================= */

@media (min-width: 1025px) {
	.ga-emp-usage__inner[data-steps="5"],
	.ga-emp-usage__inner[data-steps="6"] {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		gap: clamp(18px, 2.4vw, 46px);
		align-items: start;
	}
	.ga-emp-usage__inner[data-steps="5"] > .ga-emp-usage__head,
	.ga-emp-usage__inner[data-steps="6"] > .ga-emp-usage__head {
		align-self: start;
		text-align: start;   /* RTL: flush right, as in the mock */
	}
	/* undo display:contents so the <ol> is a grid again */
	.ga-emp-usage__inner[data-steps="5"] > .ga-emp-usage__grid,
	.ga-emp-usage__inner[data-steps="6"] > .ga-emp-usage__grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: clamp(10px, 2.4vw, 46px);
	}
	.ga-emp-usage__inner[data-steps="5"] .ga-emp-usage__intro,
	.ga-emp-usage__inner[data-steps="6"] .ga-emp-usage__intro {
		margin-inline: 0;
		max-width: 60ch;
	}
}

/* =========================================================================
   Header cart button  [ga_emp_header_cart]
   ========================================================================= */

.ga-emp-hcart {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: clamp(38px, 2.8vw, 54px);
	height: clamp(38px, 2.8vw, 54px);
	/* The SVG is stroke: currentColor. Inheriting from the header gave a
	   dark glyph on the dark sticky bar — invisible. Explicit, overridable. */
	color: var(--emp-hcart-color, #fff) !important;
	text-decoration: none;
	transition: opacity .2s ease, transform .2s ease;
}
.ga-emp-hcart:hover { opacity: .75; transform: translateY(-1px); }
.ga-emp-hcart:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.ga-emp-hcart svg {
	width: 62%;
	height: 62%;
	display: block;
	color: inherit;
	/* keeps the glyph readable over the bright parts of the hero */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.ga-emp-hcart:hover { color: var(--emp-hcart-color, #fff) !important; }
.ga-emp-hcart .ga-emp-float__count {
	inset-block-start: 0;
	inset-inline-start: 0;
	font-size: 11px;
	min-width: 1.6em;
	height: 1.6em;
}

/* Header nav sits over a bright hero — a soft scrim keeps it legible. */
.ga-emp-headshade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(60, 48, 38, .45) 0%, rgba(60, 48, 38, .16) 60%, rgba(60, 48, 38, 0) 100%);
	z-index: 0;
}

/* =========================================================================
   Cart + Checkout — brand the WooCommerce defaults
   Scoped to the two body classes so nothing leaks onto other Woo screens.
   ========================================================================= */

.woocommerce-cart,
.woocommerce-checkout {
	--emp-brown: #786452;
	--emp-tan:   #deb998;
	--emp-ink:   #3c3026;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	font-family: "Almoni", heebo, system-ui, sans-serif;
	color: var(--emp-ink);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1, .woocommerce-checkout h1 {
	font-family: 'FbLiddar', "Almoni", sans-serif;
	color: var(--emp-brown);
	font-size: clamp(30px, 3.4vw, 64px);
	line-height: 1.1;
	text-align: center;
}

/* --- buttons: brand brown, not the theme's black --- */
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-checkout #place_order {
	background: var(--emp-brown) !important;
	border: 1px solid var(--emp-brown) !important;
	border-radius: 12px !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: clamp(15px, 1.15vw, 21px) !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	min-height: 52px;
	padding: .7em 1.6em !important;
	text-transform: none !important;
	transition: background-color .25s ease, transform .25s ease !important;
}
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	background: #8b7561 !important;
	border-color: #8b7561 !important;
	transform: translateY(-2px);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	font-size: clamp(16px, 1.35vw, 25px) !important;
}

/* --- tables --- */
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
	border: 1px solid rgba(120, 100, 82, .18);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
	background: rgba(120, 100, 82, .07);
	color: var(--emp-brown);
	font-weight: 500;
	font-size: clamp(13px, .95vw, 18px);
	padding: 16px 14px;
}
.woocommerce-cart .shop_table td,
.woocommerce-checkout .shop_table td {
	border-top: 1px solid rgba(120, 100, 82, .12);
	padding: 16px 14px;
	font-size: clamp(13px, .95vw, 18px);
}
.woocommerce-cart .shop_table .product-thumbnail img {
	width: 78px;
	height: 78px;
	object-fit: contain;
	border-radius: 10px;
}
.woocommerce-cart .product-name a { color: var(--emp-brown); text-decoration: none; font-weight: 500; }
.woocommerce-cart .product-name a:hover { text-decoration: underline; }
.woocommerce-cart .product-remove a.remove {
	color: rgba(120, 100, 82, .55) !important;
	font-size: 22px;
}
.woocommerce-cart .product-remove a.remove:hover { color: #a33 !important; background: none !important; }

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #order_review_heading {
	font-family: 'FbLiddar', "Almoni", sans-serif;
	color: var(--emp-brown);
	font-size: clamp(20px, 1.9vw, 36px);
	font-weight: 700;
}
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount { color: var(--emp-brown); font-size: 1.15em; }

/* --- inputs --- */
.woocommerce-cart .woocommerce input[type="text"],
.woocommerce-cart .woocommerce input[type="number"],
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce .select2-selection {
	border: 1px solid rgba(120, 100, 82, .3) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--emp-ink) !important;
	font-family: inherit !important;
	font-size: 16px !important;   /* under 16px iOS zooms the page on focus */
	min-height: 48px;
	padding: 10px 14px !important;
}
.woocommerce-cart .woocommerce input:focus,
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce textarea:focus {
	border-color: var(--emp-brown) !important;
	box-shadow: 0 0 0 3px rgba(222, 185, 152, .35) !important;
	outline: none !important;
}
.woocommerce-checkout .woocommerce label { color: var(--emp-brown); font-weight: 500; }
.woocommerce-checkout .required { color: #a33; }

/* --- notices --- */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--emp-brown) !important;
	background: rgba(120, 100, 82, .06);
	color: var(--emp-ink);
	border-radius: 10px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--emp-brown) !important; }

/* --- checkout panels --- */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment {
	background: #fffbf8 !important;
	border: 1px solid rgba(120, 100, 82, .16);
	border-radius: 16px;
	padding: 18px;
}
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods {
	background: transparent !important;
	border-bottom: 1px solid rgba(120, 100, 82, .14) !important;
}

@media (max-width: 767px) {
	.woocommerce-cart .shop_table th { font-size: 13px; padding: 10px 8px; }
	.woocommerce-cart .shop_table td { font-size: 14px; padding: 12px 8px; }
	.woocommerce-cart .shop_table .product-thumbnail img { width: 56px; height: 56px; }
	.ga-emp-hcart { width: 40px; height: 40px; }
}

/* =========================================================================
   Cart drawer — motion
   Panel slides in from the left, scrim fades slightly ahead of it, contents
   drift up a touch behind. Overshoot easing so it settles rather than stops.
   ========================================================================= */

.ga-emp-cart__panel {
	transition: transform .42s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}
.ga-emp-cart__scrim {
	transition: opacity .32s ease;
}

/* Contents follow the panel by a beat. */
.ga-emp-cart .ga-emp-cart__head,
.ga-emp-cart .ga-emp-cart__body {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease .12s, transform .3s ease .12s;
}
.ga-emp-cart.is-open .ga-emp-cart__head,
.ga-emp-cart.is-open .ga-emp-cart__body {
	opacity: 1;
	transform: none;
}

/* Stop the page scrolling behind the open drawer. */
.ga-emp-cart-lock,
.ga-emp-cart-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.ga-emp-cart__panel,
	.ga-emp-cart__scrim,
	.ga-emp-cart .ga-emp-cart__head,
	.ga-emp-cart .ga-emp-cart__body {
		transition: none !important;
		transform: none !important;
	}
	.ga-emp-cart__panel { transform: translateX(-100%) !important; }
	.ga-emp-cart.is-open .ga-emp-cart__panel { transform: translateX(0) !important; }
}

/* =========================================================================
   WooCommerce notices as a bottom-left toast
   Excluded on cart/checkout: validation errors there must stay inline next
   to the fields, not float in a corner where they'll be missed.
   ========================================================================= */

body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper {
	position: fixed;
	inset-block-end: 16px;
	left: 16px;
	right: auto;
	z-index: 1100;
	width: min(370px, calc(100vw - 32px));
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	pointer-events: none;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper > .woocommerce-message,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper > .woocommerce-info,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper > .woocommerce-error {
	pointer-events: auto;
	position: relative;
	margin: 0 !important;
	padding: 14px 16px 14px 44px !important;
	background: #fffbf8 !important;
	border: 1px solid rgba(120, 100, 82, .18) !important;
	border-top: 1px solid rgba(120, 100, 82, .18) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 24px rgba(60, 48, 38, .18) !important;
	color: #3c3026 !important;
	font-family: "Almoni", heebo, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	list-style: none;
	direction: rtl;
	text-align: start;
	animation: gaEmpToastIn .38s cubic-bezier(.22, 1, .36, 1) both;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper > *::before {
	inset-inline-start: auto !important;
	left: 14px !important;
	top: 15px !important;
	color: #786452 !important;
	font-size: 16px !important;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper > .woocommerce-error::before { color: #a33 !important; }

/* The "continue shopping" button becomes a quiet inline link. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper .button {
	display: inline-block !important;
	float: none !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #786452 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
}

.ga-emp-toast-close {
	position: absolute;
	inset-inline-end: 10px;
	top: 10px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	background: none !important;
	border: 0 !important;
	color: rgba(120, 100, 82, .6) !important;
	cursor: pointer;
	font-size: 20px !important;
	line-height: 1 !important;
	padding: 0 !important;
}
.ga-emp-toast-close:hover { color: #786452 !important; }

.woocommerce-notices-wrapper > .is-leaving {
	animation: gaEmpToastOut .3s ease forwards;
}

@keyframes gaEmpToastIn {
	from { opacity: 0; transform: translateX(-24px) translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@keyframes gaEmpToastOut {
	to { opacity: 0; transform: translateX(-24px); }
}

@media (max-width: 767px) {
	body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper {
		inset-block-end: 76px;   /* clear of the mobile action bar */
		left: 12px;
		width: calc(100vw - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-notices-wrapper > * { animation: none !important; }
}