:root {
    --toolbar-button-size: clamp(44px, 5.6rem, 56px);
    --toolbar-icon-size: clamp(20px, 2.8rem, 28px);
    --toolbar-gap: clamp(12px, 2rem, 20px);
    --toolbar-copy-gap: 32px;
    --detail-copy-bottom: 64px;
    --toolbar-surface: rgba(255, 255, 255, 0.8);
    --toolbar-color: #515151;
    --toolbar-inset-top: max(16px, 3.2rem, env(safe-area-inset-top));
    --toolbar-inset-right: max(16px, 4rem, env(safe-area-inset-right));
}

.common-btns {
    position: absolute;
    top: var(--toolbar-inset-top);
    right: var(--toolbar-inset-right);
    display: flex;
    flex-direction: column;
    gap: var(--toolbar-gap);
    z-index: 1;
}

/* 详情标题首行与第二个按钮的中心对齐，换行保持正常行距。 */
.pages #page1-title,
.pages #page2-title,
.pages #page3-title {
    top: calc(var(--toolbar-inset-top) + var(--toolbar-button-size) + var(--toolbar-gap) + var(--toolbar-button-size) / 2 - 0.6em);
    bottom: auto;
    line-height: 1.2;
}

/* 四个产品的详情正文统一对齐底部。 */
.pages #page1-info,
.pages #page2-info,
.pages #page3-info {
    top: auto;
    bottom: var(--detail-copy-bottom);
}

.pages #page1-info > div:last-child,
.pages #page2-info > div:last-child,
.pages #page3-info > div:last-child {
    margin-bottom: 0;
}

.common-btns .icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--toolbar-button-size);
    height: var(--toolbar-button-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--toolbar-color);
    background: var(--toolbar-surface);
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}

.common-btns .icon img {
    width: var(--toolbar-icon-size);
    height: var(--toolbar-icon-size);
    pointer-events: none;
}

.common-btns .toolbar-back-icon,
.common-btns .is-detail .toolbar-home-icon {
    display: none;
}

.common-btns .is-detail .toolbar-back-icon {
    display: block;
}

.common-btns .icon:focus-visible {
    outline: 2px solid var(--toolbar-color);
    outline-offset: 3px;
}

@media (hover: hover) {
    .common-btns .icon:hover {
        background: #ffffff;
    }
}