/* HostBou storefront navigation. Shared by all four service menus. */
.store-body .hb-account-menu { position: relative; }
.store-body .hb-account-menu > summary { list-style: none; cursor: pointer; user-select: none; gap: 9px; }
.store-body .hb-account-menu > summary::-webkit-details-marker { display: none; }
.store-body .hb-account-menu > summary:focus-visible { outline: 3px solid #244f85; outline-offset: 4px; }
.store-body .hb-account-chevron { display: flex; flex-shrink: 0; transition: transform .15s; }
.store-body .hb-account-chevron > .icon { width: 14px; height: 14px; }
.store-body .hb-account-menu[open] .hb-account-chevron { transform: rotate(180deg); }
.store-body .hb-account-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 294px; padding: 8px; background: white; color: #203c59; border: 1px solid #dfe7f0; border-radius: 15px; box-shadow: 0 18px 55px #10264124; z-index: 90; max-height: min(680px, calc(100dvh - 150px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.store-body .hb-account-menu:not([open]) > .hb-account-dropdown { display: none; }
.store-body .hb-account-heading { display: flex; align-items: center; gap: 12px; padding: 15px 12px 19px; margin-bottom: 6px; border-bottom: 1px solid #e7edf4; }
.store-body .hb-account-heading > div { min-width: 0; }
.store-body .hb-account-heading strong { display: block; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.store-body .hb-account-heading small { display: block; font-size: 12px; color: #62758c; margin-top: 3px; line-height: 1.5; }
.store-body .hb-account-avatar { display: grid; place-items: center; width: 40px; height: 40px; background: #fff2e7; color: #b34d0c; border-radius: 12px; flex-shrink: 0; }
.store-body .hb-account-avatar > .icon { width: 20px; height: 20px; }
.store-body .hb-account-dropdown nav { display: grid; gap: 3px; }
.store-body .hb-account-dropdown nav > a, .store-body .hb-account-logout > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #29435f; text-align: left; font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.store-body .hb-account-dropdown nav > a:hover, .store-body .hb-account-dropdown nav > a:focus-visible { background: #f0f5fb; color: #163e70; }
.store-body .hb-account-dropdown nav > a > .icon, .store-body .hb-account-logout .icon { width: 18px; height: 18px; flex-shrink: 0; color: #627a96; }
.store-body .hb-account-dropdown nav > .hb-account-admin { background: #f5f8fc; margin-top: 5px; }
.store-body .hb-account-logout { border-top: 1px solid #e7edf4; padding-top: 7px; margin: 7px 0 0; }
.store-body .hb-account-logout > button { color: #a23e25; }
.store-body .hb-account-logout > button:hover, .store-body .hb-account-logout > button:focus-visible { background: #fff1ed; }
@media (max-width:650px) {
    .store-body .hb-account-dropdown { position: fixed; top: var(--account-dropdown-top, 120px); inset-inline: 16px; width: auto; max-height: calc(100dvh - var(--account-dropdown-top, 120px) - 16px); }
    .store-body .hb-account-menu > summary.btn { gap: 6px; padding-inline: 10px; }
}
.store-body .nh-nav-group > summary { user-select: none; }
.store-body .nh-nav-group[open] > summary { color: #173d70; }
.store-body .nh-nav-group[open] > summary:after { background: var(--action-orange); }
.store-body .hb-mega {
    position: absolute;
    top: calc(100% - 1px);
    inset-inline: 0;
    z-index: 65;
    display: grid;
    grid-template-columns: minmax(0,1fr) 20rem;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-top: 3px solid var(--action-orange);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 22px 50px -15px #10233b38, 0 5px 15px #10233b0a;
    overflow: hidden;
    animation: hb-mega-enter .16s ease-out;
}
.store-body .hb-mega-main { padding: 1.75rem; min-width: 0; }
.store-body .hb-mega-heading { margin-bottom: 1.375rem; padding-inline: .375rem; }
.store-body .hb-mega-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: #a44408; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.store-body .hb-mega-eyebrow > i { width: .375rem; height: .375rem; border-radius: 50%; background: #dd6919; }
.store-body .hb-mega-heading h2 { color: #182e4c; font-size: 1.375rem; line-height: 1.35; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.025em; }
.store-body .hb-mega-heading p { color: #52627a; font-size: .9375rem; line-height: 1.6; margin: 0; }
.store-body .hb-mega-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; }
.store-body .hb-mega-link { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem; border: 1px solid #e7ecf3; border-radius: .75rem; min-width: 0; min-height: 6.5rem; background: #fff; transition: background .15s, border-color .15s, box-shadow .15s; }
.store-body .hb-mega-link:hover, .store-body .hb-mega-link:focus-visible { background: #fff9f3; border-color: #edc9ad; box-shadow: 0 3px 10px #8a4d1010; }
.store-body .hb-mega-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #f6dcc5; background: #fff3e7; color: #ad4c0b; }
.store-body .hb-mega-icon > .icon { width: 1.375rem; height: 1.375rem; stroke-width: 1.7; }
.store-body .hb-mega-icon.tone-blue { background: #edf4ff; border-color: #dce8fa; color: #3565a2; }
.store-body .hb-mega-icon.tone-purple { background: #f3f0fb; border-color: #e7dff6; color: #7854aa; }
.store-body .hb-mega-icon.tone-teal { background: #ebf7f3; border-color: #d5eee5; color: #23765b; }
.store-body .hb-mega-link-copy { display: block; min-width: 0; flex: 1; }
.store-body .hb-mega-link-copy strong { display: block; color: #203653; font-size: 1rem; font-weight: 650; line-height: 1.4; margin: 0 0 .375rem; }
.store-body .hb-mega-link-copy small { display: block; color: #52627a; font-size: .875rem; font-weight: 400; line-height: 1.6; }
.store-body .hb-mega-link > .hb-mega-arrow { margin-top: .25rem; width: 1rem; height: 1rem; color: #73839a; transition: color .15s, transform .15s; }
.store-body .hb-mega-link:hover > .hb-mega-arrow { color: #ad4c0b; transform: translateX(2px); }
.store-body .hb-mega-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.375rem; margin: 1rem 1rem 1rem 0; border: 1px solid #29456b; border-radius: .875rem; background: radial-gradient(ellipse at 100% 0,#284e80,transparent 75%),#142b48; color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.store-body .hb-mega-feature-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; }
.store-body .hb-mega-feature-top > span:first-child { width: 2.75rem; height: 2.75rem; border-radius: .75rem; border: 1px solid #ffffff26; background: #ffffff0a; display: grid; place-items: center; color: #ffb97e; }
.store-body .hb-mega-feature-top .icon { width: 1.375rem; height: 1.375rem; }
.store-body .hb-feature-brand { color: #f5f8fc; font-size: 1rem; font-weight: 700; letter-spacing: -.025em; }
.store-body .hb-feature-brand > span { color: #ffa65b; }
.store-body .hb-mega-feature-copy { position: relative; z-index: 1; }
.store-body .hb-feature-eyebrow { display: block; color: #ffd1aa; font-size: .875rem; font-weight: 600; line-height: 1.5; letter-spacing: .025em; margin-bottom: .625rem; }
.store-body .hb-mega-feature h3 { color: #fff; font-size: 1.5rem; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 .75rem; }
.store-body .hb-mega-feature p { font-size: .875rem; color: #d0dcef; line-height: 1.65; margin: 0; }
.store-body .hb-feature-tags { display: flex; flex-wrap: wrap; gap: .375rem; position: relative; z-index: 1; }
.store-body .hb-feature-tags > span { font-size: .875rem; color: #dbe6f6; background: #ffffff08; border: 1px solid #ffffff21; border-radius: .375rem; padding: .25rem .5rem; line-height: 1.5; }
.store-body .hb-mega-cta { margin-top: auto; width: 100%; min-height: 2.875rem; justify-content: space-between; position: relative; z-index: 1; padding-inline: 1rem; font-size: .9375rem; }
.store-body .hb-feature-orbit { position: absolute; z-index: -1; width: 17rem; height: 17rem; border: 1px solid #a2c2ed14; border-radius: 50%; right: -9rem; top: 2rem; box-shadow: 0 0 0 2rem #a2c2ed04, 0 0 0 4rem #a2c2ed03; }
.store-body .hb-mega-footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem 2rem; border-top: 1px solid #e4eaf2; background: #f7f9fc; }
.store-body .hb-mega-footer > span { display: inline-flex; align-items: center; gap: .625rem; font-size: .875rem; line-height: 1.6; color: #52627a; }
.store-body .hb-mega-footer > span > .icon { color: #506c91; width: 1.125rem; height: 1.125rem; }
.store-body .hb-mega-footer > a { display: inline-flex; align-items: center; gap: .625rem; font-size: .875rem; line-height: 1.6; font-weight: 650; color: #244f85; min-height: 1.75rem; }
.store-body .hb-mega-footer > a:hover { color: #a44408; }
.store-body .hb-mega-footer > a > .icon { width: 1rem; height: 1rem; }
@keyframes hb-mega-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width:1101px) and (max-width:1250px) {
    .store-body .hb-mega { grid-template-columns: minmax(0,1fr) 18rem; }
    .store-body .hb-mega-main { padding: 1.375rem; }
    .store-body .hb-mega-link { padding: .875rem; gap: .625rem; }
    .store-body .hb-mega-link > .hb-mega-arrow { display: none; }
}
@media (max-width:1100px) {
    .store-body .nh-nav { max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; }
    .store-body .hb-mega { position: static; display: block; width: auto; border: 0; box-shadow: none; border-radius: .75rem; background: #f8fafd; animation: none; margin: .25rem 0 .75rem; }
    .store-body .hb-mega-main { padding: 1rem; }
    .store-body .hb-mega-heading { padding: 0; margin-bottom: 1rem; }
    .store-body .hb-mega-heading h2 { font-size: 1.25rem; }
    .store-body .hb-mega-heading p { font-size: .875rem; }
    .store-body .hb-mega-link { min-height: 0; padding: .875rem; gap: .75rem; }
    .store-body .hb-mega-feature { display: none; }
    .store-body .hb-mega-footer { padding: .875rem 1rem; align-items: flex-start; }
    .store-body .hb-mega-footer > a { min-height: 2.75rem; }
}
@media (max-width:650px) {
    .store-body .hb-mega-links { grid-template-columns: minmax(0,1fr); gap: .5rem; }
    .store-body .hb-mega-main { padding: .75rem; }
    .store-body .hb-mega-icon { width: 2.5rem; height: 2.5rem; }
    .store-body .hb-mega-link-copy strong { font-size: .9375rem; }
    .store-body .hb-mega-link > .hb-mega-arrow { display: none; }
    .store-body .hb-mega-footer { flex-direction: column; }
}
@media (prefers-reduced-motion:reduce) {
    .store-body .hb-mega { animation: none; }
    .store-body .hb-mega-link, .store-body .hb-mega-arrow { transition: none; }
}
