.site-preferences { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; position: relative; }
.site-menu { position: relative; }
.site-menu-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .6rem; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: .5rem; font-family: inherit; font-size: .875rem; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.site-menu-toggle::after { content: '⌄'; color: #94a3b8; }
.site-menu-toggle:hover, .site-menu-toggle[aria-expanded="true"] { border-color: #22d3ee; }
.site-menu-toggle:focus-visible, .site-menu-options button:focus-visible, .site-contact button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.site-menu-options { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); width: 12rem; max-height: min(20rem, 60vh); overflow-y: auto; padding: .25rem; color: #e2e8f0; background: #1e293b; border: 1px solid #334155; border-radius: .5rem; box-shadow: 0 12px 30px #0006; z-index: 90; }
.site-menu-options[hidden] { display: none; }
.site-menu-options button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .55rem .65rem; background: transparent; border: 0; border-radius: .25rem; color: inherit; text-align: start; cursor: pointer; font-size: .875rem; }
.site-menu-options button:hover, .site-menu-options button[aria-selected="true"] { background: #334155; }
.site-menu-options small { color: #94a3b8; }
.site-contact { position: fixed; top: 0; right: 0; height: 100dvh; width: min(100%, 500px); box-sizing: border-box; padding: 2rem 1.5rem; background: #0f172a; color: #fff; border-left: 1px solid #22d3ee40; z-index: 100; overflow-y: auto; box-shadow: -20px 0 60px #0005; }
#contactFormPanel.site-contact { padding: 2rem 1.5rem !important; }
.site-contact[hidden], .site-contact-backdrop[hidden] { display: none; }
.site-contact-backdrop { position: fixed; inset: 0; z-index: 99; background: #02061799; }
.site-contact h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.site-contact p { color: #94a3b8; margin: 0 0 1.5rem; font-size: .875rem; }
.site-contact .site-contact-close { position: absolute; top: .75rem; right: 1rem; padding: .5rem; background: none; border: 0; color: #cbd5e1; font-size: 1.5rem; cursor: pointer; }
.site-contact form { display: grid; gap: 1rem; }
.site-contact label { display: block; font-size: .875rem; color: #cbd5e1; }
.site-contact input, .site-contact select, .site-contact textarea { display: block; box-sizing: border-box; width: 100%; margin-top: .3rem; padding: .75rem; border-radius: .5rem; border: 1px solid #334155; background: #1e293b; color: #fff; font: inherit; }
.site-contact input:focus, .site-contact select:focus, .site-contact textarea:focus { outline: 2px solid #22d3ee; outline-offset: 1px; }
.site-contact textarea { resize: vertical; }
.site-contact .site-contact-submit { padding: .8rem; border: 0; border-radius: .5rem; color: #fff; background: #0891b2; font-weight: 600; cursor: pointer; }
.site-contact .site-contact-privacy { margin: 0; font-size: .75rem; text-align: center; }
.site-contact [role="status"] { color: #67e8f9; }
.site-discount { display: inline-block; margin-inline-start: .4rem; padding: .15rem .4rem; border-radius: 1rem; background: #064e3b; color: #a7f3d0; font-size: .75rem; white-space: nowrap; }
.site-nav-row { gap: .75rem; flex-wrap: wrap; }
.site-nav-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.site-nav-actions > * { margin-left: 0 !important; margin-right: 0 !important; }
.site-navigation { display: flex; align-items: center; gap: .25rem; }
.site-navigation a { padding: .45rem .6rem; color: #cbd5e1; font-size: .875rem; white-space: nowrap; }
.site-navigation a:hover { color: #22d3ee; }
.site-navigation a:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; border-radius: .25rem; }
@media (max-width: 640px) {
    .site-menu:first-child .site-menu-options { inset-inline-start: 0; inset-inline-end: auto; }
    .site-nav-row { justify-content: center; }
    .site-nav-row > :first-child img { max-height: 2.5rem; }
    .site-nav-actions { justify-content: center; }
    .site-nav-row + main { padding-top: 9rem; }
    body.site-has-nav main { padding-top: var(--site-nav-height, 9rem); }
    body.site-has-nav #hero { padding-top: 1rem; }
}