.section-container:has(.decking-calculator){position:relative}.section-container:has(.decking-calculator):before{z-index:-1;content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50vw);width:100vw;background-image:url(/wp-content/uploads/2022/08/Bennetts-Timber-Logo-Full-Colour-BG-Asset.svg),linear-gradient(180deg,#ffffff,#f4f4f4 100%)}.ct-inner-content:has(.decking-calculator){display:grid;grid-template-areas:"calc aside";grid-template-columns:2fr 1fr;gap:20px}aside{grid-area:aside}aside img{width:100%;aspect-ratio:1}.decking-calculator{grid-area:calc;postition:relative}.decking-calculator .step{position:absolute;transition:all .3s ease-in-out;z-index:-1;transform:translateX(10%);opacity:0;display:flex;flex-direction:column;gap:20px}.dimensions{z-index:1}.decking-calculator:not(:has(>.active)) .step:first-child,.decking-calculator .step.active{position:relative;z-index:1;transform:translateX(0%);opacity:1}.decking-calculator fieldset{background-color:#fff}.decking-calculator fieldset:not(:has(img)){display:flex;flex-direction:column;gap:20px;padding:20px}.decking-calculator fieldset:has(img){display:grid;grid-template-columns:1fr 2fr;grid-auto-flow:column}.decking-calculator fieldset img{width:100%;aspect-ratio:16 / 9;object-fit:contain;grid-row:span 2}.decking-calculator fieldset:has(#lengthways:checked) img{transform:rotate(90deg)}.decking-calculator .form-row{display:flex;flex-direction:row;gap:20px;padding-bottom:20px}.decking-calculator .form-row>*:not(legend){width:clamp(200px, calc( 50% - 10px ), 100%)}.decking-calculator :where(legend,label span){display:flex;font-size:14px;text-shadow:0 0 5px rgb(0 0 0 / .16);font-weight:600;margin-bottom:5px}.decking-calculator .form-row fieldset{width:100%}.decking-calculator label:has(input[type=text],input[type=number],input[type=email],input[type=tel],textarea){display:flex;flex-direction:column;gap:10px}.decking-calculator :where(input[type=text],input[type=number],input[type=email],input[type=tel],textarea){background:#FFF;border-radius:5px;padding:22.5px 10px;height:0;font-size:18px;border:1px solid #F4F4F4;width:100%;display:flex;box-shadow:0 0 5px rgb(0 0 0 / .16);font-weight:100}.decking-calculator textarea{height:auto;resize:none;field-sizing:content}.decking-calculator .extras{interpolate-size:allow-keywords;translate:all .3s ease-in-out;overflow-y:hidden;overflow-x:visible;height:auto;opacity:1;padding:20px}.decking-calculator .extras.disable{height:0;opacity:0;padding:0 20px}.decking-calculator .warning:not(:empty){background-color:#f99c18;color:#fff;font-weight:700;padding:12px 20px;border-top:3px solid #02733D}.decking-calculator table{border:1px solid #d3ced2;border-top:3px solid #02733D;border-collapse:collapse;font-weight:400;background-color:#fff}.decking-calculator table thead{text-transform:uppercase;font-size:10px;letter-spacing;1px}.decking-calculator table tr{border-top:1px solid #d3ced2}.decking-calculator table td{padding:12px 20px}.decking-calculator table tbody td:nth-child(3){font-size:35px;font-weight:700}.decking-calculator table tfoot td:nth-child(3){font-size:16px}.decking-calculator table tfoot{background-color:#7ac765;color:#fff}.decking-calculator .step-controls{--status:0%;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;gap:20px;padding:20px}.decking-calculator .step-controls button{background:#02733D;border:1px solid #02733D;font-size:12px;border-radius:0;letter-spacing:1px;text-transform:uppercase;color:#fff;line-height:1.2;text-align:center;padding:16px 24px;outline:none;font-family:inherit;border-radius:4px;display:flex;flex-direction:row;justify-content:center;cursor:pointer}.decking-calculator .step-controls button:disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}.decking-calculator .step-controls .status{position:relative;width:100%;border-style:solid;border-radius:5px;border-width:1px;background-image:linear-gradient(90deg,#ffa700 0%,#ffa700 var(--status),#ffffff var(--status),#ffffff 100%)}.decking-calculator .step-controls .status:before{content:var(--status-string,"0%");position:absolute;top:100%;left:var(--status);transform:translateX(-50%)}.decking-calculator .step-controls .status:after{content:'';position:absolute;inset:0;background-image:linear-gradient(135deg,rgb(244 244 244 / .7)0%,rgb(244 244 244 / .7) 10%,transparent 10%,transparent 20%,rgb(244 244 244 / .7) 20%,rgb(244 244 244 / .7) 30%,transparent 30%,transparent 40%,rgb(244 244 244 / .7) 40%,rgb(244 244 244 / .7) 50%,transparent 50%,transparent 60%,rgb(244 244 244 / .7) 60%,rgb(244 244 244 / .7) 70%,transparent 70%,transparent 80%,rgb(244 244 244 / .7) 80%,rgb(244 244 244 / .7) 90%,transparent 90%,transparent 100%,rgb(244 244 244 / .7) 100%)}.decking-calculator .track{display:flex;flex-direction:row;gap:25px;overflow-x:auto;overflow-y:visible;padding-top:20px;padding-bottom:20px}.decking-calculator .track .product .hero-featured-item-description{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical}.decking-calculator .hold{position:absolute;inset:0 -20px;background-color:rgb(0 0 0 / .1);backdrop-filter:blur(3px);scale:0;z-index:-1;opacity:0;transition:all .3s ease-in-out}.decking-calculator .hold.active{z-index:1;opacity:1;scale:1}@media only screen and (max-width:768px){.ct-inner-content:has(.decking-calculator){display:flex;flex-direction:column}.ct-inner-content:has(.decking-calculator) aside img{aspect-ratio:16/9}.decking-calculator .step-controls{display:grid;grid-template-columns:repeat(3,1fr)}.decking-calculator .step-controls .status{order:-1;grid-column:span 3;height:32px}}