/*
 * Peptilab — Header + Live Search
 * Loaded globally on every page (header is always present).
 * Depends on: variables.css
 */

/* ============================================================
   Body background — global
   ============================================================ */
body {
    background: #F7F9FC;
    overscroll-behavior-y: none;
    min-height: 100dvh;
    min-height: -webkit-fill-available; /* iOS Safari < 15.4 fallback */
    min-height: 100svh;                  /* modern: smallest viewport, stable */
}

/* ============================================================
   Header base (default: absolute / overlay)
   ============================================================ */
.site-header {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid var(--pl-dark-border);
    transition: none;
	background: transparent !important;
}

/* ── Static light header variant ──────────────────────────── */
.has-static-header .site-header {
    position:      static !important;
    background:    #F7F9FC !important;
    border-bottom: 1px solid #CACDD3 !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

/* Make sure scrolled state doesn't apply when header is static */
.has-static-header .site-header.is-scrolled {
    position:      static !important;
    background:    #F7F9FC !important;
}

.has-static-header .site-header .site-header__inner {
    background:      transparent !important;
    box-shadow:      none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius:   0 !important;
    padding:         0 !important;
    gap:             inherit !important;
    width:           auto !important;
}

@media screen and (min-width: 1024px)  {
	.site-header {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}


/* ── Sticky scrolled state ──
 * Plain `position: fixed`. The browser positions fixed elements relative
 * to the visual viewport natively on all modern mobile browsers — no
 * JS-tracked vars needed. Top offset stacks WP admin bar (when present)
 * plus the announcement topbar height (static fallback, kept in sync by
 * topbar.js ResizeObserver). */
.site-header.is-scrolled {
    position:        fixed;
    top:             calc(var(--pl-admin-bar-h, 0px) + var(--pl-topbar-h, 0px));
    border-bottom:   none;
    background:      transparent !important;
    padding:         24px 24px 0 !important;
}

/* Scrolled-state pill. backdrop-filter is intentionally NOT here — it
 * would create a containing block for position:fixed descendants, trapping
 * the mobile nav drawer inside this small pill. Blur is applied via the
 * ::before pseudo below, which doesn't affect parent containing-block
 * resolution for the drawer. */
.site-header.is-scrolled .site-header__inner {
    position:        relative;
    background:      transparent;
    box-shadow:      0 4px 16px 0 rgba(26, 26, 26, 0.08);
    border-radius:   32px;
    
    padding:         0 32px !important;
    gap:             40px !important;
    transition:      background .3s ease, box-shadow .3s ease, border-radius .3s ease, padding .3s ease;
	width: fit-content;
}

.site-header.is-scrolled .site-header__inner::before {
    content:                 '';
    position:                absolute;
    inset:                   0;
    background:              rgba(247, 249, 252, 0.82);
    backdrop-filter:         blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius:           inherit;
    z-index:                 -1;
    pointer-events:          none;
}
.site-header.is-scrolled ul.wp-block-navigation {
	background: transparent !important;
	width: max-content;
}

/* Fix nav colors in scrolled state */
.site-header.is-scrolled .wp-block-navigation a {
    color: var(--pl-text) !important;
}

/* Mobile sticky tweaks — tighter padding + don't shrink to fit (header bar uses full width on small screens) */
@media (max-width: 768px) {
    .site-header.is-scrolled {
        padding: 12px 16px 0 !important;
    }
    .site-header.is-scrolled .site-header__inner {
        width:   auto;
        padding: 0 16px !important;
        gap:     16px !important;
    }
}



/* ============================================================
   Search input
   ============================================================ */



.site-header .pl-header-search.wp-block-search {
	position: relative;
}

.site-header .wp-block-search__inside-wrapper {
	display:     flex;
	align-items: center;
	position:    relative;
}

.site-header .wp-block-search__input {
	position:       absolute;          /* overlay — does not push siblings */
	top:            50%;
	right:          40px;              /* to the left of the toggle icon */
	transform:      translateY(-50%);
	background:     transparent;
	border:         1px solid transparent;
	color:          var(--pl-text);
	border-radius:  var(--pl-border-radius);
	padding:        0;
	font-size:      16px;
	width:          0;
	min-width:      0;
	max-width:      0;
	opacity:        0;
	pointer-events: none;
	transition:     width .3s ease, max-width .3s ease, opacity .3s ease, padding .3s ease,
	                border-color var(--pl-transition), background var(--pl-transition);
	outline:        none;
	-webkit-appearance: none;
	appearance:     none;
    z-index: 2;
}

.site-header .wp-block-search__input::placeholder { color: rgba(0,0,0,.38); }

/* Strip the native X clear button rendered on type="search" inputs */
.site-header .wp-block-search__input::-webkit-search-cancel-button,
.site-header .wp-block-search__input::-webkit-search-decoration,
.site-header .wp-block-search__input::-webkit-search-results-button,
.site-header .wp-block-search__input::-webkit-search-results-decoration,
.site-header .wp-block-search__input::-ms-clear,
.site-header .wp-block-search__input::-ms-reveal {
	display:            none !important;
	appearance:         none;
	-webkit-appearance: none;
}

/* Expanded state — JS toggles .is-open, or user tab-focuses the input */
.site-header .pl-header-search.is-open .wp-block-search__input,
.site-header .wp-block-search__input:focus {
	width:          200px;
	min-width:      200px;
	max-width:      200px;
	opacity:        1;
	padding:        6px 16px;
	border-color:   var(--pl-accent);
	background:     var(--pl-white);
	pointer-events: auto;
}

.site-header .wp-block-search__button {
	position:    absolute;
	right:       4px;
	top:         50%;
	transform:   translateY(-50%);
	background:  transparent;
	border:      none;
	cursor:      pointer;
	padding:     4px;
	line-height: 1;
}

/* Hide default search icon SVG, replace with custom */
.site-header .wp-block-search__button svg {
	display: none;
}

.site-header .wp-block-search__button::after {
	content:             "";
	display:             block;
	width:               24px;
	height:              24px;
	background-image:    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4366 21.3128L15.2979 16.174' stroke='%231A1A1A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.4365 18.1877C14.2335 18.1877 17.3115 15.1097 17.3115 11.3127C17.3115 7.51579 14.2335 4.43774 10.4365 4.43774C6.63956 4.43774 3.56152 7.51579 3.56152 11.3127C3.56152 15.1097 6.63956 18.1877 10.4365 18.1877Z' stroke='%231A1A1A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size:     24px 24px;
	background-repeat:   no-repeat;
	background-position: center;
}

/* ============================================================
   My Account icon
   ============================================================ */
.site-header .pl-header-account a,
.site-header .wc-block-customer-account {
	display:         flex;
	align-items:     center;
	text-decoration: none !important;
}

/* Hide default account SVG, replace with custom (guest only) */
.site-header .pl-header-account svg,
.site-header .wc-block-customer-account svg {
	display: none;
}

.site-header .pl-header-account a::after,
.site-header .wc-block-customer-account::after {
	content:             "";
	display:             block;
	width:               24px;
	height:              24px;
	background-image:    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z' stroke='%231A1A1A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size:     24px 24px;
	background-repeat:   no-repeat;
	background-position: center;
}

/* When logged in — badge replaces SVG, hide ::after */
.site-header .pl-header-account a:has(.pl-account-badge)::after,
.site-header .wc-block-customer-account:has(.pl-account-badge)::after {
	display: none;
}

/* Account badge — circle with avatar or initials */
.pl-account-badge {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	border-radius:   50%;
	background:      #E3EBFA;
	color:           #537FF4;
	font-size:       10px;
	font-weight:     700;
	line-height:     1;
	letter-spacing:  .5px;
	overflow:        hidden;
	flex-shrink:     0;
}

.pl-account-badge img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ============================================================
   Navigation links
   ============================================================ */

.site-header ul.wp-block-navigation__container,
.site-header ul.wp-block-navigation {
    background: #F7F9FC;
    border-radius: var(--pl-border-radius);
    padding: 0 32px;
    gap: 20px;
}

/* Responsive logo — single block, scales by viewport */
.pl-header__logo img {
    width: 140px !important;
    height: auto;
    transition: width .2s ease;
}

.site-header .wp-block-navigation a {
	color:           var(--pl-text) !important;
	text-decoration: none;
	transition:      color var(--pl-transition);
    padding: 20px 16px;
}


.site-header .wp-block-navigation a:hover { color: var(--pl-accent) !important; }

/* ── Navigation dropdown (submenu) ── */
/* `overflow: visible` is required so the ::before hover-bridge below
   stays hit-testable. `overflow: hidden` here clips the bridge AND
   disables pointer events on it, causing the submenu to collapse when
   the cursor crosses the 4px gap from the parent link. */
.site-header .wp-block-navigation__submenu-container {
	background:              #F7F9FC !important;
	box-shadow:              0 4px 16px 0 rgba(26, 26, 26, 0.08) !important;
	border-radius:           32px !important;
	border:                  none !important;
	padding:                 12px !important;
	min-width:               200px;
	overflow:                visible !important;
	top: calc(100% + 4px) !important;
}

/* Invisible hover bridge spanning the gap between the parent link and the
   submenu. Slightly oversized vertically and horizontally so the cursor
   can drift without losing :hover on the parent <li>. */
.site-header .wp-block-navigation__submenu-container::before {
	content:  "";
	position: absolute;
	top:      -12px;
	left:     -12px;
	right:    -12px;
	height:   16px;
}

/* Glass effect only when header is scrolled */
.site-header.is-scrolled .wp-block-navigation__submenu-container {
	background:              rgba(247, 249, 252, 0.82) !important;
	backdrop-filter:         blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	margin:        0 !important;
	padding:       12px 16px !important;
	border-radius: 8px;
	transition:    background var(--pl-transition);
	background: transparent;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item {
	background: var(--pl-soft-lime) !important;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display:         block !important;
	padding:         0 !important;
	color:           #1A1A1A !important;
	font-family:     var(--pl-font-body) !important;
	font-size:       16px !important;
	font-weight:     500 !important;
	line-height:     24px !important;
	text-decoration: none !important;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: #1A1A1A !important;
}

/* ============================================================
   Mini Cart icon
   ============================================================ */
.site-header .wc-block-mini-cart__button {
	display:     flex;
	align-items: center;
	gap: 0;
}
.site-header .wc-block-mini-cart__button .wc-block-mini-cart__badge {
	background: var(--pl-accent)!important;
	color:  #F7F9FC !important;
	left: -14px;
}
.site-header .wc-block-mini-cart__button svg {
	display: none;
}

.site-header .wc-block-mini-cart__button::before {
	content:             "";
	display:             block;
	width:               24px;
	height:              24px;
	background-image:    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9996 8C15.9996 9.06087 15.5782 10.0783 14.828 10.8284C14.0779 11.5786 13.0605 12 11.9996 12C10.9387 12 9.92131 11.5786 9.17116 10.8284C8.42102 10.0783 7.99959 9.06087 7.99959 8M3.63281 7.40138L2.93281 15.8014C2.78243 17.6059 2.70724 18.5082 3.01227 19.2042C3.28027 19.8157 3.74462 20.3204 4.33177 20.6382C5.00006 21 5.90545 21 7.71623 21H16.283C18.0937 21 18.9991 21 19.6674 20.6382C20.2546 20.3204 20.7189 19.8157 20.9869 19.2042C21.2919 18.5082 21.2167 17.6059 21.0664 15.8014L20.3664 7.40138C20.237 5.84875 20.1723 5.07243 19.8285 4.48486C19.5257 3.96744 19.0748 3.5526 18.5341 3.29385C17.92 3 17.141 3 15.583 3L8.41623 3C6.85821 3 6.07921 3 5.4651 3.29384C4.92433 3.5526 4.47349 3.96744 4.17071 4.48486C3.82689 5.07243 3.76219 5.84875 3.63281 7.40138Z' stroke='%231A1A1A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size:     24px 24px;
	background-repeat:   no-repeat;
	background-position: center;
}
.site-header .wc-block-mini-cart__amount {
    display: none;
}
/* ============================================================
   Live search dropdown
   ============================================================ */
.pl-search-dropdown {
	display:       none;
	position:      absolute;
	top:           calc(100% + 30px);
	right:         0;
	width:         320px;
	background:    #F7F9FC;
	border-radius: var(--pl-radius);
	box-shadow:    0 12px 40px rgba(0,0,0,.18);
	overflow:      hidden;
	z-index:       99999;
}

.pl-search-dropdown[data-open] { display: block; }

.pl-search-list { padding: 6px 0; }

.pl-search-item a {
	display:         flex;
	align-items:     center;
	gap:             12px;
	padding:         9px 14px;
	text-decoration: none;
	color:           var(--pl-text);
	transition:      background var(--pl-transition-fast);
}

.pl-search-item a:hover,
.pl-search-item--focus a { background: var(--pl-bg-hover); }

.pl-search-item__thumb {
	flex-shrink:     0;
	width:           44px;
	height:          44px;
	border-radius:   var(--pl-radius-sm);
	overflow:        hidden;
	background:      var(--pl-bg-subtle);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.pl-search-item__thumb img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 4px;
}

.pl-search-item__no-img {
	width: 24px; height: 24px;
	background:    rgba(0,0,0,.08);
	border-radius: 4px;
}

.pl-search-item__name {
	font-size:   13px;
	line-height: 1.4;
	color:       var(--pl-text);
}

.pl-search-item__name mark {
	background:  transparent;
	color:       var(--pl-accent);
	font-weight: 700;
}

.pl-search-footer {
	border-top: 1px solid var(--pl-border-light);
	padding:    10px 14px;
}

.pl-search-footer a {
	font-size: 12px; font-weight: 500;
	color:           var(--pl-accent);
	text-decoration: none;
}
.pl-search-footer a:hover { text-decoration: underline; }
.pl-search-footer em      { font-style: normal; font-weight: 700; }

.pl-search-empty {
	padding: 16px 14px;
	font-size:  13px;
	color:      var(--pl-muted);
	text-align: center;
	margin:     0;
}
.pl-search-loading { color: var(--pl-accent); }

/* ============================================================
   Native WP Navigation — mobile overlay (burger + left drawer)
   ============================================================ */

/* Burger button (open) — shown only on mobile, WP handles click logic */
.site-header .wp-block-navigation__responsive-container-open {
    background:  transparent;
    border:      0;
    padding:     0;
    color:       #000E15;
    cursor:      pointer;
    display:     none; /* hidden on desktop */
    align-items: center;
    line-height: 1;
}

/* Replace default WP burger icon with custom 3-line SVG */
.site-header .wp-block-navigation__responsive-container-open svg {
    display: none !important;
}

.site-header .wp-block-navigation__responsive-container-open::before {
    content:             "";
    display:             block;
    width:               24px;
    height:              24px;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H17' stroke='%23000E15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12H21' stroke='%23000E15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 18H13' stroke='%23000E15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:     24px 24px;
    background-repeat:   no-repeat;
    background-position: center;
}

/* Overlay container when opened — left-anchored drawer */
.site-header .wp-block-navigation__responsive-container.has-modal-open {
   position:                fixed !important;
    top:                    0;
    left:                    0;
    right:                   auto !important;
    bottom:                  auto;
    height:                  75vh;
    height:                  75dvh; /* modern browsers */
    max-height:              100vh;
    max-height:              -webkit-fill-available; /* iOS Safari < 15.4 */
    max-height:              100svh; /* modern: smallest viewport, stable */
    padding:                 0 !important;
    background:              rgba(247, 249, 252, 0.82) !important;
    backdrop-filter:         blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius:           0 0 32px 0;
    color:                   #1A1A1A !important;
    z-index:                 100000;
    overflow-y:              auto;
    overflow-x:              hidden;
}
html:has(.has-modal-open), body:has(.has-modal-open), html:has(.omnisend-form-69f353afc714d209e1d9ad8e-container), body:has(.omnisend-form-69f353afc714d209e1d9ad8e-container)  {
    overscroll-behavior: none;
        overflow: hidden !important;
    position: relative;
}

/* Reset the nested WP containers so only the outer drawer scrolls.
   Without this, __responsive-close / __responsive-dialog can create
   extra scrollbars inside the drawer. */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close,
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog,
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
    padding:    0 !important;
    margin:     0 !important;
    height:     auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow:   visible !important;
    background: transparent !important;
    border:     0 !important;
}

/* Close (X) button — top right of drawer */
.site-header .wp-block-navigation__responsive-container-close {
    position:    absolute;
    top:         16px;
    right:       16px;
    background:  none;
    border:      0;
    padding:     4px;
    cursor:      pointer;
    display:     flex;
    line-height: 1;
    color:       #1A1A1A;
}

.site-header .wp-block-navigation__responsive-container-close svg {
    width:  24px;
    height: 24px;
    fill:   currentColor;
}

/* Nav list inside drawer — stack vertically, no row gap */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
    display:        flex !important;
    flex-direction: column;
    align-items:    stretch;
    gap:            0 !important;
    padding:        80px 20px 40px!important;
	margin: 0 !important;
    background:     transparent !important;
    width:          260px !important;
}

/* Each menu item — full width, with top separator (except first) */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative	;
    width:      100%;
    margin:     0 !important;
    padding:    0 !important;
    border-top: 1px solid #CACDD3 !important;
	align-items: flex-start	!important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
    border-top: 0;
}

/* "Parent" items with a submenu — wrap so toggle sits next to link, sub-ul below */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.has-child {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    flex: 1;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
    flex-shrink: 0;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    flex-basis: 100%;
}

/* Parent link typography — Inter 16/24 Medium 500, #1A1A1A.
   (Submenu typography is set lower down and left untouched.) */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding:         13px 0 !important;
    font-family:     Inter, var(--pl-font-body, sans-serif) !important;
    font-size:       16px !important;
    font-style:      normal !important;
    font-weight:     500 !important;
    line-height:     24px !important;
    color:           var(--primary-1, #1A1A1A) !important;
    text-decoration: none !important;
    display:         block;
    background:      transparent !important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
    color: var(--pl-accent) !important;
}

/* Submenu toggle (▼) — inline at right of parent link, custom chevron.
   Put the icon directly as a background of the button (not ::before) —
   that way the default WP svg can be hidden without collapsing the button. */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
    background:          transparent !important;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='7' viewBox='0 0 13 7' fill='none'%3E%3Cpath d='M12.7099 0.100079C12.6098 0.0333599 12.5181 0 12.4347 0C12.3513 0 12.1428 0.150118 11.8092 0.450352L6.405 5.80453L1.05082 0.500391C0.683867 0.166797 0.458691 0 0.375293 0C0.291895 0 0.208496 0.0416992 0.125098 0.125098C0.0416992 0.208496 0 0.291895 0 0.375293C0 0.458691 0.166797 0.683867 0.500391 1.05082L5.2541 5.80453C5.68777 6.2382 5.97133 6.51342 6.10477 6.63018C6.2382 6.74693 6.33828 6.80531 6.405 6.80531C6.47172 6.80531 6.5718 6.74693 6.70523 6.63018C6.83867 6.51342 7.12223 6.2382 7.5559 5.80453L12.3096 1.05082C12.6432 0.683868 12.81 0.458692 12.81 0.375294C12.81 0.291895 12.7766 0.200157 12.7099 0.100079Z' fill='%231A1A1A'/%3E%3C/svg%3E") !important;
    background-size:     13px 7px;
    background-repeat:   no-repeat !important;
    background-position: center;
    border:              0 !important;
    cursor:              pointer;
    padding:             0 !important;
    min-width:           20px;
    width:               20px;
    height:              20px;                /* matches parent link height (13 + 24 + 13) */
    flex-shrink:         0;
    color:               transparent !important; /* hides any default text/focus outline glyphs */
    transition:          transform .2s ease;
    position:            absolute;
	top: 20px;
	right: 0;
}

/* Hide the default WP chevron svg */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu__toggle svg {
    display: none !important;
}

/* .site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
} */

/* Submenu container — hidden by default, revealed when toggle aria-expanded="true".
   Uses adjacent-sibling so it works purely from CSS (WP Interactivity API flips
   aria-expanded on click — no custom JS needed). */
.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
    display:         none !important;
    position:        static !important;
    flex-direction:  column;
    min-width:       0 !important;
    padding:         0 0 8px 16px !important;
    margin:          0 !important;
    background:      transparent !important;
    border:          0 !important;
    border-radius:   0 !important;
    box-shadow:      none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    top:             auto !important;
    opacity:         1 !important;
    visibility:      visible !important;
    transform:       none !important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open
.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
    display: flex !important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    width:      100%;
    padding:    0 !important;
    margin:     0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size:   14px !important;
    font-weight: 400 !important;
    padding:     8px 0 !important;
    color:       #6E7787 !important;
}

.site-header .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--pl-accent) !important;
}

/* ============================================================
   Responsive — mobile ≤1024px
   ============================================================ */
@media (max-width: 1024px) {

    /* Header bar */
    .site-header {

		padding: 12px 24px !important;
    }
        .site-header:not(.has-static-header):not(.is-scrolled) {
        position: relative !important;
        top: 0 !important;
		padding: 12px 24px !important;
    }

    .site-header__inner {
        padding:         0 !important;
        justify-content: flex-start !important;
    }

    /* Smaller logo on mobile */
    .pl-header__logo img {
        width: 94px !important;
    }

    /* WP navigation: show burger, hide inline container */
    .site-header .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
    }

    .site-header .pl-header__nav {
        /* put the burger first in flex order so it sits at the left edge */
        order:        -1;
        margin-right: 24px;   /* 24px gap between burger and logo */
    }

    .site-header .pl-header__nav ul.wp-block-navigation__container {
        display: none; /* hide inline list when collapsed */
        background: transparent;
        padding:    0;
    }

    /* When the overlay is open, WP shows the container; inherit styles above */
    .site-header .wp-block-navigation__responsive-container.has-modal-open
    ~ * .wp-block-navigation__container,
    .site-header .wp-block-navigation__responsive-container.has-modal-open
    .wp-block-navigation__container {
        display: flex !important;
    }

    /* Icons to the right */
    .site-header .header-actions {
        margin-left: auto !important;
        gap: 2px !important;
    }

    /* Mobile — keep input positioning consistent with desktop overlay */
    .site-header .wp-block-search__input {
        z-index: 0;
    }

    /* Shrink the expanded overlay on mobile so it doesn't swallow the header.
       clamp scales between small phones and tablets; caps at 180px. */
    .site-header .pl-header-search.is-open .wp-block-search__input,
    .site-header .wp-block-search__input:focus {
        width:     clamp(140px, 42vw, 180px);
        min-width: clamp(140px, 42vw, 180px);
        max-width: clamp(140px, 42vw, 180px);
    }

    .site-header .wp-block-search__button {
        position:  static !important;
        transform: none !important;
		z-index: 1;
    }
    .site-header:has(.wp-block-navigation__responsive-container.has-modal-open.is-menu-open)::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100dvh;
	height: -webkit-fill-available; /* iOS Safari < 15.4 */
	height: 100dvh; /* modern: small viewport, stable, no URL-bar jitter */
	background: rgba(42, 42, 42, 0.30);
}
}

@media (max-width: 600px) {
    .pl-search-dropdown {
		position: fixed;
		width: calc(100vw - 48px);
	top: 55px;
	left: 50%;
	transform: translate(-50%, 64px)}
}