/* ============================================================================
   store.css — the layer the static design kit could not have: everything that
   only exists once the pages are driven by the CMS and the shop database.

   Rules here either (a) style markup the kit never had (admin-managed dropdown
   menus, server flash messages, order tables, the account dashboard), or
   (b) adapt a kit component to a dynamic variant. Nothing here restates what
   core.css already does — it loads after core.css and style-en.css and uses
   the same tokens throughout, so the two stay one design system.
   ========================================================================= */

/* ---------------------------------------------------------------- HEADER NAV
   The header menu is admin-managed and any item may carry children, so the kit's
   flat nav grows a dropdown. Hover opens it on pointer devices; focus-within
   keeps it usable from the keyboard; main.js toggles .is-open for touch.       */

/* The global reset makes every svg display:block, which dropped the chevron onto its own line
   under "Shop" and pushed that item out of line with the rest of the nav. Laying the link out as
   a flex row puts the arrow beside the word and keeps every menu item on one baseline. */
.tb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.tb-nav__chev {
  width: .875rem;
  height: .875rem;
  margin-inline-start: 0;
  transition: transform var(--t-fast) var(--ease);
}
.tb-nav__item--has-sub:hover .tb-nav__chev,
.tb-nav__item--has-sub.is-open .tb-nav__chev { transform: rotate(180deg); }

.tb-sub {
  position: absolute;
  inset-block-start: calc(100% + .625rem);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(.375rem);
  min-width: 13rem;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  z-index: var(--z-header);
}
/* A hover bridge over the 10px gap, so the pointer can travel into the panel. */
.tb-sub::before {
  content: "";
  position: absolute;
  inset-block-start: -.75rem;
  inset-inline: 0;
  height: .75rem;
}
.tb-nav__item--has-sub:hover > .tb-sub,
.tb-nav__item--has-sub:focus-within > .tb-sub,
.tb-nav__item--has-sub.is-open > .tb-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tb-sub__list { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.tb-sub__list a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-sub__list a:hover,
.tb-sub__list a:focus-visible { background: var(--page-tint); color: var(--brand); }
.tb-sub__list a.is-current { color: var(--brand); font-weight: 700; }

/* Mega variant: a wide picture-card panel for the Shop menu. Every other submenu keeps the
   plain list above. Sized in rem so it stays put whatever the nav item's width. */
/* The mega panel is far wider than the word that opens it, so centring it on the item pushed it
   off the left edge. Dropping the item's positioning context makes the sticky header the
   containing block: the panel then centres on the page and opens just under the header bar. */
.tb-nav__item--mega { position: static; }
.tb-sub--mega {
  width: min(62rem, calc(100vw - 2rem));
  min-width: 0;
  padding: 0;                    /* the inner block carries it - see below */
  border-radius: var(--r-xl);
}
/* Never taller than the screen under the header: on a laptop the panel ran off the bottom and
   took the "Accessories / All categories" row with it, so it scrolls inside if it must. The
   INNER block scrolls, not the panel: a scrolling panel clips everything outside its box, the
   hover bridge above it included, and the menu then closed the moment the pointer left the word.
   The panel's padding lives here, inside the scrolling box, so a lifted card's shadow has the
   whole margin to spread into instead of being cut off a few pixels from the card. */
.tb-sub--mega > .tb-mega {
  max-block-size: calc(100vh - var(--header-h) - 5.5rem);   /* the top bar sits above the header */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-radius: inherit;
}
/* A taller hover bridge: the pointer now has the rest of the header to cross. */
.tb-sub--mega::before { inset-block-start: -3.25rem; height: 3.25rem; }
.tb-mega { display: grid; gap: var(--sp-4); }
.tb-mega__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.tb-mega__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.tb-mega__all {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand); white-space: nowrap;
}
.tb-mega__all .tb-ico { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
.tb-mega__all:hover .tb-ico { transform: translateX(.1875rem); }

.tb-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-3);
}
/* The picture on top, whole, and the words underneath on white. The picture used to fill a
   fixed 200px band (object-fit: cover): these are portrait scenes, 900x1178, so the band showed
   about half of each - heads and paws cut off. Now it keeps its own proportions, and only its
   height is capped by the screen, so a short laptop still gets the whole panel without
   scrolling; past the cap the photo shrinks inside its band (contain) rather than being cut.
   The words keep the card's full width either way. */
.tb-mega__card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  color: var(--text);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tb-mega__card:hover,
.tb-mega__card:focus-visible { transform: translateY(-.25rem); box-shadow: var(--sh-3); border-color: var(--gold-500); }
/* White like the card: on a short screen the capped photo is narrower than the card, and a grey
   ground showed as two bars beside it. On white it simply sits centred. */
.tb-mega__shot { display: block; overflow: hidden; background: var(--white); }
.tb-mega__shot img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 900 / 1178;          /* the menu photos' own shape: the band is right before it loads */
  max-height: min(26rem, 42vh);
  object-fit: contain;               /* any other shape still shows whole */
}
/* No zoom on hover: scaling inside the band cropped the edges again. The card's lift says it. */
.tb-mega__body {
  display: grid; align-content: start; gap: .25rem;
  padding: var(--sp-3) 3rem var(--sp-3) var(--sp-4);
}
.tb-mega__name { font-weight: 800; font-size: var(--fs-sm); line-height: 1.25; color: var(--brand); }
.tb-mega__text {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-mega__go {
  position: absolute; inset-inline-end: var(--sp-3); inset-block-end: var(--sp-3);
  box-sizing: content-box;
  width: .875rem; height: .875rem; padding: .4375rem;
  border-radius: 50%;
  background: var(--page-tint);
  color: var(--brand);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-mega__card:hover .tb-mega__go { transform: translateX(.1875rem); background: var(--gold-500); color: var(--brand); }
.tb-mega__card.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.tb-mega__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
}
.tb-mega__links a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.tb-mega__links a:hover,
.tb-mega__links a:focus-visible { color: var(--brand); }
.tb-mega__links a.is-current { color: var(--brand); font-weight: 800; }

@media (max-width: 1023.98px) {
  .tb-sub { display: none; }
}

/* ------------------------------------------------------------ MOBILE DRAWER
   Sub-items collapse behind a disclosure button so a deep menu still fits.     */

.tb-drawer__search { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.tb-drawer__search .tb-input { flex: 1; min-width: 0; }

.tb-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding-block: .625rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-h4);
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.tb-drawer__toggle .tb-ico { width: 1.125rem; height: 1.125rem; transition: transform var(--t-fast) var(--ease); }
.tb-drawer__toggle[aria-expanded="true"] .tb-ico { transform: rotate(180deg); }
.tb-drawer__sub {
  margin: 0 0 var(--sp-2);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--border);
  list-style: none;
  display: grid;
  gap: .125rem;
}
.tb-drawer__sub a {
  display: block;
  padding-block: .4375rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.tb-drawer__sub a:hover { color: var(--brand); }

/* -------------------------------------------------------------- FLASH ALERTS
   Server-side TempData messages (added to cart, subscribed, stock problem).    */

.tb-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: .875rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.tb-alert + .tb-alert { margin-block-start: var(--sp-2); }
.tb-alert .tb-ico { flex: none; width: 1.125rem; height: 1.125rem; margin-block-start: .0625rem; }
.tb-alert--ok  { border-inline-start: 4px solid var(--green-500); color: var(--green-900); }
.tb-alert--bad { border-inline-start: 4px solid var(--red-600);   color: var(--red-600); }
.tb-alert--info{ border-inline-start: 4px solid var(--navy-600);  color: var(--navy-700); }

/* Inline validation summary rendered by MVC. */
.tb-errors {
  margin-block-end: var(--sp-4);
  padding: .875rem 1.125rem;
  border: 1px solid rgba(192, 57, 43, .28);
  border-inline-start: 4px solid var(--red-600);
  border-radius: var(--r-md);
  background: rgba(192, 57, 43, .05);
  color: var(--red-600);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.tb-errors ul { margin: 0; padding-inline-start: 1.125rem; }
.tb-errors:empty, .tb-errors ul:empty { display: none; }
.field-validation-error { display: block; margin-block-start: .375rem; color: var(--red-600); font-size: var(--fs-xs); font-weight: 600; }
.tb-input.input-validation-error, .tb-select.input-validation-error { border-color: var(--red-600); }

/* --------------------------------------------------------- FOOTER NEWSLETTER */

.tb-footer__news {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
}
.tb-newsletter { display: flex; gap: var(--sp-2); min-width: min(26rem, 100%); }
.tb-newsletter .tb-input {
  flex: 1;
  min-width: 0;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
  color: var(--white);
}
.tb-newsletter .tb-input::placeholder { color: rgba(255, 255, 255, .5); }
.tb-newsletter .tb-input:focus { border-color: var(--gold-500); background: rgba(255, 255, 255, .12); }

@media (max-width: 767.98px) {
  .tb-footer__news { grid-template-columns: 1fr; }
  .tb-newsletter { flex-direction: column; }
}

/* ------------------------------------------------------------- BAG (DRAWER)
   core.css already lays out .tb-cart__line (thumb / text / control column).
   These rules only add what a server-rendered line needs on top: a fixed thumb
   box, the variant + price lines, and the busy state while a request is in
   flight. Nothing here restates the grid.                                     */

.tb-cart__line img { width: 4rem; height: 4.75rem; object-fit: cover; }
.tb-cart__line-ph {
  width: 4rem; height: 4.75rem;
  border-radius: var(--r-sm);
  background: var(--page-tint);
}
.tb-cart__name { margin: 0; font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug); }
.tb-cart__name a { color: inherit; }
.tb-cart__name a:hover { color: var(--brand); }
.tb-cart__variant { margin: .1875rem 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
/* Each named choice on its own line in the drawer, where the column is narrow. */
.tb-cart__opt { display: block; }
.tb-cart__opt-key { color: var(--text-muted); }
.tb-cart__opt { color: var(--text); font-weight: 600; }
.tb-cart__opt .tb-cart__opt-key { font-weight: 400; }
.tb-cart__price { margin: .375rem 0 0; font-weight: 700; }
.tb-cart__ctl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  align-self: stretch;
}
.tb-cart__remove {
  border: 0; background: none; cursor: pointer;
  padding: .25rem; line-height: 0; border-radius: var(--r-xs);
}
.tb-cart__remove:hover { background: rgba(192, 57, 43, .08); }
.tb-cart__remove .tb-ico { width: 1rem; height: 1rem; }

/* A compact stepper for the drawer, where the full-size one does not fit. */
.tb-qty--sm { padding: .125rem; }
.tb-qty--sm .tb-qty__btn { width: 1.5rem; height: 1.5rem; }
.tb-qty--sm .tb-qty__btn .tb-ico { width: .75rem; height: .75rem; }
/* The drawer's number is a <span>, not an <input>, so it needs to be told to centre
   its digit — and to match the small buttons' height, or it inflates the row and
   leaves the number sitting above the minus and plus. */
.tb-qty--sm .tb-qty__input {
  width: 1.75rem; min-width: 0;
  height: 1.5rem;
  display: grid;
  place-items: center;
  line-height: 1;
  border: 0; background: none;
  text-align: center; font-size: var(--fs-xs); font-weight: 700;
}

.tb-cart.is-busy { cursor: progress; }
.tb-cart.is-busy .tb-cart__body { opacity: .55; pointer-events: none; }
/* ----------------------------------------------------------- CART PAGE LINES */

.tb-bag__line-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  background: var(--page-tint);
  object-fit: cover;
}

/* ---------------------------------------------------- PAYMENT / SHIP OPTIONS
   Radio cards used on checkout for delivery and payment method.                */

.tb-choice { display: grid; gap: var(--sp-3); }
.tb-choice__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-choice__opt:hover { border-color: var(--brand); }
.tb-choice__opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(60, 69, 103, .14); }
.tb-choice__opt input { accent-color: var(--brand); width: 1.125rem; height: 1.125rem; }
.tb-choice__label { font-weight: 700; }
.tb-choice__note { display: block; margin-block-start: .1875rem; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.tb-choice__price { font-weight: 700; white-space: nowrap; }

/* ----------------------------------------------------------------- ACCOUNT */

.tb-account { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 899.98px) { .tb-account { grid-template-columns: 1fr; } }

.tb-account__nav {
  display: grid;
  gap: .125rem;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.tb-account__nav a, .tb-account__nav button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .625rem .75rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  width: 100%;
}
.tb-account__nav a:hover, .tb-account__nav button:hover { background: var(--page-tint); color: var(--brand); }
.tb-account__nav a.is-current { background: var(--brand); color: var(--white); }
.tb-account__nav .tb-ico { width: 1.0625rem; height: 1.0625rem; flex: none; }

.tb-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.tb-panel + .tb-panel { margin-block-start: var(--sp-6); }
.tb-panel__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h4); font-weight: 800; }

/* Order lists / detail tables. */
.tb-orders { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tb-orders th, .tb-orders td { padding: .75rem .625rem; border-block-end: 1px solid var(--border); text-align: start; }
.tb-orders th { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.tb-orders tbody tr:last-child td { border-block-end: 0; }
.tb-orders .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tb-status {
  display: inline-block;
  padding: .1875rem .5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tb-status--pending    { background: var(--gold-100); color: #8A6214; }
.tb-status--confirmed,
.tb-status--processing { background: #DBEAFE; color: #1E3A8A; }
.tb-status--shipped    { background: #E0E7FF; color: #3730A3; }
.tb-status--delivered  { background: #DCFCE7; color: #14532D; }
.tb-status--cancelled,
.tb-status--refunded   { background: #FEE2E2; color: #991B1B; }

/* The order's status history. Named apart from core.css's .tb-timeline, which is the
   "our story" year list and lays out completely differently. */
.tb-history { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.tb-history li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); }
.tb-history .dot {
  width: .75rem; height: .75rem; margin-block-start: .3125rem;
  border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(60, 69, 103, .14);
}
.tb-history time { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- CMS PROSE
   Rich text authored in the admin editor, rendered inside a page body.         */

.tb-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.tb-prose table { width: 100%; border-collapse: collapse; margin-block: var(--sp-4); }
.tb-prose th, .tb-prose td { padding: .625rem .75rem; border: 1px solid var(--border); text-align: start; }
.tb-prose th { background: var(--page-tint); font-weight: 700; }
.tb-prose iframe { max-width: 100%; border: 0; border-radius: var(--r-md); }

/* The hero slide caption is authored in the rich editor, so its markup is the
   editor's (h1/h2/p/a) rather than the kit's classes. These rules give that
   free-form markup the hero's typography without the author needing classes. */
.tb-hero__cms > :first-child { margin-block-start: 0; }
.tb-hero__cms > :last-child { margin-block-end: 0; }
.tb-hero__cms h1, .tb-hero__cms h2 {
  margin: 0 0 var(--sp-4);
  color: var(--white);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}
.tb-hero__cms h3 { margin: 0 0 var(--sp-3); color: var(--gold-500); font-size: var(--fs-h4); font-weight: 700; }
.tb-hero__cms em { font-style: italic; color: var(--gold-500); }
.tb-hero__cms p {
  max-width: 34rem;
  margin: 0 0 var(--sp-6);
  color: rgba(255, 255, 255, .88);
  font-size: clamp(.9375rem, .9rem + .35vw, 1.125rem);
  line-height: var(--lh-base);
}
.tb-hero__cms ul { margin: 0 0 var(--sp-6); padding-inline-start: 1.125rem; color: rgba(255, 255, 255, .88); }
/* Editor links become hero buttons: the first is the primary call to action. */
.tb-hero__cms a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-end: var(--sp-3);
  margin-block-end: var(--sp-3);
  padding: .875rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tb-hero__cms a:first-of-type { border-color: transparent; background: var(--brand); }
.tb-hero__cms a:hover { transform: translateY(-1px); background: var(--brand-dark); border-color: transparent; }
.tb-hero__cms a:first-of-type:hover { background: var(--navy-700); }

/* ------------------------------------------------------------------ MISC */

.tb-swatch-btn[disabled], .tb-size[disabled] {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.tb-prod__wish.is-busy, .tb-pdp__action.is-busy { opacity: .5; pointer-events: none; }

.tb-hint--error { color: var(--red-600); font-weight: 600; }

.tb-figure--guide img { width: 100%; height: auto; border-radius: var(--r-md); }

/* Utility: a plain form that must not add layout (wish/cart POST wrappers). */
.tb-inline-form { display: contents; }

/* -------------------------------------------------------------- JOURNAL CARD
   A CMS page shown as a card (home "Reading" row, category listings). The kit
   had no article card of its own — its blog frames were bespoke one-offs — so
   this builds one from the same tokens as .tb-cat and .tb-info-card.          */

.tb-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tb-post:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.tb-post__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--page-tint);
}
.tb-post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.tb-post:hover .tb-post__media img { transform: scale(1.04); }
.tb-post__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.tb-post__date { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.tb-post__title { margin: 0; font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-snug); }
.tb-post__title a { color: inherit; }
.tb-post__title a:hover { color: var(--brand); }
.tb-post__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tb-post__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-block-start: auto; padding-block-start: var(--sp-2);
  color: var(--brand); font-size: var(--fs-sm); font-weight: 700;
}
.tb-post__more .tb-ico { width: 1rem; height: 1rem; }

/* ------------------------------------------------------- IMAGE PLACEHOLDERS
   A product with no photo yet still has to hold the grid's aspect ratio.      */

.tb-prod__ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: var(--page-tint);
  color: var(--border-strong);
}
.tb-prod__ph .tb-ico { width: 3rem; height: 3rem; }

/* -------------------------------------------------------------- SHOP FACETS
   The kit's size and colour chips were <button>s that a script tracked in
   memory. Here the whole sidebar is one GET form the server reads, so each chip
   is a <label> around a checkbox. The look is unchanged — only the on-state
   hook moves from aria-pressed to the checked input (with an .is-on class the
   server also emits, so the state survives without :has()).                   */

label.tb-size,
label.tb-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}
label.tb-size.is-on,
label.tb-size:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
label.tb-color.is-on,
label.tb-color:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--white), 0 0 0 2px var(--brand);
}
label.tb-size:focus-within,
label.tb-color:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The reset control is an <a> (it clears the query string) where the kit had a
   type="reset" button; give it the button's box so nothing shifts. */
a.tb-filters__reset-all {
  display: block;
  width: 100%;
  text-align: center;
}

/* The sort <select> sits in the toolbar next to the count. */
.tb-shop__bar .tb-select { inline-size: auto; min-inline-size: 11rem; margin-inline-start: auto; }
@media (min-width: 1024px) {
  /* Above the off-canvas breakpoint core.css hides the whole toolbar, but the
     sort control still belongs on screen — show the bar without the trigger. */
  .tb-shop__bar { display: flex; }
  .tb-shop__trigger { display: none; }
}

/* ------------------------------------------------------------ BUY-BOX OPTIONS
   Same reasoning as the shop facets: the kit's swatch and size chips were
   buttons; here they are labels over radios so the buy box is one real form the
   server can resolve without JavaScript.                                       */

label.tb-swatch-btn { cursor: pointer; margin: 0; }
label.tb-swatch-btn:has(input:checked),
input[data-axis]:checked + label.tb-swatch-btn {
  box-shadow: inset 0 0 0 3px var(--white), 0 0 0 2px var(--brand);
}
input[data-axis]:checked + label.tb-size {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
input[data-axis]:focus-visible + label.tb-swatch-btn,
input[data-axis]:focus-visible + label.tb-size {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
label.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
label.tb-swatch-btn.is-disabled { text-decoration: none; }

/* The prompt store.js raises when Add to Cart is pressed with a colour or size still
   outstanding. It has no server-rendered counterpart to inherit from — the no-JS path is the
   server's own refusal — so the buy box's error voice is defined here. */
.tb-opt__need {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--red-600);
}

/* ---------------------------------------------------------- DISABLED BUTTONS
   core.css never styled the state, so a button the page had genuinely switched off — a
   variant with no stock — still read as solid, hovered like it was live and then ignored the
   click. Damp it down and take the lift away, so the only buttons that look pressable are.  */
.tb-btn:disabled,
.tb-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.tb-btn:disabled:hover,
.tb-btn[disabled]:hover { transform: none; box-shadow: none; }
.tb-btn:disabled:hover::after,
.tb-btn[disabled]:hover::after { inset-inline-start: -60%; }

/* ------------------------------------------------------------------ BAG PAGE
   The kit's row was static markup with four columns and no remove control of
   its own. Ours is a real <form> per line, so the row grows a fifth column for
   the Remove submit, and the thumbnail is a link wrapping the image.          */

.tb-bag__row { grid-template-columns: 5.5rem minmax(0, 1fr) auto auto auto; }
.tb-bag__thumb {
  display: block;
  width: 5.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.tb-bag__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-bag__remove { border: 0; background: none; cursor: pointer; padding: .375rem; line-height: 0; border-radius: var(--r-xs); }
.tb-bag__remove:hover { background: rgba(192, 57, 43, .08); }
.tb-bag__remove .tb-ico { width: 1.125rem; height: 1.125rem; }
.tb-bag__name a { color: inherit; }
.tb-bag__name a:hover { color: var(--brand); }

@media (max-width: 599.98px) {
  /* Four content columns cannot survive a phone: stack the text under the thumb
     and let the controls share the last row. */
  .tb-bag__row {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    row-gap: var(--sp-3);
  }
  .tb-bag__thumb { width: 4.5rem; }
  .tb-bag__row > div:nth-of-type(1) { grid-column: 2 / -1; }
  .tb-bag__row .tb-qty { grid-column: 2; }
  .tb-bag__line-total { grid-column: 3; text-align: end; }
  .tb-bag__remove { grid-column: 3; justify-self: end; }
}

/* ======================================================================
   CMS CATEGORY THEMES
   A content category chooses how its pages are listed (grid / list / news /
   blogs / team / video…). These are the layouts the static kit had no
   equivalent for, built from the same tokens so a CMS listing sits next to a
   product grid without looking bolted on.
   ====================================================================== */

/* ---- list-1: media rows ---------------------------------------------- */
.tb-medialist { display: grid; gap: var(--sp-5); }
.tb-medialist__item {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.tb-medialist__item:only-child,
.tb-medialist__item:not(:has(.tb-medialist__media)) { grid-template-columns: minmax(0, 1fr); }
.tb-medialist__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--page-tint);
}
.tb-medialist__media img { width: 100%; height: 100%; object-fit: cover; }
.tb-medialist__body { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 767.98px) {
  .tb-medialist__item { grid-template-columns: minmax(0, 1fr); }
}

/* ---- list-2: compact index ------------------------------------------- */
.tb-linklist {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.tb-linklist li + li { border-block-start: 1px solid var(--border); }
.tb-linklist a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);
  font-weight: 600;
  transition: background var(--t-fast) var(--ease);
}
.tb-linklist a:hover { background: var(--page-tint); color: var(--brand); }
.tb-linklist .tb-ico { width: 1rem; height: 1rem; color: var(--page-accent); flex: none; }
.tb-linklist span { flex: 1; min-width: 0; }
.tb-linklist time { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }

/* ---- news-1: featured hero ------------------------------------------- */
.tb-hero-card {
  position: relative;
  display: block;
  min-block-size: clamp(18rem, 34vw, 26rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy-800);
  color: var(--white);
}
.tb-hero-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.tb-hero-card:hover img { transform: scale(1.03); }
.tb-hero-card__body {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  justify-content: flex-end;
  min-block-size: inherit;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(to top, rgba(11, 14, 25, .82) 0%, rgba(11, 14, 25, .35) 55%, transparent 100%);
}
.tb-hero-card__body > * { position: relative; }
.tb-hero-card__title { margin: 0; color: var(--white); font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-tight); }
.tb-hero-card__text { color: rgba(255, 255, 255, .82); max-width: 44rem; }

/* ---- news-2: date-block rows ----------------------------------------- */
.tb-newsrows { display: grid; gap: var(--sp-4); }
.tb-newsrow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tb-newsrow__date {
  display: grid; place-items: center;
  width: 4.25rem; padding-block: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--white);
  line-height: 1.1;
}
.tb-newsrow__day { font-size: var(--fs-h3); font-weight: 800; }
.tb-newsrow__month { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; }
.tb-newsrow__thumb {
  display: block; width: 5rem; aspect-ratio: 1;
  overflow: hidden; border-radius: var(--r-md); background: var(--page-tint);
}
.tb-newsrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tb-newsrow__body { display: grid; gap: var(--sp-1); }
@media (max-width: 767.98px) {
  .tb-newsrow { grid-template-columns: auto minmax(0, 1fr); }
  .tb-newsrow__thumb { display: none; }
  .tb-newsrow__cta { grid-column: 1 / -1; justify-self: start; }
}

/* ---- blogs: one wide card per row ------------------------------------ */
.tb-blogs { display: grid; gap: var(--sp-8); max-inline-size: 52rem; margin-inline: auto; }
.tb-post--wide .tb-post__media { aspect-ratio: 21 / 9; }
.tb-post--wide .tb-post__title { font-size: var(--fs-h3); }

/* ---- team ------------------------------------------------------------- */
.tb-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.tb-member { text-align: center; }
.tb-member__photo {
  display: block;
  width: 9rem; height: 9rem;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  overflow: hidden;
  border-radius: 50%;
  background: var(--page-tint);
  box-shadow: var(--sh-2);
}
.tb-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.tb-member__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--border-strong); }
.tb-member__ph .tb-ico { width: 3rem; height: 3rem; }
.tb-member__name { margin: 0 0 var(--sp-1); font-size: var(--fs-h4); font-weight: 800; }
.tb-member__name a { color: inherit; }
.tb-member__role { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- video ------------------------------------------------------------ */
.tb-post__media--embed { position: relative; aspect-ratio: 16 / 9; }
.tb-post__media--embed iframe,
.tb-post__media--embed video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}

/* ---- CMS page gallery -------------------------------------------------- */
.tb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--sp-3);
}
.tb-gallery-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--page-tint);
}
.tb-gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-base) var(--ease);
}
.tb-gallery-grid a:hover img { transform: scale(1.05); }

/* CMS page cover image: show the whole picture (no cropping), just capped in height so a tall
   upload can't swamp the viewport. The image keeps its own aspect ratio and is centred; the
   tint fills any space beside a portrait image. Overrides the global .tb-figure cover rule. */
.tb-page-cover {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
  background: var(--page-tint);
}
.tb-page-cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(620px, 78vh);
  object-fit: contain;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .tb-page-cover img { max-height: 70vh; }
}

/* ==========================================================================
   NAVY HEADER
   The bar carries the brand navy so the white logo reads as one piece with it,
   and it sits flush under the (already navy) top bar. Everything that used to
   rely on a white background is re-tuned here rather than in core.css, which
   stays the untouched kit baseline.
   ========================================================================== */
.tb-header {
  background: var(--navy-600);
  border-block-end-color: rgba(255, 255, 255, .10);
  box-shadow: 0 6px 18px -6px rgba(13, 24, 51, .35),
              0 2px 6px -2px rgba(13, 24, 51, .20);
}
.tb-header.is-stuck { border-block-end-color: rgba(255, 255, 255, .16); }

/* Nav links: white at rest, gold on hover and for the current page, with the
   underline following suit so "you are here" survives on a dark bar. */
.tb-nav__link { color: rgba(255, 255, 255, .92); }
.tb-nav__link:hover,
.tb-nav__link[aria-current="page"] { color: var(--gold-500); }
.tb-nav__link::after { background: var(--gold-500); }

/* Icon buttons were a pale chip on white; on navy they become a translucent
   well that lifts to gold. */
.tb-icon-btn {
  background: rgba(255, 255, 255, .10);
  color: #ffffff;
}
.tb-icon-btn:hover {
  background: var(--gold-500);
  color: var(--navy-700, #2E3557);
}
/* The count bubbles must stay legible against both the well and the gold hover. */
.tb-icon-btn .tb-count { border: 2px solid var(--navy-600); }

/* The burger sits on the same bar on small screens. */
.tb-burger { background: rgba(255, 255, 255, .10); color: #ffffff; }
.tb-burger:hover { background: var(--gold-500); color: var(--navy-700, #2E3557); }

/* The search panel drops out of the navy bar, so give it the same ground and
   invert the field; the white card it used to be would have looked detached. */
.tb-search { background: var(--navy-600); border-block-start: 1px solid rgba(255, 255, 255, .10); }
.tb-search__input {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #ffffff;
}
.tb-search__input::placeholder { color: rgba(255, 255, 255, .55); }

/* The kit's deep red chip was picked to sit on a white bar; on navy it drops to ~1.7:1 against
   the bar and reads as a muddy smudge. Merely brightening the fill then pushed the WHITE label
   down to 3.4:1, so this follows the same shape as the green "New" chip instead: a bright fill
   with dark text of the same hue. Measured on the navy bar: chip 4.08:1, label 6.72:1 - and it
   stays unmistakably red, so it never reads as the green chip. Scoped to the header, so the
   class keeps the kit red anywhere it still sits on white. */
.tb-header .tb-flag--featured { background: #FF8A75; color: #4A0F04; }

/* The chosen options on an order line — account, tracking and confirmation. */
.tb-order__opts {
  display: block;
  margin-block-start: .1875rem;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 400;
}

/* ------------------------------------------------------------------- IN THE APP
   The Flutter shell draws the header, the bottom menu and the cart badge itself.
   The page keeps everything else, minus the room the missing header used to take. */
.tb-in-app { padding-block-start: 0; }
.tb-in-app .tb-header,
.tb-in-app .tb-footer,
.tb-in-app .tb-drawer,
.tb-in-app .tb-topbar,
.tb-in-app .tb-back-to-top { display: none !important; }
/* Sections sized against the sticky header would otherwise leave a gap at the top. */
.tb-in-app .tb-page-head,
.tb-in-app .tb-section:first-of-type { padding-block-start: var(--sp-5); }
/* The app's own bottom bar sits over the last inch of the page. */
.tb-in-app main,
.tb-in-app > .tb-section:last-of-type { padding-block-end: var(--sp-6); }

/* ------------------------------------------------------- SHOW / HIDE A PASSWORD
   A shopper typing a password on a phone cannot see what they typed, and a wrong
   password is the commonest reason a sign-in fails.

   Called tb-eye, not tb-reveal: core.css already owns .tb-reveal as a scroll-in
   animation that starts at opacity 0, and nothing ever adds its .is-in class - so
   this button was invisible on every screen it appeared on. Two things with the
   same name is not a style clash to patch around, it is a name to change. */
.tb-field__reveal { position: relative; display: block; }
.tb-field__reveal .tb-input { padding-inline-end: 3rem; }
.tb-eye {
  position: absolute;
  inset-inline-end: .5rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.tb-eye:hover { color: var(--text); }
.tb-eye .tb-ico { width: 1.125rem; height: 1.125rem; }

/* ---- Complete the set ------------------------------------------------------------------
   Under the buy box, a tinted panel with a sideways row of small cards: photo on the left,
   name, price and the Add pill on the right. Three to a row on a laptop, two on a tablet,
   one and a peek of the next on a phone. The card in the middle of the row stands a little
   larger (product.js sets .is-center); when everything fits, the row is centred and still. */
.tb-set {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.125rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--page-tint);
}
.tb-set__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-4);
}
.tb-set__title { margin: .25rem 0 0; font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; color: var(--brand); }
.tb-set__arrows { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.tb-set__arrows[hidden] { display: none; }
.tb-set__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tb-set__arrow:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--white); }
.tb-set__arrow:disabled { opacity: .4; cursor: default; }
.tb-set__arrow .tb-ico { width: 1rem; height: 1rem; }
[dir="rtl"] .tb-set__arrow .tb-ico { transform: scaleX(-1); }

.tb-set__track {
  --set-gap: var(--sp-4);
  display: flex;
  gap: var(--set-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* room around the cards for the middle one to grow into, and its shadow; the negative margin keeps the
     panel's own spacing as it was */
  padding-block: 1.25rem;
  margin-block: -1.25rem;
  padding-inline: 1rem;
  margin-inline: -1rem;
  scroll-padding-inline: 1rem;   /* snap to the padding edge, so the first card keeps its room */
}
.tb-set__track::-webkit-scrollbar { display: none; }
.tb-set__track.is-static { justify-content: center; }
.tb-set__slot {
  flex: 0 0 calc((100% - 2rem - 2 * var(--set-gap)) / 3);
  min-width: 0;
  display: flex;
  scroll-snap-align: start;
}
.tb-set__card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  transform: scale(.96);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.tb-set__track:not(.has-center) .tb-set__card { transform: none; }
/* A tight shadow: the row scrolls, so it clips whatever spills past its padding, and the site's
   usual deep shadow came out as a grey slab behind the card. */
.tb-set__slot.is-center > .tb-set__card {
  transform: scale(1.04);
  border-color: var(--gold-500);
  box-shadow: 0 8px 18px -8px rgba(13, 24, 51, .22);
}
.tb-set__media {
  flex: 0 0 auto;
  display: block;
  width: clamp(5.5rem, 8vw, 7.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--page-tint);
}
.tb-set__media img { width: 100%; height: 100%; object-fit: cover; }
.tb-set__body { flex: 1 1 auto; min-width: 0; display: grid; gap: .25rem; }
.tb-set__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tb-set__name {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tb-set__name a { color: var(--brand); }
.tb-set__name a:hover { text-decoration: underline; }
.tb-set__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: .25rem; }
.tb-set__foot .tb-price { margin: 0; }
/* The card's own Add control, which the product grid hides over the photo until hover (and
   hides outright on touch screens and in the app): here it always shows, beside the price. */
.tb-set .tb-set__foot .tb-prod__quick {
  position: static;
  display: flex;
  padding: 0;
  transform: none;
  transition: none;
}
.tb-set__dots { display: flex; justify-content: center; gap: .375rem; margin-block-start: var(--sp-4); }
.tb-set__dots[hidden] { display: none; }
.tb-set__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--slate-300, #cbd5e1);
  cursor: pointer;
  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.tb-set__dot.is-active { width: 1.5rem; background: var(--gold-500); }
@media (max-width: 1100px) {
  .tb-set__slot { flex-basis: calc((100% - 2rem - var(--set-gap)) / 2); }
}
@media (max-width: 640px) {
  .tb-set__track { --set-gap: var(--sp-3); }
  .tb-set__slot { flex-basis: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-set__track { scroll-behavior: auto; }
  .tb-set__card { transition: none; }
}

/* ---- a designed line: its artwork, front and back --------------------------------------
   The front, and beside it the back when the studio sent one, each marked "New Design" and -
   when there are two - "Front" / "Back". The row's first column widens to hold the pair. */
.tb-bag__thumbs { display: flex; gap: .375rem; }
.tb-design-thumb { position: relative; }
.tb-design-thumb__new,
.tb-design-thumb__side {
  position: absolute;
  padding: .125rem .375rem;
  border-radius: .25rem;
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}
.tb-design-thumb__new { inset-block-start: .25rem; inset-inline-end: .25rem; background: var(--red-600); }
.tb-design-thumb__side { inset-block-end: .25rem; inset-inline-start: .25rem; background: rgba(15, 23, 42, .82); }
.tb-design-thumb__side--back { background: #1d7fe0; }
.tb-bag__row--pair { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
@media (max-width: 768px) {
  .tb-bag__row--pair:not(.tb-bag__row--compact) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tb-bag__row:not(.tb-bag__row--compact) .tb-bag__thumbs { grid-area: thumb; }
}
@media (max-width: 599.98px) {
  .tb-bag__row--pair { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* The header drawer's version: the back of a design small over the front's corner. */
.tb-cart__pair { position: relative; display: block; width: 4rem; }
/* the checkout summary's thumbnail of a design with a back: the same small corner picture */
.tb-bag__thumb--pair { position: relative; overflow: visible !important; }
.tb-bag__row--compact .tb-bag__thumb--pair .tb-thumb-back {
  position: absolute;
  inset-block-end: -.25rem;
  inset-inline-end: -.25rem;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: .375rem;
  background: var(--surface-media);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
.tb-cart__line .tb-cart__pair .tb-cart__back {
  position: absolute;
  inset-block-end: -.25rem;
  inset-inline-end: -.25rem;
  width: 1.875rem;
  height: 1.875rem;
  border: 2px solid #fff;
  border-radius: .375rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}