/* ============================================================================
   Mr Tommy & Little Bori — core.css
   Direction-agnostic design system: tokens, base, layout and every component.
   Written entirely with CSS logical properties, so the same rules serve the
   LTR (English) and RTL (Arabic) builds. Language-specific type and mirroring
   live in css/style-en.css and css/style-ar.css.

   Colour values are the exact fills lifted from the Figma PDF exports.
   ------------------------------------------------------------------------
   01  Design tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Buttons
   06  Badges, pills & tags
   07  Top bar
   08  Header, navigation, drawer, search
   09  Hero slider
   10  Section headings
   11  Category cards
   12  Filter pills
   13  Product cards
   14  App download stage
   15  Footer
   16  Video modal
   17  Cart drawer, toast, back-to-top
   18  Motion & utilities
   19  Shop: layout, filter sidebar, pagination
   20  Product details: gallery, buy box, tabs
   21  Secondary pages: listings, commerce, editorial, policy
   22  Responsive
   23  Page themes
   ========================================================================= */


/* ==========================================================================
   01 — DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand palette (sampled from the PDF vector fills) ---------------- */
  --navy-900: #0B0E19;   /* footer ground                                    */
  --navy-800: #151B2E;
  --navy-700: #2E3557;   /* pressed / darker navy                            */
  --navy-600: #3C4567;   /* PRIMARY brand navy                              */
  --navy-500: #4E5880;
  --navy-400: #6E7899;

  --ink:      #0D1F1E;   /* body copy                                        */
  --ink-soft: #6E7170;   /* as sampled from the PDF — kept for the record     */
  /* #6E7170 measures 4.35:1 on the cream tint, under the 4.5:1 AA floor for
     body text. Four points darker is visually indistinguishable and clears
     every background in the system (worst case 4.90:1 on #F5F0EB). */
  --ink-muted: #666967;

  --gold-600: #DEA952;
  --gold-500: #E3B54A;   /* PRIMARY accent                                   */
  --gold-400: #E7B64A;
  --gold-100: #FEF9C3;

  /* #C95F45 as sampled carries white text at 4.03:1, just under AA. Six points
     darker reaches 4.65:1 and is indistinguishable beside the original. */
  --coral-600: #BE543A;
  --red-600:   #C0392B;  /* SALE badge                                       */
  --red-500:   #D22B1A;  /* discount figure                                  */
  --green-500: #12D882;  /* NEW badge                                        */
  --green-900: #12463F;
  --teal-700:  #0F6D63;
  --brown-500: #8B7355;
  --pink-300:  #F9A8D4;

  --white:    #FFFFFF;
  --cream-100:#FAFAF8;
  --cream-200:#F5F0EB;
  --cream-300:#F0F0ED;
  --slate-50: #F1F5F9;
  --grey-300: #C5C5C5;
  --grey-500: #8E8E8E;   /* AA-safe placeholder / disabled text              */
  --grey-600: #8B8B8B;
  --grey-700: #565656;

  /* ---- Semantic roles -------------------------------------------------- */
  --bg:            var(--white);
  --bg-alt:        var(--slate-50);
  --surface:       var(--white);
  /* Plain white behind every product photograph. It was a white-to-cream gradient, which read as
     a beige frame around every cut-out shot - the garment on a white square inside a cream one -
     and the owner wants product backgrounds white. One token drives the shop cards, the product
     page stage and thumbnails, and the cart thumbnail, so they change together. */
  --surface-media: #FFFFFF;
  --text:          var(--ink);
  --text-muted:    var(--ink-muted);
  --brand:         var(--navy-600);
  --brand-dark:    var(--navy-700);
  --on-brand:      var(--white);
  --accent:        var(--gold-500);
  --on-accent:     #23282F;
  --border:        #E7E9F0;
  --border-strong: #D8DCE7;

  /* Per-page accent hook. Each page re-points these so no two pages read as
     copies of one another while the identity stays intact. */
  --page-accent:      var(--gold-500);
  /* The accent as TYPE on a light ground. Gold #DEA952 is 2.12:1 on white —
     unreadable — so any theme whose accent is gold points this at a darkened
     gold instead. Fills keep --page-accent; text uses --page-accent-ink. */
  --page-accent-ink:  var(--navy-600);
  --page-tint:        var(--slate-50);
  --page-tint-warm:   var(--cream-100);

  /* ---- Spacing (4px base) --------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 1.75rem; --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;

  --section-y:   clamp(3.5rem, 6vw, 6.5rem);
  --gutter:      clamp(1rem, 3.2vw, 2rem);
  --container:   75rem;      /* 1200px — matches the Figma content column   */
  --container-wide: 82.5rem; /* 1320px                                       */

  /* ---- Radii ----------------------------------------------------------- */
  --r-xs: .375rem; --r-sm: .5rem; --r-md: .75rem;
  --r-lg: .875rem; --r-xl: 1.25rem; --r-2xl: 1.75rem; --r-pill: 62.4375rem;

  /* ---- Elevation (navy-tinted, never neutral black) -------------------- */
  --sh-1: 0 1px 2px rgba(13, 24, 51, .05), 0 1px 3px rgba(13, 24, 51, .04);
  --sh-2: 0 4px 12px rgba(13, 24, 51, .06), 0 2px 4px rgba(13, 24, 51, .04);
  --sh-3: 0 12px 32px rgba(13, 24, 51, .10), 0 4px 10px rgba(13, 24, 51, .05);
  --sh-4: 0 24px 60px rgba(13, 24, 51, .16), 0 8px 20px rgba(13, 24, 51, .07);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast: .2s;  --t-base: .35s;  --t-slow: .55s;

  /* ---- Type scale (fluid) --------------------------------------------- */
  --fs-display: clamp(2.25rem, 1.1rem + 4.6vw, 4rem);
  --fs-h1:      clamp(1.875rem, 1rem + 3.4vw, 3rem);
  --fs-h2:      clamp(1.625rem, 1.05rem + 2.2vw, 2.5rem);
  --fs-h3:      clamp(1.125rem, 1rem + .7vw, 1.5rem);
  --fs-h4:      clamp(1rem, .95rem + .35vw, 1.1875rem);
  --fs-body:    clamp(.9375rem, .91rem + .16vw, 1rem);
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;
  --fs-2xs:     .6875rem;

  --lh-tight: 1.1;  --lh-snug: 1.3;  --lh-base: 1.65;

  /* ---- Fixed chrome ---------------------------------------------------- */
  --logo-h:    3.25rem;   /* identical in header and footer, every page      */
  --topbar-h:  2.75rem;
  --header-h:  5.625rem;
  --header-h-sm: 4.5rem;
  --z-header: 1000; --z-drawer: 1100; --z-modal: 1200; --z-toast: 1300;
}


/* ==========================================================================
   02 — RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  /* Belongs here, NOT on <body>. On body, overflow-x forces the used value of
     overflow-y to auto, which makes body a scroll container — and a sticky child
     then resolves against body's scrollport rather than the viewport, which
     Chrome renders as the header lagging and snapping during scroll. On html it
     propagates to the viewport, which is the scrollport sticky already uses. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Skip link — first tab stop on every page */
.tb-skip {
  position: fixed;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: inset-block-start var(--t-fast) var(--ease);
}
.tb-skip:focus { inset-block-start: var(--sp-4); }

/* Shared icon sprite host */
.tb-sprite { display: none; }
.tb-ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
          stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
          flex: 0 0 auto; }
.tb-ico--fill { fill: currentColor; stroke: none; }

::selection { background: var(--gold-500); color: #1a1a1a; }


/* ==========================================================================
   03 — TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-block-end: 0; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-xs); }

.tb-eyebrow {
  display: block;
  margin-block-end: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tb-lead { font-size: clamp(1rem, .96rem + .3vw, 1.0625rem); color: var(--text-muted); }
.tb-muted { color: var(--text-muted); }
.tb-accent { color: var(--page-accent-ink); }

/* Numerals stay tabular anywhere money or counts are shown */
.tb-num { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   04 — LAYOUT PRIMITIVES
   ========================================================================== */
/* --container is the width of the CONTENT COLUMN, not of the box. Adding the
   gutters back means the measured 1200px column from the frames is reproduced
   exactly instead of coming out 2x gutter narrower — which was quietly making
   every card ~5% smaller than designed. */
.tb-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tb-container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

/* Bootstrap's container is pinned to the same column so the two systems agree */
.container, .container-fluid { padding-inline: var(--gutter); }
@media (min-width: 1200px) {
  .container { max-width: calc(var(--container) + 2 * var(--gutter)); }
}

.tb-section { padding-block: var(--section-y); position: relative; }
.tb-section--tint      { background: var(--page-tint); }
.tb-section--tint-warm { background: var(--page-tint-warm); }
.tb-section--flush-top { padding-block-start: 0; }

/* Soft transition between two tinted bands */
.tb-section--split {
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--slate-50) 62%, var(--cream-100) 62%, var(--cream-100) 100%);
}

.tb-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.tb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tb-stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.tb-row     { display: flex; align-items: center; gap: var(--sp-3); }
.tb-row--between { justify-content: space-between; }
.tb-row--wrap    { flex-wrap: wrap; }


/* ==========================================================================
   05 — BUTTONS
   ========================================================================== */
.tb-btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.875rem;
  padding: .6875rem 1.375rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
/* Sheen that sweeps across on hover — reads as light on a premium surface */
.tb-btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--t-slow) var(--ease);
}
.tb-btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-3); }
.tb-btn:hover::after { inset-inline-start: 115%; }
.tb-btn:active { transform: translateY(0); box-shadow: var(--sh-1); }

.tb-btn .tb-ico { width: 1.05em; height: 1.05em; transition: transform var(--t-base) var(--ease); }
.tb-btn:hover .tb-ico--shift { transform: translateX(.2rem); }

/* Variants */
.tb-btn--primary { --btn-bg: var(--brand); --btn-fg: var(--white); }
.tb-btn--primary:hover { --btn-bg: var(--brand-dark); }

.tb-btn--gold  { --btn-bg: var(--gold-500); --btn-fg: var(--on-accent); }
.tb-btn--gold:hover { --btn-bg: var(--gold-600); }

.tb-btn--coral { --btn-bg: var(--coral-600); --btn-fg: var(--white); }
.tb-btn--coral:hover { --btn-bg: #B44F37; }

.tb-btn--light { --btn-bg: var(--white); --btn-fg: var(--brand); }
.tb-btn--light:hover { --btn-bg: #F4F6FB; }

.tb-btn--outline {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong);
}
.tb-btn--outline:hover { --btn-bg: var(--brand); --btn-fg: var(--white); --btn-bd: var(--brand); }

.tb-btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, .1); --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
}
.tb-btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .2); --btn-bd: rgba(255, 255, 255, .6); }

/* Sizes */
.tb-btn--sm { min-height: 2.375rem; padding: .5rem 1rem; font-size: var(--fs-xs); }
.tb-btn--lg { min-height: 3.25rem; padding: .875rem 1.875rem; font-size: var(--fs-body); }
.tb-btn--block { width: 100%; }

/* Circular icon button */
.tb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--slate-50);
  color: var(--brand);
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-icon-btn:hover { background: var(--brand); color: var(--white); transform: translateY(-2px); }
.tb-icon-btn .tb-ico { width: 1.125rem; height: 1.125rem; }

/* Count bubble on the wishlist / cart buttons */
.tb-icon-btn { position: relative; }
.tb-count {
  position: absolute;
  inset-block-start: -.125rem;
  inset-inline-end: -.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: .25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--red-600);
  color: var(--white);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The bubble carries display:grid, which beats the browser's [hidden] rule —
   so an empty cart needs this to actually disappear. */
.tb-count[hidden] { display: none; }
/* A short pop when the number grows, so adding something draws the eye up here. */
.tb-count.is-pop { animation: tb-count-pop var(--t-base) var(--ease-out); }
/* Starts and ends at full size: a paused or interrupted animation must never
   leave the badge shrunk, so the pop only ever bulges outwards. */
@keyframes tb-count-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .tb-count.is-pop { animation: none; } }


/* ==========================================================================
   06 — BADGES, PILLS & TAGS
   ========================================================================== */
.tb-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  border-radius: var(--r-xs);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.tb-badge--sale      { background: var(--red-600); }
.tb-badge--hot       { background: var(--red-500); }
.tb-badge--new       { background: var(--green-500); color: #063D25; }
.tb-badge--best      { background: var(--gold-500); color: var(--on-accent); }
.tb-badge--exclusive { background: var(--navy-600); }
.tb-badge--stock     { background: rgba(18, 216, 130, .16); color: var(--green-900); }
/* The same badge once the state stops being "In stock": out of stock, or a combination that is
   not sold. A soft red, so it reads as a change rather than as more good news in green. */
.tb-badge--stock.is-unavailable { background: rgba(192, 57, 43, .12); color: var(--red-600); }

/* Nav flags ("Featured" / "New" above a menu item) */
.tb-flag {
  position: absolute;
  inset-block-start: -.9rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: .0625rem .375rem;
  border-radius: var(--r-xs);
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: capitalize;
  color: var(--white);
  white-space: nowrap;
  pointer-events: none;
}
.tb-flag--featured { background: var(--red-600); }
.tb-flag--new      { background: var(--green-500); color: #063D25; }

/* Glass pill used above hero headlines */
.tb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .4375rem .875rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  background: rgba(13, 18, 38, .42);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tb-pill .tb-ico { width: .875rem; height: .875rem; color: var(--gold-500); }


/* ==========================================================================
   07 — TOP BAR
   ========================================================================== */
.tb-topbar {
  background: var(--navy-600);
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-xs);
}
.tb-topbar__inner {
  /* 1fr | auto | 1fr — the promo is centred against the BAR, not against
     whatever happens to sit either side of it. justify-content: space-between
     would push it off-centre by half the difference between the contact group
     and the social cluster. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
}
.tb-topbar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  grid-column: 1;
}
.tb-topbar__item { display: inline-flex; align-items: center; gap: .4375rem; }
.tb-topbar__item .tb-ico { width: .875rem; height: .875rem; opacity: .8; }
.tb-topbar a:hover { color: var(--gold-500); }
.tb-topbar__promo {
  /* The global `p` rule gives every paragraph a bottom margin, and flex/grid
     centring aligns the MARGIN box — which lifted this text half a margin
     above the contact links beside it. Zeroing it puts them on one line. */
  margin: 0;
  /* Pinned explicitly: without this, hiding the contact group at <=768px would
     let auto-placement pull the promo into column 1 and it would stop being
     centred at exactly the breakpoint where centring matters most. */
  grid-column: 2;
  text-align: center;
  font-weight: 500;
}
.tb-topbar__promo a { color: var(--gold-500); font-weight: 700; text-decoration: underline;
                      text-underline-offset: .18em; }

/* Social cluster — occupies the end column of the top bar */
.tb-topbar__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
  grid-column: 3;
}
.tb-topbar__social a {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: rgba(255, 255, 255, .82);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tb-topbar__social a:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--gold-500);
  transform: translateY(-1px);
}
.tb-topbar__social .tb-ico { width: .9375rem; height: .9375rem; }

/* Language switcher — RETAINED BUT NOT CURRENTLY RENDERED.
   The top bar shows social icons instead; these rules are kept so the switcher
   can be restored by pasting the markup back, without rebuilding the styles. */
.tb-lang { position: relative; }
.tb-lang__toggle {
  display: inline-flex; align-items: center; gap: .375rem;
  color: inherit; font-size: var(--fs-xs); font-weight: 600;
}
.tb-lang__toggle .tb-ico:last-child { width: .75rem; height: .75rem;
  transition: transform var(--t-fast) var(--ease); }
.tb-lang.is-open .tb-lang__toggle .tb-ico:last-child { transform: rotate(180deg); }
.tb-lang__menu {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: 0;
  min-width: 8.5rem;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              visibility var(--t-base);
  z-index: 20;
}
.tb-lang.is-open .tb-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tb-lang__menu a {
  display: block; padding: .5rem .75rem; border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600;
}
.tb-lang__menu a:hover, .tb-lang__menu a[aria-current="true"] {
  background: var(--slate-50); color: var(--brand);
}


/* ==========================================================================
   08 — HEADER / NAV / DRAWER / SEARCH
   ========================================================================== */
.tb-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  /* Opaque, not translucent: the frame shows a clean white bar sitting ON the
     page, and a see-through bar lets the hero bleed up into the navigation. */
  background: var(--white);
  /* The bar carries its own edge and lift at rest — that is what separates it
     from the content in the frame. Two layers: a hairline that reads as the
     bar's boundary, and a soft spread that reads as elevation. */
  border-block-end: 1px solid rgba(13, 24, 51, .07);
  box-shadow: 0 6px 18px -6px rgba(13, 24, 51, .12),
              0 2px 6px  -2px rgba(13, 24, 51, .06);
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
/* Scrolled: the same shadow, deepened — the bar is now floating over content
   rather than resting at the top of it. */
.tb-header.is-stuck {
  border-block-end-color: rgba(13, 24, 51, .10);
  box-shadow: 0 14px 32px -10px rgba(13, 24, 51, .20),
              0 4px 10px  -3px rgba(13, 24, 51, .10);
}

.tb-header__inner {
  /* 1fr | auto | 1fr keeps the navigation optically dead-centre in the bar
     regardless of how wide the logo or the action cluster happens to be —
     which is how the Figma frame lays it out. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  /* Constant height, on purpose. An earlier revision shrank this to
     --header-h-sm once scrolled, which is an 18px layout change on a sticky
     element: it reflowed the whole page under the header and snapped rather than
     animated. The scrolled state is now carried entirely by the shadow, which is
     paint-only and cannot move anything. --header-h-sm is still used for the
     sticky offsets of the shop sidebar and the summary panels. */
  min-height: var(--header-h);
}

/* Logo — identical box in header and footer on every page.
   The height is set on the link and the image simply fills it, so the
   <picture> wrapper cannot introduce an intrinsic-size conflict. */
.tb-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  block-size: var(--logo-h);
}
.tb-logo picture { display: block; block-size: 100%; }
.tb-logo img {
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  transition: transform var(--t-base) var(--ease);
}
.tb-logo:hover img { transform: scale(1.04); }

/* Desktop navigation */
.tb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.tb-nav__item { position: relative; }
.tb-nav__link {
  position: relative;
  display: inline-block;
  padding-block: .375rem;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
}
.tb-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--page-accent);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--t-base) var(--ease);
}
.tb-nav__link:hover, .tb-nav__link[aria-current="page"] { color: var(--brand); }
.tb-nav__link:hover::after, .tb-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.tb-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  grid-column: 3;
}

/* Hamburger */
.tb-burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--slate-50);
  color: var(--brand);
  place-items: center;
}
.tb-burger__bars { position: relative; width: 1.125rem; height: .75rem; }
.tb-burger__bars span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease),
              width var(--t-base) var(--ease);
}
.tb-burger__bars span:nth-child(1) { inset-block-start: 0; }
.tb-burger__bars span:nth-child(2) { inset-block-start: 50%; translate: 0 -50%; width: 75%; }
.tb-burger__bars span:nth-child(3) { inset-block-end: 0; }
.tb-burger[aria-expanded="true"] .tb-burger__bars span:nth-child(1) { transform: translateY(.3125rem) rotate(45deg); }
.tb-burger[aria-expanded="true"] .tb-burger__bars span:nth-child(2) { opacity: 0; }
.tb-burger[aria-expanded="true"] .tb-burger__bars span:nth-child(3) { transform: translateY(-.3125rem) rotate(-45deg); }

/* Mobile drawer */
.tb-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--sh-4);
  transform: translateX(105%);
  /* Hidden as well as translated: a fixed element is not clipped by an
     ancestor's overflow, so visibility is what actually takes it off the page
     for both painting and assistive tech. */
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
  overscroll-behavior: contain;
}
[dir="rtl"] .tb-drawer { transform: translateX(-105%); }
.tb-drawer.is-open { transform: translateX(0); visibility: visible; }

.tb-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--border);
}
.tb-drawer__close {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--slate-50); color: var(--brand);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tb-drawer__close:hover { background: var(--red-600); color: var(--white); transform: rotate(90deg); }
.tb-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-8); }
.tb-drawer__nav > li { border-block-end: 1px solid var(--border); }
.tb-drawer__nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-4);
  font-size: 1.0625rem; font-weight: 700;
  opacity: 0;
  transform: translateY(.75rem);
}
.tb-drawer.is-open .tb-drawer__nav a { animation: tbDrawerIn .5s var(--ease-out) forwards; }
.tb-drawer__nav a:hover { color: var(--brand); }
.tb-drawer__nav li:nth-child(1) a { animation-delay: .06s; }
.tb-drawer__nav li:nth-child(2) a { animation-delay: .11s; }
.tb-drawer__nav li:nth-child(3) a { animation-delay: .16s; }
.tb-drawer__nav li:nth-child(4) a { animation-delay: .21s; }
.tb-drawer__nav li:nth-child(5) a { animation-delay: .26s; }
.tb-drawer__nav li:nth-child(6) a { animation-delay: .31s; }
@keyframes tbDrawerIn { to { opacity: 1; transform: translateY(0); } }
.tb-drawer__foot { margin-block-start: var(--sp-8); display: grid; gap: var(--sp-3); }
.tb-drawer__meta { margin-block-start: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
.tb-drawer__meta a { display: flex; align-items: center; gap: .5rem; padding-block: .25rem; }

/* Shared scrim behind drawer / modal */
.tb-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(11, 14, 25, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.tb-scrim.is-on { opacity: 1; visibility: visible; }

/* Search panel */
.tb-search {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-drawer);
  padding: clamp(1.5rem, 5vw, 3.5rem) 0;
  background: var(--white);
  box-shadow: var(--sh-3);
  transform: translateY(-102%);
  transition: transform var(--t-slow) var(--ease-out);
}
.tb-search.is-open { transform: translateY(0); }
/* The underline IS the field. It carries the focus indication for the input, so
   the input itself needs no ring of its own — see .tb-search__input below. */
.tb-search__form {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block-end: var(--sp-4);
  /* --grey-500 rather than --border-strong: at rest this line is the only thing
     drawing the field boundary, and 1.4.11 wants 3:1 for that (#8E8E8E is 3.15:1
     on white; #D8DCE7 was 1.28:1). On focus it goes navy — a large, unmistakable
     change of state that replaces the ring the input no longer draws. */
  border-block-end: 2px solid var(--grey-500);
  transition: border-color var(--t-base) var(--ease);
}
.tb-search__form:focus-within { border-block-end-color: var(--brand); }
.tb-search__form .tb-ico { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.tb-search__input {
  flex: 1 1 auto; min-width: 0;
  /* appearance:none strips the user-agent search-field box. Without it Chrome on
     Windows keeps type="search" as an inset control and paints its own edge. */
  -webkit-appearance: none;
  appearance: none;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(1.125rem, 1rem + 1.4vw, 1.75rem);
  font-weight: 700;
  /* The hint is longer than the field below 480px. An ellipsis reads as "there is
     more"; a hard cut mid-word just reads as broken. */
  text-overflow: ellipsis;
}
.tb-search__input::placeholder { color: var(--grey-500); }
/* No ring around the field: focus is signalled by the form underline turning
   navy (see .tb-search__form:focus-within), a larger and clearer indicator than
   a 2px outline drawn over the panel's own edge. */
.tb-search__input:focus,
.tb-search__input:focus-visible { outline: none; box-shadow: none; }
/* Chrome's own search affordances — the inner shadow slot and the clear "X" —
   would sit inside the underline and read as a second, competing border. */
.tb-search__input::-webkit-search-decoration,
.tb-search__input::-webkit-search-cancel-button,
.tb-search__input::-webkit-search-results-button,
.tb-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.tb-search__hint { margin-block-start: var(--sp-4); display: flex; flex-wrap: wrap;
                   gap: var(--sp-2); align-items: center; font-size: var(--fs-sm);
                   color: var(--text-muted); }
.tb-search__hint a {
  padding: .3125rem .75rem; border: 1px solid var(--border);
  border-radius: var(--r-pill); font-weight: 600;
}
.tb-search__hint a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }


/* ==========================================================================
   09 — HERO SLIDER
   ========================================================================== */
.tb-hero { position: relative; isolation: isolate; background: var(--navy-800); overflow: hidden; }

.tb-hero__viewport { position: relative; }
.tb-hero__track { display: grid; }
.tb-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  /* 40.5vw reproduces the 2.468:1 hero band from the Figma frame; the clamp
     keeps it usable on very small and very large viewports. */
  min-height: clamp(30rem, 40.5vw, 48.75rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.tb-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.tb-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.tb-hero__media img,
.tb-hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slow drift so a still slide never looks frozen.
     --hero-flip is -1 in the RTL build: the photography puts its subject on
     the right and its negative space on the left, which is exactly backwards
     once the headline moves to the right, so the frame is mirrored. */
  transform: scaleX(var(--hero-flip, 1)) scale(1.06);
  transition: transform 8s linear;
}
.tb-hero__slide.is-active .tb-hero__media img,
.tb-hero__slide.is-active .tb-hero__media video {
  transform: scaleX(var(--hero-flip, 1)) scale(1);
}

/* Legibility scrim: heavy on the text side, clear over the subject */
.tb-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to var(--hero-scrim-dir, right),
      rgba(13, 18, 40, .88) 0%,
      rgba(13, 18, 40, .70) 32%,
      rgba(13, 18, 40, .28) 60%,
      rgba(13, 18, 40, .10) 100%);
}
.tb-hero__slide--warm .tb-hero__media::after {
  background:
    linear-gradient(to var(--hero-scrim-dir, right),
      rgba(28, 20, 8, .84) 0%,
      rgba(24, 18, 10, .62) 34%,
      rgba(20, 16, 10, .22) 64%,
      rgba(20, 16, 10, .06) 100%);
}

.tb-hero__copy {
  max-width: 38rem;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  color: var(--white);
}
.tb-hero__title {
  margin-block: var(--sp-5) var(--sp-5);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--white);
  text-wrap: balance;
}
.tb-hero__title em { font-style: normal; color: var(--gold-500); }
.tb-hero__text {
  max-width: 32rem;
  margin-block-end: var(--sp-7);
  color: rgba(255, 255, 255, .80);
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.75;
}
.tb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Entrance choreography — staggered, replayed on every slide change */
.tb-hero__copy > * { opacity: 0; transform: translateY(1.75rem); }
.tb-hero__slide.is-active .tb-hero__copy > * {
  animation: tbHeroIn .9s var(--ease-out) forwards;
}
.tb-hero__slide.is-active .tb-hero__copy > *:nth-child(1) { animation-delay: .18s; }
.tb-hero__slide.is-active .tb-hero__copy > *:nth-child(2) { animation-delay: .30s; }
.tb-hero__slide.is-active .tb-hero__copy > *:nth-child(3) { animation-delay: .42s; }
.tb-hero__slide.is-active .tb-hero__copy > *:nth-child(4) { animation-delay: .54s; }
@keyframes tbHeroIn { to { opacity: 1; transform: translateY(0); } }

/* Play affordance on the video slide */
.tb-hero__play {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--white); font-weight: 700; font-size: var(--fs-sm);
}
.tb-hero__play-ring {
  position: relative;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.tb-hero__play-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  animation: tbPulse 2.6s var(--ease-out) infinite;
}
.tb-hero__play:hover .tb-hero__play-ring { transform: scale(1.08); background: var(--gold-500); }
.tb-hero__play .tb-ico { width: 1.125rem; height: 1.125rem; margin-inline-start: .125rem; }
@keyframes tbPulse {
  0%   { transform: scale(1);    opacity: .9; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* Controls */
.tb-hero__controls {
  position: absolute;
  inset-block-end: clamp(1.25rem, 3vw, 2.5rem);
  inset-inline: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  pointer-events: none;
}
.tb-hero__controls > * { pointer-events: auto; }

.tb-hero__dots { display: flex; align-items: center; gap: var(--sp-2); }
.tb-hero__dot {
  position: relative;
  display: grid;
  align-items: center;
  width: 2.25rem;
  /* 24px tall so the control clears the WCAG 2.5.8 target floor; the visible
     track below is still 4px, drawn by ::before and centred in the button. */
  height: 1.5rem;
  background: none;
  transition: width var(--t-base) var(--ease);
}
.tb-hero__dot::before,
.tb-hero__dot::after {
  content: "";
  grid-area: 1 / 1;
  height: .25rem;
  border-radius: var(--r-pill);
}
.tb-hero__dot::before {
  width: 100%;
  background: rgba(255, 255, 255, .3);
  transition: background-color var(--t-base) var(--ease);
}
.tb-hero__dot::after {
  width: 0;
  justify-self: start;
  background: var(--gold-500);
}
.tb-hero__dot:hover::before { background: rgba(255, 255, 255, .55); }
.tb-hero__dot.is-active { width: 4.5rem; }
.tb-hero__dot.is-active::before { background: rgba(255, 255, 255, .28); }
.tb-hero__dot.is-active::after { animation: tbDotFill var(--hero-delay, 7s) linear forwards; }
.tb-hero.is-paused .tb-hero__dot.is-active::after { animation-play-state: paused; }
@keyframes tbDotFill { from { width: 0; } to { width: 100%; } }

.tb-hero__arrows { display: flex; gap: var(--sp-2); }
.tb-hero__arrow {
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(13, 18, 40, .35);
  backdrop-filter: blur(6px);
  color: var(--white);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-hero__arrow:hover { background: var(--white); border-color: var(--white); color: var(--brand); }
.tb-hero__arrow .tb-ico { width: 1.125rem; height: 1.125rem; }
/* Chevrons follow the writing direction */
[dir="rtl"] .tb-hero__arrow .tb-ico { transform: scaleX(-1); }


/* ==========================================================================
   10 — SECTION HEADINGS
   ========================================================================== */
.tb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: clamp(1.75rem, 3.4vw, 2.75rem);
}
.tb-section-head__title { font-size: var(--fs-h2); letter-spacing: -.01em; }
.tb-section-head__text { margin-block-start: var(--sp-3); max-width: 34rem; color: var(--text-muted); }


/* ==========================================================================
   11 — CATEGORY CARDS
   ========================================================================== */
.tb-cat {
  position: relative;
  display: block;
  aspect-ratio: 34 / 46;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-800);
  box-shadow: var(--sh-2);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.tb-cat:hover { transform: translateY(-.5rem); box-shadow: var(--sh-4); }

.tb-cat__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease), filter var(--t-slow) var(--ease);
}
.tb-cat:hover .tb-cat__img { transform: scale(1.07); }

.tb-cat::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(9, 13, 28, .78) 0%,
    rgba(9, 13, 28, .45) 34%,
    rgba(9, 13, 28, .06) 62%,
    rgba(9, 13, 28, .28) 100%);
  transition: opacity var(--t-slow) var(--ease);
}
.tb-cat:hover::after { opacity: .88; }

.tb-cat__body {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--white);
}
.tb-cat__title {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--white);
}
.tb-cat__text {
  margin-block: .4375rem var(--sp-4);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.tb-cat .tb-btn { pointer-events: none; }   /* whole card is the link */

/* What sits inside each tile, level by level (Clothes > Men > Hoodies): the
   tiles themselves stop at the second level. */
.tb-cat-tree {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
  margin-block-start: var(--sp-6);
}
.tb-cat-tree__group {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tb-cat-tree__head {
  display: inline-block;
  margin-block-end: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.tb-cat-tree__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tb-cat-tree__list a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.tb-cat-tree__head:hover, .tb-cat-tree__list a:hover { color: var(--brand); }
/* a level that has its own children reads as a sub-heading */
.tb-cat-tree__list > li:has(> .tb-cat-tree__list) > a { font-weight: 600; color: var(--text); }
.tb-cat-tree__list .tb-cat-tree__list {
  margin-block: .375rem .25rem;
  margin-inline-start: .375rem;
  padding-inline-start: .875rem;
  border-inline-start: 1px solid var(--border);
}


/* ==========================================================================
   12 — FILTER PILLS
   ========================================================================== */
.tb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tb-pills__btn {
  padding: .4375rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-pills__btn:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-1px); }
.tb-pills__btn[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}


/* ==========================================================================
   13 — PRODUCT CARDS
   ========================================================================== */
.tb-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fill the grid cell so every card in a row shares one height, and the
     price rails line up even when titles run to two lines. */
  block-size: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.tb-prod:hover {
  transform: translateY(-.375rem);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.tb-prod.is-hidden { display: none; }

.tb-prod__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-media);
  overflow: hidden;
}
.tb-prod__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(.5rem, 1.4vw, 1rem);
  transition: transform var(--t-slow) var(--ease);
}
.tb-prod:hover .tb-prod__media img { transform: scale(1.06); }

.tb-prod__flags {
  position: absolute;
  inset-block-start: .625rem;
  inset-inline-start: .625rem;
  z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3125rem;
}
.tb-prod__wish {
  position: absolute;
  inset-block-start: .625rem;
  inset-inline-end: .625rem;
  z-index: 3;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-600);
  box-shadow: var(--sh-1);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tb-prod__wish .tb-ico { width: .9375rem; height: .9375rem; }
.tb-prod__wish:hover { transform: scale(1.12); }
.tb-prod__wish.is-on { background: var(--red-600); color: var(--white); }
.tb-prod__wish.is-on .tb-ico { fill: currentColor; }

/* Quick actions revealed on hover (pointer devices only) */
.tb-prod__quick {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  transform: translateY(105%);
  transition: transform var(--t-base) var(--ease);
}
.tb-prod:hover .tb-prod__quick, .tb-prod:focus-within .tb-prod__quick { transform: translateY(0); }
.tb-prod__quick .tb-btn { flex: 1 1 auto; }

.tb-prod__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  padding: clamp(.75rem, 1.6vw, 1rem);
  border-block-start: 1px solid var(--border);
}
.tb-prod__cat {
  font-size: .625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
/* Both frames set this around 15-16px; --fs-h4 resolved to 19px at 1440 and
   pushed every two-word product name onto a second line. */
.tb-prod__title {
  font-size: var(--prod-title, 1rem);
  font-weight: 700;
  letter-spacing: -.005em;
}
.tb-prod__title a:hover { color: var(--brand); }

.tb-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .3125rem; }
.tb-swatch {
  width: .875rem; height: .875rem;
  border-radius: 50%;
  border: 1px solid rgba(13, 24, 51, .16);
  box-shadow: inset 0 0 0 1.5px var(--white);
  transition: transform var(--t-fast) var(--ease);
}
.tb-swatch:hover { transform: scale(1.25); }

.tb-rate { display: flex; align-items: center; gap: .375rem; }
.tb-stars { display: inline-flex; gap: .0625rem; color: var(--gold-500); }
.tb-stars .tb-ico { width: .8125rem; height: .8125rem; fill: currentColor; stroke: none; }
.tb-stars .tb-ico.is-empty { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .45; }
.tb-rate__count { font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* auto top margin pins the price rail to the bottom of every card */
.tb-price { display: flex; align-items: baseline; gap: var(--price-gap, .5rem);
            flex-wrap: wrap; margin-block-start: auto; padding-block-start: .125rem; }
.tb-price__now { font-size: var(--price-now, 1.0625rem); font-weight: 800;
                 font-variant-numeric: tabular-nums; }
/* was --grey-600 (#8B8B8B), which is 3.41:1 on white — a struck price is still
   information, so it takes the muted role like every other secondary line */
.tb-price__was { font-size: var(--price-meta, var(--fs-xs)); color: var(--text-muted);
                 text-decoration: line-through; font-variant-numeric: tabular-nums; }
.tb-price__off { margin-inline-start: auto; font-size: var(--price-meta, var(--fs-xs));
                 font-weight: 800; color: var(--red-500); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   14 — APP DOWNLOAD STAGE
   ========================================================================== */
.tb-app {
  position: relative;
  isolation: isolate;
  /* Exact gradient measured across the source artwork */
  background: linear-gradient(90deg, #3B4466 0%, #293358 100%);
  overflow: hidden;
}
.tb-app__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.tb-app__stage img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.tb-app__inner {
  position: relative;
  display: grid;
  align-items: end;
  /* 41.8vw reproduces the 2.394:1 artwork ratio; the asymmetric bottom pad
     lands the label and badges where the Figma frame puts them. */
  min-height: clamp(18rem, 41.8vw, 50.25rem);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 10.6vw, 12.75rem);
}
.tb-app__copy { max-width: 26rem; }
.tb-app__label {
  margin-block-end: var(--sp-4);
  color: var(--white);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.tb-app__stores { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tb-app__store {
  display: inline-flex;
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.tb-app__store img { height: clamp(2.5rem, 4.4vw, 3.25rem); width: auto; }
.tb-app__store:hover { transform: translateY(-.25rem) scale(1.03);
                       filter: drop-shadow(0 .625rem 1.25rem rgba(0, 0, 0, .3)); }

/* Mobile: artwork moves above the copy as a contained figure */
.tb-app__phone { display: none; }


/* ==========================================================================
   15 — FOOTER
   ========================================================================== */
.tb-footer { background: var(--navy-900); color: rgba(255, 255, 255, .66); }
.tb-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.tb-footer__brand { max-width: 22rem; }
.tb-footer .tb-logo img { height: var(--logo-h); }
.tb-footer__text {
  margin-block: var(--sp-5) var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.tb-social { display: flex; gap: var(--sp-2); }
.tb-social__link {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .8);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-social__link:hover { background: var(--gold-500); color: #1A1A1A; transform: translateY(-.1875rem); }
.tb-social__link .tb-ico { width: 1rem; height: 1rem; }

.tb-footer__title {
  margin-block-end: var(--sp-5);
  color: var(--white);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.tb-footer__links { display: grid; gap: .8125rem; }
.tb-footer__links a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  width: fit-content;
}
.tb-footer__links a::after {
  content: "";
  position: absolute;
  inset-block-end: -.125rem; inset-inline-start: 0;
  width: 100%; height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--t-base) var(--ease);
}
.tb-footer__links a:hover { color: var(--white); }
.tb-footer__links a:hover::after { transform: scaleX(1); }

.tb-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-xs);
}
.tb-footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tb-footer__bar a:hover { color: var(--gold-500); }


/* ==========================================================================
   16 — VIDEO MODAL
   ========================================================================== */
.tb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(7, 10, 20, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.tb-modal.is-open { opacity: 1; visibility: visible; }

.tb-modal__dialog {
  position: relative;
  width: min(64rem, 100%);
  transform: scale(.94) translateY(1.25rem);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.tb-modal.is-open .tb-modal__dialog { transform: scale(1) translateY(0); opacity: 1; }

.tb-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: #000;
  overflow: hidden;
  box-shadow: var(--sh-4);
}
.tb-modal__frame video,
.tb-modal__frame iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }

.tb-modal__close {
  position: absolute;
  inset-block-start: -3.25rem;
  inset-inline-end: 0;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .5rem .875rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tb-modal__close:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-2px); }
.tb-modal__close .tb-ico { width: 1rem; height: 1rem; }
.tb-modal__caption { margin-block-start: var(--sp-4); color: rgba(255, 255, 255, .72);
                     font-size: var(--fs-sm); text-align: center; }
.tb-modal__fallback { margin: 0; padding: var(--sp-6); color: var(--white);
                      font-size: var(--fs-sm); text-align: center; }

/* Any element that opens a video */
.tb-video-trigger { cursor: pointer; }

/* ---- content sheet ------------------------------------------------------
   A third use of the same backdrop: a light, scrollable panel for content that
   belongs beside the page rather than on a page of its own — the size guide
   opened from the product page is the first case. Header and footer stay put and
   only the body scrolls, so a long table never pushes the close button out of
   reach. */
.tb-modal__sheet {
  display: flex;
  flex-direction: column;
  width: min(52rem, 100%);
  max-block-size: min(86vh, 46rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-4);
  overflow: hidden;
  transform: scale(.95) translateY(1.25rem);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.tb-modal.is-open .tb-modal__sheet { transform: scale(1) translateY(0); opacity: 1; }

.tb-modal__sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-block-end: 1px solid var(--border);
}
.tb-modal__sheet-title { font-size: var(--fs-h3); }
.tb-modal__sheet-sub { margin-block-start: .25rem; font-size: var(--fs-xs); color: var(--text-muted); }
.tb-modal__sheet-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
}
.tb-modal__sheet-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--border);
  background: var(--page-tint);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* the three measurements, compacted for the sheet */
.tb-measure { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-5); }
.tb-measure li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-sm); }
.tb-measure strong { color: var(--text); }
.tb-measure span { color: var(--text-muted); }
.tb-measure .tb-ico {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  margin-block-start: .3125rem;
  color: var(--page-accent-ink);
}
.tb-modal__sheet-body .tb-table-wrap + .tb-table-wrap { margin-block-start: var(--sp-5); }

@media (max-width: 480px) {
  /* On a phone the sheet is the screen: full height, square corners. The tables
     still scroll inside .tb-table-wrap as they do everywhere else. */
  .tb-modal { padding: 0; }
  .tb-modal__sheet { max-block-size: 100%; block-size: 100%; border-radius: 0; }
}


/* ==========================================================================
   17 — CART DRAWER, TOAST, BACK-TO-TOP
   ========================================================================== */
.tb-cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(24rem, 92vw);
  display: flex; flex-direction: column;
  background: var(--white);
  box-shadow: var(--sh-4);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
[dir="rtl"] .tb-cart { transform: translateX(-105%); }
.tb-cart.is-open { transform: translateX(0); visibility: visible; }
.tb-cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5);
  border-block-end: 1px solid var(--border);
}
.tb-cart__head h2 { font-size: var(--fs-h4); }
.tb-cart__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); }
.tb-cart__empty { display: grid; gap: var(--sp-4); place-items: center; padding-block: var(--sp-12);
                  text-align: center; color: var(--text-muted); }
.tb-cart__empty .tb-ico { width: 2.75rem; height: 2.75rem; color: var(--border-strong); }
.tb-cart__line { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--sp-3);
                 align-items: center; padding-block: var(--sp-3);
                 border-block-end: 1px solid var(--border); }
.tb-cart__line img { border-radius: var(--r-sm); background: var(--cream-100); }
.tb-cart__line-name { font-size: var(--fs-sm); font-weight: 700; }
.tb-cart__line-meta { font-size: var(--fs-2xs); color: var(--text-muted); }
.tb-cart__remove { color: var(--grey-600); }
.tb-cart__remove:hover { color: var(--red-600); }
.tb-cart__foot { padding: var(--sp-5); border-block-start: 1px solid var(--border);
                 display: grid; gap: var(--sp-4); }
.tb-cart__total { display: flex; justify-content: space-between; font-weight: 800;
                  font-size: var(--fs-h4); }

.tb-toasts {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: grid; gap: var(--sp-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.tb-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: .875rem 1.125rem;
  border-radius: var(--r-md);
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-4);
  animation: tbToastIn .45s var(--ease-out) both;
}
.tb-toast .tb-ico { width: 1.125rem; height: 1.125rem; color: var(--green-500); }
.tb-toast.is-out { animation: tbToastOut .35s var(--ease) forwards; }
@keyframes tbToastIn  { from { opacity: 0; transform: translateY(1rem) scale(.96); } }
@keyframes tbToastOut { to   { opacity: 0; transform: translateY(.5rem) scale(.98); } }

.tb-top {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  z-index: calc(var(--z-header) - 1);
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              visibility var(--t-base), background-color var(--t-base) var(--ease);
}
.tb-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.tb-top:hover { background: var(--gold-500); color: var(--on-accent); }
.tb-top .tb-ico { width: 1.125rem; height: 1.125rem; }


/* ==========================================================================
   18 — MOTION & UTILITIES
   ========================================================================== */
/* Fallback reveal for when AOS is unavailable — progressive, never blocking */
[data-aos] { will-change: opacity, transform; }
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }
/* A card waiting for its fade-up is invisible but 100px lower than it will be, and still takes
   clicks there: the last row of the shop sat over "Next" and swallowed the tap until it had
   animated in. Nothing unseen should catch the pointer. Only while AOS is really running - never
   under .no-aos or reduced motion, where these are shown without ever getting .aos-animate. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-aos) [data-aos].aos-init:not(.aos-animate) { pointer-events: none; }
}

.tb-reveal { opacity: 0; transform: translateY(1.5rem);
             transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.tb-reveal.is-in { opacity: 1; transform: none; }

.tb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tb-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Honour the user's motion preference across the whole system */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .tb-hero__copy > *, [data-aos], .tb-reveal {
    opacity: 1 !important; transform: none !important;
  }
  .tb-hero__media img, .tb-hero__media video {
    transform: scaleX(var(--hero-flip, 1)) !important;
  }
}


/* ==========================================================================
   19 — SHOP: LAYOUT, FILTER SIDEBAR, PAGINATION
   Used by shop-{lang}.html. The sidebar is a sticky column above 1024px and an
   off-canvas panel below it, opening from the INLINE-START edge because that is
   where the filters sit in the design.
   ========================================================================== */
.tb-shop {
  display: grid;
  grid-template-columns: var(--shop-aside, 18rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
  align-items: start;
}

/* ---- toolbar (below 1024 only): filter trigger + live result count ------ */
.tb-shop__bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}
.tb-shop__count { font-size: var(--fs-sm); color: var(--text-muted); }

.tb-shop__aside { min-width: 0; }

.tb-filters {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

/* Sticky on desktop, and scrollable in its own right so a long facet list can
   never push the page taller than the grid beside it. */
@media (min-width: 1025px) {
  .tb-shop__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h-sm) + 1.25rem);
    max-block-size: calc(100vh - var(--header-h-sm) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.tb-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--border);
}
.tb-filters__title { font-size: var(--fs-h4); font-weight: 700; }
.tb-filters__reset {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
}
.tb-filters__reset:hover { color: var(--brand); }
.tb-filters__reset .tb-ico { width: .875rem; height: .875rem; }

.tb-filters__body { padding-inline: var(--sp-5); }

.tb-filters__group { padding-block: var(--sp-5); border-block-end: 1px solid var(--border); }
.tb-filters__group:last-of-type { border-block-end: 0; }
.tb-filters__legend {
  display: block;
  margin-block-end: var(--sp-4);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tb-filters__list { display: grid; gap: .8125rem; }

.tb-filters__actions {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-block-start: 1px solid var(--border);
}
.tb-filters__reset-all {
  justify-self: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.tb-filters__reset-all:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Close button — only meaningful while the panel is off-canvas */
.tb-filters__close { display: none; }

/* ---- checkbox / radio -------------------------------------------------- */
.tb-check {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--fs-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tb-check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tb-check__box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.125rem; height: 1.125rem;
  border: 1.5px solid var(--border-strong);
  border-radius: .3125rem;
  background: var(--white);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tb-check__box .tb-ico {
  width: .6875rem; height: .6875rem;
  color: var(--white);
  stroke-width: 3.2;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tb-check:hover .tb-check__box { border-color: var(--brand); }
.tb-check input:checked + .tb-check__box { background: var(--brand); border-color: var(--brand); }
.tb-check input:checked + .tb-check__box .tb-ico { opacity: 1; transform: scale(1); }
.tb-check input:focus-visible + .tb-check__box { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The radio shares the row layout and differs only in the mark */
.tb-check--radio .tb-check__box { border-radius: 50%; }
.tb-check--radio .tb-check__box::after {
  content: "";
  width: .4375rem; height: .4375rem;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.tb-check--radio input:checked + .tb-check__box::after { transform: scale(1); }

/* ---- collapsible category facet ---------------------------------------- */
.tb-facet + .tb-facet { margin-block-start: .375rem; }
.tb-facet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding-block: .375rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: start;
  color: var(--text);
}
.tb-facet__head:hover { color: var(--brand); }
.tb-facet__chev {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--slate-50);
  color: var(--brand);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
/* The design signals the open facet by FILLING the disc, not by rotating the
   chevron — both states show a down-chevron. Matched deliberately. */
.tb-facet__head[aria-expanded="true"] .tb-facet__chev {
  background: var(--brand);
  color: var(--white);
}
.tb-facet__chev .tb-ico { width: .875rem; height: .875rem; }
.tb-facet__body { padding-block: .5rem .25rem; padding-inline-start: var(--sp-2); }
.tb-facet__body .tb-filters__list { gap: .6875rem; }

/* A category inside a category: its own radio (it can be chosen as a whole)
   with a toggle beside it, and its children indented under a guide line so
   each level reads as belonging to the one above it. */
.tb-facet--sub + .tb-facet--sub { margin-block-start: 0; }
.tb-facet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.tb-facet__row .tb-check { flex: 1 1 auto; min-width: 0; }
.tb-facet__toggle { flex: 0 0 auto; display: grid; place-items: center; }
.tb-facet__toggle:hover .tb-facet__chev { background: var(--slate-200, #E2E8F0); }
.tb-facet__toggle[aria-expanded="true"] .tb-facet__chev { background: var(--brand); color: var(--white); }
.tb-facet__body--sub {
  margin-inline-start: .5rem;
  padding-block: .6875rem .125rem;
  padding-inline-start: .875rem;
  border-inline-start: 1px solid var(--border);
}

/* ---- size pills -------------------------------------------------------- */
.tb-sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.tb-size {
  min-width: 2.625rem;
  padding: .4375rem .625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tb-size:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.tb-size[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* ---- colour swatches --------------------------------------------------- */
.tb-colors { display: flex; flex-wrap: wrap; gap: .625rem; }
.tb-color {
  position: relative;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 1px solid rgba(13, 24, 51, .16);
  box-shadow: inset 0 0 0 2px var(--white);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-color:hover { transform: scale(1.12); }
.tb-color[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--white), 0 0 0 2px var(--brand);
}

/* ---- minimum-rating rows ---------------------------------------------- */
.tb-rating-row { display: flex; align-items: center; gap: .5rem; }
.tb-rating-row .tb-stars .tb-ico { width: .875rem; height: .875rem; }
.tb-rating-row__text { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- pagination ------------------------------------------------------- */
.tb-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
}
.tb-pager__btn {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-pager__btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.tb-pager__btn[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
  cursor: default;
  transform: none;
}
.tb-pager__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.tb-pager__btn .tb-ico { width: 1rem; height: 1rem; }
/* Previous / Next with their words: a wider pill, the arrow beside the word. */
.tb-pager__btn--step {
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* the pill is wider than its words; keep them in the middle */
  gap: .375rem;
  min-width: 8.5rem;
  padding-inline: 1.25rem;
}
[dir="rtl"] .tb-pager__btn .tb-ico { transform: scaleX(-1); }

/* ---- empty state ------------------------------------------------------ */
.tb-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-3);
  place-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  color: var(--text-muted);
}
.tb-empty .tb-ico { width: 2.5rem; height: 2.5rem; color: var(--border-strong); }
.tb-empty__title { font-size: var(--fs-h4); color: var(--text); }

/* ==========================================================================
   20 — PRODUCT DETAILS: GALLERY, BUY BOX, TABS
   Used by product-details-{lang}.html. Two equal columns above 1024px — the
   frame splits its content 562/567 with a 66px gutter, which is 50/50 in all
   but rounding — collapsing to a single column below it.
   ========================================================================== */
.tb-pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

/* ---- gallery ----------------------------------------------------------- */
.tb-gallery {
  display: grid;
  grid-template-columns: var(--thumb-rail, 4.5rem) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  /* The buy box is often twice the photo's height; the photo stays in view
     beside it instead of leaving an empty column under it. */
  position: sticky;
  inset-block-start: calc(var(--header-h-sm) + 1.5rem);
}

.tb-gallery__thumbs {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: var(--sp-3);
}
.tb-gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: .1875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-media);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tb-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.tb-gallery__thumb:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* The frame rings the live thumbnail in gold, not navy — it is the one place on
   the page where the accent is used as a selection marker. */
.tb-gallery__thumb[aria-current="true"] {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1px var(--gold-500);
}

/* Pinned to the second column. Left to auto-placement it fell into the 72px
   thumbnail rail whenever the strip was absent (one photo) or hidden (one photo
   for the chosen colour), and the product showed as a thumbnail. The rail keeps
   its width either way, so every product page has the same-sized photo.
   Square, because the product photographs are square: a 4:5 frame left a band
   of empty white above and below every one of them. */
.tb-gallery__stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: var(--surface-media);
  overflow: hidden;
}
.tb-gallery__stage img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease);
}
.tb-gallery__stage.is-swapping img { opacity: 0; }

.tb-gallery__badges {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: .375rem;
}

/* 360 / Video pills, stacked at the opposite corner */
.tb-gallery__tools {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: .5rem;
}
.tb-gallery__tool {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .6875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-2xs);
  font-weight: 700;
  box-shadow: var(--sh-1);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tb-gallery__tool:hover {
  background: var(--brand); border-color: var(--brand); color: var(--white);
  transform: translateY(-1px);
}
.tb-gallery__tool .tb-ico { width: .8125rem; height: .8125rem; }

.tb-gallery__zoom {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-end: var(--sp-4);
  z-index: 2;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  box-shadow: var(--sh-2);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.tb-gallery__zoom:hover { background: var(--brand); color: var(--white); transform: scale(1.08); }
.tb-gallery__zoom .tb-ico { width: 1.0625rem; height: 1.0625rem; }

/* ---- buy box ----------------------------------------------------------- */
.tb-pdp__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.tb-pdp__actions { display: flex; gap: .375rem; flex: 0 0 auto; }
.tb-pdp__action {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-pdp__action:hover { background: var(--slate-50); color: var(--brand); }
.tb-pdp__action.is-on { color: var(--red-600); }
.tb-pdp__action.is-on .tb-ico { fill: currentColor; }
.tb-pdp__action .tb-ico { width: 1.125rem; height: 1.125rem; }

.tb-pdp__title {
  margin-block: .375rem var(--sp-4);
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.25rem);
  letter-spacing: -.02em;
}

.tb-pdp__rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tb-pdp__rating .tb-stars .tb-ico { width: .9375rem; height: .9375rem; }
.tb-pdp__reviews {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem var(--sp-5);
  padding-block: var(--sp-4);
  margin-block: var(--sp-5);
  border-block: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.tb-meta dt { font-weight: 700; color: var(--text); display: inline; }
.tb-meta dd { display: inline; margin: 0; }
.tb-meta > div { display: flex; gap: .375rem; }

.tb-pdp__price { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tb-pdp__price-now {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.tb-pdp__price-was {
  font-size: 1.0625rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* ---- option groups ----------------------------------------------------- */
.tb-opt { margin-block-start: var(--sp-6); }
.tb-opt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.tb-opt__label { font-size: var(--fs-sm); font-weight: 600; }
.tb-opt__value { font-size: var(--fs-sm); color: var(--text-muted); }
.tb-opt__link {
  /* inline-flex with a 24px floor: clears the WCAG 2.5.8 target size without
     the baseline shift that vertical padding would cause in .tb-opt__head */
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.tb-opt__link:hover { color: var(--brand); }

.tb-swatch-set { display: flex; flex-wrap: wrap; gap: .625rem; }
.tb-swatch-btn {
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 1px solid rgba(13, 24, 51, .14);
  box-shadow: inset 0 0 0 2px var(--white);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-swatch-btn:hover { transform: scale(1.08); }
.tb-swatch-btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--white), 0 0 0 2px var(--brand);
}

/* ---- quantity stepper -------------------------------------------------- */
.tb-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.tb-qty__btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-qty__btn:hover { background: var(--brand); color: var(--white); }
.tb-qty__btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.tb-qty__btn .tb-ico { width: .9375rem; height: .9375rem; }
.tb-qty__input {
  width: 3rem;
  height: 2.75rem;
  border: 0;
  border-inline: 1px solid var(--border);
  background: none;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.tb-qty__input::-webkit-outer-spin-button,
.tb-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tb-pdp__cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}
/* Design product, in the buy bar's second place on a designable product. "Design product · from
   £33.90" is a little wider than half the bar: the side padding is trimmed, and where it still
   will not fit the price drops to a second line under the words instead of being cut. */
.tb-pdp__design-btn {
  flex-wrap: wrap;
  column-gap: .3em;
  row-gap: 0;
  padding-inline: 1rem;
  line-height: 1.25;
  text-align: center;
}
.tb-pdp__design-label, .tb-pdp__design-price { white-space: nowrap; }
.tb-pdp__design-price { font-weight: 600; }
.tb-pdp__design-btn.is-wrapped .tb-pdp__design-dot { display: none; }   /* no dot to open the second line */

/* ---- tabs -------------------------------------------------------------- */
.tb-tabs__list {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  border-block-end: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tb-tabs__list::-webkit-scrollbar { display: none; }
.tb-tabs__btn {
  position: relative;
  padding: .875rem .125rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}
.tb-tabs__btn::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform var(--t-base) var(--ease);
}
.tb-tabs__btn:hover { color: var(--text); }
.tb-tabs__btn[aria-selected="true"] { color: var(--brand); }
.tb-tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }

.tb-tabs__panel { padding-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.tb-tabs__panel[hidden] { display: none; }
/* The frame sets the prose measure at roughly 57% of the content column */
.tb-prose { max-width: 48rem; color: var(--text); line-height: 1.9; font-size: var(--fs-sm); }
/* The product's own tabs (Description, and the owner's extra tabs "panel-t{id}")
   use the whole width: capped at 48rem inside a 75rem panel, a description
   written as one sentence broke off two-thirds of the way across and read as if
   the owner had typed line breaks into it. Category-page tabs keep the measure. */
#panel-description > .tb-prose,
.tb-tabs__panel[id^="panel-t"] > .tb-prose { max-width: none; }
.tb-prose p { margin-block-end: var(--sp-4); }
.tb-prose strong { font-weight: 700; }

/* checkmark bullet list */
.tb-ticks { display: grid; gap: .8125rem; margin-block-start: var(--sp-5); }
.tb-ticks li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-sm); }
.tb-ticks .tb-ico {
  flex: 0 0 auto;
  width: .875rem; height: .875rem;
  margin-block-start: .3125rem;
  color: var(--gold-500);
  stroke-width: 2.6;
}

/* specification table */
.tb-specs { width: 100%; max-width: 48rem; border-collapse: collapse; font-size: var(--fs-sm); }
.tb-specs th, .tb-specs td { padding: .8125rem 0; text-align: start; vertical-align: top; }
.tb-specs th { width: 40%; font-weight: 600; color: var(--text); }
.tb-specs td { color: var(--text-muted); }
.tb-specs tr + tr { border-block-start: 1px solid var(--border); }

/* review list */
.tb-reviews { max-width: 48rem; display: grid; gap: var(--sp-5); }
.tb-review { padding-block-end: var(--sp-5); border-block-end: 1px solid var(--border); }
.tb-review:last-child { border-block-end: 0; padding-block-end: 0; }
.tb-review__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
                   margin-block-end: var(--sp-2); }
.tb-review__who { font-size: var(--fs-sm); font-weight: 700; }
.tb-review__when { font-size: var(--fs-2xs); color: var(--text-muted); }
.tb-review__body { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.8; }
.tb-review-summary {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--page-tint-warm);
}
.tb-review-summary__score { font-size: 2rem; font-weight: 800; line-height: 1;
                            font-variant-numeric: tabular-nums; }

/* ---- image lightbox (reuses .tb-modal chrome) -------------------------- */
.tb-modal__frame--image {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  background: var(--white);
  padding: clamp(1rem, 3vw, 2rem);
}
.tb-modal__frame--image img { max-height: 76vh; width: auto; object-fit: contain; }

/* ==========================================================================
   21 — SECONDARY PAGES
   Components for the pages the Figma set does not draw: category listings,
   the commerce journey (bag, checkout, wishlist, account, search) and the
   editorial / policy pages. All of it is assembled from tokens already defined
   above, so these pages read as the same product as the three designed ones.
   ========================================================================== */

/* ---- page header band -------------------------------------------------
   The designed pages have no heading band. These do — they arrive with no
   context, so they state where you are. Kept deliberately quiet: an eyebrow,
   a title, one line of lead, on the page's own tint. */
/* Kept short: it names the page, the content is the point. At 283px plus an 82px gap it
   pushed the first row of products below a laptop's fold on every shop page. */
.tb-page-head {
  padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
  background: var(--page-tint);
  border-block-end: 1px solid var(--border);
}
.tb-page-head__inner { max-width: 46rem; }
.tb-page-head__title { font-size: clamp(1.625rem, 1rem + 2.2vw, 2.375rem); letter-spacing: -.02em; }
.tb-page-head .tb-crumbs { margin-block-end: var(--sp-3); }
.tb-page-head .tb-eyebrow { margin-block-end: .375rem; }
/* the section under it starts close; the app sets its own spacing */
body:not(.tb-in-app) .tb-page-head + .tb-section { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
/* The product page opens straight under the header with only the breadcrumb above the gallery:
   a full section's top padding (~82px) left an empty band there. Just enough to breathe. */
body:not(.tb-in-app) .tb-section[aria-labelledby="pdp-title"] { padding-block-start: clamp(1rem, 2vw, 1.5rem); }
.tb-page-head__lead {
  margin-block-start: var(--sp-2);
  color: var(--text-muted);
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.75;
}
.tb-page-head--center .tb-page-head__inner { max-width: 40rem; margin-inline: auto; text-align: center; }

/* breadcrumb */
.tb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem var(--sp-2);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.tb-crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; }
.tb-crumbs__sep { opacity: .5; }
.tb-crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- document layout (policies, guides) -------------------------------
   Sticky contents rail beside the prose. The rail is the first thing a policy
   reader wants and the last thing a phone has room for, so it collapses. */
.tb-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.tb-doc__toc {
  position: sticky;
  inset-block-start: calc(var(--header-h-sm) + 1.5rem);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tb-doc__toc-title {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* No contents list on a short page — the body takes the whole width instead of leaving a
   column of empty space beside it. */
.tb-doc--wide { grid-template-columns: minmax(0, 1fr); }

.tb-doc__toc ol { display: grid; gap: .625rem; counter-reset: toc; margin: 0; padding: 0; list-style: none; }
/* counter-reset above was never paired with an increment, so the list numbered nothing. */
.tb-doc__toc li { counter-increment: toc; display: flex; gap: .5rem; line-height: 1.45; }
.tb-doc__toc li::before {
  content: counter(toc);
  flex: 0 0 auto;
  min-width: 1.125rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.tb-doc__toc a { font-size: var(--fs-sm); color: var(--text-muted); }
.tb-doc__toc a:hover { color: var(--brand); }
.tb-doc__toc a.is-current { color: var(--brand); font-weight: 700; }
/* The panel must not outgrow the viewport on a long policy. */
.tb-doc__toc ol { max-height: calc(100vh - var(--header-h) - 9rem); overflow-y: auto; }

/* The policies use numbered clauses as well as bullets; only ul was styled. */
.tb-doc__body ol {
  display: grid; gap: .625rem;
  margin-block-end: var(--sp-4);
  padding-inline-start: 1.375rem;
  list-style: decimal;
}
.tb-doc__body ol li { font-size: var(--fs-sm); line-height: 1.8; color: var(--text-muted); }
/* A bold run opening a paragraph is a lead-in in these documents — keep it in the ink colour
   so it reads as emphasis rather than as muted body text. */
.tb-doc__body li strong { color: var(--text); }

.tb-doc__body h2 {
  margin-block: clamp(2rem, 4vw, 2.75rem) var(--sp-4);
  font-size: var(--fs-h3);
  scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}
.tb-doc__body h2:first-child { margin-block-start: 0; }
.tb-doc__body h3 { margin-block: var(--sp-6) var(--sp-3); font-size: var(--fs-h4); }
.tb-doc__body ul { display: grid; gap: .625rem; margin-block-end: var(--sp-4);
                   padding-inline-start: 1.125rem; list-style: disc; }
.tb-doc__body li { font-size: var(--fs-sm); line-height: 1.8; color: var(--text-muted); }
.tb-doc__updated {
  display: inline-block;
  margin-block-end: var(--sp-6);
  padding: .3125rem .75rem;
  border-radius: var(--r-pill);
  background: var(--page-tint);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- accordion (FAQ) --------------------------------------------------- */
.tb-accordion { display: grid; gap: var(--sp-3); }
.tb-accordion__item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tb-accordion__item:has(.tb-accordion__btn[aria-expanded="true"]) {
  border-color: var(--border-strong);
  box-shadow: var(--sh-1);
}
.tb-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-size: var(--fs-body);
  font-weight: 600;
  transition: color var(--t-fast) var(--ease);
}
.tb-accordion__btn:hover { color: var(--brand); }
.tb-accordion__sign {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  background: var(--page-tint);
  color: var(--brand);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tb-accordion__btn[aria-expanded="true"] .tb-accordion__sign {
  background: var(--brand); color: var(--white); transform: rotate(180deg);
}
.tb-accordion__sign .tb-ico { width: .875rem; height: .875rem; }
.tb-accordion__body { padding: 0 var(--sp-5) var(--sp-5); }
.tb-accordion__body p { font-size: var(--fs-sm); line-height: 1.8; color: var(--text-muted); }

/* ---- generic data table (size guide) ---------------------------------- */
.tb-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.tb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* Bootstrap Reboot sets caption-side: bottom, which put each caption directly
   above the NEXT table — so the people chart appeared to be labelling the dog
   chart. Restored to the top, where the border-block-end reads as a header. */
.tb-table caption {
  caption-side: top;
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-weight: 700;
  color: var(--text);
  border-block-end: 1px solid var(--border);
}
.tb-table th, .tb-table td { padding: .75rem var(--sp-4); text-align: start; white-space: nowrap; }
.tb-table thead th {
  background: var(--page-tint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tb-table tbody tr + tr { border-block-start: 1px solid var(--border); }
.tb-table tbody th { font-weight: 700; }
.tb-table td { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- forms ------------------------------------------------------------- */
.tb-form { display: grid; gap: var(--sp-5); }
.tb-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.tb-form__grid--full > * { grid-column: 1 / -1; }
.tb-field { display: grid; gap: .4375rem; }
.tb-field--wide { grid-column: 1 / -1; }
.tb-label { font-size: var(--fs-sm); font-weight: 600; }
.tb-label__opt { font-weight: 400; color: var(--text-muted); }
.tb-input, .tb-select, .tb-textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* #C5C5C5 measured 1.73:1 — below even the 3:1 floor for non-essential text.
   Every field here has a visible <label>, but a hint you cannot read is not a
   hint. #8E8E8E is 3.28:1 and still reads as placeholder rather than value. */
.tb-input::placeholder, .tb-textarea::placeholder { color: var(--grey-500); }
.tb-input:focus, .tb-select:focus, .tb-textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(60, 69, 103, .12);
}
.tb-textarea { min-height: 8rem; resize: vertical; }
.tb-select {
  appearance: none;
  padding-inline-end: 2.5rem;
  /* chevron drawn inline so the control needs no extra markup */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7170' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
[dir="rtl"] .tb-select { background-position: left 1rem center; }
/* File attachment. A dashed edge, because the control is a slot for something you
   have rather than a box you type in — and it distinguishes it at a glance from
   the six .tb-input siblings around it. */
.tb-file {
  width: 100%;
  padding: .5rem .625rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-file:hover { border-color: var(--brand); }
.tb-file:focus-within, .tb-file:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(60, 69, 103, .12);
}
/* The browser's own button, restyled rather than replaced. The usual trick —
   hide the input and label a fake button — loses the file name, the drop target
   and the keyboard behaviour, all of which the native control already has. */
.tb-file::file-selector-button {
  margin-inline-end: .75rem;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.tb-file:hover::file-selector-button { background: var(--brand-dark); }
.tb-file[aria-invalid="true"] { border-color: var(--red-600); border-style: solid; }
.tb-hint { font-size: var(--fs-2xs); color: var(--text-muted); }
.tb-field__error { font-size: var(--fs-2xs); color: var(--red-600); font-weight: 600; }
.tb-input[aria-invalid="true"], .tb-textarea[aria-invalid="true"] { border-color: var(--red-600); }

/* ---- info card grids (contact, values, stats) ------------------------- */
.tb-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.tb-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tb-info-card {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.tb-info-card:hover { transform: translateY(-.25rem); box-shadow: var(--sh-2); border-color: transparent; }
.tb-info-card__icon {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--page-tint);
  color: var(--brand);
}
.tb-info-card__icon .tb-ico { width: 1.25rem; height: 1.25rem; }
.tb-info-card__title { font-size: var(--fs-h4); }
.tb-info-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.75; }

/* Contact page details: the icon on one side, the label over the value on the other. */
.tb-contact-item {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.tb-contact-item .tb-info-card__icon { flex: none; }
.tb-contact-item__body { min-width: 0; }
.tb-contact-item__title {
  margin: 0 0 .125rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.tb-contact-item__text {
  margin: 0;
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6;
  overflow-wrap: anywhere;            /* a long email never pushes the panel wider */
}
.tb-contact-item__text a { color: inherit; transition: color var(--t-fast) var(--ease); }
.tb-contact-item__text a:hover { color: var(--brand); }
.tb-contact-social {
  margin-block-start: var(--sp-5); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border);
}
.tb-contact-social .tb-social { margin-block-start: var(--sp-2); flex-wrap: wrap; }

/* Social discs on a light background: brand on a tinted disc. The default style is pale on dark
   for the footer, and on a white panel it simply disappeared. */
.tb-social--light .tb-social__link { background: var(--page-tint); color: var(--brand); }
.tb-social--light .tb-social__link:hover { background: var(--gold-500); color: #1A1A1A; }

.tb-stat { text-align: center; }
.tb-stat__num {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--page-accent-ink);
  font-variant-numeric: tabular-nums;
}
.tb-stat__label {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- timeline (our story) --------------------------------------------- */
.tb-timeline { display: grid; gap: 0; }
.tb-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.tb-timeline__item + .tb-timeline__item { border-block-start: 1px solid var(--border); }
.tb-timeline__year {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--page-accent-ink);
  font-variant-numeric: tabular-nums;
}
.tb-timeline__title { margin-block-end: var(--sp-2); font-size: var(--fs-h4); }
.tb-timeline__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.8; max-width: 40rem; }

/* ---- bag page --------------------------------------------------------- */
.tb-bag { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(1.5rem, 3vw, 2.5rem);
          align-items: start; }
.tb-bag__lines { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
                 overflow: hidden; }
.tb-bag__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
}
.tb-bag__row + .tb-bag__row { border-block-start: 1px solid var(--border); }
.tb-bag__thumb { border-radius: var(--r-sm); background: var(--surface-media); }
.tb-bag__name { font-size: var(--fs-body); font-weight: 700; }
.tb-bag__variant { margin-block-start: .25rem; font-size: var(--fs-2xs); color: var(--text-muted); }

/* The chosen options, named. A definition list so the attribute is marked up as the term
   it is; the rows stay on one line each so "Size: M" reads as a pair. */
.tb-bag__opts { margin-block: .375rem 0; display: grid; gap: .125rem; }
.tb-bag__opt { display: flex; gap: .375rem; align-items: baseline; font-size: var(--fs-2xs); }
.tb-bag__opt dt { color: var(--text-muted); }
.tb-bag__opt dt::after { content: ":"; }
.tb-bag__opt dd { margin: 0; color: var(--text); font-weight: 600; }
.tb-bag__unit { margin-block-start: .25rem; font-size: var(--fs-xs); color: var(--text-muted);
                font-variant-numeric: tabular-nums; }
.tb-bag__line-total { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-bag__remove { color: var(--grey-600); }
.tb-bag__remove:hover { color: var(--red-600); }
.tb-bag__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
                margin-block-start: var(--sp-5); }

/* ---- condensed line, for the checkout sidebar ---------------------------
   Three columns instead of four: the quantity moves into the meta line and the
   remove control goes away entirely, because quantity is not editable at
   checkout. That frees enough width for the product name to sit on one or two
   lines instead of three, which is what made the sidebar look broken. */
.tb-bag__lines--compact {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.tb-bag__row--compact {
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
}
.tb-bag__row--compact:first-child { padding-block-start: 0; }
.tb-bag__row--compact + .tb-bag__row--compact { border-block-start: 1px solid var(--border); }
.tb-bag__row--compact .tb-bag__thumb {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  padding: .1875rem;
}
.tb-bag__row--compact .tb-bag__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
}
.tb-bag__row--compact .tb-bag__variant { margin-block-start: .1875rem; }
.tb-bag__row--compact .tb-bag__line-total {
  align-self: start;
  font-size: var(--fs-sm);
}
/* the summary is a list of lines, not a bordered card, so it needs its own
   breathing room before the totals rail underneath */
.tb-summary .tb-bag__lines--compact { margin-block-end: var(--sp-4); }

.tb-summary {
  position: sticky;
  inset-block-start: calc(var(--header-h-sm) + 1.5rem);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.tb-summary__title { margin-block-end: var(--sp-4); font-size: var(--fs-h4); }
.tb-summary__row { display: flex; justify-content: space-between; gap: var(--sp-3);
                   padding-block: .5rem; font-size: var(--fs-sm); }
.tb-summary__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.tb-summary__row--muted span { color: var(--text-muted); }
.tb-summary__total {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-h4);
  font-weight: 800;
}
.tb-summary__total span:last-child { font-variant-numeric: tabular-nums; }
.tb-promo { display: flex; gap: var(--sp-2); margin-block: var(--sp-4); }
.tb-promo .tb-input { flex: 1 1 auto; min-width: 0; }

/* ---- step rail (checkout, order tracking) ---------------------------- */
.tb-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; }
.tb-step { display: flex; align-items: center; gap: .625rem; font-size: var(--fs-sm);
           color: var(--text-muted); }
.tb-step__dot {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tb-step[aria-current="step"] { color: var(--text); font-weight: 700; }
.tb-step[aria-current="step"] .tb-step__dot {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}
.tb-step.is-done .tb-step__dot {
  background: var(--green-500); border-color: var(--green-500); color: #063D25;
}
.tb-step.is-done .tb-ico { width: .8125rem; height: .8125rem; stroke-width: 3; }

/* vertical variant for a shipment history */
.tb-track { display: grid; gap: 0; }
.tb-track__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block-end: var(--sp-5);
  position: relative;
}
.tb-track__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 1.75rem 0;
  inset-inline-start: .8125rem;
  width: 2px;
  background: var(--border);
}
.tb-track__when { font-size: var(--fs-2xs); color: var(--text-muted); }
.tb-track__what { font-size: var(--fs-sm); font-weight: 700; }

/* ---- auth (account) --------------------------------------------------- */
.tb-auth { max-width: 27rem; margin-inline: auto; }
.tb-auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  margin-block-end: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--page-tint);
}
.tb-auth__switch button {
  padding: .625rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.tb-auth__switch button[aria-selected="true"] {
  background: var(--surface); color: var(--brand); box-shadow: var(--sh-1);
}
.tb-auth__row { display: flex; justify-content: space-between; align-items: center;
                gap: var(--sp-3); font-size: var(--fs-xs); }

/* ---- careers ---------------------------------------------------------- */
.tb-jobs { display: grid; gap: var(--sp-3); }
.tb-job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.tb-job:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: transparent; }
.tb-job__title { font-size: var(--fs-h4); }
.tb-job__meta { margin-block-start: .375rem; display: flex; flex-wrap: wrap; gap: .375rem var(--sp-4);
                font-size: var(--fs-xs); color: var(--text-muted); }


/* ---- careers: the role detail inside the apply pop-up ------------------
   Lives in the shared sheet (§16), so nothing here touches the sheet's own
   shell — only the content that gets poured into its scrolling body. */
.tb-modal__sheet--wide { width: min(60rem, 100%); }

/* ---- size guide (built by product.js from the owner's guide) ----------- */
.tb-sg { display: grid; gap: var(--sp-5); }

/* "Size chart" / "How to measure": a segmented control, not a second row of tabs */
.tb-sg__tabs {
  display: inline-grid;
  grid-auto-flow: column;
  justify-self: start;
  gap: .25rem;
  padding: .25rem;
  border-radius: var(--r-pill);
  background: var(--slate-50);
}
.tb-sg__tab {
  padding: .5rem 1.125rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tb-sg__tab:hover { color: var(--text); }
.tb-sg__tab[aria-selected="true"] { background: var(--white); color: var(--brand); box-shadow: var(--sh-1); }
.tb-sg__panel { display: grid; gap: var(--sp-5); }
.tb-sg__panel[hidden] { display: none; }

/* one chip per chart; a single scrolling row, so twelve charts never push the table down */
.tb-sg__chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-block: .125rem .375rem;
  margin-inline: calc(var(--sp-5) * -1);
  padding-inline: var(--sp-5);
  scrollbar-width: thin;
  scroll-padding-inline: var(--sp-5);
}
.tb-sg__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  min-height: 2.25rem;
  padding: .4375rem .9375rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-sg__chip:hover { border-color: var(--brand); }
.tb-sg__chip[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
.tb-sg__chip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.tb-sg__chip-note {
  padding: .0625rem .4375rem;
  border-radius: var(--r-pill);
  background: var(--gold-500);
  color: var(--brand);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* the chart: its photograph beside its table */
.tb-sg__chart {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--white);
  animation: tb-sg-in var(--t-base) var(--ease-out);
}
.tb-sg__chart[hidden] { display: none; }
.tb-sg__chart--bare { grid-template-columns: minmax(0, 1fr); }
@keyframes tb-sg-in { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-sg__chart { animation: none; } }

.tb-sg__media { display: grid; gap: var(--sp-3); }
.tb-sg__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--slate-50);
}

.tb-sg__data { display: grid; gap: var(--sp-4); min-width: 0; }
.tb-sg__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tb-sg__title { font-size: var(--fs-h5, 1.125rem); letter-spacing: -.01em; }

.tb-sg__units {
  display: inline-flex;
  padding: .1875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
}
.tb-sg__unit {
  min-width: 3.25rem;
  min-height: 1.875rem;
  padding: .25rem .75rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}
.tb-sg__unit[aria-pressed="true"] { background: var(--gold-500); color: var(--brand); }

.tb-sg__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.tb-sg__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tb-sg__table th, .tb-sg__table td {
  padding: .6875rem .875rem;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
.tb-sg__table thead th, .tb-sg__table tr:first-child th {
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.tb-sg__table thead tr + tr th { background: #2B3A5C; }
.tb-sg__table tbody tr:nth-child(even) td { background: var(--slate-50); }
.tb-sg__table tbody tr:hover td { background: #FBF3DC; }
.tb-sg__table tbody tr:last-child td { border-block-end: 0; }
/* the size column reads first, and stays put while a wide table scrolls on a phone */
.tb-sg__table td.tb-sg__first {
  position: sticky;
  inset-inline-start: 0;
  font-weight: 800;
  color: var(--brand);
  background: var(--white);
  box-shadow: inset -1px 0 0 var(--border);
}
.tb-sg__table tbody tr:nth-child(even) td.tb-sg__first { background: var(--slate-50); }
.tb-sg__table .tb-sg__first { z-index: 1; }
.tb-sg__table th.tb-sg__first { position: sticky; inset-inline-start: 0; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18); }
.tb-sg__unit-row th { font-weight: 600; text-transform: lowercase; }
.tb-sg__small { font-size: var(--fs-xs); color: var(--text-muted); }

/* how to measure */
.tb-sg__lead { font-weight: 700; color: var(--text); }
.tb-sg__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-sg__step {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
}
.tb-sg__step-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.tb-sg__step-name { display: block; margin-block-end: .25rem; font-size: var(--fs-sm); color: var(--text); }
.tb-sg__step-body p { margin: 0; font-size: var(--fs-xs); line-height: 1.65; color: var(--text-muted); }
.tb-sg__tip {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 3rem;
  border-radius: var(--r-lg);
  background: #FBF3DC;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.tb-sg__tip::before {
  content: "i";
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--brand);
  font-weight: 800;
  font-size: .75rem;
  font-style: italic;
}
.tb-sg__tip p { margin: 0; }
.tb-sg img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .tb-sg__chart { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .tb-sg__media { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .tb-sg__media img { max-block-size: 11rem; }
  .tb-sg__tabs { justify-self: stretch; }
  .tb-sg__tab { padding-inline: .75rem; }
}

/* Location / contract / salary / team. auto-fit rather than a fixed count so it
   collapses to one column on a phone without a second media query. */
.tb-role__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--page-tint);
}
.tb-role__facts li { display: flex; align-items: flex-start; gap: .625rem; }
.tb-role__facts .tb-ico {
  flex: 0 0 auto;
  width: 1.125rem; height: 1.125rem;
  margin-block-start: .125rem;
  color: var(--page-accent-ink);
}
.tb-role__fact-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tb-role__facts strong { font-size: var(--fs-sm); line-height: 1.5; }

.tb-role__lead {
  margin-block: var(--sp-5) 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text);
}

/* Two columns from 40rem of *sheet* width, which is why this is a container
   query and not a viewport one: the same block also has to work if the sheet is
   ever narrowed, and the viewport says nothing useful about that. */
.tb-role__cols { margin-block-start: var(--sp-5); display: grid; gap: var(--sp-5); }
@supports (container-type: inline-size) {
  .tb-role { container-type: inline-size; }
  @container (min-width: 40rem) {
    .tb-role__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  }
}

.tb-role__h {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tb-role__list { display: grid; gap: var(--sp-3); }
.tb-role__list li { display: flex; align-items: flex-start; gap: .625rem;
                    font-size: var(--fs-sm); line-height: 1.7; }
.tb-role__list .tb-ico {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  margin-block-start: .3125rem;
  color: var(--page-accent-ink);
}

.tb-role__note {
  margin-block-start: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--page-tint-warm);
}
.tb-role__process { margin-block-start: var(--sp-4); font-size: var(--fs-sm);
                    line-height: 1.7; color: var(--text-muted); }
.tb-role__process strong { color: var(--text); }
.tb-role__posted { margin-block-start: var(--sp-3); font-size: var(--fs-2xs); color: var(--text-muted); }

/* The seam between reading about the role and applying for it. A rule rather
   than more whitespace: the sheet body scrolls, and a gap alone does not tell
   you that the thing above has finished. */
.tb-role__form-head {
  margin-block: var(--sp-6) var(--sp-5);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border);
}
.tb-role__form-title { font-size: var(--fs-h4); }
.tb-role__form-sub { margin-block-start: .375rem; font-size: var(--fs-sm);
                     color: var(--text-muted); line-height: 1.7; }

/* ---- 404 -------------------------------------------------------------- */
.tb-404 { text-align: center; padding-block: clamp(3rem, 9vw, 7rem); }
.tb-404__code {
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--page-tint);
  /* the numeral is scenery, not content — the h1 below carries the message */
  -webkit-text-stroke: 1px var(--border-strong);
}
.tb-404__title { margin-block: var(--sp-4) var(--sp-4); font-size: var(--fs-h2); }
.tb-404__text { max-width: 30rem; margin-inline: auto; color: var(--text-muted); }
.tb-404__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
                   margin-block-start: var(--sp-7); }

/* ---- closing CTA band ------------------------------------------------- */
.tb-cta-band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(90deg, #3B4466 0%, #293358 100%);
  color: var(--white);
  text-align: center;
}
.tb-cta-band__title { color: var(--white); font-size: var(--fs-h2); }
.tb-cta-band__text { max-width: 34rem; margin: var(--sp-4) auto var(--sp-7);
                     color: rgba(255, 255, 255, .78); }
.tb-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ---- editorial media figure ------------------------------------------ */
.tb-figure { border-radius: var(--r-xl); overflow: hidden; background: var(--page-tint); }
.tb-figure img { width: 100%; height: 100%; object-fit: cover; }
.tb-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.tb-split__body h2 { font-size: var(--fs-h2); margin-block-end: var(--sp-4); }
.tb-split__body p { color: var(--text-muted); line-height: 1.85; }
.tb-split--flip .tb-figure { order: 2; }

/* ==========================================================================
   22 — RESPONSIVE
   Breakpoints: ≤1024 laptop · ≤768 tablet · ≤480 mobile
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --logo-h: 3rem; --header-h: 5.25rem; }
}

/* ---- ≤1024px : laptop / small desktop ---- */
@media (max-width: 1024px) {
  :root { --header-h: 5rem; --header-h-sm: 4.25rem; }

  .tb-nav, .tb-header__actions .tb-icon-btn--desk { display: none; }
  .tb-burger { display: grid; }

  .tb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Shop: the filter column becomes an off-canvas panel, entering from the
     inline-start edge because that is the side it occupies on desktop. */
  .tb-shop { grid-template-columns: minmax(0, 1fr); }
  .tb-shop__bar { display: flex; }
  .tb-shop__aside {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-drawer);
    width: min(22rem, 90vw);
    background: var(--white);
    box-shadow: var(--sh-4);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [dir="rtl"] .tb-shop__aside { transform: translateX(105%); }
  .tb-shop__aside.is-open { transform: translateX(0); visibility: visible; }
  .tb-filters {
    min-block-size: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .tb-filters__close { display: grid; }

  /* Product details: the buy box drops under the gallery */
  .tb-pdp { grid-template-columns: minmax(0, 1fr); }
  .tb-gallery { max-inline-size: 34rem; position: static; }

  /* Secondary pages: the contents rail and the order summary both un-stick and
     move below the thing they describe. A sticky sidebar in a single-column
     layout just floats over the content it was meant to sit beside. */
  .tb-doc { grid-template-columns: minmax(0, 1fr); }
  .tb-doc__toc { position: static; inset-block-start: auto; order: -1; }
  .tb-bag { grid-template-columns: minmax(0, 1fr); }
  .tb-summary { position: static; inset-block-start: auto; }
  .tb-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tb-hero__slide { min-height: clamp(28rem, 60vw, 34rem); }
  .tb-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-footer__brand { grid-column: 1 / -1; max-width: 34rem; }
}

/* ---- ≤768px : tablet ---- */
@media (max-width: 768px) {
  :root {
    --logo-h: 2.75rem;
    --header-h: 4.5rem;
    --header-h-sm: 4rem;
    --section-y: clamp(2.75rem, 8vw, 4rem);
  }

  /* Contact group hides; the grid keeps the promo centred with no help. */
  .tb-topbar__group--meta { display: none; }

  .tb-grid--3, .tb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tb-section-head { flex-direction: column; align-items: flex-start; }

  .tb-hero__slide { min-height: 0; }
  .tb-hero__copy { max-width: none; padding-block: clamp(3rem, 12vw, 4.5rem) 6rem; }
  /* Vertical scrim on narrow screens — dark enough for the copy, open enough
     in the middle band that the photograph still reads. */
  .tb-hero__media img, .tb-hero__media video { object-position: 68% center; }
  .tb-hero__media::after {
    background: linear-gradient(180deg,
      rgba(13, 18, 40, .80) 0%, rgba(13, 18, 40, .50) 46%, rgba(13, 18, 40, .82) 100%);
  }
  .tb-hero__slide--warm .tb-hero__media::after {
    background: linear-gradient(180deg,
      rgba(26, 19, 8, .78) 0%, rgba(24, 18, 10, .46) 46%, rgba(20, 16, 10, .80) 100%);
  }
  /* Arrows are hidden below 768px. The slide can be swiped, the dots are
     tappable 24px targets, and autoplay advances on its own — three ways to move
     without spending two buttons' worth of a phone's hero on a fourth. The
     buttons stay in the markup, so widening the window brings them back. */
  .tb-hero__arrows { display: none; }
  .tb-hero__controls { align-items: center; gap: var(--sp-3); }
  /* Sole remaining control, so give the dots a touch more presence and room */
  .tb-hero__dot { height: 1.75rem; }
  .tb-hero__dot::before, .tb-hero__dot::after { height: .3125rem; }

  /* App stage: artwork becomes a figure above the copy so the phone is never cropped */
  .tb-app__stage { display: none; }
  .tb-app__inner {
    align-items: stretch;
    min-height: 0;
    padding-block: clamp(2.5rem, 7vw, 3.5rem);
  }
  .tb-app__phone {
    display: block;
    margin-block-end: var(--sp-6);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .tb-app__copy { max-width: none; text-align: center; }
  .tb-app__stores { justify-content: center; }

  .tb-prod__quick { display: none; }

  /* Product details: a 72px rail beside a full-width stage wastes the screen,
     so the thumbnails become a horizontal strip underneath it. */
  .tb-gallery {
    grid-template-columns: minmax(0, 1fr);
    /* Capped, not full-width: a full-bleed square stage at 768px is 704px tall
       and shoves the buy box off the first screen. Below ~480px the container
       is narrower than the cap anyway, so phones are unaffected. */
    max-inline-size: 28rem;
  }
  .tb-gallery__stage { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; }
  .tb-gallery__thumbs {
    grid-column: 1;
    grid-row: 2;
    grid-auto-flow: column;
    grid-auto-columns: 4.5rem;
    justify-content: start;
    overflow-x: auto;
    padding-block-end: .25rem;
    scrollbar-width: thin;
  }
  .tb-pdp__cta { grid-template-columns: minmax(0, 1fr); }

  /* Secondary pages */
  .tb-cards--2, .tb-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-split { grid-template-columns: minmax(0, 1fr); }
  /* the flip modifier reorders on desktop only; stacked, image always leads */
  .tb-split--flip .tb-figure { order: 0; }
  .tb-form__grid { grid-template-columns: minmax(0, 1fr); }
  .tb-timeline__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

  /* Bag row on a phone: two rows rather than four squeezed columns.

       thumb  info  info
       qty    qty   total

     Explicit areas, because the previous version put the stepper at
     `grid-column: 2 / -1`. That left it inset by the thumbnail's width on the
     left but only by the card's padding on the right — visibly lopsided — and it
     pushed the line total onto a third row underneath the thumbnail, aligned
     with nothing. Now the controls share one row: the stepper starts at the
     card's left padding and the total ends at its right padding, so the two
     margins are equal by construction. */
  .tb-bag__row:not(.tb-bag__row--compact) {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info  info"
      "qty   qty   total";
    row-gap: var(--sp-4);
    align-items: center;
  }
  .tb-bag__row:not(.tb-bag__row--compact) .tb-bag__thumb { grid-area: thumb; }
  .tb-bag__row:not(.tb-bag__row--compact) .tb-bag__info   { grid-area: info; }
  /* content-width, pinned to the start edge — not stretched across two columns */
  .tb-bag__row:not(.tb-bag__row--compact) .tb-qty {
    grid-area: qty;
    justify-self: start;
  }
  .tb-bag__row:not(.tb-bag__row--compact) > .tb-row {
    grid-area: total;
    justify-self: end;
  }

  .tb-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .tb-footer__bar { justify-content: center; text-align: center; }
}

/* ---- ≤480px : mobile ---- */
@media (max-width: 480px) {
  :root { --logo-h: 2.5rem; --gutter: 1.125rem; }

  /* The clamp resolves to ~22px at 414px, which leaves the field about 210px wide
     between the icon and the Search button — enough to cut the placeholder off
     mid-word. Fixed type and a compact submit hand ~90px back to the field. */
  .tb-search__input { font-size: 1.0625rem; }
  .tb-search__form { gap: var(--sp-2); }
  .tb-search__form .tb-btn { padding-inline: var(--sp-4); font-size: .8125rem; }
  .tb-search__form .tb-ico { width: 1.25rem; height: 1.25rem; }

  /* Keep the shipping promo on one line beside the language switcher */
  .tb-topbar { font-size: .6875rem; }
  .tb-topbar__inner { gap: var(--sp-2); }
  /* Four icons plus the promo do not fit in 375px. The promo wins — the same
     social links sit in the footer. */
  .tb-topbar__social { display: none; }

  .tb-grid--3, .tb-grid--4 { grid-template-columns: minmax(0, 1fr); }

  /* Two cards per row at 375px leaves ~136px of text width. Driving the shared
     tokens rather than overriding each rule keeps the price rail on one line
     without special-casing the shop page a second time. */
  .tb-price__now { font-size: .9375rem; }
  .tb-price__was, .tb-price__off { font-size: .6875rem; }
  .tb-price { gap: .25rem; }
  .tb-prod__title { font-size: .9375rem; }

  .tb-cat { aspect-ratio: 16 / 11; }

  .tb-hero__title { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .tb-hero__actions .tb-btn { flex: 1 1 100%; }

  .tb-btn { min-height: 2.75rem; }
  .tb-footer__main { grid-template-columns: minmax(0, 1fr); }

  .tb-cards--2, .tb-cards--3, .tb-cards--4 { grid-template-columns: minmax(0, 1fr); }
  .tb-steps { gap: var(--sp-2) var(--sp-4); }
  .tb-job { flex-direction: column; align-items: flex-start; }
}

/* Coarse pointers never get hover-only affordances */
@media (hover: none) {
  .tb-prod__quick { display: none; }
  .tb-btn:hover { transform: none; box-shadow: none; }
}

/* ==========================================================================
   23 — PAGE THEMES
   Every page keeps the same identity but re-points the accent, the tint and
   the section rhythm, so Home / Shop / Product never read as one template
   repainted three times.
   ========================================================================== */

/* Home — navy ground, gold accent, cool-to-cream section flow */
body[data-page="home"] {
  --page-accent: var(--gold-500);
  --page-accent-ink: #8A6214;   /* 5.47:1 on white, 4.83:1 on cream */
  --page-tint: var(--slate-50);
  --page-tint-warm: var(--cream-100);
}

/* Shop — cooler and more utilitarian: navy accent, and a denser card because
   four of them share a column narrowed by the filter sidebar. The frame puts
   87px above the content and gives the sidebar 288px, so both are matched. */
body[data-page="shop"] {
  --page-accent: var(--navy-600);
  --page-tint: #F7F8FC;
  --page-tint-warm: var(--white);
  --section-y: clamp(2rem, 6vw, 5.5rem);
  --surface-media: #FFFFFF;
  --shop-aside: 18rem;
  /* 200px cards against home's 282px, so the product name steps down one
     notch. The price rail keeps the shared sizes — it fits with room to spare
     once the container reports its true 1200px content width. */
  --prod-title: .9375rem;
}

/* Product — warm editorial: cream ground, gold accent, generous rhythm */
body[data-page="product"] {
  --page-accent: var(--gold-600);
  --page-accent-ink: #8A6214;
  --page-tint: var(--cream-200);
  --page-tint-warm: var(--cream-100);
  /* 86px above the gallery in the frame, same as the shop */
  --section-y: clamp(2.5rem, 6vw, 5.5rem);
  --thumb-rail: 4.5rem;
}

/* ---- secondary page families -------------------------------------------
   The brief asks that no two pages read as one template repainted. Rather than
   invent a palette per page, pages are grouped by the job they do and each
   family re-points the same three or four tokens. A listing feels like the shop,
   a policy page feels like a document, an editorial page feels like the brand.
   ------------------------------------------------------------------------- */

/* Listings — the shop's cool utility, one notch softer */
body[data-page="listing"] {
  --page-accent: var(--navy-600);
  --page-tint: #F7F8FC;
  --page-tint-warm: var(--white);
  --surface-media: #FFFFFF;
  --prod-title: 1rem;
}

/* Commerce — bag, checkout, wishlist, account. Neutral and quiet: nothing here
   should compete with the numbers or the form the customer is working through */
body[data-page="commerce"] {
  --page-accent: var(--navy-600);
  --page-tint: var(--slate-50);
  --page-tint-warm: var(--white);
  --section-y: clamp(2rem, 5vw, 3.5rem);
}

/* Editorial — about, our story, press, sustainability. Warm and generous, the
   closest of the families to the home page's mood */
body[data-page="editorial"] {
  --page-accent: var(--gold-600);
  --page-accent-ink: #8A6214;
  --page-tint: var(--cream-200);
  --page-tint-warm: var(--cream-100);
  --section-y: clamp(3rem, 6.5vw, 6rem);
}

/* Support & policy — FAQ, size guide, tracking, contact, the legal pages.
   Coolest and densest: these are read, not browsed */
body[data-page="support"] {
  --page-accent: var(--navy-600);
  --page-tint: #F4F6FA;
  --page-tint-warm: var(--white);
  --section-y: clamp(2.25rem, 5vw, 4rem);
}

/* Print — content only */
@media print {
  .tb-topbar, .tb-header, .tb-hero__controls, .tb-top, .tb-modal, .tb-cart, .tb-drawer,
  .tb-scrim, .tb-search, .tb-prod__quick { display: none !important; }
  body { color: #000; }
}

/* Count beside a full-width button label — the phone drawer's Wishlist row, where
   there is no icon to hang the bubble on. */
.tb-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: .5rem;
  padding-inline: .375rem;
  border-radius: var(--r-pill);
  background: var(--red-600);
  color: var(--white);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tb-btn__count[hidden] { display: none; }

/* ==========================================================================
   ABOUT US — Views/Site/About.cshtml
   The owner's About text, placed: an opening split with the photograph, the
   story as numbered paragraphs, the collections, and the sign-off beside the
   contact details.
   ========================================================================== */
body[data-page="about"] { --page-tint: var(--cream-200); }

.tb-about-hero {
  padding-block: clamp(2rem, 5vw, 4.5rem);
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgba(227, 181, 74, .16), transparent 60%),
    var(--page-tint);
  border-block-end: 1px solid var(--border);
  overflow: hidden;
}
.tb-about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.tb-about-hero__copy .tb-crumbs { margin-block-end: var(--sp-6); }
.tb-about-hero__title {
  font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--brand);
}
.tb-about-hero__sign {
  margin-block-start: var(--sp-3);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  color: var(--coral-600);
}
.tb-about-hero__lead {
  margin-block-start: var(--sp-5);
  max-width: 36rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
  line-height: 1.8;
  color: var(--text);
}
.tb-about-hero__lead p { margin: 0; }
.tb-about-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); }

/* one photograph: a tall rounded frame with a gold offset; two or three: a staggered collage */
.tb-about-hero__media { position: relative; display: grid; gap: var(--sp-3); }
.tb-about-hero__photo {
  margin: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh-3);
}
.tb-about-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-about-hero__media--1 .tb-about-hero__photo { aspect-ratio: 4 / 5; }
.tb-about-hero__media--1::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--gold-500);
  border-radius: var(--r-2xl);
  z-index: -1;
}
/* the frame follows the photograph, so the photograph sets the width, not the column */
.tb-about-hero__media--1 { isolation: isolate; inline-size: min(100%, 26rem); justify-self: center; margin-inline-end: 1.25rem; }
.tb-about-hero__media--2, .tb-about-hero__media--3 { grid-template-columns: 1fr 1fr; }
.tb-about-hero__media--2 .tb-about-hero__photo { aspect-ratio: 3 / 4; }
.tb-about-hero__media--2 .tb-about-hero__photo:nth-child(2) { margin-block-start: 3rem; }
.tb-about-hero__media--3 .tb-about-hero__photo:first-child { grid-row: span 2; aspect-ratio: auto; }
.tb-about-hero__media--3 .tb-about-hero__photo { aspect-ratio: 1 / 1; }

/* story */
.tb-about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.tb-about-story__head { position: sticky; inset-block-start: calc(var(--header-h-sm) + 2rem); }
.tb-about-story__title {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--brand);
}
.tb-about-story__head::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-block-start: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--gold-500);
}
.tb-about-story__list { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
.tb-about-story__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--border);
}
.tb-about-story__item:last-child { padding-block-end: 0; border-block-end: 0; }
.tb-about-story__no {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}
.tb-about-story__text { font-size: clamp(1rem, .96rem + .25vw, 1.0625rem); line-height: 1.85; color: var(--text); }
.tb-about-story__text p { margin: 0; }

/* sign-off and contact */
.tb-about-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-2xl);
  background: var(--page-tint);
  border: 1px solid var(--border);
}
.tb-about-cta__text { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.5; color: var(--brand); }
.tb-about-cta__text p { margin: 0; }
.tb-about-cta__actions { display: grid; gap: var(--sp-3); justify-items: start; }
.tb-about-cta__line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 600;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.tb-about-cta__line:hover { color: var(--brand); }
.tb-about-cta__ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--brand);
}
.tb-about-cta__ico .tb-ico { width: 1.0625rem; height: 1.0625rem; }
.tb-about-cta__actions .tb-btn { margin-block-start: var(--sp-2); }

@media (max-width: 900px) {
  .tb-about-hero__grid, .tb-about-story__grid, .tb-about-cta { grid-template-columns: minmax(0, 1fr); }
  .tb-about-hero__media { max-inline-size: 30rem; }
  .tb-about-hero__media--1 .tb-about-hero__photo { aspect-ratio: 4 / 3; }
  .tb-about-story__head { position: static; }
}
@media (max-width: 480px) {
  .tb-about-story__item { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-3); }
  .tb-about-story__no { font-size: 1.375rem; }
  .tb-about-hero__cta .tb-btn { flex: 1 1 100%; justify-content: center; }
}