/* promo: the promotions carousel at the top of the trade dashboard (SPEC-FEATURES-OCT.md, PR). Part of
   trade-dashboard-ext.css. Slides stack in one grid cell; ext/promo.js adds .td-promo--js and fades between them
   (no fade with prefers-reduced-motion). Text sits in a box over the image on wide screens (light text on a dark box
   or dark text on a light box, so it reads on any image) and under the image on phones. With two or more banners the
   previous / next arrows sit over the picture's left and right edges, on its vertical middle (--td-promo-mid, set by
   ext/promo.js; phones put the text under the picture): round, the control height (--td-ctl: 40 px, 44 px on touch
   screens), white with a shadow so they show on any picture. The dots sit under the banner: 24 px targets with a mouse,
   44 px on touch screens. The text box moves in from the left arrow on wide screens. */
.td-promo{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--td-card);border:1px solid var(--td-line);border-radius:var(--td-r);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.td-promo-slides{display:grid;touch-action:pan-y}
.td-promo-slide{grid-area:1/1;position:relative;min-width:0}
.td-promo--js .td-promo-slide{visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .45s}
.td-promo--js .td-promo-slide.is-current{visibility:visible;opacity:1;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){.td-promo--js .td-promo-slide,.td-promo--js .td-promo-slide.is-current{transition:none}}
.td-promo-pic,.td-promo-pic img,.td-promo-media{display:block;width:100%}
.td-promo-pic img{height:auto;max-width:100%}
/* The space an image takes before it loads comes from its ratio, inline on the img (storefront.server.ts slideHtml). */
.td .td-promo-media:focus-visible{outline:3px solid var(--td-primary);outline-offset:-3px}
.td-promo-text{position:absolute;left:24px;bottom:24px;max-width:min(520px,calc(100% - 48px));padding:14px 18px;border-radius:12px}
.td .td-promo--light{background:rgba(0,0,0,.68);color:#fff}
.td .td-promo--dark{background:rgba(255,255,255,.93);color:var(--td-ink)}
.td .td-promo-title{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 4px;overflow-wrap:anywhere}
.td .td-promo-sub{font-size:15px;margin:0 0 4px;overflow-wrap:anywhere}
.td .td-promo-btn{margin-top:8px}
.td .td-promo--light .td-promo-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.td .td-promo--dark .td-promo-btn:focus-visible{outline:3px solid var(--td-ink);outline-offset:2px}
.td-promo-ctl{order:2;display:flex;justify-content:center;padding:8px}
@media (min-width:750px){.td [data-td-promo] .td-promo-text{left:calc(var(--td-ctl) + 24px);max-width:min(520px,calc(100% - 2 * var(--td-ctl) - 48px))}}
.td-promo-b{position:absolute;z-index:1;top:var(--td-promo-mid,calc(50% - 20px));transform:translateY(-50%);width:var(--td-ctl);height:var(--td-ctl);display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--td-ink);box-shadow:0 1px 3px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.15);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.td-promo-prev{left:12px}.td-promo-next{right:12px}
@media (hover:hover){.td-promo-b:hover{background:#fff;color:var(--td-primary)}}
.td .td-promo-b:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.td .td-promo-dot:focus-visible{outline:3px solid var(--td-primary);outline-offset:-2px}
.td-promo-dots{display:flex;flex-wrap:wrap;justify-content:center;min-width:0}
.td-promo-dot{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.td-promo-dot span{display:block;width:10px;height:10px;border-radius:99px;border:2px solid #767676;background:transparent;transition:width .2s}
.td-promo-dot[aria-current="true"] span{width:22px;background:var(--td-primary);border-color:var(--td-primary)}
@media (prefers-reduced-motion:reduce){.td-promo-dot span{transition:none}}
@media (max-width:749px){
  .td-promo-text{position:static;max-width:none;border-radius:0;padding:12px 14px}
  .td .td-promo--light{background:var(--td-ink)}
  .td .td-promo--dark{background:#fff}
  .td .td-promo-title{font-size:18px}
  .td-promo-prev{left:8px}.td-promo-next{right:8px}
  /* A phone image has its own ratio (set on the picture by the server); it beats the desktop ratio inline on the img. */
  .td .td-promo-pic--m img{--aspect-ratio:var(--td-promo-ar-m)!important;aspect-ratio:var(--td-promo-ar-m)!important}
}
/* Touch screens (MR touch, 06 Oct 2026): each dot is a 44 x 44 px target, 8 px apart. */
@media (pointer:coarse){.td-promo-ctl{padding:4px 8px}.td-promo-dots{gap:8px}.td-promo-dot{width:44px;height:44px}}
/* Dispatch and stock (SPEC-FEATURES-OCT.md, CE). Part of trade-dashboard-ext.css. Colours: the dashboard's own green
   and amber pairs (WCAG AA on their backgrounds, test-contrast). */

/* The cut-off line (snippets/trade-dashboard-dispatch.liquid): green before the cut-off, plain after it. */
.td .td-dispatch{display:flex;gap:10px;align-items:flex-start;background:#e9f5e6;color:#2c6b21;border:1px solid #cfe6c9;border-radius:var(--td-r);padding:10px 14px;min-width:0}
.td .td-dispatch[data-state="next"]{background:#fff;color:var(--td-ink);border-color:var(--td-line)}
.td .td-dispatch[hidden]{display:none}
.td .td-dispatch-icon{flex:0 0 auto;display:flex;margin-top:1px}
.td .td-dispatch-line{margin:0;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.td .td-dispatch-line b{font-weight:700}
.td .td-dispatch-note{display:block;font-size:12.5px;font-weight:400}

/* Stock clarity on the pad (trade-dashboard.js, region CE-pad): the chip in each line, the summary above the button. */
.td .td-pad-chip{margin-right:4px;vertical-align:1px}
.td .td-pad-foot .td-pad-sum{flex:1 1 100%;margin:0;font-size:12.5px;line-height:1.45;color:#c9c9c9}
.td .td-pad-foot .td-pad-sum.warn{color:#f6c66b;font-weight:600}
.td .td-pad-foot .td-pad-sum[hidden]{display:none}
/* Catalogue filters (SPEC-FEATURES-OCT.md, CX): the filter bar on the catalogue card, built by trade-dashboard.js
   (region CX). Menus of toggle chips per facet, In stock only, Sort and Clear filters. Owner: CX. The buttons are the control token tall
   (--td-ctl: 40 px, 44 px on touch), as is the Sort select (trade-dashboard.css: one look for every select). */
.td-cxbar{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.td-cat--none>.td-cxbar{display:none}
.td-cxf{position:relative}
.td .td-cxf-btn,.td .td-cxchip{display:inline-flex;align-items:center;gap:6px;min-height:var(--td-ctl);padding:6px 12px;border:1px solid #c9c9c9;border-radius:99px;background:#fff;color:var(--td-ink);font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;margin:0}
.td .td-cxf-btn[aria-expanded="true"]{border-color:var(--td-primary);box-shadow:0 0 0 3px rgba(167,58,100,.12)}
.td-cxf-chev{transition:transform .15s ease-out}.td-cxf-btn[aria-expanded="true"] .td-cxf-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.td-cxf-chev{transition:none}}
.td .td-cxf-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--td-primary);color:#fff;font-size:11.5px;font-weight:700}
.td-cxf-pop{position:absolute;z-index:5;top:calc(100% + 6px);left:0;width:max-content;min-width:180px;max-width:min(440px,calc(100vw - 40px));max-height:300px;overflow:auto;display:flex;flex-wrap:wrap;gap:6px;padding:10px;background:#fff;border:1px solid var(--td-line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14)}
.td-cxf-pop.is-up{top:auto;bottom:calc(100% + 6px)} /* no room above the cart bar: opens upward (trade-dashboard.js fitPopup) */
.td .td-cxchip{font-weight:500}
.td .td-cxchip-n{color:var(--td-mut);font-weight:600;font-variant-numeric:tabular-nums}
.td .td-cxchip[aria-pressed="true"]{background:var(--td-primary);border-color:var(--td-primary);color:#fff}
.td .td-cxchip[aria-pressed="true"] .td-cxchip-n{color:#fff}
@media (hover:hover){.td .td-cxchip[aria-pressed="false"]:hover,.td .td-cxf-btn:hover{border-color:var(--td-primary);color:var(--td-primary)}}
.td .td-cxf-btn:focus-visible,.td .td-cxchip:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
.td .td-cxsort{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--td-mut)}
.td .td-cxclear{margin-left:2px}
.td [data-td-cat-rows][aria-busy="true"]{opacity:.55;transition:opacity .2s}
@media (max-width:600px){
  .td-cxf{position:static}
  .td-cxf-pop{left:0;right:0;width:auto;max-width:none}
}
/* foryou: the "For you" card (SPEC-FEATURES-OCT.md, RE), a part of trade-dashboard-ext.css. Owner: RE.
   The stepper reuses the catalogue's .td-qs styles; everything else is scoped to .td-fy. */
.td-fy .td-fy-sub{margin-bottom:4px}
.td-fy .td-fy-tabs{margin-top:8px}
.td-fy .td-fy-h3{font-size:14px;margin:10px 0 0}
.td-fy-grid{position:relative;list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px} /* positioned: the strip's hidden labels stay inside its sideways scroller on phones */
.td-fy-item{display:flex;flex-direction:column;gap:6px;min-width:0;border:1px solid var(--td-line);border-radius:12px;padding:10px;background:#fff}
.td-fy-item[hidden]{display:none}
/* "Show n products" (TD.showMenu, styled as .td-show in trade-dashboard.css) under the lists, round 4 */
.td .td-fy-show{margin-top:12px}
.td-fy .td-fy-link{display:block;color:var(--td-ink);text-decoration:none;border-radius:9px}
.td-fy .td-fy-link:focus-visible{outline:2px solid var(--td-primary);outline-offset:2px}
.td-fy-img{display:block;aspect-ratio:1/1;border-radius:9px;background:#f4f4f4;overflow:hidden;margin-bottom:6px}
.td-fy-img img{display:block;width:100%;height:100%;object-fit:contain}
.td-fy-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
@media (hover:hover){.td-fy .td-fy-link:hover .td-fy-t{color:var(--td-primary);text-decoration:underline}}
.td-fy-sku{font-size:12px;color:var(--td-mut);overflow-wrap:anywhere}
.td-fy-price{font-size:13px;line-height:1.35}
.td-fy-price b{font-size:15px}
.td-fy-k{color:var(--td-mut)}
.td-fy .td-fy-pb{display:block;font-size:12px;font-weight:600;color:var(--td-emer)}
.td-fy .td-tag{align-self:flex-start}
.td-fy .td-fy-var{width:100%;min-width:0}
.td-fy .td-fy-qs{display:grid;width:100%;margin-top:auto}
.td-fy .td-fy-qs .td-qs-row{flex-wrap:wrap}
.td-fy .td-fy-qs .td-qs-add{flex:1 1 72px;min-width:72px}
.td-fy .td-qs-in:disabled{color:#9a9a9a}
.td-fy .td-fy-rule{margin:5px 0 0;font-size:12px;line-height:1.35;color:var(--td-mut)}
.td-fy .td-fy-rule:empty{display:none}
.td-fy .td-fy-rule.td-fy-hint{background:#fdf3dd;color:#8a5a17;font-weight:600;border-radius:6px;padding:1px 6px}
/* loading skeleton (aria-hidden; the status line says "Loading suggestions…") */
.td-fy-sk{pointer-events:none}
.td-fy-sk span{display:block;border-radius:8px;background:linear-gradient(90deg,#eeeeee 25%,#f6f6f6 50%,#eeeeee 75%);background-size:200% 100%;animation:td-fy-shine 1.4s ease-in-out infinite}
.td-fy-sk .td-fy-sk-img{aspect-ratio:1/1}
.td-fy-sk .td-fy-sk-l{height:12px}
.td-fy-sk .td-fy-sk-s{width:60%}
.td-fy-sk .td-fy-sk-b{height:36px;margin-top:4px}
@keyframes td-fy-shine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.td-fy-sk span{animation:none}}
/* phones: one row of cards that scrolls sideways inside the card (the page itself never scrolls sideways) */
@media (max-width:600px){
  .td-fy-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(188px,74%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px}
  .td-fy-item{scroll-snap-align:start}
}
/* Certificates (SPEC-FEATURES-OCT.md, CE). Part of trade-dashboard-ext.css: the card (snippets/
   trade-dashboard-certs.liquid), the order panel's button, and the print-only pack (assets/ext/certs.js). */

.td .td-certs-bar{margin-top:8px}
/* The status is a <span> (themes hide p:empty / div:empty, which would take a live region out of the accessibility
   tree); always displayed, spaced only when it says something. */
.td .td-certs-status{display:block;margin:0;font-size:12.5px;color:var(--td-mut)}
.td .td-certs-status:not(:empty){margin:0 0 6px}
.td .td-certs-note{margin:0 0 10px;border-radius:10px;padding:10px 12px;background:#fdf3dd;color:#6e4712;border:1px solid #efd6a2;font-size:13px;font-weight:500}
.td .td-certs-note[hidden]{display:none}
.td .td-certs-groups{display:grid;gap:8px}
.td .td-certs-group{border:1px solid var(--td-line);border-radius:12px;background:#fff;min-width:0}
.td .td-certs-group[hidden]{display:none}
.td .td-certs-group>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;cursor:pointer;font-weight:700;list-style:none;border-radius:12px}
.td .td-certs-group>summary::-webkit-details-marker{display:none}
.td .td-certs-group>summary::before{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:4px;transition:transform .15s}
.td .td-certs-group[open]>summary::before{transform:rotate(45deg)}
.td .td-certs-group>summary:hover{color:var(--td-primary)}
.td .td-certs-group>summary:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
.td .td-certs-gname{min-width:0;overflow-wrap:anywhere}
.td .td-certs-list{list-style:none;margin:0;padding:0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:2px 16px}
.td .td-certs-item{margin:0;min-width:0}
.td .td-certs-item[hidden]{display:none}
.td .td-certs-item a{display:block;padding:8px 0;min-height:24px;font-size:13px;overflow-wrap:anywhere}
.td .td-certs-acts{margin:4px 0 0;padding:6px 12px 12px}
.td .td-certs-order{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.td .td-certs-order-msg{font-size:12.5px;color:var(--td-mut)}
@media (prefers-reduced-motion:reduce){.td .td-certs-group>summary::before{transition:none}}

/* The print pack: hidden on screen; while a pack prints (body.td-certs-printing, set by certs.js for that print only, so
   printing the dashboard itself is unchanged), the only thing on the page, one certificate per page. */
.td-certs-print{display:none}
@media print{
  body.td-certs-printing>*:not(.td-certs-print){display:none!important}
  body.td-certs-printing>.td-certs-print{display:block;color:#000;background:#fff;font-family:inherit}
  .td-certs-page{break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid;margin:0;padding:0}
  .td-certs-page:last-child{break-after:auto;page-break-after:auto}
  .td-certs-page-head{margin:0 0 6mm}
  .td-certs-page-title{margin:0;font-size:14pt;font-weight:700}
  .td-certs-page-sub{margin:1mm 0 0;font-size:10pt}
  .td-certs-page-name{margin:1mm 0 0;font-size:10pt;font-weight:600}
  .td-certs-page-img{display:block;max-width:100%;max-height:230mm;margin:0 auto;object-fit:contain}
  .td-certs-page-img[hidden],.td-certs-page-miss[hidden]{display:none}
  .td-certs-page-miss{font-size:11pt}
}
/* invoices: styles for the trade dashboard (trade-dashboard-ext.css). Owner: IN (SPEC-FEATURES-OCT.md, "IN. Invoices").
   Paid orders as invoices (owner decision 06 Oct 2026): the summary bar above the table, the table (Order, Date, Net,
   VAT, Gross, the CSV button), Show more under it. The table fits its card at any width: long order names wrap, the
   amounts stay on one line, and at 600 px of card width or less each invoice is a stacked block (like the order
   history: the card is the container, so a narrow column of a wide screen stacks too). */
.td .td-inv-bar{margin:2px 0 4px}
.td .td-inv-bar[hidden]{display:none}
.td .td-inv-sum{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.td .td-inv-table .td-inv-ord b{overflow-wrap:anywhere}
.td .td-inv-table td.num{white-space:nowrap}
.td .td-inv-table .td-inv-act{width:1%;white-space:nowrap;text-align:right}
.td .td-inv-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 4px}
.td .td-inv-more[hidden]{display:none}
.td .td-inv-count{margin:0}
#td-invoices{container-type:inline-size}
@container (max-width:600px){
  #td-invoices .td-inv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* the order with its date under it and the CSV button beside them, then net / VAT / gross */
  #td-invoices .td-inv-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"ord ord act" "date date act" "net vat gross";align-items:start;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--td-line)}
  #td-invoices .td-inv-table tbody td{display:block;padding:0;border:0;min-width:0}
  #td-invoices .td-inv-table tbody td.num{text-align:left;white-space:normal;overflow-wrap:anywhere}
  /* the column name above each value; empty alt text so a screen reader, which has the column header, doesn't say it twice */
  #td-invoices .td-inv-table tbody td[data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--td-mut)}
  #td-invoices .td-inv-table tbody td:nth-child(1){grid-area:ord}
  #td-invoices .td-inv-table tbody td:nth-child(2){grid-area:date;color:var(--td-mut)}
  #td-invoices .td-inv-table tbody td:nth-child(2)::before{content:none}
  #td-invoices .td-inv-table tbody td:nth-child(3),#td-invoices .td-inv-table tbody td:nth-child(4),#td-invoices .td-inv-table tbody td:nth-child(5){margin-top:6px}
  #td-invoices .td-inv-table tbody td:nth-child(3){grid-area:net}
  #td-invoices .td-inv-table tbody td:nth-child(4){grid-area:vat}
  #td-invoices .td-inv-table tbody td:nth-child(5){grid-area:gross}
  #td-invoices .td-inv-table tbody td:nth-child(6){grid-area:act;width:auto;justify-self:end}
  #td-invoices .td-inv-table tbody td[colspan]{grid-column:1/-1}
}
/* subs: the subscription app part of the Subscriptions card (SPEC-FEATURES-OCT.md, SA). Owner: SA. */
.td-subs--trade{margin-top:16px;padding-top:12px;border-top:1px solid var(--td-line)}
.td-subs-h{margin:0;font-size:15px}
.td-subs-status{margin:8px 0 0}
.td-subs-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.td-subs-row{border:1px solid var(--td-line);border-radius:12px;padding:12px 14px;min-width:0}
.td-subs-hd{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.td-subs-what{overflow-wrap:anywhere;min-width:0}
.td-subs-what:focus{outline:2px solid var(--td-primary);outline-offset:2px;border-radius:4px}
.td-subs-meta{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere}
.td-subs-row .td-actions{margin-top:10px}
.td-subs-empty p{margin:8px 0}
.td-subs-foot{margin:12px 0 0}
.td-subs-retry{margin-top:8px}
@media (max-width:600px){.td-subs-hd{flex-direction:column;gap:4px}.td-subs-row .td-actions .td-btn{flex:1 1 auto}}
/* standing: standing orders inside the Subscriptions card (trade-dashboard-ext.css). Owner: SO, see SPEC-FEATURES-OCT.md.
   Builds on the dashboard's own pieces (.td-trow rows, .td-form fields, .td-tag, .td-note); only what they lack is here. */
.td-so{min-width:0}
.td-so-rows{list-style:none;margin:8px 0 0;padding:0}
.td-so-row .t1 b{overflow-wrap:anywhere;min-width:0}
.td-so-row .t1 .td-tag{flex-shrink:0}
.td .td-so-err{margin:6px 0 0;color:var(--td-clay);font-weight:600;font-size:12.5px;overflow-wrap:anywhere}
.td-so-confirm{display:grid;gap:8px;margin-top:8px;padding:10px 12px;border:1px dashed var(--td-clay);border-radius:12px;background:#fff8f7;max-width:520px}
.td-so-confirm p{margin:0;font-size:13px}
.td-so-held{padding-right:12px}
.td-so-f h3{margin:0}
.td-so-f input[type=date]{font:inherit;padding:9px 11px;border:1px solid #ddd;border-radius:10px;background:#fff;min-height:40px;color:var(--td-ink);width:100%}
.td .td-so-f [aria-invalid="true"]{border-color:var(--td-clay);box-shadow:0 0 0 1px var(--td-clay)}
.td-so-f select{max-width:100%}
/* Total saved with WBJ (SV), SPEC-ROUND2.md. Part of trade-dashboard-ext.css. The card keeps the KPI layout
   (.td-kpi .t / .v / .td-mut); only the error line is new. Clay on white: 5.6:1. */
.td .td-savings-err{margin:0 0 8px;color:var(--td-clay);font-weight:600;font-size:13px}
.td [data-td-savings-note]:focus{outline:none}
.td [data-td-savings-note]:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
/* The error line sits in the note's row of the KPI grid (trade-dashboard.css .td-kpi rows), so the row stays aligned. */
.td .td-kpi>.td-savings-err{grid-row:4}
/* Company logo (SV, SPEC-ROUND2.md; hero layout UX3, SPEC-ROUND3.md). Part of trade-dashboard-ext.css. Logos are shown
   whole (object-fit: contain). Hero: the first column of the welcome row (trade-dashboard.css .td-hello), 64 px high
   and at most 200 px wide (phones: 48 x 88 px), on a white tile with a 1 px border; "Add your logo" takes its place
   while the buyer may add one. Badge: 24 px in the subscriptions card. */
.td .td-logo{display:block;width:auto;height:48px;max-width:180px;object-fit:contain;object-position:left center}
.td .td-hello>.td-logo--hero,.td .td-hello>.td-logo-add{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0 16px 0 0}
.td .td-logo--hero{height:64px;max-width:200px;padding:4px;border:1px solid var(--td-line);border-radius:8px;background:#fff;object-position:center}
.td .td-logo-add{min-height:36px;white-space:nowrap;touch-action:manipulation}
.td .td-logo-add svg{flex:0 0 auto}
@media (pointer:coarse){.td .td-logo-add{min-height:44px}}
.td .td-logo--badge{float:right;height:24px;max-width:96px;margin:0 0 6px 12px}
/* The card's help eye sits in its top right corner: keep the badge clear of it. */
.td #td-subs>.td-logo--badge{margin-right:40px}
.td-logo-manage{margin-top:16px;padding-top:14px;border-top:1px solid var(--td-line)}
.td .td-logo-h{font-size:15px;margin:0 0 8px}
.td-logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.td-logo-prev{display:flex;align-items:center;min-height:56px;min-width:96px;padding:4px 8px;border:1px dashed var(--td-line);border-radius:10px;background:#fff}
.td .td-logo--prev{height:48px;max-width:200px}
.td-logo-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.td .td-logo-up{position:relative;cursor:pointer}
.td .td-logo-up:focus-within{outline:3px solid var(--td-primary);outline-offset:2px}
.td .td-logo-up.is-busy{cursor:progress;opacity:.7}
.td .td-logo-hint,.td .td-logo-note{margin:8px 0 0;font-size:13px}
/* display:block even while empty: the theme hides empty paragraphs (base.css p:empty), and a live region must stay in the page */
.td .td-logo-status{display:block;margin:6px 0 0;font-size:13px;min-height:1px}
.td .td-logo-status.is-err{color:var(--td-clay);font-weight:600}
/* Phones: the logo's slot is 88 px wide (the welcome text keeps the rest, trade-dashboard.css); "Add your logo" is a
   48 px tile there, its words on two lines. */
@media (max-width:767px){
  .td .td-logo{max-width:140px}
  .td .td-logo--hero{height:48px;max-width:88px;padding:3px}
  .td .td-hello>.td-logo--hero,.td .td-hello>.td-logo-add{margin-right:12px}
  .td .td-logo-add{width:88px;min-height:48px;padding:4px 5px;gap:3px;border-radius:10px;font-size:12px;line-height:1.25;white-space:normal;text-align:left}
  .td .td-logo-add svg{width:14px;height:14px}
  .td .td-logo-add span{min-width:0}
}
/* Deals row (DL), SPEC-ROUND2.md. Part of trade-dashboard-ext.css. Owner: DL.
   One card, a grid: the heading and a bar with the chips, View all and previous / next on the first line (the help eye
   sits top right, as on every card), then the product cards, then "Show n deals". Scoped to .td-dl.
   Round 4 (owner, 07 Oct 2026): at least two rows at every width. Tablets and computers: a grid of as many columns as
   fit, at most half as many as the deals on show (--dl-cols, ext/deals.js), so n > 2 deals make two rows or more and
   nothing scrolls sideways. Phones: two rows that scroll sideways with scroll snap inside the card (the established
   strip of this card and of For you; the page never scrolls sideways; previous / next do the same without a swipe),
   so 12 deals take two cards' height instead of six rows.
   Each card is position: relative, so its visually hidden text (.td-vh, absolutely positioned) is clipped by the row
   instead of widening the page.
   Round 3 (SPEC-ROUND3.md, DL3): the savings (a "−N%" badge on the image corner, the sale price large and bold, the
   "was" price struck through, a green "Save £X.XX" pill, "Save £Y on Q" beside Add), "Only N left" (the catalogue's
   amber tag), the volume offer line and the product type filter (round 5: the Type select). Text colours on their backgrounds, all ≥ 4.5:1:
   badge #fff on clay 5.66, pill emerald on #e9f5e6 5.14, offer line primary on #fff 6.12, "was" #6d6d6d on #fff 5.17.
   Prices use tabular figures. Chips and badges never wrap inside (nowrap); the chip groups wrap as a whole.
   Round 5 (owner, 07 Oct 2026): highlighted in the saved carts card's language (SC1: td-card--hl's brand border, its
   pink tint, an icon tile, a badge, a one-off glow the first time the card is in view, none with reduced motion), with
   "Up to N% off" (#fff on clay 5.66:1) beside the heading. The Type select is the dashboard's "Show n" select
   (td-show: 40 px, 44 px and 16 px text on touch). Under the row: a line for loading / no deals / couldn't load, then
   the Show menu and "Show more". 12 deals on show at first: before the script starts, CSS hides the rest. */
.td .td-dl.td-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:14px 16px}
.td .td-dl.td-card[hidden]{display:none}
.td-dl.td-card--hl{background:linear-gradient(180deg,#FDEFF5 0,#FFF6FA 140px,#fff 360px)}
.td-dl-head{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.td .td-dl-head>h2{margin:0;padding-right:0;font-size:17px;line-height:1.3;min-width:0}
.td-dl-ic{width:36px;height:36px;border-radius:11px;background:var(--td-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(167,58,100,.28)}
.td-dl-upto{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:800;line-height:1;letter-spacing:.01em;color:#fff;background:var(--td-clay);border-radius:99px;padding:6px 10px;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(185,58,46,.25)}
.td-dl-upto[hidden]{display:none}
.td-dl::after{content:"";position:absolute;inset:-2px;border-radius:calc(var(--td-r) + 2px);pointer-events:none;opacity:0;box-shadow:0 0 0 4px rgba(167,58,100,.35),0 0 28px 6px rgba(167,58,100,.28)}
.td-dl.td-dl--glow::after{animation:td-tplc-glow 1.2s ease-out 2}
.td-dl-bar{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.td-dl:has(>.td-help) .td-dl-bar{padding-right:40px}
.td-dl-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.td-dl-chips[hidden]{display:none}
.td .td-dl-chip{display:inline-flex;align-items:center;min-height:32px;margin:0;padding:4px 12px;border:1px solid #c9c9c9;border-radius:99px;background:#fff;color:var(--td-ink);font:inherit;font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer}
.td .td-dl-chip[aria-pressed="true"]{background:var(--td-primary);border-color:var(--td-primary);color:#fff;font-weight:600}
.td .td-dl-chip[hidden]{display:none}
@media (hover:hover){.td .td-dl-chip[aria-pressed="false"]:hover{border-color:var(--td-primary);color:var(--td-primary)}}
.td-dl-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
/* the Type select (a td-show select with its visible label) and, under the deals, "Show n deals" and "Show more" */
.td .td-dl-type{max-width:100%;min-width:0}
.td .td-dl-type[hidden]{display:none}
.td .td-dl-type select{min-width:0;max-width:240px;text-overflow:ellipsis}
.td-dl-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 0;min-width:0}
.td-dl-foot:not(:has(>:not([hidden]))){display:none}
.td .td-dl-show{margin:0}
.td .td-dl-more[hidden]{display:none}
.td .td-dl-msg{grid-column:1/-1;margin:8px 0 0;font-size:13px;color:var(--td-mut)}
.td .td-dl-msg[hidden]{display:none}
.td .td-dl-msg--bad{color:var(--td-clay);font-weight:600}
.td-dl--busy .td-dl-row{opacity:.5;transition:opacity .2s ease-out}
.td-dl-row:not([data-dl-on])>.td-dl-item:nth-child(n+13){display:none}
.td .td-dl-all{display:inline-flex;align-items:center;min-height:32px;padding:4px 6px;font-size:13px;font-weight:600;white-space:nowrap}
.td .td-dl-nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:1px solid #c9c9c9;border-radius:50%;background:#fff;color:var(--td-ink);cursor:pointer}
.td .td-dl-nav[hidden]{display:none}
.td .td-dl-nav[aria-disabled="true"]{color:#9a9a9a;border-color:#e2e2e2;cursor:default}
@media (hover:hover){.td .td-dl-nav:not([aria-disabled="true"]):hover{border-color:var(--td-primary);color:var(--td-primary)}}
/* The grid: columns of at least 220 px (about a card's width on a phone), as many as fit, never more than --dl-cols
   (each at least 1/--dl-cols of the row less the gaps). Liquid sets the first --dl-cols; the script keeps it in step. */
.td-dl-row{--dl-cols:6;grid-column:1/-1;list-style:none;margin:10px 0 0;padding:2px 2px 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(220px,calc((100% - (var(--dl-cols) - 1) * 10px) / var(--dl-cols))),1fr));gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:2px;scrollbar-width:thin}
.td-dl-item{position:relative;scroll-snap-align:start;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;min-width:0;margin:0;padding:8px;border:1px solid var(--td-line);border-radius:12px;background:#fff}
.td-dl-item[hidden]{display:none}
.td-dl-media{position:relative;display:block;width:64px;height:64px}
.td .td-dl-img{display:block;width:64px;height:64px;border-radius:9px;background:#f4f4f4;overflow:hidden}
.td-dl-img img{display:block;width:100%;height:100%;object-fit:contain}
.td-dl-info{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.td .td-dl-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;min-height:2.6em;color:var(--td-ink);font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.td .td-dl-t:hover{color:var(--td-primary);text-decoration:underline}}
.td-dl-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-size:13px;line-height:1.3}
.td-dl-now{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--td-ink)}
.td-dl-now--sale{font-size:17px;font-weight:800;letter-spacing:-.01em}
.td-dl-was{font-size:12.5px;color:var(--td-mut);font-variant-numeric:tabular-nums;text-decoration-thickness:1px}
.td-dl-save{align-self:center;display:inline-block;font-size:11.5px;font-weight:700;line-height:1.35;padding:1px 7px;border-radius:99px;background:#e9f5e6;color:var(--td-emer);white-space:nowrap;font-variant-numeric:tabular-nums}
/* the "−N%" badge sits on the image's top left corner, a white ring parts it from the photo */
.td-dl-off{position:absolute;top:-5px;left:-5px;z-index:1;font-size:11.5px;font-weight:800;line-height:1;color:#fff;background:var(--td-clay);border-radius:7px;padding:4px 5px;box-shadow:0 0 0 2px #fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.td-dl-meta,.td-dl-vol{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;min-width:0}
.td .td-dl-meta .td-tag,.td .td-dl-vol .td-tag{font-size:11.5px;padding:1px 7px}
.td-dl-vt{font-size:12px;font-weight:600;line-height:1.35;color:var(--td-primary)}
.td-dl-buy{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px;min-width:0}
.td-dl-tot{font-size:12px;font-weight:600;line-height:1.3;color:var(--td-emer);font-variant-numeric:tabular-nums}
.td .td-dl .td-dl-act{min-height:32px;margin-top:2px;padding:5px 12px;font-size:12.5px}
.td .td-dl .td-dl-buy .td-dl-act{margin-top:0}
@media (pointer:coarse){.td .td-dl-chip,.td .td-dl-all{min-height:44px}.td .td-dl-nav{width:44px;height:44px}.td .td-dl .td-dl-act{min-height:44px}
  /* 44 px targets 8 px apart: "All" chips at least 44 px wide; the 2-line title gets the rest of its 44 px as space
     above it (padding with a matching negative margin: nothing moves, and no third line peeks out under it) */
  .td .td-dl-chip{min-width:44px;justify-content:center}.td-dl-chips,.td-dl-tools{gap:8px}
  .td .td-dl-t{min-height:44px;padding-top:calc(44px - 2.6em);margin-top:calc(2.6em - 44px)}}
@media (prefers-reduced-motion:reduce){.td-dl-row{scroll-behavior:auto}.td-dl.td-dl--glow::after{animation:none}.td-dl--busy .td-dl-row{transition:none}}
/* phones: the heading on its own line, each chip group on its own lines (they wrap, so no chip is ever off screen),
   cards narrower than the row so the next one peeks in */
@media (max-width:600px){
  .td .td-dl.td-card{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:12px var(--td-gutter,16px)} /* sides: the 16 px gutter of every card on phones */
  .td .td-dl.td-card:has(>.td-help)>.td-dl-head{padding-right:40px}
  /* the badge under the heading, beside the icon */
  .td-dl-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px}
  .td-dl-head:has(>.td-dl-upto:not([hidden]))>.td-dl-ic{grid-row:1/span 2}
  .td .td-dl-head>h2,.td-dl-upto{grid-column:2;justify-self:start}
  .td .td-dl-type{display:flex;flex:1 1 100%}
  .td .td-dl-type select{flex:1 1 auto;max-width:none}
  .td-dl-bar{grid-column:1;gap:8px}
  .td-dl:has(>.td-help) .td-dl-bar{padding-right:0}
  .td-dl-chips{flex:1 1 100%}
  /* two rows filled column by column (1 above 2, 3 above 4…), so the biggest savings stay at the start; cards
     narrower than the row so the next pair peeks in */
  .td-dl-row{margin-top:2px;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:min(256px,82%);scroll-snap-type:x mandatory}
}
/* Bulk buy discounts (DS3), SPEC-ROUND3.md. Part of trade-dashboard-ext.css. The card under the spend tiers (#td-vd):
   one row per offer, the steps as chips that stay on one line each (reached ones green, as on the spend tier card),
   a progress line, and a 44 px "Add to order form" on touch screens. No motion. */
.td .td-vd-intro{margin:0 0 4px}
.td .td-vd-list{list-style:none;margin:0;padding:0}
.td .td-vd-row{padding:12px 0;border-top:1px solid var(--td-line);display:grid;gap:8px;justify-items:start}
.td .td-vd-row:first-child{border-top:0;padding-top:6px}
.td .td-vd-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%}
.td .td-vd-name{margin:0;font-size:15px;font-weight:600;line-height:1.35;min-width:0;overflow-wrap:anywhere;flex:1 1 12em}
.td .td-vd-name a{color:var(--td-ink);text-decoration:underline;text-decoration-color:var(--td-line);text-underline-offset:3px}
.td .td-vd-name a:hover{text-decoration-color:var(--td-primary)}
.td .td-vd-name a:focus-visible,.td .td-vd-add:focus-visible{outline:2px solid var(--td-primary);outline-offset:2px;border-radius:4px}
.td .td-vd-sep{font-weight:400}
.td .td-vd-end{font-size:12px;font-weight:600;color:#8a5a17;white-space:nowrap}
.td .td-vd-you{background:#fbeef3;color:var(--td-primary)}
.td .td-vd-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
.td .td-vd-step{border:1px solid var(--td-line);border-radius:99px;padding:3px 10px;background:#fff;white-space:nowrap}
.td .td-vd-step b{font-weight:700}
.td .td-vd-step.hit{background:var(--td-emer);color:#fff;border-color:var(--td-emer)}
.td .td-vd-note{margin:0;font-size:12.5px}
.td .td-vd-prog{margin:0;font-size:13px}
.td .td-vd-prog--ok{color:var(--td-emer);font-weight:600}
.td .td-vd-add{margin-top:2px}
@media (pointer:coarse){.td .td-vd-add{min-height:44px}.td .td-vd-name a{display:inline-flex;align-items:center;min-height:44px}}
/* Products to buy (VD4): "Show products (N)" opens a panel of lines (image, name, SKU, stock, price now, the bulk price
   at each step, a quantity stepper, Add to cart, and the maths for the chosen quantity). 44 px controls, 16 px in the
   quantity box (no zoom on iOS), tabular figures for money, the chevron turn is the only motion (none when reduced). */
.td .td-vd-tog{min-height:44px;padding:8px 14px;font-size:13px;gap:8px}
.td .td-vd-tog:focus-visible,.td .td-vd-cart:focus-visible,.td .td-vd-to:focus-visible,.td .td-vd-t:focus-visible,.td .td-vd-all:focus-visible{outline:2px solid var(--td-primary);outline-offset:2px}
.td .td-vd-chev{flex:0 0 auto;transition:transform .16s ease-out}
.td .td-vd-tog[aria-expanded="true"] .td-vd-chev{transform:rotate(180deg)}
.td .td-vd-prods{justify-self:stretch;width:100%;min-width:0;border:1px solid var(--td-line);border-radius:12px;background:#fcfcfc;padding:2px 14px 6px}
.td .td-vd-lines{list-style:none;margin:0;padding:0}
.td .td-vd-line{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"img info buy" "img calc calc";gap:6px 12px;padding:12px 0;border-top:1px solid var(--td-line);align-items:start}
.td .td-vd-line:first-child{border-top:0}
.td .td-vd-img{grid-area:img;display:block;width:48px;height:48px;border-radius:8px;background:#f1f1f1;overflow:hidden}
.td .td-vd-img img{display:block;width:48px;height:48px;object-fit:cover}
.td .td-vd-info{grid-area:info;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.td .td-vd-t{font-weight:600;color:var(--td-ink);overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--td-line);text-underline-offset:3px}
.td a.td-vd-t:hover{text-decoration-color:var(--td-primary)}
.td .td-vd-vt{font-weight:400}
.td .td-vd-meta{display:flex;flex-wrap:wrap;gap:0 12px;font-size:12.5px;color:var(--td-mut)}
.td .td-vd-stock--low{color:#8a5a17;font-weight:600}
.td .td-vd-unit{font-size:13px}
.td .td-vd-unit b,.td .td-vd-ea b,.td .td-vd-calc{font-variant-numeric:tabular-nums}
.td .td-vd-each{font-size:12.5px;color:var(--td-mut)}
.td .td-vd-each-l{margin-right:2px}
.td .td-vd-ea{white-space:nowrap}
.td .td-vd-ea b{color:var(--td-ink);font-weight:600}
.td .td-vd-ea.hit b{color:var(--td-emer);font-weight:700}
.td .td-vd-buy{grid-area:buy;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.td .td-vd-ql{font-size:12.5px;font-weight:600;color:var(--td-mut)}
.td .td-vd-ctl{display:flex;align-items:stretch;height:46px;border:1px solid #cfcfcf;border-radius:10px;background:#fff}
.td .td-vd-ctl:focus-within{border-color:var(--td-primary);box-shadow:0 0 0 3px rgba(167,58,100,.18)}
.td .td-vd-qb{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:44px;border-radius:9px;color:var(--td-ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.td .td-vd-qb svg{display:block;pointer-events:none}
.td .td-vd-qb:focus-visible{outline:2px solid var(--td-primary);outline-offset:-2px}
.td .td-vd-qb[aria-disabled="true"]{color:#c4c4c4;cursor:not-allowed}
@media (hover:hover){.td .td-vd-qb:not([aria-disabled="true"]):hover{background:#f7eef2;color:var(--td-primary)}}
.td .td-vd-ctl input.td-vd-in{all:unset;min-height:0;border:0;border-radius:0;background:transparent;box-sizing:border-box;width:56px;height:100%;padding:0 2px;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--td-ink);font-variant-numeric:tabular-nums;cursor:text}
.td .td-vd-cart{min-height:44px;min-width:124px;border-radius:10px;margin:0}
.td .td-vd-calc{grid-area:calc;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:13px;line-height:1.45}
.td .td-vd-tot b{font-weight:700}
.td .td-vd-was{color:var(--td-mut)}
.td .td-vd-save{display:inline-block;padding:1px 9px;border-radius:99px;background:#e6f2e4;color:#1f5419;font-weight:700}
.td .td-vd-why{color:var(--td-mut)}
.td .td-vd-nx{color:#8a2450;font-weight:600}
.td .td-vd-hint{color:#8a5a17;font-weight:600}
.td .td-vd-to{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--td-primary);border-radius:99px;background:#fff;color:var(--td-primary);font:inherit;font-weight:600;cursor:pointer}
.td .td-vd-all{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:640px){
  .td .td-vd-prods{padding:2px 10px 6px}
  .td .td-vd-line{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"img info" "buy buy" "calc calc"}
  .td .td-vd-buy{justify-content:flex-start}
  .td .td-vd-cart{flex:1 1 auto;min-width:0}
}
@media (pointer:coarse){.td .td-vd-t{display:inline-flex;align-items:center;min-height:44px}.td .td-vd-tog{min-height:44px}}
@media (prefers-reduced-motion:reduce){.td .td-vd-chev{transition:none}}
/* Your prices (PO), SPEC-ROUND3.md PO3. Part of trade-dashboard-ext.css.
   A compact strip of cards at the top of the catalogue card, then a note under catalogue prices. Contrast on the card
   tint (#fcf7f9): ink 16.4:1, muted #6d6d6d 4.9:1, primary #A73A64 5.8:1, green #2d7424 5.5:1, amber #8a5a17 5.6:1.
   Buttons keep 44 px targets with 8 px gaps; no motion except the skeleton's shine (none with reduced motion). */
.td .td-po{margin:2px 0 14px;min-width:0}
.td .td-po-h{font-size:14px;margin:0 0 6px}
.td .td-po-sk span{display:block;height:44px;border-radius:12px;background:linear-gradient(90deg,#eeeeee 25%,#f6f6f6 50%,#eeeeee 75%);background-size:200% 100%;animation:td-po-shine 1.4s ease-in-out infinite}
@keyframes td-po-shine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.td .td-po-sk span{animation:none}}
.td .td-po-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.td .td-po-card{margin:0;min-width:0;background:#fcf7f9;border:1px solid #ecd9e2;border-radius:12px;padding:10px 12px}
.td .td-po-what{margin:0 0 2px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.td .td-po-meta{margin:0;font-size:13px;color:var(--td-mut)}
.td .td-po-auto{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:13px;font-weight:600;color:var(--td-emer)}
.td .td-po-auto svg{flex:none}
.td .td-po-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
/* The code on its own line (it can be long: PETERBOROUGHPULSE20), Copy and Apply side by side under it. */
.td .td-po-code{flex:1 1 100%;min-width:0;font:600 13px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--td-ink);background:#fff;border:1px dashed var(--td-primary);border-radius:8px;padding:12px 10px;min-height:44px;display:flex;align-items:center;justify-content:center;user-select:all;overflow-wrap:anywhere}
.td .td-po .td-btn{min-height:44px}
.td .td-po .td-btn:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
.td .td-po .td-btn[aria-disabled=true]{cursor:progress}
.td .td-po-res{margin:6px 0 0;font-size:13px;font-weight:600}
.td .td-po-res.is-ok{color:var(--td-emer)}
.td .td-po-res.is-warn{color:#8a5a17}
/* "£8.00 with your 20%" under a catalogue price (the price itself is untouched). */
.td .td-po-note{display:block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.3;color:var(--td-primary);white-space:nowrap}
@media (max-width:600px){
  .td .td-po-acts .td-btn{flex:1 1 auto}
}
/* How to use your dashboard (snippets/trade-dashboard-guide.liquid, ext/guide.js). Part of trade-dashboard-ext.css.
   The dashboard's own tokens (--td-primary, --td-ink, --td-line, --td-r); the walkthrough and the spotlight sit in the
   browser's top layer / above the cart bar. Motion only without prefers-reduced-motion. */
.td-guide{position:relative;background:#fff;border:1px solid var(--td-line);border-radius:var(--td-r);box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;min-width:0;scroll-margin-top:24px}
.td-guide-hero{position:relative;display:flex;gap:16px 24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:24px 22px 22px;color:#fff;
  background:#1c1518 radial-gradient(110% 150% at 100% 0%,#6a2847 0%,#2b1621 48%,#17171a 100%);isolation:isolate}
.td-guide-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.td-guide-hero-txt{flex:1 1 320px;min-width:0}
.td .td-guide-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#f4c2d6}
.td-guide-dot{width:8px;height:8px;border-radius:50%;background:#f08cb5;box-shadow:0 0 0 0 rgba(240,140,181,.6);animation:td-g-beat 2.4s ease-out infinite}
@keyframes td-g-beat{0%{box-shadow:0 0 0 0 rgba(240,140,181,.55)}70%,100%{box-shadow:0 0 0 9px rgba(240,140,181,0)}}
.td .td-guide-hero h2{font-size:24px;line-height:1.2;margin:0 0 8px;color:#fff;letter-spacing:-.2px}
.td .td-guide-lede{margin:0;max-width:62ch;color:#ece3e7;font-size:14px}
.td .td-guide-lede a{display:inline-block;min-width:24px;padding-block:3px;margin-block:-3px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}.td .td-guide-lede a:hover{color:#f4c2d6}.td .td-guide-lede a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:2px}
.td-guide-hero-act{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.td .td-guide-start{background:#fff;color:var(--td-primary)!important;border-radius:99px;padding:10px 20px 10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease}
.td .td-guide-start:focus-visible{outline-color:#fff}
.td .td-guide-progress{margin:0;font-size:12.5px;color:#e2d6dc;min-height:1.5em}

/* tiles: numbered in page order by CSS, so a hidden tile leaves no gap */
.td-guide-grid{list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;counter-reset:td-guide}
.td-guide-tile{counter-increment:td-guide;min-width:0}
.td .td-guide-open{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;background:#fff;border:1px solid var(--td-line);border-radius:12px;overflow:hidden;position:relative;color:var(--td-ink);text-align:left;font:inherit;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}
.td .td-guide-open:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
.td-guide-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background-color:#f6f0f3;background-image:radial-gradient(rgba(167,58,100,.16) 1px,transparent 1.3px);background-size:12px 12px;border-bottom:1px solid var(--td-line)}
.td-guide-thumb img{position:absolute;left:16px;top:16px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;object-position:left top;border-radius:8px 0 0 0;background:#fff;box-shadow:0 6px 18px rgba(40,10,25,.14),0 0 0 1px rgba(0,0,0,.05);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.td-guide-tile[data-fit="contain"] .td-guide-thumb img{top:50%;height:auto;max-height:calc(100% - 32px);width:calc(100% - 16px);translate:0 -50%;object-fit:contain;border-radius:8px 0 0 8px}
.td-guide-thumb::before{content:counter(td-guide,decimal-leading-zero);position:absolute;z-index:1;left:8px;bottom:8px;font-size:12px;font-weight:800;letter-spacing:.5px;color:#fff;background:rgba(26,26,26,.86);border-radius:99px;padding:3px 8px;font-variant-numeric:tabular-nums}
.td-guide-body{display:flex;flex-direction:column;gap:3px;padding:11px 14px 14px}
.td-guide-t{font-weight:700;font-size:14.5px;line-height:1.3}
.td-guide-d{font-size:12.5px;line-height:1.45;color:var(--td-mut)}
.td-guide-seen{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--td-emer);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
@media (hover:hover){
  .td .td-guide-open:hover{transform:translateY(-2px);border-color:#e3c3d1;box-shadow:0 12px 28px rgba(80,20,45,.12)}
  .td .td-guide-open:hover .td-guide-thumb img{transform:translate(-4px,-4px)}
  .td .td-guide-start:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.32)}
}

/* the walkthrough */
.td .td-gd{border:0;padding:0;margin:auto;background:transparent;color:var(--td-ink);width:min(1100px,calc(100vw - 32px));height:min(720px,calc(100dvh - 32px));max-width:none;max-height:none;overflow:visible;overscroll-behavior:contain}
.td .td-gd::backdrop{background:rgba(18,11,15,.62);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
.td .td-gd.is-fallback{position:fixed;inset:0;z-index:1001;box-shadow:0 0 0 100vmax rgba(18,11,15,.62)}
.td .td-gd[open]{animation:td-gd-in .26s cubic-bezier(.2,.8,.2,1)}
@keyframes td-gd-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.td-gd-shell{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);height:100%;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.td-gd-stage{position:relative;overflow:auto;padding:28px;display:grid;align-items:start;justify-items:center;background:radial-gradient(70% 60% at 85% 0%,rgba(167,58,100,.45),transparent 70%),radial-gradient(50% 50% at 0% 100%,rgba(167,58,100,.18),transparent 70%),#141114;scrollbar-color:#5a4651 transparent}
.td-gd-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:16px 16px}
.td .td-gd-shot{position:relative;margin:auto 0;width:100%;border-radius:12px;overflow:hidden;background:#f7f7f7;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.td-gd-shot img{display:block;width:100%;height:auto;transition:opacity .25s ease}
.td-gd-shot img.is-loading{opacity:0}
.td-gd-shot.is-noimg{min-height:180px;background:repeating-linear-gradient(135deg,#f3eef1 0 12px,#fbf8f9 12px 24px)}
.td-gd-shot.is-noimg img{display:none}
.td-gd-spot{position:absolute;border-radius:8px;pointer-events:none;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(167,58,100,.9),0 0 0 9999px rgba(15,9,12,.5);transition:left .38s cubic-bezier(.2,.8,.2,1),top .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),height .38s cubic-bezier(.2,.8,.2,1)}
.td-gd-pins{position:absolute;inset:0}
.td .td-gd-pin{all:unset;box-sizing:border-box;position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--td-primary);color:#fff;font-size:13px;font-weight:800;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35);opacity:.82;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.td .td-gd-pin::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.td .td-gd-pin.is-on{opacity:1;transform:scale(1.16);animation:td-gd-ping 1.8s ease-out infinite}
@keyframes td-gd-ping{0%{box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 0 rgba(240,140,181,.7)}70%,100%{box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 12px rgba(240,140,181,0)}}
@media (hover:hover){.td .td-gd-pin:hover{opacity:1;transform:scale(1.12)}}
.td-gd-panel{position:relative;display:flex;flex-direction:column;min-height:0;overflow:auto;padding:24px 22px 14px}
.td-gd-head{position:relative;padding-right:48px}
.td .td-gd-eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--td-primary)}
.td .td-gd-head h2{font-size:22px;line-height:1.25;margin:0 0 6px;outline:none}
.td .td-gd-sub{margin:0;color:var(--td-mut);font-size:13.5px}
.td .td-gd-x{all:unset;box-sizing:border-box;position:absolute;top:-8px;right:-8px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#444;transition:background .2s ease}
.td .td-gd-x:focus-visible{outline:3px solid var(--td-primary);outline-offset:0}
@media (hover:hover){.td .td-gd-x:hover{background:#f4eef1;color:var(--td-primary)}}
.td-gd-bar{height:4px;border-radius:99px;background:#f1e7eb;margin:16px 0 12px;overflow:hidden}
.td-gd-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--td-primary),#d4689a);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.td-gd-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.td .td-gd-sbtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 10px;border-radius:12px;cursor:pointer;font:inherit;color:var(--td-ink);transition:background .2s ease}
.td .td-gd-sbtn:focus-visible{outline:3px solid var(--td-primary);outline-offset:-1px}
.td-gd-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;border:1.5px solid #cdbac3;color:#5d5d5d;font-variant-numeric:tabular-nums;transition:background .2s ease,color .2s ease,border-color .2s ease}
.td-gd-st{font-weight:600;font-size:14px;line-height:1.35}
.td-gd-step.is-on .td-gd-sbtn{background:#fbf1f5}
.td-gd-step.is-on .td-gd-n{background:var(--td-primary);border-color:var(--td-primary);color:#fff}
@media (hover:hover){.td-gd-step:not(.is-on) .td-gd-sbtn:hover{background:#f7f3f5}}
.td-gd-sx{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
.td-gd-sx>div{overflow:hidden;min-height:0}
.td .td-gd-sx p{margin:0;padding:2px 10px 12px 48px;color:#444;font-size:13.5px;line-height:1.55}
.td-gd-step.is-on .td-gd-sx{grid-template-rows:1fr;visibility:visible}
.td .td-gd-note{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff6e5;color:#6b4a00;font-size:13px}
.td-gd-foot{margin-top:auto;padding-top:16px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.td-gd-pager{display:flex;gap:8px;margin-left:auto}
.td .td-gd-pager .td-btn{min-width:96px;min-height:44px}
.td .td-gd-show{min-height:44px}
.td .td-gd-keys{margin:10px 0 0;font-size:12px;color:var(--td-mut)}
@media (pointer:coarse){.td .td-gd-keys{display:none}.td .td-gd-pin::after{inset:calc(50% - 22px)}} /* pins: a 44 px hit area on touch */
@media (max-width:760px){
  .td .td-gd{width:100vw;height:100dvh;max-height:100dvh;margin:0}
  .td-gd-shell{grid-template-columns:1fr;grid-template-rows:fit-content(40%) minmax(0,1fr);border-radius:0}
  .td-gd-stage{padding:14px;min-height:96px} /* a thin picture still has room for its numbered markers */
  .td-gd-panel{padding:18px 16px 0}
  .td .td-gd-head h2{font-size:19px}
  .td-gd-foot{position:sticky;bottom:0;z-index:1;background:#fff;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 14px -6px rgba(255,255,255,.95)}
  .td .td-gd-keys{display:none}
  .td-gd-pager{width:100%}
  .td .td-gd-pager .td-btn{flex:1}
  .td .td-gd-show{width:100%}
}
/* Phones: the picture row is only as tall as the picture, at most 40% of the screen; short phones at most 30%, so the
   step text gets more (ext/guide.js keeps the current step clear of the Previous / Next bar). On its side, picture and
   steps sit side by side. */
@media (max-width:760px) and (max-height:700px){
  .td-gd-shell{grid-template-rows:fit-content(30%) minmax(0,1fr)}
  .td-gd-panel{padding-top:14px}
  .td .td-gd-head h2{font-size:18px}
  .td-gd-bar{margin:10px 0 8px}
  .td-gd-foot{gap:8px;padding-top:8px}
}
@media (max-width:760px) and (max-height:500px) and (orientation:landscape){
  .td-gd-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
}
/* The page behind the open walkthrough doesn't scroll (the gutter is kept, so nothing shifts sideways) */
html:has(.td .td-gd[open]){overflow:hidden;scrollbar-gutter:stable}

/* Show me on the page: a ring round the live control, the rest dimmed, and the tip */
.td-gs{position:fixed;inset:0;z-index:1000;pointer-events:none}
.td-gs-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 3px #fff,0 0 0 7px var(--td-primary),0 0 0 100vmax rgba(18,11,15,.55);opacity:0;transition:opacity .25s ease}
.td-gs.is-in .td-gs-ring{opacity:1;animation:td-gs-glow 2s ease-out .3s infinite}
@keyframes td-gs-glow{0%{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--td-primary),0 0 0 7px rgba(240,140,181,.6),0 0 0 100vmax rgba(18,11,15,.55)}70%,100%{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--td-primary),0 0 0 20px rgba(240,140,181,0),0 0 0 100vmax rgba(18,11,15,.55)}}
.td-gs-tip{position:fixed;pointer-events:auto;width:min(360px,calc(100vw - 24px));padding:16px 16px 14px;border-radius:16px;background:#1a1a1a;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(6px);transition:opacity .25s ease .1s,transform .25s cubic-bezier(.2,.8,.2,1) .1s}
.td-gs.is-in .td-gs-tip{opacity:1;transform:none}
.td-gs-tip:focus{outline:none}
.td-gs-tip :focus-visible{outline-color:#fff!important}
.td .td-gs-k{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f4c2d6}
.td .td-gs-tip h3{margin:0 0 4px;font-size:16px;color:#fff}
.td .td-gs-tip p{margin:0;color:#e6e0e3;font-size:13.5px;line-height:1.5}
.td-gs-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.td .td-gs-acts .td-btn{min-height:44px}
.td .td-gs-acts .td-btn:not(.td-btn--ghost){background:#fff;color:var(--td-primary)!important}
.td .td-gs-acts .td-btn--ghost{background:transparent;border-color:#8c7b84;color:#fff!important}
.td-gs-tip.is-sheet{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto}

@media (prefers-reduced-motion:reduce){
  .td-guide-dot,.td .td-gd-pin.is-on,.td-gs.is-in .td-gs-ring,.td .td-gd[open]{animation:none}
  .td .td-guide-open,.td-guide-thumb img,.td .td-guide-start,.td-gd-shot img,.td-gd-spot,.td .td-gd-pin,.td-gd-bar i,.td-gd-sx,.td-gd-n,.td .td-gd-sbtn,.td-gs-ring,.td-gs-tip{transition:none}
  .td .td-guide-open:hover,.td .td-guide-open:hover .td-guide-thumb img,.td .td-guide-start:hover{transform:none}
}
@media (max-width:600px){
  .td-guide-hero{padding:20px 16px}
  .td .td-guide-hero h2{font-size:21px}
  .td-guide-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:12px;gap:10px}
  .td-guide-t{font-size:13.5px}
  .td-guide-d{display:none}
  .td-guide-hero-act,.td .td-guide-start{width:100%}
}