:root {
    --hh-mobile-dock-height: 66px;
    --hh-mobile-dock-safe: env(safe-area-inset-bottom, 0px);
    --hh-mobile-dock-green: #214d43;
    --hh-mobile-dock-ink: #111714;
    --hh-mobile-dock-line: #e1e5e3;
}

.hh-mobile-dock,
.hh-mobile-dock-product { display: none; }

@media (max-width: 920px) {
    html.hh-mobile-dock-locked,
    html.hh-mobile-dock-locked body { overflow: hidden !important; }

    body.hh-has-mobile-dock { padding-bottom: calc(var(--hh-mobile-dock-height) + var(--hh-mobile-dock-safe)); }

    .hh-mobile-dock {
        position: fixed;
        z-index: 10020;
        right: 0;
        bottom: 0;
        left: 0;
        height: calc(var(--hh-mobile-dock-height) + var(--hh-mobile-dock-safe));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 4px 7px var(--hh-mobile-dock-safe);
        border-top: 1px solid var(--hh-mobile-dock-line);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -7px 24px rgba(22, 32, 28, .055);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .hh-mobile-dock__item {
        min-width: 0;
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        padding: 3px 1px 2px;
        color: #303633;
        border: 0;
        border-radius: 12px;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 11px;
        line-height: 1.15;
        font-weight: 460;
        letter-spacing: -.035em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .hh-mobile-dock__item svg {
        width: 23px;
        height: 23px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .hh-mobile-dock__item:nth-child(1) svg { width: 22px; height: 22px; }
    .hh-mobile-dock__item:nth-child(2) svg { width: 22px; height: 22px; }
    .hh-mobile-dock__item:nth-child(3) svg { width: 22px; height: 22px; }
    .hh-mobile-dock__item:nth-child(4) svg { width: 23px; height: 23px; }
    .hh-mobile-dock__item:nth-child(5) svg { width: 24px; height: 24px; }
    .hh-mobile-dock__item > span:last-child {
        display: block;
        font-size: 11px !important;
        line-height: 1.15;
        font-weight: 460 !important;
        letter-spacing: -.035em;
        white-space: nowrap;
    }
    .hh-mobile-dock__item.is-active { color: var(--hh-mobile-dock-green); font-weight: 580; }
    .hh-mobile-dock__item.is-active > span:last-child { font-weight: 580 !important; }
    .hh-mobile-dock__item.is-active svg { stroke-width: 1.72; }
    .hh-mobile-dock__item:active { background: #f3f6f4; }
    .hh-mobile-dock__icon-wrap { position: relative; display: block; }
    .hh-mobile-dock__icon-wrap b {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 999px;
        background: var(--hh-mobile-dock-green);
        font-size: 9px;
        line-height: 13px;
        font-weight: 750;
        text-align: center;
    }

    .hh-mobile-dock-product {
        position: fixed;
        z-index: 10010;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: visibility 0s linear .28s, opacity .22s ease;
    }

    .hh-mobile-dock-product.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .hh-mobile-dock-product__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(8, 13, 11, .36);
        cursor: pointer;
    }

    .hh-mobile-dock-product__panel {
        position: absolute;
        right: 0;
        bottom: calc(var(--hh-mobile-dock-height) + var(--hh-mobile-dock-safe));
        left: 0;
        width: min(100%, 560px);
        max-height: min(76dvh, 680px);
        margin: 0 auto;
        overflow: hidden;
        color: var(--hh-mobile-dock-ink);
        border-radius: 22px 22px 0 0;
        outline: 0;
        background: #fff;
        box-shadow: 0 -16px 48px rgba(15, 25, 21, .16);
        transform: translateY(28px);
        transition: transform .3s cubic-bezier(.22, .75, .25, 1);
    }

    .hh-mobile-dock-product.is-open .hh-mobile-dock-product__panel { transform: translateY(0); }

    .hh-mobile-dock-product__header {
        min-height: 82px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 19px 20px 17px;
        border-bottom: 1px solid var(--hh-mobile-dock-line);
        background: #fff;
    }

    .hh-mobile-dock-product__header span {
        display: block;
        margin-bottom: 6px;
        color: var(--hh-mobile-dock-green);
        font-size: 9px;
        line-height: 1;
        font-weight: 760;
        letter-spacing: .14em;
    }

    .hh-mobile-dock-product__header h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 680; letter-spacing: -.035em; }
    .hh-mobile-dock-product__header button {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #303633;
        border: 1px solid #dfe4e1;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }
    .hh-mobile-dock-product__header button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }
    .hh-mobile-dock-product__body { max-height: calc(min(76dvh, 680px) - 82px); padding: 14px 16px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

    .hh-mobile-dock-product__all,
    .hh-mobile-dock-product__concern {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 17px 16px;
        color: var(--hh-mobile-dock-ink);
        border-radius: 14px;
        background: #f3f6f4;
        text-decoration: none;
    }
    .hh-mobile-dock-product__all span,
    .hh-mobile-dock-product__concern span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .hh-mobile-dock-product__all strong,
    .hh-mobile-dock-product__concern strong { font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
    .hh-mobile-dock-product__all small,
    .hh-mobile-dock-product__concern small { color: #68706c; font-size: 11px; line-height: 1.4; font-weight: 430; }
    .hh-mobile-dock-product__all > svg,
    .hh-mobile-dock-product__concern > svg { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: var(--hh-mobile-dock-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    .hh-mobile-dock-product__list-label { margin: 20px 4px 7px; color: #737c77; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .1em; }
    .hh-mobile-dock-product__list { margin: 0; border-top: 1px solid var(--hh-mobile-dock-line); }
    .hh-mobile-dock-product__item {
        min-height: 72px;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) 20px;
        align-items: center;
        gap: 13px;
        padding: 9px 4px;
        color: var(--hh-mobile-dock-ink);
        border-bottom: 1px solid var(--hh-mobile-dock-line);
        text-decoration: none;
    }
    .hh-mobile-dock-product__thumb { width: 54px; height: 54px; overflow: hidden; border-radius: 11px; background: #f5f3ef; }
    .hh-mobile-dock-product__thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
    .hh-mobile-dock-product__copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .hh-mobile-dock-product__copy strong { overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 580; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
    .hh-mobile-dock-product__copy small { color: #606864; font-size: 12px; font-weight: 520; }
    .hh-mobile-dock-product__item > svg { width: 19px; height: 19px; fill: none; stroke: #8b938f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .hh-mobile-dock-product__concern {
        margin-top: 10px;
        color: var(--hh-mobile-dock-green);
        border: 1.5px solid #6f9289;
        background: #fff;
    }
    .hh-mobile-dock-product__concern strong { color: #173d34 !important; font-weight: 650; }
    .hh-mobile-dock-product__concern small { color: #626d68 !important; }
    .hh-mobile-dock-product__concern > b {
        flex: 0 0 auto;
        padding: 6px 9px;
        color: #245348;
        border-radius: 999px;
        background: #e7f0ec;
        font-size: 10px;
        line-height: 1;
        font-weight: 650;
        letter-spacing: -.02em;
    }
}

@media (max-width: 370px) {
    .hh-mobile-dock__item,
    .hh-mobile-dock__item > span:last-child { font-size: 10.5px !important; }
    .hh-mobile-dock__item svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-mobile-dock-product,
    .hh-mobile-dock-product__panel { transition-duration: .01ms !important; }
}