/* Hanging Rail for Elementor — garments on a rail that turn to face you. */

.hrail {
	--hrail-garment-h: 380px;
	--hrail-slot: 112px;
	--hrail-top: 72px;
	--hrail-floor: 24px;
	--hrail-rod-y: 0.041;
	--hrail-rod-t: 12px;
	--hrail-rod-inset: 24px;
	--hrail-text: #17171a;
	--hrail-muted: #6d6c68;
	--hrail-accent: #17171a;
	--hrail-accent-text: #ffffff;
	--hrail-modal-bg: #f4f3ef;
	--hrail-shadow: rgba(20, 20, 24, .28);
	--hrail-dim: .55;

	position: relative;
	color: var(--hrail-text);
	isolation: isolate;
}

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

/* ---------- Heading ---------- */
.hrail__head { text-align: center; margin: 0 auto 8px; max-width: 760px; padding: 0 16px; }
.hrail__eyebrow {
	display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--hrail-muted); margin-bottom: 10px;
}
.hrail__title { margin: 0; font-size: clamp(28px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -.02em; font-weight: 700; color: inherit; }
.hrail__sub { margin: 12px 0 0; color: var(--hrail-muted); font-size: 16px; line-height: 1.5; }

/* ---------- Stage ---------- */
.hrail__scroller {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.hrail__scroller::-webkit-scrollbar { display: none; }

.hrail__track {
	position: relative;
	min-width: 100%;
	width: max-content;
	height: calc(var(--hrail-top) + var(--hrail-garment-h) + var(--hrail-floor));
	padding: 0 calc(var(--hrail-rod-inset) + 40px);
	margin: 0 auto;
}

/* floor line + soft contact zone */
.hrail__track::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: calc(var(--hrail-floor) + 40px);
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.035) 55%, rgba(0,0,0,0));
	display: var(--hrail-floor-display, block);
	pointer-events: none; z-index: 0;
}

/* ---------- Rod ---------- */
.hrail__rod {
	position: absolute;
	left: var(--hrail-rod-inset); right: var(--hrail-rod-inset);
	top: calc(var(--hrail-top) + var(--hrail-garment-h) * var(--hrail-rod-y) - var(--hrail-rod-t) / 2);
	height: var(--hrail-rod-t);
	border-radius: 999px;
	z-index: 1;
	pointer-events: none;
	background: var(--hrail-rod-fill);
	box-shadow: var(--hrail-rod-shadow, 0 6px 14px -6px rgba(0,0,0,.35));
}
.hrail__rod::before { /* specular streak */
	content: ""; position: absolute; left: 1.5%; right: 1.5%; top: 22%; height: 16%;
	border-radius: 999px; background: rgba(255,255,255,.75); filter: blur(.6px);
	opacity: var(--hrail-rod-gloss, .9);
}

.hrail--chrome { --hrail-rod-fill: linear-gradient(to bottom, #fbfcfd 0%, #b9bec5 18%, #f7f8fa 34%, #7c828a 62%, #c4c8ce 82%, #8d939b 100%); --hrail-rod-metal: #a5aab1; }
.hrail--black  { --hrail-rod-fill: linear-gradient(to bottom, #55585e 0%, #1d1e21 30%, #3a3c41 48%, #0c0c0e 78%, #26272a 100%); --hrail-rod-metal: #26272a; --hrail-rod-gloss: .28; }
.hrail--brass  { --hrail-rod-fill: linear-gradient(to bottom, #fff2c9 0%, #c9a24f 22%, #f3dc98 38%, #8a6522 66%, #b88d3c 86%, #7a5a1f 100%); --hrail-rod-metal: #b48c3e; --hrail-rod-gloss: .7; }
.hrail--custom {
	--hrail-rod-c: #9aa0a7; --hrail-rod-gloss: .6;
	--hrail-rod-fill: linear-gradient(to bottom,
		color-mix(in srgb, var(--hrail-rod-c) 30%, #fff) 0%, var(--hrail-rod-c) 28%,
		color-mix(in srgb, var(--hrail-rod-c) 55%, #fff) 42%, color-mix(in srgb, var(--hrail-rod-c) 70%, #000) 76%,
		var(--hrail-rod-c) 100%);
}
.hrail--white  { --hrail-rod-fill: linear-gradient(to bottom, #ffffff 0%, #ececec 40%, #d3d3d3 78%, #c2c2c2 100%); --hrail-rod-metal: #dcdcdc; --hrail-rod-gloss: .5; }

/* end caps */
.hrail__cap {
	display: none; position: absolute; top: 50%;
	width: calc(var(--hrail-rod-t) * 2.1); height: calc(var(--hrail-rod-t) * 2.1);
	border-radius: 50%; transform: translateY(-50%);
	background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), var(--hrail-rod-fill);
	box-shadow: var(--hrail-rod-shadow, 0 4px 10px -3px rgba(0,0,0,.4));
}
.hrail__cap--l { left: calc(var(--hrail-rod-t) * -1); }
.hrail__cap--r { right: calc(var(--hrail-rod-t) * -1); }

/* ceiling drops */
.hrail__drop {
	display: none; position: absolute; bottom: 50%;
	width: calc(var(--hrail-rod-t) * .55);
	height: calc(var(--hrail-top) + var(--hrail-garment-h) * var(--hrail-rod-y));
	background: linear-gradient(to right, #6f747b, #f4f5f7 35%, #9aa0a7 70%, #5d6168);
	border-radius: 2px;
}
.hrail--black .hrail__drop { background: linear-gradient(to right, #0d0d0f, #4a4c51 40%, #121214); }
.hrail--brass .hrail__drop { background: linear-gradient(to right, #6f521b, #f3dc98 38%, #9c7630 72%, #6a4e1a); }
.hrail--custom .hrail__drop { background: linear-gradient(to right, color-mix(in srgb, var(--hrail-rod-c) 70%, #000), color-mix(in srgb, var(--hrail-rod-c) 40%, #fff) 40%, color-mix(in srgb, var(--hrail-rod-c) 80%, #000)); }
.hrail--white .hrail__drop { background: linear-gradient(to right, #bdbdbd, #fff 40%, #d0d0d0); }
.hrail__drop--l { left: 6%; }
.hrail__drop--r { right: 6%; }
.hrail__drop::after { /* collar where drop meets rod */
	content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
	width: 260%; height: calc(var(--hrail-rod-t) * .9); border-radius: 3px; background: var(--hrail-rod-fill);
}

.hrail--mount-caps .hrail__cap,
.hrail--mount-both .hrail__cap { display: block; }
.hrail--mount-ceiling .hrail__drop,
.hrail--mount-both .hrail__drop { display: block; }

/* ---------- Items ---------- */
.hrail__items {
	position: relative; z-index: 2;
	display: flex; justify-content: center; align-items: stretch;
	height: 100%; margin: 0; padding: 0; list-style: none;
}

.hrail__item {
	position: relative;
	flex: 0 0 var(--hrail-slot);
	width: var(--hrail-slot);
	height: 100%;
	margin: 0; padding: 0;
	z-index: 1;
	scroll-snap-align: center;
	/* per-piece overrides (set from the repeater) */
	--hrail-s: var(--hrail-item-scale, 1);
	--hrail-ry: var(--hrail-item-rod-y, var(--hrail-rod-y));
	--hrail-gh: calc(var(--hrail-garment-h) * var(--hrail-s));
}
.hrail__item.is-front { z-index: 5; }
.hrail__item.is-turning { z-index: 4; }

.hrail__hang {
	all: unset;
	position: absolute; inset: 0;
	display: block; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Themes and Elementor Kits style every <button> (background, border, padding,
   hover/focus colours). Neutralise all of that for the invisible hit area. */
.hrail .hrail__hang,
.hrail .hrail__hang:hover,
.hrail .hrail__hang:focus,
.hrail .hrail__hang:active,
.hrail .hrail__hang:focus-visible {
	position: absolute !important; inset: 0 !important;
	display: block !important;
	width: auto !important; height: auto !important;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; background-image: none !important;
	border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; text-shadow: none !important;
	color: inherit !important; font: inherit !important;
	text-transform: none !important; letter-spacing: normal !important;
	outline: none !important;
	transform: none !important; transition: none !important;
	cursor: pointer;
}
.hrail__hang:focus-visible { outline: none; }
.hrail__hang:focus-visible .hrail__shadow { background: radial-gradient(closest-side, var(--hrail-focus, var(--hrail-accent)), transparent); opacity: .7; }

/* the swing pivots around the hook, which sits on the rod */
.hrail__swing {
	position: absolute;
	left: 50%;
	/* hook of this image sits exactly on the rod, whatever its size */
	top: calc(var(--hrail-top) + var(--hrail-garment-h) * var(--hrail-rod-y) - var(--hrail-gh) * var(--hrail-ry) + var(--hrail-item-y, 0px));
	width: 0; height: var(--hrail-gh);
	transform-origin: 0 calc(var(--hrail-gh) * var(--hrail-ry));
	will-change: transform;
	pointer-events: none;
}

.hrail__turn {
	position: absolute; left: 0; top: 0;
	height: 100%;
	transform: translateX(-50%);
	transform-origin: 50% calc(var(--hrail-gh) * var(--hrail-ry));
	transform-style: preserve-3d;
	perspective: 1400px;
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.hrail__item.is-front .hrail__turn { transform: translateX(-50%) scale(var(--hrail-front-scale, 1)); }

.hrail__img {
	display: block;
	height: var(--hrail-gh) !important;
	width: auto !important;
	max-width: none !important;
	user-select: none; -webkit-user-drag: none;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	transition: filter .35s ease, opacity .35s ease;
	filter: drop-shadow(0 var(--hrail-gs-y, 18px) var(--hrail-gs-blur, 18px) var(--hrail-gs-color, rgba(0,0,0,.14)));
}

.hrail--dim .hrail__items.has-front .hrail__item:not(.is-front) .hrail__img {
	filter: drop-shadow(0 var(--hrail-gs-y, 18px) var(--hrail-gs-blur, 18px) var(--hrail-gs-color, rgba(0,0,0,.14))) saturate(var(--hrail-dim-sat, .85)) brightness(var(--hrail-dim-bright, .93));
	opacity: var(--hrail-dim-opacity, 1);
}

/* floor shadow */
.hrail__shadow {
	position: absolute; left: 50%; bottom: calc(var(--hrail-floor) * .5);
	width: var(--hrail-fs-w, 64px); height: var(--hrail-fs-h, 12px);
	margin-left: calc(var(--hrail-fs-w, 64px) / -2);
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--hrail-shadow), transparent);
	transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
	opacity: .5; pointer-events: none;
	display: var(--hrail-fs-display, block);
}
.hrail--no-gshadow { --hrail-gs-color: transparent !important; }
.hrail--no-fshadow .hrail__shadow { display: none !important; }
/* the turned piece is wider, so its shadow widens a little (not into a second rail) */
.hrail__item.is-front .hrail__shadow { transform: scaleX(var(--hrail-shadow-grow, 1.6)); opacity: .7; }

/* per-item tag (shown on touch / when caption is off) */
.hrail__tag {
	position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
	white-space: nowrap; font-size: 12px; letter-spacing: .04em; color: var(--hrail-muted);
	opacity: 0; transition: opacity .3s; pointer-events: none;
}
.hrail--tags .hrail__item.is-front .hrail__tag { opacity: 1; }

/* ---------- Caption ---------- */
.hrail__caption {
	display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap;
	gap: 6px 18px; min-height: 3.2em; padding: 14px 16px 0; text-align: center;
}
.hrail__cap-name { color: var(--hrail-text); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hrail__cap-line { color: var(--hrail-muted); font-size: 14px; }
.hrail__cap-price { font-variant-numeric: tabular-nums; font-size: 16px; }
.hrail__cap-hint { color: var(--hrail-muted); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.hrail__caption > span { transition: opacity .25s, transform .25s; }
.hrail__caption.is-swapping > span { opacity: 0; transform: translateY(4px); }

/* ---------- Close look (modal) ---------- */
.hrail-modal {
	position: fixed; inset: 0; z-index: 999999;
	display: grid; place-items: center;
	padding: 16px;
	--hrail-text: #17171a; --hrail-muted: #6d6c68;
	--hrail-accent: #17171a; --hrail-accent-text: #ffffff; --hrail-modal-bg: #f4f3ef;
	background: var(--hrail-overlay, rgba(14, 14, 16, .55));
	backdrop-filter: blur(var(--hrail-overlay-blur, 6px)); -webkit-backdrop-filter: blur(var(--hrail-overlay-blur, 6px));
	opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
	color: var(--hrail-text);
	font-family: inherit;
}
.hrail-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.hrail-modal *, .hrail-modal *::before, .hrail-modal *::after { box-sizing: border-box; }

.hrail-modal__panel {
	position: relative;
	width: min(980px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	display: grid; grid-template-columns: 1.15fr 1fr;
	background: var(--hrail-modal-bg);
	border-radius: 18px;
	box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
	transform: translateY(18px) scale(.98);
	transition: transform .4s cubic-bezier(.2,.9,.25,1);
}
.hrail-modal.is-open .hrail-modal__panel { transform: none; }

.hrail-modal__media {
	position: relative; display: grid; place-items: center;
	min-height: 440px; padding: 28px 20px 70px;
	background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), rgba(0,0,0,.035);
}
.hrail-modal__img {
	display: block; max-width: 100%; height: min(62vh, 560px) !important; width: auto !important; object-fit: contain;
	filter: drop-shadow(0 26px 26px rgba(0,0,0,.18));
}
.hrail-modal__views {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hrail-view-bg, rgba(255,255,255,.85));
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.hrail-modal__view {
	all: unset; cursor: pointer; padding: 7px 14px; border-radius: 999px;
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hrail-muted);
}
.hrail-modal__view[aria-pressed="true"] { background: var(--hrail-accent); color: var(--hrail-accent-text); }
.hrail-modal__view:focus-visible { outline: 2px solid var(--hrail-accent); outline-offset: 2px; }

.hrail-modal__info { padding: 44px 36px 36px; display: flex; flex-direction: column; gap: 14px; }
.hrail-modal__count { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hrail-muted); }
.hrail-modal__name { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; color: inherit; }
.hrail-modal__line { margin: 0; color: var(--hrail-muted); font-size: 15px; }
.hrail-modal__price { font-size: 22px; font-variant-numeric: tabular-nums; }
.hrail-modal__details { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--hrail-text); opacity: .85; }
.hrail-modal__details p { margin: 0 0 .8em; }
.hrail-modal__actions { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hrail-modal .hrail-modal__buy {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 26px; border-radius: 999px; text-decoration: none !important;
	border: var(--hrail-buy-bw, 0px) solid var(--hrail-buy-border, transparent) !important;
	background: var(--hrail-buy-bg, var(--hrail-accent)) !important;
	color: var(--hrail-buy-text, var(--hrail-accent-text)) !important;
	font-weight: 600; font-size: 15px; line-height: 1.2; box-shadow: none;
	transition: transform .2s, background-color .2s, color .2s, border-color .2s;
}
.hrail-modal .hrail-modal__buy:hover,
.hrail-modal .hrail-modal__buy:focus {
	transform: translateY(-1px);
	background: var(--hrail-buy-bg-h, var(--hrail-buy-bg, var(--hrail-accent))) !important;
	color: var(--hrail-buy-text-h, var(--hrail-buy-text, var(--hrail-accent-text))) !important;
	border-color: var(--hrail-buy-border-h, var(--hrail-buy-border, transparent)) !important;
}
.hrail-modal__buy[hidden] { display: none; }
.hrail-modal__nav { display: flex; gap: 6px; margin-left: auto; }
.hrail-modal__btn {
	all: unset; cursor: pointer; display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.14); color: var(--hrail-text);
	transition: background .2s;
}
.hrail-modal__btn:hover { background: rgba(0,0,0,.06); }
.hrail-modal__btn:focus-visible { outline: 2px solid var(--hrail-accent); outline-offset: 2px; }
.hrail-modal__btn svg { width: calc(var(--hrail-nav-size, 42px) * .43); height: calc(var(--hrail-nav-size, 42px) * .43); }
.hrail-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,.7); }

/* ---------- When the rail is wider than the screen ---------- */
.hrail__stage { position: relative; }
.hrail.is-scrollable .hrail__scroller { scroll-snap-type: x proximity; cursor: grab; }
.hrail.is-scrollable .hrail__items { justify-content: flex-start; }

/* centre mode (phones): the first and last piece can reach the middle, and the rail snaps */
.hrail.is-centered .hrail__scroller { scroll-snap-type: x mandatory; cursor: auto; }
.hrail.is-centered .hrail__track { padding-left: calc(50% - var(--hrail-slot) / 2); padding-right: calc(50% - var(--hrail-slot) / 2); }

/* swipe hint: its own row (above the rod or below the garments), so it
   pushes the rail down instead of sitting on top of the garments */
.hrail__swipe-row {
	display: none;
	justify-content: center;
	margin: 6px 0 10px;
	padding: 0 16px;
}
.hrail.is-scrollable .hrail__swipe-row { display: flex; }
.hrail__swipe {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px 7px 11px; border-radius: 999px;
	background-color: rgba(255,255,255,.94);
	color: var(--hrail-text);
	box-shadow: 0 4px 18px -4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
	font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
	pointer-events: none;
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s;
}
.hrail__swipe:not(:has(.hrail__swipe-text)) { padding: 7px; }
.hrail__swipe svg { width: 18px; height: 18px; flex: none; animation: hrail-nudge 1.5s ease-in-out infinite; }
/* fades but keeps its space, so the rail doesn't jump under the visitor's finger */
.hrail__swipe.is-gone { opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
@keyframes hrail-nudge {
	0%, 100% { transform: translateX(-5px) rotate(-8deg); }
	50%      { transform: translateX(5px) rotate(6deg); }
}

/* arrows (theme button styles can't reach these; the widget's Style settings can) */
.hrail .hrail__arrow,
.hrail .hrail__arrow:hover,
.hrail .hrail__arrow:focus,
.hrail .hrail__arrow:active {
	display: none;
	position: absolute !important; z-index: 6 !important;
	top: calc(var(--hrail-top) + var(--hrail-garment-h) * var(--hrail-arrow-y, .45)) !important;
	transform: translateY(-50%) !important;
	width: var(--hrail-arrow-size, 40px) !important; height: var(--hrail-arrow-size, 40px) !important;
	min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	place-items: center;
	border: 1px solid var(--hrail-arrow-border, rgba(0,0,0,.08)) !important;
	border-radius: var(--hrail-arrow-radius, 50%) !important;
	background-color: var(--hrail-arrow-bg, rgba(255,255,255,.94)) !important; background-image: none !important;
	color: var(--hrail-arrow-icon, var(--hrail-text)) !important;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,.28) !important;
	line-height: 1 !important; text-transform: none !important;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: opacity .25s ease !important;
}
.hrail.is-scrollable.hrail--arrows .hrail__arrow { display: grid; }
.hrail .hrail__arrow--prev { left: max(var(--hrail-arrow-x, 8px), env(safe-area-inset-left, 0px)) !important; }
.hrail .hrail__arrow--next { right: max(var(--hrail-arrow-x, 8px), env(safe-area-inset-right, 0px)) !important; }
.hrail .hrail__arrow svg { width: calc(var(--hrail-arrow-size, 40px) * .45); height: calc(var(--hrail-arrow-size, 40px) * .45); }
.hrail .hrail__arrow.is-off { opacity: 0; pointer-events: none; }
.hrail .hrail__arrow:focus-visible { outline: 2px solid var(--hrail-accent) !important; outline-offset: 2px !important; }

@media (max-width: 767px) {
	.hrail__caption { flex-direction: column; align-items: center; gap: 3px; min-height: 5.2em; text-align: center; }
	.hrail__cap-name { font-size: 18px; }
	.hrail-modal__panel { grid-template-columns: 1fr; }
	.hrail-modal__media { min-height: 0; padding: 24px 16px 64px; }
	.hrail-modal__img { height: 46vh !important; }
	.hrail-modal__info { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.hrail__img, .hrail__shadow, .hrail-modal, .hrail-modal__panel { transition: none !important; }
	.hrail__swipe svg { animation: none; }
}

/* Elementor editor: keep the modal out of the way of the panel */
.elementor-editor-active .hrail-modal { z-index: 9999; }

/* Close-look buttons: theme / Kit button styles can't reach these, but the
   widget's own Style settings can (they set the variables below). */
.hrail-modal .hrail-modal__btn,
.hrail-modal .hrail-modal__btn:hover,
.hrail-modal .hrail-modal__btn:focus,
.hrail-modal .hrail-modal__btn:active {
	margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
	width: var(--hrail-nav-size, 42px) !important; height: var(--hrail-nav-size, 42px) !important; line-height: 1 !important;
	border: var(--hrail-nav-bw, 1px) solid var(--hrail-nav-border, rgba(0,0,0,.14)) !important;
	border-radius: var(--hrail-nav-radius, 50%) !important;
	background-image: none !important; box-shadow: none !important; text-transform: none !important; transform: none !important;
	color: var(--hrail-nav-icon, var(--hrail-text)) !important;
	background-color: var(--hrail-nav-bg, transparent) !important;
}
.hrail-modal .hrail-modal__btn:hover,
.hrail-modal .hrail-modal__btn:focus {
	background-color: var(--hrail-nav-bg-h, rgba(0,0,0,.06)) !important;
	color: var(--hrail-nav-icon-h, var(--hrail-nav-icon, var(--hrail-text))) !important;
	border-color: var(--hrail-nav-border-h, var(--hrail-nav-border, rgba(0,0,0,.14))) !important;
}
.hrail-modal .hrail-modal__close,
.hrail-modal .hrail-modal__close:hover,
.hrail-modal .hrail-modal__close:focus {
	background-color: var(--hrail-close-bg, rgba(255,255,255,.7)) !important;
	color: var(--hrail-close-icon, var(--hrail-text)) !important;
	border-color: var(--hrail-close-border, rgba(0,0,0,.14)) !important;
}
.hrail-modal .hrail-modal__btn:focus-visible { outline: 2px solid var(--hrail-accent) !important; outline-offset: 2px !important; }

.hrail-modal .hrail-modal__view,
.hrail-modal .hrail-modal__view:hover,
.hrail-modal .hrail-modal__view:focus,
.hrail-modal .hrail-modal__view:active {
	margin: 0 !important; min-width: 0 !important; min-height: 0 !important;
	border: 0 !important; border-radius: 999px !important; box-shadow: none !important; background-image: none !important;
	background-color: transparent !important; color: var(--hrail-view-text, var(--hrail-muted)) !important; transform: none !important;
	padding: 7px 14px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
.hrail-modal .hrail-modal__view[aria-pressed="true"] {
	background-color: var(--hrail-view-active-bg, var(--hrail-accent)) !important;
	color: var(--hrail-view-active-text, var(--hrail-accent-text)) !important;
}
.hrail-modal .hrail-modal__view:focus-visible { outline: 2px solid var(--hrail-accent) !important; outline-offset: 2px !important; }

/* The close look is moved to <body> so it can cover the screen. It is wrapped in
   a copy of the widget's Elementor classes so the widget's Style settings still
   reach it; this wrapper must never draw anything itself. */
.hrail-portal,
.hrail-portal > .hrail-portal__el {
	position: absolute !important; top: 0 !important; left: 0 !important;
	width: 0 !important; height: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: none !important; box-shadow: none !important;
	transform: none !important; filter: none !important; animation: none !important;
	opacity: 1 !important; visibility: visible !important; overflow: visible !important;
}