/* Beautiful Header 0.1.0 – look taken from the signed-off menu map (measured from live), scoped to #bh. */

/* The child theme's header.php draws Bek's original header and nav bar directly (no hook to remove them); the August header Element used to sit over them. */
body.bh-on > .bek-custom-header, body.bh-on > .bek-nav-bar, body.bh-on #masthead, body.bh-on #mobile-header, body.bh-on #site-navigation:not(#bh *) { display: none !important; }

#bh {
	--pink: #C10078; --purple: #5D1182; --nav-ink: #510C76; --body-ink: #1A1A1A;
	--bar: var(--pink); --alt: var(--purple);
	--wrap: 1406px; --pad: 20px;
	--bar-h: 168px; --nav-h: 77px; --nav-gap: 35px;
	--logo-w: 216px; --slot-w: 419px; --slot-h: 40px; --disc: 40px; --nav-ico: 30px;
	--font: var(--gp-font--primary, 'Roboto'), -apple-system, 'Segoe UI', Arial, sans-serif;
	--nav-fs: clamp(13px, 1.24vw, 17px); --marker: 9px;
	--muted: #6b6b6b; --rule: #e3e3e3;
	position: relative; z-index: 900;
	font-family: var(--font); font-weight: 400; line-height: 1.4; color: var(--body-ink);
	-webkit-font-smoothing: antialiased;
}
#bh.mode-studio { --bar: var(--purple); --alt: var(--pink); --nav-ink: #7a1a3f; }
#bh *, #bh *::before, #bh *::after { box-sizing: border-box; letter-spacing: normal; text-transform: none; font-style: normal; }
#bh a { text-decoration: none; color: inherit; }
#bh ul { margin: 0; padding: 0; list-style: none; }
#bh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; box-shadow: none; text-transform: none; }
#bh button:hover, #bh button:focus { background: none; color: inherit; }
#bh svg { max-width: none !important; min-width: 0; height: auto; }
#bh .bh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#bh :focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
#bh .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
#bh .site-header { position: relative; z-index: 50; background: #fff; margin: 0; padding: 0; } /* above the backdrop (40), so the bar stays usable while a panel is open */

/* coloured bar */
#bh .bar { background: var(--bar); height: var(--bar-h); position: relative; }
#bh .bar > .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
#bh .logo { display: block; color: #fff; flex: 0 0 var(--logo-w); }
#bh .logo svg { display: block; width: var(--logo-w); max-width: var(--logo-w) !important; height: auto; }

#bh .actions { display: flex; align-items: center; gap: 16px; color: #fff; flex: 0 0 auto; }
#bh .pill { position: relative; height: var(--slot-h); width: var(--slot-h); background: #fff; border-radius: 999px; display: flex; align-items: center; overflow: visible; transition: width .28s ease; margin: 0; }
#bh .pill.is-open, #bh .pill:focus-within { width: var(--slot-w); }
#bh .pill input[type=search] { border: 0; outline: 0; flex: 1; min-width: 0; height: 100%; font: 400 16px/1 var(--font); color: var(--body-ink); background: transparent; padding: 0 4px 0 20px; margin: 0; box-shadow: none; border-radius: 999px 0 0 999px; opacity: 1; transition: opacity .18s; }
#bh .pill:not(.is-open):not(:focus-within) input[type=search] { opacity: 0; padding: 0; width: 0; flex: 0; }
#bh .pill .btn { width: var(--slot-h); height: var(--slot-h); flex: 0 0 var(--slot-h); display: grid; place-items: center; color: var(--bar); }
#bh .pill .btn svg { width: var(--slot-h); height: var(--slot-h); }

#bh .act { display: flex; align-items: center; gap: 12px; color: #fff; transition: opacity .2s; }
#bh .act:hover { opacity: .85; color: #fff; }
#bh .ico { width: var(--disc); height: var(--disc); display: block; color: var(--bar); position: relative; }
#bh .ico svg { width: 100%; height: 100%; display: block; }
#bh .pip { position: absolute; top: -2px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--alt); color: #fff; font: 700 10px/14px var(--font); text-align: center; border: 2px solid var(--bar); }
#bh .total { font: 700 19px/1 var(--font); }
#bh .total:empty, #bh .greet:empty { display: none; }
#bh .greet { font: 400 17px/1 var(--font); }
#bh .bh-burger { display: none; }

/* tabs on the bottom edge of the bar */
#bh .tabs { position: absolute; left: 0; right: 0; bottom: 0; }
#bh .tabs .wrap { display: flex; justify-content: flex-end; gap: 8px; }
#bh .nh-tab { display: flex; align-items: center; height: 32px; background: #fff; font-family: var(--font); font-size: 16px; white-space: nowrap; transition: color .18s; }
#bh .nh-tab--help { font-weight: 300; color: var(--purple); border-radius: 8px 8px 0 0; padding: 0 20px; }
#bh .nh-tab--trade { font-weight: 700; color: var(--pink); border-radius: 12px 12px 0 0; padding: 0 22px; }
#bh .nh-tab--help:hover { color: var(--pink); }
#bh .nh-tab--trade:hover { color: var(--purple); }
#bh.mode-studio .nh-tab--help { color: var(--pink); }
#bh.mode-studio .nh-tab--help:hover { color: var(--purple); }
#bh.mode-studio .nh-tab--trade { color: var(--purple); }
#bh.mode-studio .nh-tab--trade:hover { color: var(--pink); }

/* nav row */
#bh .navbar { margin-top: var(--nav-gap); height: var(--nav-h); background: #fff; position: relative; }
#bh .navrow { height: 100%; display: flex; align-items: stretch; }
#bh .switch, #bh .phone { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font: 300 var(--nav-fs)/1.16 var(--font); color: var(--body-ink); white-space: nowrap; padding-bottom: 1.18em; }
#bh .switch { font-weight: 700; color: var(--nav-ink); }
#bh.mode-studio .switch { color: var(--pink); }
#bh .switch-ico, #bh .phone-ico { width: var(--nav-ico); height: var(--nav-ico); flex: 0 0 var(--nav-ico); --ic-disc: var(--alt); color: #fff; }
#bh .switch-ico svg, #bh .phone-ico svg { width: 100%; height: 100%; display: block; }
#bh .phone-num { display: none; }
#bh .navrow .sw-store, #bh .navrow .navmenu-studio { display: none; }
#bh.mode-studio .navrow .sw-studio, #bh.mode-studio .navrow .navmenu-store { display: none; }
#bh.mode-studio .navrow .sw-store, #bh.mode-studio .navrow .navmenu-studio { display: flex; }

#bh .navmenu { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: space-evenly; padding: 0 14px; font-size: var(--nav-fs); min-width: 0; }
#bh .nav-item { display: flex; margin: 0; }
#bh .nav-item > a { position: relative; display: flex; align-items: center; height: 100%; padding: 0 .34em 1.18em; font: 300 1em/1.16 var(--font); color: var(--body-ink); white-space: nowrap; }
#bh .nav-label { display: block; text-align: center; max-width: 9.5em; white-space: normal; }
#bh .nav-item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--marker); border-radius: 4px 4px 0 0; background: var(--bar); opacity: 0; transition: opacity .15s; }
#bh .nav-item:hover > a::after, #bh .nav-item.is-open > a::after, #bh .nav-item > a[aria-current]::after { opacity: 1; }
#bh .li-more > a { font-weight: 700; color: var(--nav-ink); }
#bh .rule { height: 1px; background: var(--rule); }

/* lowest priority drops into More as the window narrows */
#bh .li-more, #bh .more-item { display: none; }
#bh .mega-more .mega-inner { padding-top: 26px; padding-bottom: 20px; }
#bh .more-lead { margin: 0 0 14px; font: 700 16px/1.2 var(--font); color: var(--nav-ink); }
#bh .more-list { display: flex; flex-wrap: wrap; gap: 10px 28px; }
#bh .more-list a { font: 400 16px/19.2px var(--font); color: var(--nav-ink); }
#bh .more-list a:hover { color: var(--bar); }
@media (max-width: 1180px) and (min-width: 851px) {
	#bh .nav-item[data-pri="9"] { display: none; } #bh .more-item[data-pri="9"] { display: block; }
	#bh .li-more { display: flex; }
}
@media (max-width: 1090px) and (min-width: 851px) { #bh .nav-item[data-pri="8"] { display: none; } #bh .more-item[data-pri="8"] { display: block; } }
@media (max-width: 1000px) and (min-width: 851px) { #bh .nav-item[data-pri="7"] { display: none; } #bh .more-item[data-pri="7"] { display: block; } }
@media (max-width: 920px) and (min-width: 851px) { #bh .nav-item[data-pri="6"] { display: none; } #bh .more-item[data-pri="6"] { display: block; } }

/* mega panels */
#bh .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 22px 44px rgba(0,0,0,.13); display: none; z-index: 60; max-height: calc(100vh - 140px); overflow: auto; }
#bh .mega.open { display: block; }
/* Panels use the whole window; columns are only as wide as their longest name and sit centred, wrapping when the window is narrow. */
#bh .mega-inner { max-width: none; margin: 0 auto; padding: 32px clamp(16px, 2vw, 40px) 0; }
#bh .mega { --cgap: clamp(22px, 1.6vw, 36px); --rng: 16px; --pn: 16px; --pl: 20px; --pp: 13px; --lgap: 10px; }
#bh .cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--cgap); }
#bh .col { flex: 0 0 auto; margin-bottom: 26px; min-width: 10em; max-width: 30em; }
#bh .prods-wrap.is-split { display: flex; gap: 0 clamp(16px, 1.3vw, 26px); }
#bh .range { margin: 0 0 14px; font: 700 var(--rng)/1.2 var(--font); color: var(--nav-ink); padding: 0 0 9px; border-bottom: 2px solid var(--bar); }
#bh .prods li { margin: 0 0 var(--lgap); }
#bh .prods a { display: block; line-height: 1.3; }
#bh .pname { display: block; font: 300 var(--pn)/var(--pl) var(--font); color: var(--nav-ink); }
#bh .prods a:hover .pname, #bh .prods a[aria-current] .pname { color: var(--bar); }
#bh .pprice { display: block; font: 300 var(--pp)/1.35 var(--font); color: var(--pink); margin-top: 2px; }
#bh .mega-foot { border-top: 1px solid var(--rule); margin-top: 4px; padding: 16px 0; max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#bh .seeall { font: 700 15px/1 var(--font); color: var(--bar); }
#bh .seeall-none { color: var(--nav-ink); font-weight: 400; }
#bh .seeall .cnt { font: 300 15px/1 var(--font); color: var(--muted); margin-left: 10px; }
#bh .foot-note { font: 300 13px/1.3 var(--font); color: var(--muted); }
#bh .bh-back, #bh .bh-panel-title, #bh .bh-phone-links { display: none; }
#bh .bh-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
#bh .bh-backdrop.on { opacity: 1; pointer-events: auto; }

/* tablet */
@media (max-width: 1024px) {
	#bh { --bar-h: 120px; --nav-h: 60px; --nav-gap: 0px; --logo-w: 170px; --slot-w: 300px; --slot-h: 34px; --disc: 34px; --marker: 7px; }
	#bh .tabs, #bh .greet { display: none; }
	#bh .navmenu > li > a { padding-bottom: 14px; }
}

/* phones: bar with logo, search, basket, account and menu; departments open as full-width sheets */
@media (max-width: 850px) {
	#bh { --bar-h: 64px; --logo-w: 120px; --slot-h: 34px; --disc: 34px; --pad: 14px; }
	#bh .bar > .wrap { gap: 10px; }
	#bh .actions { gap: 8px; }
	#bh .total { display: none; }
	#bh .pill.is-open, #bh .pill:focus-within { position: absolute; left: var(--pad); right: var(--pad); width: auto; z-index: 5; }
	#bh .bh-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 8px; }
	#bh .bh-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
	#bh.menu-open .bh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	#bh.menu-open .bh-burger span:nth-child(2) { opacity: 0; }
	#bh.menu-open .bh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	#bh .navbar { display: none; position: fixed; left: 0; right: 0; top: var(--bh-top, 64px); bottom: 0; height: auto; margin: 0; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 70; border-top: 1px solid var(--rule); }
	#bh.menu-open .navbar { display: block; }
	#bh.menu-open { z-index: 99998; } /* above Uni CPO's sticky Add To Basket bar (9999), below the admin bar */
	#bh .navrow { flex-direction: column; height: auto; padding: 8px var(--pad) 24px; }
	#bh .navmenu { flex-direction: column; padding: 0; font-size: 17px; }
	#bh .nav-item, #bh .li-more { display: flex; }
	#bh .li-more { display: none !important; }
	#bh .nav-item > a { padding: 14px 0; border-bottom: 1px solid var(--rule); width: 100%; justify-content: space-between; font-weight: 400; }
	#bh .navmenu-store .nav-item > a::after { content: '›'; position: static; height: auto; background: none; opacity: 1; font-size: 22px; line-height: 1; color: var(--bar); }
	#bh .navmenu-studio .nav-item > a::after { display: none; }
	#bh .nav-label { text-align: left; max-width: none; }
	#bh .switch, #bh .phone { padding: 16px 0 0; font-size: 16px; }
	#bh .phone-num { display: inline; }
	#bh .bh-phone-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
	#bh .bh-phone-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 var(--font); }
	#bh .bh-pl-trade { background: var(--pink); color: #fff; }
	#bh .bh-pl-help { border: 1px solid var(--rule); color: var(--purple); font-weight: 400; }
	#bh .rule { display: none; }
	#bh .mega { position: static; box-shadow: none; border: 0; max-height: none; overflow: visible; }
	#bh.sheet-open .navrow { display: none; }
	#bh .mega-inner { padding: 8px var(--pad) 24px; }
	#bh .bh-back { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; font: 400 15px/1 var(--font); color: var(--bar); }
	#bh .bh-back::before { content: '‹'; font-size: 22px; line-height: 1; }
	#bh .bh-panel-title { display: block; margin: 0 0 14px; font: 700 20px/1.2 var(--font); color: var(--nav-ink); }
	#bh .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
	#bh .col { min-width: 0; max-width: none; }
	#bh .prods-wrap.is-split { display: block; }
	#bh .mega { --pn: 16px; --pl: 21px; --pp: 13px; --lgap: 12px; }
	#bh .mega-foot { flex-direction: column; align-items: flex-start; }
	#bh .bh-backdrop { display: none; }
	body.bh-menu-locked { overflow: hidden; }
}
@media (max-width: 480px) {
	#bh .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	#bh *, #bh *::before, #bh *::after { transition: none !important; }
}