:root{--sticky-header-height:120px}
html{scroll-padding-top:calc(var(--sticky-header-height) + 20px)}
body>header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 4px 18px #25251d08;border-bottom:1px solid #e4e4e4}
.social-icon:hover{color:var(--logo-gold)}
@media(max-width:1000px){body>header nav.open{max-height:calc(100dvh - var(--sticky-header-height));overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:760px){:root{--sticky-header-height:88px}}

.nav-services{position:relative;display:flex;align-items:center;gap:4px}
header .services-toggle{display:grid;place-items:center;width:21px;height:28px;padding:0;border:0;background:transparent;color:inherit;border-radius:999px;caret-color:transparent;user-select:none}
.services-toggle svg{width:13px;height:13px;transition:transform .2s}
.services-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.services-toggle:hover{color:var(--logo-gold)}
.services-dropdown{position:absolute;top:calc(100% + 16px);left:-18px;width:285px;padding:9px;background:#fff;border:1px solid #e4e4e4;border-radius:15px;box-shadow:0 14px 40px #29271c17;z-index:70}
.services-dropdown[hidden]{display:none!important}
.shop-dropdown{max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
header nav .services-dropdown a{display:block;padding:12px 13px;font-size:12px;line-height:1.5;font-weight:500;border-radius:9px;white-space:normal;color:#30312b}
header nav .services-dropdown a:hover,header nav .services-dropdown a:focus-visible{background:#f5f5f5;color:var(--logo-gold)}
header nav .services-dropdown a[aria-current="page"]{background:#e4e4e4;color:var(--logo-gold)}
header nav .nav-services>a[aria-current]{color:var(--logo-gold)}
@media(max-width:1000px){header nav.open .nav-services{flex-wrap:wrap;width:100%;justify-content:space-between}header nav.open .services-toggle{width:34px;height:30px;background:#f5f5f5}header nav.open .services-dropdown{position:static;flex-basis:100%;width:100%;margin-top:7px;box-shadow:none;background:#fafafa;border-radius:12px;padding:7px}header nav.open .services-dropdown a{font-size:13px;padding:12px}}
@media(prefers-reduced-motion:reduce){.services-toggle svg{transition:none}}

@media(min-width:1001px){header nav{align-items:center}.nav-services{align-items:center;line-height:inherit}header .services-toggle{width:17px;height:20px}}

/* Shared announcement contacts and navigation sizing. */
body>.announcement{align-items:center;gap:20px;padding-top:11px;padding-bottom:11px;min-height:50px}
.announcement .announcement-contacts{display:flex;align-items:center;gap:12px;flex-shrink:0;letter-spacing:0}
.announcement .announcement-contacts a{display:inline-flex;align-items:center;color:#f5f5f5}
.announcement .announcement-contacts .social-links{gap:3px}
.announcement .announcement-contacts .social-icon{width:27px;height:27px}
.announcement .announcement-contacts .social-icon svg{width:17px;height:17px}
.announcement .announcement-contacts .social-icon:hover{background:#ffffff16;color:var(--logo-gold)}
.announcement .announcement-contacts .phone{font-size:12px;letter-spacing:0;white-space:nowrap}
body>header #nav{font-size:15px;gap:24px}
@media(min-width:1001px) and (max-width:1250px){body>header #nav{font-size:14px;gap:18px}}
@media(max-width:1000px){body>header #nav{font-size:16px}}
@media(max-width:760px){body>.announcement{flex-wrap:wrap;justify-content:center;gap:5px;padding:10px 5%}.announcement>span{width:100%;text-align:center;font-size:8px}.announcement .announcement-contacts{gap:12px}.announcement .announcement-contacts .phone{font-size:11px}}

/* Shared footer navigation and legal links. */
.footer-main{grid-template-columns:1.05fr 1fr 1.3fr 1.15fr;gap:35px}.footer-main nav{display:block}.footer-main a{line-height:1.6}.footer-main a:hover,.footer-legal a:hover{color:var(--logo-gold)}.footer-main a[href^="mailto:"]{overflow-wrap:anywhere}.footer-bottom .footer-legal{display:flex;flex-wrap:wrap;gap:22px;align-items:center}.footer-legal a{white-space:nowrap}@media(max-width:760px){.footer-main{grid-template-columns:1fr 1fr;gap:30px 20px}.footer-main>div:first-child,.footer-main>div:last-child{grid-column:1/-1}.footer-main>div:first-child{padding-bottom:6px}.footer-bottom{align-items:center;gap:18px}.footer-bottom .footer-legal{order:3;width:100%;gap:20px;padding-bottom:5px}.footer-bottom>span:first-child{display:block}}

/* Hide browsing carets on page content; retain carets in editable controls. */
*{caret-color:transparent}
input,textarea,[role="textbox"],[contenteditable="true"],[contenteditable="true"] *,[contenteditable="plaintext-only"],[contenteditable="plaintext-only"] *{caret-color:auto}

/* Bridge the menu gap outside the scrollable dropdown, which clips overflow. */
@media(min-width:1001px){.nav-services:has(>.services-toggle[aria-expanded="true"])::after{content:"";position:absolute;top:100%;left:-18px;width:285px;height:16px}}

/* SHARED HEADER DESIGN START */
/* One compact navigation row shared by local pages and the GHL storefront. */
:is(body > .announcement, #jojo-storefront > .announcement) { display: none; }

:is(body > header, #jojo-storefront > header) {
  --header-gold: #d9aa0e;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  position: sticky; top: 0; z-index: 70; width: 100%; max-width: none;
  min-height: 90px; margin: 0; padding: 8px 6%; gap: 30px;
  background: #20211e; color: #fff; border: 0; border-bottom: 1px solid #4a493b; border-radius: 0;
  box-shadow: 0 3px 14px rgb(20 21 18 / 8%); font-family: Montserrat, Arial, sans-serif;
}
:is(body > header, #jojo-storefront > header) .logo { display: flex; align-items: center; gap: 16px; width: auto; min-width: 0; }
:is(body > header, #jojo-storefront > header) .logo img { width: 72px; height: 72px; max-width: none; object-fit: contain; }
:is(body > header, #jojo-storefront > header) .header-brand-description { display: none; }
:is(body > header, #jojo-storefront > header) #nav { display: flex; align-items: center; justify-content: center; justify-self: stretch; width: auto; padding: 0; gap: 26px; font-size: 15px; font-weight: 500; line-height: 1.5; }
:is(body > header, #jojo-storefront > header) #nav > a,
:is(body > header, #jojo-storefront > header) #nav > .nav-services > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; color: #e9ebe4; white-space: nowrap; }
:is(body > header, #jojo-storefront > header) #nav > a[aria-current],
:is(body > header, #jojo-storefront > header) #nav > .nav-services > a[aria-current] { color: #fff; font-weight: 600; }
:is(body > header, #jojo-storefront > header) #nav > a[aria-current]::after,
:is(body > header, #jojo-storefront > header) #nav > .nav-services > a[aria-current]::after { content: ''; position: absolute; height: 2px; width: 20px; left: 0; bottom: 3px; background: var(--header-gold); border-radius: 1px; }
:is(body > header, #jojo-storefront > header) #nav > a:is(:hover, :focus-visible),
:is(body > header, #jojo-storefront > header) #nav > .nav-services > a:is(:hover, :focus-visible) { color: var(--header-gold); }
:is(body > header, #jojo-storefront > header) .nav-services { display: flex; align-items: center; gap: 5px; }
:is(body > header, #jojo-storefront > header) .services-toggle { display: grid; place-items: center; width: 23px; height: 36px; padding: 0; border: 0; background: transparent; color: #d8dbd1; }
:is(body > header, #jojo-storefront > header) .services-toggle svg { width: 12px; height: 12px; }
:is(body > header, #jojo-storefront > header) .services-toggle:hover { color: var(--header-gold); }
:is(body > header, #jojo-storefront > header) .services-dropdown { top: calc(100% + 10px); }
:is(body > header, #jojo-storefront > header) .services-dropdown a { color: #20211e; font-size: 13px; }
:is(body > header, #jojo-storefront > header) .services-dropdown a:is(:hover, :focus-visible) { background: #f5f5f1; color: #886808; }
:is(body > header, #jojo-storefront > header) .header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: 13px; }
:is(body > header, #jojo-storefront > header) .header-socials { display: flex; align-items: center; gap: 2px; margin: 0 4px 0 0; }
:is(body > header, #jojo-storefront > header) .header-socials .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 44px; color: #d8dbd1; border-radius: 6px; }
:is(body > header, #jojo-storefront > header) .header-socials .social-icon svg { width: 16px; height: 16px; }
:is(body > header, #jojo-storefront > header) .header-socials .social-icon:hover { color: var(--header-gold); background: #30332b; }
:is(body > header, #jojo-storefront > header) .header-mobile-socials { display: none; }
:is(body > header, #jojo-storefront > header) .header-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-right: 8px; padding-right: 18px; border-right: 1px solid #4e5146; color: #f3f4ed; font-size: 14px; font-weight: 500; white-space: nowrap; }
:is(body > header, #jojo-storefront > header) .header-call svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--header-gold); }
:is(body > header, #jojo-storefront > header) .header-call:hover { color: var(--header-gold); }
:is(body > header, #jojo-storefront > header) #cart-open { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 13px; border: 1px solid #63665a; border-radius: 8px; background: transparent; color: #fff; font-size: 13px; font-weight: 500; line-height: 1; }
:is(body > header, #jojo-storefront > header) #cart-open > svg { width: 17px; height: 19px; color: var(--header-gold); }
:is(body > header, #jojo-storefront > header) #cart-open:hover { border-color: var(--header-gold); background: #2b2d26; }
:is(body > header, #jojo-storefront > header) #cart-count { display: grid; place-items: center; width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; border-radius: 50%; background: var(--header-gold); color: #20211e; font-size: 11px; font-weight: 700; }
:is(body > header, #jojo-storefront > header) #menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #63665a; border-radius: 8px; background: transparent; color: #fff; }
:is(body > header, #jojo-storefront > header) #menu svg { width: 22px; height: 22px; }
:is(body > header, #jojo-storefront > header) :is(a, button):focus-visible { outline: 2px solid var(--header-gold); outline-offset: 4px; }

@media (max-width: 1400px) {
  :is(body > header, #jojo-storefront > header) { gap: 24px; }
  :is(body > header, #jojo-storefront > header) #nav { gap: 17px; font-size: 13px; }
  :is(body > header, #jojo-storefront > header) .header-socials { display: none; }
}
@media (max-width: 1180px) {
  :is(body > header, #jojo-storefront > header) { grid-template-columns: 1fr auto; gap: 0 24px; }
  :is(body > header, #jojo-storefront > header) #menu { display: flex; }
  :is(body > header, #jojo-storefront > header) #nav { display: none; grid-column: 1 / -1; grid-row: 2; order: initial; align-items: stretch; justify-content: flex-start; width: 100%; padding: 0; gap: 0; font-size: 15px; }
  :is(body > header, #jojo-storefront > header) #nav.open { display: flex; flex-direction: column; max-height: calc(100svh - 110px); overflow-y: auto; overscroll-behavior: contain; margin-top: 12px; padding: 8px 0 16px; border-top: 1px solid #494c40; }
  :is(body > header, #jojo-storefront > header) #nav > a { padding: 12px 0; }
  :is(body > header, #jojo-storefront > header) .nav-services { width: 100%; flex-wrap: wrap; justify-content: space-between; padding: 2px 0; }
  :is(body > header, #jojo-storefront > header) .services-toggle { width: 42px; height: 42px; background: #30332b; border-radius: 7px; }
  :is(body > header, #jojo-storefront > header) .services-dropdown { position: static; width: 100%; flex-basis: 100%; max-height: none; margin-top: 6px; margin-bottom: 6px; box-shadow: none; }
  :is(body > header, #jojo-storefront > header) .header-mobile-socials { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #494c40; color: #bdc2b5; font-size: 12px; }
  :is(body > header, #jojo-storefront > header) .header-mobile-social-links { display: flex; align-items: center; gap: 8px; }
  :is(body > header, #jojo-storefront > header) .header-mobile-social-links .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #e9ebe4; border: 1px solid #575b4e; border-radius: 7px; }
  :is(body > header, #jojo-storefront > header) .header-mobile-social-links .social-icon svg { width: 17px; height: 17px; }
  :is(body > header, #jojo-storefront > header) .header-mobile-social-links .social-icon:hover { color: var(--header-gold); background: #30332b; }
}
@media (max-width: 700px) {
  :is(body > header, #jojo-storefront > header) { min-height: 78px; padding-block: 8px; }
  :is(body > header, #jojo-storefront > header) .logo img { width: 60px; height: 60px; }
  :is(body > header, #jojo-storefront > header) .header-actions { gap: 8px; }
  :is(body > header, #jojo-storefront > header) { gap: 0 18px; }
  :is(body > header, #jojo-storefront > header) .header-call { width: 34px; min-width: 34px; margin: 0; padding: 0; border: 0; }
  :is(body > header, #jojo-storefront > header) .header-call span { display: none; }
  :is(body > header, #jojo-storefront > header) #cart-open { padding: 10px 11px; gap: 7px; }
}

@media(max-width:1180px){:is(body>header,#jojo-storefront>header) .nav-services::after{display:none}}
/* SHARED HEADER DESIGN END */