/*
* Designové tokeny La Sofia.
*
* Jediný zdroj barev, písem a odstupů pro všechny vlastní moduly
* (`lasofia*`). Hodnoty jsou odečtené z živého la-sofia.cz, ne
* odhadnuté, a prošly opravou kontrastu podle WCAG AA — viz komentáře
* u jednotlivých tokenů.
*
* Proč vlastní soubor a ne Tailwind: šablona vychází z Corana, které má
* svůj Bootstrap. Míchat do toho ještě Tailwind by znamenalo dva
* konkurenční systémy tříd nad jedním HTML. Tokeny v CSS proměnných
* fungují v obou a každý modul si k nim napíše svých pár řádků.
*
* Nahrává se přes theme.yml (assets.css.all), takže je k dispozici
* na každé stránce dřív, než se vykreslí kterýkoli modul.
*/
:root {
/* Zlatá je závazná pro pozadí a rámečky. */
--ls-gold: #c29958;
/*
* Ztmavená varianta pro stav „najeto myší". Původní #a67f42 dávalo
* proti --ls-ink jen 4,35:1, tedy pod hranicí AA 4,5:1.
*/
--ls-gold-dark: #ad8446;
/*
* Zlatá #c29958 má na bílé jen 2,63:1, takže se NESMÍ použít na text.
* Tenhle tmavší odstín stejného tónu má 4,99:1 na bílé a 4,54:1 na
* --ls-surface. Všude, kde je zlatá barvou písma nebo ikony, patří
* tenhle token.
*/
--ls-gold-text: #886b38;
--ls-ink: #222222;
--ls-body: #555555;
/*
* #888888 mělo 3,54:1 na bílé — pod hranicí. #666666 má 5,74:1.
*/
--ls-muted: #666666;
--ls-line: #e5e5e5;
/*
* Vyska hlavicky vcetne prouzku nad ni.
*
* Pouziva ji hero (aby neprerostlo prvni obrazovku) a prilepena
* rekapitulace v pokladne. Do ted existovala jen jako zaloznich
* 72 px uvnitr `calc()` -- tedy hodnota, kterou nikdo nenastavil
* a nikdo nezmeril. Merena: prouzek 41 px + hlavicka 69 px.
*/
--ls-vyska-hlavicky: 110px;
--ls-surface: #f4f4f4;
--ls-bg: #ffffff;
--ls-font-heading: "Playfair Display", Georgia, serif;
--ls-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Šířka obsahu — stejná jako hlavička, aby měla stránka jednu svislou linii. */
--ls-max: 80rem;
}
/*
* Self-hostované fonty.
*
* Woff2 jsou nasubsetované na Latin + Latin Extended-A včetně všech
* českých diakritických znaků (ověřeno) — nebereme je z Google CDN,
* protože Googlem servírovaný latin-ext subset Lata některým českým
* glyfům chybí, a protože vlastní soubor ušetří cizí spojení navíc.
*
* `font-display: swap` — text je čitelný okamžitě systémovým písmem
* a překreslí se, až dojde webfont. Žádný neviditelný text.
*/
@font-face {
font-family: "Playfair Display";
src: url("../fonts/playfair-display-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Playfair Display";
src: url("../fonts/playfair-display-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("../fonts/lato-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/*
* Jednotné zaměření klávesnicí pro vlastní moduly.
*
* `:focus-visible`, ne `:focus` — myší se nic neobjeví, klávesnicí ano.
* Barva --ls-ink, ne zlatá: obrys se objevuje i nad fotkami šperků a na
* zlatavé fotce by zlatý proužek zmizel.
*/
[class^="ls-"] :focus-visible,
[class*=" ls-"] :focus-visible {
outline: 2px solid var(--ls-ink);
outline-offset: 2px;
}
/* Skryto očima, čitelné odečítačem obrazovky. */
.ls-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------------ */
/* JEDEN RÁMEC PRO CELOU STRÁNKU */
/* ------------------------------------------------------------------ */
/*
* Hlavička, slider, obsah i patička musí začínat na stejné svislé
* lince.
*
* Změřeno na původním stavu — byly tam TŘI různé rámce vedle sebe
* (šířka okna 1850 px):
*
* hlavička (container-fluid) levý okraj 0, šířka 1835
* slider levý okraj 278, šířka 1280
* obsah (Bootstrap .container) levý okraj 348, šířka 1140
*
* Referenční je Next.js návrh: jeden rámec 1280 px, odsazení UVNITŘ
* něj. Při šířce okna 1440 pak obsah začíná na 105 — a to platí pro
* logo, nadpis slideru, mřížku kusů i patičku stejně.
*
* Odsazení je součástí rámce (`box-sizing: border-box`), ne vně —
* jinak se okraj posune o jeho šířku a rámce se zase rozejdou.
*/
.ls-ramec,
#header .container-fluid,
#wrapper > .container,
#content-wrapper > .container,
#footer .container,
.footer_top .container,
.footer_bottom .container {
box-sizing: border-box;
width: 100%;
max-width: var(--ls-max);
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 640px) {
.ls-ramec,
#header .container-fluid,
#wrapper > .container,
#content-wrapper > .container,
#footer .container,
.footer_top .container,
.footer_bottom .container {
padding-inline: 1.5rem;
}
}
@media (min-width: 1024px) {
.ls-ramec,
#header .container-fluid,
#wrapper > .container,
#content-wrapper > .container,
#footer .container,
.footer_top .container,
.footer_bottom .container {
padding-inline: 2rem;
}
}
/*
* RÁMEC UVNITŘ RÁMCE SE NEOPAKUJE.
*
* Obsah modulů se vykresluje uvnitř kontejneru stránky, který rámec
* už aplikoval. Kdyby ho přidal znovu, odsazení by se sečetlo a prvek
* by se posunul přesně o jeho šířku — naměřeno: mřížka kusů začínala
* na 137 místo na 105, zatímco logo a nadpis slideru byly správně.
*
* Vnitřní rámec proto jen vyplní, co dostal.
*/
.ls-ramec .ls-ramec,
.container .ls-ramec,
.container-fluid .ls-ramec,
.container .container {
max-width: none;
padding-inline: 0;
}
/* ------------------------------------------------------------------ */
/* HLAVIČKA */
/* ------------------------------------------------------------------ */
/*
* Proužek nad hlavičkou. Na mobilu se z něj vejde jen první sdělení,
* ostatní by se zalomila do tří řádků a ukrojila půl obrazovky.
*/
.ls-prouzek {
/*
* Zlatohnedy pruh s bilym textem.
*
* Drive mel stejnou sedou jako hlavicka, aby s ni splynul v jednu
* hlavu stranky. Navrh ho ma naopak jako jediny barevny pruh na
* cele strance -- je to prvni vec, kterou clovek uvidi, a nese
* jedinou vetu, ktera ten obchod odlisuje.
*
* #96692f, ne znackova --ls-gold (#c29958): bila na zlate ma
* kontrast 3,2:1, tedy pod hranici AA pro bezny text. Tahle tmavsi
* varianta ma 4,8:1. Je o neco hlubsi nez v navrhu; svetlejsi
* odstin by se na malem pisme nedal cist.
*/
background: #96692f;
font-family: var(--ls-font-body);
font-size: 0.8125rem;
color: #fff;
}
.ls-prouzek__vnitrek {
display: flex;
align-items: center;
/* Jedina veta patri na stred; `space-between` ji lepilo doleva. */
justify-content: center;
gap: 1rem;
padding-block: 0.5rem;
}
.ls-prouzek__vnitrek > span {
white-space: nowrap;
}
@media (max-width: 1023.98px) {
/* Pod 1024 px zůstane jen první sdělení, zbytek by se nevešel. */
.ls-prouzek__vnitrek > span:not(:first-child) {
display: none;
}
.ls-prouzek__vnitrek {
justify-content: center;
}
.ls-prouzek__vnitrek > span {
white-space: normal;
text-align: center;
}
}
.ls-hlavicka {
position: relative;
z-index: 40;
background: var(--ls-surface);
transition: box-shadow 200ms ease;
}
/*
* Lepí se na VŠECH šířkách, i na mobilu -- stejně jako v Next.js
* návrhu. Dřív to bylo až od 1024 px, takže na telefonu hlavička
* odjela pryč a košík byl po odscrollování nedosažitelný.
*/
.ls-hlavicka {
position: sticky;
top: 0;
}
/*
* Hranice i stín se objeví teprve ve chvíli, kdy je hlavička opravdu
* nahoře — dokud stránka stojí na začátku, splývá s proužkem nad sebou
* a nic ji nedělí.
*
* Řeší to scroll-driven animace v CSS, ne JavaScript. Původně to
* dělala jednopixelová hlídka s `IntersectionObserver`; tenhle způsob
* nepotřebuje ani ji, ani posluchač scrollu, a prohlížeč si ho odbaví
* mimo hlavní vlákno.
*
* Rozsah `0 → 70px` je výška proužku nad hlavičkou: jakmile proužek
* odscrolluje, je hlavička u horního okraje a stín dosedne.
*
* Mění se jen `box-shadow` a barva hranice — vlastnosti, které
* nepřepočítávají layout. Hranice je proto průhledná i v klidu, ne
* přidaná až potom; jinak by se obsah při přilepení posunul o 1 px.
*/
.ls-hlavicka {
border-bottom: 1px solid transparent;
}
@keyframes ls-prilepeni {
from {
border-bottom-color: transparent;
box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
}
to {
border-bottom-color: var(--ls-line);
box-shadow: 0 6px 12px -8px rgb(0 0 0 / 0.18);
}
}
@supports (animation-timeline: scroll()) {
.ls-hlavicka {
animation: ls-prilepeni linear both;
animation-timeline: scroll(root block);
animation-range: 0 70px;
}
}
@media (prefers-reduced-motion: reduce) {
.ls-hlavicka {
transition-duration: 1ms;
}
}
/*
* Hlídka je v normálním toku, ne absolutně umístěná: absolutní
* uvnitř přilepené hlavičky by cestovala s ní a nikdy by viewport
* neopustila. Jeden pixel výšky nic neposouvá.
*/
.ls-hlavicka__hlidka {
display: block;
height: 1px;
margin: 0;
pointer-events: none;
}
.ls-hlavicka__radek {
display: flex;
align-items: center;
gap: 1rem;
padding-block: 0.75rem;
}
.ls-hlavicka__logo {
flex: none;
display: block;
line-height: 0;
}
.ls-hlavicka__logo img {
/*
* Zmenšeno z původních 56 px: přilepená hlavička ukrajuje
* z obrazovky pořád, takže na každém pixelu záleží. Pod `sm` ještě
* o kousek míň — při 375 px se vedle loga musí vejít hamburger
* i čtyři ikony.
*/
height: 2.25rem;
width: auto;
}
@media (min-width: 640px) {
.ls-hlavicka__logo img {
height: 2.75rem;
}
}
/*
* Menu zabírá zbylé místo a tlačí akce doprava. Na mobilu je v téhle
* pozici jen hamburger, takže `flex: 1` drží logo uprostřed.
*/
.ls-hlavicka__radek > .ls-menu {
flex: 1;
margin-inline-start: 2rem;
}
.ls-hlavicka__akce {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 0.25rem;
}
@media (min-width: 640px) {
/*
* Ikony stoji tesne u sebe. Kazda ma kolem sebe 40x40 px cile pro
* prst, takze mezera navic uz jen roztahuje radek -- v navrhu
* tvori ctverici, ne rozsypanou radu.
*/
.ls-hlavicka__akce {
gap: 0.125rem;
}
}
/*
* Ikony akcí (košík, účet, oblíbené, porovnání) -- 40×40 px, tedy
* pohodlný cíl pro prst, a jednotný tvar bez ohledu na to, který modul
* je vykresluje.
*/
.ls-hlavicka__akce a,
.ls-hlavicka__akce button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
color: var(--ls-ink);
text-decoration: none;
transition: color 150ms ease;
}
.ls-hlavicka__akce a:hover,
.ls-hlavicka__akce button:hover {
color: var(--ls-gold-text);
}
/*
* Ovladac menu je na mobilu uplne vpravo (poradi resi `order` nize),
* v HTML stoji za logem -- poradi cteni dokumentu musi zustat logicke.
*/
@media (max-width: 1023.98px) {
.ls-hlavicka__radek {
justify-content: space-between;
}
.ls-menu-otevrit {
flex: none;
}
}
/* ==================================================================== */
/* SPOLEČNÉ PRO VŠECHNY VÝPISY KUSŮ */
/* ==================================================================== */
/*
* Používá je domovská stránka, výpis kategorie i vyhledávání.
* Jedno místo, jeden vzhled.
*/
/* ------------------------------------------------------------------ */
/* Sekce */
/* ------------------------------------------------------------------ */
.ls-sekce {
/*
* Vzdusnejsi rytmus: 3 rem -> clamp(4rem, 7vw, 7rem).
*
* Luxusni obchod prodava prostorem -- mezi sekcemi ma byt ticho,
* ne dalsi radek zbozi. Pri 48 px nahore i dole splyvaly "Nove
* produkty", "Doporucene kusy" a popis materialu v jeden souvisly
* pas a oko nemelo kde odpocinout.
*
* `clamp` drzi rozestup umerny oknu: na telefonu 4 rem (jinak by
* se scrollovalo prazdnem), na velkem monitoru 7 rem.
*/
padding-block: clamp(4rem, 7vw, 7rem);
}
.ls-sekce__hlavicka {
text-align: center;
margin-bottom: 2rem;
}
.ls-sekce__nadpis {
margin: 0;
font-family: var(--ls-font-heading);
/*
* Nadpis sekce roste s oknem stejne jako hero, jen o stupen niz.
* Pevnych 30 px pusobilo na sirokem monitoru jako podnadpis.
*/
font-size: clamp(1.75rem, 2.6vw, 2.75rem);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--ls-ink);
}
/*
* Media query pro nadpis uz netreba: velikost resi `clamp()` vyse,
* ktery roste plynule s oknem. Pevnych 1,875 rem od 640 px nahoru
* clamp prebijelo -- nadpis zustal na 30 px i na sirokem monitoru,
* prestoze se mel zvetsit az na 44.
*/
/* Mensi varianta pro sekce pod hlavnim obsahem. Roste taky, jen niz. */
.ls-sekce__nadpis--mensi {
font-size: clamp(1.375rem, 1.9vw, 1.875rem);
text-align: left;
}
.ls-sekce__podnadpis {
margin: 0.5rem 0 0;
font-family: var(--ls-font-body);
color: var(--ls-body);
}
/* ------------------------------------------------------------------ */
/* Mřížka produktů */
/* ------------------------------------------------------------------ */
.ls-mrizka {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 2.5rem;
}
@media (min-width: 1024px) {
.ls-mrizka {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.ls-mrizka {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ------------------------------------------------------------------ */
/* Karta produktu */
/* ------------------------------------------------------------------ */
.ls-karta {
position: relative;
}
.ls-karta__odkaz {
display: block;
text-decoration: none;
color: inherit;
}
.ls-karta__ram {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--ls-surface);
}
.ls-karta__foto {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/*
* Přiblížení při najetí mění jen `transform` -- prohlížeč to animuje
* na grafické kartě a layout se nepřepočítává, takže v mřížce se při
* najetí nic nepohne.
*/
transition: transform 300ms ease;
}
.ls-karta:hover .ls-karta__foto {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.ls-karta__foto {
transition: none;
}
.ls-karta:hover .ls-karta__foto {
transform: none;
}
}
.ls-karta__bez-fotky {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-karta__stitek {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0.25rem 0.5rem;
font-family: var(--ls-font-body);
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ls-karta__stitek--prodano {
background: var(--ls-ink);
color: var(--ls-bg);
}
/*
* Rezervovano a "mate v kosiku" nejsou prodano.
*
* Cerny stitek "Prodáno" je konec -- u kusu, o kterem se prave
* rozhoduje, by to byla nepravda. Zlaty rika "pockejte", bily s
* obrysem "tenhle uz drzite vy".
*/
.ls-karta__stitek--rezervovano {
background: var(--ls-gold);
color: var(--ls-ink);
}
.ls-karta__stitek--kosik {
background: #ffffff;
border: 1px solid var(--ls-ink);
color: var(--ls-ink);
}
.ls-karta__stitek--sleva {
background: var(--ls-gold);
color: var(--ls-ink);
}
.ls-karta__popis {
display: block;
padding-top: 0.75rem;
}
.ls-karta__nazev {
display: block;
font-family: var(--ls-font-heading);
font-size: 1rem;
line-height: 1.4;
color: var(--ls-ink);
/*
* Dva řádky, i když název zabere jen jeden.
*
* Názvy se lámou různě -- „Náušnice s karneolem" se vejde na řádek,
* „Náušnice s modrými skleněnými kapkami" ne. Bez rezervy pak cena
* u jedné karty v řadě sedí o 24 px výš než u sousední a mřížka
* vypadá rozsypaně. Je to ta nejlevnější vada, které si člověk
* všimne, aniž by věděl proč.
*
* `min-height`, ne pevná výška: tříslovný název se přelije, nic se
* neořízne.
*/
min-height: 2.8em;
}
.ls-cena {
font-family: var(--ls-font-body);
font-weight: 600;
color: var(--ls-ink);
}
.ls-cena--puvodni {
margin-left: 0.5rem;
font-size: 0.875rem;
color: var(--ls-muted);
text-decoration: line-through;
}
/* ------------------------------------------------------------------ */
/* Akce u kusu — porovnat, náhled, košík, oblíbené */
/* ------------------------------------------------------------------ */
/*
* Čtyři kolečka u pravého okraje fotky.
*
* Odhalují se při najetí NEBO zaměření klávesnicí. `:focus-within` je
* tu podstatné: `visibility: hidden` vyřadí tlačítka z pořadí
* procházení, takže bez něj by se k nim klávesnice vůbec nedostala.
*
* Na dotykovém displeji (`hover: none`) jsou vidět vždycky — tam se
* najet nedá a skryté tlačítko by znamenalo nedostupnou funkci.
*
* Vyjíždějí zprava postupně po 0,2 s: 0,3 → 0,5 → 0,7 → 0,9 s.
* Stejné časování má živý web (`add-to-links` v Coranu) i Next.js
* návrh.
*
* `transition` (ne `animation`) a absolutní umístění spolu znamenají,
* že se při najetí v mřížce nic nehne — CLS zůstává na nule.
*/
.ls-karta__akce {
position: absolute;
top: 0.75rem;
right: 0.75rem;
/*
* Nad fotkou, ne pod ni.
*
* Bez `z-index` rozhoduje poradi v dokumentu a fotka je driv --
* na mysi to nevadi, protoze ikony jsou do najetí `visibility:
* hidden` a kliknuti jimi stejne neprochazi. Na dotykovem displeji
* jsou ale videt porad (najet se tam neda) a tam by kliknuti na
* ikonu propadlo na odkaz karty.
*/
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.ls-karta__akce > li {
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease;
}
.ls-karta__akce > li:nth-child(2) {
transition-duration: 0.5s;
}
.ls-karta__akce > li:nth-child(3) {
transition-duration: 0.7s;
}
.ls-karta__akce > li:nth-child(4) {
transition-duration: 0.9s;
}
.ls-karta:hover .ls-karta__akce > li,
.ls-karta:focus-within .ls-karta__akce > li {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
@media (hover: none) {
.ls-karta__akce > li {
opacity: 1;
visibility: visible;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ls-karta__akce > li {
transition-duration: 1ms;
}
}
.ls-karta__do-kosiku {
margin: 0;
}
/* ==================================================================== */
/* GALERIE NA STRÁNCE KUSU */
/* ==================================================================== */
/*
* Přepínání fotek bez jediného pluginu: skryté přepínače a `:checked`.
* Corano na to mělo slick + easyZoom, jenže ty se nahrávaly s moduly,
* které jsou nahrazené — fotka pak zůstala v HTML, ale nebyla vidět.
*/
.ls-galerie__prepinac {
/*
* Odsunuté z obrazu, ne `display: none` — skrytý prvek vypadne
* z pořadí procházení klávesnicí a fotky by nešly přepnout jinak
* než myší.
*/
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ls-galerie__hlavni {
position: relative;
display: grid;
background: var(--ls-surface);
overflow: hidden;
}
/*
* Snímky leží přes sebe v jedné buňce mřížky, ne absolutně: mřížka si
* od nich vezme výšku nejvyššího, takže se stránka při přepnutí fotky
* nehne. Absolutní umístění by výšku muselo mít zadanou dopředu.
*/
.ls-galerie__snimek {
grid-area: 1 / 1;
display: block;
line-height: 0;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
}
.ls-galerie__snimek img {
display: block;
width: 100%;
height: auto;
}
/* Jediná fotka se zobrazí bez přepínačů. */
.ls-galerie:not(.ls-galerie--vice) .ls-galerie__snimek {
opacity: 1;
visibility: visible;
}
/*
* Párování přepínače se snímkem sourozeneckým kombinátorem `~`, který
* umí sahat jen dopředu — proto jsou všechny přepínače v HTML před
* galerií. `:nth-of-type` se počítá zvlášť pro každý typ prvku, takže
* se dvojice spárují bez jediného natvrdo zapsaného id.
*/
.ls-galerie__prepinac:nth-of-type(1):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(1),
.ls-galerie__prepinac:nth-of-type(2):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(2),
.ls-galerie__prepinac:nth-of-type(3):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(3),
.ls-galerie__prepinac:nth-of-type(4):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(4),
.ls-galerie__prepinac:nth-of-type(5):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(5),
.ls-galerie__prepinac:nth-of-type(6):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(6),
.ls-galerie__prepinac:nth-of-type(7):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(7),
.ls-galerie__prepinac:nth-of-type(8):checked ~ .ls-galerie__hlavni .ls-galerie__snimek:nth-of-type(8) {
opacity: 1;
visibility: visible;
}
/* Zvýrazněný náhled odpovídá zobrazené fotce. */
.ls-galerie__prepinac:nth-of-type(1):checked ~ .ls-galerie__nahledy li:nth-child(1) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(2):checked ~ .ls-galerie__nahledy li:nth-child(2) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(3):checked ~ .ls-galerie__nahledy li:nth-child(3) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(4):checked ~ .ls-galerie__nahledy li:nth-child(4) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(5):checked ~ .ls-galerie__nahledy li:nth-child(5) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(6):checked ~ .ls-galerie__nahledy li:nth-child(6) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(7):checked ~ .ls-galerie__nahledy li:nth-child(7) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(8):checked ~ .ls-galerie__nahledy li:nth-child(8) .ls-galerie__nahled {
border-color: var(--ls-gold);
}
/* Viditelné zaměření klávesnicí se kreslí na odpovídající náhled. */
.ls-galerie__prepinac:nth-of-type(1):focus-visible ~ .ls-galerie__nahledy li:nth-child(1) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(2):focus-visible ~ .ls-galerie__nahledy li:nth-child(2) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(3):focus-visible ~ .ls-galerie__nahledy li:nth-child(3) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(4):focus-visible ~ .ls-galerie__nahledy li:nth-child(4) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(5):focus-visible ~ .ls-galerie__nahledy li:nth-child(5) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(6):focus-visible ~ .ls-galerie__nahledy li:nth-child(6) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(7):focus-visible ~ .ls-galerie__nahledy li:nth-child(7) .ls-galerie__nahled,
.ls-galerie__prepinac:nth-of-type(8):focus-visible ~ .ls-galerie__nahledy li:nth-child(8) .ls-galerie__nahled {
outline: 2px solid var(--ls-ink);
outline-offset: 2px;
}
.ls-galerie__nahledy {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.5rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.ls-galerie__nahled {
display: block;
margin: 0;
cursor: pointer;
border: 1px solid var(--ls-line);
background: var(--ls-surface);
line-height: 0;
transition: border-color 150ms ease;
}
.ls-galerie__nahled:hover {
border-color: var(--ls-gold);
}
.ls-galerie__nahled img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/*
* Lupa v rohu fotky. Celé pravidlo je uvnitř `@media (hover: hover)`
* schválně a v tomhle pořadí: výchozí stav je „vidět", takže na
* dotykovém zařízení, kde se najetím nedá nic odhalit, je lupa prostě
* pořád na svém místě. Teprve tam, kde se najet dá, se schová
* a vyjede při najetí.
*/
.ls-galerie__lupa {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
background: var(--ls-bg);
border: 1px solid var(--ls-line);
color: var(--ls-ink);
pointer-events: none;
}
@media (hover: hover) {
.ls-galerie__lupa {
opacity: 0;
transition: opacity 300ms ease;
}
.ls-galerie__hlavni:hover .ls-galerie__lupa,
.ls-galerie__hlavni:focus-within .ls-galerie__lupa {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ls-galerie__lupa {
transition-duration: 1ms;
}
}
}
/* ==================================================================== */
/* AKCE V HLAVIČCE — hledání, účet, košík */
/* ==================================================================== */
/*
* Moduly v hlavičce si nesou Bootstrapí obaly z Corana (`col-xs-12`
* a spol.), které mají vlastní odsazení a šířku 100 %. V řádku akcí
* kvůli nim obsah přetékal o 25 px za pravý okraj a košík se ořezával.
* Tohle je zkrotí na obyčejné prvky v řadě.
*/
.ls-hlavicka__akce > div,
.ls-hlavicka__akce [class*="col-"] {
width: auto;
max-width: none;
padding: 0;
margin: 0;
float: none;
flex: none;
}
/* ------------------------------------------------------------------ */
/* Hledání */
/* ------------------------------------------------------------------ */
.ls-hledani {
position: relative;
}
.ls-hledani form {
position: relative;
margin: 0;
}
.ls-hledani__pole {
width: 100%;
box-sizing: border-box;
/* Misto pro lupu je vpravo, jako v navrhu -- ne vlevo. */
padding: 0.5rem 2.25rem 0.5rem 0.75rem;
font-family: var(--ls-font-body);
font-size: 0.875rem;
color: var(--ls-ink);
background: var(--ls-bg);
border: 1px solid var(--ls-line);
border-radius: 0;
transition: border-color 150ms ease;
}
.ls-hledani__pole::placeholder {
color: var(--ls-muted);
}
.ls-hledani__pole:focus {
border-color: var(--ls-gold);
outline: none;
}
.ls-hledani__lupa {
position: absolute;
top: 50%;
right: 0.625rem;
transform: translateY(-50%);
color: var(--ls-muted);
pointer-events: none;
}
@media (min-width: 1024px) {
/* Na desktopu je pole v řádku akcí a má pevnou šířku. */
.ls-hledani {
width: 16rem;
}
}
@media (max-width: 1023.98px) {
/*
* Rada hlavicky: logo vlevo, vpravo lupa, kosik a ovladac menu.
*
* Vic se jich tam nevejde -- pri 375 px zbyva vedle loga asi 140 px,
* tedy tri cile po 44 px. Ucet, oblibene a porovnani jsou proto
* ve vysuvnem panelu, ne v hlavicce.
*
* Hledani je na vlastnim radku, ale az po kliknuti na lupu. Drive
* stalo porad videt a hlavicka pak mela tri radky a 187 px vysky --
* pres ctvrtinu obrazovky jeste pred prvnim kusem.
*
* `display: contents` na obalu akci: obal sam zmizi z rozvrzeni
* a jeho deti se stanou primymi polozkami radku. Teprve pak jde
* poradi jednotlivych ikon rovnat `order`em a hledani poslat na
* druhy radek samostatne.
*
* Dve predchozi cesty nefungovaly, obe chycene merenim:
* - `order` na hledani, ale `flex-wrap` o uroven vys: pole se
* odsunulo mimo obrazovku (levy okraj 407 pri sirce 375);
* - zalamovani na obalu akci: obal kosiku si vzal celou sirku
* radku (143 px) a ikony se poskladaly pod sebe.
*/
/*
* Mezera 2 px: logo 128 + pet ikon po 40 = 328, s okraji 32 a
* ctyrmi mezerami po 4 px to delalo 376 pri okne 375 a ovladac
* menu spadl na druhy radek.
*/
.ls-hlavicka__radek {
flex-wrap: wrap;
gap: 0.125rem;
}
.ls-hlavicka__akce {
display: contents;
}
.ls-hlavicka__logo {
order: -1;
/* Odtlaci celou pravou skupinu k okraji. */
margin-inline-end: auto;
}
/*
* Poradi zleva: oblibene, porovnani, kosik, lupa, ovladac menu.
*
* Pet ikon po 40 px je 200 px, logo 144 a postranni okraje 32 --
* dohromady 376 pri okne 375. Logo proto pod 26rem o kousek mensi,
* viz nize.
*/
.ls-seznam-odkaz--oblibene { order: 1; }
.ls-seznam-odkaz--porovnani { order: 2; }
/*
* `order` patri na `.ls-kosik`, ne na jeho obaly: ty maji
* `display: contents`, takze polozkou radku je az odkaz uvnitr.
* Na obalu by se poradi nepropsalo a kosik zustal prvni.
*/
.ls-hlavicka__akce .ls-kosik { order: 3; }
.ls-hlavicka__radek > .ls-hledani-otevrit { order: 4; }
.ls-hlavicka__radek > .ls-menu-otevrit { order: 5; }
/* Ucet zustava v panelu menu -- sesta ikona uz se do rady nevejde. */
.ls-hlavicka__akce > .user-info {
display: none;
}
/*
* 40 px misto 44: pet cilu vedle sebe se jinak do radku nevejde.
* Doporuceni 44 px (WCAG 2.5.5) je uroven AAA, zavazna mez je
* 24 px (2.5.8, AA) -- 40 px je mezi tim s velkou rezervou.
*/
.ls-hlavicka__akce .ls-seznam-odkaz,
.ls-hlavicka__akce .ls-kosik,
.ls-hledani-otevrit,
.ls-menu-otevrit {
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
}
.ls-hlavicka__akce > div {
flex: none;
}
/*
* Obaly kosiku z Corana (`#_desktop_cart_block` > `.blockcart`) si
* braly celou sirku radku, takze ikona kosiku spadla pod ucet.
* Rozpoustime je taky -- v rozvrzeni pak stoji rovnou odkaz s ikonou.
*
* Atributy na `.blockcart` musi zustat v HTML: PrestaShop podle nich
* po pridani kusu obsah kosiku prekresluje.
*/
.ls-hlavicka__akce > #_desktop_cart_block,
.ls-hlavicka__akce .blockcart {
display: contents;
}
/* Uzke telefony: logo mensi, at zbyde na peti ikonach cil pro prst. */
@media (max-width: 26rem) {
.ls-hlavicka__logo img {
height: 2rem;
}
}
}
/* ------------------------------------------------------------------ */
/* Hledani pod lupou */
/* ------------------------------------------------------------------ */
/*
* Pole hledani se schova pod lupu vsude pod 1200 px, ne jen na mobilu.
*
* Od 1024 px se zapina vodorovne menu a pole vedle loga, jenze soucet
* je pres 1100 px -- namereno pri okne 1024: vsechny ctyri ikony stoji
* mimo obraz, prvni na x=1118. Pole ma 209 px a je to jedina polozka
* radku, ktera se da schovat, aniz by se neco ztratilo: lupa ho vrati
* na jedno klepnuti.
*/
@media (max-width: 1199.98px) {
/*
* Mezera 2 px, ne 16. S `display: contents` nize se z ikon stanou
* polozky radku a kazda si vezme celou jeho mezeru: pet ikon tak
* pribralo 80 px navic a ucet s kosikem spadly na druhy radek.
*/
.ls-hlavicka__radek {
flex-wrap: wrap;
gap: 0.125rem;
}
/*
* Obal akci musi z rozvrzeni zmizet, jinak by pole hledani zabralo
* celou sirku JEHO, ne celeho radku -- obal ma vedle menu jen asi
* 200 px.
*/
.ls-hlavicka__akce {
display: contents;
}
/*
* Menu si nesmi brat volne misto (`flex: 1` ze zakladniho pravidla).
* S nim odtlacilo ikony za pravy okraj a ucet s kosikem spadly na
* druhy radek -- hlavicka mela 141 px misto 69.
*/
.ls-hlavicka__radek > .ls-menu {
flex: 0 1 auto;
min-width: 0;
}
.ls-hlavicka__akce > .ls-seznam-odkaz:first-of-type {
margin-inline-start: auto;
}
.ls-hledani-otevrit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin: 0;
color: var(--ls-ink);
cursor: pointer;
}
.ls-hlavicka__akce .ls-hledani {
order: 10;
flex-basis: 100%;
width: 100%;
/*
* `display: none` by stacilo, ale pole by pak naskocilo skokem.
* Mrizka 0fr -> 1fr se da animovat a pole vyjede.
*/
display: grid;
grid-template-rows: 0fr;
margin-top: 0;
overflow: hidden;
transition: grid-template-rows 200ms ease, margin-top 200ms ease;
}
.ls-hledani-prepinac:checked ~ .ls-hlavicka__akce .ls-hledani {
grid-template-rows: 1fr;
margin-top: 0.5rem;
}
.ls-hledani-prepinac:checked ~ .ls-hledani-otevrit {
color: var(--ls-gold-text);
}
/* Dite mrizky nesmi mit vlastni vysku, jinak se nesbali. */
.ls-hlavicka__akce .ls-hledani > form {
min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
.ls-hlavicka__akce .ls-hledani {
transition: none;
}
}
}
/* Od 1200 px je pole videt porad a lupa je zbytecna. */
@media (min-width: 1200px) {
.ls-hledani-otevrit {
display: none;
}
}
/* ------------------------------------------------------------------ */
/* Účet a košík */
/* ------------------------------------------------------------------ */
.ls-ucet,
.ls-kosik {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* 40×40 px — spodní hranice pohodlného cíle pro prst. */
width: 2.5rem;
height: 2.5rem;
color: var(--ls-ink);
text-decoration: none;
transition: color 150ms ease;
}
.ls-ucet:hover,
.ls-kosik:hover {
color: var(--ls-gold-text);
}
.ls-ucet--prihlasen {
color: var(--ls-gold-text);
}
.ls-kosik__pocet {
position: absolute;
top: 0.125rem;
right: 0.125rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 1.125rem;
height: 1.125rem;
padding-inline: 0.25rem;
background: var(--ls-gold);
color: var(--ls-ink);
border-radius: 9999px;
font-family: var(--ls-font-body);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1;
}
/* ==================================================================== */
/* VÝPIS KATEGORIE */
/* ==================================================================== */
/*
* Rozměry odečtené z Next.js verze při šířce okna 1440 px:
* levý sloupec 220 px, mezera 40 px, mřížka 4 × 221 px, svislé mezery
* 40 px / vodorovné 24 px, mezi sloupcem a obsahem svislá linka.
*/
.ls-kategorie-hlavicka {
margin-bottom: 1.5rem;
}
.ls-kategorie-hlavicka__nadpis {
margin: 0;
font-family: var(--ls-font-heading);
font-size: 1.75rem;
font-weight: 400;
line-height: 1.2;
color: var(--ls-ink);
}
@media (min-width: 640px) {
.ls-kategorie-hlavicka__nadpis {
font-size: 2.25rem;
}
}
.ls-kategorie-hlavicka__pocet {
margin: 0.375rem 0 0;
font-family: var(--ls-font-body);
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-kategorie-hlavicka__popis {
margin-top: 1rem;
max-width: 48rem;
font-family: var(--ls-font-body);
color: var(--ls-body);
}
/* ------------------------------------------------------------------ */
/* Filtry v levém sloupci */
/* ------------------------------------------------------------------ */
.ls-filtry {
font-family: var(--ls-font-body);
}
/*
* Dostupnost jako prepinac, ne jako skupina filtru.
*
* Je to odkaz, ne ``: filtrovani bezi bez
* JavaScriptu pres URL a zaskrtavatko by se muselo odesilat formularem.
* Ctverecek je proto nakresleny a stav nese `aria-pressed`.
*/
.ls-dostupnost {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 1.25rem;
color: var(--ls-ink);
font-size: 0.875rem;
text-decoration: none;
}
.ls-dostupnost__ctverec {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 1.125rem;
height: 1.125rem;
border: 1px solid var(--ls-line);
color: #ffffff;
transition: background-color 150ms ease, border-color 150ms ease;
}
.ls-dostupnost:hover .ls-dostupnost__ctverec {
border-color: var(--ls-ink);
}
.ls-dostupnost--zapnuto .ls-dostupnost__ctverec {
background: var(--ls-gold);
border-color: var(--ls-gold);
}
.ls-filtry__zrusit {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--ls-line);
color: var(--ls-ink);
font-size: 0.875rem;
text-decoration: none;
transition: border-color 150ms ease;
}
.ls-filtry__zrusit:hover {
border-color: var(--ls-ink);
}
/*
* `fieldset` má v prohlížečích vlastní rámeček i odsazení -- nuluje se,
* aby skupiny oddělovala jen tenká linka mezi nimi.
*/
.ls-filtry__skupina {
margin: 0;
padding: 1rem 0;
border: 0;
border-top: 1px solid var(--ls-line);
}
.ls-filtry__skupina:first-of-type {
border-top: 0;
padding-top: 0;
}
.ls-filtry__nadpis {
padding: 0;
margin-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ls-ink);
}
.ls-filtry__seznam {
margin: 0;
padding: 0;
list-style: none;
}
.ls-filtry__seznam > li + li {
margin-top: 0.375rem;
}
/*
* `space-between` tu nestaci: u kamenu ma polozka TRI deti (barevny
* ctverec, nazev, pocet) a rozestup je rozhodil po celem radku --
* nazev skoncil uprostred, kdezto u materialu u leveho okraje.
* Ctverec s nazvem patri k sobe vlevo, pocet sam vpravo.
*/
.ls-filtry__polozka {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--ls-body);
text-decoration: none;
transition: color 150ms ease;
}
.ls-filtry__polozka:hover {
color: var(--ls-gold-text);
}
.ls-filtry__polozka--zapnuta {
color: var(--ls-gold-text);
font-weight: 600;
}
.ls-filtry__pocet {
margin-inline-start: auto;
color: var(--ls-muted);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------------ */
/* Lišta nad výpisem — řazení */
/* ------------------------------------------------------------------ */
.ls-vypis-horni {
display: flex;
justify-content: flex-end;
margin-bottom: 1.5rem;
}
.ls-razeni {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-family: var(--ls-font-body);
font-size: 0.875rem;
color: var(--ls-body);
}
.ls-razeni__ikona {
color: var(--ls-muted);
flex: none;
}
.ls-razeni__popisek {
margin: 0;
white-space: nowrap;
}
.ls-razeni__vyber {
padding: 0.375rem 0.5rem;
font-family: inherit;
font-size: inherit;
color: var(--ls-ink);
background: var(--ls-bg);
border: 1px solid var(--ls-line);
border-radius: 0;
}
.ls-razeni__vyber:focus {
border-color: var(--ls-gold);
outline: none;
}
.ls-razeni__odeslat {
padding: 0.375rem 0.75rem;
font: inherit;
color: var(--ls-ink);
background: var(--ls-bg);
border: 1px solid var(--ls-line);
cursor: pointer;
}
/* ------------------------------------------------------------------ */
/* Dva sloupce: filtry | výpis */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
/*
* Levý sloupec je 220 px a od obsahu ho dělí svislá linka --
* stejně jako v Next.js verzi. Corano tu mělo Bootstrapí mřížku
* `col-lg-3` / `col-lg-9`, která dávala jiné šířky a žádnou linku.
*/
#left-column {
flex: 0 0 220px;
max-width: 220px;
padding-inline: 0;
border-right: 1px solid var(--ls-line);
padding-right: 1.25rem;
}
#content-wrapper.left-column,
#center-column {
padding-left: 2.5rem;
}
}
@media (max-width: 1023.98px) {
/*
* Na úzké obrazovce jdou filtry POD výpis: kdo přijde do kategorie
* z menu, chce nejdřív vidět kusy. `order` to přesune vizuálně, bez
* zásahu do pořadí čtení dokumentu.
*/
#left-column {
order: 2;
border-right: 0;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid var(--ls-line);
}
}
/*
* Bootstrapí `.row` má záporné vodorovné okraje (−15 px), takže sloupce
* uvnitř rámce začínaly o 15 px vlevo proti hlavičce a patičce
* — naměřeno: levý sloupec na 90 místo na 105.
*
* Ruší se to přímo v řádku pod kontejnerem stránky, ne globálně:
* `.row` používá Corano i uvnitř modulů, kde záporné okraje dávají
* smysl.
*/
#wrapper > .container > .row {
margin-inline: 0;
}
#wrapper > .container > .row > [class*="col-"] {
padding-inline: 0;
}
/*
* Mezera mezi filtry a vypisem. Musi byt AZ ZA pravidlem vyse, ktere
* nuluje Bootstrapi odsazeni sloupcu -- jinak ho prebije a mrizka
* zacne tesne za svislou linkou (nameřeno: 325 misto 365).
*/
@media (min-width: 1024px) {
#wrapper > .container > .row > #content-wrapper.left-column,
#wrapper > .container > .row > #content-wrapper.right-column {
padding-left: 2.5rem;
/*
* Obsah si vezme zbytek radku, ne Bootstrapich 75 % (`col-md-9`).
* S pevnymi 75 % zbyval vpravo prazdny pruh -- mrizka byla 872 px
* siroka misto 956, protoze levy sloupec ma pevnych 220 px a ne
* ctvrtinu.
*/
flex: 1 1 0;
max-width: none;
}
}
/* ------------------------------------------------------------------ */
/* Drobečková navigace */
/* ------------------------------------------------------------------ */
.ls-drobecky {
margin-bottom: 1.5rem;
font-family: var(--ls-font-body);
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-drobecky__seznam {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
margin: 0;
padding: 0;
list-style: none;
}
.ls-drobecky__polozka {
display: flex;
align-items: center;
gap: 0.375rem;
}
.ls-drobecky a {
color: inherit;
text-decoration: none;
}
.ls-drobecky a:hover {
color: var(--ls-gold-text);
text-decoration: underline;
}
/* Oddělovač je světlejší než text -- je to ozdoba, ne obsah. */
.ls-drobecky__oddelovac {
color: var(--ls-line);
}
.ls-drobecky__aktualni {
color: var(--ls-ink);
}
/* ==================================================================== */
/* ODKRÝVÁNÍ OBSAHU PŘI SCROLLOVÁNÍ */
/* ==================================================================== */
/*
* Přeneseno z Next.js návrhu beze změny principu: je to
* scroll-driven animace v CSS (`animation-timeline: view()`), tedy
* BEZ posluchače scrollu a bez práce na hlavním vlákně. Prohlížeč si
* ji odbaví sám, stejně jako plynulé scrollování.
*/
@keyframes ls-odkryt {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
/*
* Rozsah je v PIXELECH scrollu, ne v procentech.
*
* Procenta se počítají z výšky samotného prvku, takže nízký nadpis
* by se prolnul za 25 px scrollu (což není vidět) a vysoký blok by
* se táhl přes půl obrazovky. V pixelech znamená pro každý prvek
* totéž: odkrývá se na 200 px scrollu od chvíle, kdy se jeho horní
* hrana objeví u spodního okraje okna.
*
* Že rozsah končí brzy, řeší i směr nahoru: scroll-driven animace
* se při scrollování zpět odvíjejí pozpátku, ale tady jen v pásu
* u dolní hrany okna, kudy prvek stejně odchází ze scény.
* Uprostřed obrazovky se nic znovu neprolíná.
*/
[data-reveal],
[data-reveal-grid] > * {
animation: ls-odkryt linear both;
animation-timeline: view();
animation-range: cover 30px cover 230px;
}
/*
* Postupné odkrývání po sloupcích.
*
* Kusy v jedné řadě mají stejnou horní hranu, takže by vstoupily
* do obrazu naráz. Posunutý začátek rozsahu je rozfázuje zleva
* doprava -- o 30 px scrollu na sloupec.
*/
/*
* Totez pro mrizku kusu, jen po ctyrech sloupcich.
*
* Karty v jedne rade maji stejnou horni hranu, takze bez tohohle
* naskocily vsechny naraz -- rada se objevila jako jeden blok.
* Posunuty zacatek rozsahu je rozfazuje zleva doprava, o 45 px
* scrollu na sloupec: oko stihne projet radu, misto aby dostalo
* ctyri veci soucasne.
*
* Rozsah KONCI u vsech stejne (cover 260px). Kdyby se posouval
* taky, posledni sloupec by se odkryval pomaleji nez prvni
* a rada by dobehla roztrepena.
*/
@media (min-width: 40rem) {
[data-reveal-grid] > *:nth-child(4n + 2) {
animation-range: cover 75px cover 260px;
}
[data-reveal-grid] > *:nth-child(4n + 3) {
animation-range: cover 120px cover 260px;
}
[data-reveal-grid] > *:nth-child(4n + 4) {
animation-range: cover 165px cover 260px;
}
}
@media (min-width: 40rem) {
[data-reveal-columns] > *:nth-child(2n + 1) {
animation-range: cover 30px cover 230px;
}
[data-reveal-columns] > *:nth-child(2n + 2) {
animation-range: cover 60px cover 260px;
}
}
@media (min-width: 64rem) {
[data-reveal-columns="4"] > *:nth-child(3n + 1) {
animation-range: cover 30px cover 230px;
}
[data-reveal-columns="4"] > *:nth-child(3n + 2) {
animation-range: cover 60px cover 260px;
}
[data-reveal-columns="4"] > *:nth-child(3n + 3) {
animation-range: cover 90px cover 290px;
}
}
@media (min-width: 80rem) {
[data-reveal-columns="4"] > *:nth-child(4n + 1) {
animation-range: cover 30px cover 230px;
}
[data-reveal-columns="4"] > *:nth-child(4n + 2) {
animation-range: cover 60px cover 260px;
}
[data-reveal-columns="4"] > *:nth-child(4n + 3) {
animation-range: cover 90px cover 290px;
}
[data-reveal-columns="4"] > *:nth-child(4n + 4) {
animation-range: cover 120px cover 320px;
}
}
}
}
/*
* Záložní cesta pro prohlížeče bez `animation-timeline`.
*
* Příznak `data-reveal-js` na nasazuje lasofia.js, a to jen
* tehdy, když prohlížeč scroll-driven animace NEUMÍ. Bez toho příznaku
* se tahle pravidla neuplatní vůbec, takže obsah nikdy nezůstane
* neviditelný kvůli skriptu, který nedoběhl.
*/
@media (prefers-reduced-motion: no-preference) {
:root[data-reveal-js] [data-reveal],
:root[data-reveal-js] [data-reveal-grid] > * {
opacity: 0;
transform: translateY(14px);
transition: opacity 400ms ease, transform 400ms ease;
}
:root[data-reveal-js] [data-odkryto] {
opacity: 1;
transform: none;
}
}
/* ==================================================================== */
/* PŘILEPENÁ HLAVIČKA — DVĚ PŘEKÁŽKY */
/* ==================================================================== */
/*
* Hlavička se nelepila, přestože měla `position: sticky; top: 0`.
* Naměřeno: po odscrollování o 900 px měla horní hranu na −859 px
* místo na 0. Překážky byly DVĚ a každá sama o sobě stačila.
*
* ---------------------------------------------------------------------
* 1. `` má od Corana `overflow: hidden`
*
* Předek s `overflow` jiným než `visible` se stane scroll kontejnerem
* a `sticky` uvnitř se lepí k NĚMU, ne k oknu. Protože se main
* nescrolluje, neprojeví se to nijak — hlavička prostě odjede.
*
* `clip` ořezává stejně jako `hidden` (vodorovné přetečení tedy
* nevyrobí posuvník), ale scroll kontejner NEVYTVÁŘÍ.
*/
main {
overflow: clip;
}
/*
* Záložní cesta pro prohlížeče bez `overflow: clip`. Tam je lepší
* vzdát se ořezu než lepení: vodorovný posuvník je drobnost,
* hlavička mimo dosah je vada.
*/
@supports not (overflow: clip) {
main {
overflow: visible;
}
}
/*
* ---------------------------------------------------------------------
* 2. Lepení funguje jen UVNITŘ rodiče
*
* `.ls-hlavicka` sedí v ``, který je vysoký jen
* jako hlavička sama — naměřeno 109 px proti 3755 px celé stránky.
* Sticky tedy nemá kam cestovat: jakmile rodič odscrolluje, odjede
* s ním.
*
* `display: contents` obal z rozvržení odstraní a jeho děti se stanou
* přímými potomky ``. Teprve pak má hlavička nad sebou dost
* místa a drží se u horního okraje po celou dobu scrollování.
*
* Ověřeno: po rozpuštění obalu má horní hrana 0 px.
*/
#header {
display: contents;
}
/* ==================================================================== */
/*
* `` má od Corana `overflow: hidden`.
*
* Předek s `overflow` jiným než `visible` vytvoří scroll kontejner
* a `position: sticky` uvnitř něj se přestane lepit k oknu — lepí se
* k tomu kontejneru, tedy nikam. Hlavička proto odjížděla pryč,
* přestože měla `position: sticky; top: 0`.
*
* Naměřeno: po odscrollování o 800 px měla horní hranu na −759 px
* místo na 0.
*
* `overflow: clip` místo `visible`: ořezává stejně jako `hidden`
* (takže vodorovné přetečení nevyrobí posuvník), ale NEVYTVÁŘÍ scroll
* kontejner — a lepení tím pádem funguje.
*/
main {
overflow: clip;
}
/*
* Záložní cesta pro prohlížeče bez `overflow: clip`. Tam je lepší
* vzdát se ořezu než lepení: vodorovný posuvník je drobnost, hlavička
* mimo dosah je vada.
*/
@supports not (overflow: clip) {
main {
overflow: visible;
}
}
/* ==================================================================== */
/* SROVNÁNÍ S NÁVRHEM — DROBNOSTI, KTERÉ PŘEBÍJÍ CORANO */
/* ==================================================================== */
/*
* Název a cena na kartě jsou zarovnané VLEVO, ne na střed.
*
* Corano je centruje přes `.product-description { text-align: center }`.
* Ve sloupci kusů se vycentrovaný text hůř čte: oko musí u každého
* řádku hledat, kde začíná. Next.js návrh je má vlevo.
*/
.ls-karta,
.ls-karta__popis,
.ls-karta__nazev,
.ls-karta .ls-cena {
text-align: left;
}
/* ------------------------------------------------------------------ */
/* Stránkování */
/* ------------------------------------------------------------------ */
/*
* Prostá čísla, ne kolečka. Corano z nich dělá kruhová tlačítka
* s pozadím; návrh má jen čísla s podtrženou aktivní stránkou.
*/
.pagination,
.page-list {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
margin: 2.5rem 0 0;
padding: 0;
list-style: none;
font-family: var(--ls-font-body);
font-size: 0.875rem;
}
.page-list li {
margin: 0;
list-style: none;
}
.page-list a,
.page-list span {
display: flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding-inline: 0.5rem;
background: none;
border: 0;
border-radius: 0;
color: var(--ls-body);
text-decoration: none;
transition: color 150ms ease;
}
.page-list a:hover {
color: var(--ls-gold-text);
background: none;
}
.page-list .current a,
.page-list .current span {
color: var(--ls-ink);
font-weight: 600;
border-bottom: 2px solid var(--ls-gold);
background: none;
}
.page-list .disabled a,
.page-list .disabled span {
color: var(--ls-line);
}
/* ==================================================================== */
/* REZERVACE JEDINEHO KUSU */
/* ==================================================================== */
/*
* Kazdy sperk existuje v jedinem kuse, takze "nekdo ho ma v kosiku" a
* "nekdo se na nej diva" jsou skutecne informace pro rozhodnuti.
*
* Vypadaji proto jako poznamka, ne jako vystraha: zadna cervena, zadne
* blikani. Barvu dostane az posledni dve minuty odpoctu, kdy uz je to
* doopravdy o cas.
*/
.ls-stav-kusu {
margin-top: 1.25rem;
padding: 0.875rem 1rem;
border: 1px solid var(--ls-line);
border-left: 2px solid var(--ls-gold);
background: #fbfaf8;
font-family: var(--ls-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--ls-body);
}
.ls-stav-kusu__radek {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
}
.ls-stav-kusu__radek + .ls-stav-kusu__radek {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--ls-line);
}
/* Ikona nesmi zmensit, kdyz se text zalomi na dva radky. */
.ls-stav-kusu__radek > svg {
flex: 0 0 auto;
margin-top: 0.15rem;
color: var(--ls-gold-text);
}
/* ------------------------------------------------------------------ */
/* Odpocet v kosiku */
/* ------------------------------------------------------------------ */
.ls-rezervace-odpocet {
display: flex;
align-items: center;
gap: 0.375rem;
margin: 0.5rem 0 0;
font-family: var(--ls-font-body);
font-size: 0.8125rem;
color: var(--ls-muted);
}
.ls-rezervace-odpocet > svg {
flex: 0 0 auto;
}
/*
* Cas je `tabular-nums`: bez toho se radek pri kazde zmene cislice
* o kousek posouva, protoze proporcionalni "1" je uzsi nez "8".
*/
.ls-rezervace-odpocet strong {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ls-ink);
}
.ls-rezervace-odpocet[data-ls-dochazi] {
color: var(--ls-gold-text);
}
.ls-rezervace-odpocet[data-ls-dochazi] strong {
color: var(--ls-gold-text);
}
/* ==================================================================== */
/* RYCHLY NAHLED */
/* ==================================================================== */
/*
* Dialog otevira Bootstrap (jadrovy theme.js), takze `.modal`,
* `.modal-dialog` a `.modal-content` maji svoje vlastni styly z
* Corana. Prepisuji se jen natolik, aby zmizel jeho ramecek a
* zaobleni -- vzhled uvnitr uz je cely nas.
*/
.ls-nahled .modal-dialog {
max-width: 62rem;
width: calc(100% - 2rem);
margin: 2rem auto;
}
.ls-nahled .modal-content {
position: relative;
border: 0;
border-radius: 0;
box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.3);
background: #ffffff;
}
/*
* Krizek je ctverec s obrysem, ne Bootstrapi "x" bez tvaru -- stejne
* jako v navrhu. `opacity` se prepisuje, protoze Bootstrap ji dava
* 0.5 a znacka by byla seda.
*/
.ls-nahled__zavrit {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid var(--ls-ink);
background: #ffffff;
color: var(--ls-ink);
opacity: 1;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.ls-nahled__zavrit:hover {
background: var(--ls-ink);
color: #ffffff;
opacity: 1;
}
.ls-nahled__telo {
display: grid;
gap: 2.5rem;
padding: 2.5rem;
}
@media (min-width: 768px) {
.ls-nahled__telo {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: start;
}
}
/*
* Pomer stran drzi `aspect-ratio`, ne vyska v pixelech: fotky jsou
* ctvercove a dialog se tak nehne, nez se obrazek nacte.
*/
.ls-nahled__foto {
display: grid;
place-items: center;
aspect-ratio: 1;
overflow: hidden;
background: var(--ls-surface, #f7f5f2);
}
/*
* Priblizeni pri najeti.
*
* Nahled ukazuje jednu fotku a na detail sperku -- kameny, drat,
* povrch -- je na ni malo videt. Priblizeni je proto uvnitr ramu:
* fotka se zvetsi, ram zustane. `overflow: hidden` vyse drzi
* presah uvnitr, takze se v dialogu nic nehne.
*
* `transform`, ne `width`: prohlizec ho spocita na graficke karte a
* nic kolem se nepreposiluje.
*/
.ls-nahled__foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.ls-nahled__foto:hover img {
transform: scale(1.6);
}
/*
* Kdo si vypnul animace, priblizeni nedostane. Neni to informace,
* jen pohodli -- a pohyb pres celou fotku je presne to, co tohle
* nastaveni ma vypnout.
*/
@media (prefers-reduced-motion: reduce) {
.ls-nahled__foto img {
transition: none;
}
.ls-nahled__foto:hover img {
transform: none;
}
}
.ls-nahled__popis {
font-family: var(--ls-font-body);
}
.ls-nahled__nazev {
margin: 0;
font-family: var(--ls-font-heading);
font-size: 1.75rem;
font-weight: 400;
line-height: 1.2;
color: var(--ls-ink);
}
.ls-nahled__kod {
margin: 0.375rem 0 0;
font-size: 0.8125rem;
color: var(--ls-muted);
}
.ls-nahled__cena {
margin: 1rem 0 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--ls-ink);
}
.ls-nahled__text {
margin-top: 1rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ls-body);
}
.ls-nahled__text p {
margin: 0 0 0.5rem;
}
.ls-nahled__dostupnost {
margin: 1rem 0 0;
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-nahled__form {
margin-top: 1.25rem;
}
/*
* Tlacitko pres celou sirku sloupce: v navrhu je to jedina vec, ktera
* ma barevnou plochu, a nese cely dialog.
*/
.ls-nahled__do-kosiku {
display: block;
width: 100%;
padding: 0.9375rem 1.5rem;
border: 0;
background: var(--ls-gold);
color: #ffffff;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 150ms ease;
}
.ls-nahled__do-kosiku:hover {
background: var(--ls-gold-dark);
}
.ls-nahled__rezervace {
margin: 0.75rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--ls-muted);
}
.ls-nahled__odkazy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
margin: 1.5rem 0 0;
}
.ls-nahled__odkaz {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ls-gold-text);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.ls-nahled__odkaz:hover {
text-decoration: underline;
}
/* Tlacitko porovnani vypada jako odkaz -- vedle nej stoji a dela totez. */
.ls-nahled__odkaz--tlacitko {
padding: 0;
border: 0;
background: none;
font-family: inherit;
cursor: pointer;
}
/* ==================================================================== */
/* POKLADNA */
/* ==================================================================== */
.ls-pokladna {
font-family: var(--ls-font-body);
}
.ls-pokladna__hlavicka {
margin-bottom: 2.5rem;
}
.ls-pokladna__nadpis {
margin: 0;
font-family: var(--ls-font-heading);
font-size: 2.25rem;
font-weight: 400;
line-height: 1.2;
color: var(--ls-ink);
}
.ls-pokladna__podnadpis {
margin: 0.5rem 0 0;
max-width: 44rem;
font-size: 0.9375rem;
color: var(--ls-muted);
}
.ls-pokladna__mrizka {
display: grid;
gap: 2.5rem;
align-items: start;
}
@media (min-width: 992px) {
.ls-pokladna__mrizka {
grid-template-columns: minmax(0, 1fr) 23rem;
}
}
/* ------------------------------------------------------------------ */
/* Kroky */
/* ------------------------------------------------------------------ */
/*
* Kroky nejsou karty s ramečkem, jen oddíly pod sebou -- stejně jako
* v návrhu. Rámeček kolem každého z nich dělal ze čtyř políček čtyři
* krabice a stránka pak vypadala rozsypaně.
*/
.ls-krok {
padding: 0;
border: 0;
background: none;
}
.ls-krok + .ls-krok {
margin-top: 2.5rem;
}
.ls-krok__nadpis {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin: 0 0 1rem;
font-family: var(--ls-font-heading);
font-size: 1.375rem;
font-weight: 400;
color: var(--ls-ink);
}
.ls-krok__upravit {
font-family: var(--ls-font-body);
font-size: 0.8125rem;
color: var(--ls-gold-text);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
/*
* Nedosažitelný krok je prošedlý, ne skrytý: člověk má vidět, co ho
* ještě čeká. Obsah kroku schová jádrový checkout.js sám.
*/
.ls-krok:not(.-reachable) .ls-krok__nadpis {
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Formulářová pole */
/* ------------------------------------------------------------------ */
/*
* Pole na celou šířku a popisek nad ním, ne dva sloupce s popiskem
* vlevo. Oko tak čte jedním tahem shora dolů a na mobilu se nic
* nemusí přeskládávat.
*/
.ls-pokladna .form-group {
display: block;
margin-bottom: 1.25rem;
}
.ls-pokladna .form-control-label {
display: block;
width: auto;
padding: 0 0 0.375rem;
text-align: left;
font-size: 0.875rem;
font-weight: 400;
color: var(--ls-body);
}
.ls-pokladna .form-control,
.ls-pokladna input[type="text"],
.ls-pokladna input[type="email"],
.ls-pokladna input[type="tel"],
.ls-pokladna select {
width: 100%;
box-sizing: border-box;
height: auto;
padding: 0.75rem;
border: 1px solid var(--ls-line);
border-radius: 0;
background: #ffffff;
box-shadow: none;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
color: var(--ls-ink);
transition: border-color 150ms ease;
}
.ls-pokladna .form-control:focus,
.ls-pokladna input:focus,
.ls-pokladna select:focus {
border-color: var(--ls-gold);
outline: none;
box-shadow: none;
}
.ls-pokladna .form-control-comment {
margin-top: 0.25rem;
font-size: 0.8125rem;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Doprava a platba jako karty */
/* ------------------------------------------------------------------ */
/*
* Každá možnost je obdélník, do kterého se dá kliknout celou plochou.
* Samotné kolečko je cíl o průměru 13 px -- na dotyku se do něj trefí
* málokdo.
*/
.ls-pokladna .delivery-option,
.ls-pokladna .payment-option {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0 0 0.75rem;
padding: 1rem;
border: 1px solid var(--ls-line);
background: #ffffff;
transition: border-color 150ms ease;
}
.ls-pokladna .delivery-option:hover,
.ls-pokladna .payment-option:hover {
border-color: var(--ls-gold);
}
.ls-pokladna .delivery-option label,
.ls-pokladna .payment-option label {
display: flex;
flex: 1;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin: 0;
cursor: pointer;
font-weight: 400;
}
.ls-pokladna .carrier-name,
.ls-pokladna .payment-option label span {
color: var(--ls-ink);
}
.ls-pokladna .carrier-price {
font-weight: 600;
white-space: nowrap;
}
.ls-pokladna .carrier-delay {
display: block;
margin-top: 0.25rem;
font-size: 0.8125rem;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Tlačítko dál */
/* ------------------------------------------------------------------ */
.ls-pokladna .continue,
.ls-pokladna button[type="submit"].btn-primary {
padding: 0.875rem 2rem;
border: 0;
border-radius: 0;
background: var(--ls-gold);
color: #ffffff;
font-family: var(--ls-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 150ms ease;
}
.ls-pokladna .continue:hover,
.ls-pokladna button[type="submit"].btn-primary:hover {
background: var(--ls-gold-dark);
}
/* ==================================================================== */
/* REKAPITULACE */
/* ==================================================================== */
/*
* Přilepená při scrollování.
*
* Formulář pokladny je dlouhý; bez tohohle by rekapitulace odjela
* nahoru hned u doručovací adresy a člověk by u výběru dopravy
* neviděl, kolik vlastně platí -- přitom právě tam se cena mění.
*
* `top` počítá s přilepenou hlavičkou nad sebou, jinak by se pod ni
* zasunula.
*/
.ls-pokladna__souhrn {
position: sticky;
top: calc(var(--ls-vyska-hlavicky, 72px) + 1.5rem);
}
.ls-souhrn {
padding: 1.5rem;
border: 1px solid var(--ls-line);
background: var(--ls-surface, #f7f5f2);
}
.ls-souhrn__nadpis {
margin: 0 0 1.25rem;
font-family: var(--ls-font-heading);
font-size: 1.25rem;
font-weight: 400;
color: var(--ls-ink);
}
.ls-souhrn__kusy {
margin: 0;
padding: 0;
list-style: none;
}
.ls-souhrn__kus {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: start;
padding-bottom: 1rem;
}
.ls-souhrn__kus + .ls-souhrn__kus {
padding-top: 1rem;
border-top: 1px solid var(--ls-line);
}
.ls-souhrn__foto {
width: 3.5rem;
height: 3.5rem;
object-fit: cover;
}
.ls-souhrn__popis {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.ls-souhrn__nazev {
font-size: 0.875rem;
line-height: 1.4;
color: var(--ls-ink);
}
.ls-souhrn__pocet {
font-size: 0.8125rem;
color: var(--ls-muted);
}
.ls-souhrn__cena {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
color: var(--ls-ink);
}
.ls-souhrn__ucet {
padding-top: 1rem;
border-top: 1px solid var(--ls-line);
}
.ls-souhrn__radek {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--ls-body);
}
.ls-souhrn__radek--celkem {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--ls-line);
font-size: 1.0625rem;
font-weight: 600;
color: var(--ls-ink);
}
.ls-souhrn__dan {
margin: 0.375rem 0 0;
font-size: 0.8125rem;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Rozbití Bootstrapí mřížky uvnitř pokladny */
/* ------------------------------------------------------------------ */
/*
* Formuláře pokladny mají popisek v `col-md-3` a pole v `col-md-6`,
* tedy plovoucí sloupce se zápornými okraji. Jakmile se `.form-group`
* přepnula na `display: block`, přestal okolo nich být `row`, který ty
* záporné okraje vyrovnává -- popisky vylezly vlevo mimo rámeček
* ("méno", "říjmení") a pole zůstala úzká.
*
* Sloupcové třídy se proto uvnitř pokladny ruší úplně. Rozvržení dělá
* grid níž, ne Bootstrap.
*/
.ls-pokladna .form-group > [class*="col-"],
.ls-pokladna .form-footer > [class*="col-"],
.ls-pokladna .form-fields > [class*="col-"] {
float: none;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.ls-pokladna .form-group.row,
.ls-pokladna .row {
display: block;
margin-left: 0;
margin-right: 0;
}
/*
* Jméno a příjmení vedle sebe, jako v návrhu. Zbytek polí přes celou
* šířku -- adresa ani e-mail se na půlku nehodí.
*/
@media (min-width: 640px) {
/*
* `.row` v selektoru je nutna: nize stoji
* `.ls-pokladna .form-group.row { display: block }` a pri stejne
* specificite vyhrava to pozdejsi -- pole se pak postavila pod
* sebe, prestoze mela polovicni sirku.
*/
.ls-pokladna .form-group.row.ls-pole--pul {
display: inline-block;
/*
* 50% minus mezera minus mezislovni mezera.
*
* Dva `inline-block` prvky oddeluje v HTML zalomeni radku, ktere
* prohlizec vykresli jako mezeru ~4 px. Pri `calc(50% - 0.5rem)`
* to stacilo na to, aby druhe pole spadlo pod prvni -- vypadalo
* to jako chyba v sirce, ale chybel prostor pro mezeru.
*/
width: calc(50% - 1rem);
vertical-align: top;
}
.ls-pokladna .form-group.row.ls-pole--pul + .ls-pole--pul {
margin-left: 0.875rem;
}
}
/* Vysvětlivky pod poli jsou drobné, ne stejně velké jako obsah. */
.ls-pokladna .form-control-comment,
.ls-pokladna .help-block {
font-size: 0.8125rem;
line-height: 1.4;
color: var(--ls-muted);
}
/*
* Zaškrtávátka: popisek vedle, ne pod. Bootstrap jim dává
* `margin-left` pro plovoucí layout, který tu není.
*/
.ls-pokladna .custom-checkbox,
.ls-pokladna .form-check {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin-bottom: 0.875rem;
padding-left: 0;
font-size: 0.875rem;
line-height: 1.5;
}
.ls-pokladna .custom-checkbox input[type="checkbox"],
.ls-pokladna .form-check input[type="checkbox"] {
flex: 0 0 auto;
margin: 0.2rem 0 0;
width: auto;
}
.ls-pokladna .custom-checkbox span,
.ls-pokladna .custom-checkbox label {
margin: 0;
font-weight: 400;
}
/* Odkaz "Přihlásit se" vedle "Objednat bez registrace". */
.ls-pokladna .nav-tabs,
.ls-pokladna .nav {
margin-bottom: 1.5rem;
padding: 0;
border: 0;
list-style: none;
}
/* ------------------------------------------------------------------ */
/* Nepovinná registrace v pokladně */
/* ------------------------------------------------------------------ */
.ls-pokladna__bez-registrace {
margin: 0 0 1.25rem;
font-size: 0.9375rem;
color: var(--ls-muted);
}
.ls-registrace {
margin: 0 0 1.5rem;
padding: 1rem;
border: 1px solid var(--ls-line);
background: var(--ls-surface, #f7f5f2);
}
/*
* `list-style: none` i `::-webkit-details-marker`: trojúhelníček
* si každý prohlížeč kreslí jinam a vlastní šipka drží řádek stejný
* v obou stavech.
*/
.ls-registrace__prepinac {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
cursor: pointer;
font-size: 0.9375rem;
color: var(--ls-gold-text);
}
.ls-registrace__prepinac::-webkit-details-marker {
display: none;
}
.ls-registrace__prepinac::before {
content: "+";
display: inline-block;
width: 1rem;
font-size: 1.125rem;
line-height: 1;
text-align: center;
}
.ls-registrace[open] .ls-registrace__prepinac::before {
content: "\2212";
}
.ls-registrace__obsah {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--ls-line);
}
.ls-registrace__proc {
margin: 0 0 1rem;
font-size: 0.8125rem;
color: var(--ls-muted);
}
/* Tlačítko "Pokračovat" stojí samo na řádku, zarovnané doprava. */
.ls-pokladna .form-footer {
display: flex;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* ==================================================================== */
/* ODSAZENÍ OBSAHU POD HLAVIČKOU */
/* ==================================================================== */
/*
* Corano dávalo `#wrapper` 65 px nahoře (ve svém `custom.css`).
* Drobečky tím odskočily 175 px od horního okraje a nadpis kategorie
* až na 223 px -- první obrazovka patřila z velké části prázdnu.
*
* 2 rem odpovídá návrhu: drobečky sedí blízko hlavičky a nadpis je
* vidět hned, bez scrollování.
*/
#wrapper {
padding-top: 2rem;
}
@media (max-width: 767px) {
/* Na telefonu je obrazovky ještě míň a hlavička je vyšší. */
#wrapper {
padding-top: 1.25rem;
}
}
/*
* Drobečky k nadpisu blíž. 24 px mezi nimi dělalo z dvou řádků, které
* k sobě patří, dva oddělené bloky.
*/
.ls-drobecky {
margin-bottom: 1rem;
}
/*
* Pruh "Aktivní filtry" nad vypisem se nezobrazuje.
*
* PrestaShop ho vykresluje nad mrizkou a opakuje v nem to, co uz
* stoji v levem sloupci: zapnuty filtr je tam zvyrazneny a nad
* skupinami je "Zrusit filtry". Dva ovladace pro tutez vec vedle
* sebe nutí cloveka premyslet, v cem se lisi.
*
* Skryva se, ne odstranuje: jadro ho pri kazdem filtrovani
* prekresluje a nahrazovat kvuli tomu jeho sablonu by znamenalo
* drzet si jeji kopii.
*/
#js-active-search-filters {
display: none;
}
/*
* Mezera mezi filtry a svislou linkou.
*
* Linka je `border-right` leveho sloupce a obsah sloupce sahal az
* k ni -- cisla poctu koncila jeden pixel pred ni a vypadala, jako by
* k lince patrila, ne k nazvu kamene vedle.
*
* `box-sizing: border-box` drzi sirku sloupce na puvodnich 220 px
* (mrizka Bootstrapu pocita sirku vcetne odsazeni), takze mrizka
* produktu vedle zustava, kde byla.
*/
/*
* Selektor musi byt specifictejsi nez
* `#wrapper > .container > .row > [class*="col-"]` vyse, ktery
* Bootstrapi odsazeni sloupcu nuluje -- se samotnym `#left-column`
* se nic nezmenilo a cisla zustala jeden pixel od linky.
*/
@media (min-width: 992px) {
#wrapper > .container > .row > #left-column {
box-sizing: border-box;
padding-right: 1.5rem;
}
}
/* ==================================================================== */
/* DETAIL KUSU */
/* ==================================================================== */
/*
* Pravý sloupec detailu — přepis návrhu z Next.js.
*
* Corano tu mělo rámeček kolem celého sloupce, šedé „Kód:", „S DPH",
* černé zaoblené tlačítko a pod ním odkazy na zásady. Návrh má místo
* toho holý sloupec: název, kámen a materiál, cena, dostupnost,
* tlačítko a čtyři věcné body o nákupu.
*/
.ls-detail {
padding: 0;
border: 0;
background: none;
font-family: var(--ls-font-body);
}
.ls-detail__nazev {
margin: 0 0 0.75rem;
font-family: var(--ls-font-heading);
font-size: 2rem;
font-weight: 400;
line-height: 1.15;
color: var(--ls-ink);
}
@media (min-width: 640px) {
.ls-detail__nazev {
font-size: 2.25rem;
}
}
/* ------------------------------------------------------------------ */
/* Kámen a materiál */
/* ------------------------------------------------------------------ */
.ls-detail__vlastnosti {
margin: 0 0 1.5rem;
padding: 0;
list-style: none;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ls-body);
}
.ls-detail__vlastnost-nazev {
color: var(--ls-muted);
}
.ls-detail__vlastnosti strong {
font-weight: 600;
color: var(--ls-ink);
}
/* ------------------------------------------------------------------ */
/* Cena */
/* ------------------------------------------------------------------ */
/*
* Coranovy třídy se přepisují, ne nahrazují: cenu vykresluje
* `product-prices.tpl` z jádra a přepsat ji kvůli vzhledu by
* znamenalo udržovat si vlastní kopii.
*/
.ls-detail .product-prices {
margin: 0 0 0.5rem;
}
.ls-detail .product-price,
.ls-detail .current-price span:first-child {
font-family: var(--ls-font-body);
font-size: 1.75rem;
font-weight: 600;
color: var(--ls-ink);
}
/* „S DPH" a jiné doušky pod cenou -- obchod není plátce. */
.ls-detail .tax-shipping-delivery-label,
.ls-detail .product-unit-price,
.ls-detail .product-reference,
.ls-detail .reference {
display: none;
}
.ls-detail__dostupnost {
margin: 0 0 1.25rem;
font-size: 0.9375rem;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Do košíku */
/* ------------------------------------------------------------------ */
.ls-detail .product-actions {
margin: 0;
}
/*
* Zlaté hranaté tlačítko místo černého zaobleného. Množství se
* neukazuje: každý kus je jen jeden, takže je volba mezi jedním
* a jedním.
*/
.ls-detail .product-quantity .qty,
.ls-detail .product-quantity .input-group,
.ls-detail input[name="qty"] {
display: none;
}
.ls-detail .add-to-cart,
.ls-detail .btn-add-to-cart {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14rem;
padding: 0.9375rem 2rem;
border: 0;
border-radius: 0;
background: var(--ls-gold);
color: #ffffff;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 150ms ease;
}
.ls-detail .add-to-cart:hover:not([disabled]),
.ls-detail .btn-add-to-cart:hover:not([disabled]) {
background: var(--ls-gold-dark);
}
.ls-detail .add-to-cart[disabled] {
background: var(--ls-line);
color: var(--ls-muted);
cursor: not-allowed;
}
/*
* Ikona kosiku uvnitr tlacitka.
*
* Corano ji kresli jako ligaturu Material Icons. Ten font sablona
* nenahrava, takze misto ikony bylo pred textem videt "+" -- zbytek
* nevykreslene ligatury. Text "Pridat do kosiku" stacili sam.
*/
.ls-detail .add-to-cart i,
.ls-detail .add-to-cart .material-icons {
display: none;
}
/*
* Jadrova dostupnost a popisek mnozstvi.
*
* `#product-availability` opakuje "Posledni kus skladem" s oranzovym
* trojuhelnikem pod tlacitkem -- tutez vetu uz mame nad nim, bez
* vystrahy. U obchodu, kde je posledni kus KAZDY kus, je vykricnik
* u vsech 181 sperku a prestane cokoli znamenat.
*
* `Pocet` se skryva spolu s prepinacem mnozstvi: kazdy kus je jen
* jeden, takze je to volba mezi jednim a jednim.
*/
#product-availability,
.ls-detail .product-quantity .control-label,
.ls-detail .product-availability {
display: none;
}
.ls-detail__rezervace {
margin: 0.75rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Co je dobré vědět */
/* ------------------------------------------------------------------ */
.ls-detail__jistoty {
display: grid;
gap: 1rem 1.5rem;
margin: 1.5rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--ls-line);
list-style: none;
}
@media (min-width: 640px) {
/*
* Tri body se do dvou sloupcu nevejdou rovnomerne -- posledni by
* zustal sam na druhem radku. `auto-fit` je rozlozi podle toho,
* kolik se jich vejde.
*/
.ls-detail__jistoty {
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
}
.ls-detail__jistoty > li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
/* Ikona nesmí zmenšit, když se text zalomí na dva řádky. */
.ls-detail__jistota-ikona {
flex: 0 0 auto;
margin-top: 0.125rem;
color: var(--ls-gold-text);
}
.ls-detail__jistoty strong {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--ls-ink);
}
.ls-detail__jistoty strong + span {
display: block;
margin-top: 0.125rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Oblíbené */
/* ------------------------------------------------------------------ */
.ls-detail__oblibene {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0;
border: 0;
background: none;
color: var(--ls-gold-text);
font-family: var(--ls-font-body);
font-size: 0.9375rem;
cursor: pointer;
}
.ls-detail__oblibene:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ------------------------------------------------------------------ */
/* Popis */
/* ------------------------------------------------------------------ */
.ls-detail__popis {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--ls-line);
font-size: 0.9375rem;
line-height: 1.7;
color: var(--ls-body);
}
.ls-detail__podnadpis {
margin: 0 0 0.75rem;
font-family: var(--ls-font-heading);
font-size: 1.125rem;
font-weight: 400;
color: var(--ls-ink);
}
.ls-detail__popis p {
margin: 0 0 0.75rem;
}
/* ------------------------------------------------------------------ */
/* Péče o šperk */
/* ------------------------------------------------------------------ */
.ls-pece {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--ls-line);
}
/*
* `list-style: none` i `::-webkit-details-marker`: trojúhelníček
* si každý prohlížeč kreslí jinam a vlastní znak drží řádek stejný
* v obou stavech.
*/
.ls-pece__prepinac {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
list-style: none;
cursor: pointer;
}
.ls-pece__prepinac::-webkit-details-marker {
display: none;
}
.ls-pece__nadpis {
font-family: var(--ls-font-heading);
font-size: 1.125rem;
color: var(--ls-ink);
}
.ls-pece__znak {
flex: 0 0 auto;
color: var(--ls-muted);
}
.ls-pece__znak--sbalit {
display: none;
}
.ls-pece[open] .ls-pece__znak--rozbalit {
display: none;
}
.ls-pece[open] .ls-pece__znak--sbalit {
display: inline-block;
}
.ls-pece__obsah {
margin-top: 0.75rem;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--ls-body);
}
.ls-pece__obsah p {
margin: 0 0 0.75rem;
}
.ls-pece__obsah p:last-child {
margin-bottom: 0;
}
/* ==================================================================== */
/* PODOBNE KUSY POD DETAILEM */
/* ==================================================================== */
/*
* Odstup a linka nad sekci.
*
* Bez nich zacinala 26 px pod "Peci o sperk" -- nadpis dalsi sekce
* se tiskl na konec predchozi a stranka pusobila nacpane.
* Linka pres celou sirku rika, ze tady konci jeden kus a zacina
* nabidka dalsich.
*/
.ls-podobne {
margin-top: 4rem;
padding-top: 3rem;
border-top: 1px solid var(--ls-line);
}
/*
* Mrizka ma zde vlastni odsazeni shora -- nadpis a podnadpis nad ni
* uz svuj odstup maji.
*/
.ls-podobne .ls-mrizka {
margin-top: 2rem;
}
/*
* Nadpis i podnadpis vlevo.
*
* `.ls-sekce__hlavicka` je na uvodni strance na stred, protoze tam
* stoji nad mrizkou pres celou sirku. Pod detailem kusu je vsechno
* ostatni zarovnane vlevo a vycentrovany podnadpis pod nadpisem
* vlevo vypadal jako chyba sazby.
*/
.ls-podobne .ls-sekce__hlavicka,
.ls-podobne .ls-sekce__nadpis,
.ls-podobne .ls-sekce__podnadpis {
text-align: left;
}
/*
* Text prouzku s ikonou.
*
* `inline-flex` na polozce, aby ikona a text drzely na jednom radku
* i kdyz se veta zalomi; ikona se pritom nesmi zmensit.
*/
.ls-prouzek__vnitrek > span {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
}
.ls-prouzek__vnitrek svg {
flex: 0 0 auto;
color: var(--ls-gold-text);
}
/* ==================================================================== */
/* ODEBRANI Z KOSIKU */
/* ==================================================================== */
/*
* Odkaz misto ikony.
*
* Puvodni `.remove-from-cart` mela 24x24 px a uvnitr ligaturu
* Material Icons -- bez toho fontu z ni zbylo slovo "delete".
* Odebrani fungovalo, jen nebylo poznat, kam kliknout.
*/
.remove-from-cart {
display: inline-flex;
align-items: center;
width: auto;
height: auto;
font-family: var(--ls-font-body);
font-size: 0.875rem;
color: var(--ls-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.remove-from-cart:hover {
color: var(--ls-ink);
}
/* ==================================================================== */
/* POBÍDKA KE SCROLLOVÁNÍ */
/* ==================================================================== */
/*
* Hero teď zabírá 81 % první obrazovky. To je dobře pro první dojem,
* ale vzniká tím riziko: člověk nemusí poznat, že pod ním něco je.
* Plná obrazovka bez náznaku pokračování se čte jako celá stránka.
*
* Šipka u dolní hrany to řekne beze slov. Mizí, jakmile se scrollne
* — pobídka, která zůstane po splnění, se mění ve výzdobu.
*/
.ls-pobidka {
position: absolute;
bottom: 1.75rem;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
margin-left: -1.25rem;
color: var(--ls-ink);
opacity: 0.55;
pointer-events: none;
}
/*
* Pomalé klesání, ne poskakování.
*
* Rychlá animace u dolní hrany tahá oko dolů z fotky, kvůli které
* tam hero je. 2,4 s a 6 px je na hranici viditelnosti: všimnete si
* toho, až když nevíte, co dál.
*/
@keyframes ls-pobidka-klesa {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.ls-pobidka svg {
animation: ls-pobidka-klesa 2.4s ease-in-out infinite;
}
/*
* Zmizí po prvním scrollu.
*
* `animation-timeline: scroll()` to zvládne bez JavaScriptu: šipka se
* odvíjí podle polohy stránky, ne podle události. Prohlížeč bez
* podpory ji nechá svítit — což není chyba, jen o kousek míň.
*/
@supports (animation-timeline: scroll()) {
.ls-pobidka {
animation: ls-pobidka-mizi linear both;
animation-timeline: scroll(root block);
animation-range: 0 140px;
}
}
@keyframes ls-pobidka-mizi {
from { opacity: 0.55; }
to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ls-pobidka svg {
animation: none;
}
}
/* ==================================================================== */
/* FILTRY NA ÚZKÉM OKNĚ */
/* ==================================================================== */
/*
* Na telefonu stojí filtr za tlačítkem, ne nad výpisem.
*
* Modul `ps_facetedsearch` ho schovává třídou `hidden-sm-down` a
* počítá s tím, že si téma dokreslí tlačítko. Corano ho nemělo, takže
* na telefonu nešlo filtrovat vůbec -- u 181 kusů v jednom výpisu to
* znamenalo projít všech šestnáct stran.
*/
.ls-filtry-prepinac {
display: none;
}
@media (max-width: 767.98px) {
.ls-filtry-prepinac {
display: inline-flex;
align-items: center;
gap: 0.5rem;
/* 44 px na výšku, aby na to šel prst. */
min-height: 2.75rem;
padding: 0.625rem 1rem;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
color: var(--ls-ink);
background: var(--ls-bg);
border: 1px solid var(--ls-line);
border-radius: 2px;
cursor: pointer;
}
/*
* Panel přes celou obrazovku, ne blok vsunutý nad výpis.
*
* Vsunutý blok odsunul výpis o tisíc pixelů dolů a tlačítko „OK"
* z modulu zůstalo nahoře uprostřed -- u dlouhého seznamu kamenů
* bylo po odrolování z dosahu a nebylo poznat, že filtr vůbec jde
* zavřít.
*
* `!important` je nutné: `hidden-sm-down` z jádra je `display: none`
* a jeho stylopis se načítá za tímhle.
*/
.ls-filtry-otevreny #search_filters_wrapper {
display: flex !important;
flex-direction: column;
position: fixed;
inset: 0;
z-index: 70;
/*
* `width`/`height` se musi vynulovat, jinak `inset: 0` neplati:
* kdyz je sirka zadana, prohlizec drzi `left` a `right` ignoruje.
* Sloupec filtru dedi `width: 100vw` se zapornym okrajem
* z celosirkoveho pravidla -- namereno (-15, 0, 405, 782) pri okne
* 375x812, tedy panel o 30 px sirsi a o 30 px nizsi, nez mel byt.
*/
width: auto;
height: auto;
max-width: none;
max-height: none;
/*
* `!important` i u okraju: sloupec filtru ma z mrizky jadra
* `margin: 0 -15px 30px` a to pri `inset: 0` posune a roztahne
* cely panel -- namereno (-15, 0, 405, 782) misto (0, 0, 375, 812).
*/
margin: 0 !important;
padding: 0;
background: var(--ls-bg);
}
/* Pod panelem se nesmí rolovat výpis. */
.ls-filtry-otevreny {
overflow: hidden;
}
/* Seznam filtrů zabere zbytek výšky a roluje sám. */
.ls-filtry-otevreny #search_filters_wrapper .ls-filtry {
order: 2;
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem 1.25rem 1.5rem;
}
/*
* Lišta modulu jde nahoru jako hlavička panelu: „OK" je tak na očích
* hned, ne až na konci seznamu.
*/
.ls-filtry-otevreny #search_filter_controls {
order: 1;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--ls-line);
background: var(--ls-surface);
/* Jadro listu centruje; titulek patri k levemu okraji. */
text-align: start;
}
/* Titulek panelu: v HTML modulu žádný není. */
/*
* Titulek si bere zbyle misto a tim odsune „OK" k pravemu okraji.
* Samotna auto-mezera na tlacitku nestacila: `.btn` z jadra ma
* `margin: 0 8px` a prebilo ji -- tlacitko stalo na x=99.
*/
.ls-filtry-otevreny #search_filter_controls::before {
content: "Filtry";
flex: 1;
text-align: start;
font-family: var(--ls-font-heading);
font-size: 1.125rem;
color: var(--ls-ink);
}
/*
* `margin: 0 8px` z `.btn` jadra prebilo samotne
* `margin-inline-start: auto` -- tlacitko pak stalo hned za
* titulkem (namereno x=99 misto u praveho okraje).
*/
.ls-filtry-otevreny #search_filter_controls .ok {
margin: 0 0 0 auto;
min-height: 2.75rem;
min-width: 5rem;
padding-inline: 1.25rem;
border: 0;
border-radius: 2px;
background: var(--ls-ink);
color: #fff;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
}
/*
* Ikona z Material Icons: font se v tématu nenačítá, takže by z ní
* byl jen prázdný rámeček nebo název ligatury vypsaný textem.
*/
.ls-filtry-otevreny #search_filter_controls .ok .material-icons {
display: none;
}
/* Skupiny a položky na dotyk. */
.ls-filtry-otevreny .ls-filtry__nadpis {
margin-bottom: 0.25rem;
}
.ls-filtry-otevreny .ls-filtry__seznam > li + li {
margin-top: 0;
}
.ls-filtry-otevreny .ls-filtry__polozka {
min-height: 2.75rem;
font-size: 0.9375rem;
}
.ls-filtry-otevreny .ls-dostupnost {
min-height: 2.75rem;
}
}
/* ==================================================================== */
/* AKCE U KUSU NA ÚZKÉM OKNĚ */
/* ==================================================================== */
/*
* Na telefonu odpadá jen rychlý náhled.
*
* Na dotykovém displeji se najet nedá, takže jsou kolečka vidět pořád.
* Všechna čtyři po 40 px s mezerami měří přes 190 px, ale fotka na
* mřížce po dvou má na 375px okně jen 160 -- zbytek přetékal přes
* název kusu a přes sousední kartu. `.ls-karta__akce` navíc není uvnitř
* rámu fotky, takže ji nic neořízne.
*
* Tři kolečka po 44 px se dvěma mezerami měří 140 px a vejdou se.
*
* Proč vypadl zrovna náhled: na telefonu otevře okno přes celou
* obrazovku, tedy totéž co detail kusu -- a ten je na jedno klepnutí
* na fotku nebo název. Porovnání a oblíbené jinou cestu nemají.
*/
@media (max-width: 767.98px) {
.ls-karta__akce > li:has(.quick-view) {
display: none;
}
.ls-karta__akce .ls-kolecko {
/* 44 px: na kolečko musí jít prst. */
width: 2.75rem;
height: 2.75rem;
/* Na světlé fotce by bílá ikona zmizela. */
background: rgb(255 255 255 / 0.92);
}
}
/* ==================================================================== */
/* FOTKA KUSU PŘES CELOU OBRAZOVKU */
/* ==================================================================== */
/*
* Corano tenhle dialog nestyloval vůbec -- používal holé bootstrapové
* `.modal-dialog`, které má na mobilu pevné okraje, takže fotka vyšla
* malá doprostřed a pod ní byl nedosažitelný zbytek.
*/
.ls-fotka-okno .modal-dialog {
max-width: none;
width: 100%;
height: 100%;
margin: 0;
}
.ls-fotka-okno .modal-content {
height: 100%;
border: 0;
border-radius: 0;
background: var(--ls-krem, #f7f4ee);
}
.ls-fotka-okno .modal-body {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
overflow: hidden;
}
/*
* Křížek: 44 px cíl pro prst, `fixed` nad fotkou. V hlavičce okna by
* ukrojil z výšky a při odrolované fotce by odjel nahoru.
*/
.ls-fotka-okno__zavrit {
position: fixed;
top: max(0.75rem, env(safe-area-inset-top));
right: 0.75rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 0.92);
color: var(--ls-ink, #1e3a2f);
cursor: pointer;
}
.ls-fotka-okno__zavrit:hover,
.ls-fotka-okno__zavrit:focus {
background: var(--ls-ink, #1e3a2f);
color: #fff;
}
/*
* Plocha s fotkou. `pinch-zoom` nechá fungovat roztažení dvěma prsty --
* dělá ho prohlížeč sám a nepotřebuje k tomu skript.
*/
.ls-fotka-okno__plocha {
flex: 1;
display: grid;
/*
* `minmax(0, 1fr)`, ne `auto`: v automaticky vysokem radku se
* `max-height: 100%` fotky pocita z vysky obsahu, tedy sama ze sebe,
* a neomezi nic -- namereno 1009 px fotky v 768px okne. S pevnym
* radkem se procenta pocitaji z plochy.
*/
grid-template-rows: minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
place-items: center;
overflow: auto;
touch-action: pinch-zoom;
-webkit-overflow-scrolling: touch;
}
.ls-fotka-okno__obraz {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
cursor: zoom-in;
transition: none;
}
/*
* Zvětšení na skutečnou velikost souboru, ne na dvojnásobek plochy.
*
* `width: 200%` roztahovalo fotku i nad jeji vlastni rozliseni --
* na desktopu z 1200px souboru delalo 2048 px, tedy rozmazany obraz
* bez jedineho detailu navic. `width: auto` s vypnutymi mezemi je
* presne 100 % souboru.
*/
.ls-fotka-okno__plocha[data-zvetseno] .ls-fotka-okno__obraz {
max-width: none;
max-height: none;
width: auto;
height: auto;
cursor: zoom-out;
}
.ls-fotka-okno__nahledy {
flex: none;
display: flex;
gap: 0.5rem;
padding: 0.75rem;
overflow-x: auto;
background: rgb(255 255 255 / 0.6);
}
.ls-fotka-okno__nahled {
flex: none;
width: 3.5rem;
height: 3.5rem;
padding: 0;
border: 1px solid transparent;
border-radius: 0.25rem;
background: none;
cursor: pointer;
overflow: hidden;
}
.ls-fotka-okno__nahled img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ls-fotka-okno__nahled:hover,
.ls-fotka-okno__nahled:focus {
border-color: var(--ls-ink, #1e3a2f);
}
/* Uzky desktop: menu blize k logu, at zbyde na ikony. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
.ls-hlavicka__radek > .ls-menu {
margin-inline-start: 1rem;
}
}
/* ------------------------------------------------------------------ */
/* „Mohlo by se vám líbit" — pruh do strany */
/* ------------------------------------------------------------------ */
/*
* Pod detailem kusu stálo šestnáct dalších kusů v mřížce, tedy čtyři
* řady navíc pod stránkou, kterou si člověk přišel přečíst. Pruh je
* ukáže všechny a zabere jednu řadu.
*
* `scroll-snap` je tu proto, aby pruh zastavoval na celé kartě a ne
* uprostřed fotky. Useknutá karta na pravém okraji je záměr: je to
* jediné, co napoví, že se dá posunout dál.
*/
.ls-podobne__pruh {
position: relative;
}
.ls-podobne .ls-mrizka {
display: flex;
gap: 0.75rem;
/* Pruh jde od kraje ke kraji, ne jen v šířce textu. */
margin-inline: calc(var(--ls-mezera-strana, 1rem) * -1);
padding-inline: var(--ls-mezera-strana, 1rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
/*
* Bez `scroll-padding` zarovná snap první kartu na nulu a odroluje
* přes vlastní odsazení -- karta pak ležela na levém okraji okna
* (naměřeno 0 místo 16).
*/
scroll-padding-inline-start: var(--ls-mezera-strana, 1rem);
/* Posuvník si bere výšku a pod kartami dělá šedý pruh. */
scrollbar-width: none;
}
.ls-podobne .ls-mrizka::-webkit-scrollbar {
display: none;
}
/*
* Dve karty na sirku a kousek treti.
*
* Pri 62 % byla videt jedna a pul -- navrh ma dve vedle sebe. Zbyla
* desetina treti karty je jediné, co na dotykovem displeji napovi,
* ze se da posunout dal.
*/
.ls-podobne .ls-mrizka > * {
flex: 0 0 44%;
scroll-snap-align: start;
}
/* Poslední karta musí dojet až k levému okraji. */
.ls-podobne .ls-mrizka::after {
content: "";
flex: 0 0 0.25rem;
}
@media (min-width: 48rem) {
.ls-podobne .ls-mrizka > * {
flex-basis: 30%;
}
}
/*
* Na desktopu pět karet vedle sebe. Fotky jsou tím menší než
* v mřížce po čtyřech -- doporučené kusy mají být nabídka, ne druhý
* výpis pod tím prvním.
*/
@media (min-width: 64rem) {
.ls-podobne .ls-mrizka {
gap: 1rem;
}
.ls-podobne .ls-mrizka > * {
flex-basis: calc((100% - 4rem) / 5);
}
}
/* ------------------------------------------------------------------ */
/* Šipky k pruhu */
/* ------------------------------------------------------------------ */
/*
* Myš pruhem posunout neumí -- vodorovné kolečko má jen část myší
* a táhnout prstem po trackpadu není samozřejmost. Proto šipky.
* Na dotyku se skrývají: tam stačí prst a kolečka by jen překážela.
*/
.ls-podobne__sipka {
display: none;
}
@media (min-width: 64rem) and (hover: hover) {
.ls-podobne__sipka {
position: absolute;
top: 38%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--ls-line);
border-radius: 50%;
background: rgb(255 255 255 / 0.94);
color: var(--ls-ink);
cursor: pointer;
transition: opacity 150ms ease, background-color 150ms ease;
}
.ls-podobne__sipka--zpet { left: -0.75rem; }
.ls-podobne__sipka--vpred { right: -0.75rem; }
.ls-podobne__sipka:hover {
background: var(--ls-ink);
color: #fff;
}
/* Na kraji pruhu šipka nemá kam posunout. */
.ls-podobne__sipka[disabled] {
opacity: 0;
pointer-events: none;
}
}
/* ------------------------------------------------------------------ */
/* Prázdný košík */
/* ------------------------------------------------------------------ */
.ls-kosik-prazdny {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 34rem;
margin-inline: auto;
padding-block: clamp(3rem, 10vw, 6rem);
text-align: center;
}
.ls-kosik-prazdny__ikona {
color: var(--ls-gold-text);
}
.ls-kosik-prazdny__nadpis {
margin: 0;
font-family: var(--ls-font-heading);
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 400;
color: var(--ls-ink);
}
.ls-kosik-prazdny__veta {
margin: 0 0 0.5rem;
max-width: 30ch;
color: var(--ls-body);
line-height: 1.7;
}
/* ------------------------------------------------------------------ */
/* Tlačítko a šipka mimo úvodní stránku */
/* ------------------------------------------------------------------ */
/*
* `.ls-tlacitko` je definované v `home.css`, které načítá jen modul
* úvodní stránky. Na košíku a dalších stránkách z něj proto zbyl holý
* odkaz bez pozadí.
*
* Tady je tentýž tvar znovu, globálně. `home.css` se načítá DŘÍV
* (priorita 60 proti 1001), takže na úvodní stránce platí tohle --
* hodnoty jsou proto stejné, ne jen podobné.
*/
.ls-tlacitko {
display: inline-flex;
align-items: center;
gap: 0.625rem;
/* 1 rem svisle drží výšku na 51 px, tedy nad hranicí pro prst. */
padding: 1rem 1.75rem;
font-family: var(--ls-font-body);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
color: #fff;
background: var(--ls-zelen, #1e3a2f);
border: 1px solid var(--ls-zelen, #1e3a2f);
border-radius: 2px;
transition:
background-color 200ms ease,
border-color 200ms ease,
color 200ms ease;
}
.ls-tlacitko:hover,
.ls-tlacitko:focus-visible {
color: #fff;
background: var(--ls-zelen-tmava, #16291f);
border-color: var(--ls-zelen-tmava, #16291f);
}
.ls-sipka {
flex: 0 0 auto;
transition: transform 200ms ease;
}
.ls-tlacitko:hover .ls-sipka {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.ls-sipka {
transition: none;
}
}
/*
* Čára pod názvem kusu při najetí myší.
*
* Corano kreslí na `.product-description::after` 1px linku přes 80 %
* šířky karty, a to jen ve chvíli, kdy je kurzor nad fotkou. Proto se
* objevovala "občas" -- a u našich karet nemá co dělat, hover na nich
* ukazuje kolečka akcí, ne podtržení.
*/
.product-miniature .thumbnail-container:focus .product-description::after,
.product-miniature .thumbnail-container:hover .product-description::after {
content: none;
}
/* ==================================================================== */
/* DETAIL KUSU — ÚPRAVY PODLE NÁVRHU */
/* ==================================================================== */
/* Věta o kusu pod názvem — ta samá, co je na kartě ve výpisu. */
.ls-detail__veta {
margin: 0.5rem 0 1rem;
font-size: 1rem;
line-height: 1.6;
color: var(--ls-body);
}
/*
* Dostupnost s tečkou.
*
* Zelená tečka sama o sobě nestačí -- barva není informace pro toho,
* kdo ji nerozliší. Vedle ní proto vždycky stojí text (WCAG 1.4.1).
*/
.ls-detail__dostupnost {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.25rem;
font-size: 0.9375rem;
color: var(--ls-ink);
}
.ls-detail__tecka {
flex: 0 0 auto;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #2e7d4f;
}
.ls-detail__dostupnost--pryc {
color: var(--ls-muted);
}
.ls-detail__dostupnost--pryc .ls-detail__tecka {
background: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Tlačítko do košíku */
/* ------------------------------------------------------------------ */
.ls-detail__do-kosiku {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
width: 100%;
/* 52 px: hlavní akce stránky, ne jedno z tlačítek v řadě. */
min-height: 3.25rem;
padding-inline: 1.5rem;
border: 0;
border-radius: 2px;
background: var(--ls-gold, #96692f);
color: #fff;
font-family: var(--ls-font-body);
font-size: 1rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 200ms ease;
}
.ls-detail__do-kosiku:hover,
.ls-detail__do-kosiku:focus-visible {
background: var(--ls-gold-text, #7a5222);
color: #fff;
}
.ls-detail__do-kosiku[disabled] {
background: var(--ls-line);
color: var(--ls-muted);
cursor: not-allowed;
}
.ls-detail__rezervace {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0.75rem 0 0;
font-size: 0.8125rem;
color: var(--ls-muted);
}
/* ------------------------------------------------------------------ */
/* Dva údaje místo tří odstavců */
/* ------------------------------------------------------------------ */
.ls-detail__jistoty {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
}
/* Svislá linka mezi nimi — v návrhu dělí oba údaje. */
.ls-detail__jistoty > li + li {
padding-inline-start: 1rem;
border-inline-start: 1px solid var(--ls-line);
}
/* ------------------------------------------------------------------ */
/* Rozbalovátka */
/* ------------------------------------------------------------------ */
/*
* Rámeček kolem celé skupiny, linky mezi položkami. Jednotlivá
* `` měla každé vlastní horní linku a odsazení 2 rem --
* čtyři pod sebou z toho udělaly čtyři oddělené sekce.
*/
.ls-detail__sekce {
margin-top: 1.5rem;
border: 1px solid var(--ls-line);
border-radius: 2px;
}
.ls-detail__sekce .ls-pece {
margin: 0;
padding: 0;
border-top: 1px solid var(--ls-line);
}
.ls-detail__sekce .ls-pece:first-child {
border-top: 0;
}
.ls-detail__sekce .ls-pece__prepinac {
/* 52 px na výšku: rozbalovátko je cíl pro prst. */
min-height: 3.25rem;
padding: 0.75rem 1rem;
}
.ls-detail__sekce .ls-pece__nadpis {
font-size: 1.0625rem;
}
.ls-detail__sekce .ls-pece__obsah {
margin: 0;
padding: 0 1rem 1rem;
}
.ls-detail__kod {
margin: 0 0 0.5rem;
}
.ls-detail__sekce .ls-detail__vlastnosti {
margin: 0;
padding: 0;
list-style: none;
}
/* ------------------------------------------------------------------ */
/* Srdíčko na fotce */
/* ------------------------------------------------------------------ */
.ls-galerie__hlavni {
position: relative;
}
.ls-galerie__oblibene {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
width: 2.75rem;
height: 2.75rem;
background: rgb(255 255 255 / 0.92);
}
/* ------------------------------------------------------------------ */
/* Lišta u spodní hrany (mobil) */
/* ------------------------------------------------------------------ */
.ls-detail__lista {
display: none;
}
@media (max-width: 767.98px) {
.ls-detail__lista {
position: fixed;
inset: auto 0 0 0;
z-index: 50;
display: flex;
align-items: center;
gap: 1rem;
/* `env()` kvůli gestové liště na telefonech bez tlačítek. */
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
background: var(--ls-bg);
border-top: 1px solid var(--ls-line);
}
.ls-detail__lista-cena {
flex: 0 0 auto;
font-family: var(--ls-font-heading);
font-size: 1.25rem;
color: var(--ls-ink);
}
.ls-detail__lista .ls-detail__do-kosiku {
min-height: 3rem;
}
/*
* Pod lištou musí zůstat místo, jinak překryje konec stránky --
* na patičce poslední řádek, na výpisu poslední kartu.
*/
#main {
padding-bottom: 5.5rem;
}
}
/*
* Pole pro počet kusů.
*
* Coranův skript navěsí na `#quantity_wanted` bootstrap-touchspin
* i na skryté pole a kolem něj postaví obal se šipkami -- nad
* tlačítkem se tak objevily dvě šipky bez čísla. Obal vzniká až za
* běhu, takže ho nejde odstranit ze šablony; schová se tady.
*
* `display: none` na obalu, ne na poli: `qty` musí zůstat ve formuláři,
* jinak se kus do košíku nepřidá.
*/
.ls-detail__koupit .bootstrap-touchspin,
.ls-detail__koupit .input-group-addon {
display: none !important;
}
/* Šipka rozbalovátka se otočí, místo aby se měnila za jinou ikonu. */
.ls-detail__sekce .ls-pece__znak {
flex: 0 0 auto;
color: var(--ls-muted);
transition: transform 200ms ease;
}
.ls-detail__sekce .ls-pece[open] .ls-pece__znak {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.ls-detail__sekce .ls-pece__znak {
transition: none;
}
}
/* ------------------------------------------------------------------ */
/* Sdílení kusu */
/* ------------------------------------------------------------------ */
.ls-sdileni {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.5rem;
}
.ls-sdileni__popisek {
margin-inline-end: 0.25rem;
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-sdileni__odkaz {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
/* 40 px: cíl pro prst i v řadě vedle sebe. */
min-width: 2.5rem;
height: 2.5rem;
padding-inline: 0.625rem;
border: 1px solid var(--ls-line);
border-radius: 2px;
background: transparent;
color: var(--ls-ink);
font-family: var(--ls-font-body);
font-size: 0.875rem;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ls-sdileni__odkaz:hover,
.ls-sdileni__odkaz:focus-visible {
background: var(--ls-ink);
border-color: var(--ls-ink);
color: #fff;
}
/* Hláška po zkopírování. Mimo obraz, dokud není co hlásit. */
.ls-sdileni__hotovo {
display: none;
font-size: 0.8125rem;
}
.ls-sdileni__odkaz[data-hotovo] {
background: var(--ls-ink);
border-color: var(--ls-ink);
color: #fff;
}
.ls-sdileni__odkaz[data-hotovo] .ls-sdileni__hotovo {
display: inline;
}
/* ------------------------------------------------------------------ */
/* Drobečky na mobilu */
/* ------------------------------------------------------------------ */
/*
* Na úzkém okně se vynechá poslední položka, tedy název kusu.
*
* "Sada šperků: Přívěšek a náušnice s modrými kapkami" se na jeden
* řádek nevejde a zalomila drobečky na dva. Přitom je to tentýž text,
* který hned pod nimi stojí jako nadpis stránky -- člověk ho čte
* dvakrát pod sebou.
*
* Ve strukturovaných datech (`ld+json` v šabloně) položka zůstává,
* takže cesta pro vyhledávače je pořád celá.
*/
@media (max-width: 767.98px) {
.ls-drobecky__polozka:last-child {
display: none;
}
.ls-drobecky__seznam {
flex-wrap: nowrap;
}
/* Delší název kategorie se ořízne, místo aby zalomil řádek. */
.ls-drobecky__polozka a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Odstup nadpisu od fotky na mobilu — slepený na sebe vypadal jako chyba. */
@media (max-width: 767.98px) {
.ls-detail .ls-detail__nazev {
margin-top: 1.25rem;
}
}
/* ------------------------------------------------------------------ */
/* Ukazatel posunu pruhu */
/* ------------------------------------------------------------------ */
/*
* Tenká lišta pod pruhem: šířka běhu odpovídá tomu, jaká část je
* vidět, poloha tomu, kde v pruhu člověk stojí.
*
* Na dotykovém displeji, kde nejsou šipky, je to jediné, co řekne,
* že pruh pokračuje dál -- ústřižek další karty na okraji si člověk
* vyloží jako ořez fotky.
*/
.ls-podobne__ukazatel {
position: relative;
height: 3px;
margin-top: 1rem;
border-radius: 999px;
background: rgb(30 58 47 / 0.1);
overflow: hidden;
}
.ls-podobne__ukazatel-beh {
position: absolute;
inset: 0 auto 0 0;
width: 30%;
border-radius: inherit;
background: var(--ls-gold-text, #7a5222);
transition: transform 120ms linear;
}
/* S myší vedou šipky, lišta by jen přidala další prvek. */
@media (min-width: 64rem) and (hover: hover) {
.ls-podobne__ukazatel {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ls-podobne__ukazatel-beh {
transition: none;
}
}
/* ==================================================================== */
/* NÁKUPNÍ KOŠÍK */
/* ==================================================================== */
.ls-kosik__nadpis {
margin: 0 0 1.5rem;
font-family: var(--ls-font-heading);
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 400;
color: var(--ls-ink);
}
.ls-kosik__mrizka {
display: grid;
gap: 2rem;
align-items: start;
}
@media (min-width: 64rem) {
/*
* Souhrn vpravo si drží šířku a zůstane v dohledu i u delšího
* seznamu: je to jediné místo, odkud se pokračuje dál.
*/
.ls-kosik__mrizka {
grid-template-columns: minmax(0, 1fr) 21rem;
gap: 3rem;
}
.ls-kosik__souhrn {
position: sticky;
top: 6rem;
}
}
/* ------------------------------------------------------------------ */
/* Řádek s kusem */
/* ------------------------------------------------------------------ */
.ls-kosik-radek {
display: flex;
gap: 1rem;
padding-block: 1.25rem;
border-top: 1px solid var(--ls-line);
}
.ls-kosik-radek:first-child {
border-top: 0;
padding-top: 0;
}
.ls-kosik-radek__fotka {
flex: 0 0 5.5rem;
display: block;
line-height: 0;
}
@media (min-width: 48rem) {
.ls-kosik-radek__fotka {
flex-basis: 7rem;
}
}
.ls-kosik-radek__fotka img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 2px;
}
.ls-kosik-radek__telo {
flex: 1;
min-width: 0;
}
.ls-kosik-radek__nazev {
display: block;
font-family: var(--ls-font-heading);
font-size: 1.0625rem;
line-height: 1.35;
color: var(--ls-ink);
text-decoration: none;
}
.ls-kosik-radek__nazev:hover {
color: var(--ls-gold-text);
}
.ls-kosik-radek__vlastnost {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
color: var(--ls-muted);
}
.ls-kosik-radek__spodek {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-top: 0.625rem;
}
.ls-kosik-radek__cena {
font-size: 1.0625rem;
font-weight: 600;
color: var(--ls-ink);
}
.ls-kosik-radek__pocet {
font-size: 0.875rem;
color: var(--ls-muted);
}
/*
* „Odebrat" u pravého okraje. Dřív to byl odkaz „Odebrat z košíku"
* vmáčknutý do sloupce širokého 2/12 mřížky, takže se lámal na dva
* řádky uprostřed věty.
*/
.ls-kosik-radek__odebrat {
margin-inline-start: auto;
font-size: 0.8125rem;
color: var(--ls-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.ls-kosik-radek__odebrat:hover,
.ls-kosik-radek__odebrat:focus-visible {
color: var(--ls-ink);
}
.ls-kosik__zpet {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
margin-top: 1.5rem;
color: var(--ls-ink);
font-size: 0.9375rem;
text-decoration: none;
}
.ls-kosik__zpet:hover {
color: var(--ls-gold-text);
}
/* ------------------------------------------------------------------ */
/* Souhrn */
/* ------------------------------------------------------------------ */
.ls-kosik__karta {
padding: 1.25rem;
border: 1px solid var(--ls-line);
border-radius: 2px;
background: var(--ls-surface);
}
/*
* Radek souhrnu.
*
* `gap` tu byt nesmi: jadro vklada za hodnotu jeste prazdny obal pro
* podrobnosti dopravy, takze posledni polozkou radku neni cislo, ale
* ta prazdnota -- a mezera pred ni odsunula cislo o 16 px od okraje
* karty (nameereno 322 misto 338). Odstup drzi odsazeni popisku.
*/
.ls-kosik .cart-summary-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0;
margin-bottom: 0.625rem;
font-size: 0.9375rem;
color: var(--ls-body);
}
.ls-kosik .cart-summary-line .label {
padding-inline-end: 1rem;
}
.ls-kosik .cart-summary-line .value {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Celkem: jediný řádek, který má být vidět na první pohled. */
.ls-kosik .cart-total,
.ls-kosik .cart-summary-line.cart-total {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--ls-line);
font-size: 1.125rem;
font-weight: 600;
color: var(--ls-ink);
}
/*
* Obchod není plátce DPH, takže doušky o dani nemají co říct --
* stejně jako na detailu kusu.
*/
.ls-kosik .tax-included,
.ls-kosik .tax-excluded,
.ls-kosik .cart-summary-line.cart-total .label small {
display: none;
}
.ls-kosik .separator {
display: none;
}
.ls-kosik__akce,
.ls-kosik-souhrn__akce {
margin-top: 1rem;
}
.ls-kosik__varovani,
.ls-kosik-souhrn__varovani {
margin: 0 0 0.75rem;
font-size: 0.875rem;
color: var(--ls-gold-text);
}
.ls-kosik__jistoty {
display: grid;
gap: 1rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.ls-kosik__jistoty > li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
.ls-kosik__jistoty strong {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--ls-ink);
}
.ls-kosik__jistoty strong + span {
display: block;
margin-top: 0.125rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--ls-muted);
}
/*
* `#main` na stránce košíku.
*
* Corano mu dává `display: inline-flex`, takže se smrskl na šířku
* obsahu -- naměřeno 40 px při okně 375 a karta souhrnu z něj
* vyčuhovala na obě strany. Selektor musí nést `#main`, jinak ho
* pravidlo podle id přebije.
*/
#main.ls-kosik {
display: block;
width: 100%;
/*
* Vyska se dopocitava skriptem tematu (srovnava sloupce), ale na
* kosiku zustala na 88 px, zatimco obsah mel 800 -- patka se pak
* prekryla pres pulku kosiku. `!important` je nutne: hodnotu zapisuje
* skript do atributu `style`, ktery normalni pravidlo neprebije.
*/
height: auto !important;
}
/*
* Pole pro počet kusů v košíku.
*
* Stejná past jako na detailu kusu: Coranův skript navěsí
* bootstrap-touchspin i na skryté pole a postaví kolem něj obal se
* šipkami. Obal vzniká až za běhu, takže ho nejde odstranit ze
* šablony. Samotné pole musí zůstat -- jádro podle něj přepočítává
* košík.
*/
.ls-kosik .bootstrap-touchspin,
.ls-kosik .input-group-addon {
display: none !important;
}
/*
* Obaly `.card-block` z Corana: uvnitř karty souhrnu měly vlastní
* odsazení, takže řádky „1 položka / 255 Kč" nestály u okrajů karty,
* ale schoulené uprostřed.
*/
.ls-kosik__karta .card-block {
padding: 0;
}
.ls-kosik .cart-summary-line .label {
flex: 1;
min-width: 0;
}
/* Corano dává hodnotám v souhrnu vlastní odsazení zprava -- čísla pak
* nestála u pravého okraje karty (naměřeno 322 místo 339). */
.ls-kosik .cart-summary-line .value {
padding: 0;
margin: 0;
text-align: right;
}
/* ================================================================== */
/* Potvrzení objednávky */
/* ================================================================== */
/*
* Stejné rozvržení jako košík a pokladna: vlevo co bude dál, vpravo
* přehled objednávky. Jádrová šablona tu měla čtyři zarámované karty
* pod sebou, každou v jiné šířce.
*/
.ls-hotovo {
font-family: var(--ls-font-body);
}
.ls-hotovo__hlavicka {
margin-bottom: 2.5rem;
}
.ls-hotovo__fajfka {
display: block;
color: #2f6b4f;
margin-bottom: 1rem;
}
.ls-hotovo__nadpis {
margin: 0;
font-family: var(--ls-font-heading);
font-size: 2.25rem;
font-weight: 400;
line-height: 1.2;
color: var(--ls-ink);
}
/*
* Číslo objednávky je to první, co zákazník hledá, až se bude na
* cokoli ptát -- proto samostatný řádek, ne věta mezi ostatními.
*/
.ls-hotovo__cislo {
margin: 0.75rem 0 0;
font-size: 1rem;
color: var(--ls-body);
}
.ls-hotovo__cislo strong {
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ls-ink);
}
.ls-hotovo__veta {
margin: 0.35rem 0 0;
max-width: 44rem;
font-size: 0.9375rem;
color: var(--ls-muted);
}
.ls-hotovo__odkaz {
color: var(--ls-gold-text);
text-decoration: underline;
}
/* Sdělení dopravce (výdejní místo Zásilkovny) a podobné vsuvky. */
.ls-hotovo__sdeleni {
margin-bottom: 2rem;
font-size: 0.9375rem;
color: var(--ls-body);
}
.ls-hotovo__mrizka {
display: grid;
gap: 2.5rem;
align-items: start;
}
@media (min-width: 992px) {
.ls-hotovo__mrizka {
grid-template-columns: minmax(0, 1fr) 23rem;
}
}
.ls-hotovo__oddil + .ls-hotovo__oddil {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--ls-line);
}
.ls-hotovo__podnadpis {
margin: 0 0 1rem;
font-family: var(--ls-font-heading);
font-size: 1.25rem;
font-weight: 400;
color: var(--ls-ink);
}
/*
* Dvojice popisek/hodnota, ne odrážkový seznam: štítek vlevo drží
* jednu šířku, takže hodnoty stojí pod sebou v jedné lince.
*/
.ls-hotovo__udaje {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
gap: 0.5rem 1rem;
margin: 0;
font-size: 0.9375rem;
}
.ls-hotovo__udaje dt {
font-weight: 600;
color: var(--ls-ink);
}
.ls-hotovo__udaje dd {
margin: 0;
color: var(--ls-body);
}
.ls-hotovo__lhuta {
display: block;
font-size: 0.875rem;
color: var(--ls-muted);
}
.ls-hotovo__poznamka {
margin: 1rem 0 0;
max-width: 36rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ls-muted);
}
/*
* Stav platby posílá platební modul jako hotové HTML, takže se mu
* nedá předepsat značkování -- srovnávají se tu proto jeho vlastní
* prvky.
*/
.ls-hotovo__platba h3,
.ls-hotovo__platba h4 {
margin: 0 0 0.75rem;
font-family: var(--ls-font-heading);
font-size: 1.25rem;
font-weight: 400;
color: var(--ls-ink);
}
.ls-hotovo__platba p {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
color: var(--ls-body);
}
.ls-hotovo__platba .alert {
padding: 0.85rem 1rem;
border: 1px solid var(--ls-line);
border-radius: 2px;
background: var(--ls-surface);
color: var(--ls-body);
font-size: 0.9375rem;
}
.ls-hotovo__platba .btn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 1.25rem;
border: 1px solid var(--ls-ink);
border-radius: 2px;
background: transparent;
color: var(--ls-ink);
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: none;
}
.ls-hotovo__platba .btn:hover,
.ls-hotovo__platba .btn:focus {
background: var(--ls-ink);
color: #fff;
}
.ls-hotovo__zpet {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
font-size: 0.9375rem;
color: var(--ls-body);
text-decoration: none;
}
.ls-hotovo__zpet:hover {
color: var(--ls-ink);
}
@media (min-width: 992px) {
.ls-hotovo__souhrn {
position: sticky;
top: calc(var(--ls-vyska-hlavicky) + 1rem);
}
}