/* ==========================================================================
   Titan Labs — Design tokens
   Brand: chrome blue on deep navy. Light + dark mode.
   ========================================================================== */

:root {
  /* Brand — from the Titan Labs logo */
  --color-accent:          #1663d8;  /* primary chrome blue        */
  --color-accent-ink:      #0f4bab;  /* accent text on light bg    */
  --color-accent-deep:     #0d47a1;  /* hover / pressed            */
  --color-accent-cta:      #1257c4;  /* button fill                */
  --color-accent-cta-deep: #0b3f95;  /* button hover               */
  --color-accent-glow:     #4f9bff;  /* highlight / sheen          */

  /* Surfaces — light mode */
  --color-canvas:  #f6f8fc;
  --color-surface: #ffffff;
  --color-panel:   #eef3fb;
  --color-line:    #d3dded;

  /* Type — light mode */
  --color-ink-strong: #0b1220;
  --color-ink:        #1e293b;
  --color-muted:      #55617a;
  --color-faint:      #7c88a1;

  /* Fills */
  --nv-fill:        #0b1220;
  --nv-fill-hover:  #16203a;
  --nv-on-fill:     #ffffff;

  /* Status */
  --color-success:  #16a34a;
  --nv-danger:      #dc2626;
  --nv-danger-bg:   #fdecec;
  --nv-danger-ink:  #b91c1c;

  /* Glass / effects */
  --nv-glass:       rgba(255, 255, 255, .72);
  --nv-glass-hover: rgba(255, 255, 255, .92);
  --nv-glass-edge:  rgba(255, 255, 255, .55);
  --nv-glass-sheen: rgba(255, 255, 255, .70);
  --nv-img-outline: rgba(0, 0, 0, .10);

  /* Typography */
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Shape */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /*
   * Elevation.
   *
   * Elevation is reserved for things that genuinely float above the page —
   * drawers, modals, the age gate, sticky bars. A bordered card sitting in
   * the flow gets its edge from the border alone; a soft shadow under an
   * already-outlined box reads as a stock template rather than a considered
   * one. Kept tighter and cooler than before, tinted with the page's ink
   * rather than neutral grey so it sits in the palette.
   */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow:    0 2px 6px rgba(11, 18, 32, .06);
  --shadow-lg: 0 24px 60px -12px rgba(11, 18, 32, .18);

  /* Layout */
  --container: 1240px;
  --header-h:  72px;
}

/* The store is light-only; the dark palette and its toggle were removed so
   visitors do not get one of two different-looking stores based on an OS
   setting they never chose here. */


/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Display type carries the page. The old scale topped out at 3.5rem, which
 * is a safe corporate size — big enough to be a heading, never big enough to
 * be the thing you remember. Headings now run larger and tighter: as the size
 * grows the tracking closes up, which is what keeps a very large line reading
 * as one deliberate shape rather than spaced-out letters.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink-strong);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
}
h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 800;
}
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); letter-spacing: -.022em; }

/* Tight display leading suits the large desktop sizes; at mobile sizes the
   same ratio reads cramped, and very tight tracking starts to collide. */
@media (max-width: 899px) {
  h1 { line-height: 1.1;  letter-spacing: -.025em; }
  h2 { line-height: 1.16; letter-spacing: -.02em; }
  h3 { line-height: 1.3;  letter-spacing: -.015em; }
}

p { margin: 0 0 1em; }

a { color: var(--color-accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--color-accent-deep); }

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

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.tl-container {
  --tl-gutter: 20px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--tl-gutter);
}

.tl-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
/* Phones show one section at a time, so the desktop breathing room just turns
   into scrolling. */
@media (max-width: 899px) { .tl-section { padding-block: 2.75rem; } }
.tl-section--panel { background: var(--color-panel); }

/*
 * Every section led with the same left-aligned eyebrow and h2 on a near-white
 * background, so eight of them in a row read as one undifferentiated column.
 * These give the page a rhythm to scroll through: a centred head narrows the
 * measure and signals a change of subject, and --tight pulls the two halves of
 * a pair together so they group rather than repeat.
 */
.tl-sectionhead--center {
  justify-content: center;
  text-align: center;
}
.tl-sectionhead--center > div {
  max-width: 62ch;
  margin-inline: auto;
}

.tl-section--tight { padding-block-start: 0; }

/* Set in mono: the eyebrow labels a section the way a readout labels a
   measurement, which is the voice the rest of the lab data already uses. */
.tl-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: .75rem;
}

.tl-lede {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

.tl-grid { display: grid; gap: 20px; }
.tl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tl-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tl-grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Below the 4-up breakpoint a stacked product grid turns into an endless
   column, so swipe it sideways instead. Stays a plain grid on desktop. */
@media (max-width: 899px) {
  .tl-grid--scroll-mobile {
    grid-auto-flow: column;
    /* Cards stop short of full width so the next one peeks in — that sliver is
       the only affordance telling a user the row scrolls. */
    grid-auto-columns: minmax(216px, 78%);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the viewport edges so cards scroll out of the container. */
    margin-inline: calc(var(--tl-gutter, 20px) * -1);
    padding-inline: var(--tl-gutter, 20px);
    padding-bottom: .5rem;
    scroll-padding-inline-start: var(--tl-gutter, 20px);
  }
  .tl-grid--scroll-mobile::-webkit-scrollbar { display: none; }
  .tl-grid--scroll-mobile > * { scroll-snap-align: start; }
  /* Review cards read better a touch narrower than product cards. */
  .tl-grid--scroll-mobile > .tl-review-card { align-self: start; }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-accent); color: #fff;
  padding: 10px 18px; z-index: 999;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tl-btn:active { transform: translateY(1px); }

/* A wide coloured glow under a button is the clearest tell of a stock theme.
   The button earns its presence from the fill; it gets a tight shadow to sit
   on the page, and the hover shifts the colour rather than the blur. */
.tl-btn--primary {
  background: var(--color-accent-cta);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .12);
}
.tl-btn--primary:hover {
  background: var(--color-accent-cta-deep);
  color: #fff;
  box-shadow: 0 2px 6px rgba(11, 18, 32, .16);
}

.tl-btn--dark {
  background: var(--nv-fill);
  color: var(--nv-on-fill);
}
.tl-btn--dark:hover { background: var(--nv-fill-hover); color: var(--nv-on-fill); }

.tl-btn--ghost {
  background: transparent;
  color: var(--color-ink-strong);
  border-color: var(--color-line);
}
.tl-btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.tl-btn--sm { padding: .55rem 1.05rem; font-size: .85rem; }
.tl-btn--block { width: 100%; }

/* ==========================================================================
   Badges & pills
   ========================================================================== */

.tl-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tl-badge--outline {
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
}
.tl-badge--sale { background: var(--nv-danger-bg); color: var(--nv-danger-ink); }

/* ==========================================================================
   Header
   ========================================================================== */

.tl-header {
  position: sticky;
  top: var(--admin-bar-h, 0px);
  z-index: 100;
  background: var(--nv-glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-line);
}

/*
 * The WordPress admin bar is fixed over the top of the viewport, so a header
 * stuck to top:0 slides underneath it and loses its first 32px. Only logged-in
 * users see the bar, hence the offset hangs off .admin-bar rather than being
 * baked into the header. Below 783px WordPress makes the bar 46px tall and
 * scrolls it away with the page, so the header goes back to top:0 there.
 */
body.admin-bar { --admin-bar-h: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-h: 0px; }
}

.tl-header__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
  transition: min-height .22s ease;
}

/*
 * Three equal outer tracks put the nav in the true centre of the bar rather
 * than the centre of the space left over, so it does not shift as the logo or
 * the action icons change width.
 */
@media (min-width: 1024px) {
  .tl-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .tl-header__bar > .tl-nav { justify-self: center; }
  .tl-header__bar > .tl-header__actions { justify-self: end; }
}

/* Condensed on scroll — set by the scroll handler in app.js.
 *
 * Only the padding around the bar tightens. The logo keeps its resting size:
 * shrinking it as well made the scrolled header read as a different, smaller
 * site, and the wide lockup became unreadable at 38px. */
.tl-header.is-condensed .tl-header__bar { min-height: 64px; }
.tl-header.is-condensed { box-shadow: 0 1px 12px rgba(11, 18, 32, .07); }

@media (prefers-reduced-motion: reduce) {
  .tl-header__bar { transition: none; }
}

/* The logo is a flex item in the bar. Without this it is allowed to shrink
   past its contents, and on narrow screens the nav and action icons squeeze
   the custom logo to zero width — max-width caps a size, it never floors one. */
.tl-logo {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--color-ink-strong);
  text-transform: uppercase;
  white-space: nowrap;
}
.tl-logo:hover { color: var(--color-ink-strong); }
/* WordPress prints the custom logo with its own link and intrinsic width
   attributes, so the size has to be pinned on the image itself.

   The uploaded mark is a wide lockup (1000x353): capping it by height alone
   left the wordmark too small to read, so it is bounded on width as well and
   allowed more height. */
/* The height is set outright rather than left to `auto`. As a flex item with
   no definite basis the image resolved to zero width on narrow screens, so the
   logo vanished; `object-fit: contain` keeps the lockup's aspect ratio inside
   the box. */
.tl-logo img,
.tl-logo .custom-logo {
  height: 52px;
  width: auto;
  max-width: 190px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}
/* Phones: the burger and cart sit close to the logo, so the lockup gets a
   smaller ceiling rather than being allowed to crowd them. */
@media (max-width: 600px) {
  .tl-logo img,
  .tl-logo .custom-logo { height: 40px; max-width: 148px; }
}

.tl-logo--custom { line-height: 0; }
.tl-logo--custom .custom-logo-link { display: inline-flex; align-items: center; }
.tl-logo__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--color-accent-glow), var(--color-accent-deep));
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Primary nav */
.tl-nav { display: none; margin-inline-start: auto; }
@media (min-width: 1024px) { .tl-nav { display: block; } }

.tl-nav__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
}
.tl-nav__list a:hover {
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  color: var(--color-accent-ink);
}

.tl-nav__list li { position: relative; }

/* Dropdown */
.tl-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.tl-nav__list li:hover > .sub-menu,
.tl-nav__list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.tl-nav__list .sub-menu a { display: block; padding: .5rem .7rem; font-size: .9rem; }

/* Header actions */
.tl-header__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-inline-start: auto;
}
@media (min-width: 1024px) { .tl-header__actions { margin-inline-start: 0; } }


.tl-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tl-iconbtn:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-ink);
}
.tl-iconbtn svg { width: 20px; height: 20px; }

/* Hamburger only where .tl-nav is hidden. Must follow .tl-iconbtn's own
   display declaration to win on equal specificity. */
@media (min-width: 1024px) { .tl-iconbtn--menu { display: none; } }

.tl-cart { position: relative; }

.tl-account { position: relative; }
/* A quiet marker that someone is signed in, without a name eating header room. */
.tl-account__dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-surface);
}
.tl-cart__count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--color-accent-cta);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

.tl-cart__count.is-bumped { animation: tl-bump .42s cubic-bezier(.2,.9,.3,1.4); }
@keyframes tl-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.tl-cartdrawer {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
}
.tl-cartdrawer.is-open { visibility: visible; pointer-events: auto; }

.tl-cartdrawer__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 13, 24, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
}
.tl-cartdrawer.is-open .tl-cartdrawer__scrim { opacity: 1; }

.tl-cartdrawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.tl-cartdrawer.is-open .tl-cartdrawer__panel { transform: translateX(0); }

.tl-cartdrawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-cartdrawer__head strong { font-family: var(--font-display); font-size: 1.05rem; }

.tl-cartdrawer__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tl-cartdrawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1.25rem;
}

/* Empty state */
.tl-cartdrawer__empty { text-align: center; padding: 2.5rem 1rem 1rem; }
.tl-cartdrawer__emptyicon {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}
.tl-cartdrawer__emptyicon svg { width: 30px; height: 30px; }
.tl-cartdrawer__emptytitle {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--color-ink-strong);
}
.tl-cartdrawer__emptytext {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.6;
  max-width: 30ch;
  margin: 0 auto 1.4rem;
}
.tl-cartdrawer__emptycta { width: 100%; justify-content: center; }

/* Line items */
.tl-cartdrawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tl-cartitem {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: .85rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-cartitem:last-child { border-bottom: 0; padding-bottom: 0; }
.tl-cartitem__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-panel);
  aspect-ratio: 1;
}
.tl-cartitem__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-cartitem__info { min-width: 0; }
.tl-cartitem__name {
  margin: 0 0 .2rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}
.tl-cartitem__name a { color: var(--color-ink-strong); }
.tl-cartitem__name a:hover { color: var(--color-accent); }
.tl-cartitem__meta { margin: 0 0 .4rem; font-size: .78rem; color: var(--color-muted); }
.tl-cartitem__meta p { margin: 0; }
.tl-cartitem__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  margin-top: .5rem;
}
.tl-cartitem__price { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.tl-cartitem__remove {
  grid-column: 3;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.tl-cartitem__remove:hover {
  background: color-mix(in srgb, #e5484d 12%, transparent);
  color: #e5484d;
}
.tl-cartitem__remove svg { width: 15px; height: 15px; }

/* Quantity stepper */
.tl-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  overflow: hidden;
}
.tl-qty__btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.tl-qty__btn:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-ink);
}
.tl-qty__input {
  width: 34px;
  height: 30px;
  border: 0;
  border-inline: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink-strong);
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font-sans);
  -moz-appearance: textfield;
}
.tl-qty__input::-webkit-outer-spin-button,
.tl-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stack discount nudge */
.tl-cartdrawer__perk {
  margin: 1rem 0 0;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--color-panel);
  color: var(--color-muted);
  font-size: .82rem;
  text-align: center;
}
.tl-cartdrawer__perk--on {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-ink);
  font-weight: 600;
}

/* Footer */
.tl-cartdrawer__foot {
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}
.tl-cartdrawer__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-bottom: .25rem;
}
.tl-cartdrawer__total span { color: var(--color-muted); font-size: .9rem; }
.tl-cartdrawer__total strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ink-strong);
}
.tl-cartdrawer__note { margin: 0 0 .9rem; font-size: .76rem; color: var(--color-muted); }
.tl-cartdrawer__checkout { width: 100%; justify-content: center; }
.tl-cartdrawer__viewcart {
  display: block;
  margin-top: .7rem;
  text-align: center;
  font-size: .85rem;
  color: var(--color-muted);
}
.tl-cartdrawer__viewcart:hover { color: var(--color-accent); }

/* Busy veil while a quantity request is in flight */
.tl-cartdrawer__busy {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
}
.tl-cartdrawer.is-busy .tl-cartdrawer__busy { display: grid; }
.tl-cartdrawer__busy span {
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-top-color: var(--color-accent);
  animation: tl-spin .7s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* Add-to-cart button feedback */
.tl-btn.is-adding, .add_to_cart_button.is-adding { opacity: .75; pointer-events: none; }
.tl-btn.is-added, .add_to_cart_button.is-added {
  background: #17916b !important;
  border-color: #17916b !important;
  color: #fff !important;
}
.tl-btn.is-added::after, .add_to_cart_button.is-added::after {
  content: " ✓";
  font-weight: 700;
}
/* WooCommerce injects its own "View cart" link after the button; the drawer
   already covers that job. */
.added_to_cart { display: none !important; }

@media (max-width: 480px) {
  .tl-cartdrawer__panel { width: 100%; }
}

/* ==========================================================================
   Empty cart page
   ========================================================================== */

.tl-emptycart {
  max-width: 640px;
  /* The .woocommerce wrapper constrains width without centring, so claim the
     full row before centring inside it. */
  width: 100%;
  margin-inline: auto;
  padding: clamp(2rem, 1rem + 4vw, 4rem) 1.25rem;
  text-align: center;
}
.woocommerce-cart .woocommerce { display: flow-root; }
.tl-emptycart__icon {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  margin: 0 auto 1.5rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 70%),
    var(--color-panel);
  border: 1px solid var(--color-line);
  color: var(--color-accent);
}
.tl-emptycart__icon svg { width: 42px; height: 42px; }
.tl-emptycart__title { margin: 0 0 .6rem; }
.tl-emptycart__text {
  color: var(--color-muted);
  max-width: 46ch;
  margin: 0 auto 1.75rem;
  line-height: 1.65;
}
.tl-emptycart__actions {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  margin-bottom: 2.5rem;
}
.tl-emptycart__actions .tl-btn { flex: 0 1 auto; }

.tl-emptycart__cats { margin-bottom: 2.5rem; }
.tl-emptycart__catlabel {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .8rem;
}
.tl-emptycart__catlinks {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.tl-emptycart__catlinks a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: .88rem;
  font-weight: 500;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.tl-emptycart__catlinks a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.tl-emptycart__catlinks span {
  font-size: .74rem;
  color: var(--color-muted);
  background: var(--color-panel);
  border-radius: 999px;
  padding: .05rem .4rem;
}

.tl-emptycart__trust {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center;
  list-style: none;
  margin: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-line);
}
.tl-emptycart__trust li { display: grid; gap: .15rem; }
.tl-emptycart__trust strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-ink-strong);
}
.tl-emptycart__trust span { font-size: .78rem; color: var(--color-muted); }

@media (max-width: 899px) {
  .tl-emptycart__actions .tl-btn { flex: 1 1 100%; justify-content: center; }
  .tl-emptycart__trust { gap: 1rem; }
  .tl-emptycart__trust li { flex: 1 1 30%; }
}

/* Announcement bar */
.tl-announce {
  background: var(--nv-fill);
  color: var(--nv-on-fill);
  font-size: .8rem;
  text-align: center;
  padding: .5rem 1rem;
  letter-spacing: .02em;
}
.tl-announce strong { color: var(--nv-on-fill); }

/* Mobile drawer */
.tl-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.tl-drawer.is-open { display: block; }
.tl-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 13, 24, .55);
  backdrop-filter: blur(2px);
}
.tl-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(380px, 88vw);
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-line);
  padding: 1.25rem;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.tl-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
/* The drawer reuses titan_primary_nav(), which emits .tl-nav__list — a
   horizontal flex bar with absolutely-positioned hover dropdowns. Both have to
   be unwound here or the menu renders as one clipped row with invisible
   sub-menus. */
.tl-drawer nav ul,
.tl-drawer nav .tl-nav__list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
/* The rule above out-specifies the UA's [hidden] default, which would leave
   every collapsed sub-menu on screen. */
.tl-drawer nav ul[hidden] { display: none; }
.tl-drawer nav li { position: static; }
.tl-drawer nav a,
.tl-drawer nav .tl-nav__list a {
  display: block;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  white-space: normal;
}
.tl-drawer nav .tl-nav__list .sub-menu {
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
  padding-inline-start: .9rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tl-drawer nav .sub-menu a { font-size: .9rem; color: var(--color-muted); }

/* Accordion rows (built by buildDrawerAccordion) */
.tl-drawer__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-drawer__row > a { flex: 1; border-bottom: 0 !important; }
.tl-drawer__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-inline-end: -.35rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.tl-drawer__toggle svg {
  width: 18px; height: 18px;
  transition: transform .2s ease;
}
.tl-drawer__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-ink);
}
.tl-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tl-drawer nav .tl-has-sub.is-open > .sub-menu {
  padding-block: .35rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-drawer nav .sub-menu a { padding-block: .55rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.tl-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  background:
    radial-gradient(1100px 520px at 78% -10%,
      color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--color-panel), var(--color-canvas));
}

.tl-hero__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .tl-hero__inner { grid-template-columns: 1.08fr .92fr; }
}

/* On phones the product shot has to lead — stacked text-first, the image sat
   ~700px down where nobody sees what is being sold. Source order stays
   text-first for desktop and for screen readers on the way in. */
@media (max-width: 899px) {
  .tl-hero__inner { gap: 1.75rem; }
  .tl-hero__inner > .tl-hero__visual { order: -1; }
  /* A 4:3 block eats the fold on a phone; go wider and shorter. */
  .tl-hero__visual { aspect-ratio: 16 / 10; }
}

.tl-hero h1 { margin-bottom: .35em; }

.tl-hero__sub {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: 1.75rem;
}

/* Display line-height of 1.15 is tuned for the 56px desktop h1; at the 32px
   mobile size it reads cramped, and a 60ch measure never applies on a 390px
   screen anyway. */
@media (max-width: 899px) {
  .tl-hero h1 {
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
  }
  .tl-hero__sub {
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: 1.5rem;
  }
  .tl-hero__cta { gap: .6rem; margin-bottom: 1.5rem; }
  /* Full-width buttons beat two cramped pills side by side. */
  .tl-hero__cta .tl-btn { flex: 1 1 100%; justify-content: center; }
  .tl-hero__trust { gap: 1rem 1.5rem; padding-top: 1.25rem; }
  .tl-hero__trust > div { min-width: 0; flex: 1 1 calc(50% - .75rem); }
  .tl-hero__trust dt { font-size: 1.1rem; }
}

.tl-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }

.tl-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.tl-hero__trust > div { min-width: 120px; }
/* These are measured values, so they are set like measured values. */
.tl-hero__trust dt {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-strong);
}
.tl-hero__trust dd {
  margin: .1rem 0 0;
  font-size: .82rem;
  color: var(--color-muted);
}

/* The hero image is the one thing on the page that should read as lifted, so
   it keeps a shadow — but not a border as well. The edge comes from the
   elevation alone. */
.tl-hero__visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.tl-hero__visual img { width: 100%; height: 100%; object-fit: cover; }

/* A product shot needs to be seen whole, and the lab chips are the point. */
.tl-hero__visual--product {
  background:
    radial-gradient(120% 85% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
    var(--color-surface);
}
.tl-hero__visual--product img {
  object-fit: contain;
  padding: clamp(1.25rem, .5rem + 2.5vw, 2.5rem);
}

/*
 * A cut-out product render on a transparent background. It carries its own
 * edge, so the framed white card works against it — no panel, no shadow, and
 * the tall bottle is shown whole rather than cropped to a 4:3 window.
 */
.tl-hero__visual--cutout {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
}
/* The rings and the bottle share one grid cell so they stay concentric. */
.tl-hero__visual--cutout {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
}
/* Only the rings and the bottle stack; the pills are positioned against the
   box itself and must stay out of the grid flow. */
.tl-hero__visual--cutout > img,
.tl-hero__visual--cutout > .tl-hero__rings { grid-area: stack; }
/*
 * Elementor ships `.elementor img { border-radius: 0; box-shadow: none }` at
 * the same specificity as a single class, and it loads after the theme — so a
 * plain `.tl-hero__visual--cutout img` rule lost the corners and the lift
 * while its other declarations applied. The doubled class outranks it.
 */
.tl-hero__visual--cutout.tl-hero__visual--cutout img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(320px, 46vh, 560px);
  object-fit: contain;
  margin-inline: auto;
  /* A true cut-out on transparency: no card, no panel. The drop-shadow
     follows the bottle's own outline and grounds it on the page. */
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 34px rgba(11, 18, 32, .22));
  animation: tl-hero-float 6s ease-in-out infinite;
}

/*
 * Concentric rings behind the bottle. Drawn with repeating radial stops
 * rather than stacked elements so the whole halo is one paint, and masked
 * so it fades out instead of ending on a hard circle.
 */
.tl-hero__visual--cutout .tl-hero__rings {
  width: min(115%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--color-accent) 14%, transparent) 0 1px,
      transparent 1px 58px
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 76%);
  opacity: .85;
}

/* Floating lab-data pills, positioned off opposite corners of the bottle. */
.tl-hero__float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -10px rgba(11, 18, 32, .28);
  white-space: nowrap;
}
.tl-hero__float strong {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  line-height: 1.15;
  color: var(--color-ink-strong);
}
.tl-hero__float em {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.tl-hero__float--purity {
  top: 6%;
  right: -2%;
  animation: tl-hero-float 6s ease-in-out infinite .6s;
}
.tl-hero__float--verified {
  bottom: 10%;
  left: -4%;
  animation: tl-hero-float 6s ease-in-out infinite 1.4s;
}

.tl-hero__float-ring {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  flex: 0 0 auto;
}
.tl-hero__float-shield {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success, #16a34a) 14%, transparent);
  color: var(--color-success, #16a34a);
  flex: 0 0 auto;
}
.tl-hero__float-shield svg { width: 16px; height: 16px; }

@keyframes tl-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Phones: the pills would sit over the bottle, so tuck them to the edges. */
@media (max-width: 600px) {
  .tl-hero__float { padding: .5rem .7rem; }
  .tl-hero__float--purity   { top: 2%; right: 0; }
  .tl-hero__float--verified { bottom: 4%; left: 0; }
  .tl-hero__float strong { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-hero__visual--cutout img,
  .tl-hero__float { animation: none; }
}
.tl-hero__labchip {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.tl-hero__labchip-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
}
.tl-hero__labchip strong {
  display: block;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-ink-strong);
}
.tl-hero__labchip em {
  display: block;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tl-hero__batchchip {
  position: absolute;
  right: 1rem; top: 1rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tl-hero__batchchip strong {
  font-family: var(--font-mono);
  color: var(--color-ink-strong);
  text-transform: none;
  letter-spacing: 0;
}

/* Molecule backdrop */
.tl-molecule-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 26%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .35;
  pointer-events: none;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* ==========================================================================
   Cards — category
   ========================================================================== */

.tl-cat-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-cat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.tl-cat-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.tl-cat-card h3 { margin: 0; font-size: 1.15rem; }
.tl-cat-card__count { font-size: .78rem; color: var(--color-faint); white-space: nowrap; }
/*
 * The peptide names scroll as one line instead of wrapping into a block.
 * The track holds two copies of the list and shifts by exactly half its
 * width, so the loop is seamless; it pauses on hover and focus so the links
 * can actually be clicked, and the edges fade rather than cutting off.
 */
.tl-cat-card__marquee {
  margin-top: .9rem;
  display: flex;
  gap: .35rem;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
}
.tl-cat-card__marquee:hover .tl-cat-card__list,
.tl-cat-card__marquee:focus-within .tl-cat-card__list {
  animation-play-state: paused;
}

.tl-cat-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex: 0 0 auto;
  gap: .35rem;
  animation: tl-chip-scroll 26s linear infinite;
}
.tl-cat-card__list li { flex: 0 0 auto; }

@keyframes tl-chip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - .35rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-cat-card__list { animation: none; }
  .tl-cat-card__marquee {
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .tl-cat-card__marquee .tl-cat-card__list[aria-hidden="true"] { display: none; }
  .tl-cat-card__list { flex-wrap: wrap; }
}
.tl-cat-card__list a {
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: var(--color-panel);
  color: var(--color-muted);
  font-size: .78rem;
}
.tl-cat-card__list a:hover {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-ink);
}

/* ==========================================================================
   Product cards
   ========================================================================== */

.tl-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-product-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.tl-product-card__media {
  position: relative;
  /* The packshots carry their own generous margins, so a taller frame just
     adds empty space under the vial. */
  aspect-ratio: 1 / 1;
  padding: .6rem;
  /* Every packshot is the same composition, so the plinth does the work of
     giving each card its own presence. */
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
    var(--color-panel);
  overflow: hidden;
}
.tl-product-card__media img {
  width: 100%; height: 100%;
  /* contain, not cover: a cropped vial reads as a broken image. */
  object-fit: contain;
  transition: transform .35s ease;
}
.tl-product-card:hover .tl-product-card__media img { transform: scale(1.03); }

.tl-product-card__flags {
  position: absolute;
  top: .6rem; left: .6rem;
  display: flex; flex-direction: column; gap: .35rem;
  z-index: 2;
}

/* Format tag — the one thing that differs between look-alike thumbnails. */
.tl-product-card__format {
  position: absolute;
  top: .6rem; right: .6rem;
  z-index: 2;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/*
 * Fixed tracks rather than flex flow: a rating or size that renders on some
 * products and not others would otherwise leave titles and prices at
 * different heights across a row.
 */
.tl-product-card__body {
  display: grid;
  grid-template-rows: 1.25rem 2.6rem 1.05rem auto;
  flex: 1;
  padding: .9rem 1rem 1rem;
  gap: .3rem;
}

.tl-product-card__meta { display: flex; align-items: center; min-height: 1.25rem; }

.tl-purity {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.tl-product-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  /* Peptide names vary from "DSIP" to "Tesamorelin / Ipamorelin Blend". */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-product-card__title a { color: var(--color-ink-strong); }
.tl-product-card__title a:hover { color: var(--color-accent); }

.tl-product-card__size {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--color-muted);
}

.tl-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .35rem;
}

.tl-product-card__price {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-ink-strong);
}
.tl-product-card__price del { color: var(--color-faint); font-weight: 500; font-size: .85rem; margin-inline-end: .35rem; }
.tl-product-card__price ins { text-decoration: none; color: var(--color-accent-ink); }

/*
 * A filled blue bar on all 24 cards floods the grid with accent colour and
 * drowns out the purity chip, which is the thing worth looking at.
 */
.tl-product-card__add {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tl-product-card__add:hover {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: #fff;
}
.tl-product-card__add.is-added {
  background: #17916b;
  border-color: #17916b;
  color: #fff;
}

/* Stars */
.tl-stars {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--color-muted);
}
.tl-stars__glyphs { color: #f5a623; letter-spacing: .06em; }

/* Tabs */
.tl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
/* Keep the format tabs on one swipeable row on phones instead of wrapping. */
@media (max-width: 899px) {
  .tl-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--tl-gutter, 20px) * -1);
    padding-inline: var(--tl-gutter, 20px);
    padding-bottom: .25rem;
  }
  .tl-tabs::-webkit-scrollbar { display: none; }
  .tl-tabs button { flex: 0 0 auto; }
}
.tl-tabs button {
  padding: .5rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
}
.tl-tabs button:hover { color: var(--color-accent-ink); border-color: var(--color-accent); }
.tl-tabs button[aria-selected="true"] {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: #fff;
}
.tl-tabpanel[hidden] { display: none; }

/* ==========================================================================
   Section head
   ========================================================================== */

.tl-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.tl-sectionhead h2 { margin-bottom: .25rem; }

/* ==========================================================================
   Spotlight
   ========================================================================== */

.tl-spotlight {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background:
    radial-gradient(900px 420px at 15% 0%,
      color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 60%),
    var(--nv-fill);
  color: var(--nv-on-fill);
}
.tl-spotlight h2, .tl-spotlight h3 { color: var(--nv-on-fill); }
.tl-spotlight .tl-eyebrow { color: var(--color-accent-glow); }
.tl-spotlight__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .tl-spotlight__inner { grid-template-columns: 1fr 1fr; } }
/* Same as the hero: lead with the product, not with spec text. */
@media (max-width: 899px) {
  .tl-spotlight__inner > .tl-spotlight__media { order: -1; }
  .tl-spotlight__media { aspect-ratio: 16 / 10; }
  .tl-spotlight__specs { gap: 1rem 1.5rem; }
}
.tl-spotlight__specs {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin: 1.25rem 0;
  padding: 1rem 0;
  border-block: 1px solid rgba(255,255,255,.16);
}
.tl-spotlight__specs dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.tl-spotlight__specs dd { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 700; }
.tl-spotlight__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  margin: .5rem 0 1.25rem;
}
.tl-spotlight__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.05);
}
.tl-spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-spotlight__note { font-size: .78rem; opacity: .6; margin: 0; }

/* ==========================================================================
   Stack builder promo
   ========================================================================== */

.tl-stack-promo {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)),
      var(--color-surface));
}
@media (min-width: 800px) { .tl-stack-promo { grid-template-columns: 1.4fr .6fr; } }
.tl-stack-promo__tiers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.tl-reviews__summary {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 760px) { .tl-reviews__summary { grid-template-columns: auto 1fr; } }

.tl-reviews__score {
  text-align: center;
  padding: 1.5rem 2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.tl-reviews__score b {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-ink-strong);
}
.tl-reviews__score span { font-size: .82rem; color: var(--color-muted); }

.tl-reviews__bars { display: grid; gap: .45rem; }
.tl-reviews__bar { display: grid; grid-template-columns: 3rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .82rem; }
.tl-reviews__bar .track { height: 8px; border-radius: 999px; background: var(--color-panel); overflow: hidden; }
.tl-reviews__bar .fill { height: 100%; border-radius: 999px; background: #f5a623; }

.tl-review-card {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.tl-review-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .5rem;
  font-size: .78rem; color: var(--color-faint);
}
.tl-review-card p { margin: 0; font-size: .92rem; }

/* ==========================================================================
   Quality assurance
   ========================================================================== */

.tl-qa__stats {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.tl-qa__stats dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
.tl-qa__stats dd { margin: .35rem 0 0; font-size: .85rem; color: var(--color-muted); }

.tl-feature {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.tl-feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tl-feature p { margin: 0; font-size: .88rem; color: var(--color-muted); }
.tl-feature__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: .8rem;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.tl-feature__icon svg { width: 22px; height: 22px; }

/* ==========================================================================
   COA table
   ========================================================================== */

.tl-coa__controls {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1.25rem;
}
.tl-coa__controls input,
.tl-coa__controls select {
  padding: .6rem .9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: .9rem;
}
.tl-coa__controls input { flex: 1 1 240px; }

.tl-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.tl-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 860px; }
.tl-table th, .tl-table td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.tl-table thead th {
  background: var(--color-panel);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-weight: 600;
}
.tl-table tbody tr:last-child td { border-bottom: 0; }
.tl-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.tl-pass { color: var(--color-success); font-weight: 600; }

/* ==========================================================================
   Age gate
   ========================================================================== */

html.tl-gated body { overflow: hidden; }
html.tl-gated .tl-agegate { display: grid; }

.tl-agegate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: rgba(8, 13, 24, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tl-agegate__box {
  width: min(480px, 100%);
  padding: 2rem;
  text-align: center;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
}
.tl-agegate__box p { font-size: .9rem; color: var(--color-muted); }
.tl-agegate__actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.25rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.tl-footer {
  background: var(--color-panel);
  border-top: 1px solid var(--color-line);
  padding-block: 3rem 0;
}
.tl-footer__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tl-footer__brand { grid-column: 1 / -1; max-width: 42ch; }
@media (min-width: 1000px) { .tl-footer__brand { grid-column: auto; max-width: 34ch; } }
.tl-footer__brand p { font-size: .88rem; color: var(--color-muted); }

.tl-footer h4 {
  font-family: var(--font-sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-faint);
  margin-bottom: .9rem;
}
.tl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tl-footer ul a { color: var(--color-muted); font-size: .88rem; }
.tl-footer ul a:hover { color: var(--color-accent); }

.tl-footer__pay {
  margin-top: 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.tl-footer__methods { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tl-footer__disclaimer { font-size: .76rem; color: var(--color-faint); line-height: 1.6; }
.tl-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid var(--color-line);
  font-size: .8rem;
  color: var(--color-faint);
}
.tl-footer__bottom a { color: var(--color-faint); }
.tl-footer__bottom a:hover { color: var(--color-accent); }

/* ==========================================================================
   WooCommerce overrides
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-panel);
  list-style: none;
  font-size: .9rem;
}
.woocommerce-error { border-inline-start-color: var(--nv-danger); background: var(--nv-danger-bg); color: var(--nv-danger-ink); }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

.woocommerce-breadcrumb {
  font-size: .82rem;
  color: var(--color-faint);
  margin-bottom: 1.25rem;
}
.woocommerce-breadcrumb a { color: var(--color-muted); }

.woocommerce-result-count, .woocommerce-ordering { font-size: .85rem; color: var(--color-muted); }
.woocommerce-ordering select {
  padding: .5rem .8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

/* ==========================================================================
   Single product
   ========================================================================== */

/*
 * WooCommerce's gallery markup carries no theme sizing, so the vial rendered
 * cropped and overflowing its frame.
 */
.woocommerce div.product div.images {
  margin-bottom: 2rem;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line);
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
    var(--color-panel);
  overflow: hidden;
}
.woocommerce div.product div.images img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1.25rem, .5rem + 2.5vw, 2.75rem);
  width: 100%;
  height: auto;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: .75rem;
  padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
  padding: .4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-panel);
  opacity: .65;
  transition: opacity .16s ease, border-color .16s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--color-accent);
}

@media (min-width: 900px) {
  .woocommerce div.product div.images { position: sticky; top: 1.5rem; }
}

.woocommerce div.product .product_title {
  margin-bottom: .3rem;
  /* The global h1 clamp tops out at 3.5rem, which dwarfs the buy column. */
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

/* Verified panel — the reason someone buys here, so it leads the column. */
.tl-verified {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 32%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}
.tl-verified__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}
.tl-verified__head strong {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--color-ink-strong);
}
.tl-verified__icon {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: var(--color-success);
}
.tl-verified__icon svg { width: 20px; height: 20px; }
.tl-verified__pass {
  margin-inline-start: auto;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tl-verified__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .75rem 1rem;
  margin: 0;
}
.tl-verified__specs dt {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .15rem;
}
.tl-verified__specs dd {
  margin: 0;
  /* Monospaced numerals read as instrument output rather than marketing. */
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-ink-strong);
}
.tl-verified__coa {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  justify-content: center;
  margin-top: .9rem;
  min-height: 44px;
}
.tl-verified__coa svg { width: 16px; height: 16px; }

/* Reassurance rows under the buy button */
.tl-buytrust {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.tl-buytrust li { display: flex; align-items: flex-start; gap: .7rem; }
.tl-buytrust__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}
.tl-buytrust__icon svg { width: 17px; height: 17px; }
.tl-buytrust strong {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-ink-strong);
}
.tl-buytrust em {
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: var(--color-muted);
}

.tl-rou {
  margin-top: 1.1rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--color-panel);
  font-size: .78rem;
  color: var(--color-muted);
}

/* Lab report */
.tl-labreport, .tl-pdpsection {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  clear: both;
}
.tl-labreport__grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .tl-labreport__grid { grid-template-columns: 1.5fr .8fr; }
}
.tl-labreport__tablewrap {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow-x: auto;
}
.tl-labreport__table { width: 100%; border-collapse: collapse; }
.tl-labreport__table th,
.tl-labreport__table td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.tl-labreport__table thead th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-panel);
}
.tl-labreport__table tbody tr:last-child th,
.tl-labreport__table tbody tr:last-child td { border-bottom: 0; }
.tl-labreport__table tbody th {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-ink-strong);
}
.tl-labreport__method {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.tl-labreport__result { font-family: var(--font-mono); font-size: .88rem; font-weight: 600; }
/* Colour alone is not an indicator — the check glyph carries it too. */
.tl-labreport__pass {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--color-success);
  font-weight: 700;
}
.tl-labreport__pass svg { width: 14px; height: 14px; }
.tl-mono { font-family: var(--font-mono); }

.tl-labreport__side {
  padding: 1.15rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
}
.tl-labreport__batch {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .6rem;
  font-size: .85rem;
}
.tl-labreport__batch span { color: var(--color-muted); }
.tl-labreport__batch strong { font-family: var(--font-mono); color: var(--color-ink-strong); }
.tl-labreport__verify {
  display: block;
  margin-top: .8rem;
  font-size: .85rem;
  font-weight: 600;
}
.tl-labreport__note {
  margin: .9rem 0 0;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* About section — prose, research areas, spec pairs */
.tl-about {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
@media (min-width: 900px) {
  .tl-about { grid-template-columns: 1.4fr .85fr; gap: 2.5rem; }
}
.tl-about__subhead {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 1.75rem 0 .8rem;
}
.tl-about__main > .tl-lede + .tl-about__subhead { margin-top: 1.5rem; }
.tl-about__areas {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-about__areas li {
  padding: .35rem .75rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .84rem;
  color: var(--color-ink);
}
.tl-about__specs {
  padding: 1.15rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
}
.tl-about__specs .tl-about__subhead { margin-top: 0; }
.tl-about__specs dl { margin: 0; display: grid; gap: .7rem; }
.tl-about__specs dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tl-about__specs dd {
  margin: .1rem 0 0;
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-ink-strong);
}

/* ==========================================================================
   My account
   ========================================================================== */

/*
 * page.php wraps the content in .tl-prose, whose 74ch measure is right for an
 * article and far too narrow for a dashboard — it squeezed the two columns
 * into half the container.
 */
.woocommerce-account .tl-prose { max-width: none; }

.woocommerce-account .woocommerce {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 260px minmax(0, 1fr); gap: 2.25rem; }
  /* Pin both tracks: auto-placement put the nav in the wide column and left
     the content in the 260px one. */
  .woocommerce-account .tl-account-nav { grid-column: 1; grid-row: 1; }
  .woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
}

/* Login and register are a single centred column, not a sidebar layout. */
.woocommerce-account.logged-out .woocommerce { display: block; }

.tl-account-nav {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
@media (min-width: 900px) {
  .tl-account-nav { position: sticky; top: 5.5rem; }
}

.tl-account-nav__user {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-panel);
}
.tl-account-nav__avatar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--color-accent-glow), var(--color-accent-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.tl-account-nav__who { min-width: 0; }
.tl-account-nav__who strong {
  display: block;
  font-size: .92rem;
  color: var(--color-ink-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-account-nav__who em {
  display: block;
  font-style: normal;
  font-size: .76rem;
  color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tl-account-nav__list { list-style: none; margin: 0; padding: .4rem; }
.tl-account-nav__list li { margin: 0; }
.tl-account-nav__list a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.tl-account-nav__list a:hover {
  background: var(--color-panel);
  color: var(--color-ink-strong);
}
.tl-account-nav__list .is-active a,
.tl-account-nav__list a[aria-current="page"] {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-ink);
  font-weight: 600;
}
.tl-account-nav__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--color-muted);
}
.tl-account-nav__list a:hover .tl-account-nav__icon,
.tl-account-nav__list .is-active .tl-account-nav__icon { color: currentColor; }
.tl-account-nav__icon svg { width: 17px; height: 17px; }

/* On a phone a stacked menu pushes the content off the first screen. */
@media (max-width: 899px) {
  .tl-account-nav__user { display: none; }
  .tl-account-nav__list {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: .5rem;
  }
  .tl-account-nav__list::-webkit-scrollbar { display: none; }
  .tl-account-nav__list li { flex: 0 0 auto; }
  .tl-account-nav__list a { white-space: nowrap; }
}

.woocommerce-MyAccount-content { min-width: 0; }

/* Dashboard */
.tl-dash__head { margin-bottom: 1.5rem; }
.tl-dash__hello { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 0 0 .3rem; }
.tl-dash__sub { color: var(--color-muted); margin: 0; }

.tl-dash__last {
  padding: 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: 1.5rem;
}
.tl-dash__lasthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.tl-dash__lasthead .tl-eyebrow { margin: 0; }
.tl-dash__status {
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--color-panel);
  color: var(--color-muted);
  font-size: .74rem;
  font-weight: 600;
}
.tl-dash__status--completed {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}
.tl-dash__status--processing,
.tl-dash__status--on-hold {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-ink);
}
.tl-dash__lastbody {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.tl-dash__lastbody > div:first-child { flex: 1; min-width: 0; }
.tl-dash__lastbody strong {
  display: block;
  font-family: var(--font-mono);
  color: var(--color-ink-strong);
}
.tl-dash__lastbody span { font-size: .82rem; color: var(--color-muted); }
.tl-dash__lasttotal {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-ink-strong);
}

.tl-dash__cards {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 1.5rem;
}
.tl-dash__card {
  display: block;
  padding: 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tl-dash__card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  box-shadow: var(--shadow-sm);
}
.tl-dash__cardicon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: .7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}
.tl-dash__cardicon svg { width: 19px; height: 19px; }
.tl-dash__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink-strong);
  margin-bottom: .15rem;
}
.tl-dash__card em {
  display: block;
  font-style: normal;
  font-size: .82rem;
  color: var(--color-muted);
}

.tl-dash__logout { font-size: .85rem; color: var(--color-muted); margin: 0; }

/* WooCommerce's own account tables and forms */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--color-panel);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   Shop filters
   ========================================================================== */

/*
 * The archive header already provides the breathing room; the wrapper's own
 * section padding on top of it pushed the grid most of a screen down.
 */
.woocommerce-shop main.tl-section,
.tax-product_cat main.tl-section { padding-top: .5rem; }

.tl-shoplayout { display: block; }

@media (min-width: 1024px) {
  .tl-shoplayout {
    display: grid;
    /* Left rail: users spend markedly more time on the left half, and it is
       where every other store puts filters. */
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
  }
}

.tl-shoplayout__sidebar { display: none; }
@media (min-width: 1024px) {
  .tl-shoplayout__sidebar { display: block; position: sticky; top: 1.5rem; }
}

.tl-shoplayout__main { min-width: 0; transition: opacity .18s ease; }
.tl-shoplayout__main.is-loading { opacity: .45; pointer-events: none; }

.tl-shoplayout__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.tl-shoplayout__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--color-muted);
}

.tl-filters__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.tl-filters__head strong {
  font-family: var(--font-display);
  font-size: 1rem;
}
.tl-filters__clear { font-size: .8rem; color: var(--color-muted); }
.tl-filters__clear:hover { color: var(--color-accent); }

.tl-filter {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-filter:last-of-type { border-bottom: 0; padding-bottom: 0; }
.tl-filter__title {
  padding: 0;
  margin-bottom: .6rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tl-filter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.tl-filter__opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .45rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: .88rem;
  transition: background-color .14s ease, color .14s ease;
}
.tl-filter__opt:hover { background: var(--color-panel); color: var(--color-ink-strong); }

.tl-filter__box {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border: 1.5px solid var(--color-line);
  border-radius: 5px;
  background: var(--color-surface);
  transition: background-color .14s ease, border-color .14s ease;
}
.tl-filter__opt.is-on .tl-filter__box {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  /* Check drawn in the box rather than shipped as an icon per option. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.tl-filter__opt.is-on { color: var(--color-ink-strong); font-weight: 600; }

.tl-filter__label { flex: 1; min-width: 0; }
.tl-filter__count {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--color-faint);
}

/* Dimmed rather than hidden: a sidebar that reshuffles on every click stops
   teaching the shape of the catalogue. */
.tl-filter__opt.is-empty { opacity: .4; pointer-events: none; }

/* Active filter chips */
.tl-activefilters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.tl-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent-ink);
  font-size: .8rem;
  font-weight: 600;
}
.tl-chip:hover { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.tl-chip span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: .7; }
.tl-chip--clear {
  border-color: var(--color-line);
  background: transparent;
  color: var(--color-muted);
  font-weight: 500;
}

.tl-shoplayout__empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
}
.tl-shoplayout__emptytitle {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-ink-strong);
  margin: 0 0 .4rem;
}
.tl-shoplayout__emptytext { color: var(--color-muted); font-size: .9rem; margin: 0 0 1.2rem; }

/* Mobile: a persistent bar in the thumb zone, opening a bottom sheet. */
.tl-shoplayout__mobilebar {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.3rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-ink-strong);
  color: var(--color-canvas);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.tl-shoplayout__mobilebar svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .tl-shoplayout__mobilebar { display: none; } }

.tl-shoplayout__mobilecount {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent-cta);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.tl-filtersheet {
  position: fixed;
  inset: 0;
  z-index: 205;
  visibility: hidden;
  pointer-events: none;
}
.tl-filtersheet.is-open { visibility: visible; pointer-events: auto; }
.tl-filtersheet__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 13, 24, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .26s ease;
}
.tl-filtersheet.is-open .tl-filtersheet__scrim { opacity: 1; }
.tl-filtersheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.tl-filtersheet.is-open .tl-filtersheet__panel { transform: translateY(0); }
.tl-filtersheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-filtersheet__head strong { font-family: var(--font-display); font-size: 1.05rem; }
.tl-filtersheet__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
}
.tl-filtersheet__body .tl-filters__head { display: none; }
.tl-filtersheet__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
}
.tl-filtersheet__foot .tl-btn { justify-content: center; }

/* The floating bar would otherwise sit on top of the last row of cards. */
@media (max-width: 1023px) {
  .tl-shoplayout__main { padding-bottom: 4.5rem; }
}

/* WooCommerce prints SKU and categories as one run-on line mid-column. */
.woocommerce div.product .product_meta {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-line);
  font-size: .8rem;
  color: var(--color-muted);
}
.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: .3rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-ink-strong);
}
.woocommerce div.product p.price del { color: var(--color-faint); font-size: 1.1rem; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--color-accent-ink); }

.woocommerce .quantity .qty {
  width: 4.5rem;
  padding: .65rem .5rem;
  text-align: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-cta);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-accent-cta-deep);
  color: #fff;
}

.woocommerce span.onsale {
  background: var(--nv-danger);
  color: #fff;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  min-height: 0;
  min-width: 0;
  line-height: 1.5;
  top: .6rem;
  left: .6rem;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .7rem 1.1rem;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-weight: 600;
  font-size: .92rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent);
}

.woocommerce table.shop_table {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-top: 0;
  border-bottom: 1px solid var(--color-line);
  padding: .85rem 1rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  padding: .7rem .9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: .95rem;
  height: auto;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: .35rem;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: .5rem .85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  min-width: 40px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-accent-cta);
  border-color: var(--color-accent-cta);
  color: #fff;
}

/* ==========================================================================
   Content / prose
   ========================================================================== */

.tl-prose { max-width: 74ch; }
/* Cart and checkout opt out of the reading measure — see page.php. */
.tl-pagewide { max-width: none; }
.tl-prose h2 { margin-top: 2rem; }
.tl-prose h3 { margin-top: 1.5rem; }
.tl-prose ul, .tl-prose ol { padding-inline-start: 1.25rem; }
.tl-prose li { margin-bottom: .4rem; }
.tl-prose img { border-radius: var(--radius-lg); }
.tl-prose blockquote {
  margin: 1.5rem 0;
  padding: .8rem 1.2rem;
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-muted);
}
.tl-prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .15em .4em;
  border-radius: 5px;
  background: var(--color-panel);
}

/* Post cards */
.tl-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tl-post-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.tl-post-card__media { aspect-ratio: 16 / 9; background: var(--color-panel); }
.tl-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-post-card__body { padding: 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.tl-post-card h3 { font-size: 1.05rem; margin: 0; }
.tl-post-card time { font-size: .78rem; color: var(--color-faint); }
.tl-post-card p { font-size: .88rem; color: var(--color-muted); margin: 0; }

/* Page hero */
.tl-pagehero {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
  background: linear-gradient(180deg, var(--color-panel), var(--color-canvas));
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 2.5rem;
}

/* The display scale belongs to editorial headings, not to a page label. A
   utility title like "Cart" or "Checkout" set at the full h1 size shouts
   without saying anything, so page headers get their own smaller step. */
.tl-pagehero h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -.03em;
  max-width: 22ch;
}

/* On a listing page the header's job is to get out of the way of the grid. */
.tl-pagehero--shop {
  padding-block: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  margin-bottom: 1.75rem;
}
.tl-pagehero--shop h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); max-width: 34ch; }
.tl-pagehero__lede { margin-top: .75rem; }
.tl-pagehero__count {
  margin: .6rem 0 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-muted);
}
.tl-pagehero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.tl-pagehero__trust li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .65rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 7%, transparent);
  color: var(--color-success);
  font-size: .74rem;
  font-weight: 600;
}
.tl-pagehero__trust li::before {
  content: "✓";
  font-weight: 700;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.tl-flex { display: flex; }
.tl-items-center { align-items: center; }
.tl-gap { gap: 1rem; }
.tl-mt-0 { margin-top: 0; }
.tl-mb-0 { margin-bottom: 0; }
.tl-text-center { text-align: center; }
.tl-muted { color: var(--color-muted); }
.tl-small { font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Content pages — hero, feature cards, FAQ, contact, policy
   ========================================================================== */

/* Page hero with eyebrow + lede, used across content pages. */
.tl-phero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  background:
    radial-gradient(900px 420px at 80% -20%,
      color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--color-panel), var(--color-canvas));
  border-bottom: 1px solid var(--color-line);
}
.tl-phero__inner > * { max-width: 62ch; }
.tl-phero h1 { margin-bottom: .35em; }
.tl-phero__lede {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--color-muted);
  margin-bottom: 0;
}
.tl-phero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Split section: text next to a bordered panel. */
.tl-split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .tl-split { grid-template-columns: 1.1fr .9fr; } }
.tl-split--reverse > :first-child { order: 2; }
@media (max-width: 899px) { .tl-split--reverse > :first-child { order: 0; } }

/* Bordered stat/spec panel. */
.tl-panelcard {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.tl-panelcard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-line);
}
.tl-panelcard__head h3 { margin: 0; font-size: 1rem; }
.tl-speclist { display: grid; gap: .85rem; margin: 0; }
.tl-speclist > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; font-size: .92rem;
}
.tl-speclist dt { color: var(--color-muted); }
.tl-speclist dd {
  margin: 0; font-family: var(--font-display);
  font-weight: 700; color: var(--color-ink-strong);
  text-align: right;
}

/* FAQ accordion. */
.tl-faq { display: grid; gap: .7rem; }
.tl-faq__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tl-faq__item[open] {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: var(--shadow-sm);
}
.tl-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink-strong);
}
.tl-faq__item > summary::-webkit-details-marker { display: none; }
.tl-faq__item > summary:hover { color: var(--color-accent-ink); }
.tl-faq__item > summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
  opacity: .55;
}
.tl-faq__item[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.tl-faq__answer {
  padding: 0 1.25rem 1.15rem;
  color: var(--color-muted);
  font-size: .94rem;
  line-height: 1.65;
}
.tl-faq__answer > :last-child { margin-bottom: 0; }
.tl-faq__answer ul { padding-inline-start: 1.15rem; margin: .5rem 0; }
.tl-faq__answer li { margin-bottom: .35rem; }

/* Contact method cards. */
.tl-contact-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-contact-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.tl-contact-card__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  margin-bottom: .5rem;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.tl-contact-card__icon svg { width: 22px; height: 22px; }
.tl-contact-card h3 { margin: 0; font-size: 1.05rem; }
.tl-contact-card p { margin: 0; font-size: .9rem; color: var(--color-muted); }
.tl-contact-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink-strong);
  word-break: break-word;
}
.tl-contact-card .tl-btn { margin-top: auto; align-self: flex-start; }

/* Numbered step list. */
.tl-steps { display: grid; gap: 1rem; counter-reset: tlstep; margin: 0; padding: 0; list-style: none; }
.tl-steps li {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 3.6rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.tl-steps li::before {
  counter-increment: tlstep;
  content: counter(tlstep);
  position: absolute;
  left: 1.15rem; top: 1.05rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-accent-cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
}
.tl-steps h3 { margin: 0 0 .2rem; font-size: 1rem; }
.tl-steps p { margin: 0; font-size: .9rem; color: var(--color-muted); }

/* Policy table. */
.tl-policy-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tl-policy-table th,
.tl-policy-table td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.tl-policy-table thead th {
  background: var(--color-panel);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  font-weight: 600;
}
.tl-policy-table tbody tr:last-child td { border-bottom: 0; }
.tl-policy-table td:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink-strong);
  white-space: nowrap;
}

/* Callout box. */
.tl-callout {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-panel);
  font-size: .92rem;
  color: var(--color-muted);
}
.tl-callout strong { color: var(--color-ink-strong); }
.tl-callout > svg { flex: none; width: 20px; height: 20px; color: var(--color-accent); margin-top: .1rem; }
.tl-callout > div > :last-child { margin-bottom: 0; }
.tl-callout--warn { border-inline-start-color: var(--nv-danger); }
.tl-callout--warn > svg { color: var(--nv-danger); }

/* Table of contents for long policy pages. */
.tl-toc {
  max-width: 78ch;
  margin-inline: auto;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  margin-bottom: 2rem;
}
.tl-toc h2 {
  font-family: var(--font-sans);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-faint);
  margin: 0 0 .7rem;
}
.tl-toc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; }
.tl-toc a { font-size: .92rem; color: var(--color-muted); }
.tl-toc a:hover { color: var(--color-accent); }

/* Policy pages: constrain the reading column, keep tables full width. */
.tl-policy-doc { max-width: 78ch; margin-inline: auto; }
.tl-policy-doc .tl-tablewrap { max-width: none; }

/* Anchored policy section. */
.tl-policy-section { scroll-margin-top: 6rem; padding-block: 1.5rem; }
.tl-policy-section + .tl-policy-section { border-top: 1px solid var(--color-line); }
.tl-policy-section h2 { font-size: 1.35rem; }

/* CTA band. */
.tl-ctaband {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(700px 300px at 12% 0%,
      color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 65%),
    var(--nv-fill);
  color: var(--nv-on-fill);
}
@media (min-width: 800px) { .tl-ctaband { grid-template-columns: 1.5fr .5fr; } }
.tl-ctaband h2 { color: var(--nv-on-fill); margin-bottom: .4rem; }
.tl-ctaband p { margin: 0; opacity: .82; font-size: .95rem; }
.tl-ctaband .tl-btn--primary { background: var(--color-accent-glow); color: #0b1220; }
.tl-ctaband .tl-btn--primary:hover { background: #fff; color: #0b1220; }

/* Last-updated stamp. */
.tl-updated {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--color-faint);
}

/* ==========================================================================
   Checkout (WooCommerce Checkout block)
   ==========================================================================
   The checkout page is a Gutenberg block, so the PHP templates under
   woocommerce/ never run and none of the theme's form styling reached it.
   These rules dress the block's own markup. Class names below were read off
   the rendered page — the block's DOM is not guessable. */

/* Sit the order summary in a card matching the rest of the site. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
}

/*
 * The summary printed each product's full description, turning the sidebar
 * into a wall of text taller than the form beside it. Note the item's own
 * __description wrapper holds the product NAME too, so only the metadata
 * description is hidden here.
 */
.wc-block-components-product-metadata__description { display: none; }

/* The line price was printed twice: once under the name, once on the right.
   The visible duplicate is the inner __individual-price span, so hide that
   and leave the screen-reader total in place. */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-price { display: none; }

.wc-block-components-product-name {
  font-weight: 600;
  color: var(--color-ink-strong);
}

/* Give the grand total the weight of a final figure. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Form fields — match the theme's inputs rather than the block defaults. */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea {
  border-radius: var(--radius-sm);
  border-color: var(--color-line);
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--color-accent);
  outline: 2px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  outline-offset: 1px;
}

/* Place Order rendered near-black; the site's primary action is blue. */
.wc-block-components-checkout-place-order-button {
  background: var(--color-accent);
  border-radius: 999px;
  font-weight: 700;
  padding-inline: 2rem;
}
.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
  background: var(--color-accent-deep);
}

/* Step headings follow the display face used elsewhere. */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--font-display);
  color: var(--color-ink-strong);
}

/* No mobile re-ordering here: the block already collapses the summary to the
   top of the form on phones. Giving the sidebar `order: 1` as well put a
   second "Order summary" panel on the page. */

/* ==========================================================================
   Scroll reveal
   ==========================================================================
   Sections settle into place as they come into view. Deliberately small — a
   short rise and a fade, once per element, never replayed. The point is that
   the page feels alive as you move through it, not that anything performs.

   Elements are only hidden once JS has confirmed it will observe them
   (html.has-reveal), so with JS off or broken nothing is ever stuck invisible. */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* Children stagger slightly so a grid resolves left-to-right rather than
   snapping in as one block. */
.has-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
}
.has-reveal [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s cubic-bezier(.22, .61, .36, 1),
    transform .5s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-visible,
  .has-reveal [data-reveal-stagger] > *,
  .has-reveal [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Mega menu
   ==========================================================================
   A top-level nav item with children opens a full-width panel: titled
   columns of links, then a real product as the closing card. The panel is
   anchored to the header rather than the item, so it spans the page the way
   the columns need. */

.tl-nav__list > .tl-has-mega { position: static; }

.tl-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 90;
}

.tl-has-mega:hover > .tl-mega,
.tl-has-mega:focus-within > .tl-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Panels without a promo card (Help, and anything else that is not the shop)
   let the columns use the full width instead of leaving a 300px hole. */
.tl-mega__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 2.25rem 20px 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.tl-mega__inner:has(.tl-mega__promo) {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.tl-mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-mega__col > ul { margin: 0; padding: 0; list-style: none; }

/* The column heading is a label, not a link — mono to match the eyebrows. */
.tl-mega__title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-line);
}

.tl-mega__col a {
  display: block;
  padding: .4rem 0;
  color: var(--color-ink);
  font-size: .95rem;
}
.tl-mega__col a:hover { color: var(--color-accent); }

/* Promo card — a product, so the menu shows stock rather than decoration. */
.tl-mega__promo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-panel);
  transition: border-color .18s ease, transform .18s ease;
}
.tl-mega__promo:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  transform: translateY(-2px);
}
.tl-mega__promo-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}
.tl-mega__promo-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .75rem;
}
.tl-mega__promo-body {
  display: block;
  padding: .9rem 1rem 1.1rem;
}
.tl-mega__promo-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: .2rem .5rem;
  border-radius: 999px;
  margin-bottom: .45rem;
}
.tl-mega__promo-body strong {
  display: block;
  font-family: var(--font-display);
  color: var(--color-ink-strong);
  margin-bottom: .3rem;
}
.tl-mega__promo-cta {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Narrower desktops: the promo card is the first thing to go. */
@media (max-width: 1100px) {
  .tl-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .tl-mega__promo { display: none; }
}

/* The mega panel is desktop-only; phones use the existing drawer accordion. */
@media (max-width: 1023px) {
  .tl-mega { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-mega { transition: none; }
  .tl-mega__promo { transition: none; }
}