/* ==========================================================================
   Toolbox — industrial / hardware storefront
   Ported from the Tööriist24 reference build. That build drove its design from
   a Tailwind CDN config (Material 3 token names) plus the Material Symbols icon
   font; both were external runtime dependencies. The token set is reproduced
   here as real custom properties so the design survives without a CDN, and the
   icons are inlined SVG (see functions.php).
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --tb-primary:            #004d9b;
  --tb-primary-d:          #003a75;   /* surface-tint / hover */
  --tb-on-primary:         #ffffff;
  --tb-primary-container:  #d6e4f7;
  --tb-on-primary-container: #002a57;
  --tb-primary-fixed:      #cfe0f7;
  --tb-primary-fixed-dim:  #6f9fd6;

  --tb-secondary:          #141414;
  --tb-on-secondary:       #ffffff;
  --tb-tertiary:           #2b3a4a;
  --tb-on-tertiary:        #ffffff;

  /* --- surfaces --------------------------------------------------------- */
  --tb-surface:            #ffffff;
  --tb-surface-lowest:     #ffffff;
  --tb-surface-low:        #f6f7f9;
  --tb-surface-c:          #eef0f3;
  --tb-surface-high:       #e5e8ec;
  --tb-surface-highest:    #dde1e6;
  --tb-surface-variant:    #e3e5e8;

  --tb-ink:                #0a0a0a;
  --tb-muted:              #46484c;
  --tb-outline:            #7a7d83;
  --tb-outline-variant:    #d7d9dc;

  --tb-error:              #ba1a1a;
  --tb-on-error:           #ffffff;
  --tb-error-container:    #ffdad6;
  --tb-on-error-container: #93000a;
  --tb-success:            #1b6b3a;

  /* --- geometry --------------------------------------------------------- */
  --tb-radius:      4px;
  --tb-radius-lg:   8px;
  --tb-radius-xl:   12px;
  --tb-radius-2xl:  16px;

  --tb-gap-xs:      4px;
  --tb-gap-sm:      8px;
  --tb-gap-md:      16px;
  --tb-gap-lg:      24px;
  --tb-gap-xl:      40px;
  --tb-section:     80px;
  /* 1280px up to a 1488px screen, then 86% of the screen up to 1440px
     (reached at 1675px): a little wider on a wide screen, never a page you
     have to turn your head to read. Reading widths (posts, text blocks,
     section intros) keep their own limits. */
  --tb-container:   clamp(1280px, 86vw, 1440px);

  /* Elevation. The reference build used two levels and nothing else. */
  --tb-sh-1: 0 2px 4px rgba(0, 0, 0, .05);
  --tb-sh-2: 0 10px 20px rgba(0, 0, 0, .08);
  --tb-sh-3: 0 20px 40px rgba(0, 0, 0, .18);

  --tb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: var(--tb-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--tb-ink);
  background: var(--tb-surface);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main, #main-content { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; text-wrap: balance; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--tb-primary);
  outline-offset: 2px;
  border-radius: var(--tb-radius);
}

.tb-container {
  max-width: var(--tb-container);
  margin: 0 auto;
  padding: 0 var(--tb-gap-lg);
  width: 100%;
}


.tb-section { padding: var(--tb-section) 0; }
.tb-section--tint { background: var(--tb-surface-low); }
/* The category grid sits directly under the hero and is the first thing a visitor
   is meant to act on — the full section rhythm pushed it too far down the page.
   Only the top is trimmed; the gap to whatever follows stays as it was. */
.tb-section--cats { padding-top: 56px; }
@media (max-width: 700px) { .tb-section--cats { padding-top: 36px; } }

/* Type scale — mirrors the reference build's fontSize map. */
.tb-display  { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -.02em; }
.tb-h-lg     { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.tb-h-md     { font-size: 24px; line-height: 32px; font-weight: 600; }
.tb-h-sm     { font-size: 20px; line-height: 28px; font-weight: 600; }
.tb-body-lg  { font-size: 18px; line-height: 28px; }
.tb-body-sm  { font-size: 14px; line-height: 20px; }
.tb-label    { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .05em; }
.tb-price-lg { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-price-sm { font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .tb-display { font-size: 28px; line-height: 36px; }
  .tb-h-lg    { font-size: 24px; line-height: 32px; }
  :root { --tb-section: 56px; }
}

.tb-eyebrow {
  display: inline-block;
  font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tb-primary);
}

.tb-muted { color: var(--tb-muted); }

.tb-section__head { margin-bottom: var(--tb-gap-xl); }
.tb-section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.tb-section__head p { margin: var(--tb-gap-sm) 0 0; color: var(--tb-muted); }
.tb-section__head--split { display: flex; flex-wrap: wrap; gap: var(--tb-gap-md); justify-content: space-between; align-items: flex-end; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tb-gap-xs);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--tb-radius-lg);
  font: 600 14px/20px var(--tb-font);
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .3s, transform .2s;
  white-space: nowrap;
}

.tb-btn--primary { background: var(--tb-primary); color: var(--tb-on-primary); box-shadow: var(--tb-sh-1); }
.tb-btn--primary:hover { background: var(--tb-primary-d); box-shadow: var(--tb-sh-2); transform: translateY(-1px); }

.tb-btn--dark { background: var(--tb-secondary); color: var(--tb-on-secondary); }
.tb-btn--dark:hover { background: var(--tb-tertiary); }

/* On the hero the ground is brand-blue, so the primary action inverts. */
.tb-btn--invert { background: var(--tb-on-primary); color: var(--tb-primary); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.tb-btn--invert:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, .25); transform: translateY(-2px); }

.tb-btn--outline { background: transparent; color: var(--tb-primary); border-color: var(--tb-outline-variant); }
.tb-btn--outline:hover { border-color: var(--tb-primary); background: var(--tb-surface-low); }

.tb-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4); }
.tb-btn--ghost:hover { background: rgba(255, 255, 255, .2); }

.tb-btn--sm   { padding: 8px 16px; }
.tb-btn--lg   { padding: 16px 40px; font-size: 15px; }
.tb-btn--full { width: 100%; }
.tb-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.tb-link-arrow {
  display: inline-flex; align-items: center; gap: var(--tb-gap-xs);
  color: var(--tb-primary); font-weight: 600; font-size: 14px; letter-spacing: .05em;
}
.tb-link-arrow:hover { color: var(--tb-primary-d); }
.tb-link-arrow svg { transition: transform .2s; }
.tb-link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tb-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--tb-surface-lowest);
  width: 100%;
}

.tb-announce { background: var(--tb-primary); color: var(--tb-on-primary); }
.tb-announce a, .tb-announce > span {
  display: flex; align-items: center; justify-content: center; gap: var(--tb-gap-xs);
  padding: 6px var(--tb-gap-lg);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
}
.tb-announce a:hover { text-decoration: underline; }




.tb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tb-muted); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tb-icon-btn:hover { background: var(--tb-surface-c); color: var(--tb-primary); }


/* Category mega-menu — the reference build's signature nav affordance. */
.tb-catmenu { position: relative; }

.tb-catmenu__chev { transition: transform .2s; }

.tb-catmenu__panel {
  position: absolute; left: 0; top: calc(100% + var(--tb-gap-sm));
  width: 680px; max-width: 92vw;
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
  padding: var(--tb-gap-lg); z-index: 50;
}
.tb-catmenu__panel[hidden] { display: none; }
.tb-catmenu__all {
  display: flex; align-items: center; gap: var(--tb-gap-sm);
  padding: var(--tb-gap-sm) var(--tb-gap-md); margin-bottom: var(--tb-gap-sm);
  border-radius: var(--tb-radius-lg); font-weight: 600; font-size: 14px; letter-spacing: .05em;
}
.tb-catmenu__all:hover { background: var(--tb-surface-c); }
.tb-catmenu__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  /* start, not stretch: an expanded category grows its own cell taller without
     dragging its neighbour's height with it. */
  align-items: start;
  border-top: 1px solid var(--tb-outline-variant); padding-top: var(--tb-gap-sm);
  max-height: 62vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--tb-outline-variant) transparent;
}
.tb-catmenu__grid::-webkit-scrollbar { width: 6px; }
.tb-catmenu__grid::-webkit-scrollbar-thumb { background: var(--tb-outline-variant); border-radius: 3px; }

/* Two-step drill-down. Both views live in the panel; only one is visible. */
.tb-catmenu__view[hidden] { display: none; }
.tb-catmenu__go { flex: none; color: var(--tb-outline); }
.tb-catmenu__item[data-open]:hover .tb-catmenu__go { color: var(--tb-primary); }

.tb-catmenu__back {
  display: flex; align-items: center; gap: 4px; width: 100%;
  padding: var(--tb-gap-sm) var(--tb-gap-md); margin-bottom: var(--tb-gap-sm);
  border: 0; border-radius: var(--tb-radius-lg); background: transparent;
  color: var(--tb-muted); cursor: pointer; text-align: left;
  font: 600 13px/20px var(--tb-font); letter-spacing: .04em;
}
.tb-catmenu__back:hover { background: var(--tb-surface-c); color: var(--tb-primary); }

/* The category itself stays one click away from step 2. */
.tb-catmenu__head {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--tb-gap-sm) var(--tb-gap-md); margin-bottom: var(--tb-gap-sm);
  border-radius: var(--tb-radius-lg); background: var(--tb-primary-container);
}
.tb-catmenu__head b { font: 600 15px/22px var(--tb-font); color: var(--tb-on-primary-container); }
.tb-catmenu__head span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--tb-primary); font-weight: 600;
}
.tb-catmenu__head:hover span { text-decoration: underline; }

.tb-catmenu__sub {
  display: flex; align-items: center; gap: var(--tb-gap-sm);
  padding: 8px var(--tb-gap-md); border-radius: var(--tb-radius-lg);
  font-size: 14px; color: var(--tb-muted); min-width: 0; overflow-wrap: break-word;
}
.tb-catmenu__sub:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-catmenu__sub i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--tb-outline); }
.tb-catmenu__item {
  display: flex; align-items: center; gap: var(--tb-gap-sm);
  padding: var(--tb-gap-sm) var(--tb-gap-md); border-radius: var(--tb-radius-lg);
  transition: background-color .2s; min-width: 0;
}
.tb-catmenu__item:hover { background: var(--tb-surface-c); }
.tb-catmenu__item svg { color: var(--tb-primary); flex-shrink: 0; }
.tb-catmenu__item b {
  flex: 1; min-width: 0; font: 600 14px/20px var(--tb-font); letter-spacing: .05em;
  /* Wrap long names instead of clipping them. break-word (not `anywhere`) so a
     word only splits when it genuinely cannot fit — `anywhere` also shrinks the
     flex min-content size and split "plaatimistööriistad" mid-word. */
  overflow-wrap: break-word;
}
.tb-catmenu__item span { flex: none; font-size: 12px; color: var(--tb-muted); white-space: nowrap; }


/* Mobile */
.tb-burger {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tb-muted); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.tb-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .2s; }
.tb-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tb-burger.open span:nth-child(2) { opacity: 0; }
.tb-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* Pill nav (secondary row) */
.tb-pill-nav { border-top: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest); }
.tb-pill-nav__inner { display: flex; gap: var(--tb-gap-xs); padding-block: var(--tb-gap-sm); overflow-x: auto; scrollbar-width: none; }
.tb-pill-nav__inner::-webkit-scrollbar { display: none; }
.tb-pill-nav__item {
  padding: 6px var(--tb-gap-md); border-radius: 999px; white-space: nowrap;
  font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted);
  transition: background-color .2s, color .2s;
}
.tb-pill-nav__item:hover, .tb-pill-nav__item.active { background: var(--tb-primary-container); color: var(--tb-on-primary-container); }
@media (max-width: 900px) { .tb-pill-nav { display: none; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.tb-hero { position: relative; width: 100%; overflow: hidden; background: var(--tb-primary); }
.tb-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* The wash keeps the headline legible over an arbitrary tenant photo while
   still letting the right-hand side of the image read through. */
.tb-hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--tb-primary) 0%,
    color-mix(in srgb, var(--tb-primary) 85%, transparent) 50%,
    color-mix(in srgb, var(--tb-primary) 40%, transparent) 100%);
}
.tb-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tb-gap-xl); align-items: center;
  padding-block: var(--tb-section); min-height: 520px;
}
.tb-hero__copy { color: var(--tb-on-primary); }
.tb-hero__copy .tb-eyebrow { color: var(--tb-primary-fixed); }
.tb-hero__title { margin-bottom: var(--tb-gap-md); }
.tb-hero__sub { font-size: 18px; line-height: 28px; opacity: .85; margin: 0 0 var(--tb-gap-xl); max-width: 32rem; }
.tb-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--tb-gap-sm); }
.tb-hero__figure { display: flex; justify-content: flex-end; }
.tb-hero__card {
  background: var(--tb-on-primary); border-radius: var(--tb-radius-2xl);
  padding: var(--tb-gap-xl); box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  max-width: 24rem; width: 100%;
}
.tb-hero__card img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 900px) {
  .tb-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .tb-hero__figure { justify-content: center; }
  .tb-hero__wash { background: linear-gradient(to bottom, var(--tb-primary) 0%, color-mix(in srgb, var(--tb-primary) 88%, transparent) 100%); }
}

/* --------------------------------------------------------------------------
   Category grid
   -------------------------------------------------------------------------- */

.tb-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tb-gap-lg);
  align-items: start; }

/* Two-step category drill-down on the homepage grid. */
.tb-cat-view[hidden] { display: none; }
.tb-cat-tile__go { flex: none; align-self: center; margin-right: var(--tb-gap-sm); color: var(--tb-outline); }
.tb-cat-grid--compact .tb-cat-tile__go { margin-right: 0; }
.tb-cat-tile[data-open]:hover .tb-cat-tile__go { color: currentColor; }

.tb-cat-view__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tb-gap-md); flex-wrap: wrap; margin-bottom: var(--tb-gap-lg);
}
.tb-cat-view__back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--tb-gap-sm) var(--tb-gap-md); border: 1px solid var(--tb-outline-variant);
  border-radius: 999px; background: var(--tb-surface-lowest); color: var(--tb-muted);
  font: 600 13px/20px var(--tb-font); letter-spacing: .04em; cursor: pointer;
}
.tb-cat-view__back:hover { color: var(--tb-primary); border-color: var(--tb-primary); }
.tb-cat-view__all { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.tb-cat-view__all b { font: 600 18px/26px var(--tb-font); color: var(--tb-ink); }
.tb-cat-view__all span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--tb-primary);
}
.tb-cat-view__all:hover span { text-decoration: underline; }

.tb-cat-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--tb-gap-sm); }
.tb-cat-subtile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--tb-gap-md); border-radius: var(--tb-radius-lg);
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  transition: border-color .2s, box-shadow .2s;
}
.tb-cat-subtile:hover { border-color: var(--tb-primary); box-shadow: var(--tb-sh-1); }
.tb-cat-subtile b { font: 600 15px/21px var(--tb-font); color: var(--tb-ink); overflow-wrap: break-word; }
.tb-cat-subtile span { font-size: 13px; color: var(--tb-muted); }
@media (max-width: 700px) {
  .tb-cat-view__head { flex-direction: column; align-items: stretch; }
  .tb-cat-view__all { align-items: flex-start; }
  .tb-cat-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-cat-subtile { padding: var(--tb-gap-sm); }
}
@media (max-width: 1024px) { .tb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .tb-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tb-cat-tile {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  border-radius: var(--tb-radius-xl); box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  transition: box-shadow .3s, transform .3s;
}
.tb-cat-tile:hover { box-shadow: 0 16px 28px rgba(0, 0, 0, .18); transform: translateY(-4px); }
/* Three-tone rotation, straight from the reference build's tile palette. */
.tb-cat-tile--a { background: var(--tb-primary);   color: var(--tb-on-primary); }
.tb-cat-tile--b { background: var(--tb-secondary); color: var(--tb-on-secondary); }
.tb-cat-tile--c { background: var(--tb-tertiary);  color: var(--tb-on-tertiary); }

.tb-cat-tile__img {
  position: relative; aspect-ratio: 1; margin: var(--tb-gap-md) var(--tb-gap-md) 0;
  background: rgba(255, 255, 255, .95); border-radius: var(--tb-radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: var(--tb-gap-md);
}
.tb-cat-tile__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
.tb-cat-tile:hover .tb-cat-tile__img img { transform: scale(1.08); }

/* Falls back to an outline glyph only where a category has neither its own artwork
   nor a single product photo. Tinted so it reads as a deliberate placeholder rather
   than a failed image. */
.tb-cat-tile__img--icon { background: var(--tb-primary-container); }
.tb-cat-tile__img--icon svg { color: var(--tb-primary); opacity: .7; }
.tb-cat-tile__body { padding: var(--tb-gap-sm) var(--tb-gap-md) var(--tb-gap-md); }
.tb-cat-tile__body h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 2px; overflow-wrap: break-word; }
/* Estonian compound category names ("Elektritööriistad") are long; at two tiles across a
   phone they hyphenate mid-word at the desktop size, so the title steps down instead. */
@media (max-width: 700px) {
  .tb-cat-tile__body h3 { font-size: 15px; line-height: 20px; }
  .tb-cat-tile__body p  { font-size: 13px; }
  .tb-cat-tile__img     { padding: var(--tb-gap-sm); margin: var(--tb-gap-sm) var(--tb-gap-sm) 0; }
  .tb-cat-tile__body    { padding: var(--tb-gap-sm); }
}
.tb-cat-tile__body p { margin: 0; font-size: 14px; line-height: 20px; opacity: .8; }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.tb-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tb-gap-lg); }
@media (max-width: 1100px) { .tb-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .tb-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Stays 2-up down to phone width rather than dropping to a single column — a
   full-width card wastes the screen on a device this narrow, and two columns
   still leaves each card wide enough for name, price and the cart button. */
@media (max-width: 480px)  {
  .tb-products-grid { gap: var(--tb-gap-sm); }
  .tb-product-card__body, .tb-product-card__footer { padding-left: var(--tb-gap-sm); padding-right: var(--tb-gap-sm); }
  .tb-product-card__name { font-size: 15px; line-height: 20px; }
  .tb-product-card__price { font-size: 15px; }
  /* A two-column card is too narrow for the full-size pill button — "Lisa
     ostukorv" at the normal size was overflowing past the card's own
     overflow:hidden edge and getting clipped mid-word. */
  .tb-product-card__footer .tb-btn {
    padding: 8px 6px; font-size: 12px; letter-spacing: 0; white-space: normal; line-height: 16px;
  }
}

.tb-product-card {
  position: relative;   /* containing block for the stretched name link */
  display: flex; flex-direction: column; min-width: 0; height: 100%;
  background: var(--tb-surface-lowest);
  border: 1px solid transparent; border-radius: var(--tb-radius-xl);
  overflow: hidden; box-shadow: var(--tb-sh-1);
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.tb-product-card:hover { box-shadow: var(--tb-sh-2); border-color: var(--tb-outline-variant); transform: translateY(-2px); }

.tb-product-card__img-wrap {
  position: relative; display: block; aspect-ratio: 1;
  overflow: hidden; background: var(--tb-surface);
}
.tb-product-card__img-wrap img {
  width: 100%; height: 100%; object-fit: contain; padding: var(--tb-gap-md);
  transition: transform .5s;
}
.tb-product-card:hover .tb-product-card__img-wrap img { transform: scale(1.05); }
.tb-product-card__img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--tb-surface-low); color: var(--tb-outline);
}
.tb-product-card__badge {
  position: absolute; top: var(--tb-gap-sm); left: var(--tb-gap-sm); z-index: 2;
  padding: 3px var(--tb-gap-sm); border-radius: var(--tb-radius);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tb-product-card__badge--sale { background: var(--tb-error); color: var(--tb-on-error); }
.tb-product-card__badge--new  { background: var(--tb-primary); color: var(--tb-on-primary); }

.tb-product-card__body { padding: var(--tb-gap-md); display: flex; flex-direction: column; flex: 1; }
.tb-product-card__cat { font-size: 14px; line-height: 20px; color: var(--tb-secondary); margin-bottom: var(--tb-gap-xs); }
/* Three lines, not two: similar products often differ only at the end of the
   name ("… SPI10K-B X2 - 10kW" / "… 12kW"), and two lines cut that off. Where a
   name is still cut, main.js puts the whole name in the link's title. */
.tb-product-card__name {
  font-size: 18px; line-height: 24px; font-weight: 600; margin-bottom: var(--tb-gap-xs);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; /* a word wider than a phone card ("Elektrigeneraator") wraps instead of being cut at the edge */
}
.tb-product-card__name a { color: inherit; }
.tb-product-card__name a:hover { color: var(--tb-primary); }
/* Stretched link — the whole card is one click target. Keeping it on the name
   (rather than wrapping the card in an <a>) means the accessible name is the
   product title and the Add-to-cart button stays a separate, real button. */
.tb-product-card__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
/* Anything interactive must sit above the stretched link's overlay. */
.tb-product-card__footer { position: relative; z-index: 2; }
.tb-product-card__link:focus-visible::after {
  outline: 2px solid var(--tb-primary); outline-offset: -3px; border-radius: var(--tb-radius-xl);
}
.tb-product-card__prices { margin-top: auto; padding-top: var(--tb-gap-sm); display: flex; gap: var(--tb-gap-sm); align-items: baseline; }
/* Wholesale (core/Wholesale.php): the price with VAT on its own line under the NET price. */
.tb-product-card__prices:has(.tb-ws-gross) { flex-wrap: wrap; row-gap: 2px; }
.tb-product-card__price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-product-card__prices--sale .tb-product-card__price { color: var(--tb-error); }
.tb-product-card__compare { font-size: 14px; color: var(--tb-outline); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.tb-product-card__footer { padding: 0 var(--tb-gap-md) var(--tb-gap-md); }

/* --------------------------------------------------------------------------
   Shop listing
   -------------------------------------------------------------------------- */

.tb-shop-header { background: var(--tb-surface-low); border-bottom: 1px solid var(--tb-outline-variant); padding: var(--tb-gap-lg) 0; }
.tb-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-gap-xs); font-size: 14px; color: var(--tb-muted); margin-bottom: var(--tb-gap-md); }
.tb-breadcrumb a:hover { color: var(--tb-primary); }
.tb-breadcrumb-sep { color: var(--tb-outline-variant); }
.tb-shop-toolbar { display: flex; flex-wrap: wrap; gap: var(--tb-gap-md); justify-content: space-between; align-items: flex-end; }
.tb-shop-title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.tb-shop-count { margin: var(--tb-gap-xs) 0 0; color: var(--tb-muted); font-size: 14px; }

/* The pill row can hold more categories than fit on screen (12 top-level
   categories + "Kõik"), and a plain overflow-x:auto strip gives no hint that
   there's more to see off-edge. A fade mask + arrow buttons make the overflow
   obvious and give a click target beyond drag/swipe. */
.tb-cat-pills-wrap { position: relative; margin-top: var(--tb-gap-md); }
.tb-cat-pills-wrap.has-overflow {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.tb-cat-pills {
  display: flex; gap: var(--tb-gap-xs); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  scroll-behavior: smooth;
}
.tb-cat-pills::-webkit-scrollbar { display: none; }
.tb-cat-pill {
  padding: 6px var(--tb-gap-md); border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest);
  font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted);
  transition: background-color .2s, color .2s, border-color .2s;
}
.tb-cat-pill:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-cat-pill.active { background: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-on-primary); }

.tb-cat-pills-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--tb-outline-variant);
  background: var(--tb-surface-lowest); color: var(--tb-ink); box-shadow: var(--tb-sh-1);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.tb-cat-pills-arrow:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-cat-pills-arrow--prev { left: -4px; }
.tb-cat-pills-arrow--next { right: -4px; }
@media (max-width: 480px) {
  .tb-cat-pills-arrow { width: 26px; height: 26px; }
  .tb-cat-pills-arrow--prev { left: -2px; }
  .tb-cat-pills-arrow--next { right: -2px; }
}

.tb-pagination { display: flex; justify-content: center; gap: var(--tb-gap-xs); margin-top: var(--tb-gap-xl); flex-wrap: wrap; }
.tb-page-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--tb-gap-sm);
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  font: 600 14px/20px var(--tb-font); color: var(--tb-ink);
  transition: border-color .2s, color .2s, background-color .2s;
}
.tb-page-btn:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-page-btn.active { background: var(--tb-primary); border-color: var(--tb-primary); color: var(--tb-on-primary); }
.tb-page-btn.disabled { opacity: .4; pointer-events: none; }
.tb-page-gap { display: flex; align-items: center; padding: 0 2px; color: var(--tb-outline); }

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.tb-pd { display: grid; grid-template-columns: 7fr 5fr; gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 900px) { .tb-pd { grid-template-columns: 1fr; } }

.tb-pd__gallery {
  position: relative; background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-surface-variant); border-radius: var(--tb-radius-xl);
  overflow: hidden; box-shadow: var(--tb-sh-1);
}
.tb-pd__main-img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--tb-gap-lg); }
.tb-pd__thumbs { display: flex; gap: var(--tb-gap-sm); padding: 0 var(--tb-gap-lg) var(--tb-gap-lg); flex-wrap: wrap; }
.tb-pd__thumb {
  width: 64px; height: 64px; border-radius: var(--tb-radius-lg); overflow: hidden;
  border: 2px solid var(--tb-outline-variant); background: #fff; cursor: pointer; padding: 0;
}
.tb-pd__thumb.active { border-color: var(--tb-primary); }
.tb-pd__thumb img { width: 100%; height: 100%; object-fit: contain; }

.tb-pd__cat { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-muted); margin-bottom: var(--tb-gap-sm); }
.tb-pd__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--tb-gap-sm); }
.tb-pd__sku { font-size: 14px; color: var(--tb-muted); margin: 0 0 var(--tb-gap-md); }
.tb-pd__price { display: flex; align-items: baseline; gap: var(--tb-gap-sm); margin-bottom: var(--tb-gap-lg); }
.tb-pd__price b { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-pd__price s { font-size: 16px; color: var(--tb-muted); }
.tb-pd__short { color: var(--tb-secondary); padding-bottom: var(--tb-gap-lg); border-bottom: 1px solid var(--tb-surface-variant); margin: 0 0 var(--tb-gap-lg); }

.tb-stock { display: inline-flex; align-items: center; gap: var(--tb-gap-xs); font-size: 14px; font-weight: 600; margin-bottom: var(--tb-gap-md); }
.tb-stock--in { color: var(--tb-success); }
.tb-stock--low { color: #9a5b00; }
.tb-stock--out { color: var(--tb-error); }

.tb-qty { display: flex; align-items: center; height: 48px; width: 128px; overflow: hidden; border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg); background: var(--tb-surface-lowest); }
.tb-qty button { flex: 0 0 40px; height: 100%; border: 0; background: transparent; color: var(--tb-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tb-qty button:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-qty input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; text-align: center; font: 400 16px var(--tb-font); color: var(--tb-ink); -moz-appearance: textfield; appearance: textfield; }
.tb-qty input::-webkit-outer-spin-button, .tb-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tb-pd__actions { display: flex; gap: var(--tb-gap-md); margin-bottom: var(--tb-gap-lg); flex-wrap: wrap; }
.tb-pd__actions .tb-btn { flex: 1; min-width: 180px; height: 48px; }

.tb-pd__assurances { display: flex; flex-direction: column; gap: var(--tb-gap-sm); background: var(--tb-surface-low); padding: var(--tb-gap-md); border-radius: var(--tb-radius-lg); font-size: 14px; color: var(--tb-secondary); }
.tb-pd__assurances div { display: flex; align-items: center; gap: var(--tb-gap-sm); }
.tb-pd__assurances svg { color: var(--tb-primary); flex-shrink: 0; }

.tb-pd__detail {
  margin-top: var(--tb-section);
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1); overflow: hidden;
}
.tb-pd__detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap-xl); padding: var(--tb-gap-xl); }
@media (max-width: 820px) { .tb-pd__detail-grid { grid-template-columns: 1fr; } }
.tb-pd__detail-grid h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--tb-gap-md); }

.tb-prose { color: var(--tb-secondary); }
.tb-prose p { margin: 0 0 var(--tb-gap-md); }
.tb-prose ul, .tb-prose ol { margin: 0 0 var(--tb-gap-md); padding-left: 20px; }
.tb-prose li { margin-bottom: 6px; }
.tb-prose h2 { font-size: 24px; line-height: 32px; font-weight: 600; margin: var(--tb-gap-lg) 0 var(--tb-gap-sm); }
.tb-prose h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: var(--tb-gap-lg) 0 var(--tb-gap-sm); }
.tb-prose a { color: var(--tb-primary); text-decoration: underline; }
.tb-prose > :last-child { margin-bottom: 0; }

.tb-specs { background: var(--tb-surface); padding: var(--tb-gap-lg); border-radius: var(--tb-radius-lg); border: 1px solid var(--tb-surface-variant); }
.tb-specs ul { list-style: none; margin: 0; padding: 0; }
.tb-specs li { display: flex; align-items: flex-start; gap: var(--tb-gap-sm); padding: 8px 0; font-size: 15px; color: var(--tb-secondary); }
.tb-specs li + li { border-top: 1px solid var(--tb-outline-variant); }
.tb-specs svg { color: var(--tb-primary); flex-shrink: 0; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Cart / checkout
   -------------------------------------------------------------------------- */

.tb-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 950px) { .tb-cart-layout { grid-template-columns: minmax(0, 1fr); } }

.tb-card {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1); padding: var(--tb-gap-lg);
}
.tb-card + .tb-card { margin-top: var(--tb-gap-md); }
.tb-card h2, .tb-card h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--tb-gap-md); }

.tb-table-wrap { overflow-x: auto; }
.tb-cart-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tb-cart-table th {
  text-align: left; padding-bottom: var(--tb-gap-sm); border-bottom: 1px solid var(--tb-outline-variant);
  font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted);
}
.tb-cart-table td { padding: var(--tb-gap-md) 0; border-bottom: 1px solid var(--tb-outline-variant); vertical-align: middle; }
.tb-cart-item { display: flex; gap: var(--tb-gap-md); align-items: center; min-width: 0; }
.tb-cart-item img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--tb-radius-lg); background: var(--tb-surface-low); flex-shrink: 0; }
.tb-cart-item__name { font-weight: 600; }
.tb-cart-item__meta { font-size: 13px; color: var(--tb-muted); }
.tb-cart-remove { border: 0; background: transparent; color: var(--tb-outline); cursor: pointer; padding: var(--tb-gap-xs); }
.tb-cart-remove:hover { color: var(--tb-error); }

.tb-summary-row { display: flex; justify-content: space-between; gap: var(--tb-gap-md); padding: 6px 0; font-size: 15px; }
.tb-summary-row span:last-child { font-variant-numeric: tabular-nums; }
.tb-summary-row--total { border-top: 1px solid var(--tb-outline-variant); margin-top: var(--tb-gap-sm); padding-top: var(--tb-gap-md); font-size: 20px; font-weight: 700; }
.tb-summary-free { color: var(--tb-success); font-weight: 600; }

.tb-cart-empty { text-align: center; padding: var(--tb-section) 0; }
.tb-cart-empty h2 { font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: var(--tb-gap-sm); }
.tb-cart-empty p { color: var(--tb-muted); margin: 0; }

/* Forms */
.tb-field { margin-bottom: var(--tb-gap-md); }
.tb-label-field { display: block; margin-bottom: var(--tb-gap-xs); font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted); }
.tb-input, .tb-select, .tb-textarea {
  width: 100%; padding: 12px var(--tb-gap-md);
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius);
  background: var(--tb-surface-lowest); box-shadow: var(--tb-sh-1);
  font: 400 16px/24px var(--tb-font); color: var(--tb-ink);
  transition: border-color .2s, box-shadow .2s;
}
.tb-input:focus, .tb-select:focus, .tb-textarea:focus {
  outline: none; border-color: var(--tb-primary);
  box-shadow: 0 0 0 3px rgba(0, 77, 155, .18);
}
.tb-textarea { min-height: 120px; resize: vertical; }
.tb-field-error { display: block; margin-top: var(--tb-gap-xs); font-size: 12px; color: var(--tb-error); }
.tb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap-md); }
@media (max-width: 600px) { .tb-grid-2 { grid-template-columns: 1fr; } }

.tb-alert { display: flex; align-items: flex-start; gap: var(--tb-gap-sm); padding: var(--tb-gap-md); border-radius: var(--tb-radius-lg); margin-bottom: var(--tb-gap-md); font-size: 15px; }
.tb-alert svg { flex-shrink: 0; margin-top: 2px; }
.tb-alert--ok { background: var(--tb-primary-container); color: var(--tb-on-primary-container); }
.tb-alert--err { background: var(--tb-error-container); color: var(--tb-on-error-container); }

/* Payment methods */
.tb-pay-group { margin-bottom: var(--tb-gap-lg); }
.tb-pay-group h3 { font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted); text-transform: uppercase; margin-bottom: var(--tb-gap-sm); }
.tb-pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--tb-gap-sm); }
.tb-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--tb-gap-xs);
  min-height: 60px; padding: var(--tb-gap-sm); cursor: pointer;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg); transition: border-color .2s, box-shadow .2s;
  font: 600 13px/18px var(--tb-font); color: var(--tb-ink);
}
.tb-pay-btn:hover { border-color: var(--tb-primary); box-shadow: var(--tb-sh-1); }
.tb-pay-btn img { max-height: 28px; max-width: 100%; object-fit: contain; }

/* Order status */
.tb-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tb-badge--ok { background: #dcf1e3; color: var(--tb-success); }
.tb-badge--wait { background: var(--tb-primary-container); color: var(--tb-on-primary-container); }
.tb-badge--bad { background: var(--tb-error-container); color: var(--tb-on-error-container); }

/* --------------------------------------------------------------------------
   Content blocks
   -------------------------------------------------------------------------- */

/* Trust / why-us trio */
.tb-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--tb-gap-lg); }
.tb-trust__item { text-align: center; min-width: 0; }
.tb-trust__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--tb-gap-sm);
  border-radius: var(--tb-radius-lg); background: var(--tb-primary-container); color: var(--tb-primary);
}
.tb-trust__item h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--tb-gap-xs); }
.tb-trust__item p { margin: 0; color: var(--tb-muted); font-size: 14px; line-height: 20px; }

/* Split (about) */
.tb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap-xl); align-items: center; }
@media (max-width: 820px) { .tb-split { grid-template-columns: 1fr; } }
.tb-split--flip .tb-split__media { order: 2; }
@media (max-width: 820px) { .tb-split--flip .tb-split__media { order: 0; } }
.tb-split__media {
  border-radius: var(--tb-radius-xl); overflow: hidden;
  border: 1px solid var(--tb-surface-variant); background: var(--tb-surface-lowest); box-shadow: var(--tb-sh-1);
}
.tb-split__media img { width: 100%; height: 400px; object-fit: contain; padding: var(--tb-gap-lg); }
.tb-split__body h2 { margin-bottom: var(--tb-gap-md); }
.tb-split__body p { margin: 0 0 var(--tb-gap-md); color: var(--tb-muted); }
.tb-split__body > :last-child { margin-bottom: 0; }

/* FAQ */
.tb-faq { display: flex; gap: var(--tb-gap-xl); align-items: flex-start; }
@media (max-width: 820px) { .tb-faq { flex-direction: column; } }
.tb-faq__intro { flex: 0 0 33%; min-width: 0; }
.tb-faq__intro h2 { margin-bottom: var(--tb-gap-sm); }
.tb-faq__intro p { margin: 0; color: var(--tb-muted); }
@media (min-width: 821px) { .tb-faq__intro { position: sticky; top: 120px; } }
.tb-faq__list { flex: 1; min-width: 0; width: 100%; }
.tb-faq__item { border-bottom: 1px solid var(--tb-outline-variant); padding: var(--tb-gap-lg) 0; }
.tb-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--tb-gap-md);
  cursor: pointer; list-style: none; font-size: 20px; line-height: 28px; font-weight: 600;
}
.tb-faq__item summary::-webkit-details-marker { display: none; }
.tb-faq__item summary svg { color: var(--tb-primary); flex-shrink: 0; transition: transform .3s; }
.tb-faq__item[open] summary svg { transform: rotate(45deg); }
.tb-faq__item p { margin: var(--tb-gap-md) 0 0; color: var(--tb-muted); }

/* Newsletter */
.tb-newsletter {
  position: relative; overflow: hidden;
  background: var(--tb-primary-container); color: var(--tb-on-primary-container);
  border-radius: var(--tb-radius-xl); padding: var(--tb-gap-xl);
  display: flex; flex-wrap: wrap; gap: var(--tb-gap-xl); align-items: center; justify-content: space-between;
}
@media (min-width: 900px) { .tb-newsletter { padding: 60px; } }
.tb-newsletter::before, .tb-newsletter::after {
  content: ''; position: absolute; width: 256px; height: 256px; border-radius: 999px;
  filter: blur(60px); pointer-events: none;
}
.tb-newsletter::before { top: -96px; right: -96px; background: var(--tb-primary-fixed-dim); opacity: .2; }
.tb-newsletter::after  { bottom: -96px; left: -96px; background: var(--tb-primary-fixed); opacity: .3; }
.tb-newsletter__copy { position: relative; z-index: 1; max-width: 28rem; }
.tb-newsletter__copy h2 { margin-bottom: var(--tb-gap-sm); }
.tb-newsletter__copy p { margin: 0; opacity: .9; }
.tb-newsletter__form { position: relative; z-index: 1; width: 100%; max-width: 28rem; }
.tb-newsletter__row { display: flex; gap: var(--tb-gap-sm); flex-wrap: wrap; }
.tb-newsletter__row input {
  flex: 1; min-width: 200px; padding: 12px var(--tb-gap-md);
  border: 0; border-radius: var(--tb-radius-lg); box-shadow: var(--tb-sh-1);
  font: 400 16px var(--tb-font); background: var(--tb-surface); color: var(--tb-ink);
}
.tb-newsletter__note { font-size: 12px; opacity: .75; margin: var(--tb-gap-sm) 0 0; }
.tb-newsletter__note a { text-decoration: underline; }
.tb-hp { position: absolute; left: -9999px; }

/* Text block */
.tb-text-block { max-width: 800px; }
.tb-text-block--center { margin-inline: auto; text-align: center; }

/* Contact */
.tb-contact { display: grid; grid-template-columns: 4fr 8fr; gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 820px) { .tb-contact { grid-template-columns: minmax(0, 1fr); } }
.tb-contact__cards { display: flex; flex-direction: column; gap: var(--tb-gap-md); }
.tb-contact__card {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1);
  padding: var(--tb-gap-lg); text-align: center;
}
.tb-contact__card svg { color: var(--tb-primary); margin: 0 auto var(--tb-gap-xs); }
.tb-contact__card h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 2px; }
.tb-contact__card p { margin: 0; font-size: 14px; color: var(--tb-muted); }
.tb-contact__card b, .tb-contact__card a { display: inline-block; margin-top: var(--tb-gap-sm); font-weight: 600; }
.tb-contact__card a { color: var(--tb-primary); }
.tb-contact__card a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.tb-footer {
  margin-top: auto;
  background: var(--tb-surface-highest);
  border-top: 1px solid var(--tb-outline-variant);
}
.tb-footer__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tb-gap-xl); padding: var(--tb-gap-xl) 0;
}
@media (max-width: 820px) { .tb-footer__grid { grid-template-columns: 1fr; } }
.tb-footer__logo { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--tb-gap-sm); }
.tb-footer__logo img { height: 26px; width: auto; }
.tb-footer__tagline { font-size: 14px; line-height: 20px; color: var(--tb-muted); max-width: 22rem; }
.tb-footer__col-title {
  font: 700 14px/20px var(--tb-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tb-primary); margin-bottom: var(--tb-gap-sm);
}
.tb-footer__col a, .tb-footer__col span { display: block; font-size: 14px; line-height: 22px; color: var(--tb-muted); }
.tb-footer__col a:hover { color: var(--tb-ink); text-decoration: underline; }
@media (min-width: 821px) { .tb-footer__col--end { text-align: right; } }
.tb-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--tb-gap-md); justify-content: space-between; align-items: center;
  padding: var(--tb-gap-md) 0; border-top: 1px solid var(--tb-outline-variant);
  font-size: 14px; color: var(--tb-muted);
}
.footer-credit { display: flex; flex-direction: column; line-height: 1.2; }
.footer-credit-name { font-weight: 600; color: var(--tb-ink); font-size: 13px; }
.footer-credit-sub { font-size: 11px; color: var(--tb-outline); }

/* --------------------------------------------------------------------------
   Toast + spinner
   -------------------------------------------------------------------------- */

/* 20px in, like the quick-checkout bar and the website assistant's button;
   above the bar while it is up (--tb-qc-lift), and above the assistant's
   button when that is in this corner too. */
.tb-toast-wrap {
  position: fixed; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px;
  bottom: calc(20px + var(--tb-qc-lift, 0px) + var(--tb-chat-space, 0px));
}
body:has(> [data-cmsc="right"]) { --tb-chat-space: 68px; }
/* The assistant's button is above everything on the page, so it would sit on
   top of an open drawer or the filter sheet: it steps away while one is open
   (.tb-drawer-open: main.js, .tb-filters-open: shop-list.php). */
.tb-drawer-open, .tb-filters-open { --cms-chat-visibility: hidden; }
.tb-toast {
  background: var(--tb-secondary); color: #fff;
  padding: 12px 20px; border-radius: var(--tb-radius-lg); box-shadow: var(--tb-sh-3);
  font-size: 14px; animation: tb-toast-in .25s ease;
}
.tb-toast--success { background: var(--tb-success); }
.tb-toast--error { background: var(--tb-error); }
@keyframes tb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tb-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 999px; animation: tb-spin .7s linear infinite;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Quick checkout — partials/site-header.php; main.js shows it and keeps its
   figures current.

   A card in the bottom-right corner on a wide screen (a full-width bar across
   a desktop would be a banner, not a shortcut); full width on a phone, where
   the header's cart icon has scrolled away. Under the header, its drawers and
   every overlay (z-index 45), over the page.
   -------------------------------------------------------------------------- */

.tb-qc {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  /* As wide as its content: in the corner it covers as little of the page
     (a promo button, the last product column) as it can. */
  max-width: calc(100vw - 40px);
  /* Off-screen until .is-in; transform and opacity only, so the slide does not
     lay the page out again. */
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform .42s cubic-bezier(.22, .9, .28, 1), opacity .28s ease;
}
/* main.js toggles [hidden]; without this the rule above would keep an
   invisible bar in the corner, catching clicks. */
.tb-qc[hidden] { display: none; }
.tb-qc.is-in { transform: none; opacity: 1; }

.tb-qc__link {
  display: flex; align-items: center; gap: 14px;
  min-width: 300px; min-height: 60px; padding: 10px 10px 10px 18px;
  background: var(--tb-primary); color: var(--tb-on-primary);
  border-radius: var(--tb-radius-xl);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--tb-primary) 70%, transparent), 0 4px 12px rgba(0, 0, 0, .14);
  text-decoration: none;
}
.tb-qc__link:focus-visible { outline: 3px solid var(--tb-primary-fixed-dim); outline-offset: 3px; }

.tb-qc__icon { position: relative; display: flex; flex: none; }
.tb-qc__count {
  position: absolute; top: -9px; right: -11px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tb-on-primary); color: var(--tb-primary);
  border: 2px solid var(--tb-primary); border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
}
/* A pulse when the number changes, so an add registers with the bar already up. */
.tb-qc__count.is-bump { animation: tb-qc-bump .42s ease; }
@keyframes tb-qc-bump { 38% { transform: scale(1.4); } }

.tb-qc__meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.tb-qc__meta small { font-size: 12px; opacity: .8; }
.tb-qc__total { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-qc__total:empty { display: none; }

.tb-qc__cta {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 12px 0 16px;
  background: var(--tb-on-primary); color: var(--tb-primary);
  border-radius: var(--tb-radius-lg); font-size: 14px; font-weight: 700;
}
.tb-qc__cta svg { transition: transform .18s ease; }

@media (hover: hover) {
  .tb-qc__link { transition: transform .18s ease, box-shadow .18s ease; }
  .tb-qc__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--tb-primary) 80%, transparent), 0 6px 14px rgba(0, 0, 0, .16);
  }
  .tb-qc__link:hover .tb-qc__cta svg { transform: translateX(3px); }
}

@media (max-width: 640px) {
  .tb-qc { left: 12px; right: 12px; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .tb-qc__link { min-width: 0; }
}

/* While the bar is up (main.js sets .tb-qc-on and --tb-qc-h, its measured
   height) the corner is kept clear: toasts move above it, so does the
   website assistant's button (--cms-chat-lift, read by assets/chat), and the
   footer gets room to scroll its last line out from under it. */
.tb-qc-on {
  --tb-qc-lift: calc(var(--tb-qc-h, 60px) + 12px);
  --cms-chat-lift: var(--tb-qc-lift);
}
.tb-qc-on .tb-footer { padding-bottom: calc(var(--tb-qc-h, 60px) + 24px); }

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

/* --------------------------------------------------------------------------
   Storefront pages (cart / checkout / product detail)

   These pages render outside the block system and carry their own class
   vocabulary. Their markup is deliberately left untouched — it drives live
   checkout — so the design is applied to the names they already use.
   -------------------------------------------------------------------------- */

:root {
  /* Aliases for the shorter token names the storefront pages reference. */
  --tb-border: var(--tb-outline-variant);
  --tb-text:   var(--tb-ink);
  --tb-brand:  var(--tb-primary);
  --tb-accent: var(--tb-primary);
}

.tb-page-title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }

/* Product detail */
.tb-product-layout { display: grid; grid-template-columns: 7fr 5fr; gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 900px) { .tb-product-layout { grid-template-columns: 1fr; } }

.tb-gallery {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1); overflow: hidden;
}
.tb-gallery__main { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--tb-gap-lg); }
.tb-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.tb-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant); border-radius: 50%;
  color: var(--tb-text); cursor: pointer; box-shadow: var(--tb-sh-1);
  opacity: .85; transition: opacity .2s, transform .2s;
}
.tb-gallery__nav:hover { opacity: 1; transform: translateY(-50%) scale(1.06); }
.tb-gallery__nav--prev { left: var(--tb-gap-md); }
.tb-gallery__nav--next { right: var(--tb-gap-md); }
@media (max-width: 480px) { .tb-gallery__nav { width: 34px; height: 34px; } }
.tb-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--tb-gap-sm); padding: 0 var(--tb-gap-lg) var(--tb-gap-lg); }
.tb-thumb {
  width: 64px; height: 64px; padding: 4px; cursor: pointer; background: #fff;
  border: 2px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg); overflow: hidden;
  transition: border-color .2s;
}
.tb-thumb:hover { border-color: var(--tb-primary-fixed-dim); }
.tb-thumb.active { border-color: var(--tb-primary); }
.tb-thumb img { width: 100%; height: 100%; object-fit: contain; }

.tb-product-info { min-width: 0; }
.tb-product-title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--tb-gap-md); }
.tb-product-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tb-gap-sm); margin-bottom: var(--tb-gap-md); }
.tb-product-price { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-product-compare { font-size: 16px; color: var(--tb-outline); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.tb-product-badge-sale {
  padding: 3px 10px; border-radius: var(--tb-radius); background: var(--tb-error); color: var(--tb-on-error);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tb-product-short-desc {
  color: var(--tb-secondary); margin: 0 0 var(--tb-gap-lg);
  padding-bottom: var(--tb-gap-lg); border-bottom: 1px solid var(--tb-surface-variant);
}

.tb-qty-row { display: flex; align-items: center; gap: var(--tb-gap-md); margin-bottom: var(--tb-gap-md); flex-wrap: wrap; }

/* Stock and delivery (product page, above the quantity): a row per warehouse — own (green, fast) and the supplier's EU
   warehouse (blue) — or out of stock / pre-order. Each row: the figure, the delivery time on its own line under it (the
   same at every width and in every language, so the rows read alike); the icon at the left of the first line. */
.tb-avail {
  margin: 0 0 var(--tb-gap-md); background: var(--tb-surface-low);
  border: 1px solid var(--tb-surface-variant); border-radius: var(--tb-radius-lg);
  font-size: 14px; line-height: 20px;
}
.tb-avail__row { position: relative; margin: 0; padding: 9px 14px 9px 46px; }
.tb-avail__row + .tb-avail__row { border-top: 1px solid var(--tb-surface-variant); }
.tb-avail__ico {
  position: absolute; left: 14px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tb-avail__ico svg { stroke-width: 2.6; }
.tb-avail__qty { display: block; font-weight: 600; color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb-avail__eta { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tb-muted); }
.tb-avail__row--own .tb-avail__ico { background: #dcefe3; color: var(--tb-success); }
.tb-avail__row--own .tb-avail__qty, .tb-avail__row--own .tb-avail__eta { color: var(--tb-success); }
.tb-avail__row--own .tb-avail__eta { font-weight: 600; }
.tb-avail__row--eu .tb-avail__ico, .tb-avail__row--order .tb-avail__ico, .tb-avail__row--avail .tb-avail__ico { background: var(--tb-primary-container); color: var(--tb-primary); }
.tb-avail__row--eu .tb-avail__qty, .tb-avail__row--order .tb-avail__qty { color: var(--tb-primary); }
.tb-avail__row--pre .tb-avail__ico { background: #fbe9cf; color: #9a5b00; }
.tb-avail__row--pre .tb-avail__qty { color: #9a5b00; }
.tb-avail__row--out .tb-avail__ico { background: var(--tb-error-container); color: var(--tb-error); }
.tb-avail__row--out .tb-avail__qty { color: var(--tb-error); }
/* The quantity note sits BESIDE the stepper (in .tb-qty-row), never above it: the stepper keeps its place whatever the
   note says (the stepper is pinned to the row's top; a taller note only grows the row downwards). It stays in the layout
   while empty (zero size) — it is an aria-live region, which must exist before its text arrives. */
.tb-qty-row .tb-qty { align-self: flex-start; }
.tb-avail__hint { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 13px; line-height: 18px; color: var(--tb-muted); }
.tb-avail__hint:empty { flex: 0 0 0; }

.tb-add-row { display: flex; gap: var(--tb-gap-sm); margin-bottom: var(--tb-gap-lg); flex-wrap: wrap; }
.tb-add-row .tb-btn { flex: 1 1 200px; }
.tb-add-row .tb-btn--outline { flex: 0 0 auto; }

.tb-product-desc {
  background: var(--tb-surface-low); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-lg); padding: var(--tb-gap-lg); color: var(--tb-secondary);
  /* Supplier descriptions are long and specification-heavy; the inherited 1.5
     ran the lines together and made a spec list hard to scan. */
  line-height: 1.75;
}
/* A long description opens clipped (the class is set by the page's script, so without it everything shows). */
.tb-desc-body.is-clipped { max-height: 320px; overflow: hidden; position: relative; }
.tb-desc-body.is-clipped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--tb-surface-low));
}
.tb-desc-more {
  margin-top: var(--tb-gap-sm); padding: 8px 18px; border-radius: var(--tb-radius);
  border: 2px solid var(--tb-border); background: transparent; color: var(--tb-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.tb-desc-more:hover { border-color: var(--tb-accent); color: var(--tb-accent); }
.tb-desc-more:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tb-product-desc h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--tb-gap-sm); color: var(--tb-ink); }
.tb-product-desc p { margin: 0 0 var(--tb-gap-md); }
.tb-product-desc ul, .tb-product-desc ol { margin: 0 0 var(--tb-gap-md); padding-left: 22px; }
/* These descriptions are imported HTML: most of them use <div> per line rather
   than <p>, and a div carries no margin — so consecutive lines sat flush. Only
   top-level siblings are spaced, to avoid stacking gaps on nested wrappers. */
.tb-product-desc li { margin-bottom: 8px; }
.tb-product-desc > div + div,
.tb-product-desc > p + div,
.tb-product-desc > div + p { margin-top: var(--tb-gap-sm); }

/* Feed bullets. The emoji they arrive as are stripped in tb_desc_html(); the
   marker is drawn here so it inherits the shop's own colour and weight instead
   of the platform's emoji font. */
.tb-product-desc [data-b] {
  position: relative; padding-left: 26px; margin-top: 4px;
}
.tb-product-desc [data-b]::before {
  /* Half the line box (line-height is 1.75), so the marker sits on the optical
     centre of the first line rather than riding above it. */
  content: ""; position: absolute; left: 0; top: .875em; transform: translateY(-50%);
}
/* A check, drawn as two strokes — no icon font, no network request. */
.tb-product-desc [data-b="check"]::before {
  width: 15px; height: 15px;
  background: var(--tb-primary);
  -webkit-mask: no-repeat center/11px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
          mask: no-repeat center/11px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.tb-product-desc [data-b="dot"]::before {
  width: 6px; height: 6px; left: 5px; border-radius: 50%;
  background: var(--tb-outline);
}
.tb-product-desc > :last-child { margin-bottom: 0; }

/* Cart */
.tb-cart-item-img {
  width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
  background: var(--tb-surface-low); border-radius: var(--tb-radius-lg);
}
.tb-cart-item-name { font-weight: 600; }
.tb-cart-item-name a { color: inherit; }
.tb-cart-item-name a:hover { color: var(--tb-primary); text-decoration: underline; }
.tb-cart-item-img { cursor: pointer; }
/* Quantity stepper in the cart rows. These buttons are injected by shop-cart.php's
   JS renderer, so without an explicit rule they fell through to the browser's default
   button chrome (grey, outset border, Arial) in the middle of the design. Matches the
   .tb-qty stepper on the product page. */
.tb-cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg);
  background: var(--tb-surface-lowest);
  overflow: hidden;
}
.tb-cart-qty button {
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  color: var(--tb-muted); cursor: pointer;
  font: 600 16px/1 var(--tb-font);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s;
}
.tb-cart-qty button:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-cart-qty span {
  min-width: 34px; padding: 0 2px; text-align: center;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Price and line-total sit in adjacent right-aligned cells; with no gutter between
   them the two figures ran together as one string ("€15.94€31.88"). */
.tb-cart-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--tb-gap-lg); }
.tb-cart-table th:nth-child(3), .tb-cart-table th:nth-child(4) { text-align: right; padding-left: var(--tb-gap-lg); }
.tb-cart-table th:nth-child(2) { text-align: left; }
.tb-free-shipping { color: var(--tb-success); font-weight: 600; }

.tb-order-summary {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1);
  padding: var(--tb-gap-lg); position: sticky; top: 100px;
}
@media (max-width: 950px) { .tb-order-summary { position: static; } }

/* Checkout */
.tb-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 950px) { .tb-checkout-layout { grid-template-columns: minmax(0, 1fr); } }

.tb-form-section {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1);
  padding: var(--tb-gap-lg); margin-bottom: var(--tb-gap-md);
}
.tb-form-section h2, .tb-form-section h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: var(--tb-gap-md); }
.tb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap-md); }
@media (max-width: 600px) { .tb-form-grid { grid-template-columns: 1fr; } }
.tb-form-grid--full { grid-column: 1 / -1; }

/* Delivery method picker on the checkout page — one selectable row per enabled
   shipping method, priced for the current cart subtotal and destination. */
.tb-ship-list { display: flex; flex-direction: column; gap: var(--tb-gap-sm); }
.tb-ship-opt {
  display: flex; align-items: center; gap: var(--tb-gap-md);
  padding: var(--tb-gap-md); border: 1.5px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.tb-ship-opt:hover { border-color: var(--tb-primary); }
.tb-ship-opt.active { border-color: var(--tb-primary); background: var(--tb-primary-container); }
.tb-ship-opt input { accent-color: var(--tb-primary); width: 18px; height: 18px; flex-shrink: 0; }
.tb-ship-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-ship-opt__name { font-weight: 600; font-size: 15px; }
.tb-ship-opt__desc { font-size: 13px; color: var(--tb-muted); }
.tb-ship-opt__price { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Gateway logo in the payment-method rows — sits where the delivery price does. */
.tb-pay-opt__icon { height: 22px; width: auto; max-width: 90px; object-fit: contain; flex-shrink: 0; }

/* Bank links, shown under the gateway they belong to. Indented so the grid
   reads as part of the selected method rather than a sibling option. */
.tb-bank-block { padding: var(--tb-gap-md) 0 var(--tb-gap-xs) var(--tb-gap-md); }
.tb-bank-label {
  font-size: 13px; font-weight: 600; color: var(--tb-muted);
  margin: 0 0 var(--tb-gap-sm);
}
.tb-bank-grid {
  display: grid; gap: var(--tb-gap-sm);
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.tb-bank {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; min-height: 60px;
  background: var(--tb-surface); text-align: center;
  border: 1.5px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.tb-bank:hover { border-color: var(--tb-primary); }
.tb-bank:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: 2px; }
.tb-bank.active {
  border-color: var(--tb-primary); background: var(--tb-primary-container);
  box-shadow: inset 0 0 0 1px var(--tb-primary);
}
/* The logo is the whole label now, so it gets the tile rather than sharing it.
   Widths differ wildly between brands (wordmarks vs monograms), so cap both
   axes and let object-fit letterbox each one into the same visual box. */
.tb-bank img {
  max-width: 100%; max-height: 26px; width: auto; height: auto;
  object-fit: contain;
}
/* Only reached by a bank Montonio ships without a logo. */
.tb-bank__name { font-size: 13px; font-weight: 600; line-height: 1.25; }

/* Parcel machine picker, indented under the delivery method it belongs to. */
.tb-pickup-block {
  padding: var(--tb-gap-md) 0 var(--tb-gap-xs) var(--tb-gap-md);
  display: flex; flex-direction: column; gap: var(--tb-gap-sm);
}
/* Carrier mark on a delivery row, sized like the gateway logos on the payment
   rows so the two lists read as a pair. */
.tb-ship-opt__logo {
  height: 22px; width: auto; max-width: 84px;
  object-fit: contain; flex-shrink: 0; margin-left: auto;
}
.tb-ship-opt__logo + .tb-ship-opt__price { margin-left: var(--tb-gap-md); }
@media (max-width: 480px) { .tb-ship-opt__logo { max-width: 60px; height: 18px; } }

.tb-pickup-count { margin: 0; font-size: 12px; color: var(--tb-muted); }
@media (max-width: 480px) { .tb-pickup-block { padding-left: 0; } }

/* Parcel machine combobox: a search field over a grouped, scrollable list.
   A native <select> cannot show the address under the name, and a thousand
   options in one popup is unusable without typing anyway. */
.tb-pickup { position: relative; display: flex; flex-direction: column; gap: var(--tb-gap-xs); }
.tb-pickup__control { position: relative; display: flex; align-items: center; }
.tb-pickup__input {
  width: 100%; padding: 12px 68px 12px 14px;
  font: 400 15px/22px var(--tb-font); color: var(--tb-ink);
  background: var(--tb-surface);
  border: 1.5px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  transition: border-color .2s, box-shadow .2s;
}
.tb-pickup__input::placeholder { color: var(--tb-muted); }
.tb-pickup__input:focus {
  outline: none; border-color: var(--tb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-primary) 18%, transparent);
}
.tb-pickup.chosen .tb-pickup__input { font-weight: 600; }
.tb-pickup__caret {
  position: absolute; right: 12px; color: var(--tb-muted);
  pointer-events: none; transition: transform .2s;
}
.tb-pickup.open .tb-pickup__caret { transform: rotate(180deg); }
.tb-pickup__clear {
  position: absolute; right: 36px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--tb-muted);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.tb-pickup__clear:hover { background: var(--tb-surface-c); color: var(--tb-ink); }

.tb-pickup__panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--tb-surface);
  border: 1.5px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-sh-2);
}
.tb-pickup__group {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 14px 6px; background: var(--tb-surface-low);
  font: 600 11px/15px var(--tb-font); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tb-muted); border-bottom: 1px solid var(--tb-outline-variant);
}
.tb-pickup__opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--tb-surface-c);
}
.tb-pickup__opt:last-child { border-bottom: 0; }
.tb-pickup__opt:hover,
.tb-pickup__opt.active { background: var(--tb-surface-low); }
.tb-pickup__opt.selected { background: var(--tb-primary-container); }
.tb-pickup__name { font: 600 14px/19px var(--tb-font); color: var(--tb-ink); }
.tb-pickup__addr { font-size: 12.5px; line-height: 17px; color: var(--tb-muted); }
.tb-pickup__empty { margin: 0; padding: 16px 14px; font-size: 13px; color: var(--tb-muted); }

@media (max-width: 560px) {
  /* Taller list and bigger rows: this is a one-handed, thumb-driven choice. */
  .tb-pickup__panel { max-height: 60vh; }
  .tb-pickup__opt { padding: 12px 14px; }
  .tb-pickup__input { padding-top: 13px; padding-bottom: 13px; font-size: 16px; }
}
@media (max-width: 480px) {
  .tb-bank-block { padding-left: 0; }
  .tb-bank-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Stock quantity on a listing card — real numbers, synced from the supplier. */
.tb-card-stock {
  font-size: 12px; line-height: 16px; color: var(--tb-muted);
  margin-bottom: var(--tb-gap-xs); display: flex; align-items: center; gap: 5px;
}
.tb-card-stock::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tb-success); flex-shrink: 0;
}
.tb-card-stock.low { color: #b45309; }
.tb-card-stock.low::before { background: #d97706; }
.tb-card-stock.out { color: var(--tb-error); }
.tb-card-stock.out::before { background: var(--tb-error); }

/* "Müüakse 25 tk kaupa" — a product sold only in multiples (core/SaleStep.php): on the product page under the
   quantity, on a listing card under the price. */
.tb-sale-step { font-size: 14px; font-weight: 600; color: var(--tb-accent, var(--tb-text)); margin: calc(-1 * var(--tb-gap-sm, 8px)) 0 var(--tb-gap-md); }
.tb-card-step { font-size: 12px; line-height: 16px; color: var(--tb-muted); margin: 4px 0 0; }

/* "sisaldab KM 24%" under the product price. */
.tb-tax-note { font-size: 13px; color: var(--tb-muted); margin: -8px 0 14px; }

/* Coupon entry in the order summary. */
.tb-coupon { margin-top: var(--tb-gap-md); padding-top: var(--tb-gap-md); border-top: 1px solid var(--tb-outline-variant); }
.tb-coupon__row { display: flex; gap: var(--tb-gap-sm); margin-top: 6px; }
.tb-coupon__row .tb-input { flex: 1; min-width: 0; }
.tb-coupon__row .tb-btn { flex-shrink: 0; }
.tb-coupon__msg { font-size: 13px; margin: 6px 0 0; color: var(--tb-muted); }
.tb-coupon__msg.is-error { color: var(--tb-error); }
.tb-summary-row--discount span { color: var(--tb-primary); font-weight: 600; }

/* Terms/privacy consent above the checkout submit button. */
.tb-accept {
  display: flex; align-items: flex-start; gap: var(--tb-gap-sm);
  margin-bottom: var(--tb-gap-md); cursor: pointer;
  font-size: 14px; line-height: 20px; color: var(--tb-muted);
}
.tb-accept input { accent-color: var(--tb-primary); width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.tb-accept span { min-width: 0; }
.tb-accept a { color: var(--tb-primary); text-decoration: underline; }
.tb-accept a:hover { text-decoration: none; }

.tb-divider { border: 0; border-top: 1px solid var(--tb-outline-variant); }

.tb-methods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--tb-gap-sm); }
.tb-method-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: var(--tb-gap-sm);
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg); transition: border-color .2s, box-shadow .2s;
  font: 600 13px/18px var(--tb-font); color: var(--tb-ink); text-align: center;
}
.tb-method-btn:hover { border-color: var(--tb-primary); box-shadow: var(--tb-sh-1); }
.tb-method-btn img { max-height: 26px; max-width: 100%; object-fit: contain; }

/* Placeholder shown while the cart summary loads over fetch. */
.tb-skeleton {
  background: linear-gradient(90deg, var(--tb-surface-c) 25%, var(--tb-surface-high) 37%, var(--tb-surface-c) 63%);
  background-size: 400% 100%;
  animation: tb-shimmer 1.4s ease infinite;
}
@keyframes tb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Scroll reveal (main.js adds .in) */
.tb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.tb-reveal.in { opacity: 1; transform: none; }
.no-js .tb-reveal, html:not(.js) .tb-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero product slider

   Crossfade rather than a horizontal track: slides are absolutely stacked, so
   one tall product photo never sets the height for all of them. Slide 1 is
   rendered active server-side, so with JS unavailable the hero still shows a
   real product that links through to its page.
   -------------------------------------------------------------------------- */

.tb-slider { position: relative; padding: 0; overflow: hidden; }

.tb-slider__track { position: relative; display: grid; }
/* Every slide occupies the same grid cell; the tallest one sets the height. */
.tb-slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: var(--tb-gap-sm);
  padding: var(--tb-gap-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
  color: var(--tb-ink);
}
.tb-slide.is-active { opacity: 1; visibility: visible; }

.tb-slide__img {
  display: block; aspect-ratio: 1; background: #fff;
  border-radius: var(--tb-radius-lg); overflow: hidden;
}
.tb-slide__img img {
  width: 100%; height: 100%; object-fit: contain; padding: var(--tb-gap-sm);
  transition: transform .5s ease;
}
.tb-slide:hover .tb-slide__img img { transform: scale(1.04); }

.tb-slide__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-slide__cat  { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-muted); }
.tb-slide__name {
  font-size: 16px; line-height: 22px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-slide__price { display: flex; align-items: baseline; gap: var(--tb-gap-sm); margin-top: 2px; }
.tb-slide__price b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tb-primary); }
.tb-slide__price s { font-size: 14px; color: var(--tb-outline); }

/* Controls */
.tb-slider__nav {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tb-outline-variant); border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--tb-ink);
  cursor: pointer; padding: 0; z-index: 2;
  transition: background-color .2s, border-color .2s, color .2s;
}
.tb-slider__nav:hover { background: #fff; border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-slider__nav--prev { left: 10px; }
.tb-slider__nav--next { right: 10px; }

.tb-slider__dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 0 var(--tb-gap-lg) var(--tb-gap-md);
}
.tb-slider__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: var(--tb-outline-variant); cursor: pointer;
  transition: background-color .2s, width .2s;
}
.tb-slider__dot.is-active { background: var(--tb-primary); width: 18px; }

@media (max-width: 900px) {
  .tb-slider__nav { top: 32%; }
}

/* No autoplay and no crossfade when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tb-slide { transition: none; }
}

/* Compact hero — headline and one action only. Keeps the fold short so the category
   grid is already on screen when the page loads, which is the whole point of a
   catalogue homepage. The figure column is dropped rather than shrunk: a product
   card squeezed into 260px reads as an accident. */
.tb-hero--compact .tb-hero__inner {
  grid-template-columns: 1fr;
  min-height: 0;
  padding-block: var(--tb-gap-xl);
}
.tb-hero--compact .tb-hero__figure { display: none; }
.tb-hero--compact .tb-hero__title { font-size: 36px; line-height: 44px; }
.tb-hero--compact .tb-hero__sub { margin-bottom: var(--tb-gap-lg); }
@media (max-width: 768px) {
  .tb-hero--compact .tb-hero__title { font-size: 26px; line-height: 34px; }
}

/* --------------------------------------------------------------------------
   Social links — same markup in the navbar, mobile drawer and footer.
   -------------------------------------------------------------------------- */

.tb-social { display: inline-flex; align-items: center; gap: 2px; }
.tb-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--tb-muted); transition: background-color .2s, color .2s;
}
.tb-social a:hover { background: var(--tb-surface-c); color: var(--tb-primary); }

/* The header is already crowded on a phone; the drawer carries them there instead. */
.tb-social--nav { margin-right: 2px; }

.tb-social--drawer {
  display: flex; gap: var(--tb-gap-xs);
  margin-top: var(--tb-gap-lg); padding-top: var(--tb-gap-md);
  border-top: 1px solid var(--tb-outline-variant);
}
.tb-social--drawer a { width: 40px; height: 40px; border: 1px solid var(--tb-outline-variant); }

.tb-social--footer { display: flex; gap: var(--tb-gap-xs); margin-top: var(--tb-gap-md); }
.tb-social--footer a { border: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest); }
.tb-social--footer a:hover { border-color: var(--tb-primary); }

/* --------------------------------------------------------------------------
   Shop listing — sidebar filters + sort bar
   -------------------------------------------------------------------------- */

.tb-shop-layout { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--tb-gap-xl); align-items: start; }
@media (max-width: 900px) { .tb-shop-layout { grid-template-columns: 1fr; } }

.tb-filters { position: sticky; top: 120px; }

/* ─── Filters: sticky sidebar on desktop, sticky bar + bottom sheet on mobile ──
   Below 900px the sidebar becomes a sheet that slides up over the page, the
   standard mobile-commerce pattern: the trigger stays pinned under the header
   so filters are reachable from anywhere in a 2000-product scroll, and the
   apply button stays pinned to the bottom of the sheet. */
.tb-filter-btn { display: none; }
.tb-filter-scrim { display: none; }
.tb-filter-sheet-head { display: none; }

@media (max-width: 900px) {
  /* Trigger — pinned just under the sticky site header. */
  .tb-filter-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    position: sticky; top: 56px; z-index: 30;
    padding: 12px 14px; margin-bottom: var(--tb-gap-md);
    background: var(--tb-surface-lowest); color: var(--tb-text);
    border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-sh-1); font: inherit; font-weight: 600; font-size: .95rem;
    cursor: pointer; text-align: left;
    scroll-margin-top: 120px;
  }
  .tb-filter-btn > span { flex: 1; min-width: 0; }
  .tb-filter-btn__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--tb-brand); color: #fff; font-size: .75rem; font-weight: 700;
  }
  .tb-filter-btn__chev { flex: none; transition: transform .2s ease; }
  .tb-filter-btn[aria-expanded="true"] { border-color: var(--tb-brand); }

  /* Backdrop */
  /* Driven by opacity + pointer-events, NOT the [hidden] attribute: a `display`
     rule in a media query outranks the UA's [hidden]{display:none}, which left
     an invisible full-screen overlay swallowing every tap on the page. */
  .tb-filter-scrim {
    display: block; position: fixed; inset: 0; z-index: 1200;
    background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .tb-filter-scrim.is-open { opacity: 1; pointer-events: auto; }

  /* The sheet itself */
  .tb-filters {
    /* `top: auto` matters: the desktop rule sets top:120px for the sticky
       column, and with both top and bottom set the sheet anchored to 120px and
       max-height capped it, leaving a strip of page under the sheet. */
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1201;
    display: flex; flex-direction: column; max-height: 85vh;
    background: var(--tb-surface-lowest);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
  }
  .tb-filters.is-open { transform: none; visibility: visible; }

  .tb-filter-sheet-head {
    display: flex; align-items: center; gap: var(--tb-gap-sm);
    padding: 18px 16px 12px; border-bottom: 1px solid var(--tb-outline-variant);
    flex: none; position: relative;
  }
  .tb-filter-sheet-head strong { flex: 1; font-size: 1rem; }
  /* Grab handle, so the sheet reads as draggable/dismissable. */
  .tb-filter-sheet-head::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--tb-outline-variant);
  }
  .tb-filter-sheet-close {
    flex: none; width: 34px; height: 34px; display: flex; align-items: center;
    justify-content: center; border: 0; border-radius: 50%;
    background: var(--tb-surface-c); color: var(--tb-text); cursor: pointer;
  }

  /* Body scrolls; the apply/clear block stays pinned to the bottom edge. */
  .tb-filters > form {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--tb-gap-md) 16px 0; min-height: 0;
  }
  .tb-filters .tb-filter-card {
    border: 0; box-shadow: none; padding: 0 0 var(--tb-gap-md);
    border-bottom: 1px solid var(--tb-outline-variant);
  }
  .tb-filters .tb-filter-list { max-height: none; }
  .tb-filter-actions {
    position: sticky; bottom: 0; background: var(--tb-surface-lowest);
    padding: var(--tb-gap-md) 0 calc(var(--tb-gap-md) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tb-outline-variant); margin-top: var(--tb-gap-sm);
  }

  body.tb-filters-open { overflow: hidden; }

  .tb-shop-layout { row-gap: var(--tb-gap-sm); }
  .tb-section--shop { padding-top: 16px; }
  .tb-shop-bar {
    flex-wrap: nowrap; gap: var(--tb-gap-sm);
    margin-bottom: var(--tb-gap-md); padding-bottom: 10px;
  }
  .tb-shop-showing { font-size: 13px; }
  .tb-sort { flex: none; }
}

.tb-filter-card {
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg);
  padding: var(--tb-gap-md); margin-bottom: var(--tb-gap-md);
}
/* Filter headings are labels, not page headings — small, spaced and quiet, so
   the category names underneath carry the visual weight. */
.tb-filter-card h3 {
  font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tb-outline);
  padding-bottom: var(--tb-gap-sm); margin-bottom: var(--tb-gap-sm);
  border-bottom: 1px solid var(--tb-outline-variant);
}
/* A few thousand products means a dozen-plus categories — cap the height so the
   filter column never runs longer than the results it filters. */
.tb-filter-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--tb-outline-variant) transparent; }
.tb-filter-list::-webkit-scrollbar { width: 6px; }
.tb-filter-list::-webkit-scrollbar-thumb { background: var(--tb-outline-variant); border-radius: 3px; }
.tb-filter-list::-webkit-scrollbar-track { background: transparent; }
.tb-filter-list label {
  display: flex; align-items: center; gap: var(--tb-gap-sm);
  padding: 6px var(--tb-gap-sm); border-radius: var(--tb-radius);
  cursor: pointer; font-size: 14.5px; color: var(--tb-muted);
}
.tb-filter-list label:hover { background: var(--tb-surface-c); }
.tb-filter-list label:hover { color: var(--tb-primary); }
.tb-filter-list input { accent-color: var(--tb-primary); width: 16px; height: 16px; flex-shrink: 0; }
/* `break-word` split "Elektritööriistad" across two lines mid-word. Let long
   names wrap at spaces and simply ride slightly wide if a single word cannot
   fit — far more legible than an arbitrary hyphenless break. */
.tb-filter-list span { min-width: 0; overflow-wrap: normal; }
.tb-filter-list b { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--tb-outline); }

/* Plain-navigation variant of the filter list, shown on a single-category route in
   place of the checkboxes — the active branch (viewed category + its ancestors)
   stays visually marked so a visitor never loses track of where they are while
   moving between subcategories. */
.tb-filter-list--nav { max-height: none; }
.tb-filter-navlink {
  display: flex; align-items: center; gap: var(--tb-gap-sm);
  padding: 6px var(--tb-gap-sm); margin: 1px 0; border-radius: var(--tb-radius);
  font-size: 15px; color: var(--tb-muted); border-left: 2px solid transparent;
}
.tb-filter-navlink:hover { color: var(--tb-primary); background: var(--tb-surface-c); }
.tb-filter-navlink span { min-width: 0; overflow-wrap: normal; }
.tb-filter-navlink b { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--tb-outline); }
.tb-filter-navlink.active {
  color: var(--tb-on-primary-container); font-weight: 600; background: var(--tb-primary-container);
  border-left-color: var(--tb-primary);
}
.tb-filter-navlink.active b { color: inherit; opacity: .75; }
.tb-filter-navlink--all {
  color: var(--tb-outline); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding-bottom: var(--tb-gap-sm);
  margin-bottom: var(--tb-gap-xs); border-bottom: 1px solid var(--tb-outline-variant); border-radius: 0;
}
.tb-filter-navlink--all:hover { background: transparent; }

/* Collapsible category tree — each top-level category is a row plus a chevron
   toggle; its subcategories sit in a nested list that's hidden until expanded.
   Shared by both the checkbox filter (base shop page) and the plain-nav variant
   (single-category page) since they use the same .tb-filter-row/.tb-filter-toggle/
   .tb-filter-sublist structure underneath different link/checkbox markup. */
.tb-filter-tree .tb-filter-group { margin-bottom: 2px; }
.tb-filter-row { display: flex; align-items: center; gap: 2px; }
.tb-filter-row label, .tb-filter-row .tb-filter-navlink { flex: 1; min-width: 0; }
.tb-filter-toggle {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: var(--tb-radius);
  background: transparent; color: var(--tb-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tb-filter-toggle:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-filter-toggle__chev { transition: transform .18s; }
.tb-filter-toggle[aria-expanded="true"] .tb-filter-toggle__chev { transform: rotate(180deg); }
.tb-filter-sublist { list-style: none; margin: 2px 0 6px; padding-left: 18px; }
.tb-filter-sublist[hidden] { display: none; }

.tb-range { width: 100%; accent-color: var(--tb-primary); }
.tb-range-row { display: flex; justify-content: space-between; align-items: center; gap: var(--tb-gap-sm); margin-top: var(--tb-gap-md); font-size: 14px; color: var(--tb-muted); }
.tb-range-row span:first-child, .tb-range-row span:last-child {
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius);
  padding: 2px var(--tb-gap-sm); background: var(--tb-surface); font-variant-numeric: tabular-nums;
}
.tb-filter-actions { display: flex; flex-direction: column; gap: var(--tb-gap-sm); }

.tb-shop-main { min-width: 0; }
.tb-shop-bar {
  display: flex; flex-wrap: wrap; gap: var(--tb-gap-md);
  justify-content: space-between; align-items: center;
  padding-bottom: var(--tb-gap-sm); margin-bottom: var(--tb-gap-lg);
  border-bottom: 1px solid var(--tb-outline-variant);
}
.tb-shop-showing { margin: 0; font-size: 15px; color: var(--tb-muted); }
.tb-sort { display: flex; align-items: center; gap: var(--tb-gap-sm); font-size: 14px; color: var(--tb-muted); }
.tb-sort select {
  padding: 6px var(--tb-gap-lg) 6px var(--tb-gap-sm);
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  background: var(--tb-surface-lowest); font: 400 14px var(--tb-font); color: var(--tb-ink); cursor: pointer;
}
.tb-sort select:focus { outline: none; border-color: var(--tb-primary); box-shadow: 0 0 0 3px rgba(0,77,155,.18); }
@media (max-width: 560px) { .tb-sort span { display: none; } }

/* --------------------------------------------------------------------------
   Search type-ahead (main.js) — one row design in two places:
   the dropdown under the header field from 700px, and the full-screen search
   sheet on a phone. Rows: categories as a row of chips, then products with a
   56px picture, a two-line name, category · code, and the price.
   -------------------------------------------------------------------------- */

.tb-ac {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 60;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-xl);
  box-shadow: 0 24px 48px -16px rgba(10, 16, 28, .30), 0 4px 12px rgba(10, 16, 28, .08);
  max-height: min(70vh, 560px);
}
.tb-ac[hidden] { display: none; }
.tb-ac__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; }

.tb-ac__sec + .tb-ac__sec { margin-top: 2px; }
.tb-ac__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px 6px;
  font: 600 13px/18px var(--tb-font); letter-spacing: .04em; text-transform: uppercase; color: var(--tb-muted);
}
.tb-ac__head b { font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Category chips: one line that scrolls sideways; on the sheet's start screen they wrap. */
.tb-ac__chips {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 16px 8px; scrollbar-width: none; scroll-padding-inline: 16px;
}
.tb-ac__chips::-webkit-scrollbar { display: none; }
.tb-ac__chips--wrap { flex-wrap: wrap; overflow: visible; }
.tb-ac__chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: min(300px, 82vw);
  min-height: 44px; padding: 0 12px 0 10px;
  border: 1px solid var(--tb-outline-variant); border-radius: 999px; background: var(--tb-surface-lowest);
  font: 600 14px/18px var(--tb-font); color: var(--tb-ink); white-space: nowrap;
  transition: border-color .15s, background-color .15s;
}
.tb-ac__chip > svg { flex: none; color: var(--tb-primary); }
.tb-ac__chipname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-ac__chip small {
  flex: none; padding: 1px 8px; border-radius: 999px; background: var(--tb-surface-c);
  font: 600 13px/18px var(--tb-font); color: var(--tb-muted); font-variant-numeric: tabular-nums;
}
.tb-ac__chip:hover, .tb-ac__chip.is-active { border-color: var(--tb-primary); background: var(--tb-primary-container); color: var(--tb-on-primary-container); }
.tb-ac__chip:hover small, .tb-ac__chip.is-active small { background: var(--tb-surface-lowest); color: var(--tb-on-primary-container); }
.tb-ac__chip--all { color: var(--tb-primary); }
.tb-ac__chip--all > svg:last-child { color: var(--tb-outline); }
.tb-ac__glyph {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: -4px; border-radius: 8px; font-style: normal;
  background: color-mix(in srgb, var(--tb-primary) 8%, #fff); color: var(--tb-primary);
}
.tb-ac__glyph svg { width: 18px; height: 18px; }

/* Product rows: the whole row is the link. */
.tb-ac__row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 72px; padding: 8px 16px; color: var(--tb-ink);
}
.tb-ac__row + .tb-ac__row { border-top: 1px solid var(--tb-surface-high); }
.tb-ac__row:hover { background: var(--tb-surface-low); }
.tb-ac__row.is-active { background: var(--tb-primary-container); }
.tb-ac__row:focus-visible { outline-offset: -2px; border-radius: 0; }
.tb-ac__chip:focus-visible, .tb-ac__recq:focus-visible { outline-offset: 1px; }
.tb-ac__thumb {
  position: relative; width: 56px; height: 56px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  background: #fff; color: var(--tb-outline);
}
.tb-ac__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tb-ac__thumb.is-empty { background: var(--tb-surface-low); border-color: var(--tb-surface-high); }
.tb-ac__badge {
  position: absolute; left: 2px; top: 2px; padding: 0 4px; border-radius: 4px;
  background: var(--tb-error); color: var(--tb-on-error); font: 700 12px/16px var(--tb-font);
}
.tb-ac__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-ac__name {
  font: 600 15px/20px var(--tb-font); color: var(--tb-ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tb-ac__meta { font: 400 13px/18px var(--tb-font); color: var(--tb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ac__price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-ac__price b { font: 700 15px/20px var(--tb-font); color: var(--tb-ink); }
.tb-ac__price s { font: 400 13px/18px var(--tb-font); color: var(--tb-muted); }
.tb-ac__price.is-sale b { color: var(--tb-error); }
.tb-ac__ws { font: 400 12px/16px var(--tb-font); color: var(--tb-muted); }
.tb-ac mark, .tb-ss mark { background: color-mix(in srgb, var(--tb-primary) 16%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* "See all N products" — the real search. Light in the dropdown, a solid button on the sheet. */
.tb-ac__foot { flex: none; padding: 8px; border-top: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest); }
.tb-ac__foot[hidden] { display: none; }
.tb-ac__all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 0 16px; border: 0; border-radius: var(--tb-radius-lg); cursor: pointer;
  background: var(--tb-surface-low); color: var(--tb-primary); font: 700 15px/20px var(--tb-font);
  transition: background-color .15s;
}
.tb-ac__all span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ac__all svg { flex: none; }
.tb-ac__all:hover { background: var(--tb-primary-container); }

/* Empty, offline and error states. */
.tb-ac__state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px 18px; text-align: center; }
.tb-ac__state strong { font: 700 16px/22px var(--tb-font); color: var(--tb-ink); overflow-wrap: anywhere; }
.tb-ac__state p { margin: 0; max-width: 34ch; font: 400 14px/20px var(--tb-font); color: var(--tb-muted); }
.tb-ac__stico {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 6px;
  border-radius: 999px; background: var(--tb-primary-container); color: var(--tb-primary);
}
.tb-ac__stico--warn { background: var(--tb-error-container); color: var(--tb-on-error-container); }
.tb-ac__retry {
  margin-top: 8px; min-height: 44px; padding: 0 20px; cursor: pointer;
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg); background: var(--tb-surface-lowest);
  font: 600 14px/20px var(--tb-font); color: var(--tb-primary);
}
.tb-ac__retry:hover { border-color: var(--tb-primary); background: var(--tb-surface-low); }

/* Loading: placeholder rows the size of real ones (no jump when they arrive); a slow answer
   for a newer query shows a thin bar along the top while the last results stay. */
.tb-ac__skels { padding: 8px 0; }
.tb-ac__skel { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; min-height: 72px; padding: 8px 16px; }
.tb-ac__skel i { display: block; height: 12px; border-radius: 6px; background: var(--tb-surface-c); animation: tbSkel 1.1s ease-in-out infinite alternate; }
.tb-ac__skel > i:first-child { height: 56px; border-radius: var(--tb-radius-lg); }
.tb-ac__skel span { display: flex; flex-direction: column; gap: 8px; }
.tb-ac__skel span i:last-child { width: 55%; }
@keyframes tbSkel { from { opacity: 1; } to { opacity: .45; } }
.tb-ac.is-busy::before, .tb-ss.is-busy .tb-ss__top::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--tb-primary), transparent) 0 0 / 40% 100% no-repeat;
  animation: tbBusy 1s linear infinite;
}
.tb-ac.is-busy::before { top: 0; }
.tb-ss.is-busy .tb-ss__top::after { bottom: -1px; }
@keyframes tbBusy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.is-busy .tb-ac__list, .tb-ss.is-busy .tb-ss__list { opacity: .6; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) {
  .tb-ac__skel i, .tb-ac.is-busy::before, .tb-ss.is-busy .tb-ss__top::after { animation: none !important; }
  .tb-ac.is-busy::before, .tb-ss.is-busy .tb-ss__top::after { background: var(--tb-primary); opacity: .5; }
}

/* ── The phone search sheet ─────────────────────────────────────────────── */
.tb-ss {
  /* Above the cookie banner (.tb-cc, 9998): a first-time visitor's banner would cover the
     sticky "see all" button; it is back when the sheet closes. */
  position: fixed; left: 0; right: 0; top: 0; z-index: 10000;
  height: 100%; height: 100dvh;                 /* main.js: the visual viewport's height while open */
  display: flex; flex-direction: column;
  background: var(--tb-surface-lowest); color: var(--tb-ink);
  animation: tbSsIn .18s ease-out;
}
.tb-ss[hidden] { display: none !important; }
.tb-ss:focus { outline: none; }
@keyframes tbSsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The page behind stays where it is; the website assistant's button steps away. */
.tb-ss-open, .tb-ss-open body { overflow: hidden; }
.tb-ss-open { --cms-chat-visibility: hidden; }

.tb-ss__top {
  position: relative; flex: none; display: flex; align-items: center; gap: 4px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(4px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest);
}
.tb-ss__back {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--tb-ink); cursor: pointer;
}
.tb-ss__back:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-ss__form {
  flex: 1; min-width: 0; display: flex; height: 48px;
  border: 1.5px solid var(--tb-primary); border-radius: var(--tb-radius-lg);
  box-shadow: 0 0 0 3px var(--tb-primary-container); background: var(--tb-surface-lowest);
}
.tb-ss__form input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; outline: none; background: transparent;
  padding: 0 4px 0 14px; font: 400 16px/22px var(--tb-font); color: var(--tb-ink);   /* 16px: iOS does not zoom */
  -webkit-appearance: none; appearance: none;
}
.tb-ss__form input::placeholder { color: var(--tb-outline); }
.tb-ss__form input::-webkit-search-cancel-button, .tb-ss__form input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.tb-ss__clear {
  flex: none; width: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--tb-muted); cursor: pointer;
}
.tb-ss__clear[hidden] { display: none; }
.tb-ss__clear:hover { color: var(--tb-ink); }
.tb-ss__go {
  flex: none; width: 48px; margin: -1.5px -1.5px -1.5px 0; border: 0; cursor: pointer;
  border-radius: 0 var(--tb-radius-lg) var(--tb-radius-lg) 0;
  background: var(--tb-primary); color: var(--tb-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-ss__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px env(safe-area-inset-right, 0px) 16px env(safe-area-inset-left, 0px);
}
.tb-ss__foot {
  flex: none; padding: 10px calc(16px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest);
  box-shadow: 0 -8px 20px -12px rgba(10, 16, 28, .18);
}
.tb-ss__foot[hidden] { display: none; }
.tb-ss.is-kb .tb-ss__foot { padding-bottom: 10px; }       /* the keyboard covers the home indicator */
.tb-ss__foot .tb-ac__all { min-height: 48px; background: var(--tb-primary); color: var(--tb-on-primary); }
.tb-ss__foot .tb-ac__all:hover { background: var(--tb-primary-d); }
.tb-ss .tb-ac__row { min-height: 76px; }

/* Start screen: recent searches, then the main categories. */
.tb-ac__link {
  border: 0; background: transparent; padding: 6px 0; cursor: pointer;
  font: 600 14px/20px var(--tb-font); letter-spacing: 0; text-transform: none; color: var(--tb-primary);
}
.tb-ac__recent { list-style: none; margin: 0 0 6px; padding: 0; }
.tb-ac__recent li { display: flex; align-items: center; }
.tb-ac__recq {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 0 0 16px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font: 400 16px/22px var(--tb-font); color: var(--tb-ink);
}
.tb-ac__recq svg { flex: none; color: var(--tb-outline); }
.tb-ac__recq span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ac__recq:hover { color: var(--tb-primary); }
.tb-ac__rm {
  flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--tb-muted); cursor: pointer;
}
.tb-ac__rm:hover { color: var(--tb-error); }

/* --------------------------------------------------------------------------
   Cookie consent
   -------------------------------------------------------------------------- */

.tb-cc {
  position: fixed; left: var(--tb-gap-md); right: var(--tb-gap-md); bottom: var(--tb-gap-md);
  z-index: 9998; max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-gap-md);
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-xl);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: var(--tb-gap-md) var(--tb-gap-lg);
}
.tb-cc[hidden] { display: none; }
.tb-cc__text { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 20px; color: var(--tb-muted); }
.tb-cc__text a { color: var(--tb-primary); text-decoration: underline; }
.tb-cc__actions { display: flex; gap: var(--tb-gap-sm); flex-wrap: wrap; }
@media (max-width: 560px) {
  .tb-cc { left: var(--tb-gap-sm); right: var(--tb-gap-sm); bottom: var(--tb-gap-sm); }
  .tb-cc__actions { width: 100%; }
  .tb-cc__actions .tb-btn { flex: 1; }
}

/* Grid items default to min-width:auto, which floors a column at its content's
   min-content width — that is what made the one-column mobile cart and checkout
   wider than the viewport. Both the track (minmax(0,1fr)) and the item need it. */
.tb-cart-layout > *, .tb-checkout-layout > * { min-width: 0; }

/* The cart table keeps a 480px min-width so its columns stay readable; on a phone it
   scrolls inside its own wrapper instead of widening the page. */
.tb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .tb-cart-table { min-width: 420px; } }

/* Every one-column collapse in this stylesheet has the same failure mode: a bare `1fr`
   track plus a grid item's default min-width:auto floors the column at its content's
   min-content width. Applied to the remaining multi-column grids so a long word, a wide
   embed or a fixed-size third-party widget cannot push the page sideways. */
.tb-contact > *, .tb-split > *, .tb-grid-2 > *, .tb-form-grid > *,
.tb-shop-layout > *, .tb-footer__grid > *, .tb-pd > *, .tb-product-layout > * { min-width: 0; }

/* Cloudflare's Turnstile widget lays out at a fixed ~300px inside an iframe we don't
   control, which is wider than a 320px screen once page and card padding are taken off.
   Scale it down rather than clip it — the checkbox has to stay tappable. */
.cf-turnstile { max-width: 100%; }
@media (max-width: 380px) {
  .cf-turnstile { transform: scale(.82); transform-origin: left top; height: 56px; }
}

/* The wordmark is a wide raster (1018×133 ≈ 7.6:1), so a fixed 28px height renders it
   214px wide — more than half a phone header, and at 320px it ran straight under the
   search/cart/burger. .tb-logo is flex-shrink:0 by design (it must not squash next to
   the category menu on desktop), so on small screens the image is capped by width and
   object-fit letterboxes it rather than distorting. */
@media (max-width: 900px) {
  .tb-logo { flex-shrink: 1; min-width: 0; }
  .tb-logo img {
    height: 22px; max-width: 46vw;
    object-fit: contain; object-position: left center;
  }
}
@media (max-width: 380px) {
  .tb-logo img { height: 20px; max-width: 40vw; }
}

/* --------------------------------------------------------------------------
   Compact category rows

   The large-tile grid gives each category a full square photo, which reads well
   with four or five categories but consumed roughly a third of the homepage at
   twelve. This trades the photo down to a thumbnail and puts the name beside it,
   turning three tall rows into three short ones.
   -------------------------------------------------------------------------- */

/* Fixed four across rather than auto-fill: a wide screen was fitting five, which
   made the row read as a list of links instead of a set of departments. */
/* Four fixed columns leave the name ~150px next to an 80px thumbnail, and the
   longest subcategory needs ~170px at this size — so it was overflowing the card
   on a desktop too, just less often than on a phone. Asking for the width the row
   needs gives four columns on a wide screen and three on a narrow one. */
.tb-cat-grid--compact { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--tb-gap-md); }

.tb-cat-grid--compact .tb-cat-tile {
  flex-direction: row; align-items: center; gap: var(--tb-gap-md);
  padding: var(--tb-gap-md) var(--tb-gap-lg) var(--tb-gap-md) var(--tb-gap-md);
  border-radius: var(--tb-radius-lg);
  /* The tri-tone fills are too heavy at this size — carry the colour on a left edge
     instead, so the row stays legible and the palette still reads. */
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant);
  border-left: 3px solid currentColor;
  box-shadow: none;
}
.tb-cat-grid--compact .tb-cat-tile:hover { transform: none; box-shadow: var(--tb-sh-2); border-color: currentColor; }
.tb-cat-grid--compact .tb-cat-tile--a { color: var(--tb-primary); }
.tb-cat-grid--compact .tb-cat-tile--b { color: var(--tb-secondary); }
.tb-cat-grid--compact .tb-cat-tile--c { color: var(--tb-tertiary); }

.tb-cat-grid--compact .tb-cat-tile__img {
  width: 80px; height: 80px; aspect-ratio: auto; flex-shrink: 0;
  margin: 0; padding: 6px; border-radius: var(--tb-radius);
  background: #fff; border: 1px solid var(--tb-outline-variant);
}
.tb-cat-grid--compact .tb-cat-tile:hover .tb-cat-tile__img img { transform: none; }
.tb-cat-grid--compact .tb-cat-tile__img svg { width: 36px; height: 36px; }
/* The body has to claim the leftover width, otherwise the chevron squeezes it and
   long compounds ("Kompressorid") hyphenate mid-word. */
.tb-cat-grid--compact .tb-cat-tile__body { flex: 1; min-width: 0; padding: 0; }
.tb-cat-grid--compact .tb-cat-tile__body h3 { font-size: 18px; line-height: 24px; overflow-wrap: normal; }
.tb-cat-grid--compact .tb-cat-tile__body p  { font-size: 14px; }
.tb-cat-grid--compact .tb-cat-tile__chev { margin-right: 0; }
.tb-cat-grid--compact .tb-cat-tile__body { padding: 0; min-width: 0; }
.tb-cat-grid--compact .tb-cat-tile__body h3 {
  font-size: 18px; line-height: 23px; color: var(--tb-ink); margin-bottom: 2px;
}
.tb-cat-grid--compact .tb-cat-tile__body p { font-size: 14px; line-height: 19px; color: var(--tb-muted); opacity: 1; }
/* Two columns hold on a phone at this size — twelve categories become six short rows
   instead of twelve. Names wrap to two lines rather than truncating, so a long compound
   like "Generaatorid ja varutoide" stays readable. */
@media (max-width: 700px) {
  /* Same reasoning as the icon tiles: two fixed columns leave ~98px for the name,
     and the longest subcategory ("Tööriistakomplektid") needs 123px. It does not
     break mid-word — overflow-wrap is normal — it simply runs past the card edge
     and gets clipped, which loses the end of the name with no ellipsis to show
     for it. Letting the row ask for the width it needs gives one column on a
     phone and two or three as soon as there is room. */
  .tb-cat-grid--compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
  .tb-cat-grid--compact .tb-cat-tile { gap: var(--tb-gap-sm); padding: 6px 8px 6px 6px; }
  .tb-cat-grid--compact .tb-cat-tile__img { width: 44px; height: 44px; }
  .tb-cat-grid--compact .tb-cat-tile__body h3 {
    font-size: 13px; line-height: 16px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .tb-cat-grid--compact .tb-cat-tile__body p { font-size: 11px; line-height: 14px; }
}

/* Best sellers shown beneath a category's subcategories, standing in for the
   generic product section while a category is open. */
.tb-cat-best { margin-top: var(--tb-gap-lg); padding-top: var(--tb-gap-lg); border-top: 1px solid var(--tb-outline-variant); }
.tb-cat-best__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--tb-gap-md); margin-bottom: var(--tb-gap-md); flex-wrap: wrap;
}
.tb-cat-best__head h3 { font: 700 20px/26px var(--tb-font); color: var(--tb-ink); margin: 0; }
.tb-cat-best__more { display: flex; justify-content: center; margin-top: var(--tb-gap-lg); }
/* Full width on a phone: a centred pill is an easy tap to miss one-handed. */
@media (max-width: 560px) {
  .tb-cat-best__more { margin-top: var(--tb-gap-md); }
  .tb-cat-best__more .tb-btn { width: 100%; }
}
@media (max-width: 700px) {
  .tb-cat-best__head h3 { font-size: 17px; line-height: 22px; }
}

/* Category thumbnails in the header menu and mobile drawer — same photo-first fallback
   as the homepage tiles, so a category looks the same wherever it appears. */
.tb-catmenu__thumb {
  width: 28px; height: 28px; flex-shrink: 0; object-fit: contain;
  background: #fff; border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius);
  padding: 1px;
}
.tb-mobile-menu .tb-catmenu__thumb { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   Header layout v2 — primary nav beside the logo, categories directly under it

   Page links sit next to the logo; the category row underneath it hosts the
   "Kategooriad ▾" mega-menu toggle (.tb-catmenu, defined above) rather than a
   flat pill strip — restored per user request after the flat strip shipped.
   -------------------------------------------------------------------------- */

.tb-header-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tb-header-nav__item {
  padding: var(--tb-gap-sm) var(--tb-gap-md);
  border-radius: 999px; white-space: nowrap;
  font: 600 14px/20px var(--tb-font); letter-spacing: .05em; color: var(--tb-muted);
  transition: background-color .2s, color .2s;
}
.tb-header-nav__item:hover { background: var(--tb-surface-c); color: var(--tb-primary); }


/* Subcategory rows in the mobile drawer — indented, no thumbnail column (that's
   reserved for the top-level row so the icon still lines up with its own count). */
.tb-mobile-menu a.tb-mm-sub { font-size: 14px; color: var(--tb-muted); }
.tb-mobile-menu a.tb-mm-sub:hover { color: var(--tb-ink); }

/* "Browse deeper" row — shown under a parent category's pill nav when it has
   subcategories, so a visitor who lands on the parent can narrow straight in. */
.tb-subcat-row {
  display: flex; align-items: center; gap: var(--tb-gap-xs); flex-wrap: wrap;
  margin-top: var(--tb-gap-sm);
}
.tb-subcat-row__label { font-size: 13px; color: var(--tb-muted); margin-right: 2px; }
.tb-subcat-row .tb-cat-pill b { font-weight: 400; opacity: .7; margin-left: 2px; }
/* Subcategory names can run long (parenthetical examples like "Tarvikud (puuriotsad,
   freesiterad, lihvpaber, saeketad)") — a nowrap pill that long forces itself wider
   than a phone viewport and drags the whole page into horizontal scroll. Letting the
   text wrap inside the pill keeps it contained instead. */
.tb-subcat-row .tb-cat-pill { white-space: normal; max-width: 100%; }

/* On a category page this row wraps to one full-width pill per subcategory —
   ~340px before a single product is visible on a phone. The same subcategories
   sit in the filter panel (its nav tree auto-expands the active branch), so
   below 900px they live there instead of stacked above the grid.
   Placed after the base rules above: same specificity, so order decides. */
@media (max-width: 900px) {
  .tb-subcat-row { display: none; }
}


/* ── Private / business customer switch ──────────────────────────────────── */
.tb-custtype { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--tb-outline-variant);
  border-radius: 999px; background: var(--tb-surface-low); }
.tb-custtype__opt { position: relative; }
/* Visually hidden, not display:none — the radio must stay focusable and
   reachable by keyboard and screen reader. */
.tb-custtype__opt input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; inset: 0; cursor: pointer; }
.tb-custtype__opt span { display: block; padding: 9px 20px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--tb-muted); white-space: nowrap;
  transition: background .15s ease, color .15s ease; }
.tb-custtype__opt input:checked + span { background: var(--tb-primary); color: #fff; }
.tb-custtype__opt input:focus-visible + span { outline: 2px solid var(--tb-primary); outline-offset: 2px; }
@media (max-width: 480px) {
  .tb-custtype { display: flex; width: 100%; }
  .tb-custtype__opt { flex: 1; }
  .tb-custtype__opt span { text-align: center; padding: 10px 8px; }
}

/* ── Business (B2B) checkout fields ──────────────────────────────────────── */
.tb-business-fields { margin-top: 14px; padding: 16px; border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-sm); background: var(--tb-surface-low); }
.tb-business-fields[hidden] { display: none; }
.tb-business-note { margin: 0 0 12px; font-size: .85rem; color: var(--tb-muted); }
.tb-opt { font-weight: 400; color: var(--tb-muted); }


/* ── Team / owners ───────────────────────────────────────────────────────────
   A trust section, so it is built to read as evidence rather than decoration:
   real faces at a calm size, the role stated plainly, and a direct line to the
   person. Tokens are the template's own — no invented names. */
.tb-team__intro { max-width: 620px; margin: 0 auto var(--tb-gap-xl); text-align: center; }
.tb-team__intro .tb-eyebrow { margin-bottom: var(--tb-gap-sm); }
.tb-team__intro p { color: var(--tb-muted); margin-top: var(--tb-gap-sm); line-height: 1.7; }

/* Centred: with only two owners a left-aligned pair leaves the right half of a
   desktop page empty, which reads as a layout that lost something. */
.tb-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: var(--tb-gap-xl); justify-content: center; }

.tb-team__card { position: relative; display: flex; flex-direction: column; }

/* The photo sits in a tinted well with a hairline, so a shot taken against a
   white wall still reads as a deliberate portrait rather than a floating cutout. */
.tb-team__figure { position: relative; overflow: hidden;
  border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  background: var(--tb-surface-c); }
.tb-team__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.tb-team__card:hover .tb-team__photo { transform: scale(1.03); }

/* Empty state in the editor — dashed, obviously a slot to fill. */
.tb-team__photo--empty { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; border: 1px dashed var(--tb-outline); border-radius: var(--tb-radius-lg);
  color: var(--tb-muted); font-size: .9rem; cursor: pointer; background: var(--tb-surface-low); }
.tb-team__photo--empty:hover { border-color: var(--tb-primary); color: var(--tb-primary); }

.tb-team__body { padding-top: var(--tb-gap-md); }

/* A short rule in the brand blue ties the name back to the rest of the page. */
.tb-team__name { position: relative; font-size: 1.2rem; line-height: 1.3; margin: 0;
  padding-left: 14px; color: var(--tb-ink); }
.tb-team__name::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 3px; border-radius: 2px; background: var(--tb-primary); }

.tb-team__role { margin: 6px 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tb-primary); }

.tb-team__bio { color: var(--tb-muted); margin: var(--tb-gap-md) 0 0; line-height: 1.7; font-size: .95rem; }

.tb-team__contact { display: flex; flex-wrap: wrap; gap: var(--tb-gap-sm); margin: var(--tb-gap-md) 0 0; }
.tb-team__contact a { display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid var(--tb-outline-variant); border-radius: 999px;
  font-size: .85rem; color: var(--tb-ink); text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s; }
.tb-team__contact a:hover { border-color: var(--tb-primary); color: var(--tb-primary);
  background: var(--tb-primary-container); }

/* Registry details in small print: present for anyone who checks, quiet for
   everyone who doesn't. */
.tb-team__note { margin: var(--tb-gap-xl) auto 0; padding-top: var(--tb-gap-md);
  border-top: 1px solid var(--tb-outline-variant);
  color: var(--tb-muted); font-size: .85rem; line-height: 1.7; max-width: 720px; text-align: center; }

@media (max-width: 600px) {
  .tb-team { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tb-gap-lg); }
  .tb-team__intro, .tb-team__note { text-align: left; }
  .tb-team__photo, .tb-team__photo--empty { aspect-ratio: 1 / 1; }
  .tb-team__intro { margin-bottom: var(--tb-gap-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-team__photo { transition: none; }
  .tb-team__card:hover .tb-team__photo { transform: none; }
}


/* A third category level in the shop sidebar — indented so it reads as belonging
   to the entry above it rather than as its sibling. */
.tb-filter-sublist .tb-filter-sub--deep > label { padding-left: 18px; }
.tb-filter-sublist .tb-filter-sub--deep > label > span { opacity: .85; }

/* --------------------------------------------------------------------------
   Category grid — "tiles" layout
   A photo above a centred name, many to a row. Where the compact rows put the
   product count and a chevron beside the name, this size has room for neither:
   at ~90px across on a phone the name is the only thing worth reading, and the
   photo does the recognising. Four across on a phone, eight on a desktop, so
   the whole department list is one or two glances rather than a scroll.
   -------------------------------------------------------------------------- */

.tb-cat-grid--tiles {
  /* Seven across on desktop: the shop has 14 top-level categories, so the
     front page shows two even rows of seven instead of eight plus six. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--tb-gap-sm);
  /* .tb-cat-grid starts its tiles rather than stretching them, which leaves a
     two-line name hanging below its neighbours. Here every tile in a row is the
     same height and the name sits on a shared baseline. */
  align-items: stretch;
}
.tb-cat-grid--tiles .tb-cat-tile {
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; padding: var(--tb-gap-sm) 6px var(--tb-gap-sm);
  border-radius: var(--tb-radius-xl);
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant);
  box-shadow: none;
  text-align: center;
  /* The tri-tone rotation is carried by the hover state only — sixteen tinted
     tiles at this density read as a colour chart, not a menu. */
  color: var(--tb-ink);
}
.tb-cat-grid--tiles .tb-cat-tile:hover {
  transform: none;
  border-color: var(--tb-primary);
  box-shadow: var(--tb-sh-1);
}
.tb-cat-grid--tiles .tb-cat-tile__img {
  width: 100%; aspect-ratio: 1; max-width: 96px;
  margin: 0; padding: 0; background: none; border-radius: 0;
  flex: none;
}
.tb-cat-grid--tiles .tb-cat-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.tb-cat-grid--tiles .tb-cat-tile:hover .tb-cat-tile__img img { transform: none; }
.tb-cat-grid--tiles .tb-cat-tile__img--icon { background: none; }
.tb-cat-grid--tiles .tb-cat-tile__img--icon svg {
  width: 44%; height: 44%; margin: auto; color: var(--tb-primary); opacity: 1;
}
.tb-cat-grid--tiles .tb-cat-tile__body {
  padding: 0; min-width: 0; width: 100%;
  margin-top: auto;          /* names line up along the bottom of the row */
}
.tb-cat-grid--tiles .tb-cat-tile__body h3 {
  font-size: 14px; line-height: 18px; font-weight: 700; margin: 0;
  color: var(--tb-ink);
  /* Never split a word. Estonian category names are compounds — "Elektritarvikud",
     "vooluvarustus" — and breaking one mid-word ("padrunvõtme/d") reads as a typo
     rather than as wrapping. The column count below is what gives them room
     instead; measured against the longest name in the catalogue. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tb-cat-grid--tiles .tb-cat-tile__body p {
  margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--tb-muted); opacity: 1;
}

@media (max-width: 1100px) { .tb-cat-grid--tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .tb-cat-grid--tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* Four across on a phone, which means a quarter of the screen has to hold the
     longest category name whole. Three things make that fit rather than dropping
     a column: the gap tightens, the tile gives up its side padding, and the name
     is sized against the viewport instead of being fixed.
     The 2.6vw is not arbitrary — the widest name ("Elektritarvikud") measures
     ~7.4x its font-size, and a tile here is 25vw minus the container padding,
     gaps and border, so 2.6vw keeps it inside its tile at every width down to
     ~340px, with the clamp holding it readable at one end and sensible at the
     other. */
  .tb-cat-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .tb-cat-grid--tiles .tb-cat-tile { padding: 8px 1px; gap: 4px; }
  .tb-cat-grid--tiles .tb-cat-tile__body h3 {
    font-size: clamp(9px, 2.6vw, 13px);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .tb-cat-grid--tiles .tb-cat-tile__body p { font-size: clamp(9px, 2.3vw, 12px); }
}
/* Below ~340px a quarter of the screen cannot hold a 15-character name at any
   size worth reading, so that one case steps down rather than clipping. */
@media (max-width: 340px) {
  .tb-cat-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Rows chosen by the shop (tb-category-cards `rows`): below 1100px each group is
   its own row on a 60-column grid — tiles as wide as the longest row allows,
   shorter rows centred, a little more air between the groups than between tiles.
   Phones show the short names, on rows widened to the page's 16px edge. The
   longest, "Kompressorid" / "Käsitööriistad", is ~6.8× its font size and a
   fifth of the row holds 20vw − 10px of text, so 2.88vw − 1.44px keeps it
   whole from 360px up; below that a row wraps to three across. The desktop grid above is untouched: `order` and the spans only
   apply here. */
.tb-cat-tile__short { display: none; }
@media (max-width: 1100px) {
  .tb-cat-grid--tiles.tb-cat-grid--rows { grid-template-columns: repeat(60, minmax(0, 1fr)); row-gap: 10px; }
  .tb-cat-grid--rows > .tb-cat-tile { order: var(--ord, 99); grid-column: var(--start, auto) / span var(--span, 12); }
}
@media (max-width: 700px) {
  .tb-cat-grid--tiles.tb-cat-grid--rows { column-gap: 2px; row-gap: 8px; margin-inline: -8px; }
  .tb-cat-grid--tiles.tb-cat-grid--rows .tb-cat-tile { padding: 8px 0; }
  .tb-cat-grid--rows .tb-cat-tile__name { display: none; }
  .tb-cat-grid--rows .tb-cat-tile__short { display: inline; }
  .tb-cat-grid--tiles.tb-cat-grid--rows .tb-cat-tile__body h3 { font-size: clamp(9px, calc(2.88vw - 1.44px), 12px); }
}
@media (max-width: 359px) {
  .tb-cat-grid--rows > .tb-cat-tile { grid-column: auto / span 20; }
  .tb-cat-grid--rows > .tb-cat-tile--rowstart { grid-column-start: 1; }
  .tb-cat-grid--tiles.tb-cat-grid--rows .tb-cat-tile__body h3 { font-size: 12px; }
}

/* Subcategory drill-down, when it uses the tiles look too: subcategory names
   run noticeably longer than top-level ones ("Klemmid, ühendused ja
   termokahanevad torud" vs "Elektritarvikud" — the column count above is
   measured against the top level's longest name, not this one) — one fewer
   column at every width gives them the extra room, and a taller clamp lets a
   genuinely long name take a fourth line instead of losing its end. */
.tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles .tb-cat-tile__body h3 { -webkit-line-clamp: 4; line-clamp: 4; }
@media (max-width: 1100px) { .tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px)  { .tb-cat-view:not([data-view="root"]) .tb-cat-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The UA's [hidden] { display: none } loses to .tb-cat-tile's own display:flex,
   so tiles held back by the limit have to be hidden explicitly. */
.tb-cat-tile[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Banner carousel (tb-banner-slider)
   Full-bleed artwork at the top of the homepage. The headline is inside the
   image, so the ratio matters more than usual: on a phone the whole banner is
   shown uncropped, and on wider screens it is cropped from the centre, where
   the artwork keeps its text.
   -------------------------------------------------------------------------- */

.tb-banner { position: relative; background: var(--tb-ink); }
.tb-banner__viewport { position: relative; overflow: hidden; }
.tb-banner__track {
  display: flex;
  will-change: transform;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.tb-banner__slide {
  flex: 0 0 100%; min-width: 0;
  display: block; position: relative; text-decoration: none;
  /* Phone: the banner is shown whole. Cropping here would cut into the headline,
     which on these banners sits in the left third. */
  aspect-ratio: 3 / 2;
}
.tb-banner__slide picture,
.tb-banner__slide img {
  display: block; width: 100%; height: 100%;
}
.tb-banner__slide img { object-fit: cover; object-position: 50% 50%; }   /* per-slide override inline */
@media (prefers-reduced-motion: reduce) { .tb-banner__track { transition: none; } }

/* Above the phone breakpoint the wide artwork is shown at its own proportions —
   the block measures the first banner and passes it in as --tb-banner-ratio — so
   nothing is cropped and the height follows whatever was uploaded. */
@media (min-width: 701px) {
  .tb-banner__slide { aspect-ratio: var(--tb-banner-ratio, 2.5); }
}

/* --- Arrows: pointer devices only ---------------------------------------- */
.tb-banner__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; display: none;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9); color: var(--tb-ink);
  border: 0; cursor: pointer; box-shadow: var(--tb-sh-2);
  transition: background .2s, transform .2s;
}
.tb-banner__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.tb-banner__arrow--prev { left: var(--tb-gap-md); }
.tb-banner__arrow--next { right: var(--tb-gap-md); }
@media (hover: hover) and (min-width: 860px) { .tb-banner__arrow { display: flex; } }

/* --- Dots ----------------------------------------------------------------- */
.tb-banner__dots {
  position: absolute; left: 0; right: 0; bottom: var(--tb-gap-md);
  z-index: 2; display: flex; justify-content: center; gap: 8px;
}
.tb-banner__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: width .3s, background .3s;
}
.tb-banner__dot:hover { background: rgba(255, 255, 255, .75); }
.tb-banner__dot.is-active { width: 26px; background: #fff; }
.tb-banner__dot:focus-visible,
.tb-banner__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Empty state (editor only) -------------------------------------------- */
.tb-banner--empty { aspect-ratio: 21 / 9; display: grid; place-items: center; }
.tb-banner__placeholder { text-align: center; color: rgba(255, 255, 255, .7); }
.tb-banner__placeholder p { margin: var(--tb-gap-sm) 0 0; font-size: 14px; }

/* --------------------------------------------------------------------------
   Shop filters — price range
   Two editable bounds rather than a slider with read-only labels beside it.
   The pair is sized as one control: equal halves either side of a dash, so the
   field widths do not shift as the numbers get longer.
   -------------------------------------------------------------------------- */

.tb-price-range { display: flex; align-items: center; gap: var(--tb-gap-sm); }
.tb-price-field {
  flex: 1 1 0; min-width: 0;                 /* equal halves, and shrinkable */
  display: flex; align-items: center; gap: 5px;
  padding: 9px 11px;
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg);
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.tb-price-field:hover { border-color: var(--tb-outline); }
.tb-price-field:focus-within {
  border-color: var(--tb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-primary) 15%, transparent);
}
.tb-price-field__cur { flex: none; font-size: 14px; color: var(--tb-muted); }
.tb-price-field input {
  width: 100%; min-width: 0;
  border: 0; background: none; padding: 0;
  font: 600 15px/22px var(--tb-font); color: var(--tb-ink);
}
.tb-price-field input:focus { outline: none; }
.tb-price-field input::placeholder { color: var(--tb-outline); font-weight: 500; }
/* Spinners would eat a third of a field this narrow and make the two halves
   different widths the moment one is hovered. */
.tb-price-field input::-webkit-outer-spin-button,
.tb-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-price-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.tb-price-range__sep { flex: none; color: var(--tb-muted); font-size: 15px; }

.tb-filter-card .tb-range { margin-top: var(--tb-gap-md); }

/* Two-handle price track.
   There is no native dual range, so two range inputs are stacked on the same
   track. The inputs themselves are click-through — only their thumbs accept
   input — which is what allows them to overlap without the upper one
   swallowing every press meant for the lower. */
.tb-dual-range {
  position: relative; height: 26px; margin-top: var(--tb-gap-md);
  cursor: pointer; touch-action: none;   /* the drag must not scroll the sheet */
}
.tb-dual-range__track {
  position: absolute; left: 9px; right: 9px; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 999px; background: var(--tb-surface-highest);
}
.tb-dual-range__fill {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--tb-primary);
}
.tb-dual-range__input {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: none; border: 0;
  -webkit-appearance: none; appearance: none;
  pointer-events: none;                 /* the container owns the pointer */
}
.tb-dual-range__input:focus { outline: none; }
.tb-dual-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tb-surface-lowest);
  border: 2px solid var(--tb-primary);
  box-shadow: var(--tb-sh-1);
  cursor: grab;
  transition: box-shadow .15s, transform .15s;
}
.tb-dual-range__input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.tb-dual-range__input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tb-surface-lowest);
  border: 2px solid var(--tb-primary);
  box-shadow: var(--tb-sh-1);
  cursor: grab;
}
.tb-dual-range__input::-moz-range-track { background: none; border: 0; }
.tb-dual-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-primary) 25%, transparent);
}
.tb-dual-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-primary) 25%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .tb-dual-range__input::-webkit-slider-thumb { transition: none; }
  .tb-dual-range__input::-webkit-slider-thumb:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Checkout — address autocomplete (Maa-amet In-ADS)
   -------------------------------------------------------------------------- */

.tb-addr-ac { position: relative; }
.tb-addr-ac__hint {
  margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--tb-muted);
}
.tb-addr-ac__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 292px; overflow-y: auto;
  background: var(--tb-surface-lowest);
  border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-sh-3);
}
.tb-addr-ac__list[hidden] { display: none; }
.tb-addr-ac__list li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 11px; border-radius: var(--tb-radius);
  cursor: pointer;
}
.tb-addr-ac__list li:hover,
.tb-addr-ac__list li.is-active { background: var(--tb-primary-container); }
.tb-addr-ac__street { font: 600 15px/21px var(--tb-font); color: var(--tb-ink); }
.tb-addr-ac__where  { font-size: 13px; line-height: 18px; color: var(--tb-muted); }

/* The list overlays the two fields below it, so on a phone — where the sheet is
   short and the keyboard eats half the screen — keep it from covering
   everything at once. */
@media (max-width: 700px) { .tb-addr-ac__list { max-height: 210px; } }

/* ── Blog — minimal, editorial ───────────────────────────────────────────────
   Deliberately its own visual register from the shop: no card shadows, no
   filled pill badges, no lift-on-hover. Hairlines and type do the work; the
   only colour is the one link/accent colour, used sparingly. */

.tb-blog-head { max-width: var(--tb-container); margin: 0 auto; padding: clamp(32px,5vw,64px) var(--tb-gap-lg) var(--tb-gap-lg); }
.tb-blog-head .tb-breadcrumb { margin-bottom: var(--tb-gap-lg); }
.tb-blog-head h1 { font-size: clamp(1.9rem,4vw,2.5rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--tb-ink); }
.tb-blog-head p { margin: var(--tb-gap-sm) 0 0; color: var(--tb-muted); font-size: 15px; line-height: 1.5; }

.tb-blog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--tb-gap-lg); }
.tb-blog-filters a {
  font-size: 13px; font-weight: 700; color: var(--tb-muted);
  padding: 8px 16px; border-radius: 999px;
  background: var(--tb-surface-low); border: 1.5px solid var(--tb-outline-variant);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.tb-blog-filters a:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-blog-filters a.active { color: var(--tb-on-primary); background: var(--tb-primary); border-color: var(--tb-primary); }

.tb-post-list { max-width: 760px; margin: 0 auto; padding: 0 var(--tb-gap-md) 48px; }
.tb-post-row {
  display: flex; align-items: flex-start; gap: var(--tb-gap-lg);
  padding: var(--tb-gap-lg) 0; border-top: 1px solid var(--tb-outline-variant);
}
.tb-post-list > .tb-post-row:first-child { border-top: none; }
.tb-post-row__img { flex-shrink: 0; width: 112px; aspect-ratio: 1/1; border-radius: var(--tb-radius-lg); overflow: hidden; background: var(--tb-surface-low); }
/* Product photography here is whatever aspect ratio it was shot at — cover
   cropped tools off at the edges. Contain always shows the whole picture. */
.tb-post-row__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s ease; }
.tb-post-row:hover .tb-post-row__img img { transform: scale(1.04); }
.tb-post-row__body { flex: 1; min-width: 0; }
.tb-post-row__cat { display: block; font: 700 11px/14px var(--tb-font); text-transform: uppercase; letter-spacing: .07em; color: var(--tb-primary); margin-bottom: 6px; }
.tb-post-row__title { display: block; font: 700 18px/25px var(--tb-font); color: var(--tb-ink); margin-bottom: 6px; }
.tb-post-row:hover .tb-post-row__title { color: var(--tb-primary); }
.tb-post-row__excerpt { color: var(--tb-muted); font-size: 14px; line-height: 21px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-post-row__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tb-outline); }
.tb-post-row__author { font-weight: 600; color: var(--tb-muted); }

/* First post on the unfiltered feed reads as the lead story — larger image,
   larger title — the rest stay compact. Kept off filtered/paginated views so
   the list never looks arbitrarily lopsided once posts are narrowed down. */
.tb-post-row--featured { align-items: stretch; gap: var(--tb-gap-xl); }
.tb-post-row--featured .tb-post-row__img { width: 240px; aspect-ratio: 4/3; }
.tb-post-row--featured .tb-post-row__img img { padding: 18px; }
.tb-post-row--featured .tb-post-row__title { font-size: 24px; line-height: 31px; }
.tb-post-row--featured .tb-post-row__excerpt { -webkit-line-clamp: 3; font-size: 15px; line-height: 23px; }
@media (max-width: 640px) {
  .tb-post-row--featured { flex-direction: column; gap: var(--tb-gap-md); }
  .tb-post-row--featured .tb-post-row__img { width: 100%; aspect-ratio: 16/9; }
}
@media (max-width: 480px) {
  .tb-post-row { gap: var(--tb-gap-md); }
  .tb-post-row__img { width: 76px; }
  .tb-post-row__img img { padding: 6px; }
  .tb-post-row__title { font-size: 16px; line-height: 22px; }
  .tb-post-row__excerpt { display: none; }
}

/* Editorial grid: photo-led cards, three across, no boxes or borders — the
   list layout above is kept for the author archive, which still wants a
   compact scan-down-the-page format. */
.tb-post-grid {
  max-width: var(--tb-container); margin: 0 auto; padding: 0 var(--tb-gap-lg) 64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tb-gap-xl) var(--tb-gap-lg);
}
@media (max-width: 900px) { .tb-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tb-post-grid { grid-template-columns: 1fr; gap: var(--tb-gap-lg); } }

.tb-post-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--tb-surface); border: 1.5px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-xl); overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,10,10,.04);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tb-post-card:hover {
  border-color: var(--tb-primary); transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10,10,10,.08);
}
.tb-post-card__img {
  position: relative; display: block; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; background: var(--tb-surface-low);
}
/* Featured images are catalogue photos — square product shots on white,
   not landscape editorial photography — so cover-cropping them zoomed into
   a corner and cut products in half. Matching the single-post hero's own
   treatment (object-fit: contain, padded, on the same neutral surface)
   shows the whole photo and keeps every card visually consistent regardless
   of the source image's aspect ratio. */
.tb-post-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.tb-post-card__cat {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font: 800 11px/14px var(--tb-font); text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(10,10,10,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.tb-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.tb-post-card__title { font: 700 20px/27px var(--tb-font); color: var(--tb-ink); margin-bottom: 10px; text-wrap: balance; }
.tb-post-card:hover .tb-post-card__title { color: var(--tb-primary); }
.tb-post-card__excerpt {
  color: var(--tb-muted); font-size: 15px; line-height: 23px; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-post-card__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px;
  font: 700 14px/1 var(--tb-font); color: var(--tb-primary); width: fit-content;
}
.tb-post-card__more svg { transition: transform .2s ease; }
.tb-post-card__more:hover { text-decoration: underline; }
.tb-post-card__more:hover svg { transform: translateX(2px); }

.tb-post-hero { max-width: 820px; margin: 0 auto; padding: clamp(28px,4vw,44px) var(--tb-gap-md) 0; }
.tb-post-hero h1 { font-size: clamp(1.6rem,3.6vw,2.2rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--tb-ink); margin-top: var(--tb-gap-sm); text-wrap: balance; }
.tb-post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tb-outline); font-size: 14px; margin-top: var(--tb-gap-md); padding-bottom: var(--tb-gap-lg); border-bottom: 1px solid var(--tb-outline-variant); }
.tb-post-hero__meta strong { color: var(--tb-muted); font-weight: 600; }

/* Quiet info row (not a link itself) that hands off to a real .tb-btn — the
   same button language used everywhere else on the site, so it reads as
   unambiguously clickable instead of blending into body copy. */
.tb-post-shopcta { max-width: 820px; margin: var(--tb-gap-lg) auto 0; padding: 0 var(--tb-gap-md); }
.tb-post-shopcta__row {
  display: flex; align-items: center; gap: var(--tb-gap-md); flex-wrap: wrap;
  background: var(--tb-surface-low); border-radius: var(--tb-radius-lg);
  padding: var(--tb-gap-md);
}
.tb-post-shopcta__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tb-surface-lowest); color: var(--tb-primary); box-shadow: var(--tb-sh-1);
}
.tb-post-shopcta__text { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.tb-post-shopcta__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tb-outline); }
.tb-post-shopcta__cat { font-size: 15px; font-weight: 700; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-post-shopcta__row .tb-btn { flex-shrink: 0; }

.tb-post-featured-img { max-width: 820px; margin: var(--tb-gap-lg) auto 0; padding: 0 var(--tb-gap-md); }
.tb-post-featured-img__frame { height: clamp(240px, 40vw, 420px); border-radius: var(--tb-radius-lg); background: var(--tb-surface-low); overflow: hidden; }
.tb-post-featured-img img { width: 100%; height: 100%; display: block; object-fit: contain; padding: var(--tb-gap-lg); }
@media (max-width: 480px) { .tb-post-featured-img img { padding: var(--tb-gap-md); } }

.tb-post-body { max-width: 820px; margin: 0 auto; padding: var(--tb-gap-xl) var(--tb-gap-md) 96px; }
.tb-post-back { display: inline-flex; align-items: center; gap: 6px; color: var(--tb-muted); font-weight: 600; font-size: 14px; margin-bottom: var(--tb-gap-xl); }
.tb-post-back:hover { color: var(--tb-primary); }
.tb-post-content { font-size: 17px; line-height: 1.75; color: var(--tb-ink); }
.tb-post-content h2, .tb-post-content h3, .tb-post-content h4 { font-weight: 700; color: var(--tb-ink); letter-spacing: -.01em; text-wrap: balance; }
.tb-post-content h2 { font-size: 1.4rem; margin: 1.5em 0 .55em; }
.tb-post-content h3 { font-size: 1.15rem; margin: 1.3em 0 .45em; }
.tb-post-content h2:first-child, .tb-post-content h3:first-child { margin-top: 0; }
.tb-post-content p { margin-bottom: 1.15em; }
.tb-post-content a { color: var(--tb-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tb-post-content ul, .tb-post-content ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.tb-post-content li { margin-bottom: .4em; line-height: 1.65; }
.tb-post-content li:last-child { margin-bottom: 0; }
.tb-post-content blockquote { border-left: 2px solid var(--tb-outline-variant); padding: 2px 0 2px 20px; margin: 1.5em 0; font-style: italic; color: var(--tb-muted); }
.tb-post-content img { border-radius: var(--tb-radius); max-width: 100%; height: auto; margin: 1.5em 0; display: block; }
.tb-post-content strong { font-weight: 700; color: var(--tb-ink); }

.tb-post-related { margin-top: var(--tb-gap-xl); border-top: 1px solid var(--tb-outline-variant); padding-top: var(--tb-gap-md); }
.tb-post-related__heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tb-outline); margin-bottom: var(--tb-gap-sm); }
.tb-post-related__row { display: flex; align-items: center; gap: var(--tb-gap-md); padding: var(--tb-gap-sm) 0; }
.tb-post-related__row:not(:last-child) { border-bottom: 1px solid var(--tb-outline-variant); }
.tb-post-related__img { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--tb-radius); overflow: hidden; background: var(--tb-surface-low); }
.tb-post-related__img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.tb-post-related__title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--tb-ink); }
.tb-post-related__row:hover .tb-post-related__title { color: var(--tb-primary); }
.tb-post-related__date { flex-shrink: 0; font-size: 12px; color: var(--tb-outline); }

.tb-post-author { display: flex; align-items: center; gap: var(--tb-gap-md); }
.tb-post-author__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tb-post-author__avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--tb-surface-c); color: var(--tb-ink); font-weight: 700; font-size: 18px; }

/* ==========================================================================
   Store header (partials/site-header.php) — 2026-09 storefront redesign
   top  logo · page links · phone and e-mail      scrolls away
   bar  categories · search · tracking · cart     sticky (main.js sets `top`
        to minus the top row's height, so only the bar stays)
   ========================================================================== */

:root {
  --tb-side-w: 272px;                 /* category column = categories button */
  --tb-hero-dark: color-mix(in srgb, var(--tb-primary) 16%, #04070d);
  --tb-hero-dark-2: color-mix(in srgb, var(--tb-primary) 30%, #060a12);
  --tb-hero-accent: color-mix(in srgb, var(--tb-primary) 55%, #9cc8ff);
}
@media (max-width: 1279px) { :root { --tb-side-w: 248px; } }

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

.tb-header--store { position: sticky; top: 0; z-index: 50; background: var(--tb-surface-lowest); }
/* On a block page the header sits inside its block's <section>, which is only
   as tall as the header, so it has nothing to stick within: the section sticks. */
.cms-block--tb-navbar { position: sticky; top: 0; z-index: 50; }

/* ── Top row ─────────────────────────────────────────────────────────────── */
.tb-top { border-bottom: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest); }
.tb-top__inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.tb-logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--tb-ink); }
/* A fixed box, not the image's own width: the links beside it must not move
   when the logo arrives. contain keeps any logo's proportions inside it. */
.tb-logo img { width: 232px; height: 30px; object-fit: contain; object-position: left center; }
.tb-header-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tb-header-nav__item {
  padding: 8px 12px; border-radius: var(--tb-radius-lg); white-space: nowrap;
  font: 600 14px/20px var(--tb-font); letter-spacing: .02em; color: var(--tb-ink);
  transition: background-color .15s, color .15s;
}
.tb-header-nav__item:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-top__contact { margin-left: auto; display: flex; align-items: center; gap: 22px; min-width: 0; }
.tb-top__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px;
  font: 600 14px/20px var(--tb-font); color: var(--tb-ink);
}
.tb-top__link svg { color: var(--tb-primary); flex: none; }
.tb-top__link:hover span { color: var(--tb-primary); text-decoration: underline; text-underline-offset: 3px; }
.tb-top__note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tb-muted); white-space: nowrap; }
.tb-top__note svg { color: var(--tb-primary); flex: none; }
.tb-social--nav { gap: 0; }
/* Customer account (flag customer_accounts): the last item of the top row; below 900px it leaves the header and is the
   first item of the menu and of the categories drawer, so the bar is exactly as without the flag. */
.tb-top__link--account { padding: 0 2px; }
.tb-top__link--account.is-compact { padding: 0 4px; }
.tb-top__link--account.is-compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-catmenu__account { display: none; }

/* ── Sticky bar ──────────────────────────────────────────────────────────── */
.tb-bar { background: var(--tb-surface-lowest); border-bottom: 1px solid var(--tb-outline-variant); }
.tb-bar__inner { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.tb-bar__logo { display: none; flex: none; }
.tb-bar__logo img { width: 148px; height: 20px; object-fit: contain; object-position: left center; }
.tb-header--store.is-stuck .tb-bar { box-shadow: 0 6px 16px rgba(10, 16, 28, .08); }

.tb-catmenu { position: relative; flex: none; }
.tb-catbtn {
  display: flex; align-items: center; gap: 12px;
  width: var(--tb-side-w); height: 48px; padding: 0 14px 0 16px;
  border: 0; border-radius: var(--tb-radius-lg); cursor: pointer;
  background: var(--tb-primary); color: var(--tb-on-primary);
  font: 700 16px/1 var(--tb-font); letter-spacing: .01em; text-align: left;
  transition: background-color .15s;
}
.tb-catbtn:hover, .tb-catbtn[aria-expanded="true"] { background: var(--tb-primary-d); }
.tb-catbtn .tb-catmenu__chev { margin-left: auto; transition: transform .2s; }
.tb-catbtn__grid, .tb-chip__grid { display: none; }
.tb-catbtn[aria-expanded="true"] .tb-catmenu__chev { transform: rotate(180deg); }
.tb-catbtn:focus-visible { outline: 3px solid var(--tb-primary-fixed-dim); outline-offset: 2px; }

.tb-search {
  position: relative; flex: 1; min-width: 0; display: flex; height: 48px;
  border: 1.5px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  background: var(--tb-surface-lowest); transition: border-color .15s, box-shadow .15s;
}
.tb-search:focus-within { border-color: var(--tb-primary); box-shadow: 0 0 0 3px var(--tb-primary-container); }
.tb-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  padding: 0 16px; font: 400 15px/20px var(--tb-font); color: var(--tb-ink);
}
.tb-search input::placeholder { color: var(--tb-outline); }
.tb-search__go {
  flex: none; width: 60px; margin: -1.5px -1.5px -1.5px 0; border: 0; cursor: pointer;
  border-radius: 0 var(--tb-radius-lg) var(--tb-radius-lg) 0;
  background: var(--tb-primary); color: var(--tb-on-primary);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s;
}
.tb-search__go:hover { background: var(--tb-primary-d); }
.tb-search .tb-ac { top: calc(100% + 8px); }

.tb-bar__action {
  position: relative; display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 48px; padding: 0 10px; border-radius: var(--tb-radius-lg);
  font: 600 14px/18px var(--tb-font); color: var(--tb-ink); white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tb-bar__action svg { color: var(--tb-ink); }
.tb-bar__action:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-bar__action:hover svg { color: var(--tb-primary); }
.tb-bar__lang { display: flex; align-items: center; flex: none; }
.tb-bar__icon { position: relative; display: inline-flex; }
.tb-cart-count {
  position: absolute; top: -8px; right: -10px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tb-primary); color: var(--tb-on-primary);
  border: 2px solid var(--tb-surface-lowest); border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
}

/* ── Category menu: a dropdown under the button on a desktop … ────────────── */
.tb-catmenu__panel { top: calc(100% + 10px); width: 720px; }
.tb-catmenu__drawerhead { display: none; }

/* … a drawer from the left below 1100px (tablets, phones). */
.tb-drawer-backdrop {
  position: fixed; inset: 0; z-index: 65; background: rgba(8, 12, 20, .5);
  animation: tbFade .18s ease-out;
}
.tb-drawer-backdrop[hidden] { display: none; }
@keyframes tbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbSlideIn { from { transform: translateX(-24px); opacity: .6; } to { transform: none; opacity: 1; } }

.tb-mobile-menu {
  position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(380px, 88vw);
  display: none; flex-direction: column; gap: 2px; overflow-y: auto;
  padding: 16px 20px 28px; background: var(--tb-surface-lowest);
  box-shadow: 20px 0 50px rgba(0, 0, 0, .2); animation: tbSlideIn .2s ease-out;
}
.tb-mobile-menu.open { display: flex; }
.tb-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tb-mobile-menu__head .tb-logo img { width: 180px; height: 24px; }
.tb-mobile-menu > a, .tb-mobile-menu__contact a {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  font: 600 16px/22px var(--tb-font); color: var(--tb-ink);
  border-bottom: 1px solid var(--tb-outline-variant);
}
.tb-mobile-menu > a svg, .tb-mobile-menu__contact a svg { color: var(--tb-primary); flex: none; }
.tb-mobile-menu__cats {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-bottom: 8px;
  padding: 0 14px; border: 0; border-radius: var(--tb-radius-lg); cursor: pointer;
  background: var(--tb-primary); color: var(--tb-on-primary); font: 700 16px/1 var(--tb-font);
}
.tb-mobile-menu__cats svg:last-child { margin-left: auto; }
.tb-mobile-menu > a + .tb-mobile-menu__cats { margin-top: 12px; }   /* the account link (customer_accounts) above it */
.tb-mobile-menu__contact { margin-top: 16px; }
.tb-mobile-menu__contact a { font-weight: 500; font-size: 15px; }

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .tb-burger { display: none; }
  .tb-header--store.is-stuck .tb-bar__logo { display: block; }
}
@media (max-width: 1279px) {
  .tb-top__note, .tb-social--nav { display: none; }
  .tb-top__inner { gap: 20px; }
  .tb-bar__action--status .tb-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1099px) {
  .tb-burger { display: flex; margin-left: -8px; }
  .tb-header-nav { display: none; }
  .tb-top__inner { gap: 8px; min-height: 60px; }
  .tb-logo img { width: 200px; height: 26px; }
  .tb-catbtn { width: auto; }
  .tb-catbtn__menu, .tb-chip__menu { display: none; }
  .tb-catbtn__grid, .tb-chip__grid { display: inline-flex; }
  .tb-catmenu__panel {
    position: fixed; inset: 0 auto 0 0; top: 0; z-index: 70;
    width: min(420px, 92vw); max-width: none; height: 100%; height: 100dvh;
    border-radius: 0; border: 0; padding: 16px 16px 28px; overflow-y: auto;
    animation: tbSlideIn .2s ease-out;
  }
  .tb-catmenu__drawerhead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; font: 700 18px/24px var(--tb-font);
  }
  .tb-catmenu__grid { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .tb-catmenu__item, .tb-catmenu__sub, .tb-catmenu__all, .tb-catmenu__back { min-height: 48px; }
  .tb-catmenu__account {
    display: flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: var(--tb-gap-sm);
    padding: 0 var(--tb-gap-md); border-radius: var(--tb-radius-lg); background: var(--tb-surface-low);
    font: 600 16px/22px var(--tb-font); color: var(--tb-ink);
  }
  .tb-catmenu__account svg { flex: none; color: var(--tb-primary); }
  .tb-catmenu__account:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
}
@media (max-width: 899px) {
  .tb-top__link--mail { display: none; }
  .tb-top__link--account { display: none; }
  .tb-bar__action--status { display: none; }
  /* The cart becomes an icon (with its count) so the search keeps its width. */
  .tb-cart-btn .tb-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-bar__action.tb-cart-btn { padding: 0 10px; margin-right: -10px; }
}
@media (max-width: 699px) {
  .tb-top__inner { min-height: 56px; }
  .tb-logo img { width: 168px; height: 22px; }
  .tb-top__link--phone span { display: none; }
  .tb-top__link--phone {
    width: 44px; height: 44px; justify-content: center; margin-right: -8px;
    border-radius: 999px;
  }
  .tb-bar__inner { gap: 8px; min-height: 60px; }
  .tb-catbtn { width: 48px; height: 44px; padding: 0; justify-content: center; }
  .tb-catbtn .tb-catmenu__chev { display: none; }
  .tb-catbtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-search { height: 44px; }
  .tb-search input { padding: 0 12px; font-size: 16px; }   /* 16px: iOS does not zoom in on focus */
  .tb-search__go { width: 48px; }
  .tb-bar__action.tb-cart-btn { padding: 0 10px; margin-right: -10px; min-height: 44px; }
}

/* ==========================================================================
   Store hero (blocks/tb-store-hero)
   ========================================================================== */

.tb-shero { background: var(--tb-surface-low); padding: 20px 0 24px; }
.tb-shero__grid {
  position: relative;               /* the flyouts are placed against it */
  display: grid; grid-template-columns: var(--tb-side-w) minmax(0, 1fr); gap: 20px;
}
.tb-shero__grid--nocats { grid-template-columns: minmax(0, 1fr); }

/* ── Category column ─────────────────────────────────────────────────────── */
.tb-shero__cats {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-xl); overflow: hidden;
}
.tb-shero__catlist { list-style: none; margin: 0; padding: 6px 0; display: flex; flex-direction: column; flex: 1; }
.tb-shero__cat { position: static; display: flex; align-items: stretch; flex: 1 1 0; min-height: 40px; }
.tb-shero__cat + .tb-shero__cat { border-top: 1px solid var(--tb-surface-high); }
.tb-shero__catlink {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 6px 4px 6px 12px; color: var(--tb-ink);
  font: 600 14px/18px var(--tb-font); letter-spacing: .005em;
}
.tb-shero__catlink svg { flex: none; color: var(--tb-primary); }
.tb-shero__catlink span { min-width: 0; overflow-wrap: break-word; }
.tb-shero__catmore {
  flex: none; width: 34px; border: 0; padding: 0; background: transparent; cursor: pointer;
  color: var(--tb-outline); display: inline-flex; align-items: center; justify-content: center;
}
.tb-shero__cat:hover, .tb-shero__cat.is-open { background: var(--tb-primary-container); }
.tb-shero__cat:hover .tb-shero__catlink, .tb-shero__cat.is-open .tb-shero__catlink { color: var(--tb-on-primary-container); }
.tb-shero__cat:hover .tb-shero__catmore, .tb-shero__cat.is-open .tb-shero__catmore { color: var(--tb-primary); }
.tb-shero__catlink:focus-visible, .tb-shero__catmore:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: -3px; }
/* The category drawings (tb_cat_glyph) sit on a pale tile, here and in the
   categories menu; the tile turns white on the row's hover tint. */
.tb-shero__caticon, .tb-catmenu__item .tb-catmenu__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; font-style: normal;
  background: color-mix(in srgb, var(--tb-primary) 8%, #fff); color: var(--tb-primary);
  transition: background-color .15s;
}
.tb-catmenu__item .tb-catmenu__icon { width: 34px; height: 34px; }
.tb-shero__cat:hover .tb-shero__caticon, .tb-shero__cat.is-open .tb-shero__caticon,
.tb-catmenu__item:hover .tb-catmenu__icon { background: #fff; }
.tb-shero__all {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px; border-top: 1px solid var(--tb-outline-variant);
  font: 700 14px/18px var(--tb-font); color: var(--tb-primary); background: var(--tb-surface-lowest);
}
.tb-shero__all small { font-weight: 500; color: var(--tb-muted); font-size: 13px; }
.tb-shero__all:hover { background: var(--tb-surface-c); }
.tb-shero__all:hover svg { transform: translateX(3px); }
.tb-shero__all svg { transition: transform .15s; }

/* Subcategory flyout: over the campaign area, the height of the whole hero. */
.tb-shero__fly {
  position: absolute; z-index: 20; top: 0; bottom: 0; right: 0;
  left: calc(var(--tb-side-w) + 12px);
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto 1fr;
  column-gap: 28px; padding: 24px 28px; overflow: auto;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  border-radius: var(--tb-radius-xl); box-shadow: 0 24px 50px rgba(10, 16, 28, .18);
  animation: tbFade .12s ease-out;
}
.tb-shero__fly[hidden] { display: none; }
.tb-shero__flyhead {
  grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--tb-outline-variant);
}
.tb-shero__flytitle { margin: 0; font: 800 22px/28px var(--tb-font); letter-spacing: -.01em; color: var(--tb-ink); }
.tb-shero__flylist {
  list-style: none; margin: 0; padding: 0; align-content: start;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 16px;
}
.tb-shero__flylist a {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 8px; border-radius: var(--tb-radius);
  font-size: 14px; line-height: 19px; color: var(--tb-ink);
}
.tb-shero__flylist a span { min-width: 0; overflow-wrap: break-word; }
.tb-shero__flylist a i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--tb-outline); font-variant-numeric: tabular-nums; }
.tb-shero__flylist a:hover { background: var(--tb-surface-c); color: var(--tb-primary); }
.tb-shero__flyimg { align-self: end; width: 200px; height: 200px; object-fit: contain; }

/* ── Campaign carousel ───────────────────────────────────────────────────── */
.tb-shero__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tb-shero__slider {
  position: relative; border-radius: var(--tb-radius-xl); overflow: hidden;
  touch-action: pan-y pinch-zoom;   /* a sideways swipe is ours (main.js), not the browser's back gesture */
  background: var(--tb-hero-dark); color: #fff;
}
.tb-shero__track { display: grid; }
.tb-shero__slide {
  grid-area: 1 / 1; position: relative; min-height: 400px;
  display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;
  --tone-bg: var(--tb-hero-dark);
  background: linear-gradient(115deg, var(--tb-hero-dark) 0%, var(--tb-hero-dark) 45%, var(--tb-hero-dark-2) 100%);
}
.tb-shero__slide.is-active { opacity: 1; visibility: visible; }
.tb-shero__slide.tone-brand { --tone-bg: var(--tb-primary-d); background: linear-gradient(115deg, var(--tb-primary-d), var(--tb-primary)); }
.tb-shero__slide.tone-light { --tone-bg: #f3f5f8; background: #f3f5f8; color: var(--tb-ink); }
.tb-shero__slide--noart { grid-template-columns: minmax(0, 1fr); }
.tb-shero__copy {
  position: relative; z-index: 2; min-width: 0; container-type: inline-size;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
  padding: 36px 8px 84px 44px;
}
.tb-shero__kicker {
  margin: 0; font: 800 13px/16px var(--tb-font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tb-hero-accent);
}
.tb-shero__title {
  /* --L (render.php) is the longest word: never wider than the column. .72 of the
     size per letter covers Inter 800 in capitals, Ä/Õ/Ž included. */
  --fit: calc(100cqi / (var(--L, 8) * .72));
  margin: 0; font: 800 max(20px, min(clamp(30px, 3.1vw, 48px), var(--fit)))/1.02 var(--tb-font); letter-spacing: -.015em;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.tb-shero__title em { display: block; font-style: normal; color: var(--tb-hero-accent); }
.tb-shero__text { margin: 0; max-width: 40ch; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .85); }
.tb-shero__perks { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 8px; }
.tb-shero__perks li { display: flex; align-items: center; gap: 10px; font: 600 15px/20px var(--tb-font); }
.tb-shero__perks svg {
  flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--tb-hero-accent) 22%, transparent); color: var(--tb-hero-accent); stroke-width: 3;
}
.tb-shero__cta { margin-top: 6px; letter-spacing: .06em; text-transform: uppercase; gap: 10px; }
.tb-shero__slide.tone-light .tb-shero__text { color: var(--tb-muted); }
.tb-shero__slide.tone-light .tb-shero__kicker, .tb-shero__slide.tone-light .tb-shero__title em { color: var(--tb-primary); }
.tb-shero__slide.tone-light .tb-shero__perks svg { color: var(--tb-primary); background: var(--tb-primary-container); }
.tb-shero__slide.tone-brand .tb-shero__cta { background: #fff; color: var(--tb-primary); }

/* The picture: only the `crop` rectangle of the artwork, always covering the
   panel (container query units — see the block's render.php). */
.tb-shero__art, .tb-shero__promo-art { position: relative; min-width: 0; overflow: hidden; container-type: size; }
.tb-shero__img {
  --w: max(calc(100cqw / (var(--x1) - var(--x0))), calc(100cqh * var(--r) / (var(--y1) - var(--y0))));
  position: absolute; max-width: none; width: var(--w); height: auto;
  left: calc(50cqw - var(--w) * (var(--x0) + var(--x1)) / 2);
  top: calc(50cqh - var(--w) / var(--r) * (var(--y0) + var(--y1)) / 2);
}
.tb-shero__img--cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A waiting campaign's picture is not rendered, so the browser does not fetch it
   (it sits in the viewport, only transparent) while the first one — the page's
   largest paint — is still loading. main.js primes the next one after load. */
.tb-shero__slide:not(.is-active):not(.is-primed) .tb-shero__img { display: none; }
/* Blend the picture into its panel instead of a hard edge. */
.tb-shero__art::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 22%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--tone-bg), transparent);
}
.tb-shero__badge {
  position: absolute; z-index: 3; top: 20px; right: 20px; margin: 0; max-width: 16ch;
  padding: 10px 14px; border-radius: var(--tb-radius-lg);
  background: var(--tb-primary); color: var(--tb-on-primary);
  font: 800 14px/17px var(--tb-font); letter-spacing: .04em; text-transform: uppercase; text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.tb-shero__controls {
  position: absolute; z-index: 4; left: 44px; bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.tb-shero__nav, .tb-shero__pause {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff;
  transition: background-color .15s, border-color .15s;
}
.tb-shero__nav:hover, .tb-shero__pause:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .7); }
.tb-shero__nav:focus-visible, .tb-shero__pause:focus-visible, .tb-shero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tb-shero__dots { display: flex; align-items: center; gap: 2px; }
.tb-shero__dot {
  width: 32px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
}
.tb-shero__dot::before {
  content: ''; position: absolute; left: 50%; width: 18px; margin-left: -9px; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 99px; background: rgba(255, 255, 255, .38); transition: background-color .2s;
}
.tb-shero__dot:hover::before { background: rgba(255, 255, 255, .7); }
.tb-shero__dot.is-active::before { background: #fff; }
.tb-shero__pause-i, .tb-shero__play-i { display: inline-flex; }
.tb-shero__play-i, .tb-shero__pause[aria-pressed="true"] .tb-shero__pause-i { display: none; }
.tb-shero__pause[aria-pressed="true"] .tb-shero__play-i { display: inline-flex; }
.tb-shero__slider:has(.tb-shero__slide.is-active.tone-light) { background: #f3f5f8; }   /* no dark hairline at the rounded corners */
.tb-shero__slider:has(.tb-shero__slide.is-active.tone-light) :is(.tb-shero__nav, .tb-shero__pause) { color: var(--tb-ink); border-color: var(--tb-outline-variant); background: #fff; }
.tb-shero__slider:has(.tb-shero__slide.is-active.tone-light) .tb-shero__dot::before { background: var(--tb-outline-variant); }
.tb-shero__slider:has(.tb-shero__slide.is-active.tone-light) .tb-shero__dot.is-active::before { background: var(--tb-primary); }

/* ── Promo tiles ─────────────────────────────────────────────────────────── */
.tb-shero__promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tb-shero__promo {
  position: relative; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  min-height: 184px; border-radius: var(--tb-radius-xl); overflow: hidden; color: #fff;
  --tone-bg: var(--tb-primary); background: var(--tb-primary);
  transition: transform .2s, box-shadow .2s;
}
.tb-shero__promo.tone-dark { --tone-bg: var(--tb-hero-dark); background: linear-gradient(115deg, var(--tb-hero-dark), var(--tb-hero-dark-2)); }
.tb-shero__promo.tone-brand { background: linear-gradient(115deg, var(--tb-primary-d), var(--tb-primary)); }
.tb-shero__promo.tone-light { --tone-bg: #fff; background: #fff; color: var(--tb-ink); border: 1px solid var(--tb-outline-variant); }
a.tb-shero__promo:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 16, 28, .18); }
a.tb-shero__promo:focus-visible { outline: 3px solid var(--tb-primary-fixed-dim); outline-offset: 3px; }
.tb-shero__promo-copy {
  position: relative; z-index: 2; min-width: 0; container-type: inline-size; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 6px; padding: 22px 8px 22px 26px;
}
.tb-shero__promo .tb-shero__kicker { font-size: 12px; color: color-mix(in srgb, currentColor 72%, transparent); }
.tb-shero__promo.tone-dark .tb-shero__kicker { color: var(--tb-hero-accent); }
.tb-shero__promo-title {
  --fit: calc(100cqi / (var(--L, 8) * .72));
  margin: 0; font: 800 max(15px, min(clamp(20px, 1.9vw, 26px), var(--fit)))/1.06 var(--tb-font); letter-spacing: -.01em;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.tb-shero__promo-title em { display: block; font-style: normal; color: color-mix(in srgb, currentColor 70%, var(--tb-hero-accent)); }
.tb-shero__promo.tone-dark .tb-shero__promo-title em { color: var(--tb-hero-accent); }
.tb-shero__promo-text { margin: 0; font-size: 14px; line-height: 20px; color: color-mix(in srgb, currentColor 84%, transparent); max-width: 30ch; }
.tb-shero__promo-cta {
  margin-top: 8px; display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: var(--tb-radius-lg); background: #fff; color: var(--tb-primary);
  font: 700 13px/1 var(--tb-font); letter-spacing: .06em; text-transform: uppercase;
}
.tb-shero__promo.tone-light .tb-shero__promo-cta { background: var(--tb-primary); color: #fff; }
.tb-shero__promo:hover .tb-shero__promo-cta svg { transform: translateX(3px); }
.tb-shero__promo-cta svg { transition: transform .15s; }
.tb-shero__promo-art::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--tone-bg), transparent);
}
.tb-shero__ill { position: absolute; right: 8%; bottom: 8%; width: 84%; height: 84%; color: #fff; opacity: .92; }

/* ── Category chips (below 1100px the column becomes this row) ─────────── */
.tb-shero__chips {
  display: none; gap: 8px; margin: 0 0 14px; padding: 2px 0 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.tb-shero__chips::-webkit-scrollbar { display: none; }
.tb-chip {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant);
  font: 600 14px/18px var(--tb-font); color: var(--tb-ink); white-space: nowrap;
}
.tb-chip svg { color: var(--tb-primary); flex: none; }
.tb-chip:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-chip--all { background: var(--tb-primary); border-color: var(--tb-primary); color: #fff; }
.tb-chip--all svg { color: #fff; }
.tb-chip--all:hover { background: var(--tb-primary-d); color: #fff; }

/* ── Hero breakpoints ────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .tb-shero__copy { padding-left: 36px; }
  .tb-shero__controls { left: 36px; }
  .tb-shero__fly { grid-template-columns: minmax(0, 1fr) 160px; }
  .tb-shero__flyimg { width: 160px; height: 160px; }
  .tb-shero__flylist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .tb-shero { padding-top: 14px; }
  .tb-shero__promo { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
  .tb-shero__promo-copy { padding-left: 22px; }
  .tb-shero__chips { display: flex; }
  .tb-shero__grid { grid-template-columns: minmax(0, 1fr); }
  .tb-shero__cats { display: none; }
  .tb-shero__slide { min-height: 360px; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}
@media (max-width: 699px) {
  .tb-shero { padding: 12px 0 18px; }
  .tb-shero .tb-container { padding-inline: 16px; }
  .tb-shero__chips { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .tb-shero__slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; }
  .tb-shero__art { grid-row: 1; aspect-ratio: 16 / 10; }
  .tb-shero__art::before { inset: auto 0 0 0; width: auto; height: 35%; background: linear-gradient(0deg, var(--tone-bg), transparent); }
  .tb-shero__copy { grid-row: 2; padding: 4px 20px 76px; gap: 10px; }
  .tb-shero__title { font-size: max(20px, min(clamp(26px, 7.4vw, 34px), var(--fit))); }
  .tb-shero__perks li { font-size: 14px; }
  .tb-shero__cta { width: 100%; justify-content: center; }
  /* The dots take what is left between the buttons, so any number of
     campaigns fits the narrowest phone. */
  .tb-shero__controls { left: 16px; right: 16px; bottom: 18px; gap: 6px; }
  .tb-shero__dots { flex: 1; min-width: 0; justify-content: center; gap: 0; }
  .tb-shero__dot { flex: 0 1 40px; min-width: 22px; }
  .tb-shero__badge { top: 12px; right: 12px; font-size: 12px; padding: 8px 10px; }
  /* Promos: a swipeable row, the next one peeking in. */
  .tb-shero__promos {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .tb-shero__promos::-webkit-scrollbar { display: none; }
  .tb-shero__promo { flex: 0 0 86%; scroll-snap-align: start; min-height: 168px; }
}
@media (pointer: coarse) { .tb-shero__dot { width: 40px; } }
/* Wide screens: the container grows a little (see --tb-container), and the hero
   with it — a wider column, a taller campaign and tiles, a larger headline. */
@media (min-width: 1600px) {
  :root { --tb-side-w: clamp(272px, 16.5vw, 304px); }
  .tb-shero__slide { min-height: clamp(400px, 26.5vw, 520px); }
  .tb-shero__copy { padding-left: 56px; }
  .tb-shero__controls { left: 56px; }
  .tb-shero__title { font-size: max(20px, min(clamp(30px, 3.1vw, 56px), var(--fit))); }
  .tb-shero__text { font-size: 17px; line-height: 26px; }
  .tb-shero__perks li { font-size: 16px; }
  .tb-shero__promo { min-height: clamp(184px, 11.5vw, 232px); }
  .tb-shero__promo-copy { padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-shero__slide { transition: none; }
  .tb-shero__fly, .tb-drawer-backdrop, .tb-mobile-menu, .tb-catmenu__panel { animation: none; }
  a.tb-shero__promo:hover { transform: none; }
}

/* ==========================================================================
   Benefit strip — tb-trust-bar with layout "strip", right under the hero
   ========================================================================== */
.tb-trust-strip { background: var(--tb-surface-low); padding: 0 0 36px; }
.tb-trust--strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-xl);
}
.tb-trust--strip .tb-trust__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; text-align: left; }
.tb-trust--strip .tb-trust__item + .tb-trust__item { border-left: 1px solid var(--tb-outline-variant); }
.tb-trust--strip .tb-trust__icon {
  flex: none; width: 44px; height: 44px; margin: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tb-primary-container); color: var(--tb-primary);
}
.tb-trust--strip .tb-trust__icon svg { width: 24px; height: 24px; }
.tb-trust--strip .tb-trust__item h3 { margin: 0 0 3px; font: 700 15px/20px var(--tb-font); }
.tb-trust--strip .tb-trust__item p { margin: 0; font-size: 13px; line-height: 18px; color: var(--tb-muted); }
@media (max-width: 1099px) {
  .tb-trust--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-trust--strip .tb-trust__item:nth-child(3) { border-left: 0; }
  .tb-trust--strip .tb-trust__item:nth-child(n+3) { border-top: 1px solid var(--tb-outline-variant); }
}
@media (max-width: 559px) {
  .tb-trust-strip .tb-container { padding-inline: 16px; }
  .tb-trust--strip { grid-template-columns: minmax(0, 1fr); }
  .tb-trust--strip .tb-trust__item + .tb-trust__item { border-left: 0; border-top: 1px solid var(--tb-outline-variant); }
  .tb-trust--strip .tb-trust__item { padding: 14px 16px; }
}

/* ── Reviews (assets/frontend/reviews.css) in this template's measures ──
   The product page's review section and the review blocks: the site's
   container and side padding, its blue for the main button and the chosen
   filter, its tighter corners and square-cornered buttons. */
:root {
  --cmsr-width:  var(--tb-container);
  --cmsr-gutter: var(--tb-gap-lg);
  --cmsr-accent: var(--tb-primary);
  --cmsr-radius: 8px;
  --cmsr-button-radius: var(--tb-radius);
}
@media (max-width: 559px) { :root { --cmsr-gutter: 16px; } }

/* ==========================================================================
   Favorites (platform flag favorites; core/Favorites.php, assets/frontend/favorites.css): the heart on the cards,
   beside the add-to-cart button, before the cart in the bar and in the mobile menu, and the /favorites page — in
   Toolbox's blue. favorites.css loads after this file, so overrides use two classes.
   ========================================================================== */
:root { --cmsf-accent: var(--tb-primary); --cmsf-btn: var(--tb-primary); --cmsf-ink: var(--tb-ink); --cmsf-radius: var(--tb-radius-lg); }
/* The name link's ::after covers the whole card at z-index 1 and the footer sits at 2: the heart goes above both. */
.tb-product-card .cms-fav--overlay { --cmsf-z: 3; --cmsf-top: 6px; --cmsf-right: 6px; }
.tb-add-row .cms-fav--inline {
  flex: 0 0 auto; min-height: 54px; padding: 0 22px; border: 1px solid var(--tb-outline-variant); border-radius: var(--tb-radius-lg);
  color: var(--tb-primary); font: 600 15px/20px var(--tb-font); letter-spacing: .05em; transition: border-color .2s, background-color .2s;
}
.tb-add-row .cms-fav--inline:hover { border-color: var(--tb-primary); background: var(--tb-surface-low); }
.tb-add-row .cms-fav--inline[aria-pressed=true] { border-color: var(--tb-primary); }
/* Too narrow for three in a row: the heart takes its own full-width row under the cart buttons, with its word. */
@media (max-width: 520px) { .tb-add-row .cms-fav--inline { flex: 1 1 100%; min-height: 48px; } }
.tb-fav-link.tb-bar__action { gap: 0; }
/* On a phone the bar keeps categories, search and the cart (order tracking goes the same way): the heart and its
   counter are in the menu there. */
@media (max-width: 699px) { .tb-fav-link.tb-bar__action { display: none; } }
.tb-fav-link:hover .cms-fav__icon { color: var(--tb-primary); }
.tb-fav-link .cms-fav-count {
  top: 4px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--tb-surface-lowest); border-radius: 999px;
  background: var(--tb-primary); color: var(--tb-on-primary); font-size: 11px; font-weight: 800; line-height: 16px;
}
.tb-mobile-menu .tb-fav-menu .cms-fav-count { position: static; margin-left: auto; min-width: 22px; height: 22px; line-height: 22px; border-radius: 999px; background: var(--tb-primary); }
.tb-favs-page .cms-favs { font-family: var(--tb-font); }
.tb-favs-page .cms-favs__card { border-color: transparent; border-radius: var(--tb-radius-xl); background: var(--tb-surface-lowest); box-shadow: var(--tb-sh-1); }
.tb-favs-page .cms-favs__btn { letter-spacing: .05em; }

/* ── SEO content (phase seo, stage 2): a category's introduction, its FAQ and guide links, a product's guides ── */
.tb-cat-intro { max-width: 860px; margin: var(--tb-gap-sm) 0 0; color: var(--tb-muted); font-size: 15px; line-height: 1.6; }
.tb-cat-intro p { margin: 0 0 var(--tb-gap-sm); }
.tb-cat-intro ul { margin: 0 0 var(--tb-gap-sm); padding-left: 20px; }
.tb-cat-about { margin-top: var(--tb-gap-xl); padding-top: var(--tb-gap-lg); border-top: 1px solid var(--tb-outline-variant); max-width: 860px; }
.tb-cat-intro--rest { margin: 0 0 var(--tb-gap-lg); }
.tb-seo-faq { margin: 0 0 var(--tb-gap-lg); }
.tb-seo-faq__title, .tb-seo-links__title { font-size: 20px; line-height: 1.3; margin: 0 0 var(--tb-gap-md); color: var(--tb-ink); }
.tb-seo-faq__item { padding: var(--tb-gap-md) 0; border-bottom: 1px solid var(--tb-outline-variant); }
.tb-seo-faq__item:first-of-type { border-top: 1px solid var(--tb-outline-variant); }
.tb-seo-faq__q { font-size: 16px; line-height: 1.4; margin: 0 0 var(--tb-gap-xs); color: var(--tb-ink); }
.tb-seo-faq__a { margin: 0; color: var(--tb-muted); line-height: 1.6; font-size: 15px; }
.tb-seo-links { margin: 0 0 var(--tb-gap-lg); }
.tb-seo-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tb-gap-sm); }
.tb-seo-links a { color: var(--tb-primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tb-product-guides { margin-top: var(--tb-gap-lg); }

/* --------------------------------------------------------------------------
   Product page: "Võib-olla meeldivad ka" / upsell rows (shop-product.php)
   Full container width on a tinted band, the listing's own cards; a row of
   five on a desktop with arrows, a swipeable row on a phone (cards peek at
   the edge so the row reads as scrollable).
   -------------------------------------------------------------------------- */
.tb-related { background: var(--tb-surface-low); padding: 48px 0 56px; margin-top: 48px; }
.tb-related + .tb-related { margin-top: 0; padding-top: 8px; }
.tb-related__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.tb-related__head h2 { margin: 0; }
.tb-related__nav { display: flex; gap: 8px; }
.tb-related__nav[hidden] { display: none; }
.tb-related__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--tb-outline-variant); background: var(--tb-surface-lowest); color: var(--tb-ink);
  cursor: pointer; box-shadow: var(--tb-sh-1); transition: background .2s, color .2s, opacity .2s;
}
.tb-related__arrow:hover:not(:disabled) { background: var(--tb-primary); color: #fff; border-color: var(--tb-primary); }
.tb-related__arrow:disabled { opacity: .35; cursor: default; }
.tb-related__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--tb-gap-lg)) / 5);
  gap: var(--tb-gap-lg);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 12px; margin: -4px -2px 0;
  scrollbar-width: none;
}
.tb-related__track::-webkit-scrollbar { display: none; }
.tb-related__track > .tb-product-card { scroll-snap-align: start; }
.tb-related__track > .tb-product-card:hover { transform: none; }
.tb-related .tb-product-card__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .tb-related__track { grid-auto-columns: calc((100% - 3 * var(--tb-gap-lg)) / 4); } }
@media (max-width: 820px)  { .tb-related__track { grid-auto-columns: calc((100% - 2 * var(--tb-gap-lg)) / 3); } }
@media (max-width: 600px) {
  .tb-related { padding: 32px 0 40px; margin-top: 32px; }
  .tb-related__head { margin-bottom: 16px; }
  .tb-related__nav { display: none; }
  /* Two cards and a peek of the third; the row runs to the screen edge. */
  .tb-related__track {
    grid-auto-columns: 44%; gap: var(--tb-gap-sm);
    margin: 0 calc(-1 * var(--tb-gap-lg)); padding: 4px var(--tb-gap-lg) 12px; scroll-padding-inline: var(--tb-gap-lg);
  }
  .tb-related .tb-product-card__body, .tb-related .tb-product-card__footer { padding-left: var(--tb-gap-sm); padding-right: var(--tb-gap-sm); }
  .tb-related .tb-product-card__name { font-size: 15px; line-height: 20px; }
}

/* --------------------------------------------------------------------------
   Account access (blocks/tb-account-access — the wholesale page's sign in /
   create account / apply panel; only printed with customer accounts on)
   -------------------------------------------------------------------------- */
/* It follows the page's intro text: no second full section gap above it (a tinted one keeps its rhythm). */
.tb-acc-access-wrap:not(.tb-section--tint) { padding-top: var(--tb-gap-lg); }
.tb-acc-access {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--tb-gap-lg);
  max-width: 1040px; margin-inline: auto; padding: var(--tb-gap-lg) var(--tb-gap-xl);
  background: var(--tb-surface-lowest); border: 1px solid var(--tb-surface-variant); border-left: 4px solid var(--tb-primary);
  border-radius: var(--tb-radius-xl); box-shadow: var(--tb-sh-1);
}
.tb-acc-access + .tb-acc-access__state, .tb-acc-access + .tb-acc-access { margin-top: var(--tb-gap-lg); }
.tb-acc-access__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--tb-primary-container); color: var(--tb-on-primary-container);
}
.tb-acc-access__copy h2 { margin: 0 0 var(--tb-gap-xs); }
.tb-acc-access__copy p { margin: 0; color: var(--tb-muted); }
.tb-acc-access__copy p + p { margin-top: var(--tb-gap-sm); }
.tb-acc-access__note { font-size: 14px; line-height: 20px; }
.tb-acc-access__quote { white-space: pre-line; padding-left: var(--tb-gap-md); border-left: 3px solid var(--tb-outline-variant); color: var(--tb-ink); }
.tb-acc-access__actions { display: flex; flex-direction: column; gap: var(--tb-gap-sm); min-width: 200px; }
.tb-acc-access--out, .tb-acc-access--apply, .tb-acc-access--pending, .tb-acc-access--rejected { border-left-color: var(--tb-primary); }
.tb-acc-access--active { border-left-color: var(--tb-success); }
.tb-acc-access--active .tb-acc-access__icon { background: #d8f0e0; color: var(--tb-success); }
.tb-acc-access--rejected .tb-acc-access__icon { background: var(--tb-error-container); color: var(--tb-on-error-container); }
.tb-acc-access--pending .tb-acc-access__icon { background: var(--tb-surface-c); color: var(--tb-tertiary); }
.tb-acc-access__state { max-width: 1040px; margin: 0 auto var(--tb-gap-sm); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tb-outline); }
.tb-acc-access__off { max-width: 1040px; margin: 0 auto; padding: var(--tb-gap-md); border: 1px dashed var(--tb-outline-variant); border-radius: var(--tb-radius-lg); color: var(--tb-muted); font-size: 14px; }
@media (max-width: 899px) {
  .tb-acc-access { grid-template-columns: auto minmax(0, 1fr); padding: var(--tb-gap-lg); }
  .tb-acc-access__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 599px) {
  .tb-acc-access { grid-template-columns: minmax(0, 1fr); gap: var(--tb-gap-md); }
  .tb-acc-access__icon { width: 48px; height: 48px; }
  .tb-acc-access__actions { flex-direction: column; }
  .tb-acc-access__actions .tb-btn { width: 100%; white-space: normal; }
}