/* =============================================================================
   Alpha Decking — Composite Decking Calculator
   -----------------------------------------------------------------------------
   Replaces the previous calculator (fullCalculator*.txt) and its two obfuscated
   embed blocks — all already removed from the Aug 2026 page.

   HOW IT FITS TOGETHER
     CONFIG      every price, product ID, dimension and business rule.
                 Changing a price or adding a range should only ever touch this.
     readState   reads the controls into a plain object. All control lookups
                 live in SEL next to it.
     calculate   pure function: state in, quantities and prices out. No DOM.
     render*     writes results to the page: product lines, totals, the
                 setting-out plan SVG, the timber comparison.
     toggleInputs enables/disables options that depend on the deck (no-joins
                 availability, 2.2m boards, conditional length inputs).

   PAGE CONTRACT (all markup already in place on the Aug 2026 page)
     [data-calc-scope]        wraps anything that should trigger recalculation
     [data-calc-line]         a product block; role/range read from bound
                              [data-calc-meta="role"/"range"] text inside it
     [data-line-price]        the price element within a product block
     [data-deck-plan]         empty div the plan SVG is injected into (any
                              number of them; each sized independently)
     [data-nojoins-warning]   layout guidance text, written by the script
     [data-calc-for="id"]     makes ANY element act as the label for input #id
     .input-wrapper_bullnose  bullnose length wrapper, shown while ticked
     [data-quote-email] [data-quote-consent] [data-quote-send] [data-quote-status]
                              "Email me this quote" — posts a snapshot to Make.com
     [data-swatch][data-range][data-hex]  colour swatches (data-hex colours
                              the plan; swatches filter by range)

   Product IDs and prices verified against live Webflow data, 20 Aug 2026.
   No jQuery. Money is handled in pence as integers throughout.

   v26 (31 Aug 2026): the quote payload now carries what the cart-rebuild
   link needs — each line gains productId (the CONFIG id it was priced
   from), and the payload gains rebuildUrl alongside shareUrl: a
   /your-cart?rc=1&i=... link that re-adds every visible line to the
   Webflow cart (page + runner already live). Make.com should put
   rebuildUrl behind the "Rebuild my cart" button in the quote email and
   keep shareUrl behind "Reopen my quote". Nothing else changed.

   v27 (2 Sep 2026): share-link restore made reset-proof. Webflow's commerce
   script can reset the variant <select>s to their placeholder several
   seconds into a slow page load — after the old settle loop had already
   declared the selections stable and stopped. Symptom: the colour fills
   in for a second, then flips back to "Select". The loop now keeps
   guarding for 20 seconds and only stands down early when the visitor
   actually touches a product panel, so a late reset is silently
   re-applied instead of sticking. Nothing else changed.

   v28 (2 Sep 2026): two refinements to the v27 guard. (1) v27 counted ANY
   tap or click inside a product panel as "the visitor took over" — on a
   touch screen, scrolling the page IS a touch on whatever is under your
   finger, so scrolling past a panel while the page loaded could silence
   the guard before Webflow's late reset landed, and the colour flipped
   back to Select with nothing watching. The guard now stands down only
   for a real interaction with a form control (select/input/button/label)
   inside a panel — scrolling never counts. (2) The restore now leaves a
   breadcrumb trail in the browser console ([calc-restore] lines: applies,
   detected resets, why the guard stopped) so a device where it still
   misbehaves can tell us exactly what happened. Nothing else changed.

   v29 (2 Sep 2026): the guard no longer has a time limit. Diagnosed from
   Dan's console screenshot: with a Webflow Designer login in the browser,
   Webflow's editor/preview chunk also runs on the webflow.io page (the
   red ".wf_graphql/apollo 401" errors), re-initialising the commerce
   widgets on its own schedule — including well after the 20-second guard
   window had closed, so its reset stuck. The guard now re-applies for as
   long as the page is open (capped at 10 minutes for hygiene), standing
   down only when the visitor genuinely interacts with a product-panel
   control; once settled the repeats are silent no-ops, so the cost is
   nil. Breadcrumbs switched from console.debug to console.info so they
   show at the console's default filter level. Nothing else changed.

   v30 (2 Sep 2026): the guard gained two backup heartbeats. Field evidence
   (Dan's browser, with page-injecting extensions like MozBar): the guard's
   setInterval died silently after the first apply — armed and applied at
   7ms, then never ticked again, so Webflow's ~600ms reset stuck. The same
   build self-healed perfectly in a clean profile. The guard body is now
   driven by three independent mechanisms — setInterval, a
   requestAnimationFrame chain, and a MutationObserver — any one of which
   keeps it alive; each logs a "heartbeat alive" breadcrumb once, so the
   console shows exactly which mechanisms survive in a given browser. The
   body is idempotent and self-throttled to one pass per 300ms. Nothing
   else changed.

   v31 (2 Sep 2026): the "Email me this quote" button became a small state
   machine that mirrors the 10-minute per-address cooldown enforced in
   Make.com (which stays the real gate — its webhook answers 200 before
   the rate-limit filter runs, so the browser can never tell a sent email
   from a dropped one; this only stops a shopper walking into it blind).
   The script sets data-state on [data-quote-send] — idle | sending | sent
   | error — plus aria-disabled while locked, swaps the label per state
   (the Designer's idle text is remembered at load and restored), and the
   status line gains data-state="cooldown" for "Sent to <address>. You can
   send an updated quote to this address in about N minutes." Accepted
   sends are recorded per lowercased address in localStorage (the same key
   Make uses), so typing a different address unlocks at once, typing one
   still cooling down re-locks, and a reload inside the window shows the
   sent state again. No CSS, no markup, no styling: Dan styles the new
   data-state values in the Designer. Nothing else changed.

   v32 (2 Sep 2026): the tick moved into the sent label itself
   ("✓ Sent — check your inbox") so it needs no CSS to appear — Dan's call,
   so it can't be forgotten. The spinner for the brief sending state is
   inherently CSS and stays optional. Nothing else changed.
   ============================================================================= */

(function () {
  'use strict';

  /* ===========================================================================
     CONFIG — everything adjustable lives here
     =========================================================================== */

  const CONFIG = {

    /* --- Laying pattern ---------------------------------------------------- */
    wastage: 1.05,
    // Applied to STAGGERED (brick-bond) laying only. Offcuts are reused in the
    // next row, so the constraint is total linear metres, not per-row. The 5%
    // covers saw kerf, trimming joins back to a joist centre, and damage.
    // No-joins laying gets no wastage figure — the offcut loss is exact and
    // already counted.

    /* --- Geometry -------------------------------------------------------- */
    joistSpacing: 0.30,
    // CONFIRMED from Alpha's own product copy: "joist centre spacing of between
    // 300mm-400mm based on using joists equivalent to 4x2". The 50x30 joist says
    // "no more than a maximum of 300-350mm". 0.30 is the conservative end.
    // This yields ~0.91 joists per m², matching the product page's stated
    // "approximately 1 joist per square metre".
    // NOTE: the old calculator used 0.20 (5 linear m/m²), which over-ordered
    // joists by roughly 50% against your own published guidance.

    pedestalsPerSqm: 7,
    // CONFIRMED from the Plastic Pedestal product page: "approx 7 per 1sqm...
    // for 20sqm you would need 147 pedestals" (7.35/m²). The old 0.30m grid
    // implied ~11/m², and the buggy floor() version ~10/m².

    /* --- Ranges ---------------------------------------------------------- */
    ranges: {
      core: {
        label: 'Core',
        coverWidth: 0.148,
        // CONFIRMED: board is 146mm wide (product spec), spacer clips create a
        // 2mm gap (spacer clip product page). Effective cover = 148mm.
        // The old calculator used 0.146, ignoring the gap, which over-ordered
        // rows by ~1.4%.
        boards: {
          '3.66': { id: '6169ad68ad94d4121017ef79', length: 3.66, price: 2000 },
          '2.20': { id: '6169ad68ad94d4521c17efaf', length: 2.20, price: 1000 }
        },
        bullnose: { id: '6169ad68ad94d4a20717efb0', length: 3.66, price: 3600 },
        fascia:   { id: '6169ad68ad94d4773517efac', length: 3.66, price: 1960 },
        edgeTrim: { id: '6169ad68ad94d40e9017efad', length: 2.20, price: 899  },
        starters: { id: '6169ad68ad94d4df5217ef7c', price: 1500, perBox: 50  },
        spacers:  { id: '6169ad68ad94d4286b17ef7d', price: 3200, perBox: 100 }
      },

      ultimate: {
        label: 'Ultimate',
        coverWidth: 0.147,
        // CONFIRMED: Ultimate board is 145mm wide (3660 x 145 x 23mm) — 1mm
        // narrower than Core — plus the 2mm spacer gap.
        boards: {
          '3.66': { id: '6936f04a521932c516a9b347', length: 3.66, price: 2450 }
          // No 2.20 — Ultimate is 3.66m only. The 2.2m control auto-disables.
        },
        bullnose: { id: '69373efa38d8966894f454e7', length: 3.66, price: 3950 },
        fascia:   { id: '6937109969e02d62f16a65ea', length: 3.66, price: 1960 },
        // RESOLVED: Ultimate fascia is 3.66m, not 1.45m. The product spec reads
        // "3660mm (L) x 140mm (W) x 10mm (D)" — the 140mm width is most likely
        // where the 1.45m recollection came from.
        edgeTrim: { id: '69373c4f4aec2b407578bb78', length: 2.20, price: 899  },
        starters: { id: '69399e54278cd25f205a8612', price: 1500, perBox: 50  },
        spacers:  { id: '69399dcb1df0f4a434482847', price: 3200, perBox: 100 }
      }
    },

    /* --- Range-independent ------------------------------------------------ */
    shared: {
      joistStandard:   { id: '62daf105ecbbe48ef2f9ec34', length: 3.66, price: 1370 },
      joistStructural: { id: '61d8b25184b949e13a6df4d1', length: 3.66, price: 3999 },
      pedestal:        { id: '6169ad68ad94d40c0717ef7e', price: 300 },
      ob1:             { id: '6169ad68ad94d4602117efb1', price: 800, perTrims: 3 }
      // The 2.2m Composite Joist has been removed — the product no longer
      // exists in Webflow. Delete its checkbox and product block in the Designer.
    },

    /* --- Fixings ---------------------------------------------------------- */
    spacerClipsPerSqm: 20,   // 100 per 5m², matches the product page exactly

    starterClipEdges: 1,
    // CONFIRMED: starter clips fix the FIRST board, one clip at every joist.
    // So clips = joist count, and it scales with the run length — not area.
    //
    // Set to 2 if the last board of the run should also be clipped. Your
    // starter clip product page says "the first and, project specific, the
    // last board of each run", so 2 is the conservative reading; 1 is what
    // you've specified and what this now uses.
    //
    // The old calculator used area (sqm/40), which under-ordered badly on
    // long, narrow decks — a 25m x 1m deck needs 85 clips but got 50.

    /* --- Cost comparison ---------------------------------------------------
       Materials only on BOTH sides, so it's like-for-like. All figures in pence
       per m². Sources and date noted so they can be revisited — check annually.

       Composite upkeep is NOT zero. Assuming it is inflates the saving and
       makes the whole table easy to pick apart.
       ---------------------------------------------------------------------- */
    comparison: {
      years: 15,
      compositeMaintPerSqmPerYear: 200,
      // £2/m²/yr — £30/yr on a 5x3 deck. Wash down and mild detergent.

      // Subframe is deliberately EXCLUDED from both sides. Either deck needs
      // essentially the same joists and sub-base, so it cancels out. Charging
      // it to the timber column only (as the earlier version did) overstated
      // the saving.
      //
      // Timber boards are counted the SAME way as composite: whole boards,
      // rows rounded up, same 5% wastage, same laying pattern. Anything else
      // gives timber a smooth per-m² price while composite carries rounding
      // and offcut waste, which flatters neither side accurately.

      // SUBFRAME — shown as its own line, and only when the customer has
      // actually selected joists or pedestals in the calculator. In that case
      // the composite subframe figure is their REAL quoted cost; this is the
      // timber equivalent. If they haven't selected one, the row is dropped
      // from every column rather than inventing a cost nobody is buying.
      timberSubframePerSqm: 1800,
      // £18/m² joists, fixings and sub-base. UK cost guides, Aug 2026 (£15–£25).

      alternatives: [
        {
          key: 'softwood',
          label: 'Treated softwood',
          boardLength: 3.60,
          coverWidth: 0.149,          // 144mm board + ~5mm gap
          pricePerBoard: 1296,        // £12.96 — equates to £25/m² of coverage
          fixingsPerSqm: 200,         // £2/m² decking screws
          maintPerSqmPerYear: 800,    // £8/m²/yr = £120/yr on a 5x3 deck. Basis:
          replaceBoardsAtYear: 12     // pressure-treated lasts 10–15 years
        },
        {
          key: 'larch',
          label: 'Siberian larch / ThermoWood',
          boardLength: 3.60,
          coverWidth: 0.149,
          pricePerBoard: 3370,        // £33.70 — equates to £65/m²
          fixingsPerSqm: 300,         // stainless, needed on larch
          maintPerSqmPerYear: 200,    // naturally durable, no treatment required
          replaceBoardsAtYear: null
        },
        {
          key: 'hardwood',
          label: 'Hardwood (Balau / Jatoba)',
          boardLength: 3.60,
          coverWidth: 0.149,
          pricePerBoard: 4406,        // £44.06 — equates to £85/m²
          fixingsPerSqm: 300,         // stainless required
          maintPerSqmPerYear: 200,    // Durability Class 1, 40–60 year life
          replaceBoardsAtYear: null
        }
      ]
    },

    /* --- Product-panel colours -------------------------------------------- */
    // Used to recognise a Colour dropdown in a product block (a select whose
    // options include these), and to carry the chosen colour in share links.
    colourNames: [
      'Anthracite', 'Grey', 'Stone Grey', 'Teak', 'Oak', 'Oyster',
      'Aged Grey', 'Sunset Teak', 'Hazelwood Oak', 'Moonstone Beige', 'Birch', 'Silver Grey'
    ],

    /* --- Email me this quote --------------------------------------------- */
    quote: {
      webhookUrl: 'https://hook.eu1.make.com/brk04yc51a4zi8u5edi8qaepar5wvg3o',
      planImageWidth: 1600,   // px width of the PNG plan sent for the email
      cooldownMs: 8000,       // button lockout after a FAILED send, against double-clicks
      // v31 — mirrors the per-address cooldown in Make scenario 7169838
      // (data store "Quote Email Rate Limits"). Change both or neither.
      rateLimitMs: 10 * 60 * 1000,
      rateLimitBufferMs: 15 * 1000,   // never unlock before Make does
      storageKey: 'adQuoteSends',     // localStorage: { email -> time of last accepted send }
      labels: { sending: 'Sending…', sent: '✓ Sent — check your inbox' }
    },

    /* --- Layout plan ------------------------------------------------------- */
    plan: {
      // Customer-facing layout options. Board COUNT is identical for 'equal'
      // and 'staggered' — both reuse offcuts, so the total linear metres are
      // the same. Only the drawing and the install differ.
      //   equal     = half bond, offset by 1/2 a board — regular, even joins
      //   staggered = third bond, offset by 1/3 — joins spread across 3 rows
      // Offsets are then adjusted so no piece is under minPieceLength — see
      // layoutOffsets(). Minimum confirmed at 310mm (one joist span at 300mm
      // centres).
      bondStepsByLayout: { equal: 2, staggered: 3 },
      layoutLabels: { equal: 'Equal lengths', staggered: 'Staggered', nojoins: 'No joins' },

      minPieceLength: 0.31,
      // No cut piece may be shorter than this — it must span a joist. At 300mm
      // centres, 310mm is the practical minimum.
      //
      // A naive bond breaks this: a third-bond offset of 2.44m on a 5m run
      // leaves a 0.12m stub every third row. So rather than using textbook
      // 1/2 and 1/3 offsets blindly, valid offsets are SEARCHED FOR (see
      // layoutOffsets) and the closest workable ones to the ideal are used.
      //
      // Board COUNT is unaffected by any of this — it comes from total linear
      // metres, which the offsets don't change.
      maxDetailRows: 420,
      // Above this the plan draws a single block instead of individual boards.
      // Past that density the detail is unreadable and costs a lot of DOM.
      // Length labels and row numbers fade out on their own before this point,
      // as the row height drops below what text can fit into.
      fallbackColour: '#33363a'
    }
  };

  /* ===========================================================================
     DOM CONTRACT
     ---------------------------------------------------------------------------
     Wrap the whole calculator in an element with  data-calc-scope

     Each product block needs:
       data-calc-line  data-role="…"  data-range="core|ultimate"
     data-range is omitted on shared products.

     Roles: board366 board220 bullnose fascia edgeTrim starters spacers
            joistStandard joistStructural pedestal ob1

     Inside each block:
       input[name=commerce-add-to-cart-quantity-input]
       [data-line-price]        ← replaces the duplicated #price / #deckingBoardPrice

     Colour swatches: data-swatch  data-range="core|ultimate"
     Range control:   input[name="rangeRadio"] value="core|ultimate"
     Joist control:   input[name="joistType"]  value="none|standard|structural"
     =========================================================================== */

  const SEL = {
    scope:         '[data-calc-scope]',
    range:         'input[name="rangeRadio"]',
    joistType:     'input[name="joistType"]',
    layPattern:    'input[name="layPattern"]',      // equal | nojoins
    boardDirection:'input[name="boardDirection"]',  // length | width
    noJoinsWarning:'[data-nojoins-warning]',
    placeholder:   '[data-calc-placeholder]',   // shown until a valid deck size is entered
    length:        '.length-input-m',
    width:         '.width-input-m',
    fasciaLength:  '.fb-length-input-m',
    edgeTrimLen:   '.et-length-input-m',
    bullnoseLen:   '.bn-length-input-m',   // NEW input — see notes
    use220:        '[id="220cmCheckbox"]',
    // NOT '#220cmCheckbox' — a CSS id selector cannot start with a digit, and
    // querySelector throws a SyntaxError on it. jQuery tolerated this; vanilla
    // does not. The attribute form is valid and matches the same element.
    wantBullnose:  '#bullnoseCheckbox',
    wantFascia:    '#fasciaCheckbox',
    wantEdgeTrim:  '#edgeTrimCheckbox',
    wantPedestal:  '#pedastalCheckbox',
    line:          '[data-calc-line]',
    qty:           'input[name="commerce-add-to-cart-quantity-input"]',
    linePrice:     '[data-line-price]',
    boardsText:    '#totalboardstextouputM',
    plan:          '[data-deck-plan]',
    swatch:        '[data-swatch]',
    subtotal:      '#subtotal',

    // "Email me this quote" — all optional; the feature is inert if absent
    quoteEmail:    '[data-quote-email]',
    quoteConsent:  '[data-quote-consent]',
    quoteSend:     '[data-quote-send]',
    quoteStatus:   '[data-quote-status]'
  };

  // Fail-safe queries. A malformed selector (or one referring to markup that
  // hasn't been built yet) returns nothing instead of throwing and killing the
  // entire calculator, which is what an invalid id selector did on first build.
  const $ = (s, r) => {
    try { return (r || document).querySelector(s); } catch (e) { return null; }
  };
  const $$ = (s, r) => {
    try { return Array.from((r || document).querySelectorAll(s)); }
    catch (e) { return []; }
  };

  /* ===========================================================================
     HELPERS
     =========================================================================== */

  const money = p => '£' + (p / 100).toFixed(2);

  /**
   * Show/hide an element.
   *
   * Sets inline display rather than the `hidden` property: Webflow classes set
   * `display: flex` on these wrappers, and author CSS beats the user-agent
   * `[hidden] { display: none }` rule — so `hidden` alone does nothing here.
   * Setting display to '' restores whatever the class specifies.
   */
  function setVisible(el, show) {
    if (!el) return;
    el.hidden = !show;

    if (!show) { el.style.display = 'none'; return; }

    // Clearing the inline style restores whatever the class specifies — but
    // several of these wrappers are styled `display: none` in Webflow by
    // default and were previously revealed by jQuery's .show(), which forces
    // an explicit value. So if clearing leaves it still hidden, force one.
    // Override per element with data-calc-display="flex" (or grid, etc).
    el.style.display = el.dataset.calcDisplay || '';
    if (getComputedStyle(el).display === 'none') {
      el.style.display = el.dataset.calcDisplay || 'block';
    }
  }

  const isVisible = el => el.style.display !== 'none';

  function num(sel) {
    const el = $(sel);
    if (!el) return 0;
    const v = parseFloat(el.value);
    return Number.isFinite(v) && v > 0 ? v : 0;   // guards NaN and blanks
  }

  const isChecked = sel => { const el = $(sel); return !!(el && el.checked); };

  function radio(name, fallback) {
    const el = $(name + ':checked');
    return el ? el.value : fallback;
  }

  /**
   * Board count. Two genuinely different installs, two different answers:
   *
   *   'equal' / 'staggered' — bonded layouts. Rows are made up of multiple
   *                 pieces with joins
   *                 landing on joists, so offcuts feed the next row. The binding
   *                 constraint is total linear metres, plus a wastage margin.
   *
   *   'nojoins'   — every row is one continuous piece. Any offcut shorter than a
   *                 full run is waste. Only possible when the run is no longer
   *                 than a board; returns feasible:false otherwise so the UI can
   *                 tell the customer rather than quietly quoting nonsense.
   *
   * Returns { qty, rows, feasible }.
   */
  function boardsRequired(acrossDim, runLength, coverWidth, boardLength, pattern) {
    if (acrossDim <= 0 || runLength <= 0) {
      return { qty: 0, rows: 0, feasible: true };
    }

    const rows = Math.ceil(acrossDim / coverWidth);

    if (pattern === 'nojoins') {
      if (runLength > boardLength) {
        return { qty: 0, rows, feasible: false };
      }
      // A board may still yield several rows if the run is short enough —
      // each row is still one uncut piece, so this is genuinely join-free.
      const rowsPerBoard = Math.max(1, Math.floor(boardLength / runLength));
      return { qty: Math.ceil(rows / rowsPerBoard), rows, feasible: true };
    }

    // Staggered
    const totalLinearM = rows * runLength;
    return {
      qty: Math.ceil((totalLinearM / boardLength) * CONFIG.wastage),
      rows,
      feasible: true
    };
  }

  /** Number of joists spanning the deck, counting both ends. */
  const joistCount = runLength =>
    runLength > 0 ? Math.ceil(runLength / CONFIG.joistSpacing) + 1 : 0;

  /* ===========================================================================
     STATE
     =========================================================================== */

  function readState() {
    const rangeKey = radio(SEL.range, 'core');
    const range = CONFIG.ranges[rangeKey] || CONFIG.ranges.core;

    // Ultimate has no 2.2m board — ignore the control if it's somehow ticked.
    const use220 = isChecked(SEL.use220) && !!range.boards['2.20'];

    return {
      rangeKey,
      range,
      use220,
      length:       num(SEL.length),
      width:        num(SEL.width),
      fasciaLength: num(SEL.fasciaLength),
      edgeTrimLen:  num(SEL.edgeTrimLen),
      bullnoseLen:  num(SEL.bullnoseLen),
      wantBullnose: isChecked(SEL.wantBullnose),
      wantFascia:   isChecked(SEL.wantFascia),
      wantEdgeTrim: isChecked(SEL.wantEdgeTrim),
      wantPedestal: isChecked(SEL.wantPedestal),
      joistType:    radio(SEL.joistType, 'none'),
      layPattern:   radio(SEL.layPattern, 'equal'),
      boardDirection: radio(SEL.boardDirection, 'length')
    };
  }

  /* ===========================================================================
     CALCULATE — pure. No DOM access in here.
     =========================================================================== */

  function calculate(s) {
    const range = s.range;
    const sqm = s.length * s.width;
    const lines = [];

    const add = (role, cfg, qty, price, visible) => lines.push({
      role,
      id: cfg ? cfg.id : null,
      qty: visible ? Math.max(0, qty) : 0,
      price: price || 0,
      visible: !!visible
    });

    /* --- Boards ---------------------------------------------------------- */
    // Boards run along one dimension; joists run across it. Which is which is
    // the customer's choice, and it matters: a 5m x 3m deck can be laid with no
    // joins if the boards run across the 3m, but not along the 5m.
    const runLength = s.boardDirection === 'width' ? s.width  : s.length;
    const acrossDim = s.boardDirection === 'width' ? s.length : s.width;

    const activeKey = s.use220 ? '2.20' : '3.66';
    let boardCount = 0;
    let noJoinsFeasible = true;

    ['3.66', '2.20'].forEach(key => {
      const board = range.boards[key];
      const role = key === '3.66' ? 'board366' : 'board220';

      if (!board) { add(role, null, 0, 0, false); return; }

      const active = key === activeKey;
      let qty = 0;

      if (active) {
        const r = boardsRequired(
          acrossDim, runLength, range.coverWidth, board.length, s.layPattern
        );
        qty = r.qty;
        boardCount = r.qty;
        noJoinsFeasible = r.feasible;
      }

      add(role, board, qty, board.price, active && qty > 0);
    });

    /* --- Fixings ---------------------------------------------------------- */
    // Joists span across the boards, so they're spaced along the run.
    const joists = joistCount(runLength);
    const rows = acrossDim > 0 ? Math.ceil(acrossDim / range.coverWidth) : 0;

    // Starter clips: first board, one clip per joist. Boxes of 50, minimum one.
    const starterClips = rows > 0 ? joists * CONFIG.starterClipEdges : 0;
    add('starters', range.starters,
      starterClips > 0
        ? Math.max(1, Math.ceil(starterClips / range.starters.perBox))
        : 0,
      range.starters.price, starterClips > 0);

    add('spacers', range.spacers,
      Math.ceil(sqm * CONFIG.spacerClipsPerSqm / range.spacers.perBox),
      range.spacers.price, sqm > 0);

    /* --- Bullnose (edge product — driven by its own length input) ---------- */
    add('bullnose', range.bullnose,
      Math.ceil(s.bullnoseLen / range.bullnose.length),
      range.bullnose.price,
      s.wantBullnose && s.bullnoseLen > 0);

    /* --- Fascia ------------------------------------------------------------ */
    add('fascia', range.fascia,
      Math.ceil(s.fasciaLength / range.fascia.length),
      range.fascia.price,
      s.wantFascia && s.fasciaLength > 0);

    /* --- Edge trim + OB1 adhesive ------------------------------------------ */
    const trims = Math.ceil(s.edgeTrimLen / range.edgeTrim.length);  // was /2, now /2.2
    const showTrim = s.wantEdgeTrim && s.edgeTrimLen > 0;

    add('edgeTrim', range.edgeTrim, trims, range.edgeTrim.price, showTrim);
    add('ob1', CONFIG.shared.ob1,
      Math.ceil(trims / CONFIG.shared.ob1.perTrims),
      CONFIG.shared.ob1.price, showTrim);

    /* --- Subframe ---------------------------------------------------------- */
    // Radio, so standard and structural can no longer both be ordered at once.
    const joistLinearM = joists * acrossDim;

    [['joistStandard', 'standard'], ['joistStructural', 'structural']].forEach(([role, val]) => {
      const j = CONFIG.shared[role];
      add(role, j,
        Math.ceil(joistLinearM / j.length),
        j.price,
        s.joistType === val && sqm > 0);
    });

    // Pedestals: grid across both axes, counting both ends (the old floor()
    // dropped the far edge and under-ordered by ~20%).
    const ped = CONFIG.shared.pedestal;
    const pedCount = sqm > 0 ? Math.ceil(sqm * CONFIG.pedestalsPerSqm) : 0;
    add('pedestal', ped, pedCount, ped.price, s.wantPedestal && sqm > 0);

    return {
      lines, sqm, boardCount,
      rangeKey: s.rangeKey,
      layPattern: s.layPattern,
      maxRun: range.boards[activeKey] ? range.boards[activeKey].length : 0,
      noJoinsFeasible,
      // Geometry for the layout plan — derived once here so the renderer never
      // recalculates anything and can't drift from the quoted figures.
      plan: {
        run: runLength,
        across: acrossDim,
        rows,
        joists,
        boardLength: range.boards[activeKey] ? range.boards[activeKey].length : 0,
        pattern: s.layPattern
      }
    };
  }

  /* ===========================================================================
     LAYOUT PLAN
     ---------------------------------------------------------------------------
     Draws into any element carrying  data-deck-plan. Reads geometry from the
     calculation result only — it never does its own arithmetic, so the drawing
     can't disagree with the quantities.
     =========================================================================== */

  let selectedColour = null;

  // Last render, kept so a quote can be sent without recalculating anything.
  let lastResult = null, lastTotals = null, lastComparison = null;

  /** Piece positions within one row, in metres along the run. */
  /** Piece lengths produced by starting a row at a given offset. */
  function piecesAt(offset, run, boardLength) {
    const out = [];
    let start = -offset;
    while (start < run - 1e-4) {
      const a = Math.max(0, start);
      const b = Math.min(run, start + boardLength);
      if (b - a > 1e-4) out.push([a, b, (b - a) >= boardLength - 1e-4]);
      start += boardLength;
    }
    return out;
  }

  const offsetCache = {};

  /**
   * Choose row offsets that never produce a piece below the minimum.
   *
   * Textbook 1/2 and 1/3 offsets can leave unusable stubs on some runs, so
   * instead: sweep every offset on a 10mm grid, keep the ones where the
   * shortest piece clears the minimum, then pick the workable offsets closest
   * to the ideal evenly-spaced set. Joins are also kept at least one minimum
   * length apart from row to row so they don't stack up.
   */
  function layoutOffsets(run, boardLength, steps, minPiece) {
    const key = [run, boardLength, steps, minPiece].join('|');
    if (offsetCache[key]) return offsetCache[key];

    const valid = [];
    for (let o = 0; o < boardLength - 1e-6; o += 0.01) {
      const shortest = piecesAt(o, run, boardLength)
        .reduce((m, p) => Math.min(m, p[1] - p[0]), Infinity);
      if (shortest >= minPiece - 1e-6) valid.push(+o.toFixed(3));
    }

    let chosen;
    if (!valid.length) {
      // Nothing clears the minimum — fall back to the ideal set rather than
      // drawing nothing. Rare, and only on awkward runs.
      chosen = [];
      for (let i = 0; i < steps; i++) chosen.push(i * (boardLength / steps));
    } else {
      chosen = [];
      for (let i = 0; i < steps; i++) {
        const ideal = i * (boardLength / steps);
        // nearest valid offset that isn't too close to one already chosen
        let best = null, bestD = Infinity;
        for (const o of valid) {
          const clash = chosen.some(c =>
            Math.abs(c - o) < minPiece || Math.abs(Math.abs(c - o) - boardLength) < minPiece);
          if (clash) continue;
          const d = Math.abs(o - ideal);
          if (d < bestD) { bestD = d; best = o; }
        }
        chosen.push(best === null ? valid[i % valid.length] : best);
      }
    }
    offsetCache[key] = chosen;
    return chosen;
  }

  function rowPieces(rowIndex, run, boardLength, pattern) {
    if (pattern === 'nojoins') {
      return [[0, Math.min(run, boardLength), run <= boardLength]];
    }
    const steps = CONFIG.plan.bondStepsByLayout[pattern] || 2;
    const offsets = layoutOffsets(run, boardLength, steps, CONFIG.plan.minPieceLength);
    return piecesAt(offsets[rowIndex % offsets.length], run, boardLength);
  }

  /** Injected once — hover styling for the plan can't rely on Webflow classes. */
  function ensurePlanStyles() {
    if (document.getElementById('calc-plan-css')) return;
    const st = document.createElement('style');
    st.id = 'calc-plan-css';
    st.textContent =
      // The canvas height adapts to the deck's shape (see drawPlanInto), so the
      // SVG sizes itself: full width, natural height. No fixed frame, no dead
      // space around wide thin decks, nothing to clip.
      '.calc-plan-wrap{position:relative;width:100%;}' +
      '.calc-plan-wrap svg{display:block;width:100%;height:auto;}' +
      '.calc-plan-wrap .pc:hover .body{fill:#0f6e63;stroke:#0b3f39;stroke-width:1;}' +
      '.calc-plan-wrap .pc:hover text{fill:#f6f4ef;}' +
      '.calc-plan-tip{position:absolute;pointer-events:none;opacity:0;' +
        'transform:translate(-50%,-145%);background:#0f6e63;color:#f6f4ef;' +
        'padding:6px 10px;border-radius:3px;font-size:11.5px;white-space:nowrap;' +
        'transition:opacity .1s;z-index:5;}' +
      '.calc-plan-tip small{display:block;opacity:.75;font-size:10px;}' +
      '.calc-plan-tip.on{opacity:1;}' +
      '[data-calc-for]{cursor:pointer;}';
    document.head.appendChild(st);
  }

  function lum(hex) {
    const n = parseInt(hex.slice(1), 16);
    return (0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255;
  }
  function shade(hex, amt) {
    const n = parseInt(hex.slice(1), 16);
    const c = i => Math.max(0, Math.min(255, ((n >> i) & 255) + amt));
    return '#' + ((1 << 24) + (c(16) << 16) + (c(8) << 8) + c(0)).toString(16).slice(1);
  }
  function niceBar(pxPerM, maxPx) {
    const opts = [0.5, 1, 2, 5, 10, 20, 50];
    for (let i = opts.length - 1; i >= 0; i--) if (opts[i] * pxPerM <= maxPx) return opts[i];
    return 0.5;
  }
  function dimLine(x1, y1, x2, y2, horiz, label) {
    let o = '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 +
            '" stroke="#5a6b74" stroke-width="1.2"/>';
    if (horiz) {
      o += '<path d="M' + x1 + ' ' + y1 + ' l11 -5 v10 z" fill="#5a6b74"/>' +
           '<path d="M' + x2 + ' ' + y2 + ' l-11 -5 v10 z" fill="#5a6b74"/>' +
           '<text x="' + ((x1 + x2) / 2) + '" y="' + (y1 - 11) +
           '" text-anchor="middle" font-size="16" fill="#16232b">' + label + '</text>';
    } else {
      o += '<path d="M' + x1 + ' ' + y1 + ' l-5 11 h10 z" fill="#5a6b74"/>' +
           '<path d="M' + x2 + ' ' + y2 + ' l-5 -11 h10 z" fill="#5a6b74"/>' +
           '<text transform="translate(' + (x1 - 12) + ',' + ((y1 + y2) / 2) +
           ') rotate(-90)" text-anchor="middle" font-size="16" fill="#16232b">' + label + '</text>';
    }
    return o;
  }

  /**
   * Draws into EVERY [data-deck-plan] container, not just the first.
   *
   * Duplicating the container in the Designer is an easy thing to do, and with
   * querySelector only the first would ever be drawn while the other sat empty
   * — a confusing failure that depends on DOM order. Each container caches its
   * own key, so containers of different widths redraw independently.
   */
  function renderPlan(result) {
    $$(SEL.plan).forEach(host => drawPlanInto(host, result));
  }

  function drawPlanInto(host, result) {
    if (!host) return;
    ensurePlanStyles();

    const g = result.plan;
    const colour = selectedColour || CONFIG.plan.fallbackColour;
    const hostW = host.clientWidth || 0;

    // Redraw only when something visible changes, per container.
    const key = [g.run, g.across, g.rows, g.joists, g.boardLength, g.pattern,
                 result.boardCount, colour, hostW].join('|');
    if (key === host.dataset.planKey) return;
    host.dataset.planKey = key;

    if (g.run <= 0 || g.across <= 0) {
      host.innerHTML = '<div class="calc-plan-wrap"><svg viewBox="0 0 1600 300" role="img" ' +
        'aria-label="No layout to show"><text x="800" y="160" text-anchor="middle" ' +
        'font-size="22" fill="#5a6b74">Enter your deck size</text></svg></div>';
      return;
    }

    /* The canvas fits the deck rather than the deck fitting a fixed canvas.
       Width is always filled; the canvas height follows the deck's aspect,
       capped so very deep narrow decks scale by height instead of growing
       without limit. The bottom furniture (scale bar, legend, title block)
       positions off VH, so it always sits just below the drawing. */
    const VW = 1600;
    const mL = 126, mR = 110, mT = 90, mB = 190;
    const aw = VW - mL - mR;

    // Three limits, tightest wins:
    //   fill the width          scale <= aw / run
    //   sane row thickness      scale <= MAX_ROW_VB per board row
    //   sane overall height     ph    <= MAX_PLAN_H
    // Wide thin decks hit the row cap (5x2 stays plank-like instead of
    // ballooning past the screen); long runs are width-limited and genuinely
    // fill it; deep decks hit the height cap. Whatever wins, the drawing is
    // centred and the canvas is only as tall as it needs.
    const MAX_PLAN_H = 950;
    const MAX_ROW_VB = 34;
    let scale = Math.min(aw / g.run, (MAX_ROW_VB * g.rows) / g.across);
    let ph = g.across * scale;
    if (ph > MAX_PLAN_H) {
      scale = MAX_PLAN_H / g.across;
      ph = MAX_PLAN_H;
    }
    const pw = g.run * scale;
    const VH = Math.round(mT + ph + mB);
    const ox = mL + (aw - pw) / 2, oy = mT;
    const X = m => ox + m * scale, Y = m => oy + m * scale;
    const rowH = ph / g.rows;

    const P = [];
    const textOn = lum(colour) > 0.55 ? '#16232b' : '#f6f4ef';

    P.push('<defs><pattern id="calcGrid" width="40" height="40" patternUnits="userSpaceOnUse">' +
      '<path d="M40 0H0V40" fill="none" stroke="#dfe3de" stroke-width="1"/></pattern>' +
      '<filter id="calcShadow" x="-8%" y="-8%" width="120%" height="122%">' +
      '<feDropShadow dx="0" dy="6" stdDeviation="9" flood-opacity="0.16"/></filter></defs>');
    P.push('<rect width="' + VW + '" height="' + VH + '" fill="url(#calcGrid)" opacity="0.5"/>');

    // substrate showing through the spacer gaps
    P.push('<g filter="url(#calcShadow)"><rect x="' + X(0).toFixed(1) + '" y="' + Y(0).toFixed(1) +
      '" width="' + pw.toFixed(1) + '" height="' + ph.toFixed(1) + '" fill="' + shade(colour, -30) + '"/></g>');

    if (g.joists < 600) {
      for (let j = 0; j < g.joists; j++) {
        const jx = X(Math.min(j * CONFIG.joistSpacing, g.run)).toFixed(1);
        P.push('<line x1="' + jx + '" y1="' + Y(0).toFixed(1) + '" x2="' + jx + '" y2="' +
          Y(g.across).toFixed(1) + '" stroke="#ffffff" stroke-width="1" opacity="0.16"/>');
      }
    }

    const showLabels = rowH >= 15;
    const rowNoEvery = rowH >= 11 ? 1 : (rowH >= 5 ? 5 : 0);
    const detailed = g.rows <= CONFIG.plan.maxDetailRows && rowH >= 1.4;
    let joints = 0;

    if (detailed) {
      for (let r = 0; r < g.rows; r++) {
        const ps = rowPieces(r, g.run, g.boardLength, g.pattern);
        const y = oy + r * rowH;
        for (const piece of ps) {
          const Lm = piece[1] - piece[0];
          const isFull = Lm >= g.boardLength - 1e-4;
          const a = X(piece[0]), b = X(piece[1]), w = Math.max(0.6, b - a);
          P.push('<g class="pc" data-len="' + Lm.toFixed(2) + '" data-row="' + (r + 1) +
            '" data-kind="' + (isFull ? 'Full board' : 'Cut piece') + '">' +
            '<rect class="body" x="' + a.toFixed(1) + '" y="' + (y + rowH * 0.10).toFixed(2) +
            '" width="' + w.toFixed(1) + '" height="' + Math.max(0.6, rowH * 0.80).toFixed(2) +
            '" fill="' + colour + '" stroke="rgba(0,0,0,.45)" stroke-width="0.5"/>' +
            (showLabels && w > 44
              ? '<text x="' + (a + w / 2).toFixed(1) + '" y="' + (y + rowH * 0.70).toFixed(1) +
                '" text-anchor="middle" font-size="' + Math.min(15, Math.max(8, rowH * 0.44)).toFixed(1) +
                '" fill="' + textOn + '">' + Lm.toFixed(2) + '</text>'
              : '') +
            '<title>' + (isFull ? 'Full board' : 'Cut piece') + ' \u2014 ' + Lm.toFixed(2) + 'm</title></g>');

          if (piece[1] < g.run - 1e-4) {
            joints++;
            const jw = Math.max(2.2, Math.min(4.5, rowH * 0.26));
            const y1 = (y + rowH * 0.06).toFixed(2), y2 = (y + rowH * 0.94).toFixed(2);
            P.push('<line x1="' + b.toFixed(1) + '" y1="' + y1 + '" x2="' + b.toFixed(1) + '" y2="' + y2 +
              '" stroke="#f6f4ef" stroke-width="' + jw.toFixed(2) + '"/>');
            P.push('<line x1="' + (b - jw / 2).toFixed(1) + '" y1="' + y1 + '" x2="' + (b - jw / 2).toFixed(1) +
              '" y2="' + y2 + '" stroke="rgba(0,0,0,.5)" stroke-width="0.7"/>');
            P.push('<line x1="' + (b + jw / 2).toFixed(1) + '" y1="' + y1 + '" x2="' + (b + jw / 2).toFixed(1) +
              '" y2="' + y2 + '" stroke="rgba(0,0,0,.5)" stroke-width="0.7"/>');
          }
        }
        if (rowNoEvery && r % rowNoEvery === 0) {
          P.push('<text x="' + (ox - 11).toFixed(1) + '" y="' + (y + rowH * 0.70).toFixed(1) +
            '" text-anchor="end" font-size="' + Math.min(13, Math.max(8, rowH * 0.42)).toFixed(1) +
            '" fill="#5a6b74">' + (r + 1) + '</text>');
        }
      }
    } else {
      P.push('<rect x="' + X(0).toFixed(1) + '" y="' + Y(0).toFixed(1) + '" width="' + pw.toFixed(1) +
        '" height="' + ph.toFixed(1) + '" fill="' + colour + '"/>');
      P.push('<text x="' + (ox + pw / 2) + '" y="' + (oy + ph / 2) + '" text-anchor="middle" fill="' +
        textOn + '" font-size="20">' + g.rows + ' rows \u2014 shown indicatively</text>');
    }

    P.push('<rect x="' + X(0).toFixed(1) + '" y="' + Y(0).toFixed(1) + '" width="' + pw.toFixed(1) +
      '" height="' + ph.toFixed(1) + '" fill="none" stroke="#16232b" stroke-width="2"/>');

    const dy = oy + ph + 42;
    P.push(dimLine(X(0), dy, X(g.run), dy, true, g.run.toFixed(2) + ' m'));
    P.push(dimLine(ox - 58, Y(0), ox - 58, Y(g.across), false, g.across.toFixed(2) + ' m'));

    const ay = oy - 34;
    P.push('<line x1="' + X(g.run * 0.34) + '" y1="' + ay + '" x2="' + X(g.run * 0.66) + '" y2="' + ay +
      '" stroke="#0f6e63" stroke-width="1.6"/>');
    P.push('<path d="M' + X(g.run * 0.66) + ' ' + ay + ' l-9 -4.5 v9 z" fill="#0f6e63"/>' +
           '<path d="M' + X(g.run * 0.34) + ' ' + ay + ' l9 -4.5 v9 z" fill="#0f6e63"/>');
    P.push('<text x="' + X(g.run * 0.5) + '" y="' + (ay - 11) + '" text-anchor="middle" font-size="15" ' +
      'fill="#0f6e63" letter-spacing="1.2">BOARD RUN</text>');

    const bm = niceBar(scale, 190), bx = mL, by = VH - 96;
    P.push('<line x1="' + bx + '" y1="' + by + '" x2="' + (bx + bm * scale) + '" y2="' + by +
      '" stroke="#16232b" stroke-width="3"/>');
    P.push('<line x1="' + bx + '" y1="' + (by - 7) + '" x2="' + bx + '" y2="' + (by + 7) + '" stroke="#16232b" stroke-width="2"/>');
    P.push('<line x1="' + (bx + bm * scale) + '" y1="' + (by - 7) + '" x2="' + (bx + bm * scale) +
      '" y2="' + (by + 7) + '" stroke="#16232b" stroke-width="2"/>');
    P.push('<text x="' + bx + '" y="' + (by + 26) + '" font-size="15" fill="#5a6b74">' + bm + ' m</text>');

    const lx = mL + 240, ly = VH - 104;
    P.push('<rect x="' + lx + '" y="' + ly + '" width="26" height="13" fill="' + colour +
      '" stroke="rgba(0,0,0,.45)" stroke-width="0.6"/>');
    P.push('<text x="' + (lx + 33) + '" y="' + (ly + 11) + '" font-size="12" fill="#5a6b74">Board</text>');
    P.push('<line x1="' + (lx + 112) + '" y1="' + ly + '" x2="' + (lx + 112) + '" y2="' + (ly + 13) +
      '" stroke="#16232b" stroke-width="3"/>');
    P.push('<text x="' + (lx + 124) + '" y="' + (ly + 11) + '" font-size="12" fill="#5a6b74">Butt joint</text>');
    P.push('<text x="' + (lx + 228) + '" y="' + (ly + 11) + '" font-size="12" fill="#5a6b74">' +
      'Figures are cut lengths in metres</text>');

    const tw = 600, th = 104, tx = VW - mR - tw, ty = VH - 134;
    P.push('<rect x="' + tx + '" y="' + ty + '" width="' + tw + '" height="' + th +
      '" fill="rgba(246,244,239,.94)" stroke="#16232b" stroke-width="1.5"/>');
    P.push('<line x1="' + tx + '" y1="' + (ty + 34) + '" x2="' + (tx + tw) + '" y2="' + (ty + 34) + '" stroke="#16232b"/>');
    P.push('<text x="' + (tx + 14) + '" y="' + (ty + 23) + '" font-size="16" letter-spacing="1.8" ' +
      'fill="#16232b">SETTING-OUT PLAN</text>');
    const layoutName = CONFIG.plan.layoutLabels[g.pattern] || 'Equal lengths';
    const cells = [
      ['DECK', g.run.toFixed(2) + ' x ' + g.across.toFixed(2) + ' m'],
      ['AREA', result.sqm.toFixed(1) + ' m\u00b2'],
      ['BOARDS', result.boardCount + ' @ ' + g.boardLength.toFixed(2) + 'm'],
      ['LAYOUT', layoutName],
      ['JOINTS', joints],
      ['JOISTS', g.joists + ' @ ' + (CONFIG.joistSpacing * 1000).toFixed(0) + 'mm']
    ];
    const cw = tw / cells.length;
    cells.forEach((c, i) => {
      const cx = tx + i * cw;
      if (i) P.push('<line x1="' + cx + '" y1="' + (ty + 34) + '" x2="' + cx + '" y2="' + (ty + th) + '" stroke="#c3ccc9"/>');
      P.push('<text x="' + (cx + 9) + '" y="' + (ty + 55) + '" font-size="9" fill="#5a6b74" letter-spacing="1">' + c[0] + '</text>');
      P.push('<text x="' + (cx + 9) + '" y="' + (ty + 80) + '" font-size="13" fill="#16232b">' + c[1] + '</text>');
    });

    const aria = g.rows + ' rows of ' + g.boardLength.toFixed(2) + 'm boards, ' +
      layoutName.toLowerCase() + ' layout, ' + joints + ' butt joints, over ' + g.joists + ' joists.';

    host.innerHTML =
      '<div class="calc-plan-wrap">' +
        '<svg viewBox="0 0 ' + VW + ' ' + VH + '" preserveAspectRatio="xMidYMid meet" ' +
        'role="img" aria-label="' + aria + '">' + P.join('') + '</svg>' +
        '<div class="calc-plan-tip"></div>' +
      '</div>';

    // one delegated listener per container, however many pieces there are
    if (!host.dataset.calcTipBound) {
      host.dataset.calcTipBound = '1';
      host.addEventListener('mousemove', e => {
        const wrap = host.querySelector('.calc-plan-wrap');
        const tip = host.querySelector('.calc-plan-tip');
        if (!wrap || !tip) return;
        const pc = e.target.closest('.pc');
        if (!pc) { tip.classList.remove('on'); return; }
        const r = wrap.getBoundingClientRect();
        tip.style.left = (e.clientX - r.left) + 'px';
        tip.style.top = (e.clientY - r.top) + 'px';
        tip.innerHTML = pc.dataset.kind + ' \u2014 ' + pc.dataset.len +
          ' m<small>Row ' + pc.dataset.row + '</small>';
        tip.classList.add('on');
      });
      host.addEventListener('mouseleave', () => {
        const tip = host.querySelector('.calc-plan-tip');
        if (tip) tip.classList.remove('on');
      });
    }
  }

  /* ===========================================================================
     RENDER
     =========================================================================== */

  /**
   * Reads a product's role/range.
   *
   * Prefers the data attribute, but Webflow will not bind a custom attribute's
   * VALUE to a CMS field — only page fields — so inside a Collection List the
   * value has to come from a bound (hidden) text element instead:
   *
   *   <div data-calc-meta="role">board366</div>     ← text bound to calc-role
   *   <div data-calc-meta="range">core</div>        ← text bound to calc-range
   *
   * Attribute first means this keeps working unchanged if the binding
   * restriction is ever lifted.
   */
  function metaOf(el, which, attrValue) {
    if (attrValue) return attrValue.trim();
    const node = el.querySelector('[data-calc-meta="' + which + '"]');
    return node ? node.textContent.trim() : '';
  }

  /**
   * Returns EVERY matching block, not just the first.
   *
   * Necessary because the calculator's two Collection Lists both draw from the
   * Products collection, and some products sit in both categories — bullnose is
   * in "Composite Decking" and in the accessories category, so it renders twice.
   * Matching only the first would leave the duplicate stuck on screen with a
   * stale quantity.
   */
  function findLines(role, rangeKey) {
    return $$(SEL.line).filter(el => {
      const r = metaOf(el, 'role', el.dataset.role);
      const g = metaOf(el, 'range', el.dataset.range);
      return r === role && (!g || g === rangeKey);
    });
  }

  function render(result) {
    // Empty state: until there's a valid deck, show the placeholder and let
    // everything else sit at zero behind it.
    const hasDeck = result.sqm > 0;
    $$(SEL.placeholder).forEach(el => setVisible(el, !hasDeck));

    let subtotal = 0;
    const totals = {};

    result.lines.forEach(line => {
      const total = line.qty * line.price;
      totals[line.role] = total;
      subtotal += total;   // counted once, however many blocks render it

      findLines(line.role, result.rangeKey).forEach(el => {
        setVisible(el, line.visible);

        const qtyInput = $(SEL.qty, el);
        if (qtyInput) {
          qtyInput.value = line.qty;          // property, not attribute
          qtyInput.dispatchEvent(new Event('change', { bubbles: true }));
        }

        const priceEl = $(SEL.linePrice, el);
        if (priceEl) priceEl.textContent = money(total);
      });
    });

    // Hide every product block belonging to the range that isn't selected.
    $$(SEL.line).forEach(el => {
      const g = metaOf(el, 'range', el.dataset.range);
      if (g && g !== result.rangeKey) setVisible(el, false);
    });

    const boardsText = $(SEL.boardsText);
    if (boardsText) {
      // The infeasible branch is defensive only: toggleInputs() moves the
      // selection to a legal layout before calculate() runs, so a customer
      // should never actually see it.
      boardsText.textContent = result.noJoinsFeasible
        ? result.boardCount + ' boards'
        : 'Not possible without joins';
    }

    // The no-joins warning is owned by toggleInputs(), which also disables
    // the option itself — so nothing to do here.

    const subEl = $(SEL.subtotal);
    if (subEl) subEl.textContent = money(subtotal);   // now includes bullnose

    lastResult = result;
    lastTotals = totals;

    renderSwatches(result.rangeKey);
    renderPlan(result);
    renderComparison(result, totals);
  }

  function renderSwatches(rangeKey) {
    $$(SEL.swatch).forEach(el => {
      setVisible(el, el.dataset.range === rangeKey);
    });

    // If the current colour belongs to the other range, fall back to the first
    // swatch that's actually on screen.
    const visible = $$(SEL.swatch).filter(isVisible);
    if (visible.length && !visible.some(el => el.dataset.hex === selectedColour)) {
      selectedColour = visible[0].dataset.hex || null;
      visible.forEach(el => el.classList.toggle('is-selected', el === visible[0]));
    }
  }

  function renderComparison(result, totals) {
    const C = CONFIG.comparison;
    const sqm = result.sqm;

    // COMPOSITE SIDE — never estimated. These are the actual product lines the
    // calculator has just quoted: real SKUs at real prices, the exact figure
    // the customer would pay. Only the timber columns are modelled.
    const compositeDeck =
      (totals.board366 || 0) + (totals.board220 || 0) +
      (totals.starters || 0) + (totals.spacers || 0);

    // Their real subframe cost, if they've chosen one.
    const compositeSubframe =
      (totals.joistStandard || 0) + (totals.joistStructural || 0) +
      (totals.pedestal || 0);

    const showSubframe = compositeSubframe > 0;
    const timberSubframe = showSubframe
      ? Math.round(sqm * C.timberSubframePerSqm)
      : 0;

    const compositeInitial = compositeDeck + compositeSubframe;
    const compositeMaint = Math.round(sqm * C.compositeMaintPerSqmPerYear * C.years);
    const compositeTotal = compositeInitial + compositeMaint;

    const rows = C.alternatives.map(alt => {
      // Identical routine to the composite side — same rows, same rounding,
      // same wastage, same laying pattern. Only the board size and price differ.
      const b = boardsRequired(
        result.plan.across, result.plan.run,
        alt.coverWidth, alt.boardLength, result.plan.pattern
      );
      const boardCount = b.feasible ? b.qty : 0;

      const deck = boardCount * alt.pricePerBoard +
                   Math.round(sqm * alt.fixingsPerSqm);
      const initial = deck + timberSubframe;
      const maint = Math.round(sqm * alt.maintPerSqmPerYear * C.years);
      const replace = (alt.replaceBoardsAtYear && alt.replaceBoardsAtYear < C.years)
        ? boardCount * alt.pricePerBoard
        : 0;
      const total = initial + maint + replace;
      return {
        key: alt.key, label: alt.label, boardCount,
        deck, subframe: timberSubframe,
        initial, maint, replace, total,
        perYear: Math.round(sqm * alt.maintPerSqmPerYear),
        saving: Math.max(0, total - compositeTotal)
      };
    });

    const set = (sel, pence) => {
      $$(sel).forEach(el => { el.textContent = money(pence); });
    };
    const setText = (sel, txt) => {
      $$(sel).forEach(el => { el.textContent = txt; });
    };

    /* --- Composite side --------------------------------------------------- */
    set('[data-compare="composite-deck"]', compositeDeck);
    set('[data-compare="composite-subframe"]', compositeSubframe);
    set('[data-compare="composite-initial"]', compositeInitial);
    set('[data-compare="composite-peryear"]', Math.round(sqm * C.compositeMaintPerSqmPerYear));
    set('[data-compare="composite-total"]', compositeTotal);
    setText('[data-compare="composite-label"]',
      (CONFIG.ranges[result.rangeKey] || CONFIG.ranges.core).label + ' Range');

    /* --- Each timber option ------------------------------------------------ */
    rows.forEach(r => {
      set('[data-compare="' + r.key + '-deck"]', r.deck);
      set('[data-compare="' + r.key + '-subframe"]', r.subframe);
      set('[data-compare="' + r.key + '-initial"]', r.initial);
      set('[data-compare="' + r.key + '-peryear"]', r.perYear);
      set('[data-compare="' + r.key + '-replace"]', r.replace);
      set('[data-compare="' + r.key + '-total"]', r.total);
      set('[data-compare="' + r.key + '-saving"]', r.saving);
      setText('[data-compare="' + r.key + '-label"]', r.label);
    });

    /* --- Legacy element IDs -----------------------------------------------
       The existing panel has one timber column. Keep it working, mapped to
       softwood, so nothing breaks before the new markup is built.
       --------------------------------------------------------------------- */
    const soft = rows.find(r => r.key === 'softwood') || rows[0];
    const byId = (id, pence) => {
      const el = document.getElementById(id);
      if (el) el.textContent = money(pence);
    };
    // Subframe rows hide themselves when no subframe was selected.
    $$('[data-compare-row="subframe"]').forEach(el => setVisible(el, showSubframe));

    byId('comparisonSubtotalComposite', compositeInitial);
    byId('compositeSubtotal', compositeInitial);
    byId('comparisonSubtotalTimber', soft.initial);
    byId('comparisonMainTimber', soft.perYear);
    byId('timberSubtotal', soft.total);
    byId('totalSavings', soft.saving);

    lastComparison = { compositeInitial, compositeTotal, rows };
  }

  /* ===========================================================================
     CONDITIONAL INPUTS + WEBFLOW SELECT HANDLING
     =========================================================================== */

  function toggleInputs() {
    const state = readState();

    // Existing wrappers keep their classes; new ones use data-calc-toggle so
    // they don't depend on a class being created in the Designer first.
    const pairs = [
      ['.input-content-wrapper_fascia-board', state.wantFascia],
      ['[data-calc-toggle="fascia"]',         state.wantFascia],
      ['.input-wrapper_edge-trim',            state.wantEdgeTrim],
      ['[data-calc-toggle="edgeTrim"]',       state.wantEdgeTrim],
      ['.input-wrapper_bullnose',             state.wantBullnose]
    ];
    pairs.forEach(([sel, show]) => {
      $$(sel).forEach(el => { setVisible(el, show); });
    });

    // Ultimate has no 2.2m board — disable rather than silently ignore.
    const cb = $(SEL.use220);
    if (cb) {
      const has220 = !!state.range.boards['2.20'];
      cb.disabled = !has220;
      if (!has220) cb.checked = false;
    }

    /* --- No-joins availability --------------------------------------------
       A run longer than a board cannot be laid without joins, so don't offer
       it. Note this depends on DIRECTION: a 5m x 3m deck can be laid join-free
       with the boards running across the 3m, just not along the 5m. So the
       option is re-enabled when the customer flips direction rather than being
       disabled outright.
       --------------------------------------------------------------------- */
    const activeBoard = state.range.boards[state.use220 ? '2.20' : '3.66'];
    const boardLen = activeBoard ? activeBoard.length : 0;
    const run = state.boardDirection === 'width' ? state.width : state.length;
    const otherRun = state.boardDirection === 'width' ? state.length : state.width;

    const canNoJoins = run > 0 && boardLen > 0 && run <= boardLen;
    const wouldFitOtherWay = otherRun > 0 && boardLen > 0 && otherRun <= boardLen;

    /* If the run fits inside a single board there is no reason to join at all,
       so No joins becomes the ONLY option — the bonded layouts are disabled and
       deselected. Above a board length it's the reverse. */
    const setOpt = (value, enabled) => {
      const el = $(SEL.layPattern + '[value="' + value + '"]');
      if (!el) return null;
      el.disabled = !enabled;
      const label = labelFor(el);
      if (label) label.style.opacity = enabled ? '' : '0.45';
      return el;
    };

    if (run > 0) {
      const nj = setOpt('nojoins', canNoJoins);
      const eq = setOpt('equal', !canNoJoins);
      const st = setOpt('staggered', !canNoJoins);

      // Move the selection onto a legal option BEFORE quantities are worked
      // out, so the customer never sees a dead state or a zero quote.
      const current = $(SEL.layPattern + ':checked');
      if (!current || current.disabled) {
        const target = canNoJoins ? nj : (eq || st);
        if (target) {
          if (current) current.checked = false;
          target.checked = true;
        }
      }
    }

    const warn = $(SEL.noJoinsWarning);
    if (warn) {
      const show = run > 0;
      setVisible(warn, show);
      if (show) {
        warn.textContent = canNoJoins
          ? 'A ' + run.toFixed(2) + 'm run fits within a single ' + boardLen.toFixed(2) +
            'm board, so this deck is laid without joins.'
          : (wouldFitOtherWay
              ? 'A ' + run.toFixed(2) + 'm run is longer than a ' + boardLen.toFixed(2) +
                'm board, so it needs joins. Running the boards the other way ' +
                'would avoid them entirely.'
              : 'Both sides are longer than a ' + boardLen.toFixed(2) + 'm board, ' +
                'so joins are unavoidable. No piece will be shorter than ' +
                (CONFIG.plan.minPieceLength * 1000).toFixed(0) + 'mm.');
      }
    }
  }

  /**
   * Webflow always injects a "Select …" placeholder on SKU option dropdowns,
   * and add-to-cart fails while it's selected. Where there's only one real
   * option, pick it automatically.
   *
   * Replaces the obfuscated block that hardcoded the Core fascia's option GUID
   * (c6d456aad9f846ecfb08dd4c37bef836) — which would not have matched Ultimate.
   */
  function autoSelectSingleOptions() {
    $$(SEL.scope + ' select').forEach(sel => {
      if (sel.options.length === 2 && !sel.value) {
        sel.selectedIndex = 1;
        // Other scripts may be listening on these selects. If one of them
        // throws, that must not abort our initialisation — an old leftover
        // handler referencing globals from a previous calculator version did
        // exactly that, and the whole calculator silently rendered zeros.
        try {
          sel.dispatchEvent(new Event('change', { bubbles: true }));
        } catch (e) {
          if (window.console) console.warn('Calculator: a change listener threw', e);
        }
      }
    });
  }

  /* ===========================================================================
     WIRING — one listener, one update path
     =========================================================================== */

  let frame = null;

  /**
   * Schedule an update on the next frame, coalescing rapid keystrokes.
   *
   * requestAnimationFrame is suspended entirely while a tab is in the
   * background, so fall back to a timer when the document is hidden —
   * otherwise a queued update can sit unrun until the tab is looked at again.
   */
  function scheduleUpdate() {
    if (frame) {
      cancelAnimationFrame(frame);
      clearTimeout(frame);
      frame = null;
    }
    frame = document.hidden
      ? setTimeout(update, 0)
      : requestAnimationFrame(update);
  }

  function update() {
    toggleInputs();
    render(calculate(readState()));
  }

  function onChange(e) {
    if (!e.target.closest(SEL.scope)) return;
    scheduleUpdate();
  }

  /**
   * Gives every data-calc-for element the right semantics for its tag:
   *   <label>      -> a real `for`, so the browser handles it natively
   *   anything else -> aria-labelledby on the input, so screen readers still
   *                    get the association even though it can't be a label
   */
  function wireLabels() {
    $$('[data-calc-for]').forEach((el, i) => {
      const id = el.dataset.calcFor;
      const input = document.getElementById(id);
      if (!input) return;

      if (el.tagName === 'LABEL') {
        el.setAttribute('for', id);
        return;
      }
      if (!el.id) el.id = 'calcLabel' + i;
      const existing = input.getAttribute('aria-labelledby');
      if (existing !== el.id) input.setAttribute('aria-labelledby', el.id);
    });
  }

  /** The label for a control, however it's associated. */
  function labelFor(el) {
    return el.closest('label') ||
      (el.id ? $('[data-calc-for="' + el.id + '"]') : null);
  }

  /* ===========================================================================
     EMAIL ME THIS QUOTE
     Snapshots what is on screen and POSTs it to a Make.com webhook, which
     builds and sends the email. Nothing is recalculated here — the payload is
     exactly the quote the customer is looking at.
     ========================================================================= */

  const pounds = pence => Math.round(pence) / 100;

  /* --- Product-panel selections (Colour / Length dropdowns) --------------
     These live in Webflow's product blocks, not in the calculator's own
     state, so share links have to carry them separately and put them back. */

  const norm = t => (t || '').trim().toLowerCase();

  function isColourSelect(sel) {
    const names = CONFIG.colourNames.map(norm);
    let hits = 0;
    for (const o of sel.options) if (names.includes(norm(o.text))) hits++;
    return hits >= 2;
  }

  /** The colour currently chosen in any visible product block, if any. */
  function readSelectedColourName() {
    for (const line of $$(SEL.line)) {
      if (!line.offsetParent) continue;
      for (const sel of $$('select', line)) {
        if (!isColourSelect(sel)) continue;
        const o = sel.options[sel.selectedIndex];
        if (o && CONFIG.colourNames.map(norm).includes(norm(o.text))) return o.text.trim();
      }
    }
    return null;
  }

  /**
   * Every option the customer has chosen in a visible product block, as
   * "role:selectIndex:optionText" entries — colour, length, pedestal height
   * range, anything. Index 0 is always Webflow's "Select …" placeholder.
   */
  function readProductOptions(rangeKey) {
    const out = [];
    $$(SEL.line).forEach(line => {
      if (!line.offsetParent) return;
      const role = metaOf(line, 'role', line.dataset.role);
      if (!role) return;
      $$('select', line).forEach((sel, i) => {
        if (sel.selectedIndex > 0) {
          out.push(role + ':' + i + ':' + sel.options[sel.selectedIndex].text.trim());
        }
      });
    });
    return out;
  }

  function applyProductOptions(entries, rangeKey) {
    entries.forEach(e => {
      const [role, idx, ...rest] = e.split(':');
      const text = rest.join(':');
      findLines(role, rangeKey).forEach(line => {
        const sel = $$('select', line)[+idx];
        if (sel) pickOption(sel, o => norm(o.text) === norm(text));
      });
    });
  }

  function pickOption(sel, matcher) {
    for (let i = 0; i < sel.options.length; i++) {
      if (matcher(sel.options[i])) {
        if (sel.selectedIndex !== i) {
          sel.selectedIndex = i;
          sel.dispatchEvent(new Event('change', { bubbles: true }));
        }
        return true;
      }
    }
    return false;
  }

  /**
   * Re-select colour and board length in every product block. Idempotent —
   * safe to call more than once, which matters because Webflow's commerce
   * script binds to the selects a little after our own code runs.
   */
  function restoreProductSelections(colourName, boardLength) {
    if (colourName) {
      // The swatch first, so any site-level colour sync runs as if clicked.
      const sw = $$(SEL.swatch).concat($$('[id]')).find(el =>
        norm(el.dataset && el.dataset.name) === norm(colourName) ||
        norm(el.id) === norm(colourName) ||
        norm(el.textContent) === norm(colourName));
      if (sw && typeof sw.click === 'function' && sw.tagName !== 'OPTION') {
        // Let the site's own colour-sync run, but don't let an href="#" jump the page.
        sw.addEventListener('click', ev => ev.preventDefault(), { once: true });
        sw.click();
      }
    }
    const q = new URLSearchParams(location.search);
    if (q.get('po')) {
      applyProductOptions(q.get('po').split('|'), lastResult ? lastResult.rangeKey : null);
    }
    const lenText = boardLength ? boardLength.toFixed(2) : null;
    $$(SEL.line).forEach(line => {
      $$('select', line).forEach(sel => {
        if (colourName && isColourSelect(sel)) {
          pickOption(sel, o => norm(o.text) === norm(colourName));
        } else if (lenText) {
          // A length dropdown: pick the option carrying the active board length
          pickOption(sel, o => /\d\.\d+\s*m/i.test(o.text) && o.text.includes(lenText));
        }
      });
    });
  }

  /** Current controls -> URL that reopens the calculator in this exact state. */
  function buildShareUrl(s) {
    const q = new URLSearchParams();
    q.set('l', s.length); q.set('w', s.width);
    q.set('r', s.rangeKey);
    if (selectedColour) q.set('c', selectedColour.replace('#', ''));
    const colourName = readSelectedColourName();
    if (colourName) q.set('colour', colourName);
    const opts = readProductOptions(s.rangeKey);
    if (opts.length) q.set('po', opts.join('|'));
    q.set('lay', s.layPattern); q.set('dir', s.boardDirection);
    if (s.use220) q.set('b220', '1');
    if (s.wantFascia) q.set('fb', s.fasciaLength);
    if (s.wantEdgeTrim) q.set('et', s.edgeTrimLen);
    if (s.wantBullnose) q.set('bn', s.bullnoseLen);
    if (s.wantPedestal) q.set('ped', '1');
    if (s.joistType !== 'none') q.set('j', s.joistType);
    return location.origin + location.pathname + '?' + q.toString();
  }

  /**
   * Current results -> /your-cart link that re-adds every visible line to
   * the Webflow cart. Item format matches the rebuild runner's contract:
   * productId~qty~optText|optText (option texts read straight from each
   * product panel's selects, so colour/length/height carry over exactly).
   */
  function buildRebuildUrl() {
    const r = lastResult;
    if (!r || !r.lines) return null;
    const items = [];
    r.lines.forEach(l => {
      if (!l.visible || l.qty <= 0 || !l.id) return;
      const opts = [];
      const el = findLines(l.role, r.rangeKey)[0];
      if (el) {
        $$('select', el).forEach(sel => {
          if (sel.selectedIndex > 0) {
            opts.push(sel.options[sel.selectedIndex].text.trim().replace(/[~;|]/g, ' '));
          }
        });
      }
      items.push(l.id + '~' + l.qty + (opts.length ? '~' + opts.join('|') : ''));
    });
    if (!items.length) return null;
    const subtotal = Object.values(lastTotals || {}).reduce((a, b) => a + b, 0);
    const q = new URLSearchParams();
    q.set('rc', '1');
    q.set('i', items.join(';'));
    if (subtotal > 0) q.set('t', String(subtotal));
    q.set('src', 'quote');
    q.set('rid', 'q_' + Date.now().toString(36));
    return location.origin + '/your-cart?' + q.toString();
  }

  /** Reverse of buildShareUrl: a share link restores every control on load. */
  function applyShareParams() {
    const q = new URLSearchParams(location.search);
    if (!q.has('l') || !q.has('w')) return;

    const setVal = (sel, v) => { const el = $(sel); if (el && v != null) el.value = v; };
    const setRadio = (sel, v) => {
      if (!sel) { console.warn('[calc] share link: unknown control selector'); return; }
      const el = $(sel + '[value="' + v + '"]'); if (el) el.checked = true;
    };
    const setCb = (sel, on) => { const el = $(sel); if (el) el.checked = !!on; };

    setVal(SEL.length, q.get('l'));
    setVal(SEL.width, q.get('w'));
    if (q.get('r')) setRadio(SEL.range, q.get('r'));
    if (q.get('lay')) setRadio(SEL.layPattern, q.get('lay'));
    if (q.get('dir')) setRadio(SEL.boardDirection, q.get('dir'));
    if (q.get('j')) setRadio(SEL.joistType, q.get('j'));
    setCb(SEL.use220, q.get('b220') === '1');
    setCb(SEL.wantFascia, q.has('fb'));   setVal(SEL.fasciaLength, q.get('fb'));
    setCb(SEL.wantEdgeTrim, q.has('et')); setVal(SEL.edgeTrimLen, q.get('et'));
    setCb(SEL.wantBullnose, q.has('bn')); setVal(SEL.bullnoseLen, q.get('bn'));
    setCb(SEL.wantPedestal, q.get('ped') === '1');
    if (q.get('c')) selectedColour = '#' + q.get('c');
  }

  /** The plan SVG rendered to a PNG data URL (email clients strip SVG). */
  function planToPng() {
    return new Promise(resolve => {
      const svg = $(SEL.plan + ' svg');
      if (!svg) return resolve(null);
      const vb = (svg.getAttribute('viewBox') || '0 0 1600 1000').split(/\s+/).map(Number);
      const w = CONFIG.quote.planImageWidth, h = Math.round(w * vb[3] / vb[2]);

      const clone = svg.cloneNode(true);
      clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      clone.setAttribute('width', w); clone.setAttribute('height', h);
      clone.setAttribute('style', 'font-family:Poppins,Arial,sans-serif;background:#f6f4ef');
      const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(clone)],
        { type: 'image/svg+xml;charset=utf-8' }));

      const img = new Image();
      img.onload = () => {
        try {
          const c = document.createElement('canvas');
          c.width = w; c.height = h;
          const ctx = c.getContext('2d');
          ctx.fillStyle = '#f6f4ef'; ctx.fillRect(0, 0, w, h);
          ctx.drawImage(img, 0, 0, w, h);
          resolve(c.toDataURL('image/png'));
        } catch (e) { resolve(null); }
        URL.revokeObjectURL(url);
      };
      img.onerror = () => { URL.revokeObjectURL(url); resolve(null); };
      img.src = url;
    });
  }

  /** Everything the email needs, read from the last render. */
  function quoteSnapshot(email, consent) {
    const r = lastResult, s = readState();
    const range = CONFIG.ranges[r.rangeKey] || {};
    const swatch = $$(SEL.swatch).find(sw => sw.dataset.hex === selectedColour);
    const colourName = readSelectedColourName() || (swatch
      ? (swatch.dataset.name || swatch.getAttribute('title') || swatch.id || swatch.textContent.trim())
      : null);

    const lines = r.lines.filter(l => l.visible && l.qty > 0).map(l => {
      const el = findLines(l.role, r.rangeKey)[0];
      const heading = el ? $('h1,h2,h3,h4,h5,h6', el) : null;
      const img = el ? $('img', el) : null;
      const link = el ? $('a[href]', el) : null;
      return {
        role: l.role,
        productId: l.id,
        name: heading ? heading.textContent.trim() : l.role,
        qty: l.qty,
        unitPrice: pounds(l.price),
        lineTotal: pounds(l.qty * l.price),
        unitPriceText: money(l.price),
        lineTotalText: money(l.qty * l.price),
        image: img ? (img.currentSrc || img.src) : null,
        url: link ? link.href : null
      };
    });

    const subtotal = Object.values(lastTotals || {}).reduce((a, b) => a + b, 0);
    const cmp = lastComparison || {};
    const timber = (cmp.rows || []).map(t => ({
      key: t.key, label: t.label, dayOne: pounds(t.initial),
      perYear: pounds(t.perYear), replacement: pounds(t.replace),
      total15yr: pounds(t.total), saving: pounds(t.saving),
      dayOneText: money(t.initial), perYearText: money(t.perYear),
      total15yrText: money(t.total), savingText: money(t.saving)
    }));
    const comparison = {
      compositeDayOne: pounds(cmp.compositeInitial || 0),
      composite15yr: pounds(cmp.compositeTotal || 0),
      compositeDayOneText: money(cmp.compositeInitial || 0),
      composite15yrText: money(cmp.compositeTotal || 0),
      timber,
      // the headline comparison, lifted out so a template needn't loop for it
      softwood: timber.find(t => t.key === 'softwood') || null
    };

    return {
      customer: { email, consentToFollowUp: !!consent },
      deck: {
        length: s.length, width: s.width, sqm: +r.sqm.toFixed(2),
        sizeText: s.length.toFixed(2) + ' x ' + s.width.toFixed(2) + ' m',
        sqmText: r.sqm.toFixed(1) + ' m\u00b2',
        range: range.label || r.rangeKey, rangeKey: r.rangeKey,
        colour: colourName, colourHex: selectedColour,
        layout: CONFIG.plan.layoutLabels[s.layPattern] || s.layPattern,
        boardDirection: s.boardDirection,
        boardLength: r.plan.boardLength, boards: r.boardCount,
        rows: r.plan.rows, joists: r.plan.joists, use220: !!s.use220
      },
      options: {
        fasciaLength: s.wantFascia ? s.fasciaLength : 0,
        edgeTrimLength: s.wantEdgeTrim ? s.edgeTrimLen : 0,
        bullnoseLength: s.wantBullnose ? s.bullnoseLen : 0,
        pedestals: !!s.wantPedestal, joists: s.joistType
      },
      lines,
      totals: { subtotal: pounds(subtotal), subtotalText: money(subtotal), comparison },
      shareUrl: buildShareUrl(s),
      rebuildUrl: buildRebuildUrl(),
      meta: { sentAt: new Date().toISOString(), page: location.href, scriptVersion: 'v32' }
    };
  }

  /* --- v31: send-button state machine ------------------------------------
     States, set as data-state on [data-quote-send] for styling in the Designer:
       idle     the Designer's own label, clickable
       sending  label "Sending…", aria-busy + aria-disabled, clicks ignored
       sent     label "Sent — check your inbox", aria-disabled, locked for the
                whole cooldown; status line carries the countdown
       error    Designer label back, red status, only the short 8s pause
     The cooldown is keyed per lowercased address in localStorage — the same
     key Make's data store uses — so a different address unlocks immediately
     and a reload inside the window shows the sent state again once the
     address is typed. Make remains the enforcement; this is the courtesy. */

  let quoteBusy = false;
  let quoteIdleLabel = null;     // the Designer's button text, read once
  let quoteCooldownTimer = null;

  function quoteSay(msg, state) {
    const status = $(SEL.quoteStatus);
    if (!status) return;
    status.textContent = msg;
    status.dataset.state = state || 'ok';
  }

  function quoteSetState(state) {
    const btn = $(SEL.quoteSend);
    if (!btn) return;
    if (quoteIdleLabel === null) quoteIdleLabel = btn.textContent.trim();
    btn.dataset.state = state;
    const labels = CONFIG.quote.labels || {};
    btn.textContent = state === 'sending' ? (labels.sending || 'Sending…')
                    : state === 'sent'    ? (labels.sent || 'Sent — check your inbox')
                    : quoteIdleLabel;
    if (state === 'sending') btn.setAttribute('aria-busy', 'true');
    else btn.removeAttribute('aria-busy');
    if (state === 'sending' || state === 'sent') btn.setAttribute('aria-disabled', 'true');
    else btn.removeAttribute('aria-disabled');
  }

  // localStorage map of accepted sends: { "<email lowercased>": epochMs }.
  // Every read prunes expired entries, so the map never grows.
  function quoteLoadSends() {
    try { return JSON.parse(localStorage.getItem(CONFIG.quote.storageKey) || '{}') || {}; }
    catch (e) { return {}; }
  }
  function quoteSaveSends(map) {
    try { localStorage.setItem(CONFIG.quote.storageKey, JSON.stringify(map)); } catch (e) { /* private mode etc. */ }
  }
  function quoteWindowMs() { return (CONFIG.quote.rateLimitMs || 0) + (CONFIG.quote.rateLimitBufferMs || 0); }
  function quotePruneSends() {
    const map = quoteLoadSends(), cutoff = Date.now() - quoteWindowMs();
    let changed = false;
    Object.keys(map).forEach(k => { if (!(map[k] > cutoff)) { delete map[k]; changed = true; } });
    if (changed) quoteSaveSends(map);
    return map;
  }
  function quoteRecordSend(email) {
    const map = quotePruneSends();
    map[email.toLowerCase()] = Date.now();
    quoteSaveSends(map);
  }
  function quoteCooldownRemaining(email) {
    const at = quotePruneSends()[email.toLowerCase()];
    return at ? Math.max(0, at + quoteWindowMs() - Date.now()) : 0;
  }
  function quoteRemainingText(ms) {
    if (ms < 45000) return 'in under a minute';
    const mins = Math.round(ms / 60000);
    return mins <= 1 ? 'in about a minute' : 'in about ' + mins + ' minutes';
  }

  /* Reconciles the button with the typed address: called at init, on every
     keystroke in the email field, and by its own timer while counting down. */
  function refreshQuoteState() {
    if (quoteBusy) return;
    const btn = $(SEL.quoteSend);
    if (!btn) return;
    const emailEl = $(SEL.quoteEmail);
    const email = (emailEl && emailEl.value || '').trim();
    const left = email ? quoteCooldownRemaining(email) : 0;
    clearTimeout(quoteCooldownTimer);
    if (left > 0) {
      quoteSetState('sent');
      quoteSay('Sent to ' + email + '. You can send an updated quote to this address ' +
               quoteRemainingText(left) + '.', 'cooldown');
      quoteCooldownTimer = setTimeout(refreshQuoteState, Math.min(left, 30000));
    } else if (btn.dataset.state === 'sent') {
      quoteSetState('idle');          // the cooldown just ended, or the address changed
      quoteSay('', 'ok');
    } else if (!btn.dataset.state) {
      quoteSetState('idle');          // first run: remember the Designer label
    }
  }

  async function sendQuote() {
    const btn = $(SEL.quoteSend);
    if (quoteBusy) return;
    if (btn && btn.getAttribute('aria-disabled') === 'true') return;   // sent / cooling down

    const emailEl = $(SEL.quoteEmail);
    const email = (emailEl && emailEl.value || '').trim();
    if (!lastResult || lastResult.sqm <= 0) return quoteSay('Enter your deck size first.', 'error');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return quoteSay('Please enter a valid email address.', 'error');
    if (!CONFIG.quote.webhookUrl) return quoteSay('Quote emails are not set up yet.', 'error');
    if (quoteCooldownRemaining(email) > 0) return refreshQuoteState();  // belt and braces

    quoteBusy = true;
    quoteSetState('sending');
    quoteSay('Sending your quote…', 'ok');

    let ok = false;
    try {
      const payload = quoteSnapshot(email, isChecked(SEL.quoteConsent));
      payload.planPng = await planToPng();
      const body = JSON.stringify(payload);

      try {
        const res = await fetch(CONFIG.quote.webhookUrl, {
          method: 'POST', headers: { 'Content-Type': 'application/json' }, body
        });
        ok = res.ok;
      } catch (e) {
        // CORS may hide the response; the request still lands. Fire opaque.
        await fetch(CONFIG.quote.webhookUrl, {
          method: 'POST', mode: 'no-cors',
          headers: { 'Content-Type': 'text/plain' }, body
        });
        ok = true;
      }
    } catch (e) {
      ok = false;
    }

    if (ok) {
      quoteRecordSend(email);
      quoteBusy = false;
      refreshQuoteState();            // → sent, locked, countdown line
    } else {
      quoteSetState('error');
      quoteSay('Something went wrong. Please try again.', 'error');
      setTimeout(() => {
        quoteBusy = false;
        quoteSetState('idle');
        refreshQuoteState();
      }, CONFIG.quote.cooldownMs);
    }
  }

  function init() {
    document.addEventListener('input', onChange);
    document.addEventListener('change', onChange);

    /* ONE convention for every control label: data-calc-for="inputId".
       Webflow Headings can only be h1-h6, so a native <label> isn't available
       everywhere — this attribute works on any element type. wireLabels()
       adds the correct accessibility wiring for whichever it finds. */
    wireLabels();

    // A share link (?l=5&w=3&...) restores the controls before the first render.
    applyShareParams();

    document.addEventListener('click', e => {
      if (e.target.closest(SEL.quoteSend)) { e.preventDefault(); sendQuote(); }
    });
    document.addEventListener('keydown', e => {
      if (e.key === 'Enter' && e.target.matches(SEL.quoteEmail)) { e.preventDefault(); sendQuote(); }
    });
    // v31: the typed address decides whether the button is idle or cooling down.
    document.addEventListener('input', e => {
      if (e.target.matches(SEL.quoteEmail)) refreshQuoteState();
    });
    refreshQuoteState();

    document.addEventListener('click', e => {
      const trigger = e.target.closest('[data-calc-for]');
      if (!trigger || !trigger.closest(SEL.scope)) return;
      const input = document.getElementById(trigger.dataset.calcFor);
      if (!input || input.disabled) return;
      // A real <label for> already toggles natively — don't undo it.
      if (trigger.tagName === 'LABEL' && trigger.getAttribute('for')) return;
      if (input.type === 'checkbox') input.checked = !input.checked;
      else input.checked = true;
      input.dispatchEvent(new Event('change', { bubbles: true }));
    });

    // Colour swatches drive the plan's board colour.
    document.addEventListener('click', e => {
      const sw = e.target.closest(SEL.swatch);
      if (!sw || !sw.closest(SEL.scope)) return;
      selectedColour = sw.dataset.hex || selectedColour;
      $$(SEL.swatch).forEach(el => el.classList.toggle('is-selected', el === sw));
      scheduleUpdate();
    });

    // The plan is width-dependent, so redraw when the container resizes.
    if ('ResizeObserver' in window) {
      const ro = new ResizeObserver(() => scheduleUpdate());
      $$(SEL.plan).forEach(el => ro.observe(el));
    }

    autoSelectSingleOptions();
    update();

    // Reopened from a share link: put the product panels back too.
    //
    // Webflow's commerce script initialises AFTER page load and resets every
    // variant <select> to its placeholder as it does so — and on a slow
    // connection that reset can land SECONDS in, after any "looks stable
    // now" heuristic has given up (the "colour fills in for a second, then
    // flips back to Select" symptom). So: keep re-applying on a short
    // interval for a full 20 seconds, and stop early only when the visitor
    // actually touches a product panel — never fight a real hand.
    // pickOption() only fires a change when a value actually differs, so
    // once things have settled the repeats are silent no-ops.
    const q = new URLSearchParams(location.search);
    if (q.has('l') && q.has('w')) {
      const colourName = q.get('colour');
      const restore = () => restoreProductSelections(
        colourName, lastResult && lastResult.plan ? lastResult.plan.boardLength : null);

      const started = Date.now();
      const crumb = (msg) => { try { console.info('[calc-restore] ' + (Date.now() - started) + 'ms ' + msg); } catch (e) {} };
      let userTookOver = false;
      const handsOff = e => {
        // Only a real interaction with a form CONTROL in a product panel
        // ends the guard. A touch on the panel's background is how touch
        // screens scroll — that must never count as taking over.
        if (!e.isTrusted || !e.target.closest) return;
        if (!e.target.closest(SEL.line)) return;
        if (e.target.closest('select, input, button, label, [data-calc-for]')) {
          userTookOver = true;
          crumb('visitor took over (' + e.type + ' on ' + e.target.tagName + ')');
        }
      };
      document.addEventListener('pointerdown', handsOff, true);
      document.addEventListener('keydown', handsOff, true);

      const watched = () => $$(SEL.line + ' select').map(sel => sel.selectedIndex).join(',');
      crumb('guard armed; colour=' + (colourName || 'none'));
      restore();
      let lastState = watched();
      crumb('first apply → [' + lastState + ']');

      // Three independent heartbeats drive the same guard body: a plain
      // interval, a requestAnimationFrame chain, and a MutationObserver on
      // the page. Browser extensions that inject into the page can nerf
      // any ONE of these (a dead setInterval is exactly what we saw in the
      // wild); it is very unlikely anything kills all three. The body is
      // idempotent and self-throttled, so overlapping heartbeats are fine.
      let stopped = false, lastRun = 0, alive = { iv: false, raf: false, mo: false };
      const stopAll = why => {
        if (stopped) return;
        stopped = true;
        crumb('guard stopped (' + why + ') → [' + watched() + ']');
        clearInterval(iv);
        try { mo.disconnect(); } catch (e) {}
        document.removeEventListener('pointerdown', handsOff, true);
        document.removeEventListener('keydown', handsOff, true);
      };
      const guardBody = via => {
        if (stopped) return;
        if (userTookOver) { stopAll('visitor took over'); return; }
        if (Date.now() - started > 600000) { stopAll('10-min cap reached'); return; }
        if (!alive[via]) { alive[via] = true; crumb('heartbeat "' + via + '" alive'); }
        if (Date.now() - lastRun < 300) return;   // self-throttle across heartbeats
        lastRun = Date.now();
        const before = watched();
        if (before !== lastState) crumb('external change detected [' + lastState + '] → [' + before + '], re-applying via ' + via);
        restore();
        lastState = watched();
      };
      const iv = setInterval(() => guardBody('iv'), 400);
      const rafLoop = () => {
        if (stopped) return;
        guardBody('raf');
        try { requestAnimationFrame(rafLoop); } catch (e) { setTimeout(rafLoop, 500); }
      };
      try { requestAnimationFrame(rafLoop); } catch (e) {}
      const mo = new MutationObserver(() => guardBody('mo'));
      try { mo.observe(document.body, { childList: true, subtree: true }); } catch (e) {}

      // Also run once Webflow itself reports ready, if it exposes the hook.
      if (window.Webflow && typeof window.Webflow.push === 'function') {
        window.Webflow.push(restore);
      }
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

/* =============================================================================
   REMAINING BEFORE GO-LIVE (page work — the code is complete)
   -----------------------------------------------------------------------------
   1. Colour swatches: add data-swatch="true", data-range, data-hex to the five
      Core swatches; build five Ultimate swatches. Until then the plan draws in
      the fallback Anthracite whatever colour is picked.
   2. Delete the redundant "Add 3.66m Composite Joists?" checkbox block (the
      2.2m one is already hidden) — superseded by the joistType radio.
   3. Style the [data-nojoins-warning] text block. It shows on every deck as
      guidance, so it should not look like an error.
   4. Group each control with its label and lay out; keep data-calc-for intact.
      Do NOT style opacity on labels — the script uses inline opacity to grey
      out disabled options.
   5. Duplicate the lead-times block per range.
   6. Mobile pass: plan height (80vh may be too tall), title block density.

   GO-LIVE is a SLUG SWAP, not a script swap. The current live page has none of
   this markup — pointing it at this file yields a page of zeros. Rename the
   live page's slug away, give this page the live slug, untick Draft, remove
   the SEO exclusion, publish. The old page then remains as instant rollback.

   STILL OPEN (business questions, not code)
   -----------------------------------------------------------------------------
   a. Installation guide: are expansion gaps required at butt joints or the
      deck perimeter? Not currently modelled; could change counts on long runs.
   b. Starter clips: first board only (current setting) or first AND last as
      the product page's "project specific" wording allows? starterClipEdges.
   c. Accessories (bullnose/fascia/trim/OB1) are excluded from the timber
      comparison on BOTH sides — deliberate, but confirm.
   ============================================================================= */