:root{--ink:#171717;--muted:#6c6c6c;--line:#e7e5e2;--paper:#faf9f7;--card:#fff;--accent:#ef7f1a;--accent2:#222;--radius:22px;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(calc(100% - 36px),var(--max));margin:auto}.topbar{background:#111;color:#fff;font-size:13px}.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding:8px 0}.nav{position:sticky;top:0;z-index:10;background:rgba(250,249,247,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{font-size:24px;font-weight:900;letter-spacing:.04em}.brand small{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted);margin-top:-3px}.links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:650}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;border:1px solid var(--ink);font-weight:750}.btn.primary{background:var(--ink);color:white}.btn.orange{background:var(--accent);border-color:var(--accent);color:white}.hero{padding:72px 0 56px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--accent)}h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.045em;margin:14px 0 24px;max-width:980px}h2{font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px}h3{font-size:24px;line-height:1.2;margin:0 0 10px}.lead{font-size:20px;color:#3d3d3d;max-width:790px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:stretch}.hero-card{min-height:490px;border-radius:30px;background:linear-gradient(145deg,#222,#4a4a4a);color:#fff;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.hero-card:before,.hero-card:after{content:"";position:absolute;border-radius:50%;background:rgba(239,127,26,.95)}.hero-card:before{width:300px;height:300px;right:-80px;top:-70px}.hero-card:after{width:140px;height:140px;right:150px;top:120px;opacity:.45}.hero-card b{font-size:48px;line-height:.95;letter-spacing:-.04em;position:relative}.section{padding:76px 0}.section.white{background:#fff}.intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}.intro p{max-width:620px;color:var(--muted)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.category{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}.category:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(0,0,0,.07)}.icon{font-size:42px}.category p{color:var(--muted)}.category .arrow{font-weight:800}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature{padding:22px;border-top:2px solid var(--ink)}.feature strong{display:block;font-size:18px}.feature span{font-size:14px;color:var(--muted)}.band{background:var(--accent);color:#fff;padding:56px 0}.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}.band h2{max-width:720px}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.product .visual{aspect-ratio:1;background:linear-gradient(135deg,#f1efeb,#ddd8d1);display:grid;place-items:center;font-size:58px}.product .body{padding:18px}.tag{display:inline-block;padding:5px 8px;border-radius:999px;background:#f3f0eb;font-size:11px;font-weight:800;margin-bottom:8px}.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.quote{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:24px;letter-spacing:-.02em}.quote small{display:block;font-size:14px;color:var(--muted);margin-top:14px}.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}.footer{background:#111;color:#eee;padding:54px 0 34px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}.footer p,.footer a{color:#bbb}.footline{border-top:1px solid #333;margin-top:34px;padding-top:20px;color:#888;font-size:13px}.breadcrumbs{font-size:13px;color:var(--muted);padding-top:24px}.page-hero{padding:44px 0 54px}.page-hero h1{font-size:clamp(38px,5vw,64px)}.content{max-width:820px}.content p{font-size:18px;color:#3c3c3c}.bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.bullet{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.lang{font-size:13px;font-weight:800}.mobile{display:none}@media(max-width:850px){.links{display:none}.mobile{display:block}.hero-grid,.split,.contact{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.products{grid-template-columns:1fr 1fr}.hero-card{min-height:360px}.band .wrap,.intro{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.topbar .wrap{flex-direction:column;gap:2px}.bullets{grid-template-columns:1fr}}@media(max-width:520px){.products,.features{grid-template-columns:1fr}h1{font-size:42px}.hero{padding-top:42px}.wrap{width:min(calc(100% - 24px),var(--max))}}


/* ===================================================================
   WordPress- ja WooCommerce-lisaykset mockupin paalle.
   Mockup kattoi vain markkinointisivut; nama tuovat sen mita
   oikea sivusto tarvitsee. Kasvaa sita mukaa kun sivutyyppeja
   kaydaan lapi.
   =================================================================== */

/* saavutettavuus */
.ohita{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.ohita:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ylapalkin linkit perivat varin */
.topbar a{color:inherit;text-decoration:none}
.topbar a:hover{text-decoration:underline}

/* valikko WordPressin wp_nav_menu -tulosteelle */
.links a{white-space:nowrap}
.links .lang{font-weight:700;color:var(--muted)}
.links .kori{display:inline-flex;align-items:center;gap:6px;position:relative}
/* Luku tulee lisaosan ywraq_number_items-lohkosta; AJAX-paivitys korvaa
   elementin ja palauttaa sen oletusluokan, joten .kori-luku ei sailyisi. */
.links .kori-luku,
.kori .ywraq_number_items{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;
  font-weight:800;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.kori .ywraq_number_items span:empty{display:none}
.nav .mobile{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}

/* alavalikon linkkilista */
.pikalinkit{list-style:none;margin:0;padding:0}
.pikalinkit li{margin:0 0 6px}

/* leipatekstin perusrytmi sisaltosivuilla */
.section .sisus h2,.section h2{margin:28px 0 10px}
.section .sisus h3,.section h3{margin:22px 0 8px}
.section p{margin:0 0 14px}
.section ul,.section ol{margin:0 0 14px;padding-left:22px}

/* ===================================================================
   NAPIT — malli 01 "Suora" (kauppiaan valinta 27.8.2026)
   ===================================================================

   Nolla pyoristysta, kevyempi kirjasin (600 eika 750) ja hieman valjennetty
   kirjainvali. Nappi on typografiaa, ei muotoiltu esine. Hover vaihtaa mustan
   brandivariin, jolloin oranssi saa tehtavan eika ole pelkka koriste.

   Vanha muoto oli border-radius:999px + font-weight:750. */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:0;border:0;padding:14px 22px;
  font-size:13px;font-weight:600;letter-spacing:.03em;line-height:1;
  background:var(--ink);color:#fff;cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--accent);color:#fff}

/* Toissijainen: pelkka hiusviiva, tayttyy mustaksi hoverissa.
   Mockupin .btn ilman .primarya on juuri tama. */
.btn:not(.primary):not(.orange){
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn:not(.primary):not(.orange):hover{background:var(--ink);color:#fff}

.btn.primary{background:var(--ink);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--accent)}

/* Korkein painoarvo (Pyyda tarjous): brandivari, hover mustaksi. */
.btn.orange{background:var(--accent);color:#fff;box-shadow:none}
.btn.orange:hover{background:var(--ink)}

.btn:focus-visible,
.woocommerce .button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Tumma pohja: alatunniste ja ylapalkki. Vanhan napin ongelma oli, etta musta
   taytto katosi mustalle pohjalle — siksi kaanto on nyt maaritelty. */
.footer .btn.primary,.topbar .btn.primary{background:#fff;color:var(--ink)}
.footer .btn.primary:hover,.topbar .btn.primary:hover{background:var(--accent);color:#fff}
.footer .btn:not(.primary):not(.orange),
.topbar .btn:not(.primary):not(.orange){color:#fff;box-shadow:inset 0 0 0 1px #fff}
.footer .btn:not(.primary):not(.orange):hover,
.topbar .btn:not(.primary):not(.orange):hover{background:#fff;color:var(--ink)}
.woocommerce .woocommerce-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 18px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--card);border-radius:8px;padding:14px 16px;list-style:none}

/* kategoriakuvaus: mockupissa ei ollut vastinetta, joten se saa oman paikkansa
   tuoteruudukon ALLA — sama ratkaisu joka tehtiin Blocksylle 27.8.2026,
   mutta nyt suoraan mallipohjassa eika CSS-kikalla */
.kategoriateksti{margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}


/* ===================================================================
   TUOTERUUDUKKO — malli A "Hiljainen" (kauppiaan valinta 27.8.2026)
   ===================================================================

   Ei korttia, ei reunusta. Tuotekuva on ainoa muoto ja lepaa valkoisella
   laatalla; nimi ja hinta ovat pelkkaa typografiaa. Tarjouskorilinkki
   ilmestyy vasta hoverissa yhdessa ohuen brandivariviivan kanssa, joten
   perustilassa ruudukko on pelkkia tuotteita.

   Aiemmin jokainen tuote oli valkoinen kortti reunuksella ja levealla
   kapselinapilla — kortti painoi enemman kuin tuote.

   WooCommercen oma tyyli asettaa tuotteelle float:left ja width:22.05%.
   Grid-ruudukossa se kutistaa solut kaistaleiksi, siksi !important. */

/* minmax 240px antaa 1180 px:n sisaltoleveydella tasan NELJA saraketta,
   joka on kauppiaan hyvaksyma malli. 200 px olisi antanut viisi. */
.woocommerce ul.products{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:66px 40px}
.woocommerce ul.products::after,.woocommerce ul.products::before{content:none}

/* ⚠ background on PAKOLLINEN, vaikka se on sama kuin sivun pohja.

   mix-blend-mode sekoittuu vain oman pinoamiskontekstinsa taustaan. Etusivulla
   tuoteruudukko on Stackable-lohkojen sisalla, ja niilla on position+z-index
   eli ne luovat pinoamiskontekstin. Sen sisalla tausta oli lapinakyva, joten
   multiply jai vaikutuksettomaksi ja tuotekuvien valkoiset taustat nakyivat
   suorakulmioina — mitattuna pikselin vari oli #FFFFFF eika #FAF9F7.
   Kun solu itse maalaa paperin, sekoituspinta on aina olemassa. */
.woocommerce ul.products li.product{
  background:var(--paper);border:0;border-radius:0;padding:0;position:relative;
  width:auto !important;float:none !important;margin:0 !important;clear:none !important}

/* ⚠ Laatalla EI ole reunusta, pyoristysta eika varjoa. Tama on
   suunnitteluratkaisu, ei unohdus.

   Mitattu 27.8.2026: laatat ovat tasan samankokoisia (279x279), mutta
   tuotteiden omat mittasuhteet vaihtelevat 17-kertaisesti pinta-alaltaan
   (Puusepan kyna 274x19 px, kosketusnayttokyna 300x292 px). Yhta ohutta
   kynaa ja seitseman kynan variskaalaa ei saa nayttamaan samankokoisilta
   ilman etta toinen rajataan poikki.

   Ratkaisu ei siis ole kuvien rajaus — se kokeiltiin ja ero oli olematon
   (ks. ehdotukset/pikkukuvien-normalisointi.html). Ratkaisu on poistaa
   NAKYVA LAATIKKO: kun tuotteen ympärilla ei ole reunaa, tyhja tila lakkaa
   lukemasta tyhjyytena. Arkistosivun pohja on siksi valkoinen, jolloin
   tuotekuvan oma valkoinen tausta sulautuu siihen eika rajaa nay.

   Varjo hoverissa piirtaisi laatikon takaisin nakyviin, joten hoverissa
   nostetaan tuotetta itseaan. */
/* Kuva on KIINTEAN KORKUINEN ja tuote seisoo sen ALAREUNASSA
   (object-position: center bottom).

   Tama on koko ruudukon tarkein rivi. Aiemmin kuva oli nelio ja tuote
   keskitettiin pystysuunnassa, jolloin tuotteen ja sen nimen valinen etaisyys
   vaihteli lahes 130 pikselia: ohut vaakakyna kellui laatan keskella kaukana
   tekstistaan, taysi kynapino melkein kiinni siina. Silma lukee tuon
   epasaannollisyyden levottomuutena, ei kokoerona.

   Kun kaikki tuotteet seisovat samalla viivalla, rivista tulee hylly.
   Erikokoiset tuotteet saavat olla erikokoisia — rytmi kantaa. */
.woocommerce ul.products li.product a img{
  width:100%;height:164px;aspect-ratio:auto;object-fit:contain;
  object-position:center bottom;
  background:transparent;border-radius:0;padding:0;margin:0;
  /* Valkoinen tausta katoaa pohjaan varista riippumatta. Vaikutus tuotteen
     omiin vareihin on ~2 % tummeneminen (#faf9f7 vs #fff) — huomaamaton. */
  mix-blend-mode:multiply;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.woocommerce ul.products li.product:hover a img{transform:translateY(-5px)}

/* Hyllyviiva. Se erottaa tuotteen ja tekstin ja antaa riville rytmin, jota
   erimuotoiset tuotteet eivat itse anna. Hoverissa viiva syttyy brandivariin
   — korostus on rakenteessa, ei irrallisessa alleviivauksessa.

   min-height pitaa hinnat samalla korkeudella myos kun nimi rivittyy. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:14px;font-weight:500;line-height:1.4;color:var(--ink);
  margin:22px 0 0;padding:17px 0 0;min-height:3.6em;
  border-top:1px solid var(--line);
  transition:border-color .22s ease}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{
  border-top-color:var(--accent)}

.woocommerce ul.products li.product .price{
  display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:5px}
.woocommerce ul.products li.product .price .woocommerce-price-suffix{
  font-size:11.5px;font-weight:500}

/* Tarjouskorilinkki on tekstia, ei nappia.

   ⚠ YITH varittaa nappinsa saannolla, jossa on !important:
     .woocommerce ul.products li.product a.add-request-quote-button.button{
       background:var(--ywraq_layout_button_bg_color) !important; ... }

   Sita ei kannata voittaa omalla !importantilla — arvo luetaan CSS-muuttujasta,
   joten muuttuja ylikirjoitetaan. Muuttujat periytyvat, joten li.productille
   asetettu arvo patee napissa ilman tarkkuuskilpailua. Sama tekniikka antaa
   tuotesivulle taytetyn napin (ks. alempana). */
.woocommerce ul.products li.product{
  --ywraq_layout_button_bg_color:transparent;
  --ywraq_layout_button_bg_color_hover:transparent;
  --ywraq_layout_button_border_color:transparent;
  --ywraq_layout_button_border_color_hover:transparent;
  --ywraq_layout_button_color:var(--accent);
  --ywraq_layout_button_color_hover:var(--ink)}

.woocommerce ul.products li.product .yith-ywraq-add-to-quote{margin:8px 0 0}
/* Kaksi valitsinta, ja jalkimmainen on pidempi tarkoituksella.

   YITH mitoittaa nappinsa saannolla
     .woocommerce ul.products li.product a.add-request-quote-button.button
       { padding:1rem 2rem; margin-top:1rem; font-size:1em }
   jossa EI ole !importantia — se voittaa pelkalla tarkkuudella (5 luokkaa).
   Lyhyempi .button-valitsin (4 luokkaa) haviaa sille, joten tarjouskorilinkki
   jai 32 pikselin sisennykseen. Yksi luokka lisaa (.yith-ywraq-add-button)
   ratkaisee sen ilman !importantia. Mitattu 27.8.2026. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .yith-ywraq-add-button a.add-request-quote-button.button{
  display:inline-block;background:none;border:0;box-shadow:none;
  padding:0;margin:0;
  font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1.3;
  color:var(--accent);text-align:left}
.woocommerce ul.products li.product .button::after{content:" \2192"}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .yith-ywraq-add-button a.add-request-quote-button.button:hover{
  background:none;color:var(--ink)}

/* Piilotus hoveriin VAIN laitteilla joilla hover on. Kosketusnaytolla
   piilotettu linkki olisi tavoittamaton. */
@media (hover:hover){
  .woocommerce ul.products li.product .yith-ywraq-add-to-quote{
    opacity:0;transform:translateY(-3px);
    transition:opacity .18s ease,transform .18s ease}
  .woocommerce ul.products li.product:hover .yith-ywraq-add-to-quote,
  .woocommerce ul.products li.product:focus-within .yith-ywraq-add-to-quote{
    opacity:1;transform:none}
}

/* --- tuotemerkinnat (EKO ym.) ---

   Lisaosa piirtaa tekstimerkin 30 px:n vihreana ympyrana. Kun laatikko
   poistui ruudukosta, ympyra jai kellumaan irrallaan ja oli samalla sivun
   aanekkain elementti — vihrea ei myoskaan kuulu mustan ja oranssin
   palettiin. Merkista tehdaan siksi litteä lipuke.

   Rakenne on:  .br_alabel > span > i x4 (ympyran muoto) + b (teksti)
   Nelja <i>-elementtia piirtavat ympyran, ja niissa on lisaosan inline-tyyli
   background-color:#33ad0a. Inline-tyylia ei voi kumota tyylitiedostosta,
   mutta elementit voi piilottaa — display ei ole inline-tyylissa.

   ⚠ Rajattu tekstimerkkeihin (.br_alabel_type_text). Kuvamerkit, kuten
   KOTIMAINEN-lippumerkki, ovat tyyppia _image ja hajoaisivat jos niiden
   sisaltoa piilotettaisiin. */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .berocket_better_labels{z-index:2;
  padding:6px 6px 0 0}
.woocommerce ul.products li.product .br_alabel_type_text i{display:none}
/* width/height ovat pakolliset: lisaosa injektoi sivulle oman <style>-lohkon
   div.br_alabel.berocket_alabel_id_207959 > span{height:50px;width:50px;
   border-radius:50px} joka piirtaa ympyran. Oma valitsin on tarkempi, mutta
   se ei voita mittoja joita ei ole lainkaan maaritelty — lipuke jai
   50x50 px:n neliöksi. */
/* Merkinta on pelkkaa tekstia. Musta lipuke oli jo ympyraa hiljaisempi, mutta
   se oli yha ainoa taytetty muoto ruudukossa ja veti siksi katseen. */
.woocommerce ul.products li.product .br_alabel_type_text span{
  display:inline-flex;align-items:center;background:transparent;
  width:auto;height:auto;min-width:0;min-height:0;
  padding:0;border-radius:0;line-height:1}
.woocommerce ul.products li.product .br_alabel_type_text b{
  font-size:10px;font-weight:600;letter-spacing:.13em;margin-right:-.13em;
  text-transform:uppercase;color:var(--muted)}
.woocommerce ul.products li.product .berocket_better_labels_inline{
  width:auto;height:auto}

/* Tuotesivun tarjouskorinappi on taytetty nappi (malli 01), ei tekstilinkki.
   Sama muuttujatekniikka kuin ruudukossa.

   4.9.2026: vari vaihdettu mustasta vermiljoniin. Sivustolla oli sama
   toiminto kahdella varilla — heron "Pyyda tarjous" oli vermiljoni ja
   tuotesivun "Tarjouskoriin" musta, vaikka tuotesivulla se on sivun
   tarkein toiminto. Nyt ensisijainen toiminto on aina vermiljoni ja
   musta jaa toissijaisille. Hover kaantaa varit toisin pain. */
.woocommerce div.product{
  --ywraq_layout_button_bg_color:var(--accent);
  --ywraq_layout_button_bg_color_hover:var(--ink);
  --ywraq_layout_button_border_color:var(--accent);
  --ywraq_layout_button_border_color_hover:var(--ink);
  --ywraq_layout_button_color:#fff;
  --ywraq_layout_button_color_hover:#fff}

/* Kauppasivujen pohja oli hetken valkoinen, jotta tuotekuvien valkoinen tausta
   sulautuisi siihen. Se toimi kategoriasivulla mutta EI etusivulla, jossa sama
   ruudukko on lampimalla paperipohjalla — siella valkoiset suorakulmiot
   palasivat nakyviin (todettu kuvasta 28.8.2026).

   Tilalle mix-blend-mode:multiply tuotekuviin: valkoinen kertautuu pohjavarin
   kanssa ja katoaa siihen, oli pohja mika tahansa. Nain koko sivusto voi
   sailyttaa mockupin lampiman paperisavyn eika ruudukko ole sidottu
   yhteen taustavariin. Ks. tuotekuvien saanto alempana. */

/* arkistosivujen otsikot: mockupin hero-koot ovat liian suuria listasivuille */
.woocommerce-products-header__title,
body.archive .section > h1,
body.tax-product_cat .section > h1{font-size:34px;line-height:1.15;margin:0 0 6px}
.kategoriateksti h2{font-size:24px;line-height:1.25}
.kategoriateksti h3{font-size:18px;line-height:1.3}
.kategoriateksti p{font-size:15px}

/* lajittelu ja tulosmaara samalle riville */
.woocommerce .woocommerce-result-count{float:none;margin:0;color:var(--muted);font-size:14px}
.woocommerce .woocommerce-ordering{float:none;margin:0}
.woocommerce-notices-wrapper:empty{display:none}
.tulosrivi{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 18px}


/* ===================================================================
   TUOTESIVU
   =================================================================== */

/* Galleria nakyviin ilman JavaScriptia. WooCommercen mallipohjassa on
   kovakoodattu style="opacity:0", jonka flexslider nostaisi. Teema ei lataa
   flexslideria, joten kuva jaisi muuten nakymatta kokonaan. */
.woocommerce-product-gallery{opacity:1 !important}

/* ⚠ LUOKKATORMAYS. Mockupin CSS sisaltaa omat korttityylinsa nimilla
     .product { background:#fff; border:1px solid var(--line); border-radius:18px }
     .panel   { background:#fff; border:1px solid var(--line); border-radius:22px }
   ja WooCommerce kayttaa TASAN samoja luokkanimia omissa elementeissaan:
   tuotesivun <div class="product type-product ..."> ja valilehtipaneeli
   <div class="woocommerce-Tabs-panel ... panel">.

   Seurauksena tuotesivua kiersi haalea pyoristetty kehys, jota kukaan ei
   ollut pyytanyt. Se ei nakynyt lampimalla paperipohjalla, mutta erottui heti
   kun kauppasivujen pohja muuttui valkoiseksi (todettu kuvasta 27.8.2026).

   Mockupin luokkanimia ei nimeta uudelleen — se rikkoisi markkinointisivut.
   Sen sijaan tyylit kumotaan siella missa ne osuvat WooCommerceen. */
.woocommerce div.product,
.woocommerce .woocommerce-Tabs-panel{
  background:none;border:0;border-radius:0;overflow:visible;padding:0}

/* KOLMAS tormays samasta syysta: WooCommerce tulostaa liittyvat tuotteet
   elementtiin <section class="related products">, ja mockupin .products on
   nelisarakkeinen ruudukko. Otsikko vei sarakkeen 1 ja koko tuotelista
   sarakkeen 2, jolloin lista renderoityi 283 px levealle yhteen sarakkeeseen.
   Mitattu 28.8.2026. */
.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce .cross-sells.products{display:block;grid-template-columns:none;gap:0}

/* Ominaisuustaulukolla on WooCommercen oma ulkoreunus; rivien hiusviivat
   riittavat, joten ulkoreunus pois. */
.woocommerce div.product table.shop_attributes{border:0}

/* Kaksi saraketta: kuvat vasemmalle, tiedot oikealle */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:start}
/* Galleria ja tiedot tayttavat oman sarakkeensa.

   Valitsimissa on mukana div.images ja .entry-summary tarkkuuden vuoksi.
   WooCommercen oma tyyli on
     .woocommerce div.product div.images  { float:left;  width:48% }
     .woocommerce div.product div.summary { float:right; width:48% }
   joka on tasan yhta tarkka kuin lyhyempi muoto — tasapelissa voittaa
   myohemmin ladattu, ja se on WooCommercen. Mitattu 27.8.2026: sarake oli
   567 px mutta galleria 272 px eli tasan 48 % siita. Yksi luokka lisaa
   ratkaisee tasapelin. */
.woocommerce div.product div.images.woocommerce-product-gallery{width:auto;float:none;margin:0}
.woocommerce div.product div.summary.entry-summary{width:auto;float:none;margin:0}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{grid-column:1/-1}

/* Galleria: paakuva ylos, pikkukuvat ruudukkona alle.

   Pikkukuvat ovat 100x100 px, joten raita mitoitetaan niiden mukaan
   (minmax 84px): isommaksi venytettyna ne sumenevat. auto-fill tayttaa
   rivin sen mukaan kuinka leveaa tilaa on. */
.woocommerce-product-gallery__wrapper{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:0}
/* Sama kieli kuin ruudukossa: paakuvalla ei ole laatikkoa lainkaan, jotta
   tuote lepaa suoraan valkoisella. Pikkukuvat ovat sen sijaan painikkeita,
   ja ne tarvitsevat hiusviivan erottuakseen toisistaan. */
.woocommerce-product-gallery__image{border:0;border-radius:0;
  overflow:hidden;background:transparent}
.woocommerce-product-gallery__image:nth-child(n+2){
  border:1px solid var(--line);border-radius:2px}
.woocommerce-product-gallery__image:first-child{grid-column:1/-1}
/* Tuotekuvien alkuperainen koko on 450x450 px (tarkistettu naturalWidthista
   27.8.2026). Sarake on leveampi, joten ilman katkoa kuva venyisi 565 px:iin
   ja sumenisi. Suuremmat kuvat vaatisivat 6 237 tuotteen pikkukuvien
   uudelleenluonnin — ei kannata. Kuva keskitetaan laatikkoon. */
.woocommerce-product-gallery__image:first-child img{max-width:470px;margin:0 auto}
.woocommerce-product-gallery__image img{width:100%;height:auto;display:block;
  aspect-ratio:1/1;object-fit:contain;padding:10px;mix-blend-mode:multiply}

/* ⚠ Talla saannolla on tarkka syy. WooCommercen oma tyylitiedosto sisaltaa
     .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
       { width:25%; display:inline-block }
   ja sen tarkkuus (5 luokkaa) voittaa yksiluokkaisen saannon. Ruudukko toimi
   oikein, mutta jokainen pikkukuva kutistui 25 %:iin omasta raidastaan:
   170,25 px -> 42,56 px. Mitattu selaimesta 27.8.2026 — juuri tuo suhde
   paljasti syyn. width:auto palauttaa ruudukon venytyksen. */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){
  width:auto;display:block}

/* Otsikko ja hinta */
.woocommerce div.product .product_title{font-size:32px;line-height:1.15;
  letter-spacing:-.01em;margin:0 0 10px}
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-size:24px;font-weight:800;color:var(--accent);margin:0 0 18px}
.woocommerce div.product p.price small,
.woocommerce div.product span.price small{font-size:13px;font-weight:600;color:var(--muted)}

/* Maara + painike samalle riville */
.woocommerce div.product form.cart{display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin:0 0 20px}
.woocommerce div.product form.cart .quantity input{height:46px;padding:0 10px;
  border:1px solid var(--line);border-radius:10px;text-align:center;font-weight:700}
.woocommerce div.product form.cart .button{padding:14px 26px;font-size:15px}

/* Tuotetiedot: SKU, osastot, avainsanat luettavaksi listaksi.
   WooCommerce tulostaa ne peräkkäin span-elementteina ilman rakennetta. */
.woocommerce div.product .product_meta{border-top:1px solid var(--line);
  margin:22px 0 0;padding:18px 0 0;font-size:14px;color:var(--muted);
  display:flex;flex-direction:column;gap:8px}
.woocommerce div.product .product_meta > span{display:block;line-height:1.6}
.woocommerce div.product .product_meta a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px}
.woocommerce div.product .product_meta a:hover{text-decoration-color:var(--accent)}

/* Valilehdet */
.woocommerce div.product .woocommerce-tabs{margin:48px 0 0}

/* Valilehtinapit pois. WooCommercen valilehdet toimivat vain JavaScriptilla
   (wc-single-product.js), ja teema ei lataa sita — Perfmatters viivastaisi
   sen lisaksi ensimmaiseen kosketukseen asti. Ilman skriptia jokainen paneeli
   renderoityy oman otsikkonsa kanssa allekkain, mika on tassa parempi kuin
   valilehdet: kuvaus ja lisatiedot ovat molemmat heti luettavissa ja
   hakukoneen nahtavissa ilman klikkausta. Navigaatio jaisi harhaanjohtavaksi
   koristeeksi, joten se piilotetaan. */
.woocommerce div.product .woocommerce-tabs ul.tabs{display:none}
/* Paneelit renderoityvat allekkain omine otsikkoineen — se on koko sisallon
   naytto ilman JavaScriptia. Navigaation tyylit poistettiin 27.8.2026, koska
   navigaatio itse on piilotettu; kuollut CSS vain kasvattaisi tiedostoa. */
.woocommerce div.product .woocommerce-tabs .panel{padding:24px 0 0}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:22px;margin:0 0 12px}
.woocommerce div.product .woocommerce-tabs table.shop_attributes{width:100%;
  border-collapse:collapse;font-size:14px}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td{
  padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th{
  font-weight:700;width:34%;color:var(--muted)}

/* Murupolku */
.woocommerce .woocommerce-breadcrumb{font-size:13px;color:var(--muted);margin:0 0 22px}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px}

@media (max-width:820px){
  .woocommerce div.product{grid-template-columns:1fr;gap:26px}
  .woocommerce div.product .product_title{font-size:26px}
  .woocommerce-product-gallery__wrapper{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}

/* --- responsiivisuus --- */
@media (max-width:900px){
  .nav .links{display:none}
  .nav .mobile{display:block}
  .topbar .wrap{flex-direction:column;gap:2px;align-items:flex-start;font-size:12px}
}

/* ===================================================================
   PAAVALIKKO
   =================================================================== */

/* Valikkokohteet ovat <li>-elementteja suoraan .links-flexissa
   (items_wrap = '%3$s', eli WordPress ei kaari niita omaan <ul>:aan).
   align-self:stretch venyttaa ne palkin korkuisiksi, jolloin pudotusvalikon
   top:100% osuu palkin alareunaan eika linkin alareunaan — muuten valiin
   jaisi rako, jonka yli hiiri ei paase ilman etta valikko sulkeutuu. */
.nav .links > li{position:relative;list-style:none;align-self:stretch;
  display:flex;align-items:center}
.nav .links > li > a{display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav .links > li.menu-item-has-children > a::after{content:"";width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5}

/* Pudotusvalikko. grid-auto-flow:column + kiinteat rivit tekee sarakkeet
   automaattisesti: 25 kohdetta -> 3 saraketta, 11 -> 2, 5 -> 1. Ilman tata
   Jakotuotteiden 25 kohdetta olisi 900 px korkea pylvas. */
.nav .links > li > ul{position:absolute;top:100%;left:-14px;margin:0;padding:12px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.11);
  display:grid;grid-template-rows:repeat(9,auto);grid-auto-flow:column;
  grid-auto-columns:212px;gap:1px 8px;
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .14s,transform .14s,visibility .14s;z-index:20}
.nav .links > li:hover > ul,
.nav .links > li:focus-within > ul{opacity:1;visibility:visible;transform:none}
/* Oikeaan reunaan osuvat valikot kaannetaan; luokan lisaa sunglobe.js */
.nav .links > li.reunassa > ul{left:auto;right:-14px}
.nav .links > li > ul li{list-style:none}
/* white-space:normal kumoaa .links a{white-space:nowrap}:n. Ilman tata
   "Heijastimet logolla ja heijastavat tuotteet" valui sarakkeen yli
   naapurisarakkeen tekstin paalle (todettu kuvasta 27.8.2026). */
.nav .links > li > ul a{display:block;padding:8px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:normal;
  line-height:1.35}
.nav .links > li > ul a:hover,
.nav .links > li > ul a:focus-visible{background:var(--paper);color:var(--ink)}

/* --- mobiilivalikko --- */
.mobiilivalikko{display:none;position:fixed;inset:0;z-index:50;background:var(--paper);
  overflow-y:auto;padding:18px 18px 40px}
.mobiilivalikko[hidden]{display:none}
.mobiilivalikko.auki{display:block}
.mobiilivalikko .ylaosa{display:flex;justify-content:space-between;align-items:center;
  height:58px;margin-bottom:8px}
.mobiilivalikko .sulje{background:none;border:0;font-size:30px;line-height:1;
  cursor:pointer;color:var(--ink);padding:0 6px}
.mobiilivalikko ul{list-style:none;margin:0;padding:0}
.mobiilivalikko > ul > li{border-bottom:1px solid var(--line)}
.mobiilivalikko > ul > li > a{display:block;padding:14px 4px;font-size:17px;font-weight:700}
.mobiilivalikko ul ul{padding:0 0 12px 14px}
.mobiilivalikko ul ul a{display:block;padding:8px 4px;font-size:15px;color:var(--muted)}
.mobiilivalikko .toiminnot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:24px}
body.valikko-auki{overflow:hidden}

/* --- otsikkopalkin kaksi tilaa ---------------------------------------

   Tyopoydalla otsikkopalkki on KAKSIRIVINEN: brandi ja toiminnot ylarivilla,
   valikko omalla rivillaan alla. Tama ei ole tyylivalinta vaan mittaustulos.
   Sisaltokontti on 1180 px (--max). Yhdelle riville tarvittaisiin
   brandi 200 + valikko 940 + toiminnot 250 = 1390 px, joten yksi rivi ei
   mahdu MILLAAN tyopoytaleveydella. Mockupissa navigaatiossa oli viisi
   linkkia; oikeassa valikossa niita on yhdeksan alivalikkoineen.

   Aiempi yritys pitaa yksirivisyys leveilla naytoilla nayttti mittauksessa
   toimivalta — vaakavieritysta ei syntynyt — mutta sisalto kietoutui 76 px:n
   korkuisen palkin sisalla ja meni paallekkain. Todettu kuvasta 27.8.2026.

   Alle 900 px: valikko piiloon, hampurilainen esiin. */

.nav .wrap{flex-wrap:wrap;row-gap:0;height:auto;padding:12px 0;align-items:center}
.nav .brand{flex:0 0 auto;order:1}
.nav .toiminnot{display:flex;align-items:center;gap:18px;font-size:14px;
  font-weight:650;flex:0 0 auto;order:2;margin-left:auto}
.nav .links{flex:1 0 100%;order:3;gap:20px;min-width:0;
  margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.nav .links > li{align-self:auto;padding:4px 0}

@media (max-width:900px){
  .nav .wrap{height:76px;padding:0}
  .nav .links{display:none}
  .nav .toiminnot .btn{display:none}
  .nav .mobile{display:block;order:3}
}

/* Mobiilivalikon avattavat osiot. summary korvaa ylatason linkin, ja
   alivalikon ensimmainen rivi ("Kaikki: …") vie itse kategoriaan. */
.mobiilivalikko summary{display:flex;justify-content:space-between;align-items:center;
  padding:14px 4px;font-size:17px;font-weight:700;cursor:pointer;list-style:none}
.mobiilivalikko summary::-webkit-details-marker{display:none}
.mobiilivalikko summary::after{content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.45;transition:transform .15s}
.mobiilivalikko details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.mobiilivalikko details ul{padding:0 0 12px 14px}

/* --- kategoriasivun tuloslaskuri ja lajittelu --- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin:0}
.woocommerce .woocommerce-result-count{color:var(--muted);font-size:14px}
.woocommerce .woocommerce-ordering select{appearance:none;
  padding:10px 38px 10px 14px;border:1px solid var(--line);border-radius:0;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c6c6c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  font:inherit;font-size:14px;font-weight:650;color:var(--ink);cursor:pointer}
.woocommerce .woocommerce-ordering select:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}

/* --- brandin vari -----------------------------------------------------

   Sunglobe-sanamerkki on vermiljoni, ei mockupin lampiman oranssi.
   Mitattu 27.8.2026 kahdesta logosta:
     Logo1-1.png (custom_logo, haviotön PNG-paletti)  -> #F24623 tarkasti
     Uusi_sunglobe_logo.webp (2026/07, haviollinen)   -> ~#E84821
   Haviotön paletti on tarkka lahde, joten brandivari on #F24623.

   HUOM: teeman --accent (#EF7F1A) on mockupin vari ja se on eri savy.
   Sita ei muutettu — painikkeet, hinnat ja korostukset kayttavat yha sita.
   Jos koko ilme halutaan brandivariin, se on oma paatoksensa. */
:root{--brandi:#F24623;--amber:#EF7F1A;--accent:var(--brandi)}
.nav .brand{color:var(--brandi)}

/* ~~Mockupin hero-kortin ympyroiden vari.~~ Kortti purettiin 31.8.2026 eika
   .hero-cardia enaa renderoida — saanto on siis kayttamaton. Se jatetaan
   nakyviin, koska mockupin oma .hero-card-lohko on yha tiedoston
   ensimmaisella minifoidulla rivilla: jos kortti joskus palautetaan, tama
   kertoo ettei sen oranssi seuraa --accentia vaan on kovakoodattu. */
.hero-card:before,.hero-card:after{background:rgba(242,70,35,.95)}

/* ⚠ html tarvitsee oman taustavarin, jotta mix-blend-mode toimii.

   Ilman tata bodyn taustavari SIIRTYY selaimen juurikankaalle (canvas), eika
   kankaan varia vastaan voi sekoittaa: multiply jai vaikutuksettomaksi ja
   tuotekuvien valkoiset taustat nakyivat suorakulmioina. Kun htmlla on oma
   tausta, bodyn tausta jaa oikeaksi maalatuksi pinnaksi jota vasten
   sekoittaminen toimii. Todettu 28.8.2026. */
html{background:var(--paper)}

/* Mobiilissa kaksi saraketta. auto-fill minmax(230px) antaisi 390 px:n
   naytolla vain yhden, ja 162 tuotteen kategoria olisi loputon pylvas. */
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:42px 18px}
  .woocommerce ul.products li.product a img{height:124px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:13px;line-height:1.35;margin-top:16px;padding-top:13px;min-height:3.9em}
  .woocommerce ul.products li.product .price{font-size:12.5px}
}

/* ===================================================================
   ETUSIVU 31.8.2026 — hero + koko heron alapuoli
   ===================================================================

   Mockupin graafinen kieli sailytettiin (paperipohja, valkoiset osiot
   vuorotellen, oranssi palkki, kolmen kortin ruudukko), mutta osioiden
   SISALTO on kirjoitettu mitatun avainsanakartan mukaan. Muotokieli
   noudattaa kauppiaan 27.–28.8. hyvaksymaa "Hiljainen"-linjaa: ei
   laatikoita siella missa hiusviiva riittaa, kiintea kuvakorkeus ja
   hiljaisempi typografia.
   =================================================================== */

/* --- hero: tuoteryväs Sungloben omista tuotteista -------------------

   Kahdeksan versiota heron oikeasta laidasta, seitseman hylattya:

     1. tumma kortti + katkoviivainen "SINUN LOGOSI"  -> "unohda noi pallot"
     2. liikkuva tuoteseina 24 tuotetta                -> "levoton"
     3. hylly heron ALLA koko leveydella               -> paikka oli vaara
     4. yksi tuote ilman kehysta                       -> "boring as hell"
     5. generoitu ryvas, vaalea pohja                  -> "boxi outo"
     6. generoitu ryvas, tumma pohja                   -> tuotteet eivat olleet
                                                          Sungloben
     7. kasin leikattu ryvas oikeista kuvista          -> "mita kuraa"
     8. oikeat tuotteet, Gemini asetteli ja valaisi    -> logo surkeasti
                                                          mukissa, varit eivat
                                                          harmoniset, kova musta
     9. lampimat 2026-tuotteet, taupe-pohja, iso logo  -> kuva on tama

   Ja kolme versiota heron SOMMITELMASTA 3.9.2026 ("tee hero kokonaan
   uusiksi mutta sailyta mockupin idea"):

     A. kuva taysreunana ruudun oikeasta laidasta      -> ei valittu
     B. koko hero tumma palkki, kuvalla ei reunoja     -> TAMA
     C. ei kuvaa, tumma massa faktapalkkina            -> ei valittu
     B2. sama kuin B mutta tumma haivytettyna
         vasemmalle, tekstipuoli paperia               -> "ei toimi"

   ⚠ MIKSI 7 EI TOIMINUT. Kaikki tuotekuvat on otettu suoraan edesta.
   Leikkaamalla niista ei saa rypasta, koska rypas vaatii yhteisen
   perspektiivin: lopputulos oli tarrakokoelma mustalla pohjalla, jossa
   kassi oli iso tyhja suorakulmio ja muut esineet kasassa nurkassa.
   Kasin kootun version skripti (skriptit/rypas-kokoa.sh) jaa talteen,
   mutta sita ei kannata elvyttaa ilman uusia, eri kulmista otettuja
   tuotekuvia.

   ⚠ MIKSI 8 EI OLE SAMA KUIN 5-6. Naissa Gemini sai tuotteet ULOS,
   leikattuina oikeista tuotekuvista, ja tehtavaksi vain asettelun ja
   valaistuksen. Versioissa 5-6 se sai kuvailun ja keksi tuotteet itse.
   Ero nakyy: pullon sankakorkki, termosmukin painike ja kynan
   viivotinasteikko ovat tallella.

   ⚠ POHJA ON LAMMIN LAHES MUSTA, EI KOVA MUSTA. Kayttajan linjaus 31.8.2026:
   musta toimi, mutta kova musta #141312 ei — ja vaalea taupe ei myoskaan.
   Nykyinen pohja on low-key-studion lampima lahes musta.

   ⚠ Se saatiin vasta KUVAUSTERMEILLA. Malli sivuutti heksakoodit #2A2420 ja
   #241E1A kolmesti, viimeksi otsikolla "THIS IS THE MOST IMPORTANT SETTING",
   ja totteli vasta sanoista "low-key", "unlit black seamless backdrop",
   "chiaroscuro". Ks. skriptit/promptit/hero-rypas-asettelu.txt.

   Kuva ei ole enaa laatikossa, joten sen taustavaria ei tarvita. */

/* --- B: koko hero on tumma, eika kuvalla ole reunoja ----------------

   Kayttajan valinta 3.9.2026. Laatikko poistettiin kokonaan: se oli
   teeman viimeinen pyoristetty muoto (26 px), ja juuri reunaa kauppias
   oli kommentoinut kierros toisensa jalkeen ("boxi outo").

   Reunattomuus tehdaan JATKAMALLA KUVAN TAUSTAA, ei naamiolla eika
   rajaamalla: heron pohja on sama pystyliuku kuin kuvan oma tausta,
   samoilla vareilla samalla korkeudella, joten kuvan suorakulmiota ei
   ole olemassa. Ks. seuraava lohko — siella on mittaukset ja pysakit.

   ⚠ Talla tiella oli kaksi valivaihetta, jotka on syyta muistaa:
     1. tasainen #120D0B + radiaalinen naamio — naamio soi tuotteiden
        reunat (kassin vasen laita, laturin johto)
     2. liuku + naamio — liuku mitattiin vanhasta kuvasta, jossa oli
        vaakasuuntainen vinjetti, joten naamio tarvittiin yha
   Vasta kolmas vaihe toimi: kuva generoitiin uudelleen niin, etta sen
   taustan kirkkaus riippuu VAIN korkeudesta, ja naamio voitiin poistaa.

   TYPOGRAFIA ON MOCKUPIN OMAT ARVOT, EI OMA TULKINTA NIISTA.

   ⚠ Tama meni kahdesti pieleen. Ensin otsikko oli 52 px, sitten
   clamp(40px,5.3vw,72px) — kumpikaan ei ollut mockupin mitoitus.
   Mitattuna 3.9.2026 samalla naytonleveydella:

     leveys   mockup   clamp(40px,5.3vw,72px)   ero
     1440 px  76 px    72 px                    -5 %
     1280 px  76 px    67,8 px                  -11 %

   Ero kasvaa kapeammalle mentaessa, koska vw-kerroin oli pienempi
   (5.3 vs. 6) — 1280 pikselissa mockup on yha katossa (6vw = 76,8)
   kun oma versio on jo pudonnut. Siksi tassa on nyt MOCKUPIN RIVI
   sellaisenaan: clamp(42px,6vw,76px), rivivali .98, kirjainvali
   -.045em, ingressi 20 px. Alle 850 px:n erillista otsikkokokoa ei
   tarvita — clampin alaraja 42 px osuu jo siihen, ja se on sama arvo
   jonka mockup antaa kapeille naytoille.

   Napit pysyvat SUORINA — mockupin pillerimuoto on korvattu kauppiaan
   27.8. valitsemalla mallilla 01. */
/* HERON POHJA — hyvin himmea hiekka (kayttajan linjaus 4.9.2026).

   ⚠ TAMA OSIO YKSINKERTAISTUI RADIKAALISTI, kun kuva syvattiin.
   Aiemmin tassa oli 27 pysakin liuku, joka oli mitattu kuvan taustasta
   canvasilta ja sijoitettu heron koordinaatistoon niin, etta kuvan
   lattiaviiva ja liu'un lattiaviiva osuivat samalle korkeudelle. Koko
   koneisto oli olemassa yhta asiaa varten: jotta kuvan suorakulmio ei
   nakyisi. Nyt tausta on lapinakyva, joten suorakulmiota ei ole
   olemassa eika mitaan tarvitse sovittaa. Pohja voi olla mita tahansa.

   Vari on hiekka, joka juuri ja juuri erottuu valkoisesta: ylhaalla
   #FCFAF5, alhaalla #F2ECDF. Alareuna on aavistuksen syvempi, jotta
   tuotteet seisovat jollakin — tasainen vari jattaisi ne kellumaan.
   Ero sivun omaan paperiin (--paper #FAF9F7) on pieni mutta olemassa:
   hero erottuu vyohykkeena vaikka kumpikaan ei ole valkoinen.

   ⚠ TUOTTEET ON KUVATTU MUSTAA VASTEN. Niiden varjopuolet ovat siksi
   tummia myos vaalealla pohjalla, ja kontaktivarjot (leivottu kuvaan)
   lukevat harmaina. Se toimii, mutta jos kuva joskus vaihdetaan, uusi
   ryvas kannattaa pyytaa suoraan vaalealle taustalle. */
.hero{color:var(--ink);position:relative;overflow:hidden;padding:0;
  background:linear-gradient(180deg,#FCFAF5 0%,#F9F5EC 45%,#F5EFE4 78%,#F2ECDF 100%)}
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:28px;align-items:center;padding:76px 0 84px}

.hero h1{color:var(--ink);font-size:clamp(42px,6vw,76px);line-height:.98;
  letter-spacing:-.045em;margin:14px 0 24px;max-width:none}
.hero .lead{color:#4b4744;font-size:20px;line-height:1.5;max-width:none}
.hero .actions{margin-top:30px}

/* Toissijainen nappi kaytti tummalla pohjalla valkoista hiusviivaa.
   Hiekalla teeman oma saanto (musta hiusviiva) on oikea, joten
   .hero-kohtaista ylikirjoitusta ei enaa ole. */

/* Kuva on syvatty PNG/WebP: tausta lapinakyva, kontaktivarjot
   leivottu kuvaan (skriptit/rypas-varjo.sh). Siksi tassa ei ole
   taustavaria, naamiota eika hehkua — heron liuku nakyy suoraan lapi.

   ⚠ Varjot piti lisata erikseen. Syvatessa ne katosivat: mustaa vasten
   kuvatun rypaan varjot ovat itsekin lahes mustia, joten ne jaivat
   kynnyksen alle. Ilman niita tuotteet leijuivat liu'un paalla. */
.hero-rypas{position:relative;background:none;border-radius:0;min-height:0;display:block}
.hero-rypas img{position:relative;width:100%;height:auto;max-width:none}

/* Faktarivi painikkeiden alla. Hiusviiva erottaa ne toiminnasta ilman omaa
   laatikkoa — sama ele kuin tuoteruudukon hyllyviiva. */
.hero-faktat{
  list-style:none;margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 38px;font-size:13.5px;color:var(--muted)}
.hero-faktat b{
  display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* Mockupin taittopiste 850 px pudottaa heron yhteen sarakkeeseen.

   ⚠ Kuvan -8 %:n levitys POISTETTIIN 4.9.2026. Se oli olemassa siksi,
   etta naamio soi kuvan reunoja: ilman levitysta tuotteet nayttivat
   pieniltä. Syvatty kuva ei tarvitse naamiota, ja levitys alkoi
   pikemminkin rajata kassin vasenta reunaa nayton ulkopuolelle.

   ⚠ Yhden palstan taitossa ei enaa tarvita omaa liukua kuvalaatikolle
   eika omaa taustavaria herolle. Kun kuvassa oli tausta, heron pysakit
   eivat osuneet mobiilissa (kuva alkoi 53,4 % heron korkeudesta 390
   pikselilla mutta 27,7 % 850:lla), ja liuku piti siirtaa kuvan omaan
   laatikkoon. Lapinakyva kuva tekee koko ongelmasta olemattoman. */
/* ⚠ MOBIILISSA JARJESTYS ON ERI KUIN TYOPOYDALLA (kayttajan havainto
   4.9.2026: "kuva tulee vasta alhaalla pitkan scrollin jalkeen").

   Tyopoydalla teksti ja kuva ovat rinnakkain, joten molemmat nakyvat
   heti. Yhdessa palstassa sama jarjestys tyontaa kuvan ingressin,
   painikkeiden ja faktarivin taakse — mitattuna noin 1 100 pikselin
   paahan sivun ylareunasta, eli kaksi ruudullista alaspain.

   Mobiilin jarjestys on siksi: otsikko -> kuva -> painikkeet -> ingressi
   -> faktat. Ensimmaiselle ruudulle mahtuu 390 x 844 pikselin naytolla
   ylapalkki 110, silmakulma 18, otsikko kolmella rivilla 130 ja kuva
   noin 430 pikselia — yhteensa 688, eli otsikko ja tuotekuva nakyvat
   kokonaan ja ingressi kurkistaa alta. Painike on lyhyen liikkeen
   paassa heti kuvan alla.

   ⚠ DOM-jarjestys ei muutu, vain nakyva. Ingressi on yha H1:n jalkeen
   markkauksessa, joten sisallon rakenne sailyy sellaisenaan.

   display:contents nostaa .hero-teksti -laatikon lapset itse ruudukkoon,
   jolloin order koskee niita eika vain tekstilohkoa kokonaisuutena.

   ⚠ Kuvan -8 %:n levitys POISTETTIIN 4.9.2026. Se oli olemassa siksi,
   etta naamio soi kuvan reunoja: ilman levitysta tuotteet nayttivat
   pieniltä. Syvatty kuva ei tarvitse naamiota, ja levitys alkoi
   pikemminkin rajata kassin vasenta reunaa nayton ulkopuolelle.

   ⚠ Yhden palstan taitossa ei enaa tarvita omaa liukua kuvalaatikolle
   eika omaa taustavaria herolle. Kun kuvassa oli tausta, heron pysakit
   eivat osuneet mobiilissa (kuva alkoi 53,4 % heron korkeudesta 390
   pikselilla mutta 27,7 % 850:lla), ja liuku piti siirtaa kuvan omaan
   laatikkoon. Lapinakyva kuva tekee koko ongelmasta olemattoman. */
@media (max-width:850px){
  .hero .hero-grid{grid-template-columns:1fr;gap:0;padding:18px 0 40px}
  .hero .hero-teksti{display:contents}

  .hero .eyebrow{order:1}
  .hero h1{order:2;margin:10px 0 0;font-size:clamp(30px,8.4vw,38px)}

  /* ⚠ KUVAN KOKO SIDOTAAN NAYTON KORKEUTEEN, EI LEVEYTEEN.
     Tavoite (kayttajan linjaus 4.9.2026): painikkeiden pitaa nakya
     ilman vieritysta. Leveyteen sidottu kuva ei sita takaa, koska
     puhelimen KAYTETTAVISSA oleva korkeus on selvasti laitteen
     korkeutta pienempi: selaimen palkit vievat iOS:lla ja Androidilla
     noin 120-150 px. 390 x 844 pikselin laitteella nayttoa jaa noin
     690 px, ja siihen ei mahdu 310 px levea kuva (376 px korkea).

     svh = small viewport height eli se korkeus, joka on kaytossa kun
     selaimen palkit ovat NAKYVISSA. Juuri se on sivun latautuessa
     voimassa, joten mitoitus osuu siihen hetkeen jolloin kayttaja
     nakee heron ensimmaisen kerran. vh on varalla vanhoille
     selaimille — se ylimitoittaa hieman mutta ei riko mitaan. */
  .hero-rypas{order:3;margin:12px auto 0;display:flex;justify-content:center}
  .hero-rypas img{width:auto;max-width:92%;height:42vh;height:42svh;max-height:400px}
  .hero .actions{order:4;margin-top:16px}
  .hero .lead{order:5;margin-top:26px;font-size:17px}
  .hero-faktat{order:6;margin-top:30px}

  /* ⚠ VAIN SILMAKULMA, OTSIKKO JA PAINIKKEET KESKITETAAN — EI INGRESSIA
     EIKA FAKTARIVIA. Kuva on jo keskitetty, joten keskitetty otsikko
     tekee heron ylaosasta symmetrisen ja rauhallisen.

     Ingressi jaa vasemmalle, koska se on kahdeksan rivia pitka:
     keskitetyssa pitkassa leipatekstissa rivin alkukohta vaihtelee
     joka rivilla, ja silma joutuu etsimaan sen. Kokeiltu 4.9.2026
     molemmin pain — keskitettyna se luki selvasti raskaammin.

     Faktarivi on kahden sarakkeen ruudukko, jossa kolmas kohta jaa
     yksin toiselle riville. Keskitettyna se nayttaa epatasapainoiselta.

     ⚠ Tasaus ei vaikuta Googlen pisteytykseen mitenkaan: se on pelkkaa
     CSS:aa, DOM ja tavumaara sailyvat, eika mikaan Core Web Vitals
     -mittari katso tekstin tasausta. */
  .hero .eyebrow,
  .hero h1{text-align:center}
  .hero .actions{justify-content:center}
}

/* Tabletilla kuva saa olla isompi. 310 px on mitoitettu 390 pikselin
   puhelimelle, jotta otsikko, kuva ja painikkeet mahtuvat ensimmaiselle
   ruudulle; 820 pikselin naytolla sama kuva nayttaa hukkuvan. */
@media (min-width:601px) and (max-width:850px){
  .hero-rypas{width:min(52%,420px)}
}


/* --- leipatekstin linkit --------------------------------------------

   Vain etusivulla (body.home). Alleviivaus on brandivarinen hiusviiva, ei
   selaimen oletus: sisaisia linkkeja on tallä sivulla kymmenia, ja
   oletusalleviivaus tekisi tekstista levottoman. */
.home .section p a{
  color:var(--ink);box-shadow:inset 0 -1px 0 var(--brandi);
  transition:background .15s ease}
.home .section p a:hover{background:rgba(242,70,35,.10)}


/* Silmaotsikko osiontunnisteessa. Mockupissa se oli <div>, tassa <p>, ja
   .intro p{color:var(--muted)} (0,1,1) voitti .eyebrown (0,1,0) — otsikot
   renderoityivat harmaina eivatka brandivarisina. */
.intro .eyebrow{color:var(--brandi)}

/* Oranssilla palkilla musta hiusviivanappi on turhan kova. Valkoinen tayttö
   on sama painoarvo kuin muualla brandivarinen.

   ⚠ :not()-ketju on pakko toistaa. Napin perussaanto on
   .btn:not(.primary):not(.orange) eli tarkkuudeltaan (0,3,0), ja pelkka
   .band .btn (0,2,0) havisi sille — mitattuna tausta oli yha lapinakyva. */
.band .btn:not(.primary):not(.orange){
  background:#fff;color:var(--ink);box-shadow:none}
.band .btn:not(.primary):not(.orange):hover{background:var(--ink);color:#fff}

/* Mockupin .feature{padding:22px} tyonsi tekstin 22 px paksun ylaviivan
   sisapuolelle, jolloin viiva ja teksti eivat olleet samassa linjassa muun
   sivun kanssa. Vain etusivulla — muualla lohkoa ei kayteta. */
#miksi .feature{padding:20px 0 0}


/* --- kolmen sarakkeen ruudukot --------------------------------------- */
.es-kolme{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Kasitteet: ei korttia. Osio on maaritelmatekstia, ja paksu ylaviiva
   antaa sille saman ryhdin kuin .feature-lohkoille. */
.es-kasite{padding:22px 0 0;border-top:2px solid var(--ink)}
.es-kasite h3{font-size:20px;margin:0 0 8px}
.es-kasite p{color:var(--muted);margin:0}

/* Osastot: nama ovat kortteja, koska koko lohko on linkki. */
.es-osasto{
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-height:300px;padding:28px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.es-osasto:hover{
  transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.07);
  border-color:#d9d5d0}
.es-osasto h3{font-size:22px;margin:0 0 10px}
.es-osasto p{color:var(--muted);margin:0}
.es-nuoli{font-size:13.5px;font-weight:700;color:var(--brandi)}


/* --- tuoteryhmat -----------------------------------------------------

   Sama muotokieli kuin kauppasivujen hyvaksytyssa ruudukossa: ei laatikkoa,
   kiintea kuvakorkeus, hyllyviiva nimen ylapuolella ja hiljainen typografia.
   Kuva tulee kategorian myydyimmasta tuotteesta (ks. sunglobe_tuoteryhmat).

   Osio on valkoisella pohjalla, joten tuotekuvien valkoinen tausta katoaa
   itsestaan eika mix-blend-modea tarvita. Se on silti mukana: jos osion
   pohjavari joskus vaihtuu paperiin, ruudukko ei hajoa suorakulmioiksi. */
.es-ryhmat{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 26px}
.es-ryhma{display:block}
.es-ryhma-kuva{display:grid;place-items:end center;height:150px;margin-bottom:16px}
.es-ryhma-kuva img{max-height:150px;width:auto;mix-blend-mode:multiply}
.es-ryhma h3{
  margin:0 0 6px;padding-top:13px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;line-height:1.35;
  transition:border-top-color .16s ease,color .16s ease}
.es-ryhma:hover h3{border-top-color:var(--brandi)}
.es-ryhma p{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--muted)}
.es-maara{font-size:12px;color:var(--muted);opacity:.72}


/* --- merkintatavat --------------------------------------------------- */
.es-merkinnat{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.es-merkinnat h3{
  margin:0 0 8px;padding-top:20px;border-top:2px solid var(--ink);font-size:19px}
.es-merkinnat p{margin:0;color:var(--muted)}
/* ⚠ Valitsin tarvitsee .section-etuliitteen. Mockupin .section p{margin:0 0 14px}
   on tarkkuudeltaan (0,1,1) ja voitti pelkan .es-huomion (0,1,0) — mitattuna
   marginaali oli 0 px vaikka saannossa luki 44 px, ja laatikko liimautui kiinni
   edellisen sarakkeen tekstiin (31.8.2026). Sama koski .es-vaiheita alla. */
.section .es-huomio{
  max-width:800px;margin:44px 0 0;padding:22px 26px;
  background:var(--card);border-left:3px solid var(--brandi);color:#3d3d3d}


/* --- tilausvaiheet ---------------------------------------------------

   Numero on CSS-laskuri eika kirjoitettu tekstiin: jarjestyksen muuttaminen
   mallipohjassa ei saa vaatia numeroiden kasin korjaamista. */
.section .es-vaiheet{
  list-style:none;counter-reset:vaihe;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.es-vaiheet li{counter-increment:vaihe;padding-top:20px;border-top:2px solid var(--ink)}
.es-vaiheet li::before{
  content:counter(vaihe,decimal-leading-zero);display:block;margin-bottom:12px;
  font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--brandi)}
.es-vaiheet h3{margin:0 0 8px;font-size:18px}
.es-vaiheet p{margin:0;font-size:14.5px;color:var(--muted)}


/* --- kayttotilanteet ja UKK ------------------------------------------ */
.es-tilanteet{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 30px}
.es-tilanteet article{padding-top:20px;border-top:1px solid var(--line)}
.es-tilanteet h3{margin:0 0 8px;font-size:18px}
.es-tilanteet p{margin:0;font-size:14.5px;color:var(--muted)}

.es-ukk{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 46px}
.es-ukk article{padding-top:20px;border-top:1px solid var(--line)}
.es-ukk h3{margin:0 0 8px;font-size:18px}
.es-ukk p{margin:0;color:var(--muted)}

.es-lopetus .panel h2{font-size:clamp(26px,3vw,34px);margin:6px 0 14px}
.es-lopetus .panel h3{margin:0 0 10px;font-size:20px}
.es-lopetus .actions{margin-top:22px}


/* --- responsiivisuus -------------------------------------------------

   Mockupin taittopiste on 850 px. Sen alapuolella hero menee yhteen
   sarakkeeseen, jolloin kortti saa oman rivinsa ja tuotelaattojen
   prosenttikoot toimivat sellaisenaan. */
@media (max-width:1000px){
  .es-ryhmat{grid-template-columns:repeat(3,1fr)}
  .es-merkinnat,.es-tilanteet,.es-kolme{grid-template-columns:repeat(2,1fr)}
  .section .es-vaiheet{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:850px){
  .hero-faktat{gap:12px 26px}
  .es-osasto{min-height:0}
}

@media (max-width:620px){
  .es-ryhmat{grid-template-columns:repeat(2,1fr);gap:38px 18px}
  .es-ryhma-kuva{height:120px}
  .es-ryhma-kuva img{max-height:120px}
  .es-merkinnat,.es-tilanteet,.es-kolme,.section .es-vaiheet,.es-ukk{grid-template-columns:1fr}
  /* Faktat kahteen sarakkeeseen: neljä riviä allekkain tyontaisi sivun
     ensimmaisen osion turhan kauas. */
  .hero-faktat{gap:16px 22px;font-size:13px}
  .hero-faktat li{flex:1 1 130px}
}


/* --- LOMAKEKENTAT ----------------------------------------------------

   2.9.2026 mitattu tarjouskorisivulta: kentat olivat 32 px korkeita ja
   fontti 13,3 px — eli selaimen oletus, ei teeman tyyli. Teemassa ei ollut
   yhtaan yleista input-saantoa. Tuotannon Blocksy antoi samoille kentille
   45 px / 16 px.

   ⚠ 16 px on alaraja, ei makuasia: iOS-Safari zoomaa sivun sisaan kun
   kosketettu kentta on alle 16 px, ja zoomia ei peruuteta. Tarjouspyynto
   on kaupan ainoa konversiopolku, joten se ei saa hypata mobiilissa.

   Rajaus <main>:iin: ylapalkin ja alatunnisteen omat kentat (kielivalitsin,
   mahdollinen uutiskirje) jaavat naiden saantojen ulkopuolelle. Maara- ja
   valintakentat on jatetty pois — niilla on omat mittansa. */

main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="url"],
main input[type="password"],
main input[type="search"],
main input[type="date"],
main select,
main textarea{
  width:100%;
  font-family:inherit;font-size:16px;line-height:1.25;
  padding:11px 14px;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:0;
  transition:border-color .14s ease,box-shadow .14s ease}

main textarea{line-height:1.5;min-height:120px;resize:vertical}

/* Poikkeukset width:100 %:iin. Lajitteluvalikko on rivin oikeassa reunassa
   oleva pikavalinta, ei lomakekentta — 2.9.2026 se venyi 1 180 px levaksi. */
main .woocommerce-ordering select,
main select[name="orderby"]{width:auto;min-width:200px}

main input[type="file"]{
  width:100%;font-family:inherit;font-size:15px;
  padding:9px 12px;
  background:#fff;border:1px solid var(--line);border-radius:0}

main input[type="text"]:focus-visible,
main input[type="email"]:focus-visible,
main input[type="tel"]:focus-visible,
main input[type="url"]:focus-visible,
main input[type="password"]:focus-visible,
main input[type="search"]:focus-visible,
main input[type="date"]:focus-visible,
main input[type="file"]:focus-visible,
main select:focus-visible,
main textarea:focus-visible{
  outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

main ::placeholder{color:#9a9a9a}

/* WooCommercen oma saanto on tarkempi kuin ylla oleva
   (.woocommerce form .form-row .input-text = 3 luokkaa) ja voittaa siksi
   padding-, border- ja line-height-arvot. Vari annetaan sille muuttujina,
   jotka se itse lukee; mitat vaativat yhta tarkemman valitsimen.
   Ilman tata kentta jai 39 px korkeaksi ja reunus tummanpunaruskeaksi
   (rgba(32,7,7,.8)) — mitattu 2.9.2026. */
:root{
  --wc-form-color-background:#fff;
  --wc-form-color-text:var(--ink);
  --wc-form-border-color:var(--line);
  --wc-form-border-width:1px;
  --wc-form-border-radius:0}

main .woocommerce form .form-row .input-text,
main .woocommerce form .form-row select,
main .woocommerce form .form-row textarea,
main form .form-row .input-text,
main form .form-row select,
main form .form-row textarea{
  padding:11px 14px;font-size:16px;line-height:1.25;height:auto}

/* Pakollisen kentan tahti: lisaosa tulostaa <abbr class="required">. */
main .required{color:var(--accent);text-decoration:none}

/* Kenttien otsikot omalle rivilleen, riittavalla ilmalla. Lisaosan oma
   CSS jattaa ne kiinni kenttaan. */
main .form-row label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
main .form-row{margin-bottom:18px}

/* --- TARJOUSKORIN TUOTETAULUKKO -------------------------------------

   Pikkukuva oli 300x300: WooCommercen cart-pohja tulostaa
   woocommerce_thumbnail-koon eika teema rajoittanut sita mitenkaan.
   Yksi tuote vei siis 300 px pystysuunnassa. */
#yith-ywrq-table-list .product-thumbnail img{
  width:96px;height:96px;object-fit:contain;mix-blend-mode:multiply}

@media (max-width:620px){
  #yith-ywrq-table-list .product-thumbnail img{width:68px;height:68px}
}

/* --- SIVUN OTSIKKO ---------------------------------------------------

   page.php tulostaa otsikon vain jos sisallossa ei ole omaa H1:ta.
   Otsikko on pienempi kuin etusivun hero-H1, joka on 42–76 px. */
.page-hero .sivun-otsikko{font-size:clamp(32px,4vw,52px);margin:0 0 4px}
.section-otsikon-alla{padding-top:26px}
.listan-otsikko{font-size:26px;letter-spacing:-.02em;margin:0 0 8px}
.listan-otsikko a:hover{color:var(--accent)}


/* --- LOMAKKEET JA STACKABLE-PALSTAT KAPEALLA NAYTOLLA ----------------

   2.9.2026 mitattu tarjouspyyntosivulta 390 px:lla: lomake alkoi vasta
   x=95 ja Etunimi-kentta oli 100 px leveä. Syy oli kaksiosainen.

   1) Sivun Stackable-palstalla on omassa inline-tyylissaan
      max-width:75% + margin 15% molemmin puolin !importantilla. Tyopoydalla
      se keskittaa, puhelimessa se jattaa 366 px:sta kayttoon 275 px.
   2) WooCommercen .form-row-first/.form-row-last ovat 47 % ja float:left,
      eli kaksi kenttaa vierekkain myos 390 px:lla.

   Prosenttimarginaali on aina vaara puhelimessa, joten se nollataan
   taittopisteen alapuolella. !important on pakko, koska sivun oma
   inline-tyyli kayttaa sita. */

@media (max-width:780px){
  main .stk-block-column,
  main .wp-block-stackable-column{
    max-width:100% !important;margin-left:0 !important;margin-right:0 !important}

  main .yith-ywraq-mail-form-wrapper{padding-left:0;padding-right:0}

  /* Kentat allekkain: 47 % kahdesta rinnakkaisesta kentasta on 390 px:lla
     noin 170 px, mihin ei mahdu postitoimipaikkaa saati sahkopostia. */
  main .woocommerce form .form-row-first,
  main .woocommerce form .form-row-last,
  main .woocommerce-page form .form-row-first,
  main .woocommerce-page form .form-row-last,
  main form .form-row-first,
  main form .form-row-last,
  main form .form-row-half{
    float:none;width:100%;margin-left:0;margin-right:0}

  /* Tiedostokentta katkaisi tekstin ("Ei v...toa"). */
  main input[type="file"]{font-size:14px;padding:8px 10px}
}


/* --- KIELIKOHTAINEN TEKSTI (.sg-fi / .sg-en) -------------------------

   GTranslate hakee ja kaantaa SUOMENKIELISEN sivun HTML:n, joten eri sisaltoa
   ei voi tuottaa palvelinpuolella — sama vastaus palvelee molempia kielia.
   Siksi ylapalkkiin kirjoitetaan molemmat versiot ja oikea valitaan taalla
   <html lang> -attribuutin perusteella, jonka GTranslate asettaa.

   ⚠ Saannot ovat teeman omassa CSS:ssa TARKOITUKSELLA. Blocksylla saman teki
   mu-plugin sunglobe-kielikohtainen-teksti.php, joka luki merkinnat
   theme_modeista. Uusi teema ei saa riippua siita — jos mu-plugin poistetaan
   vaihdon jalkeen, ylapalkki nayttaisi muuten molemmat kieliversiot
   paallekkain. Mu-plugin voi jaada paikalleen; samat saannot kahdesti eivat
   ole ristiriita.

   Ero on kauppiaan hyvaksymasta mallikuvasta 25.8.2026:
   FI  Sunglobe Oy · Bulevardi 3 B · 00120 Helsinki / Puh. … · palvelu@
   EN  Sunglobe Oy · Bulevardi 3 B · FI-00120 Helsinki, Finland / Tel. … · info@ */

.sg-fi,.sg-en{display:none}
html[lang="fi"] .sg-fi{display:inline}
html[lang="en"] .sg-en{display:inline}
/* Jos lang-attribuutti puuttuisi kokonaan, naytetaan suomi. */
html:not([lang]) .sg-fi{display:inline}


/* ===================================================================
   4.9.2026 — ILMEEN YHTENAISYYS
   =================================================================== */

/* Tarjouskorin ikoni. Oli emoji, joka piirtyi jarjestelman emoji-fontilla
   omilla varillaan; nyt inline-SVG, joka perii tekstin varin. */
.kori-ikoni{width:20px;height:20px;display:block;flex:none;color:var(--ink)}
.kori:hover .kori-ikoni{color:var(--accent)}

/* Ensisijainen toiminto on aina vermiljoni.

   Mitattu 4.9.2026: tuotesivun "Tarjouskoriin" oli musta (#171717) ja
   heron "Pyyda tarjous" vermiljoni — sama toiminto kahdella varilla.
   Sailytetaan musta toissijaisissa (liittyvat tuotteet, listasivut),
   jotta tuotesivun oma paatoiminto erottuu niista.

   Kohdennus on tuotesivun summary-lohkoon: sama luokka on myos
   liittyvien tuotteiden painikkeissa, joita tama ei saa varjata. */
/* Mobiilissa paatoiminto koko leveydelle. Mitattu 390 px:lla: painike
   oli 165 px 351 px:n palstassa eli 47 %, vasemmalle tasattuna. */
@media (max-width:600px){
  .single-product div.product .summary .add-request-quote-button{
    display:flex;width:100%;padding-top:16px;padding-bottom:16px}
}

/* Korin oma asettelu ei saa riippua esivanhemmasta.

   .links .kori sai inline-flexin vain tyopoydalla, koska mobiilissa
   kori on .toiminnot-ryhmassa eika .links-valikossa. Emoji oli
   tekstimerkki ja rivittyi silti oikein; block-tason SVG ei, vaan
   pudotti laskurin omalle rivilleen ja hampurilaisen sen alle
   (mitattu 390 px, 4.9.2026). */
.kori{display:inline-flex;align-items:center;gap:6px;position:relative}

/* Tyhja tarjouskori teeman ilmeeseen.

   Lisaosan oletus oli harmaa katkoviivalaatikko ja geneerinen
   viivapiirrosikoni — ainoa katkoviiva koko sivustolla, jossa muuten on
   vain hiusviivoja ja taytettyja pintoja.

   ⚠ Katkoviiva ja ikoni ovat .ywraq-before-form -kaareessa, eivat
   viestikappaleessa. Ensimmainen yritys kohdistui kappaleeseen
   (.ywraq_list_empty_message), jolloin hiekkapinta piirtyi tekstin
   ympARille katkoviivalaatikon SISAAN. Ikoni on :before-pseudoelementti,
   joten sita ei loydy DOMista. */
.woocommerce.ywraq-wrapper.ywraq-empty .ywraq-before-form{
  border:0;background:var(--hiekka,#F5EFE4);padding:52px 28px;text-align:center}
.ywraq-empty .ywraq-before-form:before,
.ywraq-empty .ywraq-before-form > svg,
.ywraq-empty .ywraq-before-form > img{display:none}
.ywraq-empty .ywraq_list_empty_message{
  border:0;background:none;margin:0 auto 22px;padding:0;
  font-size:17px;color:#3d3d3d;max-width:38ch}

/* ===================================================================
   TUNNUS JA HERO — 5.9.2026
   Korvaa kaikki edelliset hero-versiot (hiekkaliuku, holvi).
   =================================================================== */

/* --- TUNNUS --------------------------------------------------------
   Kauppiaan oma vektorilogo, ei Interilla ladottua nimea. Tagline on
   kirjainvalin takia 250 px levea eli leveampi kuin logo, ja se pakotti
   kapealla naytolla ylatunnisteen kolmelle riville — siksi se piiloutuu
   siella. Samat sanat ovat heron otsikossa ja ingressissa. */
.brand{display:flex;flex-direction:column;gap:5px;line-height:1}
.brand img{height:26px;width:auto;display:block}
.brand small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0}
@media (max-width:850px){
  .brand{gap:0}
  .brand img{height:22px}
  .brand small{display:none}
}

/* --- HERO ----------------------------------------------------------

   Kaksi suorakulmiota, ei muuta. Vasemmalla paperi ja typografia,
   oikealla valokuva reunasta reunaan. Ei liukua, ei muotoja, ei
   pyoristyksia, ei laatikkoa kuvan ymparilla.

   MIKSI NAIN. Kolme edellista versiota epaonnistui samaan asiaan:
   tuotteet olivat syvattyja irtokuvia, joille keksittiin tausta —
   hiekkaliuku, sitten vermiljoninen holvi. Kumpikin nayttaa liimatulta,
   koska esineilla ei ole omaa ymparistoa. Nyt kuva on oikea valokuva:
   tuotteet ovat aidolla pinnalla, aidossa ikkunavalossa, ja varjot ovat
   valon varjoja eivatka jalkikateen leivottuja. Silloin mitaan taustaa
   ei tarvitse keksia.

   Kuva vuotaa nakyman oikeaan reunaan asti. Se on koko sommittelun
   ainoa ele: taysreunainen valokuva lukee aina arvokkaampana kuin
   marginaaliin asetettu. */

.hero{background:var(--paper);color:var(--ink);padding:0;position:relative;
  overflow:hidden}

.hero .hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,72px);align-items:center;padding:0}

.hero .hero-teksti{padding:clamp(56px,6vw,96px) 0}

.hero .eyebrow{color:var(--accent);font-size:12px;letter-spacing:.17em}

.hero h1{color:var(--ink);font-size:clamp(40px,5.4vw,76px);line-height:.94;
  letter-spacing:-.045em;margin:18px 0 24px;max-width:13ch;text-wrap:balance}

.hero .lead{color:#4a4642;font-size:clamp(16.5px,1.25vw,18px);line-height:1.62;
  max-width:44ch}

.hero .actions{margin-top:30px;align-items:center;gap:8px 22px}

/* Yksi tayty nappi, yksi alleviivattu linkki. Kaksi yhta painavaa
   nappia vierekkain ei kerro kumpi on tarkeampi. */
.hero .actions .btn.orange{background:var(--accent);border-color:var(--accent);color:#fff}
.hero .actions .btn.orange:hover{background:var(--ink);border-color:var(--ink)}
.hero .actions .btn:not(.orange){background:none;border:0;padding:14px 2px;
  color:var(--ink);box-shadow:inset 0 -1px 0 rgba(23,23,23,.35)}
.hero .actions .btn:not(.orange):hover{color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}

.hero-faktat{list-style:none;margin:40px 0 0;padding:20px 0 0;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  gap:14px 40px;font-size:13.5px;color:var(--muted)}
.hero-faktat b{display:block;font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em}

/* Kuva taytta korkeutta ja vuotaa oikeaan reunaan. Ruudukko on .wrapin
   sisalla, joten kuvasarake ulotetaan sielta nakyman reunaan negatii-
   visella marginaalilla: 100vw miinus wrapin leveys, jaettuna kahdella. */
.hero-kuva{position:relative;align-self:stretch;min-height:clamp(420px,52vw,660px);
  margin-right:calc(-1 * max(18px, (100vw - var(--max)) / 2))}
.hero-kuva img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 62%;display:block}

/* --- HERO MOBIILISSA -----------------------------------------------
   Otsikko, kuva reunasta reunaan, toiminta. Ingressi ja faktat jaavat
   taitteen alle tarkoituksella: kuvan ja napin on mahduttava ruutuun.
   Tarkistettu viidella naytolla (360x780 … 430x932). */
@media (max-width:850px){
  .hero .hero-grid{grid-template-columns:1fr;gap:0;padding:0}
  .hero .hero-teksti{display:contents}
  .hero .eyebrow{order:1;padding-top:26px}
  .hero h1{order:2;margin:10px 0 0;font-size:clamp(30px,8.2vw,40px);max-width:none}
  .hero-kuva{order:3;min-height:0;height:min(44svh,380px);
    margin:22px calc(-1 * max(12px, (100vw - var(--max)) / 2)) 0}
  .hero .actions{order:4;margin:0;padding:22px 0 4px}
  .hero .lead{order:5;margin:0;padding:14px 0 0;font-size:16.5px;max-width:none}
  .hero-faktat{order:6;margin:26px 0 34px}
}

@media (max-width:850px) and (max-height:700px){
  .hero .eyebrow{padding-top:14px}
  .hero h1{font-size:clamp(25px,6.8vw,31px)}
  .hero-kuva{height:min(34svh,280px);margin-top:14px}
  .hero .actions{padding:16px 0 4px}
}

/* Taysreunaisuuden laskenta. .wrapin sivumarginaali on 18 px, alle 520 px
   naytolla 12 px — sama luku on vietava kuvan negatiiviseen marginaaliin,
   muuten kuva ei osu nakyman reunaan. Mitattu 768 px:lla: kuva alkoi 6 px
   reunasta, koska mobiilisaannossa oli kovakoodattu 12 px. */
:root{--reuna:18px}
@media (max-width:520px){:root{--reuna:12px}}

.hero-kuva{margin-right:calc(-1 * max(var(--reuna), (100vw - var(--max)) / 2))}
@media (max-width:850px){
  .hero-kuva{margin-left:calc(-1 * max(var(--reuna), (100vw - var(--max)) / 2));
    margin-right:calc(-1 * max(var(--reuna), (100vw - var(--max)) / 2))}
}

/* --- HERO MAHTUU YHTEEN RUUTUUN ------------------------------------

   Mitattu 4.9.2026 (1440 x 900): ylatunniste paattyy 151 px:aan ja hero
   oli 843 px korkea, joten se loppui vasta 994 pikselissa — alin 94 px
   jai taitteen alle. Hero on nyt tasan naytön korkuinen ylatunnisteen
   jalkeen, ja sisalto mitoitetaan mahtumaan siihen.

   Matalalla naytolla (kannettavat, 800 px ja alle) otsikko, ingressi ja
   valistykset kutistuvat yhdessa. Ne eivat kutistu pikseli kerrallaan
   vaan portaassa, jotta typografia pysyy hallittuna. */
@media (min-width:851px){
  .hero{min-height:calc(100svh - 151px)}
  .hero .hero-teksti{padding:36px 0}
  .hero h1{font-size:clamp(40px,4.4vw,64px);margin:14px 0 20px}
  .hero .lead{font-size:16.5px;line-height:1.58;max-width:46ch}
  .hero .actions{margin-top:26px}
  .hero-faktat{margin-top:32px;padding-top:18px}
  .hero-kuva{min-height:0}
}

@media (min-width:851px) and (max-height:840px){
  .hero .hero-teksti{padding:22px 0}
  .hero h1{font-size:clamp(36px,3.8vw,54px);margin:12px 0 16px}
  .hero .lead{font-size:15.5px;line-height:1.5}
  .hero .actions{margin-top:20px}
  .hero-faktat{margin-top:22px;padding-top:14px}
  .hero .eyebrow{font-size:11px}
}

/* Korkeus on annettava RUUDUKOLLE, ei herolle. .hero sai min-heightin,
   mutta se ei vality ruudukon riville, joten kuvasarake venyi vain
   tekstin korkeuteen ja heron pohjaan jai vaalea kaistale (mitattu
   1440 x 900: kuva paattyi 813:een, hero 900:aan). */
@media (min-width:851px){
  .hero{min-height:0}
  .hero .hero-grid{min-height:calc(100svh - 151px)}
}

/* Rajaus: kuvasarake on leveampi suhteessa korkeuteen kuin lahdekuva
   (0,89 vs 0,81), joten selain leikkaa ylhaalta ja alhaalta. Oletusarvolla
   62 % ylapuolelle jai enemman ilmaa kuin alapuolelle (mitattu 1440 x 900:
   150 px vs 48 px). Suurempi luku leikkaa enemman ylareunasta.
   ~~Korvattu 21.10.2026 alla olevalla saannolla, joka poistaa pystyleikkauksen
   kokonaan; tama rivi on harmiton eika enaa vaikuta tyopoydalla.~~ */
.hero-kuva img{object-position:52% 72%}

/* --- HERO-KUVA EI LEIKKAUDU YLHAALTA EIKA ALHAALTA (21.10.2026) ---------

   Kauppiaan havainto: leveella ruudulla kassin kahva katkeaa ylhaalta ja
   muistikirja alhaalta, kapealla ei. Mitattu CDP:lla (skriptit/selain/mittaa.js):

     1920 x 900   laatikko 974 x 749  suhde 1,30  pystyleikkaus 38 %
     1920 x 1080  laatikko 974 x 929  suhde 1,05  pystyleikkaus 23 %
     1600 x 900   laatikko 817 x 749  suhde 1,09  pystyleikkaus 26 %
     1440 x 900   laatikko 728 x 749  suhde 0,97  pystyleikkaus 17 %
     1280 x 800   laatikko 646 x 649  suhde 1,00  pystyleikkaus 19 %
     1100 x 900   laatikko 554 x 749  suhde 0,74  pystyleikkaus  0 %

   Kuva on pystykuva (1400 x 1738, suhde 0,81), mutta kuvasarake on
   .94fr/1.06fr-ruudukossa + reunavuodolla lahes nelio tai vaakakuva, ja
   object-fit:cover skaalaa kuvan LEVEYTEEN ja leikkaa korkeudesta.

   Ratkaisu: kuva skaalataan KORKEUTEEN (height:100%, width:auto) ja
   ankkuroidaan oikeaan reunaan, jolloin se vuotaa yha nakyman reunaan
   mutta nayttaa aina koko korkeutensa. Leveassa laatikossa kuvan
   vasemmalle puolelle jaa heron liukua; kapeassa (suhde < 0,81) kuva
   ylittaa laatikon vasemmalta ja leikkautuu sielta — siella on vain
   tyhjaa rapattua pintaa (mitattu 1100 px: 8 %).

   Hairivaa saumaa kuvan vasempaan reunaan ei saa jaada: valokuvan reuna
   on mitattu #EDE5DE (vasen) ja heron liuku #F9F5EC–#F5EFE4, ero nakyisi
   pystyviivana. Siksi kuvan vasen reuna haivytetaan maskilla lapinakyvaksi
   22 %:n matkalla. Maski on img-elementissa, jonka laatikko on nyt tasan
   maalattu kuva — object-fit:in kanssa se olisi ollut koko sarake eika
   olisi osunut kuvan reunaan.

   Mobiilissa (≤ 850 px) kuva on tarkoituksella reunasta reunaan ja
   cover-rajattu; sita ei muuteta tassa. ⚠ Siella leikkaus on silti
   noin 20 % (laatikko 390 x 380) — paatetaan erikseen.

   Tama saanto koskee 851–1199 px:n tyopoytia. Yli 1200 px:n ruuduilla
   front-page.php tarjoaa <picture>-elementilla LEVEAN 4:3-version samasta
   valokuvasta (hero-levea-*.webp, suhde 1,34), joka tayttaa laatikon
   cover-rajauksella ilman pystyleikkausta: laatikon suhde on siella
   1,0–1,3 eli kuvaa kapeampi, joten leikkaus osuu vain sivujen tyhjaan
   pintaan (1920 x 900: 3 %, 1440 x 900: 28 % sivuista yhteensa). Leveassa
   kuvassa esineet alkavat 25 %:n kohdalta, joten sivuleikkaus ei osu niihin
   ennen kuin laatikon suhde on alle 0,74 — silloin ollaan jo alle 1200 px.
   Levean kuvan kanssa maskia ei tarvita: kuva tayttaa laatikon reunasta
   reunaan eika sen reuna ole liukua vasten. */
@media (min-width:851px) and (max-width:1199px){
  .hero-kuva{overflow:hidden}
  .hero-kuva img{
    inset:auto;top:0;right:0;bottom:0;left:auto;
    height:100%;width:auto;max-width:none;
    object-fit:unset;object-position:unset;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 22%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 22%)}
}
@media (min-width:1200px){
  .hero-kuva img{object-fit:cover;object-position:50% 50%}
}
/* Mobiilissa sama levea kuva (front-page.php, <source media>). Yllä oleva
   52 % / 72 % oli mitoitettu pystykuvalle; levea kuva keskitetaan, jolloin
   sivuilta leikkautuu tasaisesti tyhjaa pintaa eika esineista mitaan. */
@media (max-width:850px){
  .hero-kuva img{object-position:50% 50%}
}

/* --- HERO MOBIILISSA: PIENEMPI OTSIKKO, KORKEAMPI KUVA, NAPIT KUVAN PAALLA
   (23.10.2026, kauppiaan pyynto) -----------------------------------------

   Kolme muutosta ≤ 850 px:
   1. H1 pienemmaksi (47,5 → 36 px 360 px:lla), jotta kuvalle jaa korkeutta.
      Rivimaara pysyy kolmena, mutta otsikko on 33 px matalampi. Koko
      annetaan osiossa "HERON JATTIOTSIKKO" (7.9.2026), joka on tata
      myohempana tiedostossa ja voittaisi tassa annetun arvon.
   2. Kuva korkeammaksi: 44svh/380px → 52svh/440px.
   3. Napit kuvan alareunan paalle niin, etta kuvan oma beige pohja jatkuu
      nappien alle. Toteutus: .hero-kuva on kuvaa 80 px korkeampi ja sen
      tausta on valokuvan alareunasta mitattu liuku (vasen #e9ddda, oikea
      #dccfc8 — mitattu canvasilla hero-levea-1200.webp:n alimmasta 20 px:n
      rivista mobiilirajauksen alueelta). Kuva taytta laatikon paitsi
      alimmat 80 px, ja sen alareuna haivytetaan maskilla 8 %:n matkalla,
      jottei valokuvan rakeisuus paaty suoraan viivana tasaiseen variin.
      Napit (41 px) vedetaan negatiivisella ylamarginaalilla ylos niin,
      etta ne alkavat 12 px kuvan alareunan alta: 80 - 12 = 68 px.
      Beige band jatkuu napin alareunan alle 24 px.
      ~~Ensin 44 px ja napit kuvan alareunan keskella (keskilinja = reuna).~~
      Kauppias 23.10.2026: napit liian lahella muistikirjaa, lisaa ilmaa ja
      beigea — muistikirjan alareunasta nappiin oli 13 px, nyt 45 px.
      align-self:start on
      pakollinen: ruudukko venytti negatiivisella marginaalilla annetun
      rivin 64 px:n korkuiseksi ja flex keskitti napit siihen 11 px liian
      alas (mitattu 360 x 780: keskilinja 762, kuvan alareuna 750).
   Alleviivattu "Tutustu valikoimaan" olisi valokuvan paalla huonosti
   luettava, joten se on mobiilissa valkoinen pilleri.
   Tawk.to:n chat-kupla (kiintea, oikea alakulma) peitti keskitetyn rivin
   oikean napin kauppiaan puhelimella 23.10.2026. ~~Napit siirrettiin ensin
   vasempaan reunaan ja tiivistettiin~~ — Sebastian halusi ne takaisin
   keskelle, joten kuplaa nostetaan sen sijaan: functions.php asettaa
   etusivulla mobiilissa Tawk_API.customStyle-arvon, joka lasketaan nappien
   paikasta ennen upotusskriptia. */
@media (max-width:850px){
  .hero-kuva{height:calc(min(52svh,440px) + 80px);
    background:linear-gradient(90deg,#e9ddda,#dccfc8)}
  .hero-kuva img{height:calc(100% - 80px);
    -webkit-mask-image:linear-gradient(to bottom,#000 92%,rgba(0,0,0,0));
    mask-image:linear-gradient(to bottom,#000 92%,rgba(0,0,0,0))}
  .hero .actions{position:relative;z-index:1;margin:-68px 0 0;padding:0;
    align-self:start;justify-content:center;gap:10px}
  .hero .actions .btn:not(.orange){background:#fff;border:1px solid #fff;
    padding:13px 18px;box-shadow:0 1px 3px rgba(0,0,0,.10)}
  .hero .actions .btn:not(.orange):hover{box-shadow:0 1px 3px rgba(0,0,0,.10)}
  .hero .lead{padding-top:24px}
}
@media (max-width:850px) and (max-height:700px){
  .hero-kuva{height:calc(min(40svh,320px) + 80px)}
  .hero .actions{padding:0}
}

/* ===================================================================
   LOHKOEDITORIN SISALTO — 7.9.2026

   Teemassa ei ollut yhtaan saantoa ydinlohkojen luokille: .wp-block-image,
   .alignwide, .alignfull, .aligncenter, galleria, palstat, painike,
   taulukko, kuvateksti. WordPressin oma wp-block-library hoitaa perusteet,
   mutta leveydet ja mitta ovat teeman vastuulla.

   ⚠ MITTA. Mitattu 7.9.2026 artikkelisivulta 1440 px:lla: leipatekstin rivi
   oli 1180 px eli noin 148 merkkia. Luettava on 60-80. Mitta annetaan VAIN
   tekstitason lohkoille — kuvat, galleriat, palstat ja Stackable-lohkot
   jaavat taydelle leveydelle, muuten yhteystietosivun kolmen hengen
   palstasto kutistuisi tekstin levyiseksi.
   =================================================================== */

.sisus > p, .sisus > h2, .sisus > h3, .sisus > h4, .sisus > ul, .sisus > ol,
.sisus > blockquote, .sisus > figure.wp-block-table,
article > .wrap.section > p, article > .wrap.section > h2,
article > .wrap.section > h3, article > .wrap.section > h4,
article > .wrap.section > ul, article > .wrap.section > ol,
article > .wrap.section > blockquote{
  max-width:68ch;margin-inline:auto}

.sisus > p, article > .wrap.section > p{font-size:17px;line-height:1.65;margin:0 0 20px}
.sisus > h2, article > .wrap.section > h2{font-size:clamp(24px,2.4vw,32px);margin:38px 0 12px}
.sisus > h3, article > .wrap.section > h3{font-size:21px;margin:30px 0 10px}
.sisus > ul, .sisus > ol,
article > .wrap.section > ul, article > .wrap.section > ol{font-size:17px;line-height:1.65;padding-left:1.3em}
.sisus li, article .wrap.section li{margin:0 0 8px}

/* Kuvat ja kuvatekstit */
.wp-block-image{margin:28px auto}
.wp-block-image img{height:auto;max-width:100%}
.wp-block-image figcaption,.wp-caption-text,figcaption{
  font-size:14px;color:var(--muted);margin-top:10px;text-align:left}
.aligncenter,.wp-block-image.aligncenter{margin-inline:auto;text-align:center}
.alignleft{float:left;margin:6px 26px 18px 0;max-width:50%}
.alignright{float:right;margin:6px 0 18px 26px;max-width:50%}
.alignnone{margin:28px 0}

/* Levea ja taysreunainen. Wrap on min(100% - 36px, 1180px), joten leveä
   saa ylittaa mitan mutta ei wrapia; taysreunainen vuotaa nakyman laitaan
   samalla laskennalla kuin heron kuva. */
.alignwide{max-width:min(calc(100vw - 2 * var(--reuna)),1180px);width:100%;margin-inline:auto}
.alignfull{
  width:auto;max-width:none;
  margin-left:calc(-1 * max(var(--reuna), (100vw - var(--max)) / 2));
  margin-right:calc(-1 * max(var(--reuna), (100vw - var(--max)) / 2))}
.alignfull img{width:100%;height:auto}

/* Galleria ja palstat, jos kauppias lisaa niita */
.wp-block-gallery{margin:28px 0}
.wp-block-columns{gap:26px;margin:28px 0}
@media (max-width:780px){.wp-block-columns{flex-wrap:wrap}.wp-block-column{flex-basis:100%!important}}

/* Painike, sitaatti, taulukko samaan ilmeeseen kuin muu teema */
.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;border:0;padding:14px 22px;
  font-size:13px;font-weight:600;letter-spacing:.03em;line-height:1;
  background:var(--accent);color:#fff}
.wp-block-button__link:hover{background:var(--ink);color:#fff}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.wp-block-quote{
  border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:30px auto;
  font-size:20px;line-height:1.45;letter-spacing:-.01em}
.wp-block-quote cite{display:block;margin-top:12px;font-size:14px;font-style:normal;color:var(--muted)}

.wp-block-table{overflow-x:auto}
.wp-block-table table{border-collapse:collapse;width:100%;font-size:15px}
.wp-block-table th,.wp-block-table td{
  text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.wp-block-table th{font-weight:700}

.wp-block-separator{border:0;border-top:1px solid var(--line);margin:34px auto}

/* ===================================================================
   HERON JÄTTIOTSIKKO — 7.9.2026

   Otsikko nostetaan niin suureksi kuin ruutuun mahtuu. Koko sidotaan
   SEKÄ leveyteen ETTÄ korkeuteen: min(vw, vh). Pelkkä vw kasvattaisi
   otsikon matalalla kannettavalla niin isoksi, että faktarivi putoaisi
   taitteen alle — hero on tasan näytön korkuinen, joten pystysuunta on
   yhtä sitova rajoite kuin vaakasuunta.

   Tila otetaan sieltä missä sitä oli: yläotsikon yläpuolinen täyte
   pieneni 36 → 14 px, ja ingressin sekä toimintojen välejä kiristettiin.
   =================================================================== */

@media (min-width:851px){
  .hero .hero-teksti{padding:14px 0}
  .hero .eyebrow{font-size:11.5px;letter-spacing:.18em}
  .hero h1{
    font-size:clamp(40px, min(6.1vw, 9.8vh), 86px);
    line-height:.88;letter-spacing:-.055em;margin:12px 0 18px;max-width:11ch}
  /* Katto 86 px: tekstipalsta on leveilla naytoilla vakio 530 px (1180 px
     sisaltoleveys miinus vali, .94fr), ja pisin sana "yrityslahjat" vie
     noin kuusi em:aa. 96 px:lla se ei mahtunut, ja otsikko katkesi
     neljalle riville 1920 px:sta ylospain. */
  .hero .lead{font-size:16px;line-height:1.55;max-width:44ch}
  .hero .actions{margin-top:22px}
  .hero-faktat{margin-top:26px;padding-top:16px}
}

/* Matala kannettava: sama kaava, mutta katto alempana ja ingressi
   tiiviimpi, jotta faktarivi mahtuu yhä ruutuun. */
@media (min-width:851px) and (max-height:840px){
  .hero .hero-teksti{padding:10px 0}
  .hero h1{font-size:clamp(34px, min(5.2vw, 8.6vh), 66px);margin:10px 0 14px}
  .hero .lead{font-size:15px;line-height:1.48;max-width:42ch}
  .hero .actions{margin-top:16px}
  .hero-faktat{margin-top:18px;padding-top:12px}
  .hero .eyebrow{font-size:11px}
}

/* Mobiili. Sama ajatus: otsikko niin suureksi kuin mahtuu, ja tila
   otetaan yläotsikon täytteestä. Kuvan korkeus jää ennalleen, koska
   painikkeiden on pysyttävä taitteen yllä.
   ~~clamp(36px, min(13.2vw, 7.2svh), 62px)~~ — 23.10.2026 kauppias pyysi
   otsikon pienemmaksi, jotta kuva saa korkeutta: 360 px:lla 47,5 → 36 px,
   kolme rivia 134 → 101 px. Ks. osio "NAPIT KUVAN PAALLA". */
@media (max-width:850px){
  .hero .eyebrow{order:1;padding-top:12px;font-size:11px;letter-spacing:.15em}
  .hero h1{order:2;margin:8px 0 0;
    font-size:clamp(28px, min(10vw, 5svh), 38px);
    line-height:.92;letter-spacing:-.045em;max-width:none}
}

@media (max-width:850px) and (max-height:700px){
  .hero .eyebrow{padding-top:8px}
  .hero h1{font-size:clamp(24px, min(7vw, 4.4svh), 30px)}
}

/* ===================================================================
   HERON VAAKATASAPAINO — 7.9.2026

   Havainto: hero näyttää istuvan oikealla. Mitattu syy on kaksiosainen.

   1. EPÄSYMMETRINEN VUOTO. Kuva ulottuu näytön oikeaan reunaan, mutta
      teksti alkaa sivun normaalista marginaalista. 1440 px:llä se on
      123 px, 1920 px:llä jo 363 px — koska sivun sisältöleveys on
      1180 px ja loppu on marginaalia. Oikealla vastaavaa marginaalia ei
      ole lainkaan, joten kokonaisuuden massakeskipiste on oikealla.

   2. VAJAA TEKSTIPALSTA. Ingressi loppui 502 pikseliin vaikka palsta
      jatkui 707:ään — 205 px tyhjää, joka luki aukkona eikä väljyytenä.

   Korjaus: teksti täyttää palstansa (leveämpi ingressi, otsikolle koko
   palsta) ja jako siirtyy hieman kuvan hyväksi, jolloin tyhjä kaista
   tekstin ja kuvan välissä kapenee.

   ⚠ Vasen marginaali PIDETÄÄN sivun omana marginaalina, jotta otsikko
   on samassa linjassa yläpuolella olevan logon kanssa. Sen kaventaminen
   erikseen herolle rikkoisi sen linjan — leveillä näytöillä jäljelle
   jäävä väljyys tulee sivuston 1180 px:n sisältöleveydestä, ei herosta.
   =================================================================== */

@media (min-width:851px){
  .hero .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    gap:clamp(28px,3vw,52px)}
  .hero h1{max-width:none}
  .hero .lead{max-width:52ch}
  .hero-faktat{gap:14px clamp(24px,2.4vw,40px)}
}

/* ===================================================================
   SIVUSTON SISÄLTÖLEVEYS — 7.9.2026

   Vanha: min(100% - 36px, 1180px). Kiinteä 1180 px tarkoitti, että kaikki
   sitä leveämpi näyttö muuttui pelkäksi marginaaliksi: 1920 px:llä sivun
   reunoille jäi 363 px kummallekin puolelle. Herossa se näkyi pahiten,
   koska kuva vuotaa oikeaan reunaan eikä sillä ole vastaavaa marginaalia
   — sommittelu istui silminnähden oikealla.

   Uusi: reunus kasvaa näytön mukana mutta pysähtyy, ja sisältö saa kasvaa
   1400 pikseliin asti.

     leveys   reunus ennen → nyt
       768        18  →  38
      1024        18  →  51
      1440       130  →  72
      1920       363  → 260
      2560       690  → 580

   ⚠ Tämä koskee KOKO sivustoa, ei vain heroa: navigaatio, osiot,
   tuoteruudukot ja alatunniste levenevät samassa suhteessa, joten kaikki
   pysyy linjassa keskenään. Juuri siksi se tehtiin näin eikä siirtämällä
   pelkkää heroa — silloin otsikko olisi irronnut yläpuolella olevasta
   logosta ja alapuolisista osioista.

   Palautus: --max takaisin 1180px:ään ja .wrap-sääntö pois. */
:root{--max:1400px}
.wrap{width:min(calc(100% - clamp(36px, 10vw, 200px)), var(--max))}
@media (max-width:520px){
  .wrap{width:min(calc(100% - 24px), var(--max))}
}

/* Täysreunaisuuden laskenta uuteen sisältöleveyteen.

   ⚠ Sisältöleveyden muutos rikkoi heron kuvan vuodon: --reuna oli kiinteä
   18 px, mutta .wrapin sivureunus on nyt clamp(36px,10vw,200px)/2 eli
   1440 px:llä 72 px. Kuva jäi siksi 52 px irti oikeasta laidasta.
   Reunus lasketaan nyt samasta kaavasta kuin wrap. */
:root{--reuna:calc(clamp(36px, 10vw, 200px) / 2)}
@media (max-width:520px){:root{--reuna:12px}}

/* Palsta leveni, joten otsikko saa taas kasvaa: pisin sana vie noin kuusi
   em:aa, ja palsta on 1440 px:llä 582 px ja 1920 px:llä 634 px. */
@media (min-width:851px){
  .hero h1{font-size:clamp(40px, min(6.1vw, 9.8vh), 96px)}
}

/* --- JORMAN 20.10.2026 EHDOTUKSET 1-5 (toteutettu 23.10.2026) ---------------

   1. Ylapalkkiin kehotus puhelimen eteen ("Ole meihin suoraan yhteydessa:").
      Nakyy vain tyopoydalla: puhelimessa palkki on jo kaksi rivia, ja kehotus
      tekisi siita kolme — se painaisi heron napit taitteen alle (mitattu
      360 x 780: napit paattyivat 771/780 ennen muutosta).
   2. H1:n alla oranssi palvelulause (.hero-palvelulause). Mobiilissa se tulee
      otsikon ja kuvan valiin, ja kuvan korkeus pienenee 52 → 46 svh, jotta
      napit pysyvat ensimmaisella ruudulla.
   3. Ingressi on otsikkotekstien alla (DOM-jarjestys: H1, palvelulause, ingressi).
   4. "kuuluu palveluun" → "kuuluu tarjoukseen" (front-page.php, 2 kohtaa) ja
      tyhjan korin teksti (functions.php).
   5. Osioiden jarjestys (front-page.php). */
.hero-palvelulause{color:var(--accent);font-size:clamp(18px,1.55vw,23px);font-weight:600;
  line-height:1.35;margin:0 0 18px;max-width:44ch;text-wrap:balance}
.hero h1{margin-bottom:12px}
.topbar .kehotus{margin-right:4px}
.topbar .kehotus-mob{display:none}
@media (max-width:850px){
  /* Sebastian 23.10.: kehotus myos puhelimeen, mutta ei kolmatta rivia.
     "Ota yhteyttä: +358 10 420 8900 · palvelu@sunglobe.net" mahtuu 360 px:iin
     kun "Puh."-etuliite jaa pois (mitattu). */
  .topbar .kehotus{display:none}
  .topbar .kehotus-mob{display:inline;margin-right:4px}
  .topbar .etuliite{display:none}
  .topbar .wrap > span:last-child{white-space:nowrap}
  .hero .hero-palvelulause{order:2;margin:10px 0 0;font-size:16.5px;text-align:center;max-width:none;line-height:1.3}
  .hero-kuva{height:calc(min(41svh,380px) + 80px);margin-top:14px}
  /* 46 svh ei riittanyt: 360 x 780 napit paattyivat 811 (ruutu 780). Palvelulause
     vie 86 px, josta 41 svh + lyhyempi kuvan ylamarginaali ottaa takaisin ~47 px. */
}
@media (max-width:850px) and (max-height:700px){
  .hero .hero-palvelulause{font-size:15px;margin-top:6px}
  .hero-kuva{height:calc(min(36svh,300px) + 80px)}
}
@media (min-width:851px) and (max-height:840px){
  .hero-palvelulause{font-size:clamp(16px,1.3vw,19px);margin-bottom:12px}
}

/* Tuotekuvaus yhteenvetopalstassa kun lyhyt kuvaus puuttuu (functions.php 23.10.2026). */
.woocommerce div.product .summary .sg-kuvaus-ylos{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:#3d3a37}
.woocommerce div.product .summary .sg-kuvaus-ylos p{margin:0 0 10px}


/* ===================================================================
   YLAOSA JA TAGLINE PUHELIMESSA — Jorman palaute 23.10.2026
   ===================================================================
   1. .ylaosa kaarii ylapalkin ja valikon, ja koko kaare on sticky. Nain
      yhteystiedot pysyvat nakyvissa vieritettaessa (Jorma 19.47). .nav ei
      ole enaa itse sticky — kaksi sisakkaista stickya tekisi raon.
   2. Pyyda tarjous -painike valikossa oranssilla (Jorma 21.08).
   3. Tagline "Liikelahjat · Promotuotteet · Mainosvaatteet" myos puhelimeen
      (Jorma 19.55): omana rivina tunnusrivin alla, ei tunnuksen sisalla.
      Valikon korkeus puhelimessa ei ole enaa kiintea 76 px: tunnusrivi
      ~52 px + tagline ~16 px. Heron ylaotsikko poistui samalla (Jorma
      19.57), joten napit pysyvat ensimmaisella ruudulla — mitattu
      24.10.2026, luvut JATKUU-TASTA-seo.md. */
.ylaosa{position:sticky;top:0;z-index:10}
.nav{position:static}
.nav .toiminnot .btn.orange{border-color:var(--accent)}
.nav .toiminnot .btn.orange:hover{background:var(--ink);border-color:var(--ink)}
.tagline-mob{display:none}
@media (max-width:850px){
  .nav .wrap{height:auto;padding:10px 0 7px;row-gap:0}
  .nav .brand img{height:22px}
  .tagline-mob{display:block;flex:1 0 100%;order:4;text-align:left;
    font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);margin:5px 0 0;line-height:1.2}
}


/* ===================================================================
   HERO-KUVA G (24.10.2026): Helsinki-showroom, 11 tuotetta
   ===================================================================
   Uusi kuva on valokuva ikkunan edessa, ei rapattu seina, joten sen vasen
   reuna on vaalea lasi ja kaupunki — ei enaa tarvetta haivyttaa reunaa
   liukuun 851–1199 px:ssa. Pystyversio (4:5) on rajattu samasta
   laajennetusta kuvasta: tuoteryhma on leveydesta 9–91 %, joten
   oikeaan reunaan ankkurointi leikkaisi lippiksen. Kuva keskitetaan ja
   leikkautuu molemmilta sivuilta tasan (0,74/0,80 → 3,75 % per puoli).
   Mittaus scratchpad/leikkaus-lauseke.js, luvut JATKUU-TASTA-seo.md. */
@media (min-width:851px) and (max-width:1199px){
  .hero-kuva img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:none;mask-image:none}
}

/* HERO G PUHELIMESSA (24.10.2026): pystykuva nayttaa 72 % korkeudesta
   (laatikko 0,9 / kuva 0,8). Keskitettyna nakyva alue oli 14–86 % ja
   tuoteryhman alareuna (85 %) osui alareunan 8 %:n haivytykseen: muistikirja
   ja avaimenpera haalenivat. Kohta 62 % siirtaa ikkunan 17–89 %:iin (kupoli
   alkaa 20 %:sta, ryhma paattyy 85 %:iin) ja haivytys kapenee 2 %:iin. */
@media (max-width:850px){
  .hero-kuva img{object-position:50% 62%;
    -webkit-mask-image:linear-gradient(to bottom,#000 98%,rgba(0,0,0,0));
    mask-image:linear-gradient(to bottom,#000 98%,rgba(0,0,0,0))}
}

/* HERO G TYOPOYDALLA (24.10.2026): Sebastian: "zoomaa lahemmas tuotteita".
   Kuvasarake on lahes nelio (mitattu 0,97–1,09) ja kuva sovitetaan korkeuteen,
   joten tuotteiden koon maaraa kupolin ja muistikirjan valinen korkeus.
   Kaksi muutosta yhdessa: (1) tyopoydan kuva on rajattu tiukemmin (lahde
   crop=1536:1280:492:320, suhde 1,2; ryhma x 12–88 %, y 31–94 %, kupoli 3 %:sta)
   ja (2) kuvasarake leveammaksi (0,8fr/1,2fr, oli 0,94/1,06), jolloin 1,2-suhteinen
   kuva leikkautuu sivuilta alle 5 %. Tuoteryhma 405 → 471 px korkea 1440 px:lla.
   Ultralevealla (sarake > 1,2) kuva sovitetaan leveyteen ja ylaosa leikkautuu —
   kohta 100 % pitaa muistikirjan, kupoli voi leikkautua. */
@media (min-width:1200px){
  .hero .hero-grid{grid-template-columns:.8fr 1.2fr}
  .hero-kuva img{object-position:50% 100%}
}


/* TIIMIKORTIT (24.10.2026): yhteystietosivun Stackable-kortit (Lenita, Elina)
   ovat kahdessa sarakkeessa; Elinan kortin valkoinen osa jai Lenitan korttia
   matalammaksi, koska sisalto maaraa korkeuden (Jorma 24.10. 17.15). Venytetaan
   sarake ja kortti taysikorkuisiksi, jolloin molemmat paattyvat samaan linjaan.
   Rajattu yhteystietosivuun (ID 15909), ettei muiden sivujen kortit muutu. */
/* Mitattu 24.10. klo 23.5x: rivi (.stk-row, flex) venyttaa sarakkeet 421 px:iin,
   mutta sarakkeen sisalla .stk-column-wrapper on lohko (397 px = sisalto).
   Sarake on itse flex (align-items:stretch), joten wrapperille flex:1, ja
   sen sisalla sisaltolohko ja kortti taysikorkuisiksi. */
.page-id-15909 .stk-block-column > .stk-column-wrapper{flex:1 1 auto;display:flex;flex-direction:column}
.page-id-15909 .stk-block-column > .stk-column-wrapper > .stk-inner-blocks{flex:1 1 auto}
.page-id-15909 .stk-block-card{height:100%}
/* Valkoinen laatikko on kortin sisempi .stk-container (381 px, kun kortti oli
   jo 397 px) — sekin taysikorkuiseksi. */
.page-id-15909 .stk-block-card > .stk-container{height:100%;min-height:100%;display:flex;flex-direction:column}
.page-id-15909 .stk-block-card > .stk-container > .stk-block-card__content{flex:1 1 auto}


/* ===================================================================
   LIPUT JA H1 (25.10.2026, vaihdon jalkeen)
   ===================================================================
   1. GTranslaten lippuvalitsin (.kieli > .gtranslate_wrapper) valikon
      toimintoihin. Kun lisaosan skripti on tayttanyt kaareen, EN-tekstilinkki
      piilotetaan (:has). Ilman skriptia (headless, viivastys) nakyy EN.
   2. Pääotsikko: kuvasarake levennettiin 0,8/1,2:een 24.10., jolloin
      tekstisarake on 1440 px:lla 495 px ja 88 px:n otsikko rivittyy suomeksi
      neljalle ja englanniksi kuudelle riville ("your" yksin). Pienempi koko
      ≥ 1200 px, englanniksi viela pienempi (sanat pidempia). */
.nav .toiminnot .kieli{display:inline-flex;align-items:center}
.nav .toiminnot .kieli .gtranslate_wrapper{display:inline-flex;align-items:center;gap:8px}
.nav .toiminnot .kieli .gtranslate_wrapper a{display:inline-flex;align-items:center;line-height:1}
.nav .toiminnot .kieli .gtranslate_wrapper img{width:22px;height:auto;display:block}
.nav .toiminnot .kieli:has(.gtranslate_wrapper > *) + .lang{display:none}
.nav .toiminnot .kieli:not(:has(.gtranslate_wrapper > *)){display:none}
@media (min-width:1200px){
  .hero h1{font-size:clamp(48px,4.9vw,74px)}
  html[lang="en"] .hero h1{font-size:clamp(44px,4.2vw,64px)}
}