/* Theme Name: TechSpares Theme URI: https://techspares.eu Description: techspares.eu vaikinė tema. Paletė iš prekės ženklo (varis / plienas), tipografija iš temoje jau supakuotų šriftų — nulis išorinių priklausomybių. Author: JESPE, MB Template: twentytwentyfive Version: 1.6 Text Domain: techspares */ /* ═══════════════════════════════════════════════════════════════════════════ PRINCIPAS (detaline-dizainas §0): sausumas yra HIERARCHIJOS trūkumas. Šis failas nieko nedažo „kad būtų gražiau" — jis perskirsto SVORĮ. Prekės puslapio jausmo kreivė: 1 atpažinimas OEM kodas — jo kodas, dideliu 2 abejonė atitikmenys ir mašinų sąrašas 3 tyla pauzė 4 ⭐ VIRŠŪNĖ likutis ir išsiuntimas — vienintelis elementas, atsakantis į kliento SITUACIJĄ (mašina stovi). Visa kita statiška. 5 pasitikėjimas gamintojas, adresas, matmenys 6 ryžtas vienas mygtukas ═══════════════════════════════════════════════════════════════════════════ */ :root { --ts-tight: .5rem; --ts-close: 1rem; --ts-gap: 2rem; --ts-pause: 4.5rem; /* ⭐ §4: pauzė PRIEŠ sekciją, ne po antrašte */ --ts-shadow: 0 1px 2px rgb(26 23 20 / .05), 0 8px 24px -12px rgb(26 23 20 / .18); } /* ── Kodai yra prekės tapatybė ⇒ jie skaitomi kaip duomenys, ne kaip tekstas. §10 draudžia monospace kaip „techniškumo kostiumą" ten, kur nėra duomenų. Čia duomenys YRA — ir tai vienintelė vieta, kur šis šriftas naudojamas. ── */ .woocommerce-product-details__short-description strong, .ts-oemline code, .sku, .ts-code { font-family: var(--wp--preset--font-family--code); font-variant-ligatures: none; letter-spacing: -.01em; } /* ── 1 ATPAŽINIMAS ─────────────────────────────────────────────────────── */ .single-product .product_title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); letter-spacing: -.025em; /* §5: didėjant dydžiui tarpai mažėja */ line-height: 1.02; text-wrap: balance; margin-block-end: var(--ts-close); } /* ── kaina: antra pagal svorį, ne pirma ────────────────────────────────── */ .wp-block-woocommerce-product-price, .wc-block-components-product-price, .single-product .summary > .price { font-size: 1.5rem; font-weight: 600; color: var(--wp--preset--color--contrast); margin-block-end: var(--ts-close); } .wp-block-woocommerce-product-price .woocommerce-Price-amount, .single-product .summary > .price .woocommerce-Price-amount { font-variant-numeric: tabular-nums; } /* ── 4 ⭐ VIRŠŪNĖ: likutis ir išsiuntimas ────────────────────────────────── Buvo: mažiausias tekstas puslapyje. §3 sako, kad viršūnė gauna daugiausiai vietos IR TYLĄ PRIEŠ SAVE — todėl `margin-block-start` didesnis už bet kurį kitą tarpą summary bloke. */ p.stock.in-stock, p.stock.out-of-stock { display: flex; align-items: baseline; gap: .55rem; margin-block: var(--ts-pause) var(--ts-close); padding: .9rem 1.1rem; background: var(--wp--preset--color--surface); border-left: 3px solid var(--wp--preset--color--accent); box-shadow: var(--ts-shadow); /* §7: poslinkis + suliejimas, ne oreolas */ font-size: 1.15rem; font-weight: 600; color: var(--wp--preset--color--contrast); } p.stock.out-of-stock { border-left-color: var(--wp--preset--color--steel); box-shadow: none; } /* ── 6 RYŽTAS: vienas mygtukas, be konkurentų ──────────────────────────── */ form.cart, .wp-block-add-to-cart-form { margin-block: var(--ts-close) var(--ts-gap); } .single_add_to_cart_button, .wp-block-button__link[name="add-to-cart"] { padding: .85em 2em; font-size: 1.05rem; box-shadow: var(--ts-shadow); } /* ── 5 PASITIKĖJIMAS: tai, ko apgavikas nesuklastos, turi BŪTI MATOMA ────── Atitikmenų blokas buvo suskleistas ir pilkas — §3: geriausias turinys neina į paraštę. */ details.ts-codes { border: 1px solid var(--wp--preset--color--rule); border-left: 3px solid var(--wp--preset--color--steel); background: var(--wp--preset--color--surface); padding: 1rem 1.2rem; margin-block: var(--ts-gap); } /* ── 2 ABEJONĖ: pritaikymo lentelė — didžiausias daiktas puslapyje. Jos nepjaunam (tai įrodymas, kad dalis tinka), bet nuimam VIZUALINĮ SVORĮ: lentelė nustoja konkuruoti su viršūne. */ .single-product .woocommerce-Tabs-panel table, .single-product .wp-block-table table { font-size: .875rem; border-collapse: collapse; width: 100%; } .single-product .woocommerce-Tabs-panel table th { font-weight: 600; text-align: start; color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; border-block-end: 1px solid var(--wp--preset--color--rule); padding: .5rem .6rem; } .single-product .woocommerce-Tabs-panel table td { padding: .45rem .6rem; border-block-end: 1px solid var(--wp--preset--color--rule); font-variant-numeric: tabular-nums; } .single-product .woocommerce-Tabs-panel table tr:nth-child(even) td { background: color-mix(in srgb, var(--wp--preset--color--rule) 22%, transparent); } /* ⚠️ Plati lentelė slenka SAVYJE — puslapio korpusas horizontaliai neslenka. */ .single-product .woocommerce-Tabs-panel { overflow-x: auto; } /* ── §4 RITMAS: virš antraštės daugiau erdvės nei po ja ──────────────────── Padaryta atvirkščiai, puslapis skaitomas kaip SĄRAŠAS — dažniausia sausumo priežastis. */ .single-product .woocommerce-Tabs-panel h2, .single-product .woocommerce-Tabs-panel h3 { margin-block: var(--ts-pause) var(--ts-close); font-size: 1.3rem; } .single-product .woocommerce-Tabs-panel > :first-child { margin-block-start: 0; } /* ── tab'ų juosta: tyliau, nes tai navigacija, ne turinys ─────────────────── */ .woocommerce-tabs ul.tabs { display: flex; gap: var(--ts-gap); list-style: none; margin: var(--ts-pause) 0 0; padding: 0 0 .1rem; border-block-end: 1px solid var(--wp--preset--color--rule); flex-wrap: wrap; } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs li a { display: block; padding: .6rem 0; text-decoration: none; color: var(--wp--preset--color--muted); font-weight: 500; border-block-end: 2px solid transparent; } .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--contrast); border-block-end-color: var(--wp--preset--color--accent); } /* ── duomenų kortelė: §7 persidengimo vietoj šešėlio nesinaudojam, bet briaunos šviesa parduoda pakeltą paviršių pigiau nei bet koks suliejimas ── */ .single-product .woocommerce-product-gallery__image img { border: 1px solid var(--wp--preset--color--rule); border-radius: 4px; box-shadow: var(--ts-shadow); background: var(--wp--preset--color--surface); } /* ── §11 telefonas PIRMA, ne „taip pat veikia" ────────────────────────────── */ @media (max-width: 47.99rem) { :root { --ts-pause: 2.75rem; --ts-gap: 1.5rem; } .single-product .product_title { font-size: clamp(1.6rem, 1.1rem + 3vw, 2.1rem); } p.stock.in-stock, p.stock.out-of-stock { font-size: 1.05rem; padding: .8rem .9rem; } .woocommerce-tabs ul.tabs { gap: 1.1rem; font-size: .95rem; } } /* ═══ PATAISYMAI PO GYVO ATVAIZDAVIMO (2026-08-28) ══════════════════════════ ⛔ Pirmoji versija taikėsi į `.single-product .summary` — KLASIKINĖS temos apvalkalą. Blokinėje temoje jo NĖRA, todėl viršūnės stilius nepritapo. Išmatuota: likutis atiduodamas kaip `

`. Tai ta pati klaida kaip T026/T027 — ir apie ją buvau perspėjęs kitą langą. */ /* ── ⭐ Geriausias turinys neina į paraštę (§3). `OEM part number equivalent` yra vienas iš tų dalykų, kurių apgavikas nesuklastos — o jis buvo suskleistas. Atidarom pagal nutylėjimą. ── */ details.ts-codes { } details.ts-codes > summary { cursor: pointer; list-style: none; display: block; } details.ts-codes > summary::-webkit-details-marker { display: none; } details.ts-codes > summary h3 { margin-block: 0 var(--ts-tight); } details.ts-codes p { margin-block: 0 var(--ts-tight); } details.ts-codes code, details.ts-codes strong { font-family: var(--wp--preset--font-family--code); font-size: .92em; } /* ── Pritaikymo grupės: plikas ▶ be teksto atrodo kaip gedimas ── */ details.ts-fitgroup > summary { cursor: pointer; padding: .5rem 0; font-weight: 600; color: var(--wp--preset--color--accent); } details.ts-fitgroup > summary::marker { color: var(--wp--preset--color--steel); } details.ts-fitgroup[open] > summary { margin-block-end: var(--ts-close); } /* ── Techninės specifikacijos lentelė aprašyme (ne tab panelėje) ── */ .ts-tablewrap { overflow-x: auto; margin-block: var(--ts-close) var(--ts-gap); } .ts-tablewrap table { border-collapse: collapse; width: 100%; font-size: .875rem; } .ts-tablewrap th { font-weight: 600; text-align: start; color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; padding: .5rem .6rem; border-block-end: 1px solid var(--wp--preset--color--rule); white-space: nowrap; } .ts-tablewrap td { padding: .45rem .6rem; border-block-end: 1px solid var(--wp--preset--color--rule); font-variant-numeric: tabular-nums; } .ts-tablewrap tr:nth-child(even) td { background: color-mix(in srgb, var(--wp--preset--color--rule) 22%, transparent); } /* ── §4 ritmas aprašymo antraštėms (jos ne tab panelėje, o post-content) ── */ .wp-block-post-content h3 { margin-block: var(--ts-pause) var(--ts-close); } .wp-block-post-content > :first-child { margin-block-start: 0; } /* ── §8: VIENAS kampų apvalinimo mastelis visam puslapiui ────────────────── Paieškos mygtukas buvo apskritimas, o `Add to cart` — 4 px. Du skirtingi masteliai viename ekrane skaitomi kaip du skirtingi dizainai. ⚠️ Ne „sumažinam, kad būtų gražiau" — suvienodinam su tuo, kas jau nustatyta `theme.json` mygtuko elemente, kad reikšmė gyventų vienoje vietoje. */ .wp-block-search__button, .wp-block-search .wp-block-search__button { border-radius: 4px; aspect-ratio: auto; padding-inline: 1.1rem; } .wp-block-search__inside-wrapper { border-radius: 4px; } .wp-block-search__input { border-radius: 4px 0 0 4px; } /* ═══ PRITAIKYMŲ LENTELĖ — 2026-08-28 ═══════════════════════════════════════ IŠMATUOTA prieš rašant: 117 prekių, ts-tablewrap 117/117, INLINE stilių 0 (⇒ CSS suveiks — T027 pamoka patikrinta, ne prielaida). Eilučių: mediana 45 · vidurkis 120 · MAX 2105 · 70 % prekių virš 12. ⛔ Todėl tai ne „truputį per aukšta lentelė". Prekės puslapis dažnai YRA lentelė, o viršūnė (likutis) skęsta virš jos. ⭐ Lentelės NEPJAUNAM — ji yra įrodymas, kad dalis tinka. Nuimam tik VERTIKALŲ SVORĮ: aukštis apribojamas, slinkimas lieka VIDUJE, ir riba matoma, kad niekas nepagalvotų, jog sąrašas baigėsi. */ .ts-tablewrap { max-height: 26rem; overflow: auto; overscroll-behavior: contain; /* ⚠️ kad telefone nepagautų puslapio slinkimo */ border: 1px solid var(--wp--preset--color--rule); border-radius: 4px; position: relative; } /* antraštė lieka matoma slenkant — be jos ilgas sąrašas praranda prasmę */ .ts-tablewrap thead th { position: sticky; top: 0; z-index: 1; background: var(--wp--preset--color--base); box-shadow: 0 1px 0 var(--wp--preset--color--rule); } .ts-tablewrap table { margin: 0; } /* §11 telefonas pirma: 26rem ant 390 px ekrano yra pusė matomo lauko */ @media (max-width: 47.99rem) { .ts-tablewrap { max-height: 17rem; } } /* Gamintojų grupės (24 prekės) — suskleistos, bet summary turi atrodyti kaip mygtukas, o ne kaip sulūžęs tekstas su pliku ▶ */ details.ts-fitgroup { border: 1px solid var(--wp--preset--color--rule); border-radius: 4px; margin-block: var(--ts-tight); padding: 0 .9rem; } details.ts-fitgroup > summary { padding: .7rem 0; } details.ts-fitgroup[open] { padding-block-end: .9rem; } /* ═══ TITULINIS — paieška kaip VIRŠŪNĖ (T046) ═══════════════════════════════ §3: viršūnė gauna daugiausiai vietos IR TYLĄ. Todėl paieškos blokas čia didesnis nei bet kur kitur, o po juo — pauzė, ne kita sekcija. §8: faktai rašomi TEKSTU erdvėje, ne kortelių tinkleliu. Vienodų kortelių tinklelis būtų tiksliai tas požymis, kurio atsisakėm nuimdami [products]. */ .home main > .wp-block-heading:first-of-type, .page-id-19 h1.wp-block-heading, .page-id-17 h1.wp-block-heading { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); letter-spacing: -.03em; line-height: 1; margin-block: var(--ts-gap) var(--ts-tight); text-wrap: balance; } .ts-sub { color: var(--wp--preset--color--muted); font-size: 1.05rem; max-width: 34em; /* §5: 45–75 simbolių */ margin-block-end: var(--ts-gap); } /* ── (v1.4 paieška tituliniame — PAŠALINTA v1.5: dubliavo antraštės paiešką) ── */ .page-id-19 main .wp-block-search, .page-id-17 main .wp-block-search { max-width: 44rem; margin-block-end: var(--ts-pause); } .page-id-19 main .wp-block-search__input, .page-id-17 main .wp-block-search__input { font-size: 1.15rem; padding: 1rem 1.15rem; border: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--surface); } .page-id-19 main .wp-block-search__inside-wrapper, .page-id-17 main .wp-block-search__inside-wrapper { box-shadow: var(--ts-shadow); border-radius: 4px; } .page-id-19 main .wp-block-search__button, .page-id-17 main .wp-block-search__button { font-size: 1.05rem; padding-inline: 1.6rem; } /* ── pauzė: skiriamoji linija, kuri yra RIBA, ne dekoracija ─────────────── */ hr.ts-pause { border: 0; border-block-start: 1px solid var(--wp--preset--color--rule); margin-block: var(--ts-pause) var(--ts-gap); max-width: 44rem; opacity: 1; } /* ── faktai: tekstas erdvėje, ne kortelės ──────────────────────────────── */ .ts-fact { max-width: 38em; margin-block: 0 var(--ts-close); padding-inline-start: 1rem; border-inline-start: 2px solid var(--wp--preset--color--steel); color: var(--wp--preset--color--contrast); } .ts-cta { margin-block-start: var(--ts-gap); font-weight: 600; } .ts-cta a { text-underline-offset: .18em; } @media (max-width: 47.99rem) { .page-id-19 main .wp-block-search__input, .page-id-17 main .wp-block-search__input { font-size: 1.02rem; padding: .85rem .95rem; } .ts-sub { font-size: 1rem; } } /* ═══ KATEGORIJŲ MEDIS — titulinio viršūnė (T046 v2) ════════════════════════ §8: tekstas erdvėje, NE kortelių tinklelis. Du stulpeliai plačiame ekrane, vienas telefone. Skaičius pošakių yra informacija (kiek gilu), ne dekoracija. */ .ts-tree { list-style: none; margin: var(--ts-close) 0 var(--ts-pause); padding: 0; max-width: 46rem; columns: 2; column-gap: 2.5rem; } .ts-tree li { break-inside: avoid; margin: 0 0 .1rem; padding: .55rem .2rem; border-block-end: 1px solid var(--wp--preset--color--rule); display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .ts-tree a { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); } .ts-tree li:hover a { color: var(--wp--preset--color--accent); text-decoration: underline; } .ts-tree__n { font-size: .78rem; color: var(--wp--preset--color--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 47.99rem) { .ts-tree { columns: 1; margin-block-end: var(--ts-gap); } } /* ═══ MAŠINŲ MARKĖS — titulinio viršūnė (T047) ══════════════════════════════ ⭐ Ūkininkas galvoja „turiu Fendt 936", ne „man reikia kuro sistemos". Markės eina PRIEŠ sistemas, ir jos gauna daugiau svorio. Skaičius šalia yra ĮRODYMAS (kiek realiai turim), ne dekoracija — todėl jis matomas, o ne pilkas smulkmenoje. */ .ts-makes { list-style: none; margin: var(--ts-close) 0 var(--ts-pause); padding: 0; max-width: 46rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .1rem 2rem; } .ts-makes li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .5rem .2rem; border-block-end: 1px solid var(--wp--preset--color--rule); } .ts-makes a { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); letter-spacing: -.01em; } .ts-makes li:hover a { color: var(--wp--preset--color--accent); text-decoration: underline; } .ts-makes__n { font-size: .8rem; font-weight: 600; color: var(--wp--preset--color--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } /* sistemos — tyliau nei markės, nes jos antros pagal svarbą */ .ts-tree a { font-weight: 500; } @media (max-width: 47.99rem) { .ts-makes { grid-template-columns: 1fr; margin-block-end: var(--ts-gap); } }