/* ══ PUUTESIHTMÄRGID MOBIILIS ══ Lisatud 2026-08-30 mobiili-auditi järel. 90% liiklusest on mobiil, aga mitmed juhtelemendid olid 16–32 px — Apple soovitab vähemalt 44×44 px. ⚠️ MIKS PLAIN CSS, MITTE TAILWIND: `static/css/tailwind.css` on EELNEVALT EHITATUD (mitte JIT). Seal on ainult need klassid, mis olid mallides ehitamise hetkel — uued utiliidid nagu `min-h-[44px]` EI OLE seal olemas ja ei teeks vaikselt MIDAGI. ⚠️ MIKS ::after, MITTE SUUREM NUPP: nupu visuaalne suurus jääb TÄPSELT samaks (omanik on kujunduse heaks kiitnud) — kasvab ainult nähtamatu puutepiirkond. Nii ei nihku ükski paigutus. Kaasatud: index.html, workshops.html, workshop_detail.html, shop.html, blog_base.html — TAILWINDI JÄREL, et see saaks vajadusel üle kirjutada. */ /* Laiuse-põhine: iOS suumib fookusel ainult telefoni-laiusel; laiematel ekraanidel muudaks 16px sundimine admin-vormide välimust ilma kasuta. */ @media (max-width: 768px) { /* ── iOS auto-zoom: alla 16px välja fookustamisel suumib Safari lehe sisse ── ⚠️ LÕKS, mis 2026-08-30 auditi ESIMESE paranduse läbi kukutas: `input[type="text"]` EI MATCHI välja, millel `type` atribuuti üldse EI OLE (nt workshop_detail rFirst/ rLast/rPromo). `el.type` tagastab JS-is „text", aga CSS-i atribuudivalija ei leia seda. Seepärast läheme vastupidi: KÕIK input'id peale nende, mille puhul suurus ei loe. */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="color"]), select, textarea { font-size: 16px !important; } } /* Puutesihtmärgid: gate on SEADME, mitte laiuse peal. `pointer: coarse` tähendab „sõrm", nii et see katab ka iPad Pro (1024px) ja suured Androidid — laiuse-põhine reegel jättis need välja. Hiirega kasutajat see EI puuduta, seega töölaua-tihedus säilib. */ @media (pointer: coarse) { /* ── Koguse-steppered (− / +) töötoa registreerimises ja poes: 32×32 → 44×44 ── */ /* ⚠️ `position: relative` AINULT siis, kui element EI OLE juba paigutatud. Ilma selle valvurita kirjutas see reegel üle Tailwindi `absolute top-5 right-5` ja broneerimismodaali sulge-rist kukkus nurgast modaali KESKELE (omanik märkas telefonis 2026-08-30). Juba `absolute`-elemendil pole `relative`-t vajagi — ::after ankurdub niikuinii tema külge. ⚠️ Klassi-valvur näeb ainult TAILWINDI klasse. `.host-close` seab `position: sticky` OMA CSS-is (workshops.html) — see tuli eraldi välja jätta, muidu kaotas ta kleepuvuse ja × keris paneeli sees minema. Kui lisad siia uue nupu, kontrolli ta arvutatud `position`-it ENNE, mitte pärast. */ button[onclick^="chgQty"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]), button[onclick^="qty"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]), .step-btn:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]) { position: relative; } button[onclick^="chgQty"]::after, button[onclick^="qty"]::after, .step-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ── Päise logo-link: alla 400px kahandasime logo 32px-ni (et hamburger mahuks), mis jättis lingile 32px kõrguse. Polster taastab 44px puutekõrguse — logo ise ei muutu, sest polster on lingi sees. ── */ nav a:has(> .nav-logo) { display: inline-flex; align-items: center; min-height: 44px; } /* ── Paketikaartide „?" abinupud olid 28px laiad ── */ .pkg-help:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]), button[onclick*="openPkgFaq"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]) { position: relative; } .pkg-help::after, button[onclick*="openPkgFaq"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ── /tootoad filtri-pillid olid 28px kõrged. Siin EI saa ::after trikki kasutada: pillid murduvad mitmele reale ja nähtamatu 44px ala kataks naaberrea pilli, tekitades mööda-vajutusi. Seepärast kasvatame päris kõrgust — visuaalselt märkamatu, sest pill on niikuinii ümar. ── */ .ws-filter, .cat-pill { min-height: 44px; display: inline-flex; align-items: center; } /* ── Poe kategooria-pillid (35px) ja „+ Lisa" nupud (32px). Pillid on horisontaalselt keritavas ribas ühel real, seega päris kõrguse kasvatamine on ohutu — naaberrida pole. „+ Lisa" on toote kaardi sees oma reas. ── */ /* ⚠️ `:not(.hidden)` ON KOHUSTUSLIK. See fail laaditakse PÄRAST tailwind.css-i ja `.add-btn { display: inline-flex }` on sama spetsiifilisusega kui `.hidden` (`display:none`) → hilisem VÕIDAB. Tagajärg mobiilis: korvi lisatud toote „+ Lisa" nuppu EI SAANUD peita, seega kaardil olid korraga NII nupp KUI koguse-stepper ja kaart nägi katki välja. Desktopil viga ei ilmnenud, sest reegel on media query sees. */ .shop-chip:not(.hidden), .add-btn:not(.hidden) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── „← Kõik töötoad" / „← Avalehele" tagasilingid olid 20px kõrged ── */ .back-link { display: inline-flex; align-items: center; min-height: 44px; } /* ── RINGIKUJULISED IKOONINUPUD PEAVAD JÄÄMA RUUDUKS ── index.html-is on VANA üldreegel `@media(max-width:768px){ button { min-height:44px } }`, mis venitas 28×28 „?" abinupu 28×44 PILLIKS (ja sama kõigil w-7/w-8 ikoonidel). Puutepiirkonna annab siin ::after, MITTE kasti venitamine — nii jääb ring ringiks. `[class~="w-7"]` matchib täpselt tokeni, seega `w-72` vms ei satu kogemata sisse. ── */ button[class~="w-6"], button[class~="w-7"], button[class~="w-8"], button[class~="w-10"], button[class~="w-11"], button[class~="w-12"], a[class~="w-6"], a[class~="w-7"], a[class~="w-8"], a[class~="w-10"], a[class~="w-11"], a[class~="w-12"] { min-height: 0; } /* ── Modaalide sulgemis-rist: oli 17 px lai ── */ button[onclick^="close"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), button[onclick^="closeReg"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), button[onclick^="closeHost"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), button[onclick^="toggleMobileMenu"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), button[onclick*="PkgFaq"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), button[aria-label="Sulge"]:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close), .modal-close:not([class~="absolute"]):not([class~="fixed"]):not([class~="sticky"]):not([class~="relative"]):not(.host-close) { position: relative; } button[onclick^="close"]::after, button[onclick^="closeReg"]::after, button[onclick^="closeHost"]::after, button[onclick^="toggleMobileMenu"]::after, button[onclick*="PkgFaq"]::after, button[aria-label="Sulge"]::after, .modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ── Eraldiseisvad tekstilingid, mis on LAIAD aga õhukesed (18–20px): „Vaata kaardil →" asukoha-plokis ja jaluse e-posti aadress. Mõlemad on oma real, seega püstine polster ei lõhu ümbritsevat teksti. ── */ a[href*="maps"], footer a[href^="mailto:"], footer a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; } /* ── Päise „Kirjuta meile" / „Broneeri" nupud olid 32–34px kõrged (py-2). Nähtaval 768px-st üles, seega puutetahvlitel on need päris nupud. ── */ .nav-cta { min-height: 44px; } /* ── Blogiloo „Jaga lugu" nupp oli 38px ── */ button[onclick^="copyLink"] { min-height: 44px; } /* ── Jaluse juriidilised lingid (tingimused, privaatsus, kodukord) olid 16px kõrged ── */ /* NB: jaluse „Tingimused"/„Privaatsus" on