{
"version": 3,
"sources": ["/cdn/shop/t/26/assets/tdhq-cart-drawer.js?b=20260923d"],
"sourcesContent": ["/* ONE NOTICE (23 Oct 2026; restyled the same day, owner: the dark panels \"look AI made\", match our design, with an\n icon). Every add message is a house panel - the Click & Collect panel's shape (32px round icon tile, bold title,\n 13px text) in the HQ Rewards bar's yellow for a stock limit, red when something failed, green when added (CSS\n .tdhq-note in tdhq-core.css). TdhqNote.fill() dresses any element that way; TdhqNote.show() puts one over the\n bottom of a product's picture (cards, quick view) and fades it after a few seconds, so nothing moves. The product\n page's side notification (tdhq-pdp.js) is filled by the same builder. role=alert so it is announced. */\n(function () {\n 'use strict';\n if (window.TdhqNote) return;\n var ERR = /sold out|could not|couldn.t|try again|not available|unavailable|went wrong|error/i;\n var LIMIT = /in your basket|in stock|we have/i;\n function kindOf(message, kind) {\n if (kind) { return kind; }\n if (LIMIT.test(message) && !/sold out/i.test(message)) { return 'limit'; }\n return ERR.test(message) ? 'error' : 'limit';\n }\n function titleOf(message, kind) {\n if (kind === 'ok') { return 'Added to your basket'; }\n if (kind === 'limit') { return 'Stock limit reached'; }\n return /sold out/i.test(message) ? 'Sold out' : 'Could not add to basket';\n }\n function fill(el, message, kind, title) {\n /* Shopify's own wording, said plainly: \"The product 'X - 1L' is already sold out.\" -> \"X - 1L is sold out.\" */\n message = String(message).replace(/^The product '(.+)' is already sold out\\.?$/, '$1 is sold out.');\n kind = kindOf(message, kind);\n var icon = kind === 'ok' ? 'check' : kind === 'limit' ? 'basket' : 'alert';\n el.setAttribute('data-kind', kind);\n el.innerHTML = '' +\n '';\n el.querySelector('.tdhq-note__title').textContent = title || titleOf(message, kind);\n el.querySelector('.tdhq-note__text').textContent = message;\n return el;\n }\n function hide(box) {\n window.clearTimeout(box._t);\n box.classList.remove('is-open');\n box._t = window.setTimeout(function () { if (box.parentNode && !box.classList.contains('is-open')) { box.remove(); } }, 400);\n }\n window.TdhqNote = {\n fill: fill,\n show: function (host, message, ms, kind) {\n if (!host || !message) { return; }\n var box = null;\n for (var i = 0; i < host.children.length; i++) { if (host.children[i].classList.contains('tdhq-note')) { box = host.children[i]; } }\n if (!box) {\n box = document.createElement('div');\n box.className = 'tdhq-note';\n box.setAttribute('role', 'alert');\n host.appendChild(box);\n }\n fill(box, message, kind);\n box.classList.remove('is-open');\n void box.offsetWidth;\n box.classList.add('is-open');\n window.clearTimeout(box._t);\n box._t = window.setTimeout(function () { hide(box); }, ms || 5000);\n },\n clear: function (host) {\n if (!host) { return; }\n for (var i = 0; i < host.children.length; i++) { if (host.children[i].classList.contains('tdhq-note')) { hide(host.children[i]); } }\n }\n };\n})();\n/* STUCK BASKET RECOVERY (23 Oct 2026, owner: signed in, every add answered \"The product '...' is already sold\n out.\" although the item was in stock; signed out it worked). Measured: a bare /cart/add.js to that basket gave 422\n for an item with 4 available, and a NEW basket for the same signed-in customer took it (200). A basket can be left\n bound to a country we do not sell to (only the United Kingdom market is active; the EU and International markets\n are drafts), and signing in brings the customer's saved basket back. Every add on the site goes through fetch, so\n one guard covers the PDP, quick view, cards, kits and gift cards: when an add answers 422 \"sold out\", the basket is\n set back to the United Kingdom and the add is sent again; if it still fails, a throwaway basket (no cookies) is\n asked for the same item: when it takes it, the item is in stock and the shopper's basket is the problem, so its\n lines (note, attributes and codes too) move to a fresh basket and the add is sent once more. A genuinely sold-out\n item fails in the throwaway basket too and shows the same message, with the shopper's basket untouched. */\n(function () {\n 'use strict';\n if (window.__tdhqAddGuard || !window.fetch) return;\n window.__tdhqAddGuard = true;\n var nativeFetch = window.fetch.bind(window);\n var JSON_H = { 'Content-Type': 'application/json', 'Accept': 'application/json' };\n function isAdd(input, init) {\n var u = typeof input === 'string' ? input : (input && input.url) || '';\n return /\\/cart\\/add(\\.js)?(\\?|$)/.test(u) && !!init && String(init.method || 'GET').toUpperCase() === 'POST';\n }\n function soldOut(res) {\n if (!res || res.status !== 422) return Promise.resolve(false);\n return res.clone().json().then(function (j) {\n return /sold out/i.test((j && (j.description || j.message)) || '');\n }, function () { return false; });\n }\n function toUK() {\n var fd = new FormData();\n fd.append('form_type', 'localization');\n fd.append('utf8', '\\u2713');\n fd.append('country_code', 'GB');\n fd.append('return_to', '/cart.js');\n return nativeFetch('/localization', { method: 'POST', body: fd, redirect: 'manual', credentials: 'same-origin' }).catch(function () {});\n }\n function variantId(init) {\n var b = init && init.body;\n try {\n if (b && typeof b.get === 'function') return b.get('id') || b.get('items[][id]');\n if (typeof b === 'string') {\n if (b.charAt(0) === '{') { var j = JSON.parse(b); return j.id || (j.items && j.items[0] && j.items[0].id); }\n return new URLSearchParams(b).get('id');\n }\n } catch (e) {}\n return null;\n }\n function wantedQty(init) {\n var b = init && init.body, q = 1;\n try {\n if (b && typeof b.get === 'function') q = b.get('quantity') || 1;\n else if (typeof b === 'string' && b.charAt(0) === '{') { var j = JSON.parse(b); q = j.quantity || (j.items && j.items[0] && j.items[0].quantity) || 1; }\n else if (typeof b === 'string') q = new URLSearchParams(b).get('quantity') || 1;\n } catch (e) {}\n return Math.max(1, parseInt(q, 10) || 1);\n }\n /* true only when the shopper's basket holds NONE of this item: a refusal while it holds some is the stock limit\n (the last units are already in the basket), never a stuck basket (23 Oct 2026: a 1-in-stock coating reached 5) */\n function basketLacks(init) {\n var id = variantId(init);\n if (!id) return Promise.resolve(false);\n return nativeFetch('/cart.js', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })\n .then(function (r) { return r.json(); })\n .then(function (c) { return !(c.items || []).some(function (it) { return String(it.variant_id) === String(id); }); }, function () { return false; });\n }\n /* true when a basket with no history (no cookies) takes the quantity asked for, i.e. that much really is in stock */\n function inStockElsewhere(init) {\n var id = variantId(init);\n if (!id) return Promise.resolve(false);\n return nativeFetch('/cart/add.js', { method: 'POST', headers: JSON_H, body: JSON.stringify({ items: [{ id: Number(id), quantity: wantedQty(init) }] }), credentials: 'omit' })\n .then(function (r) { return r.ok; }, function () { return false; });\n }\n function freshBasket() {\n return nativeFetch('/cart.js', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' })\n .then(function (r) { return r.json(); })\n .then(function (old) {\n var past = '=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';\n document.cookie = 'cart' + past;\n document.cookie = 'cart' + past + '; domain=.' + location.hostname.replace(/^www\\./, '');\n var lines = (old.items || []).map(function (it) {\n var l = { id: it.variant_id, quantity: it.quantity };\n if (it.properties && Object.keys(it.properties).length) l.properties = it.properties;\n if (it.selling_plan_allocation && it.selling_plan_allocation.selling_plan) l.selling_plan = it.selling_plan_allocation.selling_plan.id;\n return l;\n });\n function addLines(list) {\n return nativeFetch('/cart/add.js', { method: 'POST', headers: JSON_H, body: JSON.stringify({ items: list }), credentials: 'same-origin' });\n }\n var restore = !lines.length ? Promise.resolve() : addLines(lines).then(function (r) {\n if (r.ok) return;\n /* one line the fresh basket cannot take must not lose the others */\n return lines.reduce(function (p, l) { return p.then(function () { return addLines([l]).catch(function () {}); }); }, Promise.resolve());\n });\n return restore.then(function () {\n var upd = {};\n if (old.note) upd.note = old.note;\n if (old.attributes && Object.keys(old.attributes).length) upd.attributes = old.attributes;\n var codes = (old.discount_codes || []).filter(function (d) { return d.applicable; }).map(function (d) { return d.code; });\n if (codes.length) upd.discount = codes.join(',');\n if (!Object.keys(upd).length) return;\n return nativeFetch('/cart/update.js', { method: 'POST', headers: JSON_H, body: JSON.stringify(upd), credentials: 'same-origin' }).catch(function () {});\n });\n });\n }\n /* THE STOCK GATE (23 Oct 2026, owner: 5 of a 1-in-stock coating went in from the product page). Shopify takes every\n oversell on this shop, so before ANY add is sent the basket is read and TdhqQty (tdhq-qty.js) is asked how many\n may still go in; over that, nothing is sent and the add answers 422 with the plain reason ('The only one we have\n is already in your basket.'), which the product page, cards and quick view already show. One line items only:\n a kit's parts are checked by its own code. */\n function oneLine(init) {\n var b = init && init.body;\n if (typeof b === 'string' && b.charAt(0) === '{') {\n try { var j = JSON.parse(b); return !(j.items && j.items.length > 1); } catch (e) { return false; }\n }\n return true;\n }\n function overStock(init) {\n var Q = window.TdhqQty, id = variantId(init);\n if (!Q || !Q.readBasket || !Q.headroom || !id || !oneLine(init)) return Promise.resolve('');\n return Q.readBasket().then(function () {\n var room = Q.headroom(String(id));\n if (room === null || room === undefined || wantedQty(init) <= room) return '';\n return (Q.reason && Q.reason(String(id), 'add')) || 'We do not have any more of this in stock.';\n }, function () { return ''; });\n }\n function refuse(msg) {\n return new Response(JSON.stringify({ status: 422, message: msg, description: msg }), { status: 422, headers: { 'Content-Type': 'application/json' } });\n }\n window.fetch = function (input, init) {\n if (!isAdd(input, init)) return nativeFetch(input, init);\n return overStock(init).then(function (why) {\n if (why) return refuse(why);\n return send(input, init);\n });\n };\n function send(input, init) {\n return nativeFetch(input, init).then(function (res) {\n return soldOut(res).then(function (stuck) {\n if (!stuck) return res;\n return toUK()\n .then(function () { return nativeFetch(input, init); })\n .then(function (res2) {\n return soldOut(res2).then(function (still) {\n if (!still) return res2;\n return basketLacks(init).then(function (lacks) {\n if (!lacks) return res2;\n return inStockElsewhere(init);\n }).then(function (real) {\n if (real !== true) return res2;\n return freshBasket().then(function () { return nativeFetch(input, init); }, function () { return res2; });\n });\n });\n }, function () { return res; });\n });\n });\n }\n})();\n\n/* ============================================================\n TDHQ CART DRAWER - assets/tdhq-cart-drawer.js\n\n Owns the slide-over basket: opening, closing, re-rendering, line\n quantity and removal, the free-delivery meter and the cross-sell rail.\n\n INTEGRATION NOTE. This script deliberately does NOT intercept\n /cart/add submissions itself. Two other places already do that with\n their own validation, busy states and failure fallbacks:\n\n - assets/tdhq-quickadd.js (quick add from a product card)\n - sections/dtc-product-main.liquid (the PDP buy form)\n\n A third interceptor would either double-post the line or fight them for\n preventDefault. Instead both of those dispatch `tdhq:cart:added` on\n document after a confirmed add, and this script listens. One owner per\n job: they own adding, this owns showing.\n ============================================================ */\n(function () {\n 'use strict';\n\n /* Shopify's JSON endpoints hand back UNSIZED originals (1500-2000px). The CDN\n resizes on a `width` query parameter, so ask for what the box needs. Any\n width already on the URL is replaced rather than duplicated. */\n /* the site's one sized-picture helper (TdhqImg, layout head) */\n function sizedImage(url, w) { return window.TdhqImg.sized(url, w); }\n\n /* WALLETS FOR THE DEVICE (22 Oct 2026, owner: no Google Pay on an iPhone). Shopify lists the shop's wallets in\n the wallet-configs attribute of its accelerated-checkout element and builds the buttons from that list, so on\n an iPhone or iPad Google Pay - and its loading placeholder - is taken out before the element is put on the\n page. Hiding a built button is not enough: Shopify sizes the row for every wallet it was given. Apple Pay is\n only ever listed where the device has it. Anything unexpected leaves Shopify's markup as it came. */\n var appleDevice = /iPhone|iPad|iPod/.test(navigator.userAgent || '') ||\n (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);\n function walletsForDevice(html) {\n if (!appleDevice || !html) { return html; }\n try {\n var tpl = document.createElement('template');\n tpl.innerHTML = html;\n var host = tpl.content.querySelector('shopify-accelerated-checkout-cart');\n if (!host) { return html; }\n var list = JSON.parse(host.getAttribute('wallet-configs') || '[]');\n var kept = list.filter(function (w) { return !w || w.name !== 'google_pay'; });\n if (!kept.length || kept.length === list.length) { return html; }\n host.setAttribute('wallet-configs', JSON.stringify(kept));\n var cells = tpl.content.querySelectorAll('.wallet-cart-grid--skeleton > li');\n if (cells.length === list.length) { cells[cells.length - 1].parentNode.removeChild(cells[cells.length - 1]); }\n return tpl.innerHTML;\n } catch (e) { return html; }\n }\n /* The basket page ships its wallets inert in a template (sections/dtc-cart.liquid); they go on the page here, and\n again after every re-render of that section (its init() calls TdhqWallets.expand - Codex cartsheet-1022). */\n function expandWallets(scope) {\n var tpls = (scope || document).querySelectorAll('template[data-tdhq-wallets]');\n for (var ti = 0; ti < tpls.length; ti++) {\n var walletTpl = tpls[ti];\n if (!walletTpl.parentNode) { continue; }\n var walletBox = document.createElement('div');\n walletBox.innerHTML = walletsForDevice(walletTpl.innerHTML);\n while (walletBox.firstChild) { walletTpl.parentNode.insertBefore(walletBox.firstChild, walletTpl); }\n walletTpl.parentNode.removeChild(walletTpl);\n }\n }\n window.TdhqWallets = { expand: expandWallets };\n expandWallets(document);\n\n var root = document.querySelector('[data-tdhq-cart-drawer]');\n if (!root || !('fetch' in window)) { return; }\n /* U.42 (9 Oct): the sheet joins the header section, as the menu and Saved sheets do. The header section is\n its own stacking context (sticky, z-index 900); while the sheet is up it is lifted to the sheet's old\n level (html.tdhq-cd-up, tdhq-header.css) and the phone tab bar - outside the section since 21 Oct - is\n lifted one above it, so the bar and the basket count riding above its edge stay in front. Moved while\n still hidden. */\n var hdrSec = document.querySelector('.tdhq-header-section');\n if (hdrSec && root.parentNode !== hdrSec) { hdrSec.appendChild(root); }\n /* Theme editor only: a header re-render throws the old section away with the sheet inside it. Park the sheet on\n as the old section goes and move it into the new one (21 Oct, Codex tabbar-body-1021). */\n document.addEventListener('shopify:section:unload', function (e) {\n if (e.target && e.target.contains && e.target.contains(root)) { document.body.appendChild(root); }\n });\n document.addEventListener('shopify:section:load', function () {\n var hs = document.querySelector('.tdhq-header-section');\n if (hs && root.parentNode !== hs) { hs.appendChild(root); }\n });\n\n var panel = root.querySelector('[data-cd-panel]');\n var itemsEl = root.querySelector('[data-cd-items]');\n var emptyEl = root.querySelector('[data-cd-empty]');\n var footEl = root.querySelector('[data-cd-foot]');\n var countEl = root.querySelector('[data-cd-count]');\n var subtotalEl = root.querySelector('[data-cd-subtotal]');\n var shipEl = root.querySelector('[data-cd-ship]');\n var shipMsgEl = root.querySelector('[data-cd-shipmsg]');\n var shipFillEl = root.querySelector('[data-cd-shipfill]');\n var recsEl = root.querySelector('[data-cd-recs]');\n var recsListEl = root.querySelector('[data-cd-recslist]');\n\n var moneyFormat = root.getAttribute('data-cd-money') || '£{{amount}}';\n var lastFocused = null;\n var lastCart = null;\n var recsLoadedFor = null;\n var lastAddedProductId = null;\n\n /* ---------------------------------------------------------------\n Money. Shopify returns cents; the shop's own money_format string\n decides separators and decimals, so honour it rather than hard-coding\n a pound sign \u2014 this theme is a white-label fork and gets reused.\n --------------------------------------------------------------- */\n function formatMoney(cents) {\n var value = (cents || 0) / 100;\n\n function withDelims(num, thousands, decimal, places) {\n var fixed = num.toFixed(places);\n var parts = fixed.split('.');\n var whole = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, thousands);\n return places > 0 && parts[1] ? whole + decimal + parts[1] : whole;\n }\n\n return moneyFormat.replace(/\\{\\{\\s*(\\w+)\\s*\\}\\}/g, function (_, name) {\n switch (name) {\n case 'amount': return withDelims(value, ',', '.', 2);\n case 'amount_no_decimals': return withDelims(value, ',', '.', 0);\n case 'amount_with_comma_separator': return withDelims(value, '.', ',', 2);\n case 'amount_no_decimals_with_comma_separator': return withDelims(value, '.', ',', 0);\n case 'amount_with_apostrophe_separator': return withDelims(value, \"'\", '.', 2);\n case 'amount_with_space_separator': return withDelims(value, ' ', ',', 2);\n case 'amount_no_decimals_with_space_separator': return withDelims(value, ' ', ',', 0);\n default: return withDelims(value, ',', '.', 2);\n }\n });\n }\n\n /* Money format strings legitimately contain entities such as £, and some\n product titles come back HTML-escaped. Everything this script renders is\n assigned with textContent, so the ONLY job here is turning an entity into the\n character it denotes.\n\n Deliberately not the usual `el.innerHTML = str; return el.value` textarea\n trick. That is safe in itself \u2014 textarea content is RCDATA, so no elements\n are constructed and nothing executes \u2014 but it puts an innerHTML assignment\n fed by server data into a file people will copy from, and the next person to\n reach for it may not be assigning into a textarea. An explicit table costs\n nothing and cannot be misused. */\n var ENTITIES = {\n amp: '&', lt: '<', gt: '>', quot: '\"', apos: \"'\", nbsp: '\u00A0',\n pound: '\u00A3', euro: '\u20AC', yen: '\u00A5', cent: '\u00A2',\n reg: '\u00AE', copy: '\u00A9', trade: '\u2122',\n hellip: '\u2026', mdash: '\u2014', ndash: '\u2013',\n lsquo: '\u2018', rsquo: '\u2019', ldquo: '\u201C', rdquo: '\u201D',\n deg: '\u00B0', times: '\u00D7', minus: '\u2212'\n };\n\n /* OPTION LABELS - the rules of snippets/tdhq-option-label.liquid, for the\n lines this script draws itself (added items, recommendations). Keep the\n two in step: display only, the posted values are never changed. */\n var SIZE_CODES = {\n xsmall: 'XS', xs: 'XS', extrasmall: 'XS', small: 'S', s: 'S', medium: 'M', m: 'M',\n large: 'L', l: 'L', xlarge: 'XL', xl: 'XL', extralarge: 'XL',\n xxlarge: '2XL', xxl: '2XL', '2xl': '2XL', '2xlarge': '2XL',\n xxxlarge: '3XL', xxxl: '3XL', '3xl': '3XL', '3xlarge': '3XL',\n '4xl': '4XL', '4xlarge': '4XL', xxxxl: '4XL', '5xl': '5XL', '5xlarge': '5XL'\n };\n function optKey(name) {\n var n = String(name || '').trim().toLowerCase().replace(/color/g, 'colour')\n .split(' (ml)').join('').split('(ml)').join('').split(' (clothing)').join('').split(' (mm/inch)').join('').trim();\n if (n === 'sze' || n === 'bottle size' || n === 'bottle' || n === 'volume' || n === 'size (l)' || n === 'bottle size (ml)') { return 'size'; }\n return n;\n }\n function optName(name) {\n var n = optKey(name);\n return n.charAt(0).toUpperCase() + n.slice(1);\n }\n /* Title case word by word; a word with a digit in it (\"205L\", \"0-3\") stays\n as typed, the same rule as the Liquid snippet. */\n function titleWords(v) {\n return v.split(' ').map(function (w) {\n return /[0-9]/.test(w) ? w : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase();\n }).join(' ');\n }\n function optValue(name, value) {\n var n = optKey(name);\n var v = String(value == null ? '' : value).trim();\n var k = v.toLowerCase().replace(/[ .\\-]/g, '');\n var k2 = v.toLowerCase().replace(/ /g, '');\n if (n.indexOf('size') !== -1) {\n if (SIZE_CODES[k]) { return SIZE_CODES[k]; }\n if (/^[0-9]/.test(v) && /ml$/.test(k)) { return v.toLowerCase(); }\n if (/^[0-9]/.test(v)) {\n var lit = k2.match(/^(.*?)(litres|litre|ltr)$/);\n if (lit) { return lit[1] + 'L'; }\n }\n if (v.length > 3 && v === v.toUpperCase() && v !== v.toLowerCase()) { return titleWords(v); }\n return v;\n }\n if (k === 'mattblack') { v = 'Matt Black'; } else if (k === 'mattwhite') { v = 'Matt White'; }\n if ((v.length > 3 && v === v.toUpperCase()) || v === v.toLowerCase() ||\n (n.indexOf('colour') !== -1 && v === v.toUpperCase() && v !== v.toLowerCase())) {\n return titleWords(v);\n }\n return v;\n }\n /* Titles as the server prints them: no en/em dashes (the client's copy\n rule; the same chain as the Liquid title outputs). */\n function cleanTitle(s) {\n /* the site's one naming rule first (snippets/tdhq-name-js) */\n if (window.tdhqName) { s = window.tdhqName(s); }\n return String(s || '').split(' \\u2013 ').join(' - ').split(' \\u2014 ').join(' - ').split('\\u2014').join(' - ').split('\\u2013').join('-');\n }\n\n function optLine(pairs) {\n return (pairs || []).filter(function (o) {\n return o && o.name && o.value != null && !(o.name === 'Title' && /^Default/.test(String(o.value)));\n }).map(function (o) { return optName(o.name) + ': ' + optValue(o.name, o.value); }).join(' \\u00B7 ');\n }\n function decodeEntities(str) {\n if (str == null) { return ''; }\n str = String(str);\n if (str.indexOf('&') === -1) { return str; }\n return str.replace(/&(#x?[0-9a-f]+|\\w+);/gi, function (whole, body) {\n if (body.charAt(0) === '#') {\n var hex = body.charAt(1) === 'x' || body.charAt(1) === 'X';\n var code = parseInt(hex ? body.slice(2) : body.slice(1), hex ? 16 : 10);\n /* Reject anything outside the Unicode range or in the surrogate block;\n String.fromCodePoint throws on those and a title is not worth an\n exception that empties the whole drawer. */\n if (!isFinite(code) || code < 0 || code > 0x10FFFF || (code >= 0xD800 && code <= 0xDFFF)) {\n return whole;\n }\n return String.fromCodePoint(code);\n }\n var named = ENTITIES[body.toLowerCase()];\n return named === undefined ? whole : named;\n });\n }\n\n function money(cents) { return decodeEntities(formatMoney(cents)); }\n\n /* Published for the basket PAGE, which needs the same shop money_format to\n paint figures straight from a /cart/change.js payload. One implementation,\n one set of separator rules, so the drawer and the page can never disagree\n about how a price is written. */\n window.tdhqFormatMoney = money;\n\n /* THE PAYABLE FIGURE (requirement CART-01). Once the basket page's delivery\n estimator has asked Shopify for rates, every /cart/change.js answer carries\n a total_price that INCLUDES the first delivery rate (measured 2026-09-23:\n goods 540, total_price 935 with Express at 3.95) while /cart.js says 540.\n The drawer painted that figure as the Estimated total, so a quantity change\n after an estimate showed the delivery twice over. The payable figure is\n rebuilt from the parts every answer agrees on: the goods after line\n discounts, less the basket-level discounts. Published for the basket page,\n so both baskets use one rule. */\n function payable(cart) {\n if (!cart) { return 0; }\n var cut = (cart.cart_level_discount_applications || []).reduce(function (a, d) {\n return a + (d.total_allocated_amount || 0);\n }, 0);\n return (cart.items_subtotal_price != null ? cart.items_subtotal_price : cart.total_price) - cut;\n }\n window.tdhqCartPayable = payable;\n\n function reduceMotion() {\n return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n\n /* A figure that moved gets the basket page's highlight, a wash behind the\n number (MOT-07): the drawer used to rebuild every line with no sign of\n which number had changed. Restarted if it is already running. */\n function setFigure(el, text) {\n if (!el || el.textContent.trim() === String(text).trim()) { return; }\n el.textContent = text;\n if (!isOpen()) { return; }\n el.classList.remove('is-changed');\n void el.offsetWidth;\n el.classList.add('is-changed');\n window.setTimeout(function () { el.classList.remove('is-changed'); }, 700);\n }\n\n /* COMPARE-AT PRICES (audit UNI-17). A sale line shows the old price struck\n through over the price in the sale red, as the card and the product page\n do. /cart.js carries no compare-at price, so the drawer learns it the way\n it learns stock ceilings: from Liquid (each server-rendered line states\n its variant's compare-at price), and for a line added later from the\n product's own .js, which does carry it. Kept for the session. */\n var WAS_KEY = 'tdhq:was';\n var wasMap = {};\n var wasAsked = {};\n try { wasMap = JSON.parse(window.sessionStorage.getItem(WAS_KEY) || '{}') || {}; } catch (e) { wasMap = {}; }\n function keepWas() {\n try { window.sessionStorage.setItem(WAS_KEY, JSON.stringify(wasMap)); } catch (e) {}\n }\n function seedWas(scope) {\n var lines = (scope || document).querySelectorAll('[data-cd-item][data-cd-was]');\n for (var i = 0; i < lines.length; i++) {\n var k = (lines[i].getAttribute('data-key') || '').split(':')[0];\n if (k) { wasMap[k] = parseInt(lines[i].getAttribute('data-cd-was'), 10) || 0; }\n }\n keepWas();\n }\n function wasOf(item) {\n var id = String(item.id);\n if (Object.prototype.hasOwnProperty.call(wasMap, id)) { return wasMap[id] || 0; }\n askWas(item.handle);\n return 0;\n }\n function askWas(handle) {\n if (!handle || wasAsked[handle]) { return; }\n wasAsked[handle] = true;\n fetch('/products/' + encodeURIComponent(handle) + '.js', { headers: { 'Accept': 'application/json' } })\n .then(function (r) { return r.ok ? r.json() : null; })\n .then(function (p) {\n if (!p || !p.variants) { return; }\n p.variants.forEach(function (v) { wasMap[String(v.id)] = v.compare_at_price || 0; });\n keepWas();\n if (lastCart && itemsEl) {\n lastCart.items.forEach(function (item) {\n var li = itemsEl.querySelector('[data-cd-item][data-key=\"' + esc(item.key) + '\"]');\n if (li) { paintWas(li.querySelector('.tdhq-cd__money'), item); }\n });\n }\n })\n .catch(function () {});\n }\n function paintWas(box, item) {\n if (!box) { return; }\n var price = box.querySelector('.tdhq-cd__price');\n var s = box.querySelector('.tdhq-cd__was');\n /* struck: the compare-at price on a sale, or the price before an automatic\n discount (the kit's Buy X get Y), whichever is larger */\n var unit = wasOf(item);\n var wasLine = unit > (item.original_price || item.price || 0) ? unit * item.quantity : 0;\n if ((item.original_line_price || 0) > (item.final_line_price || 0) && item.original_line_price > wasLine) { wasLine = item.original_line_price; }\n if (wasLine > (item.final_line_price || 0)) {\n if (!s) {\n s = document.createElement('s');\n s.className = 'tdhq-cd__was';\n var sr = document.createElement('span');\n sr.className = 'tdhq-visually-hidden';\n sr.textContent = 'Was ';\n s.appendChild(sr);\n var v = document.createElement('span');\n v.setAttribute('data-cd-was-val', '');\n s.appendChild(v);\n box.insertBefore(s, price);\n }\n s.querySelector('[data-cd-was-val]').textContent = money(wasLine);\n if (price) { price.classList.add('tdhq-cd__price--sale'); }\n } else {\n if (s) { s.remove(); }\n if (price) { price.classList.remove('tdhq-cd__price--sale'); }\n }\n }\n\n /* The last product the shopper looked at, from the recently viewed list the\n product page keeps. Seeds the suggestions when the basket is empty. */\n function recentProductId() {\n try {\n var list = JSON.parse(window.localStorage.getItem('dtc_recent_v1')) || [];\n for (var i = 0; i < list.length; i++) { if (list[i] && list[i].id) { return list[i].id; } }\n } catch (e) {}\n return null;\n }\n\n /* ---------------------------------------------------------------\n Open / close\n --------------------------------------------------------------- */\n function isOpen() { return root.classList.contains('is-open'); }\n\n /* The header basket is a real , and it stays one: with no\n JavaScript it must still go to the cart page. But WITH this script it does\n not navigate - it opens a modal - and it was announcing itself as a plain\n link to /cart, giving no hint that a dialog was about to appear and no way\n to know whether it was already open.\n\n The promise is made HERE rather than in the Liquid, because this file is\n what keeps it: markup that claims aria-haspopup=\"dialog\" while the script\n that opens the dialog failed to load is a worse lie than the plain link. */\n function cartLinks() {\n return document.querySelectorAll('[data-tdhq-cart-link]');\n }\n\n function announceDrawerControl(expanded) {\n var links = cartLinks();\n for (var i = 0; i < links.length; i++) {\n links[i].setAttribute('aria-haspopup', 'dialog');\n links[i].setAttribute('aria-controls', 'tdhqCartDrawerPanel');\n links[i].setAttribute('aria-expanded', expanded ? 'true' : 'false');\n }\n }\n announceDrawerControl(false);\n\n /* The basket link lives in the HEADER section. When the theme editor\n re-renders that section the link is a brand new element with none of the\n dialog semantics on it, and this file - which lives in the layout, not the\n section - never notices. One line to re-apply them. */\n document.addEventListener('shopify:section:load', function () {\n announceDrawerControl(isOpen());\n });\n\n function open() {\n if (isOpen()) { return; }\n lastFocused = document.activeElement;\n root.hidden = false;\n document.documentElement.classList.add('tdhq-cd-up');\n /* The panel must be laid out in its CLOSED state before `is-open` flips it,\n or the browser has no \"from\" value and the transform snaps into place\n instead of sliding. Reading offsetHeight forces that layout synchronously,\n which is deterministic - the double requestAnimationFrame this replaced\n was not: rAF does not run in a background tab, and this function has\n already put `tdhq-cd-open` on , so a callback that never arrives\n left the page scroll-locked behind a drawer that never appeared. */\n void root.offsetHeight;\n root.classList.add('is-open');\n document.documentElement.classList.add('tdhq-cd-open');\n document.body.classList.add('tdhq-cd-open');\n var closeBtn = root.querySelector('[data-cd-close]:not(.tdhq-cd__scrim)');\n if (closeBtn && closeBtn.focus) { closeBtn.focus(); }\n announceDrawerControl(true);\n express(lastCart ? lastCart.item_count : Number((countEl && countEl.textContent) || 0));\n }\n\n /* EXPRESS CHECKOUT (21 Oct 2026): Shop Pay / PayPal / Apple Pay / Google Pay, the block the basket page shows.\n It carries Shopify's wallet set-up and wakes the wallets' scripts, so it is fetched once, through the Section\n Rendering API, the first time the drawer is open with something in it, and then kept. Shopify's buttons read\n the basket when pressed, so later changes need no refetch; an empty basket only hides them. */\n var expressEl = root.querySelector('[data-cd-express]');\n var expressSlot = root.querySelector('[data-cd-express-slot]');\n var expressState = 0; /* 0 not asked, 1 asking, 2 shown, 3 shop has none */\n function express(count) {\n if (!expressEl || !expressSlot) { return; }\n if (!count) { expressEl.hidden = true; return; }\n if (expressState === 2) { expressEl.hidden = false; return; }\n if (expressState !== 0 || !isOpen()) { return; }\n expressState = 1;\n /* the basket route, and no JSON Accept header: '/?sections=' sent as JSON came back without the buttons */\n var base = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/';\n fetch(base + 'cart?sections=tdhq-express-checkout')\n .then(function (r) { return r.ok ? r.json() : null; })\n .then(function (d) {\n var html = d && d['tdhq-express-checkout'];\n if (!html || html.indexOf('accelerated-checkout') === -1) { expressState = 3; return; }\n expressSlot.innerHTML = walletsForDevice(html);\n expressState = 2;\n expressEl.hidden = !(lastCart ? lastCart.item_count : count);\n })\n .catch(function () { expressState = 0; });\n }\n\n function close() {\n if (!isOpen()) { return; }\n root.classList.remove('is-open');\n document.documentElement.classList.remove('tdhq-cd-open');\n document.body.classList.remove('tdhq-cd-open');\n /* keep it in the tree until the slide-out finishes, then hide it from\n assistive tech and tab order */\n window.setTimeout(function () {\n if (!isOpen()) { root.hidden = true; document.documentElement.classList.remove('tdhq-cd-up'); }\n }, window.TdhqMotion && window.TdhqMotion.calm() ? 0 : 340);\n if (lastFocused && lastFocused.focus) { lastFocused.focus(); }\n lastFocused = null;\n announceDrawerControl(false);\n }\n\n /* ---------------------------------------------------------------\n Rendering\n --------------------------------------------------------------- */\n /* Lines Liquid told us cannot be shipped. Seeded from the server-rendered\n drawer on boot and re-applied on every re-render, because /cart.js does not\n report availability and asking per variant would cost a request per line.\n A line added during the session is one the shopper just added successfully,\n so this set never needs to grow on its own. */\n var goneKeys = {};\n Array.prototype.forEach.call(\n (root && root.querySelectorAll('[data-cd-item][data-cd-gone]')) || [],\n function (el) { goneKeys[el.getAttribute('data-key')] = true; }\n );\n\n function lineNode(item) {\n var li = document.createElement('li');\n li.className = 'tdhq-cd__item';\n li.setAttribute('data-cd-item', '');\n li.setAttribute('data-key', item.key);\n if (goneKeys[item.key]) {\n li.className += ' tdhq-cd__item--gone';\n li.setAttribute('data-cd-gone', '');\n }\n\n var thumb = document.createElement('a');\n thumb.className = 'tdhq-cd__thumb';\n thumb.href = item.url;\n thumb.tabIndex = -1;\n thumb.setAttribute('aria-hidden', 'true');\n if (item.image) {\n var img = document.createElement('img');\n /* the line's box is 62px on a phone and 74px from 600px: the browser\n takes the file its screen needs (240 covers the phone at 3x) */\n img.sizes = '(max-width: 599px) 62px, 74px';\n img.srcset = sizedImage(item.image, 80) + ' 80w, ' + sizedImage(item.image, 160) + ' 160w, ' + sizedImage(item.image, 240) + ' 240w';\n img.src = sizedImage(item.image, 240);\n img.alt = '';\n img.loading = 'lazy';\n img.setAttribute('data-tdhq-fit', 'thumb');\n thumb.appendChild(img);\n }\n li.appendChild(thumb);\n\n var info = document.createElement('div');\n info.className = 'tdhq-cd__info';\n\n var name = document.createElement('a');\n name.className = 'tdhq-cd__name';\n name.href = item.url;\n name.textContent = cleanTitle(decodeEntities(item.product_title || item.title));\n info.appendChild(name);\n\n /* The options as the product page prints them (\"Size: 500ml\"), from the\n line's own options_with_values; the raw variant title only if a\n response ever lacks them. */\n var vTitle = optLine(item.options_with_values || []) ||\n ((item.variant_title && item.variant_title.indexOf('Default') === -1) ? item.variant_title : '');\n if (vTitle) {\n var v = document.createElement('p');\n v.className = 'tdhq-cd__variant';\n v.textContent = decodeEntities(vTitle);\n info.appendChild(v);\n }\n\n /* A line on a plan (the monthly Trade Membership) names the plan, as the\n Liquid render and checkout do, and keeps its quantity: one membership\n per account, so it gets the quantity box without - and +. */\n var onPlan = !!(item.selling_plan_allocation && item.selling_plan_allocation.selling_plan);\n if (onPlan) {\n var sp = document.createElement('p');\n sp.className = 'tdhq-cd__variant';\n sp.textContent = decodeEntities(item.selling_plan_allocation.selling_plan.name || '');\n info.appendChild(sp);\n }\n\n /* The line's own properties, as snippets/tdhq-line-props prints them (U.50): a gift card's recipient,\n send date and message. Keys starting with \"_\" are Shopify's own. */\n var props = item.properties || {};\n Object.keys(props).forEach(function (k) {\n var val = props[k] == null ? '' : String(props[k]).trim();\n if (!k || k.charAt(0) === '_' || !val) { return; }\n if (k === 'Send on' && /^\\d{4}-\\d{2}-\\d{2}$/.test(val)) {\n var dp = val.split('-');\n val = parseInt(dp[2], 10) + ' ' + ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][parseInt(dp[1], 10) - 1] + ' ' + dp[0];\n }\n var pp = document.createElement('p');\n pp.className = 'tdhq-cd__variant tdhq-lineprop';\n var pk = document.createElement('span');\n pk.className = 'tdhq-lineprop__k';\n pk.textContent = k + ':';\n pp.appendChild(pk);\n pp.appendChild(document.createTextNode(' ' + val));\n info.appendChild(pp);\n });\n\n /* Price per litre or kilo, as the Liquid render writes it with\n unit_price_with_measurement: price, \"/\", the reference amount when it\n is not 1, the unit (\"\u00A32.19/100ml\", \"\u00A321.90/L\"). */\n var um = item.unit_price_measurement;\n if (um && item.unit_price != null && um.reference_unit) {\n var up = document.createElement('p');\n up.className = 'tdhq-cd__unit';\n var upSr = document.createElement('span');\n upSr.className = 'tdhq-visually-hidden';\n upSr.textContent = 'Unit price ';\n up.appendChild(upSr);\n var unitName = um.reference_unit === 'l' ? 'L' : um.reference_unit;\n up.appendChild(document.createTextNode(money(item.unit_price) + '/' + (um.reference_value && um.reference_value !== 1 ? um.reference_value : '') + unitName));\n info.appendChild(up);\n }\n\n var row = document.createElement('div');\n row.className = 'tdhq-cd__row';\n\n /* Carry the ceiling onto the rebuilt row. The server's