/* SyncBeds shared product navigation component */
.product-nav{position:relative}
.product-nav>summary{display:flex;align-items:center;gap:5px;padding:9px 11px;border-radius:9px;color:var(--ink2);font-size:.93rem;font-weight:720;list-style:none;cursor:pointer;user-select:none}
.product-nav>summary::-webkit-details-marker{display:none}
.product-nav>summary:hover,.product-nav[open]>summary{background:var(--soft);color:var(--ink)}
.product-nav-chevron{font-size:.68rem;transition:transform .16s ease}
.product-nav[open] .product-nav-chevron{transform:rotate(180deg)}
.product-nav-menu{position:absolute;top:calc(100% + 9px);left:50%;z-index:1600;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:390px;padding:9px;transform:translateX(-50%);border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 48px rgba(29,44,56,.16)}
.product-nav-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px!important;border-radius:9px;font-size:.88rem!important;font-weight:760!important}
.product-nav-menu a:hover{background:var(--pale)!important;color:var(--ink)!important}
.mobile-product-nav>summary{padding:10px;border-radius:8px;color:var(--ink2);font-weight:720;list-style:none;cursor:pointer}
.mobile-product-nav>summary::-webkit-details-marker{display:none}
.mobile-product-nav>summary:after{content:'▾';float:right;font-size:.75rem}
.mobile-product-nav[open]>summary:after{transform:rotate(180deg)}
.mobile-product-links{display:grid;gap:2px;margin:3px 0 7px;padding:6px;border-left:2px solid var(--pale)}
.mobile-product-links a{padding:9px 10px!important;font-size:.93rem}
.language-option,.mobile-language-option{text-decoration:none}
.site-header .brand img.logo{display:block;height:auto;max-height:42px;object-fit:contain}
.marketing-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:1020px){.product-nav{display:none}}
/* .header-inner is a 3-column grid (logo / desktop-nav / actions). On mobile the
   desktop-nav is set to display:none, which removes it from grid auto-placement
   entirely — not just visually — so .actions (language switcher, login, CTA, the
   mobile menu button) would otherwise be auto-placed into the now-vacant middle
   column and render right next to the logo instead of at the header's trailing
   edge. Pin it to the last column explicitly so its position never depends on
   which siblings happen to be hidden at a given breakpoint. */
.header-inner .actions{grid-column:3}