/*
 * Header (parts/header.html).
 */

/*
 * The template part wrapper. It's a <header> when the template sets
 * tagName, but match any tag so a template that forgets still works.
 */
.wp-block-template-part:has(> .pc-header) {
	--pc-red: var(--wp--preset--color--accent-4, #792215);
	--pc-dark: var(--wp--preset--color--contrast, #1e1e1e);
	--pc-utility-height: 34px;
	--pc-main-height: 72px;

	/*
	 * Content is up to 1320px wide, a bit wider than the page content (the
	 * theme's wide size, 1170px), plus the gutters on either side.
	 */
	--pc-gutter: clamp(24px, 3.2vw, 56px);
	--pc-max: calc(1320px + 2 * var(--pc-gutter));

	/* Sticky, but the red utility bar scrolls away and only the main bar stays. */
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--pc-utility-height));
	z-index: 100;
}

.wp-block-group.pc-header > * {
	margin-block: 0;
}

.pc-header .pc-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pc-max);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
	align-items: center;
}

.pc-header a {
	color: #fff;
	text-decoration: none;
}

/* Undo site-wide styles: grey paragraphs and uppercase navigation. */
.pc-header p {
	margin: 0;
	color: inherit;
}

.pc-header .wp-block-navigation {
	text-transform: none;
}

/*
 * Breadcrumb: a light strip under the dark bar (over site.css's red
 * default). Lined up with the header content: the breadcrumb plugin
 * indents its links by 15px, so the padding is the gutter minus that.
 */
.pc-header .breadcrumb-container.theme1 {
	border-bottom: 1px solid #e7e2dd;
	background: #f6f4f2;
}

.pc-header .breadcrumb-container.theme1 > ol {
	box-sizing: border-box;
	max-width: var(--pc-max);
	margin-inline: auto;
	padding-inline: calc(var(--pc-gutter) - 15px);
}

.pc-header .breadcrumb-container.theme1 li a {
	padding: 11px 10px;
	color: #6b6460;
	font-size: 13px;
}

.pc-header .breadcrumb-container.theme1 li a:hover {
	color: var(--pc-dark);
}

.pc-header .breadcrumb-container.theme1 li:last-child a {
	color: var(--pc-dark);
	font-weight: 500;
}

.pc-header .breadcrumb-container.theme1 .separator {
	color: #b5ada7;
}

/* Utility bar */

.pc-header .pc-utility {
	background: var(--pc-red);
	color: #fff;
}

.pc-header .pc-utility .pc-inner {
	height: var(--pc-utility-height);
}

.pc-header .pc-utility p,
.pc-header .pc-utility a {
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
}

.pc-header .pc-utility .pc-tagline {
	font-weight: 400;
	opacity: 0.92;
}

.pc-header .pc-utility .pc-utility-nav {
	gap: 28px;
}

.pc-header .pc-utility a:hover,
.pc-header .pc-utility a:focus-visible {
	text-decoration: underline;
}

/* Main bar */

.pc-header .pc-main {
	background: var(--pc-dark);
	color: #fff;
}

.pc-header .pc-main .pc-inner {
	height: var(--pc-main-height);
}

/* Never squeezed by the nav. */
.pc-header .pc-logo {
	flex: none;
}

/*
 * The logo's ink fills its image edge to edge, so its height is all there is
 * to space it by. About 60% of the bar's height (as on phones) leaves room
 * above the "fi" and below "columns, inc." instead of filling the bar.
 */
.pc-header .pc-logo img {
	display: block;
	width: 108px;
	height: auto;
}

.pc-header .pc-main .pc-main-right {
	gap: 40px;
}

/*
 * Items sit edge to edge, each padded by half the space between titles, so
 * hovering anywhere along the bar opens the nearest dropdown.
 */
.pc-header .pc-main .pc-main-nav {
	--pc-item-pad: 17px;
	gap: 0;
}

.pc-header .pc-main-nav > .wp-block-navigation__container {
	gap: 0;
	margin-inline: calc(-1 * var(--pc-item-pad));
}

.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item {
	padding-inline: var(--pc-item-pad);
}

/*
 * Top-level items and their links stretch to the full height of the bar, so
 * dropdowns open flush with the bottom of the bar and there's no gap to lose
 * the hover in.
 */
.pc-header .pc-main-right,
.pc-header .pc-main-nav,
.pc-header .pc-main-nav > .wp-block-navigation__container,
.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item {
	align-self: stretch;
}

.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-self: stretch;
	align-items: center;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.005em;
}

/*
 * The whole item, padding included, links to its page. The arrow stays on
 * top, so tapping it still opens the dropdown on touch screens.
 */
.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	inset: 0;
}

.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	position: relative;
}

/*
 * Red line under the item being hovered, title and arrow, which stays while
 * its dropdown is in use.
 */
.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :has(:focus-visible))::after {
	content: "";
	position: absolute;
	top: calc(50% + 17px);
	right: var(--pc-item-pad);
	left: var(--pc-item-pad);
	height: 2px;
	background: var(--pc-red);
}

/* Dropdowns */

/* Open and close straight away, without WordPress's fade. */
.pc-header .pc-main-nav .has-child > .wp-block-navigation__submenu-container {
	transition: none;
}

.pc-header .pc-main-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	padding: 8px 0;
	border: 0;
	border-radius: 0 0 6px 6px;
	background: var(--pc-dark);
	color: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/*
 * As wide as the longest item, so names fit on one line. This beats
 * WordPress's hover rule, which fixes dropdowns at 200px.
 */
.wp-block-template-part .pc-header .pc-main-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	width: max-content;
	min-width: 240px;
	max-width: 360px;
}

/* Nested fly-outs line up with the item that opened them. */
.pc-header .pc-main-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: -8px;
	border-radius: 6px;
}

.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 22px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
	background: rgba(255, 255, 255, 0.07);
}

.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	color: #fff;
}

/*
 * Arrows to fly-outs. Transparent, because WordPress gives them the row's
 * background, which doubled up the hover highlight into a square.
 */
.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: 14px;
	background: transparent;
}

/*
 * Dropdowns open to the right, lined up with their title, and fly-outs to
 * the right of their menu. WordPress flips both to the left for a
 * right-aligned menu like this one.
 */
.pc-header .pc-main-nav.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	left: var(--pc-item-pad);
	right: auto;
}

.pc-header .pc-main-nav.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	right: auto;
}

/*
 * Except the last item's fly-outs, which open leftwards so they don't run off
 * the screen, until it's wide enough for them on the right.
 */
@media (max-width: 1799px) {
	.pc-header .pc-main-nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: auto;
		right: 100%;
	}
}

/* Outline phone icon (Lucide, ISC license), also used by the bar at the bottom on phones. */
:root {
	--pc-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Phone number, set off from the nav by a divider. */

.pc-header .pc-phone {
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.pc-header .pc-phone a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.pc-header .pc-phone a::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--pc-phone-icon) center / contain no-repeat;
	mask: var(--pc-phone-icon) center / contain no-repeat;
}

/* Small laptops: tighten spacing so everything fits on one row. */

@media (max-width: 1100px) {
	.pc-header .pc-tagline {
		display: none;
	}

	.pc-header .pc-utility .pc-inner {
		justify-content: flex-end;
	}

	.pc-header .pc-main .pc-main-right {
		gap: 20px;
	}

	.pc-header .pc-main .pc-main-nav {
		--pc-item-pad: 9px;
	}

	.pc-header .pc-phone {
		padding-left: 20px;
	}

	.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 14px;
	}

	.pc-header .pc-logo img {
		width: 100px;
	}
}

/*
 * Phones and tablets: the menu button and dropdown (see header.js).
 * Below 960px the full nav doesn't fit on one row.
 */

.pc-header .pc-menu-toggle,
.pc-header .pc-mobile-menu {
	display: none;
}

@media (max-width: 959px) {
	.wp-block-template-part:has(> .pc-header) {
		--pc-utility-height: 0px;
		--pc-main-height: 60px;
	}

	.pc-header .pc-utility {
		display: none;
	}

	/* The Mobile Menu plugin's button and menu, replaced by the ones below. */
	.mob-menu-header-holder,
	.mobmenu-overlay,
	.mobmenu-panel {
		display: none !important;
	}

	.pc-header .pc-main .pc-inner {
		padding-inline: 16px;
	}

	.pc-header .pc-logo img {
		width: 90px;
		height: auto;
	}

	.pc-header .pc-main .pc-main-right {
		gap: 4px;
	}

	/* The phone number moves to the bar at the bottom (below). */
	.pc-header .pc-phone {
		display: none;
	}

	/* Menu button: three bars that turn into an X. */

	.pc-header .pc-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.pc-header .pc-menu-toggle:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	.pc-menu-toggle-bars {
		position: relative;
		width: 22px;
		height: 16px;
	}

	.pc-menu-toggle-bars span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: top 0.2s ease, transform 0.2s ease, opacity 0.15s ease;
	}

	.pc-menu-toggle-bars span:nth-child(1) {
		top: 0;
	}

	.pc-menu-toggle-bars span:nth-child(2) {
		top: 7px;
	}

	.pc-menu-toggle-bars span:nth-child(3) {
		top: 14px;
	}

	.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle-bars span:nth-child(1) {
		top: 7px;
		transform: rotate(45deg);
	}

	.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle-bars span:nth-child(2) {
		opacity: 0;
	}

	.pc-menu-toggle[aria-expanded="true"] .pc-menu-toggle-bars span:nth-child(3) {
		top: 7px;
		transform: rotate(-45deg);
	}

	/*
	 * The dropdown fills the screen below the bar and scrolls on its own.
	 * header.js sets its top to the bottom of the bar when it opens.
	 */

	.pc-header .pc-mobile-menu {
		display: block;
		position: fixed;
		top: var(--pc-main-height);
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 2px solid var(--pc-red);
		background: var(--pc-dark);
		color: #fff;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.pc-header .pc-mobile-menu.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	/*
	 * The page behind doesn't scroll, and floating buttons stay out of the way.
	 * The body clips instead of hiding its overflow (the Mobile Menu plugin
	 * sets overflow-x: hidden), since a hidden overflow would make it a
	 * scroll container and unstick the header.
	 */
	html.pc-menu-open {
		overflow: hidden;
	}

	html.pc-menu-open body {
		overflow-x: clip;
		overflow-y: visible;
	}

	html.pc-menu-open #sticky-tab,
	html.pc-menu-open .pc-mobile-bar,
	html.pc-menu-open .om-holder .om-tab-wrapper {
		visibility: hidden !important;
	}

	.pc-mobile-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pc-mobile-menu .pc-mm-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		margin: 0;
		padding: 12px 20px;
		border: 0;
		background: none;
		color: #fff;
		font: inherit;
		font-size: 15px;
		line-height: 1.35;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/*
	 * Tap feedback. Not :active, which iOS shows as soon as a finger lands,
	 * so rows would flash while scrolling. header.js adds is-tapped on
	 * an actual tap instead. It appears instantly and fades out. Mouse users
	 * also get a hover highlight.
	 */
	.pc-mobile-menu .pc-mm-row,
	.pc-mobile-menu .pc-mm-expand,
	.pc-mobile-menu .pc-mm-quick-link {
		transition: background-color 0.3s ease;
	}

	.pc-mobile-menu .pc-mm-row.is-tapped,
	.pc-mobile-menu .pc-mm-expand.is-tapped,
	.pc-mobile-menu .pc-mm-quick-link.is-tapped {
		background-color: rgba(255, 255, 255, 0.12);
		transition: none;
	}

	.pc-mobile-menu .pc-mm-call.is-tapped {
		filter: brightness(1.2);
	}

	@media (hover: hover) {
		.pc-mobile-menu .pc-mm-row:hover,
		.pc-mobile-menu .pc-mm-expand:hover,
		.pc-mobile-menu .pc-mm-quick-link:hover {
			background-color: rgba(255, 255, 255, 0.08);
		}
	}

	.pc-mobile-menu .pc-mm-row:focus-visible,
	.pc-mobile-menu .pc-mm-expand:focus-visible,
	.pc-mobile-menu .pc-mm-footer a:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	/* Top-level sections */

	.pc-mobile-menu .pc-mm-level-0 > .pc-mm-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.pc-mobile-menu .pc-mm-level-0 > .pc-mm-item > .pc-mm-row {
		min-height: 56px;
		font-size: 17px;
		font-weight: 600;
	}

	.pc-mobile-menu .pc-mm-level-0 > .pc-current > .pc-mm-row {
		box-shadow: inset 3px 0 0 var(--pc-red);
	}

	/* Sections slide open. */

	.pc-mobile-menu .pc-mm-group {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
	}

	.pc-mobile-menu .pc-mm-group.is-open {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.25s ease, visibility 0s;
	}

	.pc-mobile-menu.pc-mm-instant .pc-mm-group {
		transition: none;
	}

	.pc-mobile-menu .pc-mm-group-inner {
		min-height: 0;
		overflow: hidden;
	}

	.pc-mobile-menu .pc-mm-level-1 {
		padding: 4px 0 10px;
		background: #282828;
	}

	.pc-mobile-menu .pc-mm-level-1 .pc-mm-row {
		padding-left: 32px;
	}

	.pc-mobile-menu .pc-mm-level-2 {
		background: #313131;
	}

	.pc-mobile-menu .pc-mm-level-2 .pc-mm-row {
		padding-left: 48px;
		font-size: 14px;
	}

	.pc-mobile-menu .pc-mm-row[aria-current="page"] {
		box-shadow: inset 3px 0 0 var(--pc-red);
		font-weight: 600;
	}

	/* A link with its own expand button, e.g. EnduraStone™. */

	.pc-mobile-menu .pc-mm-split {
		display: flex;
		align-items: stretch;
	}

	.pc-mobile-menu .pc-mm-split > .pc-mm-row {
		flex: 1;
	}

	.pc-mobile-menu .pc-mm-expand {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 52px;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		background: none;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.pc-mobile-menu .pc-mm-chevron {
		flex: none;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		opacity: 0.8;
		transform: rotate(45deg);
		transition: transform 0.2s ease, margin 0.2s ease;
	}

	.pc-mobile-menu [aria-expanded="true"] > .pc-mm-chevron {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	/* Quick links and phone */

	.pc-mobile-menu .pc-mm-footer {
		padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
	}

	.pc-mobile-menu .pc-mm-quick {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.pc-mobile-menu .pc-mm-quick-link,
	.pc-mobile-menu .pc-mm-call {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 44px;
		padding: 8px 10px;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	.pc-mobile-menu .pc-mm-quick-link {
		height: 100%;
		border: 1px solid rgba(255, 255, 255, 0.25);
	}

	.pc-mobile-menu .pc-mm-call {
		min-height: 48px;
		margin-top: 12px;
		background: var(--pc-red);
		font-size: 16px;
		font-weight: 700;
	}

	.pc-mobile-menu .pc-mm-tagline {
		margin-top: 18px;
		color: rgba(255, 255, 255, 0.55);
		font-size: 13px;
		text-align: center;
	}
}

/*
 * Tablets: as many of the main nav's dropdowns as fit, dropping off from the
 * end as the screen narrows. The menu button still has everything.
 */
@media (max-width: 959px) {
	.pc-header .pc-main-nav {
		margin-right: 16px;
	}

	/* No room for fly-outs beside the dropdowns, so they're left out here. */
	.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
	.pc-header .pc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}
}

@media (max-width: 919px) {
	.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) {
		display: none;
	}
}

@media (max-width: 839px) {
	.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+5) {
		display: none;
	}
}

@media (max-width: 729px) {
	.pc-header .pc-main-nav > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+4) {
		display: none;
	}
}

@media (max-width: 639px) {
	.pc-header .pc-main-nav {
		display: none;
	}
}

/*
 * Phones and tablets: a bar pinned to the bottom with the quote buttons and a
 * call button (pci_mobile_bar_markup() in functions.php).
 */

.pc-mobile-bar {
	display: none;
}

@media (max-width: 959px) {
	/*
	 * Cut off anything wider than the screen, e.g. a long word in a big
	 * heading. Otherwise the page gets wider than the phone, and the bar with
	 * it, pushed partly off the screen. Clip, not hidden (which the Mobile
	 * Menu plugin sets on the body), so the header still sticks; :root to
	 * outrank that.
	 */
	:root,
	:root body {
		overflow-x: clip;
	}

	.pc-mobile-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: grid;
		/* Equal quote buttons, but Free Column Quote never narrower than its label. */
		grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr) 48px;
		gap: 8px;
		box-sizing: border-box;
		/*
		 * On iPhones the buttons sit above the home indicator, and the bar
		 * fills the screen's rounded bottom edge below them (viewport-fit=cover,
		 * see pci_viewport_meta() in functions.php).
		 */
		padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		background: var(--wp--preset--color--contrast, #1e1e1e);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16);
	}

	/* Room at the end of the page so the bar doesn't cover the footer. */
	body {
		padding-bottom: calc(58px + max(10px, env(safe-area-inset-bottom)));
	}

	/*
	 * OptiMonk's "Get Started" strip (left after its popup is closed) sits on
	 * the bar instead of covering it.
	 */
	.om-holder .om-tab-wrapper {
		bottom: calc(58px + max(10px, env(safe-area-inset-bottom))) !important;
	}

	/*
	 * Request a Quote's JotForm card form centers each card in its frame, a
	 * fixed 640px, which put START under the bar on shorter screens. Fit the
	 * frame between the header (60px) and the bar instead.
	 */
	iframe[id="241066230291043"] {
		height: max(460px, calc(100svh - 60px - 58px - max(10px, env(safe-area-inset-bottom)))) !important;
	}

	/* No live chat on phones and tablets; the bar's call button instead. */
	.woot--bubble-holder,
	.woot-widget-bubble,
	.woot-widget-holder {
		display: none !important;
	}

	.pc-mobile-bar .pc-mobile-bar-button {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 48px;
		padding: 0 8px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 2px;
		background: transparent;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.pc-mobile-bar .pc-mobile-bar-primary {
		border-color: var(--wp--preset--color--accent-4, #792215);
		background: var(--wp--preset--color--accent-4, #792215);
		color: #fff;
	}

	.pc-mobile-bar .pc-mobile-bar-call {
		padding: 0;
	}

	.pc-mobile-bar .pc-mobile-bar-call::before {
		content: "";
		width: 20px;
		height: 20px;
		background: currentColor;
		-webkit-mask: var(--pc-phone-icon) center / contain no-repeat;
		mask: var(--pc-phone-icon) center / contain no-repeat;
	}
}

/* Small phones: smaller text so the labels stay on one line. */
@media (max-width: 389px) {
	.pc-mobile-bar .pc-mobile-bar-button {
		font-size: 14px;
	}
}

/*
 * With viewport-fit=cover, phones in landscape put the page under the notch,
 * so keep everything clear of it, like without it.
 */
body,
.pc-header .pc-mobile-menu {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* The admin bar scrolls away on phones, so the header sticks to the very top. */
@media (max-width: 600px) {
	.wp-block-template-part:has(> .pc-header) {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-menu-toggle-bars span,
	.pc-header .pc-mobile-menu,
	.pc-mobile-menu .pc-mm-group,
	.pc-mobile-menu .pc-mm-chevron {
		transition: none !important;
	}
}