/* =====================================================
   RADIUS — laojääkide e-pood · STIILID
   Design tokens → komponendid → lehe sektsioonid
   ===================================================== */

:root {
  /* Lehe raam. Kõik konteinerid viitavad neile — ükski vaade ei tohi enda
     jaoks oma numbrit välja mõelda, muidu läheb saidi rütm laiali. */
  --w-page: 1280px;             /* raami laius igal lehel */
  --w-read: 68ch;               /* ühe veeru lugemislaius (tekst, vorm) */
  --w-gutter: 1.5rem;           /* serva äär, sama igal lehel */

  --bg: #f5f4f1;
  --surface: #ffffff;
  --ink: #052846;
  --ink-2: #5c5a52;
  --line: #e4e2db;
  --accent: #A6CE00;            /* ResQ lime */
  --accent-text: #5F7D00;       /* tume lime tekstile - WCAG AA kontrast heledal taustal */
  --accent-ink: #052846;        /* lime taustal on tekst tume, nagu brändiraamatus */
  --brand-navy: #24356B;        /* ResQ sõnamärgi navi */
  --ok: #5F7D00;               /* "laos / õnnestus" tekst: lime tume toon */
  --ok-bg: #f1f6d9;            /* lime hele taust */
  --radius: 14px;
  --font-display: "Poppins", "Sora", system-ui, sans-serif; /* ResQ brändifont */
  --font-body: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow: 0 1px 2px rgba(22,21,15,.05), 0 8px 32px rgba(22,21,15,.07);
  --shadow-lg: 0 4px 12px rgba(22,21,15,.08), 0 24px 64px rgba(22,21,15,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- Ligipääsetavus ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--ink); color: var(--bg);
  border-radius: 0 0 10px 10px; font-weight: 600; font-size: .9rem;
  transition: top .15s;
}
.skip-link:focus { top: 0; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.noscript-note {
  padding: 1rem 1.5rem; background: #fdecec; color: #b42318;
  font-weight: 600; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--font-display); letter-spacing: -.025em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Nupud ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(166,206,0,.45); transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  transition: background .15s;
}
.icon-btn:hover { background: var(--line); }

/* ---------- Päis ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem max(1.5rem, calc(50% - 640px));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { padding-top: .55rem; padding-bottom: .55rem; box-shadow: 0 4px 24px rgba(22,21,15,.09); }
/* Kerimisel: logo väiksemaks, et päis oleks kitsam */
.site-header.is-scrolled .brand-logo { height: 34px; }
.site-header.is-scrolled .brand-tagline { display: none; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; }
.brand-logo { height: 54px; width: auto; display: block; transition: height .2s ease; }
/* Alltekst on TÄPSELT logo laiune: .brand-text kahaneb logo järgi ja tekst
   venitatakse tähtede vahelt servani (inter-character). Nii ei pea teksti
   pikkust käsitsi timmima — sobib nii "Metalli jääkmaterjalid" kui muu. */
.brand-tagline {
  display: block; width: 100%;
  font-family: var(--font-display); font-weight: 600;
  font-size: .55rem; text-transform: uppercase;
  color: var(--brand-navy); margin-top: .32rem;
  text-align: justify; text-align-last: justify; text-justify: inter-character;
  letter-spacing: .13em;                 /* varuvariant, kui inter-character ei toimi */
}
@media (max-width: 760px) { .brand-logo, .site-header.is-scrolled .brand-logo { height: 24px; }
  .brand-tagline { font-size: .5rem; letter-spacing: .08em; } }
@media (max-width: 380px) { .brand-tagline { display: none; } }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; color: var(--brand-navy); }
.brand-word .rq { color: var(--brand-navy); }
.footer .brand-word { color: #fff; }
.footer .brand-word .rq { color: var(--accent); }
.brand-sub { font-size: .6rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .22em; margin-top: .3rem; }

.header-nav { display: flex; gap: 1.3rem; }
.header-nav a { position: relative; font-size: .9rem; font-weight: 600; color: var(--ink-2); padding: .35rem 0; }
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .2s ease;
}
.header-nav a:hover { color: var(--ink); }
/* Esiletõstetud menüüpunkt (Kasulikku): pill, mitte hall link */
.header-nav a.nav-accent {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink); font-weight: 700;
}
.header-nav a.nav-accent svg { width: 15px; height: 15px; color: var(--accent-text); }
.header-nav a.nav-accent::after { content: none; }        /* pillil ei ole allakriipsu */
.header-nav a.nav-accent:hover { background: var(--accent); }
.header-nav a.nav-accent.active { background: var(--accent); }
.header-nav a:hover::after { right: 0; }
@media (max-width: 760px) { .header-nav { display: none; } }
/* Tahvel: päis kahel real - logo+menüü+korv üleval, otsing täislaiuses all */
@media (min-width: 761px) and (max-width: 1023px) {
  .site-header { flex-wrap: wrap; row-gap: .6rem; }
  .search { order: 5; min-width: 100%; max-width: none; }
  .header-nav { gap: 1rem; }
  .header-nav a { font-size: .86rem; }
  .filters { top: 118px; }
}

.search {
  position: relative;
  flex: 1; max-width: 560px;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}

/* ---------- Otsingusoovitused ---------- */
.search-suggest {
  position: absolute; top: calc(100% + 10px); left: -2px; right: -2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden auto; max-height: 430px;
  z-index: 70;
  animation: sugIn .18s ease;
}
@keyframes sugIn { from { opacity: 0; transform: translateY(-6px); } }
.sug-group {
  padding: .5rem 1rem .3rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.sug-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: .2rem; }
.sug-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem; cursor: pointer;
}
.sug-item:hover, .sug-item.is-active { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sug-item .shape { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.sug-item .shape i { width: 17px; height: 17px; }
.sug-item .shape.flat i { height: 8px; }
.sug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sug-main strong { font-size: .87rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-main small { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2); }
.sug-price { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.sug-price small { color: var(--ink-2); }
.sug-tag {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--ink); color: var(--bg);
}
/* "Sama sulam": 1.4305 = AISI 303 · X8CrNiS18-9 · SUS303 */
.sug-syn { flex-wrap: wrap; row-gap: .15rem; }
.sug-syn .sug-tag { background: var(--accent); color: var(--ink); }
.sug-syn small { flex-basis: 100%; padding-left: 2.6rem; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2); }
mark {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: inherit; border-radius: 3px; padding: 0 1px;
}
.search:focus-within { border-color: var(--ink); box-shadow: var(--shadow); }
.search svg { width: 17px; height: 17px; color: var(--ink-2); flex-shrink: 0; }
.search input { flex: 1; border: 0; outline: 0; background: none; font-size: .92rem; }
.search kbd {
  font-family: var(--font-mono); font-size: .7rem;
  padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2);
}

.header-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.lang-switch { display: flex; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-btn { padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.lang-btn.is-active { background: var(--ink); color: var(--bg); }

.cart-btn {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  background: var(--ink); color: var(--bg); border-radius: 999px;
  font-weight: 600; font-size: .9rem;
  transition: transform .15s;
}
.cart-btn:hover { transform: translateY(-1px); }
.cart-btn svg { width: 19px; height: 19px; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.cart-badge.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.45); } }

/* ---------- Kangelane ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7rem) 1.5rem clamp(3rem, 6vw, 5.5rem);
}
/* Oli 1200 — 80 px kitsam kui kataloog otse selle all. Piisavalt vähe, et
   seda ei märka, ja piisavalt palju, et pealkirja vasak serv ei olnud
   esimese tootekaardi servaga kohakuti. Nüüd on. */
.hero-inner { max-width: var(--w-page); margin: 0 auto; position: relative; z-index: 1; }
.hero-kicker {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.2rem;
}
.hero-title { font-size: clamp(2.5rem, 6.5vw, 4.9rem); line-height: 1.03; font-weight: 800; letter-spacing: -.04em; }
.hero-title em { font-style: normal; color: var(--ink); }
.hero-title .dot, .rfq-hero .dot { color: var(--accent); }
.hero-lede { max-width: 46ch; margin-top: 1.4rem; font-size: 1.08rem; color: var(--ink-2); }
.hero-cta { display: flex; gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; max-width: 760px;
}
.hero-stats > div { background: var(--surface); padding: 1.1rem 1.3rem; }
.hero-stats dt { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.hero-stats dd { font-size: .8rem; color: var(--ink-2); }

.hero-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-art svg {
  position: absolute; top: -70px;
  right: max(-140px, calc(50% - 730px)); /* laiekraanil püsib sisu kõrval */
  width: min(62vw, 840px); height: auto;
}
/* Tahvel ja väiksem lauaarvuti: visuaal tagasihoidlikum, ei kata pealkirja */
@media (max-width: 1024px) {
  .hero-art svg { width: 46vw; opacity: .6; }
}
/* ---------- Kangelase FOTO (saag + materjal) + väljakutse ----------
   Pilt: assets/img/resq-saw-transparent.webp (PNG varuvariant), läbipaistev
   taust. Väljakutse "Miinimum pikkust ei ole" ja ühendusjoon EI OLE pildi
   sees — need on tekst ja SVG, seega tõlgitavad ja teravad igal ekraanil.

   MIKS PROTSENDID. Nii väljakutse kui joon on paigutatud pildi enda mõõtude
   suhtes (%), mitte pikslites. Pilt muutub ekraani laiusega, aga roheline
   täpp jääb ikka lõikekoha peale. */
.hero-photo {
  position: absolute; top: clamp(.5rem, 3vw, 2.5rem);   /* ülal: statistikariba jääb pildi alt vabaks */
  /* Pilt nihkub servast VÄLJA (negatiivne right), et jääks pealkirjast rohkem
     õhku ja saag ei suruks teksti kokku. Laiekraanil (calc) püsib pilt sisu
     veeru kõrval, kitsamal on nihe piiratud, et lõikekoht jääks nähtavale. */
  right: max(-100px, calc(50% - 780px));
  width: min(52vw, 700px); pointer-events: none; z-index: 0;
}
.hero-photo picture { display: block; }
.hero-photo img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(5, 40, 70, .14));
}
/* Väljakutse: pildi vasakus servas, kõrgemal kui saeketas — nii ei istu tekst
   ketta peal ega jookse pealkirjaga kokku. left: 0 on sama, mis servani; jäta
   see kirja (mitte tühjaks), muidu sõltub asukoht elementide järjekorrast. */
.hero-callout {
  /* ANKUR ON ALL, MITTE ÜLEVAL. Joon algab pildi 40% kõrguselt; teksti
     alumine serv on sellest 2% kõrgemal (bottom: 62%) ja tekst kasvab
     ÜLESPOOLE. Nii ei saa pikem tõlge ega suurem font kunagi joone peale
     joosta — varem (top: 12%) juhtus täpselt see. */
  position: absolute; left: 0; top: auto; bottom: 62%;
  width: min(260px, 36%); pointer-events: auto; z-index: 2;
}
.hero-callout h3 {
  /* "sertifitseeritud" on 16 tähte: 1,75rem juures ulatus see saeketta
     peale. Alampiir 1,1rem / ülempiir 1,5rem mahub 260 px kasti ära. */
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.55vw, 1.5rem);
  line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .45rem; color: var(--ink);
}
.hero-callout h3 .dot { color: var(--accent); }
.hero-callout p { font-size: .9rem; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 24ch; }
/* Joon ja täpp: kast on pildi suhtes PROTSENTIDES, seega täpp jääb lõikekoha
   peale igal ekraanilaiusel. Praegusel pildil (resq-saw-transparent) on saeketta
   ja toru kokkupuutekoht 38% laiusest ja 51,5% kõrgusest — mõõdetud pildilt.
   Kui pilti vahetad ja lõikekoht nihkub, muuda ainult neid arve:
   .hero-cut-dot left/top = lõikekoht; .hero-callout-line kast lõpeb samas punktis
   (left + width = 38%, top + height = 51,5%). */
.hero-callout-line {
  /* Algus on tahtlikult ALLPOOL väljakutse teksti (tekst lõpeb ~38% juures).
     Teksti kõrgus on pikslites, pildi kõrgus protsentides — kui joon algaks
     kõrgemal, jookseks ta kitsamal ekraanil läbi lause. */
  position: absolute; left: 6%; top: 40%; width: 32%; height: 11.5%;
  overflow: visible; pointer-events: none; z-index: 1;
}
.hero-cut-dot {
  position: absolute; left: 38%; top: 51.5%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent); z-index: 1; pointer-events: none;
}
.hero-cut-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--accent); opacity: .3; animation: heroPulse 2.6s ease-out infinite;
}
@keyframes heroPulse { 0% { transform: scale(.5); opacity: .35; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-cut-dot::after { animation: none; opacity: .18; } }

/* Kitsam laud: pilt väiksem, väljakutse jääb.
   Joon ja täpp kaovad alles 1120 px juures — allpool seda on pilt nii väike,
   et tekst ulatuks joone alguseni (teksti kõrgus ei kahane koos pildiga).
   NB! Ära tõsta seda piiri kõrgemale: 1280 px laiune sülearvuti on tavaline
   ja seal PEAB joon olema. */
@media (max-width: 1120px) {
  .hero-callout-line, .hero-cut-dot { display: none; }
}
@media (max-width: 1180px) {
  .hero-photo { width: min(50vw, 600px); right: -60px; }
  .hero-callout { width: min(220px, 36%); }
}
@media (max-width: 1024px) {
  /* Nihe väiksem: pilt on siin pealkirja lähedal ja ei tohi teksti taha ronida */
  .hero-photo { width: 46vw; top: 1rem; right: -30px; opacity: .96; }
  .hero-callout { display: none; }   /* pealkiri vajab kogu laiust */
}
/* Mobiil: pilt tuleb teksti ALLA, väljakutse selle kõrvale loetava tekstina */
@media (max-width: 820px) {
  .hero-photo {
    position: static; width: auto; margin: 1.6rem -1.5rem 0 0; opacity: 1;
    display: grid; grid-template-columns: 1fr 1.25fr; gap: .8rem; align-items: center; pointer-events: auto;
  }
  .hero-photo picture { order: 2; }
  .hero-photo img { filter: drop-shadow(0 12px 18px rgba(5,40,70,.14)); }
  .hero-callout { display: block; position: static; width: auto; order: 1; }
  .hero-callout h3 { font-size: 1.15rem; }
  .hero-callout p { max-width: none; font-size: .86rem; }
  .hero-callout-line, .hero-cut-dot { display: none; }
}
@media (max-width: 480px) {
  .hero-photo { grid-template-columns: 1fr; margin-right: -1.5rem; }
  .hero-photo picture { order: 2; }
}

/* ===========================================================================
   VANEM SÜLEARVUTI: lai, aga MADAL ekraan
   ---------------------------------------------------------------------------
   13" sülearvuti 1366×768 (Windowsi 125% suurendusega on CSS-aken ~1093×614)
   on laiuselt "lauaarvuti", aga kõrgust on poole vähem kui tänapäevasel
   ekraanil. Senine kangelane (suur padding + 4,9rem pealkiri + 700 px pilt)
   täitis seal terve akna ja laoseisu ei olnud enam näha.

   Need reeglid kehtivad AINULT madala akna korral (max-height) — pikemal
   ekraanil ei muutu mitte midagi. Sellepärast on siin ka min-width: mobiilil
   on oma paigutus ja seda ei tohi puutuda.
   =========================================================================== */
@media (min-width: 821px) and (max-height: 860px) {
  .hero { padding: clamp(1.5rem, 2.5vh, 2.6rem) 1.5rem clamp(1.4rem, 2.5vh, 2.4rem); }
  .hero-title { font-size: clamp(2rem, 3.6vw, 3.3rem); }
  .hero-lede { margin-top: .9rem; font-size: 1rem; }
  .hero-cta { margin-top: 1.3rem; }
  .hero-stats { margin-top: 1.6rem; }
  .hero-stats > div { padding: .85rem 1.1rem; }
  .hero-stats dt { font-size: 1.45rem; }
  /* Pilt madalamaks, et saag ei ulatuks statistikaribale ega USP-kaartidele */
  .hero-photo { width: min(44vw, 540px); top: .5rem; }
  .hero-callout { bottom: 62%; width: min(210px, 36%); }
  .hero-callout h3 { font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
  .hero-callout p { font-size: .85rem; }
  /* Joon JÄÄB. Tekst on siin väiksem ja algab kõrgemalt (8%), nii et see
     lõpeb ~33% juures — joon algab 40% juures ja jääb sellest allapoole. */
  .usp { padding-bottom: .5rem; }
  .usp-card { padding: 1.1rem 1.3rem; }
}
/* Väga madal (nt 1366×768 ilma suurenduseta, brauseri ribad maas) */
@media (min-width: 821px) and (max-height: 700px) {
  .hero { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  /* Alampiir 2,2rem: väiksemaks ei lase, muidu kaob pealkirjalt mõju */
  .hero-title { font-size: clamp(2.2rem, 3.4vw, 2.7rem); }
  .hero-kicker { margin-bottom: .7rem; }
  .hero-lede { margin-top: .7rem; font-size: .95rem; max-width: 42ch; }
  .hero-stats { margin-top: 1.2rem; }
  .hero-photo { width: min(40vw, 460px); }
  .hero-callout { bottom: 62%; }          /* tekst ja joon jäävad alles */
}
/* Madal JA kitsas korraga (nt 1152×648): väljakutse ei mahu pealkirja kõrvale */
@media (min-width: 821px) and (max-width: 1199px) and (max-height: 700px) {
  .hero-callout, .hero-callout-line, .hero-cut-dot { display: none; }
}

.ha { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.ha-line { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1.5; }
.ha-faint { stroke: color-mix(in srgb, var(--ink) 9%, transparent); }
.ha-needle { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 2; stroke-linecap: round; }
.ha-dot { fill: var(--accent); opacity: .65; }
.ha-fill { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ha-spin, .ha-spin-rev, .ha-spin-slower { transform-box: view-box; }
.ha-spin { animation: haSpin 80s linear infinite; }
.ha-spin-rev { animation: haSpin 150s linear infinite reverse; }
.ha-spin-slower { animation: haSpin 190s linear infinite; }
@keyframes haSpin { to { transform: rotate(360deg); } }

/* ---------- Kataloog ---------- */
.catalog { max-width: var(--w-page); margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.catalog-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.catalog-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.catalog-note { color: var(--ink-2); font-size: .85rem; }

.filters {
  position: sticky; top: 62px; z-index: 40;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 0; margin-bottom: .6rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.chip {
  padding: .42rem .95rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: .85rem; font-weight: 500;
  transition: all .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip small { opacity: .55; margin-left: .3rem; font-family: var(--font-mono); font-size: .72rem; }
.filter-right { display: flex; gap: .5rem; margin-left: auto; }
.filter-right select {
  padding: .45rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: .85rem; outline: none; cursor: pointer;
}
.result-count { font-size: .8rem; color: var(--ink-2); margin: .4rem 0 1rem; font-family: var(--font-mono); }

/* ---------- Ristlõigete vektorvalik ---------- */
.shape-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .6rem;
  margin: .4rem 0 1.4rem;
}
.shape-tile {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .9rem .5rem .75rem;
  background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: all .15s ease;
  position: relative;
}
.shape-tile:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.shape-tile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.shape-tile.is-active .shape-ico { color: var(--accent); }
.shape-tile:disabled { opacity: .32; cursor: not-allowed; }
.shape-ico { width: 42px; height: 42px; color: var(--ink); display: grid; place-items: center; }
.shape-ico svg { width: 100%; height: 100%; }
.shape-ico.all-ico { font-size: 1.9rem; line-height: 1; font-family: var(--font-display); }
.shape-label { font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.15; }
.shape-count {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--font-mono); font-size: .64rem; color: var(--ink-2);
}
.shape-tile.is-active .shape-count { color: var(--accent-text); font-weight: 600; }
.footer address { font-style: normal; font-size: .88rem; line-height: 1.7; }
.footer address a:hover { color: #fff; }

/* ---------- Print ---------- */
@media print {
  .site-header, .hero-art, .hero-cta, .filters, .shape-picker,
  .how, .cart-drawer, .drawer-backdrop, .modal-backdrop, .toast,
  .td-add, .row-mm, .row-pcs, .add-btn { display: none !important; }
  body { background: #fff; }
  .buy-table thead th { background: #eee !important; color: #000 !important; }
}

/* ---------- Alamtüübid + mõõdufiltrid ---------- */
.sub-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .9rem 1rem; margin: -.6rem 0 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  animation: cardIn .25s ease;
}
.sub-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-tile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .7rem .5rem; min-width: 84px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg);
  transition: all .15s ease;
  position: relative;
}
.sub-tile:hover { border-color: var(--ink); transform: translateY(-1px); }
.sub-tile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sub-tile.is-active .sub-ico { color: var(--accent-text); }
.sub-ico { width: 40px; height: 32px; color: var(--ink); }
.sub-ico svg { width: 100%; height: 100%; }
.sub-ico .dim { opacity: .55; }
.sub-ico .dim text { font: 600 11px var(--font-mono); fill: currentColor; }
.sub-label { font-size: .68rem; font-weight: 600; text-align: center; line-height: 1.15; max-width: 96px; }
.sub-count { position: absolute; top: 4px; right: 7px; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-2); }

.dim-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.dim-filters .df-label { font-size: .8rem; font-weight: 700; margin-right: .2rem; }
.dim-filters select {
  padding: .45rem .8rem; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--bg);
  font-size: .84rem; font-family: var(--font-mono); outline: none; cursor: pointer;
  transition: border-color .15s;
}
.dim-filters select:focus, .dim-filters select.has-value { border-color: var(--accent); }

/* ---------- Aktiivsed filtrid ---------- */
.active-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.af-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .5rem .32rem .8rem;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.af-tag button {
  width: 18px; height: 18px; border-radius: 50%; font-size: .6rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: var(--bg);
}
.af-tag button:hover { background: var(--accent); }
.af-clear { font-size: .78rem; color: var(--ink-2); text-decoration: underline; }
.af-clear:hover { color: var(--ink); }

/* ---------- Rea/kaardi välgatus (otsingust maandumisel) ---------- */
tr.flash td, .card.flash { animation: flashBg 1.4s ease; }
@keyframes flashBg { 0%, 55% { background-color: color-mix(in srgb, var(--accent) 12%, transparent); } }

/* ---------- Vaatelüliti ---------- */
.view-switch { display: flex; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.view-btn { width: 32px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); }
.view-btn svg { width: 16px; height: 16px; }
.view-btn.is-active { background: var(--ink); color: var(--bg); }

/* ---------- Ostutabel ---------- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.buy-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 980px; }
.buy-table thead th {
  text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2); background: var(--surface);
  padding: .85rem .8rem; white-space: nowrap;
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 2;
}
.buy-table tbody tr { border-bottom: 1px solid var(--line); transition: background .12s; }
.buy-table tbody tr:hover { background: color-mix(in srgb, var(--tone, #999) 4%, var(--surface)); }
.buy-table tbody tr:last-child { border-bottom: 0; }
.buy-table td { padding: .7rem .8rem; vertical-align: middle; }
.td-shape { width: 46px; }
.td-shape .shape { width: 38px; height: 38px; border-radius: 9px; }
.td-shape .shape i { width: 19px; height: 19px; }
.td-shape .shape.flat i { height: 9px; }
.td-name strong { display: block; font-size: .89rem; font-weight: 500; line-height: 1.3; }
.td-name small { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2); }
.td-grade { font-family: var(--font-mono); font-size: .76rem; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.td-dims { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.td-len, .td-pcs { white-space: nowrap; }
.td-len span, .td-pcs span { font-size: .72rem; color: var(--ink-2); }
.row-mm, .row-pcs {
  width: 72px; padding: .4rem .5rem;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-family: var(--font-mono); font-size: .8rem; text-align: right;
  background: var(--bg); outline: none;
  transition: border-color .15s;
}
.row-pcs { width: 56px; }
.row-mm:focus, .row-pcs:focus { border-color: var(--ink); }
.td-weight { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; color: var(--ink-2); }
.td-price { white-space: nowrap; font-family: var(--font-mono); font-size: .8rem; }
.td-price small { color: var(--ink-2); }
.td-sum { font-family: var(--font-mono); white-space: nowrap; }
.td-inc { font-weight: 700; }
tr.over-stock .td-weight::after { content: " ⚠"; color: var(--accent); }
.row-add {
  padding: .45rem .9rem; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.row-add:hover { background: var(--accent); transform: translateY(-1px); }
.row-add.added { background: var(--accent); color: var(--ink); }
.row-add.inq { background: var(--surface); color: var(--accent-text); border: 1.5px solid var(--accent); }
.row-add.inq:hover { background: var(--accent); color: #fff; }
.muted { color: var(--ink-2); }

/* ---------- Sorteeritavad tabelipäised ---------- */
.th-sort {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  cursor: pointer; white-space: nowrap;
}
.th-sort .sort-ind { opacity: .45; font-size: .8em; transition: opacity .15s; }
.th-sort:hover .sort-ind { opacity: 1; }
.th-sort.is-active { color: var(--accent-text); }
.th-sort.is-active .sort-ind { opacity: 1; }

/* ---------- Tootenime link ---------- */
.plink { transition: color .12s; }
.plink:hover { color: var(--accent-text); }

/* ---------- Tooteleht (alamleht) ---------- */
body.detail-open .hero,
body.detail-open .trust,
body.detail-open .usp,
body.detail-open .catalog,
body.detail-open .bulk,
body.detail-open .calcs,
body.detail-open .remind,
body.detail-open .how { display: none; }

.detail { max-width: var(--w-page); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; animation: cardIn .3s ease; }
.detail-crumb {
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: center;
  font-size: .82rem; color: var(--ink-2); margin-bottom: 1.6rem;
}
.detail-crumb a:hover { color: var(--accent-text); }
.detail-crumb strong { color: var(--ink); font-weight: 600; }

.detail-grid { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.detail-visual {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tone) 26%, var(--surface)), color-mix(in srgb, var(--tone) 8%, var(--surface)) 70%);
  border: 1px solid var(--line);
}
.detail-visual .shape { width: 140px; height: 140px; border-radius: 30px; background: none; }
.detail-visual .shape i { width: 84px; height: 84px; }
.detail-visual .shape.flat i { height: 34px; }
.detail-visual .shape.sheet i { height: 18px; }
.detail-visual figcaption {
  position: absolute; bottom: .9rem;
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2);
}

.detail-sku { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-2); letter-spacing: .05em; margin-bottom: .5rem; }
.detail-info h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1rem; line-height: 1.15; }
.detail-info .card-meta { margin-bottom: .6rem; }
.spec-table { width: 100%; max-width: 440px; border-collapse: collapse; margin: 1.5rem 0 1.7rem; font-size: .9rem; }
.spec-table th { text-align: left; font-weight: 500; color: var(--ink-2); padding: .8rem .8rem .8rem 0; width: 46%; line-height: 1.4; vertical-align: top; }
.spec-table td { padding: .8rem 0; font-family: var(--font-mono); font-size: .86rem; line-height: 1.4; vertical-align: top; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 0; }
.detail-price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin: 1rem 0 1.3rem; }
.detail-price small { font-size: .85rem; font-weight: 500; color: var(--ink-2); font-family: var(--font-body); }

.detail-calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; max-width: 480px;
  display: grid; gap: 1rem;
}
.calc-inputs { display: flex; gap: 1rem; flex-wrap: wrap; }
.calc-inputs label { display: flex; flex-direction: column; gap: .35rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.calc-inputs label .calc-wrap { text-transform: none; letter-spacing: 0; color: var(--ink); }
.calc-wrap { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--line); border-radius: 10px; padding: .1rem .7rem .1rem .1rem; background: var(--bg); }
.calc-wrap:focus-within { border-color: var(--ink); }
.calc-wrap input { width: 92px; border: 0; outline: 0; background: none; padding: .55rem .6rem; font-family: var(--font-mono); text-align: right; }
.calc-wrap em { font-style: normal; font-size: .74rem; color: var(--ink-2); }
.calc-out div { display: flex; justify-content: space-between; padding: .22rem 0; font-size: .9rem; }
.calc-out dd { font-family: var(--font-mono); }
.calc-out .strong { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .55rem; }
.calc-out .strong dd { font-family: var(--font-display); }
.stock-note.warn {
  background: #fdf3ec; color: #9a3d00;
  border: 1px solid #f5d9c5; border-radius: 10px;
  padding: .7rem .9rem; font-size: .84rem;
}
.detail-actions { display: grid; gap: .5rem; }

.related { margin-top: 3.5rem; }
.related h2 { font-size: 1.4rem; margin-bottom: 1.1rem; }

/* ---------- Sisulehed (alamlehed) ---------- */
body.page-open .hero,
body.page-open .catalog,
body.page-open .how { display: none; }

/* ===========================================================================
   LEHE LAIUS — ÜKS ALLIKAS
   ---------------------------------------------------------------------------
   Iga leht istub samas raamis: sama serv, sama äär, sama vertikaalrütm.
   Varem oli igal lehel oma number (.page 1280, .kontakt-page 880,
   .rfq-page 880) ja lehelt lehele liikudes hüppas sisu küljelt küljele —
   see luges välja nagu kaks eri saiti.

   Laius on nüüd muutuja. Kui seda kunagi muuta, muutub see KÕIKJAL korraga:
     --w-page  raami laius (kataloog, tooteleht, sisulehed, jalus)
     --w-read  ühe veeru lugemislaius teksti ja vormide jaoks
   =========================================================================== */
.page { max-width: var(--w-page); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; animation: cardIn .3s ease; }
.page-prose { max-width: var(--w-read); }
.page-prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .6rem; letter-spacing: -.02em; }
.page-lead { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 1.8rem; max-width: 52ch; }
.page-prose h2 {
  position: relative;
  font-size: 1.15rem; margin: 1.8rem 0 .55rem;
  padding-top: 1.2rem; padding-left: .9rem; border-top: 1px solid var(--line);
}
.page-prose h2::before {
  content: ""; position: absolute; left: 0; top: calc(1.2rem + .22em);
  width: 4px; height: .95em; border-radius: 2px;
  background: var(--accent);
}
.page-prose p { margin-bottom: .8rem; line-height: 1.65; }
.page-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.page-prose a.btn { color: var(--accent-ink); text-decoration: none; }
.page-prose ol, .page-prose ul { margin: 0 0 1rem 1.3rem; display: grid; gap: .5rem; }
.page-back { margin-top: 2.5rem; }

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.contact-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem;
}
.contact-card h2 { border: 0; padding: 0; margin: 0 0 .5rem; font-size: 1rem; }
.contact-card p { margin-bottom: .4rem; font-size: .92rem; }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-visual { aspect-ratio: auto; height: 130px; max-width: none; }
  .detail-visual .shape { width: 90px; height: 90px; border-radius: 20px; }
  .detail-visual .shape i { width: 54px; height: 54px; }
  .detail-visual .shape.flat i { height: 22px; }
  .detail-visual figcaption { bottom: .5rem; font-size: .6rem; }
}

.grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

/* ---------- Tootekaart ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem; display: flex; flex-direction: column; gap: .8rem;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: cardIn .35s ease backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.card-top { display: flex; align-items: flex-start; gap: .85rem; }
.shape {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone, #999) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tone, #999) 20%, var(--line));
}
.shape i {
  display: block; width: 26px; height: 26px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--tone) 68%, #fff), var(--tone));
}
.shape.round i { border-radius: 50%; }
.shape.tube i { border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%); mask: radial-gradient(circle, transparent 34%, #000 36%); }
.shape.square i { border-radius: 4px; }
.shape.flat i { height: 12px; border-radius: 3px; }
.shape.sheet i { height: 6px; border-radius: 2px; }
.shape.profile i { border-radius: 4px; -webkit-mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); }
.shape.sqtube i { border-radius: 4px; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border: 5px solid currentColor; background: none; }
.shape.hex i { -webkit-clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.shape.angle i { border-radius: 2px; -webkit-clip-path: polygon(0 0, 32% 0, 32% 68%, 100% 68%, 100% 100%, 0 100%); clip-path: polygon(0 0, 32% 0, 32% 68%, 100% 68%, 100% 100%, 0 100%); }

.card-id { flex: 1; min-width: 0; }
.card-sku { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-2); letter-spacing: .04em; }
.card-name { font-family: var(--font-body); font-size: .95rem; font-weight: 500; line-height: 1.35; margin-top: .2rem; letter-spacing: 0; }

.card-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag {
  font-size: .7rem; font-weight: 500; padding: .18rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: transparent;
}
.tag.low { border-color: transparent; background: #fdecec; color: #b42318; font-weight: 600; }
.tag.stock { border-color: transparent; background: var(--ok-bg); color: var(--ok); font-family: var(--font-mono); }

.card-buy { margin-top: auto; display: flex; align-items: center; gap: .6rem; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.price small { font-size: .68rem; font-weight: 500; color: var(--ink-2); font-family: var(--font-body); }
.add-btn {
  margin-left: auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.add-btn .ico { width: 17px; height: 17px; grid-area: 1 / 1; }
.add-btn .ico-check { opacity: 0; transform: scale(.5); }
.add-btn.added .ico-plus { opacity: 0; transform: scale(.5); }
.add-btn.added .ico-check { opacity: 1; transform: scale(1); }
.add-btn .ico { transition: opacity .18s ease, transform .18s ease; }
.add-btn:hover { background: var(--accent); transform: scale(1.08); }
.add-btn.added { background: var(--accent); color: var(--ink); }

/* ---------- Kuidas töötab ---------- */
.how { max-width: var(--w-page); margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.how h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.8rem; }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; list-style: none; }
.how-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.how-steps span { font-family: var(--font-mono); color: var(--accent-text); font-weight: 600; }
.how-steps h3 { margin: .6rem 0 .35rem; font-size: 1.1rem; }
.how-steps p { color: var(--ink-2); font-size: .9rem; }

/* ---------- Jalus ---------- */
.footer {
  position: relative; overflow: hidden;
  background: var(--ink); color: #b8b5ac;
}
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; gap: .7rem; }
.btn-lg svg { width: 20px; height: 20px; transition: transform .2s; }
.btn-lg:hover svg { transform: translateX(4px); }

.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  max-width: var(--w-page); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.footer-kicker {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
}
.footer-cta h2 {
  color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.footer-cta-text > p:last-child { max-width: 44ch; }

.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  max-width: var(--w-page); margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;
}
.footer-about .brand-word { color: #fff; font-size: 1.5rem; }
.footer-about p { margin-top: .7rem; font-size: .95rem; line-height: 1.6; }
.footer h4 {
  color: #fff; font-family: var(--font-display); font-size: .95rem;
  margin-bottom: .8rem; letter-spacing: .01em;
}
.footer-col p, .footer address { font-style: normal; font-size: .88rem; line-height: 1.8; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a, .footer address a { position: relative; transition: color .15s; }
.footer-links a:hover, .footer address a:hover { color: #fff; }
.footer-links a::before {
  content: ""; display: inline-block; width: 0; height: 2px;
  background: var(--accent); vertical-align: middle;
  transition: width .18s ease, margin-right .18s ease;
}
.footer-links a:hover::before { width: 12px; margin-right: 6px; }

/* Hiiglaslik vesimärk-tüpograafia */
.footer-mega {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5rem, 19vw, 17rem);
  line-height: .78; text-align: center; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.08);
  user-select: none; pointer-events: none;
  margin-bottom: -.12em;
  background: linear-gradient(180deg, rgba(166,206,0,.2), transparent 75%);
  -webkit-background-clip: text; background-clip: text;
}

.footer-bottom {
  position: relative;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: var(--w-page); margin: 0 auto;
  padding: 1.1rem 1.5rem 1.3rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .76rem;
}
.footer-cities { font-family: var(--font-mono); letter-spacing: .04em; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-about { grid-column: 1 / -1; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 2.2rem; }
  .footer-bottom { flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
}

/* Mobiilis jalus lühemaks: ainult CTA-riba, veerud peidus */
@media (max-width: 760px) {
  .footer-grid, .footer-mega, .footer-bottom { display: none; }
}

/* ---------- Korvi sahtel ---------- */
.drawer-backdrop, .modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(22,21,15,.45);
  backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(430px, 100vw);
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32,.72,.2,1);
  box-shadow: var(--shadow-lg);
}
.cart-drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: 1.25rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: .6rem 1.4rem; }
.drawer-empty { flex: 1; display: grid; place-items: center; color: var(--ink-2); padding: 2rem; text-align: center; }
.cart-drawer:has(.cart-row) .drawer-empty { display: none; }

.cart-row {
  display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}

/* Ikoon + nimi + SKU on üks klikitav ala, mis viib tootelehele.
   Kogusenupud jäävad väljapoole: seal on klõpsu tähendus hoopis teine ja
   kogemata tootelehele hüppamine keset koguse muutmist oleks kuri. */
.cart-link {
  grid-column: 1; display: grid; grid-template-columns: 44px 1fr; gap: .8rem;
  align-items: center; min-width: 0;
  color: inherit; text-decoration: none !important;
  margin: -.35rem -.5rem; padding: .35rem .5rem; border-radius: 12px;
  transition: background .15s ease;
}
.cart-link:hover { background: var(--bg); }
.cart-link:hover .cart-name { color: var(--accent-text); }
.cart-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cart-link > span:last-child { min-width: 0; }

.cart-row .shape { width: 44px; height: 44px; }
.cart-row .shape i { width: 22px; height: 22px; }
.cart-row .shape.flat i { height: 10px; }
.cart-name {
  display: block; font-size: .88rem; font-weight: 500; line-height: 1.3;
  transition: color .15s ease;
}
.cart-sku { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-2); }
/* Lõikerida: "5 × 100 mm ≈ 0,8 kg" — see, mida klient tellis, mitte kogumass */
.cart-cut { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; padding: .12rem .5rem;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); font-size: .72rem; font-weight: 600; }
.cart-cut .ico-cut { width: 12px; height: 12px; }
.cart-cut small { font-weight: 400; color: var(--ink-2); }
.cart-line-price { font-weight: 700; font-family: var(--font-display); text-align: right; }
.cart-unit-price { font-size: .7rem; color: var(--ink-2); text-align: right; }
/* ---------- Korvirida: laos ei ole nii palju ----------
   Ilmub SAMA rea alla, kus number muutus — mitte toast'ina, mis kaob enne
   lugemist. Ütleb, mis laos on, mis korvis on, ja pakub päringut ühe
   klõpsuga. Sulgemisnupp on olemas, sest teade ei tohi rida igaveseks
   kinni hoida. */
.cart-short {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .3rem; padding: .6rem .8rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 10px; font-size: .8rem; line-height: 1.45; color: var(--ink);
}
.cart-short > span { flex: 1 1 14rem; min-width: 0; }
.cart-short b { font-weight: 700; }
.cart-short.is-gone { background: var(--bg); border-color: var(--line); }
.cart-short-btn {
  padding: .4rem .75rem; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--bg);
  font: 600 .76rem var(--font-body); cursor: pointer; white-space: nowrap;
  transition: transform .15s ease;
}
.cart-short-btn:hover { transform: translateY(-1px); }
.cart-short-x {
  width: 26px; height: 26px; border-radius: 50%; border: 0; background: none;
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
}
.cart-short-x:hover { background: var(--line); color: var(--ink); }
.cart-short-x .ico { width: 12px; height: 12px; }
.cart-row--gone { display: block; }

.qty-ctrl {
  /* Ruudustik on 2-veeruline (link + hind), kogusenupud lähevad järgmisele
     reale ja algavad esimesest veerust — 44 px ikooni võrra taandega, et nad
     joonduks nime, mitte ikooniga. */
  grid-column: 1; margin-left: 52px;
  display: inline-flex; align-items: center; gap: .2rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  width: fit-content; padding: 2px;
}
@media (max-width: 420px) { .qty-ctrl { margin-left: 0; } }
.qty-ctrl button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.qty-ctrl button .ico { width: 13px; height: 13px; }
.qty-ctrl button:hover { background: var(--line); }
.qty-ctrl input {
  width: 62px; border: 0; outline: 0; text-align: center;
  font-family: var(--font-mono); font-size: .82rem; background: none;
}
.qty-unit { font-size: .72rem; color: var(--ink-2); padding-right: .5rem; }

/* KUSTUTAMINE ON OMAETTE TEGEVUS.
   Varem oli "×" samas pillis kohe "+" kõrval: kaks naaberpikslit, millest
   üks lisab tüki ja teine kustutab terve rea. Sõrm eksib, ristike ei ütle
   kellelegi "kustuta" (see tähendab veebis pigem "sulge") ja tagasiteed ei
   olnud. Nüüd: prügikast + sõna, rea teises servas, punase tooniga alles
   siis, kui hiir/fookus on peal — ja eemaldamise saab tagasi võtta. */
.cart-remove {
  grid-column: 2; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .6rem; border: 1.5px solid transparent; border-radius: 999px;
  background: none; cursor: pointer;
  color: var(--ink-2); font-size: .74rem; font-weight: 600; line-height: 1;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.cart-remove .ico { width: 15px; height: 15px; }
.cart-remove:hover, .cart-remove:focus-visible {
  color: #b42318; background: #fdecec; border-color: #f3c9c4;
}
.cart-remove:active { transform: translateY(1px); }
/* Kitsal ekraanil jääb ainult ikoon, aga puuteala jääb 40 px peale */
@media (max-width: 480px) {
  .cart-remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cart-remove { min-width: 40px; min-height: 40px; justify-content: center; padding: 0; }
}

/* Toasti tagasivõtu nupp */
.toast-undo {
  margin-left: .5rem; padding: .25rem .6rem; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--bg) 45%, transparent);
  background: none; color: inherit; font: inherit; font-weight: 700;
  font-size: .78rem; cursor: pointer; white-space: nowrap;
}
.toast-undo:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); }

.drawer-foot { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem; }
.totals div { display: flex; justify-content: space-between; font-size: .9rem; padding: .2rem 0; }
.totals dd { font-family: var(--font-mono); }
.totals .grand { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 .9rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.totals .grand dd { font-family: var(--font-display); }

/* KAKS "KOKKU" RIDA, ERI KAALUGA.
   Meie klient on valdavalt ettevõte: tema jaoks on käibemaks läbisõit ja
   otsuse teeb netohind. Seepärast on netosumma suurim number korvis ja
   käibemaksuga summa selle all väiksemalt — see peab olema nähtav (maksma
   peab ju selle), aga mitte see, mille järgi hinda võrreldakse. */
.totals .grand--net {
  font-size: 1.45rem; margin: .6rem 0 .1rem; padding-top: .7rem;
  align-items: baseline;
}
.totals .grand--net dt { font-size: .9rem; font-weight: 700; }
.totals .grand--gross {
  font-size: .92rem; font-weight: 600; color: var(--ink-2);
  border-top: 0; margin: .1rem 0 .9rem; padding-top: .15rem;
}
.totals .grand--gross dd { font-family: var(--font-mono); }
@media (max-width: 420px) { .totals .grand--net { font-size: 1.3rem; } }

/* Sama rõhk checkouti kokkuvõttes */
.co-summary tr.total--gross td { font-weight: 600; font-size: .88rem; color: var(--ink-2);
  font-family: var(--font-mono); }

/* ---------- Checkout ---------- */
.modal-backdrop { display: grid; place-items: center; padding: 1rem; z-index: 100; }
.modal {
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 20px; padding: 1.6rem;
  animation: modalIn .25s cubic-bezier(.32,.72,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.modal-head h2 { font-size: 1.3rem; }

.steps { display: flex; gap: .4rem; list-style: none; margin-bottom: 1.4rem; }
.steps li {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 600; color: var(--ink-2);
  padding-bottom: .55rem; border-bottom: 3px solid var(--line);
}
.steps li.is-active { color: var(--ink); border-color: var(--accent); }
.steps li.is-done { color: var(--ok); border-color: var(--ok); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.field-grid label { display: flex; flex-direction: column; gap: .35rem; }
.field-grid label > span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.field-grid input {
  padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px;
  outline: none; font-size: .9rem; background: var(--bg);
  transition: border-color .15s;
}
.field-grid input:focus { border-color: var(--ink); }
@media (max-width: 520px) { .field-grid { grid-template-columns: 1fr; } }

.delivery-opts { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.opt {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color .15s;
}
.opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.opt input { accent-color: var(--accent); }
.opt div { flex: 1; }
.opt strong { font-size: .92rem; display: block; }
.opt small { color: var(--ink-2); }
.opt b { font-family: var(--font-display); }

.co-nav { display: flex; justify-content: space-between; gap: .8rem; }
.co-note { font-size: .75rem; color: var(--ink-2); margin-top: .9rem; text-align: center; }

.co-summary { margin-bottom: 1.2rem; }
.co-summary table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.co-summary td { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.co-summary td:last-child { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.co-summary tr.total td { font-weight: 700; font-size: 1rem; border: 0; font-family: var(--font-display); }

.co-done { text-align: center; padding: 1.5rem 0; }
.done-mark {
  width: 74px; height: 74px; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink); font-size: 2.2rem;
  border-radius: 50%;
  animation: pop .5s ease;
}
.co-done h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.co-done .btn { margin-top: 1.3rem; }
#orderNo { font-family: var(--font-mono); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 120;
  transform: translate(-50%, calc(100% + 2.5rem));
  opacity: 0; visibility: hidden;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.3rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  transition: transform .3s cubic-bezier(.32,.72,.2,1), opacity .25s ease, visibility 0s linear .3s;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Tühi olek ---------- */
.empty { text-align: center; padding: 4rem 1rem; color: var(--ink-2); }
.empty .btn { margin-top: 1rem; }

/* ---------- Kerimise lukk (avatud dialoogide ajal) ---------- */
body.no-scroll { overflow: hidden; }

/* ---------- Mobiilne alumine navigatsioon ---------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(22,21,15,.08);
}
.bnav-btn {
  position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .4rem .2rem; border-radius: 12px;
  color: var(--ink-2); font-size: .66rem; font-weight: 600;
  transition: color .15s;
}
.bnav-btn svg { width: 22px; height: 22px; }
.bnav-btn.is-active { color: var(--ink); }
.bnav-btn.is-active svg { color: var(--accent-text); }
.bnav-btn:active { transform: scale(.94); }
.bnav-badge {
  position: absolute; top: 0; right: calc(50% - 20px);
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: .62rem; font-weight: 700;
}

/* ---------- Mobiil: äpi-stiilis paigutus ---------- */
@media (max-width: 760px) {
  .search kbd, .brand-sub { display: none; }
  .site-header { flex-wrap: wrap; gap: .6rem; padding: .7rem 1rem; }
  .search { order: 3; min-width: 100%; }

  /* Alumine nav nähtavale; päise korvinupp peitu (korv elab all navis) */
  .bottom-nav { display: flex; }
  .cart-btn { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Filtrid: horisontaalselt keritavad ribad, mitte murduvad read */
  .filters { top: 110px; flex-wrap: nowrap; overflow: visible; }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex: 1; padding-bottom: 2px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .filter-right { margin-left: 0; flex-shrink: 0; }

  .shape-picker {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: .5rem; padding-bottom: 4px;
  }
  .shape-picker::-webkit-scrollbar { display: none; }
  .shape-tile { min-width: 86px; flex-shrink: 0; }

  /* Kangelane kompaktsemaks */
  .hero { padding-top: 2.5rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-art svg { width: 480px; right: -190px; top: -60px; opacity: .5; }

  /* Korvi sahtel: täisekraan, alt üles nagu äpi leht */
  .cart-drawer {
    width: 100vw; top: 0; border-radius: 0;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.32,.72,.2,1);
  }
  .cart-drawer.is-open { transform: translateY(0); }
  .drawer-head { padding-top: max(1.2rem, env(safe-area-inset-top)); }
  .drawer-foot { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }

  /* Checkout: täisekraani modal */
  .modal-backdrop { padding: 0; }
  .modal {
    width: 100vw; height: 100dvh; max-height: none;
    border-radius: 0;
    padding: max(1.2rem, env(safe-area-inset-top)) 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
    animation: sheetIn .3s cubic-bezier(.32,.72,.2,1);
  }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }

  /* Tabelivaade mobiilis: kompaktsem, kerib horisontaalselt konteineris */
  .buy-table { min-width: 860px; font-size: .8rem; }
  .buy-table td { padding: .5rem .55rem; }
  .td-grade { max-width: 100px; }

  /* Toast alumise navi kohale */
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 92vw; text-align: center; }
}

@media (max-width: 540px) {
  .hero-stats dt { font-size: 1.4rem; }
  .catalog-head { flex-direction: column; gap: .2rem; }
}

/* Väga kitsad ekraanid */
@media (max-width: 380px) {
  .hero-title { font-size: 2.1rem; }
  .lang-switch { padding: 2px; }
  .shape-tile { min-width: 76px; }
  .btn { padding: .72rem 1.2rem; }
}

/* ---------- Lisaväärtuste riba ---------- */
.usp { padding: 0 1.5rem 1rem; }
.usp-inner {
  max-width: var(--w-page); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;
}
.usp-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* HIIREGA REAGEERIB AINULT SEE, MIS PÄRISELT VIIB EDASI.
   Lingita kaart jäi varem hõljuma ja tekitas tunde, et klikk peaks midagi
   tegema. Nüüd tõuseb ja on klikitav ainult lingiga kaart — ja siis TERVE
   kaart, mitte ainult väike "Teenused →" tekst. */
.usp-card--link { cursor: pointer; }
.usp-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.usp-card--link:has(.usp-more:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* Venitatud link: katab kogu kaardi, aga jääb semantiliselt tavaliseks lingiks */
.usp-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.usp-card--link:hover .usp-more { text-decoration: underline; text-underline-offset: 3px; }
.usp-card svg { width: 30px; height: 30px; margin-bottom: .7rem; color: var(--accent-text); }
.usp-card h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.usp-card p { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.usp-card a { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--accent-text); }
.usp-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.usp-hot { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.usp-hot svg { color: var(--accent-text); }
.usp-hot::after {
  content: "KIIREIM"; position: absolute; top: 1rem; right: 1rem;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .14em;
  padding: .25rem .55rem; border-radius: 999px;
  background: var(--accent); color: var(--ink);
}

/* ---------- Päringu modal ---------- */
.inq-hint {
  display: flex; align-items: center; gap: .9rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1.5px solid var(--accent); border-radius: 12px;
  padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.inq-hint svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-text); }
.inq-hint strong { font-size: .92rem; display: block; }
.inq-hint p { font-size: .8rem; color: var(--ink-2); margin: 0; }
.inq-hint div { flex: 1; }
.inq-hint .btn { flex-shrink: 0; padding: .5rem 1rem; font-size: .85rem; }
.inq-msg { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.inq-msg > span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.inq-msg textarea {
  padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px;
  outline: none; font: inherit; font-weight: 400; font-size: .9rem; background: var(--bg);
  resize: vertical; transition: border-color .15s;
}
.inq-msg textarea:focus { border-color: var(--ink); }
#inquiryForm .field-grid select {
  padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px;
  outline: none; font-size: .9rem; background: var(--bg); cursor: pointer;
}
@media (max-width: 760px) { .inq-hint { flex-wrap: wrap; } }

/* ---------- Alamlehtede päis (staatilised HTML-lehed) ---------- */
.subpage-header { flex-wrap: wrap; }
.btn-sm { padding: .55rem 1.15rem; font-size: .88rem; }
.usp-note {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 1.2rem 0; font-weight: 600;
}

/* ---------- Viimistlus ---------- */
::selection { background: var(--ink); color: var(--accent); }

/* Peen punktimuster kangelase taustal */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 78%);
  opacity: .45;
}

/* Õhuke moodne kerimisriba */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdcac1; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }

/* Suured numbrid display-fondis ühtlaselt */
.hero-stats dt, .price, .detail-price, .cart-line-price { font-variant-numeric: tabular-nums; }

/* Päise otsing sulandub konteinerisse ka ülilaiadel ekraanidel */
@media (min-width: 1500px) {
  .search { max-width: 620px; }
}

/* ---------- Pagineerimine ---------- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: .35rem;
  margin: 1.6rem 0 .4rem; flex-wrap: wrap;
}
.pg-btn {
  min-width: 40px; height: 40px; padding: 0 .6rem;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface);
  font-family: var(--font-mono); font-size: .88rem; font-weight: 600;
  display: grid; place-items: center;
  transition: all .15s ease;
}
.pg-btn:hover:not(:disabled):not(.is-active) { border-color: var(--ink); transform: translateY(-1px); }
.pg-btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-gap { color: var(--ink-2); padding: 0 .2rem; }
.table-wrap.is-loading, #productGrid.is-loading { opacity: .45; transition: opacity .15s; }

/* ---------- Kaalukalkulaator ---------- */
.calcs { padding: 1rem 1.5rem 4.5rem; }
.calcs-inner { max-width: var(--w-page); margin: 0 auto; }
.calcs-kicker, .page-kicker {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem;
}
.calcs-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .4rem; }
.calcs-note { color: var(--ink-2); font-size: .92rem; max-width: 54ch; }
.calcs-grid {
  display: grid; grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 1.5rem; margin-top: 1.6rem; align-items: stretch;
}
.calc-preview {
  position: relative; display: grid; place-items: center;
  background: var(--ink); border-radius: 20px; padding: 1.5rem;
  overflow: hidden;
}
.calc-preview::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.calc-preview svg { width: min(100%, 340px); position: relative; }
.calc-preview figcaption {
  position: absolute; bottom: .9rem;
  font-family: var(--font-mono); font-size: .68rem; color: rgba(255,255,255,.45);
}
.wc-shape-fill { fill: #d9d6cd; }
.wc-shape-stroke { fill: none; stroke: #d9d6cd; }
.wc-dim-line { stroke: var(--accent); stroke-width: 1.5; }
.wc-dim-head { fill: var(--accent); }
.wc-dim-text { font: 600 12px var(--font-mono); fill: #cde36a; }

.calc-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.5rem; display: grid; gap: 1.1rem; align-content: start;
}
.wc-shapes { display: flex; gap: .5rem; flex-wrap: wrap; }
.wc-shape {
  width: 56px; height: 56px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--bg);
  display: grid; place-items: center; color: var(--ink);
  transition: all .15s ease;
}
.wc-shape svg { width: 30px; height: 30px; }
.wc-shape:hover { border-color: var(--ink); transform: translateY(-2px); }
.wc-shape.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent-text); }
.wc-fields { display: flex; gap: .9rem 1.1rem; flex-wrap: wrap; align-items: end; }
.wc-fields label { display: flex; flex-direction: column; gap: .35rem; }
.wc-fields label > span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.wc-fields select {
  padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: .88rem; outline: none; cursor: pointer;
}
.wc-fields .calc-wrap input { width: 84px; }
.wc-dims { display: contents; }
.wc-out div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .92rem; border-bottom: 1px dashed var(--line); }
.wc-out dd { font-family: var(--font-mono); }
.wc-out .strong { font-weight: 800; font-size: 1.25rem; border-bottom: 0; padding-top: .55rem; }
.wc-out .strong dd { font-family: var(--font-display); color: var(--accent-text); }

.wc-match h3 { font-size: .95rem; margin-bottom: .5rem; }
.wc-match-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: .45rem; transition: border-color .15s, transform .15s;
}
.wc-match-row:hover { border-color: var(--accent); transform: translateX(3px); }
.wc-match-row .shape { width: 32px; height: 32px; border-radius: 8px; }
.wc-match-row .shape i { width: 16px; height: 16px; }
.wc-match-row .shape.flat i { height: 7px; }
.wc-mr-name { flex: 1; min-width: 0; font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-mr-name small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .68rem; color: var(--ink-2); }
.wc-mr-price { font-family: var(--font-mono); font-size: .8rem; white-space: nowrap; }
.wc-more { font-size: .84rem; font-weight: 600; color: var(--accent-text); }
.wc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-none { font-size: .86rem; color: var(--ink-2); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .calcs-grid { grid-template-columns: 1fr; }
  .calc-preview { min-height: 300px; }
}

/* ---------- Kasulikku: tööriistakaardid ---------- */
.page-wide { max-width: none; }
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem; margin: 1.6rem 0 2.2rem;
}
.tool-card {
  display: flex; flex-direction: column; gap: .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none !important;
}
a.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.tool-ico { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); display: grid; place-items: center; color: var(--accent-text); }
.tool-ico svg { width: 24px; height: 24px; }
.tool-body strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: .25rem; }
.tool-body span { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.tool-cta { font-size: .86rem; font-weight: 700; color: var(--accent-text); margin-top: auto; }
a.tool-card:hover .tool-cta { text-decoration: underline; text-underline-offset: 3px; }
.tool-card.is-soon { opacity: .62; }
.tool-card.is-soon .tool-ico { background: var(--bg); color: var(--ink-2); }
.tool-soon {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
}

/* ===========================================================================
   DOKUMENDID („Kasulikku“ lehel)
   ---------------------------------------------------------------------------
   Tahtlikult TEISTSUGUNE kui .tool-card. Tööriistakaart on kutse midagi teha
   („Ava tööriist →“), dokument on kutse midagi lugeda. Kui mõlemad näeksid
   ühesugused välja, lubaks leht valet.
   Seepärast: madalam rida, ilma varjuta, väiksem ikoon, nool ilmub hõljudes.
   =========================================================================== */
.doc-list { list-style: none; margin: 1.2rem 0 2.4rem; padding: 0; display: grid; gap: .5rem; }
.doc-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none !important; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.doc-item:hover { border-color: var(--accent); transform: translateX(3px); }
.doc-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--bg); color: var(--ink-2);
}
.doc-item:hover .doc-ico { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text); }
.doc-ico svg { width: 19px; height: 19px; }
.doc-body { flex: 1; min-width: 0; }
.doc-body strong { display: block; font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.doc-body span { display: block; margin-top: .1rem; font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.doc-arrow {
  font-size: 1.05rem; color: var(--accent-text); flex-shrink: 0;
  opacity: 0; transform: translateX(-4px); transition: all .16s ease;
}
.doc-item:hover .doc-arrow { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .doc-item { padding: .8rem .9rem; gap: .8rem; }
  .doc-arrow { display: none; }
}

/* ===========================================================================
   KONTAKTILEHT (.kt-*)
   ---------------------------------------------------------------------------
   Ehitatud samast sõnavarast, mis kalkulaator ja projektipäring: kicker,
   suur pealkiri rohelise punktiga, 20 px kaardid, tume paneel punktvõrguga.
   Nimeruum on .kt-, sest vana .k-map nimi tähistas korraga nii linki kui
   kaardikonteinerit ja stiilid jooksid üksteisele sisse.
   =========================================================================== */

/* --- 1. pealkiri + olek ---------------------------------------------------- */
.kt-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
  padding: 1rem 0 2rem; border-bottom: 1px solid var(--line);
}
.kt-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -.035em; line-height: 1.02; margin-bottom: .8rem; }
.kt-hero .dot { color: var(--accent); }
.kt-hero .page-lead { margin-bottom: 0; }

.kt-status {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1.1rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .86rem; white-space: nowrap;
}
.kt-status strong { display: block; font-family: var(--font-display); font-size: .95rem; letter-spacing: -.01em; }
.kt-status span:not(.kt-status-dot) { display: block; color: var(--ink-2); font-family: var(--font-mono); font-size: .74rem; margin-top: .1rem; }
.kt-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kt-status.is-open .kt-status-dot   { background: var(--ok, #2f7d32); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok, #2f7d32) 18%, transparent); animation: ktPulse 2.4s ease-in-out infinite; }
.kt-status.is-closed .kt-status-dot { background: var(--ink-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-2) 14%, transparent); }
@keyframes ktPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok, #2f7d32) 8%, transparent); } }

/* --- 2. kanalid ------------------------------------------------------------ */
.kt-channels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin: 1.8rem 0 .9rem;
}
.kt-ch {
  position: relative; display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 1.4rem; min-height: 152px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  color: inherit; text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.kt-ch:hover, .kt-ch:has(a.kt-ch-body:hover) { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.kt-ch-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text);
}
.kt-ch-ico svg { width: 22px; height: 22px; }
.kt-ch-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; text-decoration: none !important; color: inherit; }
.kt-ch-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.kt-ch-value { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.2; word-break: break-word; }
.kt-ch-meta { font-size: .84rem; color: var(--ink-2); line-height: 1.5; margin-top: .25rem; }
.kt-ch-arrow {
  position: absolute; right: 1.2rem; bottom: 1.1rem;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-text);
  transform: translateX(-4px); opacity: 0; transition: all .18s ease;
}
a.kt-ch:hover .kt-ch-arrow { transform: none; opacity: 1; }

/* Helistamine on laokliendi esimene valik — see kaart on tumedal. */
.kt-ch--call { background: var(--ink); color: #fff; border-color: var(--ink); }
.kt-ch--call .kt-ch-ico { background: var(--accent); color: var(--accent-ink, var(--ink)); }
.kt-ch--call .kt-ch-label, .kt-ch--call .kt-ch-meta { color: rgba(255,255,255,.62); }
.kt-ch--call .kt-ch-arrow { color: var(--accent); }
.kt-ch--call:hover { border-color: var(--accent); }

.kt-copy {
  position: absolute; right: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font: 600 .74rem var(--font-body); cursor: pointer;
  transition: all .15s ease;
}
.kt-copy svg { width: 14px; height: 14px; }
.kt-copy:hover { border-color: var(--ink); color: var(--ink); }
.kt-copy.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, var(--ink)); }
.kt-copy--sm { position: static; padding: .3rem; border-radius: 8px; }
.kt-copy--sm span { display: none; }

.kt-vcard { margin: 0 0 2.6rem; font-size: .84rem; }
.kt-vcard a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: .1rem; }
.kt-vcard a:hover { color: var(--ink); border-color: var(--ink); }
.kt-vcard svg { width: 15px; height: 15px; }

/* --- 3. tarne + väljastuspunktid ------------------------------------------ */
.kt-pickup {
  display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 1rem;
  margin: 0 0 1rem; align-items: stretch;
}
.kt-promise {
  position: relative; overflow: hidden;
  background: var(--ink); color: #d8d5cc; border-radius: 20px;
  padding: 1.7rem 1.7rem 1.6rem; display: flex; flex-direction: column;
}
.kt-promise::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.kt-promise > * { position: relative; }
.kt-promise-kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .7rem; }
.kt-promise h2 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.025em; line-height: 1.12; margin-bottom: .8rem; }
.kt-promise h2 .dot { color: var(--accent); }
.kt-promise p { line-height: 1.65; font-size: .94rem; }
.kt-promise strong { color: #fff; }
.kt-promise-link { margin-top: auto; padding-top: 1.2rem; color: var(--accent); font-weight: 700; font-size: .88rem; text-decoration: none; }
.kt-promise-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.kt-points { list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; }
.kt-point {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.05rem 1.2rem;
}
.kt-point-num { font-family: var(--font-mono); font-weight: 600; font-size: .78rem; color: var(--accent-text); padding-top: .2rem; letter-spacing: .04em; }
.kt-point > div { flex: 1; min-width: 0; }
.kt-point h3 { font-size: 1rem; margin-bottom: .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kt-point p { color: var(--ink-2); font-size: .9rem; line-height: 1.55; margin: 0; }
.kt-point-link { display: inline-block; margin-top: .45rem; font-size: .84rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.kt-point-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.kt-point.is-soon { opacity: .6; border-style: dashed; }
.kt-soon {
  font-family: var(--font-mono); font-weight: 500; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2);
}

/* --- 4. foto + kaart ------------------------------------------------------- */
.kt-place { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 2.6rem; }
.kt-photo { margin: 0; }
.kt-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 20px; display: block; }
.kt-photo figcaption { margin-top: .55rem; font-size: .8rem; color: var(--ink-2); font-family: var(--font-mono); }
.kt-map {
  min-height: 300px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface);
}
.kt-map-load {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.6rem; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit; transition: background .15s;
}
.kt-map-load:hover { background: var(--bg); }
.kt-map-load:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.kt-map-pin { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text); flex-shrink: 0; }
.kt-map-pin svg { width: 24px; height: 24px; }
.kt-map-load strong { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: .15rem; }
.kt-map-load small { color: var(--ink-2); font-size: .8rem; line-height: 1.45; display: block; max-width: 30ch; }
.kt-map-frame { flex: 1; width: 100%; min-height: 300px; border: 0; display: block; }
.kt-map-link { display: block; padding: .6rem 1rem; font-size: .84rem; text-align: center; border-top: 1px solid var(--line); font-weight: 600; color: var(--accent-text); text-decoration: none; }

/* --- 5. rekvisiidid -------------------------------------------------------- */
.kt-sec { font-size: 1.25rem; margin: 0 0 .9rem; letter-spacing: -.015em; }
.kt-req { margin-bottom: 2.4rem; }
.kt-req-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.2rem; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: .4rem 1.4rem;
}
.kt-req-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.kt-req-row:nth-last-child(-n+2) { border-bottom: 0; }
.kt-req-row dt { width: 112px; flex-shrink: 0; color: var(--ink-2); font-size: .82rem; }
.kt-req-row dd { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; font-family: var(--font-mono); min-width: 0; }
.kt-req-row dd > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 6. tegevuskutse ------------------------------------------------------- */
.kt-cta {
  padding: 1.4rem 1.6rem;
  border: 1.5px solid var(--line); border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.kt-cta p { max-width: 52ch; margin: 0; }
.kt-cta a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* --- reageerivus ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .kt-channels { grid-template-columns: 1fr 1fr; }
  .kt-ch--rfq { grid-column: 1 / -1; min-height: 0; }
  .kt-pickup { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kt-hero { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .kt-status { white-space: normal; width: fit-content; }
  .kt-channels { grid-template-columns: 1fr; }
  .kt-ch { min-height: 0; }
  .kt-place { grid-template-columns: 1fr; }
  .kt-photo img { min-height: 0; height: auto; }
  .kt-req-grid { grid-template-columns: 1fr; }
  .kt-req-row:nth-last-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .kt-req-row:last-child { border-bottom: 0; }
  .kt-req-row dt { width: 96px; }
}

/* ---------- Korvi-lend ja tagasiside ---------- */
.fly-dot {
  position: fixed; z-index: 130; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 4px 14px rgba(166,206,0,.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.cart-btn.bump, .bnav-btn.bump { animation: cartBump .45s cubic-bezier(.32,.72,.2,1); }
@keyframes cartBump { 35% { transform: scale(1.12); } 70% { transform: scale(.96); } }

.toast { display: flex; align-items: center; gap: .55rem; }
.toast svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.drawer-empty { display: grid; place-content: center; justify-items: center; gap: 1rem; }
.empty-cart-art {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1.5px dashed var(--line);
  color: var(--ink-2);
}
.empty-cart-art svg { width: 34px; height: 34px; }

.card:hover .shape i { transform: scale(1.07) rotate(-3deg); }
.shape i { transition: transform .25s ease; }

/* ---------- E-posti kopeerimise teavitus (alamlehed) ---------- */
.copy-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 120;
  transform: translate(-50%, calc(100% + 2.5rem));
  opacity: 0;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.3rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  transition: transform .3s cubic-bezier(.32,.72,.2,1);
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.copy-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Vanem sülearvuti: säästlikum vertikaalruum ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { padding-top: 2.6rem; padding-bottom: 2.2rem; }
  .hero-stats { margin-top: 1.8rem; }
  .hero-stats > div { padding: .85rem 1.1rem; }
  .hero-stats dt { font-size: 1.45rem; }
  .usp-card { padding: 1.1rem 1.3rem; }
}

/* ---------- Tahvel: kaardivaade ja modalid mugavamaks ---------- */
@media (min-width: 761px) and (max-width: 1023px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .buy-table { min-width: 900px; }
  .modal { width: min(600px, 94vw); }
  .cart-drawer { width: min(420px, 92vw); }
  .hero-stats { max-width: none; }
}

/* ---------- Puuteseadmed: suuremad sihtalad (WCAG 44px) ---------- */
@media (hover: none) and (pointer: coarse) {
  .qty-ctrl button { width: 34px; height: 34px; }
  .icon-btn { width: 42px; height: 42px; }
  .pg-btn { min-width: 44px; height: 44px; }
  .row-add { padding: .6rem 1rem; }
  .chip { padding: .55rem 1rem; }
  .header-nav a, .footer-links a { padding: .45rem 0; display: inline-block; }
}

/* ---------- Ultralai (2560+): tüpograafia ei paisu lõputult ---------- */
@media (min-width: 2000px) {
  .hero-title { font-size: 4.9rem; }
  .footer-mega { font-size: 16rem; }
}

/* ---------- Projektipäringu koostaja ---------- */
/* Sama põhimõte, mis kontaktilehel: raam ühine, tekst kitsas.
   Päringu paneelid ise tohivad olla laiad — seal on tabelilaadsed read ja
   kitsas veerg surus need varem kokku. */
.rfq-page .rfq-hero > p,
.rfq-page .rfq-hero > h1 { max-width: var(--w-read); }
.rfq-page .rfq { max-width: var(--w-page); }
.rfq-hero { padding-bottom: 1.6rem; }
.rfq-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.035em; line-height: 1.05; margin-bottom: .8rem; }
.rfq-hero em { font-style: normal; color: var(--ink); }

.rfq-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.1rem;
}
.rfq-panel h2 { font-size: 1.15rem; }
.rfq-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.rfq-example { font-size: .82rem; font-weight: 600; color: var(--accent-text); }
.rfq-example:hover { text-decoration: underline; text-underline-offset: 3px; }
.rfq-hint { font-size: .82rem; color: var(--ink-2); margin: .35rem 0 1.1rem; }

.rfq-line { margin-bottom: .7rem; }
.rfq-line-top { display: flex; align-items: center; gap: .7rem; }
.rfq-idx { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); width: 22px; flex-shrink: 0; }
.rfq-input-wrap { position: relative; flex: 1; }
.rfq-input {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); font-size: .95rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.rfq-input:focus { border-color: var(--ink); box-shadow: var(--shadow); background: var(--surface); }
.rfq-line.has-stock .rfq-input { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.rfq-del {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--ink-2);
}
.rfq-del svg { width: 13px; height: 13px; }
.rfq-del:hover { background: #fdecec; color: #b42318; }

.rfq-sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: sugIn .15s ease;
}
.rfq-sugg-item {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .9rem; text-align: left; font-size: .88rem;
}
.rfq-sugg-item:hover, .rfq-sugg-item.is-active { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.rfq-sugg-kind {
  font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-2); width: 52px; flex-shrink: 0;
}

.rfq-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem 0 0 calc(22px + .7rem); }
.rfq-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 500;
  padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
}
.rfq-chip em { font-style: normal; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.rfq-ghost { border-style: dashed; color: var(--ink-2); cursor: pointer; }
.rfq-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.rfq-stock { border-color: transparent; background: var(--ok-bg); color: var(--ok); font-family: var(--font-mono); }
.rfq-summary { margin-top: 1rem; font-size: .9rem; color: var(--ink-2); }
.rfq-sum-stock { color: var(--ok); font-weight: 600; }

.rfq-adv {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  margin-bottom: 1.1rem; background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.rfq-adv summary {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: 1.1rem 1.5rem; cursor: pointer; list-style: none;
}
.rfq-adv summary::-webkit-details-marker { display: none; }
.rfq-adv summary span { font-family: var(--font-display); font-weight: 600; }
.rfq-adv summary small { color: var(--ink-2); font-size: .82rem; }
.rfq-adv summary::before { content: "+"; font-family: var(--font-mono); color: var(--accent-text); font-weight: 600; }
.rfq-adv[open] summary::before { content: "−"; }
.rfq-adv[open] { border-style: solid; background: var(--surface); }
.rfq-adv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem;
  padding: .3rem 1.5rem 1.5rem;
}
.rfq-adv-grid label { display: flex; flex-direction: column; gap: .35rem; }
.rfq-adv-grid label > span { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.rfq-adv-grid select, .rfq-adv-grid input[type="text"], .rfq-adv-grid input[type="date"], .rfq-adv-grid textarea {
  padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); font: inherit; font-size: .9rem; outline: none;
}
.rfq-adv-grid select:focus, .rfq-adv-grid input:focus, .rfq-adv-grid textarea:focus { border-color: var(--ink); }
.rfq-check { flex-direction: row !important; align-items: center; gap: .6rem !important; }
.rfq-check span { text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; font-weight: 500 !important; color: var(--ink) !important; }
.rfq-check input { accent-color: var(--accent); width: 17px; height: 17px; }
.rfq-notes { grid-column: 1 / -1; }
.rfq-notes textarea { resize: vertical; }

.rfq-done { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; }
.rfq-done-list { list-style: none; margin: 1rem auto 0; max-width: 420px; text-align: left; }
.rfq-done-list li { padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.rfq-stock-mini { font-family: var(--font-mono); font-size: .66rem; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: .1rem .45rem; }

@media (max-width: 640px) {
  .rfq-adv-grid { grid-template-columns: 1fr; }
  .rfq-chips { padding-left: 0; }
}

/* ---------- Tasuta lõikamine detailideks (kuni 3 m positsiooni kohta) ---------- */
.cut-viz { border-radius: 12px; padding: .85rem 1rem; }
.cut-viz.ok { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cut-viz.over { background: var(--bg); border: 1px dashed var(--line); }
.cut-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .84rem; }
.cut-head svg { width: 17px; height: 17px; color: var(--accent-text); flex-shrink: 0; }
.cut-head strong { font-size: .86rem; }
.cut-head span { color: var(--ink-2); font-family: var(--font-mono); font-size: .74rem; }
.cut-bar {
  display: flex; gap: 2px; height: 12px; margin-top: .6rem;
  border-radius: 6px; overflow: hidden;
}
.cut-bar i { background: var(--accent); border-radius: 2px; min-width: 3px; }
.cut-bar b { background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 2px; }
.cut-note { font-size: .78rem; color: var(--ink-2); margin-top: .45rem; }

.footer-subbrand { font-size: .78rem; color: #8a877e; margin-top: .8rem; max-width: 32ch; }

/* ---------- Täiuslikkuse pass ---------- */
.empty-sub { font-size: .88rem; color: var(--ink-2); max-width: 46ch; margin: .4rem auto 0; }
.empty-sub em { font-style: normal; font-family: var(--font-mono); color: var(--ink); }
.empty-sub a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 2px; }

.detail-share {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); transition: all .15s;
}
.detail-share svg { width: 14px; height: 14px; }
.detail-share:hover { border-color: var(--ink); color: var(--ink); }

#toTop {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#toTop svg { width: 20px; height: 20px; }
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }
#toTop:hover { background: var(--brand-navy); }
@media (max-width: 760px) { #toTop { display: none; } }

/* Fookusrõngas ainult klaviatuuril */
.add-btn:focus:not(:focus-visible), .row-add:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }

/* ---------- Päringuvorm (request.php) ---------- */
.rq-form { margin: 2rem 0 1rem; max-width: 720px; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.rq-field { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.rq-field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.rq-field label small { font-weight: 400; color: var(--ink-2); }
.rq-field input, .rq-field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .85rem; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.rq-field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.rq-field input:focus, .rq-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.rq-field input:user-invalid, .rq-field textarea:user-invalid { border-color: #c2453b; }
.rq-err { font-size: .8rem; color: #c2453b; font-weight: 500; }
.rq-check { margin: 0 0 1.4rem; font-size: .9rem; }
.rq-check label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.rq-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.rq-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.rq-or { font-size: .9rem; color: var(--ink-2); }
.rq-or a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--accent); }
.rq-note { margin-top: 1.1rem; font-size: .82rem; color: var(--ink-2); }
.rq-note a { text-decoration: underline; }
/* Meepott: peidus inimestele, aga mitte display:none (osa botte kontrollib seda) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .rq-grid { grid-template-columns: 1fr; } }

/* ---------- Tühi tulemus: pakub lahenduse, mitte tupiku ---------- */
.empty-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
.empty-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }

/* ---------- Tooteleht (product.php) ---------- */
.pd-buy {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  align-items: start; margin: 1.8rem 0 2rem; padding: 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pd-visual { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.pd-shape { display: block; color: var(--tone, var(--ink-2)); }
.pd-cert {
  font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok); white-space: nowrap;
}
.pd-main { min-width: 0; }
.pd-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pd-price-now { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.pd-price-unit { color: var(--ink-2); font-size: 1rem; }
.pd-vat-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pd-vat-toggle button {
  font: inherit; font-size: .78rem; padding: .25rem .7rem; border: 0;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.pd-vat-toggle button.is-active { background: var(--ink); color: #fff; }
.pd-stock { margin: .5rem 0 1rem; font-size: .95rem; color: var(--ink-2); }
.pd-stock strong { color: var(--ink); }
.pd-stock.is-low strong { color: #b4372c; }
.pd-approx { color: var(--ink-3, var(--ink-2)); font-size: .88rem; }

.pd-calc { border-top: 1px solid var(--line-soft, var(--line)); padding-top: 1rem; }
.pd-calc-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 0 0 .7rem; font-family: var(--font-mono); }
.pd-calc-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.pd-calc-row label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--ink-2); }
.pd-calc-row input {
  font: inherit; width: 8rem; padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink);
}
.pd-calc-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.pd-calc-out { margin: .9rem 0 1rem; font-size: 1.02rem; }
.pd-calc-out strong { font-family: var(--font-display); font-size: 1.25rem; }
.pd-over { color: #b4372c; font-weight: 600; font-size: .85rem; }
.pd-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.pd-msg { margin: .8rem 0 0; font-size: .88rem; font-weight: 500; }
.pd-msg.is-ok  { color: var(--ok); }
.pd-msg.is-err { color: #b4372c; }

.pd-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem 1.4rem; margin: 1.4rem 0 2rem; }
.pd-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.pd-facts dd { margin: .15rem 0 0; font-weight: 600; }
.pd-syn { display: block; margin-top: .2rem; font-weight: 400; font-size: .74rem; color: var(--ink-2); font-family: var(--font-mono); }
.pd-facts .mono { font-family: var(--font-mono); }

.pd-related { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.pd-related a { display: flex; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.pd-related a:hover { border-color: var(--tone, var(--ink-2)); transform: translateY(-1px); }
.pd-rel-ico { flex-shrink: 0; color: var(--tone, var(--ink-2)); line-height: 0; }
.pd-rel-text { min-width: 0; }
.pd-rel-text strong { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.pd-rel-text small { color: var(--ink-2); font-size: .78rem; }
.pd-links { columns: 2; gap: 1.4rem; margin: 1.2rem 0 1.8rem; }

@media (max-width: 640px) {
  .pd-buy { grid-template-columns: 1fr; }
  .pd-visual { flex-direction: row; justify-content: flex-start; }
  .pd-vat-toggle { margin-left: 0; }
  .pd-links { columns: 1; }
}

/* ---------- Korvi broneering ja tarnekuupäev ---------- */
.cart-hold {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
  padding: .5rem .7rem; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok);
  font-size: .82rem; font-weight: 600;
}
.cart-hold-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: holdPulse 2s ease-in-out infinite;
}
@keyframes holdPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cart-hold-dot { animation: none; } }
/* Mõõdufilter: sisestusväli + rippmenüü kõrvuti. Kirjuta läbimõõt või vali. */
.dim-field { display: inline-flex; align-items: center; gap: .35rem; }
.dim-input {
  width: 7.5rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: .88rem; font-variant-numeric: tabular-nums;
}
.dim-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.dim-input.has-value { border-color: var(--accent-text); font-weight: 600; }
@media (max-width: 560px) { .dim-input { width: 6rem; font-size: 16px; } }

/* ---------- Checkout: makseviis ja pangalogod ---------- */
.co-pay { margin: 0 0 1.2rem; }
.co-pay-title { font-size: .95rem; font-weight: 700; margin: 0 0 .6rem; }
.co-pay-opt {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: 11px; margin-bottom: .5rem;
  transition: border-color .15s, background .15s;
}
.co-pay-opt.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.co-pay-opt input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--accent); flex-shrink: 0; }
.co-pay-main b { display: block; font-size: .92rem; }
.co-pay-main small { display: block; margin-top: .12rem; font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
/* Pangad: logoruudustik, mitte rippmenüü — panga ikooni tunneb ära pilguga */
.co-banks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem; margin: 0 0 .8rem; padding: 0 0 0 2.1rem;
}
.co-bank {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 48px; padding: .4rem .5rem; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  transition: border-color .15s, transform .12s;
}
.co-bank img { max-width: 100%; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.co-bank:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.co-bank.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.co-bank--other { font-size: .78rem; font-weight: 600; }
.co-pay-test {
  margin: 0 0 .8rem; padding: .4rem .6rem; border-radius: 8px;
  background: var(--high-bg, #fbf2e2); color: var(--high, #8a5a0b); font-size: .78rem; font-weight: 600;
}
@media (max-width: 560px) {
  .co-banks { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); padding-left: 0; }
}

/* Jäägireegel korvis ja tootelehel: selgitav märkus, mitte hoiatus */
.cart-remnant, .pd-remnant {
  margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: .8rem; line-height: 1.45; color: var(--ink-2);
}
.pd-remnant { margin: .6rem 0 0; }
/* Checkout: "jääk kaasa" valik — linnuke ja selgitus kõrvuti */
.co-offcut { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem;
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.co-offcut input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--accent); flex-shrink: 0; }
.co-offcut b { display: block; font-size: .9rem; }
.co-offcut small { display: block; margin-top: .15rem; font-size: .78rem; color: var(--ink-2); line-height: 1.45; }

/* Väikese tellimuse teenustasu: selgitus, mitte hoiatus — klient saab teada,
   kui palju veel puudu on, ja võib selle ise ära lahendada. */
.cart-minfee {
  margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 8px;
  background: var(--high-bg, #fbf2e2); color: var(--high, #8a5a0b);
  font-size: .8rem; line-height: 1.45;
}
.cart-eta {
  margin: .7rem 0 .9rem; font-size: .82rem; color: var(--ink-2);
  padding-left: 1.1rem; position: relative;
}
.cart-eta::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* ---------- Projektipäring: manused, mustand, ridade tegevused ---------- */
.rfq-line-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.btn-sm { padding: .4rem .85rem; font-size: .82rem; }

.rfq-drop {
  margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1.5px dashed var(--line);
  border-radius: 10px; background: var(--surface-2, var(--bg)); transition: border-color .15s, background .15s;
}
.rfq-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rfq-drop-text { margin: 0; font-size: .88rem; color: var(--ink-2); }
.rfq-drop-btn {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; border-bottom: 1.5px solid var(--accent);
  padding: 0; cursor: pointer;
}
.rfq-drop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rfq-drop-hint { margin: .3rem 0 0; font-size: .76rem; color: var(--ink-2); opacity: .8; }
.rfq-files { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.rfq-file {
  display: flex; align-items: center; gap: .6rem; font-size: .84rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: .35rem .6rem;
}
.rfq-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfq-file-size { color: var(--ink-2); font-size: .78rem; font-variant-numeric: tabular-nums; }
.rfq-file-x { background: none; border: 0; cursor: pointer; color: var(--ink-2); font-size: .9rem; padding: .1rem .2rem; }
.rfq-file-x:hover { color: #b4372c; }
.rfq-file-status { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-2); }

.rfq-draft {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok); font-size: .86rem;
}
.rfq-draft-x { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; margin-left: auto; }
.rfq-draft-x:hover { opacity: 1; }

/* ---------- Päringuvorm: telefon võrdväärsena, mis-edasi, nõusolek ---------- */
.rq-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.4rem; }
.rq-submit { display: flex; flex-direction: column; gap: .35rem; }
.rq-next { font-size: .8rem; color: var(--ink-2); }
.rq-call {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit;
  padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.rq-call:hover { border-color: var(--ink); background: var(--surface); }
.rq-call svg { color: var(--accent-text, var(--ink)); flex-shrink: 0; }
.rq-call strong { display: block; font-size: .95rem; line-height: 1.2; }
.rq-call small { color: var(--ink-2); font-size: .76rem; }
.rq-count { align-self: flex-end; font-size: .72rem; color: var(--ink-3, var(--ink-2)); font-variant-numeric: tabular-nums; }
.rq-prefill {
  margin: 0 0 1.2rem; padding: .65rem .85rem; border-radius: 9px;
  background: var(--ok-bg); font-size: .88rem;
}
.rq-prefill a { color: inherit; }
.rq-prefill-sku { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); margin-left: .4rem; }
.rq-done {
  margin: 0 0 1.4rem; padding: 1rem 1.1rem; border-radius: 10px;
  background: var(--ok-bg); color: var(--ok);
}
.rq-done p { margin: 0 0 .7rem; }
.rq-field input[aria-invalid], .rq-field textarea[aria-invalid] { border-color: #c2453b; }

@media (max-width: 560px) {
  .rq-actions { flex-direction: column; align-items: stretch; }
  .rq-call { justify-content: center; }
  .rq-submit .btn { width: 100%; }
  /* Laos seistes sõrmega: suuremad puutealad */
  .rq-field input, .rq-field textarea { font-size: 16px; padding: .75rem .8rem; }
}

/* ---------- Meelespea: turunduslik meeldetuletus ---------- */
.remind { padding: 3.5rem 1.5rem; background: var(--ink); color: var(--bg); border-bottom: 1px solid rgba(255,255,255,.09); }
.remind-inner {
  max-width: var(--w-page); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: center;
}
.remind-text .page-kicker { color: var(--accent); }
.remind-text h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: .3rem 0 .7rem; line-height: 1.15; }
.remind-text p { color: color-mix(in srgb, var(--bg) 78%, transparent); line-height: 1.6; max-width: 46ch; }
.rem-form { margin: 0; }
.rem-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.rem-row .rem-email { flex: 1 1 260px; margin: 0; }
.rem-row .rem-btn { flex: 0 0 auto; }
.remind .rq-field label { color: inherit; }
.remind .rq-field input {
  background: var(--surface); color: var(--ink); border: 1px solid transparent; border-radius: 10px;
  padding: .8rem .95rem; font-size: 1rem; width: 100%;
}
.rem-freq { border: 0; padding: 0; margin: .9rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rem-freq legend { float: left; font-size: .82rem; font-weight: 600; margin-right: .4rem; padding: 0; }
.rem-chip { position: relative; cursor: pointer; }
.rem-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.rem-chip span {
  display: inline-block; padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
}
.rem-chip input:checked + span { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.rem-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rem-consent { margin: .9rem 0 0; font-size: .8rem; }
.rem-consent label { align-items: flex-start; line-height: 1.45; }
.rem-consent input { flex-shrink: 0; margin-top: .1rem; }
.rem-consent span { flex: 1; min-width: 0; }
.rem-msg { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 9px; font-size: .9rem; }
.rem-msg.is-ok { background: var(--ok-bg); color: var(--ok); }
.rem-msg.is-err { background: var(--danger-bg, #fbe6e4); color: var(--danger, #a33a31); }
.remind .rq-err { color: #ffb4ad; }
/* Meelespea alamleht: sama vorm heledal taustal */
.page .rem-form { margin: 1.4rem 0 2rem; max-width: 720px; }
.page .rem-freq legend { color: var(--ink); }
.page .rem-chip span { border-color: var(--line); color: var(--ink); }
.rem-unsub { margin: 1.4rem 0 2rem; max-width: 720px; }
.rem-unsub-lead, .rem-unsub-or { margin: 0 0 .6rem; font-size: .9rem; color: var(--ink-2); }
.rem-unsub-opts { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
@media (max-width: 820px) {
  .remind { padding: 2.6rem 1.2rem; }
  .remind-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .rem-row { flex-direction: column; align-items: stretch; }
  .rem-row .rem-email { flex-basis: auto; }
  .rem-row .rem-btn { width: 100%; }
  .remind .rq-field input { font-size: 16px; }              /* iOS ei suumi sisse */
  .rem-freq legend { float: none; flex-basis: 100%; margin: 0 0 .1rem; }
  .rem-chip span { padding: .5rem .9rem; }                  /* sõrmega tabatav */
  .rem-consent { font-size: .82rem; }
  .rem-unsub-opts .btn, .rem-unsub > .btn { width: 100%; }
}

/* ---------- Kalkulaator: eksport, ajalugu, laovaste esile ---------- */
.wc-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 0; }
.wc-limit {
  margin: .6rem 0 0; padding: .45rem .7rem; border-radius: 7px;
  background: var(--high-bg, #fbf2e2); color: var(--high, #b06d10); font-size: .82rem;
}
.wc-note { margin: 1.1rem 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }

/* "Sobib laost" on kalkulaatori tegelik müügifunktsioon — see peab paistma */
.wc-match.has-hits {
  margin-top: 1.2rem; padding: 1rem; border-radius: 12px;
  background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent);
}
.wc-match-title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ok);
}
.wc-match-title span {
  background: var(--ok); color: #fff; border-radius: 999px;
  padding: .05rem .45rem; font-size: .72rem; letter-spacing: 0;
}
.wc-mr-price small { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-2); }

.wc-history { margin-top: 1.4rem; }
.wc-history h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); margin: 0 0 .5rem; }
.wc-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.wc-history a { font-size: .84rem; color: var(--ink-2); text-decoration: none; }
.wc-history a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
  /* Laos seistes sõrmega: numbriväljad suuremaks */
  .wc-fields input, .wc-fields select, .calc-wrap input {
    font-size: 16px; min-height: 46px; padding: .6rem .7rem;
  }
  .wc-actions .btn { flex: 1; }
}

/* ---------- KKK, andmetabelid, lehe lõpu tegevuskutse ---------- */
.faq { margin: 2.4rem 0 1.6rem; }
.faq h2 { margin-bottom: .9rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: .85rem 1.8rem .85rem 0; position: relative;
  font-weight: 600; font-size: .96rem; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: .3rem; top: .75rem;
  font-size: 1.2rem; color: var(--ink-2); transition: transform .2s;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.faq-a { padding: 0 0 1rem; color: var(--ink-2); font-size: .92rem; line-height: 1.65; max-width: 68ch; }
.faq-a p { margin: 0; }

.table-wrap { overflow-x: auto; margin: 1.1rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
.data-table caption { text-align: left; font-size: .8rem; color: var(--ink-2); padding-bottom: .5rem; }
.data-table th, .data-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.data-table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); border-bottom-width: 2px;
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody th { font-weight: 600; }
.table-note { font-size: .78rem; color: var(--ink-2); margin: .4rem 0 0; }

.page-cta {
  margin: 2.4rem 0 1rem; padding: 1.3rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.page-cta-text { margin: 0; font-weight: 500; max-width: 46ch; }
.page-cta-btns { display: flex; gap: .6rem; flex-wrap: wrap; }

@media print {
  .site-header, .footer, .page-cta, .detail-crumb, .bottom-nav, .cart-drawer { display: none !important; }
  .faq-item { break-inside: avoid; }
  .faq-item .faq-a { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- Checkouti nõusolek, offline-riba, 404 populaarsed ---------- */
.co-consent { margin: .9rem 0 1rem; font-size: .85rem; line-height: 1.5; }
.co-consent label { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.co-consent input { margin-top: .18rem; width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.co-consent a { text-decoration: underline; }

.offline-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 200;
  max-width: min(92vw, 460px); padding: .8rem 1.1rem; border-radius: 12px;
  background: var(--ink); color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.28);
  font-size: .88rem; display: flex; flex-direction: column; gap: .15rem;
}
.offline-bar strong { font-size: .92rem; }
.offline-bar span { opacity: .85; line-height: 1.45; }
@media (max-width: 760px) { .offline-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }

.err-popular { margin: 1.6rem 0; }
.err-popular h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); margin: 0 0 .6rem; }
.err-popular ul { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.err-popular a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: .86rem;
}
.err-popular a:hover { border-color: var(--ink); color: var(--ink); }
.err-popular a span { font-size: .74rem; opacity: .6; font-variant-numeric: tabular-nums; }

.legal-summary {
  margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 10px 10px 0;
}
.legal-summary h2 { margin: 0 0 .6rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.legal-summary ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; line-height: 1.6; }
.legal-summary li + li { margin-top: .35rem; }
.legal-meta { font-size: .8rem; color: var(--ink-2); margin: 0 0 1rem; }
.legal-toc { margin: 0 0 1.8rem; }
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.legal-toc a { font-size: .85rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.legal-toc a:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   CHECKOUT — sammud, aadress, ettemakse plokk
   Lisatud koos mitmesammulise checkout'i ja arvevoo juurutamisega.
   ============================================================ */
.co-hint{margin:0 0 1rem;font-size:.88rem;line-height:1.55;color:var(--muted)}

.co-nav{display:flex;gap:.6rem;justify-content:space-between;margin-top:1.2rem}
.co-nav-end{justify-content:flex-end}
.co-actions{display:flex;gap:.6rem;justify-content:space-between;margin-top:1rem;flex-wrap:wrap}
.co-actions .btn{flex:1 1 auto;min-width:9rem}

.co-address,.co-note-field{display:block;margin-top:1rem}
.co-address>span,.co-note-field>span{display:block;font-size:.82rem;font-weight:600;
  color:var(--ink);margin-bottom:.32rem}
.co-address input,.co-note-field textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.94rem;background:#fff;color:var(--ink)}
.co-address input:focus-visible,.co-note-field textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.co-note-field textarea{resize:vertical;min-height:3.2rem}

/* Ettemakse selgitus — klient peab enne kinnitamist teadma, et raha
   liigub pangaülekandega ja kaup on seni broneeritud, mitte müüdud. */
.co-prepay{margin:1.1rem 0 0;padding:.85rem 1rem;background:#f2f7de;
  border-left:3px solid var(--accent);border-radius:0 9px 9px 0}
.co-prepay strong{display:block;font-size:.9rem;margin-bottom:.25rem}
.co-prepay p{margin:0;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* Sammu veateade — punane, aga mitte karjuv */
.co-panel .rq-err{margin:.8rem 0 0;font-size:.85rem;color:#b4372c}

/* Tarnevalikud: valitud rida on selgelt näha ka ilma värvitajuta */
.delivery-opts .opt:has(input:checked){border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}

@media (max-width:520px){
  .co-actions .btn{flex:1 1 100%}
  .co-nav{flex-direction:column-reverse}
}

/* ============================================================
   ETTEVÕTTE OTSING ÄRIREGISTRIST (company.js)
   Abivahend, mitte värav: nimekiri on soovitus, väli jääb vabaks.
   ============================================================ */
.co-lookup-wrap{position:relative}

.co-lookup{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 28px rgba(5,40,70,.14);max-height:16rem;overflow-y:auto;
  -webkit-overflow-scrolling:touch}

.co-lookup-item{padding:.55rem .75rem;cursor:pointer;display:flex;flex-direction:column;
  gap:.1rem;border-bottom:1px solid #f0f3f6}
.co-lookup-item:last-child{border-bottom:0}
.co-lookup-item:hover,.co-lookup-item.is-active{background:#f2f7de}
.co-lookup-item b{font-weight:700;color:var(--ink)}

.co-lk-name{font-size:.92rem;line-height:1.35;color:var(--ink)}
.co-lk-meta{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Laadimisolek nimekirjas. Äriregister võtab 1–3 s ja seda aega peab NÄGEMA
   samas kohas, kuhu vastus tuleb — muidu tundub, et midagi ei juhtu. */
.co-lookup-loading{display:flex;align-items:center;gap:.55rem;
  padding:.7rem .75rem;font-size:.86rem;color:var(--muted)}
.co-lk-spin{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid var(--line);border-top-color:var(--ink-2);
  animation:coLkSpin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.co-lk-spin{animation-duration:2s}}
@keyframes coLkSpin{to{transform:rotate(360deg)}}

/* Väike selgitav rida välja all — mitte veateade, vaid abi */
.co-lookup-note{margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)}
.co-lookup-note.is-ok{color:#4a6b1e}
.co-lookup-note.is-warn{color:#8a5a12}

@media (prefers-reduced-motion:no-preference){
  .co-lookup{animation:coLookupIn .12s ease-out}
  @keyframes coLookupIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
}

/* ============================================================
   SELGITUSVIHJE (tip.php)
   Paneel tõstetakse avamisel <body> alla ja positsioneeritakse
   fixed'iga — vastasel juhul lõikaks hero `overflow:hidden`
   ta pooleks, ükskõik kui suur on z-index.
   ============================================================ */

.tip{position:relative;display:inline-flex;vertical-align:middle;line-height:0}

.tip-btn{
  display:grid;place-items:center;width:1.1rem;height:1.1rem;padding:0;flex:0 0 auto;
  border:0;border-radius:50%;background:none;cursor:pointer;color:currentColor;
  opacity:.45;transition:opacity .15s,transform .15s,color .15s}
.tip-btn svg{width:1.1rem;height:1.1rem;display:block}
.tip-btn:hover,.tip-btn[aria-expanded="true"]{opacity:1;transform:scale(1.1)}
.tip--accent .tip-btn:hover,.tip--accent .tip-btn[aria-expanded="true"]{color:var(--accent-text,#4a6b1e)}
.tip-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}

/* --- paneel (JS tõstab selle body alla, position:fixed) --- */
.tip-pop{
  position:absolute;z-index:9999;width:min(21.5rem,calc(100vw - 1.6rem));
  background:#fff;color:var(--ink);text-align:left;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 3px rgba(5,40,70,.07),0 20px 56px rgba(5,40,70,.18);
  padding:1rem 1.05rem .9rem;
  font:400 .82rem/1.55 var(--font-body,inherit);letter-spacing:normal;text-transform:none;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease}
.tip-pop[hidden]{display:none}
.tip-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.tip-pop.is-fixed{position:fixed}
.tip-pop p{margin:0 0 .55rem}
.tip-pop p:last-child{margin-bottom:0}
.tip-pop b{font-weight:650}

.tip-arrow{
  position:absolute;width:11px;height:11px;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);border-radius:0 0 3px 0}
.tip-pop.is-below .tip-arrow{top:-6px;transform:rotate(225deg);border-radius:0 0 3px 0}

/* --- päis --- */
.tip-head{display:block;padding-bottom:.7rem;margin-bottom:.75rem;border-bottom:1px solid var(--line)}
.tip-kicker{display:block;font-size:.67rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.tip-title{display:flex;align-items:baseline;gap:.45rem;margin-top:.18rem;
  font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.tip-title-sub{font-size:.78rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* --- ajajoon --- */
.tip-steps{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.tip-steps li{position:relative;display:grid;grid-template-columns:3.4rem 1fr;gap:.6rem;align-items:start}
.tip-steps li::before{content:"";position:absolute;left:3.62rem;top:1.05rem;bottom:-.62rem;
  width:2px;background:var(--line);border-radius:2px}
.tip-steps li.is-end::before{display:none}
.tip-steps li::after{content:"";position:absolute;left:3.28rem;top:.32rem;width:9px;height:9px;
  border-radius:50%;background:#fff;border:2px solid var(--line);box-sizing:border-box}
.tip-steps li.is-now::after{border-color:var(--accent);background:var(--accent)}
.tip-steps li.is-end::after{border-color:var(--ink);background:var(--ink)}
.tip-step-t{font-size:.72rem;font-weight:700;color:var(--muted);text-align:right;padding-top:.05rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tip-step-b{padding-left:.55rem}
.tip-step-b b{display:block;font-size:.83rem;font-weight:650;color:var(--ink)}
.tip-step-b em{display:block;font-style:normal;font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:.1rem}
.tip-steps li.is-now .tip-step-b em{color:var(--accent-text,#4a6b1e);font-weight:600}

/* --- lisaplokid --- */
.tip-why{display:block;margin-top:.75rem;padding:.5rem .65rem;background:#f5f8fa;
  border-left:3px solid var(--line);border-radius:0 7px 7px 0;font-size:.77rem;line-height:1.5}
.tip-fine{display:block;margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--line);
  font-size:.72rem;line-height:1.5;color:var(--muted)}
.tip-rows{display:grid;grid-template-columns:auto 1fr;gap:.28rem .8rem;margin:.5rem 0 0;font-size:.79rem}
.tip-rows dt{color:var(--muted)}
.tip-rows dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.tip-formula{display:block;margin:.5rem 0;padding:.55rem .7rem;background:#0b1f33;color:#e6edf3;
  border-radius:8px;font:.76rem/1.6 var(--font-mono,ui-monospace,monospace);overflow-x:auto}

/* ---------- Kampaaniahind ----------
   Vana hind maha kriipsutatud, uus hind rõhutatud, märgis kõrval. Kolm asja
   ühel real: mis oli, mis on, ja kui palju odavam. */
.price-was{color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:.3em}
.price-now{color:var(--accent-text,#4a6b1e);font-weight:800}
.price-tag{display:inline-block;margin-left:.35em;padding:.1em .45em;border-radius:999px;
  background:var(--accent);color:var(--accent-ink,#052846);
  font:700 .7rem/1.4 var(--font-mono,ui-monospace,monospace);vertical-align:.1em}

/* Vihje lõpus olev tegevuslink: kui selgitusest jääb väheks, on järgmine
   samm siinsamas, mitte menüüst otsimise taga. */
.tip-link{display:inline-block;margin-top:.75rem;padding-top:.65rem;
  border-top:1px solid var(--line);width:100%;
  font-size:.79rem;font-weight:700;color:var(--accent-text,#4a6b1e);text-decoration:none}
.tip-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Andmetabeli lahter, kus väärtuse järel on vihjenupp — nupp ei tohi
   rida kõrgemaks lükata ega järgmisele reale hüpata. */
.spec-tip{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){.tip-pop,.tip-btn{transition:none}}

@media print{
  .tip-btn{display:none}
  .tip-pop{position:static!important;display:block!important;opacity:1;transform:none;
    box-shadow:none;width:auto;pointer-events:auto;margin:.5rem 0}
  .tip-arrow{display:none}
}

/* Sertifikaadimärgis sisaldab nüüd selgitusvihjet */
.pd-cert{display:inline-flex;align-items:center;gap:.3rem}
/* Vihje hinna ja laoseisu kõrval ei tohi rida lõhkuda */
.pd-price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.pd-stock{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.pd-specs dd{display:inline-flex;align-items:center;gap:.3rem}

/* ============================================================
   404 — LEHTE EI LEITUD
   404 on koht, kus inimene on juba pettunud. Selle lehe töö on
   viia edasi, mitte vabandada. Seepärast: otsing kohe fookuses,
   kolm konkreetset teed, päris kataloogi numbrid.
   ============================================================ */

.e404{padding:clamp(2.5rem,7vw,5rem) 1.2rem 5rem;background:var(--bg)}
.e404-inner{max-width:52rem;margin:0 auto;text-align:center}

/* --- graafika: radar, mis otsib --- */
.e404-hero{position:relative;padding-top:1rem}
.e404-art{width:min(15rem,42vw);height:auto;display:block;margin:0 auto -3.2rem;opacity:.9}
.e404-ring{fill:none;stroke:var(--line);stroke-width:1.5}
.e404-ring--faint{stroke-dasharray:3 6;opacity:.7}
.e404-sweep{transform-origin:100px 100px;animation:e404spin 6s linear infinite}
.e404-sweep line{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.e404-dot{fill:var(--ink)}
.e404-miss{fill:var(--accent);animation:e404blink 6s ease-in-out infinite}

@keyframes e404spin{to{transform:rotate(360deg)}}
@keyframes e404blink{0%,58%{opacity:.15}64%{opacity:1}80%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .e404-sweep{animation:none;transform:rotate(-38deg)}
  .e404-miss{animation:none;opacity:1}
}

.e404-code{
  position:relative;margin:0;font-family:var(--font-head,inherit);
  font-size:clamp(4.5rem,17vw,9rem);font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:var(--ink);opacity:.07;user-select:none}
.e404-title{margin:-.4rem 0 .6rem;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.02em}
.e404-lead{margin:0 auto;max-width:34rem;color:var(--ink-2,var(--muted));font-size:1.02rem;line-height:1.65}

/* --- otsing --- */
.e404-search{
  display:flex;align-items:center;gap:.5rem;max-width:34rem;margin:2rem auto 0;
  background:var(--surface,#fff);border:1px solid var(--line);border-radius:999px;
  padding:.35rem .35rem .35rem 1rem;
  box-shadow:0 1px 2px rgba(5,40,70,.04),0 10px 30px rgba(5,40,70,.06);
  transition:box-shadow .18s,border-color .18s}
.e404-search:focus-within{border-color:var(--accent);
  box-shadow:0 1px 2px rgba(5,40,70,.04),0 12px 34px rgba(5,40,70,.1)}
.e404-search-ico{width:1.15rem;height:1.15rem;color:var(--muted);flex:0 0 auto}
.e404-search input{
  flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;
  padding:.6rem .2rem;color:var(--ink)}
.e404-search input:focus{outline:none}
.e404-search .btn{flex:0 0 auto;border-radius:999px;padding:.62rem 1.3rem}

/* --- kolm teed --- */
.e404-ways{
  display:grid;gap:.8rem;margin:2.2rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.e404-way{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:1.4rem 1rem;background:var(--surface,#fff);border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.e404-way:hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 8px 24px rgba(5,40,70,.08);text-decoration:none}
.e404-way-ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:.35rem;
  border-radius:11px;background:var(--bg);color:var(--ink)}
.e404-way-ico svg{width:1.25rem;height:1.25rem}
.e404-way:hover .e404-way-ico{background:var(--accent);color:var(--ink)}
.e404-way-t{font-weight:650;font-size:.98rem}
.e404-way-s{font-size:.82rem;color:var(--muted);line-height:1.45}

/* --- populaarsed materjalid --- */
.e404-chips{margin-top:2.2rem}
.e404-chips-t{margin:0 0 .7rem;font-size:.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.e404-chips-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.e404-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;
  background:var(--surface,#fff);border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.e404-chip:hover{border-color:var(--accent);background:#fbfef2;text-decoration:none}
.e404-chip span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* --- inimene --- */
.e404-human{margin:2.4rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.8}
.e404-human a{color:var(--ink);font-weight:600;white-space:nowrap}

@media (max-width:520px){
  .e404-search{flex-wrap:wrap;border-radius:16px;padding:.6rem}
  .e404-search .btn{width:100%}
}

/* Ettevõtteotsing töötab ka <label><span>..</span><input></label> vormides
   (projektipäring). Wrapper lisatakse JS-iga input'i ümber, seega ta peab
   käituma nagu input ise. */
label > .co-lookup-wrap{display:block;width:100%}
.field-grid label > .co-lookup-wrap > input{width:100%}

/* ===========================================================================
   AVALEHE ESIMENE EKRAAN (2026-09)
   ---------------------------------------------------------------------------
   Varem võistlesid hero's korraga kicker, pealkiri, lede, kaks nuppu, neli
   statistikakasti ja tarnelubaduse selgitus. Nüüd on seal ainult lubadus,
   otsing ja kaks fakti; ülejäänu on .trust ribas kohe allpool.
   =========================================================================== */

/* --- Suur otsing hero's: äri süda, mitte päise kaunistus --- */
.hero-search {
  display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap;
  margin-top: 1.8rem; max-width: 640px;
}
.hero-search-field {
  position: relative; flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.15rem;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.hero-search-field:focus-within { border-color: var(--ink); box-shadow: var(--shadow); }
.hero-search-field > svg { width: 20px; height: 20px; color: var(--ink-2); flex-shrink: 0; }
.hero-search-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 1.02rem; font-family: inherit; color: inherit;
}
.hero-search-field input::-webkit-search-cancel-button { cursor: pointer; }
/* Loendur elab välja SEES: klient näeb vastust seal, kus ta kirjutab,
   ja tal ei ole vaja kerida, et teada, kas midagi leiti. */
.hero-search-count {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .78rem;
  color: var(--ink-2); white-space: nowrap;
}
.hero-search-count.is-none { color: #c2453b; }
.hero-search .btn { flex: 0 0 auto; }
.hero-search-hint { margin-top: .55rem; font-size: .8rem; color: var(--ink-2); }

/* --- Kaks fakti, mis ostuotsuse ära teevad ---
   Pillid, mitte lahtine tekst: nii on kaks eraldi väidet ka ühel real
   eristatavad ja lühike "Miinimumpikkust ei ole." ei mõju poolikuna.
   Ülejäänu (lõikame mõõtu, tasuta piir, tolerants) on vihjes. */
.hero-facts {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem .7rem;
}
.hero-fact {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem .5rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-size: .92rem; line-height: 1.3; color: var(--ink-2);
}
.hero-fact > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent-text, var(--ink-2)); }
.hero-fact--cut { color: var(--ink); font-weight: 600; }
.hero-fact--eta b { color: var(--ink); font-weight: 700; }
.hero-fact .tip { margin-left: -.1rem; }
/* Loendus on numbriline ja muutub iga minut — ühtlane laius hoiab ära
   selle, et rida iga tiksuga edasi-tagasi hüppaks. */
.eta-clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Usaldusriba: sertifikaadikaart + numbrid ühes reas ---
   Kaart on tume nagu bränd ja ikoon lime: riba ainus värviline element,
   seega silm läheb sinna esimesena. Numbrid on heledad ja vaiksed —
   nad kinnitavad, mitte ei müü. */
.trust { padding: 0 1.5rem 2.4rem; }
.trust-inner {
  max-width: var(--w-page); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: .9rem; align-items: stretch;
}
.trust-cert {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--ink); color: var(--bg); border-radius: var(--radius);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trust-cert:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(5, 40, 70, .18); text-decoration: none; }
.trust-cert-ico {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--ink);
}
.trust-cert-ico svg { width: 24px; height: 24px; }
.trust-cert-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.trust-cert-text strong { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.trust-cert-text span { font-size: .86rem; line-height: 1.45; color: color-mix(in srgb, var(--bg) 74%, transparent); }
.trust-cert-tag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bg) 28%, transparent);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; white-space: nowrap;
  color: color-mix(in srgb, var(--bg) 86%, transparent);
  transition: background .15s, border-color .15s, color .15s;
}
.trust-cert-tag svg { width: 13px; height: 13px; }
.trust-cert:hover .trust-cert-tag { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.trust .hero-stats { margin-top: 0; max-width: none; height: 100%; }
.trust .hero-stats > div { display: flex; flex-direction: column; justify-content: center; }
.trust-kicker {
  grid-column: 1 / -1; margin: .3rem 0 0;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
@media (max-width: 960px) {
  .trust-inner { grid-template-columns: 1fr; }
  .trust-cert { flex-wrap: wrap; }
  .trust-cert-tag { margin-left: 60px; }
}
@media (max-width: 480px) {
  .trust-cert { gap: .8rem; padding: .95rem 1rem; }
  .trust-cert-ico { width: 38px; height: 38px; }
  .trust-cert-tag { margin-left: 0; }
}

/* --- Päise otsing tuleb nähtavale alles siis, kui hero on kerinud üles ---
   Kaks otsinguvälja korraga ühel ekraanil on segadus; kaks otsingut
   järjestikku on mugavus. */
body.shop .site-header:not(.is-scrolled) .search { display: none; }

/* --- Alampiir kataloogi päises, kohe "miinimumkogust ei ole" kõrval --- */
.catalog-min { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; color: var(--ink-2); }

/* ===========================================================================
   TERVE PROJEKT, ÜKS PÄRING (avalehe kleepimiskast)
   =========================================================================== */
.bulk { padding: 0 1.5rem 3.5rem; }
.bulk-inner {
  max-width: var(--w-page); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem; align-items: center;
  padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.bulk-text h2 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.2; }
.bulk-text p { margin-top: .55rem; color: var(--ink-2); line-height: 1.6; max-width: 44ch; }
.bulk-note { font-size: .84rem; }
.bulk-form { display: flex; flex-direction: column; gap: .8rem; }
.bulk-form textarea {
  width: 100%; resize: vertical; min-height: 7.5rem;
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-mono); font-size: .88rem; line-height: 1.6;
}
.bulk-form textarea:focus { outline: 0; border-color: var(--ink); }
.bulk-actions { display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; }
.bulk-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.bulk-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.bulk-link:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }
.bulk-link:hover svg { transform: translateX(3px); }

/* ===========================================================================
   SALVESTATUD OTSINGU TEAVITUS
   =========================================================================== */
.watch-form { margin: 0; }
.watch-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.watch-row .watch-email { flex: 1 1 260px; margin: 0; }
.watch-row .watch-btn { flex: 0 0 auto; }
.watch-query { margin-bottom: .9rem; }
.remind .watch-form .rq-field label { color: inherit; }
.remind .watch-form .rq-field input {
  background: var(--surface); color: var(--ink); border: 1px solid transparent; border-radius: 10px;
  padding: .8rem .95rem; font-size: 1rem; width: 100%;
}
.watch-consent { margin: .9rem 0 0; font-size: .8rem; }
.watch-consent label { align-items: flex-start; line-height: 1.45; }
.watch-consent input { flex-shrink: 0; margin-top: .1rem; }
.watch-consent span { flex: 1; min-width: 0; }
.watch-msg { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 9px; font-size: .9rem; }
.watch-msg.is-ok { background: var(--ok-bg); color: var(--ok); }
.watch-msg.is-err { background: var(--danger-bg, #fbe6e4); color: var(--danger, #a33a31); }
.remind-alt { margin-top: .9rem; font-size: .85rem; }
.remind-alt a { color: var(--accent); text-decoration: underline; }
/* Alamleht: sama vorm heledal taustal */
.page .watch-form { margin: 1.4rem 0 2.4rem; max-width: 720px; }

/* Tühja tulemuse teavitus: kõige väärtuslikum hetk terves poes — klient
   ütles just, mida ta osta tahtis ja mida meil ei olnud. */
.watch-empty {
  margin: 2rem auto 0; max-width: 560px; text-align: left;
  padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.watch-empty h3 { font-family: var(--font-display); font-size: 1.1rem; }
.watch-empty > p { margin: .35rem 0 1rem; font-size: .9rem; color: var(--ink-2); }

/* ===========================================================================
   LÕIKAMISE MÄRGE TOOTELEHEL
   Roheline = tasuta. Neutraalne = läheb pakkumisse. Reegel ise on ostuinfos.
   =========================================================================== */
.cut-badge {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .5rem 0 0; padding: .35rem .8rem;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: color-mix(in srgb, var(--ink-2) 12%, transparent); color: var(--ink);
}
.cut-badge.is-free { background: var(--ok-bg, #e7f4e4); color: var(--ok, #2f6d34); }
.cut-badge-rule { font-weight: 500; font-size: .78rem; text-decoration: underline; opacity: .75; }

/* ===========================================================================
   OTSINGUSOOVITUSTE PÄIS: "7 toodet leitud" enne nimekirja
   =========================================================================== */
.sug-count {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.sug-count strong { font-weight: 700; }
.sug-all {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; font-size: .8rem; color: var(--accent-text, var(--ink-2));
  text-decoration: underline; white-space: nowrap;
}
.sug-all:hover { color: var(--ink); }

@media (max-width: 820px) {
  .bulk-inner { grid-template-columns: 1fr; padding: 1.3rem; }
  .bulk-actions { flex-direction: column; align-items: stretch; }
  .bulk-actions .btn { width: 100%; }
  .watch-row { flex-direction: column; align-items: stretch; }
  .watch-row .watch-email { flex-basis: auto; }
  .watch-row .watch-btn { width: 100%; }
  .remind .watch-form .rq-field input { font-size: 16px; }   /* iOS ei suumi sisse */
}
/* Madal, aga lai ekraan (13" sülearvuti): hero uued osad tõmbuvad samamoodi
   kokku nagu vana pealkiri ja statistika — muidu ei ole laoseis enam näha.
   Vt sama loogika ülalpool .hero-title / .hero-stats juures. */
@media (min-width: 821px) and (max-height: 860px) {
  .hero-search { margin-top: 1.3rem; }
  .hero-search-field { padding: .6rem 1rem; }
  .hero-facts { margin-top: 1.1rem; gap: .45rem 1.2rem; font-size: .9rem; }
  .trust { padding-bottom: 1.6rem; }
  .trust-cert { padding: .85rem 1.1rem; }
  .trust-kicker { margin-top: .2rem; }
}
@media (min-width: 821px) and (max-height: 700px) {
  .hero-search { margin-top: 1rem; }
  .hero-facts { margin-top: .8rem; font-size: .86rem; }
  .hero-search-hint { display: none; }        /* väli ise ütleb juba sama */
  .trust-kicker { display: none; }
}

@media (max-width: 620px) {
  .hero-search { margin-top: 1.3rem; }
  .hero-search .btn { width: 100%; }
  .hero-search-field input { font-size: 16px; }              /* iOS ei suumi sisse */
  .hero-facts { gap: .5rem; }
  .hero-fact { font-size: .88rem; }
}