.tree-calc {
    margin: 56px 0 64px;
    color: #42474b;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
}
.tree-calc *, .tree-calc *::before, .tree-calc *::after { box-sizing: border-box; }
.tree-calc [hidden] { display: none !important; }
.tree-calc h2 { margin: 0 0 16px; text-align: center; }
.tree-calc .tree-calc__intro { max-width: 70ch; margin: 0 auto 28px; text-align: center; line-height: 1.5; }
.tree-calc__body { padding: 32px; background: #f3f4f1; }
.tree-calc__form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 0; }
.tree-calc__field { min-width: 0; }
.tree-calc__field label { display: block; margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.tree-calc__field select, .tree-calc__field input {
    width: 100%; max-width: 100%; height: 52px; margin: 0; padding: 10px 12px;
    border: 1px solid #a3aaa0; border-radius: 0; background: #fff;
    color: #30372e; font: inherit; font-size: 18px; line-height: 1.4;
    box-shadow: none; caret-color: #536338;
}
.tree-calc__field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2330372e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 16px center; background-repeat: no-repeat; background-size: 18px 18px;
}
.tree-calc__quantity { display: flex; width: 100%; }
.tree-calc__quantity input { flex: 1 1 0; min-width: 0; width: 0; position: relative; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.tree-calc__quantity input::-webkit-inner-spin-button, .tree-calc__quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tree-calc .tree-calc__step {
    display: grid; place-items: center; position: relative; flex: 0 0 48px; width: 48px; height: 52px;
    margin: 0; padding: 0; border: 1px solid #a3aaa0; border-left: 0; border-radius: 0;
    background: #fff; color: #536338; box-shadow: none; cursor: pointer;
    transition: background-color 160ms ease-out;
}
.tree-calc__step svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tree-calc .tree-calc__step:hover:not(:disabled) { background: #e3eadb; }
.tree-calc .tree-calc__step:active:not(:disabled) { background: #d9e3ca; }
.tree-calc .tree-calc__step:disabled { background: #e9ece6; color: #8b9382; cursor: default; }
.tree-calc__quantity input:focus-visible, .tree-calc__step:focus-visible { z-index: 1; }
.tree-calc__retry {
    width: auto; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 0;
    background: #536338; color: #fff; font: inherit; font-size: 18px; font-weight: 700;
    line-height: 1.4; text-align: center; text-transform: none; cursor: pointer;
    transition: background-color 160ms ease-out;
}
.tree-calc__retry:hover { background: #3f4e28; }
.tree-calc__field select:disabled, .tree-calc__field input:disabled { background: #e9ece6; color: #626a5a; }
.tree-calc input:focus-visible, .tree-calc select:focus-visible, .tree-calc button:focus-visible { outline: 3px solid #536338; outline-offset: 3px; }
.tree-calc input[aria-invalid="true"] { border-color: #a42d26; }
.tree-calc .tree-calc__error { margin: 16px 0 0; color: #a42d26; line-height: 1.5; }
.tree-calc__result { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid #bfc7b8; }
.tree-calc__result-label { display: block; margin-bottom: 6px; font-size: 17px; }
.tree-calc__total { display: block; background: none; color: #39452a; font-size: 30px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tree-calc .tree-calc__details { margin: 10px 0 0; line-height: 1.5; }
.tree-calc__retry { margin-top: 18px; }
.tree-calc .tree-calc__individual { margin: 12px 0 0; color: #a42d26; font-size: 18px; line-height: 1.5; }
.tree-calc .tree-calc__note { max-width: 75ch; margin: 22px 0 0; color: #555e4c; font-size: 16px; line-height: 1.5; }
.tree-calc ::selection { background: #d9e3ca; color: #30372e; }
@media (max-width: 760px) {
    .tree-calc { margin: 36px 0 44px; }
    .tree-calc__body { padding: 24px 20px; }
    .tree-calc__form { grid-template-columns: 1fr; gap: 18px; }
    .tree-calc__total { font-size: 27px; }
    .tree-calc h2 { font-size: 20px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
    .tree-calc button { transition: none; }
}