/* ==========================================================================================================
   TSB UI kit: one look for the main site's own pages (PODCASTS, SHOP, and MATCH next).
   Loaded by the mu-plugin tsb-ui-kit.php when a page asks for it (tsb_ui_kit_enqueue()). The page's outer
   element carries class="tsbk"; nothing here touches anything outside it, so Elementor pages are unaffected.

   Every rule starts ".tsbk:not(#_)". The :not(#_) matches every element (no element has id "_") but counts
   as an id, so the kit's rules outrank the theme's and Elementor's own button and link styles (which reach
   0,2,1 on hover) without !important. A page's own stylesheet keeps to layout; if it must adjust a kit part,
   it starts its rule the same way.

   Components, each defined once (see ui-kit/README.md):
     tokens · base · wrap · label · pills (+ --sm) · menu · tools · count · select · search · link · more ·
     note · button (--primary, --secondary) · actions (card action strip) · card · tape · tag · stamp ·
     modal · player (bottom bar) · dock (video panel) · memprice (the TSB+ price) · status (a line saying what happened) ·
     swatches (a small labelled choice, such as a colour) · title (a page heading) · pills--grid (a tidy grid of
     choices, such as sizes) · qty (a quantity stepper) · acc (an accordion) · fields (form fields a plugin prints) ·
     scale (a scale of three or five stops with one marked, such as a garment's fit) ·
     foot (the site footer on the kit's pages; tsb_ui_kit_footer() in tsb-ui-kit.php)
   Dan's decisions behind the look, 28 Sep 2026: the MATCH page's rounded pill bar (light bar, white chosen
   pill) for every filter; OZIK Bold for pill labels, buttons and the card action strip; the yellow
   highlighter for hover and "playing"; 8px card corners; the tilted blue tape only where the label says
   something real (a show's name, SALE, LAST FEW), never for what a product plainly is.
   ========================================================================================================== */

/* ---------- Tokens ---------- */
.tsbk:not(#_){
  --tsbk-ink:#2B3040;--tsbk-ink-2:#5A6070;--tsbk-ink-3:#8A90A0;--tsbk-line:#DDE1EA;--tsbk-tint:#F6F7FA;--tsbk-white:#FFFFFF;
  --tsbk-blue:#2B6EBB;--tsbk-yellow:#FFC54F;--tsbk-yellow-h:#FFD172;--tsbk-navy:#141927;--tsbk-bad:#A4262C;
  --tsbk-ozik:"OZIK","OZIK Black","Barlow",system-ui,sans-serif;                 /* OZIK Black: page and panel headings */
  --tsbk-ozik-bold:"OZIK Bold","OZIK","OZIK Black","Barlow",system-ui,sans-serif; /* pills, buttons, action strip, tape, stamp */
  --tsbk-text:"Barlow",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --tsbk-label:"Barlow Semi Condensed","Barlow",-apple-system,sans-serif;         /* small capital labels */
  --tsbk-serif:"Literata",Georgia,serif;                                           /* long reading (match reports) */
  --tsbk-r-sm:4px;--tsbk-r-card:8px;--tsbk-r-panel:12px;--tsbk-r-pill:999px;
  --tsbk-s1:4px;--tsbk-s2:8px;--tsbk-s3:12px;--tsbk-s4:16px;--tsbk-s5:24px;--tsbk-s6:32px;--tsbk-s7:48px;--tsbk-s8:64px;
  --tsbk-tap:44px;--tsbk-gutter:16px;
  --tsbk-shadow:0 8px 24px rgba(20,25,39,.10);--tsbk-shadow-pill:0 1px 3px rgba(20,25,39,.12);
}
@media (min-width:900px){.tsbk:not(#_){--tsbk-gutter:24px}}

/* ---------- Base: the kit's own reset, so the theme's defaults can't leak in ---------- */
.tsbk:not(#_){display:block;background:var(--tsbk-white);color:var(--tsbk-ink);font:500 15px/1.45 var(--tsbk-text);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;text-align:left}
.tsbk:not(#_) *,.tsbk:not(#_) *::before,.tsbk:not(#_) *::after{box-sizing:border-box}
.tsbk:not(#_) :where(h1,h2,h3,p,form,figure){margin:0;padding:0}
.tsbk:not(#_) :where(h1,h2,h3){font:inherit;color:inherit;letter-spacing:normal;text-transform:none;line-height:inherit}
.tsbk:not(#_) a{color:inherit;text-decoration:none;box-shadow:none;font:inherit}
.tsbk:not(#_) button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-transform:none;letter-spacing:normal;
  line-height:inherit;box-shadow:none;min-height:0;width:auto;height:auto;text-align:inherit;text-decoration:none}
.tsbk:not(#_) button:hover,.tsbk:not(#_) button:focus{background:none;color:inherit}
.tsbk:not(#_) img{max-width:100%;display:block;border:0;border-radius:0;box-shadow:none;height:auto}
.tsbk:not(#_) svg{display:inline-block;flex:none}
.tsbk:not(#_) [hidden]{display:none!important}
.tsbk:not(#_) :focus-visible{outline:2px solid var(--tsbk-blue);outline-offset:2px;border-radius:var(--tsbk-r-sm)}
.tsbk:not(#_) .tsbk-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Wrap: the page column ---------- */
.tsbk:not(#_) .tsbk-wrap{max-width:1200px;margin:0 auto;padding-inline:var(--tsbk-gutter)}

/* ---------- Title: a page's own heading (a product's name). OZIK Black capitals in ink, as the panel titles.
   --sm for a section's heading on the page ("You might also like"). ---------- */
.tsbk:not(#_) .tsbk-title{font:900 clamp(28px,3.4vw,40px)/1 var(--tsbk-ozik);text-transform:uppercase;color:var(--tsbk-ink);text-wrap:balance;overflow-wrap:anywhere}
.tsbk:not(#_) .tsbk-title--sm{font-size:clamp(20px,2vw,24px)}

/* ---------- Label: small capitals, blue (a card's show and date, a section's name) ---------- */
.tsbk:not(#_) .tsbk-label{font:700 12px/1.2 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase;color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-label--muted{color:var(--tsbk-ink-2)}

/* ---------- Pills: the filter row. The MATCH page's rounded bar: a light bar, the chosen pill white.
   .tsbk-pills--sm is the second row inside a group: the same thing, smaller type. Every pill is a 44px tap.
   On phones the bar runs edge to edge and scrolls sideways, fading at the right while there's more. ---------- */
.tsbk:not(#_) .tsbk-pills{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:3px;background:var(--tsbk-tint);border:1px solid var(--tsbk-line);
  border-radius:var(--tsbk-r-pill);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;vertical-align:top}
.tsbk:not(#_) .tsbk-pills::-webkit-scrollbar{display:none}
.tsbk:not(#_) .tsbk-pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tsbk-tap);padding:0 14px;border:1px solid transparent;border-radius:var(--tsbk-r-pill);
  font:700 15px/1 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;color:var(--tsbk-ink-2);white-space:nowrap}
.tsbk:not(#_) .tsbk-pill:hover{color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-pill[aria-pressed="true"]{background:var(--tsbk-white);color:var(--tsbk-ink);border-color:var(--tsbk-line);box-shadow:var(--tsbk-shadow-pill)}
.tsbk:not(#_) .tsbk-pill__n{font:600 12px/1 var(--tsbk-text);letter-spacing:0;color:var(--tsbk-ink-3)}
.tsbk:not(#_) .tsbk-pill[aria-pressed="true"] .tsbk-pill__n{color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-pill.is-empty{opacity:.45}
.tsbk:not(#_) .tsbk-pill__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.tsbk:not(#_) .tsbk-pill[aria-expanded="true"] .tsbk-pill__caret{transform:rotate(180deg)}
.tsbk:not(#_) .tsbk-pills--sm .tsbk-pill{padding:0 11px;font-size:13px}
/* Grid: the same bar holding a set choice (sizes, paper or digital) in equal cells, --n to a row (--n2 on phones), so
   the row never scrolls or wraps untidily. A choice that can't be had (sold out) is .is-out: struck through, dimmed,
   still a 44px tap, with aria-disabled="true". */
.tsbk:not(#_) .tsbk-pills--grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));width:100%;border-radius:22px;overflow:visible}
.tsbk:not(#_) .tsbk-pills--grid .tsbk-pill{justify-content:center;padding:6px 8px;white-space:normal;text-align:center;line-height:1.1}
.tsbk:not(#_) .tsbk-pill.is-out{color:var(--tsbk-ink-3)}
.tsbk:not(#_) .tsbk-pill.is-out{cursor:default}
/* The line runs past the letters, so a struck-through S or L can't be read as $ or a pound sign */
.tsbk:not(#_) .tsbk-pill.is-out .tsbk-pill__label{position:relative;text-decoration:none}
.tsbk:not(#_) .tsbk-pill.is-out .tsbk-pill__label::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:2px;margin-top:-1px;background:currentColor;border-radius:1px}
.tsbk:not(#_) .tsbk-pill.is-out[aria-pressed="true"]{color:var(--tsbk-ink-2)}
@media (max-width:759px){
  .tsbk:not(#_) .tsbk-pills{display:flex;width:calc(100% + 2 * var(--tsbk-gutter));max-width:none;margin-inline:calc(var(--tsbk-gutter) * -1);border-radius:0;border-width:1px 0;
    padding:3px var(--tsbk-gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .tsbk:not(#_) .tsbk-pills::after{content:"";flex:none;width:20px}   /* room to scroll the last pill clear of the fade */
  .tsbk:not(#_) .tsbk-pill{padding:0 12px}
  .tsbk:not(#_) .tsbk-pills--sm .tsbk-pill{padding:0 10px}
  .tsbk:not(#_) .tsbk-pills--grid{display:grid;grid-template-columns:repeat(var(--n2,var(--n,4)),minmax(0,1fr));width:100%;margin-inline:0;border-radius:22px;border-width:1px;padding:3px;
    -webkit-mask-image:none;mask-image:none}
  .tsbk:not(#_) .tsbk-pills--grid::after{content:none}
  .tsbk:not(#_) .tsbk-pills--grid .tsbk-pill{padding:6px 6px}
}

/* ---------- Menu: the list a pill opens (the PODCASTS page's "More") ---------- */
.tsbk:not(#_) .tsbk-menu{position:fixed;z-index:1000;width:240px;display:grid;padding:6px;background:var(--tsbk-white);border:1px solid var(--tsbk-line);border-radius:var(--tsbk-r-card);
  box-shadow:0 12px 32px rgba(20,25,39,.16)}
.tsbk:not(#_) .tsbk-menu__item{display:flex;align-items:center;min-height:var(--tsbk-tap);padding:0 12px;border-radius:6px;text-align:left;
  font:700 14px/1 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;color:var(--tsbk-ink-2)}
.tsbk:not(#_) .tsbk-menu__item:hover{background:var(--tsbk-tint);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-menu__item[aria-checked="true"]{background:var(--tsbk-tint);color:var(--tsbk-ink);box-shadow:inset 3px 0 0 var(--tsbk-blue)}

/* ---------- Tools: the one line under the filters. The count on the left; dropdowns and search on the right.
   While search is open it takes the whole line. ---------- */
.tsbk:not(#_) .tsbk-tools{display:flex;align-items:center;gap:2px;min-height:var(--tsbk-tap);min-width:0}
.tsbk:not(#_) .tsbk-count{flex:0 1 auto;min-width:0;margin-right:auto;padding-right:var(--tsbk-s2);font:600 14px/1.2 var(--tsbk-text);color:var(--tsbk-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsbk:not(#_) .tsbk-tools > .tsbk-select,.tsbk:not(#_) .tsbk-tools > .tsbk-search:not(.is-open){flex:none}
.tsbk:not(#_) .tsbk-tools.is-searching > :not(.tsbk-search){display:none}

/* ---------- Select: a small text dropdown. The words show the choice; the real <select> lies over them, so
   the phone's own picker opens. A choice other than the default is highlighted. ---------- */
.tsbk:not(#_) .tsbk-select{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--tsbk-tap);padding:0 10px;border-radius:var(--tsbk-r-sm);cursor:pointer;
  font:700 14px/1 var(--tsbk-text);color:var(--tsbk-ink);white-space:nowrap}
.tsbk:not(#_) .tsbk-select select{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-size:16px}
.tsbk:not(#_) .tsbk-select:focus-within{outline:2px solid var(--tsbk-blue);outline-offset:-2px}
.tsbk:not(#_) .tsbk-select__label{display:inline-block;padding:4px 6px 3px;margin:-4px -6px -3px}
.tsbk:not(#_) .tsbk-select__caret{width:10px;height:6px;color:var(--tsbk-ink-2)}
.tsbk:not(#_) .tsbk-select.is-set .tsbk-select__label{background:var(--tsbk-yellow);transform:rotate(-1.5deg)}
@media (hover:hover){.tsbk:not(#_) .tsbk-select:hover .tsbk-select__label{background:var(--tsbk-yellow);transform:rotate(-1.5deg)}}

/* ---------- Search: a magnifier that opens into a field (kit.js opens and closes it) ---------- */
.tsbk:not(#_) .tsbk-search{display:inline-flex;align-items:center;min-width:0}
.tsbk:not(#_) .tsbk-search__btn,.tsbk:not(#_) .tsbk-search__close{flex:none;display:grid;place-items:center;width:var(--tsbk-tap);height:var(--tsbk-tap);border-radius:50%;color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-search__btn:hover,.tsbk:not(#_) .tsbk-search__close:hover{background:var(--tsbk-yellow);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-search__field{display:none;flex:1;align-items:center;gap:4px;min-width:0}
.tsbk:not(#_) .tsbk-search.is-open{flex:1}
.tsbk:not(#_) .tsbk-search.is-open .tsbk-search__btn{display:none}
.tsbk:not(#_) .tsbk-search.is-open .tsbk-search__field{display:flex}
.tsbk:not(#_) .tsbk-search__input{flex:1;min-width:0;height:var(--tsbk-tap);margin:0;padding:0 16px;border:2px solid var(--tsbk-ink);border-radius:var(--tsbk-r-pill);background:var(--tsbk-white);
  color:var(--tsbk-ink);font:600 16px/1 var(--tsbk-text);box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
.tsbk:not(#_) .tsbk-search__input:focus-visible{border-color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
.tsbk:not(#_) .tsbk-search__input::placeholder{color:var(--tsbk-ink-2);opacity:1}

/* ---------- Link: a quiet text button (Show them, Clear the filters, Try again). aria-pressed makes it a toggle. ---------- */
.tsbk:not(#_) .tsbk-link{display:inline-flex;align-items:center;min-height:var(--tsbk-tap);padding:0 4px;font:700 15px/1 var(--tsbk-text);color:var(--tsbk-blue);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tsbk:not(#_) .tsbk-link:hover{background:var(--tsbk-yellow);color:var(--tsbk-ink);text-decoration:none}
/* More: a quiet line at the end of a list ("56 sold out. Show them") */
.tsbk:not(#_) .tsbk-more{margin-top:var(--tsbk-s5);text-align:center;font:600 15px/1.4 var(--tsbk-text);color:var(--tsbk-ink-2)}
/* Note: a line of plain words in place of results (nothing found, didn't load) */
.tsbk:not(#_) .tsbk-note{padding:var(--tsbk-s5) 0 0;font:600 15px/1.5 var(--tsbk-text);color:var(--tsbk-ink-2)}

/* ---------- Buttons: OZIK Bold. Primary is yellow; secondary is outlined and takes the highlighter on hover ---------- */
.tsbk:not(#_) .tsbk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding-inline:28px;border-radius:var(--tsbk-r-pill);
  font:700 16px/1 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background .15s,color .15s}
.tsbk:not(#_) .tsbk-btn__label{display:inline-block;padding:4px 6px 3px;margin:-4px -6px -3px}
.tsbk:not(#_) .tsbk-btn--primary{background:var(--tsbk-yellow);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-btn--primary:hover{background:var(--tsbk-yellow-h);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-btn--secondary{background:var(--tsbk-white);color:var(--tsbk-blue);border:1px solid var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-btn--secondary:hover{background:var(--tsbk-white);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-btn--secondary:hover .tsbk-btn__label{background:var(--tsbk-yellow);transform:rotate(-1.5deg)}
/* Small: a button inside a card (quick add). Still a 44px tap. */
/* Small: a card's button. Always exactly 44px tall, so a longer label ("Added · View basket" on a phone) wraps inside it rather than growing it. */
.tsbk:not(#_) .tsbk-btn--sm{height:var(--tsbk-tap);min-height:0;padding-inline:12px;font-size:14px;line-height:1.05;text-align:center}
/* Done: the button once it has worked, its label kept in the highlighter ("Added · View basket"). */
.tsbk:not(#_) .tsbk-btn.is-done{color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-btn.is-done .tsbk-btn__label{background:var(--tsbk-yellow);transform:rotate(-1.5deg)}
.tsbk:not(#_) .tsbk-btn[disabled]{opacity:.55;cursor:default}

/* ---------- Actions: the strip of buttons along a card's foot (LISTEN / WATCH). The label is highlighted on
   hover, and stays highlighted while that card is playing (phones have no hover). ---------- */
.tsbk:not(#_) .tsbk-actions{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));margin-top:auto;border-top:1px solid var(--tsbk-line)}
.tsbk:not(#_) .tsbk-action{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:52px;padding:0 6px;
  font:700 15px/1 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;color:var(--tsbk-blue);white-space:nowrap;cursor:pointer}
.tsbk:not(#_) .tsbk-action + .tsbk-action{border-left:1px solid var(--tsbk-line)}
.tsbk:not(#_) .tsbk-action svg{width:16px;height:16px}
.tsbk:not(#_) .tsbk-action__label{display:inline-block;overflow:hidden;text-overflow:ellipsis;padding:4px 6px;margin:-4px -6px}
.tsbk:not(#_) .tsbk-action:hover{background:none;color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-action:hover .tsbk-action__label,.tsbk:not(#_) .tsbk-action.is-playing .tsbk-action__label{background:var(--tsbk-yellow);color:var(--tsbk-ink);transform:rotate(-1.5deg)}
.tsbk:not(#_) .tsbk-action:hover svg,.tsbk:not(#_) .tsbk-action.is-playing svg{color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-action:focus-visible{outline:2px solid var(--tsbk-blue);outline-offset:-2px;border-radius:0}
.tsbk:not(#_) .tsbk-actions--muted .tsbk-action{color:var(--tsbk-ink)}               /* a locked card: Join and Log in */
.tsbk:not(#_) .tsbk-actions--muted .tsbk-action:first-child svg{color:var(--tsbk-blue)}
@media (max-width:759px){.tsbk:not(#_) .tsbk-action{min-height:56px}}

/* ---------- Card: 8px corners, the picture fills its frame, then meta, title and text ----------
   Spacing (Dan, 28 Sep 2026: "They look too cramped"): one scale, 4/8/12/16/24, and gaps that show what belongs
   together. Padding is equal on every side, 12px on phones and 16px from 760px (--tsbk-card-pad). Inside the body, 8px
   between lines (meta, title, price). A card with controls below its link (.tsbk-card__foot): the first line of the
   foot (a TSB+ price) sits 4px under the price, one group with it; the card's action (.tsbk-card__action: its button)
   is a group of its own, at least 16px below and pinned to the bottom, so any height a taller neighbour adds lands
   between the two groups, never under the button. */
.tsbk:not(#_) .tsbk-card{--tsbk-card-pad:var(--tsbk-s4);position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--tsbk-r-card);background:var(--tsbk-white);
  border:1px solid var(--tsbk-line);color:var(--tsbk-ink);transition:border-color .15s,box-shadow .15s}
.tsbk:not(#_) .tsbk-card:hover{border-color:var(--tsbk-blue);box-shadow:var(--tsbk-shadow)}
.tsbk:not(#_) .tsbk-card__media{position:relative;display:block;overflow:hidden;background:var(--tsbk-tint)}
.tsbk:not(#_) .tsbk-card__media--16x9{aspect-ratio:16/9}
.tsbk:not(#_) .tsbk-card__media--square{aspect-ratio:1/1}
.tsbk:not(#_) .tsbk-card__media--4x5{aspect-ratio:4/5}
.tsbk:not(#_) .tsbk-card__media > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tsbk:not(#_) .tsbk-card__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--tsbk-s2);padding:var(--tsbk-card-pad)}
.tsbk:not(#_) .tsbk-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:20px;font:700 12px/1.2 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase;color:var(--tsbk-blue)}
/* A card whose picture and words are one link, with controls below it that must not open the link: the link is
   .tsbk-card__link (holding the media and body), the controls go in .tsbk-card__foot after it. */
.tsbk:not(#_) .tsbk-card__link{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;color:inherit}
.tsbk:not(#_) .tsbk-card__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tsbk-s4);padding:0 var(--tsbk-card-pad) var(--tsbk-card-pad)}
.tsbk:not(#_) .tsbk-card__link + .tsbk-card__foot{margin-top:calc(var(--tsbk-s1) - var(--tsbk-card-pad))}
.tsbk:not(#_) .tsbk-card__foot > *{max-width:100%}
/* The action group: pinned to the bottom, at least 16px under the price group (4px of the foot's offset + 12px here when
   it comes first; the foot's 16px gap when a TSB+ price is above it). */
.tsbk:not(#_) .tsbk-card__action{width:100%;margin-top:auto}
.tsbk:not(#_) .tsbk-card__action:first-child{padding-top:var(--tsbk-s3)}
/* Its button: a 44px tap, but lighter in the card: a smaller label; the card's full width on phones, and from 1000px a
   set width that fits its longest label ("Added · View basket"), so the button and its done state share one footprint. */
.tsbk:not(#_) .tsbk-card__foot .tsbk-btn{width:100%;font-size:13px;letter-spacing:.04em}
@media (min-width:1000px){.tsbk:not(#_) .tsbk-card__foot .tsbk-btn{width:13.5em;max-width:100%}}
/* A TSB+ price under the price: one quiet line in the price group. The text sits at the top of a 44px tap (its spare
   height hangs into the gap below, never over the price's link above). */
.tsbk:not(#_) .tsbk-card__foot > .tsbk-memprice{min-height:0;align-items:flex-start;padding:0 0 24px;margin-bottom:calc(var(--tsbk-s4) * -1);font-size:14px;line-height:20px}
/* The TSB+ tag in a card: smaller than the price, so it sits on the price line without shouting over it. */
.tsbk:not(#_) .tsbk-card .tsbk-tag{height:16px;padding:0 5px;font-size:10px;letter-spacing:.08em}
/* Cards in a CSS grid whose link and foot line up across each row: the prices level, the feet level. Give each card
   .tsbk-card--rows (it takes two of the grid's rows, shared with its neighbours). The foot fills its row, so its action
   group (margin-top:auto) sits at the very bottom. */
.tsbk:not(#_) .tsbk-card--rows{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.tsbk:not(#_) .tsbk-card--rows > .tsbk-card__link{grid-row:1}
.tsbk:not(#_) .tsbk-card--rows > .tsbk-card__foot{grid-row:2}
/* The title: balanced lines (no one-word last line), 1.3 line height. Its words take the highlighter when the card (or
   the title's own link) is pointed at. */
.tsbk:not(#_) .tsbk-card__title{font:700 17px/1.3 var(--tsbk-text);color:var(--tsbk-ink);text-wrap:balance;overflow-wrap:anywhere}
.tsbk:not(#_) .tsbk-card__title > *{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px;margin:0 -2px}
.tsbk:not(#_) a.tsbk-card:hover .tsbk-card__title > *,.tsbk:not(#_) .tsbk-card__link:hover .tsbk-card__title > *,.tsbk:not(#_) .tsbk-card__title a:hover{background:var(--tsbk-yellow);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-card__text{font:500 14px/1.5 var(--tsbk-text);color:var(--tsbk-ink-2);overflow-wrap:anywhere;text-wrap:pretty}
@media (max-width:759px){
  .tsbk:not(#_) .tsbk-card{--tsbk-card-pad:var(--tsbk-s3)}
  .tsbk:not(#_) .tsbk-card__title{font-size:16px}
}

/* ---------- Tape: the tilted blue label with yellow type. Only where the words carry news: a show's name, SALE, LAST FEW. ---------- */
.tsbk:not(#_) .tsbk-tape{display:inline-block;padding:4px 7px 3px;background:var(--tsbk-blue);color:var(--tsbk-yellow);font:700 13px/1 var(--tsbk-ozik-bold);letter-spacing:.02em;
  text-transform:uppercase;transform:rotate(-2deg);transform-origin:left center;white-space:nowrap}
/* The tape at the start of a card's label line hangs into the margin by its own left padding, so its first letter lines
   up with the title under it (Dan, 30 Sep 2026: "nudge the blue chip just outside the left hand margin, so the first
   letter (not the blue box) is in line with the article title"; then, for every page: yes). READ, PODCASTS, episode and
   article pages. */
.tsbk:not(#_) .tsbk-card__meta > .tsbk-tape:first-child{margin-left:-7px}
/* Tag: a small flat yellow marker in a label line (TSB+) */
.tsbk:not(#_) .tsbk-tag{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--tsbk-r-sm);background:var(--tsbk-yellow);color:var(--tsbk-ink);
  font:700 11px/1 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase}
/* Stamp: "Sold out" pressed over a picture's corner. The one thing allowed to sit on artwork. Put it inside .tsbk-card__media. */
.tsbk:not(#_) .tsbk-stamp{position:absolute;top:10px;left:8px;z-index:1;display:inline-block;padding:5px 8px 4px;border:2px solid var(--tsbk-ink);border-radius:3px;background:var(--tsbk-white);
  color:var(--tsbk-ink);font:700 12px/1 var(--tsbk-ozik-bold);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-6deg);transform-origin:left top;box-shadow:0 2px 6px rgba(20,25,39,.18)}
@media (max-width:759px){.tsbk:not(#_) .tsbk-stamp{top:8px;left:6px;font-size:11px;padding:4px 6px 3px}}

/* ---------- Member price: what a TSB+ member pays, for someone who isn't one. A button: it opens the join panel.
   The amount, then the yellow tag; the amount takes the highlighter on hover. ---------- */
.tsbk:not(#_) .tsbk-memprice{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-height:var(--tsbk-tap);padding:0;text-align:left;
  font:700 15px/1.2 var(--tsbk-text);color:var(--tsbk-ink);cursor:pointer}
.tsbk:not(#_) .tsbk-memprice__amt{display:inline-block;padding:2px 4px;margin:-2px -4px}
.tsbk:not(#_) .tsbk-memprice:hover{color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-memprice:hover .tsbk-memprice__amt{background:var(--tsbk-yellow);transform:rotate(-1.5deg)}
/* ---------- Status: one line saying what just happened (Added, or why not). .is-ok, .is-error ---------- */
.tsbk:not(#_) .tsbk-status{font:600 14px/1.4 var(--tsbk-text);color:var(--tsbk-ink-2);overflow-wrap:anywhere}
.tsbk:not(#_) .tsbk-status:empty{display:none}
.tsbk:not(#_) .tsbk-status.is-ok{color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-status.is-error{color:var(--tsbk-bad)}
.tsbk:not(#_) .tsbk-status a{display:inline-flex;align-items:center;min-height:var(--tsbk-tap);color:var(--tsbk-blue);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tsbk:not(#_) .tsbk-status a:hover{background:var(--tsbk-yellow);color:var(--tsbk-ink);text-decoration:none}

/* ---------- Swatches: a small labelled choice of a few things, such as a shirt's colours. A group of buttons,
   each 44px, aria-pressed on the chosen one; a picture swatch (an img, with the thing's name as aria-label) or, where
   the pictures can't tell them apart, a word swatch (--text). The label line says what is chosen. ---------- */
.tsbk:not(#_) .tsbk-swatches{display:grid;gap:6px;width:100%;min-width:0}
.tsbk:not(#_) .tsbk-swatches__label{margin:0;font:500 14px/1.3 var(--tsbk-text);color:var(--tsbk-ink-2);overflow-wrap:anywhere}
.tsbk:not(#_) .tsbk-swatches__label b{font-weight:700;color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-swatches__row{display:flex;flex-wrap:wrap;gap:3px}
.tsbk:not(#_) .tsbk-swatch{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tsbk-tap);height:var(--tsbk-tap);
  padding:0;border:1px solid var(--tsbk-line);border-radius:var(--tsbk-r-sm);background:var(--tsbk-white);overflow:hidden;cursor:pointer;color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-swatch > img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.tsbk:not(#_) .tsbk-swatch::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.tsbk:not(#_) .tsbk-swatch:hover{border-color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-swatch[aria-pressed="true"]{border-color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-swatch[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--tsbk-blue),inset 0 0 0 4px var(--tsbk-white)}
.tsbk:not(#_) .tsbk-swatch:focus-visible{outline:2px solid var(--tsbk-ink);outline-offset:2px}
.tsbk:not(#_) .tsbk-swatch--text{width:auto;max-width:100%;padding:0 10px;font:600 13px/1.15 var(--tsbk-text);text-align:left}
.tsbk:not(#_) .tsbk-swatch--text[aria-pressed="true"]{background:var(--tsbk-tint)}
/* Can't be had: dimmed with a line through it. The page marks it aria-disabled and it can't be chosen. */
.tsbk:not(#_) .tsbk-swatch.is-out{color:var(--tsbk-ink-3)}
.tsbk:not(#_) .tsbk-swatch.is-out > img{opacity:.4}
.tsbk:not(#_) .tsbk-swatch.is-out::before{content:"";position:absolute;left:-10%;right:-10%;top:50%;z-index:1;height:2px;background:var(--tsbk-ink-2);transform:rotate(-45deg)}
.tsbk:not(#_) .tsbk-swatch--text.is-out::before{left:6px;right:6px;transform:none}
/* Thumb: a gallery's small picture, 4:5, the chosen one ringed */
.tsbk:not(#_) .tsbk-swatch--thumb{width:56px;height:70px}

/* ---------- Qty: a quantity stepper. Two 44px buttons either side of the number, in one outlined pill. ---------- */
.tsbk:not(#_) .tsbk-qty{flex:none;display:inline-flex;align-items:stretch;height:50px;border:1px solid var(--tsbk-line);border-radius:var(--tsbk-r-pill);background:var(--tsbk-white);overflow:hidden}
.tsbk:not(#_) .tsbk-qty__btn{flex:none;display:grid;place-items:center;width:var(--tsbk-tap);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-qty__btn svg{width:16px;height:16px}
.tsbk:not(#_) .tsbk-qty__btn:hover{background:var(--tsbk-tint)}
.tsbk:not(#_) .tsbk-qty__btn[disabled]{color:var(--tsbk-ink-3);cursor:default;background:none}
.tsbk:not(#_) .tsbk-qty__input{width:40px;min-height:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:center;
  font:700 17px/1 var(--tsbk-text);color:var(--tsbk-ink);-moz-appearance:textfield;appearance:textfield}
.tsbk:not(#_) .tsbk-qty__input::-webkit-inner-spin-button,.tsbk:not(#_) .tsbk-qty__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tsbk:not(#_) .tsbk-qty__input:focus{outline:none}
.tsbk:not(#_) .tsbk-qty:focus-within{border-color:var(--tsbk-blue)}

/* ---------- Acc: an accordion row (a <details>). The title in OZIK Bold capitals, a drawn plus that turns to a minus,
   hairlines between rows; the body in the page's text, a table in it laid out plainly. ---------- */
.tsbk:not(#_) .tsbk-acc{border-top:1px solid var(--tsbk-line)}
.tsbk:not(#_) .tsbk-acc:last-child{border-bottom:1px solid var(--tsbk-line)}
.tsbk:not(#_) .tsbk-acc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--tsbk-s3);min-height:52px;padding:4px 0;cursor:pointer;list-style:none;
  font:700 15px/1.2 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-acc__head::-webkit-details-marker{display:none}
.tsbk:not(#_) .tsbk-acc__title{padding:2px 4px;margin:-2px -4px}
.tsbk:not(#_) .tsbk-acc__head:hover .tsbk-acc__title{background:var(--tsbk-yellow);transform:rotate(-1deg)}
.tsbk:not(#_) .tsbk-acc__icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--tsbk-tint)}
.tsbk:not(#_) .tsbk-acc__icon::before,.tsbk:not(#_) .tsbk-acc__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--tsbk-blue);border-radius:1px;transition:transform .15s}
.tsbk:not(#_) .tsbk-acc__icon::after{transform:rotate(90deg)}
.tsbk:not(#_) .tsbk-acc[open] .tsbk-acc__icon::after{transform:rotate(0)}
.tsbk:not(#_) .tsbk-acc__body{padding:0 0 var(--tsbk-s4);font:500 15px/1.55 var(--tsbk-text);color:var(--tsbk-ink-2);overflow-x:auto}
.tsbk:not(#_) .tsbk-acc__body p + p{margin-top:var(--tsbk-s2)}
.tsbk:not(#_) .tsbk-acc__body a{color:var(--tsbk-blue);text-decoration:underline;text-underline-offset:3px}
.tsbk:not(#_) .tsbk-acc__body table{width:100%;border-collapse:collapse;margin:0;font:500 14px/1.35 var(--tsbk-text);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-acc__body th,.tsbk:not(#_) .tsbk-acc__body td{padding:8px 6px;border:0;border-bottom:1px solid var(--tsbk-line);background:none;text-align:left;vertical-align:top}
.tsbk:not(#_) .tsbk-acc__body th{font:700 12px/1.2 var(--tsbk-label);letter-spacing:.06em;text-transform:uppercase;color:var(--tsbk-ink-2)}
.tsbk:not(#_) .tsbk-acc__body td p{margin:0}

/* ---------- Fields: form fields a plugin prints into a kit form (a book's personal message, a gift card's
   recipient, a subscription's gift option). Wrap them in .tsbk-fields: labels over 44px fields, the kit's lines. ---------- */
.tsbk:not(#_) .tsbk-fields{display:grid;gap:var(--tsbk-s3);font:500 15px/1.45 var(--tsbk-text);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-fields :where(h2,h3){font:700 15px/1.3 var(--tsbk-text);color:var(--tsbk-ink);margin:0}
.tsbk:not(#_) .tsbk-fields :where(label){display:block;margin:0 0 4px;font:600 14px/1.3 var(--tsbk-text);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-fields :where(input[type=text],input[type=email],input[type=number],input[type=date],input[type=tel],input[type=search],input[type=password],input[type=url],textarea,select){display:block;width:100%;min-height:var(--tsbk-tap);
  margin:0;padding:10px 12px;border:1px solid var(--tsbk-line);border-radius:var(--tsbk-r-sm);background:var(--tsbk-white);box-shadow:none;font:500 16px/1.3 var(--tsbk-text);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-fields :where(input,textarea,select):focus{outline:2px solid var(--tsbk-blue);outline-offset:0;border-color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-fields :where(input[type=checkbox],input[type=radio]){width:22px;height:22px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-fields :where(input[type=checkbox],input[type=radio]) + label{display:inline;vertical-align:middle}
.tsbk:not(#_) .tsbk-fields :where(small,.description){display:block;margin-top:4px;font:500 13px/1.4 var(--tsbk-text);color:var(--tsbk-ink-2)}
.tsbk:not(#_) .tsbk-fields :where(p){margin:0}
.tsbk:not(#_) .tsbk-fields .hidden{display:none}
/* A password field's show/hide eye (WooCommerce's), inside the field at its right end (3 Oct 2026: it sat half above). */
.tsbk:not(#_) .tsbk-fields .password-input{display:block;position:relative}
.tsbk:not(#_) .tsbk-fields .password-input input{padding-right:var(--tsbk-tap)}
.tsbk:not(#_) .tsbk-fields .show-password-input{position:absolute;top:0;right:0;bottom:auto;left:auto;width:var(--tsbk-tap);height:var(--tsbk-tap);margin:0;padding:0;transform:none;
  display:grid;place-items:center;border:0;border-radius:var(--tsbk-r-sm);background-color:transparent;color:var(--tsbk-ink-2);box-shadow:none}

/* ---------- Scale: where one thing sits on a scale of three or five stops (a garment's fit, five: runs small, regular
   to slim, regular fit, regular to relaxed, runs large; its fabric, three: lightweight, midweight, heavyweight). The label
   line names the marked stop and, for a screen reader, the scale (a .tsbk-vh inside it: "2 on a scale of 1, runs small,
   to 5, runs large"). The drawn line and the names under it are aria-hidden. Each stop sits at its place along the line,
   set by the page as --p (0% to 100%); the marked stop is .is-on. Three names go under the line, at the two ends and the
   middle (.is-on on the one marked, when it is one of those). ---------- */
.tsbk:not(#_) .tsbk-scale{display:grid;gap:6px;min-width:0}
.tsbk:not(#_) .tsbk-scale__label{margin:0;font:500 14px/1.3 var(--tsbk-text);color:var(--tsbk-ink-2);overflow-wrap:anywhere}
.tsbk:not(#_) .tsbk-scale__label b{font-weight:700;color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-scale__bar{position:relative;height:24px;margin:0 12px}
.tsbk:not(#_) .tsbk-scale__bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--tsbk-line);border-radius:1px}
.tsbk:not(#_) .tsbk-scale__stop{position:absolute;top:50%;left:var(--p,0%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--tsbk-white);border:2px solid var(--tsbk-ink-3)}
.tsbk:not(#_) .tsbk-scale__stop.is-on{width:20px;height:20px;margin:-10px 0 0 -10px;border:4px solid var(--tsbk-white);background:var(--tsbk-blue);box-shadow:0 0 0 2px var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-scale__names{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.tsbk:not(#_) .tsbk-scale__name{margin:0;font:600 12px/1.2 var(--tsbk-label);letter-spacing:.05em;text-transform:uppercase;color:var(--tsbk-ink-3);white-space:nowrap}
.tsbk:not(#_) .tsbk-scale__name:first-child{text-align:left}
.tsbk:not(#_) .tsbk-scale__name:nth-child(2){text-align:center}
.tsbk:not(#_) .tsbk-scale__name:last-child{text-align:right}
.tsbk:not(#_) .tsbk-scale__name.is-on{font-weight:700;color:var(--tsbk-ink)}

/* ---------- Modal: a small panel over a dimmed page (the PODCASTS join panel). A sheet from the bottom on phones. ---------- */
.tsbk:not(#_) .tsbk-modal{position:fixed;inset:0;z-index:100010;display:grid;place-items:center;padding:var(--tsbk-s4)}
.tsbk:not(#_) .tsbk-modal__bg{position:absolute;inset:0;background:rgba(20,25,39,.72)}
.tsbk:not(#_) .tsbk-modal__panel{position:relative;width:min(440px,100%);background:var(--tsbk-white);border-radius:var(--tsbk-r-card);overflow:hidden;box-shadow:0 24px 60px rgba(20,25,39,.35)}
/* The close button: a drawn cross on a navy disc with a white ring, so it reads on any artwork */
.tsbk:not(#_) .tsbk-modal__close{position:absolute;top:4px;right:4px;z-index:1;display:grid;place-items:center;width:var(--tsbk-tap);height:var(--tsbk-tap);border-radius:50%;background:none}
.tsbk:not(#_) .tsbk-modal__close::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--tsbk-navy);box-shadow:0 0 0 2px var(--tsbk-white),0 2px 8px rgba(20,25,39,.35)}
.tsbk:not(#_) .tsbk-modal__close svg{position:relative;display:block;width:18px;height:18px;color:var(--tsbk-white)}
.tsbk:not(#_) .tsbk-modal__close:hover::before{background:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-modal__close:focus-visible{outline:2px solid var(--tsbk-yellow);outline-offset:0;border-radius:50%}
.tsbk:not(#_) .tsbk-modal__media{aspect-ratio:16/9;background:var(--tsbk-navy)}
.tsbk:not(#_) .tsbk-modal__media img{display:block;width:100%;height:100%;object-fit:cover}
.tsbk:not(#_) .tsbk-modal__body{padding:var(--tsbk-s5);display:grid;gap:var(--tsbk-s3)}
.tsbk:not(#_) .tsbk-modal__eyebrow{font:700 12px/1.3 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase;color:var(--tsbk-blue)}
.tsbk:not(#_) .tsbk-modal__title{font:900 26px/1 var(--tsbk-ozik);text-transform:uppercase;color:var(--tsbk-ink);text-wrap:balance}
.tsbk:not(#_) .tsbk-modal__text{font:500 15px/1.5 var(--tsbk-text);color:var(--tsbk-ink-2);text-wrap:pretty}
.tsbk:not(#_) .tsbk-modal__actions{display:grid;justify-items:center;gap:var(--tsbk-s2);margin-top:var(--tsbk-s2)}
.tsbk:not(#_) .tsbk-modal__actions .tsbk-btn{width:100%}
@media (max-width:600px){
  .tsbk:not(#_) .tsbk-modal{place-items:end center;padding:0}
  .tsbk:not(#_) .tsbk-modal__panel{width:100%;border-radius:var(--tsbk-r-panel) var(--tsbk-r-panel) 0 0}
}

/* ---------- Player: the navy bar along the foot of the screen (audio) ---------- */
.tsbk:not(#_) .tsbk-player,.tsbk:not(#_) .tsbk-dock{--tsbk-p-ink:#FFFFFF;--tsbk-p-ink-2:#B4BCCB;--tsbk-p-ink-3:#7C869A;--tsbk-p-line:#323B53;--tsbk-p-panel:#141927;--tsbk-p-panel-3:#232A3E}
.tsbk:not(#_) .tsbk-player{position:fixed;left:0;right:0;bottom:0;z-index:99990;display:grid;
  grid-template-columns:52px minmax(0,300px) auto minmax(0,1fr) var(--tsbk-tap);grid-template-areas:"art txt ctl scrub x" "note note note note note";
  gap:6px 16px;align-items:center;padding:12px max(24px,calc((100vw - 1200px) / 2 + 24px));
  background:rgba(20,25,39,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--tsbk-p-line);color:var(--tsbk-p-ink);font:500 15px/1.45 var(--tsbk-text)}
.tsbk:not(#_) .tsbk-player__art{grid-area:art;width:52px;height:52px;border-radius:var(--tsbk-r-card);object-fit:cover;background:var(--tsbk-p-panel-3)}
.tsbk:not(#_) .tsbk-player__txt{grid-area:txt;min-width:0;display:grid;gap:3px}
.tsbk:not(#_) .tsbk-player__show{font:700 11px/1 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase;color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-player__title{font:700 15px/1.25 var(--tsbk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tsbk-p-ink)}
.tsbk:not(#_) .tsbk-player__tier{font:600 12px/1.3 var(--tsbk-text);color:var(--tsbk-p-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsbk:not(#_) .tsbk-player__tier a{color:var(--tsbk-yellow);text-decoration:underline}
.tsbk:not(#_) .tsbk-player__badge{display:inline-block;background:var(--tsbk-yellow);color:var(--tsbk-ink);border-radius:var(--tsbk-r-pill);padding:2px 8px;margin-right:4px;
  font:700 11px/1.3 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase}
.tsbk:not(#_) .tsbk-player__ctl{grid-area:ctl;display:flex;align-items:center;gap:4px}
.tsbk:not(#_) .tsbk-player__play{display:grid;place-items:center;width:var(--tsbk-tap);height:var(--tsbk-tap);border-radius:50%;background:var(--tsbk-yellow);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-player__play:hover{background:var(--tsbk-yellow-h);color:var(--tsbk-ink)}
.tsbk:not(#_) .tsbk-player__play svg{width:22px;height:22px}
.tsbk:not(#_) .tsbk-player__skip{height:var(--tsbk-tap);min-width:var(--tsbk-tap);border-radius:var(--tsbk-r-pill);text-align:center;font:700 12px/1 var(--tsbk-label);letter-spacing:.04em;color:var(--tsbk-p-ink-2)}
.tsbk:not(#_) .tsbk-player__skip:hover{color:var(--tsbk-p-ink);background:var(--tsbk-p-panel-3)}
.tsbk:not(#_) .tsbk-player__scrub{grid-area:scrub;display:flex;align-items:center;gap:8px;min-width:0;font:600 12px/1 var(--tsbk-text);color:var(--tsbk-p-ink-3);font-variant-numeric:tabular-nums}
.tsbk:not(#_) .tsbk-player__seek{flex:1;min-width:0;height:var(--tsbk-tap);margin:0;background:none;accent-color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-player__close,.tsbk:not(#_) .tsbk-dock__close{display:grid;place-items:center;width:var(--tsbk-tap);height:var(--tsbk-tap);border-radius:50%;color:var(--tsbk-p-ink)}
.tsbk:not(#_) .tsbk-player__close{grid-area:x}
.tsbk:not(#_) .tsbk-player__close:hover,.tsbk:not(#_) .tsbk-dock__close:hover{background:var(--tsbk-p-panel-3);color:var(--tsbk-p-ink)}
.tsbk:not(#_) .tsbk-player__close svg,.tsbk:not(#_) .tsbk-dock__close svg{width:18px;height:18px}
.tsbk:not(#_) .tsbk-player__note{grid-area:note;margin:4px 0 0;font:600 13px/1.4 var(--tsbk-text);color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-player__note a{color:var(--tsbk-p-ink);text-decoration:underline}
/* The badge and its words swap when the member's own ad-free file is playing: .is-free on the bar */
.tsbk:not(#_) .tsbk-player .tsbk-player__if-free{display:none}
.tsbk:not(#_) .tsbk-player.is-free .tsbk-player__if-free{display:inline}
.tsbk:not(#_) .tsbk-player.is-free .tsbk-player__if-ads{display:none}

/* ---------- Player: the shrink button, phones only. Dan, 1 Oct 2026: "When the audio player is stacked on top it takes
   up quite a lot of the screen. I wonder if we should have a button available on the audio player that compacts it down
   when pressed." kit.js (4) adds the button when the body has tsbk-pmini, which tsb-ui-kit.php gives the header preview
   only while TSB_KIT_PLAYER_MINI is false. Shrunk (.is-mini): one row of picture, show and title, play, the button and
   the cross; the skips, the time bar and the ads line go, and a thin yellow line along the top edge shows how far in
   the episode is (that line is my addition, not Dan's). Wider screens get no button: the bar is one row there already. */
.tsbk:not(#_) .tsbk-player__size{display:none}
@media (max-width:759px){
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player{grid-template-columns:var(--tsbk-tap) auto minmax(0,1fr) var(--tsbk-tap) var(--tsbk-tap);grid-template-areas:"art txt txt size x" "ctl ctl scrub scrub scrub" "note note note note note"}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player__size{grid-area:size;display:grid;place-items:center;width:var(--tsbk-tap);height:var(--tsbk-tap);border-radius:50%;color:var(--tsbk-p-ink)}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player__size:hover{background:var(--tsbk-p-panel-3);color:var(--tsbk-p-ink)}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player__size svg{width:20px;height:20px;transition:transform .2s ease}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini{grid-template-columns:var(--tsbk-tap) minmax(0,1fr) auto var(--tsbk-tap) var(--tsbk-tap);grid-template-areas:"art txt ctl size x" "note note note note note";
    padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px 8px}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini .tsbk-player__skip,
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini .tsbk-player__scrub,
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini .tsbk-player__tier{display:none}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini .tsbk-player__size svg{transform:rotate(180deg)}
  body.tsbk-pmini .tsbk:not(#_) .tsbk-player.is-mini::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--tsbk-p-done,0%);background:var(--tsbk-yellow);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){body.tsbk-pmini .tsbk:not(#_) .tsbk-player__size svg{transition:none}}

/* ---------- Dock: the video panel, bottom right (edge to edge on phones) ---------- */
.tsbk:not(#_) .tsbk-dock{position:fixed;right:24px;bottom:24px;z-index:99991;width:440px;background:#000;border-radius:var(--tsbk-r-panel);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45);border:1px solid var(--tsbk-p-line)}
.tsbk:not(#_) .tsbk-dock.is-big{width:min(860px,calc(100vw - 48px))}
.tsbk:not(#_) .tsbk-dock__bar{display:flex;align-items:center;gap:12px;padding:4px 4px 4px 14px;background:var(--tsbk-p-panel);color:var(--tsbk-p-ink-2)}
.tsbk:not(#_) .tsbk-dock__title{flex:1;min-width:0;font:600 13px/1.2 var(--tsbk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsbk:not(#_) .tsbk-dock__size{min-height:var(--tsbk-tap);padding:0 8px;font:700 13px/1 var(--tsbk-ozik-bold);letter-spacing:.03em;text-transform:uppercase;color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-dock__size:hover{color:var(--tsbk-yellow-h)}
.tsbk:not(#_) .tsbk-dock__frame{position:relative;aspect-ratio:16/9;background:#000}
.tsbk:not(#_) .tsbk-dock__frame iframe,.tsbk:not(#_) .tsbk-dock__frame > div{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ---------- Foot: the site footer on the kit's own pages (printed by tsb_ui_kit_footer() in tsb-ui-kit.php).
   Navy, with the logo's yellow as a rule along the top. Everything starts at the left: the logo and its line, the
   TSB+ band (the shop's own join wording, the button right after the words), the link lists, the icon rows, the
   company line. Columns from 760px (two) and 1000px (four); one above the other on phones. Every link is a 44px tap.
   The footer element is itself .tsbk, so its root rule is written .tsbk:not(#_).tsbk-foot. ---------- */
.tsbk:not(#_).tsbk-foot{background:var(--tsbk-navy);color:var(--tsbk-white);border-top:4px solid var(--tsbk-yellow);font:500 15px/1.45 var(--tsbk-text)}
.tsbk:not(#_) .tsbk-foot__in{display:grid;gap:var(--tsbk-s6);padding-top:var(--tsbk-s7);padding-bottom:var(--tsbk-s6)}
.tsbk:not(#_).tsbk-foot :focus-visible{outline-color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-foot__brand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tsbk-s3) var(--tsbk-s4)}
.tsbk:not(#_) .tsbk-foot__logo{display:block;flex:none}
.tsbk:not(#_) .tsbk-foot__logo img{width:56px;height:auto}   /* the round logo at the old icon's size (Dan: "the same scale") */
.tsbk:not(#_) .tsbk-foot__line{font:700 18px/1.3 var(--tsbk-text);color:var(--tsbk-white)}
.tsbk:not(#_) .tsbk-foot__join{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tsbk-s4) var(--tsbk-s5);padding:var(--tsbk-s5);background:var(--tsbk-blue);border-radius:var(--tsbk-r-panel)}
.tsbk:not(#_) .tsbk-foot__join-t{max-width:60ch;font:600 17px/1.45 var(--tsbk-text);color:var(--tsbk-white)}
.tsbk:not(#_) .tsbk-foot__go{flex:none}
.tsbk:not(#_) .tsbk-foot__nav{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--tsbk-s5) var(--tsbk-s7)}
.tsbk:not(#_) .tsbk-foot__h{margin:0 0 var(--tsbk-s1);font:700 12px/1.2 var(--tsbk-label);letter-spacing:.09em;text-transform:uppercase;color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-foot__list,.tsbk:not(#_) .tsbk-foot__icons{list-style:none;margin:0;padding:0}
.tsbk:not(#_) .tsbk-foot__list li,.tsbk:not(#_) .tsbk-foot__icons li{margin:0;padding:0}
.tsbk:not(#_) .tsbk-foot__a{display:inline-flex;align-items:center;min-height:var(--tsbk-tap);min-width:var(--tsbk-tap);font:600 16px/1.2 var(--tsbk-text);color:var(--tsbk-white)}
.tsbk:not(#_) .tsbk-foot__a:hover{color:var(--tsbk-yellow);text-decoration:underline;text-underline-offset:4px}
/* "Cookie settings" is a button (Complianz reopens its consent choices from it), dressed as the links around it, with the
   theme's own button look taken off. */
.tsbk:not(#_) .tsbk-foot__btn{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;text-align:left;text-transform:none;letter-spacing:normal}
.tsbk:not(#_) .tsbk-foot__btn:hover,.tsbk:not(#_) .tsbk-foot__btn:focus{background:none;border:0;box-shadow:none}
.tsbk:not(#_) .tsbk-foot__set + .tsbk-foot__set{margin-top:var(--tsbk-s4)}
/* The icons: each platform's own plain mark, 22px, white, yellow on hover and focus. The mark sits at the left of its
   44px tap, so the row lines up with its label. */
.tsbk:not(#_) .tsbk-foot__icons{display:flex;flex-wrap:wrap;gap:var(--tsbk-s2)}
.tsbk:not(#_) .tsbk-foot__icon{display:inline-flex;align-items:center;justify-content:flex-start;min-width:var(--tsbk-tap);height:var(--tsbk-tap);color:var(--tsbk-white);border-radius:var(--tsbk-r-sm)}
.tsbk:not(#_) .tsbk-foot__icon:hover,.tsbk:not(#_) .tsbk-foot__icon:focus-visible{color:var(--tsbk-yellow)}
.tsbk:not(#_) .tsbk-foot__svg{display:block;width:22px;height:22px}
.tsbk:not(#_) .tsbk-foot__svg--amazon-music{width:103px}
.tsbk:not(#_) .tsbk-foot__legal{padding-top:var(--tsbk-s5);border-top:1px solid rgba(255,255,255,.16);font:500 13px/1.5 var(--tsbk-text);color:rgba(255,255,255,.75);max-width:80ch}
@media (max-width:759px){
  .tsbk:not(#_) .tsbk-foot__join{padding:var(--tsbk-s4)}
}
@media (min-width:760px){
  .tsbk:not(#_) .tsbk-foot__nav{grid-template-columns:repeat(2,minmax(0,240px));justify-content:start}
}
@media (min-width:1000px){
  .tsbk:not(#_) .tsbk-foot__in{padding-top:var(--tsbk-s8)}
  .tsbk:not(#_) .tsbk-foot__nav{grid-template-columns:repeat(3,minmax(0,180px)) auto}
}

@media (max-width:759px){
  .tsbk:not(#_) .tsbk-player{grid-template-columns:var(--tsbk-tap) auto minmax(0,1fr) var(--tsbk-tap);grid-template-areas:"art txt txt x" "ctl ctl scrub scrub" "note note note note";
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px 10px}
  .tsbk:not(#_) .tsbk-player__art{width:var(--tsbk-tap);height:var(--tsbk-tap)}
  .tsbk:not(#_) .tsbk-player__tier{white-space:normal;font-size:11px}
  .tsbk:not(#_) .tsbk-dock{left:0;right:0;bottom:0;width:auto;border-radius:0;border-width:1px 0 0}
  .tsbk:not(#_) .tsbk-dock.is-big{width:auto}
  .tsbk:not(#_) .tsbk-dock__size{display:none}
}
/* ---------- The side basket (29 Sep 2026, Dan: "bring it in line with the house style"). Elementor Pro's Menu Cart
   widget in the header; its markup is Elementor's, so these rules name its classes. :not(#_) lifts them over the
   widget's own per-element styles, as the kit's own rules do. The kit's colours, Barlow for words, OZIK for buttons. ---------- */
.elementor-menu-cart__main:not(#_){--d-ink:#2B3040;--d-ink-2:#5A6070;--d-line:#DDE1EA;--d-tint:#F6F7FA;--d-blue:#2B6EBB;--d-yellow:#FFC54F;--d-yellow-h:#FFD172;
  width:min(420px,100vw)!important;max-width:100vw;padding:22px 24px 24px!important;background:#fff!important;color:var(--d-ink);
  font:500 15px/1.45 "Barlow",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;box-shadow:-8px 0 24px rgba(20,25,39,.12)}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__close-button{margin:0 0 0 auto!important;width:44px!important;height:44px!important;position:relative}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__close-button::before,.elementor-menu-cart__main:not(#_) .elementor-menu-cart__close-button::after{background:var(--d-ink)!important;width:22px!important;height:2px!important;left:11px!important;top:21px!important;margin:0!important}
.elementor-menu-cart__main:not(#_) .widget_shopping_cart_content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.elementor-menu-cart__main:not(#_) .widget_shopping_cart_content::before{content:"Your basket";order:-1;margin:-44px 0 14px;padding-right:52px;min-height:44px;display:flex;align-items:center;
  font:700 22px/1 "OZIK Bold","OZIK","OZIK Black","Barlow",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--d-ink)}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__products{border-top:1px solid var(--d-line);overflow-y:auto}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product{display:grid!important;grid-template-columns:72px minmax(0,1fr) 36px;grid-template-rows:auto auto;gap:4px 14px;align-items:start;
  padding:16px 0!important;border:0!important;border-bottom:1px solid var(--d-line)!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-image{grid-column:1;grid-row:1 / span 2;width:72px!important;margin:0!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-image img{display:block;width:72px!important;height:72px!important;object-fit:cover;border-radius:8px;background:var(--d-tint)}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-name{grid-column:2;grid-row:1;margin:0!important;padding:0!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-name a,.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-name{font:600 16px/1.3 "Barlow",-apple-system,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--d-ink)!important;text-decoration:none}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-name a:hover{text-decoration:underline;text-underline-offset:3px}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-price{grid-column:2;grid-row:2;margin:0!important;padding:0!important;font:500 15px/1.3 "Barlow",-apple-system,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--d-ink-2)!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-price *{font:inherit!important;color:inherit!important;letter-spacing:0!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-remove{grid-column:3;grid-row:1 / span 2;align-self:center;position:relative;width:36px!important;height:36px!important;margin:0!important;
  border:1px solid var(--d-line)!important;border-radius:999px}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-remove:hover{border-color:var(--d-ink)!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-remove::before,.elementor-menu-cart__main:not(#_) .elementor-menu-cart__product-remove::after{background:var(--d-ink)!important;width:14px!important;height:1.5px!important}
.elementor-menu-cart__main:not(#_) .tsb-offer-mini{padding:14px 0!important;border:0!important;border-bottom:1px solid var(--d-line)!important;font-size:15px}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__subtotal{display:flex!important;justify-content:space-between;align-items:baseline;margin:0!important;padding:18px 0!important;border:0!important;
  text-align:left!important;font:700 17px/1.2 "Barlow",-apple-system,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--d-ink)!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__subtotal *{font:inherit!important;color:inherit!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__footer-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin-top:auto!important;padding:0!important}
.elementor-menu-cart__main:not(#_) .elementor-menu-cart__footer-buttons .elementor-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:50px;padding:0 16px!important;margin:0!important;
  border-radius:999px!important;font:700 16px/1 "OZIK Bold","OZIK","OZIK Black","Barlow",sans-serif!important;letter-spacing:.03em!important;text-transform:uppercase!important;box-shadow:none!important;transition:background .15s,color .15s}
.elementor-menu-cart__main:not(#_) .elementor-button--view-cart{background:#fff!important;color:var(--d-blue)!important;border:1px solid var(--d-blue)!important}
.elementor-menu-cart__main:not(#_) .elementor-button--view-cart:hover{color:var(--d-ink)!important}
.elementor-menu-cart__main:not(#_) .elementor-button--checkout{background:var(--d-yellow)!important;color:var(--d-ink)!important;border:1px solid var(--d-yellow)!important}
.elementor-menu-cart__main:not(#_) .elementor-button--checkout:hover{background:var(--d-yellow-h)!important}
.elementor-menu-cart__main:not(#_) .woocommerce-mini-cart__empty-message{margin:0;padding:18px 0;border-top:1px solid var(--d-line);font:500 16px/1.45 "Barlow",-apple-system,sans-serif!important;text-transform:none!important;color:var(--d-ink-2)!important;text-align:left!important}
/* A pill with a count (Shop filters): the number sits on the same baseline as the word, whatever each font's own spacing (Dan, 30 Sep 2026: the numbers sat lower than the words on his screen). The words stay centred in the pill. */
.tsbk:not(#_) .tsbk-pill:has(> .tsbk-pill__n){flex-wrap:wrap;align-content:center;align-items:baseline}