/* ==========================================================================
   TMB Core — design tokens, base, layout, components, utilities
   File: assets/css/tmb-core.css            Load order: 1 of 4
   --------------------------------------------------------------------------
   Stylesheet stack (enqueued in functions.php → tmb_co_enqueue_styles):
     1. assets/css/tmb-core.css        ← this file: the single source of truth
                                         for tokens and shared components.
     2. tmb-universal-styling.css      ← legacy feature/plugin styles (shop,
                                         product, account, CRM…). Being migrated
                                         onto core tokens section by section.
     3. assets/css/tmb-app-shell.css   ← header, menu + search sheets, mobile
                                         thumb tray, site footer, installed-app.
     4. assets/css/tmb-front-page.css  ← front page only.

   TOKEN TIERS
     1. Canonical tokens  --tmb-color-*, --tmb-space-*, --tmb-radius-*, …
     2. Component tokens  --tmb-btn-*, --tmb-input-*, --tmb-card-*,
                          --tmb-title-*, --tmb-table-*  (shape of shared parts)
     3. Legacy aliases    old names kept for older templates/plugins
   Plugin portal CSS may only use tiers 1–2 (with fallbacks), never raw values.

   NAMING CONVENTIONS
   --------------------------------------------------------------------------
   Prefix      Everything is prefixed `tmb-` (tokens: `--tmb-`).
   Tokens      --tmb-{category}-{name}[-{variant}]
                 color   --tmb-color-primary, --tmb-color-text-muted
                 space   --tmb-space-1 … --tmb-space-9   (4px → 64px)
                 radius  --tmb-radius-xs … --tmb-radius-xl, --tmb-radius-pill
                 font    --tmb-font-sans, --tmb-fs-sm … --tmb-fs-4xl
                 shadow  --tmb-shadow-sm | -md | -lg
                 motion  --tmb-motion-fast | -base, --tmb-ease-standard
                 z       --tmb-z-chrome | -dim | -sheet
                 app     --tmb-app-header-h, --tmb-app-tray-h, --tmb-safe-*
   Components  BEM: .tmb-block, .tmb-block__element, .tmb-block--modifier
   State       .is-open, .is-active, .is-scrolled, .is-standalone (never styled
               on their own — always combined with a block class)
   JS hooks    data-tmb-* attributes. Never select on them for styling.
   Layout      .tmb-container, .tmb-section, .tmb-stack, .tmb-cluster,
               .tmb-grid, .tmb-rail (horizontal swipe row on phones)

   RULES OF THUMB
   - New code uses canonical tokens (section 1). Legacy aliases (section 2)
     exist only so older templates and TMB plugins keep working.
   - Override tokens at :root or body level (e.g. TMB Settings brand colors,
     body.tmb-theme-mode-dark). Aliases are resolved at body.
   - Mobile first. Breakpoints: 600px (large phone), 900px (app shell ↔
     desktop), 1200px (wide). CSS cannot read custom properties in media
     queries, so these numbers are used literally.
   - Touch targets are at least --tmb-tap-min (44px).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Canonical tokens
   Brand colors are overwritten at runtime from TMB Settings
   (functions.php → tmb_co_enqueue_brand_tokens).
-------------------------------------------------------------------------- */
:root{
  /* Brand */
  --tmb-color-primary: #0f2740;
  --tmb-color-secondary: #cfd7e2;
  --tmb-color-accent: #f4b400;
  --tmb-color-primary-strong: color-mix(in srgb, var(--tmb-color-primary) 84%, black);
  --tmb-color-primary-soft: color-mix(in srgb, var(--tmb-color-primary) 10%, white);
  --tmb-color-on-primary: #ffffff;
  --tmb-color-on-accent: #111827;

  /* Neutrals */
  --tmb-color-bg: #f8fafc;
  --tmb-color-surface: #ffffff;
  --tmb-color-surface-muted: #f1f5f9;
  --tmb-color-surface-raised: rgba(255,255,255,.82);
  --tmb-color-text: #0f172a;
  --tmb-color-text-muted: #475569;
  --tmb-color-text-subtle: #64748b;
  --tmb-color-text-inverse: #ffffff;
  --tmb-color-border: #dbe5ef;
  --tmb-color-border-strong: #cbd5e1;
  --tmb-color-border-soft: rgba(15,23,42,.08);

  /* Feedback */
  --tmb-color-success: #166534;
  --tmb-color-warning: #92400e;
  --tmb-color-danger: #991b1b;
  --tmb-color-focus: color-mix(in srgb, var(--tmb-color-primary) 22%, transparent);

  /* UI treatment (glass by default; see surface hooks below) */
  --tmb-ui-surface: rgba(255,255,255,.76);
  --tmb-ui-border: rgba(15,23,42,.10);
  --tmb-ui-border-strong: rgba(15,23,42,.16);
  --tmb-ui-blur: 14px;

  /* Typography */
  --tmb-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tmb-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --tmb-font-heading: var(--tmb-font-sans);
  --tmb-fs-2xs: .6875rem;  /* 11px — tray labels */
  --tmb-fs-xs: .75rem;     /* 12px */
  --tmb-fs-sm: .875rem;    /* 14px */
  --tmb-fs-md: 1rem;       /* 16px */
  --tmb-fs-lg: 1.125rem;   /* 18px */
  --tmb-fs-xl: 1.375rem;   /* 22px */
  --tmb-fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --tmb-fs-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  --tmb-fs-4xl: clamp(2.125rem, 1.5rem + 3.6vw, 3.75rem);
  --tmb-fw-regular: 400;
  --tmb-fw-medium: 600;
  --tmb-fw-bold: 800;
  --tmb-leading-tight: 1.08;
  --tmb-leading-snug: 1.3;
  --tmb-leading-body: 1.6;
  --tmb-tracking-tight: -.03em;
  --tmb-tracking-caps: .12em;

  /* Spacing scale */
  --tmb-space-1: 4px;
  --tmb-space-2: 8px;
  --tmb-space-3: 12px;
  --tmb-space-4: 16px;
  --tmb-space-5: 20px;
  --tmb-space-6: 24px;
  --tmb-space-7: 32px;
  --tmb-space-8: 48px;
  --tmb-space-9: 64px;
  --tmb-gutter: clamp(16px, 4vw, 32px);
  --tmb-section-space: clamp(40px, 6vw, 88px);

  /* Radius scale (names match the legacy scale so values never shift) */
  --tmb-radius-xs: 10px;
  --tmb-radius-sm: 14px;
  --tmb-radius-md: 18px;
  --tmb-radius-lg: 24px;
  --tmb-radius-xl: 32px;
  --tmb-radius-pill: 999px;

  /* Elevation */
  --tmb-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.05);
  --tmb-shadow-md: 0 8px 18px rgba(15,23,42,.07);
  --tmb-shadow-lg: 0 14px 34px rgba(15,23,42,.10);
  --tmb-shadow-sheet: 0 -12px 40px rgba(15,23,42,.18);

  /* Motion */
  --tmb-motion-fast: .16s;
  --tmb-motion-base: .24s;
  --tmb-ease-standard: cubic-bezier(.2,.8,.2,1);
  --tmb-ease-emphasized: cubic-bezier(.22,1,.36,1);

  /* Layout */
  --tmb-container: 1200px;
  --tmb-container-narrow: 980px;
  --tmb-container-wide: 1440px;
  --tmb-tap-min: 44px;

  /* App shell (header / thumb tray). Header heights are overwritten from
     TMB Settings → header_height_desktop / header_height_mobile. */
  --tmb-app-header-h: 60px;
  --tmb-app-header-h-desktop: 76px;
  --tmb-app-logo-h: 34px;
  --tmb-app-logo-h-desktop: 44px;
  --tmb-app-tray-h: 64px;
  --tmb-safe-top: env(safe-area-inset-top, 0px);
  --tmb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tmb-safe-left: env(safe-area-inset-left, 0px);
  --tmb-safe-right: env(safe-area-inset-right, 0px);

  /* Stacking. Chrome sits above the page loader on phones so the app frame
     stays put while pages change; sheets sit above chrome. */
  --tmb-z-chrome: 2147483000;
  --tmb-z-dim: 2147483001;
  --tmb-z-sheet: 2147483002;

  /* ---- Component tokens ------------------------------------------------
     The shape of shared components. Theme components AND plugin portals
     (CRM, Order Form, …) read these, so changing one here restyles every
     button / field / card / title across the site and all portals. */
  --tmb-btn-height: 46px;
  --tmb-btn-padding: 10px 18px;
  --tmb-btn-radius: var(--tmb-radius-pill);
  --tmb-btn-weight: 700;
  --tmb-btn-bg: var(--tmb-color-primary);
  --tmb-btn-fg: var(--tmb-color-on-primary);

  --tmb-input-height: 48px;
  --tmb-input-radius: var(--tmb-radius-sm);
  --tmb-input-border: var(--tmb-color-border);
  --tmb-input-bg: var(--tmb-color-surface);

  --tmb-card-radius: var(--tmb-radius-md);
  --tmb-card-border: var(--tmb-color-border);
  --tmb-card-bg: var(--tmb-color-surface);
  --tmb-card-shadow: var(--tmb-shadow-sm);
  --tmb-card-padding: var(--tmb-space-5);

  --tmb-title-page-size: var(--tmb-fs-2xl);
  --tmb-title-page-weight: var(--tmb-fw-bold);
  --tmb-title-page-tracking: var(--tmb-tracking-tight);
  --tmb-title-section-size: var(--tmb-fs-lg);

  --tmb-table-head-bg: var(--tmb-color-surface-muted);
  --tmb-table-head-fg: var(--tmb-color-text-subtle);
  --tmb-table-line: var(--tmb-color-border);
}
@media (min-width:900px){
  :root{ --tmb-title-page-size: var(--tmb-fs-3xl); }
}

/* Theme mode hooks (body class set by TMB Settings) */
body.tmb-theme-mode-dark{
  --tmb-color-bg: #0b1220;
  --tmb-color-surface: #111827;
  --tmb-color-surface-muted: #172033;
  --tmb-color-surface-raised: rgba(17,24,39,.82);
  --tmb-color-text: #f8fafc;
  --tmb-color-text-muted: #cbd5e1;
  --tmb-color-text-subtle: #94a3b8;
  --tmb-color-border: rgba(255,255,255,.10);
  --tmb-color-border-strong: rgba(255,255,255,.16);
}

/* Surface style hooks */
body.tmb-surface-style-glass{
  --tmb-ui-surface: rgba(255,255,255,.76);
  --tmb-ui-border: rgba(15,23,42,.10);
  --tmb-ui-border-strong: rgba(15,23,42,.16);
  --tmb-ui-blur: 14px;
}
body.tmb-theme-mode-dark.tmb-surface-style-glass{
  --tmb-ui-surface: rgba(17,24,39,.72);
  --tmb-ui-border: rgba(255,255,255,.10);
  --tmb-ui-border-strong: rgba(255,255,255,.18);
  --tmb-shadow-lg: 0 18px 42px rgba(0,0,0,.26);
  --tmb-shadow-md: 0 10px 22px rgba(0,0,0,.18);
}
body.tmb-surface-style-minimal{
  --tmb-ui-surface: var(--tmb-color-surface);
  --tmb-ui-border: var(--tmb-color-border);
  --tmb-ui-border-strong: var(--tmb-color-border-strong);
  --tmb-shadow-md: none;
  --tmb-shadow-lg: none;
  --tmb-ui-blur: 0px;
}


/* --------------------------------------------------------------------------
   2) Legacy aliases — DO NOT use in new code.
   Older templates, tmb-universal-styling.css and TMB plugins read these
   names. Declared on :root and body so body-level overrides (theme mode,
   brand colors) flow through. Remove an alias once nothing references it.
-------------------------------------------------------------------------- */
:root,
body{
  /* brand */
  --tmb-primary: var(--tmb-color-primary);
  --tmb-secondary: var(--tmb-color-secondary);
  --tmb-accent: var(--tmb-color-accent);
  --tmb-color-10: var(--tmb-color-primary);
  --tmb-color-30: var(--tmb-color-secondary);
  --tmb-color-60: var(--tmb-color-primary-soft);
  --tmb-brand-surface: var(--tmb-color-primary);
  --tmb-brand-deep: var(--tmb-color-primary-strong);
  --tmb-brand-mid: color-mix(in srgb, var(--tmb-color-primary) 72%, white);
  --tmb-brand-soft: var(--tmb-color-primary-soft);
  --tmb-brand-border: color-mix(in srgb, var(--tmb-color-primary) 14%, transparent);
  --tmb-brand-shadow: color-mix(in srgb, var(--tmb-color-primary) 12%, transparent);
  --tmb-head-primary: var(--tmb-color-primary);
  --tmb-head-secondary: var(--tmb-color-secondary);
  --tmb-head-accent: var(--tmb-color-accent);

  /* surfaces + text */
  --tmb-page-bg: var(--tmb-color-bg);
  --tmb-surface-bg: var(--tmb-color-surface);
  --tmb-surface-alt: var(--tmb-color-surface-muted);
  --tmb-surface-soft: var(--tmb-color-surface);
  --tmb-surface-elevated: var(--tmb-color-surface-raised);
  --tmb-surface-card: var(--tmb-ui-surface);
  --tmb-text: var(--tmb-color-text);
  --tmb-text-muted: var(--tmb-color-text-muted);
  --tmb-text-soft: var(--tmb-color-text-subtle);
  --tmb-text-inverse: var(--tmb-color-text-inverse);
  --tmb-text-color: var(--tmb-color-text);
  --tmb-ink: var(--tmb-color-text);
  --tmb-muted: var(--tmb-color-text-muted);
  --tmb-white: #ffffff;
  --tmb-border: var(--tmb-color-border);
  --tmb-border-strong: var(--tmb-color-border-strong);
  --tmb-border-soft: var(--tmb-color-border-soft);
  --tmb-border-color: var(--tmb-ui-border);
  --tmb-focus: var(--tmb-color-focus);

  /* treatment */
  --tmb-ui-shadow: var(--tmb-shadow-lg);
  --tmb-ui-shadow-soft: var(--tmb-shadow-md);
  --tmb-ui-shadow-none: none;
  --tmb-shadow: var(--tmb-shadow-lg);
  --tmb-shadow-soft: var(--tmb-shadow-md);
  --tmb-shadow-card: var(--tmb-shadow-lg);
  --tmb-glass-bg: var(--tmb-ui-surface);
  --tmb-glass-bg-2: var(--tmb-color-surface-raised);
  --tmb-glass-blur: var(--tmb-ui-blur);
  --tmb-radius: var(--tmb-radius-md);
  --tmb-radius-base: var(--tmb-radius-md);

  /* type + layout + motion */
  --tmb-font-primary: var(--tmb-font-sans);
  --tmb-content-max: var(--tmb-container);
  --tmb-content-narrow: var(--tmb-container-narrow);
  --tmb-content-wide: 1280px;
  --tmb-content-gutter: 18px;
  --tmb-duration-fast: var(--tmb-motion-fast);
  --tmb-duration-base: var(--tmb-motion-base);
  --tmb-ease: ease;
}


/* --------------------------------------------------------------------------
   3) Reset + base
-------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; }
html,body{ min-height:100%; }
body{
  margin:0;
  background:var(--tmb-color-bg);
  color:var(--tmb-color-text);
  font-family:var(--tmb-font-sans);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  /* Safety net: a stray wide element must never make the whole app scroll
     sideways (or make phones zoom out). clip, unlike hidden, keeps
     position:sticky working. */
  overflow-x:clip;
}
img,svg,video,canvas{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
hr{ border:0; border-top:1px solid var(--tmb-ui-border); margin:var(--tmb-space-6) 0; }

:focus-visible{
  outline:3px solid var(--tmb-color-focus);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}


/* --------------------------------------------------------------------------
   4) Layout primitives
-------------------------------------------------------------------------- */
.tmb-container{
  width:min(100% - (var(--tmb-content-gutter) * 2), var(--tmb-container));
  margin-inline:auto;
}
.tmb-container--narrow{ max-width:var(--tmb-container-narrow); }
.tmb-container--wide{ max-width:var(--tmb-content-wide); }

.tmb-section{ padding:var(--tmb-section-space) 0; }
.tmb-section--tight{ padding:clamp(24px, 4vw, 40px) 0; }
.tmb-section--flush-top{ padding-top:0; }
.tmb-section--flush-bottom{ padding-bottom:0; }
.tmb-section--muted{ background:var(--tmb-color-primary-soft); }

.tmb-stack{ display:grid; gap:var(--tmb-space-4); }
.tmb-stack--xs{ gap:var(--tmb-space-2); }
.tmb-stack--sm{ gap:var(--tmb-space-3); }
.tmb-stack--lg{ gap:var(--tmb-space-6); }
.tmb-stack--xl{ gap:var(--tmb-space-7); }

.tmb-cluster{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--tmb-space-3);
}
.tmb-cluster--center{ justify-content:center; }
.tmb-cluster--between{ justify-content:space-between; }

.tmb-grid{ display:grid; gap:var(--tmb-space-6); }
.tmb-grid--sm{ gap:var(--tmb-space-4); }
.tmb-grid--lg{ gap:var(--tmb-space-7); }
.tmb-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tmb-grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tmb-grid-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1024px){
  .tmb-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  .tmb-grid-2,
  .tmb-grid-3,
  .tmb-grid-4{ grid-template-columns:1fr; }
}

/* Rail: a horizontal, swipeable row on phones that becomes a grid on wider
   screens. Set --tmb-rail-item (phone card width) and --tmb-rail-cols
   (desktop columns) on the element. */
.tmb-rail{
  --tmb-rail-item: 72%;
  --tmb-rail-cols: 4;
  --tmb-rail-gap: var(--tmb-space-3);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--tmb-rail-item);
  gap:var(--tmb-rail-gap);
  margin:0 calc(var(--tmb-content-gutter) * -1);
  padding:2px var(--tmb-content-gutter) var(--tmb-space-2);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--tmb-content-gutter);
  scrollbar-width:none;
  list-style:none;
}
.tmb-rail::-webkit-scrollbar{ display:none; }
.tmb-rail > *{ scroll-snap-align:start; min-width:0; }
@media (min-width:600px){
  .tmb-rail{ --tmb-rail-item: 40%; }
}
@media (min-width:900px){
  .tmb-rail{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(var(--tmb-rail-cols), minmax(0, 1fr));
    gap:var(--tmb-space-6);
    margin:0;
    padding:0;
    overflow:visible;
  }
}

/* Sidebar layout */
.tmb-layout-sidebar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(240px, 20vw, 300px);
  gap:28px;
  align-items:start;
}
.tmb-layout-sidebar--left{ grid-template-columns:clamp(240px, 20vw, 300px) minmax(0, 1fr); }
.tmb-layout-sidebar--left .tmb-sidebar{ order:-1; }
.tmb-content-area{ min-width:0; }
@media (max-width:1024px){
  .tmb-layout-sidebar,
  .tmb-layout-sidebar--left{ grid-template-columns:1fr; }
  .tmb-layout-sidebar--left .tmb-sidebar{ order:initial; }
}

.tmb-sidebar{ display:grid; gap:var(--tmb-space-4); align-content:start; }
.tmb-sidebar .widget,
.tmb-sidebar section,
.tmb-sidebar > div{
  background:var(--tmb-ui-surface);
  border:1px solid var(--tmb-ui-border);
  border-radius:var(--tmb-radius-md);
  box-shadow:var(--tmb-shadow-md);
  backdrop-filter:blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter:blur(var(--tmb-ui-blur));
  padding:var(--tmb-space-4);
  color:var(--tmb-color-text);
}
.tmb-sidebar .widget-title,
.tmb-sidebar h2,
.tmb-sidebar h3{
  margin:0 0 var(--tmb-space-3);
  font-family:var(--tmb-font-heading);
  font-size:1rem;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--tmb-color-text);
}
.tmb-sidebar ul,
.tmb-sidebar ol{ list-style:none; margin:0; padding:0; }
.tmb-sidebar li{ margin:0; padding:0; }
.tmb-sidebar li + li{ border-top:1px solid var(--tmb-ui-border); }
.tmb-sidebar a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  color:var(--tmb-color-text);
  font-size:.94rem;
  line-height:1.35;
  font-weight:700;
  text-decoration:none !important;
}
.tmb-sidebar a:hover{ color:var(--tmb-color-primary); text-decoration:none !important; }
.tmb-sidebar p{ margin:0; color:var(--tmb-color-text-muted); line-height:1.65; }
.tmb-sidebar select,
.tmb-sidebar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.tmb-sidebar textarea{ width:100%; }
.tmb-post-nav,
.tmb-comments{ margin-top:var(--tmb-space-6); }
@media (max-width:768px){
  .tmb-sidebar{ display:none; }
}

.tmb-shell{
  background:var(--tmb-ui-surface);
  border:1px solid var(--tmb-ui-border);
  border-radius:var(--tmb-radius-lg);
  box-shadow:var(--tmb-shadow-lg);
  backdrop-filter:blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter:blur(var(--tmb-ui-blur));
}


/* --------------------------------------------------------------------------
   5) Typography
-------------------------------------------------------------------------- */
.tmb-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--tmb-space-2);
  margin:0;
  font-size:var(--tmb-fs-xs);
  line-height:1.2;
  font-weight:var(--tmb-fw-bold);
  letter-spacing:var(--tmb-tracking-caps);
  text-transform:uppercase;
  color:var(--tmb-color-primary);
}

.tmb-heading-xl,
.tmb-heading-lg,
.tmb-heading-md,
.tmb-heading-sm,
.tmb-heading,
.tmb-title{
  margin:0;
  color:var(--tmb-color-text);
  font-family:var(--tmb-font-heading);
  letter-spacing:var(--tmb-tracking-tight);
}
.tmb-heading-xl{ font-size:clamp(2.15rem, 4.8vw, 3.8rem); line-height:1.02; }
.tmb-heading-lg{ font-size:clamp(1.9rem, 4vw, 3.2rem); line-height:var(--tmb-leading-tight); }
.tmb-heading-md{ font-size:clamp(1.45rem, 2.8vw, 2.1rem); line-height:1.12; }
.tmb-heading-sm{ font-size:clamp(1.05rem, 1.8vw, 1.2rem); line-height:1.25; }

.tmb-text,
.tmb-copy,
.tmb-prose{
  color:var(--tmb-color-text-muted);
  line-height:1.75;
  font-size:var(--tmb-fs-md);
}
.tmb-text-sm{ font-size:.94rem; line-height:1.7; }
.tmb-text-xs{ font-size:.82rem; line-height:var(--tmb-leading-body); }
.tmb-text-muted{ color:var(--tmb-color-text-muted); }
.tmb-text-soft{ color:var(--tmb-color-text-subtle); }
.tmb-text-strong{ color:var(--tmb-color-text); }
.tmb-text-center{ text-align:center; }
.tmb-prose p,
.tmb-copy p{ margin:0; }
.tmb-prose > * + *{ margin-top:1em; }


/* --------------------------------------------------------------------------
   6) Surfaces
-------------------------------------------------------------------------- */
.tmb-card,
.tmb-surface-card,
.tmb-theme-card{
  background:var(--tmb-ui-surface);
  border:1px solid var(--tmb-ui-border);
  border-radius:var(--tmb-radius-md);
  box-shadow:var(--tmb-shadow-lg);
  backdrop-filter:blur(var(--tmb-ui-blur));
  -webkit-backdrop-filter:blur(var(--tmb-ui-blur));
  color:var(--tmb-color-text);
  padding:var(--tmb-space-5);
}
.tmb-card--tight{ padding:14px; }
.tmb-card--soft{ box-shadow:var(--tmb-shadow-md); }
.tmb-card--pad-lg{ padding:28px; }

.tmb-quote{
  padding:var(--tmb-space-5) var(--tmb-space-6);
  border:1px solid var(--tmb-ui-border);
  border-left:4px solid var(--tmb-color-primary);
  border-radius:0 var(--tmb-radius-md) var(--tmb-radius-md) 0;
  background:var(--tmb-ui-surface);
  box-shadow:var(--tmb-shadow-lg);
  color:var(--tmb-color-text);
  line-height:1.75;
  font-weight:600;
}

.tmb-media-shell{
  overflow:hidden;
  border-radius:var(--tmb-radius-lg);
  border:1px solid var(--tmb-ui-border);
  background:var(--tmb-ui-surface);
  box-shadow:var(--tmb-shadow-lg);
}
.tmb-media-shell img{ width:100%; height:auto; object-fit:cover; }

.tmb-rule,
.tmb-hr{
  height:1px;
  background:var(--tmb-ui-border);
  border:0;
  margin:var(--tmb-space-4) 0;
}

.tmb-pill,
.tmb-badge,
.tmb-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--tmb-space-2);
  min-height:34px;
  padding:7px 12px;
  border-radius:var(--tmb-radius-pill);
  border:1px solid var(--tmb-ui-border);
  background:var(--tmb-ui-surface);
  box-shadow:var(--tmb-shadow-md);
  color:var(--tmb-color-text);
  font-size:.85rem;
  font-weight:700;
}

/* Count badge (cart quantity etc.) */
.tmb-count{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:var(--tmb-radius-pill);
  background:var(--tmb-color-accent);
  color:var(--tmb-color-on-accent);
  font-size:11px;
  font-weight:var(--tmb-fw-bold);
  line-height:1;
}
.tmb-count[hidden]{ display:none; }


/* --------------------------------------------------------------------------
   7) Buttons + links
-------------------------------------------------------------------------- */
.tmb-button,
.tmb-btn,
.tmb-theme-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--tmb-btn-height);
  padding:var(--tmb-btn-padding);
  border-radius:var(--tmb-btn-radius);
  border:1px solid var(--tmb-btn-bg);
  background:var(--tmb-btn-bg);
  color:var(--tmb-btn-fg);
  cursor:pointer;
  font-weight:var(--tmb-btn-weight);
  text-decoration:none !important;
  box-shadow:var(--tmb-shadow-md);
  transition:
    transform var(--tmb-motion-fast) ease,
    opacity var(--tmb-motion-fast) ease,
    background var(--tmb-motion-fast) ease,
    border-color var(--tmb-motion-fast) ease,
    color var(--tmb-motion-fast) ease;
}
.tmb-button > svg,
.tmb-btn > svg{ width:20px; height:20px; flex:0 0 auto; }
.tmb-button:hover,
.tmb-btn:hover,
.tmb-theme-button:hover{
  text-decoration:none !important;
  color:var(--tmb-color-on-primary);
  opacity:.95;
  transform:translateY(-1px);
}
.tmb-button:active,
.tmb-btn:active{ transform:scale(.98); }

.tmb-button--secondary,
.tmb-btn--secondary,
.tmb-theme-button--secondary{
  background:transparent;
  color:var(--tmb-color-text);
  border-color:var(--tmb-ui-border-strong);
  box-shadow:none;
}
.tmb-button--secondary:hover,
.tmb-btn--secondary:hover,
.tmb-theme-button--secondary:hover{
  color:var(--tmb-color-text);
  background:color-mix(in srgb, var(--tmb-color-primary) 6%, transparent);
}
.tmb-button--ghost,
.tmb-btn--ghost{
  background:transparent;
  color:var(--tmb-color-text);
  border-color:transparent;
  box-shadow:none;
}
.tmb-btn--accent{
  background:var(--tmb-color-accent);
  border-color:var(--tmb-color-accent);
  color:var(--tmb-color-on-accent);
}
.tmb-btn--accent:hover{ color:var(--tmb-color-on-accent); }
.tmb-btn--inverse{
  background:var(--tmb-color-surface);
  border-color:var(--tmb-color-surface);
  color:var(--tmb-color-primary);
}
.tmb-btn--inverse:hover{ color:var(--tmb-color-primary); }
.tmb-btn--block{ width:100%; }
.tmb-btn--sm{ min-height:var(--tmb-tap-min); padding:8px 14px; font-size:var(--tmb-fs-sm); }

/* Icon button: square, at least 44×44, optional visible label on desktop. */
.tmb-icon-btn{
  appearance:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--tmb-space-2);
  min-width:var(--tmb-tap-min);
  min-height:var(--tmb-tap-min);
  padding:0 var(--tmb-space-3);
  border:1px solid transparent;
  border-radius:var(--tmb-radius-pill);
  background:transparent;
  color:inherit;
  font-size:var(--tmb-fs-sm);
  font-weight:var(--tmb-fw-bold);
  line-height:1;
  text-decoration:none !important;
  cursor:pointer;
  transition:background var(--tmb-motion-fast) ease, border-color var(--tmb-motion-fast) ease, transform var(--tmb-motion-fast) ease;
}
.tmb-icon-btn svg{ width:22px; height:22px; flex:0 0 auto; }
.tmb-icon-btn:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }
.tmb-icon-btn:active{ transform:scale(.94); }
.tmb-icon-btn .tmb-count{ position:absolute; top:4px; right:2px; }

.tmb-link{ color:var(--tmb-color-primary); font-weight:800; }
.tmb-link:hover{ color:var(--tmb-color-accent); text-decoration:none; }

body.tmb-surface-style-minimal .tmb-button,
body.tmb-surface-style-minimal .tmb-btn,
body.tmb-surface-style-minimal .tmb-theme-button{ box-shadow:none; }


/* --------------------------------------------------------------------------
   8) Forms + notices
-------------------------------------------------------------------------- */
.tmb-field,
.tmb-theme-input,
.tmb-form input[type="text"],
.tmb-form input[type="email"],
.tmb-form input[type="tel"],
.tmb-form input[type="password"],
.tmb-form input[type="search"],
.tmb-form input[type="number"],
.tmb-form textarea,
.tmb-form select,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border-radius:var(--tmb-input-radius);
  border:1px solid var(--tmb-input-border);
  background:var(--tmb-input-bg);
  color:var(--tmb-color-text);
  font-size:16px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
  transition:
    border-color var(--tmb-motion-fast) ease,
    box-shadow var(--tmb-motion-fast) ease,
    background var(--tmb-motion-fast) ease;
}
.tmb-field:focus,
.tmb-theme-input:focus,
.tmb-form input:focus,
.tmb-form textarea:focus,
.tmb-form select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--tmb-color-primary) 30%, white);
  box-shadow:0 0 0 4px var(--tmb-color-focus);
}

.tmb-form,
.tmb-form__inner{ display:grid; gap:var(--tmb-space-4); }
.tmb-form__field,
.tmb-field-wrap{ display:grid; gap:var(--tmb-space-2); }
.tmb-form__field label,
.tmb-label{ font-weight:700; color:var(--tmb-color-text); }
.tmb-form__actions{ display:flex; flex-wrap:wrap; gap:var(--tmb-space-3); }
.tmb-form__honeypot{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* Search field: rounded input with a leading icon and optional submit. */
.tmb-search-field{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.tmb-search-field__icon{
  position:absolute;
  left:16px;
  width:20px;
  height:20px;
  color:var(--tmb-color-text-subtle);
  pointer-events:none;
}
/* :not() chain lifts specificity above the global input rule in section 8. */
.tmb-search-field input[type="search"]:not([type="checkbox"]):not([type="radio"]){
  min-height:50px;
  padding:12px 16px 12px 46px;
  border-radius:var(--tmb-radius-pill);
  border:1px solid var(--tmb-ui-border-strong);
  background:var(--tmb-color-surface);
  box-shadow:var(--tmb-shadow-sm);
  -webkit-appearance:none;
  appearance:none;
}
.tmb-search-field input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

.tmb-notice,
.tmb-form__notice{
  padding:14px var(--tmb-space-4);
  border-radius:var(--tmb-radius-md);
  font-weight:600;
  border:1px solid var(--tmb-ui-border);
  background:var(--tmb-ui-surface);
}
.tmb-notice--success,
.tmb-form__notice--success{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.24);
  color:var(--tmb-color-success);
}
.tmb-notice--error,
.tmb-form__notice--error{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.20);
  color:var(--tmb-color-danger);
}


/* --------------------------------------------------------------------------
   9) App components
-------------------------------------------------------------------------- */

/* Section heading row: eyebrow + title on the left, "View all" link right. */
.tmb-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--tmb-space-4);
  margin-bottom:var(--tmb-space-5);
}
.tmb-section-head__title{
  margin:var(--tmb-space-1) 0 0;
  font-family:var(--tmb-font-heading);
  font-size:var(--tmb-fs-2xl);
  line-height:var(--tmb-leading-tight);
  letter-spacing:var(--tmb-tracking-tight);
  color:var(--tmb-color-text);
}
.tmb-section-head__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:var(--tmb-tap-min);
  flex:0 0 auto;
  color:var(--tmb-color-primary);
  font-size:var(--tmb-fs-sm);
  font-weight:var(--tmb-fw-bold);
  white-space:nowrap;
}
.tmb-section-head__link:hover{ text-decoration:none; color:var(--tmb-color-primary-strong); }

/* Product card */
.tmb-product-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  border:1px solid var(--tmb-color-border);
  border-radius:var(--tmb-radius-md);
  background:var(--tmb-color-surface);
  overflow:hidden;
  transition:box-shadow var(--tmb-motion-base) ease, transform var(--tmb-motion-base) ease;
}
.tmb-product-card:hover{ box-shadow:var(--tmb-shadow-lg); transform:translateY(-2px); }
.tmb-product-card__media{
  display:block;
  aspect-ratio:1/1;
  background:var(--tmb-color-surface-muted);
}
.tmb-product-card .tmb-product-card__media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:var(--tmb-space-3);
  mix-blend-mode:multiply;
}
.tmb-product-card__body{
  display:flex;
  flex-direction:column;
  gap:var(--tmb-space-1);
  flex:1;
  padding:var(--tmb-space-3) var(--tmb-space-3) var(--tmb-space-4);
}
.tmb-product-card__title{
  margin:0;
  font-size:var(--tmb-fs-sm);
  font-weight:var(--tmb-fw-bold);
  line-height:var(--tmb-leading-snug);
  color:var(--tmb-color-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tmb-product-card__title a:hover{ text-decoration:none; }
.tmb-product-card__title a::after{ content:""; position:absolute; inset:0; } /* whole card is the link */
.tmb-product-card{ position:relative; }
.tmb-product-card__price{
  margin-top:auto;
  padding-top:var(--tmb-space-1);
  font-size:var(--tmb-fs-sm);
  font-weight:var(--tmb-fw-bold);
  color:var(--tmb-color-primary);
}
.tmb-product-card__price del{ opacity:.55; font-weight:var(--tmb-fw-regular); }
.tmb-product-card__price ins{ text-decoration:none; }
@media (min-width:900px){
  .tmb-product-card .tmb-product-card__media img{ padding:var(--tmb-space-5); }
  .tmb-product-card__body{ padding:var(--tmb-space-4) var(--tmb-space-4) var(--tmb-space-5); }
  .tmb-product-card__title,
  .tmb-product-card__price{ font-size:var(--tmb-fs-md); }
}

/* Image tile: full-bleed image with a bottom label (categories, collections). */
.tmb-tile{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:180px;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--tmb-radius-md);
  background:var(--tmb-color-primary);
  color:var(--tmb-color-on-primary);
  isolation:isolate;
}
.tmb-tile:hover{ text-decoration:none; }
.tmb-tile .tmb-tile__image{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--tmb-ease-emphasized);
}
.tmb-tile::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg, rgba(5,15,23,.78) 0%, rgba(5,15,23,.12) 55%, transparent 100%);
}
.tmb-tile:hover .tmb-tile__image{ transform:scale(1.05); }
.tmb-tile__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tmb-space-2);
  width:100%;
  padding:var(--tmb-space-4);
  font-size:var(--tmb-fs-md);
  font-weight:var(--tmb-fw-bold);
  line-height:var(--tmb-leading-snug);
}

/* Logo tile: a brand mark on a neutral card. */
.tmb-logo-tile{
  display:grid;
  place-items:center;
  min-height:96px;
  padding:var(--tmb-space-4);
  border:1px solid var(--tmb-color-border);
  border-radius:var(--tmb-radius-md);
  background:var(--tmb-color-surface);
  color:var(--tmb-color-text);
  font-size:var(--tmb-fs-sm);
  font-weight:var(--tmb-fw-bold);
  letter-spacing:.06em;
  text-align:center;
  text-transform:uppercase;
  transition:border-color var(--tmb-motion-fast) ease, box-shadow var(--tmb-motion-fast) ease;
}
.tmb-logo-tile:hover{ text-decoration:none; border-color:var(--tmb-color-border-strong); box-shadow:var(--tmb-shadow-md); }
.tmb-logo-tile img{ width:auto; height:auto; max-width:100%; max-height:52px; object-fit:contain; }

/* Bottom sheet: slides up from the bottom on phones; centered panel on
   desktop. Toggle with the [hidden] attribute or .is-open. */
.tmb-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--tmb-z-sheet);
  display:flex;
  flex-direction:column;
  max-height:min(86svh, 720px);
  padding:var(--tmb-space-2) max(var(--tmb-space-4), var(--tmb-safe-left)) calc(var(--tmb-space-5) + var(--tmb-safe-bottom)) max(var(--tmb-space-4), var(--tmb-safe-right));
  border-radius:var(--tmb-radius-lg) var(--tmb-radius-lg) 0 0;
  background:var(--tmb-color-surface);
  color:var(--tmb-color-text);
  box-shadow:var(--tmb-shadow-sheet);
  overflow:auto;
  overscroll-behavior:contain;
  transform:translateY(0);
  transition:transform var(--tmb-motion-base) var(--tmb-ease-emphasized);
}
.tmb-sheet[hidden]{ display:none; }
.tmb-sheet__handle{
  display:block;
  width:40px;
  height:5px;
  margin:0 auto var(--tmb-space-3);
  border-radius:var(--tmb-radius-pill);
  background:var(--tmb-color-border-strong);
  flex:0 0 auto;
}
.tmb-sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tmb-space-3);
  margin-bottom:var(--tmb-space-3);
}
.tmb-sheet__title{
  margin:0;
  font-size:var(--tmb-fs-lg);
  font-weight:var(--tmb-fw-bold);
  color:var(--tmb-color-text);
}
@keyframes tmb-sheet-in{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.tmb-sheet:not([hidden]){ animation:tmb-sheet-in var(--tmb-motion-base) var(--tmb-ease-emphasized); }

/* Dim overlay behind sheets */
.tmb-dim{
  position:fixed;
  inset:0;
  z-index:var(--tmb-z-dim);
  background:rgba(5,12,20,.46);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.tmb-dim[hidden]{ display:none; }
@keyframes tmb-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.tmb-dim:not([hidden]){ animation:tmb-fade-in var(--tmb-motion-base) ease; }

/* List rows (menus inside sheets, settings-style lists) */
.tmb-list{ list-style:none; margin:0; padding:0; }
.tmb-list__item + .tmb-list__item{ border-top:1px solid var(--tmb-color-border); }
.tmb-list a,
.tmb-list button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--tmb-space-3);
  width:100%;
  min-height:52px;
  padding:var(--tmb-space-2) var(--tmb-space-1);
  border:0;
  background:none;
  color:var(--tmb-color-text);
  font-size:var(--tmb-fs-md);
  font-weight:var(--tmb-fw-medium);
  text-align:left;
  cursor:pointer;
}
.tmb-list a:hover{ text-decoration:none; color:var(--tmb-color-primary); }


/* --------------------------------------------------------------------------
   10) Utilities
-------------------------------------------------------------------------- */
.tmb-center{ text-align:center; }
.tmb-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.tmb-w-full{ width:100%; }
.tmb-max-none{ max-width:none; }
.tmb-mx-auto{ margin-inline:auto; }
.tmb-hidden{ display:none !important; }
.tmb-rounded{ border-radius:var(--tmb-radius-md); }
.tmb-rounded-lg{ border-radius:var(--tmb-radius-lg); }
.tmb-shadow-none{ box-shadow:none !important; }
.tmb-surface{ background:var(--tmb-ui-surface); }
.tmb-border{ border:1px solid var(--tmb-ui-border); }
@media (max-width:899.98px){ .tmb-only-desktop{ display:none !important; } }
@media (min-width:900px){ .tmb-only-app{ display:none !important; } }