/* ============================================================================
   Orilogy Side Rail - Affiliates / WhatsApp / Cart

   A floating brand-green capsule on the right, held off the edge rather than
   fused to it. Two colours only - green and cream. Items collapse to a bare
   cream icon on the green; the ACTIVE one expands into a cream pill with
   green content and reveals its label, turned on its side. Exactly one item
   is active at a time, so the rail stays a narrow strip and only ever states
   one thing.

   Affiliates is active on first paint - it is the offer the rail exists to
   make. Tapping a collapsed item promotes it (expanding its label) without
   firing its action; tapping the already-active item is what actually acts.
   See orilogy-affiliate-widget.js.
   ========================================================================= */

.orail {
	/* Bound to the site's own Elementor global for brand green (#183B19) so
	   the rail follows a palette change made in Elementor rather than
	   drifting from it. The dark-brown ink is deliberately NOT used here:
	   this component is green + light only. */
	--orail-green: var(--e-global-color-0316a3b, #183b19);
	--orail-cream: var(--e-global-color-secondary, #f2ebde);

	position: fixed;
	right: 24px;
	bottom: 10%;

	/* Product pages carry the sticky add-to-cart bar along the bottom edge,
	   so once the visitor starts scrolling there the rail lifts clear of it
	   rather than sitting behind it. Driven by .is-raised from the script. */
	transition: bottom .3s cubic-bezier(.22, .61, .36, 1),
	            opacity .35s ease, transform .35s ease, visibility .35s ease;

	/* Above the sticky add-to-cart bar (#ostk-bar, z-index 9999) and the
	   back-to-top button, so a theme that paints late cannot bury it - the
	   whole reason the old gift icon vanished on some pages. */
	z-index: 10001;

	/* Body font, taken by inheritance rather than from
	   --e-global-typography-text-font-family. That global resolves to
	   "FoundersGrotesk", which is not actually a loaded family on this site -
	   the browser fell back to a serif, which is why the labels rendered in
	   the wrong face. body computes to FoundersGrotesk-Medium, which does
	   load, so inheriting is both correct and self-correcting. */
	font-family: inherit;
	line-height: 1;
}

.orail * {
	box-sizing: border-box;
}

.orail-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;

	padding: 6px;
	background: var(--orail-green);
	border-radius: 999px;
	box-shadow: 0 14px 38px -12px rgba(0, 0, 0, .6);
}

/* The Hub theme styles bare <button> and <a> with enough specificity to win
   against a single class (.elementor-kit-19 a is 0,2,0 against .orail-item's
   0,1,0), which painted these labels in the theme's dark ink ON the rail -
   near-invisible. Scoped through .orail and forcing only the colour
   properties, deliberately, rather than fighting the theme rule by rule. */

.orail .orail-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 35px;
	min-height: 35px;
	padding: 9px 0;
	margin: 0;

	background: none;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	color: var(--orail-cream) !important;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;

	transition: background-color .26s ease, color .26s ease, padding .26s ease;
}

.orail .orail-item:hover {
	color: #fff !important;
	background: rgba(242, 235, 222, .10) !important;
}

.orail .orail-item:focus-visible {
	outline: 2px solid var(--orail-cream);
	outline-offset: 2px;
}

.orail .orail-icon {
	flex: 0 0 auto;
	display: block;
	color: inherit;
}

.orail .orail-iconwrap {
	position: relative;
	display: block;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ the label --

   Collapsed by default and revealed only on the active item. max-height is
   what animates: with writing-mode:vertical-rl the label's HEIGHT is its text
   length, so collapsing height is what actually closes it. 120px clears the
   longest label here ("WhatsApp") without clipping. */

.orail .orail-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: inherit;
	color: inherit !important;

	max-height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;

	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	white-space: nowrap;

	transition: max-height .28s cubic-bezier(.22, .61, .36, 1), opacity .2s ease, margin-top .28s ease;
}

.orail .orail-item.is-active {
	background: var(--orail-cream) !important;
	color: var(--orail-green) !important;
	padding: 13px 0;
}

.orail .orail-item.is-active:hover {
	color: var(--orail-green) !important;
}

.orail .orail-item.is-active .orail-label {
	max-height: 120px;
	margin-top: 9px;
	opacity: 1;
}

/* While the affiliate panel is open the active pill stays light - the brief
   is green + light only - but lifts to pure white so it still reads as
   changed rather than tinting toward the rail's own green. */
.orail.is-open .orail-item--affiliate.is-active {
	background: #fff !important;
	color: var(--orail-green) !important;
}

.single-product .orail.is-raised {
	bottom: 18%;
}

/* Homepage: keep the rail off the hero, then let it arrive once the visitor
   scrolls past the first screen.
   
   Gated on .is-scrollaware, which the script adds to itself. Without that
   guard a JS failure would hide the rail on the homepage permanently - with
   it, the worst case is the rail simply always showing, which is the same
   behaviour as every other page. */
body.home .orail.is-scrollaware {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(14px);
}

body.home .orail.is-scrollaware.is-revealed {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

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

.oafw-panel {
	position: absolute;
	right: calc(100% + 12px);
	/* Anchored to the rail's bottom, not its middle: the rail now sits on the
	   bottom edge, so a centred panel would hang half-way off the screen. */
	bottom: 0;
	width: 300px;
	max-width: calc(100vw - 96px);

	background: var(--orail-cream);
	border-radius: 16px;
	box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .4);
	overflow: hidden;

	opacity: 0;
	transform: translateX(10px) scale(.97);
	transform-origin: right bottom;
	pointer-events: none;
	transition: opacity .22s ease, transform .24s cubic-bezier(.22, .61, .36, 1);
}

.oafw-panel[hidden] {
	/* Kept in the layout so the transition has something to animate, but
	   non-interactive and invisible until opened. */
	display: block;
	visibility: hidden;
}

.orail.is-open .oafw-panel {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
	visibility: visible;
}

.orail .oafw-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 16px 12px;
	background: var(--orail-green);
	color: var(--orail-cream);
}

.orail .oafw-title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.orail .oafw-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--orail-cream) !important;
	opacity: .75;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.orail .oafw-close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

.oafw-body {
	padding: 16px;
}

.orail .oafw-text {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--orail-green) !important;
}

.orail .oafw-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	background: var(--orail-green) !important;
	color: var(--orail-cream) !important;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.orail .oafw-btn:hover {
	/* both tokens are green now, so darken rather than swap to nothing */
	background: color-mix(in srgb, var(--orail-green) 82%, #000) !important;
	color: #fff !important;
}

.orail .oafw-hint {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--orail-green) 60%, transparent);
	text-align: center;
}

.oafw-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.orail .oafw-input {
	width: 100%;
	min-height: 42px;
	padding: 0 13px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--orail-green) 20%, transparent);
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	color: var(--orail-green);
}

.orail .oafw-input:focus {
	outline: none;
	border-color: var(--orail-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--orail-green) 12%, transparent);
}

.oafw-alert {
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #e2b8b2;
	border-radius: 8px;
	font-size: 12.5px;
	color: #8c2f22;
}

.oafw-alert[hidden] {
	display: none;
}

.oafw-alert.is-success {
	border-color: #a9d3b3;
	color: #183b19;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 782px) {
	.orail {
		right: 12px;
	}

	.orail .orail-item {
		width: 34px;
		min-height: 34px;
	}

	.orail .orail-icon {
		width: 17px;
		height: 17px;
	}

	.orail .orail-label {
		font-size: 10px;
	}

	.oafw-panel {
		width: 78vw;
		max-width: calc(100vw - 78px);
	}
}

/* On a short viewport even one expanded label plus two icons can crowd the
   screen, so trim how far the label may open rather than let the capsule run
   past the top and bottom edges. */
@media (max-height: 560px) {
	.orail .orail-item.is-active .orail-label {
		max-height: 78px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oafw-panel,
	.orail .orail-item,
	.orail .orail-label {
		transition-duration: .01ms;
	}
}