{"id":2554,"date":"2026-06-15T03:32:13","date_gmt":"2026-06-15T03:32:13","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=2554"},"modified":"2026-06-24T04:19:11","modified_gmt":"2026-06-24T04:19:11","slug":"garden-soil-calculator","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/garden-soil-calculator\/","title":{"rendered":"Garden Soil Calculator"},"content":{"rendered":"\n<style>\n    .garden-soil-calc-container {\n        --gc-teal: #1ecad3;\n        --gc-lavender: #9486f7;\n        --gc-teal-dark: #17aeb6;\n        --gc-lavender-dark: #7d6fe0;\n        --gc-gradient: linear-gradient(135deg, #1ecad3 0%, #9486f7 100%);\n        --gc-gradient-hover: linear-gradient(135deg, #17aeb6 0%, #7d6fe0 100%);\n        --gc-bg: #ffffff;\n        --gc-bg-secondary: #f8f9fb;\n        --gc-text: #1a1a2e;\n        --gc-text-secondary: #5a5a75;\n        --gc-text-muted: #8888a0;\n        --gc-border: #e2e4ea;\n        --gc-border-focus: #1ecad3;\n        --gc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);\n        --gc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);\n        --gc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);\n        --gc-radius-sm: 8px;\n        --gc-radius: 12px;\n        --gc-radius-lg: 16px;\n        --gc-radius-xl: 20px;\n        --gc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n        --gc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n\n        font-family: var(--gc-font);\n        color: var(--gc-text);\n        box-sizing: border-box;\n        max-width: 720px;\n        margin: 0 auto;\n        padding: 0;\n        line-height: 1.5;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n\n    .garden-soil-calc-container *,\n    .garden-soil-calc-container *::before,\n    .garden-soil-calc-container *::after {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n\n    .gc-inner {\n        background: var(--gc-bg);\n        border-radius: var(--gc-radius-xl);\n        padding: 28px 24px 24px;\n        box-shadow: var(--gc-shadow-lg);\n        border: 1px solid var(--gc-border);\n        overflow: hidden;\n    }\n\n    @media (min-width: 600px) {\n        .gc-inner {\n            padding: 36px 32px 28px;\n        }\n    }\n\n    .gc-header {\n        text-align: center;\n        margin-bottom: 24px;\n    }\n    .gc-header h2 {\n        font-size: 1.35rem;\n        font-weight: 700;\n        letter-spacing: -0.3px;\n        color: var(--gc-text);\n        margin: 0 0 2px;\n    }\n    .gc-header .gc-subtitle {\n        font-size: 0.85rem;\n        color: var(--gc-text-muted);\n        font-weight: 400;\n    }\n\n    .gc-unit-toggle-wrap {\n        display: flex;\n        justify-content: center;\n        margin-bottom: 20px;\n    }\n    .gc-unit-toggle {\n        display: flex;\n        background: var(--gc-bg-secondary);\n        border-radius: 30px;\n        padding: 4px;\n        gap: 2px;\n        border: 1px solid var(--gc-border);\n    }\n    .gc-unit-toggle button {\n        flex: 1;\n        min-width: 100px;\n        padding: 10px 20px;\n        border: none;\n        background: transparent;\n        border-radius: 28px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: var(--gc-text-secondary);\n        transition: all var(--gc-transition);\n        white-space: nowrap;\n        letter-spacing: -0.1px;\n        font-family: var(--gc-font);\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .gc-unit-toggle button:hover {\n        color: var(--gc-text);\n    }\n    .gc-unit-toggle button.gc-active {\n        background: var(--gc-gradient);\n        color: #fff;\n        box-shadow: var(--gc-shadow-md);\n    }\n\n    .gc-shape-tabs {\n        display: flex;\n        gap: 8px;\n        margin-bottom: 20px;\n        flex-wrap: wrap;\n    }\n    .gc-shape-tab {\n        flex: 1;\n        min-width: 110px;\n        padding: 12px 16px;\n        border-radius: var(--gc-radius);\n        border: 2px solid var(--gc-border);\n        background: var(--gc-bg);\n        cursor: pointer;\n        text-align: center;\n        font-weight: 600;\n        font-size: 0.9rem;\n        color: var(--gc-text-secondary);\n        transition: all var(--gc-transition);\n        font-family: var(--gc-font);\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .gc-shape-tab:hover {\n        border-color: #c4c8d4;\n        color: var(--gc-text);\n    }\n    .gc-shape-tab.gc-active {\n        border-color: var(--gc-teal);\n        background: rgba(30, 202, 211, 0.06);\n        color: var(--gc-teal-dark);\n        box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.08);\n    }\n\n    .gc-inputs-grid {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 16px;\n        margin-bottom: 18px;\n    }\n    @media (min-width: 500px) {\n        .gc-inputs-grid.gc-col-2 {\n            grid-template-columns: 1fr 1fr;\n        }\n        .gc-inputs-grid.gc-col-3 {\n            grid-template-columns: 1fr 1fr 1fr;\n        }\n    }\n    .gc-input-group {\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n        min-width: 0;\n    }\n    .gc-input-group label {\n        font-size: 0.8rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.4px;\n        color: var(--gc-text-secondary);\n        display: flex;\n        align-items: center;\n        gap: 4px;\n    }\n    .gc-input-group label .gc-unit-hint {\n        font-weight: 400;\n        color: var(--gc-text-muted);\n        text-transform: none;\n        letter-spacing: 0;\n        font-size: 0.75rem;\n    }\n    .gc-input-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        min-width: 0;\n    }\n    .gc-input-row input[type=\"number\"] {\n        width: 75px;\n        flex-shrink: 0;\n        padding: 11px 8px;\n        border: 2px solid var(--gc-border);\n        border-radius: var(--gc-radius-sm);\n        font-size: 1rem;\n        font-weight: 500;\n        color: var(--gc-text);\n        background: var(--gc-bg);\n        transition: all var(--gc-transition);\n        font-family: var(--gc-font);\n        -moz-appearance: textfield;\n        outline: none;\n        text-align: center;\n    }\n    .gc-input-row input[type=\"number\"]::-webkit-outer-spin-button,\n    .gc-input-row input[type=\"number\"]::-webkit-inner-spin-button {\n        opacity: 1;\n        height: 30px;\n    }\n    .gc-input-row input[type=\"number\"]:focus {\n        border-color: var(--gc-teal);\n        box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.10);\n    }\n    .gc-input-row input[type=\"range\"] {\n        flex: 1;\n        min-width: 40px;\n        height: 6px;\n        -webkit-appearance: none;\n        appearance: none;\n        background: #e8eaef;\n        border-radius: 3px;\n        outline: none;\n        cursor: pointer;\n        accent-color: var(--gc-teal);\n    }\n    .gc-input-row input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 26px;\n        height: 26px;\n        border-radius: 50%;\n        background: var(--gc-gradient);\n        cursor: pointer;\n        border: 3px solid #fff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n        transition: transform 0.15s ease;\n    }\n    .gc-input-row input[type=\"range\"]::-webkit-slider-thumb:active {\n        transform: scale(1.15);\n    }\n    .gc-input-row input[type=\"range\"]::-moz-range-thumb {\n        width: 26px;\n        height: 26px;\n        border-radius: 50%;\n        background: var(--gc-gradient);\n        cursor: pointer;\n        border: 3px solid #fff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n    }\n    .gc-input-row input[type=\"range\"]:focus::-webkit-slider-thumb {\n        box-shadow: 0 0 0 6px rgba(30, 202, 211, 0.18), 0 2px 8px rgba(0, 0, 0, 0.18);\n    }\n\n    .gc-options-row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 14px;\n        margin-bottom: 18px;\n        align-items: center;\n    }\n    .gc-toggle-option {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        cursor: pointer;\n        user-select: none;\n        -webkit-tap-highlight-color: transparent;\n        font-size: 0.88rem;\n        font-weight: 500;\n        color: var(--gc-text);\n        flex-shrink: 0;\n    }\n    .gc-toggle-switch {\n        position: relative;\n        width: 46px;\n        height: 26px;\n        flex-shrink: 0;\n        border-radius: 13px;\n        background: #d1d4dc;\n        transition: background var(--gc-transition);\n        cursor: pointer;\n    }\n    .gc-toggle-switch::after {\n        content: '';\n        position: absolute;\n        top: 3px;\n        left: 3px;\n        width: 20px;\n        height: 20px;\n        border-radius: 50%;\n        background: #fff;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n        transition: all var(--gc-transition);\n    }\n    .gc-toggle-option.gc-on .gc-toggle-switch {\n        background: var(--gc-gradient);\n    }\n    .gc-toggle-option.gc-on .gc-toggle-switch::after {\n        left: 23px;\n    }\n    .gc-toggle-label-text {\n        font-size: 0.85rem;\n        color: var(--gc-text-secondary);\n        line-height: 1.3;\n    }\n\n    .gc-plant-select-wrap {\n        flex: 1;\n        min-width: 180px;\n    }\n    .gc-plant-select-wrap label {\n        display: block;\n        font-size: 0.78rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.4px;\n        color: var(--gc-text-secondary);\n        margin-bottom: 4px;\n    }\n    .gc-plant-select {\n        width: 100%;\n        padding: 10px 14px;\n        border: 2px solid var(--gc-border);\n        border-radius: var(--gc-radius-sm);\n        font-size: 0.9rem;\n        font-weight: 500;\n        color: var(--gc-text);\n        background: var(--gc-bg);\n        cursor: pointer;\n        transition: all var(--gc-transition);\n        font-family: var(--gc-font);\n        outline: none;\n        -webkit-appearance: none;\n        appearance: none;\n        background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888a0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: right 14px center;\n        padding-right: 36px;\n    }\n    .gc-plant-select:focus {\n        border-color: var(--gc-teal);\n        box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.10);\n    }\n\n    .gc-btn-row {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 12px;\n        margin-bottom: 16px;\n        justify-content: center;\n    }\n\n    .gc-btn-calculate {\n        padding: 13px 28px;\n        border: none;\n        border-radius: 30px;\n        background: var(--gc-gradient);\n        color: #fff;\n        font-size: 0.95rem;\n        font-weight: 700;\n        cursor: pointer;\n        box-shadow: var(--gc-shadow-md);\n        transition: all var(--gc-transition);\n        font-family: var(--gc-font);\n        letter-spacing: -0.1px;\n        outline: none;\n    }\n    .gc-btn-calculate:hover {\n        background: var(--gc-gradient-hover);\n        box-shadow: var(--gc-shadow-lg);\n        transform: translateY(-1px);\n    }\n    .gc-btn-calculate:active {\n        transform: scale(0.97);\n    }\n\n    .gc-btn-reset {\n        padding: 13px 24px;\n        border: 2px solid var(--gc-border);\n        border-radius: 30px;\n        background: #fff;\n        cursor: pointer;\n        font-size: 0.88rem;\n        font-weight: 600;\n        color: var(--gc-text-secondary);\n        transition: all var(--gc-transition);\n        font-family: var(--gc-font);\n        outline: none;\n        letter-spacing: -0.1px;\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n    }\n    .gc-btn-reset:hover {\n        border-color: #c4c8d4;\n        color: var(--gc-text);\n        box-shadow: var(--gc-shadow-sm);\n    }\n    .gc-btn-reset:active {\n        background: var(--gc-bg-secondary);\n        transform: scale(0.97);\n    }\n\n    .gc-results {\n        background: var(--gc-bg-secondary);\n        border-radius: var(--gc-radius);\n        padding: 20px 18px;\n        margin-bottom: 16px;\n        border: 1px solid var(--gc-border);\n        display: none;\n    }\n    .gc-results.gc-visible {\n        display: block;\n    }\n    .gc-results-title {\n        font-size: 0.78rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        color: var(--gc-text-muted);\n        margin-bottom: 14px;\n    }\n    .gc-results-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 12px;\n    }\n    @media (min-width: 500px) {\n        .gc-results-grid {\n            grid-template-columns: 1fr 1fr 1fr 1fr;\n        }\n    }\n    .gc-result-card {\n        background: #fff;\n        border-radius: var(--gc-radius-sm);\n        padding: 14px 12px;\n        text-align: center;\n        border: 1px solid var(--gc-border);\n        transition: all var(--gc-transition);\n    }\n    .gc-result-value {\n        font-size: 1.5rem;\n        font-weight: 700;\n        letter-spacing: -0.5px;\n        background: var(--gc-gradient);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        line-height: 1.2;\n    }\n    .gc-result-value.gc-bags {\n        font-size: 1.2rem;\n    }\n    .gc-result-label {\n        font-size: 0.72rem;\n        color: var(--gc-text-muted);\n        font-weight: 500;\n        margin-top: 2px;\n    }\n\n    .gc-breakdown {\n        display: none;\n        background: #fff;\n        border-radius: var(--gc-radius);\n        padding: 18px 16px;\n        margin-bottom: 16px;\n        border: 2px solid var(--gc-lavender);\n        border-left: 5px solid var(--gc-lavender);\n        animation: gcFadeIn 0.3s ease;\n    }\n    .gc-breakdown.gc-visible {\n        display: block;\n    }\n    @keyframes gcFadeIn {\n        from { opacity: 0; transform: translateY(-6px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n    .gc-breakdown-title {\n        font-weight: 700;\n        font-size: 0.9rem;\n        margin-bottom: 12px;\n        color: var(--gc-text);\n    }\n    .gc-breakdown-list {\n        list-style: none;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n    .gc-breakdown-item {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        font-size: 0.85rem;\n        color: var(--gc-text-secondary);\n        flex-wrap: wrap;\n    }\n    .gc-breakdown-bar {\n        flex: 1;\n        min-width: 40px;\n        height: 10px;\n        border-radius: 5px;\n        background: #e8eaef;\n        overflow: hidden;\n    }\n    .gc-breakdown-bar-fill {\n        height: 100%;\n        border-radius: 5px;\n        transition: width 0.4s ease;\n    }\n    .gc-breakdown-pct {\n        font-weight: 700;\n        font-size: 0.8rem;\n        color: var(--gc-text);\n        min-width: 38px;\n        text-align: right;\n    }\n    .gc-breakdown-qty {\n        font-size: 0.78rem;\n        color: var(--gc-text-muted);\n        min-width: 100px;\n        text-align: right;\n    }\n\n    .gc-hidden {\n        display: none !important;\n    }\n\n    @media (max-width: 480px) {\n        .gc-inner {\n            padding: 18px 12px 16px;\n        }\n        .gc-input-row {\n            gap: 6px;\n        }\n        .gc-input-row input[type=\"number\"] {\n            width: 60px;\n            padding: 10px 6px;\n            font-size: 0.9rem;\n        }\n        .gc-input-row input[type=\"range\"] {\n            min-width: 30px;\n        }\n        .gc-result-value {\n            font-size: 1.25rem;\n        }\n        .gc-result-value.gc-bags {\n            font-size: 1rem;\n        }\n        .gc-unit-toggle button {\n            padding: 8px 12px;\n            font-size: 0.8rem;\n            min-width: 70px;\n        }\n        .gc-shape-tab {\n            font-size: 0.8rem;\n            padding: 10px 12px;\n            min-width: 90px;\n        }\n        .gc-results-grid {\n            grid-template-columns: 1fr 1fr;\n            gap: 8px;\n        }\n        .gc-btn-calculate, .gc-btn-reset {\n            width: 100%;\n            justify-content: center;\n        }\n    }\n\n    @media (max-width: 360px) {\n        .gc-input-row input[type=\"number\"] {\n            width: 52px;\n            padding: 8px 4px;\n            font-size: 0.85rem;\n        }\n        .gc-unit-toggle button {\n            padding: 8px 10px;\n            font-size: 0.75rem;\n            min-width: 60px;\n        }\n        .gc-shape-tab {\n            font-size: 0.75rem;\n            padding: 8px 10px;\n            min-width: 80px;\n        }\n    }\n<\/style>\n\n<div class=\"garden-soil-calc-container\">\n    <div class=\"gc-inner\">\n        <div class=\"gc-header\">\n            \n            <p class=\"gc-subtitle\">Real-time estimates for your garden project<\/p>\n        <\/div>\n\n        <div class=\"gc-unit-toggle-wrap\">\n            <div class=\"gc-unit-toggle\" id=\"gcUnitToggle\">\n                <button id=\"gcBtnImperial\" class=\"gc-active\" type=\"button\" aria-pressed=\"true\">Imperial (US)<\/button>\n                <button id=\"gcBtnMetric\" type=\"button\" aria-pressed=\"false\">Metric (AU\/EU)<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"gc-shape-tabs\" id=\"gcShapeTabs\">\n            <button class=\"gc-shape-tab gc-active\" data-shape=\"rectangle\" type=\"button\">Rectangle \/ Raised Bed<\/button>\n            <button class=\"gc-shape-tab\" data-shape=\"circle\" type=\"button\">Circle \/ Round Pot<\/button>\n        <\/div>\n\n        <div class=\"gc-inputs-grid gc-col-3\" id=\"gcInputsGrid\">\n            <div class=\"gc-input-group\" id=\"gcGroupLength\">\n                <label>Length <span class=\"gc-unit-hint\" id=\"gcHintLength\">(ft)<\/span><\/label>\n                <div class=\"gc-input-row\">\n                    <input type=\"number\" id=\"gcInputLength\" value=\"4\" min=\"0\" max=\"50\" step=\"0.5\">\n                    <input type=\"range\" id=\"gcSliderLength\" value=\"4\" min=\"0\" max=\"50\" step=\"0.5\">\n                <\/div>\n            <\/div>\n            <div class=\"gc-input-group\" id=\"gcGroupWidth\">\n                <label>Width <span class=\"gc-unit-hint\" id=\"gcHintWidth\">(ft)<\/span><\/label>\n                <div class=\"gc-input-row\">\n                    <input type=\"number\" id=\"gcInputWidth\" value=\"2\" min=\"0\" max=\"50\" step=\"0.5\">\n                    <input type=\"range\" id=\"gcSliderWidth\" value=\"2\" min=\"0\" max=\"50\" step=\"0.5\">\n                <\/div>\n            <\/div>\n            <div class=\"gc-input-group gc-hidden\" id=\"gcGroupDiameter\">\n                <label>Diameter <span class=\"gc-unit-hint\" id=\"gcHintDiameter\">(ft)<\/span><\/label>\n                <div class=\"gc-input-row\">\n                    <input type=\"number\" id=\"gcInputDiameter\" value=\"3\" min=\"0\" max=\"30\" step=\"0.5\">\n                    <input type=\"range\" id=\"gcSliderDiameter\" value=\"3\" min=\"0\" max=\"30\" step=\"0.5\">\n                <\/div>\n            <\/div>\n            <div class=\"gc-input-group\" id=\"gcGroupDepth\">\n                <label>Depth <span class=\"gc-unit-hint\" id=\"gcHintDepth\">(in)<\/span><\/label>\n                <div class=\"gc-input-row\">\n                    <input type=\"number\" id=\"gcInputDepth\" value=\"6\" min=\"0\" max=\"24\" step=\"0.5\">\n                    <input type=\"range\" id=\"gcSliderDepth\" value=\"6\" min=\"0\" max=\"24\" step=\"0.5\">\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"gc-options-row\">\n            <div class=\"gc-toggle-option gc-on\" id=\"gcToggleCompaction\" tabindex=\"0\" role=\"switch\" aria-checked=\"true\">\n                <span class=\"gc-toggle-switch\"><\/span>\n                <span class=\"gc-toggle-label-text\">Include 15% Soil Compaction \/ Settling Buffer<\/span>\n            <\/div>\n            <div class=\"gc-plant-select-wrap\">\n                <label for=\"gcPlantMix\">Planting Scenario<\/label>\n                <select class=\"gc-plant-select\" id=\"gcPlantMix\">\n                    <option value=\"general\">General Garden (Topsoil Mix)<\/option>\n                    <option value=\"vegetables\">Vegetables &#038; Raised Beds (50% Compost, 30% Topsoil, 20% Perlite)<\/option>\n                    <option value=\"succulents\">Succulents &#038; Cacti (High-drainage Sand\/Grit Mix)<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <div class=\"gc-btn-row\">\n            <button class=\"gc-btn-calculate\" id=\"gcBtnCalculate\" type=\"button\">Calculate<\/button>\n            <button class=\"gc-btn-reset\" id=\"gcBtnReset\" type=\"button\">Reset to Defaults<\/button>\n        <\/div>\n\n        <div class=\"gc-results\" id=\"gcResults\">\n            <div class=\"gc-results-title\">Volume &amp; Packaging Estimates<\/div>\n            <div class=\"gc-results-grid\" id=\"gcResultsGrid\">\n                <div class=\"gc-result-card\">\n                    <div class=\"gc-result-value\" id=\"gcValPrimary\">&#8212;<\/div>\n                    <div class=\"gc-result-label\" id=\"gcLabelPrimary\">Cubic Yards<\/div>\n                <\/div>\n                <div class=\"gc-result-card\">\n                    <div class=\"gc-result-value\" id=\"gcValSecondary\">&#8212;<\/div>\n                    <div class=\"gc-result-label\" id=\"gcLabelSecondary\">Cubic Feet<\/div>\n                <\/div>\n                <div class=\"gc-result-card\">\n                    <div class=\"gc-result-value gc-bags\" id=\"gcValBagsSmall\">&#8212;<\/div>\n                    <div class=\"gc-result-label\" id=\"gcLabelBagsSmall\">1.5 cu ft Bags<\/div>\n                <\/div>\n                <div class=\"gc-result-card\">\n                    <div class=\"gc-result-value gc-bags\" id=\"gcValBagsLarge\">&#8212;<\/div>\n                    <div class=\"gc-result-label\" id=\"gcLabelBagsLarge\">2.0 cu ft Bags<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"gc-breakdown\" id=\"gcBreakdown\">\n            <div class=\"gc-breakdown-title\">Mix Breakdown<\/div>\n            <ul class=\"gc-breakdown-list\" id=\"gcBreakdownList\"><\/ul>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const container = document.querySelector('.garden-soil-calc-container');\n    if (!container) return;\n\n    const getEl = (id) => container.querySelector('#' + id);\n\n    const btnImperial = getEl('gcBtnImperial');\n    const btnMetric = getEl('gcBtnMetric');\n    const shapeTabs = getEl('gcShapeTabs');\n    const shapeTabBtns = shapeTabs.querySelectorAll('.gc-shape-tab');\n\n    const groupLength = getEl('gcGroupLength');\n    const groupWidth = getEl('gcGroupWidth');\n    const groupDiameter = getEl('gcGroupDiameter');\n\n    const inputLength = getEl('gcInputLength');\n    const sliderLength = getEl('gcSliderLength');\n    const inputWidth = getEl('gcInputWidth');\n    const sliderWidth = getEl('gcSliderWidth');\n    const inputDiameter = getEl('gcInputDiameter');\n    const sliderDiameter = getEl('gcSliderDiameter');\n    const inputDepth = getEl('gcInputDepth');\n    const sliderDepth = getEl('gcSliderDepth');\n\n    const hintLength = getEl('gcHintLength');\n    const hintWidth = getEl('gcHintWidth');\n    const hintDiameter = getEl('gcHintDiameter');\n    const hintDepth = getEl('gcHintDepth');\n\n    const toggleCompaction = getEl('gcToggleCompaction');\n    const plantMixSelect = getEl('gcPlantMix');\n\n    const resultsContainer = getEl('gcResults');\n    const valPrimary = getEl('gcValPrimary');\n    const labelPrimary = getEl('gcLabelPrimary');\n    const valSecondary = getEl('gcValSecondary');\n    const labelSecondary = getEl('gcLabelSecondary');\n    const valBagsSmall = getEl('gcValBagsSmall');\n    const labelBagsSmall = getEl('gcLabelBagsSmall');\n    const valBagsLarge = getEl('gcValBagsLarge');\n    const labelBagsLarge = getEl('gcLabelBagsLarge');\n\n    const breakdown = getEl('gcBreakdown');\n    const breakdownList = getEl('gcBreakdownList');\n    const btnCalculate = getEl('gcBtnCalculate');\n    const btnReset = getEl('gcBtnReset');\n\n    let unitSystem = 'imperial';\n    let shape = 'rectangle';\n    let compactionEnabled = true;\n    let plantMix = 'general';\n    let syncGuard = false;\n\n    const defaultsImperial = {\n        length: 4, width: 2, diameter: 3, depth: 6,\n        sliderLengthMax: 50, sliderWidthMax: 50, sliderDiameterMax: 30, sliderDepthMax: 24,\n        stepDim: 0.5, stepDepth: 0.5\n    };\n    const defaultsMetric = {\n        length: 1.2, width: 0.6, diameter: 0.9, depth: 15,\n        sliderLengthMax: 15, sliderWidthMax: 15, sliderDiameterMax: 10, sliderDepthMax: 60,\n        stepDim: 0.1, stepDepth: 1\n    };\n\n    function getDefaults() {\n        return unitSystem === 'imperial' ? { ...defaultsImperial } : { ...defaultsMetric };\n    }\n\n    function safeParse(val, fallback = 0) {\n        const p = parseFloat(val);\n        return (isNaN(p) || p < 0) ? fallback : p;\n    }\n\n    function syncPair(numberEl, sliderEl, value) {\n        if (syncGuard) return;\n        syncGuard = true;\n        const clamped = Math.max(parseFloat(sliderEl.min) || 0, Math.min(parseFloat(sliderEl.max) || 100, value));\n        if (Math.abs(parseFloat(sliderEl.value) - clamped) > 0.001) sliderEl.value = clamped;\n        if (Math.abs(parseFloat(numberEl.value) - value) > 0.001) numberEl.value = value;\n        syncGuard = false;\n    }\n\n    function getPairValue(numberEl) {\n        return safeParse(numberEl.value, 0);\n    }\n\n    function updateSliderAttributes() {\n        const defs = getDefaults();\n        sliderLength.max = defs.sliderLengthMax; sliderLength.step = defs.stepDim;\n        sliderWidth.max = defs.sliderWidthMax; sliderWidth.step = defs.stepDim;\n        sliderDiameter.max = defs.sliderDiameterMax; sliderDiameter.step = defs.stepDim;\n        sliderDepth.max = defs.sliderDepthMax; sliderDepth.step = defs.stepDepth;\n        inputLength.step = defs.stepDim; inputWidth.step = defs.stepDim;\n        inputDiameter.step = defs.stepDim; inputDepth.step = defs.stepDepth;\n    }\n\n    function updateUnitHints() {\n        if (unitSystem === 'imperial') {\n            hintLength.textContent = '(ft)'; hintWidth.textContent = '(ft)';\n            hintDiameter.textContent = '(ft)'; hintDepth.textContent = '(in)';\n            labelPrimary.textContent = 'Cubic Yards'; labelSecondary.textContent = 'Cubic Feet';\n            labelBagsSmall.textContent = '1.5 cu ft Bags'; labelBagsLarge.textContent = '2.0 cu ft Bags';\n        } else {\n            hintLength.textContent = '(m)'; hintWidth.textContent = '(m)';\n            hintDiameter.textContent = '(m)'; hintDepth.textContent = '(cm)';\n            labelPrimary.textContent = 'Cubic Meters'; labelSecondary.textContent = 'Liters';\n            labelBagsSmall.textContent = '25L Bags'; labelBagsLarge.textContent = '50L Bags';\n        }\n    }\n\n    function updateShapeVisibility() {\n        if (shape === 'rectangle') {\n            groupLength.classList.remove('gc-hidden');\n            groupWidth.classList.remove('gc-hidden');\n            groupDiameter.classList.add('gc-hidden');\n        } else {\n            groupLength.classList.add('gc-hidden');\n            groupWidth.classList.add('gc-hidden');\n            groupDiameter.classList.remove('gc-hidden');\n        }\n    }\n\n    function hideResults() {\n        resultsContainer.classList.remove('gc-visible');\n        breakdown.classList.remove('gc-visible');\n        valPrimary.textContent = '--';\n        valSecondary.textContent = '--';\n        valBagsSmall.textContent = '--';\n        valBagsLarge.textContent = '--';\n    }\n\n    function showResults() {\n        resultsContainer.classList.add('gc-visible');\n    }\n\n    function calculate() {\n        let rawVolumeCuFt = 0;\n        if (unitSystem === 'imperial') {\n            const depthIn = getPairValue(inputDepth);\n            const depthFt = depthIn \/ 12;\n            if (shape === 'rectangle') {\n                rawVolumeCuFt = getPairValue(inputLength) * getPairValue(inputWidth) * depthFt;\n            } else {\n                const r = getPairValue(inputDiameter) \/ 2;\n                rawVolumeCuFt = Math.PI * r * r * depthFt;\n            }\n        } else {\n            const depthM = getPairValue(inputDepth) \/ 100;\n            let volM3 = 0;\n            if (shape === 'rectangle') {\n                volM3 = getPairValue(inputLength) * getPairValue(inputWidth) * depthM;\n            } else {\n                const r = getPairValue(inputDiameter) \/ 2;\n                volM3 = Math.PI * r * r * depthM;\n            }\n            rawVolumeCuFt = volM3 * 35.314666721;\n        }\n\n        const volumeCuFt = compactionEnabled ? rawVolumeCuFt * 1.15 : rawVolumeCuFt;\n\n        if (unitSystem === 'imperial') {\n            valPrimary.textContent = (volumeCuFt \/ 27).toFixed(2);\n            valSecondary.textContent = volumeCuFt.toFixed(2);\n            valBagsSmall.textContent = Math.ceil(volumeCuFt \/ 1.5);\n            valBagsLarge.textContent = Math.ceil(volumeCuFt \/ 2.0);\n        } else {\n            const volM3 = volumeCuFt \/ 35.314666721;\n            const volL = volM3 * 1000;\n            valPrimary.textContent = volM3.toFixed(3);\n            valSecondary.textContent = Math.round(volL).toLocaleString();\n            valBagsSmall.textContent = Math.ceil(volL \/ 25);\n            valBagsLarge.textContent = Math.ceil(volL \/ 50);\n        }\n\n        updateBreakdown(volumeCuFt);\n        showResults();\n    }\n\n    function updateBreakdown(totalCuFt) {\n        if (plantMix === 'general') {\n            breakdown.classList.remove('gc-visible');\n            return;\n        }\n        breakdown.classList.add('gc-visible');\n        let components = [];\n        if (plantMix === 'vegetables') {\n            components = [\n                { name: 'Compost', pct: 0.5, color: '#5a3e2b' },\n                { name: 'Topsoil', pct: 0.3, color: '#8b6914' },\n                { name: 'Perlite', pct: 0.2, color: '#d5d9e0' }\n            ];\n        } else if (plantMix === 'succulents') {\n            components = [\n                { name: 'Coarse Sand \/ Grit', pct: 0.5, color: '#c2a67a' },\n                { name: 'Perlite \/ Pumice', pct: 0.3, color: '#d5d9e0' },\n                { name: 'Topsoil \/ Compost', pct: 0.2, color: '#8b6914' }\n            ];\n        }\n        breakdownList.innerHTML = '';\n        components.forEach(comp => {\n            const compCuFt = totalCuFt * comp.pct;\n            let displayQty;\n            if (unitSystem === 'imperial') {\n                displayQty = compCuFt.toFixed(2) + ' cu ft';\n            } else {\n                const compL = (compCuFt \/ 35.314666721) * 1000;\n                displayQty = Math.round(compL).toLocaleString() + ' L';\n            }\n            const li = document.createElement('li');\n            li.className = 'gc-breakdown-item';\n            li.innerHTML = `\n                <span style=\"font-weight:600;min-width:110px;\">${comp.name}<\/span>\n                <span class=\"gc-breakdown-bar\"><span class=\"gc-breakdown-bar-fill\" style=\"width:${comp.pct*100}%;background:${comp.color};\"><\/span><\/span>\n                <span class=\"gc-breakdown-pct\">${Math.round(comp.pct*100)}%<\/span>\n                <span class=\"gc-breakdown-qty\">${displayQty}<\/span>\n            `;\n            breakdownList.appendChild(li);\n        });\n    }\n\n    function setAllValues(l, w, d, dep) {\n        syncGuard = true;\n        inputLength.value = l; sliderLength.value = Math.min(sliderLength.max, Math.max(sliderLength.min, l));\n        inputWidth.value = w; sliderWidth.value = Math.min(sliderWidth.max, Math.max(sliderWidth.min, w));\n        inputDiameter.value = d; sliderDiameter.value = Math.min(sliderDiameter.max, Math.max(sliderDiameter.min, d));\n        inputDepth.value = dep; sliderDepth.value = Math.min(sliderDepth.max, Math.max(sliderDepth.min, dep));\n        syncGuard = false;\n    }\n\n    function convertValuesForUnitToggle() {\n        const ol = getPairValue(inputLength), ow = getPairValue(inputWidth);\n        const od = getPairValue(inputDiameter), odp = getPairValue(inputDepth);\n        let nl, nw, nd, ndp;\n        if (unitSystem === 'imperial') {\n            nl = Math.round((ol \/ 0.3048) * 100) \/ 100;\n            nw = Math.round((ow \/ 0.3048) * 100) \/ 100;\n            nd = Math.round((od \/ 0.3048) * 100) \/ 100;\n            ndp = Math.round((odp \/ 2.54) * 10) \/ 10;\n        } else {\n            nl = Math.round((ol * 0.3048) * 100) \/ 100;\n            nw = Math.round((ow * 0.3048) * 100) \/ 100;\n            nd = Math.round((od * 0.3048) * 100) \/ 100;\n            ndp = Math.round((odp * 2.54) * 10) \/ 10;\n        }\n        const defs = getDefaults();\n        nl = Math.max(0, Math.min(defs.sliderLengthMax, nl));\n        nw = Math.max(0, Math.min(defs.sliderWidthMax, nw));\n        nd = Math.max(0, Math.min(defs.sliderDiameterMax, nd));\n        ndp = Math.max(0, Math.min(defs.sliderDepthMax, ndp));\n        setAllValues(nl, nw, nd, ndp);\n    }\n\n    function resetToDefaults() {\n        const defs = getDefaults();\n        compactionEnabled = true;\n        toggleCompaction.classList.add('gc-on');\n        toggleCompaction.setAttribute('aria-checked', 'true');\n        plantMix = 'general';\n        plantMixSelect.value = 'general';\n        shape = 'rectangle';\n        updateShapeVisibility();\n        shapeTabBtns.forEach(b => {\n            b.classList.remove('gc-active');\n            if (b.dataset.shape === 'rectangle') b.classList.add('gc-active');\n        });\n        updateSliderAttributes();\n        updateUnitHints();\n        setAllValues(defs.length, defs.width, defs.diameter, defs.depth);\n        hideResults();\n    }\n\n    btnImperial.addEventListener('click', () => {\n        if (unitSystem === 'imperial') return;\n        unitSystem = 'imperial';\n        btnImperial.classList.add('gc-active'); btnImperial.setAttribute('aria-pressed', 'true');\n        btnMetric.classList.remove('gc-active'); btnMetric.setAttribute('aria-pressed', 'false');\n        updateSliderAttributes(); updateUnitHints(); convertValuesForUnitToggle();\n        hideResults();\n    });\n    btnMetric.addEventListener('click', () => {\n        if (unitSystem === 'metric') return;\n        unitSystem = 'metric';\n        btnMetric.classList.add('gc-active'); btnMetric.setAttribute('aria-pressed', 'true');\n        btnImperial.classList.remove('gc-active'); btnImperial.setAttribute('aria-pressed', 'false');\n        updateSliderAttributes(); updateUnitHints(); convertValuesForUnitToggle();\n        hideResults();\n    });\n\n    shapeTabBtns.forEach(btn => {\n        btn.addEventListener('click', function() {\n            shape = this.dataset.shape;\n            shapeTabBtns.forEach(b => b.classList.remove('gc-active'));\n            this.classList.add('gc-active');\n            updateShapeVisibility();\n            hideResults();\n        });\n    });\n\n    function bindNumberInput(numEl, sliderEl) {\n        numEl.addEventListener('input', () => { if (!syncGuard) syncPair(numEl, sliderEl, getPairValue(numEl)); });\n        numEl.addEventListener('change', () => { if (!syncGuard) syncPair(numEl, sliderEl, getPairValue(numEl)); });\n        numEl.addEventListener('blur', () => { if (!syncGuard) syncPair(numEl, sliderEl, getPairValue(numEl)); });\n    }\n    function bindSlider(sliderEl, numEl) {\n        sliderEl.addEventListener('input', () => { if (!syncGuard) syncPair(numEl, sliderEl, parseFloat(sliderEl.value)); });\n    }\n\n    bindNumberInput(inputLength, sliderLength); bindSlider(sliderLength, inputLength);\n    bindNumberInput(inputWidth, sliderWidth); bindSlider(sliderWidth, inputWidth);\n    bindNumberInput(inputDiameter, sliderDiameter); bindSlider(sliderDiameter, inputDiameter);\n    bindNumberInput(inputDepth, sliderDepth); bindSlider(sliderDepth, inputDepth);\n\n    toggleCompaction.addEventListener('click', () => {\n        compactionEnabled = !compactionEnabled;\n        if (compactionEnabled) { toggleCompaction.classList.add('gc-on'); toggleCompaction.setAttribute('aria-checked', 'true'); }\n        else { toggleCompaction.classList.remove('gc-on'); toggleCompaction.setAttribute('aria-checked', 'false'); }\n        hideResults();\n    });\n    toggleCompaction.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleCompaction.click(); } });\n\n    plantMixSelect.addEventListener('change', () => { plantMix = plantMixSelect.value; hideResults(); });\n\n    btnCalculate.addEventListener('click', calculate);\n\n    btnReset.addEventListener('click', () => {\n        if (unitSystem !== 'imperial') {\n            unitSystem = 'imperial';\n            btnImperial.classList.add('gc-active'); btnImperial.setAttribute('aria-pressed', 'true');\n            btnMetric.classList.remove('gc-active'); btnMetric.setAttribute('aria-pressed', 'false');\n        }\n        resetToDefaults();\n    });\n\n    updateSliderAttributes(); updateUnitHints(); updateShapeVisibility();\n    hideResults();\n    container.addEventListener('submit', e => e.preventDefault());\n})();\n<\/script>\n\n\n<!-- aiper-tool-links -->\n<div class=\"aiper-tool-links\">\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">More Tools<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/fence-calculator\/\" class=\"aiper-tl-tag\">Fence Calculator<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/paver-calculator\/\" class=\"aiper-tl-tag\">Paver Calculator<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/decking-calculator\/\" class=\"aiper-tl-tag\">Decking Calculator<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Related Articles<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/how-to-keep-geese-off-lawn\/\" class=\"aiper-tl-tag\">How to Keep Geese Off Your Lawn<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/how-to-get-rid-of-mushrooms-in-lawn\/\" class=\"aiper-tl-tag\">How to Get Rid of Mushrooms in a Lawn (And Should You?)<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/how-to-dethatch-a-lawn\/\" class=\"aiper-tl-tag\">How to Dethatch a Lawn: Diagnose Thatch, Then Treat It<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/how-to-get-rid-of-creeping-charlie-in-lawn\/\" class=\"aiper-tl-tag\">How to Get Rid of Creeping Charlie in Your Lawn<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.aiper-tool-links{margin:2.5rem 0 1.5rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,rgba(148,134,247,.04),rgba(30,202,211,.04));border-radius:12px;border:1px solid rgba(148,134,247,.10)}\n.aiper-tl-section{margin-bottom:1.25rem}\n.aiper-tl-section:last-child{margin-bottom:0}\n.aiper-tl-heading{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8899aa;margin:0 0 .65rem}\n.aiper-tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}\n.aiper-tl-tag{display:inline-block;padding:.4rem .95rem;font-size:.82rem;font-weight:500;line-height:1.35;color:#9486f7;background:rgba(148,134,247,.055);border:1px solid rgba(30,202,211,.25);border-radius:22px;text-decoration:none;transition:all .18s}\n.aiper-tl-tag:hover{background:#1ecad3;color:#fff;border-color:#1ecad3;box-shadow:0 2px 10px rgba(30,202,211,.22)}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>Real-time estimates for your garden project Imperial (US) Metric (AU\/EU) Rectangle \/ Raised Bed Circle \/ Round Pot Length (ft) Width (ft) Diameter (ft) Depth (in) Include 15% Soil Compaction \/ Settling Buffer Planting Scenario General Garden (Topsoil Mix)Vegetables &#038; Raised Beds (50% Compost, 30% Topsoil, 20% Perlite)Succulents &#038; Cacti (High-drainage Sand\/Grit Mix) Calculate Reset&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2554","page","type-page","status-publish","hentry"],"lang":"en","translations":{"en":2554,"es":2566,"de":2562,"fr":2564},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/comments?post=2554"}],"version-history":[{"count":8,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2554\/revisions"}],"predecessor-version":[{"id":4304,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2554\/revisions\/4304"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=2554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}