/*
 * Sticky side rail.
 *
 * A narrow column of icons pinned to the edge of the viewport: destinations at
 * the top, the visitor's own things at the foot. Labels live in tooltips rather
 * than on the rail, which is what keeps it narrow enough to sit beside the page
 * instead of taking a column from it.
 */
.plt-rail {
	--plt-rail-w: 68px;
	--plt-rail-size: 36px;
	--plt-rail-chip: 36px;

	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 393;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	width: var(--plt-rail-w);
	padding: 20px 0;
	border-inline-end: 1px solid var(--brdcolor-gray-300, #e6e6e6);
	background: var(--bgcolor-white, #fff);
}

.admin-bar .plt-rail {
	top: var(--pt-admin-bar-h, 32px);
}

.plt-rail__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/*
 * The foot is separated by space rather than a rule: the gap already says these
 * belong to the visitor, and a line across a 68px column reads as clutter.
 */
.plt-rail__group--foot {
	margin-top: auto;
}

/* The last row lifts clear of the viewport edge rather than sitting on it. */
.plt-rail__group--foot > .plt-rail__item:last-child {
	margin-bottom: 15px;
}

.plt-rail__item {
	position: relative;
	display: flex;
}

.plt-rail__item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--plt-rail-size);
	height: var(--plt-rail-size);
	border-radius: var(--pt-inner-brd-radius, 10px);
	color: var(--color-gray-600, #475467);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.plt-rail__item > a:hover {
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--pt-primary-color);
}

/* The page you are on stays lit, so the rail doubles as a position marker. */
.plt-rail__item.is-current > a {
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--pt-primary-color);
}

.plt-rail__icon {
	font-size: 22px;
	line-height: 1;
}

/*
 * Contact rows read as buttons: a filled circle carries more weight than an
 * outline glyph, which is what makes "call us" findable on a rail of icons.
 * The rule above the first of them divides the visitor's own row from the ways
 * to reach a person, and spans the rail's full width rather than the button so
 * it reads as dividing the column.
 */
.plt-rail__item--solid {
	margin-top: 14px;
}

.plt-rail__item--solid::before {
	content: "";
	position: absolute;
	inset-inline: calc((var(--plt-rail-size) - var(--plt-rail-w)) / 2);
	top: -14px;
	border-top: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

/*
 * Only the first of them opens the section; the rest just follow, with a little
 * more air between them than the icon rows above get — these are two separate
 * ways to reach a person, not a list.
 */
.plt-rail__item--solid + .plt-rail__item--solid {
	margin-top: 8px;
}

.plt-rail__item--solid + .plt-rail__item--solid::before {
	content: none;
}

.plt-rail__item--solid > a {
	width: var(--plt-rail-chip);
	height: var(--plt-rail-chip);
	border-radius: 50%;
	background: #333;
	color: #fff;
}

.plt-rail__item--solid > a:hover,
.plt-rail__item--solid.is-current > a {
	background: var(--pt-primary-color);
	color: #fff;
}

/* Support gets the colour people already read as "someone will answer". */
.plt-rail__item--support > a {
	background: #67a369;
}

.plt-rail__item--solid .plt-rail__icon {
	font-size: 17px;
}

/*
 * The site's mark heads the rail, with a rule beneath it separating the brand
 * from the places the rail leads to — the mirror of the divider above the
 * account row at the foot.
 */
.plt-rail__item--brand {
	margin-bottom: 14px;
}

.plt-rail__item--brand::after {
	content: "";
	position: absolute;
	inset-inline: calc((var(--plt-rail-size) - var(--plt-rail-w)) / 2);
	bottom: -14px;
	border-bottom: 1px solid var(--brdcolor-gray-300, #e6e6e6);
}

.plt-rail__item--brand > a:hover {
	background: none;
}

.plt-rail__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: var(--plt-rail-chip);
	height: var(--plt-rail-chip);
	border: 1px solid var(--brdcolor-gray-300, #e6e6e6);
	border-radius: 50%;
	background: var(--bgcolor-white, #fff);
	transition: border-color .2s ease;
}

.plt-rail__item--brand > a:hover .plt-rail__brand {
	border-color: var(--pt-primary-color);
}

.plt-rail__brand img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
}

/* The account row is a face rather than a glyph. */
.plt-rail__item--avatar > a:hover,
.plt-rail__item--avatar.is-current > a {
	background: none;
}

.plt-rail__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: var(--plt-rail-chip);
	height: var(--plt-rail-chip);
	border: 1px solid var(--brdcolor-gray-300, #e6e6e6);
	border-radius: 50%;
	background: var(--bgcolor-gray-100, #f6f7f9);
	color: var(--color-gray-500, #8b93a3);
	font-size: 17px;
	transition: border-color .2s ease;
}

.plt-rail__item--avatar > a:hover .plt-rail__avatar,
.plt-rail__item--avatar.is-current > a .plt-rail__avatar {
	border-color: var(--pt-primary-color);
}

.plt-rail__avatar img,
.plt-rail__avatar-blank {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* The frame already clips; the placeholder fills it edge to edge. */
.plt-rail__item--avatar .plt-rail__avatar {
	background: none;
}

/*
 * The tooltip is the only place a label appears, so it has to arrive quickly and
 * read cleanly against whatever it covers.
 */
.plt-rail__tip {
	position: absolute;
	top: 50%;
	inset-inline-start: calc(100% + 8px);
	z-index: 1;
	padding: 6px 10px;
	border-radius: var(--pt-inner-brd-radius, 10px);
	background: var(--pt-title-color, #1f2430);
	color: #fff;
	font-size: var(--pt-fs-sm);
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateX(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
}

.plt-rail__item:hover .plt-rail__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/*
 * The theme already reserves room through --pt-sticky-nav-w, which sits at
 * almost zero until something claims it. Setting it here means the header clone
 * and every other rule that reads it move over too, rather than only the body.
 */
.pt-sticky-nav-enabled {
	--pt-sticky-nav-w: 68px;

	margin-inline-start: var(--pt-sticky-nav-w);
}

/*
 * The page is inset by a margin, but anything fixed is positioned against the
 * viewport and ignores that margin — it would slide under the rail. These are
 * the elements the theme pins to the window, each pushed clear of the column.
 */
.pt-sticky-nav-enabled:not([class*="wrapper-boxed"]) .whb-header.whb-sticky-real.whb-sticked .whb-main-header,
.pt-sticky-nav-enabled .whb-sticky-header.whb-clone {
	margin-inline-start: var(--pt-sticky-nav-w);
}

.pt-sticky-nav-enabled :is(.woocommerce-store-notice, .pt-sticky-btn, .pt-sidebar-opener) {
	inset-inline-start: var(--pt-sticky-nav-w);
}

/*
 * Below the desktop breakpoint the bottom navbar already carries these
 * destinations, and 68px is too much of a phone's width to give away.
 */
@media (max-width: 1024px) {
	.plt-rail {
		display: none;
	}

	.pt-sticky-nav-enabled {
		--pt-sticky-nav-w: 0px;

		margin-inline-start: 0;
	}
}