/* ============================================================================= mlieko-farby.css — KROK 2: brand farby (navy paleta) Path-independent (žiadne url()) → rovnaký súbor pre harness aj deploy. Prepisuje farebné tokeny Classic šablóny + cielene text/linky. Paint-only, BEZ relayoutu (nemení rozmery, padding, font-weight). Bez !important (kaskáda). POZN.: header/footer navy + biele logo = samostatný krok (potrebuje swap loga). ========================================================================== */ /* :root:root = špecificita 0,2,0 → prepíše inline :root (0,1,0) BEZ OHĽADU na poradie (kam Shoptet vloží záhlavie kód voči inline theme premenným) a bez !important. */ :root:root{ /* --- Brand tokeny (referencia z brand-manual.html) --- */ --navy:#0a0056; --modra2:#1c12a0; --papier:#faf9f5; --povrch:#ffffff; --atrament:#1c1932; --linka:#e7e4f1; --uspech:#1e7d4e; --uspech-soft:#e6f2ea; --chyba:#b3273e; --chyba-soft:#f9e8ea; --upozornenie:#8a5a07; --upozornenie-soft:#f6ecd9; --r-tlacidlo:10px; --r-karta:12px; --r-miniatura:8px; /* --- Akcenty: tlačidlá, CTA, primárne prvky (hex + HSL triplet pre odvodené stavy) --- navy #0a0056 ≈ hsl(247,100%,17%) · modra2 #1c12a0 ≈ hsl(244,80%,35%) */ --color-primary:#0a0056; --color-primary-h:247; --color-primary-s:100%; --color-primary-l:17%; --color-primary-hover:#1c12a0; --color-primary-hover-h:244; --color-primary-hover-s:80%; --color-primary-hover-l:35%; /* secondary = conversion/add-to-cart farba → navy base + modra2 hover (ako primary) */ --color-secondary:#0a0056; --color-secondary-h:247; --color-secondary-s:100%; --color-secondary-l:17%; --color-secondary-hover:#1c12a0; --color-secondary-hover-h:244; --color-secondary-hover-s:80%; --color-secondary-hover-l:35%; --color-tertiary:#0a0056; --color-tertiary-h:247; --color-tertiary-s:100%; --color-tertiary-l:17%; --color-tertiary-hover:#1c12a0; --color-tertiary-hover-h:244; --color-tertiary-hover-s:80%; --color-tertiary-hover-l:35%; /* --- Povrchy --- */ --colors-surface-primary:#ffffff; /* karty/boxy */ --colors-surface-secondary:#faf9f5; /* jemné sekčné pozadia → papier */ --colors-surface-white:#ffffff; /* --- Nadpisy / text / bordery --- */ --colors-foregrounds-headlines-primary:#0a0056; /* nadpisy + ceny → navy */ --colors-foregrounds-content-primary:#1c1932; /* hlavný text → atrament */ --colors-foregrounds-borders-secondary:#e7e4f1; /* jemné bordery → linka */ /* --- Stavy / formuláre --- */ --colors-state-success:#1e7d4e; --colors-forms-positive:#1e7d4e; --colors-state-danger:#b3273e; --colors-forms-critical:#b3273e; --colors-state-warning:#8a5a07; --colors-forms-warning:#8a5a07; --colors-state-informative:#1c12a0; --colors-forms-informative:#1c12a0; --colors-focus-primary:#1c12a0; } /* Pozadie stránky = papier, hlavný text = atrament */ body{ background-color:var(--papier); color:var(--atrament); } /* Košík/checkout (ordering-process) majú vlastné bg pravidlo (0,1,1) → prebijeme rovnakou špecificitou */ body.ordering-process{ background-color:var(--papier); } /* Linky = modra2, hover podčiarknutie (len farba; font-weight nemeníme kvôli CLS) */ a{ color:var(--modra2); } a:hover{ text-decoration:underline; } /* Systémové štítky (flagy) na brand — cielene na .flag-* triedy, aby sme nezmenili vlastné produktové štítky majiteľa (tie idú cez --colors-tags-* priamo). */ .flag-new, .flag-freeshipping{ background-color:var(--uspech); } .flag-tip{ background-color:var(--modra2); } .flag-action, .flag-gift{ background-color:var(--modra2); } .flag-discount{ background-color:var(--chyba); } /* ============================================================================= TYPOGRAFIA — váhy nadpisov (brand hierarchia) Classic renderuje nadpisy váhou 400 → pôsobia slabo. Aplikujeme brand váhy. MENÍME LEN VÁHU (+ jemný letter-spacing na veľkých) — NIE veľkosti (kvôli no-relayout). Variabilný font → ľubovoľná váha zadarmo. Statická zmena = bez CLS. ========================================================================== */ h1, .h1{ font-weight:800; letter-spacing:-0.012em; } h2, .h2{ font-weight:750; letter-spacing:-0.008em; } h3, .h3{ font-weight:750; } h4, .h4, h5, .h5, h6, .h6{ font-weight:700; } /* Ceny prominentne (brand: váha 800) */ .price-final, .price-primary{ font-weight:800; } /* ============================================================================= KROK 3 — Pätička navy · papier pozadie + karty · caps preč v košíku (Hlavička navy + biele logo: najčistejšie natívne cez Návrhár → Hlavička = dark/navy; Classic má vstavaný režim `header-background-dark`. Tu rieším zvyšok.) ========================================================================== */ /* --- PÄTIČKA navy (bg maľujú .footer-rows + .footer-bottom) --- */ #footer .footer-rows, #footer .footer-bottom{ background-color:var(--navy); } /* všetok footer text/linky/nadpisy biele (navy pozadie → kontrast; nadpisy aj tlmené linky sú rôzne selektory, preto robustný catch-all; vynechané inputy/tlačidlá/flagy) */ #footer, #footer *:not(.btn):not(button):not(input):not(.flag){ color:#fff !important; } #footer a:hover{ text-decoration:underline; } #footer .footer-rows{ border-color:rgba(255,255,255,.15); } /* --- PAPIER: obsahový kontajner priehľadný (presvitá papier z body), dlaždice = biele karty --- */ .content-wrapper{ background-color:transparent; } /* Karta = vnútorný .p; .product ostáva priehľadná „bunka" a jej existujúci padding 10px sa stáva medzerou medzi kartami (~20px) → karty sa nelepia. BEZ zmeny rozmerov bunky = bez relayoutu. border:0 → zruší šablónové mriežkové oddeľovače na bunke: `.products-block>div{border-top:1px}` (vodorovná linka medzi riadkami) AJ `border-right:1px` (zvislá linka medzi stĺpcami), ktoré cez priehľadnú bunku presvitali ako sivé linky. `.products-block .product` (0,2,0) prebije šablónu (0,1,1). */ .products-block .product{ background-color:transparent; border:0; } .products-block .product > .p{ background-color:#fff; border:1px solid var(--linka); border-radius:var(--r-karta); height:100%; /* rovnako vysoké karty v riadku */ padding:12px; /* vnútorný dych — obsah sa nelepí na okraj karty */ } /* Bestseller blok „Najpredávanejšie" (compact, `.products-top` / #productsTop) NIE je `.products-block`, takže karta vyššie ho nechytila → fotka s bielym pozadím sedela priamo na papieri (kolízia). Dáme mu vlastný biely zaoblený kontajner v rovnakom štýle ako karty. */ .products-top .product > .p{ background-color:#fff; border:1px solid var(--linka); border-radius:var(--r-karta); padding:10px; height:100%; /* bunky v riadku sú rovnako vysoké (flex stretch) → karta nech ich vyplní = symetrické */ } .products-top .product .image img, .products-top .product .p-image img{ border-radius:var(--r-miniatura); } /* --- CAPS preč v košíku/checkoute (názov položky + sekčné nadpisy .h4) --- */ body.ordering-process .h4, .cart-table .main-link, .cart-related-name, .cart-i-name, .ordering-process .main-link, .shipping-billing-name{ text-transform:none; } /* názvy možností dopravy/platby (krok-1) bez VEĽKÝCH písmen. Šablóna ich zväčšuje cez `.payment-info b` (0,1,1) → prebijeme vyššou špecificitou (0,2,1). Platí pre dopravu AJ platbu (oboje = b.shipping-billing-name vnútri .payment-info). Cena „ZADARMO" je literálny text (.payment-shipping-price.for-free, bez CSS transformu) → ostáva VEĽKÝMI, ako si želal. */ .payment-info b.shipping-billing-name{ text-transform:none; } /* ============================================================================= KROK 4 — Logo ako wordmark · DESKTOP hlavička navy (mobil rieši natívne nastavenie) Cielené selektory (žiadne #header *), aby sa nerozbili dropdowny/popupy v hlavičke. Desktop hlavičku over v náhľade Návrhára (harness ju nerenderuje spoľahlivo). ========================================================================== */ /* Logo = wordmark v našom fonte, hrubý, biely, VÄČŠÍ — netreba obrázok (šetríme načítanie). Hlavička je navy na mobile (natívne nastavenie) aj na desktope (nižšie) → logo biele globálne. */ .text-logo{ font-weight:900; letter-spacing:-0.015em; color:#fff; line-height:1.05; } /* veľkosť + biela farba loga (template drží 14px aj navy farbu cez `#header .site-name a.text-logo` = špecificita 1,2,1; preto musíme rovnakým selektorom — inak je logo navy/neviditeľné na mobile) */ #header .site-name a.text-logo{ font-size:28px; color:#fff; } /* --- MOBILNÁ HLAVIČKA +20% (50 → 60px bar) so zachovaným vycentrovaním loga aj ikon --- Šablónové offsety (ladené na 50px bar) prepočítané SPOLU pre 60px. KĽÚČOVÉ poučenie z minula: NEMENÍME šírku ikon (ostáva 40px) → košík (right:50px) a hamburger (right:10px) sa neprekrývajú. Ikony centruje `.responsive-tools` (flex, align-items:center) → stačí mu dať výšku 60px (padding 10px) a zostanú v strede. Logo plní 60px (flex center). Košík zvislo dorovnaný (overené meraním). */ @media (max-width:767px){ .top-navigation-bar{ min-height:60px; } .responsive-tools{ padding-top:10px; padding-bottom:10px; } /* 40px ikony vycentrované v 60px bare */ #header{ top:60px; } /* logo: `` ostáva 50px (šablóna ho drží aj proti height override) → namiesto naťahovania ho zvislo vycentrujeme POSUNOM: `#header` je na top:60, `.site-name` dáme top:-55 → logo 5–55px → stred 30 (= stred 60px baru), zarovnané s ikonami. */ #header .site-name{ top:-55px; } #header .site-name a.text-logo{ font-size:24px; } #header .navigation-buttons a.cart-count{ top:-42px; } /* košík na zvislý stred 60px baru */ /* zjednotiť veľkosť ikon — košík má glyf 30px, lupa 18px, hamburger len 14px → zväčšiť. Hamburger je dôležitejší (bližšie ku košíku), lupa môže byť o kúsok menšia. (Farby ostávajú nezmenené.) */ .responsive-tools a[data-target="navigation"]:before{ font-size:26px; } .responsive-tools a[data-target="search"]:before{ font-size:22px; } .overall-wrapper{ padding-top:79px; } /* obsah pod 60px bar (bolo 69 pre 50px) */ .type-index .overall-wrapper{ padding-top:60px; } .ordering-process .overall-wrapper{ padding-top:0; } /* výraznejší, ľahšie klikateľný „X" — len glyf + jeho box (pozícia/tap z .navigation-close padding ostáva natívne) */ #navigation .navigation-close:before{ font-size:22px; width:22px; height:22px; line-height:22px; } /* „Prihlásenie" je v samostatnom `ul.navigationActions` → ako :first-child mu šablóna zruší horný oddeľovač (`:first-child{border-top:none}`) → chýbala čiara nad poslednou položkou. Doplníme ju rovnakou farbou ako ostatné (overené: rgb(231,228,241) = --linka). */ #navigation .navigation-in > ul.navigationActions > li{ border-top:1px solid var(--linka); } /* --- ROZBALENÉ MOBILNÉ MENU: väčšie, pohodlnejšie klikateľné položky (UX ako MotoRevolta) --- Položky boli malé: padding `1.25rem` = 12.5px (root je 62.5% → 10px) → riadky ~41px. Zväčšíme na 18px (ako MotoRevolta) → riadky ~52px (+~27%). Padding je na / vnútri (samotné má padding 0). (1,1,4) prebije šablónu (0,1,4). */ #navigation .navigation-in > ul > li > a > b, #navigation .navigation-in > ul > li > a > span{ padding-top:18px; padding-bottom:18px; } /* Zatváracie „X" je absolútne v pravom hornom rohu panela (47×47, top:0) a prekrývalo 1. položku (tá tiež začínala na y:0). Zoznam odsadíme pod „X" → čistý horný pruh s krížikom, položky pod ním. */ #navigation .navigation-in{ padding-top:56px; } } /* DESKTOP hlavička — DVOJTÓNOVÝ SPLIT (navy vrch + svetlý menu pruh). Navy kryje topbar + header-top (logo / hľadanie / košík); BIELY full-bleed pruh = menu. Trik bez relayoutu a bez horizontálneho scrollu: `#header` je bežný blok = presne `clientWidth` široký (NIE 100vw), takže vertikálny gradient navy→biely na ňom dá plný bleed po oba okraje. Hranica navy/biela = výška `.header-top`; tú fixneme paddingom, nech je hranica deterministická (overené meraním v harnesse, dolaďené na px). */ @media (min-width:768px){ /* fixná výška header-top (obsah ≤ 39px: logo) → stabilná hranica gradientu */ #header .header-top{ padding-top:16px; padding-bottom:16px; height:auto; } /* gradient: navy 0→74px (= nameraná výška header-top), biely menu pruh nižšie; ostrá hranica. Spodná linka (hairline) oddelí biely menu pruh od obsahu stránky (ako mockup). */ #header{ background:linear-gradient(to bottom, var(--navy) 0, var(--navy) 74px, #fff 74px, #fff 100%); border-bottom:1px solid var(--linka); } /* `.navigation-in` mala navy bg (template: background:var(--color-primary)) → priehľadná, nech presvitá biely pruh z gradientu (inak by menu pruh ostal navy). */ #header .navigation-in{ background-color:transparent; } /* jemná deliaca linka PRESNE medzi topbarom a riadkom logo/hľadanie/košík (na želanie) */ .top-navigation-bar{ background-color:var(--navy); border-bottom:1px solid rgba(255,255,255,.22); } /* DÔLEŽITÉ: kontajnery v hornom bare majú vlastné biele pozadie → spriehľadniť, inak je biely text neviditeľný (biele na bielom) */ .top-navigation-bar .top-navigation-contacts, .top-navigation-bar .top-navigation-menu, .top-navigation-bar .container, .top-navigation-bar .responsive-tools{ background-color:transparent; } /* Topbar: „Obchodné podmienky ⌄" + „Prihlásenie" zoskupiť VPRAVO. Kľúč: menu dostane FIXNÚ úzku šírku (nie %). Pri %-šírke Shoptet pri širokej obrazovke auto-rozbalí VŠETKY položky (rozbíjalo to top a odtláčalo „Prihlásenie" mimo obraz); fixných ~230px udrží orezané iba „Obchodné podmienky" + ⌄ pri každej šírke. Kontakty necháme rásť (vľavo) → menu + tools (login) sa odtlačia vpravo a zoskupia. */ .top-navigation-bar .container > div.top-navigation-contacts{ flex:1 1 auto; } .top-navigation-bar .container > div.top-navigation-menu{ flex:0 0 230px; margin-right:18px; } .top-navigation-bar .container > div.top-navigation-tools{ flex:0 0 auto; } /* biely text/linky v navy vrchu (topbar + logo) */ .top-navigation-bar, .top-navigation-bar a, .top-navigation-bar button, #header .site-name, #header .site-name a{ color:#fff; } /* dropdown/popup/našepkávač = biele panely → tmavý text */ .top-navigation-bar .dropdown-menu, .top-navigation-bar .dropdown-menu a, #header .popup-widget, #header .popup-widget a, #header .search-whisperer, #header .search-whisperer a{ color:var(--atrament); } /* search tlačidlo „Hľadať" navy + lupa, s BIELYM rámikom → zvýrazní tlačidlo na navy lište (mockup). Tlačidlo sedí pri pravom/hornom/dolnom okraji poľa (= hrany na navy lište), takže biely rámik je na 3 stranách vidno na navy; ľavá strana splýva s bielym poľom. box-sizing, nech rámik nezväčší výšku. */ #header .search .btn, #header .search button[type="submit"], #header .btn-search{ background-color:var(--navy); color:#fff; border:2px solid #fff; box-sizing:border-box; } #header .search button[type="submit"]::before{ content:"\e920"; font-family:shoptet; font-weight:400; margin-right:8px; vertical-align:middle; speak:none; } /* hľadacie pole = čisté biele pole bez rámika (rámik patrí na tlačidlo, viď nižšie) */ #header .search .query-input, #header .search .form-control{ border:0; } /* KOŠÍK: biely obsah priamo na navy vrchu (BEZ bieleho boxu — verné mockupu). */ #header .navigation-buttons a.cart-count, #header .navigation-buttons a.cart-count *, #header .navigation-buttons a.cart-count::before, #header .cart-price{ color:#fff; } #header .cart-price{ font-weight:700; } /* suma košíka výraznejšia (mockup) */ /* počet kusov = BUBLINA: šablóna jej dáva navy pozadie → na navy vrchu SPLÝVA. Dáme BIELU bublinu s navy číslom → výrazná (predtým navy-na-navy = neviditeľná). (1,2,2) prebije šablónu aj `*` pravidlo. */ #header .navigation-buttons a.cart-count i{ background-color:#fff; color:var(--navy); } } /* ============================================================================= KROK 5 — caps preč z horného baru · footer logo väčšie ========================================================================== */ /* Horný info bar bez VEĽKÝCH písmen (caps je dedený z rodiča → override priamo na prvkoch) */ .top-navigation-bar *{ text-transform:none; } /* Desktop pätička: skryť veľké logo „Mlieko.sk" vľavo (odsúvalo ostatný obsah) — dočasne, pred plánovaným redesignom pätičky. Scope na #footer → hlavičkové .site-name ostáva nedotknuté. Na mobile ponechané natívne (užívateľ riešil len desktop). */ @media (min-width:768px){ #footer .site-name{ display:none; } /* JEDINÝ skrytý prvok v pätičke = logo „Mlieko.sk" */ /* šablóna dávala obsahu pätičky `padding-left:275px` (rezerva pod logom) → po skrytí loga zostala prázdna medzera vľavo; vynulujeme → stĺpce (Informácie/Kontakt) sa posunú doľava */ #footer .custom-footer{ padding-left:0; } } /* ============================================================================= KROK 8 — Desktop hlavné menu na SVETLOM pruhu (dvojtónový split) Menu pruh je teraz biely → položky = čistý navy text BEZ pillov/obrysov (verné mockupu). Aktívna položka = navy podčiarknutie; hover = modra2 podčiarknutie. Podčiarknutie cez `box-shadow inset` (NEzaberá miesto → žiadny reflow/CLS, na rozdiel od border-bottom). Centrovanie LEN v `.fitted` (inak rozbije Shoptet menu-fit JS — viď nižšie). min-width:768px. (Nahrádza pôvodné pill menu KROK 6 + jeho header-top/nav layout hacky — odstránené.) ========================================================================== */ @media (min-width:768px){ /* nav = pohodlný menu pruh; navigation-in (absolútna, top:0) doň sadne. POZOR: NEpretláčame `overflow` — šablóna ho prepína (hidden počas merania menu-fit, keď je `.navigation-in` na width:9999em → inak by tých ~140000px spôsobilo obrovský horizontálny scroll; visible v stave `.fitted` kvôli rozbaľovaciemu dropdownu). Necháme to na šablónu. */ #header nav#navigation{ min-height:50px; } /* menu (navigation-in je position:absolute) zvislo vycentrovať v pruhu — predtým sedelo hore */ #header nav#navigation .navigation-in{ top:50%; transform:translateY(-50%); } #header .menu-level-1{ gap:6px; } /* jemná medzera medzi položkami */ /* preč zvislé predeľovače medzi položkami (šablóna dáva `li{border-left}` = na svetlom pruhu vidno) */ #header .menu-level-1 > li{ border:0; } /* Horizontálne vycentrovanie LEN v stave `.fitted`. POZOR (príčina regresie): `justify-content:center` priamo na .menu-level-1 rozbíja Shoptet menu-fit JS — ten meria šírku položiek, keď má `.navigation-in` width:9999em; centrovanie ich počas merania odhodí do stredu obrovskej šírky → JS usúdi, že sa nezmestia → zbalí menu do MOBILNÉHO hamburgeru aj na desktope. Trieda `.fitted` sa pridá až PO meraní → centrovanie sa aplikuje len na hotové horizontálne menu. */ #header #navigation.fitted .menu-level-1{ justify-content:center; } /* položka = navy text, bez pillu/obrysu/pozadia; padding drží výšku pruhu (~48px) */ #header .menu-level-1 > li > a{ color:var(--navy); font-weight:700; font-size:15px; /* hrubšie/väčšie položky (mockup) */ background-color:transparent; border:0; border-radius:0; padding-top:14px; padding-bottom:14px; transition:color .12s ease, box-shadow .12s ease; } #header .menu-level-1 > li > a b{ font-weight:700; } /* šablóna renderuje 400 → zhrubnúť */ /* hover = modra2 podčiarknutie; aktívna položka = navy podčiarknutie (box-shadow → bez reflow) */ #header .menu-level-1 > li > a:hover, #header .menu-level-1 > li:hover > a{ color:var(--modra2); box-shadow:inset 0 -2px 0 var(--modra2); } #header .menu-level-1 > li > a.active{ color:var(--navy); box-shadow:inset 0 -3px 0 var(--navy); } /* rozbaľovací dropdown (menu-level-2) = biely panel → tmavý/navy text odkazov */ #header .navigation-in ul.menu-level-2 a{ color:var(--atrament); } #header .navigation-in ul.menu-level-2 a:hover{ color:var(--modra2); } /* „Viac" overflow trigger (.menu-helper): šablóna mu dáva tmavomodrý box s bielym textom → na svetlom pruhu pôsobí ako cudzí navy štvorec. Zladíme s ostatnými položkami: navy text, priehľadné pozadie (objaví sa len na užších desktopoch, keď sa dlhé položky nezmestia). */ #header .menu-helper > span{ background-color:transparent; color:var(--navy); } /* ::after = šípka triggeru; šablóna jej dáva tmavomodrý box → na svetlom pruhu je to navy štvorec. Pozadie spriehľadníme, glyf navy → čistá navy šípka na bielom. */ #header .menu-helper::after{ background-color:transparent; color:var(--navy); } } /* ============================================================================= KROK 7 — Zaoblenie po celom webe + drobné opravy SKAR mark = štvorec so zaoblením 11,6 % strany (110/950). Brand to prekladá do UI tokenov (overené v brand-manual.html r.170 + r.410): tlačidlá 10px, karty 12px, miniatúry 8px. Classic je celý hranatý → tu zaoblíme tlačidlá, vstupy a miniatúry. Len border-radius (paint-only, žiadny relayout, žiadny CLS). Rozmery (výška/padding) nemeníme. ========================================================================== */ /* --- 7a. Horný bar: odkazy mizli pri hoveri (hover farba = navy na navy pozadí) → biele --- */ @media (min-width:768px){ .top-navigation-bar a:hover, .top-navigation-bar button:hover, .top-navigation-menu a:hover, .top-navigation-contacts a:hover{ color:#fff; } /* Rozbaľovacie menu (hover dropdown) = biely panel `.navigation-in ul.menu-level-2` (background:--colors-surface-white, width:100%, prilepený pod nav). Zaoblíme spodné rohy ako karty; overflow:hidden ich čisto oreže. (1,2,1) prebije šablónu. */ #header .navigation-in ul.menu-level-2{ border-radius:0 0 var(--r-karta) var(--r-karta); overflow:hidden; } } /* --- 7b. Pätička: text vložený do poľa pre telefón sa lámal uprostred slova (word-break:break-all) --- */ #footer .cellphone, #footer .cellphone *{ word-break:normal; overflow-wrap:break-word; } /* --- 7c. Globálne zaoblenie tlačidiel (hranatá Classic → brand mierne zaoblenie 10px). DÔLEŽITÉ: šablóna má `.btn, a.btn{border-radius:0}` — `a.btn` (0,1,1) prebíjalo naše `.btn` (0,1,0) na VŠETKÝCH odkazoch-tlačidlách (blog „Ďalší článok", „Zobraziť všetky súvisiace", checkout „Prihlásiť sa do účtu", „Späť do obchodu", tlačidlo v add-to-cart popupe). Pridaním `a.btn` (0,1,1, loaduje sa neskôr) ich dorovnáme jediným pravidlom. --- */ .btn, a.btn, button, input[type="submit"], input[type="button"], input[type="reset"]{ border-radius:var(--r-tlacidlo); } /* --- Globálne zaoblenie vstupov 10px --- */ .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea{ border-radius:var(--r-tlacidlo); } /* --- 7d. Spojené skupiny = JEDEN zaoblený kontajner (zaoblíme len vonkajšie rohy, spoj ostáva rovný) --- */ /* Hľadanie v hlavičke: input je na celú šírku, tlačidlo leží NAD jeho pravým okrajom. Input zaoblíme dookola (10px) — pravé rohy schová tlačidlo → žiadny biely výčnelok; tlačidlo vpravo. */ #header .search .form-control, #header .search .query-input{ border-radius:var(--r-tlacidlo); } #header .search .btn, #header .search button[type="submit"], #header .btn-search{ border-radius:0 var(--r-tlacidlo) var(--r-tlacidlo) 0; } /* Detail produktu: množstvo (vľavo) + Pridať do košíka (vpravo) = jeden pill */ .add-to-cart .quantity{ border-radius:var(--r-tlacidlo) 0 0 var(--r-tlacidlo); overflow:hidden; } .add-to-cart .add-to-cart-button, .add-to-cart .btn-conversion{ border-radius:0 var(--r-tlacidlo) var(--r-tlacidlo) 0; } /* vnútorné +/- a vstup množstva (aj v košíku) nech neostanú s pahýľmi zaoblenia */ .quantity input, .quantity button, .quantity .increase, .quantity .decrease{ border-radius:0; } /* --- 7e. Miniatúry produktov jemne zaoblené (8px) --- */ .products-block .product .image img, .products-block .product .p-image img{ border-radius:var(--r-miniatura); } /* --- 7e2. CTA „Do košíka" v kartách (výpisy + bestseller) ~o 20% vyššie (padding 5→9px → 36→~44px). Detail produktu zámerne NEmeníme (tam je výška dobrá) — preto scope len na karty produktov. --- */ .products-block .product .add-to-cart-button, .products-block .product .btn-conversion, .products-top .product .add-to-cart-button, .products-top .product .btn-conversion{ padding-top:9px; padding-bottom:9px; } /* --- 7g. Štítky (príznaky): Tip / Akcia / Zľava / Novinka… jemne zaoblené (8px) --- */ .flag{ border-radius:var(--r-miniatura); } /* --- 7h. Názov darčeka VEĽKÝMI písmenami — dva rôzne zdroje pre dve miesta (overené v main-11): • checkout recap = `.cart-item>div.cart-item-name{uppercase}` (0,2,1) • stránka košíka „Darčeky a zľavy" = `.free-gift-name{uppercase}` (0,1,0) (Predošlé `.extras-wrap` pravidlo nikdy nematchlo — zlá trieda — odstránené.) Obe dorovnáme rovnakou špecificitou; náš súbor sa loaduje neskôr → vyhrá. --- */ .cart-item > div.cart-item-name, .free-gift-name{ text-transform:none; } /* --- 7i. Mobil menu: šablóna automaticky pridáva kategórie navyše (trieda .appended-category) — napr. „Kultúry na Kimchi", ktorú používateľ do menu nedal. Skryjeme len tieto auto-pridané položky (vlastné položky sú menu-item-* bez .appended-category, tých sa to netýka). --- */ #header .menu-level-1 > li.appended-category{ display:none; } /* (1,2,1) prebije šablónu */ /* ============================================================================= KROK 9 — Kategória: breadcrumbs (drobček) + zarovnanie „Najpredávanejšie" k h1 ========================================================================== */ /* Breadcrumbs = biely full-width pruh nalepený tesne pod menu → zaobliť (ako karty/dropdown) a pridať hornú medzeru, nech nie je prilepený na menu. Jemný vnútorný ľavý odstup, aby text nesedel v zaoblenom rohu. (Paint-only; margin-top je vo flow → bez CLS, hlavička je nad.) */ .breadcrumbs{ border-radius:var(--r-karta); margin-top:12px; padding-left:14px; padding-right:14px; } @media (min-width:768px){ /* h1 kategórie je v ľavom sidebare, ktorému šablóna dáva `.sidebar-inner{padding-top:20px}` → h1 sedí ~20px nižšie. Pravý stĺpec produktov (`.category-top`) toto odsadenie nemá, takže „Najpredávanejšie" bolo vyššie ako h1. Doplníme pravému stĺpcu rovnaký horný odstup → zarovno. (Len desktop; na mobile sú stĺpce pod sebou, tam by odstup len pridával zbytočnú medzeru.) */ .category-top{ padding-top:22px; } } /* Radenie produktov (listSorting) — aktívna/hover voľba mala BIELY zaoblený box (`.listSorting__control--current{background:var(--colors-surface-primary)}`) → zmeníme na PODČIARKNUTIE ako v hornom menu (box-shadow inset → bez reflow), bez bielej výplne aj bez zaoblenia. */ .listSorting__control{ background-color:transparent; border-radius:0; box-shadow:none; } .listSorting__control:hover{ background-color:transparent; color:var(--modra2); box-shadow:inset 0 -2px 0 var(--modra2); } .listSorting__control--current{ background-color:transparent; color:var(--navy); box-shadow:inset 0 -3px 0 var(--navy); } /* ============================================================================= KROK 10 — Globálne základné písmo o jeden krok väčšie (čitateľnosť body-textu) Šablóna Classic má `html{font-size:10px}` (= rem báza pre celý sizing systém — NEDOTÝKAME SA) a `body{font-size:14px}` (= dedená veľkosť bežného textu: popisy kategórií, odseky, zoznamy…). Zväčšíme bázu 14 → 15px. line-height v šablóne je bezrozmerný pomer (1.3846) → škáluje sa SÁM (19.38 → 20.77px), takže žiadny nepríjemný riadkový rozostup. Hodnota je v CSS od začiatku (statická) → žiadny shift počas načítania = CLS bez zmeny. Prvky s vlastnou veľkosťou (menu 15px, logo 28px, nadpisy, ceny…) majú font-size definovaný explicitne → tento override sa ich netýka. `body{font-size}` (0,0,1) sa loaduje za šablónovým `body{font-size:14px}` (0,0,1) → vyhrá poradím. */ body{ font-size:15px; }