/* ==========================================================================
   PrimatePet — HEADER layer  (P1)
   Scope: .pp-header* · .pp-topbar* · .pp-nav/.pp-menu/.pp-mega · .pp-tools*
          .pp-mhead* · .pp-drawer* · .pp-search* · .pp-sidecart* · .pp-usermodal*
          .pp-overlay · .pp-close · .pp-logo
   No global resets here, no token re-declaration — pp-tokens.css owns those.

   ⛔ Every interactive overlay below (drawer, search, side cart, auth modal)
   carries EXPLICIT position / z-index / background / pointer-events. Do not
   refactor them onto shared utility classes: the recurring failure on this
   pipeline is an overlay that renders behind content with a transparent
   backdrop, and taps land on the page underneath.

   z-index ladder (single source of truth):
     800  sticky header clone (desktop only, >=1200px)
     900  absolute main header / PINNED MOBILE BAR (<=1199.98px, see §12)
     1000 drawer backdrop        1010 drawer
     1100 generic overlay        1110 side cart
     1200 search overlay
     1300 auth modal
     1400 floating contact (pp-footer.css)
     1500 toasts (pp-base.css / pp-account.css)
   ========================================================================== */

/* ==========================================================================
   1. HEADER SHELL
   The main header is position:absolute, transparent and 150.33px tall — it
   OVERLAYS the hero. The white box inside it is container-width, not full
   bleed, so the hero's #EFEFEF shows either side of it.
   ========================================================================== */
.pp-header {
	position: relative;
	z-index: 900;
}

.pp-header__main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 900;
	background-color: transparent;
}

.pp-header__row {
	height: var(--pp-header-h);
}

/* The white inset box: 1330px container, 100px tall, pure white. */
.pp-header__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--pp-header-h);
	background-color: #fff;
	padding: 0 15px 0 25px;
}

.pp-header__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 15px;
}

.pp-header__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.pp-logo a { display: inline-block; line-height: 0; }
.pp-logo img { width: auto; vertical-align: middle; }

/* ==========================================================================
   2. TOP BAR — 50px. Magenta #940C69 on the FRONT PAGE (header doc 2212);
   transparent with dark text on inner pages (header doc 14). Both measured.
   ========================================================================== */
.pp-topbar {
	width: 100%;
	background-color: transparent;
}
.pp-topbar--magenta { background-color: var(--pp-magenta); }

.pp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--pp-topbar-h);
	padding: 11px 0 10px;
}

.pp-topbar__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1;
}
.pp-topbar__list li { position: relative; display: flex; align-items: center; }

/* The 2x15px #B7B7B7 divider between items. */
.pp-topbar__list li + li {
	margin-left: 34px;
	padding-left: 34px;
}
.pp-topbar__list li + li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 15px;
	background-color: var(--pp-divider);
}

.pp-topbar__list a {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-family: var(--pp-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	white-space: nowrap;
}
.pp-topbar__list a .pp-i { margin-right: 12px; flex: none; }
.pp-topbar__list--links a .pp-i { margin-right: 0; }

.pp-topbar__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.pp-topbar__user {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 50px;
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
}

/* ---- colour variants ---- */
.pp-topbar--magenta .pp-topbar__list a,
.pp-topbar--magenta .pp-topbar__user,
.pp-topbar--magenta .pp-topbar__user a { color: #fff; }
.pp-topbar--magenta .pp-topbar__list--left a .pp-i { color: #fff; }
.pp-topbar--magenta .pp-topbar__list--links a .pp-i { color: var(--pp-brand); }
.pp-topbar--magenta .pp-topbar__list a:hover,
.pp-topbar--magenta .pp-topbar__user a:hover { color: var(--pp-brand); }

.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__list a,
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__user,
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__user a { color: var(--pp-primary); }
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__list a .pp-i { color: var(--pp-brand); }
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__list a:hover,
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__user a:hover { color: var(--pp-brand); }
.pp-topbar:not(.pp-topbar--magenta) .pp-topbar__user { font-weight: 700; }

/* ==========================================================================
   3. PRIMARY NAV + MEGA PANEL
   Measured: li > a is Anybody 600 17px / line-height 100px, 52px left margin,
   #000 with a brand hover; the dropdown is white, min-width 210px, 2px
   transparent border, shadow 0 0 10px rgba(0,0,0,.1), hairline row dividers,
   and a 10x2 brand bar slides in on hover while the label shifts to 35px.
   ========================================================================== */
.pp-nav { display: flex; }

.pp-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pp-menu > li { position: relative; display: inline-block; vertical-align: middle; margin: 0 0 0 52px; }
.pp-menu > li:first-child { margin-left: 0; }

.pp-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pp-font);
	font-size: var(--pp-fs-nav);
	font-weight: 600;
	line-height: var(--pp-lh-nav);
	color: var(--pp-primary);
	white-space: nowrap;
}
.pp-menu > li > a:hover { color: var(--pp-brand); }
/* ⚠️ The CURRENT item stays BLACK. The Patte theme's own rule paints it brand,
   but both header documents (Elementor 0c2c1f3 main, 1975a3c sticky) override
   `li.current_page_item > a` back to --e-global-color-primary (#000). Measured. */
.pp-menu > li.current-menu-item > a { color: var(--pp-primary); }
.pp-menu__chev { flex: none; margin-top: 2px; }

/* --- the mega panel (BRIEF D5: three groups, built from product_cat) --- */
.pp-menu .sub-menu { list-style: none; margin: 0; padding: 0; }

.pp-menu > li.pp-group { position: static; }

.pp-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 950;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	border: none;
	border-radius: 0 0 5px 5px;
	box-shadow: var(--pp-shadow-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease;
}
.pp-menu > li.pp-group:hover > .pp-mega,
.pp-menu > li.pp-group:focus-within > .pp-mega,
.pp-menu > li.pp-group.is-open > .pp-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pp-mega__inner { display: block; padding: 34px 0 38px; }
.pp-mega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.pp-mega__col { min-width: 0; }

.pp-mega__head {
	display: block;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--pp-accent);
	font-family: var(--pp-font);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--pp-primary);
}

.pp-mega__list > li,
.pp-mega__sub > li { position: relative; white-space: normal; }
.pp-mega__list > li:not(:last-child) { border-bottom: 1px solid rgba(228, 228, 228, 0.95); }

.pp-mega a {
	position: relative;
	display: block;
	padding: 0.7em 20px 0.7em 20px;
	font-family: var(--pp-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--pp-body);
	transition: padding 300ms ease, color 300ms ease;
}
.pp-mega a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 15px;
	width: 0;
	height: 2px;
	background-color: var(--pp-brand);
	transition: width 500ms ease;
}
.pp-mega a:hover {
	padding-left: 35px;
	color: var(--pp-brand);
}
.pp-mega a:hover::before { width: 10px; }

.pp-mega__sub { padding-left: 14px; }
.pp-mega__sub a { font-size: 14px; padding-top: 0.4em; padding-bottom: 0.4em; color: var(--pp-muted); }

/* ==========================================================================
   4. TOOL CLUSTER — search · wishlist · cart
   ========================================================================== */
.pp-tools { display: flex; align-items: center; }

.pp-tool {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pp-primary);
	cursor: pointer;
	transition: color var(--pp-ease-fast);
}
.pp-tool:hover { color: var(--pp-brand); }

.pp-tool--search {
	width: 30px;
	height: 30px;
	margin-right: 20px;
	padding-right: 15px;
	box-sizing: content-box;
	border-right: 2px solid var(--pp-divider);
}

/* Account icon — net-new vs the source (STANDARDS #1), same 30px tool metrics. */
.pp-tool--account {
	width: 30px;
	height: 30px;
	margin-right: 14px;
}

.pp-tool--wish {
	width: 30px;
	height: 30px;
	margin-right: 4px;
}
.pp-wish-count {
	position: absolute;
	top: 0;
	right: -2px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	border-radius: 15px;
	background-color: var(--pp-wish-badge);
	color: #fff;
	font-family: var(--pp-font);
	font-size: 10px;
	font-weight: 600;
	text-align: center;
}
.pp-wish-count[data-tip='0'] { display: none; }

/* 54px brand disc with a white glyph, black 25px count bubble. */
.pp-tool--cart {
	position: relative;
	width: 54px;
	height: 54px;
	margin: 0 21px 0 4px;
	color: #fff;
}
.pp-tool--cart::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	background-color: var(--pp-brand);
	transition: background-color var(--pp-ease);
}
.pp-tool--cart .pp-i { position: relative; z-index: 1; }
.pp-tool--cart:hover { color: #fff; }
.pp-tool--cart:hover::before { background-color: var(--pp-primary); }

.pp-cart-count {
	position: absolute;
	top: -3px;
	right: -3px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: var(--pp-primary);
	color: #fff;
	font-family: var(--pp-font);
	font-size: 12px;
	font-weight: 700;
	transition: background-color var(--pp-ease-fast);
}
.pp-cart-count[data-count='0'] { display: none; }
.pp-tool--cart:hover .pp-cart-count { background-color: var(--pp-brand); }

/* ==========================================================================
   5. STICKY CLONE — separate fixed bar, white, shadow 0 1px 72px rgba(0,0,0,.08)
   ========================================================================== */
.pp-header__sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 800;
	background-color: #fff;
	box-shadow: 0 1px 72px 0 rgba(0, 0, 0, 0.08);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.6s cubic-bezier(0.24, 0.74, 0.58, 1), visibility 0.6s;
}
.pp-header__sticky.pp-on {
	transform: translateY(0);
	visibility: visible;
}
.pp-header__sticky[aria-hidden='true'] { pointer-events: none; }
.pp-header__sticky.pp-on[aria-hidden='false'] { pointer-events: auto; }

.pp-header__box--sticky { padding: 0 15px; }

.admin-bar .pp-header__sticky { top: 32px; }

/* ==========================================================================
   6. MOBILE HEADER + DRAWER   (<=1199px)
   The bar is PINNED at those widths — see §12 for the sticky rule and why it
   lives on .pp-header rather than here.
   ========================================================================== */
.pp-header__mobile { display: none; }

.pp-mhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 75px;
}
.pp-mhead__brand { display: flex; align-items: center; margin: 15px 0; }
.pp-mhead__brand img { height: 45px; width: auto; }
.pp-mhead__tools { display: flex; align-items: center; gap: 4px; }

.pp-burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	background: #fff;
	cursor: pointer;
}
.pp-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--pp-brand);
	transition: transform 0.3s linear, opacity 0.2s linear;
}
.pp-burger span:nth-child(2) { margin: 5px 0; }
.pp-burger[aria-expanded='true'] span:first-child { transform: translateY(7px) rotate(45deg); }
.pp-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pp-burger[aria-expanded='true'] span:last-child { transform: translateY(-7px) rotate(-45deg); }

/* ---- the drawer itself: explicit, self-contained, no utility classes ---- */
.pp-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	max-width: 86vw;
	height: 100%;
	z-index: 1010;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transform: translateX(-100%);
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.24, 0.74, 0.58, 1), visibility 0.35s;
}
.pp-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
}

.pp-drawer__backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: rgba(34, 34, 55, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pp-drawer__backdrop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* `hidden` must not win over the open state. */
.pp-drawer__backdrop[hidden] { display: block; }

.pp-drawer__scroll {
	height: 100%;
	padding: 40px 25px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.pp-drawer__close {
	position: absolute;
	top: 10px;
	right: 20px;
	background-color: transparent;
}
.pp-drawer__close::before,
.pp-drawer__close::after { background-color: #000; }

.pp-drawer__logo { margin-bottom: 30px; }
.pp-drawer__logo img { height: 40px; width: auto; }

.pp-drawer__search { position: relative; margin-bottom: 24px; }
.pp-drawer__search input {
	padding: 12px 46px 12px 16px;
	font-size: 15px;
}
.pp-drawer__search button {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--pp-primary);
	cursor: pointer;
}

/* The drawer menu is CLONED from ul.main-nav1 by pp-header.js. */
.pp-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.pp-drawer__nav li { position: relative; }
.pp-drawer__nav > ul > li > a,
.pp-drawer__nav li a {
	display: block;
	padding-right: 36px;
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 46px;
	color: var(--pp-primary);
	border-bottom: 1px solid #eee;
}
.pp-drawer__nav li a:hover,
.pp-drawer__nav li.current-menu-item > a { color: var(--pp-brand); }
.pp-drawer__nav .pp-menu__chev { display: none; }

.pp-drawer__nav .sub-menu { display: none; }
.pp-drawer__nav li.is-open > .sub-menu { display: block; }
.pp-drawer__nav .sub-menu a { padding-left: 14px; font-weight: 500; font-size: 15px; }
.pp-drawer__nav .sub-menu .sub-menu a { padding-left: 28px; font-size: 14px; }
.pp-drawer__nav .pp-mega__head {
	display: block;
	padding: 14px 0 6px;
	border: 0;
	border-bottom: 1px solid #eee;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--pp-muted);
}
.pp-drawer__nav .pp-mega__inner,
.pp-drawer__nav .pp-mega__cols,
.pp-drawer__nav .pp-container { display: block; padding: 0; max-width: none; width: auto; }

.pp-drawer__toggle {
	position: absolute;
	top: 8px;
	right: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.06);
	color: var(--pp-primary);
	cursor: pointer;
	transition: transform 0.2s ease;
}
.pp-drawer__toggle[aria-expanded='true'] { transform: rotate(180deg); }

.pp-drawer__meta,
.pp-drawer__contact { list-style: none; margin: 24px 0 0; padding: 0; }
.pp-drawer__meta li a {
	display: block;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-body);
}
.pp-drawer__contact li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-body);
}
.pp-drawer__contact .pp-i { color: var(--pp-brand); flex: none; }

/* ==========================================================================
   7. CLOSE BUTTON (shared by drawer / search / side cart)
   ========================================================================== */
.pp-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 9px solid transparent;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: #777;
	cursor: pointer;
}
.pp-close::before,
.pp-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: #1b1b1b;
	transform-origin: 50% 50%;
	transition: transform 0.2s cubic-bezier(0.24, 0.74, 0.58, 1);
}
.pp-close::before { transform: rotate(45deg); }
.pp-close::after { transform: rotate(-45deg); }
.pp-close:hover::before,
.pp-close:hover::after { transform: rotate(0deg); }

/* ==========================================================================
   8. SEARCH OVERLAY
   ========================================================================== */
.pp-search {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1200;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
.pp-search.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.pp-search__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: rgba(34, 34, 55, 0.6);
}

.pp-search__panel {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	max-height: 320px;
	padding: 0 15px 80px;
	background-color: #fff;
	transform: translateY(-100%);
	transition: transform 0.5s ease;
}
.pp-search.is-open .pp-search__panel { transform: translateY(0); }

.pp-search__close {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 45px;
	height: 45px;
	border-width: 11px;
	z-index: 2;
}

.pp-search__panel form {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}
.pp-search__field {
	height: 60px;
	padding: 16px 48px 16px 0;
	border: none;
	border-radius: 0;
	background: none;
	color: var(--pp-primary);
	font-family: var(--pp-font);
	font-size: 25px;
}
.pp-search__field:focus { border: none; background: none; }
.pp-search__submit {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: var(--pp-primary);
	cursor: pointer;
}
.pp-search__submit:hover { color: var(--pp-brand); }
.pp-search__divider {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   9. SIDE CART PANEL  (shell only — P5 owns the mini-cart template)
   Measured: 370px, BLACK, 1px #231B26 left border, header rule 2px #4F4F4F.
   ========================================================================== */
.pp-sidecart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 370px;
	height: 100%;
	z-index: 1110;
	display: flex;
	flex-direction: column;
	background-color: #000;
	border-left: 1px solid #231b26;
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.24, 0.74, 0.58, 1), opacity 0.3s ease, visibility 0.5s;
}
.pp-sidecart.is-open {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}
.admin-bar .pp-sidecart { top: 32px; height: calc(100% - 32px); }

.pp-sidecart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	padding: 15px 15px 15px 30px;
	border-bottom: 2px solid #4f4f4f;
}
.pp-sidecart__title {
	flex-grow: 1;
	font-family: var(--pp-font);
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
}
.pp-sidecart__counter { margin-left: 5px; }
.pp-sidecart__close { background-color: transparent; width: 54px; height: 54px; border-width: 15px; }
.pp-sidecart__close::before,
.pp-sidecart__close::after { background-color: #fff; }

.pp-sidecart__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 24px 35px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.pp-sidecart .woocommerce-mini-cart__empty-message {
	position: relative;
	margin-top: 30px;
	padding-top: 150px;
	color: #fff;
	font-size: 16px;
	text-align: center;
}
.pp-sidecart .woocommerce-mini-cart__empty-message::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 120px;
	height: 120px;
	margin-left: -60px;
	border: 2px solid #444;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.1A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.9L5 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52px 52px;
}

.pp-sidecart ul.woocommerce-mini-cart { list-style: none; margin: 0 0 15px; padding: 0; }
.pp-sidecart ul.woocommerce-mini-cart li {
	position: relative;
	display: block;
	clear: both;
	overflow: hidden;
	padding: 24px 30px 24px 0;
}
.pp-sidecart ul.woocommerce-mini-cart li + li { border-top: 1px solid var(--pp-body); }
.pp-sidecart ul.woocommerce-mini-cart li img { float: left; width: 72px; height: auto; margin-right: 20px; }
.pp-sidecart ul.woocommerce-mini-cart li a { display: block; font-size: 18px; font-weight: 600; line-height: 1.5; color: #fff; }
.pp-sidecart ul.woocommerce-mini-cart li a:hover { color: var(--pp-brand); }
.pp-sidecart ul.woocommerce-mini-cart li .quantity,
.pp-sidecart ul.woocommerce-mini-cart li .amount { color: #fff; font-size: 14px; font-weight: 600; }
.pp-sidecart ul.woocommerce-mini-cart li a.remove {
	position: absolute !important;
	top: 22px !important;
	right: 0 !important;
	left: auto !important;
	padding: 5px;
	font-size: 28px;
	line-height: 1;
	color: var(--pp-brand) !important;
	background: transparent;
}
.pp-sidecart ul.woocommerce-mini-cart li a.remove:hover { color: var(--pp-magenta) !important; }

.pp-sidecart .woocommerce-mini-cart__total {
	margin-bottom: 0;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 16px;
}
.pp-sidecart .woocommerce-mini-cart__total strong { font-weight: 400; }
.pp-sidecart .woocommerce-mini-cart__total .amount { font-size: 20px; font-weight: 500; line-height: 32px; color: #fff; }

.pp-sidecart .woocommerce-mini-cart__buttons {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-bottom: 0;
}
.pp-sidecart .woocommerce-mini-cart__buttons::before,
.pp-sidecart .woocommerce-mini-cart__buttons::after { display: none !important; }
.pp-sidecart .woocommerce-mini-cart__buttons a {
	flex: 1 1 auto;
	margin: 0;
	padding: 0 20px;
	font-size: 15px;
	line-height: 50px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: var(--pp-brand);
	border: 2px solid transparent;
}
.pp-sidecart .woocommerce-mini-cart__buttons a:hover {
	color: var(--pp-primary);
	background-color: var(--pp-accent);
	border-color: var(--pp-accent);
}

/* Shared dimmer behind the side cart. */
.pp-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1100;
	background: rgba(34, 34, 55, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pp-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.pp-overlay[hidden] { display: block; }

/* ==========================================================================
   10. LOGIN / REGISTER MODAL — SHELL ONLY.
   P7 owns every `.pp-user*` rule (pp-account.css). Nothing here may style them.
   ========================================================================== */
.pp-usermodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pp-usermodal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.pp-usermodal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-color: rgba(9, 29, 62, 0.85);
}

.pp-usermodal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	max-height: 92vh;
	overflow-y: auto;
	transform: translateY(14px);
	transition: transform 0.3s ease;
}
.pp-usermodal.is-open .pp-usermodal__dialog { transform: translateY(0); }

.pp-usermodal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: var(--pp-primary);
	cursor: pointer;
	transition: background-color var(--pp-ease-fast), color var(--pp-ease-fast);
}
.pp-usermodal__close:hover { background: var(--pp-brand); color: #fff; }

/* ==========================================================================
   11. BODY SCROLL LOCK (set by pp-header.js whenever a panel is open)
   ========================================================================== */
body.pp-locked { overflow: hidden; }

/* ==========================================================================
   12. BREAKPOINTS
   Measured: the WHOLE desktop header — top bar included — is display:none at
   <=1199px and the mobile bar takes over. The mobile bar is PINNED; the
   handover at 1199/1200 is exact, with no width where neither side matches.
   ========================================================================== */
@media (max-width: 1366.98px) {
	.pp-header__box { padding: 0; }
	.pp-tool--cart { margin: 0 0 0 10px; }
	.pp-menu > li { margin-left: 34px; }
}

@media (max-width: 1199.98px) {
	.pp-header__main,
	.pp-header__sticky { display: none; }

	/* ---- MOBILE STICKY BAR — ALWAYS PINNED --------------------------------
	   Requested behaviour: "the menu bar sticks at top and doesn't disappear."
	   So: pinned at every scroll position, NOT reveal-on-scroll-up.

	   It is `position: sticky` on .pp-header (the 75px mobile bar's own parent),
	   NOT `position: fixed` on .pp-header__mobile, and that choice is load
	   bearing:

	     * sticky keeps the bar IN NORMAL FLOW, so its 75px stays reserved and
	       #pp-main still starts at y=75 exactly as before. There is no offset to
	       compute, nothing to double-count, and no first-paint layout shift.
	       `fixed` would drop the bar out of flow and slide the hero 75px up
	       underneath it, which then needs a compensating pad that has to track
	       the bar height forever.
	     * sticky must go on .pp-header, never on .pp-header__mobile: a sticky
	       element is clamped to its PARENT's box, and .pp-header__mobile's parent
	       is exactly as tall as it is (75px), so it would unstick instantly.
	     * body carries `overflow-x: hidden` (pp-base.css). That computes to
	       `hidden auto`, which READS like a scroll container that would trap the
	       sticky — it does not, because the root propagates body's overflow to
	       the viewport and body's used value stays `visible`. Verified on the
	       live page, not inferred: rect.top stays 0.00 at scrollY 0/300/1200/
	       2400/bottom at 390, 820 and 375.

	   pp-header.js carries a measured fallback (.pp-mhead-fixed, below) in case
	   a future ancestor ever does break sticky. CSS pins; JS only decorates. */
	.pp-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 900;
	}
	.admin-bar .pp-header { top: 32px; }

	.pp-header__mobile {
		display: block;
		position: relative;
		z-index: 900;
		background-color: #fff;
		transition: box-shadow 0.25s ease;
	}

	/* Lift the bar off the content once the page has moved, with the same
	   shadow the desktop sticky clone uses. Added by pp-header.js; the pin
	   itself is pure CSS, so it survives a JS failure. */
	body.pp-mstuck .pp-header__mobile {
		box-shadow: 0 1px 72px 0 rgba(0, 0, 0, 0.08);
	}

	/* The skip link targets #pp-main, which now starts under the pinned bar. */
	#pp-main { scroll-margin-top: var(--pp-mhead-h, 75px); }

	/* ---- FALLBACK: only if pp-header.js MEASURES that sticky did not pin ----
	   One-way, idempotent, and scoped to mobile so desktop can never see it.
	   JS writes the real measured --pp-mhead-h on <html> before adding the
	   class, so the pad always equals the bar it replaces. */
	body.pp-mhead-fixed .pp-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	body.pp-mhead-fixed.admin-bar .pp-header { top: 32px; }
	body.pp-mhead-fixed #pp-page { padding-top: var(--pp-mhead-h, 75px); }

	.pp-tool--search { margin-right: 10px; padding-right: 10px; }
	.pp-tool--cart { width: 46px; height: 46px; margin-left: 2px; }
}

/* ---- admin-bar offsets for the PINNED mobile bar -------------------------
   These mirror WP core's own admin-bar.css queries VERBATIM (782px and 600px,
   no `.98`): the project's `.98` convention exists to close the gap between a
   max/min PAIR of ours, and there is no min-width partner here — borrowing
   782.98 would instead de-sync us from WP at fractional widths.

   WP core, in order:
     default        #wpadminbar position:fixed, 32px   -> pin at 32
     <=782px        #wpadminbar 46px, html margin 46   -> pin at 46
     <=600px        #wpadminbar position:ABSOLUTE      -> it scrolls away, so
                                                          pin at 0 or we leave
                                                          a 46px gap on phones. */
@media (max-width: 782px) {
	.admin-bar .pp-header,
	body.pp-mhead-fixed.admin-bar .pp-header { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar .pp-header,
	body.pp-mhead-fixed.admin-bar .pp-header { top: 0; }
}

@media (max-width: 575.98px) {
	.pp-sidecart { max-width: 300px; }
	.pp-search__panel { max-height: 260px; padding-bottom: 50px; }
	.pp-search__field { height: 48px; font-size: 19px; }
	.pp-usermodal { padding: 12px; }
	.pp-mhead__brand img { height: 38px; }
}