/* Panoramic Wholesale — coded header. Matches the Elementor Pro header it replaces.
   Breakpoints as Elementor's: tablet <= 1024px, mobile <= 767px. */

.pnrh {
	--pnrh-pink: #E2B0B1;
	--pnrh-blush: #FAEBEB;
	--pnrh-ink: #3D484A;
	--pnrh-text: #7A7A7A;
	--pnrh-grey: #F7F7F7;
	--pnrh-menu: #7D8D91;
	--pnrh-head: Poppins, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pnrh-body: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	--pnrh-menu-font: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	position: relative;
	z-index: 200;
	font-family: var(--pnrh-body);
}

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

.pnrh .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pnrh .pnrh-i {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * Notice bar (shortcode), e.g. "Free delivery on orders over …"
 * ------------------------------------------------------------------ */
.pnrh-notice {
	position: relative;
	z-index: 100;
}

.pnrh-notice #wfspb-top-bar {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
}

/* ------------------------------------------------------------------ *
 * Thin bar: two buttons on the right (tablet and desktop)
 * ------------------------------------------------------------------ */
.pnrh-top {
	position: relative;
	z-index: 99;
	border-bottom: 1px solid var(--pnrh-pink);
	background: var(--pnrh-blush);
}

.pnrh-top__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.pnrh-top__row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	padding: 10px;
}

.pnrh .pnrh-btn {
	display: inline-block;
	padding: 2px 20px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-family: var(--pnrh-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 24px;
	text-decoration: none;
	text-transform: capitalize;
	transition: background-color .3s, color .3s, border-color .3s;
}

.pnrh .pnrh-btn--outline {
	border: 1px solid var(--pnrh-pink);
	color: var(--pnrh-text);
}

.pnrh .pnrh-btn--solid {
	background: var(--pnrh-pink);
}

.pnrh .pnrh-btn:hover,
.pnrh .pnrh-btn:focus {
	background: var(--pnrh-ink);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Main row: logo, search, account / wishlist / cart
 * ------------------------------------------------------------------ */
.pnrh-main {
	position: relative;
	z-index: 150;
	padding: 0 10px;
	background: #fff;
}

.pnrh-main__inner {
	display: grid;
	grid-template-columns: 25% 50% 25%;
	align-items: center;
	max-width: 1140px;
	margin: 0 auto;
	padding: 20px 0;
}

.pnrh-main__left {
	display: none;
}

.pnrh-main__logo {
	padding: 0 10px;
}

.pnrh-logo {
	display: block;
	line-height: 0;
}

/* As the live site shows it: the picture fills the column and is 120px high. */
.pnrh-logo__img {
	display: block;
	width: 100%;
	height: 120px;
	max-width: 100%;
	border-radius: 24px;
}

.pnrh-logo__text {
	font-family: var(--pnrh-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pnrh-ink);
}

.pnrh-main__search {
	padding: 0 25px;
}

.pnrh-main__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 10px;
}

.pnrh-main__tools .pnrh-tool--account {
	order: 1;
}

.pnrh-main__tools .pnrh-tool--wishlist {
	order: 2;
}

.pnrh-main__tools .pnrh-cart {
	order: 3;
}

/* Round grey buttons */
.pnrh .pnrh-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 15px;
	border: 0;
	border-radius: 25px;
	background: var(--pnrh-grey);
	color: var(--pnrh-ink);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.pnrh .pnrh-tool:hover,
.pnrh .pnrh-tool:focus {
	background: var(--pnrh-grey);
	color: var(--pnrh-ink);
}

.pnrh .pnrh-tool--cart .pnrh-i {
	font-size: 20px;
}

.pnrh .pnrh-cart__count {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background: #D9534F;
	color: #fff;
	font-family: var(--pnrh-body);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
}

/* The Elementor cart: no extra spacing around it */
.pnrh-cart--elementor > .elementor,
.pnrh-cart--elementor .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	width: auto;
	min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Search field
 * ------------------------------------------------------------------ */
.pnrh-search {
	display: flex;
	width: 100%;
	min-height: 48px;
	margin: 0;
	background: transparent;
}

.pnrh .pnrh-search input.pnrh-search__input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 6px 20px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 24px 0 0 24px;
	background: #F7F7F7;
	box-shadow: none;
	color: #515962;
	font-family: var(--pnrh-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}

.pnrh .pnrh-search input.pnrh-search__input::placeholder {
	color: #515962;
	opacity: .7;
}

.pnrh .pnrh-search input.pnrh-search__input:focus {
	border-color: transparent;
}

.pnrh .pnrh-search__submit {
	flex: 0 0 56px;
	min-width: 56px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 24px 24px 0;
	background: var(--pnrh-pink);
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
}

.pnrh .pnrh-search__submit:hover,
.pnrh .pnrh-search__submit:focus {
	background: var(--pnrh-pink);
	color: #fff;
}

.pnrh .pnrh-search__submit .pnrh-i {
	margin: 0 auto;
}

/* The Elementor Search widget, when the site uses it */
.pnrh-search--elementor {
	display: block;
	min-height: 0;
	overflow: visible;
	border-radius: 0;
	background: transparent;
}

.pnrh-search--elementor .elementor-element {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Desktop menu (> 1024px)
 * ------------------------------------------------------------------ */
.pnrh-nav {
	position: relative;
	z-index: 100;
	background: #fff;
}

.pnrh-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pnrh-nav__item {
	display: flex;
	margin: 0 15px 0 0;
	padding: 0;
}

.pnrh-nav__item:last-child {
	margin-right: 0;
}

.pnrh-nav__title {
	display: flex;
	padding: 3px;
	border-bottom: 3px solid #fff;
	font-family: var(--pnrh-menu-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
	transition: border-color .3s, color .3s;
}

.pnrh-nav__item:hover .pnrh-nav__title,
.pnrh-nav__item.is-open .pnrh-nav__title {
	border-bottom-color: var(--pnrh-menu);
}

.pnrh .pnrh-nav__link {
	display: flex;
	padding: 0;
	color: var(--pnrh-menu);
	text-decoration: none;
}

.pnrh .pnrh-nav__link:hover,
.pnrh .pnrh-nav__link:focus {
	color: var(--pnrh-menu);
}

.pnrh .pnrh-nav__text {
	font-family: var(--pnrh-menu-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--pnrh-menu);
}

/* The little arrow button is for keyboards and screen readers only (it keeps
   the 5px the live menu leaves after each title). */
.pnrh .pnrh-nav__toggle {
	flex: 0 0 5px;
	width: 5px;
	height: 24px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;
}

.pnrh .pnrh-nav__toggle:focus-visible {
	outline: 2px solid var(--pnrh-pink);
	outline-offset: 1px;
}

.pnrh .pnrh-nav__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 2147483620;
	display: flex;
	justify-content: flex-start;
}

.pnrh .pnrh-nav__panel[hidden] {
	display: none;
}

.pnrh-nav__panel-inner {
	width: fit-content;
	max-width: 100%;
}

.pnrh-nav__panel-inner > .elementor {
	width: fit-content;
	max-width: 100%;
}

.pnrh-panel-links {
	margin: 0;
	padding: 16px 20px;
	list-style: none;
	background: var(--pnrh-blush);
	border-radius: 8px;
}

.pnrh-panel-links a {
	display: block;
	padding: 6px 0;
	color: var(--pnrh-ink);
	font-family: var(--pnrh-head);
	font-size: 14px;
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Tablet and mobile (<= 1024px): burger, search icon, centred logo
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* The bars above the logo row run edge to edge; the 10px frame is on the logo row. */
	.pnrh {
		background: #fff;
	}

	.pnrh-main {
		padding: 10px 20px;
	}

	.pnrh-nav {
		display: none;
	}

	.pnrh-top__inner {
		padding: 0 24px;
	}

	.pnrh-top__row {
		gap: 8px;
		width: 85%;
	}

	.pnrh-main {
		padding: 0;
	}

	.pnrh-main__inner {
		grid-template-columns: 22.8% 54.4% 22.8%;
		max-width: 1024px;
		padding: 0;
	}

	.pnrh-main__left {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px;
	}

	.pnrh-main__logo {
		display: flex;
		justify-content: center;
		padding: 10px;
	}

	.pnrh-logo {
		width: 150px;
	}

	.pnrh-logo__img {
		width: 150px;
		max-width: 150px;
		height: auto;
	}

	.pnrh-main__search,
	.pnrh-main__tools .pnrh-tool--account {
		display: none;
	}

	.pnrh-main__tools {
		padding: 10px;
	}

	.pnrh .pnrh-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		width: 40px;
		height: 37px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: var(--pnrh-grey);
		color: var(--pnrh-ink);
		font-size: 22px;
		cursor: pointer;
	}

	.pnrh .pnrh-searchtoggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: rgba(0, 0, 0, .05);
		color: #33373D;
		font-size: 15.4px;
		cursor: pointer;
	}

	.pnrh .pnrh-searchtoggle:hover,
	.pnrh .pnrh-searchtoggle:focus {
		background: rgba(0, 0, 0, .05);
		color: #33373D;
	}
}

@media (max-width: 767px) {
	.pnrh-top {
		display: none;
	}

	.pnrh-main__inner {
		grid-template-columns: 25% 50% 25%;
	}

	.pnrh .pnrh-burger {
		flex: 0 0 37.7px;
		width: 37.7px;
		height: 33.1px;
		font-size: 18px;
	}

	.pnrh .pnrh-searchtoggle {
		flex: 0 0 24.8px;
		width: 24.8px;
	}

	.pnrh-logo {
		width: 100%;
	}

	.pnrh-logo__img {
		width: 100%;
		max-width: 100%;
		height: 78.6px;
	}

	.pnrh-main__tools {
		gap: 0;
		padding: 0;
	}

	.pnrh-main__tools .pnrh-tool--wishlist,
	.pnrh-main__tools .pnrh-cart:not(.pnrh-cart--elementor) > .pnrh-tool {
		margin-left: 5px;
	}

	.pnrh .pnrh-tool {
		padding: 5px 10px;
	}

	.pnrh .pnrh-tool--cart .pnrh-i {
		font-size: 16px;
	}

	.pnrh .pnrh-drawer .pnrh-tool {
		padding: 10px 15px;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile menu (drawer)
 * ------------------------------------------------------------------ */
.pnrh .pnrh-drawer {
	display: none;
}

@media (max-width: 1024px) {
	.pnrh .pnrh-drawer:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 2147483630;
		display: block;
	}

	body.pnrh-locked {
		overflow: hidden;
	}
}

.pnrh-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
}

.pnrh-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 400px;
	max-width: 100%;
	padding: 10px;
	overflow: auto;
	background: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.pnrh-drawer__panel {
		width: 75%;
	}
}

.pnrh-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
}

.pnrh .pnrh-drawer__close {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 10px 15px;
	border: 0;
	border-radius: 25px;
	background: #fff;
	color: var(--pnrh-ink);
	font-family: var(--pnrh-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.pnrh .pnrh-drawer__close:hover,
.pnrh .pnrh-drawer__close:focus {
	background: #fff;
	color: var(--pnrh-ink);
}

.pnrh-drawer__close .pnrh-i {
	width: 16px;
	height: 16px;
}

.pnrh-drawer__search {
	padding: 10px;
}

.pnrh-drawer__search .pnrh-search input.pnrh-search__input[type="search"] {
	font-size: 14px;
}

.pnrh-acc__item {
	margin: 0 0 10px;
	padding: 0;
}

.pnrh .pnrh-acc__title:hover,
.pnrh .pnrh-acc__title:focus {
	color: #1F2124;
}

.pnrh .pnrh-acc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	color: #1F2124;
	cursor: pointer;
	list-style: none;
	text-decoration: none;
}

.pnrh .pnrh-acc__title::-webkit-details-marker {
	display: none;
}

.pnrh .pnrh-acc__text {
	font-family: var(--pnrh-menu-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 19.6px;
	color: #1F2124;
}

.pnrh-acc__icon {
	display: flex;
	color: #1F2124;
}

.pnrh-acc__icon .pnrh-i {
	width: auto;
	height: 15px;
}

.pnrh-acc__icon .pnrh-acc__opened,
.pnrh-acc__item[open] .pnrh-acc__icon .pnrh-acc__closed {
	display: none;
}

.pnrh-acc__item[open] .pnrh-acc__icon .pnrh-acc__opened {
	display: block;
}

.pnrh-acc__panel > .elementor {
	width: 100%;
}

/* Template panels in the mobile menu: the picture stays in front of the text,
   as it is on bigger screens (Elementor's own rules stack it on phones). */
@media (max-width: 767px) {
	.pnrh .elementor-widget-image-box .elementor-image-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: start;
	}

	.pnrh .elementor-widget-image-box .elementor-image-box-img {
		margin-block: 0 !important;
		margin-inline: 0 !important;
	}

	.pnrh .elementor-widget-image-box .elementor-image-box-content {
		text-align: start;
	}

	/* Smaller pictures with more air between the rows, and every picture the same round size
	   (they used to touch and differ in height). */
	.pnrh .elementor-widget-image-box {
		margin-bottom: 22px;
	}

	.pnrh .elementor-widget-image-box:last-child {
		margin-bottom: 0;
	}

	.pnrh .elementor-widget-image-box .elementor-image-box-img {
		flex: 0 0 auto;
		width: 64px !important;
		height: 64px;
	}

	.pnrh .elementor-widget-image-box .elementor-image-box-img a {
		display: block;
		width: 64px;
		height: 64px;
	}

	.pnrh .elementor-widget-image-box .elementor-image-box-img img {
		display: block;
		width: 64px;
		max-width: none;
		height: 64px;
		object-fit: cover;
		border-radius: 50%;
	}
}

/* ------------------------------------------------------------------ *
 * Full-screen search (the search icon on tablet and mobile)
 * ------------------------------------------------------------------ */
/* The overlay is moved to <body> by header.js (so no parent can trap it), hence no .pnrh prefix. */
.pnrh-fs {
	position: fixed;
	inset: 0;
	z-index: 2147483630;
	display: flex;
	align-items: center;
	padding: 0 15%;
	background: rgba(0, 0, 0, .8);
}

.pnrh-fs[hidden] {
	display: none;
}

.pnrh-fs__form {
	width: 100%;
	margin: 0;
}

.pnrh-fs .pnrh-fs__input {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: solid #fff;
	border-width: 0 0 1px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 1.5;
	outline: 0;
	text-align: center;
}

.pnrh-fs .pnrh-fs__input::placeholder {
	color: rgba(255, 255, 255, .6);
}

.pnrh-fs .pnrh-fs__close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 6px;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.pnrh-fs .pnrh-fs__close:hover,
.pnrh-fs .pnrh-fs__close:focus {
	background: transparent;
	color: #fff;
}

.pnrh-fs__close .pnrh-i {
	width: 100%;
	height: 100%;
}

body.admin-bar .pnrh-fs .pnrh-fs__close {
	top: 47px;
}

@media (min-width: 783px) {
	body.admin-bar .pnrh-fs .pnrh-fs__close {
		top: 33px;
	}
}

@media (max-width: 767px) {
	.pnrh-fs {
		padding: 0 24px;
		background: rgba(0, 0, 0, .92);
	}

	.pnrh-fs .pnrh-fs__input {
		font-size: 28px;
		text-align: start;
		-webkit-appearance: none;
		appearance: none;
	}

	.pnrh-fs .pnrh-fs__close {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
		padding: 10px;
	}
}