/* * TOORIISTAKESKUS MODERN SHOP — disainitokenid * --------------------------------------------- * Suund: "töökoja tehniline täpsus" - laotud metall, ohutuskollane, * mõõdulindi mustrid. Mitte generic AI-lahendus (kreem+terrakota * ega must+neoon) - palett ja tüpograafia lähtuvad tööriistapoe enda * maailmast: laoseisu sildid, tootekoodid, tehnilised spetsifikatsioonid. * * Signatuurelement: mõõdulindi-triibustik (.tms-tick-rule), mida * kasutatakse jaotusjoonena ja AJAX-laadimise indikaatorina - päriselt * seotud tööriistapoe teemaga, mitte dekoratiivne juhuslik detail. */ :root { /* Värvid */ --tms-bg: #FFFFFF; /* puhas valge taust (klient soovis halli asemel) */ --tms-surface: #FFFFFF; --tms-surface-2: #E9EBE6; --tms-ink: #1C1F22; /* söestunud teras */ --tms-ink-soft: #565B60; /* raudhall - sekundaarne tekst */ --tms-border: #D8DAD4; --tms-border-strong: #B8BCB4; --tms-accent: #F1D949; /* logo kollane (täpne toon kliendi täpsustuse järgi) - peamine CTA */ --tms-accent-ink: #201804; --tms-accent-soft: #FDF9E4; /* Päise sinine - kopeeritud tooriistakeskus-header/assets/css/tkh-header.css muutujast --tkh-charcoal (2026-08-05). Nimi failis on eksitav ("charcoal"), aga väärtus on tegelikult sügavsinine, mida päis kasutab. Kasutame siin sama väärtust, et ostukorvi/kassa kokkuvõtte kaardid oleksid visuaalselt päisega ühtsed. Kui päise värv kunagi muutub, uuenda ka siin käsitsi - pluginad ei jaga CSS muutujaid üksteisega. */ --tms-header-blue: #123F6E; --tms-info: #3D5A73; /* terasksinine - lingid/info */ --tms-info-soft: #E4EBEF; --tms-success: #4B7F52; --tms-success-soft: #E6EFE4; --tms-warning: #C97A1A; --tms-warning-soft: #FBEBD8; --tms-danger: #B23A34; --tms-danger-soft: #F7E3E1; /* Tüpograafia */ --tms-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --tms-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tms-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Vahed (4px baas) */ --tms-space-1: 4px; --tms-space-2: 8px; --tms-space-3: 12px; --tms-space-4: 16px; --tms-space-5: 24px; --tms-space-6: 32px; --tms-space-7: 48px; --tms-space-8: 64px; /* Raadiused ja varjud */ --tms-radius-sm: 4px; --tms-radius-md: 10px; --tms-radius-lg: 16px; --tms-shadow-sm: 0 1px 2px rgba(28,31,34,.06), 0 1px 1px rgba(28,31,34,.05); --tms-shadow-md: 0 6px 16px rgba(28,31,34,.08); --tms-shadow-lg: 0 16px 40px rgba(28,31,34,.14); // NB: 1240px, mitte 1280px — vastavuses tooriistakeskus-header plugina // tkh-header.css konteinerilaiusega (kontrollitud 2026-08-05), et ostukorv/ // checkout/kinnituslehe sisu jääks visuaalselt sama laiaks kui päis. --tms-container: 1240px; } /* ========================================================================== DIVI KAITSEKIHT Divi injekteerib stiile li::before, ul.products, globaalsete nuppude ja lingi-värvi pärimise kaudu (dokumenteeritud probleem). Skopeerime range reset'i .tms-reset konteineri sisse, et vältida konflikte, ilma et puudutaksime ülejäänud saiti (tormek.ee, motoroller.ee jagavad hostingut, aga mitte seda pluginat). ========================================================================== */ .tms-reset, .tms-reset * { box-sizing: border-box; } .tms-reset ul, .tms-reset ol { list-style: none !important; margin: 0; padding: 0; } .tms-reset li::before, .tms-reset ul.products li::before, .tms-reset ul li::before { content: none !important; display: none !important; } .tms-reset ul.products { display: block; margin: 0 !important; padding: 0 !important; } .tms-reset a { color: inherit; text-decoration: none; background: none !important; border: none !important; } .tms-reset button, .tms-reset input, .tms-reset select, .tms-reset textarea { font-family: inherit; font-size: 1rem; color: var(--tms-ink); background: var(--tms-surface); border: 1px solid var(--tms-border); border-radius: var(--tms-radius-sm); margin: 0; box-shadow: none !important; text-shadow: none !important; } /* Checkbox/radio/range jätame natiivseks (appearance:none teeks need nähtamatuks ilma asenduseta) - accent-color annab neile siiski meie brändivärvi. */ .tms-reset button, .tms-reset input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .tms-reset select, .tms-reset textarea { appearance: none; -webkit-appearance: none; } .tms-reset input[type="checkbox"], .tms-reset input[type="radio"] { accent-color: var(--tms-accent); } /* Üldine langev nooleke kõikidele select-väljadele (appearance:none eemaldab natiivse) - vaatespetsiifilised klassid (nt .tms-sort-select) võivad selle suurema spetsiifilisusega üle kirjutada. */ .tms-reset select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23565B60' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important; } .tms-reset button { cursor: pointer; background-image: none !important; text-transform: none; letter-spacing: normal; } .tms-reset img { max-width: 100%; height: auto; display: block; } .tms-reset h1, .tms-reset h2, .tms-reset h3, .tms-reset h4, .tms-reset h5, .tms-reset h6, .tms-reset p { margin: 0; padding: 0; font-weight: inherit; } .tms-reset table { border-collapse: collapse; width: 100%; } .tms-reset :focus-visible { outline: 2px solid var(--tms-info); outline-offset: 2px; } /* ========================================================================== PÕHISTIILID ========================================================================== */ .tms-reset { font-family: var(--tms-font-body); color: var(--tms-ink); background: var(--tms-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } .tms-container { max-width: var(--tms-container); margin: 0 auto; padding: 0 var(--tms-space-5); } @media (max-width: 640px) { .tms-container { padding: 0 var(--tms-space-4); } } .tms-eyebrow { font-family: var(--tms-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tms-ink-soft); } .tms-h1 { font-family: var(--tms-font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--tms-ink); } .tms-h2 { font-family: var(--tms-font-display); font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; } .tms-h3 { font-family: var(--tms-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; } .tms-mono-tag { font-family: var(--tms-font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--tms-ink-soft); } .tms-sku-tag { display: inline-block; font-family: var(--tms-font-mono); font-size: .7rem; letter-spacing: .03em; color: var(--tms-ink-soft); } /* Nupud */ .tms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tms-space-2); font-family: var(--tms-font-body); font-weight: 600; font-size: .92rem; padding: 12px 20px; border-radius: var(--tms-radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .15s ease, border-color .15s ease; white-space: nowrap; } .tms-btn:active { transform: translateY(1px); } .tms-btn-primary { background: var(--tms-accent); color: var(--tms-accent-ink); border-color: var(--tms-accent); } .tms-btn-primary:hover { background: #cf9207; } .tms-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; } .tms-btn-secondary { background: var(--tms-ink); color: #fff; } .tms-btn-secondary:hover { background: #33383d; } .tms-btn-ghost { background: transparent; border-color: var(--tms-border-strong); color: var(--tms-ink); } .tms-btn-ghost:hover { border-color: var(--tms-ink); background: var(--tms-surface-2); } .tms-btn-block { width: 100%; } .tms-btn-sm { padding: 8px 14px; font-size: .82rem; } /* Laoseisu mõõdik */ .tms-stock-gauge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; } .tms-stock-gauge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .tms-stock-in-stock { color: var(--tms-success); } .tms-stock-out-of-stock, .tms-stock-backorder { color: var(--tms-danger); } /* Rida, mis hoiab laoseisu mõõdikut ja (kui aktiivne) mate-delivery-time plugina tarneaja teksti koos, ÜHEL REAL, HINNA KOHAL (v1.37.28-st, varem oli see rida hinna ALL - vt content-product.php ".tms-card- facts-row" ja mate-delivery-time plugina mdt-card.css ".mdt-delivery- text" reegleid). Laoseis jääb VASAKULE, tarneaeg (kui aktiivne) PAREMALE - "justify-content:space-between" jaotab need rea kahte otsa. Kui tarneaega pole (plugin pole aktiivne / tootel pole tarneaega määratud), jääb reale lihtsalt ainult laoseisu mõõdik, endiselt vasakul. */ .tms-card-facts-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--tms-ink-soft, #5a5f63); margin: 2px 0 4px; } /* Kampaania nimi + "Sinu võit" (v1.69.0, 15.09.2026, ümber korraldatud v1.70.0) - ainult toodetel, kus NOOM-i andmetest sai konkreetse kampaania nimeliselt siduda (vt content-product.php tms_get_campaign_info() kutset). KAKS ERINEVAT ASUKOHTA (v1.70.0-st): 1) KAMPAANIA NIMI (nt "STIHL soodushind") - nurgasildina PILDI peal, ÜLEVAL PAREMAL (vt ".tms-card-campaign-badge" allpool) - vaba nurk, kuna vana üldine "Sinu võit" silt eemaldati sealt juba 11.09.2026 (vt ajaloolist kommentaari content-product.php failis) ja "-X%" allahindlussilt elab vastasnurgas, üleval VASAKUL (".tms-card-badges-tl"). Nimi on dekoratiivne ja juba niigi ellipsis'iga lühendatav, seega sobib pildi kitsa nurgasildi jaoks. 2) "SINU VÕIT: X €" - lühike tekstirida toote nime all (vt allpool ".tms-card-campaign-line"/".tms-card-campaign-savings") - JUURPÕHJUS, miks nimi siit ära kolis: kompaktsetel kaartidel (nt Soodustooted karussell, ~300px laiune kaart) ei mahtunud nimi+summa üheskoos ühele reale ilma kas (a) murdumiseta kaheks reaks (ebaühtlased kaardid) või (b) rahasumma enda ellipsis-lõikumiseta (eksitav - summat ei tohi kunagi poolikult näidata). Nüüd on real ainult summa, millel on terve rea laius enda käsutuses. */ .tms-card-media .tms-card-campaign-badge { position: absolute; top: var(--tms-space-3); left: var(--tms-space-3); right: auto; z-index: 2; display: inline-block; max-width: calc(100% - 2 * var(--tms-space-3)); padding: 4px 9px; border-radius: 999px; background: #123F6E; color: #fff; font-family: var(--tms-font-body); font-weight: 700; letter-spacing: .01em; font-size: .66rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--tms-shadow-md); } /* Negatiivne margin (18.09.2026, kliendi soov: pealkirja ja "Sinu võit" vahel jätkuvalt liiga palju ruumi, ka pärast "margin:0" katset) - ".tms-card-body" ühtne "gap:6px" rida-vahe on SELLE rea jaoks endiselt liiga lai, kuna "Sinu võit" on visuaalselt pealkirja PIKENDUS/alltekst, mitte omaette lõik. Negatiivne margin mõlemal pool kahandab efektiivset vahet ~6px pealt ~2px peale (gap - 4px). */ .tms-card-campaign-line { margin: -4px 0; } .tms-card-campaign-savings { display: block; color: var(--tms-ink-soft, #5a5f63); font-weight: 600; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ========================================================================== SIGNATUURELEMENT: mõõdulindi jaotusjoon ========================================================================== */ .tms-tick-rule { position: relative; height: 1px; background: var(--tms-border); margin: var(--tms-space-6) 0; overflow: visible; } .tms-tick-rule::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 9px; background-image: repeating-linear-gradient(to right, var(--tms-ink) 0 1px, transparent 1px 8px), repeating-linear-gradient(to right, var(--tms-ink) 0 1.5px, transparent 1.5px 40px); background-size: 100% 5px, 100% 9px; background-position: left top, left top; background-repeat: repeat-x; opacity: .28; } .tms-tick-rule.is-loading::before { animation: tms-tick-scroll 1.1s linear infinite; opacity: .55; } @keyframes tms-tick-scroll { from { background-position: 0 top, 0 top; } to { background-position: -40px top, -40px top; } } /* Laadimisolek üldiselt */ .tms-is-loading { position: relative; } .tms-is-loading > * { opacity: .45; pointer-events: none; transition: opacity .15s ease; } .tms-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .tms-reset * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== DIVI SISU/KÜLGRIBA ERALDUSJOON Divi joonistab #main-content .container::before kaudu õhukese vertikaalse eraldusjoone sisu ja külgriba vahele - see ilmub OLENEMATA sellest, kas külgriba ise nähtav on (meie varasem #sidebar{display:none} ei mõjuta seda pseudo-elementi, kuna see on eraldi CSS-reegel). Eemaldame selle kõigil neljal pluginavaatel, mitte ainult poevaates, et sama probleem ei koriks üles tootevaates/ostukorvis/checkout'is niipea, kui neilgi külgriba samamoodi peidetakse. NB: pole .tms-reset konteineri sees, kuna #main-content on väljaspool meie plugina enda markup'i (Divi teema struktuur). ========================================================================== */ body.tms-scope-shop #main-content .container::before, body.tms-scope-product #main-content .container::before, body.tms-scope-cart #main-content .container::before, body.tms-scope-checkout #main-content .container::before, body.tms-scope-tooted #main-content .container::before { content: none !important; display: none !important; } /* ========================================================================== DIVI ENDA .container LAIUSPIIRANG NB: Divi kasutab laiuspiiranguks klassi .container (Divi teema enda, nt Theme Customizer "Website Content Width" seadest) - see on TEISTSUGUNE klass kui meie enda .tms-container (mis on juba laiuspiiranguta poevaates, vt tms-shop.css). Varasem "eemalda laiuspiirang" parandus tabas kogemata ainult meie enda klassi, mitte Divi oma - seetõttu jäi leht ikka kitsaks. See reegel tabab õiget elementi. KAKS ERINEVAT STRATEEGIAT: - Pood/Toode: meie KLASSIKALISED mallid (archive-product.php, single-product.php) sisaldavad juba oma .tms-container wrapperit, seega eemaldame Divi laiuse TÄIELIKULT (muidu topelt piirang). - Ostukorv/Kassa: need lehed on WooCommerce BLOCKS (vt tms-checkout.css/ tms-cart.css kommentaare) - meie klassikalised mallid ei renderdu seal kunagi. Kui Divi konteineri laius täielikult eemaldada, jääb KÕIK selle konteineri sisu (sh lehe PEALKIRI, mis on Blocks-elemendist eraldi vend-element) ilma piiranguta - täpselt see, mida klient 2026-08-05 nägi ("Ostukorv" pealkiri lehe servas, sisu all korrektne). Seetõttu anname SIIN laiuse Divi konteinerile ENDALE (mitte "none"), et KÕIK selle sees olevad elemendid (pealkiri + Blocks-plokk) pärivad sama piirangu automaatselt, olenemata nende endi CSS-klassidest. ========================================================================== */ body.tms-scope-shop #main-content .container, body.tms-scope-product #main-content .container, body.tms-scope-tooted #main-content .container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; /* Divi enda "body:not(.et-tb):not(.et-tb-has-header) #main-content .container{padding-top:58px}" reegel (teema style.min.css) jätab siia suure tühja ala breadcrumbi kohale - vt tms-shop.css failis varem olnud katse seda parandada (.tms-shop-page selektoriga, mis osutus 15.09.2026 vigaseks/mittetoimivaks valeks suunaks - vt sealt eemaldatud reegli juures olevat kommentaari). SIIN, õige body-klassi peal, reegel tegelikult toimib. */ padding-top: 0 !important; } body.tms-scope-cart #main-content .container, body.tms-scope-checkout #main-content .container { max-width: var(--tms-container, 1240px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--tms-space-5, 24px) !important; padding-right: var(--tms-space-5, 24px) !important; /* Sama Divi 58px padding-top juurpõhjus, mis pood/toode vaates (vt ülal olevat kommentaari) - kliendi teatatud viga 15.09.2026: "ostukorvi ja päise vahel liiga palju ruumi". Pole viewport- piiratud (Divi reegel ise pole ka), seega parandab nii mobiili kui lauaarvuti korraga. Sama reegliplokk kehtib checkout'ile automaatselt (jagatud selektor) - checkout'il on tõenäoliselt sama viga, kontrolli visuaalselt. */ padding-top: 0 !important; box-sizing: border-box !important; } @media (max-width: 640px) { body.tms-scope-cart #main-content .container, body.tms-scope-checkout #main-content .container { padding-left: var(--tms-space-4, 16px) !important; padding-right: var(--tms-space-4, 16px) !important; } } /* Divi külgriba varuvõrk Ostukorvi/Kassa jaoks (sama loogika, mis Poe vaatel juba oli, vt tms-shop.css) - ilma selleta jääb #main-content Divi enda külgriba tõttu KITSAMAKS kui 1240px, mistõttu ülemine max-width reegel ei jõua kunagi tegelikult 1240px-ni (saadaolev ruum on väiksem). Avastatud 2026-08-05 - Kassa oli visuaalselt ainult ~780px lai, mitte 1240px, kuigi kõik laiuse-CSS näis õige. */ body.tms-scope-cart #sidebar, body.tms-scope-checkout #sidebar, body.tms-scope-tooted #sidebar { display: none !important; } body.tms-scope-cart #left-area, body.tms-scope-checkout #left-area, body.tms-scope-tooted #left-area { width: 100% !important; float: none !important; } /* "Tooted" leht (v1.80.0, 15.09.2026, kliendi teatatud viga: "külgbaan on ikka alles") - see on PÄRIS WordPress Page (mitte WooCommerce vaade), mis läbib Divi teema page.php malli. Selles mallis kuvatakse #sidebar TINGIMUSTETA iga kord, kui lehte pole Divi enda visuaalse builderiga üles ehitatud (meie oma [tms_categories_page] lühikood ei loe "builderiga ehitatuks") - ülalolevad #sidebar/#left-area reeglid peidavad selle ära, aga Divi enda lehepealkiri (

, mida page.php SAMAS tingimuses alati väljastab) jääks ilma alloleva reeglita duubeldama meie enda lühikoodi kujundatud pealkirja ("Kõik tooted") - peidame Divi natiivse pealkirja siin. */ body.tms-scope-tooted .entry-title.main_title { display: none !important; } /* ========================================================================== KATEGOORIAPUU (jagatud poe- ja tootevaate vahel) Navigatsioonilingid (mitte AJAX-linnukesed) - igal kategoorial on oma püsiv URL. is-ancestor = haru, mille sees hetkel viibitakse (avatud). is-current = täpne kategooria/alamkategooria, kus kasutaja on ("sa oled siin"). ========================================================================== */ .tms-category-list { display: flex; flex-direction: column; gap: 2px; max-height: min(560px, 65vh); overflow-y: auto; padding-right: 14px; margin-right: -14px; scrollbar-width: thin; scrollbar-color: var(--tms-border-strong) transparent; } .tms-category-list::-webkit-scrollbar { width: 6px; } .tms-category-list::-webkit-scrollbar-track { background: transparent; } .tms-category-list::-webkit-scrollbar-thumb { background: var(--tms-border-strong); border-radius: 999px; } /* Divi mõnel juhul lisab list-item'idele oma sidekriipsu-taolise ::marker'i, isegi kui list-style on eemaldatud - nullime selle otse. */ .tms-category-list li::marker, .tms-category-sublist li::marker { content: none !important; } .tms-category-link { display: flex; align-items: flex-start; gap: var(--tms-space-2); padding: 8px 10px; border-radius: var(--tms-radius-sm); color: var(--tms-ink); font-size: .88rem; transition: background-color .12s ease, color .12s ease; } .tms-category-link:hover { background: var(--tms-accent-soft) !important; color: var(--tms-accent-ink); } /* 15.09.2026: pikk kategoorianimi murdis varem "..."-ga ühele reale (text-overflow:ellipsis) - kasutaja soovis, et see MURRAKS kahele reale selle asemel. -webkit-line-clamp on laialt toetatud (Chrome/Edge/Safari/ Firefox 68+) ka väljaspool -webkit- prefiksiga brausereid tänapäeval; pilt/nool/loendur (flex-shrink:0 mujal) jäävad esimese reaga joondatud, kuna .tms-category-link ise on nüüd align-items:flex-start, mitte center. */ .tms-category-name { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.3; padding-top: 2px; } .tms-category-thumb { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; background: #fff; border: 1px solid var(--tms-border); border-radius: var(--tms-radius-sm); } .tms-category-link.is-current .tms-category-thumb { border-color: rgba(255, 255, 255, .6); } .tms-category-count { color: var(--tms-ink-soft); font-family: var(--tms-font-mono); font-size: .68rem; flex-shrink: 0; background: var(--tms-surface-2); padding: 2px 6px; border-radius: 999px; } .tms-category-link:hover .tms-category-count, .tms-category-link.is-current .tms-category-count { color: inherit; background: rgba(255, 255, 255, .55); } .tms-category-arrow { flex-shrink: 0; color: var(--tms-border-strong); transition: transform .15s ease, color .12s ease; } .tms-category-link:hover .tms-category-arrow { color: var(--tms-accent-ink); transform: translateX(2px); } .tms-category-link.is-ancestor { color: var(--tms-ink); font-weight: 600; } .tms-category-link.is-current { background: var(--tms-accent) !important; color: var(--tms-accent-ink) !important; font-weight: 700; cursor: default; } .tms-category-link.is-current:hover { background: var(--tms-accent) !important; } .tms-category-here { flex-shrink: 0; width: 6px; height: 6px; font-size: 0; border-radius: 50%; background: var(--tms-accent-ink); } .tms-category-sublist { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px !important; padding-left: var(--tms-space-4) !important; } .tms-category-link--child { font-size: .84rem; } /* ========================================================================== TOOTEKAART (jagatud kõigi vaadete vahel) Sama .tms-product-card klass renderdub content-product.php mallist, mida kasutavad NII poe/kategooria tootegrid KUI KA tootevaate "Seotud tooted"/ "Ülesmüük" plokid (WooCommerce'i enda related/upsell mallid kutsuvad sama wc_get_template_part('content','product')). Kui see stiil oleks ainult tms-shop.css failis (mis laadib ainult poe lehel), näeksid seotud tooted tootevaates välja teistsugused/lihtsamad - seetõttu on see siin jagatud kohas. ========================================================================== */ .tms-product-card { background: var(--tms-surface); border: 1px solid var(--tms-border); border-radius: var(--tms-radius-md); display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; position: relative; } .tms-product-card:hover { border-color: var(--tms-border-strong); box-shadow: var(--tms-shadow-md); transform: translateY(-2px); } .tms-product-card > a { display: flex; flex-direction: column; flex: 1; color: inherit; } .tms-card-media { position: relative; aspect-ratio: 1 / 1; max-width: 240px; margin: 0 auto; background: #fff; overflow: hidden; } .tms-card-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--tms-space-4); transition: transform .25s ease; } .tms-product-card:hover .tms-card-media img { transform: scale(1.04); } .tms-card-badge { position: absolute; top: var(--tms-space-3); left: var(--tms-space-3); font-family: var(--tms-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--tms-radius-sm); z-index: 2; } .tms-card-badge-out { background: var(--tms-danger-soft); color: var(--tms-danger); } .tms-card-media span[class*="campaign-badge"] { position: absolute; top: var(--tms-space-3); left: var(--tms-space-3); right: auto; z-index: 2; /* WooCommerce/Divi vaikimisi stiil määrab sellele badge'ile oma tausta- ja tekstivärvi otse (mitte meie --tms-accent muutujaga) - seetõttu jäi see varem oranžiks ka pärast --tms-accent muutmist. !important vajalik, et see üle kirjutada. */ background-color: var(--tms-accent) !important; color: var(--tms-accent-ink) !important; border: none !important; } /* WooCommerce'i vaikimisi "Allahindlus!" tekstisilt EEMALDATUD PILDI PEALT (v1.22.2, täiendatud v1.22.3) - varasem versioon üritas seda väikeseks ümaraks %-sildiks kujundada (vt allolevat ajaloolist kommentaari), aga Divi/teema kirjutas mingil real saidil selle siiski üle laiaks ribaks, mis kattis suure osa tootepildist. v1.22.3-st on element ise EEMALDATUD (remove_action, vt TMS_Plugin::remove_native_sale_flash()) - see display:none reegel jääb siia AINULT teise kaitsekihina (kui remove_action peaks mingil põhjusel mitte rakenduma, nt haagi ajastuse tõttu mõne teise plugina koosmõjul), mitte enam esmase peitmisvõttena. Allahindluse protsent kuvatakse selle asemel meie enda OMA elemendina (klass "tms-discount-badge", vt allpool - HINNA real, alates v1.71.0) - see ei ole WooCommerce'i natiivne ".onsale" element, seega ei saa Divi sellele oma sisseehitatud stiili rakendada (vt tms_render_discount_badge() class-tms-product-helpers.php failis). NOOM-woo-integration'i kampaaniasildid (span[class*="campaign-badge"], üleval PAREMAL), mis näitavad konkreetse kampaania NIME, jäävad ENDISELT PUUTUMATA - need annavad rohkem infot kui üldine "on soodus" protsent ja väärivad eraldi loetavat teksti pildi peal. AJALUGU (enne v1.22.2): Divi/WooCommerce määras .onsale suurusele/ paddingile/fondile oma reegleid otse; siin oli varem katse seda väikeseks ümmarguseks %-sildiks kujundada (position:absolute, 26px kõrgune pill jne, kõik !important) - jäeti alles ainult ajaloo kontekstiks. */ .tms-card-media .onsale { display: none !important; } /* "-X%" silt (klass "tms-discount-badge", vt tms_render_discount_badge() class-tms-product-helpers.php failis) - HINNA REAL, hinna KÕRVAL (v1.71.0, 15.09.2026 - vt content-product.php ".tms-card-price-row" pikemat selgitust). VAREM (v1.37.21-v1.70.0) oli see pildi ÜLEVAL VASAKUS nurgas, oma ".tms-card-badges-tl" reas - kolis ära, kuna kampaaniasilt (kui aktiivne, pildi üleval PAREMAL, vt ".tms-card-campaign-badge") + "Lisa võrdlusesse" nupp + "-X%" silt samal ~220px pildil nägi klindi hinnangul liiga kirju välja ("selle -% saab panna kuhugi paremasse kohta"). Protsent kuulub loogiliselt hinna juurde niikuinii - see näitab, kui palju odavam UUS hind on VÕRRELDES kriipsutatud VANA hinnaga samal real. ".tms-card- price-row" ise on "flex-wrap:wrap" (vt allpool) - kui hind (mis ISE kunagi ei murdu, vt ".price" "white-space:nowrap") + silt kitsal kaardil siiski üheskoos ei mahu, langeb AINULT silt oma reale, mitte kunagi hind. */ .tms-discount-badge { display: inline-flex; align-items: center; gap: 4px; /* Joondub TÄPSELT ".tms-card-body" vasaku servaga (mitte ainult ".tms-card-price-row" vasaku servaga, mis on padding'u võrra sissepoole) - "order:-1" toob sildi rea ette (DOM-i ei puutu, hind jääb ikka esimesena märgistuses) ja negatiivne margin-left võrdub täpselt ".tms-card-body" külgpaddinguga, et silt ulatuks selle padding'u alt välja kuni kaardi servani. Kuju (18.09.2026, kliendi soov: "kinnitatud vasakule poole tootekasti külge, algab servast ja parem ots on ümar") - VASAK nurk kandiline, kuna see on külg, mis kaardi/kasti servaga TÄPSELT kohakuti algab (ümar nurk ei saaks servaga "tasa" alata); PAREM ots (hinnateksti poole, silt "vaba" otsana) on ümar. NB: see on TEADLIKULT vastupidine "Soodustooted" karusselli sildile (vt msp-frontend.css ".tms-discount-badge") - seal on silt ise ABSOLUUTPOSITSIONEERITUD ja ULATUB kaardi servast ÜLE (-9px, 3D-efekt), mistõttu seal on ümar just SEE külg, mis kaardi äärest "üle ripub". Siin, hinnarea sees, silt EI ulatu kuskilt üle - see LIHTSALT ALGAB täpselt kasti servast, seega loogika on teine. */ order: -1; margin-left: calc(-1 * var(--tms-space-4)); flex-shrink: 0; background: var(--tms-accent); color: var(--tms-accent-ink); font-family: var(--tms-font-display); font-size: .78rem; font-weight: 800; line-height: 1; padding: 3px 10px 3px 10px; border-radius: 0 999px 999px 0; } .tms-discount-icon { flex-shrink: 0; } .tms-card-body { padding: 0 var(--tms-space-4) var(--tms-space-4); display: flex; flex-direction: column; gap: 6px; flex: 1; } .tms-card-brand { text-transform: uppercase; } /* Pikk kirjeldus tootekaardil (16.10.2026) - vt content-product.php ".tms-card-desc" juures pikemat selgitust. 2 reaga piiratud, et kaardid ruudustikus ei venitaks üksteisest sõltumatult eri kõrgusteks. */ .tms-card-desc { margin: 0; color: var(--tms-ink-soft); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bränd + "Lisa võrdlusesse" samal real (18.09.2026, kliendi soov "kompaktsemaks") - AINULT poe/kategooria ruudustikus, vt content-product.php ".tms-card-brand-row" kutse juures pikemat selgitust. Nupp oli varem "position:absolute" pildi peal (32px, valge ring, vari - vt allpool ".tms-card-media .mpc-compare-btn-- card", mis jääb endiselt kehtima karussellidele/Seotud toodetele); siin on ta lihtne dokumendivoogu kuuluv element, väiksem (22px), ilma varjuta (valgel taustal, mitte pildil). */ .tms-card-brand-row { display: flex; align-items: center; gap: var(--tms-space-2); min-height: 22px; } .tms-card-brand-row .mpc-compare-btn--card { position: relative; margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--tms-border); background: var(--tms-surface); color: var(--tms-info); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .tms-card-brand-row .mpc-compare-btn--card:hover, .tms-card-brand-row .mpc-compare-btn--card:focus, .tms-card-brand-row .mpc-compare-btn--card[aria-pressed='true'] { background: var(--tms-info); border-color: var(--tms-info); color: #fff; } .tms-card-brand-row .mpc-compare-btn--card .mpc-icon { width: 12px; height: 12px; pointer-events: none; } .tms-card-brand-row .mpc-compare-btn--card .mpc-compare-label { display: none; } /* Hõljutusvihje PILDI kontekstis ilmub ÜLESPOOLE (nupp on seal kaardi allservas) - siin, ülal kaardil, oleks see aknast väljas. Näitame selle asemel ALLAPOOLE, nool suunaga üles. */ .tms-card-brand-row .tms-compare-tooltip { top: calc(100% + 8px); bottom: auto; } .tms-card-brand-row .tms-compare-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tms-ink); } .tms-card-body .woocommerce-loop-product__title { font-family: var(--tms-font-body); font-weight: 600; font-size: .96rem; line-height: 1.35; color: var(--tms-ink); margin: 0 0 2px; /* JUURMUUTUS (v1.37.26-st): "-webkit-line-clamp"/"overflow:hidden" EEMALDATUD - need lõikasid pikemad pealkirjad "..." taha ära (klient andis tagasisidet: "pealkiri ei tohi kunagi ära lõikuda ega millegi taha jääda"). Varasem v1.37.23 lisas 3-realise klambri + min-height:4.05em, et vältida erinevate pealkirja- pikkuste tõttu ebaühtlast "Lisa ostukorvi" nupu kõrgust samas reas - see lahendas nupu-kõrguse probleemi, aga tekitas UUE probleemi (teksti kadumine). ÕIGE lahendus (mida mate-new-products plugin oli juba aastaid kasutanud, vt selle plugina mnp-carousel.js equalizeTitleHeights()): JS mõõdab iga pealkirja TEGELIKU (klambrita) kõrguse ja annab kõige pikema kõrguse min-height'ina kõigile sama rea pealkirjadele - nii EI LÕIGATA MITTE KUNAGI teksti ära, aga "Lisa ostukorvi" nupp jääb siiski ühtlasele kõrgusele. Sama JS-loogika on nüüd lisatud ka tooriistakeskus- modern-shop plugina enda tms-shop.js failile (pood/kategooria grid) ja mate-sale-products plugina msp-carousel.js failile ("Soodustooted") - min-height ise seatakse JS-iga INLINE STIILINA, mistõttu see CSS-i baasreegel enam min-height't ei määra (vt ka ".related.products .woocommerce-loop-product__title" allpool - see on TEADLIKULT erinev, oma "line-clamp:2 !important" süsteem 360px fikseeritud kaardikõrguse jaoks, mida see muudatus ei puuduta). */ } .tms-card-price-row { display: flex; align-items: baseline; gap: var(--tms-space-2); /* "wrap" (v1.71.0-st, varem "nowrap") - AINULT selleks, et "-X%" silt (vt ".tms-discount-badge" allpool, "margin-left:auto" lükkab selle rea paremasse otsa) saaks väga kitsal kaardil vajadusel OMA reale langeda, kui hind + silt üheskoos ei mahu. HIND ISE (".price" allpool) EI MURDU SELLEST HOOLIMATA KUNAGI - sellel on oma "white-space:nowrap", mis on siin endiselt kliendi selgesõnaline nõue (vt algset kommentaari ajaloos): tavahind ja soodushind peavad ALATI olema samal real, ainult SILT võib vajadusel eraldi reale minna. */ flex-wrap: wrap; row-gap: 2px; margin-top: 2px; /* Reserveerib ÜHE rea kõrguse - enamikul kaartidel mahub hind + silt üheskoos ühele reale (vt ülal), seega see jääb tavajuhul kehtima; harvem, kitsam väljundkontekst (silt langeb 2. reale) kasvatab rea kõrgust loomulikult sisu järgi, "min-height" ei takista seda. */ min-height: 1.7rem; } .tms-card-price-row .price { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--tms-font-display); font-weight: 700; font-size: 1.15rem; color: var(--tms-ink); /* Ei tohi murduda kaheks reaks (vt ülal ".tms-card-price-row" kommentaari) - WooCommerce renderdab ja ühe sees tavalise tekstina, mis muidu murduks nagu iga muu tekst, kui ruumi ei jätku. Kirjasuurused (siin ja allpool ".price del") on ühtlasi väiksemaks tehtud, et reaalsed hinnad (nt "1 599,00 € 3 299,00 €") mahuksid ka kitsamatel kaartidel (karussellis nt 6 nähtavat) ühele reale ilma üle kaardi serva ulatumata. */ white-space: nowrap; } .tms-card-price-row .price del { font-family: var(--tms-font-body); font-weight: 400; font-size: .74rem; color: var(--tms-ink-soft); opacity: .8; margin-right: 0; } .tms-card-price-row .price ins { text-decoration: none; color: var(--tms-danger); } .tms-card-price-row .star-rating { font-size: .8rem; flex-shrink: 0; } .tms-savings-tag { /* Nurgasildina pildi peal, ÜLEVAL PAREMAL - sama väljanägemine, mis Soodustooted plugin (mate-sale-products) juba oma msp-frontend.css failis ".msp-sale-products ... .tms-savings-tag" reegliga ainult OMA sektsiooni jaoks rakendas (vt selle plugina README/CSS-i pikema ajaloo jaoks - klient soovis sildi "päris üleval nurgas", mitte hinna all tekstina). v1.37.21-st on see väljanägemine ÜHTNE KÕIKJAL (pood/kategooria, Uued tooted, Soodustooted), mitte enam ainult Soodustooted-spetsiifiline - Soodustooted plugina oma scoped reegel jääb endiselt kehtima, aga renderdab nüüd IDENTSE tulemuse, mida see baasreegel niigi juba annab. ASUKOHT (v1.37.22-st): element renderdub NÜÜD ".tms-card-media" (pildi konteineri) SEES, MITTE enam ".tms-card-body" tekstiosas - vt content-product.php. JUURPÕHJUS: ".tms-card-media" on piiratud laiusega (max-width:240px, margin:0 auto) ja jääb tsentreerituks, kui kaart ise on laiem - kui silt oli varem positsioneeritud ".tms-product-card" (KOGU kaardi, mitte pildi) suhtes, nihkus see "Uued tooted" ja "Soodustooted" sektsioonides ERINEVALT, sõltuvalt sellest, kui palju kummagi kaardi laius 240px pildi piirist erines. Nüüd on positsioneerimise kontekst ".tms-card-media" ise (position:relative, vt ülal) - sama muster, mida ".tms-card-badges-tl" (allahindluse silt/tarneikoon) juba kasutab - seega joondub silt ALATI täpselt pildi paremasse ülanurka, sõltumata kaardi laiusest. */ /* ASUKOHT: üleval paremal. NB — seda klassi kasutab ka TOOTELEHT (.tms-pd-savings), mis positsiooni EI lähtesta, seega iga muudatus siin mõjutab MÕLEMAT vaadet. Tootekaardilt on silt 11.09.2026 eemaldatud (vt content-product.php), seega siin kehtib see praktikas ainult tootelehel. */ position: absolute; top: var(--tms-space-3); right: var(--tms-space-3); left: auto; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 2 * var(--tms-space-3)); margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--tms-accent); color: #1C1F22; font-family: var(--tms-font-body); font-size: .7rem; font-weight: 700; line-height: 1.3; box-shadow: var(--tms-shadow-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "Lisa ostukorvi" tootekaardil - kaardi PEAMINE tegevusnupp (v1.20.0-st, kui "Võrdle" nupp kaardilt eemaldati; v1.22.0-st on "Võrdle"/"Lisa võrdlusesse" tagasi, aga nüüd väikese ikoon-nupuna PILDI PEAL, mitte enam täispika tekstisildiga nupuna "Lisa ostukorvi" nupu kõrval - vt .tms-card-media .mpc-compare-btn--card allpool). "Lisa ostukorvi" jääb seetõttu endiselt kaardi ainsaks TEKSTIGA tegevusnupuks, kujundus on kooskõlas tootevaate enda "Lisa ostukorvi" nupuga (var(--tms-accent) - poe peamine CTA värv, vt tms-product.css .tms-pd-summary .single_add_to_cart_button). Nupp venitatud kaardi täislaiuseks (display:flex, mitte inline-flex) ja ikoon lisatud (::before, CSS mask, et värv käiks alati currentColor'iga kaasas ilma PHP/markup muudatuseta ega mõjutaks olemasolevat AJAX-lisamise JS-i, mis valib nupu ".add_to_cart_button" klassi järgi). JUURPÕHJUS (v1.22.4): klient teatas, et nupp on nähtamatu POE/ KATEGOORIA vaates, aga töötab õigesti Soodustoodete/Uute Toodete sektsioonides. Leidsime põhjuse: archive-product.php (poe/kategooria mall) mähib kogu sisu ".tms-reset" konteinerisse (Divi kaitsekiht), ja SEE konteiner sisaldab reeglit ".tms-reset a { background: none !important; border: none !important; }" (vt ülal real ~95) - kuna see nupp ON -element (mitte