/* ---- from prototype: tootoole_css ---- */
.job-hero{position:relative;min-height:min(76svh,44rem);display:flex;align-items:flex-end;overflow:hidden;padding-block:clamp(3rem,6vw,6rem)}
.job-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.job-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.2 0.05 264/.62) 0%,oklch(0.2 0.05 264/.28) 42%,oklch(0.2 0.05 264/.82) 100%)}
.job-hero-in{position:relative;color:#fff;width:100%}
.job-hero-in .crumbs{color:oklch(0.88 0.02 264)!important}
.job-hero-in .eyebrow{color:var(--gold);display:block;margin-top:1rem}
.job-hero-in h1{font-size:clamp(2.3rem,1rem + 4.6vw,5rem);margin:.6rem 0 0;max-width:15ch}
.job-hero-in .lead{color:oklch(0.92 0.01 264);margin-top:1.2rem;max-width:48ch}
.job-hero-count{position:absolute;right:var(--edge);top:clamp(5rem,12vw,9rem);color:#fff;text-align:end;line-height:1}
.job-hero-count strong{display:block;font-family:var(--fs);font-weight:300;font-size:clamp(3rem,2rem + 4vw,6rem);color:var(--gold)}
.job-hero-count span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:oklch(0.86 0.02 264)}
@media(max-width:760px){.job-hero-count{display:none}}


.job-head{margin-bottom:clamp(1.8rem,1rem + 3vw,3.2rem);max-width:32ch}
.job-head h2{margin-top:.6rem}


.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.jcard{display:flex;flex-direction:column;background:var(--paper);padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);
  min-height:15rem;position:relative;transition:background .45s var(--ease)}
.jcard:hover{background:#fff}
.jcard::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.jcard:hover::after{transform:scaleX(1)}
.jcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.jcard-i{font-size:.72rem;letter-spacing:.14em;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.jcard-meta{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:end}
.jcard-t{font-size:var(--fs-md);font-weight:400;letter-spacing:-.015em;line-height:1.2;margin:1.4rem 0 .55rem;
  color:var(--ink);transition:color .35s var(--ease)}
.jcard:hover .jcard-t{color:var(--navy)}
.jcard-d{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.jcard-go{display:inline-flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1.4rem;font-size:.74rem;
  letter-spacing:.06em;color:var(--navy);opacity:0;transform:translateY(.3rem);
  transition:opacity .4s var(--ease),transform .45s var(--ease)}
.jcard:hover .jcard-go{opacity:1;transform:none}
.jcard-go .ar{width:1.6rem;height:1px;background:currentColor;display:block}
@media(max-width:560px){.jcard{min-height:0}.jcard-go{opacity:1;transform:none}}

.job-note{margin-top:1.4rem;font-size:.82rem;color:var(--ink-soft)}

.job-apply{background:var(--navy-deep);color:#fff}
.job-apply .eyebrow{color:var(--gold)}
.job-apply h2{color:#fff;margin:.6rem 0 1rem;max-width:16ch}
.job-apply p{color:oklch(0.84 0.02 264);max-width:46ch}
.job-apply-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
@media(max-width:900px){.job-apply-grid{grid-template-columns:1fr}}
.job-contact{margin-top:clamp(1.8rem,3vw,2.6rem);display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem)}
.job-contact a{display:block}
.job-contact span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:oklch(0.72 0.02 264);margin-bottom:.4rem}
.job-contact strong{font-family:var(--fs);font-weight:300;font-size:clamp(1.05rem,1rem + .7vw,1.5rem);letter-spacing:-.01em;border-bottom:1px solid oklch(1 0 0/.28);padding-bottom:.15rem;transition:border-color .35s var(--ease),color .35s var(--ease)}
.job-contact a:hover strong{color:var(--gold);border-color:var(--gold)}
.job-open{border:1px solid oklch(1 0 0/.18);padding:clamp(1.5rem,1rem + 2vw,2.4rem)}
.job-open .btn{margin-top:1.4rem;background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.job-open .btn .arw{display:inline-block;transition:transform .45s var(--ease)}
.job-open .btn:hover .arw{transform:translateX(.3rem)}

.job-figure{position:relative;overflow:hidden}
.job-figure img{width:100%;aspect-ratio:16/7;object-fit:cover;transition:transform 1.2s var(--ease)}
.job-figure:hover img{transform:scale(1.03)}
.job-figure figcaption{margin-top:.9rem;font-size:.8rem;color:var(--ink-soft)}
@media(max-width:700px){.job-figure img{aspect-ratio:4/3}}

/* ---- from prototype: lugu_css ---- */
.art-hero{position:relative;min-height:min(80svh,46rem);display:flex;align-items:flex-end;overflow:hidden;padding-block:clamp(3rem,6vw,6rem)}
.art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,oklch(0.16 0.05 264/.78) 0%,oklch(0.16 0.05 264/.52) 34%,oklch(0.16 0.05 264/0) 66%),linear-gradient(180deg,oklch(0.18 0.05 264/.42) 0%,oklch(0.18 0.05 264/.18) 26%,oklch(0.18 0.05 264/.5) 60%,oklch(0.18 0.05 264/.88) 100%)}
.art-hero-in{position:relative;color:#fff;width:100%}
.art-hero-in .crumbs{color:oklch(0.88 0.02 264)!important}
.art-kicker{display:block;margin-top:1rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.art-hero-in h1{font-size:clamp(2.1rem,1rem + 4.2vw,4.6rem);margin-top:.7rem;max-width:20ch}

.art-layout{display:grid;grid-template-columns:15rem 1fr;gap:clamp(2rem,1rem + 4vw,6rem);padding-block:clamp(3rem,2rem + 4vw,6rem);align-items:start}
@media(max-width:960px){.art-layout{grid-template-columns:1fr}}
.art-side-in{position:sticky;top:6rem;display:flex;flex-direction:column;gap:1.4rem}
@media(max-width:960px){.art-side-in{position:static;flex-direction:row;flex-wrap:wrap;gap:2rem;border-bottom:1px solid var(--line);padding-bottom:1.6rem}}
.art-byline span,.art-share span{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.art-byline strong{font-weight:500;font-size:.92rem}
.art-share{display:flex;flex-direction:column;gap:.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.art-share a{font-size:.88rem;color:var(--ink-soft);transition:color .3s var(--ease)}
.art-share a:hover{color:var(--navy)}

.art-body{max-width:38rem}
.art-body p{margin-bottom:1.5rem;line-height:1.75;color:var(--ink)}
.art-lead{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.55;color:var(--ink-soft);font-family:var(--fs);font-weight:300;margin-bottom:2.2rem}
.art-body h2{font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);margin:clamp(2.4rem,4vw,3.6rem) 0 1.1rem}
.art-fig{margin:clamp(2rem,4vw,3.2rem) 0}
.art-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art-fig figcaption{margin-top:.7rem;font-size:.78rem;color:var(--ink-soft)}
.art-fig--wide{width:min(100vw - 2 * var(--edge),58rem);margin-inline:0}
.art-fig--wide img{aspect-ratio:16/9}
.art-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:clamp(2rem,4vw,3.2rem) 0}
.art-pair .art-fig{margin:0}
@media(max-width:640px){.art-pair{grid-template-columns:1fr}}
.art-quote{margin:clamp(2.4rem,4vw,3.6rem) 0;padding-inline-start:clamp(1.2rem,3vw,2rem);border-inline-start:2px solid var(--gold)}
.art-quote p{font-family:var(--fs);font-weight:300;font-style:italic;font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);line-height:1.4;letter-spacing:-.015em;color:var(--navy);margin-bottom:.8rem}
.art-quote cite{font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.art-end{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);padding-top:1.6rem}
.art-end span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.art-end p{margin:.6rem 0 1rem;color:var(--ink-soft);font-size:.95rem}
.art-more{border-top:1px solid var(--line)}

/* ---- from prototype: blog_css ---- */
.bl-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3rem) clamp(1.2rem,2vw,2rem)}
@media(max-width:860px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bl-grid{grid-template-columns:1fr}}
.bl-card .fr{aspect-ratio:4/3}
.bl-card .cap{padding-top:1rem;gap:.5rem}
.bl-card .cap .s{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.bl-card .cap .t{font-size:clamp(1.05rem,.9rem + .45vw,1.35rem);font-weight:500;line-height:1.22;color:var(--navy);transition:color .3s}
.bl-card:hover .cap .t{color:var(--navy)}
.bl-card .cap .x{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.bl-feat{grid-column:1/-1;grid-template-columns:1.3fr 1fr;display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.bl-feat .fr{aspect-ratio:16/11}
.bl-feat .cap{padding-top:0}
.bl-feat .cap .t{font-family:var(--fs);font-size:clamp(1.7rem,1rem + 2.2vw,3rem);font-weight:300;letter-spacing:-.02em;line-height:1.08}
@media(max-width:760px){.bl-feat{grid-template-columns:1fr}.bl-feat .fr{aspect-ratio:4/3}}

/* ---- from prototype: referentsid_css ---- */
.work-index{padding-top:clamp(2.5rem,4.5vw,4.5rem)}
.worktabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.worktab{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem;border:0;border-inline-end:1px solid var(--line);background:none;color:var(--ink-soft);padding:clamp(1.05rem,2vw,1.5rem) 1rem;cursor:pointer;font:600 .72rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
.worktab:last-child{border-inline-end:0}
.worktab svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.3;flex:0 0 auto}
.worktab::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--navy);transition:right .5s var(--ease)}
.worktab:hover{color:var(--navy)}
.worktab.on{color:var(--navy)}.worktab.on::after{right:0}
.work-index[data-view="grid"] .work-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:clamp(2.5rem,5vw,4rem);align-items:start}
.work-index[data-view="grid"] .work-card{grid-column:auto!important;margin:0!important}
.work-index[data-view="grid"] .work-media{height:auto!important;aspect-ratio:4/3}
@media(max-width:640px){.worktab span{display:none}.worktab{gap:0;padding:1.1rem 1rem}.work-index[data-view="grid"] .work-grid{grid-template-columns:1fr}}

/* ---- from prototype: meist_css ---- */
.about-light{background:var(--paper);color:var(--ink)}
.about-light .about-label{color:var(--ink-soft)}
.about-light h2,.about-light h3{color:var(--navy)}
.about-light .about-team header>h2 em{color:var(--ink-soft)}
.about-light .about-team header>p:last-child{color:var(--ink-soft)}
.about-light .about-person p{color:var(--ink-soft)}
.about-light .about-person a{color:var(--ink-soft)}
.about-light .about-person a:hover{color:var(--navy)}
.about-light .about-value{border-color:var(--line)}
.about-light .about-value:last-child{border-color:var(--line)}
.about-light .about-value>span{color:var(--ink-soft)}
.about-light .about-value p{color:var(--ink-soft)}
.about-light .about-sustain>div>p:last-child{color:var(--ink-soft)}
.about-light .about-contact h2 em{color:var(--ink-soft)}
.about-light .about-contact a{border-color:var(--line)}
.about-light .about-contact a:last-child{border-color:var(--line)}
.about-light .about-contact a:hover{color:var(--navy)}
.about-section{padding-block:clamp(4.5rem,8vw,8.5rem)}
.about-team{padding-bottom:clamp(5rem,9vw,9rem)}
.about-team header>h2{margin-block:clamp(4rem,7vw,7rem)}
.about-team header>p:last-child{margin-bottom:clamp(4rem,8vw,8rem)}
.about-contact{padding-bottom:clamp(5rem,8vw,8rem)}

/* ---- from prototype: kontakt_css ---- */
.form-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(2rem,1rem + 4vw,5rem)}@media(max-width:800px){.form-grid{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}.field label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}.field input,.field textarea{border:1px solid var(--line);border-radius:3px;padding:.85em 1em;font:inherit;font-size:1rem;background:var(--white);color:var(--ink)}.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy)}

/* ---- from prototype: outlet_css ---- */
.outlet-top{padding-bottom:clamp(2rem,4vw,3rem)}
.outlet-head{display:grid;grid-template-columns:1.5fr auto;gap:clamp(2rem,1rem + 4vw,5rem);align-items:end;margin-top:1rem}
@media(max-width:900px){.outlet-head{grid-template-columns:1fr;align-items:start}}
.outlet-head h1{margin:.6rem 0 0}
.outlet-head .lead{margin-top:1.2rem;max-width:52ch}
.outlet-facts{display:flex;gap:clamp(1.5rem,3vw,3rem);border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.2rem,3vw,2.5rem)}
@media(max-width:900px){.outlet-facts{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:1.4rem}}
.outlet-facts dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.outlet-facts dd{font-family:var(--fs);font-weight:300;font-size:clamp(1.6rem,1rem + 1.8vw,2.6rem);line-height:1;letter-spacing:-.02em}
.outlet-mail{display:inline-flex;align-items:baseline;gap:.7rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.outlet-mail span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.outlet-mail strong{font-family:var(--fs);font-weight:300;font-size:clamp(1.05rem,1rem + .6vw,1.4rem);border-bottom:1px solid var(--line);transition:border-color .35s var(--ease),color .35s var(--ease)}
.outlet-mail:hover strong{color:var(--navy);border-color:var(--navy)}

.outlet-navwrap{position:sticky;top:0;z-index:8;background:oklch(0.995 0.0015 264/.92);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.outlet-nav{display:flex;gap:.4rem;overflow-x:auto;padding-block:.85rem;scrollbar-width:none}
.outlet-nav::-webkit-scrollbar{display:none}
.onav-b{flex:0 0 auto;border:1px solid var(--line);background:transparent;font:inherit;font-size:.78rem;color:var(--ink-soft);padding:.5rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.onav-b span{font-size:.66rem;opacity:.6;margin-inline-start:.25rem;font-variant-numeric:tabular-nums}
.onav-b:hover{color:var(--navy);border-color:var(--navy)}
.onav-b.on{background:var(--navy);border-color:var(--navy);color:#fff}

.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.6rem + 1vw,1.8rem)}
@media(max-width:1100px){.ogrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.ogrid{grid-template-columns:repeat(2,1fr)}}
.ocard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.ocard:hover{border-color:var(--navy);transform:translateY(-3px)}
.ocard-img{position:relative;aspect-ratio:1/1;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ocard-img img{width:100%;height:100%;object-fit:contain;padding:12%;transition:transform .8s var(--ease)}
.ocard:hover .ocard-img img{transform:scale(1.05)}
.ocard-noimg{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);opacity:.5}
.ocard-qty{position:absolute;top:.7rem;left:.7rem;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;background:var(--navy);color:#fff;padding:.28rem .5rem;font-variant-numeric:tabular-nums}
.ocard-body{padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;flex:1}
.ocard-cat{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ocard h3{font-size:.88rem;font-weight:500;line-height:1.4;letter-spacing:0;margin:.45rem 0 0;flex:1}
.ocard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--line)}
.ocard-price{font-family:var(--fs);font-weight:300;font-size:1.15rem;letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
.ocard-ask{font-size:.74rem;color:var(--ink-soft);white-space:nowrap;transition:color .3s var(--ease)}
.ocard-ask .arw{display:inline-block;transition:transform .4s var(--ease)}
.ocard:hover .ocard-ask{color:var(--navy)}
.ocard:hover .ocard-ask .arw{transform:translateX(.25rem)}
.ogrid-none{margin-top:2.5rem;color:var(--ink-soft);font-size:.92rem}
.ogrid-none[hidden]{display:none}

.outlet-note{border-top:1px solid var(--line);padding-top:clamp(1.5rem,3vw,2.2rem);max-width:62ch;color:var(--ink-soft);font-size:.92rem;line-height:1.65}
.outlet-note a{color:var(--navy);border-bottom:1px solid var(--line)}
.outlet-note a:hover{border-color:var(--navy)}
/* --- Standard Originals (template-originals.php) -------------------------------
   Moodud Harli Figma-failist, teisendatud kanva laiuse (5026px) suhtes vw-ks, nii et
   kompositsioon pusib sama ka teistel ekraanidel:
     pealkiri 220px -> 4.38vw   tootenimi 100px -> 1.99vw   vaiketekst 60px -> 1.19vw
     kaardi tekst algab 59.8%   nurgiku vasak ots 50.2%   parem serv 93.9%
   Kanvas on 5026x2829 ehk 16:9 — sellest ka sektsiooni korgus. --- */
/* Korgus arvestab fikseeritud paisega (~5.5rem), muidu jooksis alumine serv aknast
   valja ja mooblil loigati jalad ara. */
/* Sektsioon votab tapselt akna miinus pais. Slaider saab jarelejaanud ruumi ja
   pildid mahutavad end sinna sisse — nii ei pea korgust uhegi konkreetse ekraani
   jaoks kasitsi timmima. */
.orig{background:#fff;position:relative;height:min(56.3vw,calc(100svh - 7rem));min-height:30rem;
  display:flex;flex-direction:column;padding:clamp(1rem,.75rem + 1.5vw,2.5rem) 0 0;overflow:hidden}

/* Vasak veerg lopeb 50%-l, sest sealt algab nurgik. Kaardi tekst nihkub omakorda
   paremale, et joon jaaks tekstist vasakule nagu maketil. */
/* z-index, sest .orig-shelf on nuud inset:0 ja katab terve sektsiooni. Positsioneeritud
   element joonistub tavavoo elementide peale ka siis, kui z-index on 0, nii et esimene
   katse peitis pealkirja ja tutvustuse taustagradiendi alla. Kaart oli endiselt naha,
   sest tal on oma z-index:2 - just selle jarelt sai vea ules leida. */
.orig-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);gap:0;
  align-items:start;padding:0 var(--edge)}
.orig-eyebrow{font-size:clamp(.74rem,.66rem + .24vw,.92rem);font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--navy);margin:0 0 clamp(.6rem,1.5vw,1.2rem)}
.orig h1{font-family:var(--f);font-weight:300;font-size:clamp(1.7rem,.6rem + 4.6vw,5rem);
  line-height:1.06;letter-spacing:-.015em;color:var(--navy);margin:0;max-width:19ch}
.orig-intro{max-width:64%;margin:clamp(1.5rem,4vw,3.5rem) 0 0;color:var(--navy);font-weight:400;
  font-size:1.06rem;line-height:1.6;letter-spacing:normal}
.orig-intro p{margin:0 0 .6rem}
.orig-intro p:last-child{margin-bottom:0}

/* Kaart on nurgik, mitte kast: joon paremal ja all. Tekst istub nurgiku sees umbes
   viiendiku vorra paremal, nii et joon ulatub tekstist vasakule ja langeb sealt
   tapiga toote peale. */
/* Figma: kaardi nurgik algab 50.2% juurest ja lopeb 93.9% peal. Tekst istub nurgiku
   sees 22% vorra paremal, nii et joon ulatub tekstist vasakule ja saab sealt tapiga
   toote juurde langeda.

   Korgus on sisu jargi, mitte fikseeritud 23%. Maketi ajal oli kaardis ainult pere
   nimi ja 23% mahutas selle ara; kui peredele lisandus kirjeldus, jai alumine aaris
   teksti sisse ja joon jooksis labi lause. min-height hoiab Figma proportsiooni siis,
   kui tekst on luhike, aga laseb nurgikul kasvada, kui ta on pikem. */
.orig-card{position:absolute;left:50.2%;right:6.1%;top:18.9%;height:auto;min-height:23%;
  z-index:2;margin:0;border:0;
  /* Harli: thinner border, and more room below the text before it -- the line
     read as too heavy and too tight against the copy. */
  border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);
  padding:0 clamp(1rem,3vw,3rem) clamp(1rem,2.5vw,2rem) 22%}
.orig-card figcaption{margin:0}
.orig-card-name{font-family:var(--fs);font-weight:300;font-size:var(--fs-md);
  line-height:1.14;letter-spacing:-.015em;color:var(--navy);margin:0 0 clamp(.5rem,1.2vw,1rem);
  display:inline-block;vertical-align:middle}
/* Harli: arrow next to the family name, linking out to that family's own page
   (product_family single -- see template-originals.php). Name kept inline-block
   so the arrow sits on the same line instead of dropping below it. */
.orig-card-arrow{display:inline-flex;align-items:center;justify-content:center;
  width:1.8rem;height:1.8rem;margin:0 0 clamp(.5rem,1.2vw,1rem) .6rem;
  color:var(--navy);vertical-align:middle;overflow:visible}
.orig-card-arrow svg{display:block;overflow:visible}
/* Harli: no circle round the button -- just the arrow. On hover/focus the
   shaft stretches (scaleX from its left end) and the head slides out to meet
   it, so the whole arrow reads as getting longer rather than just bolder. */
.orig-card-arrow .oa-shaft{transform-origin:left center;transition:transform .18s ease}
.orig-card-arrow .oa-head{transition:transform .18s ease}
.orig-card-arrow:hover .oa-shaft,.orig-card-arrow:focus-visible .oa-shaft{transform:scaleX(1.55)}
.orig-card-arrow:hover .oa-head,.orig-card-arrow:focus-visible .oa-head{transform:translateX(5px)}
.orig-card-family{font-family:var(--f);font-weight:500;font-size:clamp(.8rem,1.19vw,1.4rem);
  line-height:1.4;letter-spacing:-.01em;text-transform:uppercase;color:var(--navy);
  margin:0 0 clamp(.5rem,1.4vw,1.2rem)}
.orig-card-text{font-family:var(--f);font-weight:400;font-size:1.06rem;
  line-height:1.6;letter-spacing:normal;color:var(--navy);margin:0}
.orig-card-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Figma: tapp on koordinaadil (2522, 1389) ehk suure toote peal, veerandi jagu
   selle ulaservast allpool. Vahe kaardi alaservast on 7.2% sektsiooni korgusest. */
.orig-card-line{position:absolute;left:-1px;bottom:-1px;width:1px;height:4.05vw;
  background:var(--navy);transform:translateY(100%)}
.orig-card-line::after{content:"";position:absolute;left:50%;bottom:0;width:.5vw;height:.5vw;
  min-width:.35rem;min-height:.35rem;border-radius:50%;background:var(--navy);transform:translate(-50%,50%)}

/* Stuudiotaust: tsuklorama.

   Referentspildilt moodetud heledusprofiil keskjoonel (vesimargi riba valja jaetud):
       0%  191        60%  189
      20%  203        68%  168
      40%  203        76%  133   <- koige tumedam, seina ja poranda nurk
      52%  197        80%  191   <- porand huppab tagasi heledaks
                      88%  203
   Sein on uleval uhtlaselt hele. Tume ei ole seina peal, vaid kitsas voond seina all,
   ja selle alt algab uuesti hele porand.

   Ulemine viiendik on puhas --paper, mitte kalde algus. Pais on lehe enda varvi ja
   kohe 14% pealt algav hall tegi sinna nahtava ulemineku; nuud laheb pais sektsiooni
   sisse ilma piirita ja pealkiri istub valgel.

   Nurk on 79-84% juures, mitte 73-79%: madalamal on ta toodete taga, mitte nende
   korval. Sein ise (52%) on 241 ja nurk 221 - amplituud 32, Harli valik kolme variandi
   vahelt, kus 24 oli nahtamatu ja 49 tegi herost eraldi halli ploki.

   Valguslaigu raadius 11% ja kese 96%, sest laik ja nurk ei tohi kattuda. Varasem laik
   (30%, kese 93%) ulatus otse nurga sisse ja pyhkis selle keskelt laiali - nurk paistis
   ainult aartes, mis oli tapselt pohjus, miks stuudiot ei tekkinud.

   Horisontaalne vinjett on eraldi kiht: referentsil on y=60% juures kesk 187 ja servad
   143/136, ehk vinjett ei kai vertikaalse kaldega kaasa.

   Vinjeti kohal on veel uks kiht, mis taastab ulaosas --paperi ule kogu laiuse. Ilma
   selleta kaib vinjett taies tugevuses ka labi valge ulaosa ja sektsiooni vasak ning
   parem serv on kohe paise all hall - keskel oli uleminek jooneta, aartes mitte.
   Alfa on kirjutatud sama oklch-varviga, mitte transparentiga: transparent tahendab
   labipaistvat musta ja gradient labiks selle poole minnes halli. */
.orig-shelf{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 11% at 50% 96%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 75%),
    linear-gradient(to bottom,var(--paper) 0%,var(--paper) 16%,oklch(0.995 0.0015 264/0) 34%),
    linear-gradient(to right,rgba(176,184,197,.24) 0,rgba(176,184,197,0) 24%,
      rgba(176,184,197,0) 76%,rgba(176,184,197,.24) 100%),
    linear-gradient(to bottom,
      var(--paper) 0%,
      var(--paper) 20%,
      #f9fafb 34%,
      #f3f5f7 52%,
      #ebeef2 68%,
      #e4e8ed 79%,
      #e2e6eb 84%,
      #eff2f5 88%,
      #fafbfc 94%,
      #f3f5f7 100%)}

/* Tooted uhel joonel. Aktiivne on maketil poolteist korda laiem: 31.3% vs 20%. */
/* Negatiivne ulaserv toob riba teksti tuhja alaosa peale.

   Toode ei saa olla suurem kui riba on korge, ja riba sai ainult selle, mis .orig-top
   jargi ule jai - 358px. Samal ajal on sektsiooni paremal pool kaardi alt kuni pohjani
   ligi 570px tuhja: kaart lopeb 297 juures, tooted algasid alles 512 juures.

   Tekst jaab vasakusse veergu ja lopeb seal, kus lopeb; suur toode on keskel ja moodub
   sellest paremale. Nad ei saa teineteist katta. Servmised tooted on skaalaga .64 ja
   jaavad ka pikema ribaga tutvustusest allapoole.

   vw-des, mitte pikslites, et ulekate kahaneks koos ekraaniga - kitsal lauaarvutil
   votab pealkiri suhteliselt rohkem korgust ja seal ei ole 120px ule anda. */
.orig-slider{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;
  margin-top:clamp(-11rem,-11vw,0rem);
  padding-bottom:clamp(.5rem,1.5vw,1.5rem);z-index:1}
/* Alaserva paddingut siin ei ole. Uks katse pani siia clamp(2rem,3.6vw,3.5rem), et
   peegeldusele ruumi teha, aga .orig-item korgus on 100% riba sisukastist, nii et
   padding luhendas uhtlasi koiki tooteid. Vaiksemad tooted olid halvem kui peegeldus
   oli hea, ja peegeldust ei ole enam. */
/* Riba tohib kerida ainult kulili.

   overflow-x:auto teeb elemendist ka pustsuunalise kerimisala - overflow-y arvutatakse
   sellest automaatselt auto'ks. Pildid ulatuvad --foot vorra riba alt valja, nii et seal
   oli 78px paris kerimisruumi ja sorm liigutas seda: tooteriba nihkus ules-alla. Sellest
   nihkumisest Harli raakiski. overflow-y:hidden votab selle ruumi ara.

   touch-action:pan-x lukustab lisaks zesti horisontaalseks, nii et vahegi diagonaalne
   puhkimine ei anna pustsuunda lehele edasi. overscroll-behavior-x:contain hoiab riba
   lopu ara brauseri tagasi-zestist. */
.orig-track{display:flex;align-items:flex-end;gap:0;height:100%;list-style:none;margin:0;
  padding:0 var(--edge);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  touch-action:pan-x;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.orig-track::-webkit-scrollbar{display:none}
/* Animeerime transformi, mitte laiust. Laiuse muutmine sunniks brauserit iga kaadri
   juures paigutust umber arvutama ja koik naabrid liiguksid kaasa — sellest tuli
   raskus ja korrigeeriv hupe. Nuud on kast alati sama suur ja muutub ainult skaala,
   nii et midagi ei reflow ja kerimiskoht jaab paigale.
   Figma suhe: aktiivne 31.3%, teised 20% — kasti 22% suhtes 1.42x ja 0.91x. */
/* Kast on suurima mootu ja skaala ei lahe kunagi ule uhe. Varem oli vastupidi:
   aktiivne kasvas 1.42x oma kastist valja ja riba — mis on kerimisala ja loikab ka
   pustsuunas — loikas pildi ulalt ara. Negatiivne kulgmarginaal toob kastid kokku,
   nii et vahed jaavad maketi omadeks.
   Figma suhe: aktiivne 31.3%, teised 20% ehk 0.64x. */
/* 36vw, mitte 30vw. Moodetud, kui suure osa ruudukujulisest kaadrist ese ise taidab:
     CONNECT 56% lai / 89% korge     CRATE 95% / 64%
     LAND    92% / 49%               FRANK 74% / 65%
     PIANO   85% / 49%               SOFT  91% / 69%
   LAND ja PIANO ei olnud vaikesed - nad on madalad ja laiad, nagu diivan olemagi peab,
   ja taidavad kaadri laiuse peaaegu ara. Piiraja oli seega kasti laius, mitte korgus,
   ja korgust jai ribal kasutamata. Laiem kast kasvatab koiki peresid uhtlaselt ja
   moodukava jaab omavahel oigeks. Kulgmarginaal jaab -4.5vw peale, nii et samm laieneb
   koos kastiga ja naabrid ei roni ustteise peale. */
.orig-item{position:relative;flex:0 0 auto;width:36vw;height:100%;display:block;
  margin-inline:-4.5vw;scroll-snap-align:center;
  transform:scale(.64);transform-origin:bottom center;
  transition:transform .65s cubic-bezier(.22,1,.36,1)}
.orig-item.on{transform:scale(1);z-index:2}
.orig-item a{display:block}
/* Pildi korgusel on lagi. Ilma selleta maarab rea korguse ainult laius korda
   kuvasuhe ja korge PNG lukkab sektsiooni aknast valja. */
/* mix-blend-mode:multiply oli siin selleks, et valge taustaga PNG-d valge lehe peal
   ara sulaks. Tootepildid on nuud labipaistva taustaga ja porand on halli varjundiga,
   nii et multiply teeks kahju: toote valge pind korrutuks porandaga ja labipaistvaks
   muutuks just see, mis peaks kohe olema - FRANKi valge lauaplaat naiteks. */
/* --foot on see osa pildi alaservast, mis on labipaistev, protsendina pildi korgusest.
   PHP moodab selle GD-ga ja kirjutab kasti kulge. Ilma selleta seisab iga toode oma
   PNG raami pohjal, mitte oma jalgadel: CONNECTil on all tuhja 4%, LANDil 19%, ja
   ekraanil oli see naha 60-pikslise korgusvahena kahe korvuti eseme vahel. Nihe toob
   koigi jalad tapselt uhele joonele, sest ta on igal pildil ise suur. */
/* Pilt on absoluutses positsioonis, mitte flex-element - ja see ei ole stiilivalik.

   Flexis ei kehti replaced-elemendi kuvasuhet hoidev piirangualgoritm: brauser surub
   laiuse peatelje jargi kokku ja votab korguse eraldi intrinsic vaartusest, mille
   klammerdab max-height'i otsa. Kaks piirajat rakenduvad teineteisest soltumatult ja
   suhe laheb katki. Lauaarvutil see valja ei paistnud, sest kast on laiem kui korgem
   ja korgus jai piirajaks nagunii. Telefonis on kast 218x242 ehk pusti, ja ruudukujuline
   825x824 tootepilt venis tapselt 218x242 peale.

   flex-shrink:0 seda ei paranda - max-width klammerdab ikka laiuse ja korgus jaab omaette.
   Absoluutses positsioonis kaib pilt labi tavalise shrink-to-fit arvutuse, kus max-width
   ja max-height on uks piirang koos ja kuvasuhe sailib. Seetottu on .orig-item nuud
   display:block ja pilt kinnitub ise alaserva.

   translateY(--foot) on pildi enda korguse protsent, nii et ta tootab siin tapselt
   samamoodi nagu enne. */
.orig-item img{position:absolute;left:50%;bottom:0;width:auto;height:auto;
  max-width:100%;max-height:100%;
  transform:translate(-50%,var(--foot,0))}

.orig-item-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.orig-arrow{position:absolute;top:40%;transform:translateY(-50%);width:2.5rem;height:2.5rem;
  border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;z-index:3;
  opacity:.7;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.orig-arrow:hover{opacity:1;border-color:var(--navy)}
.orig-arrow::before{content:"";position:absolute;left:50%;top:50%;width:.45rem;height:.45rem;
  border-left:1px solid var(--navy);border-bottom:1px solid var(--navy)}
.orig-arrow--prev{left:calc(var(--edge) / 3)}
.orig-arrow--prev::before{transform:translate(-30%,-50%) rotate(45deg)}
.orig-arrow--next{right:calc(var(--edge) / 3)}
.orig-arrow--next::before{transform:translate(-70%,-50%) rotate(-135deg)}
.orig-empty{padding:0 var(--edge);color:var(--navy)}

@media (max-width:900px){
  /* height:auto on siin hadavajalik, mitte kosmeetika. Pohireeglis on
     height:min(56.3vw,...) - see mahutab sektsiooni lauaarvutil uhe ekraani sisse, aga
     telefonis on 56.3vw kokku 218px ja .orig on overflow:hidden. Ainult min-height:auto
     ei aidanud: fikseeritud height jai kehtima, tutvustus loppes poole lause pealt ja
     terve slaider jai kasti alla peitu. Telefonis maarab korguse sisu. */
  .orig{height:auto;min-height:auto;padding-bottom:clamp(.75rem,2.5vw,1.5rem)}
  /* Vahed telefonis poole vaiksemaks. Sektsioon oli 735px 790px ekraani sees ja
     tooted jaid alla surutuks; koik vahed kokku andsid ligi 80px, mida keegi ei
     kasutanud. Tooterada ise jaab puutumata - kitsendus tuleb tuhjast ruumist. */
  .orig-top{grid-template-columns:1fr;gap:clamp(.6rem,2.5vw,1rem)}
  .orig h1{font-size:clamp(1.7rem,3vw + 1.15rem,2.6rem);max-width:none}
  .orig-intro{max-width:none}
  .orig-card{max-width:none;padding-left:0;border-right:0;margin-top:clamp(1rem,4vw,2rem)}
  .orig-card-name{font-size:clamp(1.15rem,5vw,1.6rem)}
  .orig-card-family,.orig-card-text{font-size:.85rem}
  /* Taust kaib ka telefonis terve sektsiooni kulge, mitte ainult slaidri peale.
     Vahepeal kandis kallet slaider ise, sest sektsiooni korgus on siin sisust soltuv
     ja fikseeritud protsent oleks vale kohta sattunud. Aga slaider on 250px ja
     sektsioon 638px, nii et stuudiost jai jarele madal riba lehe alaservas ja ulemine
     pool oli lihtsalt valge. Protsendid tootavad ka siin: slaider on alati sektsiooni
     pohjas, nii et toote jalad jaavad ~95% peale ka siis, kui tutvustus pikeneb.

     Valge ulaosa on 24%, mitte 20% nagu lauaarvutil - telefonis on pealkiri suurem osa
     sektsioonist ja peab tervenisti valgel istuma. Nurk on 81-86%. */
  .orig-shelf{display:block;
    background:
      radial-gradient(86% 9% at 50% 96%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 76%),
      linear-gradient(to bottom,var(--paper) 0%,var(--paper) 28%,oklch(0.995 0.0015 264/0) 46%),
      linear-gradient(to right,rgba(176,184,197,.2) 0,rgba(176,184,197,0) 26%,
        rgba(176,184,197,0) 74%,rgba(176,184,197,.2) 100%),
      linear-gradient(to bottom,
        var(--paper) 0%,var(--paper) 24%,#f9fafb 40%,#f2f4f7 58%,
        #eaedf1 72%,#e4e8ed 81%,#e2e6eb 86%,#eff2f5 90%,#fafbfc 95%,#f3f5f7 100%)}
  /* Konkreetne korgus, mitte flex:1. Lauaarvutil on sektsioonil fikseeritud korgus ja
     ahel .orig-slider -> .orig-track{height:100%} -> .orig-item{height:100%} ->
     img{max-height:100%} laheb sealt ilusti labi. Telefonis on sektsioon height:auto,
     ahelal ei ole enam midagi, mille kulge kinnituda, ja brauser venitas 174px laiuse
     pildi 659px korguseks. Uks kindel arv siin paneb terve ahela paika. */
  .orig-slider{height:clamp(17rem,78vw,26rem);margin-top:clamp(.6rem,2.5vw,1.2rem);background:none}
  /* Kaart Harli telefonimaketi jargi: silt, suur nimi, joon nime korvalt paremale ja
     sealt alla punktini. Lauaarvutil joonistab sama joone kaardi enda border-right ja
     border-bottom; telefonis on kaart tavavoos ja joon tuleb eraldi kokku panna.

     Joone x on 64% kaardi laiusest ja see arv esineb kaks korda: nime ::after lopeb
     margin-right:36% peal ja pustjoon algab left:64% pealt. Nad peavad kokku saama,
     nii et kui uht muudad, muuda ka teist.

     Horisontaaljoon on nime ::after ja mitte eraldi element, sest ta peab algama
     tapselt sealt, kus nimi lopeb - ja nime laius soltub sellest, mis peret parasjagu
     naidatakse. Flexis teeb seda flex:1 ise, ilma et keegi peaks laiust arvutama. */
  .orig-card{position:relative;left:auto;right:auto;top:auto;height:auto;padding:0;border-bottom:0;
    margin-top:clamp(.6rem,2vw,1rem)}
  .orig-card-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;
    display:block;font-family:var(--f);font-size:.7rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--navy);margin:0 0 .5rem}
  /* Kogu joonekuju tuleb nime enda kulge, mitte kaardi ulaservast moodetuna.
     Varem algas pustjoon top:3.1rem pealt, mis oli kaardi ulaservast kaega arvutatud,
     ja jai 9px allapoole nime keskjoont - horisontaal ja pustjoon ei saanud kokku.
     Nuud on molemad seotud nime keskjoonega ja nihe ei saa tekkida.

     ::after on flex-element, mis taidab nimest jareljaanud ruumi ja lopeb 36% peal.
     translateY(50%) toob tema ulaaare tapselt nime keskele: kast on align-items:center
     tottu keskjoone peal, poole korguse vorra allanihe paneb ulaserva keskjoonele.
     Punkt on nime ::before ja kasutab sama 64% ja sama 3.1rem, nii et ta satub
     tapselt sinna, kus ::after nurk lopeb.

     Joon on navy 45% labipaistvusega ja punkt 0.42rem: maketil on joon delikaatne
     vihje, mitte raamistus. Tais navy 2px oli seal liiga vali. */
  .orig-card-name{position:relative;display:flex;align-items:center;gap:.9rem;
    font-size:clamp(1.45rem,6.2vw,2rem);margin-bottom:.75rem}
  .orig-card-name::after{content:"";flex:1 1 auto;height:3.1rem;margin-right:36%;
    border-top:1px solid oklch(0.32 0.088 264/.45);
    border-right:1px solid oklch(0.32 0.088 264/.45);
    transform:translateY(50%)}
  .orig-card-name::before{content:"";position:absolute;left:64%;top:50%;
    width:.42rem;height:.42rem;border-radius:50%;background:var(--navy);
    transform:translate(-50%,calc(-50% + 3.1rem))}
  .orig-card-line{display:none}
  /* Kirjeldus jaab joonest vasakule. Ilma laiusepiiranguta jookseb pustjoon ja tema
     punkt otse ule teksti - maketil on tekstiveerg kitsam ja joon langeb tuhja ruumi. */
  /* Neli rida, nagu maketil. Valjavote on 26 sonaline ja mahtus telefoni kuuele reale,
     mis lukkas tooted allapoole. line-clamp loikab kuvamisel, tekst ise jaab terveks -
     lauaarvutil ja otsimootorile on ta endiselt tais. */
  .orig-card-text{max-width:58%;line-height:1.42;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  /* Tutvustus on telefonis peidus. Maketil on pealkirja ja VALITUD TOODE vahel tuhi
     ruum, mitte lõik, ja iga siia jaav rida lukkab tooted ekraani alt valja. Tekst on
     HTML-is alles, ainult nahtamatu - lauaarvutil naidatakse teda edasi. */
  .orig-intro{display:none}
  /* Telefonis sama loogika: kast oli 56vw ehk 218px ja riba 242px korge, nii et
     korgusest jai 24px kasutamata. 62vw votab selle ara. */
  .orig-item{width:76vw;margin-inline:-6vw;transform:scale(.8)}
  .orig-item.on{transform:scale(1)}
  .orig-arrow{display:none}
}

/* --- Kollektsioonide nimekiri (Standard Originals, hero all) -------------------
   Moodetud inclass.es/collections lehelt 1440px juures:
     veerge 3        kaart 415px      vahe 72px
     pildikast 415x363 ehk suhe 1.15  pealdis keskel
     nimi 20px w500 suurtahtedes sans, tahevahe .5px
     autor 14px w600, sama tahevahe
   Kolm veergu, mitte viis: Inclassil on kaart suur ja tuhja ruumi palju. auto-fill
   andis 1440 juures viis kitsast kaarti - ruudustik oli tihe seal, kus eeskuju on hore.

   object-fit jaab contain'iks, kuigi Inclassil on cover. Nende pildid on kaadrisse
   komponeeritud ja taidavad selle ara; meie omad on labipaistva taustaga eri
   kuvasuhetega valjaloiked ja cover loikaks neil jalad ara. --- */
.famx{padding:clamp(3.5rem,7vw,7rem) var(--edge) clamp(4rem,8vw,8rem);background:var(--paper)}
.famx-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.famx-head h2{font-family:var(--f);font-weight:300;font-size:clamp(1.7rem,1rem + 2.8vw,3.3rem);
  line-height:1.14;letter-spacing:-.015em;color:var(--navy);margin:0}
.famx-count{font-size:clamp(.74rem,.66rem + .24vw,.92rem);font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.famx-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,5vw,4.5rem)}
.famx-link{display:block;color:inherit}

.famx-media{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1.15;background:#fff;overflow:hidden}
/* 28.09.2026: pilt on 10% siseservaga ehk ~20% vaiksem — Harli soov, rohkem ohku.
      Plaat on SAMAL AJAL puhas valge, mitte --paper-2. Pohjus: uued kaardipildid on
      puhta valge taustaga (mootsin: rgb 255,255,255), vanad shadow-PNG-d labipaistvad.
      Halli plaadi peal jataks paddinguga valge pilt nahtava ruudu keset kasti — tapselt
      see, mis 30.08 maha voeti. Valge plaat teeb molemat sorti pildid uhtlaseks.
      Kui padding kunagi tagasi votta, pane ka plaat --paper-2 peale tagasi.
   
      Vana pohjendus alles: cover ja ilma paddingita — Harli soov 30.08.2026.

   Enne oli contain + 7% padding. See oli moeldud vanade piltide jaoks: labipaistva
   taustaga valjaloiked eri kuvasuhetega, mille jalad oleks cover ara loiganud.

   Uued tootepildid on 2000x2000 renderdused OMA heleda taustaga. Contain'i all istus
   see taust kaardi sees eraldi ruuduna: hele plaat veel heledama kasti sees, nahtava
   servaga. Cover venitab renderduse kaadrisse ara ja tema enda taust ONGI kaardi taust —
   uhtlane pind toote taga, ilma raamita.

   Ruut 1.15 kastis kaotab ~13% ulevalt-alt, aga see on renderdusel tuhi taust. Vanad
   fotod (3:2) on kaadrisse komponeeritud ja taluvad kadreerimist niikuinii. */
.famx-media img{width:100%;height:100%;object-fit:cover;padding:10%;
  transition:transform .8s var(--ease)}
.famx-link:hover .famx-media img{transform:scale(1.04)}

.famx-cap{display:block;padding-top:1.1rem;text-align:center}
.famx-name{display:block;font-family:var(--f);font-weight:500;
  font-size:clamp(1rem,.85rem + .35vw,1.25rem);line-height:1.2;letter-spacing:.5px;
  text-transform:uppercase;color:var(--navy);transition:opacity .3s var(--ease)}
.famx-by{display:block;margin-top:.35rem;font-size:.875rem;font-weight:600;letter-spacing:.5px;
  line-height:1.4;color:var(--ink-soft)}
.famx-link:hover .famx-name{opacity:.6}

@media (max-width:900px){
  .famx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.25rem}
  .famx-head{flex-direction:column;align-items:flex-start;gap:.4rem}
}
@media (max-width:480px){
  .famx-grid{grid-template-columns:1fr;gap:2.5rem}
}

/* Harli soov 30.08.2026: hero taust lihtsalt valge, ilma stuudiogradiendita.

   Kogu stuudiokompositsioon — sein, poranda nurk, valguslaik, vinjett — on ulalpool
   .orig-shelf'i sees alles, nii lauaarvuti kui telefoni variandis. Need kaks rida
   kirjutavad ta lihtsalt ule; nende kustutamine toob stuudio tagasi tapselt sellisena,
   nagu ta oli. Reeglid on failis hiljem kui @media plokk, seetottu voidavad molemat.

   background:none, mitte display:none — element hoiab endiselt oma kohta kihistuses
   (.orig-top ja .orig-slider on tema peal z-index:1 peal) ja ei muuda paigutust. */
.orig-shelf{background:none}
@media (max-width:900px){.orig-shelf{background:none}}

/* --- Tootepere leht (single-product_family.php) ---------------------------------
   Moodetud arper.com/en_GB/collections/aom.html pealt 1440px laiuses, mille Harli
   andis referentsiks. Arperi arvud on kommentaarides, et jargmine muudatus teaks,
   mille suhtes ta on:

     hero          1440x900, h1 100px w300 uppercase ls .3px keskel, all peen joon
     ankruriba     korgus 67px, lingid 14px, keskel
     kirjeldus     veerud 798 / 447, lopp 32px/40px, korvalpealkiri 24px w400
     tooterida     688x205, pisipilt 140x140 vasakul, nimi 20px, link 14px
     grupp         32px w400

   Kaks kohta, kus ma Arperist teadlikult korvale laksin:

   1. Pisipilt on `contain`, mitte `cover`. Arperi pildid on kaadrisse komponeeritud ja
      taidavad selle ara; meie omad on labipaistva taustaga valjaloiked eri kuvasuhetega
      ja cover loikaks pikal diivanil otsad maha.

   2. Kirjade suurused kaivad avalehe skaalaga kaasa (clamp, mitte fikseeritud px), sest
      Harli palus tekstid avalehega uhtlustada. Arperi 100px ja 32px on siin clampide
      ulemine ots, mitte konstant.
   ------------------------------------------------------------------------------ */

/* Hero. Pilt aarest aarde, nimi keskel. Arperil 900px ehk tapselt aken; svh, et
   telefonis ei arvestaks ta sisse aadressiriba, mis kerimisel niikuinii ara kaob. */
.famv-hero{position:relative;min-height:min(88svh,50rem);display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:clamp(4rem,10vw,7rem) var(--edge)}
.famv-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Vari on pehme ja kahest otsast: ules, et teekond ja pais loetavaks jaaksid, ning
   keskele nimetu peale. Tootepildid on heledad — ilma selleta kaob valge nimi ara. */
.famv-hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(180deg,oklch(0.2 0.05 264/.42) 0%,oklch(0.2 0.05 264/.06) 26%,
      oklch(0.2 0.05 264/0) 46%,oklch(0.2 0.05 264/.34) 100%),
    radial-gradient(58% 40% at 50% 52%,oklch(0.2 0.05 264/.34) 0,oklch(0.2 0.05 264/0) 100%)}
/* Teadlikult position:static. Kui .famv-hero-in on relative, kinnitub allpool olev
   absoluutne teekond TEMA kulge — ja tema on pusti keskel, nii et teekond maandus tapselt
   nime peale. Uleval olev z-index laks h1 kulge. */
.famv-hero-in{position:static;width:100%;text-align:center;color:#fff}
/* Link pere oma veebilehele. Istub bannerpildi all paremas nurgas.
   Absoluutne positsioon kinnitub .famv-hero kulge (see on relative) — tapselt
   nagu teekond ulaservas. Taidetud sinine, sest valge kontuur heleda foto peal
   kadus ara. */
.famv-hero-site{position:absolute;z-index:2;
	right:var(--edge);bottom:clamp(1.5rem,3.5vw,3rem);
	display:inline-flex;align-items:center;padding:.95rem 1.9rem;
	background:var(--navy);border:1px solid var(--navy);color:#fff;
	font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
	transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.famv-hero-site:hover{background:#fff;border-color:#fff;color:var(--navy)}
/* Ilma bannerpildita hero on luhike ja hele — seal ei ole nurka, kuhu kinnituda. */
.famv-hero--bare .famv-hero-site{position:static;margin-top:clamp(1.2rem,2.2vw,2rem)}
/* Teekond kaib hero ulaserva, mitte nime korvale.

   .famv-hero-in on pusti keskel, nii et tavavoos maandus teekond otse nime kohale — ta oli
   pildi keskel, kus varju ei ole, ja kadus taustaga kokku. Arperil istub ta 62px pealt
   ules. Absoluutne positsioon kinnitub .famv-hero kulge (see on relative) ja jatab nime
   keskele rahule. */
.famv-hero-in .crumbs{position:absolute;left:var(--edge);right:var(--edge);
  top:clamp(1.5rem,4vw,3.2rem);z-index:2;justify-content:center;
  color:oklch(0.94 0.01 264)!important}
.famv-hero-in .crumbs a{color:inherit}
.famv-hero--bare .famv-hero-in .crumbs{position:static;left:auto;right:auto}

/* Arper: 100px w300 uppercase, ls .3px. Ulemine ots on 5rem, sama mis avalehe
   hero-pealkirjal, nii et kaks kirja lehte ei rivaalitse omavahel. */
.famv-hero-title{position:relative;z-index:1;font-family:var(--f);font-weight:300;
  font-size:clamp(2.2rem,.9rem + 5.2vw,5rem);line-height:1.04;letter-spacing:.02em;
  text-transform:uppercase;color:inherit;margin:clamp(1.2rem,3vw,2.2rem) 0 0;
  display:inline-block;padding-bottom:clamp(.7rem,1.5vw,1.1rem);
  border-bottom:1px solid oklch(1 0 0/.55)}

/* Pildita pere: hero laheb paberiks ja nimi navyks. Joon on siin --line, mitte valge. */
.famv-hero--bare{min-height:min(52svh,30rem);background:var(--paper);
  border-bottom:1px solid var(--line)}
.famv-hero--bare .famv-hero-in{color:var(--navy)}
.famv-hero--bare .famv-hero-in .crumbs{color:var(--ink-soft)!important}
.famv-hero--bare .famv-hero-title{border-bottom-color:var(--line)}

/* Ankruriba. Arperil 67px kogu laiuses, ohukese joonega all. Kleepuv, sest tooteid on
   monel perel kumneid ja kirjelduse juurde tagasi ei taha keegi kerida.

   top on --head-h, mitte 0. Teema pais on ise sticky top:0 peal ja z-index 60; top:0 pani
   ankruriba tapselt paise alla peitu. --head-h on sama arv, mille jargi pais oma korguse
   votab, nii et riba jaab tema alla ka siis, kui pais ekraaniga kaasa kahaneb.

   scroll-margin-top sektsioonidel: ankur maandub muidu paise ja riba alla ning pealkiri
   jaab nahtamatuks. Kaks riba kokku on ~9rem. */
.famv-desc,.famv-products{scroll-margin-top:calc(var(--head-h) + 4.5rem)}
.famv-nav{position:sticky;top:var(--head-h);z-index:7;display:flex;justify-content:center;
  gap:clamp(1.5rem,4vw,3rem);padding:1.5rem var(--edge);
  background:oklch(0.995 0.0015 264/.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.famv-nav a{font-size:.875rem;letter-spacing:.04em;color:var(--ink-soft);
  transition:color .3s var(--ease)}
.famv-nav a:hover{color:var(--navy)}

/* Kirjeldus. Arperi veerud on 798 / 447 ehk suhtes 1.78 : 1. */
.famv-desc{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,6rem);align-items:start;
  padding:clamp(3.5rem,8vw,7.5rem) var(--edge)}
/* Arper: 32px/40px w400. Sama roll, mis teemas on `.art-lead`-il, ainult uhe astme
   suurem — see on lehe ainus pikk tekst ja tal on ruumi. */
.famv-lead{font-family:var(--f);font-weight:300;
  font-size:clamp(1.15rem,.95rem + 1.05vw,2rem);line-height:1.32;letter-spacing:-.01em;
  color:var(--navy)}
.famv-lead p{margin:0 0 1em}
.famv-lead p:last-child{margin-bottom:0}
.famv-lead--auto{color:var(--ink-soft)}

.famv-desc-side{display:flex;flex-direction:column;gap:clamp(1.8rem,3vw,2.6rem)}
/* 28.09.2026: kirjeldus kolis kulgribasse, faktide alla, vaiksema kirjaga.
   Tais laiuses oli rida ~90 marki pikk ja luges halvasti; kitsas veerus on
   ~45, mis on lugemiseks parim vahemik. */
.famv-desc-side .famv-desc-main{padding-top:clamp(.4rem,1vw,1rem);
	border-top:1px solid var(--line)}
.famv-desc-side .famv-lead{font-family:var(--f);font-weight:300;
	font-size:clamp(.95rem,.88rem + .22vw,1.1rem);line-height:1.55;letter-spacing:0;
	color:var(--ink-soft);max-width:none}
.famv-fact{border-top:1px solid var(--line);padding-top:1.1rem}
/* Arper: 24px w400. */
.famv-fact-h{font-family:var(--f);font-weight:500;
  font-size:clamp(.74rem,.66rem + .24vw,.92rem);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .9rem}
.famv-fact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.famv-fact-list a{font-size:clamp(1rem,.9rem + .35vw,1.25rem);color:var(--navy);
  border-bottom:1px solid var(--line);padding-bottom:.1rem;
  transition:border-color .3s var(--ease)}
.famv-fact-list a:hover{border-color:var(--navy)}
.famv-fact-num{font-family:var(--fs);font-weight:300;
  font-size:clamp(2rem,1.4rem + 2vw,3.4rem);line-height:1;letter-spacing:-.02em;
  color:var(--navy);margin:0}
.famv-fact-sub{font-size:.875rem;color:var(--ink-soft);margin:.3rem 0 0}

/* Tooted. */
/* 28.09.2026: tooted on nuud uleval ja jagavad rea disaineri/arvu kulgribaga —
   vasakul tooted uksteise all, paremal faktid. Samad veerud mis .famv-desc-l,
   et kaks sektsiooni oleksid uhel vertikaalsel joonel. */
.famv-products{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);
	gap:clamp(2rem,5vw,6rem);align-items:start;
	padding:clamp(3rem,6vw,5.5rem) var(--edge) clamp(2rem,4vw,3.5rem)}
.famv-products-main{min-width:0}
/* Pool laiust: read uksteise all, mitte korvuti. */
.famv-products .famv-list{grid-template-columns:minmax(0,1fr)}
/* Kirjelduse kulgriba kolis toodete juurde; tekst hoiab oma senist mootu. */
.famv-desc{padding-top:0}
/* Arper: 32px w400. Grupipealkiri on liigendus, mitte sektsioonipealkiri, nii et ta
   jaab avalehe sektsioonipealkirjast (52.8px) tublisti allapoole. */
.famv-group{font-family:var(--f);font-weight:400;
  font-size:clamp(1.25rem,1rem + 1vw,2rem);line-height:1.2;letter-spacing:-.01em;
  color:var(--navy);margin:clamp(2.5rem,5vw,4rem) 0 clamp(1.2rem,2.5vw,2rem);
  padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.famv-group:first-child{margin-top:0}

/* Kaks rida korvuti, nagu Arperil (688px 1376px sees). Ruudustik ja mitte flex, et
   korvutiste ridade pisipildid oleksid uhel joonel ka siis, kui nimi murdub kahele reale. */
.famv-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,4rem)}
.famv-row{border-bottom:1px solid var(--line)}
.famv-row-link{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(1rem,2vw,1.6rem) 0;color:inherit}
/* Arper: 140x140. Ruut ja kindla mootuga, sest read peavad ohtu korgusega olema —
   erineva korgusega pildid annaksid korvutistele veergudele eri rutmi. */
.famv-row-media{flex:0 0 auto;width:clamp(5.5rem,11.5vw,11rem);aspect-ratio:1;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.famv-row-media img{width:100%;height:100%;object-fit:contain;padding:6%;
  transition:transform .7s var(--ease)}
.famv-row-link:hover .famv-row-media img{transform:scale(1.05)}
.famv-row-body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
/* Arper: 20px w400. */
.famv-row-name{font-size:clamp(1.05rem,.9rem + .5vw,1.45rem);font-weight:400;line-height:1.25;
  letter-spacing:-.01em;color:var(--navy);transition:opacity .3s var(--ease)}
.famv-row-go{font-size:.875rem;color:var(--ink-soft);transition:color .3s var(--ease)}
.famv-row-link:hover .famv-row-name{opacity:.62}
.famv-row-link:hover .famv-row-go{color:var(--navy)}

.famv-back{padding:0 var(--edge) clamp(4rem,8vw,7rem)}
.famv-back .ar{width:1.6rem;height:1px;background:currentColor;display:block;
  transition:width .4s var(--ease)}
.famv-back .arrow-link:hover .ar{width:2.4rem}

@media (max-width:900px){
  .famv-desc{grid-template-columns:1fr;gap:2.5rem}
	.famv-products{grid-template-columns:1fr;gap:2.5rem;padding-top:2.5rem}
  .famv-lead{max-width:none}
  .famv-list{grid-template-columns:1fr}
  .famv-nav{padding:1.1rem var(--edge)}
}
@media (max-width:560px){
  .famv-hero{min-height:min(62svh,34rem)}
  .famv-row-link{gap:1rem}
}

/* --- Sisustuse valikuleht /projektid/ -------------------------------------------
   Harli soov 30.08.2026: „kolmeks jagatud piltidega ja natuke korgem block".

   Kolmikjaotus oli juba olemas (.interiors-options on 3 veergu). Uus on kaks asja:
   kaardi ulemine osa on nuud foto, ja kaart on korgem — 34rem asemel 40rem, ehk
   1440px juures 544px -> 640px.

   Reeglid elavad siin, mitte base.css-is, kus .interiors-* muidu on. base.css on 90 KB
   ja failihaldur ei kirjuta nii suurt faili turvaliselt ule (sama pohjus, mille parast
   standard_years_active() istub llms-txt.php-s — vt ulesanne #81). pages.css laeb
   base.css jarel igal lehel, nii et need reeglid voidavad. Kui paris faililigipaas
   tekib, kolib see plokk base.css-i .interiors-option juurde.
   -------------------------------------------------------------------------------- */

/* Padding laheb kaardilt ara ja kolib kehasse: foto peab ulatuma kaardi servani.
   min-height on see „natuke korgem" — clamp'i keskmine liige hoiab kaardi ekraaniga
   proportsioonis, ulemine ots 40rem on umbes kolmveerand aknast, nii et pais ja kaart
   mahuvad koos uhele ekraanile. */
.interiors-option{min-height:clamp(26rem,46vw,40rem);padding:0;overflow:hidden}

/* Foto on 62% kaardi korgusest, mitte „koik, mis ule jaab".

   Esimene katse andis fotole flex:1 1 auto ja kehale nii palju, kui tekst noudis. Kaardid
   on uhekorgused (ruudustik venitab nad uhtlaseks), aga kirjeldused on eri pikkusega — 3
   rida vs 2 — ja seetottu loppes iga foto ise kohas. Korvuti oli see kohe naha: kolm
   pildi alaserva kolmel eri joonel.

   62% on protsent kaardi korgusest, mis on ruudustiku venituse tottu maaratud, nii et
   flex-basis saab ta ara lahendada. Nuud on koik kolm fotot uhepikkused ja nool istub
   margin-top:auto abil iga kaardi pohjas. */
.interiors-option-media{position:relative;display:flex;align-items:center;
  justify-content:center;flex:0 0 62%;min-height:12rem;overflow:hidden;
  background:var(--paper-2)}
/* Absoluutne, sest flex-elemendina laheks pildi kuvasuhe katki (sama loksu astusin
   Originalsi slaidril: flexis ei kehti replaced-elemendi suhet hoidev piirangualgoritm). */
.interiors-option-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 1.1s var(--ease)}
.interiors-option:hover .interiors-option-media img{transform:scale(1.04)}

/* Number istub foto peal ulal vasakul. Foto voib olla igat karva, nii et tema alla kaib
   kitsas tume voond — muidu kaob „01" heleda seina peal ara. */
.interiors-option-media::before{content:"";position:absolute;inset:0 0 auto;height:5.5rem;
  background:linear-gradient(180deg,oklch(0.2 0.05 264/.45),oklch(0.2 0.05 264/0));
  pointer-events:none}
.interiors-option-no{position:absolute;top:clamp(1rem,1.8vw,1.5rem);
  left:clamp(1rem,1.8vw,1.5rem);z-index:1;color:#fff;font-family:var(--fs);font-size:.8rem}
/* Pildita sektor: joonis keskele, endine hall kast, tume voond ja valge number ara. */
.interiors-option--noimg .interiors-option-media::before{display:none}
.interiors-option--noimg .interiors-option-no{color:var(--ink-soft)}
.interiors-option-icon{margin:0}

.interiors-option-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  padding:clamp(1.4rem,2.4vw,2.2rem)}
.interiors-option-body h2{margin-bottom:.7rem}
/* auto, mitte kindel vahe: nii on nool iga kaardi pohjas ka siis, kui uhel on kaks rida
   kirjeldust ja teisel kolm. */
.interiors-option-arrow{margin-top:auto;padding-top:1.2rem}

@media (max-width:900px){
  /* Telefonis on kaarte kolm ustteise all — 40rem kolm korda oleks kolm ekraanitaide
     kerimist enne, kui esimene valik on tehtud. 24rem hoiab foto olemas, aga kolmiku
     kokku kahe ekraani sisse. */
  .interiors-option{min-height:24rem}
  .interiors-option-media{min-height:11rem}
}

/* --- Sektorilehe fotohero (.shero) ----------------------------------------------
   Harli soov 30.08.2026: „header transparent ja taga hero photo".

   Vana .sector-subhero oli valge, jagatud kaheks — tekst vasakul, kolme pildi ruudustik
   paremal — ja pais istus tema kohal oma paberivarvi ribana. Uus on uks foto servast
   servani, mis jookseb paise alt labi, ja tekst tema peal.

   Uus klassinimi (.shero) tahendab, et koik vanad .sector-subhero reeglid base.css-is ja
   theme.css-is lakkavad ise kehtimast. See on siin tahtis: theme.css laeb pages.css-i
   JAREL, nii et sealsete `.tax-reference_type .sector-subhero` reeglite ulekirjutamine
   oleks noudnud igal pool kunstlikult tostetud spetsiifilisust. Nimevahetus lahendab
   sama asja ilma uhegi !important'ita.
   -------------------------------------------------------------------------------- */

/* Pais laheb labipaistvaks ja tuleb voost valja, et foto ulatuks ekraani ulaservani.

   position:fixed, mitte absolute nagu case- ja Meist-lehel. Neil kahel kerib pais pildiga
   koos minema; sektorileht on 7000px pikk ja menuu peab kattesaadav jaama. fixed hoiab ta
   paigal ja .solid — mille header.php skript juba igal lehel 24px pealt kulge paneb —
   toob talle tauustavarvi tagasi niipea, kui foto on ules kerinud. Sama muster, mis
   avalehel, ainult teise sektsiooni jargi. */
/* top ei ole 0, vaid WP admin-riba korgus.

   .page on ise position:fixed ja algab 32px pealt, nii et sisu arvestab admin-ribaga.
   Fikseeritud pais top:0 peal aga poeb tema alla ja logo jai sisselogitud kasutajal
   riba taha. --wp-admin--admin-bar--height on WordPressi enda muutuja; valja logitud
   kulastajal on ta olematu ja varuvaartus 0px annab tapselt sama tulemuse mis enne. */
.page:has(.shero) .site-head{position:fixed;left:0;right:0;
  top:var(--wp-admin--admin-bar--height,0px);
  background:transparent;border-bottom-color:transparent;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.page:has(.shero) .site-head .logo,
.page:has(.shero) .site-head .site-nav a,
.page:has(.shero) .site-head .icon-btn,
.page:has(.shero) .site-head .menu-toggle,
.page:has(.shero) .site-head .lang{color:#fff}
.page:has(.shero) .site-head .site-nav a::after{background:#fff}
/* Foto on ules keritud: pais laheb paberiks ja kiri navyks tagasi. */
.page:has(.shero) .site-head.solid{background:var(--paper);border-bottom-color:var(--line);
  box-shadow:0 1px 0 var(--line)}
.page:has(.shero) .site-head.solid .logo,
.page:has(.shero) .site-head.solid .site-nav a,
.page:has(.shero) .site-head.solid .icon-btn,
.page:has(.shero) .site-head.solid .menu-toggle,
.page:has(.shero) .site-head.solid .lang{color:var(--navy)}
.page:has(.shero) .site-head.solid .site-nav a::after{background:var(--navy)}

/* Hero ise. Tekst on all vasakus nurgas, nagu fotoheroga tavaks — ules ta ei saa, seal on
   pais. padding-top on --head-h jagu suurem, et ka pikk pealkiri ei roniks menuu alla. */
/* Korgus on aken MIINUS admin-riba, mitte tais 100svh.

   Kerimisala on div.page, mis on admin-riba jagu luhem kui aken. Tais 100svh tegi hero
   32px korgemaks kui tema oma konteiner ja „Vaata referentse" nupp jai tapselt akna alla
   peitu — sisselogituna oli ta nahtamatu, valja logituna paras. Sama muutuja lahendab
   molemad juhtumid uhe reeglina. */
.shero{position:relative;
  /* Sektorivaliku riba korgus. Ta on herost valjaspool tavavoogu (absolute), nii et
     tekstiplokk ei tea temast midagi — see arv ongi see teadmine. Uks koht, kus teda
     muuta, ja nii riba enda korgus kui talle jaetud ruum liiguvad koos. */
  --shero-nav-h:clamp(4.6rem,9svh,6rem);
  min-height:calc(100svh - var(--wp-admin--admin-bar--height,0px));
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy-deep);
  padding:calc(var(--head-h) + 2rem) var(--edge) calc(var(--shero-nav-h) + clamp(2rem,5svh,3.5rem))}
/* Alaserva vahe ei ole maitseasi, vaid arvutus.

   site.js paljastab [data-rise] elemendid IntersectionObserveriga, mille juur on div.page
   ja rootMargin alt -8%. Paljastamata element on lisaks translateY(42px) vorra allpool oma
   lopplikku kohta. Kui tekstiplokk on liiga vastu hero alaserva, jaab „Vaata referentse"
   nupp oma paljastamata asendis tapselt sellesse valjajaetud 8% ribasse — vaatleja ei nae
   teda kunagi ja nupp jaab nahtamatuks, kuni keegi kerib.

   1440x900 juures on riba 69px ja nihe 42px, kokku 111px. clamp'i keskmine liige (13svh =
   117px) katab selle ja jatab veel vahe. Kui keegi seda arvu vahendab, kaob nupp ara. */
.shero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Loor kolmes kihis, igal oma too:
     1) ulaserv  — labipaistva paise logo ja menuu peavad ka heleda lae peal loetavad olema
     2) vasak    — kogu tekst istub seal, foto parem pool jaab puutumata
     3) alaserv  — valge kirja ja tema all oleva valge numbririba vahel ei tohi olla serva */
.shero-shade{position:absolute;inset:0;
  background:
    linear-gradient(180deg,oklch(0.18 0.05 264/.55) 0%,oklch(0.18 0.05 264/.12) 18%,
      oklch(0.18 0.05 264/0) 34%),
    linear-gradient(100deg,oklch(0.16 0.05 264/.72) 0%,oklch(0.16 0.05 264/.42) 38%,
      oklch(0.16 0.05 264/0) 72%),
    linear-gradient(180deg,oklch(0.18 0.05 264/0) 40%,oklch(0.18 0.05 264/.34) 68%,
      oklch(0.18 0.05 264/.72) 100%)}

/* Pildita sektor: foto asemel margi enda navy, sama kompositsioon. Nii ei teki halli auku
   ja kiri jaab loetavaks ka siis, kui sektoril ei ole veel uhtegi pilti. */
.shero--bare{background:var(--navy-deep)}

/* Hero tekst ei tohi soltuda JS-ist.

   [data-rise] on CSS-is opacity:0 seni, kuni site.js lisab .show. Selle vaatleja juur on
   div.page — position:fixed kerimiskast — ja tema esimene callback ei joudnud siin lehel
   kohale: avamisel ei ole veel midagi kerinud, midagi ei muutu, ja algkirje jaab tulemata.
   Lehtedel, kus esimeses vaates on ainult pealkiri, ei paistnud see valja, sest kerimine
   jargnes niikuinii. Taisekraani fotohero paneb aga KOGU teksti esimesse vaatesse: silt,
   pealkiri, lopp ja nupp. Kes lihtsalt vaatas lehte, nagi tuhja pilti.

   Siin teeb sama liikumise CSS-i animatsioon, mis ei vaja kedagi. .show klass voib
   endiselt kulge tulla — animation on juba lopetanud ja ei muuda midagi. */
.shero [data-rise]{opacity:1;transform:none;animation:shero-rise 1s var(--ease) both}
.shero .eyebrow[data-rise]{animation-delay:.05s}
.shero h1[data-rise]{animation-delay:.14s}
.shero-in p[data-rise]{animation-delay:.24s}
.shero-cta[data-rise]{animation-delay:.34s}
.shero-figs[data-rise]{animation-delay:.42s}
@keyframes shero-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .shero [data-rise]{animation:none;opacity:1;transform:none}
}
/* Silt on niigi pehmem kui ulejaanu — animatsioon lopeb tema oma .86 peal, mitte 1 peal. */
.shero .eyebrow[data-rise]{animation-name:shero-rise-soft}
@keyframes shero-rise-soft{from{opacity:0;transform:translateY(30px)}to{opacity:.86;transform:none}}

/* Sisu kahes veerus: tekst vasakul, arvud paremal — Harli makett 30.08.2026.
   1.35fr : 1fr, sest pealkiri on lehe pikim rida ja arvud on kolm luhikest tulpa. */
.shero-in{position:relative;z-index:1;width:100%;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;color:#fff}
/* 44rem, mitte 34: 34rem juures murdus „Kontor & avalik ruum" kahele reale, kuigi
   ruudustiku veerg (718px) oleks ta ara mahutanud. Lopu enda pikkust hoiab .shero-in p
   oma 38ch-ga, nii et laiem veerg ei tee teksti loetamatuks. */
.shero-copy{max-width:44rem}

/* Arvud. dd on enne dt-d ka HTML-is, nii et suur arv seisab sildi peal ilma
   flex-direction:column-reverse'ita — ekraanilugeja loeb nad samas jarjekorras. */
.shero-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.7rem);margin:0}
.shero-figs > div{min-width:0}
/* 28.09.2026: arv ei murdu kunagi. „22 000 m2" vajas 332px, veerg on 182px -
   number laks kolmele reale ja sildid erinevale korgusele. m2 on nuud sildis,
   kirjasuurus mahub pikima arvu jargi ja white-space hoiab rea koos. */
.shero-figs dd{margin:0;font-family:var(--fs);font-weight:300;
	font-size:min(clamp(1.4rem,3.1vw - 6px,3.5rem),8svh);line-height:1;letter-spacing:-.03em;
	white-space:nowrap;color:#fff}
.shero-figs dt{margin-top:.6rem;font-size:.78rem;line-height:1.35;
  color:oklch(0.9 0.015 264);max-width:14ch}
.shero-in .eyebrow{display:flex;align-items:center;gap:1.1rem;color:#fff;opacity:.86}
.shero-in .eyebrow::after{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.5}
/* Sama seriifskaala, mis vanal herol oli — ainult varv on nuud valge. 8svh lagi hoiab
   pealkirja madalal ekraanil pildi sees. */
.shero h1{font-family:var(--fs);font-size:min(var(--fs-display),9svh);font-weight:300;
  line-height:.95;letter-spacing:-.04em;color:#fff;margin:clamp(.7rem,1.6svh,1.3rem) 0}
.shero h1 em{font-weight:300;font-style:italic;color:#fff}
.shero-in p{max-width:38ch;color:oklch(0.94 0.01 264);
  font-size:min(var(--fs-lead),2.4svh);line-height:1.5}
/* Nupp on valge kontuur, mitte navy tais: navy nupp tumeda foto peal kaob ara. */
.shero-cta{margin-top:clamp(1.2rem,2.8svh,2rem);border-color:oklch(1 0 0/.6);color:#fff}
.shero-cta:hover{background:#fff;color:var(--navy);border-color:#fff}
.shero-cta .arw{display:inline-block;transition:transform .4s var(--ease)}
.shero-cta:hover .arw{transform:translateX(.3rem)}

/* Sektorivalik foto alaservas.

   absolute, mitte tavavoos: maketil katab valge riba pildi alumise serva, mitte ei ala
   tema all uuest reast. Kulgvahe on --edge, nii et riba servad on samal joonel pealkirja
   ja arvudega. base.css annab talle juba valge tausta, joone ja kolm veergu — siin on
   ainult asukoht ja vari, mis ta pildi kuljest lahti tostab. */
.shero-nav{position:absolute;left:var(--edge);right:var(--edge);bottom:0;z-index:2;
  min-height:var(--shero-nav-h);border-bottom:0;
  box-shadow:0 -1px 40px oklch(0.2 0.05 264/.18)}
.shero-nav a{padding-block:clamp(1.1rem,2.4svh,1.7rem)}

@media (max-width:900px){
  /* Telefonis ei ole motet tervel ekraanikorgusel: pealkiri ja nupp mahuvad 78svh sisse
     ja numbririba paistab kohe ara, ilma et peaks terve akna jagu kerima. */
  /* Telefonis uks veerg: tekst, siis arvud. Kaks veergu jagaks 375px ara nii, et
     pealkiri murduks igast sonast ja arvud jaaks kitsaks tulbaks. */
  .shero{min-height:calc(86svh - var(--wp-admin--admin-bar--height,0px));
    padding-top:calc(var(--head-h) + 1rem)}
  .shero-in{grid-template-columns:1fr;gap:clamp(1.5rem,4svh,2.5rem)}
  .shero-copy{max-width:none}
  .shero-figs{gap:.8rem}
  .shero-figs dd{font-size:min(clamp(1.5rem,7vw,2.4rem),6svh)}
  .shero-figs dt{font-size:.68rem;margin-top:.35rem}
  /* Riba lopeb telefonis ikoonide ja teksti tottu korgem — anna talle rohkem ruumi. */
  .shero{--shero-nav-h:clamp(4.2rem,12svh,5.4rem)}
  .shero h1{font-size:clamp(2.6rem,11vw,4rem);line-height:.96}
  .shero-in p{font-size:1rem;line-height:1.5;max-width:none}
  .shero-nav{left:var(--edge);right:var(--edge)}
  /* Loor telefonis pusti, mitte vasakult.

     Kaldloor (100deg) on moodetud lauaarvuti laiuse jargi ja lopeb 72% peal gradiendi
     joonest. Pustises kaadris jookseb see joon hoopis teisiti ja tekstini ta ei joua —
     HOTELLID nagi valja nii, et valge pealkiri istus heleda diivani peal ja kadus ara.
     Pusti loor alt ules teeb sama too kaadri kujust soltumata. */
  .shero-shade{background:
    linear-gradient(180deg,oklch(0.18 0.05 264/.5) 0%,oklch(0.18 0.05 264/.1) 20%,
      oklch(0.18 0.05 264/0) 38%),
    linear-gradient(180deg,oklch(0.16 0.05 264/0) 26%,oklch(0.16 0.05 264/.5) 62%,
      oklch(0.16 0.05 264/.82) 100%)}
}

/* --- Poe bänner /tooted/ (.shop-hero) -------------------------------------------
   Harli makett 30.08.2026. Foto aarest aarde, tekst vasakul: silt, suur pealkiri,
   lopp ja link kategooriate juurde.

   Maketil on tekst NAVY heleda foto peal, mitte valge tumeda peal. Nii on ta ka siin,
   aga sinna juurde kaib vasakusse serva valge loor: maketi render on puhta heleda
   seinaga, paris foto ei pruugi seda olla ja navy kiri kaoks tumeda kapi peale ara.
   Loor on valge, mitte must — nii jaab kogu plokk paberi ja mitte pildi tunde juurde,
   nagu maketil.
   -------------------------------------------------------------------------------- */

.shop-hero{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(19rem,30vw,28rem);
  padding:clamp(2.5rem,4.5vw,4rem) var(--edge);background:var(--navy-deep)}
/* Absoluutne, sest flex-elemendina laheks pildi kuvasuhe katki. */
/* object-position 50% 62%, mitte keskelt. Foto on 3:2 ja bänner 3.7:1, nii et kaadrist
   jaab jarele umbes kolmandik. Keskelt loigates jai ulaserva lae ja seinasildi riba;
   62% toob kaadri allapoole, moobli ja poranda peale, mis on see, mida kataloogi bänner
   naitama peaks. */
.shop-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%}
/* Loor on tume, mitte valge — Harli valik, ja ta on ka oigem valik.

   Valge pesu noudis, et foto vasak kolmandik oleks peaaegu ara pestud, muidu kadus navy
   kiri tumeda kapi peale. See tahendas, et pool bänneri fotost oli nagunii nahtamatu.
   Tume loor teeb vastupidi: foto jaab tervikuna nahtavaks, ainult tuhma, ja valge kiri
   seisab tema peal kindlalt. Uhtlasi on see sama muster, mis sektorilehel ja tootepere
   lehel — kolm fotoheroga lehte ei loe nuud kolme eri moodi.

   Kolm kihti, igal oma too: vasak kaldloor teksti alla, ulaserv paise piiri pehmendama,
   alaserv selleks, et bänneri ja valge kataloogi vahel ei oleks terav serv. */
.shop-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,oklch(0.16 0.05 264/.82) 0%,oklch(0.16 0.05 264/.62) 30%,
      oklch(0.16 0.05 264/.22) 56%,oklch(0.16 0.05 264/0) 78%),
    linear-gradient(180deg,oklch(0.16 0.05 264/.4) 0%,oklch(0.16 0.05 264/0) 30%),
    linear-gradient(180deg,oklch(0.16 0.05 264/0) 62%,oklch(0.16 0.05 264/.42) 100%)}

.shop-hero-in{position:relative;z-index:1;max-width:32rem}
.shop-hero-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:oklch(0.88 0.02 264);margin:0}
/* Sama skaala mis .shop-top h1-l, uhe astme suurem: bänner on lehe esimene pilk ja
   „Kataloog" tema all jaab siis loomulikult teiseks. */
.shop-hero-title{font-family:var(--fs);font-weight:300;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:1.06;letter-spacing:-.025em;
  color:#fff;margin:.7rem 0 0;max-width:14ch}
.shop-hero-lead{color:oklch(0.93 0.012 264);font-size:.95rem;line-height:1.55;
  margin:.9rem 0 0;max-width:38ch}
.shop-hero-cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(1rem,2vw,1.5rem);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;color:#fff;
  border-bottom:1px solid oklch(1 0 0/.65);padding-bottom:.25rem;
  transition:border-color .3s var(--ease)}
.shop-hero-cta:hover{border-bottom-color:#fff}
.shop-hero-cta .arw{display:inline-block;transition:transform .4s var(--ease)}
.shop-hero-cta:hover .arw{transform:translateX(.3rem)}

/* .shop-top oli kaheveeruline ruudustik, mille paremas veerus seisid kategooriakaardid.
   Kaardid on maas, nii et teine veerg on tuhi ja pealkiri jaaks ilma selleta poolele
   lehele kokku surutuks. */
/* Kaks klassi, sest theme.css laeb pages.css-i JAREL ja seab siin kaks veergu.
   Sama spetsiifilisus kaotaks jarjekorra tottu; .shop-top.shop-top on uks vorra korgem
   ilma !important'ita. */
.shop-top.shop-top{grid-template-columns:minmax(0,1fr)}

@media (max-width:700px){
  /* Telefonis jaab tekst pildi PEALE, mitte alla.

     Valge loori juures oli see valistatud: pustises kaadris oleks pesu pidanud katma
     peaaegu kogu pildi, et navy kiri loetav oleks, ja siis ei olnud fotot enam motet
     naidata. Tume loor teeb sama too kaadri kujust soltumata, nii et bänner jaab
     telefonis samasuguseks nagu lauaarvutil — uks plokk, mitte pilt ja tekst ustteise
     otsas.

     Loor kaib siin pusti, mitte kaldu: 100deg gradiendi joon on moodetud lauaarvuti
     laiuse jargi ja pustises kaadris ta tekstini ei joua. Sama loksu astusin
     sektorilehel. */
  .shop-hero{min-height:clamp(20rem,72vw,26rem);align-items:flex-end;
    padding:clamp(3rem,10vw,4rem) var(--edge) clamp(1.8rem,6vw,2.6rem)}
  .shop-hero-shade{background:
    linear-gradient(180deg,oklch(0.16 0.05 264/.42) 0%,oklch(0.16 0.05 264/.08) 24%,
      oklch(0.16 0.05 264/0) 40%),
    linear-gradient(180deg,oklch(0.16 0.05 264/0) 28%,oklch(0.16 0.05 264/.55) 62%,
      oklch(0.16 0.05 264/.86) 100%)}
  .shop-hero-in{max-width:none}
  .shop-hero-title{font-size:clamp(1.7rem,7.5vw,2.4rem);max-width:none}
  .shop-hero-lead{max-width:none}
}
}


/* Esindusbrandid: brandiplaadid pidid olema klikitavad ka enne "Esindusbrandid" lulitit,
   sest fbrand-note utleb "Margi esindusbrande, et need juurde lisada" ilma lulitit mainimata.
   base.css paneb .fbrand-logos pointer-events:none, kuni tal on .active klass (luliti sees) -
   see tegi placid klopsamatuks vaikimisi (suletud) olekus. Laadimisjarjekord base->pages->theme
   lubab siin sama spetsiifilisusega ule kirjutada, ilma !important'ita. */
.fbrand-logos{pointer-events:auto}


/* Lab hero merged with the case slider (30.08.2026, Harli): the hero and the
   old standalone .lab-cases section are now one crossfade slider (see the
   rationale comment on the merged <section> in template-lab.php). .lc-track
   ships with a fixed clamp() height sized for a mid-page band; inside the
   hero it needs to fill the hero's own full height instead, or the nav/dots
   (positioned relative to .lc-track's bottom) land mid-image and a slab of
   the navy background shows below the shorter track. */
.lab-hero .lc-track{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	box-shadow: none;
}
.lab-hero .lab-hero-inner{ height: 100% }
.lab-hero .lc-slide--hero .lc-bg img{ filter: saturate(.75) contrast(1.05) }
/* .lc-slide::after already scrims every slide for the case captions; the
   hero brings its own .lab-hero-shade doing the same job with different
   numbers, so switch the generic one off for slide 1 only. */
.lab-hero .lc-slide--hero::after{ content: none }

/* The focus bar: same white-bar-on-photo idea as .shero-nav (see
   /sisustus/kontorid/), but that one runs edge to edge because it is a
   category sub-nav; three focus cards read better sized to their content
   and pinned to the right, the way the hero's own stat block already sits. */
.lab-hero .lab-hero-focusbar{
	position: absolute;
	z-index: 3;
	left: auto;
	right: var(--edge);
	bottom: 0;
	top: auto;
	width: fit-content;
	max-width: calc(100% - (var(--edge) * 2));
	grid-template-columns: repeat(3, minmax(8.5rem, 13rem));
	margin-top: 0;
	padding: 1.3rem 1.6rem 1.5rem;
	background: var(--navy-deep);
	box-shadow: 0 -1px 0 oklch(1 0 0 / .08), 0 -1px 40px oklch(0 0 0 / .35);
}
/* Harli: try the Lab page dark/navy so it reads as visually distinct from the
   rest of the (light) site. Panel above now matches .lab-hero's own navy-deep
   background (base.css) instead of white. This also deepens the hero photo's
   right-hand fade -- base.css's .lab-hero-shade only reaches 12% tint at 78%,
   leaving that side photo-bright where the nav/dots and this bar sit. */
.lab-hero .lab-hero-shade{
	background: linear-gradient(90deg, oklch(.12 .045 264 / .88) 0%, oklch(.15 .045 264 / .58) 48%, oklch(.16 .05 264 / .5) 78%), linear-gradient(0deg, oklch(.12 .04 264 / .55), transparent 52%);
}
.lab-hero .lab-hero-focusbar article{ border-top: none }

@media (max-width: 900px){
	.lab-hero .lab-hero-focusbar{
		left: 0;
		right: 0;
		margin-inline: auto;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 1rem;
		padding: 1.1rem 1.2rem 1.3rem;
		text-align: center;
	}
	.lab-hero .lab-hero-focusbar .lab-def-focus-icon{ margin-inline: auto }
}

/* Harli: keep the nav arrows and dots on the right, stacked above the focus
   bar -- not moved to the left -- so they share the same edge as the bar
   they sit above. Bottom offsets are hand-tuned to clear the bar's current
   height (~13.5rem at desktop widths); if the bar's content grows enough
   to make it noticeably taller, these need to move up to match. */
.lab-hero .lc-nav{
	left: auto;
	right: var(--edge);
	bottom: 16.25rem;
}
.lab-hero .lc-nav .s-btn{
	width: 2.3rem;
	height: 2.3rem;
}

/* Paired with the nav above: same right edge, sitting just below it. */
.lab-hero .lc-dots{
	left: auto;
	right: var(--edge);
	bottom: 15rem;
}
.lab-hero .lc-dots button{
	height: 2px;
}

/* On phones the focus bar becomes a full-width, stacked (icon+heading+copy)
   block instead of a single row, which makes it much taller. It still sits
   absolutely at the bottom of the hero (per the `keskel` request above), so
   without extra room it overlapped the hero copy/CTA underneath it. Give the
   hero extra height on mobile and reserve exactly that much space at the
   bottom of the copy column, so the copy keeps its normal position and the
   bar gets a clear band below it instead of sitting on top of the text. */
@media (max-width: 900px){
	.lab-hero{ min-height: calc(100svh - 3.8rem + 19rem) }
	.lab-hero .lab-hero-inner{ padding-bottom: 20rem }
}

/* 30.08.2026 - Harli: the case slides' text sat low and small compared to
   the hero slide, so the text jumped around as you clicked through the
   slider. Anchor the case-slide text block to the same vertical start the
   hero copy uses (same formula: .lab-hero-inner's own top padding, plus
   the 12vh .lab-hero-copy adds on top of that), and size the title closer
   to a real heading instead of the small default (still capped at 3 lines
   by the theme's own .lc-title rule, so long post titles still clamp). */
.lab-hero .lc-in{
	justify-content: flex-start;
	padding-top: calc(clamp(1.5rem, 4vh, 3.5rem) + 12vh);
	padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
}
.lab-hero .lc-title{
	font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem);
}

/* Give the focus-bar icons more presence - a soft tinted disc behind each
   one - and a slightly bolder heading, so the box reads as a designed
   panel rather than a plain three-column text list. */
.lab-hero .lab-hero-focusbar .lab-def-focus-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	/* Harli 16.09: sinine ja valge. Enne oli poollabipaistev roostekas
	   ring pruuni ikooniga - tumesinisel kaardil vahese kontrastiga. */
	background: #fff;
	color: var(--navy, #212938);
}
.lab-hero .lab-hero-focusbar .lab-def-focus-icon svg{
	width: 1.3rem;
	height: 1.3rem;
}
.lab-hero .lab-hero-focusbar h3{
	font-weight: 600;
	letter-spacing: -.01em;
	color: #fff;
}
.lab-hero .lab-hero-focusbar p{
	color: rgba(255,255,255,.68);
}

/* 30.08.2026 - found the real cause of the text misalignment Harli flagged:
   .lc-in shares the site-wide ".wrap" container class with the hero copy,
   but theme.css's own vertical-rhythm rule widens every OTHER lab-page
   section (.lab-hero-inner.wrap, .lab-definition.wrap, etc.) from the
   site default of 82rem up to 100rem - and .lc-in wasn't in that list, so
   it stayed on the narrower 82rem box. Centered independently, that put
   the case-slide text about 144px to the right of the hero text at
   desktop widths. Give it the same 100rem measure as the rest of the
   page so both sit on the identical left edge. */
.lab-hero .lc-in.wrap{
	max-width: 100rem;
}


/* 31.08.2026 - Harli: "Alusta koostööd" used to scroll down to an inline section;
   this turns that same section into a simple popup instead. The dialog itself is styled
   here; the show/hide/close wiring lives in lab.js, which just calls the native
   showModal()/close() - no custom overlay markup to keep in sync by hand. */
.lab-popup{
	position: relative;
	margin: auto;
	width: min(34rem, calc(100vw - 2.5rem));
	max-height: min(88vh, 52rem);
	overflow-y: auto;
	border: 0;
	border-radius: 10px;
	background: var(--paper);
	box-shadow: 0 24px 60px -12px oklch(0.28 0.03 264 / .35);
	opacity: 0;
	transform: translateY(8px) scale(.98);
	transition: opacity .22s var(--ease), transform .22s var(--ease), overlay .22s allow-discrete, display .22s allow-discrete;
}
.lab-popup[open]{
	opacity: 1;
	transform: translateY(0) scale(1);
}
@starting-style{
	.lab-popup[open]{
		opacity: 0;
		transform: translateY(8px) scale(.98);
	}
}
.lab-popup::backdrop{
	background: oklch(0.28 0.03 264 / .45);
	backdrop-filter: blur(2px);
}
.lab-popup-inner{
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
.lab-popup-inner .lab-form{
	margin-top: 1.5rem;
}
.lab-popup-close{
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink-soft);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.lab-popup-close:hover,
.lab-popup-close:focus-visible{
	background: var(--paper-2);
	border-color: var(--ink-soft);
	color: var(--ink);
}
@media (max-width: 640px){
	.lab-popup{
		width: calc(100vw - 1.5rem);
		max-height: min(92vh, 52rem);
	}
	.lab-popup-inner{
		padding: 1.5rem 1.25rem;
	}
}


/* ---- Standard Lab: dark theme, scoped to this page only ---- */

/*
 * Uks gradient, uks maalimine. Harli 01.09.2026: „vaadata et ei oleks jooni ja
 * sellist sektsioonitunnet".
 *
 * Sama gradient oli kirjutatud NELJALE elemendile eraldi: div.page, .site-head,
 * .lab-publishing ja .site-foot. Gradient arvutatakse alati elemendi enda kasti
 * jargi, nii et 1317px korgune .lab-publishing ja 654px korgune .site-foot said
 * kaks taiesti erinevat varviuleminekut — ja seal, kus nad kokku said, jooksis
 * ule ekraani nahtav joon. Sama iga sektsiooni ulaservas. Just see tegigi lehest
 * „sektsioonid", mitte terviku.
 *
 * Nuud on gradient uhes kohas muutujana ja teda maalib ainult kerimiskast
 * (div.page), mis on position:fixed ja katab terve akna. Sektsioonid on
 * labipaistvad ja ujuvad selle peal — piire ei saa enam tekkida, sest maalitud
 * pindu on uks.
 *
 * Pais on ainus erand: ta on sticky ja tal peab olema oma taust, muidu kerib
 * sisu ta alt labi. background-attachment:fixed paneb tema gradiendi akna, mitte
 * enda 69px kasti jargi — nii on ta sama gradiendi see osa, mis tema taha
 * niikuinii jaaks, ja liide on nahtamatu.
 */
body.page-template-template-lab{
	--lab-wash:
		radial-gradient(130% 180% at 90% -20%, oklch(0.55 0.09 80 / .14), transparent 55%),
		linear-gradient(112deg, oklch(0.15 0.05 264) 0%, var(--navy-deep) 30%, var(--navy) 70%, oklch(0.4 0.075 258) 100%);
}
body.page-template-template-lab,
body.page-template-template-lab div.page{
	background: var(--lab-wash);
	background-attachment: fixed;
}

body.page-template-template-lab .site-head{
	background: var(--lab-wash);
	background-attachment: fixed;
	border-bottom-color: oklch(1 0 0 / .12);
}
/* `*` puudutab ka paringuloendurit, mis tahab olla puhasvalge rooste peal.
   Ilma valistuseta sai ta 68% valge kirja - loetav, aga tuhm. */
body.page-template-template-lab .site-head,
body.page-template-template-lab .site-head *:not(.enq-count){
	color: rgba(255,255,255,.68);
}
body.page-template-template-lab .site-head svg,
body.page-template-template-lab .site-head .site-nav a.active,
body.page-template-template-lab .site-head .site-nav a:hover,
body.page-template-template-lab .site-head .langsw-t:hover{
	color: #fff;
}
/* `:not(.enq-count)` - loendur ON samuti span.
   Ilma selleta sai ta Labi lehel valge tausta ja parib valge kirja:
   valge pill valge numbriga. 16.09 mootsin - bg rgb(255,255,255),
   color rgba(255,255,255,.68). Number oli kohal, aga nahtamatu. */
body.page-template-template-lab .site-head .menu-toggle span:not(.enq-count){
	background: #fff;
}

body.page-template-template-lab .lab-definition,
body.page-template-template-lab .lab-definition *{
	color: rgba(255,255,255,.68);
}
body.page-template-template-lab .lab-definition h2,
body.page-template-template-lab .lab-definition h2 em{
	color: #fff;
}

/* Labipaistev, mitte oma gradient — vt selgitust ploki alguses. */
body.page-template-template-lab .lab-publishing{
	background: transparent;
}
body.page-template-template-lab .lab-publishing,
body.page-template-template-lab .lab-publishing *{
	color: rgba(255,255,255,.68);
}
body.page-template-template-lab .lab-publishing h2,
body.page-template-template-lab .lab-publishing h2 em,
body.page-template-template-lab .lab-publishing h3{
	color: #fff;
}
body.page-template-template-lab .lab-publishing .arrow-link,
body.page-template-template-lab .lab-publishing .arrow-link *{
	color: #fff;
}

/* Sama pohjus: jalus ei maali enam oma gradienti, vaid istub lehe oma peal. */
body.page-template-template-lab .site-foot{
	background: transparent;
}

/*
 * Heledad piirjooned tumedal taustal.
 *
 * --line on oklch(0.9 0.006 264), hele hall — hele teema jaoks joonistatud. Tumedal
 * lehel loeb ta ereda triibuna ule terve ekraani ja tegi tapselt seda „sektsiooni"
 * piiri, mida Harli markas: gradiendi omavaheline liide oli uks joon, jaluse
 * border-top oli teine. Gradient sai korda ules pool, siin saab piirjoon.
 *
 * Keelevalija ja lugude lingid kasutavad sama muutujat, nii et nemad on ka siin.
 */
body.page-template-template-lab .site-foot,
body.page-template-template-lab .foot-bottom{
	border-top-color: oklch(1 0 0 / .1);
}
body.page-template-template-lab .langsw-p{
	border-color: oklch(1 0 0 / .14);
}
body.page-template-template-lab .lab-publishing a{
	border-bottom-color: oklch(1 0 0 / .22);
}
body.page-template-template-lab .site-foot,
body.page-template-template-lab .site-foot *{
	color: rgba(255,255,255,.68);
}
body.page-template-template-lab .site-foot a:hover{
	color: #fff;
}
body.page-template-template-lab .site-foot h4,
body.page-template-template-lab .site-foot .foot-mark svg{
	color: #fff;
}
body.page-template-template-lab .site-foot .foot-word svg,
body.page-template-template-lab .site-foot .foot-word svg *{
	color: oklch(1 0 0 / .06);
}

/* -------------------------------------------------------------------------
 * Meist — tehasefilm („Eestis toodetud" sektsiooni all)
 *
 * Riba on sama laiusega nagu ulejaanud .about-section, mitte taisekraan:
 * lehel ei ole uhtegi teist servast-servani elementi ja uks yksik rikuks
 * veeru, mille jargi kogu leht loetakse.
 *
 * Plakatipilt ja video istuvad samas 16/9 kastis, nii et vajutuse hetkel ei
 * hupa leht - <img> ja <video> vahetuvad taepselt samal pinnal.
 * ---------------------------------------------------------------------- */
.about-film-frame{
	margin: 0;
	grid-column: 1 / -1;
}
.about-film-media{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--navy-deep, #102149);
	border-radius: 3px;
}
.about-film-media img,
.about-film-media video{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.about-film-media.is-playing video{
	/* Mangiv video ei tohi kaadrist valja kukkuda - contain hoiab terve pildi
	   alles ka siis, kui video kulgsuhe ei ole tapselt 16/9. */
	object-fit: contain;
	background: #000;
}

.about-film-play{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	border: 0;
	cursor: pointer;
	color: #fff;
	/* Tume loor plakatipildi peal - ilma selleta ei ole valge kiri heleda
	   kaadri peal loetav ja tekst muutub pildist soltuvaks. */
	background: linear-gradient(oklch(0 0 0 / .18), oklch(0 0 0 / .42));
	transition: background .25s ease;
}
.about-film-play:hover,
.about-film-play:focus-visible{
	background: linear-gradient(oklch(0 0 0 / .3), oklch(0 0 0 / .55));
}
.about-film-play-icon{
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	border: 1px solid oklch(1 0 0 / .6);
	display: grid;
	place-items: center;
	transition: transform .25s ease, border-color .25s ease;
}
.about-film-play-icon::before{
	content: "";
	/* Kolmnurk ilma pildifailita. 2px vasakule, sest kolmnurga optiline
	   raskuskese on paremal ja keskele joonistatuna paistab ta nihkes. */
	margin-left: 3px;
	border-style: solid;
	border-width: .55rem 0 .55rem .95rem;
	border-color: transparent transparent transparent #fff;
}
.about-film-play:hover .about-film-play-icon{
	transform: scale(1.06);
	border-color: #fff;
}
.about-film-play-text{
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.about-film-frame figcaption{
	margin-top: 1rem;
	color: var(--ink-soft, #636975);
	font-size: .92rem;
}

@media (max-width: 640px){
	.about-film-play-icon{ width: 3.4rem; height: 3.4rem }
	.about-film-play-text{ font-size: .74rem }
}

/* -------------------------------------------------------------------------
 * Paringuriiul — burgerimenuu sees
 *
 * Kolmas versioon. Esimene oli eraldi paneel loori taga, teine eraldi paneel
 * menuu mehaanikaga. Molemal juhul jai kaks nuppu ja kaks sahtlit. Klient tahtis
 * uht: „too complicated otherwise". Nuud on paring menuupaneeli sees,
 * navigatsiooni all, ja loendur on burgerinupu peal.
 *
 * Menuulingid on veidi vaiksemad, et nimekiri mahuks ara ilma kerimiseta ka
 * lauaarvutil.
 * ---------------------------------------------------------------------- */

/* Loendur burgerinupul. Nupp ise on kaks kriipsu (base.css .menu-toggle), nii et
   marg riputatakse tema paremasse ulanurka. */
.menu-toggle{ position: relative }
.menu-toggle .enq-count{
	position: absolute;
	top: -.5rem;
	right: -.6rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .25rem;
	border-radius: 999px;
	background: var(--rust, #BD5C2B);
	color: #fff;
	font-size: .68rem;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	/* base.css real 124 on `.menu-toggle span{width:26px;height:1.5px}` -
	   burgerikriips. Loendur on samuti span ja sai sealt 26px laiuse.
	   `auto` laseb tal sisu jargi kokku tommata. */
	width: auto;
}

/* Menuulingid vaiksemaks, et paring mahuks. Vorreldes base.css-i
   clamp(1.5rem,1rem + 1.8vw,2.4rem) -ga umbes viiendiku vorra. */
body .menu-list li a{ font-size: clamp(1.2rem, .85rem + 1.3vw, 1.85rem); line-height: 1.5 }

.menu-enq{
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.6rem);
	padding-top: clamp(1.2rem, 1rem + 1.4vw, 1.8rem);
	border-top: 1px solid var(--line, #DCDEE2);
	/*
	 * .menu-inner on flex-veerg ja pigistaks selle ploki kokku; flex-shrink:0
	 * hoiab teda oma sisu suurusena. Ilma selleta kukkus nimekiri 35 pikslile.
	 */
	flex: 0 0 auto;
}
.menu-enq .menu-lbl{ margin-bottom: .8rem }

.enq-list{
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Menuu sisu on nuud muutuva pikkusega: null kuni N toodet. Seega peab ta
 * kerima. Ilma selleta jai telefonis kuue tootega Kontakt/Kontorid ekraanilt
 * valja - .menu-inner on fikseeritud korgusega (top:0;bottom:0) ja overflow
 * oli `visible`, nii et sisu lihtsalt loigati ara ja sinna ei saanud kuidagi.
 *
 * Keritav on TERVE paneel, mitte nimekiri eraldi. Kaks pesastatud keriala
 * telefonis on koht, kus sorm ei tea, kumba ta liigutab.
 */
.menu-inner{
	overflow-y: auto;
	overscroll-behavior: contain;
}
.enq-row{
	display: grid;
	grid-template-columns: 2.8rem 1fr;
	gap: .8rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--line, #DCDEE2);
}
.enq-row:last-child{ border-bottom: 0 }
.enq-row-media{
	aspect-ratio: 1;
	background: var(--paper-2, #F5F7F9);
	overflow: hidden;
	border-radius: 3px;
}
.enq-row-media img{ width: 100%; height: 100%; object-fit: cover; display: block }
.enq-row-name{
	display: block;
	color: var(--ink, #212938);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.3;
	margin-bottom: .45rem;
}
.enq-row-name:hover{ text-decoration: underline }

.enq-row-tools{ display: flex; align-items: center; gap: .3rem }
.enq-step{
	width: 1.7rem;
	height: 1.7rem;
	border: 1px solid var(--line, #DCDEE2);
	background: none;
	cursor: pointer;
	border-radius: 3px;
	font-size: .95rem;
	line-height: 1;
	color: var(--ink, #212938);
}
.enq-step:hover{ border-color: var(--ink, #212938) }
.enq-qty{
	width: 2.9rem;
	height: 1.7rem;
	text-align: center;
	border: 1px solid var(--line, #DCDEE2);
	border-radius: 3px;
	/* 16px on iOS-i piir: vaiksem kiri paneb Safari sisestusel lehe suumima. */
	font-size: 16px;
	-moz-appearance: textfield;
}
.enq-qty::-webkit-outer-spin-button,
.enq-qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0 }
.enq-drop{
	margin-inline-start: auto;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--ink-soft, #636975);
	font-size: .78rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0;
}
.enq-drop:hover{ color: var(--rust, #BD5C2B) }

.enq-foot{ padding-top: 1rem }
.enq-send{ width: 100%; justify-content: center }
.enq-note{
	margin: .7rem 0 0;
	color: var(--ink-soft, #636975);
	font-size: .78rem;
	line-height: 1.45;
}

/* Tagasiside tootelehe nupul: vajutus peab jatma nahtava jalje ka siis, kui
   loendur on ekraani teises otsas ja jaab margamata. */
.pdp-add.is-added{ background: var(--navy-deep, #102149) }



/* -------------------------------------------------------------------------
 * Kataloogi bänneri brändiriba — laius jargib akent, mitte fikseeritud numbrit
 *
 * theme.css ankurdab riba `left: calc(var(--edge) + 35rem)` peale. Suurel
 * ekraanil on see oige: riba algab tekstiveeru korvalt. Aga see on FIKSEERITUD
 * number, nii et mida kitsam aken, seda vahem jaab ribale ruumi:
 *
 *   1440px -> 825px riba, ~3 logo        korras
 *   1024px -> 423px, ~1,4 logo           kitsas
 *    900px -> 303px, ~1 logo             pilu
 *    760px -> 168px, pool logo           katki
 *    700px -> peidus
 *
 * Ehk 700 ja 1000 piksli vahel roomas labi kitsa pilu uks logo korraga - see
 * ei nae valja nagu riba, vaid nagu viga. Harli: „logoslider kas parandada v
 * maha". Parandame: kitsamal ekraanil laheb algus protsendile, ja peitmise
 * piir tuleb 700-lt 900-le, sest allpool seda ei ole ribal enam mottekat laiust.
 *
 * Spetsiifilisus on meelega .shop-hero .shop-hero-brands: theme.css laetakse
 * peale pages.css-i, nii et sama spetsiifilisusega reegel kaotaks.
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px){
	.shop-hero .shop-hero-brands{ left: 56% }
}
@media (max-width: 900px){
	.shop-hero .shop-hero-brands{ display: none }
}

/* ---------------------------------------------------- paringukorv kontaktilehel
 *
 * Sama nimekiri, mis burgerimenuus, aga siin on ruumi. Menuus on pilt 2.8rem,
 * sest seal voistleb ta navigatsiooniga; siin on ta 5rem, sest siin on ta
 * peategelane. Klient peab ara tundma, mida ta valis - see on kogu selle ploki
 * mote. Tekstirida URL-iga seda ei teinud.
 *
 * Plokk on vormi kohal ja kannab raami, et oleks nahtav, et see EI ole osa
 * vormist, mida taita tuleb - see on juba tehtud valik.
 */
.enq-basket{
	margin: 0 0 2rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--line, #DCDEE2);
	border-radius: 4px;
	background: var(--paper-2, #F5F7F9);
}
.enq-basket[hidden]{ display: none }

.enq-basket-head{
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .4rem;
}
.enq-basket-title{
	margin: 0;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-2, #5B6472);
	font-weight: 600;
}
.enq-basket-count{
	font-size: .72rem;
	color: var(--ink-2, #5B6472);
}
.enq-basket-count::before{ content: '(' }
.enq-basket-count::after{ content: ')' }
.enq-basket-count[hidden]{ display: none }

/* Suurem pilt ja ohkem rida kui menuus. */
.enq-basket .enq-row{
	grid-template-columns: 5rem 1fr;
	gap: 1rem;
	padding: .9rem 0;
	align-items: center;
	border-bottom-color: var(--line, #DCDEE2);
}
.enq-basket .enq-row-media{
	background: #fff;
	border-radius: 3px;
}
.enq-basket .enq-row-name{
	font-size: 1rem;
	margin-bottom: .55rem;
}
.enq-basket .enq-note{ display: none }

.enq-basket-note{
	margin: .9rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--line, #DCDEE2);
	font-size: .82rem;
	line-height: 1.45;
	color: var(--ink-2, #5B6472);
}

/*
 * Telefonis laheb pilt tagasi vaiksemaks - 5rem sooks poole realaiusest ara ja
 * kogusenupud murduksid nime alla kahele reale.
 */
@media (max-width: 560px){
	.enq-basket{ padding: 1rem }
	.enq-basket .enq-row{ grid-template-columns: 3.6rem 1fr; gap: .8rem }
	.enq-basket .enq-row-name{ font-size: .95rem }
}

/* -------------------------------------------------------- uudiskiri jaluses
 *
 * Vorm oli enne ainult kontaktilehe korvalribas. Sinna joudmiseks pidi inimene
 * juba olema otsustanud meiega uhendust votta - ehk liitusid need, kes olid
 * niikuinii kontaktil. Jaluses ei nou ta uhtegi otsust ette.
 *
 * Ta istub esimeses veerus, e-posti ja telefoninumbrite all - samas plokis,
 * kus on koik teised viisid Standardiga uhendust votta. Eraldi riba oma
 * pealkirja, selgituse ja pealmise joonega oli kolm elementi selleks, et
 * kusida uht e-posti aadressi; joon lubas, et algab uus sektsioon, mida
 * tegelikult ei tulnud.
 */
.foot-news-form{ margin-top: 1.1rem }
.foot-news-label{ margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/*
 * Gravity Formsi oma stiilileht on sellel saidil valja lulitatud (Forms →
 * Settings → Output CSS) ja teema reeglid on meelega seotud `.form-grid`
 * (kontaktileht) ja `.lab-form` kulge - vt theme.css rida 281.
 *
 * Jalus ei ole kumbki. Vorm tuli sinna seetottu tais toorest GF-i markupi:
 * taepid valjade ees, raamideta sisendid ja - koige halvem - NAHTAV
 * honeypot-vali „URL" tekstiga „This field is for validation purposes and
 * should be left unchanged." Nahtav honeypot ei puua uhtegi robotit, kuid
 * ajab paris inimese segadusse ja loeb nagu viga.
 *
 * Siin on seetottu oma komplekt. Ma ei lisanud `.foot-news-form` theme.css-i
 * olemasolevate valijate korvale, sest see tahendaks neljakumne rea puutumist
 * failis, mis laeb hiljem ja mille iga rida on juba kord ule kirjutatud.
 */

/* Honeypot ekraanilt valja, mitte display:none - viimast oskavad robotid lugeda. */
.foot-news-form .gform_validation_container,
.foot-news-form .gform_validation_container *{
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/*
 * Uks vali ja nupp uhel real. Vorm kusib nuud ainult e-posti (vt
 * standard_news_only_email() functions.php-s), nii et vertikaalne pinu oleks
 * kolm rida kolme elemendi jaoks. `flex-wrap` murrab nupu enda alla siis, kui
 * riba on kitsam kui ~20rem - telefonis on see nii.
 */
.foot-news-form .gform_wrapper form{
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .6rem;
}
.foot-news-form .gform_body{ flex: 1 1 14rem; min-width: 0 }
.foot-news-form .gform_fields{
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.foot-news-form .gfield{ margin-bottom: 0 }
.foot-news-form .gfield_label{
	display: block;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-2, #5B6472);
	margin-bottom: .3rem;
}
.foot-news-form .gfield_required{ color: var(--ink-soft, #8A929E); font-weight: 400 }
.foot-news-form .gfield_required_text{ display: none }
.foot-news-form .gfield input[type="text"],
.foot-news-form .gfield input[type="email"]{
	width: 100%;
	padding: .65em .9em;
	font: inherit;
	font-size: .95rem;
	color: var(--ink, #212938);
	background: #fff;
	border: 1px solid var(--line, #DCDEE2);
	border-radius: 3px;
}
.foot-news-form .gfield input:focus{ outline: none; border-color: var(--navy, #212938) }
.foot-news-form .gfield_description{ font-size: .8rem; color: var(--ink-soft, #8A929E) }
.foot-news-form .gfield_description.validation_message{ color: oklch(0.55 0.16 25) }
.foot-news-form .gfield--type-captcha .gfield_label{ opacity: .5 }
.foot-news-form .gform_footer{ margin: 0; padding: 0; flex: 0 0 auto }
.foot-news-form .gform_wrapper .gform_button{ width: auto }
.foot-news-form .gform_confirmation_message{ font-size: .9rem; line-height: 1.5 }

/*
 * Kitsas veerus ei mahu vali ja nupp korvuti. `flex-wrap` teeb selle ise ara,
 * aga siis tahab nupp oma rea alguses vasakusse serva - `width:auto` hoiab ta
 * sisu laiusena, mitte ule terve rea venitatuna.
 */
@media (max-width: 1040px){
	.foot-news-form .gform_body{ flex: 1 1 100% }
}


/* ============================================================
   Harli 07.09 parandused
   ============================================================ */

/* 1. Burgerimenuu: menuus on 7 kirjet, aga stagger oli tehtud
   ainult 1-6 jaoks - "Meist" tuli sisse ilma viivituseta. */
body.menu-open .menu-list li:nth-child(7) a{ transition-delay: .68s; }
body.menu-open .menu-list li:nth-child(8) a{ transition-delay: .74s; }
body.menu-open .menu-list li:nth-child(9) a{ transition-delay: .80s; }

/* 1b. Alammenuu "+" ei avanenud. Reegel ise on olemas ja korrektne,
   aga max-height transition jaab kinni ega jookse kunagi labi, nii et
   arvutatud vaartus jaab 0 peale. Transitionita avaneb korrektselt. */
#menu .menu-list .sub-menu{ transition: none; }
#menu .menu-list li.sub-open > .sub-menu{ max-height: 32rem; }

/* 2. Kataloog telefonis
   02.10.2026: banner oli siin varem peidetud (display:none), sest temas oli ainult
   teksti. Nuud seisab seal ka pCon kataloogi nupp, mida telefonikasutaja ei naeks
   uldse — nii et banner tuleb tagasi.

   Filtrinupp oli fikseeritud ulemisse VASAKUSSE serva (top:5.25rem). Ilma bännerita
   jai ta valge peale leivamuru ja H1 kohale ning nagi valja nagu eksinud element;
   bänneriga oleks ta lainud otse pealkirja peale. Seega alla paremasse: seal ei jaa
   ta kunagi teksti peale ja on poidlaga kattesaadav. Alumine VASAK nurk on
   ligipaasetavuse vidina kaes, seetottu parem. Poolik pill sai tervikuks ja silt
   „Filtrid" tuli nahtavale — vabas ohus hopljev ikoon uksi ei utle, mida ta teeb. */
@media (max-width: 640px){
	/* Bänneri ja leivamuru vahe. Pais ei vaja enam eraldi valget tausta: tumeda
	   bänneri peal kehtib sama valge paise reegel mis suurel ekraanil. */
	.shop-top{ padding-top: clamp(1.6rem, 5vw, 2.4rem); }

	html.fpanel-ready .shopA .fbar{
		position: fixed;
		left: auto;
		right: .9rem;
		top: auto;
		bottom: 1.1rem;
		transform: none;
		width: auto;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		z-index: 45;
	}
	.fbar .fbar-btn{
		font-size: .78rem;
		font-weight: 700;
		letter-spacing: .06em;
		width: auto;
		height: 2.9rem;
		padding: 0 1.15rem;
		gap: .55rem;
		justify-content: center;
		border-radius: 999px;
		background: var(--paper);
		box-shadow: 0 2px 14px oklch(0 0 0 / .16);
		color: var(--navy);
		border-color: var(--navy);
	}
	.fbar .fbar-btn svg{
		width: 1.15rem;
		height: 1.15rem;
		flex: none;
	}
	/* ikoon on joonistatud stroke'iga - currentColor ei kanna alati labi */
	.fbar .fbar-btn svg,
	.fbar .fbar-btn svg *{
		stroke: var(--navy);
	}
}


/* 4. Originals hero telefonis */
@media (max-width: 640px){
	/* vektorjoone joonistavad pealkirja pseudoelemendid: ::after annab
	   L-kujulise joone (border-top + border-right) ja ::before tapi.
	   Kitsas veerus lahevad need tuhjusesse - telefonis maha. */
	.orig-card .orig-card-name::before,
	.orig-card .orig-card-name::after{ display: none; }
	/* pealkiri inline-ks, et korvalelemendina olev nool jaaks samale reale */
	.orig-card .orig-card-name{
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: baseline;
		gap: .45rem;
	}
	.orig-card .orig-card-arrow{
		margin: 0 0 0 .15rem;
		vertical-align: baseline;
	}
}

/* 5. Lab fookusriba telefonis: kirjeldused valja */
@media (max-width: 640px){
	.lab-hero .lab-hero-focusbar article p{ display: none; }
}

/* 6. "Alusta koostood" popup telefonis */
@media (max-width: 640px){
	.lab-popup .lab-popup-inner{ padding-top: 2.1rem; }
	.lab-popup .lab-popup-inner .eyebrow,
	.lab-popup .lab-popup-inner h2{ padding-right: 2.9rem; }
	.lab-popup .lab-popup-inner textarea{ min-height: 8rem; height: 8rem; }
}

/* 7. Meist telefonis */
@media (max-width: 640px){
	/* pealkiri ja kerimisvihje jaid kupsisenupu taha */
	.about-hero h1{ bottom: 9.5rem; }
	.about-hero .about-scroll{ bottom: 7.5rem; }
	/* grupipilt oli 59% peal - tostame keskele */
	.about-hero img{ object-position: 50% 50%; }
}


/* ---- Tootekaardi pildikast: fotod on 3:2, mitte ruudud ----
   base.css sundis 3:2 tootefotod 1:1 kasti ja object-fit:cover loikas
   ~kolmandiku pildist ara. Seesama kadreerimine sundis ka teravuse alla:
   brauser valib srcset-kandidaadi kasti LAIUSE jargi, aga ruutu kadreerides
   on sama pikslihulka vaja ka korgusse - nii venitati fail ules.
   Kasti suhe = foto suhe: kadreerimist pole ja fail katab kasti 1:1. */
.pcard-img{ aspect-ratio: 3 / 2; }
.pgrid.list .pcard-img{ aspect-ratio: 3 / 2; }