/* Evopure motion layer v1 — our own signature moves. Independent of Elementor entrance animations. */

/* Nothing is hidden unless JS is present (html.evo-motion is added by motion.js).
   If JS fails, all content renders normally — no permanently-invisible sections. */

html.evo-motion .fade-up,
html.evo-motion .evo-fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--evo-delay, 0ms);
	will-change: opacity, transform;
}
html.evo-motion .fade-in,
html.evo-motion .evo-fade-in {
	opacity: 0;
	transition: opacity 700ms cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--evo-delay, 0ms);
	will-change: opacity;
}
html.evo-motion .zoom-on-scroll,
html.evo-motion .evo-zoom-on-scroll {
	opacity: 0;
	transform: scale(.94);
	transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--evo-delay, 0ms);
	will-change: opacity, transform;
}

html.evo-motion .fade-up.is-in,
html.evo-motion .evo-fade-up.is-in,
html.evo-motion .fade-in.is-in,
html.evo-motion .evo-fade-in.is-in,
html.evo-motion .zoom-on-scroll.is-in,
html.evo-motion .evo-zoom-on-scroll.is-in {
	opacity: 1;
	transform: none;
}

/* scroll-pin — sticky hold. Offset via data-pin-offset (px), default 0. */
.scroll-pin,
.evo-scroll-pin {
	position: -webkit-sticky;
	position: sticky;
	top: var(--evo-pin-offset, 0px);
}

/* count-up needs no base style; JS writes the number. Reserve space to avoid layout shift. */
.count-up,
.evo-count-up { font-variant-numeric: tabular-nums; }

/* Accessibility: honour the OS setting. Everything resolves instantly, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	html.evo-motion .fade-up,
	html.evo-motion .evo-fade-up,
	html.evo-motion .fade-in,
	html.evo-motion .evo-fade-in,
	html.evo-motion .zoom-on-scroll,
	html.evo-motion .evo-zoom-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* In the Elementor editor everything is visible immediately — you can't design against hidden boxes. */
body.elementor-editor-active .fade-up,
body.elementor-editor-active .evo-fade-up,
body.elementor-editor-active .fade-in,
body.elementor-editor-active .evo-fade-in,
body.elementor-editor-active .zoom-on-scroll,
body.elementor-editor-active .evo-zoom-on-scroll {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   PRODUCT CARD  —  loop template 32385 "Evopure — Product Card"
   plus the FEATURED COLLECTION CAROUSEL rail that presents it.
   --------------------------------------------------------------------------
   NO SHADOWS ANYWHERE — not at rest, not on hover. The only interaction is
   the hovered card growing slightly. Hover is bound to the individual card;
   nothing else on the rail reacts in any way.

   Every colour and typeface resolves through an Elementor Global. There are
   no literal hex values and no font stacks beyond generic fallbacks.

   STANDARD: card = Cool Wash (grey), section = White. Both are set in the
   Elementor panels, not here.

   ALIGNMENT TOGGLE — left by default. Add the class  evo-card-center  in
   Advanced > CSS Classes on either the card container (site-wide) or the
   section container (that placement only).
   ========================================================================== */

/* ---- Uniform height ---------------------------------------------------- */
.elementor-loop-container { grid-auto-rows: 1fr; }
.elementor-loop-container .e-loop-item { display: flex; flex-direction: column; }
.elementor-loop-container .e-loop-item > .elementor-element { flex: 1 1 auto; }
.evo-product-card { height: 100%; }
.evo-product-card .evo-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.evo-product-card .evo-card-cta   { margin-top: auto; }

/* ---- Resting state: flat, and absolutely no shadow --------------------- */
.evo-product-card,
.evo-product-card *,
.evo-product-card:hover,
.evo-product-card:hover * { box-shadow: none !important; }

.evo-product-card { overflow: hidden; }   /* clips the image to the card radius */

/* ---- Image --------------------------------------------------------------
   No background is painted here, so a background-less product PNG sits
   directly on the card's own colour. contain, so a hero is never cropped. */
.evo-product-card .evo-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: transparent;
	line-height: 0;
}
.evo-product-card .evo-card-img,
.evo-product-card .evo-card-img .elementor-widget-container,
.evo-product-card .evo-card-img a,
.evo-product-card .evo-card-img figure,
.evo-product-card .evo-card-hover-img { display: block; width: 100%; height: 100%; }

.evo-product-card .evo-card-img img,
.evo-product-card .evo-card-hover-img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: transparent;
}

/* ---- Hover image swap (unchanged behaviour) ---------------------------- */
.evo-product-card .evo-card-hoverimg-w {
	position: absolute; inset: 0; z-index: 1;
	pointer-events: none; opacity: 0;
	transition: opacity .4s ease;
}
.evo-product-card .evo-card-hoverimg-w .elementor-widget-container,
.evo-product-card .evo-card-hoverimg-w .elementor-shortcode,
.evo-product-card .evo-card-hover-img { height: 100%; }
.evo-product-card:hover .evo-card-hoverimg-w,
.evo-product-card:focus-within .evo-card-hoverimg-w { opacity: 1; }

/* ---- Overlay (a): circular promo badge, TOP-RIGHT of the image --------- */
.evo-product-card .evo-card-promo-w {
	position: absolute; top: 14px; right: 14px; z-index: 3; line-height: 0;
}
.evo-product-card .evo-card-promo {
	display: flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 50%; padding: 4px; text-align: center;
	background: var(--e-global-color-promotiffany);
	color: var(--e-global-color-navy);
	font-family: var(--e-global-typography-uibutton-font-family), sans-serif;
	font-weight: var(--e-global-typography-uibutton-font-weight);
	font-size: calc(var(--e-global-typography-uibutton-font-size, 14px) * .8);
	letter-spacing: var(--e-global-typography-uibutton-letter-spacing);
	text-transform: var(--e-global-typography-uibutton-text-transform);
	line-height: 1.05;
}

/* ---- Overlay (b): product tag pill, TOP-LEFT of the image -------------- */
.evo-product-card .evo-card-tag-w {
	position: absolute; top: 14px; left: 14px; z-index: 3; line-height: 0;
}
.evo-product-card .evo-card-tag {
	display: inline-block;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--e-global-color-navy);
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-uibutton-font-family), sans-serif;
	font-weight: var(--e-global-typography-uibutton-font-weight);
	font-size: calc(var(--e-global-typography-uibutton-font-size, 14px) * .8);
	letter-spacing: var(--e-global-typography-uibutton-letter-spacing);
	text-transform: var(--e-global-typography-uibutton-text-transform);
	line-height: 1.2;
}

/* ---- Rating row ---------------------------------------------------------
   Colour comes from the dedicated "Star rating" Global Color, so it is
   editable in Site Settings > Global Colors without touching Navy.
   The unfilled track is the same colour at 30%, so an unrated product cannot
   be mistaken for a five-star one. */
.evo-product-card .evo-card-rating { display: flex; align-items: center; gap: 7px; }
.evo-product-card .evo-stars {
	position: relative; display: inline-block;
	font-size: 13px; line-height: 1; letter-spacing: 2px; white-space: nowrap;
	color: color-mix(in srgb, var(--e-global-color-star) 30%, transparent);
}
.evo-product-card .evo-stars::before { content: "\2605\2605\2605\2605\2605"; }
.evo-product-card .evo-stars-fill {
	position: absolute; top: 0; left: 0; height: 100%;
	overflow: hidden; white-space: nowrap;
	color: var(--e-global-color-star);
}
.evo-product-card .evo-stars-fill::before { content: "\2605\2605\2605\2605\2605"; }
.evo-product-card .evo-rating-count {
	font-family: var(--e-global-typography-caption-font-family), sans-serif;
	font-weight: var(--e-global-typography-caption-font-weight);
	font-size: calc(var(--e-global-typography-caption-font-size, 13px) * .9);
	letter-spacing: normal;
	color: var(--e-global-color-slate);
	line-height: 1;
}

/* ---- Title -------------------------------------------------------------
   Line 1 -> "Card Title — line 1 (uppercase)" global. The UPPERCASE lives in
            that global's text-transform, so the case is panel-editable.
   Line 2 -> "Card Descriptor — line 2 (Ogg)" global, ~58% of line 1.
   Both tiers sit inside one <a> inside one <h3>: the full product name is a
   single contiguous string in the DOM, the split is purely visual. */
.evo-product-card .evo-card-title { margin: 0; }
.evo-product-card .evo-card-title a { display: block; text-decoration: none; color: inherit; }
.evo-product-card .evo-card-title-main {
	display: block;
	font-family: var(--e-global-typography-cardtitle-font-family), sans-serif;
	font-weight: var(--e-global-typography-cardtitle-font-weight);
	font-style: var(--e-global-typography-cardtitle-font-style);
	font-size: var(--e-global-typography-cardtitle-font-size);
	line-height: var(--e-global-typography-cardtitle-line-height);
	letter-spacing: var(--e-global-typography-cardtitle-letter-spacing);
	text-transform: var(--e-global-typography-cardtitle-text-transform);
	color: var(--e-global-color-navy);
}
.evo-product-card .evo-card-title-sub {
	display: block;
	margin-top: 5px;
	font-family: var(--e-global-typography-carddesc-font-family), Georgia, serif;
	font-weight: var(--e-global-typography-carddesc-font-weight);
	font-style: var(--e-global-typography-carddesc-font-style);
	font-size: var(--e-global-typography-carddesc-font-size);
	line-height: var(--e-global-typography-carddesc-line-height);
	letter-spacing: var(--e-global-typography-carddesc-letter-spacing);
	text-transform: var(--e-global-typography-carddesc-text-transform);
	color: var(--e-global-color-slate);
}

/* ---- Price -------------------------------------------------------------- */
.evo-product-card .evo-card-price .price { color: var(--e-global-color-navy); margin: 0; }
.evo-product-card .evo-card-price del { opacity: .45; margin-right: 7px; font-weight: inherit; }
.evo-product-card .evo-card-price ins { text-decoration: none; background: none; }

/* ---- Subscribe line: plain text, no pill, no background ---------------- */
.evo-product-card .evo-card-sub { display: block; }
.evo-product-card .evo-card-sub-text {
	display: inline-block;
	background: none;
	border: 0;
	border-radius: 0;      /* if a container is ever added it must be squared */
	padding: 0;
	font-family: var(--e-global-typography-caption-font-family), sans-serif;
	font-weight: var(--e-global-typography-caption-font-weight);
	font-size: calc(var(--e-global-typography-caption-font-size, 13px) * .95);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.35;
	color: var(--e-global-color-slate);
}

/* ---- Button -------------------------------------------------------------
   Square at rest. On card hover the corners round and a right-arrow slides
   in from the left of its own space. The darken is a mix of Navy toward Navy
   Deep — deliberately far softer than swapping to Navy Deep outright. */
.evo-product-card .evo-card-quickadd,
.evo-product-card .evo-card-quickadd form.cart { width: 100%; margin: 0; }
.evo-product-card .evo-card-quickadd .quantity,
.evo-product-card .evo-card-quickadd .added_to_cart { display: none; }

.evo-product-card .evo-card-quickadd .button,
.evo-product-card .evo-card-quickadd a.button,
.evo-product-card .evo-card-quickadd button.button {
	width: 100%;
	display: block;
	text-align: center;
	border: 0;
	border-radius: 0 !important;   /* square at rest; the rounding is the hover */
	transition: border-radius .3s ease, background-color .3s ease;
}

/* The arrow occupies no width until it is wanted, so the label stays centred. */
.evo-product-card .evo-card-quickadd .button::after {
	content: "\2192";
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateX(-4px);
	vertical-align: baseline;
	transition: max-width .3s ease, opacity .3s ease, transform .3s ease, margin-left .3s ease;
}
/* !important on exactly these two declarations, and nowhere else: Elementor
   generates its own .elementor-element-evoatc01 .button:hover rule at equal
   specificity from the panel's hover colour, and would otherwise win on source
   order. The 88% is the darken amount — raise it toward 100% for less, lower it
   for more. */
.evo-product-card:hover .evo-card-quickadd .button,
.evo-product-card .evo-card-quickadd .button:focus-visible {
	border-radius: 8px !important;
	background-color: color-mix(in srgb, var(--e-global-color-navy) 88%, var(--e-global-color-navydeep)) !important;
}
.evo-product-card:hover .evo-card-quickadd .button::after,
.evo-product-card .evo-card-quickadd .button:focus-visible::after {
	max-width: 1.5em;
	opacity: 1;
	margin-left: .45em;
	transform: translateX(0);
}

/* ---- Centre-aligned variant -------------------------------------------- */
.evo-product-card.evo-card-center .evo-card-body,
.evo-card-center .evo-product-card .evo-card-body { text-align: center; }
.evo-product-card.evo-card-center .evo-card-rating,
.evo-card-center .evo-product-card .evo-card-rating,
.evo-product-card.evo-card-center .evo-card-sub,
.evo-card-center .evo-product-card .evo-card-sub { justify-content: center; text-align: center; }
.evo-product-card.evo-card-center .evo-card-price,
.evo-card-center .evo-product-card .evo-card-price { text-align: center; }


/* ==========================================================================
   FEATURED COLLECTION CAROUSEL
   --------------------------------------------------------------------------
   A native horizontal scroll rail, NOT a Swiper carousel: only a real scroll
   container gets free trackpad momentum, and only a real scroll container can
   set overscroll-behavior-x, which is what stops a two-finger swipe from
   firing the browser's back/forward gesture.
   ========================================================================== */

.evo-featured { --evo-rail-visible: 4.2; --evo-rail-gap: 20px; --evo-rail-bleed: 18px; }

@media (max-width: 1024px) { .evo-featured { --evo-rail-visible: 2.3; } }
@media (max-width: 767px)  { .evo-featured { --evo-rail-visible: 1.2; --evo-rail-gap: 14px; } }

.evo-featured-railwrap { position: relative; }

.evo-featured-rail .elementor-loop-container {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap;
	gap: var(--evo-rail-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;     /* stops the swipe becoming browser back/forward */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;

	/* Headroom on all four sides so a hover-scaled card is never clipped by the
	   rail's own overflow. The negative margin cancels the horizontal padding,
	   so the first card still lines up exactly with the section heading. */
	padding: var(--evo-rail-bleed) var(--evo-rail-bleed) calc(var(--evo-rail-bleed) + 8px);
	margin: calc(var(--evo-rail-bleed) * -1) calc(var(--evo-rail-bleed) * -1)
	        calc((var(--evo-rail-bleed) + 8px) * -1);
}
.evo-featured-rail .elementor-loop-container::-webkit-scrollbar { display: none; }
.evo-featured-rail .elementor-loop-container.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.evo-featured-rail .elementor-loop-container.is-dragging * { pointer-events: none; }

.evo-featured-rail .e-loop-item {
	flex: 0 0 auto;
	width: calc((100% - (var(--evo-rail-visible) - 1) * var(--evo-rail-gap)) / var(--evo-rail-visible));
	scroll-snap-align: start;
}

/* ---- Hover: the hovered CARD grows. Nothing else moves. -----------------
   Bound to the individual item, never to the rail or the section, so
   non-hovered cards receive no rule at all — no opacity, no scale, no
   translate, no shadow. */
@media (hover: hover) {
	.evo-featured-rail .e-loop-item > .elementor-element {
		transition: transform .35s cubic-bezier(.2,.7,.3,1);
		transform-origin: center center;
	}
	.evo-featured-rail .e-loop-item:hover > .elementor-element {
		transform: scale(1.03);
		z-index: 2;
		position: relative;
	}
}

/* ---- Arrows (injected by motion.js next to the rail) -------------------- */
.evo-rail-nav {
	position: absolute;
	top: calc(50% - 40px);
	transform: translateY(-50%);
	z-index: 5;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--e-global-color-wash);
	border-radius: 50%;
	background: var(--e-global-color-white);
	color: var(--e-global-color-navy);
	cursor: pointer;
	padding: 0;
	transition: opacity .25s ease, background .25s ease, border-color .25s ease;
}
.evo-rail-nav:hover { background: var(--e-global-color-navy); color: var(--e-global-color-white); border-color: var(--e-global-color-navy); }
.evo-rail-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.evo-rail-nav.evo-rail-prev { left: 8px; }
.evo-rail-nav.evo-rail-next { right: 8px; }
.evo-rail-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .evo-rail-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.evo-product-card .evo-card-hoverimg-w,
	.evo-featured-rail .e-loop-item > .elementor-element,
	.evo-product-card .evo-card-quickadd .button,
	.evo-product-card .evo-card-quickadd .button::after { transition: none; }
}

/* --- Accent keyword — Ogg italic ------------------------------------------
   Usage: wrap a word inside any heading or text widget:
       Real relief, <span class="evo-accent">properly</span> made.
   Bound to the "Accent — Ogg" entry in Elementor > Site Settings > Global Fonts,
   so restyling every accent on the site is a single edit in that one panel.
   Font-size and line-height are deliberately NOT set, so the accent inherits
   whatever heading it sits in — only the 1.06em optical correction is applied,
   because Ogg's x-height sits lower than the grotesk it interrupts. */
.evo-accent {
	font-family: var(--e-global-typography-accentogg-font-family), Georgia, "Times New Roman", serif;
	font-weight: var(--e-global-typography-accentogg-font-weight);
	font-style: var(--e-global-typography-accentogg-font-style);
	text-transform: var(--e-global-typography-accentogg-text-transform);
	letter-spacing: var(--e-global-typography-accentogg-letter-spacing);
	font-size: 1.06em;
	/* Ogg italic has very tight side bearings; without this it collides with the
	   upright words either side of it inside a heading. */
	margin-inline: 0.05em;
}