/* ═══════════════════════════════════════════════════════════════
   Toolcat theme — "Trust" light design system
   Light-first, token-driven, with optional dark mode (html.dark).
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img,svg,video{max-width:100%;display:block}
/* iframes (maps, embeds) carry fixed pixel widths — cap them so they can
   never push past their container and cause horizontal overflow. */
iframe{max-width:100%}
/* Without this, an <img> carrying HTML width/height attributes keeps its
   attribute height whenever CSS constrains only its width — stretching
   it (WordPress adds those attributes to every content/product image). */
img{height:auto}
a{color:inherit}
ul,ol{list-style:none}
button{font-family:inherit}

/* ── Industrial palette: safety-orange accent, slate ink, soft light
   surfaces. Functional green (in-stock) and amber (backorder/warning)
   are kept as-is so WooCommerce state colours stay meaningful. ── */
:root{
  --bg:#F7F8FA;--soft:#EDEFF2;--soft-2:#E3E6EA;--card:#FFFFFF;
  --ink:#17222E;--heading:#17222E;--ink-soft:#3C4A60;--muted:#5A6675;--dim:#6B7688;
  --blue:#EA580C;--blue-deep:#C2410C;--blue-soft:#FCEDE4;--sky:#F4A574;--btn:#EA580C;
  --green:#15803D;--green-text:#166534;--green-soft:#E8F6EE;--amber:#F59E0B;
  --amber-soft:#FEF3C7;--amber-text:#B45309;--amber-row:#FFFBEB;
  --navy:#17222E;--border:#D8DCE2;
  --nav-sc:rgba(255,255,255,.9);--hero-glow:#FBEEE6;--sel:#FCD9C4;
  --footer-bg:#10161E;--footer-muted:#8A94A2;
  /* industrial helpers */
  --ind-orange:#EA580C;--ind-orange-d:#C2410C;--ind-line:#D3D8DE;--ind-ink:#17222E;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
/* Dark mode is keyed on html.dark (this theme's own toggle) OR
   body.color-switch-dark, so the same palette applies under a host
   dark-mode switcher that uses that class (e.g. the Avant theme). */
html.dark,body.color-switch-dark{
  --bg:#0C1119;--soft:#121A24;--soft-2:#0E151E;--card:#161F2B;
  --ink:#E7EEF8;--heading:#F2F6FC;--ink-soft:#AEBCD2;--muted:#8895AB;--dim:#71809A;
  --blue:#FB7A3C;--blue-deep:#C2410C;--blue-soft:#2A1B12;--sky:#F4A574;--btn:#EA580C;
  --green:#1E9E52;--green-text:#5FE08A;--green-soft:#12271B;--amber:#FBBF24;
  --amber-soft:#3A2E10;--amber-text:#FBBF24;--amber-row:#221D0F;
  --navy:#0F1620;--border:#28323F;
  --nav-sc:rgba(12,17,25,.85);--hero-glow:rgba(234,88,12,.14);--sel:#3A2412;
  --footer-bg:#080C12;--footer-muted:#8A97AB;
  --ind-line:#28323F;--ind-ink:#E7EEF8;
}

body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--heading);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--sel)}
a,button{touch-action:manipulation}

/* ── SKIP LINK ── */
.tc-skip-link{position:absolute;top:-100px;left:16px;z-index:1000;background:var(--btn);color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:12px 20px;border-radius:0 0 0 0;transition:top .2s}
.tc-skip-link:focus{top:0}

/* ── KEYBOARD FOCUS ── */
/* Visible only for keyboard navigation (:focus-visible), so mouse/touch
   clicks stay clean while Tab users always get a clear indicator. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--blue);outline-offset:3px;border-radius:0;
}
.bb:focus-visible,.tc-btn:focus-visible,.btn-b:focus-visible,.bo:focus-visible,.btn-g:focus-visible{outline-offset:3px}

/* ── CONTAINER & SECTION ── */
.tc-container{max-width:1220px;margin:0 auto;padding:0 24px}
.tc-section{padding:50px 0}
.tc-section--sm{padding:64px 0}
.tc-section--tight{padding:28px 0}
.tc-stats{padding:70px 0;background:var(--bg)}
.tc-ticker{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--soft)}

/* ── KEYFRAMES ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SCROLL PROGRESS BAR ── */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;z-index:200;background:linear-gradient(90deg,var(--blue),#FB923C);will-change:transform}
.admin-bar #prog{top:32px}
@media screen and (max-width:782px){.admin-bar #prog{top:46px}}

/* ── ENTRANCE / FLOAT / GRADIENT-TEXT HELPERS ── */
.a1{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .1s both}
.a2{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .25s both}
.a3{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .4s both}
.a4{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .55s both}
.a5{animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) .7s both}
.fa{animation:floatY 5s ease-in-out infinite}
.fb{animation:floatY 5s ease-in-out 1.3s infinite}
.fc{animation:floatY 5s ease-in-out 2.6s infinite}
.gt{color:var(--blue)}

/* ── NAVBAR (light) ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
#nav.sc{background:var(--nav-sc);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border),0 6px 22px rgba(14,26,43,.05)}
/* Dark hero (homepage): before scroll, #nav is transparent and sits
   directly on .ind-hero's dark navy background — the nav's default
   colors are tuned for light page-hero backgrounds and are barely
   readable there. Swap to light variants until #nav gains .sc (solid
   backdrop) on scroll. */
/* Scoped to .tc-hide-mobile>.nav-list>.nav-list__item (direct top-level
   items only) — NOT .sub-menu or #mm. The desktop dropdown and the
   mobile panel both render on a solid light var(--card) surface even
   while #nav itself is transparent, so forcing white text there (as an
   earlier version of this rule did via the bare .nav-list__link
   selector) made every submenu/mobile-menu label unreadable. */
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nav-logo__text,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nl,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .tc-hide-mobile>.nav-list>.nav-list__item>.nav-list__link{color:rgba(255,255,255,.88)}
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nl:hover,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .tc-hide-mobile>.nav-list>.nav-list__item>.nav-list__link:hover,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .tc-hide-mobile>.nav-list>.nav-list__item.current>.nav-list__link{color:#fff}
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nl::after,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .tc-hide-mobile>.nav-list>.nav-list__item>.nav-list__link::after{background:var(--ind-orange)}
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nav-icon-btn,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .theme-btn,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .mobile-toggle{color:#fff}
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .nav-icon-btn:hover,
body:has(.ind-hero):not(.has-solid-nav) #nav:not(.sc) .theme-btn:hover{color:var(--ind-orange)}
.has-solid-nav #nav{background:var(--nav-sc);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border),0 6px 22px rgba(14,26,43,.05)}
.admin-bar #nav{top:32px}
@media screen and (max-width:782px){.admin-bar #nav{top:46px}}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-logo__mark{width:40px;height:40px;border-radius:0;flex-shrink:0;object-fit:cover}
.nav-logo__text{font-size:22px;font-weight:800;color:var(--heading);letter-spacing:-.4px}

.nav-list{display:flex;align-items:center;gap:30px}
.nav-list__item{display:flex;position:relative}
.nl,.nav-list__link{position:relative;display:flex;align-items:center;gap:5px;color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:600;transition:color .2s}
.nl:hover,.nav-list__link:hover{color:var(--blue)}
.nl::after,.nav-list__link::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nl:hover::after,.nav-list__link:hover::after{transform:scaleX(1)}
.nav-list__item.current>.nav-list__link{color:var(--blue)}
.nav-list__caret{flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1)}

/* Desktop dropdown submenus */
/* Close transitions carry a .18s delay so the menu forgives the pointer
   briefly leaving the hover area; the :hover rule zeroes the delay so
   opening is still instant. */
.nav-list .sub-menu{list-style:none;margin:0;padding:10px;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:0;box-shadow:0 20px 46px rgba(14,26,43,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;transition-delay:.18s;z-index:50}
/* Invisible hover bridge across the 14px visual gap between the menu
   item and the dropdown — without it, :hover drops the moment the
   pointer enters that gap and the menu vanishes before it can be
   reached. Slightly wider than the panel to forgive diagonal paths. */
.nav-list .sub-menu::before{content:'';position:absolute;top:-15px;left:-12px;right:-12px;height:16px}
.nav-list__item.has-children:hover>.sub-menu,
.nav-list__item.has-children:focus-within>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}
.nav-list__item.has-children:hover>.nav-list__link .nav-list__caret,
.nav-list__item.has-children:focus-within>.nav-list__link .nav-list__caret{transform:rotate(180deg)}
.nav-list .sub-menu .nav-list__item{width:100%}
.nav-list .sub-menu .nav-list__link{width:100%;padding:10px 12px;border-radius:0;font-size:14px}
.nav-list .sub-menu .nav-list__link:hover{background:var(--soft)}
.nav-list .sub-menu .nav-list__link::after{display:none}
.nav-list .sub-menu .sub-menu{top:0;left:calc(100% + 8px);transform:translateY(6px)}
/* Second-level flyouts open sideways — bridge their 8px gap horizontally. */
.nav-list .sub-menu .sub-menu::before{top:0;bottom:0;left:-10px;right:auto;width:10px;height:auto}
.nav-list .sub-menu .nav-list__item.has-children:hover>.sub-menu,
.nav-list .sub-menu .nav-list__item.has-children:focus-within>.sub-menu{transform:translateY(0)}

/* Mobile: nested items shown inline, indented, no hover mechanics needed */
.nav-list--mobile{flex-direction:column;align-items:stretch;gap:2px}
.nav-list--mobile .nav-list__item{flex-direction:column;align-items:stretch}
.nav-list--mobile .nav-list__link{padding:13px 4px;justify-content:space-between}
.nav-list--mobile .nav-list__link::after{display:none}
.nav-list--mobile .sub-menu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border-radius:0;min-width:0;list-style:none;margin:0 0 4px;padding:0 0 0 16px;background:transparent;border-left:2px solid var(--border)}
/* The desktop hover bridge is absolute-positioned; inside the static
   mobile list it would anchor to the parent li and sit over tap targets. */
.nav-list--mobile .sub-menu::before{display:none}
.nav-list--mobile .sub-menu .nav-list__link{padding:10px 4px;font-size:14px;color:var(--muted)}

.nav-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:12px}
.nav-icon-btn{position:relative;width:44px;height:44px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);text-decoration:none;transition:color .2s,transform .15s}
.nav-icon-btn:hover{color:var(--ind-orange);transform:translateY(-1px)}
/* Wide enough for a price, not just a digit: the badge carries the cart's
   value (e.g. "1 240 €"), so it's a pill with its own padding and mono
   figures, and it can't be squeezed by the icon it sits on. */
.nav-icon-btn__badge{position:absolute;top:-7px;right:-10px;min-width:18px;height:18px;background:var(--blue);color:#fff;border-radius:50px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 6px;white-space:nowrap}
.nav-icon-btn__badge.is-empty{display:none}

/* Theme toggle */
.theme-btn{width:44px;height:44px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink);transition:color .3s,transform .15s;-webkit-tap-highlight-color:transparent}
.theme-btn:hover{transform:translateY(-1px);color:var(--ind-orange)}
.theme-btn:active{transform:scale(.92)}

/* Mobile toggle + panel */
.mobile-toggle{position:relative;z-index:2;width:44px;height:44px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mobile-toggle svg{stroke:currentColor}
/* ── Nav search panel ── */
/* Same solid-background rationale as #mm below. */
#searchPanel{max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .25s;opacity:0;background:var(--card);box-shadow:0 16px 32px rgba(14,26,43,.1)}
#searchPanel.open{max-height:110px;opacity:1}
/* The panel clips its own overflow (that's how it animates open), so the
   suggestion list can't hang below it as an absolutely-positioned layer —
   the panel grows instead and the list scrolls inside. */
#searchPanel.open.has-results{max-height:min(70vh,520px)}

/* ── PERSISTENT SEARCH (shop surfaces) ──
   Always-open, full-width bar under the nav. It doesn't animate, so it
   doesn't need to clip its own overflow — which lets the suggestion list
   hang below as a layer instead of stretching the fixed header. */
#searchPanel.is-persistent{max-height:none;overflow:visible;opacity:1;position:relative;background:var(--card);border-top:1px solid var(--border);box-shadow:none}
/* Beats #searchPanel.open.has-results above, which would otherwise clip
   the dropdown back inside the bar (two classes out-specify one). */
#searchPanel.is-persistent.has-results{max-height:none;overflow:visible}
#searchPanel.is-persistent .tc-nav-search{border-top:none;padding:10px 0}
#searchPanel.is-persistent input[type=search]{font-size:16px;padding:12px 0}
#searchPanel.is-persistent .tc-search-sug{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--card);border:1.5px solid var(--border);border-top:none;box-shadow:0 18px 40px rgba(14,26,43,.16);padding:0 16px;max-height:min(60vh,440px)}
/* The taller nav would otherwise sit on top of the page's first block.
   Measured: the nav is 137px tall with the bar (at every width — the bar
   doesn't reflow), so 170px keeps roughly the same breathing room above
   the title as the 104px clearance does without it. */
body.tc-search-fixed .tc-page-hero{padding-top:170px}
body.tc-search-fixed .tc-breadcrumb-bar{padding-top:170px}

/* ── SEARCH SUGGESTIONS ── */
.tc-search-sug{max-height:min(60vh,430px);overflow-y:auto;border-top:1px solid var(--border);overscroll-behavior:contain}
.tc-search-sug[hidden]{display:none}
.tc-sug{display:flex;align-items:center;gap:14px;padding:10px 4px;text-decoration:none;border-bottom:1px solid var(--border);color:var(--ink)}
.tc-sug:last-child{border-bottom:none}
.tc-sug:hover,.tc-sug.is-active{background:var(--soft)}
.tc-sug__thumb{flex-shrink:0;width:48px;height:48px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tc-sug__thumb img{width:100%;height:100%;object-fit:contain}
.tc-sug__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tc-sug__cat{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.tc-sug__title{font-size:14.5px;font-weight:600;color:var(--heading);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tc-sug__sku{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tc-sug__price{flex-shrink:0;font-size:14px;font-weight:800;color:var(--blue);white-space:nowrap}
/* "Näytä kaikki tulokset" — a row, but clearly the way out of the list. */
.tc-sug--more{justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);padding:14px 4px;position:sticky;bottom:0;background:var(--card)}
.tc-sug--more:hover,.tc-sug--more.is-active{background:var(--blue-soft)}
.tc-sug__none{padding:18px 4px;font-size:14px;color:var(--muted)}
/* Shop-toolbar variant: the toolbar doesn't clip, so the list hangs under
   the field as its own layer instead of pushing the grid down. */
.tc-search-sug--float{position:absolute;top:calc(100% + 6px);left:-1.5px;right:-1.5px;z-index:60;background:var(--card);border:1.5px solid var(--border);box-shadow:0 18px 40px rgba(14,26,43,.16);padding:0 14px;max-height:min(60vh,420px)}
.tc-search-sug--float .tc-sug:first-child{padding-top:12px}
.tc-nav-search{display:flex;align-items:center;gap:10px;padding:14px 4px;border-top:1px solid var(--border);color:var(--muted)}
.tc-nav-search svg{flex-shrink:0}
.tc-nav-search input[type=search]{flex:1;min-width:0;border:none;background:transparent;padding:10px 0;font-family:inherit;font-size:15px;color:var(--ink)}
.tc-nav-search input[type=search]:focus{outline:none}
.tc-nav-search input[type=search]::placeholder{color:var(--dim)}

/* Solid background of its own — #nav is transparent until scrolled
   (.sc), but the open mobile panel must never be see-through, or page
   content underneath bleeds through and overlaps the menu text. */
#mm{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0;background:var(--card);box-shadow:0 16px 32px rgba(14,26,43,.1)}
#mm.open{max-height:80vh;overflow-y:auto;opacity:1}
.mobile-menu-inner{padding:8px 0 22px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.mobile-menu-inner .nav-list__link,.mobile-menu-inner a{padding:13px 4px;display:block}

/* ── HIDE/SHOW HELPERS ── */
.tc-hide-mobile{display:flex}
.tc-show-mobile{display:none}
@media(max-width:899px){
  .tc-hide-mobile{display:none!important}
  .tc-show-mobile{display:flex!important}
}

/* ── GRID / FLEX HELPERS ── */
.tc-grid{display:grid;gap:24px}
.tc-grid--2{grid-template-columns:repeat(2,1fr)}
.tc-grid--3{grid-template-columns:repeat(3,1fr)}
.tc-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.tc-grid--3,.tc-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.tc-grid--2,.tc-grid--3,.tc-grid--4{grid-template-columns:1fr}}

.tc-flex-row{display:flex;gap:56px;align-items:center}
.tc-flex-row--top{align-items:flex-start}
@media(max-width:1023px){.tc-flex-row{flex-direction:column;gap:44px}}

/* ── SCROLL REVEAL ── */
/* Reveal elements are visible by default. The theme's own JS adds .tc-pre
   to below-the-fold elements just before observing them, and removes it
   when they scroll into view. If ANY script fails to load or run, nothing
   is ever hidden — the page always renders complete. */
.sr,.reveal,.sl,.sr2,.ss{transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.tc-pre.sr,.tc-pre.reveal{opacity:0;transform:translateY(30px)}
.tc-pre.sl{opacity:0;transform:translateX(-28px)}
.tc-pre.sr2{opacity:0;transform:translateX(28px)}
.tc-pre.ss{opacity:0;transform:scale(.94)}
.vis{opacity:1!important;transform:none!important}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ── NUMERIC DATA ── */
/* Tabular figures keep counters from jittering in width as digits change
   during the count-up animation, and keep order-table amounts aligned. */
.cnt,.tc-orders-table td,.tc-price-login{font-variant-numeric:tabular-nums}

/* ── EYEBROW / TICK ── */
.eyebrow,.sl-tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--btn);border-radius:2px}
.tick{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.tickdot{width:22px;height:22px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd,.pdot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;animation:pulseDot 2s infinite}

/* ── BUTTONS ── */
.bb,.tc-btn,.btn-b{background:var(--btn);color:#fff;transition:background .2s,transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:0;font-size:15px;font-weight:700;border:none;font-family:inherit;box-shadow:0 6px 16px rgba(234,88,12,.18)}
.bb:hover,.tc-btn:hover,.btn-b:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(234,88,12,.34)}
.bo,.btn-g{background:var(--card);border:1.5px solid var(--border);color:var(--ink);transition:border-color .2s,background .2s,transform .2s;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:0;font-size:15px;font-weight:700}
.bo:hover,.btn-g:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
/* ── WHATSAPP BUTTON ──
   A real call-to-action rather than another quiet contact row: WhatsApp's
   own green (the mark is only recognisable in brand colour) inside the
   theme's industrial button shape — square corners, mono kicker, lift on
   hover. Sized to sit next to .bb without out-shouting it. */
.tc-wa{display:inline-flex;align-items:center;gap:0;background:#25D366;color:#06301A;border:1.5px solid #1FAE55;border-radius:0;text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 6px 16px rgba(37,211,102,.2)}
.tc-wa:hover{background:#22C55E;transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.32)}
.tc-wa__ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;align-self:stretch;background:rgba(6,48,26,.14);color:#fff}
.tc-wa__txt{display:flex;flex-direction:column;gap:1px;padding:9px 16px;min-width:0}
.tc-wa__kicker{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(6,48,26,.66)}
.tc-wa__label{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#06301A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-wa__arrow{flex-shrink:0;margin-right:14px;transition:transform .2s}
.tc-wa:hover .tc-wa__arrow{transform:translateX(3px)}
.tc-wa--block{display:flex;width:100%}
.tc-wa--block .tc-wa__txt{flex:1}
/* On the navy contact band the green plate would glare, so the button
   inverts: dark body, green rule and green mark. */
.tc-wa--on-dark{background:rgba(255,255,255,.07);border-color:rgba(37,211,102,.55);box-shadow:none}
.tc-wa--on-dark:hover{background:rgba(37,211,102,.16);border-color:#25D366;box-shadow:0 10px 26px rgba(37,211,102,.22)}
.tc-wa--on-dark .tc-wa__ico{background:#25D366;color:#06301A}
.tc-wa--on-dark .tc-wa__kicker{color:rgba(255,255,255,.55)}
.tc-wa--on-dark .tc-wa__label{color:#fff}
.tc-wa--on-dark .tc-wa__arrow{color:#25D366}
@media (prefers-reduced-motion:reduce){.tc-wa,.tc-wa__arrow{transition:none}.tc-wa:hover{transform:none}.tc-wa:hover .tc-wa__arrow{transform:none}}

.tc-btn--outline-dark{background:transparent;border:1.5px solid var(--border);color:var(--ink);box-shadow:none}
.tc-btn--outline-dark:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);box-shadow:none}
.tc-btn--sm{padding:9px 16px;font-size:13px;border-radius:0;box-shadow:none}
.tc-btn--block{display:flex;width:100%}

/* ── CARDS ── */
/* A bare 1px border with no shadow reads as flat, especially in light
   mode where card and page background are both near-white — a soft
   two-layer resting shadow gives cards real lift before the bigger
   hover shadow takes over. */
.card{background:var(--card);border:1px solid var(--border);border-radius:0;box-shadow:0 1px 2px rgba(14,26,43,.04),0 6px 16px rgba(14,26,43,.05);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(14,26,43,.1)}
.ib{transition:background .3s,color .3s}
.card:hover .ib{background:var(--btn)!important;color:#fff!important}

/* ── BRAND TICKER ── */
.tw{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tt{display:flex;width:max-content;animation:ticker 40s linear infinite}
.tw:hover .tt{animation-play-state:paused}
.brand{font-size:21px;font-weight:800;color:#9AA8BC;white-space:nowrap;letter-spacing:-.4px;transition:color .2s}
.brand:hover{color:var(--heading)}
.brand-logo{height:34px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1) opacity(.55);transition:filter .25s}
.brand-logo:hover{filter:grayscale(0) opacity(1)}

/* Dark mode: brand logos are dark artwork on transparent (or dark plates
   with light type), drawn for a light page — on the dark strip they sank
   into the background. Invert flips both cases the right way: dark
   wordmarks read light, and boxed logos keep their type/plate contrast.
   Hover stays inverted (going back to source colour would re-darken them),
   just at full strength. The strip itself is lifted off --soft so the wall
   separates from the section above it. */
:is(html.dark,body.color-switch-dark) .tc-ticker{background:var(--card)}
:is(html.dark,body.color-switch-dark) .brand-logo{filter:grayscale(1) invert(1) opacity(.72)}
:is(html.dark,body.color-switch-dark) .brand-logo:hover{filter:grayscale(1) invert(1) opacity(1)}
:is(html.dark,body.color-switch-dark) .brand{color:var(--ink-soft)}

/* ── FORM FIELDS (light) ── */
.fi{width:100%;padding:14px 16px;background:var(--card);border:1.5px solid var(--border);border-radius:0;color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.fi::placeholder{color:var(--dim)}
.fi:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.tc-field{margin-bottom:16px}
.tc-field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.tc-field input,.tc-field textarea,.tc-field select{width:100%;padding:13px 16px;background:var(--card);border:1.5px solid var(--border);border-radius:0;color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.tc-field input:focus,.tc-field textarea:focus,.tc-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}

/* ── Contact Form 7 (styled to match the theme) ── */
.wpcf7-form p{margin-bottom:14px}
.wpcf7-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=radio]):not([type=acceptance]){width:100%;padding:14px 16px;background:var(--card);border:1.5px solid var(--border);border-radius:0;color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.wpcf7-form .wpcf7-form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.wpcf7-form select.wpcf7-form-control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
/* CF7's default [textarea] renders rows="10" — a message box taller than
   the rest of the form put together, which pushed the submit button off
   screen in the nav "Pyydä tarjous" popup. The rows attribute sets height
   directly, so min-height can't rein it in; height does, and resize stays
   free for anyone writing more. */
.wpcf7-form textarea.wpcf7-form-control{min-height:104px;height:104px;resize:vertical}
.wpcf7-form .wpcf7-submit{width:100%;background:var(--btn);color:#fff;border:none;padding:16px;border-radius:0;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(234,88,12,.18);transition:background .2s,transform .2s;font-family:inherit}
.wpcf7-form .wpcf7-submit:hover{background:var(--blue-deep);transform:translateY(-2px)}
.wpcf7-form .wpcf7-list-item{margin:0 16px 0 0}
.wpcf7-form .wpcf7-acceptance,.wpcf7-form .wpcf7-checkbox{font-size:13px;color:var(--muted);font-weight:500}
.wpcf7-not-valid-tip{color:#B91C1C;font-size:12.5px;margin-top:5px}
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid{border-color:#B91C1C}
.wpcf7 .wpcf7-response-output{display:none;margin:16px 0 0;padding:14px 16px;border-radius:0;font-size:14px;font-weight:600;border:1px solid var(--border)}
.wpcf7 form.sent .wpcf7-response-output,.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{display:block}
.wpcf7 form.sent .wpcf7-response-output{background:var(--green-soft);border-color:rgba(21,128,61,.3);color:var(--green-text)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
.wpcf7-spinner{margin:0 0 0 10px;background-color:var(--blue)}

/* ── Shortcode: contact form card ── */
.tc-form-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:34px;box-shadow:0 20px 50px rgba(14,26,43,.08)}
.tc-form-card__title{font-size:20px;font-weight:800;color:var(--heading);margin-bottom:4px}
.tc-form-card__sub{font-size:13.5px;color:var(--muted);margin-bottom:22px}

/* ── Shortcode: CTA band ── */
.tc-cta{border-radius:0;padding:clamp(32px,5vw,56px);text-align:center;position:relative;overflow:hidden;margin:24px 0}
.tc-cta--dark{background:var(--navy);color:#fff}
.tc-cta--light{background:var(--soft);border:1px solid var(--border)}
.tc-cta__title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:12px}
.tc-cta--dark .tc-cta__title{color:#fff}
.tc-cta--light .tc-cta__title{color:var(--heading)}
.tc-cta__text{font-size:16px;line-height:1.7;max-width:520px;margin:0 auto 26px}
.tc-cta--dark .tc-cta__text{color:rgba(255,255,255,.72)}
.tc-cta--light .tc-cta__text{color:var(--ink-soft)}

/* ── STICKY MOBILE CTA ── */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(14,26,43,.08);transform:translateY(120%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#sticky.show{transform:translateY(0)}

/* ── INNER-PAGE HERO (light) ── */
/* Compact band: 74px of the top padding is just clearance for the fixed
   navbar; what remains reads as a slim title strip, not a hero. */
.tc-page-hero{background:radial-gradient(900px circle at 85% 0%,var(--hero-glow),transparent 60%),var(--soft);border-bottom:1px solid var(--border);padding:104px 0 22px;position:relative;overflow:hidden}
.tc-page-hero__eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.tc-page-hero__title{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;color:var(--heading);letter-spacing:-.02em;margin-bottom:6px;line-height:1.15}
.tc-page-hero__desc{font-size:15px;color:var(--ink-soft);max-width:640px;line-height:1.6}
/* Per-category header image variant: photo behind a dark scrim, so the
   eyebrow/title/breadcrumb stay legible in both light and dark mode. */
.tc-page-hero--image{background-size:cover;background-position:center;padding:120px 0 30px}
.tc-page-hero--image .tc-page-hero__eyebrow{color:#fff;opacity:.85}
.tc-page-hero--image .tc-page-hero__title{color:#fff}
.tc-page-hero--image .woocommerce-breadcrumb,.tc-page-hero--image .woocommerce-breadcrumb a{color:rgba(255,255,255,.82)}

/* Single product pages: breadcrumb only, no title/eyebrow band above it
   (see woocommerce/global/wrapper-start.php) — same top padding as
   .tc-page-hero for fixed-header clearance, almost no bottom padding so
   the gallery/summary/meta start right under it. */
.tc-breadcrumb-bar{padding:104px 0 4px}
.tc-breadcrumb-bar .tc-breadcrumb{margin-top:0}
/* Defensive: on pages flattened to plain HTML (no block markup), wpautop()
   is active and can incidentally wrap a standalone JSON-LD <script> tag in
   a <p> (see toolcat_sc_breadcrumb()). The script itself never renders, but
   a <p>'s default browser margin would still add visible empty space —
   this neutralizes that regardless of whether/how wpautop wraps it. */
p:has(> script:only-child) { margin: 0; }

.tc-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:8px;padding:0}
.tc-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0}
.tc-breadcrumb li{display:flex;align-items:center;gap:6px}
.tc-breadcrumb a{color:var(--muted);text-decoration:none}
.tc-breadcrumb a:hover{color:var(--blue)}
.tc-breadcrumb__sep{color:var(--dim)}

/* Marketing/legal (canvas-template) pages: [toolcat_breadcrumb] takes the
   fixed-navbar clearance itself, so the hero below it doesn't also need
   the full 104px on top of that — otherwise the two stack into one huge
   empty band. Deliberately body:has(...) rather than an adjacent-sibling
   selector (.tc-breadcrumb-bar--page + .tc-page-hero): WordPress's block
   parser inserts an anonymous "null" block for the blank line between two
   block comments, and depending on how a given editor save re-serializes
   that gap, the two elements aren't always guaranteed truly adjacent in
   the rendered DOM. :has() only needs the breadcrumb to exist anywhere on
   the page, so it isn't sensitive to exactly what sits between them. */
body:has(.tc-breadcrumb-bar--page) .tc-page-hero{padding-top:16px}
/* Same idea for pages that use the full toolcat/hero (marketing pages
   meant to convert, not just inform) instead of the compact page-hero. */
body:has(.tc-breadcrumb-bar--page) header{padding-top:56px}

/* ── MAIN CONTENT (pages / posts) ── */
.tc-page-content{max-width:860px;margin:0 auto;padding:64px 24px 100px}
/* A stat strip above prose stacked its own 70px bottom padding on top of
   the prose's 64px top padding — 134px of nothing between two things that
   read as one thought (see Toimitustavat). Keyed on body:has() rather than
   an adjacent-sibling selector for the same reason .tc-breadcrumb-bar is
   above: on pages flattened to plain HTML, wpautop() can drop an empty <p>
   between two block elements, and then "+" no longer matches. */
body:has(.tc-stats):has(.tc-page-content) .tc-stats{padding-bottom:16px}
body:has(.tc-stats):has(.tc-page-content) .tc-page-content{padding-top:24px}
.tc-page-content h1,.tc-page-content h2,.tc-page-content h3{color:var(--heading);font-weight:800;letter-spacing:-.02em;margin:32px 0 16px}
.tc-page-content h1{font-size:clamp(1.8rem,3vw,2.5rem)}
.tc-page-content h2{font-size:24px}
.tc-page-content h3{font-size:19px}
.tc-page-content p{font-size:16px;color:var(--ink-soft);line-height:1.8;margin-bottom:18px}
.tc-page-content ul,.tc-page-content ol{margin:0 0 18px 22px;list-style:revert}
.tc-page-content li{font-size:16px;color:var(--ink-soft);line-height:1.8;margin-bottom:6px}
.tc-page-content a{color:var(--blue);text-decoration:underline}
.tc-page-content img{border-radius:0;margin:24px 0}
.tc-page-content blockquote{border-left:3px solid var(--blue);padding-left:20px;color:var(--muted);font-style:italic;margin:24px 0}
/* Keep themed button links intact inside rich content (the generic `.tc-page-content a`
   rule above would otherwise force blue underlined text onto button links). */
.tc-page-content a.bb,.tc-page-content a.bo,.tc-page-content a.tc-btn,.tc-page-content a.btn-b,.tc-page-content a.btn-g{text-decoration:none}
.tc-page-content a.bb,.tc-page-content a.tc-btn,.tc-page-content a.btn-b{color:#fff}
.tc-page-content a.bo,.tc-page-content a.btn-g{color:var(--ink)}

/* ── BLOG INDEX / ARCHIVE ── */
.tc-blog-index{max-width:1220px;margin:0 auto;padding:56px 24px 100px}
.tc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:1023px){.tc-blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.tc-blog-grid{grid-template-columns:1fr}}

/* legacy list layout kept for compatibility */
.tc-blog-layout{max-width:1280px;margin:0 auto;padding:150px 24px 100px;display:grid;grid-template-columns:1fr 320px;gap:56px}
@media(max-width:1023px){.tc-blog-layout{grid-template-columns:1fr}}

.tc-post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:0;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.tc-post-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(14,26,43,.1)}
.tc-post-card__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft-2)}
.tc-post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tc-post-card:hover .tc-post-card__thumb img{transform:scale(1.05)}
.tc-post-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.tc-post-card__meta{font-size:12.5px;color:var(--muted);margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tc-post-card__cat{color:var(--blue);font-weight:700}
.tc-post-card__title{font-size:19px;font-weight:700;color:var(--heading);margin-bottom:10px;line-height:1.35}
.tc-post-card__title a{text-decoration:none;color:inherit;transition:color .2s}
.tc-post-card__title a:hover{color:var(--blue)}
.tc-post-card__excerpt{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:16px;flex:1}
.tc-post-card__more{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:auto}
.tc-post-card__more svg{transition:transform .2s}
.tc-post-card:hover .tc-post-card__more svg{transform:translateX(3px)}

.tc-single-wrap{max-width:820px;margin:0 auto;padding:150px 24px 100px}
.tc-single-post__thumb{border-radius:0;overflow:hidden;margin-bottom:32px;max-height:480px}
.tc-single-post__thumb img{width:100%;height:100%;object-fit:cover}
.tc-single-post__title{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;color:var(--heading);letter-spacing:-.02em;margin-bottom:16px;line-height:1.2}
.tc-single-post__meta{font-size:14px;color:var(--muted);margin-bottom:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tc-single-post__tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}
.tc-tag{background:var(--soft-2);color:var(--ink-soft);font-size:13px;font-weight:600;padding:6px 14px;border-radius:50px;text-decoration:none}
.tc-tag:hover{background:var(--blue-soft);color:var(--blue)}

.tc-author-box{display:flex;gap:16px;align-items:center;background:var(--soft);border:1px solid var(--border);border-radius:0;padding:24px;margin:40px 0}
.tc-author-box img{border-radius:50%;width:56px;height:56px;flex-shrink:0}
.tc-author-box__name{font-weight:700;color:var(--heading);font-size:15px;margin-bottom:4px}
.tc-author-box__bio{font-size:14px;color:var(--muted);line-height:1.6}

.tc-post-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding-top:32px;margin-top:40px}
.tc-post-nav__link{flex:1;text-decoration:none;display:block}
.tc-post-nav__link--next{text-align:right}
.tc-post-nav__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:block}
.tc-post-nav__title{font-size:15px;font-weight:700;color:var(--heading)}
/* Blog prose stays left-aligned even when paragraphs arrive centre-set
   (content generated/pasted with align-center paragraph blocks) — a
   whole article of centred body text is never intentional and reads
   badly. Specificity here beats WordPress's .has-text-align-center. */
.tc-single-post .tc-page-content,
.tc-single-post .tc-page-content p,
.tc-single-post .tc-page-content li{text-align:left}

/* ── SIDEBAR & WIDGETS ── */
.tc-widget{background:var(--card);border:1px solid var(--border);border-radius:0;padding:24px;margin-bottom:24px}
.tc-widget__title{font-size:15px;font-weight:700;color:var(--heading);margin-bottom:16px;letter-spacing:-.01em}
.tc-widget ul{margin:0}
.tc-widget li{margin-bottom:10px;font-size:14px}
.tc-widget a{color:var(--ink-soft);text-decoration:none}
.tc-widget a:hover{color:var(--blue)}
.tc-widget input[type="text"],.tc-widget input[type="search"]{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:0;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink)}
/* Embeds dropped into a widget (Custom HTML / block widget — e.g. a Google
   Maps iframe) come with fixed pixel widths that overflow the narrow card.
   Make them fill the card width instead. */
.tc-widget iframe,.tc-widget embed,.tc-widget object{display:block;width:100%;max-width:100%;border:0}

/* ── PAGINATION ── */
.tc-pagination{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
/* WooCommerce's pagination nests nav > ul.page-numbers > li inside the
   wrapper — without laying the <ul> out as the flex row too, the <li>s
   stack vertically as blocks. (paginate_links() on the blog outputs bare
   <a>/<span>, which the wrapper's own flex handles.) */
.tc-pagination nav{width:100%}
.tc-pagination ul.page-numbers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;margin:0;padding:0}
.tc-pagination ul.page-numbers li{margin:0;list-style:none}
.tc-pagination a,.tc-pagination span{min-width:40px;height:40px;padding:0 8px;border-radius:0;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-soft);border:1px solid var(--border)}
.tc-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}
.tc-pagination a:hover{border-color:var(--blue);color:var(--blue)}

/* ── COMMENTS ── */
.tc-comments{margin-top:56px}
.tc-comments__title{font-size:20px;font-weight:800;color:var(--heading);margin-bottom:24px}
.tc-comment-list{margin:0 0 32px}
.tc-comment{display:flex;gap:16px;margin-bottom:28px}
.tc-comment img{border-radius:50%;flex-shrink:0}
.tc-comment__author{font-size:14px;font-weight:700;color:var(--heading)}
.tc-comment__date{font-size:12px;color:var(--muted);margin-left:8px}
.tc-comment__text p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-top:6px}
.tc-comment .children{margin-left:48px;margin-top:24px}
.comment-respond{background:var(--soft);border:1px solid var(--border);border-radius:0;padding:28px}
.comment-form p{margin-bottom:14px}
.comment-form input,.comment-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.comment-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.comment-form .form-submit input{width:auto;background:var(--btn);color:#fff;border:none;padding:12px 24px;font-weight:700;cursor:pointer}

/* ── SEARCH & 404 ── */
.tc-search-results{max-width:860px;margin:0 auto;padding:150px 24px 100px}
.tc-search-results__count{font-size:14px;color:var(--muted);margin-bottom:32px}
.tc-search-result{padding:24px 0;border-bottom:1px solid var(--border)}
.tc-search-result__type{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:block}
.tc-404{max-width:680px;margin:0 auto;padding:180px 24px 120px;text-align:center}
.tc-404__code{font-size:clamp(4rem,10vw,7rem);font-weight:800;color:var(--soft-2);line-height:1}
.tc-404__title{font-size:24px;font-weight:800;color:var(--heading);margin:8px 0 16px}
.tc-404__desc{font-size:16px;color:var(--muted);margin-bottom:32px;line-height:1.7}
.tc-404 form{max-width:420px;margin:0 auto 32px;display:flex;gap:10px}
.tc-404 input[type="search"]{flex:1;padding:13px 16px;border:1.5px solid var(--border);border-radius:0;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)}

/* ── CONTACT PAGE ── (sits below a page hero, so no nav-clearance padding) */
.tc-contact{padding:64px 0 100px}
.tc-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:1023px){.tc-contact-grid{grid-template-columns:1fr}}
.tc-contact-info{display:flex;flex-direction:column;gap:24px}
.tc-contact-info__item{display:flex;align-items:flex-start;gap:16px}
.tc-contact-info__cta{margin-top:2px}
.tc-contact-info__icon{width:48px;height:48px;background:var(--blue-soft);border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue)}
.tc-contact-info__label{font-size:12px;color:var(--muted);margin-bottom:2px}
.tc-contact-info__value{font-size:17px;font-weight:700;color:var(--heading);text-decoration:none}
.tc-contact-card{background:var(--card);border:1px solid var(--border);border-radius:0;padding:36px}

/* ── FOOTER (dark bookend) ── */
.tc-footer{background:var(--footer-bg);padding:54px 0 30px}
.tc-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:1023px){.tc-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:639px){.tc-footer-grid{grid-template-columns:1fr}}
.tc-footer p{color:var(--footer-muted)}
.tc-footer-col__title{font-size:13px;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:.5px}
.tc-footer-col ul{display:flex;flex-direction:column;gap:10px}
.tc-footer-col a{font-size:14px;color:var(--footer-muted);text-decoration:none;transition:color .2s}
.tc-footer-col a:hover{color:#fff}
.tc-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.tc-footer-bottom span{font-size:13px;color:#8A97AB}

/* ── ACCOUNT / B2B PORTAL ── */
.tc-account-heading{font-size:22px;font-weight:800;color:var(--heading);margin-bottom:24px}
.tc-no-data{font-size:15px;color:var(--muted)}
.tc-orders-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:0}
.tc-orders-table{width:100%;border-collapse:collapse;font-size:14px}
.tc-orders-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:14px 16px;background:var(--soft);border-bottom:1px solid var(--border)}
.tc-orders-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--ink-soft)}
.tc-orders-table tr:last-child td{border-bottom:none}
.tc-order-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:50px;background:var(--soft-2);color:var(--ink-soft)}
.tc-order-status--wc-processing{background:var(--blue-soft);color:var(--blue)}
.tc-order-status--wc-on-hold{background:var(--amber-soft);color:var(--amber-text)}
.tc-order-status--wc-completed{background:var(--green-soft);color:var(--green-text)}
.tc-link{color:var(--blue);text-decoration:none;font-weight:600}
.tc-link:hover{text-decoration:underline}
.tc-price-login{color:var(--blue);font-size:14px;font-weight:700;text-decoration:none}
.tc-price-login:hover{text-decoration:underline}

/* ── FAQ ([toolcat_faq]) ── */
.tc-faq{max-width:860px;margin:0 auto}
.tc-faq__title{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--heading);margin-bottom:20px}
.tc-faq__item{background:var(--card);border:1px solid var(--border);border-radius:0;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.tc-faq__item:hover{border-color:var(--blue)}
.tc-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-size:15px;font-weight:700;color:var(--heading);cursor:pointer;list-style:none}
.tc-faq__item summary::-webkit-details-marker{display:none}
.tc-faq__item summary svg{flex:0 0 auto;color:var(--muted);transition:transform .25s}
.tc-faq__item[open] summary svg{transform:rotate(180deg)}
.tc-faq__item summary:focus-visible{outline:2.5px solid var(--blue);outline-offset:-2px;border-radius:0}
.tc-faq__answer{padding:0 20px 16px}
.tc-faq__answer p{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin:0}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .sr,.sl,.sr2,.ss,.reveal{opacity:1!important;transform:none!important;transition:none!important}
  .a1,.a2,.a3,.a4,.a5{animation:none!important;opacity:1!important}
  .fa,.fb,.fc,.tt,.pd,.pdot{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRIAL COMPONENTS
   Class-driven building blocks so page content stays pure HTML —
   all styling lives here in the theme. Safety-orange accent,
   hard edges, hazard-stripe + blueprint motifs, mono tech labels.
   ═══════════════════════════════════════════════════════════════ */

/* ── shared bits ── */
.ind-mono{font-family:var(--mono)}
.ind-accent{color:var(--ind-orange)}
.ind-kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ind-orange)}
.ind-kicker::before{content:'';width:26px;height:2px;background:var(--ind-orange)}
.ind-kicker--light{color:var(--sky)}
.ind-title{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1.08;color:var(--heading);letter-spacing:-.01em}
.ind-lead{font-size:17px;color:var(--ink-soft);line-height:1.7}
.ind-intro{max-width:620px;margin-bottom:44px}
.ind-shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.ind-shead .ind-title{max-width:560px}
.bghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;font-size:16px;font-weight:700;text-decoration:none;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.04em;transition:background .2s,border-color .2s}
.bghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

/* ── HERO ── */
.ind-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.ind-hero__bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px}
.ind-hero__glow{position:absolute;top:-140px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(234,88,12,.28),transparent 65%);pointer-events:none}
.ind-hero__inner{position:relative;z-index:1;padding-top:128px}
.ind-hero__grid{display:flex;gap:56px;align-items:flex-start}
.ind-hero__copy{flex:1;min-width:0;width:100%;max-width:640px}
.ind-hero__title{font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:900;line-height:.98;letter-spacing:-.03em;color:#fff;margin:24px 0;text-transform:uppercase;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media(max-width:420px){.ind-hero__title{font-size:1.95rem}}
/* jälleenmyyjäksi.html: "liiketoimintaasi"/"tukkukumppanilla" are wider
   than .ind-hero__copy's 640px column even alone at the base clamp, so
   overflow-wrap was breaking them mid-word instead of wrapping cleanly
   between words. Smaller clamp, tuned against real render measurements
   (see verification), not a guess. */
.ind-hero__title--tight{font-size:clamp(1.9rem,3.6vw,3rem)}
@media(max-width:420px){.ind-hero__title--tight{font-size:1.5rem}}
.ind-hero__lead{font-size:18px;line-height:1.65;color:rgba(255,255,255,.72);margin-bottom:30px;max-width:520px}
.ind-hero__lead strong{color:#fff;font-weight:700}
.ind-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.ind-hero__ticks{display:flex;flex-wrap:wrap;gap:20px;font-size:13.5px;color:rgba(255,255,255,.62);font-weight:600}
.ind-hero__ticks span::before{content:'✓';color:var(--ind-orange);font-weight:900;margin-right:7px}
/* welded stat bar */
.ind-statbar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid rgba(255,255,255,.12)}
.ind-statbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(-45deg,var(--ind-orange) 0 14px,rgba(255,255,255,.12) 14px 28px)}
.ind-stat{padding:24px 24px 34px;border-right:1px solid rgba(255,255,255,.12)}
.ind-stat:last-child{border-right:none}
.ind-stat__num{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:900;line-height:1;color:#fff}
.ind-stat__num--accent{color:var(--ind-orange)}
.ind-stat__label{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5);margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ── LIVE STAT CARD ── */
.ind-card{flex-shrink:0;width:100%;max-width:392px;background:var(--card);border:1.5px solid var(--border);padding:26px;box-shadow:0 24px 50px rgba(14,26,43,.14)}
.ind-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ind-card__label{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--heading)}
.ind-card__live{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ind-orange);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ind-card__live .pdot{background:var(--ind-orange)}
.ind-card__big{font-size:52px;font-weight:900;color:var(--heading);line-height:1}
.ind-card__cap{font-size:12.5px;color:var(--muted);margin:4px 0 20px}
.ind-card__chart{margin-bottom:20px}
.ind-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ind-cell{padding:13px;background:var(--soft);border:1.5px solid var(--border)}

/* ── HERO PRODUCT PROMO — rotating spotlight, full-bleed PNG with
   floating badge/title/CTA (no box/panel — the product image itself
   is the card) ── */
.ind-promo{position:relative;flex-shrink:0;width:100%;max-width:460px;height:460px;overflow:visible}
.ind-promo__slides{position:relative;width:100%;height:100%}
.ind-promo__slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(14px) scale(.98);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.ind-promo__slide.is-active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
/* image zone: fixed share of the frame so the photo never collides with
   the floating title/buttons below it */
.ind-promo__visual{position:relative;flex:1;min-height:0}
.ind-promo__glow{position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(234,88,12,.26),transparent 70%);pointer-events:none;z-index:0}
.ind-promo__img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 34px rgba(0,0,0,.4))}
.ind-promo__badge{position:absolute;top:8px;left:0;z-index:2;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ind-orange);padding:7px 14px;box-shadow:0 8px 20px rgba(234,88,12,.35)}
/* text zone: sits below the image, directly on the hero's dark bg — no
   card, no scrim needed since it never overlaps the photo */
.ind-promo__body{flex-shrink:0;padding-top:8px}
.ind-promo__brand{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:6px}
.ind-promo__title{font-size:20px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:16px}
.ind-promo__actions{display:flex;flex-wrap:wrap;gap:10px}
.ind-promo__cta{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);padding:11px 18px;transition:background .2s,border-color .2s}
.ind-promo__cta:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.ind-promo__cta--accent{background:var(--ind-orange);border-color:var(--ind-orange)}
.ind-promo__cta--accent:hover{background:var(--ind-orange-d);border-color:var(--ind-orange-d)}
.ind-promo__dots{display:flex;gap:8px;margin-top:16px}
.ind-promo__dot{width:22px;height:3px;padding:0;border:none;background:rgba(255,255,255,.3);cursor:pointer;transition:background .2s,width .2s}
.ind-promo__dot.is-active{background:var(--ind-orange);width:34px}
.ind-promo__dot:focus-visible{outline:2px solid var(--ind-orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ind-promo__slide{transition:opacity .3s ease;transform:none}}
@media(max-width:520px){.ind-promo{height:360px}}
.ind-cell__num{font-size:21px;font-weight:900;color:var(--heading)}
.ind-cell__label{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ── CATEGORY TILES (de-blanked) ── */
.tc-cat{position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--card);border:1.5px solid var(--border);transition:border-color .2s,transform .2s,box-shadow .2s}
/* --tc-cat-accent is set inline per card from the category's chosen
   colour (term meta, inc/category-meta.php); every use falls back to the
   theme orange when the admin left it on default. */
.tc-cat::after{content:'';position:absolute;top:0;left:0;width:0;height:3px;background:var(--tc-cat-accent,var(--ind-orange));transition:width .28s cubic-bezier(.16,1,.3,1)}
.tc-cat:hover::after{width:100%}
.tc-cat:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,26,43,.12)}
.tc-cat__idx{position:absolute;top:12px;right:16px;font-family:var(--mono);font-size:34px;font-weight:800;line-height:1;color:var(--heading);opacity:.07}
.tc-cat__ico{width:52px;height:52px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--tc-cat-accent,var(--heading));transition:background .2s,color .2s}
.tc-cat:hover .tc-cat__ico{background:var(--tc-cat-accent,var(--navy));color:#fff}
/* Image variant: the category's own photo fills the square (no accent
   fill on hover — that would hide the image). */
.tc-cat__ico--img{padding:0;overflow:hidden;background:#fff;border:1px solid var(--border)}
.tc-cat:hover .tc-cat__ico--img{background:#fff}
.tc-cat__img{width:100%;height:100%;object-fit:cover;display:block}
/* Brand logos vary wildly in aspect ratio (wide wordmarks vs square marks),
   so the box is a fixed-height plate and the logo is centred inside it —
   otherwise a narrow mark hugs the left edge while a wide one fills the row. */
.tc-cat__logo{display:block;height:34px;width:auto;max-width:150px;object-fit:contain;margin:0 auto 2px}
.tc-cat__name{font-size:17px;font-weight:800;color:var(--heading);margin:0}
.tc-cat__desc{font-size:13px;color:var(--muted);line-height:1.5;margin:0;flex:1}
.tc-cat__foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:1px solid var(--border)}
.tc-cat__count{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tc-cat__go{width:30px;height:30px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--tc-cat-accent,var(--ind-orange));transition:background .2s,color .2s}
.tc-cat:hover .tc-cat__go{background:var(--tc-cat-accent,var(--ind-orange));color:#fff}

/* ── Media variant: category photo fills the card top (reference-store
   style) while keeping the industrial details — mono index badge over
   the photo, orange hover bar, count + arrow footer, sharp corners.
   Cards without a photo centre the category icon on the soft grid
   surface, so mixed grids stay uniform. ── */
.tc-cat--media{padding:0;gap:0}
.tc-cat__media{position:relative;display:block;aspect-ratio:4/3;background:var(--soft);border-bottom:1px solid var(--border);overflow:hidden}
.tc-cat__media::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(23,34,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,46,.045) 1px,transparent 1px);background-size:22px 22px}
/* contain, not cover: these are product shots, and cropping them cut the
   tool in half (a saw lost its blade, the compost bin its lid). The whole
   product now fits inside the box, letterboxed. The white background sits
   on the IMG itself, so it fills the element's full box — covering the
   grid pattern behind it — while object-fit only shrinks the picture
   inside; that keeps photos (which are shot on white) seamless without
   needing :has() to detect an image. Padding keeps the product off the
   card edges. */
.tc-cat__media .tc-cat__img{position:relative;width:100%;height:100%;object-fit:contain;background:#fff;padding:14px;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tc-cat--media:hover .tc-cat__img{transform:scale(1.05)}
.tc-cat__media-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tc-cat-accent,var(--heading))}
/* Index moves onto the photo as a navy chip. */
.tc-cat--media .tc-cat__idx{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1;color:#fff;background:rgba(23,34,46,.62);padding:5px 9px;opacity:1;z-index:2}
.tc-cat__body{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;flex:1;min-width:0}
.tc-cat--media .tc-cat__name{font-size:16px}
.tc-cat--media .tc-cat__foot{margin-top:auto}

/* ── SPLIT: checklist + benefits panel ── */
.ind-split{display:flex;gap:56px;align-items:flex-start}
.ind-split__main{flex:1}
.ind-split__aside{flex-shrink:0;width:100%;max-width:400px}
/* ── TIMELINE (historia) ──
   A single rule down the left with a marker per entry. The year is set in
   the mono face at display size so the column scans as dates first, prose
   second — the same "technical label" treatment .ind-mono gets elsewhere.
   Grid rather than absolute markers so a two-line year (or a long entry)
   can't drift out of alignment with its own text. */
.tc-timeline{display:grid;gap:0;margin-top:8px}
.tc-tl{display:grid;grid-template-columns:minmax(88px,132px) 28px 1fr;align-items:start;gap:0}
.tc-tl__year{font-family:var(--mono);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;color:var(--heading);letter-spacing:-.01em;padding:26px 18px 26px 0;text-align:right}
/* The rule is drawn on the middle column so it runs unbroken between
   entries; the marker sits on top of it. */
.tc-tl__rail{position:relative;align-self:stretch;justify-self:center;width:2px;background:var(--border)}
.tc-tl:first-child .tc-tl__rail{background:linear-gradient(var(--card) 0 32px,var(--border) 32px)}
.tc-tl:last-child .tc-tl__rail{background:linear-gradient(var(--border) 0 34px,transparent 34px)}
.tc-tl__dot{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:var(--ind-orange)}
.tc-tl__body{padding:26px 0 26px 22px;border-bottom:1px solid var(--border);min-width:0}
.tc-tl:last-child .tc-tl__body{border-bottom:none}
.tc-tl__t{font-size:18px;font-weight:800;color:var(--heading);margin:0 0 6px}
.tc-tl__d{font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0}
@media(max-width:620px){
  .tc-tl{grid-template-columns:20px 1fr}
  .tc-tl__year{grid-column:2;text-align:left;padding:22px 0 0}
  .tc-tl__rail{grid-column:1;grid-row:1 / span 2}
  .tc-tl__body{grid-column:2;padding:6px 0 22px 16px}
  .tc-tl__dot{top:26px}
}

.tc-feat{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.tc-feat__no{flex-shrink:0;font-family:var(--mono);font-size:14px;font-weight:800;color:var(--ind-orange);width:34px;height:34px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center}
.tc-feat__t{font-size:16px;font-weight:800;color:var(--heading);margin-bottom:3px}
.tc-feat__d{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.ind-benefits{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:34px;border:1px solid rgba(255,255,255,.06)}
.ind-benefits::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(-45deg,var(--ind-orange) 0 12px,rgba(255,255,255,.14) 12px 24px)}
.ind-benefits__title{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:20px}
.ind-benefits__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:rgba(255,255,255,.06);border-left:3px solid var(--ind-orange);margin-bottom:11px}
.ind-benefits__k{font-size:14px;color:rgba(255,255,255,.78);flex-shrink:0}
.ind-benefits__v{font-size:15px;font-weight:800;color:#fff;text-align:right;line-height:1.3}
.ind-benefits__v--accent{color:var(--ind-orange)}
.ind-benefits .bb{display:block;text-align:center;margin-top:15px;box-shadow:none}

/* ── EDITORIAL SHOWCASE (full-bleed) ── */
.ind-showcase{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ind-showcase__bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 100%}
/* Rotator: .ind-showcase__grid is now the cross-fade stage (each brand
   slide is absolutely stacked inside it) rather than the row itself —
   min-height keeps the section from collapsing since absolutely
   positioned slides don't contribute to parent height. */
/* 480px undershot the copy column's real content height (title+lead+
   stats+button, with its 72px top/bottom padding, measures ~542px
   naturally) — the container was too short, so content overflowed past
   its own bottom padding and the button (pinned via margin-top:auto)
   landed on top of the dots on every slide. 560px clears it with room
   to spare. */
.ind-showcase__grid{position:relative;z-index:1;min-height:560px}
.ind-showcase__slide{position:absolute;inset:0;display:flex;align-items:stretch;opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.ind-showcase__slide.is-active{opacity:1;transform:translateX(0);pointer-events:auto}
.ind-showcase__dots{position:absolute;left:24px;bottom:28px;z-index:3;display:flex;gap:8px}
.ind-showcase__dot{width:22px;height:3px;padding:0;border:none;background:rgba(255,255,255,.28);cursor:pointer;transition:background .2s,width .2s}
.ind-showcase__dot.is-active{background:var(--ind-orange);width:34px}
.ind-showcase__dot:focus-visible{outline:2px solid var(--ind-orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ind-showcase__slide{transition:opacity .3s ease;transform:none}}
/* Top-anchored, not centered: if a slide's stack of text happens to be
   taller/shorter than another's, centering it would shift the CTA
   button up/down between slides. Anchoring from the top + pinning the
   button to the bottom via margin-top:auto keeps both the button and
   the persistent dots (positioned at grid level, shared across slides)
   at the same fixed spot no matter which slide is showing. */
.ind-showcase__copy{flex:1;padding:72px 56px 72px 24px;display:flex;flex-direction:column;justify-content:flex-start}
.ind-showcase__cta{margin-top:auto}
/* nowrap: a long bold stat value wrapping the row to a second line was
   exactly what pushed the button (and this fixes it at the source too,
   the margin-top:auto above is the belt-and-braces backstop) */
.ind-showcase__stats{display:flex;flex-wrap:nowrap;gap:20px;margin:8px 0 34px}
.ind-showcase__stat{min-width:0}
.ind-showcase__stat b{display:block;font-size:30px;font-weight:900;line-height:1;color:#fff;white-space:nowrap}
.ind-showcase__stat b.accent{color:var(--ind-orange)}
.ind-showcase__stat span{font-size:13px;color:rgba(255,255,255,.55);margin-top:6px;font-weight:600;display:block;white-space:nowrap}
.ind-showcase__rule{width:1px;background:rgba(255,255,255,.14)}
.ind-showcase__visual{flex:1;min-height:440px;position:relative;background:linear-gradient(135deg,#1d2a3c,#0f1620);border-left:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.ind-showcase__visual::before{content:'';position:absolute;top:-90px;right:-90px;width:300px;height:300px;background:radial-gradient(circle,rgba(234,88,12,.32),transparent 70%)}
.ind-showcase__word{position:relative;z-index:1;text-align:center;padding:40px}
.ind-showcase__word b{font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.03em;color:#fff;line-height:1;display:block}
.ind-showcase__word span{font-size:14px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--ind-orange);margin-top:12px;display:block}
.ind-showcase__chip{position:absolute;bottom:26px;left:26px;z-index:2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:12px 16px;display:flex;align-items:center;gap:10px}
.ind-showcase__chip span:first-child{width:9px;height:9px;border-radius:50%;background:var(--ind-orange);flex-shrink:0}
.ind-showcase__chip span:last-child{font-size:13px;font-weight:600;color:#fff}

/* ── STEPS (connected numbered row) ── */
.ind-steps{display:grid;grid-template-columns:repeat(4,1fr)}
.tc-step{position:relative;padding:32px 26px;background:var(--card);border:1.5px solid var(--border);border-right:none}
.tc-step:last-child{border-right:1.5px solid var(--border)}
.tc-step__no{width:46px;height:46px;background:var(--ind-orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:18px}
.tc-step__t{font-size:17px;font-weight:800;color:var(--heading);margin:0 0 8px}
.tc-step__d{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0}

/* ── MODEL CARDS (de-blanked) ── */
.tc-model{position:relative;overflow:hidden;display:flex;gap:18px;align-items:flex-start;padding:28px;background:var(--card);border:1.5px solid var(--border);transition:border-color .2s,transform .2s,box-shadow .2s}
.tc-model::after{content:'';position:absolute;top:0;left:0;width:0;height:3px;background:var(--ind-orange);transition:width .28s cubic-bezier(.16,1,.3,1)}
.tc-model:hover::after{width:100%}
.tc-model:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 16px 36px rgba(14,26,43,.1)}
.tc-model__idx{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:30px;font-weight:800;color:var(--heading);opacity:.07;line-height:1}
.tc-model .ib{width:46px;height:46px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;color:var(--ind-orange);flex-shrink:0}
.tc-model__t{font-size:19px;font-weight:800;color:var(--heading);margin-bottom:7px}
.tc-model__d{font-size:15px;color:var(--ink-soft);line-height:1.65;margin-bottom:14px}
.tc-model__tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ind-orange);background:var(--blue-soft);padding:5px 10px}

/* ── TESTIMONIALS ── */
.tc-quote{position:relative;padding:30px;background:var(--card);border:1.5px solid var(--border);display:flex;flex-direction:column}
.tc-quote__mark{position:absolute;top:14px;right:22px;font-size:56px;line-height:1;font-weight:900;color:var(--ind-orange);opacity:.14}
.tc-quote__stars{color:var(--amber);font-size:15px;letter-spacing:2px;margin-bottom:14px}
.tc-quote__text{font-size:15px;color:var(--ink-soft);line-height:1.7;flex:1;margin:0 0 20px}
.tc-quote__by{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:18px}
.tc-quote__av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:14px;background:var(--navy)}
.tc-quote__name{font-size:14px;font-weight:800;color:var(--heading)}
.tc-quote__role{font-size:12px;color:var(--muted)}

/* ── TRADES strip ── */
.ind-trades{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.ind-trades__label{flex-shrink:0}
.ind-trades__list{flex:1;display:flex;flex-wrap:wrap;gap:10px;min-width:280px}
.tc-trade{font-size:14px;font-weight:700;color:var(--heading);background:var(--card);border:1.5px solid var(--border);padding:9px 16px;transition:border-color .2s,color .2s;text-decoration:none;display:inline-block}
.tc-trade:hover{border-color:var(--ind-orange);color:var(--ind-orange)}
/* Non-clickable fallback (toolcat_sc_cat_link(): a category slug with no
   matching live term) — same chip shape, but must never read as a link:
   no hover reaction, muted color, dashed border, default cursor. */
.tc-trade--static{color:var(--muted);font-weight:600;border-style:dashed;cursor:default}
.tc-trade--static:hover{border-color:var(--border);color:var(--muted)}

/* ── USE-CASE TABS (Käyttökohteet) ── */
.ind-tabs__nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.ind-tabs__btn{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);background:var(--card);border:1.5px solid var(--border);padding:12px 20px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ind-tabs__btn:hover{border-color:var(--ind-orange);color:var(--ind-orange)}
.ind-tabs__btn.is-active{background:var(--ind-orange);border-color:var(--ind-orange);color:#fff}
.ind-tabs__btn:focus-visible{outline:2px solid var(--ind-orange);outline-offset:2px}
.ind-tabs__panels{position:relative}
.ind-tabs__panel{background:var(--card);border:1.5px solid var(--border);padding:32px}
.ind-tabs__panel[hidden]{display:none}
.ind-tabs__text{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-bottom:22px;max-width:760px}
.ind-tabs__text strong{color:var(--heading)}
.ind-tabs__chips{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:639px){.ind-tabs__panel{padding:24px 20px}}

/* ── responsive ── */
@media(max-width:1023px){
  .ind-hero__grid,.ind-split{flex-direction:column;gap:44px}
  .ind-showcase__copy{padding:56px 24px}
  .ind-showcase__visual{min-height:320px}
  /* Below this width the rotator drops the absolute cross-fade (fixed
     min-height would either clip stacked copy+visual content or leave
     excess empty space) — slides just show/hide via display, stacked
     in normal flow, still driven by the same .is-active class from JS. */
  .ind-showcase__grid{min-height:0}
  .ind-showcase__slide{position:relative;display:none;opacity:1;transform:none;flex-direction:column}
  .ind-showcase__slide.is-active{display:flex}
  .ind-showcase__dots{position:relative;left:auto;bottom:auto;justify-content:center;padding:20px 24px 28px}
  /* nowrap on the stats row exists to stop a long stat value from
     pushing the button down and colliding with the dots (which are
     fixed-position on desktop) — on mobile the dots are already back in
     normal flow below the stacked slide, so there's no collision risk,
     and forcing nowrap here just clips long words off the narrow
     viewport instead. Let it wrap. */
  .ind-showcase__stats{flex-wrap:wrap}
  .ind-showcase__stat b,.ind-showcase__stat span{white-space:normal}
  .ind-steps{grid-template-columns:repeat(2,1fr)}
  .tc-step{border-right:1.5px solid var(--border)}
}
@media(max-width:860px){
  .ind-statbar{grid-template-columns:repeat(2,1fr)}
  .ind-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:639px){
  .ind-steps{grid-template-columns:1fr}
  .ind-hero__inner{padding-top:104px}
}
.tc-quote__av--2{background:var(--ind-orange)}
.tc-quote__av--3{background:#3C4A60}
.brand-row{display:flex;align-items:center;gap:48px;padding:0 24px}

/* ── homepage layout utilities (keep page markup style-free) ── */
.tc-section--soft{background:var(--soft)}
.ind-band{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ind-mt-14{margin-top:14px}
.ind-my-14{margin:14px 0}
.ind-lead--narrow{max-width:470px}
.ind-p0{padding:0}
.ind-showcase__title{font-size:clamp(2rem,3.8vw,3rem);font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:20px 0}
.ind-ticker-head{text-align:center;margin-bottom:16px}
.ind-ticker-head__label{font-size:13px;font-weight:600;color:var(--muted)}
.ind-kicker--center{justify-content:center}
.ind-intro--center{text-align:center;margin-left:auto;margin-right:auto}
.ind-trades__title{font-size:19px;font-weight:800;color:var(--heading);margin-top:8px}

/* statbar / steps count variants (desktop widens; mobile keeps base collapse) */
@media(min-width:861px){.ind-statbar--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.ind-steps--3{grid-template-columns:repeat(3,1fr)}}

/* ── CONTACT PAGE components ── */
.ind-infocard{background:var(--card);border:1.5px solid var(--border);padding:22px;transition:border-color .2s,transform .2s,box-shadow .2s}
.ind-infocard:hover{border-color:var(--ind-orange);transform:translateY(-3px);box-shadow:0 16px 36px rgba(14,26,43,.1)}
/* Clickable card (e.g. käyttöopas quick-nav): kill the anchor underline
   and keep the block layout; titles/text keep their own colours above. */
a.ind-infocard--link{display:block;text-decoration:none}
.ind-infocard__ib{width:42px;height:42px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;color:var(--ind-orange);margin-bottom:12px}
.ind-infocard h3{font-size:15px;font-weight:800;color:var(--heading);margin:0 0 8px}
.ind-infocard p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 4px}
.ind-infocard__val{display:block;font-size:15px;font-weight:800;color:var(--heading);text-decoration:none;margin:2px 0}
.ind-infocard__val:hover{color:var(--ind-orange)}
.ind-infocard__note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.ind-infocard__note strong{color:var(--ink-soft)}
.ind-infocard strong{color:var(--heading)}
.ind-loc{background:var(--card);border:1.5px solid var(--border);padding:24px}
.ind-loc h3{font-size:17px;font-weight:800;color:var(--heading);margin:0 0 4px}
.ind-loc__addr{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px}
.ind-loc__addr strong{color:var(--heading)}
.ind-loc__note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:8px}
.ind-loc__note strong{color:var(--ink-soft)}
.ind-loc__sub{font-weight:400;color:var(--muted);font-size:12.5px}
.ind-divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.ind-map{position:relative;overflow:hidden;border:1.5px solid var(--border);min-height:340px}
.ind-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)}
.ind-grid-split{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:stretch}
@media(max-width:980px){.ind-grid-split{grid-template-columns:1fr}}

/* Wholesale-registration page (pages/wholesale-registration.html):
   why-column beside the CF7 form card. Form column a touch wider. */
.ind-grid-split--form{grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
@media(max-width:980px){.ind-grid-split--form{grid-template-columns:1fr;gap:32px}}
.tc-wholesale-form-card{background:var(--card);border:1.5px solid var(--border);padding:34px;box-shadow:0 10px 30px rgba(14,26,43,.05)}
.tc-wholesale-form-card__head{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.tc-wholesale-form-card__head h2{font-size:21px;font-weight:800;color:var(--heading);margin:0 0 6px;letter-spacing:-.01em}
.tc-wholesale-form-card__head p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
/* CF7 two-column rows on the wholesale form collapse on narrow screens. */
.tc-wholesale-form-card .tc-grid--2{gap:0 18px}
@media(max-width:560px){.tc-wholesale-form-card .tc-grid--2{grid-template-columns:1fr}}
/* Privacy acceptance row: checkbox inline with its label, quiet styling. */
.tc-wholesale-form-card .tc-form-accept{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.tc-wholesale-form-card .tc-form-accept .wpcf7-list-item{margin:0}
.tc-wholesale-form-card .tc-form-accept a{color:var(--blue)}
@media(max-width:980px){.tc-wholesale-form-card{padding:26px 22px}}
.ind-btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ind-person{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1.5px solid var(--border);padding:20px;transition:border-color .2s}
.ind-person:hover{border-color:var(--ind-orange)}
.ind-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:15px;background:var(--navy)}
.ind-avatar--2{background:var(--ind-orange)}
.ind-avatar--3{background:#3C4A60}
.ind-person h3{font-size:15px;font-weight:800;color:var(--heading);margin:0 0 2px}
.ind-person__role{font-size:12px;color:var(--muted);margin:0 0 8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.ind-person a{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:4px}
.ind-person a:hover{color:var(--ind-orange)}
.ind-person svg{flex-shrink:0;opacity:.7}